/* ==========================================================================
   Mentrix — dizayn tizimi
   Yorug' va qorong'i rejim, mobil moslashuv, bitta uslub tili.
   ========================================================================== */

/* ---------- Tokenlar: yorug' rejim ---------- */
:root {
    /* Yuzalar */
    --bg:            #f6f7fb;
    --surface:       #ffffff;
    --surface-2:     #fbfbfe;
    --surface-hover: #f2f4f9;
    /* Yumshoq ichki panel foni. Ilgari ta'riflanmagan edi va uni ishlatgan
       joylar `#f1f5f9` zaxira rangiga tushib, qorong'i mavzuda ham och
       fon bo'lib qolardi. */
    --surface-soft:  #f1f5f9;
    --sidebar:       #10121a;
    --sidebar-text:  #a3a9bd;
    --sidebar-active:#ffffff;

    /* Matn */
    --text:          #171a23;
    --text-muted:    #626a7e;
    --text-faint:    #656c7e;

    /* Chegara */
    --border:        #e5e8f0;
    --border-strong: #d3d8e6;

    /* Brend */
    --primary:       #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft:  #eef0fe;
    --primary-text:  #ffffff;

    /* Holat ranglari */
    --success:       #0b7c45;
    --success-soft:  #e4f6ec;
    --warning:       #9a5d08;
    --warning-soft:  #fdf3e2;
    --danger:        #c92f26;   /* xato nishoni yumshoq fonda AA dan otsin: 4.26 -> 4.69 */
    --danger-soft:   #fdeceb;
    --info:          #2563eb;
    --info-soft:     #e8f0ff;

    /* Grafiklar */
    --chart-1: #4f46e5;
    --chart-2: #0f9d58;
    --chart-3: #c2760a;
    --chart-4: #d3352b;
    --chart-5: #7c3aed;

    /* Shakl */
    --radius:    12px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --shadow:    0 1px 2px rgba(16, 18, 26, .05), 0 4px 16px rgba(16, 18, 26, .06);
    --shadow-lg: 0 8px 32px rgba(16, 18, 26, .14);

    --sidebar-w: 232px;
    --sidebar-w-mini: 64px;
    --header-h:  64px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- Tokenlar: qorong'i rejim ---------- */
[data-theme="dark"] {
    --bg:            #0d0f16;
    --surface:       #161923;
    --surface-2:     #1b1f2b;
    --surface-hover: #212636;
    --surface-soft:  #1b1f2b;
    --sidebar:       #0a0c12;
    --sidebar-text:  #8b93a8;
    --sidebar-active:#ffffff;

    --text:          #eceef4;
    --text-muted:    #9aa2b8;
    --text-faint:    #7c8599;

    --border:        #262b3a;
    --border-strong: #333a4d;

    --primary:       #8780ff;   /* yumshoq fonda AA: 4.22 -> 4.77, tugma matni 5.11 -> 5.78 */
    --primary-hover: #8f88ff;
    --primary-soft:  #232145;
    --primary-text:  #12102b;

    --success:       #34d399;
    --success-soft:  #12291f;
    --warning:       #fbbf24;
    --warning-soft:  #2b2211;
    --danger:        #f87171;
    --danger-soft:   #2d1618;
    --info:          #60a5fa;
    --info-soft:     #14243f;

    --chart-1: #7c74ff;
    --chart-2: #34d399;
    --chart-3: #fbbf24;
    --chart-4: #f87171;
    --chart-5: #a78bfa;

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
}

/* ---------- Asos ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--mono); font-size: .875em; }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar);
    display: flex;
    flex-direction: column;
    z-index: 60;
    /* `width` shu yerga qo'shildi: yig'ish tugmasi bosilganda panel
       to'liq <-> ingichka holat orasida sakramasdan, silliq torayadi/
       kengayadi. Kontent ham (`.main`) shu bilan birga suriladi —
       "bosib ochiladigan" (push) uslub, panel kontent ustiga yotmaydi. */
    transition: transform .22s ease, width .22s cubic-bezier(.4, 0, .2, 1);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 1rem 1rem .875rem;
    color: #fff;
    min-height: var(--header-h);
}
.sidebar-brand .logo {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--chart-5));
    font-size: 1.125rem;
    flex-shrink: 0;
}
.sidebar-brand .name { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.sidebar-brand .sub  { font-size: .6875rem; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: .08em; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .375rem .625rem 1rem;
    scrollbar-width: thin;
}
.nav-group-label {
    padding: .875rem .5rem .3125rem;
    /* 10px yon menyu bo'lim sarlavhasi telefonda o'qish uchun mayda edi */
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    /* To'q yon panelda 3,17:1 berardi — o'lchab yorug'lashtirildi (5,06:1) */
    color: #7d8599;
    font-weight: 600;
}
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem .625rem;
    margin-bottom: 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sidebar-text);
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .18s;
}
.nav-item::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    border-radius: 0 3px 3px 0;
    /* Yon panel ikkala mavzuda ham to'q — ko'rsatkich doim och bo'lishi
       kerak. Ilgari var(--primary-text) dan olinardi va qorong'u
       rejimda tugma siyohi bilan birga quyuqlashib ko'rinmay qolardi. */
    background: #ffffff;
    transform: translateY(-50%);
    transition: height .18s ease;
}
.nav-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
}
.nav-item.active {
    /* Gradient o'rniga tinch to'shak: zich ro'yxatda ko'z tezroq
       ajratadi va matn har doim bir xil kontrastda qoladi. */
    background: color-mix(in srgb, var(--primary) 26%, transparent);
    color: var(--sidebar-active);
    font-weight: 600;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .nav-item.active { background: rgba(99, 91, 255, .26); }
}
.nav-item.active::before { height: 60%; }
.nav-item .icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    text-align: center;
    flex-shrink: 0;
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-item:hover .icon  { transform: scale(1.12); }
.nav-item.active .icon { transform: scale(1.08); }
.nav-item .badge-count {
    margin-left: auto;
    background: var(--danger);
    /* Qorong'u mavzuda nishon foni OCH bo'ladi — oq matn 2,77:1 berardi.
       --primary-text mavzuga qarab almashadi va ikkala holatda ham o'tadi. */
    color: var(--primary-text);
    font-size: .6875rem;
    font-weight: 700;
    padding: .0625rem .375rem;
    border-radius: 999px;
}

/* ---------- Yon panel: yig'iladigan (mini) rejim ----------
   Mavjud `.layout.sidebar-hidden` bilan bir xil uslubda: `.layout.sidebar-mini`.
   Katta ekranda panel 64px gacha yig'iladi va kontentga joy bo'shatadi.

   Menyu matni <span> ichida emas (oddiy matn tuguni), shuning uchun uni
   display:none bilan yashirib bo'lmaydi — punktda font-size:0 qo'yamiz,
   ikonka va hisoblagichda o'lchamni qaytaramiz. */
