:root { --navy:#17273F; --burgundy:#7A1E2B; --gold:#B4913E; --gold2:#C9A94A; --parchment:#F8F4EA; --ink:#1d1d1b; --muted:#5f5d57; --card:#ffffff; --line:rgba(0,0,0,.12); --ok:#2e7d32; --bad:#b3261e; --warn:#9a6b00; --console:#0f1623; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --parchment:#14181f; --ink:#ece7da; --muted:#b0aa9a; --card:#1c222c; --line:rgba(255,255,255,.12); --navy:#2a3f63; } }
:root[data-theme="dark"] { --parchment:#14181f; --ink:#ece7da; --muted:#b0aa9a; --card:#1c222c; --line:rgba(255,255,255,.12); --navy:#2a3f63; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--parchment); color:var(--ink); font:15px/1.45 "TeX Gyre Heros", Helvetica, Arial, sans-serif; display:flex; flex-direction:column; }
header { background:var(--navy); color:#fff; padding:10px 16px; border-bottom:4px solid var(--gold); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; }
header h1 { margin:0; font-size:18px; letter-spacing:.3px; }
header .sub { opacity:.85; font-size:13px; }
header a { color:#fff; }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; background:rgba(255,255,255,.15); }
.pill.ok { background:#2e7d32; } .pill.bad { background:#b3261e; } .pill.warn { background:#9a6b00; }
.linkbar { background:var(--card); border-bottom:1px solid var(--line); padding:8px 16px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.linkbar .stat { font-family:ui-monospace,Consolas,Menlo,monospace; font-size:13px; color:var(--muted); }
nav.tabs { display:flex; flex-wrap:wrap; gap:4px; padding:8px 16px 0; }
nav.tabs button { background:transparent; border:1px solid var(--line); border-bottom:none; border-radius:6px 6px 0 0; padding:7px 12px; cursor:pointer; color:var(--ink); font:inherit; }
nav.tabs button.active { background:var(--card); font-weight:700; border-color:var(--gold); }
main { flex:1; display:grid; grid-template-rows: minmax(260px, 1fr) minmax(140px, 220px); gap:0; min-height:0; }
.panel { display:none; background:var(--card); margin:0 16px; border:1px solid var(--line); border-top:3px solid var(--gold); padding:12px 16px; overflow:auto; }
.panel.active { display:block; }
.console { margin:8px 16px 12px; background:var(--console); color:#e6e6e6; font:13px/1.4 ui-monospace,Consolas,Menlo,monospace; padding:8px 12px; border-radius:6px; overflow:auto; white-space:pre-wrap; }
.row { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:6px 0; }
button, select, input[type=text], input[type=number], textarea { font:inherit; padding:6px 10px; border:1px solid var(--line); border-radius:6px; background:var(--parchment); color:var(--ink); }
button { cursor:pointer; background:var(--gold2); color:#1d1d1b; font-weight:600; border-color:transparent; }
button.secondary { background:transparent; border-color:var(--line); color:var(--ink); font-weight:500; }
button.danger { background:var(--burgundy); color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
h2 { font-size:17px; margin:4px 0 8px; color:var(--burgundy); }
h3 { font-size:15px; margin:12px 0 6px; }
p.hint, .hint { color:var(--muted); font-size:13px; margin:4px 0; }
pre.report { background:var(--parchment); border:1px solid var(--line); padding:10px; border-radius:6px; overflow:auto; font-size:12.5px; max-height:380px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { border:1px solid var(--line); padding:5px 8px; text-align:left; vertical-align:top; }
th { background:rgba(180,145,62,.18); }
td.ok { color:var(--ok); font-weight:700; } td.bad { color:var(--bad); font-weight:700; }
canvas.wave { width:100%; height:120px; background:var(--parchment); border:1px solid var(--line); border-radius:6px; display:block; }
.hexdump { font:12.5px/1.35 ui-monospace,Consolas,Menlo,monospace; white-space:pre; max-height:220px; overflow:auto; background:var(--parchment); border:1px solid var(--line); border-radius:6px; padding:6px 8px; }
.steps { counter-reset: s; padding-left:0; list-style:none; }
.steps li { position:relative; padding:6px 0 6px 36px; border-left:2px solid var(--line); margin-left:12px; }
.steps li::before { counter-increment:s; content:counter(s); position:absolute; left:-13px; top:6px; width:24px; height:24px; border-radius:50%; background:var(--gold); color:#1d1d1b; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:12px; }
.steps li.done::before { background:var(--ok); color:#fff; content:"✓"; }
.steps li.current { font-weight:600; }
dialog { border:1px solid var(--line); border-top:4px solid var(--burgundy); border-radius:8px; background:var(--card); color:var(--ink); max-width:520px; padding:16px 20px; font:inherit; }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog .row { justify-content:flex-end; margin-top:12px; }
.warnbox { border-left:5px solid var(--burgundy); background:var(--parchment); padding:8px 12px; margin:8px 0; font-size:13px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 760px) { .grid2 { grid-template-columns:1fr; } main { grid-template-rows: minmax(240px,1fr) 160px; } }