/* ============================================================
   theme.css —— 色板、字体、终端质感组件
   设计概念：在一台保养良好的 CRT 终端里刷题。
   ============================================================ */

:root {
  /* 背景层次 */
  --bg-page:   #04060a;   /* 页面最底层（窗外的黑） */
  --bg:        #0d1117;   /* 终端主背景 */
  --bg-elev:   #131a23;   /* 卡片/面板抬升 */
  --bg-inset:  #010409;   /* 输入框/代码块内陷 */
  --border:    #2b333d;
  --border-dim:#1c232c;

  /* 前景 */
  --fg:        #c9d1d9;
  --fg-dim:    #828c98;

  /* 主色与点缀 */
  --green:     #39d353;   /* 终端绿：品牌/光标/路径 */
  --green-dim: #1d7a31;
  --amber:     #e3b341;   /* 琥珀：收藏/待复习 */
  --cyan:      #56d4dd;   /* 青：~/ 路径前缀 */
  --red:       #f85149;   /* 红：没头绪/错误 */

  /* 三态 */
  --st-ok:     var(--green);
  --st-rev:    var(--amber);
  --st-bad:    var(--red);

  /* 窗口圆点 */
  --dot-r: #ff5f56; --dot-y: #ffbd2e; --dot-g: #27c93f;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas,
               'Noto Sans Mono CJK SC', 'PingFang SC', 'Microsoft YaHei', monospace;

  --radius: 10px;
  --glow-green: 0 0 8px rgba(57, 211, 83, .45);
}

/* ---------- 基底 ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(57,211,83,.07), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(86,212,221,.05), transparent 60%),
    var(--bg-page);
}
::selection { background: rgba(57,211,83,.28); }

/* 滚动条也要像终端 */
* { scrollbar-width: thin; scrollbar-color: #2e3a46 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #2e3a46; border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- CRT 质感层 ---------- */
.crt {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.32) 100%);
  mix-blend-mode: overlay;
}

/* ---------- 开机画面 ---------- */
#boot {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: var(--bg-page);
  transition: opacity .4s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-inner { max-width: 720px; padding: 24px; width: 100%; }
