/* =============================================================
   SistemGuru.My — GAYA UTAMA
   Dipecahkan daripada index.html pada 2026-09-17.
   Turutan blok DIKEKALKAN persis seperti asal supaya cascade tidak berubah.
   Landing page (.lp) ada failnya sendiri: sg_lp.css (dimuat SELEPAS fail ini).
   ============================================================= */

/* ===== BLOK 1: CSS teras aplikasi (asal index.html baris 112-3951) ===== */
/* ===== CSS VARIABLES ===== */
#eguru-app {
    --primary: #059669; --primary-light: #34D399; --primary-dark: #047857;
    /* Henti cerah dinaikkan #059669 -> #047857: teks putih di atas #059669
       hanya 3.77:1 (bawah AA 4.5). Pada #047857 ia 5.55:1. Gradien ini
       melatari hero, avatar & .btn-primary — semuanya berteks putih. */
    --gradient-bg: linear-gradient(135deg, #047857 0%, #064E3B 100%);
    --accent: #F59E0B; --accent-light: #FDE68A;
    --info: #3B82F6; --info-light: #EFF6FF;
    --danger: #EF4444; --danger-light: #FEF2F2;
    --success: #10B981; --success-light: #ECFDF5;
    --bg: #F0FDF4; --card-bg: #FFFFFF;
    /* Dua tangga teks sekunder. Nilai lama --text-light #9CA3AF hanya
       2.43:1 atas --bg — ia melatari .help-hint, iaitu teks panduan borang
       yang paling perlu dibaca. Kedua-dua tangga kini lulus AA 4.5:1
       (muted 7.1:1, light 4.6:1) dan masih jelas berbeza antara satu sama
       lain. Jangan cerahkan semula tanpa mengira semula nisbah. */
    --text: #1F2937; --text-muted: #4B5563; --text-light: #6B7280;
    /* Hijau jenama sebagai TEKS atas latar cerah (#059669 = 3.77:1, gagal).
       --primary kekal untuk isian/border/ikon; guna ini untuk teks. */
    --primary-text: #047857;
    /* Sama untuk biru: --info #3B82F6 atas --info-light cuma 3.38:1. */
    --info-text: #1D4ED8;
    /* Sama untuk ambar: --accent #F59E0B atas --accent-light cuma 1.72:1 —
       pasangan paling teruk dalam stylesheet (dua tona kuning yang sama).
       #78350F = 7.28:1 atas --accent-light dan 9.07:1 atas putih; lapang
       itu perlu kerana label REHAT / "belum siap" dirender bawah 10px.
       --accent KEKAL untuk isian/border/ikon (ambang komponen UI 3:1). */
    --accent-text: #78350F;
    /* Sama untuk merah: --danger #EF4444 atas --danger-light cuma 3.44:1.
       #B91C1C = 5.91:1 atas --danger-light, 6.47:1 atas putih, 6.18:1
       atas --bg. --danger kekal untuk border & isian butang. */
    --danger-text: #B91C1C;
    /* Warna KEHADIRAN (cyan) — berbeza daripada Latihan (ungu) & Butiran (hijau). */
    --kh: #0891B2; --kh-dark: #0E7490; --kh-light: #ECFEFF; --kh-text: #155E75;
    --border: #E5E7EB; --nav-h: 68px; --topbar-h: 62px; --sidebar-w: 236px;
    /* --fs = saiz asas. Hampir semua saiz lain adalah pecahan em daripadanya,
       jadi satu pemboleh ubah ini menskala keseluruhan antara muka. Nilainya
       DITAKRIF di hujung stylesheet (cari "--fs-base") sebagai hasil darab
       asas responsif x pilihan guru. Tiada had lebar kandungan — setiap
       halaman guna lebar penuh supaya jurang tepi konsisten. */
    /* Lebar LAJUR kandungan borang kecil dalam popup — bukan lebar popup.
       Setiap popup kini hampir penuh skrin (lihat --modal-gap). */
    --modal-w: 560px;
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
    --shadow: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.14);

    /* ===== FASA 4 — TOKEN REKA BENTUK =====
       Sebelum ini setiap nilai ditala tangan: 43 saiz font em berbeza,
       16 nilai border-radius, 17 nilai margin-bottom, 8 warna ungu. Bila
       radius 7px duduk sebelah 8px sebelah 9px, mata nampak "tak sejajar"
       walaupun tak dapat tunjuk sebabnya. Skala tetap di bawah menggantikan
       semuanya. Gunakan token ini untuk sebarang gaya baharu. */

    /* Tipografi — 9 anak tangga, relatif kepada --fs. Jarak ~7-8% antara
       anak tangga bawah supaya setiap satu benar-benar dapat dibezakan.
       Anak tangga bawah pernah ditetapkan .62/.68 tetapi diukur semula:
       pada 768px ia meninggalkan 45 elemen teks di bawah 11px. Dinaikkan
       kepada .66/.72/.78 -> tinggal 4, tanpa limpahan baharu di 320px. */
    /* 2026-07-30 — DITUKAR DARIPADA em KEPADA calc(var(--fs) * n).
       Sebabnya: `em` diselesaikan relatif kepada font-size INDUK, bukan akar
       app. Jadi elemen --t5 di dalam bekas --t5 mendarat pada .81, dan lebih
       dalam lagi lebih kecil. Diukur pada telefon sebelum pembetulan ini:
         .card p  -> 7 saiz berbeza (9.77px hingga 11.22px, julat 14.8%)
         label    -> 8 saiz berbeza (10.30px hingga 13.60px, julat 32%)
       Kerana --fs hanya ditakrif pada #eguru-app dan tidak pernah ditulis
       semula lebih dalam, calc() menjadikan setiap tangga nilai px MUTLAK —
       sama di setiap halaman, pada setiap kedalaman sarang. Butang A-/A+
       kekal berfungsi kerana --fs sendiri = --fs-base * --fs-scale.
       JANGAN kembalikan kepada em. */
    /* Anak tangga sub-t1, KHUSUS untuk tanda jam grid jadual waktu yang
       dahulunya px mutlak (7.5px) — satu-satunya teks dalam app yang
       butang A-/A+ tidak dapat besarkan langsung. .60 = 7.92px telefon /
       8.4px desktop (naik sedikit daripada 7.5px) dan 11.09px pada A+ 1.4.
       Jangan guna untuk teks lain — ia memang di bawah tangga utama. */
    --t0: calc(var(--fs) * .60);
    --t1: calc(var(--fs) * .66);  --t2: calc(var(--fs) * .72);  --t3: calc(var(--fs) * .78);
    --t4: calc(var(--fs) * .84);  --t5: calc(var(--fs) * .9);   --t6: calc(var(--fs) * .96);
    --t7: calc(var(--fs) * 1.05); --t8: calc(var(--fs) * 1.22); --t9: calc(var(--fs) * 1.4);

    /* Bulatan sudut — 6 anak tangga (50% kekal untuk bulatan penuh) */
    --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px;
    --radius: 14px;   --radius-lg: 18px; --radius-full: 9999px;

    /* Irama menegak antara blok */
    --sp-1: 4px; --sp-2: 6px; --sp-3: 10px; --sp-4: 14px; --sp-5: 18px;

    /* Keluarga ungu (pelan Ultra + ciri AI/Ejen). Dahulunya lapan hex
       berbeza yang tiada sebab untuk berbeza. */
    --ultra: #7C3AED;       --ultra-dark: #6D28D9; --ultra-deep: #5B21B6;
    --ultra-light: #A855F7; --ultra-pale: #C4B5FD;
}
#eguru-app.dark-theme {
    --primary: #10B981; --primary-light: #6EE7B7; --primary-dark: #059669;
    --gradient-bg: linear-gradient(135deg, #064E3B 0%, #022C22 100%);
    --accent: #FBBF24; --accent-light: #3B2F00;
    --info: #60A5FA; --info-light: #1E3A5F;
    --danger: #F87171; --danger-light: #3B1515;
    --success: #34D399; --success-light: #0D2A1F;
    --bg: #0F172A; --card-bg: #1E293B;
    /* --text-light lama #64748B = 3.77:1 atas --bg gelap. #7C899C = 5.1:1
       dan masih lebih pudar daripada --text-muted (7.1:1), jadi hierarki
       kekal. Dalam tema gelap "lebih pudar" bermakna lebih GELAP. */
    --text: #F1F5F9; --text-muted: #94A3B8; --text-light: #7C899C;
    --border: #334155;
    /* Tema gelap: latar sudah gelap, jadi warna CERAH yang lulus kontras. */
    --primary-text: #34D399;
    --info-text: #93C5FD;
    /* Nilainya sengaja SAMA dengan --accent/--danger gelap: pasangan gelap
       sudah lulus (7.90:1 & 5.82:1). Token ini wujud semata-mata supaya
       tukaran token tema cerah larut di sini tanpa mengubah palet gelap. */
    --accent-text: #FBBF24;
    --danger-text: #F87171;
    --kh: #06B6D4; --kh-dark: #0E7490; --kh-light: #0B2E38; --kh-text: #67E8F9;
}

/* ===== RESET ===== */
/* 'Scheherazade New' SENGAJA terus selepas Inter. Inter tiada glyph Arab, jadi
   pelayar mengambil setiap aksara Jawi daripada fon SETERUSNYA dalam senarai —
   aksara demi aksara. Dahulu fon seterusnya ialah system-ui, iaitu fon Arab
   sistem (Segoe UI di Windows): setiap teks Jawi di luar elemen [dir="rtl"]
   (pilihan dropdown, tajuk kad, label, sel tanpa atribut dir) dipapar dengan
   rupa yang berbeza daripada RPT. Dengan susunan ini Rumi kekal Inter dan Jawi
   sentiasa Scheherazade, di mana-mana, tanpa perlu setiap modul menanda dir. */
#eguru-app * { box-sizing: border-box !important; margin: 0; padding: 0; font-family: 'Inter', 'Scheherazade New', system-ui, sans-serif !important; -webkit-tap-highlight-color: transparent !important; }
/* ===== TULISAN JAWI / ARAB (RTL) =====
   Glyph Arab nampak lebih kecil pada saiz font yang sama, jadi guna font Naskh khas
   + besarkan sedikit supaya sebanding dengan tulisan Rumi. */
#eguru-app [dir="rtl"] {
    font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', 'Inter', serif !important;
    font-size: var(--t8);
    line-height: 1.7;
}
/* Anak elemen RTL (<b>, <span>, <option>, sel jadual) MEWARISI fon induknya.
   Tanpa ini peraturan `#eguru-app *` di atas mengenai setiap anak secara
   langsung dan menukar Jawi di dalamnya kembali ke susunan Inter — teks yang
   sama berubah rupa separuh ayat. Saiz TIDAK diwarisi di sini: anak yang ada
   saiz kelasnya sendiri mengekalkannya. Anak bertanda dir="ltr" (Rumi di
   dalam blok Jawi) dikembalikan ke susunan asal. */
#eguru-app [dir="rtl"] * { font-family: inherit !important; }
#eguru-app [dir="rtl"] [dir="ltr"],
#eguru-app [dir="rtl"] [dir="ltr"] * { font-family: 'Inter', 'Scheherazade New', system-ui, sans-serif !important; }
/* ===== BARIS AKTIVITI: dropdown + butang "tulis sendiri" ===== */
#eguru-app .akt-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: var(--sp-2); }
#eguru-app .akt-row .form-control { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
/* Aktiviti dalam mod teks: textarea auto-besar & wrap supaya ayat panjang (cth dari AI) terbaca penuh */
#eguru-app textarea.akt-ta { resize: vertical; overflow: hidden; min-height: 42px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
#eguru-app .btn-akt-edit {
    flex: 0 0 40px; width: 40px; min-height: 42px; align-self: flex-start; background: var(--info-light); color: var(--info);
    border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, border-color .15s;
}
#eguru-app .btn-akt-edit svg { width: 17px; height: 17px; fill: currentColor; }
#eguru-app .btn-akt-edit:hover { border-color: var(--info); }
#eguru-app .btn-akt-edit.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#eguru-app {
    font-size: var(--fs) !important; background-color: var(--bg) !important; color: var(--text) !important;
    position: fixed !important; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999 !important; display: flex !important; flex-direction: column !important;
    /* inset:0 (top/bottom/left/right) menentukan kotak = viewport nampak sebenar. JANGAN tetapkan
       height:100dvh + bottom:0 serentak (terlebih-tetap) — pada mobile ia buat nav jatuh luar skrin
       selepas pull-to-refresh bila URL bar muncul semula. */
    overflow: hidden !important;
    transition: background-color .3s, color .3s;
}

/* ===== LOADING OVERLAY ===== */
#eguru-app .loading-overlay {
    position: absolute !important; inset: 0; background: rgba(255,255,255,.92);
    z-index: 9999999 !important; display: none !important; flex-direction: column;
    justify-content: center; align-items: center; backdrop-filter: blur(8px); gap: 16px;
}
#eguru-app.dark-theme .loading-overlay { background: rgba(15,23,42,.92); }
#eguru-app .loading-overlay.active { display: flex !important; }
#eguru-app .spinner { border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; width: 44px; height: 44px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
#eguru-app .loading-text { font-weight: 600; color: var(--primary); font-size: var(--t6); text-align: center; padding: 0 20px; }

/* ===== TOAST ===== */
#eguru-app .toast-msg {
    position: absolute !important; bottom: 84px !important; left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background: #1F2937 !important; color: #fff !important;
    padding: 10px 20px !important; border-radius: var(--radius-full) !important;
    font-size: var(--t6) !important; font-weight: 500 !important;
    z-index: 200001 !important; opacity: 0; pointer-events: none !important;
    transition: opacity .3s, transform .3s !important; white-space: normal; text-align: left;
    box-shadow: var(--shadow) !important; max-width: 90vw;
}
#eguru-app .toast-msg.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
#eguru-app .toast-msg.t-success { background: #059669 !important; }
#eguru-app .toast-msg.t-error { background: #EF4444 !important; }
#eguru-app .toast-msg.t-info { background: #3B82F6 !important; }
#eguru-app .toast-msg { display: inline-flex !important; align-items: center; gap: 8px; }
#eguru-app .toast-msg .gi { width: 17px; height: 17px; vertical-align: middle; }

/* ===== GLIF PREMIUM (inline icon, ganti emoji) ===== */
#eguru-app .gi { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; fill: currentColor; flex-shrink: 0; }
#eguru-app #result-icon .gi { width: 1em; height: 1em; vertical-align: middle; }
#eguru-app .today-sub .gi, #eguru-app .tt-masa .gi, #eguru-app .rpt-day-kelas .gi { opacity: .85; }

/* ===== BUTANG RESET JADUAL ===== */
/* Teks merah guna --danger-text (#B91C1C = 5.91:1); --danger #EF4444 atas
   --danger-light cuma 3.44:1. Border/isian kekal --danger (ambang UI 3:1). */
#eguru-app .btn-reset-jadual { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t3); font-weight: 700; color: var(--danger-text); background: var(--danger-light); border: 1.5px solid rgba(239,68,68,.25); border-radius: var(--radius-full); padding: 5px 11px; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
#eguru-app .btn-reset-jadual:hover { border-color: var(--danger); }
#eguru-app .btn-reset-jadual svg { width: 14px; height: 14px; fill: currentColor; }

/* ===== AUTH MODAL ===== */
#eguru-app .modal-overlay {
    position: absolute !important; inset: 0; background: rgba(0,0,0,.55);
    z-index: 100000 !important; display: flex; align-items: flex-end; justify-content: center;
    backdrop-filter: blur(4px); padding-bottom: env(safe-area-inset-bottom);
}
/* Mesej gerbang (showResultPopup) mesti di ATAS modal lain (cth #ai-modal Jana Kandungan RPH) */
#eguru-app #result-modal { z-index: 100100 !important; }
#eguru-app .modal-sheet {
    background: var(--card-bg); border-radius: 24px 24px 0 0; width: 100%;
    max-width: var(--modal-w); padding: 24px 20px 32px; box-shadow: var(--shadow-lg);
    animation: slideUp .3s ease-out;
}
@keyframes slideUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
#eguru-app .modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: var(--radius-full); margin: 0 auto 20px; }
#eguru-app .modal-logo {
    width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--gradient-bg);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
#eguru-app .modal-logo svg { width: 28px; height: 28px; fill: #fff; }
#eguru-app .modal-title { text-align: center; font-size: var(--t8); font-weight: 800; margin-bottom: var(--sp-1); }
#eguru-app .modal-tagline { text-align: center; font-size: var(--t4); font-weight: 700; font-style: italic; color: var(--primary); letter-spacing: .2px; margin-bottom: var(--sp-2); }
#eguru-app .modal-sub { text-align: center; font-size: var(--t5); color: var(--text-muted); margin-bottom: var(--sp-5); }
#eguru-app .auth-tabs { display: flex; background: var(--bg); border-radius: var(--radius-md); padding: 4px; margin-bottom: var(--sp-5); gap: 4px; }
#eguru-app .auth-tab { flex: 1; text-align: center; padding: 9px; border-radius: var(--radius-sm); font-size: var(--t5); font-weight: 600; cursor: pointer; color: var(--text-muted); transition: all .2s; }
#eguru-app .auth-tab.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); }
#eguru-app .auth-error { background: var(--danger-light); border-left: 3px solid var(--danger); padding: 10px 12px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--t5); color: var(--danger-text); margin-bottom: var(--sp-4); display: none; }
#eguru-app .auth-error.show { display: block; }
/* Pembahagi "ATAU" + butang Log Masuk Google */
#eguru-app .auth-setuju a { color: var(--primary-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#eguru-app .auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-light); font-size: var(--t3); font-weight: 700; letter-spacing: .5px; }
#eguru-app .auth-or::before, #eguru-app .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#eguru-app .btn-google { background: var(--card-bg) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; }
#eguru-app .btn-google:hover { border-color: var(--text-light) !important; }
#eguru-app .btn-google svg { width: 18px !important; height: 18px !important; fill: none !important; }

/* ===== TOPBAR ===== */
#eguru-app .topbar {
    height: var(--topbar-h) !important; min-height: var(--topbar-h) !important;
    background: var(--gradient-bg) !important; color: #fff !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 0 14px !important; z-index: 10 !important;
    box-shadow: 0 2px 12px rgba(5,150,105,.25) !important;
}
#eguru-app .topbar-left { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; }
#eguru-app .topbar-logo { width: 36px !important; height: 36px !important; background: rgba(255,255,255,.2) !important; border-radius: var(--radius-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; }
#eguru-app .topbar-logo svg { width: 20px !important; height: 20px !important; fill: #fff !important; }
#eguru-app .topbar-title { font-size: var(--t7) !important; font-weight: 800 !important; line-height: 1.1; }
#eguru-app .topbar-sub { font-size: var(--t2) !important; opacity: .75 !important; font-weight: 500 !important; }
#eguru-app .topbar-right { display: flex !important; gap: 6px !important; align-items: center; flex-shrink: 0; }
#eguru-app .icon-btn {
    background: rgba(255,255,255,.15) !important; border: none !important; color: #fff !important;
    cursor: pointer !important; padding: 8px !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    border-radius: var(--radius-md) !important; transition: background .2s !important;
    width: 38px !important; height: 38px !important;
}
#eguru-app .icon-btn:hover { background: rgba(255,255,255,.25) !important; }
#eguru-app .icon-btn svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
/* User chip */
#eguru-app .user-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.15); border-radius: var(--radius-lg); padding: 5px 10px 5px 6px; cursor: default; }
#eguru-app .user-avatar-sm { width: 26px; height: 26px; border-radius: var(--radius-sm); background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .user-avatar-sm svg { width: 14px; height: 14px; fill: #fff; }
#eguru-app .user-chip-name { font-size: var(--t4); font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Log Keluar memusnahkan sesi tanpa amaran, tetapi sasaran ketiknya dahulu
   22x22px (WCAG 2.5.8 minta 24x24) dan duduk 6px daripada lencana pelan.
   Kromnya dinaikkan ke 24x24 dan kawasan ketik DILUASKAN oleh ::before
   sahaja — 32x44 (menegak ada ruang lapang dalam topbar 62px, mendatar
   cuma 4px sisi jadi ia kekal DALAM jurang 6px dan tidak pernah menindih
   #topbar-plan). Susun atur topbar tidak berubah sesenti pun. */
#eguru-app .logout-btn { background: rgba(255,255,255,.15) !important; border: none; color: #fff; cursor: pointer; width: 24px; height: 24px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s; flex-shrink: 0; position: relative; }
#eguru-app .logout-btn::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 32px; height: 44px; }
#eguru-app .logout-btn:hover { background: rgba(239,68,68,.5) !important; }
#eguru-app .logout-btn svg { width: 12px; height: 12px; fill: currentColor; }

/* ===== MAIN CONTENT ===== */
#eguru-app .main-content { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 14px !important; padding-bottom: calc(var(--nav-h) + 14px) !important; -webkit-overflow-scrolling: touch !important; }
#eguru-app .view { display: none !important; animation: fadeIn .35s ease-out; }
#eguru-app .view.active { display: block !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

/* ===== CARDS ===== */
#eguru-app .card { background: var(--card-bg) !important; border-radius: var(--radius) !important; padding: 16px !important; box-shadow: var(--shadow-sm) !important; border: 1px solid var(--border) !important; margin-bottom: var(--sp-4) !important; }
#eguru-app .card-title { font-size: var(--t7) !important; font-weight: 700 !important; color: var(--primary) !important; margin-bottom: var(--sp-1) !important; }
#eguru-app .card-desc { font-size: var(--t6) !important; color: var(--text-muted) !important; line-height: 1.5 !important; }
/* Tajuk kategori tetapan (kumpulkan kad berkaitan) */
#eguru-app .tetapan-kategori { display: flex; align-items: center; gap: 8px; font-size: var(--t4); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--primary-dark); margin: 20px 2px 10px; padding-bottom: 7px; border-bottom: 2px solid var(--primary-light); }
#eguru-app .tetapan-kategori::before { content: ""; width: 4px; height: 15px; border-radius: var(--radius-full); background: var(--primary); flex-shrink: 0; }
#eguru-app .view > .tetapan-kategori:first-child { margin-top: 2px; }
/* Sorotan ciri-ciri (halaman Utama) */
#eguru-app .fitur-wrap { margin: 6px 0 14px; }
#eguru-app .fitur-tajuk { font-size: var(--t6); font-weight: 800; color: var(--text); margin: 0 2px 12px; }
#eguru-app .fitur-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#eguru-app .fitur-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; box-shadow: var(--shadow-sm); }
#eguru-app .fitur-ico { width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
#eguru-app .fitur-ico svg { width: 21px; height: 21px; fill: #fff; }
#eguru-app .fitur-name { font-weight: 800; font-size: var(--t6); color: var(--text); margin-bottom: var(--sp-1); line-height: 1.25; }
#eguru-app .fitur-desc { font-size: var(--t4); color: var(--text-muted); line-height: 1.45; }
#eguru-app .f-green { background: var(--primary); } #eguru-app .f-blue { background: var(--info); }
#eguru-app .f-amber { background: var(--accent); } #eguru-app .f-purple { background: var(--ultra-light); }
#eguru-app .f-teal { background: #14b8a6; } #eguru-app .f-rose { background: #f43f5e; }
@media (max-width: 480px) { #eguru-app .fitur-grid { grid-template-columns: 1fr; } }

/* Halaman Tentang Kami */
#eguru-app .ultra-pill { font-size: var(--t2); font-weight: 800; background: linear-gradient(135deg,var(--ultra),var(--ultra-light)); color: #fff; padding: 1px 6px; border-radius: var(--radius-full); margin-left: 4px; vertical-align: middle; letter-spacing: .3px; }
#eguru-app .about-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#eguru-app .about-plan { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
#eguru-app .about-plan.popular { border-color: var(--primary); background: var(--success-light); }
#eguru-app .about-plan b { font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .about-plan span { font-size: var(--t5); font-weight: 700; color: var(--primary); }
#eguru-app .about-plan small { font-size: var(--t2); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
@media (max-width: 480px) { #eguru-app .about-plans { grid-template-columns: 1fr; } }

/* ===== SECTION HEADER ===== */
#eguru-app .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-4); }
#eguru-app .section-badge { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
#eguru-app .badge-green { background: var(--primary); }
#eguru-app .badge-amber { background: var(--accent); }
#eguru-app .badge-blue { background: var(--info); }
/* Glif lencana SENTIASA 16px putih. Dahulu setiap <svg> membawa gaya sebaris
   sendiri; tiga lencana Bank terlepas dan terlukis 32px HITAM di atas jingga. */
#eguru-app .section-badge > svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }
/* Keluarga Bank (2026-09-25): satu bentuk (ikon "bertindan" = koleksi dikongsi),
   tiga warna supaya Bank RPH / Nota / Soalan dibezakan sekilas pandang. */
#eguru-app .badge-bank-rph { background: linear-gradient(135deg, #92400e, #d99a06); }
#eguru-app .badge-bank-nota { background: linear-gradient(135deg, #065f46, #10b981); }
#eguru-app .badge-bank-soalan { background: linear-gradient(135deg, #3730a3, #6366f1); }
#eguru-app [class*="badge-bank-"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#eguru-app .section-header-text h3 { font-size: var(--t6); font-weight: 700; color: var(--text); }
#eguru-app .section-header-text p { font-size: var(--t4); color: var(--text-muted); margin-top: 1px; }
/* Kumpulan aksi dalam kepala kad: tindakan peringkat-halaman (Sync RPT,
   Jana Kandungan; Urus Jadual berpindah ke Utama) berkumpul di satu tempat supaya badan kad
   kembali menjadi JADUAL, bukan panel tetapan. Pada telefon ia turun ke baris
   sendiri dan setiap butang mengambil lebar sama — tiga butang bersebelahan
   pada 360px menghasilkan label yang terpotong. */
#eguru-app .hdr-aksi { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-left: auto; align-self: flex-start; justify-content: flex-end; }
/* align-self:stretch supaya ketiga-tiga butang setinggi yang sama. Tanpa ia
   label yang mengandungi anak panah ("Sync RPT → RPH") mendapat kotak baris
   2px lebih tinggi dan butang itu kelihatan tersasar daripada dua yang lain. */
/* Baris reset di atas jadual mingguan. Butang dikecilkan supaya ia jelas
   TINDAKAN SEKUNDER di sebelah kiraan kelas — bukan dua butang merah besar
   yang menuntut perhatian setiap kali halaman RPH dibuka. */
#eguru-app .jadual-reset-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#eguru-app .btn-reset-kecil { width: auto !important; justify-content: center; padding: 5px 11px !important; font-size: var(--t3) !important; }
#eguru-app .btn-reset-kecil svg { width: 14px !important; height: 14px !important; }
@media (max-width: 560px) {
    #eguru-app .jadual-reset-bar { width: 100%; justify-content: flex-start; }
    #eguru-app .btn-reset-kecil { flex: 1 1 auto; }
}
#eguru-app .hdr-aksi > .btn { width: auto !important; flex: 0 0 auto; padding: 6px 12px !important; align-self: stretch; }
/* Suis Bank RPH dalam bar tindakan RPH. Peraturan .hdr-aksi di atas hanya
   memilih `> .btn`, jadi pembungkus suis memerlukan saiznya sendiri — tanpa
   ini ia mengecut menjadi sifar pada susun atur telefon di bawah. Tingginya
   dipadankan dengan butang jiran (align-self:stretch) supaya ketiga-tiga
   kawalan berbaris pada garis dasar yang sama. */
#eguru-app .rph-bank-ctl {
    display: flex; align-items: center; gap: 7px; flex: 0 0 auto; align-self: stretch;
    padding: 0 11px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card);
}
#eguru-app .rph-bank-lbl { font-size: var(--t3); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 700px) {
    #eguru-app .rph-bank-ctl { flex: 1 1 100%; justify-content: space-between; padding: 7px 11px; }
}
@media (max-width: 700px) {
    #eguru-app .section-header:has(.hdr-aksi) { flex-wrap: wrap; }
    #eguru-app .hdr-aksi { margin-left: 0; width: 100%; justify-content: stretch; }
    #eguru-app .hdr-aksi > .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ===== FORMS ===== */
#eguru-app .form-group { margin-bottom: var(--sp-4) !important; }
#eguru-app .form-group label { display: block !important; font-size: var(--t5) !important; margin-bottom: var(--sp-2) !important; font-weight: 600 !important; color: var(--text) !important; }
/* !important pada font-size: .help-hint ialah SATU peranan semantik (teks
   panduan borang), jadi ia mesti satu saiz. Tanpanya, beberapa hint yang ada
   font-size sebaris terpapar --t5 sedangkan yang lain --t4. */
#eguru-app .help-hint { display: block; font-size: var(--t4) !important; color: var(--text-light); margin-top: 4px; line-height: 1.4; }
#eguru-app .sk-full { margin-top: 6px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); font-size: var(--t5); line-height: 1.5; color: var(--text); white-space: normal; word-break: break-word; }
#eguru-app .form-control { width: 100% !important; padding: 11px 12px !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important; font-size: var(--t6) !important; background: var(--bg) !important; color: var(--text) !important; transition: border-color .2s, box-shadow .2s !important; -webkit-appearance: none; }
#eguru-app .form-control:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(5,150,105,.12) !important; }

/* ===== GELANG FOKUS PAPAN KEKUNCI =====
   initKeyboardA11y() sudah memberi tabindex/role/aria-label kepada kawalan
   <div> (nav-item, auth-tab, acc-head, flow-head, lagi-item), tetapi tiada
   apa-apa yang KELIHATAN semasa fokus — pengguna papan kekunci hilang jejak
   sepenuhnya. :focus-visible dipilih supaya gelang ini hanya muncul untuk
   Tab/papan kekunci, bukan selepas klik tetikus atau ketukan jari. */
#eguru-app :is(button, a, [role="button"], [tabindex], summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--primary-light) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-xs);
}
/* Di dalam nav gelap/hero bergradien, hijau muda kurang menonjol — guna putih. */
#eguru-app .bottom-nav :is([role="button"], button):focus-visible,
#eguru-app .hero-card :is(a, button):focus-visible {
    outline-color: #fff !important;
}
#eguru-app textarea.form-control { resize: vertical; min-height: 70px; }
#eguru-app select.form-control { max-width: 100% !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#eguru-app select.form-control option { max-width: 90vw; }
#eguru-app .form-control::placeholder { color: var(--text-light); }
/* Password show/hide */
#eguru-app .pw-wrap { position: relative; }
#eguru-app .pw-wrap .form-control { padding-right: 44px !important; }
#eguru-app .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent !important; border: none; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-light); border-radius: var(--radius-sm); box-shadow: none !important; width: auto !important; }
#eguru-app .pw-toggle:hover { color: var(--primary); background: rgba(5,150,105,.08) !important; }
#eguru-app .pw-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* ===== BUTTONS ===== */
#eguru-app .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 13px 16px !important; border-radius: var(--radius-sm) !important; font-size: var(--t6) !important; font-weight: 700 !important; cursor: pointer !important; border: none !important; transition: transform .15s, box-shadow .15s, opacity .15s !important; width: 100% !important; letter-spacing: .2px; }
#eguru-app .btn svg { width: 17px !important; height: 17px !important; fill: currentColor !important; flex-shrink: 0 !important; }
#eguru-app .btn:active { transform: scale(.97) !important; }
#eguru-app .btn:disabled { opacity: .45 !important; cursor: not-allowed !important; pointer-events: none; }
#eguru-app .btn-primary { background: var(--gradient-bg) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(5,150,105,.3) !important; }
#eguru-app .btn-primary:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(5,150,105,.4) !important; transform: translateY(-1px) !important; }
/* Label butang guna --primary-text, bukan --primary: hijau #059669 atas
   latar lutsinar hanya 3.77:1. Border kekal --primary (border ialah
   komponen UI, ambangnya 3:1). */
#eguru-app .btn-outline { background: transparent !important; color: var(--primary-text) !important; border: 2px solid var(--primary) !important; }
#eguru-app .btn-outline:hover { background: rgba(5,150,105,.06) !important; }
/* Ambar jenama DIKEKALKAN. Putih atas #F59E0B cuma 2.14:1 — punca sebenar
   ialah teks putih, bukan warnanya. Teks gelap atas ambar = 6.8:1 dan ini
   corak standard (Material/Tailwind) untuk warna amaran cerah. Ikon ikut
   currentColor jadi ia turut bertukar. */
#eguru-app .btn-accent { background: linear-gradient(135deg,#F59E0B,#D97706) !important; color: #1F2937 !important; box-shadow: 0 4px 12px rgba(245,158,11,.3) !important; }
#eguru-app .btn-accent:hover:not(:disabled) { transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(245,158,11,.4) !important; }
#eguru-app .btn-info { background: linear-gradient(135deg,#2563EB,#1D4ED8) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(59,130,246,.3) !important; }
#eguru-app .btn-info:hover:not(:disabled) { transform: translateY(-1px) !important; }
#eguru-app .btn-success { background: linear-gradient(135deg,#047857,#065F46) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(16,185,129,.3) !important; }
#eguru-app .btn-success:hover:not(:disabled) { transform: translateY(-1px) !important; }
/* #EF4444 dgn teks putih = 3.76:1. #DC2626 = 4.85:1. Token --danger kekal
   untuk teks amaran & border; hanya isian butang yang digelapkan. */
#eguru-app .btn-danger { background: #DC2626 !important; color: #fff !important; }
#eguru-app .btn-sm { padding: 8px 14px !important; font-size: var(--t5) !important; }
#eguru-app .btn-sm svg { width: 15px !important; height: 15px !important; }
#eguru-app .btn-w-auto { width: auto !important; }
#eguru-app .btn-icon { width: auto !important; min-height: 36px !important; padding: 8px !important; border-radius: var(--radius-sm) !important; background: var(--danger-light) !important; color: var(--danger) !important; box-shadow: none !important; }
#eguru-app .btn-icon svg { width: 15px !important; height: 15px !important; }
#eguru-app .btn-icon:hover { background: var(--danger) !important; color: #fff !important; }
#eguru-app .btn-icon-edit { background: var(--info-light) !important; color: var(--info) !important; }
#eguru-app .btn-icon-edit:hover { background: var(--info) !important; color: #fff !important; }
#eguru-app .btn-icon-copy { background: var(--success-light) !important; color: var(--primary) !important; }
#eguru-app .btn-icon-copy:hover { background: var(--primary) !important; color: #fff !important; }
#eguru-app .jadual-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* (@keyframes pulse-g + .btn-pulse dibuang — tiada elemen guna .btn-pulse.) */

/* ===== GRID ===== */
#eguru-app .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* Kotak tambahan agihan RPT memegang DUA medan tetapi hanya SATU pernah
   dipapar serentak (Minggu Pengukuhan ATAU Maks SK Seminggu — lihat
   onRptAgihanChange). Dalam grid dua lajur itu bermakna lajur kedua sentiasa
   kosong dan medan yang kelihatan berhenti di tengah skrin. Satu lajur:
   medan itu memenuhi lebar seperti setiap medan lain pada borang ini. */
#eguru-app #rpt-agihan-extra { grid-template-columns: 1fr; }
#eguru-app .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
/* Baris "keluaran" satu dokumen — Google Drive / Word / hardcopy. Ketiga-tiganya
   TINDAKAN SETARA ke atas bahan yang sama, jadi ia sebaris bila ruang cukup dan
   menyusun sendiri bila tidak. auto-fit + minmax dipakai (bukan 3 lajur tetap)
   kerana label "Muat Turun / Cetak (Hardcopy)" terpotong di bawah ~210px lajur. */
#eguru-app .keluaran-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
#eguru-app .keluaran-grid > .btn { margin: 0; }
/* Item grid lalai min-width:auto = lebar min-kandungan. <select> mengira
   min-kandungannya daripada OPSYEN TERPANJANG (cth "Auto — padat seluruh
   takwim (disyorkan)" ~290px), jadi pada 360px dua lajur menuntut ~419px
   dalam kotak 328px dan lajur kanan terpotong oleh .main-content
   overflow-x:hidden. min-width:0 pada pembalut (bukan pada <select>, sebab
   item grid ialah .form-group) membenarkan trek mengecil; reset pada kawalan
   pula membiarkan text-overflow:ellipsis yang sedia ada benar-benar berfungsi.
   !important perlu kerana width/max-width kawalan borang sendiri !important.
   Corak sama seperti .form-row yang sudah ada min-width:0. */
#eguru-app .grid-2 > *,
#eguru-app .grid-3 > * { min-width: 0; }
/* Reset ini WAJIB dikurung dalam .grid-2/.grid-3 sahaja. Versi global pernah
   dicuba dan ia membatalkan min-width:90px pada .jsu-tbl .form-control (baris
   ~2627) — jadual JSU 11 lajur berhenti menatal mendatar dan setiap medan
   runtuh ke ~28px pada telefon 360px. Jangan luaskan skop semula. */
#eguru-app .grid-2 select.form-control,
#eguru-app .grid-2 input.form-control,
#eguru-app .grid-3 select.form-control,
#eguru-app .grid-3 input.form-control { min-width: 0 !important; }

/* ===== HOME ===== */
#eguru-app .hero-card { background: var(--gradient-bg); color: #fff; border-radius: var(--radius-lg); padding: 20px 18px; margin-bottom: var(--sp-4); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
#eguru-app .hero-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.07); }
#eguru-app .hero-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--t3); font-weight: 600; margin-bottom: var(--sp-3); }
#eguru-app .hero-title { font-size: var(--t8); font-weight: 800; letter-spacing: -.3px; }
#eguru-app .hero-tagline { font-size: var(--t5); font-weight: 700; font-style: italic; opacity: .95; margin-top: 3px; }
#eguru-app .hero-sub { font-size: var(--t5); opacity: .85; margin-top: 4px; line-height: 1.5; }
/* Kad gabungan: selamat datang (hijau) + jadual hari ini (putih) dalam satu kotak */
#eguru-app .home-combo { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-4); box-shadow: var(--shadow-lg); border: 1.5px solid var(--border); background: var(--card-bg); }
#eguru-app .combo-hero { background: var(--gradient-bg); color: #fff; padding: 18px 18px 16px; position: relative; overflow: hidden; }
#eguru-app .combo-hero::before { content: ''; position: absolute; top: -30px; right: -30px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.07); }
#eguru-app .combo-greet { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; position: relative; }
#eguru-app .combo-title { font-size: var(--t8); font-weight: 800; letter-spacing: -.3px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
#eguru-app .combo-date { font-size: var(--t4); opacity: .9; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
#eguru-app .combo-date .gi { opacity: .9; }
#eguru-app .combo-body { padding: 15px 16px 16px; }

/* ===== Jadual Waktu Mingguan — Halaman Utama (boleh diedit sejak 2026-09-15) =====
   Grid padat BERPAKSI MASA: baris hari × lajur 5-minit (TT_UNIT), sama paksi
   dengan grid RPH — lebar sel berkadar tempoh sebenar & waktu di kepala lajur
   ialah waktu yang ditetapkan dalam "Waktu & Rehat". SATU reka bentuk di semua saiz skrin
   (permintaan pengguna: bersih & minimalis). Container query membesarkan sel
   bila kad cukup lebar — nama hari penuh, kod subjek & waktu muncul; pada
   telefon ia kekal padat (kod kelas + waktu mula sahaja). */
#eguru-app .hw-sect { padding: 14px 16px 6px; border-top: 1px solid var(--border); container-type: inline-size; }
#eguru-app .hw-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#eguru-app .hw-head-row .gi { width: 16px; height: 16px; fill: var(--primary); flex-shrink: 0; }
#eguru-app .hw-title { font-size: var(--t6); font-weight: 800; color: var(--text); flex: 1; min-width: 0; }
#eguru-app .hw-ro { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t1); font-weight: 700; color: var(--primary); background: rgba(5,150,105,.1); padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap; }
#eguru-app .hw-ro svg { width: 11px; height: 11px; fill: currentColor; }
/* Telefon: grid penuh selebar widget (tanpa jurang tepi & tanpa border luar) —
   margin negatif membatalkan padding sisi .hw-sect supaya nampak lebih luas.
   Border luar dipulihkan pada saiz besar (di bawah, dalam container query). */
#eguru-app .hw-grid { --hw-dc: 30px; overflow: hidden; font-variant-numeric: tabular-nums; margin: 0 -16px; border: 0; border-radius: 0; }
#eguru-app .hw-row { display: grid; align-items: stretch; }
#eguru-app .hw-row + .hw-row { border-top: 1px solid var(--border); }
#eguru-app .hw-head { background: var(--bg); }
/* Kepala lajur = tanda jam pada paksi masa. Label dirapatkan ke kiri supaya ia
   duduk betul-betul di atas garis jamnya (border kiri = garis tanda). Waktu
   kekal nampak pada telefon — ia rujukan utama guru. */
/* SEMUA saiz dalam blok .hw-* kini melalui tangga --t0..--t6, bukan px
   mutlak. Sebelum ini 7.5/8/8.5/9/9.5/10.5px ditulis terus, jadi label jam
   grid ini ialah SATU-SATUNYA teks yang butang A-/A+ tidak dapat besarkan —
   tepat pada teks yang guru rabun paling perlukan. Nilai lalai hampir tidak
   berubah (7.5px -> 7.92px pada telefon) tetapi kini ia turut menskala.
   JANGAN tulis semula px mutlak di sini. */
#eguru-app .hw-h { grid-row: 1; border-left: 1px solid var(--border); font-size: var(--t0); color: var(--text-light); padding: 4px 0 4px 2px; font-weight: 700; line-height: 1.15; min-width: 0; overflow: hidden; display: flex; align-items: center; }
#eguru-app .hw-hn { white-space: nowrap; letter-spacing: -.2px; }
/* Mod lajur: kepala = nombor waktu + waktu mulanya, di tengah lajur. */
#eguru-app .hw-h2 { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4px 1px; font-size: var(--t2); color: var(--text-muted); }
#eguru-app .hw-h2 .hw-pt { display: block; font-size: var(--t0); font-weight: 600; color: var(--text-light); letter-spacing: -.3px; }
/* Teks ambar guna --accent-text, bukan --accent: #F59E0B atas #FDE68A
   hanya 1.72:1, #78350F = 7.28:1. Latar/border kekal --accent. */
#eguru-app .hw-h2.hw-hr { color: var(--accent-text); background: var(--accent-light); }
#eguru-app .hw-c.hw-x { background: var(--bg); opacity: .45; }   /* hari itu tiada waktu ini */
/* Baris waktu khas (cth Jumaat) — waktu hari itu sendiri, tepat di atas barisnya. */
#eguru-app .hw-trow { background: var(--bg); }
#eguru-app .hw-t { grid-row: 1; border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--t0); font-weight: 700; color: var(--text-muted); padding: 2px 0; letter-spacing: -.3px; min-width: 0; overflow: hidden; }
/* Atas .hw-trow (--bg #F0FDF4) --accent cuma ~2.1:1; --accent-text = 8.67:1. */
#eguru-app .hw-t-r { color: var(--accent-text); }
#eguru-app .hw-day.hw-day-t { background: var(--text-light); font-size: var(--t1); letter-spacing: .3px; }
#eguru-app .hw-day { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; font-size: var(--t2); font-weight: 700; color: #fff; background: var(--gradient-bg); text-align: center; padding: 2px; line-height: 1.1; }
#eguru-app .hw-day-jam { display: flex; }
#eguru-app .hw-day-jam .gi { width: 12px; height: 12px; fill: #fff; opacity: .85; }
#eguru-app .hw-day-f { display: none; }
/* Tiada grid-row tetap: kalau guru tersilap masukkan dua kelas bertindih pada
   hari sama, sel kedua turun ke baris kedua (nampak) dan bukan bertimbun
   (tersembunyi) — lajur masa kekal sejajar. */
#eguru-app .hw-c { border-left: 1px solid var(--border); min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--t3); font-weight: 800; color: var(--text-light); overflow: hidden; padding: 2px; min-width: 0; }
/* Slot Kosong: coret senget pudar (padanan .tt-kosong di grid RPH) */
#eguru-app .hw-c.hw-k { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 5px, transparent 5px, transparent 10px); }
#eguru-app .hw-c.hw-e { color: var(--text-light); font-weight: 600; }
#eguru-app .hw-sc, #eguru-app .hw-ct { display: none; }
#eguru-app .hw-c.hw-f { color: var(--kc); background: var(--kf); box-shadow: inset 2px 0 0 var(--kc); cursor: pointer; }
#eguru-app.dark-theme .hw-c.hw-f { color: var(--kc-d); }
#eguru-app .hw-c.hw-r { background: var(--accent-light); color: var(--accent-text); font-size: var(--t1); }
#eguru-app .hw-c.hw-r .hw-rl { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .1em; font-weight: 700; display: none; }
#eguru-app .hw-row.today { background: rgba(245,158,11,.06); }
/* Sama: bila latar hari bertukar ambar, nama hari mesti gelap juga. */
#eguru-app .hw-row.today .hw-day { background: linear-gradient(135deg,#F59E0B,#D97706); color: #1F2937; }
/* ===== Varian tab RPH: grid yang SAMA + titik status, tanda KINI & Salin RPH ===== */
#eguru-app .hw-sect-rph { padding: 0; border-top: 0; }
#eguru-app .hw-sect-rph .hw-grid { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: visible; } /* visible: bar butang boleh terkeluar sel */
#eguru-app .hw-c.hw-f { position: relative; }
#eguru-app .hw-dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: var(--radius-xs); border: 2px solid var(--border); background: var(--card-bg); display: flex; align-items: center; justify-content: center; }
#eguru-app .hw-dot .gi { width: 8px; height: 8px; fill: #fff; }
#eguru-app .hw-dot.lengkap { background: var(--success); border-color: var(--success); }
#eguru-app .hw-dot.belum { background: var(--accent); border-color: var(--accent); }
#eguru-app .hw-dot.kosong { background: var(--card-bg); border-color: var(--danger); }
#eguru-app .hw-c.hw-kini { box-shadow: inset 2px 0 0 var(--kc), inset 0 0 0 2px var(--accent); }
#eguru-app .hw-c.hw-aktif { box-shadow: inset 2px 0 0 var(--kc), inset 0 0 0 2px var(--primary); }
/* Tanda KINI: teks ambar atas sel putih cuma 2.15:1 -> --accent-text 9.07:1. */
#eguru-app .hw-kini-tag { color: var(--accent-text); font-weight: 800; }
#eguru-app .hw-act { display: none; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); gap: 3px; padding: 3px; width: max-content; border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.16); z-index: 7; }
#eguru-app .hw-c.hw-f:hover { overflow: visible; z-index: 6; }
#eguru-app .hw-c.hw-f:hover .hw-act { display: flex; }
/* Bar hover (Salin RPH) dahulu 44px tinggi di TENGAH-bawah sel (.btn-icon min-height 36px) —
   menutupi tengah sel, jadi klik pada sel (dan tangan Misi Guru) menyalin RPH, bukan membuka
   editor. Kini kecil di penjuru kanan-bawah; tengah sel kekal untuk membuka editor. */
#eguru-app .hw-act { left: auto; right: 2px; transform: none; padding: 2px; }
#eguru-app .hw-c .hw-act .tt-a { min-height: 0 !important; min-width: 0 !important; padding: 3px !important; }
/* ===== Varian Halaman Utama: Jadual Waktu BOLEH DIEDIT (2026-09-15) =====
   Tindakan JW (Tambah Kelas / Import Pukal / Waktu & Rehat) duduk dalam baris
   tajuk; pada skrin sempit ia turun ke baris sendiri dan berkongsi lebar.
   Kaki: nota ringkas + Reset Jadual — bersebelahan jadual yang akan hilang. */
#eguru-app .hw-sect-jw .hw-head-row { flex-wrap: wrap; row-gap: 8px; }
#eguru-app .hw-sect-jw .hw-title { flex: 0 1 auto; }
#eguru-app .hw-bil { font-size: var(--t2); font-weight: 700; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
#eguru-app .hw-jw-aksi { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#eguru-app .hw-jw-aksi .btn { width: auto !important; padding: 6px 11px !important; font-size: var(--t4) !important; gap: 5px; }
#eguru-app .hw-jw-aksi .btn svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
    #eguru-app .hw-jw-aksi { width: 100%; margin-left: 0; }
    #eguru-app .hw-jw-aksi .btn { flex: 1 1 auto; justify-content: center; }
}
#eguru-app .hw-jw-kaki { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 6px 0 8px; }
#eguru-app .hw-jw-nota { font-size: var(--t3); color: var(--text-muted); line-height: 1.45; flex: 1 1 240px; min-width: 0; }
#eguru-app .hw-jw-nota a { color: var(--primary-text); font-weight: 700; }
/* Tindakan merosakkan kekal kecil walaupun di telefon (.btn-reset-kecil
   meregang flex:1 bawah 560px untuk bar reset RPH — bukan di sini). */
#eguru-app .hw-jw-kaki .btn-reset-kecil { flex: 0 0 auto; }
#eguru-app .hw-jw-kosong { font-size: var(--t4); color: var(--text-muted); line-height: 1.55; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
/* Sel boleh ditekan: petunjuk hover yang sama seperti grid RPH. */
#eguru-app .hw-sect-jw .hw-c.hw-f:hover { box-shadow: inset 2px 0 0 var(--kc), inset 0 0 0 2px var(--kc); }
/* Bar tindakan hover mesti boleh melepasi sel tepi; hanya pada peranti
   ber-hover — telefon (tiada hover) kekal overflow:hidden, grid 100vw
   tanpa tatal mendatar. Ketikan sel di telefon membuka borang edit. */
@media (hover: hover) { #eguru-app .hw-sect-jw .hw-grid { overflow: visible; } }
#eguru-app .rphm-acts.rphm-acts-1 { grid-template-columns: 1fr; }
#eguru-app .btn-jadual-buang { color: var(--danger-text) !important; border-color: rgba(239,68,68,.35) !important; }
#eguru-app .hw-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 9px 0 4px; font-size: var(--t2); color: var(--text-muted); }
#eguru-app .hw-legend span { display: inline-flex; align-items: center; gap: 5px; }
#eguru-app .hw-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
@container (min-width: 560px) {
    #eguru-app .hw-grid { --hw-dc: 58px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    #eguru-app .hw-h { font-size: var(--t2); padding: 6px 0 6px 4px; }
    #eguru-app .hw-h2 { padding: 6px 1px; font-size: var(--t3); }
    #eguru-app .hw-h2 .hw-pt { font-size: var(--t1); margin-top: 1px; }
    #eguru-app .hw-day-jam .gi { width: 15px; height: 15px; }
    #eguru-app .hw-ct { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: var(--t1); font-weight: 600; font-style: italic; color: var(--text-light); }
    #eguru-app .hw-c.hw-f .hw-ct { color: var(--kc); opacity: .8; }
    #eguru-app.dark-theme .hw-c.hw-f .hw-ct { color: var(--kc-d); }
    #eguru-app .hw-day { font-size: var(--t3); }
    #eguru-app .hw-day-f { display: block; }
    #eguru-app .hw-day-s { display: none; }
    #eguru-app .hw-c { min-height: 78px; font-size: var(--t5); gap: 1px; padding: 3px; }
    #eguru-app .hw-t { font-size: var(--t1); padding: 3px 0; }
    #eguru-app .hw-sc { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t1); font-weight: 600; color: var(--text-light); }
    #eguru-app .hw-c.hw-f .hw-sc { color: var(--kc); opacity: .85; }
    #eguru-app.dark-theme .hw-c.hw-f .hw-sc { color: var(--kc-d); }
    #eguru-app .hw-c.hw-r { font-size: var(--t1); }
    #eguru-app .hw-c.hw-r .hw-rl { display: block; }
    #eguru-app .hw-c.hw-r .hw-rd { display: none; }
}
/* Skrin lebar: sel ditinggikan lagi supaya grid tidak nampak melebar & leper. */
@container (min-width: 900px) {
    #eguru-app .hw-grid { --hw-dc: 72px; }
    #eguru-app .hw-c { min-height: 96px; font-size: var(--t6); gap: 2px; padding: 5px; }
    #eguru-app .hw-sc { font-size: var(--t2); }
    #eguru-app .hw-ct { font-size: var(--t2); }
    #eguru-app .hw-h2 { padding: 8px 2px; font-size: var(--t4); }
    #eguru-app .hw-h2 .hw-pt { font-size: var(--t2); }
    #eguru-app .hw-c.hw-r { font-size: var(--t2); }
    #eguru-app .hw-t { font-size: var(--t2); padding: 4px 0; }
    #eguru-app .hw-day { font-size: var(--t4); }
}
/* Guest banner */
#eguru-app .guest-banner { background: var(--info-light); border: 1.5px solid rgba(59,130,246,.2); border-radius: var(--radius); padding: 16px; margin-bottom: var(--sp-4); text-align: center; }
#eguru-app .guest-banner h4 { font-size: var(--t6); font-weight: 700; color: var(--info-text); margin-bottom: var(--sp-2); }
#eguru-app .guest-banner p { font-size: var(--t5); color: var(--text-muted); margin-bottom: var(--sp-4); line-height: 1.5; }
/* Tema gelap: --text-muted atas --info-light gelap (#1E3A5F) = 4.49:1 —
   tersasar AA 4.5 secara nipis. Panel bermaklumat perlu teks penuh, bukan
   teks pudar, kerana latarnya sendiri sudah bukan latar utama. */
#eguru-app.dark-theme .guest-banner p { color: #CBD5E1; }
/* Logged-in user card */
#eguru-app .user-card { background: var(--success-light); border: 1.5px solid rgba(16,185,129,.2); border-radius: var(--radius); padding: 14px; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 12px; }
#eguru-app .user-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gradient-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .user-avatar svg { width: 24px; height: 24px; fill: #fff; }
#eguru-app .user-card-name { font-weight: 700; font-size: var(--t6); color: var(--text); }
#eguru-app .user-card-sub { font-size: var(--t4); color: var(--text-muted); margin-top: 2px; }
/* Step cards */
#eguru-app .steps-container { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--sp-4); }
#eguru-app .step-card { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 13px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; box-shadow: var(--shadow-sm); }
#eguru-app .step-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
#eguru-app .step-card:active { transform: scale(.98); }
#eguru-app .step-num { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
#eguru-app .step-num.s1 { background: linear-gradient(135deg,#F59E0B,#D97706); }
#eguru-app .step-num.s2 { background: var(--gradient-bg); }
#eguru-app .step-num.s3 { background: linear-gradient(135deg,#3B82F6,#2563EB); }
#eguru-app .step-num svg { width: 19px; height: 19px; fill: #fff; }
#eguru-app .step-info { flex: 1; }
#eguru-app .step-name { font-weight: 700; font-size: var(--t6); color: var(--text); }
#eguru-app .step-desc { font-size: var(--t4); color: var(--text-muted); margin-top: 2px; }
#eguru-app .step-lock { color: var(--text-light); }
#eguru-app .step-lock svg { width: 15px; height: 15px; fill: currentColor; }

/* ===== INFO BOXES ===== */
#eguru-app .tip-box { background: var(--info-light); border-left: 4px solid var(--info); padding: 11px 13px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-4); display: flex; gap: 9px; align-items: flex-start; }
#eguru-app .tip-box svg { width: 15px; height: 15px; fill: var(--info); flex-shrink: 0; margin-top: 1px; }
#eguru-app .tip-box p { font-size: var(--t4); color: var(--text); line-height: 1.5; }
#eguru-app .warning-box { background: rgba(245,158,11,.08); border-left: 4px solid var(--accent); padding: 11px 13px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: var(--sp-4); display: flex; gap: 9px; align-items: flex-start; }
#eguru-app .warning-box svg { width: 15px; height: 15px; fill: var(--accent); flex-shrink: 0; margin-top: 1px; }
#eguru-app .warning-box p { font-size: var(--t4); color: var(--text); line-height: 1.5; }

/* ===== EMPTY STATE ===== */
#eguru-app .empty-state { text-align: center; padding: 26px 20px; }
#eguru-app .empty-state .empty-icon { width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--bg); border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
#eguru-app .empty-state .empty-icon svg { width: 26px; height: 26px; fill: var(--text-light); }
#eguru-app .empty-state h4 { font-size: var(--t6); font-weight: 700; color: var(--text); margin-bottom: var(--sp-1); }
#eguru-app .empty-state p { font-size: var(--t4); color: var(--text-muted); line-height: 1.5; }

/* ===== JADUAL LIST ===== */
#eguru-app .jadual-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
#eguru-app .jadual-item { background: var(--card-bg); border: 1.5px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Sama seperti .btn-accent (lihat nota di atasnya): putih atas #F59E0B
   cuma 2.15:1. Teks gelap #1F2937 = 6.83:1 (dan 8.80:1 atas ambar gelap). */
#eguru-app .jadual-hari { font-size: var(--t2); font-weight: 700; color: #1F2937; background: var(--accent); padding: 2px 8px; border-radius: var(--radius-full); display: inline-block; margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: .4px; }
#eguru-app .jadual-kelas { font-weight: 700; font-size: var(--t6); color: var(--text); }
#eguru-app .jadual-meta { font-size: var(--t4); color: var(--text-muted); margin-top: 2px; }

/* ===== FORM SECTION LABEL ===== */
#eguru-app .form-section-title { font-size: var(--t4); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .7px; margin-bottom: var(--sp-3); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
#eguru-app .form-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ===== CLASS TABS ===== */
#eguru-app .class-tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 2px; margin-bottom: var(--sp-4); }
#eguru-app .class-tabs::-webkit-scrollbar { display: none; }
#eguru-app .class-tab { padding: 8px 15px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-full); font-size: var(--t5); font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--text-muted); transition: all .2s; flex-shrink: 0; }
#eguru-app .class-tab:hover { border-color: var(--primary); color: var(--primary); }
#eguru-app .class-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(5,150,105,.3); }
#eguru-app .kelas-aktif-bar { background: var(--success-light); border: 1.5px solid rgba(5,150,105,.2); border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: 8px; }
#eguru-app .kelas-aktif-bar svg { width: 15px; height: 15px; fill: var(--primary); flex-shrink: 0; }
#eguru-app .kelas-aktif-bar strong { font-size: var(--t6); color: var(--primary-dark); font-weight: 700; }

/* ===== DSKP SUGGESTIONS ===== */
#eguru-app .dskp-panel { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); overflow: hidden; }
#eguru-app .dskp-panel-header { padding: 10px 13px; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
#eguru-app .dskp-panel-header svg { width: 15px; height: 15px; fill: var(--accent); flex-shrink: 0; }
#eguru-app .dskp-panel-title { font-size: var(--t5); font-weight: 700; color: var(--text); flex: 1; }
#eguru-app .dskp-panel-count { font-size: var(--t3); color: var(--text-muted); background: var(--border); padding: 2px 8px; border-radius: var(--radius-full); }
#eguru-app .dskp-panel-arrow { font-size: var(--t4); color: var(--text-light); transition: transform .2s; }
#eguru-app .dskp-panel.open .dskp-panel-arrow { transform: rotate(180deg); }
#eguru-app .dskp-list { padding: 0 11px 11px; display: flex; flex-direction: column; gap: 7px; }
#eguru-app .dskp-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#eguru-app .dskp-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(5,150,105,.1); }
#eguru-app .dskp-item-title { font-size: var(--t5); font-weight: 700; color: var(--text); margin-bottom: var(--sp-1); }
#eguru-app .dskp-item-sk { font-size: var(--t3); color: var(--text-muted); }
/* Senarai kini satu kad bagi setiap SK (~20-45 kad): tatal dalam panel. */
#eguru-app .dskp-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
#eguru-app .dskp-item-rpt { border-color: var(--primary); background: var(--success-light); }
#eguru-app .dskp-item-lencana { display: inline-block; font-size: var(--t2); font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #fff; background: var(--primary-dark); border-radius: var(--radius-full); padding: 2px 8px; margin-bottom: var(--sp-2); }
#eguru-app .dskp-empty-note { font-size: var(--t4); color: var(--text-muted); padding: 0 0 4px; text-align: center; }

/* (Blok .sync-status dibuang — pemilih itu tidak pernah dipadankan;
   maklum balas Google Drive melalui showToast/showResultPopup.) */

/* ===== DIVIDER ===== */
#eguru-app .divider { border: 0; border-top: 1.5px dashed var(--border); margin: 14px 0; }

/* ===== SETTINGS FIELDS ===== */
#eguru-app .settings-field { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 13px; margin-bottom: var(--sp-3); }
#eguru-app .settings-field-label { font-size: var(--t4); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 5px; }
#eguru-app .settings-field-label svg { width: 12px; height: 12px; fill: currentColor; }

/* ===== BOTTOM NAV ===== */
#eguru-app .bottom-nav { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: var(--nav-h) !important; background: var(--card-bg) !important; box-shadow: 0 -1px 0 var(--border), 0 -4px 20px rgba(0,0,0,.06) !important; display: flex !important; justify-content: space-around !important; align-items: center !important; z-index: 100 !important; padding-bottom: env(safe-area-inset-bottom) !important; }
#eguru-app .nav-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; color: var(--text-muted) !important; flex: 1 1 0 !important; min-width: 0 !important; height: 100% !important; cursor: pointer !important; transition: color .2s !important; gap: 3px !important; }
#eguru-app .nav-item.active { color: var(--primary-text) !important; }
#eguru-app .nav-icon-wrap { width: 40px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: background .2s; }
#eguru-app .nav-item.active .nav-icon-wrap { background: rgba(5,150,105,.1) !important; }
#eguru-app .nav-icon { width: 20px !important; height: 20px !important; fill: currentColor !important; }
#eguru-app .nav-label { font-size: var(--t3); font-weight: 600; }
/* Menu tambahan — sembunyi dari bottom-nav mobile; papar di sidebar desktop
   atau di dalam bubble kumpulan telefon. */
#eguru-app .nav-item.nav-extra { display: none !important; }
/* ===== BUTANG KUMPULAN BAR BAWAH (TELEFON SAHAJA) =====
   Bar bawah dahulunya campuran: tiga modul terpilih (RPT/RPH/PBD) + satu butang
   "Lagi" yang menyembunyikan 17 lagi. Guru terpaksa tahu modul mana "istimewa".
   Kini bar itu mencerminkan struktur sidebar: satu butang bagi setiap kumpulan,
   dan setiap butang membuka bubble sub-menu yang sama rupa dengan sheet Guru.
   Label dibenarkan DUA baris — "Rancang & Laksana" tidak mungkin muat satu baris
   dalam 1/6 lebar skrin 375px — dan dipangkas pada baris kedua jika masih panjang. */
#eguru-app .nav-item.nav-grp-btn { gap: 2px !important; padding: 0 3px !important; }
#eguru-app .nav-item.nav-grp-btn .nav-label {
    /* Sedikit lebih kecil daripada label item biasa (--t3): label kumpulan
       terpanjang ("Int & Pel") lebih pendek daripada "Intervensi"/"Pelaporan"
       yang digantikannya. Bar kini TUJUH butang (Utama · PdPC · Taksir ·
       Int & Pel · Bank · Tools · Guru), diukur 48–54px setiap satu pada
       375px. Klem dua baris di bawah kekal sebagai jaring keselamatan kalau
       label yang lebih panjang ditambah kelak. */
    font-size: var(--t2); line-height: 1.15; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
#eguru-app .nav-section { display: none !important; }
/* Tajuk kumpulan akordion — sidebar desktop sahaja. Di telefon bar bawah
   kekal rata, jadi tajuk tiada makna di sana dan disembunyikan sepenuhnya. */
#eguru-app .nav-grp { display: none !important; }
/* Pemisah kelompok bawah sidebar — juga desktop sahaja: di bar telefon tiada
   kelompok bawah untuk dipisahkan (ia hidup dalam sheet Guru, #akaun-sheet). */
#eguru-app .nav-pisah { display: none !important; }
#eguru-app .nav-soon-badge { display: none; }
/* Baris menu .lagi-item — bubble kumpulan (#grp-sheet), sheet Guru (#akaun-sheet)
   dan palet Cari modul (#cari-modal). Nama "lagi" warisan sheet "Lagi" lama. */
#eguru-app .lagi-item { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: var(--radius-md); cursor: pointer; color: var(--text); font-weight: 600; }
#eguru-app .lagi-item:hover { background: var(--bg); }
#eguru-app .lagi-item.soon { color: var(--text-muted); }
/* Item yang sedang dibuka. Di telefon, bubble kumpulan ialah SATU-SATUNYA tempat
   item modul kelihatan (bar bawah hanya memapar butang kumpulan), jadi tanda
   "anda di sini" mesti hidup di dalam bubble. */
#eguru-app .lagi-item.aktif { background: rgba(5,150,105,.1); color: var(--primary-text); }
#eguru-app .lagi-item svg { width: 21px; height: 21px; fill: currentColor; flex-shrink: 0; }
#eguru-app .lagi-item.admin-only:not(.admin-on) { display: none; }
#eguru-app .lagi-sec { font-size: var(--t2); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); padding: 12px 12px 4px; }
/* --- NOTA: sheet "Lagi" & gaya akordion di dalamnya sudah DIBUANG ---
   Sheet itu menyalin seluruh menu ke dalam HTML kedua (termasuk tajuk kumpulan
   yang boleh dilipat, berkongsi keadaan dengan sidebar). Ia digantikan oleh satu
   bubble #grp-sheet yang DIJANA daripada item sidebar itu sendiri — tiada
   salinan kedua untuk terpesong, dan tiada keadaan lipat untuk diselaraskan
   kerana bubble sentiasa memapar semua item kumpulan yang ditekan. */
#eguru-app .lagi-pisah { height: 1px; background: var(--border); margin: 8px 10px; }
#eguru-app .lagi-soon-badge { margin-left: auto; font-size: var(--t3); font-weight: 700; background: var(--bg); color: var(--text-muted); padding: 2px 8px; border-radius: var(--radius-full); }
/* ===== POPOVER NAV MOBILE (speech-bubble) — butang kumpulan & Guru di bottom-nav ===== */
/* Kotak menu keluar di ATAS nav bar dengan ekor menunjuk butang; nav bar kekal kelihatan & boleh ditekan. */
#eguru-app .nav-pop { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 9000; }
#eguru-app .nav-pop-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); backdrop-filter: blur(2px); animation: navPudarMasuk .34s ease both; }
#eguru-app .nav-pop-bubble { position: absolute; left: 10px; right: 10px; bottom: 16px; z-index: 2; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 34px rgba(0,0,0,.22); padding: 8px; max-height: 62dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: navPopNaik .46s cubic-bezier(.16,1,.3,1) both, navPudarMasuk .4s ease both; }
#eguru-app .nav-pop-title { text-align: left; font-size: var(--t7); font-weight: 800; color: var(--primary-text); padding: 4px 10px 8px; }
#eguru-app .nav-pop-tail { position: absolute; bottom: 8px; z-index: 3; width: 16px; height: 16px; background: var(--card-bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-bottom-right-radius: 3px; transform: rotate(45deg); animation: navEkorNaik .46s cubic-bezier(.16,1,.3,1) both, navPudarMasuk .4s ease both; }
/* ===== ANIMASI POPOVER =====
   Dahulu hanya kotak bubble beranimasi, .2s, naik 10px — pantas sehingga ia
   terasa "terpacak" dan bukan "muncul". Tiga bahagian kini bergerak bersama
   (scrim, bubble, ekor) dengan lengkung yang melambat di hujung, jarak naik
   lebih jauh, dan tempoh lebih panjang supaya mata dapat mengikutinya.
   Menutup pun beranimasi (kelas .nav-pop-keluar ditambah oleh tutupNavPop()
   sebelum display:none) — bubble yang naik lembut tetapi hilang serta-merta
   terasa lebih pelik daripada tiada animasi sama sekali. */
/* GERAKAN dan PUDAR ialah dua animasi berasingan, sengaja. Dalam satu keyframe
   tunggal kedua-duanya terpaksa berkongsi lengkung yang sama: lengkung yang
   melambat di hujung (sedap untuk gerakan) menolak opacity ke ~0.83 pada 25%
   tempoh — jadi bubble sudah "ada" sebelum ia sampai, dan itulah yang membuatkan
   versi lama terasa muncul mengejut. Kini gerakan naik 26px dengan lengkung
   melambat (.46s) manakala opacity dipudar rata sepanjang .4s. */
@keyframes navPudarMasuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes navPudarKeluar { from { opacity: 1; } to { opacity: 0; } }
@keyframes navPopNaik { from { transform: translateY(26px) scale(.985); } to { transform: translateY(0) scale(1); } }
@keyframes navEkorNaik { from { transform: translateY(26px) rotate(45deg); } to { transform: translateY(0) rotate(45deg); } }
@keyframes navPopTurun { from { transform: translateY(0) scale(1); } to { transform: translateY(14px) scale(.99); } }
@keyframes navEkorTurun { from { transform: translateY(0) rotate(45deg); } to { transform: translateY(14px) rotate(45deg); } }
#eguru-app .nav-pop.nav-pop-keluar .nav-pop-scrim { animation: navPudarKeluar .19s ease both; }
#eguru-app .nav-pop.nav-pop-keluar .nav-pop-bubble { animation: navPopTurun .19s ease-in both, navPudarKeluar .19s ease-in both; }
#eguru-app .nav-pop.nav-pop-keluar .nav-pop-tail { animation: navEkorTurun .19s ease-in both, navPudarKeluar .19s ease-in both; }
/* Guru yang menghidupkan "kurangkan gerakan" pada telefon masih perlu melihat
   menu itu — jadi animasi dipendekkan, bukan dibuang (elemen kekal pada
   keadaan akhirnya kerana `both`). */
@media (prefers-reduced-motion: reduce) {
    #eguru-app .nav-pop-scrim,
    #eguru-app .nav-pop-bubble,
    #eguru-app .nav-pop-tail { animation-duration: .01ms !important; }
}
/* Halaman "Segera" (teaser) */
/* Tiada had lebar — keterangan memenuhi kad (lihat "PROSA MEMENUHI KOTAKNYA"). */
#eguru-app .soon-wrap { text-align: center; padding: 16px 0; }
#eguru-app .soon-ico { width: 76px; height: 76px; border-radius: var(--radius-lg); margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(5,150,105,.1); }
#eguru-app .soon-ico svg { width: 38px; height: 38px; fill: var(--primary); }
#eguru-app .soon-badge2 { display: inline-block; font-size: var(--t3); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: #FEF3C7; color: #92400e; padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: var(--sp-4); }
#eguru-app .soon-tajuk { font-size: var(--t9); font-weight: 800; margin-bottom: var(--sp-2); }
#eguru-app .soon-desc { color: var(--text-light); line-height: 1.6; margin-bottom: var(--sp-5); }
#eguru-app .soon-poin { text-align: left; max-width: 430px; margin: 0 auto 22px; display: flex; flex-direction: column; gap: 11px; }
#eguru-app .soon-poin-item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t6); }
#eguru-app .soon-poin-item svg { width: 20px; height: 20px; fill: var(--primary); flex-shrink: 0; margin-top: 1px; }

/* ===== DESKTOP: TAB BAWAH -> MENU SIDEBAR KIRI ===== */
@media (min-width: 900px) {
    #eguru-app {
        display: grid !important;
        grid-template-columns: var(--sidebar-w) 1fr;
        grid-template-rows: var(--topbar-h) 1fr;
        grid-template-areas: "topbar topbar" "sidebar main";
    }
    #eguru-app .topbar { grid-area: topbar; }
    #eguru-app .main-content {
        grid-area: main;
        padding: 22px 28px !important;
        padding-bottom: 28px !important;
    }
    /* Tab bawah bertukar jadi sidebar menegak di kiri */
    #eguru-app .bottom-nav {
        grid-area: sidebar;
        position: static !important;
        width: auto !important; height: auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 16px 12px !important;
        box-shadow: inset -1px 0 0 var(--border) !important;
        overflow-y: auto !important;
        /* Bar skrol NIPIS, corak yang sama seperti .main-content (baris ~3146).
           Ini bukan hiasan: dengan ketiga-tiga kumpulan dibuka senarai ini
           MEMANG menatal (diukur 1146px isi dalam 827px ruang pada 1024x800),
           jadi bar skrol klasik Windows 17px muncul dan memakan lebar label —
           cukup untuk memotong "Kajian Tindakan" menjadi "Kajian Tindak…".
           `thin` mengecilkannya kepada 12px dan memulangkan 5px itu.
           BUKAN scrollbar-gutter: gutter menempah lebar itu SELAMANYA, termasuk
           apabila semua kumpulan tertutup dan tiada apa yang menatal. */
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }
    #eguru-app .bottom-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
    #eguru-app .bottom-nav::-webkit-scrollbar-track { background: transparent; }
    #eguru-app .bottom-nav::before {
        content: 'MENU';
        font-size: var(--t1); font-weight: 800; letter-spacing: 1.4px;
        color: var(--text-light); padding: 4px 14px 12px;
    }
    #eguru-app .nav-item {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        width: 100% !important; height: auto !important;
        gap: 13px !important;
        padding: 12px 14px !important;
        border-radius: var(--radius-md) !important;
        color: var(--text-muted) !important;
        transition: background .18s, color .18s !important;
    }
    #eguru-app .nav-item:hover { background: var(--bg) !important; color: var(--primary-text) !important; }
    #eguru-app .nav-item.active { background: rgba(5,150,105,.1) !important; color: var(--primary-text) !important; }
    #eguru-app .nav-item.active .nav-icon-wrap { background: transparent !important; }
    #eguru-app .nav-icon-wrap { width: auto !important; height: auto !important; }
    #eguru-app .nav-icon { width: 21px !important; height: 21px !important; }
    /* Label sidebar: SATU BARIS sahaja. Nama panjang ("Exam", "Jadual Waktu") dahulunya
       melimpah ke baris kedua pada laptop kecil dan menjadikan item itu lebih tinggi daripada
       yang lain. Font dikecilkan sedikit + nowrap; jika masih tak cukup ruang ia dipendekkan
       dengan elipsis (…) — bukan dibalut ke baris baharu. */
    #eguru-app .nav-label {
        font-size: var(--t5) !important; font-weight: 600 !important;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    /* Support + Flow Tutorial + Murid + Guru (+ Ejen AI & Saiz Teks)
       dilekapkan bersama di bahagian paling bawah sidebar, dengan garis pemisah
       di atas kumpulan itu.
       Disusun dengan `order` (bukan dipindah dalam HTML) supaya susunan DOM —
       yang juga susunan bar bawah telefon: Utama · PdPC · Taksir · Int & Pel ·
       Bank · Tools · Guru — kekal tidak berubah. Pseudo 'MENU' (::before)
       tiada order, jadi ia kekal 0 dan sentiasa di paling atas. */
    #eguru-app .bottom-nav > * { order: 1; }
    /* Pemisah ialah ELEMEN SENDIRI (.nav-pisah), bukan ::before pada #nav-tools.
       Sebagai pseudo-element ia terpaksa hidup di dalam padding item itu, jadi
       padding yang memberi jarak kepada garis turut membesarkan KOTAK item —
       latar hover/active Tools jadi 24px lebih tinggi daripada setiap item lain,
       label tersorong ke bawah dalam kotak itu, dan garis pemisah pula tertimbus
       di bawah latar hijau itu. Sebagai elemen berasingan: pinning (`margin-top:
       auto`) dan jarak pemisah hidup pada pemisah itu sendiri, dan #nav-tools
       kembali kepada padding yang sama seperti item lain.

       `padding-top` pada pemisah (bukan margin-top) kerana margin-top dipakai
       oleh `auto` untuk menolak kelompok bawah ke bawah — dan `auto` mengecut
       jadi 0 sebaik sidebar cukup penuh untuk menatal. Padding memberi jarak
       minimum yang tidak boleh mengecut, jadi garis tidak pernah melekat pada
       tajuk kumpulan terakhir. */
    #eguru-app .bottom-nav .nav-pisah {
        /* !important kerana peraturan global `.nav-pisah { display: none !important }`
           (telefon) hanya boleh ditewaskan oleh !important juga — sama seperti
           .nav-grp di atas. */
        display: block !important; order: 2; flex: 0 0 auto; height: 0;
        padding-top: 12px;                          /* jarak di ATAS garis */
        border-bottom: 1px solid var(--border);     /* garis itu sendiri */
        margin: auto 6px 10px;                      /* auto = pin; 10px di BAWAH garis */
    }
    /* #nav-tools & #nav-kedai TIADA `order` di sini lagi: kedua-duanya kini
       dalam kelompok ATAS (2026-09-16). `order` menewaskan susunan DOM, jadi
       meninggalkan baris lama akan menarik mereka kembali ke bawah walaupun
       markupnya sudah dipindah. Mereka mewarisi `order: 1` daripada
       `.bottom-nav > *` seperti setiap item menu atas yang lain. */
    #eguru-app .bottom-nav #nav-komuniti { order: 4; }
    #eguru-app .bottom-nav #nav-tutorial { order: 6; }
    /* Murid (2026-09-23) — halaman sendiri, TEPAT di atas Akaun. */
    #eguru-app .bottom-nav #nav-portalmurid { order: 7; }
    #eguru-app .bottom-nav #nav-profile { order: 8; }
    /* Suis Ejen AI + Saiz Teks: PASANGAN di BAWAH SEKALI.
       Tanpa `order` di sini, .ejen-ctl mewarisi `order: 1` daripada
       `.bottom-nav > *` di atas, jadi ia melompat ke KELOMPOK ATAS bersama
       item menu utama walaupun markupnya berada di hujung <nav>. Kedua-duanya
       kini dipin selepas #nav-profile supaya susunan VISUAL sama seperti
       susunan DOM (penting juga untuk tab & pembaca skrin). */
    #eguru-app .bottom-nav .ejen-ctl { order: 9; }
    #eguru-app .bottom-nav .fs-ctl { order: 10; }
    /* Sidebar desktop: papar menu tambahan; sembunyi butang kumpulan bar bawah
       (telefon sahaja — di sini kumpulan ialah tajuk akordion, bukan butang). */
    #eguru-app .nav-item.nav-extra { display: flex !important; }
    #eguru-app .nav-item.nav-grp-btn { display: none !important; }
    #eguru-app .nav-item.nav-soon { color: var(--text-muted) !important; }
    #eguru-app .nav-section { display: block !important; font-size: var(--t1); font-weight: 800; letter-spacing: 1px; color: var(--text-light); padding: 14px 14px 4px; text-transform: uppercase; }

    /* ===== KUMPULAN AKORDION SIDEBAR =====
       Menu rata 20 item menjadi dinding yang mustahil diimbas. Item kini
       dikumpul mengikut fasa kerja guru: PdPC, Taksir (kod 'pbd'), Int & Pel
       — nama yang sama seperti fasa dalam Flow Tutorial (lihat nota FLOW_FASA)
       (Bank kini SATU item rata, 2026-09-25). Hanya SATU kumpulan terbuka pada satu masa (2026-09-25,
       toggleNavGrp dalam sg_utama.js).
       Tools BUKAN kumpulan: ia satu item rata dalam menu atas (#nav-tools).

       Peraturan menyembunyi hidup DI DALAM media query ini sahaja. Itu
       disengajakan: di telefon .nav-extra sudah pun tersembunyi, jadi kalau
       peraturan ini global ia akan bertindih dengan logik bar bawah dan
       boleh menyembunyikan item telefon yang sepatutnya kekal. */
    /* TAJUK KUMPULAN = tahap UTAMA menu.
       Dahulu ia --t2 (10px) berwarna --text-light, iaitu lebih KECIL dan lebih
       PUDAR daripada item di bawahnya (--t5, --text-muted) — hierarki terbalik.
       Kini: hijau jenama + saiz sama seperti item tahap atas (--t5), dan itemnya
       satu tangga lebih kecil (lihat .nav-item[data-grp] .nav-label).
       --primary-text (#047857), BUKAN --primary (#059669): hijau jenama sebagai
       TEKS atas latar cerah hanya 3.77:1 — lihat nota palet di :root.
       text-transform: uppercase DIBUANG kerana ia menukar "PdPC" jadi "PDPC";
       istilah rasmi KPM itu memang bercampur huruf besar/kecil. */
    /* SATU TEPI KIRI untuk SEMUA baris tahap atas.
       Dahulu chevron duduk di HADAPAN ikon fasa, jadi ia menolak ikon + label
       tajuk kumpulan 20px ke kanan — sedangkan item submenu di bawahnya hanya
       diinden 6px. Hasilnya hierarki TERBALIK: "PdPC" bermula lebih ke kanan
       daripada "JW & RPH" yang dimilikinya, dan sidebar mempunyai TIGA tepi
       kiri berbeza (item atas 23px, submenu 29px, tajuk kumpulan 41px).
       Chevron kini dialihkan ke HUJUNG KANAN baris (order + margin-left:auto,
       bukan tukar HTML), jadi ikon & label tajuk kumpulan jatuh tepat sebaris
       dengan Utama/Tools/Akaun. Tinggal DUA tepi sahaja: tahap atas, dan
       submenu yang diinden ke kanan. */
    #eguru-app .nav-grp {
        display: flex !important; align-items: center; gap: 13px;
        font-size: var(--t6); font-weight: 800; letter-spacing: .2px;
        color: var(--primary-text); line-height: 1.3;
        padding: 14px 14px 6px; cursor: pointer; user-select: none;
        transition: color .15s;
    }
    #eguru-app .nav-grp:hover { color: var(--primary); }
    #eguru-app .nav-grp:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-xs); }
    /* order: 3 meletakkannya SELEPAS ikon, label dan titik .ada-aktif (yang
       semuanya order 0) tanpa menyentuh susunan DOM — jadi pembaca skrin masih
       membaca ikon → nama kumpulan, dan chevron kekal aksesori terakhir. */
    #eguru-app .nav-grp-chev {
        width: 12px; height: 12px; flex-shrink: 0; fill: currentColor;
        order: 3; margin-left: auto;
        transform: rotate(90deg); transition: transform .18s ease;
    }
    #eguru-app .nav-grp.tutup .nav-grp-chev { transform: rotate(0deg); }
    /* Ikon fasa. Kerana kumpulan kini bermula TERTUTUP, tajuk inilah satu-satunya
       yang kelihatan — ikon memberi setiap fasa bentuk tersendiri supaya sidebar
       boleh diimbas tanpa membaca lima label huruf besar yang serupa.
       21px = saiz yang SAMA seperti ikon item tahap atas (.nav-icon), supaya
       lajur ikon tahap atas benar-benar satu lajur. Hierarki dibawa oleh warna
       hijau + berat 800 + saiz teks, bukan oleh ikon yang lebih kecil. */
    #eguru-app .nav-grp-ikon {
        width: 21px; height: 21px; flex-shrink: 0; fill: currentColor; opacity: .85;
    }
    #eguru-app .nav-grp:hover .nav-grp-ikon,
    #eguru-app .nav-grp.ada-aktif .nav-grp-ikon { opacity: 1; }
    /* Kumpulan tertutup yang MENGANDUNGI tab aktif ditanda, supaya guru nampak
       di mana mereka berada walaupun senarai itu dilipat. */
    #eguru-app .nav-grp.ada-aktif { color: var(--primary); }
    #eguru-app .nav-grp.ada-aktif::after {
        content: ''; width: 5px; height: 5px; border-radius: 50%;
        background: var(--primary); margin-left: 2px; flex-shrink: 0;
    }
    #eguru-app .nav-item.nav-grp-tutup { display: none !important; }
    /* Item dalam kumpulan diinden SATU TANGGA PENUH ke kanan — dan satu
       tangga saiz LEBIH KECIL daripada tajuk kumpulannya (--t4 lwn --t6),
       kekal pada warna teks sekunder yang diwarisi daripada .nav-item. Jadi
       hierarki terbaca daripada empat isyarat: warna, saiz, inden, rel.

       34px BUKAN nombor cantik — ia diukur. Pada jalur 900–1279px sidebar
       hanya 200px, dan label submenu terpanjang ialah "Kajian Tindakan".
       Diukur dalam pelayar: 34px inden (dengan gap 10px & padding kanan 10px)
       meninggalkan 5.6px lapang sebelum label itu dipotong elipsis; 42px
       memotongnya. Jadi 34px ialah inden terdalam yang masih memuatkan setiap
       nama modul pada laptop kecil. Gap 10px (bukan 13px) kerana ikon submenu
       memang lebih kecil (16px lwn 21px) — jarak yang sama akan nampak longgar,
       dan setiap piksel di sini dibayar oleh label. */
    #eguru-app .nav-item[data-grp] {
        padding-left: 34px !important; padding-right: 6px !important;
        gap: 10px !important;
    }
    /* Rel menegak: garis halus yang mengikat setiap item kepada tajuk kumpulan
       di atasnya. left:24px meletakkannya betul-betul di bawah PUSAT ikon fasa,
       jadi ia terbaca sebagai "menuruni" tajuk itu. top/bottom -2px merentasi
       gap 4px antara item supaya segmen bercantum menjadi SATU garis lurus,
       bukan tangga putus-putus.
       ::before selamat di sini: satu-satunya .nav-item::before yang lain ialah
       "benjolan" item aktif telefon, dan ia hidup dalam @media (max-width:899px)
       — dua peraturan itu tidak pernah aktif serentak. */
    #eguru-app .nav-item[data-grp]::before {
        content: ''; position: absolute; left: 23.5px; top: -2px; bottom: -2px;
        width: 2px; border-radius: 1px; background: var(--border);
        pointer-events: none;
    }
    /* Item TERAKHIR setiap kumpulan tidak menggantungkan ekor 2px ke dalam
       ruang kosong sebelum tajuk kumpulan berikutnya. Pelayar tanpa :has()
       mengabaikan peraturan ini dan hanya mengekalkan ekor itu — degradasi
       yang tidak menjejaskan apa-apa. */
    #eguru-app .nav-item[data-grp]:not(:has(+ .nav-item[data-grp]))::before { bottom: 0; }
    /* Pseudo-element dilukis DI ATAS latar elemennya sendiri, jadi pada baris
       aktif rel kelabu melintasi pil hijau dan kelihatan seperti calar. Pada
       baris itu ia menjadi hijau — cabang aktif terbaca sebagai satu unit. */
    #eguru-app .nav-item[data-grp].active::before { background: var(--primary); }
    /* IKON submenu dikecilkan kepada 16px. Inilah punca sebenar "tiada beza"
       dahulu: label memang lebih kecil (--t4 lwn --t6), tetapi ikonnya 21px —
       sama besar seperti ikon baris tahap atas, jadi barisnya kelihatan sama
       berat. 16px lwn 21px menjadikan submenu lebih ringan sebelum sepatah
       perkataan dibaca. */
    #eguru-app .nav-item[data-grp] .nav-label { font-size: var(--t4) !important; }
    #eguru-app .nav-item[data-grp] .nav-icon { width: 16px !important; height: 16px !important; }
    /* Warna teks + ikon (ikon guna currentColor) satu tangga lebih pudar
       daripada item tahap atas. :not(.active) supaya item yang sedang dibuka
       kekal hijau — jika tidak label kekal kelabu sementara ikon jadi hijau. */
    #eguru-app .nav-item[data-grp]:not(.active) { color: var(--text-light) !important; }
    #eguru-app .nav-soon-badge { display: inline-block !important; margin-left: auto; flex-shrink: 0; font-size: var(--t3); font-weight: 700; background: var(--bg); color: var(--text-muted); padding: 2px 7px; border-radius: var(--radius-full); }
}

/* ===== NOTA: jalur ikon 900–1200px telah DIBUANG (Fasa 2) =====
   Dahulunya band 900–1200px memaparkan sidebar ikon-sahaja: label disembunyi
   (height:0) dan nama modul hanya muncul sebagai flyout ketika HOVER.
   Masalahnya iPad Pro landskap = 1024px dan ia peranti SENTUH — tiada hover,
   jadi guru nampak 14 ikon tanpa sebarang nama. Kini sidebar berlabel dipakai
   untuk semua lebar >= 900px, dengan --sidebar-w yang lebih ramping pada
   skrin kecil (lihat "FASA 1" di hujung stylesheet). */

/* ===== MOBILE: kurangkan jurang tepi supaya kandungan tidak sempit ===== */
@media (max-width: 640px) {
    #eguru-app .main-content { padding: 4px 4px calc(var(--nav-h) + 4px) !important; }
    #eguru-app .card { padding: 8px !important; }
    #eguru-app .combo-body { padding: 12px 8px 12px !important; }
    #eguru-app .combo-hero { padding: 16px 12px 14px !important; }
}

/* ===== MOBILE: jadual waktu EDGE-TO-EDGE (Halaman Utama & tab RPH) =====
   Jadual dikeluarkan daripada semua padding bekasnya terus ke tepi skrin
   (teknik full-bleed 100vw) supaya lajur mendapat setiap piksel lebar. Tajuk,
   legenda & kandungan kad lain kekal berjarak seperti biasa.
   .home-combo asalnya overflow:hidden — ia dibuka supaya grid boleh melepasi
   tepi kad; sudut atas hero diberi radiusnya sendiri supaya kad kekal bulat. */
@media (max-width: 640px) {
    #eguru-app .home-combo { overflow: visible; }
    #eguru-app .combo-hero { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    #eguru-app .hw-grid,
    #eguru-app .rph-narrow {
        width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        border-left: 0; border-right: 0; border-radius: 0;
    }
    /* Senarai RPH telefon: jalur warna hari & inden kad dibuang supaya kad juga
       rata tepi; jalur tajuk hari (sudah berwarna & selebar skrin) yang
       mengumpulkan hari, jadi rel warna itu tidak lagi diperlukan. */
    #eguru-app .rph-narrow .rphm-day { border-radius: 0; }
    #eguru-app .rph-narrow .rphm-cards { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* ===== RPT: kad ringkas+kembang utk telefon, jadual utk tablet/desktop ===== */
#eguru-app .rpt-narrow { display: none; }
@media (max-width: 640px) {
    #eguru-app .rpt-wide { display: none; }
    #eguru-app .rpt-narrow { display: block; }
    #eguru-app .rpt-wrap { border: none; overflow: visible; }
}
@media (min-width: 641px) and (max-width: 900px) {
    #eguru-app .rpt-wide { display: none; }
    #eguru-app .rpt-narrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
    #eguru-app .rptm-card, #eguru-app .rptm-cuti { margin-bottom: 0; }
    #eguru-app .rptm-cuti { grid-column: 1 / -1; }
    #eguru-app .rpt-wrap { border: none; overflow: visible; }
}
#eguru-app .rptm-card { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); background: var(--card-bg); overflow: hidden; }
#eguru-app .rptm-card.now { border-color: var(--accent); }
#eguru-app .rptm-card.rpt-now-flash { animation: rptFlash 1.6s ease-out; }
#eguru-app .rptm-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; cursor: pointer; }
/* Lencana ambar: teks gelap, bukan putih (putih atas #F59E0B = 2.15:1). */
#eguru-app .rptm-wk { flex: 0 0 auto; background: var(--accent); color: #1F2937; font-size: var(--t4); font-weight: 700; border-radius: var(--radius-full); padding: 3px 10px; }
#eguru-app .rptm-sum { flex: 1; min-width: 0; }
#eguru-app .rptm-tajuk { font-size: var(--t6); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .rptm-date { font-size: var(--t4); color: var(--text-muted); }
#eguru-app .rptm-ok { color: var(--primary); display: flex; flex-shrink: 0; }
#eguru-app .rptm-ok .gi { width: 18px; height: 18px; }
#eguru-app .rptm-empty { font-size: var(--t2); color: var(--text-light); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
#eguru-app .rptm-now { font-size: var(--t1); font-weight: 800; color: #1F2937; background: var(--accent); border-radius: var(--radius-full); padding: 3px 8px; letter-spacing: .4px; white-space: nowrap; flex-shrink: 0; }
#eguru-app .rptm-chev { width: 18px; height: 18px; flex-shrink: 0; fill: var(--text-light); transition: transform .2s; }
#eguru-app .rptm-card.open .rptm-chev { transform: rotate(180deg); }
#eguru-app .rptm-body { display: none; padding: 2px 12px 12px; border-top: 1px solid var(--border); }
#eguru-app .rptm-card.open .rptm-body { display: block; }
#eguru-app .kvrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--t5); }
#eguru-app .kvrow:last-of-type { border-bottom: none; }
#eguru-app .kvrow > span { color: var(--text-muted); flex: 0 0 auto; }
#eguru-app .kvrow > b { color: var(--text); font-weight: 700; text-align: right; min-width: 0; word-break: break-word; }
#eguru-app .rptm-actions { display: flex; gap: 8px; margin-top: 11px; }
#eguru-app .rptm-actions .btn-jana-rph { flex: 1; justify-content: center; padding: 9px; font-size: var(--t6); }
#eguru-app .rptm-pecah-btn { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 700; font-size: var(--t5); cursor: pointer; }
#eguru-app .rptm-pecah-btn.on { border-color: var(--primary); color: var(--primary); }
#eguru-app .rptm-pecah { margin-top: 9px; }
#eguru-app .rptm-cuti { background: var(--accent-light); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--sp-3); font-size: var(--t5); font-style: italic; color: var(--text); display: flex; align-items: center; gap: 6px; }
#eguru-app .rptm-cuti .gi { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== RPH: seksyen ikut hari + kad kelas ringkas/kembang utk telefon & tablet ===== */
#eguru-app .rph-narrow { display: none; }
@media (max-width: 640px) {
    #eguru-app .rph-wide { display: none; }
    #eguru-app .rph-narrow { display: block; }
}
@media (min-width: 641px) and (max-width: 900px) {
    #eguru-app .rph-wide { display: none; }
    #eguru-app .rph-narrow { display: block; }
    #eguru-app .rph-narrow .rphm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
}
#eguru-app .rphm-day { display: flex; align-items: center; gap: 7px; font-size: var(--t3); font-weight: 800; letter-spacing: .3px; margin: 14px 0 7px; padding: 7px 11px; border-radius: var(--radius-sm); background: hsla(var(--dh,145),62%,50%,.14); color: hsl(var(--dh,145),52%,32%); border-left: 4px solid hsl(var(--dh,145),55%,47%); }
#eguru-app .rphm-day.today { box-shadow: inset 0 0 0 2px hsl(var(--dh,145),58%,47%); scroll-margin-top: 10px; }
#eguru-app .rphm-today-tag { margin-left: auto; font-size: var(--t5); font-weight: 800; letter-spacing: .3px; color: #fff; background: hsl(var(--dh,145),55%,45%); padding: 2px 8px; border-radius: var(--radius-full); }
#eguru-app .rphm-cards { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid hsla(var(--dh,145),55%,50%,.3); padding-left: 9px; margin-left: 3px; }
#eguru-app .rphm-card { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); overflow: hidden; }
#eguru-app .rphm-card.now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#eguru-app .rphm-head { display: flex; align-items: center; gap: 9px; padding: 10px 11px; cursor: pointer; }
#eguru-app .rphm-init { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm); color: #fff; font-size: var(--t3); font-weight: 700; display: flex; align-items: center; justify-content: center; }
#eguru-app .rphm-sum { flex: 1; min-width: 0; }
#eguru-app .rphm-subj { font-size: var(--t6); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .rphm-meta { font-size: var(--t4); color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
#eguru-app .rphm-meta .gi { width: 13px; height: 13px; }
#eguru-app .rphm-ok { color: var(--primary); display: flex; flex-shrink: 0; }
#eguru-app .rphm-ok .gi { width: 18px; height: 18px; }
#eguru-app .rphm-no { font-size: var(--t1); font-weight: 700; border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; flex-shrink: 0; }
#eguru-app .rphm-no.belum { color: var(--accent-text); background: var(--accent-light); border: 1px solid var(--accent); }
#eguru-app .rphm-no.kosong { color: var(--danger-text); background: var(--danger-light); border: 1px solid var(--danger); }
#eguru-app .rphm-nowtag { font-size: var(--t1); font-weight: 800; color: #1F2937; background: var(--accent); border-radius: var(--radius-full); padding: 3px 7px; letter-spacing: .3px; white-space: nowrap; flex-shrink: 0; }
#eguru-app .rphm-card.open .rptm-chev { transform: rotate(180deg); }
#eguru-app .rphm-body { display: none; padding: 0 11px 11px; border-top: 1px solid var(--border); }
#eguru-app .rphm-card.open .rphm-body { display: block; }
#eguru-app .rphm-prim { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid rgba(5,150,105,.25); border-radius: var(--radius-sm); background: var(--success-light); color: var(--primary-dark); font-weight: 700; font-size: var(--t6); cursor: pointer; }
#eguru-app .rphm-prim svg { width: 16px; height: 16px; fill: currentColor; }
#eguru-app .rphm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
#eguru-app .rphm-acts button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); font-size: var(--t4); font-weight: 600; cursor: pointer; }
#eguru-app .rphm-acts button svg { width: 14px; height: 14px; fill: currentColor; }
#eguru-app .rphm-acts button.danger { color: var(--danger); border-color: rgba(239,68,68,.3); }

/* ===== TIMETABLE GRID ===== */
#eguru-app .tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 4px; padding-bottom: 4px; }
#eguru-app .tt-wrap::-webkit-scrollbar { height: 6px; }
#eguru-app .tt-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
#eguru-app .tt-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: var(--sp-3); }
#eguru-app .tt-day { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--gradient-bg); color: #fff; border-radius: var(--radius-sm); font-size: var(--t3); font-weight: 700; padding: 6px 4px; line-height: 1.2; }
#eguru-app .tt-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
#eguru-app .tt-cells { display: flex; gap: 8px; flex: 1; min-width: 0; }
#eguru-app .tt-empty { display: flex; align-items: center; font-size: var(--t4); color: var(--text-light); padding: 6px 12px; font-style: italic; }
/* Sel kelas: TIADA sempadan — guna bayang lembut ikut warna kelas (hue) sahaja.
   --kelas-shadow ditetapkan inline (gridCellHtml). Status RPH ditunjuk oleh
   .tt-rph-dot — namanya "dot" atas sebab sejarah, tetapi ia dirender sebagai
   petak bersegi 17px: berongga = kosong, berisi = belum lengkap, berisi +
   tanda semak = lengkap. Legenda halaman memakai elemen yang SAMA. */
#eguru-app .tt-cell { position: relative; flex: 1 1 170px; min-width: 156px; background: var(--card-bg); border: none; border-radius: var(--radius-sm); padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--kelas-shadow, var(--shadow-sm)); transition: box-shadow .18s, transform .18s; }
#eguru-app .tt-badge { position: absolute; top: 6px; right: 8px; font-size: var(--t5); line-height: 1; }
#eguru-app .tt-cell.clickable { cursor: pointer; }
#eguru-app .tt-cell.clickable:hover { transform: translateY(-1px); box-shadow: var(--kelas-shadow-hover, var(--shadow)); }
#eguru-app .tt-cell.active { box-shadow: inset 0 0 0 2px var(--primary), var(--kelas-shadow, var(--shadow-sm)); }
#eguru-app .tt-top { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
#eguru-app .tt-init { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 800; font-size: var(--t4); letter-spacing: .3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .tt-subjek { flex: 1; min-width: 0; text-align: center; font-size: var(--t6); font-weight: 800; color: var(--primary-dark); line-height: 1.15; }
#eguru-app .tt-rph { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
#eguru-app .tt-rph-box { width: 22px; height: 22px; border-radius: var(--radius-xs); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--t4); font-weight: 800; color: var(--text-light); background: var(--card-bg); }
#eguru-app .tt-rph-box.lengkap { background: var(--success); border-color: var(--success); color: #fff; }
#eguru-app .tt-rph-box.belum { background: var(--accent-light); border-color: var(--accent); color: var(--accent-text); }
#eguru-app .tt-rph-box.kosong { background: var(--danger-light); border-color: var(--danger); color: var(--danger-text); }
#eguru-app .tt-rph-lbl { font-size: var(--t1); font-weight: 800; color: var(--text-muted); letter-spacing: .5px; }
/* Accordion Bantuan AI (dalam kotak Jadual Mingguan) */
#eguru-app .ai-acc { border: 1.5px solid rgba(59,130,246,.3); background: var(--info-light); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); overflow: hidden; }
#eguru-app .ai-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 13px; background: none; border: none; cursor: pointer; text-align: left; color: var(--text); font-weight: 700; font-size: var(--t6); }
#eguru-app .ai-acc-head .ai-acc-ico { width: 18px; height: 18px; fill: var(--info); flex-shrink: 0; }
#eguru-app .ai-acc-title { flex: 1; min-width: 0; }
#eguru-app .ai-acc-chev { width: 18px; height: 18px; fill: var(--text-light); flex-shrink: 0; transition: transform .25s; }
#eguru-app .ai-acc.open .ai-acc-chev { transform: rotate(180deg); }
#eguru-app .ai-acc-body { display: none; padding: 0 13px 13px; }
#eguru-app .ai-acc.open .ai-acc-body { display: block; }
/* Kotak pilihan "Abai Bank RPH" — bertanda amaran kerana ia MEMBELANJAKAN token
   yang bank sepatutnya menjimatkan, jadi ia tidak patut kelihatan seperti
   tetapan biasa yang boleh dihidupkan tanpa berfikir. */
#eguru-app .ai-abai-bank { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    background: var(--warn-light, #fef9e7); border: 1.5px solid rgba(217,164,6,.35);
    border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 14px; }
#eguru-app .ai-abai-bank input { flex: none; margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
#eguru-app .ai-abai-bank b { display: block; font-size: var(--t4); font-weight: 700; color: var(--text); }
#eguru-app .ai-abai-bank em { display: block; font-style: normal; font-size: var(--t3); color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
#eguru-app .tt-mid { text-align: center; }
#eguru-app .tt-cell.now { box-shadow: inset 0 0 0 2px var(--accent), var(--kelas-shadow, var(--shadow-sm)); }
#eguru-app .tt-now-tag { display: inline-block; font-size: var(--t4); font-weight: 700; color: var(--accent-text); }
/* ===== Slot Kosong & Rehat (jadual waktu RPH sahaja) ===== */
#eguru-app .tt-kosong, #eguru-app .tt-rehat { flex: 0 1 128px; min-width: 108px; border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
#eguru-app .tt-kosong { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 7px, transparent 7px, transparent 14px); border: 1.5px dashed var(--border); color: var(--text-light); }
#eguru-app .tt-rehat { background: var(--accent-light); border: 1.5px solid var(--accent); color: var(--accent-text); }
#eguru-app .tt-slot-ico { width: 18px; height: 18px; fill: currentColor; opacity: .9; }
#eguru-app .tt-slot-lbl { font-size: var(--t5); font-weight: 800; letter-spacing: .4px; }
#eguru-app .tt-slot-masa { font-size: var(--t2); font-weight: 600; font-style: italic; opacity: .85; }
#eguru-app .rphm-slot { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: var(--radius-sm); font-size: var(--t5); font-weight: 700; }
#eguru-app .rphm-slot svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
#eguru-app .rphm-slot .rphm-slot-masa { margin-left: auto; font-size: var(--t5); font-weight: 600; font-style: italic; opacity: .8; }
#eguru-app .rphm-slot.kosong { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 7px, transparent 7px, transparent 14px); border: 1.5px dashed var(--border); color: var(--text-light); }
#eguru-app .rphm-slot.rehat { background: var(--accent-light); border: 1px solid var(--accent); color: var(--accent-text); }
#eguru-app .tt-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
/* Tetapan lajur: lencana "auto" pada Tamat Sesi + pratonton lajur waktu */
#eguru-app .tt-auto { display: none; font-size: var(--t1); font-weight: 700; color: var(--primary); background: var(--success-light); border-radius: var(--radius-full); padding: 1px 6px; margin-left: 5px; vertical-align: middle; }
#eguru-app .tt-auto.on { display: inline-block; }
#eguru-app .tt-nota { font-size: var(--t1); font-weight: 700; color: var(--accent-text); background: var(--accent-light); border-radius: var(--radius-full); padding: 1px 6px; margin-left: 5px; vertical-align: middle; }
/* Tamat Sesi bila dikira automatik: jelas ia paparan, bukan medan untuk diisi. */
#eguru-app #tt-biasa-tamat[readonly], #eguru-app #tt-jumaat-tamat[readonly] { background: var(--bg); color: var(--text-muted); border-style: dashed; }
#eguru-app .tt-pratonton { display: none; margin-top: 9px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--bg); border: 1px dashed var(--border); font-size: var(--t3); color: var(--text-muted); line-height: 1.6; }
#eguru-app .tt-pratonton.on { display: block; }
#eguru-app .tt-pratonton b { color: var(--text); font-weight: 700; }
#eguru-app .tt-pv-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#eguru-app .tt-pv { font-size: var(--t2); font-weight: 700; color: var(--primary-dark); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#eguru-app .tt-pv.r { color: var(--accent-text); background: var(--accent-light); border-color: rgba(245,158,11,.35); }
#eguru-app .tt-pratonton.amaran { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.07); }
#eguru-app .rph-minggu-tag { display: flex; align-items: center; gap: 8px; background: var(--success-light); border: 1px solid rgba(5,150,105,.25); color: var(--primary-dark); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: var(--sp-4); font-size: var(--t5); }
#eguru-app .rph-minggu-tag .gi { width: 17px; height: 17px; fill: var(--primary); flex-shrink: 0; }
#eguru-app .rph-minggu-tag b { font-weight: 800; }
#eguru-app .rph-minggu-tag.kosong { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
#eguru-app .rph-minggu-tag.kosong .gi { fill: var(--text-light); }
/* Slot Kosong & Rehat di Halaman Utama (dengan kata semangat untuk guru) */
#eguru-app .today-slot { border-radius: var(--radius-md); padding: 10px 13px; margin: 7px 0; border: 1.5px dashed var(--border); background: var(--bg); }
#eguru-app .today-slot.rehat { border-style: solid; border-color: rgba(245,158,11,.5); background: var(--accent-light); }
#eguru-app .today-slot.now { border-style: solid; box-shadow: 0 0 0 2px var(--accent); }
#eguru-app .today-slot.past { opacity: .5; }
#eguru-app .today-slot-head { display: flex; align-items: center; gap: 8px; }
#eguru-app .today-slot-ico { display: flex; flex-shrink: 0; }
#eguru-app .today-slot-ico svg { width: 17px; height: 17px; fill: var(--text-muted); }
#eguru-app .today-slot.rehat .today-slot-ico svg { fill: #d97706; }
#eguru-app .today-slot-lbl { font-weight: 800; font-size: var(--t5); color: var(--text); }
#eguru-app .today-slot.rehat .today-slot-lbl { color: #92400e; }
#eguru-app .today-slot-time { font-size: var(--t4); font-weight: 600; font-style: italic; color: var(--text-muted); }
#eguru-app .today-slot-msg { font-size: var(--t5); color: var(--text-muted); line-height: 1.5; margin-top: 5px; }
#eguru-app .today-slot.rehat .today-slot-msg { color: #8a6d1f; }

/* ===== Grid jadual waktu berpaksi masa (paparan RPH desktop) ===== */
#eguru-app .tt-cells.tt-grid { display: grid; gap: 4px; align-items: stretch; grid-auto-rows: minmax(84px, auto); }
#eguru-app .tt-cells:not(.tt-grid) .tt-cell { flex: 1 1 150px; min-width: 140px; }
#eguru-app .tt-cells.tt-grid .tt-kosong, #eguru-app .tt-cells.tt-grid .tt-rehat { flex: initial; min-width: 0; padding: 7px 5px; gap: 2px; }
#eguru-app .tt-cell { flex: initial; min-width: 0; overflow: hidden; border-radius: var(--radius-md); padding: 6px 7px 6px 12px; gap: 2px; cursor: pointer; }
#eguru-app .tt-cbar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
#eguru-app .tt-cell.tt-narrow { padding-left: 9px; }
#eguru-app .tt-cell.tt-narrow .tt-cbar { width: 4px; }
#eguru-app .tt-c-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
#eguru-app .tt-init { width: 23px; height: 23px; border-radius: var(--radius-sm); font-size: var(--t2); font-weight: 800; }
#eguru-app .tt-rph-dot { width: 17px; height: 17px; border-radius: var(--radius-xs); border: 2px solid var(--border); background: var(--card-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .tt-rph-dot .gi { width: 12px; height: 12px; fill: #fff; }
#eguru-app .tt-rph-dot.lengkap { background: var(--success); border-color: var(--success); }
#eguru-app .tt-rph-dot.belum { background: var(--accent); border-color: var(--accent); }
#eguru-app .tt-rph-dot.kosong { background: var(--card-bg); border-color: var(--danger); }
/* ===== LEGENDA JADUAL (halaman RPH) =====
   Tiga baris berlabel, bukan satu ayat berterusan. Label lebar-tetap di kiri
   menjadikannya boleh dibaca dengan sekali imbas: guru yang mencari maksud satu
   petak warna tidak perlu membaca senarai ikon dahulu.
   Petak status di sini ialah .tt-rph-dot yang SAMA seperti dalam grid (lihat
   tiga peraturan tepat di atas) — hanya dikecilkan sedikit supaya sepadan
   dengan teks legenda. Sengaja TIADA salinan warna di sini: satu-satunya
   sumber warna status ialah tiga peraturan di atas. */
#eguru-app .jw-legend {
    display: flex; flex-direction: column; gap: 6px;
    margin: 0 0 10px; padding: 9px 11px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#eguru-app .jw-leg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
#eguru-app .jw-leg-lbl {
    flex: 0 0 88px; font-size: var(--t2); font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted);
}
#eguru-app .jw-leg-set { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; min-width: 0; }
#eguru-app .jw-leg-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--t3); color: var(--text-muted); white-space: nowrap;
}
#eguru-app .jw-leg-item .gi { width: 15px; height: 15px; }
#eguru-app .jw-leg-txt { font-size: var(--t3); color: var(--text-muted); min-width: 0; }
/* Petak status dalam legenda: sedikit lebih kecil daripada dalam grid supaya ia
   duduk pada garis dasar teks, tetapi mewarisi setiap warna daripada grid. */
#eguru-app .jw-leg-item .tt-rph-dot { width: 15px; height: 15px; }
#eguru-app .jw-leg-item .tt-rph-dot .gi { width: 10px; height: 10px; fill: #fff; }
@media (max-width: 560px) { #eguru-app .jw-leg-lbl { flex-basis: 100%; } }
#eguru-app .tt-c-subj { font-size: var(--t6); font-weight: 800; color: var(--primary-dark); line-height: 1.12; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eguru-app .tt-c-time { font-size: var(--t3); font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
#eguru-app .tt-cell.tt-narrow .tt-c-subj { font-size: var(--t4); }
/* Baris hari semasa — seluruh baris berwarna (tanpa anjak lajur supaya REHAT kekal sejajar) */
#eguru-app .tt-row.today { background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(245,158,11,.05)); border-radius: var(--radius-md); box-shadow: inset 0 0 0 2px rgba(245,158,11,.4); }
/* Hari ini bertukar ambar: nama hari mesti gelap (putih atas ambar 2.15:1). */
#eguru-app .tt-day.today { background: linear-gradient(135deg, #F59E0B, #D97706) !important; color: #1F2937; box-shadow: 0 2px 8px rgba(245,158,11,.4); }
#eguru-app .tt-cell .tt-now-tag { color: var(--accent-text); font-size: var(--t6); }
#eguru-app .tt-actions { position: absolute; bottom: 3px; left: 50%; display: flex; flex-wrap: nowrap; gap: 3px; padding: 4px; width: max-content; border-radius: var(--radius-sm); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.16); opacity: 0; transform: translateX(-50%) translateY(4px); transition: opacity .14s, transform .14s; pointer-events: none; }
#eguru-app .tt-cell:hover { overflow: visible; box-shadow: var(--kelas-shadow-hover, var(--shadow)); transform: translateY(-1px); z-index: 6; }
#eguru-app .tt-cell:hover .tt-actions { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#eguru-app .tt-actions .tt-a, #eguru-app .hw-act .tt-a { width: auto !important; padding: 5px !important; border-radius: var(--radius-sm) !important; background: var(--bg) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
#eguru-app .tt-actions .tt-a svg, #eguru-app .hw-act .tt-a svg { width: 13px !important; height: 13px !important; fill: currentColor !important; }
#eguru-app .tt-actions .tt-a.danger, #eguru-app .hw-act .tt-a.danger { color: var(--danger) !important; border-color: rgba(239,68,68,.3) !important; }
#eguru-app .tt-slot-narrow .tt-slot-masa { display: none; }
#eguru-app .tt-slot-narrow { padding: 6px 3px; }
#eguru-app .tt-slot-narrow .tt-slot-lbl { font-size: var(--t3); }
#eguru-app .tt-slot-narrow .tt-slot-ico { width: 15px; height: 15px; }
#eguru-app .rph-jam { display: flex; align-items: center; gap: 8px; background: var(--info-light); border: 1px solid rgba(59,130,246,.25); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: var(--sp-3); font-size: var(--t5); color: var(--text); }
#eguru-app .rph-jam svg { width: 17px; height: 17px; fill: var(--info); flex-shrink: 0; }
#eguru-app .tt-masa { font-size: var(--t3); font-weight: 600; font-style: italic; color: var(--text-muted); }
#eguru-app .tt-kelas { font-size: var(--t4); color: var(--text); font-weight: 600; }
#eguru-app .tt-status { font-size: var(--t3); font-weight: 700; }
/* (Blok .tt-actions kedua dibuang. Ia pemilih yang SAMA seperti bar
   terapung di atas, tetapi kerana ia lebih lewat dalam fail ia diam-diam
   membatalkan flex-wrap:nowrap & gap:3px yang dikarang di sana, dan
   .tt-actions .btn-icon{padding:6px} mengalahkan .tt-a{padding:5px}.
   .tt-act-left/.tt-act-right pula tiada dalam mana-mana markup. Bar
   terapung kini dikawal sepenuhnya oleh takrifannya sendiri.) */

/* ===== HOME TODAY ===== */
#eguru-app .today-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }
#eguru-app .today-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--sp-3); }
#eguru-app .today-date { font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .today-sub { font-size: var(--t4); color: var(--text-muted); margin-top: 1px; }
#eguru-app .today-week { font-size: var(--t3); font-weight: 700; color: #1F2937; background: var(--accent); padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; text-align: center; }
#eguru-app .today-list { display: flex; flex-direction: column; gap: 7px; }
#eguru-app .today-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
#eguru-app .today-item.now { border-color: var(--accent); background: var(--success-light); box-shadow: 0 2px 10px rgba(245,158,11,.15); }
#eguru-app .today-item.past { opacity: .5; }
#eguru-app .today-time-col { flex: 0 0 78px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#eguru-app .today-time { font-size: var(--t3); font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
#eguru-app .today-kelas { flex: 0 0 auto; font-size: var(--t4); color: var(--text-muted); white-space: nowrap; }
#eguru-app .today-subjek { flex: 1 1 auto; min-width: 0; text-align: right; font-size: var(--t5); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eguru-app .today-now-badge { display: inline-block; font-size: var(--t1); font-weight: 700; color: #1F2937; background: var(--accent); padding: 2px 7px; border-radius: var(--radius-full); white-space: nowrap; }
#eguru-app .today-empty { font-size: var(--t5); color: var(--text-muted); text-align: center; padding: 14px; }
#eguru-app .today-welcome { display: flex; align-items: center; gap: 11px; }
#eguru-app .today-avatar { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--gradient-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .today-avatar svg { width: 22px; height: 22px; fill: #fff; }
#eguru-app .today-hi { font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .today-divider { height: 1px; background: var(--border); margin: 12px 0; }
#eguru-app .today-listtitle { font-size: var(--t4); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--sp-3); }

/* ===== RPT TABLE ===== */
#eguru-app .rpt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#eguru-app .rpt-table { width: 100%; border-collapse: collapse; font-size: var(--t4); min-width: 660px; }
#eguru-app .rpt-table th { background: var(--primary); color: #fff; padding: 8px 9px; text-align: center; font-weight: 700; white-space: nowrap; }
/* LEBAR LAJUR. Tanpa ini pelayar membahagi lebar ikut teks TERPANJANG setiap
   lajur, dan satu SK yang panjang (ada yang 400+ aksara) menjadikan lajur SK
   ~2.5x lebih lebar daripada SP — terbalik: SK satu ayat, SP berbaris-baris.
   Peratus, BUKAN table-layout:fixed: lajur kecil (Mgg/Tarikh/Tindakan) masih
   mendapat lebar minimum kandungannya dahulu, dan peratus ini hanya
   membahagikan BAKINYA — nisbah SP:SK ~1.8 kekal pada jadual 700px mahupun
   1500px. Selaras dengan cetakan RPT (col.c-sk 20% / col.c-sp 33%). */
#eguru-app .rpt-table th.rpt-h-bid { width: 11%; }
#eguru-app .rpt-table th.rpt-h-sk  { width: 22%; }
#eguru-app .rpt-table th.rpt-h-sp  { width: 40%; }
#eguru-app .rpt-table th.rpt-h-cat { width: 10%; }
/* Label header Jawi: saiz ~1.2x supaya sebanding "Mgg"/"Tarikh" — glyph
   Scheherazade lebih kecil pada saiz yang sama. BUKAN --t8 penuh peraturan
   [dir=rtl] umum; header mesti kekal satu baris yang padat. */
#eguru-app .rpt-table th[dir="rtl"], #eguru-app .skt-table th[dir="rtl"] { font-size: var(--t7); line-height: 1.3; }
#eguru-app .rpt-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); vertical-align: top; }
#eguru-app .rpt-table tr.rpt-cuti td { background: var(--accent-light); font-style: italic; }
#eguru-app .rpt-table tr.rpt-exam td { background: #DBEAFE; font-style: normal; color: #1e3a8a; }
#eguru-app .rptm-cuti.rptm-exam { background: #DBEAFE; color: #1e3a8a; border-left-color: #1e3a8a; }
/* Minggu Ulang Kaji (sebelum peperiksaan) — ungu lembut supaya beza jelas dari cuti (kuning) & peperiksaan (biru). */
#eguru-app .rpt-table tr.rpt-ulang td { background: #EDE9FE; font-style: normal; color: #5B21B6; }
#eguru-app .rptm-cuti.rptm-ulang { background: #EDE9FE; color: #5B21B6; border-left-color: #5B21B6; }
#eguru-app .rpt-table tr.rpt-mengajar:hover td { background: var(--success-light); }
#eguru-app .rpt-mgg-input { width: 50px; padding: 5px; border: 1.5px solid var(--border); border-radius: var(--radius-xs); font-size: var(--t7); background: var(--card-bg); color: var(--text); text-align: center; font-weight: 700; }
#eguru-app .rpt-tarikh { font-size: var(--t6); color: var(--text-muted); white-space: nowrap; }
#eguru-app .btn-jana-rph { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: none; border-radius: var(--radius-sm); background: var(--info); color: #fff; font-size: var(--t6); font-weight: 700; cursor: pointer; white-space: nowrap; }
#eguru-app .btn-jana-rph svg { width: 13px; height: 13px; fill: currentColor; }
#eguru-app #tk-peristiwa-list { display: flex; flex-wrap: wrap; gap: 8px; }
#eguru-app .tk-month-divider { flex: 1 1 100%; font-size: var(--t3); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--primary-dark); margin: 8px 0 2px; padding-bottom: 3px; border-bottom: 1px solid var(--primary-light); }
/* 2026-10: Isi Takwim guna AI — pilihan Ganti / Tambah (langkau pendua) / Batal bila borang sudah berisi */
#eguru-app .takwim-ai-pilih { margin-top: 12px; padding: 12px 14px; background: var(--info-light); border: 1px solid rgba(59,130,246,.25); border-radius: var(--radius-sm); }
#eguru-app .takwim-ai-pilih-teks { font-size: var(--t4); color: var(--text); line-height: 1.5; margin-bottom: 10px; }
#eguru-app .takwim-ai-pilih-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
/* minmax(0,1fr) + min-width:0 (2026-10-03): dengan 1fr biasa, lebar minimum <input type=date>
   menolak lajur melebihi max-width kad — butang Salin/Buang terkeluar dan bertindih kad jiran. */
#eguru-app .tk-peristiwa-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 6px; align-items: start; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; margin-bottom: 0; flex: 1 1 258px; max-width: 340px; }
#eguru-app .tk-peristiwa-row .form-control { font-size: var(--t5); padding: 7px 8px; min-width: 0; }
#eguru-app .tk-peristiwa-row .full { grid-column: 1 / -1; }
#eguru-app .tk-del { background: var(--danger-light); color: var(--danger); border: none; border-radius: var(--radius-sm); width: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; align-self: stretch; }
#eguru-app .tk-del svg { width: 15px; height: 15px; fill: currentColor; }
#eguru-app .tk-cp { background: var(--success-light) !important; color: var(--primary) !important; }
#eguru-app .btn-icon-rph { background: rgba(245,158,11,.15) !important; color: var(--accent) !important; }
#eguru-app .btn-icon-rph:hover { background: var(--accent) !important; color: #fff !important; }
/* .rpt-aksi ialah <td>: KEKAL table-cell. display:flex pada <td> mengeluarkannya
   daripada susun atur jadual — sempadan bawah dan latar baris (SEMASA / hover)
   terputus di lajur Tindakan. Jarak antara butang guna margin. */
#eguru-app .rpt-aksi { white-space: nowrap; }
#eguru-app .rpt-aksi > * + * { margin-left: 5px; vertical-align: middle; }
#eguru-app .rpt-exp { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-muted); cursor: pointer; padding: 4px 8px; font-size: var(--t7); font-weight: 700; line-height: 1; transition: transform .2s; }
#eguru-app .rpt-exp.rpt-exp-open { transform: rotate(180deg); }
#eguru-app .rpt-exp:hover { border-color: var(--primary); color: var(--primary); }
#eguru-app tr.rpt-detail td { background: var(--bg); padding: 0; }
#eguru-app .rpt-detail-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 7px; padding: 9px; }
#eguru-app .rpt-day { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); padding: 7px 9px; }
#eguru-app .rpt-day-head { font-weight: 700; font-size: var(--t6); color: var(--primary-dark); margin-bottom: var(--sp-1); }
#eguru-app .rpt-day-cuti { font-size: var(--t5); color: var(--accent); font-weight: 600; }
#eguru-app .rpt-day-kelas { font-size: var(--t5); color: var(--text-muted); }
#eguru-app .rpt-day-isi { font-size: var(--t5); margin-top: 3px; font-weight: 600; }
#eguru-app .rpt-day-sp { font-size: var(--t4); color: var(--text-muted); margin-top: 4px; }
#eguru-app .rpt-day-sp div { margin-top: 2px; }
#eguru-app .rpt-cuti-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px; margin-bottom: var(--sp-4); }
#eguru-app .rpt-cuti-item { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 9px 11px; }
#eguru-app .rpt-cuti-badge { display: inline-block; font-size: var(--t2); font-weight: 700; color: #1F2937; background: var(--accent); padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap; margin-bottom: var(--sp-2); }
#eguru-app .rpt-cuti-nama { font-size: var(--t6); }
#eguru-app .rpt-cuti-julat { font-size: var(--t5); color: var(--text-muted); margin-top: 3px; }
#eguru-app .rpt-cuti-bulan { grid-column: 1 / -1; font-size: var(--t3); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--primary-dark); margin: 6px 0 0; padding-bottom: 3px; border-bottom: 1px solid var(--primary-light); }
#eguru-app .rpt-cuti-tkt { display: inline-block; font-size: var(--t2); font-weight: 700; color: var(--primary-dark); background: var(--primary-light); padding: 2px 7px; border-radius: var(--radius-full); margin-left: 5px; }
/* ===== SENARAI SUBJEK DARIPADA JADUAL WAKTU (FASA 1) =====
   Kad, bukan baris senarai: setiap gabungan subjek×tingkatan membawa empat
   fakta (beban waktu, kelas, keluarga templat, status RPT) dan baris satu
   lapis tidak boleh memuatkannya tanpa menjadi dinding teks. Grid auto-fit
   supaya guru satu subjek tidak mendapat kad selebar skrin, dan guru sepuluh
   subjek tidak perlu menatal sepuluh baris penuh. */
/* Jalur "ambil / betulkan" — dibingkai sebagai satu blok tindakan supaya ia
   tidak kelihatan seperti penapis ketiga bagi jadual di bawahnya. */
#eguru-app .pmk-ambil {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--bg); border: 1px solid var(--border);
    border-left: 3px solid var(--info); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 11px 13px; margin-bottom: var(--sp-3);
}
#eguru-app .pmk-ambil-lbl {
    font-size: var(--t3); font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--info-text);
}
/* Lajur Catatan RPT. Teks DSKP yang menerangkan had skop & cadangan — penting
   semasa merancang, tetapi ia sokongan kepada SP, bukan pesaingnya. Jadi lebih
   kecil dan lebih pudar, dengan lebar dihadkan supaya SK/SP tidak terhimpit. */
/* min-width: tanpanya lajur 10% menjadi ~90px pada skrin 1280px dan kotak
   memecah perkataan di tengah ("Cadanga|n"). Jadual sudah boleh ditatal mendatar. */
#eguru-app .rpt-table td.rpt-catatan { max-width: 240px; min-width: 150px; padding: 4px 6px; }
/* Kotak Catatan boleh ditulis. Sengaja RATA (bingkai lut sinar) supaya jadual
   kekal kelihatan seperti dokumen RPT dan bukan borang — bingkai hanya muncul
   bila kursor menghampirinya. */
#eguru-app .rpt-catatan-in {
    width: 100%; min-height: 42px; resize: vertical;
    font-family: inherit; font-size: var(--t3); line-height: 1.5;
    color: var(--text-muted); background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 6px;
}
#eguru-app .rpt-catatan-in:hover { border-color: var(--border); }
#eguru-app .rpt-catatan-in:focus {
    outline: none; border-color: var(--primary); background: var(--card-bg); color: var(--text);
}
#eguru-app .rpt-catatan-in::placeholder { color: var(--text-light); }
#eguru-app .rptm-body .rpt-catatan-in { border-color: var(--border); background: var(--card-bg); }

/* Status kad RPT "DSKP belum ada" — keadaan MENUNGGU DATA, bukan ralat dan
   bukan kerja guru yang tertunggak. Warna info (biru), bukan danger (merah):
   tiada apa yang rosak, dan guru tidak boleh membetulkannya dengan menekan
   Jana berulang kali. */
#eguru-app .rjw-status.takdskp { background: var(--info-light); color: var(--info-text); }
#eguru-app .rpt-jw-kad.st-takdskp { border-left-color: var(--info); opacity: .82; }
#eguru-app .rpt-jw-kad.st-takdskp:hover { opacity: 1; }
#eguru-app .rjw-kira-takdskp { color: var(--info-text); }

/* ===== DAPATAN SEBELUM/SELEPAS KAJIAN TINDAKAN (FASA 5) =====
   Enam petak nombor, bukan jadual: ini bacaan sekilas sebelum guru menulis
   ayat dapatannya. Jalur kiri menandakan arah keseluruhan. */
#eguru-app .kt-dap {
    border: 1.5px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--bg); padding: 12px 14px;
}
#eguru-app .kt-dap.naik  { border-left-color: var(--primary); background: var(--success-light); }
#eguru-app .kt-dap.turun { border-left-color: var(--danger); background: var(--danger-light); }
#eguru-app .kt-dap.kekal { border-left-color: var(--accent); background: var(--accent-light); }
#eguru-app .kt-dap.kosong {
    display: flex; gap: 11px; align-items: flex-start;
    border-left-color: var(--info); background: var(--info-light);
}
#eguru-app .kt-dap.kosong svg { width: 20px; height: 20px; fill: var(--info-text); flex-shrink: 0; margin-top: 1px; }
#eguru-app .kt-dap.kosong b { display: block; font-size: var(--t5); color: var(--text); }
#eguru-app .kt-dap.kosong span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
#eguru-app .kt-dap-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) { #eguru-app .kt-dap-grid { grid-template-columns: repeat(6, 1fr); } }
#eguru-app .kt-dap-sel {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 8px 6px; text-align: center;
}
#eguru-app .kt-dap-sel b {
    display: block; font-size: var(--t7); font-weight: 800; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
#eguru-app .kt-dap-sel span { display: block; font-size: var(--t2); color: var(--text-muted); margin-top: 2px; line-height: 1.25; }
#eguru-app .kt-dap-sel.beza b { color: var(--primary-text); }
#eguru-app .kt-dap.turun .kt-dap-sel.beza b { color: var(--danger-text); }
#eguru-app .kt-dap-nota { font-size: var(--t3); color: var(--text-muted); line-height: 1.5; margin-top: 9px; }
/* ===== MURID SASARAN INTERVENSI (FASA 5) =====
   Satu baris per murid dengan TP sebelum & selepas bersebelahan. Baris
   diwarnakan bila kedua-duanya ada: hijau naik, merah turun. Itulah dapatan
   kajian tindakan, kelihatan semasa ia dimasukkan. */
#eguru-app .ivm-senarai { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
#eguru-app .ivm-baris {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--card-bg);
}
#eguru-app .ivm-senarai .ivm-baris:last-child { border-bottom: none; }
#eguru-app .ivm-baris.naik  { background: var(--success-light); }
#eguru-app .ivm-baris.turun { background: var(--danger-light); }
#eguru-app .ivm-nama { flex: 1 1 110px; min-width: 0; font-size: var(--t5); font-weight: 600; color: var(--text); line-height: 1.3; }
#eguru-app .ivm-nama i { display: block; font-size: var(--t2); color: var(--text-light); font-style: normal; }
#eguru-app .ivm-lbl {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
    font-size: var(--t2); font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .3px;
}
#eguru-app .ivm-baris .ivm-tp { width: 74px; font-size: var(--t4); padding: 4px 6px; }
#eguru-app .ivm-baris .ivm-cat { flex: 1 1 130px; min-width: 0; font-size: var(--t4); padding: 5px 8px; }
/* ===== SILANG PBD x KEHADIRAN (FASA 5) =====
   Empat kotak, bukan jadual: setiap kotak ialah satu KEPUTUSAN yang berbeza,
   dan warna menandakan urgensi tindakan — bukan menghiasi grid. Merah dahulu
   kerana itulah kumpulan yang salah faham akan menyebabkan intervensi yang
   sia-sia sepenuhnya. */
#eguru-app .anl-kh-meta { font-size: var(--t4); color: var(--text-muted); margin-bottom: 9px; }
#eguru-app .anl-kh-meta b { color: var(--primary-text); }
#eguru-app .anl-silang-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { #eguru-app .anl-silang-grid { grid-template-columns: 1fr 1fr; } }
#eguru-app .anl-kot {
    border: 1.5px solid var(--border); border-left: 4px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--card-bg); padding: 11px 13px;
}
#eguru-app .anl-kot.kritikal { border-left-color: var(--danger); background: var(--danger-light); }
#eguru-app .anl-kot.akademik { border-left-color: var(--accent); background: var(--accent-light); }
#eguru-app .anl-kot.risiko   { border-left-color: var(--info); background: var(--info-light); }
#eguru-app .anl-kot.baik     { border-left-color: var(--primary); background: var(--success-light); }
#eguru-app .anl-kot-atas { display: flex; align-items: baseline; gap: 8px; }
#eguru-app .anl-kot-atas b { font-size: var(--t8); font-weight: 800; color: var(--text); line-height: 1; }
#eguru-app .anl-kot-atas span { font-size: var(--t4); font-weight: 700; color: var(--text); line-height: 1.3; }
#eguru-app .anl-kot-nota { font-size: var(--t3); color: var(--text-muted); line-height: 1.45; margin-top: 5px; }
#eguru-app .anl-kot-murid { list-style: none; margin: 8px 0 0; padding: 0; }
#eguru-app .anl-kot-murid li {
    font-size: var(--t4); color: var(--text); line-height: 1.35;
    padding: 3px 0; border-top: 1px solid rgba(0,0,0,.06);
}
#eguru-app .anl-kot-murid li i { display: block; font-size: var(--t2); color: var(--text-muted); font-style: normal; }
#eguru-app .anl-kot-murid li.lagi { color: var(--text-light); font-style: italic; }
#eguru-app .anl-kh-kosong {
    display: flex; gap: 11px; align-items: flex-start; margin-top: var(--sp-3);
    background: var(--accent-light); border: 1px solid var(--accent);
    border-radius: var(--radius-md); padding: 13px 15px;
}
#eguru-app .anl-kh-kosong svg { width: 20px; height: 20px; fill: var(--accent-text); flex-shrink: 0; margin-top: 1px; }
#eguru-app .anl-kh-kosong b { display: block; font-size: var(--t5); color: var(--text); }
#eguru-app .anl-kh-kosong span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
/* ===== EVIDENS PUKAL (FASA 4) =====
   Satu baris per murid: nama, TP, catatan, pautan. Baris yang SUDAH berisi
   diserlahkan supaya guru boleh melihat sejauh mana dia sudah pergi tanpa
   membaca setiap kotak. */
#eguru-app .evp-senarai { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
#eguru-app .evp-baris {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--card-bg);
}
#eguru-app .evp-senarai .evp-baris:last-child { border-bottom: none; }
#eguru-app .evp-baris.isi { background: var(--success-light); }
#eguru-app .evp-nama { flex: 1 1 120px; min-width: 0; font-size: var(--t5); font-weight: 600; color: var(--text); line-height: 1.35; }
#eguru-app .evp-baris .evp-tp { flex: 0 0 82px; }
#eguru-app .evp-baris .evp-cat { flex: 2 1 160px; min-width: 0; }
#eguru-app .evp-baris .evp-paut { flex: 1 1 130px; min-width: 0; }
#eguru-app .evp-baris select, #eguru-app .evp-baris input { font-size: var(--t4); padding: 5px 8px; }
/* ===== JADUAL IKUT RPT — Nota, Latihan & Evidens (2026-09-15) =====
   Satu rupa untuk tiga halaman: lajur Minggu · SK · SP · (Murid) · Tindakan,
   baris disusun ikut RPT tersimpan. Warna kepala sama seperti .rpt-table
   supaya guru mengenalinya sebagai "RPT saya". Di telefon setiap baris
   menjadi kad bertindan — jadual lima lajur tidak muat pada 380px. */
#eguru-app .skt-ringkas {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
    font-size: var(--t4); color: var(--text-muted); margin: 4px 0 10px;
}
#eguru-app .skt-ringkas b { color: var(--text); }
#eguru-app .skt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#eguru-app .skt-table { width: 100%; border-collapse: collapse; font-size: var(--t4); }
/* Header di TENGAH, bukan kiri: isi SK/SP Jawi rata kanan, jadi label kiri
   berada di hujung bertentangan dengan teksnya sendiri. Tengah betul untuk
   kedua-dua arah. */
#eguru-app .skt-table th { background: var(--primary); color: #fff; padding: 8px 9px; text-align: center; font-weight: 700; white-space: nowrap; }
/* SP lebih lebar daripada SK — lihat nota LEBAR LAJUR pada .rpt-table.
   Minggu, Murid & Tindakan kekal lebar kandungan; peratus ini membahagi baki. */
#eguru-app .skt-table th.skt-h-sk { width: 30%; }
#eguru-app .skt-table th.skt-h-sp { width: 48%; }
#eguru-app .skt-table td { padding: 8px 9px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.45; }
#eguru-app .skt-table tr:last-child td { border-bottom: none; }
#eguru-app .skt-table tr.skt-now td { background: var(--success-light); }
/* Denyar sekali selepas auto-skrol ke minggu semasa — sama seperti baris RPT
   (.rpt-now-flash). Tanpa ia, halaman melompat ke tengah jadual dan tiada apa
   yang memberitahu guru BARIS MANA yang menyebabkan lompatan itu. */
#eguru-app .skt-table tr.skt-now-flash td { animation: rptFlash 1.6s ease-out; }
#eguru-app .skt-table tr.skt-ulang td.skt-sk, #eguru-app .skt-table tr.skt-ulang td.skt-sp { color: var(--text-muted); }
#eguru-app .skt-mgg { width: 64px; text-align: center; }
#eguru-app .skt-mgg b { display: block; font-size: var(--t6); color: var(--text); }
#eguru-app .skt-mgg span { display: block; font-size: var(--t3); color: var(--text-muted); white-space: nowrap; }
#eguru-app .skt-sk { min-width: 180px; font-weight: 600; color: var(--text); }
#eguru-app .skt-sp { min-width: 200px; color: var(--text-muted); }
#eguru-app .skt-sp div + div { margin-top: 3px; }
#eguru-app .skt-ulang-lbl { display: block; font-size: var(--t3); font-weight: 600; color: var(--text-light); margin-top: 3px; }
/* Lajur Tindakan (Nota, Latihan, Evidens): SATU lajur butang yang SAMA
   LEBAR, di tengah sel (permintaan pemilik 2026-09-15). Lebar 188px memuatkan
   label terpanjang, "🔒 Ambil dari Bank (Pro)", tanpa berbalut. Lencana
   (TP, Portal) turut di tengah, di atas/bawah butang. */
#eguru-app .skt-aksi { width: 1%; vertical-align: middle !important; }
#eguru-app .skt-aksi-in { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 188px; margin: 0 auto; }
/* !important kerana #eguru-app .btn sendiri memaksa width/padding dengan !important. */
#eguru-app .skt-aksi-in .btn { width: 100% !important; justify-content: center; text-align: center; white-space: nowrap;
    padding: 6px 8px !important; font-size: var(--t4) !important; margin: 0; }
#eguru-app .skt-aksi-in .skt-lencana { max-width: 100%; justify-content: center; }
#eguru-app .skt-lencana {
    display: inline-flex; align-items: center; gap: 4px; font-size: var(--t3); font-weight: 700;
    padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--border);
    background: var(--bg); color: var(--text-muted); white-space: nowrap;
}
#eguru-app .skt-lencana.hijau { background: var(--success-light); border-color: var(--success); color: var(--primary-text); }
#eguru-app .skt-lencana.biru  { background: var(--info-light); border-color: var(--info); color: var(--info-text, #1D4ED8); }
#eguru-app .skt-lencana.kuning { background: var(--accent-light); border-color: var(--accent); color: #92400E; }
/* Sel Murid kini kiraan + bar + butang (nama di modal evLihatMurid), jadi
   lebarnya cukup untuk "35 / 35 ada bukti" — bukan 240px untuk cip nama. */
#eguru-app .skt-murid { min-width: 140px; }
#eguru-app .skt-murid-kira { font-size: var(--t4); font-weight: 700; color: var(--text); margin-bottom: 5px; white-space: nowrap; }
#eguru-app .skt-murid-kira span { font-weight: 500; color: var(--text-muted); }
#eguru-app .skt-murid-bar { height: 5px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; margin-bottom: 6px; }
#eguru-app .skt-murid-bar i { display: block; height: 100%; background: var(--success); }
#eguru-app .skt-murid-tidak { font-size: var(--t3); font-weight: 600; color: var(--danger-text); margin-bottom: 6px; }
/* !important kerana #eguru-app .btn memaksa width:100% !important. */
#eguru-app .skt-murid .btn { width: auto !important; padding: 5px 10px !important; font-size: var(--t4) !important; margin: 0; }
#eguru-app .ev-nama-blok { margin-top: 12px; }
#eguru-app .ev-nama-tajuk { font-size: var(--t4); font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
#eguru-app .ev-nama-tajuk b { color: var(--text); }
#eguru-app .ev-nama-blok .skt-chip { font-size: var(--t4); padding: 3px 9px; }
#eguru-app .skt-chip-senarai { display: flex; flex-wrap: wrap; gap: 4px; }
#eguru-app .skt-chip {
    font-size: var(--t3); padding: 2px 7px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: var(--bg); color: var(--text-light); white-space: nowrap;
}
#eguru-app .skt-chip.ada { background: var(--success-light); border-color: var(--success); color: var(--primary-text); font-weight: 600; }
#eguru-app .skt-chip.tidak { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
#eguru-app .skt-chip b { font-weight: 800; }
#eguru-app .skt-kelas-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
#eguru-app .skt-kelas-bar button {
    font: inherit; font-size: var(--t4); font-weight: 600; padding: 6px 12px; cursor: pointer;
    border-radius: var(--radius-full); border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text);
}
#eguru-app .skt-kelas-bar button.aktif { border-color: var(--primary); background: var(--success-light); color: var(--primary-text); }
#eguru-app .skt-semak { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
#eguru-app .skt-semak label { display: flex; align-items: center; gap: 8px; font-size: var(--t5); cursor: pointer; }
#eguru-app .skt-tp-pita { font-size: var(--t4); line-height: 1.55; }
#eguru-app .skt-tp-pita b { color: var(--text); }
#eguru-app .skt-modal-isi { min-height: 280px !important; font-size: var(--t5); line-height: 1.6; white-space: pre-wrap; }
/* Editor Nota/Latihan (sktModal): kotak isi MEMANJANG hingga ke bawah popup,
   butang tindakan di dasar. Popup kini tinggi tetap (lihat "MODAL: SATU SAIZ
   UNTUK SEMUA"), jadi dengan tinggi 280px sahaja separuh bawah popup kosong.
   Helaian jadi lajur flex; hanya kotak isi yang tumbuh (flex-grow), yang lain
   kekal saiz asal (shrink 0). Asas 280px = had bawah — pada skrin pendek
   helaian menatal seperti biasa. <details> "Guna AI luar" yang dibuka mengambil
   ruang daripada kotak isi, bukan menolak butang keluar dari skrin.
   :has() — pelayar tanpa sokongan kekal pada 280px, tiada yang rosak. */
#eguru-app .rph-modal-sheet:has(> .skt-modal-isi) { display: flex; flex-direction: column; }
#eguru-app .rph-modal-sheet:has(> .skt-modal-isi) > * { flex-shrink: 0; }
#eguru-app .rph-modal-sheet > .skt-modal-isi { flex: 1 0 280px; resize: none; }
/* Matriks ciri × pelan (Akaun › Pelan) */
#eguru-app .pm-petunjuk { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--t3); color: var(--text-muted); margin: 0 0 10px; }
#eguru-app .pm-petunjuk > span { display: inline-flex; align-items: center; gap: 6px; }
#eguru-app .pm-skrol { overflow-x: auto; }
#eguru-app .pm-jadual { width: 100%; border-collapse: collapse; font-size: var(--t4); }
#eguru-app .pm-jadual th { text-align: center; font-size: var(--t3); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); padding: 8px 6px; border-bottom: 2px solid var(--border); position: sticky; top: 0; background: var(--card-bg); }
#eguru-app .pm-jadual th:first-child { text-align: left; }
#eguru-app .pm-jadual th small { display: block; font-size: var(--t2); letter-spacing: 0; text-transform: none; color: var(--primary-text); }
#eguru-app .pm-jadual td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
#eguru-app .pm-jadual td.pm-p { text-align: center; width: 1%; white-space: nowrap; }
#eguru-app .pm-jadual .semasa { background: var(--success-light); }
#eguru-app .pm-jadual tr.pm-menu td { background: var(--bg); font-size: var(--t3); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text); padding: 9px 6px 6px; }
#eguru-app .pm-jadual tr.pm-sub td { font-weight: 700; color: var(--primary-text); padding: 8px 6px 3px 10px; border-bottom: 0; }
#eguru-app .pm-jadual td.pm-ciri { padding-left: 20px; color: var(--text); }
#eguru-app .pm-cip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; font-size: var(--t3); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); }
#eguru-app .pm-cip.ya { background: var(--success-light); color: var(--primary-text); }
#eguru-app .pm-cip.had { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
#eguru-app .pm-cip.ai { background: var(--ultra-light, #F3E8FF); color: var(--ultra-dark, #6D28D9); }
#eguru-app .pm-cip.tiada { color: var(--text-light); font-weight: 500; }
/* Kunci halaman modul Pro (pelanKunciView): sembunyi kandungan, papar kad kunci.
   Suis Bank RPH | Nota | Soalan (.bk-tukar) dikecualikan: ia navigasi, bukan
   kandungan Pro, dan tanpanya pengguna Percuma tersangkut di satu kad kunci. */
#eguru-app .view.pelan-terkunci > :not(.pelan-kunci-kad):not(.bk-tukar):not(.tools-balik) { display: none !important; }
#eguru-app .view:not(.pelan-terkunci) > .pelan-kunci-kad { display: none; }
/* Penggunaan AI bulan ini (Akaun › Pelan) */
#eguru-app .ai-guna-kad { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 14px; background: var(--bg); display: grid; gap: 8px; }
#eguru-app .ai-guna-kad[hidden] { display: none; }
#eguru-app .aig-tajuk { font-size: var(--t5); font-weight: 700; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
#eguru-app .aig-tajuk span { font-size: var(--t3); font-weight: 500; color: var(--text-muted); }
#eguru-app .aig-baris { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 2fr) auto; gap: 10px; align-items: center; font-size: var(--t4); color: var(--text); }
#eguru-app .aig-bar { height: 6px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
#eguru-app .aig-bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-full); }
#eguru-app .aig-baris b { font-variant-numeric: tabular-nums; font-size: var(--t4); }
/* Bar tindakan modal Nota & Latihan — SATU baris, butang sama lebar (Nota 5,
   Latihan 4 — lajur ikut bilangan butang).
   !important kerana #eguru-app .btn memaksa padding/saiz dengan !important. */
/* Semakan Tajwid (Tools) */
#eguru-app .tj-kotak { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; background: var(--bg); margin-bottom: 10px; }
#eguru-app .tj-ruj { margin: 0 0 6px; font-size: var(--t4); color: var(--text-muted); }
#eguru-app .tj-ayat { margin: 0; font-size: 1.5rem; line-height: 2.2; text-align: justify;
    font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', serif; }
#eguru-app .tj-cip-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#eguru-app .tj-cip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border);
    border-radius: var(--radius-full); font-size: var(--t4); cursor: pointer; background: var(--surface); }
#eguru-app .tj-cip.kosong { opacity: .45; }
#eguru-app .tj-cip input { margin: 0; }
#eguru-app table.tj-jadual { width: 100%; border-collapse: collapse; }
#eguru-app table.tj-jadual th, #eguru-app table.tj-jadual td { border: 1px solid var(--border); padding: 6px 8px;
    font-size: var(--t4); text-align: start; vertical-align: top; }
#eguru-app table.tj-jadual thead th { background: var(--success-light); color: var(--primary-text); }
#eguru-app table.tj-jadual td.tj-ar { font-size: 1.3rem; line-height: 2; direction: rtl;
    font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', serif; min-width: 180px; }
#eguru-app .tj-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
#eguru-app .tj-nota { margin-top: 6px; }
/* Garis { } pada huruf yang terlibat dengan hukum (ntGarisTajwid) — jadual
   Semakan Tajwid & jadual tajwid dalam nota. TANPA peraturan ini, <u> mengambil
   garis lalai pelayar: setebal 1px, sewarna teks dan melekat pada baris huruf,
   jadi ia hampir tidak kelihatan di bawah teks Arab bertanda. Garis tebal
   berwarna dengan ofset yang melepasi kasrah menjadikannya jelas. */
#eguru-app u.nt-tj { text-decoration: underline; text-decoration-color: var(--danger); text-decoration-thickness: 3px;
    text-underline-offset: 9px; text-decoration-skip-ink: none; }
/* Panel silang-semak tajwid dalam modal Nota — MELAPOR sahaja, tidak mengubah
   nota. Kekal terpapar selagi nota dibuka (toast hilang dalam 3 saat). */
#eguru-app .nt-tj-panel { margin: 8px 0 0; padding: 9px 11px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--bg); font-size: var(--t4); color: var(--text); }
#eguru-app .nt-tj-panel:empty { display: none; }
#eguru-app .nt-tj-panel.canggah { border-color: var(--accent); background: var(--accent-light); }
#eguru-app .nt-tj-kepala { margin: 0; }
#eguru-app .nt-tj-senarai { margin: 6px 0 0; padding-inline-start: 18px; }
#eguru-app .nt-tj-senarai li { margin: 3px 0; line-height: 1.6; }
/* Kalimah Uthmani perlu ruang: pada saiz teks biasa, baris dan tanda kecilnya
   berhimpit sehingga hurufnya kelihatan terputus-putus. */
#eguru-app .nt-tj-kalimah { display: inline-block; font-size: 1.4rem; line-height: 2.1;
    vertical-align: middle; margin-inline-end: 8px; }
#eguru-app .nt-tj-kaki { margin: 6px 0 0; font-size: var(--t3); color: var(--text-muted); }
/* Halaman Bank kongsi — disusun semula 2026-09-24: cara berfungsi → statistik →
   mod (Kelas saya / Semua subjek / Sumbangan saya) → kad bertindakan. */
#eguru-app .bk-cara { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); margin: 0 0 12px; }
#eguru-app .bk-cara > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: var(--t4); color: var(--primary-text); list-style: none; }
#eguru-app .bk-cara > summary::-webkit-details-marker { display: none; }
#eguru-app .bk-cara > summary::before { content: '▸'; display: inline-block; width: 1.1em; transition: transform .15s; }
#eguru-app .bk-cara[open] > summary::before { transform: rotate(90deg); }
#eguru-app .bk-cara-langkah { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
#eguru-app .bk-cara-item { display: flex; gap: 10px; align-items: flex-start; }
#eguru-app .bk-cara-no { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--primary); color: #fff; font-weight: 700; font-size: var(--t4); }
#eguru-app .bk-cara-item > div > b { display: block; font-size: var(--t4); margin-bottom: 2px; }
#eguru-app .bk-cara-item > div > span { display: block; font-size: var(--t3); color: var(--text-muted); line-height: 1.5; }
#eguru-app .bk-cara-kaki { margin: 0; padding: 8px 12px 10px; border-top: 1px dashed var(--border); font-size: var(--t3); color: var(--text-muted); }
#eguru-app .bk-statistik { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 12px; }
#eguru-app .bk-jubin { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; background: var(--card-bg); min-width: 0; }
#eguru-app .bk-jubin b { display: block; font-size: var(--t7); line-height: 1.2; color: var(--primary-text); }
#eguru-app .bk-jubin b small { font-size: var(--t4); color: var(--text-muted); font-weight: 600; }
#eguru-app .bk-jubin span { display: block; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .bk-had-bar { display: block; height: 5px; margin-top: 6px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
#eguru-app .bk-had-bar > i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
#eguru-app .bk-kawalan { display: grid; gap: 10px; margin: 0 0 12px; }
#eguru-app .bk-mod { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--bg);
    border: 1px solid var(--border); justify-self: start; max-width: 100%; overflow-x: auto; }
#eguru-app .bk-mod-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--radius-full); cursor: pointer;
    font: inherit; font-size: var(--t4); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
#eguru-app .bk-mod-btn.aktif { background: var(--primary); color: #fff; }
#eguru-app .bk-cip-baris { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
#eguru-app .bk-cip-baris::-webkit-scrollbar { display: none; }
#eguru-app .bk-cip { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card-bg); border-radius: var(--radius-full);
    padding: 6px 12px; cursor: pointer; font: inherit; font-size: var(--t4); font-weight: 600; white-space: nowrap; color: inherit; }
#eguru-app .bk-cip span { font-weight: 500; color: var(--text-muted); }
#eguru-app .bk-cip.aktif { border-color: var(--primary); background: var(--success-light); color: var(--primary-text); }
#eguru-app .bk-cip.aktif span { color: var(--primary-text); }
#eguru-app .bk-tapis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#eguru-app .bk-tapis .form-control { flex: 1 1 200px; min-width: 0; }
#eguru-app .bk-kiraan { margin: 0 0 8px; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .bk-senarai-wrap.bk-memuat { opacity: .55; pointer-events: none; transition: opacity .15s; }
#eguru-app .bk-senarai { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
#eguru-app .bk-kad { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 12px 14px; background: var(--card-bg); min-width: 0; }
#eguru-app .bk-kad-kepala { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
#eguru-app .bk-subjek { font-size: var(--t3); font-weight: 700; color: var(--primary-text); text-transform: uppercase; letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
#eguru-app .bk-guna { font-size: var(--t3); color: var(--text-muted); white-space: nowrap; }
#eguru-app .bk-guna.popular { color: var(--accent-text); font-weight: 700; }
#eguru-app .bk-tajuk { margin: 0; font-size: var(--t5); line-height: 1.35; overflow-wrap: anywhere; }
#eguru-app .bk-sk { margin: 0; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#eguru-app .bk-sk b { color: var(--text); }
#eguru-app .bk-tag-baris { display: flex; flex-wrap: wrap; gap: 6px; }
#eguru-app .bk-tag { padding: 1px 8px; border-radius: var(--radius-full); border: 1px solid var(--border); font-size: var(--t3); font-weight: 600; color: var(--text-muted); }
#eguru-app .bk-tag.saya { border-color: var(--primary); color: var(--primary-text); background: var(--success-light); }
#eguru-app .bk-tag.guru { border-color: var(--accent); color: var(--accent-text); background: var(--accent-light); }
#eguru-app .bk-tag.ai { border-color: var(--info); color: var(--info-text); background: var(--info-light); }
#eguru-app .bk-kad-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
#eguru-app .bk-aksi-nota { font-size: var(--t3); color: var(--text-muted); flex: 1 1 160px; }
#eguru-app .bk-aksi-nota.luar { font-style: italic; }
#eguru-app .bk-kosong { display: grid; gap: 6px; justify-items: start; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--bg); }
#eguru-app .bk-kosong span { font-size: var(--t4); color: var(--text-muted); }
#eguru-app .bk-muka { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; font-size: var(--t4); }
#eguru-app tr.bk-sasaran > td { background: var(--success-light); }
/* Pratonton Bank (modal) */
#eguru-app .bk-pr-kepala { margin: 0 0 12px; }
#eguru-app .bk-pr-kepala h3 { margin: 4px 0 0; font-size: var(--t6); overflow-wrap: anywhere; }
#eguru-app .bk-pr-blok { margin: 0 0 12px; }
#eguru-app .bk-pr-lbl { font-size: var(--t3); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 4px; }
#eguru-app .bk-pr-teks { margin: 0; font-size: var(--t4); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
#eguru-app .bk-pr-senarai { margin: 0; padding-inline-start: 1.3em; font-size: var(--t4); line-height: 1.6; }
#eguru-app .bk-pr-nota { margin: 4px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--info-light); color: var(--info-text); font-size: var(--t3); }
#eguru-app .bk-pr-kaki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 600px) {
    #eguru-app .bk-senarai { grid-template-columns: 1fr; }
    #eguru-app .bk-mod { justify-self: stretch; }
    #eguru-app .bk-mod-btn { flex: 1 1 0; padding: 7px 8px; }
    #eguru-app .bk-statistik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #eguru-app .bk-jubin { padding: 7px 10px; }
    #eguru-app .bk-jubin b { font-size: var(--t6); }
}
/* Dokumen nota dalam modal — rupa kertas: putih, bergaris tepi, boleh skrol.
   Tinggi diberi kepada BINGKAI, bukan kepada modal (saiz modal seragam). */
#eguru-app .nt-dok { margin: 2px 0 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
#eguru-app .nt-dok iframe { display: block; width: 100%; height: 62vh; min-height: 300px; border: 0; background: #fff; }
@media (max-width: 600px) { #eguru-app .nt-dok iframe { height: 58vh; } }
/* KERTAS MESTI MENGISI HELAIAN.
   --------------------------------------------------------------------------
   62vh/58vh di atas KEKAL, tetapi hanya sebagai sandaran untuk pelayar tanpa
   :has(). Pada pelayar moden peraturan di bawah mengambil alih.

   Pepijat yang ini betulkan: `vh` merujuk viewport SEBENAR, sedangkan tinggi
   helaian ialah peratusan kotak #eguru-app — dan #eguru-app memakai
   `zoom: .90/.86/.82` pada desktop, yang membesarkan kotak susun aturnya
   kepada viewport/zoom sebelum diskalakan semula. Dua nombor itu tidak pernah
   sama: pada skrin 1080p, helaian ~1147px susun atur sementara 62vh hanya
   ~595px. Guru nampak nota berhenti separuh popup, dan makin besar skrin
   makin banyak ruang kosong.

   `height:100%` pada bingkai SAHAJA tidak cukup — ia akan meruntuhkan
   bingkai. Peratusan memerlukan SETIAP moyang mempunyai tinggi yang PASTI,
   dan .nt-dok ialah blok biasa bertinggi auto. Jadi .nt-dok diberi tinggi
   pasti dahulu melalui flex. Corak ini SAMA seperti .skt-modal-isi di atas.

   Saiz helaian TIDAK disentuh (lihat "MODAL: SATU SAIZ UNTUK SEMUA") — hanya
   cara anak-anaknya berkongsi tinggi yang sedia ada. */
#eguru-app .rph-modal-sheet:has(> .nt-dok) { display: flex; flex-direction: column; }
#eguru-app .rph-modal-sheet:has(> .nt-dok) > * { flex-shrink: 0; }
#eguru-app .rph-modal-sheet:has(> .nt-dok) > .nt-dok { flex: 1 1 auto; min-height: 300px; display: flex; }
#eguru-app .rph-modal-sheet:has(> .nt-dok) > .nt-dok > iframe { flex: 1 1 auto; height: auto; min-height: 0; }
#eguru-app .nt-tj-aksi { margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed var(--border); font-size: var(--t3); color: var(--text-muted); }
#eguru-app .nt-tj-aksi a { font-weight: 600; }
/* SK DSKP yang tiada dalam RPT — senarai boleh buka-tutup di bawah jadual. */
#eguru-app .skt-tiada-rpt { margin: 0 0 4px; font-size: var(--t4); color: var(--text-muted); }
#eguru-app .skt-tiada-rpt > summary { cursor: pointer; padding: 4px 0; }
#eguru-app .skt-tiada-rpt ul { margin: 6px 0; padding-inline-start: 20px; }
#eguru-app .skt-tiada-rpt li { margin: 2px 0; }
#eguru-app .skt-tiada-rpt p { margin: 6px 0 8px; }
#eguru-app .skt-modal-aksi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
#eguru-app .skt-modal-aksi .btn { width: 100% !important; min-width: 0; padding: 11px 10px !important; font-size: var(--t5) !important; white-space: nowrap; }
#eguru-app .skt-modal-aksi .btn > span { overflow: hidden; text-overflow: ellipsis; }
/* Padam: dalam bar tindakan modal DAN pada baris jadual Nota/Latihan. */
#eguru-app .btn.skt-btn-padam { color: var(--danger) !important; border-color: var(--danger) !important; }
#eguru-app .btn.skt-btn-padam:hover { background: var(--danger-light) !important; }
#eguru-app .skt-modal-aksi .skt-btn-padam { color: var(--danger) !important; border-color: var(--danger) !important; }
#eguru-app .skt-modal-aksi .skt-btn-padam:hover { background: var(--danger-light) !important; }
/* Makluman halaman Nota: DSKP ialah standard, buku teks hanya ABM/BBM. */
#eguru-app .nt-makluman { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 8px; padding: 10px 12px;
    border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-light); color: var(--text); }
#eguru-app .nt-makluman svg { width: 18px; height: 18px; flex-shrink: 0; fill: #B45309; margin-top: 2px; }
#eguru-app .nt-makluman p { margin: 0; font-size: var(--t4); line-height: 1.5; }
/* Pecahan tangga TP setiap murid dalam Jawapan (lulus = ≥ 2/3 soalan tahap itu). */
#eguru-app .lt-tangga { display: inline-block; font-size: var(--t3); font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full);
    border: 1px solid var(--border); white-space: nowrap; margin: 1px 0; }
#eguru-app .lt-tangga.lulus { background: var(--success-light); border-color: var(--success); color: var(--primary-text); }
#eguru-app .lt-tangga.gagal { background: var(--danger-light); border-color: var(--danger); color: var(--danger-text, #B91C1C); }
/* Label penuh perlukan ~160px sebutang (~900px skrin bagi lima). Di bawahnya
   kata pertama sahaja; di telefon, ikon di atas label supaya semua muat sebaris. */
@media (max-width: 960px) {
    #eguru-app .skt-modal-aksi .skt-lbl-tambah { display: none; }
}
@media (max-width: 460px) {
    #eguru-app .skt-modal-aksi { gap: 6px; }
    #eguru-app .skt-modal-aksi .btn { flex-direction: column; gap: 3px !important; padding: 8px 4px !important; font-size: var(--t3) !important; }
}
#eguru-app .skt-ev-baris { display: grid; grid-template-columns: 1fr auto 86px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); }
#eguru-app .skt-ev-baris:last-child { border-bottom: none; }
#eguru-app .skt-ev-baris .skt-ev-nama { font-size: var(--t5); font-weight: 600; color: var(--text); min-width: 0; }
#eguru-app .skt-ev-baris .skt-ev-auto { display: block; font-size: var(--t3); font-weight: 500; color: var(--text-muted); }
#eguru-app .skt-ev-baris .skt-ev-cat { grid-column: 1 / -1; font-size: var(--t4); padding: 5px 8px; }
#eguru-app .skt-ev-status { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
#eguru-app .skt-ev-status button {
    font: inherit; font-size: var(--t3); font-weight: 700; padding: 5px 8px; border: 0; cursor: pointer;
    background: var(--card-bg); color: var(--text-muted);
}
#eguru-app .skt-ev-status button + button { border-left: 1px solid var(--border); }
#eguru-app .skt-ev-status button.aktif { background: var(--primary); color: #fff; }
#eguru-app .skt-ev-status button.aktif.tidak { background: var(--danger); }
#eguru-app .skt-ev-baris select { font-size: var(--t4); padding: 5px 6px; }
@media (max-width: 700px) {
    #eguru-app .skt-wrap { border: none; overflow: visible; }
    #eguru-app .skt-table thead { display: none; }
    #eguru-app .skt-table, #eguru-app .skt-table tbody { display: block; }
    #eguru-app .skt-table tr {
        display: flex; flex-direction: column; gap: 5px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        padding: 10px; margin-bottom: 8px; background: var(--card-bg);
    }
    #eguru-app .skt-table td { display: block; border: none; padding: 0; min-width: 0; }
    #eguru-app .skt-table tr.skt-now td { background: none; }
    #eguru-app .skt-table tr.skt-now { background: var(--success-light); }
    /* Minggu menjadi TAJUK kad ("M3 · 26/01 – 30/01"), bukan lajur sempit —
       julat tarikh tidak muat dalam 56px dan melimpah ke atas teks SP. */
    #eguru-app .skt-mgg { width: auto; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
    #eguru-app .skt-mgg b, #eguru-app .skt-mgg span { display: inline-block; }
    #eguru-app .skt-sk, #eguru-app .skt-sp, #eguru-app .skt-murid, #eguru-app .skt-aksi { min-width: 0; width: auto; }
    /* Kad telefon: butang SAMA LEBAR sebaris (berbalut), di tengah — timbunan
       menegak 188px memanjangkan setiap kad tanpa sebab. Lencana satu baris penuh. */
    #eguru-app .skt-aksi-in { min-width: 0; margin-top: 4px; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    #eguru-app .skt-aksi-in .btn { flex: 1 1 0; min-width: 120px; width: auto !important; }
    #eguru-app .skt-aksi-in .skt-lencana { flex: 0 0 auto; }
    #eguru-app .skt-ev-baris { grid-template-columns: 1fr 70px; }
    #eguru-app .skt-ev-baris .skt-ev-status { grid-column: 1 / -1; order: 3; }
}
/* ===== PANEL BANK SOALAN DARIPADA JSU (FASA 4) =====
   Menggunakan semula jadual .pmk-tbl (hamparan Portal Murid): baris cukup
   hijau, sebahagian kuning, kosong merah. Warna di sini maklumat — ia
   menandakan SK yang masih perlu soalan. */
#eguru-app .pmk-tbl tr.cukup .pmk-nama,
#eguru-app .pmk-tbl tr.cukup td { background: var(--success-light); }
#eguru-app .pmk-tbl tr.sebahagian .pmk-nama,
#eguru-app .pmk-tbl tr.sebahagian td { background: var(--accent-light); }
#eguru-app .pmk-tbl tr.kosong .pmk-nama,
#eguru-app .pmk-tbl tr.kosong td { background: var(--danger-light); }
#eguru-app .pmk-tbl .bs-baki { font-weight: 800; }
#eguru-app .pmk-tbl tr.kosong .bs-baki { color: var(--danger-text); }
#eguru-app .pmk-tbl tr.sebahagian .bs-baki { color: var(--accent-text); }
#eguru-app .bs-kod { display: block; font-size: var(--t2); color: var(--text-light); font-weight: 600; }
#eguru-app .bs-ok svg { width: 15px; height: 15px; fill: var(--primary); }
#eguru-app .bs-jsu-kosong {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--info-light); border: 1px solid var(--info);
    border-radius: var(--radius-md); padding: 13px 15px;
}
#eguru-app .bs-jsu-kosong svg { width: 20px; height: 20px; fill: var(--info-text); flex-shrink: 0; margin-top: 1px; }
#eguru-app .bs-jsu-kosong b { display: block; font-size: var(--t5); color: var(--text); }
#eguru-app .bs-jsu-kosong span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
/* Jalur skop JSU — dibingkai sebagai blok supaya "daripada RPT" tidak
   kelihatan seperti varian butang "daripada DSKP" di bawahnya. Keduanya
   menjawab soalan berbeza: satu ujian penggal, satu kertas akhir tahun. */
#eguru-app .jsu-skop {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--bg); border: 1px solid var(--border);
    border-left: 3px solid var(--info); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 11px 13px; margin-bottom: var(--sp-3);
}
#eguru-app .jsu-skop-lbl {
    font-size: var(--t3); font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--info-text);
}
/* ===== HAMPARAN KEHADIRAN PORTAL MURID (FASA 3) =====
   Jadual hamparan sebenar: nombor dijajar dengan tabular-nums supaya lajur
   berbaris, nama murid melekat semasa menatal mendatar, dan baris di bawah
   ambang mendapat warna. Warna di sini maklumat — ia menandakan murid yang
   memerlukan tindakan, bukan menghiasi jadual. */
#eguru-app .pmk-meta { font-size: var(--t4); color: var(--text-muted); margin-bottom: 8px; }
#eguru-app .pmk-meta b { color: var(--primary-text); }
#eguru-app .pmk-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#eguru-app .pmk-tbl { border-collapse: collapse; width: 100%; font-size: var(--t4); }
#eguru-app .pmk-tbl th {
    background: var(--bg); color: var(--text-muted); font-size: var(--t3); font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px; padding: 7px 8px; text-align: left;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
#eguru-app .pmk-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
#eguru-app .pmk-tbl tbody tr:last-child td { border-bottom: none; }
#eguru-app .pmk-tbl .num { text-align: center; font-variant-numeric: tabular-nums; }
#eguru-app .pmk-tbl .pmk-no { color: var(--text-light); font-size: var(--t3); font-variant-numeric: tabular-nums; }
#eguru-app .pmk-tbl .pmk-nama {
    position: sticky; left: 0; background: var(--card-bg);
    font-weight: 600; color: var(--text); min-width: 130px; max-width: 210px;
}
#eguru-app .pmk-tbl th.pmk-nama { background: var(--bg); }
#eguru-app .pmk-tbl .pmk-pct { font-weight: 800; color: var(--text); }
#eguru-app .pmk-sifar { color: var(--text-light); }
#eguru-app .pmp-tp { display: block; font-size: var(--t2); color: var(--text-light); font-weight: 600; }
#eguru-app .pmp-tpk { display: block; font-size: var(--t2); color: var(--primary-text); font-weight: 800; }
#eguru-app .pmk-tbl tr.waspada td { background: var(--accent-light); }
#eguru-app .pmk-tbl tr.waspada .pmk-nama { background: var(--accent-light); }
#eguru-app .pmk-tbl tr.waspada .pmk-pct { color: var(--accent-text); }
#eguru-app .pmk-tbl tr.bahaya td { background: var(--danger-light); }
#eguru-app .pmk-tbl tr.bahaya .pmk-nama { background: var(--danger-light); }
#eguru-app .pmk-tbl tr.bahaya .pmk-pct { color: var(--danger-text); }
/* ===== KEHADIRAN (FASA 3) =====
   Butang bersegmen, bukan dropdown. Guru menanda pengecualian sambil 30 murid
   menunggu; dropdown pada telefon bermakna dua ketikan dan satu senarai
   bertindih untuk setiap murid. Setiap butang ada warna semantiknya sendiri
   supaya keadaan satu kelas boleh dibaca sekilas tanpa membaca huruf. */
#eguru-app .today-kh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: linear-gradient(135deg, var(--kh), var(--kh-dark)); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--t4);
    font-weight: 700; cursor: pointer; min-height: 30px;
}
#eguru-app .today-kh-btn:hover { opacity: .92; }
#eguru-app .today-kh-btn svg { width: 14px; height: 14px; fill: #fff; }
/* Sudah direkod: warna jenama, bukan gradien ungu — supaya "belum diambil"
   ialah keadaan yang menonjol, bukan sebaliknya. */
#eguru-app .today-kh-btn.sudah { background: var(--primary); }
#eguru-app .kh-ringkas {
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 12px; font-size: var(--t4); color: var(--text-muted); margin-bottom: 8px;
}
#eguru-app .kh-ringkas b { font-size: var(--t7); color: var(--primary-text); }
#eguru-app .kh-tag { font-weight: 700; }
#eguru-app .kh-tag.th { color: var(--danger-text); }
#eguru-app .kh-tag.s  { color: var(--info-text); }
#eguru-app .kh-tag.c  { color: var(--accent-text); }
#eguru-app .kh-tag.k  { color: var(--text-muted); }
#eguru-app .kh-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-bottom: 6px; }
#eguru-app .kh-leg { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .kh-leg i {
    font-style: normal; font-weight: 800; font-size: var(--t2);
    min-width: 20px; height: 17px; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
}
#eguru-app .kh-senarai { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
#eguru-app .kh-baris {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--card-bg);
}
#eguru-app .kh-senarai .kh-baris:last-child { border-bottom: none; }
/* Baris bukan-Hadir diserlahkan: itulah yang guru semak semula sebelum simpan. */
#eguru-app .kh-baris.luar { background: var(--bg); }
#eguru-app .kh-no { flex: 0 0 auto; font-size: var(--t3); color: var(--text-light); min-width: 18px; font-variant-numeric: tabular-nums; }
#eguru-app .kh-nama { flex: 1 1 130px; min-width: 0; font-size: var(--t5); font-weight: 600; color: var(--text); line-height: 1.35; }
#eguru-app .kh-btns { flex: 0 0 auto; display: inline-flex; gap: 3px; }
#eguru-app .kh-btn {
    min-width: 32px; height: 30px; padding: 0 6px; cursor: pointer;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
    border-radius: var(--radius-sm); font-size: var(--t3); font-weight: 800;
}
#eguru-app .kh-btn:hover { border-color: var(--text-light); }
/* Warna hanya apabila DIPILIH. Lima butang berwarna pada setiap baris menjadi
   dinding warna yang tiada apa-apa maknanya. */
#eguru-app .kh-btn.on.kh-h  { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .kh-btn.on.kh-th { background: var(--danger); border-color: var(--danger); color: #fff; }
#eguru-app .kh-btn.on.kh-s  { background: var(--info); border-color: var(--info); color: #fff; }
#eguru-app .kh-btn.on.kh-c  { background: var(--accent); border-color: var(--accent); color: #1F2937; }
#eguru-app .kh-btn.on.kh-k  { background: var(--text-muted); border-color: var(--text-muted); color: #fff; }
/* Legenda memakai warna yang SAMA sebagai petak penuh. */
#eguru-app .kh-leg i.kh-h  { background: var(--primary); color: #fff; }
#eguru-app .kh-leg i.kh-th { background: var(--danger); color: #fff; }
#eguru-app .kh-leg i.kh-s  { background: var(--info); color: #fff; }
#eguru-app .kh-leg i.kh-c  { background: var(--accent); color: #1F2937; }
#eguru-app .kh-leg i.kh-k  { background: var(--text-muted); color: #fff; }
#eguru-app .kh-sebab { flex: 1 1 100%; font-size: var(--t4); padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); }
/* ===== KAD OBJEKTIF & AKTIVITI (FASA 2) =====
   Satu kad per objektif, dan kad itu MESTI kelihatan seperti satu unit:
   objektif di atas, kemudian tiga medan yang tergantung padanya. Jalur kiri
   bernombor ialah maklumat, bukan hiasan — ia nombor yang sama yang muncul
   pada aktiviti dalam sel Aktiviti templat KPM, jadi guru boleh menjejaknya
   daripada borang ke dokumen bercetak. */
#eguru-app .rph-obj-kad {
    border: 1.5px solid var(--border); border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm); background: var(--bg);
    padding: 11px 13px; margin-bottom: 10px;
}
#eguru-app .roq-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#eguru-app .roq-no {
    flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: var(--t2); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
#eguru-app .roq-lbl {
    flex: 1; font-size: var(--t3); font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--primary-text);
}
#eguru-app .roq-buang {
    flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 3px;
    border-radius: var(--radius-sm); line-height: 0;
}
#eguru-app .roq-buang svg { width: 17px; height: 17px; fill: var(--text-light); }
#eguru-app .roq-buang:hover { background: var(--danger-light); }
#eguru-app .roq-buang:hover svg { fill: var(--danger); }
#eguru-app .roq-o { margin-bottom: 9px; }
/* Tiga medan bergantung: satu lajur di telefon, tiga di desktop. Aktiviti,
   ABM dan Instrumen ialah tiga jawapan kepada SATU objektif, jadi meletakkan
   ketiga-tiganya sebaris menjadikan hubungan itu kelihatan. */
#eguru-app .roq-grid { display: grid; gap: 9px; grid-template-columns: 1fr; }
@media (min-width: 760px) { #eguru-app .roq-grid { grid-template-columns: repeat(3, 1fr); } }
#eguru-app .roq-medan { min-width: 0; }
#eguru-app .roq-medan > label {
    display: block; font-size: var(--t3); font-weight: 700; color: var(--text-muted);
    margin-bottom: 4px;
}
#eguru-app .roq-medan textarea { min-height: 54px; }
#eguru-app .rph-obj-aksi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Paparan bacaan-sahaja instrumen di puncak seksyen Refleksi. */
#eguru-app .rph-ins-papar {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 11px;
}
#eguru-app .rph-ins-item { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
#eguru-app .rph-ins-item span {
    flex: 0 0 auto; font-size: var(--t2); font-weight: 800; color: var(--primary-text);
    background: var(--primary-light); border-radius: var(--radius-full);
    min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center;
}
#eguru-app .rph-ins-item b { font-size: var(--t4); font-weight: 600; color: var(--text); line-height: 1.45; }
#eguru-app .rph-ins-kosong { font-size: var(--t4); color: var(--text-light); font-style: italic; line-height: 1.5; }
#eguru-app .rph-ins-lebih {
    font-size: var(--t3); color: var(--accent-text); margin-top: 6px;
    padding-top: 6px; border-top: 1px dashed var(--border);
}
/* AMARAN LIMPAHAN duduk BERSEBELAHAN kad objektif, bukan di puncak seksyen
   Refleksi. rphObjUnjur() memotong pada RPH_INSTRUMEN_MAKS secara senyap
   sedangkan prompt RPH mewajibkan setiap objektif membawa instrumennya
   sendiri, jadi guru yang menulis 5 objektif kehilangan dua instrumen tanpa
   sebarang tanda. Ia MENAMAKAN instrumen yang tercicir — "ada 2 lagi" bukan
   maklumat yang guru boleh bertindak atasnya. Ia TIDAK menghalang simpan. */
#eguru-app .rph-ins-limpah {
    margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--warn-bg, rgba(217, 119, 6, .09));
    border-left: 3px solid var(--warn, #d97706);
    font-size: var(--t3); line-height: 1.5; color: var(--text);
}
#eguru-app .rph-ins-limpah b { font-weight: 700; }
/* Pemilih instrumen pada kad objektif RPH. */
#eguru-app .roq-i-sel { margin-bottom: 5px; }
#eguru-app .roq-i-nota { min-height: 0; }
#eguru-app .roq-i-amaran {
    font-size: var(--t3); line-height: 1.45; margin: 0 0 5px;
    padding: 6px 9px; border-radius: var(--radius-sm);
    background: var(--warn-bg, rgba(217, 119, 6, .09));
    border-left: 3px solid var(--warn, #d97706);
}
#eguru-app .roq-i-padan {
    display: inline-block; margin-top: 5px; padding: 3px 9px;
    font-size: var(--t3); font-weight: 600; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--accent-text);
}
#eguru-app .roq-i-padan:hover { background: var(--bg-soft, rgba(0, 0, 0, .04)); }
/* ---- TAB HALAMAN MODUL (JSU) ----
   Bahasa visual yang SAMA seperti .auth-tab supaya halaman ini tidak
   memperkenalkan gaya tab ketiga dalam aplikasi. Nama berbeza kerana
   .auth-tab terikat kepada skrin log masuk dan tidak sepatutnya dipinjam
   ke tempat lain. */
#eguru-app .mod-tabs {
    display: flex; background: var(--bg); border-radius: var(--radius-md);
    padding: 4px; margin: 0 0 var(--sp-4); gap: 4px; flex-wrap: wrap;
}
#eguru-app .mod-tab {
    flex: 1 1 130px; text-align: center; padding: 9px 6px;
    border-radius: var(--radius-sm); font-size: var(--t5); font-weight: 600;
    cursor: pointer; color: var(--text-muted); transition: all .2s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
#eguru-app .mod-tab.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); }
#eguru-app .mod-tab-kira {
    font-size: var(--t3); font-weight: 700; padding: 0 6px; min-width: 18px;
    border-radius: var(--radius-full); background: var(--border); color: var(--text);
}
#eguru-app .mod-tab-kira:empty { display: none; }
#eguru-app .mod-tab-kira.perlu { background: var(--warn, #d97706); color: #fff; }
#eguru-app .mod-panel[hidden] { display: none; }

/* ---- HALAMAN JSU ----
   Kad ujian, baris butiran boleh kembang, dan jalur semakan. Semua warna
   melalui token sedia ada supaya tema gelap tidak perlu disentuh. */
#eguru-app .jsu-ujian-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
#eguru-app .jsu-pil {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--card-bg); font-size: var(--t4); font-weight: 600;
    cursor: pointer; color: var(--text); transition: all .15s;
}
#eguru-app .jsu-pil:hover { border-color: var(--primary); }
#eguru-app .jsu-pil.aktif { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Tahun sesi (.help-hint kelabu) pada pil AKTIF hampir tidak kelihatan di atas latar hijau. */
#eguru-app .jsu-pil.aktif .help-hint { color: rgba(255, 255, 255, .85); }
#eguru-app .jsu-pil-baru { border-style: dashed; color: var(--text-muted); }
#eguru-app .jsu-status {
    font-size: var(--t3); font-weight: 700; padding: 1px 7px;
    border-radius: var(--radius-full); background: var(--border); color: var(--text);
}
#eguru-app .jsu-status.draf   { background: var(--border); color: var(--text-muted); }
#eguru-app .jsu-status.semak  { background: var(--warn, #d97706); color: #fff; }
#eguru-app .jsu-status.sah    { background: var(--success, #16a34a); color: #fff; }
#eguru-app .jsu-kosong {
    border: 1px dashed var(--border); border-radius: var(--radius-md);
    padding: 18px 14px; text-align: center; color: var(--text-muted); font-size: var(--t4);
}
#eguru-app .jsu-kosong b { display: block; color: var(--text); font-size: var(--t5); margin-bottom: 4px; }
/* Baris butiran: SP, TP, kertas/bahagian dan wajaran hidup di sini supaya
   jadual utama kekal 11 lajur. Lihat nota di sekitar .jsu-tbl .form-control —
   memaksa 18 lajur pada telefon 360px meruntuhkan setiap medan. */
#eguru-app .jsu-butiran-sel { background: var(--bg); padding: 10px 12px !important; }
#eguru-app .jsu-butiran { display: flex; flex-direction: column; gap: 9px; }
#eguru-app .jsu-butiran-tajuk {
    font-size: var(--t3); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
}
#eguru-app .jsu-sp-senarai { display: flex; flex-direction: column; gap: 4px; }
#eguru-app .jsu-sp {
    display: flex; align-items: flex-start; gap: 7px; font-size: var(--t4);
    line-height: 1.45; cursor: pointer;
}
#eguru-app .jsu-sp input { margin-top: 3px; flex-shrink: 0; }
/* SP yang tidak dapat dipadankan kepada bank kurikulum — teksnya disimpan
   tetapi identitinya tidak. Digariskan putus supaya guru nampak bezanya. */
#eguru-app .jsu-sp.yatim { border-left: 2px dashed var(--warn, #d97706); padding-left: 7px; }
#eguru-app .jsu-caret {
    background: none; border: 0; cursor: pointer; color: var(--text-muted);
    font-size: var(--t4); padding: 2px 5px; line-height: 1;
}
#eguru-app .jsu-semak { display: flex; flex-direction: column; gap: 7px; margin: 0 0 var(--sp-4); }
#eguru-app .jsu-semak-baris {
    display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
    border: 1px solid var(--border); border-left-width: 3px;
    border-radius: var(--radius-md); font-size: var(--t4); background: var(--card-bg);
}
#eguru-app .jsu-semak-baris.ok     { border-left-color: var(--success, #16a34a); }
#eguru-app .jsu-semak-baris.amaran { border-left-color: var(--warn, #d97706); }
#eguru-app .jsu-semak-baris.ralat  { border-left-color: var(--danger); }
#eguru-app .jsu-semak-baris b { display: block; }
#eguru-app .jsu-semak-baris span { color: var(--text-muted); }
#eguru-app .jsu-tahun-sk { margin: 0 0 10px; }
#eguru-app .jsu-tahun-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg); cursor: pointer; font-size: var(--t4); font-weight: 600;
}
#eguru-app .jsu-tahun-isi { padding: 8px 4px 0; }

/* Amaran "N belum hantar" dalam modal Jawapan Murid (ltLihatJawapan). */
#eguru-app .ins-amaran { color: var(--warn, #d97706); }

/* ---- BUTANG IKON PADA KAD (DIKONGSI) ----
   Butang tindakan kad TIDAK menggunakan .btn: peraturan asas
   `.btn { width: 100% !important }` mengalahkan sebarang width sebaris, jadi
   butang padam mengembang menjadi jalur merah selebar kad — merah pekat yang
   menenggelamkan tajuk kad sedangkan padam ialah tindakan paling jarang di
   situ. Ia dipakai oleh JSU, Exam, Nota dan
   Evidens: semuanya membawa pepijat jalur merah yang sama.
   flex: 0 0 auto supaya ia tidak meregang di dalam mana-mana baris flex
   (.bs-item, .jsu-item); di dalam <td> ia mengecut sendiri. */
#eguru-app .kad-ikon {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    flex: 0 0 auto; padding: 4px 9px; min-height: 28px;
    font-family: inherit; font-size: var(--t3); font-weight: 700; line-height: 1;
    color: var(--text-muted); background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
#eguru-app .kad-ikon:hover { color: var(--text); border-color: var(--text-light, #94a3b8); }
#eguru-app .kad-ikon.padam { padding: 4px 8px; }
#eguru-app .kad-ikon.padam:hover {
    color: var(--danger-text); border-color: var(--danger); background: var(--danger-light);
}
/* Ringkasan "N daripada M murid sudah menghantar" di atas jadual Jawapan
   Murid (ltLihatJawapan). Satu-satunya gaya helaian penandaan Instrumen
   yang masih dipakai selepas Instrumen digabung ke Evidens (2026-09-15). */
#eguru-app .hln-ringkas {
    font-size: var(--t4); color: var(--text-muted); background: var(--bg);
    border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 10px;
}

#eguru-app .rph-ins-limpah ul { margin: 5px 0 0; padding-left: 18px; }
#eguru-app .rph-ins-limpah li { margin-top: 2px; }
/* auto-FIT, bukan auto-FILL. auto-fill mengekalkan trek kosong yang sudah
   dibuatnya, jadi 4 kad pada skrin yang ada ruang untuk 6 duduk berhimpit di
   kiri dengan dua trek kosong di kanan. auto-fit menguncupkan trek kosong itu,
   jadi kad yang ada berkembang mengisi baris penuh — hujung ke hujung tanpa
   mengira berapa subjek guru ajar. Subjek ke-5 dan ke-6 masuk ke baris yang
   sama; yang ke-7 membuka baris baharu yang juga penuh.
   min(100%, 250px) menghalang limpahan mendatar pada telefon sempit: pada
   skrin 320px trek tidak boleh menuntut 250px lalu menolak kad keluar. */
/* SATU BARIS mendatar yang boleh diskrol. Dahulu grid auto-fit membalut subjek
   ke baris kedua sebaik bilangannya melebihi apa yang muat selebar skrin (lihat
   tangkap layar: 4 kad + 1 kad terbalut). Saif mahu SEMUA kad pada satu baris —
   jadi flex nowrap + overflow-x: skrol mendatar bila subjek banyak, bukan
   terbalut ke bawah. Kad berlebar tetap supaya seragam & nama panjang dipotong.
   overflow-x DI SINI (bukan pada body) — halaman tidak pernah skrol mendatar. */
#eguru-app .rpt-jw-grid {
    display: flex; gap: 10px; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Bar skrol native DISEMBUNYIKAN. Sebabnya bukan estetika semata: pada
       desktop `--ui-zoom` (.86/.82) lebar kad yang meregang menjadi pecahan, dan
       pembundaran sub-piksel Chrome meninggalkan ~8px "limpahan hantu" walaupun
       semua kad muat — cukup untuk memaksa bar skrol 17px kekal di bawah baris
       itu selama-lamanya, iaitu serabut yang mengarut. Anak panah .rjw-nav di
       bawah menggantikannya sebagai isyarat, dan ia hanya muncul apabila baris
       BENAR-BENAR ada lebih (ambang 16px dalam rptJwNavSegar). */
    scrollbar-width: none; -ms-overflow-style: none;
}
#eguru-app .rpt-jw-grid::-webkit-scrollbar { height: 0; width: 0; }
/* Bekas kedudukan bagi anak panah geser. */
#eguru-app .rpt-jw-bar { position: relative; }
#eguru-app .rjw-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    display: none; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    background: var(--card-bg); border: 1.5px solid var(--border); cursor: pointer;
    box-shadow: 0 1px 6px rgba(0,0,0,.16); color: var(--text-muted);
}
#eguru-app .rjw-nav:hover { border-color: var(--primary); color: var(--primary-text); }
#eguru-app .rjw-nav svg { width: 15px; height: 15px; fill: currentColor; }
#eguru-app .rjw-nav-kiri  { left: -6px; }
#eguru-app .rjw-nav-kanan { right: -6px; }
#eguru-app .rpt-jw-bar.lebih-kiri  .rjw-nav-kiri  { display: flex; }
#eguru-app .rpt-jw-bar.lebih-kanan .rjw-nav-kanan { display: flex; }
/* Lorek lembut di tepi yang ada lebih — memberitahu baris itu bersambung. */
#eguru-app .rpt-jw-bar::before,
#eguru-app .rpt-jw-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 34px;
    pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1;
}
#eguru-app .rpt-jw-bar::before { left: 0;  background: linear-gradient(to right, var(--card-bg), transparent); }
#eguru-app .rpt-jw-bar::after  { right: 0; background: linear-gradient(to left,  var(--card-bg), transparent); }
#eguru-app .rpt-jw-bar.lebih-kiri::before  { opacity: 1; }
#eguru-app .rpt-jw-bar.lebih-kanan::after  { opacity: 1; }
/* PENUH KIRI KE KANAN, tetap satu baris. `flex: 1 0 240px` melakukan kedua-duanya
   dengan satu peraturan: grow=1 jadi bila subjek SEDIKIT kad meregang berkongsi
   lebar penuh (tiada jurang di kanan — kad lebar tetap 224px dahulu meninggalkan
   jurang setiap kali jumlahnya tidak kebetulan sepadan), shrink=0 jadi bila subjek
   BANYAK ia kekal 240px dan barisnya diskrol ke tepi, bukan mengecil sampai
   nama tak boleh dibaca.
   ASAS DINAIKKAN 210px -> 240px (2026-08-28). Baris kaki kad kini membawa
   lencana status PENUH di sebelah butang Kunci; pasangan terpanjang
   ("Diselaraskan panitia" + "Dikunci") memerlukan ~215px termasuk padding kad.
   Pada 210px pasangan itu membalut pada setiap kad terkunci — betul, tetapi
   tidak perlu. */
#eguru-app .rpt-jw-grid > .rpt-jw-kad {
    flex: 1 0 240px; scroll-snap-align: start;
}
/* Telefon: asas lebih besar supaya satu kad hampir memenuhi skrin dengan sedikit
   intaian kad seterusnya — isyarat bahawa baris ini boleh diskrol ke tepi.
   Grow kekal, jadi guru dengan satu subjek tetap dapat kad selebar penuh. */
@media (max-width: 480px) {
    #eguru-app .rpt-jw-grid > .rpt-jw-kad { flex: 1 0 74vw; }
}
/* Kad subjek RPT. Dahulu ia menyusun nama, tingkatan, beban ("1 waktu · 1j
   seminggu / kelas (tidak seragam…) · Selasa, Rabu, Khamis") dan senarai kelas
   pada EMPAT baris — beban & hari itu butiran jadual waktu, bukan maklumat
   memilih RPT, jadi ia dibuang.
   2026-08-28 — DISUSUN SEMULA (empat baris, satu perkara satu baris).
   Bentuk sebelum ini memampatkan LIMA perkara pada SATU baris selebar 210px:
   nama subjek, lencana keluarga, tingkatan, lencana status, butang Kunci.
   Pada skrin sebenar hasilnya:
     * nama subjek — SATU-SATUNYA maklumat yang guru guna untuk memilih —
       dipotong menjadi "Pendidika…", jadi tiga kad "Pendidikan …" yang berbeza
       kelihatan serupa;
     * lencana status runtuh menjadi "D…" (flex-shrink:2 + ellipsis) lalu duduk
       melekat pada butang Kunci sehingga kelihatan BERTINDIH.
   Tiada pelarasan flex-shrink yang boleh membaikinya: lima perkara memang tidak
   muat pada satu baris selebar itu. Jadi setiap perkara diberi barisnya sendiri:

     .rjw-tajuk      nama subjek (boleh balut 2 baris) + lencana keluarga
     .rjw-meta       tingkatan (pil) + bilangan kelas
     .rjw-perincian  nama kelas (1 baris, ellipsis)
     .rjw-kaki       status (kiri) ....... butang Kunci (kanan)

   .rjw-kaki guna `margin-top:auto` supaya kaki SETIAP kad berbaris rata
   walaupun satu nama membalut dua baris dan jirannya hanya satu — itulah yang
   menjadikan baris kad kelihatan seragam. `min-height` menjamin ketinggian
   asas yang sama walaupun subjek tanpa kelas. */
#eguru-app .rpt-jw-kad {
    background: var(--bg); border: 1.5px solid var(--border); border-left: 4px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 12px 10px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 5px; min-width: 0; min-height: 118px;
}
/* Baris TAJUK — nama subjek + lencana keluarga templat. align-items:flex-start
   supaya lencana melekat pada baris PERTAMA nama, bukan terapung di tengah-tengah
   bila nama membalut dua baris. */
#eguru-app .rjw-tajuk { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
/* Baris META — tingkatan + bilangan kelas. */
#eguru-app .rjw-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; min-width: 0;
}
/* Baris KAKI — status lawan butang Kunci, hujung ke hujung. flex-wrap:wrap ialah
   injap keselamatan: bila kad sempit DAN statusnya panjang ("Diselaraskan
   panitia"), butang jatuh ke bawah status dan bukan berhimpit dengannya. Itu
   sebabnya .rjw-status tidak perlu lagi dipotong dengan ellipsis. */
#eguru-app .rjw-kaki {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px 7px; min-width: 0;
    margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border);
}
/* Slot PERINCIAN SUBJEK. Memegang NAMA kelas sahaja — bilangannya kini duduk
   pada .rjw-meta di atas, jadi baris ini tidak lagi bermula dengan label
   "3 kelas:" yang memakan ruang sebelum nama pertama. Satu baris, dipotong
   dengan ellipsis supaya menambah teks di sini tidak boleh memecahkan
   ketinggian kad; nama penuh ada pada `title`. */
#eguru-app .rjw-perincian {
    font-size: var(--t3); color: var(--text-light); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#eguru-app .rpt-jw-kad:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(5,150,105,.12); }
/* Kad DIPILIH.
   Latar sengaja TIDAK diubah. --primary-light ialah hijau tepu (#34D399 terang,
   #6EE7B7 gelap) dan teks kad tenggelam di atasnya — diukur: pada tema gelap
   teks utama hanya 1.39:1 dan senarai kelas 2.33:1, jauh di bawah AA 4.5:1;
   pada tema terang teks nyahaktif 3.93:1. Warna latar yang tepu tidak boleh
   membawa isyarat "dipilih" tanpa mengorbankan setiap perkataan di atasnya.
   Isyarat itu dibawa oleh CINCIN dan WARNA TAJUK, yang tidak menyentuh latar
   mana-mana teks — jadi setiap baris kekal pada kontras kad biasa
   (14.0 / 7.2 / 4.6 terang; 16.3 / 7.0 / 5.0 gelap). */
#eguru-app .rpt-jw-kad.aktif {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary), 0 2px 10px rgba(5, 150, 105, .16);
}
#eguru-app .rpt-jw-kad.aktif .rjw-nama { color: var(--primary-text); }
/* Jalur kiri status DIKEKALKAN pada kad terpilih: cincin bermakna "dipilih",
   jalur bermakna "keadaan RPT". Dua maklumat berbeza, dua isyarat berbeza. */
/* Jalur kiri = status. Warna ialah maklumat di sini, bukan hiasan: merah
   bermakna "subjek ini belum ada RPT", dan itulah satu-satunya keadaan yang
   memerlukan tindakan guru. */
#eguru-app .rpt-jw-kad.st-kosong { border-left-color: var(--danger); }
#eguru-app .rpt-jw-kad.st-simpan { border-left-color: var(--primary); }
#eguru-app .rpt-jw-kad.st-kunci  { border-left-color: var(--accent); }
/* Kunci mengatasi status: RPT boleh dikunci sebelum disimpan, dan jalur
   kiri mesti menunjukkan keadaan yang butangnya tunjukkan. */
#eguru-app .rpt-jw-kad.terkunci  { border-left-color: var(--accent); }
/* VARIAN MODUL (.mjw-kad) — kad yang sama, TIGA baris bukan empat.
   Halaman modul (Instrumen, Nota, Evidens, JSU …) tidak tahu apa-apa tentang
   status RPT, jadi baris kaki (status + butang Kunci) dan jalur kiri berwarna
   tiada makna di sana: jalur 4px yang sentiasa kelabu hanyalah hiasan yang
   berpura-pura membawa maklumat. min-height juga digugurkan kerana 118px itu
   ruang untuk baris kaki yang kad ini tidak ada — tanpa ia, kad modul menjadi
   pendek dan barisnya tidak memakan setengah skrin telefon. */
#eguru-app .mjw-kad { min-height: 0; border-left-width: 1.5px; }
/* Kad "tiada subjek tertentu" (Penjana Prompt sahaja). Bingkai putus-putus:
   ia pilihan yang SAH, bukan subjek — jadi ia tidak patut kelihatan seperti
   satu lagi kad subjek dalam barisan yang sama. */
#eguru-app .mjw-kosong { border-style: dashed; background: transparent; }
#eguru-app .mjw-kosong .rjw-nama { color: var(--text-muted); }
/* NAMA SUBJEK — maklumat utama kad, jadi ia yang mendapat ruang paling banyak.
   Dibenarkan MEMBALUT dua baris dan bukan dipotong pada satu: "Pendidikan Islam"
   dan "Pengurusan Perniagaan" kedua-duanya muat penuh pada dua baris, sedangkan
   satu baris memotong kedua-duanya kira-kira pada aksara ke-10 — dan "Pendidika…"
   tidak membezakan Pendidikan Islam daripada Pendidikan Jasmani.
   Baris KETIGA masih dipotong (line-clamp 2) supaya ketinggian kad kekal boleh
   diramal; renderRptJwSenarai() memasang `title` dengan nama penuh untuk kes itu.
   overflow-wrap:anywhere menahan satu perkataan yang sangat panjang daripada
   melebarkan kad melepasi asas fleksnya. */
#eguru-app .rjw-nama {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--t6); font-weight: 700; color: var(--text); line-height: 1.28;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere;
}
/* TINGKATAN — pil berbingkai, bukan teks bogel. Dahulu ia teks kelabu yang duduk
   terus di sebelah nama yang terpotong, jadi "Pendidika… Tingkatan 3" terbaca
   sebagai satu rentetan rosak. Bingkai menjadikannya jelas satu label berasingan. */
#eguru-app .rjw-ting {
    flex-shrink: 0; font-size: var(--t2); font-weight: 700; white-space: nowrap;
    /* --primary-text untuk TEKS, --primary untuk BINGKAI — peraturan yang sama
       yang ditetapkan pada takrif pemboleh ubah di atas. --primary-light
       (#34D399) sebagai bingkai hanya 1.92:1 atas kad putih; --primary
       memberi 3.77:1 terang / 5.77:1 gelap, dan teksnya 5.48:1 / 7.61:1. */
    color: var(--primary-text); background: var(--card-bg);
    border: 1px solid var(--primary); padding: 2px 8px; border-radius: var(--radius-full);
}
/* BILANGAN kelas. Nama kelas ada pada .rjw-perincian di bawah — di sini hanya
   kiraannya, supaya guru nampak "3 kelas" walaupun senarai namanya terpotong. */
#eguru-app .rjw-bil { font-size: var(--t3); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
#eguru-app .rjw-fam {
    flex-shrink: 0; margin-top: 1px; font-size: var(--t1); font-weight: 800;
    letter-spacing: .5px; color: var(--info-text); background: var(--info-light);
    border: 1px solid rgba(59,130,246,.28); padding: 1px 5px; border-radius: var(--radius-full);
}
/* STATUS. Ia tidak lagi berkongsi baris dengan nama subjek, jadi ia tidak lagi
   perlu mengalah: `flex-shrink:2 + text-overflow:ellipsis` yang lama memampatkan
   "DSKP belum ada" menjadi "D…" — lencana status yang terpotong tidak membawa
   apa-apa makna dan terbaca sebagai elemen rosak. Sekarang ia dipapar PENUH; bila
   benar-benar tiada ruang, .rjw-kaki membalut dan butang Kunci turun ke bawah. */
#eguru-app .rjw-status {
    flex: 0 1 auto; min-width: 0;
    font-size: var(--t1); font-weight: 800; letter-spacing: .3px;
    padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap;
    background: var(--card-bg); color: var(--text-muted); border: 1px solid var(--border);
}
#eguru-app .rjw-status.kosong { color: var(--danger-text); border-color: var(--danger); }
#eguru-app .rjw-status.simpan { color: var(--primary-dark); border-color: var(--primary); }
#eguru-app .rjw-status.kunci  { color: var(--accent-text); border-color: var(--accent); }
#eguru-app .rjw-btn { flex-shrink: 0; margin-left: auto; }
/* Nombor minggu ("· 12 mgg") dahulu DISEMBUNYIKAN di bawah 480px supaya baris
   atas yang sesak tidak pecah. Baris sesak itu sudah tiada — status memiliki
   .rjw-kaki sendiri sekarang — jadi kiraan minggu dipapar pada semua saiz skrin.
   Itu maklumat sebenar ("RPT ini meliputi berapa minggu"), bukan hiasan. */
#eguru-app .rjw-btn {
    font-size: var(--t2); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full);
    background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: pointer;
}
#eguru-app .rjw-btn:hover { border-color: var(--accent); color: var(--accent-text); }
#eguru-app .rjw-btn.terkunci { background: var(--accent); border-color: var(--accent); color: #1F2937; }
#eguru-app .rpt-jw-kira { font-size: var(--t3); color: var(--text-muted); margin-top: 9px; }
#eguru-app .rpt-jw-kira b { color: var(--danger-text); }
/* Teks perihalan halaman RPT dijustifikasikan (rata kiri DAN kanan) supaya
   setiap blok kelihatan seragam — atas permintaan: "selari dengan format yang
   sama, justify dari kanan hingga kiri". Hanya blok perihalan yang disasarkan;
   label borang, tajuk & butang kekal seperti biasa. text-align-last:left
   menghalang baris akhir yang pendek daripada teregang jarang. */
#eguru-app #view-rpt .help-hint,
#eguru-app #view-rpt .tip-box p,
#eguru-app #view-rpt .warning-box p,
#eguru-app #view-rpt .rpt-import-teks {
    text-align: justify;
    text-align-last: left;
    -webkit-hyphens: none; hyphens: none;
}
#eguru-app .rpt-jw-kosong {
    display: flex; gap: 11px; align-items: flex-start;
    background: var(--accent-light); border: 1px solid var(--accent);
    border-radius: var(--radius-md); padding: 13px 15px;
}
#eguru-app .rpt-jw-kosong svg { width: 20px; height: 20px; fill: var(--accent); flex-shrink: 0; margin-top: 1px; }
#eguru-app .rpt-jw-kosong b { display: block; font-size: var(--t5); color: var(--text); }
#eguru-app .rpt-jw-kosong span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
/* Tajuk pilihan — menggantikan dua dropdown sebagai penanda "anda sedang
   menyunting yang ini". Tanpa ia, borang pilihan di bawah tergantung tanpa
   subjek. */
#eguru-app .rpt-pilihan-tajuk {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 9px 12px; margin-bottom: var(--sp-3);
    background: var(--bg); border: 1px solid var(--border);
    border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
#eguru-app .rpt-pilihan-tajuk b { font-size: var(--t6); color: var(--text); }
#eguru-app .rpt-pilihan-tajuk span { font-size: var(--t4); color: var(--text-muted); }
#eguru-app .rpt-pilihan-tajuk .kosong { font-size: var(--t4); color: var(--text-light); font-style: italic; }
/* ===== PANEL SEMAKAN LIPUTAN ===== */
#eguru-app .rpt-lip { display: flex; gap: 11px; align-items: flex-start; border-radius: var(--radius-md); padding: 13px 15px; margin-top: var(--sp-3); }
#eguru-app .rpt-lip svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
#eguru-app .rpt-lip.ok { background: var(--success-light); border: 1px solid var(--primary); }
#eguru-app .rpt-lip.ok svg { fill: var(--primary); }
#eguru-app .rpt-lip.amaran { background: var(--accent-light); border: 1px solid var(--accent); }
#eguru-app .rpt-lip.amaran svg { fill: var(--accent); }
#eguru-app .rpt-lip b { display: block; font-size: var(--t5); color: var(--text); }
#eguru-app .rpt-lip > div > span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
#eguru-app .rpt-lip-grp { margin-top: 10px; }
#eguru-app .rpt-lip-grp b { font-size: var(--t3); text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); }
#eguru-app .rpt-lip-grp ul { margin: 5px 0 0; padding-left: 18px; }
#eguru-app .rpt-lip-grp li { font-size: var(--t4); color: var(--text); line-height: 1.5; margin-bottom: 3px; }
#eguru-app .rpt-lip-grp li i { color: var(--text-light); font-size: var(--t3); }
#eguru-app .rpt-lip-grp li.lagi { list-style: none; margin-left: -18px; color: var(--text-light); font-style: italic; }
#eguru-app .rpt-saved-list { display: flex; flex-direction: column; gap: 8px; }
#eguru-app .rpt-saved-item { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#eguru-app .rpt-saved-item:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(5,150,105,.12); }
#eguru-app .rpt-saved-icon { font-size: var(--t8); flex-shrink: 0; }
#eguru-app .rpt-saved-text { flex: 1; min-width: 0; font-size: var(--t6); cursor: pointer; }
#eguru-app .rpt-saved-text > div { font-size: var(--t5); color: var(--text-muted); margin-top: 1px; }
#eguru-app .rpt-saved-arrow { width: 18px; height: 18px; fill: var(--text-light); flex-shrink: 0; }
#eguru-app .rpt-table tr.rpt-now td { background: var(--success-light); }
#eguru-app .rpt-table tr.rpt-now td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
#eguru-app .rpt-now-lbl { font-size: var(--t1); font-weight: 800; color: var(--accent); margin-top: 2px; letter-spacing: .4px; }
#eguru-app .rpt-table tr.rpt-now-flash td { animation: rptFlash 1.6s ease-out; }
@keyframes rptFlash { 0%,100% { background: var(--success-light); } 30% { background: var(--accent-light); } }
#eguru-app .semak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px,1fr)); gap: 6px; margin-top: 6px; }
#eguru-app .semak-item { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: var(--t4); font-weight: 700; padding: 7px 4px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
/* Penanda dua-keadaan (hijau = sudah hantar, kelabu = belum). Kedua-dua
   belah dahulunya hex tetap: #9ca3af atas #fff = 2.54:1 (nilai yang sama
   sudah diharamkan di takrif --text-light), dan putih atas #059669 =
   3.77:1. Kini ikut token supaya lulus AA & bertukar dgn tema:
   --text-muted atas --card-bg = 7.56:1 cerah / 5.71:1 gelap;
   putih atas --primary-dark #047857 = 5.48:1. */
#eguru-app .semak-item.ada { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); box-shadow: 0 1px 4px rgba(5,150,105,.35); }
#eguru-app .semak-item.tiada { background: var(--card-bg); color: var(--text-muted); border: 1px dashed var(--border); }
/* Tema gelap tulis semula --primary-dark kepada #059669 (balik 3.77:1) — pin. */
#eguru-app.dark-theme .semak-item.ada { background: #047857; border-color: #047857; }

/* ===== ACCORDION TETAPAN ===== */
#eguru-app .acc-head { cursor: pointer; user-select: none; }
#eguru-app .acc-arrow { margin-left: auto; color: var(--text-light); transition: transform .25s; font-size: var(--t4); cursor: pointer; padding: 4px; }
#eguru-app .section-header:has(.acc-head.acc-open) .acc-arrow,
#eguru-app .acc-arrow.acc-open { transform: rotate(180deg); }
#eguru-app .acc-body { margin-top: 14px; }
/* Chevron (caret) untuk semua ikon accordion — span/butang kosong sebelum ini tidak nampak */
#eguru-app .acc-arrow::before,
#eguru-app .rpt-exp::before,
#eguru-app .dskp-panel-arrow::before {
    content: ""; display: inline-block; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    border-radius: var(--radius-xs); transform: rotate(45deg); transform-origin: center;
    vertical-align: middle; position: relative; top: -2px;
}

/* ===== HARD SELL: 100% BERPAKSIKAN DSKP =====
   Dipakai di Utama, Tentang Kami & Pelan. Teks ditulis STATIK dalam HTML (bukan disuntik JS)
   supaya ia dibaca enjin carian & pratonton WhatsApp/Facebook. */
#eguru-app .dskp-sell { position: relative; overflow: hidden; border-radius: var(--radius); border: 1.5px solid rgba(5,150,105,.3); background: linear-gradient(135deg, var(--success-light) 0%, var(--card-bg) 68%); padding: 15px; margin-bottom: var(--sp-4); }
#eguru-app .dskp-sell::after { content: "DSKP"; position: absolute; right: 10px; bottom: -14px; font-size: 3.4em; font-weight: 900; letter-spacing: -2px; color: var(--primary); opacity: .07; pointer-events: none; line-height: 1; }
#eguru-app .dskp-sell-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: var(--sp-3); }
#eguru-app .dskp-100 { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: var(--t2); font-weight: 900; letter-spacing: .6px; color: #fff; background: linear-gradient(135deg, var(--primary), #0D9488); padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; }
#eguru-app .dskp-100 svg { width: 11px; height: 11px; fill: currentColor; }
#eguru-app .dskp-sell h4 { font-size: var(--t6); font-weight: 800; color: var(--text); line-height: 1.35; position: relative; }
/* Perenggan penuh selebar kotak — lihat "PROSA MEMENUHI KOTAKNYA". */
#eguru-app .dskp-sell p { font-size: var(--t4); line-height: 1.62; color: var(--text-muted); margin-top: 6px; position: relative; }
#eguru-app .dskp-sell p strong { color: var(--text); font-weight: 700; }
#eguru-app .dskp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 11px; position: relative; }
#eguru-app .dskp-chain b { font-size: var(--t2); font-weight: 700; color: var(--primary-text); background: var(--card-bg); border: 1px solid rgba(5,150,105,.3); padding: 4px 9px; border-radius: var(--radius-sm); white-space: nowrap; }
#eguru-app .dskp-chain b.hujung { background: var(--primary-text); color: #fff; border-color: transparent; }
#eguru-app .dskp-chain i { font-style: normal; font-size: var(--t2); color: var(--text-light); }
/* :not(.hujung) — kalau tidak, cip terakhir ("Kajian Tindakan") hilang isian hijaunya dalam tema
   gelap kerana peraturan ini datang kemudian dengan specificity yang sama. */
#eguru-app.dark-theme .dskp-chain b:not(.hujung) { background: rgba(255,255,255,.05); }
/* Tema gelap: --primary-text ialah hijau CERAH (#34D399), jadi cip terakhir
   perlu teks gelap — putih di atasnya cuma 1.9:1. Hijau gelap tua = 7.8:1. */
#eguru-app.dark-theme .dskp-chain b.hujung { color: #022C22; }

/* ===== FLOW SISTEMGURU (halaman Tutorial) ===== */
/* Hero: aurora AI + grid halus. Semua warna ikut var() supaya tema gelap kekal betul. */
#eguru-app .flow-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); padding: 22px 18px 18px; margin-bottom: var(--sp-4); background: linear-gradient(135deg, #052e26 0%, #064e3b 42%, #0b5f57 100%); color: #fff; }
#eguru-app .flow-hero::before { content: ""; position: absolute; inset: -45%; z-index: -2; background: radial-gradient(closest-side, rgba(52,211,153,.55), transparent 72%) 16% 22%/58% 58% no-repeat, radial-gradient(closest-side, rgba(56,189,248,.42), transparent 72%) 84% 8%/52% 52% no-repeat, radial-gradient(closest-side, rgba(167,139,250,.38), transparent 72%) 62% 94%/62% 62% no-repeat; filter: blur(4px); animation: flowAurora 20s ease-in-out infinite alternate; }
#eguru-app .flow-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 28%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 0%, #000 28%, transparent 80%); }
@keyframes flowAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 2%, 0) scale(1.09); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.03); } }
#eguru-app .flow-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t2); font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); padding: 5px 11px; border-radius: var(--radius-full); margin-bottom: var(--sp-3); }
#eguru-app .flow-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 0 rgba(110,231,183,.7); animation: flowPulse 2.4s ease-out infinite; }
@keyframes flowPulse { 0% { box-shadow: 0 0 0 0 rgba(110,231,183,.65); } 70% { box-shadow: 0 0 0 8px rgba(110,231,183,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,183,0); } }
#eguru-app .flow-hero h2 { font-size: var(--t9); font-weight: 800; line-height: 1.25; margin-bottom: var(--sp-2); letter-spacing: -.3px; }
/* Sub-tajuk hero: penuh selebar hero — sama seperti h2 di atas & kotak kemajuan
   di bawahnya — supaya di desktop teks memenuhi hingga ke hujung, bukan berhenti
   di tengah dengan ruang kosong (dahulu had 60ch buat ia nampak tidak responsive).
   Pada telefon kontena sendiri yang mengehad lebar, jadi baris tetap selesa dibaca. */
#eguru-app .flow-hero p.flow-sub { font-size: var(--t5); line-height: 1.6; color: rgba(255,255,255,.82); max-width: none; margin-bottom: var(--sp-4); }

/* Penjejak kemajuan (progress tracker) */
#eguru-app .flow-prog { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); padding: 12px 13px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#eguru-app .flow-ring { flex: 0 0 54px; width: 54px; height: 54px; position: relative; }
#eguru-app .flow-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
#eguru-app .flow-ring circle { fill: none; stroke-width: 5.5; stroke-linecap: round; }
#eguru-app .flow-ring .fr-bg { stroke: rgba(255,255,255,.20); }
#eguru-app .flow-ring .fr-fg { stroke: #6EE7B7; transition: stroke-dasharray .6s ease; }
#eguru-app .flow-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t3); font-weight: 800; }
#eguru-app .flow-prog-txt { flex: 1; min-width: 0; }
/* "> b" (2026-10-03): tanpa ">" <b> di DALAM #flow-prog-sub ("Seterusnya: <b>Sains 4 Bestari</b>, Isnin")
   turut menjadi blok — ayat terputus dan ", Isnin 07:30" jatuh ke baris baharu. */
#eguru-app .flow-prog-txt > b { display: block; font-size: var(--t5); font-weight: 800; margin-bottom: var(--sp-1); }
#eguru-app .flow-prog-txt span { display: block; font-size: var(--t3); line-height: 1.5; color: rgba(255,255,255,.78); }
#eguru-app .flow-prog-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#eguru-app .flow-prog-dots i { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t2); font-weight: 700; font-style: normal; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.72); white-space: nowrap; }
#eguru-app .flow-prog-dots i.ok { background: rgba(110,231,183,.20); border-color: rgba(110,231,183,.45); color: #A7F3D0; }
#eguru-app .flow-prog-dots i.ok::before { content: "\2713"; font-weight: 900; }
#eguru-app .flow-guest { margin-top: 10px; font-size: var(--t3); line-height: 1.5; color: rgba(255,255,255,.75); }
#eguru-app .flow-guest u { cursor: pointer; font-weight: 700; color: #A7F3D0; text-underline-offset: 2px; }

/* Legenda mod. Cip label (MANUAL/SEPARA AUTO/EJEN AI) DI ATAS, teks huraian
   DI BAWAHNYA (flex-direction: column) — bukan bersebelahan — supaya cip &
   penerangannya terbaca sebagai satu kumpulan menegak yang kemas. */
#eguru-app .flow-legend { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: var(--sp-4); }
@media (min-width: 620px) { #eguru-app .flow-legend { grid-template-columns: repeat(3, 1fr); } }
#eguru-app .flow-leg { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 11px; }
#eguru-app .flow-leg-txt b { display: block; font-size: var(--t4); font-weight: 800; color: var(--text); margin-bottom: var(--sp-1); }
#eguru-app .flow-leg-txt span { display: block; font-size: var(--t3); line-height: 1.45; color: var(--text-muted); }

/* Cip mod */
#eguru-app .fmode { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t1); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; line-height: 1.4; }
#eguru-app .fmode svg { width: 10px; height: 10px; fill: currentColor; }
#eguru-app .fm-manual { background: rgba(100,116,139,.12); color: #64748B; border-color: rgba(100,116,139,.28); }
#eguru-app.dark-theme .fm-manual { background: rgba(148,163,184,.14); color: #CBD5E1; border-color: rgba(148,163,184,.3); }
#eguru-app .fm-semi { background: var(--info-light); color: var(--info-text); border-color: rgba(59,130,246,.32); }
#eguru-app .fm-agent { background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(217,70,239,.13)); color: var(--ultra); border-color: rgba(124,58,237,.32); }
#eguru-app.dark-theme .fm-agent { color: var(--ultra-pale); border-color: rgba(167,139,250,.4); }

/* Kad flow (garis masa) */
#eguru-app .flow-track { position: relative; }
#eguru-app .flow-card { position: relative; background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); transition: border-color .18s, box-shadow .18s; }
#eguru-app .flow-card.open { border-color: var(--primary); box-shadow: 0 6px 22px rgba(5,150,105,.10); }
#eguru-app .flow-card.done { border-color: rgba(16,185,129,.42); }
#eguru-app .flow-head { position: relative; display: flex; align-items: center; gap: 11px; padding: 12px 13px; cursor: pointer; user-select: none; }
/* Garis putus-putus penyambung nod: dari bawah nod hingga kad seterusnya. Disembunyi bila kad dibuka
   supaya ia tidak merentasi kandungan langkah. */
#eguru-app .flow-card:not(:last-child) .flow-head::after { content: ""; position: absolute; left: 32px; top: calc(50% + 21px); bottom: -11px; width: 2px; background: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 8px); }
#eguru-app .flow-card.open .flow-head::after { display: none; }
#eguru-app .flow-node { position: relative; z-index: 1; flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: var(--t6); font-weight: 800; background: var(--bg); border: 1.5px solid var(--border); color: var(--text-muted); }
#eguru-app .flow-card.done .flow-node { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: transparent; color: #fff; }
#eguru-app .flow-card.done .flow-node svg { width: 18px; height: 18px; fill: currentColor; }
/* Nod kad belum dibina: nombor KEKAL (turutan), tetapi tepi putus-putus + malap
   menyampaikan status. Sebelum ini nombor digugurkan sepenuhnya dan diganti ikon jam,
   yang memecahkan turutan "langkah ke-N" untuk seluruh rantaian di bawahnya. */
#eguru-app .flow-card.soon .flow-node { opacity: .72; border-style: dashed; background: transparent; }
#eguru-app .flow-hd-txt { flex: 1; min-width: 0; }
#eguru-app .flow-hd-txt b { display: block; font-size: var(--t6); font-weight: 800; color: var(--text); line-height: 1.3; }
#eguru-app .flow-hd-txt p { font-size: var(--t3); line-height: 1.45; color: var(--text-muted); margin-top: 2px; }
#eguru-app .flow-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#eguru-app .flow-arrow { flex: 0 0 auto; color: var(--text-light); transition: transform .22s; }
#eguru-app .flow-arrow svg { width: 20px; height: 20px; fill: currentColor; display: block; }
#eguru-app .flow-card.open .flow-arrow { transform: rotate(180deg); color: var(--primary); }
#eguru-app .flow-pill { display: inline-flex; align-items: center; font-size: var(--t1); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-xs); margin-left: 6px; vertical-align: middle; }
#eguru-app .fp-wajib { background: rgba(245,158,11,.15); color: #B45309; }
#eguru-app.dark-theme .fp-wajib { background: rgba(251,191,36,.16); color: #FCD34D; }
#eguru-app .fp-soon { background: rgba(100,116,139,.14); color: var(--text-muted); }
#eguru-app .fp-ultra { background: linear-gradient(135deg,var(--ultra),var(--ultra-light)); color: #fff; }
/* Kekerapan — dinyalakan lembut supaya ia dibaca sebagai maklumat, bukan status. */
#eguru-app .fp-kerap { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ===== TAJUK FASA ===== */
#eguru-app .flow-fasa { display: flex; align-items: center; gap: 10px; margin: var(--sp-5) 0 var(--sp-3); }
#eguru-app .flow-track > .flow-fasa:first-child { margin-top: 0; }
#eguru-app .flow-fasa-no {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t3); font-weight: 800; color: #fff; background: var(--gradient-bg);
}
#eguru-app .flow-fasa.akan .flow-fasa-no { background: var(--border); color: var(--text-muted); }
#eguru-app .flow-fasa b { display: block; font-size: var(--t6); font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text); }
#eguru-app .flow-fasa span:not(.flow-fasa-no) { display: block; font-size: var(--t3); color: var(--text-muted); line-height: 1.4; margin-top: 1px; }

/* ===== JALUR "AKAN DATANG" (padat, tiada jalan mati) ===== */
#eguru-app .flow-soon-band { display: flex; flex-direction: column; gap: 6px; }
#eguru-app .flow-soon-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; background: var(--bg); border: 1.5px dashed var(--border);
    border-radius: var(--radius-md); cursor: pointer; color: var(--text);
    transition: border-color .16s, background .16s;
}
#eguru-app .flow-soon-row:hover { border-color: var(--primary); background: var(--card-bg); }
#eguru-app .fsr-fasa {
    flex: 0 0 auto; font-size: var(--t1); font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 3px 6px;
}
#eguru-app .fsr-txt { flex: 1; min-width: 0; }
#eguru-app .fsr-txt b { display: block; font-size: var(--t5); font-weight: 700; line-height: 1.3; }
#eguru-app .fsr-txt i { display: block; font-style: normal; font-size: var(--t3); color: var(--text-muted); line-height: 1.4; margin-top: 1px; }
#eguru-app .fsr-bell { flex: 0 0 auto; color: var(--text-muted); display: flex; }
#eguru-app .fsr-bell svg { width: 17px; height: 17px; fill: currentColor; }

/* ===== SUB-MODUL (kad anak bersarang di bawah kad induk) =====
   Hierarki "Instrumen & Evidens berada DI BAWAH PBD" mesti kelihatan, bukan
   sekadar ditulis dalam ayat. Rel putus-putus di kiri mengikat kumpulan anak
   kepada kad induk di atasnya. */
#eguru-app .flow-sub { position: relative; margin: -6px 0 var(--sp-3) 19px; padding-left: 18px; border-left: 2px dashed var(--border); }
#eguru-app .flow-sub-tag { display: block; font-size: var(--t1); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); padding: 9px 0 7px; }
#eguru-app .flow-sub .flow-card { background: var(--bg); }
#eguru-app .flow-sub .flow-card:last-child { margin-bottom: 0; }
#eguru-app .flow-sub .flow-head::after { display: none !important; }
#eguru-app .flow-sub .flow-node { flex: 0 0 32px; width: 32px; height: 32px; font-size: var(--t4); }
#eguru-app .flow-sub .flow-hd-txt b { font-size: var(--t5); }

/* ===== KAD PRATONTON (cadangan baharu, belum dibina) =====
   Sempadan putus-putus = "ini belum wujud lagi", tetapi kandungannya tetap
   dipapar penuh supaya boleh dibaca & disemak. */
#eguru-app .flow-card.pratonton { border-style: dashed; }
#eguru-app .flow-card.pratonton .flow-node svg { width: 17px; height: 17px; fill: currentColor; }
#eguru-app .fp-baharu { background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(16,185,129,.16)); color: var(--info-text); border: 1px solid rgba(59,130,246,.3); }
#eguru-app.dark-theme .fp-baharu { color: #93C5FD; border-color: rgba(147,197,253,.35); }

/* Nota di bawah legenda mod — menjawab "adakah Separa Auto & Ejen AI berbayar?"
   di tempat soalan itu timbul, bukan beberapa skrin kemudian. */
#eguru-app .flow-legend-nota { font-size: var(--t3); line-height: 1.55; color: var(--text-muted); text-align: center; padding: 0 10px; margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }

/* ===== CTA UTAMA HERO ===== */
#eguru-app .flow-mula {
    display: block; width: 100%; margin-top: var(--sp-4);
    padding: 13px 18px; border: none; border-radius: var(--radius-md);
    background: #fff; color: var(--primary-dark);
    font-size: var(--t6); font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.16); transition: transform .12s, box-shadow .12s;
}
#eguru-app .flow-mula:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
#eguru-app .flow-mula:active { transform: none; }

/* ===== BAR TAPIS ===== */
#eguru-app .flow-bar {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-direction: column; gap: var(--sp-2);
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 10px 11px; margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
#eguru-app .flow-cari-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px; }
#eguru-app .flow-cari-wrap svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--text-muted); }
#eguru-app .flow-cari-wrap input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 9px 0; font-size: var(--t5); color: var(--text); font-family: inherit; }
#eguru-app .flow-cip { display: flex; flex-wrap: wrap; gap: 6px; }
#eguru-app .flow-cip-btn {
    border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
    border-radius: var(--radius-full); padding: 5px 11px;
    font-size: var(--t3); font-weight: 700; cursor: pointer; font-family: inherit;
    white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
#eguru-app .flow-cip-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app .flow-suis { display: flex; align-items: center; gap: 8px; font-size: var(--t4); color: var(--text); cursor: pointer; }
#eguru-app .flow-suis input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; margin: 0; }
@media (min-width: 700px) {
    #eguru-app .flow-bar { flex-direction: row; align-items: center; flex-wrap: wrap; }
    #eguru-app .flow-cari-wrap { flex: 1 1 220px; }
    #eguru-app .flow-suis { flex: 0 0 auto; margin-left: auto; }
}

/* Anggaran masa — dibaca sebagai maklumat, bukan status (sama seperti fp-kerap). */
#eguru-app .fp-masa { background: transparent; color: var(--text-light); border: 1px dashed var(--border); text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ===== PRASYARAT DALAM KAD ===== */
#eguru-app .fperlu { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--t3); color: var(--text-muted); margin-bottom: var(--sp-3); }
#eguru-app .fperlu > span { font-weight: 700; }
#eguru-app .fperlu-lnk {
    border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
    border-radius: var(--radius-full); padding: 3px 10px 3px 22px; position: relative;
    font-size: var(--t3); font-weight: 700; cursor: pointer; font-family: inherit;
}
#eguru-app .fperlu-lnk::before { content: ""; position: absolute; left: 8px; top: 50%; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
#eguru-app .fperlu-lnk.ok { color: var(--primary); border-color: rgba(5,150,105,.35); }
#eguru-app .fperlu-lnk.ok::before { background: var(--primary); }
/* Kunci LEMBUT: kad kekal boleh dibaca sepenuhnya — hanya isyarat visual. */
#eguru-app .flow-card.kunci .flow-head { opacity: .74; }

/* ===== LENCANA UNDIAN MODUL ===== */
#eguru-app .fp-minat { background: rgba(59,130,246,.12); color: var(--info-text); text-transform: none; letter-spacing: 0; }
#eguru-app .fp-minat.saya { background: rgba(5,150,105,.14); color: var(--primary); }
#eguru-app.dark-theme .fp-minat { color: #93C5FD; }
#eguru-app .fsr-minat { display: inline-block; font-style: normal; font-size: var(--t2); font-weight: 800; color: var(--info-text); background: rgba(59,130,246,.12); border-radius: var(--radius-full); padding: 2px 8px; margin-left: 7px; vertical-align: middle; }
#eguru-app .fcta .btn.fbtn-dah { opacity: .8; }

/* ===== BUTANG DALAM JALUR KEMAJUAN (peringkat 2 cincin) ===== */
#eguru-app .flow-dot-btn {
    border: none; background: rgba(255,255,255,.92); color: var(--primary-dark);
    border-radius: var(--radius-full); padding: 6px 13px; margin: 4px 6px 0 0;
    font-size: var(--t3); font-weight: 800; cursor: pointer; font-family: inherit;
}
#eguru-app .flow-dot-btn.sekunder { background: rgba(255,255,255,.22); color: #fff; }

/* ===== KEADAAN KOSONG (tapisan tiada padanan) ===== */
#eguru-app .flow-kosong { text-align: center; padding: 28px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); }
#eguru-app .flow-kosong b { display: block; font-size: var(--t6); font-weight: 800; color: var(--text); margin-bottom: 4px; }
#eguru-app .flow-kosong span { display: block; font-size: var(--t4); color: var(--text-muted); margin-bottom: 12px; }
#eguru-app .flow-kosong .btn { width: auto !important; display: inline-flex; }

/* ===== AMARAN "BELUM TERSEDIA" (di ATAS langkah) =====
   Penafian dahulu ada dalam f.nota, DI BAWAH senarai langkah — guru membaca empat
   arahan untuk butang yang tidak wujud sebelum sampai kepada "modul ini sedang
   dibina". Kedudukan, bukan ketiadaan, yang menjadi masalah. */
#eguru-app .fpane-belum {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: var(--t4); line-height: 1.5; font-weight: 600; color: var(--text);
    background: rgba(245,158,11,.10); border: 1.5px dashed rgba(245,158,11,.45);
    border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--sp-4);
}
#eguru-app.dark-theme .fpane-belum { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.4); }
#eguru-app .fpane-belum svg { flex: 0 0 16px; width: 16px; height: 16px; fill: #B45309; margin-top: 1px; }
#eguru-app.dark-theme .fpane-belum svg { fill: #FCD34D; }
#eguru-app .fpane-belum b { font-weight: 800; }

/* ===== SENARAI SEMAK DALAM KAD (label sama dengan titik cincin) ===== */
#eguru-app .fchk { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-4); }
#eguru-app .fchk-row { display: flex; align-items: center; gap: 8px; font-size: var(--t4); color: var(--text-muted); }
#eguru-app .fchk-row.ok { color: var(--text); }
#eguru-app .fchk-row em { font-style: normal; color: var(--text-light); }
#eguru-app .fchk-box {
    flex: 0 0 17px; width: 17px; height: 17px; border-radius: var(--radius-xs);
    border: 1.5px solid var(--border); background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
}
#eguru-app .fchk-row.ok .fchk-box { background: var(--primary); border-color: transparent; }
#eguru-app .fchk-box svg { width: 12px; height: 12px; fill: #fff; }

/* ===== TITIK KEMAJUAN BOLEH KETUK ===== */
#eguru-app .flow-dot { cursor: pointer; }
#eguru-app .flow-dot.pilihan { border-style: dashed; }
#eguru-app .flow-dot b { font-weight: 700; opacity: .8; }

/* Kilat pandu-mata bila melompat dari titik kemajuan ke kad. */
#eguru-app .flow-card.flash { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(5,150,105,.18); }

/* ===== GELUNG PENUTUP ===== */
/* Nada NEUTRAL + sempadan putus-putus, bukan hijau "kejayaan": kotak ini
   menerangkan ke mana produk menuju, dan majoriti modul yang disebut di dalamnya
   belum dibuka lagi. Warna kejayaan pada kenyataan peta jalan membacanya sebagai
   sesuatu yang sudah siap. */
#eguru-app .flow-loop {
    display: flex; align-items: flex-start; gap: 11px; margin-top: var(--sp-5);
    padding: 14px; border-radius: var(--radius);
    background: var(--bg); border: 1.5px dashed var(--border);
}
#eguru-app .flow-loop .fl-belum { font-weight: 700; color: var(--text-muted); white-space: nowrap; }
#eguru-app .flow-loop-ico { flex: 0 0 22px; width: 22px; height: 22px; fill: var(--text-muted); margin-top: 1px; }
#eguru-app .flow-loop b { display: block; font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .flow-loop span { display: block; font-size: var(--t4); color: var(--text-muted); line-height: 1.55; margin-top: 3px; }

/* Badan kad — pemilih mod + langkah */
#eguru-app .flow-body { display: none; padding: 0 13px 14px; }
#eguru-app .flow-card.open .flow-body { display: block; }
#eguru-app .fseg { display: flex; gap: 5px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-full); padding: 4px; margin-bottom: var(--sp-4); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
#eguru-app .fseg::-webkit-scrollbar { display: none; }
#eguru-app .fseg button { flex: 1 0 auto; border: none; background: transparent; padding: 7px 13px; border-radius: var(--radius-full); font-size: var(--t3); font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
#eguru-app .fseg button.on { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
#eguru-app .fseg button.on[data-m="agent"] { background: linear-gradient(135deg,var(--ultra),var(--ultra-light)); color: #fff; }
#eguru-app .fseg button.on[data-m="semi"] { background: var(--info); color: #fff; }
#eguru-app .fpane { animation: flowFade .22s ease; }
@keyframes flowFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#eguru-app .fpane-lead { font-size: var(--t4); line-height: 1.55; color: var(--text-muted); background: var(--bg); border-left: 3px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 9px 11px; margin-bottom: var(--sp-4); }
#eguru-app .fpane[data-m="agent"] .fpane-lead { border-left-color: var(--ultra-light); }
#eguru-app .fpane[data-m="semi"] .fpane-lead { border-left-color: var(--info); }
#eguru-app .fsteps { counter-reset: fstep; list-style: none; margin: 0 0 12px; padding: 0; }
#eguru-app .fstep { position: relative; padding: 0 0 13px 29px; font-size: var(--t5); line-height: 1.6; color: var(--text); }
#eguru-app .fstep::before { counter-increment: fstep; content: counter(fstep); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--success-light); color: var(--primary); font-size: var(--t3); font-weight: 800; display: flex; align-items: center; justify-content: center; }
#eguru-app .fstep::after { content: ""; position: absolute; left: 9.25px; top: 23px; bottom: 3px; width: 1.5px; background: var(--border); }
#eguru-app .fstep:last-child { padding-bottom: 0; }
#eguru-app .fstep:last-child::after { display: none; }
#eguru-app .fstep strong { font-weight: 700; color: var(--text); }
#eguru-app .fstep em { font-style: normal; display: inline-block; font-size: var(--t6); font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0 5px; color: var(--primary); }
#eguru-app .fnote { display: flex; gap: 8px; align-items: flex-start; background: var(--info-light); border-left: 3px solid var(--info); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 9px 11px; font-size: var(--t4); line-height: 1.55; color: var(--text); margin-bottom: var(--sp-3); }
#eguru-app .fnote svg { width: 14px; height: 14px; fill: var(--info); flex-shrink: 0; margin-top: 2px; }
#eguru-app .fnote.ultra { background: rgba(124,58,237,.08); border-left-color: var(--ultra-light); }
/* Sebelum mula (2026-10-04) — prasyarat bertulis setiap kad Flow (f.sebelum). */
#eguru-app .fsebelum { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: var(--sp-3); font-size: var(--t4); line-height: 1.5; color: var(--text); }
#eguru-app .fsebelum > b { display: block; font-size: var(--t2); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--primary-text); margin-bottom: var(--sp-1); }
#eguru-app .fsebelum ol { margin: 0; padding-left: 18px; }
#eguru-app .fsebelum li { margin-bottom: 3px; }
#eguru-app .fnote.ultra svg { fill: var(--ultra-light); }
#eguru-app .fcta { display: flex; flex-wrap: wrap; gap: 7px; }
#eguru-app .fcta .btn { width: auto !important; flex: 1 1 auto; min-width: 150px; padding: 10px 14px !important; font-size: var(--t5) !important; }
/* Kongsi ialah tindakan sekunder — jangan biar ia bersaing dengan CTA utama kad. */
#eguru-app .fcta .fbtn-kongsi { flex: 0 0 auto; min-width: 0; }
#eguru-app .fcta .fbtn-kongsi svg { width: 15px; height: 15px; fill: currentColor; margin-right: 5px; vertical-align: -3px; }
#eguru-app .fpanduan { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; font-size: var(--t4); line-height: 1.45; color: var(--text-muted); margin-top: 10px; text-decoration: none; }
#eguru-app .fpanduan:hover { border-color: var(--primary); }
#eguru-app .fpanduan svg { width: 20px; height: 20px; fill: var(--primary); flex-shrink: 0; }
#eguru-app .fpanduan b { color: var(--text); }
#eguru-app .fp-asas { background: rgba(5,150,105,.14); color: #047857; }
#eguru-app.dark-theme .fp-asas { background: rgba(52,211,153,.16); color: #6EE7B7; }
#eguru-app .fp-tambah { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-weight: 700; }
#eguru-app .flow-asas { margin: 0 0 var(--sp-4); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); font-size: var(--t4); line-height: 1.6; color: var(--text); }
#eguru-app .flow-asas p { margin: 0 0 6px; } #eguru-app .flow-asas p:last-child { margin: 0; }
#eguru-app .flow-asas .fp-asas, #eguru-app .flow-asas .fp-tambah { margin-right: 4px; }
#eguru-app .flow-foot { text-align: center; font-size: var(--t4); line-height: 1.6; color: var(--text-muted); padding: 6px 10px 2px; }
#eguru-app .flow-cetak { width: auto !important; display: inline-flex; align-items: center; gap: 7px; margin: 4px auto 14px; padding: 9px 16px !important; font-size: var(--t4) !important; }
#eguru-app .flow-cetak svg { width: 15px; height: 15px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
    #eguru-app .flow-hero::before, #eguru-app .flow-kicker i, #eguru-app .fpane { animation: none !important; }
}

/* ===== POPUP EDITOR RPH ===== */
/* Saiz & kedudukan: lihat "MODAL: SATU SAIZ UNTUK SEMUA". */
#eguru-app .rph-modal-sheet { overflow-y: auto; padding: 18px 22px 34px; }
@media (min-width: 700px) { #eguru-app .rph-modal-sheet .grid-2 { gap: 14px; } }
#eguru-app .rph-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--sp-4); position: sticky; top: -18px; background: var(--card-bg); padding: 6px 0 8px; z-index: 3; border-bottom: 1px solid var(--border); }
/* Banner sebab (cuti / peperiksaan / RPT tamat) di puncak editor RPH. */
#eguru-app .rph-sebab-bar {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 12px; padding: 10px 12px;
    border: 1.5px solid var(--warning, #e0a030); border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warning, #e0a030) 12%, transparent);
    font-size: var(--t4); line-height: 1.5; color: var(--text);
}
/* Hanya TAJUK banner (b pertama) jadi blok. Dahulu `b` umum: setiap kata
   ditebalkan di tengah ayat ("Tingkatan", "Sync RPT → RPH") terpecah ke
   baris sendiri dan ayat itu terputus tiga. */
#eguru-app .rph-sebab-bar > span > b:first-child { display: block; margin-bottom: 2px; }
#eguru-app .rph-modal-close { width: 34px !important; height: 34px !important; background: var(--bg) !important; color: var(--text) !important; }
#eguru-app .rph-modal-close svg { fill: currentColor !important; }
/* Satu lajur TAJUK/SK/SP (SK & SP tambahan = baris, bukan lajur) */
#eguru-app .rph-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
#eguru-app .rph-col { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 12px 13px; }
#eguru-app .rph-col-h { font-size: var(--t4); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--primary); margin-bottom: var(--sp-3); padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
#eguru-app .rph-col .form-group:last-child { margin-bottom: 0; }

/* ===== MAKLUMAT PERNIAGAAN & UNDANG-UNDANG ===== */
#eguru-app .badge-slate { background: #475569; }
#eguru-app .biz-info { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom: var(--sp-4); }
#eguru-app .biz-info-name { font-size: var(--t6); font-weight: 800; color: var(--text); margin-bottom: var(--sp-1); }
#eguru-app .biz-info-type { font-size: var(--t3); color: var(--text-muted); margin-bottom: var(--sp-3); }
#eguru-app .biz-info-row { display: flex; gap: 10px; font-size: var(--t4); line-height: 1.5; padding: 6px 0; border-top: 1px dashed var(--border); }
#eguru-app .biz-info-row .bi-label { flex: 0 0 96px; color: var(--text-muted); font-weight: 600; }
#eguru-app .biz-info-row .bi-val { flex: 1; color: var(--text); font-weight: 600; word-break: break-word; }
#eguru-app .biz-info-row .bi-val a { color: var(--primary); text-decoration: none; }
/* --success #10B981 atas --success-light cuma 2.41:1. --primary-text
   #047857 atas latar sama = 5.21:1 (tema gelap tak berubah: kedua-dua
   token sama nilai di sana). */
#eguru-app .biz-verify { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t3); font-weight: 700; color: var(--primary-text); background: var(--success-light); padding: 4px 10px; border-radius: var(--radius-full); margin-top: 11px; }
#eguru-app .biz-verify svg { width: 13px; height: 13px; fill: currentColor; }

/* Senarai pautan undang-undang */
#eguru-app .legal-links { display: flex; flex-direction: column; gap: 7px; }
#eguru-app .legal-link { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 12px; cursor: pointer; transition: border-color .15s, background .15s; color: var(--text); }
#eguru-app .legal-link:hover { border-color: var(--primary); }
#eguru-app .legal-link .ll-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(5,150,105,.1); color: var(--primary); display: flex; align-items: center; justify-content: center; }
#eguru-app .legal-link .ll-ico svg { width: 16px; height: 16px; fill: currentColor; }
#eguru-app .legal-link .ll-txt { flex: 1; min-width: 0; }
#eguru-app .legal-link .ll-txt b { display: block; font-size: var(--t5); font-weight: 700; color: var(--text); }
#eguru-app .legal-link .ll-txt span { display: block; font-size: var(--t3); color: var(--text-muted); margin-top: 1px; }
#eguru-app .legal-link .ll-arrow { color: var(--text-light); font-size: var(--t8); flex-shrink: 0; }

/* Modal undang-undang */
/* Popup undang-undang dibuka DARI DALAM popup lain (notis persetujuan dalam
   Log Masuk, notis Bank RPH dalam editor RPH). Semua .modal-overlay sama
   z-index 100000, jadi yang kemudian dalam DOM menang — #rph-modal terletak
   selepas #legal-modal, lalu Terma terbuka DI BELAKANG editor. Satu tingkat
   lebih tinggi menjadikannya sentiasa di atas. */
#eguru-app #legal-modal { z-index: 100001 !important; }
/* Saiz & kedudukan: lihat "MODAL: SATU SAIZ UNTUK SEMUA". Kepala tetap, badan menatal. */
#eguru-app .legal-modal-sheet { display: flex; flex-direction: column; padding: 0; }
#eguru-app .legal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#eguru-app .legal-modal-head .modal-title { font-size: var(--t7); text-align: left; margin: 0; }
#eguru-app .legal-close { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--bg); border: none; cursor: pointer; color: var(--text-muted); font-size: var(--t7); display: flex; align-items: center; justify-content: center; }
#eguru-app .legal-close:hover { background: var(--danger-light); color: var(--danger); }
#eguru-app .legal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 28px; -webkit-overflow-scrolling: touch; }
#eguru-app .legal-body h4 { font-size: var(--t6); font-weight: 800; color: var(--primary); margin: 18px 0 6px; }
#eguru-app .legal-body h4:first-child { margin-top: 0; }
#eguru-app .legal-body p { font-size: var(--t5); line-height: 1.65; color: var(--text); margin-bottom: var(--sp-3); }
#eguru-app .legal-body ul { margin: 0 0 11px; padding-left: 20px; }
#eguru-app .legal-body li { font-size: var(--t5); line-height: 1.6; color: var(--text); margin-bottom: var(--sp-2); }
#eguru-app .legal-body strong { color: var(--text); font-weight: 700; }
#eguru-app .legal-body .legal-updated { font-size: var(--t4); color: var(--text-muted); font-style: italic; margin-bottom: var(--sp-4); }
#eguru-app .legal-body .legal-note { background: var(--info-light); border-left: 3px solid var(--info); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; font-size: var(--t4); line-height: 1.55; color: var(--text); margin-top: 8px; }

/* Footer perniagaan di Utama */
#eguru-app .biz-footer { text-align: center; padding: 22px 14px 4px; margin-top: 8px; border-top: 1px solid var(--border); }
#eguru-app .biz-footer-brand { font-size: var(--t6); font-weight: 800; color: var(--primary); margin-bottom: var(--sp-2); }
#eguru-app .biz-footer-info { font-size: var(--t3); line-height: 1.65; color: var(--text-muted); margin-bottom: var(--sp-3); }
#eguru-app .biz-footer-info strong { color: var(--text); font-weight: 700; }
#eguru-app .biz-footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-bottom: var(--sp-4); }
#eguru-app .biz-footer-links a { font-size: var(--t4); font-weight: 600; color: var(--primary-text); cursor: pointer; text-decoration: none; }
#eguru-app .biz-footer-links a:hover { text-decoration: underline; }
#eguru-app .biz-footer-links .dot { color: var(--text-light); font-size: var(--t2); }
#eguru-app .biz-footer-copy { font-size: var(--t3); color: var(--text-light); line-height: 1.5; }

/* ===== PERINGKAT SEKOLAH (onboarding) ===== */
#eguru-app .peringkat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#eguru-app .peringkat-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; color: var(--text); text-align: center; }
#eguru-app .peringkat-btn:hover { border-color: var(--primary); }
#eguru-app .peringkat-btn.active { border-color: var(--primary); background: var(--success-light); }
#eguru-app .peringkat-btn .pk-ico { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(5,150,105,.1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#eguru-app .peringkat-btn .pk-ico svg { width: 19px; height: 19px; fill: currentColor; }
#eguru-app .peringkat-btn.active .pk-ico { background: var(--primary); color: #fff; }
#eguru-app .peringkat-btn b { font-size: var(--t4); font-weight: 700; }
#eguru-app .peringkat-btn span { font-size: var(--t2); color: var(--text-muted); }
#eguru-app .peringkat-now { font-size: var(--t4); color: var(--text-muted); margin-bottom: var(--sp-3); }
#eguru-app .peringkat-now strong { color: var(--primary); font-weight: 700; }
/* ===== Jenis Sekolah chips ===== */
#eguru-app .jenis-grid { display: flex; flex-wrap: wrap; gap: 7px; }
#eguru-app .jenis-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-full); cursor: pointer; font-size: var(--t4); background: var(--bg); transition: border-color .15s, background .15s; }
#eguru-app .jenis-chip input { accent-color: var(--primary); margin: 0; }
#eguru-app .jenis-chip.on { border-color: var(--primary); background: var(--success-light); color: var(--primary); font-weight: 600; }
/* ===== PBD: senarai murid ===== */
#eguru-app .pbd-murid-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); }
#eguru-app .pbd-murid-no { width: 24px; text-align: right; color: var(--text-muted); font-size: var(--t5); flex-shrink: 0; }
#eguru-app .pbd-murid-row .form-control { flex: 1; }
#eguru-app .pbd-jantina { max-width: 64px; flex: 0 0 auto; }
/* Nama murid dalam modal Tahap: teks, jadi ia perlu ruang & pemotongan sendiri
   (dahulu ia <input class="form-control"> yang membawa gayanya sendiri). */
#eguru-app .pbd-murid-nama { flex: 1 1 auto; min-width: 0; font-size: var(--t5); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .pbd-del { flex: 0 0 auto; width: 30px; height: 30px; border: none; border-radius: var(--radius-sm); background: rgba(220,38,38,.1); color: #dc2626; cursor: pointer; font-size: var(--t6); }
#eguru-app .pbd-del:hover { background: rgba(220,38,38,.2); }
/* ===== PBD: grid rekod TP ===== */
#eguru-app .pbd-grid { border-collapse: collapse; font-size: var(--t5); min-width: 100%; }
#eguru-app .pbd-grid th, #eguru-app .pbd-grid td { border: 1px solid var(--border); padding: 5px 7px; white-space: nowrap; }
/* Kolom SK (tajuk + sel TP) di tengah; hanya kolom "Murid" kekal kiri. */
#eguru-app .pbd-grid th:not(.pbd-sticky), #eguru-app .pbd-grid td:not(.pbd-sticky) { text-align: center; }
#eguru-app .pbd-grid th { background: var(--success-light); font-weight: 700; font-size: var(--t6); }
#eguru-app .pbd-grid .pbd-sticky { position: sticky; left: 0; background: var(--card-bg); text-align: left; min-width: 120px; z-index: 1; }
#eguru-app .pbd-grid th.pbd-sticky { background: var(--success-light); z-index: 2; }
#eguru-app .pbd-tp-sel { padding: 3px 4px; border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: var(--t6); min-width: 48px; }
#eguru-app .pbd-th-overall, #eguru-app .pbd-td-overall { position: sticky; right: 0; background: var(--success-light); font-weight: 700; text-align: center; z-index: 1; }
#eguru-app .pbd-grid th.pbd-th-overall { z-index: 3; }
/* ===== PBD: laporan ===== */
#eguru-app .pbd-report { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); }
#eguru-app .pbd-report h4 { margin: 0 0 2px; color: var(--text); }
#eguru-app .pbd-bars { margin-top: 10px; }
#eguru-app .pbd-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-2); }
#eguru-app .pbd-bar-lbl { width: 34px; font-weight: 700; font-size: var(--t4); color: var(--text-muted); }
#eguru-app .pbd-bar-track { flex: 1; height: 18px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
#eguru-app .pbd-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width .4s; }
#eguru-app .pbd-bar-fill.tp1 { background: #ef4444; }
#eguru-app .pbd-bar-fill.tp2 { background: #f97316; }
#eguru-app .pbd-bar-fill.tp3 { background: #eab308; }
#eguru-app .pbd-bar-fill.tp4 { background: #84cc16; }
#eguru-app .pbd-bar-fill.tp5 { background: #22c55e; }
#eguru-app .pbd-bar-fill.tp6 { background: #0ea5e9; }
#eguru-app .pbd-bar-val { width: 74px; font-size: var(--t4); color: var(--text-muted); text-align: right; }
#eguru-app .pbd-lapor-tbl { width: 100%; border-collapse: collapse; font-size: var(--t5); margin-top: 6px; }
#eguru-app .pbd-lapor-tbl th, #eguru-app .pbd-lapor-tbl td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
#eguru-app .pbd-lapor-tbl th { background: var(--success-light); }
#eguru-app .pbd-tafsiran { border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: 6px; padding: 8px 10px; font-size: var(--t6); background: var(--success-light); }
#eguru-app .pbd-tp-keseluruhan { margin-top: 10px; padding: 10px; background: var(--success-light); border-radius: var(--radius-sm); font-weight: 600; text-align: center; }
/* ===== PBD: panel rujukan Standard Prestasi ===== */
#eguru-app .pbd-ruj { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); background: var(--bg); }
/* Header accordion: Rumi (label+segitiga) kiri, ayat Jawi/Arab isi ruang kanan & RTL — selari baris TP. */
#eguru-app .pbd-ruj summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: var(--t5); color: var(--text); display: flex; align-items: baseline; gap: 8px; list-style: none; }
#eguru-app .pbd-ruj summary::-webkit-details-marker { display: none; }
#eguru-app .pbd-ruj summary::before { content: '▸'; flex: 0 0 auto; color: var(--text-muted); font-size: var(--t4); transition: transform .15s ease; }
#eguru-app .pbd-ruj[open] > summary::before { transform: rotate(90deg); }
#eguru-app .pbd-ruj-sk { flex: 0 0 auto; font-weight: 800; color: var(--primary-dark); direction: ltr; unicode-bidi: isolate; }
#eguru-app .pbd-ruj-ayat { flex: 1 1 auto; font-weight: 600; unicode-bidi: isolate; }
#eguru-app .pbd-ruj-ayat[dir="rtl"] { direction: rtl; text-align: right; }
/* Lencana tingkatan pada blok Standard Prestasi — biar guru nampak blok ini
   milik tahun/tingkatan mana (dahulu maklumat ini tidak pernah dipapar). */
#eguru-app .pbd-ruj-tkt { flex: 0 0 auto; font-size: var(--t5); font-weight: 700;
    color: var(--text-muted); background: var(--bg-soft, #F1F5F9); border-radius: 999px;
    padding: 1px 8px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
/* Amaran bila padanan SK<->Standard Prestasi tidak dapat disahkan. */
#eguru-app .pbd-ruj-amaran { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
    background: #FEF3C7; border: 1px solid #FCD34D; color: #92400E;
    font-size: var(--t5); font-weight: 600; }
/* Nama murid + badge tahap: badge dijajar lurus di hujung kanan lajur (selari semua nama). */
#eguru-app .pbd-name-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#eguru-app .pbd-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .pbd-ruj-row { display: flex; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: var(--t5); align-items: flex-start; line-height: 1.5; }
/* Badge TP kekal kiri (LTR); deskriptor isi ruang baki. Jawi/Arab -> RTL & jajar kanan. */
#eguru-app .pbd-ruj-desc { flex: 1; min-width: 0; unicode-bidi: isolate; }
#eguru-app .pbd-ruj-desc[dir="rtl"] { direction: rtl; text-align: right; }
/* Satu bulet = satu baris. Bulet dilukis oleh ::before (bukan list-style)
   supaya jajarannya sama di kiri utk Rumi dan di kanan utk Jawi/Arab. */
#eguru-app .pbd-ruj-bulet { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
#eguru-app .pbd-ruj-bulet > li { position: relative; padding-left: 15px; }
#eguru-app .pbd-ruj-bulet > li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--text-muted); font-weight: 700; }
#eguru-app .pbd-ruj-desc[dir="rtl"] .pbd-ruj-bulet > li { padding-left: 0; padding-right: 15px; }
#eguru-app .pbd-ruj-desc[dir="rtl"] .pbd-ruj-bulet > li::before { left: auto; right: 0; }
/* Teks GELAP atas isian tona sederhana — corak sama yang sudah dipakai
   pada .btn-accent. Dgn putih setiap TP gagal AA (tp1 3.76:1, tp2 2.80,
   tp3 1.92, tp4 1.98, tp5 2.28, tp6 2.77). Dgn #1F2937: tp2 5.24:1,
   tp3 7.66, tp4 7.43, tp5 6.44, tp6 5.30 — semua lulus pada --t4 (~11px). */
#eguru-app .pbd-ruj-tp { flex: 0 0 auto; width: 32px; height: 20px; font-weight: 700; color: #1F2937; border-radius: var(--radius-xs); text-align: center; font-size: var(--t4); }
#eguru-app .pbd-ruj-tp.tp1 { background: #ef4444; } #eguru-app .pbd-ruj-tp.tp2 { background: #f97316; }
#eguru-app .pbd-ruj-tp.tp3 { background: #eab308; } #eguru-app .pbd-ruj-tp.tp4 { background: #84cc16; }
#eguru-app .pbd-ruj-tp.tp5 { background: #22c55e; } #eguru-app .pbd-ruj-tp.tp6 { background: #0ea5e9; }
/* tp1 satu-satunya yang teks gelap TIDAK selamatkan (#1F2937 atas #ef4444
   = 3.90:1). Merah digelapkan ke #DC2626 (sudah ada dalam palet, .pbd-del)
   dan kekal berteks putih = 4.83:1, jadi tangga merah->biru tak berubah. */
#eguru-app .pbd-ruj-tp.tp1 { background: #DC2626; color: #fff; }
/* ===== PBD: modal harian + butang jadual ===== */
#eguru-app .pbd-modal-sheet { overflow-y: auto; } /* saiz: "MODAL: SATU SAIZ UNTUK SEMUA" */
#eguru-app .pbd-modal-sp { padding: 3px 0; color: var(--text); line-height: 1.5; }
/* ===== PBD: jalur subjek (dari jadual waktu RPH) ===== */
#eguru-app .pbd-strip { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 4px; }
/* Label subjek: sentiasa di kiri (LTR) walaupun teks Jawi/Arab. */
#eguru-app .pbd-group-head { font-weight: 800; font-size: var(--t5); color: var(--primary-dark); text-transform: uppercase; letter-spacing: .3px; margin-bottom: var(--sp-2); padding-left: 2px; display: flex; align-items: center; gap: 8px; direction: ltr; text-align: left; justify-content: flex-start; }
#eguru-app .pbd-group-head::before { content: ''; flex: 0 0 auto; width: 4px; height: 15px; border-radius: var(--radius-xs); background: var(--primary); }
#eguru-app .pbd-group-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
#eguru-app .pbd-subj-cell { position: relative; flex: 0 0 auto; width: 200px; border-radius: var(--radius-md); padding: 12px; background: linear-gradient(hsla(var(--dh,210),64%,52%,.14),hsla(var(--dh,210),64%,52%,.14)),var(--card-bg); border: 1.5px solid hsla(var(--dh,210),46%,47%,.5); border-left: 5px solid hsl(var(--dh,210),46%,47%); display: flex; flex-direction: column; gap: 3px; }
#eguru-app .pbd-subj-cell.aktif { box-shadow: 0 0 0 2px hsl(var(--dh,210),52%,45%); }
#eguru-app .pbd-cell-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,.06); color: var(--text-muted); font-size: var(--t3); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
#eguru-app .pbd-cell-del:hover { background: rgba(220,38,38,.15); color: #dc2626; }
#eguru-app .pbd-cell-kelas-main { font-weight: 800; font-size: var(--t6); color: var(--text); line-height: 1.3; padding-right: 22px; }
#eguru-app .pbd-papar-semua { align-self: flex-start; margin-top: 2px; background: none; border: none; color: var(--primary); font-size: var(--t4); font-weight: 700; cursor: pointer; padding: 4px 2px; }
#eguru-app .pbd-papar-semua:hover { text-decoration: underline; }
#eguru-app .pbd-cell-tkt { font-size: var(--t3); color: var(--text-muted); font-weight: 600; }
#eguru-app .pbd-cell-count { font-size: var(--t3); font-weight: 700; color: hsl(var(--dh,210),46%,38%); margin-top: 2px; }
#eguru-app .pbd-cell-count.kosong { color: #b45309; font-style: italic; }
@media (max-width: 600px) { #eguru-app .pbd-subj-cell { width: 76vw; max-width: 240px; } }
#eguru-app .pbd-cell-btns { display: flex; gap: 6px; margin-top: 9px; }
#eguru-app .pbd-cell-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: none; border-radius: var(--radius-sm); padding: 7px 6px; font-size: var(--t4); font-weight: 700; cursor: pointer; min-height: 32px; }
#eguru-app .pbd-cell-btn.murid { background: hsl(var(--dh,210),46%,45%); color: #fff; }
#eguru-app .pbd-cell-btn.lihat { background: #fff; color: hsl(var(--dh,210),48%,34%); border: 1.5px solid hsla(var(--dh,210),46%,47%,.6); }
#eguru-app .pbd-cell-btn:hover { opacity: .9; }
/* ===== PBD: badge tahap murid + baris modal ===== */
#eguru-app .pbd-tahap-sel { max-width: 132px; flex: 0 0 auto; }
#eguru-app .pbd-tahap-badge { display: inline-block; font-size: var(--t3); font-weight: 800; padding: 1px 7px; border-radius: var(--radius-full); margin-left: 6px; vertical-align: middle; white-space: nowrap; }
#eguru-app .pbd-tahap-badge.rendah { background: #FEE2E2; color: #b91c1c; }
#eguru-app .pbd-tahap-badge.sederhana { background: #FEF3C7; color: #92400e; }
#eguru-app .pbd-tahap-badge.tinggi { background: #DCFCE7; color: #166534; }
/* ===== PBD & Butiran: modal popup lebih luas + tulisan padat — MOBILE SAHAJA (desktop kekal kemas) ===== */
@media (max-width: 600px) {
    /* Padding helaian (dahulu 12px di sini): lihat "POPUP TELEFON: SATU FORMAT". */
    /* DOKUMEN NOTA/LATIHAN DI TELEFON — jurang tepi serapat mungkin.
       Sebelum ini 22px (padding helaian) + 20px (padding <body> dalam iframe,
       lihat ntDokHtml) = 42px sesisi, iaitu 84px daripada skrin 360px habis
       menjadi jurang. Kertas kelihatan sempit dan teks Jawi terpaksa dibalut
       lebih awal.
       Padding sisi helaian (8px) & jurang --modal-gap (2px) kini untuk SEMUA
       popup telefon — lihat "POPUP TELEFON: SATU FORMAT" di hujung fail.
       Bingkai dokumen tidak lagi berjidar negatif; ia sejajar kandungan. */
    #eguru-app #skt-modal-host .rph-modal-sheet:has(> .nt-dok) > .nt-dok { margin-inline: 0; border-radius: 4px; }
    #eguru-app #pbd-modal-host .rph-modal-head { margin-bottom: var(--sp-1); }
    #eguru-app #pbd-modal-host .modal-title { font-size: var(--t6); }
    /* Override --t3 DIBUANG (2026-07-30): .help-hint kini !important pada --t4
       supaya SATU peranan = SATU saiz di seluruh app. Hint dalam modal PBD ini
       tiada sebab khusus untuk lebih kecil daripada setiap hint lain; ia hanya
       baki penalaan tangan. Padding & grid padat di bawah dikekalkan. */
    #eguru-app #pbd-modal-host .pbd-modal-sp { font-size: var(--t4); padding: 1px 0; }
    #eguru-app #pbd-modal-host .pbd-grid { font-size: var(--t2); }
    #eguru-app #pbd-modal-host .pbd-grid th,
    #eguru-app #pbd-modal-host .pbd-grid td { padding: 3px 3px; }
    #eguru-app #pbd-modal-host .pbd-grid .pbd-sticky { min-width: 70px; max-width: 116px; white-space: normal; line-height: 1.25; }
    #eguru-app #pbd-modal-host .pbd-tahap-badge { margin-left: 3px; padding: 0 4px; font-size: var(--t6); }
    #eguru-app #pbd-modal-host .pbd-tp-sel { min-width: 38px; padding: 2px 2px; font-size: var(--t8); }
}
/* ===== PBD: peringatan (belum ada murid) ===== */
#eguru-app .pbd-reminder { border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); font-size: var(--t5); color: var(--text); line-height: 1.5; }
#eguru-app .pbd-reminder ol { margin: 6px 0 10px 18px; line-height: 1.7; }
/* ===== PBD: paparan grid menegak (mobile) — setiap murid satu blok ===== */
#eguru-app .pbd-grid-narrow { display: none; }
#eguru-app .pbd-mcard { border: 1.5px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); overflow: hidden; background: var(--card-bg); }
#eguru-app .pbd-mcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--success-light); border-bottom: 1px solid var(--border); }
#eguru-app .pbd-mcard-name { font-weight: 800; font-size: var(--t5); color: var(--text); min-width: 0; }
#eguru-app .pbd-mcard-overall { flex: 0 0 auto; font-weight: 800; font-size: var(--t4); color: #fff; background: var(--primary); padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
#eguru-app .pbd-mrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); }
#eguru-app .pbd-mcard-rows .pbd-mrow:first-child { border-top: none; }
#eguru-app .pbd-mrow-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#eguru-app .pbd-mrow-num { font-size: var(--t2); font-weight: 800; letter-spacing: .4px; color: var(--primary-dark); text-transform: uppercase; }
#eguru-app .pbd-mrow-sp { font-size: var(--t4); color: var(--text-muted); line-height: 1.4; }
#eguru-app .pbd-mrow .pbd-tp-sel { flex: 0 0 auto; min-width: 62px; }
@media (max-width: 600px) {
    #eguru-app .pbd-grid-wide { display: none; }
    #eguru-app .pbd-grid-narrow { display: block; }
}
#eguru-app .today-pbd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: linear-gradient(135deg,#0ea5e9,#2563eb); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; min-height: 30px; }
#eguru-app .today-pbd-btn:hover { opacity: .92; }
/* Butang Nota pada kad jadual — antara Kehadiran dan PBD. Peraturan svg WAJIB:
   tanpanya ikon mengikut saiz .gi global dan butang jadi tinggi sebelah. */
#eguru-app .today-nota-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: linear-gradient(135deg,#f59e0b,#d97706); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; min-height: 30px; }
/* Baris pintasan "Kehadiran hari ini" dalam banner jadual esok. */
/* Panel pintasan "Kehadiran <hari> (hari ini)" — kad sendiri di BAWAH senarai
   jadual esok (di atas senarai ia disangka sebahagian jadual esok). */
#eguru-app .today-khl { background: var(--kh-light); border: 1px solid color-mix(in srgb, var(--kh) 35%, transparent); border-left: 4px solid var(--kh); border-radius: var(--radius-md); padding: 10px 12px; margin: var(--sp-4) 0 0; }
#eguru-app .today-khl-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t5); color: var(--kh-text); }
#eguru-app .today-khl-kepala svg { width: 18px; height: 18px; fill: var(--kh); flex: 0 0 auto; }
#eguru-app .today-khl-kira { margin-left: auto; font-size: var(--t3); font-weight: 800; padding: 2px 9px; border-radius: var(--radius-full); background: var(--card-bg); color: var(--kh-text); border: 1px solid color-mix(in srgb, var(--kh) 35%, transparent); white-space: nowrap; }
#eguru-app .today-khl-kira.siap { color: var(--primary-text); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
#eguru-app .today-khl-nota { margin: 4px 0 0; font-size: var(--t4); line-height: 1.5; color: var(--text-muted); }
#eguru-app .today-khl-nota.siap { display: flex; align-items: center; gap: 6px; color: var(--primary-text); }
#eguru-app .today-khl-nota.siap svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
#eguru-app .today-khl-butang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#eguru-app .today-khl-btn small { font-weight: 600; opacity: .85; margin-left: 3px; }
#eguru-app .today-khl-btn .khl-pendek { display: none; }
/* Banner jadual esok dalam tema gelap: latar cerah asalnya + teks cerah tema = tidak terbaca. */
#eguru-app.dark-theme .today-esok { background: linear-gradient(135deg, #1E1B4B, #2E1065); border-color: rgba(196,181,253,.28); }
#eguru-app.dark-theme .today-esok b { color: #C4B5FD; }
#eguru-app.dark-theme .today-esok svg.gi { fill: #C4B5FD; }
@media (max-width: 600px) {
    #eguru-app .today-khl-btn .khl-penuh { display: none; }
    #eguru-app .today-khl-btn .khl-pendek { display: inline; }
    #eguru-app .today-khl-btn:not(.dua) small { display: none; }
    #eguru-app .today-khl-btn { min-width: 52px; padding: 6px 10px; }
    #eguru-app .today-khl-butang { gap: 6px; }
}
#eguru-app .today-nota-btn:hover { opacity: .92; }
#eguru-app .today-nota-btn svg { width: 14px; height: 14px; fill: #fff; }
/* Butang Latihan — antara Nota dan PBD. Peraturan svg WAJIB: tanpa saiz
   eksplisit, .gi mengambil saiz teks dan butang jadi tidak seimbang
   (lihat nota pada .today-nota-btn). */
#eguru-app .today-latihan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; min-height: 30px; }
/* Sel PBD yang dicadangkan TD (Tidak Ditaksir) — murid tidak hadir pada
   setiap sesi yang mengajar SK itu. Tanda, bukan kunci: dropdown TP kekal
   boleh digunakan. */
#eguru-app td.pbd-td { position: relative; background: var(--bg); }
#eguru-app .pbd-td-tag { display: inline-block; margin-left: 5px; font-size: var(--t2); font-weight: 800; letter-spacing: .3px; color: var(--danger); border: 1px solid var(--danger); border-radius: var(--radius-full); padding: 0 5px; vertical-align: middle; }
#eguru-app .today-latihan-btn:hover { opacity: .92; }
#eguru-app .today-latihan-btn svg { width: 14px; height: 14px; fill: #fff; }
#eguru-app .onboard-banner { background: var(--info-light); border: 1.5px solid var(--info); border-radius: var(--radius); padding: 14px; margin-bottom: var(--sp-4); }
/* Guna --info-text seperti .guest-banner h4: --info atas --info-light
   cuma 3.38:1, #1D4ED8 = 6.16:1. */
#eguru-app .onboard-banner h4 { font-size: var(--t6); color: var(--info-text); margin-bottom: var(--sp-2); }
#eguru-app .onboard-banner p { font-size: var(--t5); color: var(--text); line-height: 1.5; margin-bottom: var(--sp-3); }
#eguru-app .rpt-sub2 { color: var(--text-muted); font-size: var(--t6); font-style: italic; }
#eguru-app .google-connected { display: flex; align-items: center; gap: 11px; background: var(--success-light); border: 1.5px solid var(--success); border-radius: var(--radius-sm); padding: 12px 14px; }
#eguru-app .google-connected svg { width: 26px; height: 26px; fill: var(--success); flex-shrink: 0; }
#eguru-app .google-connected b { display: block; font-size: var(--t6); color: var(--text); }
#eguru-app .google-connected span { display: block; font-size: var(--t4); color: var(--text-muted); word-break: break-all; }

/* ===== HALAMAN AKAUN (profil pengguna) ===== */
#eguru-app .ak-hero { position: relative; background: var(--gradient-bg); color: #fff; border-radius: var(--radius-lg); padding: 20px 18px; margin-bottom: var(--sp-1); box-shadow: var(--shadow-lg); }
#eguru-app .ak-plan-badge { position: absolute; top: 12px; right: 14px; font-size: var(--t2); font-weight: 800; padding: 4px 11px; border-radius: var(--radius-full); cursor: pointer; letter-spacing: .4px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 3px; z-index: 2; white-space: nowrap; }
#eguru-app .ak-plan-badge.free { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.35); }
#eguru-app .ak-plan-badge.pro { background: #fff; color: var(--primary-dark); }
#eguru-app .ak-plan-badge.ultra { background: var(--ultra-dark); color: #fff; }
#eguru-app .ak-hero-top { display: flex; align-items: center; gap: 14px; }
#eguru-app .ak-avatar { width: 64px; height: 64px; flex-shrink: 0; position: relative; }
#eguru-app .ak-avatar-inner { width: 100%; height: 100%; border-radius: var(--radius-lg); background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; overflow: hidden; }
#eguru-app .ak-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }
#eguru-app .ak-cam { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #3b2f00; border: 2px solid var(--primary-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
#eguru-app .ak-cam svg { width: 14px; height: 14px; fill: currentColor; }
#eguru-app .ak-id { min-width: 0; flex: 1; }
#eguru-app .ak-name { font-size: var(--t8); font-weight: 800; line-height: 1.2; word-break: break-word; }
#eguru-app .ak-school { font-size: var(--t4); opacity: .92; margin-top: 3px; display: flex; align-items: center; gap: 5px; }
#eguru-app .ak-school svg { width: 13px; height: 13px; fill: currentColor; opacity: .9; flex-shrink: 0; }
#eguru-app .ak-email { font-size: var(--t3); opacity: .82; margin-top: 2px; word-break: break-all; }
#eguru-app .ak-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
#eguru-app .ak-pill { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius-full); padding: 5px 11px; font-size: var(--t3); font-weight: 700; display: flex; align-items: center; gap: 5px; }
#eguru-app .ak-pill svg { width: 12px; height: 12px; fill: currentColor; }
#eguru-app .ak-pill.ok { background: rgba(255,255,255,.95); color: var(--primary-dark); border-color: transparent; }
/* Tab Akaun | Pelan — rupa segmen yang sama seperti .auth-tabs (modal log masuk),
   supaya ia dibaca sebagai "dua muka halaman yang sama", bukan menu baharu. */
/* Butang Admin dalam hero Akaun. Peringkat ASAS (bukan dalam @media): peraturan
   sembunyi #nav-admin yang lama hidup dalam blok >=900px sahaja kerana .nav-extra
   sudah tersembunyi di telefon — butang ini pula kelihatan pada SEMUA lebar,
   jadi gerbangnya mesti asas juga. */
/* Butang Admin: PENJURU KANAN ATAS hero, sejajar dengan lencana pelan
   (.ak-plan-badge, top:12px right:14px). Kedua-duanya position:absolute dalam
   .ak-hero yang position:relative. Butang duduk di BAWAH lencana supaya ia tidak
   pernah bertindih walaupun lencana bertukar panjang ("Percuma" vs "Ultra"). */
#eguru-app .ak-admin-btn { position: absolute; top: 44px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-full); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); color: #fff; font-size: var(--t2); font-weight: 800; letter-spacing: .3px; text-decoration: none; white-space: nowrap; }
#eguru-app .ak-admin-btn:hover { background: rgba(255,255,255,.28); }
#eguru-app .ak-admin-btn svg { width: 13px; height: 13px; fill: currentColor; }
#eguru-app .ak-admin-btn:not(.admin-on) { display: none; }
/* #view-profile menetapkan .section-header { margin-bottom: 0 } untuk kad
   tetapannya. Kad Portal Murid yang berpindah masuk BUKAN akordion, jadi
   pengecualian .acc-body tidak melindunginya dan tajuknya akan melekat pada
   kotak nota di bawahnya. Pulihkan jarak asas dalam panel itu sahaja. */
#eguru-app #view-portalmurid .section-header { margin-bottom: var(--sp-4); }
#eguru-app .ak-tabs { display: flex; gap: 4px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; margin: var(--sp-4) 0 var(--sp-4); box-shadow: var(--shadow-sm); }
#eguru-app .ak-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--t6); font-weight: 700; color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s; }
#eguru-app .ak-tab svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
#eguru-app .ak-tab:hover { color: var(--primary-text); }
#eguru-app .ak-tab.active { background: rgba(5,150,105,.1); color: var(--primary-text); }
#eguru-app .ak-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Nilai semasa + chevron pada baris tetapan */
#eguru-app #view-profile .section-header { margin-bottom: 0; }
#eguru-app #view-profile .acc-body .section-header { margin-bottom: var(--sp-4); }
#eguru-app #view-profile .section-header-text { flex: 1; min-width: 0; }
#eguru-app .set-val { margin-left: auto; font-size: var(--t3); font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; text-align: right; }
#eguru-app .set-val.ok { color: var(--success); }
#eguru-app .set-val.muted { color: var(--text-light); font-weight: 600; }
#eguru-app .set-val + .acc-arrow, #eguru-app .set-val + .set-chev { margin-left: 8px; }
#eguru-app .set-chev { margin-left: auto; color: var(--text-light); font-size: var(--t9); line-height: 1; flex-shrink: 0; font-weight: 400; padding-right: 2px; }
#eguru-app .set-link { cursor: pointer; transition: border-color .15s; }
#eguru-app .set-link:hover { border-color: var(--primary) !important; }
#eguru-app .set-link.danger:hover { border-color: var(--danger) !important; }
#eguru-app .profil-id { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; margin-bottom: var(--sp-4); }

/* Zon berbahaya */
#eguru-app .tetapan-kategori.danger { color: #b91c1c; border-bottom-color: #FCA5A5; }
#eguru-app .tetapan-kategori.danger::before { background: var(--danger); }
#eguru-app .badge-danger { background: var(--danger); }
#eguru-app .card.danger-card { border-color: rgba(239,68,68,.35) !important; }
#eguru-app .set-link.danger .section-header-text h3 { color: #b91c1c; }

/* Modal padam akaun */
#eguru-app .del-warn-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--danger-light); color: var(--danger); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
#eguru-app .del-warn-ic svg { width: 30px; height: 30px; fill: currentColor; }
#eguru-app .del-conseq { background: var(--danger-light); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-sm); padding: 12px 13px; margin: 4px 0 10px; text-align: left; }
#eguru-app .del-conseq-h { font-size: var(--t4); font-weight: 800; color: #b91c1c; margin-bottom: var(--sp-2); }
#eguru-app .del-ci { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t4); color: #7f1d1d; line-height: 1.45; margin-top: 7px; }
#eguru-app .del-ci svg { width: 14px; height: 14px; fill: var(--danger); margin-top: 2px; flex-shrink: 0; }
#eguru-app .modal-btns { display: flex; gap: 10px; margin-top: 16px; }
#eguru-app .btn:disabled { opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* Pentas pangkas (crop) gambar */
#eguru-app .crop-stage { background: #0b1220; border-radius: var(--radius-sm); max-height: 56vh; overflow: hidden; }
#eguru-app #crop-img { display: block; max-width: 100%; }
#eguru-app .crop-stage img { border-radius: 0; }

/* ==================================================================
   FASA 1 — ASAS RESPONSIF
   Diletak di HUJUNG stylesheet supaya peraturan di sini menang ke atas
   peraturan sebelumnya yang mempunyai specificity sama.
   ================================================================== */

/* --- Skala teks ikut skrin + kawalan pengguna -------------------- */
/* Dahulunya --fs kekal 14px dari telefon hingga monitor 27", jadi teks
   badan mendarat pada 10–11px di desktop. Kerana hampir semua saiz lain
   ditulis dalam em, menaikkan --fs sahaja sudah menskala seluruh UI.
   --fs kini terbitan: asas responsif (--fs-base) DIDARAB dengan pilihan
   guru (--fs-scale, ditetapkan oleh butang A-/A+ di sidebar). Dengan cara
   ini kedua-duanya berkuat kuasa serentak — guru yang pilih "Besar" tetap
   dapat teks lebih besar pada monitor besar berbanding pada telefon. */
/* Tangga asas diturunkan daripada 15/16/17. Pengurangan disasarkan pada
   skrin BESAR (17 -> 15.5, turun ~9%) kerana di situlah teks terasa terlalu
   besar; telefon hampir tidak berubah (15 -> 14.5) kerana menurunkannya
   membawa balik masalah asal — pada asas 13.5px teks badan telefon jatuh ke
   11.3px dan 81 elemen turun di bawah 11px, berbanding 47 pada 14.5px.
   Guru yang mahu lebih besar tekan A+ sekali (x1.12 ~ saiz lama). */
/* 2026-07-30 — asas diturunkan lagi atas permintaan pemilik: UI dikehendaki
   lebih padat, terutamanya pada telefon di mana ruang menegak paling mahal.
   Telefon kini mendapat tangga tersendiri (13.2px) yang lebih rendah
   daripada tablet/desktop, bukan lagi berkongsi satu nilai.
     telefon  13.2px -> teks badan (--t6) ~12.7px, hint (--t4) ~11.1px
     tablet   14px   -> ~13.4px
     >=1440   15px   -> ~14.4px
   Pampasan: --text-muted/--text-light telah digelapkan supaya teks kecil
   ini kekal lulus AA. JANGAN cerahkan semula token itu selagi asas rendah.
   Guru yang mahu lebih besar ada A+ (x1.12 / 1.25 / 1.4) di sidebar dan
   dalam helaian Akaun pada telefon. */
#eguru-app { --fs-base: 14px; --fs-scale: 1; --fs: calc(var(--fs-base) * var(--fs-scale)); }
@media (max-width: 899px) { #eguru-app { --fs-base: 13.2px; } }
@media (min-width: 1440px) { #eguru-app { --fs-base: 15px; } }

/* --- Skala paparan desktop (--ui-zoom) --------------------------- */
/* Pada desktop, --fs-base sahaja hanya mengecilkan TEKS; padding, tinggi
   medan, ikon, sidebar, radius dll. hampir semua px tetap — jadi mengecilkan
   font sahaja buat teks kecil di dalam kotak yang kekal besar (nampak
   "serabut"). `zoom` mengecilkan SEMUANYA secara seragam — sama seperti
   pengguna menekan Ctrl-"−" pada pelayar — tetapi teks kekal tajam (ia
   diraster semula pada saiz baharu, bukan dikaburkan seperti transform:scale).
   Diuji: `zoom` pada #eguru-app (position:fixed; inset:0) tetap memenuhi
   viewport penuh (tiada jurang) kerana Chrome membesarkan kotak susun-atur
   kepada viewport/zoom sebelum menskalanya semula.
   Kesannya: paparan lalai kini "luas & luang" pada mana-mana skrin desktop
   tanpa guru perlu zum keluar sendiri. Guru yang mahu lebih BESAR: tekan A+
   (teks) di sidebar, atau zum masuk pelayar (Ctrl-"+"), keduanya berkuat
   kuasa di atas nilai ini.
   Hanya >=900px (mobile kekal 1:1). Laras satu nombor per baris untuk
   lebih padat / lebih lega. Skrin lebih besar = lebih banyak ruang = boleh
   zum keluar lebih. */
#eguru-app { --ui-zoom: 1; }
@media (min-width: 900px)  { #eguru-app { --ui-zoom: .90; zoom: var(--ui-zoom); } }
@media (min-width: 1280px) { #eguru-app { --ui-zoom: .86; } }
@media (min-width: 1600px) { #eguru-app { --ui-zoom: .82; } }

/* ==================================================================
   PENYERAGAMAN SAIZ TEKS GLOBAL (2026-07-30)
   Diukur pada telefon sebelum ini: 39 saiz font berbeza dalam satu app,
   dan elemen SEMANTIK YANG SAMA berbeza saiz ikut halaman —
     .card p -> 7 saiz (9.77px .. 11.22px)
     label   -> 8 saiz (10.30px .. 13.60px)
   Tiga punca berasingan, diperbaiki di tiga tempat:
     1. Token --t1..--t9 dahulunya `em` -> kompaun ikut kedalaman sarang.
        Sudah ditukar ke calc(var(--fs) * n) di blok token di atas.
     2. 91 deklarasi font-size em/rem MENTAH memintas token sepenuhnya
        (`rem` lebih buruk: ia terikat pada 16px pelayar, jadi ia abaikan
        --fs-base DAN pilihan A-/A+ guru). Sudah dipetakan ke token.
     3. Baki di bawah: elemen prosa TAK BERKELAS yang font-size ditetapkan
        sebaris (style=) — masih 3 tangga berbeza untuk elemen jenis sama.
   ================================================================== */

/* Butang/medan tidak mewarisi font-size daripada induk secara lalai — ia
   ambil lalai ejen pengguna (Chrome: 13.333px). Itulah sebabnya 67 elemen
   .icon-btn mendarat pada 13.33px, di luar tangga sepenuhnya. */
#eguru-app button,
#eguru-app input,
#eguru-app select,
#eguru-app textarea { font-size: inherit; }

/* <label> tanpa kelas dahulunya mewarisi akar (13.2px) sedangkan label
   medan borang ialah --t5 (11.88px) — beza 11% pada elemen yang guru
   anggap sama. Satu asas menyatukannya. !important pada varian tak-berkelas
   kerana 10 daripadanya ada font-size sebaris (t3/t4/t5 bercampur); label
   BERKELAS (.km-anon dsb.) sengaja dibiar ikut tangga sendiri. Nilainya
   sama dengan `.form-group label` jadi tiada pertelingkahan. */
#eguru-app label { font-size: var(--t5); }
#eguru-app label:not([class]) { font-size: var(--t5) !important; }

/* Prosa TAK BERKELAS disatukan kepada satu saiz. Penapis :not([class])
   penting — ia memastikan komponen bergaya (.hero-sub, .card-desc,
   .help-hint, .nav-label) tidak terjejas dan kekal dengan tangganya
   sendiri. !important diperlukan kerana atribut style= sebaris
   mengalahkan pemilih kelas. */
#eguru-app p:not([class]),
#eguru-app li:not([class]),
#eguru-app ol:not([class]),
#eguru-app ul:not([class]) { font-size: var(--t4) !important; }

/* DIKECUALIKAN DENGAN SENGAJA — lencana bergeometri TETAP:
     .pf-help    11px   dalam bulatan 18px tetap
     .nav-badge  10px   dalam bulatan 17px tetap
     .fs-btn     15px   glif butang A- / A+
   Saiznya terikat pada bulatan px tetap, jadi menukarnya kepada token yang
   menskala akan melimpah bila guru tekan A+. Ia bukan teks badan. */

/* PROSA MEMENUHI KOTAKNYA (keputusan pemilik 2026-09-15).
   Dahulu perenggan dalam .card, .hero-sub, .fitur-desc, .legal-body,
   banner & tip-box dihadkan ~64 aksara sebaris (max-width: 64ch). Pada
   desktop teks berhenti di sepertiga kotak/popup dan terlipat ke bawah
   dengan ruang kosong di kanan — terbaca sebagai teks "terpotong".
   Had itu DIBUANG sepenuhnya: setiap teks kini selebar bekasnya.
   JANGAN tambah semula max-width dalam ch/px pada teks badan. */

/* ===== LEBAR KANDUNGAN: PENUH, SAMA RATA UNTUK SEMUA HALAMAN =====
   Percubaan pertama menghadkan .view kepada 1120px dengan pengecualian
   1400px untuk RPH/RPT. Pada skrin ~1700px itu bermakna Utama/PBD/Akaun
   dapat jurang tambahan ~142px setiap tepi manakala RPH/RPT hampir penuh —
   jadi jurang tepi BERUBAH setiap kali tukar tab, yang terbaca sebagai
   tidak kemas. Aplikasi ini alat kerja (jadual, grid, borang), bukan
   penerbitan, jadi lebar penuh memang lebih sesuai. Satu-satunya jurang
   kini ialah padding .main-content — sama di setiap halaman.
   Prosa juga memenuhi lebar kadnya (lihat "PROSA MEMENUHI KOTAKNYA"). */
@media (min-width: 900px) {
    /* Sidebar lebih ramping pada laptop kecil supaya kandungan dapat ruang. */
    #eguru-app { --sidebar-w: 200px; }
}

@media (min-width: 1280px) { #eguru-app { --sidebar-w: 236px; } }

/* ===== JURANG TEPI: SAMA DI KEEMPAT-EMPAT SISI =====
   Dua perkara mesti diselaraskan serentak:
   1. Halaman pendek tiada bar skrol, halaman panjang ada — tanpa
      scrollbar-gutter kandungan teranjak setiap kali tukar tab.
   2. scrollbar-gutter menempah lebar bar skrol DI LUAR padding, jadi
      padding sisi mesti ditolak dengan lebar itu; jika tidak jurang sisi
      sentiasa lebih besar daripada jurang atas/bawah (dahulu 43 vs 22).
   Lebar bar skrol berbeza ikut OS/pelayar (Chrome Windows 'thin' = 10px,
   macOS tindanan = 0px), jadi ia DIUKUR oleh ukurBarSkrol() dan ditulis ke
   --sb-w. max(0px, ...) menghalang padding negatif jika bar skrol lebih
   lebar daripada jurang yang dikehendaki. */
#eguru-app {
    --pad-view: 16px;
    --sb-w: 0px;
}
#eguru-app .main-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
#eguru-app .main-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
#eguru-app .main-content::-webkit-scrollbar-track { background: transparent; }

/* Pendekatan sama untuk SEMUA lebar. Pada peranti sentuh yang bar skrolnya
   jenis tindanan, --sb-w diukur sebagai 0px, jadi padding penuh digunakan dan
   gutter tiada kesan — formula yang sama betul untuk kedua-dua keadaan.
   (Percubaan awal melangkau gutter di bawah 900px; hasilnya pelayar desktop
   pada 768px dapat 10px kiri lawan 20px kanan.) */
#eguru-app .main-content {
    scrollbar-gutter: stable both-edges;
    padding: var(--pad-view) max(0px, calc(var(--pad-view) - var(--sb-w))) !important;
}
/* Telefon: jurang tepi dikecilkan 10px -> 4px supaya kandungan (jadual,
   kad RPH, jadual PBD) mendapat hampir seluruh lebar skrin. Kad masih ada
   padding dalamannya sendiri (12px pada <=640px), jadi teks tidak pernah
   melekat pada bezel. --nav-gap diselaraskan ke nilai sama supaya tepi kad
   nav terapung berbaris tepat dengan tepi kandungan. */
@media (max-width: 899px) {
    #eguru-app { --pad-view: 4px; }
    /* Pada telefon gutter DIMATIKAN, dan padding sisi tidak lagi menolak
       --sb-w. Sebabnya: formula `--pad-view - --sb-w` menganggap --pad-view
       lebih besar daripada gutter. Pada 4px anggapan itu pecah — bar skrol
       nipis Chrome mengukur 4px sesisi, jadi 4-4 = 0 dan kad melekat pada
       bezel. Telefon sebenar guna bar skrol tindanan (--sb-w = 0) jadi tiada
       apa yang perlu ditempah; menempahnya cuma merampas 8-10px daripada
       lebar 375px. Gutter kekal untuk >=900px, di situ ia memang berguna. */
    #eguru-app .main-content {
        scrollbar-gutter: auto !important;
        padding-left: var(--pad-view) !important;
        padding-right: var(--pad-view) !important;
        padding-bottom: calc(var(--nav-h) + var(--pad-view)) !important;
    }
}

/* Margin anak pertama boleh 'collapse' menembusi .view dan menolak seluruh
   halaman ke bawah — itu punca jurang atas 24px pada sesetengah halaman
   sedangkan yang lain 16px. */
#eguru-app .view > *:first-child { margin-top: 0 !important; }

/* ==================================================================
   MODAL: SEMUA BERLABUH DI BAWAH (BOTTOM SHEET)
   13 overlay memaksa `align-items:flex-start` sebaris, tetapi helaian
   modal direka sebagai bottom sheet — sudut bulat DI ATAS sahaja
   (24px 24px 0 0) dengan animasi slideUp. Digabungkan, hasilnya kotak
   terapung di tengah skrin dengan sudut bawah tajam yang tergantung di
   udara. Peraturan di bawah memulangkan corak asal untuk SEMUA modal
   supaya kesemuanya berkelakuan sama.
   !important perlu kerana ia mengatasi atribut style= sebaris.
   ================================================================== */
#eguru-app .modal-overlay,
#eguru-app .km-modal { align-items: flex-end !important; justify-content: center !important; }

/* ==================================================================
   MODAL: SATU SAIZ UNTUK SEMUA (2026-09-15)
   Setiap popup — borang kecil (log masuk, bayar, kata laluan, padam
   akaun), helaian lebar (editor RPH, import RPT, PBD, Jadual Waktu),
   undang-undang/takwim/prompt, dan Support/Kedai — kini SAMA saiz:
   hampir penuh skrin, dengan jurang --modal-gap di KIRI, KANAN dan ATAS
   supaya latar gelap di belakangnya tetap kelihatan dan guru tahu ia
   popup. Bawah kekal rapat ke tepi skrin (bottom sheet).
   Dahulu ada empat saiz: 560px (.modal-sheet, .km-modal-sheet),
   1140px/97vw (.rph-/.legal-modal-sheet) dan 720px (.pbd-modal-sheet),
   setiap satu dengan had tinggi sendiri — popup kecil kelihatan terlalu
   kecil pada desktop dan saiznya bertukar-tukar dari satu butang ke butang.
   Ukuran guna % overlay, BUKAN vw/dvh: #eguru-app memakai `zoom` pada
   desktop, jadi unit viewport tidak sepadan dengan kotak overlay.
   Tinggi TETAP (height, bukan max-height) — itulah yang menjadikan setiap
   popup sama saiz; kandungan yang lebih panjang menatal di dalamnya.
   Overlay sentiasa berlabuh di bawah: dalam bekas flex align-items:flex-end,
   helaian yang lebih tinggi daripada bekas melimpah ke ATAS dan tidak boleh
   ditatal (#eguru-app overflow:hidden) — tinggi tetap di bawah menutup
   masalah itu sepenuhnya.
   !important perlu kerana ia mengatasi style= sebaris (cth #auth-modal-sheet
   max-height:92dvh, #result-modal border-radius:24px) dan peraturan Support/
   Kedai yang datang kemudian dalam <style> kedua.
   ================================================================== */
#eguru-app { --modal-gap: 24px; }
@media (max-width: 899px) { #eguru-app { --modal-gap: 10px; } }
#eguru-app .modal-sheet,
#eguru-app .km-modal-sheet,
#eguru-app .pbd-modal-sheet {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--modal-gap)) !important;
    max-width: none !important;
    height: calc(100% - var(--modal-gap)) !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: slideUp .3s ease-out;
}
/* Popup undang-undang: kepala tetap, jadi helaian sendiri tidak menatal. */
#eguru-app .legal-modal-sheet { overflow: hidden; }
#eguru-app .legal-modal-head { border-radius: 24px 24px 0 0; }

/* Borang kecil & Support/Kedai dalam helaian selebar skrin: kandungannya
   kekal satu lajur --modal-w di TENGAH (padding sisi menyerap baki lebar),
   supaya medan input & butang tidak meregang 1,500px. Padding % merujuk
   lebar OVERLAY, jadi 2×gap ditolak dahulu.
   Borang kecil turut ditengahkan secara MENEGAK dengan dua pengisi flex
   (::before/::after). flex-basis 0 + shrink 0: bila kandungan lebih tinggi
   daripada helaian, pengisi mengecut ke 0 dan helaian menatal biasa — tiada
   bahagian atas yang terpotong seperti justify-content:center.
   Support/Kedai tidak ditengahkan menegak: kandungannya (kiriman + komen,
   butiran produk) dimuat kemudian dan akan melompat jika ditengahkan. */
#eguru-app .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet),
#eguru-app .km-modal-sheet {
    padding-left: max(20px, calc((100% - 2 * var(--modal-gap) - var(--modal-isi, var(--modal-w))) / 2)) !important;
    padding-right: max(20px, calc((100% - 2 * var(--modal-gap) - var(--modal-isi, var(--modal-w))) / 2)) !important;
}
/* Kiriman Support & butiran produk Kedai: prosa + gambar, bukan borang —
   lajur lebih luas supaya tidak nampak seperti jalur sempit di tengah skrin. */
#eguru-app .km-modal-sheet { --modal-isi: 800px; }
#eguru-app .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) {
    display: flex; flex-direction: column;
}
#eguru-app .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet)::before,
#eguru-app .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet)::after {
    content: ""; flex: 1 0 0px;
}
/* Pemegang "tarik turun" kekal di PUNCAK helaian, bukan terapung bersama
   kandungan di tengah: order:-1 meletakkannya sebelum pengisi ::before. */
#eguru-app .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) > .modal-handle { order: -1; flex-shrink: 0; }

/* ==================================================================
   NAV BAWAH MOBILE: TERAPUNG DENGAN JURANG KIRI/KANAN
   Dahulunya melekat penuh selebar skrin dan bercantum dengan bezel.
   Kini ia kad terapung: jurang --nav-gap di kiri/kanan/bawah, sudut
   bulat, dan bayang tinggi supaya ia jelas berada DI ATAS kandungan.
   ================================================================== */
#eguru-app { --nav-gap: 0px; }
@media (max-width: 899px) {
    #eguru-app { --nav-gap: 4px; }
    #eguru-app .bottom-nav {
        left: var(--nav-gap) !important;
        right: var(--nav-gap) !important;
        width: auto !important;
        bottom: calc(var(--nav-gap) + env(safe-area-inset-bottom)) !important;
        padding-bottom: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.05) !important;
        overflow: hidden;
    }
    #eguru-app.dark-theme .bottom-nav {
        box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3) !important;
    }

    /* ===== PENANDA "BENJOLAN" ITEM AKTIF (telefon) =====
       Sebelum ini item aktif dibezakan hanya oleh warna + pil hijau lembut
       di belakang ikon — halus pada skrin kecil dan hampir hilang di bawah
       cahaya matahari. Nub melengkung yang tergantung dari rel atas memberi
       isyarat KEDUDUKAN yang terbaca sekilas walaupun warna sukar dilihat.
       Ia diletak DI DALAM tepi atas kerana .bottom-nav ada overflow:hidden
       (untuk mengelip sudut bulat kad terapung) — nub yang menonjol ke luar
       akan terpotong. Animasi lebar dibuat dengan scaleX supaya ia jalan di
       atas compositor, bukan menyebabkan layout. */
    #eguru-app .bottom-nav .nav-item { position: relative !important; }
    #eguru-app .bottom-nav .nav-item::before {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        width: 30px; height: 5px;
        border-radius: 0 0 var(--radius-full) var(--radius-full);
        background: var(--primary);
        transform: translateX(-50%) scaleX(.25);
        opacity: 0;
        transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
        pointer-events: none;
    }
    #eguru-app .bottom-nav .nav-item.active::before {
        transform: translateX(-50%) scaleX(1);
        opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) {
        #eguru-app .bottom-nav .nav-item::before { transition: none; }
    }

    /* Kandungan mesti berhenti di ATAS nav terapung, bukan di bawahnya. */
    #eguru-app .main-content {
        padding-bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + var(--pad-view)) !important;
    }
}
/* Popover kumpulan/Guru & toast bermula di atas nav (terapung atau tidak). */
#eguru-app .nav-pop { bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + env(safe-area-inset-bottom)); }
#eguru-app .toast-msg { bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + 12px) !important; }
@media (max-width: 640px) {
    #eguru-app .card { padding: 12px !important; }
    #eguru-app .combo-body { padding: 12px 12px 14px !important; }
    #eguru-app .combo-hero { padding: 16px 14px 14px !important; }
}

/* --- Sasaran sentuh minimum -------------------------------------- */
/* Pautan footer dahulunya hanya 13px tinggi — terlalu kecil untuk jari. */
#eguru-app .biz-footer-links { gap: 0 6px; }
#eguru-app .biz-footer-links a { display: inline-block; padding: 8px 5px; }

/* ==================================================================
   .nav-section / .nav-soon — SUDAH TIDAK DIGUNAKAN
   ------------------------------------------------------------------
   Bar "Akan Datang" yang boleh dilipat telah digantikan sepenuhnya oleh
   kumpulan akordion sebenar (.nav-grp): PdPC · Taksir · Int & Pel · Bank.
   Tiada lagi modul berstatus "Segera", jadi
   tiada apa-apa yang perlu dilipat di bawah tajuk itu.

   Selektor lama dibiarkan tanpa gaya di sini SEBAGAI DOKUMENTASI: kalau
   modul teaser diperkenalkan semula kelak, hidupkannya sebagai .nav-grp
   dengan kumpulannya sendiri — jangan bangkitkan .soon-open, kerana ia
   menyembunyikan item melalui kelas pada <nav> dan itu bertembung dengan
   logik bar bawah telefon.
   ================================================================== */

/* ==================================================================
   HALAMAN UTAMA — SATU LAJUR, SEBELUM DAN SELEPAS LOG MASUK
   Selepas log masuk halaman ini ada satu tugas: jadual hari ini. Satu lajur,
   dan takwim disorok di belakang butang hero (bukaTakwimModal).
   Untuk pelawat, susun atur dua lajur (>= 1180px) DIBUANG 2026-09-15 atas
   permintaan pemilik: dua lajur tidak sepadan dengan setiap halaman lain
   (semua satu lajur) dan kad "Kenapa SistemGuru.My?" terapung di sisi.
   Kini sama seperti biasa: hero -> DSKP -> Log Masuk -> Kenapa -> tip.
   .home-col kekal display:contents (telus) — lihat komen di #view-home.
   ================================================================== */
#eguru-app .home-col { display: contents; }


/* ===== PBD: "Tempoh Pelaporan" di kanan atas kad ===== */
#eguru-app .pbd-head { flex-wrap: wrap; }
#eguru-app .pbd-tempoh-wrap {
    margin-left: auto; flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
}
#eguru-app .pbd-tempoh-wrap label {
    margin: 0 !important; white-space: nowrap;
    /* font-size override DIBUANG (2026-07-30): ia satu-satunya label dalam app
       yang terpapar --t3 (10.3px) sedangkan setiap label lain --t5 (11.88px).
       Ia label medan biasa ("Tempoh Pelaporan") — tiada sebab jadi 13% lebih
       kecil. font-weight & warna dikekalkan kerana itu memang gaya jalur ini. */
    font-weight: 700 !important; color: var(--text-muted) !important;
}
#eguru-app .pbd-tempoh-wrap select { width: auto !important; min-width: 168px; }
/* Telefon: turun ke baris sendiri, label DI ATAS pilihan. Label + pilihan
   bersebelahan tidak muat — <select> tidak mengecil di bawah lebar
   kandungannya ("Pertengahan Tahun"), jadi pada 320px + saiz teks 4/4 ia
   melimpah keluar kad. Susunan bertindan tidak boleh melimpah. */
@media (max-width: 640px) {
    #eguru-app .pbd-tempoh-wrap { margin-left: 0; flex: 1 1 100%; margin-top: 10px; flex-wrap: wrap; gap: 5px; }
    #eguru-app .pbd-tempoh-wrap label { flex: 1 1 100%; }
    #eguru-app .pbd-tempoh-wrap select { width: 100% !important; min-width: 0; }
}

/* ===== PBD: kad kelas lebih lebar =====
   Pada 200px, dua butang berkongsi 176px dan "Lihat PBD" membalut ke dua
   baris, jadi kad itu tidak sama tinggi antara satu sama lain. nowrap
   memastikan ia tidak boleh berlaku lagi walaupun label bertukar. */
#eguru-app .pbd-subj-cell { width: 244px; }
#eguru-app .pbd-cell-btn { white-space: nowrap; }
@media (max-width: 600px) { #eguru-app .pbd-subj-cell { width: 78vw; max-width: 268px; } }

/* ===== PORTAL MURID — DAFTAR MURID IKUT KELAS =====
   Satu baris kelas yang boleh dilipat, dengan kiraan murid + status kod/PIN
   pada tajuknya, jadi guru boleh mengimbas semua kelas tanpa menatal melalui
   ratusan nama. */
#eguru-app .pm-tajuk-baris { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
#eguru-app .pm-jumlah { font-size: var(--t4); font-weight: 700; color: var(--text-muted); }
#eguru-app .pm-kelas { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin-bottom: 9px; }
#eguru-app .pm-kelas-head { display: flex; align-items: center; gap: 10px; padding: 9px 11px; flex-wrap: wrap; }
#eguru-app .pm-kelas-tog {
    display: flex; align-items: center; gap: 10px; flex: 1 1 180px; min-width: 0;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    text-align: left; color: inherit; font: inherit;
}
#eguru-app .pm-ini {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: var(--t2);
}
/* SATU BARIS: nama, meta dan cip tag semuanya sebaris. Dahulu ketiga-tiganya
   blok bertindan (dan kod portal monospace membalut sendiri), jadi satu kelas
   memakan empat baris. Meta yang terlalu panjang dipendekkan dengan elipsis —
   ia maklumat sekunder; nama kelas & cip tidak boleh hilang. */
#eguru-app .pm-kelas-teks { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
#eguru-app .pm-kelas-teks b { flex: 0 0 auto; font-size: var(--t6); font-weight: 800; color: var(--text); white-space: nowrap; }
#eguru-app .pm-meta-baris { flex: 0 1 auto; min-width: 0; font-size: var(--t3); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eguru-app .pm-chev { flex: 0 0 auto; width: 16px; height: 16px; fill: var(--text-muted); transition: transform .18s ease; }
#eguru-app .pm-kelas.tutup .pm-chev { transform: rotate(-90deg); }
#eguru-app .pm-kelas-btn { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
#eguru-app .pm-kelas-btn .btn { width: auto !important; flex: 0 0 auto; }
#eguru-app .pm-murid-ol { border-top: 1px solid var(--border); margin: 0; padding: 8px 12px 10px 40px; }
#eguru-app .pm-kelas.tutup .pm-murid-ol, #eguru-app .pm-kelas.tutup .pm-kosong { display: none; }
#eguru-app .pm-murid-ol li { padding: 3px 0; font-size: var(--t5); color: var(--text); }
#eguru-app .pm-meta { font-size: var(--t3); color: var(--text-light); margin-left: 7px; }
#eguru-app .pm-kosong { border-top: 1px solid var(--border); padding: 10px 12px; }
#eguru-app .pm-tag { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
#eguru-app .pm-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--t3); font-weight: 700; padding: 2px 9px;
    border-radius: var(--radius-full); background: var(--bg);
    border: 1px solid var(--border); color: var(--text-muted);
}
#eguru-app .pm-chip.tkt { background: rgba(5,150,105,.1); border-color: rgba(5,150,105,.3); color: var(--primary-text); }
#eguru-app .pm-chip.kosong { border-style: dashed; color: var(--text-light); font-weight: 600; }
#eguru-app .pm-chip-x { border: 0; background: none; padding: 0 0 0 2px; margin: 0; cursor: pointer; color: inherit; font-size: var(--t4); line-height: 1; }

#eguru-app .pm-baris { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
#eguru-app .pm-baris .pm-no { flex: 0 0 22px; font-size: var(--t3); color: var(--text-light); text-align: right; }
#eguru-app .pm-baris .pm-in-nama { flex: 1 1 auto; min-width: 0; }
#eguru-app .pm-baris .pm-in-jantina { flex: 0 0 74px; }
@media (max-width: 560px) {
    #eguru-app .pm-baris { flex-wrap: wrap; }
    /* Telefon: nama kelas mengambil satu baris penuh, tiga butang berkongsi
       baris kedua secara sama rata. Tanpa ini setiap butang membalut sendiri
       dan kepala satu kelas memakan ~175px tinggi. */
    #eguru-app .pm-kelas-head { gap: 8px; }
    #eguru-app .pm-kelas-tog { flex: 1 1 100%; }
    #eguru-app .pm-kelas-btn { width: 100%; }
    #eguru-app .pm-kelas-btn .btn { flex: 1 1 0 !important; min-width: 0; padding-left: 6px !important; padding-right: 6px !important; }
    /* Telefon: satu baris tidak mungkin memuatkan nama + meta + cip dalam 341px,
       jadi di sini sahaja ia dibenarkan membalut. */
    #eguru-app .pm-kelas-teks { flex-wrap: wrap; gap: 3px 8px; }
    #eguru-app .pm-meta-baris { white-space: normal; overflow: visible; }
}

/* ===== HALAMAN TOOLS (hab alat) =====
   Petak pautan, bukan senarai menu: ikon untuk dikenali sekilas, tajuk, dan
   satu ayat yang menjawab "bila saya perlukan ini?" — soalan yang label menu
   tidak pernah dapat jawab. */
#eguru-app .tool-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
#eguru-app .tool-kad {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
    padding: 14px; background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--radius-md); cursor: pointer; color: var(--text);
    transition: border-color .16s, background .16s;
}
#eguru-app .tool-kad:hover { border-color: var(--primary); background: var(--card-bg); }
#eguru-app .tool-kad:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app .tool-ikon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; background: rgba(5,150,105,.1);
}
#eguru-app .tool-ikon svg { width: 21px; height: 21px; fill: var(--primary); }
#eguru-app .tool-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#eguru-app .tool-teks b { font-size: var(--t6); font-weight: 800; }
#eguru-app .tool-teks i { font-style: normal; font-size: var(--t4); color: var(--text-muted); line-height: 1.5; }
#eguru-app .tool-arrow { flex: 0 0 auto; width: 17px; height: 17px; fill: var(--text-light); margin-top: 11px; }

/* ===== KAWALAN SAIZ FONT (A- / A+) =====
   Di sidebar desktop, di bawah Guru. Juga dimasukkan dalam sheet Guru
   mobile (kelompok "Paparan") supaya pengguna telefon tidak tertinggal. */
/* SUIS EJEN AI — duduk tepat di atas kawalan Saiz Teks dalam sidebar, dan
   sebaris dengannya dalam sheet Guru mobile. Ia tetapan peribadi yang berterusan, sama seperti
   saiz teks; sebelum ini ia sepasang butang Hidupkan/Matikan pada Halaman
   Utama, yang bermakna guru terpaksa pulang ke Halaman Utama semata-mata untuk
   mematikannya. */
#eguru-app .ejen-ctl {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px;
    border-top: 1px solid var(--border); margin-top: 4px;
}
#eguru-app .ejen-ctl-lbl { flex: 1; min-width: 0; font-size: var(--t3); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
/* (Peraturan `.ejen-ctl-lbl small` dibuang bersama label "hidup/mati" — suis
   sudah menyatakan keadaannya sendiri.) */
/* Suis: <button role="switch"> supaya pembaca skrin melaporkannya sebagai suis,
   bukan butang yang labelnya berubah. */
#eguru-app .ejen-suis {
    flex: none; width: 38px !important; height: 21px; border-radius: 999px; border: none;
    background: var(--border); position: relative; cursor: pointer; padding: 0 !important;
    transition: background .18s;
}
#eguru-app .ejen-suis::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
    border-radius: 50%; background: #fff; transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#eguru-app .ejen-suis[aria-checked="true"] { background: var(--primary); }
#eguru-app .ejen-suis[aria-checked="true"]::after { transform: translateX(17px); }
#eguru-app .ejen-suis:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 899px) { #eguru-app nav > .ejen-ctl { display: none; } }
#eguru-app .nav-pop-bubble .ejen-ctl { display: flex; }
#eguru-app .fs-ctl {
    display: none; align-items: center; gap: 6px;
    margin-top: 10px; padding: 9px 10px 4px;
    border-top: 1px solid var(--border);
}
#eguru-app .fs-ctl-lbl {
    flex: 1; min-width: 0; font-size: var(--t1); font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#eguru-app .fs-btn {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border); border-radius: var(--radius-xs);
    background: var(--bg); color: var(--text); cursor: pointer;
    font-weight: 800; line-height: 1; transition: border-color .15s, color .15s;
}
#eguru-app .fs-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
#eguru-app .fs-btn:disabled { opacity: .35; cursor: not-allowed; }
#eguru-app .fs-btn.fs-minus { font-size: 11px; }
#eguru-app .fs-btn.fs-plus  { font-size: 15px; }
#eguru-app .fs-step { flex: 0 0 auto; font-size: var(--t1); font-weight: 800; color: var(--text-muted); min-width: 26px; text-align: center; }
/* Sidebar desktop sahaja (bottom-nav mobile tiada ruang) */
@media (min-width: 900px) { #eguru-app .bottom-nav .fs-ctl { display: flex; } }
/* Versi dalam sheet Guru mobile — sentiasa papar, tiada garis atas berganda
   (di sana ia berkongsi satu baris dengan Ejen AI — lihat .akaun-paparan, "HICK NAV") */
#eguru-app .nav-pop-bubble .fs-ctl { display: flex; margin-top: 6px; padding: 10px 12px 4px; }

/* ===== BUTANG TAKWIM SEKOLAH (kanan atas hero) =====
   Amber di atas kecerunan hijau — warna paling menyerlah yang sudah ada dalam
   palet, dan ia sudah bermaksud "perlu perhatian" di seluruh aplikasi (lencana
   minggu, slot rehat, status RPH belum siap), jadi maknanya konsisten. */
#eguru-app .combo-actions {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end;
}
#eguru-app .hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    /* Teks gelap, bukan putih — sama seperti .btn-accent. Putih atas
       kecerunan ini 2.15:1 (henti cerah) hingga 3.19:1 (henti gelap);
       #1F2937 = 6.83:1 dan 4.61:1, lulus AA merentas seluruh butang. */
    border: none; color: #1F2937;
    font-size: var(--t3); font-weight: 800; letter-spacing: .2px;
    padding: 8px 14px; border-radius: var(--radius-full); cursor: pointer;
    box-shadow: 0 3px 12px rgba(180,83,9,.42);
    transition: transform .15s, box-shadow .15s;
}
#eguru-app .hero-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(180,83,9,.55); }
#eguru-app .hero-btn:active { transform: scale(.97); }
#eguru-app .hero-btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
#eguru-app .hero-btn .hero-btn-count {
    /* Pil kiraan mesti IKUT teks gelap induk: latar hitam lut (.22) hanya
       beri 4.23:1/2.97:1. Putih lut (.35) -> ~8.9:1 dan ~7.3:1. */
    background: rgba(255,255,255,.35); border-radius: var(--radius-full);
    padding: 1px 7px; font-size: var(--t1); font-weight: 800;
}
/* Beri laluan kepada butang supaya ia tidak bertindih tajuk/lencana minggu. */
#eguru-app .combo-hero:has(.combo-actions) .hero-badge { max-width: calc(100% - 190px); }
#eguru-app .combo-hero:has(.combo-actions) .combo-greet { padding-right: 4px; }
/* Telefon: butang turun ke bawah salam (kanan atas terlalu sempit) dan berkongsi
   satu baris — dua butang bertindan penuh menambah ~74px pada hero setiap kali. */
@media (max-width: 560px) {
    #eguru-app .combo-actions { position: static; margin-top: 12px; gap: 6px; }
    #eguru-app .hero-btn { flex: 1 1 calc(50% - 3px); min-width: 0; justify-content: center; padding: 8px 8px; }
    #eguru-app .hero-btn .hero-btn-count { display: none; }   /* zon/kiraan digugurkan bila ruang sempit */
    #eguru-app .combo-hero:has(.combo-actions) .hero-badge { max-width: none; }
}

/* ==================================================================
   KURANGKAN GERAKAN (prefers-reduced-motion) — PENGAWAL MENYELURUH
   Fail ini ada 9 keyframes, tetapi hanya dua blok sempit yang menghormati
   tetapan OS. Yang tertinggal termasuk .view { animation: fadeIn } yang
   melakukan translateY pada SETIAP tukar tab, slideUp pada setiap modal,
   navPopIn dan rptFlash. Bagi pengguna sensitif vestibular itu bermakna
   satu anjakan skrin setiap kali menekan nav.
   Diletak di HUJUNG stylesheet supaya menang atas susunan sumber.
   .spinner DIKECUALIKAN dengan sengaja: membekukan pemutar di tengah
   putaran akan membuang satu-satunya isyarat "sedang berjalan" semasa
   penjanaan AI. Ia berputar sekata, bukan gerakan besar-besaran.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    #eguru-app *:not(.spinner),
    #eguru-app *::before,
    #eguru-app *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #eguru-app { scroll-behavior: auto !important; }
}


/* ===== BLOK 2: Halaman Utama - Waktu Solat (asal baris 4000-4261) ===== */
    /* ===== Halaman Utama: Waktu Solat ===== */
    #eguru-app .solat-wrap{background:linear-gradient(135deg,#0ea5a4,#0f766e);color:#fff;border-radius: var(--radius);padding:12px 14px;margin-bottom: var(--sp-4);}
    #eguru-app .solat-wrap.solat-loading,#eguru-app .solat-wrap.solat-err{background:var(--bg);color:var(--text-light);font-size: var(--t5);text-align:center;}
    #eguru-app .solat-head{font-size: var(--t5);font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom: var(--sp-3);opacity:.95;}
    #eguru-app .solat-head svg{width:14px;height:14px;fill:#fff;}
    #eguru-app .solat-zon{margin-left:auto;background:rgba(255,255,255,.2);padding:2px 8px;border-radius: var(--radius-full);font-size: var(--t6);}
    #eguru-app .solat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
    #eguru-app .solat-cell{background:rgba(255,255,255,.14);border-radius: var(--radius-sm);padding:7px 3px;text-align:center;}
    #eguru-app .solat-cell .sn{font-size: var(--t2);font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.3px;}
    #eguru-app .solat-cell .st{font-size: var(--t6);font-weight:800;margin-top:2px;}
    @media (max-width:520px){#eguru-app .solat-grid{grid-template-columns:repeat(3,1fr);}}
    /* ===== Halaman Utama: jadual hari ini (tajuk + aksi) ===== */
    #eguru-app .today-item .today-row{display:flex;align-items:center;gap:8px;}
    /* Tajuk pelajaran — satu baris kemas, dipotong jika panjang */
    #eguru-app .today-tajuk{display:flex;align-items:baseline;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius: var(--radius-sm);padding:6px 10px;font-size: var(--t4);line-height:1.45;}
    #eguru-app .today-tajuk-lbl{flex:0 0 auto;font-size: var(--t5);font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);}
    #eguru-app .today-tajuk > span:last-child{min-width:0;flex:1;}
    /* Baris aksi: butang aktiviti di kiri, tidak hadir di kanan */
    #eguru-app .today-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
    #eguru-app .today-actions-l{min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
    #eguru-app .today-actions-r{flex:0 0 auto;margin-left:auto;}
    #eguru-app .today-lihat-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:var(--primary);color:#fff;border:none;border-radius: var(--radius-sm);padding:6px 12px;font-size: var(--t4);font-weight:700;cursor:pointer;min-height:30px;}
    #eguru-app .today-lihat-btn:hover{background:var(--primary-dark);}
    #eguru-app .today-lihat-btn svg{width:14px;height:14px;fill:#fff;}
    #eguru-app .today-sksp-kosong{font-size: var(--t4);color:var(--text-light);font-style:italic;}
    #eguru-app .t-tidakhadir{display:inline-flex;align-items:center;justify-content:center;min-height:30px;background:#fff;color:var(--danger);border:1px solid #FCA5A5;border-radius: var(--radius-sm);padding:6px 12px;font-size: var(--t4);font-weight:700;cursor:pointer;}
    #eguru-app .t-tidakhadir:hover{background:#FEF2F2;}
    #eguru-app .today-item.absen{opacity:.92;}
    #eguru-app .today-absen-tag{background:#FEF2F2;color:#b91c1c;border:1px solid #FCA5A5;border-radius: var(--radius-sm);padding:6px 10px;font-size: var(--t4);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
    #eguru-app .t-undo{background:#fff;border:1px solid #FCA5A5;color:#b91c1c;border-radius: var(--radius-xs);padding:3px 9px;font-size: var(--t6);font-weight:700;cursor:pointer;}
    #eguru-app .today-dayabsen{margin-bottom: var(--sp-3);}
    #eguru-app .btn-dayabsen{width:100%;background:#fff;color:var(--danger);border:1px dashed #FCA5A5;border-radius: var(--radius-sm);padding:8px;font-size: var(--t4);font-weight:700;cursor:pointer;}
    #eguru-app .btn-dayabsen:hover{background:#FEF2F2;}
    /* ===== Banner auto-isi RPH (Halaman Utama) ===== */
    #eguru-app .autorph-banner{position:relative;display:flex;align-items:flex-start;gap:10px;background:#EFF6FF;border:1px solid #BFDBFE;border-radius: var(--radius-md);padding:11px 32px 11px 12px;margin-bottom: var(--sp-4);}
    #eguru-app .autorph-ic{flex:0 0 auto;width:30px;height:30px;border-radius: var(--radius-sm);background:#3B82F6;display:flex;align-items:center;justify-content:center;}
    #eguru-app .autorph-ic svg{width:17px;height:17px;fill:#fff;}
    #eguru-app .autorph-txt{flex:1;min-width:0;}
    #eguru-app .autorph-title{font-size: var(--t5);font-weight:800;color:#1E40AF;line-height:1.35;}
    #eguru-app .autorph-sub{font-size: var(--t4);color:#2563EB;margin-top:2px;line-height:1.4;}
    #eguru-app .autorph-btns{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;}
    #eguru-app .autorph-semak{background:#3B82F6;color:#fff;border:none;border-radius: var(--radius-sm);padding:6px 14px;font-size: var(--t4);font-weight:700;cursor:pointer;}
    #eguru-app .autorph-semak:hover{background:#2563EB;}
    #eguru-app .autorph-batal{background:#fff;color:#1D4ED8;border:1px solid #93C5FD;border-radius: var(--radius-sm);padding:6px 14px;font-size: var(--t4);font-weight:700;cursor:pointer;}
    #eguru-app .autorph-batal:hover{background:#EFF6FF;}
    /* Warna #60A5FA di atas latar banner #EFF6FF hanya 2.34:1 — hampir tak nampak.
       #1D4ED8 memberi 6.1:1. ::before pula membesarkan kawasan sentuh kepada 34px
       (glif asal cuma ~21px) tanpa mengubah kedudukan atau saiz simbol '×'. */
    #eguru-app .autorph-x{position:absolute;top:7px;right:9px;background:none;border:none;color:#1D4ED8;font-size:17px;line-height:1;cursor:pointer;padding:2px;}
    #eguru-app .autorph-x::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;}
    #eguru-app .autorph-x:hover{background:#DBEAFE;border-radius:50%;}
    /* ===== Pelan Langganan (statik buat masa ini) ===== */
    #eguru-app .plan-grid{display:grid;grid-template-columns:1fr;gap:11px;margin-top:6px;}
    @media(min-width:760px){#eguru-app .plan-grid{grid-template-columns:1fr 1fr 1fr;}}
    #eguru-app .plan-card{position:relative;border:1.5px solid var(--border);border-radius: var(--radius);padding:15px 13px;background:var(--card-bg);display:flex;flex-direction:column;}
    #eguru-app .plan-card.popular{border:2px solid var(--primary);}
    #eguru-app .plan-card.ultra{border-color:var(--ultra-pale);}
    #eguru-app .plan-tag{position:absolute;top:-9px;left:14px;background:var(--primary);color:#fff;font-size: var(--t1);font-weight:800;padding:3px 10px;border-radius: var(--radius-full);letter-spacing:.3px;}
    #eguru-app .plan-name{font-size: var(--t7);font-weight:800;color:var(--text);}
    #eguru-app .plan-card.popular .plan-name{color:var(--primary-dark);}
    #eguru-app .plan-card.ultra .plan-name{color:var(--ultra-dark);}
    #eguru-app .plan-price{margin:6px 0 1px;}
    #eguru-app .plan-price b{font-size:1.5em;font-weight:800;}
    #eguru-app .plan-price span{font-size: var(--t4);color:var(--text-muted);}
    #eguru-app .plan-sub{font-size: var(--t3);color:var(--text-muted);margin-bottom: var(--sp-4);}
    #eguru-app .plan-feat{display:flex;flex-direction:column;gap:7px;font-size: var(--t4);color:var(--text);line-height:1.4;flex:1;}
    #eguru-app .plan-feat .pf{display:flex;gap:7px;align-items:baseline;}
    #eguru-app .plan-feat .pf.chk::before{content:'\2713';color:var(--primary);font-weight:800;flex-shrink:0;}
    #eguru-app .plan-card.ultra .plan-feat .pf.chk::before{color:var(--ultra);}
    #eguru-app .plan-feat .pf.head{font-weight:700;color:var(--primary-dark);}
    #eguru-app .plan-card.ultra .plan-feat .pf.head{color:var(--ultra-dark);}
    #eguru-app .plan-feat .pf.muted{color:var(--text-light);}
    #eguru-app .plan-feat .pf.muted::before{content:'\2022';flex-shrink:0;}
    #eguru-app .plan-ai{display:inline-block;background:var(--ultra);color:#fff;font-size: var(--t4);font-weight:800;padding:1px 5px;border-radius: var(--radius-xs);flex-shrink:0;align-self:flex-start;}
    #eguru-app .plan-btn{margin-top:14px;width:100%;border:none;border-radius: var(--radius-sm);padding:10px;font-size: var(--t5);font-weight:700;cursor:pointer;}
    #eguru-app .plan-btn.free{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
    #eguru-app .plan-btn.pro{background:var(--primary);color:#fff;}
    #eguru-app .plan-btn.pro:hover{background:var(--primary-dark);}
    #eguru-app .plan-btn.ultra{background:var(--ultra-dark);color:#fff;}
    #eguru-app .plan-btn.ultra:hover{background:var(--ultra-deep);}
    /* ===== Status pelan + modal bayar (Fasa 14) ===== */
    #eguru-app .plan-card.current{box-shadow:0 0 0 2px var(--primary);}
    #eguru-app .plan-card.ultra.current{box-shadow:0 0 0 2px var(--ultra);}
    #eguru-app .plan-btn.is-current{background:var(--success,#059669)!important;color:#fff!important;cursor:default;}
    #eguru-app .plan-btn:disabled{opacity:.75;cursor:default;}
    #eguru-app .plan-notice{margin:2px 0 4px;padding:9px 12px;border-radius: var(--radius-md);font-size: var(--t4);line-height:1.45;background:#FEF9C3;color:#854D0E;border:1px solid #FDE68A;}
    #eguru-app .plan-notice.ok{background:#DCFCE7;color:#166534;border-color:#BBF7D0;}
    #eguru-app .plan-notice b{font-weight:800;}
    #eguru-app .ak-pill.plan{background:var(--ultra);color:#fff;}
    #eguru-app .bayar-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--border);border-radius: var(--radius-md);padding:12px 14px;margin-bottom: var(--sp-3);cursor:pointer;text-align:left;width:100%;background:var(--card-bg);}
    #eguru-app .bayar-opt:hover{border-color:var(--primary);}
    #eguru-app .bayar-opt .bo-l{display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
    #eguru-app .bayar-opt .bo-t{font-weight:800;color:var(--text);font-size: var(--t6);}
    #eguru-app .bayar-opt .bo-s{font-size: var(--t3);color:var(--text-muted);}
    #eguru-app .bayar-opt .bo-p{font-weight:800;color:var(--primary-dark);font-size: var(--t7);white-space:nowrap;}
    #eguru-app .bayar-opt .bo-save{display:inline-block;background:var(--success,#059669);color:#fff;font-size: var(--t1);font-weight:800;padding:2px 7px;border-radius: var(--radius-full);}
    /* Tahunan = pilihan utama: di atas, bingkai hijau, caj FPX ditanggung kami. */
    #eguru-app .bayar-opt.bo-utama{border-color:var(--primary);background:var(--success-light);box-shadow:0 0 0 1px var(--primary) inset;}
    #eguru-app .bayar-opt .bo-p small{display:block;font-size: var(--t2);font-weight:600;color:var(--text-muted);text-align:right;}
    /* ===== Lencana pelan topbar + accordion pelan + tooltip ciri (Fasa 14b) ===== */
    #eguru-app .topbar-plan{font-size: var(--t1);font-weight:800;padding:2px 7px;border-radius: var(--radius-full);cursor:pointer;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;}
    #eguru-app .topbar-plan.free{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
    #eguru-app .topbar-plan.pro{background:var(--primary);color:#fff;}
    #eguru-app .topbar-plan.ultra{background:var(--ultra-dark);color:#fff;}
    #eguru-app .plan-quick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px;}
    #eguru-app .pq-btn{flex:1;min-width:130px;border:none;border-radius: var(--radius-sm);padding:9px;font-size: var(--t5);font-weight:700;cursor:pointer;}
    #eguru-app .pq-btn.up{background:var(--primary);color:#fff;}
    #eguru-app .pq-btn.down{background:var(--bg);color:var(--text-muted);border:1px solid var(--border);}
    #eguru-app .plan-btn.is-soon{background:var(--bg)!important;color:var(--text-muted)!important;border:1px dashed var(--border)!important;cursor:default;}
    /* Pelan lebih rendah yang sudah termasuk dalam pelan berbayar aktif: kelihatan pasif
       (bukan tawaran), tetapi MASIH boleh ditekan — pilihPelan() menerangkan cara turun
       taraf yang betul. Lihat nota "BUKAN 'Turun ke Pro'" dalam sg_abm.js. */
    #eguru-app .plan-btn.is-included{background:var(--bg)!important;color:var(--text-muted)!important;border:1px solid var(--border)!important;cursor:help;}
    #eguru-app .pf-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--border);color:var(--text);font-size:11px;font-weight:800;cursor:help;margin-left:4px;position:relative;}
    /* Kawasan sentuh tersembunyi 34px supaya senang ditekan di telefon (ikon kekal kecil) */
    #eguru-app .pf-help::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;}
    #eguru-app .pf-help::after{content:attr(data-tip);position:absolute;bottom:150%;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:8px 11px;border-radius: var(--radius-sm);font-size:11.5px;font-weight:500;line-height:1.45;width:215px;max-width:62vw;text-align:left;white-space:normal;opacity:0;visibility:hidden;transition:opacity .15s;z-index:60;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.28);}
    #eguru-app .pf-help:hover::after,#eguru-app .pf-help:focus::after{opacity:1;visibility:visible;}
    /* ===== Nav badge ===== */
    #eguru-app .nav-item{position:relative;}
    #eguru-app .nav-badge{position:absolute;top:3px;right:10px;min-width:17px;height:17px;padding:0 4px;border-radius: var(--radius-full);background:var(--danger);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--card-bg);}
    /* ===== Akaun: kelas tertinggal ===== */
    #eguru-app .th-item{border:1px solid var(--border);border-left:3px solid var(--danger);border-radius: var(--radius-sm);padding:9px 11px;margin-bottom: var(--sp-3);font-size: var(--t5);}
    #eguru-app .th-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
    #eguru-app .th-del{background:#fff;border:1px solid var(--border);border-radius: var(--radius-xs);padding:3px 10px;font-size: var(--t6);cursor:pointer;color:var(--text-light);}
    #eguru-app .th-del:hover{border-color:var(--danger);color:var(--danger);}
    #eguru-app .th-meta{color:var(--text-light);font-size: var(--t6);margin-top:3px;}
    #eguru-app .th-sebab{margin-top:4px;color:#b91c1c;}
    #eguru-app .th-sksp{margin-top:4px;color:var(--text);line-height:1.5;}
    /* ===== Modal aktiviti ===== */
    #eguru-app #aktiviti-modal .ak-row{margin-bottom: var(--sp-3);}
    #eguru-app #aktiviti-modal .ak-lbl{font-size: var(--t3);font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);margin-bottom: var(--sp-1);}
    #eguru-app #aktiviti-modal .ak-val{font-size: var(--t6);line-height:1.5;background:var(--bg);border-radius: var(--radius-sm);padding:7px 10px;}
    #eguru-app #aktiviti-modal .ak-empty{font-size: var(--t6);color:var(--text-light);text-align:center;padding:14px;}
    /* Senarai bullet dalam modal lihat-butiran (Set Induksi/Aktiviti/Penutup/ABM) — kemas & mudah dibaca */
    #eguru-app #aktiviti-modal .ak-bullets{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
    #eguru-app #aktiviti-modal .ak-bullets li{font-size: var(--t6);line-height:1.5;background:var(--bg);border-radius: var(--radius-sm);padding:7px 10px 7px 26px;position:relative;}
    #eguru-app #aktiviti-modal .ak-bullets li::before{content:'';position:absolute;left:11px;top:13px;width:5px;height:5px;border-radius:50%;background:var(--primary);}
    #eguru-app #aktiviti-modal .ak-bullets li[dir="rtl"]{padding:7px 26px 7px 10px;}
    #eguru-app #aktiviti-modal .ak-bullets li[dir="rtl"]::before{left:auto;right:11px;}
    /* JAWI/ARAB DALAM BUTIRAN — DIBESARKAN.
       -----------------------------------------------------------------
       .ak-val dan .ak-bullets li mengunci --t6, dan pemilih itu (id +
       kelas) lebih khusus daripada peraturan umum `#eguru-app [dir="rtl"]`
       yang menetapkan --t8 untuk teks RTL. Jadi tulisan Jawi di sini
       keluar pada saiz Rumi — dan glyph Naskh memang kelihatan ~20% lebih
       kecil pada saiz nominal yang sama, dengan baris yang rapat. Guru
       membaca ini sambil berdiri di hadapan kelas.
       Hanya blok RTL dinaikkan; Rumi kekal --t6. Tiada font-family
       ditambah — timbunan fon Jawi sudah betul pada #eguru-app * dan
       [dir="rtl"] (lihat doktrin fon Jawi di atas). */
    #eguru-app #aktiviti-modal .ak-val[dir="rtl"],
    #eguru-app #aktiviti-modal .ak-bullets li[dir="rtl"]{font-size: var(--t9);line-height:2;}
    /* Standard Prestasi: SK sebagai kepala kecil, kemudian TP1–TP6. */
    #eguru-app #aktiviti-modal .ak-spi-sk{font-size: var(--t5);font-weight:700;color:var(--text);background:var(--bg);border-radius: var(--radius-sm);padding:6px 10px;margin-bottom:4px;}
    #eguru-app #aktiviti-modal .ak-spi-sk[dir="rtl"]{font-size: var(--t8);line-height:1.9;}
    #eguru-app #aktiviti-modal .ak-bullets.ak-spi li{padding-left:30px;}
    #eguru-app #aktiviti-modal .ak-bullets.ak-spi li[dir="rtl"]{padding:7px 30px 7px 10px;}
    #eguru-app #aktiviti-modal .ak-bullets.ak-spi li::before{display:none;}
    #eguru-app #aktiviti-modal .ak-bullets.ak-spi li b{color:var(--primary-dark);margin-right:6px;}
    #eguru-app #aktiviti-modal .ak-bullets.ak-spi li[dir="rtl"] b{margin-right:0;margin-left:6px;}
    /* Banner mesra "jadual esok" di Halaman Utama */
    #eguru-app .today-esok{display:flex;align-items:flex-start;gap:8px;background:linear-gradient(135deg,#eef2ff,#faf5ff);border:1px solid rgba(109,40,217,.18);border-radius: var(--radius-md);padding:10px 12px;margin-bottom: var(--sp-3);font-size: var(--t5);line-height:1.5;color:var(--text);}
    #eguru-app .today-esok svg.gi{flex:0 0 auto;fill:var(--ultra-dark);margin-top:2px;}
    #eguru-app .today-esok b{color:var(--ultra-dark);}

    #eguru-app .am-baris{display:flex;align-items:flex-start;gap:9px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:6px;font-size:var(--t4);background:var(--card-bg);cursor:pointer;}
    #eguru-app .ejen-kad{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#f5f3ff,#eef2ff);border:1px solid rgba(109,40,217,.22);border-radius:var(--radius-md);padding:11px 13px;margin-bottom:var(--sp-3);font-size:var(--t5);}
    #eguru-app .ejen-teks{flex:1;min-width:200px;}
    /* ===== .form-row — susun atur borang yang dikongsi semua halaman =====
       Kelas ini digunakan 80+ kali tetapi TIDAK PERNAH ditakrif, jadi setiap
       medan bertindan tanpa jurang dan setiap butang meregang penuh lalu
       bersentuhan. Ia sudah wujud sebagai no-op dalam versi lama (4 tempat)
       sebelum modul baharu menyebarkannya.

       Kelakuan: bersebelahan pada skrin lebar, bertindan pada telefon
       (flex-wrap + asas 220px), dengan jurang seragam --sp-3. */
    #eguru-app .form-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3); align-items: flex-start; }
    #eguru-app .form-row > * { flex: 1 1 220px; min-width: 0; }
    /* Butang yang BERKONGSI baris dengan medan lain tidak patut meregang —
       ia hanya perlu selebar teksnya. Butang yang bersendirian kekal penuh
       supaya ia jadi sasaran sentuh besar di telefon. */
    #eguru-app .form-row > .btn { flex: 0 1 auto; width: auto !important; }
    #eguru-app .form-row > .btn:only-child { flex: 1 1 100%; width: 100% !important; }
    /* Medan berlabel (cth kotak nisbah JSU) — label di atas, medan di bawah. */
    #eguru-app .form-row > label { display: flex; flex-direction: column; gap: 4px; }
    #eguru-app .form-row > label > .form-control { width: 100% !important; }

    /* Medan & label yang berdiri SENDIRI di luar .form-row juga perlu jarak,
       kerana .form-control sendiri tiada margin. */
    #eguru-app .view > .card > .form-control,
    #eguru-app .view > .card > textarea.form-control { margin-bottom: var(--sp-3); }
    #eguru-app .view > .card > label + .form-control,
    #eguru-app .view > .card > label + textarea { margin-bottom: var(--sp-3); }
    /* Butang bersendirian terus di dalam kad (bukan dalam .form-row). */
    #eguru-app .view > .card > .btn { margin-bottom: var(--sp-3); }
    /* Tajuk seksyen perlu ruang di ATASnya bila ia mengikuti kandungan. */
    #eguru-app .view .form-section-title { margin-top: var(--sp-5); }
    #eguru-app .view .card > .form-section-title:first-child { margin-top: 0; }

    /* ===== Modul fasa Taksir & alat AI (JSU / Exam / Aktiviti / Prompt / Jadual) ===== */
    #eguru-app .nota-kotak{background:linear-gradient(135deg,#eff6ff,#faf5ff);border:1px solid rgba(59,130,246,.25);border-radius:var(--radius-md);padding:11px 13px;margin-bottom:var(--sp-3);font-size:var(--t5);line-height:1.55;color:var(--text);}
    #eguru-app .jsu-tbl{width:100%;border-collapse:collapse;font-size:var(--t4);}
    #eguru-app .jsu-tbl th,#eguru-app .jsu-tbl td{border:1px solid var(--border);padding:5px 6px;text-align:left;vertical-align:top;}
    #eguru-app .jsu-tbl th{background:var(--bg);font-weight:700;white-space:nowrap;}
    #eguru-app .jsu-tbl .form-control{padding:4px 6px;font-size:var(--t4);min-width:90px;}
    #eguru-app .jsu-ringkas-kad{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;font-size:var(--t4);}
    #eguru-app .jsu-item{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 12px;margin-bottom:7px;background:var(--card-bg);}
    #eguru-app .jsu-nis{display:flex;flex-direction:column;gap:3px;font-size:var(--t4);font-weight:600;}
    #eguru-app .bs-item{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 11px;margin-bottom:7px;background:var(--card-bg);}
    #eguru-app .bs-pick{flex:0 0 auto;padding-top:2px;}
    #eguru-app .bs-isi{flex:1;min-width:0;font-size:var(--t4);line-height:1.5;word-break:break-word;}
    #eguru-app .bs-tag{display:inline-block;font-size:var(--t3);font-weight:700;background:var(--bg);color:var(--text-muted);padding:1px 7px;border-radius:var(--radius-full);margin-left:4px;}
    #eguru-app .bs-tag-kbat{background:rgba(109,40,217,.12);color:var(--ultra-dark);}
    /* ===== Studio Konten (Tools, #view-promptgen) — 2026-09-24 ===== */
    #eguru-app .studio-tugas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:var(--sp-3);}
    @media(min-width:760px){#eguru-app .studio-tugas-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
    #eguru-app .studio-tugas{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;padding:10px 11px;border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);color:var(--text);cursor:pointer;transition:border-color .15s ease;}
    #eguru-app .studio-tugas:hover{border-color:var(--primary);}
    #eguru-app .studio-tugas.aktif{border-color:var(--ultra-dark);background:rgba(109,40,217,.06);}
    #eguru-app .studio-tugas-ikon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-md);background:var(--bg,rgba(0,0,0,.04));color:var(--text-muted);transition:color .15s ease,background .15s ease;}
    #eguru-app .studio-tugas-ikon svg{width:20px;height:20px;fill:currentColor;}
    #eguru-app .studio-tugas:hover .studio-tugas-ikon{color:var(--primary);}
    #eguru-app .studio-tugas.aktif .studio-tugas-ikon{color:var(--ultra-dark);background:rgba(109,40,217,.12);}
    #eguru-app .studio-tugas-teks{display:flex;flex-direction:column;min-width:0;}
    #eguru-app .studio-tugas-teks b{font-size:var(--t5);font-weight:700;}
    #eguru-app .studio-tugas-teks small{font-size:var(--t3);color:var(--text-muted);line-height:1.3;}
    #eguru-app .studio-medan{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:var(--sp-3);}
    #eguru-app .studio-f{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:var(--t4);font-weight:600;color:var(--text);}
    #eguru-app .studio-f > span{color:var(--text-muted);}
    #eguru-app .studio-f-penuh{margin-bottom:var(--sp-3);}
    #eguru-app .studio-cek{display:flex;align-items:center;gap:8px;font-size:var(--t4);color:var(--text);cursor:pointer;}
    #eguru-app .studio-cek input:disabled{cursor:not-allowed;}
    #eguru-app .studio-jenama-nota{display:block;margin:2px 0 0 24px;}
    #eguru-app .studio-jenama-nota[hidden]{display:none;}
    #eguru-app .studio-avatar{margin-top:10px;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg);}
    #eguru-app .studio-avatar[hidden],#eguru-app .studio-profil[hidden],#eguru-app #studio-profil-isi[hidden]{display:none;}
    #eguru-app .studio-avatar-kepala{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px;font-size:var(--t4);}
    #eguru-app .studio-avatar-kepala .help-hint{margin:0;}
    #eguru-app .studio-profil{margin-top:8px;}
    #eguru-app #studio-profil-isi{margin-top:8px;}
    #eguru-app .studio-sp-kepala{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:var(--t4);font-weight:600;color:var(--text-muted);margin-bottom:6px;}
    #eguru-app .studio-sp-kepala #studio-sp-bil{font-weight:400;}
    #eguru-app .studio-sp-amaran{color:var(--danger);}
    #eguru-app .studio-sp{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3);}
    #eguru-app .studio-sp-item{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);font-size:var(--t4);line-height:1.5;cursor:pointer;}
    #eguru-app .studio-sp-item input{flex:0 0 auto;margin-top:3px;}
    #eguru-app .studio-blok{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card-bg);padding:11px 13px;margin-bottom:10px;}
    #eguru-app .studio-blok-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:var(--t5);}
    #eguru-app .studio-blok-btn{display:flex;gap:6px;flex-wrap:wrap;}
    #eguru-app textarea.form-control.studio-teks{min-height:280px;font-size:var(--t4);line-height:1.5;white-space:pre-wrap;}
    #eguru-app .studio-fakta{background:var(--bg);}
    #eguru-app .studio-fakta-baris{display:flex;gap:8px;font-size:var(--t4);line-height:1.5;padding:2px 0;}
    #eguru-app .studio-fakta-baris > span{flex:0 0 auto;font-size:var(--t3);font-weight:700;color:var(--text-muted);padding-top:2px;min-width:22px;}
    #eguru-app .studio-fakta-isi{flex:1 1 auto;min-width:0;}
    #eguru-app .studio-fakta-isi [dir=rtl]{text-align:right;}
    #eguru-app .studio-aras{display:block;font-size:var(--t3);color:var(--text-muted);}
    #eguru-app .studio-spi{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
    #eguru-app .studio-spi-tajuk{font-size:var(--t4);font-weight:700;margin-bottom:6px;}
    #eguru-app .studio-spi table{width:100%;border-collapse:collapse;font-size:var(--t4);line-height:1.45;}
    #eguru-app .studio-spi th,#eguru-app .studio-spi td{border:1px solid var(--border);padding:5px 8px;text-align:left;vertical-align:top;overflow-wrap:anywhere;}
    #eguru-app .studio-spi th{background:var(--card-bg);font-size:var(--t3);}
    #eguru-app .studio-spi td:first-child,#eguru-app .studio-spi th:first-child{white-space:nowrap;font-weight:600;width:1%;}
    #eguru-app .studio-baris{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--border);}
    #eguru-app .studio-blok .btn{white-space:nowrap;flex-shrink:0;}
    #eguru-app .studio-baris:first-of-type{border-top:0;}
    #eguru-app .studio-baris-isi{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--t4);line-height:1.45;}
    #eguru-app .studio-hashtag{font-size:var(--t4);word-break:break-word;}
    #eguru-app .studio-baiki summary{cursor:pointer;font-size:var(--t5);}
    #eguru-app .studio-baiki[open] summary{margin-bottom:6px;}
    #eguru-app .studio-semak ul{margin:6px 0 0;padding-left:18px;}
    #eguru-app .studio-langkah{margin:0;padding-left:20px;font-size:var(--t4);line-height:1.55;}
    #eguru-app .studio-langkah li + li{margin-top:3px;}
    #eguru-app .studio-alat-nota{font-weight:400;font-size:var(--t3);color:var(--text-muted);line-height:1.4;}
    /* Dalil sahih: teks Arab ~1.35x kerana glyph Naskh (Scheherazade) lebih kecil pada saiz yang sama */
    #eguru-app .studio-dalil-item{padding:9px 0;border-top:1px solid var(--border);}
    #eguru-app .studio-dalil-item:first-of-type{border-top:0;padding-top:0;}
    #eguru-app .studio-dalil-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
    #eguru-app .studio-dalil-ruj{font-size:var(--t4);font-weight:700;color:var(--ultra-dark);min-width:0;}
    #eguru-app .studio-dalil-teks{text-align:right;font-size:calc(var(--t5) * 1.35);line-height:2.1;color:var(--text);word-break:normal;overflow-wrap:anywhere;}
    @media(max-width:600px){#eguru-app .studio-baris{flex-direction:column;align-items:stretch;}#eguru-app .studio-baris .btn{align-self:flex-start;}}
    /* ===== Modul ABM & BBM ===== */
    #eguru-app .abm-jenis-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom: var(--sp-2);}
    @media(min-width:640px){#eguru-app .abm-jenis-grid{grid-template-columns:1fr 1fr;}}
    #eguru-app .abm-jenis-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1.5px solid var(--border);border-radius: var(--radius-md);cursor:pointer;font-size: var(--t5);background:var(--card-bg);transition:border-color .15s,background .15s;}
    #eguru-app .abm-jenis-item.on{border-color:var(--ultra-dark);background:rgba(109,40,217,.06);}
    #eguru-app .abm-jenis-item.dim{opacity:.5;}
    #eguru-app .abm-jenis-item input{width:17px;height:17px;accent-color:var(--ultra-dark);flex-shrink:0;margin:0;}
    #eguru-app .abm-jenis-item.abm-auto{grid-column:1/-1;border-color:var(--ultra);background:rgba(147,51,234,.07);font-weight:700;}
    #eguru-app .abm-jenis-lbl{min-width:0;}
    /* Penukar Jawi (Tools) */
    #eguru-app .jw-arah{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--radius-full);overflow:hidden;margin-bottom:10px;}
    #eguru-app .jw-arah button{border:0;background:var(--card-bg);color:var(--text-muted);font-weight:700;font-size:var(--t4);padding:7px 16px;cursor:pointer;}
    #eguru-app .jw-arah button.active{background:var(--primary);color:#fff;}
    #eguru-app .jw-kotak{border:1px solid var(--border);border-inline-start:3px solid var(--primary);background:var(--bg);border-radius:var(--radius-sm);padding:9px 12px;}
    #eguru-app .jw-kotak-lbl{font-size:var(--t2);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
    #eguru-app .jw-keluar{margin:0;font-size:1.2rem;line-height:2.1;white-space:pre-wrap;overflow-wrap:anywhere;}
    #eguru-app .jw-keluar[dir=rtl]{font-size:1.35rem;}
    #eguru-app .jw-cip-baris{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
    #eguru-app .jw-cip{font-size:var(--t3);font-weight:700;padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--border);}
    #eguru-app .jw-cip.kosong{opacity:.45;}
    #eguru-app .jw-cip.jw-kamus,#eguru-app .jw-aras.jw-kamus{background:var(--success-light);color:var(--primary-dark);border-color:rgba(5,150,105,.3);}
    #eguru-app .jw-cip.jw-imbuhan,#eguru-app .jw-aras.jw-imbuhan{background:rgba(37,99,235,.10);color:var(--info-text,#1d4ed8);border-color:rgba(37,99,235,.28);}
    #eguru-app .jw-cip.jw-peraturan,#eguru-app .jw-aras.jw-peraturan{background:var(--accent-light);color:var(--accent-text,#92400e);border-color:rgba(245,158,11,.35);}
    /* KAMUS TERBUKA (MIT + Wikidata) — warna SENDIRI, bukan hijau "kamus".
       Hijau di sini bermaksud "dokumen KPM menyokong ejaan ini", dan itu satu
       dakwaan yang kamus terbuka tidak boleh buat. Ungu: bukan amaran (ejaannya
       biasanya betul), tetapi jelas BUKAN hijau. */
    #eguru-app .jw-cip.jw-luar,#eguru-app .jw-aras.jw-luar{background:rgba(124,58,237,.10);color:#6d28d9;border-color:rgba(124,58,237,.28);}
    #eguru-app.dark-theme .jw-cip.jw-luar,#eguru-app.dark-theme .jw-aras.jw-luar{color:#c4b5fd;}
    #eguru-app .jw-aras{font-size:var(--t2);font-weight:800;padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap;}
    #eguru-app .jw-jadual td.jw-ar{font-size:1.15rem;line-height:1.9;}
    #eguru-app .jw-jadual tr.jw-r-peraturan td{background:rgba(245,158,11,.06);}
    #eguru-app .jw-jadual tr.jw-r-luar td{background:rgba(124,58,237,.05);}
    /* Sumber bilik darjah (ABM/BBM) — kotak semak dalam modal Jana Kandungan RPH.
       Guna semula geometri .abm-jenis-* supaya dua senarai kotak semak dalam app
       ini kelihatan serupa; hanya tajuk kumpulan & contoh barangan ditambah. */
    #eguru-app .sk-grup{grid-column:1/-1;font-size:var(--t3);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin:4px 0 -2px;}
    #eguru-app .sk-eg{display:block;font-size:var(--t2);color:var(--text-muted);font-weight:400;line-height:1.35;margin-top:2px;}
    #eguru-app .sk-tag{font-style:normal;font-size:var(--t2);font-weight:800;background:var(--success-light);color:var(--primary-dark);padding:1px 7px;border-radius:var(--radius-full);margin-left:6px;white-space:nowrap;}
    #eguru-app .abm-jenis-item{align-items:flex-start;}
    #eguru-app .abm-jenis-item input{margin-top:2px;}
    /* Bar MOD UJI MINGGU — admin sahaja (halaman RPH). Sengaja berjalur & terang:
       selagi ia kelihatan, seluruh app sedang bercakap tentang minggu palsu. */
    #eguru-app .mock-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;border:1.5px dashed var(--ultra-dark);background:rgba(109,40,217,.06);border-radius:var(--radius-md);padding:9px 12px;margin-bottom:var(--sp-4);font-size:var(--t4);}
    #eguru-app .mock-bar.aktif{border-style:solid;border-color:var(--accent);background:rgba(245,158,11,.12);}
    #eguru-app .mock-pill{font-weight:800;font-size:var(--t3);padding:2px 9px;border-radius:var(--radius-full);background:var(--primary);color:#fff;letter-spacing:.03em;}
    #eguru-app .mock-bar.aktif .mock-pill{background:var(--accent);color:#3B2F00;}
    #eguru-app .mock-bar select{width:auto;min-width:150px;padding:5px 9px;font-size:var(--t4);}
    #eguru-app .mock-bar .mock-nota{flex-basis:100%;font-size:var(--t2);color:var(--text-muted);line-height:1.4;margin:0;}
    #eguru-app .abm-day{margin-bottom: var(--sp-4);}
    #eguru-app .abm-day-h{font-size: var(--t4);font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--primary-dark);margin:0 0 7px;padding-bottom:4px;border-bottom:2px solid var(--border);}
    #eguru-app .abm-kelas{display:block;width:100%;text-align:left;background:var(--card-bg);border:1px solid var(--border);border-radius: var(--radius-md);padding:10px 12px;margin-bottom: var(--sp-3);cursor:pointer;transition:box-shadow .15s,transform .1s;}
    #eguru-app .abm-kelas:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);}
    #eguru-app .abm-kelas-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
    #eguru-app .abm-kelas-masa{font-size: var(--t4);font-weight:700;color:var(--text-light);}
    #eguru-app .abm-kelas-nama{font-size: var(--t6);font-weight:700;color:var(--text);flex:1;min-width:90px;}
    #eguru-app .abm-badge{font-size: var(--t2);font-weight:800;padding:2px 8px;border-radius: var(--radius-full);text-transform:uppercase;letter-spacing:.3px;}
    #eguru-app .abm-badge.ok{background:rgba(5,150,105,.14);color:var(--success);}
    #eguru-app .abm-badge.todo{background:rgba(245,158,11,.16);color:var(--accent);}
    #eguru-app .abm-badge.none{background:var(--bg);color:var(--text-light);}
    #eguru-app .abm-kelas-tajuk{font-size: var(--t5);color:var(--text-light);margin-top:5px;line-height:1.4;}
    #eguru-app .abm-akt-box{background:var(--bg);border-radius: var(--radius-md);padding:11px 12px;}
    #eguru-app .abm-sec-title{font-size: var(--t3);font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);margin-bottom: var(--sp-2);}
    #eguru-app #abm-modal-akt .ak-row{margin-bottom: var(--sp-3);}
    #eguru-app #abm-modal-akt .ak-row:last-child{margin-bottom:0;}
    #eguru-app #abm-modal-akt .ak-lbl{font-size: var(--t3);font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);margin-bottom: var(--sp-1);}
    #eguru-app #abm-modal-akt .ak-val{font-size: var(--t6);line-height:1.5;background:var(--card-bg);border-radius: var(--radius-sm);padding:7px 10px;}
    #eguru-app #abm-modal-akt .ak-empty{font-size: var(--t5);color:var(--text-light);text-align:center;padding:12px;}
    #eguru-app .today-tajuk + .today-tajuk{margin-top:5px;}


/* ===== BLOK 3: Komuniti Guru (asal baris 5686-5762) ===== */
        /* ===== KOMUNITI GURU (Fasa 19) ===== */
        #view-komuniti .km-sub { color:var(--text-muted); font-size:var(--t6); margin:-6px 0 14px; }
        #view-komuniti .km-support-hero { display:flex; gap:14px; align-items:flex-start; background:var(--gradient-bg); color:#fff; border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:var(--sp-4); box-shadow:var(--shadow); }
        #view-komuniti .kmh-ic { width:44px; height:44px; border-radius:var(--radius-md); background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        #view-komuniti .kmh-ic svg { width:24px; height:24px; fill:#fff; }
        #view-komuniti .kmh-t { min-width:0; }
        #view-komuniti .kmh-t h3 { font-size:var(--t8); font-weight:800; margin-bottom:3px; }
        #view-komuniti .kmh-t p { font-size:var(--t5); line-height:1.5; opacity:.92; }
        #view-komuniti .kmh-links { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:var(--t4); font-weight:700; }
        #view-komuniti .kmh-links a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
        /* flex-basis auto + wrap: dengan 'flex:1 1 0' keempat-empat cip dipaksa sama lebar,
           jadi pada skrin 360px label "Pengalaman" terpotong di tengah perkataan (ellipsis
           tak berfungsi pada kotak inline-flex). Kini setiap cip mengikut lebar teksnya dan
           baris berpindah ke bawah jika saiz teks dibesarkan. */
        #view-komuniti .km-cat-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom: var(--sp-3); }
        #view-komuniti .km-cat { flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 6px; border-radius:var(--radius-full); border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:var(--t4); font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .15s; }
        #view-komuniti .km-cat .km-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
        #view-komuniti .km-cat.active { color:#fff; border-color:transparent; }
        #view-komuniti .km-cat.active .km-dot { background:#fff; }
        #view-komuniti .km-cat[data-k="tutorial"].active { background:var(--ultra); }
        #view-komuniti .km-cat[data-k="pengalaman"].active { background:var(--primary); }
        #view-komuniti .km-cat[data-k="cadangan"].active { background:var(--accent); }
        #view-komuniti .km-cat[data-k="bug"].active { background:var(--danger); }
        #view-komuniti .km-cat[data-k="updates"].active { background:var(--info); }
        .km-dot-tutorial{background:var(--ultra);} .km-dot-pengalaman{background:var(--primary);} .km-dot-cadangan{background:var(--accent);} .km-dot-bug{background:var(--danger);} .km-dot-updates{background:var(--info);}
        #eguru-app .km-verified{width:15px;height:15px;fill:var(--info);vertical-align:-3px;margin-left:3px;}
        #eguru-app .km-admin-tag{display:inline-block;font-size:var(--t1);font-weight:700;background:var(--info);color:#fff;padding:1px 6px;border-radius: var(--radius-sm);margin-left:5px;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px;}
        #eguru-app .km-ai-tag{display:inline-block;font-size:var(--t1);font-weight:700;background:#0d9488;color:#fff;padding:1px 6px;border-radius: var(--radius-sm);margin-left:5px;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px;}
        #view-komuniti .km-composer textarea { width:100%; min-height:72px; resize:vertical; }
        #view-komuniti .km-anon { display:inline-flex; align-items:center; gap:8px; font-size:var(--t6); color:var(--text-muted); margin:8px 0; cursor:pointer; }
        #view-komuniti .km-composer-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
        #view-komuniti .km-tier-note { font-size:var(--t5); color:var(--text); background:var(--accent-light); padding:8px 10px; border-radius:var(--radius-sm); margin-top:8px; }
        #eguru-app .km-filter { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; align-items:center; margin:16px 0 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
        #eguru-app .km-filter::-webkit-scrollbar { display:none; }
        #eguru-app .km-chip { flex-shrink:0; white-space:nowrap; padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--card-bg); font-size:var(--t5); cursor:pointer; color:var(--text-muted); }
        #eguru-app .km-chip.active { background:var(--primary); color:#fff; border-color:transparent; }
        /* Baris "Susun" — di luar penatal chip supaya sentiasa kelihatan di telefon. */
        #view-komuniti .km-sort-row { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 12px; }
        #view-komuniti .km-sort-row label { font-size:var(--t4); font-weight:600; color:var(--text-muted); }
        /* !important perlu — .form-control menetapkan width:100% !important. */
        #view-komuniti .km-sort { flex:0 0 auto; width:auto !important; min-width:140px; }
        #eguru-app .km-post { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom: var(--sp-4); box-shadow:var(--shadow-sm); }
        #eguru-app .km-post-top { display:flex; align-items:center; gap:10px; margin-bottom: var(--sp-3); }
        #eguru-app .km-ava { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; flex-shrink:0; }
        #eguru-app .km-post-who { font-weight:600; font-size:var(--t6); color:var(--text); }
        #eguru-app .km-post-meta { font-size:var(--t4); color:var(--text-light); }
        #eguru-app .km-badge { display:inline-block; font-size:var(--t2); font-weight:700; padding:3px 9px; border-radius: var(--radius-md); color:#fff; text-transform:uppercase; letter-spacing:.02em; }
        #eguru-app .km-badge-tutorial{background:var(--ultra);} #eguru-app .km-badge-curhat{background:var(--ultra);} #eguru-app .km-badge-pengalaman{background:var(--primary);} #eguru-app .km-badge-cadangan{background:var(--accent);} #eguru-app .km-badge-bug{background:var(--danger);} #eguru-app .km-badge-updates{background:var(--info);}
        #eguru-app .km-status { display:inline-block; font-size:var(--t2); font-weight:700; padding:3px 9px; border-radius: var(--radius-md); border:1px solid var(--border); color:var(--text-muted); }
        #eguru-app .km-body { font-size:var(--t7); line-height:1.6; white-space:pre-wrap; word-break:break-word; color:var(--text); margin-top:10px; }
        #eguru-app .km-actions { display:flex; gap:6px; margin-top:14px; border-top:1px solid var(--border); padding-top:10px; }
        #eguru-app .km-act { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:none; background:transparent; color:var(--text-muted); font-size:var(--t5); font-weight:600; cursor:pointer; border-radius:var(--radius-sm); }
        #eguru-app .km-act:hover { background:var(--bg); }
        #eguru-app .km-act.on { color:var(--danger); }
        #eguru-app .km-act svg { width:18px; height:18px; fill:currentColor; }
        #eguru-app .km-menu-btn { margin-left:auto; background:transparent; border:none; color:var(--text-light); cursor:pointer; font-size:var(--t7); padding:2px 6px; border-radius: var(--radius-xs); }
        #eguru-app .km-menu-btn:hover { background:var(--bg); }
        #eguru-app .km-empty { text-align:center; color:var(--text-muted); padding:40px 16px; }
        /* Modal post + komen */
        /* z-index 99000 (bukan 100000): .modal-overlay guna 100000 !important — kalau sama,
           modal log masuk yang dibuka dari dalam kiriman terpapar DI BAWAH modal ini. Masih
           di atas .nav-pop (9000) & .bottom-nav (100). */
        #eguru-app .km-modal { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; z-index:99000; backdrop-filter:blur(4px); }
        /* Saiz & kedudukan: lihat "MODAL: SATU SAIZ UNTUK SEMUA" dalam <style> utama. */
        #eguru-app .km-modal-sheet { background:var(--card-bg); padding:24px 20px 32px; overflow-y:auto; position:relative; box-shadow:var(--shadow-lg); }
        #eguru-app .km-modal-x { position:absolute; top:8px; right:12px; background:transparent; border:none; font-size:1.7rem; line-height:1; cursor:pointer; color:var(--text-light); }
        #eguru-app .km-cmt { display:flex; gap:8px; padding:10px 0; border-top:1px solid var(--border); }
        #eguru-app .km-cmt-body { flex:1; }
        #eguru-app .km-cmt-who { font-weight:600; font-size:var(--t5); color:var(--text); }
        #eguru-app .km-cmt.admin .km-cmt-who { color:var(--primary); }
        #eguru-app .km-cmt-text { font-size:var(--t6); line-height:1.5; white-space:pre-wrap; word-break:break-word; color:var(--text); margin-top:2px; }
        #eguru-app .km-cmt-composer { margin-top:14px; padding-top:12px; border-top:2px solid var(--border); }
        #eguru-app .km-admin-item { border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:12px; margin-bottom: var(--sp-3); }
        #eguru-app .km-admin-item .txt { font-size:var(--t6); color:var(--text); white-space:pre-wrap; word-break:break-word; margin:6px 0; }
        #eguru-app .km-admin-item .meta { font-size:var(--t4); color:var(--text-muted); line-height:1.5; }
        #eguru-app .km-admin-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
        #eguru-app .km-admin-row select { width:auto; padding:5px 8px; }


/* ===== BLOK 4: Kedai (asal baris 7461-7527) ===== */
        #view-kedai .kd-hero { position:relative; overflow:hidden; background:var(--gradient-bg); color:#fff; border-radius:var(--radius-lg); padding:20px 20px 18px; margin-bottom:var(--sp-4); box-shadow:var(--shadow-lg); }
        #view-kedai .kd-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); }
        #view-kedai .kd-eyebrow { display:inline-block; font-size:var(--t2); font-weight:800; letter-spacing:1.2px; text-transform:uppercase; background:rgba(255,255,255,.16); padding:3px 10px; border-radius:var(--radius-full); margin-bottom:var(--sp-2); }
        #view-kedai .kd-hero h2 { font-size:var(--t9); font-weight:800; line-height:1.2; margin-bottom:var(--sp-1); position:relative; z-index:1; }
        #view-kedai .kd-hero p { font-size:var(--t5); line-height:1.55; opacity:.92; position:relative; z-index:1; }
        #view-kedai .kd-trust { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:var(--t3); font-weight:700; position:relative; z-index:1; }
        #view-kedai .kd-trust span { display:inline-flex; align-items:center; gap:5px; }
        #view-kedai .kd-trust svg { width:14px; height:14px; fill:currentColor; }
        #view-kedai .kd-tabs { display:flex; gap:4px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px; margin-bottom:var(--sp-3); box-shadow:var(--shadow-sm); }
        #view-kedai .kd-tab { flex:1; border:none; background:transparent; padding:9px 10px; border-radius:var(--radius-sm); font-size:var(--t5); font-weight:700; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
        #view-kedai .kd-tab.active { background:rgba(5,150,105,.1); color:var(--primary-text); }
        #view-kedai .kd-tab .kd-n { background:var(--primary); color:#fff; font-size:var(--t1); border-radius:var(--radius-full); padding:1px 7px; }
        #view-kedai .kd-alat { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-4); }
        #view-kedai .kd-chips { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; flex:1 1 auto; min-width:0; }
        #view-kedai .kd-chips::-webkit-scrollbar { display:none; }
        #view-kedai .kd-chip { flex-shrink:0; white-space:nowrap; padding:7px 13px; border-radius:var(--radius-full); border:1px solid var(--border); background:var(--card-bg); font-size:var(--t4); font-weight:600; color:var(--text-muted); cursor:pointer; }
        #view-kedai .kd-chip.active { background:var(--primary); border-color:transparent; color:#fff; }
        #view-kedai .kd-cari { flex:0 1 220px; min-width:150px; }
        /* 2026-10-03: kad min 340px (≈280px kelihatan — #eguru-app di-zoom 0.82 di desktop; dahulu 168px → 8 lajur sempit). Kini 5 lajur di 1920px,
           4 di 1600px, 3 di 1200px/tablet, 2 di telefon. */
        #view-kedai .kd-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--sp-4); }
        /* 2026-10: sama seperti /kedai/ — 3 lajur tablet, 4 desktop, 5 laptop lebar, 6 skrin besar; kulit 1:1. */
        @media (min-width:641px) { #view-kedai .kd-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
        @media (min-width:1024px) { #view-kedai .kd-grid { grid-template-columns:repeat(5, minmax(0,1fr)); } }   /* 30 produk = baris rata */
        @media (min-width:1280px) { #view-kedai .kd-grid { grid-template-columns:repeat(5, minmax(0,1fr)); } }
        @media (min-width:1800px) { #view-kedai .kd-grid { grid-template-columns:repeat(6, minmax(0,1fr)); } }
        #view-kedai .kd-cover { aspect-ratio:1/1; }
        #view-kedai .kd-harga small { font-size:var(--t2); font-weight:600; color:var(--text-light); }
        #view-kedai a.kd-chip { text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
        #view-kedai a.kd-chip:hover { border-color:var(--primary); color:var(--text); }
        #view-kedai .kd-chip-n { font-size:var(--t2); font-weight:700; color:var(--text-light); }
        #view-kedai .kd-promo { position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:var(--sp-3); border-radius:var(--radius-md); background:var(--gradient-bg); color:#fff; text-decoration:none; box-shadow:0 8px 22px rgba(4,120,87,.22); }
        #view-kedai .kd-promo::after { content:""; position:absolute; right:-40px; bottom:-60px; width:150px; height:150px; border-radius:50%; border:22px solid rgba(255,255,255,.08); }
        #view-kedai .kd-promo:hover { filter:brightness(1.06); }
        #view-kedai .kd-promo-l { font-size:var(--t1); font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#FBBF24; color:#78350F; padding:2px 8px; border-radius:var(--radius-full); }
        #view-kedai .kd-promo-t { flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
        #view-kedai .kd-promo-t b { font-size:var(--t7); font-weight:800; }
        #view-kedai .kd-promo-t span { font-size:var(--t4); opacity:.92; }
        #view-kedai .kd-promo-cta { display:inline-flex; align-items:center; gap:2px; font-weight:700; font-size:var(--t5); position:relative; z-index:1; white-space:nowrap; }
        #view-kedai .kd-promo-cta svg { width:18px; height:18px; fill:currentColor; }
        @media (max-width:640px) { #view-kedai .kd-promo { padding:12px 14px; gap:8px 10px; } #view-kedai .kd-promo-t span { display:none; } #view-kedai .kd-promo-cta { margin-left:auto; font-size:var(--t4); } }
        @media (max-width:640px) { #view-kedai .kd-grid { grid-template-columns:1fr 1fr; gap:8px; } }
        /* 2026-10-03: bar carian ganti hero — gaya kad app (latar kad, sempadan, radius penuh). */
        #view-kedai .kd-bar { display:flex; gap:var(--sp-3); align-items:center; margin-bottom:var(--sp-4); }
        #view-kedai .kd-bar-cari { flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-full); padding:0 16px; box-shadow:var(--shadow-sm); transition:border-color .15s; }
        #view-kedai .kd-bar-cari:focus-within { border-color:var(--primary); }
        #view-kedai .kd-bar-cari svg { width:20px; height:20px; fill:var(--primary-text); flex-shrink:0; }
        #view-kedai .kd-bar-cari input { flex:1; min-width:0; border:0; outline:0; background:transparent; padding:12px 0; font-size:var(--t6); color:var(--text); }
        #view-kedai .kd-bar-semua { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; height:44px; padding:0 10px 0 16px; border-radius:var(--radius-full); background:var(--card-bg); border:1px solid var(--border); color:var(--primary-text); font-weight:700; font-size:var(--t5); text-decoration:none; box-shadow:var(--shadow-sm); }
        #view-kedai .kd-bar-semua svg { width:18px; height:18px; fill:currentColor; }
        #view-kedai .kd-bar-semua:hover { border-color:var(--primary); }
        @media (max-width:640px) { #view-kedai .kd-bar-semua { padding:0 12px; font-size:0; gap:0; } #view-kedai .kd-bar-semua svg { width:22px; height:22px; } #view-kedai .kd-bar-cari input { font-size:16px; } }
        #view-kedai .kd-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s; box-shadow:var(--shadow-sm); }
        #view-kedai .kd-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(5,150,105,.35); }
        #view-kedai .kd-card:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
        #eguru-app .kd-cover { position:relative; aspect-ratio:3/4; background:linear-gradient(145deg,#047857,#065F46 55%,#0F766E); overflow:hidden; }
        #eguru-app .kd-cover img { width:100%; height:100%; object-fit:cover; display:block; }
        #eguru-app .kd-cover-ph { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:40px 12px 14px; color:#fff; }
        #eguru-app .kd-cover-ph svg { width:30px; height:30px; fill:rgba(255,255,255,.55); margin-bottom:auto; }
        #eguru-app .kd-cover-ph b { font-size:var(--t6); font-weight:800; line-height:1.25; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
        #eguru-app .kd-jenis { position:absolute; left:8px; top:8px; background:rgba(17,24,39,.72); color:#fff; font-size:var(--t1); font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-full); backdrop-filter:blur(4px); }
        #eguru-app .kd-diskaun { position:absolute; right:8px; top:8px; background:var(--danger); color:#fff; font-size:var(--t2); font-weight:800; padding:3px 8px; border-radius:var(--radius-full); }
        #eguru-app .kd-milik-tag { position:absolute; right:8px; top:8px; background:#fff; color:var(--primary-dark); font-size:var(--t2); font-weight:800; padding:3px 9px; border-radius:var(--radius-full); display:inline-flex; align-items:center; gap:4px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
        #eguru-app .kd-milik-tag svg { width:12px; height:12px; fill:currentColor; }
        #view-kedai .kd-body { padding:11px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
        #view-kedai .kd-body h4 { font-size:var(--t6); font-weight:700; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        #view-kedai .kd-body p { font-size:var(--t3); color:var(--text-muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        #view-kedai .kd-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
        #eguru-app .kd-harga b { font-size:var(--t7); font-weight:800; color:var(--primary-text); }
        #eguru-app .kd-harga s { font-size:var(--t3); color:var(--text-light); margin-left:5px; }
        #eguru-app .kd-harga .kd-free { font-size:var(--t6); font-weight:800; color:var(--info-text); }
        #eguru-app .kd-btn { border:none; border-radius:var(--radius-sm); padding:7px 12px; font-size:var(--t4); font-weight:700; cursor:pointer; white-space:nowrap; background:var(--primary); color:#fff; display:inline-flex; align-items:center; gap:5px; }
        #eguru-app .kd-btn svg { width:14px; height:14px; fill:currentColor; }
        #eguru-app .kd-btn:hover:not(:disabled) { background:var(--primary-dark); }
        #eguru-app .kd-btn.milik { background:rgba(5,150,105,.12); color:var(--primary-text); }
        #eguru-app .kd-btn.soon { background:var(--bg); color:var(--text-muted); border:1px dashed var(--border); cursor:default; }
        #view-kedai .kd-kosong { text-align:center; color:var(--text-muted); padding:40px 16px; background:var(--card-bg); border:1px dashed var(--border); border-radius:var(--radius); }
        #view-kedai .kd-kosong svg { width:40px; height:40px; fill:var(--border); margin-bottom:8px; }
        #view-kedai .kd-kosong b { display:block; color:var(--text); font-size:var(--t7); margin-bottom:4px; }
        #view-kedai .kd-row { display:flex; gap:12px; align-items:center; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; margin-bottom:var(--sp-3); box-shadow:var(--shadow-sm); }
        #view-kedai .kd-row .kd-cover { width:54px; flex-shrink:0; border-radius:var(--radius-xs); }
        #view-kedai .kd-row .kd-cover-ph { padding:6px; } #view-kedai .kd-row .kd-cover-ph b { display:none; } #view-kedai .kd-row .kd-cover-ph svg { width:20px; height:20px; margin:auto; }
        #view-kedai .kd-row-t { flex:1; min-width:0; }
        #view-kedai .kd-row-t b { display:block; font-size:var(--t6); font-weight:700; color:var(--text); }
        #view-kedai .kd-row-t span { display:block; font-size:var(--t3); color:var(--text-muted); margin-top:2px; }
        /* Modal butiran produk (bottom-sheet, sama dengan .km-modal Support) */
        #eguru-app .kd-det { display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:start; }
        @media (max-width:520px) { #eguru-app .kd-det { grid-template-columns:110px 1fr; gap:12px; } }
        #eguru-app .kd-det .kd-cover { border-radius:var(--radius-sm); box-shadow:var(--shadow); }
        #eguru-app .kd-det h3 { font-size:var(--t8); font-weight:800; line-height:1.25; margin-bottom:6px; color:var(--text); }
        #eguru-app .kd-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
        #eguru-app .kd-meta span { font-size:var(--t2); font-weight:700; background:var(--bg); border:1px solid var(--border); color:var(--text-muted); padding:3px 8px; border-radius:var(--radius-full); }
        #eguru-app .kd-det .kd-harga b { font-size:var(--t9); }
        #eguru-app .kd-ket { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:var(--t6); line-height:1.65; color:var(--text); word-break:break-word; }
        #eguru-app .kd-ket p { margin-bottom:10px; }
        #eguru-app .kd-ket ul { margin:0 0 10px 20px; }
        #eguru-app .kd-ket li { margin-bottom:4px; }
        #eguru-app .kd-cta { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
        #eguru-app .kd-nota { font-size:var(--t3); color:var(--text-muted); margin-top:10px; line-height:1.5; }
        /* 2026-10-03: kad = pautan ke /kedai/<slug>; gambar Shopee segi empat; Pembelian Saya
           memapar status servis, fail serahan dan borang maklumat/fail pembeli (dilipat). */
        #view-kedai a.kd-card { text-decoration:none; color:inherit; }
        #view-kedai .kd-grid .kd-cover { aspect-ratio:1/1; }
        #view-kedai .kd-grid .kd-jenis { display:none; }   /* menutup teks tajuk pada gambar Shopee */
        #view-kedai .kd-hero-pautan { position:relative; z-index:1; display:inline-flex; margin-top:12px; background:#fff; color:var(--primary-dark); font-weight:800; font-size:var(--t5); padding:8px 14px; border-radius:var(--radius-full); text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.15); }
        #view-kedai .kd-semua { display:block; text-align:center; margin:var(--sp-4) 0 var(--sp-2); padding:12px; border:1.5px dashed var(--border); border-radius:var(--radius); color:var(--primary-text); font-weight:700; font-size:var(--t5); text-decoration:none; background:var(--card-bg); }
        #view-kedai .kd-semua:hover { border-color:var(--primary); }
        #view-kedai .kd-row { flex-direction:column; align-items:stretch; }
        #view-kedai .kd-row-atas { display:flex; gap:12px; align-items:center; }
        #view-kedai .kd-row-t b a { color:inherit; text-decoration:none; }
        #view-kedai .kd-row-t b a:hover { color:var(--primary-text); text-decoration:underline; }
        #view-kedai .kd-servis { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); display:grid; gap:10px; }
        #view-kedai .kd-hantar { border-radius:var(--radius-sm); padding:9px 12px; background:var(--bg); border-left:3px solid var(--accent); }
        #view-kedai .kd-hantar.proses { border-left-color:var(--info); }
        #view-kedai .kd-hantar.selesai { border-left-color:var(--primary); background:rgba(5,150,105,.08); }
        #view-kedai .kd-hantar b { display:block; font-size:var(--t5); color:var(--text); }
        #view-kedai .kd-hantar span { display:block; font-size:var(--t3); color:var(--text-muted); margin-top:2px; }
        #view-kedai .kd-fail-lst { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
        #view-kedai .kd-fail-h { font-size:var(--t2); font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--text-light); flex-basis:100%; }
        #view-kedai .kd-fail { display:inline-flex; align-items:center; gap:6px; max-width:100%; border:1px solid var(--border); background:var(--card-bg); border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--t4); font-weight:600; color:var(--text); cursor:pointer; }
        #view-kedai button.kd-fail:hover { border-color:var(--primary); color:var(--primary-text); }
        #view-kedai .kd-fail svg { width:14px; height:14px; fill:var(--primary); flex-shrink:0; }
        #view-kedai .kd-fail span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
        #view-kedai .kd-fail small { color:var(--text-light); font-weight:500; }
        #view-kedai .kd-fail.kecil { cursor:default; background:var(--bg); }
        #view-kedai .kd-x { border:0; background:transparent; color:var(--text-light); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
        #view-kedai .kd-x:hover { color:var(--danger-text); }
        #view-kedai .kd-lipat summary { cursor:pointer; font-size:var(--t4); font-weight:700; color:var(--primary-text); }
        #view-kedai .kd-lipat[open] summary { margin-bottom:8px; }
        #view-kedai .kd-lipat textarea { margin-bottom:8px; }
        #view-kedai .kd-servis-aksi { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
        #view-kedai .kd-servis-aksi small { font-size:var(--t2); color:var(--text-light); flex-basis:100%; }

/* ==================================================================
   CUTI TAKWIM PADA JADUAL (2026-09-23) — lihat sg_utama.js
   Merah = cuti (tiada PdP). Biru = peristiwa maklumat (peperiksaan,
   kursus, program) — sekolah tetap dibuka.
   ================================================================== */
#eguru-app .hw-cuti-band { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px; font-size: var(--t2); line-height: 1.3; color: var(--danger-text); background: var(--danger-light); border-top: 1px dashed rgba(185,28,28,.35); overflow: hidden; }
#eguru-app .hw-cuti-band b { flex: 0 0 auto; font-weight: 800; letter-spacing: .4px; }
#eguru-app .hw-cuti-band span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#eguru-app .hw-cuti-band.info { color: var(--info-text); background: var(--info-light); border-top-color: rgba(29,78,216,.3); }
#eguru-app .hw-row-cuti .hw-day { background: linear-gradient(135deg, #EF4444, #B91C1C); color: #fff; }
#eguru-app .hw-c.hw-f.hw-cuti-c { opacity: .55; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(220,38,38,.10) 6px 12px); }
#eguru-app .hw-cuti-tag { display: block; margin-top: 1px; padding: 0 4px; border-radius: var(--radius-full); font-size: var(--t1); font-weight: 800; letter-spacing: .3px; line-height: 1.5; color: #fff; background: var(--danger-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .hw-cuti-tag.info { background: var(--info-text); }
@media (min-width: 900px) { #eguru-app .hw-cuti-band { font-size: var(--t4); padding: 4px 10px; } }
/* Grid RPH sandaran (paksi masa) & senarai telefon RPH */
#eguru-app .tt-cuti-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); font-size: var(--t2); font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--danger-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#eguru-app .tt-day .tt-cuti-tag { display: block; margin: 3px 0 0; font-size: var(--t1); }
#eguru-app .tt-cuti-tag.info { background: var(--info-text); }
#eguru-app .rphm-day .tt-cuti-tag { margin-left: auto; }
#eguru-app .rphm-day-cuti { background: var(--danger-light); color: var(--danger-text); border-left-color: var(--danger-text); }
#eguru-app .rphm-cards-cuti, #eguru-app .tt-row-cuti .tt-cells { opacity: .6; }
/* Jadual Hari Ini */
#eguru-app .today-cuti { display: flex; align-items: flex-start; gap: 8px; background: var(--danger-light); border: 1px solid rgba(185,28,28,.25); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: var(--sp-3); font-size: var(--t5); line-height: 1.5; color: var(--text); }
#eguru-app .today-cuti svg.gi { flex: 0 0 auto; fill: var(--danger-text); margin-top: 2px; }
#eguru-app .today-cuti b { color: var(--danger-text); }
#eguru-app .today-cuti.info { background: var(--info-light); border-color: rgba(29,78,216,.25); }
#eguru-app .today-cuti.info svg.gi { fill: var(--info-text); }
#eguru-app .today-cuti.info b { color: var(--info-text); }
#eguru-app .today-cuti-tag { flex: 0 1 auto; margin-left: auto; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--t2); font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--danger-text); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .today-cuti-tag.info { background: var(--info-text); }
#eguru-app .today-item.cuti { border-style: dashed; border-color: rgba(185,28,28,.35); background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(220,38,38,.04) 8px 16px); }

/* ==================================================================
   HALAMAN MURID — EMPAT TAB (2026-09-23)
   Tab memakai .ak-tabs halaman Akaun. Di telefon empat label tidak muat
   bersama ikon, jadi ikon disorok dan label boleh berbalut dua baris.
   ================================================================== */
#eguru-app #view-portalmurid > .card:first-child { margin-bottom: 0 !important; }
#eguru-app #view-portalmurid > .card:first-child .section-header { margin-bottom: 0; }
#eguru-app .pm-tabs .ak-tab span { min-width: 0; }
@media (max-width: 600px) {
    #eguru-app .pm-tabs { gap: 2px; padding: 3px; }
    #eguru-app .pm-tabs .ak-tab { padding: 9px 4px; font-size: var(--t4); line-height: 1.2; text-align: center; }
    #eguru-app .pm-tabs .ak-tab svg { display: none; }
}
/* Tab Portal Murid: status akses setiap kelas */
#eguru-app .pm-portal-tbl td { vertical-align: middle; }
#eguru-app .pm-portal-tbl .pm-ini { display: inline-flex; vertical-align: middle; }
#eguru-app .pm-kod { font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: .5px; }
#eguru-app .pm-st { display: inline-block; padding: 2px 9px; border-radius: var(--radius-full); font-size: var(--t3); font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
#eguru-app .pm-st.sedia { background: var(--success-light); color: var(--primary-text); border-color: var(--success); }
#eguru-app .pm-st.belum { background: var(--danger-light); color: var(--danger-text); border-color: rgba(185,28,28,.35); }
#eguru-app .pm-st.separa { background: var(--accent-light); color: var(--accent-text); border-color: var(--accent); }
#eguru-app .pm-st.kosong { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
#eguru-app .pm-portal-btn { white-space: nowrap; text-align: right; }
#eguru-app .pm-portal-btn .btn { width: auto !important; margin-left: 4px; }
#eguru-app .pm-portal-btn .btn[disabled] { opacity: .45; cursor: not-allowed !important; }

/* ==================================================================
   HALAMAN MURID — pusingan 3 (2026-09-23): Buku Kehadiran, Profil,
   Naik/Pindah, Arkib, tab Latihan, menu "Lagi".
   ================================================================== */
#eguru-app .pm-tabs .lbl-pendek { display: none; }
@media (max-width: 600px) {
    #eguru-app .pm-tabs .lbl-penuh { display: none; }
    #eguru-app .pm-tabs .lbl-pendek { display: inline; }
}
/* Nama murid yang boleh diketik (profil) — rupa teks biasa, garis bila hover */
#eguru-app #view-portalmurid .pmk-nama a,
#eguru-app #view-portalmurid a.pm-nama-a { color: inherit; text-decoration: none; }
#eguru-app #view-portalmurid .pmk-nama a:hover,
#eguru-app #view-portalmurid a.pm-nama-a:hover { color: var(--primary-text); text-decoration: underline; }

/* Menu "Lagi" setiap kelas */
#eguru-app .pm-lagi { position: relative; flex: 0 0 auto; }
#eguru-app .pm-lagi > summary { list-style: none; cursor: pointer; width: auto !important; }
#eguru-app .pm-lagi > summary::-webkit-details-marker { display: none; }
#eguru-app .pm-lagi-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; background: var(--card-bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px; display: flex; flex-direction: column; }
#eguru-app .pm-lagi-menu button { border: 0; background: transparent; text-align: left; padding: 9px 12px; border-radius: var(--radius-xs, 6px);
    font-size: var(--t5); font-weight: 600; color: var(--text); cursor: pointer; }
#eguru-app .pm-lagi-menu button:hover { background: var(--bg); color: var(--primary-text); }
@media (max-width: 600px) { #eguru-app .pm-lagi { flex: 1 1 0 !important; } #eguru-app .pm-lagi > summary { width: 100% !important; } }

/* ---------- Buku Kehadiran ---------- */
#eguru-app .pmk-kawalan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 600px) { #eguru-app .pmk-kawalan { grid-template-columns: 1fr 1fr; } #eguru-app .pmk-kawalan #pmk-bulan { grid-column: 1 / -1; } }
#eguru-app .pmk-mg { display: flex; gap: 10px; align-items: center; margin-bottom: var(--sp-3); padding: 8px 10px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm); }
#eguru-app .pmk-mg-lbl { font-size: var(--t3); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); flex: 0 0 auto; }
#eguru-app .pmk-mg-isi { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
#eguru-app .pmk-mg-c { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 5px 8px;
    border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--card-bg); font-size: var(--t2); color: var(--text-muted); cursor: pointer; line-height: 1.25; }
#eguru-app .pmk-mg-c b { font-size: var(--t3); color: var(--text); }
#eguru-app .pmk-mg-c i { font-style: normal; font-weight: 800; font-size: var(--t2); }
#eguru-app .pmk-mg-c.ok { border-color: var(--success); background: var(--success-light); }
#eguru-app .pmk-mg-c.ok i { color: var(--primary-text); }
#eguru-app .pmk-mg-c.belum { border-color: var(--danger); }
#eguru-app .pmk-mg-c.belum i { color: var(--danger-text); }
#eguru-app .pmk-mg-c.cuti, #eguru-app .pmk-mg-c.akan { opacity: .55; cursor: default; }
#eguru-app .pmk-ringkas { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--t4); color: var(--text-muted); margin-bottom: 8px; }
#eguru-app .pmk-ringkas b { color: var(--text); }
#eguru-app .pmk-ringkas .belum b { color: var(--danger-text); }
#eguru-app .pmk-ringkas .ok { color: var(--primary-text); font-weight: 700; }
#eguru-app .pmk-aksi { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#eguru-app .pmk-aksi .btn { width: auto !important; }
#eguru-app .pmk-buku th.pmk-sesi { text-align: center; padding: 4px 2px; min-width: 30px; line-height: 1.15; text-transform: none; letter-spacing: 0; position: relative; }
#eguru-app .pmk-buku th.pmk-sesi[onclick] { cursor: pointer; }
#eguru-app .pmk-buku th.pmk-sesi[onclick]:hover { background: var(--success-light); color: var(--primary-text); }
#eguru-app .pmk-sesi-h, #eguru-app .pmk-sesi-s { display: block; font-size: var(--t1); font-weight: 700; }
#eguru-app .pmk-sesi-d { display: block; font-size: var(--t4); font-weight: 800; color: var(--text); }
#eguru-app .pmk-buku th.pmk-sesi.cuti { background: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--border) 5px 7px); }
#eguru-app .pmk-buku th.pmk-sesi.akan { opacity: .5; }
#eguru-app .pmk-belum-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); vertical-align: middle; }
#eguru-app .pmk-buku th.pmk-sesi .pmk-belum-dot { position: absolute; top: 3px; right: 3px; }
#eguru-app .pmk-buku td.pmk-c { text-align: center; padding: 5px 2px; font-size: var(--t2); font-weight: 800; min-width: 30px; }
#eguru-app .pmk-c.st-H { color: var(--primary-text); }
#eguru-app .pmk-c.st-TH { color: #fff; background: var(--danger) !important; }
#eguru-app .pmk-c.st-S { color: var(--info-text); background: var(--info-light) !important; }
#eguru-app .pmk-c.st-C { color: var(--accent-text); background: var(--accent-light) !important; }
#eguru-app .pmk-c.st-K { color: var(--text-muted); background: var(--bg) !important; }
#eguru-app .pmk-c.cuti { background: repeating-linear-gradient(135deg, var(--bg) 0 5px, var(--border) 5px 7px) !important; }
#eguru-app .pmk-c.tiada { background: var(--bg); }
#eguru-app .pmk-buku .pmk-jum { font-weight: 700; }
#eguru-app .pmk-petunjuk { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .pmk-petunjuk .pmk-c { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; border-radius: 4px;
    border: 1px solid var(--border); font-size: var(--t1); font-weight: 800; margin-left: 6px; }

/* ---------- Naik / Pindah Kelas ---------- */
#eguru-app .pmn-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; font-size: var(--t4); color: var(--text-muted); }
#eguru-app .pmn-atas .btn { width: auto !important; margin-left: 4px; }
#eguru-app .pmn-senarai { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
#eguru-app .pmn-m { display: flex; align-items: center; gap: 8px; font-size: var(--t5) !important; font-weight: 500; padding: 4px 0; cursor: pointer; }
#eguru-app .pmn-m input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }

/* ---------- Profil Murid ---------- */
#eguru-app .pmf-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-4); }
#eguru-app .pmf-nama { font-size: var(--t8); font-weight: 800; line-height: 1.25; }
#eguru-app .pmf-kepala .pm-st { margin-left: 6px; }
#eguru-app .pmf-jubin-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--sp-4); }
@media (max-width: 700px) { #eguru-app .pmf-jubin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#eguru-app .pmf-jubin { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--card-bg); }
#eguru-app .pmf-jubin small { display: block; font-size: var(--t2); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
#eguru-app .pmf-jubin b { display: block; font-size: var(--t9); font-weight: 800; line-height: 1.2; color: var(--text); }
#eguru-app .pmf-jubin span { font-size: var(--t3); color: var(--text-muted); }
#eguru-app .pmf-jubin.hijau b { color: var(--primary-text); }
#eguru-app .pmf-jubin.ambar b { color: var(--accent-text); }
#eguru-app .pmf-jubin.merah b { color: var(--danger-text); }
#eguru-app #pmf-modal-host .form-section-title { margin-top: var(--sp-4); }
#eguru-app .pmf-sp { font-size: var(--t4); margin-bottom: 6px; line-height: 2; }
#eguru-app .pmf-sp-c { display: inline-block; margin: 0 4px 0 0; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--t3); line-height: 1.8; }
#eguru-app .pmf-sp-c i { font-style: normal; font-weight: 800; color: var(--primary-text); }
#eguru-app #pmf-modal-host .form-row .btn, #eguru-app #pmn-modal-host .form-row .btn { flex: 1 1 160px; }

/* ---------- Arkib ---------- */
#eguru-app .pm-arkib > summary { cursor: pointer; list-style: none; }
#eguru-app .pm-arkib > summary::-webkit-details-marker { display: none; }
#eguru-app .pm-arkib > summary::before { content: '▸'; display: inline-block; margin-right: 6px; color: var(--text-light); transition: transform .15s; }
#eguru-app .pm-arkib[open] > summary::before { transform: rotate(90deg); }
#eguru-app .pm-arkib > summary .form-section-title { display: inline-flex; }
#eguru-app .pm-arkib > summary .form-section-title::after { display: none; }

/* ---------- Tab Latihan ---------- */
#eguru-app .pml-l { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
#eguru-app .pml-l > summary { list-style: none; cursor: pointer; }
#eguru-app .pml-l > summary::-webkit-details-marker { display: none; }
#eguru-app .pml-atas { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#eguru-app .pml-atas b { font-size: var(--t6); }
#eguru-app .pml-bil { flex: 0 0 auto; font-weight: 800; font-size: var(--t5); padding: 2px 10px; border-radius: var(--radius-full); background: var(--accent-light); color: var(--accent-text); }
#eguru-app .pml-bil.siap { background: var(--success-light); color: var(--primary-text); }
#eguru-app .pml-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 8px; overflow: hidden; }
#eguru-app .pml-bar i { display: block; height: 100%; background: var(--primary); }
#eguru-app .pml-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0; }
@media (max-width: 600px) { #eguru-app .pml-dua { grid-template-columns: 1fr; } }
#eguru-app .pml-dua .pm-murid-ol { border-top: 0; padding: 0 0 0 22px; }
#eguru-app .pml-dua .pm-meta { margin-left: 8px; font-size: var(--t3); color: var(--text-muted); }

/* ==================================================================
   TELEFON: BUTANG SEBARIS (2026-09-23, permintaan pemilik)
   "Butang jadi dua baris — nak sebaris seperti di Halaman Utama."
   Tiga peraturan, semuanya ≤600px sahaja (desktop tidak disentuh):
   1. Teks butang TIDAK PERNAH berbalut. Butang dipadatkan (padding &
      font satu anak tangga lebih kecil) supaya label muat.
   2. Baris yang HANYA berisi butang (.form-row tanpa medan) jadi SATU
      baris sama lebar — dahulu asas 220px .form-row memaksa setiap
      butang turun ke baris sendiri pada skrin 343px.
   3. Baris cip penapis ditatal mendatar, bukan dilonggokkan 3 baris.
   Label yang terlalu panjang untuk telefon membawa bahagian
   .lbl-lanjut yang disorok di sini (nama penuh kekal pada desktop).
   ================================================================== */
@media (max-width: 600px) {
    #eguru-app .btn { white-space: nowrap !important; padding: 11px 12px !important; font-size: var(--t5) !important; gap: 6px !important; min-width: 0; }
    #eguru-app .btn > svg, #eguru-app .btn > .gi { flex-shrink: 0; }
    #eguru-app .btn-sm { padding: 7px 10px !important; font-size: var(--t4) !important; gap: 5px !important; }
    #eguru-app .lbl-lanjut { display: none; }
    #eguru-app .form-row:not(:has(> :not(.btn))) { flex-wrap: nowrap; gap: 8px; }
    #eguru-app .form-row:not(:has(> :not(.btn))) > .btn { flex: 1 1 0 !important; width: auto !important; padding-left: 8px !important; padding-right: 8px !important; }
    /* 4 butang atau lebih tidak muat sebaris 343px tanpa memotong label —
       susun 2 x 2 yang sama lebar (lebih kemas daripada teks terpotong). */
    #eguru-app .form-row:not(:has(> :not(.btn))):has(> .btn:nth-child(4)) { flex-wrap: wrap; }
    #eguru-app .form-row:not(:has(> :not(.btn))):has(> .btn:nth-child(4)) > .btn { flex: 1 1 calc(50% - 4px) !important; }
    /* Jadual Waktu Mingguan (Utama): tiga butang sama lebar dalam satu baris */
    #eguru-app .hw-jw-aksi { flex-wrap: nowrap; gap: 5px; }
    #eguru-app .hw-jw-aksi .btn { flex: 1 1 0 !important; min-width: 0; padding: 7px 4px !important; gap: 4px !important; }
    /* Cip penapis (Flow Tutorial dll.) */
    #eguru-app .flow-cip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
    #eguru-app .flow-cip::-webkit-scrollbar { display: none; }
    #eguru-app .flow-cip > * { flex: 0 0 auto; }
}
/* RPH di telefon/tablet: grid lajur yang SAMA seperti Halaman Utama
   (renderTimetableGrid menanda .rph-grid-lajur bila tetapan waktu ada).
   Senarai hari panjang .rph-narrow kekal hanya sebagai sandaran. */
@media (max-width: 900px) {
    #eguru-app .rph-wide.rph-grid-lajur { display: block; }
    #eguru-app .rph-grid-lajur + .rph-narrow { display: none; }
}
/* Tepi-ke-tepi seperti grid Utama. `.hw-sect-rph .hw-grid { margin:0 }`
   (desktop) lebih khusus daripada peraturan full-bleed telefon, jadi grid
   selebar 100vw bermula di tepi kad dan terkeluar ke kanan. */
@media (max-width: 640px) {
    #eguru-app .hw-sect-rph .hw-grid {
        width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        border-left: 0; border-right: 0; border-radius: 0;
    }
}
/* Butang "Salin RPH ini" dalam editor: hanya perlu pada skrin sentuh —
   desktop sudah ada bar hover Salin RPH pada setiap sel. */
@media (hover: hover) and (min-width: 901px) { #eguru-app .rph-salin-mob { display: none !important; } }

/* ===== Panduan boleh-lipat di TELEFON (.mob-info + .mob-info-tog) =====
   Perenggan penerangan panjang disorok di telefon sehingga guru menekan
   butang ⓘ (menogol .info-buka pada .card). Desktop: butang tersembunyi,
   teks sentiasa kelihatan. Guna corak ini untuk halaman lain yang padat. */
#eguru-app .mob-info-tog { display: none; }
@media (max-width: 600px) {
    #eguru-app .mob-info-tog { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; padding: 6px 10px; border: 1px dashed var(--border);
        border-radius: var(--radius-full); background: transparent; color: var(--text-muted); font-size: var(--t4); font-weight: 600; cursor: pointer; }
    #eguru-app .mob-info-tog svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
    #eguru-app .card:not(.info-buka) .mob-info { display: none !important; }
    #eguru-app .card.info-buka .mob-info-tog { color: var(--primary-text); border-color: var(--primary); }
}

/* ==================================================================
   KAD JADUAL UTAMA: BUTANG IKON SAHAJA DI TELEFON (2026-09-23)
   Permintaan pemilik: lima label penuh (Butiran · Kehadiran · Nota ·
   Latihan · PBD) pecah jadi dua baris pada 343px. Di telefon label
   disorok (.today-btn-lbl) dan setiap butang jadi jubin ikon sama saiz;
   nama kekal pada title/aria-label. Warna setiap butang sudah unik, jadi
   ikon + warna cukup untuk dibezakan. Desktop tidak disentuh.
   ================================================================== */
#eguru-app .today-pbd-btn svg { width: 14px; height: 14px; fill: #fff; }
@media (max-width: 600px) {
    /* Lima jubin + "Tidak Hadir" mesti sebaris walaupun pada skrin 320px:
       jubin mengecut (asas 0, maks 44px) sebelum baris dibalut. Blok kiri
       hanya turun ke baris sendiri bila ia tinggal < 160px (tag absen panjang). */
    #eguru-app .today-actions-l { flex: 1 1 0; min-width: 160px; flex-wrap: nowrap; gap: 5px; }
    #eguru-app .today-actions-l > button { flex: 1 1 0; min-width: 0; max-width: 44px; height: 36px; min-height: 36px; padding: 0 !important; gap: 0; }
    #eguru-app .today-actions-l > .today-sksp-kosong { flex: 1 1 auto; min-width: 0; }
    #eguru-app .today-actions-r .t-tidakhadir { padding: 6px 9px; white-space: nowrap; }
    #eguru-app .today-actions-l > button svg { width: 19px !important; height: 19px !important; }
    #eguru-app .today-btn-lbl { display: none; }
}
/* Nota hero: telefon ialah paparan ringkas — cadangkan tablet/komputer riba. */
#eguru-app .combo-mob-nota { display: none; }
@media (max-width: 600px) {
    #eguru-app .combo-mob-nota {
        position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 7px;
        margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-sm);
        background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
        font-size: var(--t3); line-height: 1.45; color: #fff;
    }
    #eguru-app .combo-mob-nota svg.gi { flex: 0 0 auto; width: 15px; height: 15px; fill: #fff; margin-top: 1px; opacity: .9; }
}

/* ==================================================================
   POPUP TELEFON: SATU FORMAT (2026-09-23, permintaan pemilik)
   "Selaraskan struktur & format SEMUA popup di mobile ikut popup Nota/
   Latihan Halaman Utama." Acuannya (≤600px sahaja; desktop tidak disentuh):
     • jurang ke skrin 2px (kiri/kanan/atas), bawah rapat; sudut atas 4px
     • padding helaian 18px atas · 8px sisi · 34px bawah
     • BAR KEPALA melekat: tajuk kiri (--t8, tebal) + butang X bulat 34px
       di kanan, garis bawah, jarak --sp-4 ke kandungan
   Empat keluarga popup dibawa ke acuan yang sama:
     1. .rph-modal-sheet + .rph-modal-head — sudah struktur Nota; hanya
        jurang/sudut/padding diseragamkan (dahulu 10px/24px/22px, dan
        Butiran/PBD 12px).
     2. .legal-modal-sheet (Takwim, Solat, Terma, Prompt AI, Pangkas
        Gambar, Aktiviti Saya) — kepala & badan dipadankan ke ukuran 1.
     3. Borang kecil (Log Masuk, Bayar, Kata Laluan, Padam Akaun, Mesej):
        .modal-kepala (index.html) = display:contents di desktop, jadi bar
        kepala di sini (order:-1); pemegang & logo hiasan disorok; tiada
        pemusatan menegak — kandungan bermula di bawah kepala seperti Nota.
     4. .km-modal-sheet (Support/Kedai) — padding + bar kepala .km-kepala
        (markup baharu, disorok di desktop yang kekal dengan × terapung).
   Jurang 2px bermakna latar gelap hampir tiada untuk diketik: setiap popup
   MESTI ada X atau butang Tutup/Batal (setpw sengaja tiada — wajib diisi).
   ================================================================== */
#eguru-app .modal-kepala { display: contents; }
#eguru-app .modal-kepala-x { display: none !important; }
#eguru-app .km-modal-sheet > .km-kepala { display: none; }   /* sebelum @media: pemilih sama, yang kemudian menang */
@media (max-width: 600px) {
    #eguru-app { --modal-gap: 2px; }
    #eguru-app .modal-sheet,
    #eguru-app .km-modal-sheet,
    #eguru-app .pbd-modal-sheet { border-radius: 4px 4px 0 0 !important; }
    #eguru-app .legal-modal-head { border-radius: 4px 4px 0 0; }

    /* 1. Keluarga editor/Nota */
    #eguru-app .modal-sheet.rph-modal-sheet { padding: 18px 8px 34px !important; }

    /* 2. Keluarga legal: helaian padding 0 (kepala tetap, badan menatal) —
       jadi ukuran acuan dipindah ke kepala & badan. */
    #eguru-app .legal-modal-head { margin: 0 8px; padding: 24px 0 8px; gap: 8px; }
    #eguru-app .legal-modal-head .modal-title { font-size: var(--t8); }
    #eguru-app .legal-body { padding: 14px 8px 34px !important; }
    #eguru-app .legal-close { color: var(--text); }
    #eguru-app .legal-close svg { width: 18px; height: 18px; fill: currentColor; }

    /* 3. Borang kecil. Pemilih diulang dengan .modal-overlay supaya
       mengalahkan padding max(20px, …) !important "SATU SAIZ". */
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) {
        padding: 18px 8px 34px !important; text-align: left !important;
    }
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet)::before,
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet)::after { display: none; }
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) > .modal-handle,
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) > .modal-logo { display: none; }
    #eguru-app .modal-kepala {
        display: flex; order: -1; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px;
        position: sticky; top: -18px; z-index: 3; background: var(--card-bg);
        padding: 6px 0 8px; margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
    }
    #eguru-app .modal-kepala > .modal-title { text-align: left; margin: 0; min-width: 0; }
    #eguru-app .modal-kepala-x { display: flex !important; flex-shrink: 0; }
    /* X lama Log Masuk (mutlak, penjuru kanan atas) — digantikan X dalam kepala */
    #eguru-app #auth-modal-sheet > .legal-close { display: none; }
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) .modal-tagline,
    #eguru-app .modal-overlay > .modal-sheet:not(.rph-modal-sheet):not(.legal-modal-sheet) .modal-sub { text-align: left; }

    /* 4. Support/Kedai: bar kepala .km-kepala (tersembunyi di desktop)
       menggantikan × terapung yang menindih gambar produk. */
    #eguru-app .km-modal .km-modal-sheet { padding: 18px 8px 34px !important; }
    #eguru-app .km-modal-sheet > .km-kepala { display: flex; }
    #eguru-app .km-modal-sheet > .km-modal-x { display: none; }
}

/* ==================================================================
   KEHADIRAN: 3 STATUS + KAKI MELEKAT (2026-09-23, keputusan pemilik)
   Guru subjek menanda Hadir / Tidak Hadir / Keluar Awal sahaja (sakit/cuti
   = tugas guru tingkatan). Keluar Awal kini AMBAR — warna kelabu lama
   kelihatan seperti butang tidak aktif. Butang Simpan di KANAN dalam kaki
   yang melekat di bawah helaian: sejajar dengan lajur butang status dan
   boleh ditekan tanpa menatal melepasi seluruh senarai murid.
   ================================================================== */
#eguru-app .kh-btn.on.kh-k  { background: var(--accent); border-color: var(--accent); color: #1F2937; }
#eguru-app .kh-leg i.kh-k  { background: var(--accent); color: #1F2937; }
#eguru-app .kh-tag.k  { color: var(--accent-text); }
#eguru-app .pmk-c.st-K { color: var(--accent-text); background: var(--accent-light) !important; }
/* bottom/margin -34px = padding bawah helaian (.rph-modal-sheet 34px): kaki
   menutup ruang padding itu supaya baris murid tidak kelihatan di bawahnya. */
#eguru-app .kh-kaki {
    position: sticky; bottom: -34px; z-index: 3;
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin: 14px 0 -34px; padding: 12px 0 34px; background: var(--card-bg);
    border-top: 1px solid var(--border);
}
#eguru-app .kh-kaki-ringkas { margin-right: auto; font-size: var(--t4); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
#eguru-app .kh-kaki .btn { width: auto !important; flex: 0 0 auto; }
#eguru-app .kh-kaki .kh-simpan { min-width: 200px; }
@media (max-width: 600px) {
    #eguru-app .kh-kaki { gap: 8px; }
    #eguru-app .kh-kaki-ringkas { display: none; }
    #eguru-app .kh-kaki .kh-simpan { flex: 1 1 auto; min-width: 0; }
}

/* ==================================================================
   TD (TIDAK DITAKSIR) DI SEMUA PAPARAN + SIMPAN TP DI KANAN (2026-09-23)
   TD = murid tidak hadir pada setiap waktu SK itu diajar dan belum diberi TP.
   Sel TD memaparkan "TD" (bukan TP lalai ikut tahap) dan tidak dikira dalam
   TP Keseluruhan. Lihat pbdNilaiSel / pbdTdMuat (sg_pbd.js).
   ================================================================== */
#eguru-app td.pbd-td .pbd-tp-sel,
#eguru-app .pbd-mrow.pbd-td .pbd-tp-sel { color: var(--danger-text); border-color: var(--danger); font-weight: 800; }
#eguru-app .pbd-mrow.pbd-td { background: var(--danger-light); }
#eguru-app .pbd-td-nota { display: block; margin-top: 4px; color: var(--danger-text); }
#eguru-app .pmp-td { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-full); font-size: var(--t2); font-weight: 800; color: var(--danger-text); background: var(--danger-light); white-space: nowrap; }
#eguru-app .anl-td-kelas { font-style: normal; font-size: var(--t2); color: var(--text-muted); }
#eguru-app .pbd-simpan-baris { display: flex; justify-content: flex-end; margin-top: 12px; }
#eguru-app .pbd-simpan-baris .btn { width: auto !important; min-width: 200px; }
@media (max-width: 600px) { #eguru-app .pbd-simpan-baris .btn { width: 100% !important; } }

/* ==================================================================
   PBD BERASASKAN SK (2026-09-23): status liputan, Cadangan TP, TP Kes.
   Sel: select TP (disahkan guru) + satu lencana di bawahnya — cadangan
   (→ TPn, boleh ditekan), "Belum diajar", "SP 2/4" atau "Sedia ditaksir".
   ================================================================== */
#eguru-app .pbd-sel-isi { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
#eguru-app .pbd-mrow .pbd-sel-isi { align-items: flex-end; flex: 0 0 auto; }
#eguru-app .pbd-cad { border: 1px dashed var(--primary); background: var(--success-light); color: var(--primary-text); font-size: var(--t2); font-weight: 800; padding: 1px 7px; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; }
#eguru-app .pbd-cad:hover { background: var(--primary); color: #fff; border-style: solid; }
#eguru-app .pbd-cad.tahap { border-color: var(--border); background: var(--bg); color: var(--text-muted); font-weight: 700; }
#eguru-app .pbd-cad.nipis { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); }
#eguru-app .pbd-st { font-size: var(--t1); color: var(--text-light); white-space: nowrap; }
#eguru-app .pbd-st.sedia { color: var(--primary-text); font-weight: 700; }
#eguru-app .pbd-th-st { display: block; margin-top: 2px; font-size: var(--t1); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-light); white-space: nowrap; }
#eguru-app .pbd-th-st.siap { color: var(--primary-text); }
#eguru-app td.pbd-belum, #eguru-app .pbd-mrow.pbd-belum { opacity: .7; }
#eguru-app td.pbd-ditaksir .pbd-tp-sel { font-weight: 800; border-color: var(--primary); }
#eguru-app .pbd-tpk-sel { font-weight: 800; min-width: 70px; padding: 3px 4px; border: 1.5px solid var(--primary); border-radius: var(--radius-xs, 6px); background: var(--card-bg); color: var(--text); }
#eguru-app .pbd-panduan { display: block; font-size: var(--t1); color: var(--text-muted); font-weight: 600; margin-top: 2px; white-space: nowrap; }
#eguru-app .pbd-mcard-tpk { display: inline-flex; flex-direction: column; align-items: flex-end; }
#eguru-app .pbd-alat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#eguru-app .pbd-alat:empty { display: none; }
#eguru-app .skt-lip { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: var(--radius-full); font-size: var(--t2); font-weight: 700; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
#eguru-app .skt-lip.siap { background: var(--success-light); color: var(--primary-text); border-color: transparent; }

/* ==================================================================
   TAB MODUL KONGSI (2026-09-23) — PBD, JSU, Exam, Evidens, Analisis,
   Intervensi, Kajian Tindakan. Rupa = .ak-tabs.pm-tabs Halaman Murid;
   logik = mtPilih() dalam sg_utama.js.
   ================================================================== */
#eguru-app [data-mt-panel][hidden],
#eguru-app [data-mt-nampak][hidden] { display: none !important; }
#eguru-app .mt-tabs { overflow-x: auto; scrollbar-width: none; }
#eguru-app .mt-tabs::-webkit-scrollbar { display: none; }
#eguru-app .mt-tabs .ak-tab { white-space: nowrap; min-width: max-content; }
#eguru-app .mt-tabs .mod-tab-kira { margin-left: 2px; }
/* Kad kepala halaman bertab: rapat ke bar tab seperti Halaman Murid */
#eguru-app .view > .card:has(+ .mt-tabs),
#eguru-app .view > .card:has(+ #pbd-kandungan) { margin-bottom: 0 !important; }
#eguru-app .mt-kosong { margin: 6px 2px 14px; }
#eguru-app .mt-kosong[hidden] { display: none; }
/* Jalur konteks: kelas / rekod yang sedang dibuka, di bawah tajuk */
#eguru-app .pbd-konteks { margin-top: 10px; padding: 7px 11px; border-radius: var(--radius-sm); background: var(--success-light); color: var(--primary-text); font-size: var(--t4); }
#eguru-app .pbd-konteks[hidden] { display: none; }
#eguru-app .pbd-konteks a { color: inherit; text-decoration: underline; }
/* Ulasan SPPB */
#eguru-app .pbd-sppb-tbl { width: 100%; border-collapse: collapse; min-width: 760px; }
#eguru-app .pbd-sppb-tbl th, #eguru-app .pbd-sppb-tbl td { border-bottom: 1px solid var(--border); padding: 6px; vertical-align: top; text-align: left; }
#eguru-app .pbd-sppb-tbl th { font-size: var(--t3); color: var(--text-muted); font-weight: 800; }
#eguru-app .pbd-sppb-tbl .form-control { margin: 0 0 4px; font-size: var(--t4); }
#eguru-app .pbd-sppb-tbl textarea.form-control { min-height: 0; resize: vertical; }
#eguru-app .pbd-sppb-no { width: 28px; color: var(--text-light); text-align: center; }
#eguru-app .pbd-sppb-nama { min-width: 150px; font-weight: 700; }
#eguru-app .pbd-sppb-tpk { font-size: var(--t3); color: var(--primary-text); font-weight: 800; }
#eguru-app .pbd-sppb-tpk.panduan { color: var(--text-light); }
#eguru-app .ev-m-tidak { color: var(--danger-text); font-weight: 800; }
#eguru-app .jsu-aksi .form-row { margin: 0; }
@media (max-width: 600px) {
    #eguru-app .mt-tabs .ak-tab { min-width: 0; flex: 1 0 auto; padding: 9px 8px; }
}
#eguru-app .anl-arah.naik { color: var(--primary-text); font-weight: 800; }
#eguru-app .anl-arah.turun { color: var(--danger-text); font-weight: 800; }
/* Semakan rujukan Kajian Tindakan */
#eguru-app .kt-ruj-ringkas { margin: 8px 0 4px; font-size: var(--t4); font-weight: 700; }
#eguru-app .kt-ruj { display: flex; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); margin-bottom: 4px; font-size: var(--t4); }
#eguru-app .kt-ruj small { color: var(--text-muted); }
#eguru-app .kt-ruj.sah { background: var(--success-light); }
#eguru-app .kt-ruj.semak { background: var(--accent-light); }
#eguru-app .kt-ruj.tolak { background: var(--danger-light); }
#eguru-app .kt-ruj-ikon { font-weight: 900; width: 14px; flex-shrink: 0; }
/* Latihan pengukuhan intervensi */
#eguru-app .iv-lat-pilih { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow-y: auto; }
#eguru-app .iv-lat-baris { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--t4); }
#eguru-app .iv-lat-baris small { color: var(--text-muted); }
#eguru-app .iv-lat-status { margin: 6px 0; font-size: var(--t4); }
#eguru-app .iv-lat-status .skt-chip { margin: 3px 4px 0 0; }
/* Keputusan ujian & analisis item */
#eguru-app .bs-kp-tbl th small { display: block; font-weight: 600; color: var(--text-light); }
#eguru-app .bs-kp-in { width: 46px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; text-align: center; font-size: var(--t4); background: var(--card-bg); color: var(--text); }
#eguru-app .bs-kp-in.obj { text-transform: uppercase; background: var(--bg); }
#eguru-app .bs-kp-amaran { color: var(--danger-text); font-weight: 700; }
#eguru-app .bs-kp-baik { color: var(--primary-text); font-weight: 700; }

/* ==================================================================
   KUNCI IKUT PELAN (2026-09-23) — data-pelan="pro|ultra" (pelanTerap).
   Kandungan dipudarkan & tidak boleh disentuh; bekas menerima klik
   (pendengar tangkap membuka ajakan naik taraf). Label = attr data-pelan-lbl.
   ================================================================== */
#eguru-app .pelan-kunci { position: relative; cursor: pointer !important; }
#eguru-app .pelan-kunci > * { pointer-events: none; opacity: .45; filter: grayscale(.4); }
#eguru-app .pelan-kunci::after { content: attr(data-pelan-lbl); position: absolute; top: 6px; right: 8px; z-index: 2;
    font-size: var(--t2); font-weight: 800; padding: 2px 8px; border-radius: var(--radius-full);
    background: var(--accent-light); color: var(--accent-text); border: 1px solid var(--accent); pointer-events: none; }
#eguru-app .pelan-kunci[data-pelan="ultra"]::after { background: var(--ultra-dark, #4c1d95); color: #fff; border-color: transparent; }
#eguru-app button.pelan-kunci, #eguru-app .btn.pelan-kunci { opacity: .7; }
#eguru-app button.pelan-kunci > *, #eguru-app .btn.pelan-kunci > * { opacity: 1; filter: none; }
#eguru-app button.pelan-kunci::after, #eguru-app .btn.pelan-kunci::after { position: static; margin-left: 6px; }
/* Suis Bank RPH ialah <div> flex, bukan butang: lencana mutlak (top/right)
   menindih label "Bank RPH" & suis dalam kotak setinggi butang. Jadikan ia
   item flex seperti pada butang berkunci. */
#eguru-app .rph-bank-ctl.pelan-kunci::after { position: static; margin-left: 2px; }
/* AI Autopilot: lencana sebaris #autopilot-lock (updatePedagogiLock) DAN lencana
   pelanTerap (::after) kedua-duanya muncul pada Percuma/Pro — "🔒 ULTRA 🔒 Ultra".
   Bila butang sudah ditanda .pelan-kunci, lencana pelanTerap sahaja dipapar. */
#eguru-app #btn-rph-autopilot.pelan-kunci #autopilot-lock { display: none !important; }
#eguru-app .pbd-grid td.pbd-auto, #eguru-app .pbd-mrow.pbd-auto { background: #f3e8ff; box-shadow: inset 0 0 0 1px #c4b5fd; }
#eguru-app .pbd-auto-jalur { width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); background: #f3e8ff; color: #4c1d95; font-size: var(--t4); margin-bottom: 6px; }
/* Bar eksport seragam (PDF · Word · Excel · Drive) */
#eguru-app .eksport-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#eguru-app .eksport-btn { display: inline-flex; align-items: center; gap: 5px; }
#eguru-app .eksport-btn svg { width: 15px; height: 15px; fill: currentColor; }
#eguru-app .eksport-bar:empty { display: none; }

/* ===== HALAMAN TOOLS (#view-tools, 2026-09-23) =====
   Kad MENEGAK sama tinggi: ikon + kategori di atas, tajuk, subtajuk, deskripsi
   (~125 aksara, min 3 baris — JANGAN dikepit; ia terpotong di lebar sempit), dan baris tag + "Buka" DIPIN ke bawah (margin-top:auto)
   supaya semua kad sejajar walaupun deskripsi berbeza sedikit panjangnya.
   Warna setiap tool ialah pasangan token --tka/--tkb pada [data-warna]. */
#eguru-app .tools-badge { background: linear-gradient(135deg, #0f766e, #14b8a6); }
#eguru-app .tools-h { font-size: inherit; margin: 0; }
#eguru-app .tools-hab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 6px; }
#eguru-app .tools-kad { --tka: #2563eb; --tkb: #60a5fa; --tkp: #eff6ff; display: flex; }
#eguru-app .tools-kad[data-warna="b"] { --tka: #7c3aed; --tkb: #a78bfa; --tkp: #f5f3ff; }
#eguru-app .tools-kad[data-warna="c"] { --tka: #0f766e; --tkb: #2dd4bf; --tkp: #f0fdfa; }
#eguru-app .tools-kad[data-warna="d"] { --tka: #be123c; --tkb: #fda4af; --tkp: #fff1f2; }
#eguru-app .tools-kad[data-warna="e"] { --tka: #c2410c; --tkb: #fdba74; --tkp: #fff7ed; }
#eguru-app .tools-kad[data-warna="f"] { --tka: #4338ca; --tkb: #a5b4fc; --tkp: #eef2ff; }
#eguru-app .tools-kad[data-warna="g"] { --tka: #475569; --tkb: #cbd5e1; --tkp: #f1f5f9; }
#eguru-app .tools-kump { font-size: var(--t4); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 8px; }
#eguru-app .tools-kump:first-of-type { margin-top: 6px; }
#eguru-app.dark-theme .tools-kad { --tkp: color-mix(in srgb, var(--tka) 18%, var(--card-bg)); }
#eguru-app .tools-kad-pautan { display: flex; flex-direction: column; width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
#eguru-app .tools-kad-pautan:hover { border-color: var(--tka); box-shadow: var(--shadow); transform: translateY(-2px); }
#eguru-app .tools-kad-pautan:focus-visible { outline: 3px solid var(--tka); outline-offset: 2px; }
#eguru-app .tools-kad-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#eguru-app .tools-kad-ikon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tka), color-mix(in srgb, var(--tka) 70%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--tka) 30%, transparent); }
#eguru-app .tools-kad-ikon svg { width: 38px; height: 38px; display: block; overflow: visible; }
#eguru-app .tools-kad-ikon .tk-a { fill: #fff; }
#eguru-app .tools-kad-ikon .tk-a2 { fill: var(--tkb); }
#eguru-app .tools-kad-ikon .tk-b { fill: var(--tka); stroke: var(--tka); stroke-width: 1.6; }
#eguru-app .tools-kad-ikon .tk-c { fill: none; stroke: var(--tkb); stroke-width: 2; stroke-linecap: round; }
#eguru-app .tools-kad[data-warna="c"] .tools-kad-ikon .tk-b { fill: none; stroke: var(--tka); stroke-width: 1.8; }
#eguru-app .tools-kad[data-warna="c"] .tools-kad-ikon path.tk-a[style] { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#eguru-app .tools-kad-ikon .tk-t1 { fill: var(--tka); font: 800 15px 'Inter', sans-serif; }
#eguru-app .tools-kad-ikon .tk-t2 { fill: #fff; font: 700 17px 'Scheherazade New', serif; }
#eguru-app .tools-kad-kat { font-size: var(--t2); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-full); background: var(--tkp); color: var(--tka); white-space: nowrap; }
#eguru-app.dark-theme .tools-kad-kat { color: var(--tkb); }
#eguru-app .tools-kad-nama { margin: 0; font-size: var(--t7, 1.05em); font-weight: 800; line-height: 1.3; color: var(--text); }
#eguru-app .tools-kad-sub { margin: 2px 0 0; font-size: var(--t3); font-weight: 700; color: var(--tka); }
#eguru-app.dark-theme .tools-kad-sub { color: var(--tkb); }
#eguru-app .tools-kad-desk { margin: 10px 0 14px; font-size: var(--t4); line-height: 1.55; color: var(--text-muted); min-height: calc(1.55em * 3); }
#eguru-app .tools-kad-bawah { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
#eguru-app .tools-kad-tag { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
#eguru-app .tools-kad-tag span { font-size: var(--t2); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
#eguru-app .tools-kad-buka { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: var(--t4); font-weight: 800; color: var(--tka); }
#eguru-app.dark-theme .tools-kad-buka { color: var(--tkb); }
#eguru-app .tools-kad-buka svg { width: 16px; height: 16px; fill: currentColor; transition: transform .15s ease; }
#eguru-app .tools-kad-pautan:hover .tools-kad-buka svg { transform: translateX(3px); }
#eguru-app .tools-hab-kaki { margin-top: 16px; }
/* Butang kembali di atas setiap tool (Prompter, Jawi, Tajwid …). */
#eguru-app .tools-balik { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card-bg); color: var(--text); font-size: var(--t4); font-weight: 700; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
#eguru-app .tools-balik:hover { border-color: var(--primary); color: var(--primary-text); }
#eguru-app .tools-balik:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
#eguru-app .tools-balik svg { width: 18px; height: 18px; fill: currentColor; }
/* TELEFON (permintaan pemilik): 3 lajur, IKON + TAJUK sahaja — deskripsi,
   subtajuk, kategori dan tag disorok (masih dalam HTML untuk SEO). */
@media (max-width: 600px) {
    #eguru-app .tools-hab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #eguru-app .tools-kad-pautan { padding: 12px 6px; align-items: center; text-align: center; }
    #eguru-app .tools-kad-atas { margin: 0 0 8px; justify-content: center; }
    #eguru-app .tools-kad-ikon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; }
    #eguru-app .tools-kad-ikon svg { width: 32px; height: 32px; }
    #eguru-app .tools-kad-kat, #eguru-app .tools-kad-sub, #eguru-app .tools-kad-desk, #eguru-app .tools-kad-bawah { display: none; }
    #eguru-app .tools-kad-nama { font-size: var(--t4); line-height: 1.25; }
    #eguru-app .tools-kump { margin: 14px 0 6px; }
}

/* ===== TOOLS DOKUMEN (sg_dokumen.js, 2026-09-24): Pencatat Minit, OPR, Minit Curai ===== */
#eguru-app .dok-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
#eguru-app .dok-bar-kiri { display: flex; flex-direction: column; min-width: 0; }
#eguru-app .dok-tajuk-semasa { font-weight: 800; font-size: var(--t6); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#eguru-app .dok-simpan-status { font-size: var(--t3); color: var(--text-muted); }
#eguru-app .dok-bar-kanan { display: flex; gap: 6px; flex-wrap: wrap; }
#eguru-app .dok-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
#eguru-app .dok-hasil-lekat { position: sticky; top: 12px; }
#eguru-app .dok-seksyen { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px 12px; margin: 0 0 12px; min-width: 0; }
#eguru-app .dok-seksyen legend { font-weight: 800; font-size: var(--t4); padding: 0 6px; color: var(--text); }
#eguru-app .dok-nota { font-size: var(--t3); color: var(--text-muted); margin: 0 0 8px; }
#eguru-app .dok-f { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; min-width: 0; }
#eguru-app .dok-f > span { font-size: var(--t3); font-weight: 700; color: var(--text-muted); }
#eguru-app .dok-f input, #eguru-app .dok-f textarea, #eguru-app .dok-f select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 9px; font-size: var(--t5); background: var(--card-bg); color: var(--text); }
#eguru-app .dok-f textarea { resize: vertical; line-height: 1.5; }
#eguru-app .dok-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
#eguru-app .dok-grid2 .dok-f-penuh, #eguru-app .dok-f-penuh { grid-column: 1 / -1; }
#eguru-app .dok-jenis-baris { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 10px; }
#eguru-app .dok-grid3 { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 10px; }
#eguru-app .dok-sulit { color: var(--danger-text); font-weight: 700; }
#eguru-app .dok-patuh { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px; font-size: var(--t4); }
#eguru-app .dok-patuh.ok { background: var(--success-light, #ecfdf5); }
#eguru-app .dok-patuh.amaran { background: color-mix(in srgb, var(--danger) 7%, var(--card-bg)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
#eguru-app .dok-patuh summary { cursor: pointer; font-weight: 700; color: var(--text); }
#eguru-app .dok-patuh ul { list-style: none; margin: 8px 0 0; padding: 0; }
#eguru-app .dok-patuh li { padding: 2px 0; color: var(--text); }
#eguru-app .dok-patuh li.gagal { color: var(--danger-text); font-weight: 600; }
#eguru-app .dok-patuh li.saran { color: var(--text-muted); }
#eguru-app .dok-patuh li.lulus { color: var(--primary-text); }
#eguru-app .dok-cek { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t4); color: var(--text); }
#eguru-app .dok-cek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }
#eguru-app .dok-item { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 8px; background: var(--bg); }
#eguru-app .dok-item-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--t4); }
#eguru-app .dok-item-kepala b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .dok-item-aksi { display: inline-flex; gap: 4px; flex: 0 0 auto; }
#eguru-app .dok-item-aksi button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text); cursor: pointer; font-weight: 800; }
#eguru-app .dok-item-aksi button:disabled { opacity: .35; cursor: default; }
#eguru-app .dok-tambah { margin-top: 2px; }
#eguru-app .dok-logo-baris { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
#eguru-app .dok-logo-kotak { width: 72px; height: 72px; border: 1px dashed var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: #fff; flex: 0 0 72px; }
#eguru-app .dok-logo-kotak img { max-width: 64px; max-height: 64px; }
#eguru-app .dok-logo-kotak span { font-size: var(--t2); color: #9ca3af; text-align: center; }
#eguru-app .dok-logo-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#eguru-app .dok-gambar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#eguru-app .dok-gambar { position: relative; }
#eguru-app .dok-gambar img { width: 100%; height: 84px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
#eguru-app .dok-gambar input { width: 100%; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; font-size: var(--t3); }
#eguru-app .dok-gambar button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
#eguru-app .dok-gambar-tambah { height: 84px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-muted); cursor: pointer; font-weight: 700; }
#eguru-app .dok-hasil-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#eguru-app .dok-segmen { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 2px; background: var(--bg); }
#eguru-app .dok-segmen button { border: none; background: transparent; padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--t4); font-weight: 700; color: var(--text-muted); cursor: pointer; }
#eguru-app .dok-segmen button.aktif { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
#eguru-app .dok-templat-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t3); font-weight: 700; color: var(--text-muted); }
#eguru-app .dok-templat-lbl select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; font-size: var(--t4); background: var(--card-bg); color: var(--text); }
#eguru-app .dok-pratonton { background: #e5e7eb; border-radius: var(--radius-md); overflow: hidden; position: relative; min-height: 200px; }
#eguru-app .dok-pratonton iframe { width: 800px; height: 1123px; border: 0; transform-origin: 0 0; display: block; background: #e5e7eb; }
#eguru-app .dok-eksport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
#eguru-app .dok-ai { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; background: var(--bg); }
#eguru-app .dok-ai-auto { background: linear-gradient(135deg, var(--ultra-dark, #6d28d9), #4f46e5); color: #fff; border: none; margin-bottom: 8px; }
#eguru-app .dok-ai-tampal summary { cursor: pointer; font-size: var(--t4); font-weight: 700; color: var(--text); margin-bottom: 6px; }
#eguru-app .dok-ai-tampal textarea { margin: 6px 0; font-size: var(--t4); }
#eguru-app .dok-ai-kunci { border: 1px solid color-mix(in srgb, var(--ultra-dark, #6d28d9) 30%, transparent); background: color-mix(in srgb, var(--ultra-dark, #6d28d9) 8%, var(--card-bg)); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px; font-size: var(--t4); color: var(--text); }
#eguru-app .dok-setia { margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--t4); line-height: 1.5; }
#eguru-app .dok-setia.ok { background: var(--success-light, #ecfdf5); color: var(--primary-text); }
#eguru-app .dok-setia.amaran { background: var(--danger-light); color: var(--danger-text); }
#eguru-app .dok-simpanan-baris { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
#eguru-app .dok-simpanan-baris small { display: block; color: var(--text-muted); font-size: var(--t3); }
@media (max-width: 900px) {
    #eguru-app .dok-grid { grid-template-columns: minmax(0, 1fr); }
    #eguru-app .dok-hasil-lekat { position: static; }
}
@media (max-width: 600px) {
    #eguru-app .dok-grid2, #eguru-app .dok-grid3, #eguru-app .dok-jenis-baris { grid-template-columns: minmax(0, 1fr); }
    #eguru-app .dok-gambar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==================================================================
   MENU "LAGI ▾" SEJAGAT (Hick's Law, 2026-09-25)
   Satu rupa untuk semua menu tindakan jarang. Kelakuan (tutup luar/Esc,
   terbalik ke atas) dalam sg_utama.js — lagiLetak/lagiTutupSemua.
   ================================================================== */
#eguru-app .pm-lagi.ke-atas > .pm-lagi-menu { top: auto; bottom: calc(100% + 4px); }
#eguru-app .pm-lagi.ke-kiri > .pm-lagi-menu { right: auto; left: 0; }
#eguru-app .pm-lagi-menu { gap: 1px; max-width: min(320px, calc(100vw - 24px)); }
#eguru-app .pm-lagi-menu > button, #eguru-app .pm-lagi-menu > a {
    display: flex; align-items: center; gap: 9px; width: 100%; text-decoration: none; white-space: nowrap; }
#eguru-app .pm-lagi-menu > a { padding: 9px 12px; border-radius: var(--radius-xs, 6px); font-size: var(--t5); font-weight: 600; color: var(--text); }
#eguru-app .pm-lagi-menu > a:hover { background: var(--bg); color: var(--primary-text); }
#eguru-app .pm-lagi-menu svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: .8; }
#eguru-app .pm-lagi-menu .bahaya { color: var(--danger-text, var(--danger)); }
#eguru-app .pm-lagi-menu .bahaya:hover { background: var(--danger-light); color: var(--danger-text, var(--danger)); }
#eguru-app .pm-lagi-pisah { height: 1px; background: var(--border); margin: 4px 6px; flex-shrink: 0; }
#eguru-app .pm-lagi-tajuk { padding: 6px 12px 2px; font-size: var(--t2, 11px); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
#eguru-app .pm-lagi > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Telefon: baris butang yang berakhir dengan menu Lagi kekal sebaris (peraturan
   .form-row di atas hanya terpakai bila SEMUA anak ialah .btn). */
@media (max-width: 600px) {
    #eguru-app .form-row:has(> .pm-lagi):not(:has(> :not(.btn, .pm-lagi))) { flex-wrap: nowrap; gap: 8px; }
    #eguru-app .form-row:has(> .pm-lagi):not(:has(> :not(.btn, .pm-lagi))) > .btn { flex: 1 1 0 !important; width: auto !important; padding-left: 8px !important; padding-right: 8px !important; }
}

/* ==================================================================
   LIPATAN "GUNA AI LUAR" SEJAGAT (Hick's Law, 2026-09-25)
   <details class="ai-luar"><summary>Guna AI luar (ChatGPT / Gemini / Claude) — salin &amp; tampal</summary> … </details>
   aiLuarSegar()/bukaDetailsInduk() dalam sg_utama.js.
   ================================================================== */
#eguru-app details.ai-luar { border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg); margin-top: 10px; }
#eguru-app details.ai-luar > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: var(--t4); font-weight: 700; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px; }
#eguru-app details.ai-luar > summary::-webkit-details-marker { display: none; }
#eguru-app details.ai-luar > summary::before { content: '\25B8'; font-size: .9em; transition: transform .15s; }
#eguru-app details.ai-luar[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.ai-luar > summary:hover { color: var(--primary-text); }
#eguru-app details.ai-luar > :not(summary) { margin: 0 12px 12px; }

/* ===== HICK EKSPORT (2026-09-25) ===== */
/* Bar eksport ringkas: [PDF / Cetak] [Eksport ▾] (eksportButang, sg_cetak.js).
   Rupa & kelakuan menu = .pm-lagi sejagat di atas; di sini hanya susun atur bar.
   Desktop tiada peraturan tambahan: .pm-lagi sudah flex 0 0 auto, dan butang utama
   & ringkasan menu sama tinggi (kedua-duanya .btn-sm). */
/* Telefon: dua kawalan kekal SEBARIS dan berkongsi lebar baris seperti baris
   .form-row butang. flex-basis AUTO (bukan 0 seperti .pm-lagi sejagat) kerana bar
   ini juga duduk dalam bekas yang mengecut ikut kandungan (.pmk-aksi, .dok-eksport,
   lajur kanan senarai kertas Exam) — asas 0 di situ memotong label "PDF / Cetak".
   Bar padat dikenal pasti dengan kelas .eksport-ringkas (dijana eksportButang), BUKAN
   :has(): pelayar tanpa :has() menggugurkan seluruh peraturan berkoma yang memuatnya. */
@media (max-width: 600px) {
    #eguru-app .eksport-baris.eksport-ringkas { flex-wrap: nowrap; }
    #eguru-app .eksport-baris.eksport-ringkas > .btn,
    #eguru-app .eksport-baris > .pm-lagi.eksport-lagi { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
}



/* ===== HICK NAV (2026-09-25) ===== */
/* Navigasi global ikut Hick's Law: kurangkan pilihan yang kelihatan serentak
   tanpa membuang satu pun destinasi.
     1. Akordion sidebar EKSKLUSIF — logik dalam sg_utama.js (tiada CSS baharu).
     2. Palet "Cari modul" (#topbar-cari + #cari-modal, Ctrl/⌘+K atau "/").
     3. Sheet Guru telefon dikumpul di bawah tajuk (Akaun · Bantuan & lain-lain ·
        Paparan · Log Keluar) dan dipadatkan supaya muat 62dvh pada 375×667.
     4. Ikon Guru bar bawah menyala semasa di halaman yang tinggal dalam sheet itu.
   ================================================================== */

/* --- 2. Topbar: butang Cari mesti muat pada telefon ---------------------
   Diukur (garis dasar, sebelum butang ini): pada 375px topbar Percuma SUDAH
   13px terlebih — teks "SistemGuru.My" menyusup ke bawah cip pengguna — dan
   butang 38px + jurang menambah 44px lagi. ≤440px: nama pengguna disorok
   (ia label sahaja, tiada tindakan; nama penuh ada di halaman Akaun), butang
   ikon 34px, jurang & padding topbar lebih rapat. Loceng, lencana pelan,
   Log Keluar dan tema kekal di tempatnya. ≤359px (telefon 320px) teks jenama
   diundur dan logo sahaja tinggal. */
@media (max-width: 440px) {
    #eguru-app .topbar { padding: 0 10px !important; }
    #eguru-app .topbar-right { gap: 4px !important; }
    #eguru-app .topbar-right .icon-btn { width: 34px !important; height: 34px !important; padding: 7px !important; }
    #eguru-app .user-chip-name { display: none; }
    #eguru-app .user-chip { gap: 5px; padding: 5px 8px 5px 6px; }
}
@media (max-width: 359px) {
    #eguru-app .topbar-left > :not(.topbar-logo) { display: none; }
}

/* --- 2. Palet Cari modul --------------------------------------------------
   Helaian ikut "MODAL: SATU SAIZ UNTUK SEMUA" + format Nota telefon
   (.rph-modal-sheet + .rph-modal-head); hanya ISI yang dihadkan kepada satu
   lajur di tengah supaya kotak carian & baris tidak meregang 1,400px. */
#eguru-app .cari-isi { max-width: 760px; margin: 0 auto; }
#eguru-app .cari-kotak { position: relative; margin-bottom: var(--sp-3); }
#eguru-app .cari-kotak > svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; fill: var(--text-muted); pointer-events: none;
}
#eguru-app .cari-kotak .form-control { padding-left: 42px !important; font-size: var(--t7) !important; }
#eguru-app #cari-modul-hasil { display: flex; flex-direction: column; gap: 2px; }
#eguru-app #cari-modul-hasil .lagi-sec { padding: 10px 12px 3px; }
#eguru-app #cari-modul-hasil .lagi-sec:first-child { padding-top: 2px; }
#eguru-app .cari-baris { padding: 10px 12px; min-width: 0; }
#eguru-app .cari-baris .cari-lbl { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .cari-meta { margin-left: auto; flex: 0 0 auto; padding-left: 8px; font-size: var(--t3); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
#eguru-app .cari-tag {
    flex: 0 0 auto; font-size: var(--t1); font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
    padding: 1px 7px; border-radius: var(--radius-full); background: var(--primary); color: #fff;
}
#eguru-app .cari-baris .cari-chev { width: 16px; height: 16px; margin-left: 2px; opacity: .55; }
/* Serlahan papan kekunci (↑/↓) berbeza daripada .aktif ("anda di sini", hijau
   lembut — sama seperti bubble kumpulan): garis kiri + latar, supaya kedua-dua
   isyarat boleh wujud pada baris yang sama. */
#eguru-app .cari-baris.cari-pilih { background: var(--bg); box-shadow: inset 3px 0 0 var(--primary); }
#eguru-app .cari-baris.aktif.cari-pilih { background: rgba(5,150,105,.14); }
#eguru-app .cari-baris:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
#eguru-app .cari-baris.cari-nav .cari-lbl { font-weight: 700; }
#eguru-app .cari-kosong { padding: 12px; color: var(--text-muted); font-size: var(--t5); line-height: 1.5; }
#eguru-app .cari-kaki {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
#eguru-app .cari-petua { font-size: var(--t3); color: var(--text-muted); line-height: 1.8; }
#eguru-app .cari-petua kbd {
    font: inherit; font-weight: 700; padding: 0 5px; margin: 0 1px;
    border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
    background: var(--bg); color: var(--text);
}
/* Skrin sentuh / telefon: tiada papan kekunci fizikal — petua disorok, Tutup kekal. */
@media (hover: none), (max-width: 600px) {
    #eguru-app .cari-petua { display: none; }
    #eguru-app .cari-kaki { justify-content: flex-end; }
}

/* --- 3. Sheet Guru telefon: dikumpul & padat ------------------------------
   Diukur pada 375×667 (had bubble 62dvh = 413px): versi rata lama sudah 462px
   dan menatal. Tiga tajuk .lagi-sec menambah tinggi, jadi baris sheet INI
   dipadatkan (8px, bukan 13px — masih ≥38px tinggi sentuh) dan Ejen AI +
   Saiz Teks berkongsi SATU baris. Bubble kumpulan (#grp-sheet) tidak disentuh. */
#eguru-app #akaun-sheet .nav-pop-title { padding: 2px 10px 0; }
#eguru-app #akaun-sheet .lagi-sec { padding: 6px 12px 2px; }
#eguru-app #akaun-sheet .lagi-item { padding: 8px 12px; }
#eguru-app #akaun-sheet .lagi-pisah { margin: 4px 10px; }
#eguru-app #akaun-sheet .lagi-bahaya { color: var(--danger); }
/* Salinan lencana kelas tertinggal (#nav-tak-hadir-badge) pada baris Akaun & Pelan. */
#eguru-app .lagi-lencana {
    margin-left: auto; flex: 0 0 auto; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--radius-full); background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 19px; text-align: center;
}
#eguru-app .akaun-paparan { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
#eguru-app .akaun-paparan > .ejen-ctl,
#eguru-app .akaun-paparan > .fs-ctl { flex: 1 1 auto; min-width: 0; margin: 0; border-top: 0; padding: 5px 12px; }
#eguru-app .akaun-paparan .ejen-ctl-lbl,
#eguru-app .akaun-paparan .fs-ctl-lbl {
    font-size: var(--t3); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}

/* --- 4. Ikon Guru menyala (telefon) ---------------------------------------
   Gaya SAMA seperti item aktif bar bawah (warna + pil ikon + benjolan atas).
   Desktop tidak perlu: setiap halaman itu ada baris sidebar sendiri. */
@media (max-width: 899px) {
    #eguru-app .bottom-nav #nav-profile.ada-aktif-m { color: var(--primary-text) !important; }
    #eguru-app .bottom-nav #nav-profile.ada-aktif-m .nav-icon-wrap { background: rgba(5,150,105,.1) !important; }
    #eguru-app .bottom-nav #nav-profile.ada-aktif-m::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
}


/* ===== HICK HOME (2026-09-25) ===== */
/* Halaman Utama ikut Hick's Law — satu tindakan disyorkan, tindakan jarang di
   belakang pendedahan. Logik dalam sg_utama.js (homeLangkahHtml, homeTogolTH,
   homeAuthBuka) & sg_akaun.js (langkahSemak). Peraturan sedia ada tidak diubah;
   blok ini hanya menambah (dan menindih .today-listtitle menjadi baris flex). */

/* --- Jalur "Langkah seterusnya" dalam hero (hanya bila ada langkah belum siap) --- */
#eguru-app .home-langkah {
    position: relative; z-index: 1;             /* di atas bulatan hiasan ::before hero */
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    margin-top: 12px; padding: 10px 12px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
    border-radius: var(--radius-md); color: #fff;
}
#eguru-app .home-langkah-teks { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#eguru-app .home-langkah-kicker { font-size: var(--t1); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
#eguru-app .home-langkah-tajuk { font-size: var(--t6); font-weight: 800; line-height: 1.3; }
#eguru-app .home-langkah-sub { font-size: var(--t3); line-height: 1.45; opacity: .92; }
#eguru-app .home-langkah-sub b { font-weight: 800; }
#eguru-app .home-langkah-aksi { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
#eguru-app .home-langkah-btn { padding: 9px 16px !important; }
#eguru-app .home-langkah-btn svg { width: 15px !important; height: 15px !important; }
#eguru-app .home-langkah-pautan { color: #fff; font-size: var(--t4); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: 6px 2px; }
#eguru-app .home-langkah-pautan:hover { opacity: .85; }
/* Butang Takwim/Solat jadi gaya HANTU bila jalur dipapar — jalur ialah
   satu-satunya butang berisi dalam hero (tindakan disyorkan yang tunggal). */
#eguru-app .combo-hero:has(.home-langkah) .hero-btn {
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); box-shadow: none;
}
#eguru-app .combo-hero:has(.home-langkah) .hero-btn:hover { background: rgba(255,255,255,.12); box-shadow: none; }
#eguru-app .combo-hero:has(.home-langkah) .hero-btn .hero-btn-count { background: rgba(255,255,255,.2); }
@media (max-width: 600px) {
    #eguru-app .home-langkah { padding: 10px; gap: 8px; }
    #eguru-app .home-langkah-teks { flex-basis: 100%; }
    #eguru-app .home-langkah-aksi { flex: 1 1 100%; }
    #eguru-app .home-langkah-btn { flex: 1 1 auto; }
}

/* --- Tajuk Jadual Hari Ini + pautan senyap "Saya tidak hadir…" --- */
#eguru-app .today-listtitle { display: flex; align-items: center; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
#eguru-app .today-listtitle-t { min-width: 0; }
#eguru-app .today-th-togol {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 6px 2px; cursor: pointer;
    font-size: var(--t3); font-weight: 600; color: var(--text-muted);
    text-transform: none; letter-spacing: 0;     /* tajuk induk HURUF BESAR */
    text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap;
}
#eguru-app .today-th-togol:hover { color: var(--danger-text); }
#eguru-app .today-th-togol.aktif { color: var(--primary-text); font-weight: 700; text-decoration: none; }
#eguru-app .today-th-togol .gi { width: 14px; height: 14px; }
#eguru-app .today-th-nota { font-size: var(--t3); color: var(--text-muted); line-height: 1.45; margin: 0 0 8px; }

/* --- Butang "Isi RPH" (kad kelas tanpa RPH; ganti teks buntu) ---
   Garis putus-putus hijau: kedudukan sama dengan Butiran (hijau berisi) tetapi
   jelas "belum ada". Di telefon ia jubin ikon seperti butang lain (peraturan
   .today-actions-l > button sedia ada); nama pada title/aria-label. */
#eguru-app .today-isirph-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px;
    background: transparent; color: var(--primary-text); border: 1.5px dashed var(--primary);
    border-radius: var(--radius-sm); padding: 5px 11px; font-size: var(--t4); font-weight: 700; cursor: pointer;
}
#eguru-app .today-isirph-btn:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
#eguru-app .today-isirph-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* --- Kawalan ketidakhadiran guru dalam tema GELAP ---
   .t-tidakhadir / .btn-dayabsen / .t-undo / .today-absen-tag (sekitar baris
   4033-4040) membawa latar #fff/#FEF2F2 tegar — dalam tema gelap ia kotak putih.
   Kini ia hanya muncul dalam mod "Saya tidak hadir…", jadi butang seluruh hari
   menjadi jalur putih selebar kad. Token gelap sedia ada; tema cerah tidak berubah. */
#eguru-app.dark-theme .t-tidakhadir,
#eguru-app.dark-theme .btn-dayabsen,
#eguru-app.dark-theme .t-undo { background: var(--card-bg); color: var(--danger-text); border-color: rgba(248,113,113,.45); }
#eguru-app.dark-theme .t-tidakhadir:hover,
#eguru-app.dark-theme .btn-dayabsen:hover { background: var(--danger-light); }
#eguru-app.dark-theme .today-absen-tag { background: var(--danger-light); color: var(--danger-text); border-color: rgba(248,113,113,.45); }

/* --- Tetamu: satu butang berisi + satu garis + pautan teks --- */
#eguru-app .guest-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#eguru-app .guest-aksi .btn-info { padding: 10px 24px !important; }
#eguru-app .guest-aksi .btn-outline { padding: 9px 18px !important; }
/* Telefon: dua butang SEBARIS (peraturan butang telefon) — label ringkas
   "Cuba Tools" (.lbl-lanjut disorok) dan padding dipadatkan. Balutan kekal
   sebagai sandaran bagi skrin yang benar-benar tidak muat, bukan teks terpotong. */
@media (max-width: 600px) {
    #eguru-app .guest-aksi .btn { flex: 1 1 auto; justify-content: center; padding: 10px 10px !important; }
}
#eguru-app .guest-pautan, #eguru-app .home-why-pautan { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--t4); }
#eguru-app .guest-pautan { justify-content: center; margin-top: 8px; }
#eguru-app .home-why-pautan { margin: 0; }
#eguru-app .guest-pautan a, #eguru-app .home-why-pautan a { display: inline-block; padding: 6px 2px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#eguru-app .guest-pautan a { color: var(--info-text); }
#eguru-app .home-why-pautan a { color: var(--primary-text); }
#eguru-app .guest-pautan .dot, #eguru-app .home-why-pautan .dot { color: var(--text-light); }
/* Telefon: dua pautan panjang kad "Kenapa" bertindan — titik pemisah tergantung di hujung baris. */
@media (max-width: 600px) {
    #eguru-app .home-why-pautan { flex-direction: column; align-items: flex-start; }
    #eguru-app .home-why-pautan .dot { display: none; }
}


/* ===== HICK AKAUN (2026-09-25) ===== */
/* Pakej Guru/Akaun, Murid, Support & Flow Tutorial (Hick's Law). Semua peraturan
   baharu pakej ini di sini sahaja; tiada peraturan lama diubah. */

/* --- Flow Tutorial: suis "belum dibina" disorok oleh renderFlow() bila tiada
   kad ber-soon. .flow-suis ialah display:flex, jadi [hidden] perlu peraturan
   sendiri (gaya UA [hidden] kalah kepada pemilih ber-id). */
#eguru-app .flow-suis[hidden] { display: none; }

/* --- Akaun: kad WAJIB pertama yang belum lengkap (.perlu, updateAkaunUI) —
   jalur kiri amaran + nilai "Belum lengkap" sebagai pil, supaya kad itu menonjol
   dalam kumpulannya tanpa warna teks berkontras rendah. */
#eguru-app #akpanel-akaun .card.perlu { border-left: 3px solid var(--accent) !important; }
#eguru-app #akpanel-akaun .card.perlu .set-val.muted { background: var(--accent-light); color: var(--text); font-weight: 700;
    padding: 2px 9px; border-radius: var(--radius-full); }

/* --- Akaun › Keselamatan akaun › "Zon bahaya": lipatan <details> berbingkai
   merah; Padam Akaun hanya kelihatan selepas guru membukanya dengan sengaja. */
#eguru-app .ak-zon-bahaya { margin-top: 16px; border: 1px solid rgba(239, 68, 68, .35); border-radius: var(--radius-sm); }
#eguru-app .ak-zon-bahaya > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: var(--t4); font-weight: 800;
    color: var(--danger-text); display: flex; align-items: center; gap: 8px; }
#eguru-app .ak-zon-bahaya > summary::-webkit-details-marker { display: none; }
#eguru-app .ak-zon-bahaya > summary::before { content: '\25B8'; font-size: .9em; transition: transform .15s; }
#eguru-app .ak-zon-bahaya[open] > summary::before { transform: rotate(90deg); }
#eguru-app .ak-zon-bahaya > summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
#eguru-app .ak-zon-bahaya > :not(summary) { margin: 0 12px 12px; }

/* --- Support: kotak tulis dalam keadaan rehat (kmKomposerRehat/kmKomposerBangun).
   !important kerana #km-bug-fields & #km-tier-note dipapar melalui style sebaris
   oleh kmPilihKategori — lapisan rehat mesti menang tanpa mengubah JS itu. */
#eguru-app #view-komuniti .km-composer.rehat #km-anon-label,
#eguru-app #view-komuniti .km-composer.rehat #km-cat-hint,
#eguru-app #view-komuniti .km-composer.rehat #km-bug-fields,
#eguru-app #view-komuniti .km-composer.rehat #km-tier-note { display: none !important; }
#eguru-app #view-komuniti .km-composer.rehat .km-composer-actions { justify-content: flex-end; }

/* --- Murid › Portal Murid: butang utama + "Lagi ▾" dalam sel jadual. <details>
   ialah blok secara lalai — tanpa ini ia jatuh ke baris baharu di bawah butang. */
#eguru-app .pm-portal-btn .pm-lagi { display: inline-block; vertical-align: middle; margin-left: 4px; text-align: left; white-space: normal; }
#eguru-app .pm-portal-btn .pm-lagi > summary { white-space: nowrap; margin-left: 0; }
/* Butang utama (btn-primary, tanpa bingkai) 4px lebih rendah daripada ringkasan
   "Lagi ▾" (btn-outline, bingkai 2px) di sebelahnya — bingkai lutsinar
   menyamakan ketinggian (dahulu kedua-dua butang sel ini btn-outline).
   background-origin supaya gradien tidak berulang di jalur bingkai. */
#eguru-app .pm-portal-btn > .btn-primary { border: 2px solid transparent !important; background-origin: border-box !important; vertical-align: middle; }
/* .pmk-wrap menatal mendatar (overflow-x:auto → overflow-y juga auto), jadi menu
   mutlak dipotong di dalamnya. Dengan 3+ baris lagiLetak cukup (terbalik ke atas);
   jadual 1–2 baris tiada ruang di atas ATAU di bawah, jadi bekas itu dipanjangkan
   sementara menu terbuka — lagiLetak mengukur SELEPAS padding ini berkuat kuasa
   (peristiwa 'toggle'), maka menu dibuka ke bawah dalam ruang itu. */
/* 2026-10: menu kini sehingga 3 item (Tukar Kod · PIN seorang murid… · Jana semula
   SEMUA PIN) — baris PERTAMA jadual 3 kelas pun tiada ruang cukup di atas atau di
   bawah, jadi bekas dipanjangkan bagi SEMUA jadual (dahulu: 1–2 baris sahaja, 96px). */
#eguru-app #pm-portal-senarai .pmk-wrap:has(details.pm-lagi[open]) { padding-bottom: 124px; }
/* 2026-10: telefon (≤600px) — jadual Portal Murid menolak butang Jana Kod / PIN
   keluar skrin (perlu leret mendatar). Di sini setiap kelas menjadi KAD:
   baris 1 nama kelas + status, baris 2 Murid · Kod · PIN (label daripada
   data-l, thead disorok), baris 3 butang. Tiada tatal mendatar, dan menu
   Lagi ▾ tidak lagi dipotong oleh .pmk-wrap (overflow visible). */
@media (max-width: 600px) {
    #eguru-app #pm-portal-senarai .pmk-wrap { overflow: visible; border: 0; border-radius: 0; padding-bottom: 0 !important; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl,
    #eguru-app #pm-portal-senarai .pm-portal-tbl tbody { display: block; width: 100%; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl thead { display: none; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl tr { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 8px 16px;
        padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pmk-nama { grid-column: 1 / 4; grid-row: 1; position: static; background: none; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pm-pst { grid-column: 4; grid-row: 1; justify-self: end; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pm-pd { grid-row: 2; white-space: nowrap; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pm-pd::before { content: attr(data-l) " "; color: var(--text-muted); font-size: var(--t3); }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pm-portal-btn { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
    #eguru-app #pm-portal-senarai .pm-portal-tbl td.pm-portal-btn:empty { display: none; }
    #eguru-app #pm-portal-senarai .pm-portal-btn .btn,
    #eguru-app #pm-portal-senarai .pm-portal-btn .pm-lagi { margin-left: 0; }
}
/* 2026-10: modal "PIN seorang murid…" — satu baris setiap murid: nama, status, butang. */
#eguru-app .pmpin-senarai { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
#eguru-app .pmpin-m { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
#eguru-app .pmpin-m:last-child { border-bottom: 0; }
#eguru-app .pmpin-nama { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#eguru-app .pmpin-m .btn { width: auto !important; flex: 0 0 auto; }

/* --- Murid › Kehadiran: dua butang (Ambil waktu terakhir + Cetak & Muat turun ▾)
   sebaris di telefon; " belum direkod" ialah .lbl-lanjut (disorok ≤600px) supaya
   kedua-duanya muat. flex 1 1 auto (bukan 0): pada telefon sempit ia masih boleh
   berbalut ke dua baris dan bukannya memotong label. */
@media (max-width: 600px) {
    #eguru-app .pmk-aksi { flex: 1 1 100%; }
    #eguru-app .pmk-aksi > .btn, #eguru-app .pmk-aksi > .pm-lagi { flex: 1 1 auto !important; }
    /* .pmk-aksi .btn { width:auto !important } (peraturan lama) mengatasi lebar 100%
       ringkasan .pm-lagi di telefon — pulihkan supaya butang mengisi selnya. */
    #eguru-app .pmk-aksi > .pm-lagi > summary { width: 100% !important; }
}


/* ===== HICK PDPC (2026-09-25) ===== */
/* Pakej PdPC (RPT · RPH · Nota · Latihan): satu tindakan utama bagi setiap
   keputusan, tindakan jarang satu klik lebih dalam. Semua blok di bawah
   BAHARU; tiada peraturan sedia ada diubah di tempatnya. */

/* --- RPH: butang utama ikut pelan (P1) ---
   Sync RPT → RPH ialah btn-primary, tetapi ia data-pelan="pro". Bagi Percuma
   pelanTerap() menandanya .pelan-kunci; di sini ia diberi rupa btn-outline
   supaya TIADA butang berkunci yang kelihatan sebagai tindakan utama. */
#eguru-app .btn.btn-utama-pelan.pelan-kunci {
    background: transparent !important; color: var(--primary-text) !important;
    border: 2px solid var(--primary) !important; box-shadow: none !important; transform: none !important; }

/* --- RPH: menu "Lagi ▾" di sebelah bilangan kelas (P6a) ---
   Kekal kecil seperti .btn-reset-kecil lama; peraturan telefon sejagat
   (.pm-lagi flex:1 1 0) akan meregangnya selebar bar. */
#eguru-app .jadual-reset-bar > .pm-lagi { flex: 0 0 auto !important; }
#eguru-app .jadual-reset-bar > .pm-lagi > summary { width: auto !important; padding: 5px 11px !important; font-size: var(--t3) !important; }
@media (max-width: 560px) { #eguru-app .jadual-reset-bar > .pm-lagi { margin-left: auto; } }

/* --- Editor RPH: menu "Lagi ▾" dalam kepala helaian yang melekat (P6b) --- */
#eguru-app .rph-modal-head > .pm-lagi { margin-left: auto; flex: 0 0 auto !important; }
#eguru-app .rph-modal-head > .pm-lagi > summary { width: auto !important; padding: 6px 12px !important; font-size: var(--t4) !important; }
/* Titik ambar: "Tampal RPH yang Disalin" sudah tersedia (copyRph memaparkan
   #btn-tampal-rph). Tanpanya Tampal tersembunyi dalam menu tertutup dan guru
   tidak tahu salinan sedang menunggu. */
#eguru-app #rph-editor-lagi:has(#btn-tampal-rph:not([style*="none"])) > summary::after {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* --- Lipatan tetapan berringkasan: RPT "Tetapan agihan" (P8) & modal
   "Tetapan Penjanaan" RPH (P7b). Ringkasan = nilai semasa, jadi guru tahu
   apa yang akan digunakan tanpa membuka. --- */
#eguru-app details.rpt-tetapan, #eguru-app details.ai-tetapan {
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); margin: 0 0 12px; }
#eguru-app details.rpt-tetapan > summary, #eguru-app details.ai-tetapan > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 10px 12px; }
#eguru-app details.rpt-tetapan > summary::-webkit-details-marker, #eguru-app details.ai-tetapan > summary::-webkit-details-marker { display: none; }
#eguru-app details.rpt-tetapan > summary::before, #eguru-app details.ai-tetapan > summary::before {
    content: '\25B8'; font-size: .9em; color: var(--text-muted); transition: transform .15s; }
#eguru-app details.rpt-tetapan[open] > summary::before, #eguru-app details.ai-tetapan[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.rpt-tetapan[open] > summary, #eguru-app details.ai-tetapan[open] > summary { border-bottom: 1px dashed var(--border); }
#eguru-app details.rpt-tetapan > summary:focus-visible, #eguru-app details.ai-tetapan > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app .rpt-tetapan-lbl, #eguru-app .ai-tetapan-lbl { font-size: var(--t5); font-weight: 800; color: var(--text); white-space: nowrap; }
#eguru-app .rpt-tetapan-ringkas, #eguru-app .ai-tetapan-ringkas { flex: 1 1 220px; min-width: 0; font-size: var(--t4); color: var(--text-muted); line-height: 1.45; }
#eguru-app .rpt-tetapan-ubah, #eguru-app .ai-tetapan-ubah {
    margin-left: auto; font-size: var(--t3); font-weight: 700; color: var(--primary-text); white-space: nowrap;
    border: 1px solid var(--primary); border-radius: var(--radius-full); padding: 2px 10px; }
#eguru-app details[open] > summary .rpt-tetapan-ubah, #eguru-app details[open] > summary .ai-tetapan-ubah { display: none; }
#eguru-app .rpt-tetapan-isi, #eguru-app .ai-tetapan-isi { padding: 12px 12px 2px; }
#eguru-app .ai-tetapan-pisah { opacity: .6; }
/* Lencana kunci pedagogi (sama rupa dengan #ped-lock) — KELIHATAN dalam ringkasan. */
#eguru-app .ai-tetapan-kunci { display: inline-block; font-size: var(--t2); font-weight: 800; background: var(--ultra-dark); color: #fff;
    padding: 1px 7px; border-radius: var(--radius-full); margin-left: 4px; white-space: nowrap; }

/* --- RPT: "Urus RPT tersimpan (n)" (P5) --- */
#eguru-app details.rpt-urus > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 0;
    font-size: var(--t5); font-weight: 700; color: var(--text-muted); }
#eguru-app details.rpt-urus > summary::-webkit-details-marker { display: none; }
#eguru-app details.rpt-urus > summary::before { content: '\25B8'; font-size: .9em; transition: transform .15s; }
#eguru-app details.rpt-urus[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.rpt-urus[open] > summary, #eguru-app details.rpt-urus > summary:hover { color: var(--text); }
#eguru-app details.rpt-urus > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app details.rpt-urus > .rpt-saved-list { margin-top: 2px; }

/* --- Nota & Latihan: Padam ikon sahaja pada baris (P3) --- */
#eguru-app .skt-aksi-in .btn.skt-btn-ikon { width: auto !important; padding: 5px 12px !important; }
#eguru-app .skt-aksi-in .btn.skt-btn-ikon svg { width: 16px !important; height: 16px !important; }
@media (max-width: 700px) { #eguru-app .skt-aksi-in .btn.skt-btn-ikon { flex: 0 0 auto; min-width: 0; } }

/* --- Nota & Latihan: "Lagi ▾" sebagai sel terakhir bar modal (P4) ---
   Ringkasan ialah .btn, jadi ia mewarisi saiz .skt-modal-aksi .btn (lebar
   penuh sel, ikon di atas label pada ≤460px). Menu dibuka ke ATAS oleh
   lagiLetak() kerana bar berada di hujung helaian. */
#eguru-app .skt-modal-aksi > .pm-lagi { min-width: 0; }
#eguru-app .skt-modal-aksi > .pm-lagi > summary { height: 100%; }
#eguru-app .skt-modal-aksi > .pm-lagi > summary > span { overflow: hidden; text-overflow: ellipsis; }
#eguru-app .skt-modal-aksi .pm-lagi-menu { min-width: 220px; }

/* --- Ikon Bank sebaris dalam teks bantuan halaman Bank (BK_TAB) --- */
#eguru-app .bk-ikon-sebaris { white-space: nowrap; }
#eguru-app .bk-ikon-sebaris svg { width: 1.05em; height: 1.05em; fill: currentColor; vertical-align: -.18em; }


/* ===== HICK TAKSIR (2026-09-25) =====
   Evidens · PBD · JSU · Exam — satu tindakan utama setiap kawasan, yang jarang
   satu klik lebih dalam (menu "Lagi ▾", lipatan, togol). Tiada fungsi dibuang;
   lihat komen di sg_taksir.js / sg_pbd.js / sg_bank.js bagi setiap perubahan. */

/* Exam › Kertas Ujian: Cetak Kertas Calon (utama) · Cetak dengan Skema · Lagi ▾.
   Bukan .form-row (peraturan telefon .form-row hanya untuk anak .btn), jadi
   baris ini membawa peraturan sebaris telefonnya sendiri. */
#eguru-app .bs-kertas-aksi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#eguru-app .bs-kertas-aksi > .btn { flex: 0 0 auto; }
@media (max-width: 600px) {
    #eguru-app .bs-kertas-baris > .bs-kertas-aksi { width: 100%; flex-wrap: nowrap; }
    #eguru-app .bs-kertas-aksi > .btn { flex: 1 1 0 !important; width: auto !important; padding-left: 8px !important; padding-right: 8px !important; }
    /* "Lagi ▾" selebar labelnya sahaja — ruang lebihan untuk dua butang Cetak */
    #eguru-app .bs-kertas-aksi > .pm-lagi { flex: 0 0 auto !important; }
    #eguru-app .bs-kertas-aksi > .pm-lagi > summary { width: auto !important; }
}
@media (max-width: 360px) { #eguru-app .bs-kertas-aksi > .btn > svg { display: none; } }

/* Exam: enam tab dipecah kepada tiga fasa (Tambah soalan | Bina kertas | Selepas ujian).
   mtTabs() hanya membaca [data-mt-tab], jadi pemisah ini tidak dikira sebagai tab. */
#eguru-app .mt-tabs > .mt-sep { flex: 0 0 1px; align-self: stretch; background: var(--border); margin: 6px 3px; }
@media (max-width: 600px) { #eguru-app .mt-tabs > .mt-sep { margin: 6px 1px; } }

/* JSU: jalur kertas — pil memilih kertas; tindakan ke atas kertas terpilih
   (Salin / Padam) dalam "Lagi ▾" di hujung kanan, rupa butang (bukan pil). */
#eguru-app .jsu-ujian-bar { align-items: center; }
#eguru-app .jsu-ujian-bar > .jsu-kertas-lagi { margin-left: auto; flex: 0 0 auto !important; }
#eguru-app .jsu-ujian-bar > .jsu-kertas-lagi > summary { width: auto !important; }

/* JSU › Semakan: "Segar Semula Kiraan" kini butang ikon kecil pada tajuk Liputan Exam. */
#eguru-app .form-section-title > .jsu-segar { margin-left: 2px; min-height: 24px; padding: 3px 6px; text-transform: none; letter-spacing: 0; }
#eguru-app .jsu-segar svg { width: 15px; height: 15px; fill: currentColor; }
/* Telefon: sasaran sentuh sekurang-kurangnya sebesar .kad-ikon lain (✕ baris JSU). */
@media (max-width: 600px) { #eguru-app .form-section-title > .jsu-segar { min-height: 30px; min-width: 30px; } }

/* JSU › Skop & Baris: pilihan paparan "Lajur penuh" — kotak semak kecil di atas jadual. */
#eguru-app .jsu-lajur-togol { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t4); font-weight: 600; color: var(--text-muted); cursor: pointer; }
#eguru-app .jsu-lajur-togol > input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }

/* PBD › kad kelas: "Lihat PBD" = tindakan utama (diisi warna kelas, didahulukan);
   "Tahap" berbingkai. Menindih .pbd-cell-btn.lihat/.murid asal (tertukar) mengikut
   turutan sumber — peraturan asal tidak disentuh. */
#eguru-app .pbd-cell-btn.lihat { background: hsl(var(--dh,210),46%,45%); color: #fff; border: 1.5px solid hsl(var(--dh,210),46%,45%); }
#eguru-app .pbd-cell-btn.murid { background: var(--card-bg); color: hsl(var(--dh,210),48%,34%); border: 1.5px solid hsla(var(--dh,210),46%,47%,.6); }
#eguru-app.dark-theme .pbd-cell-btn.murid { color: hsl(var(--dh,210),62%,76%); }

/* PBD › Laporan: dua kumpulan berlabel (Lihat di skrin · Simpan & muat turun);
   TP Keseluruhan untuk SPPB = pautan teks kecil di bawah bar eksport. */
#eguru-app .pbd-lapor-lbl { font-size: var(--t3); font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 6px; }
#eguru-app .pbd-lapor-lbl + .eksport-bar > .eksport-baris { margin-top: 0; }
#eguru-app .pbd-tpk-pautan { margin: 0 0 4px; }
/* Butang "Cetak Laporan Kelas" [hidden] ialah pendua PDF / Cetak (fungsi SAMA,
   pbdCetakLaporanKelas) — atribut hidden-nya dahulu dikalahkan oleh display .btn. */
#eguru-app #pbd-lapor-card > .btn[hidden] { display: none !important; }
#eguru-app .pbd-tpk-pautan a { color: var(--primary-text); font-weight: 700; }

/* Evidens › modal Tanda: catatan / pautan Drive / muat naik terlipat di belakang
   "+ Bukti" setiap murid (.buka = terbuka; baris yang sudah ada bukti bermula
   terbuka). !important kerana .skt-ev-cat membawa display:flex sebaris. */
#eguru-app .skt-ev-baris { grid-template-columns: 1fr auto 86px auto; }
#eguru-app .skt-ev-baris:not(.buka) > .skt-ev-cat { display: none !important; }
#eguru-app .skt-ev-baris .ev-bukti-tog { padding: 4px 9px !important; min-height: 0; font-size: var(--t3) !important; white-space: nowrap; }
#eguru-app .skt-ev-baris.buka .ev-bukti-tog { background: var(--bg); }
@media (max-width: 700px) {
    #eguru-app .skt-ev-baris { grid-template-columns: 1fr 70px auto; }
    #eguru-app .skt-ev-baris > .skt-ev-cat { order: 4; }
}

/* JSU › Skop & Baris, telefon, Percuma: lencana "🔒 Pro" (::after sebaris) menambah
   ~50px pada butang berkunci, tetapi peraturan telefon .form-row (butang SAMA lebar)
   memaksa "Agih Semula Soalan 🔒 Pro" ke separuh baris dan teksnya melimpah keluar
   butang — baris itu baru terkena peraturan tersebut sejak kawalan "Lajur penuh"
   dipindah keluar daripadanya. Baris yang ada butang berkunci: lebar ikut kandungan,
   berbalut hanya bila memang tidak muat (dua butang Tarik berkunci — dahulu juga
   melimpah). Pro/Ultra (tiada .pelan-kunci) tidak terjejas. */
@media (max-width: 600px) {
    #eguru-app #mtp-jsu-skop .form-row:has(> .btn.pelan-kunci) { flex-wrap: wrap; }
    #eguru-app #mtp-jsu-skop .form-row:has(> .btn.pelan-kunci) > .btn { flex: 1 1 auto !important; }
}


/* ===== HICK INTPEL (2026-09-25) ===== */
/* Analisis / Intervensi / Kajian Tindakan disusun semula supaya setiap skrin
   menonjolkan SATU keputusan (Hick's Law). Tiada fungsi dibuang — lihat
   sg_tindak.js (ktLukisBorang, intpelBawaSubjek, anlUbahAmbang). */

/* Analisis: ringkasan 1 baris dipindah dari tab "Ringkasan" lama ke kad atas,
   jadi ia kelihatan pada SETIAP tab. :empty — sebelum subjek dipilih. */
#eguru-app .anl-ringkas-kepala { margin: 0 0 var(--sp-3, 12px); }
#eguru-app .anl-ringkas-kepala:empty { display: none; }
#eguru-app .anl-ringkas-kepala > .help-hint { margin: 6px 0 0; }
/* "ambang N" dalam ringkasan = pautan ke kotak Ambang (hanya di tab Murid/Hadir). */
#eguru-app .anl-ambang-pautan { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--primary-text);
    cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
#eguru-app .anl-ambang-pautan:hover { text-decoration-style: solid; }
#eguru-app .anl-ambang-pautan:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

/* Intervensi: blok AI kini dalam tab Pelan, di antara SK/TP (input prompt) dan
   Punca/Strategi (yang diisinya). Kotak lembut supaya jelas ia satu langkah pilihan. */
#eguru-app .iv-ai-blok { margin: 2px 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
#eguru-app .iv-ai-blok > .help-hint { display: block; }
#eguru-app .iv-ai-blok details.ai-luar { background: var(--card-bg); }

/* Kajian Tindakan: 14 bahagian dalam 5 kumpulan boleh lipat (rupa .bk-cara:
   anak panah ▸ berputar) + lencana "n/m diisi"; hijau bila kumpulan lengkap. */
#eguru-app .kt-kump { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin: 10px 0 0; }
#eguru-app .kt-kump > summary { cursor: pointer; list-style: none; padding: 11px 12px; display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: var(--t5); color: var(--text); }
#eguru-app .kt-kump > summary::-webkit-details-marker { display: none; }
#eguru-app .kt-kump > summary::before { content: '\25B8'; flex: 0 0 1.1em; color: var(--text-muted); transition: transform .15s; }
#eguru-app .kt-kump[open] > summary::before { transform: rotate(90deg); }
#eguru-app .kt-kump > summary:hover .kt-kump-tajuk { color: var(--primary-text); }
#eguru-app .kt-kump > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-md); }
#eguru-app .kt-kump-tajuk { flex: 1 1 auto; min-width: 0; }
#eguru-app .kt-kump-kira { flex: 0 0 auto; white-space: nowrap; font-size: var(--t3); font-weight: 700; padding: 1px 8px;
    border-radius: var(--radius-full); background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
#eguru-app .kt-kump.siap .kt-kump-kira { background: var(--success-light); border-color: var(--success); color: var(--primary-text); }
#eguru-app .kt-kump-isi { padding: 0 12px 12px; border-top: 1px solid var(--border); }


/* ===== HICK TOOLS (2026-09-25) =====
   Hick's Law untuk Tools: kurangkan pilihan yang dipapar serentak TANPA
   membuang fungsi — tetapan sekunder dilipat dengan ringkasan nilai semasa,
   tetapan sekali-sahaja (avatar, kepala dokumen) jadi satu baris + "Ubah",
   senarai berulang (agenda/slot) jadi akordion. Semua gaya di bawah #eguru-app. */

/* Pil "Ubah / Siap / Tutup" pada <summary> panel yang dilipat (bukan .btn —
   peraturan .btn telefon memaksa lebar penuh). Label bertukar ikut [open]. */
#eguru-app .studio-ubah, #eguru-app .dok-ubah { flex: 0 0 auto; margin-left: auto; padding: 3px 12px; border: 1.5px solid var(--primary);
    border-radius: var(--radius-full); background: var(--card-bg); color: var(--primary-text); font-size: var(--t3); font-weight: 700; white-space: nowrap; }
#eguru-app details:not([open]) > summary .bila-buka, #eguru-app details[open] > summary .bila-tutup { display: none; }

/* Studio Konten — "Tetapan lanjut" (#studio-lanjut) */
#eguru-app details.studio-lanjut { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin: 0 0 var(--sp-3); min-width: 0; }
#eguru-app details.studio-lanjut > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 12px;
    font-size: var(--t4); font-weight: 700; color: var(--text); min-width: 0; }
#eguru-app details.studio-lanjut > summary::-webkit-details-marker { display: none; }
#eguru-app details.studio-lanjut > summary::before { content: '\25B8'; flex: 0 0 auto; color: var(--text-muted); transition: transform .15s; }
#eguru-app details.studio-lanjut[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.studio-lanjut[open] > summary { border-bottom: 1px solid var(--border); }
#eguru-app details.studio-lanjut > summary:hover .studio-lanjut-tajuk { color: var(--primary-text); }
#eguru-app details.studio-lanjut > summary:focus-visible,
#eguru-app details.studio-avatar-lipat > summary:focus-visible,
#eguru-app details.dok-kepala > summary:focus-visible,
#eguru-app details.jw-sumber > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
#eguru-app .studio-lanjut-tajuk { flex: 0 0 auto; }
#eguru-app .studio-lanjut-nilai { flex: 1 1 auto; min-width: 0; font-size: var(--t3); font-weight: 400; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app details.studio-lanjut[open] .studio-lanjut-nilai { display: none; }
#eguru-app .studio-lanjut-isi { padding: 12px 12px 4px; }
/* Select sekunder diisi JS ke dalam bekas ini tetapi duduk dalam grid yang sama dengan Nada. */
#eguru-app .studio-medan-lanjut { display: contents; }
#eguru-app .studio-lanjut-isi .studio-cek { margin-top: 2px; }
#eguru-app .studio-lanjut-isi .studio-jenama-nota { margin-bottom: 8px; }
#eguru-app .studio-lanjut-isi .studio-profil { margin: 8px 0 var(--sp-3); }

/* Studio Konten — panel avatar dilipat kepada satu baris */
#eguru-app details.studio-avatar-lipat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t4); }
#eguru-app details.studio-avatar-lipat > summary::-webkit-details-marker { display: none; }
#eguru-app details.studio-avatar-lipat > summary > b { flex: 0 0 auto; white-space: nowrap; }
#eguru-app .studio-avatar-ringkas { flex: 1 1 auto; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app details.studio-avatar-lipat[open] .studio-avatar-ringkas { visibility: hidden; }
#eguru-app .studio-avatar-nota { margin: 8px 0 8px !important; }
#eguru-app details.studio-avatar-lipat .studio-medan { margin-bottom: 0; }

/* Semakan Tajwid — togol sumber ayat (guna rupa .jw-arah) */
#eguru-app .tj-mod button { white-space: nowrap; }
#eguru-app #tj-p-mushaf[hidden], #eguru-app #tj-p-tampal[hidden] { display: none; }

/* Penukar Jawi — nota sumber dilipat */
#eguru-app .jw-sumber-isi { flex: 1; min-width: 0; }
#eguru-app details.jw-sumber { margin-top: 6px; }
#eguru-app details.jw-sumber > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t4); font-weight: 700; color: var(--primary-text); }
#eguru-app details.jw-sumber > summary::-webkit-details-marker { display: none; }
#eguru-app details.jw-sumber > summary::before { content: '\25B8'; font-size: .9em; transition: transform .15s; }
#eguru-app details.jw-sumber[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.jw-sumber > p { margin-top: 6px; }
#eguru-app details.jw-sumber-kaki { margin-top: 10px; }
#eguru-app details.jw-sumber-kaki > summary { font-size: var(--t3); color: var(--text-muted); }

/* Tools dokumen — Kepala dokumen dilipat */
#eguru-app details.dok-kepala { padding: 0; }
#eguru-app details.dok-kepala > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-width: 0; }
#eguru-app details.dok-kepala > summary::-webkit-details-marker { display: none; }
#eguru-app details.dok-kepala[open] > summary { padding-bottom: 6px; }
#eguru-app details.dok-kepala > :not(summary) { margin-left: 12px; margin-right: 12px; }
#eguru-app details.dok-kepala > :last-child { margin-bottom: 12px; }
#eguru-app .dok-kepala-tajuk { flex: 0 0 auto; font-weight: 800; font-size: var(--t4); color: var(--text); }
#eguru-app .dok-kepala-ringkas { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
#eguru-app details.dok-kepala[open] .dok-kepala-ringkas { display: none; }
#eguru-app .dok-kepala-logo { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
#eguru-app .dok-kepala-logo img { max-width: 24px; max-height: 24px; }
#eguru-app .dok-kepala-sek { min-width: 0; font-size: var(--t4); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tools dokumen — senarai berulang sebagai akordion (satu item terbuka). Butang
   ↑ ↓ × di LUAR <summary> (a11y) dan diletak di penjuru kanan atas item. */
#eguru-app .dok-item.dok-item-akordion { position: relative; padding: 0; }
#eguru-app .dok-item.dok-item-akordion:has(> details[open]) { border-style: solid; background: var(--card-bg); }
#eguru-app .dok-item-akordion > .dok-item-aksi { position: absolute; top: 8px; right: 8px; }
#eguru-app details.dok-item-lipat > summary.dok-item-kepala { list-style: none; cursor: pointer; margin: 0; min-height: 44px;
    padding: 7px 106px 7px 10px; justify-content: flex-start; }
#eguru-app details.dok-item-lipat > summary.dok-item-kepala::-webkit-details-marker { display: none; }
#eguru-app details.dok-item-lipat > summary.dok-item-kepala::before { content: '\25B8'; flex: 0 0 auto; color: var(--text-muted); transition: transform .15s; }
#eguru-app details.dok-item-lipat[open] > summary.dok-item-kepala::before { transform: rotate(90deg); }
#eguru-app details.dok-item-lipat > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
#eguru-app .dok-item-tajuk { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
#eguru-app .dok-item-tajuk b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .dok-item-pratonton { font-size: var(--t3); font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app details.dok-item-lipat[open] .dok-item-pratonton { display: none; }
#eguru-app .dok-item-isi { padding: 2px 10px 6px; }

/* Tools dokumen — laluan AI luar (details.ai-luar sejagat) */
#eguru-app .dok-ai-luar-isi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#eguru-app .dok-ai-luar-isi textarea { width: 100%; font-size: var(--t4); }

/* ===== HICK SEMAKAN SILANG (2026-09-25) =====
   Pembetulan kecil yang ditemui selepas lapan pakej digabungkan. */
/* Topbar 441–460px: jenama boleh mengecil & dipendekkan (…) dan bukan
   menjalar ke bawah butang Cari bila nama pengguna panjang. */
#eguru-app .topbar-left > :not(.topbar-logo) { min-width: 0; overflow: hidden; }
#eguru-app .topbar-title, #eguru-app .topbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kawasan ketik kawalan teks baharu ≥24px di telefon — susun atur tidak berubah. */
@media (max-width: 600px) {
    #eguru-app .pbd-tpk-pautan a { padding: 7px 0; }
    #eguru-app details.jw-sumber > summary { padding: 7px 0; margin: -7px 0; }
}
#eguru-app details.studio-avatar-lipat > summary { position: relative; }
#eguru-app details.studio-avatar-lipat > summary::after { content: ''; position: absolute; inset: -10px -12px; }
#eguru-app details.studio-avatar-lipat[open] > summary::after { bottom: 0; }
/* Butang utama berisi sama tinggi dengan butang garis di sebelahnya (baris
   Nota/Latihan & baris kertas Exam): sempadan lutsinar 2px, latar sampai sempadan. */
#eguru-app .skt-aksi-in > .btn:not(.btn-outline), #eguru-app .bs-kertas-aksi > .btn:not(.btn-outline) {
    border: 2px solid transparent !important; background-origin: border-box !important; }

/* ===== PEMBETULAN PEPIJAT (2026-09-25) =====
   1. .nota-kotak menulis kecerunan CERAH secara keras sambil memakai
      color:var(--text) — dalam tema gelap teks cerah di atas kotak cerah tidak
      boleh dibaca (cth JSU › Semakan & Liputan). Guna token tema.
   2. #eguru-app .btn { display:inline-flex !important } menewaskan atribut
      [hidden], jadi butang "tersembunyi" (cth Cetak Laporan Kelas di PBD ›
      Laporan) tetap kelihatan. [hidden] mesti menang untuk .btn. */
#eguru-app.dark-theme .nota-kotak { background: linear-gradient(135deg, var(--info-light), color-mix(in srgb, var(--ultra-dark, #6d28d9) 22%, var(--card-bg))); border-color: rgba(96, 165, 250, .3); }
#eguru-app .btn[hidden] { display: none !important; }

/* ===== HICK2 HOMEKAD (2026-09-25) =====
   K1 — Kad kelas Halaman Utama: SATU butang berisi (disyorkan) setiap kad.
   Dahulu Butiran/Kehadiran/Nota/Latihan semuanya berisi warna tepu — empat
   pilihan sama berat, tiada yang menonjol. Kini lalai = varian LEMBUT (latar
   diwarnai sedikit, sempadan + ikon + label dalam warna butang itu sendiri);
   hanya .disyor (dipilih homeKadDisyor() dalam sg_utama.js) kekal rupa
   berisi asal. Setiap butang KEKAL warnanya sendiri — di telefon jubin ikon
   sahaja, dibeza oleh warna: Kehadiran cyan (--kh, bukan ungu), Butiran &
   Isi RPH hijau, Nota ambar, Latihan ungu (keluarga Ultra/AI).
   --tb = warna isian/sempadan; --tb-ink = warna ikon & teks lembut. Nilai
   ink dikira: ≥4.5:1 atas latar lembutnya dalam kedua-dua tema (ambar
   #F59E0B sebagai ikon cuma 2:1 atas putih, jadi ikon lembut guna ink). */
#eguru-app .today-actions-l > .today-lihat-btn   { --tb: var(--primary); --tb-ink: var(--primary-text); }
#eguru-app .today-actions-l > .today-isirph-btn  { --tb: var(--primary); --tb-ink: var(--primary-text); }
#eguru-app .today-actions-l > .today-kh-btn      { --tb: var(--kh);      --tb-ink: var(--kh-text); }
/* Sudah direkod: hijau bertanda semak (panduan Kehadiran: "bertukar hijau
   bertanda siap"). Tidak pernah .disyor — tiada lagi yang perlu dibuat. */
#eguru-app .today-actions-l > .today-kh-btn.sudah { --tb: var(--primary); --tb-ink: var(--primary-text); }
#eguru-app .today-actions-l > .today-nota-btn    { --tb: var(--accent);  --tb-ink: #B45309; }
#eguru-app .today-actions-l > .today-latihan-btn { --tb: var(--ultra);   --tb-ink: var(--ultra-dark); }
#eguru-app.dark-theme .today-actions-l > .today-nota-btn    { --tb-ink: var(--accent-text); }
#eguru-app.dark-theme .today-actions-l > .today-latihan-btn { --tb: var(--ultra-light); --tb-ink: var(--ultra-pale); }
/* Saiz SERAGAM berisi/lembut: sempadan 1.5px lutsinar pada semua, latar
   sampai ke sempadan — jadi butang berisi tidak 3px lebih pendek daripada
   jirannya. Telefon: peraturan jubin ≤600px sedia ada (padding 0, 36px). */
#eguru-app .today-actions-l > :is(.today-lihat-btn, .today-isirph-btn, .today-kh-btn, .today-nota-btn, .today-latihan-btn) {
    border: 1.5px solid transparent; padding: 4.5px 10.5px; background-origin: border-box; min-height: 30px;
}
#eguru-app .today-actions-l > :is(.today-lihat-btn, .today-isirph-btn, .today-kh-btn, .today-nota-btn, .today-latihan-btn):not(.disyor) {
    background: color-mix(in srgb, var(--tb) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--tb) 55%, var(--card-bg));
    color: var(--tb-ink); box-shadow: none;
}
#eguru-app .today-actions-l > :is(.today-lihat-btn, .today-isirph-btn, .today-kh-btn, .today-nota-btn, .today-latihan-btn):not(.disyor) svg { fill: var(--tb-ink); }
#eguru-app .today-actions-l > :is(.today-lihat-btn, .today-isirph-btn, .today-kh-btn, .today-nota-btn, .today-latihan-btn):not(.disyor):hover {
    background: color-mix(in srgb, var(--tb) 22%, var(--card-bg)); opacity: 1;
}
/* Isi RPH lembut kekal garis putus-putus: "belum ada", bukan sekadar pilihan. */
#eguru-app .today-actions-l > .today-isirph-btn:not(.disyor) { border-style: dashed; }
/* Disyorkan: rupa berisi asal (kecerunan setiap butang dalam peraturan
   asalnya) + bayang sewarna supaya ia satu-satunya yang "timbul". */
#eguru-app .today-actions-l > .disyor { box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 2px 8px color-mix(in srgb, var(--tb) 38%, transparent); }
/* Hijau lebih gelap (#047857 = 5.48:1 dengan teks putih) — --primary gelap
   #10B981 hanya 2.54:1. Butiran.disyor dipadankan supaya dua butang utama slot
   RPH tidak berlainan hijau pada senarai yang sama. */
#eguru-app .today-actions-l > :is(.today-isirph-btn, .today-lihat-btn).disyor { background: #047857; color: #fff; border-style: solid; }
#eguru-app .today-actions-l > :is(.today-isirph-btn, .today-lihat-btn).disyor:hover { background: #065F46; }
#eguru-app .today-actions-l > .today-lihat-btn.disyor svg { fill: #fff; }
#eguru-app .today-actions-l > .today-isirph-btn.disyor svg { fill: #fff; }

/* K2 — Grid Jadual Waktu Mingguan (Utama): bar hover Edit/Salin/Buang
   dibuang; ketik/klik sel = borang edit (Kemaskini / Salin / Buang). Limpahan
   `visible` hanya wujud untuk bar itu terkeluar sel tepi — tanpanya grid JW
   kembali terpotong kemas (sudut bulat, tiada teks sel melimpah ke jiran).
   Grid RPH (.hw-sect-rph, hwAksiRph) tidak disentuh. */
#eguru-app .hw-sect-jw .hw-grid { overflow: hidden; }
#eguru-app .hw-sect-jw .hw-c.hw-f:hover { overflow: hidden; z-index: auto; }
/* Sel boleh difokus (Tab): gelang di DALAM sel — gelang luar sejagat
   (outline-offset 2px) terpotong oleh grid overflow:hidden & sel jiran. */
#eguru-app .hw-sect-jw .hw-c.hw-f:focus-visible { outline-offset: -3px !important; border-radius: 0; }
/* Bar tajuk JW (Tambah Kelas · Import Pukal · Waktu & Rehat) pada 320px:
   tiga butang sama lebar sebaris (peraturan telefon) terpotong 2–6px
   (diukur: 90/88, 89/88, 94/88). Ikon disorok ≤340px sahaja — label penuh
   kekal, tiada butang dibuang atau dipendekkan. */
@media (max-width: 340px) { #eguru-app .hw-jw-aksi .btn svg { display: none; } }


/* ===== HICK2 BANK (2026-09-25) =====
   Menu Bank kini SATU item (#nav-bank, rupa sama seperti #nav-tools — tiada
   gaya khas diperlukan); pilihan Bank RPH | Nota | Soalan pindah ke suis di
   atas setiap halaman Bank, dan penapis halaman itu menjadi SATU baris cip. */
/* 1. Suis .bk-tukar — rupa .ak-tabs.pm-tabs Halaman Murid (BUKAN .mt-tabs:
      tiga view berasingan, butangnya goToTab). Ikon disorok di telefon oleh
      peraturan .pm-tabs sedia ada; label "Bank …" yang membawa makna. */
#eguru-app .bk-tukar { margin: 0 0 var(--sp-3); }
#eguru-app .bk-tukar .ak-tab { white-space: nowrap; min-width: 0; }
#eguru-app .bk-tukar .ak-tab span { overflow: hidden; text-overflow: ellipsis; }
/* Percuma: pelanKunciView() menyisip kad kunci SELEPAS suis (sg_abm.js), jadi
   suis kekal di ATAS kad kunci — dalam DOM dan pada skrin — tempat yang sama
   seperti yang dilihat pengguna Pro. Tiada susunan semula CSS diperlukan. */
/* 2. Satu baris cip: kelas JW | pemisah | Semua subjek · Sumbangan saya (.lain,
      garis putus-putus = "paparan lain", bukan satu lagi kelas). */
#eguru-app .bk-cip-baris { align-items: center; padding: 2px 2px 4px; }
#eguru-app .bk-cip-pisah { flex: 0 0 1px; align-self: stretch; margin: 4px 2px; background: var(--border); }
#eguru-app .bk-cip.lain { border-style: dashed; background: transparent; color: var(--text-muted); }
#eguru-app .bk-cip.lain:hover { color: var(--primary-text); border-color: var(--primary); }
#eguru-app .bk-cip.lain.aktif { border-style: solid; border-color: var(--primary); background: var(--success-light); color: var(--primary-text); }
/* Tepi yang masih menyorok cip dipudarkan (bkCipSegar, sg_bank.js) — bar tatal
   baris ini sengaja tersembunyi, jadi pudar inilah isyarat "tatal ke tepi". */
#eguru-app .bk-cip-baris.lebih-kanan { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
#eguru-app .bk-cip-baris.lebih-kiri { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
#eguru-app .bk-cip-baris.lebih-kiri.lebih-kanan { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
/* Desktop/tablet: cip dibalut — semua pilihan kelihatan, tiada tatal tersembunyi. */
@media (min-width: 601px) {
    #eguru-app .bk-cip-baris { flex-wrap: wrap; overflow: visible; }
}
#eguru-app .bk-jw-kosong { margin: 0; }
/* 3. Jubin sumbangan gabungan (sumbangan anda · diguna N×) — jubin pertama;
      di telefon selebar baris supaya dua jubin lain berkongsi baris kedua. */
#eguru-app .bk-jubin-saya span em { font-style: normal; font-weight: 700; color: var(--primary-text); }
@media (max-width: 600px) {
    #eguru-app .bk-jubin-saya { grid-column: 1 / -1; }
}
/* 4. Mod "Semua subjek": nota luar-Jadual-Waktu SEKALI di atas senarai. */
#eguru-app .bk-luar-nota { margin: -4px 0 8px; font-size: var(--t3); color: var(--text-muted); font-style: italic; }


/* ===== HICK2 EXAMJSU (2026-09-25) =====
   Pusingan 2 Hick's Law untuk JSU & Exam — tiada fungsi dibuang:
   - JSU: lima tab -> EMPAT. Pengesahan dan Nisbah aras & KBAT kini lipatan
     .jsu-lipat dalam tab Maklumat Ujian; tajuknya memapar nilai semasa
     (jsuLipatSegar) dan lipatan nisbah terbuka sendiri bila jumlahnya salah.
   - Exam: "Tambah Sendiri" + "Jana dengan AI" -> satu tab "Tambah Soalan":
     SK dahulu, kemudian togol .bs-mod (rupa .jw-arah) memilih cara. */

/* JSU › Maklumat Ujian: lipatan berringkasan. Anak panah diletak mutlak supaya
   nilai yang berbalut ke baris kedua (telefon) sejajar dengan tajuk. */
#eguru-app details.jsu-lipat { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin: 12px 0 0; min-width: 0; }
#eguru-app details.jsu-lipat > summary { list-style: none; cursor: pointer; position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 10px; row-gap: 2px; padding: 10px 12px 10px 30px; font-size: var(--t4); font-weight: 700; color: var(--text); min-width: 0; }
#eguru-app details.jsu-lipat > summary::-webkit-details-marker { display: none; }
#eguru-app details.jsu-lipat > summary::before { content: '\25B8'; position: absolute; left: 12px; top: 10px; color: var(--text-muted); transition: transform .15s; }
#eguru-app details.jsu-lipat[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.jsu-lipat[open] > summary { border-bottom: 1px solid var(--border); }
#eguru-app details.jsu-lipat > summary:hover .jsu-lipat-tajuk { color: var(--primary-text); }
#eguru-app details.jsu-lipat > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
#eguru-app .jsu-lipat-tajuk { min-width: 0; }
#eguru-app .jsu-lipat-nilai { min-width: 0; font-size: var(--t3); font-weight: 600; color: var(--text-muted); }
#eguru-app .jsu-lipat-nilai.ralat { color: var(--danger); }
#eguru-app .jsu-lipat-isi { padding: 12px 12px 4px; }

/* Exam › Tambah Soalan: SK -> togol cara -> borang cara itu. */
#eguru-app .bs-tambah-kad .bs-sk-nota { margin: -2px 0 12px; }
#eguru-app .bs-mod { margin: 0 0 12px; }
#eguru-app .bs-mod > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#eguru-app .bs-mod > button > svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
#eguru-app .bs-mod > button:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
#eguru-app .bs-mod-isi { border-top: 1px solid var(--border); padding-top: 12px; }
@media (max-width: 600px) {
    /* Telefon: togol selebar kad, dua butang sama lebar, sebaris (nowrap). */
    #eguru-app .bs-mod { display: flex; width: 100%; }
    #eguru-app .bs-mod > button { flex: 1 1 0; min-width: 0; padding: 8px 6px; white-space: nowrap; }
}


/* ===== HICK2 SISA (2026-09-25) =====
   Pusingan 2 Hick's Law bagi halaman yang belum disusun semula: baris keluaran
   RPT, matriks Guru › Pelan, Saiz Teks sidebar desktop dan kad Flow Tutorial.
   Tiada fungsi dibuang — setiap tindakan kekal boleh dicapai (paling jauh satu
   klik lagi, dalam menu Lagi ▾ / lipatan). */

/* 1. RPT › Pratonton: "Simpan RPT" tindakan utama sendiri di atas; baris keluaran
      kini BAR PIAWAI (data-eksport="rpt", 2026-09-29) — peraturan .rpt-keluaran
      lama dibuang kerana tiada lagi markup yang memakainya. */
#eguru-app .rpt-simpan-utama { margin-top: 12px; }

/* 2. Guru › Pelan: matriks ciri dilipat ikut menu (renderPelanMatriks, sg_abm.js).
      Setiap menu = <tbody class="pm-kump">; .tutup menyorok semua baris kecuali
      tajuknya. Tajuk kini <button> (aria-expanded) — rupa kekal seperti tajuk
      menu lama (huruf besar, latar --bg). */
#eguru-app .pm-jadual caption.pm-kapsyen { caption-side: top; text-align: right; padding: 0 0 6px; }
#eguru-app .pm-kump-semua { border: 0; background: transparent; color: var(--primary-text); font: inherit; font-size: var(--t3); font-weight: 700;
    cursor: pointer; padding: 4px 6px; text-decoration: underline; text-underline-offset: 2px; }
#eguru-app .pm-kump-semua:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app .pm-jadual tbody.pm-kump.tutup > tr:not(.pm-menu) { display: none; }
#eguru-app .pm-jadual tr.pm-menu td { padding: 0; }
#eguru-app .pm-kump-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; padding: 9px 6px 6px; }
/* Anak panah 1.3em: pada .9em (≈10px) ia hampir tidak kelihatan dalam foto semakan —
   padahal ia satu-satunya isyarat bahawa baris menu ini boleh dibuka. */
#eguru-app .pm-kump-btn::before { content: '\25B8'; flex: 0 0 1em; font-size: 1.3em; line-height: 1; text-align: center; color: var(--primary-text); transition: transform .15s; }
#eguru-app .pm-kump-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
#eguru-app .pm-kump-btn:hover { color: var(--primary-text); }
#eguru-app .pm-kump-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
#eguru-app .pm-kump-bil { margin-left: auto; font-size: var(--t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); white-space: nowrap; }
/* Telefon: jadual boleh lebih lebar daripada skrin (.pm-skrol menatal mendatar),
   jadi apa-apa yang dilabuh ke KANAN jadual boleh terlindung. Pautan "Buka semua"
   dan kiraan ciri dirapatkan ke kiri supaya sentiasa kelihatan. */
@media (max-width: 600px) {
    #eguru-app .pm-jadual caption.pm-kapsyen { text-align: left; }
    #eguru-app .pm-kump-bil { margin-left: 2px; }
    #eguru-app .pm-kump-bil::before { content: '\00B7'; margin-right: 6px; }
}

/* 3. Sidebar desktop: Saiz Teks dilipat di sebalik "Aa" (index.html, .fs-lipat).
      A- 1/4 A+ muncul DALAM ALIRAN pada baris kedua bila .buka — sidebar ialah
      penatal overflow-y:auto, popover terapung akan terpotong. `display` .fs-ctl
      tidak disentuh: ia kekal tersorok < 900px (bar bawah telefon) melalui
      peraturan asal, dan sheet Guru telefon memakai salinan lain yang tidak dilipat. */
#eguru-app .fs-ctl.fs-lipat { flex-wrap: wrap; row-gap: 6px; }
#eguru-app .fs-lipat > .fs-langkah { display: none; scroll-margin-bottom: 14px; }   /* ruang di bawah baris selepas scrollIntoView (onclick "Aa") */
#eguru-app .fs-lipat.buka > .fs-langkah { display: flex; flex: 1 0 100%; align-items: center; justify-content: flex-end; gap: 6px; }
#eguru-app .fs-btn.fs-aa { width: auto; min-width: 34px; padding: 0 8px; font-size: 13px; letter-spacing: .2px; }
#eguru-app .fs-lipat.buka > .fs-aa { border-color: var(--primary); color: var(--primary-text); background: var(--success-light); }
#eguru-app .fs-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 4. Flow Tutorial: satu tindakan utama setiap kad (CTA). "Kongsi Langkah" kini
      pautan senyap ber-ikon (bukan .btn), dan baris prasyarat yang sudah lengkap
      dipapar kecil & senyap — ia maklumat, bukan tindakan seterusnya. Prasyarat
      yang BELUM siap (.belum) kekal seperti asal kerana ia memang langkah dahulu. */
#eguru-app .fcta { align-items: center; }
#eguru-app .fcta .fbtn-kongsi:not(.btn) { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--text-muted);
    font: inherit; font-size: var(--t4); font-weight: 700; padding: 8px 8px; border-radius: var(--radius-xs, 6px); cursor: pointer; white-space: nowrap; }
#eguru-app .fcta .fbtn-kongsi:not(.btn):hover { color: var(--primary-text); background: var(--bg); }
#eguru-app .fcta .fbtn-kongsi:not(.btn):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app .fperlu.lengkap { font-size: var(--t2); gap: 4px; }
#eguru-app .fperlu.lengkap .fperlu-lnk { background: transparent; border-color: transparent; font-size: var(--t2); padding: 2px 6px 2px 18px; }
#eguru-app .fperlu.lengkap .fperlu-lnk::before { left: 6px; width: 7px; height: 7px; margin-top: -3.5px; }
#eguru-app .fperlu.lengkap .fperlu-lnk:hover { text-decoration: underline; text-underline-offset: 2px; }


/* ===== HICK2 LANDING (2026-09-25) ===== */
/* Tentang Kami (#view-about): 11 kad "Ciri-Ciri Utama" yang dahulu satu grid rata
   kini tiga kumpulan berlabel mengikut kitaran kerja guru (sekali setahun →
   setiap minggu → simpan & taksir). Pembaca mengimbas 3 tajuk dahulu, kemudian
   hanya kad dalam kumpulan yang dicarinya. Tiga lajur dari 640px (grid asas = 2
   lajur) supaya kumpulan 3 kad tidak meninggalkan satu kad yatim di tablet juga.
   Landing (#lp) = sg_lp.css. */
#eguru-app #view-about .fitur-kump + .fitur-kump { margin-top: var(--sp-4, 16px); }
#eguru-app #view-about .fitur-kump-t {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0 2px 8px;
    font-size: var(--t5); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--primary-text);
}
#eguru-app #view-about .fitur-kump-sub { font-size: var(--t4); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
@media (min-width: 640px) { #eguru-app #view-about .fitur-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ===== HICK2 PANDUAN (2026-09-25) ===== */
/* Dokumen undang-undang (legal/terma.html, privasi.html, refund.html) dimuat
   ke #legal-body oleh openLegal(). Terma ada 19 seksyen: dahulu pembaca
   terpaksa menatal & mengimbas semuanya untuk mencari satu (cth "Bayaran
   Balik" atau "Padam Akaun"). Kini:
     • .legal-isi — senarai kandungan di atas; dua lajur bila ruang cukup
       (columns: lebar minimum, jadi tiada media query / vw di bawah zoom)
     • .legal-ke-atas — satu pil "Kembali ke atas" yang melekat di bawah
       bekas tatal, bukan 19 pautan berulang selepas setiap seksyen.
   Teks dokumen tidak berubah; pautan menatal .legal-body sendiri (onclick
   dalam fail legal), bukan location.hash app. */
#eguru-app .legal-body .legal-isi {
    margin: 0 0 var(--sp-4); padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg);
}
#eguru-app .legal-body .legal-isi-t {
    font-size: var(--t3); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 6px;
}
#eguru-app .legal-body ul.legal-isi-senarai {
    list-style: none; margin: 0; padding: 0;
    columns: 2 250px; column-gap: 20px;
}
#eguru-app .legal-body ul.legal-isi-senarai > li { margin: 0; break-inside: avoid; font-size: var(--t4); line-height: 1.45; }
#eguru-app .legal-body ul.legal-isi-senarai a {
    display: block; padding: 5px 6px; margin: 0 -6px; border-radius: 6px;
    color: var(--primary-text); text-decoration: none; font-weight: 600;
}
#eguru-app .legal-body ul.legal-isi-senarai a:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration: underline; }
#eguru-app .legal-body h4[id] { scroll-margin-top: 8px; }
/* Pil melekat: elemen terakhir .legal-body, jadi blok penahannya ialah
   seluruh kandungan bekas tatal — ia terapung di bawah sepanjang bacaan. */
#eguru-app .legal-body p.legal-ke-atas {
    position: sticky; bottom: 8px; margin: var(--sp-4) 0 0; text-align: right;
    pointer-events: none;
}
#eguru-app .legal-body p.legal-ke-atas a {
    pointer-events: auto; display: inline-block; padding: 7px 14px; border-radius: 999px;
    font-size: var(--t4); font-weight: 700; text-decoration: none; white-space: nowrap;
    color: var(--primary-text); background: var(--card-bg);
    border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
#eguru-app .legal-body p.legal-ke-atas a:hover { border-color: var(--primary); }
/* Tersembunyi di puncak dokumen (tiada apa untuk "kembali"), muncul selepas
   ~240px tatalan. Pelayar tanpa scroll-timeline: pil sentiasa kelihatan. */
@supports (animation-timeline: scroll()) {
    #eguru-app .legal-body p.legal-ke-atas a {
        animation: hick2-legal-atas linear both;
        animation-timeline: scroll(nearest block);
        animation-range: 0 240px;
    }
    @keyframes hick2-legal-atas { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
}

/* ===== MOCKCUBA (2026-09-25) ===== */
/* Mod Cuba Minggu dibuka kepada semua guru yang log masuk hingga 31 Disember
   2026 (MOD_CUBA_HINGGA, sg_utama.js). Empat permukaan:
     1. .mc-jalur   — jalur di bawah topbar pada SETIAP halaman selagi mod hidup
     2. .mock-bar   — bar pemilih di halaman RPH (satu-satunya pemilih)
     3. .today-week — label minggu hero Utama menjadi butang pintu masuk
     4. .mc-notis   — notis sekali "Baharu" di Halaman Utama
   Warna jalur = pasangan token ambar (--accent-light / --accent-text) yang
   sudah lulus kontras AA dalam KEDUA-DUA tema (lihat nota token di atas). */

/* [hidden] mesti menang ke atas display kelas sendiri (.flow-legend-nota dsb.). */
#eguru-app [data-mod-cuba][hidden], #eguru-app .mc-jalur[hidden] { display: none !important; }

/* 1. JALUR — DALAM aliran, tidak terapung: ia menempah ruangnya sendiri.
   Telefon: item flex biasa antara topbar dan <main>. Desktop: grid mendapat
   baris 'mcuba' HANYA bila #eguru-app.mc-hidup (jalur tersembunyi tidak
   mengambil sel grid, jadi susun atur LIVE tidak berubah sesenti pun). */
#eguru-app .mc-jalur {
    display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; flex-shrink: 0;
    min-height: 40px; padding: 5px 14px; position: relative; z-index: 9;
    background: var(--accent-light); color: var(--accent-text);
    border-bottom: 2px solid var(--accent);
    font-size: var(--t4); line-height: 1.35;
}
@media (min-width: 900px) {
    #eguru-app.mc-hidup {
        grid-template-rows: var(--topbar-h) auto 1fr;
        grid-template-areas: "topbar topbar" "mcuba mcuba" "sidebar main";
    }
    #eguru-app .mc-jalur { grid-area: mcuba; padding: 5px 28px; }
}
#eguru-app .mc-jalur-pil { font-weight: 800; font-size: var(--t2); letter-spacing: .06em; padding: 2px 8px; border-radius: var(--radius-full); background: var(--accent); color: #1F2937; white-space: nowrap; flex-shrink: 0; }
#eguru-app .mc-jalur-teks { flex: 1 1 auto; min-width: 0; }
#eguru-app .mc-jalur-minggu { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 800; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#eguru-app .mc-jalur .mc-jalur-live { background: var(--card-bg) !important; color: var(--accent-text) !important; border: 1.5px solid var(--accent) !important; white-space: nowrap; flex-shrink: 0; padding: 5px 12px !important; }
#eguru-app .mc-jalur .mc-jalur-live:hover { background: var(--accent) !important; color: #1F2937 !important; }
#eguru-app .mc-jalur-minggu:focus-visible, #eguru-app .mc-jalur .mc-jalur-live:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
/* Telefon: satu baris — ayat panjang digugurkan, bakinya dipotong "…";
   butang kekal penuh (nowrap) dan sentiasa boleh ditekan. */
@media (max-width: 600px) {
    #eguru-app .mc-jalur { flex-wrap: nowrap; gap: 6px; padding: 4px 8px; min-height: 38px; font-size: var(--t3); }
    #eguru-app .mc-jalur-lanjut { display: none; }
    #eguru-app .mc-jalur-teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 2. BAR PEMILIH (halaman RPH). LIVE = senyap (garis putus neutral, butang
   outline) supaya ia tidak bersaing dengan "Sync RPT → RPH"; bila hidup ia
   bertukar ambar seperti jalur. Menindih gaya asal .mock-bar (sekitar baris 4338). */
#eguru-app .mock-bar { gap: 6px 10px; padding: 8px 12px; }
#eguru-app .mock-bar:not(.aktif) { border-color: var(--border); background: transparent; }
#eguru-app .mock-bar .mock-tajuk { font-weight: 700; }
#eguru-app .mock-bar .mock-admin { font-weight: 400; color: var(--text-muted); }
#eguru-app .mock-bar select.form-control { width: auto !important; flex: 0 1 280px; min-width: 0; max-width: 100%; padding: 5px 9px !important; font-size: var(--t4) !important; }
#eguru-app .mock-bar .btn { white-space: nowrap; }
#eguru-app .mock-bar.mc-sorot { animation: mcSorot 1.6s ease-out 1; }
@keyframes mcSorot { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.7); } 100% { box-shadow: 0 0 0 14px rgba(245,158,11,0); } }
@media (prefers-reduced-motion: reduce) { #eguru-app .mock-bar.mc-sorot { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; } }
@media (max-width: 600px) {
    #eguru-app .mock-bar select.form-control { flex: 1 1 100%; }
    #eguru-app .mock-bar .btn { flex: 1 1 0; }
}

/* 3. LABEL MINGGU HERO SEBAGAI BUTANG. Rupa .today-week dikekalkan; anak
   panah kecil memberi isyarat ia boleh ditekan. */
#eguru-app button.today-week { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
#eguru-app .today-week.mc-pil { display: inline-flex; align-items: center; gap: 6px; }
#eguru-app .today-week.mc-pil::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; }
#eguru-app .today-week.mc-pil:hover { filter: brightness(1.07); }
#eguru-app .today-week.mc-pil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#eguru-app .today-week.mc-cuba { color: #3B2F00; box-shadow: inset 0 0 0 2px #fff; }

/* 4. NOTIS SEKALI (Halaman Utama) — kad sekunder yang senyap di bawah hero:
   latar kad, satu garis ambar, butang outline. Jalur "Langkah seterusnya"
   kekal satu-satunya tindakan berisi. */
#eguru-app .mc-notis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 12px 16px 0; padding: 10px 12px; background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); }
#eguru-app .mc-notis-teks { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#eguru-app .mc-notis-tajuk { font-size: var(--t5); color: var(--text); }
#eguru-app .mc-notis-sub { font-size: var(--t3); color: var(--text-muted); line-height: 1.45; }
#eguru-app .mc-notis-aksi { display: flex; gap: 8px; flex-shrink: 0; }
#eguru-app .mc-notis-aksi .btn { white-space: nowrap; }
#eguru-app .mc-notis .mc-notis-tutup { background: transparent !important; color: var(--text-muted) !important; border: 1.5px solid var(--border) !important; }
#eguru-app .mc-notis .mc-notis-tutup:hover { color: var(--text) !important; border-color: var(--text-light) !important; }
@media (max-width: 899px) { #eguru-app .mc-notis { margin: 10px 8px 0; } }
@media (max-width: 600px) {
    #eguru-app .mc-notis-aksi { width: 100%; }
    #eguru-app .mc-notis-aksi .btn { flex: 1 1 0; }
}

/* Borang kehadiran dibuka dalam Mod Cuba — notis pratonton di atas senarai. */
#eguru-app .kh-cuba { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent-text); font-size: var(--t4); line-height: 1.45; }

/* Tip Flow Tutorial: .flow-legend-nota membawa margin atas negatif untuk
   memeluk lagenda — tip kedua ini mendapat jaraknya sendiri. */
#eguru-app .mc-flow-tip { margin: 0 0 var(--sp-4) !important; }

/* ===== MOD CUBA HARI (2026-09-26) ===== */
/* Pemilih HARI (#mock-hari) di sebelah pemilih minggu dalam bar Mod Cuba
   (halaman RPH). Minggu + hari + butang dibungkus .mock-kawal supaya ia
   bergerak SEBAGAI SATU kumpulan: desktop — satu baris selepas tajuk (kumpulan
   itu turun baris sekali gus bila sempit, bukan pemilih hari tertinggal
   seorang); telefon — grid dua lajur: dua pemilih sebaris, butang di bawah
   (peraturan ≤600px: butang nowrap, sebaris; satu butang merentang penuh). */
/* flex-grow 1, BUKAN 0: saiz intrinsik kumpulan dikira daripada lebar teks
   pilihan, sedangkan susun atur dalamnya memakai flex-basis pemilih (280px /
   200px) — dengan grow 0 kumpulan itu lebih sempit daripada isinya dan
   pemilih hari + butang tercampak ke baris kedua walaupun ruang ada.
   Asas 560px, BUKAN auto (semakan 2026-09-26): asas auto membiarkan kumpulan
   kekal di sebelah tajuk walaupun ruang tinggal ~420px (640–760px), lalu ia
   berbalut DI DALAM — pemilih minggu seorang di baris 1, hari + Cuba di
   baris 2. 560px ≈ minggu 280 + hari 200 + butang + jarak, jadi kumpulan
   turun baris SEKALI GUS sebaik ia tidak muat sebaris dengan tajuk. */
#eguru-app .mock-bar .mock-kawal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: 1 1 560px; min-width: 0; max-width: 100%; }
#eguru-app .mock-bar select.mock-hari.form-control { flex: 0 1 200px; }
@media (max-width: 600px) {
    #eguru-app .mock-bar .mock-kawal { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
    #eguru-app .mock-bar .mock-kawal select.form-control { width: 100% !important; min-width: 0; }
    #eguru-app .mock-bar .mock-kawal .btn { justify-self: stretch; min-width: 0; }
    /* LIVE: hanya "Cuba" — merentang dua lajur. Hidup: Tukar | Kembali LIVE. */
    #eguru-app .mock-bar .mock-kawal .btn:only-of-type { grid-column: 1 / -1; }
}
/* Pil minggu hero Utama: "Minggu 12 · Rabu · CUBA". Telefon — bahagian hari
   digugurkan supaya pil kekal satu baris; baris tarikh hero di sebelahnya
   sudah menyebut hari itu. */
@media (max-width: 600px) { #eguru-app .today-week .mc-pil-hari { display: none; } }

/* ===== TOAST (2026-09-26) =====
   Dahulu toast ialah pil inline-flex berpusat dengan left:50%. Kotak mutlak
   dengan left:50% hanya mendapat SEPARUH lebar bekas untuk susun atur, jadi
   mesej panjang dibalut menjadi gelembung tinggi & sempit di telefon (pemilik:
   "kecil dan tidak cantik"). Kini:
     • Desktop: kotak berpusat yang boleh selebar teksnya (max-content) hingga
       560px — mesej pendek kekal padat satu baris, yang panjang dibalut kemas.
     • Telefon (≤600px): selebar skrin dengan jurang 12px, sudut 14px (bukan
       pil — pil berbilang baris kelihatan pecah), teks rata kiri, ikon di
       baris pertama, di atas bar navigasi bawah.
   Warna digelapkan ke tahap AA (teks putih ≥4.5:1): hijau #047857, merah
   #DC2626, biru #2563EB. Tiada vw (app berzoom) — lebar ikut bekas. */
#eguru-app .toast-msg {
    left: 50% !important; right: auto !important;
    width: max-content !important; max-width: min(560px, calc(100% - 32px)) !important;
    padding: 11px 18px !important; border-radius: 14px !important;
    align-items: flex-start !important; gap: 10px !important;
    font-size: var(--t5) !important; font-weight: 600 !important; line-height: 1.45 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .18) !important;
    overflow-wrap: anywhere;
}
#eguru-app .toast-msg > svg, #eguru-app .toast-msg > .gi { flex: 0 0 auto; width: 18px !important; height: 18px !important; margin-top: 1px; fill: currentColor; }
#eguru-app .toast-msg > span { min-width: 0; }
#eguru-app .toast-msg.t-success { background: #047857 !important; }
#eguru-app .toast-msg.t-error { background: #DC2626 !important; }
#eguru-app .toast-msg.t-info { background: #2563EB !important; }
@media (max-width: 600px) {
    #eguru-app .toast-msg {
        left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important;
        transform: translateY(12px) !important;
        padding: 12px 14px !important; border-radius: 14px !important;
        bottom: calc(var(--nav-h) + var(--nav-gap) * 2 + 10px + env(safe-area-inset-bottom)) !important;
    }
    #eguru-app .toast-msg.show { transform: translateY(0) !important; }
}
@media (prefers-reduced-motion: reduce) {
    #eguru-app .toast-msg, #eguru-app .toast-msg.show { transition: opacity .2s !important; }
}

/* ===== HICK BORANG (2026-09-28) =====
   Borang ikut Hick's Law: medan dikumpul di bawah beberapa tajuk
   (.form-section-title), medan PILIHAN / jarang diubah dilipat di sebalik
   details.borang-lipat (tajuk + ringkasan nilai/pilihan), dan SATU butang utama.
   Rupa sama seperti details.studio-lanjut supaya seluruh app memakai satu corak.
   ================================================================== */
#eguru-app details.borang-lipat { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); margin: 0 0 var(--sp-3); min-width: 0; }
#eguru-app details.borang-lipat > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 10px 12px;
    font-size: var(--t4); font-weight: 700; color: var(--text); min-width: 0; }
#eguru-app details.borang-lipat > summary::-webkit-details-marker { display: none; }
#eguru-app details.borang-lipat > summary::before { content: '\25B8'; flex: 0 0 auto; color: var(--text-muted); transition: transform .15s; }
#eguru-app details.borang-lipat[open] > summary::before { transform: rotate(90deg); }
#eguru-app details.borang-lipat[open] > summary { border-bottom: 1px solid var(--border); }
#eguru-app details.borang-lipat > summary:hover .borang-lipat-tajuk { color: var(--primary-text); }
#eguru-app details.borang-lipat > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
#eguru-app .borang-lipat-tajuk { flex: 0 0 auto; }
#eguru-app .borang-lipat-nilai { flex: 1 1 auto; min-width: 0; font-size: var(--t3); font-weight: 400; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .borang-lipat-isi { padding: 10px 12px 4px; min-width: 0; }
#eguru-app .borang-lipat-isi > .form-group:last-child { margin-bottom: 8px; }
@media (max-width: 600px) { #eguru-app .borang-lipat-nilai { white-space: normal; } #eguru-app details.borang-lipat > summary { flex-wrap: wrap; } }
/* Medan bersyarat (Hari/Tarikh hantaran Drive, dll.): .jsu-nis ialah flex, jadi
   atribut [hidden] perlu dikuatkuasakan. */
#eguru-app .jsu-nis[hidden], #eguru-app details.borang-lipat[hidden] { display: none !important; }

/* ===== TOOLS ALAT (2026-09-29) =====
   Rangka Tools Guru (sg_alat.js): bar eksport piawai, lipatan hab, halaman tool.
   CSS khusus setiap tool TIDAK di sini — setiap sg_alat_<slug>.js menyuntik gayanya
   sendiri melalui alatGaya() (awalan #eguru-app .<awalan>-…, pemboleh ubah CSS sahaja). */
/* Bar piawai: [Muat turun PDF] [Hantar ke Drive] [Lagi ▾] (alatBar / eksportButang). */
#eguru-app .eksport-baris.eksport-alat { flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 600px) {
    /* Telefon: PDF selebar baris; Drive + Lagi berkongsi baris kedua. */
    /* width/flex: bar ini sering duduk dalam bekas flex (.dok-eksport, kaki modal) — isi seluruh baris. */
    #eguru-app .eksport-baris.eksport-alat { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; flex: 1 1 100%; }
    /* .eksport-pdf: juga bila PDF outline (bar sekunder, opsi.utama:false) — tetap selebar baris. */
    #eguru-app .eksport-baris.eksport-alat > .btn-primary, #eguru-app .eksport-baris.eksport-alat > .eksport-pdf { grid-column: 1 / -1; width: 100% !important; }
    #eguru-app .eksport-baris.eksport-alat > .btn, #eguru-app .eksport-baris.eksport-alat > .pm-lagi { width: auto !important; min-width: 0; flex: none !important; }
    #eguru-app .eksport-baris.eksport-alat > .btn { justify-content: center; }
}
/* Hab: lipatan ikut kumpulan (details.borang-lipat.tools-lipat) + "Baru digunakan". */
#eguru-app details.tools-lipat > summary > .tools-lipat-h { margin: 0; font-size: var(--t4); font-weight: 800; color: var(--text); }
#eguru-app details.tools-lipat .borang-lipat-isi { padding: 12px; }
#eguru-app details.tools-lipat .tools-hab-grid { margin-top: 0; }
#eguru-app .tools-kad[hidden] { display: none !important; }
#eguru-app .tools-baru { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--sp-3); }
#eguru-app .tools-baru[hidden] { display: none; }
#eguru-app .tools-baru-lbl { font-size: var(--t3); color: var(--text-muted); font-weight: 700; }
#eguru-app .tools-baru-cip { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: var(--radius-full); padding: 5px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eguru-app .tools-baru-cip:hover { border-color: var(--primary); color: var(--primary-text); }
#eguru-app .tools-bidang-nota { font-size: var(--t3); color: var(--text-muted); margin: 0 0 8px; }
/* Halaman tool. */
#eguru-app .alat-isi { min-width: 0; }
#eguru-app .alat-kosong { text-align: center; padding: 28px 12px; color: var(--text-muted); }
#eguru-app .alat-kosong > p { margin: 0 auto 10px; max-width: 46ch; }
#eguru-app .alat-perlu-masuk .btn { margin: 0 auto; }
#eguru-app .alat-memuat { margin: 8px 0; }
#eguru-app .alat-gagal .btn { margin-top: 6px; }
#eguru-app .alat-segmen { max-width: 100%; flex-wrap: wrap; }
#eguru-app .alat-view .dok-pratonton iframe { background: #e5e7eb; }
/* Menu Lagi ▾: item tanpa ikon mendapat slot kosong selebar ikon (label sejajar). */
#eguru-app .pm-lagi-menu .eksport-ikon-kosong { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; }
/* Tema gelap: --gradient-bg gelap (#064E3B→#022C22) menjadikan "Muat turun PDF" kurang
   menonjol daripada butang outline hijau terang di sebelahnya — hierarki terbalik. */
#eguru-app.dark-theme .eksport-alat > .btn-primary { background: linear-gradient(135deg, #047857 0%, #065F46 100%) !important; }
/* Hab: lencana kategori pada kad di dalam lipatan mengulang tajuk lipatan itu sendiri. */
#eguru-app details.tools-lipat .tools-kad-kat { display: none; }
/* Pautan kaki hab ("Kongsi di Support") — biru lalai pelayar tidak terbaca pada kad gelap. */
#eguru-app.dark-theme .tools-hab-kaki a { color: var(--primary-light); }
/* ===== TOOLS FASA 2 (2026-10) =====
   Teras sahaja (sg_alat.js). CSS enjin & tool disuntik melalui alatGaya (bukan di sini). */
/* Hab: cip bidang dalam lipatan "Subjek Saya" (> 6 kad kelihatan) — corak .tools-baru-cip. */
#eguru-app .tools-bidang-cip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
#eguru-app .tools-bidang-cip-btn { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: var(--radius-full); padding: 5px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; min-height: 32px; max-width: 100%; white-space: nowrap; }
#eguru-app .tools-bidang-cip-btn:hover { border-color: var(--primary); color: var(--primary-text); }
#eguru-app .tools-bidang-cip-btn.aktif { background: var(--primary); border-color: var(--primary); color: #fff; }
#eguru-app.dark-theme .tools-bidang-cip-btn.aktif { background: var(--primary-dark); border-color: var(--primary-dark); }
/* Medan mail-merge tanpa nilai (pratonton di skrin). */
#eguru-app .alat-medan-tiada { background: var(--warning-light, #fef3c7); color: var(--warning-text, #92400e); border-radius: 2px; padding: 0 2px; }
/* Formula $…$ sebelum dirender KaTeX (sumber TeX sebagai sandaran). */
#eguru-app .sg-f { display: inline; }
#eguru-app .sg-f-papar { display: block; text-align: center; margin: 6px 0; overflow-x: auto; }
/* Ajakan log masuk kecil DALAM lipatan/panel (alatPerluMasukHtml {kecil:true}). */
#eguru-app .alat-perlu-masuk-kecil { padding: 12px 8px; }
#eguru-app .alat-perlu-masuk-kecil > p { font-size: var(--t4); margin-bottom: 8px; }
/* Butiran kelas (RPH): "Lukis peta ini" pada baris ABM peta pemikiran. */
#eguru-app #aktiviti-modal .ak-bullets li .ak-peta-btn { display: inline-flex; margin: 6px 0 0; }

/* Fasa 2A (integrasi): pembalut jadual global — jadual lebar skrol dalam kotaknya, bukan halaman (375 px). */
#eguru-app .table-wrapper{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* Fasa 2B (integrasi): tema gelap — kawalan borang natif (input tarikh/masa, pemilih, bar skrol) ikut skema gelap.
   Dihadkan pada kawalan borang supaya iframe pratonton/PDF (dokumen cerah) tidak terjejas. */
#eguru-app.dark-theme input, #eguru-app.dark-theme select, #eguru-app.dark-theme textarea{color-scheme:dark}

/* ===== PERSEDIAAN AKAUN — panduan persediaan berpandu guru baharu (sg_misi.js) =====
   2026-09-30 asal "Misi Guru"; 2026-10: direka semula — nada profesional, tanpa
   unsur permainan (XP, bintang, piala, konfeti, tangan menunjuk). Kelas .misi-*
   dikekalkan (dirujuk sg_misi.js & _kerja_tools/sesi.py).
   Lapisan di atas modal app (100000) tetapi DI BAWAH toast (200001) & muatan.
   #misi-lapis sendiri pointer-events:none — tatal & ketik kawasan yang diserlahkan
   sampai ke halaman; ketikan di luar ditapis oleh mKlikTangkap (sg_misi.js). */
#eguru-app .misi-ui-lapis { position: absolute; inset: 0; z-index: 150000; pointer-events: none; }
#eguru-app .misi-ik { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
/* Sorotan: gelang bersih + lapisan malap; denyut halus di luar gelang (dimatikan bagi reduced-motion). */
#eguru-app .misi-sorot {
    position: absolute; z-index: 1; border-radius: 12px; pointer-events: none; display: none;
    /* Gelang = outline; malap = SATU box-shadow sahaja (Chrome tidak melukis bayang 9999px
       yang tersenarai SELEPAS bayang gelang pepejal). */
    outline: 3px solid var(--primary); outline-offset: 0;
    box-shadow: 0 0 0 9999px rgba(15,23,42,.5);
    transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
#eguru-app .misi-sorot::after {
    content: ""; position: absolute; inset: -3px; border-radius: 14px; border: 2px solid var(--primary);
    opacity: 0; animation: misiSorotDenyut 2.4s ease-out infinite;
}
#eguru-app .misi-sorot.buka { display: block; }
@keyframes misiSorotDenyut { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.04); } }

#eguru-app .misi-bual {
    position: absolute; z-index: 3; display: none; pointer-events: auto; box-sizing: border-box;
    background: var(--card-bg); color: var(--text); border-radius: var(--radius, 12px); padding: 12px 14px;
    border: 1px solid var(--border); border-top: 3px solid var(--primary); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.22));
    transition: left .25s ease, top .25s ease;
}
#eguru-app .misi-bual.buka { display: block; animation: misiMuncul .2s ease-out; }
@keyframes misiMuncul { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#eguru-app .misi-bual-kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#eguru-app .misi-bual-lencana { font-size: var(--t2); font-weight: 700; color: var(--primary-text); white-space: nowrap; }
#eguru-app .misi-bual-langkah { font-size: var(--t2); color: var(--text-light); flex: 1; min-width: 0; }
#eguru-app .misi-bual-x { background: none; border: 0; color: var(--text-light); cursor: pointer; width: 32px; height: 32px; margin: -6px -8px -6px 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
#eguru-app .misi-bual-x:hover, #eguru-app .misi-bual-x:focus-visible { background: var(--bg); color: var(--text); }
#eguru-app .misi-bual-tajuk { display: block; font-size: var(--t6); line-height: 1.35; margin-bottom: 4px; }
#eguru-app .misi-bual-teks { margin: 0 0 8px; font-size: var(--t4); line-height: 1.55; color: var(--text-muted); }
#eguru-app .misi-pilihan { display: block; margin-top: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: var(--t3); line-height: 1.5; }
#eguru-app .misi-pilihan.disyor { border-color: var(--primary); background: rgba(5,150,105,.07); }
#eguru-app .misi-pilihan b { color: var(--text); }
#eguru-app .misi-bual-amaran, #eguru-app .misi-bual-salah {
    margin: 0 0 8px; font-size: var(--t3); font-weight: 600; padding: 6px 9px; border-radius: 8px;
    background: var(--info-light); color: var(--info-text);
}
#eguru-app .misi-bual-petunjuk {
    display: flex; gap: 8px; align-items: flex-start; background: var(--bg); color: var(--text-muted);
    border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; font-size: var(--t3); line-height: 1.5;
}
#eguru-app .misi-bual-petunjuk .misi-ik { margin-top: 1px; width: 16px; height: 16px; color: var(--text-light); }
#eguru-app .misi-bual-aksi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#eguru-app .misi-bual-aksi:empty { display: none; }

#eguru-app .misi-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; min-height: 36px;
    background: var(--primary-dark); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm, 8px);
    font-size: var(--t3); font-weight: 600; padding: 7px 12px; line-height: 1.25; font-family: inherit; text-align: center;
}
#eguru-app .misi-btn:hover { filter: brightness(1.06); }
#eguru-app .misi-btn:focus-visible, #eguru-app .misi-hud-btn:focus-visible, #eguru-app .misi-bonus:focus-visible, #eguru-app .misi-peta-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#eguru-app .misi-btn .misi-ik { width: 16px; height: 16px; }
#eguru-app .misi-btn-hantu { background: transparent; color: var(--text); border-color: var(--border); }
#eguru-app .misi-btn-teks { background: transparent; color: var(--text-muted); border-color: transparent; padding-left: 6px; padding-right: 6px; }
#eguru-app .misi-btn-besar { width: 100%; padding: 10px 14px; font-size: var(--t5); }

/* HUD: bar persediaan terapung */
#eguru-app .misi-hud {
    position: absolute; z-index: 150001; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius, 12px);
    padding: 8px 8px 8px 14px; box-shadow: var(--shadow-lg, 0 10px 28px rgba(0,0,0,.18)); max-width: calc(100% - 24px); box-sizing: border-box;
}
#eguru-app .misi-hud:empty { display: none; }
#eguru-app .misi-hud.atas { top: calc(var(--topbar-h) + 10px); bottom: auto !important; }
#eguru-app .misi-hud-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#eguru-app .misi-hud-teks { display: flex; flex-direction: column; min-width: 0; }
#eguru-app .misi-hud-teks small { font-size: var(--t2); color: var(--text-light); white-space: nowrap; }
#eguru-app .misi-hud-teks b { font-size: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
#eguru-app .misi-hud-bar { display: block; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 5px; min-width: 120px; }
#eguru-app .misi-hud-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s ease; }
#eguru-app .misi-hud-aksi { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#eguru-app .misi-hud-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 6px 10px;
    border-radius: var(--radius-sm, 8px); border: 1px solid transparent; background: transparent; color: var(--text-muted);
    font-size: var(--t3); font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
}
#eguru-app .misi-hud-btn .misi-ik { width: 16px; height: 16px; }
#eguru-app .misi-hud-btn:hover { background: var(--bg); color: var(--text); }
#eguru-app .misi-hud-btn.utama { background: var(--primary-dark); color: #fff; }
#eguru-app .misi-hud-btn.utama:hover { filter: brightness(1.06); }
@media (max-width: 899px) {
    #eguru-app .misi-hud { left: 12px; right: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); padding: 6px 6px 6px 12px; gap: 6px; }
    #eguru-app .misi-hud-teks b { max-width: none; white-space: normal; line-height: 1.25; }
    #eguru-app .misi-hud-bar { min-width: 0; }
    /* Telefon: butang ikon sahaja (label kekal untuk pembaca skrin), sasaran sentuh ≥44px. */
    #eguru-app .misi-hud-btn { min-width: 44px; min-height: 44px; padding: 0 8px; }
    #eguru-app .misi-hud-btn:not(.utama) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #eguru-app .misi-btn { min-height: 44px; }
    #eguru-app .misi-bual-x { width: 44px; height: 44px; margin: -12px -12px -12px 0; }
}

/* Panel: Senarai Semak Persediaan & skrin lengkap */
#eguru-app .misi-peta {
    position: absolute; inset: 0; z-index: 150002; background: rgba(15,23,42,.5);
    display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
    opacity: 0; transition: opacity .2s; overflow: hidden;
}
#eguru-app .misi-peta.buka { opacity: 1; }
#eguru-app .misi-peta-kad {
    position: relative; z-index: 1; background: var(--card-bg); color: var(--text); border-radius: var(--radius-lg, 16px); width: 100%; max-width: 500px;
    max-height: 100%; overflow-y: auto; overflow-x: hidden; padding: 20px 20px 16px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
#eguru-app .misi-peta-x { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; border-radius: 8px; width: 44px; height: 44px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#eguru-app .misi-peta-x:hover { background: var(--bg); color: var(--text); }
#eguru-app .misi-peta-kepala { margin-bottom: 12px; padding-right: 40px; }
#eguru-app .misi-peta-kepala small { font-size: var(--t2); font-weight: 600; color: var(--text-light); }
#eguru-app .misi-peta-kepala h3 { margin: 2px 0 10px; font-size: var(--t8); line-height: 1.3; }
#eguru-app .misi-peta-kemajuan { display: flex; flex-direction: column; gap: 6px; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .misi-peta-kemajuan .misi-hud-bar { height: 6px; margin: 0; }
#eguru-app .misi-peta-alu { font-size: var(--t4); line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; }
#eguru-app .misi-panduan { display: flex; gap: 10px; align-items: flex-start; background: var(--info-light); border: 1px solid rgba(59,130,246,.2); border-radius: var(--radius-sm, 8px); padding: 10px 12px; margin: 0 0 14px; }
#eguru-app .misi-panduan > .misi-ik { color: var(--info-text); margin-top: 2px; }
#eguru-app .misi-panduan b { font-size: var(--t4); }
#eguru-app .misi-panduan p { margin: 2px 0 0; font-size: var(--t3); line-height: 1.55; color: var(--text-muted); }
#eguru-app .misi-panduan a, #eguru-app .misi-peta-pautan a { color: var(--info-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#eguru-app .misi-panduan a .misi-ik { width: 12px; height: 12px; margin-left: 2px; vertical-align: -1px; }
#eguru-app .misi-jalan { list-style: none; margin: 0 0 14px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); }
#eguru-app .misi-nod { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
#eguru-app .misi-nod + .misi-nod { border-top: 1px solid var(--border); }
#eguru-app .misi-nod.kini { background: rgba(5,150,105,.06); }
#eguru-app .misi-nod-bulat { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--text-muted); border: 1.5px solid var(--border); box-sizing: border-box; font-size: var(--t3); font-weight: 700; }
#eguru-app .misi-nod-bulat .misi-ik { width: 16px; height: 16px; }
#eguru-app .misi-nod.siap .misi-nod-bulat { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
#eguru-app .misi-nod.kini .misi-nod-bulat { border-color: var(--primary); color: var(--primary-text); border-width: 2px; }
#eguru-app .misi-nod-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#eguru-app .misi-nod-isi b { font-size: var(--t4); }
#eguru-app .misi-nod-isi span { font-size: var(--t3); color: var(--text-light); }
#eguru-app .misi-nod.akan .misi-nod-isi b { font-weight: 600; color: var(--text-muted); }
#eguru-app .misi-nod-status { font-size: var(--t2); font-weight: 600; color: var(--text-light); text-align: right; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
#eguru-app .misi-nod-status small { font-weight: 400; font-size: var(--t2); }
#eguru-app .misi-nod.siap .misi-nod-status { color: var(--primary-text); }
#eguru-app .misi-nod.kini .misi-nod-status { color: var(--primary-text); }
#eguru-app .misi-bonus-tajuk { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 8px; font-size: var(--t4); }
#eguru-app .misi-bonus-tajuk span { font-size: var(--t3); color: var(--text-light); }
#eguru-app .misi-bonus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
#eguru-app .misi-bonus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: var(--radius-sm, 8px); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; font-size: var(--t2); font-weight: 600; font-family: inherit; text-align: center; line-height: 1.2; }
#eguru-app .misi-bonus .misi-ik { color: var(--text-muted); }
#eguru-app .misi-bonus:hover { border-color: var(--primary); color: var(--primary-text); }
#eguru-app .misi-bonus.lebar { grid-column: 1 / -1; flex-direction: row; gap: 8px; min-height: 44px; }
#eguru-app .misi-peta-kaki { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#eguru-app .misi-peta-kaki:last-child { margin-bottom: 0; }
#eguru-app .misi-peta-pautan { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; font-size: var(--t3); color: var(--text-light); }
#eguru-app .misi-peta-pautan > .misi-ik { width: 15px; height: 15px; }
#eguru-app .misi-peta-pautan a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 480px) {
    #eguru-app .misi-peta { padding: 10px; }
    #eguru-app .misi-peta-kad { padding: 16px 14px 14px; }
    #eguru-app .misi-bonus-grid { grid-template-columns: repeat(2, 1fr); }
    #eguru-app .misi-nod { padding: 9px 10px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    #eguru-app .misi-sorot::after { animation: none; }
    #eguru-app .misi-bual.buka { animation: none; }
    #eguru-app .misi-sorot, #eguru-app .misi-bual { transition: none; }
}

/* ===== TEMPLAT WAKTU, AKTIVITI & KELAS GABUNGAN (2026-09-30) ===== */
/* Tamat Sesi dikira automatik — semua profil (biasa, hari berbeza, hari lain). */
#eguru-app .tt-set-grid input[readonly] { background: var(--bg); color: var(--text-muted); border-style: dashed; }
#eguru-app .tt-lanjut { margin-top: 10px; }
#eguru-app .tt-sis-kepala, #eguru-app .tt-sis-baris { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 30px; gap: 6px; align-items: center; }
#eguru-app .tt-sis-kepala { font-size: var(--t2); font-weight: 700; color: var(--text-muted); margin: 4px 0; }
#eguru-app .tt-sis-baris { margin-bottom: 6px; }
#eguru-app .tt-sis-baris .form-control { padding: 6px 7px; font-size: var(--t4); min-width: 0; }
#eguru-app .tt-sis-buang { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); color: var(--danger-text); font-size: 18px; line-height: 1; cursor: pointer; }
#eguru-app .tt-sis-senarai:empty { display: none; }
#eguru-app .tt-hari-cip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
#eguru-app .tt-hari-pil { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--border); border-radius: var(--radius-full); padding: 5px 12px; font-size: var(--t4); font-weight: 700; cursor: pointer; background: var(--card-bg); }
#eguru-app .tt-hari-pil:has(input:checked) { border-color: var(--primary); background: var(--success-light); color: var(--primary-text); }
#eguru-app .tt-hari-blok { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 8px; }
#eguru-app .tt-pv-kump { margin-top: 7px; font-size: var(--t3); }
@media (max-width: 480px) {
    #eguru-app .tt-sis-kepala { display: none; }
    #eguru-app .tt-sis-baris { grid-template-columns: 1fr 1fr 30px; }
    #eguru-app .tt-sis-baris .tt-sis-label { grid-column: 1 / 3; }
    #eguru-app .tt-sis-baris .tt-sis-buang { grid-row: 1; grid-column: 3; }
    #eguru-app .tt-sis-baris .tt-sis-ting { grid-column: 1 / 3; }
}

/* Borang kelas: jenis slot + pilih ikut nombor waktu */
#eguru-app .jw-jenis { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--radius-full); overflow: hidden; margin: 0 0 12px; max-width: 100%; }
#eguru-app .jw-jenis button { border: 0; background: var(--card-bg); color: var(--text-muted); font-weight: 700; font-size: var(--t4); padding: 7px 14px; cursor: pointer; font-family: inherit; }
#eguru-app .jw-jenis button.active { background: var(--primary-dark); color: #fff; }
#eguru-app .jw-waktu-pilih { margin-top: -4px; }
#eguru-app .jw-waktu-baris { display: flex; align-items: center; gap: 8px; }
#eguru-app .jw-waktu-baris .form-control { flex: 1; min-width: 0; }
#eguru-app .jw-waktu-baris span { font-size: var(--t4); color: var(--text-muted); flex-shrink: 0; }

/* Aktiviti bukan PdP: kelabu berlabel (tiada RPH) — grid lajur, grid masa, telefon, Hari Ini */
#eguru-app .hw-c.hw-a { background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 6px, rgba(100,116,139,.12) 6px, rgba(100,116,139,.12) 12px); color: var(--text-muted); box-shadow: inset 2px 0 0 #64748B; cursor: default; }
#eguru-app .hw-c.hw-a[role="button"] { cursor: pointer; }
/* 2026-10: sel sempit memecah perkataan di tengah ("Perhimpun an") kerana word-break: break-word.
   Kini balut HANYA di ruang; perkataan yang lebih panjang daripada sel dipotong (title sel
   membawa nama penuh) — tiada pecahan tengah perkataan & tiada tanda sempang. */
#eguru-app .hw-c.hw-a .hw-al { font-size: var(--t1); font-weight: 800; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; overflow-wrap: normal; hyphens: none; max-width: 100%; }
/* 2026-10: Import Pukal — panel pilihan subjek samar (Sains → Sains (BM) / Sains (DLP)) */
#eguru-app .pukal-samar { margin: 10px 0; padding: 12px 14px; background: var(--info-light); border: 1px solid rgba(59,130,246,.25); border-radius: var(--radius-sm); }
#eguru-app .pukal-samar-tajuk { font-weight: 800; font-size: var(--t4); color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
#eguru-app .pukal-samar-baris { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: var(--t4); font-weight: 700; }
#eguru-app .pukal-samar-baris .form-control { flex: 1 1 200px; min-width: 0; width: auto; }
#eguru-app .pukal-samar-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
#eguru-app .tt-akt { flex: 0 1 128px; min-width: 108px; border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; background: rgba(100,116,139,.1); border: 1.5px solid rgba(100,116,139,.4); color: var(--text-muted); cursor: pointer; }
#eguru-app .tt-cells.tt-grid .tt-akt { flex: initial; min-width: 0; padding: 7px 5px; gap: 2px; }
#eguru-app .rphm-slot.aktiviti { background: rgba(100,116,139,.1); border: 1px solid rgba(100,116,139,.4); color: var(--text-muted); cursor: pointer; }
#eguru-app .today-slot.aktiviti { border-style: solid; border-color: rgba(100,116,139,.4); background: rgba(100,116,139,.08); }

/* Kelas gabungan */
#eguru-app .hw-c.hw-gab { box-shadow: inset 2px 0 0 var(--kc), inset 0 -3px 0 var(--kc); }
#eguru-app .today-gab-tag { display: inline-block; font-size: var(--t1); font-weight: 800; letter-spacing: .3px; color: var(--primary-text); background: var(--success-light); border: 1px solid rgba(5,150,105,.3); border-radius: var(--radius-full); padding: 0 6px; margin-left: 4px; vertical-align: 1px; }
#eguru-app .kh-slot-kelas { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 8px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; font-family: inherit; font-size: var(--t5); }
#eguru-app .kh-slot-kelas .gi { width: 18px; height: 18px; fill: var(--kh, #0891B2); }
#eguru-app .kh-slot-kelas span { margin-left: auto; font-size: var(--t3); color: var(--text-muted); }
#eguru-app .kh-slot-kelas.sudah { border-color: rgba(5,150,105,.4); background: var(--success-light); }
#eguru-app .kh-slot-kelas.sudah .gi { fill: var(--primary); }

/* ===== JW DALAM HERO (2026-10-01) =====
   Permintaan pemilik: Jadual Waktu Mingguan di ATAS, di dalam kotak hero.
   Grid duduk atas panel kad (putih / gelap ikut tema) di dalam kecerunan
   hijau — warna kelas, ambar hari ini & coretan Kosong kekal boleh dibaca.
   Hick's Law (logik dalam bungkusHomeWeek, sg_utama.js):
     · satu tumpuan: baris hari ini + sel KINI (gelang ambar);
     · tindakan tetapan dilipat di belakang SATU butang hantu "Urus"
       (<details> kembang sebaris — hero overflow:hidden memotong menu terapung);
     · JW kosong: satu butang berisi, disorok bila jalur "Langkah seterusnya"
       sudah menyuruh isi jadual (tiada dua "Tambah Kelas" dalam hero). */
#eguru-app .hero-jw {
    position: relative; z-index: 1;               /* di atas bulatan hiasan ::before hero */
    margin-top: 14px; background: var(--card-bg); color: var(--text);
    border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
#eguru-app .hero-jw .hw-sect { padding: 12px 14px 8px; border-top: 0; }
#eguru-app .hero-jw .hw-head-row { margin-bottom: 8px; }
/* Grid tepi-ke-tepi panel pada kad sempit; container query >=560px
   memulihkan bingkai (margin 0), sama seperti sebelum ini. */
#eguru-app .hero-jw .hw-grid { margin: 0 -14px; }
@container (min-width: 560px) { #eguru-app .hero-jw .hw-grid { margin: 0; } }
#eguru-app .hero-jw .hw-legend { margin-bottom: 2px; }

/* Butang "Urus" — hantu, satu-satunya kawalan dalam baris tajuk grid.
   Panel ialah ADIK baris tajuk (bukan <details>), jadi ia sentiasa selebar
   kad dan butang kekal di tempatnya di baris tajuk bila dibuka. */
#eguru-app .hw-urus-tog {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none;
    padding: 5px 8px 5px 10px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: var(--t3); font-weight: 700; white-space: nowrap;
}
#eguru-app .hw-urus-tog:hover { color: var(--primary-text); border-color: var(--primary); }
#eguru-app .hw-urus-tog svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
#eguru-app .hw-urus-ch { transition: transform .15s; }
#eguru-app .hw-urus-tog[aria-expanded="true"] { color: var(--primary-text); border-color: var(--primary); background: rgba(16,185,129,.1); }
#eguru-app .hw-urus-tog[aria-expanded="true"] .hw-urus-ch { transform: rotate(180deg); }
#eguru-app .hw-urus-panel {
    margin: 0 0 10px; padding: 10px 12px 2px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#eguru-app .hw-urus-panel[hidden] { display: none; }
#eguru-app .hw-urus-panel .hw-jw-aksi { margin-left: 0; }
#eguru-app .hw-urus-panel .hw-jw-kaki { margin: 10px 0 8px; }

/* JW kosong: satu butang berisi + pautan senyap. */
#eguru-app .hw-kosong-aksi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
#eguru-app .hw-kosong-pautan { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t4); }
#eguru-app .hw-kosong-pautan a { color: var(--primary-text); font-weight: 700; }
#eguru-app .hw-kosong-pautan .dot { color: var(--text-light); }
#eguru-app .combo-hero:has(.home-langkah-btn[data-langkah="jadual"]) .hw-kosong-aksi .btn,
#eguru-app .combo-hero:has(.home-langkah-btn[data-langkah="jadual"]) .hw-kosong-pautan a:first-child,
#eguru-app .combo-hero:has(.home-langkah-btn[data-langkah="jadual"]) .hw-kosong-pautan .dot { display: none !important; }   /* !important: .btn memaksa inline-flex !important */

/* Telefon: panel JW TEPI KE TEPI SKRIN (2026-10-01, permintaan pemilik) —
   tiada jurang kiri/kanan, grid mendapat setiap piksel lebar. Teknik full-bleed
   100vw yang sama seperti grid Utama lama (zoom #eguru-app hanya >=900px, jadi
   vw tepat di sini; .main-content overflow-x:hidden — tiada tatal mendatar).
   Hero mesti overflow:visible supaya panel boleh melepasi padding hero, kad
   & .main-content. Bulatan hiasan ::before hero (130px, top/right -30px)
   dilukis semula SEBAGAI bahagian yang kelihatan sahaja — kotak 100x100 di
   penjuru dengan radial-gradient yang sama pusat & jejarinya — supaya ia
   tidak melimpah keluar (clip-path tidak mengurangkan kawasan skrol). */
@media (max-width: 640px) {
    #eguru-app .combo-hero:has(.hero-jw) { overflow: visible; }
    #eguru-app .combo-hero:has(.hero-jw)::before {
        top: 0; right: 0; width: 100px; height: 100px; border-radius: 0 var(--radius-lg) 0 0;
        background: radial-gradient(circle at calc(100% - 35px) 35px, rgba(255,255,255,.07) 65px, transparent 65.5px);
    }
    #eguru-app .hero-jw {
        width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
        border-radius: 0; box-shadow: none;
    }
    #eguru-app .hero-jw .hw-sect { padding: 12px 10px 6px; }
    #eguru-app .hero-jw .hw-grid { width: auto; margin: 0 -10px; border-left: 0; border-right: 0; border-radius: 0; }
}
/* Grid berbingkai (margin 0) hanya di luar julat telefon — <=640px grid
   sentiasa tepi ke tepi walaupun panel >=560px (telefon landskap kecil). */
@media (min-width: 641px) {
    @container (min-width: 560px) { #eguru-app .hero-jw .hw-grid { margin: 0; } }
}

/* 2026-10 (hab Tools): cip AKSES tetap + cip AI berasingan dijana oleh _alatHabCip (sg_alat.js).
   Cip akses kekal gaya .tools-kad-tag span; cip AI ambar kecil supaya tidak dikelirukan dengan akses.
   Pautan "Tunjuk semua" dalam Subjek Saya = warna utama aplikasi, bukan biru lalai pelayar. */
#eguru-app .tools-kad-tag .tools-cip-akses[data-akses="pro"] { color: var(--primary-text); border-color: var(--primary); }
#eguru-app .tools-kad-tag .tools-cip-ai { font-weight: 600; background: var(--accent-light); color: var(--accent-text); border-color: var(--accent); }
#eguru-app .tools-bidang-nota a { color: var(--primary-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#eguru-app .tools-bidang-nota a:hover { color: var(--primary); }


/* ===== HAB TOOLS: Subjek dipecah ikut BIDANG (2026-10-05) — alatHabBidangKump, sg_alat.js ===== */
#eguru-app .tools-bidang-kump { margin-top: 14px; }
#eguru-app .tools-bidang-kump + .tools-bidang-kump { margin-top: 22px; }
#eguru-app .tools-bidang-h {
    display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    font-size: var(--t6); font-weight: 800; color: var(--primary-text);
}
#eguru-app .tools-bidang-bil {
    font-size: var(--t2); font-weight: 700; color: var(--text-light);
    background: var(--bg); border-radius: var(--radius-full); padding: 1px 8px;
}

/* ===== JUALAN TOOLS (Fasa 3, 2026-10) — kad beli & cip harga, sg_alat.js ===== */
#eguru-app .alat-beli-kad { max-width: 560px; margin: 8px auto; }
#eguru-app .alat-beli-alt { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; }
#eguru-app .alat-beli-alt button {
    background: none; border: 0; padding: 6px 8px; cursor: pointer;
    font: inherit; font-size: var(--t4); font-weight: 600; color: var(--primary-text);
    text-decoration: underline; text-underline-offset: 3px;
}
#eguru-app .alat-beli-alt button:hover { color: var(--primary); }
#eguru-app .alat-beli-nota { margin: 10px 0 0; font-size: var(--t3); color: var(--text-light); text-align: center; }
#eguru-app .tools-kad-tag .tools-cip-akses[data-akses="beli"] { color: #92400e; background: #fef3c7; border-color: #f59e0b; font-weight: 800; }
#eguru-app .tools-kad-tag .tools-cip-akses[data-akses="milik"] { color: var(--primary-text); background: rgba(5,150,105,.1); border-color: var(--primary); }


/* ===== PWA LUAR TALIAN (Fasa 4, 2026-10) — js/sg_pwa.js ===== */
#eguru-app .pwa-kad {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--bg);
}
#eguru-app .pwa-kad.siap { background: rgba(5,150,105,.06); border-color: rgba(5,150,105,.3); }
#eguru-app .pwa-kad-t { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#eguru-app .pwa-kad-t b { font-size: var(--t5); color: var(--text); }
#eguru-app .pwa-kad-t span { font-size: var(--t3); color: var(--text-muted); }
#eguru-app .pwa-bar { flex: 1 1 100%; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
#eguru-app .pwa-bar i { display: block; height: 100%; background: var(--primary); transition: width .2s; }
#eguru-app .tools-kad-tag .tools-cip-akses[data-akses="talian"] { color: #6b7280; background: #f3f4f6; border-color: #d1d5db; }
#eguru-app .alat-luar-nota { margin-bottom: 10px; }
.pwa-luar {
    position: fixed; left: 12px; right: 12px; margin: 0 auto; bottom: calc(var(--nav-h, 68px) + 12px); z-index: 950;   /* atas bar bawah (100), bawah modal */
    width: max-content; max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 9px 14px; border-radius: 12px;
    background: #1f2937; color: #f9fafb; font: 600 12.5px/1.4 Inter, system-ui, sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); text-align: center;
}
.pwa-luar b { color: #fcd34d; }
@media (min-width: 900px) { .pwa-luar { bottom: 18px; } }


/* ===== MODAL TAKWIM & WAKTU SOLAT: butang Tetapan + Hadis 40 harian (2026-10-05) ===== */
#eguru-app .modal-tetapan-btn {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 6px;
    padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg); color: var(--primary-text); font: inherit; font-size: var(--t3); font-weight: 700; cursor: pointer;
}
#eguru-app .modal-tetapan-btn:hover { border-color: var(--primary); background: rgba(5,150,105,.08); }
#eguru-app .modal-tetapan-btn .gi { width: 15px; height: 15px; fill: currentColor; }
#eguru-app .hadis-kad { margin-top: 16px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card, #fff); }
#eguru-app .hadis-muat { color: var(--text-muted); font-size: var(--t3); }
#eguru-app .hadis-kepala { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
#eguru-app .hadis-lencana { align-self: flex-start; font-size: var(--t1); font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--primary-text); background: rgba(5,150,105,.1); border-radius: var(--radius-full); padding: 2px 9px; }
#eguru-app .hadis-kepala h3 { margin: 0; font-size: var(--t6); font-weight: 800; color: var(--text); }
#eguru-app .hadis-ar { font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', serif; font-size: 1.32em; line-height: 2; text-align: right; margin: 0 0 10px; color: var(--text); }
#eguru-app .hadis-ms { margin: 0 0 6px; font-size: var(--t4); line-height: 1.6; color: var(--text); }
#eguru-app .hadis-riwayat { margin: 0 0 8px; font-size: var(--t3); font-weight: 700; color: var(--text-muted); }
#eguru-app .hadis-syarah { margin: 6px 0 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
#eguru-app .hadis-syarah summary { cursor: pointer; font-weight: 800; font-size: var(--t4); color: var(--primary-text); }
#eguru-app .hadis-syarah ul { margin: 8px 0 0; padding-left: 18px; font-size: var(--t4); line-height: 1.55; }
#eguru-app .hadis-syarah li + li { margin-top: 4px; }
#eguru-app .hadis-sup { font-size: .68em; margin-left: 2px; }
#eguru-app .hadis-sup a { color: var(--primary-text); text-decoration: none; font-weight: 800; }
#eguru-app .hadis-nk { margin: 10px 0 0; padding: 8px 0 0 18px; border-top: 1px solid var(--border); font-size: var(--t2); line-height: 1.5; color: var(--text-muted); }
#eguru-app .hadis-nk li + li { margin-top: 3px; }
#eguru-app .hadis-nota { margin: 8px 0 0; font-size: var(--t2); color: var(--text-light); font-style: italic; }
@media (max-width: 600px) { #eguru-app #solat-modal-zon { display: none; } }   /* zon sudah tertera dalam kotak waktu solat */