/* ==================== 移动端全面优化CSS ==================== */
/* 版本: 20260120-v2 */
/* 适用于 H+美术馆网站 */
/* 专门针对内联样式的强制覆盖 */

/* ========================================
   CSS变量 - 移动端专用
   ======================================== */
:root {
  /* 移动端字体 */
  --mobile-font-xs: 12px;
  --mobile-font-sm: 14px;
  --mobile-font-base: 16px;
  --mobile-font-lg: 18px;
  --mobile-font-xl: 20px;
  --mobile-font-2xl: 24px;
  --mobile-font-3xl: 28px;
  
  /* 移动端间距 */
  --mobile-space-xs: 8px;
  --mobile-space-sm: 12px;
  --mobile-space-md: 16px;
  --mobile-space-lg: 20px;
  --mobile-space-xl: 24px;
  --mobile-space-2xl: 32px;
  --mobile-space-3xl: 40px;
  
  /* 移动端颜色 */
  --mobile-bg: #ffffff;
  --mobile-text: #333333;
  --mobile-border: #e0e0e0;
  --mobile-shadow: rgba(0, 0, 0, 0.1);
  
  /* Header高度 */
  --mobile-header-height: 60px;
  --tablet-header-height: 80px;
}

/* ========================================
   手机端样式 (< 768px)
   ======================================== */
