/* ============================================================================
   DSAT Booster — YAGONA KOMPONENTLAR (BOSQICH 2.2)
   ----------------------------------------------------------------------------
   Tugmalar, kartalar, badge, input, modal, toast, tab, progress, empty state,
   skeleton — hammasi shu yerda, tokenlar orqali. Har sahifa o'zicha yasamasin.

   QO'ShIMChA: bu fayl faqat YANGI klasslar qo'shadi (.dsat-btn, .dsat-card ...).
   Mavjud Bootstrap klasslari buzilmaydi — asta-sekin ko'chirib o'tiladi.

   Barcha ranglar dsat-tokens.css dagi --dsat-* o'zgaruvchilaridan keladi,
   shuning uchun light/dark temada avtomatik moslashadi.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1. TUGMALAR (2.2)
   primary / secondary / ghost / danger / disabled / loading
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;                       /* 2.11: tegish maydoni ≥44px */
    padding: 0 var(--sp-5);
    font-size: var(--fs-14);
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s,
                transform .1s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.dsat-btn:active:not(:disabled) { transform: translateY(1px); }

/* primary — asosiy harakat */
.dsat-btn--primary {
    background: var(--dsat-link);
    color: #fff;                            /* #1d4ed8 fonida 6.70:1 */
    box-shadow: var(--sh-sm);
}
.dsat-btn--primary:hover:not(:disabled) {
    background: var(--dsat-accent);
    color: #fff;
}

