/* ============================================================
   OTA-ONA KABINETI (Parent Portal) — mobil ilova uslubi
   ------------------------------------------------------------
   Bu qatlam OXU ota-ona ILOVASINING veb ko'rinishi: shakl, o'lcham
   va harakat `mobile-school` / `mobile-kids` (Flutter) dagi
   `app_theme.dart` dan olingan — katta radiuslar (28/22/17/13),
   chegarasiz oq kartalar, gradientli sarlavha, plitkali bosh
   sahifa va pastdagi «pill» navigatsiya.

   Fayl ikkala loyihada BIR XIL, faqat yuqoridagi brend tokenlari
   bloki farq qiladi (`ui.css` dagi qoida bilan bir xil).

   `ui.css` tokenlari (--sp-*, --fs-*, --dur-*, --z-*) o'lchov va
   qatlam uchun ishlatiladi; RANG esa shu fayldagi `--pp-*` dan —
   kabinet CRM'ning rang sxemasiga ergashmaydi.

   Mobile-first: asosiy qoidalar telefon uchun, `min-width` media
   so'rovlari planshet/desktopni kengaytiradi.
   ============================================================ */

/* --- Brend tokenlari: OXU KIDS ilovasi (yorqin ko'k + gold) --- */
.pp-body {
    --pp-brand: #2a4bdf;
    --pp-brand-2: #1d36a8;
    --pp-brand-ink: #1d36a8;
    --pp-hero: linear-gradient(135deg, #2f55f0 0%, #1e3bb8 100%);
    --pp-hero-card: linear-gradient(135deg, #2a4bdf 0%, #1d36a8 100%);

    --pp-accent: #c8a24b;
    --pp-accent-2: #e0bc6a;
    --pp-accent-soft: #f7ebcb;
    --pp-accent-ink: #8a6b1e;

    --pp-canvas: #f6f7fb;
    --pp-ink: #141a3c;
    --pp-muted: #6a7089;
    --pp-line: #e6e9f4;
    --pp-tint: #e7ebfb;
}

/* Tungi rejim — ilovada yo'q, lekin kabinetda tema almashtirgich bor.
   Brend va aksent saqlanadi, neytral yuzalar qorayadi. */
:root[data-theme="dark"] .pp-body {
    --pp-canvas: #0c1322;
    --pp-ink: #e6eaf5;
    --pp-muted: #939cb4;
    --pp-line: #232c45;
    --pp-tint: #1a2340;
}

/* ------------------------- 1. Karkas ------------------------- */
.pp-body {
    /* Semantik ranglar — ilova bilan bir xil juftliklar */
    --pp-ok: #21865b;
    --pp-ok-soft: #e8f6ef;
    --pp-warn: #a96d16;
    --pp-warn-soft: #fff3d9;
    --pp-err: #c8494e;
    --pp-err-soft: #fff0f0;
    --pp-info: #315ec7;
    --pp-info-soft: #edf3ff;

    /* Ilovadagi radius shkalasi */
    --pp-r-xl: 28px;
    --pp-r-lg: 22px;
    --pp-r-md: 17px;
    --pp-r-sm: 13px;

    --pp-surface: #fff;
    --pp-surface-2: #f7f8fb;
    --pp-shadow: 0 1px 2px rgba(16, 21, 45, 0.04), 0 6px 20px rgba(16, 21, 45, 0.06);

    /* `100dvh` — mobil brauzerda manzil paneli yig'ilganda sahifa
       «sakramasin»; eski brauzerlar uchun `100vh` zaxira bo'lib qoladi. */
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--pp-canvas);
    color: var(--pp-ink);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

:root[data-theme="dark"] .pp-body {
    --pp-surface: #141c30;
    --pp-surface-2: #1a2338;
    --pp-ok-soft: #102a20;
    --pp-warn-soft: #2f2513;
    --pp-err-soft: #331a1c;
    --pp-info-soft: #14203c;
    --pp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* ---- Bo'lim ranglari (ikonka doiralari) ----
   Har bo'lim o'z rangida: ota-ona kerakli plitkani MATNNI o'qimasdan,
   rangi va ikonkasi bo'yicha topadi — ilovadagi kabi. Rang faqat
   ikonka doirasiga tegadi, yorliq har doim `--pp-ink` bo'lib qoladi,
   ya'ni o'qilishi rangga bog'liq emas (WCAG 1.4.1).

   Juftliklar ikonka uchun kamida 3.6:1 kontrast beradi (WCAG 1.4.11
   grafik elementlar uchun 3:1 talab qiladi). */
.pp-tone--blue { --tone-bg: #e6edff; --tone-fg: #2f55f0; }
.pp-tone--violet { --tone-bg: #ede8ff; --tone-fg: #7048e8; }
.pp-tone--pink { --tone-bg: #ffe6f0; --tone-fg: #d6336c; }
.pp-tone--gold { --tone-bg: #fdf0d5; --tone-fg: #a17614; }
.pp-tone--green { --tone-bg: #e2f6ec; --tone-fg: #18794e; }
.pp-tone--orange { --tone-bg: #ffeddb; --tone-fg: #b45309; }
.pp-tone--indigo { --tone-bg: #e7e9fd; --tone-fg: #4c4fd6; }

:root[data-theme="dark"] .pp-tone--blue { --tone-bg: #16224a; --tone-fg: #8fabff; }
:root[data-theme="dark"] .pp-tone--violet { --tone-bg: #221a4a; --tone-fg: #b9a6ff; }
:root[data-theme="dark"] .pp-tone--pink { --tone-bg: #3a1729; --tone-fg: #ff9ec2; }
:root[data-theme="dark"] .pp-tone--gold { --tone-bg: #322613; --tone-fg: #e8c96a; }
:root[data-theme="dark"] .pp-tone--green { --tone-bg: #102a20; --tone-fg: #74d7a6; }
:root[data-theme="dark"] .pp-tone--orange { --tone-bg: #33210f; --tone-fg: #f0ac6a; }
:root[data-theme="dark"] .pp-tone--indigo { --tone-bg: #1b1d40; --tone-fg: #a7abff; }

/* Rangli ikonka doirasi — plitka, ko'rsatkich kartasi va shior
   kartasida bir xil. `--tone-*` berilmagan bo'lsa brend rangiga
   qaytadi, ya'ni yangi joyda sinf unutilsa ham ko'rinish buzilmaydi. */
.pp-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--tone-bg, var(--pp-tint));
    color: var(--tone-fg, var(--pp-brand));
}

.pp-ic .i { width: 22px; height: 22px; }

/* Oltin chiziqcha — sarlavha va bo'lim yozuvlari oldidagi bezak */
.pp-dash {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--pp-accent);
    vertical-align: middle;
    margin-right: 8px;
}

/* Ikonkalar. `ui.css` dagi umumiy `.i` CRM'ning TO'Q sidebari uchun
   `stroke: #fff` bilan keladi — oq yuzada ko'rinmay qolardi. */
.pp-body .i { stroke: currentColor; }

/* `<button>` brauzerda shriftni MEROS QILMAYDI — shusiz «Chiqish»,
   «Yana» va barcha tugmalar tizim shriftida chiqib, matnli havolalardan
   ko'zga tashlanadigan darajada farq qilardi. */
.pp-body button,
.pp-body input,
.pp-body select,
.pp-body textarea { font-family: inherit; }

.pp-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.pp-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pp-main {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    /* Pastki panel: 68px + 2x7px margin = 82px, ustiga zaxira */
    padding: 0 var(--sp-4) calc(96px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------- 2. Gradientli sarlavha ------------------------- */
/* Ilovadagi header: gradient fon, logo, nom va o'ng tarafda amallar.
   Kontent uning ostidan «chiqib» turadi (salbiy margin). */
/* Yon chetlar `.pp-hero__inner` da — sarlavha matni pastdagi kontent
   ustuni bilan AYNAN bir chiziqda turishi uchun (ilgari sarlavha butun
   kenglikda edi, kontent esa markazda: katta ekranda ~400px siljish). */
.pp-hero {
    background: var(--pp-hero);
    /* Pastki burchaklar yumaloq: kontent uning USTIGA chiqmaydi, ostidan
       boshlanadi (ilgari `.pp-lift` bilan salbiy margin ishlatilardi va
       karta sarlavhani kesib o'tardi). */
    border-radius: 0 0 var(--pp-r-xl) var(--pp-r-xl);
    padding: calc(env(safe-area-inset-top, 0px) + var(--sp-4)) 0 var(--sp-6);
    color: #fff;
}

/* O'lchamlari `.pp-main` bilan bir xil bo'lishi SHART */
.pp-hero__inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.pp-hero__top { display: flex; align-items: center; gap: var(--sp-3); }

.pp-hero__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: #fff;
    text-decoration: none;
    min-width: 0;
}

.pp-hero__brand:hover { color: #fff; }

.pp-hero__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--pp-r-sm);
    background: rgba(255, 255, 255, 0.14);
}

.pp-hero__mark img { width: 30px; height: 30px; object-fit: contain; display: block; }

.pp-hero__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    letter-spacing: 0.08em;
    line-height: 1.15;
}

.pp-hero__sub { font-size: var(--fs-xs); color: var(--pp-accent-2); }

.pp-hero__spacer { flex: 1; }

.pp-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px — barmoq uchun eng kichik qulay o'lcham */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.pp-hero__btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Sahifa nomi — sarlavha ichida, kontentdan oldin */
.pp-hero__title {
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-b);
    color: #fff;
}

.pp-hero__note { margin-top: 2px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.72); }

/* Sarlavhaning ikkinchi qavati: matn + bezak yonma-yon */
.pp-hero__panel {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.pp-hero__text { flex: 1; min-width: 0; }

/* Oltin kicker — «Oilangiz bilan yanada yaqinroq» */
.pp-hero__kicker {
    display: none;
    align-items: center;
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-accent-2);
}

/* Sana — kalendar ikonkasi bilan */
.pp-hero__date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, 0.78);
}

.pp-hero__date .i { width: 15px; height: 15px; flex-shrink: 0; }

/* Bezak: qo'lyozma uslubidagi shior + tasvir */
/* `align-self: stretch` ATAYLAB yo'q: u bilan ustun panel balandligiga
   cho'zilib, ichidagi burilgan shior kartadan CHIQIB ketardi. Endi
   ustun o'z balandligini beradi va panel unga moslashadi. */
.pp-art {
    flex: 0 0 auto;
    width: 118px;
    display: flex;
    flex-direction: column;
}

.pp-art__tag {
    margin: 0;
    /* Playfair Display loyihada allaqachon bor (`static/fonts/`), ya'ni
       yangi shrift yuklab olinmaydi. Kursiv brauzer tomonidan
       sintezlanadi — bezak matni uchun yetarli. */
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: var(--fw-b);
    font-size: var(--fs-xs);
    line-height: 1.2;
    color: var(--pp-accent-2);
    /* Burilish MARKAZ atrofida: `left bottom` bilan matnning o'ng uchi
       o'z qutisidan ~18px yuqoriga chiqib, kartaning yumaloq chetida
       kesilib qolardi. Markaz bilan chiqish ikki barobar kichik va
       yuqoridagi bo'shliq uni yutadi. */
    padding: 4px 0;
    transform: rotate(-4deg);
    transform-origin: center;
}

.pp-art__swash { display: block; width: 76px; height: 9px; margin-top: 3px; color: var(--pp-accent); }
.pp-art__img { display: block; width: 100%; height: auto; margin-top: var(--sp-2); }

/* Kontent sarlavhaning OSTIDAN boshlanadi (ustiga chiqmaydi) */
.pp-lift { margin-top: var(--sp-4); }

/* Til almashtirgich sarlavha ustida oq bo'lishi kerak */
.pp-hero .lang-switch { background: rgba(255, 255, 255, 0.12); border-color: transparent; }
.pp-hero .lang-switch__btn { color: rgba(255, 255, 255, 0.72); }
.pp-hero .lang-switch__btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ------------------------- 3. Kartalar ------------------------- */
.pp-card {
    background: var(--pp-surface);
    border-radius: var(--pp-r-lg);
    box-shadow: var(--pp-shadow);
    padding: var(--sp-4);
}

.pp-card + .pp-card,
.pp-card + .pp-sec,
.pp-sec + .pp-card { margin-top: var(--sp-3); }

.pp-card--flat { box-shadow: none; border: 1px solid var(--pp-line); }

/* Karta havola bo'lsa: brauzerning ko'k tagchizig'i emas, karta o'zi
   bosiladigan ko'rinishda bo'ladi. Bunisiz `ui.css` da umumiy `a`
   qoidasi yo'qligi uchun karta ichidagi matn tagi chizilgan holda
   chiqardi. */
a.pp-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease, ease),
                transform var(--dur-fast) var(--ease, ease);
}

a.pp-card:hover { color: inherit; }
a.pp-card:active { transform: scale(0.995); }

/* Katta yozilgan ism (farzand va profil sahifalarining sarlavhasi) */
.pp-name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    line-height: 1.2;
    word-break: break-word;
}

/* Farzand kartasi — avatar + ism + joy + amal.
   Selektorda `a.pp-card` ham bor: usiz `a.pp-card { display: block }`
   (aniqligi yuqoriroq) uni ustundan qatorga o'tkazmasdi. */
.pp-kidcard,
a.pp-card.pp-kidcard { display: flex; align-items: center; gap: var(--sp-3); }
.pp-kidcard__main { flex: 1; min-width: 0; }

.pp-kidcard__name {
    display: block;
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    line-height: 1.2;
    word-break: break-word;
}

.pp-kidcard__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: var(--fs-sm);
    color: var(--pp-muted);
    overflow-wrap: anywhere;
}

.pp-kidcard__meta .i { width: 14px; height: 14px; flex-shrink: 0; color: var(--pp-brand); }
:root[data-theme="dark"] .pp-kidcard__meta .i { color: var(--pp-accent-2); }

/* Telefonda yakka strelka, desktopda matnli tugma: katta ekranda
   strelkaning o'zi nima qilishini aytmaydi. */
.pp-kidcard__go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pp-muted);
}

.pp-kidcard__go .i { width: 18px; height: 18px; }
.pp-kidcard__go-label { display: none; }

/* Bo'lim sarlavhasi + «barchasi» havolasi */
.pp-sec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-3);
}

.pp-sec__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-b); }

