/* ---------- ACCOUNT / KIRISH OQIMI (Auth Flow) ---------- */
.auth__overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 14, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    animation: authOverlayIn .3s ease;
}

.auth__overlay.state--open {
    display: flex;
}

@keyframes authOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.auth__card {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--bg2);
    border: 1px solid rgba(var(--overlay-rgb), 0.12);
    border-radius: 24px;
    padding: 32px 28px 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: authCardIn .35s cubic-bezier(.2,.9,.3,1.1);
    transition: opacity .18s ease, transform .18s ease;
    scrollbar-width: none;
}

.auth__card::-webkit-scrollbar {
    display: none;
}

.auth__card-out {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
}

@keyframes authCardIn {
    from { opacity: 0; transform: scale(0.92) translateY(14px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth__skip {
    position: absolute;
    top: 18px;
    right: 20px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease;
}

.auth__skip:hover {
    color: var(--fg);
}

.auth__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--overlay-rgb), 0.08);
    color: var(--fg);
    font-size: 17px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.auth__back:hover {
    background: rgba(var(--overlay-rgb), 0.15);
    transform: translateX(-2px);
}

.auth__logo {
    font-size: 42px;
    margin: 8px 0 6px;
    filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb), 0.4));
}

.auth__title {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--fg);
    margin: 0 0 6px;
}

.auth__sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 22px;
    line-height: 1.5;
}

.auth__sub strong {
    color: var(--fg);
}

.auth__input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 13px;
    border: 1.5px solid rgba(var(--overlay-rgb), 0.14);
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--fg);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    box-sizing: border-box;
}

.auth__input:focus {
    border-color: var(--accent);
    background: rgba(var(--overlay-rgb), 0.08);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}

/* Parolni ko'rsatish/yashirish ko'zchasi (auth-account.js: enablePasswordToggles) */
.auth__pass-wrap {
    position: relative;
    margin-bottom: 12px;
}
.auth__pass-wrap .auth__input {
    margin-bottom: 0;
    padding-right: 44px;
}
.auth__pass-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--fg);
    opacity: .65;
    font-size: 15px;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 8px;
    transition: opacity .15s ease, background .15s ease;
}
.auth__pass-eye:hover {
    opacity: 1;
    background: rgba(var(--overlay-rgb), 0.08);
}

.auth__code-input {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
}

.auth__error {
    min-height: 18px;
    color: var(--error);
    font-size: 12.5px;
    font-weight: 600;
    margin: -4px 0 10px;
    text-align: left;
}

.auth__btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    color: #fff;
    font-weight: 800;
    font-size: 14.5px;
    cursor: pointer;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease, filter .16s ease;
    margin-bottom: 10px;
}

.auth__btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35);
    filter: brightness(1.08);
}

.auth__btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.auth__btn-secondary {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--overlay-rgb), 0.16);
    background: rgba(var(--overlay-rgb), 0.05);
    color: var(--fg);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.auth__btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(var(--overlay-rgb), 0.09);
    transform: translateY(-1px);
}

.auth__btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.auth__link {
    background: none;
    border: none;
    color: var(--teal);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px;
    margin-top: 2px;
    transition: color .15s ease;
}

.auth__link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--muted);
    font-size: 11.5px;
}

.auth__divider::before,
.auth__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(var(--overlay-rgb), 0.14);
}

.auth__method-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.auth__method-btn {
    flex: 1;
    padding: 11px;
    border-radius: 12px;
    border: 1.5px solid rgba(var(--overlay-rgb), 0.14);
    background: rgba(var(--overlay-rgb), 0.04);
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all .18s ease;
}

.auth__method-btn.state--active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--fg);
}

.auth__method-btn:hover {
    transform: translateY(-1px);
}

.auth__demo-note {
    background: rgba(var(--gold-rgb, 255, 214, 64), 0.1);
    border: 1px dashed rgba(255, 214, 64, 0.4);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
    text-align: left;
    line-height: 1.5;
}

.auth__demo-note strong {
    color: var(--gold);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
}

.auth__timer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
    min-height: 30px;
}

.auth__pass-rules {
    text-align: left;
    margin: -2px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth__rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    transition: color .18s ease;
}

