/* Tracker Proyek Konstruksi — tema "Teduh".
   Tujuan: tenang dan nyaman dipakai berjam-jam. Latar kertas hangat, aksen hijau-teal yang redup,
   status (hijau/oker/bata) tidak menyala, satu huruf serif lembut (Fraunces) untuk judul & angka besar,
   Plus Jakarta Sans untuk sisanya. Desktop: sidebar kiri yang diam; HP/tablet: bilah atas + navigasi bawah.
   Warna disimpan sebagai kanal RGB agar Tailwind bisa memakai opacity: bg-bad/10, text-ok, dst. Spasi kelipatan 4px. */

:root {
  /* "Terang elegan": kertas gading, tinta hitam-biru, aksen biru dongker, detail kuningan. */
  --bg: 247 245 240;          /* gading */
  --surface: 255 255 253;
  --surface-2: 242 239 232;
  --line: 231 227 218;
  --line-strong: 210 204 191;
  --fg: 22 24 30;             /* tinta */
  --muted: 64 67 76;
  --subtle: 102 104 112;      /* 5,5:1 di permukaan */
  --accent: 22 24 30;         /* tombol utama: tinta, teks gading */
  --accent-ink: 30 58 102;    /* biru dongker untuk tautan & penanda aktif */
  --accent-bar: 42 76 128;    /* isian bar progres */
  --on-accent: 255 255 253;
  --brass: 128 92 30;         /* kuningan untuk label kecil, 5:1 */
  --ok: 36 118 76;
  --warn: 148 90 16;
  --bad: 176 58 50;
  --info: 70 96 160;
  --real: 168 124 52;
  --shadow: 0 1px 2px rgb(22 24 30 / .04), 0 8px 24px -18px rgb(22 24 30 / .18);
  --shadow-lg: 0 32px 64px -24px rgb(22 24 30 / .28), 0 6px 16px -6px rgb(22 24 30 / .08);
  --radius: 22px;
  --radius-sm: 14px;
  --sidebar: 252px;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 200ms;
  color-scheme: light;
}

/* Tanpa JS: ikut sistem. Dengan JS: kelas .dark/.light dari skrip tema di index.html. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: 10 10 11; --surface: 19 19 21; --surface-2: 29 29 32; --line: 40 40 44; --line-strong: 70 70 76;
  --fg: 244 243 240; --muted: 192 191 187; --subtle: 150 149 145;
  --accent: 244 243 240; --accent-ink: 244 243 240; --accent-bar: 222 220 213; --on-accent: 10 10 11; --brass: 214 178 112;
  --ok: 122 202 152; --warn: 232 176 100; --bad: 240 136 124; --info: 150 168 230; --real: 220 176 106;
  --shadow: 0 0 0 1px rgb(255 255 255 / .015); --shadow-lg: 0 32px 64px -16px rgb(0 0 0 / .8);
    color-scheme: dark;
  }
}
:root.dark {
  --bg: 10 10 11; --surface: 19 19 21; --surface-2: 29 29 32; --line: 40 40 44; --line-strong: 70 70 76;
  --fg: 244 243 240; --muted: 192 191 187; --subtle: 150 149 145;
  --accent: 244 243 240; --accent-ink: 244 243 240; --accent-bar: 222 220 213; --on-accent: 10 10 11; --brass: 214 178 112;
  --ok: 122 202 152; --warn: 232 176 100; --bad: 240 136 124; --info: 150 168 230; --real: 220 176 106;
  --shadow: 0 0 0 1px rgb(255 255 255 / .015); --shadow-lg: 0 32px 64px -16px rgb(0 0 0 / .8);
  color-scheme: dark;
}

/* ---------- Reset ringan (preflight Tailwind dimatikan) ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; background: rgb(var(--bg)); color: rgb(var(--fg));
  font: 400 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.01em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
.num, .tabular { font-variant-numeric: tabular-nums; }
::selection { background: rgb(var(--accent) / .22); }
:focus-visible { outline: 2px solid rgb(var(--accent-bar)); outline-offset: 2px; border-radius: 8px; }
.ic { width: 1.125rem; height: 1.125rem; flex: none; }

/* Latar: cahaya teal sangat tipis di pojok kiri atas, sisanya kertas polos. */
.app-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at -10% -10%, rgb(var(--accent) / .07), transparent 60%),
    radial-gradient(700px 480px at 110% 0%, rgb(var(--real) / .05), transparent 60%);
}

/* ---------- Tipografi halaman ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.eyebrow { font-size: .8125rem; font-weight: 600; color: rgb(var(--accent-ink)); letter-spacing: .01em; margin-bottom: 4px; }
.page-title { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; letter-spacing: -0.02em; font-optical-sizing: auto; }
@media (min-width: 768px) { .page-title { font-size: 2.375rem; line-height: 2.75rem; } }
.page-sub { font-size: .875rem; color: rgb(var(--subtle)); margin-top: 4px; }
.section-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: rgb(var(--fg)); margin-bottom: 14px; letter-spacing: -0.01em; }
.hint { font-size: .8125rem; color: rgb(var(--subtle)); line-height: 1.55; }
.link { background: none; border: 0; padding: 0; color: rgb(var(--accent-ink)); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--accent-ink) / .35); cursor: pointer; }
.link:hover { text-decoration-color: currentColor; }

/* ---------- Bilah atas (HP/tablet) → sidebar (desktop ≥1024px) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 16px;
  background: rgb(var(--bg) / .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgb(var(--line) / .8);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; margin-right: auto; }
.brand-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: rgb(var(--accent)); color: rgb(var(--on-accent));
}
.brand-mark .ic { width: 20px; height: 20px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-name { font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: rgb(var(--subtle)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .side-add { display: none; }
.btn-label { display: none; }

/* Menu lipat (HP/tablet): navigasi Template + aksi data + keluar */
.actions-panel { display: none; }
.side-label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--subtle)); padding: 0 12px; margin: 4px 0 6px; }
.side-group, .side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link, .actions-panel .btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: rgb(var(--muted)); font-size: .875rem; font-weight: 500; text-decoration: none; text-align: left;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-link .ic, .actions-panel .btn .ic { width: 18px; height: 18px; color: rgb(var(--subtle)); transition: color var(--dur) var(--ease); }
.side-link:hover, .actions-panel .btn:hover { background: rgb(var(--fg) / .05); color: rgb(var(--fg)); }
.side-link[aria-current="page"] { background: rgb(var(--accent) / .1); color: rgb(var(--accent-ink)); font-weight: 600; }
.side-link[aria-current="page"] .ic { color: rgb(var(--accent-ink)); }
.side-sep { height: 1px; background: rgb(var(--line)); margin: 10px 4px; border: 0; }
#btn-logout:hover, #btn-logout:hover .ic { color: rgb(var(--bad)); }
@media (max-width: 1023.98px) {
  .actions-panel.open {
    display: flex; flex-direction: column; gap: 2px;
    position: absolute; right: 12px; top: calc(100% + 8px); width: min(280px, calc(100vw - 24px)); padding: 10px;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); animation: pop var(--dur) var(--ease);
  }
  .actions-panel .side-link, .actions-panel .btn { height: 44px; }
  /* Dashboard & Proyek sudah ada di navigasi bawah */
  .side-nav .side-link[data-view="dashboard"], .side-nav .side-link[data-view="projects"] { display: none; }
}
@media (min-width: 1024px) {
  .topbar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar); height: auto;
    flex-direction: column; align-items: stretch; gap: 0; padding: 20px 14px 16px;
    background: rgb(var(--surface) / .6); border-bottom: 0; border-right: 1px solid rgb(var(--line));
    overflow-y: auto;
  }
  .brand { margin: 0 0 20px; padding: 0 6px; }
  .topbar .side-add { display: inline-flex; width: 100%; height: 42px; margin-bottom: 22px; }
  .actions-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .actions-panel .side-foot { margin-top: auto; padding-top: 12px; }
  #btn-menu { display: none; }
  #btn-theme { order: 5; width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px; height: 40px; color: rgb(var(--muted)); font-weight: 500; }
  #btn-theme .ic { color: rgb(var(--subtle)); }
  #btn-theme .btn-label { display: inline; }
}

/* ---------- Area konten ---------- */
.app-main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 16px calc(112px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) { .app-main { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) {
  .app-main { max-width: calc(1240px + var(--sidebar)); padding: 36px 28px 64px calc(var(--sidebar) + 28px); }
}
@media (min-width: 1280px) { .app-main { padding: 40px 40px 64px calc(var(--sidebar) + 40px); } }
@media (min-width: 1440px) { .app-main { padding-left: calc(var(--sidebar) + 56px); padding-right: 56px; } }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .875rem; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none; user-select: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn .ic { width: 16px; height: 16px; }
.btn-primary { background: rgb(var(--accent)); color: rgb(var(--on-accent)); box-shadow: 0 1px 2px rgb(var(--accent) / .25); }
.btn-primary:hover { background: rgb(var(--accent-ink)); }
.dark .btn-primary:hover { background: rgb(var(--accent-ink)); }
.btn-ghost { background: transparent; color: rgb(var(--fg)); font-weight: 500; }
.btn-ghost:hover { background: rgb(var(--fg) / .06); }
.btn-subtle { background: rgb(var(--surface)); border-color: rgb(var(--line-strong) / .8); color: rgb(var(--fg)); }
.btn-subtle:hover { border-color: rgb(var(--line-strong)); background: rgb(var(--surface-2)); }
.btn-danger { background: rgb(var(--bad)); color: #fff; }
.dark .btn-danger { color: rgb(30 14 12); }
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger-ghost { background: transparent; color: rgb(var(--bad)); font-weight: 500; }
.btn-danger-ghost:hover { background: rgb(var(--bad) / .08); }
.btn-sm { height: 34px; padding: 0 12px; font-size: .8125rem; }
.btn-icon { width: 40px; padding: 0; }
@media (pointer: coarse) { .btn { height: 44px; } .btn-sm { height: 40px; } .btn-icon { width: 44px; } }

/* ---------- Kartu & panel ---------- */
.card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-pad { padding: 18px; }
@media (min-width: 640px) { .card-pad { padding: 24px; } }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 0; }
@media (min-width: 640px) { .card-head { padding: 22px 24px 0; } }
.card-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.card-sub { font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 3px; line-height: 1.5; }
.card-body { padding: 14px 18px 18px; }
@media (min-width: 640px) { .card-body { padding: 18px 24px 24px; } }

.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: .875rem;
}
.banner.ok { background: rgb(var(--ok) / .07); border-color: rgb(var(--ok) / .25); color: rgb(var(--fg)); }
.banner.bad { background: rgb(var(--bad) / .07); border-color: rgb(var(--bad) / .25); color: rgb(var(--fg)); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 44px 20px;
  color: rgb(var(--subtle)); font-size: .875rem; border: 1px dashed rgb(var(--line-strong)); border-radius: var(--radius); background: rgb(var(--surface) / .5);
}
.empty .ic { width: 30px; height: 30px; color: rgb(var(--accent-bar) / .6); }
.empty strong { color: rgb(var(--fg)); font-weight: 600; }
.list-rows > .empty { border: 0; background: transparent; }

/* ---------- KPI utama (dashboard) ---------- */
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: left; color: inherit; font: inherit;
}
.kpi[data-tone="bad"] { --tone: var(--bad); }
.kpi[data-tone="warn"] { --tone: var(--warn); }
.kpi[data-tone="ok"] { --tone: var(--ok); }
.kpi[data-tone="neutral"] { --tone: var(--accent-bar); }
.kpi-label { display: flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); }
.kpi-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgb(var(--tone) / .1); color: rgb(var(--tone)); }
.kpi-icon .ic { width: 16px; height: 16px; }
.kpi-value { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.kpi-value small { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: rgb(var(--subtle)); margin-left: 4px; letter-spacing: 0; }
.kpi-value.tone { color: rgb(var(--tone)); }
.kpi[data-tone="neutral"] .kpi-value.tone, .kpi[data-tone="ok"] .kpi-value.tone { color: rgb(var(--fg)); }
.kpi-sub { font-size: .8125rem; color: rgb(var(--subtle)); line-height: 1.5; }
.kpi-list { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgb(var(--line)); padding-top: 14px; font-size: .8125rem; }
.kpi-list li { display: flex; justify-content: space-between; gap: 12px; list-style: none; }
.kpi-list ul { padding: 0; display: contents; }
.kpi-list .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--muted)); }
.kpi-list .val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; color: rgb(var(--fg)); }
.kpi-list button.name { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.kpi-list button.name:hover { color: rgb(var(--fg)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--subtle) / .5); }
@media (min-width: 640px) { .kpi { padding: 24px; } .kpi-value { font-size: 3.25rem; } }

