/* ============================================================
   四级通 · 设计系统
   ============================================================ */

:root{
  --brand:#3b6ef6;
  --brand-2:#7c5cf6;
  --brand-soft:#eaf0ff;
  --ok:#10b981;
  --ok-soft:#e7f8f1;
  --warn:#f59e0b;
  --warn-soft:#fef4e5;
  --danger:#ef4444;
  --danger-soft:#fdecec;
  --info:#0ea5e9;
  --info-soft:#e6f5fe;

  --bg:#f5f7fb;
  --bg-2:#eef2f9;
  --surface:#ffffff;
  --surface-2:#fafbfe;
  --line:#e6eaf2;
  --line-2:#eff2f8;

  --text:#1a2233;
  --text-2:#5a6478;
  --text-3:#8b95a8;

  --shadow-sm:0 1px 2px rgba(20,35,70,.05);
  --shadow:0 4px 16px rgba(20,35,70,.07);
  --shadow-lg:0 14px 40px rgba(20,35,70,.13);

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:22px;

  --sidebar-w:236px;
  --topbar-h:60px;
}

html[data-theme="dark"]{
  --brand:#6b8ffb;
  --brand-2:#9a7cfb;
  --brand-soft:#1e2743;
  --ok:#34d399;
  --ok-soft:#122c25;
  --warn:#fbbf24;
  --warn-soft:#33260d;
  --danger:#f87171;
  --danger-soft:#361a1a;
  --info:#38bdf8;
  --info-soft:#0d2836;

  --bg:#0e1219;
  --bg-2:#131926;
  --surface:#171e2b;
  --surface-2:#1c2433;
  --line:#26303f;
  --line-2:#212a38;

  --text:#e8edf6;
  --text-2:#a3aec2;
  --text-3:#7a869c;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.34);
  --shadow-lg:0 14px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4,h5{margin:0;font-weight:650;line-height:1.35;color:var(--text)}
p{margin:0}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================ 布局 ============================ */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:60;
  transition:transform .25s ease;
}
.brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.brand-logo{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:800;font-size:19px;
  display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(59,110,246,.34);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.brand-text strong{font-size:16px;letter-spacing:.4px}
.brand-text span{font-size:10.5px;color:var(--text-3);letter-spacing:.5px;white-space:nowrap}

.nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.nav-group{margin-top:12px}
.nav-group-title{
  font-size:10.5px;letter-spacing:1.2px;color:var(--text-3);
  text-transform:uppercase;padding:6px 10px 6px;font-weight:700;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:10px;color:var(--text-2);
  font-weight:500;margin-bottom:2px;width:100%;text-align:left;
  transition:background .15s,color .15s;position:relative;
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;opacity:.9}
.nav-item:hover{background:var(--bg-2);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:650}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--brand);
}
.nav-item .badge-dot{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:20px;background:var(--brand);color:#fff;font-weight:700}
.nav-item .tag-new{margin-left:auto;font-size:9.5px;padding:1px 5px;border-radius:5px;background:var(--warn-soft);color:var(--warn);font-weight:700}

.sidebar-foot{padding:12px;border-top:1px solid var(--line-2)}
.vip-mini{
  background:linear-gradient(135deg,#1f2937,#374151);
  border-radius:12px;padding:11px 13px;color:#fff;margin-bottom:9px;
}
html[data-theme="dark"] .vip-mini{background:linear-gradient(135deg,#3b2a63,#5b3fa0)}
.vip-mini strong{display:block;font-size:12.5px;margin-bottom:2px}
.vip-mini span{font-size:10.5px;opacity:.75;display:block;line-height:1.5}
.vip-mini button{
  margin-top:8px;width:100%;padding:6px;border-radius:8px;
  background:linear-gradient(135deg,#f5b642,#f0902a);color:#3a2400;
  font-weight:800;font-size:11.5px;
}
.ver{font-size:10px;color:var(--text-3);text-align:center}

.sidebar-mask{display:none}

.main{
  flex:1;min-width:0;margin-left:var(--sidebar-w);
  display:flex;flex-direction:column;
}

.topbar{
  height:var(--topbar-h);flex:0 0 var(--topbar-h);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 22px;
  position:sticky;top:0;z-index:40;
}
.crumb{font-weight:650;font-size:15px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.icon-btn{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--text-2);transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--bg-2);color:var(--text)}
.icon-btn svg{width:19px;height:19px}
.install-btn{color:var(--brand)}
.install-btn[hidden]{display:none!important}
html[data-theme="light"] .ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}

.streak-chip{
  display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;
  background:var(--warn-soft);color:var(--warn);padding:5px 11px;border-radius:20px;
}
.streak-chip svg{width:14px;height:14px}

/* 账号 / 试用状态胶囊 */
.acct-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:650;padding:5px 12px;border-radius:20px;
  background:var(--bg-2);color:var(--text-2);border:1px solid var(--line);
  transition:all .15s;max-width:220px;overflow:hidden;white-space:nowrap;
}
.acct-chip:hover{border-color:var(--brand);color:var(--brand)}
.acct-chip svg{width:14px;height:14px;flex:0 0 14px}
.acct-chip.trial{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.acct-chip.vip{background:linear-gradient(135deg,#f5b642,#f0902a);color:#3a2400;border-color:transparent}
.acct-chip.guest{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.acct-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}

/* 推广位（非会员可见，会员自动隐藏） */
.promo{
  border:1px dashed var(--line);border-radius:var(--r-lg);padding:14px 16px;
  background:var(--surface-2);
}
.promo .p-tag{
  font-size:10.5px;font-weight:700;letter-spacing:.6px;color:var(--text-3);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;display:inline-block;margin-bottom:8px;
}
.promo h4{font-size:13.5px;margin-bottom:5px}
.promo p{font-size:12px;color:var(--text-3);line-height:1.7;margin-bottom:10px}

/* 试用倒计时条 */
.trial-bar{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  border-radius:var(--r-lg);padding:13px 16px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
}
.trial-bar.expired{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.trial-bar.vip{background:linear-gradient(135deg,#f5b642,#f0902a);border-color:transparent;color:#3a2400}
.trial-bar .tb-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.5);flex:0 0 34px}
.trial-bar .tb-body{flex:1;min-width:160px}
.trial-bar .tb-body b{display:block;font-size:13.5px}
.trial-bar .tb-body span{font-size:12px;opacity:.8;display:block;margin-top:1px}
.trial-bar.vip .tb-ico{background:rgba(255,255,255,.45)}

/* 权益额度小卡 */
.quota-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.quota-row:last-child{border-bottom:none}
.quota-row .qn{flex:1;font-size:13px}
.quota-row .qv{font-size:12.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.quota-row .qv.low{color:var(--warn)}
.quota-row .qv.out{color:var(--danger)}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(59,110,246,.32);
}

.view{padding:22px;flex:1;max-width:1280px;width:100%;outline:none}
.only-mobile{display:none}

/* ============================ 通用组件 ============================ */
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h2{font-size:21px;letter-spacing:.2px}
.page-head .sub{color:var(--text-3);font-size:12.5px;margin-top:3px}
.page-head .spacer{flex:1}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-sm);
}
.card.pad-0{padding:0;overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-h h3{font-size:15px}
.card-h .spacer{flex:1}
.card-h .more{font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:3px}
.card-h .more:hover{color:var(--brand)}

.grid{display:grid;gap:16px}
/* 一律使用 minmax(0,1fr)：避免卡片内 nowrap 文本把轨道撑出容器（移动端横向溢出根因） */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.grid > *{min-width:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 17px;border-radius:10px;font-weight:600;font-size:13.5px;
  background:var(--bg-2);color:var(--text);border:1px solid var(--line);
  transition:all .15s;white-space:nowrap;
}
.btn:hover{background:var(--line-2);border-color:var(--line)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(59,110,246,.3)}
.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.btn-ok{background:var(--ok);color:#fff;border-color:transparent}
.btn-ok:hover{background:var(--ok);filter:brightness(1.06)}
.btn-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn-danger:hover{background:var(--danger-soft);filter:brightness(.97)}
.btn-ghost{background:transparent;border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:12px 26px;font-size:15px;border-radius:12px}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:20px;font-size:12.5px;font-weight:600;
  background:var(--bg-2);color:var(--text-2);border:1px solid transparent;
  transition:all .15s;white-space:nowrap;
}
button.chip{cursor:pointer}
button.chip:hover{color:var(--text)}
.chip.active{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 26%,transparent)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;
  font-size:11px;font-weight:650;background:var(--bg-2);color:var(--text-3);
}
.tag.brand{background:var(--brand-soft);color:var(--brand)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.danger{background:var(--danger-soft);color:var(--danger)}
.tag.info{background:var(--info-soft);color:var(--info)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:650;color:var(--text-2)}
.input,.select,.textarea{
  width:100%;padding:9px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  transition:border-color .15s,box-shadow .15s;outline:none;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent);
}
.textarea{resize:vertical;min-height:90px;line-height:1.7}

.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.switch:last-child{border-bottom:none}
.switch .lbl{font-weight:600;font-size:13.5px}
.switch .desc{font-size:11.5px;color:var(--text-3);margin-top:1px}
.toggle{width:44px;height:25px;border-radius:20px;background:var(--line);position:relative;flex:0 0 44px;transition:background .2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle.on{background:var(--brand)}
.toggle.on::after{transform:translateX(19px)}

.empty{text-align:center;padding:44px 20px;color:var(--text-3)}
.empty .em-ico{font-size:38px;margin-bottom:10px;opacity:.55}
.empty p{font-size:13px;margin-bottom:4px}
.empty .btn{margin-top:14px}

.progress{height:8px;border-radius:8px;background:var(--bg-2);overflow:hidden}
.progress > i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .35s ease}
.progress.ok > i{background:linear-gradient(90deg,#10b981,#34d399)}
.progress.warn > i{background:linear-gradient(90deg,#f59e0b,#fbbf24)}

.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;font-size:11.5px;letter-spacing:.4px;color:var(--text-3);
  font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);
  background:var(--surface-2);white-space:nowrap;
}
.table td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--surface-2)}

.kv{display:flex;gap:8px;font-size:13px;padding:5px 0}
.kv .k{color:var(--text-3);flex:0 0 78px}

/* ============================ 统计卡 ============================ */
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.stat .ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);margin-bottom:10px;
}
.stat .ico svg{width:17px;height:17px}
.stat .num{font-size:24px;font-weight:750;letter-spacing:-.5px;line-height:1.15}
.stat .num small{font-size:12px;font-weight:600;color:var(--text-3);margin-left:3px}
.stat .lab{font-size:12px;color:var(--text-3);margin-top:2px}
.stat.ok .ico{background:var(--ok-soft);color:var(--ok)}
.stat.warn .ico{background:var(--warn-soft);color:var(--warn)}
.stat.danger .ico{background:var(--danger-soft);color:var(--danger)}
.stat.info .ico{background:var(--info-soft);color:var(--info)}

/* ============================ 单词卡 ============================ */
.wordcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:34px 28px;text-align:center;box-shadow:var(--shadow);
  min-height:330px;display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
.wordcard .wc-word{font-size:44px;font-weight:750;letter-spacing:-1px;word-break:break-word}
.wordcard .wc-phon{font-size:15px;color:var(--text-3);margin-top:8px;font-family:"Times New Roman",serif}
.wordcard .wc-play{margin-top:12px;align-self:center}
.wordcard > .pl-btn{align-self:center}
.wordcard .wc-hidden{
  margin-top:20px;padding-top:20px;border-top:1px dashed var(--line);
  animation:fadeUp .3s ease;
}
.wordcard .wc-pos{font-size:13px;color:var(--brand);font-weight:700;margin-bottom:4px}
.wordcard .wc-mean{font-size:19px;font-weight:600;margin-bottom:14px}
.wordcard .wc-ex{
  background:var(--surface-2);border-radius:12px;padding:13px 15px;text-align:left;
  font-size:13.5px;line-height:1.75;
}
.wordcard .wc-ex .en{color:var(--text)}
.wordcard .wc-ex .zh{color:var(--text-3);font-size:12.5px;margin-top:3px}
.wordcard .wc-hint{color:var(--text-3);font-size:13px;margin-top:18px}
.wc-actions{display:flex;gap:11px;justify-content:center;margin-top:20px;flex-wrap:wrap}

.spell-box{display:flex;gap:8px;justify-content:center;margin-top:18px}
.spell-box input{max-width:280px;text-align:center;font-size:18px;letter-spacing:2px;font-weight:650}

/* ============================ 播放器 ============================ */
.player{
  background:linear-gradient(150deg,#1e2a44,#2c3a5c);
  border-radius:var(--r-xl);padding:20px;color:#fff;
  box-shadow:var(--shadow-lg);
}
html[data-theme="dark"] .player{background:linear-gradient(150deg,#1b2437,#2a3757)}
.player-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.player-top .pt-title{font-size:15px;font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-top .tag{background:rgba(255,255,255,.16);color:#fff}
.player-main{display:flex;align-items:center;gap:14px}
.pl-btn{
  width:52px;height:52px;border-radius:50%;flex:0 0 52px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(59,110,246,.5);
}
.pl-btn svg{width:22px;height:22px;fill:currentColor;stroke:none}
.pl-btn.sm{width:38px;height:38px;flex:0 0 38px;background:rgba(255,255,255,.14);box-shadow:none}
.pl-btn.sm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.pl-btn.sm.active{background:rgba(255,255,255,.3)}
.pl-btn:hover{filter:brightness(1.1)}
.pl-track{flex:1;min-width:0}
.pl-bar{height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;cursor:pointer}
.pl-bar > i{display:block;height:100%;background:linear-gradient(90deg,#7cd0ff,#a78bfa);border-radius:6px;transition:width .2s}
.pl-time{display:flex;justify-content:space-between;font-size:11.5px;opacity:.75;margin-top:6px}
.pl-rate{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px}
.pl-rate input[type=range]{flex:1;accent-color:#7cd0ff}
.pl-engine{opacity:.72;margin-left:auto;font-size:11px}
.pl-modes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pl-modes .chip{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);border-color:transparent}
.pl-modes .chip.active{background:rgba(255,255,255,.92);color:#1e2a44;font-weight:700}
.listen-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.listen-picker{display:none}

.subs{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:6px;max-height:420px;overflow-y:auto;box-shadow:var(--shadow-sm);
}
.sub-line{
  padding:11px 13px;border-radius:11px;cursor:pointer;transition:background .15s;
  border-left:3px solid transparent;
}
.sub-line:hover{background:var(--surface-2)}
.sub-line.on{background:var(--brand-soft);border-left-color:var(--brand)}
.sub-line .en{font-size:14px;line-height:1.7}
.sub-line .zh{font-size:12.5px;color:var(--text-3);margin-top:2px;line-height:1.6}
.sub-line.on .zh{color:color-mix(in srgb,var(--brand) 70%,var(--text-2))}

/* ============================ 题目 ============================ */
.q-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:13px;box-shadow:var(--shadow-sm);
}
.q-stem{font-size:14.5px;font-weight:600;line-height:1.75;margin-bottom:12px;display:flex;gap:9px}
.q-no{
  flex:0 0 24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-weight:750;display:grid;place-items:center;margin-top:1px;
}
.q-opts{display:flex;flex-direction:column;gap:8px;padding-left:33px}
.opt{
  display:flex;gap:10px;align-items:flex-start;padding:10px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface-2);cursor:pointer;
  transition:all .15s;font-size:13.5px;line-height:1.6;
}
.opt:hover{border-color:var(--brand);background:var(--brand-soft)}
.opt .k{
  flex:0 0 21px;height:21px;border-radius:50%;border:1.6px solid var(--text-3);
  font-size:11px;font-weight:750;display:grid;place-items:center;color:var(--text-3);
  margin-top:1px;
}
.opt.sel{border-color:var(--brand);background:var(--brand-soft)}
.opt.sel .k{background:var(--brand);border-color:var(--brand);color:#fff}
.opt.right{border-color:var(--ok);background:var(--ok-soft)}
.opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--danger);background:var(--danger-soft)}
.opt.wrong .k{background:var(--danger);border-color:var(--danger);color:#fff}
.opt.locked{cursor:default}
.opt.locked:hover{border-color:var(--line);background:var(--surface-2)}
.opt.locked.right:hover{border-color:var(--ok);background:var(--ok-soft)}
.opt.locked.wrong:hover{border-color:var(--danger);background:var(--danger-soft)}
.opt.locked.sel:hover{border-color:var(--brand);background:var(--brand-soft)}

.explain{
  margin-top:12px;margin-left:33px;padding:12px 14px;border-radius:11px;
  background:var(--info-soft);border-left:3px solid var(--info);font-size:13px;line-height:1.75;
  animation:fadeUp .25s ease;
}
.explain .ex-t{font-weight:700;color:var(--info);margin-bottom:4px;display:flex;align-items:center;gap:5px;font-size:12.5px}
.explain .ans{font-weight:700;color:var(--ok)}

.passage{
  font-size:14.5px;line-height:2;letter-spacing:.1px;
  font-family:Georgia,"Times New Roman",serif;color:var(--text);
}
.passage p{margin-bottom:13px}
.passage .para-tag{
  display:inline-block;font-weight:750;color:var(--brand);
  font-family:inherit;margin-right:6px;
}
.wd{ cursor:pointer;border-bottom:1px dashed var(--text-3);padding-bottom:1px;transition:all .15s}
.wd:hover{color:var(--brand);border-bottom-color:var(--brand);background:var(--brand-soft)}
.blank{
  display:inline-block;min-width:96px;padding:0 8px;margin:0 3px;
  border-bottom:2px solid var(--brand);text-align:center;font-weight:700;
  color:var(--brand);font-family:inherit;cursor:pointer;vertical-align:baseline;
}
.blank.filled{background:var(--brand-soft);border-radius:6px 6px 0 0}
.bank{
  display:flex;gap:8px;flex-wrap:wrap;padding:14px;border-radius:var(--r);
  background:var(--surface-2);border:1px dashed var(--line);margin-bottom:16px;
}
.bank .bw{
  padding:5px 13px;border-radius:8px;background:var(--surface);border:1px solid var(--line);
  font-weight:650;font-size:13.5px;cursor:pointer;transition:all .15s;
}
.bank .bw:hover{border-color:var(--brand);color:var(--brand)}
.bank .bw.used{opacity:.32;text-decoration:line-through;cursor:not-allowed}

/* 答题卡 */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:8px}
.sheet button{
  aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);
  font-size:12.5px;font-weight:650;color:var(--text-2);transition:all .15s;
}
.sheet button:hover{border-color:var(--brand);color:var(--brand)}
.sheet button.done{background:var(--brand);color:#fff;border-color:var(--brand)}
.sheet button.cur{outline:2px solid var(--brand);outline-offset:1px}
.sheet button.right{background:var(--ok);border-color:var(--ok);color:#fff}
.sheet button.wrong{background:var(--danger);border-color:var(--danger);color:#fff}

/* ============================ 计时器 ============================ */
.timer{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:11px;
  background:var(--surface);border:1px solid var(--line);font-weight:750;font-size:15px;
  font-variant-numeric:tabular-nums;box-shadow:var(--shadow-sm);
}
.timer.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.timer.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent;animation:pulse 1.1s infinite}
.timer svg{width:16px;height:16px}

/* ============================ 报告 / 图表 ============================ */
.ring{position:relative;display:grid;place-items:center}
.ring svg{transform:rotate(-90deg);width:100%;height:100%;stroke:none}
.ring .val{position:absolute;text-align:center}
.ring .val b{display:block;font-size:23px;font-weight:750;line-height:1.1}
.ring .val span{font-size:11px;color:var(--text-3)}

.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:3px}
.heat i{width:12px;height:12px;border-radius:3px;background:var(--bg-2)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--brand) 26%,var(--bg-2))}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--brand) 48%,var(--bg-2))}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--brand) 70%,var(--bg-2))}
.heat i[data-l="4"]{background:var(--brand)}

