:root {
  --hud-white: rgba(238, 255, 255, 0.92);
  --hud-soft: rgba(210, 245, 255, 0.62);
  --hud-blue: rgba(95, 190, 255, 0.58);
  --glass: rgba(8, 18, 26, 0.58);
  --line: rgba(230, 255, 255, 0.24);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #02050a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--hud-white); }
body { overflow: hidden; }
.vx1-gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 28px; background:
  radial-gradient(circle at 50% 45%, rgba(102, 190, 255, 0.18), transparent 34%),
  radial-gradient(circle at 16% 15%, rgba(255, 255, 255, 0.10), transparent 24%),
  linear-gradient(135deg, #02050a 0%, #071018 48%, #010308 100%); }
.vx1-gate::before { content: ""; position: fixed; inset: -20%; background:
  linear-gradient(90deg, transparent 0 49%, rgba(220,255,255,.06) 50%, transparent 51%),
  linear-gradient(0deg, transparent 0 49%, rgba(220,255,255,.04) 50%, transparent 51%); background-size: 74px 74px; transform: perspective(700px) rotateX(62deg) translateY(25%); opacity: .25; }
.scanlines { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,.045) 1px, transparent 1px, transparent 5px); mix-blend-mode: screen; opacity: .34; }
.noise { position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 3px 3px; opacity: .055; }
.terminal { position: relative; width: min(720px, 94vw); min-height: 560px; padding: 34px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), var(--glass); backdrop-filter: blur(18px); box-shadow: 0 0 70px rgba(74,170,255,.18), inset 0 0 60px rgba(255,255,255,.035); overflow: hidden; }
.terminal::before { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.11); pointer-events:none; }
.terminal-header, .terminal-footer { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; position:relative; z-index:2; }
.eyebrow { margin:0 0 8px; color:var(--hud-soft); letter-spacing:.24em; font-size:12px; }
h1 { margin:0; letter-spacing:.12em; font-size: clamp(30px, 5vw, 52px); font-weight:700; text-shadow: 0 0 22px rgba(112,210,255,.46); }
.status-pill { border:1px solid rgba(255,255,255,.2); padding:9px 12px; font-size:12px; letter-spacing:.16em; color:var(--hud-soft); background: rgba(255,255,255,.05); white-space:nowrap; }
.status-pill span { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background: rgba(255,80,80,.85); box-shadow:0 0 15px rgba(255,80,80,.8); }
.orbital { position:relative; z-index:1; width:190px; height:190px; margin:46px auto 34px; display:grid; place-items:center; }
.ring, .core { position:absolute; border-radius:50%; }
.ring { border:1px solid rgba(230,255,255,.34); box-shadow:0 0 24px rgba(93,190,255,.2); animation: spin 12s linear infinite; }
.ring-a { width:188px; height:188px; border-left-color: transparent; }
.ring-b { width:132px; height:132px; border-right-color: transparent; animation-duration:8s; animation-direction: reverse; }
.ring-c { width:78px; height:78px; border-top-color: transparent; animation-duration:5s; }
.core { width:18px; height:18px; background: var(--hud-white); box-shadow:0 0 30px rgba(170,235,255,.9); }
@keyframes spin { to { transform: rotate(360deg); } }
.access-form { position:relative; z-index:2; display:grid; gap:16px; max-width:460px; margin:0 auto; }
label span { display:block; margin-bottom:7px; color:var(--hud-soft); letter-spacing:.18em; font-size:12px; }
input { width:100%; padding:15px 16px; border:1px solid rgba(230,255,255,.28); border-radius:0; outline:none; background:rgba(0,10,18,.56); color:var(--hud-white); font-size:15px; letter-spacing:.08em; box-shadow:inset 0 0 20px rgba(95,190,255,.06); }
input:focus { border-color: rgba(230,255,255,.72); box-shadow:0 0 22px rgba(95,190,255,.22), inset 0 0 20px rgba(95,190,255,.08); }
button { margin-top:6px; padding:16px; border:1px solid rgba(230,255,255,.45); background:linear-gradient(90deg, rgba(230,255,255,.12), rgba(95,190,255,.18)); color:var(--hud-white); letter-spacing:.2em; font-weight:800; cursor:pointer; text-shadow:0 0 14px rgba(122,215,255,.55); }
button:hover { background:linear-gradient(90deg, rgba(230,255,255,.18), rgba(95,190,255,.28)); box-shadow:0 0 28px rgba(95,190,255,.24); }
.hint, .error { min-height:22px; font-size:12px; letter-spacing:.14em; color:var(--hud-soft); }
.error { color: rgba(255,150,150,.95); text-shadow:0 0 12px rgba(255,80,80,.35); }
.terminal-footer { margin-top:30px; color:rgba(230,255,255,.48); font-size:11px; letter-spacing:.16em; flex-wrap:wrap; }
.corner { position:absolute; width:52px; height:52px; border-color:rgba(230,255,255,.78); z-index:3; }
.corner-tl { top:0; left:0; border-top:2px solid; border-left:2px solid; }
.corner-tr { top:0; right:0; border-top:2px solid; border-right:2px solid; }
.corner-bl { bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; }
.corner-br { bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; }
@media (max-width: 640px) { .terminal { padding: 24px; min-height: 0; } .orbital { width:140px; height:140px; margin:32px auto 26px; } .ring-a{width:138px;height:138px}.ring-b{width:96px;height:96px}.ring-c{width:58px;height:58px}.terminal-footer{display:none;} }