:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #09090b; color: #f5f5f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #4a210d 0, transparent 34rem), #09090b; }
.shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 4.5rem 0; }
.brand { margin-bottom: 2rem; }
.eyebrow { margin: 0 0 .45rem; color: #f97316; font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
h1, h2 { margin: 0; letter-spacing: -.03em; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: 1.35rem; }
.lede, .muted, .field-help { color: #c4c4ca; line-height: 1.55; } .lede { margin: .65rem 0 0; } .field-help { margin: .4rem 0 1.2rem; font-size: .82rem; }
.panel, .notice { border: 1px solid #3f3f46; border-radius: 16px; background: #18181b; padding: 1.5rem; margin: 1rem 0; box-shadow: 0 15px 45px rgb(0 0 0 / .2); }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.badge { background: #3f3f46; border-radius: 99px; padding: .35rem .65rem; font-weight: 700; font-size: .8rem; white-space: nowrap; }
label { display: block; font-weight: 750; margin-bottom: .5rem; } input { width: 100%; background: #09090b; border: 1px solid #52525b; color: #fff; border-radius: 9px; padding: .8rem .9rem; font: inherit; }
input:focus { outline: 3px solid #c2410c; border-color: #fb923c; } button { border: 0; border-radius: 9px; padding: .8rem 1rem; background: #ea580c; color: #fff; cursor: pointer; font-weight: 800; } button:hover { background: #c2410c; } button:disabled { opacity: .65; cursor: wait; } button.secondary { background: #3f3f46; }
.status { min-height: 1.4em; color: #d4d4d8; line-height: 1.45; } .status[data-kind="error"] { color: #fca5a5; } .status[data-kind="success"] { color: #86efac; }
.notice.warning { border-color: #fb923c; color: #fed7aa; background: #431407; }
@media (max-width: 500px) { .shell { padding-top: 2rem; } .section-heading { align-items: flex-start; flex-direction: column; } }