/* css/sg_perisian.css — Bhg 72.19–72.20 (3 Nov 2026): laptop & tablet landskap = SOFTWARE (Portal Guru & Portal Pentadbiran).
   Rangka (baris grid, lebar rel berlabel, ofset melekat) = CSS ikut MQ sejak lukisan pertama — lib/sg_perisian.js hanya mengisi ruang
   yang sudah dikhaskan (tiada anjakan susun atur, Bhg 49). Suis ?perisian=0 -> html.sgp-mati. Telefon & tablet potret tidak berubah.
   Warna asal kekal: kepala hijau, kad putih, aksen hijau (Bhg 47/57; gaya clean & rekaan semula warna DITOLAK). */
:root { --sgp-sedia: 1; }
.sgp-cari, .sgp-menu, .sgp-st, .sgp-bantu, .sgp-rel-bantu, .sgp-menu-dini { display: none; }

@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    /* ---------- Rangka grid: Istimewa · bar tajuk · bar menu · [sidebar | kandungan | panduan] · bar status ---------- */
    html:not(.sgp-mati) #eguru-app { --sgp-mb: 32px; --sgp-st: 24px; --sgp-pb: 304px;
        grid-template-rows: auto var(--topbar-h) var(--sgp-mb) minmax(0, 1fr) var(--sgp-st) !important;
        grid-template-areas: "ist ist" "topbar topbar" "menu menu" "sidebar main" "status status" !important; }
    html:not(.sgp-mati) #eguru-app.mc-hidup {
        grid-template-rows: auto var(--topbar-h) var(--sgp-mb) auto minmax(0, 1fr) var(--sgp-st) !important;
        grid-template-areas: "ist ist" "topbar topbar" "menu menu" "mcuba mcuba" "sidebar main" "status status" !important; }
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--sgp-pb) !important;
        grid-template-areas: "ist ist ist" "topbar topbar topbar" "menu menu menu" "sidebar main bantu" "status status status" !important; }
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app.mc-hidup {
        grid-template-areas: "ist ist ist" "topbar topbar topbar" "menu menu menu" "mcuba mcuba mcuba" "sidebar main bantu" "status status status" !important; }
    /* 4 Nov 2026 (semakan 72.17): Ruang Pakej mod app (#eguru-app.pkj-app, css/sg_pakej.css) = kepala app + rel kiri tools pakej.
       Dahulu grid di atas (spesifisiti lebih tinggi) menggantikan kawasan "kepala"/"nav" pakej -> kepala & rel tersusun ke petak salah
       (kandungan kosong di kiri, Ruang Pakej sejalur di kanan). Kini gabungan: Istimewa · kepala pakej · bar menu · [rel | kandungan] · status. */
    html:not(.sgp-mati) #eguru-app.pkj-app { grid-template-columns: 248px minmax(0, 1fr) !important;
        grid-template-rows: auto var(--topbar-h) var(--sgp-mb) minmax(0, 1fr) var(--sgp-st) !important;
        grid-template-areas: "ist ist" "kepala kepala" "menu menu" "nav main" "status status" !important; }
    html:not(.sgp-mati) #eguru-app.pkj-app.mc-hidup {
        grid-template-rows: auto var(--topbar-h) var(--sgp-mb) auto minmax(0, 1fr) var(--sgp-st) !important;
        grid-template-areas: "ist ist" "kepala kepala" "menu menu" "mcuba mcuba" "nav main" "status status" !important; }
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app.pkj-app { grid-template-columns: 248px minmax(0, 1fr) var(--sgp-pb) !important;
        grid-template-areas: "ist ist ist" "kepala kepala kepala" "menu menu menu" "nav main bantu" "status status status" !important; }
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app.pkj-app.mc-hidup {
        grid-template-areas: "ist ist ist" "kepala kepala kepala" "menu menu menu" "mcuba mcuba mcuba" "nav main bantu" "status status status" !important; }
    html.sgp-tanpa-st:not(.sgp-mati) #eguru-app { --sgp-st: 0px; }
    html.sgp-html.sgp-tanpa-st .sgp-st { display: none !important; }
    html:not(.sgp-mati) #eguru-app > .main-content { min-height: 0; }

    /* ---------- Bar tajuk: "Apa yang anda mahu buat?" (Ctrl K) ---------- */
    html.sgp-html #eguru-app.sgp .topbar > .sgp-cari { display: flex; }
    html:not(.sgp-mati) #eguru-app #topbar-cari { display: none !important; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari { align-items: center; gap: 8px; flex: 0 1 440px; min-width: 0; height: 34px; margin: 0 16px; padding: 0 8px 0 12px;
        border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.88);
        font: 500 13px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .15s ease; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari:hover { background: rgba(255,255,255,.2); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-cari kbd { flex: none; font: 700 11px/1 Inter, system-ui, sans-serif; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.16); color: #fff; }
    html.sgp-html #ptd-portal .ptd-hdr > .sgp-cari { display: flex; }

    /* ---------- Bar menu: Fail · Edit · Paparan · Pergi · Bantuan ---------- */
    html.sgp-html #eguru-app.sgp > .sgp-menu { grid-area: menu; }
    html.sgp-html #eguru-app.sgp .sgp-menu { display: flex; align-items: center; gap: 2px; height: var(--sgp-mb, 32px); padding: 0 8px; position: relative; z-index: 130;
        background: var(--card-bg, #fff); border-bottom: 1px solid var(--border, #E5E7EB); font: 500 13px/1 Inter, system-ui, sans-serif; color: var(--text, #1F2937); }
    html.sgp-html #ptd-portal .sgp-menu { flex: none; position: relative; z-index: 130; }   /* 5 Nov: senarai jatuh DI ATAS rel kiri (rel z 60-100) */
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mw { position: relative; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mb { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mb:hover, html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mw.buka > .sgp-mb { background: #ECFDF5; color: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mb:focus-visible, html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi:focus-visible { outline: 3px solid #047857; outline-offset: -3px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-dd { display: none; position: absolute; top: calc(100% + 3px); left: 0; min-width: 270px; max-height: none; overflow: visible; padding: 5px;   /* 5 Nov: overflow-y auto memaksa tatal mendatar & memotong submenu */
       
        background: var(--card-bg, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 10px; box-shadow: 0 14px 36px rgba(15,23,42,.18); z-index: 80; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mw.buka > .sgp-dd { display: block; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-dd hr { border: 0; border-top: 1px solid var(--border, #E5E7EB); margin: 4px 6px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi-w { position: relative; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-dd-sub { top: -6px; left: calc(100% - 4px); max-height: 70vh; overflow-y: auto; overflow-x: hidden; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi-w.buka > .sgp-dd-sub { display: block; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 7px;
        background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi:hover:not(:disabled), html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi-w.buka > .sgp-mi { background: #ECFDF5; color: #065F46; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi:disabled { opacity: .45; cursor: default; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi-t { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-tanda { width: 14px; font-style: normal; font-weight: 800; color: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi kbd { flex: none; font: 500 11.5px/1 Inter, system-ui, sans-serif; color: var(--text-muted, #6B7280); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mi svg { width: 16px; height: 16px; flex: none; fill: var(--text-muted, #6B7280); }
    html.sgp-html #eguru-app.dark-theme .sgp-mb:hover, html.sgp-html #eguru-app.dark-theme .sgp-mw.buka > .sgp-mb,
    html.sgp-html #eguru-app.dark-theme .sgp-mi:hover:not(:disabled), html.sgp-html #eguru-app.dark-theme .sgp-mi-w.buka > .sgp-mi { background: #0F1A15; color: #6EE7B7; }
    html.sgp-html #eguru-app.dark-theme .sgp-tanda { color: #6EE7B7; }

    /* ---------- Bar status bahasa biasa ---------- */
    html.sgp-html #eguru-app.sgp > .sgp-st { grid-area: status; }
    html.sgp-html #eguru-app.sgp .sgp-st, html.sgp-html body.sgp-m > .sgp-st, html.sgp-html body.sgp-a > .sgp-st { display: flex; align-items: center; gap: 18px; height: var(--sgp-st, 24px); padding: 0 12px; overflow: hidden; position: relative; z-index: 65;
        background: #064E3B; color: rgba(255,255,255,.9); font: 500 11.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; }
    html.sgp-html #ptd-portal .sgp-st { flex: none; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st > * { flex: none; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-s i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #34D399; vertical-align: 1px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-s.luar i { background: #FBBF24; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-b { height: 20px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 5px; background: none; color: inherit; font: inherit; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-b:hover { background: rgba(255,255,255,.14); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-b:focus-visible { outline: 2px solid #FACC15; outline-offset: 0; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-pelan { margin-left: auto; font-weight: 700; }

    /* ---------- Panel kanan "Panduan halaman ini" (F1) ---------- */
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app > .sgp-bantu { display: block; grid-area: bantu; }
    html.sgp-html.sgp-bantu-buka #ptd-portal .ptd-badan > .sgp-bantu { display: block; flex: none; width: var(--sgp-pb, 304px); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bantu { min-height: 0; overflow-y: auto; background: var(--card-bg, #fff); border-left: 1px solid var(--border, #E5E7EB);
        color: var(--text, #1F2937); font: 400 13px/1.5 Inter, system-ui, sans-serif; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-k { display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px 16px; position: sticky; top: 0; background: inherit; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-k b { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-k b svg { width: 20px; height: 20px; fill: #047857; flex: none; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-x:hover { background: #F1F5F3; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-x svg { width: 18px; height: 18px; fill: var(--text-muted, #6B7280); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-isi { padding: 2px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-n { margin: 0; font-weight: 700; color: #065F46; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-t { margin: 0; color: var(--text-muted, #4B5563); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-l { display: flex; gap: 10px; align-items: flex-start; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-l > span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
        background: #064E3B; color: #fff; font-size: 12px; font-weight: 800; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-l p { margin: 0; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-lagi { margin: 0; font-size: 12px; color: var(--text-muted, #6B7280); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; margin-top: 4px; border: 0; border-radius: 10px;
        background: linear-gradient(135deg, #059669, #047857); color: #fff; font: 700 13.5px/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-btn svg { width: 18px; height: 18px; fill: currentColor; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-btn.garis { background: none; border: 1.5px solid #A7F3D0; color: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-btn:focus-visible, html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-auto:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-nota { margin: 2px 0 0; font-size: 12px; color: var(--text-muted, #6B7280); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-nota kbd { font: 700 11px/1 Inter, system-ui, sans-serif; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--border, #D1D5DB); background: #F9FAFB; color: #374151; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-auto { align-self: flex-start; padding: 0; border: 0; background: none; color: #047857; font: 600 12px/1.4 Inter, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
    html.sgp-html #eguru-app.dark-theme .sgp-b-n, html.sgp-html #eguru-app.dark-theme .sgp-b-auto, html.sgp-html #eguru-app.dark-theme .sgp-b-btn.garis { color: #6EE7B7; }
    html.sgp-html #eguru-app.dark-theme .sgp-b-x:hover { background: #0F1A15; }
    html.sgp-html #eguru-app.dark-theme .sgp-b-nota kbd { background: #0F1A15; color: #E8F1EC; border-color: #2C3D35; }

    /* ---------- Palet Ctrl K di atas Portal Pentadbiran (dahulu terbuka DI BAWAH portal — tidak kelihatan) ---------- */
    html.ptd-buka #cari-modal { z-index: 96000 !important; }

    /* ---------- Butang Bantuan di bawah sekali menu kiri ---------- */
    html.sgp-html #eguru-app.sgp .bottom-nav > .sgp-rel-bantu, html.sgp-html #ptd-portal .ptd-side > .sgp-rel-bantu {
        display: flex; align-items: center; gap: 10px; order: 10; position: sticky; bottom: 0; z-index: 4; flex: none; width: 100%; min-height: 40px;
        margin: 6px 0 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--card-bg, #fff); color: var(--text, #1F2937);
        font: 600 13.5px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; box-shadow: 0 0 0 6px var(--card-bg, #fff); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-rel-bantu:hover { background: #ECFDF5; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-rel-bantu:focus-visible { outline: 3px solid #047857; outline-offset: -3px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-rb-ik svg { width: 21px; height: 21px; display: block; fill: #047857; }
    html.sgp-html #eguru-app.dark-theme .sgp-rb-ik svg { fill: #6EE7B7; }
    html.sgp-html #eguru-app.dark-theme .sgp-rel-bantu:hover { background: #0F1A15; }
    html:not(.sgp-mati) #eguru-app .bottom-nav > .ejen-ctl { bottom: 46px !important; }
    html:not(.sgp-mati) #eguru-app .bottom-nav > #nav-profile { bottom: 100px !important; }
    html.sgp-html #ptd-portal .ptd-side > .ptd-ejen { bottom: 46px !important; }
}

/* ---------- Menu kiri BERLABEL 76px (72.20) — menggantikan rel ikon sahaja Bhg 57 di laptop; hover = kembang seperti asal.
   Label di bawah ikon maksimum 2 baris, TIDAK dipotong (Bhg 4A); sidebar kembang kekal satu baris. ---------- */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html:not(.sgp-mati) #eguru-app { --sidebar-w: 76px !important; }
    html:not(.sgp-mati) #eguru-app.sisi-buka { --sidebar-w: var(--sidebar-w-penuh, 236px) !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) { width: 76px !important; padding-left: 6px !important; padding-right: 6px !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-item, .nav-grp, .nav-item[data-grp], .nav-item.nav-ist) {
        flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
        height: auto !important; min-height: 50px !important; padding: 6px 1px 5px !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) :is(.nav-label, .nav-grp > span) {
        display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; opacity: 1 !important; pointer-events: none; max-width: 68px; margin: 0 !important; overflow: hidden;
        font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; overflow-wrap: normal; word-break: normal; letter-spacing: 0 !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) .nav-grp .nav-grp-ikon { margin: 0 !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl-lbl { flex-direction: column !important; justify-content: center !important; gap: 3px !important;
        min-height: 50px !important; padding: 6px 1px 5px !important; color: #7C3AED !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl-t { flex: none !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.15 !important; white-space: nowrap; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) .ejen-ctl-pk { display: none !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) > .sgp-rel-bantu { flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 1px 5px; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) .sgp-rb-l { font-size: 10.5px; line-height: 1.15; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) > .ejen-ctl { bottom: 56px !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app .bottom-nav:not(:hover):not(:focus-within) > #nav-profile { bottom: 118px !important; }
    /* Portal Pentadbiran: rel .ptd-side terlipat berlabel */
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) { width: 76px !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) { flex-direction: column !important; justify-content: center !important; align-items: center !important;
        gap: 3px !important; width: 66px !important; min-width: 66px !important; height: auto !important; min-height: 50px !important; padding: 6px 1px 5px !important; color: var(--text-muted, #4B5563) !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-it, .ptd-grp) .ptd-gl,
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) :is(.ptd-kedai, .ptd-ejen) > span {
        display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; opacity: 1 !important; max-width: 68px; overflow: hidden;
        font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; overflow-wrap: normal; word-break: normal; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-gl .ptd-pjg { display: none !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-gl .ptd-pdk { display: inline !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-it.ptd-utama { color: #fff !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) > .sgp-rel-bantu { flex-direction: column; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 1px 5px; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .sgp-rb-l { font-size: 10.5px; line-height: 1.15; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-ejen { color: #7C3AED !important; flex-direction: column !important; justify-content: center !important; gap: 3px !important;
        min-height: 50px !important; height: auto !important; padding: 6px 1px 5px !important; bottom: 56px !important; }
    html.sgp-html #ptd-portal .ptd-side:not(:hover):not(:focus-within) .ptd-ejen > i { display: none !important; }
}

/* ---------- PORTAL MURID (murid.html, body.sgp-m) — 72.19: kotak Ctrl K, rel berlabel, panel Panduan F1, bar status. TANPA bar menu
   (bar menu hanya Portal Guru, Pentadbiran & Murid Anda). Rangka dikhaskan CSS sejak lukisan pertama (tiada anjakan). ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) body.sgp-m { --sgp-st: 24px; --sgp-pb: 304px; padding-bottom: var(--sgp-st); }
    html.sgp-tanpa-st:not(.sgp-mati) body.sgp-m { --sgp-st: 0px; }
    html:not(.sgp-mati) body.sgp-m .shell { min-height: calc(100dvh / var(--ui-zoom, 1) - var(--topbar-h) - var(--sgp-st)); }
    html:not(.sgp-mati) body.sgp-m .sidebar { height: calc(100dvh / var(--ui-zoom, 1) - var(--topbar-h) - var(--sgp-st)); }
    html.sgp-html body.sgp-m .topbar-in > .sgp-cari { display: flex; }
    html.sgp-html body.sgp-m > .sgp-st { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-st-kanan { margin-left: auto; font-weight: 700; }
    html.sgp-bantu-buka:not(.sgp-mati) body.sgp-m .shell { grid-template-columns: 236px minmax(0, 1fr) var(--sgp-pb) !important; }
    html.sgp-html.sgp-bantu-buka body.sgp-m .shell > .sgp-bantu { display: block; position: sticky; top: var(--topbar-h); align-self: start;
        height: calc(100dvh / var(--ui-zoom, 1) - var(--topbar-h) - var(--sgp-st)); }
    html.sgp-html body.sgp-m .sidebar > .sgp-rel-bantu { display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; z-index: 4; flex: none; width: 100%; min-height: 40px;
        margin: 6px 0 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--card-bg, #fff); color: var(--text, #1F2937);
        font: 600 13.5px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; box-shadow: 0 0 0 6px var(--card-bg, #fff); }
    html.sgp-html body.sgp-m .sidebar > .nav-ai { bottom: 46px; }
    /* Palet murid (popup seragam: bar kepala + X 34px) */
    .sgp-m .sgp-pm { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,.5); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; }
    .sgp-m .sgp-pm-k { width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--card-bg, #fff); color: var(--text, #1F2937); border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; }
    .sgp-m .sgp-pm-bar { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--border, #E5E7EB); }
    .sgp-m .sgp-pm-bar b { flex: 1; font-size: 16px; font-weight: 800; }
    .sgp-m .sgp-pm-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bg, #F3F4F6); cursor: pointer; }
    .sgp-m .sgp-pm-x svg { width: 18px; height: 18px; fill: var(--text-muted, #6B7280); }
    .sgp-m .sgp-pm-in { display: flex; align-items: center; gap: 10px; margin: 12px 14px 6px; padding: 0 12px; height: 46px; border: 2px solid var(--primary, #059669); border-radius: 12px; }
    .sgp-m .sgp-pm-in svg { width: 20px; height: 20px; fill: var(--text-muted, #6B7280); flex: none; }
    .sgp-m .sgp-pm-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: inherit; font: 500 16px/1 Inter, system-ui, sans-serif; }
    .sgp-m .sgp-pm-h { overflow-y: auto; padding: 4px 8px 8px; }
    .sgp-m .sgp-pm-sek { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--text-light, #6B7280); }
    .sgp-m .sgp-pm-r { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
    .sgp-m .sgp-pm-r b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sgp-m .sgp-pm-r span { flex: none; font-size: 12px; color: var(--text-muted, #6B7280); }
    .sgp-m .sgp-pm-r:hover, .sgp-m .sgp-pm-r.pilih { background: rgba(5,150,105,.1); }
    .sgp-m .sgp-pm-r.pilih { box-shadow: inset 3px 0 0 var(--primary, #059669); }
    .sgp-m .sgp-pm-kosong { padding: 16px 12px; text-align: center; color: var(--text-muted, #6B7280); }
    .sgp-m .sgp-pm-n { margin: 0; padding: 8px 16px 12px; border-top: 1px solid var(--border, #E5E7EB); font-size: 11.5px; color: var(--text-muted, #6B7280); }
    .sgp-m .sgp-pm-n kbd { font: 700 11px/1 Inter, system-ui, sans-serif; padding: 2px 6px; margin: 0 2px; border-radius: 5px; border: 1px solid var(--border, #D1D5DB); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    html:not(.sgp-mati) body.sgp-m .shell { grid-template-columns: 76px minmax(0, 1fr); }
    html:not(.sgp-mati) body.sgp-m .shell.sisi-buka { grid-template-columns: 236px minmax(0, 1fr); }
    html.sgp-bantu-buka:not(.sgp-mati) body.sgp-m .shell { grid-template-columns: 76px minmax(0, 1fr) var(--sgp-pb) !important; }
    html.sgp-bantu-buka:not(.sgp-mati) body.sgp-m .shell.sisi-buka { grid-template-columns: 236px minmax(0, 1fr) var(--sgp-pb) !important; }
    html:not(.sgp-mati) body.sgp-m .sidebar:not(:hover):not(:focus-within) { width: 76px; padding-left: 5px; padding-right: 5px; }
    html:not(.sgp-mati) body.sgp-m .sidebar:not(:hover):not(:focus-within) :is(.nav-i, .nav-sub, .nav-grp, .nav-ai, .sgp-rel-bantu) {
        flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important;
        min-height: 50px !important; height: auto !important; padding: 6px 1px 5px !important; text-align: center; }
    html:not(.sgp-mati) body.sgp-m .sidebar:not(:hover):not(:focus-within) :is(.nav-lbl, .nav-grp-lbl, .nav-sub > span, .nav-ai > span, .sgp-rb-l) {
        display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; opacity: 1 !important; pointer-events: none; max-width: 68px; overflow: hidden;
        font-size: 10.5px !important; font-weight: 600 !important; line-height: 1.15 !important; text-align: center !important; white-space: normal !important; flex: none !important; }
    html:not(.sgp-mati) body.sgp-m .sidebar:not(:hover):not(:focus-within) > .nav-ai { bottom: 56px; }
}

/* ---------- HALAMAN AWAM (lib/sg_kepala.js memuat lapisan ini di laptop; body.sgp-a) — 72.19: kotak Ctrl K, bar status (URL utama),
   panel Panduan F1 ("Dalam halaman ini"), rel berlabel. TANPA bar menu. Bar status & panel = fixed (tiada anjakan kandungan). ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body.sgp-a { --sgp-st: 26px; --sgp-pb: 260px; padding-bottom: var(--sgp-st); }
    html.sgp-html.sgp-tanpa-st body.sgp-a { --sgp-st: 0px; }
    html.sgp-html body.sgp-a > .sgp-st { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; }
    html.sgp-html body.sgp-a header :is(.kd-kepala-isi, .bungkus) > .sgp-cari { display: flex; flex: 0 1 420px; margin: 0 auto 0 16px; }
    html.sgp-html body.sgp-a .sg-sisi { bottom: var(--sgp-st); }
    html.sgp-html.sgp-bantu-buka body.sgp-a { padding-right: var(--sgp-pb); }
    html.sgp-html.sgp-bantu-buka body.sgp-a > :is(header, .sg-ist) { margin-right: calc(-1 * var(--sgp-pb)); }   /* kepala & bar Istimewa kekal penuh lebar */
    /* butiran Kedai & Inovasi di panel kanan (lebar & kedudukan sama panel Panduan) */
    html.sgp-html.sgp-butir-buka body.sgp-a { padding-right: var(--sgp-pb); }
    html.sgp-html.sgp-butir-buka body.sgp-a > :is(header, .sg-ist) { margin-right: calc(-1 * var(--sgp-pb)); }
    html.sgp-html.sgp-butir-buka body.sgp-a > .sgp-butir { display: block; position: fixed; right: 0; top: var(--kepala-h, var(--sgp-kepala, 62px)); bottom: var(--sgp-st); width: var(--sgp-pb); z-index: 35;
        box-shadow: -8px 0 24px rgba(15,23,42,.08); }
    html.sgp-html body.sgp-a .sgp-kad-pilih { outline: 3px solid #059669; outline-offset: 2px; border-radius: 16px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #ECFDF5; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-t { margin: 2px 0 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-harga { margin: 0; font-size: 18px; font-weight: 800; color: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-ino { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #ECFDF5; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-ino img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-ino small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-ino b { display: block; font-size: 13.5px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-ino span { display: block; font-size: 12px; color: var(--text-muted, #4B5563); }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-tag { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bt-tag i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #F1F5F3; color: #065F46; }
    html.sgp-html.sgp-bantu-buka body.sgp-a > .sgp-bantu { display: block; position: fixed; right: 0; top: var(--kepala-h, var(--sgp-kepala, 62px)); bottom: var(--sgp-st); width: var(--sgp-pb); z-index: 35;
        box-shadow: -8px 0 24px rgba(15,23,42,.08); }
    html.sgp-html body.sgp-a .sg-sisi > .sgp-rel-bantu { display: flex; align-items: center; gap: 10px; width: calc(100% - 12px); min-height: 40px; margin: 10px 6px 6px; padding: 0 12px;
        border: 0; border-radius: 10px; background: none; color: var(--text, #1F2937); font: 600 13.5px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-toc { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-toc a { color: #047857; text-decoration: none; font-weight: 600; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-b-toc a:hover { text-decoration: underline; }
    .sgp-a .sgp-pm { position: fixed; inset: 0; z-index: 130000; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    /* rel berlabel: label pendek automatik (data-sgp-p) di bawah ikon, DALAM tinggi item sedia ada (tiada anjakan) */
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) .sg-menu a { flex-direction: column !important; gap: 2px !important; }
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) .sg-menu a::after { content: attr(data-sgp-p); display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; font: 600 9.5px/1.1 Inter, system-ui, sans-serif; color: var(--text-muted, #4B5563); text-align: center; }
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) .sg-menu a.aktif::after { color: inherit; }
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) .sg-menu a svg { width: 19px !important; height: 19px !important; }
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) > .sgp-rel-bantu { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 0; width: calc(100% - 12px); }
    html.sgp-html body.sg-ada-sisi.sgp-a .sg-sisi:not(:hover):not(:focus-within) .sgp-rb-l { font-size: 9.5px; }
}

/* ---------- GAME DIBUKA = SOFTWARE (72.19 B2d; lib/sg_game.js memuat lapisan ini di laptop) — bar menu terapung menyorok sendiri ---------- */
.sgp-gbar, .sgp-gjalur { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-game .sgp-gbar { display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: 34px; padding: 0 8px 0 12px;
        background: rgba(6,78,59,.94); color: #fff; font: 600 13px/1 Inter, system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.25);
        transform: translateY(-110%); transition: transform .2s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    html.sgp-game .sgp-gbar.nampak { transform: none; }
    html.sgp-game .sgp-gbar img { width: 20px; height: 20px; border-radius: 5px; }
    html.sgp-game .sgp-gbar > b { font-weight: 800; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
    html.sgp-game .sgp-gbar .sgp-menu { display: flex; align-items: center; gap: 2px; height: 34px; background: none; border: 0; color: #fff; }
    html.sgp-game .sgp-gbar .sgp-mw { position: relative; }
    html.sgp-game .sgp-gbar .sgp-mb { height: 26px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: #fff; font: inherit; cursor: pointer; }
    html.sgp-game .sgp-gbar .sgp-mb:hover, html.sgp-game .sgp-gbar .sgp-mw.buka > .sgp-mb { background: rgba(255,255,255,.16); }
    html.sgp-game .sgp-gbar :is(.sgp-mb, .sgp-mi, .sgp-g-fs):focus-visible { outline: 3px solid #FACC15; outline-offset: -2px; }
    html.sgp-game .sgp-gbar .sgp-dd { display: none; position: absolute; top: calc(100% + 3px); left: 0; min-width: 260px; max-height: none; overflow: visible; padding: 5px;
        background: #fff; color: #1F2937; border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.3); }
    html.sgp-game .sgp-gbar .sgp-mw.buka > .sgp-dd, html.sgp-game .sgp-gbar .sgp-mi-w.buka > .sgp-dd-sub { display: block; }
    html.sgp-game .sgp-gbar .sgp-mi-w { position: relative; }
    html.sgp-game .sgp-gbar .sgp-dd-sub { top: -6px; left: calc(100% - 4px); }
    html.sgp-game .sgp-gbar .sgp-dd hr { border: 0; border-top: 1px solid #E5E7EB; margin: 4px 6px; }
    html.sgp-game .sgp-gbar .sgp-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: 500 13px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
    html.sgp-game .sgp-gbar .sgp-mi:hover, html.sgp-game .sgp-gbar .sgp-mi-w.buka > .sgp-mi { background: #ECFDF5; color: #065F46; }
    html.sgp-game .sgp-gbar .sgp-mi-t { flex: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    html.sgp-game .sgp-gbar .sgp-tanda { width: 14px; font-style: normal; font-weight: 800; color: #047857; }
    html.sgp-game .sgp-gbar .sgp-mi kbd { font: 500 11.5px/1 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-game .sgp-gbar .sgp-mi svg { width: 16px; height: 16px; fill: #6B7280; flex: none; }
    html.sgp-game .sgp-g-fs { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; background: none; color: #fff; font: 600 12px/1 Inter, system-ui, sans-serif; white-space: pre; cursor: pointer; }
    html.sgp-game .sgp-gjalur { display: block; position: fixed; left: 50%; bottom: 8px; z-index: 8999; transform: translate(-50%, 140%); padding: 6px 12px; border-radius: 999px;
        background: rgba(6,78,59,.9); color: #fff; font: 500 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; transition: transform .2s ease; pointer-events: none; }
    html.sgp-game.sgp-g-nampak .sgp-gjalur { transform: translate(-50%, 0); }
    html.sgp-game .sgp-gjalur kbd { font: 700 11px/1 Inter, system-ui, sans-serif; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.18); }
    html.sgp-game.sgp-g-tanpanav .g-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { html.sgp-game .sgp-gbar, html.sgp-game .sgp-gjalur { transition: none; } }

/* ---------- B2e MURID ANDA di laptop: Profil Murid = panel KANAN (senarai murid kekal kelihatan & boleh diklik — ketik murid lain =
   profil bertukar). Fungsi & kandungan profil tidak berubah (bukaProfilMurid / pmModal, js/sg_tools.js). ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) #eguru-app #pmf-modal-host > .modal-overlay { background: transparent !important; pointer-events: none; justify-content: flex-end !important; align-items: flex-start !important;
        padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    html:not(.sgp-mati) #eguru-app #pmf-modal-host > .modal-overlay > .modal-sheet { pointer-events: auto; width: min(540px, 42vw) !important; max-width: none !important;
        margin: calc(var(--topbar-h, 62px) + var(--sgp-mb, 32px) + 30px) 0 0 !important; height: calc(100% - var(--topbar-h, 62px) - var(--sgp-mb, 32px) - 30px - var(--sgp-st, 24px)) !important;
        max-height: none !important; overflow-y: auto; border-radius: 16px 0 0 16px !important; box-shadow: -14px 0 36px rgba(15,23,42,.2) !important; animation: sgp-sisi-masuk .2s ease both; }
}
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) #eguru-app:has(#pmf-modal-host > .modal-overlay) .main-content { padding-right: calc(min(540px, 42vw) + 12px) !important; }   /* senarai tidak terlindung */
}
@keyframes sgp-sisi-masuk { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html #eguru-app #pmf-modal-host > .modal-overlay > .modal-sheet { animation: none !important; } }

/* ---------- 72.21 APP INOVASI di laptop: bar menu dalam bar tajuk, panel Inovator ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body.sgp-a header .sgp-menu-iv { display: flex; align-items: center; gap: 2px; margin-left: 10px; height: 34px; background: none; border: 0; color: #fff; font: 600 13px/1 Inter, system-ui, sans-serif; position: relative; z-index: 70; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mw { position: relative; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mb { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: #fff; font: inherit; cursor: pointer; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mb:hover, html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mw.buka > .sgp-mb { background: rgba(255,255,255,.16); }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-dd { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; padding: 5px; background: #fff; color: #1F2937; border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 14px 36px rgba(15,23,42,.2); text-align: left; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mw.buka > .sgp-dd, html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi-w.buka > .sgp-dd-sub { display: block; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi-w { position: relative; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-dd-sub { top: -6px; left: calc(100% - 4px); }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-dd hr { border: 0; border-top: 1px solid #E5E7EB; margin: 4px 6px; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 7px; background: none; color: inherit; font: 500 13px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi:hover, html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi-w.buka > .sgp-mi { background: #ECFDF5; color: #065F46; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi-t { flex: 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-tanda { width: 14px; font-style: normal; font-weight: 800; color: #047857; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi kbd { font: 500 11.5px/1 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body.sgp-a header .sgp-menu-iv .sgp-mi svg { width: 16px; height: 16px; fill: #6B7280; flex: none; }
    html.sgp-html body.sgp-a header .sgp-menu-iv :is(.sgp-mb, .sgp-mi):focus-visible { outline: 3px solid #FACC15; outline-offset: -2px; }
    /* 72.29 mockup ?jenis=inoapp: bar menu = BARIS KEDUA 32px putih (bukan dalam bar tajuk hijau) */
    html.sgp-html.iv-app body.sgp-a header .sgp-menu-iv { order: 20; flex: 0 0 auto; width: calc(100% + 20px); margin: 0 -8px 0 -12px; height: 32px; padding: 0 8px; background: var(--card, #fff); color: #1F2937;
        border-bottom: 1px solid var(--border, #E5E7EB); font: 500 13.5px/1 Inter, system-ui, sans-serif; }
    html.sgp-html.iv-app body.sgp-a header .sgp-menu-iv .sgp-mb { height: 26px; color: var(--text, #1F2937); border-radius: 6px; }
    html.sgp-html.iv-app body.sgp-a header .sgp-menu-iv .sgp-mb:hover, html.sgp-html.iv-app body.sgp-a header .sgp-menu-iv .sgp-mw.buka > .sgp-mb { background: #ECFDF5; color: #047857; }
    html.sgp-html.iv-app[data-theme="dark"] body.sgp-a header .sgp-menu-iv .sgp-mb:hover { background: rgba(5,150,105,.16); color: #6EE7B7; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: #ECFDF5; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: #047857; text-transform: uppercase; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-nama { font-size: 14.5px; color: #064E3B; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-sek { font-size: 12.5px; color: #374151; display: flex; gap: 4px; align-items: center; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-sek svg { width: 14px; height: 14px; fill: #047857; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-ino .iv-pembina-bio { grid-column: 1 / -1; font-size: 12.5px; color: #374151; }
}

/* ---------- Lawatan berpandu (4 sorotan) — di dalam #eguru-app: kekhususan #eguru-app mengatasi reset `#eguru-app *` ---------- */
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw { position: fixed; inset: 0; z-index: 130000; pointer-events: none; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-s { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(2,44,34,.55); outline: 3px solid #FACC15; outline-offset: 0; transition: all .22s cubic-bezier(.4,0,.2,1); }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-k { position: fixed; width: 320px; max-width: calc(100vw - 16px); pointer-events: auto; padding: 14px 16px 12px; border-radius: 14px; background: #fff; color: #1F2937;
    box-shadow: 0 18px 44px rgba(0,0,0,.28); font: 400 13.5px/1.5 Inter, system-ui, sans-serif; text-align: left; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-k small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: #B45309; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-k b { display: block; margin: 4px 0 2px; font-size: 15px; font-weight: 800; color: #064E3B; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-k p { margin: 0 0 12px; color: #4B5563; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-b { display: flex; justify-content: space-between; gap: 8px; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-b button { min-height: 36px; padding: 0 14px; border-radius: 9px; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-lk { border: 1.5px solid #D1D5DB; background: #fff; color: #374151; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-sn { border: 0; background: linear-gradient(135deg, #059669, #047857); color: #fff; }
:is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-b button:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :is(#eguru-app, .sgp-m, .sgp-a) .sgp-lw-s { transition: none; } }

/* ---------- App dipasang dengan window-controls-overlay (manifest display_override): bar tajuk = bar tetingkap ---------- */
@media (display-mode: window-controls-overlay) and (min-width: 900px) {
    html:not(.sgp-mati) #eguru-app { grid-template-areas: "topbar topbar" "ist ist" "menu menu" "sidebar main" "status status" !important; }
    html.sgp-bantu-buka:not(.sgp-mati) #eguru-app { grid-template-areas: "topbar topbar topbar" "ist ist ist" "menu menu menu" "sidebar main bantu" "status status status" !important; }
    html.sgp-html #eguru-app.sgp > .topbar, html.sgp-html #ptd-portal .ptd-hdr {
        padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 8px) !important; -webkit-app-region: drag; app-region: drag; }
    html.sgp-html #eguru-app.sgp > .topbar :is(button, a, input, [role="button"]), html.sgp-html #ptd-portal .ptd-hdr :is(button, a, input, [role="button"]) { -webkit-app-region: no-drag; app-region: no-drag; }
}

/* ---------- 3 Nov 2026 (Bhg 72.22): grid semak jadual (Misi 1 / Import Pukal) — grid di tengah + panel KANAN "Perlu semakan"
   (Ubah slot / Ketik, Nama kelas seragam, Bidang PI). Telefon: panel kekal di bawah grid (rupa asal). ---------- */
.jwp-panel-t, .jwp-panel-kosong { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) #eguru-app .jwp-susun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 12px; align-items: start; }
    html:not(.sgp-mati) #eguru-app .jwp-panel { position: sticky; top: 0; max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
        padding: 10px; border: 1px solid var(--border, #E5E7EB); border-radius: var(--radius-sm, 10px); background: var(--card-bg, #fff); }
    html:not(.sgp-mati) #eguru-app .jwp-panel > .jwp-ketik, html:not(.sgp-mati) #eguru-app .jwp-panel > .jwp-kotak-soal { margin-top: 0; }
    html:not(.sgp-mati) #eguru-app .jwp-panel-t { display: block; font: 800 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted, #6B7280); padding: 2px 2px 0; }
    html:not(.sgp-mati) #eguru-app .jwp-panel-kosong { display: block; padding: 14px 10px; border: 1px dashed var(--border, #E5E7EB); border-radius: var(--radius-sm, 10px); text-align: center; font-size: var(--t3, 12px); color: var(--text-muted, #6B7280); }
    html:not(.sgp-mati) #eguru-app .jwp-panel .jwp-soal-baris { align-items: flex-start; }
}
html.sgp-mati .jwp-panel-t, html.sgp-mati .jwp-panel-kosong { display: none !important; }

/* 72.28 PEMBACA UNIT SK (lib/sg_perisian.js pasangUnit): senarai SK kiri + bar Sebelum/Seterusnya melekat — laptop & tablet landskap */
.sgp-unit, .sgp-unit-alat { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    /* 72.29 mockup ?jenis=nota: senarai unit = .senarai-p 250px PENUH TINGGI rapat ke rel (bukan kad terapung); item .sp + .no-k (siap / sedang) */
    :is(html, #sgp-x).sgp-html:not(.sgp-mati):not(.iv-app) body.sg-ada-sisi.sgp-unit-on > :is(main.kd-bekas, .kd-kaki) { margin-left: 326px !important; }   /* atasi rel 76px kedai.css M3 */
    html.sgp-html body.sgp-unit-on main.kd-bekas { display: block; max-width: none; }
    html.sgp-html body.sgp-unit-on .sgp-unit { display: block; position: fixed; z-index: 11; left: 76px; top: var(--kepala-h, var(--sgp-kepala, 40px)); bottom: var(--sgp-st, 26px); width: 250px; margin: 0;
        overflow-y: auto; padding: 0 0 12px; border: 0; border-right: 1px solid var(--border, #E5E7EB); border-radius: 0; background: var(--card, #fff); scrollbar-width: thin; }
    .sgp-unit-sub { display: block; margin: 16px 14px 6px; color: var(--text-muted, #6B7280); font: 800 10.5px/1.3 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1.2px; text-decoration: none; }
    .sgp-unit-sub:hover { color: var(--primary-text); }
    .sgp-unit ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
    .sgp-unit a:not(.sgp-unit-sub) { display: flex; align-items: center; gap: 10px; margin: 0 8px; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; }
    .sgp-unit a:not(.sgp-unit-sub):hover { background: var(--bg); }
    .sgp-unit a > span { flex: 1; min-width: 0; }
    .sgp-unit .sgp-u-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 13px/1.35 Inter, system-ui, sans-serif; }
    .sgp-unit a small { display: block; color: var(--text-muted, #6B7280); font: 400 11.5px/1.35 Inter, system-ui, sans-serif; }
    .sgp-unit a b { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 3px; border: 0; border-radius: 8px; background: #E5E7EB; color: #4B5563; font: 800 11px/1 Inter, system-ui, sans-serif; }
    .sgp-unit a b.siap { background: #059669; color: #fff; }
    .sgp-unit a b.sedang { background: #F59E0B; color: #fff; }
    .sgp-unit a[aria-current] { background: rgba(5,150,105,.1); box-shadow: inset 3px 0 0 #059669; color: var(--text); }
    html[data-theme="dark"] .sgp-unit a b:not(.siap):not(.sedang) { background: #374151; color: #E5E7EB; }
    /* kepala unit = .kepala-k mockup (tanpa kad; h1 23px) */
    html.sgp-html body.sgp-unit-on.ni-unit-hal .ni-hero { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 12px !important; }
    html.sgp-html body.sgp-unit-on.ni-unit-hal .ni-hero::before, html.sgp-html body.sgp-unit-on.ni-unit-hal .ni-hero::after { content: none !important; }
    html.sgp-html body.sgp-unit-on.ni-unit-hal .ni-hero h1 { font-size: 23px !important; line-height: 1.25 !important; letter-spacing: -.3px; margin: 6px 0 10px !important; }
    html.sgp-html body.sgp-unit-on.ni-unit-hal .ni-u-adik { display: none; }   /* senarai yang sama kini di kiri */
    html.sgp-html body.sgp-unit-on .sgp-unit-alat { display: flex; align-items: center; gap: 10px; position: sticky; top: var(--kepala-h, var(--sgp-kepala, 80px)); z-index: 5; margin: 0 0 8px; padding: 6px;
        border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
    .sgp-unit-alat b { flex: 1; min-width: 0; text-align: center; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sgp-unit-b { display: inline-flex; align-items: center; gap: 4px; max-width: 34%; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .sgp-unit-b span { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
    .sgp-unit-b:hover { border-color: var(--primary); color: var(--primary-text); }
    .sgp-unit-ss { background: #047857; border-color: #047857; color: #fff; }
    .sgp-unit-ss:hover { background: #065F46; color: #fff; }
    .sgp-unit-x { opacity: .55; font-weight: 600; }
    /* panel kanan "Kemajuan anda" (.kan mockup) */
    html.sgp-html body.sgp-a .sgp-bar-b { display: block; height: 9px; margin: 8px 14px 4px !important; border-radius: 5px; background: #E5E7EB; overflow: hidden; }
    html.sgp-html body.sgp-a .sgp-bar-b i { display: block; height: 100%; background: #059669; border-radius: 5px; }
    html.sgp-html body.sgp-a .sgp-kk-mini { margin: 0 14px !important; border-radius: 14px; padding: 12px; color: #fff; background: linear-gradient(135deg, #047857, #064E3B); font: 800 9.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .6px; display: flex; flex-direction: column; gap: 4px; }
    html.sgp-html body.sgp-a .sgp-kk-mini b { font-size: 15px; letter-spacing: 0; line-height: 1.3; }
    html.sgp-html body.sgp-a .sgp-kk-mini span { align-self: flex-start; background: rgba(255,255,255,.2); border-radius: 99px; padding: 1px 8px; font-size: 11px; }
    html.sgp-html body.sgp-a a.sgp-sp { text-decoration: none; margin: 1px 8px !important; }
    html.sgp-html body.sgp-a a.sgp-sp:hover { background: var(--bg, #F0FDF4); }
    html.sgp-html body.sgp-a .sgp-ik-g { width: 34px; height: 34px; border-radius: 22%; flex: none; }
    html.sgp-html[data-theme="dark"] body.sgp-a .sgp-bar-b { background: #374151; }
}

/* =====================================================================================================================================
   72.29 MOCKUP 100% (4 Nov 2026 malam, pemilik: "kena buat sepenuhnya halaman mengikuti mockup 100%. Jangan hilangkan fungsi.")
   M1 — BINGKAI PORTAL GURU di laptop = _rujukan/mockup-native-app/perisian.html?jenis=guru (.bt 40px, .bm, .relb 76px, .kan 260px, .st 26px).
   Fungsi kekal: kumpulan PdPC/Taksir/Istimewa = menu terbang (isi sama seperti helaian telefon); Int & Pel dalam Taksir; Kedai & Ejen AI
   dalam menu Akaun (seperti telefon); bar Istimewa MASUK bar tajuk (keputusan pemilik).
   ===================================================================================================================================== */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) #eguru-app { --topbar-h: 40px !important; --sgp-st: 26px; --sgp-pb: 260px; }
    /* bar Istimewa: baris berasingan disorok sejak lukisan pertama — pautan dipindah ke bar tajuk (sg_perisian.js istBarTajuk) */
    html:not(.sgp-mati) #eguru-app > #sg-ist-app { display: none !important; }
    /* ---------- .bt bar tajuk 40px ---------- */
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar { height: 40px !important; min-height: 40px !important; padding: 0 8px 0 12px !important; gap: 10px !important;
        background: linear-gradient(135deg, #047857, #064E3B) !important; box-shadow: none !important; -webkit-user-select: none; user-select: none; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-left { gap: 10px !important; flex: none; min-width: 0; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-logo { width: 22px !important; height: 22px !important; border-radius: 24% !important;
        background: linear-gradient(135deg, color-mix(in srgb, #059669 55%, #fff) -40%, #059669 45%, color-mix(in srgb, #059669 65%, #000) 120%) !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-logo svg { width: 13px !important; height: 13px !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-left > div:not(.topbar-logo) { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1 !important; }
    html:not(.sgp-mati) body #eguru-app#eguru-app > .topbar .topbar-sub { font-size: 12px !important; opacity: .7 !important; font-weight: 500 !important; line-height: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sgp-cari { flex: 0 1 430px; height: 28px; margin: 0 6px; padding: 0 10px; gap: 8px; border: 0; border-radius: 8px;
        background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); font: 500 12.5px/1 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sgp-cari svg { width: 15px; height: 15px; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sgp-cari kbd { font-size: 11px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.15); }
    /* pautan Istimewa dalam bar tajuk (satu baris; yang tidak muat = "Lagi") */
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist { display: flex !important; align-items: center; flex: 1 1 0; min-width: 0; height: 28px; margin: 0 !important; padding: 0 4px !important;
        gap: 0 6px; overflow: hidden; background: none !important; border: 0 !important; font: 600 11.5px/1 Inter, system-ui, sans-serif !important; white-space: nowrap; position: relative; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist a { color: rgba(255,255,255,.84) !important; text-decoration: none; padding: 5px 2px; border-radius: 6px; font: inherit !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist a:hover { color: #fff !important; text-decoration: underline; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist i { font-style: normal; color: rgba(255,255,255,.35) !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist a.sg-ist-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px !important; border-radius: 99px;
        background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist a.sg-ist-btn:hover { background: rgba(255,255,255,.22) !important; text-decoration: none; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist a.sg-ist-btn svg { width: 12px; height: 12px; fill: currentColor; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist > a.sg-ist-btn[href="/"] { display: none; }   /* Utama = rel kiri */
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist .sg-ist-kanan { display: inline-flex; gap: 6px; margin-left: 6px; padding-left: 0; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist .sgp-ist-sorok { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist .sgp-ist-lagi { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 8px; border: 0; border-radius: 99px;
        background: rgba(255,255,255,.12); color: #fff; font: inherit; cursor: pointer; }
    html.sgp-html body #eguru-app#eguru-app > .topbar > .sg-ist .sgp-ist-lagi[hidden] { display: none; }
    /* kanan: suis Guru|Pentadbiran (pil gelap) · Murid Anda · loceng · kebolehcapaian · avatar — susunan mockup */
    html.sgp-html body #eguru-app#eguru-app > .topbar .topbar-right { gap: 2px !important; flex: none; }
    html.sgp-html body #eguru-app#eguru-app > .topbar #topbar-user { gap: 2px !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar .hdr-sw { order: 1; display: flex; padding: 3px !important; margin-right: 6px; border-radius: 99px !important; background: rgba(0,0,0,.25) !important; border: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar .hdr-sw button { min-height: 0 !important; height: auto !important; padding: 4px 10px !important; border-radius: 99px !important; font: 700 12px/1.2 Inter, system-ui, sans-serif !important;
        background: none !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar .hdr-sw button.on { background: #fff !important; color: #047857 !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar :is(#hdr-murid, #topbar-a11y, .sgp-ikbt) { position: relative; width: 32px !important; height: 32px !important; min-width: 32px; padding: 0 !important; margin: 0 !important;
        display: grid !important; place-items: center; border: 0 !important; border-radius: 9px !important; background: none !important; color: #fff !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar :is(#hdr-murid, #topbar-a11y, .sgp-ikbt):hover { background: rgba(255,255,255,.15) !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar :is(#hdr-murid, #topbar-a11y, .sgp-ikbt) svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar #hdr-murid { order: 2; }
    html.sgp-html body #eguru-app#eguru-app > .topbar :is(.sgp-ikbt, .sgp-av)[hidden] { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar #hdr-murid > span { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app > .topbar #topbar-a11y .sg-notif-lencana { display: none !important; }   /* kiraan = loceng */
    html.sgp-html body #eguru-app#eguru-app > .topbar .sgp-ikbt i { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #EF4444; color: #fff;
        font: 800 9.5px/15px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }
    html.sgp-html body #eguru-app#eguru-app > .topbar .sgp-ikbt i[hidden] { display: none; }
    html.sgp-html body #eguru-app#eguru-app > .topbar .sgp-av { width: 28px; height: 28px; margin: 0 4px 0 6px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; cursor: pointer;
        background: #047857; color: #fff; font: 800 11px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
    html.sgp-html body #eguru-app#eguru-app > .topbar .sgp-av:hover { box-shadow: 0 0 0 2px #fff; }
    /* ---------- .bm bar menu ---------- */
    html.sgp-html #eguru-app.sgp .sgp-menu { font-size: 13.5px; }
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-mb { height: auto; padding: 5px 10px; }
    /* ---------- .st bar status 26px ---------- */
    html.sgp-html #eguru-app.sgp .sgp-st { height: 26px; gap: 16px; }
    /* ---------- kandungan: latar mockup ---------- */
    html.sgp-html body #eguru-app#eguru-app.sgp > .main-content { background: #F0FDF4 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme > .main-content { background: var(--bg) !important; }
    /* ---------- panel kanan .kan 260px ---------- */
    html.sgp-html :is(#eguru-app, .sgp-m, .sgp-a) .sgp-bantu { background: #FFFDF7; }
    html.sgp-html #eguru-app.dark-theme .sgp-bantu { background: var(--card-bg); }
    /* halaman awam & Portal Murid gelap: panel kanan (Panduan / butiran / Arena) ikut kad tema — dahulu kekal #FFFDF7 (teks cerah tidak terbaca) */
    html.sgp-html[data-theme="dark"] :is(#sgp-x, .sgp-m, .sgp-a) .sgp-bantu { background: var(--card, #1E293B); }
    @media (prefers-color-scheme: dark) { html.sgp-html:not([data-theme="light"]) :is(#sgp-x, .sgp-m, .sgp-a) .sgp-bantu { background: var(--card, #1E293B); } }
    html.sgp-html[data-theme="dark"] :is(#sgp-x, .sgp-m, .sgp-a) :is(.sgp-b-btn.garis, .sgp-bp-k svg, .sgp-selamat a, .sgp-cip-s) { color: #6EE7B7; fill: #6EE7B7; border-color: #14532D; }
    @media (prefers-color-scheme: dark) { html.sgp-html:not([data-theme="light"]) :is(#sgp-x, .sgp-m, .sgp-a) :is(.sgp-b-btn.garis, .sgp-bp-k svg, .sgp-selamat a, .sgp-cip-s) { color: #6EE7B7; fill: #6EE7B7; border-color: #14532D; } }
}
/* ---------- .relb REL KIRI 76px (mockup): Utama · PdPC · Taksir · Istimewa · Akaun ……… Bantuan ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) { --sidebar-w: 76px !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav,
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav:hover,
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav:focus-within { width: 76px !important; min-width: 76px !important; padding: 8px 0 !important; gap: 2px !important; height: 100% !important; max-height: 100% !important; align-self: stretch !important; min-height: 0 !important; box-sizing: border-box !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; overflow: visible !important;
        background: #fff !important; border-right: 1px solid #E5E7EB !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav::before { display: none !important; }   /* label MENU */
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#navgrp-intpel, .nav-extra, .ejen-ctl, .nav-pisah, .nav-item[data-grp], .nav-grp-isi) { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav) {
        position: relative !important; inset: auto !important; flex: none !important; width: 66px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
        margin: 0 !important; padding: 7px 2px 6px !important; border: 0 !important; border-radius: 12px !important; background: none !important; box-shadow: none !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important;
        font: 600 10.5px/1.1 Inter, system-ui, sans-serif !important; color: #4B5563 !important; text-align: center !important; cursor: pointer; opacity: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #nav-home { order: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #navgrp-pdpc { order: 2 !important; --c: #0F766E; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #navgrp-pbd { order: 3 !important; --c: #7C3AED; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #navgrp-istimewa { order: 4 !important; --c: #B45309; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #nav-profile { order: 5 !important; --c: #374151; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.sgp-rel-bantu, #sgp-x) { order: 99 !important; margin-top: auto !important; --c: #7C3AED; position: sticky !important; bottom: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav):hover { background: #F3F4F6 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav) :is(.nav-label, span) {
        display: block !important; max-width: 66px; margin: 0 !important; opacity: 1 !important; font: inherit !important; color: inherit !important; white-space: nowrap !important; overflow: visible !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #nav-profile) .nav-icon-wrap { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav) svg {
        display: block !important; box-sizing: border-box !important; width: 36px !important; height: 28px !important; padding: 4px 8px !important; margin: 0 !important; border-radius: 9px !important;
        fill: var(--c) !important; color: var(--c) !important; background: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .sgp-rel-bantu .sgp-rb-ik { display: block; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa) :is(svg.nav-grp-chev, .chev, i) { display: none !important; }
    /* Utama = bulatan hijau 34px */
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #nav-home svg { width: 34px !important; height: 34px !important; padding: 8px !important; border-radius: 50% !important;
        background: linear-gradient(135deg, #059669, #047857) !important; fill: #fff !important; color: #fff !important; }
    /* aktif */
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .sgp-on { color: #047857 !important; font-weight: 800 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .sgp-on:not(#nav-home) svg { background: rgba(5,150,105,.12) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > #nav-home.sgp-on svg { box-shadow: 0 0 0 3px #A7F3D0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav)::before { content: none !important; display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .sgp-on::before { content: '' !important; display: block !important; position: absolute; left: -5px; top: 10px; bottom: 10px; width: 4px;
        border-radius: 0 4px 4px 0; background: #059669 !important; transform: none !important; opacity: 1 !important; }
    /* tip hover: tajuk + penerangan */
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > [data-sgp-t]:hover::after { content: attr(data-sgp-t) "\A" attr(data-sgp-desk) !important; white-space: pre; display: block !important;
        position: absolute; left: 74px; top: 50%; transform: translateY(-50%); z-index: 90; padding: 7px 11px; border-radius: 8px; background: #1F2937; color: #fff;
        font: 600 12px/1.45 Inter, system-ui, sans-serif; text-align: left; box-shadow: 0 6px 18px rgba(0,0,0,.2); pointer-events: none; opacity: 1 !important; width: auto !important; height: auto !important; }
    html.sgp-html.sgp-terbang-buka body #eguru-app#eguru-app.sgp .bottom-nav > [data-sgp-t]:hover::after { display: none !important; }
    /* gelap */
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav { background: var(--card-bg) !important; border-right-color: var(--border) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .sgp-rel-bantu, .pm-nav) { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav > .sgp-on { color: #6EE7B7 !important; }
}
/* menu terbang kumpulan (PdPC / Taksir / Istimewa) — kandungan sama seperti helaian kumpulan telefon; dropdown "Lagi" pautan Istimewa */
.sgp-terbang, .sgp-ist-dd { position: fixed; z-index: 1000500; min-width: 240px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 5px; background: #fff; color: #1F2937;
    border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.16); font: 500 13.5px/1.3 Inter, system-ui, sans-serif; }
.sgp-terbang h5 { margin: 6px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: #6B7280; text-transform: uppercase; }
.sgp-terbang :is(button, a), .sgp-ist-dd a { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 7px 10px; border: 0; border-radius: 7px; background: none; color: inherit;
    font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sgp-terbang :is(button, a):hover, .sgp-terbang :is(button, a):focus-visible, .sgp-ist-dd a:hover { background: #ECFDF5; color: #065F46; outline: 0; }
.sgp-terbang :is(button, a).on { background: #ECFDF5; color: #047857; font-weight: 700; }
.sgp-terbang svg { width: 16px; height: 16px; flex: none; fill: #047857; }
html.sgp-gelap .sgp-terbang, html.sgp-gelap .sgp-ist-dd { background: #16231D; color: #E8F1EC; border-color: #2C3D35; }
html.sgp-gelap .sgp-terbang :is(button, a):hover, html.sgp-gelap .sgp-ist-dd a:hover { background: #0F1A15; color: #6EE7B7; }

/* ---------- M2 (72.29): UTAMA Portal Guru = mockup — kepala-k · .lsn amber · .grid-k 1.5fr/1fr (Jadual senarai hari | Hari ini + Tools saya) ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp #view-home { padding: 18px 22px 24px !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #home-user-card, html.sgp-html body #eguru-app#eguru-app.sgp #home-user-card .home-combo { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; overflow: visible !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "greet greet" "langkah langkah" "jw kanan";
        gap: 14px !important; padding: 0 !important; margin: 0 0 14px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: #1F2937 !important; min-height: 0 !important; overflow: visible !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama::before, html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama::after { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > :is(.pdpr-notis, .hero-badge, .combo-actions) { display: none !important; }
    /* kepala-k */
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .combo-greet { grid-area: greet; display: flex !important; align-items: flex-end !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-greet > div { flex: 1; min-width: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .sgp-laluan { font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-greet { flex-wrap: wrap; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-greet > .sgp-laluan { flex: 0 0 100%; margin-bottom: -10px; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-title { margin: 2px 0 0 !important; font: 800 23px/1.25 Inter, system-ui, sans-serif !important; letter-spacing: -.3px; color: #1F2937 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-date { margin: 3px 0 0 !important; font: 400 13.5px/1.4 Inter, system-ui, sans-serif !important; color: #4B5563 !important; opacity: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .combo-date svg { fill: #4B5563 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama .today-week { flex: none; padding: 9px 14px !important; border: 0 !important; border-radius: 10px !important; font: 700 13.5px/1 Inter, system-ui, sans-serif !important;
        background: linear-gradient(90deg, #F59E0B, #D97706) !important; color: #1F2937 !important; box-shadow: none !important; }
    /* .lsn Langkah seterusnya (amber) */
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > #home-langkah-slot { grid-area: langkah; margin: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah { position: relative; display: flex !important; align-items: center !important; gap: 16px !important; margin: 0 !important; padding: 14px 16px !important;
        background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important; border: 1.5px solid #FCD34D !important; border-left: 6px solid #F59E0B !important; border-radius: 16px !important; box-shadow: none !important; color: #78350F !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah::before { content: ''; flex: none; width: 48px; height: 48px; border-radius: 14px; background: #F59E0B
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center / 26px no-repeat; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah.home-langkah-kehadiran::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-teks { flex: 1; min-width: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-kicker { display: block; font: 900 10.5px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 1.4px; text-transform: uppercase; color: #B45309 !important; opacity: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-tajuk { display: block; margin: 2px 0 !important; font: 800 18px/1.3 Inter, system-ui, sans-serif !important; color: #78350F !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-sub { display: block; font: 400 13.5px/1.45 Inter, system-ui, sans-serif !important; color: #92400E !important; opacity: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-btn { padding: 9px 14px !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(135deg, #059669, #047857) !important;
        color: #fff !important; font: 700 13.5px/1 Inter, system-ui, sans-serif !important; box-shadow: 0 3px 10px rgba(5,150,105,.3) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama #home-langkah .home-langkah-btn svg { fill: #fff !important; }
    /* kiri: Jadual = kad-k + jadual-l */
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw { grid-area: jw; align-self: start; min-width: 0; margin: 0 !important; padding: 14px !important; background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw .hw-sect { padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw .hw-head-row { margin: 0 0 10px !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw .hw-title { font: 700 14.5px/1.3 Inter, system-ui, sans-serif !important; color: #1F2937 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw .hw-bil { background: #ECFDF5 !important; color: #047857 !important; border-radius: 99px !important; padding: 2px 9px !important; font: 700 11.5px/1.4 Inter, system-ui, sans-serif !important; border: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama > .hero-jw .hw-urus-tog { border: 1.5px solid #A7F3D0 !important; color: #047857 !important; background: #fff !important; border-radius: 8px !important; padding: 5px 10px !important; font: 700 12.5px/1 Inter, system-ui, sans-serif !important; }
    /* 5 Nov (keputusan pemilik): grid ASAL Jadual Waktu Mingguan dipapar (nombor waktu + REHAT, seperti RPH) — senarai hari .sgp-jl tidak dibina lagi */
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-jl { display: grid; grid-template-columns: 96px minmax(0, 1fr); border: 1px solid #D1FAE5; border-radius: 12px; overflow: hidden; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-jh { display: flex; flex-direction: column; justify-content: center; padding: 10px; background: linear-gradient(180deg, #047857, #064E3B); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-jh.kini { background: linear-gradient(180deg, #F59E0B, #D97706); }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-jh b { font: 700 13.5px/1.3 Inter, system-ui, sans-serif; color: #fff; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-jh small { font: 500 11px/1.3 Inter, system-ui, sans-serif; color: #fff; opacity: .85; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-js { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 58px; padding: 8px; border-bottom: 1px solid #E5E7EB; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kos { color: #9CA3AF; font: 400 12.5px/1.4 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 260px; max-width: 100%; padding: 7px 10px; border: 0; border-left: 4px solid #0F766E; border-radius: 10px;
        background: #E6F4F1; text-align: left; cursor: pointer; font: inherit; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot:hover { filter: brightness(.97); }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot b { font: 700 13.5px/1.3 Inter, system-ui, sans-serif; color: #0F766E; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot small { font: 400 12px/1.35 Inter, system-ui, sans-serif; color: #4B5563; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot span { margin-top: 3px; padding: 1px 8px; border-radius: 99px; font: 800 11px/1.5 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot.amber span { background: #FEF3C7; color: #92400E; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot.kosong span { background: #F3F4F6; color: #4B5563; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot.hijau span { background: #D1FAE5; color: #065F46; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-slot.kini { box-shadow: 0 0 0 2px #F59E0B; }
    /* kanan: Hari ini + Tools saya */
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-utama-kanan { grid-area: kanan; display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: start; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kad { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 14px; color: #1F2937; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kk { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kk > b { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kk > b svg { width: 18px; height: 18px; fill: #047857; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-sela { flex: 1; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-lihat { border: 0; background: none; padding: 0; color: #047857; font: 700 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 4px; border: 0; border-top: 1px solid #E5E7EB; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br:first-of-type { border-top: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br:hover { background: #F7FEF9; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br > span:nth-child(2) { flex: 1; min-width: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br b { display: block; font: 700 13.5px/1.35 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br small { display: block; font: 400 12px/1.35 Inter, system-ui, sans-serif; color: #4B5563; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-br > svg { width: 18px; height: 18px; fill: #9CA3AF; flex: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kt { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-kt svg { width: 19px; height: 19px; fill: #fff; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-pil { font-style: normal; border-radius: 99px; padding: 2px 9px; font: 700 11.5px/1.4 Inter, system-ui, sans-serif; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-pil.amber { background: #FEF3C7; color: #92400E; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-dok-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-dok { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; cursor: pointer;
        font: 600 11px/1.2 Inter, system-ui, sans-serif; color: #1F2937; text-align: center; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-dok:hover { background: #ECFDF5; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-dok > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-tk { --h: #059669; width: 46px; height: 46px; border-radius: 24%; display: grid; place-items: center; color: #fff;
        background: linear-gradient(135deg, color-mix(in srgb, var(--h) 55%, #fff) -40%, var(--h) 45%, color-mix(in srgb, var(--h) 65%, #000) 120%); }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-tk svg { width: 26px; height: 26px; fill: #fff !important; color: #fff; }
    html.sgp-html body #eguru-app#eguru-app.sgp .sgp-tk svg * { fill: #fff !important; stroke: none; }
    /* di bawah grid: Mod Cuba & Jadual hari ini (fungsi kekal) */
    html.sgp-html body #eguru-app#eguru-app.sgp #home-user-card .combo-body { padding: 0 !important; margin-top: 14px !important; background: none !important; }
    /* gelap */
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .combo-hero.sgp-utama, html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .combo-hero.sgp-utama .combo-title { color: var(--text) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .combo-hero.sgp-utama > .hero-jw, html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-kad { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text); }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-js { border-color: var(--border); }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-slot { background: rgba(15,118,110,.18); }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-slot b { color: #5EEAD4; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme :is(.sgp-slot small, .sgp-br small, .combo-date) { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme :is(.sgp-br, .sgp-dok) { color: var(--text); }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-br:hover, html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme .sgp-dok:hover { background: rgba(255,255,255,.05); }
}
@media (min-width: 900px) and (orientation: landscape) and (max-width: 1279px) {
    html.sgp-html body #eguru-app#eguru-app.sgp .combo-hero.sgp-utama { grid-template-columns: minmax(0, 1fr); grid-template-areas: "greet" "langkah" "jw" "kanan"; }
}

/* ---------- M4 (72.29): GEDUNG AWAM = mockup (.bar-g cip + Susun/Tapis pil · .grid-p / .grid-iv kad · .detail-p / .iv-detail panel kanan) ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body.sgp-a main.kd-bekas { padding: 18px 22px 24px !important; }
    html.sgp-html body.sgp-a .sg-sisi::before { display: none !important; }   /* label MENU */
    /* bar-g: cip di kiri, Susun & Tapis pil di kanan; H1 kekal dalam DOM (SEO) tetapi tidak dipapar — tajuk dalam bar tajuk (mockup) */
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; flex-wrap: nowrap; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g > .sg-alat-kiri { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g > .kd-alat-kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    html.sgp-html body.sgp-a .sgp-cip-g { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
    html.sgp-html body.sgp-a .sgp-cip-g > :is(a, button) { display: inline-flex; align-items: center; border: 1px solid var(--border, #E5E7EB); background: var(--card, #fff); color: var(--text, #1F2937); border-radius: 99px;
        padding: 6px 14px; font: 700 13.5px/1.2 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
    html.sgp-html body.sgp-a .sgp-cip-g > :is(a, button):hover { border-color: #6EE7B7; }
    html.sgp-html body.sgp-a .sgp-cip-g > .on { background: #047857 !important; color: #fff !important; border-color: #047857 !important; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g .kd-susun-sel { display: inline-flex; align-items: center; gap: 0; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g .kd-susun-sel > span { display: none; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g .kd-susun-sel select { height: auto; padding: 5px 26px 5px 10px; border: 1.5px solid #A7F3D0; border-radius: 8px; background-color: var(--card, #fff); color: #047857; font: 700 12.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g :is(.sg-btn-tapis, .kd-btn-tapis-atas) { height: auto !important; padding: 5px 10px !important; border: 1.5px solid #A7F3D0 !important; border-radius: 8px !important; background: var(--card, #fff) !important;
        color: #047857 !important; font: 700 12.5px/1.3 Inter, system-ui, sans-serif !important; gap: 6px; box-shadow: none !important; }
    html.sgp-html body.sgp-a .kd-alat.sgp-bar-g :is(.sg-btn-tapis, .kd-btn-tapis-atas) svg { width: 16px; height: 16px; fill: currentColor; }
    /* KEDAI .grid-p / .pk */
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 12px !important; }
    html.sgp-html body.sgp-a :is(.kd-grid:not(#galeri-senarai)) > .kd-kad { border: 1.5px solid var(--border, #E5E7EB) !important; border-radius: 14px !important; box-shadow: none !important; overflow: hidden; background: var(--card, #fff); }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) > .kd-kad:hover { border-color: #6EE7B7 !important; transform: none !important; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) > .kd-kad.sgp-kad-pilih { border-color: #059669 !important; box-shadow: 0 0 0 3px #A7F3D0 !important; outline: 0 !important; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) .kd-kad-img img { aspect-ratio: 1; object-fit: cover; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) .kd-kad-isi { padding: 9px 10px 11px !important; gap: 2px !important; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) .kd-lencana { padding: 0 !important; background: none !important; border: 0 !important; color: #047857 !important; font: 800 11px/1.3 Inter, system-ui, sans-serif !important; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) .kd-kad-t { font: 700 13px/1.3 Inter, system-ui, sans-serif !important; -webkit-line-clamp: 2; }
    html.sgp-html body.sgp-a .kd-grid:not(#galeri-senarai) .kd-kad-h { font: 800 13px/1.3 Inter, system-ui, sans-serif !important; color: #047857 !important; margin-top: 2px; }
    /* INOVASI .grid-iv / .ivk (jubin ikon app) */
    html.sgp-html body.sgp-a #galeri-senarai.kd-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad { border: 1.5px solid var(--border, #E5E7EB) !important; border-radius: 16px !important; box-shadow: none !important; background: var(--card, #fff); overflow: hidden; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad:hover { border-color: #6EE7B7 !important; transform: none !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad.sgp-kad-pilih { border-color: #059669 !important; box-shadow: 0 0 0 3px #A7F3D0 !important; outline: 0 !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad > a { display: flex !important; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px !important; text-align: center; height: 100%; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad > a > :is(.kd-kad-img) { display: none !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad .sgp-ivk-ik { width: 84px; height: 84px; border-radius: 24%; box-shadow: 0 4px 12px rgba(0,0,0,.15); margin-bottom: 4px; object-fit: cover; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad .kd-kad-isi { display: contents !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad .kd-kad-isi > :not(.kd-kad-t) { display: none !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad .kd-kad-t { font: 700 13px/1.3 Inter, system-ui, sans-serif !important; color: var(--text, #1F2937); margin: 0 !important; }
    html.sgp-html body.sgp-a #galeri-senarai > .kd-kad .sgp-ivk-g { color: var(--text-muted, #4B5563); font: 400 11.5px/1.3 Inter, system-ui, sans-serif; }
    /* PANEL KANAN butiran (.detail-p / .iv-detail) */
    html.sgp-html body.sgp-a > .sgp-butir { background: var(--card, #fff); border-left: 1px solid var(--border, #E5E7EB); box-shadow: none !important; }
    html.sgp-html body.sgp-a > .sgp-butir .sgp-b-isi { padding: 0 0 14px !important; gap: 0 !important; display: block !important; }
    html.sgp-html body.sgp-a > .sgp-butir .sgp-b-isi > * { margin-left: 14px; margin-right: 14px; }
    html.sgp-html body.sgp-a .sgp-dp-img { display: block; width: calc(100% - 28px); margin: 14px 14px 6px !important; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--border, #E5E7EB); }
    html.sgp-html body.sgp-a .sgp-thumbs-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px !important; }
    html.sgp-html body.sgp-a .sgp-thumbs-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--border, #E5E7EB); cursor: pointer; }
    html.sgp-html body.sgp-a .sgp-thumbs-mini img.on { box-shadow: 0 0 0 2px #059669; }
    html.sgp-html body.sgp-a .sgp-cip-s { display: block; color: #047857; font: 800 11.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-bt-t { margin: 2px 14px 6px !important; font: 800 16px/1.3 Inter, system-ui, sans-serif !important; }
    html.sgp-html body.sgp-a .sgp-harga-k { display: inline-block; background: #ECFDF5; color: #047857; font: 900 22px/1.2 Inter, system-ui, sans-serif; border-radius: 10px; padding: 4px 12px; }
    html.sgp-html body.sgp-a .sgp-h4 { margin: 16px 14px 6px !important; font: 800 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: 1.2px; color: #6B7280; }
    html.sgp-html body.sgp-a .sgp-pil-k { display: flex; flex-wrap: wrap; gap: 6px; }
    html.sgp-html body.sgp-a .sgp-pil-k button { border: 1.5px solid var(--border, #E5E7EB); border-radius: 99px; padding: 5px 12px; background: var(--card, #fff); color: var(--text, #1F2937); font: 700 12.5px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
    html.sgp-html body.sgp-a .sgp-pil-k button.on { border-color: #059669; background: #ECFDF5; color: #047857; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-b-btn { display: flex; width: calc(100% - 28px); margin-top: 10px; }
    html.sgp-html body.sgp-a .sgp-selamat { margin-top: 10px !important; color: var(--text-muted, #4B5563); font: 400 12px/1.5 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .sgp-selamat svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -2px; margin-right: 4px; }
    html.sgp-html body.sgp-a .sgp-selamat a { color: #047857; font-weight: 700; }
    html.sgp-html body.sgp-a .sgp-ivd-k { display: flex; gap: 12px; align-items: center; margin: 0 !important; padding: 16px 14px 10px; }
    html.sgp-html body.sgp-a .sgp-ivd-k img { width: 72px; height: 72px; border-radius: 24%; box-shadow: 0 4px 12px rgba(0,0,0,.15); flex: none; }
    html.sgp-html body.sgp-a .sgp-ivd-k .sgp-bt-t { margin: 0 0 3px !important; }
    html.sgp-html body.sgp-a .sgp-ivd-k b { display: block; color: #047857; font: 700 12.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .sgp-ivd-k small { color: #6B7280; font: 400 12px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .sgp-ivd-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px !important; }
    html.sgp-html body.sgp-a .sgp-ivd-b .sgp-b-btn { width: auto; margin: 0; }
    html.sgp-html body.sgp-a .sgp-thumbs-iv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px !important; }
    html.sgp-html body.sgp-a .sgp-thumbs-iv img { width: 100%; aspect-ratio: 375 / 700; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--border, #E5E7EB); }
    html.sgp-html body.sgp-a .sgp-p-k { margin: 6px 14px !important; color: var(--text-muted, #4B5563); line-height: 1.5; font-size: 13.5px; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-bt-ino { margin-top: 6px !important; padding: 10px; border-radius: 14px; background: #F7FEF9; border: 1px solid #D1FAE5; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-bt-ino img { width: 52px; height: 52px; box-shadow: 0 0 0 3px #D1FAE5; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-bt-ino span { display: flex; gap: 4px; align-items: center; }
    html.sgp-html body.sgp-a .sgp-butir .sgp-bt-ino span svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
    html.sgp-html[data-theme="dark"] body.sgp-a .sgp-butir .sgp-bt-ino { background: rgba(5,150,105,.08); border-color: #14532D; }
    /* Games: panel kanan "Arena Agung · minggu ini" (mockup .kan + .sp + .no-k) */
    html.sgp-html body.sgp-a .sgp-bp-k { display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 14px 14px 6px; }
    html.sgp-html body.sgp-a .sgp-bp-k b { display: flex; align-items: center; gap: 7px; font: 800 14px/1.3 Inter, system-ui, sans-serif; color: var(--text, #1F2937); }
    html.sgp-html body.sgp-a .sgp-bp-k svg { width: 18px; height: 18px; fill: #047857; flex: none; }
    html.sgp-html body.sgp-a > .sgp-butir .sgp-b-isi > .sgp-sp { margin: 1px 8px !important; }
    html.sgp-html body.sgp-a .sgp-sp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text, #1F2937); }
    html.sgp-html body.sgp-a .sgp-sp.on { background: rgba(5,150,105,.1); box-shadow: inset 3px 0 0 #059669; }
    html.sgp-html body.sgp-a .sgp-sp > span:not(.sgp-no-k) { flex: 1; min-width: 0; }
    html.sgp-html body.sgp-a .sgp-sp b { display: block; font: 700 13px/1.35 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgp-html body.sgp-a .sgp-sp small { display: block; color: var(--text-muted, #6B7280); font: 400 11.5px/1.35 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-a .sgp-no-k { width: 30px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 11px/1 Inter, system-ui, sans-serif; background: #E5E7EB; color: #4B5563; flex: none; }
    html.sgp-html body.sgp-a .sgp-no-k.sgp-ik { background: #ECFDF5; }
    html.sgp-html body.sgp-a .sgp-no-k.sgp-ik svg { width: 16px; height: 16px; fill: #047857; }
    html.sgp-html body.sgp-a .sgp-kecil { font-size: 12px !important; }
    html.sgp-html[data-theme="dark"] body.sgp-a .sgp-no-k { background: #374151; color: #E5E7EB; }
    html.sgp-html[data-theme="dark"] body.sgp-a .sgp-no-k.sgp-ik, html.sgp-html[data-theme="dark"] body.sgp-a .sgp-sp.on { background: rgba(5,150,105,.16); }
}
/* ---------- M4 (72.29): PORTAL GURU › TOOLS = mockup ?jenis=tools — kepala-k, Sambung kerja (.teruskan), Hab app (.grid-folder-k), Pakej (.koleksi-g).
   Tab kekal (gaya cip); banner/rak popular/jubin kategori digantikan oleh susun atur mockup; lipatan "Semua tools ikut kategori" kekal di bawah. ---------- */
#sgp-tools-k, #sgp-tools-utk { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-hab > .section-header { display: none !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-k { display: block; margin: 0 0 12px; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-k .sgp-laluan { font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-k .sgp-laluan span { margin: 0 4px; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-k h1 { margin: 2px 0 0; font: 800 23px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.3px; color: var(--text, #1F2937); }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-k p { margin: 3px 0 0; color: #4B5563; font-size: 13.5px; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-tabs { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; margin: 0 0 12px !important; box-shadow: none !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-tabs .ak-tab { flex: none !important; min-height: 30px !important; padding: 5px 13px !important; border: 1px solid var(--border, #E5E7EB) !important; border-radius: 99px !important;
        background: var(--card-bg, #fff) !important; font-size: 12.5px !important; font-weight: 700 !important; color: #4B5563 !important; box-shadow: none !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-tabs .ak-tab.active { background: #064E3B !important; border-color: #064E3B !important; color: #fff !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-tabs .ak-tab svg { width: 15px !important; height: 15px !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m .tools-cari { max-width: 520px; min-height: 36px !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #tools-gedung > :not(#sgp-tools-utk) { display: none !important; }
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #tools-baru { display: none !important; }   /* = Sambung kerja (sejarah sama) */
    html.sgp-html #eguru-app.sgp #view-tools.sgp-tools-m #sgp-tools-utk { display: block; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-terus { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 8px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--card-bg, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: var(--text, #1F2937); min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr:hover, html.sgp-html #eguru-app.sgp #view-tools .sgp-fold:hover, html.sgp-html #eguru-app.sgp #view-tools .sgp-kol-k:hover { border-color: #A7F3D0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr .tools-kad-ikon { width: 54px !important; height: 54px !important; flex: 0 0 54px; display: grid; place-items: center; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr > span:not(.tools-kad-ikon) { flex: 1; min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tr small { display: block; color: #4B5563; font-size: 12px; }
    html.sgp-html #eguru-app.sgp #view-tools :is(.sgp-tr, .sgp-kol-k) > svg { width: 20px; height: 20px; fill: #047857; flex: none; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tj { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tj h3 { margin: 0; font: 800 17px/1.3 Inter, system-ui, sans-serif; color: var(--text, #1F2937); }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-tj .sgp-lihat { border: 0; background: none; color: #047857; font: 700 13px/1.3 Inter, system-ui, sans-serif; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-folder-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fold { display: flex; flex-direction: column; gap: 3px; padding: 12px; background: var(--card-bg, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 16px; color: var(--text, #1F2937) !important; text-decoration: none !important; min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fold b { font-size: 13.5px; line-height: 1.3; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fold small { color: #6B7280; font-size: 12px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fk { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 70px; height: 70px; padding: 6px; border-radius: 18px; background: #F3F4F6; margin-bottom: 6px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fk > span { display: block; min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-fk .tools-kad-ikon { width: 100% !important; height: 100% !important; display: grid; place-items: center; border-radius: 26% !important; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kol-k { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card-bg, #fff); border: 1px solid var(--border, #E5E7EB); border-radius: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--text, #1F2937); min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kol-k > span:nth-child(2) { flex: 1; min-width: 0; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kol-k b { display: block; font-size: 14px; line-height: 1.3; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kol-k small { display: block; color: #4B5563; font-size: 12px; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kt { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: none; }
    html.sgp-html #eguru-app.sgp #view-tools .sgp-kt svg { width: 28px; height: 28px; fill: #fff; }
    html.sgp-html #eguru-app.sgp #view-tools :is(.sgp-tr, .sgp-fold, .sgp-kol-k, .sgp-lihat):focus-visible { outline: 3px solid #059669; outline-offset: 2px; }
    html.sgp-html #eguru-app.sgp.dark-theme #view-tools :is(.sgp-tr small, .sgp-kol-k small, .sgp-fold small, #sgp-tools-k p, #sgp-tools-k .sgp-laluan) { color: #9CA3AF; }
    html.sgp-html #eguru-app.sgp.dark-theme #view-tools .sgp-fk { background: rgba(255,255,255,.06); }
    html.sgp-html #eguru-app.sgp.dark-theme #view-tools :is(.sgp-lihat, .sgp-tr > svg, .sgp-kol-k > svg) { color: #6EE7B7; fill: #6EE7B7; }
    html.sgp-html #eguru-app.sgp.dark-theme #view-tools.sgp-tools-m .tools-tabs .ak-tab:not(.active) { color: #D1D5DB !important; }
    @media (max-width: 1279px) { html.sgp-html #eguru-app.sgp #view-tools .sgp-kol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* ---------- M5 (72.29): PORTAL PENTADBIRAN = mockup ?jenis=ptd — bar tajuk 40px (Istimewa dalam bar, suis gelap, ikon Murid Anda · loceng · a11y · avatar)
   & rel .relb 76px (ikon berwarna 36x28, label 10.5px, Utama bulat hijau, penanda aktif 4px, Bantuan di bawah). Fungsi sidebar (bidang/jawatan, kumpulan Lain-lain,
   Ejen AI, Kedai) KEKAL — hanya rupa. ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html:not(.sgp-mati) #ptd-portal > #sg-ist-ptd { display: none !important; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr { height: 40px !important; min-height: 40px !important; padding: 0 8px 0 12px !important; gap: 10px !important;
        background: linear-gradient(135deg, #047857, #064E3B) !important; box-shadow: none !important; -webkit-user-select: none; user-select: none; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .topbar-left { gap: 10px !important; flex: none !important; min-width: 0; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .topbar-logo { width: 22px !important; height: 22px !important; border-radius: 24% !important;
        background: linear-gradient(135deg, color-mix(in srgb, #059669 55%, #fff) -40%, #059669 45%, color-mix(in srgb, #059669 65%, #000) 120%) !important; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .topbar-logo svg { width: 13px !important; height: 13px !important; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .ptd-tt { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .topbar-title { font-size: 13.5px !important; font-weight: 700 !important; line-height: 1 !important; }
    html:not(.sgp-mati) body #ptd-portal#ptd-portal .ptd-hdr .topbar-sub { font-size: 12px !important; opacity: .7 !important; font-weight: 500 !important; line-height: 1 !important; max-width: 220px; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sgp-cari { flex: 0 1 430px; height: 28px; margin: 0 6px; padding: 0 10px; gap: 8px; border: 0; border-radius: 8px;
        background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); font: 500 12.5px/1 Inter, system-ui, sans-serif; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist { display: flex !important; align-items: center; flex: 1 1 0; min-width: 0; height: 28px; margin: 0 !important; padding: 0 4px !important;
        gap: 0 6px; overflow: hidden; background: none !important; border: 0 !important; font: 600 11.5px/1 Inter, system-ui, sans-serif !important; white-space: nowrap; position: relative; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist a { color: rgba(255,255,255,.84) !important; text-decoration: none; padding: 5px 2px; border-radius: 6px; font: inherit !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist a:hover { color: #fff !important; text-decoration: underline; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist i { font-style: normal; color: rgba(255,255,255,.35) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist a.sg-ist-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px !important; border-radius: 99px;
        background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #fff !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist > a.sg-ist-btn[href="/"] { display: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist .sg-ist-kanan { display: inline-flex; gap: 6px; margin-left: 6px; padding-left: 0; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist .sgp-ist-sorok { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist .sgp-ist-lagi { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 0; border-radius: 99px;
        background: rgba(255,255,255,.12); color: #fff; font: inherit; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr > .sg-ist .sgp-ist-lagi[hidden] { display: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .topbar-right { gap: 2px !important; flex: none; display: flex; align-items: center; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .ptd-kanan { display: contents !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .hdr-sw { order: 1; display: flex; padding: 3px !important; margin-right: 6px; border-radius: 99px !important; background: rgba(0,0,0,.25) !important; border: 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .hdr-sw button { min-height: 0 !important; height: auto !important; padding: 4px 10px !important; border-radius: 99px !important; font: 700 12px/1.2 Inter, system-ui, sans-serif !important;
        background: none !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .hdr-sw button.on { background: #fff !important; color: #047857 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr :is(.hdr-murid, #ptd-a11y, .sgp-ikbt) { position: relative; width: 32px !important; height: 32px !important; min-width: 32px; padding: 0 !important; margin: 0 !important;
        display: grid !important; place-items: center; border: 0 !important; border-radius: 9px !important; background: none !important; color: #fff !important; box-shadow: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr :is(.hdr-murid, #ptd-a11y, .sgp-ikbt):hover { background: rgba(255,255,255,.15) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr :is(.hdr-murid, #ptd-a11y, .sgp-ikbt) svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .hdr-murid { order: 2; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .hdr-murid > span { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .sgp-ikbt { order: 3; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr #ptd-a11y { order: 4; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .sgp-av { order: 5; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr :is(.sgp-ikbt, .sgp-av)[hidden] { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .sgp-ikbt i { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #EF4444; color: #fff;
        font: 800 9.5px/15px Inter, system-ui, sans-serif; font-style: normal; text-align: center; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .sgp-ikbt i[hidden] { display: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-hdr .sgp-av { width: 28px; height: 28px; margin: 0 4px 0 6px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; cursor: pointer;
        background: #047857; color: #fff; font: 800 11px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
    /* ---------- rel 76px (sg_ui2.css: rel kembang 236px semasa hover + pil Utama + bar warna — dimatikan; mockup = tip) ---------- */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4), html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4):is(:hover, :focus-within) { width: 76px !important; min-width: 76px !important; margin-right: 0 !important; padding: 8px 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important;
        background: var(--card-bg, #fff) !important; border-right: 1px solid var(--border, #E5E7EB) !important; box-shadow: none !important; overflow: visible !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4)::before { content: none !important; display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen, .sgp-rel-bantu) { position: relative !important; inset: auto !important; flex: none !important; width: 66px !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 7px 2px 6px !important;
        display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 3px !important; border: 0 !important; border-radius: 12px !important;
        background: none !important; background-image: none !important; box-shadow: none !important; font: 600 10.5px/1.1 Inter, system-ui, sans-serif !important; color: var(--text-muted, #4B5563) !important; text-align: center !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen, .sgp-rel-bantu):hover { background: #F3F4F6 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen)::after, html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen):not(.on)::before { content: none !important; display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen) svg:not(.ptd-chev), html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .sgp-rel-bantu .sgp-rb-ik svg {
        box-sizing: border-box !important; width: 36px !important; height: 28px !important; padding: 4px 8px !important; border-radius: 9px !important; fill: var(--c, #047857) !important; color: var(--c, #047857) !important; background: none !important; flex: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-grp) svg.ptd-chev, html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-ejen > i { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp, .ptd-ejen, .ptd-kedai) > span, html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-gl { display: block !important; max-width: 66px !important; overflow: hidden; white-space: normal !important; font: inherit !important; color: inherit !important; opacity: 1 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-gl .ptd-pjg { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-gl .ptd-pdk { display: inline !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-it.ptd-utama svg { width: 34px !important; height: 34px !important; padding: 8px !important; border-radius: 50% !important; background: linear-gradient(135deg, #059669, #047857) !important; fill: #fff !important; color: #fff !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp).on { color: #047857 !important; font-weight: 800 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp).on:not(.ptd-utama) svg { background: rgba(5,150,105,.12) !important; fill: var(--c, #047857) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-it.ptd-utama.on svg { box-shadow: 0 0 0 3px #A7F3D0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it, .ptd-grp).on::before { content: '' !important; display: block !important; position: absolute !important; left: -5px !important; top: 10px !important; bottom: 10px !important; width: 4px !important; height: auto !important;
        border-radius: 0 4px 4px 0 !important; background: #059669 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-pisah { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-grp-isi { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-it.ptd-it-sub { display: none !important; }   /* Data Induk: Takwim, Murid & kelas, Guru & JK, Kemudahan, Pelan & KPI = menu terbang (indukSub) */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4):has(.ptd-it-sub.on) .ptd-it[data-h="induk"] { color: #047857 !important; font-weight: 800 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4):has(.ptd-it-sub.on) .ptd-it[data-h="induk"] svg { background: rgba(5,150,105,.12) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4):has(.ptd-it-sub.on) .ptd-it[data-h="induk"]::before { content: '' !important; display: block !important; position: absolute !important; left: -5px !important; top: 10px !important; bottom: 10px !important; width: 4px !important; height: auto !important; border-radius: 0 4px 4px 0 !important; background: #059669 !important; }   /* isi kumpulan = menu terbang (terbangPtd) */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-ejen { --c: #7C3AED; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .sgp-rel-bantu { margin-top: auto !important; --c: #7C3AED; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+2 of .ptd-atas) { --c: #0F766E; } html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+3 of .ptd-atas) { --c: #7C3AED; } html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+4 of .ptd-atas) { --c: #B45309; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+5 of .ptd-atas) { --c: #EA580C; } html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+6 of .ptd-atas) { --c: #0E7490; } html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) > :nth-child(7n+7 of .ptd-atas) { --c: #4D7C0F; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-grp { --c: #6B7280; }
    html.sgp-html[data-theme="dark"] body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4), html.sgp-html body #ptd-portal#ptd-portal.dark-theme .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) { background: var(--card-bg, #1E293B) !important; }
}
/* 72.29 (5 Nov, CLS 0.41 -> ~0): Utama Portal Guru disusun semula (mockup M2) oleh lib/sg_perisian.js yang dimuat selepas skrip teras — kad hero
   disorok (visibility) sehingga .sgp-utama dipasang supaya guru tidak melihat kandungan melompat. Jaminan: dipapar sendiri selepas 3.5 s. */
@keyframes sgpTunjuk { to { visibility: visible; } }
@media (min-width: 1280px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-awal:not(.sgp-mati) #eguru-app #view-home.active:has(.combo-hero:not(.sgp-utama)) { visibility: hidden; animation: sgpTunjuk 0s 3.5s forwards; }
}
/* 5 Nov (aduan pemilik: rel Murid Anda rosak — label MURID, bar warna, Bantuan menindih Akaun) = mockup ?jenis=muridanda: rel 5 item Portal Guru;
   bahagian Murid Anda = baris tab .tabdok.kecil di atas kandungan (lib/sg_perisian.js tabMurid). */
#sgp-pm-tab { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif #sgp-pm-tab:not([hidden]) { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin: 0 0 10px; padding: 0; border-bottom: 2px solid #D1FAE5; overflow-x: auto; scrollbar-width: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif #sgp-pm-tab button { flex: none; height: 32px; padding: 0 14px; margin: 0; border: 0; border-radius: 8px 8px 0 0; background: transparent; color: #4B5563; font: 600 12.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif #sgp-pm-tab button:hover { background: rgba(255,255,255,.6); color: #064E3B; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif #sgp-pm-tab button.on { background: #fff; color: #064E3B; box-shadow: 0 -2px 0 #059669 inset; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif #sgp-pm-tab button:focus-visible { outline: 3px solid #059669; outline-offset: -3px; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif.dark-theme #sgp-pm-tab { border-bottom-color: #14532D; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif.dark-theme #sgp-pm-tab button { color: #D1D5DB; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif.dark-theme #sgp-pm-tab button.on { background: var(--card-bg); color: #6EE7B7; }
}
/* 5 Nov (pemilik: "Mana sidebar menu untuk murid anda") — menu Murid Anda KEKAL dalam rel, gaya item rel (ikon 36x28 berwarna, label 10.5px, penanda aktif);
   rel boleh ditatal bila item banyak, Bantuan melekat di bawah DENGAN latar (tiada tindih Akaun). Tajuk MURID = kapsyen kecil. */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif:not(.sisi-buka) .bottom-nav { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif:not(.sisi-buka) .bottom-nav::-webkit-scrollbar { display: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav-tajuk, .pm-nav) { order: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.pm-aktif) .bottom-nav > :is(.pm-nav, .pm-nav-tajuk, #sgp-x) { display: none !important; }   /* 5 Nov (pemilik): item Murid Anda HANYA dalam mod Murid Anda — setiap halaman ada menunya sendiri */
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .pm-nav-tajuk { display: block !important; width: 66px !important; margin: 6px 0 0 !important; padding: 4px 0 2px !important; border: 0 !important; border-top: 1px solid #E5E7EB !important;
        background: none !important; box-shadow: none !important; font: 800 9px/1.2 Inter, system-ui, sans-serif !important; letter-spacing: .8px; text-transform: uppercase; color: #6B7280 !important; text-align: center !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x) { --c: #0F766E; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+1) { --c: #047857; } html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+2) { --c: #7C3AED; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+3) { --c: #EA580C; } html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+4) { --c: #B45309; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+5) { --c: #BE185D; } html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+6) { --c: #0E7490; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x):nth-child(7n+7) { --c: #4D7C0F; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x) .nav-icon-wrap { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x) .nav-label > :not(:last-child), html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > .pm-nav-tajuk > :not(:last-child) { display: none !important; }   /* label pendek (seperti rel lain) */
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif:not(.sisi-buka) .bottom-nav > :is(#nav-home, #navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .pm-nav) { padding: 4px 2px 3px !important; gap: 2px !important; }   /* padat: 12 item muat tanpa tatal */
    html.sgp-html body #eguru-app#eguru-app.sgp.pm-aktif:not(.sisi-buka) .bottom-nav > :is(#navgrp-pdpc, #navgrp-pbd, #navgrp-istimewa, #nav-profile, .pm-nav) svg { height: 24px !important; padding: 2px 8px !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x) :is(.nav-label, span) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 64px !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x).active { color: #047857 !important; font-weight: 800 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x).active svg { background: rgba(5,150,105,.12) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x).active::before { content: '' !important; display: block !important; position: absolute; left: -5px; top: 10px; bottom: 10px; width: 4px;
        border-radius: 0 4px 4px 0; background: #059669 !important; transform: none !important; opacity: 1 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.sgp-rel-bantu, #sgp-x) { background: #fff !important; box-shadow: 0 -8px 10px -6px rgba(255,255,255,.95) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav > :is(.sgp-rel-bantu, #sgp-x) { background: var(--card-bg) !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav-tajuk, #sgp-x)::before, html.sgp-html body #eguru-app#eguru-app.sgp:not(.sisi-buka) .bottom-nav > :is(.pm-nav-tajuk, #sgp-x)::after { content: none !important; display: none !important; }   /* label lipat lama (MURID) */
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav > .pm-nav-tajuk { border-top-color: var(--border) !important; color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme:not(.sisi-buka) .bottom-nav > :is(.pm-nav, #sgp-x).active { color: #6EE7B7 !important; }
}
/* 5 Nov (M6 mockup telefon app.html?app=guru): Jadual Waktu Mingguan telefon = senarai baris hari (lib/sg_perisian.js utamaTelefon) */
.sgp-jl { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app #view-home .hero-jw.sgp-jl-tel :is(.hw-grid, .hw-legend) { display: none !important; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-jl { display: grid; grid-template-columns: 76px minmax(0, 1fr); margin: 8px 0 4px; border: 1px solid #D1FAE5; border-radius: 12px; overflow: hidden; background: #fff; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-jh { display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; background: linear-gradient(180deg, #047857, #064E3B); color: #fff; border-bottom: 1px solid rgba(255,255,255,.14); }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-jh.kini { background: linear-gradient(180deg, #F59E0B, #D97706); }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-jh b { font: 800 14px/1.25 Inter, system-ui, sans-serif; color: #fff; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-jh small { font: 500 11px/1.3 Inter, system-ui, sans-serif; color: #fff; opacity: .85; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-js { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 8px; border-bottom: 1px solid #E5E7EB; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-js:last-child { border-bottom: 0; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: #ECFDF5; text-align: center; cursor: pointer; font: inherit; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot b { font: 800 14.5px/1.3 Inter, system-ui, sans-serif; color: #047857; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot small { font: 500 11.5px/1.3 Inter, system-ui, sans-serif; color: #4B5563; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot span { margin-top: 2px; padding: 0 8px; border-radius: 99px; font: 800 10.5px/1.6 Inter, system-ui, sans-serif; background: #D1FAE5; color: #065F46; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot.amber span { background: #FEF3C7; color: #92400E; } #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-slot.kosong span { background: #F3F4F6; color: #4B5563; }
    #eguru-app #view-home .hero-jw.sgp-jl-tel .sgp-kos { text-align: center; color: #9CA3AF; font: 500 13px/1.3 Inter, system-ui, sans-serif; }
    #eguru-app.dark-theme #view-home .hero-jw.sgp-jl-tel :is(.sgp-jl, .sgp-js) { background: var(--card-bg); border-color: var(--border); }
    #eguru-app.dark-theme #view-home .hero-jw.sgp-jl-tel .sgp-slot { background: rgba(5,150,105,.16); }
    #eguru-app.dark-theme #view-home .hero-jw.sgp-jl-tel .sgp-slot b { color: #6EE7B7; } #eguru-app.dark-theme #view-home .hero-jw.sgp-jl-tel .sgp-slot small { color: var(--text-muted); }
}
/* 5 Nov (72.29 mockup ?jenis=ptd): UTAMA Pentadbiran = mockup — kepala-k · .lsn amber · kad Jawatan (cip bidang + garis masa) · 4 jubin · grid 1.5fr/1fr
   (Tugas minggu ini | Data Induk sekolah); bahagian asal di bawah KEKAL (lib/sg_perisian.js utamaPtd). Unsur .sgp-ptdu-x = laptop sahaja. */
html:not(.sgp-html) .sgp-ptdu-x { display: none !important; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    /* kepala-k */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-hero { display: block !important; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-hero > :is(.ptd-db-ilus, .ptd-db-fasa), html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-hero :is(.ptd-db-atas, .ptd-db-semangat, .ptd-db-struktur) { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-ptdu-lal { margin: 0; font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-hero h2 { margin: 2px 0 0 !important; font: 800 23px/1.25 Inter, system-ui, sans-serif !important; letter-spacing: -.3px; color: #1F2937 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-hero h2 span { color: inherit !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-tkh { margin: 3px 0 0 !important; font: 400 13.5px/1.4 Inter, system-ui, sans-serif !important; color: #4B5563 !important; }
    /* .lsn Langkah seterusnya */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn { position: relative; display: flex; align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 16px 24px; background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
        border: 1.5px solid #FCD34D; border-left: 6px solid #F59E0B; border-radius: 16px; color: #78350F; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-ik { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #F59E0B; display: grid; place-items: center; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-ik svg { width: 26px; height: 26px; fill: #fff; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn > div { flex: 1; min-width: 0; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn small { display: block; font: 900 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #B45309; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn b { display: block; margin: 2px 0; font: 800 18px/1.3 Inter, system-ui, sans-serif; color: #78350F; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn p { margin: 0; font: 400 13.5px/1.45 Inter, system-ui, sans-serif; color: #92400E; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn p.sgp-lsn-sebab { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.65); }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn p[hidden] { display: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #059669, #047857);
        color: #fff; font: 700 13.5px/1 Inter, system-ui, sans-serif; box-shadow: 0 3px 10px rgba(5,150,105,.3); cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-btn svg { width: 18px; height: 18px; fill: #fff; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-btn:focus-visible, html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-kenapa:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn-kenapa { position: absolute; right: 16px; bottom: 5px; padding: 0; border: 0; background: none; font: 500 11.5px/1.3 Inter, system-ui, sans-serif; color: #B45309; text-decoration: underline; cursor: pointer; }
    /* kad Jawatan: cip bidang + garis masa tahun */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-ptdu-jw { margin: 0 0 14px; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cipk { display: flex; flex-wrap: wrap; gap: 6px; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cipk .ptd-db-bid { min-height: 32px; padding: 0 5px 0 12px; gap: 6px; border: 1px solid #E5E7EB; border-radius: 99px; background: #fff; color: #1F2937; font: 700 13px/1.2 Inter, system-ui, sans-serif; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cipk .ptd-db-bid:hover { border-color: #34D399; background: #ECFDF5; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cipk .ptd-db-bid.solo { padding: 0 14px; border-color: #A7F3D0; color: #047857; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cipk .ptd-db-bid b { min-width: 22px; height: 22px; padding: 0 6px; font-size: 11.5px; background: #047857; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm i { display: block; height: 6px; border-radius: 3px; background: #E5E7EB; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .lalu i { background: #6EE7B7; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .on i { background: #047857; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm small { display: block; margin-top: 4px; text-align: center; font: 500 11px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .on small { color: #047857; font-weight: 800; }
    /* 4 jubin + jubin Sekolah anda & Akses pantas: kad putih, ikon segi empat berwarna */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-h.sgp-ptdu-sorok { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-h { margin: 18px 2px 8px !important; font: 800 11px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: .6px; color: #6B7280 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jubin { gap: 10px !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt) { min-height: 0 !important; padding: 12px !important; gap: 10px !important; background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 14px !important;
        box-shadow: none !important; transform: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jb { align-items: flex-start !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt):hover { border-color: #A7F3D0 !important; background: #F7FEF9 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jb .ptd-db-cw { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt) .ptd-db-ik { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: var(--w) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt) .ptd-db-ik svg { width: 19px !important; height: 19px !important; fill: #fff !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jb-t small { font: 700 11.5px/1.3 Inter, system-ui, sans-serif !important; color: #6B7280 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jb-t b { font: 800 18px/1.25 Inter, system-ui, sans-serif !important; color: #1F2937 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-jb-t span { font: 400 11.5px/1.35 Inter, system-ui, sans-serif !important; color: #6B7280 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-pt b { font: 700 13.5px/1.3 Inter, system-ui, sans-serif !important; } html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ptd-db-pt small { font: 400 12px/1.3 Inter, system-ui, sans-serif !important; color: #6B7280 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-kad, .ptd-db-rehat) { background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important; box-shadow: none !important; }
    /* grid: Tugas minggu ini (1.5fr) | Data Induk sekolah (1fr) */
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-dash { margin: 14px 0 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-dash > .ptd-db-h { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-dash-g { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 14px !important; align-items: start !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-dash-g > .card { margin: 0 !important; padding: 14px !important; background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important; box-shadow: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-dash-g > .card > .section-header-text { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cip { padding: 2px 9px; border-radius: 99px; background: #ECFDF5; color: #047857; font: 700 11.5px/1.4 Inter, system-ui, sans-serif; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-kos { margin: 0 0 6px; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-ptdu-h5 { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid #E5E7EB; font: 800 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-ptdu-h5 svg { width: 14px; height: 14px; fill: #D97706; flex: none; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-ptdu-tg .sgp-br b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-pil { flex: none; white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-pil.hijau { background: #D1FAE5; color: #065F46; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-pil.kosong { background: none; border: 1px solid #E5E7EB; color: #4B5563; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk { display: flex !important; align-items: center !important; gap: 12px !important; width: 100%; min-height: 0 !important; padding: 9px 4px !important; border: 0 !important;
        border-top: 1px solid #E5E7EB !important; border-radius: 0 !important; background: none !important; text-align: left; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk:first-of-type { border-top: 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk:hover { background: #F7FEF9 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk > span:not(.sgp-kt):not(.ind-bar) { flex: 1; min-width: 0; font: 700 13.5px/1.35 Inter, system-ui, sans-serif; color: #1F2937; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk > :is(.ind-bar, b) { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .ind-lk > svg.sgp-ptdu-chev { width: 18px; height: 18px; fill: #9CA3AF; flex: none; }
    /* gelap */
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-hero h2, .ptd-db-jb-t b, .ind-lk > span) { color: var(--text) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-tkh, .sgp-ptdu-lal, .ptd-db-jb-t small, .ptd-db-jb-t span, .sgp-gm small, .sgp-kos, .sgp-ptdu-h5) { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt, .ptd-db-kad, .ptd-db-rehat, .ind-dash-g > .card, .sgp-cipk .ptd-db-bid) { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ind-lk, .sgp-ptdu-h5, .sgp-br) { border-color: var(--border) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu :is(.ptd-db-jb, .ptd-db-pt, .ind-lk, .sgp-br):hover { background: rgba(5,150,105,.12) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm i { background: #334155; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .lalu i { background: #047857; } html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .on i { background: #34D399; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-gm .on small { color: #6EE7B7 !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn { background: linear-gradient(135deg, #2A2210, #33280F); border-color: #92400E; color: #FDE68A; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn :is(b, p, small, .sgp-lsn-kenapa) { color: #FDE68A; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lsn p.sgp-lsn-sebab { background: rgba(0,0,0,.25); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-cip { background: rgba(5,150,105,.18); color: #6EE7B7; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-pil.kosong { border-color: var(--border); color: var(--text-muted); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-db.sgp-ptdu .sgp-lihat { color: #6EE7B7; }
}
/* 5 Nov (72.29 mockup ?jenis=ruang): RUANG KERJA jawatan — panel senarai 250px · kepala-k · tab-blok Tugas | Alat | Fail Meja · jadual tugas + panel
   "Alat untuk tugas ini"; tab Alat = bar alat & modul ASAL (lib/sg_perisian.js ruangPtd). Laptop sahaja. */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk { display: grid !important; grid-template-columns: 250px minmax(0, 1fr); column-gap: 20px; align-items: start; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > * { grid-column: 2; min-width: 0; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > #sgp-rk-sen { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 0; align-self: start; max-height: calc(100vh - var(--kepala-h, 62px) - 64px); overflow-y: auto;
        padding: 2px 0 12px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; scrollbar-width: thin; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > #sgp-rk-sen h4 { margin: 14px 14px 6px; font: 800 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 1px 8px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left;
        font: inherit; color: #1F2937; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp:hover { background: #F7FEF9; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp.on { background: rgba(5,150,105,.1); box-shadow: inset 3px 0 0 #059669; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp:focus-visible { outline: 3px solid #047857; outline-offset: 1px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp > svg { flex: none; width: 18px; height: 18px; fill: #047857; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp > svg:last-child:not(:first-child) { fill: #9CA3AF; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp > span:not(.sgp-kt) { flex: 1; min-width: 0; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp b { display: block; font: 700 13px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sp small { display: block; font: 400 11.5px/1.35 Inter, system-ui, sans-serif; color: #6B7280; }
    /* kepala-k */
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala { margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala > .ptd-lencana { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala .ptd-kt p { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala .sgp-rk-lal { margin: 0; font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala .sgp-rk-lal span { margin: 0 4px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala h2 { margin: 2px 0 0 !important; font: 800 23px/1.25 Inter, system-ui, sans-serif !important; letter-spacing: -.3px; color: #1F2937 !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .ptd-kepala p { margin: 3px 0 0 !important; font: 400 13.5px/1.4 Inter, system-ui, sans-serif !important; color: #4B5563 !important; }
    /* tab-blok kiri */
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab { display: flex; gap: 4px; max-width: 420px; margin: 0 0 12px; padding: 4px; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none;
        font: 700 12.5px/1 Inter, system-ui, sans-serif; color: #4B5563; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab button i { font-style: normal; padding: 1px 7px; border-radius: 99px; background: #F3F4F6; color: #4B5563; font: 700 11px/1.4 Inter, system-ui, sans-serif; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab button.on { background: linear-gradient(135deg, #059669, #047857); color: #fff; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab button.on i { background: rgba(255,255,255,.22); color: #fff; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > .sgp-rk-tab button:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
    /* tab: Tugas menyorok bar alat & modul; Alat menyorok jadual tugas */
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk.sgp-rk-tugas > :is(#rk-lgk, #rk-isi) { display: none !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk.sgp-rk-alat > #sgp-rk-tg { display: none !important; }
    /* jadual tugas + panel Alat untuk tugas ini */
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > #sgp-rk-tg { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; font: 400 13px/1.4 Inter, system-ui, sans-serif; color: #1F2937; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data th { padding: 9px 10px; background: #F7FEF9; border-bottom: 1px solid #E5E7EB; text-align: left; font: 700 11px/1.3 Inter, system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data td { padding: 9px 10px; border-bottom: 1px solid #E5E7EB; vertical-align: middle; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data td:first-child, html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data th:first-child { width: 34px; padding-right: 0; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data td:last-child { width: 1%; white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data td:nth-child(3) { width: 26%; color: #4B5563; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data td b { font-weight: 700; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data tr:last-child td { border-bottom: 0; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data tbody tr:hover td { background: #F7FEF9; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data tr.pilih td { background: #ECFDF5; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data tr.pilih td:first-child { box-shadow: inset 3px 0 0 #059669; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data input { width: 16px; height: 16px; accent-color: #059669; cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-pil { font-style: normal; white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-pil.hijau { background: #D1FAE5; color: #065F46; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-bk { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid #A7F3D0; border-radius: 8px; background: #fff; color: #047857; font: 700 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-bk svg { width: 15px; height: 15px; fill: currentColor; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-bk:hover { background: #ECFDF5; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p { position: sticky; top: 0; padding: 14px 6px 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kk { margin: 0 8px 4px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kk b { font: 700 14px/1.35 Inter, system-ui, sans-serif; align-items: flex-start; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kk b svg { flex: none; margin-top: 1px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kos { margin: 0 8px 6px; font: 400 12.5px/1.4 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-rk-tuj { margin: 0 8px 8px; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #4B5563; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p h5 { margin: 12px 8px 6px; font: 800 10.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #6B7280; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-sp { margin: 1px 0; width: 100%; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kt { width: 30px; height: 30px; border-radius: 9px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-p .sgp-kt svg { width: 17px; height: 17px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-buka { display: flex; justify-content: center; width: calc(100% - 16px); margin: 10px 8px 0; min-height: 38px; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk { container-type: inline-size; }
    @container (max-width: 1100px) { html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > #sgp-rk-tg { grid-template-columns: minmax(0, 1fr); } }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk > #sgp-rk-tg .sgp-rk-p { position: static; }
    /* gelap */
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk :is(#sgp-rk-sen, .sgp-rk-tab, .sgp-data, .sgp-rk-p, .sgp-bk) { background: var(--card-bg); border-color: var(--border); color: var(--text); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data :is(th, td) { border-color: var(--border); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-data th { background: rgba(5,150,105,.1); color: var(--text-muted); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk :is(.sgp-data tbody tr:hover td, .sgp-data tr.pilih td, .sgp-sp:hover, .sgp-sp.on) { background: rgba(5,150,105,.16); }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk :is(.sgp-sp, .ptd-kepala h2) { color: var(--text) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk :is(.sgp-sp small, .sgp-kos, .sgp-rk-tuj, h4, h5, .sgp-rk-lal, .ptd-kepala p, .sgp-data td:nth-child(3), .sgp-rk-tab button) { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-tab button.on { color: #fff !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-bk { color: #6EE7B7; border-color: #047857; }
}
/* 5 Nov (mockup ?jenis=ruang): bidang rel AKTIF bila jawatan di dalamnya dibuka (Ruang Kerja) — gaya sama seperti item aktif */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on) { color: #047857 !important; font-weight: 800 !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on) svg:not(.ptd-chev) { background: rgba(5,150,105,.12) !important; fill: var(--c, #047857) !important; }
    html.sgp-html body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on)::before { content: '' !important; display: block !important; position: absolute !important; left: -5px !important; top: 10px !important; bottom: 10px !important; width: 4px !important; height: auto !important;
        border-radius: 0 4px 4px 0 !important; background: #059669 !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-buka { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 16px); min-height: 38px; margin: 10px 8px 0; padding: 0 14px; border: 0; border-radius: 10px;
        background: linear-gradient(135deg, #059669, #047857); color: #fff; font: 700 13.5px/1 Inter, system-ui, sans-serif; box-shadow: 0 3px 10px rgba(5,150,105,.3); cursor: pointer; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-buka svg { width: 18px; height: 18px; fill: #fff; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi.sgp-rk .sgp-rk-buka:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
}
/* 5 Nov: item/bidang AKTIF rel Pentadbiran dalam mod gelap — kontras >= 4.5:1 (hijau #047857 di atas latar gelap terlalu malap) */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it.on, .ptd-grp.on, .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on)), html.sgp-html[data-theme="dark"] body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it.on, .ptd-grp.on, .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on)) { color: #6EE7B7 !important; }
    html.sgp-html body #eguru-app.dark-theme #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it.on, .ptd-grp.on, .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on)) svg:not(.ptd-chev), html.sgp-html[data-theme="dark"] body #ptd-portal#ptd-portal .ptd-side:not(#sgy1):not(#sgy2):not(#sgy3):not(#sgy4) :is(.ptd-it.on, .ptd-grp.on, .ptd-grp:has(+ .ptd-grp-isi .ptd-it.on)) svg:not(.ptd-chev) { background: rgba(110,231,183,.14) !important; }
}
/* 5 Nov (72.29 mockup ?jenis=murid): PORTAL MURID = mockup — bar tajuk 40px (Portal Murid · kelas, carian tengah, avatar bulat, a11y) · Utama: kepala-k
   (sapaan + kata semangat) · "Apa perlu saya buat hari ini?" = 3 KAD mendatar (ikon besar, nombor, butang) · kad Tahap · grid asal · Papan Juara, Akuarium &
   Daftar e-mel KEKAL di bawah. Susunan = CSS sahaja (display: contents + order), aktif sejak lukisan pertama (tiada anjakan). Menu kiri KEKAL semua item. */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m { --topbar-h: 40px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar { height: 40px !important; min-height: 40px !important; padding: 0 8px 0 12px !important; background: linear-gradient(135deg, #047857, #064E3B) !important; box-shadow: none !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-in { gap: 10px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-logo { width: 22px !important; height: 22px !important; border-radius: 24% !important;
        background: linear-gradient(135deg, color-mix(in srgb, #059669 55%, #fff) -40%, #059669 45%, color-mix(in srgb, #059669 65%, #000) 120%) !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-logo svg { width: 13px !important; height: 13px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-teks { flex: 0 1 auto !important; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-teks b { display: inline !important; font: 700 13.5px/1 Inter, system-ui, sans-serif !important; white-space: nowrap; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-teks span { display: inline !important; font: 500 12px/1 Inter, system-ui, sans-serif !important; opacity: .7 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-in > .sgp-cari { flex: 0 1 430px !important; height: 28px !important; margin: 0 auto !important; padding: 0 10px !important; border-radius: 8px !important; font: 500 12.5px/1 Inter, system-ui, sans-serif !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-in > .sgp-cari kbd { padding: 3px 6px !important; font-size: 10.5px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-murid { padding: 0 !important; background: none !important; gap: 0 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-murid i { width: 28px !important; height: 28px !important; background: #B45309 !important; color: #fff; font: 800 11px/1 Inter, system-ui, sans-serif !important; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-murid > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-kanan .btn-a11y { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important; background: none !important; display: grid !important; place-items: center; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m .topbar-kanan .btn-a11y:hover { background: rgba(255,255,255,.15) !important; }
    /* Utama: susunan mockup tanpa mengalih DOM */
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama { display: flex !important; flex-direction: column; gap: 14px; padding-top: 14px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama > *, :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hero-juara > * { order: 20; margin: 0 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.mh-hero, .hero-juara) { display: contents !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-ilus, :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hero-tarikh { display: none !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-t { order: 1; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-atas { margin: 0 !important; font: 600 12px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #6B7280 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-atas svg { display: none !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-t h1 { margin: 2px 0 0 !important; font: 800 23px/1.25 Inter, system-ui, sans-serif !important; letter-spacing: -.3px; color: #1F2937 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-t h1 .mh-nama { color: inherit !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .mh-semangat { margin: 3px 0 0 !important; padding: 0 !important; border: 0 !important; font: 400 13.5px/1.4 Inter, system-ui, sans-serif !important; font-style: normal !important; color: #4B5563 !important; }
    /* Apa perlu saya buat hari ini? = 3 kad */
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama #utama-seterusnya { order: 2; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama #utama-seterusnya .st-label { margin: 0 0 10px !important; font: 800 17px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: #1F2937 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-tiga { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px !important; margin: 0 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t { position: relative; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; min-height: 176px; padding: 16px !important;
        background: #fff !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t.kini { border: 1.5px solid #6EE7B7 !important; box-shadow: 0 0 0 3px #D1FAE5; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t::before { content: ''; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 15px; background: #0F766E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E") center / 28px no-repeat; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t:nth-child(2)::before { background-color: #7C3AED; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t:nth-child(3)::before { background-color: #EA580C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.58 16.09l-1.09-7.66A3.996 3.996 0 0 0 16.53 5H7.47C5.48 5 3.79 6.46 3.51 8.43l-1.09 7.66C2.2 17.63 3.39 19 4.94 19c.68 0 1.32-.27 1.8-.75L9 16h6l2.25 2.25c.48.48 1.13.75 1.8.75 1.56 0 2.75-1.37 2.53-2.91zM11 11H9v2H8v-2H6v-1h2V8h1v2h2v1zm4-1c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2 3c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/%3E%3C/svg%3E"); }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-no { position: absolute; top: 14px; right: 14px; width: 26px !important; height: 26px !important; font-size: 12.5px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-isi b { font: 800 16px/1.3 Inter, system-ui, sans-serif !important; color: #1F2937 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t.siap .st-isi b { color: #4B5563 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-isi span { font: 400 13px/1.45 Inter, system-ui, sans-serif !important; color: #4B5563 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-b { width: 100% !important; min-width: 0 !important; min-height: 40px !important; margin-top: auto; }
    /* kad Tahap */
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-tahap { order: 3; padding: 14px !important; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-tahap b { font: 700 14.5px/1.3 Inter, system-ui, sans-serif !important; color: #1F2937 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-tahap .bar { height: 10px !important; margin-top: 8px !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-tahap small { margin-top: 6px !important; font: 400 12px/1.4 Inter, system-ui, sans-serif !important; color: #4B5563 !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-baris { order: 5; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .grid-2 { order: 6; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-stat { order: 7; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-sambung { order: 8; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama #utama-akuarium { order: 9; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama #mak-tawar { order: 10; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.kad, .mak-kad) { border-radius: 16px !important; box-shadow: none !important; }
    /* gelap */
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m.dark-theme #v-utama :is(.mh-t h1, .st-isi b, .hj-tahap b), html[data-theme="dark"]:not(.sgp-mati) body.sgp-m #v-utama :is(.mh-t h1, .st-isi b, .hj-tahap b) { color: var(--text) !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m.dark-theme #v-utama :is(.st-t, .hj-tahap), html[data-theme="dark"]:not(.sgp-mati) body.sgp-m #v-utama :is(.st-t, .hj-tahap) { background: var(--card-bg) !important; border-color: var(--border) !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m.dark-theme #v-utama :is(.mh-semangat, .mh-atas, .st-isi span, .hj-tahap small), html[data-theme="dark"]:not(.sgp-mati) body.sgp-m #v-utama :is(.mh-semangat, .mh-atas, .st-isi span, .hj-tahap small) { color: var(--text-muted) !important; }
    @media (prefers-color-scheme: dark) {
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.mh-t h1, .st-isi b, .hj-tahap b) { color: var(--text) !important; }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.st-t, .hj-tahap) { background: var(--card-bg) !important; border-color: var(--border) !important; }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.mh-semangat, .mh-atas, .st-isi span, .hj-tahap small) { color: var(--text-muted) !important; }
    }
}
/* 5 Nov (72.29 mockup ?jenis=murid) bhg 2: Utama Portal Murid — grid "Kerja daripada cikgu" (1.5fr) + "Minggu ini" (1fr) selepas 3 kad & Tahap;
   kad Nota terkini disorok di laptop (barisnya kini dalam Kerja daripada cikgu, fungsi sama); jubin Kehadiran/PBD kekal. Panel kanan Utama =
   "Kelas · minggu ini" (podium) + KAD TERBARU; F1 = Panduan. lib/sg_perisian.js utamaMurid / lukisMu. Telefon: .sgp-mu-x disorok. */
.sgp-mu-x { display: none; }
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama { container-type: inline-size; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama > #sgp-mu-grid { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; order: 4; align-items: start; }
    @container (max-width: 700px) { :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama > #sgp-mu-grid { grid-template-columns: minmax(0, 1fr); } }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama:has(> #sgp-mu-grid) .grid-2 > .kad:first-child { display: none !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama:has(> #sgp-mu-grid) .grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kad { min-width: 0; padding: 14px; background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kk { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kk > b { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.3 Inter, system-ui, sans-serif; color: #1F2937; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kk > b svg { flex: none; width: 18px; height: 18px; fill: #047857; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-mg .sgp-mu-kk > b svg { fill: #EA580C; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-sela { flex: 1; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-cip { padding: 2px 9px; border-radius: 99px; background: #ECFDF5; color: #047857; font: 700 11.5px/1.4 Inter, system-ui, sans-serif; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kos { margin: 0; font: 400 12.5px/1.4 Inter, system-ui, sans-serif; color: #6B7280; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 4px; border: 0; border-top: 1px solid #E5E7EB; border-radius: 0;
        background: none; text-align: left; font: inherit; color: #1F2937; cursor: pointer; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kk + .sgp-mu-br { border-top: 0; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br:hover { background: #F7FEF9; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br:focus-visible, :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-lagi:focus-visible { outline: 3px solid #047857; outline-offset: -2px; border-radius: 8px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br > span:nth-child(2) { flex: 1; min-width: 0; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.35 Inter, system-ui, sans-serif; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #4B5563; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br > svg { flex: none; width: 18px; height: 18px; fill: #9CA3AF; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kt { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kt svg { width: 19px; height: 19px; fill: #fff; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-pil { flex: none; padding: 2px 9px; border: 1px solid #E5E7EB; border-radius: 99px; font: 700 11.5px/1.4 Inter, system-ui, sans-serif; font-style: normal; color: #4B5563; white-space: nowrap; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-pil.amber { background: #FEF3C7; border-color: #FEF3C7; color: #92400E; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-lagi-b { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 4px 0; border-top: 1px solid #E5E7EB; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-lagi { min-height: 32px; padding: 0; border: 0; background: none; font: 700 12.5px/1.3 Inter, system-ui, sans-serif; color: #047857; cursor: pointer; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-lagi:hover { text-decoration: underline; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari { display: flex; gap: 6px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font: 700 12px/1 Inter, system-ui, sans-serif; color: #4B5563; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari i { display: grid; place-items: center; width: 100%; max-width: 36px; aspect-ratio: 1; border: 2px dashed #D1D5DB; border-radius: 50%; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari i svg { width: 55%; height: 55%; fill: #fff; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .on { color: #C2410C; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .on i { border: 0; background: linear-gradient(135deg, #F59E0B, #EA580C); }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .kini:not(.on) i { border: 2px solid #F59E0B; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .depan { color: #6B7280; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .depan i { border-color: #E5E7EB; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-mg > .sgp-mu-kos { margin-top: 12px; }
    :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .hj-tahap > b::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F59E0B' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
    /* panel kanan Utama: podium kelas + Kad terbaru */
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; margin: 6px 0 0; text-align: center; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd small { font: 800 11.5px/1.2 Inter, system-ui, sans-serif; color: #B45309; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #9CA3AF; color: #fff; font: 800 13px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 3px #FBBF24; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd.satu .sgp-av { width: 50px; height: 50px; font-size: 15px; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd i { display: block; width: 100%; height: 34px; margin-top: 2px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #E5E7EB, #9CA3AF); }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd.satu i { height: 54px; background: linear-gradient(180deg, #FDE68A, #F59E0B); }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd:last-child i { height: 24px; background: linear-gradient(180deg, #FED7AA, #C2410C); }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd-x .sgp-av { background: #F3F4F6; color: #6B7280; box-shadow: 0 0 0 3px #E5E7EB; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd-x i { opacity: .35; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-mu-saya { margin: 10px 0 0; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; color: #4B5563; text-align: center; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-mu-h4 { margin: 18px 0 8px !important; font: 800 10.5px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 1.2px; color: #6B7280 !important; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-kk-mini { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #047857, #064E3B);
        color: #fff; text-align: left; cursor: pointer; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-kk-mini span { font: 800 9.5px/1.35 Inter, system-ui, sans-serif; letter-spacing: .6px; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-kk-mini b { font: 800 15px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-kk-mini i { align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.2); font: 700 11px/1.5 Inter, system-ui, sans-serif; font-style: normal; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-kk-mini:focus-visible { outline: 3px solid #FACC15; outline-offset: 2px; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-b-btn { width: 100%; margin-top: 10px; }
    html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-b-auto { margin-top: 14px; }
    @media (prefers-color-scheme: dark) {
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-kad { background: var(--card-bg); border-color: var(--border); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.sgp-mu-kk > b, .sgp-mu-br) { color: var(--text); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.sgp-mu-br small, .sgp-mu-kos, .sgp-mu-pil, .sgp-mu-hari span, .sgp-mu-hari .depan) { color: var(--text-muted); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.sgp-mu-br, .sgp-mu-lagi-b, .sgp-mu-pil) { border-color: var(--border); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-br:hover { background: rgba(5,150,105,.16); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama :is(.sgp-mu-cip, .sgp-mu-lagi) { color: #6EE7B7; }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-cip { background: rgba(5,150,105,.18); }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .on { color: #FDBA74; }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari i, :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .sgp-mu-hari .depan i { border-color: var(--border); }
        /* baiki m5: tajuk 'Apa perlu saya buat hari ini?' & tugas siap gelap-atas-gelap */
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama #utama-seterusnya .st-label { color: var(--text) !important; }
        :is(html, #sgp-x):not(.sgp-mati) body.sgp-m #v-utama .st-t.siap .st-isi b { color: var(--text-muted) !important; }
        html.sgp-html body.sgp-m #sgp-bantu :is(.sgp-b-n, .sgp-b-auto, .sgp-b-btn.garis) { color: #6EE7B7; }
        html.sgp-html body.sgp-m #sgp-bantu .sgp-b-btn.garis { border-color: #047857; }
        html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd small { color: #FCD34D; }
        html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-mu-saya { color: var(--text-muted); }
        html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-mu-h4 { color: var(--text-muted) !important; }
        html.sgp-html body.sgp-m .shell > .sgp-bantu.sgp-mu .sgp-pd-x .sgp-av { background: var(--border); color: var(--text-muted); box-shadow: 0 0 0 3px var(--border); }
    }
}
/* 5 Nov (pemilik): slot jadual Utama = masa MULA–TAMAT di hadapan, tidak dipecah baris (laptop & telefon) */
#eguru-app #view-home .sgp-jl .sgp-slot .sgp-masa { white-space: nowrap; font-weight: 700; }
/* 5 Nov (72.29 mockup ?jenis=akaun): AKAUN laptop — kepala-k, tab garis, kad 2 lajur dengan ringkasan + Sunting/Urus/Tukar, panel kanan akaun (lib/sg_perisian.js akaunMockup/lukisAk) */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-hero { padding: 0 !important; margin: 0 0 14px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; color: inherit !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-hero > :is(.ak-hero-top, .ak-badges, .ak-admin-btn, .ak-kolab-btn, .ak-plan-badge) { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kepala { margin: 0 0 12px; padding-top: 12px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-lal { font: 600 12px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-lal span { margin: 0 4px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kepala h2 { margin: 2px 0 0; font: 800 23px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.3px; color: #1F2937; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kepala p { margin: 3px 0 0; font: 400 13.5px/1.4 Inter, system-ui, sans-serif; color: #4B5563; }
    /* tab garis */
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-tabs { display: flex !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid #E5E7EB !important; border-radius: 0 !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-tabs .ak-tab { flex: none !important; min-height: 36px !important; margin: 0 0 -1px !important; padding: 0 14px !important; border: 0 !important; border-bottom: 2.5px solid transparent !important; border-radius: 0 !important; background: none !important;
        color: #4B5563 !important; font: 600 13.5px/1 Inter, system-ui, sans-serif !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-tabs .ak-tab svg { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-tabs .ak-tab:hover { color: #047857 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .ak-tabs .ak-tab.active { border-bottom-color: #047857 !important; color: #047857 !important; font-weight: 800 !important; }
    /* 2 lajur kad */
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak #akpanel-akaun > :is(.tetapan-kategori:not(.danger), .help-hint) { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-g { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 4px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad { margin: 0 !important; padding: 14px 16px !important; border: 1px solid #E5E7EB !important; border-radius: 16px !important; box-shadow: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad > .section-header { align-items: center; margin: 0 !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad > .section-header .section-header-text p { display: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad > .section-header h3 { font: 800 15px/1.3 Inter, system-ui, sans-serif !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad:has(> .sgp-ak-r) > .section-header .acc-arrow, html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad > .section-header:has(.sgp-ak-bt) .acc-arrow { display: none !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-bt { flex: none; margin-left: 8px; min-height: 30px; padding: 0 12px; border: 1.5px solid #A7F3D0; border-radius: 8px; background: #fff; color: #047857; font: 700 12.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-bt:hover { background: #ECFDF5; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-bt:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-r { margin-top: 10px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-kad:has(> .acc-body[style*="block"]) > .sgp-ak-r { display: none; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-dl { margin: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-dl > div { padding: 8px 0; border-top: 1px solid #F3F4F6; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-dl > div:first-child { border-top: 0; padding-top: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-dl dt { font: 500 11.5px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-dl dd { margin: 2px 0 0; font: 700 13.5px/1.4 Inter, system-ui, sans-serif; color: #1F2937; overflow-wrap: anywhere; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-sen { display: flex; flex-direction: column; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-br { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; border: 0; border-top: 1px solid #F3F4F6; background: none; color: #1F2937; font: 700 13.5px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-br:first-child { border-top: 0; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-br svg { width: 16px; height: 16px; margin-left: auto; fill: #9CA3AF; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-br:hover { color: #047857; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak .sgp-ak-br:focus-visible { outline: 3px solid #047857; outline-offset: -2px; border-radius: 8px; }
    html.sgp-html body #eguru-app#eguru-app.sgp #view-profile.sgp-ak #akaun-kad-bantuan.sgp-ak-kad > .akaun-bantuan-aksi { display: none !important; }
    /* panel kanan Akaun */
    /* 5 Nov malam (mockup ?jenis=muridanda): panel kanan PROFIL MURID (lib/sg_perisian.js lukisMa) */
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-id { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 0 4px; text-align: center; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-av { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: #047857; color: #fff; font: 800 22px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 4px #D1FAE5; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-id b { font: 800 14px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-id small { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-g > div { padding: 10px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; text-align: center; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-g b { display: block; font: 800 17px/1.2 Inter, system-ui, sans-serif; color: #047857; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-g small { display: block; margin-top: 2px; font: 500 11px/1.3 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ma-p .sgp-ma-x { margin: 0 0 6px; padding: 7px 10px; border-radius: 10px; background: #FEF3C7; color: #92400E; font: 600 12px/1.35 Inter, system-ui, sans-serif; }
    html.sgp-html #eguru-app.dark-theme > .sgp-bantu.sgp-ma-p .sgp-ma-g > div { background: var(--card-bg); border-color: var(--border); }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-id { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 4px 0 2px; text-align: center; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-av { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; overflow: hidden; border-radius: 50%; background: #047857; color: #fff; font: 800 22px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 4px #D1FAE5; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-av img { width: 100%; height: 100%; object-fit: cover; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-id b { font: 800 14.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-id small { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #6B7280; overflow-wrap: anywhere; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-pl { margin-top: 2px; padding: 1px 9px; border-radius: 99px; background: #F59E0B; color: #fff; font: 800 10.5px/1.6 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .6px; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-pk { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid #E5E7EB; border-radius: 14px; background: #F9FAFB; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-pk b { font: 800 15px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-pk small { font: 400 12px/1.45 Inter, system-ui, sans-serif; color: #4B5563; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp:hover { background: #F7FEF9; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp:focus-visible { outline: 3px solid #047857; outline-offset: -2px; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp b { font: 700 13.5px/1.3 Inter, system-ui, sans-serif; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp small { font: 400 12px/1.4 Inter, system-ui, sans-serif; color: #6B7280; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-ak-dp[data-ak="padam"] b { color: #B91C1C; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-mu-h4 { margin: 8px 0 0 !important; font: 800 10.5px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 1.2px; color: #6B7280 !important; }
    html.sgp-html #eguru-app > .sgp-bantu.sgp-ak-p .sgp-b-btn { width: 100%; margin: 0; }
    /* gelap */
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak :is(.sgp-ak-kepala h2, .sgp-ak-dl dd, .sgp-ak-br) { color: var(--text) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak :is(.sgp-ak-kepala p, .sgp-ak-lal, .sgp-ak-dl dt) { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak :is(.sgp-ak-kad, .ak-tabs) { border-color: var(--border) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak :is(.sgp-ak-dl > div, .sgp-ak-br) { border-color: var(--border); }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak .sgp-ak-bt { background: var(--card-bg); color: #6EE7B7; border-color: #047857; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak .ak-tabs .ak-tab { color: var(--text-muted) !important; }
    html.sgp-html body #eguru-app#eguru-app.sgp.dark-theme #view-profile.sgp-ak .ak-tabs .ak-tab.active { color: #6EE7B7 !important; border-bottom-color: #6EE7B7 !important; }
    html.sgp-html #eguru-app.dark-theme > .sgp-bantu.sgp-ak-p .sgp-ak-pk { background: rgba(5,150,105,.08); border-color: var(--border); }
    html.sgp-html #eguru-app.dark-theme > .sgp-bantu.sgp-ak-p :is(.sgp-ak-pk small, .sgp-ak-dp small, .sgp-ak-id small) { color: var(--text-muted); }
    html.sgp-html #eguru-app.dark-theme > .sgp-bantu.sgp-ak-p .sgp-ak-dp[data-ak="padam"] b { color: #FCA5A5; }
}

/* ---------- 5 Nov (72.29 mockup ?jenis=failmeja): panel kanan FAIL MEJA (Portal Pentadbiran) — Perlu tindakan + DISEGERAK Google Drive (lib/sg_perisian.js lukisFm) ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-b-k { padding-bottom: 8px; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: #FEF3C7; color: #92400E; display: inline-grid; place-items: center; font: 800 11.5px/1 Inter, system-ui, sans-serif; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-b-isi { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 14px; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--text, #1F2937); text-align: left; cursor: pointer; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r:hover { background: #F7FEF9; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r:focus-visible { outline: 3px solid #047857; outline-offset: -2px; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r > span:last-child { flex: 1; min-width: 0; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r b { display: block; font: 700 13px/1.35 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r small { display: block; color: #6B7280; font: 400 11.5px/1.35 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-ik { width: 30px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: #E5E7EB; color: #4B5563; font: 800 13px/1 Inter, system-ui, sans-serif; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-ik.lewat { background: #FEF3C7; color: #B45309; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-kt { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #0F766E; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-kt svg { width: 17px; height: 17px; fill: #fff; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-kos { margin: 4px 6px; color: #4B5563; font: 400 12.5px/1.5 Inter, system-ui, sans-serif; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-not { margin: 0 6px 6px; color: #6B7280; font: 400 12px/1.5 Inter, system-ui, sans-serif; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-mu-h4 { margin: 12px 6px 2px !important; font: 800 10.5px/1.3 Inter, system-ui, sans-serif !important; letter-spacing: 1.2px; color: #6B7280 !important; }
    html.sgp-html #ptd-portal .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-b-auto { margin-top: 6px; }
    /* gelap */
    :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r { color: var(--text, #E5E7EB); }
    :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-r:hover { background: rgba(5,150,105,.12); }
    :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p :is(.sgp-fm-r small, .sgp-fm-kos, .sgp-fm-not, .sgp-mu-h4) { color: var(--text-muted, #9CA3AF) !important; }
    :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-ik { background: #374151; color: #E5E7EB; }
    :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-ik.lewat, :is(html.sgp-html #eguru-app.dark-theme #ptd-portal, html.sgp-html[data-theme="dark"] #ptd-portal) .ptd-badan > .sgp-bantu.sgp-fm-p .sgp-fm-n { background: rgba(245,158,11,.18); color: #FCD34D; }
}

/* ---------- 5 Nov (pemilik: kepala Akaun "di kiri sangat ... nampak sempit"): ruang kandungan = mockup .isi-k (padding 18px 22px 24px) bagi SEMUA
   halaman Portal Guru di laptop — dahulu hanya Utama; Akaun, RPH, RPT, Tools dll. 4px dari rel. Telefon/tablet potret tidak berubah. ---------- */
@media (min-width: 900px) and (orientation: landscape), (min-width: 1367px) {
    html.sgp-html body #eguru-app#eguru-app.sgp .main-content > .view:not(#view-home) { padding: 18px 22px 24px !important; }
    /* 5 Nov malam (pemilik: "Selaraskan gap untuk portal pentadbiran dan halaman-halaman lain seperti portal guru ... untuk semua halaman"):
       SATU nilai di laptop = mockup .isi-k 18px 22px 24px dari rel/menu — Portal Guru (bekas .main-content 4px dibuang; dahulu jumlah 26px),
       Portal Pentadbiran (main.ptd-isi 4px + #ptd-isi 0 = kandungan 3px dari rel), halaman awam main.kd-bekas (kedai.css/sg_perisian.css 18px 22px). */
    html.sgp-html body #eguru-app#eguru-app.sgp .main-content { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal main.ptd-isi { padding: 0 !important; }
    html.sgp-html body #ptd-portal#ptd-portal #ptd-isi { padding: 18px 22px 24px !important; box-sizing: border-box; }
    /* 5 Nov (pemilik: muat semula = sidebar asal dahulu & sidebar 'terpisah' daripada header): index.html menanda html.sgp-html + #eguru-app.sgp SEJAK
       lukisan pertama (laptop + sesi); bar menu = pemegang tempat statik .sgp-menu-dini sehingga #sgp-menu sebenar dibina JS (baris grid sama). */
    html.sgp-html #eguru-app.sgp > .sgp-menu-dini { grid-area: menu; display: flex; align-items: center; gap: 2px; height: var(--sgp-mb, 32px); padding: 0 8px; position: relative; z-index: 129;
        background: var(--card-bg, #fff); border-bottom: 1px solid var(--border, #E5E7EB); font: 500 13px/1 Inter, system-ui, sans-serif; color: var(--text, #1F2937); }
    html.sgp-html #eguru-app.sgp > .sgp-menu-dini > span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; }
    html.sgp-html #eguru-app.sgp:has(> #sgp-menu) > .sgp-menu-dini { display: none !important; }
}