/* ==========================================================================
   INTERAKTIV INTELLEKTUAL XARITA (.xtg) — XaritaTugunView
   Rasm emas, tugunlar: markaz + ta'rif, chap va o'ngga tarmoqlangan rangli
   shoxlar, har shoxda bandlar, pastda xulosa. Egri chiziqlar ustki SVG
   qatlamida (JS o'lchab chizadi). Har shoxning rangi — `--sh`.
   Ramka (breadcrumb, sarlavha yo'lakchasi, pager) didaktik.css dan.
   ========================================================================== */

.xtg-page { --xtg-radius: 24px; }

/* --- rejim tanlovi: Ko'rish / Eslash --- */
.xtg-rejim {
    display: inline-flex;
    gap: .2rem;
    padding: .26rem;
    border-radius: var(--radius-pill);
    background: var(--qogoz-2);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-sm);
}
.xtg-rejim__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--siyoh-3);
    font: 600 .86rem var(--font-display);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.xtg-rejim__btn svg { width: 15px; height: 15px; }
.xtg-rejim__btn:hover { color: var(--siyoh); }
.xtg-rejim__btn[aria-checked="true"] { background: var(--tur-rang); color: #fff; box-shadow: 0 6px 16px var(--tur-soya); }
.xarita-act[aria-pressed="true"] { background: var(--tur-rang-soft); border-color: var(--tur-rang-border); color: var(--tur-matn); }

/* --- panel: maslahat (ko'rish) yoki eslash hisobi --- */
.xtg-panel { margin: 0 0 1rem; }
.xtg-panel__hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .7rem 1rem;
    border-radius: var(--radius-md);
    background: var(--tur-card);
    border: 1px dashed var(--tur-rang-border);
    color: var(--siyoh-2);
    font-size: .88rem;
    line-height: 1.5;
}
.xtg-panel__hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--tur-rang); }
.xtg-panel__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tur-matn);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.xtg-panel__eslash {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr) auto;
    align-items: center;
    gap: .9rem 1.5rem;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--qogoz-2);
    border: 1px solid var(--tur-rang-border);
    box-shadow: var(--shadow-sm);
}
.xtg-panel__eslash.is-tugadi { background: linear-gradient(120deg, var(--tur-rang-soft), var(--qogoz-2) 60%); }
.xtg-panel__matn { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.xtg-panel__matn > span:last-child { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.xtg-panel__matn b { font-family: var(--font-display); font-size: .98rem; color: var(--siyoh); }
.xtg-panel__matn small { font-size: .8rem; color: var(--siyoh-3); line-height: 1.45; }
.xtg-panel__kubok {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #b45309);
    color: #451a03;
}
.xtg-panel__kubok.is-oddiy { background: var(--tur-rang-soft); color: var(--tur-rang); border: 1px solid var(--tur-rang-border); }
.xtg-panel__kubok svg { width: 20px; height: 20px; }
.xtg-panel__olcham { display: flex; flex-direction: column; gap: .35rem; }
.xtg-panel__chiziq { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--qogoz-3); }
.xtg-panel__chiziq i { display: block; height: 100%; transition: flex .4s var(--ease-out); }
.xtg-panel__chiziq .is-ha { background: var(--maydon); }
.xtg-panel__chiziq .is-yoq { background: var(--gil); }
.xtg-panel__chiziq .is-qoldi { background: var(--qogoz-4); }
.xtg-panel__olcham small { font-size: .76rem; color: var(--siyoh-3); }
.xtg-panel__olcham small b { font-family: var(--font-display); }
.xtg-panel__olcham small b.is-ha { color: var(--maydon-2); }
.xtg-panel__olcham small b.is-yoq { color: var(--gil); }
.xtg-panel__amal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.xtg-panel__amal .btn svg { width: 14px; height: 14px; }

/* --- sahna --- */
.xtg-stage {
    position: relative;
    padding: clamp(1.1rem, 2.6vw, 2.2rem);
    border-radius: var(--xtg-radius);
    background:
        radial-gradient(circle at 1px 1px, rgba(111, 79, 216, 0.10) 1px, transparent 1.4px) 0 0 / 22px 22px,
        linear-gradient(180deg, #fff, #fbfaff);
    border: 1px solid var(--chiziq);
    box-shadow: var(--shadow-md);
    transform-origin: center;
    transition: transform 1.1s cubic-bezier(.2, .7, .1, 1);
}
.xtg-stage.is-flying { z-index: 5; }
.xtg-stage.is-ochilish { animation: xtg-ochil .7s var(--ease-out) both; }
@keyframes xtg-ochil { from { opacity: 0; transform: scale(.97); } }
.xtg-stage:fullscreen { overflow: auto; border-radius: 0; padding: clamp(1.5rem, 3vw, 3rem); background: #fff; }

.xtg { position: relative; }
.xtg__chiziqlar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}
.xtg__chiziqlar path {
    fill: none;
    stroke-linecap: round;
    opacity: .9;
    transition: opacity .3s ease;
}
.xtg__chiziqlar path.is-uzuq { stroke-dasharray: .018 .018; opacity: .6; }
.xtg__chiziqlar path.is-chiz {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: xtg-chiz .8s var(--ease-out) forwards;
    animation-delay: calc(.15s + var(--i) * .13s);
}
.xtg__chiziqlar path.is-chiz.is-uzuq { stroke-dasharray: 1; }
@keyframes xtg-chiz { to { stroke-dashoffset: 0; } }
.xtg__chiziqlar path.is-xira { opacity: .12; }

/* ta'rif — markaz ustida */
.xtg__tushuncha {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
    padding: .8rem 1.2rem .9rem;
    border-radius: 16px;
    background: #fff;
    border: 2px solid var(--tur-rang-border);
    box-shadow: 0 10px 26px var(--tur-glow);
    text-align: center;
}
.xtg__tushuncha small {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tur-matn);
}
.xtg__tushuncha small svg { width: 13px; height: 13px; }
.xtg__tushuncha p { margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.45; color: var(--siyoh); }

.xtg__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem clamp(2.25rem, 5vw, 4.5rem);
}
.xtg__tomon { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 1.9rem); min-width: 0; }

/* markaz */
.xtg__markaz {
    width: clamp(150px, 14vw, 196px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem;
    text-align: center;
    background: radial-gradient(circle at 35% 28%, #fff, #f3efff 70%);
    border: 4px solid var(--tur-rang);
    box-shadow: 0 0 0 10px var(--tur-rang-soft), 0 22px 44px var(--tur-soya);
    animation: xtg-markaz .7s var(--ease-spring) both;
}
@keyframes xtg-markaz { from { transform: scale(.6); opacity: 0; } }
.xtg__markaz-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--tur-rang);
    color: #fff;
    box-shadow: 0 8px 18px var(--tur-soya);
}
.xtg__markaz-icon svg { width: 28px; height: 28px; }
.xtg__markaz b { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.12; color: var(--siyoh); }

/* shox */
.xtg-shox {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
    transition: opacity .3s ease, filter .3s ease;
    animation: xtg-shox .6s var(--ease-out) both;
    animation-delay: calc(.2s + var(--i) * .13s);
}
@keyframes xtg-shox { from { opacity: 0; transform: translateY(10px); } }
.xtg__tomon--chap .xtg-shox { flex-direction: row-reverse; }
.xtg[data-fokus] .xtg-shox:not(.is-fokus) { opacity: .22; filter: grayscale(.7); }

.xtg-shox__nom {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem .5rem .5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--sh);
    color: #fff;
    font: 700 .9rem/1.15 var(--font-display);
    white-space: nowrap;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--sh) 32%, transparent);
    cursor: pointer;
    transition: transform .25s var(--ease-spring), box-shadow .25s ease;
}
.xtg-shox__nom b, .xtg-shox__nom small { color: inherit; }
.xtg-shox__nom:hover { transform: translateY(-2px) scale(1.03); }
.xtg-shox__nom[aria-pressed="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sh) 25%, transparent), 0 12px 26px color-mix(in srgb, var(--sh) 40%, transparent); }
.xtg-shox__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}
.xtg-shox__icon svg { width: 17px; height: 17px; }
.xtg-shox__nom small {
    font: 700 .68rem var(--font-mono);
    padding: .08rem .42rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.24);
}

.xtg-shox__bandlar {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* band */
.xtg-band { display: flex; flex-direction: column; animation: xtg-band .5s var(--ease-out) both; animation-delay: calc(.45s + var(--i) * .13s + var(--k) * .05s); }
@keyframes xtg-band { from { opacity: 0; transform: translateX(var(--xtg-kel, 10px)); } }
.xtg__tomon--chap .xtg-band { --xtg-kel: -10px; }
.xtg-band__btn {
    position: relative;
    display: grid;
    grid-template-rows: auto 0fr;
    width: 100%;
    padding: .5rem .85rem;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff);
    border-left: 4px solid var(--sh);
    box-shadow: var(--shadow-sm);
    color: var(--siyoh);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: grid-template-rows .3s var(--ease-out), box-shadow .2s ease, transform .2s var(--ease-spring), background .2s ease;
}
.xtg__tomon--chap .xtg-band__btn { text-align: right; border-left: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff); border-right: 4px solid var(--sh); }
.xtg-band__btn:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--sh) 18%, transparent); transform: translateY(-1px); }
.xtg-band__nom { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.xtg-band__izoh { min-height: 0; overflow: hidden; font-size: .82rem; line-height: 1.45; color: var(--siyoh-2); }
.xtg-band__izoh > span { display: block; padding-top: .3rem; }
.xtg-band.is-ochiq .xtg-band__btn { grid-template-rows: auto 1fr; background: color-mix(in srgb, var(--sh) 5%, #fff); }
.xtg-band__yopiq { display: none; }
.xtg-band__belgi { display: none; }

/* --- eslash rejimi --- */
.xtg[data-rejim="eslash"] .xtg-band:not(.is-ochiq) .xtg-band__nom { visibility: hidden; }
.xtg[data-rejim="eslash"] .xtg-band:not(.is-ochiq) .xtg-band__yopiq {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sh) 9%, #fff) 0 9px, #fff 9px 18px);
    color: var(--sh);
    font: 800 1.05rem var(--font-display);
}
.xtg[data-rejim="eslash"] .xtg-band:not(.is-ochiq) .xtg-band__btn:hover .xtg-band__yopiq { background: color-mix(in srgb, var(--sh) 14%, #fff); }
.xtg-band__baho { display: none; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.xtg__tomon--chap .xtg-band__baho { justify-content: flex-end; }
.xtg[data-rejim="eslash"] .xtg-band.is-ochiq:not(.is-baholangan) .xtg-band__baho { display: flex; animation: xtg-shox .3s var(--ease-out); }
.xtg-baho {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid;
    background: #fff;
    font: 600 .76rem var(--font-display);
    cursor: pointer;
    transition: transform .2s var(--ease-spring), background .2s ease;
}
.xtg-baho svg { width: 13px; height: 13px; }
.xtg-baho:hover { transform: translateY(-1px); }
.xtg-baho.is-ha { color: var(--maydon-2); border-color: color-mix(in srgb, var(--maydon) 45%, #fff); }
.xtg-baho.is-ha:hover { background: var(--maydon-yumshoq); }
.xtg-baho.is-yoq { color: var(--gil); border-color: color-mix(in srgb, var(--gil) 40%, #fff); }
.xtg-baho.is-yoq:hover { background: var(--gil-yumshoq); }

.xtg[data-rejim="eslash"] .xtg-band.is-baholangan .xtg-band__belgi {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    font: 800 .7rem/1 var(--font-display);
    font-style: normal;
    box-shadow: 0 0 0 2px #fff;
}
.xtg__tomon--chap .xtg[data-rejim="eslash"] .xtg-band.is-baholangan .xtg-band__belgi,
.xtg[data-rejim="eslash"] .xtg__tomon--chap .xtg-band.is-baholangan .xtg-band__belgi { right: auto; left: -7px; }
.xtg[data-rejim="eslash"] .xtg-band.is-esladi .xtg-band__belgi { background: var(--maydon); }
.xtg[data-rejim="eslash"] .xtg-band.is-esladi .xtg-band__belgi::before { content: '✓'; }
.xtg[data-rejim="eslash"] .xtg-band.is-eslamadi .xtg-band__belgi { background: var(--gil); }
.xtg[data-rejim="eslash"] .xtg-band.is-eslamadi .xtg-band__belgi::before { content: '✕'; }
.xtg[data-rejim="eslash"] .xtg-band.is-esladi .xtg-band__btn { background: color-mix(in srgb, var(--maydon) 7%, #fff); }
.xtg[data-rejim="eslash"] .xtg-band.is-eslamadi .xtg-band__btn { background: color-mix(in srgb, var(--gil) 7%, #fff); }

/* xulosa */
.xtg__xulosa {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 760px;
    margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
    padding: .8rem 1.2rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #cf4a37, #c98a12, #2b9457, #1d5fd6, #6f4fd8);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(.92rem, 1.3vw, 1.05rem);
    color: var(--siyoh);
    text-align: center;
}
.xtg__xulosa svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--oltin); }

/* --- ro'yxat va mavzu sahifasidagi kichik nusxa --- */
.xtg-mini { display: block; width: 100%; height: 100%; }
/* didaktik.css dagi `.mavzu-card__cover svg { 36px }` ikonka uchun — chizma to'liq egallasin */
.mavzu-card__cover .xtg-mini { width: 100%; height: 100%; }
.mavzu-card__cover--xtg.is-drawn { display: block; }
.mavzu-card__cover--xtg {
    position: relative;
    height: 150px;
    padding: .6rem;
    background:
        radial-gradient(circle at 1px 1px, rgba(111, 79, 216, 0.12) 1px, transparent 1.4px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fff, #f7f4ff);
}
.mavzu-hero__rasm--xtg {
    display: block;
    padding: .75rem;
    background:
        radial-gradient(circle at 1px 1px, rgba(111, 79, 216, 0.12) 1px, transparent 1.4px) 0 0 / 16px 16px,
        linear-gradient(180deg, #fff, #f7f4ff);
}
.mavzu-hero__rasm--xtg .xtg-mini { aspect-ratio: 320 / 190; height: auto; }

/* --- tor ekran: bitta ustun, chiziqlar o'rniga chap chiziq --- */
@media (max-width: 980px) {
    .xtg__chiziqlar { display: none; }
    .xtg__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .xtg__markaz { order: -1; margin: 0 auto; width: 150px; }
    .xtg__tomon { gap: 1.25rem; }
    .xtg-shox,
    .xtg__tomon--chap .xtg-shox { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .xtg-shox__bandlar {
        width: 100%;
        padding-left: 1rem;
        margin-left: 1.05rem;
        border-left: 3px solid color-mix(in srgb, var(--sh) 45%, #fff);
    }
    .xtg__tomon--chap .xtg-band__btn { text-align: left; border-right: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff); border-left: 4px solid var(--sh); }
    .xtg__tomon--chap .xtg-band__baho { justify-content: flex-start; }
    .xtg[data-rejim="eslash"] .xtg__tomon--chap .xtg-band.is-baholangan .xtg-band__belgi { left: auto; right: -7px; }
    .xtg__tomon--chap .xtg-band { --xtg-kel: 10px; }
    .xtg-panel__eslash { grid-template-columns: 1fr; }
    .xtg-panel__amal { justify-content: flex-start; }
}
@media (max-width: 760px) {
    .xtg-rejim__btn span { display: none; }
    .xtg-rejim__btn { padding: .45rem .7rem; }
    .xtg__tushuncha { margin-bottom: 1.25rem; }
    .xtg-shox__bandlar { margin-left: .6rem; padding-left: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .xtg__markaz, .xtg-shox, .xtg-band, .xtg-stage.is-ochilish { animation: none; }
    .xtg__chiziqlar path.is-chiz { animation: none; stroke-dashoffset: 0; }
    .xtg-stage { transition: none; }
}

/* --- chop etish: barcha bandlar izohi bilan, oq qog'ozda --- */
@media print {
    .navbar, .footer, .bg-mesh, .fon, .scroll-top, #app-chat,
    .xtg-page .breadcrumb, .xtg-page .xarita-bar__actions, .xtg-panel,
    .xtg-page .xarita-caption, .xtg-page .xarita-pager, .xtg-page .xarita-related { display: none !important; }
    body { background: #fff !important; }
    .app-main { padding-top: 0 !important; }
    .xtg-stage { box-shadow: none; border: 0; padding: 0; background: #fff; }
    .xtg-shox, .xtg-band, .xtg__markaz { animation: none !important; opacity: 1 !important; filter: none !important; }
    .xtg__chiziqlar path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
    .xtg-band__btn { grid-template-rows: auto 1fr !important; box-shadow: none; break-inside: avoid; }
    .xtg-band__nom { visibility: visible !important; }
    .xtg-band__yopiq, .xtg-band__baho, .xtg-band__belgi { display: none !important; }
    .xtg-shox__nom { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xtg__markaz { box-shadow: none; }
}

/* ==========================================================================
   QIYOSIY XARITA (.xqs) — XaritaQiyosView («Sport o'yinlari»)
   Markaz → ikki oila → har oilada uchta sport kartasi (haqiqiy maydon
   chizmasi bilan). Rejimlar: tanishish (tafsil oynasi), qiyoslash (mezon
   bo'yicha ko'rinish), taxmin (slayder). Har sportning rangi — `--sp`,
   maydon zaxirasining rangi — `--fon`. Maydon chizmasi (.mdn) — views/maydonlar.js.
   ========================================================================== */

.xqs-page { --xtg-radius: 24px; }
.mdn { display: block; width: 100%; height: 100%; }
.mdn line, .mdn rect, .mdn circle, .mdn path { vector-effect: non-scaling-stroke; }

.xqs { position: relative; }

.xqs__tushuncha {
    max-width: 640px;
    margin: 0 auto 1.1rem;
    padding: .75rem 1.2rem .85rem;
    border-radius: 16px;
    background: #fff;
    border: 2px solid var(--tur-rang-border);
    box-shadow: 0 10px 26px var(--tur-glow);
    text-align: center;
}
.xqs__tushuncha small { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--tur-matn); }
.xqs__tushuncha small svg { width: 13px; height: 13px; }
.xqs__tushuncha p { margin: .3rem 0 0; font-family: var(--font-display); font-size: clamp(.92rem, 1.25vw, 1.04rem); line-height: 1.45; color: var(--siyoh); }

/* markaz — to'p tasvirli «medal» */
.xqs__markaz {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: .55rem 1.35rem .55rem .55rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 3px solid var(--tur-rang);
    box-shadow: 0 0 0 8px var(--tur-rang-soft), 0 18px 36px var(--tur-soya);
    animation: xtg-markaz .7s var(--ease-spring) both;
}
.xqs__markaz-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--tur-rang); color: #fff; }
.xqs__markaz-icon svg { width: 28px; height: 28px; }
.xqs__markaz b { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--siyoh); }
.xqs__markaz small { font: 600 .72rem var(--font-mono); color: var(--tur-matn); padding: .15rem .5rem; border-radius: var(--radius-pill); background: var(--tur-rang-soft); }

/* bog'lovchilar — qatorlar orasidagi SVG */
.xqs__ulagich { display: block; width: 100%; overflow: visible; }
.xqs__ulagich path { fill: none; stroke: var(--tur-rang); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.xqs__ulagich--bosh { height: clamp(34px, 5vw, 56px); }
.xqs__ulagich--oila { height: 34px; }

.xqs__oilalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.xqs-oila { min-width: 0; animation: xtg-shox .6s var(--ease-out) both; }
.xqs-oila[data-oila="darvoza"] { animation-delay: .12s; }
.xqs-oila__bosh {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: 0 auto;
    max-width: 440px;
    padding: .65rem .9rem;
    border-radius: 16px;
    background: var(--tur-card);
    border: 1.5px solid var(--tur-rang-border);
}
.xqs-oila__belgi { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: #fff; color: var(--tur-rang); border: 1px solid var(--tur-rang-border); }
.xqs-oila__belgi svg { width: 19px; height: 19px; }
.xqs-oila__bosh b { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--siyoh); }
.xqs-oila__bosh small { display: block; margin-top: .15rem; font-size: .78rem; line-height: 1.45; color: var(--siyoh-3); }
.xqs-oila__sportlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }

/* sport kartasi */
.xqs-sport {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--chiziq);
    border-top: 4px solid var(--sp);
    box-shadow: var(--shadow-sm);
    color: var(--siyoh);
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s var(--ease-spring), box-shadow .25s ease, border-color .25s ease, opacity .3s ease;
    animation: xtg-band .5s var(--ease-out) both;
    animation-delay: calc(.3s + var(--i) * .07s);
}
.xqs-sport:hover { transform: translateY(-3px); box-shadow: 0 14px 28px color-mix(in srgb, var(--sp) 22%, transparent); }
.xqs-sport:focus-visible { outline: 3px solid color-mix(in srgb, var(--sp) 55%, #fff); outline-offset: 2px; }
.xqs-sport__maydon { display: block; height: clamp(74px, 7vw, 96px); padding: .35rem; background: var(--fon); }
.xqs-sport__nom { display: block; padding: .5rem .7rem .15rem; }
.xqs-sport__nom b { font-family: var(--font-display); font-size: .95rem; }
.xqs-sport__chiplar { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0 .7rem .65rem; }
.xqs-sport__chiplar span { display: inline-flex; align-items: center; gap: .2rem; padding: .08rem .45rem; border-radius: var(--radius-pill); background: var(--qogoz-2); color: var(--siyoh-3); font: 600 .66rem var(--font-mono); white-space: nowrap; }
.xqs-sport__chiplar svg { width: 11px; height: 11px; }
.xqs.has-tanlangan .xqs-sport:not(.is-tanlangan) { opacity: .55; }
.xqs-sport.is-tanlangan { border-color: var(--sp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp) 30%, transparent), 0 16px 30px color-mix(in srgb, var(--sp) 25%, transparent); transform: translateY(-3px); }

/* qiyoslash: kartadagi qiymat nishoni */
.xqs-sport__qiymat {
    position: absolute;
    left: 50%;
    top: calc(4px + clamp(74px, 7vw, 96px) / 2);
    translate: -50% -50%;
    display: none;
    max-width: calc(100% - .8rem);
    padding: .25rem .6rem;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 2px solid var(--sp);
    color: var(--siyoh);
    font: 700 .78rem var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 6px 16px rgba(15, 31, 56, 0.25);
}
.xqs[data-rejim="qiyoslash"] .xqs-sport__qiymat:not(:empty) { display: block; animation: xtg-shox .35s var(--ease-out) both; }

/* taxmin: savol qaysi sportga tegishli bo'lsa, o'sha karta yonadi */
.xqs-sport__taxmin { position: absolute; top: .4rem; right: .4rem; display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sp); color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.xqs-sport__taxmin svg { width: 15px; height: 15px; }
.xqs[data-rejim="taxmin"] .xqs-sport { cursor: default; opacity: .5; }
.xqs[data-rejim="taxmin"] .xqs-sport:hover { transform: none; box-shadow: var(--shadow-sm); }
.xqs[data-rejim="taxmin"] .xqs-sport.is-taxmin { opacity: 1; border-color: var(--sp); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp) 30%, transparent); }
.xqs[data-rejim="taxmin"] .xqs-sport.is-taxmin .xqs-sport__taxmin { display: grid; animation: xqs-puls 1.2s ease-in-out infinite; }
@keyframes xqs-puls { 50% { transform: scale(1.12); } }

/* --- tanishish: tafsil oynasi --- */
.xqs-tafsil { margin-top: 1.3rem; }
.xqs-tafsil.is-in .xqs-tafsil__ichki { animation: xtg-shox .45s var(--ease-out) both; }
.xqs-tafsil__ichki {
    padding: clamp(.9rem, 2vw, 1.4rem);
    border-radius: 20px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--sp) 35%, #fff);
    border-top: 5px solid var(--sp);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--sp) 14%, transparent);
}
.xqs-tafsil__bosh { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.xqs-tafsil__belgi { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--sp); color: #fff; flex-shrink: 0; }
.xqs-tafsil__belgi svg { width: 24px; height: 24px; }
.xqs-tafsil__bosh h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--siyoh); }
.xqs-tafsil__bosh small { font-size: .8rem; color: var(--siyoh-3); }
.xqs-tafsil__nav { margin-left: auto; display: flex; gap: .3rem; }
.xqs-tafsil__btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--chiziq); background: #fff; color: var(--siyoh-2); cursor: pointer; transition: background .2s ease, color .2s ease; }
.xqs-tafsil__btn:hover { background: var(--sp); color: #fff; border-color: var(--sp); }
.xqs-tafsil__btn svg { width: 16px; height: 16px; }
.xqs-tafsil__btn .is-orqaga { transform: rotate(180deg); }
.xqs-tafsil__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(.9rem, 2vw, 1.4rem); align-items: start; }
.xqs-tafsil__maydon { margin: 0; position: sticky; top: calc(var(--navbar-height) + 1rem); }
.xqs-tafsil__maydon .mdn { height: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 10px 24px rgba(15, 31, 56, 0.18); }
.xqs-tafsil__maydon figcaption { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; font: 600 .78rem var(--font-mono); color: var(--siyoh-3); }
.xqs-tafsil__maydon figcaption svg { width: 14px; height: 14px; color: var(--sp); }
.xqs-tafsil__yuzlar { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.xqs-yuz { padding: .6rem .75rem; border-radius: 12px; background: color-mix(in srgb, var(--sp) 5%, #fff); border: 1px solid color-mix(in srgb, var(--sp) 18%, #fff); animation: xtg-band .4s var(--ease-out) both; animation-delay: calc(var(--k) * .04s); }
.xqs-yuz dt { display: flex; align-items: center; gap: .35rem; font: 700 .72rem var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sp) 75%, #0f1f38); }
.xqs-yuz dt svg { width: 14px; height: 14px; }
.xqs-yuz dd { margin: .25rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--siyoh-2); }

/* --- qiyoslash: mezonlar paneli --- */
.xqs-mezonlar { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem; border-radius: var(--radius-lg); background: var(--tur-card); border: 1px dashed var(--tur-rang-border); }
.xqs-mezon { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border-radius: var(--radius-pill); border: 1.5px solid var(--chiziq); background: #fff; color: var(--siyoh-2); font: 600 .82rem var(--font-display); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.xqs-mezon svg { width: 14px; height: 14px; }
.xqs-mezon:hover { border-color: var(--tur-rang-border); color: var(--tur-matn); }
.xqs-mezon[aria-checked="true"] { background: var(--tur-rang); border-color: var(--tur-rang); color: #fff; }

.xqs-qiyos { margin-top: 1.3rem; }
.xqs-qiyos.is-in .xqs-qiyos__ichki { animation: xtg-shox .45s var(--ease-out) both; }
.xqs-qiyos__ichki { padding: clamp(.9rem, 2vw, 1.4rem); border-radius: 20px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 16px 36px var(--tur-glow); }
.xqs-qiyos__bosh { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.xqs-qiyos__bosh span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tur-rang); color: #fff; }
.xqs-qiyos__bosh svg { width: 19px; height: 19px; }
.xqs-qiyos__bosh h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--siyoh); }
.xqs-qiyos__xulosa { display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 12px; background: var(--tur-card); color: var(--siyoh-2); font-size: .9rem; line-height: 1.5; }
.xqs-qiyos__xulosa svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--oltin); }

/* masshtab: maydonlar ustma-ust */
.xqs-mash { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem 1.4rem; align-items: end; }
.xqs-mash__svg { display: block; width: 100%; height: auto; background: repeating-linear-gradient(0deg, transparent 0 19px, rgba(15, 31, 56, 0.05) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(15, 31, 56, 0.05) 19px 20px); border-radius: 12px; }
.xqs-mash__shakl rect { fill: color-mix(in srgb, var(--sp) 16%, transparent); stroke: var(--sp); stroke-width: 2.5px; vector-effect: non-scaling-stroke; animation: xqs-osish .6s var(--ease-out) both; animation-delay: calc(var(--i) * .08s); transform-box: fill-box; transform-origin: 0 100%; }
@keyframes xqs-osish { from { transform: scale(.2); opacity: 0; } }
.xqs-mash__royxat { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xqs-mash__royxat li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: .15rem .55rem; padding: .35rem .6rem; border-radius: 10px; background: color-mix(in srgb, var(--sp) 6%, #fff); }
.xqs-mash__royxat i { width: 12px; height: 12px; border-radius: 3px; background: var(--sp); grid-row: span 2; }
.xqs-mash__royxat b { font-family: var(--font-display); font-size: .86rem; color: var(--siyoh); }
.xqs-mash__royxat span { font: 600 .74rem var(--font-mono); color: var(--siyoh-2); grid-row: span 2; }
.xqs-mash__royxat small { font: .7rem var(--font-mono); color: var(--siyoh-3); }
.xqs-mash__izoh { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; font-size: .88rem; color: var(--siyoh-2); }
.xqs-mash__izoh b { font-family: var(--font-display); color: var(--tur-matn); }
.xqs-mash__btn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: var(--radius-pill); border: 1.5px solid var(--tur-rang-border); background: #fff; color: var(--tur-matn); font: 600 .78rem var(--font-display); cursor: pointer; }
.xqs-mash__btn svg { width: 13px; height: 13px; }

/* son: nuqtalar */
.xqs-son { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.xqs-son li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .45rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--sp) 5%, #fff); }
.xqs-son b { font-family: var(--font-display); font-size: .9rem; color: var(--siyoh); }
.xqs-son__nuqtalar { display: flex; flex-wrap: wrap; gap: 5px; }
.xqs-son__nuqtalar i { width: 18px; height: 18px; border-radius: 50%; background: var(--sp); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); animation: xtg-markaz .4s var(--ease-spring) both; animation-delay: calc(var(--k) * .04s); }
.xqs-son small { font: 700 .8rem var(--font-mono); color: var(--siyoh-2); }

/* yil: vaqt chizig'i */
.xqs-yil { position: relative; height: 230px; margin: 0 1.6rem; }
.xqs-yil__oq { position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--qogoz-4), var(--tur-rang)); }
.xqs-yil__belgi { position: absolute; top: 8px; translate: -50% 0; font: 600 .68rem var(--font-mono); color: var(--siyoh-3); }
.xqs-yil__nuqta { position: absolute; top: 50%; width: 0; animation: xtg-shox .5s var(--ease-out) both; animation-delay: calc(var(--i) * .08s); }
.xqs-yil__nuqta i { position: absolute; left: 0; top: 1.5px; width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%; background: var(--sp); box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--sp) 35%, transparent); }
.xqs-yil__nuqta span {
    position: absolute;
    left: 0;
    bottom: calc(16px + var(--qator) * 36px);
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .2rem .5rem;
    border-radius: 8px;
    background: #fff;
    border: 1.5px solid var(--sp);
    white-space: nowrap;
    font-size: .74rem;
    color: var(--siyoh-2);
    line-height: 1.2;
    box-shadow: 0 4px 12px rgba(15, 31, 56, 0.1);
}
.xqs-yil__nuqta.is-past span { bottom: auto; top: calc(18px + var(--qator) * 36px); }
.xqs-yil__nuqta b { font: 700 .86rem var(--font-mono); color: var(--sp); }
.xqs-yil__nuqta small { font-size: .64rem; color: var(--siyoh-3); }

/* balandlik: poldan ustunlar + bola bo'yi */
.xqs-bal { display: grid; gap: .4rem; }
.xqs-bal__maydon { position: relative; height: 240px; display: flex; align-items: flex-end; gap: clamp(.4rem, 2vw, 1.2rem); padding: 0 .5rem 0 2.6rem; border-bottom: 3px solid var(--siyoh-2); }
.xqs-bal__chiziq { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(15, 31, 56, .15); }
.xqs-bal__chiziq i { position: absolute; left: 0; top: -.55rem; font: 600 .66rem var(--font-mono); font-style: normal; color: var(--siyoh-3); }
.xqs-bal__bola { position: relative; flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #b8c2d3; }
.xqs-bal__bola svg { display: block; width: 100%; height: 100%; }
.xqs-bal__bola small { position: absolute; top: -1.2rem; white-space: nowrap; font: 600 .64rem var(--font-mono); color: var(--siyoh-3); }
.xqs-bal__ustun { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--sp), color-mix(in srgb, var(--sp) 55%, #fff)); transform-origin: bottom; animation: xqs-ustun .7s var(--ease-out) both; animation-delay: calc(var(--i) * .07s); }
@keyframes xqs-ustun { from { transform: scaleY(0); } }
.xqs-bal__ustun b { position: absolute; top: -1.3rem; font: 700 .76rem var(--font-mono); color: var(--siyoh); white-space: nowrap; }
.xqs-bal__nomlar { display: flex; gap: clamp(.4rem, 2vw, 1.2rem); padding: 0 .5rem 0 2.6rem; }
.xqs-bal__bola-joy { flex: 0 0 44px; }
.xqs-bal__nomlar span { flex: 1 1 0; min-width: 0; text-align: center; }
.xqs-bal__nomlar b { display: block; font-family: var(--font-display); font-size: .8rem; color: var(--sp); }
.xqs-bal__nomlar small { display: block; font-size: .66rem; line-height: 1.3; color: var(--siyoh-3); }

/* vazn: ustunlar */
.xqs-vazn { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.xqs-vazn li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(80px, auto); align-items: center; gap: .8rem; }
.xqs-vazn b { font-family: var(--font-display); font-size: .9rem; color: var(--siyoh); }
.xqs-vazn__ustun { height: 18px; border-radius: 9px; background: var(--qogoz-2); overflow: hidden; }
.xqs-vazn__ustun i { display: block; height: 100%; width: var(--w); min-width: 4px; border-radius: 9px; background: var(--sp); transform-origin: left; animation: xqs-ustun-x .8s var(--ease-out) both; animation-delay: calc(var(--i) * .07s); }
@keyframes xqs-ustun-x { from { transform: scaleX(0); } }
.xqs-vazn small { font: 700 .78rem var(--font-mono); color: var(--siyoh-2); }

/* oila: ochko va vaqt */
.xqs-oilaq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.xqs-oilaq section { padding: .8rem 1rem; border-radius: 14px; background: var(--tur-card); border: 1px solid var(--tur-rang-border); }
.xqs-oilaq h4 { display: flex; align-items: center; gap: .4rem; margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--siyoh); }
.xqs-oilaq h4 svg { width: 17px; height: 17px; color: var(--tur-rang); }
.xqs-oilaq p { margin: .2rem 0 .6rem; font-size: .8rem; color: var(--siyoh-3); }
.xqs-oilaq ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xqs-oilaq li { display: flex; flex-direction: column; padding: .45rem .65rem; border-radius: 10px; background: #fff; border-left: 4px solid var(--sp); }
.xqs-oilaq li b { font-family: var(--font-display); font-size: .88rem; color: var(--siyoh); }
.xqs-oilaq li span { font-size: .8rem; color: var(--siyoh-2); }

/* --- taxmin paneli --- */
.xqs-taxmin { display: grid; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--radius-lg); background: #fff; border: 1.5px solid color-mix(in srgb, var(--sp, #6f4fd8) 35%, #fff); border-left: 5px solid var(--sp, var(--tur-rang)); box-shadow: var(--shadow-sm); }
.xqs-taxmin__bosh { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.xqs-taxmin__sport { padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--sp); color: #fff; font: 700 .74rem var(--font-display); }
.xqs-taxmin__bosh small { margin-left: auto; font: 600 .76rem var(--font-mono); color: var(--siyoh-3); }
.xqs-taxmin__nuqtalar { display: flex; gap: 4px; }
.xqs-taxmin__nuqtalar i { width: 10px; height: 10px; border-radius: 50%; background: var(--qogoz-3); }
.xqs-taxmin__nuqtalar .is-now { background: var(--tur-rang); box-shadow: 0 0 0 3px var(--tur-rang-soft); }
.xqs-taxmin__nuqtalar .is-aniq { background: var(--maydon); }
.xqs-taxmin__nuqtalar .is-yaqin { background: var(--oltin); }
.xqs-taxmin__nuqtalar .is-uzoq { background: var(--gil); }
.xqs-taxmin__savol { margin: 0; font: 600 clamp(1.02rem, 1.7vw, 1.22rem)/1.4 var(--font-display); color: var(--siyoh); }
.xqs-taxmin__olchov { position: relative; padding: 1.7rem 0 .2rem; }
.xqs-taxmin__slider { display: block; width: 100%; margin: 0; accent-color: var(--sp, var(--tur-rang)); height: 28px; cursor: pointer; }
.xqs-taxmin__slider:disabled { cursor: default; }
.xqs-taxmin__chegara { display: flex; justify-content: space-between; font: 600 .7rem var(--font-mono); color: var(--siyoh-3); }
.xqs-taxmin__zona { position: absolute; top: calc(1.7rem + 9px); height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--maydon) 28%, transparent); pointer-events: none; }
.xqs-taxmin__togri { position: absolute; top: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.xqs-taxmin__togri b { padding: .08rem .45rem; border-radius: 6px; background: var(--maydon); color: #fff; font: 700 .72rem var(--font-mono); white-space: nowrap; }
.xqs-taxmin__togri i { order: 2; width: 2px; height: 34px; background: var(--maydon); }
.xqs-taxmin__pastki { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.xqs-taxmin__qiymat { font: 800 clamp(1.4rem, 2.6vw, 1.9rem) var(--font-mono); color: var(--sp, var(--tur-rang)); min-width: 7ch; }
.xqs-taxmin__qiymat.is-bosh { font: 600 .9rem var(--font-display); color: var(--siyoh-3); }
.xqs-taxmin__pastki .btn { margin-left: auto; }
.xqs-taxmin__pastki kbd { font: 700 .66rem var(--font-display); padding: .05rem .35rem; border-radius: 5px; background: rgba(255, 255, 255, 0.25); }
.xqs-taxmin__natija { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .5rem .8rem; border-radius: 10px; font-size: .88rem; }
.xqs-taxmin__natija svg { width: 16px; height: 16px; }
.xqs-taxmin__natija b { font-family: var(--font-display); }
.xqs-taxmin__natija.is-aniq { background: var(--maydon-yumshoq); color: var(--maydon-2); }
.xqs-taxmin__natija.is-yaqin { background: color-mix(in srgb, var(--oltin) 16%, #fff); color: #7a5208; }
.xqs-taxmin__natija.is-uzoq { background: var(--gil-yumshoq); color: var(--gil); }
.xqs-taxmin__natija span { color: var(--siyoh-2); }
.xqs-taxmin__izoh { flex-basis: 100%; margin: 0; font-size: .86rem; line-height: 1.5; color: var(--siyoh-2); order: 3; }
.xqs-taxmin.is-ochiq .xqs-taxmin__pastki .btn { order: 2; }
.xqs-taxmin__yakun { display: flex; align-items: center; gap: .8rem; }
.xqs-taxmin__yakun > span:last-child { display: flex; flex-direction: column; gap: .15rem; }
.xqs-taxmin__yakun b { font-family: var(--font-display); font-size: 1.05rem; color: var(--siyoh); }
.xqs-taxmin__yakun small { font-size: .82rem; color: var(--siyoh-3); }
.xqs-taxmin__amal { display: flex; flex-wrap: wrap; gap: .45rem; }

.xqs__xulosa { background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #0f9d8b, #d33b3b, #2f6fe0, #2e8f47, #d0651c, #7a4fd6); }

/* chop etish jadvali — ekranda yashirin */
.xqs-print { display: none; }

/* --- ro'yxat va mavzu sahifasidagi kichik nusxa (qiyosiy) --- */
.xqs-mini { display: block; width: 100%; height: 100%; }
.mavzu-card__cover .xqs-mini { width: 100%; height: 100%; }
.mavzu-hero__rasm--xtg .xqs-mini { aspect-ratio: 320 / 190; height: auto; }

@media (max-width: 980px) {
    .xqs__oilalar { grid-template-columns: 1fr; gap: 1.6rem; }
    .xqs__ulagich--bosh { display: none; }
    .xqs__markaz { margin-bottom: 1rem; }
    .xqs-tafsil__grid { grid-template-columns: 1fr; }
    .xqs-tafsil__maydon { position: static; }
    .xqs-mash { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .xqs__ulagich--oila { display: none; }
    .xqs-oila__bosh { margin-bottom: .7rem; }
    .xqs-oila__sportlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xqs-tafsil__yuzlar { grid-template-columns: 1fr; }
    .xqs-son li, .xqs-vazn li { grid-template-columns: 1fr auto; }
    .xqs-son__nuqtalar, .xqs-vazn__ustun { grid-column: 1 / -1; grid-row: 2; }
    .xqs-oilaq { grid-template-columns: 1fr; }
    .xqs-yil { height: 260px; margin: 0 .6rem; }
    .xqs-yil__nuqta span { font-size: .66rem; }
    .xqs-bal__nomlar small { display: none; }
    .xqs-taxmin__pastki .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .xqs__markaz, .xqs-oila, .xqs-sport, .xqs-yuz, .xqs-mash__shakl rect, .xqs-son__nuqtalar i, .xqs-yil__nuqta,
    .xqs-bal__ustun, .xqs-vazn__ustun i, .xqs-tafsil.is-in .xqs-tafsil__ichki, .xqs-qiyos.is-in .xqs-qiyos__ichki,
    .xqs[data-rejim="taxmin"] .xqs-sport.is-taxmin .xqs-sport__taxmin { animation: none; }
}
@media print {
    .xqs-page .breadcrumb, .xqs-page .xarita-bar__actions, .xqs-panel,
    .xqs-page .xarita-caption, .xqs-page .xarita-pager, .xqs-page .xarita-related,
    .xqs-tafsil, .xqs-qiyos, .xqs-sport__qiymat, .xqs-sport__taxmin { display: none !important; }
    .xqs-stage { box-shadow: none; border: 0; padding: 0; background: #fff; }
    .xqs-sport, .xqs-oila, .xqs__markaz { animation: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }
    .xqs-sport__maydon, .xqs-sport, .xqs__markaz-icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xqs-print { display: block; margin-top: 1.2rem; break-before: page; }
    .xqs-print h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 .6rem; }
    .xqs-print table { width: 100%; border-collapse: collapse; font-size: 7.6pt; line-height: 1.35; }
    .xqs-print th, .xqs-print td { border: 1px solid #999; padding: 3px 4px; vertical-align: top; text-align: left; }
    .xqs-print thead th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xqs-print tbody th { width: 11%; }
}

/* ==========================================================================
   HALQA XARITA (.xhq) — XaritaHalqaView («Gimnastika»)
   Badiiy gimnastika halqasi shaklidagi xarita: markaz, ichki halqada
   sektorlar (egri yozuv), tashqi halqada bandlar (radial yozuv), yonida
   ma'lumot paneli. Sektor rangi — `--sh`. Tor ekranda halqa ostida ro'yxat.
   ========================================================================== */

.xhq-page { --xtg-radius: 24px; }
.xhq {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    grid-template-areas: "halqa panel" "xulosa xulosa";
    gap: 1.2rem clamp(1rem, 3vw, 2.2rem);
    align-items: center;
}
.xhq__halqa { grid-area: halqa; min-width: 0; }
.xhq__panel { grid-area: panel; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.xhq__royxat { display: none; }
.xhq__xulosa { grid-area: xulosa; margin-top: .4rem; }

.xhq-svg { display: block; width: 100%; max-width: 640px; margin: 0 auto; overflow: visible; }
.xhq-svg__iz { fill: none; stroke: var(--tur-rang-soft); stroke-width: 10; }

/* tashqi bandlar */
.xhq-band { cursor: pointer; outline: none; animation: xhq-kel .6s var(--ease-out) both; animation-delay: calc(.25s + var(--k) * .025s); transform-origin: 0 0; }
@keyframes xhq-kel { from { opacity: 0; transform: rotate(-12deg) scale(.9); } }
.xhq-band__yuza { fill: color-mix(in srgb, var(--sh) 14%, #fff); stroke: color-mix(in srgb, var(--sh) 45%, #fff); stroke-width: 1.2; transition: fill .2s ease, opacity .25s ease; }
.xhq-band__matn { font: 600 10.5px var(--font-display); fill: color-mix(in srgb, var(--sh) 70%, #0f1f38); pointer-events: none; }
.xhq-band:hover .xhq-band__yuza, .xhq-band:focus-visible .xhq-band__yuza { fill: color-mix(in srgb, var(--sh) 30%, #fff); }
.xhq-band:focus-visible .xhq-band__yuza { stroke: var(--sh); stroke-width: 2.5; }
.xhq-band.is-tanlangan .xhq-band__yuza { fill: var(--sh); }
.xhq-band.is-tanlangan .xhq-band__matn { fill: #fff; }
.xhq.has-tanlov .xhq-band:not(.is-sektorda):not(.is-tanlangan) { opacity: .32; }
.xhq.has-tanlov .xhq-sektor:not(.is-tanlangan) { opacity: .45; }

/* ichki sektorlar */
.xhq-sektor { cursor: pointer; outline: none; animation: xhq-kel .6s var(--ease-out) both; animation-delay: calc(.1s + var(--i) * .08s); transition: opacity .25s ease; }
.xhq-sektor__yuza { fill: var(--sh); stroke: #fff; stroke-width: 2; transition: filter .2s ease; }
.xhq-sektor__matn { font: 800 12.5px var(--font-display); letter-spacing: .12em; fill: #fff; pointer-events: none; }
.xhq-sektor:hover .xhq-sektor__yuza, .xhq-sektor:focus-visible .xhq-sektor__yuza { filter: brightness(1.1) saturate(1.1); }
.xhq-sektor.is-tanlangan .xhq-sektor__yuza { filter: drop-shadow(0 4px 10px rgba(15, 31, 56, 0.3)); }

/* markaz */
.xhq-markaz circle:first-child { fill: #fff; stroke: var(--tur-rang); stroke-width: 4; filter: drop-shadow(0 10px 24px var(--tur-soya)); }
.xhq-markaz__halqa { fill: none; stroke: var(--tur-rang-soft); stroke-width: 6; stroke-dasharray: 3 5; }
.xhq-markaz__nom { font: 800 21px var(--font-display); fill: var(--siyoh); }
.xhq-markaz__izoh { font: 600 8.8px var(--font-mono); fill: var(--tur-matn); }
.xhq-markaz__ball { font: 800 12px var(--font-mono); fill: var(--oltin); }

/* «Top!» rejimida bandlar yashirin emas — lekin yonishi */
.xhq[data-rejim="top"] .xhq-sektor { cursor: default; }
.xhq-band.is-xato .xhq-band__yuza { fill: color-mix(in srgb, var(--gil) 55%, #fff); animation: xhq-silkin .45s ease; }
.xhq-band.is-topildi .xhq-band__yuza { fill: var(--maydon); }
.xhq-band.is-topildi .xhq-band__matn, .xhq-band.is-korsat .xhq-band__matn { fill: #fff; }
.xhq-band.is-korsat .xhq-band__yuza { fill: var(--sh); animation: xhq-puls 1s ease-in-out 2; }
@keyframes xhq-silkin { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes xhq-puls { 50% { opacity: .55; } }

/* yon panel: ma'lumot */
.xhq-info { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 14px 30px var(--tur-glow); }
.xhq-info[style*="--sh"] { border-color: color-mix(in srgb, var(--sh) 35%, #fff); border-top: 5px solid var(--sh); }
.xhq-info__teg { display: inline-flex; align-items: center; gap: .35rem; font: 700 .7rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tur-matn); }
.xhq-info[style*="--sh"] .xhq-info__teg { color: color-mix(in srgb, var(--sh) 75%, #0f1f38); }
.xhq-info__teg svg { width: 13px; height: 13px; }
.xhq-info__tushuncha { margin: 0; font-family: var(--font-display); font-size: 1rem; line-height: 1.45; color: var(--siyoh); }
.xhq-info__sektorlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.xhq-info__sektorlar button { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .5rem .65rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff); background: color-mix(in srgb, var(--sh) 6%, #fff); color: var(--siyoh); font: 700 .86rem var(--font-display); text-align: left; cursor: pointer; }
.xhq-info__sektorlar button:hover { background: color-mix(in srgb, var(--sh) 14%, #fff); }
.xhq-info__sektorlar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sh); flex-shrink: 0; }
.xhq-info__sektorlar small { margin-left: auto; font: 600 .66rem var(--font-mono); color: var(--siyoh-3); }
.xhq-info__hint { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--siyoh-3); }
.xhq-info__hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--tur-rang); }
.xhq-info__bandlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.xhq-info__bandlar li { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--sh) 18%, #fff); background: color-mix(in srgb, var(--sh) 4%, #fff); overflow: hidden; }
.xhq-info__bandlar li.is-tanlangan { border-color: var(--sh); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh) 25%, transparent); }
.xhq-info__bandlar button { display: block; width: 100%; padding: .5rem .75rem; border: 0; background: none; color: var(--siyoh); font: 700 .9rem var(--font-display); text-align: left; cursor: pointer; }
.xhq-info__bandlar li:not(.is-ochiq) button { color: var(--siyoh-3); font-weight: 600; }
.xhq-info__bandlar p { margin: 0; padding: 0 .75rem .6rem; font-size: .88rem; line-height: 1.5; color: var(--siyoh-2); animation: xtg-shox .3s var(--ease-out); }

/* yon panel: «Top!» */
.xhq-top { display: flex; flex-direction: column; gap: .65rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 14px 30px var(--tur-glow); }
.xhq-top__bosh { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.xhq-top__bosh small { font: 600 .76rem var(--font-mono); color: var(--siyoh-3); }
.xhq-top__nuqtalar { display: flex; flex-wrap: wrap; gap: 4px; }
.xhq-top__nuqtalar i { width: 10px; height: 10px; border-radius: 50%; background: var(--qogoz-3); }
.xhq-top__nuqtalar .is-now { background: var(--tur-rang); box-shadow: 0 0 0 3px var(--tur-rang-soft); }
.xhq-top__nuqtalar .is-aniq { background: var(--maydon); }
.xhq-top__nuqtalar .is-yaqin { background: var(--oltin); }
.xhq-top__nuqtalar .is-uzoq { background: var(--gil); }
.xhq-top__topish { margin: 0; font: 600 clamp(1.02rem, 1.6vw, 1.18rem)/1.45 var(--font-display); color: var(--siyoh); }
.xhq-top__hint { margin: 0; font-size: .84rem; color: var(--siyoh-3); }
.xhq-top__javob { margin: 0; display: flex; gap: .5rem; align-items: flex-start; padding: .55rem .75rem; border-radius: 10px; font-size: .9rem; line-height: 1.45; }
.xhq-top__javob svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.xhq-top__javob.is-ok { background: var(--maydon-yumshoq); color: var(--maydon-2); }
.xhq-top__javob.is-bad { background: var(--gil-yumshoq); color: var(--gil); }
.xhq-top__izoh { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--siyoh-2); }
.xhq-top .btn { align-self: flex-start; }
.xhq-top kbd { font: 700 .66rem var(--font-display); padding: .05rem .35rem; border-radius: 5px; background: rgba(255, 255, 255, 0.25); }
.xhq-top.is-yakun { align-items: flex-start; }
.xhq-top__natija { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--siyoh); }
.xhq-top.is-yakun > small { font-size: .84rem; color: var(--siyoh-3); }
.xhq-top__topilmagan { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; font-size: .84rem; color: var(--siyoh-2); }
.xhq-top__topilmagan span { padding: .08rem .5rem; border-radius: var(--radius-pill); background: var(--gil-yumshoq); color: var(--gil); font-weight: 600; }
.xhq-top__amal { display: flex; flex-wrap: wrap; gap: .45rem; }

/* tor ekran uchun ro'yxat */
.xhq-royxat { display: flex; flex-direction: column; gap: .35rem; }
.xhq-royxat__sektor { align-self: flex-start; padding: .3rem .75rem; border: 0; border-radius: var(--radius-pill); background: var(--sh); color: #fff; font: 700 .8rem var(--font-display); cursor: pointer; }
.xhq-royxat__sektor small { opacity: .8; font-family: var(--font-mono); }
.xhq-royxat__bandlar { display: flex; flex-wrap: wrap; gap: .3rem; }
.xhq-royxat__band { padding: .3rem .6rem; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--sh) 35%, #fff); background: color-mix(in srgb, var(--sh) 6%, #fff); color: var(--siyoh); font: 600 .8rem var(--font-display); cursor: pointer; }
.xhq-royxat__band.is-tanlangan { background: var(--sh); color: #fff; }
.xhq-royxat__band.is-topildi { background: var(--maydon); border-color: var(--maydon); color: #fff; }
.xhq-royxat__band.is-xato { background: var(--gil-yumshoq); border-color: var(--gil); }
.xhq-royxat__band.is-korsat { background: var(--sh); color: #fff; }

/* ro'yxat va mavzu sahifasidagi kichik nusxa */
.xhq-print { display: none; }
.xhq-mini { display: block; width: 100%; height: 100%; }
.mavzu-card__cover .xhq-mini { width: 100%; height: 100%; }
.mavzu-hero__rasm--xtg .xhq-mini { aspect-ratio: 320 / 190; height: auto; }

@media (max-width: 980px) {
    .xhq { grid-template-columns: 1fr; grid-template-areas: "halqa" "panel" "royxat" "xulosa"; }
    .xhq__royxat { grid-area: royxat; display: grid; gap: .8rem; }
    .xhq-svg { max-width: 520px; }
}
@media (max-width: 560px) {
    .xhq-band__matn { display: none; }
    .xhq-info__sektorlar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .xhq-band, .xhq-sektor, .xhq-band.is-xato .xhq-band__yuza, .xhq-band.is-korsat .xhq-band__yuza { animation: none; }
}
@media print {
    .xhq-page .breadcrumb, .xhq-page .xarita-bar__actions,
    .xhq-page .xarita-caption, .xhq-page .xarita-pager, .xhq-page .xarita-related { display: none !important; }
    .xhq-stage { box-shadow: none; border: 0; padding: 0; background: #fff; }
    .xhq { grid-template-columns: 1fr; grid-template-areas: "halqa" "royxat" "xulosa"; }
    .xhq__panel { display: none; }
    .xhq-band, .xhq-sektor { animation: none !important; opacity: 1 !important; }
    .xhq-svg { max-width: 440px; }
    .xhq-band__yuza, .xhq-sektor__yuza, .xhq-royxat__sektor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xhq__royxat { display: none !important; }
    .xhq-print { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.2rem; break-before: page; font-size: 9pt; line-height: 1.35; }
    .xhq-print h3 { margin: .4rem 0 .2rem; font-family: var(--font-display); font-size: 11pt; }
    .xhq-print dl { margin: 0; }
    .xhq-print dt { font-weight: 700; margin-top: .25rem; }
    .xhq-print dd { margin: 0; }
}

/* ==========================================================================
   STADION REJASI (XaritaStadionView) — «Yengil atletika» mavzusi.
   Stadion yuqoridan, metrlarda (1 SVG birligi = 1 m): yo'lak, maydon,
   sektorlar, tribuna; yonida maktab maydonchasi. Bo'lim rangi — `--sh`,
   tanlangan bandning joyi `.xst-ov__*` bilan ustiga chiziladi.
   «Joylashtir» rejimida rejadagi yozuvlar yashiriladi.
   ========================================================================== */

.xst-page { --xtg-radius: 24px; }
.xst {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr);
    grid-template-areas: "rejalar panel" "xulosa xulosa";
    gap: 1.2rem clamp(1rem, 3vw, 2rem);
    align-items: start;
}
.xst__rejalar { grid-area: rejalar; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: .8rem 1rem; }
.xst__panel { grid-area: panel; min-width: 0; position: sticky; top: calc(var(--navbar-height) + 1rem); }
.xst__xulosa { grid-area: xulosa; margin-top: .2rem; }
.xst-reja { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.xst-reja--stadion { grid-column: 1 / -1; }
.xst-reja--maktab { grid-column: 1; }
.xst-belgilar { grid-column: 2; align-self: start; list-style: none; margin: 0; padding: .8rem .9rem; display: grid; gap: .45rem; border-radius: 14px; background: #fff; border: 1px solid var(--chiziq); font-size: .8rem; color: var(--siyoh-2); }
.xst-belgilar::before { content: 'Shartli belgilar'; font: 700 .66rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--siyoh-3); }
.xst-belgilar li { display: flex; align-items: center; gap: .55rem; }
.xst-belgilar i { width: 26px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.xst-belgilar .is-yolak { background: repeating-linear-gradient(180deg, #c3583b 0 3px, rgba(255, 255, 255, 0.8) 3px 4px); }
.xst-belgilar .is-ot { background: repeating-linear-gradient(90deg, #5f9e4a 0 4px, #68a853 4px 8px); }
.xst-belgilar .is-qum { background: #e8cf92; border: 1px solid #c9ab66; }
.xst-belgilar .is-gilam { background: #2f6fe0; }
.xst-belgilar .is-sektor { height: 0; border-top: 2px dashed #5f9e4a; border-radius: 0; }
.xst-belgilar .is-tor { height: 0; border-top: 2px dotted #1f2937; border-radius: 0; }
.xst-belgilar .is-taxta { height: 6px; background: #fff; border: 1px solid #cbd5e1; }
.xst-reja figcaption { font: 600 .7rem var(--font-mono); letter-spacing: .04em; color: var(--siyoh-3); }
.xst-svg { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 31, 56, 0.1); touch-action: manipulation; }

/* rejaning o'zi */
.xst-s__atrof { fill: #ece8de; }
.xst-s__tribuna { fill: #93a1b4; stroke: #74829a; stroke-width: .3; }
.xst-s__qator { stroke: rgba(255, 255, 255, 0.55); stroke-width: .35; }
.xst-s__yolak { fill: #c3583b; }
.xst-s__chiziq { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: .14; }
.xst-s__finish { stroke: #fff; stroke-width: .6; }
.xst-s__finish.is-yupqa { stroke-width: .3; stroke-dasharray: .6 .5; }
.xst-s__start { stroke: #fff; stroke-width: .45; }
.xst-s__yugurish { fill: #b04f34; }
.xst-s__taxta { fill: #fff; }
.xst-s__taxta.is-ikkinchi { opacity: .75; }
.xst-s__qum { fill: #e8cf92; stroke: #c9ab66; stroke-width: .2; }
.xst-s__gilam { fill: #2f6fe0; stroke: #1d4ed8; stroke-width: .2; }
.xst-s__yelpigich { fill: #c3583b; opacity: .9; }
.xst-s__planka { stroke: #fbbf24; stroke-width: .55; stroke-dasharray: .9 .5; }
.xst-s__sektor { fill: rgba(255, 255, 255, 0.07); stroke: #fff; stroke-width: .25; stroke-dasharray: 1 .8; }
.xst-s__doira { fill: #d6d3cc; stroke: #fff; stroke-width: .25; }
.xst-s__tor { fill: none; stroke: #1f2937; stroke-width: .4; stroke-dasharray: .5 .3; }
.xst-s__yoy { fill: none; stroke: #fff; stroke-width: .4; }
.xst-m__asos { fill: #dfe9d2; stroke: #b9c8a6; stroke-width: .2; }
.xst-m__metr { stroke: #9fb58a; stroke-width: .15; stroke-dasharray: .5 .5; }
.xst-m__nishon { fill: #dc2626; }
.xst-m__nishon.is-oq { fill: #fff; }
.xst-m__oyin { fill: none; stroke: #2b9457; stroke-width: .3; stroke-dasharray: 1 .6; }
.xst-m__oyin-nuqta { fill: #2b9457; }
.xst-yorliq { font: 800 3px var(--font-display); fill: #0f1f38; paint-order: stroke; stroke: rgba(255, 255, 255, 0.92); stroke-width: .75; stroke-linejoin: round; pointer-events: none; }
.xst-yorliq.is-kichik { font-size: 1.9px; stroke-width: .45; }
.xst-zona { transition: opacity .3s ease; }
.xst.has-tanlov .xst-zona { opacity: .6; }
.xst[data-rejim="joy"] .xst-yorliq { display: none; }

/* bosiladigan va joylashtiriladigan hududlar */
.xst-nishon { fill: transparent; stroke: transparent; stroke-width: .5; cursor: pointer; outline: none; transition: fill .2s ease, stroke .2s ease; }
.xst-nishon:hover, .xst-nishon:focus-visible { fill: rgba(255, 255, 255, 0.2); stroke: rgba(255, 255, 255, 0.95); stroke-dasharray: 1.2 .8; }
.xst[data-rejim="joy"] .xst-nishon:hover { fill: rgba(29, 95, 214, 0.16); stroke: #1d5fd6; }
.xst-nishon.is-ustida { fill: rgba(29, 95, 214, 0.28); stroke: #1d5fd6; stroke-dasharray: none; }
.xst-nishon.is-xato { fill: rgba(207, 74, 55, 0.4); stroke: #cf4a37; animation: xst-silkin .45s ease; }
.xst-nishon.is-topildi { fill: rgba(43, 148, 87, 0.4); stroke: #2b9457; }
.xst-nishon.is-korsat { fill: rgba(201, 138, 18, 0.45); stroke: #c98a12; animation: xst-puls .8s ease-in-out 2; }
@keyframes xst-silkin { 20%, 60% { transform: translateX(-1px); } 40%, 80% { transform: translateX(1px); } }
@keyframes xst-puls { 50% { opacity: .45; } }

/* tanlangan bandning joyi */
.xst-overlay { pointer-events: none; }
.xst-ov__yuza { fill: color-mix(in srgb, var(--sh) 42%, transparent); stroke: var(--sh); stroke-width: .5; animation: xst-ov .45s var(--ease-out) both; }
.xst-ov__yuza.is-toliq { fill: var(--sh); }
.xst-ov__chiziq { fill: none; stroke: var(--sh); stroke-width: 1.1; stroke-linecap: round; filter: drop-shadow(0 0 .5px #fff); animation: xst-ov .45s var(--ease-out) both; }
.xst-ov__chiziq.is-uzuq { stroke-dasharray: 2.2 1.4; }
.xst-ov__kesma { stroke: var(--sh); stroke-width: 1.05; stroke-linecap: round; filter: drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .5px #fff); animation: xst-ov .45s var(--ease-out) both; }
.xst-ov__zona { fill: none; stroke: var(--sh); stroke-width: 1.15; opacity: .9; stroke-linecap: round; }
.xst-ov__tosiq { stroke: var(--sh); stroke-width: .7; filter: drop-shadow(0 0 .35px #fff); }
.xst-ov__iz { fill: var(--sh); }
.xst-ov__matn { font: 800 3px var(--font-display); fill: var(--sh); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: .8; stroke-linejoin: round; }
.xst-ov__matn.is-chap { text-anchor: start; }
[data-svg="maktab"] .xst-ov__matn { font-size: 2px; }
@keyframes xst-ov { from { opacity: 0; } }

/* joylashtirilgan bayonotlar pinlari */
.xst-pin circle { fill: #fff; stroke: #0f1f38; stroke-width: .35; }
.xst-pin.is-aniq circle { fill: #2b9457; stroke: #fff; }
.xst-pin.is-yaqin circle { fill: #c98a12; stroke: #fff; }
.xst-pin.is-uzoq circle { fill: #cf4a37; stroke: #fff; }
.xst-pin text { fill: #fff; font-family: var(--font-mono); font-weight: 800; text-anchor: middle; }
.xst-pin.is-yangi { transform-box: fill-box; transform-origin: center; animation: xst-pin .45s var(--ease-spring, ease-out) both; }
@keyframes xst-pin { from { opacity: 0; transform: translateY(-4px) scale(.2); } }

/* yon panel: ko'rish */
.xst-info { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 14px 30px var(--tur-glow); }
.xst-info[style*="--sh"] { border-color: color-mix(in srgb, var(--sh) 35%, #fff); border-top: 5px solid var(--sh); }
.xst-info__teg { display: inline-flex; align-items: center; gap: .35rem; font: 700 .7rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tur-matn); }
.xst-info[style*="--sh"] .xst-info__teg { color: color-mix(in srgb, var(--sh) 75%, #0f1f38); }
.xst-info__teg svg { width: 13px; height: 13px; }
.xst-info__tushuncha { margin: 0; font-family: var(--font-display); font-size: .98rem; line-height: 1.45; color: var(--siyoh); }
.xst-info__zonalar { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xst-info__zonalar button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .7rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff); background: color-mix(in srgb, var(--sh) 6%, #fff); color: var(--siyoh); font: 700 .88rem var(--font-display); text-align: left; cursor: pointer; }
.xst-info__zonalar button:hover { background: color-mix(in srgb, var(--sh) 14%, #fff); }
.xst-info__zonalar i { width: 11px; height: 11px; border-radius: 3px; background: var(--sh); flex-shrink: 0; }
.xst-info__zonalar small { margin-left: auto; font: 600 .66rem var(--font-mono); color: var(--siyoh-3); }
.xst-info__hint { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--siyoh-3); }
.xst-info__hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--tur-rang); }
.xst-info__orqaga { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: 600 .76rem var(--font-mono); color: var(--siyoh-3); cursor: pointer; }
.xst-info__orqaga svg { width: 12px; height: 12px; transform: rotate(180deg); }
.xst-info__orqaga:hover { color: var(--siyoh); }
.xst-info__zona-izoh { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--siyoh-2); }
.xst-info__bandlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xst-info__bandlar li { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--sh) 18%, #fff); background: color-mix(in srgb, var(--sh) 4%, #fff); overflow: hidden; }
.xst-info__bandlar li.is-tanlangan { border-color: var(--sh); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh) 25%, transparent); }
.xst-info__bandlar button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .5rem .75rem; border: 0; background: none; color: var(--siyoh); font: 700 .9rem var(--font-display); text-align: left; cursor: pointer; }
.xst-info__bandlar button svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--siyoh-3); transition: transform .2s ease; }
.xst-info__bandlar li.is-tanlangan button svg { transform: rotate(180deg); color: var(--sh); }
.xst-info__bandlar p { margin: 0; padding: 0 .75rem .65rem; font-size: .88rem; line-height: 1.5; color: var(--siyoh-2); animation: xtg-shox .3s var(--ease-out); }

/* yon panel: joylashtir */
.xst-joy { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 14px 30px var(--tur-glow); }
.xst-joy__bosh { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.xst-joy__bosh small { font: 600 .76rem var(--font-mono); color: var(--siyoh-3); }
.xst-joy__nuqtalar { display: flex; flex-wrap: wrap; gap: 4px; }
.xst-joy__nuqtalar i { width: 10px; height: 10px; border-radius: 50%; background: var(--qogoz-3); }
.xst-joy__nuqtalar .is-aniq { background: var(--maydon); }
.xst-joy__nuqtalar .is-yaqin { background: var(--oltin); }
.xst-joy__nuqtalar .is-uzoq { background: var(--gil); }
.xst-joy__yoriq { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--siyoh-3); }
.xst-joy__oxirgi { margin: 0; display: flex; gap: .45rem; align-items: flex-start; padding: .5rem .7rem; border-radius: 10px; font-size: .86rem; line-height: 1.4; animation: xtg-shox .3s var(--ease-out); }
.xst-joy__oxirgi svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.xst-joy__oxirgi.is-ok { background: var(--maydon-yumshoq); color: var(--maydon-2); }
.xst-joy__oxirgi.is-bad { background: var(--gil-yumshoq); color: var(--gil); }
.xst-joy__hint { margin: 0; font-size: .84rem; font-weight: 600; color: var(--gil); }
.xst-kartalar { display: flex; flex-direction: column; gap: .4rem; max-height: min(52vh, 460px); overflow-y: auto; padding: 2px; }
.xst-karta {
    display: flex; align-items: flex-start; gap: .5rem; width: 100%;
    padding: .55rem .7rem; border-radius: 12px;
    border: 1.5px solid var(--chiziq); border-left: 4px solid var(--tur-rang);
    background: #fff; color: var(--siyoh); text-align: left; cursor: grab;
    font: 600 .86rem/1.35 var(--font-display);
    touch-action: none; user-select: none;
    box-shadow: 0 3px 8px rgba(15, 31, 56, 0.06);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}
.xst-karta svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--tur-rang); }
.xst-karta:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(15, 31, 56, 0.1); }
.xst-karta.is-tanlangan { border-color: var(--tur-rang); background: var(--tur-rang-soft); box-shadow: 0 0 0 3px var(--tur-rang-soft); }
.xst-karta.is-xatoli { border-left-color: var(--gil); }
.xst-karta.is-sudralmoqda { opacity: .35; }
.xst-karta--uchmoqda {
    position: fixed; z-index: 1000; pointer-events: none; margin: 0;
    transform: translate(-50%, -60%) rotate(-2deg);
    box-shadow: 0 18px 40px rgba(15, 31, 56, 0.3);
    background: #fff; cursor: grabbing;
}
.xst-joy.is-yakun { align-items: flex-start; }
.xst-joy__natija { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--siyoh); }
.xst-joy.is-yakun > small { font-size: .84rem; color: var(--siyoh-3); }
.xst-joy__topilmagan { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; font-size: .82rem; color: var(--siyoh-2); }
.xst-joy__topilmagan span { padding: .08rem .5rem; border-radius: 10px; background: var(--gil-yumshoq); color: var(--gil); font-weight: 600; }
.xst-joy__amal { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ro'yxat va mavzu sahifasidagi kichik nusxa */
.xst-print { display: none; }
.xst-mini { display: block; width: 100%; height: 100%; }
.mavzu-hero__rasm--xtg .xst-mini { aspect-ratio: 320 / 190; height: auto; }

@media (max-width: 980px) {
    .xst { grid-template-columns: 1fr; grid-template-areas: "rejalar" "panel" "xulosa"; }
    .xst__panel { position: static; }
    .xst__rejalar { grid-template-columns: 1fr; }
    .xst-reja--maktab { max-width: 460px; }
    .xst-belgilar { grid-column: 1; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .xst-belgilar::before { grid-column: 1 / -1; }
    .xst-kartalar { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
    .xst-ov__yuza, .xst-ov__chiziq, .xst-ov__kesma, .xst-pin.is-yangi, .xst-nishon.is-xato, .xst-nishon.is-korsat { animation: none; }
}
@media print {
    .xst-page .breadcrumb, .xst-page .xarita-bar__actions,
    .xst-page .xarita-caption, .xst-page .xarita-pager, .xst-page .xarita-related { display: none !important; }
    .xst-stage { box-shadow: none; border: 0; padding: 0; background: #fff; }
    .xst { grid-template-columns: 1fr; grid-template-areas: "rejalar" "xulosa"; }
    .xst__panel { display: none; }
    .xst .xst-yorliq { display: inline !important; }
    .xst-overlay, .xst-pinlar { display: none; }
    .xst-svg { box-shadow: none; border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xst__rejalar { grid-template-columns: 1fr .62fr; }
    .xst-print { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.2rem; break-before: page; font-size: 9pt; line-height: 1.35; }
    .xst-print h3 { margin: .4rem 0 .2rem; font-family: var(--font-display); font-size: 11pt; }
    .xst-print dl { margin: 0; }
    .xst-print dt { font-weight: 700; margin-top: .25rem; }
    .xst-print dd { margin: 0; }
}

/* ==========================================================================
   PULS MONITORI (XaritaMonitorView) — «Pedagogik nazorat» mavzusi.
   Qorong'i yurak monitori: har bo'lim — kanal, har band — P–QRS–T
   cho'qqisi. Kanal rangi — `--sh` (monitorda yorqinroq qilinadi).
   «Egri chiziq» rejimida monitor grafikka aylanadi: surib chiziladigan
   puls nuqtalari, qismlar, mashq samarasi zonasi va model yo'lagi.
   ========================================================================== */

.xmn-page { --xtg-radius: 24px; }
.xmn {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr);
    grid-template-areas: "monitor panel" "xulosa xulosa";
    gap: 1.2rem clamp(1rem, 3vw, 2rem);
    align-items: start;
}
.xmn__monitor {
    grid-area: monitor; min-width: 0;
    border-radius: 20px; overflow: hidden;
    background:
        linear-gradient(rgba(74, 222, 128, 0.06) 1px, transparent 1px) 0 0 / 100% 22px,
        linear-gradient(90deg, rgba(74, 222, 128, 0.06) 1px, transparent 1px) 0 0 / 22px 100%,
        radial-gradient(ellipse at 50% 0%, #0d2a1d 0%, #04120c 70%);
    border: 6px solid #1c2530;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 18px 40px rgba(15, 31, 56, 0.22);
    color: #d1fae5;
}
.xmn__panel { grid-area: panel; min-width: 0; position: sticky; top: calc(var(--navbar-height) + 1rem); }
.xmn__xulosa { grid-area: xulosa; margin-top: .2rem; }
.xmn__bosh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(74, 222, 128, 0.18); }
.xmn__nom { display: inline-flex; align-items: center; gap: .5rem; font: 800 .95rem var(--font-display); color: #ecfdf5; }
.xmn__nom svg { width: 18px; height: 18px; color: #f87171; }
.xmn__nom small { font: 500 .72rem var(--font-mono); color: rgba(209, 250, 229, 0.6); }
.xmn__bpm { display: inline-flex; align-items: baseline; gap: .35rem; font-family: var(--font-mono); color: #4ade80; }
.xmn__bpm i { width: 10px; height: 10px; border-radius: 50%; background: #f87171; align-self: center; animation: xmn-urish 1s ease-in-out infinite; }
.xmn__bpm b { font-size: 1.6rem; line-height: 1; color: #4ade80; text-shadow: 0 0 10px rgba(74, 222, 128, 0.6); }
.xmn__bpm small { font-size: .66rem; color: rgba(209, 250, 229, 0.6); }
@keyframes xmn-urish { 0%, 60%, 100% { transform: scale(1); opacity: .7; } 10% { transform: scale(1.5); opacity: 1; } }

/* kanallar */
.xmn__kanallar { display: grid; }
.xmn__kanallar[hidden], .xmn__grafik[hidden] { display: none; }
.xmn-kanal { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; border-bottom: 1px dashed rgba(74, 222, 128, 0.14); transition: opacity .25s ease, background .25s ease; animation: xmn-kanal .5s var(--ease-out) both; animation-delay: calc(var(--i) * .08s); }
@keyframes xmn-kanal { from { opacity: 0; transform: translateX(-8px); } }
.xmn-kanal:last-child { border-bottom: 0; }
.xmn-kanal.is-tanlangan { background: color-mix(in srgb, var(--sh) 10%, transparent); }
.xmn.has-tanlov .xmn-kanal:not(.is-tanlangan) { opacity: .42; }
.xmn-kanal__yorliq { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; height: 100%; padding: .6rem .7rem .6rem .9rem; border: 0; border-right: 1px solid rgba(74, 222, 128, 0.14); background: none; color: #ecfdf5; text-align: left; cursor: pointer; }
.xmn-kanal__yorliq b { grid-row: span 2; display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .3rem; border-radius: 8px; background: color-mix(in srgb, var(--sh) 70%, #fff 0%); color: #fff; font: 800 .8rem var(--font-mono); box-shadow: 0 0 14px color-mix(in srgb, var(--sh) 60%, transparent); }
.xmn-kanal__yorliq span { font: 700 .9rem var(--font-display); }
.xmn-kanal__yorliq small { font: 500 .66rem var(--font-mono); color: rgba(209, 250, 229, 0.55); }
.xmn-kanal__yorliq:hover span { color: color-mix(in srgb, var(--sh) 40%, #fff); }
.xmn-kanal__svg { display: block; width: 100%; height: auto; overflow: visible; }
.xmn-kanal__chiziq { fill: none; stroke: color-mix(in srgb, var(--sh) 65%, #fff); stroke-width: 2.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sh) 80%, transparent)); }
.xmn-kanal__nuqta { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px color-mix(in srgb, var(--sh) 90%, transparent)); }
.xmn-band { cursor: pointer; outline: none; }
.xmn-band__hit { fill: transparent; }
.xmn-band__matn { font: 700 16px var(--font-display); fill: rgba(236, 253, 245, 0.88); transition: fill .2s ease; pointer-events: none; }
.xmn-band__uch { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill .2s ease, stroke .2s ease; }
.xmn-band:hover .xmn-band__matn, .xmn-band:focus-visible .xmn-band__matn { fill: #fff; }
.xmn-band:hover .xmn-band__uch, .xmn-band:focus-visible .xmn-band__uch { fill: color-mix(in srgb, var(--sh) 60%, #fff); }
.xmn-band:focus-visible .xmn-band__hit { fill: rgba(255, 255, 255, 0.05); }
.xmn-band.is-tanlangan .xmn-band__matn { fill: color-mix(in srgb, var(--sh) 35%, #fff); }
.xmn-band.is-tanlangan .xmn-band__uch { fill: #fff; stroke: color-mix(in srgb, var(--sh) 70%, #fff); filter: drop-shadow(0 0 8px #fff); }

/* grafik — «Egri chiziq» */
.xmn__grafik { padding: .6rem .6rem .2rem; }
.xmn-g { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }
.xmn-g__qism { fill: rgba(255, 255, 255, 0.02); }
.xmn-g__qism.is-juft { fill: rgba(255, 255, 255, 0.055); }
.xmn-g__qism-nom { font: 700 15px var(--font-display); fill: rgba(209, 250, 229, 0.75); letter-spacing: .04em; }
.xmn-g__setka { stroke: rgba(134, 239, 172, 0.12); stroke-width: 1; }
.xmn-g__oq { font: 500 13px var(--font-mono); fill: rgba(209, 250, 229, 0.6); }
.xmn-g__oq-nom { font: 600 13px var(--font-mono); fill: rgba(209, 250, 229, 0.45); letter-spacing: .06em; }
.xmn-g__zona { fill: rgba(34, 197, 94, 0.12); stroke: rgba(74, 222, 128, 0.45); stroke-dasharray: 6 5; }
.xmn-g__zona-nom { font: 600 13px var(--font-mono); fill: rgba(134, 239, 172, 0.8); }
.xmn-g__yolak { fill: rgba(96, 165, 250, 0.16); stroke: rgba(96, 165, 250, 0.4); stroke-width: 1; animation: xmn-ochil .5s ease-out both; }
.xmn-g__model { fill: none; stroke: #60a5fa; stroke-width: 2.6; stroke-dasharray: 9 6; animation: xmn-ochil .5s ease-out both; }
@keyframes xmn-ochil { from { opacity: 0; } }
.xmn-g__chiziq { fill: none; stroke: #facc15; stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6)); }
.xmn-g__nuqta { cursor: ns-resize; outline: none; }
.xmn-g__hit { fill: transparent; }
.xmn-g__doira { fill: #0b1d14; stroke: #facc15; stroke-width: 3.2; transition: r .15s ease; }
.xmn-g__qiymat { font: 700 13px var(--font-mono); fill: #fde68a; pointer-events: none; }
.xmn-g__nuqta:hover .xmn-g__doira, .xmn-g__nuqta:focus-visible .xmn-g__doira, .xmn-g__nuqta.is-surilmoqda .xmn-g__doira { r: 12; fill: #facc15; }
.xmn-g__nuqta:focus-visible .xmn-g__hit { fill: rgba(250, 204, 21, 0.12); }
.xmn-g__nuqta.is-qotgan { cursor: default; }
.xmn-g__nuqta.is-qotgan .xmn-g__doira { stroke: #94a3b8; fill: #1f2937; }
.xmn-g__nuqta.is-qotgan .xmn-g__qiymat { fill: #cbd5e1; }
.xmn-g__nuqta.is-ok .xmn-g__doira { stroke: #22c55e; fill: #14532d; }
.xmn-g__nuqta.is-bad .xmn-g__doira { stroke: #ef4444; fill: #450a0a; }

/* yon panel: ko'rish */
.xmn-info, .xmn-egri { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; border-radius: 18px; background: #fff; border: 1.5px solid var(--tur-rang-border); box-shadow: 0 14px 30px var(--tur-glow); }
.xmn-info[style*="--sh"] { border-color: color-mix(in srgb, var(--sh) 35%, #fff); border-top: 5px solid var(--sh); }
.xmn-info__teg { display: inline-flex; align-items: center; gap: .35rem; font: 700 .7rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--tur-matn); }
.xmn-info[style*="--sh"] .xmn-info__teg { color: color-mix(in srgb, var(--sh) 75%, #0f1f38); }
.xmn-info__teg svg { width: 13px; height: 13px; }
.xmn-info__tushuncha { margin: 0; font-family: var(--font-display); font-size: .98rem; line-height: 1.45; color: var(--siyoh); }
.xmn-info__kanallar { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xmn-info__kanallar button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .65rem; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--sh) 30%, #fff); background: color-mix(in srgb, var(--sh) 6%, #fff); color: var(--siyoh); font: 700 .88rem var(--font-display); text-align: left; cursor: pointer; }
.xmn-info__kanallar button:hover { background: color-mix(in srgb, var(--sh) 14%, #fff); }
.xmn-info__kanallar b { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border-radius: 7px; background: var(--sh); color: #fff; font: 800 .72rem var(--font-mono); }
.xmn-info__kanallar small { margin-left: auto; font: 600 .66rem var(--font-mono); color: var(--siyoh-3); }
.xmn-info__hint { display: flex; gap: .4rem; align-items: flex-start; margin: 0; font-size: .84rem; line-height: 1.5; color: var(--siyoh-3); }
.xmn-info__hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--tur-rang); }
.xmn-info__orqaga { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; font: 600 .76rem var(--font-mono); color: var(--siyoh-3); cursor: pointer; }
.xmn-info__orqaga svg { width: 12px; height: 12px; transform: rotate(180deg); }
.xmn-info__orqaga:hover { color: var(--siyoh); }
.xmn-info__kanal-izoh { margin: 0; font-size: .88rem; color: var(--siyoh-2); }
.xmn-info__bandlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xmn-info__bandlar li { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--sh) 18%, #fff); background: color-mix(in srgb, var(--sh) 4%, #fff); overflow: hidden; }
.xmn-info__bandlar li.is-tanlangan { border-color: var(--sh); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sh) 25%, transparent); }
.xmn-info__bandlar button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .5rem .75rem; border: 0; background: none; color: var(--siyoh); font: 700 .9rem var(--font-display); text-align: left; cursor: pointer; }
.xmn-info__bandlar button svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--siyoh-3); transition: transform .2s ease; }
.xmn-info__bandlar li.is-tanlangan button svg { transform: rotate(180deg); color: var(--sh); }
.xmn-info__bandlar p { margin: 0; padding: 0 .75rem .65rem; font-size: .88rem; line-height: 1.5; color: var(--siyoh-2); animation: xtg-shox .3s var(--ease-out); }

/* yon panel: egri chiziq */
.xmn-egri__tablar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .25rem; border-radius: 12px; background: var(--qogoz-2); }
.xmn-egri__tablar button { padding: .45rem .5rem; border: 0; border-radius: 9px; background: none; color: var(--siyoh-3); font: 700 .82rem var(--font-display); cursor: pointer; }
.xmn-egri__tablar button.is-faol { background: #fff; color: var(--siyoh); box-shadow: 0 2px 8px rgba(15, 31, 56, 0.1); }
.xmn-egri__tablar small { font: 700 .68rem var(--font-mono); color: var(--maydon-2); }
.xmn-egri__tavsif { margin: 0; font: 600 .95rem/1.5 var(--font-display); color: var(--siyoh); }
.xmn-egri__yoriq { display: flex; gap: .4rem; margin: 0; font-size: .82rem; line-height: 1.45; color: var(--siyoh-3); }
.xmn-egri__yoriq svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: #dc2626; }
.xmn-egri__natija { display: flex; align-items: baseline; gap: .6rem; padding: .55rem .8rem; border-radius: 12px; background: #04120c; color: rgba(209, 250, 229, 0.8); font-size: .82rem; animation: xtg-shox .3s var(--ease-out); }
.xmn-egri__natija b { font: 800 1.5rem var(--font-mono); color: #4ade80; }
.xmn-egri__tahlil { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .86rem; line-height: 1.45; color: var(--siyoh-2); }
.xmn-egri__yakun { display: flex; gap: .45rem; margin: 0; padding: .55rem .75rem; border-radius: 12px; background: var(--maydon-yumshoq); color: var(--maydon-2); font-size: .84rem; line-height: 1.45; }
.xmn-egri__yakun svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.xmn-egri__amal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }

/* ro'yxat va mavzu sahifasidagi kichik nusxa */
.xmn-print { display: none; }
.xmn-mini { display: block; width: 100%; height: 100%; }
.mavzu-hero__rasm--xtg .xmn-mini { aspect-ratio: 320 / 190; height: auto; }

@media (max-width: 980px) {
    .xmn { grid-template-columns: 1fr; grid-template-areas: "monitor" "panel" "xulosa"; }
    .xmn__panel { position: static; }
}
@media (max-width: 640px) {
    .xmn-kanal { grid-template-columns: 1fr; }
    .xmn-kanal__yorliq { border-right: 0; border-bottom: 1px solid rgba(74, 222, 128, 0.14); }
    .xmn-band__matn { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .xmn-kanal, .xmn__bpm i, .xmn-g__yolak, .xmn-g__model { animation: none; }
}
@media print {
    .xmn-page .breadcrumb, .xmn-page .xarita-bar__actions,
    .xmn-page .xarita-caption, .xmn-page .xarita-pager, .xmn-page .xarita-related { display: none !important; }
    .xmn-stage { box-shadow: none; border: 0; padding: 0; background: #fff; }
    .xmn { grid-template-columns: 1fr; grid-template-areas: "monitor" "xulosa"; }
    .xmn__panel { display: none; }
    .xmn__monitor { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .xmn-kanal { animation: none !important; opacity: 1 !important; }
    .xmn-print { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.2rem; break-before: page; font-size: 9pt; line-height: 1.35; }
    .xmn-print h3 { margin: .4rem 0 .2rem; font-family: var(--font-display); font-size: 11pt; }
    .xmn-print dl { margin: 0; }
    .xmn-print dt { font-weight: 700; margin-top: .25rem; }
    .xmn-print dd { margin: 0; }
}