@charset "UTF-8";
/* ============================================================
   KELAJAK MUHANDISLARI — baholash tizimi
   Yagona uslublar fayli. Tartib buzilmasin.

   00. FONTS (@font-face)
   01. DESIGN TOKENS (:root oʻzgaruvchilar)
   02. RESET & BASE
   03. TYPOGRAPHY
   04. BOOTSTRAP BRIDGE (--bs-* override)
   05. LAYOUT (app-shell, sidebar, topbar, content, container)
   06. COMPONENTS
        06.1 Buttons        06.2 Badges & Chips   06.3 Cards & Panels
        06.4 Forms & Inputs 06.5 Tables           06.6 Modals & Drawers
        06.7 Toasts         06.8 Tabs & Segments  06.9 Avatars
        06.10 Progress & Meters                   06.11 Empty & Skeleton
        06.12 Tooltips      06.13 Pagination      06.14 Stepper / Timeline
   07. EFFECTS (aurora, grid, glow, noise, scanline, glass)
   08. PAGES
        08.1 Auth / Login          08.2 Moderator dashboard
        08.3 Moderator session     08.4 STAGE (katta ekran)
        08.5 Expert dashboard      08.6 Expert scoring sheet
        08.7 Admin live monitor    08.8 Admin results matrix
        08.9 Admin CRUD            08.10 Reports
        08.11 Error pages (403/404/419/500)
   09. ANIMATIONS (@keyframes)
   10. UTILITIES
   11. PRINT

   QOIDA: yangi qoidani fayl OXIRIGA qoʻshish taqiqlanadi — tegishli
   boʻlimni topib, oʻsha yerda tahrirlang. Media query'lar oʻz boʻlimining
   oxirida turadi. Barcha qiymat token (var(--km-…)) orqali.
   ============================================================ */


/* ==== 00. FONTS ====================================== */

/* Inter — variable (100..900), asosiy matn */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/ui/inter-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/ui/inter-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk — variable (300..700), sarlavha / display */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/ui/space-grotesk-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/ui/space-grotesk-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — variable (100..800), raqam / ball / taymer */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/ui/jetbrains-mono-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/ui/jetbrains-mono-var-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==== /00. FONTS ===================================== */


/* ==== 01. DESIGN TOKENS ============================== */
:root {
    /* ---- SURFACE / BACKGROUND ---- */
    --km-bg-950: #04060D;
    --km-bg-900: #070A14;
    --km-bg-850: #0B1020;
    --km-bg-800: #101728;
    --km-bg-750: #161F35;
    --km-surface-1: rgba(255, 255, 255, .035);
    --km-surface-2: rgba(255, 255, 255, .055);
    --km-surface-3: rgba(255, 255, 255, .085);
    --km-glass: rgba(14, 22, 40, .62);
    --km-glass-strong: rgba(10, 16, 32, .86);

    /* ---- BORDERS ---- */
    --km-border-1: rgba(148, 178, 255, .10);
    --km-border-2: rgba(148, 178, 255, .18);
    --km-border-3: rgba(148, 178, 255, .30);
    --km-border-glow: rgba(34, 211, 238, .45);

    /* ---- BRAND / ACCENT ---- */
    --km-cyan: #22D3EE;
    --km-cyan-600: #06B6D4;
    --km-cyan-300: #67E8F9;
    --km-blue: #3B82F6;
    --km-blue-600: #2563EB;
    --km-blue-300: #93C5FD;
    --km-violet: #8B5CF6;
    --km-violet-600: #7C3AED;
    --km-violet-300: #C4B5FD;
    --km-magenta: #E879F9;
    --km-magenta-600: #D946EF;
    --km-lime: #A3E635;

    /* ---- SEMANTIC ---- */
    --km-success: #34D399;
    --km-success-bg: rgba(52, 211, 153, .12);
    --km-warning: #FBBF24;
    --km-warning-bg: rgba(251, 191, 36, .12);
    --km-danger: #FB7185;
    --km-danger-bg: rgba(251, 113, 133, .12);
    --km-info: #38BDF8;
    --km-info-bg: rgba(56, 189, 248, .12);
    --km-neutral: #94A3B8;
    --km-neutral-bg: rgba(148, 163, 184, .12);
    --km-violet-bg: rgba(139, 92, 246, .14);

    /* ---- DIRECTION ACCENTS ---- */
    --km-dir-idea: #F5A524;
    --km-dir-idea-2: #FDE047;
    --km-dir-project: #22D3EE;
    --km-dir-project-2: #3B82F6;
    --km-dir-invention: #A855F7;
    --km-dir-invention-2: #E879F9;

    /* Joriy kontekst aksenti — .km-dir--* yoki .km-role--* bilan almashadi */
    --km-accent: var(--km-cyan);
    --km-accent-2: var(--km-blue);
    --km-accent-soft: rgba(34, 211, 238, .14);

    /* ---- TEXT ---- */
    --km-text: #E9EFFB;
    --km-text-2: #B7C4DC;
    --km-text-3: #8494B0;
    --km-text-4: #5E6E8C;
    --km-text-on-accent: #04060D;

    /* ---- GRADIENTS ---- */
    --km-grad-primary: linear-gradient(135deg, #2563EB 0%, #8B5CF6 48%, #22D3EE 100%);
    --km-grad-idea: linear-gradient(135deg, #F5A524 0%, #FDE047 100%);
    --km-grad-project: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
    --km-grad-invention: linear-gradient(135deg, #A855F7 0%, #E879F9 100%);
    --km-grad-surface: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    --km-grad-text: linear-gradient(92deg, #E9EFFB 0%, #8CC5FF 45%, #C4B5FD 100%);
    --km-grad-accent: linear-gradient(135deg, var(--km-accent) 0%, var(--km-accent-2) 100%);

    /* ---- GLOW / SHADOW ---- */
    --km-glow-cyan: 0 0 0 1px rgba(34, 211, 238, .25), 0 8px 32px -8px rgba(34, 211, 238, .45);
    --km-glow-violet: 0 0 0 1px rgba(139, 92, 246, .25), 0 8px 32px -8px rgba(139, 92, 246, .45);
    --km-glow-accent: 0 0 0 1px var(--km-accent-soft), 0 8px 32px -10px var(--km-accent);
    --km-shadow-sm: 0 1px 2px rgba(2, 6, 16, .5);
    --km-shadow-md: 0 8px 24px -8px rgba(2, 6, 16, .65);
    --km-shadow-lg: 0 24px 64px -16px rgba(2, 6, 16, .8);
    --km-shadow-xl: 0 40px 120px -24px rgba(2, 6, 16, .9);

    /* ---- RADIUS (ierarxiya) ---- */
    --km-r-xs: 4px;
    --km-r-sm: 8px;
    --km-r-md: 12px;
    --km-r-lg: 16px;
    --km-r-xl: 20px;
    --km-r-2xl: 28px;
    --km-r-pill: 999px;

    /* ---- SPACING (4px scale) ---- */
    --km-s-1: 4px;
    --km-s-2: 8px;
    --km-s-3: 12px;
    --km-s-4: 16px;
    --km-s-5: 20px;
    --km-s-6: 24px;
    --km-s-7: 32px;
    --km-s-8: 40px;
    --km-s-9: 48px;
    --km-s-10: 64px;
    --km-s-11: 80px;
    --km-s-12: 112px;

    /* ---- TYPOGRAPHY ---- */
    --km-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --km-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --km-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    --km-fs-xs: 14px;   /* ABSOLYUT MINIMUM */
    --km-fs-sm: 15px;
    --km-fs-base: 16px;
    --km-fs-md: 17px;
    --km-fs-lg: 19px;
    --km-fs-xl: 22px;
    --km-fs-2xl: 26px;
    --km-fs-3xl: 32px;
    --km-fs-4xl: 40px;
    --km-fs-5xl: 52px;
    --km-fs-6xl: 68px;
    --km-fs-7xl: 96px;  /* faqat STAGE */

    --km-lh-tight: 1.15;
    --km-lh-snug: 1.3;
    --km-lh-normal: 1.55;
    --km-lh-loose: 1.75;
    --km-ls-tight: -0.02em;
    --km-ls-normal: 0;
    --km-ls-wide: .04em;
    --km-ls-label: .09em;

    --km-fw-regular: 400;
    --km-fw-medium: 500;
    --km-fw-semibold: 600;
    --km-fw-bold: 700;

    /* ---- MOTION ---- */
    --km-ease: cubic-bezier(.22, 1, .36, 1);
    --km-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --km-dur-fast: 160ms;
    --km-dur: 240ms;
    --km-dur-slow: 420ms;
    --km-dur-slower: 720ms;

    /* ---- LAYOUT ---- */
    --km-sidebar-w: 272px;
    --km-sidebar-w-collapsed: 76px;
    --km-topbar-h: 68px;
    --km-content-max: 1680px;

    /* ---- CONTROL METRICS ---- */
    --km-control-h: 44px;
    --km-control-h-lg: 52px;
    --km-control-h-sm: 36px;
    --km-touch-min: 44px;
    --km-row-h: 52px;
    --km-focus-w: 3px;
    --km-border-w: 1px;
    --km-track-h: 8px;
    --km-thumb: 22px;

    /* ---- Z-INDEX ---- */
    --km-z-fx: 0;
    --km-z-base: 1;
    --km-z-sticky: 100;
    --km-z-dropdown: 300;
    --km-z-drawer: 500;
    --km-z-modal: 700;
    --km-z-toast: 900;
    --km-z-tooltip: 1000;
}

/* Yoʻnalish aksentini kontekstga oʻrnatuvchi modifikatorlar.
   DIQQAT: --km-grad-accent va --km-glow-accent ichidagi var() qiymati
   e'lon qilingan element darajasida hisoblanadi — shuning uchun ular
   har bir modifikatorda QAYTA e'lon qilinishi SHART. */
.km-dir--idea {
    --km-accent: #F5A524;
    --km-accent-2: #FDE047;
    --km-accent-soft: rgba(245, 165, 36, .16);
    --km-grad-accent: linear-gradient(135deg, #F5A524 0%, #FDE047 100%);
    --km-glow-accent: 0 0 0 1px rgba(245, 165, 36, .25), 0 8px 32px -10px rgba(245, 165, 36, .55);
}

.km-dir--project {
    --km-accent: #22D3EE;
    --km-accent-2: #3B82F6;
    --km-accent-soft: rgba(34, 211, 238, .16);
    --km-grad-accent: linear-gradient(135deg, #22D3EE 0%, #3B82F6 100%);
    --km-glow-accent: 0 0 0 1px rgba(34, 211, 238, .25), 0 8px 32px -10px rgba(34, 211, 238, .55);
}

.km-dir--invention {
    --km-accent: #A855F7;
    --km-accent-2: #E879F9;
    --km-accent-soft: rgba(168, 85, 247, .16);
    --km-grad-accent: linear-gradient(135deg, #A855F7 0%, #E879F9 100%);
    --km-glow-accent: 0 0 0 1px rgba(168, 85, 247, .25), 0 8px 32px -10px rgba(168, 85, 247, .55);
}

.km-role--admin {
    --km-accent: #3B82F6;
    --km-accent-2: #22D3EE;
    --km-accent-soft: rgba(59, 130, 246, .16);
    --km-grad-accent: linear-gradient(135deg, #3B82F6 0%, #22D3EE 100%);
    --km-glow-accent: 0 0 0 1px rgba(59, 130, 246, .25), 0 8px 32px -10px rgba(59, 130, 246, .55);
}

.km-role--moderator {
    --km-accent: #8B5CF6;
    --km-accent-2: #E879F9;
    --km-accent-soft: rgba(139, 92, 246, .16);
    --km-grad-accent: linear-gradient(135deg, #8B5CF6 0%, #E879F9 100%);
    --km-glow-accent: 0 0 0 1px rgba(139, 92, 246, .25), 0 8px 32px -10px rgba(139, 92, 246, .55);
}
/* ==== /01. DESIGN TOKENS ============================= */


/* ==== 02. RESET & BASE =============================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--km-bg-950);
    color: var(--km-text);
    font-family: var(--km-font-body);
    font-size: var(--km-fs-base);
    line-height: var(--km-lh-normal);
    font-weight: var(--km-fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

a {
    color: var(--km-accent);
    text-decoration: none;
    transition: color var(--km-dur-fast) var(--km-ease);
}

a:hover {
    color: var(--km-accent-2);
}

hr {
    height: var(--km-border-w);
    margin: var(--km-s-5) 0;
    border: 0;
    background: var(--km-border-1);
    opacity: 1;
}

:focus-visible {
    outline: var(--km-focus-w) solid var(--km-accent);
    outline-offset: var(--km-s-1);
    border-radius: var(--km-r-xs);
}

::selection {
    background: var(--km-accent-soft);
    color: var(--km-text);
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--km-border-3) transparent;
}

::-webkit-scrollbar {
    width: var(--km-s-3);
    height: var(--km-s-3);
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--km-border-2);
    border: var(--km-s-1) solid transparent;
    border-radius: var(--km-r-pill);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--km-border-3);
    background-clip: content-box;
}

[hidden] {
    display: none;
}

[aria-busy="true"] {
    cursor: progress;
}

.km-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.km-skip-link {
    position: absolute;
    top: var(--km-s-2);
    left: var(--km-s-2);
    z-index: var(--km-z-tooltip);
    padding: var(--km-s-3) var(--km-s-5);
    background: var(--km-bg-800);
    border: var(--km-border-w) solid var(--km-border-3);
    border-radius: var(--km-r-sm);
    color: var(--km-text);
    font-size: var(--km-fs-sm);
    transform: translateY(-200%);
    transition: transform var(--km-dur) var(--km-ease);
}

.km-skip-link:focus-visible {
    transform: translateY(0);
}
/* ==== /02. RESET & BASE ============================== */


/* ==== 03. TYPOGRAPHY ================================= */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--km-font-display);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-tight);
    letter-spacing: var(--km-ls-tight);
    color: var(--km-text);
}

p {
    margin: 0 0 var(--km-s-4);
}

p:last-child {
    margin-bottom: 0;
}

.km-display {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-5xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
    letter-spacing: var(--km-ls-tight);
}

.km-h1 {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
}

.km-h2 {
    font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-semibold);
}

.km-h3 {
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-semibold);
}

.km-h4 {
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
}

.km-lead {
    font-size: var(--km-fs-md);
    line-height: var(--km-lh-loose);
    color: var(--km-text-2);
}

.km-muted {
    color: var(--km-text-3);
}

.km-dim {
    color: var(--km-text-4);
}

/* Bo'lim ustidagi kichik yorliq: KATTA HARF + keng harf oraligʻi */
.km-label {
    display: block;
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-3);
}

.km-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-medium);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-accent);
}

