/* ============ 驾考宝典 H5 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* ===== MasterGo「驾考」画布直读（file 206791618144344，首页画板 1:04）=====
     主色是【高级橙 #E85D04】—— 原来那套 Pixso 蓝 #2B6CFF 整站作废。
     之所以只换这一组变量就能把整站翻橙：全站按钮/胶囊/进度条/选中态本来就是
     写 var(--brand) 的，不写死颜色的地方自动跟着走。
     语义色与品牌色【严格分开】：绿只表示答对、红只表示答错、琥珀只表示警示，
     绝不拿它们当装饰色（画布上 5 个模式卡的图标底座就是这么分的）。 */
  --brand: #e85d04;   /* 主色：主按钮 / 胶囊 / 激活态 / 进度条 / Banner */
  --brand-d: #c24d03; /* 按压态 */
  --brand-l: #fff4ef; /* 主色浅底 */
  --brand-rgb: 232, 93, 4;  /* 品牌色 RGB 三元组：给 rgba(var(--brand-rgb), α) 用 */
  --brand-2: #f07a2a;       /* 品牌渐变中段（Banner / 大按钮） */
  --brand-3: #f5a623;       /* 品牌渐变末端 */
  --ok: #16a34a;      /* Color/Success —— 答对 */
  --ok-l: #f0fdf4;
  --bad: #ef4444;     /* Color/Error —— 答错 */
  --bad-l: #fef2f2;
  --warn: #f59e0b;    /* Color/Warning —— 警示 */
  --warn-l: #fffbeb;
  --bg: #f5f6f8;      /* 页面底 */
  --card: #ffffff;    /* 卡面 */
  --t1: #1a1a1a;      /* 文字 T1 */
  --t2: #6b7280;      /* 文字 T2 */
  --t3: #9ca3af;      /* 文字 T3 */
  --line: #e5e7eb;    /* 分割线 */
  --grad: #e85d04;
  --grad-soft: #fff4ef;
  --r: 16px;          /* 大卡圆角（画布 48） */
  --r-md: 12px;       /* 模式卡 / 图标块圆角（画布 36） */
  --r-lg: 999px;      /* 胶囊 */
  --sh: 0 6px 24px rgba(0, 0, 0, .04);
  --sh-lg: 0 12px 48px rgba(0, 0, 0, .06);
  --sh-brand: 0 12px 40px rgba(232, 93, 4, .22);
  --hi: inset 0 0 0 rgba(255, 255, 255, 0);
  --sh2: 0 8px 24px rgba(16, 24, 40, .12);
  /* Noto Sans SC 排第一：画布上整稿就是这个字体，中文与数字的字面宽度按它对齐的 */
  --ff: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Naskh Arabic", "Scheherazade New",
        "UKIJ Tuz Tom", "Alkatip Basma Tom", sans-serif;
}

/* ===== 主题色（第九批）：只换品牌色系，布局 / 字号 / 圆角一律不动 =====
   orange 就是上面的 :root（默认，视觉与现网一致）；
   blue / green 只覆盖品牌相关变量，其它令牌完全继承。
   游戏页走的是 game.css 里的 --gv-* 变量，压根不读 --brand，所以主题不会串进对局。 */
html[data-theme="blue"] {
  --brand: #1e6fd9; --brand-d: #1557ad; --brand-l: #e8f1fd;
  --brand-rgb: 30, 111, 217;
  --brand-2: #4a8fea; --brand-3: #7db3f5;
  --grad: #1e6fd9; --grad-soft: #e8f1fd;
  --sh-brand: 0 12px 40px rgba(30, 111, 217, .22);
}
html[data-theme="green"] {
  --brand: #0f6b4f; --brand-d: #0a5138; --brand-l: #e6f2ed;
  --brand-rgb: 15, 107, 79;
  --brand-2: #1e8a68; --brand-3: #3faf88;
  --grad: #0f6b4f; --grad-soft: #e6f2ed;
  --sh-brand: 0 12px 40px rgba(15, 107, 79, .22);
}

