:root{
  --bg:#f4f6f3;--card:#fff;--ink:#1d2621;--muted:#66736b;--line:#dfe5e0;
  --brand:#1f7a4d;--brand-2:#145c39;--paid:#d9f2e3;--paid-ink:#16683f;
  --due:#fde4e1;--due-ink:#b42318;--future:#f1f3f1;--wa:#25d366;--radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--brand)}
h1{font-size:1.45rem;margin:.2em 0 .3em}
h2{font-size:1.1rem;margin:1.4em 0 .6em}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)} .small{font-size:.85rem} .mono{font-family:ui-monospace,Consolas,monospace}

/* top bar */
.topbar{background:var(--brand-2);color:#fff;position:sticky;top:0;z-index:20}
.topbar-in{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;margin-right:auto}
.brand small{display:block;opacity:.8;font-size:.78rem}
.logo{background:#fff;color:var(--brand-2);font-weight:800;border-radius:10px;min-width:38px;height:38px;padding:0 9px;white-space:nowrap;display:grid;place-items:center;flex:none}
.logo.l3{font-size:.92rem}
.logo.l6{font-size:.78rem}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap}
.topbar nav a{color:#e6f3ec;text-decoration:none;padding:7px 11px;border-radius:8px;font-size:.92rem}
.topbar nav a.on,.topbar nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.5rem}
@media(max-width:860px){
  .menu-btn{display:block}
  .topbar nav{display:none;position:absolute;left:0;right:0;top:60px;background:var(--brand-2);flex-direction:column;padding:8px 16px 14px}
  .nav-open .topbar nav{display:flex}
}

main.wrap{padding-top:20px;padding-bottom:40px}
.foot{color:var(--muted);font-size:.82rem;padding-bottom:30px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;margin-bottom:16px}
.salam{color:var(--brand);font-weight:600;margin:0}
.paycard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.paycard .row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line)}
.paycard .row.total{border:0;font-size:1.1rem;color:var(--brand-2)}
.paycard p{margin:.6em 0;font-size:.92rem}
@media(max-width:760px){.hero{grid-template-columns:1fr}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.stats b{display:block;font-size:1.3rem;color:var(--brand-2)}
.stats span{color:var(--muted);font-size:.85rem}
.stats .bad b{color:var(--due-ink)}

/* toolbar & forms */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:12px 0}
.toolbar label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted)}
.sticky-bar{position:sticky;top:60px;z-index:10;background:var(--bg);padding:8px 0}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
input[type=search]{flex:1;min-width:200px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--muted)}
.form label.check{flex-direction:row;align-items:center;gap:8px;color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .full{grid-column:1/-1}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.inline{display:inline}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0}
.card h2{margin-top:0}
.narrow{max-width:440px}
.head-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* buttons */
.btn{display:inline-block;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;text-decoration:none;font:inherit;font-size:.92rem;white-space:nowrap}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#063;font-weight:600}
.btn.danger{color:var(--due-ink)}
.btn.sm{padding:4px 9px;font-size:.8rem}
.btn.xs{padding:1px 7px;font-size:.75rem}
.btn.block{display:block;text-align:center}
.btn:disabled{opacity:.5}

.alert{padding:10px 14px;border-radius:8px;margin:10px 0;background:var(--paid);color:var(--paid-ink)}
.alert.err{background:var(--due);color:var(--due-ink)}
.pill{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--future);color:var(--muted)}
.pill.ok{background:var(--paid);color:var(--paid-ink)}

