/* 首页底部导航及杂项样式（从 index.html 内联样式提取） */
.tang-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: linear-gradient(to top, rgba(139, 69, 19, 0.98), rgba(160, 82, 45, 0.95));
      background: linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #8B4513 100%);
      border-top: 4px solid #FFD700;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
      padding: 8px 0;
    }

    .bottom-nav-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 10px;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      color: #FFD700;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 215, 0, 0.3);
      position: relative;
      overflow: hidden;
      font-family: "SimSun", "STSong", serif;
    }

    .nav-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }

    .nav-item:hover::before {
      left: 100%;
    }

    .nav-item:hover {
      background: linear-gradient(135deg, #DAA520, #FFD700);
      color: #5D4037;
      border-color: #FFD700;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    }

    .nav-item.special-link {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.3));
      border-color: #FFD700;
      animation: glow 2s infinite;
    }

    .nav-item.special-link:hover {
      background: linear-gradient(135deg, #FFD700, #FFA500);
      animation: none;
    }

    @keyframes glow {
      0%, 100% { box-shadow: 0 0 5px #FFD700; }
      50% { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500; }
    }

    .nav-icon {
      font-size: 20px;
      margin-bottom: 2px;
      transition: transform 0.3s ease;
    }

    .nav-item:hover .nav-icon {
      transform: translateY(-2px) scale(1.1);
    }

    .nav-text {
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
    }

    /* 当前页面选中态：金色下划线 */
    .nav-item.active,
    .nav-item[aria-current="page"] {
      border-bottom: 2px solid #FFD700;
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(218, 165, 32, 0.2));
    }

    /* 为页面内容添加底部间距，防止被导航栏遮挡 */
    body {
      padding-bottom: 90px;
    }

    #map {
      padding-bottom: 80px;
    }
    
    /* ====== 移动端底部导航栏优化 - 极简化不遮挡 ====== */
    @media (max-width: 768px) {
      .tang-bottom-nav {
        height: 50px; /* 更矮的高度 */
        padding: 4px 0; /* 减少内边距 */
        border-top-width: 2px; /* 更细的顶部边框 */
        background: rgba(139, 69, 19, 0.9); /* 半透明背景 */
        backdrop-filter: blur(3px);
      }
      
      .bottom-nav-container {
        gap: 4px; /* 更小的间距 */
        padding: 0 5px;
        justify-content: space-around; /* 平均分布 */
      }
      
      .nav-item {
        padding: 4px 6px; /* 更小的内边距 */
        min-width: 0; /* 允许缩小 */
        border-radius: 6px;
        border-width: 1px;
        background: rgba(255, 255, 255, 0.05);
      }
      
      .nav-icon {
        font-size: 14px; /* 更小的图标 */
        margin-bottom: 1px;
      }
      
      .nav-text {
        font-size: 9px; /* 更小的文字 */
        display: block; /* 保持显示 */
      }
      
      /* 移动端：隐藏特殊链接装饰动画 */
      .nav-item.special-link {
        animation: none;
      }
      
      /* 移动端减少底部间距 */
      body {
        padding-bottom: 55px;
      }
      
      #map {
        padding-bottom: 45px;
      }
    }
    
    /* 超小屏幕底部导航栏进一步简化 */
    @media (max-width: 480px) {
      .tang-bottom-nav {
        height: 40px;
        padding: 3px 0;
      }
      
      .bottom-nav-container {
        gap: 2px;
      }
      
      .nav-item {
        padding: 3px 4px;
      }
      
      .nav-icon {
        font-size: 12px;
      }
      
      .nav-text {
        font-size: 8px;
      }
      
      body {
        padding-bottom: 45px;
      }
      
      #map {
        padding-bottom: 35px;
      }
    }
    
    /* ========================================
       手机端优化 - 快速进入模式
       ======================================== */
    @media (max-width: 768px) {
      /* 默认隐藏所有UI框架，快速进入 */
      body.mobile-fast-mode header,
      body.mobile-fast-mode .controls,
      body.mobile-fast-mode .progress-bar,
      body.mobile-fast-mode #backToTop {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
      }
      
      /* header默认折叠 */
      body.mobile-fast-mode header {
        padding: 5px 10px !important;
        transform: translateX(-50%) translateY(-100%);
      }
      
      /* 控制按钮默认折叠到角落 */
      body.mobile-fast-mode .controls {
        transform: translateY(50px);
      }
      
      /* 进度条隐藏 */
      body.mobile-fast-mode .progress-bar {
        height: 0;
        opacity: 0;
      }
      
      /* 地图全屏显示 */
      body.mobile-fast-mode #map {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
      }
      
      /* 信息卡片调整到屏幕底部 */
      body.mobile-fast-mode .info-card {
        max-height: 60vh;
        width: 100%;
        border-radius: 20px 20px 0 0;
        bottom: 0;
        top: auto;
        transform: translateX(-50%) translateY(0);
      }
      
      /* 移动端快速切换按钮 */
      .mobile-ui-toggle {
        display: none;
      }
      
      /* 手机端显示切换按钮 */
      @media (max-width: 768px) {
        .mobile-ui-toggle {
          display: flex;
          position: fixed;
          top: 10px;
          right: 10px;
          z-index: 9999;
          background: rgba(139, 69, 19, 0.9);
          color: white;
          border: none;
          border-radius: 25px;
          padding: 10px 15px;
          font-size: 14px;
          cursor: pointer;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
          align-items: center;
          gap: 8px;
        }
        
        .mobile-ui-toggle:hover {
          background: rgba(139, 69, 19, 1);
          transform: scale(1.05);
        }
        
        .mobile-ui-toggle:active {
          transform: scale(0.95);
        }
        
        .mobile-ui-toggle .toggle-icon {
          font-size: 18px;
        }
        
        /* UI元素展开状态 */
        body.mobile-ui-visible header {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateX(-50%) translateY(0) !important;
          padding: 12px 20px !important;
        }
        
        body.mobile-ui-visible .controls {
          opacity: 1 !important;
          pointer-events: auto !important;
          transform: translateY(0) !important;
        }
        
        body.mobile-ui-visible .progress-bar {
          opacity: 1 !important;
          height: 3px !important;
        }
        
        body.mobile-ui-visible #backToTop {
          opacity: 1 !important;
          pointer-events: auto !important;
        }
        
        /* 切换按钮状态 */
        .mobile-ui-toggle.ui-hidden {
          background: rgba(0, 0, 0, 0.7);
        }
        
        .mobile-ui-toggle.ui-hidden .toggle-text::before {
          content: '显示工具';
        }
        
        .mobile-ui-toggle:not(.ui-hidden) .toggle-text::before {
          content: '隐藏工具';
        }
      }
    }
    
    /* PC端保持原有样式不变 */
    @media (min-width: 769px) {
      .mobile-ui-toggle {
        display: none;
      }
    }

