/* ================================================================
 * 时宪 · 网页端形态覆盖层
 * ----------------------------------------------------------------
 * 本文件只做一件事：把原型那套「桌面评审外壳」拆掉，
 * 让同一份页面结构在浏览器里就是一个正常的网页。
 *
 * ⚠️ 这是**覆盖层**，不是重写：
 *    · 网页端的 index.html 由 build.js 从原型复制而来，
 *      原型的 HTML 与它自带的 <style> 一个字都没改；
 *    · 本文件靠「后加载 + 同优先级 / !important」压过原型的规则。
 *    · 若原型的类名结构改过，本文件会静默失效 —— build.js 里有结构检查。
 *
 * 为什么用「复制 + 覆盖」而不是另写一套页面：
 *   详情页 / 日历 / 榜单的内容全部由脚本从内嵌数据渲染。
 *   另写一套必然与小程序端漂移，而复制能保证内容完全一致，
 *   两端差异只剩「外观形态」这一层 —— 也就是这个文件。
 *
 * 三种宽度（2026-09-24 用户拍板：桌面整宽 + 手机自适应）：
 *    · ≥901px  桌面：左侧导航常驻成侧栏，内容整宽铺开、限宽居中
 *    · ≤900px  手机 / 平板：隐藏左侧导航，整屏铺开，tabBar 贴底
 *
 * ⚠️ 这个文件是**手写源**，不是产物。改完要跑：node web/build.js
 * ================================================================ */

/* ---------- 1. 评审专用外围 ---------- */
/* 页头那屏「小程序原型预览 + 设计要点 chips」是原型阶段的产物，网页端不展示 */
.page-head { display: none !important; }
/* 「几个关键设计取舍」是给评审看的内部说明，网页端不需要 */
.nav-hint { display: none !important; }

