:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#090b0f; color:#f2f4f8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:#090b0f; }
.shell { width:min(760px,100%); margin:0 auto; padding:20px 14px 40px; }
.head,.row { display:flex; gap:12px; align-items:center; }
.head { justify-content:space-between; margin-bottom:14px; }
.between { justify-content:space-between; }
.brand { font-weight:800; letter-spacing:.08em; }
.muted { color:#9da7b5; font-size:.86rem; line-height:1.45; }
.card { border:1px solid #29313d; border-radius:14px; padding:16px; margin:0 0 14px; background:#11151b; }
.gate { margin-top:18vh; }
form { display:flex; gap:8px; margin-top:12px; }
input,button { font:inherit; border-radius:10px; border:1px solid #364150; }
input { min-width:0; flex:1; background:#090c10; color:#fff; padding:12px; }
button { background:#1d2630; color:#fff; padding:11px 14px; font-weight:700; }
button:disabled { opacity:.5; }
button.danger { border-color:#7b3030; }
button.small { padding:7px 10px; font-size:.8rem; }
button.ghost { width:100%; background:transparent; color:#9da7b5; }
.actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; margin-top:14px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#080a0d; border:1px solid #252b34; border-radius:10px; padding:12px; min-height:72px; }
pre[data-ok="1"] { border-color:#2f694b; }
pre[data-ok="0"] { border-color:#743737; }
.pill { padding:6px 9px; border-radius:999px; border:1px solid #394451; color:#b9c2ce; font-size:.78rem; }
.pill.ok { border-color:#2f694b; }
.pill.bad,.error { color:#ff8f8f; }
@media (max-width:520px) { .head { align-items:flex-start; } form { flex-direction:column; } }