:root {
  --brand: #0C7235; --brand-dk: #0A4F27; --brand-ink: #083D1E; --brand-tint: #E8F3EC; --brand-tint2: #D2E8D9;
  --brand-btn: #0C7235; --brand-btn-h: #0A4F27; --on-brand: #FFFFFF; --focus: #0C7235; --gold: #FFCB08; --on-gold: #3D2E00;
  --bg: #F2F5F3; --surface: #FFFFFF; --surface-2: #F8FAF9; --line: #D9E2DC; --line-2: #E8EEEA; --line-ctl: #7E8E84;
  --hover: #EEF3F0; --unread: #F5FAF6; --ink: #15201A; --ink-2: #435248; --ink-3: #5E6D63; --ok: #0CA30C; --ok-bg: #E2F3E4;
  --ok-tx: #0B5A1F; --warn: #FAB219; --warn-bg: #FFF2CF; --warn-tx: #6E4B00; --bad: #D03B3B; --bad-bg: #FBE5E3;
  --bad-tx: #9E2722; --bad-solid: #C93A34; --on-bad: #FFFFFF; --info-bg: #E3EDF8; --info-tx: #1B4C86; --violet-bg: #F1ECFA;
  --violet-tx: #54348F; --indigo-bg: #E5E7F6; --indigo-tx: #303A8C; --toast-bg: #15201A; --toast-ink: #FFFFFF;
  --toast-act: #FFCB08; --peta-0: #EEF2EF; --peta-1: #D2E8D9; --peta-2: #9CCBAB; --peta-3: #4E9A63; --peta-4: #0C7235;
  --pos-0: #E3ECE6; --pos-1: #B9D7C3; --pos-2: #86BC98; --pos-3: #4E9A63; --pos-4: #1F7A41; --pos-5: #0A4F27;
  --shell-bg: #0A4F27; --shell-ink: #CFE6D6; --shell-ink-hi: #FFFFFF; --shell-dim: #B9D8C3; --shell-mint: #FFFFFF;
  --shell-focus: #FFCB08; --band-0: #0A4F27; --band-1: #0E6F37; --band-ink: #FFFFFF; --band-ink-2: #E6F4EA;
  --band-ink-3: #D9ECDF; --band-link: #FFFFFF;
  --shell-line: rgba(255, 255, 255, .1); --shell-hover: rgba(255, 255, 255, .07); --shell-act: rgba(255, 255, 255, .11);
  --scrim: rgba(6, 14, 10, .5);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586A5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --r: 12px; --r-sm: 8px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --shadow: 0 1px 2px rgba(10, 40, 20, .04), 0 4px 16px rgba(10, 40, 20, .05);
  --shadow-pop: 0 12px 32px rgba(10, 40, 20, .16);
  color-scheme: light;
}
/* Mode gelap: mengikuti sistem, kecuali dipaksa terang; tombol tema memasang data-theme. Hanya di layar, jadi cetak tetap terang. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #52B87D; --brand-ink: #C7EBD6; --brand-tint: #16301F; --brand-tint2: #1F4A31; --brand-btn: #0E7A39;
    --brand-btn-h: #0B6430; --focus: #7BD39F; --bg: #121714; --surface: #1A201C; --surface-2: #1F2722; --line-ctl: #71847A;
    --hover: #242D27; --unread: #17271E; --ink: #E8EFEA; --ink-2: #BCC9C0; --ink-3: #94A59B; --ok: #3FAE72; --ok-bg: #17301F;
    --ok-tx: #8EDDAE; --warn: #E3AE2E; --warn-bg: #3A2E10; --warn-tx: #F6D178; --bad: #E5645C; --bad-bg: #3C1D1B;
    --bad-tx: #FFA39C; --info-bg: #16293F; --info-tx: #98C5F3; --violet-bg: #2B2243; --violet-tx: #CDB9F5;
    --indigo-bg: #1F2447; --indigo-tx: #B4BCF4; --toast-bg: #E8EFEA; --toast-ink: #14201A; --toast-act: #0A4F27;
    --peta-0: #242D27; --peta-1: #1F4A31; --peta-2: #2F7D52; --peta-3: #4EA374; --peta-4: #8EDDAE; --pos-0: #2A332D;
    --pos-1: #1F4A31; --pos-2: #2F7D52; --pos-3: #3E9A66; --pos-4: #5CC184; --pos-5: #8EDDAE; --shell-bg: #082E19; --band-0: #083D1E; --band-1: #0B5E2E;
    --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .05);
    --scrim: rgba(0, 0, 0, .6);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A59B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
@media screen {
  :root[data-theme="dark"] {
    --brand: #52B87D; --brand-ink: #C7EBD6; --brand-tint: #16301F; --brand-tint2: #1F4A31; --brand-btn: #0E7A39;
    --brand-btn-h: #0B6430; --focus: #7BD39F; --bg: #121714; --surface: #1A201C; --surface-2: #1F2722; --line-ctl: #71847A;
    --hover: #242D27; --unread: #17271E; --ink: #E8EFEA; --ink-2: #BCC9C0; --ink-3: #94A59B; --ok: #3FAE72; --ok-bg: #17301F;
    --ok-tx: #8EDDAE; --warn: #E3AE2E; --warn-bg: #3A2E10; --warn-tx: #F6D178; --bad: #E5645C; --bad-bg: #3C1D1B;
    --bad-tx: #FFA39C; --info-bg: #16293F; --info-tx: #98C5F3; --violet-bg: #2B2243; --violet-tx: #CDB9F5;
    --indigo-bg: #1F2447; --indigo-tx: #B4BCF4; --toast-bg: #E8EFEA; --toast-ink: #14201A; --toast-act: #0A4F27;
    --peta-0: #242D27; --peta-1: #1F4A31; --peta-2: #2F7D52; --peta-3: #4EA374; --peta-4: #8EDDAE; --pos-0: #2A332D;
    --pos-1: #1F4A31; --pos-2: #2F7D52; --pos-3: #3E9A66; --pos-4: #5CC184; --pos-5: #8EDDAE; --shell-bg: #082E19; --band-0: #083D1E; --band-1: #0B5E2E;
    --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .05);
    --scrim: rgba(0, 0, 0, .6);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A59B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
img { display: block; }
.i { flex: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius: var(--r-sm); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
/* Nomor register memakai huruf biasa tebal 600 dengan angka lebar tetap; monospace hanya untuk kode teknis */
.mono { font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.kunci-mfa, .kode-pemulihan, .drive-path, .mono.teknis { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tombol dan isian */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink); touch-action: manipulation; }
.btn:hover { background: var(--hover); border-color: var(--line-ctl); text-decoration: none; }
.btn.pri { background: var(--brand-btn); border-color: var(--brand-btn); color: var(--on-brand); }
.btn.pri:hover { background: var(--brand-btn-h); border-color: var(--brand-btn-h); }
.btn.danger { color: var(--bad-tx); }
.btn.danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--hover); border-color: transparent; }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.mati { opacity: .45; pointer-events: none; cursor: not-allowed; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.kb-clip:has(input:disabled), .kb-send:disabled, .kb-topik button:disabled, .sugg button:disabled, .linkbtn:disabled { opacity: .5; cursor: not-allowed; }
.kb-clip:has(input:disabled) { pointer-events: none; }
.btn.full { width: 100%; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--ink-2); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-ctl); border-radius: var(--r-sm); min-height: 36px; padding: 0 10px; width: 100%; }
/* Pilihan kustom: panah bawaan browser diganti chevron tipis (data URI SVG, diizinkan img-src 'self' data:), tinggi dan radius sama dengan isian */
select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; padding-right: 36px; background-color: var(--surface); background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; text-overflow: ellipsis; cursor: pointer; }
select:disabled { cursor: not-allowed; }
select[multiple], select[size] { padding: 4px; }
textarea { padding: 10px; line-height: 1.55; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--brand); flex: none; }
input[type="date"], input[type="time"] { width: auto; }
.chk { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; cursor: pointer; min-height: 28px; color: var(--ink); }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row .f { flex: 1 1 240px; }
.num-in { width: 84px; text-align: right; }
/* Kotak angka di bawah keterangan saklar notifikasi (prototipe memakai style langsung) */
.angka-saklar { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.t input, .t select { min-height: 32px; }
.form { display: grid; gap: 14px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.err { color: var(--bad-tx); font-size: 13px; min-height: 1em; }

/* Pil status: hanya teks berwarna, tanpa latar dan bingkai (putusan pemilik 5 Nov 2026) */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink-2); line-height: 1.3; }
.pill.ok { color: var(--ok-tx); }
.pill.warn { color: var(--warn-tx); }
.pill.bad { color: var(--bad-tx); }
.pill.info { color: var(--info-tx); }
.pill.brand { color: var(--brand); }
.pill.line { color: var(--ink-3); }
.pill .i { width: 14px; height: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.info { background: var(--info-tx); }
/* Dijeda (PD-29, KPI-05): warna garis seperti pill line */
.dot.line { background: var(--line-2); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 650; cursor: pointer; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.list li:last-child { border-bottom: 0; }
.list a { display: grid; gap: 1px; min-width: 0; color: var(--ink); text-decoration: none; }
.list a:hover b { color: var(--brand); }
.list b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list small { color: var(--ink-3); font-size: 12px; }
.list li > div:first-child { flex: 1; }
.list .acts { flex-wrap: nowrap; }
.list .mono { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.panel-f { padding: 10px 16px; border-top: 1px solid var(--line-2); font-size: 13px; font-weight: 600; }

/* Kerangka */
.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100dvh; background: var(--shell-bg); color: var(--shell-ink); box-shadow: 1px 0 0 var(--shell-line); display: flex; flex-direction: column; z-index: 30; }
.side .brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; flex: none; box-shadow: 0 1px 0 var(--shell-line); }
.side .brand img { border-radius: 6px; }
.side .brand b { display: block; font-size: 15px; font-weight: 700; color: var(--shell-ink-hi); }
.side .brand span { display: block; font-size: 12px; color: var(--shell-dim); }
.nav { display: grid; gap: 2px; padding: 14px 10px 8px; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); color: var(--shell-ink); font-weight: 500; text-decoration: none; }
.nav a .i, .nav-kepala > .i { color: var(--shell-dim); stroke-width: 1.6; }
.side :focus-visible { outline-color: var(--shell-focus); }
.nav a:hover { background: var(--shell-hover); color: var(--shell-ink-hi); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--shell-act); color: var(--shell-mint); font-weight: 600; box-shadow: inset 3px 0 0 var(--shell-focus); }
.nav a[aria-current="page"] .i { color: var(--shell-mint); }
.nav .cnt { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; flex: none; }
/* Nama menu selalu satu baris (putusan pemilik 5 Nov 2026); bila tetap tidak muat, dipotong dengan elipsis, tidak terlipat */
.nav a > span:not(.cnt), .nav-kepala > span:not(.cnt):not(.nav-panah) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a > .i, .nav-kepala > .i, .nav-panah { flex: none; }
/* Pemisah di atas grup Sistem dihapus (putusan pemilik 3 Nov 2026); elemennya tetap di DOM tetapi tidak ikut tata letak, supaya
   jarak Laporan ke Sistem sama dengan jarak antarmenu lain (4 Nov 2026) */
