/* 题牌冒险者 · 基础样式（结构 + 设计变量）
   三套主题在 themes.css 里改变量和少量皮肤：note 数学笔记本 / light 浅色经典 / wood 极简木桌。
   卡牌分级：基本 ji / 进阶 jin / 大招 da / 备用 bei / 通用 tong / 空壳 temp */
:root {
  /* 背景与纸面 */
  --bg: #f5f6fb; --bg-img: none;
  --paper: #ffffff; --paper2: #f7f8fc; --paper3: #eef0f8;
  --line: #e4e6f0; --bw: 1px; --rule: #eceef5; --rule2: #dfe2ec;
  /* 文字 */
  --ink: #1c2033; --ink2: #4b5168; --muted: #8b90a6; --faint: #c3c7d6;
  /* 强调 */
  --accent: #5b5bf0; --accent2: #9b5cf6; --accent-ink: #fff; --accent-grad: linear-gradient(135deg, #5b5bf0, #9b5cf6); --accent-soft: #eef0ff;
  --link: #4f46e5; --hl: #fff1a8;
  --green: #10b981; --red: #ef4444; --blue: #3b82f6; --violet: #8b5cf6; --gold: #f5a524; --teal: var(--link);
  --hp: #f43f5e; --mana: #3b82f6;
  --ji: #10b981; --jin: #3b82f6; --da: #f43f5e; --bei: #94a3b8; --tong: #d97706;
  --ji-bg: #e8f8f1; --jin-bg: #eaf2ff; --da-bg: #ffecef; --bei-bg: #f1f4f8; --tong-bg: #fff4e5;
  /* 形状 */
  --r: 18px; --r-sm: 12px; --r-xs: 8px; --pill: 999px;
  --sh1: 0 1px 2px rgba(20,24,60,.05), 0 4px 14px rgba(20,24,60,.05);
  --sh2: 0 2px 4px rgba(20,24,60,.04), 0 14px 34px rgba(20,24,60,.08);
  --sh3: 0 30px 70px -20px rgba(20,24,60,.35);
  /* 字体 */
  --f-ui: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --f-title: "Noto Serif SC", "Songti SC", "SimSun", serif; --title-w: 900;
  --f-hand: "LXGW WenKai", "KaiTi", "STKaiti", serif;
  --f-math: "KaTeX_Main", "Times New Roman", serif;
  --sans: var(--f-ui); --serif: var(--f-title); --display: var(--f-title); --kai: var(--f-hand);
  /* 顶栏 */
  --nav-bg: rgba(255,255,255,.8); --nav-ink: var(--ink2); --nav-line: var(--line); --nav-on-bg: var(--ink); --nav-on-ink: #fff; --nav-h: 64px;
  /* 按钮 */
  --btn-bg: #fff; --btn-ink: var(--ink); --btn-line: var(--rule2); --btn-r: 12px; --btn-bw: 1px;
  --btn-pri-bg: var(--accent-grad); --btn-pri-ink: var(--accent-ink); --btn-pri-line: transparent;
  /* 卡牌 */
  --card-bg: #fff; --card-line: var(--line); --card-bw: 1px; --card-r: .8em; --card-sh: 0 .25em .9em rgba(20,24,60,.12);
  --card-name-f: var(--f-title); --card-name-w: 900; --card-art-r: .5em;
  --back-bg: linear-gradient(150deg, #4f46e5, #7c3aed); --back-line: rgba(255,255,255,.55); --back-ink: #fff;
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.4,.64,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-ui); color: var(--ink); font-size: 15.5px; line-height: 1.7; min-height: 100vh; -webkit-font-smoothing: antialiased;
  background-color: var(--bg); background-image: var(--bg-img); background-attachment: fixed; }
.bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { position: relative; z-index: 1; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4, h5 { font-family: var(--f-title); font-weight: var(--title-w); margin: 0; color: var(--ink); line-height: 1.3; letter-spacing: .5px; }
.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.muted { color: var(--muted); }
.kai { font-family: var(--f-hand); }
.wrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 26px 0 80px; }
.empty { padding: 40px; text-align: center; color: var(--muted); font-size: 15.5px; }
.eyebrow { font: 500 13.5px/1.3 var(--f-ui); letter-spacing: 1px; color: var(--muted); }
.crumbs { font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--ink2); }
.backbtn { display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 4px 0; padding: 2px 13px 2px 10px; border-radius: var(--pill); border: var(--btn-bw) solid var(--btn-line); background: var(--paper); color: var(--ink) !important; font: 600 13.5px/1.6 var(--f-ui); text-decoration: none !important; vertical-align: middle; transition: background .15s, transform .15s; }
.backbtn:hover { background: var(--nav-on-bg); color: var(--nav-on-ink) !important; transform: translateX(-2px); }
html[data-theme="note"] .backbtn { border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; background: #fff; }
html[data-theme="note"] .backbtn:hover { background: #fff27a; color: #23283b !important; }
html[data-theme="wood"] .backbtn { background: #fffaf0; }
.outline, .outline-lg { color: var(--ink); }
.grad-text { color: var(--accent); }
::selection { background: var(--hl); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 11px; border: 3px solid transparent; background-clip: padding-box; }

/* ───── 入场 / 页面切换 ───── */
.rise { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.fade-in { animation: fadein .4s both; }
@keyframes fadein { from { opacity: 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .25s ease-in both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
::view-transition-group(topnav), ::view-transition-old(topnav), ::view-transition-new(topnav) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.no-vt body { animation: fadein .4s both; }
.no-vt body.leaving #app { opacity: 0; transform: translateY(-6px); transition: .2s ease-in; }
.page-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 999; background: var(--accent-grad); pointer-events: none; }
.page-progress.go { width: 80%; transition: width 1.6s cubic-bezier(.1,.7,.2,1); }

/* ───── 面板 ───── */
.sheet, .panel { position: relative; border-radius: var(--r); padding: 22px 24px; background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh1); }
.sheet .sheet-title { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.sheet .sheet-title h2, .sheet .sheet-title h3 { font-size: 22.5px; }
.sheet .sheet-title .sp { flex: 1; }
.bar-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; }
.bar-title h2 { font-size: 25.5px; }
.bar-title small { color: var(--muted); font-size: 14px; }
/* 标签条（原彩带） */
.ribbon { display: inline-block; padding: 3px 14px 4px; border-radius: var(--r-xs); font: var(--title-w) 16px/1.4 var(--f-title); color: var(--accent-ink); background: var(--accent-grad); letter-spacing: 1px; }
.ribbon.gold { background: var(--gold); color: #fff; } .ribbon.red { background: var(--red); color: #fff; }
.ribbon.green { background: var(--green); color: #fff; } .ribbon.violet { background: var(--violet); color: #fff; }
.tape, .clip, .deco { display: none; }
/* 印章（判分 / 导师） */
.stamp { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; transform: rotate(-10deg); text-align: center; line-height: 1.1;
  font: var(--title-w) 18px var(--f-title); color: var(--red); border: 2.5px solid currentColor; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px currentColor; background: transparent; letter-spacing: 1px; }
.stamp.sq { border-radius: 8px; width: auto; height: auto; padding: 4px 12px; }
.stamp.green { color: var(--green); } .stamp.blue { color: var(--blue); }
.redpen { color: var(--red); }

/* ───── 顶栏 ───── */
.topnav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px; padding: 0 24px; height: var(--nav-h);
  background: var(--nav-bg); border-bottom: var(--bw) solid var(--nav-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); view-transition-name: topnav; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none !important; color: var(--ink); }
.brand-mark { position: relative; width: 36px; height: 40px; flex: none; }
.brand-mark i { position: absolute; width: 24px; height: 33px; top: 3px; border-radius: 5px; border: 1.5px solid var(--ink); background: var(--paper); }
.brand-mark i:nth-child(1) { left: 1px; transform: rotate(-12deg); }
.brand-mark i:nth-child(2) { left: 10px; transform: rotate(7deg); background: var(--accent-grad); border-color: var(--ink); }
.brand-mark b { position: absolute; left: 13px; top: 10px; width: 20px; text-align: center; transform: rotate(7deg); font: 700 17px/1 var(--f-math); color: var(--accent-ink); }
.brand:hover .brand-mark i:nth-child(2) { transform: rotate(13deg) translateY(-2px); transition: transform .3s var(--spring); }
.brand-text { display: grid; line-height: 1.15; }
.brand-text b { font: var(--title-w) 21.5px/1.2 var(--f-title); letter-spacing: 2px; color: var(--nav-brand, var(--ink)); }
.brand-text i { font: 500 11.5px/1.5 var(--f-ui); color: var(--nav-ink); letter-spacing: 2px; font-style: normal; opacity: .85; }
.navlinks { display: flex; gap: 4px; margin-left: 8px; }
.navlinks a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--btn-r); font: 500 15.5px/1 var(--f-ui); color: var(--nav-ink); text-decoration: none; transition: background .15s, color .15s; }
.navlinks a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.navlinks a:hover { background: var(--nav-hover, rgba(0,0,0,.05)); color: var(--nav-ink); }
.navlinks a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); }
.me { margin-left: 4px; display: flex; align-items: center; gap: 10px; }
.me .stat { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--pill); border: var(--btn-bw) solid var(--btn-line); background: var(--btn-bg); color: var(--ink2); font-size: 13.5px; }
.me .stat b { font-variant-numeric: tabular-nums; color: var(--ink); }
.me .stat .ico { font-style: normal; font-size: 13px; color: var(--muted); }
.me .stat .ico.w { color: var(--gold); }
.me .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: var(--accent-ink); font: var(--title-w) 18px var(--f-title); transition: transform .25s var(--spring); }
.me .userbtn { display: flex; align-items: center; gap: 9px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; }
.me .userbtn .who { display: grid; line-height: 1.2; text-align: right; }
.me .userbtn .who b { font: 700 15px var(--f-ui); color: var(--nav-brand, var(--ink)); }
.me .userbtn .who small { font-size: 12px; color: var(--nav-ink); }
.me .userbtn:hover .avatar { transform: scale(1.06); }
.usermenu { position: absolute; right: 18px; top: calc(var(--nav-h) + 6px); width: 240px; padding: 8px; border-radius: var(--r-sm); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh3);
  animation: pop .22s var(--ease); transform-origin: 90% 0; z-index: 60; }
