/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: sistem rupa ALESA Dewan (token, dewan, kad, log masuk)
   · why: identiti sendiri ikut docs/DESIGN-IDENTITI.md — grafit + aqua semantik, bukan HUD teal/oren KEJARVIS
   · verify: devibe-scan.py pratonton --severity high → 0; paparan 1440px & 390px */
:root {
  --latar: #0A0C10;
  --permukaan: #12161D;
  --permukaan-2: #181D26;
  --garis: #232A36;
  --garis-2: #2E3746;
  --teks: #E9EDF2;
  --teks-2: #A9B3C1;
  --teks-3: #6E7988;
  --lulus: #2BD4B8;
  --lulus-redup: rgba(43, 212, 184, 0.12);
  --tegur: #FF6B57;
  --tegur-redup: rgba(255, 107, 87, 0.12);
  --hakim: #F4F6F9;
  --menilai: #C3CCD8;
  --fon: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --jejari: 8px;
}

* { box-sizing: border-box; }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: atribut hidden sentiasa menang · why: .btn
   display:inline-flex mengatasi [hidden] — "Main semula" muncul dlm mod langsung · verify: / → butang tiada */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--latar);
  color: var(--teks);
  font: 15px/1.5 var(--fon);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.angka { font-variant-numeric: tabular-nums; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teks-3);
}
:focus-visible { outline: 2px solid var(--hakim); outline-offset: 2px; border-radius: 4px; }

/* ── Kerangka ─────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 380px;
  grid-template-rows: 60px auto auto;
  grid-template-areas: "rel bar bar" "rel utama sisi" "rel lejar lejar";
  min-height: 100vh;
}
.rel {
  grid-area: rel; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--garis); display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 6px; background: var(--latar);
}
.rel .tanda { width: 34px; height: 34px; margin-bottom: 14px; }
.rel a {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--jejari);
  color: var(--teks-3); text-decoration: none;
}
.rel a[aria-current="page"] { background: var(--permukaan-2); color: var(--teks); box-shadow: inset 2px 0 0 var(--hakim); }
.rel a[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.rel svg { width: 20px; height: 20px; }
.rel-label { display: none; }

.bar {
  grid-area: bar; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  border-bottom: 1px solid var(--garis); min-width: 0;
}
.jejak { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--teks-2); font-size: 14px; }
.jejak b { color: var(--teks); font-weight: 600; }
.jejak span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pratonton-tag {
  font: 600 10px/1 var(--mono); letter-spacing: 0.08em; padding: 5px 7px; border: 1px dashed var(--garis-2);
  border-radius: 4px; color: var(--teks-3); white-space: nowrap;
}
.bar .kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--garis-2); font-size: 13px; white-space: nowrap;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--menilai); }
.status[data-k="lulus"] i { background: var(--lulus); }
.status[data-k="tegur"] i { background: var(--tegur); }
.status[data-k="hakim"] i { background: var(--hakim); }
.pemasa { font: 500 14px var(--mono); color: var(--teks-2); min-width: 52px; text-align: right; }
.btn {
  min-height: 40px; padding: 0 14px; border-radius: var(--jejari); border: 1px solid var(--garis-2);
  background: var(--permukaan); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
}
.btn:hover { border-color: var(--teks-3); background: var(--permukaan-2); }
.btn-ikon { width: 40px; padding: 0; justify-content: center; }
.btn-utama { background: var(--hakim); color: #0A0C10; border-color: var(--hakim); font-weight: 600; }
.btn-utama:hover { background: #FFFFFF; }
.btn svg { width: 18px; height: 18px; }

.utama { grid-area: utama; padding: 20px 24px 24px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sisi { grid-area: sisi; border-left: 1px solid var(--garis); display: flex; flex-direction: column; min-height: 0; }
.lejar { grid-area: lejar; border-top: 1px solid var(--garis); padding: 16px 24px; }

/* ── Sepanduk minta kebenaran ─────────────────────────── */
.sepanduk {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--jejari);
  border: 1px solid var(--tegur); background: var(--tegur-redup);
}
.sepanduk[hidden] { display: none; }
.sepanduk .teks { flex: 1; min-width: 0; }
.sepanduk .teks b { display: block; font-size: 14px; }
.sepanduk code { font: 13px var(--mono); color: var(--teks); }
.sepanduk .tindakan { display: flex; gap: 8px; flex-shrink: 0; }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: lencana tahap KRITIKAL + baris sebab dlm sepanduk
   · why: hanya tindakan kritikal sampai kepada Founder, dan dia mesti nampak kenapa · verify: sepanduk papar "KRITIKAL" + sebab */
