:root { color-scheme: light dark; --page:#f1f5f9; --surface:#fff; --text:#17212b; --page-text:#17212b; --muted:#526174; --page-muted:#526174; --border:#65758a; --focus:#2563eb; --page-focus:#2563eb; --action:#2563eb; --action-ink:#fff; --action-hover:#1745ab; }
body { --context-text:var(--page-text); --context-muted:var(--page-muted); background:var(--page); color:var(--page-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-tap-highlight-color:transparent; }
.card { padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.support,.section-title { color:var(--page-muted); font-size:12px; }
.card .support,.card .section-title { color:var(--muted); }
.section-title { font-weight:700; margin:8px 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.value { color:var(--accent); font-weight:700; font-size:16px; }
.action { padding:7px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:12px; }
.action:hover:not(:disabled),.selected-tab { background:var(--action)!important; color:var(--action-ink)!important; }
button { cursor:pointer; }
button:disabled { cursor:default; border-style:dashed; color:var(--muted); background:var(--surface); }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--page-focus)!important; outline-offset:3px; }
.card :focus-visible { outline-color:var(--focus)!important; }
input,select,textarea { color:var(--text)!important; background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:8px; padding:7px; min-width:0; max-width:100%; }
input::placeholder { color:var(--muted); opacity:1; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
.filter-label { display:flex; flex-direction:column; gap:3px; font-size:12px; flex:1 1 120px; min-width:0; }
.badge { padding:3px 6px; border:1px solid currentColor; border-radius:6px; font-size:11px; white-space:nowrap; }
.status-normal { background:var(--normal-bg); color:var(--normal-ink); }
.status-high { background:var(--high-bg); color:var(--high-ink); }
.status-low { background:var(--low-bg); color:var(--low-ink); }
.status-unknown { background:var(--unknown-bg); color:var(--unknown-ink); }
mark { background:var(--highlight); color:var(--highlight-ink); }
.fulltext { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.file-preview { width:100%; border:1px solid var(--border); border-radius:8px; margin-top:8px; }
iframe.file-preview { height:60vh; }
.sparkline { width:110px; height:26px; }
.sparkline polyline { fill:none; stroke:var(--page-focus); stroke-width:1.5; }
.spending-bar { flex:1; min-width:40px; height:8px; border:1px solid var(--border); border-radius:4px; }
.spending-bar > div { height:100%; background:var(--accent); border-radius:4px; }
.table-scroll { overflow-x:auto; }
.parameters-table { width:100%; min-width:540px; font-size:12px; text-align:left; border-collapse:collapse; }
.parameters-table th,.parameters-table td { padding:6px; border-bottom:1px solid var(--border); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:10px 16px; border-radius:12px; background:var(--action); color:var(--action-ink); z-index:50; }
.copy-buffer { position:fixed; opacity:0; }
/* Shell and dynamically rendered views consume the same semantic pairs. */
.shell-surface { --context-text:var(--text); --context-muted:var(--muted); background:var(--surface); color:var(--text); }
.shell-ink { color:var(--context-text); }
.shell-muted { color:var(--context-muted); }
.shell-border { border-color:var(--border); }
.shell-action,button.selected-tab { background:var(--action)!important; color:var(--action-ink)!important; }
.shell-action:hover:not(:disabled) { background:var(--action-hover)!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; transform:none!important; } .toast { left:12px; right:12px; } }
@media (forced-colors:active) { .card,.action,.badge,button,input,select { border:1px solid CanvasText!important; } :focus-visible { outline-color:Highlight!important; } }