:root{--bg:#0b1220;--fg:#e8eefc;--acc:#4da3ff;--mut:#8aa2c2}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,Segoe UI,Roboto}
header{padding:16px;border-bottom:1px solid #1a2742}
h1{margin:0 0 8px 0;font-size:20px}
nav button{margin-right:8px;padding:8px 12px;border:1px solid #28456e;background:#13203a;color:var(--fg);border-radius:8px;cursor:pointer}
nav button.active{background:var(--acc);color:#001a33;border-color:var(--acc)}
section{padding:16px;display:none}
section.active{display:block}
form{display:grid;gap:10px;max-width:520px}
input,button,summary{padding:10px;border-radius:8px;border:1px solid #2b3f66;background:#0f1a30;color:var(--fg)}
button{cursor:pointer}
details{border:1px dashed #2b3f66;padding:8px;border-radius:8px}
pre{white-space:pre-wrap;background:#0f1a30;padding:12px;border-radius:8px;border:1px solid #2b3f66;max-width:720px}
.card{border:1px solid #2b3f66;background:#0f1a30;border-radius:10px;padding:10px;margin:10px 0}
.small{color:var(--mut);font-size:12px}
.tab{transition:opacity .2s ease}