.auth__rule-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--overlay-rgb), 0.25);
    flex: none;
    transition: all .18s ease;
    position: relative;
}

.auth__rule.ok {
    color: var(--success);
}

.auth__rule.ok .auth__rule-dot {
    background: var(--success);
    border-color: var(--success);
}

.auth__rule.ok .auth__rule-dot::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
}

@media (max-width:480px) {
    .auth__card {
        padding: 26px 20px 22px;
        border-radius: 20px;
    }

    .auth__title {
        font-size: 21px;
    }
}

/* ---------- PHOTO SOURCE PICKER (Camera / Gallery) ---------- */
.photo__source-menu {
    position: fixed;
    z-index: 400;
    width: 190px;
    background: var(--bg2);
    border: 1px solid rgba(var(--overlay-rgb), 0.16);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    padding: 6px;
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}

.photo__source-menu.state--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.photo__source-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--fg);
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, transform .15s ease;
}

.photo__source-menu button:hover {
    background: rgba(var(--overlay-rgb), 0.08);
    transform: translateX(2px);
}

.photo__source-menu button:active {
    transform: translateX(2px) scale(0.97);
}

.photo-source-menu__ic {
    font-size: 17px;
}

/* ---------- TAB TOOLTIP (JS orqali, position:fixed — scroll konteynerdan qochish uchun) ---------- */
.js__tooltip {
    position: fixed;
    background: var(--bg2);
    color: var(--fg);
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--overlay-rgb), 0.14);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
    z-index: 500;
}

.js__tooltip.state--visible {
    opacity: 1;
    transform: translateY(0);
}

.js__tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--bg2);
}

@media (max-width:640px) {
    .js__tooltip {
        display: none;
    }
}



.auth__login-head{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:3px}.auth__login-head .auth__logo{margin:0;font-size:32px}.auth__eyebrow{font-size:9px;letter-spacing:.14em;font-weight:900;color:var(--teal)}.auth__field-label{display:block;text-align:left;font-size:10px;font-weight:800;color:var(--muted);margin:0 0 6px}.auth__qr{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;text-align:left;border:1px solid rgba(var(--overlay-rgb),.11);background:rgba(var(--overlay-rgb),.045);padding:11px;border-radius:16px;margin:8px 0 15px}.auth__qr-frame{width:84px;height:84px;background:#fff;border-radius:10px;padding:5px;display:grid;place-items:center}.auth__qr-frame img{width:74px;height:74px;display:block}.auth__qr strong,.auth__qr span{display:block}.auth__qr strong{font-size:12px;color:var(--fg);margin-bottom:5px}.auth__qr span{font-size:10px;color:var(--muted);line-height:1.5}.auth__or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:9px;margin:14px 0}.auth__or:before,.auth__or:after{content:"";height:1px;background:rgba(var(--overlay-rgb),.1);flex:1}.auth__signup-cta{margin-top:8px}.auth__pass-rules{margin:0 0 12px;text-align:left}.auth__rule{font-size:11px;color:var(--muted)}

/* ---------- AUTH RESPONSIVLIK (avvalgi ultimate-quality-fix.css dan) ----------
   Desktop, planshet va telefonlarda barqaror ko'rinish uchun. */
.auth__overlay{padding:clamp(10px,2.5vw,28px);overflow:auto;align-items:center}
.auth__card[data-screen="login"]{width:min(920px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 32px));grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr)}
.auth__login-side,.auth__login-form{min-width:0}
.auth__login-form{overflow-wrap:anywhere}
.auth__card[data-screen="login"] .auth__input,.auth__card[data-screen="login"] .auth__btn-primary,.auth__card[data-screen="login"] .auth__btn-secondary{width:100%;box-sizing:border-box}
@media (max-width:900px){
  .auth__card[data-screen="login"]{width:min(680px,calc(100vw - 28px));grid-template-columns:250px minmax(0,1fr)}
  .auth__login-side{padding:34px 22px 24px}
  .auth__login-form{padding:52px 28px 28px}
}
@media (max-width:720px){
  .auth__overlay{align-items:flex-start;padding:12px}
  .auth__card[data-screen="login"]{display:block;width:min(100%,520px);max-height:calc(100dvh - 24px);padding:26px 20px 22px}
  .auth__login-side{padding:0;min-height:0}
  .auth__login-form{padding:24px 0 0}
  .auth__qr{grid-template-columns:72px minmax(0,1fr);margin-top:18px}
}
@media (max-width:420px){
  .auth__card[data-screen="login"]{width:100%;padding:22px 16px 18px;border-radius:22px}
  .auth__login-head h2,.auth__card[data-screen="login"] .auth__title{font-size:clamp(24px,8vw,31px)}
  .auth__qr{padding:10px;gap:10px}
  .auth__qr-frame{width:64px;height:64px}
  .auth__input{font-size:16px} /* prevents iOS zoom */
}

