/* =====================================================================
   SG APP — mod native app telefon & tablet potret (Bhg 72.1–72.9). Pasangan lib/sg_app.js.
   Portal Guru (#eguru-app), Portal Pentadbiran (#ptd-portal) & Portal Murid (murid.html, html.sgapp-murid).
   RUPA KEKAL: hanya peralihan, butang ‹ Kembali kepala dalam, kesan tekan & pemegang helaian. Laptop/landskap tidak disentuh.
   ===================================================================== */
.sgapp-balik { display: none; }
/* 72.4 bar tindakan (sg_app.js barTindakan): laptop/landskap = bekas lutsinar, susun atur asal kekal */
.sgapp-tindak { display: contents; }
.sgapp-tindak-nota { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    /* 72.2 kepala dalam: ‹ Kembali 36px menggantikan logo; tajuk = nama modul (sg_app.js) */
    /* sg_gaya.css memakai !important pada kepala — peraturan kepala dalam perlu menandinginya */
    html.sgapp-dalam #eguru-app > .topbar .topbar-logo { display: none !important; }
    /* 72.2: halaman dalam = paling banyak 2 butang ikon (Cari + Kebolehcapaian). Murid Anda & suis Guru|Pentadbiran kekal di Utama (akar). */
    html.sgapp-dalam #eguru-app > .topbar .hdr-murid, html.sgapp-dalam #eguru-app > .topbar .hdr-sw { display: none !important; }
    html.sgapp-dalam #eguru-app > .topbar .sgapp-balik,
    html.sgapp-ptd-dalam #ptd-portal .ptd-hdr .sgapp-balik,
    html.sgapp-murid.sgapp-dalam header.topbar .sgapp-balik {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 36px; height: 36px; margin-right: 2px; border: 0; border-radius: 11px; padding: 0; cursor: pointer;
        background: rgba(255, 255, 255, .16); color: #fff; -webkit-tap-highlight-color: transparent;
    }
    .sgapp-balik svg { width: 24px; height: 24px; fill: currentColor; }
    html.sgapp-dalam #eguru-app > .topbar .topbar-title, html.sgapp-dalam #eguru-app > .topbar .topbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 190px); }

    /* 72.2 (4 Nov 2026) kepala AKAR padat bila skrol > 8px (sg_app.js pantauPadat): logo 36 -> 30px + subjudul pudar, tajuk ke tengah.
       TINGGI KEKAL 62px — kepala di luar bekas skrol .main-content, jadi 62 -> 50px = kandungan melompat 12px (anjakan, Bhg 49/54). */
    #eguru-app > .topbar .topbar-logo, #eguru-app > .topbar .topbar-title, #eguru-app > .topbar .topbar-sub,
    #ptd-portal .ptd-hdr .topbar-logo, #ptd-portal .ptd-hdr .topbar-title, #ptd-portal .ptd-hdr .topbar-sub { transition: transform .2s ease, opacity .2s ease; }
    html.sgapp-padat:not(.sgapp-dalam) #eguru-app > .topbar .topbar-logo, html.sgapp-padat:not(.sgapp-ptd-dalam) #ptd-portal .ptd-hdr .topbar-logo { transform: scale(.833); }
    html.sgapp-padat:not(.sgapp-dalam) #eguru-app > .topbar .topbar-sub, html.sgapp-padat:not(.sgapp-ptd-dalam) #ptd-portal .ptd-hdr .topbar-sub { opacity: 0 !important; }   /* sg_gaya.css: .75 !important */
    html.sgapp-padat:not(.sgapp-dalam) #eguru-app > .topbar .topbar-title, html.sgapp-padat:not(.sgapp-ptd-dalam) #ptd-portal .ptd-hdr .topbar-title { transform: translateY(var(--sgapp-sub-h, 7px)); }

    /* Portal Pentadbiran: kepala dalam = ‹ + nama modul + Kebolehcapaian (Murid Anda & suis Guru|Pentadbiran di Utama portal) */
    html.sgapp-ptd-dalam #ptd-portal .ptd-hdr .ptd-lg, html.sgapp-ptd-dalam #ptd-portal .ptd-hdr .ptd-kanan { display: none !important; }
    /* butang "Kembali" dalam kad tool dipinjam = sama dengan ‹ di kepala (satu butang kembali sahaja, Hick's Law) */
    html.sgapp-ptd-dalam #ptd-portal .ptd-tool-kepala > .btn-outline { display: none !important; }

    /* Portal Murid: kepala dalam = ‹ + nama halaman + Kebolehcapaian (nama murid & Keluar di Utama) */
    html.sgapp-murid.sgapp-dalam header.topbar .topbar-logo, html.sgapp-murid.sgapp-dalam #topbar-murid, html.sgapp-murid.sgapp-dalam #btn-keluar { display: none !important; }

    /* Halaman awam (kepala .kd-kepala / header.atas): halaman dalam = ‹ Kembali + nama bahagian (ikon logo disorok, teks kekal) */
    html.sgapp-awam.sgapp-dalam header.kd-kepala .sgapp-balik, html.sgapp-awam.sgapp-dalam header.atas .sgapp-balik {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 34px; height: 34px; border: 0; border-radius: 10px; padding: 0; cursor: pointer;
        background: rgba(255, 255, 255, .15); color: #fff; -webkit-tap-highlight-color: transparent;
    }
    html.sgapp-awam.sgapp-dalam header.kd-kepala .kd-logo-ikon, html.sgapp-awam.sgapp-dalam header.atas .atas-logo { display: none !important; }
    /* bekas kepala = space-between: logo ditolak rapat ke ‹, butang kanan kekal di kanan */
    html.sgapp-awam.sgapp-dalam header.kd-kepala .kd-logo, html.sgapp-awam.sgapp-dalam header.atas .atas-jenama { margin-right: auto; min-width: 0; }
    html.sgapp-awam .sg-kp-nav a, html.sgapp-awam .sg-nav-bawah a { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

    /* 72.3 nav bawah maksimum 5: Int & Pel dalam helaian Taksir (sg_app.js navLima) */
    html.sgapp #eguru-app .bottom-nav #navbtn-intpel { display: none !important; }
    #grp-sheet-isi .sgapp-sub { grid-column: 1 / -1; margin: 10px 14px 2px; font-size: .7em; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted, #4B5563); }

    /* 72.1 peralihan: tolak dari kanan / kembali / pudar */
    .sgapp-tolak { animation: sgapp-tolak .32s cubic-bezier(.2, .8, .2, 1) both; }
    .sgapp-kembali { animation: sgapp-kembali .32s cubic-bezier(.2, .8, .2, 1) both; }
    .sgapp-pudar { animation: sgapp-pudar .16s ease-out both; }
    .sgapp-seret { will-change: transform; box-shadow: -8px 0 24px rgba(0, 0, 0, .18); }

    /* 72.8 sentuhan: kesan tekan <= 120 ms; tiada sorotan biru; kerangka tidak terpilih */
    #eguru-app .bottom-nav, #eguru-app > .topbar, #eguru-app .nav-item, .sgapp-balik, #eguru-app .modal-handle,
    #ptd-portal .ptd-hdr, #ptd-portal .ptd-bawah, html.sgapp-murid header.topbar, html.sgapp-murid .nav-i { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    #eguru-app .nav-item, #eguru-app .icon-btn, .sgapp-balik, #ptd-portal .ptd-bw, html.sgapp-murid .nav-i { -webkit-tap-highlight-color: transparent; }
    #eguru-app .nav-item:active .nav-icon-wrap, #eguru-app .icon-btn:active, .sgapp-balik:active, #ptd-portal .ptd-bw:active > i { transform: scale(.96); transition: transform .12s; }

    /* 72.4 bar tindakan bawah: melekat di dasar helaian editor; sekunder garis kiri, utama berisi kanan, butang >= 48px */
    #eguru-app .sgapp-tindak {
        /* helaian editor: padding bawah 34px -> bottom negatif supaya bar rapat ke dasar skrin; penuh lebar helaian (--modal-pad-x) */
        position: sticky; bottom: -34px; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch;
        margin: 10px calc(-1 * var(--modal-pad-x, 8px)) 0; padding: 8px var(--modal-pad-x, 8px) calc(10px + env(safe-area-inset-bottom));
        background: var(--card-bg, #fff); border-top: 1px solid var(--border, #E5E7EB); box-shadow: 0 -6px 16px rgba(0, 0, 0, .06);
    }
    #eguru-app .sgapp-tindak > .btn { margin: 0 !important; min-height: 48px; grid-row: 2; }
    #eguru-app .sgapp-tindak > .btn-success { grid-column: 2; width: 100%; }
    #eguru-app .sgapp-tindak > .btn-outline { grid-column: 1; }
    #eguru-app .sgapp-tindak > .btn-success:only-of-type { grid-column: 1 / -1; }
    #eguru-app .sgapp-tindak-nota { display: block; grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 11px; line-height: 1.3; text-align: center; color: var(--text-muted, #4B5563); }

    /* 72.7 rangka: pemegang tempat "Memuat…" > 300 ms (sg_app.js pantauRangka) = blok hijau pucat berkilau 1.1 s DI ATAS kotak sedia ada.
       Saiz kotak TIDAK diubah (padding/tinggi asal kekal) -> tiada anjakan susun atur (CLS, Bhg 49/54). Teks kekal untuk pembaca skrin. */
    .sg-rangka { position: relative; color: transparent !important; -webkit-user-select: none; user-select: none; }
    .sg-rangka::after {
        content: ""; position: absolute; inset: 0; min-height: 14px; border-radius: 10px; pointer-events: none;
        background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--card-bg, var(--card, #fff)) 65%, transparent) 50%, transparent 80%),
            color-mix(in srgb, var(--primary, #059669) 12%, transparent);   /* ikut tema (cerah/gelap) */
        background-size: 300% 100%, auto; animation: sgapp-kilau 1.1s linear infinite;
    }

    /* 72.5 helaian: pemegang 40x5 boleh diseret */
    #eguru-app .modal-overlay > .modal-sheet > .modal-handle { width: 40px; height: 5px; touch-action: none; }

    /* 72.5 tarik segar (Utama Portal Guru): bulatan putih 40px + ikon hijau berpusing, di bawah kepala */
    #sgapp-segar {
        position: fixed; z-index: 9000; left: 50%; top: calc(var(--topbar-h, 62px) + env(safe-area-inset-top)); width: 40px; height: 40px; border-radius: 50%;
        display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); opacity: 0; transform: translate(-50%, -50px); pointer-events: none;
    }
    #sgapp-segar svg { width: 24px; height: 24px; fill: #047857; }
    #sgapp-segar.jalan svg { animation: sgapp-pusing .8s linear infinite; }
}
@keyframes sgapp-pusing { to { transform: rotate(360deg); } }
/* Portal Murid 72.3: nav bawah (<= 899px) maksimum 5 — Ranking = tab dalam Jelajah (sidebar landskap/laptop kekal semua item) */
@media (max-width: 640px), (max-width: 899px) and (orientation: portrait) {
    html.sgapp-murid .nav-i[data-v="juara"] { display: none !important; }
}
@media (min-width: 641px) and (orientation: landscape), (min-width: 1367px) {
    .sgapp-jl-rk, .sgapp-jl-salin { display: none !important; }
}
@keyframes sgapp-tolak { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sgapp-kembali { from { transform: translateX(-28%); filter: brightness(.88); } to { transform: none; filter: none; } }
@keyframes sgapp-pudar { from { opacity: 0; } to { opacity: 1; } }
@keyframes sgapp-kilau { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .sgapp-tolak, .sgapp-kembali, .sgapp-pudar, .sg-rangka::after { animation: none; }
    #eguru-app > .topbar .topbar-logo, #eguru-app > .topbar .topbar-title, #eguru-app > .topbar .topbar-sub,
    #ptd-portal .ptd-hdr .topbar-logo, #ptd-portal .ptd-hdr .topbar-title, #ptd-portal .ptd-hdr .topbar-sub { transition: none; }
}
/* 72.9 app dipasang (PWA/TWA): tiada pantulan pelayar */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* 3 Nov 2026 (Bhg 72.12, B3): Kandungan bacaan = helaian bawah seragam (bar kepala + X 34px) daripada butang di kepala — telefon & potret sahaja */
.sgapp-toc-b { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    .sgapp-toc-b { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 0; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; }
    .sgapp-toc-b svg { width: 22px; height: 22px; fill: currentColor; }
    .sgapp-toc-latar { position: fixed; inset: 0; z-index: 130000; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; animation: sgapp-pudar .18s ease; }
    .sgapp-toc-latar .sgapp-toc { width: 100%; max-height: 82vh; overflow-y: auto; background: #fff; color: #1F2937; border-radius: 20px 20px 0 0; padding: 8px 4px calc(18px + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 30px rgba(0,0,0,.2); font: 400 15px/1.45 Inter, system-ui, sans-serif; }
    .sgapp-toc-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 10px 14px; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; background: inherit; }
    .sgapp-toc-k h2 { margin: 0; font-size: 17px; font-weight: 800; }
    .sgapp-toc-k .kd-sheet-x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #F3F4F6; cursor: pointer; }
    .sgapp-toc-k .kd-sheet-x svg { width: 18px; height: 18px; fill: #4B5563; }
    .sgapp-toc-s { margin: 6px 0 0; padding: 0 14px 0 34px; }
    .sgapp-toc-s li { padding: 2px 0; }
    .sgapp-toc-s a { display: block; min-height: 44px; padding: 10px 4px; color: #065F46; font-weight: 600; text-decoration: none; text-align: left; }
    .sgapp-toc-s a:focus-visible { outline: 3px solid #047857; outline-offset: -3px; border-radius: 8px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sgapp-toc-latar .sgapp-toc { background: #16231D; color: #E8F1EC; } :root:not([data-theme="light"]) .sgapp-toc-s a { color: #6EE7B7; } }
:root[data-theme="dark"] .sgapp-toc-latar .sgapp-toc { background: #16231D; color: #E8F1EC; }
:root[data-theme="dark"] .sgapp-toc-s a { color: #6EE7B7; }

/* 3 Nov 2026 (Bhg 72.12, B3): butiran item — tindakan utama di bar bawah (landing game "Main sekarang"); nav bawah disorok semasa bar dipapar */
.sgapp-item-bar { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    .sgapp-item-bar { display: flex; align-items: center; gap: 12px; position: fixed; left: 4px; right: 4px; bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 60; padding: 10px 10px 10px 16px;
        background: #fff; color: #1F2937; border: 1px solid #E5E7EB; border-radius: 18px; box-shadow: 0 -6px 24px rgba(0,0,0,.14); transform: translateY(140%); transition: transform .22s ease; }
    .sgapp-item-bar.on { transform: none; }
    .sgapp-ib-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .sgapp-ib-t small { font: 700 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .4px; color: #047857; text-transform: uppercase; }
    .sgapp-ib-t b { font: 800 15px/1.25 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sgapp-ib-b { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px;
        background: linear-gradient(135deg, #059669, #047857); color: #fff; font: 800 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
    .sgapp-ib-b svg { width: 20px; height: 20px; fill: currentColor; }
    html.sgapp-item-on .sg-nav-bawah { transform: translateY(160%); transition: transform .22s ease; }
}
@media (prefers-reduced-motion: reduce) { .sgapp-item-bar, html.sgapp-item-on .sg-nav-bawah { transition: none; } }
:root[data-theme="dark"] .sgapp-item-bar { background: #16231D; color: #E8F1EC; border-color: #2C3D35; }

/* 72.14 TAB GESER (sg_app.js tandaGeser): rupa tab KEKAL — hanya tatal mendatar bila tidak muat + melekat di bawah kepala */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    .sgapp-geser { overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .sgapp-geser::-webkit-scrollbar { display: none; }
    .sgapp-geser > * { scroll-snap-align: center; }
    /* top = -(padding atas bekas skrol): bar rapat ke tepi atas skrol, tiada jalur kandungan 4px kelihatan di atasnya (sg_app.js --sgapp-pad) */
    .sgapp-geser-lekat { position: sticky !important; top: calc(-1 * var(--sgapp-pad, 0px)); z-index: 6; }
}

/* 72.15 LALUAN (sg_app.js laluanLukis/laluanHelai): aras 3+ — 2 aras terakhir kecil di atas tajuk kepala; helaian Laluan bernombor */
.sgapp-laluan { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app .sgapp-laluan { display: block; max-width: 100%; margin: 0 0 1px; padding: 0; border: 0; background: none; color: inherit; opacity: .85;
        font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    #eguru-app .sgapp-laluan:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
    #eguru-app .sgapp-ada-laluan > .topbar-sub { display: none !important; }
    #eguru-app .sgapp-laluan-sen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    #eguru-app .sgapp-laluan-sen button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--border);
        border-radius: 12px; background: var(--card-bg); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
    #eguru-app .sgapp-laluan-sen button[disabled] { border-color: var(--primary); background: var(--bg); cursor: default; opacity: 1; }
    #eguru-app .sgapp-laluan-sen small { display: block; font-weight: 500; font-size: 12px; color: var(--text-muted); }
    /* nombor aras = nombor kuning bar langkah Bhg 56 */
    #eguru-app .sgapp-laluan-n { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FBBF24; color: #1F2937; font-size: 13px; font-weight: 800; }
}

/* 72.16 SUB-MENU DALAM MENU (js/sg_portal_pentadbir.js ptdPopBuka): helaian "Lagi" panjang = carian + akordion satu terbuka, anak berinden */
#eguru-app #ptd-portal .ptd-lagi-q { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0 0 8px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
#eguru-app #ptd-portal .ptd-lagi-k { margin: 0 0 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); overflow: hidden; }
#eguru-app #ptd-portal .ptd-lagi-k[hidden] { display: none; }
#eguru-app #ptd-portal .ptd-lagi-k > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; cursor: pointer; list-style: none; font-weight: 800; font-size: 14.5px; color: var(--text); }
#eguru-app #ptd-portal .ptd-lagi-k > summary::-webkit-details-marker { display: none; }
#eguru-app #ptd-portal .ptd-lagi-k > summary > span:first-child { flex: 1; min-width: 0; }
#eguru-app #ptd-portal .ptd-lagi-k > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .16s; }
#eguru-app #ptd-portal .ptd-lagi-k[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
#eguru-app #ptd-portal .ptd-lagi-n { flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--bg); color: var(--text-muted); font-size: 12px; font-weight: 700; text-align: center; }
#eguru-app #ptd-portal .ptd-lagi-isi { padding: 0 6px 6px 14px; border-top: 1px solid var(--border); }   /* anak berinden */
#eguru-app #ptd-portal .ptd-lagi-isi .lagi-item[hidden], #eguru-app #ptd-portal .ptd-lagi-isi .ptd-sub-bd[hidden] { display: none; }
#eguru-app #ptd-portal .ptd-lagi-tiada { margin: 8px 4px; color: var(--text-muted); }

/* 72.28 PEMBACA UNIT SK (sg_app.js unitPasang): halaman unit sebenar dipandu app — kepala ‹ + laluan + tajuk unit, bar Sebelum/Seterusnya */
.sgapp-unit-tt, .sgapp-unit-bar { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-unit header.kd-kepala .kd-logo { display: none !important; }
    html:is(.sgapp-unit, .sgapp-butiran) .sgapp-unit-tt { display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; min-width: 0; color: #fff; }   /* 5 Nov: asas 0 = tidak membungkus kepala */
    /* 5 Nov 2026 (72.29 mockup): halaman unit & BUTIRAN = ‹ + tajuk + ikon; Buka App disorok; kepala SATU baris (dahulu tajuk unit membungkus = 3 baris, 129px) */
    html:is(.sgapp-unit, .sgapp-butiran) header :is(.kd-nav-app, .atas-app) { display: none !important; }
    html:is(.sgapp-unit, .sgapp-produk) header.kd-kepala .kd-kepala-isi { flex-wrap: nowrap !important; padding-bottom: 0 !important; }
    html.sgapp-butiran header.kd-kepala .kd-logo, html.sgapp-butiran header.atas .atas-jenama { display: none !important; }
    html.sgapp-produk header.kd-kepala .kd-cari { display: none !important; }
    html.sgapp-butiran .sgapp-tt b { font-size: 17px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgapp-butiran .sgapp-tt small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; line-height: 1.2; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgapp-butiran header.atas .bungkus { display: flex; align-items: center; gap: 8px; }
    .sgapp-kongsi.sgapp-disalin { background: rgba(255,255,255,.32); }
    html:is(.sgapp-butiran, .sgapp-tab) :is(.kd-serbuk, nav.breadcrumb) { display: none !important; }   /* tajuk kini di kepala; serbuk kekal dalam HTML (SEO) */
    .sgapp-unit-tt .sgapp-laluan { display: block; max-width: 100%; margin: 0 0 1px; padding: 0; border: 0; background: none; color: inherit; opacity: .85; font: inherit; font-size: 11px;
        font-weight: 600; line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .sgapp-unit-tt .sgapp-laluan:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
    .sgapp-unit-tt b { font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* app memandu: serbuk roti, nav bawah laman & nav unit sebaris disorok (kekal dalam HTML untuk SEO) */
    html.sgapp-unit .kd-serbuk, html.sgapp-unit .sg-nav-bawah, html.sgapp-unit .ni-unit-hal .ni-u-nav { display: none !important; }
    html.sgapp-unit .sgapp-unit-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border); background: var(--card); box-shadow: 0 -2px 12px rgba(0,0,0,.06); }   /* 5 Nov: bar-aksi mockup selebar skrin */
    .sgapp-unit-bar :is(a, .sgapp-unit-sb) { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-radius: 12px; font-weight: 800; text-decoration: none; }
    .sgapp-unit-bar svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
    .sgapp-unit-bar .sgapp-unit-sb { flex: 1 1 0; padding: 0 12px; border: 1.5px solid #059669; background: var(--card); color: var(--primary-text, #047857); }   /* 5 Nov: mockup [Sebelum] garis */
    .sgapp-unit-bar .sgapp-unit-sb[aria-disabled="true"] { border-color: var(--border); color: var(--text-light, #9CA3AF); }
    .sgapp-unit-bar .sgapp-unit-ss { flex: 1.15 1 0; padding: 0 8px 0 14px; background: linear-gradient(135deg, #059669, #047857); color: #fff; }
    .sgapp-unit-bar > span { flex: 0 0 0; }
    html.sgapp-unit body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .sgapp-unit-sub { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
    .sgapp-unit-sen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
    .sgapp-unit-sen a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: var(--text); text-decoration: none; }
    .sgapp-unit-sen a[aria-current] { background: var(--primary-bg); color: var(--primary-text); font-weight: 700; }
    .sgapp-unit-sen b { flex: none; color: var(--primary-text); }
}

/* 72.29 LOG MASUK TELEFON = halaman penuh mockup (sg_app.js masukPasang): kepala ‹ + tajuk, logo besar, "Selamat kembali", Google & DELIMa dahulu,
   "atau", borang, bar bawah [Log masuk] + "Belum ada akaun? Daftar". #auth-modal & semua fungsinya kekal; laptop/landskap = helaian asal. */
.sgm-kepala, .sgm-wira, .sgm-bawah { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app #auth-modal.sgapp-masuk { flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; padding: 0; background: var(--bg);
        backdrop-filter: none; -webkit-backdrop-filter: none; animation: sgmMasuk .26s cubic-bezier(.2, .8, .2, 1); }
    @keyframes sgmMasuk { from { transform: translateX(40px); opacity: 0; } }
    #auth-modal.sgapp-masuk .sgm-kepala { display: flex; flex: none; align-items: center; gap: 8px; min-height: 62px; padding: env(safe-area-inset-top) 12px 0;
        background: linear-gradient(135deg, #047857 0%, #064E3B 100%); color: #fff; box-shadow: 0 2px 12px rgba(5, 150, 105, .25); }
    .sgm-balik { all: unset; box-sizing: border-box; flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .15); cursor: pointer; }
    .sgm-balik svg { width: 24px; height: 24px; fill: #fff; }
    .sgm-balik:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .sgm-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .sgm-tt b { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sgm-tt small { font-size: 11.5px; font-weight: 600; opacity: .8; }
    #eguru-app #auth-modal.sgapp-masuk > #auth-modal-sheet { flex: 1 1 auto; min-height: 0; width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important;
        border-radius: 0 !important; box-shadow: none; background: transparent; animation: none; overflow-y: auto; gap: 10px; text-align: left !important;
        padding: 14px max(16px, calc((100% - 480px) / 2)) 22px !important; }
    #auth-modal.sgapp-masuk #auth-modal-sheet > :is(.modal-handle, .legal-close, .modal-logo, .modal-kepala, .modal-tagline, .auth-tabs) { display: none !important; }
    #auth-modal.sgapp-masuk .sgm-wira { display: flex; order: 1; flex-direction: column; align-items: center; text-align: center; gap: 0; }
    .sgm-logo { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 6px 0 12px; background: linear-gradient(135deg, #047857 0%, #064E3B 100%);
        box-shadow: 0 8px 22px rgba(5, 150, 105, .35); }
    .sgm-logo svg { width: 40px; height: 40px; fill: #fff; }
    .sgm-wira h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--text); }
    #eguru-app .sgm-wira .sgm-lead { margin: 0 0 8px; font-size: 15px !important; line-height: 1.55; color: var(--text-muted); text-align: center !important; }
    #eguru-app #auth-modal.sgapp-masuk #auth-modal-sub { order: 2; display: none; margin: 0; text-align: center !important; font-size: 13.5px; }
    #eguru-app #auth-modal.sgapp-masuk.sgm-sub-ada #auth-modal-sub { display: block; }
    #auth-modal.sgapp-masuk #auth-error { order: 3; margin: 0; }
    #eguru-app #auth-modal.sgapp-masuk .btn-google { order: 4; margin: 0 !important; min-height: 50px; border: 1.5px solid var(--border) !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 700; }
    #eguru-app #auth-modal.sgapp-masuk .btn-google.btn-delima { order: 5; border-color: #059669 !important; color: var(--primary-text, #047857) !important; }
    #auth-modal.sgapp-masuk .btn-delima .ikon-delima { display: none; }
    #eguru-app #auth-modal.sgapp-masuk .auth-or { order: 6; margin: 2px 0; text-transform: lowercase; letter-spacing: 0; font-weight: 500; }
    #auth-modal.sgapp-masuk :is(#auth-login-form, #auth-register-form) { order: 7; }
    #auth-modal.sgapp-masuk form .form-group { margin-bottom: 14px; }
    #eguru-app #auth-modal.sgapp-masuk form .form-control { background: var(--card-bg) !important; border-radius: 12px !important; min-height: 50px; font-size: 16px !important; }
    #eguru-app #auth-modal.sgapp-masuk #auth-login-form .pw-wrap + div { text-align: right !important; margin-top: 12px !important; }
    #eguru-app #auth-modal.sgapp-masuk #auth-login-form .pw-wrap + div a { font-size: 14px !important; font-weight: 800 !important; text-decoration: none; color: var(--primary-text, #047857) !important; }
    #auth-modal.sgapp-masuk form > button[type="submit"] { display: none !important; }   /* digantikan bar bawah; Enter masih menghantar */
    #auth-modal.sgapp-masuk .help-hint { order: 8; margin: 4px 0 0 !important; font-size: 12px; line-height: 1.5; }
    #auth-modal.sgapp-masuk .auth-setuju { order: 9; margin-top: 0 !important; }
    #auth-modal.sgapp-masuk .sgm-bawah { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px max(12px, calc((100% - 480px) / 2)) calc(8px + env(safe-area-inset-bottom));
        background: var(--card-bg); border-top: 1px solid var(--border); }
    .sgm-utama { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; cursor: pointer;
        background: linear-gradient(135deg, #059669, #047857); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 3px 10px rgba(5, 150, 105, .3); }
    .sgm-tukar { all: unset; box-sizing: border-box; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--text-muted); font-size: 14px; }
    .sgm-tukar b { color: var(--primary-text, #047857); }
    :is(.sgm-utama, .sgm-tukar):focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { #eguru-app #auth-modal.sgapp-masuk { animation: none; } }

/* 72.29 SUBJEK NOTA telefon (sg_app.js notaSubjekPasang; mockup ?app=nota&mula=semua/subjek): kad "Kemajuan anda", label bidang, baris unit berstatus.
   Pemain unit (#u=): kepala = unit, nav bawah disorok. Lipatan SP / Untuk guru kekal dalam HTML (SEO) & di halaman unit penuh. */
.sgapp-kj, .sgapp-kj-kp { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-nsubjek #ni-senarai > .ni-hero { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-top: 1px solid var(--border);
        border-radius: 14px; background: var(--card); box-shadow: none; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero > :is(.ni-subjek, p, .ni-meta) { display: none !important; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero > h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    html.sgapp-nsubjek .sgapp-kj { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; order: 0; }
    .sgapp-kj b { flex: 1 1 auto; font-size: 15px; font-weight: 800; color: var(--text); }
    .sgapp-kj span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
    .sgapp-kj svg { width: 20px; height: 20px; fill: var(--text-muted); flex: none; transition: transform .2s; }
    .sgapp-kj[aria-expanded="true"] svg { transform: rotate(180deg); }
    .sgapp-kj:focus-visible { outline: 3px solid var(--primary-bd, #059669); outline-offset: 3px; border-radius: 8px; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero > .ni-hero-aksi { order: 1; display: block; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero .ni-maju { display: block; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero .ni-maju-bar { height: 8px; border: 0; background: var(--border); margin: 2px 0 8px; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero .ni-maju small { display: inline; font-size: 13px; font-weight: 500; color: var(--text-muted); }
    html.sgapp-nsubjek .sgapp-kj-kp { display: inline; font-size: 13px; color: var(--text-muted); }
    html.sgapp-nsubjek #ni-senarai > .ni-hero:not(.sgapp-kj-buka) :is(.ni-gam, .ni-tindak) { display: none !important; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero.sgapp-kj-buka .ni-gam { order: 2; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero.sgapp-kj-buka .ni-tindak { margin-top: 10px; }
    html.sgapp-nsubjek #ni-senarai > .ni-hero > #ni-hero-simpan { order: 3; }
    /* bidang = label huruf besar; unit = baris dalam satu kumpulan */
    html.sgapp-nsubjek #ni-senarai .ni-tajuk-blok { margin: 0 0 4px; }
    html.sgapp-nsubjek #ni-senarai .ni-tajuk-blok > h2 { margin: 16px 12px 6px; padding: 0; border: 0; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-light, #6B7280); }
    html.sgapp-nsubjek #ni-senarai .ni-tajuk-blok > h2::before { content: none; display: none; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-grid { display: block; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
    html.sgapp-nsubjek #ni-senarai .ni-unit { position: relative; display: block; border: 0; border-radius: 0; background: none; box-shadow: none; }
    html.sgapp-nsubjek #ni-senarai .ni-unit + .ni-unit::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--border); }
    html.sgapp-nsubjek #ni-senarai .ni-unit > details { display: none; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-buka { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 10px 10px 12px; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-buka::after { content: ''; flex: none; width: 20px; height: 20px; background: currentColor; color: #9CA3AF;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") center / contain no-repeat; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-buka:active { background: var(--primary-bg, #ECFDF5); }
    html.sgapp-nsubjek #ni-senarai .ni-unit-kod { flex: none; width: 40px; height: 40px; border: 0 !important; border-radius: 12px; font-size: 12.5px; color: #fff !important; background: #9CA3AF !important; box-shadow: none !important; }
    html.sgapp-nsubjek #ni-senarai .ni-unit.siap .ni-unit-kod { background: #047857 !important; }
    html.sgapp-nsubjek #ni-senarai .ni-unit.sedang .ni-unit-kod { background: #D97706 !important; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-t { flex: 1 1 auto; min-width: 0; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-tt { font-size: 15px; font-weight: 600; line-height: 1.3; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-t small { font-size: 12.5px; font-weight: 500; }
    html.sgapp-nsubjek #ni-senarai .ni-unit:not(.siap):not(.sedang) .ni-unit-st { display: none; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-st { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
    html.sgapp-nsubjek #ni-senarai .ni-unit.siap .ni-unit-st { background: #D1FAE5; color: #065F46; }
    html.sgapp-nsubjek #ni-senarai .ni-unit.sedang .ni-unit-st { background: #FEF3C7; color: #92400E; }
    html.sgapp-nsubjek #ni-senarai .ni-unit-st svg { width: 12px; height: 12px; }
    /* pemain unit: nav bawah disorok (mockup unit tanpa nav), butang tindakan turun ke dasar */
    html.sgapp-npemain .sg-nav-bawah { display: none !important; }
    html.sgapp-npemain .ni-p-kaki { bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
    html.sgapp-npemain body { padding-bottom: 0; }
    /* pemain: kad hero unit berulang dengan kepala (‹ = Semua unit, tajuk & kod SK di kepala) — kekal jika kombo latihan aktif */
    html.sgapp-npemain #ni-pemain > .ni-p-bar:not(:has(#ni-combo:not([hidden]))) { display: none; }
    html.sgapp-npemain #ni-pemain > .ni-p-bar :is(.ni-kembali, .ni-p-kod, .ni-p-t) { display: none; }
    /* langkah unit = tab blok mockup (Belajar | Ingat | Latih ...), langkah berkunci kekal dikunci (turutan belajar, Bhg 56) */
    html.sgapp-npemain #ni-lgk .lgk-bar { display: flex; gap: 6px; padding: 5px; margin: 0; overflow: visible; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
    html.sgapp-npemain #ni-lgk .lgk-t { flex: 1 1 0; min-width: 0; min-height: 40px; margin: 0; padding: 8px 2px; justify-content: center; border: 0; border-radius: 10px; background: #F3F4F6; color: #4B5563; box-shadow: none; }
    html.sgapp-npemain #ni-lgk .lgk-t::before, html.sgapp-npemain #ni-lgk .lgk-t::after { display: none; }
    html.sgapp-npemain #ni-lgk .lgk-t .lgk-no { display: none; }
    html.sgapp-npemain #ni-lgk .lgk-t .lgk-n { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sgapp-npemain #ni-lgk .lgk-t .lgk-penuh { display: inline; }
    html.sgapp-npemain #ni-lgk .lgk-t .lgk-pendek { display: none; }
    html.sgapp-npemain #ni-lgk .lgk-t.on { background: linear-gradient(135deg, #059669, #047857); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }
    html.sgapp-npemain #ni-lgk .lgk-t.siap { color: #047857; background: #ECFDF5; }
    html.sgapp-npemain #ni-lgk .lgk-t:disabled { opacity: .55; }
    /* tindakan langkah (Saya faham / Ke Ingat / Soalan seterusnya) = bar bawah selebar skrin (mockup bar-aksi) */
    html.sgapp-npemain .ni-p-kaki:not(:empty) { left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none; gap: 10px; flex-wrap: nowrap; justify-content: stretch;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--border); pointer-events: auto; }
    html.sgapp-npemain .ni-p-kaki:not(:empty) > * { flex: 1 1 0; min-height: 48px; justify-content: center; border-radius: 12px; box-shadow: none !important; }
    html.sgapp-npemain #ni-pemain { padding-bottom: 84px; }
}

/* 72.29 HALAMAN UNIT PENUH telefon (mockup ?app=nota&mula=semua/subjek/unit): tab blok Belajar | Ingat | Latih (sg_app.js unitPasang), tajuk di kepala
   (H1 kekal untuk SEO, disorok visual), butang hero digantikan tab + bar bawah + helaian Kandungan. Laptop tidak berubah. */
.sgapp-utab { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-unit .ni-u-artikel > .ni-hero { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 0; border: 0; background: none; box-shadow: none; }
    html.sgapp-unit .ni-u-artikel > .ni-hero > :is(.ni-subjek, .ni-tindak) { display: none !important; }
    html.sgapp-unit .ni-u-artikel > .ni-hero > h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    html.sgapp-unit .ni-u-artikel > .ni-hero > .ni-meta { margin: 0 6px; }
    html.sgapp-unit .sgapp-utab { display: flex; gap: 6px; padding: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
    .sgapp-utab a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; background: #F3F4F6; color: #4B5563; font-weight: 700; font-size: 14px; text-decoration: none; }
    .sgapp-utab a[aria-current] { background: linear-gradient(135deg, #059669, #047857); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }
    .sgapp-utab a:focus-visible { outline: 3px solid var(--primary, #059669); outline-offset: 2px; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sgapp-utab a:not([aria-current]) { background: rgba(255, 255, 255, .08); color: #CBD5E1; } }
:root[data-theme="dark"] .sgapp-utab a:not([aria-current]) { background: rgba(255, 255, 255, .08); color: #CBD5E1; }

/* 72.29 PRODUK KEDAI telefon (mockup ?app=kedai&mula=kedai/produk; sg_app.js produkGaleri): galeri leret + titik (gambar kecil disorok — leret
   menggantikannya), harga = pil, varian = label "PILIH ..." huruf besar + cip bulat, butang Beli melebar di bar bawah. Laptop tidak berubah. */
.sgapp-titik { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-produk .kd-galeri .kd-gal-kecil { display: none !important; }
    html.sgapp-produk .sgapp-titik { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
    .sgapp-titik i { width: 7px; height: 7px; border-radius: 4px; background: #D1D5DB; transition: width .2s, background .2s; }
    .sgapp-titik i.on { width: 20px; background: #059669; }
    html.sgapp-produk #kd-harga { display: inline-block; width: auto; max-width: 100%; margin: 8px 0 4px; padding: 8px 14px; border-radius: 12px; font-size: 22px; }
    html.sgapp-produk .kd-var legend { margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-light, #6B7280); }
    html.sgapp-produk .kd-var-cip { display: flex; flex-wrap: wrap; gap: 8px; }
    html.sgapp-produk .kd-cip-var span { border-radius: 999px; font-weight: 700; padding: 8px 16px; }
    html.sgapp-produk .kd-cip-var input:checked + span { border-color: #059669; box-shadow: none; }
    html.sgapp-produk .kd-sku { font-size: 11.5px; }
    html.sgapp-produk .kd-beli-bar { gap: 14px; }
    html.sgapp-produk .kd-beli-bar #kd-btn-beli { flex: 1 1 auto; min-height: 50px; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 3px 10px rgba(5, 150, 105, .3); }
}

/* 72.29 BUTIRAN GAME telefon (mockup ?app=games&mula=games/game; sg_app.js gmButiran): kepala ‹ + nama + "Games · Tahun 1" + Kongsi, kulit bulat,
   ikon + tajuk sebaris, kad statistik, tag pil, huraian, [Main sekarang] jingga = bar bawah; nav bawah disorok. Laptop tidak berubah. */
.sgapp-gm-stat { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-gmb .gm-hero { display: block; margin: 8px 0 10px; }
    html.sgapp-gmb .gm-thumb { border-radius: 14px; box-shadow: none; }
    html.sgapp-gmb .gm-label { display: none; }
    html.sgapp-gmb .gm-main { width: 56px; height: 56px; right: 12px; bottom: 12px; }
    html.sgapp-gmb .gm-main svg { width: 32px; height: 32px; }
    html.sgapp-gmb .gm-hero-teks { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; align-items: center; padding: 12px 4px 0; }
    html.sgapp-gmb .gm-hero-ikon { grid-row: 1; grid-column: 1; width: 64px; height: 64px; margin: 0; border-radius: 24%; }
    html.sgapp-gmb .gm-hero-teks h1 { grid-row: 1; grid-column: 2; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
    html.sgapp-gmb .sgapp-gm-stat:not([hidden]) { grid-row: 2; grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 10px 0; border: 1px solid var(--border); border-radius: 14px; background: var(--card); text-align: center; }
    .sgapp-gm-stat > div + div { border-left: 1px solid var(--border); }
    .sgapp-gm-stat b { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
    .sgapp-gm-stat small { display: block; font-size: 11.5px; color: var(--text-muted); }
    html.sgapp-gmb .gm-hero-teks .gm-cip { grid-row: 3; grid-column: 1 / -1; margin: 0; gap: 8px; }
    html.sgapp-gmb .gm-hero-teks .gm-cip li { padding: 5px 12px; border: 1.5px solid #A7F3D0; background: #ECFDF5; font-size: 13px; }
    html.sgapp-gmb .gm-hero-teks .kd-sub { grid-row: 4; grid-column: 1 / -1; margin: 0; }
    html.sgapp-gmb .gm-hero-teks .gm-btn { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; justify-content: center; min-height: 52px; border-radius: 12px; font-size: 16px; }
    html.sgapp-gmb .sg-nav-bawah { display: none !important; }
    html.sgapp-gmb body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* 72.29 RANKING telefon (sg_app.js rankingPodium; mockup ?app=games|nota&mula=ranking): tempoh = tab blok, cip game satu baris leret, podium 3 teratas,
   baris senarai = petak nombor + nama + nilai. 3 baris teratas senarai disorok di telefon (ada dalam podium). Laptop tidak berubah. */
.sgapp-podium { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html.sgapp-rank .ni-penapis[data-tab="tempoh"] { display: flex; flex-wrap: nowrap; gap: 6px; margin: 8px 0; padding: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
    html.sgapp-rank .ni-penapis[data-tab="tempoh"] button { flex: 1 1 0; text-align: center; padding: 9px 4px; border: 0; border-radius: 10px; background: #F3F4F6; color: #4B5563; font-weight: 700; }
    html.sgapp-rank .ni-penapis[data-tab="tempoh"] button[aria-pressed="true"] { background: linear-gradient(135deg, #059669, #047857); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }
    html.sgapp-rank .ni-penapis[data-tab="game"] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    html.sgapp-rank .ni-penapis[data-tab="game"]::-webkit-scrollbar { display: none; }
    html.sgapp-rank .ni-penapis[data-tab="game"] button { flex: none; white-space: nowrap; }
    html.sgapp-rank .sgapp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 4px; list-style: none; margin: 12px 0 8px; padding: 0; }
    .sgapp-podium li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
    .sgapp-pd-no { font-weight: 800; font-size: 15px; color: #B45309; }
    .sgapp-pd-av { width: 52px; height: 52px; margin: 2px 0 6px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 0 0 3px #FBBF24; background: #059669; }
    .sgapp-pd1 .sgapp-pd-av { width: 64px; height: 64px; font-size: 19px; background: #B45309; box-shadow: 0 0 0 4px #FCD34D, 0 6px 16px rgba(180, 83, 9, .35); }
    .sgapp-pd3 .sgapp-pd-av { background: #7C3AED; }
    .sgapp-podium b { max-width: 100%; font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sgapp-podium small { max-width: 100%; margin-bottom: 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sgapp-podium i { display: block; width: 100%; border-radius: 10px 10px 0 0; height: 70px; background: linear-gradient(180deg, #E5E7EB, #9CA3AF); }
    .sgapp-pd1 i { height: 100px; background: linear-gradient(180deg, #FDE68A, #F59E0B); }
    .sgapp-pd3 i { height: 50px; background: linear-gradient(180deg, #FDBA74, #C2410C); }
    html.sgapp-rank ol.sgapp-podium-ada > li:nth-child(-n+3) { display: none; }
    html.sgapp-rank ol.ni-ak-senarai > li > em { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #9CA3AF; color: #fff; font-style: normal; font-weight: 800; }
    html.sgapp-rank ol.ni-ak-senarai > li.saya > em { background: #059669; }
}

/* 72.29 UTAMA Portal Guru telefon & tablet potret (lib/sg_perisian.js utamaTelSeksyen; mockup app.html?app=guru): selepas kad hero =
   "Tools saya" (6 ikon dalam kad) + "Hari ini" | "Pintasan" (2 lajur di tablet potret, 1 lajur di telefon). Laptop: #sgp-utama-tel dibuang. */
#sgp-utama-tel { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    #eguru-app #sgp-utama-tel { display: block; margin: 4px 0 8px; }
    #sgp-utama-tel .sgp-kad { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    #sgp-utama-tel .sgp-kk { display: flex; align-items: baseline; gap: 8px; margin: 16px 8px 8px; }
    #sgp-utama-tel .sgp-kk b { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--text); }
    #sgp-utama-tel .sgp-kk b svg { display: none; }
    #sgp-utama-tel .sgp-sela { flex: 1; }
    #sgp-utama-tel .sgp-lihat { all: unset; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary-text, #047857); }
    #sgp-utama-tel .sgp-dok-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 12px 6px 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--card-bg); }
    #sgp-utama-tel .sgp-dok { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
    #sgp-utama-tel .sgp-dok > span:last-child { max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #sgp-utama-tel .sgp-tk { 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%); }
    #sgp-utama-tel .sgp-tk svg { width: 26px; height: 26px; fill: #fff; }
    #sgp-utama-tel .sgp-kos { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--text-muted); text-align: center; }
    #sgp-utama-tel .sgp-tel-g2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 10px; }
    #sgp-utama-tel .sgp-tel-g2 > .sgp-kad { display: flex; flex-direction: column; }
    #sgp-utama-tel .sgp-tel-g2 .sgp-br { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 12px; position: relative;
        background: var(--card-bg); border: 1px solid var(--border); border-top-width: 0; }
    #sgp-utama-tel .sgp-tel-g2 .sgp-kk + .sgp-br { border-top-width: 1px; border-radius: 14px 14px 0 0; }
    #sgp-utama-tel .sgp-tel-g2 .sgp-br:last-child { border-radius: 0 0 14px 14px; }
    #sgp-utama-tel .sgp-tel-g2 .sgp-kk + .sgp-br:last-child { border-radius: 14px; }
    #sgp-utama-tel .sgp-br:active { background: var(--primary-bg, #ECFDF5); }
    #sgp-utama-tel .sgp-kt { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; }
    #sgp-utama-tel .sgp-kt svg { width: 18px; height: 18px; fill: #fff; }
    #sgp-utama-tel .sgp-br > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
    #sgp-utama-tel .sgp-br b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
    #sgp-utama-tel .sgp-br small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #sgp-utama-tel .sgp-br > svg { flex: none; width: 20px; height: 20px; fill: #9CA3AF; }
    #sgp-utama-tel .sgp-pil { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #FEF3C7; color: #92400E; }
}
@media (min-width: 641px) and (max-width: 1366px) and (orientation: portrait) { #sgp-utama-tel .sgp-tel-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 72.29 RUANG KERJA telefon & tablet potret (lib/sg_perisian.js ruangPtd + pasangPtdTel; mockup app.html?app=ptd&mula=kurikulum/ruang):
   tab blok Tugas | Alat | Fail Meja; Tugas = baris (tanda, tajuk, status) — ketik = alat untuk tugas itu; Alat = bar alat & modul ASAL. */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab.sgp-ptdu-tel { display: flex !important; gap: 6px; margin: 8px 0 10px; padding: 5px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab button { all: unset; box-sizing: border-box; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px;
        background: #F3F4F6; color: #4B5563; font-weight: 700; font-size: 14px; cursor: pointer; }
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab button i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, .06); }
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab button.on { background: linear-gradient(135deg, #059669, #047857); color: #fff; box-shadow: 0 2px 6px rgba(5, 150, 105, .3); }
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab button.on i { background: rgba(255, 255, 255, .22); }
    html:not(.sgp-html) #ptd-isi.sgp-rk > #sgp-rk-tab button:focus-visible { outline: 3px solid #047857; outline-offset: 2px; }
    html:not(.sgp-html) #ptd-isi.sgp-rk.sgp-rk-tugas > :is(#rk-lgk, #rk-isi) { display: none !important; }
    html:not(.sgp-html) #ptd-isi.sgp-rk.sgp-rk-tugas > #sgp-rk-tg.sgp-ptdu-tel { display: block !important; }
    #sgp-rk-tg .sgp-rk-lbl { margin: 6px 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-light, #6B7280); }
    #sgp-rk-tg .sgp-rk-p { display: none; }
    #sgp-rk-tg .sgp-rk-jd { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
    #sgp-rk-tg table, #sgp-rk-tg tbody { display: block; width: 100%; border: 0; }
    #sgp-rk-tg thead { display: none; }
    #sgp-rk-tg tr { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 12px; cursor: pointer; position: relative; }
    #sgp-rk-tg tr + tr { border-top: 1px solid var(--border); }
    #sgp-rk-tg tr:active { background: var(--primary-bg, #ECFDF5); }
    #sgp-rk-tg td { display: block; padding: 0; border: 0; }
    #sgp-rk-tg td:nth-child(1) input { width: 22px; height: 22px; accent-color: #047857; }
    #sgp-rk-tg td:nth-child(2) { flex: 1 1 auto; min-width: 0; }
    #sgp-rk-tg td:nth-child(2) b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
    #sgp-rk-tg td:nth-child(3), #sgp-rk-tg td:nth-child(5) { display: none; }
    #sgp-rk-tg .sgp-pil { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
    #sgp-rk-tg .sgp-pil.amber { background: #FEF3C7; color: #92400E; }
    #sgp-rk-tg .sgp-pil.hijau { background: #D1FAE5; color: #065F46; }
    #sgp-rk-tg tr::after { content: ''; flex: none; width: 20px; height: 20px; background: #9CA3AF;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") center / contain no-repeat; }
}
.sgp-rk-lbl { display: none; }
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) { #sgp-rk-tg .sgp-rk-lbl { display: block; } }

/* 72.29 m11 MOD GELAP (telefon & tablet potret sahaja): tab blok baharu (Ruang Kerja, langkah pemain Nota, tempoh ranking) — tab tidak aktif ikut tema gelap */
@media (max-width: 640px), (max-width: 1366px) and (orientation: portrait) {
    html:not(.sgp-html) #eguru-app.dark-theme #ptd-isi.sgp-rk > #sgp-rk-tab button:not(.on),
    :root[data-theme="dark"].sgapp-npemain #ni-lgk .lgk-t:not(.on):not(.siap),
    :root[data-theme="dark"].sgapp-rank .ni-penapis[data-tab="tempoh"] button:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .08); color: #CBD5E1; }
}
@media (prefers-color-scheme: dark) and (max-width: 640px), (prefers-color-scheme: dark) and (max-width: 1366px) and (orientation: portrait) {
    :root:not([data-theme="light"]).sgapp-npemain #ni-lgk .lgk-t:not(.on):not(.siap),
    :root:not([data-theme="light"]).sgapp-rank .ni-penapis[data-tab="tempoh"] button:not([aria-pressed="true"]) { background: rgba(255, 255, 255, .08); color: #CBD5E1; }
}