/* secondary — ikkinchi darajali */
.dsat-btn--secondary {
    background: var(--dsat-surface, #fff);
    color: var(--dsat-text);
    border-color: var(--dsat-border, #d8dbe6);
}
.dsat-btn--secondary:hover:not(:disabled) {
    border-color: var(--dsat-accent);
    color: var(--dsat-link);
}

/* ghost — shaffof, faqat matn */
.dsat-btn--ghost {
    background: transparent;
    color: var(--dsat-text-muted);
    border-color: transparent;
}
.dsat-btn--ghost:hover:not(:disabled) {
    background: var(--dsat-soft, rgba(79, 70, 229, .08));
    color: var(--dsat-text);
}

/* danger — o'chirish kabi xavfli harakat */
.dsat-btn--danger {
    background: var(--dsat-danger-ink);
    color: #fff;
}
.dsat-btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

/* disabled — 2.11: kulrang + cursor, holat faqat rang bilan emas */
.dsat-btn:disabled,
.dsat-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* loading — spinner */
.dsat-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.dsat-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: dsat-spin .6s linear infinite;
}
@keyframes dsat-spin { to { transform: rotate(360deg); } }

/* o'lchamlar */
.dsat-btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--fs-12); }
.dsat-btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--fs-16); }
.dsat-btn--block { width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
   2. KARTALAR (2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-card {
    background: var(--dsat-surface, #fff);
    border: 1px solid var(--dsat-border, #e5e7ef);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--sp-5);
}
.dsat-card--flat { box-shadow: none; }
.dsat-card--pad-sm { padding: var(--sp-3); }
.dsat-card--pad-lg { padding: var(--sp-6); }
.dsat-card__title {
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--dsat-text-strong);
    margin: 0 0 var(--sp-2);
}
.dsat-card__meta {
    font-size: var(--fs-12);
    color: var(--dsat-text-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. BADGE (2.2)
   2.11: holat FAQAT rang bilan emas — ikonka ham bor
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-12);
    font-weight: 700;
    line-height: 1;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
}
.dsat-badge--ok    { background: rgba(5,150,105,.12);  color: var(--dsat-success-ink); border-color: rgba(5,150,105,.3); }
.dsat-badge--warn  { background: rgba(217,119,6,.14);  color: var(--dsat-warn-ink);    border-color: rgba(217,119,6,.32); }
.dsat-badge--danger{ background: rgba(190,18,60,.12);  color: var(--dsat-danger-ink);  border-color: rgba(190,18,60,.3); }
.dsat-badge--info  { background: rgba(2,132,199,.12);  color: var(--dsat-info-ink);    border-color: rgba(2,132,199,.3); }
.dsat-badge--muted { background: rgba(100,116,139,.12);color: var(--dsat-text-muted);  border-color: rgba(100,116,139,.28); }


/* ══════════════════════════════════════════════════════════════════════════
   4. INPUT (2.2) — fokus va xato holatlari
   2.11: xato faqat qizil chegara bilan emas, MATN bilan ham
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-field { margin-bottom: var(--sp-4); }
.dsat-field__label {
    display: block;
    font-size: var(--fs-12);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dsat-text-muted);
    margin-bottom: var(--sp-2);
}
.dsat-input {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--sp-3);
    font-size: var(--fs-14);
    font-family: inherit;
    color: var(--dsat-text);
    background: var(--dsat-surface, #fff);
    border: 1.5px solid var(--dsat-border, #d8dbe6);
    border-radius: var(--r-md);
    transition: border-color .15s, box-shadow .15s;
}
.dsat-input::placeholder { color: var(--dsat-text-muted); opacity: .8; }
.dsat-input:focus {
    outline: none;
    border-color: var(--dsat-accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
}
/* XATO HOLATI — chegara + matn + ikonka (rangga bog'liq emas) */
.dsat-input.is-invalid,
.dsat-input[aria-invalid="true"] {
    border-color: var(--dsat-danger-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239f1239'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a.9.9 0 01.9.9v3.6a.9.9 0 01-1.8 0V4.9A.9.9 0 018 4zm0 7.6a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 38px;
}
.dsat-field__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--dsat-danger-ink);
}
.dsat-field__error::before { content: "\26A0"; font-size: 13px; }  /* ⚠ ikonka */
.dsat-field__hint {
    margin-top: 6px;
    font-size: var(--fs-12);
    color: var(--dsat-text-muted);
}


/* ══════════════════════════════════════════════════════════════════════════
   5. MODAL (2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-modal { z-index: var(--z-modal); }
.dsat-modal__dialog {
    max-width: 520px;
    margin: 6vh auto;
}
.dsat-modal__content {
    background: var(--dsat-surface, #fff);
    border: 1px solid var(--dsat-border, #e5e7ef);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.dsat-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--dsat-border, #eef0f6);
}
.dsat-modal__title {
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--dsat-text-strong);
    margin: 0;
}
.dsat-modal__body   { padding: var(--sp-5); color: var(--dsat-text); }
.dsat-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--dsat-border, #eef0f6);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. TOAST (2.2) — bildirishnoma
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-toast-wrap {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: none;
}
.dsat-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    min-width: 260px;
    max-width: 380px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--dsat-surface, #fff);
    border: 1px solid var(--dsat-border, #e5e7ef);
    border-left: 4px solid var(--dsat-accent);
    box-shadow: var(--sh-md);
    color: var(--dsat-text);
    font-size: var(--fs-14);
    pointer-events: auto;
    animation: dsat-toast-in .22s ease-out;
}
.dsat-toast--ok     { border-left-color: var(--dsat-success-ink); }
.dsat-toast--error  { border-left-color: var(--dsat-danger-ink); }
.dsat-toast--warn   { border-left-color: var(--dsat-warn-ink); }
.dsat-toast__icon   { flex: none; font-size: 16px; line-height: 1.3; }
.dsat-toast--ok    .dsat-toast__icon { color: var(--dsat-success-ink); }
.dsat-toast--error .dsat-toast__icon { color: var(--dsat-danger-ink); }
.dsat-toast--warn  .dsat-toast__icon { color: var(--dsat-warn-ink); }
@keyframes dsat-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. TABS (2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--dsat-border, #e5e7ef);
    overflow-x: auto;
    scrollbar-width: none;
}
.dsat-tabs::-webkit-scrollbar { display: none; }
.dsat-tab {
    flex: none;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--dsat-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.dsat-tab:hover { color: var(--dsat-text); }
.dsat-tab[aria-selected="true"] {
    color: var(--dsat-link);
    border-bottom-color: var(--dsat-link);
}


/* ══════════════════════════════════════════════════════════════════════════
   8. PROGRESS (2.2)
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-progress {
    height: 8px;
    width: 100%;
    background: var(--dsat-progress-bg, #e8eaf2);
    border-radius: var(--r-pill);
    overflow: hidden;
}
.dsat-progress__bar {
    height: 100%;
    background: var(--dsat-accent);
    border-radius: var(--r-pill);
    transition: width .3s ease;
}
.dsat-progress__bar--ok    { background: var(--dsat-success-ink); }
.dsat-progress__bar--warn  { background: var(--dsat-warn-ink); }
.dsat-progress__bar--danger{ background: var(--dsat-danger-ink); }


/* ══════════════════════════════════════════════════════════════════════════
   9. EMPTY STATE (2.2)
   Spec qoidasi: ma'lumot yo'q bo'lsa — chiroyli empty state, SOXTA ma'lumot emas
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
    gap: var(--sp-3);
}
.dsat-empty__icon {
    font-size: 40px;
    line-height: 1;
    opacity: .65;
}
.dsat-empty__title {
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--dsat-text-strong);
    margin: 0;
}
.dsat-empty__text {
    font-size: var(--fs-14);
    color: var(--dsat-text-muted);
    max-width: 460px;
    margin: 0;
}
.dsat-empty__action { margin-top: var(--sp-2); }


/* ══════════════════════════════════════════════════════════════════════════
   10. SKELETON (2.2) — yuklanayotgan holat
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-skeleton {
    background: linear-gradient(90deg,
        var(--dsat-skeleton-a, #e9ebf2) 25%,
        var(--dsat-skeleton-b, #f4f5fa) 37%,
        var(--dsat-skeleton-a, #e9ebf2) 63%);
    background-size: 400% 100%;
    border-radius: var(--r-sm);
    animation: dsat-shimmer 1.3s ease-in-out infinite;
}
@keyframes dsat-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.dsat-skeleton--text  { height: 14px; margin-bottom: var(--sp-2); }
.dsat-skeleton--title { height: 24px; width: 45%; margin-bottom: var(--sp-3); }
.dsat-skeleton--card  { height: 120px; border-radius: var(--r-lg); }


/* ══════════════════════════════════════════════════════════════════════════
   11. QORONG'U TEMA — komponentlar uchun yuzalar (2.8)
   Sof qora emas: #12142a atrofida, kartalar fondan ajralib turadi
   ══════════════════════════════════════════════════════════════════════════ */
html[data-bs-theme='dark'] {
    --dsat-surface:      #171a33;   /* karta — fondan (#0f1020) ajralib turadi */
    --dsat-surface-2:    #1e2145;   /* ichki karta */
    --dsat-border:       #2c3055;
    --dsat-soft:         rgba(139, 147, 255, .14);
    --dsat-progress-bg:  #2c3055;
    --dsat-skeleton-a:   #22264a;
    --dsat-skeleton-b:   #2c3055;
}
html[data-bs-theme='light'],
:root {
    --dsat-surface:      #ffffff;
    --dsat-surface-2:    #f7f8fc;
    --dsat-border:       #e5e7ef;
    --dsat-soft:         rgba(79, 70, 229, .08);
    --dsat-progress-bg:  #e8eaf2;
    --dsat-skeleton-a:   #e9ebf2;
    --dsat-skeleton-b:   #f4f5fa;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. HARAKATNI CHEKLASH (2.9)
   Foydalanuvchi sozlamasida "kam harakat" yoqilgan bo'lsa — barcha
   animatsiya o'chadi. dsat-tokens.css da ham bor, bu yerda komponentlar uchun.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .dsat-btn,
    .dsat-progress__bar,
    .dsat-toast,
    .dsat-skeleton {
        animation: none !important;
        transition: none !important;
    }
    .dsat-btn:active { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. MOBIL (2.3) — tegish maydonlari va o'lchamlar
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dsat-btn { width: auto; }
    .dsat-btn--block { width: 100%; }
    .dsat-card { padding: var(--sp-4); border-radius: var(--r-md); }
    .dsat-modal__dialog { margin: 0; max-width: 100%; min-height: 100vh; }
    .dsat-modal__content { border-radius: 0; border: none; }
    .dsat-toast-wrap {
        left: var(--sp-3);
        right: var(--sp-3);
        bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    }
    .dsat-toast { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. SAHIFA SARLAVHASI (BOSQICH 2.3a)
   Bitta format: IKONKA + SARLAVHA + QISQA TAVSIF + ASOSIY TUGMA.
   PHP helper: dsatPageHeader() — includes/functions.php
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    background: var(--dsat-surface, #fff);
    border: 1px solid var(--dsat-border, #e5e7ef);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}
.dsat-pagehead__main {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-width: 0;                    /* uzun sarlavha sig'ishi uchun */
    flex: 1 1 320px;
}
.dsat-pagehead__icon {
    flex: none;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    background: var(--dsat-soft, rgba(79, 70, 229, .08));
    color: var(--dsat-link);
    font-size: 20px;
}
.dsat-pagehead__text { min-width: 0; }
.dsat-pagehead__eyebrow {
    font-size: var(--fs-12);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dsat-text-muted);
    margin-bottom: 3px;
}
.dsat-pagehead__title {
    font-size: var(--fs-24);
    font-weight: 800;
    line-height: 1.2;
    color: var(--dsat-text-strong);
    margin: 0;
    letter-spacing: -.02em;
    /* 2.3a: sarlavha ustma-ust tushmasligi uchun */
    overflow-wrap: break-word;
    word-break: break-word;
}
.dsat-pagehead__desc {
    font-size: var(--fs-14);
    color: var(--dsat-text-muted);
    margin: var(--sp-2) 0 0;
    max-width: 68ch;
    line-height: 1.5;
}
.dsat-pagehead__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.dsat-pagehead__action { flex: none; align-self: center; }

@media (max-width: 768px) {
    .dsat-pagehead { padding: var(--sp-4); border-radius: var(--r-md); }
    .dsat-pagehead__title { font-size: var(--fs-20); }
    .dsat-pagehead__icon { width: 40px; height: 40px; font-size: 17px; }
    .dsat-pagehead__action { width: 100%; }
    .dsat-pagehead__action .dsat-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. PACING — VAQT TAHLILI (BOSQICH 2.6a)
   mock-review.php. Ma'lumot: mock_results.question_times (2.5a).
   Holat FAQAT rang bilan emas, belgi + matn bilan ham ko'rsatiladi (2.11).
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-pace {
    background: var(--dsat-surface);
    border: 1px solid var(--dsat-border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.dsat-pace__head { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.dsat-pace__ic {
    flex: none; width: 42px; height: 42px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--dsat-soft); color: var(--dsat-link); font-size: 18px;
}
.dsat-pace__title { font-size: var(--fs-18); font-weight: 800; margin: 0; color: var(--dsat-text-strong); }
.dsat-pace__sub   { font-size: var(--fs-13); color: var(--dsat-text-muted); margin: 3px 0 0; }

/* Bo'limlar */
.dsat-pace__secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.dsat-pace__sec {
    border: 1px solid var(--dsat-border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    background: var(--dsat-surface-2, var(--dsat-surface));
}
.dsat-pace__sec-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.dsat-pace__sec-name { font-weight: 700; font-size: var(--fs-13); color: var(--dsat-text-strong); }
.dsat-pace__nums { font-size: var(--fs-13); color: var(--dsat-text-muted); margin: var(--sp-2) 0 6px; }
.dsat-pace__nums b { color: var(--dsat-text-strong); font-size: var(--fs-18); }
.dsat-pace__tgt { font-size: var(--fs-12); }

/* Holat belgisi — matn + belgi + rang (faqat rangga tayanmaydi) */
.dsat-pace__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--fs-11); font-weight: 800;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.dsat-pace__badge.is-ok   { background: rgba(16,185,129,.14);  color: var(--dsat-success-ink); }
.dsat-pace__badge.is-fast { background: rgba(245,158,11,.16);  color: var(--dsat-warn-ink); }
.dsat-pace__badge.is-slow { background: rgba(239,68,68,.14);   color: var(--dsat-danger-ink); }

/* O'lchagich: 66% chizig'i = mezon (1.0) */
.dsat-pace__bar {
    position: relative; height: 8px; border-radius: 999px;
    background: var(--dsat-border); overflow: hidden; margin: 6px 0;
}
.dsat-pace__bar > i { display: block; height: 100%; border-radius: 999px; background: var(--dsat-link); }
.dsat-pace__bar > u {
    position: absolute; top: -2px; width: 2px; height: 12px;
    background: var(--dsat-text-muted); opacity: .75;
}
.is-slow .dsat-pace__bar > i { background: #ef4444; }
.is-fast .dsat-pace__bar > i { background: #f59e0b; }
.is-ok   .dsat-pace__bar > i { background: #10b981; }
.dsat-pace__foot { font-size: var(--fs-11); color: var(--dsat-text-muted); }

/* Eng sekin savollar ro'yxati */
.dsat-pace__slow { margin-top: var(--sp-4); }
.dsat-pace__h4 { font-size: var(--fs-14); font-weight: 800; margin: 0 0 var(--sp-2); color: var(--dsat-text-strong); }
.dsat-pace__list { list-style: none; margin: 0; padding: 0; }
.dsat-pace__list li + li { border-top: 1px solid var(--dsat-border); }
.dsat-pace__list a {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 9px 6px; text-decoration: none; border-radius: 8px;
    color: var(--dsat-text); font-size: var(--fs-13);
}
.dsat-pace__list a:hover { background: var(--dsat-soft); }
.dsat-pace__qn    { font-weight: 800; min-width: 34px; color: var(--dsat-text-strong); }
.dsat-pace__qmeta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsat-text-muted); }
.dsat-pace__qres  { font-size: var(--fs-11); font-weight: 700; }
.dsat-pace__qres.is-ok  { color: var(--dsat-success-ink); }
.dsat-pace__qres.is-bad { color: var(--dsat-danger-ink); }
.dsat-pace__qtime { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--dsat-text-strong); }
.dsat-pace__note  { font-size: var(--fs-11); color: var(--dsat-text-muted); margin: var(--sp-3) 0 0; }

/* Har bir savol sarlavhasidagi vaqt belgisi */
.dsat-qtime {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-11); font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    background: var(--dsat-soft); color: var(--dsat-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dsat-qtime.is-slow { background: rgba(239,68,68,.14); color: var(--dsat-danger-ink); }
.dsat-qtime.is-fast { background: rgba(245,158,11,.16); color: var(--dsat-warn-ink); }
.dsat-qtime.is-ok   { background: rgba(16,185,129,.14); color: var(--dsat-success-ink); }

@media (max-width: 768px) {
    .dsat-pace { padding: var(--sp-3); border-radius: var(--r-md); }
    .dsat-pace__secs { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. CHALLENGE BANK (BOSQICH 2.7b)
   question-bank.php?challenge=1 — faqat tasdiqlangan qiyin savollar.
   ══════════════════════════════════════════════════════════════════════════ */
.dsat-challenge {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-radius: var(--r-lg);
    border: 1.5px solid color-mix(in srgb, var(--dsat-warn-ink) 45%, transparent);
    background: color-mix(in srgb, var(--dsat-warn-ink) 8%, var(--dsat-surface));
}
.dsat-challenge__ic {
    flex: none; width: 46px; height: 46px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--dsat-warn-ink);
    background: color-mix(in srgb, var(--dsat-warn-ink) 16%, transparent);
}
.dsat-challenge__body { min-width: 0; flex: 1; }
.dsat-challenge__title { font-size: var(--fs-18); font-weight: 800; margin: 0; color: var(--dsat-text-strong); }
.dsat-challenge__text  { font-size: var(--fs-13); color: var(--dsat-text-muted); margin: var(--sp-2) 0 0; max-width: 70ch; line-height: 1.55; }
.dsat-challenge__note  { font-size: var(--fs-12); color: var(--dsat-text-muted); margin: var(--sp-2) 0 0; }

.dsat-challenge__stats { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.dsat-challenge__stats > div { display: flex; flex-direction: column; }
.dsat-challenge__stats strong { font-size: var(--fs-20); font-weight: 800; color: var(--dsat-text-strong); line-height: 1.1; }
.dsat-challenge__stats small  { font-size: var(--fs-11); color: var(--dsat-text-muted); }

.dsat-challenge__exit {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: var(--sp-3);
    font-size: var(--fs-13); font-weight: 700;
    color: var(--dsat-link); text-decoration: none;
}
.dsat-challenge__exit:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .dsat-challenge { flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); }
    .dsat-challenge__stats { gap: var(--sp-3); }
}