@media (min-width: 993px) {
    .layout.sidebar-mini .sidebar { width: var(--sidebar-w-mini); }
    .layout.sidebar-mini .main    { margin-left: var(--sidebar-w-mini); }

    .layout.sidebar-mini .sidebar-brand { padding: 1rem .5rem; justify-content: center; }
    .layout.sidebar-mini .sidebar-brand > div,
    .layout.sidebar-mini .sidebar-sub { display: none; }

    /* Bo'lim sarlavhasi butunlay yashirilgan edi — natijada 20 ta punkt
       bitta uzluksiz ustunga aylanib, qayerda bir bo'lim tugab, ikkinchisi
       boshlanishi bilinmasdi. Matnni yashiramiz (font-size:0), lekin
       o'rtacha qisqa chiziqni qoldiramiz — bo'limlar ko'zga ko'rinadigan
       tarzda ajraladi. */
    .layout.sidebar-mini .nav-group-label {
        justify-content: center;
        padding: .625rem 0 .5rem;
        font-size: 0;
    }
    .layout.sidebar-mini .nav-group-label::after { flex: 0 0 22px; }
    .layout.sidebar-mini .sidebar-nav > .nav-group-label:first-child { padding-top: 0; }

    /* Gorizontal siljish BO'LMASIN.
       Ilgari qalqib chiquvchi yorliq `position:absolute` bilan o'ngga
       chiqib turardi va u scroll maydonini kengaytirardi: ichki kenglik
       52px o'rniga 213px bo'lib, pastda keraksiz gorizontal scrollbar
       paydo bo'lardi. Endi yorliq `fixed` — u scroll maydoniga qo'shilmaydi. */
    .layout.sidebar-mini .sidebar-nav {
        padding: .5rem .375rem 1rem;
        overflow-x: hidden;
    }

    /* Barcha punktlar bir xil o'lchamda va markazda tursin.
       Aniq kenglik berilmasa ro'yxatdagi punkt 40px, pastdagi "Chiqish"
       esa 50px bo'lib qolardi: ro'yxatda siljitkich joy egallaydi,
       futerda esa yo'q. */
    .layout.sidebar-mini .nav-item {
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 40px;        /* keng holatdagi 42px min-height ni bosib o'tadi */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 4px;
        padding: 0;
        gap: 0;
        font-size: 0;            /* matn tugunini yashiradi */
        position: relative;
        border-radius: 12px;
    }
    /* Emojilar o'zlarining rang-barang tusiga ega va yalang'och holda
       tartibsiz "konfetti" ko'rinishini berardi. Har biriga bir xil
       yumshoq to'shak berilgach, ular bir xil o'lchamdagi tugmalar
       to'ri sifatida ko'rinadi — rang farqi endi bezakka aylanadi,
       tartibsizlikka emas. */
    .layout.sidebar-mini .nav-item:not(.active) {
        background: var(--sb-panel);
    }
    /* Har xil emoji har xil kenglikda bo'ladi — qat'iy quti berilmasa
       ikonkalar bir-biriga nisbatan qiyshiq turadi. */
    .layout.sidebar-mini .nav-item .icon {
        font-size: 1.0625rem;
        width: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px;
    }

    /* Yig'ilganda punkt nomi qalqib chiqadi.
       `fixed` bo'lgani uchun o'rnini JS beradi (--tip-top). */
    .layout.sidebar-mini .nav-item::after {
        content: attr(data-title);
        position: fixed;
        left: calc(var(--sidebar-w-mini) + 8px);
        top: var(--tip-top, -999px);
        transform: translateY(-50%) scale(.94);
        transform-origin: left center;
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: .375rem .625rem;
        font-size: .8125rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        pointer-events: none;
        transition: opacity .14s ease, transform .14s ease;
        z-index: 80;
    }
    .layout.sidebar-mini .nav-item:hover::after,
    .layout.sidebar-mini .nav-item:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    /* Pastdagi "Chiqish" tugmasi tepadagi ikonkalar bilan bir chiziqda
       tursin. Ilgari futer ichki bo'shlig'i kengroq bo'lgani uchun u
       38px ga siqilib, ro'yxatdan tashqariga chiqib turardi. */
    .layout.sidebar-mini .sidebar-footer { padding: .5rem .375rem; }

    /* Yig'ilgan holatda siljitkich ko'rinmaydi (g'ildirak bilan siljitish
       ishlayveradi). Sababi o'lchandi: siljitkich 10px joy egallab,
       ro'yxatning foydali kengligini 52px ga tushirardi. Pastdagi futerda
       siljitkich yo'q — natijada ikonkalar 5px ga qiyshiq turardi.
       Ikkala idish ham bir xil kenglikda bo'lgach, ular aniq bir chiziqda. */
    .layout.sidebar-mini .sidebar-nav { scrollbar-width: none; }
    .layout.sidebar-mini .sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
    /* Yig'ilganda hisoblagich kichik nuqtaga aylanadi */
    .layout.sidebar-mini .nav-item .badge-count {
        position: absolute;
        top: 5px; right: 7px;
        margin: 0;
        min-width: 8px; height: 8px;
        padding: 0;
        font-size: 0;
        line-height: 0;
    }
}

/* Yig'ish tugmasi — faqat katta ekranda */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;   /* barmoq bilan bosish uchun eng kichik o'lcham */
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: .875rem;
    line-height: 1;
    transition: background .15s, color .15s;
}
.sidebar-toggle:hover  { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (min-width: 993px) { .sidebar-toggle { display: flex; } }
.layout.sidebar-mini .sidebar-toggle { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-item, .nav-item::before, .nav-item::after { transition: none !important; }
}
.sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255,255,255,.07); }

.sidebar-sub {
    display: block;
    padding: .625rem .75rem;
    margin-bottom: .5rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
    transition: background .15s;
}
.sidebar-sub:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.sidebar-sub .ss-label {
    font-size: .6875rem;
    color: var(--sidebar-text);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.sidebar-sub .ss-value { font-weight: 700; font-size: .9375rem; margin-top: .125rem; }
.sidebar-sub .ss-bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
    margin: .4375rem 0 .375rem;
}
.sidebar-sub .ss-bar > span { display: block; height: 100%; border-radius: 999px; }
.sidebar-sub .ss-link { font-size: .75rem; color: var(--sidebar-text); }

.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Panel bilan bir vaqtda, bir xil egri chiziqda suriladi —
       "bosib ochiladigan" uslubda ikkalasi ham birga harakatlanishi shart,
       aks holda kontent sakrab, panel esa silliq torayadi. */
    transition: margin-left .22s cubic-bezier(.4, 0, .2, 1);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .topbar { background: var(--surface); }
}
/* Telefonda yonidagi belgilar siqib, sarlavha ikki qatorga bo'linib ketardi —
   bir qatorda qolsin, joy yetmasa uch nuqta bilan qisqarsin. */
.topbar h1 {
    font-size: 1.1875rem; letter-spacing: -.015em;
    min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.content { padding: 1.5rem; flex: 1; }

/* Bo'lim sarlavhasi — chap tomonda ingichka rangli chiziq */
.section-head .titles { position: relative; padding-left: .875rem; }
.section-head .titles::before {
    content: '';
    position: absolute;
    left: 0; top: .25rem; bottom: .25rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--chart-5));
}
.container { max-width: 1400px; margin: 0 auto; }

/* Menyu tugmasi barcha ekranlarda ishlaydi:
   telefonda yon panelni chiqaradi/yashiradi,
   kompyuterda esa uni yig'ib, ish maydonini kengaytiradi. */
.menu-toggle { display: inline-flex; }

@media (min-width: 781px) {
    .layout.sidebar-hidden .sidebar { transform: translateX(-100%); }
    .layout.sidebar-hidden .main    { margin-left: 0; }
}

/* ---------- Ko'rinish (tab) ---------- */
.pane { display: none; animation: fadeIn .2s ease; }
.pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.section-head .titles { min-width: 0; }
.section-head h2 { margin-bottom: .125rem; }
.section-head .desc { color: var(--text-muted); font-size: .875rem; margin: 0; }
.section-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Kartochkalar ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.375rem;
    box-shadow: var(--shadow);
}
.card + .card { margin-top: 1rem; }
.card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: -.25rem 0 1.125rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--border);
}
.card-head h3 { margin: 0; font-size: 1rem; }
.card-head .small,
.card-head p { margin: 0; }
/* Sarlavhasi tagida chiziq kerak bo'lmagan kartochkalar */
.card-head.plain { border-bottom: 0; padding-bottom: 0; }
/* `flex-wrap` SHART: tugmalar matni o'ralmaydi (`white-space: nowrap`),
   shuning uchun ular sig'masa qatorni tark etib, sahifani gorizontal
   siljitardi. `.section-head .actions` da bu allaqachon bor edi. */
.card-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: 1.25rem 1.25rem 0; margin-bottom: 1rem; }

/* ---------- Ko'rsatkich plitkalari ---------- */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .2s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent, var(--primary));
}
/* Rangli yumshoq nur — plitkalar quruq ko'rinmasin */
.stat::before {
    content: '';
    position: absolute;
    width: 120px; height: 120px;
    right: -40px; top: -50px;
    border-radius: 50%;
    background: var(--accent-soft, var(--primary-soft));
    opacity: .55;
    pointer-events: none;
}
.stat > * { position: relative; z-index: 1; }
.stat .stat-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.stat .stat-icon {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--accent-soft, var(--primary-soft));
    color: var(--accent, var(--primary));
    font-size: .9375rem;
}
.stat .stat-label { font-size: .8125rem; color: var(--text-muted); font-weight: 500; }
.stat .stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.stat .stat-hint { font-size: .8125rem; color: var(--text-muted); margin-top: .25rem; }
.stat .stat-hint strong { color: var(--text); }

.stat.accent-green  { --accent: var(--success); --accent-soft: var(--success-soft); }
.stat.accent-orange { --accent: var(--warning); --accent-soft: var(--warning-soft); }
.stat.accent-red    { --accent: var(--danger);  --accent-soft: var(--danger-soft); }
.stat.accent-blue   { --accent: var(--info);    --accent-soft: var(--info-soft); }

/* Grafik o'rnidagi tushuntirish — kanvas balandligini egallaydi */
.chart-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; min-height: 140px;
    text-align: center;
}

/* ---------- Bosh sahifa: salomlashuv ---------- */
.hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--primary-soft) 0%, transparent 60%),
        var(--surface);
    box-shadow: var(--shadow);
}
.hero-text { flex: 1 1 260px; min-width: 0; }
.hero-text h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 0 0 .1875rem; }
.hero-text p  { font-size: .8125rem; color: var(--text-muted); margin: 0; }
.hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* O'zgarish nishonchasi — raqam yonidagi kichik o'sish/pasayish belgisi */
.delta {
    display: inline-flex; align-items: center; gap: .1875rem;
    font-size: .6875rem; font-weight: 600;
    padding: .0625rem .375rem;
    border-radius: 999px;
    margin-left: .25rem;
    white-space: nowrap;
}
.delta-up   { background: var(--success-soft); color: var(--success); }
.delta-down { background: var(--danger-soft);  color: var(--danger); }
.delta-flat { background: var(--surface-hover); color: var(--text-muted); }

