/* ============================================================
   Windows 11 Fluent Design overlay for Tabler/Bootstrap 5
   - Light + Dark mode (uses [data-bs-theme])
   - Mica/Acrylic blur, Win11 corner radii, Fluent accent
   ============================================================ */

:root {
    /* Win11 Fluent tokens — light */
    --w11-radius-xl: 12px;
    --w11-radius-lg: 8px;
    --w11-radius-md: 6px;
    --w11-radius-sm: 4px;

    --w11-accent:        #0067C0;
    --w11-accent-hover:  #0078D4;
    --w11-accent-light:  #E5F3FF;

    --w11-bg-base:       #F3F3F3;
    --w11-bg-card:       rgba(255, 255, 255, 0.70);
    --w11-bg-card-solid: #FBFBFB;
    --w11-bg-elev1:      rgba(255, 255, 255, 0.55);
    --w11-bg-elev2:      rgba(255, 255, 255, 0.85);
    --w11-bg-mica:       rgba(243, 243, 243, 0.80);

    --w11-stroke:        rgba(0, 0, 0, 0.0578);
    --w11-stroke-strong: rgba(0, 0, 0, 0.10);
    --w11-divider:       rgba(0, 0, 0, 0.06);

    --w11-text-primary:   rgb(0, 0, 0, 0.89);
    --w11-text-secondary: rgb(0, 0, 0, 0.61);
    --w11-text-tertiary:  rgb(0, 0, 0, 0.45);
    --w11-text-disabled:  rgb(0, 0, 0, 0.36);

    --w11-fill-hover:     rgba(0, 0, 0, 0.04);
    --w11-fill-pressed:   rgba(0, 0, 0, 0.07);
    --w11-fill-selected:  rgba(0, 103, 192, 0.10);

    --w11-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-lg:  0 8px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-flyout: 0 16px 28px rgba(0, 0, 0, 0.20), 0 0 0 1px var(--w11-stroke);

    --w11-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --w11-duration:    180ms;
    --w11-duration-lg: 280ms;
}

/* Win11 Fluent tokens — dark */
[data-bs-theme="dark"] {
    --w11-accent:        #4CC2FF;
    --w11-accent-hover:  #60CDFF;
    --w11-accent-light:  rgba(76, 194, 255, 0.10);

    --w11-bg-base:       #202020;
    --w11-bg-card:       rgba(43, 43, 43, 0.70);
    --w11-bg-card-solid: #2B2B2B;
    --w11-bg-elev1:      rgba(255, 255, 255, 0.0326);
    --w11-bg-elev2:      rgba(255, 255, 255, 0.0837);
    --w11-bg-mica:       rgba(32, 32, 32, 0.80);

    --w11-stroke:        rgba(255, 255, 255, 0.0837);
    --w11-stroke-strong: rgba(255, 255, 255, 0.14);
    --w11-divider:       rgba(255, 255, 255, 0.0837);

    --w11-text-primary:   rgba(255, 255, 255, 1);
    --w11-text-secondary: rgba(255, 255, 255, 0.79);
    --w11-text-tertiary:  rgba(255, 255, 255, 0.55);
    --w11-text-disabled:  rgba(255, 255, 255, 0.36);

    --w11-fill-hover:     rgba(255, 255, 255, 0.06);
    --w11-fill-pressed:   rgba(255, 255, 255, 0.04);
    --w11-fill-selected:  rgba(76, 194, 255, 0.10);

    --w11-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.20), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-md:  0 2px 6px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-lg:  0 8px 16px rgba(0, 0, 0, 0.40), 0 0 0 1px var(--w11-stroke);
    --w11-shadow-flyout: 0 16px 28px rgba(0, 0, 0, 0.50), 0 0 0 1px var(--w11-stroke);
}

/* ============================================================
   Typography — Segoe UI Variable
   ============================================================ */
html, body {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
                 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    background: var(--w11-bg-base);
    color: var(--w11-text-primary);
}

/* Headings — slightly tighter Win11 leading */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .card-title {
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--w11-text-primary);
}

/* ============================================================
   Cards — Mica with subtle stroke
   ============================================================ */
.card {
    border-radius: var(--w11-radius-lg);
    border: 1px solid var(--w11-stroke);
    background: var(--w11-bg-card-solid);
    box-shadow: var(--w11-shadow-sm);
    transition: box-shadow var(--w11-duration) var(--w11-ease),
                transform var(--w11-duration) var(--w11-ease);
}

.card:hover {
    box-shadow: var(--w11-shadow-md);
}

/* Acrylic/Mica-on-cards (when explicitly opted in) */
.card.card-mica,
.card.bg-blur {
    background: var(--w11-bg-card);
    backdrop-filter: blur(60px) saturate(125%);
    -webkit-backdrop-filter: blur(60px) saturate(125%);
}

.card-header,
.card-footer {
    border-color: var(--w11-divider);
    background: transparent;
    border-radius: 0;
}
.card > .card-header:first-child { border-top-left-radius: var(--w11-radius-lg); border-top-right-radius: var(--w11-radius-lg); }
.card > .card-footer:last-child  { border-bottom-left-radius: var(--w11-radius-lg); border-bottom-right-radius: var(--w11-radius-lg); }

/* List groups inside cards */
.list-group, .list-group-flush > .list-group-item {
    background: transparent;
    border-color: var(--w11-divider);
}

/* ============================================================
   Buttons — Fluent style
   ============================================================ */
.btn {
    border-radius: var(--w11-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
    padding: .375rem .875rem;
    border-width: 1px;
    transition: background var(--w11-duration) var(--w11-ease),
                box-shadow var(--w11-duration) var(--w11-ease),
                transform 80ms var(--w11-ease);
    box-shadow: var(--w11-shadow-sm);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--w11-accent);
    border-color: var(--w11-accent);
    color: #fff;
}
.btn-primary:hover {
    background: var(--w11-accent-hover);
    border-color: var(--w11-accent-hover);
    color: #fff;
}
.btn-primary:focus, .btn-primary:focus-visible {
    box-shadow: 0 0 0 2px var(--w11-bg-base), 0 0 0 4px var(--w11-accent);
}

.btn-secondary, .btn-outline-secondary,
.btn-light, .btn-default {
    background: var(--w11-bg-card-solid);
    color: var(--w11-text-primary);
    border-color: var(--w11-stroke-strong);
}
.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-light:hover, .btn-default:hover {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
    border-color: var(--w11-stroke-strong);
}

/* Danger / Success / Warning — keep meaning, soften corners */
.btn-danger, .btn-success, .btn-warning, .btn-info {
    border-radius: var(--w11-radius-sm);
}

/* ============================================================
   Form controls
   ============================================================ */
.form-control,
.form-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
input[type="number"], textarea, select {
    border-radius: var(--w11-radius-sm);
    border: 1px solid var(--w11-stroke-strong);
    background: var(--w11-bg-card-solid);
    color: var(--w11-text-primary);
    transition: border-color var(--w11-duration) var(--w11-ease),
                box-shadow var(--w11-duration) var(--w11-ease);
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
    border-color: var(--w11-accent);
    box-shadow: 0 0 0 1px var(--w11-accent), inset 0 -2px 0 -1px var(--w11-accent);
    outline: none;
}

.form-label,
.form-hint {
    color: var(--w11-text-secondary);
}

/* Checkbox / radio — Fluent rounded */
.form-check-input {
    border-radius: var(--w11-radius-sm);
    border: 1.5px solid var(--w11-stroke-strong);
    background-color: var(--w11-bg-card-solid);
    transition: all var(--w11-duration) var(--w11-ease);
}
.form-check-input:checked {
    background-color: var(--w11-accent);
    border-color: var(--w11-accent);
}
.form-check-input[type="radio"] { border-radius: 50%; }

/* ============================================================
   Navbar / Header — Mica blur
   ============================================================ */
.navbar,
.navbar.navbar-vertical,
.navbar-light, .navbar-dark {
    background: var(--w11-bg-mica) !important;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid var(--w11-stroke);
    box-shadow: none;
}

.nav-link {
    color: var(--w11-text-secondary);
    border-radius: var(--w11-radius-sm);
    padding: .375rem .625rem;
    transition: background var(--w11-duration) var(--w11-ease),
                color var(--w11-duration) var(--w11-ease);
}
.nav-link:hover {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
}
.nav-link.active {
    background: var(--w11-fill-selected);
    color: var(--w11-accent);
}

/* ============================================================
   Dropdowns / Flyouts — Win11 acrylic menus
   ============================================================ */
.dropdown-menu {
    border-radius: var(--w11-radius-lg);
    border: 1px solid var(--w11-stroke);
    background: var(--w11-bg-base);
    box-shadow: var(--w11-shadow-flyout);
    padding: .25rem;
    min-width: 12rem;
    animation: w11-flyout var(--w11-duration-lg) var(--w11-ease);
}