/* ===== 音频控制面板（原内联 style 属性提取） ===== */
.audio-panel { margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 8px; text-align: center; }
.audio-panel-title { font-size: 16px; margin-bottom: 8px; color: #333; }
.audio-panel-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.audio-panel-controls button { padding: 6px 12px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; }
.audio-current-name { font-size: 14px; color: #666; min-width: 120px; }

/* ===== 页脚备案（国家标准规范） ===== */
.site-footer {
    text-align: center;
    padding: 16px 20px 18px;
    font-size: 13px;
    color: #666;
    background: linear-gradient(135deg, #faf6ed 0%, #f0e8d6 100%);
    border-top: 2px solid #8B4513;
    line-height: 2;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'SimSun', serif;
}
.site-footer p { margin: 4px 0; }
.site-footer a {
    color: #8B4513;
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover {
    color: #DAA520;
    text-decoration: underline;
}
.site-footer .beian-badge {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    margin-top: -2px;
}
.site-footer .beian-sep {
    display: inline-block;
    margin: 0 12px;
    color: #c8b896;
}

/* ===== 移动端专用切换按钮：桌面端强制隐藏（2026-08 视觉减负）
   修复：该按钮原有规则全部嵌套在 max-width:768px 媒体查询内，
   桌面端无任何规则约束导致按钮泄漏显示 ===== */
@media (min-width: 769px) {
    .mobile-ui-toggle { display: none !important; }
}

/* ===== 首屏呼吸提示：fast-mode 1.5s 未交互时由 JS 加类，点击即撤（2026-08-03） ===== */
@media (max-width: 768px) {
    .mobile-ui-toggle.hint-breath {
        animation: toggleBreath 1.6s ease-in-out infinite;
    }
}

@keyframes toggleBreath {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(139, 69, 19, 0.55);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(139, 69, 19, 0);
    }
}