.sepanduk .tahap {
  display: inline-block; font: 700 10px/1 var(--fon); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 6px;
  border-radius: 4px; background: var(--tegur); color: #0A0C10; margin-right: 8px; vertical-align: 2px;
}
.sepanduk small { display: block; margin-top: 4px; color: var(--teks-2); font-size: 13px; }

/* ── Dewan ───────────────────────────────────────────── */
.kad-dewan { border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); overflow: hidden; }
.kad-dewan header {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--garis); flex-wrap: wrap;
}
.kad-dewan h1 { font-size: 16px; font-weight: 600; margin: 0; }
.kad-dewan header p { margin: 0; color: var(--teks-2); font-size: 13px; }
.petunjuk { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--teks-2); flex-wrap: wrap; }
.petunjuk span { display: inline-flex; align-items: center; gap: 6px; }
.petunjuk i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: warna titik petunjuk + segmen palang lejar ikut kelas
   · why: CSP style-src 'self' melarang atribut style sebaris; lebar segmen diset oleh JS (CSSOM) · verify: petunjuk 4 warna kelihatan */
.petunjuk .pt-l { background: var(--lulus); }
.petunjuk .pt-t { background: var(--tegur); }
.petunjuk .pt-m { background: var(--menilai); }
.petunjuk .pt-h { background: var(--hakim); }
.dewan-svg { display: block; width: 100%; height: auto; background: var(--latar); }

