/* ========== Reset & Base ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink-light:#243447;
  /* 深色「面」专用令牌，刻意**不在暗色块里覆盖**。
     --ink-* 是文字令牌，暗色下翻成米白；凡拿它当 background 的「设计成深色」的条带
     （侧栏 / 表头 / 进度条 / 头像底 / 代码块…）翻色后就变成发光板（实测侧栏 23.4 万 px²、光量 182）。
     字面值 == --ink-* 的浅色值，故浅色渲染逐字节不变。 */
  --navy-deep:#0A1628;--navy-dark:#0D1B2A;--navy-mid:#1B2A3E;--navy-light:#243447;
  
  /* 成就档位圈色（V4.15.26）：沿用成就既有配色规则「白→绿→蓝→紫→红→彩虹」。
     普通档由 #9CA3AF 压深到 #6B7280 —— 原值压在亮色卡底上实测仅 2.39:1，低于 3:1 图形底线。
     暗色那一套见 [data-theme="dark"]，值由 assets/shufa-catalog.js 的 liftTo(θ,0.72) 实算，不另造色。 */
  --r-common:#6B7280;--r-uncommon:#15803d;--r-rare:#2563eb;--r-epic:#7C3AED;--r-legendary:#DC2626;
  --r-special:#8B1A1A;--r-obsidian:#d4b86a;--r-mythic:#B45309;--ach-ok:#2F7D46;
  /* 成就圆牌材质（V4.15.31）：牌框的受光强度与盘面色，供内联 SVG 的 defs 取用（defs 在 body 下，故须放在 :root）。
     盘面色 V4.15.40 由 #FBF8F1 提到暖珐琅 #F3E9D7 —— 原值与白卡几乎同明度，配深色金属圈像贴了张白纸（站主反馈）。 */
  --ach-face:#E5D5B6;--ach-sheen-hi:.95;--ach-sheen-lo:.20;--ach-dish:.18;
  
  --silver:#A0B0C0;--silver-light:#C0CDD9;--silver-dim:#6B7B8B;
  
  /* 本页不加载 style.css，而它的令牌表原本缺 --paper-pure / --field-bg 两个：
     任何 `background:var(--paper-pure)` 的消费者在这里都取不到值 ⇒ 声明整体失效
     ⇒ 元素回落到 UA 默认（实测「回到底部」按钮在两主题下都是 Chrome 默认灰 #F0F0F0）。
     补齐，取值与 style.css 同档。 */
  
  --jade-light:#7AAB8E;
  --bronze:#8B6F3F;
  --bg:var(--paper);--bg-card:#FFFFFF;--bg-soft:var(--paper-warm);
  
  --accent:var(--ink-dark);--accent-light:rgba(13,27,42,0.06);
  --green:var(--jade);--orange:#C8893E;--red:var(--vermilion);--purple:#6B4E8C;--blue:#4A90D9;
  --gold-accent:var(--gold);
  
  
  
  
  
  
  
  
  --sidebar-w:260px;--header-h:64px;}

/* ---------- SVG 图标系统 ---------- */
.gxt-icon{
  display:inline-block;width:1em;height:1em;
  vertical-align:-0.15em;
  fill:currentColor;stroke:currentColor;
  pointer-events:none;flex-shrink:0;
}

/* 暗色模式变量覆盖 */
[data-theme="dark"]{
  --ink-light:#8A7E62;
  
  /* 成就档位圈色的暗色套：liftTo(θ,0.72) 实算值 */
  --r-common:#b0b6bf;--r-uncommon:#84ebab;--r-rare:#7ca1f3;--r-epic:#a87cf3;--r-legendary:#eb8484;
  --r-special:#e88787;--r-obsidian:#e8d6a8;--r-mythic:#F0B65A;--ach-ok:#7DD39A;
  --ach-face:#242424;--ach-sheen-hi:.55;--ach-sheen-lo:.55;--ach-dish:.30;
  
  --silver:#A0B0C0;--silver-light:#C0CDD9;--silver-dim:#6B7B8B;
  
  
  --jade-light:#9ACFB0;
  --bronze:#C4A46A;
  --bg:var(--paper);--bg-card:#1E1E1E;--bg-soft:var(--paper-warm);
  
  --accent:var(--ink-deep);--accent-light:rgba(251,248,241,0.08);
  --green:var(--jade);--orange:#E0A050;--red:var(--vermilion);--purple:#A080C0;--blue:#6AACE0;
  --gold-accent:var(--gold);
  
  
  
  
}

/* 全局键盘焦点样式 */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--vermilion);outline-offset:2px;border-radius:4px;
}
/* 跳转到主内容 */
.skip-link{
  position:absolute;top:-9999px;left:0;z-index:10000;
  padding:8px 16px;background:var(--vermilion);color:#fff;
  text-decoration:none;border-radius:0 0 8px 0;font-size:0.9rem;
}
.skip-link:focus{top:0}

html,body{height:100%;overflow:hidden;font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{display:flex}

/* ========== App Shell (Desktop) ========== */
.app-shell{display:flex;width:100%;height:100vh}

/* ====== Sidebar ====== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  /* 这条带子在两种主题下都设计成深色，所以写死字面 navy——
     --ink-deep/--ink-dark 是**文字**令牌，暗色下翻成米白，整条侧栏就变成
     260px×900px=23.4 万 px² 的发光板（实测光量 182，全站最亮的一面）。
     字面值 == 这两个令牌在浅色下的取值，故浅色渲染逐字节不变。 */
  background:linear-gradient(180deg,#0A1628 0%,#0D1B2A 60%,#0a1220 100%);
  color:var(--gold-light);
  display:flex;flex-direction:column;
  flex-shrink:0;position:relative;z-index:50;
  border-right:1px solid rgba(201,184,150,0.1);
}
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,184,150,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 80%, rgba(139,26,26,0.03) 0%, transparent 40%);
  pointer-events:none;
}
.sidebar>*{position:relative;z-index:1}

.sidebar-header{
  padding:28px 24px 20px;border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;gap:14px;
}
.sidebar-logo{
  width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--ink-deep);
  font-family:var(--font-serif);flex-shrink:0;
  box-shadow:0 2px 12px rgba(201,184,150,0.25);
}
.sidebar-logo img{display:block;width:78%;height:78%}
.sidebar-brand{flex:1;min-width:0}
.sidebar-brand h1{
  font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--gold);letter-spacing:0.04em;line-height:1.2;white-space:nowrap
}
/* 侧栏在两种主题下都是深底，--silver-dim(#6B7B8B) 压在上面只有 4.0:1（11px 小字要 4.5）
   ——这条**浅色下也一样不合格**，之前量不到是因为量具跳过了渐变面。提一档到 --silver。 */
.sidebar-brand p{font-size:11px;color:var(--silver);margin-top:2px;letter-spacing:0.12em;white-space:nowrap}
/* 返回庚戌堂首页入口 */
.sidebar-top-actions{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 24px 6px;border-bottom:1px solid rgba(255,255,255,0.04)
}
.sidebar-top-row{display:flex;gap:8px}
.gxt-back{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;padding:7px 10px;border-radius:8px;border:1px solid rgba(201,184,150,.25);color:var(--gold-light);font-size:11px;letter-spacing:.12em;font-family:var(--font-serif);text-decoration:none;transition:all .2s;cursor:pointer;white-space:nowrap}
.gxt-back:hover{background:rgba(201,184,150,.12);color:var(--gold);border-color:rgba(201,184,150,.45)}

/* Sidebar Navigation */
.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.sidebar-nav::-webkit-scrollbar{width:3px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(201,184,150,0.15);border-radius:3px}

.nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);
  color:var(--silver-light);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s ease;text-decoration:none;border:none;background:none;width:100%;
  font-family:var(--font-sans);letter-spacing:0.01em;
}
.nav-item:hover{background:rgba(201,184,150,0.08);color:var(--gold)}
.nav-item.active{
  background:rgba(201,184,150,0.12);color:var(--gold);font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-item .nav-icon{font-size:20px;width:24px;text-align:center;flex-shrink:0}
.nav-item .nav-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;
  background:var(--vermilion);color:#fff;border-radius:10px;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.nav-item .nav-badge.hidden{display:none}

.nav-divider{height:1px;background:rgba(255,255,255,0.06);margin:8px 16px}

/* Sidebar User Section */
.sidebar-user{
  padding:16px 20px;border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(0,0,0,0.15);
}
.sidebar-user-info{display:flex;align-items:center;gap:12px}
.sidebar-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#1B2A3E,#243447);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--gold);font-family:var(--font-serif);font-weight:600;
  border:2px solid rgba(201,184,150,0.25);flex-shrink:0;cursor:pointer;overflow:hidden
}
.sidebar-user-meta{flex:1;min-width:0}
.sidebar-user-name{
  font-size:14px;font-weight:600;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer
}
.sidebar-user-level{
  font-size:11px;color:var(--silver-dim);margin-top:1px;display:flex;align-items:center;gap:6px
}
.sidebar-user-level .level-dot{
  width:6px;height:6px;border-radius:50%;background:var(--jade);display:inline-block
}

/* ====== Main Area ====== */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg)}
.main-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(201,184,150,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 100%, rgba(139,26,26,0.03) 0%, transparent 40%);
  pointer-events:none;z-index:0
}

/* Top Header */
.top-header{
  height:var(--header-h);min-height:var(--header-h);
  background:rgba(245,240,230,0.9);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 28px;gap:16px;
  flex-shrink:0;z-index:10;position:relative
}
.header-title{
  font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--ink-deep);
  white-space:nowrap
}
.header-breadcrumb{
  display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)
}
.header-breadcrumb span.sep{color:var(--text3)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-search{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  min-width:200px;transition:all .2s
}
.header-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
.header-search input{
  border:none;background:none;outline:none;font-size:13px;color:var(--text);
  font-family:var(--font-sans);width:100%
}
.header-search input::placeholder{color:var(--text3)}
.header-search-icon{color:var(--text3);font-size:14px;cursor:pointer}
.header-avatar-btn{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#0D1B2A,#1B2A3E);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--gold);cursor:pointer;
  border:2px solid var(--gold-dim);position:relative;overflow:hidden
}
.header-login-btn{
  font-family:var(--font-serif);font-size:.9rem;font-weight:600;letter-spacing:.1em;
  padding:8px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;
  background:#0A1628;color:#FBF8F1;border:1px solid #0A1628;
  display:inline-flex;align-items:center;justify-content:center;transition:all .25s;
  cursor:pointer
}
.header-login-btn:hover{background:var(--vermilion);border-color:var(--vermilion);color:#fff}

/* Guest layer (未登录引导) */
.yxlgf-guest-layer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:20px;text-align:center}
.yxlgf-guest-card{background:var(--paper-pure);border:1px solid var(--border);border-radius:var(--radius-lg);padding:44px 36px;max-width:360px;width:100%;box-shadow:var(--shadow-lg)}
.yxlgf-guest-logo{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dim));display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 2px 12px rgba(201,184,150,0.25)}
.yxlgf-guest-logo img{display:block;width:78%;height:78%}
.yxlgf-guest-card h1{font-size:1.35rem;margin-bottom:10px;letter-spacing:.08em}
.yxlgf-guest-card p{font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:24px}
.yxlgf-guest-hint{margin-top:16px;font-size:.78rem;color:var(--text3)}

/* Content Area */
.content-area{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 32px;
  position:relative;z-index:1
}
.content-area::-webkit-scrollbar{width:6px}
.content-area::-webkit-scrollbar-thumb{background:rgba(13,27,42,0.12);border-radius:3px}
.content-area::-webkit-scrollbar-thumb:hover{background:rgba(13,27,40,0.2)}