@keyframes w11-flyout {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
    border-radius: var(--w11-radius-sm);
    padding: .5rem .75rem;
    color: var(--w11-text-primary);
    transition: background var(--w11-duration) var(--w11-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
}
.dropdown-item:active {
    background: var(--w11-fill-pressed);
    color: var(--w11-text-primary);
}
.dropdown-divider { border-top-color: var(--w11-divider); margin: .25rem 0; }

/* ============================================================
   Modals — Win11 dialog
   ============================================================ */
.modal-content {
    border-radius: var(--w11-radius-xl);
    border: 1px solid var(--w11-stroke);
    background: var(--w11-bg-card-solid);
    box-shadow: var(--w11-shadow-flyout);
    overflow: hidden;
}
.modal-header { border-color: var(--w11-divider); padding: 1.25rem 1.5rem; }
.modal-footer { border-color: var(--w11-divider); padding: 1rem 1.5rem; background: var(--w11-bg-elev1); }

/* ============================================================
   Avatar / Badges
   ============================================================ */
.avatar {
    border-radius: var(--w11-radius-md);
    transition: box-shadow var(--w11-duration) var(--w11-ease);
}
.avatar.avatar-rounded, .avatar-rounded { border-radius: 50%; }

.badge {
    border-radius: 999px;
    font-weight: 500;
    padding: .25em .625em;
}

/* ============================================================
   Tables
   ============================================================ */
.table {
    --tblr-table-bg: transparent;
    color: var(--w11-text-primary);
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--w11-divider);
    background: transparent;
}
.table-hover > tbody > tr:hover > * {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
}

/* ============================================================
   Quote / alerts (uzfor-specific)
   ============================================================ */