.boot-logo {
  color: var(--green); font-size: 11px; line-height: 1.25;
  text-shadow: var(--glow-green); margin: 0 0 18px; overflow-x: auto;
}
#boot-log p { margin: 2px 0; color: var(--fg-dim); animation: bootline .25s ease both; }
#boot-log .ok  { color: var(--green); }
#boot-log .bad { color: var(--red); }
#boot-log .dim { color: #4d5660; }
@keyframes bootline { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.boot-retry {
  background: none; border: 1px solid var(--green); color: var(--green);
  font: inherit; padding: 4px 14px; cursor: pointer; margin-top: 8px;
}
.boot-retry:hover { background: rgba(57,211,83,.12); }

/* ---------- 终端窗口外壳 ---------- */
.term {
  max-width: 1180px; margin: 22px auto; min-height: calc(100dvh - 44px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(57,211,83,.05);
  overflow: hidden;
}

.term-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #161d27, #10161e);
  border-bottom: 1px solid var(--border-dim);
  user-select: none;
}
.dots { display: flex; gap: 7px; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.r { background: var(--dot-r); } .dot.y { background: var(--dot-y); } .dot.g { background: var(--dot-g); }
.term-title {
  flex: 1; text-align: center; color: var(--fg-dim); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.term-link {
  color: var(--cyan); text-decoration: none; font-size: 12px;
  border: 1px solid transparent; padding: 1px 8px; border-radius: 4px;
}
.term-link:hover { border-color: var(--cyan); }
.menu-btn {
  display: none; background: none; border: 1px solid var(--border);
  color: var(--fg); font: inherit; font-size: 16px; line-height: 1;
  padding: 3px 9px; border-radius: 5px; cursor: pointer;
}

/* ---------- grep> 搜索 ---------- */
.prompt-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.prompt-search:focus-within { border-color: var(--green-dim); box-shadow: 0 0 0 2px rgba(57,211,83,.12); }
.prompt-sign { color: var(--green); font-weight: 700; text-shadow: var(--glow-green); }
.prompt-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--green);
  min-width: 0;
}
.prompt-input::placeholder { color: #4d5660; }
.prompt-input::-webkit-search-cancel-button { display: none; }
/* 输入为空时显示一个闪烁块光标，开始输入即让位给原生 caret */
.prompt-cursor {
  width: 8px; height: 17px; background: var(--green);
  animation: blink 1.1s steps(1) infinite;
  box-shadow: var(--glow-green);
}
.prompt-input:not(:placeholder-shown) + .prompt-cursor,
.prompt-input:focus + .prompt-cursor { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 筛选 flags ---------- */
.flags { display: flex; flex-wrap: wrap; gap: 7px; }
.flag {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--fg-dim); font: inherit; font-size: 12.5px;
  padding: 3px 10px; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.flag i { font-style: normal; margin-left: 6px; color: #4d5660; }
.flag:hover { color: var(--fg); border-color: #3d4854; }
.flag.on { color: var(--green); border-color: var(--green-dim); background: rgba(57,211,83,.08); }
.flag.on i { color: var(--green-dim); }
.flag-quiz.on { color: var(--amber); border-color: #8a6d22; background: rgba(227,179,65,.08); }

/* ---------- 侧栏章节树 ---------- */
.side-head { color: var(--fg-dim); padding: 4px 10px 10px; font-size: 12.5px; user-select: none; }
.nav-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 10px; border-radius: 5px; text-decoration: none;
  color: var(--fg-dim); font-size: 12.5px; line-height: 1.9;
  border-left: 2px solid transparent;
}
.nav-row:hover { background: var(--bg-elev); color: var(--fg); }
.nav-row.active { background: rgba(57,211,83,.07); border-left-color: var(--green); }
.nav-path {
  flex: 1; min-width: 0;
  color: var(--fg); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-path i { color: var(--cyan); font-style: normal; }
.nav-row.active .nav-path { color: var(--green); }
.nav-meta { margin-left: auto; padding-left: 8px; font-size: 11px; color: #4d5660; white-space: nowrap; flex: none; }
.nav-all { margin-bottom: 4px; }

/* ---------- 章节区块头 ---------- */
.ch-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 10px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--border-dim);
}
#q-list > .ch-head:first-child { margin-top: 8px; }
.ch-path { font-size: 16px; font-weight: 700; color: var(--green); text-shadow: var(--glow-green); }
.ch-path i { color: var(--cyan); font-style: normal; font-weight: 400; }
.ch-name { color: var(--fg-dim); font-size: 12px; }
.ch-bar { margin-left: auto; color: var(--green-dim); font-size: 11px; letter-spacing: -.5px; white-space: nowrap; }
.ch-tools button {
  background: none; border: none; color: #4d5660; font: inherit; font-size: 12px;
  cursor: pointer; padding: 0 2px;
}
.ch-tools button:hover { color: var(--green); }

/* ---------- 题卡 ---------- */
.q-card {
  border: 1px solid var(--border-dim); border-radius: 7px;
  background: var(--bg-elev); margin: 7px 0;
  transition: border-color .15s;
}
.q-card:hover { border-color: #38434f; }
.q-card[data-status="mastered"] { border-left: 3px solid var(--st-ok); }
.q-card[data-status="review"]   { border-left: 3px solid var(--st-rev); }
.q-card[data-status="stuck"]    { border-left: 3px solid var(--st-bad); }

.q-row { display: flex; align-items: center; }
.q-head {
  flex: 1; display: flex; align-items: baseline; gap: 10px;
  background: none; border: none; color: var(--fg); font: inherit;
  text-align: left; padding: 10px 0 10px 14px; cursor: pointer; min-width: 0;
}
.q-caret { color: #4d5660; width: 1ch; flex: none; transition: color .12s; }
.q-head:hover .q-caret { color: var(--green); }
.q-no { color: var(--green-dim); flex: none; font-size: 12px; }
.q-title { font-weight: 500; }
.q-badge {
  flex: none; font-size: 10px; color: var(--cyan);
  border: 1px solid rgba(86,212,221,.35); border-radius: 3px; padding: 0 5px;
}
.q-marks { display: flex; gap: 2px; padding: 0 10px; flex: none; }
.q-star, .q-mark {
  background: none; border: none; font: inherit; font-size: 15px;
  width: 34px; height: 34px; border-radius: 5px; cursor: pointer;
  color: #3d4854; transition: color .12s, background .12s, transform .08s;
}
.q-star:hover, .q-mark:hover { background: rgba(255,255,255,.05); }
.q-star:active, .q-mark:active { transform: scale(.86); }
.q-star.on { color: var(--amber); text-shadow: 0 0 8px rgba(227,179,65,.5); }
.q-card[data-status="mastered"] .q-mark { color: var(--st-ok); }
.q-card[data-status="review"]   .q-mark { color: var(--st-rev); }
.q-card[data-status="stuck"]    .q-mark { color: var(--st-bad); }

/* ---------- 答案区（markdown 渲染目标） ---------- */
.q-answer {
  position: relative;
  margin: 0 14px 12px 14px; padding: 12px 16px;
  background: var(--bg-inset); border: 1px solid var(--border-dim); border-radius: 6px;
  font-size: 13.5px; overflow-wrap: break-word;
}
.q-answer > :first-child { margin-top: 0; }
.q-answer > :last-child { margin-bottom: 0; }
.q-answer p, .q-answer li { line-height: 1.85; }
.q-answer ul, .q-answer ol { padding-left: 1.6em; margin: .4em 0; }
.q-answer strong { color: #e6edf3; }
.q-answer code:not(pre code) {
  background: rgba(110,118,129,.18); border-radius: 4px;
  padding: .1em .35em; font-size: .92em; color: var(--cyan);
}
.q-answer pre {
  background: #0a0e14 !important; border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 12px 14px; overflow-x: auto; font-size: 12.5px;
}
.q-answer pre code { background: transparent !important; padding: 0; }
.q-answer table {
  border-collapse: collapse; margin: .6em 0; display: block; overflow-x: auto;
  font-size: 12.5px;
}
.q-answer th, .q-answer td { border: 1px solid var(--border); padding: 5px 11px; white-space: nowrap; }
.q-answer th { background: var(--bg-elev); color: var(--green); font-weight: 500; }
.q-answer blockquote {
  margin: .6em 0; padding: 2px 14px; border-left: 3px solid var(--green-dim);
  color: var(--fg-dim);
}
.q-answer a { color: var(--cyan); }

/* ---------- 管理员删除按钮（题卡） ---------- */
.q-del {
  background: none; border: none; font: inherit; font-size: 14px;
  width: 34px; height: 34px; border-radius: 5px; cursor: pointer;
  color: #3d4854; opacity: .65; transition: opacity .12s, background .12s, transform .08s;
}
.q-del:hover { opacity: 1; background: rgba(248,81,73,.12); }
.q-del:active { transform: scale(.86); }

/* ---------- 笔记按钮（题卡标记行） ---------- */
.q-note-btn {
  background: none; border: none; font: inherit; font-size: 15px;
  width: 34px; height: 34px; border-radius: 5px; cursor: pointer;
  color: #3d4854; transition: color .12s, background .12s, transform .08s;
}
.q-note-btn:hover { background: rgba(255,255,255,.05); }
.q-note-btn:active { transform: scale(.86); }
.q-note-btn.on { color: var(--cyan); text-shadow: 0 0 8px rgba(86,212,221,.5); }

/* ---------- 笔记区 ---------- */
.q-note {
  margin: 0 14px 12px 14px; padding: 10px 14px;
  background: rgba(86,212,221,.04);
  border: 1px dashed rgba(86,212,221,.3); border-radius: 6px;
}
.q-note-bar {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--cyan); font-size: 12px; margin-bottom: 7px;
}
.q-note-bar i { color: #4d5660; font-style: normal; font-size: 11px; }
.q-note-status { margin-left: auto; color: var(--green); font-size: 11px; }
.q-note-view {
  font-size: 13px; cursor: text; min-height: 1.5em;
  overflow-wrap: break-word;
}
.q-note-view.empty { color: #4d5660; font-style: italic; }
.q-note-view > :first-child { margin-top: 0; }
.q-note-view > :last-child { margin-bottom: 0; }
.q-note-view code:not(pre code) {
  background: rgba(110,118,129,.18); border-radius: 4px; padding: .1em .35em;
  font-size: .92em; color: var(--cyan);
}
.q-note-view pre {
  background: #0a0e14 !important; border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 12px;
}
.q-note-ta {
  width: 100%; min-height: 90px; resize: vertical;
  background: var(--bg-inset); border: 1px solid rgba(86,212,221,.4);
  border-radius: 6px; padding: 9px 12px;
  color: var(--fg); font: inherit; font-size: 13px; line-height: 1.7;
  outline: none; caret-color: var(--cyan);
}
.q-note-ta:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(86,212,221,.12); }
.q-note-ta::placeholder { color: #4d5660; }

/* ---------- 纠错按钮 + 编辑器 ---------- */
.q-correct-btn {
  background: none; border: none; font: inherit; font-size: 14px;
  width: 34px; height: 34px; border-radius: 5px; cursor: pointer;
  color: #3d4854; transition: color .12s, background .12s, transform .08s;
}
.q-correct-btn:hover { background: rgba(227,179,65,.12); color: var(--amber); }
.q-correct-btn:active { transform: scale(.86); }

.q-correct {
  margin: 0 14px 12px 14px; padding: 12px 14px;
  background: rgba(227,179,65,.05);
  border: 1px dashed rgba(227,179,65,.4); border-radius: 6px;
}
.qc-bar { color: var(--amber); font-size: 12.5px; margin-bottom: 8px; }
.qc-bar i { color: #4d5660; font-style: normal; font-size: 11px; margin-left: 6px; }
.qc-label { display: block; color: var(--fg-dim); font-size: 12px; margin: 8px 0 4px; }
.qc-q, .qc-a, .qc-reason {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 11px; color: var(--fg); font: inherit;
  font-size: 13px; outline: none; caret-color: var(--amber);
}
.qc-a { min-height: 160px; resize: vertical; line-height: 1.7; }
.qc-reason { min-height: 54px; resize: vertical; }
.qc-q:focus, .qc-a:focus, .qc-reason:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(227,179,65,.12); }
.qc-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.qc-submit {
  background: rgba(227,179,65,.15); border: 1px solid var(--amber); color: var(--amber);
  font: inherit; font-size: 13px; padding: 6px 18px; border-radius: 6px; cursor: pointer;
}
.qc-submit:hover { background: var(--amber); color: #1a1205; }
.qc-submit:disabled { opacity: .5; cursor: default; }
.qc-cancel {
  background: none; border: 1px solid var(--border); color: var(--fg-dim);
  font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
}
.qc-cancel:hover { color: var(--fg); border-color: #3d4854; }
.qc-status { color: var(--green); font-size: 11px; }

/* ---------- 审核：tab + 勘误 diff ---------- */
.rv-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.rv-tab {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg-dim); font: inherit; font-size: 13px; padding: 6px 16px; cursor: pointer;
}
.rv-tab i { font-style: normal; color: var(--amber); margin-left: 4px; }
.rv-tab.on { color: var(--green); border-color: var(--green-dim); background: rgba(57,211,83,.08); }

.cr-card { border-left: 3px solid var(--amber); }
.cr-reason {
  background: rgba(227,179,65,.08); border-radius: 5px; padding: 7px 11px;
  color: var(--fg); font-size: 13px; margin-bottom: 10px;
}
.cr-field { color: var(--fg-dim); font-size: 12px; margin: 8px 0 4px; }
.cr-diff {
  background: var(--bg-inset); border: 1px solid var(--border-dim); border-radius: 6px;
  padding: 10px 13px; font-size: 13px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
}
.cr-diff-a { max-height: 360px; overflow-y: auto; }
.d-eq  { color: var(--fg-dim); }
.d-ins { background: rgba(57,211,83,.22); color: #b6ffc8; text-decoration: none; border-radius: 2px; }
.d-del { background: rgba(248,81,73,.18); color: #ff9b95; text-decoration: line-through; border-radius: 2px; }
.cr-note-row { margin: 12px 0 4px; }
.cr-note {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 11px; color: var(--fg); font: inherit; font-size: 13px; outline: none;
}
.cr-note:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(86,212,221,.12); }

/* 我的记录 */
.mine-sub { color: var(--fg); font-size: 13px; margin: 18px 0 10px; border-bottom: 1px dashed var(--border-dim); padding-bottom: 6px; }
.sb-link { color: var(--cyan); text-decoration: none; font-size: 12.5px; }
.sb-link:hover { text-decoration: underline; }
.sb-empty a { color: var(--green); }

/* 我的纠错反馈 */
.mine-feedback {
  margin-top: 7px; padding: 7px 11px; font-size: 12.5px; color: var(--fg-dim);
  background: var(--bg-inset); border-radius: 5px; border-left: 2px solid var(--cyan);
}

/* ---------- 自测模式遮罩 ---------- */
.q-answer.veiled > *:not(.q-veil) { filter: blur(6px); user-select: none; pointer-events: none; }
.q-veil {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(1,4,9,.25);
  border: none; border-radius: 6px; cursor: pointer;
  color: var(--amber); font: inherit; font-size: 13px; letter-spacing: 1px;
}
.q-veil:hover { color: #ffd66e; background: rgba(1,4,9,.15); }

/* ---------- 空结果 ---------- */
.empty { padding: 48px 8px; color: var(--fg-dim); }
.empty b { color: var(--red); }

/* ---------- 状态栏（vim statusline） ---------- */
#statusline {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #10161e, #0c1117);
  border-top: 1px solid var(--border-dim);
  font-size: 12px; color: var(--fg-dim);
  user-select: none; flex-wrap: wrap;
}
.sl-mode { color: var(--green); font-weight: 700; letter-spacing: 1px; }
body.quiz .sl-mode { color: var(--amber); }
.sl-counts i { font-style: normal; margin-right: 9px; }
.c-ok { color: var(--st-ok); } .c-rev { color: var(--st-rev); }
.c-bad { color: var(--st-bad); } .c-star { color: var(--amber); }
.sl-bar { color: var(--green-dim); letter-spacing: -.5px; }
.sl-shown { margin-left: auto; }
.sl-hint { color: #3d4854; }

/* ---------- 侧栏操作链接 + 角标 ---------- */
.nav-op { margin-top: 2px; }
.nav-op .nav-path i { color: var(--green); }
.nav-badge {
  margin-left: auto; flex: none;
  background: var(--amber); color: #1a1205; font-weight: 700;
  font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 9px;
}

/* 非浏览视图隐藏 grep 搜索 / 筛选工具条 */
body:not([data-view="browse"]) .toolbar { display: none; }

/* 区块标题（命令行风） */
.sec-title {
  color: var(--green); font-size: 14px; font-weight: 700;
  margin: 8px 0 16px; text-shadow: var(--glow-green);
}

/* ---------- 提交新题 ---------- */
.submit-wrap { max-width: 920px; padding-bottom: 30px; }
.sb-form { display: flex; flex-direction: column; gap: 16px; }
.sb-field { display: flex; flex-direction: column; gap: 6px; }
.sb-label { color: var(--fg-dim); font-size: 12.5px; }
.sb-label i { color: #4d5660; font-style: normal; font-size: 11px; margin-left: 6px; }
.sb-select, .sb-input {
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); font: inherit; font-size: 13.5px; padding: 9px 12px; outline: none;
}
.sb-select:focus, .sb-input:focus { border-color: var(--green-dim); box-shadow: 0 0 0 2px rgba(57,211,83,.12); }
.sb-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-answer {
  min-height: 280px; resize: vertical;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px;
  color: var(--fg); font: inherit; font-size: 13px; line-height: 1.7; padding: 10px 12px;
  outline: none; caret-color: var(--green);
}
.sb-answer:focus { border-color: var(--green-dim); box-shadow: 0 0 0 2px rgba(57,211,83,.12); }
.sb-preview {
  min-height: 280px; overflow-y: auto;
  background: var(--bg-elev); border: 1px dashed var(--border); border-radius: 6px;
  padding: 10px 14px; font-size: 13px;
}
.sb-preview > :first-child { margin-top: 0; }
.sb-empty { color: #4d5660; font-style: italic; }
.sb-preview code:not(pre code) { background: rgba(110,118,129,.18); border-radius: 4px; padding: .1em .35em; color: var(--cyan); }
.sb-preview pre { background: #0a0e14 !important; border: 1px solid var(--border-dim); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 12px; }
.sb-preview table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 12.5px; }
.sb-preview th, .sb-preview td { border: 1px solid var(--border); padding: 5px 11px; }
.sb-preview th { background: var(--bg); color: var(--green); }
.sb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-submit {
  background: var(--green-dim); border: 1px solid var(--green); color: #eafff0;
  font: inherit; font-size: 13.5px; padding: 8px 22px; border-radius: 6px; cursor: pointer;
}
.sb-submit:hover { background: var(--green); color: #04140a; }
.sb-submit:disabled { opacity: .5; cursor: default; }
.sb-cancel {
  background: none; border: 1px solid var(--border); color: var(--fg-dim);
  font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 6px; cursor: pointer;
}
.sb-cancel:hover { color: var(--fg); border-color: #3d4854; }
.sb-hint { color: #4d5660; font-size: 11.5px; }

/* 我的提交 */
.sb-mine { margin-top: 34px; }
.mine-item {
  border: 1px solid var(--border-dim); border-radius: 6px;
  background: var(--bg-elev); padding: 10px 14px; margin: 7px 0;
}
.mine-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mine-ch { color: var(--cyan); font-size: 12px; }
.mine-q { flex: 1; min-width: 0; }
.mine-edit {
  background: none; border: 1px solid var(--border); color: var(--fg-dim);
  font: inherit; font-size: 12px; padding: 2px 12px; border-radius: 5px; cursor: pointer;
}
.mine-edit:hover { color: var(--green); border-color: var(--green-dim); }
.st-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; flex: none; }
.st-pending   { color: var(--amber); border: 1px solid rgba(227,179,65,.4); }
.st-published { color: var(--green); border: 1px solid var(--green-dim); }
.st-rejected  { color: var(--red);  border: 1px solid rgba(248,81,73,.4); }

/* ---------- 审核面板 ---------- */
.review-wrap { max-width: 920px; padding-bottom: 30px; }
.rv-card {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elev); padding: 14px 16px; margin: 12px 0;
}
.rv-card.done { opacity: .55; }
.rv-top { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.rv-ch { color: var(--cyan); font-size: 12px; }
.rv-by { color: #4d5660; font-size: 11.5px; margin-left: auto; }
.rv-q { font-weight: 700; font-size: 15px; color: #e6edf3; margin-bottom: 8px; }
.rv-a {
  background: var(--bg-inset); border: 1px solid var(--border-dim); border-radius: 6px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 12px;
}
.rv-a > :first-child { margin-top: 0; } .rv-a > :last-child { margin-bottom: 0; }
.rv-a code:not(pre code) { background: rgba(110,118,129,.18); border-radius: 4px; padding: .1em .35em; color: var(--cyan); }
.rv-a pre { background: #0a0e14 !important; border: 1px solid var(--border-dim); border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 12px; }
.rv-a table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 12.5px; }
.rv-a th, .rv-a td { border: 1px solid var(--border); padding: 5px 11px; }
.rv-a th { background: var(--bg-elev); color: var(--green); }
.rv-actions { display: flex; gap: 12px; }
.rv-ok, .rv-no {
  font: inherit; font-size: 13px; padding: 7px 18px; border-radius: 6px; cursor: pointer;
  background: none;
}
.rv-ok { border: 1px solid var(--green-dim); color: var(--green); }
.rv-ok:hover { background: rgba(57,211,83,.12); }
.rv-no { border: 1px solid rgba(248,81,73,.4); color: var(--red); }
.rv-no:hover { background: rgba(248,81,73,.1); }
.rv-del { border: 1px solid var(--border); color: var(--fg-dim); margin-left: auto; }
.rv-del:hover { background: rgba(248,81,73,.1); color: var(--red); border-color: rgba(248,81,73,.4); }
.rv-ok:disabled, .rv-no:disabled, .rv-del:disabled { opacity: .4; cursor: default; }
.rv-result { color: var(--fg-dim); font-size: 13px; }

/* 路由认证占位 */
.auth-wait { padding: 48px 8px; color: var(--fg-dim); }

/* ---------- man page（附录） ---------- */
.man-page {
  border: 1px solid var(--border-dim); border-radius: 8px;
  background: var(--bg-elev); margin: 14px 0; overflow: hidden;
}
.man-head {
  padding: 12px 18px; border-bottom: 1px dashed var(--border-dim);
  display: flex; align-items: baseline; gap: 14px;
}
.man-cmd { color: var(--cyan); font-size: 12px; }
.man-head h2 { margin: 0; font-size: 16px; color: var(--green); font-weight: 700; }
.man-body { padding: 14px 20px; font-size: 13.5px; }
.man-body strong { color: #e6edf3; }
.man-body blockquote {
  margin: .6em 0; padding: 2px 14px; border-left: 3px solid var(--amber);
  color: var(--fg-dim);
}
.man-foot { color: var(--fg-dim); padding: 4px 6px 30px; }
.man-foot a { color: var(--green); text-decoration: none; }
.man-foot a:hover { text-shadow: var(--glow-green); }

/* ---------- 自定义 tooltip（约 0.22s 出现，原生 title 要等 ~1.5s） ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #0a0e14; color: var(--fg);
  border: 1px solid var(--green-dim); border-radius: 5px;
  padding: 4px 9px; font-size: 11.5px; line-height: 1.5;
  white-space: nowrap; box-shadow: 0 6px 22px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .12s ease .22s, transform .12s ease .22s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* 靠右元素（题卡标记、章头工具）的 tip 右对齐，避免溢出屏幕右缘 */
.q-marks [data-tip]::after, .ch-tools [data-tip]::after, .ch-bar[data-tip]::after {
  left: auto; right: 0; transform: translateX(0) translateY(3px);
}
.q-marks [data-tip]:hover::after, .ch-tools [data-tip]:hover::after, .ch-bar[data-tip]:hover::after {
  transform: translateX(0) translateY(0);
}
@media (hover: none) { [data-tip]::after { display: none; } } /* 触屏不显示悬浮 tip */

/* ---------- 登录区 + toast ---------- */
#auth-area { display: flex; align-items: center; gap: 8px; flex: none; }
.auth-user { color: var(--cyan); font-size: 12px; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--fg-dim); font: inherit; font-size: 12px;
  padding: 2px 9px; cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.auth-btn:hover { color: var(--fg); border-color: #3d4854; }
.auth-login { color: var(--green); border-color: var(--green-dim); }
.auth-login:hover { color: var(--green); background: rgba(57,211,83,.1); border-color: var(--green); }

#toast {
  position: fixed; right: 18px; bottom: 52px; z-index: 500;
  background: var(--bg-inset); border: 1px solid var(--green-dim);
  border-radius: 6px; padding: 9px 16px;
  color: var(--fg); font-size: 12.5px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: none; }

/* ---------- 动效约束 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}