/* Page system for desktop */
.page-desktop{display:none}
.page-desktop.active{display:block;animation:pageIn .25s ease}
.page-desktop:not(.active){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;position:absolute!important;left:-9999px!important;top:-9999px!important}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ========== Achievement Popup (Steam style) ========== */
.achievement-popup-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none;width:320px;max-width:calc(100vw - 40px)}
.achievement-popup{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy-mid) 100%);color:var(--gold-light);box-shadow:var(--shadow-lg);border:1px solid rgba(201,184,150,.2);transform:translateX(120%);opacity:0;animation:achievementIn .45s cubic-bezier(.22,1,.36,1) forwards}
.achievement-popup.exit{animation:achievementOut .35s ease forwards}
.achievement-popup-icon{width:44px;height:44px;border-radius:10px;background:rgba(201,184,150,.12);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
/* V4.15.43：弹窗底色恒为深色 ⇒ 牌心固定用暗色一套，保证对比度。
   V4.15.54：此前只覆盖 --ach-ring/--ach-ink/color，**漏了 --ach-face** ⇒ 亮色主题下牌面仍是米色
   #E5D5B6 而字用暗色套的浅色（common #C9CFD8）＝浅字压浅底（「窍」几乎看不见）。
   弹窗恒深色 ⇒ 牌面统一取暗色面 #242424（与暗色主题同值）；special/obsidian 的 #141414
   由下方更靠后的 tier 规则覆盖，不受影响。 */
.achievement-popup-icon .ach-icon{width:38px;height:38px;filter:none;--ach-seal:rgba(255,255,255,.05);--ach-face:#242424}
.achievement-popup-icon .ach-icon[data-tier="common"]{--ach-ring:#b0b6bf;--ach-ink:#C9CFD8;color:#C9CFD8}
.achievement-popup-icon .ach-icon[data-tier="uncommon"]{--ach-ring:#84ebab;--ach-ink:#4ade80;color:#4ade80}
.achievement-popup-icon .ach-icon[data-tier="rare"]{--ach-ring:#7ca1f3;--ach-ink:#60a5fa;color:#60a5fa}
.achievement-popup-icon .ach-icon[data-tier="epic"]{--ach-ring:#a87cf3;--ach-ink:#a78bfa;color:#a78bfa}
.achievement-popup-icon .ach-icon[data-tier="legendary"]{--ach-ring:#eb8484;--ach-ink:#f87171;color:#f87171}
.achievement-popup-icon .ach-icon[data-tier="mythic"]{--ach-ring:#B45309;--ach-ink:#F0B65A;color:#F0B65A}
.achievement-popup-icon .ach-icon[data-tier="special"]{--ach-ring:#e88787;--ach-ink:#E2543B;color:#E2543B}
.achievement-popup-icon .ach-icon[data-tier="obsidian"]{--ach-ring:#e8d6a8;--ach-ink:#e8d6a8;color:#e8d6a8}
.achievement-popup-content{flex:1;min-width:0}
.achievement-popup-title{font-family:var(--font-serif);font-size:15px;font-weight:700;color:var(--gold);margin-bottom:2px}
.achievement-popup-desc{font-size:12px;color:var(--silver-light);line-height:1.45}
.achievement-popup-points{font-size:12px;color:var(--jade-light);font-weight:600;margin-top:3px}
.achievement-popup-close{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--silver-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.achievement-popup-close:hover{color:var(--gold);background:rgba(255,255,255,.06)}
@keyframes achievementIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes achievementOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}
@media (max-width:480px){.achievement-popup-container{bottom:12px;right:12px;left:12px;width:auto}}

/* ========== Typography ========== */
h1{font-family:var(--font-serif);font-size:28px;font-weight:700;letter-spacing:0.02em;line-height:1.2}
h2{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:0.01em;line-height:1.3}
h3{font-size:16px;font-weight:600;line-height:1.4}
.section-title{font-size:13px;font-weight:600;color:var(--text2);letter-spacing:0.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:3px;height:16px;background:linear-gradient(to bottom, var(--gold), var(--jade));border-radius:2px}

/* ========== Components ========== */
.card{
  background:var(--bg-card);border-radius:var(--radius-lg);
  padding:20px 24px;box-shadow:var(--shadow-sm);
  margin-bottom:16px;border:1px solid var(--border);
  transition:all .2s ease
}
.card:hover{box-shadow:var(--shadow-md)}
.card-accent{border-left:3px solid var(--gold)}
.card-flat{box-shadow:none;border-color:var(--border)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 22px;border-radius:var(--radius-md);font-size:14px;font-weight:600;
  border:none;cursor:pointer;transition:all .2s ease;text-decoration:none;
  font-family:var(--font-sans);white-space:nowrap;letter-spacing:0.01em
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy-dark);color:var(--gold)}
.btn-primary:hover{background:var(--navy-mid)}
/* 主按钮底吃 --ink-dark：浅色下是深蓝墨（对），暗色下那个令牌翻成 #E8E4DC ⇒
   一枚米白灯板上压 --gold 的字，实测 2.24:1 且是全屏最亮的一块
   （练功坊的交卷/下一题/登录都走它）。钉成墨蓝抬一档 + 亮金：同色系、比页底亮、不发光。 */
[data-theme="dark"] .btn-primary{background:#1B2A3E;color:var(--gold-light)}
[data-theme="dark"] .btn-primary:hover{background:#243447}
.btn-secondary{background:var(--bg-soft);color:var(--ink-dark);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--navy-deep);background:rgba(13,27,42,0.04)}
.btn-outline{background:transparent;color:var(--ink-dark);border:1.5px solid var(--ink-deep)}
.btn-outline:hover{background:rgba(13,27,42,0.04)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:var(--ink-dark)}
.btn-danger{background:var(--vermilion);color:#fff}
.btn-lg{padding:14px 30px;font-size:16px;border-radius:var(--radius-lg)}
.btn-sm{padding:7px 16px;font-size:13px;border-radius:var(--radius-sm)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,0.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;backdrop-filter:blur(4px)}
.modal.hidden{display:none}
.modal-card{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:85vh;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border);display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg-soft);color:var(--text2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--border)}
.modal-body{padding:20px 22px;overflow-y:auto;font-size:14px;line-height:1.7;color:var(--text)}
.code-block{background:var(--navy-deep);color:#d4c9a8;padding:16px;border-radius:var(--radius-md);font-family:var(--font-mono);font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}

.tag{display:inline-flex;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:0.02em}
.tag-blue{background:rgba(13,27,42,0.07);color:var(--ink-dark)}
.tag-green{background:rgba(91,140,111,0.11);color:var(--jade)}
.tag-orange{background:rgba(200,137,62,0.11);color:var(--orange)}
.tag-red{background:rgba(139,26,26,0.09);color:var(--vermilion)}
.tag-gold{background:rgba(201,184,150,0.18);color:var(--bronze)}
.tag-purple{background:rgba(107,78,140,0.09);color:var(--purple)}

.form-input{width:100%;padding:11px 16px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:14px;font-family:var(--font-sans);outline:none;background:var(--bg-card);transition:border-color .2s,color .2s}
.form-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
.form-label{font-size:13px;font-weight:600;color:var(--text2);display:block;margin-bottom:6px}
.form-select{padding:10px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:14px;background:var(--bg-card);color:var(--text);outline:none;min-width:120px;cursor:pointer}
.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,184,150,0.1)}
/* ========== LOGIN OVERLAY ========== */
.login-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--paper) 0%,var(--paper-warm) 50%,#e8dcc8 100%);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(201,184,150,0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(139,26,26,0.05) 0%, transparent 40%),
    linear-gradient(135deg,var(--paper) 0%,var(--paper-warm) 50%,#e8dcc8 100%)
}
.login-card{
  width:460px;background:var(--bg-card);border-radius:var(--radius-xl);
  padding:40px 36px;box-shadow:var(--shadow-lg);border:1px solid rgba(201,184,150,0.2);
  text-align:center;position:relative;overflow:hidden
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy-deep),var(--gold),var(--vermilion))
}
.login-logo{width:72px;height:72px;margin:0 auto 16px;border-radius:18px;background:linear-gradient(135deg,var(--navy-dark),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--gold);font-weight:700;font-family:var(--font-serif);border:3px solid var(--gold-dim);box-shadow:0 4px 20px rgba(201,184,150,0.2)}
.login-card h2{font-family:var(--font-serif);margin-bottom:4px}
.login-card .login-subtitle{font-size:13px;color:var(--text2);letter-spacing:0.15em;margin-bottom:28px}
.login-form{width:100%;max-width:360px;margin:0 auto;text-align:left}
.account-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:220px;overflow-y:auto;padding-right:4px}
.account-list::-webkit-scrollbar{width:4px}
.account-list::-webkit-scrollbar-thumb{background:rgba(13,27,42,0.15);border-radius:2px}
.account-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer;transition:all .15s;background:var(--bg-card)}
.account-item:hover{border-color:var(--gold);background:rgba(201,184,150,0.05)}
.account-item .acc-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--navy-mid),var(--navy-light));display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);font-family:var(--font-serif);font-weight:600}
.account-item .acc-info{flex:1;text-align:left}
.account-item .acc-name{font-size:14px;font-weight:600;color:var(--ink-deep)}
.account-item .acc-meta{font-size:11px;color:var(--text2);margin-top:1px}
.account-item .acc-del{width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.account-item .acc-del:hover{background:rgba(139,26,26,0.08);color:var(--vermilion)}

/* ========== DASHBOARD HOME ========== */
.welcome-banner{
  display:flex;align-items:center;gap:20px;padding:24px 28px;
  background:linear-gradient(135deg, rgba(13,27,42,0.94) 0%, #0f1f33 50%, #132238 100%);
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.15);
  color:var(--gold-light);margin-bottom:24px;position:relative;overflow:hidden
}
.welcome-banner::before{
  content:'';position:absolute;top:-30%;right:-10%;width:250px;height:250px;
  background:radial-gradient(circle, rgba(201,184,150,0.06) 0%, transparent 70%);
  pointer-events:none
}
.welcome-banner>*{position:relative;z-index:1}
.welcome-avatar-lg{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-mid),var(--navy-light));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--gold);font-family:var(--font-serif);
  font-weight:700;flex-shrink:0;border:2px solid rgba(201,184,150,0.3);overflow:hidden
}
.welcome-text{flex:1}
.welcome-greeting{font-size:14px;color:var(--silver-light);margin-bottom:2px}
.welcome-name{font-size:22px;font-family:var(--font-serif);font-weight:700;color:var(--gold);cursor:pointer}
.welcome-level-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.welcome-level-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(201,184,150,0.12);color:var(--bronze);
  padding:3px 12px;border-radius:20px;font-size:12px;font-weight:600
}
.welcome-exp{flex:1;max-width:220px}
.exp-bar-lg{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.exp-bar-fill-lg{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:4px;transition:width .5s ease}
.welcome-exp-label{font-size:11px;color:var(--silver-dim);margin-top:4px;text-align:right}
.welcome-stats-col{text-align:right}
.welcome-score-val{font-size:28px;font-weight:700;color:var(--gold);font-family:var(--font-serif);line-height:1}
.welcome-score-lbl{font-size:11px;color:var(--silver-dim)}
.welcome-perm{display:inline-block;font-size:11px;font-weight:600;padding:2px 10px;border-radius:10px;margin-top:4px}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;
  border:1px solid var(--border);text-align:center;
  transition:all .2s ease;position:relative;overflow:hidden
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  opacity:0;transition:opacity .2s
}
.stat-card:nth-child(1)::before{background:var(--navy-deep)}
.stat-card:nth-child(2)::before{background:var(--jade)}
.stat-card:nth-child(3)::before{background:var(--orange)}
.stat-card:nth-child(4)::before{background:var(--purple)}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card:hover::before{opacity:1}
.stat-icon{font-size:28px;margin-bottom:8px}
.stat-value{font-size:30px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif);line-height:1.2}
.stat-label{font-size:12px;color:var(--text2);margin-top:4px}

.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.quick-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:24px 16px;
  border:1px solid var(--border);cursor:pointer;text-align:center;
  transition:all .2s ease;position:relative
}
.quick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(201,184,150,0.3)}
.qc-icon{font-size:36px;margin-bottom:10px;display:block}
.qc-title{font-size:15px;font-weight:600;font-family:var(--font-serif);color:var(--ink-deep)}
.qc-desc{font-size:12px;color:var(--text2);margin-top:4px}
.qc-badge{
  position:absolute;top:10px;right:10px;min-width:20px;height:20px;padding:0 6px;
  background:var(--vermilion);color:#fff;border-radius:10px;font-size:11px;font-weight:700
}
.qc-badge.hidden{display:none}

.dashboard-split{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:24px}

.recommend-banner{
  padding:24px 28px;background:linear-gradient(135deg, rgba(201,184,150,0.08), rgba(139,26,26,0.03));
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.2);
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden
}
.recommend-banner:hover{border-color:rgba(201,184,150,0.35);transform:translateY(-1px)}
.rec-badge{font-size:12px;font-weight:700;color:var(--bronze);letter-spacing:0.1em;text-transform:uppercase}
.rec-main{font-size:20px;font-weight:700;font-family:var(--font-serif);margin-top:6px;color:var(--ink-deep)}
.rec-sub{font-size:14px;color:var(--text2);margin-top:4px}
.rec-arrow{float:right;font-size:20px;color:var(--gold-dim);margin-top:2px}

.section-grid-wide{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.section-card-wide{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:18px 20px;
  border:1px solid var(--border);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:16px;position:relative
}
.section-card-wide:hover{border-color:rgba(201,184,150,0.35);box-shadow:var(--shadow-md);transform:translateX(3px)}
.scw-icon{font-size:32px;flex-shrink:0;width:48px;text-align:center}
.scw-body{flex:1;min-width:0}
.scw-name{font-size:15px;font-weight:600;font-family:var(--font-serif);color:var(--ink-deep)}
.scw-count{font-size:12px;color:var(--text2);margin-top:2px}
.scw-tags{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.diff-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.diff-tag.easy{background:rgba(91,140,111,0.11);color:var(--jade)}
.diff-tag.normal{background:rgba(74,144,217,0.11);color:var(--blue)}
.diff-tag.hard{background:rgba(200,137,62,0.12);color:var(--orange)}
.diff-tag.extreme{background:rgba(107,78,140,0.09);color:var(--purple)}
.diff-tag.heaven{background:rgba(139,26,26,0.08);color:var(--vermilion)}
/* 暗色下 --vermilion(#C85A5A) 压在本页深底上只有 4.02:1（10px 小字要 4.5），提一档 */
[data-theme="dark"] .diff-tag.heaven{color:var(--vermilion-light)}
.section-card-wide.locked{opacity:.4;pointer-events:none}
.section-card-wide.locked::after{content:'🔒';position:absolute;top:14px;right:14px;font-size:14px}

.streak-card{
  background:linear-gradient(135deg,#0d1b2a,#162940);border-radius:var(--radius-lg);
  padding:20px 24px;color:var(--gold-light);position:relative;overflow:hidden
}
.streak-card::after{
  content:'';position:absolute;bottom:-20px;right:-20px;
  width:100px;height:100px;background:radial-gradient(circle, rgba(201,184,150,0.06),transparent)
}
.streak-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative}
.streak-title{font-size:14px;font-weight:600;color:var(--gold)}
.streak-days{font-size:32px;font-weight:700;font-family:var(--font-serif);color:var(--gold)}
.streak-unit{font-size:13px;color:var(--silver-dim);margin-left:4px}
.streak-info{font-size:12px;color:var(--silver-dim);position:relative}

/* ========== QUIZ PAGE ========== */
.quiz-layout{max-width:800px;margin:0 auto}
.quiz-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
.quiz-mode-card{
  background:var(--bg-card);border-radius:var(--radius-xl);padding:32px 24px;
  border:2px solid var(--border);cursor:pointer;text-align:center;
  transition:all .2s ease;position:relative
}
.quiz-mode-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.quiz-mode-card .mode-icon{font-size:42px;margin-bottom:12px;display:block}
.quiz-mode-card .mode-title{font-size:18px;font-weight:700;font-family:var(--font-serif);margin-bottom:6px}
.quiz-mode-card .mode-desc{font-size:13px;color:var(--text2)}
.quiz-mode-card.practice{background:linear-gradient(135deg,#EEF8F0,#D8EEDB);border-color:var(--green)}
.quiz-mode-card.exam{background:linear-gradient(135deg,#EDF6FA,#D6EAF0);border-color:var(--blue)}
.quiz-mode-card.promo{background:linear-gradient(135deg,#F5EDFA,#E8D9F2);border-color:var(--purple)}
.quiz-mode-card.wrong{background:linear-gradient(135deg,#FCEFEF,#F5DCDC);border-color:var(--red)}
.quiz-mode-card.practice .mode-icon{color:var(--green)}
.quiz-mode-card.exam .mode-icon{color:var(--blue)}
.quiz-mode-card.promo .mode-icon{color:var(--purple)}
.quiz-mode-card.wrong .mode-icon{color:var(--red)}
.quiz-mode-card.locked{
  background:var(--bg-card);
  border-color:var(--border);
  cursor:not-allowed;
  filter:grayscale(.55);
}
.quiz-mode-card.locked .mode-icon{color:var(--text3);font-size:38px}
.quiz-mode-card.locked .mode-title{color:var(--text2)}
.quiz-mode-card.locked .mode-desc{color:var(--text3)}

.section-accuracy-panel{background:var(--bg-card);border-radius:var(--radius-xl);padding:20px;border:1px solid var(--border);margin-top:24px}
.sa-item{margin-bottom:14px}
.sa-item:last-child{margin-bottom:0}
.sa-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px}
.sa-name{font-weight:600;color:var(--text1)}
.sa-val{font-weight:600;color:var(--ink-dark);font-variant-numeric:tabular-nums}
.sa-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.sa-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--navy-dark));border-radius:4px;transition:width .3s}

.quiz-active-panel{max-width:760px;margin:0 auto}
.quiz-top-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;margin-bottom:16px}
.quiz-progress-text{font-size:14px;font-weight:600;color:var(--text2)}
.quiz-timer{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-dark);font-family:var(--font-mono)}
.quiz-timer.warning{color:var(--orange)}
.quiz-timer.danger{color:var(--vermilion)}
.progress-bar{height:5px;background:var(--border);border-radius:3px;margin-bottom:24px;overflow:hidden}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--navy-dark),var(--jade));border-radius:3px;transition:width .3s}
.question-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:28px 32px;border:1px solid var(--border);margin-bottom:20px;box-shadow:var(--shadow-md)}
.question-number{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em}
.question-text{font-size:18px;font-weight:700;line-height:1.7;margin-bottom:24px;font-family:var(--font-serif)}
.options-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:1fr}
.option-item{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);cursor:pointer;transition:border-color .2s,background-color .2s,transform .12s ease,box-shadow .2s;background:var(--bg-card);font-size:15px;font-weight:500;min-width:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.option-item:hover{border-color:var(--gold);background:rgba(201,184,150,0.03);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.option-item:active{transform:scale(0.985)}
.option-item .option-letter{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:2px solid var(--border);flex-shrink:0;transition:all .2s}
.option-item .option-text{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.6}
@keyframes optionBounceOk{0%{transform:scale(1)}40%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes optionShakeFail{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes feedbackSlideUp{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.option-item.correct{border-color:var(--jade);background:rgba(91,140,111,0.08);box-shadow:0 0 0 1px rgba(91,140,111,0.2);animation:optionBounceOk .28s cubic-bezier(0.18,0.89,0.32,1.28)}
.option-item.correct .option-letter{background:var(--jade);color:#fff;border-color:var(--jade)}
.option-item.wrong{border-color:var(--vermilion);background:rgba(139,26,26,0.08);box-shadow:0 0 0 1px rgba(139,26,26,0.2);animation:optionShakeFail .28s ease-in-out}
.option-item.wrong .option-letter{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
.option-item.disabled{pointer-events:none;opacity:.7}
.answer-feedback{text-align:center;padding:14px;margin-top:14px;border-radius:var(--radius-md);font-weight:600;font-size:15px;animation:feedbackSlideUp .22s cubic-bezier(0.16,1,0.3,1)}
.answer-feedback.ok{background:rgba(91,140,111,0.1);color:var(--jade)}
.answer-feedback.fail{background:rgba(139,26,26,0.1);color:var(--vermilion)}
.answer-explain{font-size:14px;color:var(--text2);margin-top:10px;line-height:1.75;padding:14px 16px;background:var(--bg-soft);border-radius:var(--radius-sm);border-left:3px solid var(--gold);box-shadow:0 1px 3px rgba(0,0,0,0.02);position:relative}
.answer-explain::before{content:"【考点释义】";display:block;font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:0.06em;margin-bottom:6px;font-family:var(--font-serif)}
.answer-explain:has(strong)::before{display:none}
.quiz-nav{display:flex;gap:12px;margin-top:20px}
.quiz-nav .btn{flex:1}

.results-panel{max-width:560px;margin:40px auto;text-align:center}
.results-score{font-size:72px;font-weight:700;color:var(--ink-deep);line-height:1;font-family:var(--font-serif)}
.results-label{font-size:15px;color:var(--text2);margin-top:4px}
.results-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:28px 0}
.result-item{background:var(--bg-soft);border-radius:var(--radius-md);padding:18px 12px;text-align:center}
.result-item .ri-value{font-size:24px;font-weight:700;font-family:var(--font-serif)}
.result-item .ri-label{font-size:11px;color:var(--text2);margin-top:4px}

.quiz-config-panel{max-width:520px;margin:0 auto}
.config-row{margin-bottom:20px}
.config-options{display:flex;flex-wrap:wrap;gap:10px}
.config-opt{padding:9px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:13px;cursor:pointer;transition:all .15s;background:var(--bg-card);font-weight:500}
.config-opt:hover{border-color:var(--navy-dark)}
.config-opt.selected{border-color:var(--navy-dark);background:var(--accent-light);color:var(--ink-dark);font-weight:600}
.config-option{padding:9px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);font-size:13px;cursor:pointer;transition:all .15s;background:var(--bg-card);font-weight:500}
.config-option:hover{border-color:var(--navy-dark)}
.config-option.selected{border-color:var(--navy-dark);background:var(--accent-light);color:var(--ink-dark);font-weight:600}
.config-option.disabled{opacity:.35;pointer-events:none;text-decoration:line-through}
.slider-row{display:flex;align-items:center;gap:16px}
.slider-row input[type=range]{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none}
.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--navy-dark);cursor:pointer;border:3px solid var(--gold)}
.slider-val{font-size:22px;font-weight:700;color:var(--ink-dark);min-width:40px;font-family:var(--font-serif)}
.config-btns{display:flex;gap:12px;margin-top:24px}
.config-btns .btn{flex:1}

/* ========== KNOWLEDGE PAGE ========== */
.knowledge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.knowledge-card{
  background:var(--bg-card);border-radius:var(--radius-lg);padding:22px;
  border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative
}
.knowledge-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(201,184,150,0.3)}
.kc-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:12px;border:2px solid var(--vermilion);border-radius:10px;font-family:var(--font-serif);font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--vermilion)}
.kc-name{font-size:16px;font-weight:600;font-family:var(--font-serif);margin-bottom:6px}
.kc-desc{font-size:12px;color:var(--text2);margin-bottom:10px}
.kc-diffs{display:flex;gap:5px;flex-wrap:wrap}
.knowledge-card.locked{opacity:.4;pointer-events:none}
.knowledge-card.locked::after{content:'🔒';position:absolute;top:14px;right:14px;font-size:14px}
.knowledge-card.custom-knowledge-card{border:1px dashed rgba(201,184,150,.55);background:linear-gradient(180deg,rgba(201,184,150,.06),rgba(255,255,255,0))}

