:root { --bg:#050b10; --panel:#0a1620; --line:#123044; --text:#c9f3ff; --muted:#6b8fa0; --accent:#29e0ff; --bad:#ff5c6c; }
:root[data-theme="light"] { --bg:#eef6fa; --panel:#fff; --line:#cfe3ec; --text:#0b2433; --muted:#55707f; --accent:#0a8fb0; --bad:#d23b4d; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,sans-serif; }
.top { display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:.2em; color:var(--accent); }
.status { color:var(--muted); font-size:13px; }
.panel { margin:16px; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; gap:12px; }
.panel h2, .panel h3 { margin:0; font-size:14px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); }
.muted { color:var(--muted); margin:0; font-size:14px; }
input { flex:1; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; }
button { background:var(--accent); color:var(--bg); border:0; border-radius:10px; padding:11px 14px; font:inherit; font-weight:600; min-height:44px; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); }
.row, .stack { display:flex; gap:8px; }
.stack, .row { flex-direction:column; }
.results { margin:0; padding-left:18px; font:13px/1.5 ui-monospace,Consolas,monospace; word-break:break-all; }
.toast { position:fixed; left:16px; right:16px; bottom:16px; background:var(--panel); border:1px solid var(--accent); padding:12px; border-radius:12px; }
button.danger { background:var(--bad); color:#fff; }
[hidden] { display:none !important; }