:root{
  --bg:#eef1f8;
  --panel:#ffffff;
  --line:#e2e7f1;
  --ink:#161d33;
  --muted:#6d7891;
  --blue:#2563ff;
  --blue-soft:#e6edff;
  --red:#e8443a;
  --red-soft:#ffe9e7;
  --pink:#ff3d9a;
  --ghost:#c2c9da;
  --ok-bg:#f3f7ff;
  --radius:14px;
  --mono:"JetBrains Mono","Cascadia Mono",Consolas,"Courier New",monospace;
  --ui:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:14px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 18px;
  background:linear-gradient(180deg,#ffffff,#f7f9fe);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(24,38,80,.05);
  z-index:5;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:linear-gradient(135deg,#3d6bff,#8a5cff);
  color:#fff;display:grid;place-items:center;font-size:19px;
  box-shadow:0 6px 14px rgba(61,107,255,.35);
}
.brand-text h1{margin:0;font-size:16px;letter-spacing:.3px}
.brand-text p{margin:2px 0 0;font-size:11.5px;color:var(--muted)}

.modes{display:flex;gap:6px;background:#e9edf8;padding:4px;border-radius:999px}
.modes button{
  border:0;background:transparent;color:#4a5673;
  padding:7px 15px;border-radius:999px;cursor:pointer;font-size:13px;font-family:inherit;
  transition:.18s;
}
.modes button:hover{color:var(--blue)}
.modes button.active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(37,99,255,.18);font-weight:600}

.actions{display:flex;gap:8px;margin-left:auto;align-items:center}
.pager{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
  padding:4px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pager.hidden{display:none}
.pager input{
  width:52px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--mono);font-size:13px;text-align:center;color:var(--blue);
}
.pager b{color:var(--ink)}
.pager button.mini{padding:4px 9px;border-radius:7px}
.actions button{
  border:1px solid var(--line);background:#fff;color:#3b4560;
  padding:8px 14px;border-radius:10px;cursor:pointer;font-size:13px;font-family:inherit;
  transition:.18s;
}
.actions button:hover{border-color:#bcc8e2;transform:translateY(-1px)}
.actions button.primary{
  border:0;color:#fff;font-weight:600;
  background:linear-gradient(135deg,#ff3d9a,#ff7a45);
  box-shadow:0 6px 16px rgba(255,61,154,.3);
}

/* ---------- 布局 ---------- */
.layout{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:1.05fr 1.15fr 320px;
  gap:14px;
  padding:14px;
}
.pane{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  box-shadow:0 6px 20px rgba(24,38,80,.05);
}
.pane-head{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#fcfdff;
}
.pane-head h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.2px;display:flex;gap:8px;align-items:center}
.badge{font-style:normal;font-size:11px;color:var(--muted);font-weight:400}
.pane-foot{
  padding:8px 14px;border-top:1px solid var(--line);background:#fcfdff;
  font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:10px;
}
.pane-foot.small{font-size:11.5px;line-height:1.6}
.finish{color:#12946a;font-weight:600}

.switch{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{accent-color:var(--pink)}
.pane-tools{display:flex;align-items:center;gap:12px}
button.mini{
  border:1px solid var(--line);background:#fff;color:#3b4560;
  padding:5px 11px;border-radius:9px;cursor:pointer;font-size:12px;font-family:inherit;transition:.18s;
}
button.mini:hover{border-color:#ffb6dc;color:#d81b74}
button.mini.on{background:#fff0f8;border-color:#ff8ec6;color:#d81b74;font-weight:600}

/* ---------- 预览 ---------- */
.preview-body{flex:1;min-height:0;position:relative;background:#f4f6fc}
#frame{width:100%;height:100%;border:0;background:#fff;display:block}
#frame.hidden{display:none}
.terminal{
  position:absolute;inset:0;overflow:auto;padding:16px 18px;
  background:#101528;color:#c9d3ee;font-family:var(--mono);font-size:13px;line-height:1.85;
}
.terminal.hidden{display:none}
.terminal .tline{white-space:pre-wrap;transition:.25s}
.terminal .tline.todo{opacity:.22}
.terminal .tline.active{
  color:#fff;background:rgba(255,61,154,.16);
  border-left:3px solid var(--pink);margin-left:-12px;padding-left:9px;border-radius:4px;
}
.terminal .tline.done{color:#8ff0c9}
.terminal .tprompt{color:#ff9ecb}
.terminal .theader{
  color:#7f8dae;border-bottom:1px dashed #2a3350;padding-bottom:8px;margin-bottom:10px;font-size:12px;
}

/* ---------- 统计 ---------- */
.stats{display:flex;gap:8px;padding:10px 14px 6px}
.stat{
  flex:1;background:#f7f9fe;border:1px solid var(--line);border-radius:10px;
  padding:6px 8px;text-align:center;
}
.stat b{display:block;font-size:15px;color:var(--blue);font-family:var(--mono)}
.stat span{font-size:10.5px;color:var(--muted)}
.bar{height:6px;margin:0 14px 8px;background:#e9edf8;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#3d6bff,#ff3d9a);transition:width .18s}

/* ---------- 代码区 ---------- */
.editor{
  flex:1;min-height:0;overflow:auto;padding:10px 0 40px;
  background:var(--ok-bg);
  font-family:var(--mono);font-size:13.5px;line-height:1.75;
  outline:none;cursor:text;
  scroll-behavior:smooth;
}
.editor:focus{box-shadow:inset 0 0 0 2px rgba(37,99,255,.12)}
.line{display:flex;padding:0 14px 0 0;position:relative}
.line.curline{background:rgba(37,99,255,.055)}
.ln{
  flex:0 0 44px;text-align:right;padding-right:12px;
  color:#aab3c8;user-select:none;font-size:12px;
}
.line.curline .ln{color:var(--blue)}
.code{white-space:pre;flex:1}
.ch{color:var(--ghost);transition:color .12s,background .12s}
.ch.ok{color:var(--blue)}
.ch.sk{color:#93a2c8}
.ch.err{color:#fff;background:var(--red);border-radius:3px}
.caret{
  display:inline-block;width:2px;height:1.05em;vertical-align:-.18em;
  background:var(--pink);margin:0 -1px;border-radius:2px;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:.15}}

/* ---------- 术语面板 ---------- */
.term-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 30px}
.term-card{
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:10px;background:#fbfcff;
}
.term-card.now{border-color:#ffb6dc;background:#fff6fb;box-shadow:0 4px 14px rgba(255,61,154,.12)}
.term-card h3{margin:0 0 6px;font-size:12.5px;color:var(--blue)}
.term-card.now h3{color:#d81b74}
.term-card code{
  font-family:var(--mono);background:#eef1fa;color:#243056;
  padding:1px 6px;border-radius:5px;font-size:12px;
}
.term-card p{margin:6px 0 0;font-size:12.5px;line-height:1.65;color:#49546e}
.term-empty{color:var(--muted);font-size:12.5px;line-height:1.7}
.term-kv{display:flex;gap:8px;font-size:12px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.term-kv em{font-style:normal;color:#243056;font-family:var(--mono)}

@media (max-width:1280px){
  .layout{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}
  .term-pane{grid-column:1/-1;max-height:230px}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;grid-template-rows:1fr 1fr auto;overflow:auto}
  body{overflow:auto;height:auto}
}