* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:#f2f3f5; color:#222; font-size:15px; line-height:1.6;
  padding-bottom:118px;   /* 给底部标签栏和右下角的清除缓存按钮留位置 */
}
.hide { display:none !important; }

/* 顶部 */
.top {
  background:#fff; padding:12px 14px; position:sticky; top:0; z-index:20;
  border-bottom:1px solid #ebedf0; display:flex; align-items:center;
  justify-content:space-between; gap:10px;
}
.top h1 { font-size:17px; font-weight:600; }
.top .sub { font-size:12px; color:#999; }
/* 标题那一块：窄屏时用省略号，别把右边的按钮挤没了 */
.ttlbox { flex:1; min-width:0; }
.ttlbox h1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 白天/夜间切换 + 设置入口：按钮里的「图标按钮」那一档。
   比 .btn.small（34px）小一点、是圆形，但触点从 32px 提到 36px，
   悬停/按下/聚焦四态跟 .btn 用同一套 token。 */
#themebtn, #setbtn {
  flex-shrink:0; width:36px; height:36px; font-size:17px; line-height:1;
  background:#f2f3f5; border:none; border-radius:50%;
  font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;   /* 图标居中 */
  appearance:none; -webkit-appearance:none;
  transition:background-color var(--btn-t), opacity var(--btn-t), transform var(--btn-t);
}
#themebtn:active, #setbtn:active { transform:scale(.92); }
#themebtn:focus-visible, #setbtn:focus-visible { outline:2px solid var(--btn-ring); outline-offset:2px; }
@media (hover: hover) {
  #themebtn:hover, #setbtn:hover { opacity:.85; }
}
/* 右下角：清除缓存（浮在底部标签栏上面）。次要动作，按「灰按钮」那一档来：
   和 .btn.small 一样 34px 高，手感也共用一套 token。 */
#clearbtn {
  position:fixed; right:14px; bottom:70px; z-index:25;
  box-sizing:border-box; min-height:var(--btn-h-sm);
  font-size:12px; color:#8a8f99; background:rgba(255,255,255,.94);
  border:1px solid #ebedf0; border-radius:16px; padding:7px 13px;
  font-family:inherit; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  appearance:none; -webkit-appearance:none;
  transition:background-color var(--btn-t), opacity var(--btn-t), transform var(--btn-t);
}
#clearbtn:active { transform:scale(.95); }
#clearbtn:focus-visible { outline:2px solid var(--btn-ring); outline-offset:2px; }
@media (hover: hover) {
  #clearbtn:hover { opacity:.85; }
}
body.dark #clearbtn { background:rgba(30,30,30,.94); border-color:#333; color:#9a9a9a; }

/* 底部标签栏 */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; height:56px; background:#fff;
  border-top:1px solid #ebedf0; display:flex; z-index:30;
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar div {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:11px; color:#8a8f99; cursor:pointer; gap:2px;
}
.tabbar div .ico { font-size:19px; line-height:1; }
.tabbar div.on { color:var(--p-ink); font-weight:600; }