/* Raqamlar — mono + tabular */
.km-num {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: var(--km-ls-normal);
}

.km-num--xl {
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
}

.km-num--hero {
    font-size: var(--km-fs-6xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
}

.km-grad-text {
    background: var(--km-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.km-accent-text {
    background: var(--km-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.km-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .km-display {
        font-size: var(--km-fs-4xl);
    }

    .km-h1 {
        font-size: var(--km-fs-2xl);
    }

    .km-num--hero {
        font-size: var(--km-fs-5xl);
    }
}
/* ==== /03. TYPOGRAPHY ================================ */


/* ==== 04. BOOTSTRAP BRIDGE =========================== */
/* Bootstrap oʻz utility'larini !important bilan yozadi — shu boʻlim
   yagona joyki, unga qarshi !important ishlatilishi mumkin. */
:root {
    --bs-body-bg: var(--km-bg-950);
    --bs-body-color: var(--km-text);
    --bs-body-font-family: var(--km-font-body);
    --bs-body-font-size: var(--km-fs-base);
    --bs-body-line-height: var(--km-lh-normal);
    --bs-border-color: var(--km-border-2);
    --bs-border-radius: var(--km-r-md);
    --bs-primary: var(--km-blue);
    --bs-link-color: var(--km-accent);
    --bs-link-hover-color: var(--km-accent-2);
    --bs-emphasis-color: var(--km-text);
    --bs-secondary-color: var(--km-text-3);
    --bs-tertiary-color: var(--km-text-4);
    --bs-heading-color: var(--km-text);
    --bs-focus-ring-color: var(--km-accent-soft);
    --bs-focus-ring-width: var(--km-focus-w);
}

body {
    --bs-body-bg: var(--km-bg-950);
}

/* Bootstrap kichik matn utility'lari 14px dan pastga tushmasin */
.small,
small,
.form-text,
.figure-caption {
    font-size: var(--km-fs-xs) !important;
}

/* Bootstrap modal'ini loyiha uslubiga keltirish */
.modal-content {
    background: var(--km-glass-strong) !important;
    border: var(--km-border-w) solid var(--km-border-2) !important;
    border-radius: var(--km-r-xl) !important;
    box-shadow: var(--km-shadow-xl) !important;
    backdrop-filter: blur(24px);
}

.modal-header,
.modal-footer {
    border-color: var(--km-border-1) !important;
    padding: var(--km-s-5) var(--km-s-6) !important;
}

.modal-body {
    padding: var(--km-s-6) !important;
}

.modal-title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-semibold);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--km-bg-950);
    --bs-backdrop-opacity: .72;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .6;
}

.btn-close:hover {
    opacity: 1;
}

/* Bootstrap tugma va formalari oʻrniga km-komponentlar ishlatiladi;
   qolgan holatlar uchun asosiy neytrallash */
.btn:focus-visible,
.form-control:focus-visible {
    box-shadow: none !important;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--km-glass-strong);
    --bs-dropdown-border-color: var(--km-border-2);
    --bs-dropdown-border-radius: var(--km-r-lg);
    --bs-dropdown-link-color: var(--km-text-2);
    --bs-dropdown-link-hover-bg: var(--km-surface-2);
    --bs-dropdown-link-hover-color: var(--km-text);
    --bs-dropdown-font-size: var(--km-fs-sm);
    backdrop-filter: blur(20px);
    box-shadow: var(--km-shadow-lg);
}

.offcanvas {
    --bs-offcanvas-bg: var(--km-bg-900);
    --bs-offcanvas-color: var(--km-text);
    --bs-offcanvas-border-color: var(--km-border-1);
    --bs-offcanvas-width: var(--km-sidebar-w);
}

/* Yajra DataTables — loyiha uslubiga keltirish */
.dataTables_wrapper {
    color: var(--km-text-2);
    font-size: var(--km-fs-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--km-text-2) !important;
    border-color: var(--km-border-2) !important;
}
/* ==== /04. BOOTSTRAP BRIDGE ========================== */


/* ==== 05. LAYOUT ===================================== */
.km-shell {
    display: grid;
    grid-template-columns: var(--km-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    position: relative;
    z-index: var(--km-z-base);
}

/* ---- Sidebar ---- */
.km-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--km-s-5) var(--km-s-4);
    background: linear-gradient(180deg, var(--km-bg-900) 0%, var(--km-bg-950) 100%);
    border-right: var(--km-border-w) solid var(--km-border-1);
    z-index: var(--km-z-sticky);
}

.km-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    padding: var(--km-s-2) var(--km-s-3) var(--km-s-6);
}

.km-sidebar__logo {
    width: var(--km-s-9);
    height: var(--km-s-9);
    flex: 0 0 auto;
    object-fit: contain;
}

.km-sidebar__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-md);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-snug);
    letter-spacing: var(--km-ls-tight);
}

.km-sidebar__subtitle {
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
    line-height: var(--km-lh-snug);
}

.km-sidebar__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--km-s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.km-sidebar__group {
    padding: var(--km-s-5) var(--km-s-3) var(--km-s-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-navlink {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    padding: var(--km-s-3) var(--km-s-3);
    border-radius: var(--km-r-md);
    color: var(--km-text-2);
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-medium);
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-navlink:hover {
    background: var(--km-surface-1);
    color: var(--km-text);
}

.km-navlink__icon {
    width: var(--km-s-5);
    flex: 0 0 auto;
    text-align: center;
    color: var(--km-text-3);
    transition: color var(--km-dur-fast) var(--km-ease);
}

.km-navlink__badge {
    margin-left: auto;
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-navlink--active {
    background: var(--km-accent-soft);
    color: var(--km-text);
}

/* Faol boʻlim hoverda ham faolligicha qolsin (.km-navlink:hover fonni oʻchiradi) */
.km-navlink--active:hover {
    background: var(--km-accent-soft);
    color: var(--km-text);
}

.km-navlink--active::before {
    content: "";
    position: absolute;
    left: calc(var(--km-s-3) * -1);
    top: 50%;
    width: var(--km-s-1);
    height: var(--km-s-5);
    background: var(--km-accent);
    border-radius: var(--km-r-pill);
    transform: translateY(-50%);
    box-shadow: 0 0 var(--km-s-3) var(--km-accent);
}

.km-navlink--active .km-navlink__icon {
    color: var(--km-accent);
}

.km-sidebar__foot {
    flex: 0 0 auto;
    padding-top: var(--km-s-4);
    border-top: var(--km-border-w) solid var(--km-border-1);
}

.km-usercard {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    padding: var(--km-s-3);
    background: var(--km-surface-1);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-lg);
}

.km-usercard__body {
    min-width: 0;
    flex: 1 1 auto;
}

.km-usercard__name {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-usercard__role {
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
}

.km-usercard__logout {
    flex: 0 0 auto;
    width: var(--km-s-8);
    height: var(--km-s-8);
    display: grid;
    place-items: center;
    border-radius: var(--km-r-sm);
    color: var(--km-text-3);
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-usercard__logout:hover {
    background: var(--km-danger-bg);
    color: var(--km-danger);
}

/* ---- Topbar ---- */
.km-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.km-topbar {
    position: sticky;
    top: 0;
    z-index: var(--km-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
    height: var(--km-topbar-h);
    padding: 0 var(--km-s-7);
    background: var(--km-glass);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    backdrop-filter: blur(20px) saturate(140%);
}

.km-topbar__toggle {
    display: none;
    width: var(--km-s-8);
    height: var(--km-s-8);
    place-items: center;
    border-radius: var(--km-r-sm);
    color: var(--km-text-2);
}

.km-topbar__head {
    min-width: 0;
    flex: 1 1 auto;
}

.km-topbar__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--km-s-2);
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-breadcrumb__sep {
    opacity: .6;
}

.km-topbar__tools {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    flex: 0 0 auto;
}

.km-clock {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--km-fs-sm);
    color: var(--km-text-2);
    letter-spacing: var(--km-ls-wide);
}

/* ---- Content ---- */
.km-content {
    flex: 1 1 auto;
    padding: var(--km-s-7);
}

.km-container {
    width: 100%;
    max-width: var(--km-content-max);
    margin-inline: auto;
}

.km-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--km-s-5);
    margin-bottom: var(--km-s-7);
}

.km-page-head__body {
    min-width: 0;
}

.km-page-head__title {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
}

.km-page-head__sub {
    margin-top: var(--km-s-2);
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
}

.km-page-head__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--km-s-3);
    flex: 0 0 auto;
}

/* Asimmetrik ikki ustunli tarkib — chap keng, oʻng sticky panel */
.km-split {
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    gap: var(--km-s-6);
    align-items: start;
}

.km-split--wide {
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
}

.km-sticky-col {
    position: sticky;
    top: calc(var(--km-topbar-h) + var(--km-s-6));
}

/* ---- FOCUS layout: sidebarsiz operator konsoli ---- */
.km-focus {
    position: relative;
    z-index: var(--km-z-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.km-focus__bar {
    position: sticky;
    top: 0;
    z-index: var(--km-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
    height: var(--km-topbar-h);
    padding: 0 var(--km-s-7);
    background: var(--km-glass);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    backdrop-filter: blur(20px) saturate(140%);
}

.km-focus__back {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    flex: 0 0 auto;
    padding: var(--km-s-2) var(--km-s-4) var(--km-s-2) var(--km-s-3);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-pill);
    color: var(--km-text-3);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-focus__back:hover {
    background: var(--km-surface-2);
    color: var(--km-text);
}

.km-focus__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-focus__tools {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    flex: 0 0 auto;
}

.km-focus__user {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
}

.km-focus__body {
    flex: 1 1 auto;
    padding: var(--km-s-7);
}

@media (max-width: 991px) {
    .km-focus__bar {
        padding: 0 var(--km-s-4);
        gap: var(--km-s-3);
    }

    .km-focus__user-name,
    .km-focus .km-clock {
        display: none;
    }

    .km-focus__body {
        padding: var(--km-s-5) var(--km-s-4);
    }
}

/* Off-canvas drawer (kichik ekran) */
.km-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--km-z-drawer);
    background: rgba(4, 6, 13, .68);
    backdrop-filter: blur(4px);
}

@media (max-width: 1279px) {
    .km-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .km-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--km-sidebar-w);
        z-index: calc(var(--km-z-drawer) + 1);
        transform: translateX(-100%);
        transition: transform var(--km-dur) var(--km-ease);
        box-shadow: var(--km-shadow-xl);
    }

    .km-sidebar[data-open="true"] {
        transform: translateX(0);
    }

    .km-sidebar-backdrop[data-open="true"] {
        display: block;
    }

    .km-topbar__toggle {
        display: grid;
    }

    .km-topbar {
        padding: 0 var(--km-s-5);
    }

    .km-content {
        padding: var(--km-s-6) var(--km-s-5);
    }

    .km-split,
    .km-split--wide {
        grid-template-columns: minmax(0, 1fr);
    }

    .km-sticky-col {
        position: static;
    }
}

