/* ============================================================
   英语学习站 · 样式
   ============================================================ */
:root{
  --bg:#0c1014; --bg2:#0f151c; --card:#141c25; --card2:#18222d;
  --border:#22303d; --border-soft:#1a2531;
  --text:#e6edf3; --text2:#94a6b6; --text3:#63788a;
  --accent:#34d399; --accent-dim:rgba(52,211,153,.14);
  --blue:#7aa2f7; --blue-dim:rgba(122,162,247,.14);
  --warn:#f5a524; --warn-dim:rgba(245,165,36,.14);
  --danger:#f87171; --danger-dim:rgba(248,113,113,.13);
  --purple:#c4a7ff; --purple-dim:rgba(196,167,255,.14);
  --radius:14px; --radius-sm:9px; --radius-xs:6px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.28);
  --font:"Inter","Segoe UI","Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
}
html[data-theme="light"]{
  --bg:#f4f6f8; --bg2:#eef1f4; --card:#ffffff; --card2:#f7f9fb;
  --border:#e0e6ec; --border-soft:#eceff3;
  --text:#0f161d; --text2:#5a6875; --text3:#8b98a5;
  --accent:#0e9e78; --accent-dim:rgba(14,158,120,.1);
  --blue:#3b6fe0; --blue-dim:rgba(59,111,224,.1);
  --warn:#c47b06; --warn-dim:rgba(196,123,6,.1);
  --danger:#d93b3b; --danger-dim:rgba(217,59,59,.09);
  --purple:#7c53d6; --purple-dim:rgba(124,83,214,.1);
  --shadow:0 1px 2px rgba(16,24,32,.05), 0 10px 28px rgba(16,24,32,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.62; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 12% -10%,rgba(52,211,153,.07),transparent 42%),
                   radial-gradient(circle at 92% 4%,rgba(122,162,247,.07),transparent 40%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;color:inherit}
::selection{background:var(--accent-dim)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ---------------- 布局 ---------------- */
.app{display:block;min-height:100vh}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:238px; z-index:60;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:18px 14px;
  transition:transform .22s ease;
}
.main{margin-left:238px; width:calc(100% - 238px); min-height:100vh; padding:0 30px 70px}

.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 18px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(140deg,var(--accent),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#08110d;letter-spacing:.5px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-text b{font-size:15px;font-weight:650}
.brand-text span{font-size:11.5px;color:var(--text3)}

.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  color:var(--text2);font-size:14px;transition:background .14s,color .14s;cursor:pointer;
}
.nav-item i{font-style:normal;width:16px;text-align:center;font-size:13px;opacity:.85}
.nav-item span{flex:1}
.nav-item:hover{background:var(--card);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent);font-weight:600}
.badge{
  font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:20px;
  background:var(--card2);color:var(--text3);border:1px solid var(--border);
}
.badge.warn{background:var(--warn-dim);color:var(--warn);border-color:transparent}
.badge.on{background:var(--accent-dim);color:var(--accent);border-color:transparent}

.side-foot{padding-top:14px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:10px}
.prog-mini-top{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:6px}
.prog-mini-top b{color:var(--accent)}
.bar{height:5px;border-radius:4px;background:var(--card2);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--blue));border-radius:4px;transition:width .3s}

.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:16px 0;margin-bottom:6px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-title{font-size:17px;font-weight:650;flex:1}
.menu-btn{display:none;font-size:20px;padding:2px 8px;border-radius:8px}
.topbar-right{display:flex;gap:8px}

/* ---------------- 页面 ---------------- */
.page{display:none;animation:fade .22s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.hero{
  border:1px solid var(--border);border-radius:var(--radius);padding:34px 32px;margin:10px 0 20px;
  background:linear-gradient(150deg,var(--card),var(--bg2));
  position:relative;overflow:hidden;
}
.hero:after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-dim),transparent 68%);
}
.hero h1{font-size:25px;line-height:1.45;font-weight:700;letter-spacing:-.2px;margin-bottom:10px}
.hero p{color:var(--text2);max-width:760px;font-size:13.6px;line-height:1.78}
.hero-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
.card-head h3{font-size:14.5px;font-weight:640}
.muted{color:var(--text3);font-size:12.5px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-2 .card{margin-bottom:16px}
.row{display:flex;align-items:center}
.row.gap{gap:10px;flex-wrap:wrap}
.spacer{flex:1}

/* ---------------- 统计卡 ---------------- */
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.stat .k{font-size:12px;color:var(--text3);margin-bottom:5px}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.5px}
.stat .s{font-size:11.5px;color:var(--text3);margin-top:3px}
.stat.accent .v{color:var(--accent)} .stat.blue .v{color:var(--blue)}
.stat.warn .v{color:var(--warn)} .stat.purple .v{color:var(--purple)}

