/* =========================================================
   星卡学堂 · 样式表
   设计尺度：字体 12/13/14/15/17/20/26/32，间距 4 的倍数，
   圆角 10/14/16/20，阴影三档，动效统一 150–260ms。
   ========================================================= */

/* ===== 设计令牌 ===== */
:root{
  /* 中性色 */
  --bg:#f5f6fa;
  --panel:#ffffff;
  --panel-2:#fafbff;
  --line:#e8eaf2;
  --line-strong:#d9dded;
  --ink:#111528;          /* 正文 */
  --ink-2:#3c4460;         /* 次级文字 */
  --muted:#626b84;         /* 辅助文字：白底 5.3:1、浅灰底 4.9:1，都过 WCAG AA */

  /* 品牌色 */
  --brand:#4c5bd4;
  --brand-dark:#3f4cbe;
  --brand-2:#7a5af5;
  --brand-soft:#eef0fe;
  --brand-line:#dfe3ff;

  /* 语义色 */
  --ok:#0f7a4d;
  --ok-bg:#e9f8f0;
  --ok-line:#c4ecd9;
  --bad:#b42318;
  --bad-bg:#fdecea;
  --bad-line:#f8d2ce;
  --gold-1:#ffd47d;
  --gold-2:#eda021;
  --gold-ink:#3a2606;

  /* 卡牌 */
  --card:#6a74e8;
  --card-soft:#e6e9ff;

  /* 圆角 */
  --r-s:10px;
  --r:14px;
  --r-l:16px;
  --r-xl:20px;

  /* 阴影 */
  --sh-1:0 1px 2px rgba(17,21,40,.05);
  --sh-2:0 1px 2px rgba(17,21,40,.04), 0 10px 24px -18px rgba(17,21,40,.4);
  --sh-3:0 1px 3px rgba(17,21,40,.06), 0 24px 48px -28px rgba(17,21,40,.45);
  --sh-modal:0 32px 80px -32px rgba(10,14,30,.5);

  /* 动效 */
  --t-fast:150ms cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -280px, #eef0ff 0%, transparent 70%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  min-height:100vh;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,textarea,select{font-family:inherit; font-size:14px; color:var(--ink)}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.3}
p{margin:0}
img{max-width:100%}
::selection{background:#dfe3ff}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px}

/* ===== 顶栏 ===== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  height:60px; padding:0 20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; flex:none}
.brand-mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand),var(--brand-2));
  color:#fff; font-size:14px; box-shadow:0 6px 14px -6px var(--brand);
}
.brand-name{font-weight:800; font-size:15.5px; letter-spacing:-.02em}
.nav{
  display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav-item{
  padding:7px 14px; border-radius:999px; font-size:14px; font-weight:650;
  color:var(--ink-2); white-space:nowrap; transition:background var(--t-fast), color var(--t-fast);
}
.nav-item:hover{background:#eef0f8; color:var(--ink)}
.nav-item.on{background:var(--brand-soft); color:var(--brand)}
.wallet{display:flex; align-items:center; gap:8px; flex:none}

/* ===== 通用块 ===== */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  height:32px; padding:0 12px; border-radius:999px;
  font-size:13px; font-weight:700; white-space:nowrap;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
}
.chip b{font-variant-numeric:tabular-nums}
.chip-unlock{color:var(--brand); background:var(--brand-soft); border-color:var(--brand-line)}
.chip-ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-line)}
.chip-bad{color:var(--bad); background:var(--bad-bg); border-color:var(--bad-line)}
.chip.flash{animation:chipPop .5s ease}
@keyframes chipPop{40%{transform:scale(1.14)}}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-2)}
.pad{padding:20px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:13px; line-height:1.65}
.mono{font-variant-numeric:tabular-nums}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:42px; padding:0 18px; border-radius:12px;
  font-size:14px; font-weight:700; white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 22px -12px var(--brand)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-gold{background:linear-gradient(140deg,var(--gold-1),var(--gold-2)); color:var(--gold-ink); box-shadow:0 10px 22px -12px var(--gold-2)}