/* O'ng tarafdagi izoh («Kerakli bo'limni tanlang») — havola EMAS,
   shu bois rangi ham, kursori ham boshqacha. */
.pp-sec__hint {
    display: flex;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--pp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sec__link {
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    color: var(--pp-brand);
    text-decoration: none;
    white-space: nowrap;
}

:root[data-theme="dark"] .pp-sec__link { color: var(--pp-accent-2); }

/* ------------------------- 4. Avatar ------------------------- */
.pp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--pp-tint);
    color: var(--pp-brand);
    font-weight: var(--fw-b);
    font-size: var(--fs-md);
}

.pp-avatar--sm { width: 40px; height: 40px; font-size: var(--fs-sm); }
.pp-avatar--lg { width: 76px; height: 76px; font-size: var(--fs-xl); }

:root[data-theme="dark"] .pp-avatar { color: var(--pp-accent-2); }

/* ------------------------- 5. Farzand tanlagich ------------------------- */
.pp-kids {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 var(--sp-1);
    margin-bottom: var(--sp-3);
}

.pp-kids::-webkit-scrollbar { display: none; }

.pp-kid {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
    padding: 7px var(--sp-4) 7px 7px;
    border-radius: 999px;
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Faol chip OLTIN rangda. Ilgari u `--pp-brand` edi, ya'ni sarlavha
   gradienti bilan deyarli bir xil to'q ko'k — chip esa `.pp-lift` tufayli
   sarlavha ustiga chiqadi va tanlangan farzand ko'rinmay qolardi.
   Oltin ikkala fonda ham (to'q sarlavha va och kanva) ajralib turadi va
   bu fayldagi «faol» tili bilan bir xil (`.pp-tab.is-active`). */
/* Matn rangi QATTIQ berilgan (`--pp-ink` emas): oltin fon tungi rejimda
   ham och qoladi, `--pp-ink` esa u yerda oqarib ketib kontrastni
   yo'qotardi. `.pp-btn--gold` bilan bir xil qoida. */
.pp-kid.is-active { background: var(--pp-accent); color: #33260a; }
.pp-kid.is-active .pp-kid__meta { color: rgba(41, 30, 6, 0.72); }
.pp-kid.is-active .pp-avatar { background: rgba(41, 30, 6, 0.14); color: #33260a; }

.pp-kid__name { font-size: var(--fs-md); font-weight: var(--fw-sb); line-height: 1.15; }
.pp-kid__meta { font-size: var(--fs-xs); color: var(--pp-muted); }
.pp-kid .pp-avatar { width: 34px; height: 34px; font-size: var(--fs-xs); }

/* ------------------------- 6. Plitkalar (ilovadagi 3×3) ------------------------- */
.pp-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}

@media (min-width: 520px) { .pp-tiles { gap: var(--sp-3); } }
@media (min-width: 900px) { .pp-tiles { grid-template-columns: repeat(6, 1fr); } }

.pp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-2);
    border-radius: var(--pp-r-lg);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink);
    text-decoration: none;
    text-align: center;
    min-height: 104px;
    transition: transform var(--dur-fast) var(--ease, ease);
}

