:root{
  --dakwat:#16223A; --dakwat-lembut:#4A5670;
  --kertas:#F4F6F8; --kad:#FFFFFF; --garis:#DCE1E9;
  --hijau:#1F6F5C; --hijau-lembut:#E8F1EE; --hijau-garis:#B9D6CC;
  --amaran:#A8560F; --amaran-lembut:#FBF0E2;
  --bahaya:#A32D2D; --bahaya-lembut:#FBECEC;
  --radius:6px;
  --sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kertas);color:var(--dakwat);
  font:15px/1.55 var(--sans);font-variant-numeric:tabular-nums}
a{color:var(--hijau)}
h1,h2,h3{margin:0 0 .4rem;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.35rem} h2{font-size:1.1rem} h3{font-size:.95rem}
.kecil{font-size:.82rem;color:var(--dakwat-lembut)}

/* ---- rangka ---- */
.bar{background:var(--dakwat);color:#fff;padding:.7rem 1rem}
.bar .dalam{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;
  gap:.5rem 1rem;align-items:center;justify-content:space-between}
.jenama{font-weight:600;letter-spacing:.02em}
.jenama span{display:block;font-weight:400;font-size:.75rem;opacity:.72}
.bar nav{display:flex;flex-wrap:wrap;gap:.15rem}
.bar nav a{color:#fff;text-decoration:none;font-size:.85rem;
  padding:.35rem .6rem;border-radius:var(--radius);opacity:.8}
.bar nav a:hover,.bar nav a.aktif{background:rgba(255,255,255,.14);opacity:1}
main{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 3rem}
.kad{background:var(--kad);border:1px solid var(--garis);
  border-radius:var(--radius);padding:1.1rem;margin-bottom:1rem}

/* ---- jalur pusingan (tanda khas portal) ---- */
.jalur{display:flex;gap:0;margin:0 0 1rem;border:1px solid var(--garis);
  border-radius:var(--radius);overflow:hidden;background:var(--kad)}
.jalur .p{flex:1;padding:.6rem .75rem;border-right:1px solid var(--garis);
  text-decoration:none;color:var(--dakwat-lembut);display:block}
.jalur .p:last-child{border-right:0}
.jalur .p b{display:block;font-size:.95rem;color:var(--dakwat)}
.jalur .p.buka{background:var(--hijau-lembut);box-shadow:inset 3px 0 0 var(--hijau)}
.jalur .p.buka b{color:var(--hijau)}
.jalur .p.pilih{background:var(--dakwat)}
.jalur .p.pilih b,.jalur .p.pilih{color:#fff}

/* ---- jadual ---- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{padding:.45rem .5rem;border-bottom:1px solid var(--garis);text-align:right}
th{background:var(--kertas);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--dakwat-lembut)}
th:first-child,td:first-child,th.kiri,td.kiri{text-align:left}
tbody tr:hover{background:#FAFBFC}
tfoot td{font-weight:600;background:var(--kertas);border-top:2px solid var(--dakwat)}
.gulung{overflow-x:auto}

/* ---- borang ---- */
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.25rem}
input,select{width:100%;padding:.5rem .6rem;border:1px solid var(--garis);
  border-radius:var(--radius);font:inherit;background:#fff;color:inherit}
input[type=number]{text-align:right}
input:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--hijau);outline-offset:1px}
.grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
fieldset{border:1px solid var(--garis);border-radius:var(--radius);
  padding:.9rem 1rem 1.1rem;margin:0 0 1rem}
legend{font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--hijau);padding:0 .35rem}
button,.butang{display:inline-block;background:var(--hijau);color:#fff;border:0;
  padding:.55rem 1.1rem;border-radius:var(--radius);font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none}
button:hover,.butang:hover{filter:brightness(1.08)}
.butang.sunyi{background:transparent;color:var(--dakwat);border:1px solid var(--garis)}
.jumlah-hidup{background:var(--hijau-lembut);border:1px solid var(--hijau-garis);
  border-radius:var(--radius);padding:.7rem .9rem;display:flex;flex-wrap:wrap;
  gap:1.4rem;align-items:baseline}
.jumlah-hidup b{font-size:1.4rem;color:var(--hijau)}

/* ---- notis & tanda ---- */
.notis{padding:.7rem .9rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.88rem}
.notis.ok{background:var(--hijau-lembut);border:1px solid var(--hijau-garis);color:#134A3E}
.notis.silap{background:var(--bahaya-lembut);border:1px solid #E8BDBD;color:var(--bahaya)}
.notis.ingat{background:var(--amaran-lembut);border:1px solid #EBD3AE;color:var(--amaran)}
.tanda{display:inline-block;font-size:.7rem;font-weight:700;padding:.15rem .45rem;
  border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.tanda.hantar{background:var(--hijau-lembut);color:#134A3E}
.tanda.draf{background:var(--amaran-lembut);color:var(--amaran)}
.tanda.belum{background:#EFF1F4;color:var(--dakwat-lembut)}

/* ---- log masuk ---- */
.masuk{max-width:380px;margin:8vh auto;padding:0 1rem}
.masuk .kad{padding:1.6rem}
.masuk h1{font-size:1.15rem}

@media (max-width:640px){
  main{padding:.9rem .6rem 2.5rem}
  .jalur{flex-direction:column}
  .jalur .p{border-right:0;border-bottom:1px solid var(--garis)}
  th,td{padding:.4rem .35rem;font-size:.8rem}
}
@media print{
  .bar,.jalur,button,.butang{display:none!important}
  body{background:#fff} .kad{border:0;padding:0}
}