@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --yellow: #ffd21a; --muted: #8e8d76; --line: #4c4300; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: #f6f5e9; background: #030303; font-family: "IBM Plex Mono", ui-monospace, monospace; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
.access-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, #282300 0, #0b0b08 31%, #030303 72%); }
.access-card { width: min(100%, 500px); padding: 34px; border: 1px solid var(--line); border-top: 4px solid var(--yellow); background: rgba(16, 16, 14, .97); box-shadow: 0 0 0 1px #1e1e19, 0 28px 90px rgba(0,0,0,.68); }
.brand-line { color: var(--yellow); font-size: clamp(20px, 4vw, 28px); font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.brand-mark { margin-right: 9px; }
.eyebrow, .subline, .footnote { margin: 8px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .13em; }
.signal-line { height: 1px; margin: 28px 0 24px; background: linear-gradient(90deg, var(--yellow), var(--line) 68%, transparent); }
h1 { margin: 0; color: var(--yellow); font-size: 20px; letter-spacing: .1em; }
form { display: grid; gap: 9px; margin-top: 30px; }
label { color: #c6ae19; font-size: 12px; font-weight: 600; letter-spacing: .1em; }
input { width: 100%; padding: 13px 14px; border: 1px solid #605600; border-radius: 0; outline: 0; color: #fffbe3; background: #050505; font: inherit; font-size: 16px; }
input:focus { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255, 210, 26, .14); }
button { margin-top: 15px; padding: 14px; border: 1px solid var(--yellow); border-radius: 0; cursor: pointer; color: #111000; background: var(--yellow); font: 700 14px inherit; letter-spacing: .1em; }
button:hover, button:focus-visible { color: var(--yellow); background: #111000; }
button span { float: right; font-size: 18px; line-height: 13px; }
.auth-error { margin: 7px 0 0; color: #ff4f4f; font-size: 12px; letter-spacing: .05em; }
.footnote { margin-top: 29px; font-size: 10px; }
@media (max-width: 480px) { .access-card { padding: 26px 20px; } .brand-line { font-size: 18px; letter-spacing: .04em; } }