.pp-tile:active { transform: scale(0.97); }
.pp-tile:hover { color: var(--pp-ink); }

/* Ikonka doirasi — `.pp-ic` bilan bir xil, rangi `--tone-*` dan */
.pp-tile__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--tone-bg, var(--pp-tint));
    color: var(--tone-fg, var(--pp-brand));
}

.pp-tile__ic .i { width: 22px; height: 22px; }

.pp-tile__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    line-height: 1.2;
    /* `break-word`, `anywhere` EMAS: oxirgisi so'zni o'rtasidan
       bo'lardi («Mashg'ulo / t jadvali»). Telefonda to'rtta ustun bor,
       shu bois yozuv ham bir pog'ona kichik. */
    overflow-wrap: break-word;
    font-size: var(--fs-xs);
}

@media (min-width: 520px) { .pp-tile__label { font-size: var(--fs-sm); } }

/* Strelka faqat desktopda: telefonda plitka o'zi tugma kabi ko'rinadi
   va qo'shimcha belgi joy egallardi. */
.pp-tile__chev { display: none; }

/* ------------------------- 7. Ko'rsatkich kartalari ------------------------- */
.pp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}

@media (min-width: 720px) { .pp-stats { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }

.pp-stat {
    display: flex;
    align-items: flex-start;
    /* Telefonda ikkita ustun bor va har piksel sanaladi: «Hali
       belgilanmagan» kabi izoh bir qatorga sig'ishi kerak. */
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--pp-r-md);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
}

/* Rangli ikonka — kartaning chap tomonida */
.pp-stat__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--tone-bg, var(--pp-tint));
    color: var(--tone-fg, var(--pp-brand));
}

.pp-stat__ic .i { width: 20px; height: 20px; }
.pp-stat__body { flex: 1; min-width: 0; }

@media (min-width: 520px) {
    .pp-stat { gap: var(--sp-3); padding: var(--sp-4); }
    .pp-stat__ic { width: 42px; height: 42px; }
}

/* Ko'rsatkich kartasi havola bo'lsa — `a.pp-card` bilan bir xil qoida.
   Bunisiz shablonda har karta uchun `style="text-decoration:none;
   color:inherit;"` takrorlanardi (bosh sahifada olti marta). */
a.pp-stat {
    /* `display` ATAYLAB berilmaydi: `.pp-stat` ning o'zi `flex`, va bu
       yerda `block` yozilsa (aniqligi yuqoriroq) ikonka matn ustiga
       tushib qolardi. */
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--dur-fast) var(--ease, ease),
                transform var(--dur-fast) var(--ease, ease);
}

a.pp-stat:hover { color: inherit; }
a.pp-stat:active { transform: scale(0.99); }

.pp-stat__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    color: var(--pp-muted);
    margin-bottom: var(--sp-1);
}

.pp-stat__value {
    display: block;
    font-size: var(--fs-xl);
    font-weight: var(--fw-b);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Matnli qiymat (dars nomi, ovqat nomi) — raqamdan kichikroq, aks holda
   ikki so'zli nom kartadan chiqib ketadi. `--md` va `--lg` shablonda
   takrorlangan inline `font-size` larni almashtiradi. */
.pp-stat__value--md { font-size: var(--fs-md); }
.pp-stat__value--lg { font-size: var(--fs-lg); }
.pp-stat__value--muted { color: var(--pp-muted); }

.pp-stat__hint { display: block; font-size: var(--fs-xs); color: var(--pp-muted); margin-top: 2px; }

/* Kartaning pastidagi amal («Efirni ochish») — butun karta havola,
   shu bois bu tugma emas, faqat AMAL borligini aytadigan belgi. */
.pp-stat__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    color: var(--pp-live, var(--pp-ok));
}

.pp-stat__cta .i { width: 12px; height: 12px; }

.pp-stat--ok .pp-stat__value { color: var(--pp-ok); }
.pp-stat--warn .pp-stat__value { color: var(--pp-warn); }
.pp-stat--err .pp-stat__value { color: var(--pp-err); }

/* Gradientli «pul» kartasi (ilovadagi shartnoma kartasi) */
.pp-money {
    padding: var(--sp-5);
    border-radius: var(--pp-r-lg);
    background: var(--pp-hero-card);
    color: #fff;
    box-shadow: var(--pp-shadow);
}

.pp-money__kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    letter-spacing: var(--caps, 0.04em);
    text-transform: uppercase;
    color: var(--pp-accent-2);
}

.pp-money__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-b);
    color: var(--pp-accent-2);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    margin-top: var(--sp-2);
    word-break: break-word;
}

.pp-money__note { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); margin-top: 2px; }

.pp-money__chip {
    display: inline-block;
    margin-top: var(--sp-3);
    padding: 6px 12px;
    border-radius: var(--pp-r-sm);
    background: rgba(255, 255, 255, 0.14);
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
}

/* ------------------------- 8. Ro'yxat qatorlari ------------------------- */
/* Jadval O'RNIGA: telefonda jadval baribir sig'maydi, ilova ham
   ro'yxat ishlatadi. Shu bois kabinetda <table> umuman yo'q. */
.pp-list { display: flex; flex-direction: column; }

.pp-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--pp-line);
    color: inherit;
    text-decoration: none;
    min-height: 56px;
}

.pp-list > .pp-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-list > .pp-item:first-child { padding-top: 0; }

.pp-item__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--pp-tint);
    color: var(--pp-brand);
}

.pp-item__ic .i { width: 19px; height: 19px; }
:root[data-theme="dark"] .pp-item__ic { color: var(--pp-accent-2); }

.pp-item__main { flex: 1; min-width: 0; }

.pp-item__title {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    line-height: 1.3;
}

/* Tanaffus qatori — sarlavhasi so'ngan: u hodisa emas, DARSLAR ORASIDAGI
   bo'shliq va ro'yxatda mashg'ulot bilan teng og'irlikda turmasligi kerak. */
.pp-item__title--muted { color: var(--pp-muted); font-weight: var(--fw-sb); }

.pp-item__meta {
    display: block;
    font-size: var(--fs-sm);
    color: var(--pp-muted);
    line-height: 1.35;
}

.pp-item__side { flex-shrink: 0; text-align: right; }

.pp-item__value {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sichqonchali qurilmada bosiladigan qatorlar javob berishi kerak;
   telefonda `:hover` «yopishib» qolmasligi uchun media bilan ajratilgan. */
@media (hover: hover) {
    a.pp-card:hover {
        box-shadow: 0 2px 4px rgba(16, 21, 45, 0.06), 0 10px 28px rgba(16, 21, 45, 0.10);
    }

    a.pp-item:hover { background: var(--pp-surface-2); }
    a.pp-item:hover .pp-item__chev { color: var(--pp-brand); }
    .pp-kid:hover { background: var(--pp-surface-2); }
    .pp-kid.is-active:hover { background: var(--pp-accent); }
    .pp-seg__item:hover { color: var(--pp-ink); }
    .pp-seg__item.is-active:hover { color: #fff; }
    .pp-tile:hover { box-shadow: 0 2px 4px rgba(16, 21, 45, 0.06), 0 10px 28px rgba(16, 21, 45, 0.10); }
}

/* Qator butun kenglikda yoritilishi uchun ichkariga surilgan chekka */
a.pp-item {
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
    margin-left: calc(var(--sp-2) * -1);
    margin-right: calc(var(--sp-2) * -1);
    border-radius: var(--pp-r-sm);
    transition: background var(--dur-fast) var(--ease, ease);
}

.pp-item__chev { flex-shrink: 0; color: var(--pp-muted); }
.pp-item__chev .i { width: 18px; height: 18px; }

/* Vaqt ustuni (dars jadvali, kun tartibi) */
.pp-time {
    flex-shrink: 0;
    width: 62px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    color: var(--pp-brand);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

:root[data-theme="dark"] .pp-time { color: var(--pp-accent-2); }

/* ------------------------- 9. Nishonlar ------------------------- */
.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--pp-surface-2);
    color: var(--pp-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    white-space: nowrap;
}

.pp-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pp-badge--ok { background: var(--pp-ok-soft); color: var(--pp-ok); }
.pp-badge--warn { background: var(--pp-warn-soft); color: var(--pp-warn); }
.pp-badge--danger { background: var(--pp-err-soft); color: var(--pp-err); }
.pp-badge--info { background: var(--pp-info-soft); color: var(--pp-info); }

/* Baho chipi */
.pp-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-b);
    background: var(--pp-tint);
    color: var(--pp-brand);
}

.pp-grade--ok { background: var(--pp-ok-soft); color: var(--pp-ok); }
.pp-grade--warn { background: var(--pp-warn-soft); color: var(--pp-warn); }
.pp-grade--danger { background: var(--pp-err-soft); color: var(--pp-err); }

/* ------------------------- 10. Segment (filtr) ------------------------- */
.pp-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--pp-surface);
    border-radius: 999px;
    box-shadow: var(--pp-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

.pp-seg::-webkit-scrollbar { display: none; }

.pp-seg__item {
    flex: 1;
    padding: 9px var(--sp-4);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    color: var(--pp-muted);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.pp-seg__item.is-active { background: var(--pp-brand); color: #fff; }

/* ------------------------- 11. Progress ------------------------- */
.pp-bar { height: 8px; border-radius: 999px; background: var(--pp-line); overflow: hidden; }
.pp-bar__fill { height: 100%; border-radius: 999px; background: var(--pp-ok); }
.pp-bar__fill--warn { background: var(--pp-warn); }
.pp-bar__fill--danger { background: var(--pp-err); }

/* ------------------------- 12. Bo'sh holat ------------------------- */
.pp-empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--pp-muted);
    font-size: var(--fs-md);
}

.pp-empty .i { width: 34px; height: 34px; opacity: 0.45; margin-bottom: var(--sp-3); }

/* ------------------------- 13. Pastki navigatsiya ------------------------- */
/* Ilovadagi panel: 68px, faol element — oltin fondagi «pill». */
.pp-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sidebar);
    display: grid;
    /* Ustunlar soni QATTIQ berilmaydi: `MOBILE_NAV_CODES` da 3 ta band +
       «Yana» = 4 ta, qattiq `repeat(5, …)` esa bo'sh ustun qoldirib
       bandlarni chapga surib qo'yardi. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--pp-surface);
    border-top: 1px solid var(--pp-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pp-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 68px;
    margin: 7px 4px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--pp-muted);
    text-decoration: none;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-sb);
    cursor: pointer;
    line-height: 1.1;
    text-align: center;
}

.pp-tab .i { width: 24px; height: 24px; }
.pp-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Faol band — brend rangida, fonsiz (ilovadagi kabi). Rang yagona
   belgi EMAS: shablon `aria-current="page"` ham qo'yadi. */
.pp-tab.is-active { color: var(--pp-brand); font-weight: var(--fw-b); }
:root[data-theme="dark"] .pp-tab.is-active { color: var(--pp-accent-2); }

/* ------------------------- 14. Yon menyu (desktop) ------------------------- */
.pp-side { display: none; }

@media (min-width: 992px) {
    .pp-tabs { display: none; }
    .pp-main { padding-bottom: var(--sp-10); max-width: 860px; }
    /* Sarlavha va kontent ustuni bir xil kenglikda — aks holda katta
       ekranda sarlavha chapda, kartalar markazda qolib ketardi. */
    .pp-hero__inner { max-width: 860px; }

    .pp-shell { flex-direction: row; }

    /* Yon menyu YORUG': maketda u oq/och ko'k, matni to'q. To'q ko'k
       ustun katta ekranda sahifaning yarmini «og'irlashtirib» qo'yardi. */
    .pp-side {
        display: flex;
        flex-direction: column;
        width: 264px;
        flex-shrink: 0;
        padding: var(--sp-5) var(--sp-3);
        background: linear-gradient(180deg, var(--pp-surface) 0%, var(--pp-tint) 100%);
        border-right: 1px solid var(--pp-line);
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }

    .pp-side__brand {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: 0 var(--sp-3) var(--sp-5);
        color: var(--pp-ink);
        text-decoration: none;
    }

    .pp-side__brand:hover { color: var(--pp-ink); }
    .pp-side__nav { display: flex; flex-direction: column; gap: 2px; }

    .pp-side__name {
        font-size: var(--fs-lg);
        font-weight: var(--fw-b);
        letter-spacing: .08em;
        line-height: 1.15;
        color: var(--pp-brand);
    }

    .pp-side__sub { font-size: var(--fs-xs); color: var(--pp-accent-ink); }
    :root[data-theme="dark"] .pp-side__name { color: var(--pp-ink); }
    :root[data-theme="dark"] .pp-side__sub { color: var(--pp-accent-2); }

    /* Logotip OQ tasvir — yorug' menyuda ko'rinishi uchun brend
       rangidagi nishon ichida chiziladi. */
    .pp-side .pp-brand-mark { background: var(--pp-brand); }

    .pp-link {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        height: 46px;
        padding: 0 var(--sp-4);
        border-radius: 14px;
        color: var(--pp-ink);
        text-decoration: none;
        font-size: var(--fs-md);
        font-weight: var(--fw-md);
        transition: background var(--dur-fast) var(--ease, ease);
    }

    .pp-link .i { width: 20px; height: 20px; color: var(--pp-muted); }
    .pp-link:hover { background: var(--pp-surface-2); color: var(--pp-ink); }

    /* Faol band — och ko'k «pill» va CHAPDA oltin chiziq. Chiziq
       `box-shadow: inset` bilan: chegara qo'shilsa band 3px siljib,
       qolganlaridan chiqib qolardi. */
    .pp-link.is-active {
        background: var(--pp-tint);
        box-shadow: inset 3px 0 0 var(--pp-accent);
        color: var(--pp-brand);
        font-weight: var(--fw-sb);
    }

    .pp-link.is-active .i { color: var(--pp-brand); }
    :root[data-theme="dark"] .pp-link.is-active { color: var(--pp-accent-2); }
    :root[data-theme="dark"] .pp-link.is-active .i { color: var(--pp-accent-2); }

    /* Menyu pastidagi shior */
    .pp-side__motto {
        margin: auto 0 0;
        padding: var(--sp-5) var(--sp-3) 0;
        font-size: var(--fs-xs);
        font-weight: var(--fw-sb);
        line-height: 1.35;
        color: var(--pp-muted);
    }

    /* Desktopda sarlavha ichida brend takrorlanmaydi */
    .pp-hero__brand { display: none; }

    /* Sarlavha KARTAGA aylanadi: gradient butun kenglikni egallamaydi,
       til/tema tugmalari esa yorug' fonda qoladi. */
    .pp-hero { background: none; border-radius: 0; padding: var(--sp-5) 0 0; }
    .pp-hero__top { justify-content: flex-end; }
    .pp-hero__kicker { display: flex; }

    .pp-hero__panel {
        background: var(--pp-hero);
        border-radius: var(--pp-r-xl);
        padding: var(--sp-6);
        margin-top: var(--sp-4);
        gap: var(--sp-5);
        /* Xavfsizlik to'ri: burilgan shior yumaloq kartadan chiqmasin */
        overflow: hidden;
    }

    .pp-hero__btn { background: var(--pp-surface); color: var(--pp-ink); box-shadow: var(--pp-shadow); }
    .pp-hero__btn:hover { background: var(--pp-surface-2); color: var(--pp-ink); }
    .pp-hero .lang-switch { background: var(--pp-surface); box-shadow: var(--pp-shadow); }
    .pp-hero .lang-switch__btn { color: var(--pp-muted); }
    .pp-hero .lang-switch__btn[aria-pressed="true"] { background: var(--pp-brand); color: #fff; }

    .pp-lift { margin-top: var(--sp-4); }
    .pp-art { width: 214px; }
    .pp-art__tag { font-size: var(--fs-md); }
    .pp-art__swash { width: 118px; height: 12px; }

    /* Farzand kartasidagi amal — matnli tugma */
    .pp-kidcard__go {
        height: 40px;
        padding: 0 var(--sp-4);
        border-radius: 999px;
        background: var(--pp-tint);
        color: var(--pp-brand);
        font-size: var(--fs-sm);
        font-weight: var(--fw-sb);
    }

    .pp-kidcard__go-label { display: inline; }

    /* Plitka — chapda ikonka, o'ngda strelka, pastda yorliq */
    .pp-tile { align-items: flex-start; text-align: left; padding: var(--sp-4); min-height: 116px; }
    .pp-tile__label { margin-top: auto; }
    .pp-tile__chev {
        display: block;
        position: absolute;
        top: var(--sp-4);
        right: var(--sp-4);
        color: var(--pp-muted);
    }

    .pp-tile__chev .i { width: 16px; height: 16px; }
}

/* `ui.css` dagi umumiy fokus halqasi CRM'ning `--royal` rangida, ya'ni
   MUASSASA rangi: bog'chada u EMERALD YASHIL. Kabinet esa CRM rang
   sxemasiga ergashmaydi (OXUKIDS — ko'k+oltin), shu bois kirish
   sahifasidagi har bir maydon brendga umuman mos kelmaydigan yashil
   halqa bilan chiqardi. Halqa kabinet brendiga o'tkaziladi.

   Tartib MUHIM: quyidagi to'q yuzalar qoidasi bilan solishtirma
   aniqligi (specificity) BIR XIL, shu bois u KEYIN turishi kerak —
   aks holda sarlavhadagi oltin halqa ustidan yozilardi. */
.pp-body a:focus-visible,
.pp-body button:focus-visible,
.pp-body input:focus-visible,
.pp-body select:focus-visible,
.pp-body textarea:focus-visible,
.pp-body summary:focus-visible,
.pp-body [tabindex]:focus-visible {
    outline-color: var(--pp-brand);
}

/* To'q ko'k sarlavhada brend rangidagi halqa deyarli ko'rinmaydi —
   u yerda halqa OLTIN bo'ladi (klaviatura bilan yurganda qayerda
   turgani bilinishi kerak). */
.pp-hero a:focus-visible,
.pp-hero button:focus-visible {
    outline-color: var(--pp-accent-2);
}

/* Yon menyu endi YORUG' (maket bo'yicha), shu bois u yerda halqa
   oltin emas, brend rangida bo'ladi — oq fonda oltin sezilmaydi. */
.pp-side a:focus-visible,
.pp-side button:focus-visible {
    outline-color: var(--pp-brand);
}

/* Desktopda til/tema tugmalari gradientdan CHIQIB, yorug' fonda
   qoladi. Solishtirma aniqligi yuqoriroq (`.pp-body` qo'shilgan),
   shu bois yuqoridagi oltin qoidani bosib o'tadi. */
@media (min-width: 992px) {
    .pp-body .pp-hero__top a:focus-visible,
    .pp-body .pp-hero__top button:focus-visible {
        outline-color: var(--pp-brand);
    }
}

/* Havola kabi ko'rinadigan forma tugmasi. Media so'rovdan TASHQARIDA:
   `.pp-link` desktop yon menyusida ishlatiladi, lekin reset media
   ichiga tushsa telefonda ochilgan sahifada buzilib ko'rinardi. */
button.pp-link {
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

/* ------------------------- 15. Kuzatuv rejimi ------------------------- */
.pp-watch {
    position: sticky;
    top: 0;
    z-index: calc(var(--z-header) + 1);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    background: var(--pp-warn-soft);
    color: var(--pp-warn);
    border-bottom: 1px solid var(--pp-warn);
    font-size: var(--fs-sm);
    font-weight: var(--fw-md);
}

.pp-watch__ic { display: inline-flex; flex-shrink: 0; }
.pp-watch__ic .i { width: 18px; height: 18px; }
.pp-watch__text { flex: 1; min-width: 200px; }

.pp-watch__btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 var(--sp-4);
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    cursor: pointer;
}

/* ------------------------- 16. Tugma va matn ------------------------- */
.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--sp-5);
    border: 0;
    border-radius: var(--pp-r-md);
    background: var(--pp-brand);
    color: #fff;
    font-size: var(--fs-base);
    font-weight: var(--fw-sb);
    cursor: pointer;
    text-decoration: none;
}