.dewan-svg .struktur { fill: none; stroke: var(--garis); stroke-width: 1; }
.dewan-svg .struktur.putus { stroke-dasharray: 2 6; }
.dewan-svg .lantai { stroke: var(--garis-2); stroke-width: 1; }
.dewan-svg .benang { fill: none; stroke: var(--garis); stroke-width: 1; }
.dewan-svg .komet { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.dewan-svg .komet.lulus { stroke: var(--lulus); }
.dewan-svg .komet.tegur { stroke: var(--tegur); }
.dewan-svg .komet.hakim { stroke: var(--hakim); }

.dewan-svg .segmen { fill: none; stroke: var(--garis-2); stroke-width: 14; transition: stroke 0.35s ease; }
.dewan-svg .segmen.lulus { stroke: var(--lulus); }
.dewan-svg .segmen.tegur { stroke: var(--tegur); }
.dewan-svg .segmen.menilai { stroke: #3A4454; }
.dewan-svg .cincin-dalam { fill: none; stroke: var(--garis); }

.dewan-svg .kerusi circle.badan { fill: var(--permukaan); stroke: var(--garis-2); stroke-width: 1.5; transition: fill 0.3s, stroke 0.3s; }
.dewan-svg .kerusi .glif { font: 600 13px var(--mono); fill: var(--teks-3); text-anchor: middle; dominant-baseline: central; }
.dewan-svg .kerusi .nama { font: 600 13px var(--fon); fill: var(--teks); text-anchor: middle; }
.dewan-svg .kerusi .akaun { font: 400 11px var(--mono); fill: var(--teks-3); text-anchor: middle; }
.dewan-svg .kerusi .denyut { fill: none; stroke: var(--menilai); stroke-width: 1.5; opacity: 0; }
.dewan-svg .kerusi .lencana { opacity: 0; transition: opacity 0.3s; }
.dewan-svg .kerusi .lencana text { font: 700 11px var(--fon); text-anchor: middle; dominant-baseline: central; fill: #0A0C10; }

.dewan-svg .kerusi.menilai circle.badan { stroke: var(--menilai); }
.dewan-svg .kerusi.menilai .glif { fill: var(--teks); }
.dewan-svg .kerusi.menilai .denyut { animation: denyut 1.4s ease-out infinite; }
.dewan-svg .kerusi.lulus circle.badan { stroke: var(--lulus); fill: #10221F; }
.dewan-svg .kerusi.lulus .glif { fill: var(--lulus); }
.dewan-svg .kerusi.tegur circle.badan { stroke: var(--tegur); fill: #2A1613; }
.dewan-svg .kerusi.tegur .glif { fill: var(--tegur); }
.dewan-svg .kerusi.lulus .lencana, .dewan-svg .kerusi.tegur .lencana { opacity: 1; }
.dewan-svg .kerusi.lulus .lencana circle { fill: var(--lulus); }
.dewan-svg .kerusi.tegur .lencana circle { fill: var(--tegur); }
@keyframes denyut {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}
.dewan-svg .denyut { transform-box: fill-box; transform-origin: center; }

.dewan-svg .bangku { fill: var(--permukaan-2); stroke: var(--garis); }
.dewan-svg .hakim rect.badan { fill: var(--permukaan); stroke: var(--garis-2); stroke-width: 1.5; transition: stroke 0.3s, fill 0.3s; }
.dewan-svg .hakim.menimbang rect.badan { stroke: var(--hakim); }
.dewan-svg .hakim.menimbang .denyut { animation: denyut 1.6s ease-out infinite; stroke: var(--hakim); }
.dewan-svg .hakim.putus rect.badan { stroke: var(--hakim); fill: #23272E; }
.dewan-svg .label-svg { font: 600 10px var(--fon); letter-spacing: 0.12em; fill: var(--teks-3); text-anchor: middle; }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: label hakim kiri/kanan + butang bunyi "perlu klik"
   · why: label bertindih bangku; pelayar boleh sekat autoplay suara · verify: tangkapan desktop; butang berbingkai vermilion bila disekat */
.dewan-svg .label-svg.kiri { text-anchor: end; }
.dewan-svg .label-svg.kanan { text-anchor: start; }
.btn.perlu-klik { border-color: var(--tegur); color: var(--tegur); }

.dewan-svg .tengah .kecil { font: 600 10px var(--fon); letter-spacing: 0.14em; fill: var(--teks-3); text-anchor: middle; }
.dewan-svg .tengah .besar { font: 600 30px var(--fon); fill: var(--teks); text-anchor: middle; font-variant-numeric: tabular-nums; }
.dewan-svg .tengah .besar.lulus { fill: var(--lulus); }
.dewan-svg .tengah .besar.tegur { fill: var(--tegur); }
.dewan-svg .tengah .bawah { font: 400 12px var(--mono); fill: var(--teks-2); text-anchor: middle; }
.dewan-svg .meterai { opacity: 0; transform-box: fill-box; transform-origin: center; }
.dewan-svg .meterai.tunjuk { animation: cop 0.45s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.dewan-svg .meterai rect { fill: none; stroke: var(--hakim); stroke-width: 1.5; }
.dewan-svg .meterai text { font: 600 11px var(--mono); fill: var(--hakim); text-anchor: middle; letter-spacing: 0.1em; }
@keyframes cop {
  0% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

.dewan-svg .rostrum rect { fill: var(--permukaan-2); stroke: var(--garis-2); stroke-width: 1.5; transition: stroke 0.4s; }
.dewan-svg .rostrum.kerja rect { stroke: var(--menilai); }
.dewan-svg .rostrum.terima rect { stroke: var(--hakim); }
.dewan-svg .rostrum .t1 { font: 600 10px var(--fon); letter-spacing: 0.12em; fill: var(--teks-3); text-anchor: middle; }
.dewan-svg .rostrum .t2 { font: 600 14px var(--fon); fill: var(--teks); text-anchor: middle; }
.dewan-svg .rostrum .t3 { font: 400 11px var(--mono); fill: var(--teks-2); text-anchor: middle; }

.dewan-svg .galeri rect { fill: var(--permukaan); stroke: var(--garis-2); transition: stroke 0.3s; }
.dewan-svg .galeri.tik rect { stroke: var(--lulus); }
.dewan-svg .galeri .t1 { font: 600 10px var(--fon); letter-spacing: 0.12em; fill: var(--teks-3); }
.dewan-svg .galeri .t2 { font: 400 11px var(--mono); fill: var(--teks-2); }
.dewan-svg .galeri.tik .t2 { fill: var(--lulus); }

/* ── Kad undian ──────────────────────────────────────── */
.undian { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kad-undi {
  border: 1px solid var(--garis); border-radius: var(--jejari); background: var(--permukaan); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-height: 168px; transition: border-color 0.3s;
}
.kad-undi .atas { display: flex; align-items: flex-start; gap: 10px; }
.kad-undi .glif {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--garis-2); display: grid; place-items: center;
  font: 600 11px var(--mono); color: var(--teks-3); flex-shrink: 0;
}
.kad-undi .siapa { min-width: 0; flex: 1; }
.kad-undi .siapa b { display: block; font-size: 14px; font-weight: 600; }
.kad-undi .siapa span { font: 12px var(--mono); color: var(--teks-3); }
.undi {
  font: 600 11px var(--fon); letter-spacing: 0.08em; padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--garis-2); color: var(--teks-3);
}
.kad-undi .dapatan { margin: 0; font-size: 13.5px; color: var(--teks-2); flex: 1; }
.cip { display: flex; flex-wrap: wrap; gap: 6px; }
.cip span {
  font: 11.5px var(--mono); padding: 3px 7px; border-radius: 4px; background: var(--permukaan-2);
  border: 1px solid var(--garis); color: var(--teks-2); max-width: 100%; overflow-wrap: anywhere;
}
.kad-undi .rangka { height: 10px; border-radius: 4px; background: var(--permukaan-2); }
.kad-undi .rangka.p { width: 62%; }
.kad-undi[data-k="menilai"] { border-color: var(--garis-2); }
.kad-undi[data-k="menilai"] .glif { border-color: var(--menilai); color: var(--teks); }
.kad-undi[data-k="menilai"] .undi { color: var(--teks); border-color: var(--menilai); }
.kad-undi[data-k="lulus"] { border-color: rgba(43, 212, 184, 0.45); }
.kad-undi[data-k="lulus"] .glif { border-color: var(--lulus); color: var(--lulus); }
.kad-undi[data-k="lulus"] .undi { background: var(--lulus-redup); border-color: var(--lulus); color: var(--lulus); }
.kad-undi[data-k="tegur"] { border-color: rgba(255, 107, 87, 0.55); }
.kad-undi[data-k="tegur"] .glif { border-color: var(--tegur); color: var(--tegur); }
.kad-undi[data-k="tegur"] .undi { background: var(--tegur-redup); border-color: var(--tegur); color: var(--tegur); }

.kad-putusan {
  grid-column: 1 / -1; border: 1px solid var(--garis); border-radius: var(--jejari); background: var(--permukaan-2);
  padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
}
.kad-putusan[data-k="putus"] { border-color: var(--hakim); }
.kad-putusan .putusan { font: 600 18px var(--fon); }
.kad-putusan p { margin: 2px 0 0; color: var(--teks-2); font-size: 14px; }
.kad-putusan .meterai-teks { font: 12px var(--mono); color: var(--teks-3); text-align: right; }
.kad-putusan .meterai-teks b { display: block; color: var(--hakim); font-weight: 500; }
.ikon-hakim { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--garis-2); display: grid; place-items: center; }
.ikon-hakim svg { width: 22px; height: 22px; }

/* ── Panel pengekod ──────────────────────────────────── */
.sisi header { padding: 16px 18px; border-bottom: 1px solid var(--garis); display: flex; gap: 12px; align-items: center; }
.avatar {
  width: 40px; height: 40px; border-radius: 10px; background: var(--permukaan-2); border: 1px solid var(--garis-2);
  display: grid; place-items: center; font: 600 14px var(--mono);
}
.sisi header b { display: block; font-size: 14px; }
.sisi header span { font: 12px var(--mono); color: var(--teks-3); }
.aliran { list-style: none; margin: 0; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.aliran li {
  display: grid; grid-template-columns: 44px 18px minmax(0, 1fr); gap: 10px; padding: 8px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--garis); align-items: start;
}
.aliran li:last-child { border-bottom: 0; }
.aliran time { font: 12px var(--mono); color: var(--teks-3); padding-top: 1px; }
.aliran .titik { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--garis-2); }
.aliran li[data-j="ujian"] .titik, .aliran li[data-j="terima"] .titik { background: var(--lulus); }
.aliran li[data-j="tegur"] .titik { background: var(--tegur); }
.aliran li[data-j="hantar"] .titik, .aliran li[data-j="founder"] .titik { background: var(--hakim); }
.aliran li span { overflow-wrap: anywhere; color: var(--teks-2); }
.aliran li[data-j="founder"] span { color: var(--teks); }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: baris sandaran + butang Undur pada langkah auto-lulus
   · why: setiap auto-lulus wajib ada sandaran & boleh diundur (Founder 17:01) · verify: butang Undur kelihatan; telefon ≥44px */
.aliran .sandaran { display: block; margin-top: 4px; font: 11.5px var(--mono); color: var(--teks-3); }
.aliran .btn-undur { margin-top: 6px; min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.aliran .btn-undur:disabled { cursor: default; color: var(--lulus); border-color: var(--lulus); background: var(--lulus-redup); }
.aliran .baru { animation: masuk 0.3s ease-out; }
@keyframes masuk { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mesej { border-top: 1px solid var(--garis); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.mesej label { font-size: 13px; color: var(--teks-2); }
.mesej textarea {
  min-height: 72px; resize: vertical; padding: 10px 12px; border-radius: var(--jejari); border: 1px solid var(--garis-2);
  background: var(--latar); font-size: 14px;
}
.mesej .baris { display: flex; align-items: center; gap: 10px; }
.mesej small { color: var(--teks-3); font-size: 12px; flex: 1; }

/* ── Jalur lejar ─────────────────────────────────────── */
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: segmen ketiga palang (.b, belum) lutsinar atas latar garis
   · why: tiga segmen siap/sedang/belum diberi flex oleh JS binaLejar() · verify: palang 14:2:3 sepadan angka */
.lejar .baris { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lejar .tajuk b { font-size: 14px; }
.palang { flex: 1; min-width: 220px; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--garis); gap: 2px; }
.palang i { display: block; height: 100%; }
.palang .s { background: var(--lulus); }
.palang .d { background: var(--menilai); }
.palang .b { background: transparent; }
.lejar .kira { display: flex; gap: 16px; font-size: 13px; color: var(--teks-2); }
.lejar .kira b { color: var(--teks); font: 600 14px var(--mono); }
.lejar .pemantau { font: 12px var(--mono); color: var(--teks-3); }
.lejar .pemantau.tik { color: var(--lulus); }

/* ── Mod langsung ────────────────────────────────────── */
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: jalur sesi aktif, keadaan kerusi "ulasan", suis aktif,
   nota terminal, tag LANGSUNG · why: fasa 1 paparan langsung + banyak sesi (B-38, B-43) + suis auto-lulus (17:30)
   · verify: 2 sesi → 2 butang; sesi menunggu berbingkai vermilion; telefon → jalur boleh diskrol mendatar */
.jalur-sesi { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.jalur-kosong { margin: 0; padding: 14px 16px; border: 1px dashed var(--garis-2); border-radius: var(--jejari); color: var(--teks-2); font-size: 14px; flex: 1; }
.sesi-btn {
  display: grid; grid-template-columns: 10px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  text-align: left; min-height: 52px; min-width: 210px; padding: 8px 14px; border-radius: var(--jejari);
  border: 1px solid var(--garis-2); background: var(--permukaan); cursor: pointer; flex-shrink: 0;
}
.sesi-btn i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--menilai); }
.sesi-btn .sp { font-weight: 600; font-size: 14px; }
.sesi-btn .sm { font: 11.5px var(--mono); color: var(--teks-3); white-space: nowrap; }
.sesi-btn[aria-pressed="true"] { border-color: var(--hakim); background: var(--permukaan-2); }
.sesi-btn[data-k="menunggu"] { border-color: var(--tegur); }
.sesi-btn[data-k="menunggu"] i { background: var(--tegur); }
.sesi-btn[data-k="rehat"] i { background: var(--lulus); }
.sesi-btn[data-k="bersidang"] i { background: var(--hakim); }
.dewan-svg .kerusi.ulasan circle.badan { stroke: var(--hakim); fill: #1C2028; }
.dewan-svg .kerusi.ulasan .glif { fill: var(--hakim); }
.pratonton-tag.langsung { color: var(--lulus); border-style: solid; border-color: rgba(43, 212, 184, 0.45); }
.btn-pautan { text-decoration: none; color: var(--teks-2); min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn.aktif { border-color: var(--lulus); color: var(--lulus); background: var(--lulus-redup); }
.nota-terminal { font: 12.5px var(--mono); color: var(--teks-2); max-width: 220px; text-align: right; }
.mesej textarea:disabled, .mesej .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Grid ala CCTV ───────────────────────────────────── */
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: grid semua sesi 1·4·8·16 + petak dewan mini; mod grid
   sorok dewan penuh, kad undian & panel pengekod · why: Founder 17:49 paparan ala CCTV (B-50) · verify: 1440px pilih 16 →
   4×4 tanpa skrol mendatar; telefon → 1 lajur */
.grid-alat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.susun { display: inline-flex; border: 1px solid var(--garis-2); border-radius: var(--jejari); overflow: hidden; margin-left: auto; }
.susun button {
  min-width: 48px; min-height: 36px; border: 0; border-right: 1px solid var(--garis-2); background: var(--permukaan);
  cursor: pointer; font: 600 13px var(--mono); color: var(--teks-2);
}
.susun button:last-child { border-right: 0; }
.susun button[aria-pressed="true"] { background: var(--permukaan-2); color: var(--teks); box-shadow: inset 0 -2px 0 var(--hakim); }
.grid-sesi { display: grid; gap: 12px; }
.grid-sesi[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.grid-sesi[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-sesi[data-n="8"], .grid-sesi[data-n="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.petak {
  border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); padding: 12px; display: flex;
  flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; transition: border-color 0.2s;
}
.petak:hover { border-color: var(--teks-3); }
.petak header { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.petak header .titik { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--menilai); }
.petak .pp { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.petak .pm { font: 11.5px var(--mono); color: var(--teks-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.petak[data-k="menunggu"] { border-color: var(--tegur); box-shadow: inset 0 0 0 1px var(--tegur); }
.petak[data-k="menunggu"] .titik { background: var(--tegur); }
.petak[data-k="rehat"] .titik { background: var(--lulus); }
.petak[data-k="bersidang"] .titik { background: var(--hakim); }
.petak .amaran { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 6px 8px; border-radius: 6px; background: var(--tegur-redup); min-width: 0; }
.petak .amaran .tahap { font: 700 9.5px/1 var(--fon); letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 5px; border-radius: 3px; background: var(--tegur); color: #0A0C10; flex-shrink: 0; }
.petak .amaran .at { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dewan-svg.mini { width: 100%; height: auto; border-radius: 8px; }
.petak .ringkas { display: flex; gap: 12px; font: 12px var(--mono); color: var(--teks-2); }
.petak .ringkas .rl { color: var(--lulus); }
.petak .ringkas .rt.ada { color: var(--tegur); }
.petak .akhir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.petak .akhir li { display: flex; gap: 8px; font-size: 12.5px; color: var(--teks-2); min-width: 0; }
.petak .akhir time { font: 11.5px var(--mono); color: var(--teks-3); flex-shrink: 0; }
.petak .akhir span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-sesi[data-n="16"] .akhir li:nth-child(-n+2) { display: none; }
.grid-sesi[data-n="16"] .petak { padding: 10px; gap: 6px; }
.petak.kosong { cursor: default; border-style: dashed; color: var(--teks-3); display: grid; place-items: center; text-align: center; min-height: 180px; font-size: 13px; }
.petak.kosong:hover { border-color: var(--garis); }
body.mod-grid .app { grid-template-columns: 68px minmax(0, 1fr); grid-template-areas: "rel bar" "rel utama" "rel lejar"; }
body.mod-grid .kad-dewan, body.mod-grid #undian, body.mod-grid .sisi, body.mod-grid #minta { display: none; }
body:not(.mod-grid) .grid-sesi, body:not(.mod-grid) .susun, body:not(.mod-grid) #grid-label { display: none; }
/* kelas "halaman" ada pada .app (bukan body) — suis Tetapan tersorok sebelum ini */
.app.halaman .susun { display: inline-flex; margin-left: 0; }

/* ── Halaman menu (Sejarah · Kelulusan · Tetapan) ───── */
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: kerangka halaman tanpa panel sisi, jadual (desktop) →
   kad (telefon), lencana keadaan, baris tetapan · why: Founder 17:36 menu placeholder → halaman sebenar (B-45..B-47, P37)
   · verify: 1440px jadual penuh lebar; 390px setiap baris jadi kad dgn label */
.app.halaman { grid-template-columns: 68px minmax(0, 1fr); grid-template-areas: "rel bar" "rel utama"; grid-template-rows: 60px auto; }
.kad-halaman { border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); overflow: hidden; }
.kad-halaman > header { padding: 16px 18px; border-bottom: 1px solid var(--garis); }
.kad-halaman h1 { font-size: 18px; margin: 0 0 4px; font-weight: 600; }
.kad-halaman > header p { margin: 0; color: var(--teks-2); font-size: 13.5px; }
.kad-halaman .kosong { padding: 28px 18px; margin: 0; color: var(--teks-2); }
.nota-fasa { margin: 14px 18px 0; padding: 10px 12px; border: 1px dashed var(--garis-2); border-radius: var(--jejari); font-size: 13px; color: var(--teks-2); }
.kembali { align-self: flex-start; }
.jadual { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jadual th { text-align: left; font: 600 11px var(--fon); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teks-3); padding: 10px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.jadual td { padding: 10px 14px; border-bottom: 1px solid var(--garis); vertical-align: top; color: var(--teks-2); }
.jadual td.mono { font-family: var(--mono); font-size: 12.5px; }
.jadual .angka { text-align: right; font-variant-numeric: tabular-nums; }
.jadual td.butiran { color: var(--teks); overflow-wrap: anywhere; }
.jadual a { color: var(--teks); font-weight: 600; text-decoration: none; }
.jadual.boleh-klik tbody tr { cursor: pointer; }
.jadual.boleh-klik tbody tr:hover, .jadual.boleh-klik tbody tr:focus-visible { background: var(--permukaan-2); }
.jadual tr[data-j="minta"] td, .jadual .ada-tegur { color: var(--tegur); }
.jadual tr.baris-tunggu { box-shadow: inset 3px 0 0 var(--tegur); }
.jadual .undi.u-lulus { color: var(--lulus); border-color: var(--lulus); }
.jadual .undi.u-tegur { color: var(--tegur); border-color: var(--tegur); }
.keadaan { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--garis-2); white-space: nowrap; }
.keadaan.k-menunggu { border-color: var(--tegur); color: var(--tegur); }
.keadaan.k-rehat { border-color: rgba(43, 212, 184, 0.5); color: var(--lulus); }
.keadaan.k-bersidang { border-color: var(--hakim); color: var(--hakim); }
.baris-tetapan { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--garis); }
.baris-tetapan:last-child { border-bottom: 0; }
.baris-tetapan b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.baris-tetapan span { color: var(--teks-2); font-size: 13px; }
.baris-tetapan .kawalan { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
@media (max-width: 720px) {
  .app.halaman { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "utama"; }
  .jadual thead { display: none; }
  .jadual, .jadual tbody, .jadual tr, .jadual td { display: block; width: 100%; }
  .jadual tr { padding: 10px 14px; border-bottom: 1px solid var(--garis); }
  .jadual td { border: 0; padding: 3px 0; display: flex; gap: 10px; text-align: left; }
  .jadual td::before { content: attr(data-label); flex: 0 0 92px; color: var(--teks-3); font: 600 11px var(--fon); letter-spacing: 0.06em; text-transform: uppercase; padding-top: 2px; }
  .jadual .angka { text-align: left; }
  .baris-tetapan { flex-direction: column; align-items: stretch; }
}

/* ── Log masuk ───────────────────────────────────────── */
.masuk { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); }
.masuk .jenama {
  border-right: 1px solid var(--garis); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--latar); gap: 32px;
}
.masuk .tanda-kata { display: flex; align-items: center; gap: 12px; }
.masuk .tanda-kata svg { width: 36px; height: 36px; }
.masuk .tanda-kata b { font-size: 18px; letter-spacing: 0.02em; }
.masuk .tanda-kata span { color: var(--teks-3); font-weight: 400; }
.masuk .lukis { width: 100%; max-width: 640px; height: auto; }
.masuk .lukis .struktur { fill: none; stroke: var(--garis-2); stroke-width: 1; }
.masuk .lukis .titik-k { fill: var(--latar); stroke: var(--teks-3); stroke-width: 1.5; }
.masuk .lukis .titik-k.l { stroke: var(--lulus); }
.masuk .lukis .titik-k.t { stroke: var(--tegur); }
.masuk .lukis .titik-h { fill: var(--latar); stroke: var(--hakim); stroke-width: 1.5; }
.masuk .lukis .lakar { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: lakar 1.6s ease-out forwards; }
@keyframes lakar { to { stroke-dashoffset: 0; } }
.masuk h1 { font-size: 34px; line-height: 1.2; margin: 28px 0 12px; font-weight: 600; max-width: 18ch; }
.masuk .slogan { color: var(--teks-2); margin: 0; max-width: 46ch; }
.masuk .kaki { color: var(--teks-3); font: 12px var(--mono); }
.masuk .borang-wrap { display: grid; place-items: center; padding: 40px 24px; }
.borang { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.borang h2 { margin: 0; font-size: 22px; font-weight: 600; }
.borang .sub { margin: -10px 0 0; color: var(--teks-2); font-size: 14px; }
.medan { display: flex; flex-direction: column; gap: 6px; }
.medan label { font-size: 13px; color: var(--teks-2); }
.medan .kotak { position: relative; }
.medan input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: var(--jejari); border: 1px solid var(--garis-2);
  background: var(--permukaan); font-size: 15px;
}
.medan input:focus { border-color: var(--teks-2); outline: none; box-shadow: 0 0 0 3px rgba(244, 246, 249, 0.08); }
.medan .lihat {
  position: absolute; right: 2px; top: 1px; height: 44px; width: 44px; border: 0; background: none; color: var(--teks-3);
  cursor: pointer; display: grid; place-items: center;
}
.medan .lihat svg { width: 18px; height: 18px; }
.capslock { font-size: 12px; color: var(--tegur); min-height: 16px; }
.ralat {
  border: 1px solid var(--tegur); background: var(--tegur-redup); border-radius: var(--jejari); padding: 10px 12px;
  font-size: 14px;
}
.borang .btn-utama { height: 48px; justify-content: center; font-size: 15px; }
.borang .nota { font-size: 12px; color: var(--teks-3); text-align: center; margin: 0; }

/* ── Responsif ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .app { grid-template-columns: 68px minmax(0, 1fr); grid-template-areas: "rel bar" "rel utama" "rel sisi" "rel lejar"; }
  .sisi { border-left: 0; border-top: 1px solid var(--garis); }
  .undian { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { font-size: 14px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "utama" "sisi" "lejar"; }
  .rel { display: none; }
  .bar { padding: 0 14px; gap: 10px; position: sticky; top: 0; background: var(--latar); z-index: 5; }
  .jejak .lalu, .pratonton-tag, .pemasa { display: none; }
  .utama { padding: 14px; gap: 14px; }
  .undian { grid-template-columns: minmax(0, 1fr); }
  .kad-putusan { grid-template-columns: minmax(0, 1fr); }
  .kad-putusan .ikon-hakim { display: none; }
  .kad-putusan .meterai-teks { text-align: left; }
  .dewan-svg .kerusi .nama, .dewan-svg .kerusi .akaun, .dewan-svg .label-svg, .dewan-svg .galeri { display: none; }
  .sepanduk { flex-direction: column; align-items: stretch; }
  .sepanduk .tindakan .btn { flex: 1; justify-content: center; }
  .mesej { position: sticky; bottom: 0; background: var(--latar); }
  .lejar { padding: 14px; }
  .masuk { grid-template-columns: minmax(0, 1fr); }
  .masuk .jenama { border-right: 0; border-bottom: 1px solid var(--garis); padding: 28px 20px; }
  .masuk h1 { font-size: 26px; }
  .masuk .lukis { max-height: 160px; }
}
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: bar atas telefon — jejak disorok, status dipendekkan,
   "Main semula" ikon sahaja, butang 44px · why: UAT 390px: kumpulan kanan 410px → skrol mendatar 433px; R2 sasaran ≥44px
   · verify: 390px → scrollWidth = 390, tiada butang < 44px */
@media (max-width: 720px) {
  .jejak { display: none; }
  .bar .kanan { margin-left: 0; flex: 1; min-width: 0; gap: 8px; }
  .status { flex: 1; min-width: 0; overflow: hidden; }
  .status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #btn-ulang span { display: none; }
  #btn-ulang { width: 44px; padding: 0; justify-content: center; }
  .btn { min-height: 44px; }
  .btn-ikon { width: 44px; }
  .aliran .btn-undur { min-height: 44px; }
}
.sepanduk .auto { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 12px var(--mono); color: var(--teks); }
.sepanduk .auto[hidden] { display: none; }
.garis-masa { flex: 1; max-width: 220px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--garis-2); }
.garis-masa i { display: block; height: 100%; width: 100%; background: var(--tegur); transition: width 1s linear; }
/* [ALESA-CHANGE 2026-10-28 · oleh: tyronx + claude-opus-5-5] what: telefon — rel jadi bar tab bawah (4 menu boleh dicapai),
   grid 1 lajur, mod grid ikut susun atur telefon · why: rel tersorok di telefon = menu tak boleh dicapai; body.mod-grid .app
   lebih spesifik drpd peraturan telefon lama · verify: 390px → bar bawah 4 ikon, grid 1 lajur, scrollWidth 390 */
@media (max-width: 1180px) {
  .grid-sesi[data-n="8"], .grid-sesi[data-n="16"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body { padding-bottom: 64px; }
  .rel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 60px; flex-direction: row;
    justify-content: space-around; align-items: stretch; padding: 0; border-right: 0; border-top: 1px solid var(--garis); z-index: 20;
  }
  .rel .tanda { display: none; }
  .rel a { flex: 1; width: auto; height: 60px; border-radius: 0; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; }
  .rel a[aria-current="page"] { box-shadow: inset 0 2px 0 var(--hakim); }
  .rel-label { display: block; font-size: 10.5px; }
  body.mod-grid .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "utama" "lejar"; }
  .grid-sesi[data-n] { grid-template-columns: minmax(0, 1fr); }
  .susun { margin-left: 0; }
  .mesej { bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .masuk .lukis .lakar { stroke-dashoffset: 0; }
  .dewan-svg .meterai.tunjuk { opacity: 1; }
}