/* ============================================================
   SPACE — bosh sahifaning qorong'i "zarrachalar" mavzusi
   Fonda qotirilgan WebGL qatlami (js/particles.js) turadi: minglab
   mayda uchburchaklar sahifa aylantirilganda bir shakldan boshqasiga
   aylanadi. Bu fayl meridian.css ustidan qorong'i ranglarni beradi —
   barcha bo'limlar shaffof, matn och rangda, kartalar "shisha".
   ============================================================ */

html:has(body.mrd.space) { background: #05060B; }
body.mrd.space {
    --mrd-blue:      #4458F0;
    --mrd-blue-2:    #3345DC;
    --mrd-blue-lt:   #8E9BFF;
    --mrd-ink:       #F3F4FA;
    --mrd-slate:     #C5C9DB;
    --mrd-slate-2:   #9AA0B8;
    --mrd-slate-3:   #7A8099;
    --mrd-line:      rgba(255,255,255,.10);
    --mrd-line-2:    rgba(255,255,255,.16);
    --mrd-surface:   rgba(255,255,255,.04);
    --space-glass:   rgba(10,11,20,.62);
    --hero-lime:     #8E9BFF;   /* oldin lime edi — endi och indigo-ko'k */
    --hero-blue:     #4458F0;
    --hero-mint:     #5EEAD4;
    --hero-sky:      #7DD3FC;

    background: transparent;
    color: var(--mrd-ink);
}

/* Zarrachalar qatlami */
#space-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* ---------- Topbar + navbar ---------- */
.mrd.space .mrd-topbar { background: #05060B; color: #8A90A8; border-bottom: 1px solid rgba(255,255,255,.06); }
.mrd.space .navbar {
    background: rgba(5,6,11,.82);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.mrd.space .navbar.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.9); }
.mrd.space .logo { color: #fff; }
.mrd.space .logo-icon { background: linear-gradient(135deg, #4458F0, #2DD4BF); }
.mrd.space .nav-link { color: #B9BED3; }
.mrd.space .nav-link:hover,
.mrd.space .nav-link.is-hover,
.mrd.space .nav-link.active { color: #fff; }
.mrd.space .nav-indicator { background: rgba(68,88,240,.14); box-shadow: inset 0 0 0 1px rgba(142,155,255,.22); }

.mrd.space .btn-soft,
.mrd.space .btn-outline {
    background: rgba(255,255,255,.04);
    color: #fff;
    border-color: rgba(255,255,255,.18);
}
.mrd.space .btn-soft:hover,
.mrd.space .btn-outline:hover { color: #fff; border-color: #4458F0; background: rgba(68,88,240,.14); }
.mrd.space .btn-primary {
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    box-shadow: 0 10px 28px -10px rgba(68,88,240,.85);
}
.mrd.space .btn-primary:hover { background: linear-gradient(135deg, #3345DC, #4A5DEE); }

.mrd.space .settings-trigger,
.mrd.space .hamburger {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.18);
    color: #E6E8F2;
}
.mrd.space .hamburger span { background: #E6E8F2; }
.mrd.space .lang-menu { background: #11131F; border-color: rgba(255,255,255,.1); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); }
.mrd.space .lang-opt { color: #E6E8F2; }
.mrd.space .lang-opt:hover { background: rgba(255,255,255,.06); }
.mrd.space .lang-opt.active,
.mrd.space .lang-opt i { color: #8E9BFF; }

@media (max-width: 768px) {
    .mrd.space .nav-links { background: #0B0C16; box-shadow: -20px 0 60px -20px rgba(0,0,0,.9); }
    .mrd.space .nav-link { border-bottom-color: rgba(255,255,255,.08); }
}

/* ---------- Hero ---------- */
.mrd.space .hero { background: transparent; }
.mrd.space .hero::before { display: none; }
.mrd.space .hero-badge {
    background: rgba(68,88,240,.14);
    border-color: rgba(68,88,240,.42);
    color: #C3CBFF;
}
.mrd.space .hero-title {
    font-family: 'Sora', 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -.045em;
    color: #F5F7FF;
}
.mrd.space .hero-title .text-accent,
.mrd.space .hero-title .text-primary {
    background: linear-gradient(100deg, #A9B4FF 0%, #6B7CFF 50%, var(--hero-sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    padding-right: .06em;
}
.mrd.space .hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: -.005em;
    color: #A3A9BF;
    max-width: 500px;
}
.mrd.space .hero-buttons { gap: 12px; }

/* Hero tugmalari — "pill" shakli; asosiy tugmada aylana strelka */
.mrd.space .hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    border-radius: 999px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.mrd.space .hero-btn:focus-visible { outline: 2px solid var(--hero-lime); outline-offset: 3px; }
.mrd.space .hero-btn:active { transform: scale(.97); }

.mrd.space .hero-btn-main {
    padding: 0 6px 0 26px;
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(142,155,255,.45), 0 14px 40px -14px rgba(68,88,240,.85);
}
/* hover'da yaltiroq chiziq o'tadi */
.mrd.space .hero-btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
}
.mrd.space .hero-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(142,155,255,.7), 0 20px 50px -14px rgba(68,88,240,.95);
}
.mrd.space .hero-btn-main:hover::before { transform: translateX(120%); }
.mrd.space .hb-arrow {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--hero-blue);
    font-size: 14px;
    overflow: hidden;
}
.mrd.space .hb-arrow i { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mrd.space .hero-btn-main:hover .hb-arrow i { transform: translateX(3px) rotate(-45deg); }

.mrd.space .hero-btn-ghost {
    padding: 0 26px 0 22px;
    color: #E8EBF5;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.mrd.space .hero-btn-ghost i { font-size: 14px; color: var(--hero-mint); transition: transform .3s ease; }
.mrd.space .hero-btn-ghost:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: rgba(94,234,212,.55);
    background: rgba(94,234,212,.08);
}
.mrd.space .hero-btn-ghost:hover i { transform: rotate(90deg); }

.mrd.space .hero-stats .hs-item .hs-num {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: -.03em;
}
.mrd.space .hero-stats .hs-item .hs-num span { color: var(--hero-lime); }
.mrd.space .hero-stats .hs-item .hs-label { color: #7E849C; font-size: 12.5px; letter-spacing: .02em; }
.mrd.space .hero-stats .hs-sep { background: linear-gradient(transparent, rgba(255,255,255,.18), transparent); }

@media (max-width: 480px) {
    .mrd.space .hero-buttons { flex-direction: column; align-items: stretch; }
    .mrd.space .hero-btn { justify-content: space-between; }
    .mrd.space .hero-btn-ghost { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .mrd.space .hero-btn, .mrd.space .hero-btn-main::before, .mrd.space .hb-arrow i { transition: none; }
}
/* Hero o'ng tomoni — zarrachali do'kon shu bo'sh joyda ko'rinadi */
.mrd.space .hero-visual { height: 480px; }
@media (max-width: 992px) {
    .mrd.space .hero-visual { height: 340px; }
}
@media (max-width: 560px) {
    .mrd.space .hero-visual { height: 300px; }
}

/* ---------- Bo'limlar shaffof ---------- */
.mrd.space .trust-band,
.mrd.space .apps-section,
.mrd.space .reviews-section,
.mrd.space .how-section,
.mrd.space .cta-section,
.mrd.space .footer { background: transparent; }

.mrd.space .trust-band { border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.mrd.space .trust-band .trust-logos { color: #C5C9DB; }

.mrd.space .section-tag { color: #8E9BFF; }
.mrd.space .section-title { color: #fff; }
.mrd.space .section-subtitle { color: #9AA0B8; }

.mrd.space .showcase-caption { color: #fff; }
.mrd.space .showcase-nav { background: rgba(10,11,20,.8); border-color: rgba(255,255,255,.18); color: #fff; }
.mrd.space .showcase-dots button { background: rgba(255,255,255,.22); }
.mrd.space .showcase-dots button.on { background: #4458F0; }
.mrd.space .mrd-phone .mp-label { color: #C5C9DB; }

.mrd.space .how-step,
.mrd.space .review-card {
    background: var(--space-glass);
    border: 1px solid rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mrd.space .how-section .section-tag { color: #2DD4BF; }
/* ---------- QANDAY ISHLAYDI — vertikal timeline ----------
   Raqamlar chapdagi doira tugunlarga aylanadi va gradient chiziq bilan ulanadi;
   ikonka kartaning yuqori o'ng burchagida. Hammasi chap ustunda — o'ngdagi
   zarracha shakli (#how) ochiq qoladi. */
.mrd.space .how-grid {
    position: relative;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 600px;
    padding-left: 76px;
}
/* tugunlarni ulovchi chiziq — har qadamdan keyingisigacha (oxirgisida yo'q) */
.mrd.space .how-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -49px;
    top: 76px;
    height: calc(100% - 38px);
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(68,88,240,.75), rgba(45,212,191,.45));
}
.mrd.space .how-step {
    position: relative;
    padding: 24px 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(68,88,240,.07), rgba(10,11,20,.62) 55%);
    transition: opacity .6s ease, transform .4s cubic-bezier(.34,1.36,.64,1),
                border-color .3s ease, box-shadow .3s ease;
}
/* tugundan kartaga ulagich */
.mrd.space .how-step::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 47px;
    width: 21px;
    height: 2px;
    background: linear-gradient(90deg, rgba(68,88,240,.6), rgba(255,255,255,.12));
}
.mrd.space .how-step .how-head { margin: 0; }
.mrd.space .how-step .how-num {
    position: absolute;
    left: -76px;
    top: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 20px;
    background: #090A14;
    border: 2px solid rgba(68,88,240,.6);
    box-shadow: 0 0 0 6px #05060B, 0 0 26px -4px rgba(68,88,240,.7);
    transition: background .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), border-color .35s ease;
}
.mrd.space .how-step:last-child .how-num { border-color: rgba(45,212,191,.6); box-shadow: 0 0 0 6px #05060B, 0 0 26px -4px rgba(45,212,191,.6); }
.mrd.space .how-step .how-head > i {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
    color: #2DD4BF;
    background: rgba(45,212,191,.10);
    border: 1px solid rgba(45,212,191,.18);
}
.mrd.space .how-step h3 { font-size: 19px; margin: 2px 0 8px; padding-right: 56px; }
.mrd.space .how-step p { color: #B9BED3; font-size: 15px; }
.mrd.space .how-step code {
    display: inline-block;
    margin-top: 4px;
    white-space: nowrap;
    background: rgba(45,212,191,.14);
    color: #5EEAD4;
}
.mrd.space .how-step:hover {
    transform: translateX(6px);
    border-color: rgba(68,88,240,.45);
    box-shadow: 0 24px 60px -28px rgba(68,88,240,.75);
}
.mrd.space .how-step:hover .how-num {
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    border-color: transparent;
    transform: scale(1.08);
}
.mrd.space .how-step:last-child:hover .how-num { background: linear-gradient(135deg, #14B8A6, #2DD4BF); }

@media (min-width: 993px) {
    .mrd.space .how-section .section-head { text-align: left; margin: 0 0 40px; max-width: 600px; }
}
@media (max-width: 992px) {
    .mrd.space .how-grid { margin: 0 auto; }
}
@media (max-width: 600px) {
    .mrd.space .how-grid { padding-left: 58px; gap: 14px; }
    .mrd.space .how-step:not(:last-child)::after { left: -37px; top: 62px; height: calc(100% - 30px); }
    .mrd.space .how-step { padding: 20px 18px; }
    .mrd.space .how-step::before { left: -14px; top: 40px; width: 14px; }
    .mrd.space .how-step .how-num { left: -58px; top: 18px; width: 44px; height: 44px; font-size: 17px; box-shadow: 0 0 0 5px #05060B, 0 0 20px -4px rgba(68,88,240,.7); }
    .mrd.space .how-step .how-head > i { top: 16px; right: 16px; width: 36px; height: 36px; font-size: 15px; }
    .mrd.space .how-step h3 { font-size: 17px; }
    .mrd.space .how-step code { white-space: normal; word-break: break-all; }
}
@media (prefers-reduced-motion: reduce) {
    .mrd.space .how-step:hover { transform: none; }
}

/* ---------- CTA ---------- */
.mrd.space .finale-section { min-height: 70vh; display: flex; align-items: center; padding: 90px 0; }
.mrd.space .finale-section > .container { width: 100%; }

/* ---------- TAKLIFLAR formasi — o'ng ustunda, chapda globus ochiq qoladi ---------- */
.mrd.space .sugg-card {
    max-width: 580px;
    margin-left: auto;
    padding: 34px 32px 30px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(68,88,240,.10), rgba(10,11,20,.72) 55%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px -40px rgba(68,88,240,.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mrd.space .sugg-card .section-tag { color: #2DD4BF; }
.mrd.space .sugg-card .section-title { font-size: clamp(26px, 3.2vw, 36px); margin: 8px 0 10px; text-align: left; }
.mrd.space .sugg-card .section-subtitle { margin: 0 0 22px; text-align: left; max-width: none; }
.mrd.space .sugg-form { display: grid; gap: 14px; }
.mrd.space .sugg-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.mrd.space .sugg-topics label { cursor: pointer; }
.mrd.space .sugg-topics input { position: absolute; opacity: 0; pointer-events: none; }
.mrd.space .sugg-topics span {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
    border-radius: 999px; font-size: 14px; font-weight: 600; color: #C5C9DB;
    border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
    transition: background .2s, border-color .2s, color .2s;
}
.mrd.space .sugg-topics label:hover span { border-color: rgba(142,155,255,.5); }
.mrd.space .sugg-topics input:checked + span { color: #fff; background: rgba(68,88,240,.28); border-color: #5A6CF6; }
.mrd.space .sugg-topics input:focus-visible + span { outline: 2px solid #8E9BFF; outline-offset: 2px; }
.mrd.space .sugg-field { position: relative; display: grid; gap: 6px; min-width: 0; }
.mrd.space .sugg-field > span { font-size: 13px; font-weight: 600; color: #C5C9DB; }
.mrd.space .sugg-field input,
.mrd.space .sugg-field textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: #fff;
    background: rgba(5,6,12,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.mrd.space .sugg-field textarea { resize: vertical; min-height: 110px; padding-bottom: 26px; }
.mrd.space .sugg-field input::placeholder,
.mrd.space .sugg-field textarea::placeholder { color: #626985; }
.mrd.space .sugg-field input:focus,
.mrd.space .sugg-field textarea:focus { border-color: #5A6CF6; box-shadow: 0 0 0 3px rgba(68,88,240,.25); }
.mrd.space .sugg-field .bad { border-color: #F2617A; }
.mrd.space .sugg-count { position: absolute; right: 12px; bottom: 9px; font-size: 11px; color: #626985; pointer-events: none; }
.mrd.space .sugg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mrd.space .sugg-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.mrd.space .sugg-status { margin: 0; font-size: 14px; color: #9AA0B8; flex: 1 1 200px; }
.mrd.space .sugg-status.ok { color: #2DD4BF; }
.mrd.space .sugg-status.err { color: #F2617A; }
.mrd.space .sugg-send { padding: 0 26px; height: 48px; border: 0; cursor: pointer; gap: 10px; }
.mrd.space .sugg-send:disabled { opacity: .6; cursor: wait; transform: none; }
@media (max-width: 640px) {
    .mrd.space .finale-section { padding: 64px 0; }
    .mrd.space .sugg-card { padding: 24px 18px 20px; border-radius: 18px; }
    .mrd.space .sugg-send { width: 100%; justify-content: center; }
}
.mrd.space .cta-card {
    background: rgba(10,11,20,.55);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px -30px rgba(68,88,240,.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.mrd.space .cta-card p { color: #C5C9DB; }
.mrd.space .cta-actions .btn-light { background: linear-gradient(135deg, #4458F0, #5A6CF6); color: #fff; }
.mrd.space .cta-actions .btn-light:hover { background: linear-gradient(135deg, #3345DC, #4A5DEE); }

/* ---------- Footer ---------- */
.mrd.space .footer { border-top: 1px solid rgba(255,255,255,.07); padding-top: 72px; }
.mrd.space .footer .logo-light .logo-icon { background: linear-gradient(135deg, #4458F0, #2DD4BF); }
.mrd.space .footer-contacts i { color: #8E9BFF; }
.mrd.space .social-links a:hover { background: #4458F0; }

.mrd.space .scroll-top { background: linear-gradient(135deg, #4458F0, #5A6CF6); }

/* Matnlar namunadagidek pastdan sekin chiqadi */
.mrd.space .reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

/* ============================================================
   KIRISH / RO'YXATDAN O'TISH sahifasi (kirish.html) — shu mavzuda
   Chapda: matn + zarrachalardan yasalgan, o'zi almashinuvchi shakl
   (js/particles.js, data-particles="auto"); o'ngda: shisha forma.
   ============================================================ */
html:has(body.auth-body.space) { background: #05060B; }
body.auth-body.space {
    --mrd-blue:      #4458F0;
    --mrd-blue-2:    #3345DC;
    --mrd-blue-lt:   #8E9BFF;
    --mrd-blue-soft: rgba(68,88,240,.14);
    --mrd-ink:       #F3F4FA;
    --mrd-slate:     #C5C9DB;
    --mrd-slate-2:   #9AA0B8;
    --mrd-slate-3:   #7A8099;
    --mrd-line:      rgba(255,255,255,.10);
    --mrd-line-2:    rgba(255,255,255,.16);
    --mrd-surface:   rgba(255,255,255,.04);
    background: transparent;
    color: var(--mrd-ink);
}
/* Ekran teng ikkiga: chapda animatsiya, o'ngda forma (yarmining markazida) */
.auth-body.space .auth-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Chap panel — shaffof; matn chapda, shakl o'ng yarmida */
.auth-body.space .auth-side { background: transparent; padding: 40px 56px; }
.auth-body.space .auth-side::before { display: none; }
.auth-body.space .auth-side-content { max-width: 440px; }
.auth-body.space .auth-side .logo-light .logo-icon { background: linear-gradient(135deg, #4458F0, #2DD4BF); }
.auth-body.space .auth-side-content p { color: #B9BED3; }
.auth-body.space .auth-side-list li { color: #E6E8F2; }
.auth-body.space .auth-side-list i { color: #2DD4BF; }
.auth-body.space .auth-side-decor { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: #B9BED3; }
.auth-body.space .auth-side-decor i { color: #8E9BFF; }
.auth-body.space .auth-side-visual {
    position: absolute;
    top: 14%;
    bottom: 8%;
    left: 6%;
    right: 6%;
    pointer-events: none;
}

/* O'ng — forma */
.auth-body.space .auth-main { background: transparent; }
.auth-body.space .back-home { color: #9AA0B8; }
.auth-body.space .back-home:hover { color: #fff; }
.auth-body.space .auth-card {
    background: rgba(12,13,24,.72);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 40px 90px -40px rgba(68,88,240,.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* Kirish / Ro'yxatdan o'tish — bir qatorli segment, sirpanuvchi gradient indikator */
.auth-body.space .role-tabs:not(.role-tabs-3) {
    position: relative;
    gap: 0;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}
.auth-body.space .role-tabs:not(.role-tabs-3)::before {
    content: "";
    position: absolute;
    top: 5px; left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    border-radius: 999px;
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    box-shadow: 0 8px 22px -8px rgba(68,88,240,.75);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.auth-body.space .role-tabs:not(.role-tabs-3):has(.role-tab:nth-child(2).active)::before { transform: translateX(100%); }
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab {
    position: relative;
    z-index: 1;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
}
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab i {
    width: auto; height: auto;
    background: none;
    border: none;
    font-size: 15px;
    color: #9AA0B8;
    transition: color .25s;
}
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab span { display: none; }
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab strong { font-size: 14.5px; color: #9AA0B8; transition: color .25s; }
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab:hover:not(.active) strong,
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab:hover:not(.active) i { color: #fff; }
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab.active i,
.auth-body.space .role-tabs:not(.role-tabs-3) .role-tab.active strong { color: #fff; }
@media (max-width: 500px) {
    .auth-body.space .role-tabs:not(.role-tabs-3) .role-tab { padding: 11px 8px; min-width: 0; }
    .auth-body.space .role-tabs:not(.role-tabs-3) .role-tab i { display: none; }
    .auth-body.space .role-tabs:not(.role-tabs-3) .role-tab strong { font-size: 13.5px; }
}
.auth-body.space .auth-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.auth-body.space .auth-input:focus-within {
    background: rgba(68,88,240,.08);
    border-color: #4458F0;
    box-shadow: 0 0 0 4px rgba(68,88,240,.18);
}
.auth-body.space .auth-input:focus-within > i,
.auth-body.space .eye-btn:hover { color: #8E9BFF; }
/* brauzer avto-to'ldirgan maydonlar oq bo'lib qolmasin */
.auth-body.space .auth-input input:-webkit-autofill {
    -webkit-text-fill-color: #F3F4FA;
    -webkit-box-shadow: 0 0 0 1000px #15172A inset;
    caret-color: #F3F4FA;
}
.auth-body.space .btn-primary {
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    box-shadow: 0 10px 28px -10px rgba(68,88,240,.85);
}
.auth-body.space .btn-primary:hover { background: linear-gradient(135deg, #3345DC, #4A5DEE); }
.auth-body.space .auth-divider span { background: #0C0D18; }
.auth-body.space .forgot-link,
.auth-body.space .auth-foot a { color: #8E9BFF; }
.auth-body.space .forgot-link:hover,
.auth-body.space .auth-foot a:hover { color: #fff; }
.auth-body.space .demo-hint { background: rgba(68,88,240,.12); color: #C3CBFF; }
.auth-body.space .demo-hint code { background: rgba(68,88,240,.22); color: #fff; }

@media (max-width: 900px) {
    .auth-body.space .auth-wrap { grid-template-columns: minmax(0, 1fr); }
    .auth-body.space .auth-side { padding: 24px 20px 8px; }
    .auth-body.space .auth-side-visual { display: none; }   /* shakl ekran markazida xira turadi */
}

/* ============================================================
   MIJOZ PANELI (dashboard.html) — shu mavzuda
   Panelning tungi rejim o'zgaruvchilari "kosmik" palitraga almashtiriladi:
   sirtlar shaffof shisha, urg'u binafsha. Fonda zarrachalar xira turadi
   (data-particles-opacity). Specificity html[data-theme="dark"] dan yuqori.
   ============================================================ */
html:has(body.dash-body.space) {
    background: #05060B;
    color-scheme: dark;
    --bg: transparent;
    --white: rgba(14,15,27,.80);
    --gray-50: rgba(255,255,255,.035);
    --gray-100: rgba(255,255,255,.07);
    --gray-200: rgba(255,255,255,.11);
    --gray-300: #4B5068;
    --gray-400: #7A8099;
    --gray-500: #9AA0B8;
    --gray-600: #B9BED3;
    --gray-700: #D9DCE8;
    --gray-800: #EEF0F7;
    --gray-900: #FFFFFF;
    --primary: #4458F0;
    --primary-dark: #3345DC;
    --primary-light: rgba(68,88,240,.16);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow: 0 10px 30px -12px rgba(0,0,0,.7);
    --shadow-lg: 0 20px 50px -20px rgba(0,0,0,.8);
}
.dash-body.space { background: transparent; color: var(--gray-700); }

/* Shisha sirtlar — orqadagi zarrachalar xira ko'rinib tursin */
.dash-body.space .sidebar,
.dash-body.space .dash-header,
.dash-body.space .panel,
.dash-body.space .stat-card,
.dash-body.space .sub-card,
.dash-body.space .mp-app-card,
.dash-body.space .no-sub-hero,
.dash-body.space .ns-step,
.dash-body.space .info-strip,
.dash-body.space .support-chat,
.dash-body.space .notif-panel {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.dash-body.space .sidebar { background: rgba(9,10,19,.86); border-right-color: rgba(255,255,255,.07); }
.dash-body.space .dash-header { background: rgba(5,6,11,.72); border-bottom-color: rgba(255,255,255,.07); }
.dash-body.space .logo-icon { background: linear-gradient(135deg, #4458F0, #2DD4BF); }
.dash-body.space .client-badge { background: rgba(68,88,240,.14); color: #C3CBFF; }
.dash-body.space .side-link.active { background: rgba(68,88,240,.16); color: #fff; }
.dash-body.space .side-link.active i { color: #8E9BFF; }
/* dashboard.css --white'ni rangli fon ustidagi MATN rangi sifatida ham ishlatadi;
   bu yerda --white shaffof sirt bo'lgani uchun o'sha joylarda matnni oq qilamiz */
.dash-body.space .side-badge,
.dash-body.space .logout-btn:hover,
.dash-body.space .stat-card-icon,
.dash-body.space .qa-icon,
.dash-body.space .bar span,
.dash-body.space .subscr-banner,
.dash-body.space .subscr-banner h2,
.dash-body.space .btn-outline-light,
.dash-body.space .is-icon,
.dash-body.space .entry-ic,
.dash-body.space .no-sub-hero,
.dash-body.space .no-sub-hero-body h2,
.dash-body.space .mp-popular { color: #fff; }
.dash-body.space .btn-outline-light:hover { border-color: #fff; }

/* Yashil bannerlar -> binafsha "kosmik" gradient */
.dash-body.space .no-sub-hero,
.dash-body.space .subscr-banner {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(45,212,191,.28), transparent 55%),
        linear-gradient(135deg, rgba(68,88,240,.92) 0%, rgba(51,69,220,.85) 55%, rgba(14,15,27,.9) 120%);
    border: 1px solid rgba(255,255,255,.12);
}
.dash-body.space .no-sub-hero-icon { background: rgba(255,255,255,.14); color: #fff; }
.dash-body.space .ns-step-num { color: rgba(255,255,255,.10); }
.dash-body.space .mp-app-card.popular { background: linear-gradient(180deg, rgba(142,155,255,.10) 0%, var(--white) 60%); }
.dash-body.space .bar { background: linear-gradient(180deg, rgba(68,88,240,.35), rgba(68,88,240,.15)); }
.dash-body.space .btn-primary {
    background: linear-gradient(135deg, #4458F0, #5A6CF6);
    border-color: transparent;
}
.dash-body.space .btn-primary { box-shadow: 0 10px 28px -12px rgba(68,88,240,.85); }
.dash-body.space .btn-primary:hover { background: linear-gradient(135deg, #3345DC, #4A5DEE); }
.dash-body.space .sub-card,
.dash-body.space .subdomain-box,
.dash-body.space .subdomain-input input { background: var(--white); border-color: rgba(255,255,255,.10); }
.dash-body.space .mp-app-card.popular { box-shadow: 0 0 0 1px rgba(68,88,240,.6), 0 20px 50px -24px rgba(68,88,240,.7); }

/* Tungi rejim tugmasi kerak emas — mavzu doim qorong'i */
.dash-body.space [data-theme-toggle] { display: none; }

/* Sozlamalar paneli */
.space .settings-panel { background: #0C0D18; border-left: 1px solid rgba(255,255,255,.08); }
.space .settings-overlay { background: rgba(0,0,0,.55); }
.dash-body.space .btn-light { background: #fff; color: #3345DC; }
.dash-body.space .btn-light:hover { background: #E7EAFD; }

/* settings.css tungi rejimi bu kartalarga qattiq #1E293B beradi — shisha qilamiz */
.dash-body.space .panel,
.dash-body.space .stat-card,
.dash-body.space .quick-actions,
.dash-body.space .info-strip,
.dash-body.space .ns-step,
.dash-body.space .mp-app-card:not(.popular),
.dash-body.space .settings-panel {
    background: var(--white);
    border-color: rgba(255,255,255,.09);
}
.dash-body.space .settings-panel { background: #0C0D18; }
.dash-body.space input,
.dash-body.space select,
.dash-body.space textarea,
.dash-body.space .form-input,
.dash-body.space .form-select {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    color: var(--gray-800);
}
.dash-body.space input:focus,
.dash-body.space textarea:focus,
.dash-body.space select:focus { border-color: #4458F0; box-shadow: 0 0 0 3px rgba(68,88,240,.18); }

/* Ilova haqida oynasi (karta ustiga bosilganda) */
.dash-body.space .app-detail-overlay { background: rgba(2,3,8,.7); }
.dash-body.space .app-detail-box { background: #0E0F1C; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 40px 90px -30px rgba(68,88,240,.5); }
.dash-body.space .app-free-tag { background: rgba(45,212,191,.12); border-color: rgba(45,212,191,.25); color: #5EEAD4; }
.dash-body.space .detail-app-icon { background: rgba(255,255,255,.06); }

/* ============================================================
   ILOVALAR VITRINASI (bosh sahifa) — chapda zarrachalardan yig'ilgan
   ilova belgisi (.as-visual — bo'sh joy), o'ngda shisha karta, ostida chiplar
   ============================================================ */
.mrd.space .app-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    min-height: 460px;
}
.mrd.space .as-visual { height: 440px; }
.mrd.space .as-card {
    --acc: #8E9BFF;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
        rgba(9,10,18,.72);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
    padding: 30px 30px 32px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -50px var(--acc);
    transition: box-shadow .5s ease;
}
/* yuqori chetdagi ingichka rangli chiziq */
.mrd.space .as-card::before {
    content: '';
    position: absolute;
    top: 0; left: 30px; right: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--acc), transparent);
    opacity: .7;
}
.mrd.space .as-card-in { animation: asIn .5s cubic-bezier(.2,.7,.2,1); }
@keyframes asIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mrd.space .as-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.mrd.space .as-icon {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 16px;
    color: #0A0B10;
    background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 100%, #fff 25%), var(--acc));
    box-shadow: 0 12px 30px -12px var(--acc), 0 0 0 1px rgba(255,255,255,.18) inset;
    font-size: 22px;
}
.mrd.space .as-meta { min-width: 0; }
.mrd.space .as-kicker {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7E849C;
    margin-bottom: 4px;
}
.mrd.space .as-kicker em { font-style: normal; opacity: .6; }
.mrd.space .as-kicker b { color: var(--acc); font-weight: 700; }
.mrd.space .as-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
    color: #F5F7FF;
    margin: 0;
}
.mrd.space .as-card p { color: #A3A9BF; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }

.mrd.space .as-feats {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mrd.space .as-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    color: #DDE1EE;
    font-size: 13.5px;
    line-height: 1.45;
    transition: border-color .25s ease, background .25s ease;
}
.mrd.space .as-feats li:hover {
    border-color: color-mix(in srgb, var(--acc) 45%, transparent);
    background: color-mix(in srgb, var(--acc) 7%, transparent);
}
.mrd.space .as-check {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    margin-top: 0;
    font-size: 10px;
    color: var(--acc);
    background: color-mix(in srgb, var(--acc) 16%, transparent);
}
.mrd.space .as-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.mrd.space .as-actions .hero-btn { flex: 1 1 0; justify-content: center; }
.mrd.space .as-actions .hero-btn-main { justify-content: space-between; }
.mrd.space .as-actions .hero-btn-ghost:hover i { transform: scale(1.12); }

/* avto-almashish taymeri */
.mrd.space .as-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.05);
}
.mrd.space .as-progress span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left;
    transform: scaleX(0);
    background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 40%, transparent), var(--acc));
    animation: asBar 5.5s linear forwards;
}
@keyframes asBar { to { transform: scaleX(1); } }

.mrd.space .as-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.mrd.space .as-chip {
    --acc: #8E9BFF;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #C5C9DB;
    font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.mrd.space .as-chip i { color: var(--acc); }
.mrd.space .as-chip:hover { transform: translateY(-2px); color: #fff; }
.mrd.space .as-chip.active {
    color: #fff;
    border-color: var(--acc);
    background: color-mix(in srgb, var(--acc) 16%, transparent);
    box-shadow: 0 8px 24px -12px var(--acc);
}

@media (max-width: 900px) {
    .mrd.space .app-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; }
    .mrd.space .as-visual { height: 300px; }
    .mrd.space .as-card { padding: 24px 20px 26px; }
    .mrd.space .as-card h3 { font-size: 22px; }
    .mrd.space .as-icon { width: 48px; height: 48px; font-size: 19px; border-radius: 14px; }
}
@media (max-width: 480px) {
    .mrd.space .as-visual { height: 250px; }
    .mrd.space .as-chips { gap: 8px; }
    .mrd.space .as-chip { padding: 8px 12px; font-size: 13px; }
    .mrd.space .as-feats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .mrd.space .as-actions { flex-direction: column-reverse; }
    .mrd.space .as-actions .hero-btn { flex: 0 0 auto; }
}

/* Kirish: "Bosh sahifa" havolasi forma kartasi ostida qolib ketmasin —
   absolute o'rniga kartaning tepasida, u bilan bir chiziqda turadi */
.auth-body.space .back-home {
    position: relative;
    top: auto; left: auto;
    z-index: 2;
    align-self: center;
    width: 100%;
    max-width: 440px;
    margin-bottom: 16px;
}

/* ============================================================
   SOZLAMALAR PANELI (space sahifalar) — qorong'i shisha akkordion
   ============================================================ */
html body.space .settings-panel { background: #0B0C17; border-left: 1px solid rgba(255,255,255,.08); }
html body.space .settings-head { border-bottom-color: rgba(255,255,255,.07); }
html body.space .settings-close { background: rgba(255,255,255,.06); color: #C5C9DB; }
html body.space .settings-close:hover { background: rgba(255,255,255,.12); color: #fff; }

html body.space .settings-section[data-accordion] > .settings-label {
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    color: #E6E8F2;
    font-size: 14.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    line-height: 1.3;
}
html body.space .settings-section[data-accordion] > .settings-label > i:first-child {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(68,88,240,.14);
    color: #8E9BFF;
    font-size: 14px;
}
html body.space .settings-section[data-accordion] > .settings-label > span { flex: 1; }
html body.space .settings-section[data-accordion] > .settings-label:hover {
    border-color: rgba(68,88,240,.5);
    background: rgba(68,88,240,.08);
    color: #fff;
}
html body.space .settings-section[data-accordion].open > .settings-label {
    border-color: rgba(68,88,240,.55);
    background: rgba(68,88,240,.10);
    color: #fff;
}
html body.space .settings-acc-arrow { color: #7A8099 !important; }
html body.space .settings-section[data-accordion].open .settings-acc-arrow { color: #8E9BFF !important; }
html body.space .settings-section[data-accordion].open .settings-section-body {
    border: 1px solid rgba(68,88,240,.35);
    border-top: none;
    background: rgba(255,255,255,.02);
}

/* Formalar */
html body.space .settings-input-row label { color: #9AA0B8; }
html body.space .settings-input-row input {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    color: #F3F4FA;
}
html body.space .settings-input-row input:focus { border-color: #4458F0; background: rgba(68,88,240,.06); box-shadow: 0 0 0 3px rgba(68,88,240,.18); }
html body.space .settings-input-row input[readonly] { background: rgba(255,255,255,.02); color: #7A8099; }
html body.space .settings-btn { background: linear-gradient(135deg, #4458F0, #5A6CF6); box-shadow: 0 10px 24px -12px rgba(68,88,240,.8); }
html body.space .settings-btn:hover { background: linear-gradient(135deg, #3345DC, #4A5DEE); }

/* Til kartalari */
html body.space .lang-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); }
html body.space .lang-card:hover { border-color: rgba(68,88,240,.5); background: rgba(68,88,240,.06); }
html body.space .lang-card.active { border-color: #4458F0; background: rgba(68,88,240,.12); }
html body.space .lang-card .lang-flag { background: rgba(255,255,255,.06); }
html body.space .lang-card .lang-tick { background: #4458F0; }
html body.space .lang-info strong { color: #F3F4FA; }
html body.space .lang-info span { color: #9AA0B8; }

/* ============================================================
   OBUNA: do'kon nomi oynasi (dashboard)
   ============================================================ */
.dash-body.space .shop-name-box { max-width: 440px; }
.dash-body.space .app-detail-close { background: rgba(255,255,255,.06); color: #C5C9DB; }
.dash-body.space .app-detail-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.shop-name-form { padding: 26px 28px 28px; }
.sn-app { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.sn-icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 14px;
    font-size: 22px;
    background: rgba(68,88,240,.14);
    border: 1px solid rgba(142,155,255,.25);
    overflow: hidden;
}
.sn-icon img { width: 100%; height: 100%; object-fit: cover; }
.sn-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A90A8; }
.sn-app strong { font-size: 15px; color: #fff; }
.shop-name-form h3 { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 6px; }
.sn-sub { font-size: 14px; color: #9AA0B8; margin: 0 0 20px; line-height: 1.55; }
.sn-label { display: block; font-size: 13px; font-weight: 700; color: #C5C9DB; margin-bottom: 8px; }
.sn-input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: #fff;
    font: inherit;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.sn-input::placeholder { color: #6B7089; }
.sn-input:focus { outline: none; border-color: #4458F0; background: rgba(68,88,240,.06); box-shadow: 0 0 0 4px rgba(68,88,240,.18); }
.sn-error { min-height: 20px; margin-top: 6px; font-size: 12.5px; color: #F87171; }
.sn-actions { display: flex; gap: 10px; margin-top: 10px; }
.sn-actions .btn { flex: 1; justify-content: center; }
.dash-body.space .sub-card-app { display: block; font-size: 12.5px; color: #8A90A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
    .shop-name-form { padding: 22px 20px 22px; }
    .sn-actions { flex-direction: column-reverse; }
}

/* Sharh yulduzlari — sariq o'rniga ko'k */
.mrd.space .review-stars { color: #8E9BFF; }