/* ---------- Oylik yig'im ---------- */
.collect-bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    margin: .25rem 0 1rem;
}
.collect-bar .seg { display: block; height: 100%; transition: width var(--t-slow) ease; }
.collect-bar .seg-paid    { background: var(--success); }
.collect-bar .seg-pending { background: var(--warning); }

.collect-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .75rem;
}
.collect-legend .cl { display: flex; align-items: flex-start; gap: .5rem; }
.collect-legend .dot {
    width: 10px; height: 10px; border-radius: 3px;
    margin-top: .3125rem; flex-shrink: 0;
}
.collect-legend .dot-paid    { background: var(--success); }
.collect-legend .dot-pending { background: var(--warning); }
.collect-legend .dot-remain  { background: var(--border-strong); }
.collect-legend .dot-goal    { background: var(--primary); }
.collect-legend b    { display: block; font-size: .9375rem; letter-spacing: -.01em; }
.collect-legend span:not(.dot) { font-size: .75rem; color: var(--text-muted); }

/* ---------- Guruhlar samaradorligi ---------- */
.gp-list { display: flex; flex-direction: column; gap: .625rem; }
.gp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 1.5fr) 52px;
    align-items: center;
    gap: 1rem;
}
.gp-name { min-width: 0; }
.gp-name .t {
    display: block; font-size: .875rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-name .s { display: block; font-size: .75rem; color: var(--text-muted); }
.gp-bar {
    height: 8px; border-radius: 999px;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    overflow: hidden;
}
.gp-bar .fill { display: block; height: 100%; transition: width var(--t-slow) ease; }
.gp-bar .fill.green  { background: var(--success); }
.gp-bar .fill.orange { background: var(--warning); }
.gp-bar .fill.red    { background: var(--danger); }
.gp-bar .fill.gray   { background: var(--border-strong); }
.gp-val { font-size: .8125rem; font-weight: 700; text-align: right; }
.gp-val.green  { color: var(--success); }
.gp-val.orange { color: var(--warning); }
.gp-val.red    { color: var(--danger); }
.gp-val.gray   { color: var(--text-muted); }

/* Telefonda ustunlar torayib ketmasin — chiziq pastga tushadi */
@media (max-width: 560px) {
    .gp-row { grid-template-columns: minmax(0, 1fr) 46px; }
    .gp-bar { grid-column: 1 / -1; order: 3; }
}

/* ---------- Panjara ---------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

/* ---------- Tugmalar ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    padding: .5625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .08s, opacity .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--primary);
    color: var(--primary-text);
    box-shadow: 0 2px 8px -2px var(--primary);
}
.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: 0 4px 14px -3px var(--primary);
}

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); }

.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover:not(:disabled) { background: var(--primary-soft); filter: brightness(.96); }

.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }

/* Kichik tugma ham barmoq bilan bosiladigan bo'lishi kerak: o'lchandi —
   30px edi, tavsiya etilgan eng kichik nishon 32px (WCAG 2.5.5 / Apple HIG). */
.btn-sm { padding: .375rem .625rem; font-size: .8125rem; min-height: 32px; }
.btn-icon { padding: .4375rem; width: 34px; height: 34px; }
.btn-block {
    width: 100%;
    /* Butun enli tugma odatda sahifadagi ASOSIY amal — barmoq uchun
       40px dan past bo'lmasligi kerak (ilgari 37px edi). */
    min-height: 44px;
}

.btn-group { display: inline-flex; gap: .375rem; flex-wrap: wrap; }

/* ---------- Formalar ---------- */
.field { margin-bottom: 1rem; }
.field label {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-muted);
}
.field .hint { font-size: .75rem; color: var(--text-faint); margin-top: .3125rem; }

.input, .select, .textarea {
    width: 100%;
    padding: .5625rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .9375rem;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.textarea { resize: vertical; min-height: 96px; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    padding-right: 2rem;
}
/* Panel ustidagi kichik tanlovlar (saralash, filtr).
   E'lon `.input` dan keyin turishi shart — aks holda o'lchamlar bosilib qoladi. */
.input-sm, .select.input-sm {
    width: auto;
    padding: .375rem 1.75rem .375rem .625rem;
    font-size: .8125rem;
}

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }

.check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .875rem;
    transition: background .15s, border-color .15s;
}
.check:hover { background: var(--surface-hover); }
.check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .5rem; }

/* ---------- Jadvallar ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Ko'chirish oynasidagi o'quvchilar ro'yxati ---------- */
.roster-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.roster-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: .875rem;
}
.roster-row:last-child { border-bottom: 0; }
.roster-row:hover { background: var(--surface-hover); }
.roster-row input { flex-shrink: 0; }
.roster-name { flex: 1; min-width: 0; font-weight: 500;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-meta { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; }
.roster-pts  { font-weight: 700; color: var(--primary); min-width: 48px; text-align: right;
               font-variant-numeric: tabular-nums; }

/* ---------- Qabul havolasi kartochkasi ---------- */
.signup-link {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .875rem 1rem;
    margin-bottom: .625rem;
    background: var(--surface-2);
}
.signup-link:last-child { margin-bottom: 0; }
.signup-link.is-off { opacity: .6; }
.signup-link-top {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.signup-link-title { font-weight: 700; flex: 1; min-width: 0; }
.signup-link-url {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .375rem .5rem;
    word-break: break-all;
    margin-bottom: .625rem;
}
.signup-link-stats {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: .625rem;
}
.signup-link-stats b { color: var(--text); font-size: .9375rem; display: block; }

/* ---------- N oylik to'lov oynasi ---------- */
.mp-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: .875rem 1rem;
    margin-bottom: 1rem;
}
.mp-months { font-size: .8125rem; color: var(--text-muted); line-height: 1.6; margin-bottom: .5rem; }
.mp-total  { font-size: .9375rem; }
.mp-total strong { color: var(--success); font-variant-numeric: tabular-nums; }
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
table.data th {
    padding: .625rem .875rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
table.data td {
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--surface-hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.actions { white-space: nowrap; text-align: right; }
table.data td.nowrap, .nowrap { white-space: nowrap; }
/* Jadvaldagi raqamlar bir tekis tursin */
table.data td b, table.data td code { font-variant-numeric: tabular-nums; }
table.data code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: .0625rem .3125rem;
}

.empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
}
.empty .icon { font-size: 2.25rem; opacity: .5; display: block; margin-bottom: .5rem; }
.empty p { margin: .25rem 0; }
.empty .title { font-weight: 600; color: var(--text); }

/* ---------- Nishonlar ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-green  { background: var(--success-soft); color: var(--success); }
.badge-orange { background: var(--warning-soft); color: var(--warning); }
.badge-red    { background: var(--danger-soft);  color: var(--danger); }
.badge-blue   { background: var(--info-soft);    color: var(--info); }
.badge-gray   { background: var(--surface-hover); color: var(--text-muted); }
.badge-primary{ background: var(--primary-soft); color: var(--primary); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Avatar ---------- */
.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--primary-soft);
    color: var(--primary);
    display: inline-grid;
    place-items: center;
    font-size: .8125rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-sm { width: 28px; height: 28px; font-size: .6875rem; }

.user-cell { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.user-cell .meta { min-width: 0; }
.user-cell .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-cell .sub  { font-size: .75rem; color: var(--text-muted); }

/* ---------- Jarayon chizig'i ---------- */
.progress {
    height: 7px;
    border-radius: 999px;
    background: var(--surface-hover);
    overflow: hidden;
}
.progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width .5s ease;
}
.progress.green > span  { background: var(--success); }
.progress.orange > span { background: var(--warning); }
.progress.red > span    { background: var(--danger); }

.meter-row { display: flex; align-items: center; gap: .625rem; }
.meter-row .progress { flex: 1; }
.meter-row .val { font-size: .8125rem; font-weight: 600; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(10, 12, 18, .6);
    backdrop-filter: blur(3px);
}
.modal.open { display: flex; animation: fadeIn .15s ease; }
.modal-box {
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideUp .2s ease;
}
.modal-box.wide { max-width: 860px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.modal-head h3 { margin: 0; flex: 1; }
.modal-body { padding: 1.25rem; }
.modal-foot {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--surface);
}
.modal-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--surface-hover); color: var(--text); }

/* ---------- Bildirishnoma ---------- */
.toasts {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(380px, calc(100vw - 2rem));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .8125rem 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    box-shadow: var(--shadow-lg);
    font-size: .875rem;
    animation: toastIn .22s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast .icon { flex-shrink: 0; }
.toast.hiding { animation: toastOut .18s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(24px); } }

