:root {
  --bg: #ffffff; --bg-elev: #f7f8fa; --bg-elev2: #eef1f5;
  --fg: #1a1d24; --fg-mute: #5b6373; --fg-dim: #9ca5b8;
  --accent: #2563eb; --accent-2: #6d4cff; --ok: #16a34a; --warn: #d97706; --err: #dc2626;
  --line: #e2e6ec; --line-soft: #eef0f3;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  --dur: 180ms;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--fg); font: 13px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
body { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 48px 1fr 28px; grid-template-areas: "topbar topbar" "outline active" "statusbar statusbar"; height: 100vh; width: 100vw; }
#topbar { grid-area: topbar; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--bg-elev); border-bottom: 1px solid var(--line); }
#topbar h1 { font-size: 13px; font-weight: 500; color: var(--fg); letter-spacing: 0.2px; }
#topbar #meta { margin-left: auto; color: var(--fg-mute); font-family: var(--mono); font-size: 11px; display: flex; gap: 14px; align-items: center; }
#topbar #meta .meta-score { color: var(--fg); }
#zoom-nav { display: flex; gap: 4px; }
#zoom-nav button { background: transparent; color: var(--fg-mute); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; font: 11px var(--mono); cursor: pointer; transition: all var(--dur); }
#zoom-nav button:hover { color: var(--fg); border-color: var(--fg-dim); }
#zoom-nav button[aria-pressed="true"] { background: var(--accent); color: #0c0e12; border-color: var(--accent); }
#outline { grid-area: outline; background: var(--bg-elev); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 0; }
#outline ol { list-style: none; }
#outline .step { padding: 6px 16px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; border-left: 2px solid transparent; transition: all var(--dur); }
#outline .step:hover { background: var(--bg-elev2); }
#outline .step[aria-current="true"] { background: var(--bg-elev2); border-left-color: var(--accent); }
#outline .step .nr { color: var(--fg-dim); font-family: var(--mono); font-size: 11px; min-width: 22px; }
#outline .step .name { color: var(--fg); font-size: 12px; }
#outline .step .scores { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--fg-mute); }
#outline .sections { padding-left: 30px; margin: 4px 0 8px; }
#outline .sec { padding: 3px 0; font-size: 11px; color: var(--fg-mute); cursor: pointer; }
#outline .sec:hover { color: var(--fg); }
#outline .sec[aria-current="true"] { color: var(--accent); }
#active { grid-area: active; overflow-y: auto; padding: 24px 32px; position: relative; }
#statusbar { grid-area: statusbar; display: flex; gap: 24px; padding: 0 16px; background: var(--bg-elev); border-top: 1px solid var(--line); align-items: center; font-family: var(--mono); font-size: 11px; color: var(--fg-mute); }
#statusbar #hints { margin-left: auto; }
#loader { color: var(--fg-mute); padding: 40px; text-align: center; font-family: var(--mono); }
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.card h2 { font-size: 12px; font-weight: 600; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card h2 .symbol { width: 16px; text-align: center; }
.card h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin: 8px 0 6px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-family: var(--mono); font-size: 11px; }
.kv dt { color: var(--fg-mute); }
.kv dd { color: var(--fg); word-break: break-all; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--bg-elev2); color: var(--fg-mute); font-family: var(--mono); font-size: 10px; margin-right: 4px; }
.tag.ok { background: rgba(95,217,122,0.15); color: var(--ok); }
.tag.warn { background: rgba(255,186,92,0.15); color: var(--warn); }
.tag.err { background: rgba(255,107,107,0.15); color: var(--err); }
.tag.ref { background: rgba(95,179,255,0.12); color: var(--accent); cursor: pointer; }
.tag.ref:hover { background: rgba(95,179,255,0.25); }
table.spec { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
table.spec th, table.spec td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
table.spec th { color: var(--fg-mute); font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
table.spec td { color: var(--fg); }
table.spec tbody tr { transition: background var(--dur); cursor: default; }
table.spec tbody tr[data-field] { cursor: pointer; }
table.spec tbody tr[data-field]:hover { background: var(--bg-elev2); box-shadow: inset 3px 0 0 var(--accent); }
table.spec tbody tr[data-field]:hover td:first-child { color: var(--accent); }
.empty { color: var(--fg-dim); font-style: italic; padding: 8px 0; font-size: 11px; }
.card-preview { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); line-height: 1.6; }
.scoreblock-text { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); }
.atlas-back { font-family: var(--mono); font-size: 11px; color: var(--accent); text-decoration: none; padding: 4px 8px; border: 1px solid var(--border); border-radius: 3px; margin-right: 12px; }
.atlas-back:hover { background: var(--bg-elev2); }
.atlas-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }