/* ============ 词舟 WordArk 全局样式 ============ */
:root{
  --ac:#6366f1; --ac2:#8b5cf6;
  --ac-grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --bg:#f4f6fb; --surface:#ffffff; --surface2:#f0f2f9; --surface3:#e9ecf5;
  --border:#e3e6f0; --border2:#d3d8e6;
  --text:#20243a; --text2:#4a4f6a; --muted:#8289a3;
  --ok:#0e9f6e; --ok-bg:#e5f6ee; --warn:#c2760a; --warn-bg:#fdf3e0; --bad:#e04b55; --bad-bg:#fdecec;
  --info:#3b6fd6; --info-bg:#e9f0fc; --violet:#7c5ce0; --violet-bg:#f1ebfd;
  --shadow:0 1px 2px rgba(30,35,60,.05),0 8px 24px -12px rgba(30,35,60,.14);
  --shadow-lift:0 4px 10px rgba(30,35,60,.08),0 18px 40px -18px rgba(60,70,220,.28);
  --ring:#e7eaf3;
  --font:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --radius:16px;
}
[data-theme="dark"]{
  --ac:#7c83f6; --ac2:#a78bfa;
  --bg:#0d0f16; --surface:#171a25; --surface2:#1e2231; --surface3:#262b3d;
  --border:#272c3e; --border2:#343a52;
  --text:#eef0fa; --text2:#c6cadd; --muted:#8f96b0;
  --ok:#4ade9d; --ok-bg:rgba(74,222,157,.13); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12);
  --bad:#f87171; --bad-bg:rgba(248,113,113,.13); --info:#7aa2ff; --info-bg:rgba(122,162,255,.13);
  --violet:#b8a3ff; --violet-bg:rgba(168,139,250,.13);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.5);
  --shadow-lift:0 4px 10px rgba(0,0,0,.35),0 18px 44px -16px rgba(90,100,255,.25);
  --ring:#242941;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.6; min-height:100vh; overflow-y:scroll;
  -webkit-font-smoothing:antialiased;
}
.bg-deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(640px 420px at 12% -8%,rgba(99,102,241,.10),transparent 65%),
    radial-gradient(560px 400px at 95% 8%,rgba(139,92,246,.09),transparent 65%),
    radial-gradient(700px 500px at 50% 115%,rgba(14,165,233,.07),transparent 60%),
    var(--bg);
}
[data-theme="dark"] .bg-deco{
  background:
    radial-gradient(700px 460px at 12% -8%,rgba(99,102,241,.14),transparent 65%),
    radial-gradient(600px 420px at 95% 8%,rgba(139,92,246,.11),transparent 65%),
    radial-gradient(760px 520px at 50% 115%,rgba(14,165,233,.06),transparent 60%),
    var(--bg);
}
::selection{background:rgba(99,102,241,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
mark{background:rgba(251,191,36,.38);color:inherit;border-radius:3px;padding:0 1px}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
svg{display:block}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:10px clamp(14px,3vw,34px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;flex-shrink:0}
.brand-logo{width:34px;height:34px}
.brand-name{font-size:19px;font-weight:800;letter-spacing:2px}
.brand-name em{display:block;font-style:normal;font-size:9px;font-weight:600;color:var(--muted);letter-spacing:3.5px;margin-top:-3px}
.nav-tabs{display:flex;gap:2px;margin:0 auto;background:var(--surface2);padding:4px;border-radius:13px;border:1px solid var(--border)}
.tab{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text2);transition:.18s;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--ac);box-shadow:0 2px 8px rgba(20,25,60,.09);border:1px solid var(--border);padding:6px 14px}
[data-theme="dark"] .tab.active{box-shadow:0 2px 10px rgba(0,0,0,.35)}
.tab-ic{width:17px;height:17px}
.nav-badge{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:-2px}
.top-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text2);border:1px solid transparent;transition:.15s;flex-shrink:0}
.icon-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border)}
.icon-btn svg{width:18px;height:18px}
.searchbox{position:relative}
.searchbox .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
.searchbox input{width:220px;padding:8px 12px 8px 33px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);transition:.15s;font-size:13.5px}
.searchbox input:focus{width:250px;border-color:var(--ac);box-shadow:0 0 0 3px rgba(99,102,241,.15);outline:none}
.drop{position:absolute;top:calc(100% + 8px);right:0;left:0;background:var(--surface);border:1px solid var(--border);
  border-radius:13px;box-shadow:var(--shadow-lift);overflow:hidden;z-index:80;max-height:420px;overflow-y:auto}