/* ---------- Ogohlantirish paneli ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--radius);
    font-size: .875rem;
    margin-bottom: 1rem;
}
.alert .icon { flex-shrink: 0; font-size: 1.0625rem; line-height: 1.3; }
.alert-info    { background: var(--info-soft);    color: var(--info); }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }
.alert-danger  { background: var(--danger-soft);  color: var(--danger); }
.alert strong { display: block; margin-bottom: .125rem; }

/* ---------- Qidiruv va filtrlar ---------- */
.toolbar {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.search {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
}
.search input { padding-left: 2.25rem; }
.search::before {
    content: '🔍';
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8125rem;
    opacity: .55;
    pointer-events: none;
}

/* ---------- Davomat tugmalari ---------- */
.att-group { display: inline-flex; gap: .25rem; }
.att-btn {
    padding: .3125rem .5625rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.att-btn:hover { background: var(--surface-hover); }
.att-btn.on[data-status="present"] { background: var(--success); border-color: var(--success); color: #fff; }
.att-btn.on[data-status="absent"]  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.att-btn.on[data-status="late"]    { background: var(--warning); border-color: var(--warning); color: #fff; }
.att-btn.on[data-status="excused"] { background: var(--info);    border-color: var(--info);    color: #fff; }

/* ---------- Grafik ---------- */
.chart-box { position: relative; height: 260px; }
.chart-box.tall { height: 320px; }
.chart-box.short { height: 190px; }

/* ---------- Ro'yxat elementi ---------- */
.list { display: flex; flex-direction: column; }
.list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}
.list-item:last-child { border-bottom: 0; }
.list-item .body { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; font-size: .9375rem; }
.list-item .sub { font-size: .8125rem; color: var(--text-muted); }
.list-item .side { text-align: right; white-space: nowrap; }

/* ---------- Reyting ---------- */
.rank {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    background: var(--surface-hover);
    color: var(--text-muted);
    flex-shrink: 0;
}
.rank.gold   { background: #fde68a; color: #92400e; }
.rank.silver { background: #e2e8f0; color: #475569; }
.rank.bronze { background: #fed7aa; color: #9a3412; }

/* ---------- Kirish sahifasi ---------- */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.auth-visual {
    background: linear-gradient(140deg, #1e1b4b 0%, #312e81 45%, #4f46e5 100%);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.auth-visual::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    right: -120px; bottom: -140px;
}
.auth-visual .brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 2.5rem; }
.auth-visual .brand .logo {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.16);
    border-radius: 12px;
    font-size: 1.375rem;
}
.auth-visual h2 { font-size: 1.875rem; margin-bottom: .75rem; max-width: 22ch; }
.auth-visual p  { color: rgba(255,255,255,.78); max-width: 40ch; }
.auth-features { list-style: none; padding: 0; margin: 2rem 0 0; position: relative; z-index: 1; }
.auth-features li {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem 0;
    color: rgba(255,255,255,.9);
    font-size: .9375rem;
}

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card .card { padding: 1.75rem; }
.auth-card h1 { margin-bottom: .25rem; }
.auth-card .lead { color: var(--text-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: .8125rem; color: var(--text-muted); }
/* "Yordam" havolasi 17px balandlikda edi — barmoq bilan bosish qiyin. */
.auth-help {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 .5rem;
}
/* Mavzu tugmasi aynan 40x40 edi — bosish nishoni chegarasida. */
.auth-foot #themeToggle {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
}


/* ---------- Yordamchi sinflar ---------- */
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.small   { font-size: .8125rem; }
.tiny    { font-size: .75rem; }
.bold    { font-weight: 600; }
.nowrap  { white-space: nowrap; }
.center  { text-align: center; }
.right   { text-align: right; }
.num     { font-variant-numeric: tabular-nums; }
.hidden  { display: none !important; }
.flex    { display: flex; }
.items-center { align-items: center; }
.gap-sm  { gap: .5rem; }
.gap     { gap: 1rem; }
.mt-0 { margin-top: 0; }
.mt    { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb    { margin-bottom: 1rem; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--border); margin: 1.25rem 0; border: 0; }

.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }

.copy-field {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .625rem .75rem;
    background: var(--surface-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: .8125rem;
    word-break: break-all;
}
.copy-field .val { flex: 1; min-width: 0; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface-2) 50%, var(--surface-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite;
    border-radius: var(--radius-sm);
    height: 1rem;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Impersonatsiya lentasi ---------- */
.impersonation-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.5rem;
    background: var(--warning);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
}
.impersonation-bar .btn { margin-left: auto; }

/* ---------- Moslashuv ---------- */
@media (max-width: 1100px) {
    .grid-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}

@media (max-width: 780px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: none; }
    .main { margin-left: 0; }
    .content { padding: 1rem; }
    .topbar { padding: 0 1rem; }
    .topbar h1 { font-size: 1.0625rem; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
    .stat { padding: .875rem 1rem; }
    .stat .stat-value { font-size: 1.375rem; }
    .modal-box { max-height: 94vh; }
    .toasts { top: auto; bottom: 1rem; right: 1rem; left: 1rem; max-width: none; }
    table.data { font-size: .8125rem; }
    table.data th, table.data td { padding: .625rem .5rem; }
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,12,18,.5);
    z-index: 50;
    display: none;
}
.backdrop.show { display: block; }
@media (min-width: 781px) { .backdrop { display: none !important; } }

/* ---------- Bildirishnomalar ---------- */
.notif-wrap { position: relative; }

.notif-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

.notif-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: min(380px, calc(100vw - 2rem));
    max-height: 460px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 70;
    display: none;
}
.notif-panel.open { display: block; animation: slideUp .16s ease; }

.notif-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
}
.notif-head strong { flex: 1; font-size: .9375rem; }

.notif-list { padding: .25rem 0; }

.notif-item {
    display: flex;
    gap: .625rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: var(--primary-soft); }
.notif-item .body { flex: 1; min-width: 0; }
.notif-item .title { font-weight: 600; }
.notif-item .text { color: var(--text-muted); font-size: .8125rem; }
.notif-item .time { color: var(--text-faint); font-size: .75rem; margin-top: .125rem; }

/* ---------- Ichki bo'limlar (subtab) ---------- */
.subtabs {
    display: flex;
    gap: .25rem;
    padding: .25rem;
    margin-bottom: 1rem;
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.subtab {
    flex: 0 0 auto;
    padding: .4375rem .875rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.subtab:hover { color: var(--text); }
.subtab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Haftalik jadval ---------- */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}
.week-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem;
    min-height: 130px;
}
.week-col.is-today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.week-col h4 {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .625rem;
}
.week-col.is-today h4 { color: var(--primary); }

.lesson-chip {
    padding: .5rem .625rem;
    margin-bottom: .5rem;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    font-size: .8125rem;
}
.lesson-chip .time { font-weight: 700; color: var(--primary); }
.lesson-chip .name { font-weight: 600; margin-top: .125rem; }
.lesson-chip .meta { color: var(--text-muted); font-size: .75rem; }

.slot-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap: .5rem;
    align-items: end;
    margin-bottom: .625rem;
    padding-bottom: .625rem;
    border-bottom: 1px dashed var(--border);
}
.slot-row:last-child { border-bottom: 0; }
.slot-row .input, .slot-row .select { padding: .4375rem .5rem; font-size: .875rem; }
.slot-row label { font-size: .6875rem; margin-bottom: .1875rem; }

/* ---------- Hisobot varaqasi ---------- */
.report-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.report-sheet .rs-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}
.rs-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.rs-metric {
    text-align: center;
    padding: .75rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.rs-metric .v { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.rs-metric .l { font-size: .75rem; color: var(--text-muted); margin-top: .125rem; }

@media (max-width: 780px) {
    .week-grid { grid-template-columns: repeat(7, 160px); }
    .slot-row { grid-template-columns: 1fr 1fr; }
    .notif-panel { position: fixed; top: var(--header-h); right: .75rem; left: .75rem; width: auto; }
}

/* ---------- Log ko'rinishi ---------- */
.log-view {
    max-height: 560px;
    overflow-y: auto;
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: .75rem;
    line-height: 1.55;
}
.log-line {
    padding: .4375rem .75rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    white-space: pre-wrap;
    word-break: break-word;
}
.log-line:last-child { border-bottom: 0; }

/* ---------- Tezkor qidiruv ---------- */
#modalSearch .modal-head { padding: .875rem 1rem; }
#modalSearch .input:focus { box-shadow: none; }

.search-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .0625rem .3125rem;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    font-size: .6875rem;
    font-family: var(--mono);
    color: var(--text-faint);
}

.hide-mobile { display: inline; }
@media (max-width: 780px) {
    .hide-mobile { display: none; }
}

/* ==========================================================================
   Obuna va to'lov sahifasi (/billing)
   ========================================================================== */

.bill-page { min-height: 100vh; background: var(--bg); }

.bill-topbar { padding: 0 1.5rem; }
.bill-brand { display: flex; align-items: center; gap: .625rem; }
.bill-brand-logo {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), var(--chart-5));
    font-size: 1.0625rem;
    flex-shrink: 0;
}
.bill-brand-name { font-weight: 700; font-size: 1rem; }

