:root {
  /* Dipetakan kepada token AKSI (aksi-tokens.css) — Premium Bright Visual System. */
  --bg: var(--aksi-bg);
  --surface: var(--aksi-surface);
  --text: var(--aksi-text);
  --muted: var(--aksi-muted);
  --primary: var(--aksi-blue-deep);
  --primary-text: #ffffff;
  --border: rgba(28, 42, 92, 0.12);
  --danger: var(--aksi-danger);
  --ok: var(--aksi-ok);
  --focus: var(--aksi-focus);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Paparan telefon/PWA sentiasa muat skrin (keputusan pemilik): tiada cubit-zum / ketik-dua-kali-zum, dan tiada
   limpahan mendatar yang membolehkan iOS zum keluar melebihi lebar skrin. `clip` (bukan hidden) supaya sticky kekal. */
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--aksi-gradient-sky); background-attachment: fixed; color: var(--text); font: 16px/1.55 var(--aksi-font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--primary); }
code { background: var(--aksi-bg-2); padding: 1px 6px; border-radius: 6px; }
.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.narrow { max-width: 480px; }
.brand { text-align: center; margin: 24px 0; }
.brand h1 { margin: 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(115deg, #13205a 10%, #2152de 45%, #6247e6 75%, #20bfc7 105%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.brand p { margin: 4px 0 0; color: var(--muted); }
.card { background: var(--aksi-glass-strong); -webkit-backdrop-filter: var(--aksi-glass-blur); backdrop-filter: var(--aksi-glass-blur); border: 1px solid var(--aksi-border); border-radius: var(--aksi-radius-lg); padding: 20px; margin: 14px 0; box-shadow: var(--aksi-shadow-soft); }
.stack { display: flex; flex-direction: column; gap: 10px; }
label { font-weight: 600; font-size: .95rem; }
input, select { font: inherit; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--aksi-radius-sm); background: #fff; color: var(--text); width: 100%; min-height: 46px; transition: border-color var(--aksi-dur-fast), box-shadow var(--aksi-dur-fast); }
/* iOS Safari: input tarikh/masa mempunyai lebar intrinsik yang melimpah keluar kotak — paksa ikut lebar induk. */
input[type="date"], input[type="time"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
input:focus, select:focus { outline: none; border-color: var(--aksi-blue); box-shadow: 0 0 0 4px rgba(59, 123, 255, 0.15); }
button, .button { font: inherit; font-weight: 700; letter-spacing: 0.01em; min-height: 46px; padding: 10px 20px; border-radius: var(--aksi-radius-pill); border: 0; background: var(--aksi-gradient-primary); color: var(--primary-text); cursor: pointer; text-align: center; text-decoration: none; display: inline-block; box-shadow: 0 12px 28px -14px rgba(98, 71, 230, 0.6); transition: transform var(--aksi-dur-fast) var(--aksi-ease), box-shadow var(--aksi-dur) var(--aksi-ease); }
button:hover, .button:hover { transform: translateY(-1px); }
button.secondary, .button.secondary { background: #fff; color: var(--primary); box-shadow: var(--aksi-shadow-soft), inset 0 0 0 1px var(--border); }
button:disabled { opacity: .6; cursor: progress; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.msg { min-height: 1.5em; margin: 0; }
.msg.error { color: var(--danger); }
.msg.ok { color: var(--ok); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--aksi-gradient-deep-bar); color: #fff; box-shadow: 0 10px 30px -18px rgba(11, 18, 51, 0.8); }
.topbar-title strong { font-weight: 800; letter-spacing: 0.1em; }
.topbar-title { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-title span { font-size: .85rem; color: rgba(255, 255, 255, 0.72); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
.menu-toggle:hover { transform: none; background: rgba(255, 255, 255, .16); }
.burger { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger i:nth-child(2) { width: 70%; }
.nav-head { display: none; }
.nav { display: none; background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: var(--aksi-glass-blur); backdrop-filter: var(--aksi-glass-blur); border-bottom: 1px solid var(--aksi-border); }
.nav.open { display: block; }
.nav ul { list-style: none; margin: 0; padding: 8px; }
.nav li button { width: 100%; text-align: left; background: transparent; box-shadow: none; color: var(--text); border-radius: var(--aksi-radius-sm); font-weight: 600; letter-spacing: 0.02em; }
.nav li button[aria-current="page"] { background: #fff; color: var(--primary); box-shadow: var(--aksi-shadow-soft); }
.nav .sep { border-top: 1px solid var(--border); margin: 6px 8px; padding-top: 6px; font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.tabs { display: flex; gap: 8px; }
.tabs { padding: 4px; background: var(--aksi-bg-2); border-radius: var(--aksi-radius-pill); }
.tabs button { flex: 1; background: transparent; box-shadow: none; color: var(--muted); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: var(--aksi-shadow-soft); }
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  body[data-page="sekolah"] { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; }
  body[data-page="sekolah"] .topbar { grid-column: 1 / -1; }
  body[data-page="sekolah"] .nav { display: block; border-bottom: 0; border-right: 1px solid var(--aksi-border); min-height: calc(100vh - 60px); }
  /* Desktop: gunakan ruang yang ada (had lebar hanya untuk skrin sangat lebar). */
  body[data-page="sekolah"] main { margin: 0; max-width: 1480px; width: 100%; }
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.link { background: none; box-shadow: none; border: 0; color: var(--primary); text-decoration: underline; min-height: 44px; padding: 0 8px; font-weight: 600; }
.notice { border-color: var(--primary); border-width: 2px; }
.list { list-style: none; margin: 0 0 12px; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.list li .meta { display: flex; flex-direction: column; }
.list li .meta small { color: var(--muted); }
.list li button { min-height: 40px; padding: 6px 12px; }

/* Halaman awam (daftar, sahkan, aktifkan, reset, Google): identiti AKSI yang sama dengan landing page */
body:not([data-page="sekolah"]) .brand { margin: 40px 0 20px; }
body:not([data-page="sekolah"]) .brand::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, transparent 40%), conic-gradient(from 200deg, #3b7bff, #20bfc7, #8a6cff, #ff8a6b, #d8b46a, #3b7bff); box-shadow: 0 16px 36px -14px rgba(98, 71, 230, 0.6); }
.brand-back { display: inline-block; margin-top: 8px; font-size: 0.9rem; color: var(--muted); text-decoration: none; }
.brand-back:hover { color: var(--primary); }
.field-note { margin: -4px 0 4px; font-size: 0.85rem; color: var(--muted); }
.field-note code { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { button, .button, input { transition: none; } }

/* Halaman dokumen (Privasi, Terma) */
.wrap.doc { max-width: 760px; }
.doc-body h2 { font-size: 1.15rem; margin: 26px 0 8px; }
.doc-body p, .doc-body li { color: var(--aksi-text-2); }
.doc-body ul { padding-left: 1.2em; margin: 8px 0; }
.doc-body li { margin: 6px 0; }
.doc-foot { font-size: 0.85rem; margin: 18px 0 40px; }

/* ------------------------------------------------------------------ Fasa 1: Core Data (teras.js) */
#dinamik > h1 { margin-top: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.toolbar select, .toolbar input { width: auto; flex: 1 1 160px; min-width: 0; }
.toolbar button { flex: 0 0 auto; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.inline-form .field { flex: 1 1 180px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label-row, .help-heading { display: flex; align-items: center; gap: 6px; }
.help-heading { margin: 0; }
.help-heading h1, .help-heading h2, .help-heading h3 { margin: 0; }
.help-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: #fff; box-shadow: none; color: var(--primary); font-size: .8rem; font-weight: 800; line-height: 1; }
.help-icon:hover, .help-icon[aria-expanded="true"] { transform: none; background: var(--aksi-bg-2); }
.help-popover { position: fixed; inset: auto; margin: 0; z-index: 1100; width: max-content; max-width: min(320px, calc(100vw - 24px)); max-height: min(50dvh, 300px); overflow-y: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #22242c; color: #fff; box-shadow: 0 14px 32px rgba(11, 18, 51, .25); font-size: .86rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
dialog.sheet > .help-popover:not([popover]) { position: absolute; }
.field > span { font-weight: 600; font-size: .92rem; }
.field small { font-weight: 400; }
.empty { margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--aksi-radius-pill); font-size: .78rem; font-weight: 700; letter-spacing: .02em; background: var(--aksi-bg-2); color: var(--aksi-text-2); white-space: nowrap; }
.chip.kat { color: #fff; }
.chip.kat-badan_beruniform { background: var(--aksi-gradient-uniform); }
.chip.kat-kelab_persatuan { background: var(--aksi-gradient-club); }
.chip.kat-sukan_permainan { background: var(--aksi-gradient-sport); }
.chip.kat-rumah_sukan { background: var(--aksi-gradient-house); }
.chip.role { background: var(--aksi-gradient-gold); color: #3d2a00; }
.chip.mine { background: rgba(33, 82, 222, .12); color: var(--primary); }
.chip.st-active { background: rgba(15, 138, 99, .12); color: var(--ok); }
.chip.st-draft, .chip.st-pending_review { background: rgba(216, 180, 106, .22); color: #7a5a12; }
.chip.st-archived, .chip.st-ended, .chip.st-tamat, .chip.st-inactive { background: rgba(91, 100, 132, .14); color: var(--muted); }
.chip.st-transferred_out { background: rgba(255, 138, 107, .18); color: #a2412a; }
.kat-group h2 { margin: 22px 0 10px; font-size: 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tiles.four { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 16px 16px 16px 20px; min-height: 110px; border-radius: var(--aksi-radius-md); background: var(--aksi-glass-strong); color: var(--text); border: 1px solid var(--aksi-border); box-shadow: var(--aksi-shadow-soft); font-weight: 600; overflow: hidden; }
.tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--aksi-gradient-primary); }
.tile.kat-badan_beruniform::before { background: var(--aksi-gradient-uniform); }
.tile.kat-kelab_persatuan::before { background: var(--aksi-gradient-club); }
.tile.kat-sukan_permainan::before { background: var(--aksi-gradient-sport); }
.tile.kat-rumah_sukan::before { background: var(--aksi-gradient-house); }
.tile strong { font-size: 1.02rem; letter-spacing: -.01em; }
.tile .tile-count { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.tile small { font-weight: 500; }
button.tile:hover { transform: translateY(-2px); box-shadow: var(--aksi-shadow-lift); }
.tile.disabled { opacity: .55; }
.list li.selected { background: rgba(33, 82, 222, .06); border-radius: var(--aksi-radius-sm); }
.list li .row-main { flex: 1 1 220px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; background: none; box-shadow: none; color: var(--text); padding: 4px 0; min-height: 44px; text-align: left; font-weight: 400; }
.list li .row-main:hover { transform: none; color: var(--primary); }
.list li .row-main strong { flex-basis: 100%; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
button.danger, .button.danger { color: var(--danger); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; }
.check small { margin-left: auto; }
.list.pick { max-height: 46vh; overflow: auto; }
.list.pick li { padding: 4px 0; }
.list.pick .check { width: 100%; min-height: 40px; }
.notice-inline { padding: 10px 14px; border-radius: var(--aksi-radius-sm); background: rgba(33, 82, 222, .07); color: var(--aksi-text-2); }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.panel-head h2 { margin: 0; }
.link.back { padding: 0; margin-top: 4px; text-decoration: none; width: fit-content; justify-self: start; align-self: flex-start; text-align: left; }
.admin-panel summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
#dinamik .tabs { margin: 14px 0 0; }
dialog.sheet { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--aksi-radius-lg); background: var(--aksi-surface); color: var(--text); box-shadow: var(--aksi-shadow-lift); display: flex; flex-direction: column; }
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: rgba(11, 18, 51, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.sheet-head h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.icon-btn { background: var(--aksi-bg-2); color: var(--text); box-shadow: none; min-height: 40px; width: 40px; padding: 0; }
.sheet-body { padding: 4px 20px 8px; overflow: auto; }
.sheet-body h3 { margin: 12px 0 0; font-size: .95rem; color: var(--aksi-text-2); }
.sheet-body hr { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
dialog.sheet > .msg { padding: 0 20px; }
.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--border); }
.sheet-actions strong { margin-right: auto; }
@media (max-width: 560px) {
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--aksi-radius-lg) var(--aksi-radius-lg) 0 0; }
}
#dinamik .list li { flex-wrap: nowrap; }
#dinamik .list li .meta { flex: 1 1 auto; min-width: 0; }
#dinamik .list li .row-actions { flex: 0 1 auto; }
@media (max-width: 560px) {
  #dinamik .list li .row-actions { flex-direction: column; align-items: flex-end; }
}

/* ------------------------------------------------------------------ Persediaan (wizard) + import */
dialog.sheet.wizard { width: min(820px, calc(100vw - 24px)); }
.eyebrow { margin: 0 0 2px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aksi-violet-deep); }
.stepper { list-style: none; display: flex; gap: 6px; margin: 0; padding: 4px 20px 12px; overflow-x: auto; counter-reset: s; }
.stepper li { flex: 1 1 0; min-width: 0; }
.stepper button { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; min-height: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 600; font-size: .78rem; border-radius: var(--aksi-radius-sm); }
.stepper button:hover { transform: none; background: var(--aksi-bg-2); }
/* Langkah dikunci sehingga Google Drive disambung. */
.stepper li.kunci button { opacity: .45; cursor: not-allowed; }
.stepper li.kunci button:hover { background: none; }
.wizard .sheet-actions:empty { display: none; }
.stepper .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--aksi-bg-2); color: var(--aksi-text-2); font-weight: 800; }
.stepper .label { text-align: center; line-height: 1.2; }
.stepper li.done .dot { background: var(--aksi-gradient-house); color: #fff; }
.stepper li.now .dot { background: var(--aksi-gradient-primary); color: #fff; box-shadow: 0 8px 20px -8px rgba(98, 71, 230, .6); }
.stepper li.now button { color: var(--text); }
.step-title { margin: 4px 0 0; font-size: 1.15rem; color: var(--text); }
.done-line { font-weight: 700; color: var(--ok); }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 18px; border: 2px dashed rgba(33, 82, 222, .35); border-radius: var(--aksi-radius-md); background: rgba(33, 82, 222, .04); cursor: pointer; text-align: center; font-weight: 600; }
.drop.over, .drop:hover { background: rgba(33, 82, 222, .09); border-color: var(--primary); }
.drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.table-wrap { max-height: 40vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--aksi-radius-sm); }
table.plan { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.plan th { position: sticky; top: 0; background: var(--aksi-bg-2); text-align: left; padding: 8px 10px; font-size: .78rem; letter-spacing: .03em; }
table.plan td { padding: 8px 10px; border-top: 1px solid var(--border); vertical-align: top; }
table.plan code { font-size: .95rem; letter-spacing: .04em; }
.import-panel > p { margin: 0; }
.setup-card { border: 2px solid rgba(98, 71, 230, .35); }
.meter { height: 8px; border-radius: 99px; background: var(--aksi-bg-2); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--aksi-gradient-primary); border-radius: 99px; }
.meter-fill.m0 { width: 2%; } .meter-fill.m1 { width: 20%; } .meter-fill.m2 { width: 40%; } .meter-fill.m3 { width: 60%; } .meter-fill.m4 { width: 80%; } .meter-fill.m5 { width: 100%; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.checklist li.done .link { color: var(--ok); }
.checklist .link { padding: 0; min-height: 36px; text-decoration: none; }
.back-btn { margin-right: auto; }
@media (max-width: 560px) {
  .stepper .label { display: none; }
}
@media print {
  body > *:not(dialog) { display: none !important; }
  dialog.sheet { position: static; box-shadow: none; max-height: none; width: 100%; }
  dialog.sheet .sheet-actions, dialog.sheet .stepper, dialog.sheet .drop, dialog.sheet .icon-btn { display: none; }
}
dialog.sheet > .sheet-head, dialog.sheet > .stepper, dialog.sheet > .sheet-actions, dialog.sheet > .msg { flex-shrink: 0; }
dialog.sheet > .sheet-body { flex: 1 1 auto; min-height: 0; }
@media (max-width: 560px) {
  dialog.sheet.wizard { width: 100vw; max-width: 100vw; }
}

/* Persediaan: kelas & kategori, maklumat unit, tampal */
textarea.paste { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--aksi-radius-sm); background: #fff; color: var(--text); resize: vertical; }
textarea.paste:focus { outline: none; border-color: var(--aksi-blue); box-shadow: 0 0 0 4px rgba(59, 123, 255, 0.15); }
.paste-panel:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
.paste-panel p { margin: 0; }
.link.paste-toggle { align-self: flex-start; padding: 0; text-decoration: none; }
.bulk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; }
button.small { min-height: 34px; padding: 4px 12px; font-size: .82rem; }
.link.tiny { min-height: 0; padding: 0; font-size: .74rem; font-weight: 600; }
table.grid td, table.grid th { vertical-align: middle; }
table.grid .cb { text-align: center; }
table.grid td.cb input { width: 22px; height: 22px; min-height: 0; }
.table-wrap.tall { max-height: 46vh; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.unit-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--aksi-radius-md); background: #fff; }
.unit-card h4 { margin: 0; }
.chip-btn { min-height: 30px; padding: 2px 10px; font-size: .76rem; font-weight: 600; background: var(--aksi-bg-2); color: var(--aksi-text-2); box-shadow: none; border-radius: var(--aksi-radius-pill); }
.chip-btn:hover { transform: none; background: rgba(33, 82, 222, .12); color: var(--primary); }
.small { font-size: .85rem; }
.chip-new { background: rgba(98, 71, 230, .12); color: var(--aksi-violet-deep); padding-right: 4px; }
.chip-x { min-height: 0; width: 20px; height: 20px; padding: 0; margin-left: 4px; border-radius: 50%; background: rgba(98, 71, 230, .18); color: var(--aksi-violet-deep); box-shadow: none; font-size: .8rem; line-height: 1; }
.chip-x:hover { transform: none; background: var(--aksi-violet-deep); color: #fff; }
.inline-add { display: flex; gap: 8px; }
.inline-add input { flex: 1; }

/* ---------------------------------------------------------------- Fasa 2: Kehadiran & Laporan (§122, §127) */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1 0 auto; white-space: nowrap; }
.chip.st-pending { background: rgba(232, 150, 30, .16); color: #9a5b00; }
.chip.st-selesai { background: rgba(31, 135, 84, .12); color: #17724a; }
.meet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.meet-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--aksi-radius-md); background: var(--aksi-glass-strong); border: 1px solid var(--aksi-border); box-shadow: var(--aksi-shadow-soft); }
.meet-card p { margin: 0; }
.meet-card.klik { cursor: pointer; transition: transform var(--aksi-dur-fast), box-shadow var(--aksi-dur-fast), border-color var(--aksi-dur-fast); -webkit-tap-highlight-color: transparent; }
.meet-card.klik:hover { border-color: rgba(98, 71, 230, .35); box-shadow: var(--aksi-shadow-lift); }
.meet-card.klik:active { transform: scale(.985); }
.meet-card.klik:focus-visible { outline: 3px solid rgba(98, 71, 230, .45); outline-offset: 2px; }
.meet-when { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.meet-when strong { font-size: 1.05rem; letter-spacing: .02em; }
.meet-when span { color: var(--muted); font-weight: 600; }
.meet-when.big strong { font-size: 1.2rem; }
.meet-bil { align-self: flex-start; padding: 2px 10px; border-radius: var(--aksi-radius-pill); background: rgba(98, 71, 230, .1); color: var(--aksi-violet-deep); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.meet-head { display: grid; gap: 4px; }
.meet-head h2 { margin: 0; }
.meet-head p { margin: 0; }
.meet-sub { color: var(--muted); }
.meet-sub strong { color: var(--text, inherit); letter-spacing: .02em; }
.meet-stats { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; }
.meet-stats .stat { display: contents; }
.meet-stats dt { color: var(--muted); }
.meet-stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stat.hadir dd, .att-summary .stat.hadir strong { color: var(--ok); }
.stat.tidak dd, .att-summary .stat.tidak strong { color: var(--danger); }
.stat.sebab dd, .att-summary .stat.sebab strong { color: #b36b00; }
.meet-lap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Tarikh | Masa sentiasa sebaris (dua lajur sama lebar), juga di iPhone. */
.att-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.att-head .field { min-width: 0; margin: 0; }
@media (min-width: 900px) { .att-head { max-width: 540px; } }
input.baca-sahaja { background: var(--aksi-bg-2); color: var(--text); border-color: transparent; cursor: default; }
input.baca-sahaja:focus { box-shadow: none; outline: none; }
.att-bar { position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--aksi-bg); padding: 8px 0; border-bottom: 1px solid var(--border); }
.att-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: .95rem; }
.att-summary strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.att-bar .toolbar { margin: 8px 0 0; }
.att-list { list-style: none; margin: 0 0 12px; padding: 0; }
.att-list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.att-list li .meta { display: flex; flex-direction: column; min-width: 0; }
.att-list li .meta strong { overflow-wrap: anywhere; }
.att-list li .meta small { color: var(--muted); }
.att-list li[data-status="TIDAK_HADIR"] { background: linear-gradient(90deg, rgba(214, 69, 69, .07), transparent 70%); }
.att-status { justify-self: end; padding: 4px 12px; border-radius: var(--aksi-radius-pill); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.att-status.st-hadir { background: rgba(31, 135, 84, .12); color: #17724a; }
.att-status.st-tidak_hadir { background: rgba(214, 69, 69, .12); color: #b42318; }
.att-status.st-bersebab { background: rgba(232, 150, 30, .16); color: #93590b; }
.att-list li .meta .att-catatan { font-style: italic; }
.kehadiran-box { display: grid; gap: 12px; }
.logo-pratonton { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.logo-pratonton img { max-width: 84px; max-height: 84px; object-fit: contain; }
.link.inline { min-height: 0; padding: 0; font-size: inherit; }
.kehadiran-box > .panel-head h3 { margin: 0; }
.att-list li[data-status="BERSEBAB"] { background: linear-gradient(90deg, rgba(232, 150, 30, .09), transparent 70%); }
.att-note { grid-column: 1 / -1; }
.seg { display: inline-flex; border: 1px solid var(--aksi-border); border-radius: var(--aksi-radius-pill); overflow: hidden; background: #fff; }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 40px; padding: 0 10px; font-weight: 700; color: var(--muted); cursor: pointer; user-select: none; }
.seg label + label span { border-left: 1px solid var(--aksi-border); }
.seg input:focus-visible + span { outline: 3px solid var(--aksi-focus); outline-offset: -3px; }
.seg input:checked + span { color: #fff; }
.seg .seg-hadir input:checked + span { background: var(--ok); }
.seg .seg-tidak_hadir input:checked + span { background: var(--danger); }
.seg .seg-bersebab input:checked + span { background: #d98a00; }
.seg input:disabled + span { cursor: default; }
.att-save { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; background: var(--aksi-bg); }
.att-save .msg { margin: 0; }
.danger-zone { margin-top: 24px; padding-top: 12px; border-top: 1px dashed var(--border); }
.lap-card h3 { margin: 0; }
.lap-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.lap-auto { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; padding: 10px 12px; border-radius: var(--aksi-radius-sm); background: var(--aksi-bg-2); }
.lap-auto div { display: contents; }
.lap-auto dt { color: var(--muted); }
.lap-auto dd { margin: 0; font-weight: 600; }
.check-list { display: flex; flex-direction: column; gap: 8px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.choice { display: grid; gap: 10px; }
.choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; min-height: 0; }
.choice button small { font-weight: 500; color: var(--muted); }
@media (max-width: 520px) {
  .seg span { min-width: 40px; padding: 0 6px; }
  .att-summary { font-size: .88rem; }
}
.field textarea, .sheet textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--aksi-radius-sm); background: #fff; color: var(--text); resize: vertical; }
.field textarea:focus, .sheet textarea:focus { outline: none; border-color: var(--aksi-blue); box-shadow: 0 0 0 4px rgba(59, 123, 255, 0.15); }
@media (max-width: 899px) { .att-bar { top: calc(64px + env(safe-area-inset-top, 0px)); } }
.temp-pw { font: 700 1.15rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; padding: 10px 14px; border-radius: var(--aksi-radius-sm); background: var(--aksi-bg-2); user-select: all; }
.guru-kat { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.guru-kat .field { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--aksi-border); border-radius: var(--aksi-radius-md); background: var(--aksi-bg-2); }
.guru-kat .field .msg { margin: 0; min-height: 0; }
.guru-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border-radius: var(--aksi-radius-md); background: var(--aksi-bg-2); }
.guru-head strong { font-size: 1.05rem; }
.guru-head small { flex-basis: 100%; }

/* ---------------------------------------------------------------- Menu mobile: drawer overlay dari kiri */
.nav-backdrop { display: none; }
@media (max-width: 899px) {
  .nav { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(280px, 82vw); overflow-y: auto; overscroll-behavior: contain;
         background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 0; border-right: 1px solid var(--aksi-border);
         box-shadow: 24px 0 60px -30px rgba(11, 18, 51, .55); transform: translateX(-104%); visibility: hidden;
         transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
  .nav.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(11, 18, 51, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
                  opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  .nav.open + .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-lock { overflow: hidden; }
  .nav-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 14px 18px; background: var(--aksi-gradient-deep-bar); color: #fff; position: sticky; top: 0; z-index: 1; }
  .nav-brand { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .nav-brand strong { font-weight: 800; letter-spacing: .12em; }
  .nav-brand span { font-size: .8rem; color: rgba(255, 255, 255, .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-close { flex: 0 0 auto; width: 36px; min-height: 36px; padding: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); box-shadow: none; color: #fff; font-size: .95rem; }
  .nav-close:hover { transform: none; background: rgba(255, 255, 255, .22); }
  .nav ul { padding: 8px 10px 24px; }
  .nav li button { min-height: 42px; padding: 8px 12px; font-size: .92rem; font-weight: 600; letter-spacing: .01em; }
  .nav li button[aria-current="page"] { background: rgba(33, 82, 222, .09); color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); }
  .nav .sep { margin: 8px 6px 4px; padding-top: 10px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav.open, .nav-backdrop { transition: none; }
}
.guru-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guru-actions button { flex: 1 1 140px; }

/* PWA iOS: kandungan tidak di bawah jam / notch (landskap / peranti dengan safe-area). */
.topbar { padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 899px) { .nav-head { padding-top: max(16px, env(safe-area-inset-top, 0px)); } }
.update-banner { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; min-height: 44px; padding: 10px 18px; font-size: .9rem; box-shadow: 0 18px 40px -16px rgba(11, 18, 51, .6); }
.update-banner:hover { transform: translateX(-50%) translateY(-1px); }

/* ---------------------------------------------------------------- Bar atas: logo + nama sekolah (kemas di telefon) */
.topbar { min-height: 56px; box-sizing: border-box; }
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.topbar-logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 6px 16px -8px rgba(0, 0, 0, .6); }
.topbar-title { min-width: 0; }
.topbar-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; letter-spacing: .01em; }
.topbar-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

/* Dialog sebagai "bottom sheet" di telefon: tidak melepasi status bar, kepala kekal, ruang bar rumah iPhone. */
@media (max-width: 560px) {
  dialog.sheet { max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px) + 12px)); box-shadow: 0 -18px 50px -20px rgba(11, 18, 51, .45); }
  dialog.sheet .sheet-head { position: relative; padding-top: 22px; }
  dialog.sheet .sheet-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 99px; background: rgba(28, 42, 92, .18); }
  dialog.sheet .sheet-actions { padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
}

/* Senarai guru: kad hijau (aktif) / merah (tidak aktif) */
#senarai-guru { display: flex; flex-direction: column; gap: 10px; }
#senarai-guru li.guru-kad { position: relative; padding: 12px 14px 12px 18px; border: 1px solid transparent; border-bottom: 1px solid transparent; border-radius: var(--aksi-radius-md); overflow: hidden; }
#senarai-guru li.guru-kad::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; }
#senarai-guru li.guru-kad.aktif { background: rgba(15, 138, 99, .07); border-color: rgba(15, 138, 99, .22); }
#senarai-guru li.guru-kad.aktif::before { background: var(--ok); }
#senarai-guru li.guru-kad.tidak-aktif { background: rgba(214, 69, 69, .07); border-color: rgba(214, 69, 69, .25); }
#senarai-guru li.guru-kad.tidak-aktif::before { background: var(--danger); }
#senarai-guru li.guru-kad.aktif .meta small { color: #0b7a57; }
#senarai-guru li.guru-kad.tidak-aktif .meta small { color: var(--danger); }
.guru-list-head { flex-wrap: nowrap; margin-bottom: 12px; }
.guru-list-head h2 { min-width: 0; }
.guru-list-head button { flex: 0 0 auto; margin-left: auto; min-height: 38px; padding: 6px 14px; font-size: .85rem; }
@media (max-width: 400px) { .guru-list-head h2 { font-size: 1.25rem; } .guru-list-head button { padding: 6px 11px; font-size: .8rem; } }

/* Kad password lalai: ✕ kanan atas, ikon salin di hujung kotak password */
.pw-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding-right: 56px; }
.pw-card[hidden] { display: none; }
.pw-card .pw-title { margin: 0; overflow-wrap: anywhere; }
.pw-close { position: absolute; top: 12px; right: 12px; }
.pw-field { position: relative; }
.pw-card .pw-field { margin-right: -36px; }
.pw-field input { width: 100%; box-sizing: border-box; padding-right: 52px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .03em; }
.copy-icon { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; padding: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--muted); }
.copy-icon:hover { transform: translateY(-50%); background: var(--aksi-bg-2); color: var(--primary); }
.copy-icon .ic-ok { display: none; }
.copy-icon.done { color: var(--ok); }
.copy-icon.done .ic-copy { display: none; }
.copy-icon.done .ic-ok { display: inline; }

/* ---------------------------------------------------------------- Fasa 4: Pencapaian */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ach-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--aksi-radius-md); background: var(--aksi-glass-strong); border: 1px solid var(--aksi-border); box-shadow: var(--aksi-shadow-soft); overflow: hidden; }
.ach-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ach, #8a93ae); }
.ach-card.tier-emas { --ach: linear-gradient(90deg, #f5c542, #e3a008); --ach-c: #b7791f; --ach-bg: rgba(245, 197, 66, .16); }
.ach-card.tier-perak { --ach: linear-gradient(90deg, #cfd6e4, #98a2b8); --ach-c: #5b6478; --ach-bg: rgba(152, 162, 184, .18); }
.ach-card.tier-gangsa { --ach: linear-gradient(90deg, #e2a26b, #b86a34); --ach-c: #9a5424; --ach-bg: rgba(226, 162, 107, .18); }
.ach-card.tier-lain { --ach: var(--aksi-gradient-primary); --ach-c: var(--primary); --ach-bg: rgba(33, 82, 222, .09); }
.ach-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.ach-card p { margin: 0; }
.ach-top { display: flex; align-items: center; gap: 10px; }
.ach-medal { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--ach); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 4px 10px -4px rgba(0, 0, 0, .35); position: relative; }
.ach-medal::after { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.ach-result { display: flex; flex-direction: column; line-height: 1.2; }
.ach-result strong { color: var(--ach-c); letter-spacing: .02em; }
.ach-result small { color: var(--muted); font-weight: 600; }
.ach-murid { font-weight: 600; font-size: .92rem; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .form-2 { grid-template-columns: 1fr; } }
.seg.seg-text span { min-width: 0; padding: 0 14px; font-weight: 600; }
.seg.seg-text input:checked + span { background: var(--primary); color: #fff; }

/* Laporan: gambar (dalam PDF sahaja — pratonton kecil dalam borang, tidak disimpan / tiada galeri) */
.img-grid { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.img-grid:empty { display: none; }
.img-grid li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--aksi-surface-2, #f1f2f5); border: 1px solid rgba(15, 23, 42, .08); }
.img-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-grid .img-no { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: rgba(15, 23, 42, .72); color: #fff; font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; }
.img-grid button { position: absolute; min-height: 0; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--aksi-ink, #111827); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font-size: 1.05rem; line-height: 1; }
.img-grid button:hover { transform: none; }
.img-grid .img-x { top: 4px; right: 4px; }
.img-grid .img-kiri { bottom: 4px; left: 4px; }
/* Pratonton gambar dalam bentuk bingkai PDF (sama dengan pdf-asas.js laluanBentuk). */
.bentuk { position: relative; overflow: hidden; }
.bentuk img { position: absolute; max-width: none; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.bentuk-bulat { clip-path: circle(50%); }
.bentuk-heksagon { clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.bentuk-segi { clip-path: inset(5% round 7%); }
.img-grid li .bentuk { width: 100%; height: 100%; }
.img-grid li.boleh-laras { cursor: pointer; background: transparent; border-color: transparent; }
.potong-kotak { width: min(300px, 100%); aspect-ratio: 1; margin: 4px auto 0; background: var(--aksi-bg-2); touch-action: none; cursor: grab; }
.potong-kotak:active { cursor: grabbing; }
.zum-baris { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); }
.zum-baris input { flex: 1; min-height: 0; padding: 0; border: 0; background: transparent; }
.ruang-halaman { display: grid; gap: 4px; margin-top: -4px; font-size: .78rem; color: var(--muted, #6b7280); }
.ruang-bar { height: 5px; border-radius: 3px; background: rgba(15, 23, 42, .08); overflow: hidden; }
.ruang-bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.ruang-halaman.lebih { color: var(--danger, #b42318); font-weight: 600; }
.ruang-halaman.lebih .ruang-bar span { background: var(--danger, #b42318); }

/* PAJSK (Fasa 5a) */
.chip-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pick .pick { min-height: 34px; padding: 4px 12px; font-size: .8rem; font-weight: 600; background: var(--aksi-bg-2); color: var(--aksi-text-2); box-shadow: inset 0 0 0 1px var(--border); }
.chip-pick .pick.on { background: var(--aksi-gradient-primary); color: #fff; box-shadow: none; }
.chip-pick .pick:disabled { opacity: .45; cursor: default; }
.chip-pick .pick:hover { transform: none; }
.pajsk-set { padding: 14px; border: 1px solid var(--border); border-radius: var(--aksi-radius-md); background: var(--aksi-bg-2); }
.pajsk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 2; padding: 10px 0; background: #fff; }
.pajsk-bar button { margin-left: auto; }
.pajsk-row { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.pajsk-list li.tamat { opacity: .6; }
.score-btn { min-height: 34px; min-width: 64px; padding: 4px 12px; font-size: .85rem; background: #fff; color: var(--primary); box-shadow: inset 0 0 0 1px var(--border); font-variant-numeric: tabular-nums; }
.score-btn:hover { transform: none; }
.gred { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; color: #fff; background: #94a3b8; }
.gred-a { background: #059669; } .gred-b { background: #2563eb; } .gred-c { background: #d97706; } .gred-d { background: #dc2626; } .gred-e { background: #7f1d1d; }
.pajsk-el { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pajsk-el th, .pajsk-el td { padding: 6px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 500; }
.pajsk-el td { text-align: right; }
.pajsk-el tr.jumlah th, .pajsk-el tr.jumlah td { font-weight: 800; border-bottom: 0; }
.pajsk-total { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 800; }
.pajsk-list li { display: flex; align-items: center; gap: 10px; }
.pajsk-list li .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pajsk-list .pajsk-skor { flex: 0 0 auto; margin-left: auto; }
.pajsk-row input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
.skor-ringkas { font-variant-numeric: tabular-nums; color: var(--aksi-text-2); }
.skor-ringkas.belum { color: var(--aksi-amber-deep, #b45309); }

/* Pemilih murid: kotak "Semua" + input tarikh tidak melimpah (iOS) */
.pick-all { align-self: flex-start; padding: 6px 12px; border-radius: var(--aksi-radius-pill); background: var(--aksi-bg-2); font-weight: 700; font-size: .85rem; }
.pick-all input { width: 18px; height: 18px; }
input[type=date] { min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.form-2 > * { min-width: 0; }

/* GPA tahun lepas (ADMIN) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gpa-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.gpa-table th, .gpa-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.gpa-table thead th { font-size: .78rem; color: var(--aksi-text-2); white-space: nowrap; }
.gpa-table tbody th { font-weight: 600; font-size: .82rem; }
.gpa-table input { width: 84px; min-height: 38px; padding: 6px 8px; }

/* CARIAN */
.search-bar input { width: 100%; font-size: 1.05rem; padding-left: 16px; }
.filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 14px; }
.filter-row select { min-height: 40px; padding: 8px 26px 8px 10px; font-size: .85rem; border-radius: var(--aksi-radius-pill); text-overflow: ellipsis; color: var(--aksi-text-2); }
.filter-row select.on { border-color: var(--aksi-blue); color: var(--primary); font-weight: 600; background-color: rgba(59, 123, 255, .06); }
.list li.clickable { cursor: pointer; }
.list li.clickable:hover { background: var(--aksi-bg-2); }
.chev { font-size: 1.4rem; color: var(--aksi-text-2); line-height: 1; }
.profil-pajsk { display: flex; align-items: center; gap: 12px; }
.profil-pajsk .meta { display: flex; flex-direction: column; gap: 2px; }

/* Bawa data tahun baharu */
.list.compact li { padding: 8px 0; }
.list.compact li .meta small { font-size: .8rem; }

/* AUDIT */
.audit-filter { flex-wrap: wrap; }
.audit-filter > * { flex: 1 1 140px; min-width: 0; }
.audit-list li .meta small { word-break: break-word; }

/* KESIHATAN SISTEM */
.list.health li { display: flex; align-items: center; gap: 12px; justify-content: flex-start; }
.dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .15); }
.dot.ok { background: #059669; box-shadow: 0 0 0 4px rgba(5, 150, 105, .15); }
.dot.bad { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .15); }

/* Portal awam: statistik UTAMA + tetapan paparan */
.awam-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.awam-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: var(--aksi-radius-sm); background: var(--bg); border: 1px solid var(--border); color: var(--text); box-shadow: none; min-height: 0; font-weight: 400; text-align: left; }
button.awam-stat:hover { color: var(--primary); }
.awam-stat strong { font-size: 1.5rem; line-height: 1.1; }
.awam-stat span { color: var(--muted); font-size: .85rem; }
.toggle-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.toggle-help-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.toggle-help-row .toggle-row { flex: 1; border-bottom: 0; }
.toggle-row .meta { display: flex; flex-direction: column; }
.toggle-row small { color: var(--muted); }
.toggle-row input:disabled + .meta { opacity: .5; }

/* KESIHATAN: fail Drive perlu disemak — butang di baris sendiri pada skrin sempit */
#dinamik .list li.drive-semak { flex-wrap: wrap; }
#dinamik .list li.drive-semak .meta { flex: 1 1 100%; min-width: 0; }
.list li.drive-semak .meta small { overflow-wrap: anywhere; }
#dinamik .list li.drive-semak .row-actions { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.list li.drive-semak .row-actions > * { white-space: nowrap; }

/* Portal pentadbir sistem (/admin) */
.pa-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; background: var(--aksi-gradient-primary, #1c2a5c); color: #fff; }
.pa-top .muted, .pa-top a { color: rgba(255, 255, 255, .85); }
.pa-tabs { padding: 10px 16px 0; max-width: 960px; margin: 0 auto; }
.pa-main { max-width: 960px; margin: 0 auto; padding: 16px; }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pa-aksi { justify-content: flex-start; margin: 12px 0; }
.pa-bahaya { border: 1px solid var(--danger); }
.pa-bahaya h2 { color: var(--danger); }
.pa-top .chip { background: rgba(255, 255, 255, .92); color: var(--primary); font-weight: 700; }
.pa-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.pa-tabs button { flex: 1 0 auto; padding-left: 12px; padding-right: 12px; font-size: .92rem; }

/* Banner pentadbir sistem (penyelenggaraan / pengumuman) */
.banner-sistem { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 12px; border-radius: var(--aksi-radius-sm); font-size: .92rem; }
.banner-sistem p { margin: 0; flex: 1; }
.banner-sistem.info { background: rgba(59, 123, 255, .08); border: 1px solid rgba(59, 123, 255, .25); color: var(--text); }
.banner-sistem.penting { background: rgba(214, 138, 0, .1); border: 1px solid rgba(214, 138, 0, .35); color: var(--text); font-weight: 600; }
.banner-sistem.penyelenggaraan { background: rgba(214, 48, 49, .08); border: 1px solid rgba(214, 48, 49, .35); color: var(--text); font-weight: 600; }
.banner-tutup { min-height: 28px; padding: 0 8px; background: transparent; box-shadow: none; color: var(--muted); font-weight: 400; }
.pa-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-main details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.pa-bawah { display: flex; align-items: flex-end; }
/* iPhone: input tarikh/masa mempunyai lebar intrinsik — muatkan dalam grid dua lajur */
.pa-dua > * { min-width: 0; }

/* Kad Jawatan unit: nama + cip di atas; markah dan tindakan di bawah (iPhone), satu baris di desktop. */
.list li.jaw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.jaw-row .meta { min-width: 0; }
.jaw-row .meta strong { overflow-wrap: anywhere; }
.jaw-row .jaw-cip { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.jaw-row .jaw-kawal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jaw-row .jaw-kawal select { flex: 1 1 200px; min-width: 0; }
@media (min-width: 900px) {
  .list li.jaw-row { grid-template-columns: minmax(180px, 1fr) auto 520px; }
  .jaw-row .jaw-kawal { grid-column: auto; justify-content: flex-end; flex-wrap: nowrap; }
  .jaw-row .jaw-kawal select { flex: 0 1 300px; }
}
/* Bar "Tambah jawatan" terapung (sticky) di bawah kad: satu baris padat. Sticky kekal dalam aliran halaman, maka
   pada hujung skrol ia duduk di bawah jawatan terakhir dan tidak menutup sebarang baris. */
.jaw-tambah { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: 6px; align-items: center;
  margin: 14px -8px 0; padding: 6px; border-radius: var(--aksi-radius-pill); background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--aksi-border); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.jaw-tambah input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 14px; border-radius: var(--aksi-radius-pill); }
.jaw-tambah select { flex: 0 0 112px; width: 112px; min-height: 40px; padding: 8px 20px 8px 10px; border-radius: var(--aksi-radius-pill); font-size: .85rem; text-overflow: ellipsis; }
.jaw-tambah button { flex: 0 0 40px; width: 40px; min-height: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 1.35rem; line-height: 1; white-space: nowrap; }
@media (min-width: 900px) {
  .jaw-tambah { margin: 16px 0 0; padding: 8px; }
  .jaw-tambah select { flex-basis: 300px; width: 300px; }
  .jaw-tambah button { flex: 0 0 auto; width: auto; padding: 6px 18px; border-radius: var(--aksi-radius-pill); font-size: 1rem; }
  .jaw-tambah button::after { content: " Tambah"; }
}

/* iOS Safari/PWA zum masuk secara automatik apabila medan dengan huruf < 16px disentuh, dan paparan tidak kembali
   muat skrin. Pada peranti sentuh, semua medan borang sekurang-kurangnya 16px (!important kerana gaya padat seperti
   .jaw-tambah / .filter-row lebih spesifik). */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* Kad / baris boleh ditekan (U.klik): tiada butang Buka / Urus / Edit pada kad — tekan kad untuk membuka. */
.klik { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.klik:focus-visible { outline: 3px solid rgba(98, 71, 230, .45); outline-offset: 2px; }
.list li.klik { position: relative; padding-right: 26px; border-radius: var(--aksi-radius-sm); transition: background var(--aksi-dur-fast); }
.list li.klik::after { content: "›"; position: absolute; right: 6px; top: 50%; transform: translateY(-52%); font-size: 1.4rem; line-height: 1; color: var(--muted); }
.list li.klik:hover { background: rgba(33, 82, 222, .05); }
.list li.klik:active { background: rgba(33, 82, 222, .09); }
.ach-card.klik { transition: transform var(--aksi-dur-fast), box-shadow var(--aksi-dur-fast); }
.ach-card.klik:hover { box-shadow: var(--aksi-shadow-lift); }
.ach-card.klik:active { transform: scale(.985); }
/* Butang mata pada setiap ruang password (app.js pasangMata). */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap:has(> input[hidden]) { display: none; }
.pw-wrap > input { padding-right: 50px; }
.pw-wrap .pw-mata { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 42px; height: 42px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--muted); }
.pw-wrap .pw-mata:hover, .pw-wrap .pw-mata:active { transform: translateY(-50%); background: rgba(33, 82, 222, .08); color: var(--primary); box-shadow: none; }
.pw-wrap .pw-mata[aria-pressed="true"] { color: var(--primary); }
/* Halaman aktivasi: nama sekolah yang diaktifkan. */
.aktifkan-sekolah { margin: 0 0 4px; padding: 10px 14px; border-radius: var(--aksi-radius-sm); background: rgba(33, 82, 222, .07); font-weight: 700; text-align: center; overflow-wrap: anywhere; }
/* Tab Sijil: baris pilih ahli (label penuh boleh ditekan) + bar "Keluarkan Sijil" terapung (sticky, tidak menindih). */
.list li label.sijil-pilih { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 400; }
.list li label.sijil-pilih .meta { min-width: 0; align-items: flex-start; text-align: left; }
.list li label.sijil-pilih .meta strong { overflow-wrap: anywhere; }
.sijil-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; display: flex; justify-content: flex-end; margin: 12px -8px 0;
  padding: 6px; border-radius: var(--aksi-radius-pill); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--aksi-border); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.sijil-bar button { width: 100%; min-height: 44px; }
@media (min-width: 900px) { .sijil-bar { margin: 16px 0 0; } .sijil-bar button { width: auto; } }
/* Pratonton imej tandatangan (TETAPAN → Sijil). */
.ttd-pratonton { display: grid; place-items: center; min-height: 90px; max-width: 320px; padding: 10px; border-radius: var(--aksi-radius-sm); background: #fff; border: 1px dashed var(--border); }
.ttd-pratonton img { max-width: 100%; max-height: 110px; object-fit: contain; }
/* Butiran pencapaian dalam dialog. */
.ach-butiran { box-shadow: none; }
.ach-butiran h3 { margin-top: 6px; font-size: .95rem; }
.ach-senarai { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.ach-senarai li { overflow-wrap: anywhere; }

/* Wizard dikunci (Drive wajib): butang Log Keluar ringkas di kepala. */
.sheet-head .keluar-btn { white-space: nowrap; flex: none; min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* Sijil: pilihan jenis / orientasi (segmen) + grid templat bergambar. */
.seg.seg-sijil { align-self: flex-start; }
.seg.seg-sijil span { min-width: 104px; padding: 0 14px; }
.seg.seg-sijil input:checked + span { background: var(--primary); color: var(--primary-text, #fff); }
.templat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.templat-pilih { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; min-height: 0; background: #fff; color: var(--text); border: 2px solid var(--border); border-radius: 12px; box-shadow: none; font-weight: 700; }
.templat-pilih img { width: 100%; aspect-ratio: 1.414; object-fit: contain; border-radius: 6px; background: #f3f4f6; }
.templat-pilih.potret img { aspect-ratio: .707; max-height: 190px; }
.templat-pilih[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
@media (min-width: 720px) { .templat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Menu SIJIL: langkah bernombor, bar tindakan dua butang, pratonton dengan zum. */
.sijil-langkah > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; margin: 0; }
.langkah-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .85rem; flex: none; }
.sijil-bar { gap: 8px; }
.sijil-bar button.secondary { flex: 0 0 auto; width: auto; padding: 0 18px; }
.sijil-bar button:not(.secondary) { flex: 1 1 auto; }
dialog.sheet.pratonton-sijil { width: min(1100px, calc(100vw - 16px)); height: calc(100dvh - 16px); max-height: none; }
dialog.pratonton-sijil .sheet-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pratonton-alat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pratonton-alat .spacer { flex: 1 1 auto; }
.pratonton-alat .nama { flex: 1 1 100%; font-weight: 700; color: var(--text); }
.pratonton-alat .icon-btn { font-size: 1.3rem; }
.zoom-label { min-width: 48px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pratonton-skrin { flex: none; height: max(240px, calc(100dvh - 300px)); overflow: auto; -webkit-overflow-scrolling: touch; background: #e5e7eb; border-radius: 10px; padding: 10px; }
.pratonton-skrin img { display: block; margin: 0 auto; max-width: none; height: auto; box-shadow: 0 4px 18px rgba(15, 23, 42, .18); background: #fff; }
.sijil-langkah .filter-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sijil-langkah .filter-row select { width: 100%; }
@media (min-width: 560px) { .sijil-langkah .filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seg.seg-sijil span { min-width: 0; }
.sijil-langkah > .seg.seg-sijil { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; max-width: 480px; }
/* Penapis (Carian / Sijil): bertindan di telefon supaya "Semua kelas / unit / jantina" tidak terpotong. */
@media (max-width: 559px) { .filter-row { grid-template-columns: 1fr; } .filter-row select { width: 100%; } }

/* ===== UTAMA: papan pemuka analisis (analisis.js) — panduan dataviz: satu siri biru, grid halus, status = ikon + label. */
#analisis-utama { --an-biru: #0071e3; --an-biru-sisi: #0053a8; --an-biru-atas: #4c9ef0; --an-trek: #cde2fb; --an-grid: #d9dde6; --an-paksi: #c3c2b7; --an-tik: #6b6a65; margin-top: 8px; }
#analisis-utama:empty { display: none; }
/* Kad hero gelap dengan gelang 3D */
.card.an-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; overflow: hidden; position: relative; border: 0;
  background: radial-gradient(90% 120% at 95% 5%, rgba(80, 160, 255, .35) 0%, rgba(80, 160, 255, 0) 60%), linear-gradient(150deg, #0c1f4f 0%, #143582 60%, #1d4aa6 100%);
  box-shadow: 0 20px 40px -22px rgba(10, 26, 64, .7); }
.an-hero-teks { display: grid; gap: 2px; min-width: 0; }
.an-hero .stat-label, .an-hero .stat-nota { color: rgba(214, 226, 255, .72); }
.an-hero-nilai { font-size: 2.75rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.an-gelang { width: 148px; height: auto; display: block; overflow: visible; }
.an-gelang path { fill: none; stroke-width: 15; }
.an-cincin-trek { stroke: rgba(255, 255, 255, .18); }
.an-cincin-trek-sisi { stroke: #10286a; }
.an-cincin-isi { stroke: #5fb0ff; }
.an-cincin-isi-sisi { stroke: #1f64cc; }
.an-bayang { fill: rgba(6, 16, 44, .45); filter: blur(6px); }
.an-cincin-anim { animation: an-cincin 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes an-cincin { from { stroke-dashoffset: var(--p); } to { stroke-dashoffset: 0; } }
@media (max-width: 380px) { .an-gelang { width: 118px; } .an-hero-nilai { font-size: 2.5rem; } }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Jubin: kad putih bersih, timbul sedikit bila dihover */
.stat-tile { display: grid; gap: 2px; align-content: start; text-align: left; padding: 14px 16px; border-radius: 18px; color: var(--text); min-height: 0; font-weight: 400;
  background: #fff; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .04);
  transition: transform .2s ease, box-shadow .2s ease; }
button.stat-tile, button.stat-tile:hover { cursor: pointer; background: #fff; color: var(--text); }
button.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 32px rgba(0, 0, 0, .08); }
button.stat-tile:active { transform: scale(.98); }
.stat-label { font-size: .78rem; font-weight: 500; color: var(--muted); }
.stat-nilai { font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-nota { font-size: .78rem; color: var(--muted); }
.an-kad h2 { font-size: 1rem; font-weight: 600; margin: 0; }
/* Meter tiub kaca 3D */
.an-meter { position: relative; height: 10px; border-radius: 999px; overflow: hidden; margin-top: 5px;
  background: linear-gradient(180deg, #e3e3e8 0%, #f2f2f5 55%, #e6e6eb 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.an-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--an-biru-atas) 0%, var(--an-biru) 45%, var(--an-biru-sisi) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
/* Liputan: silinder kaca 3D */
.an-liputan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; }
.an-liputan-sel { display: grid; justify-items: center; align-content: start; gap: 1px; text-align: center; min-width: 0; }
.an-silinder { width: 100%; max-width: 72px; height: auto; display: block; overflow: visible; margin-bottom: 4px; }
.an-kaca { stroke: #d2d2d7; stroke-width: .8; }
.an-kaca-dalam { fill: #ececf0; }
.an-bibir { fill: none; stroke: #c7c7cc; stroke-width: 1; }
.an-cecair-atas { stroke: rgba(255, 255, 255, .55); stroke-width: .8; }
.an-liputan-nilai { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.an-liputan-nama { font-size: .78rem; line-height: 1.2; }
.an-liputan-sel small { font-size: .72rem; }
.an-carta { position: relative; max-width: 560px; }
.an-svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-grid { fill: none; stroke: var(--an-grid); stroke-width: 1; }
.an-grid-halus { stroke-dasharray: 2 3; }
.an-dinding { fill: #f7f7f9; }
.an-dinding-kiri { fill: #ececf0; }
.an-lantai { fill: #e3e3e8; }
.an-teks { fill: var(--text); font-size: 10px; font-family: inherit; }
/* Muka bentuk 3D: hadapan = biru utama, sisi = lebih gelap, atas = lebih cerah (satu keluarga warna). */
.an-3d-depan { fill: var(--an-biru); }
.an-3d-sisi { fill: var(--an-biru-sisi); }
.an-3d-atas { fill: var(--an-biru-atas); }
.an-trek3d .an-3d-depan { fill: #ececf0; }
.an-trek3d .an-3d-sisi { fill: #dcdce1; }
.an-trek3d .an-3d-atas { fill: #f5f5f7; }
.an-tumbuh { transform-box: fill-box; transform-origin: 50% 100%; animation: an-tumbuh .8s cubic-bezier(.2, .7, .2, 1) both; }
.an-tumbuh-x { transform-box: fill-box; transform-origin: 0 50%; animation: an-tumbuh-x .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes an-tumbuh { from { transform: scaleY(0); } }
@keyframes an-tumbuh-x { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .an-tumbuh, .an-tumbuh-x, .an-cincin-anim { animation: none; } }
.an-paksi { stroke: var(--an-paksi); stroke-width: 1; }
.an-tik { fill: var(--an-tik); font-size: 9.5px; font-family: inherit; }
.an-label { fill: var(--text); font-size: 10px; font-weight: 700; font-family: inherit; }
.an-bar .an-tumbuh { transition: opacity .12s; }
.an-bar .an-hit { fill: transparent; }
.an-bar:hover .an-tumbuh, .an-bar:focus .an-tumbuh { opacity: .8; }
.an-bar:focus { outline: none; }
.an-bar:focus-visible .an-hit { stroke: var(--an-biru); stroke-width: 1.5; }
.an-tip { position: absolute; z-index: 3; display: grid; gap: 1px; max-width: 240px; padding: 7px 10px; border-radius: 10px; background: linear-gradient(150deg, #0c1f4f 0%, #1a4296 100%); color: #fff; font-size: .78rem; pointer-events: none; box-shadow: 0 6px 18px rgba(10, 26, 64, .3); }
.an-tip strong { font-size: .95rem; }
.an-tip span { color: rgba(214, 226, 255, .8); }
.an-jadual summary { cursor: pointer; font-size: .85rem; color: var(--primary); }
.an-jadual table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.an-jadual th, .an-jadual td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.list li.an-unit { flex-wrap: nowrap; }
.an-unit .meta { flex: 1 1 auto; min-width: 0; }
.an-unit .an-meter { max-width: 260px; }
.an-kadar { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.an-ikon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; font-size: .85rem; flex: none; }
.an-ikon-amaran { background: #fab219; color: #4a3300; }
.an-ikon-baik { background: #0ca30c; color: #fff; }
.an-perhatian li { gap: 10px; flex-wrap: nowrap; }
.an-perhatian li .meta { flex: 1 1 auto; min-width: 0; }
.an-baik { display: flex; align-items: center; gap: 10px; margin: 0; }