.drop-head{padding:8px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border);background:var(--surface2)}
.drop-item{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:8px 14px;cursor:pointer;transition:.12s}
.drop-item:hover{background:var(--surface2)}
.drop-item .d-w{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px}
.drop-item .d-w .ph{font-weight:400;color:var(--muted);font-size:12px}
.drop-item .d-m{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-item .d-b{font-size:10.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.drop-empty{padding:18px;text-align:center;color:var(--muted);font-size:13px}

/* ---------- 主区 / 通用面板 ---------- */
#main{padding:26px clamp(14px,3vw,34px) 10px;max-width:1180px;margin:0 auto;width:100%}
.view{display:none}
.view.active{display:block;animation:riseIn .28s ease}
@keyframes riseIn{from{transform:translateY(10px)}to{transform:none}}
.site-foot{text-align:center;color:var(--muted);font-size:12px;padding:26px 10px 34px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.panel-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-title{font-size:16.5px;font-weight:800;display:flex;align-items:center;gap:8px}
.panel-title svg{width:18px;height:18px;color:var(--ac)}
.panel-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.sec-title{font-size:17px;font-weight:800;margin:26px 0 12px;display:flex;align-items:baseline;gap:10px}
.sec-title small{font-weight:500;color:var(--muted);font-size:12.5px}
.muted{color:var(--muted)}
.cols{display:grid;gap:14px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.cols-2,.cols-3{grid-template-columns:1fr}}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 17px;border-radius:11px;
  font-weight:700;font-size:14px;transition:.16s;white-space:nowrap;user-select:none;border:1px solid transparent}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--ac-grad);color:#fff;box-shadow:0 6px 16px -6px rgba(99,102,241,.55)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(99,102,241,.65)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);border-color:var(--border2);color:var(--text)}
.btn.ghost:hover{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 5%,var(--surface))}
.btn.soft{background:color-mix(in srgb,var(--ac) 11%,var(--surface));color:var(--ac);border-color:transparent}
.btn.soft:hover{background:color-mix(in srgb,var(--ac) 18%,var(--surface))}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
.btn.danger:hover{filter:brightness(1.06)}
.btn.ok{background:var(--ok-bg);color:var(--ok)}
.btn.warn{background:var(--warn-bg);color:var(--warn)}
.btn.s{padding:6px 12px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:var(--muted);transition:.13s;flex-shrink:0}
.btn-icon svg{width:15.5px;height:15.5px}
.btn-icon:hover{background:var(--surface2);color:var(--text)}
.btn-icon.danger-h:hover{background:var(--bad-bg);color:var(--bad)}

/* chip */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2.5px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.chip svg{width:12px;height:12px}
.c-muted{background:var(--surface3);color:var(--muted)}
.c-ac{background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac)}
.c-ok{background:var(--ok-bg);color:var(--ok)}
.c-warn{background:var(--warn-bg);color:var(--warn)}
.c-bad{background:var(--bad-bg);color:var(--bad)}
.c-info{background:var(--info-bg);color:var(--info)}
.c-violet{background:var(--violet-bg);color:var(--violet)}
.click-chip{cursor:pointer;border:1px solid transparent;transition:.14s}
.click-chip:hover{filter:brightness(1.08)}
.click-chip.active{border-color:currentColor;box-shadow:0 0 0 1px currentColor inset}

/* 输入 */
.input{width:100%;padding:9px 13px;border-radius:11px;border:1px solid var(--border2);background:var(--surface);transition:.15s}
.input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
textarea.input{resize:vertical;min-height:110px;line-height:1.7}
.sel-wrap{position:relative;display:inline-flex;align-items:center}
.sel-wrap::after{content:"";position:absolute;right:13px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);pointer-events:none}
.sel{appearance:none;-webkit-appearance:none;background:var(--surface);border:1px solid var(--border2);border-radius:11px;padding:9px 36px 9px 14px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.sel:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.sel.full{width:100%}
label.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--text2)}
label.fld .input{font-weight:400;color:var(--text)}

/* 空状态 */
.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty .es-ic{width:86px;height:86px;margin:0 auto 16px;opacity:.8;border-radius:26px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ac) 9%,transparent);color:var(--ac)}
.empty .es-ic svg{width:40px;height:40px}
.empty .es-t{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px}
.empty .es-s{font-size:13px;max-width:440px;margin:0 auto 18px}