.bill-container { max-width: 980px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

.bill-heading { margin-bottom: 1.5rem; }
.bill-heading h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.bill-heading p { margin: 0; }

.bill-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1.5rem;
}
.bill-main { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.bill-side { display: flex; flex-direction: column; gap: 1.5rem; }

.bill-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.bill-section-head { margin-bottom: 1.25rem; }
.bill-section-head h2 { font-size: 1.0625rem; margin-bottom: .25rem; }
.bill-section-head p { margin: 0; font-size: .875rem; }

/* ---------- Obuna holati: hero ---------- */
.status-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.625rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.status-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--accent, var(--success));
}
.status-card.st-ok     { --accent: var(--success); }
.status-card.st-warn   { --accent: var(--warning); }
.status-card.st-danger { --accent: var(--danger); }

.status-head { display: flex; gap: 1rem; align-items: flex-start; }
.status-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent, var(--success)) 15%, transparent);
    font-size: 1.375rem;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .status-icon { background: var(--surface-2); }
}
.status-body { min-width: 0; flex: 1; }
.status-head h2 { font-size: 1.1875rem; margin-bottom: .3125rem; }
.status-msg { color: var(--text-muted); font-size: .9375rem; margin: 0; line-height: 1.6; }
.status-msg b { color: var(--text); font-weight: 600; }

.status-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 1.125rem;
    border-top: 1px solid var(--border);
}
.status-metric {
    flex: 1 1 140px;
    padding: 0 1.25rem;
    border-left: 1px solid var(--border);
}
.status-metric:first-child { padding-left: 0; border-left: 0; }
.status-metric .sm-label {
    font-size: .6875rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.status-metric .sm-value { font-size: 1.0625rem; font-weight: 700; margin-top: .1875rem; }

.status-progress { display: flex; align-items: center; gap: .75rem; }
.status-progress .progress { flex: 1; }
.status-progress .sp-days {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--accent, var(--success));
    white-space: nowrap;
}

/* ---------- Tarif tanlash ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}
.plan-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3125rem;
    padding: 1rem .875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .08s;
}
.plan-option:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.plan-option:active { transform: translateY(1px); }
.plan-option.selected {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .plan-option.selected { box-shadow: 0 0 0 3px var(--primary-soft); }
}
.plan-option .po-check {
    position: absolute;
    top: .625rem; right: .625rem;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: .625rem;
    color: transparent;
    transition: all .15s;
}
.plan-option.selected .po-check {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.plan-option .po-best {
    align-self: flex-start;
    font-size: .625rem;
    font-weight: 700;
    color: var(--success);
    background: var(--success-soft);
    padding: .0625rem .375rem;
    border-radius: 999px;
    margin-bottom: .125rem;
}
.plan-option .po-label { font-size: .8125rem; color: var(--text-muted); font-weight: 600; padding-right: 1.25rem; }
.plan-option .po-price { font-size: 1.1875rem; font-weight: 700; line-height: 1.15; }
.plan-option .po-price .po-currency { font-size: .6875rem; font-weight: 600; color: var(--text-faint); margin-left: .125rem; }
.plan-option .po-saving { font-size: .6875rem; color: var(--success); font-weight: 600; }

/* ---------- Boshqa muddat ---------- */
.custom-days-toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
.custom-days-toggle:hover { text-decoration: underline; }
.custom-days-panel {
    margin-top: .875rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

/* ---------- Hisob-kitob xulosasi ---------- */
.quote-box {
    margin-top: 1.25rem;
    border-radius: var(--radius);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    overflow: hidden;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .quote-box { border-color: var(--primary); }
}
.quote-box-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.quote-box-arrow { color: var(--primary); font-size: 1.125rem; flex-shrink: 0; }
.quote-box-label { font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.quote-box-value { font-size: 1rem; font-weight: 700; margin-top: .1875rem; }
.quote-box-date { color: var(--primary); }

.quote-box-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.25rem;
    background: var(--surface);
    border-top: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .quote-box-total { border-top-color: var(--border); }
}
.quote-saving {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .625rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--success);
}
.quote-saving::before { content: '↓'; }
.quote-total-amount { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; }

/* ---------- Karta ko'rinishi ---------- */
.bill-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

.card-display {
    position: relative;
    padding: 1.375rem 1.5rem;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.06), transparent 55%),
        linear-gradient(155deg, #1b1e29 0%, #14161f 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
}
.card-display .cd-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.card-display .cd-chip {
    width: 34px; height: 26px;
    border-radius: 5px;
    background: linear-gradient(135deg, #d4c48a, #a9905a);
}
.card-display .cd-copy {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .12);
}
.card-display .cd-copy:hover { background: rgba(255, 255, 255, .18); }
.card-display .cd-number {
    font-family: var(--mono);
    font-size: 1.1875rem;
    letter-spacing: .12em;
    font-weight: 500;
}
.card-display .cd-holder {
    margin-top: .625rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

/* ---------- Chek yuklash ---------- */
.upload-zone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.dragging {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.upload-icon {
    width: 44px; height: 44px;
    margin: 0 auto .625rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 1.25rem;
}
.upload-title { font-weight: 600; font-size: .9375rem; }
.upload-hint { font-size: .8125rem; color: var(--text-muted); margin-top: .1875rem; }

.upload-zone.has-image { padding: .75rem; border-style: solid; border-color: var(--border); cursor: default; }
.upload-filled img {
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-sm);
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.upload-remove {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .75rem;
    padding: .3125rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--danger);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
.upload-remove:hover { background: var(--danger-soft); }

.bill-submit { padding: .8125rem; font-size: .9375rem; }

/* ---------- Yordam bloki ---------- */
.bill-help { text-align: center; }
.bill-help-icon {
    width: 44px; height: 44px;
    margin: 0 auto .75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--info-soft);
    font-size: 1.25rem;
}
.bill-help h3 { font-size: 1rem; margin-bottom: .375rem; }
.bill-help p { margin-bottom: 1rem; }

@media (max-width: 860px) {
    .bill-layout { grid-template-columns: 1fr; }
    .bill-container { padding: 1.25rem 1rem 3rem; }
    .status-card { padding: 1.25rem; }
    .status-metrics { flex-direction: column; gap: .75rem; }
    .status-metric { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: .75rem; }
    .status-metric:first-child { border-top: 0; padding-top: 0; }
    .quote-box-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .quote-box-arrow { display: none; }
}

/* ---------- To'lov kartochkasi (admin) ---------- */
.payment-card { border-left: 3px solid var(--warning); }

.receipt-thumb {
    position: relative;
    display: block;
    margin-bottom: 1rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.receipt-thumb img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
}
.receipt-zoom {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .75rem;
    opacity: 0;
    transition: opacity .15s;
}
.receipt-thumb:hover .receipt-zoom { opacity: 1; }

/* ---------- O'quv materiallari ---------- */
.res-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}
.res-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .875rem .5rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.res-type:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.res-type input { position: absolute; opacity: 0; pointer-events: none; }
.res-type .rt-icon { font-size: 1.375rem; }
.res-type .rt-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); }
.res-type:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.res-type:has(input:checked) .rt-label { color: var(--primary); }

.res-card { display: flex; flex-direction: column; }
.res-card-top { display: flex; gap: .75rem; align-items: flex-start; }
.res-card-icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    font-size: 1.25rem;
}
.res-card-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.res-card-meta { font-size: .75rem; color: var(--text-muted); margin-top: .1875rem; }
.res-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .875rem;
}

/* ---------- Konkurslar ---------- */
.contest-card { border-left: 3px solid var(--border-strong); }
.contest-card.is-running { border-left-color: var(--success); }

.contest-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.contest-meta .cm-label {
    display: block;
    font-size: .6875rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.contest-meta .cm-value { display: block; font-size: .875rem; font-weight: 600; margin-top: .125rem; }

.contest-prizes {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-top: 1rem;
    padding: .75rem .875rem;
    background: var(--warning-soft);
    border-radius: var(--radius-sm);
}
.contest-prizes div {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--warning);
    font-weight: 600;
}

/* ---------- Telegram ichida avtomatik kirish ---------- */
.tg-auto {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    background: var(--bg);
}
.tg-auto-box { text-align: center; }
.tg-auto-text { margin-top: 1rem; color: var(--text-muted); font-size: .9375rem; }

.gate-spinner {
    display: inline-block;
    width: 34px; height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: gateSpin .8s linear infinite;
}
@keyframes gateSpin { to { transform: rotate(360deg); } }

/* ---------- Eslatma modali ---------- */
.remind-targets { display: flex; flex-direction: column; gap: .5rem; }
.remind-targets .check { align-items: flex-start; }
.remind-targets input[type="radio"] { accent-color: var(--primary); margin-top: .125rem; }

