:root {
  --brand: #2F7BFF;
  --brand-dark: #1F63E0;
  --brand-soft: #EAF2FF;
  --blue: #2F7BFF;
  --blue-soft: #EDF4FF;
  --ok: #12A15C;
  --ok-soft: #E9F8F1;
  --bad: #DC4A4A;
  --bad-soft: #FDEDED;
  --warn: #F5A524;
  --bg: #F5F9FF;
  --card: #FFFFFF;
  --text: #16213C;
  --muted: #6B7A93;
  --faint: #A0AABB;
  --line: #E9EFF8;
  --line-strong: #DCE5F2;

  /* 光影：近层 + 远层 + 顶部高光，禁止单层硬阴影 */
  --shadow: 0 1px 2px rgba(20, 23, 31, .04), 0 8px 24px rgba(20, 23, 31, .05);
  --shadow-lg: 0 2px 4px rgba(20, 23, 31, .04), 0 24px 60px rgba(20, 23, 31, .10);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* 圆角只留三档，且同心嵌套 */
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* 自适应尺寸：随视口宽度平滑变化，兼顾折叠屏外屏/内屏 */
  --app-max: 560px;
  --pad: 16px;
  --gap: 12px;
  --r-card: var(--r-lg);
  --fs: 15px;
  --sec-fs: 17px;          /* 首页所有小标题（题库练习/每日一练/刷题进度）统一字号 */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; touch-action: manipulation; }
input, textarea, select { font-family: inherit; font-size: 16px; }

/* 原卷的划线/加点标记：下划线离字母远一点，避免和 i、j 的点糊在一起 */
u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

#app {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  body { background: #E3ECFA; }
  #app { box-shadow: var(--shadow-lg); }
}


/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: var(--sat) max(var(--pad), var(--sar)) 0 max(var(--pad), var(--sal));
  background: rgba(244, 249, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
/* 二级页面的顶栏用实底，否则内容滚到标题下面会透出来，看着像两个东西叠在一起 */
.topbar.solid { border-bottom-color: var(--line); background: #fff; }
.topbar h1 { font-size: 17px; font-weight: 650; margin: 0; flex: 1; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--text);
  transition: background .15s; flex: 0 0 34px; position: relative;
}
/* 视觉 34px，热区扩到 44px 满足移动端点击规范 */
.icon-btn::after { content: ''; position: absolute; inset: -5px; border-radius: var(--r-md); }
.icon-btn:active { background: rgba(0,0,0,.05); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- 通用 ---------- */
.scroll { flex: 1; padding: 0 max(var(--pad), var(--sar)) calc(104px + var(--sab)) max(var(--pad), var(--sal)); }
.card {
  background: var(--card); border-radius: var(--r-card); padding: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--hl);
  margin-bottom: 14px;
}
/* 所有浮起面统一：1px 边框定形 + 双层投影造纵深，不靠重阴影 */
.mini-card, .daily-card, .know-card, .wrong-card, .review-item,
.cat-card, .qa, .mode-item {
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--hl);
}
.sec-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 600; letter-spacing: .2px; color: var(--muted); margin: 26px 4px 10px;
}
.sec-title .more { font-size: 12.5px; color: var(--faint); font-weight: 400; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
/* 页脚备案：主体名称 + ICP 备案号，居中两行以内；没配备案号时整个节点不渲染
   字号和颜色比普通小字再实一点：备案号有「清晰可见」的要求，不能淡到看不清 */
.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 10px; margin: 18px 0 2px;
  font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--brand); text-decoration: underline; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 20px; border-radius: var(--r-md); font-size: 15px; font-weight: 600;
  background: var(--brand); color: #fff; width: 100%;
  transition: transform .12s, filter .15s;
}
.btn:active { transform: scale(.98); filter: brightness(.95); }
.btn.ghost { background: var(--brand-soft); color: var(--brand); }
.btn.plain { background: #F3F4F7; color: var(--text); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.sm { height: 38px; font-size: 13.5px; border-radius: var(--r-md); padding: 0 14px; width: auto; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .ico { font-size: 40px; margin-bottom: 10px; opacity: .5; }

/* ---------- 底部导航（固定贴底 + 毛玻璃） ---------- */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  bottom: 0;
  width: 100%;
  max-width: var(--app-max);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  padding: 5px max(0px, var(--sar)) calc(5px + var(--sab)) max(0px, var(--sal));
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(253, 254, 255, .96) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(224, 233, 246, .9);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .8),
    0 -6px 22px rgba(30, 80, 160, .05);
}
/* 不支持毛玻璃的环境（老 WebView）退回接近实心的底色，保证文字看得清 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar { background: rgba(255, 255, 255, .97); }
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 2.5px; padding: 5px 2px 4px; border-radius: 12px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
  color: #8E99AC; -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}
.tab-ic { display: grid; place-items: center; width: 25px; height: 25px; transition: transform .22s cubic-bezier(.3,.9,.3,1); }
.tab svg { width: 23px; height: 23px; display: block; }
.tab-tx { transform: translateY(0); transition: transform .18s ease; }
/* 选中：图标整枚变品牌色 + 底下透出一层淡蓝药丸 */
.tab.on { color: var(--brand); }
.tab.on::before {
  content: ''; position: absolute; inset: 0 8px 1px; border-radius: 12px; z-index: -1;
  background: linear-gradient(180deg, rgba(47, 123, 255, .10), rgba(47, 123, 255, .02));
}
.tab.on .tab-ic { transform: translateY(-1.5px) scale(1.06); }
.tab.on .tab-tx { font-weight: 700; }
.tab:active .tab-ic { transform: scale(.94); }

/* ---------- 登录 ---------- */
/* 登录页内容比屏幕矮得多，别贴顶：主容器做成一列 flex，在表单块上下各放一个
   「会伸缩的空白」（::before / ::after），把剩余空间按 1 : 1.5 分掉 —— 上面 40%、
   下面 60%，视觉上就是居中偏上一点。
   用 grow 而不是 auto 外边距的好处：屏幕一矮、剩余空间归零，两块空白自动收缩到 0、
   内容退回顶部正常滚动，不会把顶部顶出可视区。
   .scroll 原本给列表页留的 104px 底边距（给 tab 栏让位）登录页没有 tab，收窄。 */