.stat-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(var(--line)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .stat-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stat { background: rgb(var(--surface)); padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .stat:last-child:nth-child(odd) { grid-column: auto; } }
.stat-label { font-size: .75rem; font-weight: 500; color: rgb(var(--subtle)); }
.stat-value { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }

/* ---------- Baris daftar (perlu perhatian, tahapan, pengeluaran) ---------- */
.list-rows { overflow: hidden; }
.list-rows > * + * { border-top: 1px solid rgb(var(--line)); }
.attn-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px; background: transparent; border: 0; color: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 640px) { .attn-row { padding: 14px 24px; } }
.attn-row:hover { background: rgb(var(--fg) / .03); }
.attn-row .title { font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.attn-row .meta { font-size: .8125rem; color: rgb(var(--subtle)); }
.attn-row .chev { color: rgb(var(--subtle)); transition: transform var(--dur) var(--ease); }
.attn-row:hover .chev { transform: translateX(2px); }
.sev { width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--warn)); box-shadow: 0 0 0 4px rgb(var(--warn) / .14); }
.sev.bad { background: rgb(var(--bad)); box-shadow: 0 0 0 4px rgb(var(--bad) / .14); }
.sev.muted { background: rgb(var(--line-strong)); box-shadow: 0 0 0 4px rgb(var(--line-strong) / .25); }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Badge & chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: .75rem; font-weight: 600; white-space: nowrap; border: 0;
  background: rgb(var(--fg) / .06); color: rgb(var(--muted));
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .85; }
.badge.plain::before { display: none; }
.badge.b-stage-active { background: rgb(var(--accent) / .1); color: rgb(var(--accent-ink)); }
.badge.b-ok { background: rgb(var(--ok) / .1); color: rgb(var(--ok)); }
.badge.b-warn { background: rgb(var(--warn) / .1); color: rgb(var(--warn)); }
.badge.b-bad { background: rgb(var(--bad) / .1); color: rgb(var(--bad)); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 99px; font-size: .8125rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); color: rgb(var(--subtle)); }
.chip b { color: rgb(var(--fg)); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip b.neg { color: rgb(var(--bad)); }

/* ---------- Progres: realisasi vs rencana ---------- */
.meter { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .8125rem; }
.meter-label { color: rgb(var(--subtle)); font-weight: 500; }
.meter-value { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.meter-foot { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: rgb(var(--subtle)); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.bar { position: relative; height: 6px; border-radius: 99px; background: rgb(var(--line)); }
.bar > .fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: rgb(var(--accent-bar)); transition: width 400ms var(--ease); }
.bar.over > .fill, .bar.is-bad > .fill { background: rgb(var(--bad)); }
.bar.is-ok > .fill { background: rgb(var(--ok)); }
.bar > .plan { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: rgb(var(--fg) / .8); box-shadow: 0 0 0 2px rgb(var(--surface)); }
.dev-pos { color: rgb(var(--ok)); }
.dev-neg { color: rgb(var(--bad)); }
.dev-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dev-pill .ic { width: 14px; height: 14px; }
.dev-pill.dev-neg { background: rgb(var(--bad) / .1); }
.dev-pill.dev-pos { background: rgb(var(--ok) / .1); }

/* ---------- Toolbar, pencarian, form ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.search .ic { position: absolute; left: 14px; width: 16px; height: 16px; color: rgb(var(--subtle)); pointer-events: none; }
.search input { padding-left: 40px !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea, .select {
  width: 100%; min-width: 0; height: 42px; padding: 0 14px; border-radius: var(--radius-sm);
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong)); color: rgb(var(--fg));
  font-size: .9375rem; font-weight: 500; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { height: auto; padding: 10px 14px; resize: vertical; }
select, .select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a85' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.toolbar .select { width: auto; flex: 0 1 230px; }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: rgb(var(--subtle) / .6); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(var(--accent-bar)); box-shadow: 0 0 0 4px rgb(var(--accent) / .14); }
#tpk input:disabled { background: rgb(var(--surface-2)); color: rgb(var(--subtle)); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: rgb(var(--subtle) / .85); }
input[type="file"] { width: 100%; font-size: .875rem; color: rgb(var(--subtle)); padding: 6px; border: 1px dashed rgb(var(--line-strong)); border-radius: var(--radius-sm); background: rgb(var(--surface-2) / .6); }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(var(--line-strong)); background: rgb(var(--surface)); color: rgb(var(--fg)); cursor: pointer; }
input[type="range"] { width: 100%; accent-color: rgb(var(--accent-bar)); height: 24px; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: rgb(var(--accent)); flex: none; cursor: pointer; }
@media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, .select { height: 44px; font-size: 16px; } }

.field { display: flex; flex-direction: column; gap: 7px; font-size: .8125rem; font-weight: 600; color: rgb(var(--muted)); min-width: 0; }
.field .hint { font-weight: 400; }
.check { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: rgb(var(--fg)); align-self: end; min-height: 42px; cursor: pointer; }
.calc { font-size: 1.125rem; font-weight: 700; padding: 14px 16px; border-radius: var(--radius-sm); background: rgb(var(--accent) / .07); color: rgb(var(--fg)); }

.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: end; }
.form-grid > .field-wide { grid-column: 1 / -1; }
.form-grid > .btn { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .form-ex { grid-template-columns: 9.5rem minmax(0, 1fr) 10rem; }
  .form-ms { grid-template-columns: minmax(0, 1fr) 11rem auto; }
  .form-ph { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 11rem 10rem auto; }
  .form-pv { grid-template-columns: minmax(0, 1fr) 11rem 10rem auto; }
  .form-grid > .field-wide, .form-grid > .btn { grid-column: auto; }
}

/* ---------- Kartu proyek ---------- */
.pcard {
  display: flex; flex-direction: column; gap: 16px; padding: 20px; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer;
  background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pcard:hover { border-color: rgb(var(--accent-bar) / .45); box-shadow: 0 12px 28px -18px rgb(var(--accent) / .45); transform: translateY(-2px); }
@media (min-width: 640px) { .pcard { padding: 22px; } }
.pcard-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pcard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 4px; }
.pcard-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-meta .ic { width: 14px; height: 14px; }
.pcard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: .75rem; color: rgb(var(--subtle)); border-top: 1px solid rgb(var(--line)); padding-top: 14px; font-variant-numeric: tabular-nums; }
.pcard-foot span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-foot .ic { width: 14px; height: 14px; }

.pips { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: rgb(var(--subtle)); }
.pips-track { display: flex; gap: 4px; flex: 1; }
.pips-track i { flex: 1; height: 4px; border-radius: 99px; background: rgb(var(--line)); }
.pips-track i.on { background: rgb(var(--accent-bar)); }
.pips.hold .pips-track i.on { background: rgb(var(--warn)); }

/* ---------- Detail proyek ---------- */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.step-bar { height: 4px; border-radius: 99px; background: rgb(var(--line)); }
.step-name { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 500; color: rgb(var(--subtle)); line-height: 1.2; overflow-wrap: anywhere; }
.step-dot { width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; flex: none; border: 1.5px solid rgb(var(--line-strong)); background: rgb(var(--surface)); }
.step-dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.step-date { font-size: .75rem; color: rgb(var(--subtle)); font-variant-numeric: tabular-nums; padding-left: 28px; }
.step.done .step-bar { background: rgb(var(--accent-bar)); }
.step.done .step-name { color: rgb(var(--fg)); }
.step.done .step-dot { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: rgb(var(--on-accent)); }
.step.current .step-bar { background: linear-gradient(90deg, rgb(var(--accent-bar)), rgb(var(--accent-bar) / .3)); }
.step.current .step-name { color: rgb(var(--fg)); font-weight: 700; }
.step.current .step-dot { border-color: rgb(var(--accent-bar)); box-shadow: 0 0 0 4px rgb(var(--accent) / .14); }
.step.current .step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--accent-bar)); }
.stepper.hold .step.current .step-bar { background: rgb(var(--warn)); }
.stepper.hold .step.current .step-dot { border-color: rgb(var(--warn)); box-shadow: 0 0 0 4px rgb(var(--warn) / .16); }
.stepper.hold .step.current .step-dot::after { background: rgb(var(--warn)); }
.step-now { display: none; }
@media (max-width: 767.98px) {
  .step-now { display: block; font-size: .875rem; color: rgb(var(--muted)); margin-bottom: 10px; }
  .step-now b { color: rgb(var(--fg)); }
  .stepper { gap: 4px; }
  .step { gap: 0; }
  .step-name, .step-date { display: none; }
}
.kpi-row { display: grid; gap: 1px; background: rgb(var(--line)); border-top: 1px solid rgb(var(--line)); }
@media (min-width: 768px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-row > div { background: rgb(var(--surface)); padding: 18px; }
@media (min-width: 640px) { .kpi-row > div { padding: 20px 24px; } }
.notes { white-space: pre-wrap; font-size: .875rem; color: rgb(var(--muted)); border-left: 3px solid rgb(var(--accent-bar) / .6); padding: 2px 0 2px 14px; max-width: 70ch; }

/* Tab: garis bawah yang tenang */
.tabs-wrap { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 20; margin: 0 -16px; padding: 0 16px; background: rgb(var(--bg) / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(var(--line)); }
@media (min-width: 640px) { .tabs-wrap { margin: 0 -24px; padding: 0 24px; } }
@media (min-width: 1024px) { .tabs-wrap { top: 0; margin: 0; padding: 0; background: rgb(var(--bg) / .9); } }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 0; background: transparent; color: rgb(var(--subtle)); font-size: .875rem; font-weight: 600; white-space: nowrap; transition: color var(--dur) var(--ease); }
.tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--dur) var(--ease); }
.tab .ic { width: 16px; height: 16px; }
.tab:hover { color: rgb(var(--fg)); }
.tab[aria-selected="true"] { color: rgb(var(--accent-ink)); }
.tab[aria-selected="true"]::after { background: rgb(var(--accent-bar)); }
.tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: .6875rem; font-weight: 700; background: rgb(var(--fg) / .06); color: rgb(var(--subtle)); font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] .tab-count { background: rgb(var(--accent) / .12); color: rgb(var(--accent-ink)); }
.tab-count:empty { display: none; }
.panel { animation: fade-in 240ms var(--ease); }
/* Tab di dialog Sampah: tanpa garis lengket */
.modal-head .tabs { gap: 2px; }
.modal-head .tab { height: 40px; }
.modal-head .tab { border-radius: 10px; }
.modal-head .tab::after { display: none; }
.modal-head .tab[aria-selected="true"] { background: rgb(var(--accent) / .1); }

/* ---------- Tabel (desktop) & kartu (HP) ---------- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; font-size: .875rem; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid rgb(var(--line)); text-align: left; vertical-align: middle; }
.tbl th { font-size: .75rem; font-weight: 600; color: rgb(var(--subtle)); background: rgb(var(--surface-2) / .6); white-space: nowrap; position: sticky; top: 0; }
.tbl tbody tr { transition: background-color var(--dur) var(--ease); }
.tbl tbody tr:hover { background: rgb(var(--fg) / .025); }
.tbl .r { text-align: right; white-space: nowrap; }
.tbl .code { white-space: nowrap; color: rgb(var(--subtle)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.tbl .neg { color: rgb(var(--bad)); }
.tbl tr.div-row td { background: rgb(var(--surface-2) / .55); font-weight: 700; font-size: .8125rem; }
.tbl tfoot td { font-weight: 700; border-top: 1px solid rgb(var(--line-strong)); border-bottom: 0; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.pct-input { width: 68px !important; height: 32px !important; padding: 0 8px !important; text-align: right; font-variant-numeric: tabular-nums; }

.rab-div { font-size: .8125rem; font-weight: 700; color: rgb(var(--subtle)); display: flex; justify-content: space-between; gap: 8px; padding: 12px 2px 8px; }
.rab-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rab-card .kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: .8125rem; }
.rab-card .kv dt { color: rgb(var(--subtle)); }
.rab-card .kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Baris tahapan & pengeluaran */
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 18px; min-height: 56px; }
@media (min-width: 640px) { .row { padding: 10px 24px; } }
.row .title { min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; }
.row.done .title { text-decoration: line-through; text-decoration-color: rgb(var(--subtle) / .6); color: rgb(var(--subtle)); }
.row .due { font-size: .8125rem; color: rgb(var(--subtle)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row .due.late { color: rgb(var(--bad)); font-weight: 600; }
.row-check { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -6px; cursor: pointer; }
.day-head { display: flex; justify-content: space-between; gap: 8px; padding: 10px 18px; background: rgb(var(--surface-2) / .55); font-size: .8125rem; font-weight: 700; color: rgb(var(--muted)); }
@media (min-width: 640px) { .day-head { padding: 10px 24px; } }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 18px; }
@media (min-width: 640px) { .ex-row { padding: 12px 24px; } }
.ex-row .title { min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; }
.ex-row .cat { font-size: .75rem; color: rgb(var(--subtle)); margin-top: 2px; }
.ex-row .amt { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: rgb(var(--subtle)); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.icon-btn:hover { background: rgb(var(--bad) / .08); color: rgb(var(--bad)); }
.icon-btn.edit:hover { background: rgb(var(--fg) / .06); color: rgb(var(--fg)); }
.icon-btn .ic { width: 16px; height: 16px; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }
.pill-link { background: rgb(var(--accent) / .1); color: rgb(var(--accent-ink)); border: 0; border-radius: 99px; padding: 2px 9px; font-size: .75rem; font-weight: 600; margin-left: 6px; cursor: pointer; text-decoration: none !important; }

/* Foto */
.ph-day-title { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; font-weight: 700; color: rgb(var(--muted)); margin-bottom: 12px; }
.photos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .photos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.photo { position: relative; display: block; padding: 0; border: 1px solid rgb(var(--line)); border-radius: var(--radius); overflow: hidden; background: rgb(var(--surface)); cursor: pointer; text-align: left; color: inherit; font: inherit; box-shadow: var(--shadow); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: rgb(var(--surface-2)); transition: transform 400ms var(--ease); }
.photo:hover img { transform: scale(1.03); }
.photo .cap { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: .8125rem; }
.photo .cap span:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo .cap span + span { color: rgb(var(--subtle)); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Grafik dashboard ---------- */
.hbars { display: flex; flex-direction: column; gap: 2px; }
.hbar { display: grid; grid-template-columns: minmax(84px, 32%) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; transition: background-color var(--dur) var(--ease); }
.hbar:hover, .hbar:focus-visible { background: rgb(var(--fg) / .04); }
.hbar-label { font-size: .8125rem; min-width: 0; overflow-wrap: anywhere; color: rgb(var(--muted)); }
.hbar-track { display: block; height: 10px; }
.hbar-fill { display: block; height: 100%; background: rgb(var(--real)); border-radius: 0 6px 6px 0; transition: width 400ms var(--ease); }
.hbar-fill.plan { background: rgb(var(--info)); }
.hbar-fill.accent { background: rgb(var(--accent-bar)); }
.hbar-value { font-size: .8125rem; text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-weight: 600; }
.pair-tracks { display: flex; flex-direction: column; gap: 3px; }
.pair-tracks .hbar-track { height: 7px; }
.hold-note, .axis-note { color: rgb(var(--subtle)); font-size: .75rem; font-weight: 400; }
.over-note { color: rgb(var(--bad)); font-size: .75rem; }
.legend { display: flex; gap: 6px 16px; align-items: center; font-size: .75rem; color: rgb(var(--subtle)); flex-wrap: wrap; margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend .key.plan { background: rgb(var(--info)); }
.legend .key.real { background: rgb(var(--real)); }
.chart-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(var(--subtle)); font-size: .875rem; padding: 32px 0; text-align: center; }
.chart-empty .ic { width: 26px; height: 26px; color: rgb(var(--accent-bar) / .55); }

.colchart { display: flex; flex-direction: column; gap: 8px; }
.col-plot { position: relative; height: 180px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; padding-left: 52px; border-bottom: 1px solid rgb(var(--line)); }
.gridline { position: absolute; left: 0; right: 0; border-top: 1px dashed rgb(var(--line)); pointer-events: none; }
.gridline span { position: absolute; left: 0; top: -.65em; font-size: .6875rem; color: rgb(var(--subtle)); background: rgb(var(--surface)); padding-right: 4px; }
.col-slot { height: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 8px 8px 0 0; position: relative; z-index: 1; transition: background-color var(--dur) var(--ease); }
.col-slot:hover, .col-slot:focus-visible { background: rgb(var(--fg) / .04); }
.col-bar { display: block; width: min(64%, 24px); background: rgb(var(--real)); border-radius: 6px 6px 0 0; transition: height 400ms var(--ease); }
.col-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; padding-left: 52px; font-size: .6875rem; color: rgb(var(--subtle)); text-align: center; }
@media (max-width: 479.98px) { .col-labels span:nth-child(even) { visibility: hidden; } }

.chart-table { margin-top: 12px; }
.chart-table summary { cursor: pointer; font-size: .8125rem; font-weight: 500; color: rgb(var(--subtle)); width: max-content; }
.chart-table summary:hover { color: rgb(var(--fg)); }
.chart-table .table-wrap { margin-top: 8px; border: 1px solid rgb(var(--line)); border-radius: var(--radius-sm); }

.dev-list { display: flex; flex-direction: column; }
.dev-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 8px; margin: 0 -8px; border-radius: 10px; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.dev-item + .dev-item { border-top: 1px solid rgb(var(--line)); }
.dev-item:hover, .dev-item:focus-visible { background: rgb(var(--fg) / .03); }
.dev-item .name { font-size: .875rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dev-item .sub { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: .75rem; color: rgb(var(--subtle)); font-variant-numeric: tabular-nums; }

.chart-tip { position: fixed; z-index: 70; pointer-events: none; white-space: pre-line; max-width: 260px;
  background: rgb(var(--fg)); color: rgb(var(--bg)); font-size: .8125rem; line-height: 1.5; padding: 8px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-lg); }

/* ---------- Navigasi bawah (HP & tablet) ---------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); align-items: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgb(var(--surface) / .88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid rgb(var(--line));
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }
.bottom-nav button[data-view] { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 54px; justify-content: center; border: 0; background: transparent; color: rgb(var(--subtle)); font-size: .6875rem; font-weight: 600; border-radius: 12px; }
.bottom-nav button[data-view] .ic { width: 22px; height: 22px; }
.bottom-nav button[aria-current="page"] { color: rgb(var(--accent-ink)); }
.bottom-add { width: 56px; height: 56px; margin: -20px 8px 0; border-radius: 20px; border: 0; display: grid; place-items: center; background: rgb(var(--accent)); color: rgb(var(--on-accent)); box-shadow: 0 10px 24px -8px rgb(var(--accent) / .6); transition: transform 120ms var(--ease); }
.bottom-add:active { transform: scale(.95); }
.bottom-add .ic { width: 26px; height: 26px; stroke-width: 2.2; }

/* ---------- Dialog: modal di desktop, bottom sheet di HP ---------- */
.modal {
  padding: 0; border: 1px solid rgb(var(--line)); border-radius: 22px; background: rgb(var(--surface)); color: rgb(var(--fg));
  width: min(580px, calc(100vw - 32px)); max-height: min(90vh, 880px); box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-sm { width: min(440px, calc(100vw - 32px)); }
.modal-photo { width: min(1000px, calc(100vw - 32px)); }
.modal::backdrop { background: rgb(17 21 22 / .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: pop 240ms var(--ease); }
.modal[open]::backdrop { animation: fade-in 240ms var(--ease); }
.modal-body { display: flex; flex-direction: column; max-height: inherit; }
.modal-body:focus { outline: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 16px 24px; border-bottom: 1px solid rgb(var(--line)); }
.modal-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.modal-scroll { padding: 24px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid rgb(var(--line)); background: rgb(var(--surface-2) / .4); flex-wrap: wrap; }
.confirm-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; flex: none; background: rgb(var(--accent) / .1); color: rgb(var(--accent-ink)); }
.confirm-icon.is-danger { background: rgb(var(--bad) / .1); color: rgb(var(--bad)); }
@media (max-width: 639.98px) {
  .modal, .modal-sm, .modal-photo {
    width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal[open] { animation: sheet-up 300ms var(--ease); }
  .modal-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 99px; background: rgb(var(--line-strong)); }
  .modal-head { position: relative; padding-top: 20px; }
  .modal-scroll { padding: 20px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .modal-foot > .flex-1 { display: none; }
}
.pv-stage { position: relative; background: rgb(14 18 19); }
.pv-stage img { width: 100%; max-height: 64vh; object-fit: contain; touch-action: pan-y; user-select: none; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; border: 0; background: rgb(255 255 255 / .92); color: rgb(29 38 34); box-shadow: var(--shadow-lg); transition: opacity var(--dur) var(--ease); }
.pv-nav.prev { left: 12px; }
.pv-nav.next { right: 12px; }
.pv-nav:disabled { opacity: 0; pointer-events: none; }
.pv-count { position: absolute; left: 12px; bottom: 12px; padding: 2px 10px; border-radius: 99px; background: rgb(0 0 0 / .55); color: #fff; font-size: .75rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 12px 18px 12px 14px; border-radius: 14px; font-size: .875rem; font-weight: 600;
  background: rgb(var(--fg)); color: rgb(var(--bg)); box-shadow: var(--shadow-lg);
  transform: translate(-50%, 16px); opacity: 0; transition: transform 240ms var(--ease), opacity 240ms var(--ease);
}
@media (min-width: 1024px) { .toast { left: calc(50% + var(--sidebar) / 2); } }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast .ic { width: 18px; height: 18px; flex: none; }
.toast-ok .ic { color: rgb(134 210 165); }
.dark .toast-ok .ic { color: rgb(47 122 76); }
.toast-error .ic { color: rgb(240 150 138); }
.dark .toast-error .ic { color: rgb(178 64 56); }
.toast-info .ic { color: rgb(140 204 207); }
.dark .toast-info .ic { color: rgb(36 88 93); }
@media (max-width: 1023.98px) { .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Animasi: pelan dan pendek ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view:not([hidden]) { animation: rise 320ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Checklist administrasi ---------- */
.seg { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: rgb(var(--fg) / .05); }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 10px;
  background: transparent; color: rgb(var(--subtle)); font-size: .8125rem; font-weight: 600;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.seg button:hover { color: rgb(var(--fg)); }
.seg button[aria-pressed="true"] { background: rgb(var(--surface)); color: rgb(var(--fg)); box-shadow: 0 1px 3px rgb(29 38 34 / .1); }
@media (pointer: coarse) { .seg button { height: 40px; } }
.adm-stage { overflow: hidden; }
.adm-stage.is-active { border-color: rgb(var(--accent-bar) / .55); box-shadow: 0 0 0 4px rgb(var(--accent) / .08); }
.adm-stage-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; flex-wrap: wrap; }
@media (min-width: 640px) { .adm-stage-head { padding: 18px 24px; } }
.adm-stage-head .adm-title { font-size: 1rem; font-weight: 700; }
.adm-toggle { display: grid; place-items: center; width: 32px; height: 32px; margin-top: -3px; border: 0; border-radius: 10px; background: rgb(var(--fg) / .05); color: rgb(var(--muted)); flex: none; }
.adm-toggle .ic { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); transform: rotate(-90deg); }
.adm-stage.open .adm-toggle .ic { transform: none; }
.adm-progress { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: rgb(var(--subtle)); max-width: 420px; }
.adm-act { grid-area: act; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.adm-tools { display: inline-flex; }
.adm-tools .icon-btn { width: 30px; height: 30px; }
.adm-add { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px dashed rgb(var(--line-strong)); background: transparent; color: rgb(var(--muted)); font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.adm-add:hover { border-color: rgb(var(--accent-bar)); color: rgb(var(--accent-ink)); background: rgb(var(--accent) / .07); }
.adm-add .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .adm-add { height: 40px; } .adm-tools .icon-btn { width: 40px; height: 40px; } }

.adm-body { border-top: 1px solid rgb(var(--line)); }
.adm-colhead { display: none; }
.adm-row, .adm-group { display: grid; gap: 6px 10px; align-items: center; padding: 8px 18px; border-top: 1px solid rgb(var(--line)); }
.adm-body > :first-child { border-top: 0; }
.adm-no { grid-area: no; color: rgb(var(--subtle)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; text-align: center; }
.adm-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.adm-status { grid-area: status; }
.adm-date { grid-area: date; }
.adm-note { grid-area: note; }
.adm-link { grid-area: link; display: flex; align-items: center; gap: 4px; min-width: 0; }
.adm-row input, .adm-row select { height: 34px !important; font-size: .8125rem !important; border-radius: 10px !important; }
@media (pointer: coarse) { .adm-row input, .adm-row select { height: 44px !important; font-size: 16px !important; } }

/* HP, tablet & laptop kecil (sidebar memakan tempat): tiap dokumen jadi kartu bertumpuk */
.adm-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "no name name" ". status status" ". date date" ". link link" ". note note" ". act act"; padding: 14px 18px; }
.adm-row .adm-act { justify-content: flex-start; }
.adm-row.tpl { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "no name act"; padding: 8px 18px; }
.adm-row.tpl .adm-act { justify-content: flex-end; }
.adm-group { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "no name" ". act"; }
.adm-group .adm-act { justify-content: flex-start; }
@media (min-width: 1280px) {
  .adm-colhead { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) 140px 136px minmax(0, 1fr) minmax(0, .9fr) 148px; gap: 10px; padding: 10px 24px; font-size: .75rem; font-weight: 600; color: rgb(var(--subtle)); background: rgb(var(--surface-2) / .55); }
  .adm-row { grid-template-columns: 44px minmax(0, 1.5fr) 140px 136px minmax(0, 1fr) minmax(0, .9fr) 148px; grid-template-areas: "no name status date note link act"; padding: 7px 24px; }
  .adm-row .adm-act { flex-wrap: nowrap; justify-content: flex-end; }
  .adm-row.tpl, .adm-group { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "no name act"; padding: 9px 24px; }
  .adm-group .adm-act { justify-content: flex-end; }
}
.adm-group.lvl-section { background: rgb(var(--surface-2) / .5); font-weight: 700; }
.adm-group.lvl-item, .adm-group.lvl-subsection { font-weight: 600; }
.lvl-subsection > .adm-name, .adm-empty.lvl-subitem, .adm-addbar.lvl-item { padding-left: 14px; }
.lvl-subitem > .adm-name, .adm-addbar.lvl-subitem { padding-left: 28px; }
.adm-group.has-bad > .adm-no { color: rgb(var(--bad)); }
.adm-row.st-bad { background: rgb(var(--bad) / .05); box-shadow: inset 3px 0 0 rgb(var(--bad) / .8); }
.adm-row.st-bad .adm-title { color: rgb(var(--bad)); font-weight: 600; }
.adm-row.st-ok .adm-no { color: rgb(var(--ok)); }
.adm-row.st-na .adm-title { color: rgb(var(--subtle)); text-decoration: line-through; text-decoration-color: rgb(var(--subtle) / .6); }
.adm-status[data-v="ok"] { border-color: rgb(var(--ok) / .5); background-color: rgb(var(--ok) / .07); color: rgb(var(--ok)); font-weight: 600; }
.adm-status[data-v="bad"] { border-color: rgb(var(--bad) / .5); background-color: rgb(var(--bad) / .08); color: rgb(var(--bad)); font-weight: 700; }
.adm-status[data-v="na"] { color: rgb(var(--subtle)); }

.adm-title { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; overflow-wrap: anywhere; }
button.adm-title:hover { background: rgb(var(--fg) / .05); }
.adm-pen { opacity: 0; color: rgb(var(--subtle)); transition: opacity var(--dur) var(--ease); }
.adm-pen .ic { width: 13px; height: 13px; }
button.adm-title:hover .adm-pen, button.adm-title:focus-visible .adm-pen { opacity: 1; }
@media (pointer: coarse) { .adm-pen { opacity: .55; } }
.adm-rename { height: 34px !important; max-width: 520px; font-weight: 600; }
.adm-count { font-size: .75rem; font-weight: 600; color: rgb(var(--subtle)); font-variant-numeric: tabular-nums; }
.adm-count.is-ok { color: rgb(var(--ok)); }
.adm-empty { padding: 10px 18px 10px 56px; font-size: .8125rem; font-style: italic; color: rgb(var(--subtle)); border-top: 1px solid rgb(var(--line)); }
@media (min-width: 1280px) { .adm-empty { padding-left: 78px; } }
.adm-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 18px 10px 56px; font-size: .8125rem; color: rgb(var(--subtle)); background: rgb(var(--surface-2) / .4); border-top: 1px dashed rgb(var(--line)); }
@keyframes flash { 0%, 40% { background-color: rgb(var(--accent) / .18); } 100% { background-color: transparent; } }
.adm-row.flash { animation: flash 1.8s var(--ease); }

/* Kelola template */
.tpl-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: rgb(var(--muted)); font-size: .875rem; font-weight: 500; text-align: left; transition: background-color var(--dur) var(--ease); }
.tpl-chip:hover { background: rgb(var(--fg) / .05); }
.tpl-chip[aria-pressed="true"] { background: rgb(var(--accent) / .1); color: rgb(var(--accent-ink)); font-weight: 600; }
.tpl-chip .ic { width: 16px; height: 16px; flex: none; }
@media (pointer: coarse) { .tpl-chip { min-height: 44px; } }

/* ---- Layar masuk (versi web) ---- */
.login-gate { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; border-radius: 24px; box-shadow: var(--shadow-lg); }
.login-card .brand-mark { width: 48px; height: 48px; border-radius: 15px; }
.login-card .brand-mark .ic { width: 26px; height: 26px; }
.login-card .page-title { font-size: 2rem; line-height: 2.375rem; }
/* 16px agar iPhone tidak memperbesar halaman saat kolom diisi */
.login-card input:not([type="checkbox"]) { font-size: 1rem; height: 46px; }
.login-submit { height: 46px; width: 100%; font-size: 1rem; margin-top: 4px; }
.pass-wrap { position: relative; display: flex; }
.pass-wrap input { padding-right: 104px; }
.pass-toggle {
  position: absolute; top: 5px; right: 5px; bottom: 5px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: rgb(var(--accent-ink)); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}
.pass-toggle:hover { background: rgb(var(--accent) / .08); }
/* Sebelum masuk, sembunyikan seluruh aplikasi selain latar dan layar masuk. */
#tpk[data-auth="required"] > :not(.app-bg):not(#login-gate) { display: none !important; }

/* Filter dashboard "Administrasi belum lengkap": hanya tampilkan hal terkait administrasi. */
.dash-admin-only { display: none; }
#view-dashboard[data-filter="admin"] .dash-ops { display: none; }
#view-dashboard[data-filter="ops"] .dash-adm { display: none; }
#view-dashboard[data-filter="admin"] .dash-admin-only { display: block; }

/* ===== Beranda "Hari ini" ===== */
.lead { font-size: 1.0625rem; line-height: 1.6; color: rgb(var(--muted)); max-width: 62ch; margin-top: -8px; text-wrap: pretty; }

/* Empat angka kunci: satu baris tenang, bukan empat kartu besar */
.pulse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(var(--line)); border: 1px solid rgb(var(--line)); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 900px) { .pulse { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pulse-item { --tone: var(--accent-bar); background: rgb(var(--surface)); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.pulse-item[data-tone="bad"] { --tone: var(--bad); }
.pulse-item[data-tone="warn"] { --tone: var(--warn); }
.pulse-item[data-tone="ok"] { --tone: var(--ok); }
.pulse-item::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--tone)); }
.pulse-label { font-size: .75rem; font-weight: 600; color: rgb(var(--subtle)); }
.pulse-value { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.pulse-item[data-tone="bad"] .pulse-value { color: rgb(var(--bad)); }
.pulse-value small { font-family: var(--font-sans); font-size: .875rem; font-weight: 600; color: rgb(var(--subtle)); margin-left: 3px; letter-spacing: 0; }
.pulse-sub { font-size: .75rem; line-height: 1.4; color: rgb(var(--subtle)); overflow-wrap: anywhere; }

/* Dua kolom: tugas (utama) dan proyek berjalan (samping) */
.today { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .today { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; } }
.today-main .card-head { flex-wrap: wrap; align-items: center; }
.today-main .seg { max-width: 100%; overflow-x: auto; }
.today-main .seg button { white-space: nowrap; }
.today .card-head { padding-bottom: 6px; }
.sub-head { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--subtle)); padding: 18px 18px 8px; }
@media (min-width: 640px) { .sub-head { padding: 20px 24px 8px; } }
.today-main .list-rows, .today-side .list-rows { border-top: 1px solid rgb(var(--line)); }
.more-row { display: block; width: 100%; padding: 12px 18px; font: inherit; font-size: .8125rem; font-weight: 600; color: rgb(var(--accent-ink)); text-align: left; background: none; border: 0; cursor: pointer; }
.more-row:hover { background: rgb(var(--accent) / .06); }
.run-row .run-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .75rem; color: rgb(var(--subtle)); }
.run-row .run-bar .bar { flex: 1; }