@media (max-width: 767px) {
    .km-content {
        padding: var(--km-s-5) var(--km-s-4);
    }

    .km-page-head {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: var(--km-s-6);
    }

    .km-page-head__title {
        font-size: var(--km-fs-2xl);
    }

    .km-clock {
        display: none;
    }
}
/* ==== /05. LAYOUT ==================================== */


/* ==== 06. COMPONENTS ================================= */

/* ==== 06.1 BUTTONS =================================== */
.km-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--km-s-2);
    min-height: var(--km-control-h);
    padding: 0 var(--km-s-5);
    border: var(--km-border-w) solid transparent;
    border-radius: var(--km-r-md);
    background: var(--km-surface-2);
    color: var(--km-text);
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--km-dur-fast) var(--km-ease),
                border-color var(--km-dur-fast) var(--km-ease),
                color var(--km-dur-fast) var(--km-ease),
                box-shadow var(--km-dur-fast) var(--km-ease),
                transform var(--km-dur-fast) var(--km-ease);
}

/*
 * DIQQAT: bu qoida `background` ni qayta belgilaydi va bir xil solishtirma
 * ogʻirlikda (0,2,0) turgani uchun variant fonini oʻchiradi. Shuning uchun
 * HAR BIR `.km-btn--*` variantining `:hover` holati oʻz fonini QAYTA eʼlon
 * qilishi shart — aks holda tugma boʻshab qoladi va toʻq matn koʻrinmay ketadi.
 */
.km-btn:hover {
    background: var(--km-surface-3);
    color: var(--km-text);
}

.km-btn:active {
    transform: translateY(1px);
}

.km-btn[disabled],
.km-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.km-btn__icon {
    flex: 0 0 auto;
    font-size: var(--km-fs-base);
}

.km-btn--primary {
    background: var(--km-grad-accent);
    color: var(--km-text-on-accent);
    box-shadow: var(--km-shadow-md);
}

.km-btn--primary:hover {
    background: var(--km-grad-accent);
    color: var(--km-text-on-accent);
    box-shadow: var(--km-glow-accent);
}

.km-btn--brand {
    background: var(--km-grad-primary);
    color: var(--km-text);
    box-shadow: var(--km-shadow-md);
}

.km-btn--brand:hover {
    background: var(--km-grad-primary);
    color: var(--km-text);
    box-shadow: var(--km-glow-violet);
}

.km-btn--outline {
    background: transparent;
    border-color: var(--km-border-3);
    color: var(--km-text-2);
}

.km-btn--outline:hover {
    background: var(--km-surface-1);
    border-color: var(--km-accent);
    color: var(--km-text);
}

.km-btn--ghost {
    background: transparent;
    color: var(--km-text-3);
}

.km-btn--ghost:hover {
    background: var(--km-surface-1);
    color: var(--km-text);
}

.km-btn--danger {
    background: var(--km-danger-bg);
    border-color: var(--km-danger);
    color: var(--km-danger);
}

.km-btn--danger:hover {
    background: var(--km-danger);
    color: var(--km-text-on-accent);
}

.km-btn--success {
    background: var(--km-success-bg);
    border-color: var(--km-success);
    color: var(--km-success);
}

.km-btn--success:hover {
    background: var(--km-success);
    color: var(--km-text-on-accent);
}

.km-btn--sm {
    min-height: var(--km-control-h-sm);
    padding: 0 var(--km-s-4);
    font-size: var(--km-fs-xs);
}

.km-btn--lg {
    min-height: var(--km-control-h-lg);
    padding: 0 var(--km-s-7);
    font-size: var(--km-fs-base);
    border-radius: var(--km-r-lg);
}

.km-btn--xl {
    min-height: var(--km-s-10);
    padding: 0 var(--km-s-8);
    font-size: var(--km-fs-md);
    font-family: var(--km-font-display);
    letter-spacing: var(--km-ls-wide);
    text-transform: uppercase;
    border-radius: var(--km-r-lg);
}

.km-btn--block {
    display: flex;
    width: 100%;
}

.km-btn--icon {
    width: var(--km-control-h);
    min-height: var(--km-control-h);
    padding: 0;
    border-radius: var(--km-r-md);
}

.km-btn--pill {
    border-radius: var(--km-r-pill);
}

.km-btn__spinner {
    display: none;
    width: var(--km-s-4);
    height: var(--km-s-4);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--km-r-pill);
    animation: km-spin var(--km-dur-slower) linear infinite;
}

.km-btn[data-loading="true"] .km-btn__spinner {
    display: block;
}

.km-btn-group {
    display: inline-flex;
    gap: var(--km-s-2);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .km-btn--xl {
        min-height: var(--km-s-9);
        padding: 0 var(--km-s-5);
        font-size: var(--km-fs-sm);
    }
}
/* ==== /06.1 BUTTONS ================================== */


/* ==== 06.2 BADGES & CHIPS ============================ */
.km-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    padding: var(--km-s-1) var(--km-s-3);
    border: var(--km-border-w) solid transparent;
    border-radius: var(--km-r-pill);
    background: var(--km-neutral-bg);
    color: var(--km-neutral);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
    white-space: nowrap;
}

.km-pill--success {
    background: var(--km-success-bg);
    color: var(--km-success);
}

.km-pill--warning {
    background: var(--km-warning-bg);
    color: var(--km-warning);
}

.km-pill--danger {
    background: var(--km-danger-bg);
    color: var(--km-danger);
}

.km-pill--info {
    background: var(--km-info-bg);
    color: var(--km-info);
}

.km-pill--violet {
    background: var(--km-violet-bg);
    color: var(--km-violet-300);
}

.km-pill--accent {
    background: var(--km-accent-soft);
    color: var(--km-accent);
}

.km-pill--solid {
    background: var(--km-grad-accent);
    color: var(--km-text-on-accent);
}

.km-pill--lg {
    padding: var(--km-s-2) var(--km-s-4);
    font-size: var(--km-fs-sm);
}

/* Statusni bildiruvchi nuqta */
.km-dot {
    width: var(--km-s-2);
    height: var(--km-s-2);
    flex: 0 0 auto;
    border-radius: var(--km-r-pill);
    background: currentColor;
}

.km-dot--live {
    animation: km-pulse-dot 1.8s var(--km-ease-in-out) infinite;
}

/* Yoʻnalish chipi — chap chetida rangli chiziq */
.km-dirchip {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    padding: var(--km-s-2) var(--km-s-4) var(--km-s-2) var(--km-s-3);
    border: var(--km-border-w) solid var(--km-border-2);
    border-left: var(--km-s-1) solid var(--km-accent);
    border-radius: var(--km-r-xs) var(--km-r-sm) var(--km-r-sm) var(--km-r-xs);
    background: var(--km-surface-1);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-wide);
    color: var(--km-text-2);
    white-space: nowrap;
}

.km-dirchip__icon {
    color: var(--km-accent);
}

/* Medal chipi (1/2/3-oʻrin) */
.km-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--km-s-1);
    min-width: var(--km-s-8);
    padding: var(--km-s-1) var(--km-s-3);
    border-radius: var(--km-r-pill);
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-bold);
    background: var(--km-surface-2);
    color: var(--km-text-3);
}

.km-medal--1 {
    background: linear-gradient(135deg, #F5A524, #FDE047);
    color: var(--km-text-on-accent);
}

.km-medal--2 {
    background: linear-gradient(135deg, #94A3B8, #E2E8F0);
    color: var(--km-text-on-accent);
}

.km-medal--3 {
    background: linear-gradient(135deg, #B45309, #F59E0B);
    color: var(--km-text-on-accent);
}
/* ==== /06.2 BADGES & CHIPS =========================== */


/* ==== 06.3 CARDS & PANELS ============================ */
.km-card {
    position: relative;
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-xl);
    box-shadow: var(--km-shadow-md);
    backdrop-filter: blur(16px) saturate(130%);
    overflow: hidden;
}

.km-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-s-4);
    padding: var(--km-s-5) var(--km-s-6);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
}

.km-card__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
}

.km-card__sub {
    margin-top: var(--km-s-1);
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
}

.km-card__body {
    padding: var(--km-s-6);
}

.km-card__body--flush {
    padding: 0;
}

.km-card__foot {
    padding: var(--km-s-4) var(--km-s-6);
    border-top: var(--km-border-w) solid var(--km-border-1);
    background: var(--km-surface-1);
}

.km-card--accent {
    border-color: var(--km-accent-soft);
}

.km-card--accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--km-grad-accent);
}

.km-card--flat {
    background: var(--km-surface-1);
    box-shadow: none;
    backdrop-filter: none;
}

/* Statistik karta — katta raqam + kichik yorliq (tipografik kontrast) */
.km-stat {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-2);
    padding: var(--km-s-5);
    background: var(--km-grad-surface);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-lg);
    transition: border-color var(--km-dur) var(--km-ease), transform var(--km-dur) var(--km-ease);
}

.km-stat:hover {
    border-color: var(--km-border-3);
    transform: translateY(-2px);
}

.km-stat__label {
    display: flex;
    align-items: center;
    gap: var(--km-s-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-3);
}

.km-stat__value {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
    color: var(--km-text);
}

.km-stat__unit {
    font-size: var(--km-fs-lg);
    color: var(--km-text-3);
}

.km-stat__hint {
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-stat--accent .km-stat__value {
    color: var(--km-accent);
}

.km-grid {
    display: grid;
    gap: var(--km-s-5);
}

.km-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.km-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.km-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1279px) {
    .km-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .km-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .km-card__head,
    .km-card__body {
        padding: var(--km-s-5) var(--km-s-4);
    }
}

@media (max-width: 599px) {
    .km-grid--2,
    .km-grid--3,
    .km-grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .km-stat__value {
        font-size: var(--km-fs-3xl);
    }
}
/* ==== /06.3 CARDS & PANELS =========================== */


/* ==== 06.4 FORMS & INPUTS ============================ */
.km-form {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-5);
}

.km-field {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-2);
}

.km-field__label {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-wide);
    color: var(--km-text-2);
}

.km-field__req {
    color: var(--km-danger);
}

.km-field__hint {
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-field__error {
    display: flex;
    align-items: center;
    gap: var(--km-s-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-medium);
    color: var(--km-danger);
}

.km-input,
.km-select,
.km-textarea {
    width: 100%;
    min-height: var(--km-control-h-lg);
    padding: var(--km-s-3) var(--km-s-4);
    background: var(--km-surface-2);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-md);
    color: var(--km-text);
    font-size: var(--km-fs-sm);
    line-height: var(--km-lh-normal);
    transition: border-color var(--km-dur-fast) var(--km-ease),
                background var(--km-dur-fast) var(--km-ease),
                box-shadow var(--km-dur-fast) var(--km-ease);
}

.km-input::placeholder,
.km-textarea::placeholder {
    color: var(--km-text-4);
}

.km-input:hover,
.km-select:hover,
.km-textarea:hover {
    border-color: var(--km-border-3);
}

.km-input:focus,
.km-select:focus,
.km-textarea:focus {
    outline: none;
    background: var(--km-surface-1);
    border-color: var(--km-border-glow);
    box-shadow: 0 0 0 var(--km-focus-w) var(--km-accent-soft);
}

.km-textarea {
    min-height: var(--km-s-12);
    resize: vertical;
}

.km-select {
    appearance: none;
    padding-right: var(--km-s-9);
    background-image: linear-gradient(45deg, transparent 50%, var(--km-text-3) 50%),
                      linear-gradient(135deg, var(--km-text-3) 50%, transparent 50%);
    background-position: calc(100% - var(--km-s-5)) center, calc(100% - var(--km-s-4)) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.km-select option {
    background: var(--km-bg-800);
    color: var(--km-text);
}

.km-input--invalid,
.km-select--invalid,
.km-textarea--invalid {
    border-color: var(--km-danger);
}

.km-input--invalid:focus {
    box-shadow: 0 0 0 var(--km-focus-w) var(--km-danger-bg);
}

/* Ikonka bilan input */
.km-inputgroup {
    position: relative;
    display: flex;
    align-items: center;
}

.km-inputgroup__icon {
    position: absolute;
    left: var(--km-s-4);
    color: var(--km-text-4);
    pointer-events: none;
}

.km-inputgroup__action {
    position: absolute;
    right: var(--km-s-2);
    width: var(--km-s-9);
    height: var(--km-s-9);
    display: grid;
    place-items: center;
    border-radius: var(--km-r-sm);
    color: var(--km-text-3);
    transition: color var(--km-dur-fast) var(--km-ease), background var(--km-dur-fast) var(--km-ease);
}

.km-inputgroup__action:hover {
    background: var(--km-surface-2);
    color: var(--km-text);
}

.km-inputgroup--icon .km-input {
    padding-left: var(--km-s-10);
}

.km-inputgroup--action .km-input {
    padding-right: var(--km-s-10);
}

/* Checkbox / switch */
.km-check {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-3);
    font-size: var(--km-fs-sm);
    color: var(--km-text-2);
    cursor: pointer;
    user-select: none;
}

