:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; color: #e4ebf5; background: #0b101a; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at top right, #172c45, transparent 60%); min-height: 100vh; }
main { max-width: 760px; padding: 64px 24px; margin: auto; }
.eyebrow { color: #89baff; letter-spacing: .16em; font-size: .75rem; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; letter-spacing: -.04em; margin: 20px 0; }
.intro, .footnote { color: #a0aec3; }
.intro { margin-bottom: 30px; }
.card { background: #131d2ad9; border: 1px solid #2a384d; border-radius: 16px; padding: 24px; margin: 16px 0; }
.status-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.status-row span { color: #aab7cb; }
.ok { color: #70e2b4; }
.waiting { color: #f4c97e; }
label { display: block; margin-bottom: 12px; font-weight: 600; }
.input-row { display: flex; gap: 10px; }
input { min-width: 0; flex: 1; border: 1px solid #40536f; border-radius: 9px; padding: 12px; background: #0d1522; color: inherit; font: inherit; }
button { border: 0; border-radius: 9px; padding: 12px 20px; font: inherit; font-weight: 700; background: #89baff; color: #10213d; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
input:focus-visible, button:focus-visible { outline: 2px solid #adceff; outline-offset: 3px; }
.log { margin-top: 20px; min-height: 88px; max-height: 240px; overflow: auto; font: .85rem/1.7 ui-monospace, monospace; overflow-wrap: anywhere; }
.log p { margin: 6px 0; }
.footnote { font-size: .8rem; text-align: center; }
@media (max-width: 440px) { main { padding: 32px 16px; } .card { padding: 18px; } .input-row { flex-direction: column; } }