.nav-sep { display: none; }

.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: 56px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line); display: flex; align-items: center; gap: 10px; padding: 0 24px; }


.top .icon-btn { color: var(--ink-2); width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.top .only-m, .top .only-d { margin-right: 4px; }
.top .icon-btn:hover { background: var(--hover); color: var(--ink); }
.search { position: relative; flex: 1; max-width: 460px; }
.search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { padding-left: 36px; background: var(--surface-2); height: 38px; }


.top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
.badge-n { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad-solid); color: var(--on-bad); font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.me { display: flex; align-items: center; gap: 8px; height: 40px; border: 1px solid var(--line); background: transparent; padding: 0 10px 0 6px; border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.me:hover { background: var(--hover); }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint2); color: var(--brand-ink); font-weight: 700; font-size: 11px; flex: none; }
.me b { display: block; font-size: 13px; font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.me .who { display: block; min-width: 0; line-height: 1.25; }
.me .who span { display: block; font-size: 11.5px; color: var(--ink-3); }
.pop { position: absolute; top: 50px; right: 0; width: min(380px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); z-index: 40; overflow: hidden; }
.pop-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.pop-list { max-height: 420px; overflow-y: auto; }
.pop.akun { width: 280px; }
.akun-kepala { display: grid; gap: 4px; }
.akun-aksi { padding: 0 16px 16px; }
.akun-kepala + .pop-item { border-top: 1px solid var(--line-2); }
.pop-item + .akun-aksi { padding-top: 12px; }
.pop-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); color: var(--ink); text-decoration: none; }
.pop-item:hover { background: var(--surface-2); text-decoration: none; }
.pop-item.unread { background: var(--unread); }
/* Baris notifikasi di popover lonceng: tautan butir dan tombol hapus kecil di kanan (putusan pemilik 3 Nov 2026) */
.pop-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-2); }
.pop-row .pop-item { flex: 1; min-width: 0; border-bottom: 0; }
.pop-row .pop-item.unread { background: transparent; }
.pop-row:has(> .pop-item.unread) { background: var(--unread); }
.pop-hapus { display: flex; }
.pop-x { align-self: flex-start; display: grid; place-items: center; width: 28px; height: 28px; margin: 8px 8px 0 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; }
.pop-x:hover { background: var(--hover); color: var(--bad-tx); }
.pop-h .acts { gap: 4px; }
.pop-item .dot { margin-top: 7px; }
.pop-item p { font-size: 13.5px; }
.pop-item small { color: var(--ink-3); font-size: 12px; }
.page { padding: 28px 32px; width: 100%; max-width: 1440px; margin: 0 auto; outline: none; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-h p { color: var(--ink-3); margin-top: 4px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Panel dan grid */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 8px; flex-wrap: wrap; }
.panel-h .sub { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.panel-b { padding: 8px 16px 16px; }
/* Bagian panel kedua sesudah form-row, pengganti style padding-top:0 prototipe (CSP) */
.panel-b.sambung { padding-top: 0; }
.grid { display: grid; gap: 20px; }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g-lap { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.stack-16 > * + * { margin-top: 20px; }
/* T2-14: pengganti gaya inline prototipe di tab Standar batas waktu dan Persyaratan dokumen */
.stack-12 > * + * { margin-top: 12px; }
.mb-14 { margin-bottom: 14px; }
.pt-10 { padding-top: 10px; }
.mt-6 { margin-top: 6px; }
.t .syarat-nama { min-width: 200px; width: 100%; }
.t .syarat-kelas { max-width: 240px; }
.t .syarat-akses { min-width: 116px; }
/* T3-15: fase/syarat dan dasar aturan tetap terbaca saat kolom desktop disembunyikan. */
.periksa-rincian { display: none; }
.mb-16 { margin-bottom: 20px; }
/* T2-19: jarak panel Pekerjaan saya (prototipe panelTPA) */
.mt-16 { margin-top: 16px; }

/* Angka utama */
.hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 20px; margin-bottom: 20px; }
/* Kartu Ketepatan waktu: gradasi hijau seperti versi lama. Token dipasang ulang di dalamnya supaya teks, tautan, pil, dan meter
   memakai nilai terang di atas hijau (tautan putih bergaris bawah, meter emas) dengan kontras AA. */
.hero-fig {
  color: var(--band-ink); border: 0;
  --ink: var(--band-ink); --ink-2: var(--band-ink-2); --ink-3: var(--band-ink-3); --brand: var(--band-link); --focus: var(--gold); --brand-ink: #FFFFFF;
  --brand-tint: rgba(255, 255, 255, .12); --brand-tint2: rgba(255, 255, 255, .18); --hover: rgba(255, 255, 255, .12); --line-ctl: #A9CDB6;
  padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: linear-gradient(160deg, var(--band-1), var(--band-0));
}
.hero-fig a:not(.btn) { text-decoration: underline; }
.hero-fig .pill { color: var(--band-ink); }
.hero-fig .pill.warn, .hero-fig .pill.bad { color: var(--gold); }
.hero-fig .l { color: var(--band-ink-3); font-weight: 600; font-size: 13px; }
.hero-fig .v { font-size: 56px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--band-ink); }
.hero-fig .v small { font-size: 22px; font-weight: 600; letter-spacing: 0; margin-left: 2px; color: var(--band-ink-2); }
/* Kepala dan nilai Ketepatan waktu (T2-13): pengganti gaya inline dua div hero-fig prototipe (CSP) */
.hero-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; }
.hero-nilai { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--brand-tint2); }
.meter i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.hero-fig .meter i { background: var(--gold); }
.hero-fig .meter .tgt { background: var(--band-ink); }
.meter .tgt { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Kartu KPI di dalam panel: satu permukaan, sel dipisah garis tipis (sudut atas dan kiri tiap sel; tepi luar terpotong overflow) */
.panel.kpis { gap: 0; overflow: hidden; }

.kpi { padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-sm); display: grid; gap: 4px; align-content: start; text-decoration: none; color: inherit; }
.panel.kpis .kpi { padding: 20px 24px; background: transparent; border-radius: 0; box-shadow: -1px -1px 0 0 var(--line-2); }
a.kpi:hover { background: var(--hover); text-decoration: none; }


.kpi .l { font-size: 13px; color: var(--ink-2); font-weight: 600; display: flex; align-items: flex-start; gap: 7px; }
/* Titik status sejajar baris pertama label, juga saat label terlipat beberapa baris */
.kpi .l .dot { margin-top: 5px; }
.kpi .v { color: var(--ink); font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12.5px; color: var(--ink-3); }

/* Pantauan asisten */
.brief { display: flex; gap: 14px; padding: 16px 20px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.brief ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.brief h2 { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ai-av { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-dk); color: var(--gold); display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; flex: none; }

/* Tabel */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t th { text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-3); padding: 10px 16px; border-bottom: 1px solid var(--line); background: transparent; white-space: nowrap; }
.t td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; }
.t th.r, .t td.r { text-align: right; }
.t td.r { font-variant-numeric: tabular-nums; }
.t tr.go { cursor: pointer; }
.t tr.go:hover td { background: var(--hover); }
.t .ttl { font-weight: 600; color: var(--ink); }
.t .ttl:hover { color: var(--brand); }
.t .sub { color: var(--ink-3); font-size: 12.5px; }
.t .mono { white-space: nowrap; }
.t td a.mono { color: var(--ink); }
.t td a.mono:hover { color: var(--brand); }
.empty { padding: 36px 16px; text-align: center; color: var(--ink-3); display: grid; gap: 10px; justify-items: center; }
.empty b { color: var(--ink); font-size: 14.5px; }

/* SLA */
.sla { display: grid; gap: 6px; min-width: 110px; justify-items: start; }
.slabar { height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; width: 110px; }
.slabar i { display: block; height: 100%; border-radius: 2px; }
.slabar i.ok { background: var(--ok); } .slabar i.warn { background: var(--warn); } .slabar i.bad { background: var(--bad); }
.stackbar { display: flex; gap: 2px; height: 14px; min-width: 160px; }
.stackbar i { display: block; height: 100%; min-width: 4px; }
.stackbar i:first-child { border-radius: 4px 0 0 4px; }
.stackbar i:last-child { border-radius: 0 4px 4px 0; }
.stackbar i:only-child { border-radius: 4px; }
.stackbar i.ok { background: var(--ok); } .stackbar i.warn { background: var(--warn); } .stackbar i.bad { background: var(--bad); } .stackbar i.line { background: var(--line-2); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Batang horizontal */
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13px; }
.bar .n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .track { height: 12px; }
.bar .track i { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar .track.lite i { background: var(--pos-3); }
.bar .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bars.lbl { gap: 12px; }
.bars.lbl .bar { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 4px; }
.bars.lbl .bar .n { grid-column: 1 / -1; white-space: normal; }

/* Tab dan filter */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button, .tabs a { border: 0; background: transparent; padding: 10px 12px; font-weight: 600; font-size: 13.5px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tabs .c { font-size: 11.5px; background: var(--line-2); color: var(--ink-2); padding: 0 6px; border-radius: 9px; min-width: 20px; text-align: center; }
.tabs [aria-selected="true"] .c, .tabs [aria-current="page"] .c { background: var(--brand-tint); color: var(--brand-ink); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
.filters input[type="search"] { flex: 1 1 220px; width: auto; }
.filters select { width: auto; flex: 0 1 auto; }
.filters label.f { min-width: 0; max-width: 100%; }
.filters label.f select { width: 100%; min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-ctl); border-radius: var(--r-sm); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 0 12px; min-height: 34px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.seg button + button { border-left: 1px solid var(--line-ctl); }
.seg [aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-ink); }

/* Papan */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; padding: 14px; overflow-x: auto; }
.col { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.col h3 { display: flex; justify-content: space-between; padding: 2px 4px 4px; font-size: 13px; }
.card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--line-ctl); text-decoration: none; }
.card b { font-size: 13.5px; font-weight: 600; }
.card .muted { font-size: 12px; }