.km-check__box {
    position: relative;
    width: var(--km-s-5);
    height: var(--km-s-5);
    flex: 0 0 auto;
    appearance: none;
    background: var(--km-surface-2);
    border: var(--km-border-w) solid var(--km-border-3);
    border-radius: var(--km-r-xs);
    cursor: pointer;
    transition: background var(--km-dur-fast) var(--km-ease), border-color var(--km-dur-fast) var(--km-ease);
}

.km-check__box:checked {
    background: var(--km-grad-accent);
    border-color: transparent;
}

.km-check__box:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--km-text-on-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}

.km-switch {
    position: relative;
    width: var(--km-s-10);
    height: var(--km-s-6);
    flex: 0 0 auto;
    appearance: none;
    background: var(--km-surface-3);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-pill);
    cursor: pointer;
    transition: background var(--km-dur-fast) var(--km-ease);
}

.km-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--km-s-5);
    height: var(--km-s-5);
    background: var(--km-text-3);
    border-radius: var(--km-r-pill);
    transition: transform var(--km-dur) var(--km-ease), background var(--km-dur) var(--km-ease);
}

.km-switch:checked {
    background: var(--km-accent-soft);
    border-color: var(--km-accent);
}

.km-switch:checked::after {
    background: var(--km-accent);
    transform: translateX(var(--km-s-8));
}

/* Fayl tashlash zonasi */
.km-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--km-s-3);
    padding: var(--km-s-9) var(--km-s-6);
    border: 2px dashed var(--km-border-2);
    border-radius: var(--km-r-lg);
    background: var(--km-surface-1);
    text-align: center;
    color: var(--km-text-3);
    font-size: var(--km-fs-sm);
    cursor: pointer;
    transition: border-color var(--km-dur) var(--km-ease), background var(--km-dur) var(--km-ease);
}

.km-dropzone:hover,
.km-dropzone[data-drag="true"] {
    border-color: var(--km-accent);
    background: var(--km-accent-soft);
    color: var(--km-text);
}

.km-dropzone__icon {
    font-size: var(--km-fs-3xl);
    color: var(--km-accent);
}

/* Filtr paneli */
.km-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--km-s-4);
    padding: var(--km-s-5);
    background: var(--km-surface-1);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-lg);
    margin-bottom: var(--km-s-5);
}

.km-filters__field {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-2);
    min-width: 180px;
    flex: 1 1 180px;
}

.km-filters__actions {
    display: flex;
    gap: var(--km-s-2);
    flex: 0 0 auto;
}

.km-activefilters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-s-2);
    margin-bottom: var(--km-s-4);
}

.km-activefilters__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    padding: var(--km-s-1) var(--km-s-2) var(--km-s-1) var(--km-s-3);
    background: var(--km-accent-soft);
    border-radius: var(--km-r-pill);
    font-size: var(--km-fs-xs);
    color: var(--km-text);
}

.km-activefilters__remove {
    display: grid;
    place-items: center;
    width: var(--km-s-5);
    height: var(--km-s-5);
    border-radius: var(--km-r-pill);
    color: var(--km-text-3);
}

.km-activefilters__remove:hover {
    background: var(--km-surface-3);
    color: var(--km-text);
}

@media (max-width: 767px) {
    .km-filters {
        padding: var(--km-s-4);
    }

    .km-filters__field {
        min-width: 100%;
        flex-basis: 100%;
    }
}
/* ==== /06.4 FORMS & INPUTS =========================== */


/* ==== 06.5 TABLES ==================================== */
.km-tablewrap {
    width: 100%;
    overflow-x: auto;
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-lg);
    background: var(--km-glass);
}

.km-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--km-fs-sm);
}

.km-table th {
    position: sticky;
    top: 0;
    z-index: var(--km-z-base);
    padding: var(--km-s-3) var(--km-s-4);
    background: var(--km-bg-850);
    border-bottom: var(--km-border-w) solid var(--km-border-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-wide);
    text-transform: uppercase;
    text-align: left;
    color: var(--km-text-3);
    white-space: nowrap;
}

.km-table td {
    height: var(--km-row-h);
    padding: var(--km-s-3) var(--km-s-4);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    color: var(--km-text-2);
    vertical-align: middle;
}

.km-table tbody tr {
    transition: background var(--km-dur-fast) var(--km-ease);
}

.km-table tbody tr:hover {
    background: var(--km-surface-1);
}

.km-table tbody tr:last-child td {
    border-bottom: 0;
}

.km-table tfoot td {
    height: var(--km-row-h);
    padding: var(--km-s-3) var(--km-s-4);
    border-top: var(--km-border-w) solid var(--km-border-2);
    background: var(--km-surface-1);
    color: var(--km-text);
    vertical-align: middle;
}

.km-table__num {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--km-text);
}

.km-table__strong {
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
}

.km-table__actions {
    display: flex;
    gap: var(--km-s-1);
    justify-content: flex-end;
}

.km-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-1);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.km-table__sort:hover {
    color: var(--km-text);
}

.km-table--compact td {
    height: auto;
    padding: var(--km-s-2) var(--km-s-3);
}

/* Yopishqoq birinchi ustun (natijalar matritsasi uchun) */
.km-table--sticky-first th:first-child,
.km-table--sticky-first td:first-child {
    position: sticky;
    left: 0;
    z-index: var(--km-z-base);
    background: var(--km-bg-850);
    border-right: var(--km-border-w) solid var(--km-border-2);
}

.km-table--sticky-first th:first-child {
    z-index: calc(var(--km-z-base) + 1);
}

@media (max-width: 767px) {
    .km-table {
        font-size: var(--km-fs-xs);
    }

    .km-table td,
    .km-table th {
        padding: var(--km-s-2) var(--km-s-3);
    }
}
/* ==== /06.5 TABLES =================================== */


/* ==== 06.6 MODALS & DRAWERS ========================== */
.km-modal__lead {
    margin-bottom: var(--km-s-4);
    font-size: var(--km-fs-sm);
    color: var(--km-text-2);
}

.km-modal__icon {
    display: grid;
    place-items: center;
    width: var(--km-s-11);
    height: var(--km-s-11);
    margin: 0 auto var(--km-s-5);
    border-radius: var(--km-r-2xl);
    background: var(--km-accent-soft);
    color: var(--km-accent);
    font-size: var(--km-fs-3xl);
}

.km-modal__icon--warning {
    background: var(--km-warning-bg);
    color: var(--km-warning);
}

.km-modal__icon--danger {
    background: var(--km-danger-bg);
    color: var(--km-danger);
}

.km-modal__note {
    display: flex;
    gap: var(--km-s-3);
    padding: var(--km-s-4);
    border: var(--km-border-w) solid var(--km-warning);
    border-radius: var(--km-r-md);
    background: var(--km-warning-bg);
    font-size: var(--km-fs-xs);
    color: var(--km-text-2);
}

/* Oʻng tomondan chiquvchi drawer */
.km-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--km-z-drawer);
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    background: var(--km-bg-900);
    border-left: var(--km-border-w) solid var(--km-border-2);
    box-shadow: var(--km-shadow-xl);
    transform: translateX(100%);
    transition: transform var(--km-dur-slow) var(--km-ease);
}

.km-drawer[data-open="true"] {
    transform: translateX(0);
}

/* Drawer ichidagi forma: sarlavha + skroll qismi + pastki panel */
.km-drawer form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.km-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-s-4);
    padding: var(--km-s-5) var(--km-s-6);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
}

.km-drawer__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-semibold);
}

.km-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--km-s-6);
}

.km-drawer__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--km-s-3);
    padding: var(--km-s-5) var(--km-s-6);
    border-top: var(--km-border-w) solid var(--km-border-1);
    background: var(--km-surface-1);
}

.km-drawer__section {
    padding-bottom: var(--km-s-6);
    margin-bottom: var(--km-s-6);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
}

.km-drawer__section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.km-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--km-z-drawer) - 1);
    background: rgba(4, 6, 13, .68);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--km-dur) var(--km-ease), visibility var(--km-dur) var(--km-ease);
}

.km-drawer-backdrop[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 599px) {
    .km-drawer {
        width: 100vw;
    }

    .km-drawer__body,
    .km-drawer__head,
    .km-drawer__foot {
        padding: var(--km-s-4);
    }
}
/* ==== /06.6 MODALS & DRAWERS ========================= */


/* ==== 06.7 TOASTS ==================================== */
.km-toasts {
    position: fixed;
    right: var(--km-s-6);
    bottom: var(--km-s-6);
    z-index: var(--km-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--km-s-3);
    width: min(400px, calc(100vw - var(--km-s-8)));
    pointer-events: none;
}

.km-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--km-s-3);
    padding: var(--km-s-4);
    background: var(--km-glass-strong);
    border: var(--km-border-w) solid var(--km-border-2);
    border-left: var(--km-s-1) solid var(--km-info);
    border-radius: var(--km-r-md);
    box-shadow: var(--km-shadow-lg);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    animation: km-toast-in var(--km-dur-slow) var(--km-ease);
}

.km-toast[data-closing="true"] {
    animation: km-toast-out var(--km-dur) var(--km-ease) forwards;
}

.km-toast__icon {
    flex: 0 0 auto;
    font-size: var(--km-fs-lg);
    color: var(--km-info);
}

/* Serverdan kelgan toast'da ikonka turi CSS bilan belgilanadi —
   blade'da hech qanday shart boʻlmasligi uchun. */
.km-toast .km-toast__icon::before {
    content: "\f05a";
}

.km-toast--success .km-toast__icon::before {
    content: "\f058";
}

.km-toast--warning .km-toast__icon::before {
    content: "\f06a";
}

.km-toast--danger .km-toast__icon::before {
    content: "\f071";
}

.km-toast__body {
    flex: 1 1 auto;
    min-width: 0;
}

.km-toast__title {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
}

.km-toast__text {
    margin-top: var(--km-s-1);
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
}

.km-toast__close {
    flex: 0 0 auto;
    width: var(--km-s-6);
    height: var(--km-s-6);
    display: grid;
    place-items: center;
    border-radius: var(--km-r-xs);
    color: var(--km-text-4);
}

.km-toast__close:hover {
    color: var(--km-text);
}

.km-toast--success {
    border-left-color: var(--km-success);
}

.km-toast--success .km-toast__icon {
    color: var(--km-success);
}

.km-toast--warning {
    border-left-color: var(--km-warning);
}

.km-toast--warning .km-toast__icon {
    color: var(--km-warning);
}

.km-toast--danger {
    border-left-color: var(--km-danger);
}

.km-toast--danger .km-toast__icon {
    color: var(--km-danger);
}

@media (max-width: 599px) {
    .km-toasts {
        right: var(--km-s-3);
        left: var(--km-s-3);
        bottom: var(--km-s-3);
        width: auto;
    }
}
/* ==== /06.7 TOASTS =================================== */


/* ==== 06.8 TABS & SEGMENTS =========================== */
.km-tabs {
    display: flex;
    gap: var(--km-s-1);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    overflow-x: auto;
}

.km-tabs__item {
    position: relative;
    padding: var(--km-s-3) var(--km-s-4);
    color: var(--km-text-3);
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-medium);
    white-space: nowrap;
    transition: color var(--km-dur-fast) var(--km-ease);
}

.km-tabs__item:hover {
    color: var(--km-text);
}

.km-tabs__item--active {
    color: var(--km-accent);
}

.km-tabs__item--active::after {
    content: "";
    position: absolute;
    left: var(--km-s-3);
    right: var(--km-s-3);
    bottom: -1px;
    height: 2px;
    background: var(--km-accent);
    border-radius: var(--km-r-pill);
}

.km-seg {
    display: inline-flex;
    padding: var(--km-s-1);
    background: var(--km-surface-1);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-md);
}

.km-seg__item {
    padding: var(--km-s-2) var(--km-s-4);
    border-radius: var(--km-r-sm);
    color: var(--km-text-3);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    white-space: nowrap;
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-seg__item:hover {
    color: var(--km-text);
}

.km-seg__item--active {
    background: var(--km-surface-3);
    color: var(--km-text);
}
/* ==== /06.8 TABS & SEGMENTS ========================== */


/* ==== 06.9 AVATARS =================================== */
.km-avatar {
    display: grid;
    place-items: center;
    width: var(--km-s-9);
    height: var(--km-s-9);
    flex: 0 0 auto;
    border-radius: var(--km-r-pill);
    background: var(--km-grad-accent);
    color: var(--km-text-on-accent);
    font-family: var(--km-font-display);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-bold);
    letter-spacing: var(--km-ls-wide);
    overflow: hidden;
    user-select: none;
}

.km-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.km-avatar--sm {
    width: var(--km-s-7);
    height: var(--km-s-7);
    font-size: var(--km-fs-xs);
}

.km-avatar--lg {
    width: var(--km-s-11);
    height: var(--km-s-11);
    font-size: var(--km-fs-xl);
}

.km-avatar--muted {
    background: var(--km-surface-3);
    color: var(--km-text-3);
}

.km-avatar-stack {
    display: flex;
}