@media (max-width: 767px) {
  /* 基础重置 */
  * {
    box-sizing: border-box !important;
  }
  
  /* ========================================
     语言切换内容 - 保持隐藏状态
     ======================================== */
  /* 英文模式下隐藏中文内容 */
  html[lang="en"] [data-lang-cn],
  html[lang="en"] [data-lang-cn] * {
    display: none !important;
  }
  
  /* 中文模式下隐藏英文内容 */
  html[lang="zh-CN"] [data-lang-en],
  html[lang="zh-CN"] [data-lang-en] * {
    display: none !important;
  }
  
  /* 默认（无lang属性时）隐藏英文内容 */
  html:not([lang]) [data-lang-en],
  html:not([lang]) [data-lang-en] * {
    display: none !important;
  }
  
  html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    overflow-x: hidden !important;
  }
  
  body {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 触摸优化 */
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }
  
  /* ========================================
     主容器 - 强制100%宽度
     ======================================== */
  .main-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    transform: none !important;
    position: relative !important;
  }
  
  /* ========================================
     Header 移动端
     ======================================== */
  header,
  .header {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    background: white !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #eee !important;
  }
  
  header.hide,
  .header.hide {
    transform: translateY(-100%) !important;
  }
  
  /* 隐藏原始 header-right 容器（桌面端专用） */
  .header-right {
    display: none !important;
  }
  
  /* 移动端右侧容器（语言切换 + 汉堡菜单） */
  .mobile-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    height: 60px !important;
  }
  
  /* 语言切换 - 移动端显示 */
  .mobile-header-right .header-lang {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13px !important;
    color: #333 !important;
    height: auto !important;
    line-height: 1 !important;
    /* 重置其他CSS文件设置的定位和变换 */
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
  
  .mobile-header-right .header-lang span {
    cursor: pointer !important;
    min-height: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  
  .mobile-header-right .header-lang .lang-zh,
  .mobile-header-right .header-lang .lang-en {
    color: #999 !important;
    transition: color 0.2s ease !important;
  }
  
  .mobile-header-right .header-lang .lang-zh.active,
  .mobile-header-right .header-lang .lang-en.active {
    color: #000 !important;
  }
  
  .mobile-header-right .header-lang .lang-zh:hover,
  .mobile-header-right .header-lang .lang-en:hover {
    color: #000 !important;
  }
  
  .mobile-header-right .header-lang-divider {
    display: inline !important;
    color: #ccc !important;
  }
  
  /* 强制导航菜单可见并独立于父容器 - 即使父元素隐藏 */
  .header-nav,
  nav.header-nav,
  .header-right .header-nav {
    display: flex !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    background: white !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    z-index: 999 !important;
    transform: none !important;
    visibility: visible !important;
  }
  
  /* Header Logo - 放大以匹配60px header高度 */
  .header-logo {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .header-logo img {
    width: auto !important;
    height: 40px !important;
    max-height: 40px !important;
    display: block !important;
  }
  
  /* 汉堡菜单按钮 - 移动端显示 */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  
  .mobile-menu-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #000 !important;
    margin: 3px 0 !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
  
  /* 移动端导航菜单 */
  .header-nav,
  nav.header-nav {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    background: white !important;
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease !important;
    opacity: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    z-index: 999 !important;
    transform: none !important;
    display: flex !important;
  }
  
  .header-nav.mobile-open,
  nav.header-nav.mobile-open,
  .header-right .header-nav.mobile-open {
    max-height: calc(100vh - 60px) !important;
    opacity: 1 !important;
    padding: 16px 0 !important;
    pointer-events: auto !important;
  }
  
  .header-nav a,
  nav.header-nav a {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 18px !important;
    color: #333 !important;
    border-bottom: none !important;
    text-decoration: none;
  }
  
  .header-nav a:last-child,
  nav a:last-child {
    border-bottom: none;
  }
  
  .header-nav a:active,
  nav a:active {
    background: #f5f5f5;
  }
  
  /* 桌面端语言切换（在header-right中）在移动端隐藏 */
  .header-right .header-lang {
    display: none !important;
  }
  
  /* ========================================
     Hero 轮播移动端 - 强制覆盖
     ======================================== */
  .hero,
  #hero {
    width: 100% !important;
    max-width: 100vw !important;
    height: 56vw !important;
    min-height: 200px !important;
    max-height: 300px !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
  }
  
  .hero-slide {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
  }
  
  .hero-slide img {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Banner箭头 */
  .banner-arrow,
  .hero-arrow {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    padding: 8px !important;
  }
  
  .banner-arrow.left,
  .hero-arrow.left,
  #heroArrowLeft {
    left: 8px !important;
  }
  
  .banner-arrow.right,
  .hero-arrow.right,
  #heroArrowRight {
    right: 8px !important;
  }
  
  .banner-arrow img,
  .hero-arrow img {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* Banner指示器 */
  .hero-dots,
  .banner-dots,
  #heroDots {
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 8px !important;
  }
  
  .hero-dot,
  .banner-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  /* ========================================
     开放时间移动端 - 强制覆盖内联样式
     ======================================== */
  .opening-hours {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 40px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  /* 强制覆盖所有内联 position:absolute 子元素 */
  .opening-hours > div,
  .opening-hours > div[style],
  .opening-hours > div[style*="position"],
  .opening-hours > div[style*="absolute"],
  .opening-hours div[style*="position:absolute"],
  .opening-hours div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 0 16px 0 !important;
  }
  
  .opening-hours .title-35,
  .opening-hours span.title-35 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    display: block !important;
    text-align: center !important;
  }
  
  .opening-hours .text-18,
  .opening-hours div[class*="text"] {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  
  /* 分割线隐藏 */
  .opening-hours-divider {
    display: none !important;
  }
  
  /* 二维码区域容器 - 居中对齐，只显示当前语言版本 */
  .opening-hours > div[style*="left:1272px"]:not([style*="display:none"]),
  .opening-hours > div[style*="left: 1272px"]:not([style*="display:none"]) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 24px 0 !important;
    padding: 20px 16px !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  
  /* 确保隐藏的二维码div保持隐藏 */
  .opening-hours > div[style*="display:none"],
  .opening-hours > div[style*="display: none"] {
    display: none !important;
  }
  
  /* 二维码区域文字居中 */
  .opening-hours > div[style*="left:1272px"]:not([style*="display:none"]) .text-18,
  .opening-hours > div[style*="left: 1272px"]:not([style*="display:none"]) .text-18 {
    position: static !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
    color: #333 !important;
  }
  
  /* 二维码图片居中 */
  .opening-hours img {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    margin: 8px auto !important;
  }
  
  .opening-hours img[src*="qr"],
  .opening-hours img[src*="qrcode"] {
    width: 160px !important;
    height: 160px !important;
  }
  
  /* 隐藏二维码框架图片 */
  .opening-hours img[src*="frame"],
  .opening-hours img[src*="qrcode-frame"] {
    display: none !important;
  }
  
  /* ========================================
     展览活动移动端 - 强制覆盖
     ======================================== */
  .exhibitions {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 40px 0 !important;
    overflow: visible !important;
  }
  
  .exhibitions > div,
  .exhibitions > div[style],
  .exhibitions > div[style*="position"],
  .exhibitions div[style*="position:absolute"],
  .exhibitions div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 0 16px !important;
    margin-bottom: 20px !important;
  }
  
  .exhibitions .title-35 {
    font-size: 22px !important;
    text-align: left !important;
  }
  
  /* 展览箭头隐藏 */
  .exhibitions-arrow {
    display: none !important;
  }
  
  /* 展览指示器 - 移动端隐藏 */
  .exhibitions-indicator {
    display: none !important;
  }
  
  .exhibitions-indicator,
  .exhibitions-indicator-active,
  .exhibitions-indicator-base {
    display: none !important;
    margin-top: 20px !important;
    padding: 0 16px !important;
  }
  
  .exhibitions-indicator-base {
    width: 100% !important;
    max-width: 200px !important;
  }
  
  /* 卡片容器 - 单张滑动 */
  .exhibitions-cards-container {
    width: 100% !important;
    max-width: 100vw !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 24px 20px !important;
  }
  
  .exhibitions-cards-container::-webkit-scrollbar {
    display: none;
  }
  
  .exhibitions-cards-wrapper,
  #exhibitionsCardsWrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: max-content !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
    padding-right: 8px !important;
  }
  
  /* 展览卡片 - 单张显示，左右滑动 - 高优先级覆盖 */
  .exhibitions .exhibition-card,
  .exhibitions-cards-wrapper .exhibition-card,
  body .exhibition-card,
  .exhibition-card {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    height: auto !important;
    scroll-snap-align: center;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* 图片在最上方 */
  .exhibition-card .card-image,
  .exhibition-card img.card-image {
    order: 1 !important;
  }
  
  .exhibitions .exhibition-card .card-image,
  .exhibitions .exhibition-card img.card-image,
  body .exhibition-card .card-image,
  body .exhibition-card img.card-image,
  .exhibition-card .card-image,
  .exhibition-card img.card-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 552/420 !important; /* 保持原始比例 */
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  
  .exhibition-card .card-tag {
    position: static !important;
    left: auto !important;
    top: auto !important;
    order: 2 !important; /* 图片下方，标题上方 */
    margin: 12px 0 4px 0 !important;
  }
  
  .exhibition-card .card-title {
    position: static !important;
    left: auto !important;
    top: auto !important;
    order: 3 !important; /* 标签下方 */
    padding: 0 0 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 标题截断 - 中英文通用 */
  .exhibition-card .card-title .title-30,
  .exhibition-card .card-title span,
  .exhibition-card .card-title [data-text-cn],
  .exhibition-card .card-title [data-text-en] {
    font-size: 18px !important;
    line-height: 1.4 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  
  .exhibition-card .card-date {
    position: static !important;
    left: auto !important;
    top: auto !important;
    order: 4 !important; /* 标题下方 */
  }
  
  .exhibition-card .card-date .text-18,
  .exhibition-card .card-date span {
    font-size: 14px !important;
    color: #666 !important;
  }
  
  /* ========================================
     关于我们移动端 - 强制覆盖
     ======================================== */
  .about {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 40px 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .about > div,
  .about > div[style],
  .about > div[style*="position"],
  .about div[style*="position:absolute"],
  .about div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 16px !important;
  }
  
  /* 建筑图片容器 - 移除固定高度，使用更精确的选择器 */
  .about > div[style*="height:645px"],
  .about > div[style*="height: 645px"] {
    height: auto !important;
  }
  
  .about img,
  .about div img {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    display: block !important;
  }
  
  .about .title-35 {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  
  .about .text-18,
  .about span.text-18 {
    font-size: 15px !important;
    line-height: 1.8 !important;
    text-align: justify !important;
  }
  
  /* ========================================
     交通位置移动端 - 强制覆盖
     ======================================== */
  .location {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 40px 16px !important;
    background: #f9f9f9 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .location > div,
  .location > div[style],
  .location > div[style*="position"],
  .location div[style*="position:absolute"],
  .location div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 12px !important;
    display: block !important;
    flex-direction: column !important;
  }
  
  .location .title-35 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }
  
  .location .text-18 {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  
  .location img,
  .location img[src*="map"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 20px !important;
    border-radius: 8px !important;
  }
  
  /* 隐藏位置图标的行内flex布局 */
  .location div[style*="display:flex"],
  .location div[style*="display: flex"] {
    display: block !important;
    flex-direction: column !important;
  }
  
  .location div[style*="gap"] {
    gap: 8px !important;
  }
  
  /* 隐藏位置图标 */
  .location img[src*="icon-location"] {
    display: none !important;
  }
  
  /* ========================================
     Footer 移动端 - 强制覆盖
     ======================================== */
  footer,
  .footer {
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 40px 16px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  footer > div,
  .footer > div,
  footer > div[style],
  .footer > div[style],
  footer div[style*="position:absolute"],
  .footer div[style*="position:absolute"],
  footer div[style*="position: absolute"],
  .footer div[style*="position: absolute"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }
  
  /* Footer Logo */
  footer img[src*="footer-logo"],
  .footer img[src*="footer-logo"] {
    width: 80px !important;
    height: auto !important;
    margin-bottom: 24px !important;
  }
  
  /* Footer导航 */
  footer span[style*="font-size"] a,
  .footer span[style*="font-size"] a {
    font-size: 15px !important;
    display: inline-block !important;
    padding: 8px 12px !important;
  }
  
  /* Footer联系信息 */
  footer .text-16,
  footer .text-14,
  .footer .text-16,
  .footer .text-14 {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }
  
  /* 社交媒体图标 */
  footer div[style*="display:flex"][style*="gap"],
  .footer div[style*="display:flex"][style*="gap"],
  footer div[style*="display: flex"][style*="gap"],
  .footer div[style*="display: flex"][style*="gap"] {
    gap: 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    display: flex !important;
  }
  
  .social-icon-wrapper {
    width: 18px !important;
    height: 18px !important;
  }
  
  .social-icon {
    width: 18px !important;
    height: 18px !important;
  }
  
  /* 二维码弹出 - 移动端禁用hover */
  .social-qrcode {
    display: none !important;
  }
  
  /* Footer底部分割线 - 隐藏独立的分割线div，使用版权上的border-top代替 */
  footer > div[style*="width:1860px"],
  .footer > div[style*="width:1860px"],
  footer > div[style*="width: 1860px"],
  .footer > div[style*="width: 1860px"] {
    display: none !important;
  }
  
  /* Footer版权 - 确保显示在最下方 */
  footer > div[style*="left:50%"],
  .footer > div[style*="left:50%"],
  footer > div[style*="left: 50%"],
  .footer > div[style*="left: 50%"] {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    width: calc(100% - 32px) !important;
    left: auto !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  
  /* ========================================
     通用文字样式移动端
     ======================================== */
  .title-35,
  span.title-35 {
    font-size: 22px !important;
  }
  
  .title-30,
  span.title-30 {
    font-size: 18px !important;
  }
  
  .text-18,
  span.text-18 {
    font-size: 15px !important;
  }
  
  .text-16,
  span.text-16 {
    font-size: 14px !important;
  }
  
  .text-14,
  span.text-14 {
    font-size: 12px !important;
  }
  
  /* ========================================
     隐藏桌面端装饰元素
     ======================================== */
  .desktop-only,
  .parallax-section {
    display: none !important;
  }
  
  /* ========================================
     触摸目标优化
     ======================================== */
  a, button, [role="button"], .clickable {
    min-height: 44px;
  }
  
  /* 表单输入优化 */
  input, textarea, select {
    font-size: 16px !important; /* 防止iOS缩放 */
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
  }
  
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #333;
  }
  
  /* ========================================
     滚动动画简化
     ======================================== */
  .scroll-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* ========================================
     横屏优化
     ======================================== */
  @media (orientation: landscape) {
    .hero,
    #hero {
      height: 45vw !important;
      max-height: 280px !important;
    }
    
    .header-nav.mobile-open,
    nav.mobile-open {
      max-height: 60vh;
      overflow-y: auto;
    }
  }
  
  /* ========================================
     作品画廊 - 移动端单张显示+滑动切换
     ======================================== */
  .works-section {
    padding: 20px 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  
  .works-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
  }
  
  .works-title {
    font-size: 20px !important;
  }
  
  .works-nav {
    display: flex !important;
    gap: 8px !important;
  }
  
  .works-nav-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
  }
  
  .works-nav-btn img {
    width: 100% !important;
    height: 100% !important;
  }
  
  .works-gallery {
    width: 100% !important;
    overflow: hidden !important;
  }
  
  .works-gallery-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    transition: transform 0.3s ease !important;
    width: max-content !important;
  }
  
  .work-card {
    flex-shrink: 0 !important;
    width: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }
  
  .work-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
  }
  
  /* ========================================
     侧边栏导航 - 移动端左对齐水平滚动
     ======================================== */
  .sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 !important;
    margin: 0px 0 0px 0 !important;
    display: block !important;
  }
  
  .sidebar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 16px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  .sidebar::-webkit-scrollbar,
  .sidebar-nav::-webkit-scrollbar {
    display: none !important;
  }
  
  .sidebar a,
  .sidebar-nav a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 14px 16px 8px 0 !important;
    color: #999 !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
  }
  
  .sidebar a.active,
  .sidebar-nav a.active {
    color: #000 !important;
    border: none !important;
    border-bottom: none !important;
  }
  
  /* 隐藏所有下划线相关元素 */
  .sidebar-indicator,
  .sidebar a::after,
  .sidebar-nav a::after,
  .sidebar a::before,
  .sidebar-nav a::before {
    display: none !important;
  }
  
  /* ========================================
     内容区域 - 移动端防溢出
     ======================================== */
  .content-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 16px !important;
    overflow-x: hidden !important;
  }
  
  .banner {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
  }
  
  .banner img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  .divider {
    width: 100% !important;
    margin: 20px 0 !important;
  }
  
  .section {
    width: 100% !important;
    padding: 0 !important;
  }
  
  .section-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
  }
  
  .section-subtitle {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }
  
  .section-text {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  
  .section-text img {
    width: 100% !important;
    height: auto !important;
    margin: 16px 0 !important;
  }
  
  /* 博物馆信息区域 */
  .museum-info {
    margin-bottom: 24px !important;
  }
  
  /* ========================================
     exhibition-detail.html、event-detail.html 移动端优化
     ======================================== */
  
  /* 页面整体不溢出，banner避开header */
  .main-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-top: 60px !important;
    box-sizing: border-box !important;
  }
  
  /* Banner全宽显示 */
  .main-wrapper > .banner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .main-wrapper > .banner img {
    width: 100% !important;
    height: auto !important;
  }
  
  .content,
  .title-section,
  .description,
  .curator {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* 内容区域统一左右边距 */
  .content > *,
  .title-section,
  .description,
  .curator {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* 标题自适应 */
  .title-section h1,
  #exhibitionTitle,
  #eventTitle {
    font-size: 22px !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
  }
  
  /* 展出时间、地点信息 - 纵向排列，字体缩小，间距统一 */
  .info-boxes-wrapper {
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 16px !important;
  }
  
  .info-box {
    min-width: 100% !important;
    flex: none !important;
    padding: 10px 16px !important;
  }
  
  .info-dot {
    top: 22px !important;
    left: 16px !important;
    width: 8px !important;
    height: 8px !important;
  }
  
  .info-content {
    margin-left: 20px !important;
  }
  
  .info-label {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  .info-date {
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-wrap: break-word !important;
  }
  
  /* event-detail.html 信息框样式 */
  .info-box .label {
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding-left: 20px !important;
  }
  
  .info-box .label::before {
    width: 8px !important;
    height: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  
  .info-box .value {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* 描述文字 */
  .description p,
  .description {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  
  /* 策展人 */
  .curator {
    font-size: 14px !important;
  }
  
  /* 作品展示 - 隐藏导航按钮，水平滚动 */
  .works-section {
    padding: 20px 0 !important;
    overflow: hidden !important;
  }
  
  .works-header {
    padding: 0 10px !important;
    margin-bottom: 12px !important;
  }
  
  .works-title {
    font-size: 18px !important;
  }
  
  /* 隐藏作品导航按钮 */
  .works-nav,
  .works-nav-btn,
  #worksGalleryPrev,
  #worksGalleryNext {
    display: none !important;
  }
  
  /* 作品画廊 - 水平滚动 */
  .works-gallery {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 10px !important;
  }
  
  .works-gallery::-webkit-scrollbar {
    display: none !important;
  }
  
  .works-gallery-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
  }
  
  .work-card {
    flex-shrink: 0 !important;
    width: 70vw !important;
    max-width: 280px !important;
    cursor: pointer !important;
  }
  
  .work-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }
  
  /* ========================================
     exhibitions.html、events.html 列表页纵向排列
     ======================================== */
  .exhibitions-grid,
  .events-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    width: 100% !important;
  }
  
  .exhibition-card,
  .event-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  
  .exhibition-card .card-image,
  .event-card .card-image,
  .exhibition-card img,
  .event-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  .exhibition-card .card-content,
  .event-card .card-content {
    padding: 12px 0 !important;
  }
  
  .exhibition-card .card-title,
  .event-card .card-title {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }
  
  .exhibition-card .card-date,
  .event-card .card-date {
    font-size: 14px !important;
  }
  
  /* 分页按钮 */
  .pagination {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
  
  .pagination-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  .museum-info h1 {
    font-size: 24px !important;
    line-height: 1.4 !important;
  }
  
  .museum-info .subtitle {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  
  .museum-info .details {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  
  .museum-info .details-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* ========================================
     visit.html、support.html、shop.html 二级菜单隐藏
     ======================================== */
  body.page-visit .sidebar,
  body.page-support .sidebar,
  body.page-shop .sidebar {
    display: none !important;
  }
  
  /* 没有sidebar的页面，移除额外的padding-top */
  body.page-visit .main-content,
  body.page-support .main-content,
  body.page-shop .main-content {
    padding-top: 0 !important;
  }
  
  /* visit.html 联系图标隐藏 */
  .contact-icons {
    display: none !important;
  }
  
  /* ========================================
     所有子页面Banner - 统一边距
     距离主菜单20px，距离页面左右各10px
     父容器padding为16px，banner用负margin调整为10px
     ======================================== */
  .main-banner,
  .banner {
    width: calc(100% + 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 -6px 8px -6px !important;
    padding: 0 !important;
  }
  
  .main-banner img,
  .banner img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 !important;
  }
  
  /* ========================================
     visit.html 实景展示 - 隐藏左右按钮，图片水平滚动
     ======================================== */
  .gallery-section {
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  .gallery-section .divider {
    margin: 8px 16px !important;
  }
  
  /* 隐藏画廊控制按钮 */
  .gallery-controls {
    display: none !important;
  }
  
  /* 画廊卡片容器 - 水平滚动 */
  .gallery-cards-container {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 0 16px 8px 16px !important;
    margin-top: 8px !important;
  }
  
  .gallery-cards-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .gallery-cards-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: max-content !important;
    transform: none !important;
    transition: none !important;
  }
  
  /* 画廊卡片 - 自适应宽度，保持比例 */
  .gallery-card {
    flex-shrink: 0 !important;
    width: 70vw !important;
    max-width: 280px !important;
    height: auto !important;
  }
  
  .gallery-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    display: block !important;
  }
  
  /* 视频卡片播放图标 */
  .gallery-card-video::after {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ========================================
   平板样式 (768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
    transform: none !important;
  }
  
  /* Header */
  .header {
    height: var(--tablet-header-height) !important;
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  
  .header-logo img {
    width: 60px !important;
    height: auto !important;
  }
  
  /* 平板显示导航，但调整布局 */
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .header-nav {
    position: absolute !important;
    right: 100px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex-direction: row !important;
    gap: 24px !important;
    max-height: none !important;
    opacity: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .header-nav a {
    font-size: 16px !important;
    padding: 8px !important;
    border: none !important;
  }
  
  .header-lang {
    display: flex !important;
    right: 20px !important;
    font-size: 14px !important;
  }
  
  /* Hero */
  .hero {
    height: 50vh !important;
    min-height: 350px !important;
    max-height: 500px !important;
    margin-top: var(--tablet-header-height) !important;
  }
  
  /* 展览卡片 */
  .exhibition-card {
    flex: 0 0 300px;
    width: 300px !important;
  }
  
  .exhibition-card .card-image,
  .exhibition-card img.card-image {
    width: 300px !important;
    height: 400px !important;
  }
  
  /* 各区块 */
  .hours,
  .exhibitions,
  .about,
  .location,
  .footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  
  /* 字体调整 */
  .title-35 {
    font-size: 28px !important;
  }
  
  .title-30 {
    font-size: 24px !important;
  }
}

/* ========================================
   小型桌面 (1025px - 1279px)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1279px) {
  .main-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .header {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  
  .header.hide {
    transform: translateY(-100%) !important;
  }
  
  /* 展览卡片 */
  .exhibition-card {
    width: 320px !important;
  }
  
  .exhibition-card .card-image {
    width: 320px !important;
    height: 427px !important;
  }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
  .header,
  .mobile-menu-toggle,
  .banner-arrow,
  .hero-arrow,
  .hero-dots,
  .exhibitions-arrow,
  .exhibitions-indicator {
    display: none !important;
  }
  
  .main-wrapper,
  .hero,
  .hours,
  .exhibitions,
  .about,
  .location,
  .footer {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 20px !important;
  }
  
  * {
    box-shadow: none !important;
  }
}

/* ========================================
   减少动画（无障碍）
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 深色模式已通过 HTML meta 标签禁用 */