/* ========== SECTION DETAIL PAGE ========== */
.section-detail-header{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.sdh-icon{font-size:22px;font-family:var(--font-serif);font-weight:700;letter-spacing:.06em;color:var(--vermilion);width:72px;height:72px;border-radius:var(--radius-lg);background:var(--bg-soft);display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.sdh-body{flex:1;min-width:0}
.sdh-name{font-size:24px;font-weight:700;font-family:var(--font-serif);margin-bottom:4px}
.sdh-meta{font-size:13px;color:var(--text2)}
.sdh-progress{margin-top:10px;background:var(--border);border-radius:6px;height:8px;overflow:hidden}
.sdh-progress-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:6px;transition:width .3s}

.unit-list{display:flex;flex-direction:column;gap:10px}
.unit-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;position:relative}
.unit-item:hover{border-color:var(--gold);transform:translateX(3px)}
.unit-item.locked{opacity:.5;cursor:not-allowed;pointer-events:none}
.unit-item.locked::after{content:'🔒';position:absolute;right:16px;font-size:14px}
.unit-item.passed{border-color:var(--jade);background:rgba(91,140,111,0.04)}
.unit-num{width:34px;height:34px;border-radius:50%;background:var(--navy-dark);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.unit-item.passed .unit-num{background:var(--jade);color:#fff}
.unit-body{flex:1;min-width:0}
.unit-name{font-size:15px;font-weight:600;margin-bottom:2px}
.unit-desc{font-size:12px;color:var(--text2)}
.unit-status{margin-left:auto;font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap}
.unit-status.passed{color:var(--jade)}
.unit-status.locked{color:var(--text3)}

.learning-content{padding:0;background:transparent;border:none;box-shadow:none}
.learning-content:hover{box-shadow:none}
.learning-content .kc-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.learning-content .kc-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.learning-content h3{font-family:var(--font-serif);font-size:17px;margin:0 0 10px;color:var(--ink-deep);font-weight:700}
.learning-content h3::before{content:'';display:inline-block;width:4px;height:16px;background:var(--gold);border-radius:2px;margin-right:8px;vertical-align:middle}
.learning-content p{line-height:1.75;color:var(--text);margin-bottom:10px;font-size:14.5px}
.learning-content ul{margin:8px 0 12px 18px;padding:0;color:var(--text);font-size:14.5px;line-height:1.75}
.learning-content li{margin-bottom:6px}
.learning-content .highlight{background:linear-gradient(135deg,rgba(201,184,150,0.12) 0%,rgba(201,184,150,0.04) 100%);border-left:3px solid var(--gold);padding:14px 16px;border-radius:var(--radius-sm);margin:14px 0}
.knowledge-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.knowledge-table th,.knowledge-table td{padding:10px 12px;border:1px solid var(--border);text-align:center;vertical-align:middle}
.knowledge-table th{background:var(--navy-dark);color:var(--gold);font-weight:600}
.knowledge-table td{background:var(--bg-card)}
.knowledge-table tr:nth-child(even) td{background:rgba(201,184,150,0.06)}
.knowledge-table .wx-text{display:inline-block;line-height:1;vertical-align:middle;font-weight:600}
.knowledge-table .wx-mu{color:#5B8C6F}
.knowledge-table .wx-huo{color:#D9534F}
.knowledge-table .wx-tu{color:#C8A545}
.knowledge-table .wx-jin{color:#B8860B}
.knowledge-table .wx-shui{color:#4A90A4}
.learning-content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.learning-content th,.learning-content td{padding:10px 12px;border:1px solid var(--border);text-align:center;vertical-align:middle}
.learning-content th{background:var(--navy-dark);color:var(--gold);font-weight:600}
.learning-content tr:nth-child(even) td{background:rgba(201,184,150,0.06)}
/* 学习内容中的天干地支五行颜色，与八字排盘页保持一致 */
.learning-content .wx-mu{color:#2e7d32;font-weight:600}
.learning-content .wx-huo{color:#c62828;font-weight:600}
.learning-content .wx-tu{color:#8B4513;font-weight:600}
.learning-content .wx-jin{color:#B8860B;font-weight:600}
.learning-content .wx-shui{color:#1565c0;font-weight:600}
.wuxing-diagram{position:relative;width:280px;height:280px;margin:24px auto;flex-shrink:0}
.wx-node{position:absolute;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-family:var(--font-serif);font-size:16px;box-shadow:var(--shadow-md);z-index:2}
.wx-node.wx-jin{background:#B8860B;top:20px;left:50%;transform:translateX(-50%)}
.wx-node.wx-shui{background:#4A90A4;top:50%;right:20px;transform:translateY(-50%)}
.wx-node.wx-mu{background:#5B8C6F;bottom:20px;right:45px}
.wx-node.wx-huo{background:#D9534F;bottom:20px;left:45px}
.wx-node.wx-tu{background:#D4A84B;top:50%;left:20px;transform:translateY(-50%)}
.wuxing-arrows{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.wuxing-arrows path{fill:none;stroke-width:2.2;stroke-linecap:round}
.wuxing-arrows .wx-gen{stroke:#4A90A4 !important}
.wuxing-arrows .wx-rest{stroke:#D9534F !important;stroke-dasharray:6,5 !important}
.wx-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text2)}
.wx-legend span{display:flex;align-items:center;gap:4px}
.wx-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
@media(max-width:768px){
  .wuxing-diagram{width:260px;height:260px}
  .wx-node{width:56px;height:56px;font-size:14px}
  .wx-node.wx-jin{top:18px}
  .wx-node.wx-shui{right:18px}
  .wx-node.wx-mu{bottom:18px;right:40px}
  .wx-node.wx-huo{bottom:18px;left:40px}
  .wx-node.wx-tu{left:18px}
}

/* ========== RANK PAGE ========== */
.rank-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.rank-tab{
  padding:9px 20px;border-radius:var(--radius-md);font-size:13px;
  color:var(--text2);background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;white-space:nowrap;transition:all .15s;font-weight:500
}
.rank-tab.active{background:var(--navy-dark);color:var(--gold);border-color:var(--navy-dark)}
.rank-table-wrapper{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden}
.rank-row{display:flex;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);transition:background .15s}
.rank-row:last-child{border-bottom:none}
.rank-row:hover{background:var(--accent-light)}
.rank-row.me{background:rgba(201,184,150,0.08)}
.rank-row.top1{background:linear-gradient(90deg,rgba(255,193,7,0.10),rgba(255,193,7,0.02))}
.rank-row.top2{background:linear-gradient(90deg,rgba(176,190,197,0.12),rgba(176,190,197,0.02))}
.rank-row.top3{background:linear-gradient(90deg,rgba(205,127,50,0.10),rgba(205,127,50,0.02))}
.rank-my-bar{display:flex;align-items:center;padding:14px 20px;background:rgba(201,184,150,0.14);border-top:2px solid var(--gold);margin-top:8px;border-radius:var(--radius-md)}
.rank-my-bar .rank-pos{width:48px;font-size:15px;font-weight:700;color:var(--ink-deep);flex-shrink:0;text-align:center}
.rank-my-bar .rank-avatar{margin:0 10px}
.rank-my-bar .rank-val-cell{color:var(--ink-deep)}
.rank-pos{width:48px;font-size:15px;font-weight:700;color:var(--text2);flex-shrink:0;text-align:center}
.rank-medal-wrap{width:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rank-medal{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.rank-medal.gold{background:rgba(201,184,150,0.18);color:var(--bronze);border:1.5px solid var(--gold)}
.rank-medal.silver{background:rgba(160,176,192,0.12);color:var(--silver-dim);border:1.5px solid var(--silver)}
.rank-medal.bronze{background:rgba(139,111,63,0.1);color:var(--bronze);border:1.5px solid var(--bronze)}
.rank-name-cell{flex:1;font-size:14px;font-weight:600;min-width:0}
.rank-val-cell{font-size:15px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif);min-width:60px;text-align:right}
.rank-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--navy-dark),var(--purple));display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0;margin:0 10px;border:2px solid var(--border)}
.rank-avatar img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1;min-width:0}
.rank-info .rank-nickname{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-info .rank-meta{font-size:12px;color:var(--text2);margin-top:2px}

/* ========== PROFILE PAGE ========== */
.profile-layout{max-width:900px;margin:0 auto}
.profile-hero{
  display:flex;align-items:center;gap:28px;padding:28px;
  background:linear-gradient(135deg,rgba(13,27,42,0.95),#0f1f33);
  border-radius:var(--radius-xl);color:var(--gold-light);margin-bottom:24px;
  position:relative;overflow:hidden
}
.profile-hero::before{
  content:'';position:absolute;top:-20%;right:-5%;width:200px;height:200px;
  background:radial-gradient(circle, rgba(201,184,150,0.05),transparent)
}
.profile-hero>*{position:relative;z-index:1}
.ph-avatar{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-mid),var(--navy-light));
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--gold);font-family:var(--font-serif);
  font-weight:700;border:3px solid rgba(201,184,150,0.3);cursor:pointer;flex-shrink:0;overflow:hidden
}
.ph-info{flex:1;min-width:0}
.ph-name{font-size:24px;font-family:var(--font-serif);font-weight:700;color:var(--gold);word-break:break-all}
.ph-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px}
.ph-title{
  display:inline-flex;align-items:center;padding:4px 14px;border-radius:20px;
  font-size:13px;font-weight:600;background:rgba(201,184,150,0.12);color:var(--bronze);cursor:pointer
}
.ph-title.title-common{background:#f5f5f7;color:#666;border:1px solid #e0e0e0}
.ph-title.title-uncommon{background:#e8f5e9;color:#2e7d32;border:1px solid #a5d6a7}
.ph-title.title-rare{background:#e3f2fd;color:#1565c0;border:1px solid #90caf9}
.ph-title.title-epic{background:#f3e5f5;color:#7b1fa2;border:1px solid #ce93d8}
.ph-title.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border:1px solid transparent;box-shadow:0 2px 10px rgba(255,82,82,.35)}
.ph-title.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border:1px solid transparent;box-shadow:0 2px 12px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.ph-title.title-obsidian{background:linear-gradient(135deg,#0a0a0a 0%,#151515 25%,#0a0a0a 50%,#1f1f1f 75%,#0a0a0a 100%);color:#e8d6a8;border:1px solid #d4b86a;box-shadow:0 0 22px rgba(212,184,104,.55),0 3px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(212,184,104,.45)}
.ph-type{font-size:12px;padding:3px 10px;border-radius:20px}
.ph-level-line{margin-top:10px;display:flex;align-items:center;gap:14px}
.ph-level-text{font-size:14px;font-weight:600;color:var(--silver-light)}
.ph-exp-bar{flex:1;max-width:260px;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.ph-exp-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:4px;transition:width .4s}
.ph-study-time{font-size:12px;color:var(--silver-light);margin-top:10px;display:flex;align-items:center;gap:6px}
.ph-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ph-action-btn{
  padding:7px 16px;border-radius:var(--radius-md);font-size:12px;
  background:rgba(255,255,255,0.08);color:var(--gold-light);border:1px solid rgba(255,255,255,0.1);
  cursor:pointer;transition:all .15s;font-family:var(--font-sans)
}
.ph-action-btn:hover{background:rgba(255,255,255,0.15)}

.profile-stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}
.psg-item{background:var(--bg-card);padding:18px 12px;text-align:center}
.psg-val{font-size:22px;font-weight:700;font-family:var(--font-serif);color:var(--ink-deep)}
.psg-lbl{font-size:11px;color:var(--text2);margin-top:4px}

.profile-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.profile-section-title{font-size:15px;font-weight:700;font-family:var(--font-serif);margin-bottom:12px;display:flex;align-items:center;gap:8px}

.menu-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px}
.menu-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-card);cursor:pointer;transition:all .15s;font-size:14px;font-weight:500;border:none;width:100%;text-align:left;font-family:var(--font-sans)}
.menu-item:hover{background:var(--accent-light)}
.menu-item .menu-icon{font-size:20px;width:26px;text-align:center}
.menu-item .menu-arrow{color:var(--text3);margin-left:auto;font-size:14px}
.sound-effect-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:12px 16px;background:var(--paper-pure,#FFFBF5);border-bottom:1px solid var(--border, rgba(10,22,40,.1))}
.sound-effect-item{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--text2,#5A5048);cursor:pointer;padding:8px 10px;border:1px solid var(--border-soft,rgba(10,22,40,.12));border-radius:8px;background:#fff}
.sound-effect-item input{width:16px;height:16px;flex-shrink:0;accent-color:var(--vermilion,#8B1A1A);cursor:pointer}
/* V4.19.14：设置页总音量行 + owner 调试面板（renderAbout 注入，不改静态 HTML） */
.sound-volume-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-card,#FFFBF5);border-top:1px solid var(--border, rgba(10,22,40,.1))}
.sound-volume-row .sound-volume-label{flex:0 0 auto;font-size:.84rem;color:var(--text2,#5A5048);white-space:nowrap}
.sound-volume-row .sound-volume-label span{color:var(--gold,#C9B896);font-weight:700;font-variant-numeric:tabular-nums}
.sound-volume-row input[type=range]{flex:1;min-width:80px;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border, rgba(10,22,40,.1));outline:none;accent-color:var(--gold,#C9B896)}
.sound-volume-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold,#C9B896);border:2px solid var(--bg-card,#FFFBF5);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sound-volume-row input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold,#C9B896);border:2px solid var(--bg-card,#FFFBF5);cursor:pointer}
.sound-debug{margin:14px 0 0;padding:14px 16px;border:1px dashed var(--gold,#C9B896);border-radius:10px;background:var(--bg-card,#FFFBF5)}
.sound-debug-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink-deep,#0A1628);font-family:var(--font-serif)}
.sound-debug-badge{font-size:11px;font-weight:600;color:var(--gold,#C9B896);border:1px solid currentColor;border-radius:10px;padding:1px 8px;font-family:var(--font-sans)}
.sound-debug-note{font-size:12px;color:var(--text2,#5A5048);line-height:1.65;margin-top:6px}
.sound-debug-sub{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text2,#5A5048);margin:12px 0 6px}
.sound-debug-cues,.sound-debug-sims{display:flex;flex-wrap:wrap;gap:8px}
.sound-debug-cue,.sound-debug-sim{font:inherit;font-size:13px;line-height:1.2;padding:8px 12px;border-radius:8px;border:1px solid var(--border, rgba(10,22,40,.12));background:var(--paper-pure,#FFFBF5);color:var(--text,#0A1628);cursor:pointer;transition:background .15s,border-color .15s,transform .08s}
.sound-debug-cue:hover,.sound-debug-sim:hover{background:var(--accent-light, rgba(201,184,150,.18));border-color:var(--gold,#C9B896)}
.sound-debug-cue:active,.sound-debug-sim:active{transform:scale(.97)}
.sound-debug-reset{margin-left:auto;font:inherit;font-size:11px;padding:3px 10px;border-radius:10px;border:1px solid var(--border, rgba(10,22,40,.12));background:transparent;color:var(--text2,#5A5048);cursor:pointer}
.sound-debug-gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 16px}
.sound-debug-gain-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2,#5A5048)}
.sound-debug-gain-name{flex:0 0 auto;min-width:52px}
.sound-debug-gain-row input[type=range]{flex:1;min-width:70px;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:var(--border, rgba(10,22,40,.12));outline:none;accent-color:var(--gold,#C9B896)}
.sound-debug-gain-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold,#C9B896);cursor:pointer}
.sound-debug-gain-val{flex:0 0 auto;min-width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text,#0A1628);font-weight:600}
.sound-debug-result{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--paper-pure,#FFFBF5);border:1px dashed var(--border, rgba(10,22,40,.16));font-size:12px;line-height:1.6;color:var(--text2,#5A5048);word-break:break-all}

.radar-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;border:1px solid var(--border);position:relative}
.radar-title{font-size:16px;font-weight:700;text-align:center;font-family:var(--font-serif)}
.radar-sub{font-size:12px;color:var(--text2);text-align:center;margin-top:4px;margin-bottom:14px}
#sectionRadar{display:block;margin:0 auto;max-width:360px;height:auto;cursor:crosshair}
.radar-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;margin-top:14px;font-size:11px;color:var(--text2);justify-items:center}
.radar-legend span{display:flex;align-items:center;gap:4px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .2s}
.radar-legend span:hover{background:rgba(201,184,150,.15);color:var(--ink-deep)}
.radar-tooltip{position:absolute;z-index:30;max-width:280px;padding:12px 14px;border-radius:var(--radius-md);background:var(--navy-deep);color:var(--gold-light);box-shadow:var(--shadow-lg);border:1px solid rgba(201,184,150,.3);font-size:13px;line-height:1.6;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.radar-tooltip.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.radar-tooltip strong{display:block;color:var(--gold);font-family:var(--font-serif);font-size:15px;margin-bottom:4px;padding-right:18px}
.radar-tooltip .tip-hint{display:block;margin-top:6px;color:var(--jade-light);font-size:12px}
.radar-tooltip .radar-tip-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--gold);font-size:14px;line-height:1;cursor:pointer;padding:3px 6px;opacity:.75}
.radar-tooltip .radar-tip-close:hover{opacity:1}

/* ========== WRONG BOOK ========== */
.wrong-item{background:var(--bg-card);border-radius:var(--radius-md);padding:18px 22px;margin-bottom:12px;border:1px solid var(--border);transition:all .15s}
.wrong-item:hover{border-color:var(--gold-dim)}
.wrong-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wrong-item-section{font-size:12px;font-weight:600;color:var(--bronze);background:rgba(201,184,150,0.12);padding:3px 10px;border-radius:8px}
.wrong-item-diff{font-size:12px;font-weight:600;color:var(--text2)}
.wrong-item-q{font-size:15px;font-weight:700;line-height:1.6;font-family:var(--font-serif);margin-bottom:12px}
.wrong-item-options{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.wrong-item-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--bg);font-size:14px;line-height:1.5}
.wrong-item-option .opt-letter{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:2px solid var(--border);flex-shrink:0}
.wrong-item-option.correct{border-color:var(--jade);background:rgba(91,140,111,0.06)}
.wrong-item-option.correct .opt-letter{background:var(--jade);color:#fff;border-color:var(--jade)}
.wrong-item-option.wrong{border-color:var(--vermilion);background:rgba(139,26,26,0.06)}
.wrong-item-option.wrong .opt-letter{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
.wrong-item-summary{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px;color:var(--text2)}
.wrong-item-summary .wrong{color:var(--vermilion);font-weight:600}
.wrong-item-summary .correct{color:var(--jade);font-weight:600}
.wrong-item-exp{margin-top:14px;padding:12px;border-radius:var(--radius-md);background:rgba(201,184,150,0.08);border:1px solid rgba(201,184,150,0.2);font-size:13px;color:var(--text2);line-height:1.7}
.wrong-item-exp-title{font-weight:600;color:var(--ink-dark);margin-bottom:4px}
.wrong-actions{display:flex;gap:10px;margin-top:12px}

/* ========== ACHIEVEMENTS ========== */
.ach-group{margin-bottom:28px}
.ach-group-title{font-size:14px;font-weight:700;color:var(--ink-deep);margin-bottom:12px;padding-left:8px;border-left:3px solid var(--gold);font-family:var(--font-serif)}
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:stretch}
.ach-card{display:flex;flex-direction:column;gap:10px;background:var(--bg-card);border-radius:var(--radius-md);padding:16px 18px;border:1px solid var(--border);transition:border-color .15s,background-color .15s,box-shadow .15s;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:auto 210px;/* V4.15.49：cv 必须留（长列表实测：撤掉它滚动最长帧 151ms/13 个 >50ms 帧、切主题 43ms→真机更糟；加上后 23ms/0 个）。估算值 210 是**内容盒**尺寸（≠卡总高）：实测卡总高 171–209、扣 padding/border 后内容盒 137–175，210 留足余量——低估会在 iOS 上压扁正文导致「已解锁」压住积分（V4.15.47 事故），高估只是短暂多留白。height:100% 不再要：等高由 .ach-list 的 align-items:stretch 保证。 */}
.ach-card:not(.unlocked){border-color:var(--border)}
/* V4.15.47：已解锁卡片按稀有度着色（站主 2026-10-23：「品质边框」）——原样式只有一层几乎看不出的淡金 tint */
/* V4.15.50：已解锁卡按稀有度着色——边框 1.5px、左边框 3px、底色取该档 6–8% 淡染 */
.ach-card.unlocked{border-color:var(--ach-card-line,rgba(201,184,150,0.4));border-width:1.5px;border-left-width:3px;background:var(--ach-card-fill,rgba(201,184,150,0.04));box-shadow:var(--shadow-sm)}
.ach-card.unlocked[data-tier="common"]{--ach-card-line:var(--r-common);--ach-card-fill:rgba(107,114,128,.06)}
.ach-card.unlocked[data-tier="uncommon"]{--ach-card-line:var(--r-uncommon);--ach-card-fill:rgba(21,128,61,.06)}
.ach-card.unlocked[data-tier="rare"]{--ach-card-line:var(--r-rare);--ach-card-fill:rgba(37,99,235,.06)}
.ach-card.unlocked[data-tier="epic"]{--ach-card-line:var(--r-epic);--ach-card-fill:rgba(124,58,237,.06)}
.ach-card.unlocked[data-tier="legendary"]{--ach-card-line:var(--r-legendary);--ach-card-fill:rgba(220,38,38,.06)}
.ach-card.unlocked[data-tier="mythic"]{--ach-card-line:var(--r-mythic);--ach-card-fill:rgba(180,83,9,.07)}
.ach-card.unlocked[data-tier="special"]{--ach-card-line:var(--r-special);--ach-card-fill:rgba(139,26,26,.07)}
.ach-card.unlocked[data-tier="obsidian"]{--ach-card-line:var(--r-obsidian);--ach-card-fill:rgba(212,184,106,.08)}
.ach-header{display:flex;align-items:flex-start;gap:12px}
/* ── 成就圆牌（V4.15.31 立，V4.15.40 改通道分工）──
   材质由**内联 SVG 牌框**承担：金属渐变圈、内凹盘面、受光高光、落影。
   三条通道各管一件事，互不越位：
     圈色＝稀有度大类（--r-*，亮暗各一套）；
     圈形＝稀有度的无色可辨第二通道（素圈/单线/双线/齿纹/三线/双圈＋彩虹/墨底双圈/墨底单线，画在 achMedalFrame 里）；
     牌心图案＝这枚成就自己（ACHIEVEMENTS[].icon，同组内不重图）。
   ⚠️ V4.15.31 曾用 CSS 刻痕表达「组内积分位次」：既把排名当成稀有度，又因刻痕取
   var(--ach-ring) 压在金属圈上而同色叠同色、肉眼不可见 ⇒ 本版整体撤掉，位次不再编码。 */
.ach-icon{width:48px;height:48px;flex-shrink:0;border-radius:50%;position:relative;
  display:grid;place-items:center;line-height:1;
  --ach-seal:rgba(0,0,0,.035);
  filter:drop-shadow(0 1.5px 2px rgba(10,22,40,.30))}
.ach-frame{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* V4.15.43 牌心：char＝宋式宝印单字 / svg＝线描；颜色取 --ach-ink 与 currentColor，切主题即时生效 */
.ach-glyph-v4{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.ach-outer{display:none}
.ach-icon[data-tier="common"]{--ach-ring:var(--r-common);--ach-ink:#6B7280;color:#6B7280}
.ach-icon[data-tier="uncommon"]{--ach-ring:var(--r-uncommon);--ach-ink:#15803d;color:#15803d}
.ach-icon[data-tier="rare"]{--ach-ring:var(--r-rare);--ach-ink:#2563eb;color:#2563eb}
.ach-icon[data-tier="epic"]{--ach-ring:var(--r-epic);--ach-ink:#7C3AED;color:#7C3AED}
.ach-icon[data-tier="legendary"]{--ach-ring:var(--r-legendary);--ach-ink:#DC2626;color:#DC2626}
.ach-icon[data-tier="mythic"]{--ach-ring:#B45309;--ach-ink:#B45309;color:#B45309}
.ach-icon[data-tier="special"]{--ach-ring:var(--r-special);--ach-face:#141414;--ach-ink:#E2543B;color:#E2543B}
.ach-icon[data-tier="obsidian"]{--ach-ring:var(--r-obsidian);--ach-face:#141414;--ach-ink:#e8d6a8;color:#e8d6a8}
[data-theme="dark"] .ach-icon{--ach-seal:rgba(255,255,255,.05)}
[data-theme="dark"] .ach-icon[data-tier="common"]{--ach-ink:#C9CFD8;color:#C9CFD8}
[data-theme="dark"] .ach-icon[data-tier="uncommon"]{--ach-ink:#4ade80;color:#4ade80}
[data-theme="dark"] .ach-icon[data-tier="rare"]{--ach-ink:#60a5fa;color:#60a5fa}
[data-theme="dark"] .ach-icon[data-tier="epic"]{--ach-ink:#a78bfa;color:#a78bfa}
[data-theme="dark"] .ach-icon[data-tier="legendary"]{--ach-ink:#f87171;color:#f87171}
[data-theme="dark"] .ach-icon[data-tier="mythic"]{--ach-ink:#F0B65A;color:#F0B65A}
[data-theme="dark"] .ach-icon[data-tier="special"] .ach-outer,
[data-theme="dark"] .ach-icon[data-tier="obsidian"] .ach-outer{display:inline}
/* V4.19.1 徽章填满（站主 2026-10-25 定稿，本批接入）：
   已解锁＝盘面填档位色＋图案改白（普通～神话；**两主题同一套**，换主题徽章不变）；
   未解锁＝不填满，问号底沿用主题盘面色（--ach-face 主题默认：浅 #E5D5B6／深 #242424）＋主题文字色；
   特殊/黑金（special／obsidian）刻意不填满：保持 #141414 黑盘＋原色图案（通天塔 special 不动）。
   判据用 achMedalHtml 写出的状态类 ⇒ 成就卡片与「成就解锁」弹窗两处渲染点同源，不靠父级 DOM 结构。 */
.ach-icon.ach-unlocked:not([data-tier="special"]):not([data-tier="obsidian"]){
  --ach-face:var(--ach-ring);
  --ach-ink:#FFFFFF;
  color:#FFFFFF;
}
.ach-icon.ach-locked:not([data-tier="special"]):not([data-tier="obsidian"]){
  --ach-ink:var(--text3);
}
/* 神话：彩虹圈（conic + mask，叠在 SVG 金属圈之上） */
.ach-icon[data-tier="mythic"]::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:1;
  background:conic-gradient(from 200deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff,#ff0000);
  -webkit-mask:radial-gradient(circle,transparent 0 21.2px,#000 21.2px 23.4px,transparent 23.4px);
          mask:radial-gradient(circle,transparent 0 21.2px,#000 21.2px 23.4px,transparent 23.4px)}
/* 未解锁：整枚去色 + 问号，替掉原先整卡 opacity:.55 的「变淡」 */
.ach-card:not(.unlocked) .ach-icon{filter:grayscale(1) opacity(.9)}
.ach-q{position:absolute;inset:0;z-index:4;display:grid;place-items:center;border-radius:50%;
  background:var(--ach-face);font-family:var(--font-serif);font-weight:700;font-size:19px;
  color:var(--text3);opacity:.86}
.ach-name{font-size:15px;font-weight:600;font-family:var(--font-serif);line-height:1.35;flex:1;min-width:0;padding-top:2px}
.ach-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.ach-desc{font-size:12px;color:var(--text2);line-height:1.5}
/* V4.19.17：绝版标记加粗（站主 2026-10-28 定）——JS 只出类名，观感一律走 CSS */
.ach-retired{font-weight:700}
/* V4.15.50：牌心单字改 HTML 层（替代 SVG <text>，iOS 上 SVG 文本在 cv 子树里不绘制） */
.ach-char{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;
  font-family:var(--font-serif);font-weight:700;font-size:14.5px;line-height:1;color:var(--ach-ink,#6B7280)}
.achievement-popup-icon .ach-char{font-size:11.5px}
.ach-status{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);white-space:nowrap}
.ach-status.is-on{color:var(--ach-ok,#2F7D46)}
.ach-status-ic{flex:0 0 auto;display:block}
.ach-unlock-date{font-size:11px;color:var(--text3);line-height:1.5}
.ach-new{flex:none;align-self:flex-start;font:700 10px/1.6 var(--font-sans,sans-serif);letter-spacing:.04em;padding:0 5px;border-radius:5px;background:var(--red,#B43838);color:#fff}
.achievement-unread-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--red,#B43838);color:#fff;font:700 11px/1 var(--font-sans,sans-serif);margin-left:auto}
.achievement-unread-badge.hidden{display:none}
.ach-footer{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:4px;border-top:1px solid var(--border)}
.ach-reward{font-size:12px;font-weight:700;color:var(--orange);background:rgba(200,137,62,0.1);padding:3px 8px;border-radius:8px}
.ach-title-reward{font-size:12px;font-weight:600;color:var(--purple);background:rgba(107,78,140,0.09);padding:3px 8px;border-radius:8px;border:1px solid transparent}
.ach-title-reward-mythic{background:linear-gradient(135deg,rgba(255,0,0,.08),rgba(255,127,0,.08),rgba(255,255,0,.08),rgba(0,255,0,.08),rgba(0,255,255,.08),rgba(0,0,255,.08),rgba(139,0,255,.08))!important;color:transparent!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-image:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff)!important}
.ach-rarity{font-size:11px;font-weight:600;display:inline-block;line-height:1.4;border:1px solid transparent}
.ach-rarity-mythic{color:transparent!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-image:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff)!important}
/* 2026-11-01：成就归属分区标识（账号级跨术法 / 本术法独立） */
.ach-scope-tag{font-size:10px;font-weight:600;display:inline-block;line-height:1.4;border:1px solid transparent;border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.ach-scope-account{color:#6B7280;border-color:rgba(107,114,128,.35);background:rgba(107,114,128,.08)}
.ach-scope-shufa{color:var(--vermilion,#8b1a1a);border-color:rgba(139,26,26,.3);background:rgba(139,26,26,.06)}
.ach-scope-note{margin:10px 0 2px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);font-size:.82rem;line-height:1.7;color:var(--text2)}
.ach-scope-note .ach-scope-tag{margin-left:0}
.ach-scope-desc{margin-top:4px;font-size:.76rem;color:var(--text3)}
.ach-summary{
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy-dark) 100%);
  color:var(--gold-light);border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:28px;display:flex;align-items:center;gap:24px;
  position:relative;overflow:hidden
}
.ach-summary::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 20%,rgba(201,184,150,.12),transparent 50%),
             radial-gradient(ellipse at 20% 90%,rgba(139,26,26,.1),transparent 45%);
}
.ach-summary>*{position:relative;z-index:1}
.ach-summary-ring{
  width:84px;height:84px;border-radius:50%;
  background:conic-gradient(var(--gold) var(--ach-pct,0%),rgba(201,184,150,.15) 0);
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.ach-summary-ring-inner{
  width:68px;height:68px;border-radius:50%;background:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;flex-direction:column
}
.ach-summary-percent{font-size:19px;font-weight:900;color:var(--gold);line-height:1}
.ach-summary-percent small{font-size:10px;font-weight:500}
.ach-summary-label{font-size:10px;color:var(--silver-dim);margin-top:2px;letter-spacing:.06em}
.ach-summary-info{flex:1;min-width:0}
.ach-summary-title{font-family:var(--font-serif);font-size:17px;font-weight:700;margin-bottom:6px;color:#fff}
.ach-summary-count{font-size:13px;color:var(--silver);display:flex;gap:16px;flex-wrap:wrap}
.ach-summary-count span{color:var(--gold);font-weight:700}
.ach-summary-bar{height:8px;background:rgba(201,184,150,.15);border-radius:4px;margin-top:14px;overflow:hidden}
.ach-summary-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--jade));border-radius:4px;transition:width .6s ease}
.ach-summary-cats{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ach-summary-cat{
  font-size:11px;color:var(--silver);background:rgba(255,255,255,.06);
  padding:5px 10px;border-radius:8px;border:1px solid rgba(201,184,150,.12);
  cursor:pointer;transition:all .2s;outline:none
}
.ach-summary-cat:hover,.ach-summary-cat:focus{
  background:rgba(201,184,150,.15);color:var(--gold);border-color:rgba(201,184,150,.3)
}
.ach-summary-cat span{color:var(--gold);font-weight:700;margin-left:4px}
@media(max-width:768px){
  .ach-list{grid-template-columns:1fr}
  .ach-summary{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ========== TITLES ========== */
.title-list{display:flex;flex-direction:column;gap:8px}
.title-item{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-md);border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;position:relative;background:var(--bg-card);transition:all .15s}
.title-item:hover{border-color:var(--gold)}
.title-item.equipped{outline:2px solid var(--gold);outline-offset:-2px;border-color:transparent;background-clip:padding-box;box-shadow:0 0 0 1px rgba(201,184,150,.25) inset,0 0 18px rgba(201,184,150,.18)}
.title-item-name{font-size:15px;font-weight:600;font-family:var(--font-serif)}
.title-item-source{font-size:11px;color:var(--text2)}
.title-item-badge{position:absolute;right:10px;top:10px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(10,22,40,.55);color:var(--gold-light);border:1px solid var(--gold);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}

/* 称号稀有度 */
.title-common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.title-uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.title-rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.title-epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border-color:transparent;box-shadow:0 2px 10px rgba(255,82,82,.35)}
.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.25);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.title-obsidian{background:linear-gradient(135deg,#0a0a0a 0%,#151515 25%,#0a0a0a 50%,#1f1f1f 75%,#0a0a0a 100%);color:#e8d6a8;border-color:#d4b86a;box-shadow:0 0 24px rgba(212,184,104,.6),0 3px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(212,184,104,.5)}

.title-item-common{background:#f5f5f7}
.title-item-uncommon{background:#e8f5e9}
.title-item-rare{background:#e3f2fd}
.title-item-epic{background:#f3e5f5}
.title-item-legendary{background:#fff3e0}
.title-item-mythic{background:linear-gradient(135deg,rgba(255,0,0,.08),rgba(255,127,0,.08),rgba(255,255,0,.08),rgba(0,255,0,.08),rgba(0,255,255,.08),rgba(0,0,255,.08),rgba(139,0,255,.08))}
.title-item-obsidian{background:linear-gradient(135deg,#0a0a0a 0%,#151515 25%,#0a0a0a 50%,#1f1f1f 75%,#0a0a0a 100%);color:#e8d6a8;border-color:#d4b86a;box-shadow:0 0 22px rgba(212,184,104,.55),0 3px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(212,184,104,.45)}

.rank-title{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600;border:1px solid transparent}
.rank-title.title-common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.rank-title.title-uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.rank-title.title-rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.rank-title.title-epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.rank-title.title-legendary{background:linear-gradient(135deg,#ff8a65,#ff5252);color:#fff;border-color:transparent}
.rank-title.title-mythic{background:linear-gradient(135deg,#ff0000,#ff7f00,#ffff00,#00ff00,#00ffff,#0000ff,#8b00ff);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.rank-title.title-obsidian{background:linear-gradient(135deg,#0a0a0a 0%,#151515 25%,#0a0a0a 50%,#1f1f1f 75%,#0a0a0a 100%);color:#e8d6a8;border-color:#d4b86a;box-shadow:0 0 20px rgba(212,184,104,.55),0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(212,184,104,.45)}

/* ========== EXCHANGE ========== */
.exchange-layout{max-width:600px;margin:0 auto}
.exchange-header{text-align:center;margin-bottom:24px}
.exchange-bal-label{font-size:13px;color:var(--text2)}
.exchange-bal-val{font-size:40px;font-weight:700;color:var(--ink-deep);font-family:var(--font-serif)}
.exchange-card{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:14px;transition:all .15s}
.exchange-card:hover{box-shadow:var(--shadow-sm)}
.ec-name{font-size:17px;font-weight:700;font-family:var(--font-serif)}
.ec-desc{font-size:13px;color:var(--text2);margin-top:3px}
.shop-grid{display:grid;gap:12px;margin-bottom:24px}
.shop-card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);padding:18px 20px;transition:all .15s}
.shop-card:hover{box-shadow:var(--shadow-sm)}
.shop-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:16px;font-weight:700;font-family:var(--font-serif);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shop-talisman-icon{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-serif);font-weight:700;color:#fff;flex-shrink:0}
.talisman-wenchang{background:linear-gradient(135deg,#4A90D9,#2E5A8C)}
.talisman-caishen{background:linear-gradient(135deg,#C8893E,#8B6F3F)}
.talisman-taisui{background:linear-gradient(135deg,#8B1A1A,#5C0F0F)}
.shop-desc{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.5}
.shop-cost{font-size:15px;font-weight:700;color:var(--orange)}
.title-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid transparent}
.title-badge.common{background:#f5f5f7;color:#666;border-color:#e0e0e0}
.title-badge.uncommon{background:#e8f5e9;color:#2e7d32;border-color:#a5d6a7}
.title-badge.rare{background:#e3f2fd;color:#1565c0;border-color:#90caf9}
.title-badge.epic{background:#f3e5f5;color:#7b1fa2;border-color:#ce93d8}
.title-badge.legendary{background:#ffebee;color:#c62828;border-color:#ef9a9a}
.title-badge.mythic{background:linear-gradient(90deg,#ff0000,#ff7f00,#ffff00,#00ff00,#0000ff,#4b0082,#9400d3);color:#fff;border-color:transparent;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.title-badge.obsidian{background:linear-gradient(135deg,#0a0a0a 0%,#151515 25%,#0a0a0a 50%,#1f1f1f 75%,#0a0a0a 100%);color:#e8d6a8;border-color:#d4b86a;box-shadow:0 0 16px rgba(212,184,104,.55),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(212,184,104,.45)}
/* 黑金称号流光效果 */
.title-obsidian,.title-item-obsidian,.rank-title.title-obsidian,.title-badge.obsidian,.ph-title.title-obsidian{position:relative;overflow:hidden}
.title-obsidian::before,.title-item-obsidian::before,.rank-title.title-obsidian::before,.title-badge.obsidian::before,.ph-title.title-obsidian::before{
  content:'';position:absolute;top:0;left:-120%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,201,168,.22),transparent);
  animation:obsidian-shine 3.2s ease-in-out infinite;
  pointer-events:none
}
@keyframes obsidian-shine{0%{left:-120%}100%{left:220%}}
.ec-price{font-size:16px;font-weight:700;color:var(--orange)}

/* ========== TASKS PAGE ========== */
.task-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.task-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:18px 20px;border:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.task-card.completed{border-color:var(--jade);background:rgba(91,140,111,0.04)}
.task-header{display:flex;align-items:center;gap:10px}
.task-icon{font-size:28px}
.task-title{flex:1;font-size:15px;font-weight:600}
.task-desc{font-size:12px;color:var(--text2);line-height:1.6}
.task-progress{background:var(--border);border-radius:6px;height:8px;overflow:hidden;margin-top:4px}
.task-progress-fill{height:100%;background:linear-gradient(90deg,var(--jade),var(--gold));border-radius:6px;transition:width .3s}
.task-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.task-reward{font-size:14px;font-weight:700;color:var(--orange)}
.task-status{font-size:12px;font-weight:600;color:var(--text2)}
.task-status.done{color:var(--jade)}

@media(max-width:768px){
  .task-list{grid-template-columns:1fr}
}

/* ========== GUIDE PAGE ========== */
.guide-layout{max-width:720px;margin:0 auto}
.guide-hero{
  text-align:center;padding:36px 24px;
  background:linear-gradient(135deg,rgba(201,184,150,0.08),rgba(139,26,26,0.03));
  border-radius:var(--radius-xl);border:1px solid rgba(201,184,150,0.15);margin-bottom:20px
}
.guide-hero-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:16px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--ink-deep);font-family:var(--font-serif);font-weight:700}
.guide-hero-icon img{display:block;width:78%;height:78%}
.guide-hero h2{font-size:22px}
.guide-hero p{font-size:14px;color:var(--text2);margin-top:6px}
.level-grid-guide{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lg-item{padding:10px;background:var(--bg-soft);border-radius:10px;text-align:center;font-size:12px}
.lg-item b{display:block;font-size:14px;margin-bottom:2px}

/* ========== ABOUT / SETTINGS ========== */
.about-card{max-width:640px;margin:0 auto}
.about-logo{width:80px;height:80px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(135deg,var(--gold),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--ink-deep);font-family:var(--font-serif);font-weight:700;box-shadow:0 2px 12px rgba(201,184,150,0.25)}
.about-logo img{display:block;width:78%;height:78%}
.about-title{font-family:var(--font-serif);font-size:22px;font-weight:700;text-align:center}
.about-version{text-align:center;color:var(--text2);font-size:13px;margin:6px 0 20px}
.about-desc{font-size:14px;color:var(--text2);line-height:1.8;margin-bottom:20px}
.about-info{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
.about-info-item{background:var(--bg-soft);border-radius:var(--radius-md);padding:14px;font-size:13px}
.about-info-item b{display:block;color:var(--ink-dark);margin-bottom:4px}

/* ========== MODAL & TOAST ========== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,22,40,0.5);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-box{width:90%;max-width:420px;background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:0 8px 40px rgba(10,22,40,0.2);border:1px solid var(--gold-dim);overflow:hidden}
.modal-dialog{width:90%;max-width:420px;background:var(--bg-card);border-radius:var(--radius-xl);padding:32px 28px;text-align:center;box-shadow:0 8px 40px rgba(10,22,40,0.2);border:1px solid var(--gold-dim);max-height:85vh;overflow-y:auto;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.modal-dialog h3{font-size:20px;margin-bottom:8px;font-family:var(--font-serif)}
.modal-dialog p{font-size:14px;color:var(--text2);margin-bottom:20px;line-height:1.6}
.modal-btns{display:flex;gap:10px;justify-content:center}
.jiazhi-card-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,18,0.78);z-index:250;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s}
.jiazhi-card-modal.hidden{display:none}
.jiazhi-card{width:100%;max-width:380px;background:linear-gradient(180deg,#1a1a2e 0%,#0f0f1a 100%);border:1px solid rgba(212,175,55,0.35);border-radius:16px;padding:28px 22px;color:#e8e0cc;box-shadow:0 12px 50px rgba(0,0,0,0.5);text-align:center;position:relative;overflow:hidden}
.jiazhi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#d4af37,transparent)}
.jiazhi-card-top{font-size:13px;color:#d4af37;letter-spacing:4px;margin-bottom:10px}
.jiazhi-card-main{font-size:56px;font-weight:700;color:#d4af37;margin:6px 0 4px;text-shadow:0 2px 12px rgba(212,175,55,0.25);font-family:var(--font-serif)}
.jiazhi-card-sub{font-size:12px;color:#9ea3b0;margin-bottom:18px}
.jiazhi-card-info{display:flex;justify-content:center;gap:16px;margin-bottom:18px}
.jiazhi-card-info>div{display:flex;flex-direction:column;gap:4px;min-width:70px}
.jiazhi-card-info .lab{font-size:11px;color:#9ea3b0}
.jiazhi-card-info .val{font-size:18px;font-weight:600;color:#f0e6d2}
.jiazhi-card-poem{background:rgba(255,255,255,0.05);border-radius:10px;padding:16px 14px;margin-bottom:16px;border:1px solid rgba(212,175,55,0.15)}
.jiazhi-card-poem-title{font-size:12px;color:#d4af37;margin-bottom:10px;letter-spacing:6px}
.jiazhi-card-poem p{font-size:15px;line-height:1.9;margin:0;color:#e8e0cc}
.jiazhi-card-fortune{font-size:22px;font-weight:700;color:#ff4d4f;margin:14px 0 6px}
.jiazhi-card-fortune.good{color:#34c759}
.jiazhi-card-fortune.mid{color:#ff9500}
.jiazhi-card-desc{font-size:13px;color:#b8bccc;line-height:1.7;margin-bottom:16px}
.jiazhi-card-extra{font-size:12px;color:#7a7f8f;margin-bottom:20px}
.jiazhi-card-btns{display:flex;gap:10px;justify-content:center}
.jiazhi-card-btns .btn{flex:1}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(13,27,42,0.95);color:var(--gold);padding:12px 28px;border-radius:var(--radius-md);font-size:14px;font-weight:500;z-index:300;animation:fadeIn .3s,slideDown .3s;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:420px;text-align:center}
@keyframes slideDown{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ========== Utilities ========== */
.hidden{display:none!important}
.text-center{text-align:center}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mb-12{margin-bottom:12px}.mb-20{margin-bottom:20px}
.flex-1{flex:1}
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:52px;margin-bottom:14px}
.empty-title{font-size:18px;font-weight:600;margin-bottom:8px;font-family:var(--font-serif)}
.empty-desc{font-size:14px;color:var(--text2)}
.back-link{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;margin-bottom:16px;transition:color .15s;font-family:var(--font-sans);background:none;border:none;padding:0}
.back-link:hover{color:var(--ink-deep)}
.back-link span:first-child{font-size:16px}
/* 滚动浮钮：本页不加载 style.css，而这两枚按钮是 app.js 动态注入的（类名 back-to-top / back-to-bottom）。
   原来这里只有 `.back-to-top{...bottom:28px}` ＋ `.back-to-top.show{...}` 两行，三处对不上：
   ① `.back-to-bottom` **完全没有规则** ⇒ 一枚无样式的 UA 灰按钮（内含未定尺寸的 `<svg>`，
      Chrome 对无宽高的 svg 默认 300×150）摊在 body 末尾 —— 实测桌面 3600px²、390 宽下 **15.3 万 px²**
      的灰块，且两主题都在；② 显隐类写的是 `.show`，而 app.js 加的是 `.visible`
      ⇒ 「回到顶部」永远不出现（静默死掉）；③ 隐藏态没有 `pointer-events:none`
      ⇒ 看不见的按钮照样吞点击。按 style.css 同一条款补齐。 */
.back-to-top,.back-to-bottom{position:fixed;right:28px;width:44px;height:44px;border-radius:50%;
  background:var(--navy-dark);color:var(--gold);border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);cursor:pointer;z-index:90;font-size:20px;
  opacity:0;transform:translateY(20px);pointer-events:none;transition:all .25s}
.back-to-top{bottom:82px}
.back-to-bottom{bottom:28px}
.back-to-top.visible,.back-to-bottom.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover,.back-to-bottom:hover{background:var(--navy-mid)}
.back-to-top svg,.back-to-bottom svg{width:22px;height:22px}
[data-theme="dark"] .back-to-top,[data-theme="dark"] .back-to-bottom{background:#1B2A3E;color:var(--gold-light);box-shadow:0 6px 20px rgba(0,0,0,.55)}
[data-theme="dark"] .back-to-top:hover,[data-theme="dark"] .back-to-bottom:hover{background:#243447}
@keyframes spin{to{transform:rotate(360deg)}}
.global-loading{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(245,240,230,0.88);backdrop-filter:blur(8px);z-index:9999;transition:opacity .2s}
.global-loading.hidden{opacity:0;pointer-events:none}
.global-loading .spinner{width:36px;height:36px;border:3px solid rgba(201,184,150,0.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
.global-loading .text{font-size:14px;color:var(--text2)}

/* ========== Responsive ========== */
@media(max-width:1024px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .3s ease;z-index:200;box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 30px rgba(0,0,0,.2)}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
  .sidebar-overlay.show{opacity:1;pointer-events:auto}
  .menu-toggle{display:flex!important}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-split{grid-template-columns:1fr}
  .profile-stats-grid{grid-template-columns:repeat(3,1fr)}
  .profile-cols{grid-template-columns:1fr}
  /* 五格（答对/答错/经验/积分/用时）两列排会剩一个孤儿格，让最后一格通栏铺满 */
  .results-grid{grid-template-columns:repeat(2,1fr)}
  .results-grid .result-item:last-child{grid-column:1 / -1}
  .options-list{grid-template-columns:1fr;grid-auto-rows:auto}
  .knowledge-grid{grid-template-columns:repeat(2,1fr)}
  .quiz-modes{grid-template-columns:1fr}
  .level-grid-guide{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:768px){
  :root{--sidebar-w:260px;--header-h:56px}
  html,body{height:100%}
  body{flex-direction:column;min-height:100dvh}
  .app-shell{flex-direction:column;height:100dvh;min-height:100dvh}
  .main-area{flex:1;min-height:0}
  .top-header{padding:0 16px;gap:10px}
  .header-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .header-breadcrumb{display:none}
  .header-search{display:none}
  .header-actions{gap:8px;flex-shrink:0}
  .header-actions .header-login-btn{padding:5px 8px 5px 5px!important}
  /* 移动端登录态胶囊仅保留头像，尺寸与消息/主题按钮一致（36×36） */
  .header-actions .header-login-btn.gxt-logged-in{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:36px!important;height:36px!important;min-width:auto!important;
    padding:2px!important;border-radius:50%!important;
    border:2px solid var(--ink-deep)!important;background:transparent!important;
    overflow:hidden!important
  }
  /* 白天模式：头像外圈填充黑色（不再镂空） */
  [data-theme="light"] .header-actions .header-login-btn.gxt-logged-in{
    background:var(--navy-deep)!important
  }
  .header-actions .header-login-btn.gxt-logged-in > span{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:100%!important;gap:0!important
  }
  .header-actions .header-login-btn.gxt-logged-in img,
  .header-actions .header-login-btn.gxt-logged-in .gxt-avatar{
    width:28px!important;height:28px!important;flex-shrink:0!important
  }
  .header-actions .gxt-user-name,
  .header-actions .gxt-nickname-hint{display:none!important}
  .content-area{padding:16px;padding-bottom:120px}
  .welcome-banner{flex-direction:column;text-align:center;padding:20px}
  .welcome-stats-col{text-align:center;margin-top:12px}
  .welcome-exp{max-width:100%}
  .section-grid-wide{grid-template-columns:1fr}
  .knowledge-grid{grid-template-columns:1fr}
  .quiz-active-panel,.quiz-layout,.quiz-config-panel{max-width:100%}
  .question-card{padding:20px 16px}
  .profile-hero{flex-direction:column;text-align:center;padding:20px}
  .ph-info{width:100%}
  .ph-level-line{flex-direction:column;align-items:center;gap:8px}
  .ph-exp-bar{max-width:none;width:100%}
  .ph-actions{flex-direction:row;justify-content:center;align-items:center;margin-top:12px}
  .profile-stats-grid{grid-template-columns:repeat(2,1fr)}
  .rank-table-wrapper{border-radius:var(--radius-md)}
  .rank-row{padding:10px 14px}
  .exchange-layout,.guide-layout,.results-panel,.profile-layout{max-width:100%}
  .level-grid-guide{grid-template-columns:repeat(2,1fr)}
  .login-card{width:92%;max-width:380px;padding:28px 24px}
}

.menu-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);
  background:none;border:none;cursor:pointer;font-size:22px;color:var(--text);flex-shrink:0
}

/* 题库首次加载提示 */
#questionBankLoading{
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:none;align-items:center;justify-content:center;
  background:rgba(245,240,230,0.94);backdrop-filter:blur(6px);
  z-index:9998;color:var(--text2);font-size:15px;text-align:center;padding:20px
}
#questionBankLoading .qbank-loading-inner{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px 36px;box-shadow:var(--shadow-lg);max-width:320px;line-height:1.8
}

/* 减少动画偏好：关闭玻璃态模糊以提升低端设备性能 */
@media (prefers-reduced-motion:reduce){
  .top-header,.modal,.toast,#questionBankLoading{backdrop-filter:none;-webkit-backdrop-filter:none}
}
#questionBankLoading .qbank-loading-inner::before{
  content:'';display:block;width:32px;height:32px;margin:0 auto 14px;
  border:3px solid rgba(201,184,150,0.25);border-top-color:var(--gold);border-radius:50%;
  animation:spin .8s linear infinite
}

/* ---------- 移动端底部 Tab 导航栏 ---------- */
.mobile-tab-bar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9998;
  height:56px;
  background:var(--bg-card,#FFFBF5);
  border-top:1px solid var(--border,rgba(10,22,40,.1));
  box-shadow:0 -2px 12px rgba(10,22,40,.06);
  padding-bottom:env(safe-area-inset-bottom,0);
}
@media (max-width:768px){
  .mobile-tab-bar{display:flex}
  body{padding-bottom:0}
  .content-area{padding-bottom:16px}
  /* 移动端浮钮避让底部 Tab 导航栏（高度 56px + 安全区，层级 9998） */
  .back-to-bottom{bottom:calc(56px + env(safe-area-inset-bottom,0) + 14px)!important;right:16px!important;z-index:9999!important}
  .back-to-top{bottom:calc(56px + env(safe-area-inset-bottom,0) + 68px)!important;right:16px!important;z-index:9999!important}
  /* 移动端弹窗防溢出与纵向操作排版 */
  .modal-dialog{width:92%;max-width:380px;padding:22px 18px;max-height:85vh;overflow-y:auto}
  .modal-btns{flex-direction:column;gap:8px}
  .modal-btns .btn{width:100%;margin:0}
  .radar-tooltip{max-width:min(280px, calc(100% - 24px))}
  /* V4.5.8 触摸目标补齐（真机实测原值：侧栏用户名 20px / 返回 24px / 弹窗关闭 24px / 开始刷题 33px，均 <36px 线）。
     一律用 min-height 或「padding + 负 margin」放大命中区，视觉位置与桌面端布局零变化。 */
  .sidebar-user-name{padding:9px 0;margin:-9px 0}
  .back-link{min-height:36px}
  .achievement-popup-close{width:36px;height:36px}
  [data-action="start-custom-bank-quiz"]{min-height:36px}
}
.tab-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-decoration:none;
  color:var(--text3,#7A8A9A);
  font-size:10px;
  transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.tab-item.active{color:var(--vermilion,#8B1A1A)}
/* 暗色下 --vermilion(#C85A5A) 压在 tab 条底实测 4.02:1（10px 小字要 4.5），换亮一档的 --vermilion-light */
[data-theme="dark"] .tab-item.active{color:var(--vermilion-light,#D46A6A)}
.tab-icon{width:22px;height:22px}

/* ---------- 移动端按压反馈 ---------- */
@media (max-width:768px){
  .btn:active,
  .tab-item:active,
  .nav-item:active,
  .option-item:active,
  .section-card-wide:active,
  .stat-card:active,
  .recommend-banner:active,
  .task-card:active,
  .ach-summary-cat:active,
  .rank-row:active{
    transform:scale(0.96);
    transition:transform .08s ease;
  }
}

/* ---------- 骨架屏 ---------- */
.skeleton{
  background:linear-gradient(90deg,var(--paper-warm,#EDE4D0) 25%,#e8e0d2 50%,var(--paper-warm,#EDE4D0) 75%);
  background-size:200% 100%;
  animation:gxt-shimmer 1.4s ease infinite;
  border-radius:8px;
}
@keyframes gxt-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton-line{height:14px;margin-bottom:10px}
.skeleton-line:last-child{width:60%}
.skeleton-block{height:120px;margin-bottom:16px}

/* ---------- 暗色模式覆盖 ---------- */
[data-theme="dark"] .ph-title.title-common,
[data-theme="dark"] .title-common,
[data-theme="dark"] .rank-title.title-common,
[data-theme="dark"] .title-badge.common,
[data-theme="dark"] .title-item-common{background:#2a2a2e;color:#b0b0b8;border-color:#3a3a3e}
[data-theme="dark"] .ph-title.title-uncommon,
[data-theme="dark"] .title-uncommon,
[data-theme="dark"] .rank-title.title-uncommon,
[data-theme="dark"] .title-badge.uncommon,
[data-theme="dark"] .title-item-uncommon{background:#1a2f1f;color:#7abf8f;border-color:#2a4f3a}
[data-theme="dark"] .ph-title.title-rare,
[data-theme="dark"] .title-rare,
[data-theme="dark"] .rank-title.title-rare,
[data-theme="dark"] .title-badge.rare,
[data-theme="dark"] .title-item-rare{background:#1a2638;color:#8ab4e0;border-color:#2a4060}
[data-theme="dark"] .ph-title.title-epic,
[data-theme="dark"] .title-epic,
[data-theme="dark"] .rank-title.title-epic,
[data-theme="dark"] .title-badge.epic,
[data-theme="dark"] .title-item-epic{background:#2a1f38;color:#c49ad8;border-color:#3a2f4e}
[data-theme="dark"] .ph-title.title-legendary,
[data-theme="dark"] .title-legendary,
[data-theme="dark"] .rank-title.title-legendary,
[data-theme="dark"] .title-badge.legendary,
[data-theme="dark"] .title-item-legendary{background:#3a2a1a;color:#e0b070;border-color:#5a4a2a}
[data-theme="dark"] .title-obsidian,
[data-theme="dark"] .rank-title.title-obsidian,
[data-theme="dark"] .title-badge.obsidian,
[data-theme="dark"] .title-item-obsidian{background:linear-gradient(135deg,#050505 0%,#0f0f0f 25%,#050505 50%,#141414 75%,#050505 100%);color:#ecdca0;border-color:#b8a06a;box-shadow:0 0 22px rgba(212,184,104,.45),0 3px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(212,184,104,.4)}
[data-theme="dark"] .knowledge-table,
[data-theme="dark"] .learning-content table{background:#1A1A1A}
[data-theme="dark"] .knowledge-table th,
[data-theme="dark"] .learning-content th{background:#0A1628;color:#FBF8F1}
[data-theme="dark"] .knowledge-table td,
[data-theme="dark"] .learning-content td{border-color:rgba(251,248,241,.1)}
[data-theme="dark"] .wx-node.wx-jin{background:#d4af37}
[data-theme="dark"] .wx-node.wx-shui{background:#5a9ab0}
[data-theme="dark"] .wx-node.wx-mu{background:#6b9f7f}
[data-theme="dark"] .wx-node.wx-huo{background:#e06060}
[data-theme="dark"] .wx-node.wx-tu{background:#c4a050}
[data-theme="dark"] .learning-content .wx-mu{color:#7abf8f}
[data-theme="dark"] .learning-content .wx-huo{color:#e57373}
[data-theme="dark"] .learning-content .wx-tu{color:#d4a85a}
[data-theme="dark"] .learning-content .wx-jin{color:#E6C35C}
[data-theme="dark"] .learning-content .wx-shui{color:#64b5f6}
[data-theme="dark"] .learning-content .wx-jin{text-shadow:none}

/* 主题切换按钮（练功坊顶部 header 专用） */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong);
  background:transparent;color:var(--ink-deep);cursor:pointer;
  transition:all .2s;margin-left:8px;flex-shrink:0;
}
.theme-toggle:hover{background:rgba(139,26,26,.08);border-color:var(--vermilion);color:var(--vermilion)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .moon-icon{display:none}
.theme-toggle .sun-icon{display:block}
[data-theme="dark"] .theme-toggle{border-color:var(--border-strong);color:var(--ink-deep)}
[data-theme="dark"] .theme-toggle:hover{background:rgba(200,90,90,.12);border-color:var(--vermilion-light);color:var(--vermilion-light)}
[data-theme="dark"] .theme-toggle .moon-icon{display:block}
[data-theme="dark"] .theme-toggle .sun-icon{display:none}

/* ========== 签到日历 ========== */
.signin-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.signin-cal-weekday{text-align:center;font-size:12px;color:var(--text3);padding:6px 0;font-weight:500}
.signin-cal-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border);font-size:13px;position:relative;min-height:46px}
.signin-cal-cell.signin-cal-empty{background:transparent;border-color:transparent}
.signin-cal-date{font-weight:500;color:var(--ink-deep)}
.signin-cal-cell.today{border-color:var(--vermilion);background:rgba(139,26,26,0.06)}
.signin-cal-cell.today .signin-cal-date{color:var(--vermilion);font-weight:700}
.signin-cal-cell.signed{background:var(--jade);border-color:var(--jade);color:#fff}
.signin-cal-cell.signed .signin-cal-date{color:#fff}
.signin-cal-mark{font-size:12px;font-weight:700;margin-top:-2px}
.signin-cal-btn{font-size:11px;padding:2px 6px;border-radius:var(--radius-sm);border:none;background:var(--gold);color:var(--ink-deep);cursor:pointer;white-space:nowrap;margin-top:2px}
.signin-cal-btn:hover{background:var(--gold-light)}
.signin-cal-cell .signin-cal-btn{opacity:.95}
@media (max-width:640px){
  .signin-cal-cell{min-height:40px}
  .signin-cal-btn{font-size:10px;padding:2px 4px}
}
[data-theme="dark"] .signin-cal-cell{background:#1a1a1e;border-color:rgba(251,248,241,0.1)}
[data-theme="dark"] .signin-cal-date{color:#FBF8F1}
[data-theme="dark"] .signin-cal-cell.today{background:rgba(200,90,90,0.15);border-color:var(--vermilion-light)}
[data-theme="dark"] .signin-cal-cell.today .signin-cal-date{color:#e57373}
[data-theme="dark"] .signin-cal-cell.signed{background:var(--jade);border-color:var(--jade)}
[data-theme="dark"] .signin-cal-cell.signed .signin-cal-date{color:#fff}
[data-theme="dark"] .signin-cal-btn{background:var(--gold-dim);color:#0A1628}
[data-theme="dark"] .signin-cal-btn:hover{background:var(--gold)}
/* 亮底写死的吸顶头部与全屏加载层的夜间覆盖 */
[data-theme="dark"] .top-header{
  background:linear-gradient(180deg,#0D1B2A 0%,#0A1628 100%);
  border-bottom:1px solid rgba(251,248,241,.12);
}
[data-theme="dark"] #questionBankLoading{background:rgba(18,18,18,.94)}
[data-theme="dark"] #questionBankLoading .qbank-loading-inner{background:#1A1A1A}
[data-theme="dark"] .global-loading{background:rgba(18,18,18,.88)}

/* ========== 通天塔 ========== */
.tower-hero{
  background:linear-gradient(135deg,var(--navy-dark),var(--navy-mid));
  border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:16px;color:var(--gold);
}
.tower-hero-title{
  font-family:var(--font-serif);font-size:1.5rem;font-weight:900;letter-spacing:.3em;margin-bottom:8px;
}
.tower-hero-desc{font-size:.84rem;color:var(--silver-light);line-height:1.7}
.tower-qualify-card{margin-bottom:14px}
.tower-qualify-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.86rem;color:var(--text2);
}
.tower-qualify-tag{
  background:var(--gold);color:var(--ink-dark);font-weight:700;font-size:.72rem;
  padding:3px 10px;border-radius:999px;letter-spacing:.12em;
}
.tower-daily{margin-left:auto;font-size:.84rem}
.tower-daily b{color:var(--vermilion);font-size:1rem}
.tower-qualify-hint{margin-top:10px;font-size:.82rem;color:var(--text2);line-height:1.7}
.tower-qualify-exam-card{margin-bottom:16px}
.tower-qualify-exam-title{font-family:var(--font-serif);font-weight:700;margin-bottom:6px;color:var(--ink-deep)}
.tower-qualify-exam-desc{font-size:.82rem;color:var(--text2);line-height:1.7;margin-bottom:10px}
.tower-qualify-passed{color:var(--jade);font-weight:600;font-size:.86rem;margin-bottom:4px}
.tower-qualify-lock{color:var(--text3);font-size:.84rem;margin-bottom:4px}
.tower-round-group{margin-bottom:20px}
.tower-round-title{
  font-family:var(--font-serif);font-weight:700;font-size:.92rem;color:var(--ink-deep);
  margin-bottom:8px;padding-left:10px;border-left:3px solid var(--gold);
}
.tower-floor-card{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px 14px;margin-bottom:8px;transition:all .15s;
}
.tower-floor-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-strong)}
.tower-floor-passed{background:rgba(91,140,111,.05);border-color:rgba(91,140,111,.25)}
.tower-floor-placeholder{opacity:.75}
.tower-floor-pending{background:rgba(120,120,120,.045);border-color:var(--border-soft);cursor:not-allowed;filter:grayscale(.85)}
.tower-floor-pending .tower-floor-no{color:var(--text3)}
.tower-floor-pending .tower-floor-chart{color:var(--text3)}
.tower-floor-pending .tower-floor-status{color:var(--text3)}
.tower-floor-no{
  font-family:var(--font-serif);font-weight:700;color:var(--vermilion);
  font-size:.92rem;flex-shrink:0;min-width:56px;
}
.tower-floor-passed .tower-floor-no{color:var(--jade)}
.tower-floor-body{flex:1;min-width:180px}
.tower-floor-chart{font-size:.84rem;color:var(--ink-deep);line-height:1.6}
.tower-floor-meta{font-size:.74rem;color:var(--text3);margin-top:3px}
.tower-floor-status{font-size:.8rem;color:var(--text2);flex-shrink:0}
.tower-floor-replay{flex-shrink:0}
.tower-summary{
  font-size:.84rem;color:var(--text2);line-height:1.8;margin-bottom:12px;
}
.tower-summary b{color:var(--vermilion);font-size:.95rem}
.tower-footnote{font-size:.72rem;color:var(--text3);text-align:center;margin:14px 0 6px;line-height:1.7}

/* P4：阶位称号 + 命例解析页 */
.tower-title-row{margin-top:6px;font-size:.8rem;color:var(--text3)}
.tower-title-badge{color:var(--bronze);font-size:.92rem;letter-spacing:.05em}
.tower-case-title{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;margin:10px 0 4px;color:var(--ink-deep)}
.tower-case-meta{font-size:.76rem;color:var(--text3);margin-bottom:12px}
.tower-case-chart{margin-bottom:14px;line-height:1.8}
.tower-case-chart-text{font-size:.9rem;color:var(--ink-deep)}
.tower-case-label{font-size:.74rem;color:var(--text3);margin:10px 0 6px;letter-spacing:.08em}
.tower-case-paipan{margin-top:8px}
.tower-paipan-placeholder{font-size:.82rem;color:var(--text3);padding:6px 0}
.tower-paipan-table{border-collapse:collapse;margin:4px 0;font-size:.82rem}
.tower-paipan-table th,.tower-paipan-table td{border:1px solid var(--border-soft);padding:4px 10px;text-align:center}
.tower-paipan-table th{background:rgba(13,27,42,.04);color:var(--text2);font-weight:600}
.tower-paipan-meta{font-size:.78rem;color:var(--text2);margin-top:4px}
.tower-paipan-scroll{max-height:480px;overflow:auto;padding-right:4px}
.tower-paipan-full{width:100%}
.tower-paipan-full td{vertical-align:top}
.tower-hide{font-size:.72rem;line-height:1.5;display:block;max-width:180px}
.tower-ss-cell{max-width:230px}
.tower-ss{display:inline-block;margin:2px 3px;padding:1px 6px;border-radius:6px;font-size:.7rem;background:rgba(13,27,42,.05);white-space:nowrap}
.tower-ss-ji{color:#8B5A2B;background:rgba(196,169,78,.18)}
.tower-ss-xiong{color:#8B1A1A;background:rgba(139,26,26,.08)}
.tower-ss-zhong{color:#5A5048;background:rgba(13,27,42,.06)}
.tower-paipan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0}
.tower-paipan-card{border:1px solid var(--border-soft);border-radius:8px;padding:8px 10px;font-size:.78rem;background:rgba(251,248,241,.6);line-height:1.6}
.tower-paipan-block{margin:10px 0}
.tower-paipan-block>table{width:100%}
.tower-current{background:rgba(196,169,78,.16)}
.tower-dayun-row{cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.tower-dayun-row:hover{background:rgba(196,169,78,.10)}
.tower-dayun-active{background:rgba(196,169,78,.30)!important}
.tower-dayun-active td{font-weight:600;color:var(--text,#2A2A2A)}
.tower-paipan-hint{font-size:.72rem;color:var(--text3,#7A8A9A);margin:2px 0 0}
.tower-case-qs{margin-bottom:14px}
.tower-case-q{font-size:.88rem;color:var(--ink-deep);line-height:1.7;margin-top:10px}
.tower-case-opts{margin:4px 0 4px 6px;font-size:.84rem;color:var(--text2);line-height:1.8}
.tower-case-opt-ans{color:var(--jade);font-weight:600}
.tower-case-ans{font-size:.84rem;margin-top:2px;color:var(--text2)}
.tower-case-ans b{color:var(--vermilion)}
.tower-case-exp{font-size:.82rem;color:var(--text2);line-height:1.7;margin-top:4px}
.tower-case-note{font-size:.8rem;color:var(--text3);line-height:1.7;margin-top:4px}
.tower-case-lock{color:var(--text3);font-size:.85rem;text-align:center;padding:14px;line-height:1.7}

/* P5：通天榜 */
.tower-lb-panel{font-size:.84rem}
.tower-lb-placeholder{color:var(--text3);padding:12px 0;text-align:center}
.tower-lb-head,.tower-lb-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--border-soft)}
.tower-lb-head{color:var(--text3);font-size:.74rem;border-bottom-color:var(--border-strong)}
.tower-lb-head span:first-child{width:34px;flex-shrink:0}
.tower-lb-head span:nth-child(2){flex:1;min-width:0}
.tower-lb-head span:nth-child(3){width:44px;flex-shrink:0;text-align:center}
.tower-lb-head span:nth-child(4){width:58px;flex-shrink:0;text-align:right}
.tower-lb-head span:nth-child(5){width:48px;flex-shrink:0;text-align:right}
.tower-lb-head span:nth-child(6){width:62px;flex-shrink:0;text-align:right}
.tower-lb-row:last-child{border-bottom:none}
.tower-lb-me{background:rgba(201,184,150,.12)}
.tower-lb-rank{width:34px;font-weight:700;color:var(--bronze);flex-shrink:0}
.tower-lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-deep)}
.tower-lb-title{width:44px;flex-shrink:0;color:var(--bronze);text-align:center}
.tower-lb-floor{width:58px;flex-shrink:0;text-align:right;color:var(--ink-deep);font-weight:600}
.tower-lb-acc{width:48px;flex-shrink:0;text-align:right;color:var(--jade)}
.tower-lb-time{width:62px;flex-shrink:0;text-align:right;color:var(--text3)}

/* 未获资格门面：塔 + 石碑 */
.tower-gate{display:flex;align-items:flex-end;justify-content:center;gap:26px;flex-wrap:wrap;padding:26px 8px 10px}
.tower-gate-tower{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tower-gate-spire{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:26px solid var(--ink-deep);opacity:.9}
/* 多层宝塔：第 5 层（顶）最窄，逐层加宽；檐比层身各宽约 18px */
.tower-gate-eave{width:88px;height:12px;background:linear-gradient(180deg,var(--bronze),#9a7b4f);clip-path:polygon(0 100%,8% 0,92% 0,100% 100%);margin-top:-2px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.tower-gate-eave:nth-child(2){width:56px}
.tower-gate-eave:nth-child(4){width:62px}
.tower-gate-eave:nth-child(6){width:70px}
.tower-gate-eave:nth-child(8){width:78px}
.tower-gate-eave:nth-child(10){width:88px}
.tower-gate-tier{width:52px;height:36px;background:linear-gradient(180deg,#f6efe2,#e4d7c0);border:1px solid var(--border-strong);margin-top:1px;position:relative}
.tower-gate-tier::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:var(--vermilion);opacity:.8}
.tower-gate-tier:nth-child(3){width:38px;height:30px}
.tower-gate-tier:nth-child(5){width:44px;height:32px}
.tower-gate-tier:nth-child(7){width:52px;height:34px}
.tower-gate-tier:nth-child(9){width:60px;height:36px}
.tower-gate-tier:nth-child(11){width:70px;height:38px}
.tower-gate-base{width:86px;height:12px;background:#8a7a63;border-radius:2px 2px 6px 6px;margin-top:2px}
.tower-gate-tablet{width:min(300px,88vw);background:linear-gradient(180deg,#3d3629,#2a241b);border:1px solid #5a4f3c;border-radius:10px 10px 14px 14px;padding:16px 16px 12px;color:#efe6d0;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.25));position:relative}
.tower-gate-tablet::before{content:"";position:absolute;left:8px;right:8px;top:6px;height:1px;background:rgba(255,255,255,.14)}
.tower-gate-tablet-title{font-family:var(--font-serif);font-size:1.25rem;font-weight:900;letter-spacing:.3em;text-align:center;color:#f3e9cf;margin:4px 0 2px}
.tower-gate-tablet-sub{font-size:.72rem;color:#c9bda2;text-align:center;margin-bottom:10px}
.tower-gate-tablet-entry{border-top:1px dashed rgba(239,230,208,.22);padding:10px 2px 8px}
.tower-gate-entry-label{font-size:.78rem;color:#c9bda2;margin-bottom:7px;letter-spacing:.12em}
.tower-gate-lock{font-size:.84rem;color:#e8dcc0;line-height:1.7}
.tower-gate-lock b{color:#f0d78c}
.tower-gate-progress{height:8px;background:rgba(255,255,255,.14);border-radius:4px;overflow:hidden;margin:8px 0 2px}
.tower-gate-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--jade),#b7cf9a);border-radius:4px}
.tower-gate-daily{font-size:.74rem;color:#b8ab8f;margin-top:8px}
.tower-gate-daily b{color:#f0d78c;font-size:.85rem}
.tower-gate-tip{font-size:.78rem;color:var(--text3);text-align:center;margin:8px 4px 16px;line-height:1.8}

/* 塔内答题面板 */
.tower-quiz-panel{margin-bottom:16px}
.tower-quiz-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.82rem;color:var(--text2);margin-bottom:12px;
}
.tower-quiz-tag{
  background:var(--navy-dark);color:var(--gold);font-weight:700;
  padding:3px 10px;border-radius:999px;letter-spacing:.1em;font-size:.72rem;
}
.tower-quiz-tag-qualify{background:var(--vermilion);color:#fff}
.tower-quiz-floor{flex:1}
.tower-quiz-progress{color:var(--text3);font-weight:600}
.tower-quiz-chart{
  background:var(--bg-soft);border:1px dashed var(--gold-dim);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:.84rem;color:var(--ink-deep);
  line-height:1.7;margin-bottom:14px;
}
.tower-quiz-nav{margin-top:14px}
.tower-result-card{text-align:center;padding:26px 20px}
.tower-result-icon{font-size:2.4rem;margin-bottom:8px}
.tower-result-title{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;margin-bottom:8px;color:var(--ink-deep)}
.tower-result-score{font-size:.95rem;color:var(--vermilion);font-weight:700;margin-bottom:8px}
.tower-result-desc{font-size:.84rem;color:var(--text2);line-height:1.7;margin-bottom:14px}

/* ========== 错题本分析与学情诊断 ========== */
.wrong-analysis-wrap{display:flex;flex-direction:column;gap:18px}
.wrong-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.wrong-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;text-align:center;box-shadow:var(--shadow-sm,0 2px 6px rgba(0,0,0,.03))}
.wrong-stat-val{font-size:1.6rem;font-weight:700;font-family:var(--font-serif);color:var(--vermilion);line-height:1.2}
.wrong-stat-lbl{font-size:.76rem;color:var(--text2);margin-top:4px}

.wrong-cause-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.wrong-cause-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.wrong-cause-head{display:flex;justify-content:space-between;align-items:center}
.wrong-cause-tag{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:6px}
.wrong-cause-pct{font-size:.9rem;font-weight:700;font-family:var(--font-mono);color:var(--ink-deep)}
.wrong-cause-desc{font-size:.78rem;color:var(--text2);line-height:1.6}
.wrong-cause-bar{height:6px;background:rgba(13,27,42,.06);border-radius:3px;overflow:hidden}
.wrong-cause-fill{height:100%;border-radius:3px}

.wrong-units-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px}
.wrong-unit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border-soft,#e3e6eb)}
.wrong-unit-row:last-child{border-bottom:none}
.wrong-unit-badge{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;background:rgba(192,57,43,.1);color:var(--vermilion);flex-shrink:0}
.wrong-unit-info{flex:1;min-width:0}
.wrong-unit-title{font-size:.86rem;font-weight:600;color:var(--ink-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrong-unit-sub{font-size:.74rem;color:var(--text3);margin-top:2px}
.wrong-unit-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}

.wrong-section-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.wrong-section-name{width:110px;font-size:.8rem;color:var(--ink-deep);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrong-section-bar-wrap{flex:1;height:8px;background:rgba(13,27,42,.06);border-radius:4px;overflow:hidden}
.wrong-section-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--vermilion));border-radius:4px}
.wrong-section-num{width:42px;text-align:right;font-size:.78rem;font-family:var(--font-mono);color:var(--text2)}

/* 暗色模式质感精雕 */
[data-theme="dark"] .wrong-cause-bar,
[data-theme="dark"] .wrong-section-bar-wrap{background:rgba(255,255,255,0.08)}
[data-theme="dark"] .wrong-stat-card,
[data-theme="dark"] .wrong-cause-card,
[data-theme="dark"] .wrong-units-card{box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .wrong-unit-row{border-bottom-color:rgba(255,255,255,0.08)}

/* 无障碍减少动效支持 (A11y prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce){
  .option-item.correct,
  .option-item.wrong,
  .answer-feedback{
    animation:none !important;
    transition:background-color .15s ease, border-color .15s ease !important;
  }
  .option-item:active{
    transform:none !important;
  }
}

/* ========== 平板端（768px~1024px）练功坊答题与解析并排自适应 ========== */
@media (min-width:768px) and (max-width:1024px){
  .quiz-active-panel{
    max-width:960px;
    padding:0 8px;
  }
  .question-card:has(.answer-explain){
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    grid-template-areas:
      "header header"
      "body exp";
    column-gap:22px;
    align-items:start;
  }
  .question-card:has(.answer-explain) .question-number{
    grid-area:header;
  }
  .question-card:has(.answer-explain) .question-text,
  .question-card:has(.answer-explain) .quiz-hints,
  .question-card:has(.answer-explain) .hint-results,
  .question-card:has(.answer-explain) .options-list{
    grid-column:1;
  }
  .question-card:has(.answer-explain) .answer-feedback,
  .question-card:has(.answer-explain) .answer-explain{
    grid-column:2;
  }
  .question-card:has(.answer-explain) .answer-feedback{
    margin-top:0;
  }
}

/* ========== 移动端 iOS Safari 避免输入框放大视口 ========== */
@media (max-width:820px){
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="email"],
  select,
  textarea{
    font-size:16px!important;
  }
}

/* ========== 手机横屏紧凑模式（Landscape & 高度 <= 500px） ========== */
@media (orientation:landscape) and (max-height:500px){
  :root{--header-h:42px}
  .top-header{height:42px;padding:0 12px}
  .header-title,.header-breadcrumb{display:none!important}
  .main-area{padding:6px 12px!important}
  .quiz-top-bar{padding:2px 0;margin-bottom:4px}
  .progress-bar{margin-bottom:8px;height:3px}
  .question-card{padding:12px 14px;margin-bottom:8px;border-radius:10px}
  .question-number{font-size:11px;margin-bottom:4px}
  .question-text{font-size:14px;line-height:1.45;margin-bottom:8px}
  .quiz-hints{margin:4px 0!important}
  .options-list{grid-template-columns:1fr 1fr;gap:6px}
  .option-item{padding:6px 10px;font-size:13px}
  .option-item .option-letter{width:24px;height:24px;font-size:12px}
  .answer-feedback{padding:6px;font-size:12px;margin-top:6px}
  .answer-explain{padding:8px 10px;font-size:12px;margin-top:6px;line-height:1.5}
  .quiz-nav{margin-top:6px}
}

/* ========== 桌面端答题快捷键视觉提示 & 任务小红点 ========== */
.badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--vermilion);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg, #fff);
  z-index: 10;
}
.badge-dot.hidden { display: none !important; }

.shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text3);
  background: rgba(201, 184, 150, 0.12);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  margin-left: 6px;
  letter-spacing: 0;
  user-select: none;
}
@media (max-width: 768px) {
  .shortcut-hint { display: none !important; }
}

/* ---------- 分档拖动条（V4.12.98，assets/ux-motion.js initSnapSliders 配套） ----------
   仅作用于挂 data-steps 的滑杆（现役：练习设置「题目数量」）。原生 input 保留，
   已过轨道用 --fill 百分比填主色（JS 随值写）；数字按档位步进时 tick 上滚一下；
   松手吸附时 thumb 弹一下（cubic-bezier 弹簧曲线）。未挂 data-steps 的滑杆不受影响。 */
.slider-row input[type=range][data-steps]{
  background:linear-gradient(90deg,var(--gold) var(--fill,18%),var(--border) var(--fill,18%));
}
.slider-row input[type=range][data-steps]::-webkit-slider-thumb{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.slider-row input[type=range][data-steps]:active::-webkit-slider-thumb{transform:scale(1.12)}
.slider-row input[type=range][data-steps].snap-release::-webkit-slider-thumb{
  animation:sliderThumbPop .32s cubic-bezier(.34,1.56,.64,1);
}
.slider-row input[type=range][data-steps]::-moz-range-thumb{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.slider-row input[type=range][data-steps].snap-release::-moz-range-thumb{animation:sliderThumbPop .32s cubic-bezier(.34,1.56,.64,1)}
.slider-row input[type=range][data-steps]::-moz-range-progress{background:var(--gold);height:6px;border-radius:3px}
@keyframes sliderThumbPop{
  0%{transform:scale(1.18)}
  60%{transform:scale(.94)}
  100%{transform:scale(1)}
}
.slider-val.slider-tick{animation:sliderValTick .16s ease}
@keyframes sliderValTick{
  0%{transform:translateY(-7px);opacity:.35}
  100%{transform:translateY(0);opacity:1}
}

/* ---------- 圆形扩散换肤（V4.12.99 补齐） ----------
   练功坊不加载全站 style.css——此前 ::view-transition 定义只存在于 style.css，
   切主题时 VT 在跑但没有动画定义 ⇒ 看不到扩散（站主实测「练功坊没有换肤特效」）。
   与学堂全站同一套定义（0.3s）；主题钮默认在顶栏右上，扩散原点同款。 */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){
  animation:gxt-theme-reveal .3s cubic-bezier(.22,1,.36,1) both;
  clip-path:circle(0px at var(--theme-x,calc(100% - 56px)) var(--theme-y,32px));
}
@keyframes gxt-theme-reveal{to{clip-path:circle(142% at var(--theme-x,calc(100% - 56px)) var(--theme-y,32px))}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}

/* ========== 升学考试条件弹窗（V4.15.54）==========
   复用 .modal-overlay/.modal-dialog；颜色只用现有主题变量（--ach-ok／--vermilion／--text*／--bg*／--border），
   亮暗主题自动跟随，不写死色值。移动端沿用「max-height:85vh + 内部滚动 + 惯性滚动」。 */
body.gxt-modal-lock{overflow:hidden}
.promotion-exam-dialog{width:92%;max-width:480px;max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  text-align:left;padding:24px 22px 18px;animation:gxtPromotionIn .18s cubic-bezier(.22,1,.36,1) both}
.promotion-exam-title{text-align:center}
.promotion-exam-subtitle{margin:6px 0 12px;text-align:center;font-size:.84rem;color:var(--text2);line-height:1.6}
.promotion-exam-banner{margin:0 0 12px;padding:9px 12px;border-radius:var(--radius-md);border:1px solid var(--ach-ok);
  color:var(--ach-ok);background:var(--bg-soft);font-size:.84rem;font-weight:600;text-align:center}
.promotion-exam-banner.hidden{display:none}
.promotion-exam-list{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.gxt-pe-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--bg-soft)}
.gxt-pe-icon{flex:none;width:20px;height:20px;line-height:18px;text-align:center;font-weight:700;border-radius:50%;font-size:.78rem}
.gxt-pe-item.is-ok .gxt-pe-icon{color:var(--ach-ok);border:1px solid var(--ach-ok)}
.gxt-pe-item.is-miss .gxt-pe-icon{color:var(--vermilion);border:1px solid var(--vermilion)}
.gxt-pe-main{flex:1;min-width:0}
.gxt-pe-text{font-size:.88rem;color:var(--text);font-weight:600;line-height:1.5}
.gxt-pe-vals{margin-top:2px;font-size:.78rem;color:var(--text2)}
.gxt-pe-target{color:var(--text3)}
.gxt-pe-missing{margin-top:2px;font-size:.78rem;color:var(--vermilion)}
.gxt-pe-action{flex:none;align-self:center;background:none;border:1px solid var(--vermilion);color:var(--vermilion);
  border-radius:999px;padding:4px 10px;font-size:.76rem;cursor:pointer;white-space:nowrap}
.gxt-pe-action:hover{background:var(--vermilion);color:var(--bg-card)}
.promotion-exam-foot{display:flex;flex-direction:column;gap:8px}
.promotion-exam-hint{min-height:1em;text-align:center;font-size:.78rem;color:var(--text2)}
.promotion-exam-foot .modal-btns{justify-content:center}
@keyframes gxtPromotionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.promotion-exam-dialog{animation:none}}
/* 弹窗打开期间隐藏常驻浮动件（术法印章 9998／回顶回底 9999）：它们高于 .modal-overlay 的 200，
   390 宽下会压在弹窗底部按钮上。只在 body 锁生效时隐藏，**不改这些组件的全局 z-index**（免得影响别处）；
   成就解锁 toast 是瞬时通知，刻意不隐藏。 */
body.gxt-modal-lock #gxt-shufa-seal,
body.gxt-modal-lock .back-to-top,
body.gxt-modal-lock .back-to-bottom{display:none!important}

/* V4.19.0 分享学习成绩与成就：复用 app.js gxtShowShareCard 的弹窗结构，
   本页只引 yxlgf.css，故把 style.css 的 share-card 规则平移至此；
   竖版海报预览放宽 wrap 至 min(420px, 92vw)，其余与 style.css 一致。 */
.share-card-modal{
  position:fixed;inset:0;z-index:10001;
  background:rgba(10,22,40,.7);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.share-card-modal.visible{opacity:1;pointer-events:auto}
.share-card-wrap{
  background:var(--paper-pure);
  border-radius:var(--radius-lg);
  padding:20px;
  max-width:min(420px,92vw);width:100%;
  box-shadow:var(--shadow-lg);
  transform:scale(.92);
  transition:transform .25s;
}
.share-card-modal.visible .share-card-wrap{transform:scale(1)}
.share-card-preview{
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
  max-height:56vh;overflow:auto;
}
.share-card-preview canvas{display:block;width:100%;height:auto}
.share-card-actions{display:flex;gap:10px;flex-wrap:wrap}
.share-card-actions .btn{flex:1;padding:12px 16px;font-size:.9rem}

/* Shared palm diagram: readable in both themes and narrow lesson panels. */
.learning-content .xl-palm-diagram{width:min(320px,100%);margin:18px auto;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;text-align:center}
.learning-content .xl-palm-diagram svg{display:block;width:100%;height:auto}
.learning-content .xl-palm-diagram figcaption{margin-top:12px;font-size:13px;line-height:1.7;color:var(--text2)}