/* ---------------- 图表 ---------------- */
.chart{display:flex;align-items:flex-end;gap:6px;height:132px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.chart .col i{
  display:block;width:100%;border-radius:5px 5px 2px 2px;min-height:3px;
  background:linear-gradient(180deg,var(--accent),rgba(52,211,153,.32));transition:height .3s;
}
.chart .col.zero i{background:var(--card2)}
.chart .col em{font-size:9.5px;color:var(--text3);font-style:normal;white-space:nowrap}

/* ---------------- 阶梯 ---------------- */
.tiers{display:flex;flex-direction:column;gap:11px}
.tier-row{display:grid;grid-template-columns:132px 1fr 118px;gap:14px;align-items:center}
.tier-row .nm{font-size:13px;font-weight:600}
.tier-row .nm small{display:block;color:var(--text3);font-weight:400;font-size:11px}
.tier-row .num{font-size:12px;color:var(--text2);text-align:right;font-variant-numeric:tabular-nums}

/* ---------------- 工具栏 ---------------- */
.toolbar{display:flex;align-items:center;gap:10px;margin:8px 0 14px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.toolbar.wrap{flex-wrap:wrap;overflow:visible}
.seg{display:flex;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:3px}
.seg button{padding:6px 13px;border-radius:7px;font-size:13px;color:var(--text2);white-space:nowrap;transition:.14s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--accent-dim);color:var(--accent);font-weight:600}

.input{
  background:var(--card);border:1px solid var(--border);border-radius:9px;
  padding:8px 12px;font-size:13.5px;outline:none;transition:border-color .15s;min-width:180px;
}
.input:focus{border-color:var(--accent)}
.input.sm{padding:6px 10px;font-size:13px;min-width:120px}
.input.lg{padding:12px 15px;font-size:15px;width:100%}

.chk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);cursor:pointer;user-select:none}
.chk input{width:auto;accent-color:var(--accent)}
.sortlab{color:var(--text3)}
.sortlab select{min-width:0;width:auto;max-width:230px;padding:5px 8px;font-size:12.5px}
.listmeta{display:flex;align-items:center;gap:14px;margin:0 0 12px;flex-wrap:wrap}

