:root { color-scheme: dark; --bg:#101412; --panel:#171d1a; --panel2:#202824; --text:#f4f7f5; --muted:#94a099; --blue:#7ddcff; --yellow:#fdc704; --green:#54d68a; --red:#ff6b6b; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { min-height:100vh; margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text); background:radial-gradient(circle at 85% 0,rgba(125,220,255,.1),transparent 28rem),var(--bg); padding:max(20px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; }
.page { width:100%; max-width:820px; margin:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-size:14px; font-weight:700; }
.logo { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#294d3b; color:var(--yellow); font-size:18px; font-weight:800; letter-spacing:-1px; }
.back { color:var(--muted); text-decoration:none; font-size:14px; }
.back:hover { color:var(--text); }
.eyebrow { color:var(--yellow); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px; }
h1 { margin:0; font-size:clamp(35px,7vw,54px); letter-spacing:-2px; line-height:1; }
.lede { color:var(--muted); margin:14px 0 30px; line-height:1.6; }
.panel { background:rgba(23,29,26,.95); border:1px solid rgba(255,255,255,.07); border-radius:22px; padding:clamp(20px,5vw,32px); }
button,input,select { font:inherit; }
button { border:0; border-radius:12px; padding:12px 18px; cursor:pointer; font-weight:800; color:#102019; background:var(--blue); }
button:hover { filter:brightness(1.1); }
button:disabled { cursor:not-allowed; opacity:.38; filter:none; }
input,select { border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#252e2a; color:var(--text); padding:12px 14px; outline:none; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(125,220,255,.12); }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.secondary { background:#303a35; color:var(--text); }
.status { color:var(--muted); line-height:1.6; }
footer { display:flex; justify-content:space-between; color:#667169; font-size:13px; padding:40px 2px 6px; }
@media(max-width:520px){ .brand-text{display:none} .nav{margin-bottom:34px} .panel{border-radius:18px} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}