.km-avatar-stack .km-avatar {
    margin-left: calc(var(--km-s-3) * -1);
    border: 2px solid var(--km-bg-900);
}

.km-avatar-stack .km-avatar:first-child {
    margin-left: 0;
}

/* Avatar + halqa (ekspert baholash progressi) */
.km-avatar-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--km-s-10);
    height: var(--km-s-10);
    flex: 0 0 auto;
}

.km-avatar-ring__svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
}

.km-avatar-ring__track {
    fill: none;
    stroke: var(--km-surface-3);
    stroke-width: 3;
}

.km-avatar-ring__bar {
    fill: none;
    stroke: var(--km-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--km-dur-slow) var(--km-ease);
}
/* ==== /06.9 AVATARS ================================== */


/* ==== 06.10 PROGRESS & METERS ======================== */
.km-meter {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-2);
}

.km-meter__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--km-s-3);
    font-size: var(--km-fs-xs);
}

.km-meter__name {
    color: var(--km-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-meter__value {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
    flex: 0 0 auto;
}

.km-meter__track {
    position: relative;
    height: var(--km-track-h);
    background: var(--km-surface-2);
    border-radius: var(--km-r-pill);
    overflow: hidden;
}

.km-meter__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--km-fill, 0) * 100%);
    background: var(--km-grad-accent);
    border-radius: var(--km-r-pill);
    transition: width var(--km-dur-slow) var(--km-ease);
}

.km-meter--thin .km-meter__track {
    height: var(--km-s-1);
}

.km-meter--success .km-meter__bar {
    background: var(--km-success);
}

.km-meter--warning .km-meter__bar {
    background: var(--km-warning);
}

.km-meter--danger .km-meter__bar {
    background: var(--km-danger);
}

/* Katta SVG halqa (jami ball) */
.km-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 240px;
    margin-inline: auto;
    aspect-ratio: 1;
}

.km-ring__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.km-ring__track {
    fill: none;
    stroke: var(--km-surface-2);
    stroke-width: 10;
}

.km-ring__bar {
    fill: none;
    stroke: var(--km-accent);
    stroke-width: 10;
    stroke-linecap: round;
    filter: drop-shadow(0 0 var(--km-s-2) var(--km-accent));
    transition: stroke-dashoffset var(--km-dur-slow) var(--km-ease), stroke var(--km-dur-slow) var(--km-ease);
}

.km-ring__center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--km-s-1);
}

.km-ring__value {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--km-fs-6xl);
    font-weight: var(--km-fw-bold);
    line-height: 1;
    color: var(--km-text);
}

.km-ring__max {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-ring--danger .km-ring__bar {
    stroke: var(--km-danger);
}

.km-ring--warning .km-ring__bar {
    stroke: var(--km-warning);
}

.km-ring--info .km-ring__bar {
    stroke: var(--km-info);
}

.km-ring--success .km-ring__bar {
    stroke: var(--km-success);
}

/* Progress "3/5" koʻrinishidagi kichik hisoblagich */
.km-count {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
}

.km-count__done {
    font-weight: var(--km-fw-bold);
    color: var(--km-text);
}

@media (max-width: 991px) {
    .km-ring {
        max-width: 200px;
    }

    .km-ring__value {
        font-size: var(--km-fs-5xl);
    }
}
/* ==== /06.10 PROGRESS & METERS ======================= */


/* ==== 06.11 EMPTY & SKELETON ========================= */
.km-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-11) var(--km-s-6);
    text-align: center;
}

.km-empty__art {
    width: var(--km-s-12);
    height: var(--km-s-12);
    display: grid;
    place-items: center;
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-2xl);
    background: var(--km-surface-1);
    color: var(--km-text-4);
    font-size: var(--km-fs-4xl);
}

.km-empty__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-semibold);
    color: var(--km-text-2);
}

.km-empty__text {
    max-width: 460px;
    font-size: var(--km-fs-sm);
    color: var(--km-text-4);
}

.km-skeleton {
    background: linear-gradient(90deg, var(--km-surface-1) 25%, var(--km-surface-3) 50%, var(--km-surface-1) 75%);
    background-size: 400% 100%;
    border-radius: var(--km-r-sm);
    animation: km-shimmer 1.6s linear infinite;
}

.km-skeleton--line {
    height: var(--km-s-4);
    margin-bottom: var(--km-s-3);
}

.km-skeleton--title {
    height: var(--km-s-6);
    width: 40%;
    margin-bottom: var(--km-s-4);
}

.km-skeleton--row {
    height: var(--km-row-h);
    margin-bottom: var(--km-s-2);
    border-radius: var(--km-r-md);
}

.km-skeleton--card {
    height: var(--km-s-12);
    border-radius: var(--km-r-lg);
}
/* ==== /06.11 EMPTY & SKELETON ======================== */


/* ==== 06.12 TOOLTIPS ================================= */
.km-tip {
    position: relative;
    display: inline-flex;
}

.km-tip__bubble {
    position: absolute;
    bottom: calc(100% + var(--km-s-2));
    left: 50%;
    z-index: var(--km-z-tooltip);
    min-width: 180px;
    max-width: 320px;
    padding: var(--km-s-3) var(--km-s-4);
    background: var(--km-glass-strong);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-md);
    box-shadow: var(--km-shadow-lg);
    backdrop-filter: blur(20px);
    color: var(--km-text-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-regular);
    line-height: var(--km-lh-normal);
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, var(--km-s-2));
    transition: opacity var(--km-dur-fast) var(--km-ease),
                transform var(--km-dur-fast) var(--km-ease),
                visibility var(--km-dur-fast) var(--km-ease);
    pointer-events: none;
}

.km-tip:hover .km-tip__bubble,
.km-tip:focus-within .km-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.km-tip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--km-s-4);
    padding: 2px 0;
}

.km-tip__score {
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
}
/* ==== /06.12 TOOLTIPS ================================ */


/* ==== 06.13 PAGINATION =============================== */
.km-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-s-4);
    padding: var(--km-s-4) 0;
    flex-wrap: wrap;
}

.km-pager__info {
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-pager__list {
    display: flex;
    align-items: center;
    gap: var(--km-s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.km-pager__link {
    display: grid;
    place-items: center;
    min-width: var(--km-control-h-sm);
    height: var(--km-control-h-sm);
    padding: 0 var(--km-s-2);
    border: var(--km-border-w) solid transparent;
    border-radius: var(--km-r-sm);
    color: var(--km-text-3);
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-pager__link:hover {
    background: var(--km-surface-2);
    color: var(--km-text);
}

.km-pager__link--active,
.km-pager__link--active:hover {
    background: var(--km-accent-soft);
    border-color: var(--km-accent);
    color: var(--km-accent);
}

.km-pager__link--disabled {
    opacity: .4;
    pointer-events: none;
}
/* ==== /06.13 PAGINATION ============================== */


/* ==== 06.14 STEPPER / TIMELINE ======================= */
.km-stepper {
    display: flex;
    align-items: center;
    gap: var(--km-s-2);
    margin: 0;
    padding: var(--km-s-4) 0;
    list-style: none;
}

.km-stepper__item {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    flex: 0 0 auto;
}

.km-stepper__dot {
    display: grid;
    place-items: center;
    width: var(--km-s-7);
    height: var(--km-s-7);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-pill);
    background: var(--km-surface-1);
    color: var(--km-text-4);
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-bold);
}

.km-stepper__name {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-wide);
    text-transform: uppercase;
    color: var(--km-text-4);
    white-space: nowrap;
}

.km-stepper__line {
    flex: 1 1 auto;
    min-width: var(--km-s-6);
    height: 2px;
    background: var(--km-border-1);
    border-radius: var(--km-r-pill);
}

.km-stepper__item--done .km-stepper__dot {
    background: var(--km-success-bg);
    border-color: var(--km-success);
    color: var(--km-success);
}

.km-stepper__item--done .km-stepper__name {
    color: var(--km-text-3);
}

.km-stepper__item--current .km-stepper__dot {
    background: var(--km-grad-accent);
    border-color: transparent;
    color: var(--km-text-on-accent);
    box-shadow: var(--km-glow-accent);
}

.km-stepper__item--current .km-stepper__name {
    color: var(--km-text);
}

.km-stepper__line--done {
    background: var(--km-success);
}

@media (max-width: 991px) {
    .km-stepper {
        overflow-x: auto;
    }

    .km-stepper__name {
        display: none;
    }
}
/* ==== /06.14 STEPPER / TIMELINE ====================== */

/* ==== /06. COMPONENTS =============================== */


/* ==== 07. EFFECTS ==================================== */
/* Fon 4 qatlamdan iborat: radial gradient → muhandislik grid →
   aurora dogʻlari → noise. Barchasi tarkib ostida (z-index: fx). */
.km-fx {
    position: fixed;
    inset: 0;
    z-index: var(--km-z-fx);
    overflow: hidden;
    pointer-events: none;
}

.km-fx__base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 800px at 12% -10%, rgba(37, 99, 235, .22), transparent 60%),
        radial-gradient(1000px 700px at 92% 108%, rgba(139, 92, 246, .20), transparent 62%),
        radial-gradient(800px 600px at 78% 8%, rgba(34, 211, 238, .10), transparent 60%),
        linear-gradient(180deg, var(--km-bg-950) 0%, var(--km-bg-900) 45%, var(--km-bg-850) 100%);
}

.km-fx__grid {
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image:
        linear-gradient(var(--km-border-3) 1px, transparent 1px),
        linear-gradient(90deg, var(--km-border-3) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 30%, #000 20%, transparent 78%);
}

.km-fx__aurora {
    position: absolute;
    inset: -20%;
    filter: blur(120px);
    opacity: .55;
}

.km-fx__blob {
    position: absolute;
    width: 42vw;
    height: 42vw;
    border-radius: var(--km-r-pill);
    mix-blend-mode: screen;
}

.km-fx__blob--1 {
    top: -8%;
    left: -6%;
    background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 70%);
    animation: km-drift-1 26s var(--km-ease-in-out) infinite;
}

.km-fx__blob--2 {
    right: -10%;
    bottom: -12%;
    background: radial-gradient(circle, rgba(139, 92, 246, .50), transparent 70%);
    animation: km-drift-2 32s var(--km-ease-in-out) infinite;
}

.km-fx__blob--3 {
    top: 34%;
    right: 24%;
    width: 28vw;
    height: 28vw;
    background: radial-gradient(circle, rgba(34, 211, 238, .38), transparent 70%);
    animation: km-drift-3 24s var(--km-ease-in-out) infinite;
}

.km-fx__noise {
    position: absolute;
    inset: 0;
    opacity: .025;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

/* Three.js canvas idishi */
.km-canvas {
    position: absolute;
    inset: 0;
    z-index: var(--km-z-fx);
}

.km-canvas canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Shisha panel */
.km-glass {
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    backdrop-filter: blur(20px) saturate(140%);
}

.km-glow {
    box-shadow: var(--km-glow-accent);
}

/* Yupqa skanerlash chizigʻi — STAGE sarlavhalarida */
.km-scanline {
    position: relative;
    overflow: hidden;
}

.km-scanline::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(148, 178, 255, .045) 3px,
        rgba(148, 178, 255, .045) 4px
    );
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .km-fx__blob {
        animation: none;
    }

    .km-fx__aurora {
        opacity: .38;
    }
}

@media (max-width: 767px) {
    .km-fx__aurora {
        filter: blur(80px);
        opacity: .42;
    }

    .km-fx__grid {
        background-size: 32px 32px;
    }
}
/* ==== /07. EFFECTS ================================== */


/* ==== 08. PAGES ==================================== */

/* ==== 08.1 AUTH / LOGIN ============================ */
.km-login {
    position: relative;
    z-index: var(--km-z-base);
    display: grid;
    grid-template-columns: 58fr 42fr;
    min-height: 100vh;
}

/* ---- Chap: brend paneli ---- */
.km-login__brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--km-s-10) var(--km-s-11);
    border-right: var(--km-border-w) solid var(--km-border-1);
    overflow: hidden;
}

/* Sahna chapga qarab soʻnadi — matn ustidan oʻtmasin */
.km-login__scene {
    opacity: .9;
    mask-image: linear-gradient(100deg, transparent 8%, #000 46%);
    -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 46%);
}

.km-login__brand-inner {
    position: relative;
    z-index: var(--km-z-base);
    width: 100%;
    max-width: 620px;
}

.km-login__crest {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    margin-bottom: var(--km-s-9);
}

.km-login__crest-text {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-1);
}

.km-login__crest-sub {
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
}

.km-login__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-5xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
    letter-spacing: var(--km-ls-tight);
}

.km-login__subtitle {
    margin-top: var(--km-s-4);
    font-size: var(--km-fs-md);
    color: var(--km-text-3);
}

.km-login__stats {
    display: flex;
    align-items: stretch;
    gap: var(--km-s-7);
    margin: var(--km-s-8) 0 0;
    padding: var(--km-s-5) 0;
    border-top: var(--km-border-w) solid var(--km-border-1);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    list-style: none;
}