.usermenu .um-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.usermenu .um-head b { display: block; font: var(--title-w) 18px var(--f-title); }
.usermenu .um-head small { color: var(--muted); }
.usermenu button, .usermenu a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; border: none; background: none; border-radius: var(--r-xs);
  font: 500 15px var(--f-ui); color: var(--ink2); cursor: pointer; text-align: left; text-decoration: none; }
.usermenu button:hover, .usermenu a:hover { background: var(--paper2); color: var(--ink); text-decoration: none; }
.usermenu .danger { color: var(--red); }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
/* 风格切换 */
.themepick { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pill); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line); }
.themepick button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border: none; border-radius: var(--pill); background: transparent; cursor: pointer; font: 500 13.5px/1.4 var(--f-ui); color: var(--ink2); }
.themepick button:hover { background: var(--paper); }
.themepick button.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.themepick .sw { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.15); }
.sw-note { background: #fbfaf5 linear-gradient(#cfdcf0 1px, transparent 1px) 0 0 / 100% 5px; box-shadow: inset 0 -6px 0 #ffe45c; }
.sw-light { background: linear-gradient(135deg, #5b5bf0, #c084fc); }
.sw-wood { background: #e2cfa8; box-shadow: inset 0 0 0 4px #e2cfa8, inset 0 0 0 9px #fff; }

/* ───── 按钮 ───── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 18px; border-radius: var(--btn-r);
  font: 500 15.5px/1.3 var(--f-ui); color: var(--btn-ink); background: var(--btn-bg); border: var(--btn-bw) solid var(--btn-line); box-shadow: var(--btn-sh, 0 1px 2px rgba(0,0,0,.05));
  cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: transform .12s, box-shadow .15s, background .15s, filter .15s; }
.btn:hover { color: var(--btn-ink); transform: translateY(-1px); box-shadow: var(--btn-sh-h, 0 4px 12px rgba(0,0,0,.08)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.gold, .btn.primary { background: var(--btn-pri-bg); color: var(--btn-pri-ink); border-color: var(--btn-pri-line); font-weight: 700; }
.btn.gold:hover, .btn.primary:hover { color: var(--btn-pri-ink); filter: brightness(1.04); }
.btn.mana, .btn.blue { background: var(--blue); color: #fff; border-color: transparent; }
.btn.red, .btn.danger { background: var(--red); color: #fff; border-color: transparent; }
.btn.green { background: var(--green); color: #fff; border-color: transparent; }
.btn.mana:hover, .btn.blue:hover, .btn.red:hover, .btn.danger:hover, .btn.green:hover { color: #fff; filter: brightness(1.05); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 12px; font-size: 14px; border-radius: calc(var(--btn-r) * .8); }
.btn.lg { padding: 12px 28px; font-size: 18px; border-radius: calc(var(--btn-r) * 1.15); }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 25%, transparent); } }
.ai-tag { display: inline-block; font: 700 11.5px/1 var(--f-ui); padding: 3px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--pill); font-size: 13px; font-weight: 500; border: 1px solid var(--rule2); background: var(--paper); color: var(--ink2); white-space: nowrap; }
.chip.jade, .chip.green { background: var(--ji-bg); color: var(--ji); border-color: transparent; }
.chip.blue { background: var(--jin-bg); color: var(--jin); border-color: transparent; }
.chip.red { background: var(--da-bg); color: var(--da); border-color: transparent; }
.chip.gold { background: var(--tong-bg); color: var(--tong); border-color: transparent; }
.chip.violet, .chip.ai { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.field { width: 100%; padding: 10px 14px; border-radius: var(--btn-r); border: var(--btn-bw) solid var(--btn-line); background: var(--field-bg, #fff); color: var(--ink); font: 15.5px/1.5 var(--f-ui); outline: none; resize: vertical; transition: box-shadow .15s, border-color .15s; }
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus, color-mix(in srgb, var(--accent) 18%, transparent)); }
.searchbox { position: relative; display: flex; align-items: center; }
.searchbox svg { position: absolute; left: 13px; width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2.2; }
.searchbox .field { padding-left: 38px; }
.tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: calc(var(--btn-r) + 4px); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button { padding: 6px 16px; font: 500 15.5px var(--f-ui); color: var(--ink2); background: transparent; border: none; border-radius: var(--btn-r); cursor: pointer; transition: background .15s, color .15s; }
.tabs button:hover { color: var(--ink); background: var(--paper); }
.tabs button.on { color: var(--tab-on-ink, var(--ink)); background: var(--tab-on-bg, var(--paper)); box-shadow: 0 1px 3px rgba(0,0,0,.1); font-weight: 700; }
.tabs button .n { font-size: 13px; margin-left: 4px; opacity: .7; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--btn-r); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line); }
.seg button { padding: 4px 12px; font: 500 14px var(--f-ui); border: none; background: transparent; cursor: pointer; color: var(--ink2); border-radius: calc(var(--btn-r) * .7); transition: background .15s; }
.seg button:hover { background: var(--paper); }
.seg button.on { background: var(--seg-on-bg, var(--ink)); color: var(--seg-on-ink, #fff); }
.lvl { display: inline-flex; gap: 3px; vertical-align: middle; }
.lvl i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--rule2); }
.lvl i.f { background: currentColor; }
.lvl-word { font-size: 13.5px; font-weight: 700; }
.lvl-1 { color: var(--ji); } .lvl-2 { color: var(--jin); } .lvl-3 { color: var(--gold); } .lvl-4 { color: var(--da); }
.pill { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: 6px; font: 700 12.5px/1.65 var(--f-ui); white-space: nowrap; color: var(--tc, var(--ink2)); background: var(--tbg, var(--paper2)); }
.pill.ji { --tc: var(--ji); --tbg: var(--ji-bg); } .pill.jin { --tc: var(--jin); --tbg: var(--jin-bg); } .pill.da { --tc: var(--da); --tbg: var(--da-bg); }
.pill.bei { --tc: var(--bei); --tbg: var(--bei-bg); } .pill.tong { --tc: var(--tong); --tbg: var(--tong-bg); } .pill.temp { --tc: var(--ink2); --tbg: var(--paper2); }
.arrow { color: var(--muted); margin: 0 3px; }

/* ═════════ 卡牌 ═════════ */
.t-ji { --tc: var(--ji); --tbg: var(--ji-bg); } .t-jin { --tc: var(--jin); --tbg: var(--jin-bg); } .t-da { --tc: var(--da); --tbg: var(--da-bg); }
.t-bei { --tc: var(--bei); --tbg: var(--bei-bg); } .t-tong { --tc: var(--tong); --tbg: var(--tong-bg); } .t-temp { --tc: var(--muted); --tbg: var(--paper2); }
.card { --w: 150px; --tc: var(--ji); --tbg: var(--ji-bg);
  position: relative; width: var(--w); aspect-ratio: 5 / 7; flex: none; font-size: calc(var(--w) / 11); border-radius: var(--card-r); padding: .38em; cursor: pointer; user-select: none;
  background: var(--card-bg); border: var(--card-bw) solid var(--card-line); box-shadow: var(--card-sh); color: var(--ink); font-family: var(--f-ui);
  transition: transform .25s var(--ease), box-shadow .25s; transform-style: preserve-3d; }
.card.xs { --w: 86px; } .card.sm { --w: 116px; } .card.md { --w: 150px; } .card.lg { --w: 270px; }
.card:hover { box-shadow: var(--card-sh-h, 0 .6em 1.6em rgba(20,24,60,.18)); }
.card.tilt { transition: box-shadow .2s; }
.card .pc { position: relative; height: 100%; display: flex; flex-direction: column; }
.card .pc-art { position: relative; flex: 0 0 46%; border-radius: var(--card-art-r); overflow: hidden; display: grid; place-items: center; background: var(--tbg); }
.card .glyph { position: relative; z-index: 1; font: 700 1.45em/1.1 var(--f-math); color: var(--tc); text-align: center; padding: 0 .3em; max-width: 100%; }
.card .glyph.long { font-size: 1.02em; } .card .glyph.xlong { font-size: .78em; }
.card .glyph .katex { font-size: 1em; }
.card .pc-name { position: relative; z-index: 2; margin: .38em 0 .08em; text-align: center; font: var(--card-name-w) 1em/1.2 var(--card-name-f); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .pc-band { display: flex; align-items: center; justify-content: center; gap: .3em; margin-bottom: .2em; font: 500 .5em/1.3 var(--f-ui); color: var(--tc); white-space: nowrap; overflow: hidden; letter-spacing: .05em; }
.card .pc-band .ch { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.card .pc-band .ch:not(:empty)::before { content: '·'; margin-right: .3em; }
.card .pc-role { flex: 1; min-height: 0; padding: .3em .3em 0; border-top: 1px solid var(--rule); font-size: .56em; line-height: 1.45; color: var(--ink2); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card .pc-foot { position: absolute; right: .3em; bottom: 0; font: 500 .4em var(--f-ui); color: var(--faint); letter-spacing: .02em; }
.card .cost { position: absolute; z-index: 5; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; font: 700 .92em/1 var(--f-ui); color: #fff; box-shadow: 0 0 0 .14em var(--card-bg); }
.card .cost.mana { left: -.45em; top: -.45em; background: var(--mana); }
.card .cost.hp { right: -.45em; top: -.45em; background: var(--hp); }
.card .badge { position: absolute; bottom: -.55em; left: 50%; transform: translateX(-50%); z-index: 6; padding: .08em .65em .12em; border-radius: var(--pill); font: 700 .58em/1.4 var(--f-ui); white-space: nowrap; background: var(--ink); color: var(--paper); }
.card .glare { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: soft-light; }
.card.tilt .glare { opacity: 1; }
.card .opt-mark { position: absolute; right: -.3em; top: 2.4em; z-index: 6; font: 700 .52em/1.4 var(--f-ui); background: var(--accent); color: #fff; padding: .05em .5em; border-radius: .4em; }
.card.xs .pc-role, .card.xs .pc-band, .card.sm .pc-role, .card.sm .pc-band, .card.xs .pc-foot, .card.sm .pc-foot { display: none; }
.card.xs .pc-art, .card.sm .pc-art { flex: 1 1 auto; }
.card.xs .pc-name, .card.sm .pc-name { font-size: 1.15em; margin: .3em 0 .1em; }
.card.t-da { --card-line: var(--da-line, var(--da)); }
.card.t-temp .pc-role { font-family: var(--f-hand); font-size: .74em; -webkit-line-clamp: 8; text-align: left; background: repeating-linear-gradient(180deg, transparent 0 1.3em, var(--rule) 1.3em calc(1.3em + 1px)); }
.card.locked { filter: grayscale(.85) opacity(.75); }
.card.locked::before { content: '未学'; position: absolute; z-index: 7; left: 50%; top: 13%; transform: translate(-50%, -50%); font: 700 .62em/1 var(--f-ui); color: #fff; padding: .3em .7em; border-radius: var(--pill); background: rgba(40,40,50,.72); }
.card.locked:hover { filter: grayscale(.4); }
.card.is-fog .pc-art::after { content: ''; position: absolute; inset: -20%; z-index: 2; background: radial-gradient(circle at 30% 40%, rgba(150,130,220,.5), transparent 50%), radial-gradient(circle at 70% 60%, rgba(120,140,220,.45), transparent 55%); filter: blur(5px); animation: fog 5s ease-in-out infinite alternate; }
.card.is-fog > .pc::after { content: '迷雾'; position: absolute; left: .1em; top: .1em; z-index: 3; font: 700 .52em/1.4 var(--f-ui); color: #fff; background: var(--violet); padding: 0 .45em; border-radius: .35em; }
@keyframes fog { to { transform: translate(8%, -6%) scale(1.1); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* 卡背 */
.card-back { --w: 116px; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .07); position: relative; flex: none; overflow: hidden; display: block; background: var(--back-bg); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.card-back::before { content: ''; position: absolute; inset: 8%; border-radius: calc(var(--w) * .04); border: 1px solid var(--back-line); box-shadow: inset 0 0 0 calc(var(--w) * .025) transparent, inset 0 0 0 calc(var(--w) * .025 + 1px) var(--back-line); }
.card-back::after { content: 'Σ'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 calc(var(--w) * .3) var(--f-math); color: var(--back-ink); opacity: .9; }
.pile { position: relative; width: var(--w, 116px); aspect-ratio: 5/7; display: block; }
.pile .card-back { position: absolute; inset: 0; --w: inherit; width: 100%; }
.pile .card-back:nth-child(1) { transform: translate(-4px, 4px) rotate(-7deg); }
.pile .card-back:nth-child(2) { transform: translate(-2px, 2px) rotate(-3deg); }
.pile .card-back:nth-child(3) { transform: rotate(2deg); }

/* ───── 卡牌详情 / 成品卡 ───── */
.card-detail { display: grid; grid-template-columns: 300px 1fr; gap: 28px; }
.cd-left { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 14px; }
.cd-acts { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cd-acts .btn { width: 100%; }
.final { --tc: var(--ji); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh1); }
.final .fhead { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--tbg, var(--paper2)); }
.final .fhead h3 { color: var(--tc); font-size: 21.5px; }
.final .fhead .cd { margin-left: auto; font-size: 13.5px; color: var(--muted); }
.final .frow { display: grid; grid-template-columns: 100px 1fr; border-top: 1px solid var(--rule); }
.final .frow:first-of-type { border-top: none; }
.final .frow > b { padding: 11px 12px; font: var(--title-w) 15px var(--f-title); background: var(--paper2); color: var(--ink); border-right: 1px solid var(--rule); }
.final .frow > b small { display: block; font: 500 11.5px var(--f-ui); color: var(--muted); }
.final .frow > div { padding: 10px 16px; font-size: 14.8px; }
.final .frow ol, .final .frow ul { margin: 0; padding-left: 20px; }
.final .frow li { margin: 2px 0; }
.final .play { display: grid; gap: 6px; }
.final .play .k { display: inline-block; min-width: 40px; font-weight: 700; color: var(--accent); }
.final .sigs { display: flex; flex-wrap: wrap; gap: 6px; }
.final .sigs > span { padding: 1px 10px; border-radius: 6px; background: var(--hl); font-size: 14px; }
.fieldbox { padding: 12px 16px; border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.fieldbox h5 { font-size: 16px; margin-bottom: 6px; }
.fieldbox p { margin: 0; }
.fields { display: grid; gap: 12px; align-content: start; }
.opt-row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.opt-btn { text-align: left; padding: 9px 12px; border: var(--btn-bw) solid var(--btn-line); border-radius: var(--btn-r); background: var(--paper); cursor: pointer; display: grid; gap: 3px; font: inherit; color: var(--ink); }
.opt-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.opt-btn small { color: var(--ink2); }

/* ───── 弹窗 / 提示 ───── */
.modal-back { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 30px; background: rgba(20,22,35,.42); backdrop-filter: blur(3px); animation: fadein .2s; overflow: auto; }
.modal { position: relative; width: min(860px, 100%); max-width: 100%; /* TP.modal 的 width:900px 等写在 style 里，窄屏不能撑出横向滚动 */ max-height: calc(100vh - 60px); overflow: auto; padding: 30px 32px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh3); animation: modalin .35s var(--ease); }
.modal h3 { font-size: 25.5px; }
.modal .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: var(--btn-bw) solid var(--btn-line); z-index: 2; background: var(--paper); color: var(--ink2); font: 400 21.5px/1 var(--f-ui); cursor: pointer; transition: transform .15s, background .15s; }
.modal .x:hover { transform: rotate(90deg); background: var(--paper2); }
@keyframes modalin { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes bounce { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px); opacity: 0; z-index: 200; pointer-events: none; transition: .3s var(--ease);
  display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 12px; border-radius: var(--pill); background: var(--ink); color: var(--paper); font: 500 15.5px var(--f-ui); box-shadow: var(--sh3); }
.toast::before { content: '✓'; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--f-ui); color: #fff; background: var(--green); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err::before { content: '!'; background: var(--red); }
.spark { position: fixed; z-index: 300; pointer-events: none; border-radius: 50%; }
.loading-ritual { display: grid; justify-items: center; gap: 14px; padding: 16px 6px 6px; text-align: center; }
.loading-ritual .shuffle { position: relative; width: 120px; height: 150px; }
.loading-ritual .shuffle .card-back { --w: 92px; position: absolute; left: 14px; top: 10px; animation: shuf 1.2s var(--ease) infinite; }
.loading-ritual .shuffle .card-back:nth-child(2) { animation-delay: .2s; }
.loading-ritual .shuffle .card-back:nth-child(3) { animation-delay: .4s; }
@keyframes shuf { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-46px) rotate(-12deg); } 60% { transform: translateX(40px) rotate(10deg); z-index: 3; } }
.loading-ritual .steps { font-size: 15.5px; color: var(--ink2); min-height: 24px; animation: fadein .4s; }
.loading-ritual .bar { width: 220px; height: 6px; border-radius: 6px; background: var(--paper3); overflow: hidden; }
.loading-ritual .bar i { display: block; height: 100%; width: 40%; border-radius: 6px; background: var(--accent-grad); animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ───── 规则书 / 表格 ───── */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rules .r { padding: 14px 16px; border: var(--bw) solid var(--line); background: var(--paper); border-radius: var(--r-sm); }
.rules .r h4 { font-size: 18px; margin-bottom: 4px; }
.rules .r p { margin: 0; font-size: 14.2px; color: var(--ink2); }
.score-table, .ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.score-table { margin-top: 10px; }
.score-table th, .score-table td, .ptable td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.score-table tr:last-child td, .ptable tr:last-child td { border-bottom: none; }
.score-table th, .ptable th { background: var(--paper2); color: var(--ink2); font: 700 14px var(--f-ui); text-align: left; padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--rule2); }
.score-table td.pts { font-weight: 700; font-size: 17px; text-align: center; width: 70px; font-variant-numeric: tabular-nums; }
.score-table td.pos { color: var(--ji); } .score-table td.neg { color: var(--da); }
.ptable tbody tr { transition: background .12s; }
.ptable tbody tr:hover td { background: var(--paper2); }
.ptable .c { text-align: center; }
.ptable .pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ═════════ 首页：封面 + 牌盒 ═════════ */
.cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 30px; align-items: center; padding: 46px 52px; margin-bottom: 30px; overflow: hidden;
  border-radius: var(--r); background: var(--cover-bg, var(--paper)); border: var(--bw) solid var(--line); box-shadow: var(--sh2); }
.cv-main { position: relative; z-index: 2; display: grid; justify-items: start; gap: 12px; }
.cv-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-grad); color: var(--accent-ink); font: var(--title-w) 30px var(--f-title); }
.cv-title { font: var(--title-w) 56px/1.12 var(--f-title); letter-spacing: 4px; }
.cv-sub { font: 500 15px var(--f-ui); color: var(--muted); letter-spacing: 4px; }
.cv-pitch { margin: 6px 0 4px; max-width: 520px; font-size: 16.5px; line-height: 1.9; color: var(--ink2); }
.cv-pitch b { color: var(--ink); }
.cv-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 230px)); gap: 10px; margin-top: 8px; }
.cv-menu a, .cv-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: var(--btn-r); text-decoration: none !important;
  font: 500 16px/1.3 var(--f-ui); color: var(--btn-ink); background: var(--btn-bg); border: var(--btn-bw) solid var(--btn-line); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; text-align: left; }
.cv-menu a:hover, .cv-menu button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); color: var(--btn-ink); }
.cv-menu em { font-style: normal; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.cv-menu .go { grid-column: 1 / -1; padding: 15px 20px; font-size: 18px; font-weight: 700; background: var(--btn-pri-bg); color: var(--btn-pri-ink); border-color: var(--btn-pri-line); }
.cv-menu .go:hover { color: var(--btn-pri-ink); }
.cv-menu .go em { color: inherit; opacity: .8; font-size: 14px; font-weight: 500; }
.cv-fan { position: relative; height: 330px; }
.cv-fan .card { position: absolute; left: 50%; top: 40px; --w: 170px; transform-origin: 50% 115%; animation: fanin .8s var(--ease) both; }
.cv-fan .card:nth-child(1) { margin-left: -205px; rotate: -12deg; translate: 0 22px; animation-delay: .15s; }
.cv-fan .card:nth-child(2) { margin-left: -85px; z-index: 2; animation-delay: .25s; }
.cv-fan .card:nth-child(3) { margin-left: 35px; rotate: 12deg; translate: 0 22px; animation-delay: .35s; }
.cv-fan .card:hover { z-index: 3; }
@keyframes fanin { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.volnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; position: sticky; top: calc(var(--nav-h) + 10px); z-index: 6; }
.volnav a { padding: 5px 14px; border-radius: var(--pill); font: 500 14.5px var(--f-ui); color: var(--ink2); background: var(--paper); border: var(--btn-bw) solid var(--btn-line); text-decoration: none !important; transition: background .15s, color .15s; }
.volnav a:hover, .volnav a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); border-color: transparent; }
.volnav .vn-top { padding: 5px 14px; border-radius: var(--pill); font: 600 14px var(--f-ui); color: var(--ink2); background: transparent; border: 0; cursor: pointer; }
.volnav .vn-top:hover { color: var(--ink); text-decoration: underline; }
.volnav .vn-top[hidden] { display: none; }
.chbox { scroll-margin-top: calc(var(--nav-h) + 80px); }
.chbox.flash { animation: chflash 1.6s ease-out .3s 2; }
@keyframes chflash { 0%, 100% { outline: 3px solid transparent; outline-offset: 4px; } 40% { outline: 3px solid var(--c); outline-offset: 4px; } }
.vol { margin-bottom: 34px; scroll-margin-top: calc(var(--nav-h) + 60px); }
.vol-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule2); }
.vol-head h2 { font-size: 25.5px; letter-spacing: 2px; }
.vol-head small { color: var(--muted); font-size: 14px; }
.vol-head .vp { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.meter { position: relative; width: 140px; height: 6px; border-radius: 6px; background: var(--paper3); overflow: hidden; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--accent-grad); }
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; }
.chbox { --c: var(--accent); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border-radius: var(--r-sm); text-decoration: none !important; color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh1); transition: transform .2s var(--ease), box-shadow .2s; min-height: 196px; }
.chbox:hover { transform: translateY(-4px); box-shadow: var(--sh2); color: var(--ink); }
.cb-top { display: flex; align-items: center; gap: 10px; }
.cb-glyph { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; font: 700 23.5px/1 var(--f-math); color: #fff; background: var(--c); }
.cb-no { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.cb-stars { margin-left: auto; font-size: 14px; letter-spacing: 1px; color: var(--faint); }
.cb-stars .on { color: var(--gold); }
.chbox h3 { font-size: 18px; line-height: 1.35; margin-top: 4px; }
.cb-motto { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-prog { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.cb-prog .meter { flex: 1; width: auto; }
.cb-prog .meter i { background: var(--c); }
.cb-kv { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); }
.cb-kv b { color: var(--ink); font-weight: 700; margin-right: 2px; font-variant-numeric: tabular-nums; }
.cb-flag { position: absolute; top: 12px; right: 12px; font-size: 11.5px; padding: 0 7px; border-radius: 5px; background: var(--paper2); color: var(--muted); }
.cb-flag.book { background: var(--hl); color: var(--ink); }
.chbox.gen .cb-glyph { font-family: var(--f-title); font-size: 21.5px; }
.chbox.gen { min-height: 150px; }
.side { display: grid; gap: 20px; position: sticky; top: calc(var(--nav-h) + 16px); }
.side .sheet { padding: 18px 18px 20px; }
.side h3 { font-size: 19.5px; margin-bottom: 12px; }
.profile { text-align: left; }
.profile .ph { display: flex; align-items: center; gap: 12px; }
.profile .av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-grad); color: var(--accent-ink); font: var(--title-w) 25.5px var(--f-title); }
.profile .nm { font: var(--title-w) 20.5px/1.3 var(--f-title); }
.profile .sub { font-size: 13px; color: var(--muted); }
.profile .lv { margin-left: auto; align-self: flex-start; padding: 0 8px; border-radius: 6px; font: 700 13px/1.7 var(--f-ui); background: var(--accent-soft); color: var(--accent); }
.profile .xpline { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; font-size: 12.5px; color: var(--muted); }
.profile .xpline .meter { flex: 1; width: auto; }
.profile .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.profile .kv div { border-radius: var(--r-xs); padding: 7px 10px; background: var(--paper2); }
.profile .kv b { display: block; font: 700 21.5px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.profile .kv span { font-size: 12.5px; color: var(--muted); }
.guest-cta { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-xs); background: var(--paper2); font-size: 13.5px; color: var(--ink2); }
.guest-cta .btn { margin-top: 10px; width: 100%; }
.recent { display: grid; gap: 6px; }
.recent a { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); padding: 8px 10px; border-radius: var(--r-xs); background: var(--paper2); transition: background .12s; text-decoration: none !important; }
.recent a:hover { background: var(--paper3); color: var(--ink); }
.recent a .nm { font-weight: 700; white-space: nowrap; }
.recent a .tt { color: var(--muted); font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; flex: 1; }
.recent a .r { margin-left: auto; font: 700 12.5px/1.6 var(--f-ui); padding: 0 8px; border-radius: 5px; background: var(--bei-bg); color: var(--bei); white-space: nowrap; }
.recent a .r.won { background: var(--ji-bg); color: var(--ji); } .recent a .r.dead { background: var(--da-bg); color: var(--da); } .recent a .r.active { background: var(--jin-bg); color: var(--jin); }
.howto { display: grid; gap: 9px; counter-reset: f; }
.howto div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink2); }
.howto div::before { counter-increment: f; content: counter(f); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper3); display: grid; place-items: center; font: 700 13px var(--f-ui); color: var(--ink); margin-top: 1px; }
.howto b { color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13.5px; color: var(--ink2); }
.tierbar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; background: var(--paper3); }
.tierbar i { display: block; height: 100%; }
.piles-row-home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pilelink { display: grid; justify-items: center; gap: 8px; padding: 10px 4px 8px; border-radius: var(--r-xs); color: var(--ink); font-size: 14px; text-align: center; transition: background .15s; text-decoration: none !important; }
.pilelink:hover { background: var(--paper2); color: var(--ink); }
.pilelink .pile { --w: 54px; transition: transform .35s var(--spring); }
.pilelink:hover .pile { transform: rotate(-6deg) translateY(-4px); }
.pilelink small { display: block; font-size: 12.5px; color: var(--muted); }