.pp-btn:hover { background: var(--pp-brand-2); color: #fff; }
.pp-btn:active { transform: scale(0.99); }

.pp-btn--gold {
    background: linear-gradient(135deg, var(--pp-accent-2), var(--pp-accent));
    color: #3a2c06;
}

.pp-btn--gold:hover { filter: brightness(1.05); color: #3a2c06; }

.pp-btn--ghost {
    width: auto;
    min-height: 38px;
    background: var(--pp-surface-2);
    color: var(--pp-ink);
    font-size: var(--fs-sm);
}

.pp-btn--ghost:hover { background: var(--pp-tint); color: var(--pp-ink); }

.pp-muted { color: var(--pp-muted); font-size: var(--fs-sm); }
.pp-strong { font-weight: var(--fw-sb); }
.pp-num { font-variant-numeric: tabular-nums; }
.pp-row-split { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }

/* ------------------------- 17. Kirish sahifasi ------------------------- */
.pp-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--pp-hero);
}

.pp-auth__top {
    padding: calc(env(safe-area-inset-top, 0px) + var(--sp-8)) var(--sp-5) var(--sp-8);
    text-align: center;
    color: #fff;
}

/* Brend nomi (OXUSCHOOL / OXUKIDS) — sarlavhadan KICHIK va oltin rangda:
   u mahsulot nomi, sahifa nomi emas. Matn `domain.BRAND_NAME` dan keladi. */
.pp-auth__brand {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pp-accent-2);
}

.pp-auth__title { font-size: var(--fs-xl); font-weight: var(--fw-b); margin: var(--sp-2) 0 var(--sp-1); }
.pp-auth__sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); margin: 0; }

.pp-auth__sheet {
    flex: 1;
    background: var(--pp-canvas);
    border-radius: var(--pp-r-xl) var(--pp-r-xl) 0 0;
    padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
}

.pp-auth__inner { width: 100%; max-width: 420px; margin: 0 auto; }

.pp-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--pp-r-sm);
    background: rgba(255, 255, 255, 0.14);
}

.pp-brand-mark img { display: block; width: 30px; height: 30px; object-fit: contain; }
.pp-brand-mark--lg { width: 76px; height: 76px; border-radius: var(--pp-r-lg); }
.pp-brand-mark--lg img { width: 50px; height: 50px; }

.pp-field { margin-bottom: var(--sp-4); }

.pp-field__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    color: var(--pp-ink);
    margin-bottom: var(--sp-2);
}

.pp-input {
    width: 100%;
    height: 52px;
    padding: 0 var(--sp-4);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--pp-ink);
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r-md);
    outline: none;
}

.pp-input:focus { border-color: var(--pp-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-brand) 14%, transparent); }

.pp-input-wrap { position: relative; }
.pp-input-wrap .pp-input { padding-right: 52px; }

.pp-reveal {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--pp-muted);
    cursor: pointer;
}

.pp-reveal:hover { background: var(--pp-surface-2); color: var(--pp-ink); }

.pp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--pp-r-sm);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
    background: var(--pp-err-soft);
    color: var(--pp-err);
}

.pp-alert--info { background: var(--pp-info-soft); color: var(--pp-info); }
.pp-alert--warn { background: var(--pp-warn-soft); color: var(--pp-warn); }
.pp-alert .i { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* ------------------------- 19. Kichik yordamchilar ------------------------- */
/* Shablonlarda takrorlanadigan `style="margin-top:…"` o'rniga: bo'shliq
   qiymati bitta joyda turadi va sahifalar bir-biridan siljib ketmaydi. */
.pp-mt-3 { margin-top: var(--sp-3); }
.pp-mt-4 { margin-top: var(--sp-4); }
.pp-mt-5 { margin-top: var(--sp-5); }
.pp-center { text-align: center; }

/* Matnli tugma («Chiqish») — havola kabi ko'rinadi va shrifti mos keladi */
button.pp-muted {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pp-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.pp-muted:hover { color: var(--pp-ink); }

/* ------------------------- 19. Kun tartibi timeline'i -------------------------
   «Bugun» tabidagi vaqt o'qi: dars/mashg'ulot va ovqatlanish bitta
   ro'yxatda. Ranglar `--pp-*` blokidan olinadi (kabinet OXU KIDS/SCHOOL
   brendida, CRM'nikida emas) va yangi qiymat o'ylab topilmaydi. */
.pp-now {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--pp-r-md);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    border-left: 4px solid var(--pp-ok);
}

.pp-now__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pp-ok);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-ok) 22%, transparent);
}

.pp-now__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pp-now__label {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pp-ok);
    font-weight: var(--fw-sb);
}

.pp-now__title {
    font-weight: var(--fw-sb);
    color: var(--pp-ink);
    overflow-wrap: anywhere;
}

.pp-now__meta,
.pp-now__time {
    font-size: var(--fs-xs);
    color: var(--pp-muted);
}

.pp-now__time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

/* Timeline qatori — chap tomonda turdagi ikonka bilan.
   «Hozir» qatoriga chap chiziq ham qo'shiladi: faqat och yashil fon
   quyoshda va rang ko'rlar uchun sezilmasdi (`.pp-now` kartasidagi
   bilan bir xil qoida). `box-shadow: inset` — chegara qo'shilsa qator
   1px siljib, ro'yxatdagi qolganlaridan chiqib qolardi. */