/* Detail */
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 12px; }
.idline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--bad-bg); color: var(--bad-tx); margin-bottom: 16px; font-size: 13.5px; }
.note.warn { background: var(--warn-bg); color: var(--warn-tx); }
.note.info { background: var(--info-bg); color: var(--info-tx); }
.note.ok { background: var(--ok-bg); color: var(--ok-tx); }
.flow { list-style: none; margin: 0; padding: 4px 0; }
.flow li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; position: relative; align-items: start; }
.flow li::before { content: ''; position: absolute; left: 29px; top: 34px; bottom: -10px; width: 2px; background: var(--line); }
.flow li:last-child::before { display: none; }
.flow li.done::before { background: var(--brand); }
.flow .mk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-ctl); background: var(--surface); color: var(--ink-3); font-size: 12px; font-weight: 700; position: relative; z-index: 1; }
.flow li.done .mk { background: var(--brand-btn); border-color: var(--brand-btn); color: var(--on-brand); }
.flow li.now .mk { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.flow li.now.late .mk { border-color: var(--bad); color: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.flow .nm { font-weight: 600; }
.flow .meta { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.flow .rt { text-align: right; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; padding-top: 4px; }
.flow li.now { background: var(--surface-2); }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.checks li:last-child { border-bottom: 0; }
.checks label { display: flex; gap: 10px; align-items: center; flex: 1 1 200px; min-height: 28px; cursor: pointer; }
.checks input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand); flex: none; }
.checks .file { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; max-width: 100%; overflow: hidden; }
.checks .file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dl.kv { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 9px 14px; margin: 0; font-size: 13.5px; }
dl.kv dt { color: var(--ink-3); }
dl.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.log { list-style: none; margin: 0; padding: 6px 0; }
.log li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 16px; font-size: 13px; }
.log time { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.log b { font-weight: 600; }
.action-box, .kb-actions { display: grid; gap: 8px; }
.aibox { margin: 0 16px 16px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; display: grid; gap: 8px; }
.aibox ul { margin: 0; padding-left: 18px; }

/* Format berkas */
.fmt { display: inline-grid; place-items: center; width: 36px; height: 22px; border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; flex: none; }
.fmt.pdf { background: var(--bad-bg); color: var(--bad-tx); }
.fmt.xlsx { background: var(--ok-bg); color: var(--ok-tx); }
.fmt.docx { background: var(--info-bg); color: var(--info-tx); }
.fmt.jpg { background: var(--violet-bg); color: var(--violet-tx); }

/* Kalender */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal .dh { padding: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal .d { min-height: 112px; padding: 6px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); display: grid; gap: 3px; align-content: start; min-width: 0; }
.cal .d:nth-child(7n) { border-right: 0; }
.cal .d.out { background: var(--surface-2); }
.cal .d.out .dn { color: var(--ink-3); font-weight: 400; }
.cal .d.we { background: var(--surface-2); }
.cal .dn { font-size: 12.5px; font-weight: 600; color: var(--ink-2); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal .d.today .dn { background: var(--brand-btn); color: var(--on-brand); }
.ev { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink); text-decoration: none; overflow: hidden; white-space: nowrap; min-width: 0; }
.ev span { overflow: hidden; text-overflow: ellipsis; }
.ev.agenda { background: var(--info-bg); color: var(--info-tx); }
.ev.libur { background: var(--bad-bg); color: var(--bad-tx); }
.ev:hover { text-decoration: none; filter: brightness(.97); }
.ev .dot { width: 7px; height: 7px; }
.more { font-size: 11.5px; color: var(--ink-3); padding-left: 5px; }
.upc { list-style: none; margin: 0; padding: 0; }
.upc li { padding: 10px 16px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.upc .dd { text-align: center; line-height: 1.1; }
.upc .dd b { display: block; font-size: 18px; }
.upc .dd small { color: var(--ink-3); font-size: 11.5px; }
/* Kalender (T2-11): titik legenda Libur sebagai kelas, karena prototipe memakai style yang dilarang CSP; agenda bertombol
   Ubah tampil sama dengan agenda biasa */
.dot.libur { background: var(--bad-tx); }
button.ev { border: 0; font: inherit; font-size: 11.5px; cursor: pointer; text-align: left; width: 100%; }
.upc .linkbtn { color: inherit; font-weight: inherit; }

/* Asisten */
.chat-wrap { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
.chat { display: flex; flex-direction: column; height: calc(100dvh - 60px - 48px - 70px); min-height: 460px; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 18px 8px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; max-width: 100%; }
.msg .bub { padding: 11px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); max-width: min(720px, 100%); min-width: 0; display: grid; gap: 10px; font-size: 14px; }
.msg .bub-nama { margin-bottom: -6px; font-size: 12.5px; font-weight: 700; color: var(--brand); }
.msg.me { flex-direction: row-reverse; }
/* Kelas .me juga dipakai chip akun di bar atas; baris pesan pengguna tidak boleh ikut berbingkai dan setinggi 40px */
.msg.me { align-items: flex-start; height: auto; padding: 0; border: 0; border-radius: 0; background: none; cursor: auto; }
.msg.me .bub { background: var(--brand-btn); color: var(--on-brand); border-color: var(--brand-btn); }
.msg .bub .t { font-size: 13px; }
.msg .bub pre.draft { margin: 0; white-space: pre-wrap; font: 12.5px/1.6 'IBM Plex Mono', ui-monospace, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.composer { border-top: 1px solid var(--line); padding: 12px; display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { min-height: 44px; max-height: 160px; resize: none; }
.composer .btn { min-height: 44px; }
.sugg { display: grid; gap: 6px; padding: 12px; }
.sugg button { text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 9px 11px; cursor: pointer; font-size: 13px; color: var(--ink); line-height: 1.4; }
.sugg button:hover { border-color: var(--brand); background: var(--brand-tint); }
.policy { width: 100%; border-collapse: collapse; font-size: 13px; }
.policy td { padding: 8px 16px; border-bottom: 1px solid var(--line-2); }
.policy td:last-child { text-align: right; }
.typing { color: var(--ink-3); font-size: 13px; }

/* Laporan */
.tpl { display: grid; gap: 6px; padding: 12px; }
.tpl button { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; }
.tpl button:hover { background: var(--surface-2); }
.tpl button[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand-tint2); }
.tpl b { font-size: 13.5px; }
.tpl span { font-size: 12.5px; color: var(--ink-3); }
.kop { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 3px double var(--ink); margin-bottom: 14px; }
.kop p { font-size: 12px; } .kop b { display: block; font-size: 15px; }

/* Masuk */
.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-brand { background: var(--brand-dk); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: sticky; top: 0; height: 100dvh; align-self: start; overflow: hidden; }
.login-brand::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid rgba(255, 203, 8, .12); }
.logos { display: flex; gap: 14px; align-items: center; }
.logos img { height: 64px; width: auto; }
.org { color: #CFE6D6; font-size: 14px; margin-top: 18px; }
.org b { color: #fff; }
.login-brand h1 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.03em; line-height: 1.02; position: relative; z-index: 1; }
.login-brand h1 span { display: block; margin-top: 10px; font-size: .42em; font-weight: 600; letter-spacing: -.01em; color: #CFE6D6; }
.login-form { position: relative; padding: 48px clamp(20px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: 28px; background: var(--surface); }
.login-tema { position: absolute; top: 16px; right: 16px; }
.login-form form { max-width: 380px; width: 100%; }
/* 16px: Safari iPhone memperbesar halaman saat isian di bawah 16px disentuh, dan halaman tetap besar sesudah masuk */
.login-form input { font-size: 16px; }
.login-form h2 { font-size: 20px; }

/* Dialog dan toast */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); overscroll-behavior: contain; }
dialog.wide { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: var(--scrim); }
.dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dlg-b { padding: 18px; display: grid; gap: 14px; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line-2); flex-wrap: wrap; position: sticky; bottom: 0; background: var(--surface); }
.preview { background: var(--line-2); border-radius: 8px; padding: 18px; display: grid; place-items: center; }
/* Lembar contoh berlatar kertas putih tetap, juga di mode gelap */
.sheet { width: min(100%, 360px); aspect-ratio: 1 / 1.3; background: #fff; color: #14201A; box-shadow: var(--shadow); padding: 22px; display: grid; gap: 8px; align-content: start; }
.sheet i { display: block; height: 7px; border-radius: 3px; background: #E3E8E5; }
.photo { width: min(100%, 420px); aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(160deg, #C9D9CE, #9DB5A6); display: grid; place-items: center; color: #14201A; font-weight: 600; }
.drop { border: 2px dashed var(--line-ctl); border-radius: 10px; padding: 26px; text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--ink-3); cursor: pointer; }
.drop:hover, .drop.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-ink); }
.fields { display: grid; gap: 10px; }
.fields label { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); font-weight: 600; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
#toast div { background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: 8px; font-size: 13.5px; box-shadow: var(--shadow); pointer-events: auto; display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); }
#toast button { background: transparent; border: 0; color: var(--toast-act); font-weight: 700; cursor: pointer; padding: 0; }
#printArea { display: none; }
.denied { max-width: 420px; margin: 60px auto; text-align: center; display: grid; gap: 10px; justify-items: center; }

#drafIsi { font: 12.5px/1.6 'IBM Plex Mono', ui-monospace, monospace; }
/* Proyek, aset, templat */
.meter.sm { height: 6px; width: 150px; max-width: 100%; }
.meter.sm .tgt { top: -3px; bottom: -3px; }
.big { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t tr.grp td { background: var(--surface-2); font-size: 13px; padding: 8px 12px; }
.ai-av.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.gantt { display: grid; gap: 7px; padding: 14px 16px 16px; }
.g-row { display: grid; grid-template-columns: minmax(110px, 210px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; }
.g-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.g-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }
.g-track { position: relative; height: 22px; background: var(--surface-2); border-radius: 4px; }
.g-plan, .g-real { position: absolute; height: 7px; border-radius: 3px; min-width: 3px; }
.g-plan { top: 3px; background: var(--pos-2); }
.g-real { bottom: 3px; background: var(--brand); }
.g-real.late { background: var(--bad); }
.g-now { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.lg { display: inline-block; width: 14px; height: 7px; border-radius: 3px; }
.lg.plan { background: var(--pos-2); } .lg.real { background: var(--brand); } .lg.late { background: var(--bad); } .lg.now { width: 2px; height: 12px; background: var(--ink); }

/* BA TPA */
.filters.bare { padding: 0 0 14px; border: 0; }
.list.wrap b { white-space: normal; }
.kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cols { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 18px; }
.col-b { flex: 1 1 0; min-width: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: end; gap: 4px; }
.col-b i { display: block; width: min(100%, 34px); background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; align-self: end; }
.col-b .v { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.col-b .n { font-size: 11.5px; color: var(--ink-3); }
.col-b:hover i { background: var(--brand-dk); }
.peta-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: start; }
svg.peta { width: 100%; height: auto; display: block; }
svg.peta path { stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }
svg.peta path:hover { stroke: var(--ink); stroke-width: 2; }
svg.peta circle { stroke: var(--surface); stroke-width: 2.5; fill: var(--info-tx); }
svg.peta circle.warn { fill: var(--warn); } svg.peta circle.bad { fill: var(--bad); }
svg.peta a:hover circle { stroke: var(--ink); }
.ba-card .panel-h { padding: 12px 16px; }
.ba-card .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.langkah { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.langkah i { height: 5px; border-radius: 3px; background: var(--line-2); }
.langkah i.on { background: var(--brand); }
/* Tombol di bawah pill dalam sel tabel (register surat keluar) */
.t .acts-sel { margin-top: 6px; gap: 6px; }
/* Langkah pindaian bertanda tangan (prototipe dialogUnggahTtd) */
.langkah-ttd { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.komentar { list-style: none; margin: 0; padding: 0; }
.komentar li { padding: 12px 16px; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; font-size: 13.5px; }
.komentar li:last-child { border-bottom: 0; }
.komentar li.done p { color: var(--ink-3); }
.komentar .c-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.komentar time { color: var(--ink-3); font-size: 12px; margin-left: auto; }
.drive-path { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.drive-list li { padding: 10px 0; }
fieldset.pilih { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
fieldset.pilih legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
input.otp { letter-spacing: .3em; font-size: 18px; }
/* Verifikasi dua langkah (T1-11): kode QR berlatar putih dengan zona tenang, kunci manual, dan daftar kode pemulihan */
.qr { width: 216px; padding: 12px; background: #fff; color: #000; border: 1px solid var(--line); border-radius: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.kunci-mfa { display: block; margin-top: 4px; color: var(--ink); }
.kode-pemulihan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 12px 0 0; padding-left: 22px; }
.kode-pemulihan li { white-space: nowrap; }

/* Pengaturan (T1-14): kelas pengganti gaya inline prototipe vPengaturan, karena CSP melarang atribut style */
.bantu { font-weight: 400; }
.filters .isi-lebar { flex: 1 1 200px; width: auto; }
.filters .err { flex-basis: 100%; }
.daftar-hari { display: grid; gap: 8px; }
.daftar-hari .acts { margin-top: 6px; }
.mx-akses select { width: auto; }
.dlg-f .dlg-kiri { margin-right: auto; }
.baris-cadangan { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Audit log (T1-16): isian tanggal di baris filter selebar isinya, seperti select. Select berisi nama panjang (Pengguna)
   tidak boleh lebih lebar dari panel, supaya halaman tidak bergeser ke samping di HP */
.filters input[type="date"] { width: auto; flex: 0 1 auto; }
.filters select { max-width: 100%; }

/* Dashboard (T1-17): pengganti gaya inline prototipe vDashAdmin. Kartu sistem auto-fit 180 px (juga di HP, seperti gaya inline
   prototipe yang mengalahkan media query), lebar dalam persen bulat untuk batang x-batang (T1-17) dan bar batas waktu x-sla
   (T2-03), dan jarak catatan di bawah batang */
.kpis.lentur { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lebar-0 { width: 0%; } .lebar-1 { width: 1%; } .lebar-2 { width: 2%; } .lebar-3 { width: 3%; } .lebar-4 { width: 4%; }
.lebar-5 { width: 5%; } .lebar-6 { width: 6%; } .lebar-7 { width: 7%; } .lebar-8 { width: 8%; } .lebar-9 { width: 9%; }
.lebar-10 { width: 10%; } .lebar-11 { width: 11%; } .lebar-12 { width: 12%; } .lebar-13 { width: 13%; } .lebar-14 { width: 14%; }
.lebar-15 { width: 15%; } .lebar-16 { width: 16%; } .lebar-17 { width: 17%; } .lebar-18 { width: 18%; } .lebar-19 { width: 19%; }
.lebar-20 { width: 20%; } .lebar-21 { width: 21%; } .lebar-22 { width: 22%; } .lebar-23 { width: 23%; } .lebar-24 { width: 24%; }
.lebar-25 { width: 25%; } .lebar-26 { width: 26%; } .lebar-27 { width: 27%; } .lebar-28 { width: 28%; } .lebar-29 { width: 29%; }
.lebar-30 { width: 30%; } .lebar-31 { width: 31%; } .lebar-32 { width: 32%; } .lebar-33 { width: 33%; } .lebar-34 { width: 34%; }
.lebar-35 { width: 35%; } .lebar-36 { width: 36%; } .lebar-37 { width: 37%; } .lebar-38 { width: 38%; } .lebar-39 { width: 39%; }
.lebar-40 { width: 40%; } .lebar-41 { width: 41%; } .lebar-42 { width: 42%; } .lebar-43 { width: 43%; } .lebar-44 { width: 44%; }
.lebar-45 { width: 45%; } .lebar-46 { width: 46%; } .lebar-47 { width: 47%; } .lebar-48 { width: 48%; } .lebar-49 { width: 49%; }
.lebar-50 { width: 50%; } .lebar-51 { width: 51%; } .lebar-52 { width: 52%; } .lebar-53 { width: 53%; } .lebar-54 { width: 54%; }
.lebar-55 { width: 55%; } .lebar-56 { width: 56%; } .lebar-57 { width: 57%; } .lebar-58 { width: 58%; } .lebar-59 { width: 59%; }
.lebar-60 { width: 60%; } .lebar-61 { width: 61%; } .lebar-62 { width: 62%; } .lebar-63 { width: 63%; } .lebar-64 { width: 64%; }
.lebar-65 { width: 65%; } .lebar-66 { width: 66%; } .lebar-67 { width: 67%; } .lebar-68 { width: 68%; } .lebar-69 { width: 69%; }
.lebar-70 { width: 70%; } .lebar-71 { width: 71%; } .lebar-72 { width: 72%; } .lebar-73 { width: 73%; } .lebar-74 { width: 74%; }
.lebar-75 { width: 75%; } .lebar-76 { width: 76%; } .lebar-77 { width: 77%; } .lebar-78 { width: 78%; } .lebar-79 { width: 79%; }
.lebar-80 { width: 80%; } .lebar-81 { width: 81%; } .lebar-82 { width: 82%; } .lebar-83 { width: 83%; } .lebar-84 { width: 84%; }
.lebar-85 { width: 85%; } .lebar-86 { width: 86%; } .lebar-87 { width: 87%; } .lebar-88 { width: 88%; } .lebar-89 { width: 89%; }
.lebar-90 { width: 90%; } .lebar-91 { width: 91%; } .lebar-92 { width: 92%; } .lebar-93 { width: 93%; } .lebar-94 { width: 94%; }
.lebar-95 { width: 95%; } .lebar-96 { width: 96%; } .lebar-97 { width: 97%; } .lebar-98 { width: 98%; } .lebar-99 { width: 99%; }
.lebar-100 { width: 100%; }
.mt-10 { margin-top: 10px; }

/* Pekerjaan (T2-07): pengganti gaya inline prototipe vDetail dan gantt. Posisi batang Timeline dalam persen bulat
   (kiri-N, dengan lebar-N di atas), jarak kepala detail, dan legenda Timeline */
.page-h.rapat { margin-bottom: 16px; }
.idline + .asli { margin: -2px 0 8px; }
.gantt .legend { margin-top: 6px; }
.form-catatan { display: grid; gap: 8px; border-bottom: 1px solid var(--line-2); }
.checks li > form { display: contents; }
.page-h p.atas { margin: 0 0 2px; }
.panel > .tabs { padding: 0 10px; margin: 0; }
.col > p.muted { padding: 4px; }
.seg-wadah { display: contents; }
.t td.r .acts { justify-content: flex-end; }
.seg a { background: var(--surface); padding: 0 12px; min-height: 34px; font-weight: 600; font-size: 13px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.seg a + a { border-left: 1px solid var(--line-ctl); }
.seg [aria-current="true"] { background: var(--brand-tint); color: var(--brand-ink); }
.kiri-0 { left: 0%; } .kiri-1 { left: 1%; } .kiri-2 { left: 2%; } .kiri-3 { left: 3%; } .kiri-4 { left: 4%; }
.kiri-5 { left: 5%; } .kiri-6 { left: 6%; } .kiri-7 { left: 7%; } .kiri-8 { left: 8%; } .kiri-9 { left: 9%; }
.kiri-10 { left: 10%; } .kiri-11 { left: 11%; } .kiri-12 { left: 12%; } .kiri-13 { left: 13%; } .kiri-14 { left: 14%; }
.kiri-15 { left: 15%; } .kiri-16 { left: 16%; } .kiri-17 { left: 17%; } .kiri-18 { left: 18%; } .kiri-19 { left: 19%; }
.kiri-20 { left: 20%; } .kiri-21 { left: 21%; } .kiri-22 { left: 22%; } .kiri-23 { left: 23%; } .kiri-24 { left: 24%; }
.kiri-25 { left: 25%; } .kiri-26 { left: 26%; } .kiri-27 { left: 27%; } .kiri-28 { left: 28%; } .kiri-29 { left: 29%; }
.kiri-30 { left: 30%; } .kiri-31 { left: 31%; } .kiri-32 { left: 32%; } .kiri-33 { left: 33%; } .kiri-34 { left: 34%; }
.kiri-35 { left: 35%; } .kiri-36 { left: 36%; } .kiri-37 { left: 37%; } .kiri-38 { left: 38%; } .kiri-39 { left: 39%; }
.kiri-40 { left: 40%; } .kiri-41 { left: 41%; } .kiri-42 { left: 42%; } .kiri-43 { left: 43%; } .kiri-44 { left: 44%; }
.kiri-45 { left: 45%; } .kiri-46 { left: 46%; } .kiri-47 { left: 47%; } .kiri-48 { left: 48%; } .kiri-49 { left: 49%; }
.kiri-50 { left: 50%; } .kiri-51 { left: 51%; } .kiri-52 { left: 52%; } .kiri-53 { left: 53%; } .kiri-54 { left: 54%; }
.kiri-55 { left: 55%; } .kiri-56 { left: 56%; } .kiri-57 { left: 57%; } .kiri-58 { left: 58%; } .kiri-59 { left: 59%; }
.kiri-60 { left: 60%; } .kiri-61 { left: 61%; } .kiri-62 { left: 62%; } .kiri-63 { left: 63%; } .kiri-64 { left: 64%; }
.kiri-65 { left: 65%; } .kiri-66 { left: 66%; } .kiri-67 { left: 67%; } .kiri-68 { left: 68%; } .kiri-69 { left: 69%; }
.kiri-70 { left: 70%; } .kiri-71 { left: 71%; } .kiri-72 { left: 72%; } .kiri-73 { left: 73%; } .kiri-74 { left: 74%; }
.kiri-75 { left: 75%; } .kiri-76 { left: 76%; } .kiri-77 { left: 77%; } .kiri-78 { left: 78%; } .kiri-79 { left: 79%; }
.kiri-80 { left: 80%; } .kiri-81 { left: 81%; } .kiri-82 { left: 82%; } .kiri-83 { left: 83%; } .kiri-84 { left: 84%; }
.kiri-85 { left: 85%; } .kiri-86 { left: 86%; } .kiri-87 { left: 87%; } .kiri-88 { left: 88%; } .kiri-89 { left: 89%; }
.kiri-90 { left: 90%; } .kiri-91 { left: 91%; } .kiri-92 { left: 92%; } .kiri-93 { left: 93%; } .kiri-94 { left: 94%; }
.kiri-95 { left: 95%; } .kiri-96 { left: 96%; } .kiri-97 { left: 97%; } .kiri-98 { left: 98%; } .kiri-99 { left: 99%; }
.kiri-100 { left: 100%; }

/* Kang Bedas: kotak chat mengambang */
.kb-av { color: #fff; }
.kb-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--brand-btn), var(--brand-dk)); box-shadow: 0 0 0 3px var(--surface), 0 10px 28px rgba(8, 61, 30, .35); cursor: pointer; }
.kb-launcher:hover { box-shadow: 0 0 0 3px var(--surface), 0 14px 32px rgba(8, 61, 30, .4); }
.kb-launcher.on { box-shadow: 0 0 0 3px var(--surface), 0 10px 28px rgba(8, 61, 30, .35); }
.kb-launcher.is-drop { transform: scale(1.1); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand), 0 10px 28px rgba(8, 61, 30, .35); }
.kb-box { position: fixed; right: 24px; bottom: 94px; z-index: 45; width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 118px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden; }
.kb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 14px; color: #fff; background: linear-gradient(135deg, var(--brand-dk), var(--brand-btn)); }
.kb-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kb-logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); flex: none; }
.kb-title strong { display: block; font-size: 15px; font-weight: 700; }
.kb-sub { display: block; font-size: 12px; color: #CFE6D6; }
.kb-x { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; flex: none; }
.kb-x:hover { background: rgba(255, 255, 255, .26); }
.kb-msgs { padding: 14px 12px; overflow-y: auto; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.kb-msgs .msg .ai-av { display: none; }
.kb-msgs .msg .bub { max-width: 94%; padding: 10px 12px; gap: 8px; font-size: 13px; line-height: 1.5; background: var(--surface); border-color: var(--line); }
.kb-msgs .msg.me .bub { max-width: 86%; background: var(--brand-btn); border-color: var(--brand-btn); color: var(--on-brand); }
.kb-msgs .t { font-size: 12.5px; }
.kb-msgs .t td, .kb-msgs .t th { padding: 8px 9px; }
.kb-msgs dl.kv { font-size: 12.5px; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); }
.kb-msgs .policy td { padding: 6px 4px; }
.kb-file { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.kb-file small { opacity: .8; }
.kb-kartu { display: grid; gap: 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.kb-kartu:hover { border-color: var(--brand); text-decoration: none; }
.kb-kartu b { font-size: 13px; font-weight: 600; }
.kb-kartu small { color: var(--ink-3); font-size: 12px; }
.kb-quick { padding: 9px 12px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.kb-quick-tg { width: 100%; display: flex; align-items: center; gap: 8px; border: 1px solid var(--brand-tint2); background: var(--brand-tint); color: var(--brand-ink); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.kb-quick-tg .i { margin-left: auto; }
.kb-quick-tg:hover { border-color: var(--brand); }
.kb-quick-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kb-quick-l { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kb-quick-x, .kb-back { border: 0; background: none; color: var(--ink-3); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; padding: 2px; }
.kb-quick-x { margin-left: auto; }
.kb-quick-x:hover, .kb-back:hover { color: var(--brand); }
.kb-topik { display: flex; flex-wrap: wrap; gap: 6px; max-height: 176px; overflow-y: auto; }
.kb-topik button { flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 38px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--brand-ink); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.kb-topik button:hover { border-color: var(--brand); background: var(--brand-tint); }
.kb-topik button .i { color: var(--brand); }
.kb-topik.tanya button { flex-basis: 100%; font-weight: 500; color: var(--ink); min-height: 34px; }
.kb-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-2); background: var(--surface); }
.kb-form input#kbIn { min-height: 40px; }
.kb-clip { position: relative; display: grid; place-items: center; width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; color: var(--brand); background: var(--surface); cursor: pointer; flex: none; }
.kb-clip:hover, .kb-clip:focus-within { border-color: var(--brand); background: var(--brand-tint); }
.kb-clip input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.composer .kb-clip { min-height: 44px; width: 44px; }
.kb-send { width: 40px; border: 0; border-radius: 9px; display: grid; place-items: center; color: var(--on-brand); background: var(--brand-btn); cursor: pointer; }
.kb-send:hover { background: var(--brand-btn-h); }
.chat { position: relative; }
.kb-box.is-drop::after, .chat.is-drop::after { content: 'Lepaskan berkas di sini'; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-tint) 94%, transparent); color: var(--brand-ink); font-weight: 700; font-size: 14px; outline: 3px dashed var(--brand); outline-offset: -8px; border-radius: inherit; pointer-events: none; }
.page { padding-bottom: 96px; }

/* Tanpa animasi (8 Okt 2026, permintaan pemilik): yang diklik atau dibuka langsung tampil, tanpa transisi atau gerakan. */
.card:hover { box-shadow: var(--shadow); }

.only-m { display: none; }
.only-d { display: inline-grid; }
@media (max-width: 1180px) {
  .kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t .hide-m { display: none; }
  .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .peta-wrap { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .g-main { grid-template-columns: minmax(0, 1fr); }
  .chat-wrap { grid-template-columns: minmax(0, 1fr); }
  .chat { height: 70dvh; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; left: 0; top: 0; width: 272px; transform: translateX(-100%); visibility: hidden; }
  .app.open .side { transform: none; visibility: visible; box-shadow: var(--shadow-pop); }
  .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 25; opacity: 0; visibility: hidden; }
  .app.open .scrim { opacity: 1; visibility: visible; }
  .only-m { display: inline-grid; }
  .only-d { display: none; }
  .g-2, .g-3, .g-lap { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-brand { padding: 28px 20px; gap: 22px; position: relative; height: auto; }
  .login-brand h1 { font-size: 34px; }
  .login-brand::after { display: none; }
  .login-form { justify-content: flex-start; }
  .me .who { display: none; }
}
@media (max-width: 640px) {
  .kode-pemulihan { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 16px 16px 88px; }
  .top { padding: 0 10px; gap: 4px; }
  .panel.kpis .kpi { padding: 14px 16px; }
  .kpis, .kpis.four { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-row { grid-template-columns: 96px minmax(0, 1fr); }
  .kpi .v { font-size: 28px; }
  .hero-fig .v { font-size: 44px; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .cal .d { min-height: 58px; padding: 3px; }
  .cal .ev span, .cal .more { display: none; }
  .cal .ev { padding: 2px; background: transparent; }
  .cal .ev.agenda .dot { background: var(--info-tx); }
  .fields label { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bar { grid-template-columns: 96px minmax(0, 1fr) 44px; }
  .flow li { grid-template-columns: 28px minmax(0, 1fr); }
  .flow .rt { grid-column: 2; text-align: left; padding-top: 0; }
  .log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .t .hide-s { display: none; }
  .periksa-rincian { display: block; }
  .kb-launcher { right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .kb-box { right: 8px; left: 8px; bottom: 78px; width: auto; height: min(620px, calc(100dvh - 92px)); border-radius: 12px; }
  .kb-topik button { flex-basis: 100%; }
  .kpis.six { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols { gap: 3px; }
  .col-b .v { font-size: 10.5px; }
}
/* Paket pekerjaan, pemeriksaan, kiriman WhatsApp (revisi Oktober 2026) */
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kurva { width: 100%; height: auto; display: block; }
.kurva .grid { stroke: var(--line-2); stroke-width: 1; }
.kurva .ax { font-size: 11px; fill: var(--ink-3); font-family: inherit; }
.kurva .mark { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.kurva .mark.now { stroke: var(--ink-3); }
.kurva .mark.end { stroke: var(--warn); stroke-width: 1.5; }
.kurva .mark.ta { stroke: var(--bad); stroke-width: 1.5; }
.kurva .rencana { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 4; }
.kurva .realisasi { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.kurva .proyeksi { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 2 4; }
.lg.proy { height: 0; border-top: 2px dotted var(--bad); border-radius: 0; }
dl.kv.four { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
.adm + .adm { margin-top: 16px; }
.adm-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.adm-l { list-style: none; margin: 0; padding: 0; }
.adm-l li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.adm-l li:last-child { border-bottom: 0; }
.adm-l .file { display: inline-flex; gap: 6px; align-items: center; min-width: 0; color: inherit; }
.adm-l .file span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-l .pill { justify-self: end; }
table.t.mx th, table.t.mx td { padding: 6px; text-align: center; font-size: 12.5px; }
table.t.mx th:first-child, table.t.mx td:first-child { text-align: left; }
table.t.mx td.y { color: var(--ok-tx); background: var(--ok-bg); font-weight: 700; }
table.t.mx td.n { color: var(--bad-tx); background: var(--bad-bg); font-weight: 700; }
table.t.mx td.na { color: var(--ink-3); }
.wa { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 8px; background: #EFEAE2; color: #14201A; }
.wa .msg .bub { background: #fff; color: #14201A; gap: 4px; font-size: 13.5px; }
.wa .msg.me .bub { background: #DCF8C6; color: #14201A; border-color: #C8E9B0; }
ul.aturan { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; }
.fmt.dwg { background: var(--warn-bg); color: var(--warn-tx); }
.fmt.mp4 { background: var(--indigo-bg); color: var(--indigo-tx); }
.preview { position: relative; overflow: hidden; }
.wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transform: rotate(-24deg); color: rgba(158, 39, 34, .24); font-weight: 700; font-size: 17px; white-space: nowrap; }
.photo.video { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: linear-gradient(160deg, #3B4A41, #1F2A24); }
.sheet.dwg { background-color: #fff; background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 16px 16px; }
svg.peta circle.ok { fill: var(--ok); } svg.peta circle.info { fill: var(--info-tx); }
@media (max-width: 1180px) { .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kpis.five { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  dl.kv.four { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); }
  .adm-l li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .adm-l .pill { justify-self: start; }
  .list.wrap li { flex-wrap: wrap; row-gap: 6px; }
}

@media print {
  body { background: #fff; background-image: none; color: #000; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block; padding: 0; font-size: 11pt; }
  #printArea table.t { font-size: 10pt; }
  #printArea .t th { background: #eee; }
}

/* Revisi 9 Okt 2026 (rapat 8 Okt): submenu Pekerjaan, KPI dengan rincian per jenis */
.nav-sub { display: grid; grid-template-rows: 1fr; }
.nav-sub-in { display: grid; gap: 1px; min-height: 0; overflow: hidden; }
.nav-sub-in > :first-child { margin-top: 1px; }
.nav-sub-in > :last-child { margin-bottom: 4px; }
.nav-sub a:focus-visible { outline-offset: -2px; }
.nav-sub[hidden] { display: grid !important; grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.nav-sub a { min-height: 32px; padding-left: 42px; font-size: 13px; }
/* Grup menu samping (dropdown), buka dan tutup langsung tanpa transisi */
.nav-grup { display: grid; }
.nav-kepala { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--shell-ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.nav-kepala:hover { background: var(--shell-hover); color: var(--shell-ink-hi); }
.nav-kepala:focus-visible { outline: 2px solid var(--shell-focus); outline-offset: -2px; }
.nav-kepala .cnt { margin-left: auto; }
.nav-panah { margin-left: auto; display: grid; place-items: center; color: var(--shell-dim); }
.nav-kepala .cnt:not([hidden]) + .nav-panah { margin-left: 6px; }
.nav-grup.buka .nav-panah { transform: rotate(90deg); }
/* ANIMASI-SUBMENU-MULAI */
/* Satu-satunya animasi di aplikasi (putusan pemilik 3 Nov 2026): buka-tutup submenu menu samping dan putaran chevron, laci menu, dan ciut-lebar menu, 200 ms.
   Kelas .siap dipasang sesudah halaman tergambar, jadi keadaan awal tersimpan tidak beranimasi. Mati saat prefers-reduced-motion. */
.nav-grup.siap .nav-sub { transition: grid-template-rows 200ms ease, opacity 200ms ease; }
.nav-grup.siap .nav-sub[hidden] { transition: grid-template-rows 200ms ease, opacity 200ms ease, visibility 0s linear 200ms; }
.nav-grup.siap .nav-panah { transition: transform 200ms ease; }
/* Putusan pemilik 3 Nov 2026 (perluasan): laci menu di layar sempit bergeser dan tirainya memudar; di desktop lebar menu berubah halus saat diciutkan */
@media (max-width: 960px) {
  .side { transition: transform 200ms ease, visibility 0s linear 200ms; }
  .app.open .side { transition: transform 200ms ease; }
  .scrim { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .app.open .scrim { transition: opacity 200ms ease; }
}
@media (min-width: 961px) {
  .app { transition: grid-template-columns 200ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-grup.siap .nav-sub, .nav-grup.siap .nav-sub[hidden], .nav-grup.siap .nav-panah, .side, .app.open .side, .scrim, .app.open .scrim, .app { transition: none; }
}
/* ANIMASI-SUBMENU-SELESAI */
.nav-grup.ada-aktif:not(.buka) .nav-kepala { color: var(--shell-mint); font-weight: 600; box-shadow: inset 3px 0 0 var(--shell-focus); background: var(--shell-act); }
.nav-grup.ada-aktif:not(.buka) .nav-kepala > .i { color: var(--shell-mint); }
.kpi.ln { position: relative; }
.kpi.ln:hover { background: var(--hover); }
.kpi-a { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.kpi-a:hover { text-decoration: none; }
/* Rincian per jenis: satu keterangan redup dengan tautan hijau seperti semula */
.kpi-j { font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; }
.kpi-j a { font-weight: 600; }
.pill.wajib { font-size: 11px; margin-left: 4px; vertical-align: 1px; }
.foto-lap li { padding: 8px 0; gap: 10px; justify-content: flex-start; }
.sts-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; font-size: 11.5px; color: var(--ink-3); margin-top: -4px; }
.sts-l .on { color: var(--brand-ink); font-weight: 700; }
.pengingat .panel-h h2 { display: flex; align-items: center; gap: 8px; }
.pengingat .list a b { white-space: normal; }
.tiga { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.tiga .list li { padding: 6px 0; }
.tiga-grid { gap: 10px; }

/* Scrollbar sidebar (9 Okt 2026): putih transparan di atas menu hijau-hitam, tipis, dan hanya tampil saat sedang digulir
   (kelas .menggulir dipasang app.js saat scroll, dilepas 900 ms sesudah gulir terakhir). Tanpa transisi: muncul dan hilang langsung.
   Chrome, Edge, dan Safari memakai ::-webkit-scrollbar (lebar 6 px). Firefox tidak mengenal ::-webkit-scrollbar, jadi memakai
   scrollbar-width dan scrollbar-color. scrollbar-color sengaja tidak dipasang untuk Chrome karena sejak Chrome 121 properti itu
   menggantikan ::-webkit-scrollbar. Saat tidak digulir warnanya transparan; area gulir tetap berfungsi. */
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.nav.menggulir::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }
@supports not selector(::-webkit-scrollbar) {
  .nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .nav.menggulir { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
}

/* Daftar ringkas di dashboard: sisa butir dibuka dengan details, tanpa animasi (12 Okt 2026) */
details.lain > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13px; padding: 8px 16px; list-style: none; }
details.lain > summary::-webkit-details-marker { display: none; }
details.lain[open] > summary { display: none; }
.brief details.lain > summary { padding: 6px 0 0; }
.kb-usul { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; font-size: 12px; color: var(--ink-3); }

/* Dokumen (T2-09): sel nama berkas di tabel dengan badge format, seperti prototipe hasilDok (gaya inline diganti kelas) */
.dok { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dok > div { min-width: 0; }
.dok .ttl { overflow-wrap: anywhere; }
/* Dialog dokumen: judul nama berkas panjang, pratinjau gambar dan video, judul lembar pengganti, ubah akses, daftar versi */
.dok-judul { overflow-wrap: anywhere; }
.preview .pratinjau { display: block; max-width: 100%; max-height: 60vh; border-radius: 6px; box-shadow: var(--shadow); }
.sheet-judul { font-size: 12px; }
.dok-rinci { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dok-akses { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.dok-akses select { width: auto; }
ul.versi { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; font-weight: 400; }
.dok-log { border-top: 1px solid var(--line-2); padding-top: 10px; }
.dok-log h3 { margin: 0 0 4px; font-size: 13px; }
.dok-log .log li { padding: 6px 0; }
/* Dialog Unggah: kemajuan unggah langsung ke storage, tanpa animasi; area pilih berkas bisa difokus keyboard */
.unggah-status { display: grid; gap: 6px; }
.unggah-status progress { width: 100%; height: 8px; }
/* Saran kelas di bawah Klasifikasi (T2-22): rapat ke pilihannya, pill Perlu cek sebaris dengan teks */
.saran-kelas, .info-foto { margin-top: -8px; min-height: 1em; }
/* Tabel banyak berkas dan laporan unggahan (T2-22): nama panjang membungkus, pilihan kelas tidak melebar */
.massal, .laporan-unggah { display: grid; gap: 10px; }
.t .berkas-nama { min-width: 160px; overflow-wrap: anywhere; }
.t .berkas-kelas select { max-width: 240px; }
.drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Checklist berdokumen (T2-10): keterangan tahap wajib (nilai inline prototipe) dan tautan berkas sebagai tombol berwarna tautan */
.checks .wajib-tahap { flex-basis: 100%; padding-left: 28px; margin-top: -6px; }
.checks .file.linkbtn { font-weight: inherit; }

/* TPL-06: tiga kelompok template tetap terbaca di layar sempit. */
.tabs-templat { flex-wrap: wrap; overflow-x: visible; }
.tabs-templat a { padding-inline: 8px; }

/* Panel STS retribusi (prototipe panelSTS), empat status PD-36. */
.sts-isi { display: grid; gap: 10px; }
.sts-langkah { grid-template-columns: repeat(4,minmax(0,1fr)); }
.sts-riwayat { border-top: 1px solid var(--line-2); }

#panelSts { min-width: 0; overflow-wrap: anywhere; }

/* PD-37: BA tetap terbaca saat kolomnya disembunyikan pada HP; STS hanya kolom desktop. */
.t-pbg .pbg-ringkas { display: none; }
@media (max-width: 640px) {
  .t-pbg { table-layout: fixed; }
  .t-pbg th, .t-pbg td { padding: 9px 6px; }
  .t-pbg th { white-space: normal; }
  .t-pbg td { overflow-wrap: anywhere; }
  .t-pbg .mono, .t-pbg .pill { white-space: normal; }
  .t-pbg .sla { min-width: 0; }
  .t-pbg .slabar { width: 100%; }
  .t-pbg .pbg-ringkas { display: grid; gap: 6px; margin-top: 6px; }
}

/* Paket saya D6 (T3-10): nama kegiatan terpotong dalam lebarnya, dan pill turun ke baris baru di HP */
.list li.butir-paket { flex-wrap: wrap; }
.list li.butir-paket > div:first-child { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; }
/* Nama naskah lengkap tetap terbaca ketika panel dokumen berada di kolom sempit. */
#panelSerahTerima .acts, #panelSerahTerima .acts form { min-width: 0; max-width: 100%; }
#panelSerahTerima .btn { white-space: normal; max-width: 100%; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.judul-alur { font-size: 18px; }
/* TPA-24: angka nomor mengikuti kartu prototipe; format panjang tetap terbaca pada layar sempit. */
.nomor-ba { margin-bottom: 16px; }
.nomor-ba .kpi { min-width: 0; }
.nomor-ba .v.mono { font-size: 17px; overflow-wrap: anywhere; }
.ba-nomor-dialog .mono { overflow-wrap: anywhere; }
.ba-nomor-dialog dd { min-width: 0; }
@media (max-width: 640px) {
  .nomor-ba-tabel { table-layout: fixed; }
  .nomor-ba-tabel th, .nomor-ba-tabel td { padding: 10px 6px; overflow-wrap: anywhere; }
  .nomor-ba-tabel td, .nomor-ba-tabel .mono { white-space: normal; }
  .nomor-ba-tabel th:first-child { width: 32%; }
  .nomor-ba-tabel th:nth-child(2) { width: 16%; }
  .nomor-ba-tabel th:nth-child(3) { width: 27%; }
  .nomor-ba-tabel th:last-child { width: 25%; }
  .nomor-ba-tabel .pill { white-space: normal; }
}

/* T4-08: monitoring/detail BA TPA, pengganti gaya inline prototipe (CSP). */
.tpa-kartu-isi { display: grid; gap: 10px; }
.tpa-langkah { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tpa-catatan-form { display: grid; gap: 8px; border-bottom: 1px solid var(--line-2); }
.tpa-catatan-form select { width: auto; }
.tpa-teks-panjang { overflow-wrap: anywhere; }
.tpa-beban { grid-template-columns: minmax(0, 1fr) 28px; min-width: 100px; }
.tpa-tren-batang { width: min(100%, 34px); height: 100%; min-height: 2px; align-self: end; }
.tpa-tren-batang rect { fill: var(--brand); }
.tpa-peta-legenda { flex-direction: column; gap: 6px; }
.tpa-peta-legenda .dot { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.tpa-peta-terbanyak { display: block; margin: 14px 0 6px; }
.tpa-peta-daftar { margin: 0 16px 16px; }
svg.peta a:focus-visible circle { stroke: var(--ink); stroke-width: 4; }
.tpa-peta-0 { fill: var(--peta-0); background: var(--peta-0); }
.tpa-peta-1 { fill: var(--peta-1); background: var(--peta-1); }
.tpa-peta-2 { fill: var(--peta-2); background: var(--peta-2); }
.tpa-peta-3 { fill: var(--peta-3); background: var(--peta-3); }
.tpa-peta-4 { fill: var(--peta-4); background: var(--peta-4); }
.ba-pos-0 { background: var(--pos-0); }
.ba-pos-1 { background: var(--pos-1); }
.ba-pos-2 { background: var(--pos-2); }
.ba-pos-3 { background: var(--pos-3); }
.ba-pos-4 { background: var(--pos-4); }
.ba-pos-5 { background: var(--pos-5); }
.ba-pos-6 { background: #D9A21B; }
.tpa-beban-tabel { table-layout: fixed; width: 100%; }
.tpa-beban-tabel th, .tpa-beban-tabel td { padding: 10px 6px; white-space: normal; overflow-wrap: anywhere; }
.tpa-beban-tabel th:first-child { width: 45%; }
.tpa-beban-tabel th:nth-child(2) { width: 35%; }
.tpa-beban-tabel th:last-child { width: 20%; }
.tpa-beban-tabel .tpa-beban { min-width: 0; }
.tpa-beban-tabel .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tpa-verifikasi-tabel { table-layout: fixed; width: 100%; }
.tpa-verifikasi-tabel th, .tpa-verifikasi-tabel td { white-space: normal; overflow-wrap: anywhere; }
.tpa-verifikasi-tabel th:first-child { width: 27%; }
.tpa-verifikasi-tabel th:nth-child(2) { width: 17%; }
.tpa-verifikasi-tabel th:nth-child(3) { width: 18%; }
.tpa-verifikasi-tabel th:nth-child(4) { width: 15%; }
.tpa-verifikasi-tabel th:last-child { width: 23%; }
.tpa-verifikasi-tabel .acts { justify-content: flex-end; }
.tpa-verifikasi-tabel .pill, .tpa-verifikasi-tabel .mono { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* T4-08 [Asumsi: tata letak HP]: status seluruh disiplin tetap terbaca tanpa geser tabel. */
@media (max-width: 640px) {
  .tpa-daftar, .tpa-daftar tbody { display: block; width: 100%; }
  .tpa-daftar thead { display: none; }
  .tpa-daftar tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding: 8px; }
  .tpa-daftar[data-kolom-ba="1"] tr { grid-template-columns: minmax(0, 1fr); }
  .tpa-daftar td { display: block; min-width: 0; padding: 6px; border: 0; overflow-wrap: anywhere; }
  .tpa-daftar td[data-tpa-register], .tpa-daftar td[data-tpa-batas] { grid-column: 1 / -1; }
  .tpa-daftar td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .tpa-daftar .pill, .tpa-daftar .mono { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .tpa-backlog, .tpa-beban-tabel { table-layout: fixed; width: 100%; }
  .tpa-backlog th, .tpa-backlog td, .tpa-beban-tabel th, .tpa-beban-tabel td { padding: 10px 6px; white-space: normal; overflow-wrap: anywhere; }
  .tpa-backlog th { font-size: 11.5px; }
  .tpa-backlog th:first-child { width: 26%; }
  .tpa-backlog th:nth-child(2), .tpa-backlog th:nth-child(4), .tpa-backlog th:nth-child(5) { width: 15%; }
  .tpa-backlog th:nth-child(3) { width: 29%; }
  .tpa-backlog .stackbar { min-width: 0; gap: 1px; }
  .tpa-beban-tabel th:first-child { width: 45%; }
  .tpa-beban-tabel th:nth-child(2) { width: 35%; }
  .tpa-beban-tabel th:last-child { width: 20%; }
  .tpa-beban-tabel .tpa-beban { min-width: 0; }
  .tpa-beban-tabel .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .tpa-verifikasi-tabel, .tpa-verifikasi-tabel tbody { display: block; width: 100%; }
  .tpa-verifikasi-tabel thead { display: none; }
  .tpa-verifikasi-tabel tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding: 8px; }
  .tpa-verifikasi-tabel td { display: block; min-width: 0; padding: 6px; border: 0; text-align: left; }
  .tpa-verifikasi-tabel td:first-child, .tpa-verifikasi-tabel td:last-child { grid-column: 1 / -1; }
  .tpa-verifikasi-tabel td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .tpa-verifikasi-tabel td:last-child .acts { justify-content: flex-start; }
}

/* TPA-47: berkas penuh dan pemeriksaan tetap terbaca tanpa geser samping. */
.tpa-pemeriksaan-grid > *, .tpa-pemeriksaan-grid .panel { min-width: 0; }
.tpa-berkas-tabs { flex-wrap: wrap; overflow-x: visible; }
.tpa-berkas-tabs a { white-space: normal; overflow-wrap: anywhere; }
.tpa-berkas-meta, .tpa-periksa-isi { display: grid; gap: 12px; overflow-wrap: anywhere; }
.tpa-berkas-meta .chips { flex-wrap: wrap; }
.tpa-berkas-meta [aria-current="page"] { font-weight: 700; text-decoration: underline; }
.tpa-periksa-isi .note, .tpa-periksa-isi p { margin: 0; }
.tpa-periksa-isi .chk { align-items: start; overflow-wrap: anywhere; }
.tpa-periksa-isi .acts { flex-wrap: wrap; }
.tpa-isi-berkas { min-width: 0; overflow: auto; background: var(--bg); padding: 16px; }
.tpa-isi-berkas:empty { display: none; }
.tpa-isi-berkas iframe { display: block; width: 100%; height: 78vh; border: 0; background: #fff; }
.tpa-isi-berkas img, .tpa-isi-berkas video { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.tpa-isi-berkas video { width: 100%; }
@media (max-width: 640px) {
  .tpa-pemeriksaan-grid { grid-template-columns: minmax(0, 1fr); }
  .tpa-isi-berkas { padding: 8px; }
  .tpa-isi-berkas iframe { height: 65vh; }
}

/* Kang Bedas: penanda pengirim, kontrol tanpa gaya inline, dan kotak tertutup. */
.kb-box[hidden] { display: none; }
.kb-pengirim { display: block; font-size: 12px; color: var(--brand-ink); }
.msg .bub { overflow-wrap: anywhere; min-width: 0; }
.msg .bub p { margin: 0; }
.kb-form textarea, .composer textarea { min-width: 0; resize: vertical; max-height: 160px; }

.kb-box { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }

/* Tombol tema (ikon bulan di mode terang, matahari di mode gelap); pilihan disimpan oleh public/js/tema.js */
.tema-matahari { display: none; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema-matahari { display: inline-block; }
  :root:not([data-theme="light"]) .tema-bulan { display: none; }
}
:root[data-theme="dark"] .tema-matahari { display: inline-block; }
:root[data-theme="dark"] .tema-bulan { display: none; }

/* Menu samping diciutkan di desktop (html[data-menu="ciut"] dipasang menu.js): hanya ikon, nama menu jadi tooltip (title), submenu
   disembunyikan dan grup yang diklik melebarkan menu sementara. */
@media (min-width: 961px) {
  html[data-menu="ciut"] .app { grid-template-columns: 72px minmax(0, 1fr); }
  html[data-menu="ciut"] .side .brand { justify-content: center; padding: 0; }
  html[data-menu="ciut"] .side .brand > div { display: none; }
  html[data-menu="ciut"] .nav a, html[data-menu="ciut"] .nav-kepala { justify-content: center; padding: 0; position: relative; }
  html[data-menu="ciut"] .nav a > span:not(.cnt), html[data-menu="ciut"] .nav-kepala > span:not(.cnt), html[data-menu="ciut"] .nav-kepala > .nav-panah { display: none; }
  html[data-menu="ciut"] .nav .cnt { position: absolute; top: 8px; right: 14px; min-width: 9px; height: 9px; padding: 0; font-size: 0; border-radius: 50%; }
  html[data-menu="ciut"] .nav-sub, html[data-menu="ciut"] .nav-sub[hidden] { display: none !important; }
  html[data-menu="ciut"] .nav-grup.ada-aktif .nav-kepala { color: var(--shell-mint); box-shadow: inset 3px 0 0 var(--shell-focus); background: var(--shell-act); }
  html[data-menu="ciut"] .nav-grup.ada-aktif .nav-kepala > .i { color: var(--shell-mint); }
}

/* Panel Filter (filter.js): popover di bawah tombol Filter, dua kolom (satu kolom di ponsel); chip saringan aktif di bawah kotak cari */
.filters { position: relative; }
.filter-wrap { position: relative; flex: none; }
.filter-tombol { gap: 8px; }
.filter-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--brand-btn); color: var(--on-brand); font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.filter-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 35; width: min(520px, calc(100vw - 32px)); display: grid; gap: 16px; padding: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.filter-grid label.f { min-width: 0; }
.filter-grid select, .filter-grid input[type="date"] { width: 100%; }
.filter-kaki { display: flex; justify-content: flex-end; gap: 8px; }
.filter-chips { order: 99; flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--brand); }
@media (max-width: 640px) {
  .filter-wrap { position: static; }
  .filter-panel { top: 100%; left: 16px; right: 16px; width: auto; }
  .filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Menu Ekspor (x-ekspor): satu tombol, menu kecil berisi Excel dan PDF */
.ekspor { position: relative; }
.ekspor > .btn > .i:last-child { margin-left: -2px; color: var(--ink-3); }
.pop-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 168px; display: grid; gap: 2px; padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.pop-menu-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--ink); font-weight: 500; text-decoration: none; }
.pop-menu-item:hover { background: var(--hover); text-decoration: none; }
button.pop-menu-item { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
button.pop-menu-item:hover { background: var(--hover); }
.pop-menu-item .i { color: var(--ink-3); }
/* Menu Tindakan di tabel (x-menu-tindakan): tombol satu baris. Pembungkus tabel (.tw) bergulir sehingga menu absolute terpotong,
   jadi menu dijangkarkan ke tombolnya (CSS anchor positioning) dengan position fixed: di bawah tombol rata kanan, pindah ke atas
   atau ke kanan bila tidak muat, ikut bergeser saat bergulir. Hanya tombol yang menunya terbuka yang menjadi jangkar (satu menu
   terbuka sekaligus), jadi nama jangkarnya tidak bentrok. Peramban tanpa dukungan jangkar memakai menu absolute biasa; di dua
   baris terbawah menu membuka ke atas supaya tidak terpotong tepi bawah tabel */
.menu-tindakan { position: relative; display: inline-flex; }
.menu-tindakan > .btn > .i:last-child { margin-left: -2px; color: var(--ink-3); }
@supports (anchor-name: --a) and (position-try-fallbacks: flip-block) {
  .menu-tindakan > .btn[aria-expanded="true"] { anchor-name: --menu-tindakan; }
  .menu-tindakan > .pop-menu { position: fixed; position-anchor: --menu-tindakan; inset: auto; position-area: bottom span-left; margin: 6px 0; z-index: 45; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
}
@supports not ((anchor-name: --a) and (position-try-fallbacks: flip-block)) {
  .t tbody tr:nth-last-child(-n+2):not(:nth-child(-n+2)) .menu-tindakan > .pop-menu { top: auto; bottom: calc(100% + 6px); }
}
.pop-menu-item.bahaya, .pop-menu-item.bahaya .i { color: var(--bad-tx); }
.t .menu-tindakan.acts-sel { display: flex; width: fit-content; }

/* Irama vertikal panel berformulir (putaran 4 Nov 2026): jarak antar judul, kalimat, label, isian, tombol, dan catatan memakai skala
   --s-1 sampai --s-5. Ditulis dengan :where() (kekhususan nol) supaya .stack-16, .form, dan aturan komponen tetap menang. */
.panel.panel-b { padding: var(--s-4); }
:where(.panel-b) > * + * { margin-top: var(--s-3); }
:where(.panel-b) > :is(h2, h3) + * { margin-top: var(--s-2); }
:where(.panel-b form:not(.acts, .filters, .form-row, .isian-sebaris, .stack-16, .form)) > * + * { margin-top: var(--s-3); }
:where(.panel-b) > :is(a.btn, button.btn, .btn) { display: flex; width: fit-content; }
:where(.panel-b) :is(p.small, p.muted) { line-height: 1.5; }
/* Isian pendek dan tombolnya sebaris di desktop, bertumpuk di ponsel; isian angka dan tanggal tidak selebar kolom */
.isian-sebaris { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.isian-sebaris > label.f { flex: 0 1 380px; min-width: 0; }
.isian-sebaris > .btn { flex: none; }
input[type="number"]:not(.num-in) { max-width: 220px; }
.t input[type="number"], .filter-grid input[type="number"] { max-width: none; }
@media (max-width: 640px) {
  .isian-sebaris { flex-direction: column; align-items: stretch; }
  .isian-sebaris > label.f { flex: none; }
  .isian-sebaris > .btn { width: 100%; }
}

/* Daftar template dokumen (t-templat): tabel selebar halaman; di ponsel tiap baris menjadi kartu bertumpuk */
.t-templat td.nama { width: 42%; }
.t-templat .ttl { display: block; }
.t-templat .sub { max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-templat td { white-space: nowrap; }
.t-templat td.nama { white-space: normal; }
.t-templat td.r .acts { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .t-templat, .t-templat tbody { display: block; width: 100%; }
  .t-templat thead { display: none; }
  .t-templat tr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr); gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); }
  .t-templat tr:last-child { border-bottom: 0; }
  .t-templat td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; }
  .t-templat td.nama, .t-templat td.r { grid-column: 1 / -1; width: auto; }
  .t-templat td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .t-templat td.r { text-align: left; }
  .t-templat td.r .acts { justify-content: flex-start; }
  .t-templat .sub { white-space: normal; }
}

/* ===== Tata letak datar (putusan pemilik 4 Nov 2026, acuan report dan absensi Shaka): bagian halaman langsung di atas latar, dipisah
   ruang kosong dan garis tipis. Tanpa kartu bergaris atau berlatar putih dan tanpa kotak di dalam kotak. Dialog, popover (Filter, Ekspor,
   notifikasi, akun), kotak tulis Kang Bedas, dan catatan berwarna tetap berbingkai: itu lapisan di atas halaman. Warna tidak berubah. ===== */
.panel, .brief { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.panel, .panel.panel-b, .panel .panel-b { padding: 0; }
.pop .panel-b { padding: var(--s-2) var(--s-4) var(--s-4); }
.panel-h { padding: 0 0 var(--s-3); }
.panel-h h2, .panel > h2, .panel-b > h2 { font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.panel-f { padding: var(--s-3) 0 0; border-top: 1px solid var(--line-2); }
details.panel > summary.panel-h { color: var(--brand); font-weight: 600; cursor: pointer; padding-bottom: 0; }
details.panel[open] > summary.panel-h { padding-bottom: var(--s-3); }
.brief { padding: 0; }
/* Bagian bertumpuk dipisah garis tipis dan ruang; bagian berdampingan (grid) tidak, kecuali pemisah tegak di kolom samping */
:is(.page, .stack-16) > :is(.panel, .grid, .brief, .hero, .kpis, details.panel, .mb-16, .mt-16) ~ :is(.panel, .grid, .brief, .kpis, details.panel, .mb-16, .mt-16) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.grid { column-gap: 48px; row-gap: 28px; }
.g-main, .g-lap { column-gap: 0; }
.g-main > :first-child, .g-lap > :first-child { padding-right: 32px; }
.g-main > :not(:first-child), .g-lap > :not(:first-child) { padding-left: 32px; border-left: 1px solid var(--line); }
.hero { column-gap: 32px; }
@media (max-width: 1180px) {
  .g-main > :first-child, .g-lap > :first-child { padding-right: 0; }
  .g-main > :not(:first-child), .g-lap > :not(:first-child) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 28px; }
}
@media (max-width: 960px) {
  .g-2 > :not(:first-child), .g-3 > :not(:first-child) { border-top: 1px solid var(--line); padding-top: 28px; }
}
/* Deret angka datar: angka besar langsung di latar, dipisah garis tipis (tegak dan datar), tanpa kotak per angka */
.kpis, .panel.kpis { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; gap: 0; }
.kpi, .panel.kpis .kpi { background: transparent; border-radius: 0; padding: var(--s-4) 24px; box-shadow: -1px -1px 0 0 var(--line); }
a.kpi:hover { background: transparent; }
a.kpi:hover .v, .kpi.ln:hover .kpi-a .v { color: var(--brand); }
.kpi.ln:hover { background: transparent; }
/* Kolom pertama rata dengan tepi halaman; jumlah kolom mengikuti kelas dan lebar layar */
.kpis.kpis > :nth-child(odd) { padding-left: 0; }
.kpis.four > :nth-child(odd) { padding-left: 24px; } .kpis.four > :nth-child(4n+1) { padding-left: 0; }
.kpis.five > :nth-child(odd), .kpis.six > :nth-child(odd) { padding-left: 24px; } .kpis.five > :nth-child(5n+1), .kpis.six > :nth-child(6n+1) { padding-left: 0; }
.kpis.lentur > :nth-child(odd) { padding-left: 24px; } .kpis.lentur > :first-child { padding-left: 0; }
@media (max-width: 1180px) {
  .kpis.four > :nth-child(n) { padding-left: 24px; } .kpis.four > :nth-child(odd) { padding-left: 0; }
  .kpis.five > :nth-child(n), .kpis.six > :nth-child(n) { padding-left: 24px; } .kpis.five > :nth-child(3n+1), .kpis.six > :nth-child(3n+1) { padding-left: 0; }
}
@media (max-width: 640px) {
  .kpi, .panel.kpis .kpi { padding: var(--s-3) 16px; }
  .kpis.five > :nth-child(n), .kpis.six > :nth-child(n) { padding-left: 16px; } .kpis.kpis > :nth-child(odd), .kpis.five > :nth-child(odd), .kpis.six > :nth-child(odd) { padding-left: 0; }
}
/* Daftar, baris, dan tabel tanpa inset kartu: rata dengan judul bagian */
.panel .list li, .panel .log li, .panel .checks li, .panel .komentar li, .panel .upc li, .panel .flow li, .panel .adm-l li { padding-left: 0; padding-right: 0; }
.panel .flow li::before { left: 13px; }
.panel .gantt { padding: var(--s-2) 0 0; }
.panel .aibox { margin: 0 0 var(--s-4); }
.panel .empty { padding: 28px 0; }
.panel .filters, .panel .form-catatan, .panel .tpa-catatan-form { padding-left: 0; padding-right: 0; }
.panel > .tabs { padding: 0; }
.panel .tiga { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: var(--s-3) 0; }
.col { background: transparent; border: 0; padding: 0; }
.board { padding: var(--s-3) 0; }
@media (min-width: 641px) {
  .t th:first-child, .t td:first-child { padding-left: 0; }
  .t th:last-child, .t td:last-child { padding-right: 0; }
  .pop .t th:first-child, .pop .t td:first-child { padding-left: 16px; }
}
/* Kartu Ketepatan waktu tetap satu-satunya blok berwarna sebagai sorotan */
.hero-fig { border-radius: var(--r); padding: 22px 24px; background: linear-gradient(160deg, var(--band-1), var(--band-0)); }
details.lain > summary { padding-left: 0; }

.panel .form-catatan { padding-bottom: var(--s-3); }

/* Tab langsung di atas bagian: garis tab sudah menjadi pemisahnya; deret angka di atas tab diberi ruang */
:is(.page, .stack-16) > .tabs.tabs.tabs + :is(.panel, .grid, .kpis, .mb-16, details.panel) { margin-top: 0; padding-top: 0; border-top: 0; }
:is(.page, .stack-16) > :is(.kpis, .hero, .brief) ~ .tabs { margin-top: 28px; }
:is(.page, .stack-16) > .tabs.tabs.tabs + :is(.panel, .grid, .kpis, .mb-16, details.panel) .filters:first-child { padding-top: 0; }
.t tr.grp td { background: transparent; padding-top: 20px; font-size: 13.5px; }
.t tr.grp:first-child td { padding-top: 12px; }

/* Kang Bedas bersesi (4 Nov 2026): kolom daftar percakapan di kiri halaman; di layar sempit daftar dibuka-tutup lewat tombol Percakapan */
.kb-daftar-tombol { display: none; }
.kb-daftar { display: grid; align-content: start; gap: 6px; padding: 12px 8px; height: calc(100dvh - 60px - 48px - 70px); min-height: 460px; overflow-y: auto; }
.kb-daftar-judul { margin: 0; padding: 0 10px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.kb-daftar-kosong { margin: 0; padding: 0 10px; }
.kb-sesi-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kb-sesi { display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: var(--r-sm); }
.kb-sesi:hover, .kb-sesi:focus-within { background: var(--surface-2); }
.kb-sesi.is-aktif { background: var(--brand-tint); }
.kb-sesi-buka { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 8px 10px; color: var(--ink); text-decoration: none; }
.kb-sesi-buka:hover { text-decoration: none; }
.kb-sesi-judul { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.kb-sesi.is-aktif .kb-sesi-judul { font-weight: 600; color: var(--brand-ink); }
.kb-sesi-waktu { font-size: 12px; color: var(--ink-3); }
.kb-sesi-aksi { flex: none; display: flex; padding-right: 4px; opacity: 0; }
.kb-sesi:hover .kb-sesi-aksi, .kb-sesi:focus-within .kb-sesi-aksi, .kb-sesi.is-aktif .kb-sesi-aksi { opacity: 1; }
.kb-ikon { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.kb-ikon:hover { background: var(--line-2); color: var(--ink); }
.kb-sesi-ganti { flex: 1; min-width: 0; padding: 5px 6px; }
.kb-sesi-ganti input { width: 100%; min-height: 36px; }
.kb-sesi-konfirmasi { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 10px; font-size: 13px; }
.kb-sesi-konfirmasi span { flex-basis: 100%; }
.kb-saran { display: grid; gap: 8px; margin-top: 2px; }
.kb-saran h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kb-saran .kb-topik { max-height: none; overflow: visible; }
.kb-saran .kb-topik.tanya button { flex-basis: calc(50% - 6px); }
.kb-aksi { display: flex; align-items: center; gap: 6px; flex: none; }
.kb-aksi form { display: contents; }
.kb-title > div { min-width: 0; }
.kb-sub { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-sub:empty { display: none; }
@media (hover: none) { .kb-sesi-aksi { opacity: 1; } }
@media (max-width: 1180px) {
  .kb-daftar-tombol { display: inline-flex; }
  .kb-daftar { display: none; height: auto; min-height: 0; max-height: 40dvh; }
  .chat-wrap[data-daftar-buka] .kb-daftar { display: grid; }
}
@media (max-width: 640px) {
  .kb-saran .kb-topik.tanya button { flex-basis: 100%; }
}

/* Resume: grafik server dan angka anggaran tetap terbaca di layar kecil, tanpa mengubah tabel modul lain. */
.resume-grafik{display:block;width:100%;max-width:760px}
.resume-grafik text{font-size:13px;fill:var(--ink)}
.resume-grafik rect{fill:var(--brand)}
.resume-angka .v{white-space:nowrap}
@media(max-width:700px){.resume-tabel,.resume-tabel tbody{display:block;width:100%}.resume-tabel thead{display:none}.resume-tabel tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.resume-tabel td,.resume-tabel td.r,.resume-tabel td:first-child{display:block;text-align:left;white-space:normal;border:0;padding-left:0;padding-right:0}.resume-tabel td:first-child{grid-column:1/-1;font-weight:600}.resume-tabel td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--ink-3)}}