.login-scroll {
  display: flex; flex-direction: column;
  padding-bottom: calc(24px + var(--sab));
}
.login-scroll::before,
.login-scroll::after { content: ''; flex: 1 1 0; min-height: 0; }
.login-scroll::before { flex-grow: 1; }
.login-scroll::after { flex-grow: 1.5; }
.auth-wrap { padding: 40px 24px; }
.auth-logo {
  width: 96px; height: 96px; border-radius: 27px; margin: 0 auto 20px;
  display: block; object-fit: cover;
  box-shadow: 0 12px 28px rgba(14, 113, 244, .26);
}
.auth-wrap h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.4px; }
.auth-wrap p.sub { color: var(--muted); margin: 0 0 28px; font-size: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.field input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,98,246,.12); }
.switch-line { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.switch-line b { color: var(--brand); font-weight: 600; cursor: pointer; }
.err-tip { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* 手机号 + 验证码：输入框右侧挂一个「获取验证码」 */
.code-row { display: flex; gap: 10px; align-items: stretch; }
.code-row input { flex: 1; min-width: 0; letter-spacing: 2px; }
.code-btn {
  flex: 0 0 auto; padding: 0 16px; height: 48px; border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; transition: opacity .14s;
}
.code-btn:disabled { opacity: .55; }
.code-btn:active { opacity: .8; }
/* 被踢下线之类的提示条，比错误红柔和 */
.login-tip {
  background: #FFF6E8; border: 1px solid rgba(224, 138, 26, .28); color: #A76A10;
  font-size: 12.5px; line-height: 1.5; border-radius: var(--r-md);
  padding: 9px 12px; margin: -12px 0 18px;
}
.auth-agree {
  text-align: center; color: var(--faint); font-size: 11.5px; line-height: 1.7;
  margin-top: 22px;
}

/* ---------- 首页 ---------- */
.hero {
  background: linear-gradient(135deg, #3B62F6 0%, #5B7CFF 55%, #7C9BFF 100%);
  border-radius: var(--r-lg); padding: 20px; color: #fff; margin-top: 6px;
  box-shadow: 0 10px 30px rgba(59, 98, 246, .28);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; right: -40px; top: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.hero .hi { font-size: 13px; opacity: .86; }
.hero .name { font-size: clamp(19px, 5.2vw, 25px); font-weight: 700; margin: 3px 0 16px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; z-index: 1; }
.hero-stat b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.hero-stat span { font-size: 11.5px; opacity: .82; }

.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cat-card {
  background: var(--card); border-radius: var(--r-lg); padding: 15px 14px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .12s;
}
.cat-card:active { transform: scale(.975); }
.cat-card .badge {
  width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 10px;
}
.cat-card h4 { margin: 0 0 3px; font-size: 15px; font-weight: 650; }
.cat-card p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card .cnt { position: absolute; right: 14px; top: 16px; font-size: 11px; color: var(--faint); }

.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qa {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.qa .em { font-size: 20px; }
.qa b { display: block; font-size: 14px; font-weight: 600; }
.qa span { font-size: 11.5px; color: var(--muted); }

/* ---------- 练习设置 ---------- */
.mode-list { display: grid; gap: 10px; }
.mode-item {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff;
  transition: all .15s;
}
.mode-item.on { border-color: var(--brand); background: var(--brand-soft); }
.mode-item > svg {
  width: 20px; height: 20px; flex: 0 0 20px; color: var(--brand);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mode-item .em { font-size: 20px; }
.mode-item b { display: block; font-size: 14.5px; font-weight: 600; }
.mode-item span { font-size: 12px; color: var(--muted); }
.mode-item .tick { margin-left: auto; color: var(--brand); opacity: 0; font-weight: 700; }
.mode-item.on .tick { opacity: 1; }

/* 弹窗里的模式选择：比整页时更紧凑，小屏也不用滚 */
.sheet .mode-item { padding: 12px 13px; }
.sheet .mode-item b { font-size: 14px; }
.sheet .mode-item span { font-size: 11.5px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 15px; border-radius: var(--r-md); font-size: 13.5px; min-height: 38px;
  display: inline-flex; align-items: center;
  background: #F3F4F7; color: var(--muted); font-weight: 500;
}
.chip.on { background: var(--brand); color: #fff; }

/* ---------- 答题 ---------- */
.quiz-top { padding: 8px max(var(--pad), var(--sar)) 0 max(var(--pad), var(--sal)); }
.progress-bar { height: 6px; background: #E9EDF5; border-radius: 99px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #7C9BFF); border-radius: 99px; transition: width .3s; }
.quiz-meta { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.pill { padding: 3px 9px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 600; }
.pill.warn { background: #FFF4E5; color: #B26A00; }

.qstem { font-size: clamp(15.5px, 4.2vw, 18px); font-weight: 550; line-height: 1.65; margin: 18px 0 16px; white-space: pre-wrap; word-break: break-word; }

/* 根号：√ 用 SVG 画勾，顶线用 border-top，宽度随被开方内容自适应（√13 比 √3 长） */
.rt { display: inline-flex; align-items: stretch; vertical-align: baseline; }
.rt > svg.rt-g {
  flex: 0 0 .62em; width: .62em; height: 1.06em; align-self: flex-start;
  display: block; overflow: visible;
}
.rt > b {
  border-top: .085em solid currentColor; padding: .01em .12em 0 .02em;
  font-weight: inherit; line-height: 1.28; margin-left: -.05em;
}

.opt {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-md); background: #fff;
  border: 1.5px solid var(--line); margin-bottom: 10px;
  transition: all .15s; font-size: 14.5px; line-height: 1.55;
}
.opt:active { transform: scale(.99); }
.opt .k {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: var(--r-sm);
  background: #F3F4F7; color: var(--muted); font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
.opt .v { flex: 1; white-space: pre-wrap; }
.opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.opt.sel .k { background: var(--brand); color: #fff; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.right .k { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .k { background: var(--bad); color: #fff; }
.opt.disabled { opacity: .85; }

.analysis {
  background: #fff; border-radius: var(--r-md); padding: 15px; margin-top: 4px;
  box-shadow: var(--shadow); border-left: 3px solid var(--brand);
  animation: fadeUp .25s ease;
}
.analysis h5 { margin: 0 0 8px; font-size: 13px; color: var(--brand); font-weight: 650; letter-spacing: .3px; }
.analysis p { margin: 0; font-size: 14px; line-height: 1.7; color: #344054; white-space: pre-wrap; }
.analysis .verdict { font-size: 13.5px; font-weight: 650; margin-bottom: 8px; }
.analysis .verdict.ok { color: var(--ok); }
.analysis .verdict.no { color: var(--bad); }

/* ---------- 材料题浮层（阅读 / 完形 / 材料题） ---------- */
.pdock {
  display: none;
  position: fixed; top: 54px; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  z-index: 25; flex-direction: column;
  background: #fff; border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 10px 26px rgba(20, 23, 31, .09);
}
#app.passage-on .pdock { display: flex; }
#app.passage-on #main { padding-top: calc(var(--pdock-h, 250px) + 12px); }

.pdock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(var(--pad), var(--sar)) 9px max(var(--pad), var(--sal));
  flex: 0 0 auto;
}
.pdock-hd-l { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; }
/* 篇名较长（文言文常是「篇名（作者《出处》）」）时最多两行，右侧小题计数不被压缩 */
.pdock-hd-l b {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 650;
  color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pdock-hd-l span {
  flex: 0 0 auto; padding-top: 1px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.pdock-btn {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 600; border: none;
}
.pdock-btn:active { background: #DCE9FF; }

.pdock-body {
  flex: 0 0 auto; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
  padding: 12px max(var(--pad), var(--sar)) 14px max(var(--pad), var(--sal));
  height: var(--pdock-body, 30vh);
}
.pdock[data-size="mini"] .pdock-body { display: none; }
.pdock[data-size="half"] .pdock-body { height: 30vh; }
.pdock[data-size="full"] .pdock-body { height: 62vh; }

.pdock-text { font-size: 14px; line-height: 1.85; color: #2A3040; white-space: pre-wrap; word-break: break-word; }
.pdock-text .pblank {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 0 4px; margin: 0 1px; border-radius: 5px;
  color: var(--brand); background: var(--brand-soft); font-weight: 600;
  transition: background .15s, color .15s;
}
.pdock-text .pblank.on { color: #fff; background: var(--brand); }

.pdock-nav {
  flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap;
  padding: 9px max(var(--pad), var(--sar)) 10px max(var(--pad), var(--sal));
  border-top: 1px solid var(--line); background: #FCFCFE;
}
.pdock-nav button {
  width: 30px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: #fff; color: var(--muted); font-size: 12px; font-weight: 600;
}
.pdock-nav button.done { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.pdock-nav button.cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.pdock-nav .pnav-tip { font-size: 11.5px; color: var(--faint); align-self: center; margin-left: 2px; }

/* 错题本 / 收藏 / 结果页里的折叠材料 */
.psg-fold { margin: 8px 0 4px; }
.psg-fold summary {
  font-size: 12px; color: var(--brand); font-weight: 600;
  cursor: pointer; list-style: none; padding: 5px 0;
  display: flex; align-items: center; gap: 5px;
}
.psg-fold summary::-webkit-details-marker { display: none; }
/* 跟「查看答案解析」同一个三角，别再拿 ▸ 字形凑数 */
.psg-fold summary::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .18s;
}
.psg-fold[open] summary::before { transform: rotate(90deg); }
.psg-fold-body {
  max-height: 220px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border-radius: var(--r-md); padding: 10px 12px;
  font-size: 13px; line-height: 1.7; color: #344054;
}

.quiz-footer {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  padding: 12px max(var(--pad), var(--sar)) calc(12px + var(--sab)) max(var(--pad), var(--sal));
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); display: flex; gap: 10px; z-index: 40;
}
.quiz-footer .btn { flex: 1; white-space: nowrap; }
.quiz-footer .btn.plain { flex: 0 0 96px; }
/* 答题卡：三个字必须一行放得下，别再被挤成两行 */
.quiz-footer .btn.sheet-btn { flex: 0 0 96px; padding: 0 8px; font-size: 14.5px; }

/* 答题卡 */
.sheet-mask {
  position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 60;
  display: none; align-items: flex-end;
}
.sheet-mask.show { display: flex; }

/* 通用确认对话框：居中、窄卡片，取消在左确定在右 */
.dlg-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(16,24,40,.45);
  display: none; align-items: center; justify-content: center;
  padding: 0 max(28px, var(--sar)) 0 max(28px, var(--sal));
  animation: fadeIn .16s ease;
}
.dlg-mask.show { display: flex; }
.dlg {
  width: 100%; max-width: 320px; background: #fff; border-radius: 18px;
  padding: 22px 20px 18px; box-shadow: var(--shadow-lg);
  animation: dlgIn .2s cubic-bezier(.2,.8,.3,1);
}
.dlg h4 {
  margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.4;
  letter-spacing: -.2px; color: var(--text); text-align: center;
}
.dlg .dlg-desc {
  margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted);
  text-align: center; word-break: break-word;
}
.dlg .dlg-acts { display: flex; gap: 10px; margin-top: 20px; }
.dlg .dlg-acts .btn { flex: 1; height: 44px; font-size: 15px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg-mask, .dlg { animation: none; }
}
.sheet {
  width: 100%; max-width: var(--app-max); margin: 0 auto; background: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 20px max(18px, var(--sar)) calc(20px + var(--sab)) max(18px, var(--sal));
  max-height: 72vh; max-height: 72dvh; overflow-y: auto;
}
/* 入场动画挂在 .enter 上，由 showSheet() 只在「关 → 开」时加一次。
   别直接写在 .sheet 上：弹层内部换菜单时动画会被重播，
   整块面板闪成半透明再滑上来，看着像闪屏。 */
.sheet.enter { animation: slideUp .25s ease; }
/* 读题库时的忙碌态：只把列表压暗，不清空，避免面板塌一下再撑开 */
.sheet.busy .pk-list { opacity: .45; transition: opacity .12s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sheet.enter { animation: none; } }
.sheet h4 { margin: 0 0 4px; font-size: 16px; }
.sheet .hint { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.sheet-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 18px; }
.sheet-grid button {
  aspect-ratio: 1; border-radius: var(--r-sm); background: #F3F4F7; color: var(--muted);
  font-size: 13.5px; font-weight: 600;
}
.sheet-grid button.done { background: var(--brand); color: #fff; }
.sheet-grid button.cur { outline: 2px solid var(--brand); outline-offset: 1px; color: var(--brand); background: #fff; }

/* ---------- 结果页 ---------- */
.score-ring { display: grid; place-items: center; margin: 18px 0 6px; }
.score-ring .num { font-size: clamp(38px, 12vw, 60px); font-weight: 750; letter-spacing: -2px; line-height: 1; }
.score-ring .lbl { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; margin-top: 18px; }
.result-stats div b { display: block; font-size: 18px; font-weight: 680; }
.result-stats div span { font-size: 11.5px; color: var(--muted); }

.review-item {
  background: #fff; border-radius: var(--r-lg); padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.review-item .head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.tag { padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 11px; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.no { background: var(--bad-soft); color: var(--bad); }
.review-item .s { font-size: 14.5px; line-height: 1.6; margin-bottom: 10px; white-space: pre-wrap; }
.review-item .ans-line { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.review-item .ans-line b { color: var(--text); }
.review-item .an { font-size: 13.5px; color: var(--muted); background: #F8F9FC; border-radius: var(--r-md); padding: 10px 12px; line-height: 1.65; white-space: pre-wrap; }

/* 逐题解析 · 多空填空：一空一块，上面正确答案、下面你的答案 */
.fill-ans { margin: 2px 0 10px; display: grid; gap: 10px; }
.fa-row { display: flex; gap: 9px; align-items: flex-start; }
.fa-no {
  flex: 0 0 auto; margin-top: 2px;
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .2px;
  color: var(--brand); background: var(--brand-soft);
  border-radius: 999px; padding: 4px 7px;
}
.fa-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fa-line { font-size: 13.5px; line-height: 1.5; color: var(--text); word-break: break-word; }
.fa-line .fa-k { display: inline-block; min-width: 58px; font-size: 11.5px; color: var(--muted); }
.fa-line b { font-weight: 650; }
.fa-line .fa-std { color: #0E8A4E; }
.fa-line .fa-you { color: #7A8190; }
.fa-line .fa-you.good { color: var(--ok); }
.fa-line .fa-you.bad { color: var(--bad); }
.fa-mk { font-size: 12px; font-weight: 800; margin-left: 2px; }
.fa-mk.ok { color: var(--ok); }
.fa-mk.bad { color: var(--bad); }

/* ---------- 列表 ---------- */
.list-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: none; }
.list-item .ic {
  width: 38px; height: 38px; border-radius: var(--r-md); background: var(--brand-soft);
  display: grid; place-items: center; font-size: 17px; flex: 0 0 38px;
}
.list-item .ic img { display: block; width: 26px; height: 26px; object-fit: contain; }
.list-item .body { flex: 1; min-width: 0; }
.list-item .body b { display: block; font-size: 14.5px; font-weight: 600; }
.list-item .body span { font-size: 12px; color: var(--muted); }
.list-item .right { font-size: 13px; color: var(--muted); text-align: right; }
/* 中途退出留下的记录：标一下「未完成」，避免和交卷的混淆 */
.list-item .body b .rec-un {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: #FFF6E6; color: #B4740E;
  font-size: 10px; font-weight: 700; font-style: normal; vertical-align: 1px;
}

.rank-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-no {
  width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; background: #F3F4F7; color: var(--muted); flex: 0 0 26px;
}
.rank-no.top1 { background: #FFF1CC; color: #B27B00; }
.rank-no.top2 { background: #EDF0F5; color: var(--muted); }
.rank-no.top3 { background: #FDE8DC; color: #B45309; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-size: 13px; font-weight: 700;
  flex: 0 0 34px; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 错题卡 */
.wrong-card { background: #fff; border-radius: var(--r-lg); padding: 15px; margin-bottom: 12px; box-shadow: var(--shadow); }
.wrong-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 11.5px; color: var(--muted); }
.wrong-card .s { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; margin-bottom: 10px; }
.wrong-card .acts { display: flex; gap: 8px; margin-top: 10px; }

/* 错题本 / 收藏：正确答案块，放在题干下面、解析折叠之前
   答案再长也只是往下长，不会把左上角的题型挤变形 */
.ans-key {
  margin: 10px 0 2px; padding: 10px 12px;
  border-radius: var(--r-md);
  background: #F2FBF6; border: 1px solid rgba(18, 161, 92, .16);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ans-key .ak-k {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; color: #12915A;
}
.ans-key .ak-v {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.5;
  color: #0B6B3D; word-break: break-word;
}
/* 多空填空：标签独占一行，下面按空一行一条 */
.ans-key.multi { display: block; }
.ans-key.multi .ak-k { display: block; }
.ans-key .ak-list { margin-top: 6px; display: grid; gap: 4px; }
.ans-key .ak-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: #0B6B3D; }
.ans-key .ak-item i {
  flex: 0 0 auto; margin-top: 1px; font-style: normal;
  font-size: 10px; font-weight: 700; color: #12915A;
  background: rgba(18, 161, 92, .10); border-radius: 999px; padding: 3px 6px;
}
.ans-key .ak-item span { flex: 1; min-width: 0; word-break: break-word; }
/* 「我的答案」：错题本里跟正确答案对照，红色一眼看出错在哪 */
.ans-key .ak-your {
  flex: 1 1 100%;
  font-size: 12px; font-weight: 600; line-height: 1.5; color: #D0483E;
  word-break: break-word;
}
.ans-key .ak-your.dim { color: #9AA6B8; font-weight: 500; }
.ans-key .ak-item { flex-wrap: wrap; }
.ans-key .ak-item .ak-your.inline {
  flex: 1 1 100%; margin: 3px 0 0; font-style: normal;
  font-size: 12px; font-weight: 600; line-height: 1.5; color: #D0483E;
  word-break: break-word;
}

/* 答案 + 解析：默认都收起，点一个按钮一起展开。
   一进列表就把答案摊开等于替孩子把题做完了，先让他自己回忆一遍。 */
.ans-folds { margin-top: 12px; }
.af-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--brand);
  background: var(--brand-soft); border-radius: var(--r-md);
  padding: 9px 13px; transition: background .15s;
}
/* 三角用 border 画，跟题目材料折叠同一个手势；展开时转 90° */
.af-btn::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .18s;
}
.af-btn.on { background: #DCE8FF; }
.af-btn.on::before { transform: rotate(90deg); }
.af-panel { display: none; margin-top: 9px; }
.af-panel.open { display: block; animation: fadeUp .2s ease; }
.af-panel .ans-key { margin: 0; }

/* 解析块：跟「正确答案」同一套骨架，只把绿换成蓝 */
.ans-ana {
  margin-top: 10px; padding: 10px 12px;
  border-radius: var(--r-md);
  background: #F4F8FF; border: 1px solid rgba(47, 123, 255, .16);
}
.ans-ana .ana-k {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; color: var(--brand-dark);
}
.ans-ana .an {
  margin-top: 7px; font-size: 13.5px; line-height: 1.75; color: #344054;
  white-space: pre-wrap; word-break: break-word;
}

/* 题目配图（SVG：正方体、三棱锥、频率直方图…） */
.qimg {
  display: block; max-width: 100%; height: auto;
  margin: 10px auto 6px;
  background: transparent;
}

/* 错题本 / 收藏卡片里的选项列表 */
.opt-list { margin: 0 0 4px; }
.opt-list > div { display: flex; gap: 8px; padding: 3px 0; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.opt-list > div > i {
  flex: 0 0 18px; font-style: normal; font-weight: 700; font-size: 12.5px;
  color: var(--brand); line-height: 1.7;
}
.opt-list > div > span { flex: 1; min-width: 0; word-break: break-word; }

/* 逐题解析里的选项：正确项标绿、选错项标红，复习时不用回头猜字母 */
.opt-list.review { margin: 2px 0 6px; }
.opt-list.review > div { padding: 6px 9px; border-radius: var(--r-sm); transition: none; }
.opt-list.review > div.ok { background: var(--ok-soft); }
.opt-list.review > div.ok > i { color: var(--ok); }
.opt-list.review > div.no { background: var(--bad-soft); }
.opt-list.review > div.no > i { color: var(--bad); }
.opt-list .om { flex: 0 0 auto; font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1.7; margin-left: 2px; }
.opt-list .om.ok { color: var(--ok); }
.opt-list .om.no { color: var(--bad); }

.progress-line { height: 8px; background: #F3F4F7; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.progress-line i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

#toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(10px);
  background: rgba(16,24,40,.9); color: #fff; font-size: 13.5px; padding: 10px 18px;
  border-radius: var(--r-sm); z-index: 99; opacity: 0; pointer-events: none; transition: all .22s;
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.view { animation: fadeUp .2s ease; }
/* 顶栏和第一张卡片之间统一留 14px 呼吸位，别让内容顶格贴在标题下面 */
.scroll > .view { padding-top: 14px; }

/* ---------- 首页（参考商业化题库形态） ---------- */
/* 首页顶栏：标题 + 省份合成一根吸顶栏
   毛玻璃是为了让下面的卡片滚过去时糊掉，而不是和文字叠在一起 */
.topbar.home-top {
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding-bottom: 0;
  min-height: 54px;
}
/* 标题和省份合成一行：省份退到左端做成静音小字，标题仍在正中 */
.topbar.home-top .ht-row {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; position: relative;
}

/* 省份（跟着顶栏一起吸顶）——具体样式见下方 .home-region，此处不留重复声明 */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.duo-card {
  border-radius: var(--r-lg); padding: 15px; color: var(--text);
  position: relative; overflow: hidden; min-height: 130px;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--hl);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.duo-card:active { transform: scale(.975); }
.duo-card .dc-ico {
  width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center;
  margin-bottom: 12px; flex: 0 0 34px;
}
.duo-card .dc-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.duo-card.purple {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 10px 28px rgba(47, 123, 255, .26), var(--hl);
}
.duo-card.purple h3 { color: #fff; }
.duo-card.purple p { color: rgba(255, 255, 255, .8); }
/* 信息条文字颜色由 .duo-card .foot 统一控制（紫/蓝两卡必须一致），此处不再单独覆盖 */
.duo-card.purple .dc-ico { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }

/* 两张主入口卡保持完全一致的尺寸：只靠 .duo-card 统一控制，
   这里不再单独覆盖 blue 的 padding / min-height（曾导致两卡高度不一致） */
.duo { align-items: stretch; }
.duo-card h3 { margin: 0 0 3px; font-size: 16.5px; font-weight: 650; letter-spacing: -.2px; color: var(--text); }
.duo-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.duo-card .foot { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--faint); font-weight: 500; }

.mini-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--hl); overflow: hidden;
}
.mini-card {
  background: transparent; border: none; box-shadow: none; border-radius: 0;
  padding: 15px 16px; display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: background .15s;
}
.mini-card:active { background: #FAFAFB; }
.mini-card + .mini-card { border-left: 1px solid var(--line); }
.mini-card .em { font-size: 16px; line-height: 1; }
.mini-card svg {
  width: 17px; height: 17px; flex: 0 0 17px; stroke: var(--brand); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 20px; }
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.icon-cell:active { opacity: .7; }
.icon-cell .cir {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  font-size: 20px;
  background: var(--brand-soft); color: var(--brand);
}
.icon-cell .cir svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-cell span { font-size: 11.5px; color: var(--muted); font-weight: 500; }

.daily-card {
  background: #fff; border-radius: var(--r-lg); padding: 16px; margin-bottom: 18px;
  box-shadow: var(--shadow); position: relative;
}
.daily-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.daily-head h3 {
  margin: 0; font-size: clamp(17px, 4.6vw, 19px); font-weight: 650; letter-spacing: -.3px;
  color: var(--text);
}
.daily-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; margin-bottom: 16px; gap: 10px; }
.daily-stats b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.daily-stats b i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; letter-spacing: 0; }
.daily-stats span { font-size: 12px; color: var(--muted); }
.daily-acts { display: flex; gap: 10px; }
.daily-acts .btn { height: 44px; }

.know-card { background: #fff; border-radius: var(--r-lg); padding: 18px 16px; box-shadow: var(--shadow); margin-bottom: 18px; }
.know-top { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ring {
  width: 96px; height: 96px; border-radius: 50%; flex: 0 0 96px;
  display: grid; place-items: center; position: relative;
}
.ring .inner {
  width: 76px; height: 76px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; text-align: center;
}
.ring .inner b { font-size: 17px; font-weight: 750; letter-spacing: -.5px; }
.ring .inner i { display: block; font-size: 10px; color: var(--muted); font-style: normal; }
.know-nums { flex: 1; }
.know-nums div { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.know-nums div b { color: var(--text); font-weight: 650; }

.subj-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; }
.subj-tabs button {
  flex: 0 0 auto; padding: 7px 14px; border-radius: var(--r-sm);
  background: #F4F5FA; color: var(--muted); font-size: 13px; font-weight: 600;
}
.subj-tabs button.on { background: var(--brand-soft); color: var(--brand); }

.know-sub {
  background: #FAFAFE; border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 14px;
}
.know-sub .nm { font-size: 14px; font-weight: 650; margin-bottom: 6px; }
.know-sub .ln { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }


.admin-wrap { max-width: 900px; margin: 0 auto; padding: 24px; }
.admin-card { background: #fff; border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 12px; margin-bottom: 16px; }
.stat-box { background: #fff; border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.stat-box b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.stat-box span { font-size: 12.5px; color: var(--muted); }
table.qt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.qt th, table.qt td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.qt th { color: var(--muted); font-weight: 600; font-size: 12px; }
.admin-wrap textarea, .admin-wrap input, .admin-wrap select {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; outline: none;
}
.admin-wrap textarea { min-height: 130px; resize: vertical; font-family: ui-monospace, monospace; font-size: 12.5px; }
.admin-wrap label { display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 5px; }
.admin-wrap .btn { width: auto; }

/* =================================================================
   响应式：小屏手机 / 折叠屏外屏 / 折叠屏内屏 / 平板 / 横屏
   ================================================================= */

/* 超窄屏（折叠屏外屏、iPhone SE 等 ≤360px） */
@media (max-width: 360px) {
  :root { --pad: 12px; --gap: 10px; --r-card: 16px; --fs: 14.5px; }
  .hero { padding: 16px; border-radius: var(--r-lg); }
  .hero-stat b { font-size: 18px; }
  .duo { gap: 9px; }
  .duo-card { padding: 15px 13px 12px; min-height: 112px; border-radius: var(--r-lg); }
  .duo-card h3 { letter-spacing: -.6px; }
  .duo-card .foot { font-size: 10.5px; padding: 6px 8px; }
  .mini-2 { gap: 9px; }
  .mini-card { padding: 13px 11px; font-size: 13.5px; }
  .icon-row { gap: 2px; }
  .icon-cell .cir { width: 42px; height: 42px; border-radius: var(--r-md); font-size: 18px; }
  .icon-cell span { font-size: 10.5px; }
  .daily-stats b { font-size: 19px; }
  .daily-acts { gap: 8px; }
  .ring { width: 84px; height: 84px; flex-basis: 84px; }
  .ring .inner { width: 66px; height: 66px; }
  .qstem { margin: 14px 0 12px; }
  .opt { padding: 11px 12px; font-size: 14px; }
  .sheet-grid { grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .tab { font-size: 10px; }
  .tab svg { width: 21px; height: 21px; }
  .cat-card { padding: 13px 12px; }
  .cat-card .cnt { right: 12px; top: 14px; font-size: 10.5px; }
  .subj-tabs { gap: 4px; }
  .subj-tabs button { padding: 7px 9px; font-size: 12px; border-radius: var(--r-sm); }
}

/* 折叠屏内屏 / 小平板竖屏（≥600px） */
@media (min-width: 600px) {
  :root { --app-max: 680px; --pad: 22px; --gap: 14px; --r-card: 20px; --fs: 15.5px; }
  .card { padding: 18px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .hero { padding: 24px; }
  .hero .hi { font-size: 14px; }
  .hero-stats { gap: 12px; }
  .hero-stat b { font-size: 23px; }
  .hero-stat span { font-size: 12.5px; }
  .duo { gap: 14px; }
  .duo-card { min-height: 150px; padding: 22px 20px 16px; }
  .duo-card p { font-size: 12.5px; }
  .duo-card .foot { font-size: 12.5px; padding: 9px 12px; }
  .mini-2 { gap: 14px; }
  .mini-card { padding: 17px 16px; font-size: 15px; }
  .icon-row { gap: 12px; margin-bottom: 22px; }
  .icon-cell .cir { width: 52px; height: 52px; border-radius: var(--r-md); font-size: 22px; }
  .icon-cell span { font-size: 12.5px; }
  .daily-card, .know-card { padding: 20px; }
  .know-top { gap: 28px; }
  .sheet-grid { grid-template-columns: repeat(8, 1fr); }
  .list-item { padding: 16px 0; }
  .result-stats div b { font-size: 20px; }
  .review-item, .wrong-card { padding: 18px; }
}

/* 折叠屏展开 / 平板横屏（≥860px） */
@media (min-width: 860px) {
  :root { --app-max: 900px; --pad: 28px; --gap: 16px; }
  .duo { gap: 16px; }
  .mini-2 { gap: 16px; }
  .daily-stats b { font-size: 26px; }
  .cat-grid { gap: 16px; }
  .daily-acts .btn { height: 42px; }
  .sheet-grid { grid-template-columns: repeat(10, 1fr); }
  .qstem { max-width: 760px; }

  /* 首页：每日一练与知识点练习并排，充分利用横向空间 */
  .home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .hc-a, .hc-b { display: flex; flex-direction: column; }
  .home-cols .daily-card,
  .home-cols .know-card { margin-bottom: 0; flex: 1; }
  .home-cols .sec-title { margin-top: 0; }

  /* 题库列表：宽屏两列，避免单卡过长 */
  .cats-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .cats-list .cat-row { margin-bottom: 0; height: 100%; }
}

/* 桌面浏览器 */
@media (min-width: 1100px) {
  :root { --app-max: 960px; }
  #app { border-radius: 0; }
}

/* 横屏 + 矮视口（手机横屏、折叠屏半开）：压缩纵向占用 */
@media (orientation: landscape) and (max-height: 560px) {
  .topbar { min-height: 46px; }
  .hero { padding: 16px 20px; }
  .hero .name { margin-bottom: 10px; }
  .duo-card { min-height: 104px; padding: 16px 16px 12px; }
  .tabbar { padding: 3px max(0px, var(--sar)) calc(3px + var(--sab)) max(0px, var(--sal)); }
  .tab { gap: 1px; padding: 4px 2px 3px; }
  .tab-ic { width: 22px; height: 22px; }
  .tab svg { width: 21px; height: 21px; }
  .scroll { padding-bottom: calc(92px + var(--sab)); }
  .sheet { max-height: 88dvh; }
}

/* 尊重系统降低动效设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ---------- 主 CTA 呼吸光（移植自 libraries.dev BorderBeam · pulse-inner ----------
   原库是 React 组件，本项目纯 HTML，按它的视觉规格用 CSS 复刻：
   光在边框内侧呼吸，不位移；strength≈0.55 保持克制；reduced-motion 下关闭。
   ------------------------------------------------------------------------- */
.btn.glow {
  position: relative; overflow: hidden; isolation: isolate;
}
.btn.glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  z-index: 1;
}
.btn.glow::after {
  content: ''; position: absolute; inset: -40% -10%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 115%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  opacity: .45; z-index: 0;
  animation: cta-breathe 3.4s ease-in-out infinite;
}
.btn.glow > * { position: relative; z-index: 2; }
@keyframes cta-breathe {
  0%, 100% { opacity: .35; transform: translateY(4%) scale(.98); }
  50%      { opacity: .8;  transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.glow::after { animation: none; opacity: .45; transform: none; }
}

/* ---------- 骨架屏：柔和扫光，替代原来的空白占位 ---------- */
.card.sk {
  position: relative; overflow: hidden;
  background: #F1F2F5; border-color: transparent; box-shadow: none;
}
.card.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  transform: translateX(-100%);
  animation: sk-sweep 1.5s ease-in-out infinite;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .card.sk::after { animation: none; } }

/* ---------- Border beam（移植自 libraries.dev BorderBeam · md · ocean） ----------
   conic-gradient + mask 挖空内部，只留 1.5px 边框；光沿边框匀速环绕。
   只挂一张卡片（每日一练），一屏最多一个。
   ----------------------------------------------------------------------------- */
@property --beam-angle {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.beam { position: relative; }
.beam::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg,
    transparent 286deg,
    rgba(47, 123, 255, .18) 322deg,
    rgba(47, 123, 255, .85) 348deg,
    rgba(96, 165, 250, .95) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: beam-spin 4.2s linear infinite;
  z-index: 1;
}
@keyframes beam-spin { to { --beam-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .beam::before { animation: none; opacity: .5; }
}

/* 实心紫卡上的流光改用白色，否则与底色同色看不见 */
.duo-card.purple.beam::before {
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg,
    transparent 284deg,
    rgba(255, 255, 255, .08) 320deg,
    rgba(255, 255, 255, .55) 348deg,
    rgba(255, 255, 255, .95) 360deg);
}

/* =================================================================
   视觉皮肤：渐变色卡风格（按用户提供的参考图）
   只覆盖视觉属性（颜色/圆角/阴影/字重），不动布局与断点
   ================================================================= */
:root {
  --brand: #2F7BFF;
  --brand-dark: #1F63E0;
  --brand-soft: #EAF2FF;
  --grad-purple: linear-gradient(140deg, #5E97FF 0%, #2F6BF0 100%);
  --grad-blue: linear-gradient(140deg, #57C4F5 0%, #2E86E8 100%);
  --glass: rgba(255, 255, 255, .74);
}

/* 背景：顶部一点淡蓝，向下很快收成白（和资料页淡红渐白一个路数） */
body { background: #F0F5FD; }
#app {
  background:
    radial-gradient(115% 38% at 8% -6%, #E3EEFF 0%, rgba(227, 238, 255, 0) 60%),
    radial-gradient(90% 32% at 96% -2%, #EDF3FF 0%, rgba(237, 243, 255, 0) 58%),
    linear-gradient(180deg, #F4F9FF 0%, #F8FBFF 34%, #FCFDFF 68%, #FDFEFF 100%);
}

/* 顶栏：全站一套——标题居中 + 毛玻璃
   底色接近不透明——页面内容是整页滚动的，透明顶栏会让卡片文字透到标题上；
   一级页 / 二级页 / 首页共用同一条渐变，各页之间切换时标题栏不会"变脸" */
.topbar,
.topbar.solid,
.topbar.home-top {
  background: linear-gradient(180deg, rgba(244, 249, 255, .978) 0%, rgba(248, 251, 255, .972) 100%);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border-bottom: none;
  min-height: 56px; justify-content: center;
}
/* 返回键绝对定位：不占 flex 空间，标题永远在屏幕正中，
   有一级页有返回键、有的没有，标题也不会左右跳 */
.topbar .tb-back {
  position: absolute; left: max(var(--pad), var(--sal)); top: 50%;
  transform: translateY(-50%);
  color: var(--text);
}
.topbar .tb-back svg { width: 21px; height: 21px; }
/* 右侧按钮同理：绝对定位，别把标题推偏 */
.topbar .tb-right {
  position: absolute; right: max(var(--pad), var(--sar)); top: 50%;
  transform: translateY(-50%); color: var(--text);
}
/* 答题页的退出键：手机上一眼要找得到，按 24px 画，热区撑到 44px */
.topbar .tb-close { width: 40px; height: 40px; flex: 0 0 40px; color: #3A3F4C; }
.topbar .tb-close svg { width: 24px; height: 24px; stroke-width: 2.3; }
/* 标题：字号/字重/颜色全站统一（跟首页标题同一套数值） */
.topbar h1,
.topbar h1.tb-title {
  font-size: var(--sec-fs); font-weight: 650; letter-spacing: -.2px;
  color: #10121A; margin: 0; flex: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glass-btn {
  position: absolute; right: max(var(--pad), var(--sar)); top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 14px rgba(30, 70, 150, .10);
  display: grid; place-items: center; color: #2A2F3A;
}
.glass-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* 定位：地名退成左端的静音小字，不跟标题抢注意力 */
.home-region {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .1px; color: #5C6B84;
  padding: 0; line-height: 1;
}
/* 蓝色定位点：呼吸（缩放 + 透明度 + 外扩光环），周期 2.4s */
.home-region::before {
  content: ''; flex: 0 0 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(47, 123, 255, .40);
  animation: regionPulse 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes regionPulse {
  0%   { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(47, 123, 255, .40); }
  50%  { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 4px rgba(47, 123, 255, .10); }
  100% { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(47, 123, 255, .40); }
}
@media (prefers-reduced-motion: reduce) {
  .home-region::before { animation: none; opacity: .9; transform: none; }
}
.home-region .dn { display: none; }
.home-region .pin { display: none; }

/* 主入口：彩色渐变卡 + 半透明信息条（两张卡尺寸完全对齐） */
.duo { gap: 12px; margin-bottom: 14px; align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo-card {
  border-radius: var(--r-lg); padding: 16px 15px 14px; min-height: 138px;
  border: none; color: #fff; height: 100%; min-width: 0;
  display: flex; flex-direction: column;
}
.duo-card.purple { background: var(--grad-purple); box-shadow: 0 14px 30px rgba(47, 123, 255, .30); border: none; }
.duo-card.blue { background: var(--grad-blue); box-shadow: 0 14px 30px rgba(74, 102, 239, .24); border: none; }
.duo-card.purple h3, .duo-card.blue h3 { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.duo-card.purple h3::after, .duo-card.blue h3::after {
  content: '▸'; font-size: 13px; margin-left: 5px; opacity: .92;
}
.duo-card.purple p, .duo-card.blue p { color: rgba(255, 255, 255, .82); font-size: 12.5px; }
.duo-card .dc-ico { display: none; }
/* 信息条：定高 + 居中，左右文案长短、字号变化都不影响盒子尺寸 */
.duo-card .foot {
  margin-top: auto; padding: 0 10px; min-height: 32px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .94);
  font-size: 12px; font-weight: 500; text-align: center;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
}

/* 次级入口：两张独立白卡 */
.mini-2 { gap: 12px; background: none; border: none; box-shadow: none; overflow: visible; }
.mini-card {
  background: #fff; border: 1px solid #E6EEFA; border-radius: var(--r-lg);
  box-shadow: 0 6px 16px rgba(30, 80, 160, .07);
  padding: 15px 12px; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #14161F;
}
.mini-card .em { font-size: 20px; line-height: 1; }
/* 章节/真题入口用位图图标代替 emoji */
.mini-card img.em {
  width: 36px; height: 36px; flex: 0 0 36px; display: block;
  object-fit: contain; margin-right: 2px;
  filter: drop-shadow(0 2px 4px rgba(30, 70, 150, .10));
}

/* 快捷入口：立体图标、无底座 */
.icon-cell .cir {
  background: none !important; width: auto; height: auto;
  font-size: 32px; border-radius: 0; line-height: 1;
}
.icon-cell img.ic {
  width: 46px; height: 46px; display: block; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(30, 70, 150, .12));
}
.icon-cell:active img.ic { transform: scale(.94); }
.icon-cell img.ic { transition: transform .16s cubic-bezier(.34, 1.56, .64, 1); }
.icon-cell span { font-size: 12px; color: #33384A; font-weight: 600; letter-spacing: .2px; }

/* 每日一练：斜体大标题 + 蓝笔触 + 右上灰色页签 */
.daily-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 16px 15px 14px;
  border: none; box-shadow: 0 8px 24px rgba(30, 80, 160, .08);
}
.daily-head { align-items: flex-start; margin-bottom: 13px; }
.daily-head h3 {
  display: inline-block; position: relative; z-index: 0;
  font-size: var(--sec-fs); font-weight: 750; font-style: italic;
  letter-spacing: -.3px; color: #0B0E17; line-height: 1.15;
}
/* 荧光笔：压在字的下缘，只盖住底部一点点，不挡字身 */
.daily-head h3::after {
  content: ''; position: absolute; left: 1px; right: 2px; bottom: -1px; height: 7px;
  background: linear-gradient(90deg, rgba(169, 196, 255, .95), rgba(92, 125, 248, .95));
  border-radius: 4px; z-index: -1;
}

/* 三个数字：大号数字 + 小号单位 */
.daily-stats {
  background: #F3F7FE; border-radius: var(--r-md); padding: 14px 10px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  text-align: center; margin-bottom: 13px;
}
.daily-stats b {
  display: block; font-size: 25px; font-weight: 800;
  letter-spacing: -1.2px; color: #0B0E17; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.daily-stats b i { font-size: 13px; font-weight: 600; color: #6E7480; margin-left: 1px; letter-spacing: 0; }
.daily-stats span { font-size: 11.5px; color: #8A94A6; margin-top: 1px; }

/* 按钮：白描边 + 蓝色渐变 */
.daily-acts { gap: 10px; }
.daily-acts .btn {
  height: 41px; border-radius: var(--r-md); font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #5F9DFF, #2F7BFF);
  box-shadow: 0 8px 18px rgba(47, 123, 255, .28);
}
.daily-acts .btn.plain {
  background: #fff; border: 1px solid #E1EAF8; color: #16213C; box-shadow: none;
}

/* 知识点卡 */
.know-card, .card { border: none; box-shadow: 0 8px 24px rgba(30, 80, 160, .07); }
.subj-tabs button { background: #F1F6FD; color: #6B7A93; }
.subj-tabs button.on { background: #E8F0FF; color: #2F7BFF; }

/* 区块标题：黑色粗体 */
.sec-title { font-size: var(--sec-fs); font-weight: 750; letter-spacing: -.3px; color: #0B0E17; margin: 26px 4px 12px; }
.sec-title .more { font-size: 12px; color: #8A94A6; font-weight: 500; }

/* 悬浮福利条 */
.promo-pill {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 22px auto 4px;
  background: #fff; border-radius: 99px; padding: 11px 22px;
  font-size: 14px; font-weight: 600; color: #2A2F3A;
  box-shadow: 0 8px 22px rgba(30, 80, 160, .12);
}
.promo-pill .dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #8BEFA4, #22B368);
}

/* 底部导航的收口（主样式在上面，这里只兜住浅色皮肤） */
.tab { color: #8E99AC; }
.tab.on { color: var(--brand); }

/* 皮肤在窄屏（折叠屏外屏）下的收口，避免文字被挤出卡片 */
@media (max-width: 360px) {
  .home-region { font-size: 13px; gap: 6px; }
  /* 窄屏统一收 1.5px，全站标题还是同一个字号 */
  .topbar h1, .topbar h1.tb-title { font-size: 15.5px; }
  .duo-card { min-height: 124px; padding: 14px 12px 12px; }
  .duo-card.purple h3, .duo-card.blue h3 { font-size: 16.5px; }
  .duo-card.purple p, .duo-card.blue p { font-size: 11.5px; }
  .duo-card .foot { font-size: 10.5px; padding: 7px 6px; }
  .daily-card { padding: 18px 13px 13px; }
  .daily-stats { padding: 15px 8px; }
  .daily-stats b { font-size: 26px; letter-spacing: -1px; }
  .daily-stats b i { font-size: 13px; }
  .icon-cell .cir { font-size: 28px; }
  .icon-cell span { font-size: 11px; }
}

/* 宽屏（折叠屏内屏）下不拉伸卡片，避免左栏留大片空白 */
@media (min-width: 860px) {
  .home-cols { align-items: start; }
  .home-cols .daily-card,
  .home-cols .know-card { flex: 0 0 auto; }
}

/* ---------- 问答题（面试类） ---------- */
.essay-box { margin-bottom: 15px; }
.essay-box .analysis { margin-top: 0; }
/* 未看参考答案前，自评按钮先弱化，但仍可点（点了给提示） */
.opt.waiting { opacity: .45; }
.opt.waiting:active { opacity: .6; }

/* 问答题作答：手写输入框 + 「已在纸上作答」/「提交答案」 */
.essay-input {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 104px; padding: 13px 14px;
  font: inherit; font-size: 14px; line-height: 1.65; color: var(--text);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  outline: none; resize: vertical;
  -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.essay-input::placeholder { color: var(--faint); }
.essay-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .12);
}
.essay-acts {
  display: flex; gap: 10px; margin-top: 10px;
}
.essay-acts .btn { width: auto; flex: 1 1 0; margin: 0; }
.essay-acts .btn.plain { flex: 0 0 auto; width: auto; padding: 0 18px; white-space: nowrap; }
.essay-tip {
  margin: 9px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); text-align: center;
}
.essay-evaltip {
  margin: 14px 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center;
}

/* 科目从 4 个变成 6 个后，横向滚动会露出半截标签，改成换行 */
.subj-tabs { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }

/* ---------- 参考答案折叠：题干先出，答案点开再看 ---------- */
.ans-fold { margin-top: 12px; }
.ans-fold > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); padding: 9px 15px; border-radius: var(--r-md);
  transition: background .15s;
}
.ans-fold > summary::-webkit-details-marker { display: none; }
/* 三角用 border 画，比 ▸ 字形大一圈，手机上才看得清；展开时转 90° */
.ans-fold > summary::before {
  content: ''; flex: 0 0 auto; width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  transition: transform .18s;
}
.ans-fold[open] > summary { margin-bottom: 11px; }
.ans-fold[open] > summary::before { transform: rotate(90deg); }
.ans-fold > summary:hover { background: #DCE8FF; }
.ans-fold .an {
  font-size: 13.5px; line-height: 1.75; color: #344054;
  background: #F6FAFF; border-radius: var(--r-md); padding: 12px 14px;
  white-space: pre-wrap; word-break: break-word;
  animation: fadeUp .2s ease;
}

/* ---------- 章节 / 试卷列表 ---------- */
.bank-all {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: linear-gradient(135deg, #F2F7FF 0%, #E7F0FF 100%);
  border: 1px solid rgba(47, 123, 255, .14);
}
.bank-all .ba-l b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: #16213C; }
.bank-all .ba-l span { font-size: 12.5px; color: var(--muted); }
.bank-all .ba-go {
  margin-left: auto; font-size: 12.5px; font-weight: 650; white-space: nowrap;
  color: #fff; background: var(--brand);
  padding: 9px 18px; border-radius: 999px;
}
.bank-row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; margin-bottom: 10px; }
.bank-row:active { transform: scale(.99); }
.bank-row .br-l { min-width: 0; }
.bank-row .br-l b {
  display: block; font-size: 15px; font-weight: 650; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-row .br-l span { font-size: 12px; color: var(--faint); }
.bank-row .br-go { margin-left: auto; color: #C2C7D4; font-size: 20px; line-height: 1; }

/* 题型攻破：一行一类题型（题数只在副标题里出现一次，不再右侧重复） */
.qtype-row .br-l { flex: 1; min-width: 0; }
.qtype-row .br-l span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qtype-row .br-go { margin-left: auto; }

/* 开始练习弹层：提醒还有一份没做完的练习 */
.draft-tip {
  margin: 12px 2px 0; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.5; color: #9A6B00;
  background: #FFF7E6; border: 1px solid rgba(191, 132, 0, .16); border-radius: var(--r-md);
}

/* 首页 / 记录页：「继续上次练习」卡片 */
.draft-card {
  position: relative; z-index: 2;   /* 压在吉祥物下缘之前，让它藏进卡片后面 */
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; margin-bottom: 14px; cursor: pointer;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #EAF2FF 0%, #EBF0FF 100%);
  border: 1px solid rgba(47, 123, 255, .16);
  box-shadow: 0 6px 18px rgba(47, 123, 255, .07);
}
.draft-card:active { transform: scale(.995); }
.draft-card .dc-l { flex: 1; min-width: 0; }
.draft-card .dc-k {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; color: #2F7BFF; margin-bottom: 4px;
}
.draft-card .dc-acc {
  flex: 0 0 auto; font-style: normal; font-size: 11px; font-weight: 600;
  letter-spacing: 0; color: #7C7590;
}
.draft-card .dc-l b {
  display: block; font-size: 14.5px; font-weight: 700; color: #1B2846; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-card .dc-l span {
  display: block; margin-top: 3px; font-size: 11.5px; color: #6B7A93;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-bar { height: 4px; margin-top: 9px; border-radius: 99px; background: rgba(47, 123, 255, .14); overflow: hidden; }
.dc-bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.draft-card .dc-go {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 650; color: #fff; background: var(--brand);
}
.draft-card .dc-x {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: #8A82A6; background: rgba(255, 255, 255, .72);
}
.draft-card .dc-x svg { width: 12px; height: 12px; }

/* ---------------- 填空题 ---------------- */

.fill-box { margin: 4px 0 15px; display: flex; flex-direction: column; gap: 10px; }
.fill-blank {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.fill-blank .fb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 7px;
}
.fill-blank .fb-no { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.fill-blank .fb-mark { font-size: 12.5px; font-weight: 700; }
.fill-blank.ok { border-color: var(--ok); background: var(--ok-soft); }
.fill-blank.ok .fb-mark { color: var(--ok); }
.fill-blank.no { border-color: var(--bad); background: var(--bad-soft); }
.fill-blank.no .fb-mark { color: var(--bad); }
.fill-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: var(--fs); font-family: inherit; color: var(--text);
  background: var(--bg);
  transition: border-color .15s, background .15s;
}
.fill-input:focus { outline: none; border-color: var(--brand); background: #fff; }
.fill-blank .fb-in { font-size: var(--fs); color: var(--text); word-break: break-all; }
.fill-blank .fb-std { font-size: 13.5px; color: var(--text); margin-top: 6px; padding-top: 7px; border-top: 1px dashed var(--line-strong); word-break: break-all; }
.fill-blank .fb-std::before { content: ''; }

/* =================================================================
   首页改版：五科目入口 + 刷题进度 / 科目内页三组切换
   ================================================================= */

/* 区块小标题（科目练习） */
.sect-head {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 2px 4px 12px; gap: 10px;
}
.sect-head b { font-size: var(--sec-fs); font-weight: 750; letter-spacing: -.3px; color: #0B0E17; }
.sect-head span { font-size: 12px; color: #8A94A6; font-weight: 500; white-space: nowrap; }

/* 题库卡：两列三行（5 科 + 网课占位）
   每张卡用科目主色做浅底渐变 + 同色投影，右下角压一个低透明度大图标做层次 */
.subj-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.subj-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-width: 0; cursor: pointer;
  padding: 11px 10px 12px; border-radius: var(--r-lg);
  background: linear-gradient(152deg, var(--tint) 0%, rgba(255, 255, 255, 0) 58%), #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 26px -12px var(--cs), 0 2px 6px rgba(20, 22, 31, .03);
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s;
}
.subj-card:active {
  transform: scale(.972);
  box-shadow: 0 4px 12px -8px var(--cs), 0 1px 4px rgba(20, 22, 31, .04);
}
/* 背景大图标：只做肌理，不抢信息
   放在卡片垂直中线上、并且大幅出血到右侧边缘外，避开底部的进度条 */
.subj-card .sj-ghost {
  position: absolute; z-index: -1; right: -20px; top: 50%;
  width: 62px; height: 62px; color: var(--c); opacity: .075;
  transform: translateY(-50%) rotate(-8deg); pointer-events: none;
}
.subj-card .sj-ghost img { width: 100%; height: 100%; display: block; }
.subj-card .sj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
/* 图标换成彩色插画后不再垫渐变方块，留 34px 的坑位让图文对齐 */
.subj-card .sj-ico {
  display: block; width: 34px; height: 34px; flex: 0 0 34px;
  line-height: 0; background: none; box-shadow: none;
}
.subj-card .sj-ico img { width: 100%; height: 100%; display: block; }
/* 右上角：完成度（或「未练」/「筹备中」） */
.subj-card .sj-pct {
  flex: 0 0 auto; margin-top: 1px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0;
  color: var(--c); background: #fff; border-radius: 99px;
  padding: 3px 6px; line-height: 1.35;
  box-shadow: 0 2px 8px rgba(20, 22, 31, .06);
  font-variant-numeric: tabular-nums;
}
.subj-card .sj-pct.zero { color: #9AA1B4; background: var(--tint); box-shadow: none; }
.subj-card .sj-name {
  margin-top: 10px; font-size: 13.5px; font-weight: 800;
  letter-spacing: -.2px; color: #0B0E17;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.subj-card .sj-meta {
  margin-top: 4px; font-size: 10.5px; line-height: 1.45; color: #7C8195;
  display: flex; flex-direction: column;
}
.subj-card .sj-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subj-card .sj-meta b { color: #262A3B; font-weight: 750; font-variant-numeric: tabular-nums; }
.subj-card .sj-bar {
  position: relative; height: 4px; border-radius: 99px; overflow: hidden;
  background: var(--tint); margin-top: 9px;
}
.subj-card .sj-bar i {
  display: block; height: 100%; border-radius: 99px; min-width: 0;
  background: var(--g);
  transition: width .4s ease;
}

/* 网课占位卡：整体降饱和 + 虚线边 */
.subj-card.soon {
  background: linear-gradient(152deg, var(--tint) 0%, rgba(255, 255, 255, 0) 62%), #FCFDFF;
  border: 1px dashed #E0E9F7;
  box-shadow: none;
}
.subj-card.soon .sj-ico { opacity: .9; }
.subj-card.soon .sj-name { color: #4B5064; }
.subj-card.soon .sj-ghost { opacity: .05; }
.subj-card.soon .sj-bar { background: #F1F6FD; box-shadow: none; }

/* 刷题进度卡 */
.prog-nums { flex: 1; min-width: 0; }
.prog-nums div {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12.5px; color: #8A94A6; padding: 3px 0;
}
.prog-nums div b { color: #0B0E17; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.prog-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #EFF4FB;
}
.prog-foot .pf-l { flex: 1; min-width: 0; }
.prog-foot .pf-l b { display: block; font-size: 13.5px; font-weight: 700; color: #14161F; }
.prog-foot .pf-l span { font-size: 11.5px; color: #8A94A6; }
.prog-foot .pf-btn {
  flex: 0 0 auto; height: 40px; padding: 0 18px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #5F9DFF, #2F7BFF); color: #fff;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(47, 123, 255, .26);
}
.prog-foot .pf-btn:active { transform: scale(.97); }

/* 科目内页头图 */
.subj-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: var(--r-lg); margin: 12px 0 16px;
  background: var(--g, linear-gradient(135deg, #5F9DFF, #2F7BFF));
  color: #fff; box-shadow: 0 14px 30px rgba(30, 80, 160, .22);
}
/* 暗影图标：和首页 6 张科目卡同一手法，只是这里底色是彩色的，改成白色低透明度 */
.subj-hero .sh-ghost {
  position: absolute; z-index: -1; right: -26px; top: 50%;
  width: 112px; height: 112px; color: #fff; opacity: .125;
  transform: translateY(-50%) rotate(-10deg); pointer-events: none;
}
.subj-hero .sh-ghost img {
  width: 100%; height: 100%; display: block;
  filter: brightness(0) invert(1);          /* 彩色图标压成白色剪影，和原来的线性图标一样只当肌理 */
}
.subj-hero .sh-l { min-width: 0; }
.subj-hero .sh-l b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.25; }
.subj-hero .sh-l span { font-size: 12px; opacity: .88; }
.subj-hero .sh-stats { margin-left: auto; display: flex; gap: 16px; text-align: right; flex: 0 0 auto; }
.subj-hero .sh-stats b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.subj-hero .sh-stats span { font-size: 11px; opacity: .82; }

/* 三组横向切换 */
.grp-tabs {
  display: flex; gap: 8px; margin: 0 0 14px; padding: 2px 2px 6px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.grp-tabs::-webkit-scrollbar { display: none; }
.grp-tabs button {
  flex: 0 0 auto; white-space: nowrap;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #E6EEFA; color: #6B7A93;
  font-size: 13.5px; font-weight: 600;
  transition: background .16s, color .16s, border-color .16s, transform .16s;
}
.grp-tabs button:active { transform: scale(.97); }
.grp-tabs button.on {
  background: var(--brand);
  color: #fff; border-color: var(--brand);
}
.grp-tabs button i { font-style: normal; font-size: 11.5px; opacity: .7; margin-left: 4px; }
.grp-tabs button.on i { opacity: .9; }

.grp-hint {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 2px 10px;
  font-size: 12px; color: #8A94A6; margin: 2px 4px 10px;
}
.grp-hint span { color: #B0B4C0; margin-left: auto; white-space: nowrap; }

.empty-mini {
  text-align: center; font-size: 13px; color: #9CA2AE;
  padding: 40px 16px; background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 8px 22px rgba(30, 80, 160, .06);
}

@media (max-width: 360px) {
  .subj-grid { gap: 8px; }
  .subj-card { padding: 10px 9px 11px; border-radius: var(--r-lg); }
  .subj-card .sj-ico { width: 30px; height: 30px; flex-basis: 30px; }
  .subj-card .sj-name { font-size: 12.5px; margin-top: 8px; }
  .subj-card .sj-meta { font-size: 10px; }
  .subj-card .sj-pct { font-size: 9px; padding: 2px 5px; }
  .sect-head b { font-size: var(--sec-fs); }
  .subj-hero { padding: 15px; }
  .subj-hero .sh-l b { font-size: 20px; }
  .prog-foot .pf-btn { height: 38px; padding: 0 14px; font-size: 13px; }
}

/* 每日一练右上角提示（原「全科」页签位置） */
.daily-head { position: relative; }
.daily-head .daily-tip {
  font-size: 12px; color: #9CA2AE; font-weight: 500; align-self: flex-start;
  padding-top: 5px;
}

/* 刷题进度的科目标签：6 个放不下一行，改为单行横滑（禁止换成两行） */
.know-card .subj-tabs {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  padding: 0 0 4px; scrollbar-width: none; -ms-overflow-style: none;
}
/* 末尾不补白：标签条就在自身宽度里横移，最后一个标签贴右边缘停住 */
.know-card .subj-tabs::-webkit-scrollbar { display: none; }
.know-card .subj-tabs button { flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; font-size: 13px; }

/* 章节名较长：允许两行，避免「第1节 常用逻辑…」被截断 */
.bank-row { align-items: center; }
.bank-row .br-l b {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4; font-size: 14.5px;
}
.bank-row .br-l span { display: block; margin-top: 3px; }

/* =================================================================
   每日一练 / 混合练习：底部弹层的科目、范围选择
   ================================================================= */
.pk-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.pk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-lg);
  background: #F4F8FF; border: 1px solid #EFECFA;
  cursor: pointer; transition: transform .14s, background .14s;
}
.pk-row:active { transform: scale(.985); background: #F2EFFC; }
.pk-row.off { opacity: .45; pointer-events: none; }
/* 选择科目弹层：同样是彩色插画图标，去掉原来的渐变底板 */
.pk-ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: block; line-height: 0;
  background: none; box-shadow: none;
}
.pk-ico img { width: 100%; height: 100%; display: block; }
/* 练习范围图标（图层 / 分类格 / 卷面 / 闪电）：科目浅色圆角底板 + 科目标色描边线稿 */
.pk-ico.gico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center; line-height: 0;
  border-radius: 12px;
  background: var(--t, #EEF2FF);
  color: var(--c, #4257D6);
}
.pk-ico.gico svg { width: 21px; height: 21px; display: block; }
.pk-l { flex: 1; min-width: 0; }
.pk-l b { display: block; font-size: 15px; font-weight: 700; color: #14161F; letter-spacing: -.1px; }
.pk-l span { font-size: 12px; color: #8A94A6; }
.pk-go { color: #C2C7D4; font-size: 21px; line-height: 1; }

.sheet-back {
  width: 22px; height: 22px; margin-right: 6px; vertical-align: -3px;
  font-size: 22px; line-height: 1; color: var(--muted); font-weight: 400;
}

/* 混合练习题量三选一 */
.cnt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.cnt-btn {
  padding: 16px 0 13px; border-radius: var(--r-md); text-align: center;
  background: linear-gradient(160deg, #F3F8FF, #E8F1FF);
  border: 1.5px solid #D8E7FF; color: #2A5EB0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.cnt-btn:active { transform: scale(.96); border-color: #A8C6FF; box-shadow: 0 6px 16px rgba(47, 123, 255, .18); }
.cnt-btn b { font-size: 23px; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: #1B4C9E; }
.cnt-btn i { font-style: normal; font-size: 11.5px; color: #8A7FBF; font-weight: 600; }

/* =================================================================
   答题页：每道题的「报错」按钮 + 反馈弹层
   ================================================================= */
.pill.report-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: #fff; color: #8A94A6; font-weight: 600;
  border: 1px solid #EBE8F5; padding: 3px 8px 3px 7px;
  cursor: pointer; transition: color .14s, border-color .14s, background .14s;
}
.pill.report-pill svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pill.report-pill:active { background: #F2F7FF; border-color: #DCD5F3; color: #2F7BFF; }
.pill.report-pill.done { color: #12A15C; border-color: #D8F0E4; background: #F4FBF7; }

.rp-chips {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px; margin: 4px 0 11px;
}
.rp-chip {
  text-align: left; padding: 8px 11px 9px; border-radius: var(--r-md);
  background: #F4F8FF; border: 1.5px solid #E9F0FB;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform .14s, border-color .14s, background .14s;
}
.rp-chip b { font-size: 13.5px; font-weight: 700; color: #26293A; letter-spacing: -.1px; }
.rp-chip span { font-size: 10.5px; color: #9298A8; line-height: 1.4; }
.rp-chip:active { transform: scale(.975); }
.rp-chip.on { background: #F3EFFF; border-color: #B9A6FB; }
.rp-chip.on b { color: #1F63E0; }

.rp-note {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1px solid #EEECF6; border-radius: var(--r-md); background: #FBFAFE;
  padding: 11px 13px; font-size: 13px; line-height: 1.6; color: var(--text);
  margin-bottom: 12px; font-family: inherit;
}
.rp-note:focus { outline: none; border-color: #A8C6FF; background: #fff; }

.rp-cancel {
  display: block; width: 100%; margin-top: 10px; padding: 9px 0;
  font-size: 13px; color: #8A94A6; background: none;
}
.rp-cancel:active { color: #2F7BFF; }

/* ---------- 会员中心（我的页） ---------- */
.mem-wrap { display: grid; gap: 10px; margin-bottom: 14px; }

/* ---------- 顶部总览条（题库 / 错题本） ----------
   跟下面的列表卡刻意拉开：有底色、四周同一个 20px 圆角、数字单独放大，
   一眼能看出「这是汇总，不是又一条内容」 */
.hero-band {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
}
/* 右上角一团柔光，让纯渐变不至于太平 */
.hero-band::before {
  content: ''; position: absolute; right: -34px; top: -50px; width: 138px; height: 138px;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 68%);
}
.hero-band .hb-body { flex: 1; min-width: 0; }
.hero-band .hb-num {
  font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; color: #24314F;
  display: flex; align-items: baseline; gap: 3px;
}
.hero-band .hb-num b {
  font-size: 21px; font-weight: 800; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hero-band .hb-sub { font-size: 11.5px; margin-top: 2px; }

/* 题库总览：品牌蓝 —— 中性、跟主色一致 */
.hero-band.bank {
  background: linear-gradient(132deg, #E4EFFF 0%, #EFF6FF 50%, #FAFDFF 100%);
  border-color: rgba(47, 123, 255, .16);
  box-shadow: 0 12px 26px -20px rgba(47, 123, 255, .9);
}
.hero-band.bank .hb-num b { color: var(--brand); }
.hero-band.bank .hb-sub { color: #5E7099; }
.hero-band.bank .hb-ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-md);
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 8px 18px -12px rgba(47, 123, 255, .9), inset 0 1px 0 #fff;
}

/* 错题总览：暖橙 —— 提醒「这些是要处理的」，和蓝色主色分开 */
.hero-band.wrong {
  background: linear-gradient(132deg, #FFEEDC 0%, #FFF6EC 52%, #FFFCF8 100%);
  border-color: rgba(224, 138, 26, .26);
  box-shadow: 0 12px 26px -20px rgba(224, 138, 26, .95);
}
.hero-band.wrong .hb-num b { color: #D2760A; }
.hero-band.wrong .hb-sub { color: #97785C; }
.hero-band.wrong .hb-cta {
  flex: 0 0 auto; width: auto; height: 34px; padding: 0 15px; font-size: 13px;
  background: linear-gradient(140deg, #F7A93B, #E4860F);
  box-shadow: 0 10px 20px -12px rgba(200, 120, 10, .95), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.hero-band.wrong .hb-cta:active { transform: scale(.97); }

/* 收藏总览：冷蓝 —— 安静、像书签 */
.hero-band.fav {
  background: linear-gradient(132deg, #E3EDFF 0%, #F0F6FF 52%, #FCFDFF 100%);
  border-color: rgba(79, 124, 247, .22);
  box-shadow: 0 12px 26px -20px rgba(79, 124, 247, .95);
}
.hero-band.fav .hb-num b { color: #3B62F6; }
.hero-band.fav .hb-sub { color: #5E7099; }
.hero-band.fav .hb-ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-md);
  display: grid; place-items: center; background: #fff; color: #3B62F6;
  box-shadow: 0 8px 18px -12px rgba(79, 124, 247, .9), inset 0 1px 0 #fff;
}
.hero-band.fav .hb-ic svg { width: 22px; height: 22px; fill: currentColor; }

/* 学习总览：青绿 —— 累计成果，三个数字并排 */
.hero-band.rec {
  background: linear-gradient(132deg, #DDF6E9 0%, #EDFBF4 52%, #FBFEFC 100%);
  border-color: rgba(18, 161, 92, .22);
  box-shadow: 0 12px 26px -20px rgba(18, 161, 92, .95);
}
.hero-band .hb-stats { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hero-band .hb-stat { min-width: 0; text-align: center; }
.hero-band .hb-stat b {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: -.7px;
  color: #0E8A4E; line-height: 1.25; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero-band .hb-stat b i {
  font-style: normal; font-size: 10px; font-weight: 600; margin-left: 1px; letter-spacing: 0;
}
.hero-band .hb-stat span {
  display: block; font-size: 10.5px; color: #4F7A66; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 账号 + 会员横幅连成一整块：上面是人和账号，下面直接接黑金会员条，
   不给中间留缝、不留各自的圆角，看着才像一张卡而不是两张卡；
   整张卡跟全站其他卡一样是 20px 圆角，异形感交给会员条右上角的斜切 */
.me-card {
  position: relative;
  border-radius: var(--r-lg); overflow: hidden;
  background: #fff; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(20, 23, 31, .04), 0 12px 30px -16px rgba(34, 26, 74, .34);
  border: 1px solid var(--line);
}
.me-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.me-info { flex: 1; min-width: 0; }
.me-name b { font-size: 15px; font-weight: 660; letter-spacing: -.1px; }
.me-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* 头像右下角挂一个铅笔，点哪儿都能进编辑（原来右边还有一个「编辑」按钮，重复，已去掉） */
.me-ava { position: relative; flex: 0 0 auto; padding: 0; border-radius: 50%; line-height: 0; }
.me-ava .avatar { box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(30, 70, 150, .45); }
.me-pen {
  position: absolute; right: -1px; bottom: -1px;
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #7A63F0, var(--brand-dark)); color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px -3px rgba(30, 70, 150, .6);
}
.me-pen svg { width: 7.5px; height: 7.5px; stroke-width: 2.6; }

/* 右上角：2027 届单招考试倒计时（占原来「编辑」按钮的位置） */
.me-cd {
  flex: 0 0 auto; align-self: center; text-align: right;
  padding: 5px 8px 6px; border-radius: var(--r-md);
  background: linear-gradient(150deg, #F4F9FF, #E9F1FF);
  border: 1px solid rgba(47, 123, 255, .16);
  box-shadow: 0 6px 14px -12px rgba(47, 123, 255, .9);
}
.me-cd span {
  display: block; font-size: 9px; font-weight: 600; line-height: 1.2;
  color: #7C8DA6; letter-spacing: 0; white-space: nowrap;
}
.me-cd b {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 1px;
  font-size: 19px; font-weight: 760; line-height: 1.1; letter-spacing: -.6px;
  color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 「还剩」跟「天」一样当量词处理，压小压灰，把注意力留给天数 */
.me-cd b em {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  color: #7C8DA6; letter-spacing: 0; margin-right: 2px;
}
.me-cd b i {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  color: #7C8DA6; letter-spacing: 0;
}

/* 管理员专属入口：只在 role=admin 时由 JS 渲染出来，普通用户看不到 */
.admin-entry {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 12px; padding: 12px 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(126deg, #EAF2FF 0%, #F0F6FF 54%, #FDFEFF 100%);
  border: 1px solid rgba(47, 123, 255, .22);
  box-shadow: 0 1px 2px rgba(20, 23, 31, .03), 0 10px 24px -18px rgba(30, 70, 150, .5);
  transition: transform .16s ease, box-shadow .16s ease;
}
.admin-entry:active { transform: scale(.985); box-shadow: 0 1px 2px rgba(20, 23, 31, .04); }
.admin-entry:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.admin-entry .ae-ic {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: #fff; color: var(--brand);
  box-shadow: 0 2px 8px -2px rgba(47, 123, 255, .3);
}
.admin-entry .ae-ic svg { width: 19px; height: 19px; }
.admin-entry .ae-body { flex: 1; min-width: 0; }
.admin-entry .ae-body b { display: block; font-size: 14.5px; font-weight: 660; letter-spacing: -.2px; color: #1B1533; }
.admin-entry .ae-body span {
  display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: #6B7A93;
}
.admin-entry .ae-go {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--brand);
  white-space: nowrap; letter-spacing: .2px;
}

.me-card .mh-card {
  border-radius: 0; border: none; box-shadow: none;
  padding: 13px 13px 14px;
}
/* 卡里所有东西都收一档，整张卡高度压到 ~150px
   （去掉「有效期」那行之后靠 row 的上间距把呼吸感补回来） */
.me-card .mh-head b { font-size: 14px; }
.me-card .mh-row { margin-top: 13px; gap: 10px; }
/* 四个权益图标放大一档；宽度交给文字自己撑，四个标签都是四个字，
   定死 34px 会让「无限刷题」溢出到下一格，看着全挤在一起 */
.me-card .mh-feats { gap: 8px; }
.me-card .mh-feat { width: auto; }
.me-card .mh-feat i { width: 34px; height: 34px; margin-bottom: 5px; border-radius: var(--r-md); }
.me-card .mh-feat i svg { width: 17px; height: 17px; }
.me-card .mh-feat span { font-size: 10px; }
.me-card .mh-btn { font-size: 11.5px; padding: 7px 12px; }
.me-card .mh-marquee { height: 12px; }
.me-card .mh-track > span { font-size: 9px; }

/* 编辑资料弹层 */
.prof { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; }
.prof-ava { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }
.prof-ava .avatar { cursor: pointer; }
.prof-cam {
  font-size: 10.5px; font-weight: 600; color: var(--brand); white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; background: var(--brand-soft);
}
.prof-nick { flex: 1; min-width: 0; margin: 0; }
.prof-nick input { width: 100%; }

/* ---- 换头像：4 张默认 + 一格「自己上传」，每格底下带名字 ----
   圆形缩略图，选中用品牌色描圈 + 右下角小勾；「上传」是虚线感的浅蓝格，
   自己传过照片时这一格也会亮起来（两种来源同一套状态）。
   名字在格子外面、圆圈底下，选中时名字也一起变品牌色，扫一眼就知道选了谁 */
.ava-pick { margin: 0 0 18px; }
.ava-lab {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.ava-lab em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.ava-row { display: flex; align-items: flex-start; gap: 6px; }
/* 一格 = 圆圈 + 底下的名字，纵向排；圆圈本身宽度封顶 52px，名字不撑破行 */
.ava-cell {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ava-opt {
  position: relative; flex: 0 0 auto; width: 100%; max-width: 52px; height: auto;
  aspect-ratio: 1; padding: 0;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1.5px var(--line-strong);
  transition: box-shadow .16s ease, transform .16s ease;
}
.ava-name {
  max-width: 100%; font-size: 10px; line-height: 1; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: color .16s ease;
}
.ava-cell.on .ava-name { color: var(--brand); font-weight: 700; }
/* 圆裁剪放在图片上，别放在按钮上：按钮要 overflow:visible 才能露出右下角的小勾 */
.ava-opt img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ava-opt:active { transform: scale(.94); }
.ava-opt.on { box-shadow: 0 0 0 2.5px var(--brand); }
.ava-opt.on .ava-tick { opacity: 1; transform: scale(1); }
.ava-tick {
  position: absolute; right: -1px; bottom: -1px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0; transform: scale(.55); transition: opacity .16s ease, transform .16s ease;
}
.ava-tick svg { width: 9px; height: 9px; }
.ava-up {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; background: var(--brand-soft); color: var(--brand);
  box-shadow: inset 0 0 0 1.5px rgba(47, 123, 255, .26);
}
.ava-up .ava-cam { display: block; width: 18px; height: 18px; }
.ava-up .ava-cam svg { width: 100%; height: 100%; }
.ava-up.on { box-shadow: 0 0 0 2.5px var(--brand); }
@media (max-width: 360px) {
  .ava-row { gap: 6px; }
  .ava-opt { max-width: 48px; }   /* 圆圈小一档，格子却没变窄：两圆之间的空隙才够呼吸 */
  .ava-name { font-size: 9.5px; }
}

/* 会员大卡：黑金邀请卡
   全站唯一一张深色卡 —— 「我的」是引导付费的页面，故意跟其它浅色页面拉开差别 */
.mh-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 15px 15px 16px; border-radius: var(--r-lg);
  background:
    radial-gradient(125% 95% at 97% 3%, rgba(230, 196, 126, .17), rgba(230, 196, 126, 0) 62%),
    linear-gradient(148deg, #2C3452 0%, #1E2540 48%, #161B2E 100%);
  border: 1px solid rgba(230, 196, 126, .22);
  box-shadow: 0 2px 4px rgba(20, 23, 31, .12), 0 20px 40px -22px rgba(24, 29, 48, .9);
  color: #F6EEDA;
}
.mh-glow {
  position: absolute; z-index: -1; right: -80px; top: -100px; width: 200px; height: 200px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(244, 220, 166, .18), rgba(244, 220, 166, 0) 70%);
}

.mh-head { display: flex; align-items: center; gap: 10px; }
.mh-head b {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
  color: #FFF7E6; white-space: nowrap;
}
.mh-tick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; }
.mh-sp {
  flex: none; display: grid; place-items: center;
  width: 13px; height: 13px; color: #F2DEB4; opacity: .8;
}
.mh-sp svg { width: 13px; height: 13px; display: block; }
.mh-marquee {
  position: relative; flex: 1; min-width: 0; height: 15px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent);
}
/* 轨道里放两份同样的文字，滚到 -50% 时正好接上第二份，视觉上无缝 */
.mh-track { display: flex; width: max-content; animation: mhRoll 42s linear infinite; }
.mh-track > span {
  white-space: nowrap; padding-right: 34px;
  font-size: 10.5px; color: rgba(246, 238, 218, .66);
}
@keyframes mhRoll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.mh-sub { font-size: 11px; color: rgba(246, 238, 218, .58); margin-top: 5px; }

.mh-row { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.mh-feats { display: flex; gap: 8px; flex: 1; min-width: 0; }
.mh-feat { flex: 0 0 auto; width: 42px; text-align: center; }
.mh-feat i {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 5px;
  border-radius: var(--r-md); color: #F2DEB4;
  background: linear-gradient(160deg, rgba(244, 220, 166, .28), rgba(244, 220, 166, .10));
  border: 1px solid rgba(230, 196, 126, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.mh-feat i svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mh-feat span { font-size: 9.5px; color: rgba(246, 238, 218, .62); white-space: nowrap; }

.mh-btn {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: #3B2A06;
  padding: 9px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #F8E4B4, #E4C078);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .14s;
}
.mh-btn:active { transform: scale(.96); }

/* 会员卡：淡香槟金
   手法和首页 6 张科目卡一致——浅色 tint 从左上角铺开、白色底、白边、同色系轻投影，
   只用"薄薄一层金"表达稀缺感，不整块铺满，避免俗气也叫「高端」 */
.mem-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px 16px; border-radius: var(--r-lg);
  background: linear-gradient(148deg, #FFF8E7 0%, rgba(255, 255, 255, 0) 62%), #fff;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 26px -14px rgba(190, 148, 52, .5), 0 2px 6px rgba(20, 22, 31, .03);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s;
}
.mem-card:active {
  transform: scale(.978);
  box-shadow: 0 4px 12px -10px rgba(190, 148, 52, .5), 0 1px 4px rgba(20, 22, 31, .04);
}
/* 已开通：香槟金渐变 + 右上角一道高光，像卡面反光 */
.mem-card.on {
  background:
    radial-gradient(130% 120% at 92% -22%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, #FCEFD0 0%, #F3DCA6 46%, #E7C87E 100%);
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    0 2px 6px rgba(150, 113, 32, .10),
    0 18px 34px -16px rgba(176, 132, 36, .6),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* 明细分卡故意不再压水印：右下角就是价格和按钮，水印钻到按钮底下反而显脏 */

.mem-ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #A97F22;
  background: linear-gradient(158deg, #FFFDF7, #FFF1D2);
  border: 1px solid rgba(210, 172, 86, .38);
  box-shadow: 0 6px 14px -8px rgba(180, 138, 40, .55), inset 0 1px 0 #fff;
}
.mem-ico svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.mem-card.on .mem-ico {
  color: #8A6414; border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(158deg, #fff, #FFF8E6);
  box-shadow: 0 8px 16px -8px rgba(150, 110, 20, .5), inset 0 1px 0 #fff;
}

.mem-body { flex: 1; min-width: 0; }
.mem-body b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 680; }
.mem-body > span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.mem-body .mem-state { color: #9A8A6A; }
.mem-card.on .mem-body { color: #52390B; }
.mem-card.on .mem-body > span { color: #8A6C2E; }
.mem-card.on .mem-body .mem-state { color: #6E5216; font-weight: 600; }

/* VIP 小标：金色小胶囊，带一层浅投影"浮"起来 */
.vip-tag {
  display: inline-flex; align-items: center;
  font-style: normal; font-size: 9px; font-weight: 800;
  letter-spacing: .7px; line-height: 1; padding: 3px 5.5px 3px 6px;
  border-radius: 999px; color: #7A560F;
  background: linear-gradient(160deg, #FFF6DC, #F2DCA4);
  box-shadow: 0 2px 6px -2px rgba(178, 136, 38, .55), inset 0 1px 0 #fff;
}
.mem-card.on .vip-tag {
  color: #61430C;
  background: linear-gradient(160deg, #FFF3CF, #E9C97F);
  box-shadow: 0 2px 6px -2px rgba(150, 110, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .75);
}

.mem-right { flex: 0 0 auto; text-align: right; }
.mem-price { font-size: 15.5px; font-weight: 720; letter-spacing: -.3px; color: #5A4310; }
.mem-price i { font-style: normal; font-size: 10px; font-weight: 500; color: #9A8A6A; }
.mem-card.on .mem-price i { color: #9A7C3A; }
.mem-pill {
  display: inline-block; margin-top: 5px;
  font-size: 11.5px; font-weight: 650; line-height: 1;
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(135deg, #EDD394, #D9AF55); color: #4E380A;
  box-shadow: 0 6px 14px -6px rgba(180, 138, 40, .75), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.mem-card.on .mem-pill {
  background: #fff; color: #7A560F;
  box-shadow: 0 4px 10px -4px rgba(150, 110, 20, .4);
}

/* 选择会员弹层：状态色和别处反过来
   未开通 = 整块香槟金（三档里最亮，负责拉人开通）
   已开通 = 收成近白（已经买了就不用再抢眼，续费交给右边那颗按钮） */
.mem-pick .mem-card {
  background: linear-gradient(148deg, #FFFDF6 0%, rgba(255, 255, 255, 0) 58%), #fff;
  border-color: rgba(226, 198, 138, .36);
  box-shadow: 0 10px 22px -18px rgba(176, 132, 36, .55), 0 2px 6px rgba(20, 22, 31, .03);
}
.mem-pick .mem-card:not(.on) {
  background:
    radial-gradient(130% 120% at 92% -22%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, #FCEFD0 0%, #F3DCA6 46%, #E7C87E 100%);
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    0 2px 6px rgba(150, 113, 32, .10),
    0 18px 34px -16px rgba(176, 132, 36, .6),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* 金的这一档（未开通）：图标、文字、VIP 标、按钮全按金卡走 */
.mem-pick .mem-card:not(.on) .mem-ico {
  color: #8A6414; border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(158deg, #fff, #FFF8E6);
  box-shadow: 0 8px 16px -8px rgba(150, 110, 20, .5), inset 0 1px 0 #fff;
}
.mem-pick .mem-card:not(.on) .mem-body { color: #52390B; }
.mem-pick .mem-card:not(.on) .mem-body > span { color: #8A6C2E; }
.mem-pick .mem-card:not(.on) .mem-body .mem-state { color: #6E5216; font-weight: 600; }
.mem-pick .mem-card:not(.on) .vip-tag {
  color: #61430C;
  background: linear-gradient(160deg, #FFF3CF, #E9C97F);
  box-shadow: 0 2px 6px -2px rgba(150, 110, 20, .45), inset 0 1px 0 rgba(255, 255, 255, .75);
}
.mem-pick .mem-card:not(.on) .mem-price i { color: #8A6C2E; }
.mem-pick .mem-card:not(.on) .mem-pill {
  background: linear-gradient(135deg, #C89C3E, #A87A21); color: #FFFBF0;
  box-shadow: 0 6px 14px -6px rgba(120, 86, 12, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* 白的那一档（已开通）：把金卡那一套逐个还原成浅色 */
.mem-pick .mem-card.on .mem-ico {
  color: #A97F22;
  border-color: rgba(210, 172, 86, .38);
  background: linear-gradient(158deg, #FFFDF7, #FFF1D2);
  box-shadow: 0 6px 14px -8px rgba(180, 138, 40, .55), inset 0 1px 0 #fff;
}
.mem-pick .mem-card.on .mem-body { color: var(--text); }
.mem-pick .mem-card.on .mem-body > span { color: var(--muted); }
.mem-pick .mem-card.on .mem-body .mem-state { color: #9A8A6A; font-weight: 400; }
.mem-pick .mem-card.on .vip-tag {
  color: #7A560F;
  background: linear-gradient(160deg, #FFF6DC, #F2DCA4);
  box-shadow: 0 2px 6px -2px rgba(178, 136, 38, .55), inset 0 1px 0 #fff;
}
.mem-pick .mem-card.on .mem-price i { color: #A99C86; }
.mem-pick .mem-card.on .mem-pill {
  background: #fff; color: #8A6414;
  border: 1px solid rgba(214, 178, 110, .55);
  box-shadow: 0 2px 8px -4px rgba(150, 110, 20, .3);
}

/* 账号旁的会员标签 */
.me-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* 两个标签捆成一组：窄屏要换行就整体换，不会剩一个孤零零挂在第二行 */
.me-badges { display: inline-flex; align-items: center; gap: 6px; }
.vip-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  color: #7A560F;
  background: linear-gradient(140deg, #FFF7E2, #F4DFAE);
  box-shadow: 0 3px 8px -3px rgba(178, 136, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* 两个都开 → 全站会员：实心金，比单科更重一档 */
.vip-badge.full {
  color: #4E380A;
  background: linear-gradient(140deg, #F0D492, #D6AC4E);
  box-shadow: 0 4px 12px -4px rgba(160, 120, 30, .65), inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* 管理员标签：排在会员标后面，蓝底蓝字，尺寸和会员标完全对齐 */
.admin-badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  color: #1F63E0;
  background: linear-gradient(140deg, #EAF2FF, #D8E6FF);
  box-shadow: 0 3px 8px -4px rgba(47, 123, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* 超级管理员：比普通管理员高一档，紫底，一眼能分出谁管人 */
.admin-badge.super {
  color: #6B3FA0;
  background: linear-gradient(140deg, #F4EAFF, #E5D5FF);
  box-shadow: 0 3px 8px -4px rgba(124, 58, 237, .45), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* 窄屏把两个标签再收 1px，保证「昵称 + 全站会员 + 管理员」还在同一行 */
@media (max-width: 360px) {
  .vip-badge, .admin-badge { font-size: 10px; padding: 3.5px 7px; }
  .me-name { gap: 6px; }
  .me-badges { gap: 5px; }
}

.mem-code {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 12px; border-radius: var(--r-md);
  border: 1px dashed var(--line-strong); background: rgba(255, 255, 255, .6);
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.mem-code b { color: var(--brand); font-weight: 650; }
.mem-code:active { background: var(--brand-soft); }

/* ---------- 会员弹层 ---------- */
.mem-hero {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #FFF9EA 0%, #FDF1D6 100%);
  border: 1px solid rgba(226, 195, 128, .45);
  margin-bottom: 14px;
}
.mem-hero-p { font-size: 25px; font-weight: 750; color: #6B4E12; letter-spacing: -.8px; line-height: 1.1; }
.mem-hero-p i { font-style: normal; font-size: 12px; font-weight: 500; color: #9A7C3A; letter-spacing: 0; }
.mem-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #fff; color: #7A560F;
  box-shadow: 0 3px 8px -3px rgba(178, 136, 38, .5);
}

.mem-feat { display: grid; gap: 8px; margin-bottom: 16px; }
.mem-feat div { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--text); }
.mem-feat i {
  flex: 0 0 16px; height: 16px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700;
  background: var(--ok-soft); color: var(--ok);
}

.mem-note {
  background: #FFF8E8; color: #8A5B00;
  border-radius: var(--r-md); padding: 12px 14px;
  font-size: 12.5px; line-height: 1.6; margin-bottom: 12px;
}

.mem-input {
  width: 100%; height: 52px; margin-bottom: 8px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: #FAFAF9; color: var(--text);
  text-align: center; font-size: 17px; font-weight: 650; letter-spacing: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
}
.mem-input::placeholder { color: #C7CBD4; letter-spacing: 1px; font-weight: 500; }
.mem-input:focus { outline: none; border-color: var(--brand); background: #fff; }

.mem-tip { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; min-height: 18px; }
.mem-tip.ok { color: var(--ok); }
.mem-tip.bad { color: var(--bad); }

.mem-qr {
  width: 208px; height: 208px; margin: 2px auto 12px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20, 23, 31, .04), 0 10px 28px rgba(20, 23, 31, .08);
}
.mem-qr svg { display: block; width: 100%; height: 100%; border-radius: var(--r-sm); }

.pay-stat { text-align: center; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.pay-stat.bad { color: var(--bad); }

.mem-acts { display: grid; gap: 9px; }

/* 弹层里的低权重取消按钮：只留文字，避免和主操作抢注意力 */
.mem-cancel {
  display: block; width: 100%; padding: 11px 0 2px;
  font-size: 13px; color: var(--faint); background: none; cursor: pointer;
}
.mem-cancel:active { color: var(--brand); }
.mem-state .nb { white-space: nowrap; }

/* 支付二维码：服务端出 GIF，微信里可长按识别 */
.mem-qr img { display: block; width: 100%; height: 100%; border-radius: var(--r-sm); }
.pay-hint { text-align: center; font-size: 12px; color: var(--faint); margin: -2px 0 12px; line-height: 1.5; }

/* 会员区小屏适配（放在会员样式之后，才能覆盖上面的默认值） */
@media (max-width: 360px) {
  .mh-feats { gap: 6px; }
  .mh-feat { width: 36px; }
  .mh-feat i { width: 34px; height: 34px; border-radius: var(--r-md); }
  .mh-feat i svg { width: 16px; height: 16px; }
  .mh-feat span { font-size: 9px; }
  .mh-btn { font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 320px) {
  .mh-row { flex-wrap: wrap; }
  .mh-btn { width: 100%; margin-top: 12px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-track { animation: none; }
}

/* ---------- 答题页：收藏按钮 ---------- */
.fav-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 8px 14px; border-radius: 999px;
  color: #6E7480; background: #F4F5F9; border: 1px solid transparent;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.fav-btn:active { transform: scale(.96); }
/* 已收藏：金黄色 + 一圈暖光，和「未收藏」一眼能分开 */
.fav-btn.on {
  color: #8A5E06;
  background: linear-gradient(135deg, #FFF6DA, #FBE3A2);
  border-color: rgba(214, 172, 72, .45);
  box-shadow: 0 6px 16px -8px rgba(196, 148, 30, .75), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.fav-btn.busy { opacity: .6; pointer-events: none; }
.fav-btn.pop { animation: favPop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes favPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fav-btn.pop { animation: none; }
}

/* ---------- 我的：常见问题 / 订单 / 商务合作 ---------- */
.faq-list { display: grid; gap: 8px; margin: 12px 0; }
.faq-item {
  background: #F4F8FF; border: 1px solid #E9F0FB;
  border-radius: var(--r-lg); padding: 0 14px;
}
.faq-item summary {
  list-style: none; cursor: pointer; padding: 13px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 650; color: #26293A; line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '＋'; flex: 0 0 auto; color: #B3B7C4; font-weight: 600; font-size: 13px; }
.faq-item[open] summary { color: #1F63E0; }
.faq-item[open] summary::after { content: '－'; color: #8E7BE8; }
.faq-a { font-size: 12.5px; line-height: 1.75; color: #5B6070; padding: 0 0 13px; }

.order-list { display: grid; gap: 8px; margin: 12px 0; }
.order-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px 14px;
}
.order-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.order-main b { font-size: 13.5px; font-weight: 680; color: #26293A; }
.order-main b i { font-style: normal; font-size: 10.5px; color: #9CA2AE; margin-left: 6px; font-weight: 500; }
.order-main span { font-size: 11.5px; color: var(--muted); }
.order-main .order-no { font-size: 10.5px; color: #B3B7C4; font-variant-numeric: tabular-nums; word-break: break-all; }
.order-right { flex: 0 0 auto; display: grid; gap: 5px; justify-items: end; }
.order-right b { font-size: 14px; font-weight: 720; letter-spacing: -.2px; }
.order-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.order-tag.paid { background: #E9F8F1; color: #12A15C; }
.order-tag.wait { background: #FFF6E6; color: #B47800; }
.order-tag.off { background: #F3F4F7; color: #8A94A6; }
.order-tag.refund { background: #EDF2FF; color: #4F7CF7; }

.biz-list { display: grid; gap: 8px; margin: 12px 0; }
.biz-item {
  background: #F4F8FF; border: 1px solid #E9F0FB;
  border-radius: var(--r-md); padding: 11px 14px; display: grid; gap: 2px;
}
.biz-item b { font-size: 13.5px; font-weight: 680; color: #26293A; }
.biz-item span { font-size: 11.5px; color: #8A94A6; line-height: 1.5; }
.biz-wx {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #FFF9EA, #FDF1D6);
  border: 1px solid rgba(226, 195, 128, .45);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 14px;
}
.biz-wx span { display: block; font-size: 11px; color: #9A7C3A; }
.biz-wx b { font-size: 14px; color: #6B4E12; font-variant-numeric: tabular-nums; }

.biz-pill {
  display: block; margin: -2px auto 16px; padding: 10px 20px;
  font-size: 13px; font-weight: 600; color: #4B5064;
  background: #fff; border-radius: 999px; border: 1px solid var(--line);
  box-shadow: 0 8px 18px -12px rgba(20, 22, 31, .45);
  transition: transform .14s;
}
.biz-pill:active { transform: scale(.97); }

/* ================= 首页吉祥物「小蓝」 =================
   纯 SVG + CSS 绘制，无图片请求。动画只跑 transform / opacity。 */

.home-hero {
  display: flex; align-items: center; gap: 4px;
  min-height: 108px;                 /* 精灵挪到 banner 上沿后，这块高度还得留着，不然 banner 会顶到导航条 */
  padding: 2px 2px 8px;
  position: relative;
}
.hh-l { flex: 1; min-width: 0; padding-right: 100px; }   /* 右边这 100px 是给小动物留的位置 */
.hh-k {
  display: inline-block; font-size: 12.5px; font-weight: 650;
  color: var(--brand); letter-spacing: .3px; line-height: 1.2;
}
.hh-l h2 {
  margin: 4px 0 5px; font-size: 21px; font-weight: 700;
  letter-spacing: -.5px; line-height: 1.2; color: var(--text);
}
.hh-l p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* 小动物的落脚点：骑在 banner 上沿。
   容器底边 = banner 上沿下方 24% 宽度处（SVG 里 y=152 是上沿，200 是底边 → 48/200=0.24），
   这样不管 banner 多高，爪子都正好压在卡片正面 1/4 的高度里。 */
.ban-stage { position: relative; }
.perch {
  --mz-w: 122px;
  position: absolute; right: 14px; z-index: 3;
  bottom: calc(100% - var(--mz-w) * .24);
  width: var(--mz-w);
  outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ---------- 图片版小精灵（题库页的小鸭子） ----------
   宽度只定 --mz-w，高度按素材比例自动，不会拉变形。
   两种姿势靠 pose 类区分落位，切素材只改 app.js 里的 MZ_IMG： */

/* 站姿：底边就是鸭脚，往下压 11px 让脚掌踩进卡片正面 */
.perch-img.perch-stand {
  --mz-w: 88px;
  right: 12px;
  bottom: calc(100% - 11px);
}

/* 探头：底边是两只手和领子。压进 18px，手背和领尖落在卡片正面上，
   看起来是从卡片后面趴出来，而不是浮在半空 */
.perch-img.perch-peek {
  --mz-w: 152px;
  right: 14px;                    /* 避开卡片圆角，手不悬在弧线上 */
  bottom: calc(100% - 18px);
}
/* 四只鸭子各自的落位。素材自带透明留白（底部 8~36px 不等），
   所以 bottom 里的「压进量」= 想让内容底边压进卡片的 2px + 那张图的底部留白（按渲染宽度换算），
   算完的结果就是：手 / 书的下沿正好搭在卡片上沿，不会被切出一条平线，也不会浮在上头。 */
.perch-img.perch-peek.perch-cat { --mz-w: 152px; --mz-drop: 18.5px; right: 2px; bottom: calc(100% - var(--mz-drop)); }  /* 题库：两手撑着上沿 */
.perch-img.perch-peek.perch-dog { --mz-w: 154px; --mz-drop: 12.9px; right: 3px; bottom: calc(100% - var(--mz-drop)); }  /* 网课：手指 + 领巾 */
.perch-img.perch-peek.perch-fox { --mz-w: 140px; --mz-drop: 13px; right: 4px; bottom: calc(100% - var(--mz-drop)); }  /* 资料：书 + 手。图里带一摞书，视觉上比另外三只大，所以收小到 140，并再往下压 9px */
.perch-img.perch-peek.perch-owl { --mz-w: 142px; --mz-drop: 10.5px; right: 7px; bottom: calc(100% - var(--mz-drop)); }  /* 资讯：单手扶额 */
/* --mz-drop = 图片底边落到卡片上沿以下的距离，按素材里「身体被裁平的那条横线」算：
   四张图都是把身子齐平切在某个 y（quiz 309 / course 290 / materials 356 / news 333，原图 500 宽），
   除这条平线之外，只有几根指尖比它更低。所以 drop = (图高-1-平线) × 渲染宽度/500，
   这样平线正好落在 banner 上沿、指尖搭到卡片正面 —— 是「坐上去」，不是悬在上头留一道缝。
   人整只完整露出，不做任何裁切、不做羽化。 */
/* 图片版：外面一层 .mz-img 当容器，里面是原图 + 眨眼层。
   动画（点击 pop）挂在容器上，眼皮跟着一起动，不会跟身子错开 */
.perch-img .mz-img {
  position: relative; display: block; width: 100%;
  filter: drop-shadow(0 4px 8px rgba(24, 58, 110, .12));
  transform-origin: 50% 100%;
}
.perch-img .mz-img > img.mz-shot {
  display: block; width: 100%; height: auto;
  -webkit-user-select: none; user-select: none;
}
.perch-img .mz-img.happy { animation: mzImgPop .62s cubic-bezier(.34, 1.56, .64, 1); }

/* 眨眼层：一小块和脸颊同色的椭圆，正好盖在瞳孔上（位置/尺寸由 JS 按原图比例给）。
   平时 scaleY(0) 完全收在眼睛上沿，动画里压下来盖住瞳孔再弹回去 —— 全屏只有眼睛在动，
   原图一个像素都没改。颜色跟脸颊同色，所以睁眼瞬间看不到色块，只觉得它眨了下眼。 */
.perch-img .mz-lid {
  position: absolute;
  left: var(--lid-x); top: var(--lid-y);
  width: var(--lid-w); height: var(--lid-h);
  border-radius: 50%;
  background: var(--lid-c, #F0EFF6);
  box-shadow: inset 0 -1px 1.5px rgba(120, 130, 170, .08);   /* 一点下睑阴影，闭上时更像眼皮 */
  filter: blur(.5px);                                        /* 边缘化开，别看出是个白点 */
  transform: scaleY(0); transform-origin: 50% 0;
  animation: mzImgBlink 5.4s infinite;
  animation-delay: var(--lid-delay, 1.4s);
  pointer-events: none;
}
@keyframes mzImgBlink {
  0%, 92.2%   { transform: scaleY(0); }
  93.4%       { transform: scaleY(1); }   /* 闭眼：约 130ms */
  95.8%       { transform: scaleY(1); }
  97.2%, 100% { transform: scaleY(0); }
}
/* 镜头/系统减少动态效果时，不要眨 */
@media (prefers-reduced-motion: reduce) {
  .perch-img .mz-lid { animation: none; transform: scaleY(0); }
}
@keyframes mzImgBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-1.2deg); }
}
@keyframes mzImgPop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-10px) scale(1.06, .96); }
  100% { transform: translateY(0) scale(1); }
}
/* ---------- 首页滚动 banner ----------
   圆角只做在「窗口」上（.hban），每张卡片自己不带圆角也不带阴影：
   这样滑动切换时，不论画面停在哪一帧，看到的都是一个完整的圆角矩形，
   不会从边缝里露出被裁掉的直角和被切一半的投影。
   阴影挂在窗口这一层（和「每日一练」卡同一套），overflow 只裁子元素，裁不到自己的投影。 */
.hban {
  position: relative; z-index: 2; margin: 2px 0 14px;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 8px 24px rgba(30, 80, 160, .08);
}
.hban-track {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hban-track::-webkit-scrollbar { display: none; }
.hb-slide {
  position: relative; flex: 0 0 100%; height: 112px;
  overflow: hidden;
  scroll-snap-align: center;
  background: #EAF2FF;
}
.hb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% center;
  pointer-events: none; user-select: none;
}
/* 左侧压一层白纱，保证中文在任何底图上都读得清 */
.hb-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .94) 0%,
    rgba(255, 255, 255, .80) 34%,
    rgba(255, 255, 255, .28) 55%,
    rgba(255, 255, 255, 0) 68%);
}
.hb-txt {
  position: absolute; left: 16px; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  max-width: 56%; pointer-events: none;
}
.hb-tag {
  align-self: flex-start;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: #2F7BFF; background: rgba(47, 123, 255, .10);
  padding: 2px 7px; border-radius: 6px; margin-bottom: 1px;
}
.hb-txt b { font-size: 14.5px; font-weight: 750; color: #12203C; letter-spacing: -.2px; line-height: 1.3; }
.hb-txt em { font-style: normal; font-size: 11px; color: #64748E; line-height: 1.3; }
.hban-dots {
  position: absolute; left: 16px; bottom: 8px;
  display: flex; gap: 4px; padding: 3px 5px; border-radius: 99px;
  background: rgba(255, 255, 255, .5);
}
.hban-dots i {
  width: 5px; height: 5px; border-radius: 99px;
  background: rgba(20, 40, 80, .25);
  transition: width .22s ease, background .22s ease;
}
.hban-dots i.on { width: 13px; background: #2F7BFF; }

@media (prefers-reduced-motion: reduce) {
  .hban-track { scroll-behavior: auto; }
  .hban-dots i { transition: none; }
}
@media (max-width: 360px) {
  .hb-slide { height: 104px; }
  .hb-txt b { font-size: 13.5px; }
}

/* ---- 本体 ---- */
.mz {
  display: block; width: 100%; height: auto; overflow: visible;
  /* 中性投影：三只颜色各不相同，投影再跟着页面配色走就会脏 */
  filter: drop-shadow(0 2px 3px rgba(20, 40, 80, .10)) drop-shadow(0 6px 12px rgba(20, 40, 80, .08));
}
/* 只有「头」在呼吸，爪子钉在卡片上不动，不然会像爪子从卡片上滑下来 */
.mz-head { animation: mzBob 4.4s ease-in-out infinite; transform-origin: 100px 152px; }
@keyframes mzBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.8px); }
}
/* 爪子只做「往下压」的挤压：顶部是旋转原点，永远咬着卡片上沿不脱开。
   左右各错开半拍，看起来像它把爪子轻轻换了个重心，而不是两块贴纸一起呼吸 */
.mz-paw-l, .mz-paw-r { transform-box: fill-box; transform-origin: 50% 0; }
.mz-paw-l { --paw-tilt: -3.5deg; animation: mzPaw 5.6s ease-in-out infinite; }
.mz-paw-r { --paw-tilt: 3.5deg;  animation: mzPaw 5.6s ease-in-out infinite -2.8s; }
@keyframes mzPaw {
  0%, 100% { transform: rotate(var(--paw-tilt)) scale(1, 1); }
  46%      { transform: rotate(var(--paw-tilt)) scale(1.035, .955); }
}
.mz-shadow { animation: mzShadow 4.4s ease-in-out infinite; }
@keyframes mzShadow {
  0%, 100% { opacity: .95; }
  50%      { opacity: .72; }
}

/* 眼球跟随指针：只是轻轻晃一下，幅度控制在 1~2 个像素的观感 */
.mz-look {
  transform: translate(calc(var(--lx, 0) * 2.4px), calc(var(--ly, 0) * 1.8px));
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.mz-eye {
  transform-box: fill-box; transform-origin: center;
  animation: mzBlink 5.6s infinite;
}
@keyframes mzBlink {
  0%, 91.5%, 96.5%, 100% { transform: scaleY(1); }
  94%                    { transform: scaleY(.06); }
}

/* ---- 开心表情（点击时 0.9 秒） ---- */
.mz-eyes-happy { opacity: 0; transition: opacity .14s; }
.mz-mouth-happy {
  opacity: 0; transform: scale(.55);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .14s, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.mz.happy .mz-eyes { opacity: 0; }
.mz.happy .mz-eyes-happy { opacity: 1; }
.mz.happy .mz-mouth { opacity: 0; }
.mz.happy .mz-mouth-happy { opacity: 1; transform: scale(1); }
.mz.happy .mz-head { animation: mzPop .56s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mzPop {
  0%   { transform: translateY(0) scale(1, 1); }
  32%  { transform: translateY(3px) scale(1.05, .94); }
  64%  { transform: translateY(-9px) scale(.97, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ---- 说话气泡 ----
   bottom 用的是「容器高度的百分比 + 3px」：三只的耳朵高度不一样，
   头顶离容器顶部差多少，就用各自的比例托住它，气泡永远贴在头顶上方 3px，
   既不会飘到标题栏上去，也不会离脑袋太远。 */
.mz-bubble {
  position: absolute; right: 42%; z-index: 6;
  bottom: calc(84.4% + 2px);          /* 默认小狗：立耳之后耳朵跟狐狸差不多高 */
  width: max-content; max-width: none;
  padding: 6px 10px;
  /* 台词最长 12 个字，一行放得下：一旦折成两行，气泡上半截就会顶进标题栏 */
  white-space: nowrap;
  /* 四角里只有「右下角」是小圆角——那一角正对着小精灵，像从它嘴边冒出来的 */
  border-radius: 12px 12px 4px 12px;
  background: #fff; color: var(--text);
  font-size: 11px; font-weight: 560; line-height: 1.4; letter-spacing: .1px;
  box-shadow: 0 10px 24px -10px rgba(20, 33, 60, .38), 0 0 0 1px rgba(47, 123, 255, .10);
  opacity: 0; transform: translateY(5px) scale(.92);
  transform-origin: 100% 100%;
  transition: opacity .18s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.perch-cat .mz-bubble { bottom: calc(81.2% + 2px); }   /* 猫立耳最高 */
.perch-dog .mz-bubble { bottom: calc(84.4% + 2px); }   /* 狗立耳 */
.perch-fox .mz-bubble { bottom: calc(84.4% + 2px); }   /* 狐狸尖耳 */
.perch-owl .mz-bubble { bottom: calc(80.4% + 2px); }   /* 猫头鹰耳羽略矮 */
/* 换成图片鸭子后没有「耳朵」这个概念了。四页统一一个位置：气泡底边落在图片顶边下方 24px，
   正好贴在鸭帽上沿（题库页验证过的那一档），别的页面不再各按各的比例飘上去。 */
.perch.perch-img .mz-bubble { bottom: calc(100% - 24px); }
/* 资料页的鸭子身子比别的矮一截，同一个 24px 看起来偏高：单独压到 34px，并往左收 4%，
   让气泡落在标题下方、鸭子左上方的空处，不顶着鸭帽和书 */
.perch.perch-img.perch-fox .mz-bubble { bottom: calc(100% - 29px); right: 50%; }
.mz-bubble.show { opacity: 1; transform: translateY(0) scale(1); }

/* ---- 点击迸出的星星 ---- */
.mz-spark {
  position: absolute; left: 50%; top: 40%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: #FFC24B;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  pointer-events: none; opacity: 0;
  animation: mzSpark .72s cubic-bezier(.22, .8, .3, 1) forwards;
  animation-delay: var(--dl, 0s);
}
@keyframes mzSpark {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.9) rotate(130deg); }
}

@media (max-width: 360px) {
  .perch:not(.perch-img) { --mz-w: 106px; }
  .perch-img.perch-stand { --mz-w: 82px; }
  .perch-img.perch-peek { --mz-w: 122px; }
  /* 四只鸭子的宽度各带一个类，特异性更高，窄屏要单独再压一档；
     压进量跟着宽度等比缩（素材的底部留白是按图宽算的），不然手会飘起来 */
  .perch-img.perch-peek.perch-cat { --mz-w: 120px; --mz-drop: 14.6px; right: 2px; bottom: calc(100% - var(--mz-drop)); }
  .perch-img.perch-peek.perch-dog { --mz-w: 122px; --mz-drop: 10.2px; right: 3px; bottom: calc(100% - var(--mz-drop)); }
  .perch-img.perch-peek.perch-fox { --mz-w: 112px; --mz-drop: 11px; right: 4px; bottom: calc(100% - var(--mz-drop)); }
  .perch-img.perch-peek.perch-owl { --mz-w: 112px; --mz-drop:  8.3px; right: 6px; bottom: calc(100% - var(--mz-drop)); }
  .hh-l h2 { font-size: 19px; }
  .mz-bubble { font-size: 10.5px; }          /* 单行显示后不再限制宽度，只把字号降一点 */
  /* 窄屏鸭子小一号、上面那行问候语却还是同样的字号，气泡要再收一点并抬高，别压到标题 */
  .perch.perch-img .mz-bubble { bottom: calc(100% - 12px); right: 30%; font-size: 10px; }
  /* 窄屏「资料都在这，随手翻」这行字比另外三页都长，气泡再往下压就会盖住「翻」字；
     这一档把气泡抬到鸭帽上方，跟「晚上好」并排，反而干净 */
  .perch.perch-img.perch-fox .mz-bubble { bottom: calc(100% + 6px); right: 26%; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-head, .mz-shadow, .mz-eye, .mz-paw-l, .mz-paw-r { animation: none; }
  .perch-img .mz-img { animation: none; }
  .mz-paw-l, .mz-paw-r { transform: rotate(var(--paw-tilt)); }
  .mz-look { transition: none; }
}

/* =================================================================
   真题试卷：列表页（按科目分组）+ 每套卷一行
   ================================================================= */
/* 顶部汇总条：淡蓝（跟题库页同一色系，之前那版是紫的） */
.pp-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(132deg, #E9F2FF 0%, #F4F9FF 52%, #FCFDFF 100%);
  border: 1px solid rgba(47, 123, 255, .14);
  box-shadow: 0 12px 26px -20px rgba(47, 123, 255, .9);
}
.pp-hero-l { min-width: 0; }
.pp-hero-l b { display: block; font-size: 15.5px; font-weight: 750; color: #1D4E9C; letter-spacing: -.2px; }
.pp-hero-l span { display: block; margin-top: 3px; font-size: 11.5px; color: #6C83A6; }
.pp-hero-r { flex: 0 0 auto; text-align: center; }
.pp-hero-r b {
  display: block; font-size: 21px; font-weight: 800; color: #2F7BFF;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.pp-hero-r span { font-size: 10.5px; color: #8299B8; }

/* 科目横排：复用 .grp-tabs 的胶囊，这里只微调间距 */
.pp-tabs { margin-bottom: 2px; padding-bottom: 8px; }
.pp-hint-row { justify-content: flex-end; margin: 0 4px 10px; }
.pp-hint-row span { margin-left: 0; }

.pp-list { display: flex; flex-direction: column; gap: 9px; }
.pp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  cursor: pointer; transition: transform .14s, border-color .14s;
}
.pp-row:active { transform: scale(.987); border-color: #CFE1FB; }
.pp-no {
  flex: 0 0 auto; padding: 4px 8px; border-radius: 8px;
  background: var(--t, #EAF2FF); color: var(--c, #2F7BFF);
  font-size: 11.5px; font-weight: 750; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-l { flex: 1; min-width: 0; }
.pp-l b {
  display: block; font-size: 13.5px; font-weight: 700; color: #16213C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-l span { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); }
.pp-state { flex: 0 0 auto; font-size: 11px; font-weight: 650; color: #9AA1B4; }
.pp-state.on { color: #2F7BFF; }
.pp-go { color: #C2C7D4; font-size: 20px; line-height: 1; }

/* =================================================================
   网课 / 资料：底栏一级页面（占位）
   ================================================================= */
.hub-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 18px 16px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--t, #EFF6FF) 0%, #FFFFFF 84%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(30, 80, 160, .07);
}
.hub-ic {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 11px;
  background: #fff; color: var(--c, var(--brand));
  box-shadow: 0 8px 18px -12px rgba(30, 70, 150, .55);
}
.hub-ic svg { width: 23px; height: 23px; }
.hub-hero > b { display: block; font-size: 17px; font-weight: 780; letter-spacing: -.3px; color: #0B0E17; }
.hub-hero > span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.hub-bullets { display: flex; gap: 8px; margin-top: 14px; }
.hub-bullets > div {
  flex: 1; min-width: 0; padding: 9px 10px;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .74);
}
.hub-bullets b { display: block; font-size: 11.5px; font-weight: 700; color: #24314F; }
.hub-bullets i { display: block; margin-top: 2px; font-style: normal; font-size: 10px; color: #8A94A6; line-height: 1.4; }

.hub-soon {
  margin-top: 14px; padding: 15px 16px; border-radius: var(--r-lg);
  background: #fff; border: 1px dashed var(--line-strong);
}
.hub-tag {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 10.5px; font-weight: 700;
}
.hub-soon p { margin: 9px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.hub-soon .hub-on { color: var(--ok); }

@media (max-width: 360px) {
  .hub-bullets { gap: 6px; }
  .hub-bullets > div { padding: 8px 8px; }
  .hub-bullets i { font-size: 9.5px; }
}

/* =================================================================
   网课页：整体镜像题库页，但主题色换成淡绿
   只覆写页面骨架的颜色（hero / 续看卡 / 每日一学 / banner 阴影）；
   三张科目卡沿用各自的科目配色，和题库页保持一致。
   ================================================================= */
.theme-green { --brand: #16A572; --brand-soft: #E2F6EC; }
.theme-green .hh-k { color: #16A572; }
.theme-green .hban { box-shadow: 0 8px 24px rgba(22, 120, 80, .09); }

.theme-green .draft-card {
  background: linear-gradient(135deg, #E7F8EF 0%, #EAF8F2 100%);
  border-color: rgba(22, 165, 114, .18);
  box-shadow: 0 6px 18px rgba(22, 165, 114, .08);
}
.theme-green .draft-card .dc-k { color: #16A572; }
.theme-green .draft-card .dc-bar { background: rgba(22, 165, 114, .16); }
.theme-green .draft-card .dc-bar i { background: #16A572; }
.theme-green .draft-card .dc-go { background: #16A572; }

/* 每日一学：荧光笔与按钮换成绿色，数据底板换成淡绿 */
.theme-green .daily-head h3::after {
  background: linear-gradient(90deg, rgba(146, 224, 186, .95), rgba(22, 165, 114, .92));
}
.theme-green .daily-stats { background: #F0FAF4; }
.theme-green .daily-acts .btn {
  background: linear-gradient(135deg, #4FC88F, #16A572);
  box-shadow: 0 8px 18px rgba(22, 165, 114, .24);
}
.theme-green .daily-acts .btn.plain { background: #fff; border: 1px solid #DBEFE4; color: #16213C; box-shadow: none; }

/* 观看进度卡：顶部总进度条 + 每科一行 + 总共一行 */
.watch-card { padding: 4px 16px 14px; }
/* 总进度条：共 N 节 / 已看 N 节，百分比小胶囊骑在填充端边缘 */
.wp-progress { padding: 12px 0 14px; border-bottom: 1px solid #EFF4F1; }
.wpp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 9px;
}
.wpp-head span { font-size: 12.5px; font-weight: 700; color: #16213C; }
.wpp-head b {
  font-size: 12px; font-weight: 600; color: #5E7A6E;
  font-variant-numeric: tabular-nums; letter-spacing: -.1px;
}
.wpp-track {
  position: relative; height: 12px; border-radius: 99px;
  background: #E3F3EC;               /* 空轨道：淡绿灰 */
  box-shadow: inset 0 1px 2px rgba(16, 90, 60, .07);
}
.wpp-track i {
  position: absolute; top: 0; bottom: 0; left: 0;
  min-width: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #43CB90 0%, #14A06E 100%);
  box-shadow: 0 2px 6px -2px rgba(20, 160, 110, .55);
  transition: width .45s cubic-bezier(.3, .8, .3, 1);
}
.wpp-track em {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-style: normal; font-size: 10px; font-weight: 800; color: #0E7A52;
  background: #fff; border: 1px solid rgba(20, 160, 110, .35);
  padding: 1.5px 6px; border-radius: 99px;
  box-shadow: 0 2px 5px -2px rgba(16, 90, 60, .35);
  font-variant-numeric: tabular-nums; letter-spacing: -.1px;
  transition: left .45s cubic-bezier(.3, .8, .3, 1);
  pointer-events: none; white-space: nowrap;
}
.wp-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid #EFF4F1;
}
.wp-row span { font-size: 13.5px; font-weight: 650; color: #16213C; }
.wp-row b {
  font-size: 14.5px; font-weight: 750; color: #16A572;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}
.wp-row b i, .wp-total b i {
  font-style: normal; font-size: 11px; font-weight: 500;
  color: #8A94A6; margin-left: 2px; letter-spacing: 0;
}
.wp-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 13px; }
.wp-total span { font-size: 12.5px; color: #6B7A93; }
.wp-total b {
  font-size: 20px; font-weight: 800; color: #0E7A52;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}

/* 每科总时长，跟在「已看 X 分钟」右边，用灰字压住，不抢主数字 */
.wp-row em {
  font-style: normal; font-size: 11.5px; color: #9AA8B8;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   网课 · 课程目录页：科目头 + 章折叠 + 课时行（只给目录和时长）
   ================================================================= */
.cl-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, #E9F8F1 0%, #F5FCF8 58%, #FFFFFF 100%);
  border: 1px solid #E1F1E9; border-radius: 22px;
  padding: 18px 16px 15px; box-shadow: 0 12px 28px -22px rgba(14, 120, 80, .7);
}
/* 科目插图不再占头顶位置，改成卡片底纹：一大一小、各自转个角度、压到很淡。
   边缘用 mask 柔化，避免被卡片裁出一条生硬的直边；内容统一压在装饰上面 */
.cl-hero-deco {
  position: absolute; z-index: 0; pointer-events: none;
  right: -22px; top: -34px; width: 132px; height: 132px;
  opacity: .08; transform: rotate(-13deg); filter: saturate(.72);
  -webkit-mask-image: radial-gradient(circle at 60% 42%, #000 42%, rgba(0, 0, 0, .45) 72%, transparent 93%);
  mask-image: radial-gradient(circle at 60% 42%, #000 42%, rgba(0, 0, 0, .45) 72%, transparent 93%);
}
.cl-hero-deco.sm {
  right: -6px; top: auto; bottom: -18px; width: 62px; height: 62px;
  opacity: .07; transform: rotate(24deg);
}
.cl-hero-deco img { width: 100%; height: 100%; display: block; }
.cl-hero > *:not(.cl-hero-deco) { position: relative; z-index: 1; }

.cl-hero-top { display: flex; align-items: center; gap: 8px; }
.cl-hero-top b {
  font-size: 19px; font-weight: 800; color: #12203A; letter-spacing: -.5px; line-height: 1.2;
}
.cl-hero-tag {
  font-style: normal; font-size: 10.5px; font-weight: 700; color: #12986A;
  background: rgba(18, 152, 106, .1); border: 1px solid rgba(18, 152, 106, .14);
  border-radius: 999px; padding: 2.5px 7px; letter-spacing: .2px; white-space: nowrap;
}
.cl-hero-num { display: flex; gap: 9px; margin-top: 14px; }
.cl-hero-num > div {
  flex: 1; min-width: 0; background: rgba(255, 255, 255, .92);
  border: 1px solid #E7F4EC; border-radius: 14px; padding: 9px 8px; text-align: center;
}
.cl-hero-num b {
  display: block; font-size: 13.5px; font-weight: 800; color: #0E8A5F;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-hero-num span { display: block; font-size: 11px; color: #7C8F86; margin-top: 3px; }
.cl-hero-tip { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: #7E9187; }
/* 360/375 这类窄屏：三格挤，长时长（24 小时 52 分）会被省略号截断，缩一点字号和左右内边距 */
@media (max-width: 379px) {
  .cl-hero-num { gap: 7px; }
  .cl-hero-num > div { padding: 9px 5px; }
  .cl-hero-num b { font-size: 12.2px; letter-spacing: -.5px; }
  .cl-hero-top b { font-size: 18px; }
  .cl-hero-tag { font-size: 10px; padding: 2px 6px; }
}

.cl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ch {
  background: #fff; border: 1px solid #EAF3EE; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 20px -18px rgba(18, 80, 55, .8);
}
.ch > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; cursor: pointer; list-style: none;
}
.ch > summary::-webkit-details-marker { display: none; }
.ch-no {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #0E8A5F;
  background: #E9F8F0; border-radius: 8px; padding: 3px 7px;
}
.ch-nm {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #12203A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-meta {
  flex: 0 0 auto; font-size: 11px; color: #8A9A92; font-variant-numeric: tabular-nums;
}
.ch > summary::after {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.6px solid #A9B8AF; border-bottom: 1.6px solid #A9B8AF;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.ch[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ch-body { border-top: 1px solid #F1F7F3; padding: 2px 6px 8px; }
/* 目录只到「章」这一层，章内不再分节，所以原来 .ch-sec（节的分栏）整段删掉了 */
.cl-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 8px; background: none; border: 0; border-radius: 11px;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cl-row:active { background: #F4FBF7; }
.cl-idx {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  background: #F1F8F4; color: #7FA394; font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.cl-t {
  flex: 1; min-width: 0; font-size: 13px; color: #1B2B3D; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-d {
  flex: 0 0 auto; font-size: 11.5px; color: #8FA39A; font-variant-numeric: tabular-nums;
}

/* 网课页整页底色：淡绿渐白，和题库页的淡蓝渐白分开（只切这一页，不污染其它页面） */
body.page-green { background: #F3F9F5; }
body.page-green #app {
  background:
    radial-gradient(115% 38% at 8% -6%, #E7F5EC 0%, rgba(231, 245, 236, 0) 60%),
    radial-gradient(90% 32% at 96% -2%, #F0FAF4 0%, rgba(240, 250, 244, 0) 58%),
    linear-gradient(180deg, #F5FBF7 0%, #F9FCFA 34%, #FCFDFC 68%, #FDFEFD 100%);
}

/* =================================================================
   资料页：浅红主题，与题库淡蓝 / 网课淡绿 / 我的淡金分开
   ================================================================= */
.theme-red { --brand: #E2504B; --brand-soft: #FBEFED; }
.theme-red .hub-hero {
  background: linear-gradient(140deg, #FFF5F3 0%, #FFFAF9 62%, #FFFFFF 100%);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(190, 62, 56, .06);
}
.theme-red .hub-ic {
  background: #fff; color: #CF7A73;
  box-shadow: 0 8px 18px -12px rgba(190, 62, 56, .45);
}
.theme-red .hub-tag { background: #FBF0EE; color: #B86A63; }
.theme-red .hub-soon { border-color: #F7E3E0; }
.theme-red .hub-soon .hub-on { color: #B06660; }
body.page-red { background: #FFFCFB; }
/* 红色主题跟其他页一个路数：顶部一点淡红，往下很快收成白，不能整屏铺红 */
body.page-red #app {
  background:
    radial-gradient(115% 38% at 8% -6%, #FFF2EF 0%, rgba(255, 242, 239, 0) 62%),
    radial-gradient(90% 32% at 96% -2%, #FFF7F5 0%, rgba(255, 247, 245, 0) 58%),
    linear-gradient(180deg, #FFFCFB 0%, #FFFDFC 34%, #FFFEFD 68%, #FFFEFD 100%);
}
/* banner：卡片底色、投影、标签、当前页圆点都跟着红 */
body.page-red .hb-slide { background: #FDF4F2; }
body.page-red .hban { box-shadow: 0 8px 24px rgba(190, 62, 56, .05); }
body.page-red .hb-tag { color: #C0706A; background: rgba(201, 100, 93, .09); }
body.page-red .hb-txt b { color: #4A2B28; }
body.page-red .hb-txt em { color: #9C7C78; }
body.page-red .hb-txt { max-width: 52%; }
body.page-red .hban-dots i.on { background: #E4948C; }
body.page-red .mz-bubble {
  box-shadow: 0 10px 24px -10px rgba(120, 40, 36, .28), 0 0 0 1px rgba(201, 100, 93, .10);
}
/* banner 插画本身就画成了正红（书脊、礼盒），压一层降饱和，跟淡红主题对齐；
   图片整块盖满卡片，所以滤镜改了底图色也不会露出下面的卡底色 */
body.page-red .hb-img { filter: saturate(.92) brightness(1.06); opacity: .88; }
/* 窄屏：小精灵缩一号、标题降一号字，保证欢迎语一行放得下 */
@media (max-width: 360px) {
  body.page-red .perch { right: 12px; }
  body.page-red .hh-l h2 { font-size: 19px; }
  body.page-red .hb-txt b { font-size: 13.5px; }
}

/* =================================================================
   我的页：金色主题。整页淡金底，页面里原本用 --brand 的蓝色元素
   顺着变量一起转金，剩下几处硬编码的蓝再单独覆写
   ================================================================= */
body.page-gold {
  background: #FEFBF4;
  /* 灰阶也一起转暖：卡片边框、分隔线、说明文字不再带蓝调 */
  --brand: #C8901A;
  --brand-soft: #FBF0D6;
  --text: #2A2418;
  --muted: #8C7B57;
  --faint: #B3A483;
  --line: #F4EBD8;
}
/* 底色只留一层极淡的暖光，不能发黄 */
body.page-gold #app {
  background:
    radial-gradient(115% 38% at 8% -6%, #FFFAE8 0%, rgba(255, 250, 232, 0) 60%),
    radial-gradient(90% 32% at 96% -2%, #FFFDF2 0%, rgba(255, 253, 242, 0) 58%),
    linear-gradient(180deg, #FFFDF6 0%, #FFFEFA 34%, #FFFFFF 68%, #FFFFFF 100%);
}
/* 倒计时小牌：原来是淡蓝渐变 + 蓝边蓝字 */
body.page-gold .me-cd {
  background: linear-gradient(150deg, #FFFEF9, #FEF9EA);
  border-color: rgba(200, 144, 26, .16);
  box-shadow: 0 6px 14px -12px rgba(200, 144, 26, .7);
}
body.page-gold .me-cd span,
body.page-gold .me-cd b em,
body.page-gold .me-cd b i { color: #A08A56; }
/* 账号卡：紫蓝投影、头像描边光、铅笔徽标都跟着转暖 */
body.page-gold .me-card {
  border-color: #F4EBD8;
  box-shadow: 0 1px 2px rgba(30, 26, 18, .04), 0 12px 30px -16px rgba(74, 56, 16, .26);
}
body.page-gold .me-ava .avatar { box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(170, 120, 20, .45); }
body.page-gold .me-pen {
  background: linear-gradient(140deg, #E8B94E, #C08A15);
  box-shadow: 0 0 0 2px #fff, 0 3px 8px -3px rgba(170, 120, 20, .6);
}
/* 管理员入口（只有 admin 能看到） */
body.page-gold .admin-entry {
  background: linear-gradient(126deg, #FEFAF0 0%, #FFFDF7 54%, #FFFFFF 100%);
  border-color: rgba(200, 144, 26, .16);
  box-shadow: 0 1px 2px rgba(20, 23, 31, .03), 0 10px 24px -18px rgba(150, 110, 20, .35);
}
body.page-gold .admin-entry .ae-ic { color: #C08A15; box-shadow: 0 2px 8px -2px rgba(200, 144, 26, .3); }
/* 累计答题 / 正确率 / 连续天数：深蓝黑数字换成暖褐 */
body.page-gold .result-stats div b { color: #3E3116; }
/* 列表图标：线稿单色，底板是极淡的暖米，不再用彩色 emoji（原 emoji 滤镜一并撤掉） */
.mine-list .ic {
  background: #FBF6E9;
  color: #B08A3E;
  border-radius: 11px;
}
.mine-list .ic svg { width: 20px; height: 20px; display: block; }
/* 「我的」页面底色是淡金，图标底板再淡一档，避免和卡片拉开色差 */
body.page-gold .mine-list .ic { background: rgba(200, 144, 26, .08); color: #A8801F; }
/* 激活码兑换条：灰蓝虚线边 → 金线 */
body.page-gold .mem-code { border-color: #F3EADA; background: rgba(255, 255, 255, .8); }
/* 排行榜名次徽章：冷灰/淡橙换成暖银与铜 */
body.page-gold .rank-no { background: #F4EEE0; }
body.page-gold .rank-no.top2 { background: #EDE7DA; color: #7A6E58; }
body.page-gold .rank-no.top3 { background: #F7DFC6; color: #A2683A; }
/* 答题记录页顶部那条统计带：原本是绿色语义色，金页里换成金 */
body.page-gold .hero-band.rec {
  background: linear-gradient(132deg, #FEF7E6 0%, #FFFCF3 52%, #FFFEFB 100%);
  border-color: rgba(200, 144, 26, .16);
  box-shadow: 0 12px 26px -20px rgba(200, 144, 26, .7);
}
body.page-gold .hero-band.rec .hb-stat b { color: #B07C10; }
body.page-gold .hero-band.rec .hb-stat b i { color: #A18B5E; }
body.page-gold .hero-band.rec .hb-stat span { color: #8C7B57; }
/* 退出登录这类浅灰底按钮、商务合作胶囊：冷灰换成暖米 */
body.page-gold .btn.plain { background: #FBF7EE; color: #6B5A33; }
body.page-gold .biz-pill { border-color: #F4ECDA; color: #6B5A33; }
/* 会员卡：深蓝黑 → 暖褐黑，金线金钮不动 */
body.page-gold .mh-card {
  background:
    radial-gradient(125% 95% at 97% 3%, rgba(230, 196, 126, .18), rgba(230, 196, 126, 0) 62%),
    linear-gradient(148deg, #3A3125 0%, #2A2318 48%, #1D1812 100%);
  box-shadow: 0 2px 4px rgba(26, 20, 12, .12), 0 20px 40px -22px rgba(32, 24, 14, .9);
}

/* 顶栏配色跟随页面主题：题库淡蓝（默认）/ 网课淡绿 / 资料浅红 / 我的淡金 */
body.page-green .topbar {
  background: linear-gradient(180deg, rgba(245, 251, 247, .978) 0%, rgba(250, 253, 251, .972) 100%);
}
body.page-red .topbar {
  background: linear-gradient(180deg, rgba(255, 251, 250, .978) 0%, rgba(255, 253, 252, .972) 100%);
}
body.page-gold .topbar {
  background: linear-gradient(180deg, rgba(255, 253, 247, .978) 0%, rgba(255, 254, 250, .972) 100%);
}
/* 底栏本身就是白的（毛玻璃那层始终不动），只有「选中项」跟着页面换色 */
body.page-green .tab.on { color: #14A06E; }
body.page-green .tab.on::before {
  background: linear-gradient(180deg, rgba(22, 165, 114, .12), rgba(22, 165, 114, .02));
}
/* 底栏在 .view.theme-red 之外，取不到 --brand，这里写死同款主色 */
body.page-red .tab.on { color: #E2504B; }
body.page-red .tab.on::before {
  background: linear-gradient(180deg, rgba(226, 80, 75, .12), rgba(226, 80, 75, .02));
}
body.page-gold .tab.on { color: #D69B12; }
body.page-gold .tab.on::before {
  background: linear-gradient(180deg, rgba(222, 168, 40, .17), rgba(222, 168, 40, .03));
}
/* 左上省份小字也跟着换色，不再全是蓝灰 */
body.page-green .home-region { color: #547A68; }
body.page-red .home-region { color: #A87C77; }
body.page-gold .home-region { color: #8A6D33; }
/* 定位小圆点也跟着换色（原动画把蓝色写死在 keyframes 里，这里各配一套） */
body.page-green .home-region::before {
  background: #16A572; animation: regionPulseGreen 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
body.page-red .home-region::before {
  background: #DB8B84; animation: regionPulseRed 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
body.page-gold .home-region::before {
  background: #D69B12; animation: regionPulseGold 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* 「我要反馈」弹层：类型标签底子、截图框、输入框边框原来都带蓝灰，
   在金色页里显冷，这里统一转暖，选中态用金色（规则见 .tk-kind.on） */
body.page-gold .tk-kind { background: #FAF5E9; color: #6B5A33; }
body.page-gold .tk-kind.on { background: #FBF0D6; color: #A87510; border-color: rgba(200, 144, 26, .38); }
body.page-gold .tk-add { background: #FDFAF2; border-color: #EDE1C9; color: #8C7B57; }
body.page-gold .tk-text,
body.page-gold .tk-contact { border-color: #EDE1C9; }

/* =================================================================
   资讯页：淡紫主题（全站最淡的一档，纸面上只铺一层很浅的紫）
   五个一级页各一色：题库淡蓝 / 网课淡绿 / 资料浅红 / 资讯淡紫 / 我的淡金
   ================================================================= */
.theme-violet { --brand: #6C5CD6; --brand-soft: #F3F0FE; }
body.page-violet { background: #FBF9FF; }
body.page-violet #app {
  background:
    radial-gradient(115% 38% at 8% -6%, #F0EBFF 0%, rgba(240, 235, 255, 0) 62%),
    radial-gradient(90% 32% at 96% -2%, #F7F3FF 0%, rgba(247, 243, 255, 0) 58%),
    linear-gradient(180deg, #FCFAFF 0%, #FDFCFF 34%, #FEFDFF 68%, #FFFFFF 100%);
}
/* banner / 卡片 / 底栏选中项都跟着紫，banner 插画整体往紫偏一点 */
body.page-violet .hb-slide { background: #F2EDFE; }
body.page-violet .hban { box-shadow: 0 8px 24px rgba(90, 70, 170, .07); }
body.page-violet .hb-tag { color: #6A5AAE; background: rgba(108, 92, 214, .09); }
body.page-violet .hb-txt b { color: #2D2647; }
body.page-violet .hb-txt em { color: #7B739B; }
body.page-violet .hban-dots i.on { background: #A493E6; }
body.page-violet .hb-img { filter: hue-rotate(33deg) saturate(.86) brightness(1.06); }
body.page-violet .hban-dots i { background: rgba(108, 92, 214, .16); }
body.page-violet .mz-bubble { background: #fff; color: #4B3F7A; }
body.page-violet .topbar {
  background: linear-gradient(180deg, rgba(253, 251, 255, .978) 0%, rgba(254, 253, 255, .972) 100%);
}
body.page-violet .tab.on { color: #6C5CD6; }
body.page-violet .tab.on::before {
  background: linear-gradient(180deg, rgba(108, 92, 214, .12), rgba(108, 92, 214, .02));
}
body.page-violet .home-region { color: #7A6BA8; }
body.page-violet .home-region::before {
  background: #8B7BE0; animation: regionPulseViolet 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes regionPulseViolet {
  0%   { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(108, 92, 214, .40); }
  50%  { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 4px rgba(108, 92, 214, .10); }
  100% { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(108, 92, 214, .40); }
}

/* ---------------- 资讯流 ---------------- */
/* 顶部引言：主要作用是给 banner 上沿腾出高度，让猫头鹰的耳朵和大眼睛能露出来 */
.news-hero { padding: 8px 92px 16px 4px; }
.nh-k {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  color: #7A6BC8; background: rgba(108, 92, 214, .09);
  padding: 5px 9px; border-radius: 999px; letter-spacing: .2px;
}
.news-hero h2 {
  margin: 10px 0 0; font-size: 21px; font-weight: 750;
  letter-spacing: -.4px; color: #1E1930; line-height: 1.3;
}
.news-hero p { margin: 6px 0 0; font-size: 12px; color: #8982A0; }
.news-head { margin: 4px 4px 10px; }
.news-list { display: grid; gap: 10px; }
/* 整卡可点，但现在跳的是站内详情（不是外链），所以用 button 而不是 a */
.news-card {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 13px 14px 12px; border-radius: var(--r-md);
  background: #fff; border: 1px solid #EFEAFA;
  box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55);
  color: inherit; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.news-card:active { background: #FBF9FF; }
/* 从详情页返回时，刚读过的那张卡亮一下紫边，一眼认出「就是这条」 */
.news-card.nc-back { animation: ncBack 2s ease-out both; }
@keyframes ncBack {
  0%   { background: #F1ECFF; border-color: #CFC2F6; box-shadow: 0 0 0 3px rgba(108, 92, 214, .14); }
  70%  { background: #F8F5FF; border-color: #E4DCF8; box-shadow: 0 0 0 2px rgba(108, 92, 214, .06); }
  100% { background: #fff; border-color: #EFEAFA; box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55); }
}
.nc-top { display: flex; align-items: center; gap: 7px; }
.nc-tag {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 6px;
}
.nc-tag.notice { background: #EDE9FE; color: #5B49C4; }
.nc-tag.wechat { background: #E9F8F0; color: #0E8A4E; }
.nc-src {
  flex: 1; min-width: 0; font-size: 10.5px; color: #9A93AF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-date { flex: 0 0 auto; font-size: 10.5px; color: #ADA7C0; white-space: nowrap; }
.nc-title {
  margin-top: 8px; font-size: 14px; font-weight: 650; line-height: 1.5; color: #241F38;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.nc-sum {
  margin-top: 6px; font-size: 12px; line-height: 1.65; color: #6B6583;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.nc-foot { display: flex; align-items: center; margin-top: 9px; }
.nc-more {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 11.5px; font-weight: 600; color: #6C5CD6;
}
.nc-more svg { width: 12px; height: 12px; display: block; opacity: .8; }
.nc-ai {
  margin-left: auto; font-size: 9.5px; color: #9E90D6;
  background: #F6F3FF; padding: 3px 6px; border-radius: 5px;
}
.news-more {
  display: block; width: 100%; margin: 14px 0 0; padding: 12px 0;
  border-radius: var(--r-md); background: #fff; border: 1px solid #EDE8FA;
  color: #6C5CD6; font-size: 13px; font-weight: 600; cursor: pointer;
}
.news-more:active { background: #FBF9FF; }
.news-end { margin: 16px 0 0; text-align: center; font-size: 11px; color: #B3ADC6; }
.news-note { margin: 16px 4px 6px; font-size: 10.5px; line-height: 1.7; color: #ABA5BE; }
.news-empty { padding: 40px 10px; text-align: center; }
.news-empty .ne-ico { font-size: 30px; opacity: .5; margin-bottom: 8px; }
.news-empty b { display: block; font-size: 13.5px; color: #4B4463; }
.news-empty span { display: block; margin-top: 5px; font-size: 11.5px; color: #A29CB5; }

/* ---------- 资讯页：三个横向分类（官方公告 / 院校介绍 / 机构推荐） ---------- */
.nz-tabs { margin: 2px 4px 14px; }
.nz-tabs button { padding: 9px 15px; font-size: 13px; }

/* 院校汇总：多少所在招、一共多少人，一行说清 */
.clg-sum {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 4px 12px; padding: 11px 13px; border-radius: var(--r-md);
  background: linear-gradient(135deg, #F6F2FF 0%, #FBF8FF 100%);
  border: 1px solid #EFE8FC;
}
.clg-sum > div { display: flex; align-items: baseline; gap: 4px; }
.clg-sum b { font-size: 17px; font-weight: 750; letter-spacing: -.3px; color: #52439E; }
.clg-sum span { font-size: 11.5px; color: #8B82A6; }
/* 年份这行单独占一行，跟着数字左对齐；挤在右边容易和「人招生计划」贴在一起 */
.clg-sum em { flex: 1 0 100%; margin-left: 0; font-style: normal; font-size: 10.5px; color: #A79FC0; }

/* minmax(0,1fr)：卡片里有一行 nowrap 的专业串，默认的 auto 最小宽度会把列撑宽 */
.clg-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.clg-card {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 13px 14px 12px; border-radius: var(--r-md);
  background: #fff; border: 1px solid #EFEAFA;
  box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55);
  color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.clg-card:active { background: #FBF9FF; }
.clg-top { display: flex; align-items: center; gap: 7px; }
.clg-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 680; color: #241F38; line-height: 1.4; }
.clg-name em { font-style: normal; font-size: 11px; font-weight: 500; color: #8B82A6; margin-left: 5px; }
.clg-type { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; line-height: 1; padding: 4px 6px; border-radius: 5px; }
.clg-type.public { background: #E9F8F0; color: #0E8A4E; }
.clg-type.private { background: #FFF4E5; color: #B54708; }
.clg-meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10.5px; color: #9A93AF; }
.clg-meta i { font-style: normal; opacity: .55; }
.clg-intro {
  margin: 7px 0 0; font-size: 12px; line-height: 1.62; color: #6B6583;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.clg-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.clg-sp {
  flex: 1; min-width: 0; font-size: 10.5px; color: #9E90D6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clg-foot svg { width: 12px; height: 12px; flex: 0 0 auto; color: #6C5CD6; opacity: .8; }

/* 机构名片 */
.agn-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.agn-card {
  padding: 14px; border-radius: var(--r-md); background: #fff;
  border: 1px solid #EFEAFA; box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55);
}
.agn-head { display: flex; align-items: center; gap: 10px; }
.agn-ava {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #5B49C4; background: #F1ECFF;
}
.agn-tit { min-width: 0; }
.agn-tit b { display: block; font-size: 14.5px; font-weight: 680; color: #241F38; }
.agn-tags { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.agn-tag {
  font-size: 9.5px; font-weight: 600; color: #7A6BC8;
  background: rgba(108, 92, 214, .09); padding: 3px 6px; border-radius: 5px;
}
.agn-since { font-size: 9.5px; color: #A79FC0; }
.agn-desc { margin: 10px 0 0; font-size: 12.5px; line-height: 1.72; color: #5F5878; }
.agn-addr { margin-top: 8px; font-size: 11px; color: #8B82A6; }
.agn-acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.agn-btn {
  display: inline-flex; align-items: center; padding: 8px 13px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit;
}
.agn-btn.ghost { background: #fff; color: #6C5CD6; box-shadow: inset 0 0 0 1px #DED6F8; }

/* 院校详情 */
.clg-detail { padding-bottom: 10px; }
.cd-hero { padding: 4px 4px 0; }
.cd-name { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.4px; color: #1E1930; line-height: 1.35; }
.cd-name em { font-style: normal; font-size: 12px; font-weight: 500; color: #8B82A6; margin-left: 6px; }
.cd-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cd-tag { font-size: 10.5px; color: #6B6583; background: #F6F3FF; padding: 5px 8px; border-radius: 6px; }
.cd-tag.hl { color: #5B49C4; background: #F1ECFF; font-weight: 600; }
.cd-block {
  margin-top: 14px; padding: 14px; border-radius: var(--r-md);
  background: #fff; border: 1px solid #EFEAFA;
  box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55);
}
.cd-block h3 { margin: 0 0 9px; font-size: 12.5px; font-weight: 700; color: #4B4463; letter-spacing: .2px; }
.cd-intro { margin: 0; font-size: 13px; line-height: 1.9; color: #4B4463; }
/* 简介按段落排：段间留 11px，两端对齐，长文读起来不散 */
.cd-intro p { margin: 0 0 11px; text-align: justify; }
.cd-intro p:last-child { margin-bottom: 0; }

/* 办学数据：两列小卡，有几项渲染几项 */
.cd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cd-fact { background: #FAF8FF; border: 1px solid #F0EBFF; border-radius: 10px; padding: 9px 11px; }
.cd-fact dt { font-size: 10.5px; color: #9A93AF; line-height: 1.2; }
.cd-fact dd { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: #3B3450; letter-spacing: -.2px; line-height: 1.2; }
@media (max-width: 340px) {
  .cd-fact dd { font-size: 13px; }
}
.cd-feats { display: flex; gap: 7px; flex-wrap: wrap; }
.cd-feats span { font-size: 11.5px; color: #5B49C4; background: #F6F3FF; padding: 6px 10px; border-radius: 8px; }
.cd-links { display: flex; gap: 9px; flex-wrap: wrap; }
.cd-links a {
  display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px;
  background: var(--brand-soft); color: #5B49C4; font-size: 12.5px; font-weight: 600; text-decoration: none;
}

/* ---------- 公告详情（站内阅读） ---------- */
.news-article { padding-bottom: 12px; }
.na-meta { display: flex; align-items: center; gap: 7px; margin: 2px 2px 10px; }
.na-title {
  margin: 0 2px 14px; font-size: 19px; line-height: 1.45; font-weight: 700;
  letter-spacing: -.2px; color: #1E1A2E;
}
.na-body {
  background: #fff; border: 1px solid #EFEAFA; border-radius: var(--r-md);
  padding: 16px 15px; box-shadow: 0 4px 16px -14px rgba(80, 60, 160, .55);
}
.na-body p {
  margin: 0 0 12px; font-size: 14px; line-height: 1.85; color: #37324A;
  word-break: break-word;
}
.na-body p:last-child { margin-bottom: 0; }
.na-body p:empty { display: none; }
.na-empty { color: #8B84A3; font-size: 13px; }
.na-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 3px 0; font-size: 11px; color: #ABA5BE;
}
.na-foot a { color: #7C6BD8; text-decoration: none; }
.na-foot a:active { opacity: .7; }
@keyframes regionPulseGreen {
  0%   { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(22, 165, 114, .40); }
  50%  { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 4px rgba(22, 165, 114, .10); }
  100% { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(22, 165, 114, .40); }
}
@keyframes regionPulseRed {
  0%   { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(219, 139, 132, .38); }
  50%  { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 4px rgba(219, 139, 132, .10); }
  100% { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(219, 139, 132, .38); }
}
@keyframes regionPulseGold {
  0%   { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(214, 155, 18, .40); }
  50%  { transform: scale(1.15); opacity: 1;   box-shadow: 0 0 0 4px rgba(214, 155, 18, .10); }
  100% { transform: scale(.78); opacity: .45; box-shadow: 0 0 0 0 rgba(214, 155, 18, .40); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-green .home-region::before,
  body.page-red .home-region::before,
  body.page-gold .home-region::before,
  body.page-violet .home-region::before { animation: none; opacity: .9; transform: none; }
}

/* =================================================================
   网课页：banner 里的蓝色元素统一换成绿色
   ================================================================= */
/* banner：卡片底色、投影、标签、当前页圆点本来都是蓝的 */
body.page-green .hb-slide { background: #EAF9F0; }
body.page-green .hban { box-shadow: 0 8px 24px rgba(22, 120, 80, .08); }
body.page-green .hb-tag { color: #14A06E; background: rgba(22, 165, 114, .10); }
body.page-green .hb-txt b { color: #12322A; }
body.page-green .hb-txt em { color: #5C8072; }
body.page-green .hban-dots i.on { background: #14A06E; }
body.page-green .mz-bubble {
  box-shadow: 0 10px 24px -10px rgba(18, 62, 44, .38), 0 0 0 1px rgba(22, 165, 114, .10);
}

/* 网课卡：图标直接落位，不垫底板（和题库页那 6 个科目卡同一个坑位尺寸） */
.subj-card.wk .sj-ghost { width: 66px; height: 66px; opacity: .06; filter: saturate(.85); }

/* =================================================================
   单招资料：红色主题页（hero + 科目 tab + 分类文件列表）
   ================================================================= */
/* 顶部汇总条：淡红（跟资料页同一色系） */
.mt-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(132deg, #FDF2F0 0%, #FEF8F7 52%, #FFFCFB 100%);
  border: 1px solid rgba(201, 100, 93, .12);
  box-shadow: 0 12px 26px -20px rgba(201, 100, 93, .55);
}
.mt-hero-l { min-width: 0; }
.mt-hero-l b { display: block; font-size: 15.5px; font-weight: 750; color: #C0514A; letter-spacing: -.2px; }
.mt-hero-l span { display: block; margin-top: 3px; font-size: 11.5px; color: #B08B86; }
.mt-chip {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid #F4D4D0;
  font-size: 11.5px; font-weight: 700;
}

/* 资料页跟题库 / 网课一致：选中的科目是实心主色，不是发灰的淡红块 */
body.page-red .grp-tabs button { border-color: #F3E4E1; color: #8C7B79; }
body.page-red .grp-tabs button.on {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 6px 14px -8px rgba(226, 80, 75, .9);
}

/* 科目横排 + 提示行：复用 grp-tabs / grp-hint，只微调间距 */
.mt-tabs { margin-bottom: 2px; padding-bottom: 8px; }
.mt-hint-row { margin: 0 4px 12px; }
.mt-hint-row span { margin-left: 0; }

/* 分组：组名一行 + 文件列表 */
.mt-group { margin-bottom: 14px; }
.mt-ghead {
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 4px 8px;
}
.mt-ghead b { font-size: 14px; font-weight: 750; color: var(--text); letter-spacing: -.2px; }
.mt-ghead span { font-size: 11px; color: var(--faint); }
.mt-list { display: flex; flex-direction: column; gap: 9px; }

/* 文件行：PDF 线稿图标 + 名称/大小 + 预览/下载 */
.mt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line);
  cursor: pointer; transition: transform .14s, border-color .14s;
}
.mt-row:active { transform: scale(.987); border-color: #F4DAD6; }
.mt-bad { cursor: default; }
.mt-bad:active { transform: none; border-color: var(--line); }
.mt-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: #D9695F;
}
.mt-ic svg { width: 21px; height: 21px; }
.mt-l { flex: 1; min-width: 0; }
.mt-l b {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: #16213C;
  white-space: nowrap; overflow: hidden;
}
.mt-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ans {
  flex: 0 0 auto; font-style: normal; font-size: 10px; font-weight: 700;
  padding: 1.5px 6px; border-radius: 6px;
  background: #FAF0EE; color: #B67F79;
}
.mt-l > span { display: block; margin-top: 2px; font-size: 11px; color: var(--faint); }
.mt-btn {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mt-look {
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  box-shadow: 0 5px 12px -7px rgba(226, 80, 75, .8);
}
.mt-dl { background: var(--brand-soft); color: var(--brand); border: 1px solid #F4D4D0; }

/* =================================================================
   PDF 预览浮层：全屏 iframe（浏览器原生 PDF 预览，可缩放可拖页）
   ================================================================= */
.pv {
  position: fixed; inset: 0; z-index: 260;
  display: flex; flex-direction: column;
  background: #F6F1EF;
}
.pv-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-top) * 0);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: #fff;
  border-bottom: 1px solid #F0E2E0;
  box-shadow: 0 6px 18px -14px rgba(120, 40, 36, .5);
}
.pv-back {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #FBF3F1; color: #A75C56;
  font-size: 21px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 3px;
}
.pv-tt { flex: 1; min-width: 0; }
.pv-tt b {
  display: block; font-size: 13.5px; font-weight: 700; color: #16213C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-tt span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--faint); }
/* PDF 浮层挂在 body 上，同样取不到 --brand，写死主色 */
.pv-dl {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
  background: #FBEFED; color: #E2504B; border: 1px solid #F4D4D0;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
}
.pv-frame { flex: 1; width: 100%; border: 0; }
body.pv-open { overflow: hidden; }

/* =================================================================
   页尾会员卡：跟着页面主题色走（题库蓝 / 网课绿 / 资料红）
   默认那张香槟金仍留给「我的」和选择会员弹层，这里只加三个 tone 变体
   ================================================================= */
.mem-card.tone-blue {
  --mc: 47, 123, 255; --mc-ink: #1D4E9C; --mc-deep: #1F63E8;
  --t1: #EAF2FF; --t2: #D8E7FF; --t3: #C1D8FF;
}
.mem-card.tone-green {
  --mc: 20, 160, 110; --mc-ink: #0F7A54; --mc-deep: #0C8A5D;
  --t1: #E8FAF0; --t2: #D2F3E3; --t3: #B5EAD2;
}
.mem-card.tone-red {
  --mc: 226, 80, 75; --mc-ink: #A03330; --mc-deep: #D23C37;
  --t1: #FDECEA; --t2: #FBDAD7; --t3: #F7C3BF;
}

.mem-card[class*="tone-"] {
  background: linear-gradient(148deg, var(--t1) 0%, rgba(255, 255, 255, 0) 62%), #fff;
  border-color: rgba(var(--mc), .12);
  box-shadow: 0 12px 26px -14px rgba(var(--mc), .38), 0 2px 6px rgba(20, 22, 31, .03);
}
.mem-card[class*="tone-"]:active {
  box-shadow: 0 4px 12px -10px rgba(var(--mc), .38), 0 1px 4px rgba(20, 22, 31, .04);
}
/* 已开通：整张卡铺主题色淡渐变 + 右上角高光，跟金色的那张同一手法 */
.mem-card[class*="tone-"].on {
  background:
    radial-gradient(130% 120% at 92% -22%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 56%),
    linear-gradient(135deg, var(--t1) 0%, var(--t2) 46%, var(--t3) 100%);
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    0 2px 6px rgba(var(--mc), .10),
    0 18px 34px -16px rgba(var(--mc), .55),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.mem-card[class*="tone-"] .mem-ico {
  color: var(--mc-ink);
  background: linear-gradient(158deg, #fff, var(--t1));
  border-color: rgba(var(--mc), .22);
  box-shadow: 0 6px 14px -8px rgba(var(--mc), .5), inset 0 1px 0 #fff;
}
.mem-card[class*="tone-"].on .mem-ico {
  border-color: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 16px -8px rgba(var(--mc), .45), inset 0 1px 0 #fff;
}

.mem-card[class*="tone-"] .mem-body b { color: var(--mc-ink); }
.mem-card[class*="tone-"] .mem-body > span { color: rgba(var(--mc), .74); }
.mem-card[class*="tone-"] .mem-body .mem-state { color: rgba(var(--mc), .86); }
.mem-card[class*="tone-"].on .mem-body > span { color: rgba(var(--mc), .8); }
.mem-card[class*="tone-"].on .mem-body .mem-state { color: var(--mc-ink); font-weight: 600; }

.mem-card[class*="tone-"] .vip-tag,
.mem-card[class*="tone-"].on .vip-tag {
  color: #fff;
  background: linear-gradient(160deg, rgba(var(--mc), .92), var(--mc-deep));
  box-shadow: 0 2px 6px -2px rgba(var(--mc), .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.mem-card[class*="tone-"] .mem-price { color: var(--mc-ink); }
.mem-card[class*="tone-"] .mem-price i,
.mem-card[class*="tone-"].on .mem-price i { color: rgba(var(--mc), .62); }

.mem-card[class*="tone-"] .mem-pill {
  background: linear-gradient(135deg, rgba(var(--mc), .94), var(--mc-deep));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(var(--mc), .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mem-card[class*="tone-"].on .mem-pill {
  background: #fff; color: var(--mc-ink);
  box-shadow: 0 4px 10px -4px rgba(var(--mc), .35);
}

/* =================================================================
   「我的」：学习生涯三块统计 + 功能九宫格
   ================================================================= */

.life-card { padding: 14px 16px 4px; }
.life-head { display: flex; align-items: baseline; gap: 8px; }
.life-head b { font-size: 14.5px; font-weight: 680; letter-spacing: -.2px; }
.life-head span { margin-left: auto; font-size: 11px; color: var(--muted); }

.life-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0 12px; border-top: 1px solid var(--line); margin-top: 10px;
}
.life-ic {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--lc); background: var(--lt);
}
.life-ic svg { width: 18px; height: 18px; display: block; }

.life-body { flex: 1; min-width: 0; }
.life-top { display: flex; align-items: baseline; gap: 8px; }
.life-top b { font-size: 13px; font-weight: 640; color: var(--text); }
.life-top span { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.life-top i { font-style: normal; font-size: 14px; font-weight: 720; color: var(--lc); letter-spacing: -.2px; }
.life-top i em { font-style: normal; font-size: 10px; font-weight: 500; color: var(--faint); margin-left: 1px; }
.life-meta { margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.life-meta b { color: #3A4A66; font-weight: 660; }
.life-bar { height: 4px; margin-top: 8px; border-radius: 99px; background: #EEF2F9; overflow: hidden; }
.life-bar i { display: block; height: 100%; border-radius: 99px; background: var(--lc); opacity: .85; transition: width .4s ease; }

.mine-grid-card { padding: 4px 6px 8px; }
.mine-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.mine-cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 2px 11px; border: none; background: none; font: inherit;
  color: var(--text); cursor: pointer; border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.mine-cell:active { background: rgba(47, 123, 255, .06); }
.mine-ic { position: relative; height: 26px; display: grid; place-items: center; color: #33405C; }
.mine-ic svg { width: 25px; height: 25px; }
.mine-cell > span:last-child { font-size: 11.5px; color: #3E4C67; letter-spacing: .1px; }
.mine-dot {
  position: absolute; top: -5px; right: -11px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: #E8574F; color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
  display: grid; place-items: center; border: 1.5px solid #fff;
  box-shadow: 0 3px 8px -2px rgba(226, 80, 75, .7);
}

/* ---------------- 消息通知 ---------------- */
/* 标题行：左边标题，右上角常驻「全部标记为已读」；全读后置灰仍留在原位 */
.nt-title-row { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; }
.nt-title-row h4 { margin: 0; flex: 1; min-width: 0; }
.nt-sub { margin: 0 0 11px; font-size: 11.5px; color: var(--faint); }
.nt-all {
  flex: 0 0 auto; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  color: var(--brand); background: var(--brand-soft); border: 1px solid transparent;
}
.nt-all:active { opacity: .75; }
.nt-all.is-off, .nt-all:disabled { color: #B3BBCB; background: #F2F4F8; cursor: default; }
.nt-all.is-off:active { opacity: 1; }
.notice-list { max-height: 52vh; overflow-y: auto; margin: 0 -2px 14px; padding: 0 2px; }
.notice-item {
  position: relative; padding: 11px 12px 10px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer;
}
.notice-item:active { background: #F6F8FC; }
.notice-item.unread { background: #F6FAFF; border-color: rgba(47, 123, 255, .18); }
.notice-item.unread:active { background: #EFF6FF; }
.notice-item.unread::before {
  content: ''; position: absolute; left: 5px; top: 15px; width: 5px; height: 5px;
  border-radius: 50%; background: #E8574F;
}
.nt-state {
  flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 6px; background: #FDECEB; color: #D9443E;
}
.nt-state.read { background: #F1F3F8; color: #9AA4B8; font-weight: 600; }
.notice-top { display: flex; align-items: center; gap: 6px; }
.notice-title { margin-top: 7px; font-size: 13px; font-weight: 650; color: var(--text); line-height: 1.45; }
.notice-time { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.notice-tag {
  font-size: 9.5px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 6px; flex: 0 0 auto;
}
.notice-tag.info { background: #EAF2FF; color: #1F63E8; }
.notice-tag.update { background: #E9F8F0; color: #0E8A4E; }
.notice-tag.promo { background: #FFF4E2; color: #B2761A; }
/* 列表里正文只露两行，剩下的进详情看 */
.notice-body {
  margin-top: 6px; font-size: 12px; line-height: 1.62; color: #55627A; white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.notice-more {
  display: inline-flex; align-items: center; gap: 1px; margin-top: 7px;
  font-size: 11px; font-weight: 600; color: var(--brand);
}
.notice-more svg { width: 12px; height: 12px; display: block; opacity: .8; }

/* 单条详情 */
.nt-back {
  display: inline-flex; align-items: center; gap: 2px; margin: -3px 0 13px -5px;
  padding: 5px 7px 5px 4px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #4A5A78; background: none; border: none; border-radius: 9px; cursor: pointer;
}
.nt-back:active { background: #F2F5FA; }
.nt-back svg { width: 14px; height: 14px; display: block; }
.nt-detail-top { display: flex; align-items: center; gap: 8px; }
.nt-detail-when { margin-left: auto; font-size: 11px; color: var(--faint); }
.nt-detail-title {
  margin: 11px 0 0; font-size: 17px; line-height: 1.45; font-weight: 700;
  color: var(--text); letter-spacing: -.2px;
}
.nt-detail-body {
  margin: 13px 0 16px; padding: 13px 14px; border-radius: var(--r-md);
  background: #F7F9FD; font-size: 13.5px; line-height: 1.82; color: #3E4B63;
  white-space: pre-wrap; word-break: break-word; max-height: 46vh; overflow-y: auto;
}

/* ---------------- 我要反馈 ---------------- */
.tk-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tk-kind {
  font-size: 12px; line-height: 1; padding: 8px 12px; border-radius: 999px;
  background: #F4F7FC; color: #4A5A78; border: 1px solid transparent; cursor: pointer;
}
/* 选中态跟「我的」页的金色主题走，不跟全局蓝：反馈入口只在「我的」里，
   弹层里冒一个蓝色标签跟整页割裂 */
.tk-kind.on { background: #FBF0D6; color: #A87510; border-color: rgba(200, 144, 26, .38); font-weight: 650; }
.tk-text {
  width: 100%; min-height: 92px; resize: none; font: inherit; font-size: 13px; line-height: 1.6;
  padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: #fff; color: var(--text); outline: none;
}
.tk-text:focus { border-color: #C8901A; box-shadow: 0 0 0 3px rgba(200, 144, 26, .13); }
.tk-count { text-align: right; font-size: 10.5px; color: var(--faint); margin: 6px 0 10px; }
.tk-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-thumbs { display: flex; gap: 8px; }
/* 没有缩略图时容器不占位，否则「+ 截图」会被 flex 间距顶离左边，和上面的输入框对不齐 */
.tk-thumbs:empty { display: none; }
.tk-uptip { font-size: 11px; color: var(--faint); line-height: 1.5; }
.tk-thumb { position: relative; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.tk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-thumb i {
  position: absolute; top: 0; right: 0; width: 17px; height: 17px; font-style: normal;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  background: rgba(18, 24, 38, .62); color: #fff; border-bottom-left-radius: 8px; cursor: pointer;
}
.tk-add {
  width: 54px; height: 54px; border-radius: 10px; border: 1px dashed var(--line-strong);
  background: #FAFCFF; color: var(--muted); font-size: 10.5px; cursor: pointer; line-height: 1.3;
}
/* 联系方式：普通文本输入框，不能沿用验证码那套等宽大写、居中加字距的样式 */
.tk-contact {
  width: 100%; height: 46px; margin-bottom: 8px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: #fff; color: var(--text);
  font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; text-align: left;
  outline: none;
}
.tk-contact::placeholder { color: var(--faint); letter-spacing: 0; font-weight: 400; }
.tk-contact:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}

.tk-done { display: flex; align-items: center; gap: 10px; padding: 16px 0 20px; }
.tk-done span {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #E9F8F0; color: #0E8A4E; font-size: 18px; font-weight: 700;
}
.tk-done b { font-size: 14px; }
.tk-row { padding: 11px 12px; border-radius: var(--r-md); background: #FAFCFF; border: 1px solid var(--line); margin-bottom: 8px; }
.tk-row-top { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.tk-chip { font-size: 10px; padding: 3px 7px; border-radius: 6px; background: #FBF0D6; color: #A87510; font-weight: 650; }
.tk-st { padding: 3px 7px; border-radius: 6px; font-size: 10px; background: #FFF4E5; color: #B26A00; }
.tk-st.s1 { background: #EAF2FF; color: #1F63E8; }
.tk-st.s2 { background: #E9F8F0; color: #0E8A4E; }
.tk-st.s3 { background: #F2F3F7; color: #667085; }
.tk-when { margin-left: auto; color: var(--faint); }
.tk-row-txt { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: #3E4C67; white-space: pre-wrap; word-break: break-word; }
.tk-row-imgs { display: flex; gap: 6px; margin-top: 8px; }
.tk-row-imgs img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.tk-reply { margin-top: 8px; font-size: 12px; line-height: 1.6; color: #0E7A4A; background: #F1FBF6; border-radius: 8px; padding: 8px 10px; }
.tk-reply b { display: block; font-size: 10px; color: #12A15C; margin-bottom: 3px; letter-spacing: .4px; }

/* ---------------- 分享题库 ---------------- */
.share-box { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: linear-gradient(150deg, #EFF5FF, #F8FBFF 70%); border: 1px solid rgba(47, 123, 255, .1); margin-bottom: 16px; }
.share-qr { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 10px; background: #fff; padding: 4px; box-sizing: border-box; }
.share-r { min-width: 0; }
.share-r b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.share-r span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.share-link {
  margin-top: 8px; font-size: 10.5px; color: #5C6C88; line-height: 1.4;
  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =================================================================
   系统设置 / 关于我们 / 协议与隐私
   ================================================================= */

.set-me {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; margin-bottom: 12px;
  border-radius: var(--r-md); background: #FAFCFF; border: 1px solid var(--line);
}
.set-me-t { flex: 1; min-width: 0; }
.set-me-t b { display: block; font-size: 14px; font-weight: 660; letter-spacing: -.1px; }
.set-me-t span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.set-list {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: #fff; margin-bottom: 14px;
}
.set-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px; border: none; border-top: 1px solid var(--line);
  background: none; font: inherit; color: var(--text); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.set-row:first-child { border-top: none; }
.set-row:active { background: #F6FAFF; }
.set-row b { font-size: 13.5px; font-weight: 600; }
.set-row em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--muted); }
.set-row i { font-style: normal; font-size: 14px; color: var(--faint); margin-left: 6px; }
.set-row.static { cursor: default; }
.set-row.static:active { background: none; }
.set-ic {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  display: grid; place-items: center; background: #F1F5FC; color: #40608F;
}
.set-ic svg { width: 17px; height: 17px; display: block; }

.about-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.about-logo {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #7A560F;
  background: linear-gradient(140deg, #FFF7E2, #F2D9A4);
  box-shadow: 0 6px 16px -8px rgba(178, 136, 38, .7);
}
.about-head b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
/* 只作用于右侧文案里的那行说明，别把左边的 logo 方块也当成 span 压成 11px */
.about-head > div > span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.about-txt { font-size: 12.5px; line-height: 1.72; color: #55627A; margin-bottom: 13px; }

.legal { max-height: 54vh; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.legal-intro {
  font-size: 12.5px; line-height: 1.75; color: #3E4C67;
  background: #F6FAFF; border: 1px solid rgba(47, 123, 255, .1);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.legal h5 { font-size: 13px; font-weight: 680; color: var(--text); margin: 12px 0 5px; }
.legal p { font-size: 12.5px; line-height: 1.78; color: #55627A; }
.legal-end { margin-top: 14px; font-size: 11px; color: var(--faint); }

/* 会员卡标题变长（例如「题库、网课会员」）时，窄屏把字号收一档，给播报留位置 */
@media (max-width: 360px) {
  .me-card .mh-head b { font-size: 12.5px; }
  .me-card .mh-head { gap: 7px; }
  .vip-badge { font-size: 9.5px; padding: 3.5px 6px; }
}