:root { color-scheme: dark; --black: #030303; --panel: #0a0b0d; --surface: #121417; --line: #31343a; --muted: #9aa0a8; --white: #f5f6f6; --orange: #ff7900; --orange-bright: #ff951d; --red: #ff453a; font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif; background: var(--black); color: var(--white); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(ellipse 90% 60% at 50% -25%, #2c1605 0%, var(--black) 56%); }
.shell { width: min(43rem, calc(100% - 2rem)); padding: 2.25rem 0; }
.brand-header { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; padding: 0 .25rem; }
.brand-mark { width: 4.2rem; height: 4.2rem; object-fit: contain; filter: drop-shadow(0 0 .8rem #ff790033); }
.brand-name { margin: 0 0 .24rem; color: var(--white); font-size: clamp(1.35rem, 5.5vw, 2.1rem); font-weight: 800; letter-spacing: .08em; line-height: 1.02; }
.brand-name span { color: var(--orange); }
h1 { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .2em; line-height: 1.2; text-transform: uppercase; }
.card { position: relative; overflow: hidden; background: linear-gradient(145deg, #121417, #08090b); border: 1px solid var(--line); border-radius: .65rem; padding: 1.5rem; box-shadow: 0 1.3rem 4rem #000b; }
.card::before { position: absolute; top: 0; left: 0; width: 5.5rem; height: 2px; background: var(--orange); content: ""; }
p { line-height: 1.55; }
.notice { border-left: .22rem solid var(--orange); padding-left: 1rem; }
.enroller-callout { margin-top: 1rem; background: #060708; border: 1px solid #292c31; border-radius: .45rem; padding: 1rem; box-shadow: inset 0 1px #ffffff0b; }
.enroller-callout strong { color: var(--orange); letter-spacing: .06em; text-transform: uppercase; }
.enroller-callout a { color: var(--orange-bright); font-weight: 700; }
form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.mode-switch { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.mode-button { border: 1px solid #35383d; border-radius: .35rem; background: #0b0c0e; color: var(--white); font-weight: 700; letter-spacing: .04em; }
.mode-button.active { border-color: var(--orange); background: var(--orange); color: var(--black); }
.hidden { display: none; }
label { display: grid; gap: .4rem; color: #e2e4e7; font-size: .88rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
input { width: 100%; padding: .85rem; border: 1px solid #3a3d42; border-radius: .35rem; outline: none; background: #050607; color: var(--white); font: 1rem "Segoe UI", sans-serif; }
input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px #ff790022; }
label.check { display: flex; align-items: flex-start; gap: .65rem; color: var(--muted); font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
label.check input { width: auto; margin-top: .2rem; accent-color: var(--orange); }
button, .button { display: inline-block; border: 1px solid var(--orange); border-radius: .35rem; padding: .85rem 1rem; background: var(--orange); color: var(--black); font: 800 .94rem "Arial Narrow", "Segoe UI", sans-serif; letter-spacing: .07em; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; }
button:hover, .button:hover { border-color: var(--orange-bright); background: var(--orange-bright); }
.fineprint { color: var(--muted); font-family: "Segoe UI", sans-serif; font-size: .82rem; letter-spacing: 0; }
code { border: 1px solid #373a3e; border-radius: .25rem; background: #050607; color: #f7a143; padding: .12rem .3rem; font-family: Consolas, monospace; font-size: .88em; }
footer { color: #727981; font-size: .73rem; letter-spacing: .08em; margin: 1.35rem .25rem 0; text-transform: uppercase; }
@media (max-width: 28rem) { .brand-header { align-items: flex-start; } .brand-mark { width: 3.55rem; height: 3.55rem; } .card { padding: 1.2rem; } }