/* ---------- Avatar tanlash va auth usul tugmalari padding
   (avvalgi final-fixes.css dan) ---------- */
.avatar__preset-card,
.auth-method-btn {
    padding: 14px !important;
}

/* ---------- Ro'yxatdan o'tish: jinsi tanlash (Google account
   uslubida) (avvalgi final-fixes.css dan) ---------- */
.auth__gender-label {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg);
    margin: 6px 0 10px;
}
.auth__gender-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.auth__gender-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 0;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--overlay-rgb), .14);
    background: rgba(var(--overlay-rgb), .04);
    color: var(--fg);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .16s ease, background .16s ease;
}
.auth__gender-icon { font-size: 16px; }
.auth__gender-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), .3);
}
.auth__gender-btn:active {
    transform: translateY(0) scale(.96);
}
.auth__gender-btn.state--active {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(var(--purple-rgb), .1));
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), .18);
}

/* ---------- Mehmon sifatida davom etish — ogohlantirish ekrani
   (avvalgi final-fixes.css dan) ---------- */
.auth__guest-warn-icon {
    font-size: 34px;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 4px auto 14px;
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(255, 184, 0, .16), rgba(255, 46, 151, .08));
    border: 1px solid rgba(255, 184, 0, .25);
}
.auth__guest-warn-leave {
    color: var(--muted) !important;
    font-weight: 600 !important;
}

/* ---------- AUTH: ikki ustunli login hech qachon qirqilmasligi
   (avvalgi reference-ui-fix.css dan) ---------- */