.km-login__stat {
    display: flex;
    align-items: baseline;
    gap: var(--km-s-2);
}

.km-login__stat-value {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-cyan);
    line-height: 1;
}

.km-login__stat-label {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-login__dirs {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-2);
    margin: var(--km-s-7) 0 0;
    padding: 0;
    list-style: none;
}

.km-login__dir {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
    padding: var(--km-s-3) var(--km-s-4);
    background: var(--km-glass);
    backdrop-filter: blur(12px);
    border: var(--km-border-w) solid var(--km-border-1);
    border-left: 3px solid var(--km-accent);
    border-radius: var(--km-r-xs) var(--km-r-md) var(--km-r-md) var(--km-r-xs);
}

.km-login__dir-icon {
    color: var(--km-accent);
    font-size: var(--km-fs-md);
}

.km-login__dir-name {
    flex: 1 1 auto;
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-medium);
    color: var(--km-text-2);
}

.km-login__dir-day {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-wide);
    color: var(--km-text-4);
}

.km-login__org {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--km-s-3);
    margin-top: var(--km-s-9);
    padding-top: var(--km-s-6);
    border-top: var(--km-border-w) solid var(--km-border-1);
    max-width: 460px;
}

.km-login__org-logo {
    width: 100%;
    max-width: 380px;
    height: auto;
    opacity: .82;
}

/* ---- Oʻng: forma paneli ---- */
.km-login__pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--km-s-9) var(--km-s-8);
}

.km-login__form {
    width: 100%;
    max-width: 420px;
    padding: var(--km-s-8);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-2xl);
    box-shadow: var(--km-shadow-xl);
    backdrop-filter: blur(24px) saturate(150%);
}

.km-login__form-title {
    margin-top: var(--km-s-3);
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
}

.km-login__form-hint {
    margin-top: var(--km-s-3);
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
}

.km-login__note {
    margin-top: var(--km-s-6);
    padding-top: var(--km-s-5);
    border-top: var(--km-border-w) solid var(--km-border-1);
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
    text-align: center;
}

@media (max-width: 1279px) {
    .km-login__brand {
        padding: var(--km-s-8);
    }

    .km-login__title {
        font-size: var(--km-fs-4xl);
    }
}

@media (max-width: 991px) {
    .km-login {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .km-login__brand {
        align-items: flex-start;
        padding: var(--km-s-7) var(--km-s-5);
        border-right: 0;
        border-bottom: var(--km-border-w) solid var(--km-border-1);
    }

    .km-login__brand .km-canvas {
        display: none;
    }

    .km-login__crest,
    .km-login__stats {
        margin-bottom: 0;
    }

    .km-login__dirs,
    .km-login__org {
        display: none;
    }

    .km-login__title {
        font-size: var(--km-fs-3xl);
    }

    .km-login__pane {
        padding: var(--km-s-7) var(--km-s-5) var(--km-s-9);
    }
}

@media (max-width: 599px) {
    .km-login__form {
        padding: var(--km-s-5);
    }

    .km-login__stats {
        flex-wrap: wrap;
        gap: var(--km-s-5);
    }
}
/* ==== /08.1 AUTH / LOGIN =========================== */

/* ==== 08.2 MODERATOR DASHBOARD ===================== */
.km-scard {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-5);
    padding: var(--km-s-5);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-top: 3px solid var(--km-accent);
    border-radius: var(--km-r-xs) var(--km-r-xs) var(--km-r-xl) var(--km-r-xl);
    box-shadow: var(--km-shadow-md);
    backdrop-filter: blur(16px);
    transition: transform var(--km-dur) var(--km-ease), box-shadow var(--km-dur) var(--km-ease);
}

.km-scard:hover {
    transform: translateY(-3px);
    box-shadow: var(--km-shadow-lg);
}

.km-scard__head {
    display: flex;
    align-items: flex-start;
    gap: var(--km-s-3);
}

.km-scard__icon {
    display: grid;
    place-items: center;
    width: var(--km-s-9);
    height: var(--km-s-9);
    flex: 0 0 auto;
    border-radius: var(--km-r-md);
    background: var(--km-accent-soft);
    color: var(--km-accent);
    font-size: var(--km-fs-lg);
}

.km-scard__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
}

.km-scard__sub {
    margin: 2px 0 0;
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-scard__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--km-s-3);
    margin: 0;
    padding: var(--km-s-4) 0;
    border-top: var(--km-border-w) solid var(--km-border-1);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
}

.km-scard__meta dt {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-scard__meta dd {
    margin: var(--km-s-1) 0 0;
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
}

.km-scard__foot {
    display: flex;
    gap: var(--km-s-2);
    flex-wrap: wrap;
}

@media (max-width: 599px) {
    .km-scard__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ==== /08.2 MODERATOR DASHBOARD ==================== */

/* ==== 08.3 MODERATOR SESSION ======================= */
.km-plist {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.km-prow {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-4) var(--km-s-6);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
    transition: background var(--km-dur-fast) var(--km-ease);
}

.km-prow:last-child {
    border-bottom: 0;
}

.km-prow:hover {
    background: var(--km-surface-1);
}

.km-prow__order {
    width: var(--km-s-9);
    flex: 0 0 auto;
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-text-4);
    text-align: center;
}

.km-prow__body {
    flex: 1 1 auto;
    min-width: 0;
}

.km-prow__name {
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
    color: var(--km-text);
}

.km-prow__project {
    margin-top: 2px;
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Joriy taqdimotchi qatori */
.km-prow--current,
.km-prow--current:hover {
    background: var(--km-accent-soft);
    box-shadow: inset 0 0 0 1px var(--km-accent-soft);
}

.km-prow--current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--km-accent);
    box-shadow: 0 0 var(--km-s-4) var(--km-accent);
    animation: km-breathe 2.4s var(--km-ease-in-out) infinite;
}

.km-prow--current .km-prow__order,
.km-prow--current .km-prow__name {
    color: var(--km-accent);
}

/* Ekspertlar progressi */
.km-experts {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.km-experts__item {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
}

.km-experts__name {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-experts__meta {
    margin-top: 2px;
}

@media (max-width: 767px) {
    .km-prow {
        flex-wrap: wrap;
        padding: var(--km-s-4);
    }
}
/* ==== /08.3 MODERATOR SESSION ====================== */

/* ==== 08.4 STAGE =================================== */
/* Katta ekran / proyektor. MINIMAL SHRIFT — 24px. */
.km-stage-body {
    overflow: hidden;
}

.km-stage {
    position: relative;
    z-index: var(--km-z-base);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding: var(--km-s-8) var(--km-s-10);
    overflow: hidden;
}

.km-stage .km-canvas {
    z-index: var(--km-z-fx);
}

/* ---- Yuqori panel ---- */
.km-stage__top {
    position: relative;
    z-index: var(--km-z-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--km-s-6);
    flex: 0 0 auto;
}

.km-stage__brand {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
}

.km-stage__brand-title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    letter-spacing: var(--km-ls-tight);
    line-height: var(--km-lh-tight);
}

.km-stage__brand-sub {
    font-size: var(--km-fs-2xl);
    color: var(--km-text-3);
}

.km-stage__badge {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-4) var(--km-s-6);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-2);
    border-left: var(--km-s-2) solid var(--km-accent);
    border-radius: var(--km-r-sm) var(--km-r-lg) var(--km-r-lg) var(--km-r-sm);
    backdrop-filter: blur(16px);
    font-size: var(--km-fs-2xl);
}

.km-stage__badge > i {
    color: var(--km-accent);
    font-size: var(--km-fs-3xl);
}

.km-stage__badge-main {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-tight);
}

.km-stage__badge-sub {
    margin-top: var(--km-s-1);
    font-size: var(--km-fs-2xl);
    color: var(--km-text-3);
}

/* ---- Panellar: holatga qarab bittasi koʻrinadi ---- */
.km-stage__panel {
    position: relative;
    z-index: var(--km-z-base);
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: var(--km-s-8);
}

.km-stage[data-state="draft"] .km-stage__panel--waiting,
.km-stage[data-state="ordered"] .km-stage__panel--ordered,
.km-stage[data-state="running"] .km-stage__panel--running,
.km-stage[data-state="finished"] .km-stage__panel--finished {
    display: flex;
    flex-direction: column;
}

.km-stage[data-state="running"] .km-stage__panel--running {
    flex-direction: row;
    gap: var(--km-s-10);
}

.km-stage__heading {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    letter-spacing: var(--km-ls-tight);
    text-align: center;
}

/* ---- A/B: roʻyxatlar ---- */
.km-stage__list {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--km-s-3) var(--km-s-8);
    width: 100%;
    max-width: 1180px;
    margin: var(--km-s-7) auto 0;
    padding: 0;
    list-style: none;
    align-content: start;
    overflow: hidden;
}

/* 6 tadan koʻp ishtirokchi boʻlsa — ikki ustun (ustun boʻyicha toʻldiriladi).
   grid-template-rows JS tomonidan hisoblanadi (ceil(count / 2)). */
.km-stage__list--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    max-width: 100%;
}

.km-stage__item {
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
    padding: var(--km-s-3) var(--km-s-5);
    background: var(--km-surface-1);
    border: var(--km-border-w) solid var(--km-border-1);
    border-radius: var(--km-r-md);
    font-size: var(--km-fs-2xl);
}

.km-stage__item-order {
    min-width: 68px;
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
}

.km-stage__item-name {
    flex: 1 1 auto;
    font-weight: var(--km-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-stage__list--plain .km-stage__item-order {
    color: var(--km-text-4);
}

/* Shuffle: qulflanish momenti */
.km-stage__item--locking {
    border-color: var(--km-accent);
    background: var(--km-accent-soft);
    box-shadow: var(--km-glow-accent);
    animation: km-lock-in var(--km-dur-slow) var(--km-ease);
}

.km-stage__item--spinning .km-stage__item-name {
    filter: blur(6px);
    opacity: .75;
}

.km-stage__pulse {
    flex: 0 0 auto;
    margin: var(--km-s-7) 0 0;
    font-family: var(--km-font-display);
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-semibold);
    text-align: center;
    color: var(--km-accent);
    animation: km-breathe 2.6s var(--km-ease-in-out) infinite;
}

/* ---- C: taqdimot ---- */
.km-stage__now {
    flex: 1 1 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.km-stage__now-order {
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
}

.km-stage__now-name {
    margin-top: var(--km-s-3);
    font-family: var(--km-font-display);
    font-size: var(--km-fs-7xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
    letter-spacing: var(--km-ls-tight);
}

.km-stage__now-project {
    margin-top: var(--km-s-5);
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-medium);
    line-height: var(--km-lh-snug);
    color: var(--km-accent);
}

.km-stage__now-org {
    margin-top: var(--km-s-3);
    font-size: var(--km-fs-2xl);
    color: var(--km-text-3);
}

.km-stage__timer {
    margin-top: var(--km-s-8);
    font-size: var(--km-fs-7xl);
    font-weight: var(--km-fw-bold);
    line-height: 1;
    color: var(--km-success);
    transition: color var(--km-dur-slow) var(--km-ease);
}

.km-stage__timer[data-tone="warning"] {
    color: var(--km-warning);
}

.km-stage__timer[data-tone="danger"] {
    color: var(--km-danger);
    animation: km-breathe 1.2s var(--km-ease-in-out) infinite;
}

.km-stage__limit {
    margin-top: var(--km-s-3);
    font-size: var(--km-fs-2xl);
    color: var(--km-text-4);
}

.km-stage__queue {
    flex: 1 1 38%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-left: var(--km-s-8);
    border-left: var(--km-border-w) solid var(--km-border-1);
}

.km-stage__queue-title {
    font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-stage__queue-list {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-4);
    margin: var(--km-s-6) 0 0;
    padding: 0;
    list-style: none;
}

.km-stage__queue-item {
    display: flex;
    align-items: baseline;
    gap: var(--km-s-4);
    font-size: var(--km-fs-3xl);
}

.km-stage__queue-order {
    min-width: 64px;
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
}

.km-stage__queue-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- D: yakunlandi ---- */
.km-stage__done {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--km-s-6);
    text-align: center;
}

.km-stage__done > i {
    font-size: var(--km-fs-7xl);
    color: var(--km-accent);
}

.km-stage__done-sub {
    margin: 0;
    font-size: var(--km-fs-3xl);
    color: var(--km-text-3);
}

.km-stage__done-logo {
    width: 520px;
    max-width: 60vw;
    height: auto;
    opacity: .85;
}

/* ---- Boshqaruv qatlami ---- */
.km-stage__ui {
    position: absolute;
    right: var(--km-s-8);
    bottom: var(--km-s-7);
    z-index: var(--km-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
    font-size: var(--km-fs-2xl);
    opacity: 1;
    transition: opacity var(--km-dur-slow) var(--km-ease);
}

.km-stage[data-idle="true"] .km-stage__ui {
    opacity: 0;
    pointer-events: none;
}

/* Tartiblash va tozalash — ustma-ust, tozalash pastda va soʻnikroq */
.km-stage__order-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--km-s-2);
}

