@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root { color-scheme:dark; --auth-bg:#061019; --auth-panel:rgba(10,24,35,.92); --auth-border:rgba(102,184,194,.2); --auth-text:#e9f3f7; --auth-muted:#8ca3b2; --auth-accent:#32d6c3; --auth-accent-soft:#7ceadf; --auth-danger:#ff6b78; }
body { font-family:Inter,"Segoe UI",system-ui,sans-serif !important; background:radial-gradient(circle at 18% 18%,rgba(50,214,195,.13),transparent 32%),radial-gradient(circle at 82% 82%,rgba(72,124,255,.12),transparent 34%),linear-gradient(145deg,#050d14 0%,var(--auth-bg) 48%,#071723 100%) !important; color:var(--auth-text) !important; position:relative; overflow:hidden; }
body::before,body::after { content:""; position:fixed; pointer-events:none; }
body::before { inset:0; opacity:.28; background-image:linear-gradient(rgba(91,166,179,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(91,166,179,.08) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
body::after { width:520px; height:520px; border:1px solid rgba(50,214,195,.12); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 90px rgba(50,214,195,.025),0 0 0 180px rgba(50,214,195,.015); }
.login-container,.container { position:relative; z-index:1; width:min(92vw,440px) !important; max-width:440px !important; padding:42px !important; overflow:hidden; background:linear-gradient(145deg,rgba(15,34,48,.96),var(--auth-panel)) !important; border:1px solid var(--auth-border); border-radius:22px !important; box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter:blur(22px); }
.login-container::before,.container::before { content:"SECURE ACCESS"; display:inline-flex; margin-bottom:24px; padding:5px 10px; border:1px solid rgba(50,214,195,.24); border-radius:999px; background:rgba(50,214,195,.07); color:var(--auth-accent-soft); font-size:10px; font-weight:700; letter-spacing:.16em; }
.container::before { content:"ACCESS CONTROL"; }
.logo,.icon { display:grid; width:72px; height:78px; margin:0 auto 20px !important; place-items:center; color:var(--auth-accent); filter:drop-shadow(0 10px 24px rgba(50,214,195,.22)); }
.logo svg { width:62px; height:70px; } .icon svg { width:68px; height:68px; }
.access-denied-icon { color:var(--auth-danger); filter:drop-shadow(0 10px 24px rgba(255,107,120,.18)); }
.login-container h1,.container h1 { margin-bottom:10px !important; color:var(--auth-text) !important; font-size:26px !important; font-weight:750; letter-spacing:-.035em; }
.login-container h1::before { content:"CiberShield "; color:var(--auth-accent-soft); }
.subtitle,.container p { color:var(--auth-muted) !important; line-height:1.65 !important; } .subtitle { margin-bottom:30px !important; font-size:13px !important; }
.login-btn { min-height:50px; margin:12px 0 !important; border:1px solid var(--auth-border) !important; border-radius:11px !important; font-family:inherit; font-size:13px !important; font-weight:600; transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease !important; }
.login-btn.microsoft { background:#142432 !important; color:var(--auth-text) !important; } .login-btn.google { background:#f5f8fa !important; color:#172630 !important; }
.login-btn:hover { transform:translateY(-1px) !important; border-color:rgba(50,214,195,.58) !important; box-shadow:0 12px 28px rgba(0,0,0,.28) !important; }
.login-btn:focus-visible,.logout-btn:focus-visible { outline:3px solid rgba(50,214,195,.32); outline-offset:3px; }
.footer { margin-top:28px !important; padding-top:20px; border-top:1px solid var(--auth-border); color:#718897 !important; letter-spacing:.02em; }
.footer strong,.email { color:var(--auth-accent-soft) !important; }
.logout-btn { margin-top:14px !important; padding:12px 22px !important; border:1px solid rgba(255,107,120,.25); border-radius:10px !important; background:rgba(255,107,120,.08) !important; color:#ff9ca5 !important; font-family:inherit; font-size:13px; font-weight:650; }
.logout-btn:hover { background:rgba(255,107,120,.15) !important; }
@media (max-width:520px) { .login-container,.container { padding:30px 24px !important; border-radius:18px !important; } .login-container h1,.container h1 { font-size:23px !important; } body::after { width:330px; height:330px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }