/* =====================================================================
   SG UI2 — HICK'S LAW SAHAJA (2026-10-12, Standard Bhg 33, semakan 2)
   Pemilik: WARNA & RUPA ASAL DIKEKALKAN. Fail ini hanya menyusun maklumat:
   perkara penting dahulu, perkara sekunder dilipat (butang ▾), butang
   sekunder telefon diringkaskan jadi ikon. Tiada warna jenama ditukar.
   Lipatan dipasang oleh js/sg_ui2.js (+ js/sg_ui2_pdpc|taksir|modul.js).
   Untuk undur: buang <link>/<script> sg_ui2*.
   ===================================================================== */

/* ---------- Butang lipat (neutral, ikut token tema sedia ada) ---------- */
#eguru-app .u2-lipat-btn {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--card-bg); color: var(--text-muted);
    display: inline-grid; place-items: center; cursor: pointer; margin-left: auto; padding: 0;
    transition: transform .2s;
}
#eguru-app .u2-lipat-btn svg { width: 18px; height: 18px; }
#eguru-app .u2-buka > .u2-lipat-btn,
#eguru-app .u2-buka > * > .u2-lipat-btn,
#eguru-app .u2-buka .u2-lipat-kepala > .u2-lipat-btn { transform: rotate(180deg); }
#eguru-app .u2-lipat-kepala { cursor: pointer; }
#eguru-app .u2-lipat-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- UTAMA: notis Nota Interaktif (PdPR) satu baris ---------- */
#eguru-app .pdpr-notis.u2-ringkas { flex-wrap: wrap; gap: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
#eguru-app .pdpr-notis.u2-ringkas .pdpr-teks {
    flex: 1 1 0 !important; min-width: 0; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: flex-start !important; gap: 8px;
}
#eguru-app .pdpr-notis.u2-ringkas .pdpr-teks b { flex: 1 1 0 !important; min-width: 0; margin: 0 !important; text-align: left !important; }
#eguru-app .pdpr-notis.u2-ringkas .pdpr-chip,
#eguru-app .pdpr-notis.u2-ringkas .pdpr-teks > span:not(.pdpr-chip) { display: none !important; }
#eguru-app .pdpr-notis.u2-ringkas.u2-xbuka .pdpr-teks > span { flex-basis: 100%; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* Butang tetap ada, cuma lebih ringkas */
    /* Baris 1: ikon · tajuk · ▾   Baris 2: butang ringkas (tidak dibuang) */
    #eguru-app .pdpr-notis.u2-ringkas { flex-wrap: wrap !important; }
    #eguru-app .pdpr-notis.u2-ringkas .pdpr-teks { flex: 1 1 calc(100% - 60px) !important; flex-wrap: nowrap !important; }
    #eguru-app .pdpr-notis.u2-ringkas.u2-xbuka .pdpr-teks { flex-wrap: wrap !important; }
    #eguru-app .pdpr-notis.u2-ringkas .pdpr-btn { order: 9; width: auto !important; flex: 0 0 auto; margin-left: 44px; padding: 7px 14px !important; font-size: var(--t3); }
}

/* ---------- UTAMA: notis Mod Cuba Minggu — tajuk + butang; penerangan dilipat ---------- */
#eguru-app .mc-notis.u2-lipat .mc-notis-teks {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px;
}
#eguru-app .mc-notis.u2-lipat .mc-notis-tajuk { flex: 1 1 0 !important; min-width: 0; }
#eguru-app .mc-notis.u2-lipat:not(.u2-buka) .mc-notis-sub { display: none !important; }
#eguru-app .mc-notis.u2-lipat.u2-buka .mc-notis-sub { flex-basis: 100%; }

/* ---------- UTAMA: kad "Minggu ini" — kepala sahaja; butiran dilipat ---------- */
#eguru-app #home-minggu.u2-lipat > :first-child { margin-bottom: 0 !important; }
#eguru-app #home-minggu.u2-lipat:not(.u2-buka) > :not(:first-child) { display: none !important; }
#eguru-app #home-minggu.u2-lipat.u2-buka > :first-child { margin-bottom: 6px !important; }

/* ---------- Telefon: kepala jadual satu baris, Eksport jadi ikon ---------- */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-head-row { flex-wrap: nowrap !important; align-items: center; }
    #eguru-app .hw-head-row .hw-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #eguru-app .hw-head-row .hw-urus-tog { flex: 0 0 auto; margin: 0 !important; min-height: 36px; }   /* sebaris dengan ikon Eksport 36px (audit susun atur 20 Okt) */
    #eguru-app .hw-eks-tog > span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #eguru-app .hw-eks-tog { width: 36px; height: 36px; padding: 0 !important; justify-content: center; }
}

/* ---------- Nav bawah telefon: label teks dipulihkan di bawah ikon (pemilik 12 Okt 2026) ---------- */
@media (max-width: 899px) {
    #eguru-app .bottom-nav .nav-item .nav-label {
        position: static !important; width: auto !important; height: auto !important; overflow: hidden;
        clip: auto !important; margin: 0 !important; padding: 0 2px !important;
        font-size: 10px !important; line-height: 1.15; font-weight: 600; max-width: 100%;
        text-overflow: ellipsis; white-space: nowrap; text-align: center;
    }
    #eguru-app .bottom-nav .nav-item { gap: 2px !important; }
    #eguru-app .bottom-nav .nav-icon-wrap { height: 30px; }
    #eguru-app .bottom-nav .nav-icon { width: 22px !important; height: 22px !important; }
    #eguru-app #nav-home .nav-icon-wrap { width: 36px !important; height: 36px !important; }
    #eguru-app #nav-home .nav-icon { width: 20px !important; height: 20px !important; }
}

/* ===================== HERO UTAMA: notis Nota Interaktif di atas (warna asal) ===================== */
#eguru-app .pdpr-notis.u2-pindah-asal { display: none !important; }   /* salinan berfungsi sama di dalam hero */
#eguru-app .combo-hero .pdpr-notis.u2-salinan {
    position: relative; z-index: 2; margin: 0 0 14px !important;
    background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: none !important; color: #fff !important; border-radius: 14px !important;
}
#eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-teks b,
#eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-teks span { color: #fff !important; }
#eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-chip { background: rgba(255,255,255,.2) !important; color: #fff !important; }
#eguru-app .combo-hero .pdpr-notis.u2-salinan .u2-lipat-btn {
    background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff;
}
/* Lencana "SistemGuru.My" bertindih fungsi dengan notis di atas — telefon sahaja disorok (hiasan) */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .combo-hero.u2-ada-notis .hero-badge { display: none !important; }
    #eguru-app .combo-hero.u2-ada-notis .combo-greet { margin-top: 0 !important; }
}
/* Nota "Paparan telefon ialah versi ringkas" — satu baris kecil */
#eguru-app .combo-mob-nota { font-size: var(--t2) !important; padding: 6px 10px !important; opacity: .85; }

/* ===================== JADUAL WAKTU: lebih bersih, warna asal kekal ===================== */
/* Amaran "bidang belum ditetapkan": segitiga besar -> titik merah kecil di penjuru (tajuk & klik kekal) */
#eguru-app .hw-bs-amaran { width: 9px !important; height: 9px !important; top: 5px !important; right: 5px !important; box-shadow: 0 0 0 2px #fff; }
#eguru-app .hw-bs-amaran svg { display: none !important; }
/* Pil "Peperiksaan"/info dalam sel: isian tebal -> label garis halus */
#eguru-app .hw-cuti-tag.info {
    background: transparent !important; color: var(--info-text) !important;
    border: 1px solid currentColor; font-weight: 700 !important; letter-spacing: 0 !important; padding: 0 5px !important;
}
#eguru-app .hw-cuti-tag { margin-top: 3px !important; }
/* Kod subjek & masa: lebih ringan, jarak kemas */
#eguru-app .hw-c.hw-f { gap: 1px; line-height: 1.15; }
#eguru-app .hw-c.hw-f .hw-ct { font-style: normal !important; opacity: .7 !important; }
/* Lajur rehat: teks menegak lebih kecil & lembut */
#eguru-app .hw-c.hw-r .hw-rl { font-size: var(--t0) !important; opacity: .75; letter-spacing: .15em; }
/* Telefon: kepala lajur rehat hanya "R" (masa bertindih dibuang), nombor waktu & masa ringkas */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-h2 { padding: 4px 0 !important; line-height: 1.1; }
    #eguru-app .hw-h2 .hw-pt { letter-spacing: -.4px; }
    #eguru-app .hw-bs-amaran { width: 7px !important; height: 7px !important; top: 3px !important; right: 3px !important; }
}
#eguru-app .combo-hero.u2-ada-notis .combo-actions { top: calc(12px + var(--u2-notis-h, 0px)) !important; }

/* Notis Nota Interaktif tanpa accordion: laptop = butang penuh di kanan; telefon = anak panah sahaja */
#eguru-app .pdpr-notis.u2-ringkas .pdpr-btn { order: 0 !important; margin-left: auto !important; flex: 0 0 auto !important; width: auto !important; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .pdpr-notis.u2-ringkas { flex-wrap: nowrap !important; }
    #eguru-app .pdpr-notis.u2-ringkas .pdpr-teks { flex: 1 1 0 !important; }
    #eguru-app .pdpr-notis.u2-ringkas .pdpr-btn {
        font-size: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important;
        min-height: 40px; justify-content: center !important; gap: 0 !important; border-radius: 50% !important;
    }
    #eguru-app .pdpr-notis.u2-ringkas .pdpr-btn svg { width: 20px !important; height: 20px !important; margin: 0 !important; }
}
#eguru-app .pdpr-notis.u2-ringkas { align-items: center !important; }
#eguru-app .pdpr-notis.u2-ringkas .pdpr-teks { align-self: center; }

/* ===================== UTAMA TELEFON: kemas & seragam (12 Okt, semakan 3) ===================== */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* Label takwim dalam sel jadual minggu disorok di telefon (jalur PEPERIKSAAN baris kekal) */
    #eguru-app .hero-jw .hw-cuti-tag { display: none !important; }
    /* Hero: jarak atas = jarak kiri/kanan (12px) */
    #eguru-app .combo-hero { padding-top: 12px !important; }
    #eguru-app .combo-hero .pdpr-notis.u2-salinan { margin-bottom: 12px !important; }
}

/* ===================== JADUAL HARIAN: waktu dahulu, kemudian status — satu struktur ===================== */
#eguru-app .today-list { gap: 8px !important; }
#eguru-app .today-slot { margin: 0 !important; padding: 10px 12px !important; border-width: 1px !important; border-style: solid !important; border-radius: var(--radius-sm) !important; }
#eguru-app .today-item { padding: 10px 12px !important; border-width: 1px !important; gap: 6px !important; }
/* Lajur waktu tetap (sama lebar untuk kelas, kosong, rehat) */
#eguru-app .today-slot-head { display: grid !important; grid-template-columns: 92px auto minmax(0,1fr) auto; align-items: center; column-gap: 8px; }
#eguru-app .today-slot-head .today-slot-time { grid-column: 1; grid-row: 1; }
#eguru-app .today-slot-head .today-slot-ico { grid-column: 2; grid-row: 1; }
#eguru-app .today-slot-head .today-slot-lbl { grid-column: 3; grid-row: 1; min-width: 0; }
#eguru-app .today-slot-head .today-now-badge { grid-column: 4; grid-row: 1; margin-left: 0 !important; }
#eguru-app .today-slot-msg { margin: 4px 0 0 100px !important; }
#eguru-app .today-slot-time, #eguru-app .today-time {
    font-size: var(--t3) !important; font-weight: 700 !important; font-style: normal !important;
    color: var(--primary-dark) !important; white-space: nowrap;
}
#eguru-app .today-slot.rehat .today-slot-time { color: #92400e !important; }
#eguru-app .today-item .today-row {
    display: grid !important; grid-template-columns: 92px minmax(0,1fr); column-gap: 8px; row-gap: 2px; align-items: start !important;
}
#eguru-app .today-item .today-row > .today-time-col { grid-column: 1; grid-row: 1 / span 3; flex: none !important; }
#eguru-app .today-item .today-row > :not(.today-time-col) { grid-column: 2; }
#eguru-app .today-item .today-kelas { white-space: normal !important; }
#eguru-app .today-item .today-subjek { text-align: left !important; }
#eguru-app .today-item .today-cuti-tag { justify-self: start; margin-left: 0 !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .today-item .today-actions { margin-left: 100px; }
#eguru-app.dark-theme .today-slot-time, #eguru-app.dark-theme .today-time { color: var(--primary-text) !important; }
/* JARAK HEADER -> WIDGET PERTAMA = TEPAT 4px (pemilik 12 Okt, Bhg 3 & 34) — telefon & tablet potret, SEMUA view.
   CSS tetap sahaja (bukan dikira JS): versi JS dahulu mengukur sebelum kandungan siap dilukis, jadi
   hasil berubah ikut refresh (0 / 4 / 8px). Margin atas anak pertama dibatalkan
   supaya padding 4px .main-content ialah SATU-SATUNYA jarak. */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app { --pad-atas: 4px; }
    #eguru-app .main-content { padding-top: 4px !important; }
    #eguru-app .main-content > .view { margin-top: 0 !important; padding-top: 0 !important; animation-name: u2Muncul !important; }
    #eguru-app .main-content > .view > :first-child,
    #eguru-app .main-content > .view > :first-child > .help-hint:first-child { margin-top: 0 !important; }
}
/* LAPTOP & TABLET LANDSKAP (pemilik 12 Okt): jarak kiri & atas = jarak kanan (kad -> scrollbar) = 4px.
   Dahulu scrollbar-gutter 'both-edges' menempah ruang scrollbar di KIRI juga -> kiri 16px, atas 16px,
   kanan hanya 4px. Kini gutter di kanan sahaja (tempat scrollbar sebenar) dan 4px di semua sisi. */
@media (min-width: 641px) and (orientation: landscape), (min-width: 1367px) {
    #eguru-app { --pad-view: 4px; --pad-atas: 4px; }
    #eguru-app .main-content {
        scrollbar-gutter: stable !important;
        padding-top: 4px !important; padding-left: 4px !important; padding-right: 4px !important;
    }
    #eguru-app .main-content > .view { margin-top: 0 !important; padding-top: 0 !important; animation-name: u2Muncul !important; }
    #eguru-app .main-content > .view > :first-child,
    #eguru-app .main-content > .view > :first-child > .help-hint:first-child { margin-top: 0 !important; }
}
/* Tools murid (iframe Portal Murid): jarak sama 4px di semua lebar */
html.mod-murid #eguru-app .main-content { padding-top: 4px !important; padding-left: 4px !important; padding-right: 4px !important; }
/* Animasi masuk halaman: pudar sahaja. fadeIn asal (sg_gaya.css) menggelongsor 8px dari bawah ->
   jarak atas nampak 12px -> 4px setiap kali halaman dibuka/refresh. */
@keyframes u2Muncul { from { opacity: 0; } to { opacity: 1; } }
/* Jadual harian: tanda "sambungan" bagi kepingan kelas selepas rehat */
#eguru-app .today-samb { font-size: var(--t2); font-weight: 600; color: var(--text-light); font-style: italic; }

/* ===================== BAR MUAT TURUN: SATU BARIS (pemilik 12 Okt) =====================
   Telefon: ikon sahaja, sama lebar, satu baris (label kekal untuk pembaca skrin via aria-label/title).
   Tablet & laptop: butang berlabel sebaris. Hanya CSS — butang & fungsi asal tidak disentuh. */
#eguru-app .eksport-baris.eksport-sebaris {
    display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%;
}
#eguru-app .eksport-baris.eksport-sebaris > .btn,
#eguru-app .eksport-baris.eksport-sebaris > .pm-lagi { flex: 0 0 auto !important; width: auto !important; grid-column: auto !important; justify-content: center; }
#eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary { height: 100%; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .eksport-baris.eksport-sebaris,
    #eguru-app .hw-eks-panel .eksport-baris { flex-wrap: nowrap !important; gap: 8px !important; }
    #eguru-app .eksport-baris.eksport-sebaris > .btn,
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi,
    #eguru-app .hw-eks-panel .eksport-baris > .btn {
        flex: 1 1 0 !important; min-width: 44px !important; min-height: 44px; padding: 0 !important; margin: 0 !important;
    }
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary { width: 100%; min-height: 44px; padding: 0 !important; justify-content: center; }
    #eguru-app .eksport-baris.eksport-sebaris > .btn > span,
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary > span,
    #eguru-app .hw-eks-panel .eksport-baris > .btn > span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #eguru-app .eksport-baris.eksport-sebaris > .btn svg,
    #eguru-app .hw-eks-panel .eksport-baris > .btn svg { width: 22px !important; height: 22px !important; margin: 0 !important; }
}

/* ===== Telefon: label RINGKAS sangat kecil di bawah ikon muat turun (pemilik 12 Okt) ===== */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .eksport-baris.eksport-sebaris > .btn,
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary,
    #eguru-app .hw-eks-panel .eksport-baris > .btn {
        flex-direction: column !important; gap: 2px !important; min-height: 50px !important; line-height: 1;
    }
    #eguru-app .eksport-baris.eksport-sebaris > .btn::after,
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary::after,
    #eguru-app .hw-eks-panel .eksport-baris > .btn::after {
        font-size: 9px; font-weight: 700; letter-spacing: .1px; line-height: 1; white-space: nowrap;
    }
    #eguru-app .eksport-btn.eksport-pdf::after,
    #eguru-app .eksport-btn[onclick*="'pdf'"]::after { content: "PDF"; }
    #eguru-app .eksport-btn[onclick*="alatPdfFail"]::after { content: "Terus"; }
    #eguru-app .eksport-btn.eksport-drive::after,
    #eguru-app .eksport-btn[onclick*="'drive'"]::after { content: "Drive"; }
    #eguru-app .eksport-btn[onclick*="alatWord"]::after,
    #eguru-app .eksport-btn[onclick*="'doc'"]::after { content: "Word"; }
    #eguru-app .eksport-btn[onclick*="xlsx"]::after { content: "Excel"; }
    #eguru-app .eksport-btn[onclick*="alatCetak"]::after { content: "Cetak"; }
    #eguru-app .eksport-baris.eksport-sebaris > .pm-lagi > summary::after { content: "Lagi"; }
}

/* ===== Jadual harian: label takwim ===== */
@media (min-width: 641px) and (orientation: landscape), (min-width: 1367px) {
    /* Laptop/tablet landskap: label takwim di penjuru kanan atas kad */
    #eguru-app .today-item .today-row { grid-template-columns: 92px minmax(0,1fr) auto !important; }
    #eguru-app .today-item .today-row > .today-cuti-tag { grid-column: 3 !important; grid-row: 1 !important; justify-self: end; align-self: start; max-width: 260px; }
}
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* Telefon: 2px atas & bawah supaya lapang */
    #eguru-app .today-item .today-cuti-tag { margin-top: 2px !important; margin-bottom: 2px !important; }
}

/* ===== Senarai harian dalam kad: jarak ke sempadan kad = jarak antara waktu (8px) ===== */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* TELEFON SAHAJA (pemilik 12 Okt): laptop/tablet kekal jarak asal */
    #eguru-app #view-home .combo-body { padding: 8px !important; }
}
/* Label takwim jadual harian: lebih tinggi (+2px atas & bawah) — semua saiz */
#eguru-app .today-item .today-cuti-tag { padding-top: 3px !important; padding-bottom: 3px !important; line-height: 1.3; }
/* Notis Nota Interaktif dalam hero: jarak sekeliling 3px — nampak sekunder (pemilik 12 Okt), semua saiz */
#eguru-app .combo-hero .pdpr-notis.u2-salinan { padding: 3px !important; gap: 8px !important; border-radius: 12px !important; }
#eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-ikon { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
#eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-btn { padding: 6px 12px !important; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-btn { width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; }
    #eguru-app .combo-hero .pdpr-notis.u2-salinan .pdpr-btn svg { width: 18px !important; height: 18px !important; }
}


/* ===== RPT: kad minggu tidak melekat pada garis bekas Pratonton (pemilik 12 Okt) ===== */
@media (max-width: 900px) {
    #eguru-app .rpt-narrow { padding: 8px 6px; }
}
/* ===== RPT (pemilik 12 Okt): satu kotak sahaja — buang sempadan bekas dalam (#rpt-preview) ===== */
@media (max-width: 900px) {
    #eguru-app #rpt-preview.rpt-wrap, #eguru-app #rpt-preview { border: 0 !important; border-radius: 0 !important; }
    #eguru-app .rpt-narrow { padding: 0 !important; }
}
/* Baris Minggu Peperiksaan / Ulang Kaji: butang "Jana RPH" selari di tepi kanan, tengah menegak */
#eguru-app .rptm-cuti.rptm-exam, #eguru-app .rptm-cuti.rptm-ulang {
    display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 6px;
}
#eguru-app .rptm-cuti.rptm-exam > br, #eguru-app .rptm-cuti.rptm-ulang > br { display: none; }
#eguru-app .rptm-cuti.rptm-exam > .btn-jana-rph, #eguru-app .rptm-cuti.rptm-ulang > .btn-jana-rph {
    margin: 0 0 0 auto !important; flex: 0 0 auto; white-space: nowrap;
}
/* Telefon & tablet potret: butang Takwim/Solat ikut aliran (bawah hero), seperti telefon — tidak bertindih */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .combo-hero .combo-actions { position: static !important; top: auto !important; margin-top: 12px; display: flex; gap: 6px; }
    #eguru-app .combo-hero .combo-actions .hero-btn { flex: 1 1 calc(50% - 3px); justify-content: center; }
}

/* =====================================================================
   POPUP SERAGAM — SEMUA SAIZ SKRIN (pemilik 12 Okt 2026, Standard Bhg 36)
   Satu format untuk SEMUA popup app (4 keluarga: editor .rph-modal-sheet, legal
   .legal-modal-sheet, borang kecil .modal-sheet, Support/Kedai .km-modal-sheet):
     • helaian berlabuh di bawah, saiz tetap (Bhg "SATU SAIZ" sg_gaya.css)
     • BAR KEPALA melekat: tajuk kiri (--t8, 800) + butang X bulat 34px di kanan
     • telefon & tablet potret : jurang 4px (kiri/kanan/atas), sudut atas 4px, padding sisi 8px
     • laptop & tablet landskap: jurang 24px, sudut atas 24px, padding sisi 22px
   Dahulu format kepala ini hanya untuk telefon <=600px; tablet potret & laptop
   memakai X terapung / tiada X / kepala berbeza (audit 12 Okt: X 18px-34px,
   kedudukan 12-39px dari tepi, popup Segerak Takwim lebih kecil).
   ===================================================================== */
#eguru-app { --modal-gap: 24px; --modal-pad-x: 22px; --modal-rad: 24px; }  /* gap 24 juga utk landskap 641-899px (Bhg 34: landskap = laptop) */
/* 15 Okt (audit modal): overlay dalam .view mewarisi margin-bottom 10px -> helaian tidak sampai ke bawah skrin */
#eguru-app .modal-overlay, #eguru-app .km-modal,
#eguru-app .main-content .view > :is(.modal-overlay, .km-modal):not(#sg-x):not(#sg-y) { margin: 0 !important; }
/* 7. Editor Templat Sekolah (.sgt-ov > .sgt-modal, js/sg_templat.js) — dahulu skrin penuh tanpa jurang
      (telefon) / kotak 1280px di tengah tanpa X (laptop). Kini helaian bawah seragam + X 34px. */
#eguru-app .sgt-ov { align-items: flex-end !important; justify-content: center !important; background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#eguru-app .sgt-ov > .sgt-modal {
    box-sizing: border-box; width: calc(100% - 2 * var(--modal-gap)) !important; max-width: none !important;
    height: calc(100% - var(--modal-gap)) !important; max-height: none !important; margin: 0 !important;
    border-radius: var(--modal-rad) var(--modal-rad) 0 0 !important; overflow: hidden; background: var(--card-bg) !important;
}
#eguru-app .sgt-modal > .sgt-kepala { position: relative; padding: 10px calc(var(--modal-pad-x) + 42px) 10px var(--modal-pad-x) !important; }
#eguru-app .sgt-modal > .sgt-kepala > .sgt-x { position: absolute; top: 10px; right: var(--modal-pad-x); }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app { --modal-gap: 4px; --modal-pad-x: 8px; --modal-rad: 4px; }
    #eguru-app .modal-sheet,
    #eguru-app .km-modal-sheet,
    #eguru-app .pbd-modal-sheet { border-radius: 4px 4px 0 0 !important; }
    #eguru-app .legal-modal-head { border-radius: 4px 4px 0 0; }
}
/* Saiz sama untuk semua — termasuk Segerak Google Calendar (dahulu 600px, berlabuh atas) */
#eguru-app .modal-overlay { align-items: flex-end !important; }
#eguru-app .modal-sheet.tkk-segerak-sheet {
    width: calc(100% - 2 * var(--modal-gap)) !important; max-width: none !important;
    height: calc(100% - var(--modal-gap)) !important; max-height: none !important;
}
/* 1. Editor/Nota */
#eguru-app .modal-sheet.rph-modal-sheet { padding: 18px var(--modal-pad-x) 34px !important; }
/* 2. Legal: kepala & badan */
#eguru-app .legal-modal-head { margin: 0 var(--modal-pad-x); padding: 24px 0 8px; gap: 8px; }
#eguru-app .legal-modal-head .modal-title,
#eguru-app .rph-modal-head .modal-title,
#eguru-app .modal-kepala > .modal-title,
#eguru-app .km-kepala .modal-title { font-size: var(--t8); font-weight: 800; text-align: left; margin: 0; min-width: 0; }
#eguru-app .legal-body { padding: 14px var(--modal-pad-x) 34px !important; }
/* 3. Borang kecil: bar kepala dengan X (dahulu desktop: logo + pemegang + X terapung / tiada X) */
#eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) {
    padding: 18px var(--modal-pad-x) 34px !important; text-align: left !important;
}
#eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) > .modal-handle,
#eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) > .modal-logo { display: none; }
#eguru-app .modal-kepala {
    display: flex; order: -1; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: -18px; z-index: 3; background: var(--card-bg);
    padding: 6px 0 8px; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
}
#eguru-app .modal-kepala-x { display: flex !important; flex-shrink: 0; }
#eguru-app #auth-modal-sheet > .legal-close,
#eguru-app .modal-sheet:has(.modal-kepala-x) > .legal-close { display: none !important; }
#eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) .modal-tagline,
#eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) .modal-sub { text-align: left; }
/* 4. Support/Kedai: bar kepala .km-kepala di semua saiz (× terapung 18px dibuang) */
#eguru-app .km-modal .km-modal-sheet { padding: 18px var(--modal-pad-x) 34px !important; }
#eguru-app .km-modal-sheet > .km-kepala { display: flex; }
#eguru-app .km-modal-sheet > .km-modal-x { display: none; }
/* Butang X: satu rupa (bulat 34px, latar --bg, ikon 18px) */
#eguru-app .legal-close,
#eguru-app .rph-modal-close,
#eguru-app .modal-kepala-x,
#eguru-app .km-kepala-x {
    width: 34px !important; height: 34px !important; min-width: 34px; border-radius: 50% !important; padding: 0 !important;
    background: var(--bg) !important; color: var(--text) !important; border: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 34px !important;
}
#eguru-app .legal-close svg,
#eguru-app .rph-modal-close svg,
#eguru-app .modal-kepala-x svg,
#eguru-app .km-kepala-x svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }

/* 4a. Log masuk/Daftar: ayat #auth-modal-sub kini di BAWAH bar tab (tab tidak melompat bila ayat 1->3 baris, 21 Okt) */
#eguru-app #auth-modal .modal-tagline { margin-bottom: 14px; }
#eguru-app #auth-modal .auth-tabs { margin-bottom: 12px; }
/* 4b. Pilih / Simpan senarai kelas (.alat-kelas-ov, alatKelasPilih sg_alat.js) — dahulu kad 460px di tengah
      + X teks 44px (audit 21 Okt). Kini helaian bawah seragam: tinggi penuh, bar kepala .modal-kepala, X 34px. */
#eguru-app .modal-overlay.alat-kelas-ov { align-items: flex-end !important; justify-content: center !important; padding: 0 !important;
    background: rgba(0,0,0,.55) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#eguru-app .alat-kelas-ov > .alat-kelas-kad {
    box-sizing: border-box; width: calc(100% - 2 * var(--modal-gap)) !important; max-width: none !important;
    height: calc(100% - var(--modal-gap)) !important; max-height: none !important; margin: 0 !important;
    border-radius: var(--modal-rad) var(--modal-rad) 0 0 !important; padding: 18px var(--modal-pad-x) 34px !important; box-shadow: 0 -8px 32px rgba(0,0,0,.18);
}
#eguru-app .alat-kelas-kad > .alat-kelas-kepala.modal-kepala { margin-bottom: 14px; }
#eguru-app .alat-kelas-x.modal-kepala-x { font-size: 0; min-height: 34px; }
/* 5. Senarai Semak Persediaan (.misi-peta) — dahulu kad 500px di tengah + X telus 44px */
#eguru-app .misi-peta { align-items: flex-end !important; justify-content: center !important; padding: 0 !important;
    background: rgba(0,0,0,.55) !important; backdrop-filter: blur(4px); }
#eguru-app .misi-peta-kad {
    width: calc(100% - 2 * var(--modal-gap)) !important; max-width: none !important;
    height: calc(100% - var(--modal-gap)) !important; max-height: none !important;
    border-radius: var(--modal-rad) var(--modal-rad) 0 0 !important; padding: 18px var(--modal-pad-x) 34px !important;
}
#eguru-app .misi-peta-kepala { position: sticky; top: -18px; z-index: 3; background: var(--card-bg); padding: 6px 44px 8px 0 !important;
    margin-bottom: var(--sp-4) !important; border-bottom: 1px solid var(--border); }
#eguru-app .misi-peta-kepala h3 { font-size: var(--t8) !important; font-weight: 800 !important; text-align: left; margin: 0; }
#eguru-app .misi-peta-x { top: 18px !important; right: var(--modal-pad-x) !important; z-index: 4;
    width: 34px !important; height: 34px !important; border-radius: 50% !important; background: var(--bg) !important; color: var(--text) !important; }
#eguru-app .misi-peta-x svg { width: 18px !important; height: 18px !important; }
/* 6. Dialog pengesahan ringkas (alatSahkan: "Buang item ini?") — helaian bawah yang sama, TINGGI IKUT KANDUNGAN */
#eguru-app .modal-overlay.alat-sahkan { align-items: flex-end !important; padding: 0 !important; z-index: 150100 !important; }
/* Mesej keputusan & pengesahan mesti di ATAS bar Persediaan Akaun (.misi-ui, z 150000) kerana kini berlabuh di bawah */
#eguru-app #result-modal { z-index: 150100 !important; }
#eguru-app .alat-sahkan-kad {
    /* 23 Okt 2026 (pemilik): penuh lebar & memanjang ke bawah memenuhi skrin (dahulu tinggi ikut kandungan) */
    height: calc(100% - var(--modal-gap)) !important; max-height: none !important; display: flex; flex-direction: column; overflow: auto;
    width: calc(100% - 2 * var(--modal-gap)) !important; max-width: none !important; margin: 0 !important;
    border-radius: var(--modal-rad) var(--modal-rad) 0 0 !important; padding: 18px var(--modal-pad-x) 34px !important;
}

/* ===== BAR MUAT TURUN TELEFON: SERAGAM (pemilik 14 Okt) =====
   Semua bar eksport (PDF · Drive · Word · Excel · Cetak · Lagi), di SEMUA halaman & tools:
   satu baris, lebar penuh, setiap butang SAMA saiz, ikon + label kecil di TENGAH.
   Bekas induk (.eksport-bar, .dok-eksport, kaki modal flex) turut dipaksa lebar penuh —
   tanpa ini bar mengecut ke kandungan dan kelihatan rapat ke kiri.
   :not(#sg-x) = kespesifikan ID tambahan supaya blok ini MENANG ke atas peraturan bar lama
   (.eksport-sebaris / .eksport-alat / halaman PdPC) tanpa perlu menyentuh setiap satu. */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .eksport-bar, #eguru-app .dok-eksport, #eguru-app .alat-eksport,
    #eguru-app :is(div, section, footer):has(> .eksport-baris) { width: 100%; max-width: 100%; }
    #eguru-app .eksport-bar, #eguru-app .dok-eksport { flex: 1 1 100% !important; display: block; }
    #eguru-app .eksport-baris:not(#sg-x) {
        /* GRID, bukan flex: lajur 1fr dijamin SAMA lebar walaupun butang PDF berwarna tiada sempadan
           dan butang garis bersempadan 2px (flex-basis:0 mengira sempadan, jadi saiznya berbeza 4px). */
        display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important; grid-template-columns: none !important;
        justify-content: stretch !important; align-items: stretch !important;
        gap: 8px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
    }
    #eguru-app .eksport-baris:not(#sg-x) > .btn,
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi {
        flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box !important;
        min-height: 52px !important; height: auto; margin: 0 !important; padding: 0 4px !important; grid-column: auto !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
        gap: 3px !important; text-align: center !important; line-height: 1; border-radius: var(--radius-md, 10px) !important;
    }
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi { padding: 0 !important; border: 0 !important; }
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > summary {
        width: 100% !important; height: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 0 4px !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
    }
    #eguru-app .eksport-baris:not(#sg-x) > .btn svg,
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > summary svg { width: 22px !important; height: 22px !important; margin: 0 !important; flex: none; }
    /* Label penuh disorok (kekal untuk pembaca skrin); label ringkas ::after di bawah ikon. */
    #eguru-app .eksport-baris:not(#sg-x) > .btn > span:not(.eksport-ikon-kosong),
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > summary > span {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px; border: 0;
    }
    #eguru-app .eksport-baris:not(#sg-x) > .btn::after,
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > summary::after { font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn.eksport-pdf::after,
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="'pdf'"]::after { content: "PDF"; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="alatPdfFail"]::after { content: "Terus"; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn.eksport-drive::after,
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="'drive'"]::after { content: "Drive"; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="alatWord"]::after,
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="'doc'"]::after { content: "Word"; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="xlsx"]::after { content: "Excel"; }
    #eguru-app .eksport-baris:not(#sg-x) .eksport-btn[onclick*="alatCetak"]::after { content: "Cetak"; }
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > summary::after { content: "Lagi"; }
    /* Menu Lagi: buka ke kanan skrin supaya tidak terpotong di tepi. */
    #eguru-app .eksport-baris:not(#sg-x) > .pm-lagi > .pm-lagi-menu { right: 0; left: auto; }
}

/* ===== SUPPORT TELEGRAM (pilihan A, 14 Okt) — pil kecil di baris tajuk modul / tool ===== */
#eguru-app .sg-support { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
    background: #229ED9; color: #fff !important; border: 0; font-size: var(--t4, 13px); font-weight: 700; text-decoration: none !important; white-space: nowrap; cursor: pointer;
    transition: background .15s, transform .15s; }
#eguru-app .sg-support:hover { background: #1B8CC2; }
#eguru-app .sg-support:active { transform: translateY(1px); }
#eguru-app .sg-support:focus-visible { outline: 3px solid #93CCEA; outline-offset: 2px; }
#eguru-app .sg-support svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
#eguru-app .sg-support.tools-balik { margin: 0 0 10px; border: 0; }
#eguru-app .section-header .sg-support-hdr { margin-left: auto; align-self: flex-start; flex: none; }
@media (max-width: 640px) {
    #eguru-app .sg-support { width: 36px; height: 36px; padding: 0; }
    #eguru-app .sg-support > span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #eguru-app .sg-support svg { width: 18px; height: 18px; }
}

/* ===== BARIS BUTANG HALAMAN TOOL (pemilik 14 Okt, semakan 2) =====
   Tools Guru · Panduan · Pin — SAMA rupa (pil bergaris) & SAMA tinggi; Pin dipin = pil hijau rata
   (tiada 3D). Support di hujung KANAN baris (float), tinggi sama. */
#eguru-app .view > .tools-balik { min-height: 38px; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle; }
#eguru-app .tools-balik.tools-pin-hal.dipin { background: var(--primary, #059669) !important; border-color: var(--primary, #059669) !important; color: #fff !important; }
#eguru-app .tools-balik.tools-pin-hal.dipin svg { fill: currentColor; stroke: currentColor; }
#eguru-app .tools-pin-btn.dipin { color: var(--primary-text) !important; background: rgba(5,150,105,.12) !important; }
#eguru-app .view > .sg-support.sg-support-tool { float: right; min-height: 38px; height: 38px; padding: 0 14px; margin: 0 0 10px 6px; }
@media (max-width: 640px) {
    #eguru-app .view > .tools-balik { min-height: 36px; }
    #eguru-app .view > .sg-support.sg-support-tool { width: 36px; height: 36px; min-height: 36px; padding: 0; }
}

/* ===== TELEFON & TABLET: TANPA BINGKAI KAD (pemilik 14 Okt, mockup pilihan 2) =====
   Kad seksyen halaman (.view .card) menjadi satu lapisan rata selebar skrin: tiada sempadan,
   bayang atau latar; jidar tepi 4px datang daripada .main-content sahaja. Seksyen bersebelahan
   dipisah dengan garis halus. DIKECUALIKAN: kad bersarang & dalam modal, dan kad "item" yang
   memang perlu berbingkai (kad templat, kad beli tool, kad kunci Pro, kad tambah soalan).
   :not(#sg-x) = kespesifikan ID supaya menang ke atas `.card{... !important}` asal. */
@media (max-width: 1024px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .main-content .view .card:not(#sg-x):not(.card .card):not(.modal-overlay .card):not(.sgt-kat):not(.alat-beli-kad):not(.pelan-kunci-kad):not(.bs-tambah-kad):not(.ivs-kosong) {
        background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
        padding: 6px 4px 14px !important; margin-bottom: 4px !important;   /* 21 Okt malam: sisi 4px (teks 8px dari tepi skrin, Bhg 1.2) */
        border-bottom: 1px solid var(--border) !important;
    }
    #eguru-app .main-content .view .card:not(#sg-x):not(.card .card):not(.modal-overlay .card):not(.sgt-kat):not(.alat-beli-kad):not(.pelan-kunci-kad):not(.bs-tambah-kad):not(.ivs-kosong):last-child {
        border-bottom: 0 !important;
    }
}

/* ===== HALAMAN AKAUN: TAB DI DALAM HERO (pemilik 14 Okt, mockup A1 "folder") =====
   Tab duduk di kaki hero hijau. Tab aktif = warna latar halaman (--bg) dan bersambung terus
   dengan kandungan di bawahnya; tab lain teks hijau muda atas hero. */
#eguru-app .ak-hero:has(.ak-tabs-hero) { padding-bottom: 0 !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; margin-bottom: var(--sp-4) !important; }
#eguru-app .ak-tabs.ak-tabs-hero {
    display: flex; gap: 4px; margin: 16px -18px 0 !important; padding: 0 10px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
#eguru-app .ak-tabs-hero .ak-tab {
    flex: 1 1 0; min-width: 0; border-radius: 12px 12px 0 0 !important; padding: 11px 6px !important; margin: 0;
    background: rgba(255,255,255,.08) !important; color: #C8F0DD !important; font-weight: 700;
}
#eguru-app .ak-tabs-hero .ak-tab:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
#eguru-app .ak-tabs-hero .ak-tab.active { background: var(--bg) !important; color: var(--primary-text, #065F46) !important; }
#eguru-app .ak-tabs-hero .ak-tab svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
#eguru-app .ak-tabs-hero .ak-tab:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
@media (max-width: 640px) {
    #eguru-app .ak-tabs.ak-tabs-hero { margin: 14px -18px 0 !important; padding: 0 6px !important; gap: 3px; }
    #eguru-app .ak-tabs-hero .ak-tab { flex-direction: column; gap: 3px; padding: 8px 2px !important; font-size: 11px !important; line-height: 1.15; text-align: center; }
    #eguru-app .ak-tabs-hero .ak-tab svg { width: 18px; height: 18px; }
}

/* ===== JADUAL WAKTU — REKA BENTUK J1 "PASTEL LEMBUT" (pemilik 15 Okt; ganti J2) =====
   Susun atur penuh hari × waktu DIKEKALKAN. Slot = blok pastel warna subjek bersudut bulat
   berjarak (tiada garis grid); lajur hari = pil kelabu lembut; HARI INI = cincin hijau;
   slot kosong = garis putus; REHAT = jalur berjalur jelas berlabel. Telefon (M1): muat
   sepenuhnya edge to edge, inisial kelas; tablet/desktop: nama kelas penuh. */
#eguru-app .hw-grid { border: 0 !important; border-radius: 0 !important; background: transparent; overflow: visible; }
#eguru-app .hw-row { column-gap: 5px; }
#eguru-app .hw-row + .hw-row { border-top: 0 !important; margin-top: 5px; }
#eguru-app .hw-head { background: transparent !important; }
#eguru-app .hw-h, #eguru-app .hw-t { border-left: 0 !important; }
#eguru-app .hw-h2 { color: var(--text-muted); }
#eguru-app .hw-h2.hw-hr { background: transparent !important; color: #854F0B; font-weight: 800; }
#eguru-app .hw-trow { background: transparent !important; }
#eguru-app .hw-c { border-left: 0 !important; border-radius: 10px; }
/* Slot kosong: garis putus lembut — jelas "ruang", tidak bising */
#eguru-app .hw-c.hw-k { background: transparent !important; border: 1.5px dashed var(--border) !important; opacity: 1; }
#eguru-app .hw-c.hw-x { background: transparent !important; opacity: 1; }
/* REHAT: jalur kuning-pasir berjalur + label — mudah dikesan sekali pandang */
#eguru-app .hw-c.hw-r {
    background: repeating-linear-gradient(135deg, #FAEEDA 0 6px, #FDF6EA 6px 12px) !important;
    color: #854F0B !important; border: 1px solid #F3DDB5 !important; font-weight: 800;
}
#eguru-app .hw-c.hw-r .hw-rl { display: block !important; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
#eguru-app .hw-c.hw-r .hw-rd { display: none !important; }
#eguru-app.dark-theme .hw-c.hw-r { background: repeating-linear-gradient(135deg, rgba(239,159,39,.18) 0 6px, rgba(239,159,39,.08) 6px 12px) !important; color: #FAC775 !important; border-color: rgba(239,159,39,.3) !important; }
/* Slot kelas: blok pastel warna subjek — fokus jelas */
#eguru-app .hw-c.hw-f {
    background: var(--kf) !important; color: var(--kc) !important; border: 1px solid transparent;
    box-shadow: none !important; padding: 5px 3px; gap: 2px;
}
#eguru-app .hw-c.hw-f:hover { border-color: var(--kc); }
#eguru-app.dark-theme .hw-c.hw-f { color: var(--kc-d) !important; }
#eguru-app .hw-c.hw-f .hw-sc { display: block !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kc) !important; opacity: .9 !important; font-weight: 700; background: transparent; padding: 0; }
#eguru-app.dark-theme .hw-c.hw-f .hw-sc { color: var(--kc-d) !important; }
#eguru-app .hw-c.hw-f .hw-ct { color: var(--kc) !important; opacity: .75 !important; font-style: normal; }
#eguru-app .hw-ki, #eguru-app .hw-kn { font-weight: 800; color: inherit; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .hw-kn { display: none; }
#eguru-app .hw-c.hw-kini { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent) !important; }
#eguru-app .hw-c.hw-aktif, #eguru-app .hw-sect-jw .hw-c.hw-f:hover { box-shadow: 0 0 0 2px var(--kc) !important; }
#eguru-app .hw-c.hw-cuti-c { opacity: .6; }
/* Lajur hari: pil kelabu lembut */
#eguru-app .hw-day { background: #F1EFE8 !important; color: #444441 !important; border-radius: 10px; flex-direction: column; gap: 1px; font-weight: 800; line-height: 1.1; }
#eguru-app.dark-theme .hw-day { background: rgba(255,255,255,.07) !important; color: var(--text) !important; }
#eguru-app .hw-head .hw-day, #eguru-app .hw-day.hw-day-t { background: transparent !important; color: var(--text-light) !important; }
#eguru-app .hw-day-jam .gi { fill: var(--text-light) !important; opacity: 1; }
#eguru-app .hw-day-d { display: block; font-size: var(--t0); font-weight: 600; color: #888780; white-space: nowrap; }
/* HARI INI: baris berlatar hijau sangat lembut + cincin hijau pada lajur hari */
#eguru-app .hw-row.today { background: transparent !important; }
#eguru-app .hw-row.today .hw-day { background: #E1F5EE !important; color: #085041 !important; box-shadow: inset 0 0 0 2px #1D9E75; }
#eguru-app .hw-row.today .hw-day-d { color: #0F6E56; font-weight: 800; }
#eguru-app .hw-row.today .hw-c.hw-f { box-shadow: 0 0 0 1px rgba(29,158,117,.35) !important; }
@media (max-width: 640px) {
    #eguru-app .hw-grid { --hw-dc: 34px; padding: 0 3px; }
    #eguru-app .hw-row { column-gap: 3px; }
    #eguru-app .hw-row + .hw-row { margin-top: 3px; }
    #eguru-app .hw-c { min-height: 50px; border-radius: 8px; }
    #eguru-app .hw-day { border-radius: 8px; }
    #eguru-app .hw-c.hw-f { padding: 4px 1px; }
    #eguru-app .hw-c.hw-f .hw-sc { font-size: 8.5px; letter-spacing: -.1px; }
    #eguru-app .hw-ki { font-size: var(--t3); }
    #eguru-app .hw-day-db { display: none; }
    #eguru-app .hw-row.today .hw-day-d { font-size: 8px; }
    #eguru-app .hw-c.hw-r .hw-rl { font-size: 8.5px; }
}
@media (min-width: 641px) {
    #eguru-app .hw-ki { display: none; }
    #eguru-app .hw-kn { display: block; font-size: var(--t4); }
    #eguru-app .hw-grid { --hw-dc: 64px; }
    #eguru-app .hw-c.hw-f .hw-sc { font-size: var(--t1); }
}
/* Waktu tamat di bawah waktu mula (pemilik 14 Okt) — fon paling kecil; REHAT sentiasa kelihatan berlabel */
#eguru-app .hw-pe { display: block; font-size: var(--t0) !important; font-weight: 500; opacity: .75; line-height: 1.1; letter-spacing: -.3px; }
#eguru-app .hw-t { flex-direction: column; line-height: 1.15; }
#eguru-app .hw-h2.hw-hr .hw-pt, #eguru-app .hw-h2.hw-hr .hw-pe { display: block !important; }
#eguru-app .hw-c.hw-r .hw-rl { display: block !important; }
#eguru-app .hw-c.hw-r .hw-rd { display: none !important; }
/* ===== JADUAL WAKTU — WARNA KLASIK atas struktur J1 (pemilik 14 Okt 2026) =====
   Susun atur J1 (blok bersudut bulat berjarak) KEKAL; hanya warna dikembalikan:
   kepala waktu hijau muda, lajur hari hijau gelap, HARI INI oren, REHAT kuning,
   slot kosong berjalur hijau muda, slot kelas pastel + jalur kiri warna kelas. */
#eguru-app .hw-head .hw-h2 { background: #ECFDF5 !important; color: #064E3B; border-radius: 8px; }
#eguru-app .hw-head .hw-h2 .hw-pt { color: #475569; }
#eguru-app .hw-head .hw-h2.hw-hr, #eguru-app .hw-trow .hw-t-r { background: #FDE68A !important; color: #92400E !important; }
#eguru-app .hw-head .hw-day { background: var(--gradient-bg) !important; color: #fff !important; }
#eguru-app .hw-head .hw-day .gi, #eguru-app .hw-head .hw-day-jam .gi { fill: #fff !important; }
#eguru-app .hw-c.hw-k { background: repeating-linear-gradient(135deg, #F0FDF4 0 6px, #fff 6px 12px) !important; border: 1px solid #DCFCE7 !important; }
#eguru-app .hw-c.hw-r { background: #FDE68A !important; color: #92400E !important; border: 0 !important; }
#eguru-app .hw-c.hw-f { box-shadow: inset 3px 0 0 var(--kc) !important; }
#eguru-app .hw-c.hw-f .hw-ki, #eguru-app .hw-c.hw-f .hw-kn { color: var(--kc); }
#eguru-app.dark-theme .hw-c.hw-f .hw-ki, #eguru-app.dark-theme .hw-c.hw-f .hw-kn { color: var(--kc-d); }   /* 21 Okt (Bhg 48.9): --kc gelap atas latar gelap = 2.4:1 */
#eguru-app .hw-c.hw-f .hw-ct { opacity: .85 !important; }   /* masa dalam petak: legap .75 = 2.9:1 (21 Okt, Bhg 48.9) */
#eguru-app.dark-theme .hw-c.hw-f .hw-ct { color: var(--kc-d) !important; }   /* --kc cerah !important dahulu terpakai dalam gelap = 1.9:1 */
#eguru-app .hw-day { background: var(--gradient-bg) !important; color: #fff !important; }
#eguru-app .hw-day-d { color: rgba(255,255,255,.8); }
#eguru-app .hw-row.today .hw-day { background: linear-gradient(135deg,#F59E0B,#D97706) !important; color: #1F2937 !important; box-shadow: none; }
#eguru-app .hw-row.today .hw-day-d { color: #1F2937; }
#eguru-app .hw-row.today .hw-c.hw-f { box-shadow: inset 3px 0 0 var(--kc), 0 0 0 1px rgba(245,158,11,.45) !important; }
#eguru-app .hw-c.hw-kini { box-shadow: inset 3px 0 0 var(--kc), 0 0 0 2px var(--accent) !important; }
#eguru-app .hw-c.hw-aktif, #eguru-app .hw-sect-jw .hw-c.hw-f:hover { box-shadow: inset 3px 0 0 var(--kc), 0 0 0 2px var(--kc) !important; }
#eguru-app.dark-theme .hw-head .hw-h2 { background: rgba(16,185,129,.12) !important; color: var(--text); }
#eguru-app.dark-theme .hw-c.hw-k { background: repeating-linear-gradient(135deg, rgba(16,185,129,.07) 0 6px, transparent 6px 12px) !important; border-color: rgba(16,185,129,.15) !important; }
#eguru-app.dark-theme .hw-c.hw-r, #eguru-app.dark-theme .hw-head .hw-h2.hw-hr { background: rgba(245,158,11,.25) !important; color: #FAC775 !important; }
#eguru-app.dark-theme .hw-day { background: var(--gradient-bg) !important; color: #fff !important; }

/* ===== PILIHAN X "FOKUS SATU TINDAKAN" (Hick's law, 14 Okt) — js/sg_hick.js ===== */
/* Nota panjang dilipat: baris biru lembut "ⓘ …" — ketik untuk penuh */
#eguru-app details.sg-ilipat { margin: 6px 0; border-radius: 10px; background: #F0FDFA; border: 1px solid #CCFBF1; }   /* 26 Okt: Bhg 50 tiada biru -> teal --info */
#eguru-app.dark-theme details.sg-ilipat { background: rgba(45,212,191,.08); border-color: rgba(45,212,191,.25); }
#eguru-app.dark-theme details.sg-ilipat > summary { color: #5EEAD4; }   /* 21 Okt (Bhg 48.9): #185FA5 atas latar gelap = 2.5:1 */
#eguru-app.dark-theme details.sg-ilipat > summary::after { color: #2DD4BF; }
#eguru-app details.sg-ilipat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: var(--t4, 13px); color: #115E59; font-weight: 600; }
#eguru-app details.sg-ilipat > summary::-webkit-details-marker { display: none; }
#eguru-app details.sg-ilipat > summary::after { content: "Baca"; margin-left: auto; font-size: 11px; font-weight: 700; color: #0D9488; }
/* 19 Okt (audit tools telefon): lipatan dalam baris flex (cth .arpi-atas) melimpah 100px ke kanan
   kerana min-width:auto + ringkasan tidak dibalut. Kekal dalam lebar bekas; ringkasan dipotong "…". */
#eguru-app details.sg-ilipat { min-width: 0; max-width: 100%; box-sizing: border-box; }
#eguru-app details.sg-ilipat > summary > span:not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kotak tanda tools: 13px lalai pelayar terlalu kecil untuk jari — 18px di telefon/tablet potret (label kekal kawasan tekan). */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .alat-view input[type=checkbox], #eguru-app .alat-view input[type=radio] { width: 18px; height: 18px; flex: none; }
}
#eguru-app details.sg-ilipat[open] > summary::after { content: "Tutup"; }
#eguru-app .sg-ilipat-i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #0D9488; color: #fff; font: 700 11px/18px Georgia, serif; text-align: center; font-style: italic; }
#eguru-app .sg-ilipat-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app details.sg-ilipat[open] .sg-ilipat-t { white-space: normal; }
#eguru-app details.sg-ilipat > :not(summary) { margin: 0 10px 10px !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
/* Subtajuk seksyen: 2 baris di telefon/tablet */
@media (max-width: 1024px) {
    #eguru-app .sg-sub2:not(.buka) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
}
/* Amaran (kuning) kekal kelihatan tetapi lebih padat & lembut */
#eguru-app .warning-box { border-radius: 10px; }

/* Pilihan X peringkat 2: baris pilihan > 4 butang = satu baris boleh leret di telefon */
@media (max-width: 640px) {
    #eguru-app .sg-leret { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    #eguru-app .sg-leret::-webkit-scrollbar { display: none; }
    #eguru-app .sg-leret > * { flex: 0 0 auto !important; white-space: nowrap; scroll-snap-align: start; }
}

/* ===== SEMAKAN SUSUN ATUR TELEFON/TABLET (pemilik 15 Okt) ===== */
/* (a) Butang Support modul: penjuru kanan atas halaman; pengepala pertama memberi ruang. */
#eguru-app .section-header.sg-hdr-support { position: relative; }
/* Selari dengan baris tajuk: tinggi baris tajuk = lencana ikon (.section-badge); butang dipusat menegak padanya. */
#eguru-app .section-header.sg-hdr-support > .sg-support-hdr {
    position: absolute; right: 0; top: calc((var(--sgs-baris, 36px) - 32px) / 2); z-index: 3; margin: 0 !important; height: 32px; min-height: 32px; padding: 0 13px;
}
@media (max-width: 640px) {
    #eguru-app .section-header.sg-hdr-support > .sg-support-hdr { width: 32px; height: 32px; padding: 0; }
}
#eguru-app .view.sg-ada-support .section-header.sg-hdr-support > .section-header-text { padding-right: 46px; }
@media (min-width: 641px) { #eguru-app .view.sg-ada-support .section-header.sg-hdr-support > .section-header-text { padding-right: 118px; } }

/* (b) Bar muat turun: KALIS TINDIHAN — peraturan lama (ikon 44px, flex auto) tidak boleh lagi
   mengecilkan butang. 3 ID kespesifikan; setiap butang = 100% lebar selnya. */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html body #eguru-app .eksport-baris:not(#sg-x):not(#sg-y) {
        display: grid !important; grid-auto-flow: column !important; grid-auto-columns: minmax(0, 1fr) !important;
        grid-template-columns: none !important; justify-items: stretch !important; gap: 8px !important; width: 100% !important;
    }
    html body #eguru-app .eksport-baris:not(#sg-x):not(#sg-y) > * {
        justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
        flex: none !important; margin: 0 !important; box-sizing: border-box !important; min-height: 52px !important;
    }
    html body #eguru-app .eksport-baris:not(#sg-x):not(#sg-y) > .pm-lagi > summary { width: 100% !important; }
}

/* (c) Irama jarak seragam: 10px antara widget; seksyen 12px; tiada jarak bertimbun. */
@media (max-width: 1024px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .main-content .view > * { margin-top: 0 !important; }
    #eguru-app .main-content .view > *:not(.card):not(.sg-support-hdr):not(.tools-balik):not(script):not(style):not(:empty) { margin-bottom: 10px !important; }
    #eguru-app .main-content .view > :empty:not(.sg-support-hdr) { margin: 0 !important; }
    #eguru-app .main-content .view .card:not(#sg-x):not(.card .card):not(.modal-overlay .card):not(.sgt-kat):not(.alat-beli-kad):not(.pelan-kunci-kad):not(.bs-tambah-kad):not(.ivs-kosong) {
        padding: 12px 4px !important; margin-bottom: 0 !important;   /* 21 Okt malam: sisi 4px — tepi seksyen 4px, teks 8px (Bhg 1.2) */
    }
    #eguru-app .main-content .view .section-header { margin-bottom: 10px !important; }
    #eguru-app details.sg-ilipat { margin: 10px 0 !important; }
    #eguru-app .main-content .eksport-bar { margin: 10px 0 !important; }
    #eguru-app .main-content .eksport-bar > .eksport-baris { margin: 0 !important; }
    #eguru-app .main-content .sgt-pilih { margin: 4px 0 10px !important; }
    #eguru-app .main-content .sgt-pilih:has(> .sgt-pilih-kosong) { margin: 0 0 10px !important; }
    #eguru-app .main-content .warning-box, #eguru-app .main-content .info-box { margin: 10px 0 !important; }
}
/* Ikon + tajuk kekal SEBARIS (teks mengecut, tidak membalut ke bawah ikon); kawalan lain dalam
   pengepala yang sama (cth Bank RPH, Sync/Jana di RPH) TETAP turun ke baris sendiri selebar penuh. */
#eguru-app .view.sg-ada-support .section-header.sg-hdr-support { flex-wrap: wrap !important; }
#eguru-app .view.sg-ada-support .section-header.sg-hdr-support > .section-header-text { flex: 1 1 0 !important; min-width: 0; }
#eguru-app .view.sg-ada-support .section-header.sg-hdr-support > :not(.section-header-text):not(.section-badge):not(.sg-support) { flex-basis: 100%; }

/* ===== JADUAL WAKTU TELEFON: L1 (rehat nipis) + L2 (Pagi / Petang) — pemilik 15 Okt ===== */
#eguru-app .hw-pp-tog { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-grid.hw-satu-subjek .hw-c.hw-f .hw-sc { display: none !important; }
    /* L2: bekas leret 2 skrin, lajur hari melekat */
    #eguru-app .hw-pp-tog { display: flex; gap: 3px; margin: 0 3px 8px; padding: 3px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 999px; }
    #eguru-app .hw-pp-tog button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 7px 4px; font-size: var(--t3); font-weight: 700; color: var(--text-muted); cursor: pointer; }
    #eguru-app .hw-pp-tog button.on { background: var(--primary); color: #fff; }
    #eguru-app .hw-pp-sk { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #eguru-app .hw-pp-sk::-webkit-scrollbar { display: none; }
    #eguru-app .hw-pp-sk > .hw-grid.hw-grid-pecah { width: calc(200% - 40px); }
    #eguru-app .hw-grid-pecah .hw-row > .hw-day { position: sticky; left: 0; z-index: 2; }
    #eguru-app .hw-grid-pecah .hw-head > .hw-day { background: var(--bg) !important; }
    #eguru-app .hw-grid-pecah .hw-c.hw-f { min-height: 58px; }
    #eguru-app .hw-grid-pecah .hw-ki { font-size: var(--t4); }
    #eguru-app .hw-grid-pecah .hw-c.hw-f .hw-sc { font-size: 9.5px; }
}
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-pp-sk > .hw-grid.hw-grid-pecah { margin: 0 !important; padding: 0 !important; overflow: visible !important; }   /* overflow:hidden mematikan sticky lajur hari */
    #eguru-app .hw-pp { margin: 0 -13px; padding: 0 3px; }
    #eguru-app .hw-grid-pecah .hw-row > .hw-day::after { content: ""; position: absolute; top: 0; bottom: 0; right: -4px; width: 4px; background: var(--bg); }
}
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-grid-pecah .hw-trow > .hw-day, #eguru-app .hw-grid-pecah .hw-head > .hw-day { background: var(--bg) !important; }
}
/* ===== JADUAL WAKTU — jarak rapat 0.5px + label takwim warna sekunder (pemilik 14 Okt) ===== */
#eguru-app .hw-row { column-gap: .5px !important; }
#eguru-app .hw-row + .hw-row { margin-top: .5px !important; }
/* Pil takwim dalam sel kelas: ikut warna kelas, lebih cerah (sekunder) */
#eguru-app .hw-c.hw-f .hw-cuti-tag.info {
    color: color-mix(in srgb, var(--kc) 75%, #fff) !important;
    border-color: color-mix(in srgb, var(--kc) 50%, #fff) !important;
    background: color-mix(in srgb, var(--kc) 6%, #fff) !important;
}
#eguru-app.dark-theme .hw-c.hw-f .hw-cuti-tag.info { color: var(--kc-d) !important; border-color: var(--kc-d) !important; background: transparent !important; }
/* Jalur takwim (baris hari): biru lembut sekunder, tidak menenggelamkan kelas */
#eguru-app .hw-cuti-band.info { color: #6B8FD6; background: #F5F8FE; border-top-color: rgba(107,143,214,.25); }
#eguru-app.dark-theme .hw-cuti-band.info { color: #9DB6EA; background: rgba(107,143,214,.08); }
/* ===== JADUAL WAKTU — RUPA RATA LAMA (pemilik 14 Okt, ganti blok bulat J1) =====
   Grid rata tanpa jarak & tanpa sudut bulat, garis pemisah halus sahaja (rupa jadual lama).
   KEKAL: warna klasik, Pagi/Petang, waktu tamat, notis takwim. */
#eguru-app .hw-grid { border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; overflow: hidden; }
#eguru-app .hw-pp-sk > .hw-grid.hw-grid-pecah { overflow: visible !important; }
#eguru-app .hw-row { column-gap: 0 !important; }
#eguru-app .hw-row + .hw-row { margin-top: 0 !important; border-top: 1px solid var(--border) !important; }
#eguru-app .hw-c, #eguru-app .hw-day, #eguru-app .hw-head .hw-h2 { border-radius: 0 !important; }
#eguru-app .hw-c, #eguru-app .hw-h, #eguru-app .hw-t { border-left: 1px solid var(--border) !important; }
#eguru-app .hw-c.hw-k { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
#eguru-app .hw-c.hw-r { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 1px solid var(--border) !important; }
#eguru-app .hw-c.hw-f { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }
#eguru-app .hw-day::after { display: none !important; }
/* Bingkai keliling Jadual Waktu Mingguan (pemilik 14 Okt: kekal, lebih kemas) */
#eguru-app .hw-sect-jw .hw-grid, #eguru-app .hero-jw .hw-grid { border: 1px solid #CFE8DB !important; border-radius: 10px !important; overflow: hidden !important; margin-left: 0 !important; margin-right: 0 !important; }
#eguru-app .hw-pp { margin: 0 !important; padding: 0 !important; border: 1px solid #CFE8DB; border-radius: 10px; overflow: hidden; }
#eguru-app .hw-pp .hw-pp-tog { margin: 6px 6px 6px !important; }
#eguru-app .hw-pp .hw-pp-sk > .hw-grid.hw-grid-pecah { border: 0 !important; border-radius: 0 !important; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hw-pp .hw-pp-sk > .hw-grid.hw-grid-pecah { border-top: 1px solid #CFE8DB !important; overflow: visible !important; }
}
#eguru-app.dark-theme .hw-sect-jw .hw-grid, #eguru-app.dark-theme .hero-jw .hw-grid, #eguru-app.dark-theme .hw-pp { border-color: var(--border) !important; }

/* ===== JURANG TEPI TELEFON & TABLET = 4px kiri, kanan & atas (pemilik 21 Okt 2026 malam, Bhg 3 — gantikan 8px 20 Okt) =====
   "gap edge to edge adalah 4px": kad/bekas & nav bawah terapung (--nav-gap = --pad-view) 4px dari tepi skrin, sama seperti
   jarak header -> kad pertama. Teks kekal >= 8px dari tepi melalui padding dalam kad (audit _audit_tepi.py). */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app { --pad-view: 4px; --pad-atas: 4px; }
    #eguru-app .main-content, html.mod-murid #eguru-app .main-content { padding-top: 4px !important; padding-left: 4px !important; padding-right: 4px !important; }
    /* teks terus di halaman (luar kad) diinset 4px -> 8px dari tepi; garis kategori Akaun berbaris dengan tepi 4px */
    #eguru-app .main-content .view > :is(.help-hint, .form-section-title, h2, h3, h4, p, .text-muted),
    #eguru-app .main-content .view > div:not(.card) > :is(.help-hint, .form-section-title, p.text-muted) { margin-left: 4px !important; margin-right: 4px !important; }
    #eguru-app .main-content .view .tetapan-kategori { margin-left: 0 !important; margin-right: 0 !important; }
    #eguru-app #view-about :is(.fitur-tajuk, .fitur-kump-t) { margin-left: 4px !important; margin-right: 4px !important; }
}

/* ===== BARIS STATUS SERAGAM (pemilik 20 Okt 2026, Bhg 47.27): ganti senarai '• nama — status' berwarna.
   .sg-bst > .sg-bst-r > span (tajuk + <small> butiran) + .sg-pil (hijau/kuning/merah/kelabu) ===== */
#eguru-app .sg-bst { display: grid; gap: 4px; margin: 0 0 8px; }
#eguru-app .sg-bst-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; text-align: left; font-size: 14px; line-height: 1.35; background: var(--card-bg); }
#eguru-app .sg-bst-r small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
#eguru-app .sg-pil { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--bg); color: var(--text-muted); }
#eguru-app .sg-pil.hijau { background: #DCFCE7; color: #166534; }
#eguru-app .sg-pil.kuning { background: #FEF3C7; color: #92400E; }
#eguru-app .sg-pil.merah { background: #FEE2E2; color: #991B1B; }

/* ===== AUDIT SUSUN ATUR (pemilik 20 Okt 2026: tiada tindih, tidak sesak) =====
   Bar "Persediaan akaun" (#misi-hud) terapung di atas nav bawah (telefon) / penjuru kanan bawah (laptop) dan menutup
   kandungan paling bawah yang tidak boleh ditatal keluar (cth jubin terakhir Tools berkaitan, butang Simpan).
   Ruang tatal bawah ditambah selagi bar itu kelihatan.
   22 Okt (INP): dahulu #eguru-app:has(> .misi-hud...) — :has() pada akar app menyemak semula ~22k nod setiap togol kelas
   (88 ms/ketik, CPU 4x). Kini kelas .ada-misi-hud ditetapkan mHudRuang() (sg_misi.js); .pm-aktif oleh sgKelasView() (sg_utama.js). */
@media (max-width: 899px) {
    #eguru-app.ada-misi-hud .main-content { padding-bottom: calc(var(--nav-h) + 14px + 74px) !important; }
}
@media (min-width: 900px) {
    #eguru-app.ada-misi-hud .main-content { padding-bottom: 96px !important; }
}

/* Sasaran sentuh telefon & tablet potret >= 32px (audit susun atur 20 Okt 2026, Bhg 48). Rupa & warna ASAL dikekalkan —
   hanya ketinggian minimum (padding/teks tidak berubah). Pautan dalam perenggan & serbuk roti dikecualikan. */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .sgt-pilih-kosong,
    #eguru-app .skt-kelas-bar button,
    #eguru-app .dok-segmen button,
    #eguru-app #view-kedai .kd-chip, #eguru-app #view-inovasi .kd-chip, #eguru-app #view-games .kd-chip, #eguru-app #view-notaint .kd-chip,
    #eguru-app #view-komuniti .km-cat,
    #eguru-app button.today-week,
    #eguru-app summary.btn { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
    #eguru-app .sgt-pilih-kosong { justify-content: flex-start; }
    #eguru-app .km-menu-btn { min-width: 32px; min-height: 32px; }
    #eguru-app .bk-tapis .btn, #eguru-app #view-games .gm-app .gm-lagi { min-height: 32px; display: inline-flex; align-items: center; }   /* Cari Bank 28px, Maklumat Games 29px (21 Okt) */
    /* 21 Okt (audit penuh telefon): Sediakan offline, Info RPH, kelas Portal Murid, kertas JSU, Kit Bilik Darjah, Buka Nota Interaktif — 28-29px */
    #eguru-app #view-tools .btn-sm, #eguru-app .mob-info-tog, #eguru-app .pm-kelas-tog, #eguru-app .jsu-pil, #eguru-app .akb-pbtn, #eguru-app .akb-cip,
    #eguru-app #view-notaint .kd-btn { min-height: 32px; }
    /* Minggu/Hari Mod Cuba (RPH) 26px, lipatan Sumber ejaan Jawi 28px, kamera foto profil 26px (21 Okt, audit semula) */
    #eguru-app #mock-minggu, #eguru-app #mock-hari, #eguru-app details.jw-sumber > summary { min-height: 32px; }
    #eguru-app .ak-cam { width: 32px; height: 32px; }
    #eguru-app .topbar-right { min-height: 40px; }   /* 22 Okt (CLS): tetamu 34px -> guru 40px menganjak kepala */
    /* 22 Okt (audit sentuh app + Portal Pentadbir): .btn-sm 28px, nombor Tahun 25px lebar, cip Bank 28px, tab Akaun 29px,
       lencana pelan 20px, Dikunci RPT 19px, titik Flow 20px, cip tapis Flow 24px, ambang TP 14px, padam sel PBD 20px, medan Bil. waktu 28px, lipatan 16px */
    #eguru-app .btn-sm, #eguru-app .bk-cip, #eguru-app .ak-tab { min-height: 32px; }
    #eguru-app .btn { min-width: 32px; }
    #eguru-app .ak-plan-badge, #eguru-app .rjw-btn, #eguru-app .flow-prog-dots i, #eguru-app .anl-ambang-pautan, #eguru-app .flow-cip-btn { min-height: 32px; display: inline-flex; align-items: center; }
    #eguru-app .pbd-cell-del { width: 32px; height: 32px; top: 0; right: 0; background: radial-gradient(circle, rgba(0,0,0,.06) 10px, transparent 11px); }
    #eguru-app .pbd-cell-del:hover { background: radial-gradient(circle, rgba(220,38,38,.15) 10px, transparent 11px); }
    #eguru-app #ptd-portal .jsk-tb input:not([type=checkbox]), #eguru-app #ptd-portal .jsk-tb select { min-height: 32px; }
    #eguru-app #ptd-portal details > summary:not([class]) { padding-top: 8px; padding-bottom: 8px; }
}

/* Butang tindakan sebaris dalam jadual/senarai (Ubah/Padam, Sahkan/Tolak, Semak RPH/Peranan, Analisis/Tutup/Padam):
   jurang daripada flex gap 6px & tinggi sama — BUKAN ruang teks antara <button> (~4px). Bhg 48.2 (audit susun atur 20 Okt 2026). */
#eguru-app .ptd-aksi { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: stretch; vertical-align: middle; }
#eguru-app .ptd-aksi > .btn { margin: 0 !important; }

/* ===== AUDIT KONTRAS MOD GELAP (21 Okt 2026, Bhg 48.9) =====
   Salinan CSS halaman awam dalam app (Games, Inovasi…) guna var(--card,#fff) — app menakrif --card-bg sahaja,
   jadi kad kekal putih dalam mod gelap dan teks cerah tidak kelihatan (1.1:1). Petakan --card kepada --card-bg. */
#eguru-app { --card: var(--card-bg); }
#eguru-app.dark-theme #view-games .gm-app.gm-inovasi { background: linear-gradient(160deg, rgba(245,158,11,.14), var(--card-bg) 55%); }
/* Komuniti: lencana/avatar berwarna semantik — warna latar ASAL kekal; teks gelap di atas latar cerah (putih atas ambar = 2.2:1) */
#eguru-app .km-badge-cadangan, #eguru-app .km-ava-cadangan { color: #1F2937 !important; }
#eguru-app.dark-theme .km-badge-bug, #eguru-app.dark-theme .km-badge-updates, #eguru-app.dark-theme .km-admin-tag,
#eguru-app.dark-theme .km-ava-bug, #eguru-app.dark-theme .km-ava-updates { color: #1F2937 !important; }
/* Warna status SEBARIS (style="color:#047857|#B45309|#B91C1C") — mod cerah sahaja; dalam mod gelap 2.3-2.9:1. KECUALI dalam kertas pratonton (latar putih).
   Dipadankan pada awal atribut atau selepas ';' supaya border-color/background tidak terkena. */
#eguru-app.dark-theme :is([style^="color:#047857" i], [style*=";color:#047857" i], [style*="; color:#047857" i], [style^="color: #047857" i]):not(:is(.tbl-pratonton, .dok-pratonton, .tbk-kad, .tbk-gs, .tbp-gs, .tkr-kanvas) *) { color: #34D399 !important; }
#eguru-app.dark-theme :is([style^="color:#B45309" i], [style*=";color:#B45309" i], [style*="; color:#B45309" i], [style^="color: #B45309" i]):not(:is(.tbl-pratonton, .dok-pratonton, .tbk-kad, .tbk-gs, .tbp-gs, .tkr-kanvas) *) { color: #FBBF24 !important; }
#eguru-app.dark-theme :is([style^="color:#B91C1C" i], [style*=";color:#B91C1C" i], [style*="; color:#B91C1C" i], [style^="color: #B91C1C" i]):not(:is(.tbl-pratonton, .dok-pratonton, .tbk-kad, .tbk-gs, .tbp-gs, .tkr-kanvas) *) { color: #F87171 !important; }
/* Pautan tanpa kelas (default pelayar biru #0000EE) & pautan "Maklumat" Games: 1.6:1 atas latar gelap */
#eguru-app #view-games .gm-app .gm-lagi { color: var(--primary-text); }
#eguru-app.dark-theme .view a:not([class]):not([style*="color"]), #eguru-app.dark-theme #ptd-portal a:not([class]):not([style*="color"]) { color: var(--primary-text); }
/* Angka statistik portal guna warna kumpulan (--nk) — dalam gelap dicerahkan (ungu/hijau gelap 2.6:1) */
#eguru-app.dark-theme :is([style*="color:var(--nk" i], [style*="color: var(--nk" i]):not(:is(.tbl-pratonton, .dok-pratonton, .tbk-kad, .tbk-gs, .tbp-gs, .tkr-kanvas) *) { color: color-mix(in srgb, var(--nk, #047857) 45%, #fff) !important; }
/* Isian --primary-light (#6EE7B7 dalam gelap) + teks tema cerah = 1.4:1 — dalam gelap guna isian lut sinar */
#eguru-app.dark-theme .rpt-cuti-tkt, #eguru-app.dark-theme .rph-ins-item span { background: rgba(16,185,129,.18); color: #6EE7B7; }
#eguru-app.dark-theme .aik .aik-pt-kad[aria-pressed="true"] { background: rgba(16,185,129,.18); }
/* Kawasan "kertas" pratonton (latar putih tetap) — teks guna warna tema cerah walaupun app dalam mod gelap */
#eguru-app.dark-theme .tkr-kanvas { --text: #1F2937; --text-muted: #4B5563; --text-light: #6B7280; --primary-text: #047857; --border: #E5E7EB; color: #1F2937; }
/* Jubin pratonton gaya Kad Nama: latar kertas tetap — teks gelap dalam mod gelap */
#eguru-app.dark-theme .tbk-gs i, #eguru-app.dark-theme .tbp-gs i { color: #1F2937; --text: #1F2937; --primary-text: #047857; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .dok-item-aksi button { min-width: 32px; min-height: 32px; }   /* naik/turun/padam item Minit: sasaran sentuh Bhg 48.6 */
}
#eguru-app.dark-theme .jsk-amaran, #eguru-app.dark-theme .jsk-amaran b { color: #F87171 !important; }
/* Pratonton kertas lain (Carta Organisasi .tbl-pratonton, Kad Nama .tbk-kad, dokumen .dok-pratonton): teks tema cerah */
#eguru-app.dark-theme :is(.tbl-pratonton, .dok-pratonton, .tbk-kad) { --text: #1F2937; --text-muted: #4B5563; --text-light: #6B7280; --primary-text: #047857; --border: #E5E7EB; color: #1F2937; }

/* ===== TIRAI TOOL (pemilik 21 Okt 2026: tools "memaparkan sedikit demi sedikit", mahu lancar 3 peranti) =====
   alatBuka (alat/sg_alat.js) menanda .view.alat-tirai semasa tool dimuat/dilukis: semua kecuali bar atas
   (Tools Guru · Pin · Panduan) ditahan; penunjuk muat muncul hanya jika muatan > 150ms (tool pantas = tiada kelipan).
   Selepas siap -> .alat-tirai-masuk: kandungan dipapar SEKALI GUS dengan pudar 0.2s (tiada gelongsor view 8px). */
#eguru-app .view.alat-tirai, #eguru-app .view.alat-tirai-masuk { animation: none !important; }
#eguru-app .view.alat-tirai { position: relative; min-height: 320px; }
#eguru-app .view.alat-tirai > :not(.tools-balik) { visibility: hidden !important; }
#eguru-app .view.alat-tirai::before {
    content: ""; position: absolute; left: 50%; top: 96px; width: 30px; height: 30px; margin-left: -15px; box-sizing: border-box;
    border-radius: 50%; border: 3px solid var(--border, #E5E7EB); border-top-color: var(--primary, #059669); z-index: 2;
    animation: sgTiraiNampak .2s ease .15s both, sgTiraiPusing .8s linear infinite;
}
#eguru-app .view.alat-tirai::after {
    content: attr(data-tirai); position: absolute; left: 8px; right: 8px; top: 138px; z-index: 2;
    text-align: center; font-size: var(--t5); font-weight: 600; color: var(--text-muted);
    animation: sgTiraiNampak .2s ease .15s both;
}
#eguru-app .view.alat-tirai-masuk > :not(.tools-balik) { animation: sgTiraiMasuk .2s ease-out both; }
@keyframes sgTiraiNampak { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgTiraiPusing { to { transform: rotate(360deg); } }
@keyframes sgTiraiMasuk { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    #eguru-app .view.alat-tirai::before { animation: sgTiraiNampak .2s ease .15s both; }
    #eguru-app .view.alat-tirai-masuk > :not(.tools-balik) { animation: none; }
}

/* ===== KEPALA PORTAL GURU = KEPALA PORTAL PENTADBIR (pemilik 21 Okt 2026) =====
   Kanan kepala: [suis Guru | Pentadbir] [butang kebolehcapaian]. Cari modul, Notifikasi, nama & Log keluar dalam panel
   kebolehcapaian; bilangan notifikasi = lencana merah pada butang itu. Lencana pelan di sebelah nama dalam panel itu
   (21 Okt petang 4 — dahulu di menu Guru, kini menu Akaun tanpa lencana). */
#eguru-app .hdr-sw { display: flex; background: rgba(0,0,0,.2); border-radius: 999px; padding: 3px; flex: none; }
#eguru-app .hdr-sw button { border: 0; background: none; color: #fff; font-weight: 800; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; min-height: 34px; cursor: pointer; font-family: inherit; }
#eguru-app .hdr-sw button:hover:not(.on) { background: rgba(255,255,255,.12); }
#eguru-app .hdr-sw .on { background: #fff; color: #047857; cursor: default; }
#eguru-app .hdr-sw button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#eguru-app .topbar .icon-btn { position: relative; }
#eguru-app .sg-notif-lencana { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--danger, #DC2626); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px #064E3B; pointer-events: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hdr-sw button { padding: 6px 9px; font-size: 12px; }
}
/* Menu Akaun (dahulu Guru): lencana pelan TIADA lagi di sini (21 Okt petang 4) — kiraan "kelas tertinggal" (.nav-badge) kekal */

/* ===== MURID ANDA DI KEPALA (pemilik 21 Okt 2026, Bhg 49.6) =====
   Kanan kepala kedua-dua portal: [Murid Anda] [Guru | Pentadbir] [Kebolehcapaian]. Menu Murid & Sekolah dibuang dari sidebar —
   Murid Anda membuka #view-portalmurid (senarai, kehadiran, PBD, latihan, Portal Murid); Sekolah & Jawatan dalam Portal Pentadbir. */
#eguru-app .hdr-murid { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; flex: none; border: 0; border-radius: 12px;
    background: rgba(255,255,255,.15); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; line-height: 1; cursor: pointer; white-space: nowrap; }
#eguru-app .hdr-murid svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
#eguru-app .hdr-murid:hover { background: rgba(255,255,255,.25); }
#eguru-app .hdr-murid:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#eguru-app.pm-aktif .topbar .hdr-murid { background: #fff; color: #047857; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .hdr-murid { height: 34px; padding: 0 9px; gap: 5px; font-size: 12px; border-radius: 10px; }
    #eguru-app .hdr-murid svg { width: 18px; height: 18px; }
}
@media (max-width: 480px) {   /* telefon: ikon sahaja supaya tajuk "Portal Guru" tidak tersepit (aria-label & title kekal) */
    #eguru-app .hdr-murid { width: 34px; padding: 0; justify-content: center; }
    #eguru-app .hdr-murid span { display: none; }
}
/* Kepala Portal Pentadbir kini kelas .topbar yang sama (21 Okt petang) — tiada saiz khas portal */
/* Halaman Murid Anda: butang Portal Murid di kanan kad kepala + helaian kongsi (pautan, Salin, WhatsApp, Kongsi, QR) */
#eguru-app #view-portalmurid .section-header:has(.pm-kongsi-btn) { flex-wrap: wrap; row-gap: 8px; }
#eguru-app .pm-kongsi-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
#eguru-app .pm-kongsi-btn svg { width: 16px; height: 16px; fill: currentColor; }
#eguru-app .pm-kongsi { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; justify-content: center; text-align: left; }
#eguru-app .pm-kongsi-qr:not(:empty) { flex: none; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: #fff; line-height: 0; }
#eguru-app .pm-kongsi-isi { flex: 1 1 260px; min-width: 0; }
#eguru-app .pm-kongsi-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; justify-content: flex-start !important; }
#eguru-app .pm-kongsi-aksi a.btn { text-decoration: none !important; }

/* ===== MENU MURID ANDA (pemilik 21 Okt 2026, Bhg 49.7) =====
   Bila #view-portalmurid dibuka, menu bertukar ikut tab halaman itu: sidebar = Utama + "MURID ANDA" + 5 tab (+ Support, Guru,
   Ejen AI di bawah); nav bawah telefon/tablet potret = Utama + 5 tab. Bar tab dalam halaman disorok (halaman bersih). */
#eguru-app .pm-nav, #eguru-app .pm-nav-tajuk { display: none !important; }
#eguru-app .pm-nav { --nk: #4F46E5; }
#eguru-app .pm-nav .nav-icon { fill: var(--nk) !important; }
#eguru-app .pm-l-pendek { display: none; }
#eguru-app #view-portalmurid > .pm-tabs { display: none !important; }
#eguru-app.pm-aktif .bottom-nav > .pm-nav { display: flex !important; }
#eguru-app.pm-aktif .bottom-nav > :is(.nav-grp, .nav-grp-btn, .nav-item[data-grp], #nav-kedai) { display: none !important; }
@media (min-width: 900px) {
    #eguru-app.pm-aktif .bottom-nav > .pm-nav-tajuk { display: block !important; order: 1; padding: 14px 14px 6px; font-size: var(--t1); font-weight: 800;
        letter-spacing: 1.2px; text-transform: uppercase; color: var(--nk, #4F46E5); }
    #eguru-app .pm-nav-tajuk { --nk: #4F46E5; }
    #eguru-app .pm-nav.active { background: color-mix(in srgb, var(--nk) 10%, transparent) !important; color: var(--nk) !important; }
}
@media (max-width: 899px) {
    #eguru-app.pm-aktif .bottom-nav > #nav-profile { display: none !important; }
    #eguru-app .pm-nav .pm-l-penuh { display: none; }
    #eguru-app .pm-nav .pm-l-pendek { display: inline; }
    #eguru-app .pm-nav.active .nav-icon-wrap { background: color-mix(in srgb, var(--nk) 14%, transparent) !important; }
    #eguru-app .pm-nav.active .nav-label { color: var(--nk) !important; font-weight: 800; }
}
#eguru-app.dark-theme .pm-nav, #eguru-app.dark-theme .pm-nav-tajuk { --nk: #A5B4FC; }
#eguru-app #view-portalmurid .section-header:has(.pm-kongsi-btn) .section-header-text { flex: 1 1 180px; min-width: 0; }

/* ===== SEKOLAH & JAWATAN (Portal Pentadbir, 21 Okt 2026 petang): ringkasan 3 jubin + tab + cip jawatan (Bhg 49.8) ===== */
#eguru-app .ptd-sj-ring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 var(--gap, 14px); }
#eguru-app .ptd-sj-jb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); color: var(--text); font-family: inherit; }
#eguru-app .ptd-sj-jb:hover { border-color: var(--primary); }
#eguru-app .ptd-sj-jb small { font-size: var(--t2); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
#eguru-app .ptd-sj-jb b { font-size: var(--t8, 1.22em); font-weight: 800; line-height: 1.2; color: var(--primary-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-sj-jb span { font-size: var(--t2); color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-sj-tabs { margin: 0 0 var(--gap, 14px); }
#eguru-app .ptd-sj-jaw { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#eguru-app .ptd-sj-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: var(--t4); }
#eguru-app .ptd-sj-cip span { font-size: var(--t2); color: var(--text-muted); }
#eguru-app .ptd-sj-cip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .ptd-sj-cip.on span { color: rgba(255,255,255,.9); }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .ptd-sj-ring { gap: 6px; }
    #eguru-app .ptd-sj-jb { padding: 8px 9px; }
    #eguru-app .ptd-sj-jb b { font-size: var(--t6); }
    #eguru-app .ptd-sj-jb span { display: none; }
}

/* ===== EJEN AI TETAP DI BAWAH SIDEBAR (pemilik 21 Okt 2026 petang, Bhg 49.10; dilembutkan petang 3) =====
   Portal Guru (.bottom-nav > .ejen-ctl), Portal Pentadbir (.ptd-ejen) & Portal Murid (.nav-ai): melekat di bawah sidebar
   (position: sticky) walaupun menu ditatal; TIADA garisan atas/bawah. Pemilik: "terlalu menyerlah — gunakan latar yang lembut
   daripada bordernya; border dan shadownya guna warna sekarang" -> latar ungu pucat, SEMPADAN gradien #7C3AED -> #4F46E5
   (teknik padding-box/border-box) + bayang rgba(79,70,229,.30), teks/ikon ungu gelap. Telefon: kekal dalam menu Guru (sheet). */
@media (min-width: 900px) {
    #eguru-app .bottom-nav > .ejen-ctl { position: sticky !important; bottom: 0; z-index: 3; order: 9; margin: 10px 0 0 !important; padding: 0 !important;
        border: 1.5px solid transparent !important; border-radius: 12px;
        background: linear-gradient(135deg, #F5F3FF, #EEF2FF) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box;
        box-shadow: 0 4px 14px rgba(79,70,229,.30); }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-lbl { flex: 1; display: flex !important; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px;
        color: #5B21B6 !important; font-size: var(--t5) !important; font-weight: 800 !important; text-decoration: none !important; border-radius: 10px; }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-lbl:hover { background: rgba(124,58,237,.08); }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-lbl:focus-visible { outline: 3px solid #7C3AED; outline-offset: -3px; }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ik { fill: #7C3AED; }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-t { flex: 1; }
    #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-pk { font-style: normal; font-size: 18px; line-height: 1; color: #7C3AED; }
    #eguru-app.dark-theme .bottom-nav > .ejen-ctl { background: linear-gradient(135deg, #251C3F, #1D1E3C) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; }
    #eguru-app.dark-theme .bottom-nav > .ejen-ctl .ejen-ctl-lbl { color: #DDD6FE !important; }
    #eguru-app.dark-theme .bottom-nav > .ejen-ctl .ejen-ik, #eguru-app.dark-theme .bottom-nav > .ejen-ctl .ejen-ctl-pk { fill: #C4B5FD; color: #C4B5FD; }
}
#eguru-app .ejen-ik { width: 20px; height: 20px; fill: currentColor; flex: none; }
#eguru-app .ejen-ctl-pk { display: none; }
@media (min-width: 900px) { #eguru-app .bottom-nav > .ejen-ctl .ejen-ctl-pk { display: inline; } }
#eguru-app #akaun-sheet .ejen-ik { display: none; }
/* Portal Pentadbir */
#eguru-app #ptd-portal .ptd-ejen { position: sticky; bottom: 0; z-index: 3; margin-top: auto; flex: none; display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 44px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: var(--t5); font-weight: 800; color: #5B21B6; text-align: left;
    background: linear-gradient(135deg, #F5F3FF, #EEF2FF) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; box-shadow: 0 4px 14px rgba(79,70,229,.30); }
#eguru-app #ptd-portal .ptd-ejen .ejen-ik { fill: #7C3AED; }
#eguru-app #ptd-portal .ptd-ejen span { flex: 1; }
#eguru-app #ptd-portal .ptd-ejen i { font-style: normal; font-size: 18px; line-height: 1; color: #7C3AED; }
#eguru-app #ptd-portal .ptd-ejen:hover { background: linear-gradient(135deg, #EDE9FE, #E0E7FF) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; }
#eguru-app #ptd-portal .ptd-ejen:focus-visible { outline: 3px solid #7C3AED; outline-offset: 2px; }
#eguru-app.dark-theme #ptd-portal .ptd-ejen { color: #DDD6FE; background: linear-gradient(135deg, #251C3F, #1D1E3C) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; }
#eguru-app.dark-theme #ptd-portal .ptd-ejen .ejen-ik { fill: #C4B5FD; }
#eguru-app.dark-theme #ptd-portal .ptd-ejen i { color: #C4B5FD; }

/* ===== DASHBOARD UTAMA PORTAL PENTADBIR (pemilik 21 Okt 2026 petang 3: "bahagia bila melihat paparan dan tidak stress", Bhg 49.12) =====
   Hero pastel (pudina -> langit -> krim) + ilustrasi kod SVG, jubin berwarna kumpulan dengan latar tinta 7% (bukan blok warna
   penuh), cincin kemajuan, Akses pantas, Langkah seterusnya & Rehat sejenak. Tiada merah/amaran. Kad 14px, sentuh >= 44px. */
#eguru-app .ptd-db { --db-r: 16px; }
#eguru-app .ptd-db-hero { position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden; border-radius: 18px; padding: 18px 20px; margin: 0;
    background: linear-gradient(120deg, #ECFDF5 0%, #F0F9FF 58%, #FEFCE8 100%); border: 1px solid #D1FAE5; box-shadow: 0 6px 20px rgba(5,150,105,.08); }
#eguru-app .ptd-db-hero-t { flex: 1; min-width: 0; position: relative; z-index: 1; }
#eguru-app .ptd-db-hero h2 { margin: 0; font-size: 1.36em; line-height: 1.25; font-weight: 800; color: #064E3B; }
#eguru-app .ptd-db-hero h2 span { color: #047857; }
#eguru-app .ptd-db-tkh { margin: 4px 0 0; font-size: var(--t4); font-weight: 600; color: #0F766E; }
#eguru-app .ptd-db-semangat { display: block; margin: 10px 0 0; padding: 2px 0 2px 10px; border-left: 3px solid #6EE7B7; color: #334155; font-size: var(--t5); font-style: italic; line-height: 1.5; }
/* 26 Okt 2026 (pemilik: "struktur utama pentadbiran ... lebih jelas nampaknya pada hero"): hero grid = teks | ilustrasi, garis masa tahun di dasar */
#eguru-app .ptd-db-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t i" "f f"; align-items: center; column-gap: 12px; row-gap: 14px; }
#eguru-app .ptd-db-hero-t { grid-area: t; }
#eguru-app .ptd-db-hero > .ptd-db-ilus { grid-area: i; align-self: end; margin: -8px -10px 0 0; }
#eguru-app .ptd-db-fasa { grid-area: f; position: relative; z-index: 1; }
#eguru-app .ptd-db-fasa:empty { display: none; }
#eguru-app .ptd-db-atas { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--t3); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #0F766E; }
#eguru-app .ptd-db-atas svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
#eguru-app .ptd-db-atas span { font-weight: 600; text-transform: none; letter-spacing: 0; color: #4B5563; }
#eguru-app .ptd-db-struktur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; }
#eguru-app .ptd-db-st-l { font-size: var(--t3); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #065F46; }
#eguru-app .ptd-db-bids { display: flex; flex-wrap: wrap; gap: 6px; }
#eguru-app .ptd-db-bid { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 5px 0 12px; border-radius: 999px; border: 1px solid #A7F3D0; background: #fff; color: #064E3B; font-family: inherit; font-size: var(--t4); font-weight: 700; cursor: pointer; }
#eguru-app .ptd-db-bid.solo { padding-right: 12px; }
#eguru-app .ptd-db-bid b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #047857; color: #fff; font-size: 12px; font-weight: 800; }
#eguru-app .ptd-db-bid:hover { background: #ECFDF5; border-color: #34D399; }
#eguru-app .ptd-db-bid:focus-visible { outline: 3px solid #059669; outline-offset: 2px; }
/* garis masa tahun persekolahan: lalu hijau muda, semasa hijau gelap, akan datang kelabu (bukan tab — tiada butang) */
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa { margin: 0; gap: 4px; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span { position: relative; padding: 14px 2px 0; border: 0; border-radius: 0; background: none; font-size: var(--t3); font-weight: 700; color: #6B7280; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 999px; background: #E5E7EB; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span.lalu { color: #047857; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span.lalu::before { background: #6EE7B7; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span.on { background: none; color: #064E3B; font-weight: 800; }
#eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span.on::before { background: linear-gradient(90deg, #047857, #10B981); box-shadow: 0 0 0 3px #D1FAE5; }
#eguru-app .ptd-db-cip { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
#eguru-app .ptd-db-cip span { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: #fff; border: 1px solid #A7F3D0; color: #047857; font-size: var(--t2); font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-db-cip .ptd-db-sek { font-weight: 700; color: #0F766E; }
#eguru-app .ptd-db-cip svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
#eguru-app .ptd-db-ilus { flex: none; width: 210px; height: auto; align-self: flex-end; margin: -8px -10px -20px 0; }
#eguru-app .ptd-db-mthr { transform-box: fill-box; transform-origin: center; animation: ptdDbApung 6s ease-in-out infinite; }
@keyframes ptdDbApung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #eguru-app .ptd-db-mthr { animation: none; } }
#eguru-app .ptd-db-h { margin: 18px 4px 8px; font-size: var(--t4); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .ptd-db-jubin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#eguru-app .ptd-db-jubin-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#eguru-app .ptd-db-jb { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 84px; padding: 14px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
    border-radius: var(--db-r); border: 1px solid color-mix(in srgb, var(--w) 22%, var(--card-bg)); background: color-mix(in srgb, var(--w) 6%, var(--card-bg));
    transition: transform .16s ease, box-shadow .16s ease; }
#eguru-app .ptd-db-jb:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--w) 16%, transparent); }
#eguru-app .ptd-db-jb:focus-visible, #eguru-app .ptd-db-pt:focus-visible, #eguru-app .ptd-db-lk:focus-visible { outline: 3px solid var(--w, #059669); outline-offset: 2px; }
#eguru-app .ptd-db-ik { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--w) 15%, var(--card-bg)); }
#eguru-app .ptd-db-ik svg { width: 24px; height: 24px; fill: var(--w); }
#eguru-app .ptd-db-jb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#eguru-app .ptd-db-jb-t small { font-size: var(--t3); font-weight: 700; color: var(--text-muted); }
#eguru-app .ptd-db-jb-t b { font-size: 1.3em; font-weight: 800; line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-db-jb-t span { font-size: var(--t2); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-db-cw { position: relative; flex: none; width: 48px; height: 48px; }
#eguru-app .ptd-db-cw svg { width: 48px; height: 48px; transform: rotate(-90deg); }
#eguru-app .ptd-db-c0 { fill: none; stroke: color-mix(in srgb, var(--w) 16%, var(--card-bg)); stroke-width: 5; }
#eguru-app .ptd-db-c1 { fill: none; stroke: var(--w); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
#eguru-app .ptd-db-cw b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--w); }
#eguru-app .ptd-db-pantas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#eguru-app .ptd-db-pt { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 10px 12px; text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
    border-radius: 14px; border: 1px solid var(--border); background: var(--card-bg); transition: border-color .16s, background .16s; }
#eguru-app .ptd-db-pt:hover { border-color: color-mix(in srgb, var(--w) 45%, var(--card-bg)); background: color-mix(in srgb, var(--w) 5%, var(--card-bg)); }
#eguru-app .ptd-db-pt .ptd-db-ik { width: 38px; height: 38px; border-radius: 12px; }
#eguru-app .ptd-db-pt .ptd-db-ik svg { width: 20px; height: 20px; }
#eguru-app .ptd-db-pt > span { min-width: 0; display: flex; flex-direction: column; }
#eguru-app .ptd-db-pt b { font-size: var(--t4); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-db-pt small { font-size: var(--t2); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .ptd-db-bawah { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; gap: 10px; margin: 0; }
#eguru-app .ptd-db-kad { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--db-r); padding: 14px; }
#eguru-app .ptd-db-kad > .ptd-db-ejen-btn { margin-top: auto; align-self: flex-start; }
#eguru-app .ptd-db-kad > p { margin: 0 0 12px; font-size: var(--t5); line-height: 1.55; color: var(--text-muted); }
#eguru-app .ptd-db-ejen-btn.ptd-db-hijau { border-color: #A7F3D0; color: #047857; }
#eguru-app .ptd-db-ejen-btn.ptd-db-hijau:hover { background: #ECFDF5; }
#eguru-app .ind-dash { margin: 0; }
#eguru-app .ptd-db-kad h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .ptd-db-kad h3 small { margin-left: auto; font-size: var(--t3); font-weight: 700; color: var(--primary-text, #047857); }
#eguru-app .ptd-db-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #059669) 12%, var(--card-bg)); overflow: hidden; margin: 0 0 6px; }
#eguru-app .ptd-db-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34D399, #059669); }
#eguru-app .ptd-db-lk { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font-family: inherit; font-size: var(--t5); color: var(--text); --w: #059669; }
#eguru-app .ptd-db-lk:hover { background: color-mix(in srgb, #059669 7%, transparent); }
#eguru-app .ptd-db-lk > i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #A7F3D0; display: grid; place-items: center; box-sizing: border-box; }
#eguru-app .ptd-db-lk > i svg { width: 14px; height: 14px; fill: #fff; opacity: 0; }
#eguru-app .ptd-db-lk.siap > i { background: #10B981; border-color: #10B981; }
#eguru-app .ptd-db-lk.siap > i svg { opacity: 1; }
#eguru-app .ptd-db-lk.siap span { color: var(--text-muted); text-decoration: line-through; }
#eguru-app .ptd-db-rehat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 0; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, #FFF7ED, #FEF9C3); border: 1px solid #FDE68A; }
#eguru-app .ptd-db-rehat > svg { width: 20px; height: 20px; fill: #D97706; flex: none; }
#eguru-app .ptd-db-rehat > b { color: #92400E; font-size: var(--t5); }
#eguru-app .ptd-db-rehat > span { flex: 1 1 260px; color: #78350F; font-size: var(--t5); line-height: 1.5; }
/* Iklan Ejen AI Pentadbir (akan datang) — gaya kad Ejen AI lembut Bhg 49.10 */
#eguru-app .ptd-db-ejen { border: 1.5px solid transparent; background: linear-gradient(135deg, #F5F3FF, #EEF2FF) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; box-shadow: 0 4px 14px rgba(79,70,229,.18); }
#eguru-app .ptd-db-ejen h3 { color: #4C1D95; flex-wrap: wrap; }
#eguru-app .ptd-db-ejen h3 svg { width: 20px; height: 20px; fill: #7C3AED; flex: none; }
#eguru-app .ptd-db-lbl { margin-left: auto; font-size: var(--t1); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: #7C3AED; border-radius: 999px; padding: 3px 9px; }
#eguru-app .ptd-db-ejen p { margin: 0 0 10px; color: #5B21B6; font-size: var(--t5); line-height: 1.55; }
#eguru-app .ptd-db-ejen-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid #C4B5FD; border-radius: 999px; background: #fff; color: #5B21B6; font-size: var(--t4); font-weight: 700; font-family: inherit; cursor: pointer; }
#eguru-app .ptd-db-ejen-btn i { font-style: normal; font-size: 16px; line-height: 1; }
#eguru-app .ptd-db-ejen-btn:hover { background: #EDE9FE; }
#eguru-app .ptd-db-ejen-btn:focus-visible { outline: 3px solid #7C3AED; outline-offset: 2px; }
#eguru-app .ptd-db-rehat h3 { color: #92400E; }
#eguru-app .ptd-db-rehat h3 svg { width: 20px; height: 20px; fill: #D97706; flex: none; }
#eguru-app .ptd-db-rehat p { margin: 0; color: #78350F; font-size: var(--t5); line-height: 1.55; }
@media (max-width: 1100px) and (min-width: 641px) and (orientation: landscape) { #eguru-app .ptd-db-pantas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .ptd-db-hero { padding: 14px; border-radius: 16px; }
    #eguru-app .ptd-db-hero h2 { font-size: 1.22em; }
    #eguru-app .ptd-db-ilus { width: 150px; margin: -6px -8px -16px 0; }
    #eguru-app .ptd-db-jubin, #eguru-app .ptd-db-jubin-3, #eguru-app .ptd-db-pantas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #eguru-app .ptd-db-jb { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; }
    #eguru-app .ptd-db-jb-t, #eguru-app .ptd-db-jb-t b, #eguru-app .ptd-db-jb-t span { max-width: 100%; }
    #eguru-app .ptd-db-ik { width: 38px; height: 38px; border-radius: 12px; }
    #eguru-app .ptd-db-ik svg { width: 20px; height: 20px; }
    #eguru-app .ptd-db-cw, #eguru-app .ptd-db-cw svg { width: 40px; height: 40px; }
    #eguru-app .ptd-db-pt { padding: 8px 10px; min-height: 54px; gap: 8px; }
    #eguru-app .ptd-db-pt .ptd-db-ik { width: 32px; height: 32px; border-radius: 10px; }
    #eguru-app .ptd-db-pt .ptd-db-ik svg { width: 18px; height: 18px; }
    #eguru-app .ptd-db-h { margin: 14px 4px 6px; }
    #eguru-app .ptd-db-bawah { gap: 8px; }
    #eguru-app .ptd-db-hero { row-gap: 10px; }
    #eguru-app .ptd-db-struktur { margin-top: 10px; gap: 6px; }
    #eguru-app .ptd-db-bid { min-height: 32px; padding-left: 10px; font-size: var(--t3); }
    #eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span { font-size: 10px; padding-top: 12px; }
    #eguru-app #ptd-portal .ptd-db-fasa .ind-fasa span::before { height: 6px; }
    #eguru-app .ptd-db-rehat { padding: 9px 10px; }
}
@media (min-width: 768px) and (orientation: portrait) { #eguru-app .ptd-db-jubin { grid-template-columns: repeat(4, minmax(0, 1fr)); } #eguru-app .ptd-db-pantas { grid-template-columns: repeat(4, minmax(0, 1fr)); } #eguru-app .ptd-db-jubin-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {   /* telefon: jubin mendatar rapat (ikon kiri) supaya 2 lajur tidak terlalu tinggi; Sekolah anda = 3 angka sebaris */
    #eguru-app .ptd-db-jb { flex-direction: row; align-items: center; gap: 8px; min-height: 66px; padding: 10px; }
    #eguru-app .ptd-db-jb .ptd-db-ik { width: 34px; height: 34px; border-radius: 11px; }
    #eguru-app .ptd-db-jb .ptd-db-ik svg { width: 19px; height: 19px; }
    #eguru-app .ptd-db-cw, #eguru-app .ptd-db-cw svg { width: 36px; height: 36px; }
    #eguru-app .ptd-db-cw b { font-size: 10px; }
    #eguru-app .ptd-db-jb-t b { font-size: 1.08em; }
    #eguru-app .ptd-db-jubin-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    #eguru-app .ptd-db-jubin-3 .ptd-db-jb { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 9px 10px; }
    #eguru-app .ptd-db-jubin-3 .ptd-db-jb-t { justify-content: space-between; gap: 4px; }
    #eguru-app .ptd-db-jubin-3 .ptd-db-ik, #eguru-app .ptd-db-jubin-3 .ptd-db-jb-t span { display: none; }
    #eguru-app .ptd-db-jubin-3 .ptd-db-jb-t small { line-height: 1.25; }
    #eguru-app .ptd-db-jubin-3 .ptd-db-jb-t b { font-size: 1.22em; }
}
@media (max-width: 520px) { #eguru-app .ptd-db-ilus { display: none; } }
#eguru-app.dark-theme .ptd-db-ilus { opacity: .82; }
#eguru-app.dark-theme .ptd-db-hero { background: linear-gradient(120deg, #0B2B23 0%, #0C2335 58%, #2A2712 100%); border-color: #134E4A; box-shadow: none; }
#eguru-app.dark-theme .ptd-db-hero h2 { color: #D1FAE5; }
#eguru-app.dark-theme .ptd-db-hero h2 span { color: #6EE7B7; }
#eguru-app.dark-theme .ptd-db-tkh { color: #5EEAD4; }
#eguru-app.dark-theme .ptd-db-semangat { background: rgba(255,255,255,.07); color: #E2E8F0; }
#eguru-app.dark-theme .ptd-db-cip span { background: rgba(255,255,255,.06); border-color: #115E59; color: #6EE7B7; }
#eguru-app.dark-theme .ptd-db-ik svg, #eguru-app.dark-theme .ptd-db-cw b { fill: color-mix(in srgb, var(--w) 62%, #fff); color: color-mix(in srgb, var(--w) 62%, #fff); }
#eguru-app.dark-theme .ptd-db-c1 { stroke: color-mix(in srgb, var(--w) 70%, #fff); }
#eguru-app.dark-theme .ptd-db-lk > i { border-color: #047857; }
#eguru-app.dark-theme .ptd-db-rehat { background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.35); }
#eguru-app.dark-theme .ptd-db-rehat h3 { color: #FCD34D; }
#eguru-app.dark-theme .ptd-db-rehat h3 svg { fill: #FBBF24; }
#eguru-app.dark-theme .ptd-db-rehat p, #eguru-app.dark-theme .ptd-db-rehat > span { color: #FDE68A; }
#eguru-app.dark-theme .ptd-db-rehat > b { color: #FCD34D; }
#eguru-app.dark-theme .ptd-db-rehat > svg { fill: #FBBF24; }
#eguru-app.dark-theme .ptd-db-semangat { color: #E2E8F0; border-left-color: #0F766E; background: none; }
#eguru-app.dark-theme .ptd-db-atas { color: #5EEAD4; }
#eguru-app.dark-theme .ptd-db-atas span { color: #CBD5E1; }
#eguru-app.dark-theme .ptd-db-st-l { color: #6EE7B7; }
#eguru-app.dark-theme .ptd-db-bid { background: rgba(255,255,255,.06); border-color: #115E59; color: #D1FAE5; }
#eguru-app.dark-theme .ptd-db-bid:hover { background: rgba(16,185,129,.16); }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span { color: #94A3B8; }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span::before { background: #334155; }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span.lalu { color: #6EE7B7; }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span.lalu::before { background: #047857; }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span.on { color: #D1FAE5; }
#eguru-app.dark-theme #ptd-portal .ptd-db-fasa .ind-fasa span.on::before { background: linear-gradient(90deg, #10B981, #34D399); box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
#eguru-app.dark-theme #ptd-portal .ind-lk b { color: #6EE7B7; } #eguru-app.dark-theme #ptd-portal .ind-tg { background: #064E3B; color: #A7F3D0; }   /* 26 Okt: peratus data induk — kontras mod gelap (Bhg 48.9) */
#eguru-app.dark-theme .ptd-db-ejen-btn.ptd-db-hijau { border-color: #115E59; color: #6EE7B7; }
#eguru-app.dark-theme .ptd-db-ejen { background: linear-gradient(135deg, #251C3F, #1D1E3C) padding-box, linear-gradient(135deg, #7C3AED, #4F46E5) border-box; box-shadow: none; }
#eguru-app.dark-theme .ptd-db-ejen h3 { color: #EDE9FE; }
#eguru-app.dark-theme .ptd-db-ejen h3 svg { fill: #C4B5FD; }
#eguru-app.dark-theme .ptd-db-ejen p { color: #DDD6FE; }
#eguru-app.dark-theme .ptd-db-ejen-btn { background: rgba(255,255,255,.06); border-color: #5B4A8F; color: #DDD6FE; }

/* ===== PORTAL PENTADBIR BERDIRI SENDIRI (22 Okt 2026, pemilik, Bhg 47.32) =====
   Semua modul untuk semua; jalur SKOP di bawah kepala modul (data sekolah / ruang peribadi / data contoh);
   tools = SATU kotak berlipat "Cadangan tools (tambahan)" di hujung modul; titik = modul jawatan anda di sidebar. */
#eguru-app .ptd-skop { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
    font-size: var(--t4); line-height: 1.45; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); }
#eguru-app .ptd-skop > span { flex: 1 1 240px; min-width: 0; }
#eguru-app .ptd-skop.sekolah { background: rgba(5,150,105,.07); border-color: rgba(5,150,105,.28); }
#eguru-app .ptd-skop.peribadi { background: rgba(15,118,110,.06); border-color: rgba(15,118,110,.25); }
#eguru-app .ptd-skop.contoh { background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.38); }
#eguru-app .ptd-skop-b { flex: 0 0 auto; min-height: 32px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--primary-text); background: transparent;
    color: var(--primary-text); font: inherit; font-size: var(--t3); font-weight: 700; cursor: pointer; }
#eguru-app .ptd-skop-b:hover { background: rgba(5,150,105,.08); }
#eguru-app .ptd-skop-nota { margin: 0 0 8px; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .ptd-cadangan { padding: 0 !important; overflow: hidden; }
#eguru-app .ptd-cadangan > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; cursor: pointer; list-style: none; }
#eguru-app .ptd-cadangan > summary::-webkit-details-marker { display: none; }
#eguru-app .ptd-cadangan > summary::after { content: ''; margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
#eguru-app .ptd-cadangan[open] > summary::after { transform: rotate(225deg); }
#eguru-app .ptd-cad-t { display: flex; flex-direction: column; min-width: 0; }
#eguru-app .ptd-cad-t b { font-size: var(--t5); }
#eguru-app .ptd-cad-t small { font-size: var(--t3); color: var(--text-muted); font-weight: 500; }
#eguru-app .ptd-cadangan > :not(summary) { margin-left: 14px; margin-right: 14px; }
#eguru-app .ptd-cadangan > :last-child { margin-bottom: 14px; }
#eguru-app .ptd-cad-h { margin-top: 4px; margin-bottom: 6px; font-size: var(--t3); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .ptd-cad-nota { font-size: var(--t3); margin-top: 8px; }
/* titik pada penjuru ikon: kedudukan mutlak di tempat statik (selepas ikon) - tidak mengambil lebar label (Bhg 4A satu baris) */
#eguru-app #ptd-portal .ptd-milik-t { position: absolute; width: 7px; height: 7px; margin: -15px 0 0 13px; border-radius: 50%; background: var(--nk, #059669);
    box-shadow: 0 0 0 2px var(--card-bg, #fff); pointer-events: none; }
#eguru-app .ptd-db-hk { font-size: var(--t2); font-weight: 700; letter-spacing: 0; text-transform: none; margin-left: 6px; }
#eguru-app .ptd-db-bidang { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#eguru-app .ptd-db-bd small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 1100px) and (min-width: 641px) and (orientation: landscape) { #eguru-app .ptd-db-bidang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .ptd-db-bidang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #eguru-app .ptd-skop { padding: 8px 10px; }
}
/* Skrin MULA Portal Pentadbir (22 Okt 2026 petang, Bhg 47.34 "As easy as ABC"): langkah A-B-C sebelum memilih jawatan */
#eguru-app .ptd-mula { list-style: none; counter-reset: pm; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
#eguru-app .ptd-mula li { counter-increment: pm; position: relative; padding-left: 42px; min-height: 30px; }
#eguru-app .ptd-mula li::before { content: counter(pm, upper-alpha); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: rgba(5,150,105,.12); color: var(--primary-text); font-weight: 800; }
#eguru-app .ptd-mula b { display: block; font-size: var(--t5); }
#eguru-app .ptd-mula span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.45; }
/* Kad Jawatan saya: modul yang dibuka setiap jawatan ikut kumpulan sidebar (22 Okt 2026 petang, Bhg 47.35) */
#eguru-app .ajw-modul { color: var(--primary-text) !important; font-weight: 600; }
/* Pemilih jawatan & Tugas Saya ikut BIDANG guru (22 Okt 2026 petang, pemilik, Bhg 47.36): kumpulan tertutup + butang Skop tugas */
#eguru-app .ptd-bd { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 8px; background: var(--card-bg); }
#eguru-app .ptd-bd > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; list-style: none; }
#eguru-app .ptd-bd > summary::-webkit-details-marker, #eguru-app .ptd-sj-tg > summary::-webkit-details-marker { display: none; }
#eguru-app .ptd-bd > summary::after, #eguru-app .ptd-sj-tg > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; margin-left: 4px; }
#eguru-app .ptd-bd[open] > summary::after, #eguru-app .ptd-sj-tg[open] > summary::after { transform: rotate(225deg); }
#eguru-app .ptd-bd-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#eguru-app .ptd-bd-t small { font-size: var(--t3); color: var(--text-muted); font-weight: 500; }
#eguru-app .ptd-bd-n { font-size: var(--t3); font-weight: 700; color: var(--primary-text); white-space: nowrap; }
#eguru-app .ptd-bd-isi { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
#eguru-app .ptd-jw { display: inline-flex; align-items: stretch; gap: 2px; }
#eguru-app .ptd-jw-i { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--primary-text); font: inherit; font-size: var(--t2); font-weight: 700; cursor: pointer; }
#eguru-app .ptd-jw-i svg { width: 14px; height: 14px; fill: currentColor; }
#eguru-app .ptd-jw-i.on { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .ptd-jw-i span { white-space: nowrap; }
#eguru-app .ptd-bd-isi > .ptd-pv { flex: 1 1 100%; margin: 0 0 6px; }
#eguru-app .ptd-pv { margin: 0 14px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.25); font-size: var(--t4); }
#eguru-app .ptd-pv-k { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 0 0 6px; }
#eguru-app .ptd-pv-x { min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted); }
#eguru-app .ptd-pv-m { margin: 0 0 6px; font-weight: 600; color: var(--primary-text); }
#eguru-app .ptd-pv details > summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
#eguru-app .ptd-pv ul { margin: 2px 0 8px; padding-left: 18px; text-align: left !important; }
#eguru-app .ptd-pv li { margin: 2px 0; text-align: left !important; }
#eguru-app .ptd-sj-bd { margin: 14px 4px 6px; font-size: var(--t4); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .ptd-sj-tg { padding: 0 !important; margin-bottom: 8px; }
#eguru-app .ptd-sj-tg > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; cursor: pointer; list-style: none; }
#eguru-app .ptd-sj-tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#eguru-app .ptd-sj-tt small { font-size: var(--t3); color: var(--text-muted); }
#eguru-app .ptd-sj-lihat { flex: 0 0 auto; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--primary-text); color: var(--primary-text); font-size: var(--t3); font-weight: 700; }
#eguru-app .ptd-sj-tg[open] .ptd-sj-lihat { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .ptd-sj-tg-isi { padding: 0 14px 14px; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .ptd-sj-lihat { padding: 4px 10px; }
    /* telefon & tablet potret: satu jawatan satu baris — nama mengisi, butang Skop tugas sejajar di kanan */
    #eguru-app .ptd-jw { display: flex; width: 100%; gap: 6px; }
    #eguru-app .ptd-jw > [data-ptd-kod] { flex: 1 1 auto; min-width: 0; text-align: left !important; justify-content: flex-start !important; white-space: normal !important; line-height: 1.3; padding: 7px 10px !important; }   /* .btn nowrap!important (sg_gaya) menolak teks keluar */
    #eguru-app .ptd-jw-i { flex: 0 0 auto; padding: 0 9px; }
}
/* Papan pematuhan RPH (Semakan RPH / Sekolah) — kemas, tidak serabut (pemilik 22 Okt 2026 malam, Bhg 47.27/47.37):
   jubin .ptd-sj-ring seragam, baris grid lajur tetap, status = pil berwarna (.sg-pil), butang kecil sejajar kanan. */
#eguru-app .ptd-stat { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .ptd-stat { gap: 6px; }
    #eguru-app .ptd-stat[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #eguru-app .ptd-stat:is([data-n="5"], [data-n="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#eguru-app .sk-pp-jb { cursor: default; }
#eguru-app .sk-pp-jb:hover { border-color: var(--border); }
#eguru-app .sk-pp { display: grid; gap: 6px; margin: 0 0 8px; }
#eguru-app .sk-pp-r { display: grid; grid-template-columns: minmax(0, 1fr) 130px 90px 130px 200px; gap: 12px; align-items: center; min-height: 52px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); text-align: left; font-size: var(--t5, 14px); }
#eguru-app .sk-pp-k { min-height: 0; padding: 0 12px; border: 0; background: none; font-size: var(--t2); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
#eguru-app .sk-pp-g { min-width: 0; }
#eguru-app .sk-pp-4 .sk-pp-r { grid-template-columns: minmax(0, 1fr) 130px 140px 140px; }   /* Panitia: Ahli panitia */
#eguru-app .sk-pp-3 .sk-pp-r { grid-template-columns: minmax(0, 1fr) 140px 140px; }          /* HEM: Ikut kelas */
#eguru-app .sk-pp-g b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .sk-pp-g small { display: block; color: var(--text-muted); font-size: var(--t3); }
#eguru-app .sk-pp-aksi { display: flex; gap: 6px; justify-content: flex-end; }
#eguru-app .sk-pp-aksi .btn { margin: 0 !important; min-height: 34px; }
#eguru-app .sk-pp-nota { margin: 4px 0 0; font-size: var(--t3); text-align: left; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .sk-pp-k { display: none; }
    #eguru-app .sk-pp-r, #eguru-app .sk-pp-4 .sk-pp-r, #eguru-app .sk-pp-3 .sk-pp-r { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
    #eguru-app .sk-pp-g, #eguru-app .sk-pp-aksi { grid-column: 1 / -1; }
    #eguru-app .sk-pp-r > [data-l]::before { content: attr(data-l); display: block; margin: 0 0 3px; font-size: var(--t2); font-weight: 700; color: var(--text-muted); }
    #eguru-app .sk-pp-aksi:empty { display: none; }
    #eguru-app .sk-pp-aksi .btn { flex: 1 1 0; }
}
/* Kad jawatan pemilih (22 Okt malam, pemilik "lebih kemas dan tidak nampak serabut"): SATU kad = nama (kiri) + Skop tugas (kanan, dipisah garis);
   dahulu dua kotak berasingan (cip bersempadan + pil Skop tugas) berselang-seli. Kad dipilih (.on) = latar hijau penuh. Semua saiz. */
#eguru-app .ptd-jw { border: 1.5px solid var(--border); border-radius: 10px; background: var(--card-bg); overflow: hidden; align-items: stretch !important; gap: 0 !important; }
#eguru-app .ptd-jw:hover { border-color: var(--primary); }
#eguru-app .ptd-jw > [data-ptd-kod] { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text) !important; min-height: 40px; }
#eguru-app .ptd-jw > [data-ptd-kod] small { color: var(--text-muted); opacity: 1 !important; font-weight: 700; flex: none; min-width: 3.6em; margin-right: 6px !important; }   /* lajur kod sama lebar: nama bermula sebaris */
#eguru-app .ptd-jw-i { border: 0 !important; border-left: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; color: var(--primary-text) !important; padding: 0 12px !important; }
#eguru-app .ptd-jw-i:hover, #eguru-app .ptd-jw-i.on { background: rgba(5,150,105,.08) !important; }
#eguru-app .ptd-jw.on { border-color: var(--primary); background: var(--primary); }
#eguru-app .ptd-jw.on > [data-ptd-kod], #eguru-app .ptd-jw.on > [data-ptd-kod] small, #eguru-app .ptd-jw.on .ptd-jw-i { color: #fff !important; }
#eguru-app .ptd-jw.on .ptd-jw-i { border-left-color: rgba(255,255,255,.35) !important; }
#eguru-app .ptd-jw.on .ptd-jw-i:hover, #eguru-app .ptd-jw.on .ptd-jw-i.on { background: rgba(255,255,255,.14) !important; }
#eguru-app .ptd-bd-isi { gap: 6px; }
/* Pemilih jawatan (laptop/landskap): grid lajur sejajar — setiap jawatan satu sel sama lebar, nama berbalut, Skop tugas di kanan (22 Okt malam) */
@media (min-width: 641px) and (orientation: landscape), (min-width: 1367px) {
    #eguru-app .ptd-bd-isi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 6px; }
    #eguru-app .ptd-bd-isi > .ptd-pv { grid-column: 1 / -1; margin: 0; }
    #eguru-app .ptd-jw { display: flex; gap: 6px; min-width: 0; }
    #eguru-app .ptd-jw > [data-ptd-kod] { flex: 1 1 auto; min-width: 0; text-align: left !important; justify-content: flex-start !important; white-space: normal !important; line-height: 1.3; padding: 7px 10px !important; }
    #eguru-app .ptd-jw-i { flex: 0 0 auto; }
}
/* Jalur TUGAS JAWATAN di bawah kepala setiap modul Portal Pentadbir (pemilik 22 Okt 2026 malam, Bhg 47.38) */
#eguru-app .ptd-jwmod { margin: 0 0 var(--gap, 14px); padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; background: var(--card-bg); text-align: left; }
#eguru-app .ptd-jwmod.umum { border-left-color: #0F766E; }
#eguru-app .ptd-jwmod-k { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
#eguru-app .ptd-jwmod-t { flex: 1 1 260px; min-width: 0; font-size: var(--t5, 14px); line-height: 1.45; }
#eguru-app .ptd-jwmod-t small { display: block; color: var(--text-muted); font-size: var(--t3); }
#eguru-app .sg-pil.biru { background: #CCFBF1; color: #115E59; }   /* 23 Okt: teal, serasi tema hijau */
#eguru-app .ptd-jwmod-d { margin: 8px 0 0; }
#eguru-app .ptd-jwmod-d > summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; gap: 8px; list-style: none; font-weight: 700; font-size: var(--t4); color: var(--primary-text); }
#eguru-app .ptd-jwmod-d > summary::-webkit-details-marker { display: none; }
#eguru-app .ptd-jwmod-d > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-top: -3px; }
#eguru-app .ptd-jwmod-d[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
#eguru-app .ptd-jwmod-d ul { margin: 4px 0 8px; padding-left: 18px; font-size: var(--t4); }
#eguru-app .ptd-jwmod-d li { margin: 3px 0; text-align: left !important; }
#eguru-app .ptd-jwmod-kod { display: inline-block; margin-right: 6px; font-size: var(--t2); font-weight: 700; color: var(--text-muted); }
#eguru-app .ptd-jwmod-b { min-height: 32px; padding: 0 12px; border: 1px solid var(--primary-text); border-radius: 999px; background: transparent; color: var(--primary-text); font: inherit; font-size: var(--t3); font-weight: 700; cursor: pointer; }
#eguru-app.dark-theme .sg-pil.biru { background: rgba(15,118,110,.25); color: #99F6E4; }
/* Sidebar Portal Pentadbir ikut FASA KERJA (pemilik 22 Okt 2026 malam, Bhg 47.39): bulatan nombor fasa + sub-tajuk bidang dalam fasa panjang */
#ptd-portal .ptd-grp-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nk); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
#ptd-portal .ptd-sub-bd { padding: 8px 14px 2px 48px; font-size: var(--t2, 11px); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
#ptd-portal .ptd-pop-isi .ptd-sub-bd { padding: 8px 12px 2px; }
#eguru-app .ptd-db-flow h3 svg { width: 18px; height: 18px; fill: #0F766E; vertical-align: -3px; margin-right: 6px; }
/* FLOW PENTADBIR (pemilik 22 Okt 2026 malam, Bhg 47.39) — rupa halaman Flow Portal Guru: persediaan wajib, tapis, fasa bernombor, kad langkah */
#eguru-app .pfl-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 var(--gap, 14px); padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #065F46, #047857); color: #fff; }
#eguru-app .pfl-cincin { --p: 0; flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(#6EE7B7 calc(var(--p) * 1%), rgba(255,255,255,.18) 0); }
#eguru-app .pfl-cincin b { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #065F46; font-size: 14px; font-weight: 800; }
#eguru-app .pfl-hero-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
#eguru-app .pfl-hero-t > b { font-size: var(--t6, 15px); }
#eguru-app .pfl-hero-t > span { font-size: var(--t4); opacity: .92; }
#eguru-app .pfl-hero-cip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
#eguru-app .pfl-hero .sg-pil { background: rgba(255,255,255,.16); color: #fff; }
#eguru-app .pfl-hero .sg-pil.hijau { background: #D1FAE5; color: #065F46; }
#eguru-app .pfl-mula { flex: 1 1 100%; background: #fff !important; color: #065F46 !important; justify-content: center; }
#eguru-app .pfl-tapis { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--gap, 14px); }
#eguru-app .pfl-tapis-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#eguru-app .pfl-tapis-l { font-size: var(--t2); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; padding-left: 4px; }
#eguru-app .pfl-cip { min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg); color: var(--text); font: inherit; font-size: var(--t3); font-weight: 700; cursor: pointer; }
#eguru-app .pfl-cip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .pfl-fasa { margin: 0 0 var(--gap, 14px); }
#eguru-app .pfl-fasa-h { display: flex; align-items: center; gap: 10px; margin: 18px 4px 8px; text-align: left; }
#eguru-app .pfl-fasa-no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #065F46; color: #fff; font-size: 14px; font-weight: 800; }
#eguru-app .pfl-fasa-h b { display: block; font-size: var(--t6, 15px); text-transform: uppercase; letter-spacing: .4px; }
#eguru-app .pfl-fasa-h small { display: block; font-size: var(--t3); font-weight: 500; color: var(--text-muted); }
#eguru-app .pfl-kad { padding: 0 !important; margin: 0 0 8px; overflow: hidden; }
#eguru-app .pfl-kad.siap { border-color: rgba(5,150,105,.45); }
#eguru-app .pfl-kepala { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#eguru-app .pfl-no { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--t4); color: var(--text-muted); background: var(--bg); }
#eguru-app .pfl-kad.siap .pfl-no { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .pfl-no svg { width: 18px; height: 18px; fill: currentColor; }
#eguru-app .pfl-t { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
#eguru-app .pfl-t > b { font-size: var(--t5, 14px); margin-right: 2px; }
#eguru-app .pfl-t > small { flex: 1 1 100%; color: var(--text-muted); font-size: var(--t3); line-height: 1.45; }
#eguru-app .pfl-siapa { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px; }
#eguru-app .pfl-chev { width: 9px; height: 9px; margin-top: 10px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
#eguru-app .pfl-kad.buka .pfl-chev { transform: rotate(225deg); margin-top: 14px; }
#eguru-app .pfl-isi { padding: 0 14px 14px 60px; text-align: left; font-size: var(--t4); }
#eguru-app .pfl-sebelum { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.2); }
#eguru-app .pfl-isi ol { margin: 4px 0 10px; padding-left: 20px; }
#eguru-app .pfl-isi li { margin: 3px 0; text-align: left !important; }
#eguru-app .pfl-n { margin: 0 0 10px; color: var(--text-muted); font-size: var(--t3); }
#eguru-app .pfl-nota { margin: 6px 4px 0; font-size: var(--t3); text-align: left; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .pfl-isi { padding: 0 12px 12px; }
    #eguru-app .pfl-kepala { gap: 10px; padding: 10px 12px; }
}

/* ===== 23 Okt 2026 (Bhg 47.41): pemilih jawatan NAMA BIASA dahulu + jawatan sekolah + carian ===== */
#eguru-app .ptd-jw-cari { margin: 0 0 8px; }
#eguru-app .ptd-jw > [data-ptd-kod] { white-space: normal !important; text-align: left !important; justify-content: flex-start !important; }
#eguru-app .ptd-jw-tx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 1px; }
#eguru-app .ptd-jw-tx > b { font-weight: 700; line-height: 1.3; }
#eguru-app .ptd-jw-m { font-style: normal; font-size: var(--t3); font-weight: 600; color: var(--text-muted); line-height: 1.35; }
#eguru-app .ptd-jw-s { display: inline-block; margin-right: 4px; padding: 0 7px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-weight: 700; }
#eguru-app.dark-theme .ptd-jw-s { background: rgba(217,119,6,.25); color: #FDE68A; }
#eguru-app .ptd-jw.on .ptd-jw-m { color: #fff !important; opacity: .9; }
#eguru-app .ptd-jw.on .ptd-jw-s { background: rgba(255,255,255,.22); color: #fff; }
#eguru-app .ptd-pv-k small { font-weight: 600; color: var(--text-muted); }

/* ===== 23 Okt 2026 (Bhg 47.42): butiran jawatan diisi DALAM modul ===== */
#eguru-app .ptd-butiran { margin: 0 0 var(--gap, 14px); padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); text-align: left; }
#eguru-app .ptd-butiran.kosong { border-color: #F59E0B; background: #FFFBEB; }
#eguru-app.dark-theme .ptd-butiran.kosong { background: rgba(245,158,11,.10); }
#eguru-app .ptd-butiran-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
#eguru-app .ptd-butiran-r + .ptd-butiran-r { margin-top: 8px; }
#eguru-app .ptd-butiran-r label { display: block; font-size: var(--t3); font-weight: 700; margin: 0 0 3px; }
#eguru-app .ptd-butiran-i { display: flex; gap: 6px; align-items: center; }
#eguru-app .ptd-butiran-i .form-control { flex: 1 1 auto; min-width: 0; }

/* ===== 23 Okt 2026: kad "Bersama sekolah" boleh ditekan -> tab Sekolah ===== */
#eguru-app .ajw-kad .ajw-mod-b { font: inherit; color: inherit; cursor: pointer; width: 100%; }
#eguru-app .ajw-kad .ajw-mod-b > div { flex: 1 1 auto; min-width: 0; }
#eguru-app .ajw-kad .ajw-mod-b:hover { border-color: var(--primary); }
#eguru-app .ajw-kad .ajw-mod-ke { flex: none; width: 20px; height: 20px; fill: var(--primary-text, #047857); align-self: center; }

/* 23 Okt 2026 (pemilik): dalam Murid Anda, "Murid Anda" sahaja yang aktif — pil Guru jadi butang biasa (boleh ditekan, ada hover) */
#eguru-app.pm-aktif .hdr-sw .on { background: none; color: #fff; cursor: pointer; }
#eguru-app.pm-aktif .hdr-sw button.on:hover { background: rgba(255,255,255,.12); }

/* 23 Okt 2026: Jawatan saya dikumpul ikut bidang */
#eguru-app .ajw-kad .ajw-bd { margin: 10px 0 4px; font-size: var(--t3); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .ajw-kad .ajw-bd:first-of-type { margin-top: 0; }

/* 23 Okt 2026: tugas jawatan dalam jalur modul = sama seperti Tugas Saya */
#eguru-app .ptd-jwmod .ptd-jw-tg { margin: 8px 0 0; box-shadow: none; }
#eguru-app .ptd-jwmod .ptd-jwmod-tugas:empty { display: none; }

/* ===== 23 Okt 2026 (Bhg 47.47): ALAT TUGAS — butang Tools setiap tugas, popup, kad Tools jawatan ini ===== */
#eguru-app .ptd-tg-r { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
#eguru-app .ptd-tg-r > .ptd-tg-i { flex: 1 1 auto; min-width: 0; border-top: 0 !important; }
#eguru-app .ptd-tg-alat { flex: none; min-height: 32px; margin-right: 8px; }
#eguru-app .pat-tugas { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
#eguru-app .pat-tugas small { color: var(--text-muted); font-weight: 600; }
#eguru-app .pat-tugas p { margin: 4px 0 0; text-align: justify; font-weight: 600; }
#eguru-app .pat-h { margin: 14px 0 6px; font-size: var(--t3); font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .pat-h small { text-transform: none; font-weight: 600; }
#eguru-app .pat-alat { border: 2px solid var(--primary); border-radius: 12px; padding: 12px; background: var(--card-bg); }
#eguru-app .pat-tpl b { display: block; font-size: 1.05em; } #eguru-app .pat-tpl small { color: var(--text-muted); }
#eguru-app .pat-ai, #eguru-app .pat-aksi { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#eguru-app .pat-ai-b { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#eguru-app .pat-ai-b svg { width: 16px; height: 16px; fill: currentColor; }
#eguru-app .pat-borang > summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
#eguru-app .pat-bg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
#eguru-app .pat-bg label { font-size: var(--t3); font-weight: 700; }
#eguru-app .pat-rek { display: grid; gap: 6px; }
#eguru-app .pat-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto; gap: 6px 10px; align-items: start; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
#eguru-app .pat-r small { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); }
#eguru-app .pat-mod { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
#eguru-app .pat-mod-b { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
#eguru-app .pat-mod-b:hover { border-color: var(--primary); }
#eguru-app .pat-mod-b svg { width: 20px; height: 20px; fill: var(--primary-text, #047857); flex: none; }
#eguru-app .pat-mod-b small { margin-left: auto; color: var(--text-muted); font-weight: 600; }
#eguru-app .pat-tr { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
#eguru-app .pat-tr span { flex: 1; text-align: justify; }
#eguru-app .pat-kad { margin-top: 10px; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) { #eguru-app .pat-r { grid-template-columns: 1fr; } }

