/* ============================================================
   H-Eng Terminal · Shanxi Gaokao — Design System
   质感 UI：玻璃拟态 / 淡蓝-白-黄 综合渐变 / Notion 风格
   ============================================================ */
:root{
  --blue-1:#EBF3FA; --blue-2:#d7e9ff; --blue-3:#b9d8ff; --blue-4:#7fb5f2;
  --blue-5:#4a90e2; --blue-6:#2f6fc4;
  --yellow-1:#fff7e0; --yellow-2:#ffefc2; --yellow-3:#ffe29a; --yellow-4:#ffd166;
  --ink:#1f2a3a; --ink-2:#5a6b84; --ink-3:#8a9ab0;
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(220,228,238,.6);
  --shadow:0 8px 28px rgba(80,120,190,.14);
  --radius:16px;
  --c-sub:#4a90e2; --c-verb:#2fa36b; --c-clause:#e0a02e; --c-obj:#8b5cf6;
  --c-adv:#0ea5a5; --c-prep:#64748b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  line-height:1.65;
  font-size:15px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -8%, #dcecff 0%, rgba(220,236,255,0) 55%),
    radial-gradient(1000px 640px at 105% 8%, #fff3cf 0%, rgba(255,243,207,0) 52%),
    linear-gradient(135deg, #EBF3FA 0%, #FBF9F5 50%, #FFFDF7 100%);
  background-attachment:fixed;
}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:14px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(120,150,200,.35);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

/* ---------- Layout ---------- */
.app{display:flex;height:100vh;padding:14px;gap:14px}
.sidebar{
  width:236px;flex:0 0 236px;display:flex;flex-direction:column;
  padding:16px 12px 12px;overflow-y:auto;
}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;margin-bottom:14px;border-radius:14px;
}
.crumb{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.crumb .dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue-4),var(--yellow-4));display:inline-block}
.top-actions{display:flex;align-items:center;gap:12px}
.search-wrap input{
  border:1px solid rgba(120,150,200,.35);background:rgba(255,255,255,.7);
  border-radius:10px;padding:7px 12px;width:230px;outline:none;transition:.2s;
}
.search-wrap input:focus{border-color:var(--blue-4);box-shadow:0 0 0 3px rgba(74,144,226,.15);width:300px}
.content{flex:1;overflow-y:auto;padding:2px 2px 40px;scroll-behavior:smooth}

/* ---------- Sidebar nav ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 14px}
.brand-logo{
  width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;font-size:15px;letter-spacing:-.5px;
  background:linear-gradient(135deg,#5b9cf5 0%,#8fc0ff 45%,#ffd166 120%);
  box-shadow:0 6px 14px rgba(91,156,245,.4);
}
.brand-name b{display:block;font-size:14px;letter-spacing:.2px}
.brand-name span{font-size:10.5px;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-group{font-size:10.5px;color:var(--ink-3);letter-spacing:2px;margin:14px 8px 4px;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:none;border-radius:11px;padding:9px 12px;
  font-size:13.5px;color:var(--ink-2);transition:.16s;position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.nav-item.active{
  background:linear-gradient(135deg,rgba(91,156,245,.16),rgba(255,209,102,.16));
  color:var(--blue-6);font-weight:700;box-shadow:inset 0 0 0 1px rgba(91,156,245,.25);
}
.ni-ico{width:20px;text-align:center;font-size:15px}
.badge{
  margin-left:auto;font-size:10px;font-weight:800;color:#fff;background:var(--blue-5);
  border-radius:20px;padding:2px 7px;min-width:20px;text-align:center;
}
.badge.amber{background:linear-gradient(135deg,#f5b940,#ffd166);color:#6b4d00}
.sidebar-foot{padding:10px 6px 2px;border-top:1px dashed rgba(120,150,200,.3);margin-top:10px}
.save-indicator{font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.save-indicator.ok{color:#2fa36b}

/* ---------- Generic UI ---------- */
.btn{
  border:none;border-radius:11px;padding:9px 16px;font-size:13px;font-weight:600;
  background:linear-gradient(135deg,var(--blue-5),var(--blue-4));color:#fff;
  box-shadow:0 4px 12px rgba(74,144,226,.3);transition:.15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,144,226,.4)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.75);color:var(--blue-6);box-shadow:inset 0 0 0 1px rgba(91,156,245,.4)}