/* ═════════ 章节页：牌盒 ═════════ */
.box-head { --c: var(--accent); position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin: 10px 0 22px; padding: 24px 28px;
  border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh1); overflow: hidden; }
.box-head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.box-lid { --c: var(--accent); width: 88px; height: 88px; border-radius: 22px; display: grid; place-items: center; font: 700 40px/1 var(--f-math); color: #fff; background: var(--c); }
.box-head h1 { font-size: 34px; letter-spacing: 2px; margin: 2px 0 6px; }
.box-head .motto { color: var(--ink2); font-size: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.box-stats { display: flex; gap: 8px; }
.box-stats div { background: var(--paper2); border-radius: var(--r-xs); padding: 6px 14px 5px; text-align: center; min-width: 74px; }
.box-stats b { display: block; font: 700 22.5px/1.2 var(--f-ui); font-variant-numeric: tabular-nums; }
.box-stats span { font-size: 12.5px; color: var(--muted); }
.tabsheet { margin-top: 0; }
.unit { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px dashed var(--rule2); }
.unit:last-child { border-bottom: none; }
.unit .uh .code { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.unit .uh h4 { font-size: 21.5px; margin: 8px 0 4px; }
.unit .uh p { margin: 0 0 10px; font-size: 14px; color: var(--ink2); }
.unit .uh .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.unit .ucards { display: flex; gap: 24px 20px; flex-wrap: wrap; align-items: flex-start; padding: 10px 0 0 10px; }
.unit .cslot { display: grid; gap: 14px; justify-items: center; }
.unit .cslot .acts { display: flex; gap: 6px; }
.tier-sec { margin-top: 14px; }
.tier-sec > h3 { display: flex; align-items: center; gap: 10px; font-size: 23.5px; padding: 6px 0 10px; color: var(--tc, var(--ink)); border-bottom: 1px solid var(--rule2); }
.tier-sec > h3 small { font: 500 13.5px var(--f-ui); color: var(--muted); }
/* 题库：左侧功能栏（搜索 / 模块 19 章按册 / 来源 / 难度）+ 右侧题卡 */
.bv-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 22px; align-items: start; }
.bv-side { position: sticky; top: calc(var(--nav-h) + 14px); max-height: calc(100vh - var(--nav-h) - 28px); overflow: auto; display: flex; flex-direction: column; gap: 16px;
  padding: 16px 14px; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh1); scrollbar-width: thin; }
.bv-grp h4 { margin: 0 0 6px; font: var(--title-w) 16px var(--f-title); color: var(--ink); }
.bv-vol small { display: block; margin: 9px 2px 3px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.bv-opts { display: flex; flex-direction: column; gap: 2px; }
.bv-vol .bv-opts { display: grid; grid-template-columns: 1fr 1fr; }
.bv-opts button { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 6px 9px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-xs); font: 500 14.5px var(--f-ui); color: var(--ink2); text-align: left; white-space: nowrap; transition: background .15s; }
.bv-opts button em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.bv-opts button:hover { background: var(--paper2); }
.bv-opts button.on { background: var(--seg-on-bg, var(--ink)); color: var(--seg-on-ink, #fff); font-weight: 700; }
.bv-opts button.on em { color: inherit; opacity: .75; }
.bv-opts.lv { flex-direction: row; flex-wrap: wrap; }
.bv-opts.lv button { width: auto; flex: 1 0 auto; justify-content: center; }
.bv-count { margin: 2px 0 12px; font-size: 13px; font-weight: 700; color: var(--ink2); }
/* 窄屏也保持“左栏筛选 + 右栏题卡”，只把左栏收窄（不叠到顶部） */
@media (max-width: 1180px) {
  .bv-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 900px) {
  .bv-layout { grid-template-columns: 172px minmax(0, 1fr); gap: 12px; }
  .bv-side { padding: 12px 8px; gap: 12px; top: calc(var(--nav-h) + 8px); max-height: calc(100vh - var(--nav-h) - 16px); }
  .bv-vol .bv-opts { grid-template-columns: 1fr; }
  .bv-opts button { padding: 5px 7px; font-size: 13.5px; }
  .bv-opts button em { font-size: 11px; }
  .bv-side .searchbox .field { font-size: 13px; padding-left: 30px; }
  .bv-side .searchbox svg { left: 9px; width: 15px; height: 15px; }
}
@media (max-width: 480px) {
  .bv-layout { grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
  .bv-side { padding: 10px 6px; }
  .bv-opts button { padding: 4px 5px; font-size: 12.5px; gap: 3px; }
  .bv-opts button em { font-size: 10px; }
}
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filterbar .sp { flex: 1; }
.filterbar .searchbox { width: 320px; }
.deckbar { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 5; display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: var(--r-sm); margin-bottom: 16px; background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh2); }
.deckbar .sp { flex: 1; }
.deckbar { flex-wrap: wrap; row-gap: 8px; z-index: 10; }  /* 牌角的费用 / ✓ 徽标是 z-index 5，别盖到吸顶条上 */
.deckbar > b, .deckbar > .chip, .deckbar > .muted { white-space: nowrap; }
.pick { cursor: pointer; position: relative; display: grid; justify-items: center; gap: 10px; }
.pick .card { transition: transform .3s var(--spring), filter .2s; }
.pick:not(.on) .card { filter: saturate(.3) opacity(.7); }
.pick.on .card { transform: translateY(-10px); }
.pick.full { cursor: not-allowed; }
.pick.full .card { filter: saturate(.1) opacity(.38); }
.pick.on::after { content: '✓'; position: absolute; top: -14px; right: -6px; z-index: 8; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--f-ui); color: #fff; background: var(--green); }
.pick-grid { display: flex; flex-wrap: wrap; gap: 26px 18px; padding-top: 14px; }

/* ═════════ 题卡（题库 / 题怪） ═════════ */
.qgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.qcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; background: var(--paper); border-radius: var(--r-sm); border: var(--bw) solid var(--line); box-shadow: var(--sh1); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; }
.qcard:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.qcard .shot { position: relative; padding: 28px 18px 12px; max-height: 300px; overflow: hidden; cursor: zoom-in; background: #fff; }
.qcard .shot img { display: block; width: 100%; max-width: 1000px; height: auto; }
.qcard .shot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, #fff); }
.qcard .shot .orig-tag { position: absolute; top: 8px; left: 12px; z-index: 2; font: 500 12.5px var(--f-ui); color: var(--muted); padding: 0 8px; border-radius: 5px; background: var(--paper2); }
.qcard .qside { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--paper2); border-left: 1px solid var(--rule); font-size: 13px; }
.qcard .qside .ser { font: var(--title-w) 16px var(--f-title); }
.qcard .qside .book { color: var(--ink2); font-weight: 500; }
.qcard .qside .sec { color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qcard .qside .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.qcard .qside .tags .chip { font-size: 12px; padding: 0 7px; }
.qcard .qside .btn { margin-top: auto; }
.qcard .mon { font-family: var(--f-title); font-weight: var(--title-w); color: var(--da); font-size: 15px; }
.qcard .stars { color: var(--gold); letter-spacing: 1px; }
.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 22px; color: var(--ink2); font-size: 15px; }
.origview { display: grid; gap: 12px; }
.origview img { max-width: 100%; display: block; margin: 0 auto; background: #fff; }
.orig-frame { position: relative; border: 1px solid var(--rule2); background: #fff; padding: 26px 14px 12px; border-radius: var(--r-sm); }
.orig-frame::before { content: '原书截图'; position: absolute; top: 6px; left: 12px; padding: 0 8px; font: 500 12.5px var(--f-ui); color: var(--muted); background: var(--paper2); border-radius: 5px; }
.orig-frame img { max-width: 100%; display: block; margin: 8px auto 0; }

/* ═════════ 学牌：空壳卡 ═════════ */
.learn-top { display: flex; align-items: flex-end; gap: 16px; margin: 6px 0 16px; flex-wrap: wrap; }
.learn-top h1 { font-size: 34px; letter-spacing: 2px; }
.learn-top .sp { flex: 1; }
.learn-steps { display: flex; gap: 2px; padding: 4px; border-radius: var(--btn-r); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line); }
.learn-steps .ls { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: calc(var(--btn-r) * .7); font-size: 14.5px; color: var(--muted); }
.learn-steps .ls i { font: 700 12px var(--f-ui); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--paper3); font-style: normal; }
.learn-steps .ls.on { color: var(--ink); background: var(--paper); font-weight: 700; }
.learn-steps .ls.on i { background: var(--accent-grad); color: var(--accent-ink); }
.sib { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.sib a { padding: 3px 12px; border-radius: var(--pill); background: var(--paper); border: var(--btn-bw) solid var(--btn-line); color: var(--ink2); font-size: 14px; text-decoration: none; }
.sib a:hover { color: var(--ink); background: var(--paper2); }
.sib a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); border-color: transparent; }
.learn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 24px; align-items: start; }
.exbook { padding: 0; overflow: hidden; }
.ex-tabs { display: flex; gap: 6px; align-items: center; padding: 16px 20px 0; flex-wrap: wrap; }
.ex-tabs button { padding: 3px 12px; border-radius: var(--pill); border: var(--btn-bw) solid var(--btn-line); background: var(--paper); font: 500 14.5px var(--f-ui); cursor: pointer; color: var(--ink2); }
.ex-tabs button.on { background: var(--nav-on-bg); color: var(--nav-on-ink); border-color: transparent; }
.ex-tabs .role { font: 700 11.5px var(--f-ui); padding: 0 6px; margin-left: 4px; border-radius: 5px; background: var(--ji-bg); color: var(--ji); }
.ex-body { padding: 16px 20px 22px; display: grid; gap: 12px; }
.ex-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ex-meta b { font: var(--title-w) 18px var(--f-title); }
.ex-src { font-size: 13px; color: var(--muted); width: 100%; }
.blk h6 { margin: 0 0 8px; display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--f-ui); color: var(--ink2); background: var(--paper2); padding: 1px 10px; border-radius: 6px; }
.blk.analysis h6 { background: var(--jin-bg); color: var(--jin); } .blk.solution h6 { background: var(--ji-bg); color: var(--ji); } .blk.note h6 { background: var(--tong-bg); color: var(--tong); }
.reveal-blk .veil { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--rule2); border-radius: var(--r-sm); background: var(--paper2); }
.reveal-blk .hidden-body { display: none; }
.reveal-blk.open .veil { display: none; }
.reveal-blk.open .hidden-body { display: block; animation: rise .4s var(--ease); }
.typed-toggle { font-size: 13px; }
.shell { --tc: var(--ji); border-radius: var(--r); background: var(--paper); overflow: hidden; border: var(--bw) solid var(--line); box-shadow: var(--sh2); }
.shell .sh-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: var(--tbg, var(--paper2)); }
.shell .sh-head .tier { font: 700 13px var(--f-ui); background: var(--tc); color: #fff; padding: 0 9px; border-radius: 5px; }
.shell .sh-head h3 { color: var(--ink); font-size: 22.5px; }
.shell .sh-head .code { font-size: 13.5px; color: var(--muted); }
.shell .sh-head .state { margin-left: auto; font: 500 13px var(--f-ui); background: var(--paper); color: var(--ink2); padding: 1px 10px; border-radius: var(--pill); }
.shell .sh-sub { display: flex; justify-content: space-between; gap: 10px; padding: 8px 18px; background: var(--paper2); font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--rule); }
.shell .row { display: grid; grid-template-columns: 104px 1fr; border-bottom: 1px solid var(--rule); }
.shell .row:last-child { border-bottom: none; }
.shell .row > .lab { padding: 14px; background: var(--paper2); font: var(--title-w) 16px var(--f-title); border-right: 1px solid var(--rule); }
.shell .row > .lab small { display: block; font: 500 11.5px/1.4 var(--f-ui); color: var(--muted); margin-top: 2px; }
.shell .row > .lab .verdict { margin-top: 6px; }
.shell .row > .inp { padding: 10px 16px 12px; min-width: 0; }
.shell .hint { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.shell .hint b { color: var(--accent); }
.lined-input { width: 100%; border: 1px solid var(--rule2); outline: none; resize: none; border-radius: var(--r-xs); background: #fff repeating-linear-gradient(180deg, transparent 0 25px, var(--rule) 25px 26px);
  font: 16px/26px var(--f-ui); color: var(--ink); padding: 0 10px; min-height: 60px; transition: border-color .15s, box-shadow .15s; }
.lined-input::placeholder { color: var(--faint); font-size: 14px; }
.lined-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.step-row { display: grid; grid-template-columns: 26px 1fr 24px; gap: 6px; align-items: start; margin-bottom: 6px; }
.step-row .n { margin-top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper3); display: grid; place-items: center; font: 700 12.5px var(--f-ui); }
.step-row .rm { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 19.5px; margin-top: 2px; }
.step-row .rm:hover { color: var(--red); }
.step-row .lined-input { min-height: 30px; }
.add-step { margin-top: 4px; }
.redfb { margin-top: 8px; font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--red) 80%, #000); padding: 8px 12px; border-radius: var(--r-xs); background: var(--da-bg); font-family: var(--f-hand); }
.redfb.good { color: color-mix(in srgb, var(--green) 75%, #000); background: var(--ji-bg); }
.forge-foot { display: flex; gap: 10px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--rule); background: var(--paper2); }
.forge-foot .sp { flex: 1; }
.mentor { position: relative; margin: 0 0 18px; padding: 16px 18px 16px 104px; border-radius: var(--r-sm); background: var(--paper); border: var(--bw) solid var(--line); color: color-mix(in srgb, var(--red) 75%, #000); font: 16px/1.75 var(--f-hand); box-shadow: var(--sh1); }
.mentor .stamp { position: absolute; left: 16px; top: 16px; width: 70px; height: 70px; font-size: 23.5px; }
.mentor .stamp small { display: block; font-size: 11px; letter-spacing: 1px; }
.mentor ul { margin: 2px 0 6px; padding-left: 20px; }
.mentor .who { font: 700 14px var(--f-ui); color: var(--ink2); margin-bottom: 4px; }
.mentor .risk { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; background: var(--paper2); border-radius: var(--r-xs); color: var(--ink2); font-family: var(--f-ui); }
.mentor .risk svg { width: 40px; height: 40px; flex: none; }
.hist { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; padding: 10px 18px; }
.lprompt { font-size: 13.5px; color: var(--ink2); }

/* ═════════ 牌库 / 大招练习 ═════════ */
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 30px 16px; justify-items: center; padding-top: 12px; }
.lib-slot { display: grid; justify-items: center; gap: 12px; animation: dealin .5s var(--ease) both; }
.lib-slot .fam { font-size: 12.5px; color: var(--muted); text-align: center; }
.lib-slot .drn { margin-top: -8px; font-size: 12px; font-weight: 700; color: var(--da); }
.lib-view { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: var(--btn-r); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line); }
.lib-view button { padding: 6px 4px; border: none; background: transparent; cursor: pointer; font: 600 14.5px var(--f-ui); color: var(--ink2); border-radius: calc(var(--btn-r) * .7); white-space: nowrap; }
.lib-view button.on { background: var(--seg-on-bg, var(--ink)); color: var(--seg-on-ink, #fff); }
.lib-note { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-xs); background: var(--paper); border: 1px solid var(--rule2); font-size: 14px; line-height: 1.7; color: var(--ink2); }
.lib-note b { color: var(--ink); }
.lib-note ul { margin: 4px 0 0; padding-left: 18px; }
.lib-note li + li { margin-top: 4px; }
.lib-note .rule { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.bv-main .libgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@keyframes dealin { from { opacity: 0; transform: translateY(-16px) rotate(-4deg); } }
.drills { display: grid; gap: 16px; }
.kd { border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--paper); overflow: hidden; box-shadow: var(--sh1); }
.kd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--paper2); border-bottom: 1px solid var(--rule); }
.kd-head b { font: var(--title-w) 18px var(--f-title); }
.kd-tip { padding: 10px 16px; font-size: 15px; line-height: 1.7; color: var(--ink2); background: var(--tong-bg); border-bottom: 1px solid var(--rule); }
.drow { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.drow:last-child { border-bottom: none; }
.drow .no { width: 26px; height: 26px; border-radius: 50%; background: var(--paper3); display: grid; place-items: center; font: 700 13px var(--f-ui); }
.drow .prose { font-size: 15px; }
.drow .act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ═════════ 模拟卷 ═════════ */
.papers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.paper-sheet .ph { text-align: center; border-bottom: 1px dashed var(--rule2); padding-bottom: 12px; margin-bottom: 14px; }
.paper-sheet .ph h2 { font-size: 25.5px; letter-spacing: 3px; }
.paper-sheet .ph p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.slotrow td:first-child { font-weight: 700; text-align: center; width: 44px; }
.slotrow .kind { font-size: 13px; color: var(--muted); white-space: nowrap; }
.slotrow .best { color: var(--gold); white-space: nowrap; }
.record td { height: 36px; }
.record .hand { font-size: 15px; color: var(--ink); }
/* 模拟卷左栏：组卷 + 我的卷 */
.lnk { border: none; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bv-vol small { display: flex; justify-content: space-between; align-items: baseline; }
.bv-vol small .lnk { font-size: 12px; letter-spacing: 0; font-weight: 500; }
.bv-opts button:disabled { opacity: .4; cursor: not-allowed; }
.plist { display: grid; gap: 4px; }
.pitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; padding: 7px 9px; border-radius: var(--r-xs); cursor: pointer; border: 1px solid transparent; }
.pitem:hover { background: var(--paper2); }
.pitem.on { background: var(--paper2); border-color: var(--line); }
.pitem b { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem small { grid-column: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem .pprog { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; justify-items: end; gap: 2px; font: 700 12.5px var(--f-ui); color: var(--ink2); }
.pitem .pprog .lnk { font-size: 11.5px; color: var(--muted); }
.bv-main .ptable { font-size: 14px; }
.bv-main .sheet { overflow-x: auto; }

/* ═════════ 登录 / 注册：封面 ═════════ */
.page-login .topnav .navlinks { visibility: hidden; }
.auth { min-height: calc(100vh - var(--nav-h)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 430px); gap: 56px; align-items: center; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 50px; }
.logo-big { position: relative; display: grid; justify-items: start; gap: 10px; }
.logo-big h1 { font: var(--title-w) 68px/1.1 var(--f-title); letter-spacing: 6px; }
.logo-big h1 em { font-style: normal; color: var(--accent); }
.logo-big .ribbon { font-size: 16px; }
.auth-hero .tagline { margin: 22px 0 0; font-size: 18px; line-height: 1.9; color: var(--ink2); }
.auth-hero .tagline b { color: var(--ink); }
.auth-hero .feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.auth-hero .feats span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: var(--pill); background: var(--paper); border: var(--btn-bw) solid var(--btn-line); font-size: 14px; }
.auth-hero .feats i { min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--pill); display: grid; place-items: center; font: 700 12.5px var(--f-ui); font-style: normal; color: var(--accent-ink); background: var(--accent-grad); }
.auth-fan { position: relative; height: 280px; margin-top: 30px; }
.auth-fan .card { position: absolute; top: 12px; --w: 160px; transform-origin: 50% 120%; animation: fanin .7s var(--ease) both, cardbob 7s ease-in-out infinite; }
@keyframes cardbob { 50% { margin-top: -10px; } }
.auth-card { position: relative; padding: 34px 32px 26px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--line); box-shadow: var(--sh3); animation: modalin .5s var(--ease); }
.auth-card > .ribbon { display: block; width: max-content; margin: 0 auto 6px; padding: 0; background: none; color: var(--ink); font-size: 28px; letter-spacing: 3px; }
.auth-card .sub { color: var(--muted); font-size: 14px; text-align: center; margin: 0 0 18px; }
.auth-card .tabs { display: flex; width: 100%; margin-bottom: 18px; }
.auth-card .tabs button { flex: 1; }
.auth-card form { display: grid; gap: 14px; }
.auth[data-mode=login] .reg-only { display: none; }
.frow2 { display: grid; gap: 6px; }
.frow2 label { font: 700 14.5px var(--f-ui); color: var(--ink); }
.frow2 .hintline { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.pw { position: relative; }
.pw .field { padding-right: 44px; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 8px; }
.pw button:hover { background: var(--paper2); }
.pw button svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; }
.grade-pick { display: flex; gap: 6px; }
.grade-pick button { flex: 1; padding: 6px 0; border-radius: var(--btn-r); border: var(--btn-bw) solid var(--btn-line); background: var(--paper); font: 500 15px var(--f-ui); color: var(--ink2); cursor: pointer; transition: background .15s; }
.grade-pick button.on { background: var(--nav-on-bg); color: var(--nav-on-ink); border-color: transparent; }
.strength { height: 5px; border-radius: 5px; background: var(--paper3); overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; transition: width .3s var(--ease), background .3s; }
.auth-err { min-height: 20px; font-size: 14.5px; color: var(--red); font-weight: 700; text-align: center; }
.auth-err.shake { animation: shake .4s; }
.auth-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule2); font-size: 13.5px; color: var(--muted); text-align: center; }
.auth-foot a { font-weight: 700; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } }

/* ───── 公式 / 正文 ───── */
.prose { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.prose p { margin: .3em 0; }
.prose img { max-width: 100%; }
.prose figure { margin: 6px 0; }
.prose figure.orig { position: relative; border: 1px solid var(--rule2); padding: 28px 12px 10px; background: #fff; border-radius: var(--r-sm); }
.prose figure.orig::before { content: '原书截图'; position: absolute; top: 6px; left: 12px; padding: 0 8px; font: 500 12.5px var(--f-ui); color: var(--muted); background: var(--paper2); border-radius: 5px; }
.prose figure.orig img { display: block; margin: 0 auto; }
.prose .typed { display: none; }
.show-typed .prose figure.orig { display: none; }
.show-typed .prose .typed { display: block; }
.prose .think { border-left: 3px solid var(--blue); background: var(--jin-bg); padding: 8px 12px; margin: 8px 0; border-radius: 0 8px 8px 0; }
.prose .warn, .prose .err { border-left: 3px solid var(--red); background: var(--da-bg); padding: 8px 12px; margin: 8px 0; border-radius: 0 8px 8px 0; }
.prose .tip { border-left: 3px solid var(--green); background: var(--ji-bg); padding: 8px 12px; margin: 8px 0; border-radius: 0 8px 8px 0; }
.prose .play, .prose span.play { display: inline-block; padding: 0 8px; border-radius: 5px; background: var(--ji-bg); color: var(--ji); font-size: 13px; font-weight: 700; }
.prose mark, .prose .hl { background: var(--hl); padding: 0 2px; border-radius: 3px; }
.katex { font-size: 1.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
@media (max-width: 1180px) {
  .cover { grid-template-columns: 1fr; padding: 36px 32px; }
  .cv-fan { height: 300px; }
  .home-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .learn, .papers { grid-template-columns: 1fr; }
  .unit { grid-template-columns: 210px 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-fan { display: none; }
  .logo-big h1 { font-size: 52px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 28px); padding-top: 16px; }
  .cover { padding: 28px 20px; }
  .cv-title { font-size: 38px; letter-spacing: 2px; }
  .cv-menu { grid-template-columns: 1fr 1fr; width: 100%; }
  .cv-fan { height: 250px; }
  .cv-fan .card { --w: 130px; }
  .cv-fan .card:nth-child(1) { margin-left: -160px; }
  .cv-fan .card:nth-child(2) { margin-left: -65px; }
  .cv-fan .card:nth-child(3) { margin-left: 30px; }
  .volnav { position: static; }
  .chgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .chbox { min-height: 170px; padding: 14px 12px 12px; }
  .card-detail { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .box-head { grid-template-columns: auto 1fr; padding: 18px; }
  .box-stats { grid-column: 1 / -1; flex-wrap: wrap; }
  .unit { grid-template-columns: 1fr; }
  .qcard { grid-template-columns: 1fr; }
  .qcard .qside { border-left: none; border-top: 1px solid var(--rule); }
  .logo-big h1 { font-size: 40px; letter-spacing: 3px; }
}
.auth .auth-card > .ribbon { background: none; color: var(--ink); transform: none; border-radius: 0; box-shadow: none; padding: 0; }
.navlinks { min-width: 0; }
.navlinks a { white-space: nowrap; flex: none; }
.cb-kv { flex-wrap: wrap; gap: 2px 12px; }
.cb-kv span { white-space: nowrap; }

/* 窄屏：侧栏里的长标题不能把整页撑出横向滚动 */
.home-grid > *, .side > * { min-width: 0; }
.side { grid-template-columns: minmax(0, 1fr); }
.recent a .tt { flex: 1 1 0; }
@media (max-width: 1180px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
/* 再保险：任何装饰都不许把页面撑出横向滚动（clip 不会破坏 sticky） */
body { overflow-x: clip; }
@media (max-width: 480px) {
  .cv-fan { height: 220px; }
  .cv-fan .card { --w: 112px; top: 30px; }
  .cv-fan .card:nth-child(1) { margin-left: -138px; }
  .cv-fan .card:nth-child(2) { margin-left: -56px; }
  .cv-fan .card:nth-child(3) { margin-left: 26px; }
}
@media (max-width: 480px) {
  .cv-menu a, .cv-menu button { display: grid; justify-content: start; gap: 1px; padding: 10px 14px; }
  .cv-menu em { white-space: normal; }
}
.recent { grid-template-columns: minmax(0, 1fr); }
.recent a { min-width: 0; }

/* ═════════ 宽屏：内容铺开，只留窄边距（原来卡在 1280px 居中，大屏两边空一大片） ═════════ */
.wrap { width: min(1800px, calc(100% - clamp(28px, 5vw, 96px))); }
.home-grid { grid-template-columns: minmax(0, 1fr) clamp(320px, 21vw, 400px); gap: clamp(24px, 2vw, 36px); }
.cover { grid-template-columns: minmax(0, 1fr) clamp(460px, 33vw, 600px); }
.chgrid { grid-template-columns: repeat(auto-fill, minmax(222px, 1fr)); }
.cv-pitch { max-width: 600px; }
@media (min-width: 1500px) {
  .cv-menu { grid-template-columns: repeat(2, minmax(0, 270px)); }
  .cv-fan { height: 380px; }
  .cv-fan .card { --w: 196px; }
  .cv-fan .card:nth-child(1) { margin-left: -236px; }
  .cv-fan .card:nth-child(2) { margin-left: -98px; }
  .cv-fan .card:nth-child(3) { margin-left: 40px; }
  .libgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .libgrid .card { --w: 170px; }
}
@media (max-width: 1180px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .cover { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .chgrid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
}
.shell .row { grid-template-columns: 128px 1fr; }
@media (max-width: 760px) { .shell .row { grid-template-columns: 96px 1fr; } }
@media (min-width: 1181px) { .unit .ucards .card { --w: 134px; } }
@media (min-width: 1500px) { .unit { grid-template-columns: 300px 1fr; } .unit .ucards .card { --w: 150px; } }
@media (min-width: 1720px) {
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 原书整页查看（前一页 / 本题页 / 后一页）+ 题卡上的“页面局部” */
.pv-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.pv-tabs button { padding: 5px 12px; border-radius: var(--r-xs); border: var(--bw) solid var(--line); background: var(--paper); font: 600 13.5px var(--f-ui); color: var(--ink2); cursor: pointer; }
.pv-tabs button.on { background: var(--seg-on-bg, var(--ink)); color: var(--seg-on-ink, #fff); border-color: transparent; }
.pv-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
.pv-stage { max-height: 74vh; overflow: auto; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: #fff; }
.pv-page { position: relative; }
.pv-page img { display: block; width: 100%; height: auto; }
.pv-box { position: absolute; border: 2.5px dashed #ef4f5f; border-radius: 4px; background: rgba(239, 79, 95, .06); pointer-events: none; }
.pv-box span { position: absolute; left: -2px; top: -22px; padding: 1px 7px; border-radius: 4px; background: #ef4f5f; color: #fff; font: 600 12px var(--f-ui); white-space: nowrap; }
.prose figure.orig.win { cursor: zoom-in; }
.pagefig { max-width: 900px; margin: 0 auto 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: #fff; }
.pf-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; background: var(--paper2); border-bottom: 1px solid var(--rule2); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.pf-tag { padding: 0 8px; border-radius: 5px; background: #fdeaea; color: #b4232f; font: 600 12.5px/1.8 var(--f-ui); }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tabs button, .pf-zoom { padding: 2px 10px; border-radius: var(--r-xs); border: 1.5px solid var(--rule2); background: var(--paper); color: var(--ink2); font: 600 12.5px/1.7 var(--f-ui); cursor: pointer; }
.pf-tabs button.on { background: var(--seg-on-bg, var(--ink)); color: var(--seg-on-ink, #fff); border-color: transparent; }
.pf-zoom { margin-left: auto; }
.pf-note { padding: 6px 12px; font: 12.5px/1.55 var(--f-ui); color: var(--muted); }
.pf-stage { max-height: 70vh; overflow: auto; border-top: 1px dashed var(--rule2); }
.qscroll .pf-stage { max-height: none; overflow: visible; }
.qscroll .pf-bar { top: -12px; }   /* .qscroll 有 12px 上内边距：吸顶时贴住面板顶，不漏出一条页面 */
.show-typed .pagefig { display: none; }
.prose figure.orig.win::before { content: '原书页局部 · 位置参考'; color: #b4232f; }
.prose figure.orig.win figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.qcard .shot .orig-tag.win { color: #b4232f; background: #ffecee; }
.qcard .tags .chip.warn { color: #9a5b00; border-color: #f2d49b; background: #fff8e6; }
.verify-warn { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-xs); font-size: 14px; line-height: 1.6; color: #9a5b00; background: #fff8e6; border: 1px solid #f2d49b; }
.ans-src { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.ans-src .muted { font-size: 12.5px; }
.prose .verify-warn { margin: 0 0 10px; }
.book-quote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--green); background: color-mix(in srgb, var(--green) 7%, var(--paper)); font-size: 14px; color: var(--ink); }

/* ═════════ 左侧导航栏（原来的顶栏）：宽屏带文字；窄屏收成“图标 + 小字”的窄栏，始终在左边 ═════════ */
:root { --nav-h: 0px; --side-w: 216px; }
body:not(.page-battle) { padding-left: var(--side-w); }
.topnav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); height: auto; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 18px 14px 16px; border-bottom: none; border-right: var(--bw) solid var(--nav-line); overflow-y: auto; scrollbar-width: none; }
.topnav .brand { padding: 0 4px 8px; }
.topnav .navlinks { flex-direction: column; gap: 5px; margin: 0; }
:root .topnav .navlinks a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 16px; white-space: nowrap; }
.topnav .navlinks a svg { display: block; width: 20px; height: 20px; flex: none; }
:root .topnav .themepick { margin: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-sm); }
:root .topnav .themepick button { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; border-radius: var(--r-xs); font-size: 12.5px; }
.topnav .me { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
:root .topnav .me .stat { justify-content: center; }
.topnav .me .btn, .topnav .me .userbtn { grid-column: 1 / -1; justify-content: center; }
.topnav .me .userbtn { justify-content: flex-start; padding: 4px 2px; }
.topnav .me .userbtn .who { order: 2; text-align: left; }
.usermenu { position: fixed; left: calc(var(--side-w) + 10px); right: auto; top: auto; bottom: 16px; transform-origin: 0 100%; }
@media (max-width: 1000px) {
  :root { --side-w: 80px; }
  .topnav { padding: 14px 7px 12px; gap: 12px; }
  .topnav .brand { padding: 0; justify-content: center; }
  .topnav .brand-text { display: none; }
  :root .topnav .navlinks a { flex-direction: column; gap: 4px; padding: 9px 2px; font-size: 12.5px; text-align: center; }
  :root .topnav .themepick { grid-template-columns: 1fr; }
  :root .topnav .themepick button { padding: 5px 0; }
  .topnav .themepick span { display: none; }
  .topnav .me { grid-template-columns: 1fr; gap: 6px; }
  :root .topnav .me .stat { height: 26px; padding: 0 4px; font-size: 12px; gap: 3px; }
  :root .topnav .me .btn.sm { padding: 5px 2px; font-size: 12.5px; }
  .topnav .me .userbtn { justify-content: center; }
  .topnav .me .userbtn .who { display: none; }
}
@media (max-width: 480px) {
  :root { --side-w: 64px; }
  :root .topnav .navlinks a { font-size: 11.5px; }
  .topnav .brand-mark { transform: scale(.85); }
}

/* ═════════ 左侧栏「冒险手账」：继续上次 / 今日一牌 / 收集进度（窄栏、矮窗口不显示） ═════════ */
.topnav .sidepad { display: grid; gap: 8px; margin-top: 2px; }
.topnav .sidepad[hidden] { display: none; }
.sidepad .sp-h { padding: 8px 4px 0; font: 700 12px/1 var(--f-ui); letter-spacing: .14em; color: var(--nav-ink); opacity: .7; }
.sidepad .sp-item { display: grid; gap: 4px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--paper2); border: var(--btn-bw) solid var(--btn-line);
  color: var(--ink); text-decoration: none; font: 500 13px/1.45 var(--f-ui); transition: transform .15s var(--ease), box-shadow .15s; }
.sidepad .sp-item:hover { transform: translateY(-1px); box-shadow: var(--sh1); }
.sidepad .sp-item small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sidepad .sp-item b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sidepad .sp-item > i { font-style: normal; font-size: 12px; color: var(--ink2); overflow-wrap: anywhere; }
.sidepad .sp-item em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--link); }
.sidepad .sp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sidepad .sp-name .pill { font-size: 11px; }
.sidepad .sp-bar { display: block; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.sidepad .sp-bar i { display: block; height: 100%; min-width: 3px; border-radius: 3px; background: var(--green); }
html[data-theme="note"] .sidepad .sp-item { background: #fff; border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; }
html[data-theme="note"] .sidepad .sp-item:hover { box-shadow: 3px 3px 0 #23283b; }
html[data-theme="wood"] .sidepad .sp-item { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #f6efe2; }
html[data-theme="wood"] .sidepad .sp-item small, html[data-theme="wood"] .sidepad .sp-item > i { color: #e3d4bb; }
html[data-theme="wood"] .sidepad .sp-item em { color: #ffd99a; }
html[data-theme="wood"] .sidepad .sp-bar { background: rgba(255,255,255,.18); }
@media (max-width: 1000px), (max-height: 640px) { .topnav .sidepad { display: none; } }

/* ═════════ 模拟卷 · 卷后讲评 ═════════ */
.review-sheet { margin-top: 26px; }
.review-sheet[hidden] { display: none; }
.rv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 6px 0 4px; }
.rv-col h5 { margin: 10px 0 6px; font: 700 13.5px/1.3 var(--f-ui); color: var(--ink); }
.rv-col h5:first-child { margin-top: 0; }
.rv-bar { display: grid; grid-template-columns: 5.5em 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0; }
.rv-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar i { display: block; height: 7px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.rv-bar i b { display: block; height: 100%; min-width: 2px; background: var(--green); border-radius: 4px; }
.rv-bar em { font-style: normal; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.rv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0; font-size: 13px; }
.noc { display: inline-block; padding: 0 7px; border-radius: 10px; background: var(--paper2); border: 1px solid var(--line); font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.rv-ai { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rv-sum { font-size: 15px; line-height: 1.7; margin: 0 0 10px; }
.rv-stale { font-size: 12.5px; color: var(--da); margin-bottom: 8px; }
.rv-weak { padding: 10px 12px; margin: 8px 0; border-radius: var(--r-sm); background: var(--paper2); border: 1px solid var(--line); }
.rv-weak p { margin: 6px 0; font-size: 14px; line-height: 1.65; }
.rv-wh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rv-wh b { font-size: 15px; }
.rv-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--da); color: #fff; font-size: 12px; font-weight: 800; }
.rv-good { font-size: 14px; color: var(--ji); margin: 10px 0; }
.rv-next { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; padding: 12px 14px; margin-top: 10px;
  border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--line); }
.rv-next > div { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.rv-next span { font-size: 14px; font-weight: 700; }
.rv-next small { font-size: 12.5px; color: var(--ink2); }
html[data-theme="note"] .rv-weak, html[data-theme="note"] .rv-next { border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; background: #fff; }
@media (max-width: 900px) { .rv-facts { grid-template-columns: 1fr; } }
/* AI 组卷：卷头的组卷思路、每题理由、程序补位 */
.pdesign { text-align: left; margin: 10px auto 0; max-width: 760px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.pdesign .aib { display: inline-block; padding: 0 7px; margin-right: 6px; border-radius: 9px; background: var(--ink); color: #fff; font: 700 11.5px/1.7 var(--f-ui); vertical-align: 1px; }
.pdesign small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 3px; }
.pnote { text-align: left; margin: 10px auto 0; max-width: 760px; padding: 7px 12px; border-radius: var(--r-sm); border: 1px dashed var(--da); color: var(--da); font-size: 13px; }
.ptable td.psrc { max-width: 380px; }
@media (min-width: 1300px) { .ptable td.psrc { min-width: 240px; } }   /* 宽屏：出处 + 理由那一栏别挤成一条 */
.paper-sheet .ptable th, .paper-sheet .ptable td { padding-left: 7px; padding-right: 7px; }
.ptable-wrap { overflow-x: auto; scrollbar-width: thin; }   /* 卷面比卡片宽时（窄屏）在卡片里横向滚动，不把「开做」挤出去 */
.pwhy { font-size: 12px; color: var(--ink2); margin-top: 2px; line-height: 1.5; }
.pwhy b { color: var(--ink); font-weight: 700; }
.pfill { display: inline-block; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper2); font-size: 11px; color: var(--muted); margin-top: 2px; }
html[data-theme="note"] .pdesign { border: 2px solid #23283b; box-shadow: 2px 2px 0 #23283b; background: #fff; }