html, body { height: 100%; }
body {
  font-family: var(--ff);
  background: #e5e7eb;
  color: var(--t1);
  font-size:calc(var(--fs,1)*0.9375rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
[dir="rtl"] body, body.rtl { direction: rtl; }

/* 手机外壳 */
#app {
  max-width: 520px; margin: 0 auto; min-height: 100%;
  background: var(--bg); position: relative;
  box-shadow: 0 0 40px rgba(16, 30, 70, .1);
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ---------- 通用 ---------- */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
.hdr .ttl { font-size:calc(var(--fs,1)*1.0625rem); font-weight: 700; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr .sub { font-size:calc(var(--fs,1)*0.75rem); color: var(--t3); font-weight: 500; }
/* 答题页顶栏改成「✕ · 第 N / M 题（居中橙字）· ★ · ☰」（对齐 MasterGo 画板 02 刷题页）。
   计数是这一屏最有信息量的东西，所以给它主色 + 加粗，模式名缩到下面一行灰字。 */
.hdr .hd-c { flex: 1; min-width: 0; text-align: center; }
.hdr .hd-n {
  font-size: calc(var(--fs,1)*0.9375rem); font-weight: 800; color: var(--brand);
  line-height: 1.25; font-variant-numeric: tabular-nums;
}
.hdr .hd-t {
  font-size: calc(var(--fs,1)*0.6875rem); color: var(--t3); font-weight: 500; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 圆形玻璃按钮：白→浅蓝竖向渐变 + 顶部高光 + 外投影。
   必须和小程序/预览的 .nb-btn 一致（同为圆形），之前 H5 这里写成 10px 方角，
   看着跟另两端不是一个 App（用户反馈「太 low」）。 */
.iconbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; color: var(--t2); font-size:calc(var(--fs,1)*1rem); font-weight: 700;
  transition: .15s;
}
.iconbtn:active { transform: scale(.9); box-shadow: 0 1px 4px rgba(16, 30, 70, .14); }
/* 已收藏：琥珀渐变实心 + 橙色发光，跟小程序 .nb-btn.on 一套 */
.iconbtn.on {
  color: #b45309; border-color: transparent;
  background: #fef3c7;
  box-shadow: none;
}

.page { flex: 1; padding: 14px 14px calc(78px + env(safe-area-inset-bottom, 0px)); }
.card {
  background: var(--card); border-radius: var(--r); padding: 16px;
  box-shadow: var(--sh); margin-bottom: 12px;
  border: 1px solid var(--line);
}
.card.pad0 { padding: 0; overflow: hidden; }

.sec-t { font-size:calc(var(--fs,1)*0.8125rem); font-weight: 700; color: var(--t2); margin: 0 4px 8px;
  display: flex; align-items: center; gap: 6px; }
.sec-t .cnt { font-weight: 500; color: var(--t3); font-size:calc(var(--fs,1)*0.75rem); }

/* ---------- 首页（MasterGo 画板 1:04） ---------- */
/* ① 橙色 Banner 大卡
   画布值：底色 linear-gradient(119deg,var(--brand),var(--brand-2),var(--brand-3))；
           实拍图叠 90% 不透明；底部再压一层 linear-gradient(0deg,rgba(var(--brand-rgb),.6),transparent 50%)
           把左下角三行字衬出来；圆角 48（=16 CSS），投影 0 12px 40px rgba(var(--brand-rgb),.22)。
   三行字全部来自既有 i18n 键（app_name / slogan / 科目车型标签），没有新造词。 */
.hero {
  position: relative; overflow: hidden;
  min-height: 205px; margin-bottom: 14px; padding: 18px;
  border-radius: var(--r);
  background: linear-gradient(119deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  box-shadow: var(--sh-brand);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
/* 实拍图当底：.hero 自己没有背景图属性，全交给这一层，方便其它页面复用 .hero 时不带图 */
.hero .hero-bg {
  position: absolute; inset: 0;
  background-image: url(../pics/home-banner.jpg);
  background-size: cover; background-position: center 62%;
  opacity: .92;
}
.hero .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--brand-rgb), .84) 0%,
              rgba(var(--brand-rgb), .26) 44%, rgba(0, 0, 0, 0) 74%);
}
.hero .hero-txt { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.hero .hero-tag {
  font-size: calc(var(--fs,1)*0.6875rem); font-weight: 600;
  color: rgba(255, 255, 255, .92); letter-spacing: .04em;
}
.hero .hero-tt {
  font-size: calc(var(--fs,1)*1.1875rem); font-weight: 800;
  letter-spacing: .02em; text-shadow: 0 1px 8px rgba(120, 46, 0, .28);
}
.hero .hero-sub { font-size: calc(var(--fs,1)*0.6875rem); font-weight: 500; color: rgba(255, 255, 255, .94); }

.langfab {
  position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3;
  /* 压在亮色天空上，纯白半透明底会糊掉 → 改半透明黑 */
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px; padding: 5px 11px; font-size:calc(var(--fs,1)*0.75rem); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  backdrop-filter: blur(4px); transition: .15s;
}
.langfab:active { transform: scale(.95); }

/* 筛选 chip：第四批要求间距加大（≥8px），内边距同步放宽一点 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 16px; border-radius: 100px; background: #f4f6f9; border: 1px solid transparent;
  font-size:calc(var(--fs,1)*0.875rem); font-weight: 600; color: var(--t2); cursor: pointer; transition: .15s;
  user-select: none;
}
.chip:active { transform: scale(.96); }
.chip.on { background: var(--brand-l); border-color: rgba(var(--brand-rgb), .30); color: var(--brand); font-weight: 700;
  box-shadow: none; }
.chip.dim { opacity: .38; }

/* ② 五个模式卡（第四批重做：2 列大卡网格）
   指令要求：不挤一行；卡片占可用宽度约 48%、高 ≥100px、图标 ≥48px、
   文字 ≥16px、卡间距 ≥16px；第三行「游戏闯关」单独居中。
   图标底座颜色按画布分：顺序/游戏 = 橙底，随机 = 绿，错题本 = 琥珀，模拟考试 = 红。
   图标本身走 currentColor 的线性 SVG（见 app.js 的 ICONS），所以能跟着底座色走 ——
   用 emoji 的话颜色是死的，五个图标会五颜六色，跟稿子完全不是一回事。 */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.mode {
  min-width: 0; min-height: 108px;
  background: var(--card); border: none; border-radius: var(--r-md);
  padding: 16px 10px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  cursor: pointer; font-family: var(--ff); transition: transform .16s, box-shadow .16s;
  box-shadow: var(--sh);
}
.mode:active { transform: scale(.955); }
/* 第三行的游戏闯关：跨两列 + 居中，宽度与其它卡一致（(100% - 16px 间距) / 2） */
.mode.wide { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
.mode .ic {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-l); color: var(--brand);
}
.mode .ic svg { width: 26px; height: 26px; display: block; }
.mode .ic.i-grn { background: #f0fdf4; color: var(--ok); }
.mode .ic.i-amb { background: var(--warn-l); color: var(--warn); }
.mode .ic.i-red { background: var(--bad-l); color: var(--bad); }
.mode .nm {
  font-size: calc(var(--fs,1)*1rem); font-weight: 600; color: var(--t1);
  line-height: 1.3; text-align: center;
  /* 【不要写 white-space: nowrap】中文标签是「顺序练习」四个字，正好塞得下；
     但维语「تەرتىپلىك مەشىق」比中文长一倍多，nowrap 会让它冲出自己的卡。
     允许折行 + 断词，2 列卡片高一点没关系，min-height 兜底。 */
  white-space: normal; overflow-wrap: break-word; min-width: 0;
}
/* 维/哈语标签更长：保持 16px 不下探（指令下限就是 16px），只把行高收紧 */
[dir="rtl"] .mode .nm { font-size: calc(var(--fs,1)*1rem); line-height: 1.35; }

/* Pixso 规格：全胶囊 radius 100px。
   主 = 实心 Primary 白字；次 = 白底 + 1px Divider 描边灰字；禁用 = 浅蓝底浅蓝字；按压 = #1E54D6。 */
.btn {
  width: 100%; border: none; border-radius: 100px; padding: 15px;
  font-size: calc(var(--fs,1)*1rem);
  font-weight: 600; cursor: pointer; transition: .16s; font-family: var(--ff);
  background: var(--brand); color: #fff;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), .20);
}
.btn:active {
  background: var(--brand-d);
  box-shadow: 0 2px 6px rgba(var(--brand-rgb), .16);
}
/* ghost：浅蓝底蓝字（强调但次一级，如「继续上次」） */
.btn.ghost {
  background: var(--brand-l); color: var(--brand);
  border: 1px solid transparent; box-shadow: none;
}
.btn.ghost:active { background: #ffe4d3; }
/* gray：规格要求的「次按钮」—— 白底 + 1px #E5E7EB 描边灰字 */
.btn.gray {
  background: var(--card); color: var(--t2);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn.gray:active { background: #f9fafb; border-color: #d1d5db; }
/* ok：交卷按钮（考试末题用）。红色实心，与小程序/预览的 .qbar-submit 同源。
   注意别和 .opt.ok（答对选项的绿）混 —— 这里管的是按钮，不是选项卡。 */
.btn.ok { background: var(--bad); color: #fff; border: 1px solid transparent;
  box-shadow: 0 6px 16px rgba(239, 68, 68, .18); }
.btn.ok:active { background: #d92d20; box-shadow: 0 2px 6px rgba(239, 68, 68, .16); }
.btn.sm { padding: 11px; font-size: calc(var(--fs,1)*0.875rem); border-radius: 100px; }
/* 禁用：浅蓝底浅蓝字（规格指定，不是灰） */
.btn:disabled,
.btn[disabled] {
  background: var(--brand-l); color: #f7c9a8;
  box-shadow: none; cursor: not-allowed; opacity: 1;
}
.btn:disabled:active, .btn[disabled]:active { background: var(--brand-l); }
/* 「未作答时的下一题」：视觉上是禁用态（浅蓝底浅蓝字），但**不用 disabled 属性** ——
   用属性会把 click 事件一起吞掉，用户点了没任何反馈只会以为是卡了。
   保留可点击，由 JS 拦下来弹「先作答，再进入下一题」。 */
.btn.off,
.btn[aria-disabled="true"] {
  background: var(--brand-l); color: #f7c9a8;
  box-shadow: none; opacity: 1;
}
.btn.off:active, .btn[aria-disabled="true"]:active { background: var(--brand-l); }

.kv { display: flex; gap: 8px; margin-top: 12px; }
.kv .item {
  flex: 1; background: #f5f6f8; border-radius: 12px; padding: 10px 8px; text-align: center;
}
.kv .item b { display: block; font-size:calc(var(--fs,1)*1.0625rem); font-weight: 800; color: var(--brand-d); }
.kv .item span { font-size:calc(var(--fs,1)*0.7188rem); color: var(--t3); }

/* 库信息条 */
.bankbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  background: var(--grad-soft);
  border-radius: 12px; padding: 10px 13px; margin-bottom: 12px; font-size:calc(var(--fs,1)*0.7812rem); color: var(--brand);
  font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .12);
}
.bankbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }

/* ---------- 底部 tab（MasterGo 画板 1:04 底栏）----------
 * 画布实测：通栏白色毛玻璃（rgba(255,255,255,.85) + blur(60px)），
 * 顶部 1px #E5E7EB 分隔线 + 20px 上圆角，四个「图标在上、10px 标签在下」的格子，
 * 激活项 = 橙色图标 + 橙色标签，【没有】蓝色实心胶囊底座（旧版那套已经删掉）。
 * 图标走 app.js 的 ICONS（svg + currentColor），所以激活时真的会变橙；
 * 用 emoji 的话只能靠 grayscale 滤镜压灰，激活态变不出橙色。 */
.tabbar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  max-width: 520px;
  margin: 0 auto;
  z-index: 40;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(60px);
  backdrop-filter: blur(60px);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  display: flex;
  padding: 9px 6px calc(9px + env(safe-area-inset-bottom, 0px));
}
.tabbar .tb {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 3px 2px;
  min-height: 46px;                 /* 安卓可点区域 */
  border: 0; background: none; font-family: var(--ff);
  cursor: pointer;
  color: var(--t3);
  transition: color .16s, transform .12s;
  position: relative;
}
.tabbar .tb .ic {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.tabbar .tb .ic svg { width: 23px; height: 23px; display: block; }
.tabbar .tb .lb {
  font-size: calc(var(--fs,1)*0.625rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--t3);
  transition: color .16s;
}
/* 激活：图标 + 标签一起转橙（图标是 currentColor，不用单独写） */
.tabbar .tb.on { color: var(--brand); }
.tabbar .tb.on .lb { color: var(--brand); font-weight: 800; }
.tabbar .tb:active { transform: scale(.94); }

/* ICP 备案号页脚：内容流末尾，灰色小字居中，不遮挡 fixed 底栏 */
.site-footer { text-align: center; margin-top: 10px; padding: 12px 12px calc(6px + env(safe-area-inset-bottom, 0px)); font-size: calc(var(--fs,1)*0.6875rem); line-height: 1.5; color: var(--t3); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:active { opacity: .7; }
.tabbar .tb .badge {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  margin-inline-start: 7px;
  background: var(--bad); color: #fff;
  font-size: calc(var(--fs,1)*0.5625rem); font-weight: 700;
  border-radius: 9px; padding: 1px 5px; min-width: 15px; text-align: center;
}
[dir="rtl"] .tabbar .tb .badge { margin-inline-start: 7px; margin-inline-end: 0; }

/* ---------- 答题页 ---------- */
.quizwrap { display: flex; flex-direction: column; min-height: 100vh; }
.progressbar { height: 4px; background: #eeeef0; overflow: hidden; }
.progressbar i { display: block; height: 100%; border-radius: 0 4px 4px 0;
  background: var(--brand);
  box-shadow: 0 1px 4px rgba(var(--brand-rgb), .26); transition: width .3s; }
[dir="rtl"] .progressbar i { margin-left: auto; }

.qbody { flex: 1; padding: 16px 14px 200px; }

.qtag { display: inline-flex; align-items: center; gap: 5px; font-size:calc(var(--fs,1)*0.7188rem); font-weight: 700;
  padding: 3px 9px; border-radius: 7px; background: var(--brand-l); color: var(--brand-d); }
.qtag.t2 { background: var(--warn-l); color: #b45309; }
.qtag.t3 { background: #f0f9ff; color: #0369a1; }
/* 题标签行：跟题干走（画板 02 刷题页的顺序是 图 → 题干 → 标签 → 选项） */
.qtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }

.qtext { font-size:calc(var(--fs,1)*1.0625rem); line-height: 1.65; font-weight: 600; margin: 13px 0 14px; white-space: pre-wrap;
  word-break: break-word; }
.qtext.rtl { direction: rtl; text-align: right; font-size:calc(var(--fs,1)*1.125rem); line-height: 1.95; }

.qimg { width: 100%; max-height: 38vh; object-fit: contain; border-radius: 12px;
  margin: 0 auto 14px; background: #f5f6f8; display: block; }
.qimg.anim { background: #000; }
/* 「暂无配图」占位（第五批 1.2）：题干提到图但没有配图文件时显示，
   虚线框 + 灰字，明示「这里有图只是没资源」，不留空白。 */
.qimg-none {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; margin: 0 auto 14px; padding: 12px;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: #fafbfc; color: var(--t3);
  font-size: calc(var(--fs,1)*0.8125rem); font-weight: 500;
}
.qimg-none[hidden] { display: none; }

.opts { display: flex; flex-direction: column; gap: 10px; }
/* Pixso OptionCard 规格（file lg7GM0wax6u6CieWYXTHBg）：
   白底 16px 圆角卡 + 左侧【圆形】字母徽标，扁平无投影（官方干净风）。
   四种状态，底色 / 描边 / 徽标 / 【文字色】四件套一起变：
   默认 = 白卡浅灰描边 + 灰徽标 + 深字
   选中 = 浅蓝底 #EAF1FF + 蓝描边 + 蓝徽标 + 蓝字
   答对 = 浅绿底 + 绿描边 + 绿徽标 + 深绿字
   答错 = 浅红底 + 红描边 + 红徽标 + 深红字
   文字色是上一版漏掉的 —— 只有底色变、字还是黑的，看着就"没变化"。 */
.opt {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px 14px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-align: start; box-shadow: none;
  font-family: var(--ff); font-size: calc(var(--fs,1)*0.9375rem); color: var(--t1); width: 100%;
}
.opt:active { transform: scale(.985); }
/* 圆形徽标：默认浅灰底深灰字 */
.opt .k {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f3f4f6; color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--fs,1)*0.8125rem);
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
/* 只可能横向折行，绝不可能逐字竖排 */
.opt .v { flex: 1 1 auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  transition: color .15s; }

/* 选中：浅蓝底 + 蓝描边 + 蓝圆徽标白字 + 蓝字 */
.opt.sel {
  border-color: var(--brand); background: var(--brand-l);
}
.opt.sel .k { background: var(--brand); color: #fff; }
.opt.sel .v { color: var(--brand); }
/* 答对：浅绿底 + 绿描边 + 绿圆徽标 + 深绿字 */
.opt.ok { border-color: var(--ok); background: var(--ok-l); }
.opt.ok .k { background: var(--ok); color: #fff; }
.opt.ok .v { color: #15803d; }
/* 答错：浅红底 + 红描边 + 红圆徽标 + 深红字 */
.opt.bad { border-color: var(--bad); background: var(--bad-l); }
.opt.bad .k { background: var(--bad); color: #fff; }
.opt.bad .v { color: #dc2626; }

.opt.locked { cursor: default; }
.opt.locked:active { transform: none; }
/* 【已删除 .opt.judge* 五条】原来判断题是不带字母标、文字居中单独一套样式。
   现在判断题与选择题共用同一种选项行（画板 02 刷题页就是「A 正确 / B 错误」），
   judge 这个类在 app.js 里已经不再输出，留着只会误导。 */

/* ===== 收藏按钮已换成顶栏 .iconbtn 星标 =====
 * 原来那个 .favtag 白胶囊「☆ 收藏」是压缩包那套 UI 的东西，MasterGo 画板
 * 02 刷题页顶栏右侧是一枚跟 ✕ 同款的圆形图标按钮（收藏态 = 琥珀实心 ★）。
 * CSS 这里不留 .favtag —— 留着它，哪天有人再写回 data-act="fav" 的胶囊版，
 * 就会跟画板打架。答题页的收藏按钮见 viewQuiz() 里的 .iconbtn[data-act="fav"]。 */

.fb { border-radius: var(--r); padding: 13px 15px; margin-top: 14px; font-size:calc(var(--fs,1)*0.875rem); font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.5; }
.fb.ok { background: var(--ok-l); color: #067647; }
.fb.bad { background: var(--bad-l); color: #b42318; }
/* 正确答案独占一整行，但文字本身仍是横排 */
.fb .ans { flex: 1 0 100%; font-weight: 800; }
.fb .fb-ic { flex: none; }

/* 底部答题栏 */
.qbar {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 520px; margin: 0 auto; z-index: 35;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px; align-items: center;
}
.qbar .btn { padding: 13px; font-size: calc(var(--fs,1)*0.9375rem); }
/* 答题底栏里的次按钮：白底 + 1px Divider 描边灰字（Pixso 规格）
   原来这里叠了一层内高光 box-shadow，和 .btn.gray 的新样式打架，这里直接不再重复定义，
   统一交给 .btn.gray 的全局规则，避免两处规则各说各话。 */

/* 自动跳题开关 */
.autotog {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: #f2f2f4; color: var(--t3); cursor: pointer;
  font-family: inherit; font-size:calc(var(--fs,1)*0.7188rem); font-weight: 700; line-height: 1;
  padding: 9px 9px; border-radius: 11px; transition: .15s; white-space: nowrap;
}
.autotog .sw {
  width: 26px; height: 15px; border-radius: 8px; background: #d4d4d8;
  position: relative; flex: none; transition: .18s;
}
.autotog .sw i {
  position: absolute; top: 1.5px; inset-inline-start: 1.5px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: .18s; box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.autotog.on { background: var(--brand-l); color: var(--brand); }
.autotog.on .sw { background: var(--brand); }
.autotog.on .sw i { inset-inline-start: 12.5px; }
.autotog:active { transform: scale(.96); }

/* 设置行里的大号开关 */
.sw2 {
  display: inline-block; width: 42px; height: 24px; border-radius: 12px;
  background: #d4d4d8; position: relative; transition: .2s; vertical-align: middle;
}
.sw2 i {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.sw2.on { background: var(--brand); }
.sw2.on i { inset-inline-start: 20px; }

/* 答题卡 */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60;
  opacity: 0; pointer-events: none; transition: .22s;
}
.sheet-mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 520px; margin: 0 auto; z-index: 61;
  background: #fff; border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: .26s cubic-bezier(.32,.72,0,1); max-height: 74vh; overflow: auto;
}
.sheet.on { transform: translateY(0); }
.sheet h3 { font-size:calc(var(--fs,1)*1rem); font-weight: 800; margin-bottom: 4px; }
.sheet .hint { font-size:calc(var(--fs,1)*0.75rem); color: var(--t3); margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.gcell {
  aspect-ratio: 1; border-radius: 10px; background: #f5f6f8; display: flex; align-items: center;
  justify-content: center; font-size:calc(var(--fs,1)*0.8125rem); font-weight: 700; color: var(--t2); cursor: pointer;
  border: 1.5px solid transparent;
}
.gcell.done { background: var(--brand-l); color: var(--brand-d); }
.gcell.cur { border-color: transparent; background: var(--grad); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), .30); }
.gcell.wrong { background: var(--bad-l); color: var(--bad); }
.gcell.fav { box-shadow: inset 0 -3px 0 var(--warn); }

/* ---------- 结果页 ---------- */
.scorewrap { text-align: center; padding: 30px 20px 10px; }
.gauge { width: 168px; height: 168px; margin: 0 auto 8px; position: relative; }
.gauge svg { transform: rotate(-90deg); }
.gauge .val { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.gauge .val b { font-size:calc(var(--fs,1)*2.875rem); font-weight: 800; line-height: 1; }
.gauge .val span { font-size:calc(var(--fs,1)*0.75rem); color: var(--t3); margin-top: 4px; }
.badge-pass { display: inline-block; padding: 5px 18px; border-radius: 20px; font-size:calc(var(--fs,1)*0.875rem);
  font-weight: 800; margin: 10px 0 4px; }
.badge-pass.ok { background: var(--ok-l); color: #067647; }
.badge-pass.no { background: var(--bad-l); color: #b42318; }

/* ---------- 列表 ---------- */
/* 错题本列表卡 · MasterGo 画布令牌（白卡 + 16/圆角 + 阴影） */
.qitem {
  background: var(--card); border-radius: var(--r); padding: 14px 16px;
  margin-bottom: 10px; box-shadow: var(--sh); cursor: pointer;
  transition: .15s;
}
.qitem:last-child { margin-bottom: 0; }
.qitem:active { transform: scale(.99); box-shadow: var(--sh-lg); }
.qtop { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.qnum {
  font-size: calc(var(--fs,1)*0.6875rem); font-weight: 700; color: #fff;
  background: var(--brand); padding: 3px 9px; border-radius: 999px;
  line-height: 1.3; font-variant-numeric: tabular-nums;
}
.qtyp {
  font-size: calc(var(--fs,1)*0.6875rem); font-weight: 600; color: var(--t3);
  background: #f3f4f6; padding: 3px 9px; border-radius: 999px; line-height: 1.3;
}
.qfav { margin-inline-start: auto; color: var(--warn); font-size: 14px; }
.qtx {
  font-size: calc(var(--fs,1)*0.875rem); color: var(--t1); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qtx.rtl { direction: rtl; text-align: right; }
.qan { font-size: calc(var(--fs,1)*0.75rem); color: var(--t3); margin-top: 8px; }
.qan b { color: var(--ok); font-weight: 700; }

.empty { text-align: center; padding: 70px 20px; color: var(--t3); }
.empty .ic { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.empty .ic { font-size:calc(var(--fs,1)*2.875rem); opacity: .5; }
.empty p { margin-top: 12px; font-size:calc(var(--fs,1)*0.875rem); }

.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
  font-size:calc(var(--fs,1)*0.875rem); font-family: var(--ff); outline: none; background: #fff;
}
.searchbar input:focus { border-color: var(--brand); }

/* ---------- 标志 ---------- */
.catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat {
  background: #fff; border-radius: 14px; padding: 14px 12px; box-shadow: var(--sh); cursor: pointer;
  display: flex; align-items: center; gap: 11px; transition: .15s; min-height: 68px;
}
.cat:active { transform: scale(.97); }
.cat img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.cat > div { min-width: 0; }
.cat .nm { font-size:calc(var(--fs,1)*0.8438rem); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.cat .ct { font-size:calc(var(--fs,1)*0.6875rem); color: var(--t3); margin-top: 2px; }

.signgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sign { background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--sh); cursor: pointer;
  transition: .15s; }
.sign:active { transform: scale(.97); }
.sign img { width: 100%; height: 88px; object-fit: contain; background: #fafafa; border-radius: 9px; }
.sign .nm { font-size:calc(var(--fs,1)*0.8125rem); font-weight: 700; margin-top: 8px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sign .nm.rtl { direction: rtl; text-align: right; }
.sign-detail img { width: 100%; max-height: 240px; object-fit: contain; background: #fafafa;
  border-radius: 14px; padding: 10px; }
.sign-detail h2 { font-size:calc(var(--fs,1)*1.1875rem); font-weight: 800; margin: 14px 0 8px; }
.sign-detail h2.rtl { direction: rtl; text-align: right; }
.sign-detail .d { font-size:calc(var(--fs,1)*0.9062rem); line-height: 1.75; color: var(--t2); white-space: pre-wrap; }
.sign-detail .d.rtl { direction: rtl; text-align: right; font-size:calc(var(--fs,1)*0.9688rem); line-height: 2; }

/* ---------- 统计 ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 0 2px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  justify-content: flex-end; height: 100%; }
.bars .b i { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px;
  background: var(--brand); min-height: 3px; }
.bars .b span { font-size:calc(var(--fs,1)*0.5938rem); color: var(--t3); white-space: nowrap; }

.rowline { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px;
  border-bottom: 1px solid var(--line); font-size:calc(var(--fs,1)*0.875rem); }
.rowline:last-child { border-bottom: none; }
.rowline .lb { color: var(--t1); display: flex; align-items: center; gap: 9px; }
/* Pixso 官方干净风：列表项不再用「彩色 emoji 方块」（实色底 + 白 emoji 那种吵）。
   改成浅灰底 + 深灰 emoji，靠字重与留白分层；颜色只留给右侧数值与箭头做点缀。 */
.rowline .rl-ic { width: 30px; height: 30px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; font-size: calc(var(--fs,1)*0.875rem); flex: none;
  background: #f3f4f6; filter: grayscale(1); opacity: .85;
  box-shadow: none; }
/* 原来按 nth-child 给图标上橙/蓝色，单色化后统一清掉，避免残留色块 */
.rowline:nth-child(1) .rl-ic,
.rowline:nth-child(2) .rl-ic { background: #f3f4f6; }
.rowline .vl { font-weight: 600; font-size: calc(var(--fs,1)*0.75rem); color: var(--t2);
  background: #f3f4f6;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
/* 右侧箭头：统一灰底灰字（原来橙/靛/青三套彩色，跟官方干净风冲突） */
.rowline .arw { width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--fs,1)*1.0625rem); font-weight: 700; color: var(--t3); line-height: 1;
  background: #f3f4f6; box-shadow: none; }
.rowline:nth-child(2) .arw,
.rowline:nth-child(3) .arw,
.rowline:nth-child(4) .arw { color: var(--t3); background: #f3f4f6; box-shadow: none; }
[dir="rtl"] .rowline .arw { transform: scaleX(-1); }
/* 应试速判 / 交警手势入口行：同样单色化 */
.rowline.tkline .rl-ic { background: #f3f4f6; }
.rowline.tkline .arw { color: var(--t3); background: #f3f4f6; box-shadow: none; }

/* 交警手势入口：也走统一的单色列表样式（原来橙红 + 彩色箭头，与官方干净风冲突） */

/* ===== 应试速判技巧卡（对应 miniprogram/pages/tips/tips.wxss）=====
   类名统一 tk- 前缀，免得跟首页 / mine 的 .vl / .pl / .chip 撞车 */
.tk-hero { border-radius: 20px; padding: 20px 18px; margin-bottom: 16px; position: relative; overflow: hidden;
  background: var(--brand);
  box-shadow: var(--sh2); }
.tk-hero::after { content: ""; position: absolute; right: -40px; top: -70px; width: 220px; height: 220px;
  border-radius: 50%; background: none; }
.tk-hero-t { font-size:calc(var(--fs,1)*0.75rem); font-weight: 700; color: #fff; opacity: .92; margin-bottom: 14px; }
.tk-hero-n { display: flex; gap: 10px; position: relative; z-index: 1; }
.tk-hero-i { flex: 1; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: 12px 6px; text-align: center; }
.tk-vn { display: block; font-size:calc(var(--fs,1)*0.9375rem); font-weight: 800; color: #fff; line-height: 1.15; }
.tk-pl { display: block; font-size:calc(var(--fs,1)*0.5625rem); color: rgba(255,255,255,.86); font-weight: 600;
  margin-top: 3px; line-height: 1.35; }
.tk-note { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  margin-bottom: 16px; box-shadow: var(--sh); font-size:calc(var(--fs,1)*0.7188rem); line-height: 1.7; color: var(--t2); }
/* 四个分组一行放得下：等分 + 缩字号；隐藏横向滚动条，不露滚动条 */
.tk-tabs { white-space: nowrap; margin: 0 -14px 14px; padding: 0 14px; overflow-x: hidden; }
.tk-tabrow { display: flex; }
.tk-tab { font-size:calc(var(--fs,1)*0.625rem); font-weight: 700; line-height: 1.3; padding: 6px 0; border-radius: 999px;
  flex: 1 1 0; min-width: 0; box-sizing: border-box; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: #fff; border: 1px solid var(--line); color: var(--t2); cursor: pointer; }
.tk-tab + .tk-tab { margin-left: 4px; }
.tk-tab.on { color: #fff; border-color: transparent; background: var(--brand);
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), .26); }
.tk-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  margin-bottom: 14px; box-shadow: var(--sh); position: relative; overflow: hidden; }
.tk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.tk-card.right::before { background: #10b981; }
.tk-card.wrong::before { background: #ef4444; }
.tk-card.all::before { background: #0ea5e9; }
.tk-card.single::before { background: #f97316; }
.tk-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.tk-id { font-size:calc(var(--fs,1)*0.625rem); font-weight: 800; color: #fff; background: var(--brand); padding: 4px 10px;
  border-radius: 8px; flex: none; margin-top: 2px; }
.tk-card.right .tk-id { background: #10b981; }
.tk-card.wrong .tk-id { background: #ef4444; }
.tk-card.all .tk-id { background: #0ea5e9; }
.tk-card.single .tk-id { background: #f97316; }
.tk-tt { flex: 1; }
.tk-t { font-size:calc(var(--fs,1)*0.875rem); font-weight: 700; line-height: 1.4; color: var(--t1); }
.tk-sub { font-size:calc(var(--fs,1)*0.6562rem); color: var(--t3); font-weight: 600; margin-top: 3px; line-height: 1.5; }
.tk-trig { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.tk-chip-k { font-size:calc(var(--fs,1)*0.625rem); font-weight: 700; padding: 5px 12px; border-radius: 8px; color: #b45309;
  background: #fff7ed; border: 1px solid #ffdcb8; }
.tk-card.right .tk-chip-k { color: #047857; background: #f0fdf6;
  border-color: #b6ecd6; }
.tk-card.all .tk-chip-k { color: #0369a1; background: #f0f9ff;
  border-color: #bae6fd; }
.tk-card.single .tk-chip-k { color: #a16207; background: #fff8e8;
  border-color: #ffe0a3; }
.tk-foot { display: flex; align-items: center; gap: 12px; }
.tk-ans { font-size:calc(var(--fs,1)*0.6562rem); font-weight: 800; padding: 8px 16px; border-radius: 10px; white-space: nowrap; }
.tk-ans.y { color: #047857; background: #e8fbf3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.tk-ans.n { color: #b91c1c; background: #fef0f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.tk-ans.ab { color: #0369a1; background: #f0f9ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.tk-ans.d { color: #a16207; background: #fff5e0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.tk-bar { flex: 1; height: 10px; border-radius: 999px; background: #f2f3f5; overflow: hidden; display: block; }
.tk-bar-i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.tk-card.right .tk-bar-i { background: #10b981; }
.tk-card.wrong .tk-bar-i { background: #ef4444; }
.tk-card.all .tk-bar-i { background: #0ea5e9; }
.tk-card.single .tk-bar-i { background: #f97316; }
.tk-rate { font-size:calc(var(--fs,1)*0.7188rem); font-weight: 800; color: var(--t1); white-space: nowrap; }
.tk-samples { font-size:calc(var(--fs,1)*0.5938rem); font-weight: 600; color: var(--t3); margin-left: 6px; }
.tk-ex { margin-top: 14px; background: #fafafa; border: 1px dashed #e8e8ea; border-radius: 12px;
  padding: 12px 14px; }
.tk-ex-l { font-size:calc(var(--fs,1)*0.5625rem); font-weight: 800; color: var(--t3); letter-spacing: .06em; margin-bottom: 7px; }
.tk-ex-q { font-size:calc(var(--fs,1)*0.6875rem); line-height: 1.65; color: var(--t1); font-weight: 600; }
.tk-ex-a { display: inline-block; margin-left: 8px; font-size:calc(var(--fs,1)*0.5938rem); font-weight: 800; color: #fff;
  background: var(--brand); padding: 2px 10px; border-radius: 7px; vertical-align: 2px; }
.tk-ex-o { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tk-ex-o span { font-size:calc(var(--fs,1)*0.5938rem); font-weight: 700; color: var(--t2); background: #f5f6f8;
  padding: 4px 10px; border-radius: 7px; }
.tk-foot-note { font-size:calc(var(--fs,1)*0.5938rem); color: var(--t3); line-height: 1.75; text-align: center;
  margin: 20px 8px 10px; }

/* ================= 首页分页：底部导航 / 导流位 =================
   H5 端的底部导航不在这里渲染 —— render() 会给每个「非答题页」统一拼 tabbar()，
   首页只是多了一层「我的」内嵌分页。之前首页又加了一条 .tabs 顶部分段 + 一个
   .home-cta 吸底按钮，三层东西叠在一起打架（用户反馈「完全不符合逻辑」），一起删掉。
   与 miniprogram/pages/index/index.wxss、preview 的 TEMPLATE 三处一一对应，
   改一处必须三处一起改，已有 tools/check_all.js §13 守着。 */
/* 首页让出底部 tabbar 的高度，别让最后一张卡被压住 */
.page-tb { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

/* 首页筛选卡：证件 / 车型 / 科目三张卡拆成一行一行的 frow，
   省掉两个卡头和两道间距，首页往下滚的长度少三成。 */
.frow { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 0; }
.frow + .frow { border-top: 1px dashed rgba(16, 30, 70, .07); }
.flb { flex: none; width: 125px; font-size:calc(var(--fs,1)*0.75rem); font-weight: 700; color: var(--t2); }
.frow .chips { flex: 1; min-width: 0; }

/* 题库信息条：题量 + 题型两截小字原来分两条，占两行高，合成一条 */
.bankbar .bb-n { color: var(--brand); font-weight: 800; }
.bankbar .bb-types { background: var(--warn-l); color: #b45309; border-radius: 6px; padding: 1px 6px;
  flex: 1 0 100%; text-align: start; width: fit-content; }
.bankbar .bb-n { margin-inline-start: auto; }
.bankbar .bb-types.bb-types { margin-inline-start: 0; }

/* ③ 全真模拟大卡（画布 1:04 下半屏）
   结构：实拍图（左上角压一枚橙色「全真模拟」胶囊 + 白色「驾驶证考试中心」）
        + 白底正文（标题 16 居中 / 100题·45分钟·90分及格 / 底行左侧上次得分 + 右侧橙色胶囊按钮） */
.exam-card {
  background: var(--card); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-lg); margin-bottom: 14px;
}
.exam-card .ec-img {
  position: relative; height: 168px;
  display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px;
  background-image: url(../pics/home-exam.jpg);
  background-size: cover; background-position: center 34%;
}
/* 顶部压一层深蓝→透明，保证白色标题在任何照片上都读得清 */
.exam-card .ec-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 40, 84, .55) 0%, rgba(10, 40, 84, 0) 52%);
}
.exam-card .ec-pill,
.exam-card .ec-tt { position: relative; z-index: 2; }
.exam-card .ec-pill {
  background: var(--brand); color: #fff; flex: none;
  font-size: calc(var(--fs,1)*0.75rem); font-weight: 800; letter-spacing: .02em;
  padding: 5px 12px; border-radius: var(--r-lg);
}
.exam-card .ec-tt {
  flex: 1; min-width: 0;
  color: #fff; font-size: calc(var(--fs,1)*1rem); font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 1px 8px rgba(0, 24, 60, .45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.exam-card .ec-body { padding: 16px 16px 14px; text-align: center; }
.exam-card .ec-name { font-size: calc(var(--fs,1)*1.0625rem); font-weight: 800; color: var(--t1); }
.exam-card .ec-sub { font-size: calc(var(--fs,1)*0.875rem); color: var(--t2); margin-top: 6px; }
.exam-card .ec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px;
}
.exam-card .ec-last {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  font-size: calc(var(--fs,1)*0.875rem); font-weight: 600; color: var(--t2);
}
.exam-card .ec-last i {
  width: 34px; height: 34px; border-radius: 50%; flex: none; font-style: normal;
  background: var(--brand-l); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--fs,1)*1rem);
}
.exam-card .ec-btn {
  flex: none; border: 0; cursor: pointer; font-family: var(--ff);
  background: var(--brand); color: #fff;
  font-size: calc(var(--fs,1)*1rem); font-weight: 700;
  padding: 13px 30px; min-height: 46px;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), .28);
  transition: transform .12s, background .12s;
}
.exam-card .ec-btn:active { transform: scale(.96); background: var(--brand-d); }
[dir="rtl"] .exam-card .ec-row { flex-direction: row-reverse; }

/* ④ 三格统计条（题库 / 已答题 / 连续打卡）——
   画布首页没有这一块，但「我刷了多少」是刚需信息，砍掉的话用户没有入口。
   按同一套令牌做，不破坏整体观感。 */
.statcard {
  display: flex; align-items: stretch;
  background: var(--card); border-radius: var(--r); box-shadow: var(--sh);
  margin-bottom: 14px; padding: 13px 0;
}
.statcard .sc-i { flex: 1; text-align: center; position: relative; min-width: 0; }
.statcard .sc-i + .sc-i::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--line);
}
.statcard .sc-i b {
  display: block; font-size: calc(var(--fs,1)*1.0625rem); font-weight: 800;
  color: var(--brand); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.statcard .sc-i span { display: block; font-size: calc(var(--fs,1)*0.6875rem); color: var(--t3); margin-top: 3px; }

/* 顺序练习练到一半时的「继续 / 重来」一行 */
.controw { display: flex; gap: 10px; margin-bottom: 14px; }
.controw .btn:first-child { flex: 3; }
.controw .btn:last-child { flex: 1; }

/* 导流位卡片：后期接广告 / 跳其他小程序，就换这一块的文案与跳转 target */
.feedcard { display: flex; align-items: center; gap: 10px; padding: 13px 14px; margin-bottom: 12px;
  border-radius: var(--r);
  background: #fff7ec;
  border: 1px solid rgba(245,158,11,.22);
  box-shadow: 0 4px 16px rgba(245,158,11,.1);
  transition: transform .12s ease, box-shadow .12s ease; }
.feedcard:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(245,158,11,.12); }
.fc-ic { width: 36px; height: 36px; border-radius: 12px; flex: none;
  background: var(--warn);
  color: #fff; font-size:calc(var(--fs,1)*1.125rem); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(249,115,22,.3); }
.fc-txt { flex: 1; min-width: 0; }
.fc-t { display: block; font-size:calc(var(--fs,1)*0.9062rem); font-weight: 700; color: #92400e; }
.fc-d { display: block; font-size:calc(var(--fs,1)*0.6875rem); color: #b45309; margin-top: 3px; }
.fc-go { font-size:calc(var(--fs,1)*1.25rem); color: #d9a441; flex: none; }
.rtl .feedcard { flex-direction: row-reverse; }

/* ---------- 弹层 ---------- */
.dialog-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  opacity: 0; pointer-events: none; transition: .2s; }
.dialog-mask.on { opacity: 1; pointer-events: auto; }
.dialog { background: #fff; border-radius: var(--r); padding: 22px 20px 16px; width: 100%; max-width: 320px;
  text-align: center; box-shadow: var(--sh2); }
.dialog p { font-size:calc(var(--fs,1)*0.9375rem); line-height: 1.6; margin-bottom: 18px; }
.dialog .dlg-t { font-size:calc(var(--fs,1)*1.0625rem); font-weight: 800; color: var(--t1); margin-bottom: 6px; }
.dialog .btns { display: flex; gap: 10px; }

.langmenu { position: absolute; top: calc(52px + env(safe-area-inset-top, 0px));
  inset-inline-end: 16px; background: #fff; border-radius: 14px; box-shadow: var(--sh2);
  padding: 6px; z-index: 55; min-width: 148px; }
.langmenu .li { padding: 10px 14px; border-radius: 10px; font-size:calc(var(--fs,1)*0.875rem); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.langmenu .li:active { background: #f5f7fc; }
.langmenu .li.on { background: var(--brand-l); color: var(--brand-d); font-weight: 700; }

.toast {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.9);
  background: rgba(15, 23, 42, .88); color: #fff; padding: 11px 20px; border-radius: 12px;
  font-size:calc(var(--fs,1)*0.875rem); z-index: 99; opacity: 0; pointer-events: none; transition: .2s; max-width: 80%;
  text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.spin { width: 26px; height: 26px; border: 3px solid #e2e8f4; border-top-color: var(--brand);
  border-radius: 50%; animation: sp .7s linear infinite; margin: 0 auto; }
@keyframes sp { to { transform: rotate(360deg); } }
.loading-box { padding: 80px 0; text-align: center; color: var(--t3); font-size:calc(var(--fs,1)*0.8125rem); }
.loading-box .spin { margin-bottom: 12px; }

.fade { animation: fade .22s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============ 浮动字号条已删除 ============
 * 原来右下角那个固定悬浮的 A− / 100% / A＋ 是压缩包那套 UI 的控件，
 * MasterGo 画板上根本没有它，用户明确要求「一个不留」。
 * 现在调字号只有一处入口：「我的 → 设置」页的字号卡（.fsrow，见下）。
 * 顺带把 .fsgroup / .fsq / .fsq-lv 那套老控件样式一起删了，留着会跟 .fsrow 抢类。 */

/* ============ 安卓适配 ============ */
/* 1) 安卓/夸克等自带返回键页面里，浏览器会带一层灰色触摸高亮 */
* { -webkit-tap-highlight-color: transparent; }
/* 2) 去掉安卓的长按选中/放大镜，题目文字不该被选中打断 */
* { -webkit-touch-callout: none; }
/* 3) 按钮/可点元素去掉安卓默认的样式差，避免大小两套。
      注意【不要在这里写 border-radius: inherit】—— 父级（.chips/.modes）没设圆角，
      inherit 会取到 0，把 .chip 的 100px 胶囊、.opt 的 16px 圆角全抹平。
      圆角由各元素自己的规则负责，这里只关 appearance。 */
button, .btn, .opt, .chip, .mode, .fab, .tbi, .tb {
  -webkit-appearance: none; appearance: none;
}
/* 4) 所有可点元素最小 44×44（安卓无 hover，误触率靠尺寸） */
.btn { min-height: 46px; }
.opt { min-height: 52px; }
.chip { min-height: 40px; display: inline-flex; align-items: center; }
.mode { min-height: 76px; }
/* 5) 双指缩放：iOS 已禁，安卓这边统一禁（避免和 A± 按钮打架），
      真正的放大交给 A± 按钮，字号可控比双指乱拉更稳 */
body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 6) 列表惯性滚动 + 禁止整页橡皮筋（安卓特有的过度滚动） */
.app, .page { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
/* 7) 固定底栏在安卓键盘弹起时会被顶飞：安卓没有 visualViewport 的
      resize 语义，统一留足底部安全区 */
.tabbar, .qbar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* 8) 细边框在高分屏安卓上会被压到 0.5px 以下，用 box-shadow 补一道 */
@media (min-resolution: 2dppx) {
  .card, .rowline { border-bottom-color: rgba(15,23,42,.10); }
}
/* 9) 安卓横屏时页面太窄，容器别顶满 */
@media (max-width: 360px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .qbar .btn { padding: 11px 8px; }
  /* 窄屏时 .pcard 头像从 64 缩到 56，.fs-btn 从 36 缩到 32 */
  .pav { width: 56px; height: 56px; flex: 0 0 56px; font-size: 26px; }
  .fs-btn { width: 32px; height: 32px; flex: 0 0 32px; }
}

/* ============ 游戏闯关（H5）样式已迁出 ============
 * 原来这里是从 miniprogram 的 game.wxss / gameplay.wxss 自动抽出来的一整段深色样式
 * （.gpage/.gcard/.gbtn/.rps-*/.vs2-* 等 119 个类，其中约 60 条还挂在 body.g-dark 下）。
 * 现在游戏两页（题库选择 + 对局）整屏都走 MasterGo 浅橙稿，样式唯一来源是
 * assets/game.css（由 assets/game.src.css 生成，选择器统一带 .gv 作用域），
 * 这一段就彻底没有引用了 —— 留着它只会跟 game.css 抢同名类（.btn/.opt/.card…）。
 * 已删除，备份见 assets/app.css.bak-before-mg。
 * 只补回一条 RTL 镜像：题库/筛选胶囊在维语哈语下要倒过来排。 */
[dir="rtl"] .chips { flex-direction: row-reverse; }

/* ============ 我的页 · MasterGo 画板 1:0269 ============
   画板版式（裁图实测）：
   - 顶部居中标题「我的」T1 16/700
   - 头像卡：80×80 圆角头像 + 姓名 16/800 + 手机号 T3 + 橙胶囊「科目一备考中」+ 右箭头
   - 「语言切换 / تىل ئالماشتۇرۇش」三格分段：激活=橙实心白字 999px，未激活=浅灰底
   - 三格统计：橙 / 黑 / 绿（练习天数 / 做题总数 / 正确率）
   - 4 条 .tool-row：36×36 圆角彩色图标块 + 标题 + 右侧「有新课」红胶囊或箭头
   压缩包原 viewMine 的 .rowline / .feedcard / .sec-t / .kv 全部不再用。 */
.mpage { padding: 8px 16px 24px; }
.mtitle {
  font-size: calc(var(--fs,1)*1.0625rem); font-weight: 700; color: var(--t1);
  text-align: center; padding: 14px 0 12px;
}
/* 头像卡 */
.pcard {
  background: var(--card); border-radius: var(--r); padding: 18px 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--sh-lg);
  cursor: pointer; transition: .15s;
}
.pcard:active { transform: scale(.99); }
.pav {
  width: 64px; height: 64px; border-radius: 18px; object-fit: cover;
  background: var(--brand-l); flex: 0 0 64px;
  /* 没有真实头像就走 emoji 占位 */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
}
.pbody { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pname { font-size: calc(var(--fs,1)*1rem); font-weight: 800; color: var(--t1); line-height: 1.3; }
.pmobile { font-size: calc(var(--fs,1)*0.8125rem); color: var(--t3); line-height: 1.2; }
.ptag {
  align-self: flex-start; margin-top: 4px;
  background: var(--brand); color: #fff; font-size: calc(var(--fs,1)*0.6875rem);
  font-weight: 700; padding: 4px 11px; border-radius: 999px; line-height: 1.3;
}
.parw { color: var(--t3); font-size: 22px; line-height: 1; flex: 0 0 auto; }

/* 语言切换三格分段（画板上的 .seg） */
.seg {
  background: var(--card); border-radius: var(--r); padding: 5px;
  display: flex; gap: 5px; margin-top: 12px; box-shadow: var(--sh);
}
.seg-i {
  flex: 1 1 0; padding: 10px 0; text-align: center; border: 0;
  background: #f3f4f6; color: var(--t3); border-radius: 999px;
  font-size: calc(var(--fs,1)*0.8125rem); font-weight: 600; cursor: pointer;
  font-family: inherit; transition: .15s;
}
.seg-i:active { transform: scale(.97); }
.seg-i.on { background: var(--brand); color: #fff; font-weight: 800; }

/* 三格统计（橙 / 黑 / 绿） */
.statrow {
  background: var(--card); border-radius: var(--r); padding: 16px 8px;
  display: flex; margin-top: 12px; box-shadow: var(--sh);
}
.sr-i {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.sr-i + .sr-i::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 24px; background: var(--line);
}
.sr-i b { font-size: calc(var(--fs,1)*1.3125rem); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.sr-i span { font-size: calc(var(--fs,1)*0.6875rem); color: var(--t3); line-height: 1.3; }
.sr-i.s1 b { color: var(--brand); }
.sr-i.s2 b { color: var(--t1); }
.sr-i.s3 b { color: var(--ok); }

/* 4 条彩色图标列表行 */
.tool-list {
  background: var(--card); border-radius: var(--r); margin-top: 12px;
  padding: 4px 16px; box-shadow: var(--sh); overflow: hidden;
}
.tool-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: .15s;
}
.tool-row:last-child { border-bottom: 0; }
.tool-row:active { background: rgba(var(--brand-rgb), .04); }
.tr-ic {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}
.tr-ic.c1 { background: var(--brand-l); color: var(--brand); }
.tr-ic.c2 { background: var(--ok-l); color: var(--ok); }
.tr-ic.c3 { background: var(--warn-l); color: var(--warn); }
.tr-ic.c4 { background: var(--bad-l); color: var(--bad); }
.tr-t { flex: 1 1 0; font-size: calc(var(--fs,1)*0.9375rem); font-weight: 600; color: var(--t1); }
.tr-badge {
  background: var(--bad); color: #fff; font-size: calc(var(--fs,1)*0.6875rem);
  font-weight: 700; padding: 3px 9px; border-radius: 999px; line-height: 1.3;
}
.tr-arw { color: var(--t3); font-size: 20px; line-height: 1; }
[dir="rtl"] .tr-arw { transform: scaleX(-1); }

/* 设置页字号行 · 「小 − 中 ＋ 大」一行（画板 1:0746 版式） */
.fsrow {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
.fsrow .fs-lb { flex: 1 1 0; font-size: calc(var(--fs,1)*0.875rem); color: var(--t3); }
.fsrow .fs-lb:last-child { text-align: end; }
.fs-btn {
  width: 36px; height: 36px; border-radius: 11px; border: 0; cursor: pointer;
  background: #f3f4f6; color: var(--t1); font-size: 17px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; line-height: 1; transition: .15s; flex: 0 0 36px;
}
.fs-btn.fs-plus { background: var(--brand); color: #fff; }
.fs-btn:active { transform: scale(.92); }
.fs-btn.off { opacity: .35; pointer-events: none; }
.fs-cur {
  font-size: calc(var(--fs,1)*0.9375rem); font-weight: 800; color: var(--t1);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center;
}

/* 兑换码自绘弹窗（移动端不能用原生 prompt / alert，会被拦） */
.gvc-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: none; align-items: center; justify-content: center;
  z-index: 60; padding: 24px;
}
.gvc-mask.on { display: flex; }
.gvc {
  background: #fff; border-radius: 16px; padding: 20px;
  width: 100%; max-width: 320px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.gvc-t { font-size: calc(var(--fs,1)*1rem); font-weight: 800; color: var(--t1); margin-bottom: 12px; }
.gvc-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: calc(var(--fs,1)*1rem); text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 8px; font-family: inherit;
}
.gvc-input:focus { outline: none; border-color: var(--brand); }
.gvc-msg { font-size: calc(var(--fs,1)*0.75rem); color: var(--bad); min-height: 18px; margin-bottom: 12px; }
.gvc-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- 解析区（答题页 / 错题页） ---- */
.explain {
  margin: 12px 0 4px; padding: 12px 14px; background: #fff7f0;
  border: 1px solid #ffe3cc; border-left: 4px solid var(--brand);
  border-radius: 12px; font-size: calc(var(--fs,1)*0.8125rem); line-height: 1.6;
}
.explain.empty { background: #fafafa; border-color: var(--line); border-left-color: #d1d5db; }
.explain .ex-h {
  font-weight: 800; color: var(--brand); margin-bottom: 6px;
  font-size: calc(var(--fs,1)*0.8125rem);
}
.explain.empty .ex-h { color: var(--t2); }
.explain .ex-b { color: var(--t1); white-space: pre-wrap; word-break: break-word; }
.explain.empty .ex-b { color: var(--t3); }

/* ===== 首页（第三批改版 / 第四批恢复图一布局）=====
   结构：品牌行 → 大图广告位（整块可点跳 CPS）→ 优惠券横幅 → 题库统计条 → 模拟考试推荐卡。
   练题链路（模式卡 + 筛选）在备考页；「开始备考」大按钮是第三批临时形态，本批删除。 */
.home-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 14px; }
.home-brand .hb-tt { font-size: calc(var(--fs,1)*1.25rem); font-weight: 800; color: var(--t1); letter-spacing: .02em; }
/* .langfab 原是 hero 里的绝对定位浮标；在品牌行里改成静态行内元素 */
.home-brand .langfab { position: static; background: rgba(0,0,0,.05); border-color: var(--line); color: var(--t2); backdrop-filter: none; }

/* 首页公告跑马灯（第七批补充）：Banner 下方、优惠券上方，三语都留空则不渲染 */
.home-notice {
  margin: 0 12px 14px; height: 34px; border-radius: 10px; overflow: hidden;
  background: var(--brand-l); display: flex; align-items: center;
}
.hn-marquee {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: hnScroll 14s linear infinite; color: var(--brand);
  font-size: calc(var(--fs, 1) * 0.875rem); font-weight: 600; padding-left: 100%;
}
.hn-marquee span { padding-right: 48px; }
@keyframes hnScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .hn-marquee { animation: none; padding-left: 12px; } }

/* 大图 Banner 广告位：整块 <a>，新窗口跳 CPS 优惠券系统 */
.home-ad {
  position: relative; overflow: hidden; display: block; text-decoration: none;
  min-height: 216px; margin-bottom: 18px; padding: 18px;
  border-radius: var(--r);
  background: linear-gradient(119deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  box-shadow: var(--sh-brand); color: #fff;
  transition: transform .16s;
}
.home-ad .ha-bg {
  position: absolute; inset: 0;
  background-image: url(../pics/home-banner.jpg);
  background-size: cover; background-position: center 62%; opacity: .92;
}
.home-ad .ha-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--brand-rgb),.86) 0%, rgba(var(--brand-rgb),.22) 46%, rgba(0,0,0,0) 76%); }
.home-ad .ha-tag { position: absolute; top: 12px; inset-inline-start: 14px; z-index: 3;
  font-size: calc(var(--fs,1)*0.625rem); font-weight: 700; letter-spacing: .1em;
  background: rgba(0,0,0,.34); color: #fff; border-radius: 6px; padding: 2px 7px; }
.home-ad .ha-txt { position: absolute; z-index: 3; inset-inline-start: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 4px; }
.home-ad .ha-tt { font-size: calc(var(--fs,1)*1.3125rem); font-weight: 800; text-shadow: 0 1px 10px rgba(120,46,0,.3); }
.home-ad .ha-sub { font-size: calc(var(--fs,1)*0.75rem); font-weight: 500; color: rgba(255,255,255,.94); }
.home-ad .ha-go { position: absolute; z-index: 3; inset-inline-end: 16px; bottom: 18px;
  background: #fff; color: var(--brand); font-weight: 800;
  font-size: calc(var(--fs,1)*0.8125rem); border-radius: 999px; padding: 9px 17px;
  box-shadow: 0 4px 14px rgba(120,46,0,.26); }
.home-ad:active { transform: translateY(1px); }

/* 优惠券横幅（第四批恢复图一布局）：Banner 下面的细条，整块可点跳 CPS。
   文案与 Banner 同一口径用中文 —— 目标站是中文优惠券系统，不强翻。 */
.cps-strip {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding: 13px 16px;
  border-radius: var(--r-md); text-decoration: none;
  background: var(--brand-l); border: 1px solid rgba(var(--brand-rgb), .22);
  color: var(--brand); font-weight: 700; font-size: calc(var(--fs,1)*0.9375rem);
  transition: transform .16s;
}
.cps-strip:active { transform: translateY(1px); }
.cps-strip .cs-ic { font-size: calc(var(--fs,1)*1.125rem); flex: none; line-height: 1; }
.cps-strip .cs-t { flex: 1; min-width: 0; }
.cps-strip .cs-go { flex: none; font-weight: 800; font-size: calc(var(--fs,1)*0.8125rem); opacity: .92; }

/* ===== 首页「开始备考」按钮（第五批 1.6）=====
   位置：模拟考推荐卡下方。宽度 72% 居中 —— 第三批那种占满整行的大按钮
   把首页撑空、用户嫌突兀，这次按指令收窄，但保留品牌橙 + 图标 + 箭头，
   一眼能看到是主行动点。点击 = 点亮底栏「备考」tab。 */
.home-start { display: flex; justify-content: center; margin-top: 16px; }
.hs-btn {
  width: 72%; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r); cursor: pointer;
  background: linear-gradient(119deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), .28);
  color: #fff; font-family: var(--ff);
  font-size: calc(var(--fs,1)*0.9375rem); font-weight: 700; letter-spacing: .04em;
  transition: transform .16s, box-shadow .16s;
}
.hs-btn:active { transform: translateY(1px); box-shadow: 0 4px 14px rgba(var(--brand-rgb), .22); }
.hs-btn .hs-ic { width: 20px; height: 20px; display: flex; flex: none; }
.hs-btn .hs-ic svg { width: 20px; height: 20px; }
.hs-btn .hs-arw { font-size: calc(var(--fs,1)*1.0625rem); opacity: .92; }

/* ===== 老年模式（第三批）=====
   字号 ×1.5 由 store.js 的 applyFont 在 --fs 上乘出来；这里管其余五件事：
   内边距/点击区 ≥48px、图标 ×1.3、行高、文字加深、按钮更艳、去掉过渡动画。 */
body.elder-mode { --t1: #101010; --t2: #43484f; --t3: #5b6270; }
/* .mode 不在这条清单里：第四批起它是大卡，压缩高度反而会把大卡压回小格。
   第九批：可点区域由 48px 提到 56×56（指令 1.2），主按钮同步 ≥ 56。 */
body.elder-mode .btn, body.elder-mode .chip, body.elder-mode .tb,
body.elder-mode .opt, body.elder-mode .ec-btn, body.elder-mode .ha-go,
body.elder-mode .fs-btn, body.elder-mode .seg-i, body.elder-mode .iconbtn,
body.elder-mode .theme-sw { min-height: 56px; min-width: 56px; }
body.elder-mode .chip { padding: 14px 20px; }
body.elder-mode .card { padding: 20px 18px; }
body.elder-mode .rowline { padding-top: 16px; padding-bottom: 16px; }
/* 图标在现有基础上 ×1.3 */
body.elder-mode .mode .ic { width: 64px; height: 64px; }
body.elder-mode .mode .ic svg { width: 38px; height: 38px; }
body.elder-mode .tabbar .tb .ic svg { width: 38px; height: 38px; }
body.elder-mode .tr-ic { transform: scale(1.3); }
body.elder-mode .elder-card .ec-ic svg { width: 46px; height: 46px; }
/* 行高 1.8 */
body.elder-mode .mode .nm, body.elder-mode .tabbar .tb .lb, body.elder-mode .rowline .lb,
body.elder-mode .opt .v, body.elder-mode .bankbar, body.elder-mode .ec-sub,
body.elder-mode .elder-card .ec-t, body.elder-mode .elder-card .ec-d { line-height: 1.8; }
body.elder-mode .btn:not(.gray), body.elder-mode .ec-btn { filter: saturate(1.22); }
/* 关闭全部动效（加载转圈除外，否则像卡死）：页面位移 / 纸屑 / 金币 / 缩放 / 抖动 / 跑马灯 */
body.elder-mode .page.fade { animation: none !important; }
body.elder-mode *:not(.spin) { transition: none !important; animation: none !important; }
body.elder-mode .hn-marquee, body.elder-mode .hn-marquee span { overflow: visible; transform: none !important; }

/* 敬老版底栏更高（图标 38px + 字号 1.7），底部留白同步加大，
   否则最后一张卡会压在固定底栏下面（截图里一眼可见）。 */
body.elder-mode .page-tb { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }

/* ===== 敬老版首页：2 列 4 张大卡（指令 1.3）===== */
.elder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 14px 16px; }
.elder-card { position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; min-height: 132px; padding: 20px 12px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh); cursor: pointer; color: var(--t1); }
.elder-card .ec-ic { width: 56px; height: 56px; display: flex; align-items: center;
  justify-content: center; border-radius: 18px; background: var(--brand-l); color: var(--brand); }
.elder-card .ec-ic svg { width: 34px; height: 34px; }
.elder-card .ec-t { font-size: calc(var(--fs,1)*1.0625rem); font-weight: 800; text-align: center; }
.elder-card .ec-d { font-size: calc(var(--fs,1)*0.75rem); color: var(--t2); font-weight: 500; text-align: center; }
.elder-card:active { background: var(--brand-l); border-color: var(--brand); }
/* 敬老版公告：静态一行，不滚动 */
.home-notice.static .hn-marquee { overflow: visible; }
.home-notice.static .hn-marquee span { animation: none !important; transform: none !important; }

/* ===== 主题颜色块（设置页，第九批）===== */
.theme-row { display: flex; gap: 16px; padding: 4px 2px 2px; }
.theme-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--ff); }
.theme-sw { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .12s; }
.theme-sw svg { width: 20px; height: 20px; }
.theme-opt.on .theme-sw { border-color: var(--t1); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--t1); }
.theme-opt:active .theme-sw { transform: scale(.92); }
.theme-opt .theme-nm { font-size: calc(var(--fs,1)*0.75rem); color: var(--t2); font-weight: 600; }
.theme-opt.on .theme-nm { color: var(--t1); font-weight: 800; }
.theme-sw.t-orange { background: #e85d04; }
.theme-sw.t-blue { background: #1e6fd9; }
.theme-sw.t-green { background: #0f6b4f; }

/* 设置页：敬老版下字号按钮置灰不可点；说明小字 */
.seg.dis { opacity: .55; }
.seg.dis .seg-i { pointer-events: none; }
.hintline { font-size: calc(var(--fs,1)*0.75rem); color: var(--t3); margin-top: 6px; line-height: 1.6; }

/* ===== 商业化第二批遗留：模式卡锁标 / 激活状态条（仍在用）===== */
/* 模式卡锁标 + 未激活置灰 */
.mode.lock { opacity: .55; }
.mode .lock-b { position: absolute; top: 10px; inset-inline-end: 12px; font-size: 14px; }
.mode { position: relative; }
.rowline.lock { opacity: .6; }
.lock-b { font-size: 12px; }

/* 激活状态条（我的页顶部） */
.act-line { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px;
  padding: 10px 14px; border-radius: 12px; font-size: 13.5px; }
.act-line .act-dot { width: 8px; height: 8px; border-radius: 50%; }
.act-line.on { background: #e7f8ee; color: #16a34a; }
.act-line.on .act-dot { background: #16a34a; }
.act-line.off { background: var(--brand-l); color: var(--brand); border: 1px dashed rgba(var(--brand-rgb), .45); }
.act-line.off .act-dot { background: var(--brand); }
.ver-line { margin-top: 18px; text-align: center; font-size: calc(var(--fs,1)*0.75rem); color: var(--t3); letter-spacing: .3px; }