:root{
  --bg:#05090b;
  --bg2:#081013;
  --panel:rgba(14,22,26,.82);
  --panel2:rgba(9,16,20,.9);
  --border:rgba(119,230,235,.12);
  --border-strong:rgba(68,228,235,.26);
  --text:#f5fbfc;
  --muted:#8c9ca3;
  --cyan:#24e5eb;
  --cyan2:#00bfc8;
  --teal:#087b83;
  --green:#4de494;
  --red:#ff5b70;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --radius:24px;
}

*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -10%,rgba(20,208,216,.09),transparent 34%),
    linear-gradient(180deg,#05090b,#060b0e 45%,#05090b);
  overflow-x:hidden;
}

button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.68}

.ambient{
  position:fixed;
  width:340px;height:340px;
  border-radius:50%;
  filter:blur(100px);
  opacity:.12;
  pointer-events:none;
}
.ambient-a{background:var(--cyan);top:-180px;right:-120px}
.ambient-b{background:#006e78;bottom:-220px;left:-120px}

[hidden]{display:none!important}

.topbar{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  position:relative;
  z-index:10;
  background:rgba(4,8,10,.84);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.brand-mini{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mini img{
  width:45px;height:45px;object-fit:cover;
  border-radius:13px;
  box-shadow:0 0 24px rgba(36,229,235,.13);
}
.brand-mini div{display:grid;gap:2px}
.brand-mini strong{font-size:.94rem;letter-spacing:.08em}
.brand-mini span{font-size:.58rem;color:var(--cyan);letter-spacing:.19em}
.top-actions{display:flex;align-items:center;gap:8px}
.logout-btn,.icon-btn{
  min-height:42px;
  border-radius:13px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.035);
  color:var(--text);
}
.logout-btn{padding:0 15px;font-size:.76rem;font-weight:800;letter-spacing:.06em}
.icon-btn{width:42px;font-size:1.05rem}
.brand-line{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--cyan),var(--teal),transparent);
  box-shadow:0 0 14px rgba(36,229,235,.25);
}

.page-shell{width:min(100%,760px);margin:0 auto;padding:28px 19px 54px}

.login-screen{
  display:grid;
  align-content:center;
  gap:27px;
  min-height:calc(100vh - 125px);
}
.login-hero{text-align:center}
.logo-orbit{
  width:170px;height:170px;
  margin:0 auto 25px;
  position:relative;
  display:grid;
  place-items:center;
}
.login-logo{
  width:118px;height:118px;object-fit:cover;border-radius:28px;
  position:relative;z-index:3;
  box-shadow:0 20px 45px rgba(0,0,0,.4),0 0 30px rgba(36,229,235,.1);
}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(36,229,235,.13)}
.orbit-one{inset:1px;animation:orbit-spin 9s linear infinite}
.orbit-two{inset:16px;border-style:dashed;animation:orbit-spin 7s linear infinite reverse}
.orbit-one::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);top:12px;left:26px;
  box-shadow:0 0 16px var(--cyan);
}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

.eyebrow{
  margin:0 0 6px;
  color:#a3b3b8;
  font-size:.67rem;
  letter-spacing:.22em;
  font-weight:900;
}
.cyan{color:var(--cyan)}
.login-hero h1{
  margin:0;
  font-size:clamp(2rem,8vw,3rem);
  letter-spacing:.045em;
}
.login-copy{margin:9px 0 0;color:var(--muted)}