.pp-tl.is-now {
    background: color-mix(in srgb, var(--pp-ok) 8%, transparent);
    border-radius: var(--pp-r-sm);
    box-shadow: inset 3px 0 0 var(--pp-ok);
    padding-left: var(--sp-3);
    margin-left: calc(var(--sp-3) * -1);
}

.pp-tl__ic--meal {
    color: var(--pp-accent);
}

.pp-tl__ic--schedule {
    color: var(--pp-brand);
}

/* Taomlar — ro'yxat emas, kichik kartochkalar (telefonda o'qish oson) */
.pp-dishes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pp-dish {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 10px;
    border-radius: var(--pp-r-sm);
    background: var(--pp-surface-2, var(--pp-line));
    font-size: var(--fs-xs);
    /* Telefonda (390px) chipsimon kartochka qatordan chiqmasin */
    min-width: 0;
    max-width: 100%;
}

.pp-dish img {
    width: 32px;
    height: 32px;
    border-radius: var(--pp-r-sm);
    object-fit: cover;
    flex: 0 0 auto;
}

.pp-dish__name {
    font-weight: var(--fw-sb);
    color: var(--pp-ink);
    /* Taom nomi CRM'dan keladi — uzunligi cheklanmagan */
    overflow-wrap: anywhere;
}

.pp-dish__meta {
    color: var(--pp-muted);
    font-variant-numeric: tabular-nums;
}

/* ------------------------- 20. Jonli efir -------------------------
   «Jonli efir» sahifasi (bog'chada) va bosh sahifadagi kartasi.

   Rang ATAYLAB semantik `--pp-ok` emas, o'z tokeni: «efir ochiq» —
   holat emas, HODISA, va u ro'yxatdagi barcha yashil belgilardan
   (davomat «Keldi», to'lov «To'langan») ajralib turishi kerak. Qiymat
   oq matn bilan 5.2:1 kontrast beradi (WCAG AA), tungi rejimda esa
   karta foniga nisbatan 3.2:1 — komponent uchun talab qilingan 3:1 dan
   yuqori, shu bois ikkala temada bitta qiymat yetarli. */
.pp-body {
    --pp-live: #0f7d39;
    --pp-live-soft: #e8f6ee;
}

:root[data-theme="dark"] .pp-body { --pp-live-soft: #0e2a1b; }

/* LIVE nishoni — «pulsatsiya» qiladigan nuqta bilan. Rang ko'rlar uchun
   matnning O'ZI («LIVE») ham bor: faqat yashil nuqta yetarli emas. */
.pp-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pp-live);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
    letter-spacing: .08em;
    white-space: nowrap;
}

.pp-live__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pp-pulse 1.6s ease-in-out infinite;
}

@keyframes pp-pulse { 50% { opacity: .3; } }

/* «Hozir efirda» paneli — sahifaning eng muhim qatori */
.pp-livebar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--pp-r-md);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    border-left: 4px solid var(--pp-live);
}

.pp-livebar__main { flex: 1; min-width: 0; }

.pp-livebar__title {
    display: block;
    font-weight: var(--fw-sb);
    color: var(--pp-ink);
    overflow-wrap: anywhere;
}

.pp-livebar__meta {
    display: block;
    font-size: var(--fs-xs);
    color: var(--pp-muted);
    overflow-wrap: anywhere;
}

.pp-livebar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: 999px;
    background: var(--pp-live);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    cursor: pointer;
}

.pp-livebar__btn .i { width: 14px; height: 14px; }

/* Pleyer. `aspect-ratio` bilan: tasvir sahifadagi hech qanday matn
   tufayli KICHRAYMAYDI — mijozning aynan shu shikoyati bo'lgan. */
.pp-player {
    border-radius: var(--pp-r-md);
    overflow: hidden;
    background: #0a1020;
    box-shadow: var(--pp-shadow);
}

.pp-player__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    color: #fff;
}

.pp-player__name {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-player__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    cursor: pointer;
}

.pp-player__close .i { width: 14px; height: 14px; }
.pp-player__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pp-player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Kun tartibi — TAGMA-TAG qatorlar emas, kartalar (mijoz talabi).
   `auto-fill` bilan: telefonda 1 ustun, planshet/desktopda 2 — media
   so'rovsiz, ya'ni yangi almashuv nuqtasi o'ylab topilmaydi. */
.pp-daygrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
    /* Har karta O'Z balandligida: `stretch` (standart) bilan qatordagi
       eng uzun karta qolganlarini ham cho'zib, ostida katta bo'sh joy
       qoldirardi. */
    align-items: start;
}

.pp-day {
    padding: var(--sp-4);
    border-radius: var(--pp-r-md);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    border-left: 4px solid transparent;
}

.pp-day.is-live { border-left-color: var(--pp-live); background: var(--pp-live-soft); }
.pp-day.is-now { border-left-color: var(--pp-warn); }
/* O'tib ketgan qator — o'chirilmaydi, lekin diqqatni tortmasligi kerak */
.pp-day.is-past { opacity: .62; }

.pp-day__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.pp-day__time {
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    color: var(--pp-brand);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:root[data-theme="dark"] .pp-day__time { color: var(--pp-accent-2); }

.pp-day__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-sb);
    line-height: 1.3;
    color: var(--pp-ink);
    /* Mashg'ulot nomi CRM'dan keladi — uzunligi cheklanmagan */
    overflow-wrap: anywhere;
}

.pp-day__meta,
.pp-day__hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-sm);
    color: var(--pp-muted);
    overflow-wrap: anywhere;
}

.pp-day__meta .i { width: 14px; height: 14px; flex-shrink: 0; }
.pp-day__cams { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Kamera tugmasi — «efirni ochish» amali, shu bois teginish maydoni
   44px (WCAG 2.5.5) va rangi LIVE bilan bir xil oilada. */
.pp-cam {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 1px solid color-mix(in srgb, var(--pp-live) 35%, transparent);
    border-radius: 999px;
    background: var(--pp-surface);
    color: var(--pp-live);
    font-size: var(--fs-sm);
    font-weight: var(--fw-sb);
    cursor: pointer;
}

.pp-cam .i { width: 13px; height: 13px; }
.pp-cam.is-open { background: var(--pp-live); border-color: var(--pp-live); color: #fff; }

@media (hover: hover) {
    .pp-cam:hover { background: var(--pp-live); border-color: var(--pp-live); color: #fff; }
    .pp-livebar__btn:hover,
    .pp-player__close:hover { filter: brightness(1.08); }
}

/* Sahifa oxiridagi tushuntirish. ALOHIDA sinf kerak edi: ilgari bu matn
   `pp-hero__note` bilan chizilardi va u gradientli sarlavha uchun OQ
   rangda — oq kartada deyarli ko'rinmasdi. */
.pp-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--pp-muted);
}

.pp-note .i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* Ikonkali nishon: `.pp-badge::before` nuqtasi ikonka bilan birga
   ikkita belgi bo'lib chiqardi. */
.pp-badge--ic::before { display: none; }
.pp-badge--ic .i { width: 13px; height: 13px; }

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

/* ------------------------- 21. Shior kartasi -------------------------
   Bosh sahifaning yakuniy kartasi. ATAYLAB havola EMAS: strelkasi bor,
   lekin hech qayerga olib bormaydigan karta foydalanuvchini aldardi. */
.pp-quote {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--pp-r-lg);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
}

.pp-quote__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--pp-accent-soft);
    color: var(--pp-accent-ink);
}

.pp-quote__ic .i { width: 22px; height: 22px; }
:root[data-theme="dark"] .pp-quote__ic { background: #322613; color: var(--pp-accent-2); }
.pp-quote__body { min-width: 0; }

.pp-quote__text {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--pp-ink);
    overflow-wrap: anywhere;
}

.pp-quote__by {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    color: var(--pp-muted);
}

/* ------------------------- 22. Kundalik uslubidagi bo'limlar -------------------------
   «Baholar», «Davomat», «Kundalik», «Uy vazifalari», «Dars jadvali» (hafta)
   va «To'garaklar» — mijoz namunasi bo'yicha jadvalli ko'rinish.

   ASOSIY QOIDA: jadval FAQAT keng ekranda. Har sahifa bitta ma'lumotdan
   ikki markup chizadi — `.pp-only-wide` (jadval) va `.pp-only-narrow`
   (kartalar); almashuv nuqtasi 900px. Telefonda jadval baribir sig'masdi
   va gorizontal aylanish asosiy UX bo'lib qolardi. */
.pp-only-wide { display: none !important; }

@media (min-width: 900px) {
    .pp-only-wide { display: revert !important; }
    .pp-only-wide.pp-grid-card { display: block !important; }
    .pp-only-wide.pp-actions { display: inline-flex !important; }
    .pp-only-wide.pp-btn { display: inline-flex !important; }
    .pp-only-narrow { display: none !important; }
}

