:root{
  --bg:#f4f6f9; --panel:#fff; --ink:#1c2533; --muted:#647086; --line:#e2e7ef; --line2:#eef1f6;
  --brand:#16325c; --brand-2:#1f4a85; --accent:#d4a017; --ok:#1d7a46; --ok-bg:#e6f4ec;
  --err:#b42318; --err-bg:#fdecea; --warn-bg:#fff6dd; --warn:#8a5a00;
  --pos:#1d7a46; --neg:#b42318; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif}
a{color:var(--brand-2);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px} h2{font-size:16px;margin:0 0 12px} h3{font-size:14px;margin:0 0 8px}
.kecil{font-size:12px;color:var(--muted)} .muted{color:var(--muted)}
.rangka{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sisi{background:var(--brand);color:#dbe4f3;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.sisi .jenama{display:flex;gap:10px;align-items:center;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.sisi .logo{width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--brand);display:grid;place-items:center;font-weight:800}
.sisi .tajuk{font-weight:700;color:#fff;line-height:1.2} .sisi .sub{font-size:11px;opacity:.75}
.sisi .kump{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin:16px 8px 6px}
.sisi a,.sisi span.mati{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:7px;color:#dbe4f3}
.sisi a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.sisi a.aktif{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.sisi span.mati{opacity:.45;cursor:default}
.lencana{font-size:10px;background:rgba(255,255,255,.14);padding:1px 6px;border-radius:999px}
.utama{padding:22px 28px 60px;max-width:1400px;width:100%;min-width:0}
.atas{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.atas>div:first-child{flex:1;min-width:0}
.pengguna{display:flex;gap:10px;align-items:center;font-size:13px;white-space:nowrap;flex-shrink:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.grid{display:grid;gap:14px} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kad{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.kad .nilai{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums} .kad .lab{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:#fafbfd;position:sticky;top:0;z-index:1}
tr:hover td{background:#fafcff}
td.n,th.n{text-align:right}
.jadual-luas{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:8px}
.jadual-luas th:first-child,.jadual-luas td:first-child{position:sticky;left:0;background:#fff;z-index:2}
.jadual-luas th:first-child{z-index:3;background:#fafbfd}
.butang,button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:7px 12px;border-radius:7px;font:inherit;cursor:pointer}
.butang:hover,button:hover{border-color:#c5cfdd;text-decoration:none}
.utama-btn{background:var(--brand-2);border-color:var(--brand-2);color:#fff} .utama-btn:hover{background:var(--brand)}
.bahaya{color:var(--err);border-color:#f3c1bb}
.btn-kecil{padding:3px 8px;font-size:12px}
label{display:block;font-size:12px;font-weight:600;color:#3a4558;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{width:100%;padding:8px 10px;border:1px solid #cfd7e3;border-radius:7px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #bcd3f5;border-color:var(--brand-2)}
.medan{margin-bottom:12px}
.baris{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.baris>.medan{flex:1;min-width:160px}
input.sel{width:58px;padding:4px 6px;text-align:right}
.amaran{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.amaran.ok{background:var(--ok-bg);color:var(--ok)} .amaran.ralat{background:var(--err-bg);color:var(--err)} .amaran.info{background:var(--warn-bg);color:var(--warn)}
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;background:#eef2f8;color:#3b4a62;margin:2px 2px 2px 0}
.tag.x{padding-right:4px}
.tag form{display:inline} .tag button{border:0;background:none;padding:0 2px;color:#8a95a8;font-size:12px}
.status{font-size:11px;padding:2px 8px;border-radius:999px} .status.on{background:var(--ok-bg);color:var(--ok)} .status.off{background:#eceff3;color:#6b7587}
.tab{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.tab a.aktif{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
.pos{color:var(--pos)} .neg{color:var(--neg)}
.bar{height:8px;background:#e9eef6;border-radius:99px;overflow:hidden} .bar span{display:block;height:100%;background:var(--brand-2)}
.log-masuk{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#16325c,#1f4a85)}
.log-masuk .kotak{background:#fff;border-radius:14px;padding:28px;width:360px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sulit{font-size:11px;color:var(--err);font-weight:700;letter-spacing:.04em}
.paging{display:flex;gap:6px;margin-top:12px} .paging a,.paging span{padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
@media (max-width:900px){.rangka{grid-template-columns:1fr}.sisi{position:static;height:auto}.g4,.g3,.g2{grid-template-columns:1fr}.utama{padding:16px}}
/* Model keperluan */
.jadual-luas.model{max-height:none}
.jadual-luas.model th.sudut{vertical-align:bottom;min-width:170px}
.kepala-model{min-width:112px;max-width:170px;vertical-align:top;text-align:center;border-left:1px solid var(--line);background:#f5f8fc!important}
.kepala-model .saiz{font-size:22px;font-weight:700;color:var(--brand);line-height:1.1}
.kepala-model .saiz span{font-size:12px;font-weight:600;color:var(--muted)}
.kepala-model .senarai-mrsm{margin-top:8px;font-weight:400;line-height:1.9}
.kepala-model .senarai-mrsm .tag{background:#fff;border:1px solid var(--line);font-size:11px}
.jadual-luas.model td.c{text-align:center;border-left:1px solid var(--line2)}
.jadual-luas.model td.nama-subjek{white-space:nowrap}
tr.seksyen td{background:#eef2f8!important;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#3b4a62;position:static!important}
tr.jumlah td{font-weight:700;background:#fafbfd}
tr.jumlah td.c{color:var(--brand)}
input.sel{width:62px}
.jadual-luas.model .kepala-model{padding:10px 6px}
.kepala-model .senarai-mrsm .tag{white-space:normal;padding:1px 6px;margin:2px 1px}
/* Kekosongan */
.sel-k{display:inline-block;min-width:30px;padding:2px 6px;border-radius:6px;font-weight:700;font-size:12px;text-align:center}
.sel-k.kosong{background:#fde2df;color:#b42318}
.sel-k.lebih{background:#e3ecfa;color:#1f4a85}
.sel-k.cukup{color:#b8c2d1;font-weight:400}
.jadual-luas.kekosongan{max-height:74vh}
.jadual-luas.kekosongan th,.jadual-luas.kekosongan td{padding:5px 6px}
.jadual-luas.kekosongan td.c,.jadual-luas.kekosongan th.c{text-align:center}
.jadual-luas.kekosongan tfoot td{position:sticky;bottom:0;background:#fafbfd}
.guru-cip{display:inline-block;margin:0 14px 2px 0;white-space:nowrap}
/* Pertukaran */
.pilihan-analisis{display:flex;gap:8px;align-items:center;font-weight:400;font-size:13px;padding:6px 8px;border:1px solid var(--line2);border-radius:7px;margin-bottom:4px;cursor:pointer}
.pilihan-analisis span{flex:1}
.pilihan-analisis:hover{background:#f6f9ff}
.pilihan-analisis.dipilih{border-color:var(--brand-2);background:#eef4ff}
details.panel summary{cursor:pointer}
code{background:#eef2f8;padding:1px 6px;border-radius:4px;font-size:12px}
mark{background:#fff1b8;color:inherit;padding:0 2px;border-radius:3px}
.nota-bantuan{background:#fffdf5;border-color:#f2e3b3}
.petunjuk{border-top:1px solid #f2e9cc;padding:8px 0}
.petunjuk ul{margin:4px 0 0;padding-left:18px;font-size:12px;color:#4a5568}
.petunjuk li{margin-bottom:3px}
.petunjuk-kira{color:#c48a00;font-size:11px;letter-spacing:1px}

/* Konflik pilihan */
tr.baris-konflik td{border-bottom:1px solid var(--line2);padding-top:0}
details.konflik summary{cursor:pointer;font-size:12px;list-style:none}
details.konflik summary::-webkit-details-marker{display:none}
details.konflik summary::before{content:"▸ ";color:var(--muted)}
details.konflik[open] summary::before{content:"▾ "}
.konflik-tag{display:inline-block;background:#fff1e0;color:#9a4b00;border:1px solid #f5d0a6;border-radius:999px;padding:0 7px;font-size:11px;font-weight:700}
details.konflik table{margin-top:6px;background:#fffaf3;border:1px solid #f5e1c8;border-radius:6px}
details.konflik td{padding:4px 6px}
details.konflik tr.ini td{background:#eef4ff}
details.konflik tr.had td{border-bottom:2px solid #e5484d}
.konflik-kecil{display:inline-block;font-size:10px;color:#9a4b00;background:#fff1e0;border-radius:999px;padding:0 5px;margin-left:2px}

/* ===== Papan utama ===== */
:root{--c-kosong:#e34948;--c-lebih:#2a78d6;--c-bar:#2a78d6;--trek:#eef1f6;--grid-line:#e1e0d9}
.kpi-baris{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-2)}
.kpi-lab{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kpi-nilai{font-size:30px;font-weight:700;line-height:1.15;margin-top:4px}
.kpi-unit{font-size:16px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi-nota{font-size:12px;color:var(--muted);margin-top:4px}
.meter{height:6px;background:var(--trek);border-radius:99px;overflow:hidden;margin-top:8px}
.meter span{display:block;height:100%;background:var(--c-bar);border-radius:99px}
.jalur-kitaran{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:14px 18px;border-left:3px solid var(--accent)}
.jalur-kitaran>div:first-child{flex:1;min-width:200px}
.angka-kecil{display:flex;flex-direction:column;line-height:1.2}
.angka-kecil strong{font-size:22px}
.angka-kecil span{font-size:11px;color:var(--muted)}
.carta h2{margin:0}
.carta-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.petunjuk-carta{display:flex;gap:12px;font-size:12px;color:var(--muted)}
.petunjuk-carta i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
/* divergen */
.divergen{margin-top:8px}
.dv-kepala,.dv-baris{display:grid;grid-template-columns:minmax(120px,1.1fr) 1fr 1fr 64px;align-items:center;gap:0}
.dv-kepala{font-size:11px;color:var(--muted);padding:0 0 4px}
.dv-kepala span:nth-child(3){padding-left:6px}
.dv-baris{color:var(--ink);padding:3px 0;border-radius:6px;text-decoration:none!important}
.dv-baris:hover{background:#f6f9ff}
.dv-lab{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.dv-kiri,.dv-kanan{display:flex;align-items:center;height:18px;gap:5px}
.dv-kiri{justify-content:flex-end;border-right:1px solid #c3c2b7;padding-right:0}
.dv-kanan{padding-left:0}
.dv-kiri i{display:block;height:12px;background:var(--c-kosong);border-radius:4px 0 0 4px;min-width:3px}
.dv-kanan i{display:block;height:12px;background:var(--c-lebih);border-radius:0 4px 4px 0;min-width:3px}
.dv-kiri b,.dv-kanan b{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dv-baris .n{text-align:right;font-variant-numeric:tabular-nums}
/* bar mendatar */
.hbar{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.hb-baris{display:grid;grid-template-columns:minmax(110px,1.2fr) 1.6fr 36px;align-items:center;gap:8px;padding:4px 4px;border-radius:6px;color:var(--ink);text-decoration:none!important}
a.hb-baris:hover{background:#f6f9ff}
.hb-lab{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-trek{height:12px;background:var(--trek);border-radius:4px;overflow:hidden}
.hb-trek i{display:block;height:100%;background:var(--c-bar);border-radius:0 4px 4px 0;min-width:2px}
.hb-n{text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
/* kolum */
.kolum{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;height:190px;margin-top:12px;border-bottom:1px solid #c3c2b7;padding-bottom:0;position:relative;
}
.kl{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.kl:hover .kl-trek i{filter:brightness(.9)}
.kl-n{font-size:12px;font-weight:600;margin-bottom:3px;min-height:16px}
.kl-trek{width:62%;max-width:34px;height:calc(100% - 20px);display:flex;align-items:flex-end}
.kl-trek i{display:block;width:100%;background:var(--c-bar);border-radius:4px 4px 0 0;min-height:0}
.kl-lab{position:absolute;bottom:-34px;font-size:11px;text-align:center;line-height:1.25;color:var(--muted)}
.kolum+*{margin-top:40px}
.carta:has(.kolum){padding-bottom:46px}
.tip{position:fixed;z-index:100;pointer-events:none;background:#16325c;color:#fff;font-size:12px;line-height:1.45;padding:7px 10px;border-radius:7px;white-space:pre-line;max-width:300px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
@media (max-width:900px){.kpi-baris{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hbar.lebar .hb-baris{grid-template-columns:minmax(0,2.2fr) 1fr 30px}
@media (max-width:900px){.dv-kepala,.dv-baris{grid-template-columns:minmax(80px,1fr) 1fr 1fr 52px}.hb-baris{grid-template-columns:minmax(80px,1fr) 1fr 30px}.jalur-kitaran{gap:16px}.kolum{gap:2px}.kl-lab{font-size:10px}.kpi-nilai{font-size:24px}}
.ikon-info{display:inline-block;margin-left:3px;font-size:13px;line-height:1;color:var(--brand-2);cursor:help;text-transform:none;letter-spacing:0;font-weight:400;border-radius:50%}
.ikon-info:hover,.ikon-info:focus{color:var(--brand);outline:none}

/* ===== Mesyuarat ===== */
.rangka.skrin{grid-template-columns:1fr}
.rangka.skrin .sisi{display:none}
.rangka.skrin .utama{max-width:none;font-size:15px;padding:18px 26px}
.rangka.skrin .atas h1{font-size:26px}
.jalur-mesy{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:14px 18px}
.jalur-mesy>div{display:flex;flex-direction:column;line-height:1.25}
.jalur-mesy .lab{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.jalur-mesy strong{font-size:24px}
.jalur-mesy .kesan{margin-left:auto}
.kp{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap}
.kp.lulus{background:#e3f4e3;color:#006300}
.kp.tidak{background:#fde2df;color:#b42318}
.kp.tarik{background:#eceff3;color:#52514e}
.kp.belum{background:#fff4d6;color:#8a5a00}
.jalur-mesy .kp{margin-top:3px;align-self:flex-start}
.jadual-mesy td{vertical-align:top}
.jadual-mesy select{padding:5px 8px;font-size:13px}
.jadual-mesy .pilih-ke{min-width:160px}
.kp-baris td:first-child{border-left:3px solid transparent}
.kp-baris.lulus td:first-child{border-left-color:#0ca30c}
.kp-baris.tidak td:first-child{border-left-color:#d03b3b}
.kp-baris.tarik td:first-child{border-left-color:#c3c2b7}
.kp-baris.belum td:first-child{border-left-color:#fab219}
.kp-baris.tidak td,.kp-baris.tarik td{color:#7a8294}
.catatan-mesy{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.catatan-mesy textarea{font-size:13px;padding:6px 8px;min-height:38px}
tr.kilat td{animation:kilat 2s ease-out}
@keyframes kilat{from{background:#fff1b8}to{background:transparent}}
.cetak-sahaja{display:none}
.grid-mrsm{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:14px}
.kad-mrsm{margin:0}
.kesan-subjek{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;margin-top:6px}
.lab-kecil{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.item-mesy{padding:6px 0;border-top:1px solid var(--line2)}
@media (max-width:900px){.grid-mrsm{grid-template-columns:1fr}.jalur-mesy .kesan{margin-left:0}}
@media print{
  @page{size:A4 landscape;margin:12mm}
  body{background:#fff;padding:0;font-size:11px}
  .sisi,.pengguna,.tiada-cetak,.pita-demo,.tip{display:none!important}
  .rangka{display:block}
  .utama{padding:0;max-width:none}
  .cetak-sahaja{display:inline}
  div.cetak-sahaja{display:block}
  .panel,.jalur-mesy{border:1px solid #ccc;box-shadow:none}
  .jalur-mesy{break-inside:avoid}
  .jadual-luas{overflow:visible;max-height:none;border:0}
  th{position:static}
  tr{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .grid-mrsm{grid-template-columns:1fr 1fr}
  .kad-mrsm{break-inside:avoid}
}

/* Konflik nama */
.konflik-nama{border-color:#f5d0a6;background:#fffaf3}
.konflik-nama h2{color:#9a4b00}
.kotak-nama{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.kotak-nama strong{font-size:15px}

/* ===== Langkah kitaran ===== */
.langkah{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 16px;counter-reset:l}
.langkah-item{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);text-decoration:none!important;min-width:0}
.langkah-item:hover{border-color:#b9c7dc;background:#f8fbff}
.langkah-no{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#eceff3;color:#647086}
.langkah-teks{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.langkah-teks strong{font-size:13px}
.langkah-teks>span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.langkah-item.siap .langkah-no{background:#e3f4e3;color:#006300}
.langkah-item.sedang{border-color:#c6d6ef}
.langkah-item.sedang .langkah-no{background:var(--brand-2);color:#fff}
.langkah-item.kini{box-shadow:inset 0 -3px 0 var(--accent)}
.langkah-bar{display:block;height:4px;background:var(--trek,#eef1f6);border-radius:99px;margin-top:4px;overflow:hidden}
.langkah-bar i{display:block;height:100%;background:var(--brand-2)}
@media (max-width:1100px){.langkah{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.langkah{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== Peti kerja ===== */
.senarai-kerja{display:flex;flex-direction:column;gap:6px}
.kerja{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line2);border-radius:9px;color:var(--ink);text-decoration:none!important}
.kerja:hover{background:#f8fbff;border-color:#c6d6ef}
.kerja-ikon{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:#eef2f8;font-size:15px}
.kerja.amaran .kerja-ikon{background:#fff1e0;color:#9a4b00}
.kerja.utama .kerja-ikon{background:#e3ecfa;color:var(--brand-2)}
.kerja-teks{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.kerja-teks span{font-size:12px;color:var(--muted)}
.kerja-n{font-size:22px;font-weight:700;min-width:36px;text-align:right}
.kerja.amaran .kerja-n{color:#9a4b00}
.kerja .butang{pointer-events:none}
.kecil-kerja .kerja{grid-template-columns:34px minmax(0,1fr) auto}
.aktiviti-baris{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line2);font-size:13px}
.aktiviti-baris:first-child{border-top:0}
/* ===== Carian global ===== */
.cari-global input{width:230px;padding:6px 10px;font-size:13px;border-radius:999px;background:#fff}
@media (max-width:900px){.cari-global input{width:150px}}
@media (max-width:600px){.kerja{grid-template-columns:34px minmax(0,1fr) auto}.kerja .butang{display:none}}

/* ===== Analisis pantas ===== */
.pantas-atas{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.pantas-kemajuan{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.pantas{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:16px;align-items:start}
.pantas-kanan{position:sticky;top:12px}
.penerangan-besar{font-size:16px;line-height:1.65;white-space:pre-line;margin-top:8px}
.fakta-pantas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;border-top:1px solid var(--line2);padding-top:12px}
.fakta-pantas div{display:flex;flex-direction:column}
.fakta-pantas span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sejarah-ringkas{margin-top:10px;padding:8px 10px;border-radius:7px;background:#eef4ff;font-size:13px}
.pantas-pilihan{padding:6px 10px;font-size:13px;margin-bottom:3px}
.pantas-pilihan input{display:none}
kbd{display:inline-block;min-width:20px;padding:1px 5px;border:1px solid #cfd7e3;border-bottom-width:2px;border-radius:5px;background:#fff;font:600 11px/1.4 ui-monospace,Menlo,monospace;text-align:center;color:#3b4a62}
.utama-btn kbd{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff;margin-left:6px}
.pemberat-pantas{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:12px 0;padding:10px 12px;background:#fafbfd;border-radius:8px;font-size:13px}
.pemberat-pantas strong{font-size:16px}
.jumlah-pantas{margin-left:auto}.jumlah-pantas strong{font-size:22px;color:var(--brand)}
@media (max-width:900px){.pantas{grid-template-columns:1fr}.pantas-kanan{position:static}}

/* ===== Ringkasan permohonan & semakan ===== */
.ringkasan-mohon{display:flex;flex-wrap:wrap;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.rm-sel{flex:1 1 140px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-right:1px solid var(--line2);color:var(--ink);text-decoration:none!important;min-width:0}
.rm-sel:last-child{border-right:0}
a.rm-sel:hover{background:#f8fbff}
.rm-sel span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.rm-sel strong{font-size:15px;line-height:1.3}
.rm-sel .kecil-kuat{font-size:13px}
.rm-sel em{font-style:normal;font-size:12px;color:var(--muted)}
.rm-pemberat strong{font-size:28px;color:var(--brand)}
.semakan-tindakan .baris-isu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.semakan-tindakan .baris-isu span{flex:1;min-width:200px}
.semakan-tindakan form{display:inline}
details.panel>summary{cursor:pointer;list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary h2::before{content:"▸ ";color:var(--muted);font-weight:400}
details.panel[open]>summary h2::before{content:"▾ "}
/* ===== Kualiti data ===== */
.ringkasan-isu{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-bottom:16px}
.kad-isu{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;display:flex;flex-direction:column;min-width:160px}
.kad-isu span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.kad-isu strong{font-size:26px}
.kad-isu em{font-style:normal;font-size:11px;color:var(--muted)}
.kad-isu.ada strong{color:#9a4b00}
.kad-isu.bersih strong{color:var(--ok)}
.isu-pautan{flex:1;display:flex;flex-wrap:wrap;gap:4px;align-content:center}
.isu-pautan .tag{background:#fff;border:1px solid var(--line)}
.tag button{border:0;background:none;padding:0 0 0 4px;color:#8a95a8;cursor:pointer}

/* ===== Tukar ganti ===== */
.tab-ruang{margin-bottom:14px}
.lencana-tab{display:inline-block;margin-left:4px;font-size:11px;font-weight:700;background:#fff1e0;color:#9a4b00;border-radius:999px;padding:0 6px}
.tab-ruang a.aktif .lencana-tab{background:rgba(255,255,255,.25);color:#fff}
.kad-tukar{border-left:3px solid #c6d6ef}
.kad-tukar.baru{border-left-color:var(--brand-2)}
.kad-tukar.dicadang{border-left-color:#0ca30c;opacity:.85}
.kad-tukar.bertindih{border-left-color:#fab219}
.rantaian{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-top:10px}
.ahli-tukar{flex:1 1 240px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fafbfd}
.ahli-tukar .laluan{margin-top:6px;font-size:13px}
.anak-panah{align-self:center;font-size:20px;color:var(--brand-2)}

/* ===== Papan utama · Profil perkhidmatan guru ===== */
:root{--c-l:#16325c;--c-p:#3b8fe0}
.pp-kepala{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-left:3px solid var(--brand-2)}
.pp-kepala h2{margin:0}
.pp-penapis{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.pp-penapis label{display:flex;flex-direction:column;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;gap:2px}
.pp-penapis select{min-width:110px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);background:#fff}
.pp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,.8fr);margin-bottom:16px}
.pp-grid .panel,.pp-grid+.grid .panel{margin-bottom:0}
.carta button.hb-baris{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
.carta button.hb-baris:hover{background:#f6f8fb}
.hb-baris.dipilih{background:#eaf2fc}
.hb-baris.malap,.pp-j.malap{opacity:.4}
#pp-gred .hb-baris{grid-template-columns:minmax(70px,.8fr) 2fr 40px}
#pp-umur .hb-baris{grid-template-columns:62px 1fr 40px}
.hb-trek.susun{height:18px;display:flex}
.hb-trek.susun i{border-radius:0;color:#fff;font-size:10.5px;font-style:normal;line-height:18px;text-align:center;overflow:hidden;white-space:nowrap;min-width:0}
.hb-trek.susun i.l{background:var(--c-l)}
.hb-trek.susun i.p{background:var(--c-p);border-radius:0 4px 4px 0}
.pp-jantina{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pp-j{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer}
.pp-j.dipilih{border-color:var(--brand-2);background:#eaf2fc}
.pp-ikon{font-size:34px;line-height:1}
.pp-j.l .pp-ikon{color:var(--c-l)} .pp-j.p .pp-ikon{color:var(--c-p)}
.pp-n{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.pp-pc{font-size:13px;font-weight:600;color:var(--muted)}
.donut-blok{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.donut{width:210px;max-width:100%;flex-shrink:0;transform:none}
.donut circle[data-tip]:hover{stroke-width:7}
.donut text{text-anchor:middle;fill:var(--ink)}
.donut-kecil{font-size:1.9px;font-weight:600;fill:var(--muted)!important}
.donut-besar{font-size:5px;font-weight:700}
.donut-legend{list-style:none;margin:0;padding:0;flex:1;min-width:190px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.donut-legend li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center}
.donut-legend i{width:12px;height:12px;border-radius:3px}
.donut-legend b{font-variant-numeric:tabular-nums}
.sp-atas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sp-jumlah{font-size:22px;font-weight:700;padding:4px 14px;border:2px solid var(--brand-2);border-radius:8px;color:var(--brand-2);font-variant-numeric:tabular-nums}
.sp-carta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;height:200px;margin-top:12px;border-bottom:1px solid #c3c2b7}
.sp-kum{display:flex;flex-direction:column;height:100%;position:relative}
.sp-bar{flex:1;display:flex;justify-content:center;align-items:flex-end;gap:4px}
.sp-b{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:42%;max-width:34px}
.sp-b span{font-size:12px;font-weight:600;margin-bottom:3px}
.sp-b i{display:block;width:100%;border-radius:4px 4px 0 0;min-height:0}
.sp-lab{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carta:has(.sp-carta){padding-bottom:36px}
@media (max-width:1100px){.pp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pp-grid>.panel:nth-child(2){grid-column:span 2;order:-1}}
@media (max-width:900px){.pp-grid{grid-template-columns:1fr}.pp-grid>.panel:nth-child(2){grid-column:auto;order:0}.pp-penapis{width:100%}.pp-penapis label{flex:1;min-width:30%}.pp-penapis select{min-width:0;width:100%}
  .donut{width:170px;margin:0 auto}.sp-carta{gap:4px}.sp-lab{font-size:10.5px}.sp-b span{font-size:11px}}
/* SISPAA */
.tanda-kes{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;background:#fdecea;color:#b42318;font-size:11px;font-weight:700;white-space:nowrap}
.tanda-kes:hover{text-decoration:none;background:#f9d5d1}
.tanda-kes-tag{background:#fdecea;color:#b42318}
.kes-tidak-sah,.kes-tidak-sah a{color:#98a2b3} .kes-tidak-sah td{background:#f7f8fa}
.tag-tidak-sah{background:#e4e7ec;color:#475467;font-weight:600}
/* Aduan SISPAA ikut bulan (12 kumpulan × 2 tahun) + 5 MRSM teratas */
.sp-bulan{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;height:180px}
.sp-bulan .sp-bar{gap:2px}
.sp-bulan .sp-b{width:46%;max-width:24px}
.sp-bulan .sp-b span{font-size:11px}
.sp-top{margin-top:34px;padding-top:12px;border-top:1px solid var(--line2)}
.sp-top h3{margin:0;font-size:14px}
.sp-top .hb-baris{grid-template-columns:minmax(110px,1fr) 2.4fr 36px}
@media (max-width:600px){.sp-bulan{gap:2px;height:150px}.sp-bulan .sp-b span{display:none}.sp-bulan .sp-lab{font-size:10px}
  .sp-top .hb-baris{grid-template-columns:minmax(80px,1fr) 1.4fr 30px}}
/* Luar perjawatan, BILANGAN */
.kad-kuota .trek-kuota{height:8px;background:var(--line2);border-radius:4px;overflow:hidden;margin-top:6px}
.kad-kuota .trek-kuota i{display:block;height:100%;background:var(--brand-2)}
.kad-kuota.lebih .nilai{color:var(--neg)} .kad-kuota.lebih .trek-kuota i{background:var(--neg)}
.luar-tapis select,.luar-tapis input[type=search]{width:auto;min-width:150px;flex:1}
.luar-tapis .butang{flex:0 0 auto}
.jadual-bilangan tr.beza-merah td{background:#fdecea}
.jadual-bilangan tr.baris-jumlah td{font-weight:700;border-top:2px solid var(--line)}
@media (max-width:600px){.luar-tapis select,.luar-tapis input[type=search]{min-width:0;width:100%}}
.semak-tiga{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:8px;border:1px solid var(--line)}
.semak-tiga.sama{background:var(--ok-bg)} .semak-tiga.beza{background:#fdecea;border-color:#f3c1bb}
.semak-tiga div{display:flex;flex-direction:column} .semak-tiga span{font-size:11px;color:var(--muted)} .semak-tiga strong{font-size:20px;font-variant-numeric:tabular-nums}
.semak-tiga em{font-style:normal;font-size:20px;font-weight:700;color:var(--muted)} .semak-tiga.beza em{color:var(--neg)}