/* Sitata — Telegram-uslub: chap accent chiziq, ixcham, ichma-ich bo'lmasin */
.quote {
    display: block;
    position: relative;
    margin: 6px 0;
    padding: 5px 11px;
    border: 0;
    border-left: 3px solid var(--w11-accent, #2563eb);
    border-radius: 7px;
    background: rgba(37, 99, 235, .06);
    box-shadow: none;
    color: inherit;
    font-size: .94em;
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* Sitata ichidagi havola/ism (muallif) — accent rangda, ajralib tursin */
.quote > a:first-child, .quote b:first-child { color: var(--w11-accent, #2563eb); font-weight: 600; }
/* Ichki (nested) sitatalar — minimal qo'shimcha joy, fon biroz susayadi */
.quote .quote { margin: 5px 0 3px; padding: 4px 10px; background: rgba(37, 99, 235, .05); border-left-color: rgba(37, 99, 235, .55); }
.quote .quote .quote { background: rgba(37, 99, 235, .04); border-left-color: rgba(37, 99, 235, .4); }
/* 3 darajadan chuqurini yig'ib qo'yamiz (eski postlar uchun) — ixcham qoladi */
.quote .quote .quote .quote { margin: 3px 0; padding: 3px 8px; background: rgba(37, 99, 235, .03); }
[data-bs-theme="dark"] .quote { background: rgba(96, 165, 250, .10); border-left-color: #60a5fa; }
[data-bs-theme="dark"] .quote .quote { background: rgba(96, 165, 250, .07); }

.alert {
    border-radius: var(--w11-radius-md);
    border: 1px solid var(--w11-stroke);
    background: var(--w11-bg-elev1);
}

/* ============================================================
   Forum-specific tweaks
   ============================================================ */
/* Old uzfor classes used as flat wrappers */
.menu, .rmenu, .phdr, .bmenu {
    border-radius: var(--w11-radius-md);
    background: var(--w11-bg-card-solid);
    border: 1px solid var(--w11-stroke);
    padding: .625rem .875rem;
    margin-bottom: .5rem;
    transition: background var(--w11-duration) var(--w11-ease);
}
.phdr {
    background: var(--w11-bg-elev2);
    font-weight: 600;
}
.bmenu { background: var(--w11-fill-selected); }

/* ------------------------------------------------------------------
   Long code / wide content must scroll INSIDE the column, not stretch
   the whole page. Bootstrap/Tabler flex columns default to
   min-width:auto, which lets a wide child (e.g. a <pre> code block with
   a very long single line) blow the layout out horizontally. Forcing
   min-width:0 lets the column shrink so the code box scrolls internally.
   ------------------------------------------------------------------ */
.page-body .row > .col,
.page-body .row > [class^="col-"],
.page-body .row > [class*=" col-"] {
    min-width: 0;
}
/* Post wrappers are direct flex children of .row — min-width:0 lets them
   shrink below their content's intrinsic width; max-width:100% caps them. */
.menu, .rmenu, .phdr, .bmenu { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------------
   Forum post amallari: inline tahrirlash + BAN modal (forum-actions.js)
   ------------------------------------------------------------------ */
.js-edit-box .js-edit-text {
    width: 100%;
    min-height: 120px;
    font: inherit;
}
.js-edit-box .btn { cursor: pointer; }
a.js-post-action.w11-loading { opacity: .5; pointer-events: none; }

.fa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1090;
    padding: 24px 12px;
    overflow-y: auto;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.fa-modal-overlay.show { display: flex; }
.fa-modal {
    background: var(--w11-bg-card-solid, #fff);
    color: var(--w11-text-primary, #1f1f1f);
    width: 100%;
    max-width: 520px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    overflow: hidden;
    animation: faModalIn .18s ease;
}
@keyframes faModalIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.fa-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--w11-stroke, #e5e7eb);
}
.fa-modal-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--w11-text-secondary, #6b7280);
    padding: 0 4px;
}
.fa-modal-body { padding: 14px 16px; }
.fa-modal-body .fa-modal-loading { color: var(--w11-text-secondary, #6b7280); }
.fa-modal-body textarea { width: 100%; }
.fa-modal-body form input[type="submit"] { cursor: pointer; }

/* Post ovozi (reyting) vidjeti */
.js-pvote-group a { cursor: pointer; }
.js-pvote-up.is-active { color: #16a34a !important; }
.js-pvote-down.is-active { color: #dc2626 !important; }
.js-pvote-up.w11-loading, .js-pvote-down.w11-loading { opacity: .45; pointer-events: none; }
.js-pvote-count { display: inline-block; transition: transform .2s ease; min-width: 18px; text-align: center; }
.js-pvote-count.is-changed { transform: scale(1.35); }

/* ============================================================
   Zamonaviy forum post ko'rinishi (view.php #post-list)
   ============================================================ */
#post-list .fpost {
    position: relative;
    padding: 16px 18px 14px;
    transition: background .15s ease;
}
#post-list .fpost:hover { background: var(--w11-fill-hover, rgba(127,127,127,.035)); }
#post-list .fpost > .row { margin-left: 0; margin-right: 0; }

/* Avatar — yumaloq, chap tepada */
/* Avatar — yumaloq-kvadrat, object-fit:cover, ozgina kattaroq (44px) */
#post-list .delava img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
    object-fit: cover;
}

/* Sarlavha (foydalanuvchi + meta) avatardan o'ngda */
#post-list .fpost-main { margin-left: 54px; min-height: 48px; }
#post-list .fpost-main-grouped { margin-left: 54px; min-height: 0; }
#post-list .fpost-main strong, #post-list .fpost-main b { font-size: 15px; }
#post-list .fpost-main a[href*="act=post"] {
    font-weight: 600; color: var(--w11-text-secondary, #8a929c); text-decoration: none; font-size: 12.5px;
}

/* Post matni tipografiyasi */
#post-list .mt-2 {
    margin-top: 12px !important;
    line-height: 1.66; font-size: 15px;
    word-break: break-word; overflow-wrap: anywhere;
    color: var(--w11-text-primary, #1f2733);
}
/* Matn paneli — bilinar-bilinmas fon + ovoz vidjeti uchun position.
   Pastki padding ovoz uchun joy qoldiradi — matn ustiga chiqmaydi. */
#post-list .fpost-body {
    position: relative;
    padding: 11px 14px 40px;
    background: var(--w11-fill-subtle, rgba(120, 130, 150, .05));
    border-radius: 12px;
}
[data-bs-theme="dark"] #post-list .fpost-body { background: rgba(255, 255, 255, .035); }
#post-list .mt-2 img { max-width: 100%; height: auto; border-radius: 8px; }
#post-list .mt-2 .alert { margin: 8px 0; }
#post-list time { font-size: 12.5px; color: var(--w11-text-secondary, #8a929c); }

/* ---- Biriktirilgan fayllar ---- */
#post-list .fpost-files {
    width: 100%;
    margin: 12px 0 0;
    padding-left: 54px; /* avatar otступи (margin emas — o'ngga chiqmasligi uchun) */
    box-sizing: border-box;
}
#post-list .fpost-files-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 13px; color: var(--w11-text-secondary, #6b7280);
    margin-bottom: 8px;
}
#post-list .fpost-files-title svg { flex: 0 0 auto; }
#post-list .fpost-files-badge {
    background: var(--w11-fill-subtle, rgba(127,127,127,.10));
    padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
}
#post-list .fpost-files-list { display: flex; flex-direction: column; gap: 6px; }
#post-list .fpost-file {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px; border-radius: 10px;
    background: var(--w11-bg-base, #fff);
    border: 1px solid var(--w11-divider, #e7eaef);
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}
#post-list .fpost-file:hover { background: var(--w11-fill-hover, rgba(127,127,127,.05)); border-color: #cbd5e1; }
#post-list .fpost-file-thumb {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
    background-size: cover; background-position: center; background-color: #eef1f6;
}
#post-list .fpost-file-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6a82fb, #4f6df0);
    color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase;
}
#post-list .fpost-file-info { flex: 1 1 auto; min-width: 0; }
#post-list .fpost-file-name {
    display: block; font-weight: 600; font-size: 14px;
    color: var(--w11-text-primary, #1f2733);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#post-list .fpost-file-meta { display: block; font-size: 12px; color: var(--w11-text-secondary, #8a929c); margin-top: 1px; }
#post-list .fpost-file-dl { flex: 0 0 auto; color: var(--w11-text-secondary, #9aa3ad); display: inline-flex; }
#post-list .fpost-file:hover .fpost-file-dl { color: #2563eb; }
[data-bs-theme="dark"] #post-list .fpost-file { background: #161a26; border-color: #232838; }
@media (max-width: 575.98px) { #post-list .fpost-files { padding-left: 0; } }

/* ---- Alohida post (act=post) ---- */
/* Flex header: avatar + nik yonma-yon (absolyut emas — kafolatli to'g'ri) */
#post-list .fpost-single-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
#post-list .fpost-single-head .delava { position: static; flex: 0 0 auto; }
#post-list .fpost-single-author { min-width: 0; }
/* Single postda ichki bloklar to'liq kenglikda (avatar ustuni yo'q) */
#post-list .fpost-single .fpost-files { padding-left: 0; }
#post-list .fpost-single .fpost-single-foot { margin-left: 0; }

#post-list .fpost-single-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 14px 0 0 54px; padding-top: 12px;
    border-top: 1px solid var(--w11-divider, #eef0f3);
}
#post-list .fpost-single-likes {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 700; color: #e5484d;
}
@media (max-width: 575.98px) { #post-list .fpost-single-foot { margin-left: 0; } }

/* Postlar orasida nozik ajratuvchi; ketma-ket bir userdan — zичroq */
#post-list .fpost + .fpost { border-top: 1px solid var(--w11-divider, #eef0f3); }
#post-list .fpost.list-group-item-grouped { border-top: 0; padding-top: 4px; }

/* Footer qatori: faqat toolbar (ovoz endi matn ichida) */
#post-list .fpost .row.mt-1 { margin-left: 0; margin-right: 0; align-items: center; }

/* Ovoz vidjeti — matn paneli ichida, pastki o'ng burchakda, maydaroq pill */
#post-list .fpost-vote {
    position: absolute;
    right: 8px; bottom: 7px;
    display: inline-flex; align-items: center; gap: 0;
    padding: 1px;
    background: var(--w11-bg-base, #fff);
    border: 1px solid var(--w11-divider, #e7eaee);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
#post-list .fpost-vote .btn-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    color: var(--w11-text-secondary, #8a929c);
    transition: background .15s ease, color .15s ease;
}
#post-list .fpost-vote .btn-action svg { width: 15px; height: 15px; }
#post-list .fpost-vote .btn-action:hover { background: rgba(127,127,127,.14); }
#post-list .fpost-vote .js-pvote-up.is-active { color: #16a34a; }
#post-list .fpost-vote .js-pvote-down.is-active { color: #dc2626; }
#post-list .fpost-vote .js-pvote-count { width: auto; min-width: 14px; padding: 0 3px; font-weight: 700; font-size: 12.5px; text-align: center; }
[data-bs-theme="dark"] #post-list .fpost-vote { background: #1c2230; border-color: #2a3142; }

/* ============================================================
   Mavzu so'rovnomasi (poll) — zamonaviy + AJAX
   ============================================================ */
#forum-poll.is-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; }
.forum-poll {
    margin: 14px 0;
    padding: 16px 18px;
    border: 1px solid var(--w11-stroke, #e7eaef);
    border-radius: 14px;
    background: var(--w11-bg-base, #fff);
}
.forum-poll__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.forum-poll__head > svg { flex: 0 0 auto; color: #4f6df0; }
.forum-poll__q { font-weight: 700; font-size: 15.5px; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.forum-poll__total {
    flex: 0 0 auto; font-size: 12px; font-weight: 600;
    color: var(--w11-text-secondary, #8a929c);
    background: var(--w11-fill-subtle, rgba(127,127,127,.08));
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

/* Ovoz berish formasi */
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-option {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; cursor: pointer;
    border: 1.5px solid var(--w11-divider, #e7eaef); border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
}
.poll-option:hover { border-color: #b9c4ff; background: rgba(79,109,240,.04); }
.poll-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.poll-option__radio {
    flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
    border: 2px solid var(--w11-text-secondary, #aab2bd); position: relative;
    transition: border-color .15s ease;
}
.poll-option input:checked + .poll-option__radio { border-color: #4f6df0; }
.poll-option input:checked + .poll-option__radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #4f6df0;
}
.poll-option:has(input:checked) { border-color: #4f6df0; background: rgba(79,109,240,.06); }
.poll-option:has(input:checked) .poll-option__label { font-weight: 600; }
.poll-option__label { flex: 1 1 auto; }
.forum-poll__actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

/* Natijalar */
.poll-results { display: flex; flex-direction: column; gap: 13px; }
.poll-bar__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.poll-bar__label { font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.poll-bar__pct { font-weight: 700; font-size: 14px; color: var(--w11-text-secondary, #6b7280); flex: 0 0 auto; }
.poll-bar__track { height: 9px; border-radius: 999px; background: var(--w11-fill-subtle, rgba(127,127,127,.10)); overflow: hidden; }
.poll-bar__fill {
    height: 100%; border-radius: 999px; min-width: 3px;
    background: linear-gradient(90deg, #6a82fb, #4f6df0);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.poll-bar__count { margin-top: 4px; font-size: 12px; color: var(--w11-text-secondary, #8a929c); }
.poll-bar.is-mine .poll-bar__label, .poll-bar.is-mine .poll-check { color: #2eb872; font-weight: 700; }
.poll-bar.is-mine .poll-bar__fill { background: linear-gradient(90deg, #34d399, #10b981); }
.forum-poll__foot {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--w11-divider, #eef0f3);
}
.forum-poll__link { font-size: 13.5px; font-weight: 500; text-decoration: none; }
[data-bs-theme="dark"] .forum-poll { background: #161a26; border-color: #232838; }

/* ============================================================
   Forum statistikasi (stat.php) — ro'yxat ko'rinishi
   ============================================================ */
.stat-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    text-decoration: none !important;
}
.stat-row-ico {
    flex: 0 0 auto; width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
}
.stat-row-label {
    flex: 1 1 auto; min-width: 0;
    color: var(--w11-text-secondary, #5b6470);
    font-size: 14px;
    overflow: hidden; text-overflow: ellipsis;
}
.stat-row-val {
    flex: 0 0 auto;
    font-weight: 800; font-size: 1.1rem; letter-spacing: -.3px;
    color: var(--w11-text-primary, #1f2733);
}
a.stat-row .stat-row-val { color: #2563eb; }
a.stat-row:hover .stat-row-label { color: var(--w11-text-primary, #1f2733); }

/* ============================================================
   Yozishmalar — chat uslubida scroll qilinadigan suhbat
   ============================================================ */
#mail-thread.mail-scroll {
    height: 58vh;
    min-height: 320px;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    scroll-behavior: auto;
}
/* Xronologik: eng eski tepada (uzfor.css dagi column-reverse ni bekor qiladi) */
#mail-thread.mail-scroll ul { flex-direction: column !important; }
#mail-thread .mail-load-trigger,
#mail-thread .mail-load-end { text-align: center; padding: 8px 0; font-size: 12px; color: var(--w11-text-secondary, #8a929c); }

/* Yozishmalar inbox — suhbatlar ro'yxati */
.mail-conv { padding: 11px 16px; }
.mail-ava-wrap { position: relative; flex: 0 0 auto; display: inline-block; }
.mail-online-dot {
    position: absolute; right: -1px; bottom: -1px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #31c48d; border: 2px solid var(--w11-bg-base, #fff);
}
.mail-conv-name { font-weight: 600; font-size: 15px; color: var(--w11-text-primary, #1f2733); }
.mail-conv-time { flex: 0 0 auto; font-size: 12px; color: var(--w11-text-secondary, #9aa3ad); white-space: nowrap; }
.mail-conv-snippet { font-size: 13.5px; }
.mail-conv-badge {
    flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: 999px; background: #2563eb; color: #fff;
    font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
}
.mail-conv-unread { background: rgba(37, 99, 235, .045); }
.mail-conv-unread .mail-conv-name { font-weight: 700; }
.mail-conv-unread .mail-conv-snippet { color: var(--w11-text-primary, #1f2733) !important; font-weight: 500; }

/* ---- Amal toolbar (Tahrirlash / BAN / O'chirish / Javob / Sitata) ---- */
.post-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding-top: 10px; margin-top: 10px;
    border-top: 1px solid var(--w11-divider, #f0f0f0);
}
.post-toolbar a {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; font-size: 13px; font-weight: 500; line-height: 1;
    color: var(--w11-text-secondary, #5b6470) !important;
    background: rgba(127,127,127,.10);
    border: 1px solid transparent; border-radius: 8px;
    text-decoration: none !important; cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .08s ease;
}
.post-toolbar a svg { width: 15px; height: 15px; flex: 0 0 auto; }
.post-toolbar a:hover { background: rgba(127,127,127,.20); color: var(--w11-text-primary, #1f1f1f) !important; }
.post-toolbar a:active { transform: scale(.95); }
.post-toolbar a.js-forum-reply, .post-toolbar a.js-forum-quote { color: #2563eb !important; }
.post-toolbar a.js-forum-reply:hover, .post-toolbar a.js-forum-quote:hover { background: rgba(37,99,235,.13); }
.post-toolbar a[data-action="ban"], .post-toolbar a[data-action="delete"] { color: #dc2626 !important; }
.post-toolbar a[data-action="ban"]:hover, .post-toolbar a[data-action="delete"]:hover { background: rgba(220,38,38,.13); color: #b91c1c !important; }
.post-toolbar a.w11-loading { opacity: .5; pointer-events: none; }

/* Mobil: tugmalar yorlig'ini yashirmaymiz, lekin zичroq */
@media (max-width: 480px) {
    .post-toolbar a { padding: 5px 9px; font-size: 12px; }
}

/* Forum post — responsive moslashuvi */
@media (max-width: 575.98px) {
    #post-list .fpost { padding: 14px 14px 12px; }
    #post-list .mt-2 { font-size: 14.5px; margin-top: 10px !important; }
    #post-list .fpost .row.mt-1 { row-gap: 6px; }
}

/* ---- Sitata: inline javob oynasi (post ostida) ---- */
.quote-reply-box {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--w11-stroke, #e5e7eb);
    border-radius: 10px;
    background: var(--w11-bg-elev1, #f7f8fa);
    animation: faModalIn .16s ease;
}
.quote-reply-box .qrb-quote {
    border-left: 3px solid #2563eb;
    background: rgba(37,99,235,.06);
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 10px;
    font-size: 13px;
}
.quote-reply-box .qrb-quote-head { font-weight: 600; color: #2563eb; margin-bottom: 2px; }
.quote-reply-box .qrb-quote-body {
    color: var(--w11-text-secondary, #5b6470);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow: auto;
}
.quote-reply-box .qrb-textarea { width: 100%; resize: vertical; }
.quote-reply-box .qrb-actions { margin-top: 8px; display: flex; gap: 6px; }

/* ============================================================
   Bildirishnomalar: Umumiy/Shaxsiy tab bar + shaxsiy lenta
   ============================================================ */
/* ====== Bildirishnomalar — zamonaviy, ikonkasiz dizayn ====== */
.ntf-tabs {
    display: flex;
    gap: 4px;
    margin: 2px 0 14px;
    background: var(--w11-bg-elev1, #eef1f6);
    padding: 4px;
    border-radius: 14px;
}
.ntf-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 14px;
    color: var(--w11-text-secondary, #5b6470);
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ntf-tab:hover { color: var(--w11-text-primary, #1f1f1f); }
.ntf-tab.active {
    background: var(--w11-bg-card-solid, #fff);
    color: var(--w11-accent, #2563eb);
    box-shadow: 0 2px 8px rgba(20,30,60,.10);
}
.ntf-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e5484d;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border-radius: 999px;
}

/* Karta */
.ntf-card { overflow: hidden; }
.ntf-list { display: flex; flex-direction: column; }

/* Element — gorizontal flex (avatar chapda, matn o'ngda) */
.ntf-list .ntf-item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 13px;
    padding: 13px 16px;
    text-decoration: none !important;
    color: inherit;
    position: relative;
    transition: background .15s ease;
}
.ntf-list .ntf-item + .ntf-item { border-top: 1px solid var(--w11-divider, #eef0f2); }
.ntf-list .ntf-item:hover { background: var(--w11-fill-hover, rgba(37,99,235,.045)); }

/* Real foydalanuvchi avatari (ikonka o'rniga) */
.ntf-list .ntf-item > .ntf-ava {
    display: block !important;
    flex: 0 0 auto !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #eef1f6;
    box-shadow: 0 0 0 1px rgba(20,30,60,.06);
}
.ntf-list .ntf-item > .ntf-item-body { flex: 1 1 auto !important; min-width: 0 !important; }
.ntf-item-text { display: block; color: var(--w11-text-primary, #1f1f1f); line-height: 1.45; word-break: break-word; font-size: 14px; }
.ntf-item-text a { font-weight: 700; color: inherit; }
.ntf-item-text a:hover { color: var(--w11-accent, #2563eb); }
.ntf-item-text b { font-weight: 700; }
.ntf-item-time { display: block; font-size: 12px; margin-top: 3px; color: var(--w11-text-secondary, #9aa0a6); }

/* O'qilmagan: yumshoq fon + chap aksent + nuqta */
.ntf-unread { background: rgba(37,99,235,.06); }
.ntf-unread::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--w11-accent, #2563eb);
}
.ntf-dot {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--w11-accent, #2563eb);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

/* Bo'sh holat — toza, ikonkasiz */
.ntf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 48px 24px; }
.ntf-empty-title { font-weight: 700; font-size: 15.5px; color: var(--w11-text-primary, #1f1f1f); }
.ntf-empty .text-muted { max-width: 340px; font-size: 13px; }

/* "Ko'proq yuklash" — toza tugma */
.ntf-more-wrap { margin-top: 14px; text-align: center; }
.js-ntf-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--w11-divider, #e6e9f0);
    background: var(--w11-bg-card-solid, #fff);
    color: var(--w11-text-primary, #1f1f1f);
    font-weight: 600;
    font-size: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.js-ntf-more:hover { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.3); color: var(--w11-accent, #2563eb); }
.ntf-more-count {
    min-width: 22px;
    padding: 1px 7px;
    background: var(--w11-bg-elev1, #eef1f6);
    color: var(--w11-text-secondary, #6b7488);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.js-ntf-more.is-loading { pointer-events: none; opacity: .6; }

/* AJAX tab almashinuvi: silliq fade + yuklanish holati */
.ntf-fade { animation: ntfFadeIn .22s ease; }
@keyframes ntfFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ntf-loading { opacity: .4; transition: opacity .15s ease; pointer-events: none; }
/* Yangi qo'shilgan itemlar uchun yumshoq paydo bo'lish */
.ntf-item-new { animation: ntfFadeIn .25s ease; }

/* Smiley picker (built later in Phase 3) */
.w11-smiley-picker {
    position: absolute;
    z-index: 1080;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--w11-bg-mica);
    backdrop-filter: blur(60px) saturate(180%);
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    border: 1px solid var(--w11-stroke);
    border-radius: var(--w11-radius-lg);
    box-shadow: var(--w11-shadow-flyout);
    padding: .5rem;
    display: none;
    animation: w11-flyout var(--w11-duration-lg) var(--w11-ease);
}
.w11-smiley-picker.show { display: block; }
.w11-smiley-picker .w11-smiley-cat-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--w11-divider);
    padding-bottom: .375rem;
    margin-bottom: .375rem;
}
.w11-smiley-picker .w11-smiley-cat-tab {
    border: 0;
    background: transparent;
    color: var(--w11-text-secondary);
    padding: .25rem .625rem;
    border-radius: var(--w11-radius-sm);
    cursor: pointer;
    font-size: 12px;
}
.w11-smiley-picker .w11-smiley-cat-tab:hover { background: var(--w11-fill-hover); color: var(--w11-text-primary); }
.w11-smiley-picker .w11-smiley-cat-tab.active { background: var(--w11-accent-light); color: var(--w11-accent); }

.w11-smiley-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .125rem;
}
.w11-smiley-grid button {
    border: 0;
    background: transparent;
    padding: .375rem;
    border-radius: var(--w11-radius-sm);
    cursor: pointer;
    transition: background 100ms var(--w11-ease), transform 80ms var(--w11-ease);
    line-height: 1;
}
.w11-smiley-grid button:hover { background: var(--w11-fill-hover); transform: scale(1.15); }
.w11-smiley-grid button:active { transform: scale(0.95); }
.w11-smiley-grid button img { width: 24px; height: 24px; vertical-align: middle; }
.w11-smiley-grid .w11-emoji-btn {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-size: 22px;
    text-align: center;
}

/* Native-emoji rendering inside textareas + chat messages */
textarea, .chat-message-text, .post-text, .menu, .list-group-item {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Code button — active (toggled) state (Win11 accent blue) */
.js-code-btn.w11-btn-active,
.js-code-btn:active {
    background: var(--w11-accent) !important;
    border-color: var(--w11-accent) !important;
    color: #fff !important;
}
.js-code-btn.w11-btn-active svg,
.js-code-btn:active svg { stroke: #fff !important; }

/* ============================================================
   Code editor mode — light, minimal, with live syntax highlighting
   ============================================================ */
.w11-code-editor {
    display: flex;
    background: #F6F8FA;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: none;
    position: relative;
    margin: .5rem 0;
    font-family: "Cascadia Code", "Consolas", "SF Mono", "JetBrains Mono",
                 ui-monospace, Menlo, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.w11-code-editor .w11-line-numbers {
    flex: 0 0 auto;
    width: 44px;
    background: #F6F8FA;
    color: #8A929C;
    text-align: right;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    border-right: 1px solid #E5E7EB;
    position: relative;
}
.w11-code-editor .w11-line-numbers .w11-ln-inner {
    padding: 14px 10px 14px 14px;
    white-space: pre;
    will-change: transform;
}

/* Mobile: narrow line-number gutter so code has more room */
@media (max-width: 575.98px) {
    .w11-code-editor .w11-line-numbers { width: 26px; }
    .w11-code-editor .w11-line-numbers .w11-ln-inner { padding: 14px 4px 14px 4px; }
    .w11-code-editor .w11-code-overlay,
    .w11-code-editor textarea.w11-code-textarea { padding-left: 8px !important; padding-right: 8px !important; }
    .w11-code .hljs-ln-numbers { padding-left: 6px !important; padding-right: 6px !important; }
    .w11-code .hljs-ln-code { padding-left: 8px !important; }
    .w11-code code, .w11-code code.hljs { padding-right: 8px; }
}

/* Stage holds the highlighted overlay + the transparent textarea on top */
.w11-code-editor .w11-code-stage {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
}

.w11-code-editor .w11-code-overlay {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    pointer-events: none;
    background: transparent;
    border: 0;
    color: #24292F;
    white-space: pre;
    font: inherit;
    line-height: inherit;
    z-index: 0;
}
.w11-code-editor .w11-code-overlay code,
.w11-code-editor .w11-code-overlay code.hljs {
    background: transparent !important;
    padding: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre;
    display: block;
}

.w11-code-editor textarea.w11-code-textarea {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 180px;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    font: inherit !important;
    line-height: inherit !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: pre;
    overflow-wrap: normal;
    overflow: auto;
    resize: vertical;
    caret-color: #0969DA;
}
.w11-code-editor textarea.w11-code-textarea::placeholder {
    color: #8A929C;
    -webkit-text-fill-color: #8A929C;
}
.w11-code-editor textarea.w11-code-textarea:focus {
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;
}
.w11-code-editor textarea.w11-code-textarea::selection {
    background: rgba(9,105,218,.22);
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Live overlay token colors — same palette as rendered .w11-code */
.w11-code-editor .w11-code-overlay .hljs-keyword,
.w11-code-editor .w11-code-overlay .hljs-built_in,
.w11-code-editor .w11-code-overlay .hljs-type,
.w11-code-editor .w11-code-overlay .hljs-meta           { color: #CF222E; }
.w11-code-editor .w11-code-overlay .hljs-literal,
.w11-code-editor .w11-code-overlay .hljs-number          { color: #0550AE; }
.w11-code-editor .w11-code-overlay .hljs-string,
.w11-code-editor .w11-code-overlay .hljs-template-string { color: #0A7B47; }
.w11-code-editor .w11-code-overlay .hljs-comment,
.w11-code-editor .w11-code-overlay .hljs-quote          { color: #6E7781; font-style: italic; }
.w11-code-editor .w11-code-overlay .hljs-function,
.w11-code-editor .w11-code-overlay .hljs-title           { color: #8250DF; }
.w11-code-editor .w11-code-overlay .hljs-variable,
.w11-code-editor .w11-code-overlay .hljs-name,
.w11-code-editor .w11-code-overlay .hljs-attr,
.w11-code-editor .w11-code-overlay .hljs-attribute      { color: #0550AE; }
.w11-code-editor .w11-code-overlay .hljs-tag             { color: #116329; }
.w11-code-editor .w11-code-overlay .hljs-symbol,
.w11-code-editor .w11-code-overlay .hljs-bullet,
.w11-code-editor .w11-code-overlay .hljs-link,
.w11-code-editor .w11-code-overlay .hljs-regexp          { color: #0A7B47; }
.w11-code-editor .w11-code-overlay .hljs-class,
.w11-code-editor .w11-code-overlay .hljs-selector-class  { color: #8250DF; }
.w11-code-editor .w11-code-overlay .hljs-deletion        { color: #82071E; }
.w11-code-editor .w11-code-overlay .hljs-addition        { color: #116329; }

/* Dark theme variant */
[data-bs-theme="dark"] .w11-code-editor {
    background: #0D1117;
    border-color: #30363D;
}
[data-bs-theme="dark"] .w11-code-editor .w11-line-numbers {
    background: #0D1117;
    color: #6E7681;
    border-right-color: #21262D;
}
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay { color: #C9D1D9; }
[data-bs-theme="dark"] .w11-code-editor textarea.w11-code-textarea { caret-color: #58A6FF; }
[data-bs-theme="dark"] .w11-code-editor textarea.w11-code-textarea::placeholder { color: #6E7681; -webkit-text-fill-color: #6E7681; }
[data-bs-theme="dark"] .w11-code-editor textarea.w11-code-textarea::selection {
    background: rgba(56,139,253,.32);
}
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-keyword,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-built_in,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-type,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-meta           { color: #FF7B72; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-literal,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-number          { color: #79C0FF; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-string,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-template-string { color: #A5D6FF; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-comment,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-quote          { color: #8B949E; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-function,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-title          { color: #D2A8FF; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-variable,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-name,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-attr,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-attribute      { color: #79C0FF; }
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-tag,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-class,
[data-bs-theme="dark"] .w11-code-editor .w11-code-overlay .hljs-selector-class { color: #7EE787; }

/* ============================================================
   Rendered code blocks — minimal light look with line numbers + copy button
   ============================================================ */
.w11-code, pre.w11-code {
    background: #F6F8FA !important;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    margin: .75rem 0;
    box-shadow: none;
    position: relative;
    max-width: 100%;
}

.w11-code code,
.w11-code code.hljs {
    display: block;
    font-family: "Cascadia Code", "Consolas", "SF Mono", "JetBrains Mono",
                 ui-monospace, Menlo, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    background: transparent !important;
    color: #24292F !important;
    padding: 14px 16px 14px 0;
    overflow-x: hidden;
    max-width: 100%;
    /* Wrap long lines instead of horizontal-scrolling — avoids the layout
       break and nested scrollbars that long single-line code caused. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    border: 0;
    border-radius: 0;
    counter-reset: line;
}

/* Line numbers via highlightjs-line-numbers.js plugin (table-based) */
.w11-code .hljs-ln {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
.w11-code .hljs-ln-numbers {
    user-select: none;
    -webkit-user-select: none;
    text-align: right;
    color: #8A929C;
    border-right: 1px solid #E5E7EB;
    vertical-align: top;
    padding-right: 12px !important;
    padding-left: 14px !important;
    width: 1%;
    white-space: nowrap;
}
.w11-code .hljs-ln-code {
    padding-left: 14px !important;
    color: #24292F;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.w11-code .hljs-ln-line {
    line-height: 1.6;
}

/* Light syntax colors (GitHub-ish, simple) */
.w11-code .hljs-keyword,
.w11-code .hljs-built_in,
.w11-code .hljs-type           { color: #CF222E !important; }
.w11-code .hljs-meta           { color: #CF222E !important; }
.w11-code .hljs-literal,
.w11-code .hljs-number          { color: #0550AE !important; }
.w11-code .hljs-string,
.w11-code .hljs-template-string { color: #0A7B47 !important; }
.w11-code .hljs-comment,
.w11-code .hljs-quote          { color: #6E7781 !important; font-style: italic; }
.w11-code .hljs-function,
.w11-code .hljs-title           { color: #8250DF !important; }
.w11-code .hljs-variable,
.w11-code .hljs-name,
.w11-code .hljs-attr            { color: #0550AE !important; }
.w11-code .hljs-tag             { color: #116329 !important; }
.w11-code .hljs-attribute       { color: #0550AE !important; }
.w11-code .hljs-symbol,
.w11-code .hljs-bullet,
.w11-code .hljs-link            { color: #0A7B47 !important; }
.w11-code .hljs-class,
.w11-code .hljs-selector-class  { color: #8250DF !important; }
.w11-code .hljs-regexp          { color: #0A7B47 !important; }
.w11-code .hljs-deletion        { color: #82071E !important; }
.w11-code .hljs-addition        { color: #116329 !important; }

/* Copy button (top-right) */
.w11-code-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #57606A;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: background-color .15s ease, color .15s ease;
}
.w11-code-copy:hover {
    background: rgba(208,215,222,.32);
    color: #24292F;
}
.w11-code-copy:active { background: rgba(208,215,222,.5); }
.w11-code-copy svg { width: 14px; height: 14px; }
.w11-code-copy.copied { color: #1A7F37; }
.w11-code-copy.copied svg { color: #1A7F37; }

/* Dark theme override */
[data-bs-theme="dark"] .w11-code,
[data-bs-theme="dark"] pre.w11-code {
    background: #0D1117 !important;
    border-color: #30363D;
}
[data-bs-theme="dark"] .w11-code code,
[data-bs-theme="dark"] .w11-code code.hljs { color: #C9D1D9 !important; }
[data-bs-theme="dark"] .w11-code .hljs-ln-numbers {
    color: #6E7681; border-right-color: #30363D;
}
[data-bs-theme="dark"] .w11-code .hljs-ln-code { color: #C9D1D9; }
[data-bs-theme="dark"] .w11-code .hljs-keyword,
[data-bs-theme="dark"] .w11-code .hljs-built_in,
[data-bs-theme="dark"] .w11-code .hljs-type,
[data-bs-theme="dark"] .w11-code .hljs-meta           { color: #FF7B72 !important; }
[data-bs-theme="dark"] .w11-code .hljs-literal,
[data-bs-theme="dark"] .w11-code .hljs-number          { color: #79C0FF !important; }
[data-bs-theme="dark"] .w11-code .hljs-string,
[data-bs-theme="dark"] .w11-code .hljs-template-string { color: #A5D6FF !important; }
[data-bs-theme="dark"] .w11-code .hljs-comment,
[data-bs-theme="dark"] .w11-code .hljs-quote          { color: #8B949E !important; }
[data-bs-theme="dark"] .w11-code .hljs-function,
[data-bs-theme="dark"] .w11-code .hljs-title          { color: #D2A8FF !important; }
[data-bs-theme="dark"] .w11-code .hljs-variable,
[data-bs-theme="dark"] .w11-code .hljs-name,
[data-bs-theme="dark"] .w11-code .hljs-attr,
[data-bs-theme="dark"] .w11-code .hljs-attribute      { color: #79C0FF !important; }
[data-bs-theme="dark"] .w11-code .hljs-tag,
[data-bs-theme="dark"] .w11-code .hljs-class,
[data-bs-theme="dark"] .w11-code .hljs-selector-class { color: #7EE787 !important; }
[data-bs-theme="dark"] .w11-code-copy { color: #8B949E; }
[data-bs-theme="dark"] .w11-code-copy:hover { background: rgba(177,186,196,.12); color: #C9D1D9; }
[data-bs-theme="dark"] .w11-code-copy.copied,
[data-bs-theme="dark"] .w11-code-copy.copied svg { color: #7EE787; }

/* Inline `code` (BBCode short form not yet implemented; for direct <code> use) */
:not(pre) > code {
    font-family: "Cascadia Code", "Consolas", "SF Mono", "JetBrains Mono",
                 ui-monospace, Menlo, Monaco, "Courier New", monospace;
    font-size: 12.5px;
    background: var(--w11-bg-elev1);
    border: 1px solid var(--w11-stroke);
    border-radius: var(--w11-radius-sm);
    padding: .125rem .375rem;
    color: var(--w11-text-primary);
}

/* Legacy GeSHi output (.phpcode) — also dark */
.phpcode {
    background: #0D1117;
    border: 1px solid #30363D;
    border-radius: var(--w11-radius-md);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    color: #C9D1D9 !important;
    font-family: "Cascadia Code", "Consolas", "SF Mono", "JetBrains Mono",
                 ui-monospace, Menlo, Monaco, "Courier New", monospace;
    font-size: 13px;
}

/* Toast (used by AJAX feedback) */
.w11-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    min-width: 280px;
    max-width: 360px;
    background: var(--w11-bg-mica);
    backdrop-filter: blur(60px) saturate(180%);
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    border: 1px solid var(--w11-stroke);
    border-radius: var(--w11-radius-lg);
    box-shadow: var(--w11-shadow-flyout);
    padding: .75rem 1rem;
    color: var(--w11-text-primary);
    transform: translateX(120%);
    transition: transform var(--w11-duration-lg) var(--w11-ease);
}
.w11-toast.show { transform: translateX(0); }
.w11-toast.toast-success { border-left: 3px solid #6CCB5F; }
.w11-toast.toast-error   { border-left: 3px solid #C42B1C; }
.w11-toast.toast-info    { border-left: 3px solid var(--w11-accent); }

/* AJAX-loading shimmer */
@keyframes w11-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.w11-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.w11-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--w11-fill-hover) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: w11-shimmer 1.4s linear infinite;
    border-radius: inherit;
}

/* ============================================================
   Scrollbars — Fluent slim style
   ============================================================ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--w11-stroke-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: var(--w11-stroke-strong);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--w11-text-tertiary); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Selection
   ============================================================ */
::selection {
    background: var(--w11-accent);
    color: #fff;
}

/* ============================================================
   Bottom nav (mobile) — Win11 taskbar feel
   ============================================================ */
.bg-blur {
    background: var(--w11-bg-mica) !important;
    backdrop-filter: blur(60px) saturate(180%);
    -webkit-backdrop-filter: blur(60px) saturate(180%);
    border-top: 1px solid var(--w11-stroke);
}
a.nav-panel {
    border-radius: var(--w11-radius-md);
    transition: background var(--w11-duration) var(--w11-ease);
}
a.nav-panel:hover, a.nav-panel:focus, a.nav-panel:active {
    background: var(--w11-fill-hover) !important;
}

/* ============================================================
   Admin shell — sidebar + main content layout
   ============================================================ */
.w11-admin-shell {
    display: grid;
    grid-template-columns: 340px 1fr 340px; /* site yon panellari (340px) bilan bir xil */
    gap: 0;
    min-height: calc(100vh - 64px);
    background: var(--w11-bg-base);
}
@media (max-width: 1199px) {
    .w11-admin-shell { grid-template-columns: 340px 1fr; }
    .w11-admin-sidebar-right { display: none; }
}
@media (max-width: 991px) {
    .w11-admin-shell { grid-template-columns: 1fr; }
}

.w11-admin-sidebar-right {
    background: var(--w11-bg-card-solid);
    border-left: 1px solid var(--w11-stroke);
    padding: 1rem 0.75rem;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
}

.w11-admin-sidebar {
    background: var(--w11-bg-card-solid);
    border-right: 1px solid var(--w11-stroke);
    padding: 1.25rem 0.75rem;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
}
@media (max-width: 991px) {
    .w11-admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        max-width: 86vw;
        max-height: 100vh;
        z-index: 1055;
        border-right: 1px solid var(--w11-stroke);
        border-bottom: 0;
        box-shadow: 0 0 32px rgba(0,0,0,.18);
        transform: translateX(-100%);
        transition: transform .28s var(--w11-ease);
        will-change: transform;
        padding-top: 1rem;
    }
    .w11-admin-sidebar.is-open {
        transform: translateX(0);
    }
}

/* Mobile drawer backdrop */
.w11-admin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1054;
    opacity: 0;
    transition: opacity .28s var(--w11-ease);
}
.w11-admin-overlay.is-active {
    display: block;
    opacity: 1;
}
body.w11-sidebar-open {
    overflow: hidden;
}

/* Hamburger toggle (mobile only) — navbar ichida, UZFOR logotipi oldida (odatiy tugma joyida) */
.w11-admin-mobile-toggle {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1051; /* sticky navbar (1050) ustida, drawer/overlay (1054/1055) ostida */
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--w11-radius-md);
    color: var(--w11-text-primary);
    box-shadow: none;
    cursor: pointer;
    transition: background var(--w11-duration) var(--w11-ease),
                transform var(--w11-duration) var(--w11-ease);
}
.w11-admin-mobile-toggle:hover {
    background: var(--w11-fill-hover);
}
.w11-admin-mobile-toggle:active {
    transform: scale(0.95);
}
.w11-admin-mobile-toggle svg {
    width: 22px;
    height: 22px;
}

/* Sidebar close button (mobile only) — sits inside sidebar header */
.w11-admin-sidebar-close {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--w11-radius-sm);
    color: var(--w11-text-secondary);
    cursor: pointer;
    transition: background var(--w11-duration) var(--w11-ease);
}
.w11-admin-sidebar-close:hover {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
}

@media (max-width: 991px) {
    .w11-admin-mobile-toggle { display: inline-flex; }
    .w11-admin-sidebar-close { display: inline-flex; }
    /* Hamburger endi navbar ichida — kontentni ortiqcha pastga surish shart emas */
    .w11-admin-main {
        padding-top: 12px !important;
    }
    /* UZFOR logotipini o'ngga suramiz — hamburger oldida joy bo'lsin (odatiy sahifadagidek) */
    body.is-admin-page .navbar-brand { margin-left: 44px; }
    /* Drawer also opens below the sticky site navbar so the UZFOR logo stays visible */
    .w11-admin-sidebar {
        top: var(--tblr-navbar-height, 64px);
        height: calc(100vh - var(--tblr-navbar-height, 64px));
    }
    .w11-admin-overlay {
        top: var(--tblr-navbar-height, 64px);
    }
}

.w11-admin-brand {
    padding: 0 .75rem 1rem .75rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--w11-divider);
}
.w11-admin-brand a { color: var(--w11-text-primary); }
.w11-admin-brand strong { font-size: 15px; }

.w11-admin-nav-group { margin-bottom: .375rem; }

/* Group title — now a clickable button with +/- chevron */
.w11-admin-nav-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: transparent;
    border: 0;
    border-radius: var(--w11-radius-sm);
    padding: .5rem .625rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w11-text-tertiary);
    cursor: pointer;
    text-align: left;
    transition: background var(--w11-duration) var(--w11-ease),
                color var(--w11-duration) var(--w11-ease);
}
.w11-admin-nav-title:hover {
    background: var(--w11-fill-hover);
    color: var(--w11-text-secondary);
}
.w11-admin-nav-title:focus-visible {
    outline: 2px solid var(--w11-accent);
    outline-offset: 2px;
}

/* +/- chevron — pure CSS using ::before */
.w11-grp-chevron {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--w11-duration) var(--w11-ease),
                opacity var(--w11-duration) var(--w11-ease);
}
.w11-grp-chevron::before,
.w11-grp-chevron::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--w11-duration) var(--w11-ease),
                opacity var(--w11-duration) var(--w11-ease);
}
.w11-grp-chevron::before {
    /* horizontal bar */
    top: 50%;
    left: 0;
    right: 0;
    height: 1.5px;
    transform: translateY(-50%);
}
.w11-grp-chevron::after {
    /* vertical bar — fades when expanded */
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.5px;
    transform: translateX(-50%);
}
.w11-admin-nav-title[aria-expanded="true"] .w11-grp-chevron::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}
.w11-admin-nav-title[aria-expanded="true"] .w11-grp-chevron {
    opacity: 1;
    color: var(--w11-accent);
}

/* List collapse animation */
.w11-admin-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height var(--w11-duration-lg) var(--w11-ease),
                opacity var(--w11-duration) var(--w11-ease),
                margin-top var(--w11-duration) var(--w11-ease);
    opacity: 1;
    margin-top: .125rem;
}
.w11-admin-nav-list.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}
.w11-admin-nav-item { margin: 0; }

.w11-admin-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--w11-radius-sm);
    color: var(--w11-text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--w11-duration) var(--w11-ease),
                color var(--w11-duration) var(--w11-ease);
    position: relative;
}
.w11-admin-nav-link:hover {
    background: var(--w11-fill-hover);
    color: var(--w11-text-primary);
    text-decoration: none;
}
.w11-admin-nav-item.active .w11-admin-nav-link {
    background: var(--w11-fill-selected);
    color: var(--w11-accent);
}
.w11-admin-nav-item.active .w11-admin-nav-link::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--w11-accent);
}
.w11-admin-nav-link svg { flex-shrink: 0; opacity: .85; }

.w11-admin-sidebar-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--w11-divider);
}

/* Main content area */
.w11-admin-main {
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    transition: opacity .15s var(--w11-ease);
}
.w11-admin-main.w11-loading {
    opacity: 0.45;
    pointer-events: none;
}
.w11-admin-main.w11-fade-in {
    animation: w11AdminFadeIn .22s var(--w11-ease);
}
@keyframes w11AdminFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* Top progress bar for SPA navigation */
.w11-admin-progress {
    position: fixed;
    top: var(--tblr-navbar-height, 64px);
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    pointer-events: none;
    z-index: 1060;
}
.w11-admin-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--w11-accent, #0067C0), #4cc2ff);
    transition: width .25s var(--w11-ease), opacity .25s var(--w11-ease);
    box-shadow: 0 0 8px rgba(0, 103, 192, 0.4);
}
.w11-admin-progress.is-loading::before { width: 70%; opacity: 1; }
.w11-admin-progress.is-done::before    { width: 100%; opacity: 0; }
@media (max-width: 991px) {
    .w11-admin-main { padding: 1rem; }
}

/* Dashboard stat cards — modern with gradient hover */
/* Statistika kartalari mobilda ham bir flex qatorda (gorizontal scroll) — stack bo'lmaydi */
@media (max-width: 767.98px) {
    .w11-stat-row {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }
    .w11-stat-row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 47% !important;
        min-width: 158px;
        scroll-snap-align: start;
    }
    .w11-stat-row::-webkit-scrollbar { height: 4px; }
    .w11-stat-row::-webkit-scrollbar-thumb { background: rgba(120, 130, 150, .35); border-radius: 4px; }
}

.w11-stat-card {
    background: var(--w11-bg-card-solid);
    border: 1px solid var(--w11-stroke);
    border-radius: var(--w11-radius-lg);
    padding: 1.25rem;
    transition: transform var(--w11-duration) var(--w11-ease),
                box-shadow var(--w11-duration) var(--w11-ease);
    height: 100%;
    position: relative;
    overflow: hidden;
}
.w11-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--w11-shadow-lg);
}
.w11-stat-card .w11-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--w11-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}
.w11-stat-card .w11-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--w11-text-tertiary);
}
.w11-stat-card .w11-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: .25rem 0 .5rem 0;
    color: var(--w11-text-primary);
}
.w11-stat-card .w11-stat-trend {
    font-size: 12.5px;
    color: var(--w11-text-secondary);
}
.w11-stat-card .w11-stat-trend .trend-up   { color: #28A745; font-weight: 600; }
.w11-stat-card .w11-stat-trend .trend-down { color: #DC3545; font-weight: 600; }

/* Stat icon backgrounds */
.bg-icon-blue   { background: rgba(0, 103, 192, 0.10);  color: #0067C0; }
.bg-icon-red    { background: rgba(220, 53, 69, 0.10);  color: #DC3545; }
.bg-icon-green  { background: rgba(40, 167, 69, 0.10);  color: #28A745; }
.bg-icon-orange { background: rgba(245, 159, 0, 0.10);  color: #F59F00; }
.bg-icon-purple { background: rgba(174, 62, 201, 0.10); color: #AE3EC9; }

[data-bs-theme="dark"] .bg-icon-blue   { background: rgba(76, 194, 255, 0.12); color: #4CC2FF; }
[data-bs-theme="dark"] .bg-icon-red    { background: rgba(255, 99, 99, 0.12); color: #FF6363; }
[data-bs-theme="dark"] .bg-icon-green  { background: rgba(76, 217, 100, 0.12); color: #4CD964; }
[data-bs-theme="dark"] .bg-icon-orange { background: rgba(255, 184, 0, 0.12); color: #FFB800; }
[data-bs-theme="dark"] .bg-icon-purple { background: rgba(207, 132, 230, 0.12); color: #CF84E6; }

/* Lightstat chart Win11 polish */
.lightstat_main {
    box-shadow: none !important;
    background: transparent !important;
}
.lightstat_head {
    background: transparent !important;
    border-radius: var(--w11-radius-md) var(--w11-radius-md) 0 0 !important;
    color: var(--w11-text-secondary) !important;
}
.lightstat_head span { color: var(--w11-text-primary) !important; }
.lightstat_body {
    background: var(--w11-bg-elev1) !important;
    border-radius: 0 0 var(--w11-radius-md) var(--w11-radius-md) !important;
}
.lightstat_progress span {
    background-color: var(--w11-accent) !important;
    opacity: 0.85;
}
.lightstat_progress span:nth-child(odd) { opacity: 0.65; }

/* Region table polish */
.w11-admin-main .table {
    margin-bottom: 0;
}
.w11-admin-main .table .progress {
    height: 6px;
    border-radius: 3px;
    background: var(--w11-fill-hover);
}
.w11-admin-main .table .progress-bar {
    background: var(--w11-accent);
}

/* Page header inside admin */
.w11-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.w11-page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: var(--w11-text-primary);
}
.w11-page-header .w11-page-subtitle {
    font-size: 13px;
    color: var(--w11-text-secondary);
    margin-top: .25rem;
}

/* ============================================================
   Reduce motion respect
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Chap panel = #sidebar-offcanvas (Profilim + Navigatsiya kartalari).
   Desktop (>=992px): chap chetda doimiy DOCK holatda — YOPILMAYDI.
   Mobil/planshet (<992px): oddiy offcanvas — hamburger ochadi/yopadi.
   Kontentga joy `.wrapper { margin-left: 352px }` (uzfor.css) bilan ajratilgan.
   ============================================================ */
@media (min-width: 992px) {
    .sidebar-offcanvas {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        width: 340px !important;
        max-width: 340px !important;
        height: calc(100vh - 56px) !important;
        transform: none !important;
        visibility: visible !important;
        z-index: 1015;
        background: #fff;
        border-right: 1px solid #eef0f6;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .04) !important;
        display: flex;
        flex-direction: column;
    }
    [data-bs-theme="dark"] .sidebar-offcanvas {
        background: #11141d;
        border-right-color: #232838;
    }
    /* "Profilim" sarlavhasi qoladi, lekin yopish (X) tugmasi desktopda kerakmas */
    .sidebar-offcanvas .offcanvas-header .btn-close { display: none !important; }
    .sidebar-offcanvas .offcanvas-body { flex: 1 1 auto; overflow-y: auto; }
    /* Desktopda hamburger kerakmas — chap panel doimo ochiq turadi */
    .sidebar-toggle { display: none !important; }
}

/* Eski .uz-side-nav (olib tashlangan) — qoldiq qoidalar zararsiz */
.uz-side-nav {
    display: none;
}

/* ============================================================
   Admin-only bloklar — profilda faqat adminlarga ko'rinadigan
   qismlar. Qizil punktir ramka + diagonal yo'lakli fon +
   "Faqat adminlarga ko'rinadi" yorlig'i bilan ajralib turadi.
   ============================================================ */
.admin-only {
    position: relative;
    margin: 12px 0;
    padding: 12px 12px 14px;
    border: 1.5px dashed #e5484d;
    border-radius: 12px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(229, 72, 69, .035),
            rgba(229, 72, 69, .035) 10px,
            rgba(229, 72, 69, .07) 10px,
            rgba(229, 72, 69, .07) 20px
        );
}
.admin-only > .admin-only__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 12px;
    background: #e5484d;
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(229, 72, 69, .3);
    cursor: pointer;
}
.admin-only > .admin-only__tag svg { flex: 0 0 auto; }
.admin-only > .admin-only__tag:hover { background: #d33b38; }
/* +/- belgisi */
.admin-only__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    margin-left: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 13px; font-weight: 800; line-height: 1;
}
.admin-only__chev::after { content: "+"; }
.admin-only.is-open .admin-only__chev::after { content: "\2212"; } /* minus */
/* Yopiladigan tana — avtomatik YOPIQ, faqat is-open da ochiladi */
.admin-only__body { display: none; }
.admin-only.is-open > .admin-only__body { display: block; padding-top: 12px; }
/* Ichidagi legacy bloklar (.menu/.rmenu/.phdr) yuqori marginlarisiz tursin */
.admin-only__body > .menu,
.admin-only__body > .rmenu,
.admin-only__body > .phdr { margin-left: 0; margin-right: 0; }
.admin-only__body > *:last-child { margin-bottom: 0; }
/* ============================================================
   Telegram uslubidagi profil header — cover + ustiga chiqib
   turuvchi yumaloq avatar + ism + yashil nuqtali "Onlayn".
   ============================================================ */
.tg-profile { overflow: hidden; }
.tg-cover {
    position: relative;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #4f6df0;
}
.tg-cover::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.30) 100%);
}
.tg-cover-btn {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #1f2733;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.tg-cover-btn:hover { transform: translateY(-1px); background: #fff; color: #2848d4; }
.tg-body {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: -46px;
    position: relative;
}
.tg-avatar {
    flex: 0 0 auto;
    width: 90px; height: 90px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e9edf5;
    border: 4px solid var(--w11-bg-base, #fff);
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.tg-ident { flex: 1 1 auto; min-width: 0; padding-bottom: 4px; }
.tg-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.tg-name a { color: inherit; text-decoration: none; }
.tg-name a:hover { text-decoration: none; opacity: .85; }
.tg-verif { vertical-align: -3px; flex: 0 0 auto; }
.tg-status {
    margin-top: 4px;
    font-size: .9rem;
    display: flex; align-items: center; gap: 7px;
}
.tg-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #31c48d;
    box-shadow: 0 0 0 3px rgba(49,196,141,.22);
    animation: tgPulse 2s ease-in-out infinite;
}
@keyframes tgPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.tg-online { color: #2eb872; font-weight: 600; }
.tg-seen { color: var(--w11-text-secondary, #8a93a8); }
.tg-fullname { margin-top: 14px; font-size: 1.02rem; }
[data-bs-theme="dark"] .tg-avatar { background-color: #232838; }

/* Profil tablari (AJAX) — yuklanish va silliq paydo bo'lish */
#prof-tabs .nav-link { cursor: pointer; }
.prof-loading { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.prof-fade { animation: ntfFadeIn .22s ease; }

/* Admin tezkor amallar — fonsiz oddiy ssilkalar, har biri bir qatorda */
.admin-actions { display: flex; flex-direction: column; }
.admin-action-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 4px;
    color: #2848d4;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(229, 72, 69, .14);
}
.admin-actions > .admin-action-link:last-child { border-bottom: 0; }
.admin-action-link svg { flex: 0 0 auto; color: #e5484d; }
.admin-action-link:hover { color: #c2185b; text-decoration: underline; }
[data-bs-theme="dark"] .admin-action-link { color: #8aa4ff; }
[data-bs-theme="dark"] .admin-action-link:hover { color: #ff9db0; }
[data-bs-theme="dark"] .admin-only {
    border-color: #b3413f;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(229, 72, 69, .06),
            rgba(229, 72, 69, .06) 10px,
            rgba(229, 72, 69, .11) 10px,
            rgba(229, 72, 69, .11) 20px
        );
}
@media (min-width: 992px) {
    .uz-side-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 56px;
        left: 0;
        width: 340px;
        height: calc(100vh - 56px);
        z-index: 1015;
        background: #fff;
        border-right: 1px solid #eef0f6;
        box-shadow: 2px 0 14px rgba(0, 0, 0, .04);
    }
    /* Admin sahifada chap navbar yashirinadi (admin shell to'liq kenglikda) */
    body.is-admin-page .uz-side-nav {
        display: none !important;
    }
    .uz-side-nav__inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        padding: 14px 12px 18px;
        overflow-y: auto;
    }
    .uz-side-nav__head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid #eef0f6;
    }
    .uz-side-nav__title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: #6b7488;
    }
    .uz-side-nav__list {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 8px;
    }
    /* Pastdagi reklama kartochkasi — navbar oxirida (auto-margin top) */
    .uz-side-nav__promo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding: 10px 12px;
        border-radius: 12px;
        background: linear-gradient(135deg, #eef2ff 0%, #f3eaff 100%);
        border: 1px solid #e1e7ff;
        text-decoration: none;
        color: inherit;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .uz-side-nav__promo:hover {
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(106, 130, 251, .18);
    }
    .uz-side-nav__promo-logo {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background-color: #fff;
        background-position: center;
        background-size: 28px 28px;
        background-repeat: no-repeat;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    }
    .uz-side-nav__promo-body {
        flex: 1 1 auto;
        min-width: 0;
    }
    .uz-side-nav__promo-title {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .3px;
        color: #2848d4;
    }
    .uz-side-nav__promo-text {
        font-size: 11.5px;
        color: #5a657f;
        line-height: 1.3;
        margin-top: 2px;
    }
    [data-bs-theme="dark"] .uz-side-nav__promo {
        background: linear-gradient(135deg, #1e2435 0%, #2a1f3d 100%);
        border-color: #2e3650;
    }
    [data-bs-theme="dark"] .uz-side-nav__promo:hover {
        box-shadow: 0 6px 16px rgba(106, 130, 251, .35);
    }
    [data-bs-theme="dark"] .uz-side-nav__promo-logo {
        background-color: #161a26;
    }
    [data-bs-theme="dark"] .uz-side-nav__promo-title {
        color: #a5b8ff;
    }
    [data-bs-theme="dark"] .uz-side-nav__promo-text {
        color: #8a93a8;
    }
    .uz-nav-link {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 12px;
        border-radius: 10px;
        color: #2c3349;
        font-size: 13.5px;
        font-weight: 500;
        text-decoration: none;
        position: relative;
        transition: background-color .15s ease, color .15s ease, transform .15s ease;
    }
    .uz-nav-link:hover {
        background: #eef2ff;
        color: #2848d4;
        text-decoration: none;
    }
    .uz-nav-link.is-active {
        background: linear-gradient(135deg, #6a82fb 0%, #4f6df0 100%);
        color: #fff;
        box-shadow: 0 6px 16px rgba(106,130,251,.32);
    }
    .uz-nav-link.is-active .uz-nav-link__icon { color: #fff; }
    .uz-nav-link__icon {
        flex-shrink: 0;
        color: #5a657f;
        transition: color .15s ease;
    }
    .uz-nav-link:hover .uz-nav-link__icon { color: #2848d4; }
    .uz-nav-link__label {
        flex: 1 1 auto;
        line-height: 1.2;
    }
    .uz-nav-link__badge {
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        background: #ff5b6c;
        color: #fff;
        border-radius: 999px;
        line-height: 1.4;
    }
    .uz-nav-link.is-active .uz-nav-link__badge { background: rgba(255,255,255,.28); }

    .uz-nav-link--red {
        color: #d6336c;
    }
    .uz-nav-link--red .uz-nav-link__icon { color: #d6336c; }
    .uz-nav-link--red:hover {
        background: #ffe9f0;
        color: #c2185b;
    }
    .uz-nav-link--red:hover .uz-nav-link__icon { color: #c2185b; }

    /* Sidebar offcanvas (hamburger) endi desktopda ham faol —
       body padding va navbar pozitsiyasi tabiiy holatda qoldiriladi.
       .sidebar-toggle barcha o'lchamlarda ko'rinishi uchun yashirilmaydi. */

    /* Dark theme variant */
    [data-bs-theme="dark"] .uz-side-nav {
        background: linear-gradient(180deg, #161a26 0%, #11141d 100%);
        border-right-color: #232838;
        box-shadow: 2px 0 14px rgba(0,0,0,.4);
    }
    [data-bs-theme="dark"] .uz-side-nav__head { border-bottom-color: #232838; }
    [data-bs-theme="dark"] .uz-side-nav__title { color: #8a93a8; }
    [data-bs-theme="dark"] .uz-nav-link {
        color: #d2d7e6;
    }
    [data-bs-theme="dark"] .uz-nav-link__icon { color: #8a93a8; }
    [data-bs-theme="dark"] .uz-nav-link:hover {
        background: #1f2533;
        color: #c3d0ff;
    }
    [data-bs-theme="dark"] .uz-nav-link:hover .uz-nav-link__icon { color: #c3d0ff; }
    [data-bs-theme="dark"] .uz-nav-link.is-active {
        background: linear-gradient(135deg, #4f6df0 0%, #3b56cf 100%);
        color: #fff;
        box-shadow: 0 6px 16px rgba(79,109,240,.45);
    }
    [data-bs-theme="dark"] .uz-nav-link--red { color: #ff7a98; }
    [data-bs-theme="dark"] .uz-nav-link--red .uz-nav-link__icon { color: #ff7a98; }
    [data-bs-theme="dark"] .uz-nav-link--red:hover { background: #2b1620; color: #ffadc0; }
    [data-bs-theme="dark"] .uz-nav-link--red:hover .uz-nav-link__icon { color: #ffadc0; }
}

/* Wider screens: a touch more breathing room */
@media (min-width: 1400px) {
    :root { --uz-sidenav-width: 260px; }
}

/* ===== Bildirishnomalar sahifasi — bitta chiroyli karta ===== */
.ntf-page { overflow: hidden; border-radius: 16px !important; }
.ntf-page__head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 8px; }
.ntf-page__ico { color: var(--w11-accent, #2563eb); flex: 0 0 auto; }
.ntf-page__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--w11-text-primary, #1f1f1f); }
.ntf-page .ntf-tabs { margin: 0 12px 6px !important; }
.ntf-page__foot { padding: 12px 14px; border-top: 1px solid var(--w11-divider, #eef0f2); }
.ntf-page__foot .ntf-more-wrap { margin: 0; }
.ntf-item--static { cursor: default; }
.ntf-item--static:hover { background: transparent; }
.ntf-adm { color: var(--w11-accent, #2563eb); text-decoration: none; }
.ntf-adm:hover { text-decoration: underline; }