:root {
      --glass-card-bg: rgba(255, 255, 255, 0.88);
      --glass-border: rgba(255, 255, 255, 0.95);
      --glass-border-hover: rgba(197, 48, 38, 0.5);
      --primary-red: #c53026;
      --text-main: #1a202c;
      --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
      --shadow-hover: 0 25px 50px rgba(197, 48, 38, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    
    body {
      background: linear-gradient(135deg, #fce7f3 0%, #ede9fe 25%, #dbeafe 50%, #ccfbf1 75%, #fef3c7 100%);
      background-attachment: fixed;
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      position: relative;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      top: -20vh;
      left: -10vw;
      width: 120vw;
      height: 140vh;
      background: 
        radial-gradient(circle at 20% 20%, rgba(244, 114, 182, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 80% 15%, rgba(167, 139, 250, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 50% 60%, rgba(96, 165, 250, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(52, 211, 153, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(251, 191, 36, 0.2) 0%, transparent 45%);
      z-index: 0;
      pointer-events: none;
      filter: blur(80px);
    }

    .main-container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* 顶部导航栏 */
    .top-header-card {
      background: var(--glass-card-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-subtle);
      transition: all 0.3s ease;
    }
    @media (max-width: 768px) {
      .top-header-card {
        flex-direction: column;
        gap: 12px;
        padding: 12px 14px;
        align-items: stretch;
      }
    }

    .logos-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    /* 顶部 Logo 放大镜悬停与环绕光环特效容器 */
    .brand-logo-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transform-origin: center center;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .brand-logo-wrapper::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 16px;
      background: linear-gradient(45deg, #ff7eb3, #7afcff, #fbcfe8, #a78bfa, #fef08a);
      background-size: 300% 300%;
      z-index: -1;
      opacity: 0;
      filter: blur(6px);
      transition: opacity 0.4s ease;
      animation: rainbowGlow 4s linear infinite;
    }

    @keyframes rainbowGlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .brand-logo-wrapper:hover, .brand-logo-wrapper:active {
      transform: scale(1.08) translateY(-2px);
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(197, 48, 38, 0.4);
      box-shadow: 0 12px 28px rgba(197, 48, 38, 0.2);
    }
    .brand-logo-wrapper:hover::before {
      opacity: 1;
    }

    .brand-logo-img {
      height: 64px;
      width: auto;
      max-height: 64px;
      max-width: 220px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }

    .top-links-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .top-link-item {
      display: flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: #2d3748;
      font-size: 13px;
      font-weight: 700;
      padding: 7px 12px;
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 2px 6px rgba(0,0,0,0.02);
      transition: all 0.3s ease;
    }
    .top-link-item:hover, .top-link-item:active {
      color: var(--primary-red);
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(197, 48, 38, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(197, 48, 38, 0.15);
    }
    .top-link-item svg { width: 14px; height: 14px; fill: var(--primary-red); }

    /* 线路测速行 */
    .speed-lines-card {
      background: var(--glass-card-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 16px 14px;
      box-shadow: var(--shadow-subtle);
      display: grid;
      grid-template-columns: repeat(6, 1fr) 150px;
      gap: 10px;
      align-items: center;
    }
    @media (max-width: 1024px) {
      .speed-lines-card { grid-template-columns: repeat(3, 1fr); }
      .overview-btn-box { grid-column: span 3; }
    }
    @media (max-width: 580px) {
      .speed-lines-card { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 10px; }
      .overview-btn-box { grid-column: span 2; }
    }

    .line-card-cell {
      position: relative;
      background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
      border: 1.5px solid rgba(226, 232, 240, 0.9);
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.02);
      transform-origin: center center;
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 1;
    }
    .speed-lines-card:hover .line-card-cell {
      opacity: 0.7;
      filter: blur(0.4px);
      transform: scale(0.97);
    }
    .speed-lines-card .line-card-cell:hover, .speed-lines-card .line-card-cell:active {
      opacity: 1;
      filter: blur(0);
      background: #ffffff;
      border-color: var(--primary-red);
      transform: scale(1.12) translateY(-4px);
      box-shadow: 0 16px 32px rgba(197, 48, 38, 0.22), 0 0 16px rgba(226, 165, 58, 0.25);
      z-index: 10;
    }

    .cell-line-title { font-size: 14px; font-weight: 800; color: #1a202c; }
    .cell-line-ping {
      font-size: 12px; font-weight: 700; color: #276749;
      display: flex; align-items: center; justify-content: center; gap: 4px;
    }
    .cell-line-ping::before {
      content: ''; width: 6px; height: 6px; background: #38a169; border-radius: 50%;
      box-shadow: 0 0 6px #38a169; animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1); }
    }

    .overview-btn-box {
      background: linear-gradient(135deg, #e53e3e, #c53026);
      border: 1.5px solid rgba(255, 255, 255, 0.6);
      border-radius: 12px; height: 100%; min-height: 56px;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
      box-shadow: 0 6px 20px rgba(197, 48, 38, 0.35);
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); letter-spacing: 0.06em;
    }
    .overview-btn-box:hover, .overview-btn-box:active {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 12px 28px rgba(197, 48, 38, 0.45); filter: brightness(1.1);
    }

    /* 六大快捷导航按钮 */
    .quick-action-nav {
      background: var(--glass-card-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: var(--shadow-subtle);
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }
    .quick-action-button {
      position: relative;
      isolation: isolate;
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.9);
      border-radius: 14px;
      background: linear-gradient(135deg, #fff 0%, #fff7f7 46%, #fee2e2 100%);
      color: #7f1d1d;
      text-decoration: none;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.04em;
      box-shadow: 0 6px 16px rgba(197, 48, 38, 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
      transform: translateZ(0);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, color 0.25s ease, border-color 0.25s ease;
    }
    .quick-action-button::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: -80%;
      left: -30%;
      width: 42%;
      height: 260%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
      transform: rotate(24deg) translateX(-260%);
      transition: transform 0.65s ease;
    }
    .quick-action-button::after {
      content: '↗';
      position: absolute;
      right: 9px;
      top: 6px;
      opacity: 0.35;
      font-size: 14px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .quick-action-button:hover,
    .quick-action-button:focus-visible,
    .quick-action-button:active {
      color: var(--primary-red);
      border-color: rgba(197, 48, 38, 0.5);
      transform: translateY(-5px) scale(1.04);
      box-shadow: 0 18px 30px rgba(197, 48, 38, 0.22), 0 0 0 4px rgba(197, 48, 38, 0.08);
      outline: none;
    }
    .quick-action-button:hover::before,
    .quick-action-button:focus-visible::before,
    .quick-action-button:active::before {
      transform: rotate(24deg) translateX(520%);
    }
    .quick-action-button:hover::after,
    .quick-action-button:focus-visible::after,
    .quick-action-button:active::after {
      opacity: 0.9;
      transform: translate(2px, -2px) scale(1.15);
    }
    @media (max-width: 1024px) {
      .quick-action-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 580px) {
      .brand-logo-img { height: 56px; max-height: 56px; max-width: 190px; }
      .quick-action-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
      .quick-action-button { min-height: 54px; font-size: 14px; }
    }

    /* 辅助图片区 */
    .assist-banners-grid {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 12px;
    }
    @media (max-width: 768px) {
      .assist-banners-grid { grid-template-columns: 1fr; }
    }
    .assist-left-card {
      background: linear-gradient(145deg, #c53026, #9b2c2c);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 16px; padding: 16px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: #fff; text-align: center; box-shadow: var(--shadow-subtle);
    }

    .assist-right-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    @media (max-width: 480px) {
      .assist-right-grid { grid-template-columns: 1fr; }
    }
    .banner-img-box {
      position: relative; display: block;
      background: var(--glass-card-bg);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden;
      box-shadow: var(--shadow-subtle); text-decoration: none; cursor: pointer;
      transition: all 0.3s ease;
    }
    .banner-img-box:hover, .banner-img-box:active {
      border-color: var(--glass-border-hover); transform: translateY(-2px); box-shadow: var(--shadow-hover);
    }
    .banner-visual { position: relative; height: 100px; overflow: hidden; }
    .banner-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
    .banner-img-box:hover img { transform: scale(1.05); }
    .banner-caption {
      position: absolute; inset: auto 0 0; padding: 24px 10px 8px; color: #1a202c;
      background: linear-gradient(transparent, rgba(255, 255, 255, 0.95));
    }
    .banner-caption strong { display: block; font-size: 12px; line-height: 1.3; color: #1a202c; font-weight: 800; }
    .banner-caption small { display: block; margin-top: 2px; font-size: 10px; color: #718096; font-weight: 600; }

    /* 分类行导航卡片 */
    .row-category-card {
      background: var(--glass-card-bg);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border); border-radius: 16px;
      display: flex; overflow: hidden; box-shadow: var(--shadow-subtle);
      transition: all 0.3s ease;
    }
    .row-category-card:hover {
      box-shadow: var(--shadow-hover); border-color: var(--glass-border-hover);
    }

    .category-sidebar {
      width: 130px;
      background: linear-gradient(145deg, #c53026, #9b2c2c);
      color: #fff; padding: 14px 10px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; text-align: center; font-weight: 800; font-size: 14px;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    .category-sidebar svg { width: 22px; height: 22px; fill: #fff; }
    
    .category-links-content {
      flex: 1; padding: 12px 14px;
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: center;
    }
    @media (max-width: 1024px) { .category-links-content { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 480px) {
      .category-links-content { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
      .row-category-card { flex-direction: column; }
      .category-sidebar { width: 100%; padding: 10px; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    }

    .link-cell-item {
      display: flex; align-items: center; justify-content: center; gap: 4px;
      padding: 8px 6px; background: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(226, 232, 240, 0.85); border-radius: 9px;
      text-decoration: none; color: #2d3748; font-size: 12px; font-weight: 700;
      transition: all 0.25s ease; text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .link-cell-item:hover, .link-cell-item:active {
      background: #fff; color: var(--primary-red); border-color: rgba(197, 48, 38, 0.4);
      transform: translateY(-2px); box-shadow: 0 4px 12px rgba(197, 48, 38, 0.15);
    }

    /* 🌟 完美的滚动弹窗系统（修复电脑与手机端无法滑动的问题） */
    .modal-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      z-index: 999999; display: none; align-items: center; justify-content: center;
      padding: 12px; opacity: 0; transition: opacity 0.3s ease;
    }
    .modal-overlay.active { display: flex; opacity: 1; }

    .modal-box {
      position: relative;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 20px;
      width: 100%;
      max-width: 850px;
      height: 88vh; /* 严格约束弹窗最大高度，留出上下边距 */
      display: flex;
      flex-direction: column;
      box-shadow: 0 25px 60px rgba(0,0,0,0.4);
      transform: scale(0.92);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .modal-box { width: 100%; height: 94vh; border-radius: 16px; }
    }
    .modal-overlay.active .modal-box { transform: scale(1); }

    .modal-header {
      padding: 14px 20px;
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.95);
      flex-shrink: 0; /* 头部固定不参与滚动 */
    }
    .modal-header h3 {
      font-size: 16px;
      font-weight: 800;
      color: var(--primary-red);
    }

    /* 关键修复：内容区必须有明确的滚动属性和允许垂直 overflow */
    .modal-body {
      padding: 16px;
      flex: 1 1 auto;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .tutorial-image-item {
      width: 100%;
      max-width: 100%;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      background: #fff;
      flex-shrink: 0;
    }
    .tutorial-image-item img {
      width: 100%;
      height: auto;
      max-height: none !important; /* 解除高度限制，让超长图片保持原始比例完整展示 */
      display: block;
      object-fit: contain;
    }
    .tutorial-image-caption {
      padding: 10px 12px;
      font-size: 12px;
      color: #4a5568;
      font-weight: 700;
      text-align: center;
      background: #f8fafc;
      border-top: 1px solid #edf2f7;
    }

    .modal-close-btn {
      width: 34px; height: 34px;
      background: var(--primary-red); color: #fff;
      border: 2px solid #fff; border-radius: 50%;
      font-size: 16px; font-weight: bold; cursor: pointer;
      display: grid; place-items: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      transition: transform 0.2s;
    }
    .modal-close-btn:hover, .modal-close-btn:active { transform: scale(1.1); }

    footer {
      margin-top: 10px; text-align: center; font-size: 11px;
      color: #718096; letter-spacing: 0.05em; font-weight: 600;
    }