/* Grafik dilipat: tersedia, tapi tidak berebut perhatian */
.fold > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 700; border: 1px solid rgb(var(--line)); border-radius: var(--radius); background: rgb(var(--surface)); box-shadow: var(--shadow); }
.fold > summary::-webkit-details-marker { display: none; }
.fold-hint { font-weight: 500; font-size: .8125rem; color: rgb(var(--subtle)); flex: 1; }
.fold > summary .ic { transition: transform var(--dur) var(--ease); color: rgb(var(--subtle)); }
.fold[open] > summary .ic { transform: rotate(90deg); }
.fold-body { padding-top: 16px; }

/* ===== Daftar proyek ===== */
.seg-scroll { overflow-x: auto; scrollbar-width: none; width: max-content; max-width: 100%; }
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll button { white-space: nowrap; }
.pcard { gap: 14px; position: relative; }
.pcard[data-tone="bad"] { border-left: 3px solid rgb(var(--bad) / .8); }
.pcard[data-tone="warn"] { border-left: 3px solid rgb(var(--warn) / .7); }
.pcard-prog { display: flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 700; }
.pcard-prog .bar { flex: 1; }
.pcard-ok { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: rgb(var(--ok)); font-weight: 600; }
.pcard-ok .ic { width: 15px; height: 15px; }
.pcard .reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-foot { padding-top: 12px; }

/* ===== Detail proyek: masalah di paling atas ===== */
.alert-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgb(var(--warn) / .08); border: 1px solid rgb(var(--warn) / .22); }
.alert-strip.ok { background: rgb(var(--ok) / .07); border-color: rgb(var(--ok) / .22); color: rgb(var(--ok)); font-size: .875rem; font-weight: 600; gap: 8px; }
.alert-strip.ok .ic { width: 16px; height: 16px; }
.alert-title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--muted)); margin-right: 4px; }
.alert-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border-radius: 99px; font: inherit; font-size: .8125rem; font-weight: 600; border: 1px solid transparent; background: rgb(var(--surface)); color: rgb(var(--fg)); }
button.alert-chip { cursor: pointer; }
button.alert-chip:hover { border-color: rgb(var(--fg) / .2); }
.alert-chip.bad { color: rgb(var(--bad)); border-color: rgb(var(--bad) / .3); }
.alert-chip.warn { color: rgb(var(--warn)); border-color: rgb(var(--warn) / .3); }
.alert-chip .ic { width: 14px; height: 14px; }
.run-row > .min-w-0 { flex: 1; }
.run-row .dev-pill { flex: none; align-self: flex-start; width: auto; }
@media (max-width: 639px) { .fold-hint { display: none; } .fold > summary { justify-content: space-between; } }

@media (min-width: 1500px) { .form-ex { grid-template-columns: 9.5rem minmax(0, 1fr) 9rem 12rem 9rem auto; } }

/* Judul tahap administrasi tidak boleh terjepit tombol aksi */
#tpk .adm-stage-head > .min-w-0 { flex: 1 1 12rem; min-width: 12rem; }
#tpk .adm-stage-head .adm-act { flex: 1 1 100%; justify-content: flex-start; }
@media (min-width: 900px) { #tpk .adm-stage-head .adm-act { flex: none; justify-content: flex-end; } }


/* =====================================================================
   Gaya "Editorial": judul tebal rapat dengan satu kata miring bergaya serif,
   tombol pil, label huruf kapital kecil, bagian bernomor, latar gelap pekat.
   ===================================================================== */
.page-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; font-size: 2.25rem; }
.page-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.03em; color: rgb(var(--muted)); }
@media (min-width: 768px) { .page-title { font-size: 3.25rem; } }
.eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--subtle)); margin-bottom: 10px; }
.lead { font-size: 1.125rem; color: rgb(var(--muted)); }
.btn { border-radius: 999px; }
.btn-primary { box-shadow: none; }
.btn-primary:hover, .dark .btn-primary:hover { background: rgb(var(--fg) / .88); }
.btn-subtle { background: transparent; border-color: rgb(var(--line-strong)); }
.btn-subtle:hover { background: rgb(var(--fg) / .06); }
.seg { border-radius: 999px; }
.seg button { border-radius: 999px; }
.seg button[aria-pressed="true"] { background: rgb(var(--fg)); color: rgb(var(--bg)); box-shadow: none; }
.badge { border-radius: 999px; }
.pcard { border-radius: var(--radius); }
.pcard:hover { border-color: rgb(var(--fg) / .28); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .8); }
.card { border-radius: var(--radius); }

