:root{
  --bg:#070b14;
  --surface:#0d1322;
  --surface-2:#111a2e;
  --gold:#eab308;
  --gold-bright:#facc15;
  --gold-deep:#ca8a04;
  --gold-soft:#facc15;
  --text:#f1f5f9;
  --ink:#f1f5f9;
  --muted:#8a98ad;
  --muted-2:#5d6b80;
  --line:rgba(255,255,255,.07);
  --line-gold:rgba(234,179,8,.22);
  --danger:#ef4444;
  --success:#22c55e;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.68,-0.55,0.27,1.55);
  --ease-snap:cubic-bezier(.36,.07,.19,.97);
  --speed-fast:.18s;
  --speed-normal:.3s;
  --speed-slow:.5s;
  --radius-sm:.65rem;
  --radius:14px;
  --radius-lg:20px;
  --radius-pill:999px;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
  background:
    radial-gradient(1100px 600px at 50% -10%,rgba(234,179,8,.08),transparent 60%),
    radial-gradient(800px 500px at 85% 110%,rgba(29,78,216,.07),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* ---------- Card ---------- */
.card-shell{width:100%;max-width:27rem}
.glass-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
  position:relative;
}
.lite .glass-panel{background:var(--surface)}
.glow-wrapper{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
#glow-effect{display:none}

/* ---------- Title ---------- */
.login-title{font-size:1.7rem;font-weight:700;color:var(--text);margin-bottom:.4rem}

/* ---------- Inputs ---------- */
.input-group{position:relative;z-index:1;margin-bottom:1.2rem}
.floating-input{
  width:100%;background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.2rem 2.9rem .5rem 2.9rem;
  color:var(--text);font-size:.95rem;
  transition:border-color var(--speed-fast),background var(--speed-fast),box-shadow var(--speed-fast);
}
.floating-input:focus{
  outline:none;border-color:var(--line-gold);
  background:rgba(234,179,8,.04);
  box-shadow:0 0 0 3px rgba(234,179,8,.08);
}
.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}
.floating-label{
  position:absolute;right:2.9rem;top:1rem;
  color:var(--muted);font-size:.95rem;
  transition:transform var(--speed-fast) var(--ease),color var(--speed-fast);
  pointer-events:none;transform-origin:right top;
}
.floating-input:focus~.floating-label,
.floating-input:not(:placeholder-shown)~.floating-label,
.floating-input:-webkit-autofill~.floating-label{transform:translateY(-.62rem) scale(.74);color:var(--gold)}
.input-icon{position:absolute;right:1rem;top:1.05rem;color:var(--muted-2);transition:color var(--speed-fast);width:1.2rem;height:1.2rem;pointer-events:none}
.floating-input:focus~.input-icon{color:var(--gold)}

.eye-toggle{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted-2);transition:color var(--speed-fast);padding:.25rem;z-index:5;border-radius:var(--radius-sm)}
.eye-toggle:hover{color:var(--gold)}
.eye-toggle:focus-visible{outline:2px solid var(--line-gold);outline-offset:2px}

.valid-check{position:absolute;left:2.9rem;top:50%;transform:translateY(-50%) scale(0);color:var(--success);transition:transform var(--speed-fast) var(--ease-bounce);pointer-events:none}
.valid-check.show{transform:translateY(-50%) scale(1)}

.type-pill{position:absolute;left:2.9rem;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);background:rgba(234,179,8,.12);color:var(--gold);border:1px solid var(--line-gold);opacity:0;transition:opacity var(--speed-fast);pointer-events:none}
.type-pill.show{opacity:1}

.strength-track{height:4px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);overflow:hidden;margin-top:.6rem}
.strength-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--danger),var(--gold-bright),var(--success));transition:width var(--speed-normal) var(--ease)}

/* ---------- Row / remember / links ---------- */
.row-between{display:flex;align-items:center;justify-content:space-between;margin:-.2rem 0 1.3rem;font-size:.8rem}
.remember{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:var(--muted);user-select:none}
.remember input{position:absolute;opacity:0;width:0;height:0}
.check-box{width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;transition:background var(--speed-fast),border-color var(--speed-fast)}
.check-box svg{width:12px;height:12px;color:#07101f;opacity:0;transform:scale(.4);transition:opacity var(--speed-fast),transform var(--speed-fast)}
.remember input:checked~.check-box{background:var(--gold);border-color:var(--gold)}
.remember input:checked~.check-box svg{opacity:1;transform:scale(1)}
.remember input:focus-visible~.check-box{outline:2px solid var(--line-gold);outline-offset:2px}
.forgot-link{color:var(--gold);font-weight:600;transition:color var(--speed-fast)}
.forgot-link:hover{color:var(--gold-bright);text-decoration:underline}

.divider{display:flex;align-items:center;gap:.85rem;margin:1.3rem 0;color:var(--muted-2);font-size:.72rem;letter-spacing:.06em}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}

