:root {
  --access-bg: #1102a0;
  --access-bg-2: #2a04ff;
  --access-panel: #373737;
  --access-text: #ffffff;
  --access-green: #9ee6d0;
  --access-gold: #ffc61a;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-width: 320px; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: linear-gradient(110deg, var(--access-bg), var(--access-bg-2)); color: var(--access-text); font-family: "Rajdhani", sans-serif; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--access-gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.access-background { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(0, 255, 216, 0.13), transparent 28%); }
.access-card { position: relative; z-index: 2; width: min(calc(100% - 2rem), 500px); border: 1px solid rgba(48, 231, 255, 0.28); border-radius: 15px; background: rgba(55, 55, 55, 0.96); box-shadow: 0 0 25px rgba(103, 238, 228, 0.72), 0 0 70px rgba(33, 117, 255, 0.52); padding: 2rem; text-align: center; }
.access-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 1.2rem; place-items: center; border: 1px solid rgba(255, 198, 26, 0.25); border-radius: 50%; background: rgba(255, 198, 26, 0.09); color: var(--access-gold); font-size: 1.5rem; }
.access-card h1 { max-width: 390px; margin: 0 auto 1.2rem; font-family: "Orbitron", monospace; font-size: 1rem; line-height: 1.45; text-shadow: 0 0 14px rgba(255,255,255,.7); text-transform: uppercase; }
.access-card > p { margin-bottom: 1.2rem; color: rgba(255,255,255,.72); }
.access-form input[type="password"] { width: 100%; height: 58px; border: 0; border-radius: 999px; background: white; color: #171717; padding: 0 1.5rem; }
.remember-row { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin: 1rem 0; color: var(--access-green); font-family: "Orbitron", monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; }
.remember-row input { accent-color: var(--access-green); }
.unlock-button { width: 80%; min-height: 44px; border: 2px solid white; border-radius: 9px; background: #342d37; color: white; cursor: pointer; font-weight: 700; box-shadow: 0 0 16px rgba(255,255,255,.55); }
.access-status { min-height: 1.4rem; margin-top: 0.8rem; color: var(--access-gold); font-size: 0.8rem; }
.access-links { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.2rem; }
.access-links a { color: rgba(255,255,255,.7); font-size: 0.78rem; text-decoration: none; }
.access-note { margin-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; color: rgba(255,255,255,.5); font-size: 0.7rem; }

body.modern { background: #080b12; }
body.modern .access-background { background: radial-gradient(circle at 0 0, rgba(31,173,126,.12), transparent 32%), radial-gradient(circle at 100% 100%, rgba(255,198,26,.07), transparent 32%), linear-gradient(rgba(31,173,126,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(31,173,126,.04) 1px, transparent 1px); background-size: auto, auto, 60px 60px, 60px 60px; }
body.modern .access-card { border-color: rgba(31,173,126,.24); background: linear-gradient(145deg, rgba(20,25,36,.96), rgba(13,18,28,.94)); box-shadow: 0 25px 60px rgba(0,0,0,.55); }
body.modern .access-card h1 { text-shadow: none; }
body.modern .access-form input[type="password"] { height: 48px; border: 1px solid #252b37; border-radius: 7px; background: #1a202b; color: white; }
body.modern .unlock-button { width: 100%; border: 1px solid rgba(255,198,26,.42); background: rgba(255,198,26,.07); color: var(--access-gold); box-shadow: 0 0 16px rgba(255,198,26,.18); font-family: "Orbitron", monospace; font-size: .65rem; letter-spacing: .11em; text-transform: uppercase; }

@media (max-width: 520px) { .access-card { padding: 1.5rem; } .unlock-button { width: 100%; } }