.glass-card{
  border:1px solid var(--border);
  background:linear-gradient(145deg,rgba(16,25,29,.88),rgba(8,14,17,.82));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.login-card{padding:21px}
.field{display:grid;gap:8px;margin-bottom:17px}
.field label{font-size:.83rem;font-weight:750;color:#dce8eb}

.input-shell{position:relative;display:flex;align-items:center}
.input-shell input{
  width:100%;min-height:58px;
  border:1px solid rgba(137,211,215,.12);
  background:rgba(3,8,10,.65);
  color:var(--text);
  border-radius:17px;
  padding:0 52px 0 47px;
  outline:none;
  transition:.22s ease;
}
.input-shell input:focus,textarea:focus{
  border-color:rgba(36,229,235,.55);
  box-shadow:0 0 0 3px rgba(36,229,235,.07),0 0 28px rgba(36,229,235,.06);
}
.input-icon{position:absolute;left:17px;color:#75868c;font-size:.9rem}
.cyan-text{color:var(--cyan)}
.reveal-btn{
  position:absolute;right:8px;
  min-height:42px;
  padding:0 12px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  color:#d8e4e7;
}
textarea{
  width:100%;
  resize:vertical;
  min-height:112px;
  border:1px solid rgba(137,211,215,.12);
  background:rgba(3,8,10,.65);
  color:var(--text);
  border-radius:17px;
  padding:16px;
  outline:none;
  line-height:1.45;
}

.primary-btn{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:17px;
  color:#021012;
  font-weight:950;
  letter-spacing:.045em;
  background:linear-gradient(100deg,#26e5eb,#19cfd7 47%,#0ca4ad);
  box-shadow:0 12px 34px rgba(16,207,216,.17),inset 0 1px rgba(255,255,255,.35);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.primary-btn:active{transform:scale(.985)}
.login-btn{display:flex;align-items:center;justify-content:center;gap:10px}
.arrow{font-size:1.2rem}
.server-state{
  min-height:32px;
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  font-size:.76rem;
  text-align:center;
}
.state-dot,.online-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px rgba(77,228,148,.55);
}
.online-dot{display:inline-block;margin-right:5px}

.dashboard{display:grid;gap:16px}
.welcome-card{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:18px;
}
.welcome-brand{display:flex;align-items:center;gap:14px;min-width:0}
.welcome-brand img{width:72px;height:72px;border-radius:19px;object-fit:cover}
.welcome-brand h2{margin:0;font-size:1.28rem}
.welcome-brand p:last-child{margin:6px 0 0;color:#9bb0b4;font-size:.78rem}
.web-chip{
  flex:none;padding:7px 10px;border-radius:999px;
  font-size:.65rem;font-weight:900;letter-spacing:.1em;
  color:var(--cyan);border:1px solid rgba(36,229,235,.2);
  background:rgba(36,229,235,.055);
}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric-card{padding:17px;display:grid;gap:5px}
.metric-wide{grid-column:1/-1}
.metric-label{color:#82959a;font-size:.65rem;font-weight:900;letter-spacing:.13em}
.metric-card strong{font-size:1.35rem}
.metric-card small{color:#718187;font-size:.7rem}

.activation-card,.status-card{padding:21px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px}
.card-head.compact{margin-bottom:13px}
.card-head h3{font-size:1.45rem;margin:0 0 5px}
.card-head p:last-child{margin:0;color:var(--muted);font-size:.78rem}
.bolt{
  width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;
  background:rgba(36,229,235,.08);
  border:1px solid rgba(36,229,235,.15);
  font-size:1.2rem;
}
.activation-btn{margin-top:4px}
.button-pulse{
  position:absolute;width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.38);right:17px;
  animation:button-pulse 1.3s ease-in-out infinite;
}
@keyframes button-pulse{50%{transform:scale(1.45);opacity:.25}}
.privacy-note{
  margin:13px 3px 0;
  color:#687b81;font-size:.68rem;text-align:center;line-height:1.45;
}

.timeline{display:grid}
.timeline-item{
  display:flex;align-items:flex-start;gap:12px;padding:11px 2px;
}
.timeline-dot{
  flex:none;width:10px;height:10px;border-radius:50%;
  background:#697b80;margin-top:4px;
}
.timeline-item strong{font-size:.79rem}
.timeline-item p{margin:4px 0 0;color:var(--muted);font-size:.75rem}
.timeline-item.success .timeline-dot{background:var(--green);box-shadow:0 0 12px rgba(77,228,148,.4)}
.timeline-item.error .timeline-dot{background:var(--red)}
.timeline-item.working .timeline-dot{background:var(--cyan);animation:dot-pulse .8s infinite alternate}
@keyframes dot-pulse{to{box-shadow:0 0 14px var(--cyan);transform:scale(1.2)}}

.modal-layer,.activation-overlay{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:22px;
  background:rgba(2,6,8,.87);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.login-loader-box{text-align:center}
.mx-loader{
  width:130px;height:130px;margin:0 auto 22px;
  position:relative;display:grid;place-items:center;
}
.mx-loader img{
  width:80px;height:80px;border-radius:20px;object-fit:cover;position:relative;z-index:2;
}
.mx-loader span{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(36,229,235,.1);
  border-top-color:var(--cyan);
  border-right-color:rgba(36,229,235,.6);
  box-shadow:0 0 25px rgba(36,229,235,.1);
  animation:loader-spin .8s linear infinite;
}
@keyframes loader-spin{to{transform:rotate(360deg)}}
.login-loader-box h2{margin:0 0 7px}
.login-loader-box p{margin:0;color:var(--muted);font-size:.78rem}

.activation-overlay{
  z-index:1100;
  background:
    radial-gradient(circle at 50% 26%,rgba(25,219,228,.12),transparent 28%),
    rgba(2,6,8,.96);
}
.activation-canvas{width:min(100%,440px);text-align:center}
.activation-emblem{
  width:172px;height:172px;margin:0 auto 24px;position:relative;
  display:grid;place-items:center;
}
.activation-emblem img{
  width:100px;height:100px;border-radius:24px;object-fit:cover;z-index:3;
  animation:logo-breathe 1.8s ease-in-out infinite alternate;
}
.progress-ring{
  position:absolute;inset:2px;border-radius:50%;
  border:3px solid rgba(36,229,235,.08);
  border-top-color:var(--cyan);
  border-right-color:#078b94;
  animation:ring-spin 1.1s linear infinite;
  box-shadow:0 0 25px rgba(36,229,235,.12);
}
.pulse-aura{
  position:absolute;inset:32px;border-radius:50%;
  background:rgba(36,229,235,.12);
  filter:blur(20px);
  animation:aura 1.5s ease-in-out infinite alternate;
}
@keyframes ring-spin{to{transform:rotate(360deg)}}
@keyframes aura{to{transform:scale(1.22);opacity:.25}}
@keyframes logo-breathe{to{transform:scale(1.035);filter:drop-shadow(0 0 20px rgba(36,229,235,.22))}}
.activation-working h2,.activation-result h2{margin:0;font-size:1.42rem}
.activation-message{color:var(--muted);font-size:.82rem;min-height:21px}

.device-chip{
  margin:18px auto;
  width:max-content;max-width:100%;
  padding:10px 15px;border-radius:14px;
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
}
.device-chip span{color:#6f8489;font-size:.62rem;font-weight:900;letter-spacing:.13em}
.device-chip strong{letter-spacing:.06em;color:#eaffff}

.process-list{
  display:grid;gap:7px;text-align:left;margin-top:22px;
}
.process-step{
  min-height:63px;
  display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:10px;
  padding:9px 11px;border-radius:16px;
  color:#64767b;border:1px solid transparent;
  transition:.25s ease;
}
.process-step.active{
  color:var(--text);
  background:rgba(36,229,235,.045);
  border-color:rgba(36,229,235,.12);
}
.process-step.done{color:#9fb4b8}
.process-step.done .process-icon{background:rgba(77,228,148,.12);color:var(--green)}
.process-icon{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);font-size:.68rem;font-weight:900;
}
.process-step.active .process-icon{
  color:#031113;background:linear-gradient(135deg,var(--cyan),#0eaab3);
  box-shadow:0 0 18px rgba(36,229,235,.15);
}
.process-step strong{display:block;font-size:.8rem}
.process-step small{display:block;margin-top:2px;color:#667a7f;font-size:.67rem}
.step-status{font-size:.6rem}
.process-step.active .step-status{color:var(--cyan);animation:blink .8s infinite alternate}
.process-step.done .step-status{color:var(--green)}
@keyframes blink{to{opacity:.2}}

.activation-footer{
  margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.055);
  display:flex;justify-content:space-between;color:#708489;font-size:.72rem;
}
.activation-footer strong{color:#e8f7f8}

.activation-result{display:grid;justify-items:center}
.success-icon,.error-icon{
  width:105px;height:105px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 24px;font-size:3.1rem;font-weight:900;
  animation:result-pop .35s ease-out;
}
.success-icon{
  color:#03130b;background:linear-gradient(135deg,#6effa6,#20ca78);
  box-shadow:0 0 35px rgba(77,228,148,.2);
}
.success-icon span{animation:check-pop .45s .15s both}
.error-icon{background:rgba(255,91,112,.12);border:1px solid rgba(255,91,112,.25);color:var(--red)}
@keyframes result-pop{from{transform:scale(.65);opacity:0}}
@keyframes check-pop{from{transform:scale(.3);opacity:0}}
.success-text{color:var(--green)}
.error-text{color:var(--red)}
.activation-result>p:not(.eyebrow){color:var(--muted);font-size:.82rem}
.success-device-card{
  width:100%;margin:23px 0 17px;padding:17px;border-radius:18px;
  background:rgba(255,255,255,.035);border:1px solid var(--border);display:grid;gap:4px;
}
.success-device-card span,.success-device-card small{font-size:.68rem;color:#72868b}
.success-device-card strong{font-size:1.38rem;letter-spacing:.075em}
.secondary-btn{
  width:100%;min-height:55px;border-radius:16px;
  border:1px solid var(--border-strong);
  background:rgba(36,229,235,.05);color:var(--text);font-weight:850;
}

@media(max-width:480px){
  .brand-mini span{display:none}
  .brand-mini img{width:42px;height:42px}
  .page-shell{padding-left:16px;padding-right:16px}
  .login-screen{min-height:calc(100vh - 110px)}
  .logo-orbit{width:150px;height:150px}
  .login-logo{width:105px;height:105px}
  .welcome-brand img{width:62px;height:62px}
  .welcome-brand h2{font-size:1.13rem}
  .activation-card,.status-card{padding:18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:2s!important;scroll-behavior:auto!important}
}