/* Bagian bernomor 01 / 02 seperti daftar langkah */
.today-main { counter-reset: sec; }
.today-main .sub-head { counter-increment: sec; display: flex; align-items: center; gap: 10px; }
.today-main .sub-head::before { content: "0" counter(sec); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 99px; border: 1px solid rgb(var(--line-strong)); font-size: .625rem; letter-spacing: 0; color: rgb(var(--muted)); }

/* Angka kunci: sans tebal rapat, lebih besar */
.pulse-value { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; font-size: 2.5rem; }
.pulse { border-radius: var(--radius); }

/* Latar gelap: cahaya hangat tipis di pojok kanan atas */
.dark .app-bg {
  background:
    radial-gradient(900px 560px at 95% -12%, rgb(224 140 110 / .12), transparent 62%),
    radial-gradient(800px 520px at -8% 105%, rgb(110 140 200 / .08), transparent 60%);
}
.dark .topbar { border-color: rgb(var(--line)); }
.dark .side-link[aria-current="page"] { background: rgb(var(--fg) / .08); color: rgb(var(--fg)); }


/* =====================================================================
   Terang elegan + halaman Pengadaan Langsung
   ===================================================================== */
.eyebrow { color: rgb(var(--brass)); }
.app-bg {
  background:
    radial-gradient(1000px 560px at 100% -10%, rgb(var(--real) / .08), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgb(var(--accent-bar) / .05), transparent 60%);
}
:root:not(.dark) .topbar { background: rgb(var(--surface) / .7); }
@media (min-width: 1024px) { :root:not(.dark) .topbar { background: rgb(var(--surface) / .55); } }
.side-label-2 { margin-top: 18px; }
.select-sm { height: 40px; width: auto; min-width: 150px; font-size: .875rem; }
.head-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 6px; }
.head-money b { color: rgb(var(--fg)); font-weight: 700; }

/* ---------- Papan alur ---------- */
.flow-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(256px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .flow-board { margin: 0 -24px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .flow-board { margin: 0; padding-left: 0; padding-right: 0; } }
.fcol { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--radius); background: rgb(var(--surface-2) / .6); border: 1px solid rgb(var(--line)); }
.fcol-head { display: flex; gap: 10px; align-items: flex-start; }
.fcol-no { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 99px; border: 1px solid rgb(var(--line-strong)); font-size: .6875rem; font-weight: 700; color: rgb(var(--brass)); background: rgb(var(--surface)); }
.fcol-title { font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.fcol-count { font-size: .75rem; font-weight: 700; color: rgb(var(--subtle)); background: rgb(var(--fg) / .06); border-radius: 99px; padding: 1px 8px; }
.fcol-hint { font-size: .75rem; color: rgb(var(--subtle)); line-height: 1.4; margin-top: 2px; }
.fcol-sum { font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); padding: 0 2px; }
.fcol-list { display: flex; flex-direction: column; gap: 10px; }
.fcol-empty { font-size: .8125rem; color: rgb(var(--subtle)); text-align: center; padding: 22px 8px; border: 1px dashed rgb(var(--line-strong)); border-radius: var(--radius-sm); }
.fcol[data-col="lunas"] .fcol-no { color: rgb(var(--ok)); border-color: rgb(var(--ok) / .4); }
.fcard { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow); cursor: pointer; text-align: left; transition: border-color var(--dur) var(--ease), transform 160ms var(--ease), box-shadow var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .fcard:hover { border-color: rgb(var(--fg) / .22); transform: translateY(-1px); } }
.fcard:active { transform: scale(.985); }
.fcard.is-late { box-shadow: inset 3px 0 0 rgb(var(--bad)), var(--shadow); }
.fcard.is-hold { box-shadow: inset 3px 0 0 rgb(var(--warn)), var(--shadow); }
.fc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fc-title { font-size: .9375rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.fc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: rgb(var(--subtle)); }
.fc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fc-meta .ic { width: 13px; height: 13px; }
.fc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fc-value { font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; }
.fc-when { font-size: .75rem; color: rgb(var(--subtle)); text-align: right; }
.fc-prog { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; }
.fc-prog .bar { flex: 1; height: 5px; }
.fc-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border-radius: 99px; border: 1px solid rgb(var(--line-strong)); background: transparent; font: inherit; font-size: .8125rem; font-weight: 600; color: rgb(var(--fg)); padding: 0 12px; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fc-act:hover { background: rgb(var(--fg)); color: rgb(var(--bg)); border-color: rgb(var(--fg)); }
.fc-act .ic { width: 14px; height: 14px; }
@media (pointer: coarse) { .fc-act { min-height: 44px; } }

/* ---------- CV pelaksana ---------- */
.cv-list { display: grid; gap: 16px; }
@media (min-width: 768px) { .cv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .cv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cv-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--radius); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); box-shadow: var(--shadow); }
.cv-head { display: flex; gap: 14px; align-items: flex-start; }
.cv-mono { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgb(var(--fg)); color: rgb(var(--bg)); font-family: var(--font-display); font-style: italic; font-size: 1.125rem; letter-spacing: -0.02em; }
.cv-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.cv-holder { font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 2px; }
.cv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgb(var(--line)); border: 1px solid rgb(var(--line)); border-radius: 14px; overflow: hidden; }
.cv-stats div { background: rgb(var(--surface)); padding: 10px 12px; min-width: 0; }
.cv-stats dt { font-size: .6875rem; font-weight: 600; color: rgb(var(--subtle)); }
.cv-stats dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cv-share { display: flex; align-items: center; gap: 10px; font-size: .75rem; color: rgb(var(--subtle)); }
.cv-share .bar { flex: 1; }
.cv-share .num { font-weight: 700; color: rgb(var(--fg)); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(var(--line)); padding-top: 8px; display: flex; flex-direction: column; font-size: .8125rem; }
.cv-projects .link-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 0; background: none; border: 0; font: inherit; text-align: left; color: rgb(var(--fg)); cursor: pointer; }
.cv-projects .link-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cv-projects .link-row:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.cv-projects li.text-subtle { padding: 6px 0; }
.cv-none { font-size: .8125rem; color: rgb(var(--subtle)); border-top: 1px solid rgb(var(--line)); padding-top: 12px; }