.btn-gold:hover{filter:brightness(1.04)}
.btn-soft{background:var(--brand-soft); color:var(--brand)}
.btn-soft:hover{background:#e2e6fd}
.btn-ghost{background:#fff; border-color:var(--line-strong); color:var(--ink-2)}
.btn-ghost:hover{background:#f6f7fc; border-color:#c9cfe4}
.btn-danger{background:#fff; border-color:var(--bad-line); color:var(--bad)}
.btn-danger:hover{background:var(--bad-bg)}
.btn-sm{height:32px; padding:0 12px; font-size:13px; border-radius:10px}
.btn-lg{height:48px; padding:0 24px; font-size:15px; border-radius:14px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; filter:none}

/* ===== 页面骨架 ===== */
#app{max-width:1100px; margin:0 auto; padding:28px 22px 96px}
.view-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.view-title{font-size:26px}
.view-sub{color:var(--muted); font-size:14px; margin-top:6px; max-width:60ch}

/* ===== 学习集卡片 ===== */
.grid-sets{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.setcard{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
  padding:18px; box-shadow:var(--sh-2);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.setcard:hover{transform:translateY(-2px); border-color:var(--brand-line); box-shadow:var(--sh-3)}
.setcard-top{display:flex; align-items:center; gap:11px}
.setcard-icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-size:19px; background:var(--brand-soft);
}
.setcard-title{font-size:16px; font-weight:800}
.setcard-desc{color:var(--muted); font-size:13px; line-height:1.6; min-height:42px}
.bars{display:flex; flex-direction:column; gap:8px}
.bar-row{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted)}
.bar{flex:1; height:6px; border-radius:999px; background:#eef0f7; overflow:hidden}
.bar > i{display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar-collect > i{background:linear-gradient(90deg,#93a0f8,var(--brand))}
.setcard-actions{display:flex; gap:8px; padding-top:12px; border-top:1px solid var(--line)}

/* ===== 抽卡页 ===== */
.stage{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 0%, #2a2350 0%, #171436 55%, #0b0918 100%);
  min-height:420px; display:grid; place-items:center; padding:28px;
  border:1px solid #221d42;
}
.stage:after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(56% 40% at 50% 64%, rgba(122,90,245,.34), transparent 72%);
}
.stage-wide{min-height:min(560px,70vh)}
.stage-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:26px}
.orb{
  width:148px; height:148px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #fff, #cdb9ff 18%, #7a5af5 56%, #2a1d63 100%);
  box-shadow:0 0 64px 6px rgba(122,90,245,.5), inset 0 0 40px rgba(255,255,255,.32);
  animation:orbFloat 5s ease-in-out infinite;
}
@keyframes orbFloat{50%{transform:translateY(7px) scale(1.035)}}
.stage-copy{position:relative; z-index:2; text-align:center; color:#eae7ff}
.stage-copy h2{font-size:22px; margin-bottom:8px}
.stage-copy p{color:#a9a3d6; font-size:13px}
.pool-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:640px}
.pool-chip{
  height:34px; padding:0 14px; border-radius:999px; font-size:13px; font-weight:650;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#cdc7f2;
  transition:background var(--t-fast), color var(--t-fast);
}
.pool-chip:hover{background:rgba(255,255,255,.18)}
.pool-chip.on{background:#fff; color:#251e56; border-color:#fff}

/* ===== 可收集卡牌 ===== */
.card{
  position:relative; padding:2px; border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(160deg,var(--card-soft),#f2f4ff 55%,var(--card-soft));
  box-shadow:var(--sh-2);
}
.card-in{
  border-radius:14px; background:#fff; height:100%;
  display:flex; flex-direction:column; gap:8px; padding:12px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:16px}
.card-art{
  border-radius:10px; height:72px; display:grid; place-items:center; font-size:29px;
  background:linear-gradient(150deg,#f3f5ff,#fafbff);
  border:1px solid #eceffb;
}
.card-img{
  width:100%; max-height:170px; object-fit:contain; display:block;
  border-radius:10px; border:1px solid var(--line); background:#fff;
}
.card-img.big{
  width:auto; max-width:100%; max-height:min(38vh,320px);
  margin:0 auto; padding:6px; border-radius:12px; box-shadow:var(--sh-1);
}
.card-term{font-size:14px; font-weight:800; line-height:1.45; word-break:break-word}
.card-def{font-size:12.5px; color:var(--muted); line-height:1.6; flex:1; word-break:break-word}
.card-foot{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--muted)}
.card-dupe{position:absolute; top:8px; right:8px; z-index:3; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; background:rgba(17,21,40,.78); color:#fff}
.card.locked{background:linear-gradient(160deg,#eef0f6,#f6f7fb)}
.card.locked .card-in{background:#fcfcfe}
.card.locked .card-art{filter:grayscale(1) opacity(.4); font-size:0}
.card.locked .card-art::after{content:'未解锁'; font-size:12px; font-weight:700; color:#b6bbc9}
.card.locked .card-term,.card.locked .card-def{color:#c2c7d6}

/* ===== 卡册 ===== */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.filter{
  height:34px; padding:0 13px; border-radius:999px; font-size:13px; font-weight:650;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink-2);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter:hover{border-color:#c3cae3}
.filter.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.grid-dex{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px}

/* ===== 学习集详情 ===== */
.modes{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.mode{
  text-align:left; padding:16px; border-radius:var(--r); border:1px solid var(--line);
  background:#fff; box-shadow:var(--sh-2);
  transition:transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.mode:hover{transform:translateY(-2px); border-color:var(--brand-line); box-shadow:var(--sh-3)}
.mode-ico{font-size:22px; line-height:1; margin-bottom:10px}
.mode-name{font-weight:800; font-size:15px; margin-bottom:4px}
.mode-desc{font-size:12.5px; color:var(--muted); line-height:1.6}
.card-list{display:flex; flex-direction:column}
.card-line{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line)}
.card-line:last-child{border-bottom:0}
.card-line .t{font-weight:650; font-size:14px; flex:1; min-width:0}
.card-line .d{color:var(--muted); font-size:13px; flex:1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ===== 遮罩层 ===== */
.overlay{position:fixed; inset:0; z-index:100; display:flex; flex-direction:column}
.overlay[hidden]{display:none}
.overlay-dark{background:radial-gradient(120% 90% at 50% 44%, #241c4e 0%, #120f2b 46%, #07060f 100%); color:#fff}
.overlay-light{background:var(--bg); color:var(--ink); overflow:auto}
#fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.draw-ui{position:relative; z-index:3; display:flex; flex-direction:column; height:100%; padding:20px; overflow:auto}
.draw-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.draw-title{font-size:15px; font-weight:700; color:#cdc7f2}
.reveal-area{flex:1; display:grid; place-items:center; padding:10px}
.reveal-single{display:grid; place-items:center}

/* 翻牌电影感 */
.rcard{position:relative; perspective:900px; opacity:0; transform:translateY(24px) scale(.92)}
.rcard.in{animation:rcardIn .5s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes rcardIn{to{opacity:1; transform:none}}
.rcard-inner{position:relative; width:100%; aspect-ratio:3/4; transform-style:preserve-3d; transition:transform .68s cubic-bezier(.4,.1,.2,1)}
.rcard.flip .rcard-inner{transform:rotateY(180deg)}
.rcard-back,.rcard-front{position:absolute; inset:0; border-radius:var(--r-l); backface-visibility:hidden; display:flex; flex-direction:column; overflow:hidden}
.rcard-back{
  background:linear-gradient(150deg,#3a2f6d,#1c1740); border:1px solid rgba(255,255,255,.16);
  align-items:center; justify-content:center; font-size:34px; color:rgba(255,255,255,.5);
}
.rcard-front{
  --rc:var(--card);
  transform:rotateY(180deg); padding:3px;
  background:linear-gradient(160deg,var(--rc),#c9cfff 60%,var(--rc));
  box-shadow:0 20px 54px -20px var(--rc);
}
.rcard-body{border-radius:14px; background:#fff; flex:1; display:flex; flex-direction:column; gap:8px; padding:12px; color:var(--ink)}
.rcard.is-new .rcard-body::before{
  content:'NEW'; position:absolute; top:10px; right:10px; z-index:4;
  background:linear-gradient(140deg,var(--gold-1),var(--gold-2)); color:var(--gold-ink);
  font-size:10px; font-weight:900; padding:3px 8px; border-radius:999px; letter-spacing:.06em;
}
.rcard.spark::after{
  content:''; position:absolute; inset:-40%; z-index:5; pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  animation:sheen 1.1s ease .45s both;
}
@keyframes sheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
.reveal-single .rcard{width:min(300px,70vw)}

/* ===== 学习会话 ===== */
.study-ui{max-width:820px; margin:0 auto; width:100%; padding:18px 20px 64px; display:flex; flex-direction:column; gap:20px; min-height:100%}
.study-top{display:flex; align-items:center; gap:14px}
.study-progress{flex:1; height:8px; border-radius:999px; background:#e7eaf4; overflow:hidden}
.study-progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .35s}
.study-body{flex:1; display:flex; flex-direction:column; justify-content:center; gap:18px}
.quiz-card{
  background:#fff; border-radius:var(--r-xl); border:1px solid var(--line); box-shadow:var(--sh-2);
  padding:36px 28px; text-align:center; min-height:200px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.quiz-q{font-size:clamp(20px,4vw,32px); font-weight:800; line-height:1.35; word-break:break-word}
.quiz-q.q-m{font-size:clamp(18px,2.9vw,24px)}
.quiz-q.q-s{font-size:clamp(16px,2.3vw,19px); line-height:1.6}
.quiz-q.q-xs{font-size:15px; line-height:1.75; font-weight:700}
.quiz-card.wide{justify-content:flex-start; text-align:left; max-height:58vh; overflow:auto}
.quiz-hint{color:var(--muted); font-size:13px}
.opts{display:grid; gap:10px}
.opt{
  min-height:52px; text-align:left; padding:14px 16px; border-radius:var(--r);
  border:1.5px solid var(--line-strong); background:#fff; font-size:15px; font-weight:650;
  display:flex; align-items:center; gap:12px; box-shadow:var(--sh-1);
  transition:border-color var(--t-fast), background var(--t-fast);
}
.opt:hover{border-color:#b9c2f0; background:#fafbff}
.opt-key{width:26px; height:26px; border-radius:8px; background:#f0f2fa; color:var(--muted); display:grid; place-items:center; font-size:12px; font-weight:800; flex:none}
.opt.right{border-color:var(--ok-line); background:var(--ok-bg)}
.opt.right .opt-key{background:var(--ok); color:#fff}
.opt.wrong{border-color:var(--bad-line); background:var(--bad-bg)}
.opt.wrong .opt-key{background:var(--bad); color:#fff}
.opt:disabled{cursor:default}
.flashcard{
  position:relative; min-height:320px; padding:36px; border-radius:var(--r-xl);
  border:1px solid var(--line); background:#fff; box-shadow:var(--sh-2);
  display:grid; place-items:center; cursor:pointer; text-align:center; gap:14px;
}
.flash-term{font-size:clamp(22px,4.4vw,34px); font-weight:800; line-height:1.35}
.flash-term.q-m{font-size:clamp(18px,3.1vw,26px)}
.flash-term.q-s{font-size:19px; line-height:1.6}
.flash-term.q-xs{font-size:15.5px; line-height:1.75; text-align:left; max-height:52vh; overflow:auto; font-weight:700}
.flip-note{position:absolute; bottom:16px; font-size:12px; color:var(--muted)}
.type-box{display:flex; gap:10px}
.type-box input{
  flex:1; height:52px; padding:0 16px; border-radius:var(--r); border:1.5px solid var(--line-strong);
  font-size:16px; outline:none; background:#fff; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.type-box input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.match-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.match-col{display:flex; flex-direction:column; gap:10px}
.mtile{
  min-height:56px; padding:15px 14px; border-radius:13px; border:1.5px solid var(--line-strong);
  background:#fff; font-size:14px; font-weight:650; text-align:left; display:flex; align-items:center;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.mtile:hover{border-color:#b9c2f0}
.mtile.sel{border-color:var(--brand); background:var(--brand-soft)}
.mtile.done{opacity:.35; border-style:dashed; pointer-events:none}
.mtile.bad{border-color:var(--bad); background:var(--bad-bg); animation:shake .32s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.feedback{border-radius:var(--r); padding:14px 16px; font-size:14px; line-height:1.7}
.feedback.ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.feedback.bad{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line)}
.summary{display:flex; flex-direction:column; align-items:center; gap:16px; padding:20px 0; text-align:center}
.summary-score{font-size:56px; font-weight:900; letter-spacing:-.03em; line-height:1}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px}
.stat b{display:block; font-size:22px; font-variant-numeric:tabular-nums; line-height:1.3}
.stat span{font-size:12px; color:var(--muted)}
.big-num{font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.big{font-weight:800}

/* ===== 导入页 ===== */
.dropzone{
  border:2px dashed var(--brand-line); border-radius:var(--r-xl); background:var(--panel-2);
  padding:42px 20px; text-align:center; transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.dropzone.over{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 6px var(--brand-soft)}
.drop-ico{font-size:30px; line-height:1; color:var(--brand); margin-bottom:12px}
.drop-title{font-weight:800; font-size:17px; margin-bottom:6px}
.src{
  width:100%; min-height:180px; padding:14px; border-radius:var(--r);
  border:1.5px solid var(--line-strong); font-size:13.5px; line-height:1.75;
  resize:vertical; outline:none; background:#fff; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.src:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.ai-box{
  border:1px solid var(--line); border-radius:var(--r); padding:14px; background:var(--panel-2);
  display:flex; flex-direction:column; gap:10px;
}
.ai-box input,.ai-box select{
  height:38px; padding:0 11px; border-radius:10px; border:1.5px solid var(--line-strong);
  background:#fff; outline:none; font-size:13px; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.ai-box input:focus,.ai-box select:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.attach-list{display:flex; flex-direction:column; gap:8px}
.attach-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
}
.attach-ico{font-size:16px; line-height:1}
.attach-name{font-weight:700; font-size:13.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gen-list{display:flex; flex-direction:column; max-height:380px; overflow:auto}
.gen-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.gen-row:last-child{border-bottom:0}
.gen-term{font-weight:700; font-size:13.5px; flex:1; min-width:0; word-break:break-word}
.gen-def{color:var(--muted); font-size:13px; flex:1.4; min-width:0; word-break:break-word}
.gen-img{width:60px; height:60px; flex:none; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#fff}
.gen-img.err{display:grid; place-items:center; background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); font-size:12px; font-weight:800}

/* ===== 弹窗 ===== */
.modal-mask{
  position:fixed; inset:0; z-index:120; background:rgba(12,15,30,.5);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; overflow:auto;
}
.modal{background:#fff; border-radius:var(--r-xl); width:min(680px,100%); max-height:88vh; overflow:auto; box-shadow:var(--sh-modal)}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-body{padding:20px; display:flex; flex-direction:column; gap:16px}
.modal-foot{
  padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center;
  justify-content:flex-end; position:sticky; bottom:0; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
}
.x-btn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:17px; color:var(--muted); transition:background var(--t-fast)}
.x-btn:hover{background:#f2f3f9; color:var(--ink)}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:13px; font-weight:700; color:var(--ink-2)}
.field input,.field textarea,.field select{
  padding:11px 13px; border-radius:var(--r-s); border:1.5px solid var(--line-strong);
  background:#fff; outline:none; width:100%; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft)}
.field textarea{resize:vertical; min-height:80px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.65}
.field-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.editor-row{display:grid; grid-template-columns:1.2fr 1.6fr 36px; gap:8px; align-items:center}
.editor-row input,.editor-row select,.editor-row .e-term,.editor-row .e-def{
  padding:9px 11px; border-radius:var(--r-s); border:1.5px solid var(--line-strong);
  outline:none; width:100%; font-size:13px;
}
.editor-row input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.editor-row .x{justify-self:end}

/* ===== 空状态 / 提示 ===== */
.empty{text-align:center; padding:56px 20px; color:var(--muted)}
.empty-ico{font-size:38px; line-height:1; margin-bottom:12px}
.toasts{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{
  max-width:min(420px,90vw); background:rgba(17,21,40,.96); color:#fff;
  padding:12px 18px; border-radius:12px; font-size:13.5px; font-weight:650; line-height:1.6;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6);
  animation:toastIn .26s cubic-bezier(.2,.9,.25,1);
}
.toast.good{background:linear-gradient(140deg,#15875a,#0c6b46)}
.toast.warn{background:linear-gradient(140deg,#d98218,#a85f0a)}
@keyframes toastIn{from{opacity:0; transform:translateY(14px)}}

/* ===== 移动端 ===== */
@media (max-width:720px){
  .topbar{height:auto; flex-wrap:wrap; gap:10px; padding:10px 14px}
  .nav{order:3; width:100%; margin:0; overflow-x:auto}
  .nav-item{padding:7px 12px; font-size:13.5px}
  .wallet{order:2; margin-left:auto}
  #app{padding:20px 14px 80px}
  .view-title{font-size:22px}
  .grid-sets{grid-template-columns:1fr}
  .grid-dex{grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:11px}
  .quiz-card{padding:26px 18px}
  .flashcard{padding:26px 18px; min-height:280px}
  .btn,.btn-lg{height:46px}          /* 触控目标 */
  .btn-sm{height:40px}
  .filter{height:40px}
  .ai-box .row{flex-direction:column; align-items:stretch}
  .ai-box input,.ai-box select{width:100%!important}
  .gen-row{flex-wrap:wrap; gap:8px}
  .gen-term,.gen-def{flex:1 1 100%}
  .modal-mask{padding:12px; align-items:flex-start}
  .modal{max-height:92vh}
  .field-2{grid-template-columns:1fr}
  .editor-row{grid-template-columns:1fr 1fr; }
  .editor-row .x{grid-column:span 2}
}

/* ===== 无障碍 ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .orb{animation:none}
}