:root{
  --bg:#03080d;--panel:#07131d;--card:#0b1a26;--line:#18465f;--text:#ecfbff;--muted:#86a7b7;
  --cyan:#59e3ff;--blue:#159cff;--green:#55e6bd;--danger:#ff6d8a;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{
  margin:0;min-height:100vh;color:var(--text);overflow:hidden;
  font:13px/1.45 Inter,system-ui,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 18% 18%,rgba(20,161,255,.18),transparent 26%),
    radial-gradient(circle at 76% 70%,rgba(78,222,255,.12),transparent 28%),
    linear-gradient(135deg,#02070b,#07131b 48%,#02070b);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;
  background-image:
    linear-gradient(rgba(76,198,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(76,198,255,.07) 1px,transparent 1px);
  background-size:42px 42px;animation:gridDrift 24s linear infinite;
}
body:after{
  content:"";position:fixed;inset:auto -10% -34% -10%;height:48%;
  background:radial-gradient(ellipse at center,rgba(26,174,255,.18),transparent 62%);
  filter:blur(14px);pointer-events:none;
}
.access-shell{
  width:min(1120px,calc(100vw - 46px));min-height:100vh;margin:auto;
  display:grid;grid-template-columns:minmax(420px,500px) minmax(360px,430px);
  gap:28px;align-items:center;justify-content:center;padding:24px 0;position:relative;
}
.brand-stage,.auth-card{
  border:1px solid rgba(83,212,255,.24);
  background:linear-gradient(145deg,rgba(10,29,42,.82),rgba(4,10,15,.92));
  box-shadow:0 24px 90px rgba(0,0,0,.42),0 0 55px rgba(21,156,255,.12);
  overflow:hidden;position:relative;
}
.brand-stage{
  min-height:500px;border-radius:28px;isolation:isolate;
}
.brand-stage:before{
  content:"";position:absolute;inset:22px;border-radius:22px;
  border:1px solid rgba(89,227,255,.13);
  background:linear-gradient(120deg,rgba(89,227,255,.06),transparent 45%,rgba(89,227,255,.05));
}
.orbital-grid{
  position:absolute;left:50%;top:42%;width:390px;height:390px;margin:-195px 0 0 -195px;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 58%,rgba(85,223,255,.13) 59% 59.5%,transparent 60%),
    radial-gradient(circle,transparent 0 39%,rgba(85,223,255,.09) 40% 40.5%,transparent 41%),
    conic-gradient(from 0deg,transparent,rgba(87,224,255,.20),transparent 36%);
  filter:drop-shadow(0 0 28px rgba(89,227,255,.12));
  animation:orbitSpin 28s linear infinite;z-index:-1;
}
.logo-frame{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:270px;height:345px;border-radius:24px;overflow:hidden;
  border:1px solid rgba(105,222,255,.40);
  background:radial-gradient(circle at 50% 30%,rgba(71,200,255,.14),rgba(3,8,13,.92) 68%);
  box-shadow:0 0 28px rgba(67,196,255,.26),inset 0 0 35px rgba(60,195,255,.10);
  animation:floatLogo 6s ease-in-out infinite;
}
.logo-frame img{
  width:100%;height:100%;object-fit:contain;padding:12px;
  filter:saturate(1.18) contrast(1.06) drop-shadow(0 0 14px rgba(91,219,255,.28));
}
.logo-frame:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.14) 48%,transparent 55% 100%);
  transform:translateX(-120%);animation:logoSheen 5.5s ease-in-out infinite;
}
.scan-line{
  position:absolute;z-index:2;left:12px;right:12px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 18px var(--cyan);animation:scan 4.2s ease-in-out infinite;
}
.signal-stack{position:absolute;right:54px;top:204px;display:grid;gap:13px}
.signal-stack span{
  width:72px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,rgba(82,225,255,.85),transparent);
  box-shadow:0 0 14px rgba(89,227,255,.7);
  animation:pulseRail 2.3s ease-in-out infinite;
}
.signal-stack span:nth-child(2){animation-delay:.18s;width:104px}
.signal-stack span:nth-child(3){animation-delay:.36s;width:66px}
.signal-stack span:nth-child(4){animation-delay:.54s;width:92px}
.brand-copy{
  position:absolute;left:32px;right:32px;bottom:28px;
  padding:16px 18px;border:1px solid rgba(89,227,255,.18);border-radius:18px;
  background:rgba(4,13,20,.46);backdrop-filter:blur(12px);
}
.eyebrow{text-transform:uppercase;letter-spacing:.19em;color:var(--cyan);font-size:10px;font-weight:900;margin:0}
.brand-copy h1{font-size:34px;line-height:1;margin:5px 0 2px;letter-spacing:-.055em}
.brand-copy p:last-child{color:#bfd8e4;letter-spacing:.17em;text-transform:uppercase;font-size:10px;margin:0}
.auth-card{
  border-radius:26px;padding:30px;width:100%;isolation:isolate;
}
.auth-card:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 85% 20%,rgba(89,227,255,.16),transparent 34%);
  z-index:-1;
}
.card-glow{
  position:absolute;inset:-46%;
  background:conic-gradient(from 90deg,transparent,rgba(80,220,255,.16),transparent 28%);
  animation:orbitSpin 16s linear infinite;z-index:-2;
}
.auth-head{margin-bottom:20px}
.auth-head h2{font-size:29px;margin:8px 0 7px;letter-spacing:-.045em;line-height:1.05}
.auth-head p:not(.eyebrow){color:var(--muted);margin:0;font-size:13px}
form{display:grid;gap:13px}
label{display:grid;gap:6px}
label span{font-size:10px;color:#a5c7d8;text-transform:uppercase;letter-spacing:.14em}
input,select{
  width:100%;border:1px solid #25536d;background:#06121b;color:#fff;
  border-radius:13px;padding:12px 14px;outline:none;transition:.18s;
}
input:focus,select:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(89,227,255,.10),0 0 22px rgba(89,227,255,.12);
}
.primary{
  border:0;border-radius:14px;padding:13px 16px;cursor:pointer;
  background:linear-gradient(135deg,#0a9ce8,#69e8ff);color:#02121d;
  font-weight:950;letter-spacing:.02em;box-shadow:0 12px 32px rgba(19,174,255,.20);
  transition:.18s;margin-top:3px;
}
.primary:hover{transform:translateY(-2px);filter:saturate(1.18)}
.auth-meta{margin-top:15px;display:flex;align-items:center;gap:8px;color:#9fc2d2;font-size:11px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green);animation:beat 1.5s infinite}
.hint{margin:14px 0 0;color:#7799aa;font-size:11px}.error{color:var(--danger)!important}
.back-landing{display:inline-flex;margin-top:12px;color:#7fdfff;text-decoration:none;font-size:11px;letter-spacing:.04em;opacity:.82}
.back-landing:hover{opacity:1;text-shadow:0 0 12px rgba(95,230,255,.45)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes gridDrift{to{background-position:42px 42px}}
@keyframes floatLogo{50%{transform:translate(-50%,-52%) scale(1.012)}}
@keyframes scan{0%,100%{top:18px;opacity:.20}50%{top:calc(100% - 18px);opacity:1}}
@keyframes pulseRail{50%{transform:translateX(12px);opacity:.45}}
@keyframes logoSheen{0%,55%{transform:translateX(-125%)}78%,100%{transform:translateX(125%)}}
@keyframes beat{50%{transform:scale(1.32);opacity:.62}}
@media(max-width:980px){
  body{overflow:auto}
  .access-shell{grid-template-columns:1fr;width:min(520px,calc(100vw - 28px));padding:18px 0}
  .brand-stage{min-height:310px}
  .orbital-grid{width:280px;height:280px;margin:-140px 0 0 -140px}
  .logo-frame{width:170px;height:215px;top:43%}
  .signal-stack{display:none}
  .brand-copy{left:18px;right:18px;bottom:16px;padding:12px 14px}
  .brand-copy h1{font-size:26px}
  .auth-card{padding:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}