/* 通用 */
.wrap { padding:14px; }
.card { background:#fff; border-radius:12px; padding:16px; margin-bottom:12px; }
/* ================= 按钮（全项目唯一一处定义） =================
   规矩照几个主流开源设计系统来（Ant Design / Bootstrap 5 / shadcn/ui / GitHub Primer），
   它们讲的是同一件事：**「大小」和「语义色」是两个独立的轴**
   （Ant 的 size + type、Bootstrap 的 .btn-sm/.btn-lg + .btn-primary、shadcn 的 size + variant）。
   所以这里几何和状态只写在基类 `.btn` 里，变体只改颜色、`.small` 只改大小 ——
   以后加一个按钮，不会又长出第三种高度、第四种圆角。
   语义色沿用第 8.3 节定下的那套：蓝=动作、绿=答对、红=答错/危险、灰=次要。
   ⚠️ 类名 `.btn` / `.btn.small` / `.btn.gray` / `.btn.green` / `.btn.red` 是
   30 多处调用点和 functest 在用的（有的断言就是照字符串抠的），**只加不改**。 */
/* ================= 主色（动作色）=================
   全项目"蓝 = 动作 / 选中"的地方**只认这几个变量**，不再写死 #1890ff：
   主按钮、选中的标签页/胶囊/行/选项、答题卡的"当前"格、进度条、题型标签、聚焦边框…
   默认值就是原来那个蓝；用户在「设置 → 外观 → 按钮颜色」里用三原色滑杆改，
   改完由 appearanceCss() 把这些变量重新写进 <style id="appstyle">
   （那个 <style> 排在主样式之后，同优先级盖得住）。
   ⚠️ 绿=答对 / 红=答错 是**语义色**（第 8.3 节那套规矩），不跟着主色变。
   ⚠️ 以后再加"主色"用法**一定用变量** —— 写死 #1890ff 就是"用户改不了的那一块"。 */
:root {
  --p: #1890ff;                    /* 主色本身（默认 = 原来那个蓝） */
  --p-lite: #69c0ff;               /* 暗背景上的浅色版（由主色往白里掺算出来） */
  --p-pale: #cfe6ff;               /* 更浅一档：浅色字压在彩色底上时用 */
  --p-fg: #fff;                    /* **压在实心主色上的字色**：主色浅了会自动转深色 */
  --p-ink: #1890ff;                /* 主色当**文字**用在浅底上时用它（太浅会自动压深） */
  --p-tint: linear-gradient(rgba(24,144,255,.13),rgba(24,144,255,.13));   /* 叠在玻璃上的一层淡主色 */
  --p-tint2: linear-gradient(rgba(24,144,255,.26),rgba(24,144,255,.26));  /* 选中那一行用浓一点 */
  --p-a08: rgba(24,144,255,.08);
  --p-a13: rgba(24,144,255,.13);
  --p-a14: rgba(24,144,255,.14);
  --p-a24: rgba(24,144,255,.24);
  --p-a26: rgba(24,144,255,.26);
  --p-a30: rgba(24,144,255,.30);
  --p-a34: rgba(24,144,255,.34);
  --p-a45: rgba(24,144,255,.45);
}
:root {
  /* 尺寸轴：只管大小 */
  --btn-h-sm: 34px;   --btn-h-md: 46px;
  --btn-px-sm: 14px;  --btn-px-md: 18px;
  --btn-fs-sm: 13px;  --btn-fs-md: 15px;
  --btn-r-sm: 10px;   --btn-r-md: 14px;   /* md 跟 .opt/.bankrow/.search 一样，不然圆角看着不齐 */
  /* 语义色轴：只管颜色 */
  --btn-blue: var(--p);
  /* 语义色轴：参考 GitHub Primer（primer.style）现行按钮色阶 ——
     成功 #1f883d（原 Ant #52c41a 太亮）、危险 #cf222e（原 #ff4d4f 太飘）、
     次要 #f6f8fa 底 / #1f2328 近黑字（原 #f0f0f0/#555 对比弱）、
     禁用 #eff2f5 底 / #8c959f 中灰字（原 #d9d9d9 底配白字根本看不清，顺手修掉）。 */
  --btn-green: #1f883d;
  --btn-red: #cf222e;            /* 深红字色（GitHub danger fg） */
  --btn-red-bg: #ffeef0;         /* 淡红底（GitHub danger muted）：原实心 #cf222e 白字在浅弹窗里太扎眼 */
  --btn-gray: #f6f8fa;  --btn-gray-fg: #1f2328;
  --btn-off: #eff2f5;   --btn-off-fg: #8c959f;   /* 禁用（夜间在 body.dark 里换值） */
  --btn-ring: var(--p-a45);                    /* 键盘聚焦那一圈 */
  --btn-t: .16s ease;                         /* 全项目统一的手感时长 */
}
.btn {
  /* 几何：一次定义，所有变体共用 */
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:6px;   /* flex：将来按钮里加图标也自动对齐 */
  width:100%; min-height:var(--btn-h-md); padding:0 var(--btn-px-md);
  border:none; border-radius:var(--btn-r-md);
  /* 字 */
  font-family:inherit; font-size:var(--btn-fs-md); font-weight:600; line-height:1.2;
  /* 色 */
  background:var(--btn-blue); color:var(--p-fg); cursor:pointer;
  /* 手感：悬停 / 按下 / 聚焦 / 禁用 四态，下面统一给 */
  appearance:none; -webkit-appearance:none;
  transition:filter var(--btn-t), opacity var(--btn-t), transform var(--btn-t);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; user-select:none;
}
/* 悬停：只"提亮"，不换底色 —— 蓝/绿/红/灰、以及「透明」档（底色本来就透明）
   共用这一条；换底色会在「透明」档把透明底又填实（#appstyle 排在后面）。
   ⚠️ 灰按钮底下是玻璃（backdrop-filter），filter 可能干扰磨砂，所以它单独用透明度。
   ⚠️ 手机上悬停会"粘住"，所以只在真有鼠标的设备上生效。 */
@media (hover: hover) {
  .btn:not(.gray):not(:disabled):hover { filter:brightness(1.08); }
  .btn.gray:not(:disabled):hover { opacity:.88; }
}
/* 按下：缩一点点 —— 四个外观档都看得出"点到了"（手机上没有悬停，就靠它） */
.btn:not(:disabled):active { transform:translateY(1px); }
.btn:not(.gray):not(:disabled):active { filter:brightness(.94); }
.btn.gray:not(:disabled):active { opacity:.80; }
/* 键盘聚焦：用 outline，不用 box-shadow —— 卡片那套描边是 inset box-shadow 会被它盖掉，
   outline 也不参与布局、不会挤动别的东西 */
.btn:focus-visible { outline:2px solid var(--btn-ring); outline-offset:2px; }
/* 尺寸变体：只改大小 */
.btn.small {
  display:inline-flex; width:auto;
  min-height:var(--btn-h-sm); padding:0 var(--btn-px-sm);
  font-size:var(--btn-fs-sm); border-radius:var(--btn-r-sm);
}
/* 语义变体：只改颜色 */
.btn.gray  { background:var(--btn-gray); color:var(--btn-gray-fg); }
/* ⚠️ `.btn.gray`（次要按钮）2026-10-06 起**也跟主色走**，但是**方案乙**：
   只叠一层淡主色 + 主色字（不是实心）—— 见下面「主色：方案乙」那一节。
   这里保留中性默认值，是为了设置页（.calm）能退回中性、也为了让模式覆盖有东西可盖。 */
/* 绿 / 红**自己带字色**：它们是固定的语义色，跟主色深浅无关，一直是白字
   （不然主色挑了个浅色时，--p-fg 会变深色、把绿按钮的字也带着一起变） */
.btn.green { background:var(--btn-green); color:#fff; }
/* 红按钮走 GitHub danger-outline：淡红底 + 深红字 + 细红边，
   跟 .btn.gray 的淡蓝底蓝字视觉重量对称，不再是浅弹窗里一块突兀的深红。
   透明档（#appstyle 里 CLEAR_BTN_CSS）仍会盖成"透明底只留红字"，不受影响。 */
.btn.red   { background:var(--btn-red-bg); color:var(--btn-red); border:1px solid rgba(207,34,46,.25); }
/* 禁用：**唯一**一份定义，颜色走 token。必须排在所有变体之后 ——
   `.btn.gray` 也是两个类、优先级一样，"排它前面"会被它盖住，
   于是"禁用的灰按钮"看着和能用的一模一样（备考页「上一段/下一段」以前就是这毛病）。
   ⚠️ 玻璃那一节（.search/.bankrow/.btn.gray…）里给 `.btn.gray` 挂了 `:not(:disabled)` 让开，
   所以这条不用再往后挪；透明档/暗背景那两条模式覆盖照旧盖得住它
   （functest 抠的就是那两条的字符串，别改它们的写法）。 */
.btn:disabled { background:var(--btn-off); color:var(--btn-off-fg); cursor:not-allowed; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }

/* 首页菜单 / 刷题模块主页那几行（开始刷题、模拟考试、分段备考、错题本…）。
   ⚠️ 这几行**不跟主色走**（2026-10-06 用户明确说过：不是"刷题整条线"都染，
   是「开始刷题」**点进去以后**那些按钮要跟 —— 也就是 .bankrow / .btn 那一套）。
   它们和"选练习范围"里那些行长得像，但角色不同：这里是**功能入口**，
   靠图标颜色区分是哪个功能，染成一片反而分不出。 */
.menu-item {
  background:#fff; border-radius:12px; padding:16px; margin-bottom:12px;
  display:flex; align-items:center; gap:14px; cursor:pointer;
}
.menu-item .ico {
  width:46px; height:46px; border-radius:11px; background:#f2f3f5;
  display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0;
}
.menu-item .tt { font-size:15px; font-weight:600; }
.stats { display:flex; background:#fff; border-radius:12px; padding:16px 8px; }
.stats div { flex:1; text-align:center; }
.stats .n { font-size:22px; font-weight:700; color:var(--p-ink); display:block; }
.stats .n.red { color:#ff4d4f; }
.stats .n.acc { color:#333; }   /* 正确率不跟主色变 */
.stats .l { font-size:12px; color:#999; }

/* 题目 */
.qhead { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
/* 收藏星：题干那行最右边，收过的实心橙、没收的描边灰 */
.favbtn { margin-left:auto; font-size:21px; line-height:1; cursor:pointer; color:#c0c4cc;
  display:inline-flex; flex-shrink:0; }
.favbtn.on { color:#faad14; }
/* 「我的」页的圆形头像：默认是蓝紫渐变（跟 APP 图标同款），点一下能换成自己的图片 */
.avatar {
  width:88px; height:88px; border-radius:50%; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:46px; cursor:pointer;
  background:linear-gradient(135deg,#4080fa 0%,#5a5ce8 55%,#783cd2 100%);
  box-shadow:0 10px 24px rgba(64,128,250,.30), inset 0 1px 0 rgba(255,255,255,.35);
}
.avatar.has-img { background-size:cover; background-position:center; }
/* 右下角的小相机角标：提示"这里可以点、能换图" */
.avatar .cam {
  position:absolute; right:-2px; bottom:-2px; width:27px; height:27px; border-radius:50%;
  background:#fff; color:#666; font-size:14px; display:flex; align-items:center;
  justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.20);
}
.tag { font-size:12px; padding:3px 10px; border-radius:20px; background:var(--p-a13); color:var(--p-ink); font-weight:600; }
.tag.gray { background:#f2f3f5; color:#888; font-weight:400; }
.qtext { font-size:16px; line-height:1.7; margin-bottom:16px; font-weight:500; }
.opt {
  border:1.5px solid #e5e6eb; border-radius:10px; padding:12px 14px; margin-bottom:10px;
  display:flex; align-items:center; gap:11px; cursor:pointer; background:#fff;
  transition:.15s; font-size:14.5px;
}
.opt .k {
  width:26px; height:26px; border-radius:50%; background:#f2f3f5; color:#555;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  font-weight:600; flex-shrink:0;
}
.opt .v { flex:1; }
.opt.sel { border-color:var(--p); background:var(--p-a08); }
.opt.sel .k { background:var(--p); color:var(--p-fg); }
.opt.ok { border-color:#52c41a; background:#f6ffed; }
.opt.ok .k { background:#52c41a; color:#fff; }
.opt.bad { border-color:#ff4d4f; background:#fff2f0; }
.opt.bad .k { background:#ff4d4f; color:#fff; }
.opt.static { cursor:default; }

/* 填空题的输入框（填空就塞在题干里） */
.fillin {
  display:inline-block; min-width:88px; max-width:100%;
  border:none; border-bottom:1.5px solid var(--p); background:var(--p-a08);
  font-size:15px; font-family:inherit; color:#222; padding:2px 6px;
  margin:0 3px; text-align:center; outline:none;
}
.fillin.ok { border-bottom-color:#52c41a; background:rgba(82,196,26,.18); color:#389e0d; }
.fillin.bad { border-bottom-color:#ff4d4f; background:rgba(255,77,79,.15); color:#cf1322; }

/* 各种"行按钮"（选练习范围 / 二级分类·题型 / 备考 / 考试题数 / 设置里选一项…）。
   几何只在这里定义一次；**颜色**由下面「主色：方案乙」那一节给 ——
   默认是玻璃中性行，染不染主色看那一节。 */
.bankrow {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:14px; border:1.5px solid #e5e6eb;
  margin-bottom:8px; cursor:pointer; font-size:14px;
}
/* 「开始」那种要居中的行（备考页） */
.bankrow.center { justify-content:center; }

/* 点了没用/填不对时的那种"灰行" */
.bankrow.off { opacity:.5; cursor:default; }

/* 选范围页里"两组之间的分隔线"（上面是刷法，下面是从主页搬进来的那几项） */
.rowsep { height:1px; background:var(--g-border); margin:12px 0; }

.bankrow .cnt { font-size:12.5px; color:#999; font-weight:400; }

/* 「没做完的练习」里的一行：左边部分名 + 进度，右边「继续」「放弃」。
   沿用 .bankrow 的框，只是它自己不可点，所以光标和间距要改一下 */
/* 「问 AI」那排按钮 + 点完之后的绿色提示行（答错的结果卡 / 错题本详情 / 收藏详情） */
.airow { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.airow .btn { flex-shrink:0; }
.aihint { font-size:12.5px; color:#52c41a; margin-top:8px; text-align:right; line-height:1.5; }
/* AI 讲解那张卡（标题 + 正文；正文按原样换行，别把 AI 的排版挤没了） */
/* 设置里那个 API Key 输入框：用 CSS 打码（不是 type=password，安卓上那种不让粘贴）*/
.aikeyin.masked { -webkit-text-security: disc; text-security: disc; }
/* 小眼睛：点一下把 Key 露出来 */
/* 胶囊上的小绿点：这家填过 Key（免得切到空的那家还以为 API 坏了） */
.aikeydot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#52c41a; margin-left:6px; vertical-align:middle;
}
.ai-eye { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; font-size:19px; cursor:pointer; color:#888; }
.ai-eye:active { background:rgba(0,0,0,.06); }
body.dark .ai-eye { color:#c5c9d0; }
.aihead { font-size:14px; font-weight:600; margin-bottom:8px; display:flex;
  align-items:center; gap:6px; }
/* 跳动省略号 */
.dots span { animation: dotBlink 1.2s infinite; opacity:0; }
.dots span:nth-child(2) { animation-delay:.2s; }
.dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBlink { 0%,100%{opacity:0} 50%{opacity:1} }
.aitext { font-size:14.5px; line-height:1.75; white-space:pre-wrap; word-break:break-word; }
/* 讲解卡片左下角那排：清除 / 复制 / 粘贴（靠左摆） */
.aibar { display:flex; gap:8px; margin-top:12px; }
.aibar .btn { flex-shrink:0; }
/* 手动粘贴那一层里的输入框 */
.aipaste {
  width:100%; box-sizing:border-box; border:1px solid #e5e6eb; border-radius:10px;
  padding:10px 12px; font-size:14px; font-family:inherit; outline:none; resize:vertical;
  line-height:1.6;
}
body.dark .aihint { color:#73d13d; }

.prow { cursor:default; gap:8px; }
.prow .nm { flex:1; min-width:0; }
.prow .nm .t { font-size:14px; font-weight:600; }
.prow .btn { flex-shrink:0; }   /* 「继续」「放弃」别被长名字挤扁 */

/* 不是标签页的页面，顶部那一块「返回」。
   ⚠️ 间距**只在这里定义一次**：以前 backBtnHtml 多一个 gapBottom 参数，
   调用点各传各的，于是备考页的返回比别的页多出 14px（2026-10-06 用户报的"离返回的距离不统一"）。
   跟在它后面的筛选条用 `.backbar + .chips` 自己补距离，调用点不用操心。 */
.backbar { padding:14px 14px 0; }

/* 选范围页二级面板的标题（返回按钮 + 标题）；设置页顶部、我的/收藏列表也用这条。
   ⚠️ 上下都按 14px 走，和页面级「返回」（.backbar）同一个节奏 ——
   以前是 margin:2px 0 12px，于是这些页的返回比别人低 2px、离内容近 2px，看着就是"错位"。 */
.subhead {
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-size:13px; color:#999;
}
.subhead .btn { flex-shrink:0; }   /* 返回按钮别被 flex 压扁 */
.subhead > span { flex:1; }

/* 题库页的题库分块标题 */
.libblock {
  font-size:13.5px; font-weight:600; color:#333; margin:18px 0 10px;
  padding-left:9px; border-left:3px solid var(--p);
}
.libblock .cnt { font-weight:400; color:#999; font-size:12.5px; }

/* 结果条 */
.res { border-radius:10px; padding:13px 14px; margin-top:14px; font-size:14px; }
.res.ok { background:#f6ffed; border:1px solid #b7eb8f; }
.res.bad { background:#fff2f0; border:1px solid #ffccc7; }
.res .t { font-weight:700; margin-bottom:6px; }
.res.ok .t { color:#52c41a; }
.res.bad .t { color:#ff4d4f; }
.res .ex { color:#555; font-size:13.5px; line-height:1.65; margin-top:8px; }
.res .ex b { color:#333; }

/* 进度 */
.pbar { height:5px; background:#e5e6eb; border-radius:3px; overflow:hidden; margin:8px 0 14px; }
.pbar i { display:block; height:100%; background:var(--p); border-radius:3px; transition:.3s; }
.pinfo { display:flex; justify-content:space-between; font-size:12.5px; color:#888; }

/* 题库列表 */
.libitem { background:#fff; border-radius:12px; padding:14px; margin-bottom:10px; }
.libitem .qq { font-size:14.5px; line-height:1.65; margin-bottom:9px; }
.libitem .oo { font-size:13.5px; color:#555; padding:3px 0 3px 22px; position:relative; }
.libitem .oo::before {
  content:attr(data-k); position:absolute; left:0; color:#999; font-weight:600;
}
/* 题库里正确选项标绿（和刷题页答对的绿色一致） */
.libitem .oo.right { color:#389e0d; font-weight:700; background:rgba(82,196,26,.18);
  border-radius:6px; padding:4px 8px 4px 26px; margin:2px 0; }
.libitem .oo.right::before { color:#389e0d; left:8px; }
.libitem .meta { font-size:12px; color:#aaa; margin-top:8px; }

/* 筛选 */
.chips { display:flex; gap:8px; overflow-x:auto; padding:12px 14px; background:#fff;
  border-bottom:1px solid #ebedf0; }
.chips::-webkit-scrollbar { display:none; }
.chip {
  flex-shrink:0; font-size:13px; padding:6px 14px; border-radius:20px;
  background:#f2f3f5; color:#666; cursor:pointer; white-space:nowrap;
}
.chip.on { background:var(--p); color:var(--p-fg); font-weight:600; }
/* 紧跟在「返回」后面的筛选条：自己留出这 14px（.wrap 是自带 14px 内边距的），
   这样"返回 → 第一条内容"的距离在所有页面上都是 14px —— 见 .backbar */
.backbar + .chips { margin-top:14px; }
/* 题库页的第二级（某个题库下面的分类）：底色浅一点，一眼看出是从属关系。
   ⚠️ padding-top 不能是 0：那样第二行的胶囊会**紧贴两级之间的分隔线**，
   而上下左右别处都是 12px，看着就是被压住/错位
   （2026-10-06 用户报的"分级目录错位重叠"就是这个）。 */
.chips.sub { background:#fafbfc; padding:10px 14px 12px; }
.search {
  width:100%; border:1px solid #e5e6eb; border-radius:10px; padding:10px 13px;
  font-size:14px; font-family:inherit; outline:none; margin-top:12px;
}
.search:focus { border-color:var(--p); }

/* 备考页的题号输入框（第 __ 题 到 第 __ 题） */
.preprow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:14px; }
.prepin {
  width:78px; text-align:center; font-size:15px; font-family:inherit; color:#222;
  border:1.5px solid #e5e6eb; border-radius:8px; padding:8px 6px; outline:none;
  background:#fff;
}
.prepin:focus { border-color:var(--p); }

/* 设置里「按钮颜色」的三原色滑杆（R/G/B 各 0~255）。
   ⚠️ 滑杆必须在 #colorbox **外面**：拖动时只重绘那块预览，
   不然手指底下这个控件会被换掉，拖一下就断了。
   ⚠️ 轨道得自己画：Chrome 默认那根"没选中的轨道"实测是 #3b3b3b 一条黑杠，
   压在浅色玻璃卡片上太突兀。整根轨道用**主色的淡底**（--p-a24）、滑块是主色圆点，
   四个外观档下都协调，也不用按主题分别调。
   没做"已选/未选"两段式 —— 那需要 JS 往元素上写 element.style，
   而测试用的假 DOM 里没有 element.style（见 4.5 那段说明）。 */
.rgbrow { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.rgbrow .rgbk { width:14px; font-size:13px; font-weight:700; text-align:center; flex-shrink:0; }
.rgbrow .rgbv { width:44px; font-size:12.5px; color:#666; text-align:center;
  flex-shrink:0; font-variant-numeric:tabular-nums;
  border:1px solid #d0d7de; border-radius:6px; padding:2px 4px;
  background:#f6f8fa; outline:none; }
.rgbrow .rgbv:focus { border-color:var(--p); background:#fff; }
.rgbrow .rgbv::-webkit-outer-spin-button,
.rgbrow .rgbv::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rgbrow .rgbv { -moz-appearance:textfield; appearance:textfield; }
.rgbrow input[type=range] {
  flex:1; min-width:0; margin:0; height:22px; padding:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
.rgbrow input[type=range]::-webkit-slider-runnable-track {
  height:6px; border-radius:3px; background:var(--p-a24);
}
.rgbrow input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-6px; border-radius:50%;
  background:var(--p); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.rgbrow input[type=range]::-moz-range-track {
  height:6px; border-radius:3px; background:var(--p-a24);
}
.rgbrow input[type=range]::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%; background:var(--p); border:2px solid #fff;
}

/* 设置页折叠卡片（手风琴） */
.sethead { display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; padding:14px 0 12px; margin-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.08); user-select:none;
  font-size:15px; font-weight:600; color:var(--ink,#1f2328); }
.sethead .arrow { font-size:11px; color:#999; transition:transform .2s; display:inline-block; font-weight:400; }
.sethead.collapsed .arrow { transform:rotate(-90deg); }
.setbody.hidden { display:none; }
.setbody { padding-bottom:4px; }

/* 内联图标（Phosphor）：大小跟着字号走，颜色跟着文字颜色走 */
.icn { width:1em; height:1em; display:inline-block; vertical-align:-0.13em; flex-shrink:0; }

/* 答题卡 */
.sheet { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.sheet div {
  aspect-ratio:1; border-radius:8px; background:#f2f3f5; color:#888;
  display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer;
}
.sheet div.done { background:#52c41a; color:#fff; font-weight:600; }
.sheet div.cur { background:var(--p); color:var(--p-fg); font-weight:600; }

/* 弹层 */
.mask {
  position:fixed; inset:0; background:var(--mask-bg, rgba(0,0,0,.45)); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.dlg { background:#fff; border-radius:14px; padding:20px; width:100%; max-width:340px; }
.dlg h3 { font-size:16px; margin-bottom:10px; }
.dlg p { font-size:14px; color:#666; margin-bottom:18px; }
.empty { text-align:center; padding:70px 20px; color:#aaa; }
.empty .e { font-size:46px; display:block; margin-bottom:12px; }
.center { text-align:center; }

/* ================= 液态玻璃外观 =================
   整套是"毛玻璃卡片浮在背景上"：半透明底 + 背景模糊 + 顶部一道高光。
   强度三档（轻/中/强）由设置页决定，具体数值由 JS 写进 <style id="appstyle">，
   这里只放一套默认值（万一 JS 还没跑，看着也是正常的）。
   不支持 backdrop-filter 的老浏览器，在最下面用 @supports 兜成实色。 */
:root {
  --g-bg: rgba(255,255,255,.62);       /* 卡片主底色 */
  --g-solid: rgba(255,255,255,.74);    /* 要实一点的：输入框、选项 */
  --g-bg2: rgba(255,255,255,.45);      /* 小色块：图标底、标签、小按钮 */
  --g-bar: rgba(255,255,255,.80);      /* 顶栏 / 底部标签栏（盖着滚动内容，稍实一点） */
  --g-dlg: rgba(255,255,255,.90);      /* 弹窗（要看清，最实） */
  --g-border: rgba(255,255,255,.55);
  --g-hi: rgba(255,255,255,.55);       /* 卡片内侧的顶部高光 */
  --g-ring: rgba(0,0,0,.07);           /* 一圈极淡的暗边：背景是浅色时也能看出卡片在哪 */
  --g-shadow: 0 8px 24px rgba(16,24,40,.10);
  --g-blur: 20px;
  --g-sat: 170%;
  --g-sat: 170%;   /* 透明档会设成 100%（不动背景的饱和度） */
  --bg-dim: 0;                         /* 背景压暗程度（夜间会调大） */
}
body.dark {
  --g-bg: rgba(30,32,38,.60);
  --g-solid: rgba(36,38,46,.70);
  --g-bg2: rgba(255,255,255,.08);
  --g-bar: rgba(30,32,38,.72);
  --g-dlg: rgba(30,32,38,.90);
  --g-border: rgba(255,255,255,.14);
  --g-hi: rgba(255,255,255,.10);
  --g-ring: rgba(255,255,255,.09);
  --g-shadow: 0 8px 24px rgba(0,0,0,.35);
  --bg-dim: .45;
  /* 按钮：夜间只换"禁用"和"聚焦圈"两个值 —— 蓝/绿/红本来就够亮，纸面上不用动
     （见上面「按钮」那一节，那边的 body.dark .btn:disabled 原来单独写了一条，合并到这）
     夜间禁用对齐 GitHub Dark：深灰底 #21262d + 中灰字 #484f58（原 #3a3a3a/#7a7a7a 偏亮）。 */
  --btn-off: #21262d;  --btn-off-fg: #484f58;
  --btn-ring: rgba(105,192,255,.55);
}
/* 夜间红按钮：淡红底 #ffeef0 在深背景上发灰，改成半透明红底 + 亮红字 + 半透红边 */
body.dark .btn.red {
  background:rgba(207,34,46,.15); color:#ff7875; border-color:rgba(255,120,117,.35);
}

/* 背景层：固定在所有内容后面（body 的底色留着当兜底） */
#bg { position:fixed; inset:0; z-index:-1; background-size:cover; background-position:center; }
#bg::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,var(--bg-dim)); }
#bg.bg-gradient { background-image:linear-gradient(160deg,#dfe9ff 0%,#eef2ff 42%,#f6e9ff 100%); }
#bg.bg-white { background:#fff; }
#bg.bg-black { background:#0b0c10; }
#bg.bg-image { background-color:#e8ecf3; }   /* 用户那张照片由 #appstyle 提供 */
body.dark #bg.bg-gradient { background-image:linear-gradient(160deg,#0f1420 0%,#161227 55%,#0d0f18 100%); }
body.dark #bg.bg-white { background:#191919; }

/* 玻璃表面：一条规则管完主要的卡片和栏。
   注意用 box-shadow 的 inset 描边、不额外加 border —— 加 border 会挤动布局。
   两道 inset：上面一道亮高光（"玻璃的边"），外面一道极淡的暗环（浅色背景上也看得出卡片）。
   ⚠️ `.btn.gray` 挂了 `:not(:disabled)`：禁用的按钮要保住自己那份灰底，
   别被这里的玻璃底色盖成"看着还能点"（见上面「按钮」那一节）。 */
.top, .tabbar, .card, .menu-item, .stats, .libitem, .dlg, .chips, .opt,
.search, .prepin, .bankrow, .btn.gray:not(:disabled), #clearbtn {
  background: var(--g-bg);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: inset 0 1px 0 var(--g-hi), inset 0 0 0 1px var(--g-ring), var(--g-shadow);
}
/* 顶栏 / 底部标签栏：比卡片实一点（底下有滚动的内容经过） */
.top, .tabbar { background: var(--g-bar); }
/* 弹窗：要看得清，最实 */
.dlg { background: var(--g-dlg); }
/* 本来就有边框的，颜色跟着玻璃走 */
.opt, .search, .prepin, .bankrow, .chip { border-color: var(--g-border); }
/* 要实一点的 */
.search, .prepin, .opt, .chips.sub { background: var(--g-solid); }
/* 小色块 */
.menu-item .ico, .tag.gray, .chip, .sheet div, .opt .k, .pbar,
#themebtn, #setbtn { background: var(--g-bg2); }
/* 圆角更接近 iOS 那种大圆角 */
.card, .menu-item, .stats { border-radius:20px; }
.libitem { border-radius:18px; }
.dlg { border-radius:24px; }
.opt, .bankrow, .search { border-radius:14px; }
/* 语义色改成半透明，照片背景上也能看出是"绿的对/红的错" */
.tag { background:var(--p-a13); }
.opt.sel { background:var(--p-a14); }
.opt.ok { background:rgba(82,196,26,.18); }
.opt.bad { background:rgba(255,77,79,.15); }
.res.ok { background:rgba(82,196,26,.18); }
.res.bad { background:rgba(255,77,79,.15); }
.fillin { background:var(--p-a08); }

/* ================= 主色：方案乙（2026-10-06 用户选定）=================
   先做过"实心主色"（丙），用户看过之后改回**乙**：
   主色只做**淡淡一层底 + 主色描边 / 主色字**，不铺满。
   做法是往玻璃底上**叠一层主色**（background-image 的线性渐变）——
   这样行的磨砂、描边、投影全都还在，只是染了一层色。

   ⚠️ **不是全项目都染**，边界是用户一条条纠正出来的：
   - 染：**「开始刷题」点进去以后**那些 —— 选练习范围的行、二级分类 / 题型、
     答题页的按钮、备考 / 考试里的行和按钮；
   - **不染**：首页和刷题模块主页的 `.menu-item` 功能入口行（它们靠图标颜色区分是哪个功能）；
   - **不染**：**设置页整页**（`.calm`，见下）—— 设置页是挑题库、挑颜色的地方，
     它自己也染一层，用户就看不出哪个是选中的了。
   ⚠️ `.btn.gray` 也叠这一层（方案乙里"白 / 灰按钮"要跟行一致），
   但**它的字色是主色**（`--p-ink`）；行的字仍用正文色（浅底上正文色更好读）。 */
.bankrow {
  background-image: var(--p-tint);
  border-color: var(--p-a45);
}
.bankrow .cnt { color: var(--p-ink); }
/* 选中那一行：浓一点的叠色 + 一圈实主色描边。
   ⚠️ 用叠色而不是不透明底色 —— 底色一盖，磨砂和投影就没了。 */
.bankrow.on {
  background-image: var(--p-tint2);
  border-color: var(--p);
  font-weight: 600;
}
.btn.gray:not(:disabled) {
  background-image: var(--p-tint);
  color: var(--p-ink);
}

/* ---- 设置页整页退回中性（用户要求"设置里面的按钮不动"）----
   只做两件事：把那一层叠色去掉、字色回中性。磨砂 / 描边 / 投影本来就是玻璃那套，不用动。 */
.calm .bankrow,
.calm .btn.gray:not(:disabled) { background-image: none; }
.calm .bankrow { border-color: var(--g-border); }
.calm .bankrow .cnt { color: #999; }
/* 设置页里"选中的那一行"保持老样子：淡主色底 + 主色描边。
   那是"选中"，不是"染色"，所以不受 .calm 影响。 */
.calm .bankrow.on { background: var(--p-a14); border-color: var(--p); }
.calm .btn.gray:not(:disabled) { color: var(--btn-gray-fg); }

/* ================= 「＋ 添加题库」 / 导入预览 =================
   题库类型最后那一行。它是**动作**，不是题库，所以故意长得不一样：
   虚线框 + 主色字，而且**不参与"行按钮"那套染色** ——
   所以下面把它自己的叠色和描边都写回来（连 .calm 那份一起，免得设置页里被盖掉）。 */
.bankrow.add,
.calm .bankrow.add {
  background-image: none;
  background: transparent;
  border: 1.5px dashed var(--p-a45);
  color: var(--p-ink);
  justify-content: flex-start;
  gap: 8px;
}
.bankrow.add .cnt,
.calm .bankrow.add .cnt { margin-left: auto; color: var(--p-ink); opacity: .75; }

/* 导入的题库右边那个小叉（内置库没有）。点它要 event.stopPropagation()，
   不然会顺带把那个库切成当前题库。 */
.bankrow .bankdel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 8px; border-radius: 50%;
  font-size: 13px; vertical-align: middle;
  background: rgba(0,0,0,.10); cursor: pointer; flex-shrink: 0;
  transition: transform var(--btn-t), background-color var(--btn-t);
}
.bankrow .bankdel:active { transform: scale(.9); }
body.dark .bankrow .bankdel { background: rgba(255,255,255,.16); }

/* 导入预览弹层：内容会很长（"没收下的行"要逐行列出来），所以宽一点、错误区能滚 */
.dlg.wide { max-width: 420px; }
.imperr {
  max-height: 190px; overflow-y: auto; font-size: 12.5px; line-height: 1.75;
  color: #cf1322; background: rgba(255,77,79,.10); border-radius: 10px;
  padding: 10px 12px; margin: 10px 0; word-break: break-word;
}
.impname { font-size: 13px; color: #888; margin: 14px 0 0; }
.impname input {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px;
  border: 1px solid #e5e6eb; border-radius: 10px; font-size: 14px;
  font-family: inherit; outline: none; background: var(--g-solid); color: inherit;
}
.impname input:focus { border-color: var(--p); }
.imptpl { text-align: center; font-size: 12.5px; margin-top: 12px; }
.imptpl a { color: var(--p-ink); }
body.dark .imptpl a { color: var(--p-lite); }

/* ================= 其它"能点的东西"的手感 =================
   按钮之外还有一批能点的：筛选胶囊 / 题库行 / 选项 / 答题卡格子 / 菜单行 / 图标按钮。
   它们各有各的尺寸（那是它们该有的样子，不硬套按钮的 46px），但**手感必须和按钮一套**：
   同一档过渡时长（--btn-t）、点一下有反馈、手机上没有那块灰蓝的点击高亮、键盘聚焦同一个圈。
   放在这个位置是有意的 —— 要排在各组件自己的定义之后，`transition` 这类同优先级的才盖得住
   （比如 `.opt` 上面写的是 `transition:.15s`，就是靠这里统一成 --btn-t）。 */
.chip, .bankrow, .menu-item, .opt, .sheet div, .tabbar div,
.favbtn, .ai-eye, #themebtn, #setbtn, #clearbtn {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.chip, .bankrow, .menu-item, .sheet div, .tabbar div, .favbtn, .ai-eye {
  transition:background-color var(--btn-t), border-color var(--btn-t),
    color var(--btn-t), transform var(--btn-t);
}
.opt {
  transition:background-color var(--btn-t), border-color var(--btn-t), transform var(--btn-t);
}
/* 按下：行和胶囊缩一点点，格子/星星这种小东西缩多一点 */
.chip:active, .bankrow:active, .menu-item:active, .opt:active { transform:scale(.985); }
.sheet div:active, .tabbar div:active { transform:scale(.94); }
.favbtn:active { transform:scale(.90); }
.ai-eye:active { transform:scale(.92); }
.avatar { transition:transform var(--btn-t); }
.avatar:active { transform:scale(.97); }
/* 不能点的那些不给按下反馈：越界的行、只用来展示的选项、
   题库页「显示更多」那种灰按钮 */
.bankrow.off:active, .opt.static:active { transform:none; }
/* 键盘聚焦：和按钮同一个圈（能聚焦的都是 form 控件/带 tabindex 的元素） */
.chip:focus-visible, .bankrow:focus-visible, .opt:focus-visible,
.favbtn:focus-visible, .ai-eye:focus-visible { outline:2px solid var(--btn-ring); outline-offset:2px; }

/* ================= 夜间模式 =================
   给 body 加个 dark 类就整套换色。浅灰的次要文字（#888/#999/#aaa）
   在深色底上照样看得清，所以不用动；只有深色的正文色和浅色底要换。
   页面里有些颜色是内联写在标签上的，CSS 压不过内联样式，
   所以最后那几条用属性选择器 + !important 兜底。 */
body.dark { background:#121212; color:#d6d6d6; }

/* 卡片的底色不在这里管了 —— 交给上面那套玻璃变量（--g-bg 等），
   夜间自动是深色的半透明。这里只留边框、文字和语义色。 */
body.dark .top,
body.dark .tabbar,
body.dark .chips { border-color:#2f2f2f; }

body.dark .opt .k { color:#b0b0b0; }
body.dark .pbar { background:rgba(255,255,255,.14); }
body.dark .libblock { color:#e2e2e2; }

/* 正文和按钮 */
body.dark .qtext,
body.dark .opt .v,
body.dark .search,
body.dark .prepin,
body.dark .libitem .oo { color:#e2e2e2; }
/* 方案乙：行 / 次要按钮是"玻璃 + 一层淡主色"，深色底下字要靠主色的浅色版；
   设置页那块（.calm）回中性灰。 */
body.dark .bankrow .cnt { color:var(--p-lite); }
body.dark .btn.gray:not(:disabled) { color:var(--p-lite); }
body.dark .calm .bankrow .cnt { color:#b8bcc4; }
body.dark .calm .btn.gray:not(:disabled) { color:#c8c8c8; }
/* 「＋ 添加题库」那行：平时用 --p-ink（主色压深了在浅底上好读），
   深色底上得换主色的浅色版，否则挑个浅主色（比如粉）时会看不见。 */
body.dark .bankrow.add,
body.dark .bankrow.add .cnt { color:var(--p-lite); }
body.dark .res .ex { color:#b8b8b8; }
body.dark .res .ex b { color:#e2e2e2; }

/* 选项 / 结果条的对错配色 */
body.dark .opt { border-color:#333; }
body.dark .opt.sel { background:#10283c; border-color:#177ddc; }
body.dark .opt.ok  { background:#132a16; border-color:#389e0d; }
body.dark .opt.bad { background:#2c1618; border-color:#a8071a; }
body.dark .res.ok  { background:#132a16; border-color:#237804; }
body.dark .res.bad { background:#2c1618; border-color:#a8071a; }

/* 填空题输入框 */
body.dark .fillin { background:#16232f; color:#e2e2e2; border-bottom-color:var(--p-lite); }
body.dark .fillin.ok  { background:#132a16; color:#95de64; border-bottom-color:#52c41a; }
body.dark .fillin.bad { background:#2c1618; color:#ff7875; border-bottom-color:#ff4d4f; }

/* 蓝色系元素（标签、按钮、选中态） */
body.dark .tag,
body.dark .chip.on { background:var(--p-a34); color:var(--p-lite); }
/* ⚠️ `.bankrow` / `.btn.gray` 现在（方案丙）是**实心主色**，字色由 --p-fg 管、
   在任何主题下都一样 —— 所以这里不再有 body.dark 的覆盖（以前那两条会把它盖坏）。 */
body.dark .opt.sel { background:var(--p-a34); border-color:var(--p-lite); }
body.dark .libitem .oo.right { background:#132a16; color:#95de64; }
body.dark .libitem .oo.right::before { color:#95de64; }
body.dark .dlg p { color:#b8b8b8; }   /* 深色下弹窗的说明文字提亮 */
body.dark .sethead { border-bottom-color:rgba(255,255,255,.1); color:#e6e8eb; }
body.dark .avatar .cam { background:#2c2c2c; color:#ddd; }

/* 内联写的深色文字，深色底上会看不见，这里统一提亮 */
body.dark [style*="color:#333"] { color:#e0e0e0 !important; }
body.dark [style*="color:#555"] { color:#c8c8c8 !important; }
body.dark [style*="color:#666"] { color:#b8b8b8 !important; }
body.dark [style*="color:#222"] { color:#e2e2e2 !important; }
body.dark [style*="color:#52c41a"] { color:#73d13d !important; }
body.dark [style*="color:#ff4d4f"] { color:#ff7875 !important; }
body.dark [style*="color:#d4380d"] { color:#ff9c6e !important; }
body.dark [style*="color:#faad14"] { color:#ffc53d !important; }
body.dark [style*="color:var(--p)"] { color:var(--p-lite) !important; }
/* 内联的浅色底/浅色分隔线 */
body.dark [style*="background:#f0f8ff"] { background:#10283c !important; border-color:#1d4a6e !important; }
body.dark [style*="dashed #eee"] { border-top-color:#333 !important; }
/* 这两处以前漏了兜底，深色下会一直是个浅色块 */
body.dark [style*="background:#fff7e6"] { background:#2b2113 !important; }
body.dark [style*="background:#f2f3f5;color:#666"] { background:#2b2b2b !important; color:#c8c8c8 !important; }

/* 启动加载圈 */
#apploading { position:fixed; inset:0; z-index:99999; background:#f2f3f5;
  display:flex; align-items:center; justify-content:center; }
#apploading .spin { width:36px; height:36px; border:3px solid #d0d7de;
  border-top-color:#1890ff; border-radius:50%;
  animation:appspin .8s linear infinite; }
@keyframes appspin { to { transform:rotate(360deg); } }

/* 老浏览器没有 backdrop-filter：玻璃做不出来，就退回"实色卡片"，
   不能让它变成一片糊。 */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  :root { --g-bg:rgba(255,255,255,.95); --g-solid:rgba(255,255,255,.95);
          --g-bg2:rgba(245,246,248,.9); --g-bar:rgba(255,255,255,.97);
          --g-dlg:rgba(255,255,255,.98); }
  body.dark { --g-bg:rgba(28,30,36,.96); --g-solid:rgba(36,38,46,.96);
              --g-bg2:rgba(255,255,255,.10); --g-bar:rgba(28,30,36,.97);
              --g-dlg:rgba(28,30,36,.98); }
}