/* ============ 仪表盘 ============ */
.dash-top{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
@media(max-width:980px){.dash-top{grid-template-columns:1fr}}
.welcome-card{position:relative;overflow:hidden;padding:24px 26px;background:
  radial-gradient(500px 300px at 100% 0%,rgba(139,92,246,.14),transparent 60%),var(--surface)}
.welcome-card::after{content:"";position:absolute;right:-46px;bottom:-56px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(99,102,241,.16),transparent);pointer-events:none}
.greet{font-size:23px;font-weight:800;margin-bottom:4px}
.greet em{font-style:normal;color:var(--ac)}
.w-sub{font-size:13px;color:var(--text2);margin-bottom:14px}
.dash-chip-row{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.quick-card{display:flex;flex-direction:column}
.quick-card .q-label{font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:1px;margin-bottom:8px}
.quick-card .sel{width:100%;margin-bottom:10px}
.btn-hero-row{display:flex;gap:10px}
.btn-hero{flex:1;flex-direction:column;padding:13px 8px;gap:2px}
.btn-hero span.t{font-size:14.5px}
.btn-hero span.s{font-size:11px;font-weight:600;opacity:.8}
.btn-hero svg{width:19px;height:19px;margin-bottom:2px}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media(max-width:980px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{position:relative;overflow:hidden}
.stat-ic{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;opacity:.95}
.stat-ic svg{width:17px;height:17px}
.stat-num{font-size:27px;font-weight:800;letter-spacing:.3px;line-height:1.15}
.stat-label{font-size:13px;color:var(--muted);font-weight:600}
.stat-sub{font-size:11.5px;margin-top:3px}
.pass{color:var(--muted);font-size:11.5px}
.tint-ac{background:color-mix(in srgb,var(--ac) 13%,transparent);color:var(--ac)}
.tint-violet{background:color-mix(in srgb,var(--violet) 13%,transparent);color:var(--violet)}
.tint-ok{background:var(--ok-bg);color:var(--ok)}
.tint-warn{background:var(--warn-bg);color:var(--warn)}

.mid-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;margin-top:14px}
@media(max-width:980px){.mid-grid{grid-template-columns:1fr}}
.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:132px;padding-top:8px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar .fill{width:100%;max-width:44px;border-radius:8px 8px 4px 4px;min-height:4px;background:var(--ac-grad);
  opacity:.88;transition:height .5s ease;position:relative}
.bar .fill.empty{background:var(--surface3);opacity:1}
.bar .fill:hover{opacity:1}
.bar .lbl{font-size:11px;color:var(--muted);font-weight:600}
.bar.today .lbl{color:var(--ac);font-weight:800}
.bar .cnt{font-size:10.5px;color:var(--muted);font-weight:700;line-height:1}
.bar.today .cnt{color:var(--ac)}
.goal-note{margin-top:12px;font-size:12.5px;color:var(--text2);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.goal-note .btn{padding:4px 10px;font-size:12px}
.ring-zone{display:flex;align-items:center;gap:20px;padding:6px 2px}
@media(max-width:520px){.ring-zone{flex-direction:column;text-align:center}}
.ring-text{flex:1}
.ring-text .r1{font-size:19px;font-weight:800}
.ring-text .r2{font-size:12.5px;color:var(--muted);margin-top:4px}
.ring-text .r3{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}

.brow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px dashed var(--border)}
.brow:last-child{border-bottom:none}
.brow .bi{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--ac) 10%,transparent);color:var(--ac);flex-shrink:0}
.brow .bi svg{width:19px;height:19px}
.brow .b-name{font-weight:800;font-size:14.5px;cursor:pointer}
.brow .b-name:hover{color:var(--ac)}
.brow .b-meta{font-size:12px;color:var(--muted)}
.brow .b-bar{height:5px;border-radius:4px;background:var(--surface3);overflow:hidden;margin-top:6px;min-width:120px}
.brow .b-bar i{display:block;height:100%;background:var(--ac-grad);border-radius:4px;transition:width .4s}
.brow .b-side{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.brow .pct{font-size:13px;font-weight:800;color:var(--ac)}
.brow .pct small{font-weight:600;color:var(--muted);font-size:11px}

/* ============ 词库 ============ */
.lib-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.lib-bar .sp{flex:1}
.lib-search{position:relative}
.lib-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}
.lib-search input{padding-left:33px;width:210px}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.book-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;transition:.18s;position:relative;overflow:hidden}
.book-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--ac) 35%,var(--border))}
.bc-title{font-size:16.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;word-break:break-all}
.bc-title:hover{color:var(--ac)}
.bc-src{margin-left:auto;flex-shrink:0}
.bc-desc{font-size:12.5px;color:var(--muted);min-height:38px;margin:7px 0 11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bc-stat{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.bc-prog{flex:1;height:7px;border-radius:5px;background:var(--surface3);overflow:hidden}
.bc-prog i{display:block;height:100%;border-radius:5px;background:var(--ac-grad);transition:width .5s}
.bc-num{font-size:13.5px;font-weight:800;white-space:nowrap}
.bc-num small{color:var(--muted);font-weight:600;font-size:11px}
.bc-meta{font-size:11.5px;color:var(--muted);margin-bottom:12px;display:flex;gap:10px;flex-wrap:wrap}
.bc-foot{display:flex;gap:8px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--border)}
.bc-foot .btn{flex:1;padding:7px 6px;font-size:12.5px}
.bc-icons{display:flex;gap:2px}

/* 词书详情 */
.sub-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sub-head .ttl{font-size:21px;font-weight:800;word-break:break-all}
.sub-head .sub{color:var(--muted);font-size:13px}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;font-size:13.5px;border:1px solid var(--border);padding:7px 13px;border-radius:10px;background:var(--surface);transition:.15s}
.back-btn:hover{color:var(--ac);border-color:var(--ac)}
.back-btn svg{width:15px;height:15px}
.detail-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0;padding:14px 0;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border)}
.detail-bar .sp{flex:1}
.words-tbl{display:flex;flex-direction:column}
.wrow{display:grid;grid-template-columns:minmax(150px,1.15fr) 1.6fr auto auto auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:11px;transition:.12s}
.wrow:nth-child(odd){background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.wrow:hover{background:var(--surface2)}
.wrow .w-main{min-width:0}
.wrow .w-word{font-weight:800;font-size:15.5px;font-family:Georgia,"Times New Roman",serif;letter-spacing:.2px;display:flex;align-items:baseline;gap:9px;word-break:break-word}
.wrow .w-word .ph{font-family:var(--font);font-weight:500;color:var(--muted);font-size:12px}
.wrow .w-mean{color:var(--text2);font-size:13.5px;min-width:0;word-break:break-word;line-height:1.5}
.wrow .w-mean b{color:var(--violet);font-weight:700;margin-right:5px;font-size:12.5px}
.wrow .w-act{display:flex;gap:2px;justify-content:flex-end}
.wrow .w-note{color:var(--muted);font-size:12px;white-space:nowrap;text-align:right}
@media(max-width:860px){
  .wrow{grid-template-columns:1.2fr 1.6fr auto;grid-template-rows:auto auto}
  .wrow .w-mean{grid-column:1/3}
}
@media(max-width:620px){
  .wrow{grid-template-columns:1fr auto;padding:9px 10px}
  .wrow .w-mean{grid-column:1/-1}
}
.wpbar{height:5px;border-radius:4px;background:var(--surface3);overflow:hidden;margin-top:5px;max-width:210px}
.wpbar i{display:block;height:100%;background:linear-gradient(90deg,#34d399,#0e9f6e);border-radius:4px}
[data-theme="dark"] .wpbar i{background:linear-gradient(90deg,#6ee7b7,#4ade9d)}
/* 多选模式 */
.wrow.multi{grid-template-columns:30px minmax(140px,1.05fr) 1.6fr auto auto auto;cursor:pointer}
.wrow.multi:hover{background:color-mix(in srgb,var(--ac) 7%,var(--surface2))}
.wrow.picked{background:rgba(99,102,241,.12)!important}
.wrow.picked:hover{background:rgba(99,102,241,.16)!important}
.w-pick{width:20px;height:20px;border-radius:7px;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;color:#fff}
.wrow.picked .w-pick{background:var(--ac);border-color:var(--ac)}
.w-pick svg{width:12px;height:12px;opacity:0}
.wrow.picked .w-pick svg{opacity:1}
@media(max-width:860px){
  .wrow.multi{grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto}
  .wrow.multi .w-mean{grid-column:2/4}
  .wrow.multi .w-note{grid-column:2/3}
}
@media(max-width:620px){
  .wrow.multi{grid-template-columns:30px 1fr auto}
}
.pick-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:13px;background:var(--surface2);border:1px solid var(--border);margin:2px 0 12px}
.tbl-foot{padding:16px 0 4px;text-align:center;color:var(--muted);font-size:12.5px}

/* ============ 学习/测验 全屏层 ============ */
.stage-shell{display:none;position:fixed;inset:0;z-index:90;overflow-y:auto;background:var(--bg);
  background-image:
    radial-gradient(700px 460px at 15% -10%,rgba(99,102,241,.13),transparent 62%),
    radial-gradient(600px 420px at 90% 110%,rgba(139,92,246,.12),transparent 60%);
  align-items:flex-start;justify-content:center;padding:26px 16px 60px}
.stage-shell.open{display:flex}
[data-theme="dark"] .stage-shell{background-image:
  radial-gradient(700px 460px at 15% -10%,rgba(99,102,241,.16),transparent 62%),
  radial-gradient(600px 420px at 90% 110%,rgba(139,92,246,.13),transparent 60%)}
.stage{width:min(780px,100%)}
.stage-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stage-top .exit-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700;font-size:13px;
  background:var(--surface);border:1px solid var(--border);padding:8px 14px;border-radius:11px;transition:.15s;box-shadow:var(--shadow)}
.stage-top .exit-btn:hover{color:var(--bad);border-color:var(--bad)}
.stage-top .exit-btn svg{width:14px;height:14px}
.stage-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stage-meta .m{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--text2);background:var(--surface);border:1px solid var(--border);padding:5px 11px;border-radius:999px;box-shadow:var(--shadow)}
.stage-meta .m svg{width:13px;height:13px}
.stage-sp{flex:1}
.stage-prog-track{height:8px;border-radius:6px;background:var(--surface3);overflow:hidden;margin-bottom:18px}
.stage-prog-track i{display:block;height:100%;background:var(--ac-grad);border-radius:6px;transition:width .35s ease}
.stage-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lift);padding:clamp(20px,4vw,40px);position:relative}
.card-zone{min-height:300px;display:flex;flex-direction:column;justify-content:center;text-align:center;user-select:none;cursor:pointer}
.word-big{font-size:clamp(38px,7vw,58px);font-weight:700;letter-spacing:1px;line-height:1.15;
  font-family:Georgia,"Times New Roman",serif;word-break:break-word}
.word-ph{color:var(--muted);margin-top:7px;font-size:16px}
.speak-btn{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--ac) 28%,transparent);padding:7px 15px;border-radius:999px;font-weight:700;font-size:13px;transition:.15s;cursor:pointer}
.speak-btn:hover{background:color-mix(in srgb,var(--ac) 17%,transparent);transform:scale(1.03)}
.speak-btn svg{width:15px;height:15px}
.flip-hint{color:var(--muted);font-size:12.5px;margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.flip-hint kbd{background:var(--surface2);border:1px solid var(--border2);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:11px;font-family:inherit}
.card-zone.revealed{cursor:default}
.mean-zone{animation:pop .3s ease}
@keyframes pop{from{transform:translateY(10px) scale(.985)}to{transform:none}}
.mean-line{font-size:clamp(19px,3vw,24px);font-weight:700;line-height:1.5;word-break:break-word}
.mean-line b{color:var(--violet);font-size:.82em;margin-right:8px;font-weight:700}
.ex-block{margin:20px auto 0;max-width:620px;text-align:left}
.ex-en{font-size:15.5px;color:var(--text);font-style:italic;background:var(--surface2);border-left:3px solid var(--ac);
  padding:10px 14px;border-radius:0 10px 10px 0;line-height:1.6;word-break:break-word}
.ex-cn{font-size:13px;color:var(--text2);margin-top:7px;padding-left:4px;word-break:break-word}
.answer-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:26px}
@media(max-width:640px){.answer-row{grid-template-columns:1fr}}
.ans{display:flex;flex-direction:column;align-items:center;gap:3px;padding:13px 8px;border-radius:14px;font-weight:800;font-size:14.5px;
  border:2px solid transparent;transition:.16s;background:var(--surface2);color:var(--text)}