.bars{display:flex;flex-direction:column;gap:11px}
.bar-row{display:grid;grid-template-columns:88px 1fr 52px;gap:11px;align-items:center;font-size:12.5px}
.bar-row .bl{color:var(--text-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bv{text-align:right;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}

.list-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  transition:background .15s;border-bottom:1px solid var(--line-2);
}
.list-item:last-child{border-bottom:none}
.list-item:hover{background:var(--surface-2)}
.li-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand);font-weight:750;font-size:13px;
}
.li-body{flex:1;min-width:0}
.li-body .t{font-weight:620;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-body .d{font-size:11.5px;color:var(--text-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-right{flex:0 0 auto;display:flex;align-items:center;gap:8px}

/* ============================ 弹窗 / 提示 ============================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(14,20,32,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;z-index:200;padding:20px;animation:fade .18s ease;
}
.modal{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:560px;
  max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);border:1px solid var(--line);
}
.modal.wide{max-width:800px}
.modal-h{display:flex;align-items:center;gap:10px;padding:17px 20px;border-bottom:1px solid var(--line-2)}
.modal-h h3{font-size:16px;flex:1}
.modal-b{padding:20px;overflow-y:auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--line-2);display:flex;gap:10px;justify-content:flex-end}

.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 17px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:8px;animation:slideDown .25s ease;max-width:min(90vw,420px);
}
.toast.ok{border-left:3px solid var(--ok)}
.toast.err{border-left:3px solid var(--danger)}
.toast.warn{border-left:3px solid var(--warn)}
.toast.info{border-left:3px solid var(--brand)}

/* ============================ 首页专属 ============================ */
.hero{
  background:linear-gradient(135deg,#3b6ef6 0%,#6d5cf6 52%,#8b5cf6 100%);
  border-radius:var(--r-xl);padding:24px 26px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 14px 36px rgba(59,110,246,.3);
}
.hero::after{
  content:"";position:absolute;right:-58px;top:-58px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.11);
}
.hero::before{
  content:"";position:absolute;right:38px;bottom:-76px;width:150px;height:150px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.hero .h-greet{font-size:12.5px;opacity:.86;letter-spacing:.6px}
.hero h2{font-size:24px;margin:5px 0 7px;color:#fff}
.hero .h-sub{font-size:13px;opacity:.9;max-width:520px;line-height:1.7}
.hero .h-count{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap;position:relative;z-index:1}
.hero .h-count div{display:flex;flex-direction:column}
.hero .h-count b{font-size:26px;font-weight:750;line-height:1.1}
.hero .h-count span{font-size:11.5px;opacity:.82;margin-top:2px}
.hero .h-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.hero .btn{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.hero .btn:hover{background:rgba(255,255,255,.3)}
.hero .btn.solid{background:#fff;color:var(--brand);border-color:#fff;font-weight:700}
.hero .btn.solid:hover{background:#fff;filter:brightness(.97)}

.task-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.task-row:last-child{border-bottom:none}
.task-ico{width:38px;height:38px;border-radius:11px;flex:0 0 38px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.task-ico svg{width:18px;height:18px}
.task-ico.ok{background:var(--ok-soft);color:var(--ok)}
.task-body{flex:1;min-width:0}
.task-body .t{font-weight:620;font-size:13.5px}
.task-body .d{font-size:11.5px;color:var(--text-3)}
.task-body .progress{margin-top:7px;height:6px}
.task-num{font-size:12.5px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}

/* ============================ 会员 ============================ */
.plan{
  border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;
  background:var(--surface);position:relative;transition:all .2s;
}
.plan:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent);transform:translateY(-3px);box-shadow:var(--shadow)}
.plan.hot{border-color:var(--brand);box-shadow:0 10px 30px rgba(59,110,246,.18)}
.plan .p-badge{
  position:absolute;top:-11px;right:16px;background:linear-gradient(135deg,#f5b642,#f0902a);
  color:#3a2400;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:20px;
}
.plan h4{font-size:15px;margin-bottom:3px}
.plan .p-price{font-size:31px;font-weight:800;letter-spacing:-1px;margin:9px 0 2px}
.plan .p-price small{font-size:13px;font-weight:600;color:var(--text-3)}
.plan .p-old{font-size:12px;color:var(--text-3);text-decoration:line-through}
.plan ul{list-style:none;padding:0;margin:14px 0 18px;font-size:12.5px}
.plan li{padding:5px 0;color:var(--text-2);display:flex;gap:7px;align-items:flex-start}
.plan li::before{content:"✓";color:var(--ok);font-weight:800;flex:0 0 auto}
.plan li.off{color:var(--text-3);opacity:.65}
.plan li.off::before{content:"—";color:var(--text-3)}

/* ============================ 后台 ============================ */
.admin-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.admin-tab{
  padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--text-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.admin-tab:hover{color:var(--text)}
.admin-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* 登录 / 注册分段切换 */
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  margin-bottom:16px;
  border-radius:11px;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.auth-tab{
  min-height:38px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{
  color:var(--brand);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}

/* ============================ 动画 ============================ */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeUp .3s ease}
.spin{animation:spin 1s linear infinite}

/* ============================ 响应式 ============================ */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-2-1,.g-1-2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .g3{grid-template-columns:minmax(0,1fr)}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:var(--shadow-lg)}
  .sidebar-mask{display:block;position:fixed;inset:0;background:rgba(14,20,32,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
  .sidebar-mask.on{opacity:1;pointer-events:auto}
  .main{margin-left:0}
  .only-mobile{display:grid}
  .view{padding:16px}
  .topbar{padding:0 14px}
  .listen-layout{display:flex;flex-direction:column}
  .listen-detail{order:-1}
  .listen-list{
    display:flex;gap:10px;padding:10px;
    max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .listen-list .list-item{
    flex:0 0 235px;padding:10px;border:1px solid var(--line);
    border-radius:12px;scroll-snap-align:start;
  }
}
@media (max-width:620px){
  .g2,.g4{grid-template-columns:minmax(0,1fr)}
  .topbar{gap:8px}
  .crumb{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .topbar-right{gap:6px;min-width:0}
  .topbar-right .icon-btn,.topbar-right .avatar{width:34px;height:34px;flex:0 0 34px}
  .streak-chip{display:none}
  .acct-chip{max-width:124px;padding:5px 9px;overflow:hidden;text-overflow:ellipsis}
  .view{padding:14px}
  .nav-item{padding:11px}
  .card{padding:15px}
  .card-h{flex-wrap:wrap}
  .task-row{gap:10px}
  .task-num{font-size:11.5px}
  .wordcard{padding:26px 18px}
  .wordcard .wc-word{font-size:34px}
  .hero{padding:20px}
  .hero h2{font-size:20px}
  .hero .h-count{gap:18px}
  .hero .h-count b{font-size:21px}
  .q-opts{padding-left:0}
  .explain{margin-left:0}
  .modal{max-height:92vh}
  .player{padding:16px;border-radius:16px}
  .player-top{flex-wrap:wrap;gap:8px}
  .player-top .pt-title{
    order:3;flex:1 0 100%;white-space:normal;overflow:visible;
    text-overflow:clip;font-size:14px;line-height:1.55;
  }
  .player-main{gap:8px}
  .pl-btn{width:48px;height:48px;flex-basis:48px}
  .pl-btn.sm{width:34px;height:34px;flex-basis:34px}
  .pl-rate{flex-wrap:wrap}
  .pl-rate input[type=range]{min-width:120px}
  .pl-engine{margin-left:0;flex-basis:100%}
  .pl-modes{gap:6px}
  .pl-modes .chip{padding:5px 9px;font-size:12px}
  .subs{max-height:none}
  .listen-actions .btn{flex:1 1 calc(50% - 5px);min-width:120px}
  .listen-picker{display:block;margin-bottom:14px}
  .listen-picker label{
    display:block;font-size:12.5px;font-weight:650;
    color:var(--text-2);margin-bottom:6px;
  }
  .listen-list{display:none!important}
}
@media (max-width:390px){
  .acct-chip{max-width:96px}
  .view{padding:12px}
  .listen-list .list-item{flex-basis:210px}
}
@media (display-mode:standalone){
  .topbar{
    height:calc(var(--topbar-h) + env(safe-area-inset-top));
    flex-basis:calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
  }
  .view{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .sidebar{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}