/* ============================================================================
   RITENGER · LOGIN  ·  Telegram-mobile skin
   Loaded after assets/site.css — this file only re-dresses the auth gate so
   the first screen already looks like the messenger behind it. No layout or
   behaviour lives here.
   ============================================================================ */

body[data-page="login"]{
  background:#0e1621;
  color:#ffffff;
  font-family:Vazirmatn,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* the marketing page's aurora is replaced by the chat wallpaper's wash */
body[data-page="login"] .auth-page::before,
body[data-page="login"] .auth-page::after{display:none}
body[data-page="login"] .auth-page{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  max-width:100%;
  background:
    radial-gradient(120% 70% at 88% -10%,rgba(51,144,236,.20),transparent 62%),
    radial-gradient(100% 60% at -10% 110%,rgba(51,144,236,.12),transparent 58%),
    linear-gradient(178deg,#101b28 0%,#0e1621 45%,#0a121c 100%);
}

/* ---------- brand ---------- */
body[data-page="login"] .auth-brand{margin-bottom:22px;animation:none}
body[data-page="login"] .auth-brand .ring{
  width:76px;height:76px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#4fa8f0,#3390ec 55%,#2b7cc9);
  box-shadow:0 10px 30px -10px rgba(51,144,236,.65);
  animation:none;
}
body[data-page="login"] .auth-brand .ring img{width:46px;height:46px;object-fit:contain;filter:none}
body[data-page="login"] .auth-brand h1{font-size:26px;font-weight:600;letter-spacing:-.3px;color:#fff}
body[data-page="login"] .auth-brand h1 a{color:inherit;text-decoration:none}
body[data-page="login"] .auth-brand p{font-size:12.5px;color:#8195a8;margin-top:6px}

/* ---------- card ---------- */
body[data-page="login"] .auth-card{
  width:100%;max-width:400px;margin:0 auto;
  background:#17212b;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:18px 16px 16px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.75);
  animation:none;
}

/* segmented control */
body[data-page="login"] .seg{
  position:relative;display:flex;gap:2px;padding:3px;margin-bottom:14px;
  background:#242f3d;border:0;border-radius:10px;
}
body[data-page="login"] .seg-ind{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);
  border-radius:8px;background:#3390ec;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .24s cubic-bezier(.22,.9,.24,1);
}
body[data-page="login"] .seg-btn{
  position:relative;z-index:1;flex:1;height:36px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:#8195a8;background:none;border:0;
  transition:color .18s;
}
body[data-page="login"] .seg-btn.on{color:#fff;font-weight:600}

/* fields */
body[data-page="login"] .field{margin-bottom:12px}
body[data-page="login"] .field label{
  display:block;font-size:12px;font-weight:500;color:#8195a8;margin:0 2px 6px;
}
body[data-page="login"] .field .wrap{
  height:46px;padding:0 12px;border-radius:10px;
  background:#242f3d;border:1px solid transparent;
  transition:border-color .16s,box-shadow .16s;
}
body[data-page="login"] .field .wrap:focus-within{
  border-color:#3390ec;box-shadow:0 0 0 3px rgba(51,144,236,.16);background:#242f3d;
}
body[data-page="login"] .field input{
  font-size:15px;color:#fff;background:none;
}
body[data-page="login"] .field input::placeholder{color:#647382}
body[data-page="login"] .field .ico{color:#8195a8}
body[data-page="login"] .field .eye{color:#8195a8;border-radius:50%}
body[data-page="login"] .field .eye:hover{color:#fff;background:rgba(255,255,255,.06)}

/* primary action */
body[data-page="login"] .btn-primary{
  width:100%;height:46px;border-radius:10px;border:0;margin-top:6px;
  background:#3390ec;color:#fff;font-size:15px;font-weight:600;
  box-shadow:none;animation:none;
  transition:background .16s,transform .14s;
}
body[data-page="login"] .btn-primary:hover{background:#2b82d9}
body[data-page="login"] .btn-primary:active{transform:scale(.99)}
body[data-page="login"] .btn-primary::after{display:none}
body[data-page="login"] .btn-primary:disabled{opacity:.55}

/* notes + footer */
body[data-page="login"] .auth-note{font-size:12px;color:#647382;line-height:1.75;margin:8px 2px 0}
body[data-page="login"] .err{color:#e5534b;font-size:12.5px;min-height:18px;margin:6px 0 2px;text-align:center}
body[data-page="login"] .auth-foot{font-size:11.5px;color:#647382;margin-top:14px;text-align:center}
body[data-page="login"] .auth-foot a{color:#6ab2f2;text-decoration:none}
body[data-page="login"] .auth-foot a:hover{text-decoration:underline}
body[data-page="login"] .locked,
body[data-page="login"] .locked a{color:#6ab2f2}

/* OTP boxes */
body[data-page="login"] .otp-boxes input{
  background:#242f3d;border:1px solid transparent;border-radius:10px;color:#fff;
}
body[data-page="login"] .otp-boxes input:focus{border-color:#3390ec;box-shadow:0 0 0 3px rgba(51,144,236,.16)}

/* language switch */
body[data-page="login"] .lang-btn{
  background:#1d2a36;border:1px solid rgba(255,255,255,.07);color:#c7d3df;
  border-radius:10px;
}
body[data-page="login"] .lang-btn:hover{background:#24323f;color:#fff}
body[data-page="login"] .lang-menu{
  background:#17212b;border:1px solid rgba(255,255,255,.08);border-radius:12px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
}
body[data-page="login"] .lang-menu button{color:#c7d3df}
body[data-page="login"] .lang-menu button:hover{background:rgba(255,255,255,.06);color:#fff}
body[data-page="login"] .lang-menu button.on{color:#3390ec}

/* verify / code step inherits the same surface */
body[data-page="login"] .verify-card{
  background:#17212b;border:1px solid rgba(255,255,255,.06);border-radius:16px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.75);
}

@media (max-width:380px){
  body[data-page="login"] .auth-card{padding:14px 12px 12px}
  body[data-page="login"] .auth-brand h1{font-size:23px}
  body[data-page="login"] .auth-brand .ring{width:66px;height:66px}
  body[data-page="login"] .auth-brand .ring img{width:40px;height:40px}
}