.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{
  font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--border);
  background:var(--card2);color:var(--text2);cursor:pointer;user-select:none;transition:.13s;
}
.tag:hover{border-color:var(--text3)}
.tag.on{background:var(--accent-dim);color:var(--accent);border-color:transparent;font-weight:600}
.tag.t-zk{color:#f0a35e;border-color:rgba(240,163,94,.32)}
.tag.t-gk{color:#7ec8e3;border-color:rgba(126,200,227,.32)}
.tag.t-cet4{color:#8ed48e;border-color:rgba(142,212,142,.32)}
.tag.t-cet6{color:#b6a1f5;border-color:rgba(182,161,245,.32)}
.tag.t-ky{color:#e8a0b4;border-color:rgba(232,160,180,.32)}
.tag.t-toefl{color:#79b8f0;border-color:rgba(121,184,240,.3)}
.tag.t-ielts{color:#e0c069;border-color:rgba(224,192,105,.3)}
.tag.t-gre{color:#d98fb0;border-color:rgba(217,143,176,.3)}
.tag.on.t-zk,.tag.on.t-gk,.tag.on.t-cet4,.tag.on.t-cet6,.tag.on.t-ky,
.tag.on.t-toefl,.tag.on.t-ielts,.tag.on.t-gre{background:currentColor;color:var(--bg)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ---------------- 单词列表 ---------------- */
.word-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px}
.wcard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 15px;cursor:pointer;transition:.15s;position:relative;overflow:hidden;
}
.wcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.wcard.top{display:flex;align-items:flex-start;gap:12px}
.wcard .rank{
  position:absolute;right:11px;top:9px;font-size:10.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;
}
.wcard .wd{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.2px;line-height:1.25}
.wcard .ph{font-size:12px;color:var(--text3);font-family:var(--mono);margin-left:7px}
.wcard .mean{font-size:12.8px;color:var(--text2);margin-top:5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wcard .wf{display:flex;gap:7px;margin-top:8px;align-items:center;flex-wrap:wrap}
.wcard .st{font-size:10.5px;padding:1px 7px;border-radius:20px}
.st-new{background:var(--card2);color:var(--text3)}
.st-l1{background:var(--warn-dim);color:var(--warn)}
.st-l2{background:var(--blue-dim);color:var(--blue)}
.st-l3{background:var(--accent-dim);color:var(--accent)}
.st-l4{background:var(--purple-dim);color:var(--purple)}
.star-b{color:var(--warn);font-size:11px;letter-spacing:-1px}
.mark-bk{color:var(--warn)}

/* ---------------- 详情弹窗 ---------------- */
.modal-overlay{
  position:fixed;inset:0;display:none;z-index:200;
  background:rgba(4,8,12,.7);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;padding:24px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:660px;width:100%;max-height:86vh;overflow-y:auto;padding:26px 28px;
}
.wm-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px}
.wm-word{font-family:var(--serif);font-size:38px;font-weight:700;letter-spacing:-.8px;line-height:1.1}
.wm-ph{font-family:var(--mono);color:var(--accent);font-size:15px;margin-top:4px}
.wm-rank{font-size:12px;color:var(--text3);white-space:nowrap;text-align:right;line-height:1.7}
.wm-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
.wm-sec h4{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:.6px;text-transform:uppercase;margin-bottom:9px}
.wm-trans{font-size:15.5px;line-height:1.9;white-space:pre-wrap}
.wm-ex{background:var(--card2);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;padding:12px 15px;margin-bottom:9px}
.wm-ex .en{font-size:15px;font-family:var(--serif);line-height:1.65}
.wm-ex .zh{font-size:13px;color:var(--text2);margin-top:5px}
.wm-forms{display:flex;flex-wrap:wrap;gap:8px}
.wm-forms span{background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:4px 11px;font-size:13px}
.wm-forms b{color:var(--accent);font-weight:500;font-size:11px;margin-right:5px;font-family:var(--font)}
.wm-actions{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:550;
  background:var(--card2);border:1px solid var(--border);transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--text3);background:var(--card)}
.btn.primary{background:var(--accent);color:#07130e;border-color:transparent;font-weight:650}
.btn.primary:hover{filter:brightness(1.08)}
.btn.blue{background:var(--blue);color:#06101f;border-color:transparent;font-weight:650}
.btn.warn{background:var(--warn);color:#160f02;border-color:transparent;font-weight:650}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--card2)}
.btn.sm{padding:5px 11px;font-size:12.5px}
.btn.lg{padding:11px 22px;font-size:14.5px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.book.on{background:var(--warn-dim);color:var(--warn);border-color:transparent}

/* 发音按钮 */
.tts{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--card2);border:1px solid var(--border);
  font-size:12px;flex:0 0 auto;transition:.15s;
}
.tts:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.tts.big{width:40px;height:40px;font-size:17px}

/* ---------------- 850 ---------------- */
.notice{
  display:flex;flex-direction:column;gap:5px;background:var(--blue-dim);border:1px solid rgba(122,162,247,.22);
  border-radius:var(--radius);padding:15px 18px;margin:8px 0 18px;
}
.notice b{font-size:14px;color:var(--blue)}
.notice span{font-size:12.8px;color:var(--text2);line-height:1.72}
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin-bottom:18px}
.catcard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:13px 15px;cursor:pointer;transition:.15s;
}
.catcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.catcard.on{border-color:var(--accent);background:var(--accent-dim)}
.catcard b{font-size:12.8px;display:block;margin-bottom:3px}
.catcard .n{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-.4px}
.catcard .n small{font-size:11.5px;color:var(--text3);font-weight:400;margin-left:4px}

.basic-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:11px}
.bcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 15px;transition:.15s}
.bcard.known{opacity:.55;border-color:var(--accent);background:var(--accent-dim)}
.bcard .bt{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.bcard .bw{font-family:var(--serif);font-size:19px;font-weight:600}
.bcard .bip{font-size:11.5px;color:var(--text3);font-family:var(--mono);margin-top:2px}
.bcard .bz{font-size:13px;margin-top:6px}
.bcard .be{font-size:12px;color:var(--text3);margin-top:5px;line-height:1.6}
.bcard .bf{display:flex;gap:7px;align-items:center;margin-top:9px}

/* ---------------- 句型 ---------------- */
.pattern-list{display:flex;flex-direction:column;gap:12px}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:17px 20px}
.pcard .ptop{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pcard .pen{
  font-family:var(--serif);font-size:18.5px;font-weight:650;color:var(--accent);
  letter-spacing:-.2px;flex:1;min-width:220px;line-height:1.4;
}
.pcard .pcn{font-size:14px;font-weight:600;margin-top:6px}
.pcard .pnote{font-size:12.8px;color:var(--text2);margin-top:7px;line-height:1.75;
  border-left:2px solid var(--border);padding-left:11px}
.pcard .pex{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.pcard .pex .line{background:var(--card2);border-radius:9px;padding:9px 13px;display:flex;gap:10px;align-items:flex-start}
.pcard .pex .line .txt{flex:1}
.pcard .pex .line .en{font-size:14.5px;font-family:var(--serif);line-height:1.6}
.pcard .pex .line .zh{font-size:12.5px;color:var(--text2);margin-top:3px}
.pcard .pcat{font-size:10.5px;color:var(--text3);background:var(--card2);border:1px solid var(--border);
  padding:2px 9px;border-radius:20px;white-space:nowrap}

/* ---------------- 复习 ---------------- */
.review-wrap{max-width:720px;margin:0 auto}
.flash{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:44px 34px;text-align:center;min-height:286px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:.15s;
}
.flash:hover{border-color:var(--accent)}
.flash .fq{font-family:var(--serif);font-size:46px;font-weight:700;letter-spacing:-1px;line-height:1.15}
.flash .fp{font-family:var(--mono);font-size:15px;color:var(--accent);margin-top:4px}
.flash .fa{margin-top:20px;animation:fade .2s ease}
.flash .ft{font-size:17px;line-height:1.85;max-width:520px}
.flash .fe{margin-top:16px;font-size:14px;color:var(--text2);font-family:var(--serif);line-height:1.65}
.flash .fhint{font-size:12.5px;color:var(--text3);margin-top:16px}
.rate-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.rate-row button{padding:13px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);transition:.15s}
.rate-row button b{display:block;font-size:13.5px;margin-bottom:3px}
.rate-row button span{font-size:11px;color:var(--text3)}
.rate-row button:hover{transform:translateY(-2px)}
.r-forget:hover{border-color:var(--danger);background:var(--danger-dim)}
.r-hard:hover{border-color:var(--warn);background:var(--warn-dim)}
.r-good:hover{border-color:var(--blue);background:var(--blue-dim)}
.r-easy:hover{border-color:var(--accent);background:var(--accent-dim)}
.rev-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:12.5px;color:var(--text2)}
.rev-progress .bar{flex:1}
.card-list{display:flex;flex-direction:column;gap:7px}
.card-list-item{
  display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:.14s;
}
.card-list-item:hover{border-color:var(--accent);transform:translateX(2px)}
.card-list-item .cw{font-family:var(--serif);font-size:16px;font-weight:600;min-width:120px}
.card-list-item .cm{font-size:12.5px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{text-align:center;padding:70px 20px;color:var(--text3)}
.empty .e1{font-size:34px;margin-bottom:12px;opacity:.5}
.empty .e2{font-size:14.5px;color:var(--text2);margin-bottom:6px}
.empty .e3{font-size:12.5px}

/* ---------------- 表格 ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--text3);font-weight:500;font-size:11.5px;padding:6px 10px;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--border-soft)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--card2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .w{font-family:var(--serif);font-size:15px;font-weight:600}
.tbl .mini{height:6px;border-radius:4px;background:var(--card2);overflow:hidden;min-width:80px}
.tbl .mini i{display:block;height:100%;background:var(--accent);border-radius:4px}

/* ---------------- 搜索 ---------------- */
.search-modal{max-width:640px;padding:20px}
.gresults{margin-top:14px;max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.gitem{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:9px;cursor:pointer;transition:.13s}
.gitem:hover{background:var(--card2)}
.gitem .gw{font-family:var(--serif);font-size:16px;font-weight:600;min-width:110px}
.gitem .gm{font-size:12.5px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gitem .gt{font-size:10.5px;color:var(--text3);background:var(--card2);padding:2px 8px;border-radius:20px;white-space:nowrap}

/* ---------------- 表单 ---------------- */
.form-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.form-row:last-child{border-bottom:none}
.form-row label{width:150px;font-size:13.5px;color:var(--text2);flex:0 0 150px}
.form-row input[type=range]{flex:1;accent-color:var(--accent)}
.src-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.src-list li{font-size:12.8px;color:var(--text2);line-height:1.75;padding-left:15px;position:relative}
.src-list li:before{content:"—";position:absolute;left:0;color:var(--accent)}
.src-list b{color:var(--text)}

/* ---------------- 分页 ---------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;flex-wrap:wrap}
.pager button{
  min-width:34px;height:32px;padding:0 10px;border-radius:8px;font-size:13px;
  background:var(--card);border:1px solid var(--border);transition:.14s;
}
.pager button:hover{border-color:var(--accent)}
.pager button.on{background:var(--accent);color:#07130e;border-color:transparent;font-weight:650}
.pager .info{color:var(--text3);font-size:12.5px;padding:0 8px}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:400;
  background:var(--card2);border:1px solid var(--border);border-radius:11px;
  padding:11px 20px;font-size:13.5px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.22s;max-width:82vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:var(--accent);color:var(--accent)}
.toast.err{border-color:var(--danger);color:var(--danger)}

/* ---------------- 响应式 ---------------- */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none;box-shadow:var(--shadow)}
  .main{margin-left:0;width:100%;padding:0 16px 60px}
  .menu-btn{display:block}
  .hero{padding:24px 20px} .hero h1{font-size:20px}
  .tier-row{grid-template-columns:104px 1fr 92px}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .word-list,.basic-list{grid-template-columns:1fr}
  .rate-row{grid-template-columns:repeat(2,1fr)}
  .flash{padding:32px 18px} .flash .fq{font-size:34px}
  .flash .ft{font-size:15px}
  .wm-word{font-size:29px}
  .modal{padding:20px 18px}
  .form-row{flex-wrap:wrap} .form-row label{width:100%;flex:none}
}

/* ---------------- 趣味游戏 ---------------- */
.game-intro{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:16px}
.game-intro h2{font-size:20px;margin-bottom:5px}.game-intro p{font-size:13px;color:var(--text2)}
.game-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--text2)}
.game-stats b{color:var(--accent);font-size:15px;margin-left:3px}
.game-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:35px auto}
.game-mode{position:relative;overflow:hidden;text-align:left;min-height:270px;padding:30px;border:1px solid var(--border);
  border-radius:20px;background:var(--card);transition:.2s;display:flex;flex-direction:column;align-items:flex-start}
.game-mode:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-55px;bottom:-70px;opacity:.14}
.game-mode.match-mode:after{background:var(--accent)}.game-mode.spell-mode:after{background:var(--blue)}
.game-mode:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.game-mode.match-mode:hover{border-color:var(--accent)}.game-mode.spell-mode:hover{border-color:var(--blue)}
.game-icon{font-size:42px;margin-bottom:22px}.game-mode b{font-size:23px;margin-bottom:10px}
.game-mode small{font-size:13px;color:var(--text2);line-height:1.8}.game-mode em{font-style:normal;font-weight:650;margin-top:auto;padding-top:24px;color:var(--accent)}
.spell-mode em{color:var(--blue)}
.game-head{display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:15px;margin-bottom:20px}
.game-head h2{font-size:20px}.game-head p{font-size:12.5px;color:var(--text2);margin-top:3px}
.game-score{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.game-score span{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:7px 13px;font-size:12.5px}
.game-score b{color:var(--accent)}
.match-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;max-width:960px;margin:0 auto}
.match-card{position:relative;min-height:112px;padding:14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);font-size:16px;transition:.18s;display:flex;align-items:center;justify-content:center}
.match-card.word span{font-family:var(--serif);font-size:21px;font-weight:650}.match-card.meaning span{font-size:14px}
.match-card small{position:absolute;top:8px;right:10px;font-size:9px;color:var(--text3)}
.match-card:hover,.match-card.open{border-color:var(--blue);background:var(--blue-dim);transform:translateY(-2px)}
.match-card.matched{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);pointer-events:none;animation:matchPop .3s ease}
.match-card.wrong{border-color:var(--danger);background:var(--danger-dim);animation:shake .3s ease}
@keyframes matchPop{50%{transform:scale(1.06)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.spell-card{max-width:680px;margin:15px auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:42px;text-align:center}
.spell-progress{height:6px;background:var(--card2);border-radius:4px;overflow:hidden;margin:-20px 0 38px}
.spell-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--accent));border-radius:4px;transition:.25s}
.spell-meaning{font-size:24px;font-weight:650;margin-bottom:7px}.spell-ipa{font-family:var(--mono);color:var(--text3);font-size:13px;margin-bottom:15px}
.spell-mask{font-family:var(--mono);font-size:22px;letter-spacing:4px;color:var(--text2);margin:22px 0}
.spell-card form{display:flex;gap:10px;max-width:480px;margin:0 auto}.spell-input{font-family:var(--serif);font-size:20px;text-align:center;flex:1;min-width:0}
.spell-input.correct{border-color:var(--accent);background:var(--accent-dim)}.spell-input.incorrect{border-color:var(--danger);background:var(--danger-dim)}
.spell-actions{min-height:35px;margin-top:15px;display:flex;align-items:center;justify-content:center;gap:16px}
.spell-actions .good{color:var(--accent)}.spell-actions .bad{color:var(--danger)}
.game-finish{max-width:620px;margin:55px auto;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:48px 30px}
.finish-burst{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  background:var(--accent-dim);border:2px solid var(--accent);color:var(--accent);font-size:36px;font-weight:750}
.game-finish h2{font-size:25px}.game-finish p{color:var(--text2);margin:10px 0 26px;font-size:15px}.game-finish p b{color:var(--accent)}
.game-finish .row{justify-content:center}
@media (max-width:760px){
  .game-choose{grid-template-columns:1fr;margin:18px auto}.game-mode{min-height:220px}
  .game-head{grid-template-columns:auto 1fr}.game-score{grid-column:1/-1;justify-content:flex-start}
  .match-grid{grid-template-columns:repeat(3,minmax(88px,1fr));gap:8px}.match-card{min-height:92px;padding:9px}
  .spell-card{padding:32px 16px}.spell-card form{flex-direction:column}.game-intro{align-items:flex-start;flex-direction:column}
}