/* ---------- Chop etish ---------- */
@media print {
    .sidebar, .topbar, .btn, .toolbar, .modal, .toasts { display: none !important; }
    .main { margin: 0; }
    .card { box-shadow: none; border-color: #ccc; }
    body { background: #fff; }
}

/* ==========================================================================
   SOZLAMALAR — yorliqli, ixcham tartib
   --------------------------------------------------------------------------
   Ilgari markaz sozlamalari bitta 1743 pikselli formaga tiqilgan edi:
   to'lov, karta, ball, Gemini, PayHamyon va bildirishnomalar `<hr>` bilan
   ajratilgan holda ketma-ket turardi. Endi mavzular yorliqlarga bo'lingan.
   Barcha maydonlar DOM da qoladi (yashirin yorliqda ham), shuning uchun
   `dashboard.js` ularni ID bo'yicha o'qishda davom etadi.
   ========================================================================== */

.settings-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 940px;
}

/* ---------- Yorliqlar ---------- */

.set-tabs {
    display: flex;
    gap: .25rem;
    padding: .3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }

.set-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 1 0 auto;
    justify-content: center;
    padding: .6rem .85rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.set-tab .i { font-size: 1rem; line-height: 1; }
.set-tab:hover { background: var(--surface-hover); color: var(--text); }

.set-tab.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow);
}

/* ---------- Panellar ---------- */

.set-panel { display: none; }
.set-panel.active {
    display: block;
    animation: setFade .2s ease;
}
@keyframes setFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.set-card { padding: 1.25rem 1.35rem 1.35rem; }

/* Ikki ustunli maydon juftligi — telefonda o'zi bitta ustunga tushadi */
.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 1rem;
}

/* Kichik bo'lim sarlavhasi — `<hr>` va `<h4>` o'rniga */
.set-sub {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.35rem 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.set-card > .set-sub:first-child { margin-top: 0; }
.set-sub small {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
}
.set-sub .btn { margin-left: auto; }

/* ---------- Profil boshi ---------- */

.set-avatar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--border);
}
.set-avatar-t {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    align-items: flex-start;
    min-width: 0;
}
.set-avatar-t b { font-size: 1rem; }
.set-avatar-t .btn { margin-top: .4rem; }

/* ---------- Saqlash paneli ---------- */

.set-save {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}
.set-save .small { margin-right: auto; }

/* Markaz formasining saqlash paneli kartadan tashqarida turadi */
#formTenantSettings > .set-save {
    margin-top: 0;
    padding: .9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

/* ---------- Bildirishnoma tugmachalari ---------- */

.set-toggles {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.set-toggle {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .16s, background .16s;
}
.set-toggle:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.set-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.set-toggle-b {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 23px;
    margin-top: .1rem;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background .18s;
}
.set-toggle-b::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s cubic-bezier(.34, 1.4, .64, 1);
}
.set-toggle input:checked + .set-toggle-b { background: var(--primary); }
.set-toggle input:checked + .set-toggle-b::after { transform: translateX(17px); }
.set-toggle input:focus-visible + .set-toggle-b {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.set-toggle-t { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.set-toggle-t b     { font-size: .9rem; font-weight: 600; color: var(--text); }
.set-toggle-t small { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }

/* ==========================================================================
   UMUMIY SAYQAL — panelning hamma joyiga tegishli
   ========================================================================== */

/* Bo'lim sarlavhasi: chap tomonda ingichka brend chizig'i */
.section-head .titles h2 {
    position: relative;
    padding-left: .7rem;
}
.section-head .titles h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), transparent);
}

/* Kartalar biroz "ko'tarilgan" his bersin */
.card {
    transition: box-shadow .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-lg); }

/* Bo'lim almashganda yumshoq kirish */
.pane.active { animation: paneIn .22s ease; }
@keyframes paneIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Yon paneldagi faol punktda ko'rinadigan belgi */
.sidebar-nav .nav-item { position: relative; }
.sidebar-nav .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

/* Nusxa maydoni — raqam/havola aniq o'qilsin */
.copy-field .val {
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

/* Klaviatura bilan yurganda fokus har doim ko'rinsin */
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.set-tab:focus-visible,
.nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
    .set-tabs { padding: .25rem; }
    .set-tab  { flex: 0 0 auto; padding: .55rem .7rem; font-size: .8rem; }

    .set-card { padding: 1rem 1rem 1.15rem; }
    .set-grid { grid-template-columns: 1fr; }

    .set-avatar { flex-direction: column; align-items: flex-start; gap: .75rem; }

    .set-save { flex-direction: column; align-items: stretch; }
    .set-save .small { margin-right: 0; text-align: center; }
    .set-save .btn { width: 100%; justify-content: center; }

    #formTenantSettings > .set-save { padding: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .set-panel.active,
    .pane.active { animation: none; }
    .set-toggle-b::after { transition: none; }
}

/* Telefonda 5 ta yorliq gorizontal aylanishga qolib ketardi va
   o'ngdagilarni sezmaslik oson edi — endi ikki qatorga joylashadi. */
@media (max-width: 520px) {
    .set-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .3rem;
        overflow: visible;
    }
    .set-tab {
        flex: initial;
        flex-direction: column;
        gap: .2rem;
        padding: .55rem .3rem;
        font-size: .72rem;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
    .set-tab .i { font-size: 1.05rem; }
}

/* Username maydoni — @ belgisi bilan */
.at-field { position: relative; }
.at-sign {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-muted);
    pointer-events: none;
}
.at-field .input { padding-left: 1.75rem; font-weight: 600; letter-spacing: .2px; }

.hint.hint-ok  { color: var(--success); font-weight: 600; }
.hint.hint-bad { color: var(--danger);  font-weight: 600; }

/* ==========================================================================
   SILLIQLIK VA QULAYLIK QATLAMI
   --------------------------------------------------------------------------
   O'lchov natijasi: panelda 9 xil o'tish davomiyligi ishlatilgan edi
   (.08s, .12s, .14s, .15s, .16s, .18s, .2s, .22s, .5s) va deyarli hech
   qayerda easing ko'rsatilmagan. Har element boshqacha tezlikda javob
   bergani uchun interfeys "silliq emas" his qildirardi.

   Bu yerda uchta bosqichli yagona tizim: tez / odatiy / sekin.
   Mavjud qoidalar o'chirilmaydi — faqat asosiy interaktiv elementlar
   yagona ritmga keltiriladi.
   ========================================================================== */

