/* TugasAdil — reka bentuk
   Susun atur: kanvas neutral; menu sisi terletak di atas kanvas dan ruang kerja ialah panel putih terapung.
   Label kecil menggunakan huruf mono; warna hanya untuk status, bahagian dan butang utama (hijau jenama). */
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(fonts/jakarta.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #ededeb; --surface: #ffffff; --surface-2: #f6f6f4; --surface-3: #ecece9;
  --ink: #18181a; --ink-2: #4d4d52; --ink-3: #6f6f75;
  --line: #e5e5e2; --line-2: #d0d0cc;
  --brand: #1f5245; --brand-2: #17443a; --brand-ink: #ffffff; --brand-soft: #e1eee7; --brand-text: #1b4a3e;
  --accent: #e8a317; --accent-ink: #3d2a00;
  --focus: #2a78d6; --netral: #6f7e76;
  --berat: #d03b3b; --berat-soft: #fbe9e7; --berat-ink: #a12323;
  --kurang: #2a78d6; --kurang-soft: #e6f0fc; --kurang-ink: #1c5cab;
  --baik: #0ca30c; --baik-soft: #e2f4e0; --baik-ink: #006300;
  --amaran: #fab219; --amaran-soft: #fff3d1; --amaran-ink: #6f4c00;
  --s0: #9aa69f; --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948;
  --sisi-bg: #ededeb; --sisi-ink: #18181a; --sisi-ink-2: #55555a; --sisi-line: #dddcd8; --sisi-aktif: #e2e2de;
  --tirai: rgba(16,20,17,.45);
  --shadow-1: 0 1px 1px rgba(16,20,17,.04), 0 1px 2px rgba(16,20,17,.05);
  --shadow: 0 2px 6px rgba(16,20,17,.06), 0 18px 44px rgba(16,20,17,.14);
  --f-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --r: 9px; --r-lg: 14px; --r-panel: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0b0c; --surface: #141416; --surface-2: #1a1a1c; --surface-3: #232326;
    --ink: #f3f3f4; --ink-2: #b6b6bb; --ink-3: #86868d;
    --line: #26262a; --line-2: #37373c;
    --brand: #1c8268; --brand-2: #18735c; --brand-ink: #ffffff; --brand-soft: #163029; --brand-text: #7fd3b8;
    --accent: #f0b43a; --accent-ink: #2b1d00;
    --focus: #5598e7; --netral: #5f6d66;
    --berat: #e66767; --berat-soft: #3a1f1f; --berat-ink: #f3a7a7;
    --kurang: #3987e5; --kurang-soft: #182a40; --kurang-ink: #9ec5f4;
    --baik: #0ca30c; --baik-soft: #15301a; --baik-ink: #7fd67f;
    --amaran: #fab219; --amaran-soft: #382b0b; --amaran-ink: #f7cf73;
    --s0: #6b7972; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --sisi-bg: #0b0b0c; --sisi-ink: #f3f3f4; --sisi-ink-2: #a6a6ac; --sisi-line: #26262a; --sisi-aktif: #1c1c1f;
    --tirai: rgba(0,0,0,.62);
    --shadow-1: 0 1px 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.3);
    --shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0c; --surface: #141416; --surface-2: #1a1a1c; --surface-3: #232326;
  --ink: #f3f3f4; --ink-2: #b6b6bb; --ink-3: #86868d;
  --line: #26262a; --line-2: #37373c;
  --brand: #1c8268; --brand-2: #18735c; --brand-ink: #ffffff; --brand-soft: #163029; --brand-text: #7fd3b8;
  --accent: #f0b43a; --accent-ink: #2b1d00;
  --focus: #5598e7; --netral: #5f6d66;
  --berat: #e66767; --berat-soft: #3a1f1f; --berat-ink: #f3a7a7;
  --kurang: #3987e5; --kurang-soft: #182a40; --kurang-ink: #9ec5f4;
  --baik: #0ca30c; --baik-soft: #15301a; --baik-ink: #7fd67f;
  --amaran: #fab219; --amaran-soft: #382b0b; --amaran-ink: #f7cf73;
  --s0: #6b7972; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --sisi-bg: #0b0b0c; --sisi-ink: #f3f3f4; --sisi-ink-2: #a6a6ac; --sisi-line: #26262a; --sisi-aktif: #1c1c1f;
  --tirai: rgba(0,0,0,.62);
  --shadow-1: 0 1px 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55);
}