/* ---------------- 串联学习 ---------------- */
.learn-methods{display:flex;align-items:center;max-width:880px;margin:4px auto 24px}
.learn-methods>i{height:2px;background:var(--border);flex:1;min-width:18px}
.method-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);text-align:left;transition:.16s}
.method-pill>b{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card2);color:var(--text2)}
.method-pill span{font-size:13px;font-weight:650}.method-pill small{display:block;font-size:10px;color:var(--text3);font-weight:400;margin-top:2px}
.method-pill.on{border-color:var(--accent);background:var(--accent-dim)}.method-pill.on>b{background:var(--accent);color:#07130e}
.link-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.theme-picker{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.theme-picker button{padding:7px 11px;border:1px solid var(--border);background:var(--card);border-radius:20px;font-size:12px;color:var(--text2)}
.theme-picker button.on{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.map-layout{display:grid;grid-template-columns:minmax(560px,1.5fr) minmax(280px,.7fr);gap:18px}
.mind-map{height:540px;position:relative;background:radial-gradient(circle at 50% 50%,var(--accent-dim),transparent 23%),var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.mind-map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mind-map line{stroke:var(--border);stroke-width:.35;stroke-dasharray:1.8 1.4}
.mind-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--accent-dim);border:2px solid var(--accent);box-shadow:0 0 45px rgba(73,214,166,.12);z-index:2}
.mind-center span{font-size:25px}.mind-center b{font-size:16px;margin-top:4px}.mind-center small{font-size:10px;color:var(--text3);margin-top:3px}
.mind-node{position:absolute;transform:translate(-50%,-50%);width:126px;min-height:74px;padding:10px;border-radius:14px;border:1px solid var(--border);background:var(--card2);z-index:3;transition:.16s}
.mind-node:hover,.mind-node.on{border-color:var(--blue);background:var(--blue-dim);transform:translate(-50%,-50%) scale(1.05)}
.mind-node b{display:block;font-family:var(--serif);font-size:17px}.mind-node small{display:block;color:var(--text2);font-size:11px;margin:3px 0}
.mind-node em{font-style:normal;color:var(--text3);font-size:9px}
.link-word-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:25px;align-self:stretch}
.link-card-top{display:flex;align-items:center;justify-content:space-between}.link-card-top h3{font-family:var(--serif);font-size:32px}.link-card-top span{color:var(--accent);font-family:var(--mono);font-size:13px}
.link-meaning{font-size:16px;line-height:1.7;margin:24px 0 13px}.link-example{background:var(--card2);border-radius:11px;padding:13px;font-family:var(--serif);font-size:14px;line-height:1.65}
.link-example small{display:block;color:var(--text3);font-family:var(--sans);margin-top:5px}.retention-chip{display:inline-flex;margin:18px 0;padding:6px 10px;border-radius:18px;background:var(--blue-dim);color:var(--blue);font-size:11px}
.retention-chip.new{background:var(--warn-dim);color:var(--warn)}.link-word-card>.btn{width:100%}
.principle-note{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:15px 18px;border-left:3px solid var(--accent);background:var(--card);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.principle-note b{white-space:nowrap;font-size:12px;color:var(--accent)}.principle-note span{font-size:12px;color:var(--text2);line-height:1.7}
.feynman-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;max-width:1050px;margin:0 auto}.feynman-guide,.feynman-sheet{margin:0}
.method-label{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--accent);margin-bottom:9px}.feynman-guide h2{font-size:18px;line-height:1.5}
.feynman-guide ol{list-style:none;margin:25px 0}.feynman-guide li{position:relative;border-left:2px solid var(--border);padding:0 0 24px 20px}
.feynman-guide li:before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--card2);border:2px solid var(--border)}
.feynman-guide li.done:before{background:var(--accent);border-color:var(--accent)}.feynman-guide li b{display:block;font-size:13px}.feynman-guide li span{display:block;font-size:11px;color:var(--text3);line-height:1.6;margin-top:4px}
.fy-word{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.fy-word h2{font-family:var(--serif);font-size:35px}.fy-word span{color:var(--accent);font-family:var(--mono)}
.feynman-sheet details{margin-bottom:20px}.feynman-sheet summary{cursor:pointer;color:var(--text3);font-size:12px}.dictionary-reveal{padding:12px;margin-top:8px;border-radius:9px;background:var(--card2);font-size:13px;line-height:1.7}
.dictionary-reveal em{color:var(--text2)}.feynman-sheet label{display:block;font-size:13px;font-weight:650;margin:16px 0 7px}.feynman-sheet label small{float:right;color:var(--text3);font-weight:400}
.fy-text{width:100%;height:126px;resize:vertical;line-height:1.7}.fy-text.small{height:88px}.fy-rate{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:20px}
.fy-rate>span{font-size:12px;color:var(--text2);margin-right:auto}
.curve-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.curve-main,.due-board{margin:0}.curve-title{display:flex;align-items:center;justify-content:space-between}
.curve-title span{font-size:12px;color:var(--text3)}.curve-title h2{font-family:var(--serif);font-size:29px;margin-top:4px}
.retention-ring{--p:0;width:96px;height:96px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--card2) 0);position:relative}
.retention-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--card)}.retention-ring b,.retention-ring small{position:relative;z-index:1}.retention-ring b{font-size:20px;color:var(--accent)}.retention-ring small{font-size:9px;color:var(--text3)}
.curve-svg{width:100%;height:270px;margin-top:10px}.curve-svg line{stroke:var(--border);stroke-width:.4}.curve-svg path{fill:none;stroke:var(--accent);stroke-width:1.5}.curve-svg text{font-size:3px;fill:var(--text3)}
.curve-explain{font-size:12px;color:var(--text2);padding:11px;background:var(--card2);border-radius:9px}.curve-actions{margin-top:15px;justify-content:center}
.due-board h3{font-size:16px}.due-board h4{font-size:12px;color:var(--text2);margin:21px 0 9px}
.due-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:15px}.due-counts>div{background:var(--card2);border-radius:10px;padding:11px 6px;text-align:center}
.due-counts>div.hot{background:var(--warn-dim)}.due-counts b{display:block;font-size:20px;color:var(--accent)}.due-counts .hot b{color:var(--warn)}.due-counts span{font-size:9px;color:var(--text3)}
.due-list{display:flex;flex-direction:column;gap:5px;max-height:270px;overflow:auto}.due-list button{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;background:var(--card2);border:1px solid transparent;text-align:left}
.due-list button:hover{border-color:var(--accent)}.due-list button b{font-family:var(--serif);font-size:14px}.due-list button span{color:var(--accent);font-size:11px}.due-list button small{color:var(--text3);font-size:10px}
@media (max-width:980px){.map-layout{grid-template-columns:1fr}.mind-map{height:500px}.feynman-layout,.curve-grid{grid-template-columns:1fr}.feynman-guide ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feynman-guide li{padding-bottom:10px}}
@media (max-width:680px){.learn-methods{align-items:stretch}.learn-methods>i{min-width:6px}.method-pill{padding:8px;gap:5px}.method-pill small{display:none}.method-pill>b{width:23px;height:23px}.map-layout{display:block}.mind-map{height:520px;margin-bottom:12px}.mind-node{width:100px;min-height:65px}.mind-node b{font-size:14px}.mind-center{width:105px;height:105px}.theme-picker{max-height:82px;overflow:auto}.feynman-guide ol{grid-template-columns:1fr}.fy-rate{justify-content:stretch}.fy-rate .btn{flex:1}.principle-note{flex-direction:column}.due-counts{grid-template-columns:repeat(3,1fr)}}