/* Keng sahifa: jadvalli bo'limlar kompyuterda 860px ustunga sig'maydi */
@media (min-width: 992px) {
    .pp-wide .pp-main,
    .pp-wide .pp-hero__inner { max-width: 1280px; }
}

.pp-block { display: block; }
.nowrap { white-space: nowrap; }
.pp-text-danger { color: var(--pp-err); font-weight: var(--fw-sb); }
.pp-text-warn { color: var(--pp-warn); }
.pp-up { color: var(--pp-ok); font-weight: var(--fw-sb); }
.pp-down { color: var(--pp-err); font-weight: var(--fw-sb); }

/* ---- Asboblar qatori: filtr + amallar ---- */
.pp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
}

.pp-actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.pp-actions .pp-btn, .pp-toolbar > .pp-btn { width: auto; }

.pp-btn .i { width: 18px; height: 18px; }

/* Asboblar panelidagi tugma — kanva ustida turadi, shu bois oq yuza va
   soya bilan (boshqa sahifalardagi `--ghost` tugmalari o'zgarmaydi) */
.pp-toolbar .pp-btn--ghost,
.pp-daynav .pp-btn--ghost { box-shadow: var(--pp-shadow); background: var(--pp-surface); min-height: 44px; }

/* ---- Filtr (chorak / oy / fan) ---- */
.pp-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }

.pp-filter { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; max-width: 260px; }

.pp-filter__label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-sb);
    color: var(--pp-muted);
    text-transform: uppercase;
    letter-spacing: var(--caps, 0.04em);
}

.pp-select {
    width: 100%;
    min-height: 44px;
    padding: 0 36px 0 var(--sp-3);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-r-sm);
    background: var(--pp-surface)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23687087' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    color: var(--pp-ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-md);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
}

.pp-select:focus { border-color: var(--pp-brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-brand) 14%, transparent); }

/* Segment qatori asboblar panelida — o'z kengligida, cho'zilmaydi */
.pp-seg--inline { flex: 0 1 auto; }
.pp-seg--inline .pp-seg__item { flex: 0 0 auto; }

.pp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--pp-err);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-b);
}

/* ---- Kun / hafta tanlagich ---- */
.pp-daynav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }

.pp-daynav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pp-r-sm);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    color: var(--pp-ink);
}

.pp-daynav__btn .i { width: 18px; height: 18px; }

.pp-daynav__day {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    border-radius: var(--pp-r-sm);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow);
    font-weight: var(--fw-sb);
    font-variant-numeric: tabular-nums;
}

.pp-daynav__day .i { width: 16px; height: 16px; color: var(--pp-brand); }
.pp-daynav .pp-btn { width: auto; }

/* ---- Jadval (data grid) ----
   `border-collapse: separate` — `collapse` bilan sticky ustun/sarlavha
   aylantirishda chegarasini yo'qotadi (ui.css §31 bilan bir xil sabab). */
.pp-grid-card {
    background: var(--pp-surface);
    border-radius: var(--pp-r-lg);
    box-shadow: var(--pp-shadow);
    overflow: hidden;
}

.pp-grid-scroll { overflow-x: auto; }

.pp-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.pp-grid th,
.pp-grid td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--pp-line);
    text-align: left;
    vertical-align: middle;
}

.pp-grid thead th {
    background: var(--pp-surface-2);
    color: var(--pp-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    white-space: nowrap;
}

.pp-grid thead th small,
.pp-grid th small,
.pp-grid td small { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-md); color: var(--pp-muted); }

.pp-grid tbody th { font-weight: var(--fw-sb); color: var(--pp-ink); }
.pp-grid tfoot th, .pp-grid tfoot td { background: var(--pp-surface-2); border-bottom: 0; }

/* Birinchi ustunlar (№ va nom) gorizontal aylantirishda joyida qoladi */
.pp-grid__num { width: 40px; text-align: center !important; color: var(--pp-muted); }
.pp-grid__name { min-width: 128px; position: sticky; left: 0; z-index: 1; background: var(--pp-surface); }
.pp-grid thead .pp-grid__name, .pp-grid tfoot .pp-grid__name { background: var(--pp-surface-2); }

.pp-grid__day,
.pp-grid__cell,
.pp-grid__sum { text-align: center !important; }

.pp-grid__day { min-width: 36px; padding-left: 2px !important; padding-right: 2px !important; }
.pp-grid__day.is-today, .pp-grid thead th.is-today { color: var(--pp-brand); box-shadow: inset 0 -2px 0 var(--pp-accent); }
.pp-grid__sum { min-width: 64px; }
/* Yakuniy ustun sarlavhasi («Chorak o'rtacha») ikki qatorga bo'linadi —
   bir qatorda u o'nlab sana ustunini jadvaldan siqib chiqarardi */
.pp-grid thead .pp-grid__sum { white-space: normal; line-height: 1.2; max-width: 84px; }
.pp-grid__cell { padding-left: 4px !important; padding-right: 4px !important; }
.pp-grid__cell .pp-mark + .pp-mark { margin-left: 2px; }
.pp-grid__note { min-width: 160px; color: var(--pp-muted); }
.pp-grid__wd { white-space: nowrap; color: var(--pp-muted); }

.pp-grid tbody tr.is-absent > * { background: var(--pp-err-soft); }
.pp-grid tbody tr.is-now > * { background: var(--pp-info-soft); }

@media (hover: hover) {
    .pp-grid tbody tr:hover > td { background: var(--pp-surface-2); }
    .pp-grid tbody tr.is-absent:hover > td { background: var(--pp-err-soft); }
}

/* Haftalik to'r: katak ichida fan kartochkasi */
.pp-grid--week th, .pp-grid--week td { vertical-align: top; }
.pp-grid--week thead th { text-align: center; }
.pp-grid__slot { min-width: 150px; padding: 6px !important; }

.pp-slot {
    display: block;
    padding: var(--sp-2);
    border-radius: var(--pp-r-sm);
    line-height: 1.3;
}

.pp-slot + .pp-slot { margin-top: 4px; }
.pp-slot__head { display: flex; align-items: center; gap: 6px; }
.pp-slot small { display: block; margin-top: 2px; font-size: var(--fs-2xs); opacity: 0.85; color: inherit; }
.pp-slot .pp-subj { width: 22px; height: 22px; font-size: var(--fs-2xs); }

/* ---- Baho belgisi (rang shkalasi legenda bilan bir xil) ---- */
.pp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    line-height: 1;
}

.pp-mark--5 { background: var(--pp-ok-soft); color: var(--pp-ok); }
.pp-mark--4 { background: var(--pp-info-soft); color: var(--pp-info); }
.pp-mark--3 { background: var(--pp-warn-soft); color: var(--pp-warn); }
.pp-mark--2 { background: var(--pp-err-soft); color: var(--pp-err); }

.pp-dashmark { color: var(--pp-muted); opacity: 0.6; }

/* ---- Davomat belgisi (✓ / N / K / S) ---- */
.pp-att {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    line-height: 1;
}

.pp-att--present { background: var(--pp-ok-soft); color: var(--pp-ok); }
.pp-att--absent { background: var(--pp-err-soft); color: var(--pp-err); }
.pp-att--late { background: var(--pp-warn-soft); color: var(--pp-warn); }
.pp-att--excused { background: var(--pp-info-soft); color: var(--pp-info); }
.pp-att--none { background: var(--pp-surface-2); color: var(--pp-muted); }

.pp-stat__ic .pp-att { width: 24px; height: 24px; background: none; color: inherit; }

.pp-attrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pp-item--alert { box-shadow: inset 3px 0 0 var(--pp-err); padding-left: var(--sp-3); }

/* ---- Legenda ---- */
.pp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--pp-muted);
}

.pp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pp-legend .pp-mark { min-width: 24px; height: 22px; font-size: var(--fs-xs); }
.pp-legend .pp-att { width: 22px; height: 22px; font-size: var(--fs-xs); }

/* ---- Fan belgisi: rang + bosh harf ----
   12 juftlik — xodimlar ko'radigan dars jadvali to'ridagi (`timetable.css`
   --tt-s0..s11) ranglar bilan bir xil, indeks ham bir xil formuladan
   (`domain.subject_tone`). Fon och, harf to'q: kontrast >= 4.5:1. */