.social-row{display:flex;gap:.75rem}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;border-radius:var(--radius);background:rgba(255,255,255,.02);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.82rem;transition:background var(--speed-fast),border-color var(--speed-fast)}
.social-btn:hover{background:rgba(234,179,8,.06);border-color:var(--line-gold)}
.social-btn svg{width:18px;height:18px}

/* ---------- Button ---------- */
.btn-premium{
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  color:#07101f;font-weight:700;padding:1.05rem;border-radius:var(--radius);
  position:relative;overflow:hidden;width:100%;
  box-shadow:0 10px 24px -8px rgba(234,179,8,.45);
  transition:transform var(--speed-fast),box-shadow var(--speed-fast),opacity var(--speed-fast);
}
.btn-premium:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(234,179,8,.55)}
.btn-shine{
  position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);pointer-events:none;z-index:1;
  animation:btnSweep 3.2s ease-in-out infinite;
}
@keyframes btnSweep{
  0%{left:-60%}
  55%,100%{left:130%}
}
.btn-premium:disabled .btn-shine{animation:none;opacity:0}
.btn-premium:active{transform:translateY(0)}
.btn-premium:disabled{cursor:default;opacity:.7}
.btn-premium:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rippleAnim .6s var(--ease);pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ---------- Entrance ---------- */
@keyframes customFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-up{opacity:0;animation:customFadeUp var(--speed-slow) var(--ease) forwards}
.stagger-1{animation-delay:.05s}
.stagger-2{animation-delay:.11s}
.stagger-3{animation-delay:.17s}
.stagger-4{animation-delay:.23s}
.stagger-5{animation-delay:.29s}
.stagger-6{animation-delay:.35s}
.stagger-7{animation-delay:.41s}
.lite .animate-fade-up{animation-duration:var(--speed-normal)}

@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
.shake-animation{animation:shake .5s var(--ease-snap) both}
.input-error{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}

.caps-warn{display:none;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--gold-bright)}
.caps-warn.show{display:flex;animation:customFadeUp var(--speed-normal) ease forwards}

/* ---------- Network bars ---------- */
.offline-bar,.online-bar{position:fixed;top:0;right:0;left:0;z-index:50;font-size:12px;font-weight:700;text-align:center;padding:8px;transform:translateY(-110%);transition:transform var(--speed-normal) ease}
.offline-bar{background:var(--danger);color:#fff}
.online-bar{background:var(--success);color:#04210f}
.offline-bar.show,.online-bar.show{transform:translateY(0)}

/* ---------- Success overlay ---------- */
#successOverlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:rgba(7,11,20,.92);opacity:0;pointer-events:none;transition:opacity .35s ease}
#successOverlay.show{opacity:1;pointer-events:all}
.success-ring{width:92px;height:92px;border-radius:50%;border:3px solid var(--line-gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 32px rgba(234,179,8,.3);animation:ringPop .5s var(--ease-bounce) forwards}
@keyframes ringPop{from{transform:scale(0)}to{transform:scale(1)}}
.check-path{stroke-dasharray:50;stroke-dashoffset:50;animation:drawCheck .45s ease forwards .25s}
@keyframes drawCheck{to{stroke-dashoffset:0}}

.msg-pop{animation:customFadeUp var(--speed-normal) ease forwards}
#progressBar{position:fixed;top:0;right:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-bright));z-index:70;transition:width var(--speed-normal) ease}
.spinner{width:20px;height:20px;border:2.5px solid rgba(7,16,31,.25);border-top-color:#07101f;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Boot gate hidden by request: silent background session check + auto-redirect */
#bootGate{display:none !important}
#bootGate.hide{opacity:0;pointer-events:none}
.boot-logo{font-size:2.2rem;font-weight:700;color:var(--gold);letter-spacing:-1px}
.boot-ring{width:54px;height:54px;border:3px solid var(--line-gold);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}

/* ---------- Scrollbar / selection ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(234,179,8,.4) transparent}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(234,179,8,.5);background-clip:padding-box}
::selection{background:rgba(234,179,8,.3);color:#fff}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .animate-fade-up{opacity:1}
}