.ans:hover{transform:translateY(-2px)}
.ans svg{width:19px;height:19px;margin-bottom:1px}
.ans small{font-size:10.5px;font-weight:700;opacity:.65;letter-spacing:.5px}
.ans.a-good:hover,.ans.a-good.sel{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.ans.a-mid:hover,.ans.a-mid.sel{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.ans.a-bad:hover,.ans.a-bad.sel{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.ans.sel{transform:scale(.985)}
.answer-row[data-flipped="0"]{opacity:.35;pointer-events:none}
.side-tally{display:flex;justify-content:center;gap:8px;margin-top:18px;min-height:26px}
.side-tally .chip{opacity:0;transition:.25s}
.side-tally .chip.on{opacity:1}
.bump{animation:bump .4s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}

/* 学习小结 */
.sum-hero{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0 4px}
.sum-big h2{font-size:24px;font-weight:800}
.sum-big .line{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.sum-nums{display:flex;gap:16px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap}
.sum-num{text-align:center}
.sum-num .v{font-size:21px;font-weight:800}
.sum-num .k{font-size:11.5px;color:var(--muted);font-weight:700}
.sum-num.g .v{color:var(--ok)} .sum-num.m .v{color:var(--warn)} .sum-num.b .v{color:var(--bad)}
.sum-title{text-align:center;font-size:16px;font-weight:800;margin:22px 0 4px}
.review-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:300px;overflow-y:auto;padding-right:4px}
.rv-item{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:var(--surface2);border-radius:12px;border:1px solid var(--border)}
.rv-item .rv-w{font-weight:800;font-family:Georgia,"Times New Roman",serif;font-size:16px;min-width:110px}
.rv-item .rv-m{font-size:13.5px;color:var(--text2);flex:1;word-break:break-word}
.rv-item .rv-m b{color:var(--violet);margin-right:6px}
.rv-item .rv-c{color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap;margin-top:2px}
.sum-actions{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}

/* 环形进度 */
.pring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pring svg{transform:rotate(-90deg)}
.pring .track{stroke:var(--ring);fill:none}
.pring .fillc{stroke:url(#ringGrad);fill:none;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.pring .pc{position:absolute;font-weight:800;font-size:17px}
.pring .pc small{font-size:10px;color:var(--muted);font-weight:700}

/* ============ 测验 ============ */
.q-dir{text-align:center;margin-bottom:10px}
.q-headline{text-align:center;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.q-prompt-word{font-size:clamp(30px,5.5vw,44px);font-weight:800;letter-spacing:.5px;font-family:Georgia,"Times New Roman",serif;word-break:break-word}
.q-prompt-cn{font-size:clamp(20px,3.4vw,28px);font-weight:700;line-height:1.5;word-break:break-word}
.q-prompt-cn b{color:var(--violet);margin-right:6px;font-size:.78em}
.opts{display:grid;gap:11px;margin-top:22px}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 16px;border-radius:13px;font-size:15.5px;
  border:1.5px solid var(--border2);background:var(--surface);transition:.15s;font-weight:600;color:var(--text)}
.opt .o-key{width:26px;height:26px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--muted);flex-shrink:0;transition:.15s}
.opt:hover{border-color:var(--ac);transform:translateX(3px)}
.opt:hover .o-key{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.opt.correct .o-key{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);animation:shake .35s ease}
.opt.wrong .o-key{background:var(--bad);color:#fff}
.opt.disabled{opacity:.5;pointer-events:none}
@keyframes shake{0%,100%{transform:none}30%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
.opt-word{font-weight:800;font-family:Georgia,"Times New Roman",serif}
.opt .o-mean{flex:1;word-break:break-word;font-size:14px}
.opt .o-check{margin-left:auto;flex-shrink:0}
.q-foot{display:flex;align-items:center;gap:10px;margin-top:24px}
.q-foot .sp{flex:1}
.q-correct-note{font-size:13px;color:var(--ok);font-weight:700;display:flex;align-items:center;gap:6px;min-height:20px}
.q-correct-note svg{width:15px;height:15px}
.q-expl{background:var(--surface2);border:1px solid var(--border);border-radius:13px;padding:13px 16px;margin-top:14px;
  align-items:flex-start;animation:pop .3s ease;display:none}
.q-expl .qe-w{font-weight:800;font-family:Georgia,"Times New Roman",serif;font-size:17px;min-width:110px}
.q-expl .qe-m{font-size:13.5px;color:var(--text2);flex:1;word-break:break-word}
.q-expl .qe-m b{color:var(--violet);margin-right:6px}
.q-expl:not([hidden]){display:flex}

/* ============ 生词本 ============ */
.wrong-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.wrong-head h2{font-size:21px;font-weight:800}
.rev-row{display:grid;grid-template-columns:minmax(140px,1fr) 1.7fr auto auto;gap:14px;align-items:center;padding:12px 14px;border-radius:13px;background:var(--surface);border:1px solid var(--border);margin-bottom:8px;transition:.13s}
.rev-row:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--border));box-shadow:var(--shadow)}
@media(max-width:860px){.rev-row{grid-template-columns:1fr auto;gap:8px 12px}.rev-row .rvm{grid-column:1/-1}}
.rev-row .rr-w{font-weight:800;font-family:Georgia,"Times New Roman",serif;font-size:16.5px;display:flex;align-items:baseline;gap:8px;min-width:0}
.rev-row .rr-w .ph{font-weight:500;color:var(--muted);font-size:11.5px;font-family:var(--font)}
.rev-row .rvm{font-size:13.5px;color:var(--text2);min-width:0;word-break:break-word}
.rev-row .rvm b{color:var(--violet);margin-right:6px}
.rev-row .rr-act{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.rev-row .rr-tag{font-size:10.5px;font-weight:800;color:var(--muted);border:1px solid var(--border2);padding:1px 8px;border-radius:6px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ 弹窗 ============ */
.m-root{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:6vh 16px 40px}
.m-root.open{display:flex}
.m-back{position:fixed;inset:0;background:rgba(10,12,22,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fo .2s ease}
[data-theme="dark"] .m-back{background:rgba(0,0,0,.6)}
@keyframes fo{from{opacity:0}}
.m-box{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  width:min(520px,100%);margin-top:auto;margin-bottom:auto;animation:popUp .25s cubic-bezier(.2,.9,.3,1.2);max-height:88vh;display:flex;flex-direction:column}
@keyframes popUp{from{transform:translateY(18px) scale(.97)}}
.m-box.wide{width:min(760px,100%)}
.m-box.xl{width:min(900px,100%)}
.m-head{display:flex;align-items:center;gap:10px;padding:18px 22px 0}
.m-title{font-size:17px;font-weight:800;flex:1}
.m-x{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;transition:.14s}
.m-x:hover{background:var(--surface2);color:var(--text)}
.m-x svg{width:16px;height:16px}
.m-body{padding:16px 22px 20px;overflow-y:auto}
.m-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 20px;border-top:1px dashed var(--border)}
.m-tip{font-size:12.5px;color:var(--muted);background:var(--surface2);border-radius:10px;padding:10px 13px;margin-top:12px;line-height:1.7}
.m-tip code{background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:0 6px;font-size:11.5px}
.kv-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
@media(max-width:600px){.kv-row{grid-template-columns:1fr}}

/* Toast */
.toasts{position:fixed;top:74px;right:18px;z-index:300;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--ac);
  padding:11px 17px;border-radius:12px;box-shadow:var(--shadow-lift);font-size:13.5px;font-weight:600;animation:tIn .3s cubic-bezier(.2,.9,.3,1.2);max-width:340px}
.toast svg{width:16px;height:16px;flex-shrink:0}
.toast.ok{border-left-color:var(--ok)} .toast.ok svg{color:var(--ok)}
.toast.bad{border-left-color:var(--bad)} .toast.bad svg{color:var(--bad)}
.toast.warn{border-left-color:var(--warn)} .toast.warn svg{color:var(--warn)}
.toast.out{animation:tOut .3s ease forwards}
@keyframes tIn{from{transform:translateX(26px)}}
@keyframes tOut{to{opacity:0;transform:translateX(26px)}}

/* 确认框 */
.cf-title{display:flex;gap:11px;align-items:flex-start}
.cf-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--warn);background:var(--warn-bg)}
.cf-ic.danger{color:var(--bad);background:var(--bad-bg)}
.cf-ic.info{color:var(--info);background:var(--info-bg)}
.cf-ic svg{width:20px;height:20px}
.cf-t{font-size:15.5px;font-weight:800;margin-bottom:4px}
.cf-s{font-size:13px;color:var(--muted);line-height:1.7}

/* 分段选择 */
.seg{display:flex;background:var(--surface2);border-radius:12px;padding:3px;gap:3px;border:1px solid var(--border)}
.seg-btn{flex:1;padding:8px 6px;border-radius:9px;font-weight:700;font-size:13px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;transition:.15s;text-align:center}
.seg-btn small{font-size:10.5px;font-weight:600;opacity:.8}
.seg-btn:hover{color:var(--text)}
.seg-btn.active{background:var(--surface);color:var(--ac);box-shadow:0 2px 8px rgba(20,25,60,.1)}
[data-theme="dark"] .seg-btn.active{box-shadow:0 2px 10px rgba(0,0,0,.4)}
.seg-btn svg{width:16px;height:16px}
.modes-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:620px){.modes-row{grid-template-columns:1fr}}
.mode-card{border:1.5px solid var(--border2);border-radius:14px;padding:15px;cursor:pointer;transition:.15s;background:var(--surface);display:flex;gap:13px;align-items:center}
.mode-card:hover{border-color:var(--ac)}
.mode-card.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,var(--surface));box-shadow:0 0 0 1px var(--ac) inset}
.mode-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--ac-grad);flex-shrink:0;box-shadow:0 6px 14px -5px rgba(99,102,241,.6)}
.mode-ic.alt{background:linear-gradient(135deg,#f59e0b,#ef4444);box-shadow:0 6px 14px -5px rgba(245,158,11,.55)}
.mode-ic svg{width:21px;height:21px}
.mode-t{font-size:15px;font-weight:800}
.mode-s{font-size:12px;color:var(--muted);margin-top:1px}

/* 设置 */
.set-rows{display:flex;flex-direction:column}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 2px;border-bottom:1px dashed var(--border);flex-wrap:wrap}
.set-row:last-child{border-bottom:none}
.set-row .s-t{font-size:14px;font-weight:700}
.set-row .s-d{font-size:12px;color:var(--muted);margin-top:2px;max-width:330px}
.switch{position:relative;width:44px;height:24px;border-radius:14px;background:var(--surface3);border:1px solid var(--border2);transition:.18s;flex-shrink:0}
.switch::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on{background:var(--ac);border-color:var(--ac)}
.switch.on::after{left:22px}
input[type=range]{accent-color:var(--ac);width:140px}

/* 预览导入 */
.pv-rows{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;margin-top:10px}
.pv-row{display:grid;grid-template-columns:110px 1fr 88px;gap:10px;align-items:center;padding:7px 12px;border-radius:9px;background:var(--surface2);font-size:13px}
.pv-row .pv-w{font-weight:800;font-family:Georgia,"Times New Roman",serif;word-break:break-word}
.pv-row .pv-m{color:var(--text2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-skip{font-size:12.5px;color:var(--muted);background:var(--surface2);border-radius:9px;padding:8px 12px;margin-top:8px;line-height:1.8}
.pv-skip code{font-size:11px}

/* 帮助 */
.help-sec{margin-bottom:18px}
.help-sec h4{font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.help-sec h4 .h-ic{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 12%,transparent);color:var(--ac)}
.help-sec h4 .h-ic svg{width:13px;height:13px}
.help-sec p,.help-sec li{font-size:13px;color:var(--text2);line-height:1.85}
.help-sec ul{padding-left:19px;display:flex;flex-direction:column;gap:2px}
.help-sec code{background:var(--surface3);border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:12px;font-family:Consolas,monospace}
.help-sec pre{background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:12.5px;overflow-x:auto;line-height:1.9;font-family:Consolas,"Courier New",monospace;margin-top:6px}
kbd.help{background:var(--surface3);border:1px solid var(--border2);border-bottom-width:2px;border-radius:6px;padding:0 7px;font-size:11.5px}

/* 详情词卡 */
.wm-head{text-align:center;padding:8px 0 4px}
.wm-word{font-size:40px;font-weight:700;font-family:Georgia,"Times New Roman",serif;letter-spacing:1px}
.wm-ph{color:var(--muted);margin-top:3px;font-size:14px}
.wm-btn-row{display:flex;justify-content:center;gap:8px;margin-top:13px;flex-wrap:wrap}
.wm-body{margin-top:16px;text-align:left}
.wm-mean{font-size:18.5px;font-weight:700;line-height:1.6;word-break:break-word}
.wm-mean b{color:var(--violet);margin-right:9px;font-size:.85em}
.wm-tags{display:flex;gap:7px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.stats-line{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}

/* 成就彩带 */
.confetti-zone{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.cf-piece{position:absolute;top:-14px;border-radius:2px;animation:cfFall linear forwards}
@keyframes cfFall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* 小屏适配 */
@media(max-width:1120px){
  .nav-tabs .tab{padding:7px 11px;font-size:13px}
  .searchbox input,.searchbox input:focus{width:160px}
  .brand-name em{display:none}
}
@media(max-width:820px){
  .topbar{flex-wrap:wrap;gap:8px}
  .nav-tabs{order:3;width:100%;margin:2px 0 0;overflow-x:auto;justify-content:space-between}
  .nav-tabs::-webkit-scrollbar{display:none}
  .top-right{margin-left:auto}
  .searchbox{order:2;width:min(230px,42vw)}
  .searchbox input{width:100%}
  .searchbox input:focus{width:100%}
  .tab .tab-ic{display:none}
  .stage{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}