/* ---------- Keuangan ---------- */
.fin-value { font-size: 1.75rem !important; }
@media (min-width: 640px) { .fin-value { font-size: 2rem !important; } }
.fin-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1200px) { .fin-grid { gap: 20px; } }
.fin-tbl td { padding-top: 14px; padding-bottom: 14px; }
.fin-tbl th:first-child, .fin-tbl td:first-child { padding-left: 24px; }
.fin-tbl th:last-child, .fin-tbl td:last-child { padding-right: 24px; }
.fin-tbl tbody tr { cursor: pointer; }
.fin-name { display: block; font-weight: 600; }
.fin-meta { display: block; font-size: .75rem; color: rgb(var(--subtle)); }
.fin-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .6875rem; color: rgb(var(--subtle)); max-width: 260px; }
.fin-bar .bar { flex: 1; height: 4px; }
/* HP: tabel jadi kartu bertumpuk */
@media (max-width: 767.98px) {
  .fin-tbl thead { display: none; }
  .fin-tbl, .fin-tbl tbody, .fin-tbl tr, .fin-tbl td { display: block; width: 100%; }
  .fin-tbl tr { padding: 14px 18px; border-bottom: 1px solid rgb(var(--line)); }
  .fin-tbl td { border: 0; padding: 3px 0 !important; text-align: left; }
  .fin-tbl td.r { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; }
  .fin-tbl td.r::before { content: attr(data-label); color: rgb(var(--subtle)); font-weight: 500; }
  .fin-tbl td:first-child { padding-bottom: 8px !important; }
}
.pay-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 18px; }
@media (min-width: 640px) { .pay-row { padding: 12px 24px; } }
.pay-date { font-size: .75rem; color: rgb(var(--subtle)); width: 76px; }
.pay-row .title { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-row .meta { font-size: .75rem; color: rgb(var(--subtle)); }
.pay-amt { display: flex; flex-direction: column; align-items: flex-end; font-size: .875rem; }
.pay-amt small { font-size: .6875rem; color: rgb(var(--subtle)); }
@media (max-width: 479.98px) { .pay-row { grid-template-columns: minmax(0, 1fr) auto auto; } .pay-date { display: none; } }

/* ---------- Kalender ---------- */
.cal-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1200px) { .cal-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 20px; } }
.cal-tl .card-head { flex-wrap: wrap; align-items: center; }
.ag-row { display: grid; grid-template-columns: 44px 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
@media (min-width: 640px) { .ag-row { padding: 12px 24px; } }
.ag-row:hover { background: rgb(var(--fg) / .03); }
.ag-date { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.ag-date b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; }
.ag-date small { font-size: .6875rem; color: rgb(var(--subtle)); text-transform: uppercase; letter-spacing: .06em; }
.ag-dot { width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--accent-bar)); }
.ag-dot[data-tone="bad"] { background: rgb(var(--bad)); }
.ag-dot[data-tone="warn"] { background: rgb(var(--warn)); }
.ag-dot[data-tone="info"] { background: rgb(var(--info)); }
.ag-row .title { font-weight: 600; font-size: .875rem; }
.ag-row .meta { font-size: .75rem; color: rgb(var(--subtle)); }
.ag-row .chev { color: rgb(var(--subtle)); }
.cal-agenda .list-rows { border-top: 1px solid rgb(var(--line)); }
.ag-late { color: rgb(var(--bad)); }
.gantt { overflow-x: auto; }
.g-head, .g-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; }
.g-head, .g-body { min-width: 620px; }
.g-head { border-bottom: 1px solid rgb(var(--line)); padding-bottom: 8px; font-size: .6875rem; font-weight: 600; color: rgb(var(--subtle)); }
.g-scale { position: relative; height: 16px; }
.g-scale span { position: absolute; top: 0; transform: translateX(4px); white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }
.g-body { position: relative; padding-top: 18px; }
.g-row { width: 100%; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid rgb(var(--line) / .7); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.g-row:hover { background: rgb(var(--fg) / .025); }
.g-label-col { display: flex; flex-direction: column; min-width: 0; padding-right: 14px; }
.g-name { font-size: .8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sub { font-size: .6875rem; color: rgb(var(--subtle)); }
.g-track { position: relative; height: 22px; }
.g-bar { position: absolute; top: 0; height: 22px; border-radius: 99px; background: rgb(var(--accent-bar) / .18); border: 1px solid rgb(var(--accent-bar) / .45); overflow: hidden; }
.g-fill { position: absolute; inset: 0 auto 0 0; background: rgb(var(--accent-bar) / .55); }
.g-bar[data-flow="usulan"], .g-bar[data-flow="penawaran"] { background: rgb(var(--fg) / .05); border-style: dashed; border-color: rgb(var(--fg) / .3); }
.g-bar[data-flow="tagih"] { background: rgb(var(--warn) / .16); border-color: rgb(var(--warn) / .5); }
.g-bar[data-flow="lunas"] { background: rgb(var(--ok) / .16); border-color: rgb(var(--ok) / .5); }
.g-bar.is-late { border-color: rgb(var(--bad)); }
.g-bar.is-late .g-fill { background: rgb(var(--bad) / .55); }
.g-grid { position: absolute; top: 0; bottom: 0; left: calc(190px + (100% - 190px) * var(--x) / 100); border-left: 1px dashed rgb(var(--line-strong) / .7); pointer-events: none; }
.g-today { position: absolute; top: 0; bottom: 0; left: calc(190px + (100% - 190px) * var(--x) / 100); width: 0; border-left: 2px solid rgb(var(--bad)); z-index: 1; pointer-events: none; }
.g-today i { position: absolute; top: 2px; left: 6px; font-style: normal; font-size: .625rem; font-weight: 700; color: rgb(var(--bad)); white-space: nowrap; }
@media (max-width: 639.98px) { .g-head, .g-row { grid-template-columns: 130px minmax(0, 1fr); } .g-head, .g-body { min-width: 640px; } .g-today, .g-grid { left: calc(130px + (100% - 130px) * var(--x) / 100); } }

.flow-jump { margin-top: -8px; }
.flow-jump .num { opacity: .6; margin-left: 2px; }
@media (min-width: 1024px) { .flow-jump { display: none; } }

#detail-head .page-title { font-size: 1.875rem; letter-spacing: -0.035em; }
@media (min-width: 768px) { #detail-head .page-title { font-size: 2.5rem; } }

/* =====================================================================
   Beranda bergaya landing page: hero dari data, jalur paket bergerak,
   pita angka yang menghitung naik, kartu muncul saat digulir.
   ===================================================================== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-io: cubic-bezier(0.77, 0, 0.175, 1); }
.home { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 768px) { .home { gap: 36px; } }
.btn-lg { height: 48px; padding: 0 22px; font-size: .9375rem; }

.hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; border: 1px solid rgb(var(--line)); background: linear-gradient(180deg, rgb(var(--surface)) 0%, rgb(var(--surface) / .6) 100%); box-shadow: var(--shadow); padding: 28px 22px 18px; }
@media (min-width: 768px) { .hero { padding: 48px 44px 26px; } }
.hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--fg) / .055) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--fg) / .055) 1px, transparent 1px);
  background-size: 36px 36px; -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%);
  animation: grid-drift 48s linear infinite; }
@keyframes grid-drift { to { background-position: 36px 36px, 36px 36px; } }
.hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 140%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--real) / .22), transparent 70%), radial-gradient(closest-side at 30% 70%, rgb(var(--accent-bar) / .14), transparent 70%);
  filter: blur(20px); animation: glow-float 16s ease-in-out infinite alternate; }
@keyframes glow-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, 6%, 0) scale(1.08); } }
.hero-inner { max-width: 880px; }
.hero-eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--brass)); }
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--ok)); box-shadow: 0 0 0 0 rgb(var(--ok) / .5); animation: live 2.4s var(--ease-out) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgb(var(--ok) / .45); } 70%, 100% { box-shadow: 0 0 0 8px rgb(var(--ok) / 0); } }
.hero-title { margin-top: 14px; font-size: clamp(2.125rem, 5.4vw, 4.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; max-width: 15ch; text-wrap: balance; }
.hero-title .w { display: inline-block; }
.hero-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.03em; color: rgb(var(--accent-ink));
  background: linear-gradient(rgb(var(--real) / .45), rgb(var(--real) / .45)) no-repeat 0 92% / 100% .09em; padding-right: .06em; }
.hero-sub { margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; color: rgb(var(--muted)); max-width: 60ch; }
@media (min-width: 768px) { .hero-sub { font-size: 1.1875rem; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 479.98px) { .hero-cta .btn { flex: 1 1 100%; } }

/* Jalur paket */
.road-wrap { margin: 30px -22px 0; padding: 0 22px 6px; overflow-x: auto; scrollbar-width: none; }
.road-wrap::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .road-wrap { margin: 40px -44px 0; padding: 0 44px 8px; } }
.road { position: relative; height: 100px; min-width: 620px; }
.r-line { position: absolute; left: 0; right: 0; top: 78px; height: 12px; border-radius: 99px; background: rgb(var(--fg) / .07); overflow: hidden; }
.r-line::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: repeating-linear-gradient(90deg, rgb(var(--surface)) 0 14px, transparent 14px 28px); opacity: .9; animation: lane 6s linear infinite; }
@keyframes lane { to { background-position: 28px 0; } }
.r-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--to) * 1%); background: linear-gradient(90deg, rgb(var(--accent-bar) / .25), rgb(var(--accent-bar) / .55)); border-radius: 99px; transform-origin: left; }
.r-stop { position: absolute; top: 0; left: calc(var(--x) * 1%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.r-label { order: -1; font-size: .75rem; font-weight: 600; color: rgb(var(--muted)); white-space: nowrap; }
.r-label b { color: rgb(var(--brass)); font-weight: 700; margin-right: 2px; }
.r-node { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 99px; background: rgb(var(--surface)); border: 1px solid rgb(var(--line-strong)); font-size: .8125rem; font-weight: 700; box-shadow: 0 6px 16px -10px rgb(var(--fg) / .5); transition: transform 200ms var(--ease-out), background-color 200ms, color 200ms; }
.r-stop::after { content: ""; width: 1px; height: 8px; background: rgb(var(--line-strong)); margin-top: -8px; }
@media (hover: hover) and (pointer: fine) { .r-stop:hover .r-node { transform: translateY(-2px); background: rgb(var(--fg)); color: rgb(var(--bg)); } }
.r-dot-track { position: absolute; inset: 0; transform: translateX(calc(var(--x) * 1%)); pointer-events: none; }
.r-dot { position: absolute; left: 0; top: 77px; width: 14px; height: 14px; margin-left: calc(-7px + (var(--lane) - 1.5) * 13px); border-radius: 99px; border: 2px solid rgb(var(--surface)); background: rgb(var(--accent-bar)); pointer-events: auto; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgb(var(--fg) / .25); transition: transform 160ms var(--ease-out); }
.r-dot.is-done { background: rgb(var(--ok)); }
.r-dot.is-late { background: rgb(var(--bad)); animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(var(--bad) / .5); } 80%, 100% { box-shadow: 0 0 0 9px rgb(var(--bad) / 0); } }
.r-dot:hover, .r-dot:focus-visible { transform: scale(1.35); z-index: 2; }
.r-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px) scale(.97); opacity: 0; pointer-events: none; white-space: nowrap; font-size: .75rem; font-weight: 600; padding: 6px 10px; border-radius: 10px; background: rgb(var(--fg)); color: rgb(var(--bg)); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.r-dot:hover .r-tip, .r-dot:focus-visible .r-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Pita angka */
.band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgb(var(--line-strong)); border-bottom: 1px solid rgb(var(--line)); }
@media (min-width: 900px) { .band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band-item { display: flex; flex-direction: column; gap: 6px; padding: 20px 4px 22px; min-width: 0; }
.band-item + .band-item { padding-left: 18px; border-left: 1px solid rgb(var(--line)); }
@media (max-width: 899.98px) { .band-item:nth-child(3) { padding-left: 4px; border-left: 0; } .band-item:nth-child(n+3) { border-top: 1px solid rgb(var(--line)); } }
.band-label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--subtle)); }
.band-value { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; overflow-wrap: anywhere; }
.band-sub { font-size: .8125rem; color: rgb(var(--subtle)); }

.home-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; } }
.home-side { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1100px) { .home-side { gap: 20px; } }
.home .card { transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .home .card:hover { box-shadow: 0 1px 2px rgb(var(--fg) / .04), 0 24px 48px -28px rgb(var(--fg) / .35); } }
.home .card-head .link { margin-top: 2px; white-space: nowrap; }

/* ---------- Gerak masuk (hanya saat beranda dibuka) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.home-side .reveal:nth-child(2) { transition-delay: 90ms; }
.play .hero-eyebrow { animation: rise-in 600ms var(--ease-out) both; }
.play .hero-title .w { animation: word-in 760ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 55ms); }
.play .hero-title em { animation: word-in 760ms var(--ease-out) both, underline-in 900ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 55ms), 900ms; }
.play .hero-sub { animation: rise-in 700ms var(--ease-out) 520ms both; }
.play .hero-cta { animation: rise-in 700ms var(--ease-out) 640ms both; }
.play .r-fill { animation: draw 1200ms var(--ease-io) 500ms both; }
.play .r-stop { animation: pop-in 500ms var(--ease-out) both; animation-delay: calc(600ms + var(--i) * 90ms); }
.play .r-dot-track { animation: travel 1300ms var(--ease-io) both; animation-delay: calc(900ms + var(--d) * 70ms); }
.play .r-dot { animation: fade-dot 300ms var(--ease-out) both; animation-delay: calc(900ms + var(--d) * 70ms); }
.play .r-dot.is-late { animation: fade-dot 300ms var(--ease-out) both, ping 2s var(--ease-out) 2.4s infinite; animation-delay: calc(900ms + var(--d) * 70ms), 2.4s; }
@keyframes word-in { from { opacity: 0; transform: translateY(.35em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes underline-in { from { background-size: 0% .09em; } }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes pop-in { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.95); } }
@keyframes travel { from { transform: translateX(0); } }
@keyframes fade-dot { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-glow, .live-dot, .r-line::after, .r-dot.is-late { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 767.98px) { .road-wrap { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* =====================================================================
   KACA ("liquid glass"): latar ambient berwarna yang berubah per halaman,
   permukaan tembus pandang + blur, tombol bulat kaca, nav bawah pil
   mengambang dengan lensa yang bergeser, gerak pegas saat ditekan.
   ===================================================================== */
@property --tint { syntax: '<color>'; inherits: true; initial-value: rgb(214 150 96); }
@property --tint2 { syntax: '<color>'; inherits: true; initial-value: rgb(92 124 190); }
:root {
  --glass: 255 255 255; --glass-a: .56; --glass-strong: .82; --glass-border: 255 255 255 / .75; --glass-hi: 255 255 255 / .7;
  --glass-blur: 22px; --spring: cubic-bezier(.34, 1.56, .64, 1); --sheet: cubic-bezier(.32, .72, 0, 1);
  --tint: rgb(214 150 96); --tint2: rgb(92 124 190); --blob-a: .38;
  transition: --tint 900ms var(--ease-out), --tint2 900ms var(--ease-out);
}
:root.dark { --glass: 30 30 36; --glass-a: .52; --glass-strong: .8; --glass-border: 255 255 255 / .1; --glass-hi: 255 255 255 / .08; --blob-a: .3; }
/* Warna latar mengikuti halaman, seperti sampul album yang mewarnai layar */
:root[data-view="flow"] { --tint: rgb(84 120 196); --tint2: rgb(140 108 200); }
:root[data-view="projects"], :root[data-view="detail"] { --tint: rgb(204 128 92); --tint2: rgb(96 150 160); }
:root[data-view="calendar"] { --tint: rgb(112 104 206); --tint2: rgb(206 120 150); }
:root[data-view="finance"] { --tint: rgb(72 158 112); --tint2: rgb(196 160 80); }
:root[data-view="cvs"] { --tint: rgb(170 100 150); --tint2: rgb(90 130 200); }
:root[data-view="ahsp"], :root[data-view="templates"] { --tint: rgb(180 140 70); --tint2: rgb(80 140 150); }

.app-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: rgb(var(--bg)); }
.app-bg::before, .app-bg::after { content: ""; position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; filter: blur(90px); opacity: var(--blob-a); will-change: transform; }
.app-bg::before { background: var(--tint); top: -30vmax; right: -20vmax; animation: blob-a 28s ease-in-out infinite alternate; }
.app-bg::after { background: var(--tint2); bottom: -35vmax; left: -25vmax; animation: blob-b 34s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate3d(-18vmax, 14vmax, 0) scale(1.15); } }
@keyframes blob-b { to { transform: translate3d(16vmax, -12vmax, 0) scale(.9); } }
.dark .app-bg { background: rgb(var(--bg)); }

/* Permukaan kaca */
.card, .pcard, .cv-card, .hero, .pulse, .fold > summary, .fcol, .empty, .chip, .search, .seg, .fcard,
.modal, .toast, .tabs-wrap, .alert-strip, .kpi {
  background: rgb(var(--glass) / var(--glass-a)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  border-color: rgb(var(--glass-border)) !important;
  box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 1px 2px rgb(var(--fg) / .04), 0 14px 34px -22px rgb(var(--fg) / .38);
}
/* Kaca di dalam kaca: tanpa blur kedua (lebih ringan di HP) */
.fcol .fcard, .card .chip, .hero .seg, .card .seg, .card .empty, .fcol .fcol-empty, .modal .seg { -webkit-backdrop-filter: none; backdrop-filter: none; }
.fcol .fcard { background: rgb(var(--glass) / var(--glass-strong)) !important; }
.card .empty, .list-rows > .empty { background: transparent !important; box-shadow: none; border: 0; }
.fold > summary { border-radius: 999px; }
.modal { background: rgb(var(--glass) / var(--glass-strong)) !important; -webkit-backdrop-filter: blur(34px) saturate(1.9); backdrop-filter: blur(34px) saturate(1.9); }
.modal::backdrop { background: rgb(10 10 14 / .28); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); }
.toast { color: rgb(var(--fg)) !important; border-radius: 999px !important; }
.alert-strip { border-radius: 18px; }
.alert-strip.ok { color: rgb(var(--ok)); }
/* Isi tabel/sel ber-garis: garis tipis tanpa latar penuh */
.pulse, .kpi-row, .cv-stats { background: transparent !important; gap: 0 !important; }
.pulse-item, .kpi-row > div, .cv-stats div { background: transparent !important; box-shadow: 0 0 0 .5px rgb(var(--fg) / .1); }
.tbl th { background: rgb(var(--fg) / .035); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), select, textarea, .select {
  background-color: rgb(var(--glass) / .7); border-color: rgb(var(--fg) / .12);
}
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]), .dark select, .dark textarea, .dark .select { background-color: rgb(255 255 255 / .05); }
.search { border-radius: 999px; }
.search input { background: transparent !important; border: 0 !important; }