.pp-body {
    --pp-s0-bg: #dbe7ff; --pp-s0-ink: #173a8a;
    --pp-s1-bg: #d3f1f8; --pp-s1-ink: #0d4f5c;
    --pp-s2-bg: #d6f5e3; --pp-s2-ink: #085d38;
    --pp-s3-bg: #e4f4cf; --pp-s3-ink: #3d5c0b;
    --pp-s4-bg: #fdeec8; --pp-s4-ink: #7a4d05;
    --pp-s5-bg: #ffe4d1; --pp-s5-ink: #8a3c0a;
    --pp-s6-bg: #ffe0e0; --pp-s6-ink: #8f1d1d;
    --pp-s7-bg: #ffe0ef; --pp-s7-ink: #8f1d5b;
    --pp-s8-bg: #ecdffc; --pp-s8-ink: #5b21a8;
    --pp-s9-bg: #e0e4ff; --pp-s9-ink: #3730a3;
    --pp-s10-bg: #d5f0ee; --pp-s10-ink: #0f5f5a;
    --pp-s11-bg: #e6eaf1; --pp-s11-ink: #333f52;
}

:root[data-theme="dark"] .pp-body {
    --pp-s0-bg: #23407f; --pp-s0-ink: #cfe0ff;
    --pp-s1-bg: #123f4a; --pp-s1-ink: #b8ecf7;
    --pp-s2-bg: #0d3f2b; --pp-s2-ink: #a9efcd;
    --pp-s3-bg: #2c3f10; --pp-s3-ink: #d5f0a5;
    --pp-s4-bg: #46350d; --pp-s4-ink: #fcdf9a;
    --pp-s5-bg: #4a2712; --pp-s5-ink: #ffcfae;
    --pp-s6-bg: #4a1a1f; --pp-s6-ink: #ffc2c2;
    --pp-s7-bg: #471a33; --pp-s7-ink: #ffc0dd;
    --pp-s8-bg: #37205b; --pp-s8-ink: #ddc6fb;
    --pp-s9-bg: #272a5e; --pp-s9-ink: #c7ccff;
    --pp-s10-bg: #123c3a; --pp-s10-ink: #aeeae5;
    --pp-s11-bg: #2a3448; --pp-s11-ink: #cdd6e4;
}

.pp-subj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-b);
    background: var(--s-bg, var(--pp-tint));
    color: var(--s-ink, var(--pp-brand));
}

.pp-subj--lg { width: 44px; height: 44px; border-radius: 13px; font-size: var(--fs-lg); }

.pp-subj--0, .pp-subj-bg--0 { --s-bg: var(--pp-s0-bg); --s-ink: var(--pp-s0-ink); }
.pp-subj--1, .pp-subj-bg--1 { --s-bg: var(--pp-s1-bg); --s-ink: var(--pp-s1-ink); }
.pp-subj--2, .pp-subj-bg--2 { --s-bg: var(--pp-s2-bg); --s-ink: var(--pp-s2-ink); }
.pp-subj--3, .pp-subj-bg--3 { --s-bg: var(--pp-s3-bg); --s-ink: var(--pp-s3-ink); }
.pp-subj--4, .pp-subj-bg--4 { --s-bg: var(--pp-s4-bg); --s-ink: var(--pp-s4-ink); }
.pp-subj--5, .pp-subj-bg--5 { --s-bg: var(--pp-s5-bg); --s-ink: var(--pp-s5-ink); }
.pp-subj--6, .pp-subj-bg--6 { --s-bg: var(--pp-s6-bg); --s-ink: var(--pp-s6-ink); }
.pp-subj--7, .pp-subj-bg--7 { --s-bg: var(--pp-s7-bg); --s-ink: var(--pp-s7-ink); }
.pp-subj--8, .pp-subj-bg--8 { --s-bg: var(--pp-s8-bg); --s-ink: var(--pp-s8-ink); }
.pp-subj--9, .pp-subj-bg--9 { --s-bg: var(--pp-s9-bg); --s-ink: var(--pp-s9-ink); }
.pp-subj--10, .pp-subj-bg--10 { --s-bg: var(--pp-s10-bg); --s-ink: var(--pp-s10-ink); }
.pp-subj--11, .pp-subj-bg--11 { --s-bg: var(--pp-s11-bg); --s-ink: var(--pp-s11-ink); }

/* Katak fon rangi (haftalik to'r): fan belgisi ichida esa oq «orol» */
[class*="pp-subj-bg--"] { background: var(--s-bg); color: var(--s-ink); }
[class*="pp-subj-bg--"] .pp-subj { background: var(--pp-surface); color: var(--s-ink); }

.pp-subjname { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pp-subjname > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.pp-subjname small { display: block; font-size: var(--fs-2xs); color: var(--pp-muted); font-weight: var(--fw-md); }

/* ---- Telefon kartalari ---- */
.pp-subjcard + .pp-subjcard,
.pp-lessoncard + .pp-lessoncard { margin-top: var(--sp-3); }
.pp-subjcard__head { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pp-subjcard__avg { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-sm); }

.pp-marks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.pp-markday { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.pp-markday small { font-size: var(--fs-2xs); color: var(--pp-muted); }

.pp-lessoncard.is-now { box-shadow: inset 4px 0 0 var(--pp-info), var(--pp-shadow); }
.pp-lessoncard__line { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pp-lessoncard__line .pp-mark { margin-left: 4px; }

.pp-hwline + .pp-hwline { margin-top: 4px; }

.pp-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.pp-cardgrid > .pp-card + .pp-card { margin-top: 0; }
.pp-item--tight { min-height: 0; padding: var(--sp-2) 0; }
.pp-item--tight .pp-item__ic { width: 32px; height: 32px; border-radius: 10px; }
.pp-item--tight .pp-item__ic .i { width: 16px; height: 16px; }
.pp-inline-ic { width: 14px; height: 14px; vertical-align: -2px; }

/* ---- Dars holati va bosh sahifadagi darslar ---- */
.pp-states { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.pp-badge--now { background: var(--pp-info); color: #fff; }
.pp-item--now { box-shadow: inset 3px 0 0 var(--pp-info); padding-left: var(--sp-3); }
.pp-item--past .pp-item__title { color: var(--pp-muted); }

/* ---- Uy vazifasi: «Bajarildi» ---- */
.pp-doneform { display: inline; margin: 0; }

.pp-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--pp-ok);
    border-radius: 999px;
    background: var(--pp-surface);
    color: var(--pp-ok);
    font-size: var(--fs-xs);
    font-weight: var(--fw-sb);
    cursor: pointer;
}

.pp-done .i { width: 14px; height: 14px; }
.pp-done:hover { background: var(--pp-ok-soft); }

.pp-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pp-muted);
    font-size: var(--fs-xs);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pp-linkbtn:hover { color: var(--pp-ink); }

.pp-attach {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px var(--sp-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--pp-brand);
    text-decoration: none;
}

.pp-attach .i { width: 13px; height: 13px; }
:root[data-theme="dark"] .pp-attach { color: var(--pp-accent-2); }

/* ---- Sinf reytingi ---- */
.pp-rank,
a.pp-card.pp-rank { display: flex; align-items: center; gap: var(--sp-5); }
.pp-rank__item { display: flex; flex-direction: column; }
.pp-rank__value { font-size: var(--fs-2xl); font-weight: var(--fw-b); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-rank__value small { font-size: var(--fs-md); color: var(--pp-muted); font-weight: var(--fw-sb); }

/* ------------------------- 18. Chop etish ------------------------- */
@media print {
    /* Jadval qog'ozda ham chiqishi kerak: telefon kartalari yashiriladi,
       filtr va tugmalar chop etilmaydi */
    .pp-only-wide { display: block !important; }
    .pp-only-narrow, .pp-toolbar, .pp-daynav, .pp-actions, .pp-doneform, .pp-legend + .pp-alert { display: none !important; }
    .pp-grid-scroll { overflow: visible; }
    .pp-grid { font-size: 10px; }
    .pp-grid th, .pp-grid td { padding: 3px 4px; }
    .pp-grid__name { position: static; }
    .pp-grid-card { box-shadow: none; border: 1px solid var(--pp-line); }
    .pp-side, .pp-tabs, .pp-hero__top, .pp-kids, .pp-watch, .pp-art { display: none !important; }
    .pp-hero { background: none; color: var(--pp-ink); padding-bottom: var(--sp-4); border-radius: 0; }
    .pp-hero__panel { background: none; padding: 0; margin-top: 0; }
    .pp-hero__title, .pp-hero__note, .pp-hero__date { color: var(--pp-ink); }
    .pp-lift { margin-top: 0; }
    .pp-main { padding: 0; max-width: none; }
    .pp-card { box-shadow: none; border: 1px solid var(--pp-line); }
}

@media (prefers-reduced-motion: reduce) {
    .pp-tile, .pp-btn { transition: none; }
    .pp-tile:active, .pp-btn:active { transform: none; }
}