.km-stage__order-group .km-btn--danger {
    justify-content: center;
    opacity: .7;
}

.km-stage__order-group .km-btn--danger:hover {
    opacity: 1;
}

.km-stage__clock {
    color: var(--km-text-4);
}

@media (max-width: 1439px) {
    .km-stage {
        padding: var(--km-s-6) var(--km-s-7);
    }

    .km-stage__brand-title {
        font-size: var(--km-fs-3xl);
    }

    .km-stage__now-name {
        font-size: var(--km-fs-5xl);
    }

    .km-stage__now-project,
    .km-stage__timer {
        font-size: var(--km-fs-4xl);
    }

    .km-stage__list--two {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-template-rows: none;
    }
}

@media (max-width: 991px) {
    .km-stage {
        height: auto;
        min-height: 100vh;
        padding: var(--km-s-5);
        overflow: auto;
    }

    .km-stage-body {
        overflow: auto;
    }

    .km-stage__top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--km-s-4);
    }

    .km-stage[data-state="running"] .km-stage__panel--running {
        flex-direction: column;
        gap: var(--km-s-7);
    }

    .km-stage__queue {
        padding-left: 0;
        padding-top: var(--km-s-6);
        border-left: 0;
        border-top: var(--km-border-w) solid var(--km-border-1);
    }

    .km-stage__brand-title {
        font-size: var(--km-fs-2xl);
    }

    .km-stage__brand-sub,
    .km-stage__badge,
    .km-stage__badge-sub,
    .km-stage__limit,
    .km-stage__now-org,
    .km-stage__ui {
        font-size: var(--km-fs-lg);
    }

    .km-stage__badge-main,
    .km-stage__heading {
        font-size: var(--km-fs-2xl);
    }

    .km-stage__now-name {
        font-size: var(--km-fs-3xl);
    }

    .km-stage__now-project,
    .km-stage__timer,
    .km-stage__queue-item {
        font-size: var(--km-fs-2xl);
    }

    .km-stage__item {
        font-size: var(--km-fs-lg);
    }

    .km-stage__item-order {
        min-width: 48px;
        font-size: var(--km-fs-xl);
    }
}
/* ==== /08.4 STAGE ================================== */

/* ==== 08.5 EXPERT DASHBOARD ======================== */
.km-ebanner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
    padding: var(--km-s-6);
    margin-bottom: var(--km-s-6);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-left: var(--km-s-1) solid var(--km-accent);
    border-radius: var(--km-r-sm) var(--km-r-2xl) var(--km-r-2xl) var(--km-r-sm);
    box-shadow: var(--km-shadow-md);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.km-ebanner::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 46%;
    background: var(--km-grad-accent);
    opacity: .07;
    pointer-events: none;
}

.km-ebanner__body {
    flex: 1 1 auto;
    min-width: 0;
}

.km-ebanner__name {
    margin-top: var(--km-s-2);
    font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-snug);
}

.km-ebanner__meta {
    margin: var(--km-s-1) 0 0;
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
}

.km-ebanner__dir {
    position: relative;
    z-index: var(--km-z-base);
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-4) var(--km-s-5);
    background: var(--km-accent-soft);
    border-radius: var(--km-r-lg);
    flex: 0 0 auto;
}

.km-ebanner__dir > i {
    font-size: var(--km-fs-2xl);
    color: var(--km-accent);
}

.km-ebanner__dir-label {
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-3);
}

.km-ebanner__dir-name {
    margin-top: 2px;
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    color: var(--km-accent);
}

/* Ekspert roʻyxatidagi shaxsiy ball */
.km-prow__myscore {
    width: 64px;
    flex: 0 0 auto;
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-bold);
    text-align: right;
    color: var(--km-text-2);
}

@media (max-width: 991px) {
    .km-ebanner {
        flex-direction: column;
        align-items: flex-start;
    }

    .km-ebanner__dir {
        width: 100%;
    }
}
/* ==== /08.5 EXPERT DASHBOARD ======================= */

/* ==== 08.6 EXPERT SCORING SHEET ==================== */
.km-banner {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-4) var(--km-s-5);
    border: var(--km-border-w) solid var(--km-success);
    border-radius: var(--km-r-lg);
    background: var(--km-success-bg);
    font-size: var(--km-fs-sm);
    color: var(--km-text-2);
}

.km-banner > i {
    font-size: var(--km-fs-xl);
    color: var(--km-success);
}

.km-banner strong {
    display: block;
    color: var(--km-text);
}

.km-banner--warning {
    border-color: var(--km-warning);
    background: var(--km-warning-bg);
}

.km-banner--warning > i {
    color: var(--km-warning);
}

/* ---- Sarlavha bloki ---- */
.km-sheet__head {
    display: flex;
    align-items: flex-start;
    gap: var(--km-s-5);
    padding-bottom: var(--km-s-5);
    margin-bottom: var(--km-s-5);
    border-bottom: var(--km-border-w) solid var(--km-border-1);
}

.km-sheet__order {
    font-size: var(--km-fs-5xl);
    font-weight: var(--km-fw-bold);
    line-height: 1;
    color: var(--km-accent);
    flex: 0 0 auto;
}

.km-sheet__name {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    line-height: var(--km-lh-tight);
}

.km-sheet__project {
    margin: var(--km-s-2) 0 0;
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-medium);
    color: var(--km-accent);
}

.km-sheet__meta {
    margin: var(--km-s-2) 0 0;
    font-size: var(--km-fs-sm);
    color: var(--km-text-4);
}

.km-sheet__chips {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--km-s-2);
    flex: 0 0 auto;
}

.km-sheet__annotation {
    margin-bottom: var(--km-s-6);
    padding: var(--km-s-4) var(--km-s-5);
    background: var(--km-surface-1);
    border-radius: var(--km-r-md);
    font-size: var(--km-fs-sm);
    line-height: var(--km-lh-loose);
    color: var(--km-text-3);
}

/* ---- Mezon kartasi ---- */
.km-crit {
    padding: var(--km-s-5) var(--km-s-6);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-left: 3px solid var(--km-border-2);
    border-radius: var(--km-r-xs) var(--km-r-lg) var(--km-r-lg) var(--km-r-xs);
    transition: border-color var(--km-dur) var(--km-ease);
}

.km-crit--filled {
    border-left-color: var(--km-accent);
}

.km-crit__head {
    display: flex;
    align-items: baseline;
    gap: var(--km-s-3);
}

.km-crit__number {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-bold);
    color: var(--km-text-4);
}

.km-crit__name {
    flex: 1 1 auto;
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
}

.km-crit__score {
    flex: 0 0 auto;
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-text);
}

.km-crit__max {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-medium);
    color: var(--km-text-4);
}

.km-crit__desc {
    margin: var(--km-s-2) 0 var(--km-s-5);
    font-size: var(--km-fs-sm);
    line-height: var(--km-lh-normal);
    color: var(--km-text-3);
}

.km-crit__controls {
    display: flex;
    align-items: center;
    gap: var(--km-s-5);
}

.km-crit__input {
    width: 92px;
    min-height: var(--km-control-h);
    flex: 0 0 auto;
    text-align: center;
}

.km-crit__quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--km-s-2);
    margin-top: var(--km-s-4);
}

.km-chipbtn {
    min-height: var(--km-control-h-sm);
    padding: 0 var(--km-s-4);
    background: var(--km-surface-1);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-pill);
    color: var(--km-text-3);
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    transition: background var(--km-dur-fast) var(--km-ease), color var(--km-dur-fast) var(--km-ease);
}

.km-chipbtn:hover {
    background: var(--km-accent-soft);
    border-color: var(--km-accent);
    color: var(--km-accent);
}

.km-chipbtn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- Slider ---- */
.km-range {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--km-touch-min);
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.km-range::-webkit-slider-runnable-track {
    height: var(--km-track-h);
    border-radius: var(--km-r-pill);
    background:
        linear-gradient(90deg, var(--km-accent) 0%, var(--km-accent-2) calc(var(--km-fill, 0) * 100%),
        rgba(255, 255, 255, .07) calc(var(--km-fill, 0) * 100%), rgba(255, 255, 255, .07) 100%);
}

.km-range::-moz-range-track {
    height: var(--km-track-h);
    border-radius: var(--km-r-pill);
    background:
        linear-gradient(90deg, var(--km-accent) 0%, var(--km-accent-2) calc(var(--km-fill, 0) * 100%),
        rgba(255, 255, 255, .07) calc(var(--km-fill, 0) * 100%), rgba(255, 255, 255, .07) 100%);
}

.km-range::-webkit-slider-thumb {
    appearance: none;
    width: var(--km-thumb);
    height: var(--km-thumb);
    margin-top: calc((var(--km-track-h) - var(--km-thumb)) / 2);
    border: 2px solid var(--km-bg-900);
    border-radius: var(--km-r-pill);
    background: var(--km-text);
    box-shadow: var(--km-shadow-sm);
    transition: box-shadow var(--km-dur-fast) var(--km-ease), transform var(--km-dur-fast) var(--km-ease);
}

.km-range::-moz-range-thumb {
    width: var(--km-thumb);
    height: var(--km-thumb);
    border: 2px solid var(--km-bg-900);
    border-radius: var(--km-r-pill);
    background: var(--km-text);
}

.km-range:hover::-webkit-slider-thumb,
.km-range:active::-webkit-slider-thumb {
    box-shadow: var(--km-glow-accent);
    transform: scale(1.12);
}

.km-range[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

/* ---- Yakun paneli ---- */
.km-summary__bars {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-3);
    margin: var(--km-s-6) 0 0;
    padding: 0;
    list-style: none;
}

.km-summary__hint {
    margin: var(--km-s-3) 0 0;
    font-size: var(--km-fs-xs);
    text-align: center;
    color: var(--km-text-4);
}

.km-savestate {
    display: inline-flex;
    align-items: center;
    gap: var(--km-s-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-semibold);
    color: var(--km-success);
}

.km-savestate[data-state="saving"] {
    color: var(--km-text-3);
}

/* ---- Mobil pastki panel ---- */
.km-mobilebar {
    display: none;
    position: sticky;
    bottom: 0;
    z-index: var(--km-z-sticky);
    align-items: center;
    justify-content: space-between;
    gap: var(--km-s-4);
    margin: var(--km-s-6) calc(var(--km-s-4) * -1) 0;
    padding: var(--km-s-4);
    background: var(--km-glass-strong);
    border-top: var(--km-border-w) solid var(--km-border-2);
    backdrop-filter: blur(20px);
}

.km-mobilebar__label {
    display: block;
    font-size: var(--km-fs-xs);
    letter-spacing: var(--km-ls-label);
    text-transform: uppercase;
    color: var(--km-text-4);
}

.km-mobilebar__value {
    font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
}

@media (max-width: 1279px) {
    .km-mobilebar {
        display: flex;
    }

    .km-summary .km-btn--xl {
        display: none;
    }
}

@media (max-width: 767px) {
    .km-sheet__head {
        flex-wrap: wrap;
    }

    .km-sheet__chips {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .km-sheet__order {
        font-size: var(--km-fs-3xl);
    }

    .km-sheet__name {
        font-size: var(--km-fs-2xl);
    }

    .km-sheet__project {
        font-size: var(--km-fs-lg);
    }

    .km-crit {
        padding: var(--km-s-4);
    }

    .km-crit__controls {
        gap: var(--km-s-3);
    }

    .km-crit__input {
        width: 78px;
    }
}
/* ==== /08.6 EXPERT SCORING SHEET =================== */

/* ==== 08.7 ADMIN LIVE MONITOR ====================== */
.km-live {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-5);
    padding: var(--km-s-5);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-top: 3px solid var(--km-accent);
    border-radius: var(--km-r-xs) var(--km-r-xs) var(--km-r-xl) var(--km-r-xl);
    box-shadow: var(--km-shadow-md);
    backdrop-filter: blur(16px);
}

.km-live__head {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
}

.km-live__icon {
    display: grid;
    place-items: center;
    width: var(--km-s-9);
    height: var(--km-s-9);
    flex: 0 0 auto;
    border-radius: var(--km-r-md);
    background: var(--km-accent-soft);
    color: var(--km-accent);
    font-size: var(--km-fs-lg);
}

.km-live__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
}

.km-live__sub {
    margin: 2px 0 0;
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-live__now {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-4);
    background: var(--km-surface-1);
    border-radius: var(--km-r-md);
    min-height: 84px;
}

.km-live__order {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
    flex: 0 0 auto;
}

.km-live__name {
    font-size: var(--km-fs-md);
    font-weight: var(--km-fw-semibold);
    line-height: var(--km-lh-snug);
}