/* 整句朗读按钮 */
.tts.sentence{width:auto;height:30px;padding:0 11px;border-radius:16px;gap:6px;font-size:12px;color:var(--blue);white-space:nowrap}
.tts.sentence span{font-size:11px;font-weight:600}
.wm-sec>.tts.sentence{margin-top:9px}
.link-example>.tts.sentence,.dictionary-reveal>.tts.sentence{margin-top:10px}
.review-sentence-tts{display:flex;justify-content:center;margin-top:10px}
.fy-sentence-action{display:flex;justify-content:flex-end;margin-top:7px}

/* ---------------- 账户 / 登录 ---------------- */
.account-btn{display:inline-flex;align-items:center;gap:7px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.account-btn.signed-in{color:var(--accent);border-color:rgba(73,214,166,.28);background:var(--accent-dim)}
.account-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
.account-modal{max-width:520px;padding:28px}
.auth-box{max-width:390px;margin:0 auto;text-align:center}.auth-mark{width:54px;height:54px;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;color:#07130e;font-weight:800;margin:0 auto 14px}
.auth-box h2{font-size:22px}.auth-box>p{font-size:12.5px;color:var(--text2);margin:7px 0 19px;line-height:1.6}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--card2);border-radius:11px;padding:4px;margin-bottom:17px}
.auth-tabs button{padding:8px;border-radius:8px;font-size:13px;color:var(--text2)}.auth-tabs button.on{background:var(--card);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.auth-box form{text-align:left}.auth-box form label{display:block;font-size:12px;color:var(--text2);margin:12px 0 6px}.auth-box form .input{width:100%;height:42px}
.auth-error{min-height:32px;padding-top:8px;color:var(--danger);font-size:12px}.auth-submit{width:100%}.auth-note{font-size:10.5px;color:var(--text3);margin-top:14px;line-height:1.6}
.account-panel{min-height:310px}.account-head{display:flex;align-items:center;gap:15px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.account-avatar{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;color:#07130e;font-size:24px;font-weight:800}
.account-head span,.account-head small{font-size:11px;color:var(--text3)}.account-head h2{font-size:21px;margin:3px 0}
.cloud-card{margin:20px 0 12px;background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:16px}
.cloud-card b{font-size:14px}.cloud-card p{font-size:11.5px;color:var(--text3);margin-top:5px}.cloud-actions{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}.cloud-actions .btn{flex:1}
.account-warning{font-size:11px;color:var(--warn);background:var(--warn-dim);padding:10px 12px;border-radius:9px;line-height:1.6}
.account-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:620px){.account-btn{max-width:105px}.account-btn:not(.signed-in){font-size:0}.account-btn:not(.signed-in)::after{content:"登录";font-size:12px}.account-modal{padding:22px 16px}.cloud-actions{flex-direction:column}}