:root{
  --kertas:#fff; --latar:#F3F5FA; --panel:#EEF1F8; --garis:#DCE1EE;
  --tinta:#1B3FA0; --tinta-tua:#0F1E4A; --teks:#26304A; --redup:#58627F;
  --stempel:#D7263D; --pink:#F5CCD5; --kuning:#F8E7A3; --hijau:#137A47;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --badan:'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--latar); color:var(--teks); font:400 15px/1.5 var(--badan)}
h1,h2,h3{font-family:var(--display); color:var(--tinta-tua); margin:0; letter-spacing:-.015em; line-height:1.15}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--tinta)}
:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
[hidden]{display:none!important}
.tersembunyi{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.df-top{position:sticky; top:0; z-index:30; background:var(--tinta-tua); color:#fff}
.df-top-isi{max-width:1240px; margin:0 auto; padding:0 16px; height:56px; display:flex; align-items:center; gap:14px}
.df-kembali{display:flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font:800 17px/1 var(--display); white-space:nowrap}
.df-kembali svg{width:20px; height:20px}
.df-label{font-size:13px; color:#AEB9D8; border-left:1px solid rgba(255,255,255,.2); padding-left:14px; white-space:nowrap}
.df-top .sp{flex:1}
.df-wa{display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 15px; border-radius:99px; background:#fff; color:var(--tinta-tua); text-decoration:none; font-weight:700; font-size:14px; white-space:nowrap}
.df-wa:hover{background:var(--kuning)}
.df-banner{background:var(--kuning); color:var(--tinta-tua); font-size:13.5px}
.df-banner-isi{max-width:1240px; margin:0 auto; padding:8px 16px; display:flex; gap:4px 14px; align-items:center; flex-wrap:wrap}
.df-banner button{background:none; border:0; padding:0; color:var(--tinta); font-weight:700; text-decoration:underline; cursor:pointer; font-size:13.5px}
@media (max-width:640px){ .df-label{display:none} .df-wa{padding:0 12px; font-size:13px} }

.app{max-width:1240px; margin:0 auto; padding:22px 16px 40px}
.app-kepala{display:flex; justify-content:space-between; align-items:flex-end; gap:14px 20px; flex-wrap:wrap; margin-bottom:10px}
.app-kepala h1{font-size:clamp(25px,3.4vw,32px)}
.app-kepala p{margin:2px 0 0; color:var(--redup)}
.petunjuk{margin:0 0 16px; color:var(--redup); font-size:14px; max-width:80ch}
.petunjuk b{color:var(--tinta-tua)}
.statistik{display:flex; gap:8px; flex-wrap:wrap}
.statistik div{background:#fff; border:1px solid var(--garis); border-radius:12px; padding:8px 14px; min-width:96px}
.statistik b{display:block; font:800 22px/1.15 var(--display); color:var(--tinta-tua); font-variant-numeric:tabular-nums}
.statistik span{font-size:12.5px; color:var(--redup)}

.kartu{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:18px}
.kl-grid > *,.ht-grid > *,.hd-grid > *,.hr-grid > *,.hr-kolom > *,.dokter > *,.tv-grid > *{min-width:0}
.kartu h2{font-size:18px; margin-bottom:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:0 16px; border-radius:10px; border:1.5px solid var(--tinta); background:var(--tinta); color:#fff; font-weight:700; cursor:pointer; text-decoration:none; font-size:14.5px}
.btn:hover{background:var(--tinta-tua); border-color:var(--tinta-tua)}
.btn.alt{background:#fff; color:var(--tinta)}
.btn.alt:hover{background:var(--panel)}
.btn.kecil{min-height:34px; padding:0 12px; font-size:13.5px; border-radius:8px}
.btn.penuh{width:100%}
.btn:disabled{opacity:.4; cursor:not-allowed}
.field{display:grid; gap:5px; margin-bottom:12px}
.field label{font-size:13px; font-weight:600; color:var(--tinta-tua)}
.field input,.field select,.field textarea,.pilih{width:100%; min-height:42px; border:1.5px solid var(--garis); border-radius:10px; padding:8px 12px; background:#fff}
.field textarea{min-height:80px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.pilih:focus{border-color:var(--tinta); outline:none}
.dua{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.galat{color:var(--stempel); font-size:13px; font-weight:600; margin:0 0 10px}

.chip{display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700; background:var(--panel); color:var(--tinta); white-space:nowrap}
.chip.kuning{background:#FCF0C4; color:#6F5200}
.chip.pink{background:#FBE1E5; color:#A3172B}
.chip.hijau{background:#DDF2E6; color:var(--hijau)}
.chip.abu{background:#ECEEF3; color:#4F5874}
.chip.merah{background:var(--stempel); color:#fff}

.tabs{display:inline-flex; flex-wrap:wrap; background:#fff; border:1px solid var(--garis); border-radius:12px; padding:4px; gap:4px; margin-bottom:16px}
.tabs button{border:0; background:none; padding:8px 14px; border-radius:9px; font-weight:600; color:var(--redup); cursor:pointer; font-size:14px}
.tabs button:hover{color:var(--tinta-tua)}
.tabs button[aria-selected=true],.tabs button[aria-pressed=true]{background:var(--tinta-tua); color:#fff}

table.tabel{width:100%; border-collapse:collapse; font-size:14px}
.tabel th{text-align:left; font-size:12px; font-weight:700; color:var(--redup); padding:8px 10px; border-bottom:1.5px solid var(--garis); white-space:nowrap}
.tabel td{padding:10px; border-bottom:1px solid #EEF0F5; vertical-align:middle}
.tabel small{display:block; color:var(--redup); font-size:12.5px}
.angka{font-variant-numeric:tabular-nums}
.gulir-x{overflow-x:auto}
.kosong{color:var(--redup); text-align:center; padding:22px 8px; font-size:14px; margin:0}

.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px); background:var(--tinta-tua); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; box-shadow:0 14px 30px -12px rgba(15,30,74,.55); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; width:max-content; max-width:calc(100% - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%,0)}
dialog{border:0; border-radius:16px; padding:22px; width:min(460px, calc(100% - 24px)); max-height:calc(100% - 24px); box-shadow:0 30px 80px -20px rgba(15,30,74,.5); color:var(--teks)}
dialog::backdrop{background:rgba(15,30,74,.45)}
dialog h2{font-size:20px; margin-bottom:14px}
.dialog-aksi{display:flex; justify-content:flex-end; gap:8px; margin-top:6px}

.ajak{margin-top:28px; background:var(--tinta-tua); color:#D5DCF0; border-radius:16px; padding:24px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.ajak h2{color:#fff; font-size:22px}
.ajak p{margin:4px 0 0; max-width:58ch}
.ajak .df-wa{min-height:46px; padding:0 22px; font-size:15px}
.demo-lain{display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:14px; font-size:14px; align-items:center; color:var(--redup)}
.demo-lain a{font-weight:700}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important; animation:none!important} }