:root {
    --t-fast: 110ms;    /* bosish, kichik holat o'zgarishi */
    --t-base: 180ms;    /* hover, rang, chegara */
    --t-slow: 280ms;    /* panel ochilishi, katta siljish */

    /* Tabiiy his beruvchi egri: tez boshlanadi, yumshoq to'xtaydi */
    --ease: cubic-bezier(.2, .8, .3, 1);
    /* Ozgina "sakrash" — faqat ijobiy tasdiq uchun */
    --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- Asosiy interaktiv elementlar bir ritmda ---------- */

.btn,
.nav-item,
.card,
.input, .textarea, .select,
.set-tab, .set-toggle, .set-action, .set-color, .set-mini-btn,
.pill, .badge,
.list-item, .data tbody tr {
    transition:
        background-color var(--t-base) var(--ease),
        border-color     var(--t-base) var(--ease),
        color            var(--t-base) var(--ease),
        box-shadow       var(--t-base) var(--ease),
        transform        var(--t-fast) var(--ease);
}

/* Bosilganda darhol javob — kutish sezilmasin */
.btn:active,
.set-tab:active,
.set-mini-btn:active { transform: scale(.97); }

/* ---------- Bosish maydonlari ---------- */
/*
 * O'lchandi: mobil yuqori paneldagi tugmalar 32–34px edi. Barmoq uchun
 * tavsiya etilgan eng kichik o'lcham 44px; bu yerda 40px ni pol qilib
 * oldik va mobil holatda 44px ga chiqardik.
 */
.btn-icon { width: 40px; height: 40px; padding: .5rem; }
.sidebar-toggle { width: 36px; height: 36px; }

/*
 * Sinfsiz `<small>` brauzerda 0.8em bo'ladi va ota elementga qarab
 * 10.7px gacha tushib ketardi — telefonda o'qish qiyin.
 * 11px — o'qilishi mumkin bo'lgan eng kichik o'lcham.
 */
small { font-size: max(11px, .8125em); }

/*
 * Tugmalar balandligi — butun tizim bo'ylab bir xil.
 * O'lchandi: oddiy `.btn` 37px, `.btn-sm` 36px edi — ikkalasi ham 40px
 * chegarasidan past va yonma-yon turganda bo'yi har xil ko'rinardi.
 * Endi ikkalasi ham 40px: qatorlar tekis va bosish qulay.
 */
.btn    { min-height: 40px; }
.btn-sm { min-height: 40px; }

/*
 * Ichki bo'lim yorliqlari ham shu balandlikda tursin. O'lchandi:
 * `.subtab` 36px, `.set-tab` 35px, kichik tanlov ro'yxati 33px edi —
 * yonidagi tugmalardan pastroq turib, qator notekis ko'rinardi.
 */
.subtab  { min-height: 40px; }
.set-tab { min-height: 40px; }
.input-sm, .select.input-sm { min-height: 40px; }

/* 16px katakcha juda kichkina ko'rinardi (bosish maydoni yorliqda — u 40px) */
.check input { width: 18px; height: 18px; }

@media (max-width: 900px) {
    .topbar .btn-icon { width: 44px; height: 44px; }
    .topbar .btn-sm   { min-height: 44px; padding-inline: .75rem; }
    .sidebar-toggle   { width: 44px; height: 44px; }
}
/* Tor telefonda 19px sarlavha 4 ta belgi yonida sig'maydi va uch nuqtaga
   aylanadi — shrift kichrayganda "Bosh sahifa" to'liq ko'rinadi. */
@media (max-width: 480px) {
    .topbar h1 { font-size: .9375rem; }
}

/* Yon paneldagi qatorlar biroz kengroq — ro'yxatni o'qish osonlashadi */
.sidebar-nav .nav-item { min-height: 42px; }

/* ---------- Klaviatura bilan yurish ---------- */
/*
 * Sichqonchasiz ishlaydigan odam qayerda turganini ko'rishi shart.
 * `:focus-visible` faqat klaviatura uchun ishlaydi — sichqoncha bilan
 * bosganda halqa chiqmaydi, shuning uchun dizaynga xalaqit bermaydi.
 */
.btn:focus-visible,
.nav-item:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
.set-tab:focus-visible,
.set-toggle input:focus-visible + .set-toggle-b,
.sidebar-toggle:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- Bo'lim almashinuvi ---------- */

.pane.active {
    animation: paneIn var(--t-slow) var(--ease);
}
@keyframes paneIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Aylantirish chizig'i ---------- */
/*
 * Standart chiziq qorong'i mavzuda juda yorqin va dizayndan ajralib
 * turadi. Nozikroq qilamiz, lekin ko'rinadigan darajada qoldiramiz.
 */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* Yon panelga o'tishda sakrash bo'lmasin */
html { scroll-behavior: smooth; }

/* ---------- Jadval qatorlari ---------- */
/* Sichqoncha qaysi qatorda turganini aniq ko'rsatadi */
.data tbody tr:hover { background: var(--surface-hover); }

/* ---------- Yuklanish holati ---------- */
/*
 * Tugma bosilgach nima bo'layotgani ko'rinsin — aks holda odam
 * ikkinchi marta bosadi (va bu to'lovlarda takrorga olib keladi).
 */
.btn[disabled],
.btn.is-busy {
    opacity: .65;
    cursor: progress;
    pointer-events: none;
}

/* ---------- Harakatni kamaytirish so'ralganda ---------- */
/*
 * Vestibulyar sezgirligi bor odamlar uchun tizim sozlamasi.
 * Bu yerda BARCHA animatsiya to'xtatiladi, funksiya esa saqlanadi.
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active, .set-tab:active, .set-mini-btn:active { transform: none; }
}

/* ==========================================================================
   YON MENYU — qulaylik va ko'rinish
   ========================================================================== */

/*
 * TUZATISH (o'zim kiritgan xato): oldingi sayqal qatlamida
 * `* { scrollbar-color: var(--border-strong) transparent }` yozilgan edi.
 * Yon panel MAVZUDAN QAT'IY NAZAR doim to'q rangda, `--border-strong` esa
 * yorug' mavzuda och kulrang (#d3d8e6). Natijada to'q menyuda yorqin
 * kulrang aylantirish chizig'i paydo bo'lgan edi — ekranda aynan shu
 * ko'rinib turardi.
 */
.sidebar,
.sidebar * {
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.sidebar *::-webkit-scrollbar { width: 6px; }
.sidebar *::-webkit-scrollbar-track { background: transparent; }
.sidebar *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    border: 0;
}
/* Chiziq faqat menyu ustiga kelganda quyuqlashadi — tinch holatda ko'zga urilmaydi */
.sidebar:hover *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); }

/* ---------- Telefonda kengroq tortma ---------- */
/*
 * 232px 375px li ekranda kontentdan atigi 143px qoldirardi — orqadagi
 * sahifa yarim kesilgan holda ko'rinib, tartibsiz taassurot berardi.
 * Endi tortma kengroq va orqa fon aniq qoraytiriladi.
 */
@media (max-width: 780px) {
    .sidebar {
        width: min(84vw, 300px);
        transition: transform 280ms cubic-bezier(.2, .8, .3, 1);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 24px 0 48px -12px rgba(0, 0, 0, .7);
    }
    .backdrop {
        background: rgba(8, 10, 16, .62);
        backdrop-filter: blur(2px);
        transition: opacity 220ms ease;
    }
}

/* ---------- Menyu punktlari ---------- */

.sidebar-nav .nav-item {
    position: relative;
    padding: .5625rem .6875rem;
    border-radius: 11px;
    font-weight: 500;
}

/* Faol punkt chap chetida ingichka belgi — qayerdaligi bir qarashda ko'rinadi */
.sidebar-nav .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: #fff;
    opacity: .9;
}

.sidebar-nav .nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, .06);
}

/* Belgilar bir xil kenglikda — matnlar tik ustunda tekislanadi */
.sidebar-nav .nav-item > span:first-child,
.sidebar-nav .nav-item .icon {
    display: inline-flex;
    justify-content: center;
    width: 1.25rem;
    flex: 0 0 auto;
}

/* ---------- Bo'lim sarlavhalari ---------- */

.nav-group-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}
/* Sarlavhadan keyin nozik chiziq — bo'limlar ko'z bilan ajraladi */
.nav-group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .08);
}
.sidebar-nav > .nav-group-label:first-child { margin-top: 0; }

/* ---------- Brend qismi ---------- */

.sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
}

/* ---------- Pastki qism ---------- */
/* Obuna kartasi va chiqish tugmasi doim ko'rinib tursin */
.sidebar-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    box-shadow: 0 -12px 16px -12px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .backdrop { transition: none; }
}
/* ---------- Barmoq uchun qulay o'lchamlar ---------- */
/*
 * Yig'ish tugmasi va "Chiqish" 36–38px edi — sichqoncha uchun yetarli,
 * lekin barmoq uchun kichik. Ular alohida elementlar, shuning uchun
 * to'g'ridan-to'g'ri kattalashtiriladi.
 */
.sidebar-brand .sidebar-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 10px;
}
.sidebar-footer .nav-item {
    min-height: 40px;
    align-items: center;
}

/* Kichik tugmalar faqat sensorli ekranlarda kattalashadi —
   sichqonchali ekranlarda ixcham ko'rinish saqlanadi. */
@media (pointer: coarse) {
    .btn-sm { min-height: 40px; }
}

/* ==========================================================================
   YON MENYU — yorug' mavzuda OQ panel
   ==========================================================================
   Ilgari yon panel mavzudan qat'iy nazar doim to'q rangda edi. Yorug'
   mavzuda u sahifa yonida qora ustun bo'lib turar, butun dizaynni
   xiralashtirardi. Endi panel mavzuga ergashadi: yorug'da oq, qorong'ida
   chuqur siyoh-ko'k. Barcha ranglar tokenga o'tkazildi — panel ichida
   birorta ham qattiq yozilgan "oq ustiga" qiymat qolmadi.
   -------------------------------------------------------------------------- */

