/* 芝麻智能 · 教师端 共享样式。token 唯一来源：../../colors_and_type.css（间距 v2 放松版） */
@import url("../../colors_and_type.css");
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg)}
body{font:var(--fs-body)/var(--lh-body) var(--font-body);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:0}
.serif{font-family:var(--font-display)}
.muted{color:var(--muted)}
.hot{color:var(--accent-ink)}
.small{font-size:12px;letter-spacing:.01em}
mark{background:var(--accent-wash);color:var(--accent-ink);padding:0 2px}

/* ---------- 左栏（由 ../js/nav.js 渲染；全站共用） ---------- */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}
.nav{position:sticky;top:0;height:100vh;width:var(--nav-w);overflow-y:auto;border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;padding:28px 0 20px;z-index:45}
.nav .ab{display:none}
.nav-brand{display:block;padding:0 24px 20px}
.nav-brand b{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.nav-brand>span{display:block;font-size:12px;color:var(--muted);letter-spacing:.02em}
.nav-search{position:relative;margin:0 16px var(--sp-3)}
.nav-search input{width:100%;height:36px;border:1px solid var(--border-strong);background:var(--bg);padding:0 40px 0 12px;font-size:13px}
.nav-search input:focus{outline:2px solid var(--fg);outline-offset:-1px}
.nav-search kbd{position:absolute;right:10px;top:10px;font:11px/1 var(--font-num);color:var(--muted)}
.nav-res{margin-top:4px;border:1px solid var(--fg);background:var(--bg);padding:4px 0 6px}
.nav-res h5{font:500 12px var(--font-body);color:var(--muted);padding:6px 12px 2px}
.nav-res a{display:block;padding:6px 12px;font-size:13px;color:var(--fg)}
.nav-res a small{display:block;font-size:12px;color:var(--muted)}
.nav-res a:hover{background:var(--surface)}
.nav-res .none{padding:8px 12px;font-size:12px;color:var(--muted)}
.nav-item{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 24px;font-size:14px;color:var(--muted);border-left:2px solid transparent}
.nav-item:hover{color:var(--fg);background:var(--bg)}
.nav-item.on{color:var(--fg);font-weight:600;border-left-color:var(--accent);background:var(--bg)}
.nav-item .c{font:400 12px var(--font-num);font-variant-numeric:tabular-nums;color:var(--fg)}
.nav-grp{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.nav-grp h4{font:500 12px var(--font-body);color:var(--muted);letter-spacing:.02em;padding:0 24px var(--sp-2)}
.nav-row{display:block;padding:6px 24px 6px 22px;font-size:13px;color:var(--fg);border-left:2px solid transparent;overflow:hidden}
.nav-row:hover{background:var(--bg)}
.nav-row small{display:block;font-size:12px;color:var(--muted)}
.nav-row .n{float:right;font-size:12px;color:var(--muted)}
.nav-row.hot{border-left-color:var(--accent)}
.nav-row.hot b{color:var(--accent-ink);font-weight:600}
.nav-row .pg{display:block;position:relative;height:3px;background:var(--border);margin:6px 0 2px}
.nav-row .pg i{position:absolute;inset:0 auto 0 0;background:var(--fg)}
.nav-foot{margin-top:auto;padding:16px 24px 0;border-top:1px solid var(--border);font-size:13px}
.nav-foot b{display:block;font-weight:600}
.nav-foot>span{color:var(--muted);font-size:12px}
.nav-links{display:flex;gap:12px;margin-top:var(--sp-2);font-size:12px}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
/* 1024 宽：收成 64 宽的两字缩写栏，悬停 / 键盘聚焦时浮层展开（墨线描边，不加投影） */
@media (max-width:1100px){
  .app{grid-template-columns:64px 1fr}
  .nav:not(:hover):not(:focus-within){width:64px}
  .nav:not(:hover):not(:focus-within) .full-only,.nav:not(:hover):not(:focus-within) .lb,.nav:not(:hover):not(:focus-within) .nav-item .c{display:none}
  .nav:not(:hover):not(:focus-within) .ab{display:inline}
  .nav:not(:hover):not(:focus-within) .nav-brand{padding:0 0 20px;text-align:center}
  .nav:not(:hover):not(:focus-within) .nav-brand b{font-size:15px}
  .nav:not(:hover):not(:focus-within) .nav-item{justify-content:center;padding:0;font-size:13px}
  .nav:hover,.nav:focus-within{width:232px;border-right-color:var(--fg)}
}

/* ---------- 通用 ---------- */
.page-head{padding:var(--page-pad-top) 0 var(--sp-7);border-bottom:1px solid var(--fg)}
.crumb{font-size:12px;color:var(--muted);margin-bottom:var(--sp-3);letter-spacing:.02em}
.crumb a:hover{color:var(--fg);text-decoration:underline}
h1{font-family:var(--font-display);font-size:28px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
h2{font-family:var(--font-display);font-size:20px;line-height:1.3;font-weight:600}
h3{font-family:var(--font-display);font-size:16px;font-weight:600}
.meta{font-size:13px;color:var(--muted);margin-top:var(--sp-3)}
.meta i{font-style:normal;margin:0 8px;color:var(--border-strong)}

.btn{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-h);padding:0 18px;font-size:13px;letter-spacing:.02em;border:1px solid var(--border-strong);background:var(--bg);white-space:nowrap}
.btn:hover{border-color:var(--fg)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:oklch(0.99 0 0);font-weight:600}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{font-size:13px;color:var(--fg);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;white-space:nowrap}
.link:hover{text-decoration-color:var(--fg)}
.link.on{color:var(--accent-ink);text-decoration-color:var(--accent)}
.acts{display:flex;gap:var(--gap-inline);align-items:center}

.tag{display:inline-block;font-size:12px;line-height:22px;padding:0 8px;border:1px solid var(--border-strong);color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.tag.hot{border-color:var(--accent);color:var(--accent-ink)}
.tag.solid{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.tag.ai{border-style:dashed}

.delta{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:13px;margin-left:8px;color:var(--muted)}
.delta.down{color:var(--accent-ink)}

/* 可核对的数字 */
.ref{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:600;border-bottom:1px dotted var(--fg);padding:0 1px;cursor:pointer}
.ref.name{font-family:var(--font-body)}
.ref:hover{background:var(--accent-wash)}
.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%,40%{background:var(--accent-wash);outline:2px solid var(--accent);outline-offset:4px}100%{background:transparent;outline-color:transparent}}

/* 数据表 */
.table{width:100%;border-collapse:collapse}
.table th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;padding:var(--th-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--border-strong);letter-spacing:.02em;white-space:nowrap}
.table td{padding:var(--row-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--border);vertical-align:middle}
.table tr.x-row td,.table tr.q-x td{vertical-align:top}
.table .r{text-align:right}
.table tr.row-link{cursor:pointer}
.table tr.row-link:hover td{background:var(--surface)}

/* 比例条 */
.meter{display:inline-block;width:72px;height:6px;background:var(--border);vertical-align:middle;margin-right:12px;position:relative}
.meter b{position:absolute;inset:0 auto 0 0;background:var(--bar)}
.meter.hot b{background:var(--accent)}

/* 来源标注 */
.src{font-size:12px;color:var(--muted);letter-spacing:.01em}
.src::before{content:"来源 ";color:var(--fg);font-weight:500}

/* 对话框 */
.scrim{position:fixed;inset:0;background:oklch(0.24 0.012 255 / .35);display:none;align-items:center;justify-content:center;z-index:50}
.scrim.on{display:flex}
.dialog{width:460px;background:var(--bg);border:1px solid var(--fg);padding:var(--sp-8)}
.dialog h3{font-size:18px;margin-bottom:var(--sp-4)}
.dialog p{color:var(--fg);margin-bottom:var(--sp-3)}
.dialog .acts{justify-content:flex-end;margin-top:var(--sp-8);gap:var(--sp-3)}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 20px;font-size:13px;display:none;gap:20px;align-items:center;z-index:60}
.toast.on{display:flex}
.toast button{color:var(--bg);text-decoration:underline;text-underline-offset:3px}