/* Kilau mengikuti kursor (desktop) */
.card, .pcard, .cv-card, .fcard { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .card::after, .pcard::after, .cv-card::after, .fcard::after, .hero::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .35), transparent 45%);
    transition: opacity 300ms var(--ease-out); mix-blend-mode: soft-light;
  }
  .card:hover::after, .pcard:hover::after, .cv-card:hover::after, .fcard:hover::after, .hero:hover::after { opacity: 1; }
}

/* Tombol: pil & bulat kaca, pegas saat dilepas */
.btn { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 450ms var(--spring); }
.btn:active:not(:disabled), .fc-act:active, .r-stop:active, .side-link:active, .bottom-nav button:active { transform: scale(.94); transition-duration: 90ms; }
.btn-subtle, .btn-icon.btn-ghost {
  background: rgb(var(--glass) / .5); border: 1px solid rgb(var(--glass-border));
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 6px 16px -10px rgb(var(--fg) / .35);
}
.btn-icon { border-radius: 999px; }
.btn-primary { box-shadow: 0 10px 24px -12px rgb(var(--fg) / .6), inset 0 1px 0 rgb(255 255 255 / .18); }
.card .btn-icon.btn-ghost, .modal .btn-icon.btn-ghost, .pay-row .btn-icon, .cv-head .btn-icon { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background: rgb(var(--fg) / .05); border-color: transparent; }

/* HP: bilah atas jadi tombol kaca mengambang di atas tepi buram */
@media (max-width: 1023.98px) {
  .topbar { background: transparent !important; border-bottom: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: env(safe-area-inset-top, 0px) 12px 0 12px; gap: 10px; }
  .topbar::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(rgb(var(--bg) / .75), rgb(var(--bg) / 0));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .brand { padding: 5px 14px 5px 5px; border-radius: 999px; background: rgb(var(--glass) / .5); border: 1px solid rgb(var(--glass-border)); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 6px 16px -10px rgb(var(--fg) / .35); margin-right: auto; max-width: calc(100% - 156px); }
  .brand-mark { border-radius: 999px; width: 34px; height: 34px; }
  .topbar .btn-icon { width: 44px; height: 44px; }
  .actions-panel.open { background: rgb(var(--glass) / var(--glass-strong)) !important; -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9); border: 1px solid rgb(var(--glass-border)); border-radius: 24px; transform-origin: top right; animation: menu-in 420ms var(--spring); }
  .tabs-wrap { top: calc(64px + env(safe-area-inset-top, 0px)); border-radius: 999px; margin: 0; padding: 0 6px; border: 1px solid rgb(var(--glass-border)); }
}
@keyframes menu-in { from { opacity: 0; transform: scale(.88) translateY(-6px); } }

/* Desktop: sidebar kaca mengambang */
@media (min-width: 1024px) {
  .topbar { inset: 12px auto 12px 12px; width: calc(var(--sidebar) - 12px); border-radius: 26px; border: 1px solid rgb(var(--glass-border)) !important;
    background: rgb(var(--glass) / .5) !important; -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
    box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 20px 50px -30px rgb(var(--fg) / .45); }
  .side-link { border-radius: 999px; }
  .side-link[aria-current="page"] { background: rgb(var(--glass) / .85); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 4px 14px -8px rgb(var(--fg) / .35); color: rgb(var(--fg)); }
  .dark .side-link[aria-current="page"] { background: rgb(255 255 255 / .1); }
  .tabs-wrap { border-radius: 999px; padding: 0 8px; border: 1px solid rgb(var(--glass-border)); top: 12px; }
}
.tabs-wrap .tab::after { display: none; }
.tabs-wrap .tab { border-radius: 999px; margin: 6px 0; height: 40px; transition: background-color 250ms var(--ease-out), color 250ms; }
.tabs-wrap .tab[aria-selected="true"] { background: rgb(var(--fg)); color: rgb(var(--bg)); }
.tabs-wrap .tab[aria-selected="true"] .ic, .tabs-wrap .tab[aria-selected="true"] .tab-count { color: inherit; }

/* Nav bawah: pil kaca mengambang + lensa yang bergeser */
.bottom-nav { left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; padding: 6px !important; border-radius: 999px;
  background: rgb(var(--glass) / .55) !important; border: 1px solid rgb(var(--glass-border)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) !important; backdrop-filter: blur(26px) saturate(1.9) !important;
  box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 18px 40px -18px rgb(var(--fg) / .5); }
.bottom-nav button[data-view] { position: relative; z-index: 1; height: 54px; border-radius: 999px; }
.bottom-nav button[aria-current="page"] { color: rgb(var(--fg)) !important; }
.nav-lens { position: absolute; z-index: 0; top: 6px; left: 0; height: 54px; width: 0; border-radius: 999px; pointer-events: none;
  background: rgb(var(--glass) / .9); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 6px 18px -10px rgb(var(--fg) / .45);
  transition: transform 560ms var(--spring), width 560ms var(--spring), opacity 200ms; }
.dark .nav-lens { background: rgb(255 255 255 / .12); }
.bottom-add { margin: 0 6px !important; width: 54px !important; height: 54px !important; border-radius: 999px !important; transition: transform 450ms var(--spring) !important; }
.bottom-add:active { transform: scale(.9) !important; transition-duration: 90ms !important; }
@media (max-width: 1023.98px) { .app-main { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); } }

/* Transisi antar halaman (View Transitions) */
.topbar { view-transition-name: sidebar; }
.bottom-nav { view-transition-name: tabbar; }
:root.vt .view:not([hidden]) { animation: none; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 420ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(.99); filter: blur(6px); } }

/* Dialog: muncul dengan pegas; di HP naik seperti lembar */
.modal[open] { animation: modal-in 520ms var(--spring); }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@media (max-width: 639.98px) { .modal[open] { animation: sheet-up 520ms var(--sheet); } }

/* Kartu daftar: angkat halus saat disentuh */
.pcard, .fcard, .cv-card { transition: transform 450ms var(--spring), box-shadow 300ms var(--ease-out), border-color 200ms; }
@media (hover: hover) and (pointer: fine) { .pcard:hover, .cv-card:hover { transform: translateY(-3px); } }
.pcard:active, .fcard:active { transform: scale(.98); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .app-bg::before, .app-bg::after { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .nav-lens { transition: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .pcard, .cv-card, .hero, .pulse, .fcol, .modal, .bottom-nav, .topbar { background: rgb(var(--surface)) !important; }
}

/* ---------- Ilustrasi keadaan kosong ---------- */
.empty-art { position: relative; display: block; width: 140px; height: 100px; margin-bottom: 6px; animation: float 6s ease-in-out infinite; }
.ea-svg { width: 100%; height: 100%; }
.ea-sheet { fill: rgb(var(--glass) / .9); stroke: rgb(var(--fg) / .14); stroke-width: 1.2; }
.ea-back { fill: rgb(var(--accent-bar) / .08); stroke-dasharray: 3 3; }
.ea-line { stroke: rgb(var(--fg) / .14); stroke-width: 3; stroke-linecap: round; }
.ea-spark { fill: rgb(var(--real)); opacity: .7; transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
.ea-spark.s2 { animation-delay: .8s; fill: rgb(var(--accent-bar)); } .ea-spark.s3 { animation-delay: 1.6s; } .ea-spark.s4 { animation-delay: 2.2s; fill: rgb(var(--accent-bar)); }
.empty-ic { position: absolute; right: 14px; bottom: 2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px;
  background: rgb(var(--fg)); color: rgb(var(--bg)); box-shadow: 0 10px 24px -10px rgb(var(--fg) / .6); }
.empty .empty-ic .ic { width: 20px; height: 20px; color: inherit; }
.empty strong { font-size: .9375rem; }
.empty > span:last-child:not(.empty-art) { max-width: 46ch; line-height: 1.5; }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.1); } }