.auth__overlay{padding:24px!important;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
.auth__card[data-screen="login"]{width:min(920px,calc(100vw - 48px))!important;max-width:920px!important;min-height:560px;grid-template-columns:minmax(300px,.86fr) minmax(430px,1.14fr)!important;box-sizing:border-box}
.auth__login-side{min-width:0!important}.auth__login-form{min-width:0!important;padding:62px 44px 36px!important}.auth__login-head h2{font-size:32px!important;max-width:240px}.auth__login-head p{font-size:12px!important;max-width:250px}.auth__card[data-screen="login"] .auth__logo{width:56px!important;height:56px!important;background:linear-gradient(145deg,#192842,#101827)!important;overflow:hidden;padding:8px!important}
.auth__brand-logo{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(103,232,249,.18))}
.auth__login-form .auth__title{font-size:clamp(28px,3vw,38px)!important;letter-spacing:-.045em!important}.auth__card[data-screen="login"] .auth__sub{font-size:13px!important;line-height:1.6!important;max-width:420px}.auth__card[data-screen="login"] .auth__input{height:58px!important;font-size:15px!important}.auth__card[data-screen="login"] .auth__btn-primary{min-height:58px!important;font-size:16px!important;border-radius:16px!important;background:linear-gradient(100deg,#ec2b9b,#a855f7)!important;box-shadow:0 14px 30px rgba(168,85,247,.22)}
@media(max-width:860px){.auth__card[data-screen="login"]{width:min(720px,calc(100vw - 32px))!important;grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr)!important}.auth__login-form{padding:52px 28px 28px!important}.auth__login-side{padding:36px 24px 26px!important}}
@media(max-width:720px){.auth__overlay{padding:12px!important}.auth__card[data-screen="login"]{width:min(100%,520px)!important;display:block!important;min-height:0!important}.auth__login-side{padding:24px 22px 0!important}.auth__login-head h2{font-size:28px!important;max-width:none}.auth__login-form{padding:28px 22px 24px!important}.auth__qr{margin-top:22px!important}.auth__card[data-screen="login"] .auth__input{height:54px!important}}

/* ---------- Profil/Auth: yakuniy "polish" (avvalgi final-ui-polish.css dan) ---------- */
.account__profile-banner,.account__stat-card,.account__row,.account__achievement-badge,.dark__field-card{
  border-color:var(--ui-line)!important;
  background:linear-gradient(145deg,#111a2d,#0b1220)!important;
}
.account__stat-card,.account__row,.dark__field-card{border-radius:16px!important}
.auth__card{border:1px solid var(--ui-line)!important;background:linear-gradient(145deg,#111a2d,#0b1220)!important;box-shadow:0 30px 90px rgba(0,0,0,.48)!important;border-radius:24px!important}
.auth__input{border:1px solid var(--ui-line)!important;background:#0b1322!important;color:#fff!important;border-radius:13px!important}
.auth__input:focus{border-color:rgba(77,225,255,.55)!important;box-shadow:0 0 0 4px rgba(77,225,255,.07)!important}
.auth__btn-primary{border-radius:13px!important;background:linear-gradient(100deg,#ff3aa8,#9c5cff)!important}

/* ---------- Auth/tug'ilgan sana (avvalgi ultimate-polish.css dan) ---------- */
.auth__card{max-width:460px!important;border-radius:28px!important;padding:34px 30px 30px!important;}.auth__logo{display:grid!important;place-items:center!important;width:70px!important;height:70px!important;margin:8px auto 15px!important;border-radius:22px!important;background:radial-gradient(circle at 35% 25%,rgba(77,225,255,.18),rgba(157,92,255,.16) 50%,rgba(255,46,151,.1));border:1px solid rgba(77,225,255,.16);box-shadow:0 18px 35px rgba(0,0,0,.24),0 0 35px rgba(77,225,255,.08);font-size:34px!important;filter:none!important;}.auth__title{font-size:29px!important;letter-spacing:-.025em;}.auth__sub{max-width:380px;margin-left:auto!important;margin-right:auto!important;color:#8796b5!important;}
.auth__method-toggle{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:14px!important;}.auth-method-btn{min-height:50px!important;border:1px solid var(--ui-line)!important;border-radius:14px!important;background:#111a2c!important;color:#9aa8c3!important;font-weight:800!important;}.auth-method-btn.state--active{background:linear-gradient(105deg,rgba(255,46,151,.16),rgba(157,92,255,.16))!important;border-color:rgba(255,46,151,.38)!important;color:#fff!important;}
@media(max-width:560px){.auth__card{padding:30px 18px 22px!important;}}

/* ---------- AUTH mobil responsivlik (avvalgi auth-mobile-fix.css dan) ---------- */
/* ==========================================================================
   AUTH OVERLAY — mobil responsivlikni TO'LIQ, ANIQ tuzatish.

   Muammo: auth-premium.css, reference-ui-fix.css va ultimate-quality-fix.css
   fayllari bir-birining ustidan "!important" bilan bir necha marta qoplab
   yozilgan — ba'zi qoidalar (masalan .auth__login-head h2/p uchun
   reference-ui-fix.css'dagi max-width) hech qanday @media ichida emas,
   ya'ni HAMMA o'lchamda kuchda qoladi, lekin mobil query faqat h2'ni
   qaytarib beradi, p'ni emas — natijada torroq ekranlarda matnlar
   kutilmagan tarzda joylashib, "Mehmon sifatida davom etish" havolasi
   (position:absolute) content bilan ustma-ust tushib qolardi.

   Bu fayl — barcha shu ziddiyatlarni ANIQ, SO'ZSIZ hal qiladigan yakuniy
   qoidalar to'plami. Boshqa barcha CSS fayllardan KEYIN yuklanadi.
   ========================================================================== */

@media (max-width: 640px) {
    .auth__overlay {
        align-items: flex-start !important;
        padding: 0 !important;
    }

    .auth__card,
    .auth__card[data-screen="login"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .auth__card[data-screen="login"]::before { display: none !important; }

    /* MUHIM TUZATISH: yuqoridagi qoida BARCHA auth ekranlari uchun
       kartaning TASHQI paddingini 0 ga tushiradi (ekranga to'liq
       yopishgan, "full-bleed" varaq ko'rinishi uchun). Login ekrani
       o'zining ICHKI bo'limlari (.auth__login-side va h.k.) uchun pastda
       alohida padding oladi — LEKIN boshqa BARCHA ekranlar (parol
       yaratish, tug'ilgan sana, OTP va hokazo) to'g'ridan-to'g'ri
       .auth__card ning o'zi ichiga joylashadi va HECH QANDAY ichki
       padding olmas edi — natijada matn/maydonlar ekran chekkalariga
       yopishib qolardi. Endi login BO'LMAGAN har qanday ekran uchun
       kartaning o'ziga qulay ichki padding qaytariladi. */
    .auth__card:not([data-screen="login"]) {
        padding: 28px 20px 24px !important;
    }

    /* "Mehmon sifatida davom etish" — mobil'da endi position:absolute
       EMAS, oddiy oqim ichida, kartaning eng yuqorisida, o'ziga alohida
       qator sifatida chiqadi. Shu bilan u qanday holatda ham pastdagi
       sarlavha/tavsif matni bilan HECH QACHON ustma-ust tushmaydi. */
    .auth__card .auth__skip,
    .auth__card[data-screen="login"] .auth__skip {
        position: static !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: right !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    .auth__login-side {
        display: block !important;
        min-height: 0 !important;
        padding: 4px 20px 22px !important;
        box-sizing: border-box !important;
    }
    .auth__login-head {
        padding: 0 0 18px !important;
    }
    .auth__login-head h2,
    .auth__card[data-screen="login"] .auth__title {
        max-width: 100% !important;
        font-size: clamp(22px, 7vw, 27px) !important;
        margin: 12px 0 8px !important;
    }
    .auth__login-head p,
    .auth__card[data-screen="login"] .auth__sub {
        max-width: 100% !important;
        font-size: 12.5px !important;
        line-height: 1.6 !important;
    }

    .auth__qr {
        margin-top: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .auth__login-form {
        padding: 20px 20px 28px !important;
        box-sizing: border-box !important;
    }

    .auth__input,
    .auth__btn-primary,
    .auth__btn-secondary {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* iOS avtomatik zoom qilishining oldini oladi */
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth__overlay { animation: none !important; }
}

/* ==========================================================================
   ILDIZDAGI SABAB: css/features/auth.css'dagi umumiy ".auth__login-head"
   qoidasi (display:flex, gorizontal qator, markazlashtirilgan) — bu boshqa
   auth ekranlari (masalan signup usul tanlash) uchun mo'ljallangan edi.
   Lekin login ekranining SIDEBAR qismi ham xuddi shu klass nomidan
   foydalanganligi sabab, u yerda ham gorizontal qatorga aylanib qolgan —
   natijada belgi ikonkasi, sarlavha ("Bir hisob. Barcha progress.") va
   tavsif matni BIR QATORDA, bir-biriga ustma-ust/yonma-yon chiqib qolardi
   (bu — ham desktop'dagi nomutanosib ko'rinish, ham mobil'dagi ustma-ust
   tushish muammosining haqiqiy sababi edi).

   Bu yerda login ekrani uchun ANIQ ravishda vertikal (tepadan pastga)
   tartibga qaytariladi: ikonka → EYEBROW yorlig'i → sarlavha → tavsif —
   zamonaviy "hero" uslubida, barcha o'lchamlarda. ========================================================================== */
.auth__card[data-screen="login"] .auth__login-head {
    display: block !important;
    text-align: left !important;
}
.auth__card[data-screen="login"] .auth__login-head .auth__logo {
    margin: 0 0 16px !important;
}
.auth__card[data-screen="login"] .auth__login-head .auth__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--teal-rgb, 71, 216, 255), .12);
    border: 1px solid rgba(var(--teal-rgb, 71, 216, 255), .28);
}
.auth__card[data-screen="login"] .auth__login-head h2 {
    display: block !important;
    margin: 14px 0 10px !important;
    font-weight: 800;
}
.auth__card[data-screen="login"] .auth__login-head p {
    display: block !important;
    opacity: .82;
}

/* ---------- OTP tasdiqlash ekrani (avvalgi auth-otp-modern.css dan) ---------- */
/* ==========================================================================
   OTP TASDIQLASH EKRANI — zamonaviy, 6 ta alohida katakchali dizayn.
   Boshqa barcha CSS fayllardan KEYIN yuklanadi.
   ========================================================================== */

.auth__otp-badge {
    width: 62px;
    height: 62px;
    margin: 4px auto 14px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 28px;
    background: linear-gradient(150deg, rgba(var(--accent-rgb), .16), rgba(var(--purple-rgb), .1));
    border: 1px solid rgba(var(--accent-rgb), .2);
    animation: authOtpBadgeIn .4s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes authOtpBadgeIn {
    0% { opacity: 0; transform: scale(.7) rotate(-8deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

.auth__otp-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 6px;
}
.auth__otp-box {
    width: 44px;
    height: 54px;
    border-radius: 14px;
    border: 1.5px solid rgba(var(--overlay-rgb), .16);
    background: rgba(var(--overlay-rgb), .04);
    color: var(--fg);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s cubic-bezier(.2, .8, .2, 1), background .16s ease;
    animation: authOtpBoxIn .35s cubic-bezier(.2, .9, .3, 1.1) backwards;
}
.auth__otp-box:nth-child(1) { animation-delay: .02s; }
.auth__otp-box:nth-child(2) { animation-delay: .06s; }
.auth__otp-box:nth-child(3) { animation-delay: .1s; }
.auth__otp-box:nth-child(4) { animation-delay: .14s; }
.auth__otp-box:nth-child(5) { animation-delay: .18s; }
.auth__otp-box:nth-child(6) { animation-delay: .22s; }
@keyframes authOtpBoxIn {
    0% { opacity: 0; transform: translateY(10px) scale(.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.auth__otp-box:hover {
    border-color: rgba(var(--overlay-rgb), .28);
}
.auth__otp-box:focus {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), .06);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
    transform: translateY(-2px);
}
.auth__otp-box:not(:placeholder-shown) {
    border-color: rgba(var(--accent-rgb), .35);
}

/* Noto'g'ri kod kiritilganda — butun qator nozik "chayqalish" bilan
   qizg'ish rangga o'tadi, keyin katakchalar avtomatik tozalanadi. */
.auth__otp-row.state--error .auth__otp-box {
    border-color: var(--error) !important;
    background: rgba(255, 56, 96, .08) !important;
    animation: authOtpShake .4s cubic-bezier(.36, .07, .19, .97);
}
@keyframes authOtpShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.auth__dev-code {
    animation: authOtpBadgeIn .3s ease .3s backwards;
}

.auth__timer-row {
    transition: opacity .2s ease;
}
.auth__link#authResendBtn {
    font-weight: 700;
    transition: transform .16s cubic-bezier(.2, .8, .2, 1), color .16s ease;
}
.auth__link#authResendBtn:hover {
    transform: translateY(-1px);
    color: var(--accent);
}
.auth__link#authResendBtn:active {
    transform: translateY(0) scale(.96);
}

@media (max-width: 380px) {
    .auth__otp-row { gap: 6px; }
    .auth__otp-box { width: 38px; height: 48px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth__otp-badge, .auth__otp-box, .auth__dev-code { animation: none !important; }
}

/* ---------- Email manzil kiritish ekranlari (ro'yxatdan o'tish, parolni
   tiklash, hisob sozlamalarida email o'zgartirish) — telefon variant
   olib tashlangandan keyin, endi FAQAT email uchun mo'ljallangan, toza
   va zamonaviy belgi. ---------- */
.auth__email-badge {
    width: 62px;
    height: 62px;
    margin: 4px auto 14px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--accent);
    background: linear-gradient(150deg, rgba(var(--accent-rgb), .16), rgba(var(--purple-rgb), .1));
    border: 1px solid rgba(var(--accent-rgb), .2);
    animation: authOtpBadgeIn .4s cubic-bezier(.2, .9, .3, 1.1);
}
@media (prefers-reduced-motion: reduce) {
    .auth__email-badge { animation: none; }
}

/* ---------- Premium login karta (avvalgi auth-premium.css dan) ---------- */
/* Premium online account entry. The actual auth flow remains in auth-account.js. */
.auth__card[data-screen="login"]{max-width:820px;padding:0;overflow:hidden;display:grid;grid-template-columns:300px 1fr;text-align:left;background:linear-gradient(145deg,#0f1729,#090f1c);border-color:rgba(255,255,255,.11);box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 80px rgba(155,77,255,.12)}
.auth__card[data-screen="login"]:before{content:"";position:absolute;inset:0 auto 0 0;width:300px;background:radial-gradient(circle at 30% 25%,rgba(255,43,157,.18),transparent 45%),radial-gradient(circle at 70% 80%,rgba(71,216,255,.12),transparent 45%),linear-gradient(160deg,rgba(255,255,255,.04),transparent);pointer-events:none}
.auth__card[data-screen="login"] .auth__skip{top:17px;right:17px;z-index:10;font-size:10px}
.auth__login-side{grid-column:1;padding:40px 25px 28px;position:relative;z-index:1;display:flex;flex-direction:column;min-height:500px}.auth__login-head{padding-top:6px}.auth__card[data-screen="login"] .auth__logo{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin:0 0 15px;background:linear-gradient(145deg,rgba(255,43,157,.2),rgba(155,77,255,.18));border:1px solid rgba(255,255,255,.1);font-size:25px}.auth__card[data-screen="login"] .auth__eyebrow{font-size:8px;color:#73defb;font-weight:900;letter-spacing:.17em}.auth__login-head h2{font-size:25px;line-height:1.03;letter-spacing:-.05em;margin:13px 0 9px}.auth__login-head p{font-size:10px;line-height:1.7;color:#78849c;margin:0}.auth__qr{margin-top:auto;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.035);display:flex;align-items:center;gap:11px}.auth__qr-frame{width:72px;height:72px;padding:5px;border-radius:11px;background:#fff;display:grid;place-items:center;flex:none}.auth__qr-frame img{width:100%;height:100%;object-fit:contain}.auth__qr strong,.auth__qr span{display:block}.auth__qr strong{font-size:9px;color:#fff}.auth__qr span{font-size:8px;line-height:1.55;color:#77839a;margin-top:4px}.auth__login-form{grid-column:2;padding:58px 32px 30px;position:relative;z-index:1}.auth__card[data-screen="login"] .auth__title{font-size:29px;margin:0 0 5px}.auth__card[data-screen="login"] .auth__sub{font-size:11px;margin:0 0 19px}.auth__card[data-screen="login"] .auth__or{margin:0 0 17px}.auth__card[data-screen="login"] .auth__field-label{font-size:9px;letter-spacing:.06em;color:#8995ab;text-transform:uppercase;font-weight:900;margin-bottom:7px}.auth__card[data-screen="login"] .auth__input{margin-bottom:12px}.auth__card[data-screen="login"] #authLoginBtn{margin-top:4px}.auth__card[data-screen="login"] #authForgotBtn{display:block;width:100%;text-align:center;margin:3px 0 10px}.auth__card[data-screen="login"] #authGoSignupBtn{margin-bottom:0}.auth__card[data-screen="login"] .auth__error{min-height:18px}
@media(max-width:720px){.auth__card[data-screen="login"]{display:block;max-width:440px;padding:30px 24px 24px}.auth__card[data-screen="login"]:before{width:100%;height:160px;right:0;bottom:auto}.auth__login-side{min-height:0;padding:0}.auth__login-head{padding:0}.auth__login-head h2{font-size:23px}.auth__qr{margin-top:18px}.auth__login-form{padding:27px 0 0}.auth__card[data-screen="login"] .auth__title{font-size:25px}.auth__card[data-screen="login"] .auth__skip{top:13px;right:12px}}
body.theme-picker--light .auth__card[data-screen="login"]{background:linear-gradient(145deg,#fff,#eef3f9);border-color:#dfe5ed;box-shadow:0 35px 90px rgba(24,35,58,.2)}
body.theme-picker--light .auth__card[data-screen="login"] .auth__login-head p,body.theme-picker--light .auth__card[data-screen="login"] .auth__qr span{color:#68748b}body.theme-picker--light .auth__card[data-screen="login"] .auth__qr{background:rgba(16,23,38,.035);border-color:#dfe5ed}body.theme-picker--light .auth__card[data-screen="login"] .auth__qr strong{color:#101726}