/* 触屏 sticky hover 兜底：手机点完一个 a/summary 后，:hover 状态会黏住直到点别处，
       视觉上像永久高亮。这里把对触屏体验影响最大的几条 hover 视觉清掉，让 :active 接管。 */
    @media (hover: none) {
      a:hover { background-color: transparent !important; color: inherit; }
      .markdown-content a:hover { background-color: transparent !important; border-bottom-style: dotted; }
      .nav-links a:hover { color: var(--color-muted); }
      #toc-ul a:hover { color: inherit; }
      .knowledge-base summary:hover { background: inherit; }
      .zone-link:hover .zl-name { color: inherit; }
      .zone-link:hover .zl-arrow { color: inherit; }
    }

    :root {
      --color-ink: #1a1a2e;
      --color-text: #374151;
      --color-muted: #6b7280;
      --color-light: #9ca3af;
      --color-border: #e5e7eb;
      --color-bg: #fafaf9;
      --color-bg-warm: #f5f4f0;
      --color-accent: #1e3a5f;
      --color-accent-light: #2d5a8e;
      --color-highlight: #c9a96e;
      --color-nav-bg: rgba(250,250,249,0.92);
      
      /* 字体变量 */
      --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Songti SC', 'STSong', 'SimSun', serif;
      --font-body: 'Cormorant Garamond', 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Songti SC', 'STSong', 'SimSun', serif;
      --font-solemn: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', 'Songti SC', 'STZhongsong', 'STSong', 'SimSun', serif;
      --max-width: 800px;
    }

    /* 暗黑模式配置 */
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --color-ink: #e8e6e3; --color-text: #b8b5b0; --color-border: #2e2c2a;
        --color-bg: #1a1918; --color-bg-warm: #222120; --color-accent: #7aaddb;
        --color-nav-bg: rgba(26,25,24,0.92);
      }
    }
    :root[data-theme="dark"] {
      --color-ink: #e8e6e3; --color-text: #b8b5b0; --color-border: #2e2c2a;
      --color-bg: #1a1918; --color-bg-warm: #222120; --color-accent: #7aaddb;
      --color-nav-bg: rgba(26,25,24,0.92);
    }
    :root[data-theme="light"] {
      --color-ink: #1a1a2e; --color-text: #374151; --color-border: #e5e7eb;
      --color-bg: #fafaf9; --color-bg-warm: #f5f4f0; --color-accent: #1e3a5f;
      --color-nav-bg: rgba(250,250,249,0.92);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    /* 表单控件默认走浏览器自带的黑体/等线，强制继承全站衬线字体，保持统一 */
    input, textarea, button, select, optgroup, option { font-family: inherit; }
    /* 中文字体没有意大利体，浏览器会"硬掰"出丑陋的假斜体；禁止合成斜体，
       但保留合成加粗。英文 (Cormorant Garamond 有真斜体) 不受影响。 */
    body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.8; font-size: 18px; transition: background 0.3s; font-synthesis: weight; }
    
    /* 强化的超链接 */
    a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(30, 58, 95, 0.2); transition: all 0.2s; }
    a:hover { color: var(--color-accent-light); text-decoration-color: var(--color-accent-light); }
    
    /* 导航栏核心布局 */
    nav { position: fixed; top: 0; width: 100%; z-index: 1000; background: var(--color-nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
    .nav-inner { 
      max-width: 960px; margin: 0 auto; padding: 0.7rem 2rem; 
      display: flex; justify-content: space-between; align-items: center; 
    }
    
    /* 导航链接 (PC端显示，手机端隐藏) */
    .nav-links { display: flex; list-style: none; gap: 1.8rem; }
    .nav-links a { text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .nav-links a:hover { color: var(--color-accent); }

    /* 返回链接样式 */
    .nav-back { font-size: 0.9rem; font-weight: 500; color: var(--color-accent); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }

    /* 汉堡菜单按钮 (默认隐藏) */
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
    .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-ink); margin: 5px auto; transition: 0.3s; }

    /* 主题切换按钮 */
    .theme-toggle { background: none; border: 1px solid var(--color-border); cursor: pointer; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.9rem; color: var(--color-muted); transition: all 0.2s; }
    .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

    /* 右上控件：search + theme + EN 同在 .nav-right-box 里，整体作为 nav-inner 的最右
       flex 项；space-between 把 [back / nav-links / right-box] 推开。.nav-controls
       只是为了给 theme + EN 收一点更紧的 gap（0.6rem 比 box 整体的 1rem 紧）。 */
    .nav-right-box { display: flex; align-items: center; gap: 1rem; }
    .nav-controls { display: flex; align-items: center; gap: 0.6rem; }

    /* 响应式：手机端调整 */
    @media (max-width: 768px) {
      /* 手机端正文字号微调：18px 在 6 寸屏上字距偏挤，17px + 1.85 行距更舒展 */
      body { font-size: 17px; line-height: 1.85; }

      .nav-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* 三段式：左、中、右 */
        align-items: center;
        padding: 0.6rem 1.2rem;
      }
      
      .nav-back { justify-self: start; font-size: 0.8rem; } /* 左对齐 */
      .nav-toggle { display: block; justify-self: center; } /* 居中汉堡包 */
      .nav-right-box { justify-self: end; } /* 右对齐亮度 */

      /* 手机端下拉菜单 */
      .nav-links { 
        display: none; 
        flex-direction: column; 
        position: absolute; 
        top: 100%; left: 0; right: 0; 
        background: var(--color-nav-bg); 
        padding: 1.5rem; gap: 1.2rem; 
        border-bottom: 1px solid var(--color-border); 
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      }
      .nav-links.open { display: flex; }
      
      /* 汉堡菜单变成 X */
      .nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
      .nav-toggle.active span:nth-child(2) { opacity: 0; }
      .nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    }

    /* 主体内容 */
    main { max-width: var(--max-width); margin: 6.5rem auto 4rem; padding: 0 2rem; }
    h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); font-weight: 600; margin-bottom: 1rem; }
    h1 { font-size: 2.5rem; }
    
    footer { max-width: var(--max-width); margin: 4rem auto 0; padding: 2rem; text-align: center; font-size: 0.85rem; color: var(--color-light); border-top: 1px solid var(--color-border); }

    /* LaTeX 徽标专用样式 */
    .latex-logo { font-variant: small-caps; }
    .latex-logo .latex-a { text-transform: uppercase; font-size: 0.75em; vertical-align: 0.25em; margin-left: -0.32em; margin-right: -0.15em; }
    .latex-logo .latex-e { text-transform: uppercase; font-size: 0.75em; vertical-align: -0.25em; margin-left: -0.15em; margin-right: -0.05em; }

    /* ======================================================
       Doocs 风格 Markdown 正文排版 (融合典雅学术风)
       ====================================================== */
    .markdown-content { font-family: var(--font-body); line-height: 1.8; color: var(--color-text); word-wrap: break-word; }
    .markdown-content p { margin-bottom: 1.2em; }
    
    /* 标题：加粗并拉开层次，H2 带底部边框 */
    .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { color: var(--color-ink); font-family: var(--font-display); margin-top: 2em; margin-bottom: 1em; font-weight: 600; }
    .markdown-content h2 { font-size: 1.6rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.4em; }
    .markdown-content h3 { font-size: 1.3rem; }

    /* Doocs 标志性的引用块 (Blockquote) */
    .markdown-content blockquote { margin: 1.5em 0; padding: 0.8em 1.2em; border-left: 4px solid var(--color-accent); background-color: var(--color-bg-warm); color: var(--color-muted); border-radius: 0 4px 4px 0; }
    .markdown-content blockquote p { margin: 0; }

    /* PDF 资料的开场说明（post.html 自动生成或 front-matter summary） */
    .markdown-content .pdf-lead {
      color: var(--color-muted);
      font-size: 1.02rem;
      margin: 0 0 1.8em;
    }

    /* 行内代码 (Inline Code) —— 驼金系，跟站点 --color-highlight 同源 */
    .markdown-content code { color: #7a5e35; background-color: #f5ebe0; padding: 0.2em 0.4em; border-radius: 4px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.85em; }

    /* 适配暗黑模式的行内代码 */
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .markdown-content code { background-color: rgba(201, 169, 110, 0.15); color: #c9a96e; } }
    :root[data-theme="dark"] .markdown-content code { background-color: rgba(201, 169, 110, 0.15); color: #c9a96e; }

    /* 深色代码块 (Preformatted Text) */
    .markdown-content pre { background-color: #282c34; color: #abb2bf; padding: 1.2rem; border-radius: 6px; overflow-x: auto; margin-bottom: 1.5em; }
    .markdown-content pre code { color: inherit; background-color: transparent; padding: 0; }

    /* 列表排版 */
    .markdown-content ul, .markdown-content ol { padding-left: 2em; margin-bottom: 1.5em; }
    .markdown-content li { margin-bottom: 0.5em; }

    /* 图片：增加相框质感与居中，限制最大宽度避免撑满全栏 */
    .markdown-content img { max-width: 70%; display: block; margin: 1.5em auto; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

    /* 表格：清爽的斑马线风格 */
    .markdown-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: 0.95rem; }
    .markdown-content th, .markdown-content td { border: 1px solid var(--color-border); padding: 0.6em 1em; }
    .markdown-content th { background-color: var(--color-bg-warm); font-weight: 600; }

    /* 超链接下划线特效 */
    .markdown-content a { color: var(--color-accent); text-decoration: none; border-bottom: 1px dashed var(--color-accent); transition: all 0.2s; padding-bottom: 1px; }
    .markdown-content a:hover { border-bottom-style: solid; background-color: rgba(30, 58, 95, 0.05); }

    /* 1. 全局平滑滚动 */
    html { scroll-behavior: smooth; }

    /* 2. 侧边栏目录容器 - 电脑端收窄，避免紧贴正文 */
    #toc-container {
      position: fixed;
      left: 1.5rem;
      top: 10rem;
      width: 240px;
      max-height: 65vh;
      overflow-y: auto;
      padding: 1.2rem 0.9rem;
      background: var(--color-bg);
      border-left: 2px solid var(--color-accent);
      z-index: 100;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      opacity: 0;
      transform: translateX(-30px);
      visibility: hidden;
    }

    #toc-container.open {
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
      box-shadow: 10px 0 30px rgba(0,0,0,0.05);
    }

    /* 3. 目录列表样式 */
    #toc-ul { list-style: none; padding: 0; margin: 0; }
    #toc-ul li { position: relative; margin-bottom: 0.8rem; line-height: 1.4; }
    
    #toc-ul a {
      color: var(--color-muted);
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
      display: block;
      padding-left: 1.3rem;
    }
    #toc-ul a:hover { color: var(--color-accent); }

    /* scrollspy：滚到哪一节，对应 TOC 项就高亮（由 post.html 的
       IntersectionObserver 加 .toc-active 类）。一级用色 + 加粗，二级保持轻量。 */
    #toc-ul a.toc-active { color: var(--color-accent); font-weight: 600; }
    #toc-ul a.toc-active::before { color: var(--color-accent) !important; transform: scale(1.25); }

    /* 一级标题圆点 */
    #toc-ul li > a:not(.toc-h2)::before {
      content: "•";
      position: absolute;
      left: 0.35rem;
      color: var(--color-accent);
      font-size: 1rem;
    }

    /* 二级标题缩进与圆点 */
    #toc-ul .toc-h2 {
      padding-left: 2.1rem;
      font-size: 0.9rem;
      opacity: 0.85;
    }

    #toc-ul .toc-h2::before {
      content: "•";
      position: absolute;
      left: 1.1rem;
      color: var(--color-accent);
      font-size: 1rem;
    }

    /* 4. 左下角经典悬浮标按钮 — 加 env(safe-area-inset-bottom) 避开 iPhone 底部 home 指示条 */
    #toc-toggle {
      position: fixed;
      left: 1.5rem;
      bottom: calc(2rem + env(safe-area-inset-bottom));
      width: 46px;
      height: 46px;
      background: var(--color-accent);
      color: white;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      z-index: 101;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* 5. 手机端：底部抽屉 */
    @media (max-width: 768px) {
      #toc-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 99;
        backdrop-filter: blur(2px);
      }
      #toc-backdrop.active { display: block; }

      #toc-container {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 55vh;
        border-left: none;
        border-bottom: none;
        border-top: 2px solid var(--color-accent);
        border-radius: 20px 20px 0 0;
        padding: 1.2rem 1.5rem 2rem;
        transform: translateY(110%);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
      }

      #toc-container.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
      }

      #toc-container::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--color-border);
        border-radius: 2px;
        margin: 0 auto 1.2rem;
      }
    }
    /* 解决目录跳转后标题被导航栏遮挡的问题 */
    .markdown-content h1, 
    .markdown-content h2, 
    .markdown-content h3 {
      scroll-margin-top: 6.5rem; /* 预留顶部导航栏高度 + 呼吸空间 */
    }

    @media (max-width: 768px) {
      /* 手机端段落：两端对齐，避免右边距参差不齐 */
      .markdown-content p {
        text-align: justify;
        overflow-wrap: break-word;
        text-wrap: normal;
      }
    }

    /* ======================================================
       Mac 风格代码块装饰
       ====================================================== */
    .markdown-content pre { 
      position: relative; 
      padding-top: 38px !important; /* 顶部留出空间放那三个小圆点 */
      background-color: #282c34; 
      border-radius: 8px; 
    }
    
    /* 使用 CSS 伪元素画出红黄绿三个小圆点 */
    .markdown-content pre::before {
      content: ''; 
      position: absolute; 
      top: 14px; 
      left: 15px; 
      width: 12px; 
      height: 12px;
      border-radius: 50%;
      background: #c9776c; /* Mac 圆点红（莫兰迪化，跟站点同源） */
      box-shadow: 20px 0 0 #c9a96e, 40px 0 0 #6fa878; /* 黄/绿同步莫兰迪化 */
      z-index: 2;
    }

    /* 强制删除 H2 上方的线 */
    .markdown-content h2 {
      border-top: none !important;    
      border-bottom: none !important; 
      padding-top: 1.5em;             
      margin-top: 1em;
    }
    /* 同时也删除可能存在的 section 分隔线 */
    .post-container section, .markdown-content section {
      border-bottom: none !important;
      border-top: none !important;
    }

    /* 现代排版魔法：智能平衡标题换行 */
    .post-header h1, 
    .post-container h1, 
    .post-container h2 {
      text-wrap: balance; /* 让多行标题自动保持长短均匀 */
    }

    /* 针对正文段落，防止最后一行只剩孤零零的一个词 */
    .markdown-content p {
      text-wrap: pretty; 
    }

    .knowledge-base details { margin-bottom: 1rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); }
    .knowledge-base summary { padding: 1rem; cursor: pointer; font-weight: 600; color: var(--color-ink); list-style: none; transition: background 0.2s; }
    .knowledge-base summary:hover { background: var(--color-bg-warm); }
    .knowledge-base summary::before { content: '▸'; margin-right: 0.8rem; color: var(--color-accent); transition: transform 0.2s; display: inline-block; }
    .knowledge-base details[open] > summary::before { transform: rotate(90deg); }

    .discipline-title { font-size: 1.3rem; border-left: 4px solid var(--color-accent); }
    .course-block { margin: 0.5rem 1.5rem 1rem 1.5rem; border: none !important; border-bottom: 1px dashed var(--color-border) !important; }
    .course-title { font-size: 1.1rem; color: var(--color-accent); }
    .type-section { padding-left: 3rem; margin-bottom: 1rem; }
    .type-title { font-family: var(--font-display); font-style: normal; color: var(--color-light); margin-bottom: 0.5rem; }
    .file-list { list-style: none; padding: 0; }
    .file-list li { margin-bottom: 0.4rem; }
    .file-list a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid transparent; }
    .file-list a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

    /* ======================================================
       双向丝滑折叠动画 (支持展开与收起)
       ====================================================== */
    details summary { outline: none; }
    
    /* 展开时的动画 */
    details[open] summary ~ * {
      animation: sweepDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* 收起时的动画（配合 JS 触发） */
    details.is-closing summary ~ * {
      animation: sweepUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes sweepDown {
      0%   { opacity: 0; transform: translateY(-10px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes sweepUp {
      0%   { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-10px); }
    }
    
    /* ======================================================
       顶部搜索入口（按钮触发 cmd-k 弹层；弹层 DOM/JS 在 _includes/assistant.html）
       ====================================================== */
    #nav-search-btn {
      display: inline-flex; align-items: center; gap: 0.55rem;
      padding: 0.38rem 0.65rem 0.38rem 0.7rem;
      background: var(--color-bg); color: var(--color-muted);
      border: 1px solid var(--color-border); border-radius: 999px;
      font-family: inherit; font-size: 0.85rem; cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    #nav-search-btn:hover {
      color: var(--color-accent); border-color: var(--color-accent);
      background: var(--color-bg-warm);
    }
    #nav-search-btn .nav-search-icon { color: currentColor; flex: none; }
    #nav-search-btn .nav-search-text { font-size: 0.85rem; }
    #nav-search-btn .nav-search-kbd {
      font-family: inherit; font-size: 0.7rem; color: var(--color-muted);
      border: 1px solid var(--color-border); border-radius: 4px;
      padding: 0.05rem 0.32rem; background: var(--color-bg-warm);
      line-height: 1.2;
    }

    @media (max-width: 768px) {
      .nav-right-box { gap: 0.8rem !important; }
      #nav-search-btn {
        padding: 0.35rem; border-radius: 50%;
        width: 32px; height: 32px; justify-content: center;
      }
      #nav-search-btn .nav-search-text,
      #nav-search-btn .nav-search-kbd { display: none; }
    }

    /* ======================================================
       整栏离线下载按钮（_includes/bulk-offline.html 共用）
       ====================================================== */
    .bulk-offline-btn {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.7rem 1.5rem;
      border: 1px solid var(--color-border); border-radius: 999px;
      background: var(--color-bg); color: var(--color-muted);
      font-family: inherit; font-size: 0.92rem; cursor: pointer;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .bulk-offline-btn:hover:not(:disabled):not(.bulk-done) {
      border-color: var(--color-accent); color: var(--color-accent);
      background: var(--color-bg-warm);
    }
    .bulk-offline-btn:disabled { cursor: wait; }
    .bulk-offline-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
    .bulk-offline-btn.bulk-done { border-color: #6fa878; color: #6fa878; }
    .bulk-offline-btn.bulk-partial { border-color: var(--color-accent); color: var(--color-accent); }
    .bulk-offline .bulk-hint {
      margin-top: 0.6rem; color: var(--color-light);
      font-size: 0.8rem; line-height: 1.55;
    }
    .bulk-offline .bulk-progress {
      margin-top: 0.5rem; color: var(--color-muted); font-size: 0.82rem;
    }

    /* 分类页底部「子专区」胶囊链接（notes / life 共用） */
    .pill-row {
      margin-top: 3rem; text-align: center;
      display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
    }
    .pill-link {
      display: inline-block; padding: 0.6rem 1.4rem;
      border: 1px solid var(--color-border); border-radius: 999px;
      color: var(--color-accent); text-decoration: none;
      font-size: 1rem; letter-spacing: 0.02em;
      transition: background 0.2s, border-color 0.2s;
    }
    .pill-link:hover {
      background: var(--color-bg-warm); border-color: var(--color-accent);
    }

    /* ======================================================
       分类页「专区」入口（学习资料 / 生活攻略）
       - 宽屏 ≥1380px：右侧固定侧栏，完全在正文之外，不抢主内容
       - 窄屏：退化为标题下方一条克制的 chip 行（小、灰、不喧宾夺主），
         比原来藏在页底强在能被看见
       ====================================================== */
    .zone-side { max-width: 800px; margin: 0 auto 1.8rem; text-align: center; }
    .zone-side-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--color-light); margin-bottom: 0.55rem;
    }
    .zone-link {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin: 0.25rem 0.3rem; padding: 0.38rem 0.9rem;
      border: 1px solid var(--color-border); border-radius: 999px;
      background: var(--color-bg); color: var(--color-muted);
      text-decoration: none; font-size: 0.86rem;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .zone-link:hover {
      color: var(--color-accent); border-color: var(--color-accent);
      background: var(--color-bg-warm);
    }
    .zone-link .zl-icon { font-size: 0.95rem; flex-shrink: 0; }
    .zone-link .zl-name { font-weight: 500; color: var(--color-ink); }
    .zone-link:hover .zl-name { color: var(--color-accent); }
    .zone-link .zl-desc { color: var(--color-light); font-size: 0.78rem; }
    .zone-link .zl-arrow { color: var(--color-light); }
    /* 窄屏只留 图标 + 名字，描述/箭头收起 */
    .zone-link .zl-desc, .zone-link .zl-arrow { display: none; }

    @media (min-width: 1380px) {
      /* 宽屏：整块做成一张侧边面板（与首页侧卡同一套视觉），
         即使只有一个专区入口也显得是刻意安排、不寒酸 */
      .zone-side {
        position: fixed; right: 1.6rem; top: 6.5rem;
        width: 248px; max-width: 248px; margin: 0;
        text-align: left; z-index: 50;
        background: var(--color-bg-warm);
        border: 1px solid var(--color-border);
        border-radius: 14px;
        padding: 1rem 1.1rem 0.85rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      }
      .zone-side-title {
        margin-bottom: 0.6rem; padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--color-border);
      }
      /* 面板内不再画格子：去掉每条目的边框/底色/圆角，
         只在相邻两条之间留一条浅浅的分割线 */
      .zone-link {
        display: flex; align-items: center; width: 100%; margin: 0;
        padding: 0.7rem 0.1rem; border: none; border-radius: 0;
        background: transparent;
      }
      .zone-link + .zone-link { border-top: 1px solid var(--color-border); }
      .zone-link:hover { background: transparent; }
      .zone-link .zl-icon { font-size: 1.15rem; }
      .zone-link .zl-body {
        flex: 1; min-width: 0; display: flex; flex-direction: column;
        line-height: 1.3; text-align: left;
      }
      .zone-link .zl-name { font-size: 0.92rem; }
      .zone-link .zl-desc { display: block; margin-top: 0.15rem; font-size: 0.76rem; }
      .zone-link .zl-arrow { display: inline; margin-left: 0.5rem; align-self: center; }
      .zone-link:hover .zl-arrow { color: var(--color-accent); }
    }
    /* 宽但矮（分屏 / 平板横屏）：退回正文流，避免与顶部 fixed 元素打架 */
    @media (min-width: 1380px) and (max-height: 620px) {
      .zone-side {
        position: static; width: auto; max-width: 800px;
        margin: 0 auto 1.8rem; text-align: center;
      }
    }