/* ---------- Ringkasan minggu ini ---------- */
.weekly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 18px 18px; }
@media (min-width: 640px) { .weekly { padding: 16px 24px 22px; } }
.wk { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 16px; background: rgb(var(--fg) / .035); }
.wk-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: rgb(var(--glass) / .9); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 4px 10px -6px rgb(var(--fg) / .4); margin-bottom: 6px; }
.wk-ic .ic { width: 15px; height: 15px; }
.wk-v { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.wk-l { font-size: .75rem; color: rgb(var(--subtle)); }

/* ---------- Pencarian cepat ---------- */
.search-trigger { display: none; }
@media (min-width: 1024px) {
  .search-trigger { display: flex; align-items: center; gap: 10px; height: 40px; margin: -6px 0 18px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid rgb(var(--fg) / .1); background: rgb(var(--glass) / .6); color: rgb(var(--subtle)); font: inherit; font-size: .8125rem; cursor: pointer; transition: border-color 200ms, background-color 200ms; order: 0; }
  .search-trigger:hover { border-color: rgb(var(--fg) / .25); color: rgb(var(--fg)); }
  .search-trigger .ic { width: 16px; height: 16px; }
  .search-trigger .st-label { flex: 1; text-align: left; }
}
@media (max-width: 1023.98px) {
  .search-trigger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(var(--glass-border)); background: rgb(var(--glass) / .5); color: rgb(var(--fg)); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 6px 16px -10px rgb(var(--fg) / .35); padding: 0; order: 2; transition: transform 450ms var(--spring); }
  .search-trigger:active { transform: scale(.92); transition-duration: 90ms; }
  .search-trigger .st-label, .search-trigger kbd { display: none; }
  #btn-theme { order: 3; } #btn-menu { order: 4; }
}
kbd { font: 600 .6875rem/1 var(--font-sans); padding: 4px 6px; border-radius: 6px; background: rgb(var(--fg) / .07); color: rgb(var(--muted)); border: 1px solid rgb(var(--fg) / .08); }
.palette { width: min(640px, calc(100vw - 24px)); margin-top: 12vh; margin-bottom: auto; padding: 0; border-radius: 26px; overflow: hidden; }
.palette .modal-body { display: flex; flex-direction: column; max-height: 70vh; }
.pal-field { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgb(var(--fg) / .08); }
.pal-field .ic { width: 20px; height: 20px; color: rgb(var(--subtle)); }
.pal-field input { flex: 1; border: 0 !important; background: transparent !important; height: 32px !important; font-size: 1.0625rem !important; padding: 0 !important; box-shadow: none !important; outline: none; }
.pal-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.pal-group { padding: 10px 12px 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--subtle)); }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background-color 120ms; }
.pal-item[aria-selected="true"] { background: rgb(var(--fg) / .07); }
.pal-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgb(var(--glass) / .9); box-shadow: inset 0 1px 0 rgb(var(--glass-hi)), 0 2px 8px -4px rgb(var(--fg) / .35); }
.pal-ic .ic { width: 16px; height: 16px; }
.pal-label { display: block; font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-hint { display: block; font-size: .75rem; color: rgb(var(--subtle)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item .min-w-0 { flex: 1; }
.pal-go { width: 16px; height: 16px; color: rgb(var(--subtle)); opacity: 0; transform: translateX(-4px); transition: opacity 150ms, transform 200ms var(--ease-out); }
.pal-item[aria-selected="true"] .pal-go { opacity: 1; transform: none; }
.pal-none { padding: 28px 12px; text-align: center; color: rgb(var(--subtle)); font-size: .875rem; }
.pal-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid rgb(var(--fg) / .08); font-size: .75rem; color: rgb(var(--subtle)); }
.pal-foot kbd { margin-right: 3px; }
@media (max-width: 639.98px) { .pal-foot { display: none; } .palette { margin-top: 8vh; } }
@media (max-width: 639.98px) { .palette[open] { animation: modal-in 520ms var(--spring); } }

/* ---------- Katalog AHSP & pemilih di form RAB ---------- */
.ahsp-tbl td { padding-top: 11px; padding-bottom: 11px; }
.ahsp-tbl th:first-child, .ahsp-tbl td:first-child { padding-left: 22px; }
.picker { position: relative; }
.search-sm { height: 44px; }
.pick-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; padding: 6px; border-radius: 18px;
  background: rgb(var(--glass) / .95); border: 1px solid rgb(var(--glass-border)); box-shadow: 0 20px 40px -18px rgb(var(--fg) / .5); animation: menu-in 300ms var(--spring); transform-origin: top center; }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pick:hover, .pick:focus-visible { background: rgb(var(--fg) / .06); }
.pick-name { display: block; font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-meta { display: block; font-size: .6875rem; color: rgb(var(--subtle)); }
.pick-price { font-weight: 700; font-size: .875rem; white-space: nowrap; }
.pick-price small { font-weight: 500; color: rgb(var(--subtle)); margin-left: 2px; }
.ppn-in { width: 52px !important; height: 26px !important; padding: 0 6px !important; font-size: .8125rem !important; border-radius: 8px !important; text-align: right; }
.chip-strong { background: rgb(var(--fg)) !important; color: rgb(var(--bg)) !important; }
.chip-strong b { color: inherit; }
#confirm-msg { white-space: pre-line; }

/* ---------- Detail proyek: tombol laporan ---------- */
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Petunjuk pasang ---------- */
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.install-steps li { display: flex; gap: 14px; align-items: flex-start; }
.install-steps .num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 99px; background: rgb(var(--fg)); color: rgb(var(--bg)); font-weight: 700; font-size: .875rem; }
.install-steps p { font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .empty-art, .ea-spark { animation: none; } }
.picker .search { flex: none; }
.modal-title { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; font-size: 1.25rem; }
@media (min-width: 1024px) {
  .actions-panel { overflow-y: auto; scrollbar-width: none; margin: 0 -6px; padding: 0 6px; }
  .actions-panel::-webkit-scrollbar { display: none; }
  .side-link, .actions-panel .btn { height: 36px; }
  .side-label-2 { margin-top: 12px; }
  .side-sep { margin: 8px 4px; }
  #btn-theme { height: 36px; margin-top: 4px; flex: none; }
}
@media (max-width: 1023.98px) { .brand { max-width: calc(100% - 168px); } }
@media (max-width: 639.98px) { .ahsp-tbl th:first-child, .ahsp-tbl td:first-child { display: none; } .ahsp-tbl th:nth-child(2), .ahsp-tbl td:nth-child(2) { padding-left: 18px; } }
@media (min-width: 640px) { .ahsp-tbl .fin-meta { display: none; } }

/* Katalog AHSP: chip kategori (per kelompok/lembar), bisa digeser ke samping di layar kecil */
.kchips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.kchips-sub { padding-left: 10px; }
.kchip { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 14px; border-radius: 99px; font-size: .8125rem; font-weight: 500; cursor: pointer;
  background: var(--glass, rgb(var(--surface))); border: 1px solid rgb(var(--line)); color: rgb(var(--subtle)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .35s var(--spring, ease), background .2s, color .2s, border-color .2s; }
.kchip small { font-size: .7rem; opacity: .7; }
.kchip:hover { color: rgb(var(--fg)); transform: translateY(-1px); }
.kchip[aria-pressed="true"] { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: rgb(var(--on-accent)); font-weight: 600; }
.kchips-sub .kchip { padding: 6px 12px; font-size: .78rem; }
.ahsp-count:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .kchip { transition: none; } }

/* ---------- Animasi masuk layar (aktif sebentar lewat html.enter) ---------- */
@keyframes bar-in { from { transform: scaleX(0); } }
@keyframes col-in { from { transform: scaleY(0); } }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }
.enter .bar > .fill, .enter .hbar-fill { transform-origin: left center; animation: bar-in 850ms var(--ease-out) 180ms backwards; }
.enter .col-bar { transform-origin: bottom center; animation: col-in 700ms var(--ease-out) 180ms backwards; }
.enter .kpi, .enter .pcard, .enter .fcard { animation: card-in 480ms var(--ease-out) backwards; }
.enter :is(.kpi, .pcard, .fcard):nth-child(2) { animation-delay: 55ms; }
.enter :is(.kpi, .pcard, .fcard):nth-child(3) { animation-delay: 110ms; }
.enter :is(.kpi, .pcard, .fcard):nth-child(4) { animation-delay: 165ms; }
.enter :is(.kpi, .pcard, .fcard):nth-child(5) { animation-delay: 220ms; }
.enter :is(.kpi, .pcard, .fcard):nth-child(6) { animation-delay: 275ms; }
.enter :is(.kpi, .pcard, .fcard):nth-child(n+7) { animation-delay: 330ms; }
@media (prefers-reduced-motion: reduce) {
  .enter .bar > .fill, .enter .hbar-fill, .enter .col-bar, .enter .kpi, .enter .pcard, .enter .fcard { animation: none !important; }
}

/* Pembaruan langsung dari perangkat lain: bar tumbuh ke nilai baru (tanpa mengulang animasi kartu) */
.live-update .bar > .fill, .live-update .hbar-fill { transform-origin: left center; animation: bar-in 600ms var(--ease-out) backwards; }
.live-update .col-bar { transform-origin: bottom center; animation: col-in 520ms var(--ease-out) backwards; }
@media (prefers-reduced-motion: reduce) {
  .live-update .bar > .fill, .live-update .hbar-fill, .live-update .col-bar { animation: none !important; }
}

/* ---------- Dokumen yang perlu diunggah (DED / AHSP) ---------- */
.field-group { border: 1px dashed rgb(var(--line-strong)); border-radius: 14px; padding: 14px 16px 16px; margin: 0; min-width: 0; }
.field-group > legend { padding: 0 8px; font-size: .8125rem; font-weight: 700; color: rgb(var(--muted)); }
.doc-chip { color: rgb(var(--warn)); }
.doc-chip.is-ok { color: rgb(var(--ok)); }

/* ---------- Kalender & to-do mingguan ---------- */
.td-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.td-range { display: block; font-size: .9375rem; }
.td-count { display: block; font-size: .8125rem; color: rgb(var(--subtle)); margin-top: 2px; }
.td-nav { display: flex; align-items: center; gap: 6px; }
.td-today { height: 36px; padding: 0 14px; font-size: .8125rem; }
.td-flip { transform: scaleX(-1); }
.td-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .td-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .td-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.td-day { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 14px; background: rgb(var(--surface-2, var(--surface))); border: 1px solid rgb(var(--line)); }
.td-day.is-today { border-color: rgb(var(--accent-bar) / .6); box-shadow: 0 0 0 3px rgb(var(--accent) / .08); }
.td-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.td-dow { font-weight: 700; font-size: .875rem; }
.td-date { font-size: .8125rem; color: rgb(var(--subtle)); margin-right: auto; }
.td-add { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; border: 1px solid rgb(var(--line-strong)); background: transparent; color: rgb(var(--fg)); cursor: pointer; transition: background-color 150ms ease, transform 140ms var(--ease-out); }
.td-add .ic { width: 16px; height: 16px; }
.td-add:active, .td-ok:active, .td-del:active, .td-check:active { transform: scale(.92); }
.td-events { display: flex; flex-direction: column; gap: 4px; }
.td-ev { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 8px; border: 0; border-radius: 8px; background: rgb(var(--fg) / .05); color: rgb(var(--muted)); font: inherit; font-size: .75rem; text-align: left; cursor: pointer; }
.td-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-ev .ag-dot { flex: none; }
.td-more { font-size: .6875rem; color: rgb(var(--subtle)); padding-left: 8px; }
.td-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.td-item { display: grid; grid-template-rows: 1fr; border-radius: 10px; transition: grid-template-rows 220ms var(--ease-out), opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }
.td-in { display: flex; align-items: flex-start; gap: 8px; min-height: 0; overflow: hidden; padding: 5px 2px; }
.td-item.is-leaving { grid-template-rows: 0fr; opacity: 0; transform: translateX(10px); pointer-events: none; }
.td-item.is-new { animation: td-in 340ms var(--ease-out) backwards; }
.td-item.flash { animation: flash 1.8s var(--ease); }
.td-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 7px; border: 1.5px solid rgb(var(--line-strong)); background: transparent; color: rgb(var(--on-accent)); cursor: pointer; transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 140ms var(--ease-out); }
.td-check .ic { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: opacity 140ms ease, transform 200ms var(--ease-out); }
.td-item.is-done .td-check { background: rgb(var(--accent-bar)); border-color: rgb(var(--accent-bar)); }
.td-item.is-done .td-check .ic { opacity: 1; transform: scale(1); }
.td-text { position: relative; flex: 1; min-width: 0; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; transition: color 200ms ease; }
.td-text::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--ease-out); }
.td-item.is-done .td-text { color: rgb(var(--subtle)); }
.td-item.is-done .td-text::after { transform: scaleX(1); }
.td-del { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: rgb(var(--subtle)); cursor: pointer; opacity: .55; transition: opacity 150ms ease, background-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out); }
.td-del .ic { width: 14px; height: 14px; }
.td-form { display: flex; gap: 6px; align-items: center; animation: td-in 240ms var(--ease-out) backwards; }
.td-input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid rgb(var(--line-strong)); background: rgb(var(--surface)); color: inherit; font: inherit; font-size: .875rem; }
.td-input:focus { outline: none; border-color: rgb(var(--accent-bar)); box-shadow: 0 0 0 3px rgb(var(--accent) / .14); }
.td-ok, .td-cancel { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 0; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 150ms ease; }
.td-ok { background: rgb(var(--accent)); color: rgb(var(--on-accent)); }
.td-cancel { background: transparent; color: rgb(var(--subtle)); }
.td-ok .ic, .td-cancel .ic { width: 16px; height: 16px; }
.td-empty { margin: 0; padding: 6px 2px; font-size: .8125rem; color: rgb(var(--subtle)); }
@keyframes td-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes td-day-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes td-week-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes td-week-prev { from { opacity: 0; transform: translateX(-28px); } }
.enter .td-day { animation: td-day-in 440ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.td-grid.wk-next .td-day { animation: td-week-next 320ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.td-grid.wk-prev .td-day { animation: td-week-prev 320ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
@media (hover: hover) and (pointer: fine) {
  .td-add:hover { background: rgb(var(--fg) / .06); }
  .td-ev:hover { background: rgb(var(--fg) / .1); color: rgb(var(--fg)); }
  .td-del:hover { opacity: 1; background: rgb(var(--bad) / .1); color: rgb(var(--bad)); }
  .td-check:hover { border-color: rgb(var(--accent-bar)); }
}
@media (hover: none) { .td-del { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  .td-item, .td-item.is-new, .td-form, .td-text::after, .td-check .ic { animation: none !important; transition-duration: 1ms !important; }
  .enter .td-day, .td-grid.wk-next .td-day, .td-grid.wk-prev .td-day { animation: none !important; }
  .td-item.is-leaving { transform: none; }
}


/* ---------- Ringkasan, laba, pajak, menu bawah 5 tombol ---------- */
.bottom-nav button[data-view] { min-width: 0; padding: 0 2px; font-size: .65rem; letter-spacing: -.01em; }
.bottom-nav button[data-view] span { max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
@media (max-width: 399.98px) { .bottom-nav button[data-view] { font-size: .5875rem; letter-spacing: -.02em; } }
@media (max-width: 359.98px) { .bottom-nav button[data-view] { font-size: .5625rem; } .bottom-nav button[data-view] .ic { width: 20px; height: 20px; } .bottom-add { width: 46px !important; height: 46px !important; margin: 0 3px !important; } }

.pulse.pulse-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pulse.pulse-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .pulse.pulse-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

@media (min-width: 768px) { .kpi-row.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .kpi-row.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tax-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
@media (min-width: 640px) { .tax-row { padding: 12px 24px; } }
.tax-row > .min-w-0 { flex: 1 1 220px; }
.tax-row.is-paid .title { opacity: .55; }
.tax-amt { font-size: .9375rem; }
.tax-row .meta .badge { margin-right: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .tax-row { animation: td-in 320ms var(--ease-out) both; }
}

/* Peringatan panjang membungkus ke baris berikutnya, tidak terpotong di layar sempit */
.attn-row .reasons { flex-wrap: wrap; }
.attn-row .badge { white-space: normal; text-align: left; line-height: 1.35; max-width: 100%; }