:root {
  --bg: #0b1220;
  --panel: #111c2e;
  --line: #22324d;
  --line2: #2e4466;
  --text: #dce7f7;
  --dim: #8fa5c2;
  --cyan: #48c9f0;
  --gold: #e8b45a;
  --up: #ff5c5c;
  --down: #2ecc71;
  --mono: "Cascadia Mono", Consolas, "JetBrains Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(800px 420px at 10% -10%, rgba(76,141,255,.14), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, rgba(232,180,90,.08), transparent 55%),
    var(--bg);
  color: var(--text);
  font: 14px/1.6 "Noto Sans SC", "Microsoft YaHei", sans-serif;
  padding: 20px 14px 40px;
}
a { color: var(--cyan); text-decoration: none; }
.wrap { max-width: 880px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.back {
  font-size: 12px; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
}
.back:hover { color: var(--cyan); border-color: var(--cyan); }
h1 { font-size: 22px; color: var(--gold); letter-spacing: .03em; }
.sub { margin-top: 3px; font-size: 12px; color: var(--dim); }
.card {
  background: linear-gradient(180deg, rgba(23,36,58,.92), rgba(15,25,42,.96));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
}
.card h2 { font-size: 13px; color: var(--cyan); font-weight: 600; margin-bottom: 10px; }
label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  background: #080e19; border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; outline: none; max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); }
textarea { width: 100%; resize: vertical; }
button {
  border: 1px solid var(--line); background: #16233a; color: var(--text);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
}
button:hover { border-color: var(--line2); color: #fff; }
button.primary { background: linear-gradient(135deg, #2f6fed, #4c8dff); border: 0; color: #fff; }
button.ghost { background: transparent; color: var(--dim); }
button:active { transform: translateY(1px); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.row > * { min-width: 0; }
.grow { flex: 1 1 180px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.out {
  background: #070b14; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-family: var(--mono); font-size: 12px;
  white-space: pre-wrap; word-break: break-all; min-height: 46px;
}
.muted { color: var(--dim); font-size: 11px; line-height: 1.6; }
.err { color: var(--up); font-size: 12px; min-height: 18px; margin-top: 6px; white-space: pre-wrap; }
.ok { color: var(--down); }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.tool-card {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; background: rgba(16,26,43,.6); color: var(--text);
}
.tool-card:hover { border-color: rgba(72,201,240,.55); background: rgba(72,201,240,.06); }
.tool-card b { display: block; font-size: 14px; color: var(--cyan); }
.tool-card span { display: block; margin-top: 4px; font-size: 11.5px; color: var(--dim); line-height: 1.6; }

/* calculator */
.calc-expr {
  width: 100%; font-family: var(--mono); font-size: 20px; text-align: right;
  padding: 12px; letter-spacing: .02em;
}
.calc-result {
  min-height: 38px; margin-top: 8px; text-align: right;
  font-family: var(--mono); font-size: 24px; color: var(--cyan);
  word-break: break-all;
}
.calc-funcs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0 10px; }
.calc-funcs button { padding: 8px 0; font-size: 12px; color: var(--dim); }
.calc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.calc-pad button { padding: 15px 0; font-size: 17px; }
.calc-pad button.op { color: var(--cyan); }
.calc-pad button.eq { background: linear-gradient(135deg, #2f6fed, #4c8dff); border: 0; color: #fff; }
.calc-pad button.act { color: var(--gold); }
@media (max-width: 520px) {
  .calc-funcs { grid-template-columns: repeat(4, 1fr); }
  .calc-pad button { padding: 13px 0; font-size: 16px; }
  .grid2, .tool-grid { grid-template-columns: 1fr; }
}

/* image */
.preview {
  display: block; max-width: 100%; max-height: 320px; margin: 10px auto;
  border: 1px solid var(--line); border-radius: 8px; background: #070b14;
}
.file-meta { font-size: 11.5px; color: var(--dim); font-family: var(--mono); line-height: 1.7; }
input[type="range"] { padding: 0; accent-color: var(--cyan); }
.download { display: inline-block; margin-top: 8px; }

/* code */
.code { min-height: 190px; font-family: var(--mono); font-size: 12px; line-height: 1.6; }

/* ── 专业计算器 ─────────────────────────────────────────── */
.calc-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px; align-items: start;
}
.calc-unit {
  border: 1px solid #35507a; border-radius: 22px; padding: 14px;
  background:
    linear-gradient(180deg, rgba(30,47,76,.96), rgba(10,17,29,.98));
  box-shadow: 0 26px 60px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05);
}
.calc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.brand {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  color: var(--gold); white-space: nowrap;
}
.brand small { color: var(--dim); font-size: 8px; letter-spacing: .18em; }
.led {
  width: 7px; height: 7px; border-radius: 50%; background: #48c9f0;
  box-shadow: 0 0 10px rgba(72,201,240,.9);
}
.mode-tabs { margin-left: auto; display: flex; gap: 4px; background: rgba(5,9,16,.6); padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.mode-tabs button {
  border: 0; background: transparent; color: var(--dim);
  font-size: 11px; padding: 5px 11px; border-radius: 999px;
}
.mode-tabs button.on { background: rgba(232,180,90,.14); color: var(--gold); }
.display {
  position: relative; overflow: hidden;
  background: #05080e; border: 1px solid #2a3d5c; border-radius: 13px;
  padding: 10px 12px 9px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02);
}
.display::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
.status-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.status-row .spacer { flex: 1; }
.chip {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; background: rgba(16,26,43,.5);
}
.chip.ghost { color: var(--gold); border-color: rgba(232,180,90,.45); }
.display-expr {
  width: 100%; border: 0; background: transparent; outline: none;
  color: #dce7f7; font-family: var(--mono); font-size: 20px;
  text-align: right; padding: 8px 0 0; letter-spacing: .02em;
}
.display-expr::placeholder { color: #3f5577; font-size: 13px; }
.display-result {
  min-height: 46px; text-align: right; font-family: var(--mono);
  font-size: 32px; line-height: 1.2; color: var(--gold);
  text-shadow: 0 0 18px rgba(232,180,90,.18);
  word-break: break-all; padding-top: 2px;
}
.display-hint { min-height: 16px; font-size: 10px; color: var(--dim); text-align: right; }
.display-hint.err-text { color: var(--up); }
.sci-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.sci-tools select {
  background: #080e19; border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 5px 6px; font-size: 10.5px; outline: none;
}
.tool-key {
  border: 1px solid var(--line); background: #16233a; color: var(--dim);
  font-size: 10px; padding: 5px 8px; border-radius: 7px;
}
.tool-key.on { color: var(--gold); border-color: var(--gold); background: rgba(232,180,90,.12); }
.tool-sep { flex: 1; }
.fn-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.fn-grid .key { padding: 9px 0; }
.key {
  border: 1px solid #2a3d5c; border-radius: 9px;
  background: linear-gradient(180deg, #1a2942, #0e192a);
  color: var(--text); font-size: 14px; line-height: 1.1;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 2px 0 #060b13;
  transition: background .12s, border-color .12s, transform .06s;
  user-select: none; -webkit-user-select: none;
}
.key:hover { border-color: #3d5a86; background: linear-gradient(180deg, #213454, #101d31); }
.key:active { transform: translateY(1px); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.key.fn { font-size: 11.5px; color: #a9bdd8; }
.key.op { color: var(--cyan); }
.key.act { color: var(--gold); }
.key.eq { grid-column: span 2; background: linear-gradient(135deg, #2f6fed, #4c8dff); color: #fff; border: 0; }
.key.eq:hover { background: linear-gradient(135deg, #3b7bf5, #5d9bff); }
.key .k-alt { display: none; }
.fn-grid.second .key.has-alt .k-main { display: none; }
.fn-grid.second .key.has-alt .k-alt { display: inline; color: var(--gold); }
.pad-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 8px; }
.pad-grid .key { padding: 14px 0; font-size: 17px; }
.tape-panel {
  border: 1px solid var(--line); border-radius: 16px; padding: 10px;
  background: linear-gradient(180deg, rgba(21,34,56,.92), rgba(10,17,29,.96));
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.tape-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  color: var(--dim); padding: 2px 2px 8px; border-bottom: 1px solid var(--line);
}
.tape-head button { border: 0; background: transparent; color: var(--dim); font-size: 10px; }
.tape { max-height: 660px; overflow-y: auto; }
.tape-empty { color: var(--dim); font-size: 11px; padding: 14px 4px; text-align: center; }
.tape-item {
  display: block; width: 100%; text-align: left; border: 0;
  border-bottom: 1px dashed rgba(34,50,77,.7); background: transparent;
  padding: 8px 3px; color: var(--text);
}
.tape-item:hover { background: rgba(72,201,240,.05); }
.tape-item .te { display: block; font-family: var(--mono); font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-item .tr { display: block; font-family: var(--mono); font-size: 13px; color: var(--gold); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-item .tt { display: block; font-family: var(--mono); font-size: 8.5px; color: #55708f; margin-top: 2px; }
.prog-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; }
.prog-display { background: #05080e; border: 1px solid #2a3d5c; border-radius: 12px; padding: 10px 12px; }
.prog-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px dashed rgba(34,50,77,.6); }
.prog-row:last-child { border-bottom: 0; }
.prog-row span { width: 34px; font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .1em; }
.prog-row code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; color: var(--cyan); word-break: break-all; }
.prog-controls label { display: block; }
.prog-controls select { margin-left: 4px; }
.prog-controls .display-expr { font-size: 17px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: left; margin-top: 4px; }
.graph-canvas {
  display: block; width: 100%; height: 360px; margin-top: 10px;
  background: #05080e; border: 1px solid #2a3d5c; border-radius: 12px;
}
@media (max-width: 900px) {
  .calc-shell { grid-template-columns: 1fr; }
  .tape-panel { order: 2; }
  .tape { max-height: 220px; }
  .prog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .calc-unit { padding: 10px; border-radius: 16px; }
  .fn-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .pad-grid .key { padding: 12px 0; font-size: 16px; }
  .display-expr { font-size: 17px; }
  .display-result { font-size: 27px; }
  .graph-canvas { height: 300px; }
}

/* ── 刷题工具 ───────────────────────────────────────────── */
.quiz-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(23,36,58,.92), rgba(15,25,42,.96));
  margin-bottom: 12px;
}
.quiz-title b { display: block; font-size: 14px; color: var(--gold); }
.quiz-title span { font-size: 10.5px; }
.quiz-metrics { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.quiz-chip {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
  background: rgba(8,14,25,.6); white-space: nowrap;
}
.quiz-metrics select { font-size: 11px; padding: 4px 6px; }
.quiz-grid { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 12px; align-items: start; }
.quiz-card { margin-bottom: 0; }
.q-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.q-badge {
  font-size: 10px; color: var(--cyan); border: 1px solid rgba(72,201,240,.4);
  border-radius: 999px; padding: 1px 7px; background: rgba(72,201,240,.08);
}
.q-badge.sec { color: var(--gold); border-color: rgba(232,180,90,.4); background: rgba(232,180,90,.08); }
.q-text { font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 14px; }
.answer-area { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(8,14,25,.5); cursor: pointer; font-size: 13px;
}
.opt:hover { border-color: var(--line2); }
.opt input { margin-top: 3px; accent-color: var(--cyan); }
.opt .ol {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line2); color: var(--dim);
  font-family: var(--mono); font-size: 10px; text-align: center; line-height: 19px;
}
.opt .ot { flex: 1; min-width: 0; }
.opt.correct { border-color: rgba(46,204,113,.6); background: rgba(46,204,113,.08); }
.opt.correct .ol { border-color: var(--down); color: var(--down); }
.opt.wrong { border-color: rgba(255,92,92,.6); background: rgba(255,92,92,.08); }
.opt.wrong .ol { border-color: var(--up); color: var(--up); }
.fill-input { width: 100%; font-family: var(--mono); font-size: 14px; padding: 11px 12px; }
.feedback { margin-top: 10px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7; border: 1px solid var(--line); }
.feedback.ok { border-color: rgba(46,204,113,.5); background: rgba(46,204,113,.06); color: var(--down); }
.feedback.bad { border-color: rgba(255,92,92,.5); background: rgba(255,92,92,.06); color: var(--up); }
.feedback .muted { color: var(--dim); margin-top: 3px; }
.quiz-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.quiz-actions button { padding: 8px 14px; }
.quiz-nav-card { position: sticky; top: 10px; }
.navigator { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 10px; }
.nav-btn {
  padding: 7px 0; font-size: 11px; border-radius: 7px;
  border: 1px solid var(--line); background: #0c1524; color: var(--dim);
}
.nav-btn:hover { border-color: var(--line2); color: var(--text); }
.nav-btn.current { border-color: var(--gold); color: var(--gold); }
.nav-btn.done { color: var(--text); }
.nav-btn.right { border-color: rgba(46,204,113,.5); color: var(--down); }
.nav-btn.wrong { border-color: rgba(255,92,92,.5); color: var(--up); }
.nav-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 9.5px; }
.nav-legend span { display: inline-flex; align-items: center; gap: 4px; }
.dot { width: 7px; height: 7px; border-radius: 2px; background: var(--line2); display: inline-block; }
.dot.done { background: var(--text); }
.dot.right { background: var(--down); }
.dot.wrong { background: var(--up); }
.dot.current { background: var(--gold); }
.finish-score { font-family: var(--mono); font-size: 46px; color: var(--gold); line-height: 1.2; margin: 8px 0; }
details summary { cursor: pointer; color: var(--cyan); font-size: 12px; }
details[open] summary { margin-bottom: 4px; }
@media (max-width: 820px) {
  .quiz-grid { grid-template-columns: 1fr; }
  .quiz-nav-card { position: static; }
  .navigator { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 480px) {
  .navigator { grid-template-columns: repeat(6, 1fr); }
  .quiz-metrics { margin-left: 0; }
  .q-text { font-size: 15px; }
}