.btn.ghost:hover{background:#fff}
.btn.amber{background:linear-gradient(135deg,#f5b940,#ffd166);color:#6b4d00;box-shadow:0 4px 12px rgba(245,185,64,.35)}
.btn.amber:hover{box-shadow:0 6px 16px rgba(245,185,64,.5)}
.btn.green{background:linear-gradient(135deg,#2fa36b,#4cc98a);box-shadow:0 4px 12px rgba(47,163,107,.3)}
.btn.danger{background:linear-gradient(135deg,#e0574f,#f07f76);box-shadow:0 4px 12px rgba(224,87,79,.3)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.card{
  background:rgba(255,255,255,.78);border:1px solid var(--glass-border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;
}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 14px;flex-wrap:wrap;gap:10px}
.section-head h2{margin:0;font-size:22px;background:linear-gradient(120deg,var(--blue-6),#7b6fe0 70%,#d99a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid rgba(120,150,200,.35);background:rgba(255,255,255,.7);color:var(--ink-2);
  border-radius:20px;padding:5px 13px;font-size:12px;transition:.15s;
}
.chip:hover{border-color:var(--blue-4);color:var(--blue-6)}
.chip.on{background:linear-gradient(135deg,rgba(91,156,245,.18),rgba(255,209,102,.18));border-color:rgba(91,156,245,.5);color:var(--blue-6);font-weight:700}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.grid.cols-3{grid-template-columns:repeat(2,1fr)}.grid.cols-2{grid-template-columns:1fr}}
@media(max-width:760px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}
.stat-tile{
  background:rgba(255,255,255,.78);border:1px solid var(--glass-border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;position:relative;overflow:hidden;transition:.2s;
}
.stat-tile:hover{transform:translateY(-2px)}
.stat-tile .st-ico{font-size:22px}
.stat-tile .st-num{font-size:26px;font-weight:800;margin:6px 0 2px;background:linear-gradient(120deg,var(--blue-6),#d99a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-tile .st-label{font-size:12px;color:var(--ink-3)}
.stat-tile::after{content:"";position:absolute;right:-22px;top:-22px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,209,102,.35),transparent 70%)}
.stat-tile.blue::after{background:radial-gradient(circle,rgba(91,156,245,.3),transparent 70%)}

.empty{text-align:center;color:var(--ink-3);padding:48px 20px;font-size:13px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(31,42,58,.92);color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;
  opacity:0;pointer-events:none;transition:.25s;z-index:999;max-width:80vw;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Selection toolbar ---------- */
.sel-toolbar{
  position:fixed;z-index:500;display:flex;gap:6px;padding:6px;border-radius:12px;
  box-shadow:0 10px 30px rgba(60,90,160,.25);transition:opacity .15s;
}
.sel-toolbar button{
  border:none;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--blue-5),var(--blue-4));
}
.sel-toolbar button:last-child{background:linear-gradient(135deg,#f5b940,#ffd166);color:#6b4d00}

/* ---------- Reading / Cloze ---------- */
.passage{
  background:rgba(255,255,255,.85);border:1px solid var(--glass-border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 30px;line-height:1.9;font-size:15px;letter-spacing:.2px;
}
.passage h3{margin:0 0 4px;font-size:17px}
.passage .src{font-size:11.5px;color:var(--ink-3);margin-bottom:14px}
.passage p{margin:0 0 14px}
.passage .hl{background:linear-gradient(180deg,transparent 62%,var(--yellow-2) 62%);border-radius:3px;padding:0 2px}
.passage::selection,.passage p::selection, .cloze-sent::selection{background:rgba(91,156,245,.32)}
.blk{display:inline-block;min-width:92px;border-bottom:2px solid var(--blue-4);text-align:center;font-weight:800;color:var(--blue-6);padding:0 6px;border-radius:4px 4px 0 0}
.blk.done{background:rgba(47,163,107,.12);border-bottom-color:#2fa36b;color:#1c7a4e}
.blk.wrong{background:rgba(224,87,79,.12);border-bottom-color:#e0574f;color:#b23b34}
.qlist{margin-top:18px;display:grid;gap:10px}
.qitem{background:rgba(255,255,255,.75);border:1px solid rgba(120,150,200,.3);border-radius:12px;padding:12px 16px}
.qitem .qtext{font-size:13px;color:var(--ink-2);margin-bottom:8px}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt{
  border:1px solid rgba(120,150,200,.4);background:#fff;border-radius:9px;padding:6px 13px;
  font-size:13px;color:var(--ink);transition:.13s;
}
.opt:hover{border-color:var(--blue-4);background:var(--blue-1)}
.opt.correct{border-color:#2fa36b;background:rgba(47,163,107,.12);color:#1c7a4e;font-weight:700}
.opt.wrong{border-color:#e0574f;background:rgba(224,87,79,.1);color:#b23b34}

/* ---------- Flashcards ---------- */
.deck-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.flip-stage{perspective:1400px;display:flex;justify-content:center;padding:10px 0 26px}
.flip-card{
  width:min(560px,94%);height:340px;position:relative;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.1,.2,1);cursor:pointer;
}
.flip-card.flipped{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:22px;padding:30px 34px;display:flex;flex-direction:column;
  background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(234,244,255,.86) 55%,rgba(255,247,224,.9));
  border:1px solid var(--glass-border);box-shadow:0 18px 46px rgba(80,120,190,.22);
}
.flip-face.back{transform:rotateY(180deg);background:linear-gradient(150deg,rgba(255,252,240,.96),rgba(234,244,255,.9) 60%,rgba(255,255,255,.94))}
.flip-tag{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--blue-5);display:flex;gap:8px;align-items:center;margin-bottom:10px}
.flip-tag .st{background:rgba(91,156,245,.14);border-radius:20px;padding:3px 10px;color:var(--blue-6)}
.flip-tag .st.key{background:rgba(245,185,64,.2);color:#b07600}
.flip-tag .st.error{background:rgba(224,87,79,.14);color:#b23b34}
.flip-q{font-size:20px;line-height:1.9;color:var(--ink);flex:1;overflow-y:auto}
.flip-q .blank{display:inline-block;min-width:110px;border-bottom:2.5px dashed var(--yellow-4);font-weight:800;color:#c08a00}
.flip-hint{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}
.flip-a-title{font-size:14px;font-weight:800;color:var(--blue-6);margin-bottom:6px}
.word-big{font-size:24px;font-weight:900;background:linear-gradient(120deg,var(--blue-6),#d99a1f);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.syn-map{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.syn-tag{background:rgba(255,255,255,.85);border:1px solid rgba(91,156,245,.4);color:var(--blue-6);border-radius:20px;padding:4px 12px;font-size:12.5px;font-weight:600}
.syn-tag.main{background:linear-gradient(135deg,rgba(91,156,245,.18),rgba(255,209,102,.18));border-color:rgba(91,156,245,.55)}
.usage-note{font-size:14px;line-height:1.85;color:var(--ink-2);line-height:1.7;background:rgba(255,255,255,.6);border-radius:10px;padding:8px 12px;border-left:3px solid var(--blue-4);flex:1;overflow-y:auto}
.flip-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.mem-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 4px}
.mem-dots{display:flex;gap:6px}
.mem-dot{width:14px;height:14px;border-radius:50%;background:rgba(160,180,210,.3);transition:.2s}
.mem-dot.on{background:linear-gradient(135deg,var(--blue-4),var(--yellow-4));box-shadow:0 0 8px rgba(91,156,245,.5)}
.card-edit{width:min(560px,94%);margin:6px auto 20px;padding:14px;border-radius:14px;background:rgba(255,255,255,.8);border:1px solid rgba(120,150,200,.3);display:none}
.card-edit.show{display:block}
.card-edit label{font-size:11.5px;color:var(--ink-3);font-weight:700;display:block;margin:8px 0 3px}
.card-edit input,.card-edit textarea{width:100%;border:1px solid rgba(120,150,200,.35);border-radius:9px;padding:7px 10px;outline:none;background:#fff}
.card-edit input:focus,.card-edit textarea:focus{border-color:var(--blue-4)}

/* deck list */
.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mini-card{background:rgba(255,255,255,.8);border:1px solid var(--glass-border);border-radius:14px;padding:14px;box-shadow:var(--shadow);transition:.18s;cursor:pointer}
.mini-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(80,120,190,.2)}
.mini-card .w{font-size:16px;font-weight:800;color:var(--blue-6)}
.mini-card .syns{font-size:12px;color:var(--ink-2);margin:6px 0 10px;line-height:1.6}
.mini-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;color:var(--ink-3)}

/* ---------- Polysemy ---------- */
.poly-card{background:rgba(255,255,255,.8);border:1px solid var(--glass-border);border-radius:14px;padding:16px;box-shadow:var(--shadow);transition:.18s}
.poly-card:hover{transform:translateY(-2px)}
.poly-word{font-size:18px;font-weight:900;color:var(--blue-6);display:flex;align-items:center;gap:8px}
.poly-word .ipa{font-size:11px;color:var(--ink-3);font-weight:400}
.poly-means{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.poly-means .mean{font-size:14px;border-radius:9px;padding:7px 10px;line-height:1.55}
.poly-means .mean.common{background:rgba(91,156,245,.1);border-left:3px solid var(--blue-4)}
.poly-means .mean.unfamiliar{background:rgba(255,209,102,.2);border-left:3px solid var(--yellow-4);font-weight:600;color:#7a5b00}
.poly-ex{font-size:14px;line-height:1.85;color:var(--ink-2);line-height:1.75;background:rgba(255,255,255,.6);border-radius:9px;padding:8px 11px}
.poly-tag{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px}
.poly-tag.hot{background:rgba(224,87,79,.13);color:#b23b34}
.poly-tag.normal{background:rgba(91,156,245,.12);color:var(--blue-6)}
.study-stack{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.study-btn{flex:1;min-width:120px;border:none;border-radius:12px;padding:12px;font-size:13.5px;font-weight:800;color:#fff;transition:.15s}
.study-btn:hover{transform:translateY(-2px)}
.study-btn.again{background:linear-gradient(135deg,#e0574f,#f07f76)}
.study-btn.hard{background:linear-gradient(135deg,#f5a623,#ffc94d);color:#6b4d00}
.study-btn.good{background:linear-gradient(135deg,#2fa36b,#4cc98a)}
.study-btn.easy{background:linear-gradient(135deg,#4a90e2,#7fb5f2)}

/* ---------- Grammar tree ---------- */
.gtree-wrap{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:16px;align-items:start}
@media(max-width:900px){.gtree-wrap{grid-template-columns:1fr}}
.gtree{
  background:rgba(255,255,255,.8);border:1px solid var(--glass-border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;max-height:72vh;overflow-y:auto;
}
.tnode{margin-left:16px;border-left:1.5px dashed rgba(91,156,245,.4);padding-left:12px}
.tnode.root{margin-left:0;border-left:none;padding-left:0}
.trow{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:10px;cursor:pointer;font-size:13px;transition:.13s}
.trow:hover{background:rgba(91,156,245,.1)}
.trow.selected{background:linear-gradient(135deg,rgba(91,156,245,.16),rgba(255,209,102,.16));font-weight:700;color:var(--blue-6)}
.trow .tw{font-weight:700}
.trow .tdot{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.trow .caret{font-size:10px;color:var(--ink-3);width:12px;transition:.15s;transform:rotate(0)}
.trow.open .caret{transform:rotate(90deg)}
.trow .cnt{font-size:10px;color:var(--ink-3);margin-left:auto}
.tdetail{background:rgba(255,255,255,.85);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;min-height:300px}
.tdetail h3{margin:0 0 6px;font-size:18px}
.tdetail .ttype{font-size:11px;font-weight:800;color:#fff;border-radius:20px;padding:3px 11px;display:inline-block;margin-bottom:10px}
.tdetail .desc{font-size:13.5px;line-height:1.85;color:var(--ink-2);margin:8px 0}
.tdetail .ex{background:rgba(234,244,255,.7);border-left:4px solid var(--blue-4);border-radius:9px;padding:10px 14px;font-size:13.5px;line-height:1.8;margin:10px 0}
.tdetail .formula{font-size:12px;color:var(--ink-3);background:rgba(255,247,224,.7);border-radius:8px;padding:6px 11px;display:inline-block;margin-top:6px}
.gmap-svg{width:100%;height:auto;border-radius:14px;background:rgba(255,255,255,.55);border:1px dashed rgba(91,156,245,.35);margin-bottom:14px}

/* ---------- Sentence breakdown ---------- */
.sent-list{display:grid;gap:12px}
.sent-item{background:rgba(255,255,255,.82);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;transition:.15s}
.sent-item:hover{border-color:rgba(91,156,245,.5)}
.sent-item.open{box-shadow:0 14px 34px rgba(80,120,190,.2)}
.sent-head{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;flex-wrap:wrap}
.sent-num{font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-5),#7fb5f2);border-radius:8px;padding:4px 9px;flex:0 0 auto}
.sent-src{font-size:11px;color:var(--ink-3);background:rgba(120,150,200,.12);border-radius:6px;padding:3px 8px;flex:0 0 auto}
.sent-preview{flex:1;min-width:200px;font-size:13.5px;color:var(--ink-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sent-body{display:none;padding:6px 20px 20px;border-top:1px dashed rgba(120,150,200,.3)}
.sent-item.open .sent-body{display:block}
.sent-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);margin:10px 0;align-items:center}
.lg{display:inline-flex;align-items:center;gap:5px}
.lg i{width:11px;height:11px;border-radius:4px;display:inline-block}
.sent-colorline{font-size:16.5px;line-height:2.1;letter-spacing:.3px;border-radius:12px;background:rgba(255,255,255,.6);padding:14px 18px;border:1px solid rgba(120,150,200,.2)}
.span-S{color:var(--c-sub);font-weight:700;background:rgba(74,144,226,.12);border-radius:6px;padding:1px 3px}
.span-V{color:var(--c-verb);font-weight:700;background:rgba(47,163,107,.12);border-radius:6px;padding:1px 3px}
.span-C{color:var(--c-clause);font-weight:700;background:rgba(224,160,46,.16);border-radius:6px;padding:1px 3px}
.span-O{color:var(--c-obj);font-weight:700;background:rgba(139,92,246,.1);border-radius:6px;padding:1px 3px}
.span-P{color:#d07fb0;font-weight:700;background:rgba(208,127,176,.12);border-radius:6px;padding:1px 3px}
.span-A{color:var(--c-adv);font-weight:700;background:rgba(14,165,165,.1);border-radius:6px;padding:1px 3px}
.span-ADJ{color:#e07b39;font-weight:600;background:rgba(224,123,57,.1);border-radius:6px;padding:1px 3px}
.span-PREP{color:var(--c-prep);font-weight:600;background:rgba(100,116,139,.1);border-radius:6px;padding:1px 3px}
.span-CONJ{color:#8a5a00;font-weight:600;background:rgba(255,209,102,.25);border-radius:6px;padding:1px 3px}
.span-X{color:var(--ink-3)}
.sent-trans{font-size:13px;color:var(--ink-2);line-height:1.9;background:rgba(255,247,224,.55);border-radius:10px;padding:10px 14px;margin-top:10px}
.sent-grammar{font-size:12.5px;color:var(--ink-2);line-height:1.8;margin-top:10px}
.sent-grammar b{color:var(--blue-6)}
.sent-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.stag{font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 10px}
.stag.t-time{background:rgba(14,165,165,.12);color:#0c7e7e}
.stag.t-clause{background:rgba(224,160,46,.16);color:#9a6d00}
.stag.t-nonfinite{background:rgba(139,92,246,.12);color:#6d3fd6}
.stag.t-inversion{background:rgba(224,87,79,.12);color:#b23b34}
.stag.t-emphasis{background:rgba(47,163,107,.12);color:#1c7a4e}
.stag.t-omission{background:rgba(74,144,226,.12);color:var(--blue-6)}

/* ---------- Writing builder ---------- */
.wb-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
@media(max-width:960px){.wb-wrap{grid-template-columns:1fr}}
.wb-palette{background:rgba(255,255,255,.82);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;max-height:74vh;overflow-y:auto}
.wb-cat{margin-bottom:12px}
.wb-cat h4{font-size:12px;margin:10px 2px 6px;color:var(--blue-6);display:flex;align-items:center;gap:6px}
.wb-block{
  background:rgba(255,255,255,.9);border:1px solid rgba(120,150,200,.3);border-radius:10px;padding:8px 11px;
  font-size:12.5px;color:var(--ink-2);cursor:grab;margin-bottom:6px;line-height:1.55;transition:.13s;display:flex;gap:8px;align-items:flex-start;
}
.wb-block:hover{border-color:var(--blue-4);transform:translateX(3px);box-shadow:0 4px 10px rgba(80,120,190,.15)}
.wb-block .drage{color:var(--ink-3);font-size:13px}
.wb-canvas{background:rgba(255,255,255,.85);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;min-height:480px;display:flex;flex-direction:column}
.wb-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.wb-blocks{display:flex;flex-direction:column;gap:10px;flex:1}
.wb-piece{
  background:rgba(255,255,255,.85);border:1px dashed rgba(120,150,200,.45);border-radius:12px;padding:10px 14px;
  position:relative;transition:.15s;
}
.wb-piece:hover{border-color:var(--blue-4);background:#fff}
.wb-piece .ptype{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--blue-5);margin-bottom:4px}
.wb-piece textarea{width:100%;border:none;outline:none;background:transparent;resize:vertical;font-size:13.5px;line-height:1.8;color:var(--ink);min-height:40px;font-family:inherit}
.wb-piece .pdel{position:absolute;top:6px;right:8px;border:none;background:transparent;color:var(--ink-3);font-size:14px;opacity:0;transition:.15s}
.wb-piece:hover .pdel{opacity:1}
.wb-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.word-count{font-size:11.5px;color:var(--ink-3);margin-left:auto;align-self:center}

/* ---------- Export ---------- */
.export-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ex-card{background:rgba(255,255,255,.82);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column;gap:10px;transition:.18s}
.ex-card:hover{transform:translateY(-2px)}
.ex-card h3{margin:0;font-size:15.5px;display:flex;align-items:center;gap:8px}
.ex-card p{font-size:12px;color:var(--ink-3);margin:0;line-height:1.6;flex:1}
.ex-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Print ---------- */
@media print{
  body{background:#fff}
  .sidebar,.topbar,.sel-toolbar,.toast,.no-print{display:none!important}
  .app{display:block;height:auto;padding:0}
  .main{padding:0}
  .content{overflow:visible;padding:0}
  .card,.sent-item,.stat-tile,.passage,.ex-card,.poly-card{box-shadow:none;break-inside:avoid;border:1px solid #dde6f2;background:#fff}
  .flip-card{transform:none!important;height:auto}
  .flip-face{position:static;transform:none!important;backface-visibility:visible;border:none;box-shadow:none;padding:12px 0}
  .flip-face.back{display:block;margin-top:8px}
  .flip-hint,.flip-actions{display:none!important}
}

/* ============================================================
   全规格增强：高亮标注 / 三栏工作台 / AI 诊断 / 同步
   ============================================================ */
/* 标注与高亮系统 */
.hl-amber{background:#fef3c7;color:#78350f;padding:0 5px;border-radius:4px}
.hl-rose{background:#ffe4e6;color:#881337;padding:0 5px;border-radius:4px}
.hl-emerald{background:#d1fae5;color:#064e3b;padding:0 5px;border-radius:4px}
.hl-blue{background:#dbeafe;color:#1e3a8a;padding:0 5px;border-radius:4px}

/* 三栏工作台 */
.ws3{display:flex;gap:12px;align-items:stretch;min-height:calc(100vh - 130px)}
.ws-col{position:relative;border-radius:var(--radius);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow);padding:14px;overflow-y:auto}
.ws-col.hidden{display:none}
.ws-left{width:200px;flex:0 0 200px}
.ws-mid{flex:1 1 auto;min-width:280px}
.ws-right{width:300px;flex:0 0 300px}
.ws-resizer{width:6px;cursor:col-resize;flex:0 0 6px;border-radius:4px;transition:.15s}
.ws-resizer:hover{background:rgba(91,156,245,.45)}
.ws-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:6px}
.ws-col-head b{font-size:13px}
.ws-col-head .hide-x{cursor:pointer;border:none;background:rgba(120,150,200,.12);color:var(--ink-3);border-radius:8px;width:22px;height:22px;font-size:12px}
.ws-col-head .hide-x:hover{background:rgba(224,87,79,.15);color:#b23b34}
.ws-restore{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;gap:6px}
.ws-restore button{border:1px solid rgba(91,156,245,.4);background:rgba(255,255,255,.9);border-radius:20px;padding:6px 13px;font-size:11.5px;color:var(--blue-6);box-shadow:var(--shadow)}

/* 题型导航 */
.ex-nav{display:flex;flex-direction:column;gap:3px}
.ex-nav-item{display:flex;align-items:center;gap:8px;border:none;background:transparent;border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ink-2);text-align:left;transition:.13s}
.ex-nav-item:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.ex-nav-item.active{background:linear-gradient(135deg,rgba(91,156,245,.16),rgba(255,209,102,.16));color:var(--blue-6);font-weight:700}
.ex-nav-item .ex-badge{margin-left:auto;font-size:9.5px;background:rgba(91,156,245,.14);color:var(--blue-6);border-radius:12px;padding:1px 7px}

/* 七选五 / 语法填空 / 听力 */
.seven-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.seven-opt{background:rgba(255,255,255,.85);border:1px dashed rgba(120,150,200,.5);border-radius:10px;padding:9px 12px;font-size:12.5px;cursor:pointer;transition:.13s;line-height:1.6}
.seven-opt:hover{border-color:var(--blue-4);background:var(--blue-1)}
.seven-opt.used{opacity:.45;background:rgba(120,150,200,.1);text-decoration:line-through}
.gram-blank{display:inline-block;min-width:64px;text-align:center;border-bottom:2px solid var(--blue-4);font-weight:800;color:var(--blue-6);padding:0 5px;border-radius:4px 4px 0 0;cursor:pointer}
.gram-blank.done{background:rgba(47,163,107,.12);border-bottom-color:#2fa36b;color:#1c7a4e}
.listening-script{background:rgba(234,244,255,.55);border-left:4px solid var(--blue-4);border-radius:9px;padding:12px 15px;font-size:13.5px;line-height:1.9;margin-bottom:12px}

/* 同义替换库（右栏） */
.syn-lib-item{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border:1px solid rgba(120,150,200,.25);border-radius:10px;padding:7px 10px;margin-bottom:7px;font-size:12.5px}
.syn-lib-item .w{font-weight:800;color:var(--blue-6);flex:0 0 auto}
.syn-lib-item .s{color:var(--ink-3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.syn-lib-item button{border:none;background:rgba(47,163,107,.12);color:#1c7a4e;border-radius:8px;padding:3px 8px;font-size:11px}

/* AI 诊断 */
.ai-panel{display:flex;flex-direction:column;gap:10px}
.ai-panel textarea{width:100%;border:1px solid rgba(120,150,200,.35);border-radius:10px;padding:9px 11px;outline:none;background:rgba(255,255,255,.85);font-size:12.5px;line-height:1.7;resize:vertical;min-height:90px}
.ai-panel textarea:focus{border-color:var(--blue-4);box-shadow:0 0 0 3px rgba(74,144,226,.12)}
.ai-result{font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.ai-result .k{font-weight:800;color:var(--blue-6);margin:8px 0 3px;display:block}
.ai-cached{font-size:10.5px;color:#1c7a4e;background:rgba(47,163,107,.12);border-radius:20px;padding:2px 9px;display:inline-block}
.ai-token{font-size:10.5px;color:var(--ink-3);margin-top:6px}

/* 同步设置 */
.sync-form{display:flex;flex-direction:column;gap:8px}
.sync-form label{font-size:11px;color:var(--ink-3);font-weight:700}
.sync-form input{border:1px solid rgba(120,150,200,.35);border-radius:9px;padding:7px 10px;outline:none;background:#fff;width:100%}
.sync-form input:focus{border-color:var(--blue-4)}
.sync-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}

/* ============================================================
   V2 优化：仪表盘数字 / 同义替换总表 / 单选完形 / 登录 / 拍照收录
   ============================================================ */
/* 4) 仪表盘数字调小 */
.stat-tile .st-num{font-size:20px}

.flip-word{font-size:18px;font-weight:800;color:var(--blue-6);display:inline-block;padding:2px 10px;border-radius:8px;background:rgba(91,156,245,.1)}

/* 同义替换总表 */
.syn-table-wrap{overflow-x:auto}
.syn-table{width:100%;border-collapse:collapse;font-size:12.5px;background:rgba(255,255,255,.8);border-radius:12px;overflow:hidden}
.syn-table th{background:linear-gradient(135deg,rgba(91,156,245,.16),rgba(255,209,102,.14));color:var(--blue-6);padding:9px 12px;text-align:left;font-size:12px;white-space:nowrap;position:sticky;top:0}
.syn-table td{padding:8px 12px;border-top:1px solid rgba(120,150,200,.14)}
.syn-table tr:hover td{background:rgba(91,156,245,.06)}
.freq-badge{font-size:10px;font-weight:800;border-radius:20px;padding:2px 9px;display:inline-block}
.freq-badge.high{background:rgba(224,87,79,.14);color:#b23b34}
.freq-badge.mid{background:rgba(224,160,46,.16);color:#9a6d00}
.freq-badge.low{background:rgba(100,116,139,.12);color:#64748b}
.rep-cell{color:var(--ink-2);line-height:1.6}

/* 单选完形 / 题目卡 */
.mcq-item{background:rgba(255,255,255,.82);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;margin-bottom:12px}
.mcq-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mcq-cat{font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-5),#7fb5f2);border-radius:20px;padding:3px 10px}
.mcq-cat.c2{background:linear-gradient(135deg,#2fa36b,#4cc98a)}
.mcq-cat.c3{background:linear-gradient(135deg,#f5b940,#ffd166);color:#6b4d00}
.mcq-cat.c4{background:linear-gradient(135deg,#8b5cf6,#b39df0)}
.mcq-q{font-size:14.5px;line-height:1.85;color:var(--ink)}
.mcq-q .blank{display:inline-block;min-width:70px;border-bottom:2px dashed var(--yellow-4);color:#c08a00;font-weight:800;text-align:center}
.mcq-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mcq-opt{border:1px solid rgba(120,150,200,.4);background:#fff;border-radius:9px;padding:6px 13px;font-size:13px;transition:.13s}
.mcq-opt:hover{border-color:var(--blue-4);background:var(--blue-1)}
.mcq-opt.correct{border-color:#2fa36b;background:rgba(47,163,107,.12);color:#1c7a4e;font-weight:700}
.mcq-opt.wrong{border-color:#e0574f;background:rgba(224,87,79,.1);color:#b23b34}
.mcq-note{display:none;font-size:12px;color:var(--ink-2);background:rgba(234,244,255,.55);border-radius:9px;padding:8px 12px;margin-top:10px;line-height:1.75}
.mcq-item.revealed .mcq-note{display:block}

/* 登录 / 弹窗 */
.login-mask{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:radial-gradient(800px 500px at 30% 20%,rgba(220,236,255,.9),transparent 60%),radial-gradient(700px 500px at 80% 90%,rgba(255,243,207,.9),transparent 60%),linear-gradient(135deg,#EBF3FA,#FBF9F5 50%,#FFFDF7)}
.login-mask.hidden{display:none}
.login-card{width:min(430px,92%);padding:30px 32px}
.login-label{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;margin:12px 0 4px}
.login-input{width:100%;border:1px solid rgba(120,150,200,.35);border-radius:10px;padding:10px 12px;outline:none;background:rgba(255,255,255,.85);font-size:14px}
.login-input:focus{border-color:var(--blue-4);box-shadow:0 0 0 3px rgba(74,144,226,.14)}
.modal-mask{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;background:rgba(31,42,58,.45);backdrop-filter:blur(4px)}
.modal-mask.show{display:flex}
.modal{width:min(680px,94%);max-height:88vh;overflow-y:auto;background:rgba(255,255,255,.97);border:1px solid var(--glass-border);border-radius:18px;box-shadow:0 24px 60px rgba(40,60,100,.3);padding:22px 26px}
.modal h3{margin:0 0 6px;font-size:17px}
.modal .m-sub{font-size:12px;color:var(--ink-3);margin-bottom:14px}
.modal label{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;margin:10px 0 4px}
.modal input[type=text],.modal input[type=number],.modal textarea,.modal select{width:100%;border:1px solid rgba(120,150,200,.35);border-radius:9px;padding:8px 10px;outline:none;background:#fff;font-size:13px}
.modal textarea{resize:vertical;line-height:1.7}
.modal input:focus,.modal textarea:focus{border-color:var(--blue-4)}
.capture-preview{max-width:100%;max-height:260px;border-radius:10px;border:1px solid rgba(120,150,200,.3);display:none;margin-top:8px}
.capture-preview.show{display:block}
.ocr-status{font-size:11.5px;color:var(--ink-3);margin-top:6px}

/* 用户卡片 */
.user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border:1px solid rgba(120,150,200,.3);border-radius:12px;padding:8px 10px;margin-bottom:8px}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue-4),var(--yellow-4));display:flex;align-items:center;justify-content:center;font-size:14px}

/* 阅读题型卡 */
.read-card{background:rgba(255,255,255,.82);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.read-card .rc-head{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;flex-wrap:wrap}
.read-card .rc-title{font-weight:800;font-size:14.5px;color:var(--blue-6)}
.read-card .rc-body{display:none;padding:4px 20px 18px;border-top:1px dashed rgba(120,150,200,.3)}
.read-card.open .rc-body{display:block}
.read-card .rc-passage{font-size:13.5px;line-height:1.9;color:var(--ink-2);background:rgba(255,255,255,.6);border-radius:10px;padding:12px 15px;margin:8px 0}
.type-tag{font-size:10.5px;font-weight:800;border-radius:20px;padding:3px 10px;display:inline-block}
.type-tag.t-vocab{background:rgba(139,92,246,.12);color:#6d3fd6}
.type-tag.t-grammar{background:rgba(14,165,165,.12);color:#0c7e7e}
.type-tag.t-logic{background:rgba(224,87,79,.12);color:#b23b34}
.type-tag.t-detail{background:rgba(74,144,226,.12);color:var(--blue-6)}
.type-tag.t-main{background:rgba(224,160,46,.16);color:#9a6d00}
.type-tag.t-infer{background:rgba(47,163,107,.12);color:#1c7a4e}

/* 套题选择条 */
.set-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.set-chip{min-width:44px;text-align:center;border:1px solid rgba(120,150,200,.35);background:rgba(255,255,255,.8);border-radius:10px;padding:7px 4px;font-size:12px;font-weight:700;color:var(--ink-2);transition:.13s}
.set-chip:hover{border-color:var(--blue-4)}
.set-chip.on{background:linear-gradient(135deg,rgba(91,156,245,.2),rgba(255,209,102,.2));border-color:rgba(91,156,245,.5);color:var(--blue-6)}

/* ============================================================
   响应式：手机（重点）→ 平板 → 电脑 全端适配
   ============================================================ */
.menu-btn{display:none;border:none;background:rgba(255,255,255,.8);border:1px solid rgba(120,150,200,.3);border-radius:10px;width:38px;height:38px;font-size:18px;color:var(--ink);flex:0 0 auto}
.sb-backdrop{position:fixed;inset:0;background:rgba(20,32,50,.45);z-index:690;backdrop-filter:blur(2px)}
html,body{overflow-x:hidden}

/* ---------- 平板 ---------- */
@media(max-width:1100px){
  .sidebar{width:200px;flex:0 0 200px}
  .ws-right{width:270px;flex:0 0 270px}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  /* 三栏工作台 → 上下堆叠 */
  .ws3{flex-direction:column}
  .ws-resizer{display:none}
  .ws-left,.ws-right{width:100%!important;flex:1 1 auto!important;max-height:none}
  .ws-right{order:3}
  .gtree-wrap{grid-template-columns:1fr}
  .wb-wrap{grid-template-columns:1fr}
}

/* ---------- 手机（重点） ---------- */
@media(max-width:768px){
  .app{display:block;padding:8px;height:auto;min-height:100vh}
  .main{display:flex;flex-direction:column;min-width:0}

  /* 手机端：与电脑同一套导航内容，改用底部标签栏 */
  .sidebar{display:none}
  .sb-backdrop.show{display:block}
  .mob-bar{display:flex}
  .mob-sheet{display:block}

  .topbar{padding:8px 12px;margin-bottom:10px;border-radius:12px;position:sticky;top:8px;z-index:600}
  .top-actions{gap:6px}
  .top-actions .save-indicator{display:none}
  .search-wrap input{width:150px}
  .content{padding:0 2px 60px}

  /* 标题与卡片 */
  .section-head{margin-bottom:10px}
  .section-head h2{font-size:18px}
  .section-head p{font-size:11.5px}
  .card{padding:14px 14px;border-radius:14px}
  .stat-tile{padding:12px 14px}
  .stat-tile .st-num{font-size:18px}
  .grid.gap-14{gap:10px}

  /* 功能栏横向滑动 */
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .chips .chip,.chips .btn{flex:0 0 auto;white-space:nowrap}
  .set-strip{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .set-chip{min-width:40px}

  /* 翻卡适配 */
  .flip-card{width:100%;height:min(400px,62vh)}
  .flip-face{padding:20px 18px}
  .flip-q{font-size:17px}
  .word-big{font-size:20px}
  .flip-actions .study-btn{padding:11px 8px;font-size:12.5px;min-height:44px}
  .mem-row{flex-wrap:wrap;gap:8px}

  /* 阅读/题目 */
  .passage{padding:16px 16px;font-size:14px}
  .rc-passage{font-size:12.5px}
  .mcq-q{font-size:13.5px}
  .mcq-opt{padding:8px 11px;min-height:40px;flex:1 1 40%}
  .opt{padding:8px 11px;min-height:40px}

  /* 表格横向滚动 */
  .syn-table th,.syn-table td{padding:7px 9px;font-size:11.5px;white-space:nowrap}

  /* 弹窗/登录 */
  .modal{width:96%;padding:16px 16px}
  .login-card{width:94%;padding:22px 18px}
  .login-card h2{font-size:18px}
  .capture-preview{max-height:200px}

  /* 写作 */
  .wb-palette{max-height:40vh}
  .wb-block{font-size:12px}

  /* 统计区 1 列 */
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .deck-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}

  /* 长难句 */
  .sent-preview{font-size:12px}
  .sent-colorline{font-size:14px;line-height:1.95;padding:10px 12px}

  /* 熟词生义 */
  .poly-means{grid-template-columns:1fr}
  .seven-opts{grid-template-columns:1fr}
}
@media(max-width:420px){
  .stat-tile .st-num{font-size:16px}
  .flip-tag{font-size:10px}
  .syn-lib-item{font-size:11.5px}
}
/* 桌面隐藏的移动辅助 */
@media(min-width:769px){
  .sb-backdrop{display:none!important}
}

/* ---------- 通用底部导航（仅手机显示） ---------- */
.mob-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:800;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(120,150,200,.28);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 24px rgba(40,60,100,.12)}
.mob-tab{display:flex;flex-direction:column;align-items:center;gap:1px;border:none;background:none;
  font-size:10px;color:var(--ink-3);padding:3px 4px;flex:1;min-width:0}
.mob-tab .ic{font-size:19px;line-height:1}
.mob-tab.on{color:var(--blue-6);font-weight:700}
.mob-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:850;
  background:rgba(255,255,255,.98);border-radius:18px 18px 0 0;padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(20,40,80,.28);transform:translateY(105%);transition:transform .25s ease}
.mob-sheet.open{transform:none}
.mob-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mob-sheet-item{display:flex;align-items:center;gap:8px;border:1px solid rgba(120,150,200,.32);background:#fff;border-radius:12px;padding:13px 12px;font-size:13px;color:var(--ink);min-height:46px}
.mob-sheet-item:active{background:var(--blue-1)}
@media(min-width:769px){
  .mob-bar,.mob-sheet{display:none!important}
}
@media(max-width:768px){
  .content{padding-bottom:84px}
}

/* 修复：手机端底部导航显示（放在基础 display:none 之后才生效） */
@media(max-width:768px){
  .mob-bar{display:flex}
  .mob-sheet{display:block}
}

/* ============================================================
   手机端精修（仅 ≤768px 生效，不影响电脑/平板）
   ============================================================ */
@media(max-width:768px){
  /* 点按反馈 */
  button{-webkit-tap-highlight-color:transparent}
  .content{-webkit-overflow-scrolling:touch;padding:0 12px 92px}

  /* 顶部栏 */
  .topbar{padding:9px 14px;border-radius:16px;box-shadow:0 6px 20px rgba(80,120,190,.12)}
  .crumb{font-size:14.5px;font-weight:800}

  /* 区块标题 */
  .section-head{margin:2px 2px 12px}
  .section-head h2{font-size:19px;letter-spacing:.2px}
  .section-head p{font-size:11.5px;color:var(--ink-3)}

  /* 卡片与圆角统一 */
  .card,.stat-tile,.read-card,.mcq-item,.ex-card{border-radius:16px}
  .card{padding:16px}
  .stat-tile{padding:12px 14px}
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .grid.cols-2{grid-template-columns:1fr}
  .stat-tile .st-ico{font-size:20px}
  .stat-tile .st-num{font-size:19px}
  .stat-tile .st-label{font-size:11px}

  /* 按钮/标签尺寸 */
  .chip{padding:7px 14px;font-size:12.5px;border-radius:18px}
  .btn{padding:10px 16px;font-size:13px}
  .btn.sm{padding:7px 12px}

  /* 底部导航精致化 */
  .mob-bar{padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .mob-tab{font-size:10px}
  .mob-tab .ic{font-size:20px;transition:transform .15s}
  .mob-tab.on{color:var(--blue-6)}
  .mob-tab.on .ic{transform:translateY(-1px)}
  .mob-tab{position:relative}
  .mob-tab.on::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
    width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--blue-4),var(--yellow-4))}

  /* 横向滑动条隐藏滚动条 */
  .chips::-webkit-scrollbar,.set-strip::-webkit-scrollbar,.syn-table-wrap::-webkit-scrollbar{display:none}
  .chips,.set-strip,.syn-table-wrap{scrollbar-width:none}

  /* 翻卡 */
  .flip-card{height:min(440px,64vh);border-radius:22px}
  .flip-face{padding:24px 20px;border-radius:22px}
  .flip-q{font-size:17px;line-height:1.9}
  .flip-hint{font-size:11px}

  /* 题目卡 */
  .mcq-item{padding:15px 16px;margin-bottom:11px}
  .mcq-q{font-size:14px;line-height:1.85}
  .mcq-opt{padding:9px 12px;min-height:42px}
  .qitem{padding:12px 14px}
  .opt{padding:9px 12px;min-height:42px}

  /* 阅读 */
  .read-card .rc-head{padding:12px 16px}
  .read-card .rc-title{font-size:14px}
  .read-card .rc-body{padding:4px 16px 16px}
  .rc-passage{padding:12px 14px;font-size:13px}

  /* 长难句 */
  .sent-item{border-radius:16px}
  .sent-head{padding:12px 14px}
  .sent-colorline{padding:12px 14px;font-size:15px;line-height:2}
  .sent-trans,.sent-grammar{font-size:12.5px}

  /* 弹窗/登录/面板 */
  .modal{border-radius:20px;padding:18px 16px}
  .login-card{border-radius:20px}
  .mob-sheet{border-radius:22px 22px 0 0}
  .mob-sheet-item{padding:14px 12px}

  /* 完形/语法填空 空格更大 */
  .gram-blank{min-width:72px;font-size:14px}
  .seven-blk{min-width:52px}

  /* 状态条与徽标 */
  .badge{min-width:18px}
  .deck-toolbar{font-size:12.5px}
}
/* 超小屏再收紧 */
@media(max-width:420px){
  .stat-tile .st-num{font-size:17px}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);gap:9px}
  .flip-card{height:min(430px,62vh)}
  .card{padding:14px}
  .section-head h2{font-size:18px}
}

/* ============================================================
   仪表盘：板块可点击直达 + 手机端学习中心（同义/熟词）
   ============================================================ */
.stat-tile[data-go]{cursor:pointer;transition:transform .18s,box-shadow .18s}
.stat-tile[data-go]:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(80,120,190,.2)}
.stat-tile[data-go]:active{transform:scale(.97)}
.learn-hero{display:none}
@media(max-width:768px){
  .learn-hero{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
  .mob-hide{display:none!important}
  .hero-card{display:flex;align-items:center;gap:12px;cursor:pointer;
    background:linear-gradient(150deg,rgba(255,255,255,.94),rgba(234,244,255,.9) 55%,rgba(255,247,224,.92));
    border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow);padding:15px 16px}
  .hero-card:active{transform:scale(.98)}
  .hero-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;
    background:linear-gradient(135deg,rgba(91,156,245,.18),rgba(255,209,102,.18));flex:0 0 auto}
  .hero-tx{flex:1;min-width:0}
  .hero-tx b{display:block;font-size:15px;color:var(--ink)}
  .hero-tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
  .hero-btn{background:linear-gradient(135deg,var(--blue-5),var(--blue-4));color:#fff;font-size:12px;font-weight:700;border-radius:20px;padding:9px 14px;flex:0 0 auto}
}

/* 手机端品牌栏（首页顶部，仅手机显示） */
.mob-brand{display:none}
@media(max-width:768px){
  .mob-brand{display:flex;align-items:center;gap:10px;margin:2px 2px 14px}
  .mob-brand .brand-logo{width:44px;height:44px;border-radius:14px;font-size:16px}
  .mob-brand b{display:block;font-size:17px;letter-spacing:.3px;color:var(--ink)}
  .mob-brand span{display:block;font-size:10.5px;color:var(--ink-3)}
}
@media(min-width:769px){
  .mob-brand{display:none!important}
}

/* 拍照/相册按钮 */
.cap-btn{border:1px solid rgba(91,156,245,.45);background:linear-gradient(135deg,rgba(91,156,245,.14),rgba(255,209,102,.14));color:var(--blue-6);border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:700}

/* 专项强化卡片（精致化） */
.sp-grid{gap:12px}
.sp-card{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;transition:transform .18s,box-shadow .18s}
.sp-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(80,120,190,.2)}
.sp-card:active{transform:scale(.98)}
.sp-ico{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(91,156,245,.18),rgba(255,209,102,.18));box-shadow:inset 0 0 0 1px rgba(91,156,245,.2)}
@media(max-width:768px){
  .sp-grid{grid-template-columns:1fr!important}
  .sp-card{padding:15px 16px}
}

/* 手机端精简顶部：隐藏账号按钮 / 模块大标题 / 全局搜索 */
@media(max-width:768px){
  #userBtn{display:none!important}
  .section-head h2,.section-head p{display:none}
  .search-wrap{display:none!important}
  /* 同义/熟词翻卡更短（宽度不变） */
  .flip-card{height:min(330px,50vh)!important}
  .flip-face{padding:18px 16px!important}
}

/* 手机端模块标题 + 搜索栏（搜索在标题最右侧） */
.mob-mod-head{display:none}
@media(max-width:768px){
  .mob-mod-head{display:flex;align-items:center;gap:8px;margin:2px 2px 10px}
  .mob-mod-title{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap}
  .mob-mod-search{margin-left:auto;width:150px;border:1px solid rgba(120,150,200,.35);border-radius:18px;padding:7px 12px;outline:none;background:rgba(255,255,255,.92);font-size:12.5px}
  .mob-mod-search:focus{border-color:var(--blue-4);box-shadow:0 0 0 3px rgba(74,144,226,.12)}
}

/* 手机端：去掉每页顶部的栏目名称（顶栏隐藏，模块标题不显示） */
@media(max-width:768px){
  .topbar{display:none!important}
  .mob-mod-head{margin:0 2px 10px}
  .mob-mod-search{margin-left:auto;width:170px}
  .content{padding-top:6px}
}

/* 手机端页面左上角栏目标签 */
.mob-page-label{display:none}
@media(max-width:768px){
  .mob-page-label{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:2px 2px 10px}
}

/* 手机端栏目标签：蓝白黄渐变字 */
.mob-mod-title,.mob-page-label{
  background:linear-gradient(120deg,#4a90e2 0%,#8fc0f5 32%,#eef6ff 50%,#ffe29a 72%,#ffd166 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:900;letter-spacing:.5px;
}