.km-live__project {
    margin-top: 2px;
    font-size: var(--km-fs-xs);
    color: var(--km-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-live__timer {
    font-size: var(--km-fs-4xl);
    font-weight: var(--km-fw-bold);
    line-height: 1;
    text-align: center;
    color: var(--km-success);
    transition: color var(--km-dur-slow) var(--km-ease);
}

.km-live__timer[data-tone="warning"] {
    color: var(--km-warning);
}

.km-live__timer[data-tone="danger"] {
    color: var(--km-danger);
}

.km-live__scored {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--km-s-3);
    padding-top: var(--km-s-4);
    border-top: var(--km-border-w) solid var(--km-border-1);
}

.km-live__foot {
    display: flex;
    gap: var(--km-s-2);
    flex-wrap: wrap;
}
/* ==== /08.7 ADMIN LIVE MONITOR ===================== */

/* ==== 08.8 ADMIN RESULTS MATRIX ==================== */
.km-matrix__order {
    width: var(--km-s-8);
    flex: 0 0 auto;
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-bold);
    color: var(--km-text-4);
}

.km-matrix__expert {
    text-align: center;
    min-width: 96px;
}

.km-matrix__expert-name {
    display: block;
    margin-top: var(--km-s-2);
    font-size: var(--km-fs-xs);
    font-weight: var(--km-fw-medium);
    letter-spacing: var(--km-ls-normal);
    text-transform: none;
    color: var(--km-text-3);
}

.km-matrix__cell {
    text-align: center;
    font-family: var(--km-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--km-text-4);
    transition: background var(--km-dur) var(--km-ease);
}

/* Heatmap — juda past toʻyinganlik, oʻqilishga xalaqit bermaydi */
.km-matrix__cell[data-heat="0"] {
    background: rgba(251, 113, 133, .10);
    color: var(--km-text-2);
}

.km-matrix__cell[data-heat="1"] {
    background: rgba(251, 191, 36, .09);
    color: var(--km-text-2);
}

.km-matrix__cell[data-heat="2"] {
    background: rgba(56, 189, 248, .08);
    color: var(--km-text);
}

.km-matrix__cell[data-heat="3"] {
    background: rgba(52, 211, 153, .10);
    color: var(--km-text);
}

.km-matrix__cell[data-heat="4"] {
    background: rgba(52, 211, 153, .18);
    color: var(--km-text);
    font-weight: var(--km-fw-semibold);
}

.km-matrix__sum {
    text-align: right;
    font-weight: var(--km-fw-semibold);
    color: var(--km-text);
    border-left: var(--km-border-w) solid var(--km-border-2);
}

.km-matrix__avg {
    text-align: right;
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
}

.km-matrix .km-tip {
    justify-content: center;
    width: 100%;
}

@media (max-width: 991px) {
    .km-matrix__expert {
        min-width: 72px;
    }

    .km-matrix__avg {
        font-size: var(--km-fs-base);
    }
}
/* ==== /08.8 ADMIN RESULTS MATRIX =================== */

/* ==== 08.9 ADMIN CRUD ============================== */
/* Jadval katakchasidagi ikkinchi darajali matn */
.km-cell-sub {
    margin-top: 2px;
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-cell-sub--wrap {
    max-width: 620px;
    white-space: normal;
    line-height: var(--km-lh-normal);
}

.km-accent-strong {
    font-weight: var(--km-fw-semibold);
    color: var(--km-accent);
}

/* Yoʻnalish ikonkasi (mezonlar sahifasi) */
.km-dirtile {
    display: grid;
    place-items: center;
    width: var(--km-s-10);
    height: var(--km-s-10);
    flex: 0 0 auto;
    border: var(--km-border-w) solid var(--km-accent-soft);
    border-radius: var(--km-r-lg);
    background: var(--km-accent-soft);
    color: var(--km-accent);
    font-size: var(--km-fs-xl);
}

/* Jurnal payload ustuni */
.km-log-payload {
    max-width: 340px;
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rol «ekspert» boʻlmaganda yoʻnalish maydoni yashiriladi (JS data-hidden qoʻyadi) */
[data-km-direction-field][data-hidden="true"] {
    display: none;
}

@media (max-width: 991px) {
    .km-cell-sub {
        max-width: 220px;
    }

    .km-log-payload {
        max-width: 180px;
    }
}
/* ==== /08.9 ADMIN CRUD ============================= */

/* ==== 08.10 REPORTS ================================ */
.km-rcard {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-5);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-1);
    border-left: 3px solid var(--km-accent);
    border-radius: var(--km-r-xs) var(--km-r-lg) var(--km-r-lg) var(--km-r-xs);
    color: var(--km-text);
    transition: transform var(--km-dur) var(--km-ease), border-color var(--km-dur) var(--km-ease);
}

.km-rcard:hover {
    transform: translateX(3px);
    border-color: var(--km-accent);
    color: var(--km-text);
}

.km-rcard__icon {
    display: grid;
    place-items: center;
    width: var(--km-s-9);
    height: var(--km-s-9);
    flex: 0 0 auto;
    border-radius: var(--km-r-md);
    background: var(--km-accent-soft);
    color: var(--km-accent);
    font-size: var(--km-fs-lg);
}

.km-rcard__title {
    font-family: var(--km-font-display);
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-semibold);
}

.km-rcard__sub {
    margin: 2px 0 0;
    font-size: var(--km-fs-sm);
    color: var(--km-text-3);
}

.km-rcard__meta {
    margin: var(--km-s-1) 0 0;
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
}

.km-winners {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.km-winners__item {
    display: flex;
    align-items: center;
    gap: var(--km-s-4);
    padding: var(--km-s-3) var(--km-s-4);
    background: var(--km-surface-1);
    border-radius: var(--km-r-md);
}

.km-winners__name {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
}

.km-winners__project {
    margin-top: 2px;
    font-size: var(--km-fs-xs);
    color: var(--km-text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.km-winners__score {
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-accent);
    flex: 0 0 auto;
}
/* ==== /08.10 REPORTS =============================== */

/* ==== 08.11 ERROR PAGES ============================ */
.km-error {
    position: relative;
    z-index: var(--km-z-base);
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--km-s-8) var(--km-s-5);
}

.km-error__panel {
    width: 100%;
    max-width: 640px;
    padding: var(--km-s-10) var(--km-s-9);
    background: var(--km-glass);
    border: var(--km-border-w) solid var(--km-border-2);
    border-radius: var(--km-r-2xl);
    box-shadow: var(--km-shadow-xl);
    backdrop-filter: blur(24px) saturate(150%);
    text-align: center;
}

.km-error__code {
    display: block;
    font-family: var(--km-font-mono);
    font-size: var(--km-fs-7xl);
    font-weight: var(--km-fw-bold);
    line-height: 1;
    letter-spacing: var(--km-ls-tight);
}

.km-error__title {
    margin-top: var(--km-s-5);
    font-size: var(--km-fs-2xl);
    font-weight: var(--km-fw-bold);
}

.km-error__text {
    margin: var(--km-s-4) auto 0;
    max-width: 460px;
    font-size: var(--km-fs-sm);
    line-height: var(--km-lh-loose);
    color: var(--km-text-3);
}

.km-error__actions {
    display: flex;
    justify-content: center;
    gap: var(--km-s-3);
    flex-wrap: wrap;
    margin-top: var(--km-s-8);
}

.km-error__foot {
    margin-top: var(--km-s-9);
    padding-top: var(--km-s-6);
    border-top: var(--km-border-w) solid var(--km-border-1);
}

.km-error__foot img {
    margin-inline: auto;
    opacity: .7;
}

@media (max-width: 599px) {
    .km-error__panel {
        padding: var(--km-s-7) var(--km-s-5);
    }

    .km-error__code {
        font-size: var(--km-fs-5xl);
    }

    .km-error__title {
        font-size: var(--km-fs-xl);
    }
}
/* ==== /08.11 ERROR PAGES =========================== */

/* ==== /08. PAGES =================================== */


/* ==== 09. ANIMATIONS =============================== */
@keyframes km-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes km-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@keyframes km-pulse-dot {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 currentColor;
    }

    50% {
        opacity: .65;
        box-shadow: 0 0 0 5px transparent;
    }
}

@keyframes km-toast-in {
    from {
        opacity: 0;
        transform: translateX(var(--km-s-6)) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes km-toast-out {
    to {
        opacity: 0;
        transform: translateX(var(--km-s-6)) scale(.96);
    }
}

@keyframes km-fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--km-s-4));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes km-shake {
    10%, 90% {
        transform: translateX(-1px);
    }

    20%, 80% {
        transform: translateX(2px);
    }

    30%, 50%, 70% {
        transform: translateX(-4px);
    }

    40%, 60% {
        transform: translateX(4px);
    }
}

@keyframes km-cell-pulse {
    0% {
        background-color: var(--km-accent-soft);
        box-shadow: inset 0 0 0 1px var(--km-accent);
    }

    100% {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px transparent;
    }
}

@keyframes km-drift-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(14%, 10%) scale(1.14);
    }
}

@keyframes km-drift-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1.08);
    }

    50% {
        transform: translate(-12%, -14%) scale(.92);
    }
}

@keyframes km-drift-3 {
    0%, 100% {
        transform: translate(0, 0) scale(.94);
    }

    50% {
        transform: translate(-18%, 12%) scale(1.2);
    }
}

@keyframes km-lock-in {
    0% {
        transform: scale(1.06);
        filter: brightness(1.8);
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes km-breathe {
    0%, 100% {
        opacity: .55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

.km-anim-fade-up {
    animation: km-fade-up var(--km-dur-slow) var(--km-ease) both;
}

.km-anim-shake {
    animation: km-shake var(--km-dur-slow) var(--km-ease-in-out);
}

.km-anim-pulse-cell {
    animation: km-cell-pulse 1s var(--km-ease) 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms;
        animation-iteration-count: 1;
        transition-duration: 1ms;
        scroll-behavior: auto;
    }
}
/* ==== /09. ANIMATIONS ============================== */


/* ==== 10. UTILITIES ================================ */
.km-row {
    display: flex;
    align-items: center;
    gap: var(--km-s-3);
}

.km-row--between {
    justify-content: space-between;
}

.km-row--end {
    justify-content: flex-end;
}

.km-row--wrap {
    flex-wrap: wrap;
}

.km-row--top {
    align-items: flex-start;
}

.km-col {
    display: flex;
    flex-direction: column;
    gap: var(--km-s-3);
}

.km-col--tight {
    gap: var(--km-s-1);
}

.km-col--loose {
    gap: var(--km-s-6);
}

.km-fill {
    flex: 1 1 auto;
    min-width: 0;
}

.km-mt-4 {
    margin-top: var(--km-s-4);
}

.km-mt-6 {
    margin-top: var(--km-s-6);
}

.km-mb-4 {
    margin-bottom: var(--km-s-4);
}

.km-mb-6 {
    margin-bottom: var(--km-s-6);
}

.km-text-center {
    text-align: center;
}

.km-text-right {
    text-align: right;
}

.km-nowrap {
    white-space: nowrap;
}

.km-scroll-y {
    overflow-y: auto;
}

.km-hide-desktop {
    display: none;
}

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

    .km-hide-desktop {
        display: revert;
    }
}
/* ==== /10. UTILITIES =============================== */


/* ==== 11. PRINT ==================================== */
@media print {
    :root {
        --km-text: #101828;
        --km-text-2: #344054;
        --km-text-3: #475467;
        --km-text-4: #667085;
        --km-border-1: #D0D5DD;
        --km-border-2: #D0D5DD;
        --km-border-3: #98A2B3;
        --km-surface-1: transparent;
        --km-surface-2: transparent;
        --km-surface-3: transparent;
        --km-glass: transparent;
        --km-glass-strong: transparent;
        --km-shadow-sm: none;
        --km-shadow-md: none;
        --km-shadow-lg: none;
        --km-shadow-xl: none;
    }

    body {
        background: #FFFFFF;
        color: #101828;
        font-size: 12pt;
    }

    .km-fx,
    .km-canvas,
    .km-sidebar,
    .km-topbar,
    .km-toasts,
    .km-drawer,
    .km-drawer-backdrop,
    .km-page-head__actions,
    .km-filters,
    .km-pager,
    .km-btn {
        display: none;
    }

    .km-shell {
        display: block;
    }

    .km-content {
        padding: 0;
    }

    .km-card,
    .km-tablewrap {
        background: transparent;
        border: 1px solid #D0D5DD;
        box-shadow: none;
        backdrop-filter: none;
        break-inside: avoid;
    }

    .km-table th {
        background: #F2F4F7;
        color: #344054;
    }

    .km-table td {
        color: #101828;
    }

    .km-print-head {
        display: block;
        margin-bottom: 16pt;
        text-align: center;
    }

    .km-print-sign {
        display: flex;
        justify-content: space-between;
        gap: 24pt;
        margin-top: 32pt;
        break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }
}

.km-print-head,
.km-print-sign {
    display: none;
}
/* ==== /11. PRINT =================================== */