/* ---------- 2. 页面底色：应用外留白 ---------- */
html,
body { background: #E9EDF4; }

body {
  padding: 0 !important;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 3. 外壳拆解（两种宽度都要做）----------
 * 圆角 / 内边距 / 阴影 / 侧边按键全部去掉；模拟状态栏也去掉 ——
 * 真机与浏览器自己就有状态栏，留着会变成「地址栏 + 假状态栏」双状态栏。
 * 原型里的 9:41 是脚本实时更新的，隐藏它不影响任何逻辑。 */
.phone {
  background: var(--bg) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.phone::after { display: none !important; }

.screen {
  border-radius: 0 !important;
  /* 顶部安全区：加到主屏（PWA）后才有值，普通浏览为 0，不会白留 */
  padding-top: env(safe-area-inset-top);
}

.statusbar { display: none !important; }

/* 底部手势条让开 */
.tabbar {
  padding-bottom: calc(2px + env(safe-area-inset-bottom)) !important;
}
/* 用 dvh 而不是 vh：iOS Safari 的 vh 含地址栏，会让底部 tabBar 被裁掉 */
.phone-col {
  height: 100vh;
  height: 100dvh;
}

/* ================================================================
 * 手机 / 平板（≤900px）：铺满整屏
 * ----------------------------------------------------------------
 * 线上链接多数是拿手机点开的，这一段才是「能不能用」的关键：
 * 原型是固定 390px 宽的手机壳，手机上打开会横向溢出、底部 tabBar 被切掉。
 * ================================================================ */
@media (max-width: 900px) {
  /* 手机上左侧导航没有意义 —— 页面切换有底部 tabBar */
  .nav { display: none !important; }

  .stage {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* 手机形态也要限宽：这套版式是按 390px 手机设计的，
     在 786px 的竖屏平板上直接铺满会把卡片拉成一长条。
     600 以内手机（≤600）仍然铺满，平板则居中成一条，像个大号手机。 */
  .phone-col {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .phone { width: 100% !important; height: 100% !important; }

  /* 小屏不要限宽，两边留 14px（原型原样） */
  .pad { max-width: none; }
}

/* ================================================================
 * 桌面（≥901px）：左侧导航常驻 + 内容整宽
 * ================================================================ */
@media (min-width: 901px) {
  .stage {
    display: flex !important;
    align-items: stretch !important;
    /* 原型给 .stage 留了 gap:36px（手机壳与导航之间），网页端侧栏要紧贴内容 */
    gap: 0 !important;
    margin: 0 !important;
    /* ⚠️ 原型还给 .stage 限了 max-width:1240px（那是给「桌面里嵌手机壳」定的宽）。
       侧栏之外的内容全被它卡住，右侧永远差一截 —— 要铺满就得连它一起放开。
       之前只改了 .pad，没动这里，所以「右边没对齐」一直没解决。 */
    max-width: none !important;
  }

  /* 原型的「页面清单」在网页端变成常驻侧栏 */
  .nav {
    display: block !important;
    width: 236px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 24px 16px;
    background: #fff;
    border-right: 1px solid var(--line);
  }

  /* ⚠️ 原型里 .nav-title 有**两条互相冲突的定义**：
       一条是侧栏小标题（11px 灰字），一条是详情页顶栏（position:absolute 居中）。
       后者把侧栏那两行小标题也拽成了绝对定位，结果压在导航按钮上（截图里看得很清楚）。
       这里只针对侧栏的直接子级，把它恢复成"小标题"的本意样式；
       详情页 .navbar 里的 .nav-title 不受影响（选择器限定在 .nav > 之下）。 */
  .nav > .nav-title {
    position: static !important;
    left: auto !important;
    right: auto !important;
    text-align: left !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px;
    color: var(--text-3);
    padding: 0 4px;
    margin-bottom: 10px;
  }

  /* 手机壳退场：宽度交给剩下的空间 */
  .phone-col {
    width: auto;
    max-width: none;
    margin: 0;
    flex: 1;
    min-width: 0;
  }
  .phone { width: 100% !important; height: 100% !important; }

  /* 内容列：铺满可用宽度（用户要求右边对齐），但**给一个上限**。
     不限的话，1920 屏上内容会拉到 1650px，一行字长到难读，
     而且和 1024 平板上的 754px 摆在一起，观感完全是两个产品。
     1280 这个上限保证常见笔记本（1366 / 1440）下仍然铺满、右边对齐，
     只在超宽屏上才居中收窄。 */
  .pad {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ⚠️ 工具屏的容器不是 .pad，是 _splice_tools.js 注入的 .tools-scope
     （原型给的内边距是 14px）—— 桌面上就成了「别的屏留 24px、工具屏只留 14px」，
     侧栏旁边的工具列表看起来比别处更贴边。这里统一成 24px。
     只动内边距，不动 .tools-scope 内部任何一条工具样式。 */
  .tools-scope { padding: 0 24px; }

  /* 桌面上左侧栏已经承担导航，底部 tabBar 就变成第二套导航 —— 去掉。
     手机端保留（那边 tabBar 是唯一的主导航，见上面 ≤900px 那段）。 */
  .tabbar { display: none !important; }

  /* 详情页顶部返回条别贴边 */
  .navbar { padding: 0 24px; }

  /* 原型把 .body 的滚动条藏起来了（手机壳里不需要）。
     桌面上用鼠标滚轮，没有滚动条会看不出「还能往下滚」，所以加回一条细的。 */
  .body::-webkit-scrollbar { width: 8px; }
  .body::-webkit-scrollbar-thumb { background: #D6DBE4; border-radius: 4px; }
  .body::-webkit-scrollbar-thumb:hover { background: #C3CAD6; }

  /* ---------- 侧栏品牌区 ----------
   * 原型的侧栏是从「页面」小标题直接开始的 —— 那是评审视角。
   * 网页端补一块品牌头，并顺手把**数据核对日期**摆出来：
   * 这类查询工具最怕的不是数据少，而是用户以为数据是新的。
   * 标记块用 CSS 画，日期文字由 build.js 从内嵌数据里读出来写进 HTML。 */
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px 12px;
  }
  .nav-brand-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 品牌名：**立方体翻转**。
     两面是立方体的两个相邻侧面 —— 各自先摆好朝向、再沿 Z 轴推出半个身高，
     于是它们在 3D 里构成一个 90° 的角；切换时**整块**绕 X 轴转 90°，
     转起来是"块"在翻，而不是"片"在切。
     方向还天然交替：角度在 0 与 -90° 之间往复 ——
       0 → -90°   向下翻（考历翻走、时宪从下面翻上来）
       -90° → 0   再点就原路返回，就是**向上翻**（转回考历）
     这比早先「两面贴在同一平面上接力翻」更顺：那个要在时间上错开
     （正面先倒完、背面才开始立），两段之间总有接缝；立方体只有一条缓动曲线。
     ⚠️ 不要给面加 opacity：遮挡交给 3D —— 面转过去后法线背对观察者，
        backface-visibility 自然不渲染。加了渐变就把翻转盖成"淡出淡入"，
        而且一淡一入之间还会漏出"两个字都看不见"的空档（早先就是这么被投诉的）。
     ⚠️ 透视要贴着元素尺度：这块只有 30px 宽、15px 的字，120px ≈ 它的 4 倍。
        用 300px 以上，转到 45° 也才百分之几的变化，看着根本不像在翻。 */
  .nav-brand-name {
    display: inline-grid;
    perspective: 120px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
  }
  /* 立方体本体：保持 3D 上下文，整块转 */
  .wc-brand-cube {
    grid-area: 1 / 1;
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* 两个侧面：转好朝向 + 沿 Z 轴推出半个身高
     （字号 15px、行高 1.2 → 约 18px 高 → 推 9px）
     ⚠️ 第二个面必须在立方体的**上侧**（rotateX(90deg)），不是下侧。
     算一下就明白：面的最终角度 = 立方体角度 ∘ 面角度。
     立方体转到 -90° 时要让这个面正对观察者（最终 0°），所以它初始得是 +90°
     （-90 + 90 = 0 ✓）；写成 -90 的话 -90 + (-90) = -180°，
     两个面会**同时背对观察者**，切换后一片空白。（这个错是探针量出来的） */
  .nav-brand-name .wc-brand-face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    transform: rotateX(0deg) translateZ(9px);
  }
  .nav-brand-name .wc-brand-face-alt {
    transform: rotateX(90deg) translateZ(9px);
  }
  /* 切换 = 整块转 90°。只改角度、不写 opacity ——
     写了等于把「遮挡」又交回给透明度，那正是早先不丝滑的原因。 */
  .nav-brand-name.is-alt .wc-brand-cube {
    transform: rotateX(-90deg);
  }
  .nav-brand-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.3;
  }
  /* 品牌名可点：点一下在「考历 / 时宪」之间切换（.is-toggle 由 web.js 挂上）。
     必须给出手型光标 + 悬停反馈 —— 否则用户不知道这块能点，
     等于这个开关不存在。用「名字变品牌色」而不是整块底色：
     .nav-brand 的下内边距是 12px，铺底色会显得像多了一条压扁的按钮。 */
  .nav-brand.is-toggle {
    cursor: pointer;
  }
  .nav-brand.is-toggle:hover .nav-brand-name {
    color: var(--brand);
  }
  /* 悬停时提前把立方体与两面提升为合成层。不预热的话**第一次点击**要现建层，
     那一帧会掉帧 —— 表现就是"第一次点不顺、之后又顺了"。 */
  .nav-brand.is-toggle:hover .wc-brand-cube,
  .nav-brand.is-toggle:hover .wc-brand-face {
    will-change: transform;
  }
  .nav-brand.is-toggle:focus-visible {
    border-radius: 8px;
    outline: 2px solid var(--brand);
    outline-offset: 3px;
  }
  /* 用户在系统里关掉了动效就不要再翻：一个名字的切换不值得让他头晕 */
  @media (prefers-reduced-motion: reduce) {
    .nav-brand-name .wc-brand-face,
    .nav-brand-name .wc-brand-face-alt {
      transition-duration: 0.01s;
      transition-delay: 0s;
    }
  }
  /* 核对日期 + 分隔线：与下面的「页面」小标题明确分开 */
  .nav-brand-audit {
    padding: 0 4px 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
    color: var(--text-4);
  }
}

/* ================================================================
 * 网页端专用件（web.js 用）—— 侧栏「详情页」分类清单 + 选考试浮层
 * ----------------------------------------------------------------
 * 全部挂在 .wc- 前缀下，与原型类名零冲突。
 * 刻意不放进桌面媒体查询：侧栏在手机端本就 display:none，
 * 而浮层盖的是整个视口、跟断点无关；写在全局还能避免
 * 「桌面开着浮层、窗口拉窄到 900px 以下，样式突然失效」。
 * ================================================================ */

/* ---------- 浮层：遮罩 ---------- */
.wc-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;                       /* 原型弹层是 50，这里要盖在它上面 */
  background: rgba(22, 25, 31, .42);
}
/* 确认框：居中显示 */
.wc-mask-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* 选考试浮层：不居中 —— 由 .wc-picker 自己贴着侧栏右缘定位 */

/* ---------- 确认框（删除 / 清空共用） ---------- */
.wc-dialog {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px 14px;
  box-shadow: 0 18px 50px rgba(16, 20, 28, .22);
}
.wc-dialog-title { font-size: 15px; font-weight: 600; color: var(--text); }
.wc-dialog-desc { margin-top: 6px; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.wc-dialog-btns { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.wc-btn {
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: .16s;
}
.wc-btn:hover { background: #F7F9FC; }
.wc-btn-danger { color: #D64545; border-color: #F3D2D2; background: #FDF3F3; }
.wc-btn-danger:hover { background: #FBE9E9; }

/* ---------- 选考试浮层 ---------- */
/* 贴着侧栏右缘出现，像个从那一栏弹出来的对话框 */
.wc-picker {
  position: absolute;
  left: 252px;                        /* 侧栏 236px + 16px 间距 */
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  max-height: min(560px, 84vh);
  background: #fff;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(16, 20, 28, .22);
}
.wc-picker-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.wc-picker-headtext { flex: 1; min-width: 0; }
.wc-picker-title { font-size: 15px; font-weight: 600; color: var(--text); }
/* 副标题固定成两行高：文案在「列表态 / 字母表态」长短不同，
   不锁高度的话换行数一变，整个框会跳 13px —— 用户要的是"框大小不变"。 */
.wc-picker-sub {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  min-height: 36px;
  color: var(--text-3);
}

/* 返回箭头：只在字母表态淡入。列表态保留位置（透明 + 不可点），
   这样标题不会因为箭头出现/消失而左右跳动。 */
.wc-back {
  width: 28px; height: 28px;
  flex-shrink: 0;
  margin-top: -1px;
  border: 0;
  border-radius: 8px;
  background: #F3F5F9;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .26s cubic-bezier(.4, 0, .2, 1), background .14s;
}
.wc-picker.alpha-on .wc-back { opacity: 1; pointer-events: auto; transform: none; }
.wc-back:hover { background: #E9EDF4; }
.wc-picker-close {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 0;
  background: #F3F5F9;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.wc-picker-close:hover { background: #E9EDF4; }
.wc-picker-tools { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.wc-multi {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-multi:hover { background: #F7F9FC; }
.wc-multi.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 字母表态下「多选」没意义，淡出即可 —— 保留占位，右边的 ✕ 不会跳位 */
.wc-picker.alpha-on .wc-multi { opacity: 0; pointer-events: none; }
/* ============================================================
 * 列表层 / 字母表层：两层叠放，切换靠**淡入淡出**（不做横向位移）
 * ------------------------------------------------------------
 * 演进过程：整块重绘（太生硬）→ translateX 左右滑动（用户："感觉从四周
 * 进入会比较好，淡进淡出，也不用太花哨"）→ 现在这版。
 * 两层都留在 DOM 里，用 opacity 交叉淡变 + 极轻的 scale(.98)，无位移动画。
 * 叠放必须用 grid 而不是 absolute —— absolute 元素不占高度，框会塌成 0；
 * grid 叠放的高度取两层较大者，所以框体尺寸恒定。
 * 不可见那一层要 pointer-events:none，否则会隔着透明层接走点击。
 * ============================================================ */
.wc-panes {
  display: grid;
  overflow: hidden;
}
.wc-pane {
  grid-area: 1 / 1;                   /* 两层压在同一格 */
  min-width: 0;
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
.wc-picker:not(.alpha-on) .wc-pane-list,
.wc-picker.alpha-on .wc-pane-alpha {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* A-Z 字母表：**不铺满宽度**，网格居中、行数放宽。
   用户："不要两端对齐……两侧不要堆满看着很拥挤"。
   所以列宽写死、由 flex 自动换行 + 每行居中（最后一行不满也居中，
   用 grid 的话末行会贴左）。max-width 卡住每行 6 个 ——
   不卡的话容器有 376px 可用，一行会塞到 7 个，又变回"堆满"。
   27 格 → 6 列 × 5 行（末行 3 个）。 */
.wc-alpha-grid {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
  padding: 16px 12px;
}
.wc-alpha {
  flex: 0 0 44px;                     /* 写死格宽，网格才不会被拉满 */
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: #F3F5F9;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: background .14s, color .14s;
}
.wc-alpha:hover { background: #E9EDF4; }
.wc-alpha.off { background: #F7F8FB; color: var(--text-4); cursor: default; }
.wc-alpha.on { background: var(--brand); color: #fff; }

/* 列表自己滚（不再是 flex:1 —— 它现在是 grid 叠放层里的内容）。
   高度上限要扣掉头部，否则会顶破 .wc-picker 的 max-height 被裁掉。 */
.wc-picker-list {
  max-height: min(470px, calc(84vh - 96px));
  overflow-y: auto;
  padding: 8px;
}
/* 分组字母标题 = 字母筛选的入口（点它整个列表区换成字母表）。
   做成可点元素：品牌色 + hover 下划线，让人看得出能点。 */
.wc-group-head {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px 4px;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand);
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-group-head:hover { color: var(--brand-deep); text-decoration: underline; }
.wc-group:first-child .wc-group-head { padding-top: 2px; }
.wc-picker-empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-4);
}
.wc-pick {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-pick:hover { background: #F7F9FC; }
.wc-pick.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); }
.wc-pick-name { flex: 1; min-width: 0; }
.wc-pick-tick { flex-shrink: 0; font-size: 11.5px; color: var(--brand); font-weight: 500; }

/* ---------- 侧栏：「详情页」标题行 + 编辑按钮 ---------- */
/* ⚠️ 原型的 .nav-title 带 pointer-events:none（那是详情页顶栏的样式，被侧栏复用了）。
   不把这一条还回来，标题行里的「编辑」按钮真实鼠标点上去是穿透的 ——
   程序化 el.click() 却照样能触发，所以这类失效极难从测试里发现。 */
.nav > .wc-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: auto !important;
}
.wc-edit {
  border: 0;
  background: transparent;
  color: var(--brand);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0;
}
.wc-edit:hover { text-decoration: underline; }

/* ---------- 侧栏：分类 ---------- */
.wc-cat { margin-bottom: 4px; }
.wc-cat-head { display: flex; align-items: center; gap: 2px; }
.wc-cat-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-cat-open:hover { background: #F5F7FB; }
.wc-cat-arrow {
  flex-shrink: 0;
  width: 11px;
  font-size: 9px;
  line-height: 1;
  color: var(--text-4);
}
.wc-cat-name { flex: 1; min-width: 0; font-weight: 500; }
.wc-cat-count {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #EFF2F7;
  color: var(--text-3);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.wc-cat-add,
.wc-cat-more {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-4);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-cat-add { color: var(--brand); }
.wc-cat-add:hover,
.wc-cat-more:hover { background: #EFF2F7; color: var(--text-2); }

/* ---------- 侧栏：二级项 ---------- */
.wc-subs { padding-left: 8px; }
/* 折叠态（默认）：整块不显示 —— 用户要的是下拉菜单，不点开就不占地方 */
.wc-cat.collapsed .wc-subs { display: none; }
.wc-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  transition: .14s;
}
.wc-sub:hover { background: #F5F7FB; }
.wc-sub-go {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 2px 0;
  font-size: 12.5px;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-sub:hover .wc-sub-go { color: var(--text); }
/* 当前打开的那个考试（web.js 的 syncNavHighlight 同步） */
.wc-sub.on { background: var(--brand-soft); }
.wc-sub.on .wc-sub-go { color: var(--brand-deep); font-weight: 500; }
/* 三个点平时藏起来，hover 才出现 —— 侧栏窄，常驻会很吵 */
.wc-sub-more {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-4);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transition: .14s;
}
.wc-sub:hover .wc-sub-more { opacity: 1; }
.wc-sub-more:hover { background: #E9EDF4; color: var(--text-2); }

/* 勾选框只在编辑模式出现，平时不占位 */
.wc-sub-check { display: none; flex-shrink: 0; align-items: center; cursor: pointer; }
.wc-sub-check input {
  margin: 0;
  width: 14px; height: 14px;
  accent-color: var(--brand);
  cursor: pointer;
}
.nav.wc-editing .wc-sub-check { display: flex; }
.nav.wc-editing .wc-sub-more { display: none; }

.wc-empty { padding: 6px 8px; font-size: 11.5px; color: var(--text-4); }

/* ---------- 侧栏：编辑条 ---------- */
/* 编辑条：四个按钮排成两行两列，侧栏只有 204px 可用宽，
   一行放四个会把「删除所选（n）」挤到放不下 */
.wc-editbar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 2px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.wc-eb {
  flex: 1 1 calc(50% - 3px);
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  transition: .14s;
}
.wc-eb:hover { background: #F7F9FC; }
.wc-eb:disabled { color: var(--text-4); background: #FAFBFD; cursor: default; }
.wc-eb-del { color: #D64545; border-color: #F3D2D2; background: #FDF3F3; }
.wc-eb-del:hover { background: #FBE9E9; }
.wc-eb-del:disabled { color: var(--text-4); border-color: var(--line-strong); background: #FAFBFD; }

/* ============================================================
 * 取消「提醒」
 * ------------------------------------------------------------
 * 网页端写不进系统日历、也发不出订阅消息，留着「提醒」只会误导
 * （用户以为设了就真会提醒他）。四处入口一起藏：
 *   1. 详情页底条的大按钮 #remindBtn
 *   2. 「我的」页顶部数字卡里的「提醒」
 *   3. 数字卡里「浏览过」与「提醒」之间的那条分隔线（否则末尾多一条竖线）
 *   4. 「我的」页的「提醒」tab
 * 只隐藏、**不移除** —— 原型的 #remindBtn 上挂着事件绑定与「已设置提醒」
 * 状态更新，从 DOM 里摘掉会让它 querySelector 拿到 null。
 * 第 3 条用 :nth-child(4) 按位置选（.mhcard 的第 4 个 div 子元素就是第二条
 * 分隔线）—— 这里依赖了原型的结构顺序，改动原型时留意。
 * ============================================================ */
#remindBtn,
.mh-item[data-minetab="rem"],
.mhcard > *:nth-child(4),
.tab2[data-tab="t-rem"] { display: none !important; }

/* ============================================================
 * 「分享时宪」的小程序码面板
 * ------------------------------------------------------------
 * 鼠标移到「我的」页的「分享时宪」上才出现，点按钮下载图片。
 * 用 fixed 定位（原型的「不许 fixed」断言只查原型 HTML，不查本文件）——
 * 那一行在页面底部，用 absolute 会被祖先的 overflow 裁掉。
 * 将来要加「下载 App（安卓 / 苹果）」，往 .wc-share-acts 里加按钮即可。
 * ============================================================ */
.wc-share-panel {
  position: fixed;
  z-index: 300;                       /* 原型弹层是 50，要盖在它上面 */
  display: none;
  width: 208px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 20, 28, .16);
  text-align: center;
}
.wc-share-head { margin-bottom: 10px; font-size: 12px; color: var(--text-3); }
.wc-share-code {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #F3F5F9;
}
.wc-share-acts { margin-top: 12px; }
.wc-share-btn {
  width: 100%;
  height: 32px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .14s;
}
.wc-share-btn:hover { background: var(--brand-deep); }
.wc-share-tip { margin-top: 8px; font-size: 11px; color: var(--text-4); }

/* ============================================================
 * 页脚备案信息（「我的」页「关于时宪」末行）
 * ------------------------------------------------------------
 * 只在备案通过后出现 —— 号由 build.js 注入 <meta name="wc-icp">，
 * 读不到就整行不渲染（web.js 里的 ensureIcpRow）。
 * 这一行手机和桌面都要显示，所以不进任何媒体查询。
 * ============================================================ */
.wc-icp-link {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.wc-icp-link:hover {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* ============================================================
 * 页面底部备案信息（每一屏内容区末尾各挂一条）
 * ------------------------------------------------------------
 * ICP 要求**网站底部**展示备案号并链到工信部。「关于时宪」卡片里那行
 * 只在「我的」屏看得到；这一条挂在**每一屏 .body 的末尾**，保证任何一屏
 * 滚到底都能看到 —— 首页最关键（审核员打开的就是首页）。
 * 号同样来自 <meta name="wc-icp">，读不到就整条不挂（web.js 的 ensureFooters）。
 * 手机与桌面都要显示，所以不进任何媒体查询。
 * ============================================================ */
.wc-foot {
  padding: 20px 16px 28px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-4);
}
.wc-foot a {
  color: var(--text-4);
  text-decoration: none;
}
.wc-foot a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* ============================================================
 * 工具页：还没移植到网页端的工具（「小程序可用」）
 * ------------------------------------------------------------
 * 工具清单来自原型内联的整份 config/tools.js（42 个 / 9 类），
 * 但原型里只有 3 个工具真的有屏 —— 其余点了是静默无反应。
 * web.js 会给那些条目加 .wc-app-only 并补一个角标，这里负责样子。
 *
 * ⚠️ 必须写满三个类（.tools-scope .tk-item.wc-app-only）：
 *    原型注入的工具样式全部带 .tools-scope 前缀（= 2 个类），
 *    只写 .wc-app-only 会因为优先级更低而**完全不生效**。
 * ============================================================ */
.tools-scope .tk-item.wc-app-only {
  opacity: .55;
  cursor: default;
}
/* 置灰的条目不该再有"点我进去"的箭头暗示 */
.tools-scope .tk-item.wc-app-only .tk-arrow {
  display: none;
}
.tools-scope .wc-app-badge {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  opacity: .9;
}