/* ——— Asas */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-family: var(--f-body); margin: 0; line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 14.5px; font-weight: 650; }
p { margin: 0; }
a { color: var(--brand-text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.ik { flex: none; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--brand-soft); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.n { font-variant-numeric: tabular-nums; }
.senyap { color: var(--ink-3); }
.kedua { color: var(--ink-2); }
.tebal { font-weight: 600; }
.kecil { font-size: 12.5px; }
.potong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.baris { display: flex; align-items: center; gap: 8px; min-width: 0; }
.baris.balut { flex-wrap: wrap; }
.baris.antara { justify-content: space-between; }
.lajur { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lajur.rapat { gap: 4px; }
.lajur.luas { gap: 20px; }
.tumbuh { flex: 1 1 auto; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.penuh { grid-column: 1 / -1; }
@media (max-width: 620px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } }

/* ——— Butang */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 550; white-space: nowrap; text-decoration: none; overflow-wrap: normal; box-shadow: var(--shadow-1); transition: background-color .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.utama { background: var(--brand) linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 62%); border-color: var(--brand-2); color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(16,20,17,.24); }
.btn.utama:hover { background-color: var(--brand-2); border-color: var(--brand-2); }
.btn.aksen { background: var(--accent) linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 62%); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(16,20,17,.18); }
.btn.aksen:hover { filter: brightness(1.05); border-color: var(--accent); }
.btn.hantu { border-color: transparent; background: transparent; box-shadow: none; }
.btn.hantu:hover { background: var(--surface-3); border-color: transparent; }
.btn.bahaya { color: var(--berat-ink); }
.btn.bahaya.utama { background: var(--berat); border-color: var(--berat); color: #fff; }
.btn.kecil { height: 28px; padding: 0 9px; font-size: 12.5px; gap: 4px; border-radius: 7px; }
.btn.besar { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 11px; }
.btn.ikon { width: 34px; padding: 0; }
.btn.ikon.kecil { width: 28px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.sibuk { position: relative; color: transparent !important; pointer-events: none; }
.btn.sibuk::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-3); border-top-color: transparent; animation: pusing .7s linear infinite; }
.btn.utama.sibuk::after { border-color: var(--brand-ink); border-top-color: transparent; }
@keyframes pusing { to { transform: rotate(360deg); } }
.pautan { background: none; border: 0; padding: 0; color: var(--brand-text); font-weight: 550; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ——— Medan borang */
.inp { width: 100%; height: 36px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); min-width: 0; box-shadow: var(--shadow-1); transition: border-color .12s, box-shadow .12s; }
textarea.inp { height: auto; min-height: 84px; padding: 8px 11px; resize: vertical; line-height: 1.5; }
select.inp { padding-right: 28px; }
.inp:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.inp::placeholder { color: var(--ink-3); }
.inp.kecil { height: 28px; padding: 0 8px; font-size: 13px; border-radius: 7px; }
.inp[disabled] { background: var(--surface-3); color: var(--ink-3); box-shadow: none; }
.medan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.medan > label, .label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.medan .bantu { font-size: 12px; color: var(--ink-3); }
.medan.ralat .inp { border-color: var(--berat); }
.medan .ralat-teks { font-size: 12px; color: var(--berat-ink); }
.semak { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.semak input { flex: none; margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--brand); }
.semak span small { display: block; color: var(--ink-3); font-size: 12px; }
.cari { position: relative; min-width: 0; }
.cari svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cari .inp { padding-left: 33px; }
.segmen { display: inline-flex; border-radius: 10px; background: var(--surface-3); padding: 3px; gap: 2px; max-width: 100%; flex-wrap: wrap; }
.segmen button { border: 0; background: transparent; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.segmen button:hover { color: var(--ink); }
.segmen button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.kotak-ralat { padding: 10px 12px; border-radius: var(--r); background: var(--berat-soft); color: var(--berat-ink); font-size: 13px; }
.kotak-nota { padding: 10px 12px; border-radius: var(--r); background: var(--surface-3); color: var(--ink-2); font-size: 13px; }
.kotak-nota.amaran { background: var(--amaran-soft); color: var(--amaran-ink); }
.kotak-nota.baik { background: var(--baik-soft); color: var(--baik-ink); }
.kotak-nota.kurang { background: var(--kurang-soft); color: var(--kurang-ink); }

/* ——— Cip (tag status berwarna lembut) */
.cip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow-wrap: normal; background: var(--surface-3); color: var(--ink-2); }
.cip.berat { background: var(--berat-soft); color: var(--berat-ink); }
.cip.kurang { background: var(--kurang-soft); color: var(--kurang-ink); }
.cip.baik { background: var(--baik-soft); color: var(--baik-ink); }
.cip.amaran { background: var(--amaran-soft); color: var(--amaran-ink); }
.cip.jenama { background: var(--brand-soft); color: var(--brand-text); }
.cip.tiada, .cip.garis { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.cip.gred { height: 20px; padding: 0 6px; border-radius: 5px; font-weight: 600; font-size: 11.5px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.petak { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s0); flex: none; }
.w1 { background: var(--s1); } .w2 { background: var(--s2); } .w3 { background: var(--s3); } .w4 { background: var(--s4); }
.w5 { background: var(--s5); } .w6 { background: var(--s6); } .w7 { background: var(--s7); } .w8 { background: var(--s8); } .w0 { background: var(--s0); }

/* ——— Kad, jadual */
.kad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.kad-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kad-badan { padding: 16px; }
.kad-kaki { padding: 10px 16px; border-top: 1px solid var(--line); }
.jadual-bungkus { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.kad > .jadual-bungkus { border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
table.jadual { width: 100%; border-collapse: collapse; font-size: 13.5px; overflow-wrap: normal; }
.jadual th { text-align: left; font: 600 10.5px var(--f-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.jadual td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.jadual tbody tr:last-child td { border-bottom: 0; }
.jadual tbody tr:hover { background: var(--surface-2); }
.jadual tr.boleh-klik { cursor: pointer; }
.jadual .n { text-align: right; }
.jadual th.isih { cursor: pointer; user-select: none; }
.jadual th.isih:hover { color: var(--ink); }
.jadual th .anak { display: inline-block; margin-left: 3px; opacity: .9; }
.jadual td.aksi { text-align: right; white-space: nowrap; width: 1%; }
.jadual .nama { font-weight: 600; min-width: 190px; }
.jadual tfoot td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
/* Jadual gred pada skrin sempit: setiap gred menjadi satu blok supaya kedudukan berbanding sasaran kelihatan tanpa menatal ke tepi. */
@media (max-width: 620px) {
  .jadual-gred, .jadual-gred tbody { display: block; }
  .jadual-gred thead { display: none; }
  .jadual-gred tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .jadual-gred tbody tr:last-child { border-bottom: 0; }
  .jadual-gred td { display: block; padding: 0; border: 0; text-align: left; }
  .jadual-gred td.g-kedudukan { margin-left: auto; }
  .jadual-gred td.g-bar { flex: 1 0 100%; order: 2; }
  .jadual-gred td[data-label] { order: 3; font-size: 12.5px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .jadual-gred td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-weight: 400; }
}

/* ——— Petak statistik: jalur label di atas, angka besar, nota di bawah */
.stat-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-width: 0; }
.stat-label { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stat-label svg { color: var(--ink-3); }
.stat-nilai { padding: 13px 14px 0; font: 700 30px/1.1 var(--f-body); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat-nilai small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.stat-nota { padding: 5px 14px 13px; font-size: 12.5px; color: var(--ink-3); }
.stat-isi { padding: 12px 14px 0; }
.stat > :last-child { padding-bottom: 14px; }
dialog.modal .stat-baris { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ——— Bar beban (bar bersegmen nipis pada skala bersama) */
.trek { position: relative; height: 22px; min-width: 120px; display: flex; align-items: center; }
.trek .julat { position: absolute; top: 0; bottom: 0; background: var(--surface-3); }
.trek .purata { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-3); }
.bar { position: relative; display: flex; gap: 2px; height: 8px; min-width: 0; }
.bar i { display: block; height: 100%; border-radius: 4px; min-width: 3px; flex: 0 0 auto; }
.bar.lebih { margin-right: 12px; }
.bar.lebih::after { content: ""; position: absolute; right: -11px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border-top: 2px solid var(--ink-3); border-right: 2px solid var(--ink-3); transform: rotate(45deg); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda .garis-purata { width: 1px; height: 12px; background: var(--ink-3); display: inline-block; }
.legenda .kotak-julat { width: 14px; height: 10px; background: var(--surface-3); border-radius: 2px; display: inline-block; box-shadow: inset 0 0 0 1px var(--line); }
.meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }

/* ——— Rangka aplikasi: menu sisi di atas kanvas, ruang kerja sebagai panel terapung */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100dvh; background: var(--bg); }
.sisi { background: var(--sisi-bg); color: var(--sisi-ink); position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; overflow-y: auto; z-index: 30; }
.jenama { display: flex; align-items: center; gap: 9px; font: 800 17px var(--f-display); letter-spacing: -.015em; color: inherit; text-decoration: none; }
.jenama .tanda { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(16,20,17,.2); }
.sisi .jenama { padding: 20px 18px 12px; }
.sisi-sekolah { margin: 2px 12px 8px; padding: 10px 12px; border: 1px solid var(--sisi-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 7px; }
.sisi-sekolah b { font-weight: 650; font-size: 13.5px; line-height: 1.3; }
.sisi-sekolah select { width: 100%; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 6px; font-size: 12.5px; }
.sisi-sekolah select option { color: #171b18; background: #fff; }
.nav { display: flex; flex-direction: column; gap: 1px; padding: 4px 10px; }
.nav-label { font: 600 10.5px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); padding: 16px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 9px; color: var(--sisi-ink-2); text-decoration: none; font-weight: 500; line-height: 1.3; }
.nav a > svg { color: var(--ink-3); }
.nav a:hover { background: var(--sisi-aktif); color: var(--sisi-ink); }
.nav a.aktif { background: var(--surface); color: var(--sisi-ink); font-weight: 650; box-shadow: var(--shadow-1), inset 0 0 0 1px var(--sisi-line); }
.nav a.aktif > svg { color: var(--ink); }
.nav a .hujung { margin-left: auto; display: inline-flex; align-items: center; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.nav a .petak { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.sisi-kaki { margin-top: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sisi-pengguna { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--sisi-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.sisi-pengguna .avatar { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; font: 700 12px var(--f-body); letter-spacing: .02em; flex: none; }
.sisi-pengguna .lajur { gap: 0; line-height: 1.3; }
.sisi-pengguna b { font-size: 13px; font-weight: 650; }
.sisi-pengguna small { color: var(--ink-3); font-size: 12px; }
.sisi-status { display: flex; justify-content: space-between; gap: 8px; min-height: 16px; padding: 0 10px; font: 500 11px var(--f-mono); color: var(--ink-3); }
.ruang { min-width: 0; display: flex; flex-direction: column; margin: 10px 10px 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1); overflow: clip; }
/* Bar atas panel: laluan semasa di kiri, carian guru di kanan */
.bar-atas { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 9px 20px 9px 28px; border-bottom: 1px solid var(--line); }
.remah { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--ink-3); }
.remah b { color: var(--ink); font-weight: 600; }
.remah .potong { max-width: 32ch; }
.bar-status { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.bar-cari { display: flex; align-items: center; gap: 8px; height: 34px; width: min(280px, 34vw); padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--ink-3); font-size: 13px; text-align: left; }
.bar-cari:hover { border-color: var(--line-2); color: var(--ink-2); }
.bar-cari span { flex: 1; min-width: 0; }
kbd { font: 600 10.5px var(--f-mono); padding: 2px 5px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; }
.atas { display: none; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); align-items: center; gap: 10px; padding-block: 8px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.kandungan { width: 100%; max-width: 1340px; margin: 0 auto; padding-block: 24px 64px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.kepala > div:first-child { min-width: 0; }
.kepala h1 + p { color: var(--ink-2); margin-top: 4px; max-width: 70ch; }
.kepala-aksi { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bahagian-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; }
.bahagian-h:first-child { margin-top: 0; }
.sepanduk { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 9px 14px; font-size: 13px; background: var(--amaran-soft); color: var(--amaran-ink); padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sepanduk.berat { background: var(--berat-soft); color: var(--berat-ink); }
.sepanduk.demo { background: var(--kurang-soft); color: var(--kurang-ink); }
.sepanduk .btn { height: 26px; font-size: 12.5px; }
.tirai-sisi { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sisi { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); height: auto; transform: translateX(-102%); transition: transform .18s ease; padding-top: env(safe-area-inset-top, 0px); border-right: 1px solid var(--line); }
  .app.buka-sisi .sisi { transform: none; box-shadow: var(--shadow); }
  .app.buka-sisi .tirai-sisi { display: block; position: fixed; inset: 0; background: var(--tirai); z-index: 25; border: 0; }
  .ruang { margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .atas { display: flex; }
  .bar-atas { display: none; }
  .kandungan { padding-block: 18px 64px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .sepanduk { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .001s !important; } }

/* ——— Tab: pil lembut pada tab aktif */
.tab { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; padding-bottom: 8px; overflow-x: auto; }
.tab button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font-weight: 550; color: var(--ink-2); white-space: nowrap; }
.tab button:hover { background: var(--surface-2); color: var(--ink); }
.tab button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); }

/* ——— Dialog, menu, toast, petua */
dialog.modal { border: 1px solid var(--line); padding: 0; border-radius: 16px; background: var(--surface); color: var(--ink); width: min(540px, calc(100vw - 20px)); max-height: min(88dvh, 920px); box-shadow: var(--shadow); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal.lebar { width: min(760px, calc(100vw - 20px)); }
dialog.modal.luas { width: min(1000px, calc(100vw - 20px)); }
dialog.modal.sempit { width: min(420px, calc(100vw - 20px)); }
dialog.modal::backdrop { background: var(--tirai); }
.modal-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.modal-kepala h2 { font-size: 17px; }
.modal-kepala p { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.modal-badan { padding: 4px 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.modal-kaki { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.modal-kaki .kiri { margin-right: auto; }
.menu { position: fixed; z-index: 1000; min-width: 190px; max-width: 300px; max-height: calc(100dvh - 16px); overflow-y: auto; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; inset: auto; }
.menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 7px 9px; border-radius: 7px; text-align: left; font-weight: 500; }
.menu button:hover, .menu button:focus-visible { background: var(--surface-3); }
.menu button.bahaya { color: var(--berat-ink); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.menu .menu-label { font: 600 10.5px var(--f-mono); color: var(--ink-3); padding: 7px 9px 3px; text-transform: uppercase; letter-spacing: .08em; }
.toast-bekas { position: fixed; inset: auto 0 calc(18px + env(safe-area-inset-bottom, 0px)) 0; margin: 0 auto; border: 0; padding: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 2000; width: fit-content; max-width: calc(100vw - 24px); overflow: visible; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--surface); font-weight: 500; box-shadow: var(--shadow); animation: naik .16s ease-out; }
.toast.ralat { background: var(--berat); color: #fff; }
@keyframes naik { from { transform: translateY(8px); opacity: 0; } }
.petua { position: fixed; z-index: 1500; margin: 0; inset: auto; max-width: 300px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 12.5px; pointer-events: none; }
.petua b { display: block; margin-bottom: 4px; font-size: 13px; }
.petua .p-baris { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.petua .p-baris span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.petua .p-jumlah { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; font-weight: 600; }

/* ——— Keadaan kosong */
.kosong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--ink-2); border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--surface); }
.kosong .bulatan { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.kosong h3 { color: var(--ink); }
.kosong p { max-width: 46ch; }
.kosong .baris { margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.memuat { display: grid; place-items: center; padding: 80px 20px; color: var(--ink-3); gap: 12px; }
.memuat i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--brand); animation: pusing .8s linear infinite; }

/* ——— Editor bahagian: jawatankuasa */
.dua-ruang { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.dua-ruang > aside { position: sticky; top: 16px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
@media (max-width: 1180px) { .dua-ruang { grid-template-columns: minmax(0, 1fr); } .dua-ruang > aside { display: none; } }
.kumpulan-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; font: 600 10.5px var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.kumpulan-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.jk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; scroll-margin-top: 70px; }
.jk-kepala { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 6px; }
.jk-kepala .lipat { border: 0; background: none; width: 26px; height: 26px; border-radius: 5px; color: var(--ink-3); display: grid; place-items: center; flex: none; }
.jk-kepala .lipat:hover { background: var(--surface-3); color: var(--ink); }
.jk-kepala .lipat svg { transition: transform .12s; }
.jk.tutup .jk-kepala .lipat svg { transform: rotate(-90deg); }
.jk-nombor { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; flex: none; }
.jk-nama { font: 650 14.5px var(--f-body); letter-spacing: -.012em; min-width: 0; }
.jk-meta { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.jk.tutup .jk-badan { display: none; }
.jk-badan { border-top: 1px solid var(--line); }
.ahli { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 70px 30px; align-items: center; gap: 8px; padding: 5px 10px 5px 14px; border-bottom: 1px solid var(--line); min-height: 40px; }
.ahli:last-of-type { border-bottom: 0; }
.ahli:hover { background: var(--surface-2); }
.ahli .jawatan { font: 600 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); min-width: 0; }
.ahli .jawatan small { display: block; font: 400 12px var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ahli .orang { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid transparent; background: none; border-radius: 5px; padding: 4px 6px; margin-left: -6px; text-align: left; width: 100%; }
button.orang:hover { border-color: var(--line-2); background: var(--surface); }
.ahli .orang .nm { font-weight: 600; min-width: 0; }
.ahli .orang.kosong-slot { color: var(--ink-3); font-weight: 500; font-style: italic; border: 1px dashed var(--line-2); }
.ahli .mata { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.ahli .mata small { color: var(--ink-3); font-size: 11.5px; }
.ahli .mata.manual { text-decoration: underline dotted; text-underline-offset: 3px; }
.ahli .alat { display: flex; justify-content: flex-end; gap: 0; opacity: .35; }
.ahli:hover .alat, .ahli:focus-within .alat { opacity: 1; }
.ahli .alat .btn { width: 26px; height: 26px; }
.jk-kaki { display: flex; align-items: center; gap: 8px; padding: 7px 10px 9px 14px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.jk-bidang { padding: 8px 14px 10px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; white-space: pre-line; }
.titik { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-2); }
.titik.berat { background: var(--berat); } .titik.kurang { background: var(--kurang); } .titik.seimbang { background: var(--s0); }
.petunjuk-titik { margin: 0 0 12px; }
.avatar-k { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; font: 700 10px var(--f-body); letter-spacing: .02em; background: var(--surface-3); color: var(--ink-2); }
.avatar-k.berat { background: var(--berat-soft); color: var(--berat-ink); }
.avatar-k.kurang { background: var(--kurang-soft); color: var(--kurang-ink); }
.avatar-k.luar { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.ahli .orang .hujung-status { margin-left: auto; display: inline-flex; flex: none; }
.jk-kepala { background: var(--surface-2); border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.jk.tutup .jk-kepala { border-radius: calc(var(--r-lg) - 1px); }
.petunjuk-titik .penuh { flex-basis: 100%; }
@media (max-width: 620px) {
  .ahli { grid-template-columns: minmax(0, 1fr) 62px 30px; row-gap: 0; padding-top: 7px; padding-bottom: 7px; }
  .ahli .jawatan { grid-column: 1 / -1; font-size: 12.5px; }
  .jk-meta .cip.tahap { display: none; }
}

/* Panel beban di sisi */
.panel-beban { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; min-height: 0; }
.panel-beban .kad-kepala { padding: 10px 12px; }
.panel-beban .senarai { overflow-y: auto; padding: 4px 0; }
.pb-baris { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 2px 8px; padding: 5px 12px; align-items: center; border: 0; background: none; width: 100%; text-align: left; }
.pb-baris:hover { background: var(--surface-2); }
.pb-baris .nm { font-size: 13px; font-weight: 550; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pb-baris .mt { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); grid-row: span 2; }
.pb-baris .trek { height: 10px; min-width: 0; }

/* Pemilih guru */
.pilih-senarai { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow-y: auto; min-height: 180px; max-height: 46dvh; }
.pilih-baris { display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px 44px 96px; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; width: 100%; }
.pilih-baris:last-child { border-bottom: 0; }
.pilih-baris:hover:not([disabled]) { background: var(--surface-2); }
.pilih-baris[aria-pressed="true"] { background: var(--brand-soft); }
.pilih-baris[disabled] { opacity: .5; cursor: not-allowed; }
.pilih-baris .tanda { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.pilih-baris[aria-pressed="true"] .tanda { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pilih-baris .nm { font-weight: 600; }
.pilih-baris .sub { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pilih-baris .trek { height: 12px; min-width: 0; }
@media (max-width: 620px) { .pilih-baris { grid-template-columns: 20px minmax(0, 1fr) 40px 92px; } .pilih-baris .trek { display: none; } }

/* Carian guru (bar atas, Ctrl/⌘ K) */
.cari-hasil { min-height: 120px; max-height: 52dvh; }
.cari-baris { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.cari-baris:last-child { border-bottom: 0; }
.cari-baris:hover, .cari-baris.aktif { background: var(--surface-2); }
.cari-baris b { display: block; font-weight: 600; }
.cari-baris small { display: block; color: var(--ink-3); font-size: 12px; }
.cari-baris .mt { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* Laci butiran guru */
.tugas-kumpulan { display: flex; flex-direction: column; }
.tugas-kumpulan h4 { display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 10px 0 4px; }
.tugas-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tugas-baris:last-child { border-bottom: 0; }
.tugas-baris small { color: var(--ink-3); display: block; }

/* ——— Langkah bermula, kemajuan */
.langkah { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.langkah:last-child { border-bottom: 0; }
.langkah .bulat { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.langkah.siap .bulat { background: var(--baik-soft); border-color: transparent; color: var(--baik-ink); }
.langkah.siap b { color: var(--ink-3); text-decoration: line-through; }
.kemajuan-baris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.kemajuan-baris:last-child { border-bottom: 0; }
.kemajuan-baris:hover { background: var(--surface-2); }
@media (max-width: 620px) { .kemajuan-baris { grid-template-columns: minmax(0, 1fr) auto; } .kemajuan-baris .meter-sel { grid-column: 1 / -1; order: 3; } }

/* ——— Halaman awam (pendaratan, log masuk) */
.awam { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.awam-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.awam-dalam { width: 100%; max-width: 1140px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.awam-bar .awam-dalam { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; flex-wrap: wrap; padding-block: 8px; }
.awam-bar .jenama { color: var(--ink); }
.wira { padding-block: 56px 48px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.wira h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.wira h1 em { font-style: normal; color: var(--brand-text); box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.wira p.pengenalan { font-size: 17px; color: var(--ink-2); margin-top: 16px; max-width: 54ch; line-height: 1.55; }
.wira .baris { margin-top: 24px; flex-wrap: wrap; }
.wira .nota-kecil { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.pameran { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.pameran-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.pameran-baris { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 16px; border-bottom: 1px solid var(--line); }
.pameran-baris:last-child { border-bottom: 0; }
.seksyen { padding-block: 52px; border-top: 1px solid var(--line); }
.seksyen > .awam-dalam > h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; max-width: 26ch; }
.seksyen > .awam-dalam > p.pengenalan { color: var(--ink-2); margin-top: 8px; max-width: 62ch; font-size: 15.5px; }
.tiga { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.tiga .butir { border-top: 2px solid var(--ink); padding-top: 14px; }
.tiga .butir .angka { font: 800 13px var(--f-display); letter-spacing: .08em; color: var(--ink-3); }
.tiga .butir h3 { font-size: 17px; margin: 6px 0; }
.tiga .butir p { color: var(--ink-2); }
.ciri { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 28px; margin-top: 28px; }
.ciri .butir { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
.ciri .butir .ikon-b { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; grid-row: span 2; }
.ciri .butir p { color: var(--ink-2); grid-column: 2; }
.harga-kad { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.harga-kad > div { padding: 24px; }
.harga-kad > div + div { border-left: 1px solid var(--line); background: var(--surface-2); }
.harga-kad .harga { font: 800 34px/1.1 var(--f-display); letter-spacing: -.02em; }
.senarai-semak { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.senarai-semak li { display: flex; gap: 9px; align-items: flex-start; }
.senarai-semak svg { color: var(--baik-ink); margin-top: 2px; }
.awam-kaki { margin-top: auto; border-top: 1px solid var(--line); padding-block: 22px; color: var(--ink-3); font-size: 13px; }
.auth { flex: 1; display: grid; place-items: center; padding-block: 36px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.auth-kad { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.auth-kad.lebar { width: min(600px, 100%); }
/* Log masuk: borang di kiri atas permukaan putih, pengenalan dan contoh paparan di kanan atas kanvas */
.auth-dua { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-dua > .auth { background: var(--surface); }
.auth-dua .auth-kad { width: min(380px, 100%); padding: 8px; border: 0; background: transparent; box-shadow: none; }
.auth-sisi { display: grid; align-items: center; padding: 44px clamp(24px, 5vw, 64px); background: var(--bg); border-left: 1px solid var(--line); color: var(--ink); }
.auth-sisi-dalam { display: flex; flex-direction: column; gap: 16px; max-width: 520px; min-width: 0; }
.auth-sisi h2 { font: 800 clamp(24px, 2.8vw, 34px)/1.12 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.auth-sisi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--ink-2); }
.auth-sisi li { display: flex; gap: 10px; align-items: flex-start; }
.auth-sisi li svg { flex: none; margin-top: 3px; color: var(--brand); }
.auth-sisi .pameran { margin-top: 8px; }
.auth-sisi-kaki { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }
.auth-sisi-kaki a { font-weight: 550; }
.auth-versi { margin-left: auto; font: 500 11px var(--f-mono); }
/* Log masuk dengan Google: pemisah "atau" dan butang yang dilukis oleh skrip Google (iframe). color-scheme: light
   mengelakkan latar gelap di belakang iframe itu apabila aplikasi dalam tema gelap. */
.auth-google { display: flex; flex-direction: column; gap: 12px; }
.auth-google[hidden] { display: none; }
.auth-atau { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; }
.auth-atau::before, .auth-atau::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-google-butang { display: flex; justify-content: center; min-height: 44px; color-scheme: light; }
.auth-google.sibuk .auth-google-butang { opacity: .5; pointer-events: none; }
.auth-demo { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line); }
.auth-demo button.cip { cursor: pointer; border: 0; }
.auth-demo button.cip:hover { background: var(--surface-3); }
@media (max-width: 860px) {
  .auth-dua { grid-template-columns: minmax(0, 1fr); }
  .auth-dua > .auth { padding-block: 28px; }
  .auth-sisi { padding: 28px 20px 36px; border-left: 0; border-top: 1px solid var(--line); }
  .auth-sisi-dalam { margin: 0 auto; }
  .auth-sisi .pameran { display: none; }
}
/* Pendaratan: wira berpusat dengan satu perkataan berwarna, butang pil, contoh paparan berbingkai di bawahnya */
.kurung { font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wira { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding-block: 64px 0; }
.wira h1 { font-family: var(--f-display); font-size: clamp(32px, 5.4vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; max-width: 17ch; margin-top: 18px; }
.wira h1 em { font-style: normal; color: var(--brand-text); box-shadow: none; }
.wira p.pengenalan { margin-top: 18px; max-width: 58ch; }
.wira .baris { margin-top: 26px; justify-content: center; }
.wira .btn.besar { border-radius: 999px; padding: 0 24px; }
.wira .nota-kecil { margin-top: 14px; }
.wira-bingkai { width: min(880px, 100%); margin-top: 44px; padding: 10px 10px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--surface-3); text-align: left; }
.wira-bingkai .pameran { border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: none; }
.seksyen > .awam-dalam > h2 { font-family: var(--f-display); }
.seksyen { background: var(--surface); }
@media (max-width: 860px) { .wira { padding-block: 40px 0; } .wira-lama { grid-template-columns: minmax(0, 1fr); padding-block: 36px 32px; gap: 28px; } .tiga { grid-template-columns: minmax(0, 1fr); } .harga-kad { grid-template-columns: minmax(0, 1fr); } .harga-kad > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* ——— Papan pemuka, rumusan */
.pemuka-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .pemuka-grid { grid-template-columns: minmax(0, 1fr); } }
.pecahan { display: flex; gap: 2px; height: 28px; }
.pecahan .blok { border-radius: 4px; display: flex; align-items: center; padding: 0 9px; font-size: 12.5px; font-weight: 600; color: #fff; min-width: 5px; white-space: nowrap; overflow-wrap: normal; }
.pecahan .blok.berat { background: var(--berat); }
.pecahan .blok.seimbang { background: var(--netral); }
.pecahan .blok.kurang { background: var(--kurang); }
.pecahan .blok.awal { background: var(--line-2); color: var(--ink); }
.pecahan .blok.tiada { background: var(--surface-3); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.kad + .kad, section.kad + section.kad { margin-top: 0; }
.stat-visual { margin-top: auto; padding: 0 14px 14px; }
.stat-agih { display: flex; gap: 2px; height: 6px; }
.stat-agih i { display: block; border-radius: 3px; min-width: 4px; background: var(--line-2); }
.stat-agih i.berat { background: var(--berat); } .stat-agih i.seimbang { background: var(--netral); } .stat-agih i.kurang { background: var(--kurang); }

/* ——— Kemasan telefon dan tepi selamat (safe area) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bg); }
.sisi { padding-left: env(safe-area-inset-left, 0px); }
@media (max-width: 900px) { body:has(.app)::before { background: var(--sisi-bg); } }
@media (max-width: 620px) {
  .stat-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-baris > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kemajuan-baris { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ahli .orang { flex-wrap: wrap; row-gap: 3px; }
  .ahli .orang .nm.potong { white-space: normal; overflow-wrap: anywhere; }
  .kepala-aksi .btn { flex: 1 1 auto; }
}