/* 23 Okt 2026: kad Tools jawatan ini DI LUAR lipatan tugas (halaman jawatan) */
#eguru-app .pat-kad-luar { margin: 10px 0 0; box-shadow: none; text-align: left; }
#eguru-app .pat-kad-t { margin: 0; font-size: 1.05em; }
#eguru-app .pat-kad-s { margin: 2px 0 4px; font-size: var(--t3); }

/* ===== 23 Okt 2026 (pemilik): kepala modul Portal Pentadbiran = HERO [HERO DIBATALKAN 26 Okt 2026, pemilik: "buangkan hero ... tidak cantik"; kepala = kad putih asal], digabung dengan "Tugas khusus · Jawatan anda";
   Tools jawatan ini di luar kotak, tanpa kotak ===== */
/* baki jalur (kad tugas) tanpa kotak hijau */
#eguru-app #ptd-portal .ptd-jwmod { border: 0; background: none; padding: 0; }
/* Tools jawatan ini: di luar, tanpa kotak */
#eguru-app #ptd-portal .pat-kad-luar { margin: 0 0 var(--gap, 14px); padding: 0 2px; border: 0; background: none; box-shadow: none; }
#eguru-app #ptd-portal .pat-kad-luar .pat-kad-t { font-size: 1.15em; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
}
/* 23 Okt 2026: Alat Tugas & modul = jubin seragam hab Tools (pkj-grid) */
#eguru-app .pat-jubin .tools-kad-ikon svg.pat-ik { width: 26px; height: 26px; fill: #fff; overflow: visible; }
#eguru-app .pat-jubin .pat-bil { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
/* 47.49 Ruang Kerja jawatan (23 Okt 2026) */
#eguru-app #ptd-portal .rk-balik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
#eguru-app #ptd-portal .rk-alat-n { font-size: var(--t6); color: var(--primary-text, #047857); }
#eguru-app #ptd-portal .rk-h3 { margin: 0 0 8px; font-size: var(--t7); }
#eguru-app #ptd-portal .rk-prog { padding: 10px 14px; }
#eguru-app #ptd-portal .rk-prog .ptd-tg-prog { margin: 0; }
#eguru-app #ptd-portal .rk-tg > summary { cursor: pointer; }
/* 24 Okt: halaman alat Ruang Kerja ikut resipi Tools Guru (.alat-kad + .dok-grid + alatBar + pratonton A4) */
#eguru-app #ptd-portal .rk-atas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
#eguru-app #ptd-portal .rk-dok { margin-top: 12px; }
#eguru-app #ptd-portal .rk-medan .rk-penuh { grid-column: 1 / -1; }
#eguru-app #ptd-portal .rk-sub { margin: 12px 0 6px; font-size: var(--t5); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
#eguru-app #ptd-portal .rk-bantu { margin-bottom: 4px; }
#eguru-app #ptd-portal .rk-rek { display: flex; flex-direction: column; gap: 6px; }
#eguru-app #ptd-portal .rk-r { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
#eguru-app #ptd-portal .rk-r-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#eguru-app #ptd-portal .rk-r-t small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
#eguru-app #ptd-portal .rk-r-b { display: flex; gap: 6px; flex-shrink: 0; }
#eguru-app #ptd-portal .rk-alat .alat-lipat { margin-top: 10px; }
/* 24 Okt (mockup diluluskan): Ruang Kerja bertab — tab alat kiri -> kanan, alat aktif hijau tema; isi tab terus di bawah */
/* 24 Okt (pemilik pilih C): tab = langkah bernombor — tab AKTIF memapar nama penuh & mengisi baki lebar, tab lain nombor sahaja
   (nama di title). Penuh lebar TANPA skrol, satu baris, lebih rendah daripada hero (~44px). Pasif kelabu, hover hijau muda, aktif hijau gelap. */
#eguru-app #ptd-portal .rk-tabs { display: flex; gap: 6px; padding: 4px 0 0; border-bottom: 3px solid #047857; overflow: hidden; }
#eguru-app #ptd-portal .rk-tab { flex: 0 0 auto; min-width: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; background: #EEF2F0; color: #4B5563; font: inherit; font-size: var(--t6); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
#eguru-app #ptd-portal .rk-tab svg, #eguru-app #ptd-portal .rk-tab .rk-tab-n, #eguru-app #ptd-portal .rk-tab .rk-tab-c { display: none; }
#eguru-app #ptd-portal .rk-tab-no { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #D1D5DB; color: #374151; font-size: 13px; font-weight: 800; }
#eguru-app #ptd-portal .rk-tab:hover { background: #D1FAE5; border-color: #34D399; color: #065F46; }
#eguru-app #ptd-portal .rk-tab:hover .rk-tab-no { background: #fff; color: #065F46; }
#eguru-app #ptd-portal .rk-tab.on { flex: 1 1 auto; min-width: 0; justify-content: flex-start; background: linear-gradient(135deg, #064E3B 0%, #047857 60%, #059669 100%); border-color: #047857; color: #fff; box-shadow: 0 -3px 12px rgba(4,120,87,.28); }
#eguru-app #ptd-portal .rk-tab.on svg { display: block; width: 20px; height: 20px; fill: #fff; flex: none; }
#eguru-app #ptd-portal .rk-tab.on .rk-tab-n { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#eguru-app #ptd-portal .rk-tab.on .rk-tab-c { display: inline-block; margin-left: auto; flex: none; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 800; }
#eguru-app #ptd-portal .rk-tab.on .rk-tab-no { background: #FACC15; color: #064E3B; }
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) { #eguru-app #ptd-portal .rk-tabs { gap: 4px; } #eguru-app #ptd-portal .rk-tab { min-width: 36px; padding: 0 6px; } }
#eguru-app #ptd-portal .rk-isi { padding-top: 12px; }
#eguru-app #ptd-portal .rk-tujuan { margin: 0 0 8px; color: var(--text-muted); }
#eguru-app #ptd-portal .rk-modul > h2:first-child { display: none; }
#eguru-app #ptd-portal .rk-modul-atas .rk-lipat2, #eguru-app #ptd-portal .rk-lipat2 { display: grid; gap: 6px; }
#eguru-app.dark-theme #ptd-portal .rk-tab-no, #eguru-app.dark-theme #ptd-portal .rk-tab-c { background: rgba(52,211,153,.18); color: #6EE7B7; }
/* 24 Okt: butang garis putih atas hero — DIBUANG 26 Okt bersama hero */
/* 24 Okt (pemilik pilih C, "kecilkan lagi"): Tugas MySG & Langkah kerja = CIP pil kecil sebaris dengan tujuan alat -> popup */
#eguru-app #ptd-portal .rk-bts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
#eguru-app #ptd-portal .rk-cip { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 2px 10px; border: 1px solid #A7F3D0; border-radius: 999px; background: #fff; color: #065F46; font: inherit; font-size: var(--t4); font-weight: 700; cursor: pointer; }
#eguru-app #ptd-portal .rk-cip:hover { background: #ECFDF5; border-color: #34D399; }
#eguru-app #ptd-portal .rk-cip svg { width: 15px; height: 15px; fill: #047857; flex: none; }
#eguru-app #ptd-portal .rk-cip em { font-style: normal; padding: 0 7px; border-radius: 999px; background: #047857; color: #fff; font-size: 11px; font-weight: 800; }
#eguru-app #ptd-portal .rk-cip.siap em { background: #A16207; }
#eguru-app #ptd-portal .rk-bts-t { flex: 1 1 240px; min-width: 0; color: var(--text-muted); font-size: var(--t5); }
#eguru-app.dark-theme #ptd-portal .rk-cip { background: var(--card-bg); color: #6EE7B7; }
#eguru-app .rk-pop-sub { margin: 0 0 10px; color: var(--text-muted); text-align: justify; }
#eguru-app .rk-pop-sen { display: flex; flex-direction: column; gap: 6px; }
#eguru-app .rk-pop-i { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); cursor: pointer; text-align: justify; line-height: 1.45; }
#eguru-app .rk-pop-i input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: #047857; }
#eguru-app .rk-pop-i:has(input:checked) { background: #ECFDF5; border-color: #A7F3D0; }
#eguru-app.dark-theme #ptd-portal .rk-tab:not(.on):not(:hover) { background: var(--card-bg); color: var(--text-muted); }
#eguru-app.dark-theme #ptd-portal .rk-tab:not(.on) .rk-tab-no { background: rgba(255,255,255,.12); color: var(--text); }
#eguru-app #ptd-portal .rk-tab-nama { display: none; }
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  #eguru-app #ptd-portal .rk-tab-nama { display: block; margin: 8px 0 0; font-weight: 800; font-size: var(--t6); color: #065F46; }
  #eguru-app #ptd-portal .rk-tab.on .rk-tab-n, #eguru-app #ptd-portal .rk-tab.on svg, #eguru-app #ptd-portal .rk-tab.on .rk-tab-c { display: none; }
  #eguru-app #ptd-portal .rk-tab.on { justify-content: center; }
}
/* 24 Okt 2026 (Bhg 47.54): DATA INDUK SEKOLAH — hab 5 kad, kalendar takwim, Utama minggu ini, submenu sidebar */
#ptd-portal .ptd-it.ptd-it-sub { padding-left: 34px !important; font-size: .94em; min-height: 36px; }
#ptd-portal .ptd-it.ptd-it-sub svg { width: 15px; height: 15px; }
#eguru-app #ptd-portal .ind-hab { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 12px; }
#eguru-app #ptd-portal .ind-kad { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--card-bg); font: inherit; color: var(--text); text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
#eguru-app #ptd-portal .ind-kad:hover { transform: translateY(-2px); border-color: #34D399; box-shadow: 0 8px 18px rgba(4,120,87,.14); }
#eguru-app #ptd-portal .ind-kad.siap { border-color: #A7F3D0; background: linear-gradient(180deg, #ECFDF5, var(--card-bg)); }
#eguru-app #ptd-portal .ind-kad-ik { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 4px 10px rgba(4,120,87,.28); }
#eguru-app #ptd-portal .ind-kad-ik svg { width: 26px; height: 26px; fill: #fff; }
#eguru-app #ptd-portal .ind-kad b { font-size: var(--t6); color: #065F46; }
#eguru-app #ptd-portal .ind-kad small { color: var(--text-muted); }
#eguru-app #ptd-portal .ind-bar { display: block; width: 100%; height: 6px; border-radius: 6px; background: #D1FAE5; overflow: hidden; }
#eguru-app #ptd-portal .ind-bar i { display: block; height: 100%; background: #059669; border-radius: 6px; }
#eguru-app #ptd-portal .ind-kad .ind-bar { position: absolute; left: 14px; right: 14px; bottom: 10px; width: auto; }
#eguru-app #ptd-portal .ind-pc { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 800; color: #065F46; }
#eguru-app #ptd-portal .ind-just { text-align: justify; margin: 0 0 8px; }
#eguru-app #ptd-portal .ind-tindak, #eguru-app #ptd-portal .ind-seterus { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
#eguru-app #ptd-portal .ind-seterus { justify-content: flex-end; }
#eguru-app #ptd-portal .ind-bantu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border: 1px dashed #6EE7B7; border-radius: 12px; background: #F0FDF4; color: #065F46; }
#eguru-app #ptd-portal .ind-bantu span { flex: 1 1 260px; }
#eguru-app #ptd-portal .ind-amaran { padding: 8px 10px; border-radius: 10px; background: #FEF3C7; color: #78350F; margin: 0 0 6px; }
#eguru-app #ptd-portal .ind-ok { padding: 8px 10px; border-radius: 10px; background: #ECFDF5; color: #065F46; margin: 0; }
#eguru-app #ptd-portal .ind-sen { margin: 0; padding-left: 18px; line-height: 1.6; }
#eguru-app #ptd-portal .ind-kal { border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); padding: 10px; margin: 0 0 10px; }
#eguru-app #ptd-portal .ind-kal-t { font-weight: 800; color: #065F46; margin: 0 0 6px; }
#eguru-app #ptd-portal .ind-kal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
#eguru-app #ptd-portal .ind-kal-g span { min-height: 44px; padding: 3px 5px; border-radius: 8px; background: var(--bg, #F8FAF9); font-size: 12px; font-weight: 700; overflow: hidden; }
#eguru-app #ptd-portal .ind-kal-g span.h { min-height: 0; background: none; text-align: center; color: var(--text-muted); }
#eguru-app #ptd-portal .ind-kal-g span small { display: block; font-weight: 500; font-size: 10px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app #ptd-portal .ind-kal-g span.mesy, #eguru-app #ptd-portal .ind-kal-lg .mesy::before { background: #D1FAE5; color: #065F46; }
#eguru-app #ptd-portal .ind-kal-g span.prog, #eguru-app #ptd-portal .ind-kal-lg .prog::before { background: #FEF3C7; color: #78350F; }
#eguru-app #ptd-portal .ind-kal-g span.periksa, #eguru-app #ptd-portal .ind-kal-lg .periksa::before { background: #FFE4D6; color: #9A3412; }
#eguru-app #ptd-portal .ind-kal-g span.cuti, #eguru-app #ptd-portal .ind-kal-lg .cuti::before { background: #E5E7EB; color: #374151; }
#eguru-app #ptd-portal .ind-kal-g span.kini { outline: 2px solid #EA580C; }
#eguru-app #ptd-portal .ind-kal-lg { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
#eguru-app #ptd-portal .ind-kal-lg span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
#eguru-app #ptd-portal .ind-tahun { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
#eguru-app #ptd-portal .ind-kal.kecil { margin: 0; }
#eguru-app #ptd-portal .ind-kal.kecil .ind-kal-g span { min-height: 24px; font-size: 11px; text-align: center; padding: 3px 0; }
#eguru-app #ptd-portal .ind-dash { margin: 0 0 12px; }
#eguru-app #ptd-portal .ind-fasa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
#eguru-app #ptd-portal .ind-fasa span { padding: 8px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); text-align: center; font-weight: 700; font-size: var(--t4); color: var(--text-muted); }
#eguru-app #ptd-portal .ind-fasa span.on { background: #047857; border-color: #047857; color: #fff; }
#eguru-app #ptd-portal .ind-dash-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
#eguru-app #ptd-portal .ind-dash-g > .card { margin: 0; }
#eguru-app #ptd-portal .ind-ev { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
#eguru-app #ptd-portal .ind-ev:first-of-type { border-top: 0; }
#eguru-app #ptd-portal .ind-tg { flex: none; width: 46px; padding: 3px 0; border-radius: 10px; background: #ECFDF5; color: #065F46; text-align: center; font-size: 11px; line-height: 1.2; }
#eguru-app #ptd-portal .ind-tg b { display: block; font-size: 16px; }
#eguru-app #ptd-portal .ind-ev-t { flex: 1; min-width: 0; font-weight: 700; }
#eguru-app #ptd-portal .ind-ev-t small { display: block; font-weight: 500; color: var(--text-muted); }
#eguru-app #ptd-portal .ind-lk { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; align-items: center; gap: 8px; width: 100%; padding: 7px 4px; border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
#eguru-app #ptd-portal .ind-lk:first-of-type { border-top: 0; }
#eguru-app #ptd-portal .ind-lk:hover { background: #F0FDF4; }
#eguru-app #ptd-portal .ind-lk b { text-align: right; color: #065F46; }
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) { #eguru-app #ptd-portal .ind-fasa span { font-size: 10px; padding: 6px 2px; } #eguru-app #ptd-portal .ind-kal-g span { min-height: 36px; } #eguru-app #ptd-portal .ind-kal-g span small { display: none; } }
@media (min-width: 768px) and (orientation: landscape), (min-width: 1025px) {
  #eguru-app #ptd-portal .ind-tabs .rk-tab { flex: 1 1 0; min-width: 0; }
  #eguru-app #ptd-portal .ind-tabs .rk-tab .rk-tab-n { display: block; overflow: hidden; text-overflow: ellipsis; }
  #eguru-app #ptd-portal .ind-tabs ~ .rk-tab-nama { display: none; }
}

/* ===== 26 Okt 2026 (pemilik): SIDEBAR DILIPAT — lalai IKON SAHAJA, hover = kembang seperti asal (terapung di atas kandungan,
   kandungan tidak beralih). Hanya peranti bertetikus (hover:hover + pointer:fine); skrin sentuh (iPad landskap dll.) kekal
   sidebar penuh kerana tiada hover (sg_gaya.css 1122-1128). Standard Bhg 57. Portal Pentadbiran: sg_portal_pentadbir.js. ===== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app { --sidebar-w: 72px !important; }
    #eguru-app .bottom-nav { position: relative !important; z-index: 60; width: 72px !important; justify-self: start; overflow-x: hidden !important;
        background: var(--card-bg, #fff) !important; transition: width .18s ease, box-shadow .18s ease !important; }
    #eguru-app .bottom-nav:hover, #eguru-app .bottom-nav:focus-within { width: var(--sidebar-w-penuh, 236px) !important; box-shadow: 8px 0 28px rgba(15,23,42,.14), inset -1px 0 0 var(--border) !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within)::before { content: 'MENU'; font-size: 8.5px; letter-spacing: 1px; padding: 4px 0 12px; text-align: center; }   /* 26 Okt: MENU kekal kelihatan bila terlipat */
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-label, .nav-grp > span, .nav-grp-chev, .pm-nav-tajuk, .nav-section, .fs-ctl, .nav-lencana, .lencana-pelan) { opacity: 0 !important; pointer-events: none; }
    #eguru-app .bottom-nav :is(.nav-label, .nav-grp > span) { transition: opacity .15s ease; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl-lbl { color: transparent !important; white-space: nowrap; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl-lbl svg { fill: #7C3AED !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl .ejen-suis { opacity: 0 !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-item[data-grp] { padding-left: 14px !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-item[data-grp]::before { display: none !important; }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) { #eguru-app { --sidebar-w-penuh: 236px; } }
@media (min-width: 900px) and (max-width: 1279px) and (hover: hover) and (pointer: fine) { #eguru-app { --sidebar-w-penuh: 220px; } }
/* Bhg 57: Portal Pentadbiran — sidebar .ptd-side dilipat ke ikon; hover kembang terapung (margin negatif: kandungan flex tidak beralih) */
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side { width: 72px !important; position: relative; z-index: 60; overflow-x: hidden; transition: width .18s ease, margin .18s ease, box-shadow .18s ease; }
    html #ptd-portal .ptd-side:hover, html #ptd-portal .ptd-side:focus-within { width: 236px !important; margin-right: -164px; box-shadow: 8px 0 28px rgba(15,23,42,.14); }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within)::before { visibility: hidden; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { color: transparent !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-it { padding-left: 14px !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-it.ptd-atas svg { fill: var(--text-muted, #4B5563) !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-it.ptd-utama svg { fill: #fff !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-gl, .ptd-chev, .ptd-sisi-cap, .ptd-grp-no, small, .sg-pil, .ptd-bil) { opacity: 0 !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-ejen { color: transparent !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-ejen svg { fill: #7C3AED !important; }
}
/* 26 Okt 2026 (semakan vision): kotak keadaan kosong (*-kosong) — <b> TAJUK kotak blok, tetapi <b> di dalam ayat (span/p) kekal sebaris
   (dahulu "Tambah kelas di / Jadual Waktu / (Halaman Utama)" pecah tiga baris) */
#eguru-app [class*="kosong"] :is(span, p) b { display: inline !important; margin: 0 !important; font-size: inherit !important; }
/* 26 Okt 2026 (semakan vision): Portal Guru sidebar terlipat — label dibuang dari aliran supaya ikon tepat di tengah lajur */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-label, .nav-grp > span, .nav-grp-chev, .nav-badge) { display: none !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-item, .nav-grp) { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important; }
}
/* ===== 26 Okt 2026 — SEMAKAN VISION (modul Portal Guru): jarak & struktur ===== */
#eguru-app .rpt-jw-kosong { margin-bottom: var(--sp-3, 12px); }                         /* kotak kosong tidak melekat pada butang/select di bawah */
#eguru-app .jadual-count:empty { display: none !important; }                              /* pil kosong di sebelah "Lagi" (RPH) */
#eguru-app .pmu-tbl { min-width: 520px; }                                                 /* jadual Ikut kelas: tatal mendatar dalam .pmk-wrap, tidak dipotong */
#eguru-app .pmk-wrap { -webkit-overflow-scrolling: touch; }
#eguru-app .lgk-auto-kaki .lgk-ak-kanan .btn { white-space: nowrap; }
@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
    #eguru-app .lgk-auto-kaki .lgk-ak-kanan, #eguru-app .lgk-auto-kaki .lgk-ak-kanan .btn { width: 100% !important; justify-content: center; }   /* Seterusnya penuh lebar (sama setiap modul) */
    #eguru-app .main-content { padding-bottom: calc(var(--nav-h, 68px) + 24px + env(safe-area-inset-bottom)) !important; }   /* kandungan akhir tidak di bawah nav bawah */
}
#eguru-app #view-profile .ak-tabs { margin-bottom: var(--sp-4, 16px); }                  /* tab Akaun tidak melekat pada tajuk WAJIB */
/* (semakan vision) Portal Pentadbiran: nav bawah dengan SATU item (belum pilih jawatan) disorok; jalur fasa berjarak seragam 14px */
#ptd-portal .ptd-bawah:has(> :only-child) { display: none !important; }
#ptd-portal .ind-fasa { margin: 0 0 14px !important; }
/* ===== 26 Okt 2026 — SEMAKAN VISION (Tools Guru): struktur kongsi ===== */
#eguru-app .dok-grid2 { align-items: end; }                                               /* label 2 lajur berbeza panjang: input tetap sejajar */
#eguru-app .bdp-carta-w { overflow-x: auto; } #eguru-app .bdp-carta-w > svg { max-width: 100%; height: auto; }   /* carta Dadu muat skrin */
#eguru-app .tmm-tema { flex-wrap: wrap !important; }                                      /* cip tema Teks->Slaid tidak terpotong */
#eguru-app .alat-isi table { max-width: 100%; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .alat-isi .dok-jadual-w, #eguru-app .alat-isi .tbl-wrap, #eguru-app .alat-isi [class*="jadual-w"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #eguru-app .alat-isi .afl-tindak, #eguru-app .alat-isi .dok-tindak { flex-wrap: wrap; }   /* baris butang tidak terkeluar */
    #eguru-app .alat-isi .aspj-cip { flex-wrap: wrap; }
}
#eguru-app .alat-isi .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) { #eguru-app .alat-isi .table-wrapper > table { min-width: 560px; } }   /* cth jadual unsur Kalkulator STEM: tatal, bukan perkataan pecah 3 baris */

