:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07111f; color: #e9f4ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 15% 20%, #0a3651 0, transparent 34%), radial-gradient(circle at 85% 80%, #182465 0, transparent 30%), #07111f; }
body::before { content: ""; position: fixed; inset: 0; opacity: .14; pointer-events: none; background-image: linear-gradient(#6dd7ff 1px, transparent 1px), linear-gradient(90deg, #6dd7ff 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent); }
.shell { width: min(100% - 32px, 1040px); min-height: 100vh; margin: auto; display: grid; grid-template-columns: 1.15fr .85fr; align-content: center; gap: 72px; padding: 48px 0; }
.brand { animation: rise .6s ease both; } .mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #5cd4ff; color: #70ddff; font-weight: 800; letter-spacing: -1px; box-shadow: inset 0 0 22px #087dab66; }
.eyebrow, .card-label { margin: 26px 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .17em; color: #60d3f9; }
h1 { margin: 0; max-width: 510px; font-size: clamp(2.3rem, 5vw, 4.4rem); letter-spacing: -.055em; line-height: .98; } .intro { max-width: 380px; line-height: 1.65; color: #a7bdcf; }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #9ccbb8; font-size: .86rem; } .status span { width: 8px; height: 8px; border-radius: 50%; background: #50e3a4; box-shadow: 0 0 12px #50e3a4; }
.card { padding: 36px; border: 1px solid #2c5977; background: #091a2de8; box-shadow: 0 26px 70px #0007; backdrop-filter: blur(12px); animation: rise .6s .12s ease both; } .card-label { margin-top: 0; } h2 { margin: 0 0 28px; font-size: 1.7rem; }
form { display: grid; gap: 9px; } label { color: #b4cce1; font-size: .85rem; } input { margin-bottom: 13px; min-width: 0; border: 1px solid #315c7a; background: #061321; padding: 13px; color: #e9f4ff; font: inherit; outline: 0; transition: border .2s, box-shadow .2s; } input:focus { border-color: #66dfff; box-shadow: 0 0 0 3px #38bcdf22; }
button { margin-top: 8px; border: 1px solid #62d8ff; padding: 13px 16px; background: #5cd4ff; color: #061321; font: inherit; font-weight: 800; letter-spacing: .1em; cursor: pointer; transition: transform .18s, background .18s; } button:hover { transform: translateY(-2px); background: #a0eaff; } button span { float: right; font-size: 1.25em; }
.message { min-height: 1.4em; margin: 20px 0 0; color: #f1a6a6; font-size: .9rem; }.message.ok { color: #8ae5bc; }.hidden { display: none; }.admin { border-color: #3ccf93; }.admin p { color: #b9d1e4; }.flag-box { margin-top: 28px; padding: 19px; border: 1px dashed #4abf8e; background: #0d2a29; }.flag-box span { display: block; margin-bottom: 10px; color: #86dcb7; font-size: .7rem; font-weight: 800; letter-spacing: .15em; }.flag-box code { color: #fff2a2; font-size: 1rem; overflow-wrap: anywhere; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .shell { grid-template-columns: 1fr; gap: 34px; padding: 44px 0; } .card { padding: 28px; } }