/* tables */
.table-wrap{overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);max-height:75vh}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
thead th{position:sticky;top:0;background:#eef3ef;z-index:3;font-size:.8rem;color:var(--muted);white-space:nowrap}
tfoot th{background:#eef3ef}
.num-right td:not(:first-child),.num-right th:not(:first-child){text-align:right}
.grid th:not(.sticky):not(.sticky2){text-align:center}
.grid th.now{color:var(--brand-2);background:#d9ecdf}
.grid .sticky{position:sticky;left:0;background:#fff;z-index:2;width:38px}
.grid .sticky2{position:sticky;left:38px;background:#fff;z-index:2;min-width:170px;box-shadow:2px 0 0 var(--line)}
.grid thead .sticky,.grid thead .sticky2{z-index:4;background:#eef3ef}
.grid .num{color:var(--muted);font-size:.85rem}
.who strong{display:block;font-weight:600;font-size:.9rem}
.who span{font-size:.78rem;color:var(--muted)}
tr.nonaktif{opacity:.55}
.cell{text-align:center;width:44px;min-width:40px;font-weight:700;border-left:1px solid #fff}
.cell.paid{background:var(--paid);color:var(--paid-ink)}
.cell.due{background:var(--due);color:var(--due-ink)}
.cell.future{background:var(--future)}
.cell.na{background:repeating-linear-gradient(45deg,#fafafa 0 4px,#f0f0f0 4px 8px)}
td.cell[data-bulan]{cursor:pointer;user-select:none}
td.cell[data-bulan]:hover{outline:2px solid var(--brand);outline-offset:-2px}
td.cell.busy{opacity:.4}
.tung{font-size:.82rem;white-space:nowrap;text-align:center}
.tung.bad{color:var(--due-ink);font-weight:600}
.tung.good{color:var(--paid-ink)}
.act{white-space:nowrap}
.legend{font-size:.82rem;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.legend .cell{display:inline-block;width:22px;height:18px;line-height:18px;border-radius:4px;font-size:.75rem}
.penutup{margin-top:24px}

.wa-text{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.85rem;line-height:1.45}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--brand-2);color:#fff;padding:10px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:50;max-width:90vw}
.toast.bad{background:var(--due-ink)}

@media print{
  .topbar,.toolbar,.actions,.act,.foot,.btn{display:none!important}
  .table-wrap{max-height:none;overflow:visible;border:0}
  body{background:#fff}
}

/* ---- Penagihan WA ---- */
.phase{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-radius:var(--radius);margin:12px 0;border:1px solid var(--line);background:var(--card)}
.phase .big{font-size:1.15rem;font-weight:700}
.phase.pengingat{border-color:#bfe3cd;background:#f0faf4}.phase.tagihan{border-color:#f3d39b;background:#fff8ea}.phase.teguran{border-color:#f2b8b0;background:#fff1ef}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em}
.tag.pengingat{background:var(--paid);color:var(--paid-ink)}.tag.tagihan{background:#fdecc8;color:#8a5a00}.tag.teguran{background:var(--due);color:var(--due-ink)}
.pill.late{background:var(--due);color:var(--due-ink)}
.wa-in{width:9.5em;padding:5px 8px;font-size:.85rem}
.sent{font-size:.78rem;color:var(--paid-ink)}.unsent{font-size:.78rem;color:var(--muted)}
.preview{white-space:pre-wrap;font-size:.82rem;background:#f7faf8;border:1px dashed var(--line);border-radius:8px;padding:10px;max-width:560px}
details.tpl summary{cursor:pointer;font-weight:600;padding:6px 0}
details.tpl textarea{width:100%;font-size:.85rem}
.ph{font-size:.78rem;color:var(--muted)}
.ph code{background:#eef3ef;padding:1px 5px;border-radius:4px;margin:2px;display:inline-block}
.btn.icon{padding:3px 8px}
[hidden]{display:none!important}

/* ketua RT & kegiatan mingguan */
.rt-ketua{display:flex;align-items:center;gap:clamp(8px,2vw,12px);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(6px,1.5vw,10px) clamp(10px,2.5vw,14px);margin:0 0 14px}
.rt-ketua img{width:clamp(40px,9vw,56px);height:clamp(40px,9vw,56px);object-fit:cover;border-radius:50%;border:2px solid var(--paid);cursor:zoom-in;flex:none}
.rt-ketua div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rt-ketua strong{font-size:clamp(.95rem,2.8vw,1.05rem);color:var(--brand-2)}
.galeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.galeri img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;background:var(--future)}
.kegiatan .lama{margin-top:14px}
.kegiatan .lama summary{cursor:pointer;color:var(--brand);font-weight:600}
.kegiatan h3{font-size:.95rem;margin:14px 0 6px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:grid;place-items:center;z-index:100;cursor:zoom-out;padding:12px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}
.foto3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.foto3 .slot{display:flex;flex-direction:column;gap:6px}
.foto3 .slot img,.foto3 .kosong{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.foto3 .kosong{display:grid;place-items:center;text-align:center;background:var(--future);color:var(--muted)}
.kg-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.kg-row .thumbs{display:flex;gap:6px}
.kg-row .thumbs img{width:72px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}

/* nama kegiatan: lebih besar & tebal */
.kg-tgl{display:block;color:var(--muted);font-size:.85rem}
.kg-judul{display:block;font-size:1.25rem;font-weight:800;line-height:1.3;color:var(--ink);margin:2px 0 4px}
.kg-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 260px}
.kg-lalu{margin:16px 0 6px}
@media(max-width:600px){.kg-judul{font-size:1.15rem}}

/* cara pembayaran di halaman warga */
.bayar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:start}
.bayar-info h3{margin:0 0 8px;font-size:1rem}
.bayar-qris img{display:block;width:100%;max-width:260px;border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;cursor:zoom-in}
.peringatan{background:#fff7e0;border:1px solid #f0d78a;color:#6b4e00;border-radius:10px;padding:10px 12px;font-size:.9rem;margin:16px 0 0}
.lightbox img{background:#fff;padding:8px}

/* ===== multi-RT & dashboard RW ===== */
.rwbar{background:#0f3d2a;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.rwbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.rwnav{display:flex;gap:4px;flex-wrap:wrap}
.rwnav a{color:#d6efe1;padding:5px 12px;border-radius:999px;font-size:.88rem;text-decoration:none}
.rwnav a:hover{background:rgba(255,255,255,.12)}
.rwnav a.on{background:#fff;color:var(--brand-2);font-weight:700}
.rtpilih label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#d6efe1}
.rtpilih select{padding:5px 10px;border-radius:8px;border:0;background:#fff;color:#12372a;font-weight:600;max-width:60vw}
.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:8px 0 18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(16,40,30,.05);display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:.8rem;color:var(--muted)}
.kpi b{font-size:1.45rem;line-height:1.2;color:var(--brand-2)}
.kpi small{color:var(--muted);font-size:.78rem}
.kpi.ok b{color:#12803f}.kpi.warn b{color:#b45309}
.rw-judul{margin:22px 0 10px;font-size:1.15rem}
.rtcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.rtcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 3px rgba(16,40,30,.06);display:flex;flex-direction:column;gap:8px}
.rtcard.mati{opacity:.65}
.rtcard header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rtcard h3{margin:0;font-size:1.15rem}
.rtcard dl{margin:4px 0 0;display:grid;gap:6px}
.rtcard dl div{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;border-top:1px dashed var(--line);padding-top:6px}
.rtcard dt{color:var(--muted)}.rtcard dd{margin:0;font-weight:700;text-align:right}
.rtcard dd.neg{color:#b42318}.rtcard dd small{font-weight:400;color:var(--muted)}
.rtcard footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.bar{height:10px;background:var(--future);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:#2a9d5c}
.bar i.mid{background:#e0a323}.bar i.lo{background:#d9534f}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:200px;padding-top:6px}
.bars .col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;min-width:0}
.bars .col i{display:block;width:70%;max-width:34px;background:linear-gradient(180deg,#2a9d5c,#177245);border-radius:6px 6px 2px 2px}
.bars .nilai{font-size:.62rem;color:var(--muted);white-space:nowrap}
.bars .lbl{font-size:.72rem;color:var(--muted)}
.matrix td.num,.matrix th{text-align:right;white-space:nowrap}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix tfoot td{border-top:2px solid var(--line);background:var(--future)}
fieldset.sub{border:1px solid var(--line);border-radius:12px;padding:10px 14px}
fieldset.sub legend{padding:0 6px;font-size:.85rem;color:var(--muted)}
.peran-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:6px 0 16px}
.peran-info div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.peran-info span{font-size:.82rem;color:var(--muted)}
.portal-hero{text-align:center;margin:10px 0 18px}
.portal{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:24px}
.portal-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 16px;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(16,40,30,.06);transition:transform .15s,box-shadow .15s}
.portal-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,40,30,.12)}
.portal-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--paid)}
.portal-card .logo{background:var(--brand-2);color:#fff;height:56px;min-width:56px}
.portal-card strong{display:block;font-size:1.2rem}
.portal-card span.small{display:block}
.portal-card em{font-style:normal;color:var(--brand);font-weight:600;margin-top:4px}

/* =====================================================================
   Penyegaran tampilan (semua halaman)
   ===================================================================== */
:root{--radius:14px;--shadow:0 1px 2px rgba(16,40,30,.06),0 4px 14px rgba(16,40,30,.05);--shadow-lg:0 10px 30px rgba(16,40,30,.16);--ring:0 0 0 3px rgba(31,122,77,.22)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}
h1{font-size:1.65rem;font-weight:800;letter-spacing:-.01em;color:#12372a}
h2{font-weight:700;color:#12372a}
a{text-underline-offset:2px}

/* bar atas */
.topbar{background:linear-gradient(135deg,#0f4a2e,#1b7a4c);box-shadow:0 2px 10px rgba(10,40,25,.25)}
.topbar nav a{border-radius:999px;padding:7px 13px;font-weight:500;transition:background .15s}
.topbar nav a.on{background:#fff;color:var(--brand-2);font-weight:700}
.topbar nav a:hover:not(.on){background:rgba(255,255,255,.18)}
.brand strong{font-size:1.02rem;letter-spacing:.005em}
.logo{box-shadow:0 1px 3px rgba(0,0,0,.2)}
main.wrap{padding-top:24px}
.foot{text-align:center;border-top:1px solid var(--line);padding-top:16px;margin-top:10px}

/* kartu */
.card,.paycard,.stats div,.rt-ketua{box-shadow:var(--shadow)}
.card{padding:20px 22px}
.card h2{font-size:1.15rem}
.card.login{margin:48px auto;box-shadow:var(--shadow-lg);padding:26px 28px}
.card.login h1{margin-top:0}
.hero{gap:24px}
.paycard{padding:18px 20px}

/* kotak ringkasan */
.stats{gap:12px}
.stats div{border:1px solid var(--line);border-left:4px solid var(--brand);padding:14px 16px}
.stats b{font-size:1.55rem;line-height:1.2}
.stats .bad{border-left-color:var(--due-ink)}

/* tombol */
.btn{border-radius:10px;padding:9px 16px;font-weight:600;border-color:#d3dbd5;box-shadow:0 1px 1px rgba(0,0,0,.04);transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
.btn:hover{border-color:var(--brand);box-shadow:0 3px 10px rgba(16,40,30,.12);transform:translateY(-1px)}
.btn:active{transform:none;box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:linear-gradient(180deg,#26935b,#1b7748);border-color:#1b7748;color:#fff}
.btn.primary:hover{background:linear-gradient(180deg,#2aa066,#1e8250)}
.btn.wa{background:linear-gradient(180deg,#2fe074,#1fc35d);border-color:#1fc35d;color:#053d1c}
.btn.danger{color:var(--due-ink);border-color:#f0c4be}
.btn.danger:hover{background:#fff4f2;border-color:var(--due-ink)}
.btn:disabled{box-shadow:none;transform:none;cursor:not-allowed}

/* isian */
input,select,textarea{border-radius:10px;padding:9px 12px;border-color:#cdd7d0;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:1.05rem;height:1.05rem;padding:0}
.form label{font-weight:500}
.form label.check{font-weight:400}
h3.sect{grid-column:1/-1;margin:16px 0 0;padding-bottom:6px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--brand);border-bottom:1px solid var(--line)}
h3.sect:first-child{margin-top:0}
.toolbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow)}
.toolbar.sticky-bar{background:var(--bg);border:0;box-shadow:none;border-radius:0;padding:8px 0}
.toolbar label{font-weight:500}

/* pemberitahuan & lencana */
.alert{border-left:4px solid var(--brand);border-radius:10px;padding:11px 16px;font-weight:500}
.alert.err{border-left-color:var(--due-ink)}
.pill{font-weight:600;padding:3px 10px}
.phase{box-shadow:var(--shadow);border-left-width:5px}
.phase.pengingat{border-left-color:#2a9d5c}.phase.tagihan{border-left-color:#e0a323}.phase.teguran{border-left-color:#d9534f}

/* tabel */
.table-wrap{box-shadow:var(--shadow)}
thead th{background:#eaf1ec;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:700;padding-top:10px;padding-bottom:10px}
th,td{padding:9px 10px}
table.list tbody tr:nth-child(even){background:#fafcfb}
table.list tbody tr:hover{background:#f0f8f3}
.grid tbody tr:hover td:not(.cell){background:#f4faf6}
.grid tbody tr:hover .sticky,.grid tbody tr:hover .sticky2{background:#f4faf6}
.grid th.now{background:#cfe8d9;color:var(--brand-2)}
.cell{transition:filter .1s}
td.cell[data-bulan]:hover{filter:brightness(.96)}
.who strong{font-weight:700}
tfoot th,tfoot td{background:#eaf1ec}
.preview{background:#f4faf6}

/* HP & layar kecil */
@media(max-width:600px){
  main.wrap{padding-top:16px}
  h1{font-size:1.4rem}
  .card{padding:16px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats b{font-size:1.3rem}
  .toolbar{gap:8px}
  .toolbar input[type=search]{flex:1 1 100%}
  .toolbar label{flex:1 1 44%}
  .toolbar .btn{flex:1 1 100%;text-align:center}
  .toolbar.sticky-bar{position:static}
  .head-row .btn,.head-row .actions .btn{flex:1 1 auto;text-align:center}
  .card.login{margin:24px auto;padding:20px}
  th,td{padding:8px 8px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* layar sangat kecil: grafik batang tanpa angka (agar tidak bertumpuk) */
@media(max-width:600px){
  .bars{gap:3px;height:170px}
  .bars .nilai{display:none}
  .bars .lbl{font-size:.62rem}
  .rtbar,.rwbar-in{gap:8px}
  .rtpilih{width:100%}
  .rtpilih label{width:100%;justify-content:space-between}
  .rtpilih select{max-width:70vw}
}

/* panduan suara */
.suara-bar{position:sticky;top:64px;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px}
.suara-kontrol{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.suara-bar p{margin:0;flex:1 1 260px}
.panduan-kepala{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.langkah-daftar{list-style:none;counter-reset:ln;margin:0;padding:0;display:grid;gap:8px}
.langkah{counter-increment:ln;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:background .2s,border-color .2s,box-shadow .2s}
.langkah::before{content:counter(ln);flex:none;width:28px;height:28px;border-radius:50%;background:var(--paid);color:var(--paid-ink);font-weight:800;display:grid;place-items:center;font-size:.85rem}
.langkah .teks{flex:1;line-height:1.55}
.langkah .btn{flex:none}
.langkah.bicara{background:#fff8d9;border-color:#e0a323;box-shadow:0 0 0 3px rgba(224,163,35,.25)}
.langkah.bicara::before{background:#e0a323;color:#fff}
@media(max-width:600px){.suara-bar{top:60px}}