/* ===== 26 Okt 2026 (pemilik): hover sidebar = sidebar kembang DAN kandungan kanan menyesuaikan lebar (responsif, beranimasi) — bukan
   terapung. Kelas .sisi-buka ditogol oleh js/sg_utama.js (mouseenter/leave + fokus) pada #eguru-app. Bhg 57 pindaan. ===== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app { transition: grid-template-columns .22s cubic-bezier(.4,0,.2,1); }
    #eguru-app.sisi-buka { --sidebar-w: var(--sidebar-w-penuh, 236px) !important; }
    #eguru-app.sisi-buka .bottom-nav { box-shadow: inset -1px 0 0 var(--border) !important; }
    html #ptd-portal .ptd-side:hover, html #ptd-portal .ptd-side:focus-within { margin-right: 0 !important; box-shadow: none !important; }
}
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within)::before { visibility: visible; content: 'MENU'; font-size: 8.5px; letter-spacing: 1px; padding: 4px 0 12px; text-align: center; }
}
/* 26 Okt 2026 (pemilik: "Panel murid anda di telefon buatkan juga"): telefon/tablet potret — panel tab Murid Anda dalam KAD berbingkai
   (pengecualian kepada kad rata 14 Okt): latar kad, sempadan, radius 14px, padding 14px, 4px dari tepi skrin. */
@media (max-width: 1024px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app#eguru-app .main-content #view-portalmurid [id^="pmpanel-"] .card:not(#sg-x):not(.card .card):not(.modal-overlay .card) {
        background: var(--card-bg) !important; border: 1px solid var(--border) !important; border-radius: 14px !important;
        box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; padding: 14px !important; margin: 0 0 12px !important; }
    #eguru-app#eguru-app .main-content #view-portalmurid [id^="pmpanel-"] > :not(.card):not([hidden]):not(script):not(style):not(div:empty) { margin-left: 0; margin-right: 0; }
}
/* ===== 26 Okt 2026 — SEMAKAN VISION (Portal Pentadbiran, akaun uji lengkap) ===== */
#eguru-app #ptd-portal :is(p, label, .form-group, .ind-just, .chips, .ptd-cip-baris) + .btn,
#eguru-app #ptd-portal :is(p, label, .form-group, .ind-just) + :is(div, span) > .btn:first-child { margin-top: 10px; }
#eguru-app #ptd-portal .btn + p, #eguru-app #ptd-portal .btn + .text-muted { margin-top: 10px; }
#eguru-app #ptd-portal .ind-dash-g { align-items: start; }                                           /* kad takwim tidak diregang separuh kosong */
#eguru-app #ptd-portal .form-group + .form-group, #eguru-app #ptd-portal h3 + .form-group, #eguru-app #ptd-portal .lgk-tajuk + .form-group { margin-top: 10px; }
/* bar langkah > 6 tab di laptop: label boleh 2 baris, tidak dipotong "…" (Ruang Kerja 8 langkah) */
.lgk-bar:has(> .lgk-t:nth-child(7)) .lgk-t { min-width: 0; height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.lgk-bar:has(> .lgk-t:nth-child(7)) .lgk-t .lgk-n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app #ptd-portal .ptd-isi { padding-bottom: calc(var(--nav-h, 72px) + 20px + env(safe-area-inset-bottom)) !important; }   /* kad akhir tidak di bawah nav bawah */
    #eguru-app #ptd-portal .ind-hab > :last-child:nth-child(odd) { grid-column: 1 / -1; }            /* kad hab terakhir bersendirian -> penuh lebar */
}
#eguru-app #ptd-portal .ptd-sj-tabs .ak-tab.active { background: var(--primary, #059669) !important; color: #fff !important; }   /* tab aktif Sekolah & Jawatan jelas */
#eguru-app #ptd-portal .ptd-sj-tabs .ak-tab.active svg { fill: #fff !important; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* keterangan kepala modul: 2 baris di telefon/potret (borang kerja pertama kelihatan lebih awal) */
    #eguru-app #ptd-portal .ptd-kepala .ptd-kt p { font-size: 12.5px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* ===== 26 Okt 2026 — SEMAKAN VISION (Tools, tablet potret 820px) ===== */
#eguru-app input[type="checkbox"], #eguru-app input[type="radio"], #eguru-app input[type="range"] { accent-color: var(--primary, #059669); }   /* tiada biru lalai pelayar (Bhg 50) */
#eguru-app .alat-isi input[type="color"] { width: 48px !important; height: 36px; padding: 2px; flex: 0 0 auto; }   /* pemilih warna = input kecil, bukan jalur penuh */
#eguru-app .alat-isi .tkr-dua > :not(label) { grid-column: 1 / -1; }                   /* butang/pemilih tambahan tidak menjadi sel grid tinggi (Rumah Sukan) */
#eguru-app .alat-isi .tkr-dua { align-items: start; }
#eguru-app .alat-isi .tkr-dua textarea, #eguru-app .alat-isi .tmu-bs-dua textarea { width: 100%; box-sizing: border-box; }
#eguru-app .alat-isi .afl-tindak { align-items: center; }
#eguru-app .alat-isi .afl-tindak > .btn { min-height: 40px; }
#eguru-app .alat-isi .tkr-julat output, #eguru-app .alat-isi .tkr-julat span:last-child { white-space: nowrap; min-width: 56px; }
#eguru-app .alat-isi video, #eguru-app .alat-isi .kamera-kotak, #eguru-app .alat-isi [class*="kamera"] > video { max-height: 45vh; }
@media (max-width: 1366px) and (orientation: portrait) and (min-width: 641px) {
    #eguru-app .pkj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }   /* Tools berkaitan: 2 baris penuh x 4, tiada baris tergantung */
}
/* ===== 26 Okt 2026 — SEMAKAN VISION (Tools tablet A): struktur kongsi ===== */
/* medan tanpa .dok-f (select/input/textarea terus dalam tool) = gaya medan app, bukan lalai pelayar */
#eguru-app .alat-isi select:not([class]), #eguru-app .alat-isi input:not([class]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
#eguru-app .alat-isi textarea:not([class]) { border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--card-bg); color: var(--text); min-height: 36px; padding: 6px 10px; font: inherit; box-sizing: border-box; }
#eguru-app .alat-isi .ask-pautan { margin-left: 12px; display: inline-flex; align-items: center; }
#eguru-app details.sg-ilipat { flex: 1 1 100%; }                                         /* pil maklumat sentiasa barisnya sendiri */
#eguru-app .alat-kad > .section-header:first-child { margin-bottom: 14px; }              /* label medan pertama tidak melekat pada tajuk tool */
#eguru-app .alat-isi .lgk-bar { margin-top: 12px; }                                      /* bar langkah tidak melekat pada nota/tajuk di atas */
#eguru-app .alat-isi .dok-grid > :last-child .alat-kosong, #eguru-app .alat-isi .dok-pratonton .alat-kosong { align-self: start; }
@media (max-width: 1366px) and (orientation: portrait) and (min-width: 641px) {
    /* bar 5-6 langkah di tablet potret juga berkongsi lebar penuh (dahulu 112px tetap, 30% kosong di kanan) */
    .lgk-bar > .lgk-t:first-child:nth-last-child(-n+6), .lgk-bar > .lgk-t:first-child:nth-last-child(-n+6) ~ .lgk-t,
    #eguru-app .lgk-bar > .lgk-t:first-child:nth-last-child(-n+6), #eguru-app .lgk-bar > .lgk-t:first-child:nth-last-child(-n+6) ~ .lgk-t { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
    #eguru-app .alat-isi .akm-jb { --akm-sel: calc((100vw - 60px - 34px) / 18); }        /* jadual berkala 18 kumpulan muat skrin potret */
    #eguru-app .alat-isi .aqr-dua { grid-template-columns: minmax(0, 1fr) !important; }  /* QR: tablet potret = telefon (Bhg 34) */
}
/* Hick (sg_hick.js sghLipatTindak): item menu "Lagi" baris tindakan tool */
#eguru-app details.sgh-lagi { position: relative; display: inline-block; }
#eguru-app details.sgh-lagi > .pm-lagi-menu .sgh-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
/* 27 Okt 2026 (pemilik, tangkapan skrin: sidebar Pentadbiran terlipat "bermasalah"): bila terlipat — tiada bar warna kumpulan
   (box-shadow inset), tiada scrollbar (lebar lajur kekal 72px, ikon tepat di tengah), semua item ikon 40x40 sejajar tanpa
   inden sub-item, item kumpulan terbuka tidak berlatar; hanya item aktif berpil. Kembang (hover) kekal rupa asal. */
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side { scrollbar-width: none; }
    html #ptd-portal .ptd-side::-webkit-scrollbar { display: none; }
    html #ptd-portal .ptd-side:hover, html #ptd-portal .ptd-side:focus-within { scrollbar-width: thin; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) {
        width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; margin: 0 auto 6px !important;
        padding: 0 !important; justify-content: center !important; gap: 0 !important; border-left: 0 !important; overflow: hidden; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp):not(.on) { box-shadow: none !important; background: transparent !important; }
    /* 27 Okt (pemilik: "warna utama itu tidak menghijau"): terlipat = ikon seragam kelabu; item aktif = pil HIJAU utama + ikon putih (sama seperti Utama) */
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp).on { background: var(--primary, #059669) !important; box-shadow: 0 4px 14px rgba(5,150,105,.32) !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp).on svg { fill: #fff !important; color: #fff !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) > svg { margin: 0 !important; flex: 0 0 auto; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) > :not(svg) { display: none !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-pisah { margin: 6px auto !important; width: 32px !important; }
}
/* 27 Okt 2026 (pemilik: warna sidebar terlipat tidak sesuai; hover = label 2 baris lalu 1 baris): SEMUA sidebar desktop —
   (1) label satu baris + ellipsis (tiada balut semasa animasi lebar); (2) Portal Guru terlipat: tiada bar warna kumpulan,
   item aktif = pil hijau utama + ikon putih. 27 Okt petang (pemilik: "saya suka colourful"): ikon KEKAL berwarna ikut kumpulan. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app .bottom-nav :is(.nav-item, .nav-grp, .nav-label, .nav-grp > span), html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp) { white-space: nowrap !important; }
    #eguru-app .bottom-nav :is(.nav-label, .nav-grp > span), html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp) > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-item.active, .nav-grp.active, .nav-grp-btn.active) .nav-icon-wrap,
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-grp.active { background: var(--primary, #059669) !important; border-radius: 12px; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-item.active, .nav-grp.active, .nav-grp-btn.active) svg { fill: #fff !important; }
}
/* 27 Okt 2026 petang (pemilik: "suka colourful pada sidebar portal guru ... buatkan colourful juga untuk sidebar semua halaman lain";
   "bila ditekan satu persatu ... lari dari tempatnya"): (1) Portal Guru terlipat: sub-item kumpulan terbuka (RPT, RPH ...) sejajar
   tengah 40px, bukan berinden; (2) ikon BERWARNA ikut kumpulan di semua sidebar (palet tanpa biru, Bhg 50); item aktif kekal pil hijau. */
:root { --sk1: #0F766E; --sk2: #7C3AED; --sk3: #EA580C; --sk4: #D97706; --sk5: #DB2777; --sk6: #65A30D; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-item { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-item .nav-icon-wrap { margin: 0 auto !important; }
}
/* Pentadbiran: kumpulan bidang ke-n berwarna (ikon item dalam kumpulan ikut warna kumpulan) */
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on) svg { fill: var(--sk1) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp:not(.on) svg:not(.ptd-chev) { fill: var(--sk2) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp:not(.on) svg:not(.ptd-chev) { fill: var(--sk3) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) svg:not(.ptd-chev) { fill: var(--sk4) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) svg:not(.ptd-chev) { fill: var(--sk5) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) svg:not(.ptd-chev) { fill: var(--sk6) !important; }
/* 27 Okt petang (vision: item Data Induk semua teal gelap, kurang ceria): setiap item atas berwarna berselang (6 rona tanpa biru) */
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+1 of .ptd-atas) svg { fill: var(--sk1) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+2 of .ptd-atas) svg { fill: var(--sk2) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+3 of .ptd-atas) svg { fill: var(--sk3) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+4 of .ptd-atas) svg { fill: var(--sk4) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+5 of .ptd-atas) svg { fill: var(--sk5) !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n of .ptd-atas) svg { fill: var(--sk6) !important; }
/* 27 Okt 2026 (pemilik: jalur | warna di kiri seperti Portal Guru): Pentadbiran — setiap item atas & kumpulan bidang berjalur 3px ikut warna ikonnya */
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+1 of .ptd-atas) { --skb: var(--sk1); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+2 of .ptd-atas) { --skb: var(--sk2); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+3 of .ptd-atas) { --skb: var(--sk3); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+4 of .ptd-atas) { --skb: var(--sk4); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n+5 of .ptd-atas) { --skb: var(--sk5); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-atas:not(.ptd-utama):not(.on):nth-child(6n of .ptd-atas) { --skb: var(--sk6); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp:not(.on) { --skb: var(--sk2); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp:not(.on) { --skb: var(--sk3); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) { --skb: var(--sk4); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) { --skb: var(--sk5); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp ~ .ptd-grp:not(.on) { --skb: var(--sk6); }
html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp) { position: relative; }
html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp):not(.on):not(.ptd-utama)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; background: var(--skb, transparent); }
/* 27 Okt 2026 malam (pemilik: "| itu tidak perlu diletakkan pada submenu. Hanya untuk menu utama sahaja"): Pentadbiran — sub-item
   (Takwim, Murid & kelas ...) tanpa jalur; kumpulan bidang hanya SATU jalur (::before), bukan bayang inset asal + ::before. */
html #ptd-portal .ptd-side .ptd-it.ptd-it-sub::before { display: none !important; }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-grp { box-shadow: none !important; }
/* 27 Okt 2026 (pemilik: "buatkan yang sama juga untuk menu utama kedai di portal guru ... masukkan juga menu kedai di portal pentadbir"):
   Kedai = menu utama berwarna merah jambu + jalur | (Portal Guru: bayang inset seperti kumpulan; Pentadbiran: ::before) */
#eguru-app #nav-kedai { --nk: #DB2777; }
#eguru-app #nav-kedai svg { fill: var(--nk) !important; }
@media (min-width: 900px) { #eguru-app #nav-kedai:not(.active) { box-shadow: inset 3px 0 0 var(--nk); } }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-kedai:not(.on) { --skb: var(--sk5); }
html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-kedai:not(.on) svg { fill: var(--sk5) !important; }
/* 27 Okt 2026 malam (pemilik: "Baiki juga untuk halaman murid anda ... setiap halaman"; "bila tertutup nampakkan perkataan murid"):
   (1) menu Murid Anda: setiap item warna sendiri (palet --sk*, tiada indigo/biru) + jalur | lurus kiri; item aktif berlatar warna itu.
   (2) terlipat: tajuk "Murid Anda" dipapar ringkas "MURID" (seperti label MENU), bukan hilang.
   (3) Kedai: jalur | LURUS (::before), bukan bayang yang ikut bucu bulat. */
#eguru-app #nav-pm-senarai { --nk: var(--sk1); } #eguru-app #nav-pm-kehadiran { --nk: var(--sk2); } #eguru-app #nav-pm-pbd { --nk: var(--sk3); }
#eguru-app #nav-pm-latihan { --nk: var(--sk4); } #eguru-app #nav-pm-ranking { --nk: var(--sk5); } #eguru-app #nav-pm-portal { --nk: var(--sk6); }
#eguru-app .pm-nav-tajuk { --nk: #0F766E !important; color: #0F766E !important; }
#eguru-app .pm-nav.active { background: color-mix(in srgb, var(--nk) 12%, transparent) !important; color: var(--nk) !important; }
#eguru-app .pm-nav .nav-icon-wrap { background: transparent !important; }
@media (min-width: 900px) {
    #eguru-app :is(.pm-nav, #nav-kedai) { position: relative; }
    #eguru-app :is(.pm-nav, #nav-kedai):not(.active)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; background: var(--nk); }
    #eguru-app #nav-kedai { box-shadow: none !important; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app.pm-aktif .bottom-nav:not(:hover):not(:focus-within) > .pm-nav-tajuk { opacity: 1 !important; font-size: 0 !important; padding: 10px 0 6px !important; text-align: center; }
    #eguru-app.pm-aktif .bottom-nav:not(:hover):not(:focus-within) > .pm-nav-tajuk::after { content: 'MURID'; font-size: 8.5px; letter-spacing: 1px; font-weight: 800; }
}
/* 27 Okt malam (pemilik: "Panjang | itu tidak sama dengan portal guru"): jalur = penuh tinggi item & lurus — bucu kiri item berjalur dipersegikan supaya jalur tidak terpotong lengkung */
html #ptd-portal .ptd-side :is(.ptd-it.ptd-atas, .ptd-grp):not(.on):not(.ptd-utama):not(.ptd-it-sub), #eguru-app :is(.pm-nav, #nav-kedai):not(.active) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* 27 Okt 2026 malam 3 (pemilik: "nampak hodoh yang aktif itu bila tertutup"; "ada sidebar yang ada masalah pada gap"):
   TERLIPAT — (1) item aktif = pil HIJAU utama 40x40 + ikon putih di SEMUA sidebar (bukan kotak kelabu-hijau dengan ikon berwarna);
   (2) jarak seragam: setiap ikon 40px + 2px (langkah 42px), tiada jurang tambahan daripada tajuk/pemisah kumpulan yang tersorok. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) { background: transparent !important; }
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) .nav-icon-wrap { background: var(--primary, #059669) !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(5,150,105,.3); }
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) svg { fill: #fff !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-item, .nav-grp) { min-height: 40px !important; height: 40px !important; margin-top: 0 !important; margin-bottom: 2px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { margin: 0 auto 2px !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-grp-isi { gap: 2px !important; margin: 0 !important; padding: 0 !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-sub-bd, .ptd-sisi-cap) { display: none !important; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) .nav-icon-wrap { width: 40px !important; height: 40px !important; border: 0 !important; outline: 0 !important; display: flex !important; align-items: center; justify-content: center; }
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) .nav-icon-wrap::before,
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) .nav-icon-wrap::after { display: none !important; }
}
/* 27 Okt 2026 malam 4 (pemilik: Pentadbiran "masih ada masalah pada gap"): jalur | item berturutan BERSAMBUNG seperti Portal Guru
   (tiada celah antara jalur). Terlipat: item 42px tanpa margin; kembang: jalur dipanjangkan menutup jurang 4px antara item. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { height: 42px !important; min-height: 42px !important; margin: 0 auto !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .pm-nav { height: 42px !important; min-height: 42px !important; margin-bottom: 0 !important; }
}
html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp):not(.on):not(.ptd-utama)::before { top: -2px !important; bottom: -2px !important; }
#eguru-app .pm-nav:not(.active)::before { top: -2px !important; bottom: -2px !important; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within), html #ptd-portal .ptd-side:not(:hover):not(:focus-within) > * { row-gap: 0 !important; gap: 0 !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-grp-isi[hidden] { display: none !important; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) { html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { flex-shrink: 0 !important; } }
/* app berskala (--ui-zoom ~0.86): 46px CSS = ~40px skrin, sama langkah dengan Portal Guru & halaman awam */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { height: 46px !important; min-height: 46px !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .pm-nav { height: 46px !important; min-height: 46px !important; }
}
/* 27 Okt 2026 malam 5 (pemilik: "Masih sama juga" + bulatan pada jalur bersambung; vision banding Portal Guru): jalur | SETIAP item
   BERASINGAN dengan celah kecil seperti Portal Guru — terlipat: item 40px CSS + jarak 6px, jalur penuh tinggi item sahaja.
   Item aktif terlipat: latar hijau LEMBUT berkecerunan + ikon hijau gelap (lebih ringan daripada pil Utama). */
html #ptd-portal .ptd-side :is(.ptd-it, .ptd-grp):not(.on):not(.ptd-utama)::before { top: 0 !important; bottom: 0 !important; }
#eguru-app .pm-nav:not(.active)::before { top: 0 !important; bottom: 0 !important; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { height: 40px !important; min-height: 40px !important; margin: 0 auto 6px !important; }
    #eguru-app .bottom-nav:not(:hover):not(:focus-within) .pm-nav { height: 40px !important; min-height: 40px !important; margin-bottom: 6px !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp).on:not(.ptd-utama) { background: linear-gradient(135deg, #ECFDF5, #C6F6E0) !important; box-shadow: 0 2px 8px rgba(5,150,105,.14) !important; border-radius: 12px !important; }
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp).on:not(.ptd-utama) svg { fill: #047857 !important; color: #047857 !important; }
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) .nav-icon-wrap { background: linear-gradient(135deg, #ECFDF5, #C6F6E0) !important; box-shadow: 0 2px 8px rgba(5,150,105,.14) !important; }
    html body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.pm-nav.active, .nav-item.active:not(#nav-home)) svg { fill: #047857 !important; }
}
/* 27 Okt 2026 malam 6 (pemilik: "yang utama pun tidak nampak"): Utama Pentadbiran SENTIASA pil hijau + ikon putih (seperti Portal Guru),
   walaupun halaman lain aktif — dahulu latar dibuang oleh peraturan :not(.on) lalu ikon putih hilang di atas latar putih. */
@media (min-width: 641px) {
    html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-utama { background: linear-gradient(135deg, #10B981, #047857) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(5,150,105,.32) !important; }
    html #ptd-portal .ptd-side:not(#sgx1):not(#sgx2):not(#sgx3) .ptd-it.ptd-utama svg { fill: #fff !important; color: #fff !important; }
}
/* 27 Okt 2026 malam 7 (pemilik: "icon bahagian bawah tu masih rapat dengan line |"): kumpulan bidang terlipat — chevron (svg kedua)
   disorok supaya ikon kumpulan tepat di tengah, sama jarak dari jalur seperti item lain & Portal Guru. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-grp .ptd-chev { display: none !important; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {   /* app berskala ~0.86: 46px CSS = ~40px skrin, jarak jalur-ikon sama Portal Guru */
    html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { width: 46px !important; min-width: 46px !important; }
}