:root {
    /* --- yuza --- */
    --sb-top:      #ffffff;
    --sb-mid:      #fcfcff;
    --sb-bot:      #f4f5fc;
    --sb-glow:     rgba(108, 99, 255, .13);
    --sb-glow-2:   rgba(56, 130, 210, .09);
    --sb-line:     rgba(17, 22, 45, .10);
    --sb-fallback: #fbfbfe;

    /* --- matn --- */
    --sb-fg:       #4a5169;   /* oddiy bo'lim nomi   — 7,6:1 */
    --sb-fg-str:   #12141d;   /* brend va ustiga kelgan holat */
    --sb-label:    #5c6178;   /* bo'lim sarlavhasi va obuna yorliqlari */

    /* --- holatlar --- */
    --sb-hover:    rgba(108, 99, 255, .11);
    --sb-act-bg:   linear-gradient(135deg, #5b52f0, #7c4ff0);
    --sb-act-fg:   #ffffff;   /* siyoh ustida — 5,4:1 */
    --sb-act-sh:   0 6px 18px -8px rgba(91, 82, 240, .75);
    --sb-mark:     rgba(255, 255, 255, .92);

    /* --- yuzalar va chiziqlar --- */
    --sb-panel:    rgba(17, 22, 45, .045);
    --sb-panel-h:  rgba(17, 22, 45, .08);
    --sb-track:    rgba(17, 22, 45, .12);
    --sb-scroll:   rgba(17, 22, 45, .18);
    --sb-scroll-h: rgba(17, 22, 45, .32);
    --sb-drawer:   0 0 0 1px rgba(17, 22, 45, .08), 24px 0 48px -12px rgba(17, 22, 45, .3);
    --sb-foot-sh:  0 -12px 16px -14px rgba(17, 22, 45, .35);

    /* --- obuna holati: oq fonda o'qiladigan to'q variantlar --- */
    --sb-ok:       #067a52;
    --sb-warn:     #8a5a00;
    --sb-danger:   #c02626;
    --sb-ok-bar:   #10b981;
    --sb-warn-bar: #f59e0b;
    --sb-dang-bar: #ef4444;
}

[data-theme="dark"] {
    --sb-top:      #1b2035;
    --sb-mid:      #151928;
    --sb-bot:      #0f121c;
    --sb-glow:     rgba(118, 109, 255, .24);
    --sb-glow-2:   rgba(70, 120, 200, .16);
    --sb-line:     rgba(255, 255, 255, .07);
    --sb-fallback: #171b2b;

    --sb-fg:       #a8b0c6;
    --sb-fg-str:   #ffffff;
    /* Obuna kartasi foni yon panelni biroz yoritadi — 8b93a8 u yerda
       4.42:1 berardi. Yorug'roq qilib AA ga chiqarildi. */
    --sb-label:    #a3abc0;

    --sb-hover:    rgba(124, 116, 255, .16);
    --sb-act-bg:   linear-gradient(135deg, #5b52f0, #7c4ff0);
    --sb-act-fg:   #ffffff;
    --sb-act-sh:   0 6px 18px -8px rgba(108, 99, 255, .9);
    --sb-mark:     rgba(255, 255, 255, .92);

    --sb-panel:    rgba(255, 255, 255, .06);
    --sb-panel-h:  rgba(255, 255, 255, .11);
    --sb-track:    rgba(0, 0, 0, .35);
    --sb-scroll:   rgba(255, 255, 255, .16);
    --sb-scroll-h: rgba(255, 255, 255, .3);
    --sb-drawer:   0 0 0 1px rgba(255, 255, 255, .06), 24px 0 48px -12px rgba(0, 0, 0, .7);
    --sb-foot-sh:  0 -12px 16px -12px rgba(0, 0, 0, .6);

    --sb-ok:       #34d399;
    --sb-warn:     #fbbf24;
    --sb-danger:   #f87171;
    --sb-ok-bar:   #34d399;
    --sb-warn-bar: #fbbf24;
    --sb-dang-bar: #f87171;
}

/* ---------- Yuza ---------- */

.sidebar {
    background:
        radial-gradient(120% 34% at 0% 0%, var(--sb-glow), transparent 62%),
        radial-gradient(100% 26% at 0% 100%, var(--sb-glow-2), transparent 70%),
        linear-gradient(180deg, var(--sb-top) 0%, var(--sb-mid) 38%, var(--sb-bot) 100%);
    background-color: var(--sb-fallback);
    border-right: 1px solid var(--sb-line);
    box-shadow: none;
}

.sidebar, .sidebar * { scrollbar-color: var(--sb-scroll) transparent; }
.sidebar *::-webkit-scrollbar-thumb { background: var(--sb-scroll); }
.sidebar:hover *::-webkit-scrollbar-thumb { background: var(--sb-scroll-h); }

/* ---------- Brend ---------- */

.sidebar-brand {
    background: var(--sb-top);
    border-bottom: 1px solid var(--sb-line);
    color: var(--sb-fg-str);
}
.sidebar-brand .name { color: var(--sb-fg-str); }
.sidebar-brand .sub  { color: var(--sb-label); }
.sidebar-brand .logo {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .22),
        0 6px 16px -6px rgba(91, 82, 240, .7);
}
.sidebar-brand .sidebar-toggle {
    background: var(--sb-panel);
    border: 1px solid var(--sb-line);
    color: var(--sb-fg);
}
.sidebar-brand .sidebar-toggle:hover {
    background: var(--sb-hover);
    border-color: rgba(108, 99, 255, .4);
    color: var(--sb-fg-str);
}

/* ---------- Menyu punktlari ---------- */

.nav-group-label { color: var(--sb-label); }
.nav-group-label::after { background: var(--sb-line); }

.sidebar-nav .nav-item { color: var(--sb-fg); }
.sidebar-nav .nav-item::before { background: var(--sb-mark); }

.sidebar-nav .nav-item:hover:not(.active) {
    background: var(--sb-hover);
    color: var(--sb-fg-str);
}

.sidebar-nav .nav-item.active {
    background: var(--sb-act-bg);
    color: var(--sb-act-fg);
    box-shadow: var(--sb-act-sh);
}

/* ---------- Pastki qism ---------- */

.sidebar-footer {
    border-top: 1px solid var(--sb-line);
    background: none;
    box-shadow: var(--sb-foot-sh);
}

.sidebar-sub {
    background: var(--sb-panel);
    border: 1px solid var(--sb-line);
}
.sidebar-sub:hover {
    background: var(--sb-panel-h);
    border-color: rgba(108, 99, 255, .35);
}
.sidebar-sub .ss-label,
.sidebar-sub .ss-link { color: var(--sb-label); }
.sidebar-sub .ss-bar  { background: var(--sb-track); }

/* Obuna holati — ilgari HTML ichiga qattiq yozilgan edi va oq panelda
   o'qilmasdi. Endi mavzuga qarab almashadigan tokenlardan olinadi. */
.ss-value.ss-success { color: var(--sb-ok); }
.ss-value.ss-warning { color: var(--sb-warn); }
.ss-value.ss-danger  { color: var(--sb-danger); }
.ss-bar > span.ss-success { background: var(--sb-ok-bar); }
.ss-bar > span.ss-warning { background: var(--sb-warn-bar); }
.ss-bar > span.ss-danger  { background: var(--sb-dang-bar); }

.sidebar .nav-item.nav-logout { color: var(--sb-danger); }
.sidebar .nav-item.nav-logout:hover {
    background: color-mix(in srgb, var(--sb-danger) 14%, transparent);
    color: var(--sb-danger);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sidebar .nav-item.nav-logout:hover { background: var(--sb-panel-h); }
}

/* ---------- Telefondagi tortma ---------- */

@media (max-width: 780px) {
    .sidebar { box-shadow: var(--sb-drawer); }
}

/* ==========================================================================
   YON MENYU — to'rtburchak karta, aniq qirralar
   ==========================================================================
   Ilgari panel sahifa bilan bir xil rangda, chekkasiz-chegarasiz edi —
   qayerda tugashi ko'zga aniq ko'rinmasdi. Endi panel butun bo'ylab
   bo'shliq bilan o'ralgan, barcha tomonida chegarasi bor, burchaklari
   yumaloqlangan va soyasi bor — mustaqil to'rtburchak karta sifatida
   sahifadan aniq ajralib turadi. Sahifa foni (--bg) bo'shliqdan ko'rinib
   turadi, shuning uchun kartaning qirralari doim seziladi.
   -------------------------------------------------------------------------- */

:root {
    --sb-gap:    14px;
    --sb-radius: 18px;
}

.sidebar {
    top: var(--sb-gap);
    left: var(--sb-gap);
    bottom: var(--sb-gap);
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    box-shadow:
        0 10px 30px -14px rgba(17, 22, 45, .22),
        0 2px 10px -4px rgba(17, 22, 45, .10);
}
[data-theme="dark"] .sidebar {
    box-shadow:
        0 14px 34px -16px rgba(0, 0, 0, .55),
        0 4px 14px -6px rgba(0, 0, 0, .4);
}

/* Brend qismi panel bilan bir xil (opaque) fonga ega — burchaklarni
   qirqib qo'ymasligi uchun yuqori burchaklar mos yumaloqlanadi. */
.sidebar-brand {
    border-top-left-radius: var(--sb-radius);
    border-top-right-radius: var(--sb-radius);
}

.main { margin-left: calc(var(--sidebar-w) + var(--sb-gap) * 2); }

@media (min-width: 993px) {
    .layout.sidebar-mini .main { margin-left: calc(var(--sidebar-w-mini) + var(--sb-gap) * 2); }
}

/* ---------- Telefonda: chetdan-chetgacha tortma ---------- */
/* Kartaday suzib turish faqat kompyuterda ma'noga ega — tortmada
   panel ekran chetiga yopishib, faqat o'ng tomoni yumaloq bo'ladi. */
@media (max-width: 780px) {
    .sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        border-left: 0;
        border-radius: 0 var(--sb-radius) var(--sb-radius) 0;
    }
    .sidebar-brand {
        border-top-left-radius: 0;
        border-top-right-radius: var(--sb-radius);
    }
    .main { margin-left: 0; }
}