:root {
      --primary-color: #F0B90B;
      --secondary-color: #1E2026;
      --accent-color: #2B3139;
      --light-color: #F8F9FA;

      --success-color: #0ECB81;
      --danger-color: #F6465D;
      --info-color: #17a2b8;
      --warning-color: #ffc107;
    }

    * { font-family: 'Noto Sans SC','Microsoft YaHei',sans-serif; }

    body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.7;
      /* ✅ 由 JS 动态计算：导航高度 + 公告条高度 */
      padding-top: calc(var(--nav-h,56px) + var(--announce-h,0px));
    }

    /* 导航栏 */
    .navbar { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
      color: var(--secondary-color) !important;
    }
    .navbar-brand img { margin-right: 10px; }
    .nav-link {
      font-weight: 500;
      padding: 8px 15px !important;
      border-radius: 4px;
      transition: all 0.3s;
    }
    .nav-link:hover {
      background-color: rgba(240,185,11,0.1);
      color: var(--primary-color) !important;
    }

    /* 官方公告栏 */
    .announcement-bar {
      position: fixed;
      top: var(--nav-h,56px);
      left: 0; right: 0;
      background: linear-gradient(90deg, rgba(23,162,184,0.1) 0%, rgba(23,162,184,0.05) 100%);
      border-bottom: 1px solid rgba(23,162,184,0.2);
      z-index: 1030;
      padding: 10px 0;
      transition: all 0.3s ease;
      max-height: 200px;
      overflow: hidden;
    }
    .announcement-bar.hidden { max-height: 0; padding: 0; border-bottom: none; }
    .announcement-icon {
      background-color: var(--info-color);
      color: #fff;
      border-radius: 50%;
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .announcement-content { flex: 1; }
    .announcement-title { font-weight: 600; color: var(--info-color); margin-bottom: 2px; }
    .announcement-text { color: #555; font-size: 0.9rem; }
    .announcement-close {
      color: #999;
      background: none;
      border: none;
      font-size: 1.2rem;
      line-height: 1;
      padding: 0;
      margin-left: 15px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .announcement-close:hover { color: #666; }

    /* 权威声明条 */
    .authority-bar {
      background: linear-gradient(90deg, rgba(240,185,11,0.1) 0%, rgba(240,185,11,0.05) 100%);
      border-bottom: 1px solid rgba(240,185,11,0.2);
      border-top: 1px solid rgba(240,185,11,0.2);
    }

    /* 主标题区域 */
    .hero-section {
      background: linear-gradient(135deg, #1E2026 0%, #2B3139 100%);
      color: white;
      border-radius: 15px;
      position: relative;
      overflow: hidden;
    }
    .hero-section::before{
      content:'';
      position:absolute;
      top:-50%;
      right:-20%;
      width:300px; height:300px;
      background: radial-gradient(circle, rgba(240,185,11,0.2) 0%, rgba(240,185,11,0) 70%);
      border-radius:50%;
    }

    /* 下载卡片 */
    .download-card {
      border: none;
      border-radius: 15px;
      transition: all 0.3s ease;
      overflow: hidden;
    }
    .download-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
    }
    .card-header {
      border-radius: 15px 15px 0 0 !important;
      border: none;
      padding: 20px;
    }
    .feature-list li { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
    .feature-list li:last-child { border-bottom: none; }

    /* 功能特色图标 */
    .feature-icon {
      transition: all 0.3s ease;
      height: 100%;
      border: 1px solid rgba(0,0,0,0.05);
    }
    .feature-icon:hover {
      transform: translateY(-5px);
      border-color: var(--primary-color);
      box-shadow: 0 10px 20px rgba(240,185,11,0.1);
    }
    .icon-wrapper {
      width: 70px; height: 70px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, rgba(240,185,11,0.1) 0%, rgba(240,185,11,0.2) 100%);
    }

    /* 教程步骤 */
    .tutorial-steps { position: relative; }
    .tutorial-steps::before{
      content:'';
      position:absolute;
      left:25px;
      top:0; bottom:0;
      width:3px;
      background: linear-gradient(to bottom, var(--primary-color) 0%, rgba(240,185,11,0.3) 100%);
      z-index:1;
    }
    .step-card { position: relative; z-index: 2; }
    .step-number{
      width:50px; height:50px;
      line-height:50px;
      text-align:center;
      font-weight:bold;
      font-size:1.2rem;
      background: linear-gradient(135deg, var(--primary-color) 0%, #f8d12f 100%);
      flex-shrink:0;
    }
    .step-content{
      border-left:3px solid var(--primary-color);
      background-color: rgba(240,185,11,0.03);
    }

    /* FAQ 手风琴 */
    .card-header button {
      text-decoration:none !important;
      color: var(--secondary-color) !important;
      font-weight: 600;
    }
    .card-header button:hover { color: var(--primary-color) !important; }
    .card-header button[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
    .card-header button .fa-chevron-down { transition: transform 0.3s; }

    /* 安全验证区域 */
    .security-badge{
      border:2px dashed rgba(240,185,11,0.3);
      border-radius:10px;
      padding:15px;
    }

    /* 公告时间线 */
    .announcement-timeline{ position: relative; }
    .announcement-timeline::before{
      content:'';
      position:absolute;
      left:15px; top:0; bottom:0;
      width:2px;
      background-color: rgba(0,0,0,0.1);
    }
    .timeline-item{ position:relative; padding-left:40px; margin-bottom:25px; }
    .timeline-dot{
      position:absolute;
      left:8px; top:5px;
      width:16px; height:16px;
      border-radius:50%;
      background-color: var(--primary-color);
      z-index:2;
    }
    .timeline-date{ font-size:0.85rem; color:#666; margin-bottom:5px; }
    .timeline-content{
      background-color:white;
      padding:15px;
      border-radius:8px;
      border-left:3px solid var(--primary-color);
      box-shadow:0 3px 10px rgba(0,0,0,0.05);
    }

    /* 下载按钮 */
    .download-btn{
      background: linear-gradient(135deg, var(--primary-color) 0%, #f8d12f 100%);
      border:none;
      border-radius:50px;
      padding:15px 30px;
      font-weight:700;
      font-size:1.1rem;
      color: var(--secondary-color);
      transition: all 0.3s;
      display:inline-block;
      text-align:center;
      box-shadow: 0 5px 15px rgba(240,185,11,0.3);
    }
    .download-btn:hover{
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(240,185,11,0.4);
      color: var(--secondary-color);
      text-decoration:none;
    }
    .download-btn-secondary{
      background: linear-gradient(135deg, #6c757d 0%, #868e96 100%);
      box-shadow: 0 5px 15px rgba(108,117,125,0.3);
    }

    /* 页脚 */
    footer { background: linear-gradient(135deg, #1a1c23 0%, #2b2f3a 100%); }
    footer a { color: rgba(255,255,255,0.7); transition: color 0.3s; }
    footer a:hover { color: var(--primary-color); text-decoration:none; }
    .copyright { border-top: 1px solid rgba(255,255,255,0.1); }

    /* ✅ 数字等宽，滚动时不抖 */
    #badgeDownloadsToday{ font-variant-numeric: tabular-nums; }

    /* ✅ 轻微闪动强调 */
    @keyframes dlPulse {
      0%   { transform: translateZ(0) scale(1);    opacity: 1; }
      50%  { transform: translateZ(0) scale(1.02); opacity: .92; }
      100% { transform: translateZ(0) scale(1);    opacity: 1; }
    }
    #badgeDownloadsToday.dl-pulse{ animation: dlPulse 220ms ease-out; }

    /* 动画 */
    @keyframes fadeInUp {
      from { opacity:0; transform: translateY(20px); }
      to   { opacity:1; transform: translateY(0); }
    }
    .fade-in-up,.delay-1,.delay-2{ opacity:0; }
    .in-view{ opacity:1; animation: fadeInUp 0.6s ease forwards; }
    .delay-1{ animation-delay:0.2s; }
    .delay-2{ animation-delay:0.4s; }

    /* 公告闪烁动画 */
    @keyframes pulse {
      0% { box-shadow:0 0 0 0 rgba(23,162,184,0.4); }
      70%{ box-shadow:0 0 0 10px rgba(23,162,184,0); }
      100%{ box-shadow:0 0 0 0 rgba(23,162,184,0); }
    }
    .announcement-pulse{ animation: pulse 2s infinite; }

    /* 响应式 */
    @media (max-width: 768px) {
      .hero-section{
        border-radius:0;
        margin-left:-15px;
        margin-right:-15px;
        padding-left:15px;
        padding-right:15px;
      }
      .tutorial-steps::before{ left:15px; }
      .step-content{ margin-left:30px !important; }
      .feature-icon{ margin-bottom:15px; }
      .download-btn{ width:100%; margin-bottom:10px; }
      .announcement-timeline::before{ left:10px; }
      .timeline-item{ padding-left:30px; }
      .timeline-dot{ left:3px; }
    }