:root{--bg:#f4f5f1;--side:#ffffff;--card:#ffffff;--card2:#f3f4f0;--ink:#1b1f1a;--mut:#6a7167;--line:#e3e6de;--bd:#d3d8cd;--pri:#d6a521;--pri-ink:#1f1700;--pri-text:#8a6508;--pri2:#fbf1d3;--in:#0f9d58;--out:#d6335a;--blue:#0b7fc0;--violet:#6d4fd6;--warn:#a56a00;--warnbg:#fff3d1;--r:14px}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hidden{display:none!important}
h1{font-size:1.4rem;margin:.1rem 0 1rem;letter-spacing:-.01em}h2{font-size:.98rem;margin:0 0 .7rem}h3{font-size:.9rem;margin:1rem 0 .4rem}
a{color:var(--pri-text)}
/* shell */
.shell{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:238px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:0 .6rem 1rem;display:flex;flex-direction:column;gap:.9rem;transition:margin .2s}
.shell.collapsed .side{margin-left:-238px}
.brand{display:flex;gap:.65rem;align-items:center;min-width:0;height:62px;padding:0 .4rem}
.brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{width:34px;height:34px;border-radius:10px;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.side nav{display:flex;flex-direction:column;gap:.15rem}
nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:11px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
nav a i{display:none;font-style:normal}
nav a:hover{background:var(--card2)}
nav a.on{background:var(--pri2);color:var(--ink)}
.content{flex:1;min-width:0}
.topbar{position:sticky;top:0;z-index:15;height:62px;display:flex;align-items:center;gap:.8rem;padding:0 1.25rem;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .who{margin-left:auto;text-align:right;line-height:1.15}.topbar .who small{display:block;color:var(--mut);font-size:.75rem}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--ink);font-size:1rem;cursor:pointer}
.mtop{display:none}
main{max-width:1280px;margin:0 auto;padding:1.4rem 1.5rem 3rem}
/* components */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:0 1px 2px #1b1f1a0a}
.grid{display:grid;gap:.9rem}
.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.in{color:var(--in)}.out{color:var(--out)}.mut{color:var(--mut)}.r{text-align:right}.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.btn{font:inherit;font-weight:600;border:1px solid var(--bd);background:var(--card);color:var(--ink);padding:.5rem .9rem;border-radius:10px;cursor:pointer;min-height:40px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.btn:hover{border-color:#b9c0b1;background:var(--card2)}
.btn.primary{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.btn.primary:hover{background:#c99a18}
.btn.danger{color:var(--out);border-color:#f0b8c6;background:transparent}
.btn.sm{padding:.25rem .6rem;min-height:30px;font-size:.84rem}
.btn:disabled{opacity:.45}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--bd);border-radius:10px;padding:.5rem .65rem;min-height:40px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #d6a52166;border-color:var(--pri)}
input[type=checkbox]{width:auto;min-height:0;accent-color:var(--pri)}
textarea{min-height:70px;resize:vertical}
label{display:block;font-size:.78rem;color:var(--mut);margin-bottom:.25rem}
.field{margin-bottom:.75rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1 1 150px}.row .fit{flex:0 0 auto}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.55rem}
.fdet>summary{cursor:pointer;font-weight:600;margin-bottom:.5rem;color:var(--pri-text)}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--mut);font-weight:600;font-size:.78rem;border-bottom:1px solid var(--line);padding:.5rem;white-space:nowrap}
.tbl td{border-bottom:1px solid #eef0ea;padding:.55rem .5rem;vertical-align:top}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover{background:#faf8ee}
.tbl tr.tot td{font-weight:700;background:#fbf6e4}
.badge{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.72rem;background:#dff3e8;color:#0b7a45;white-space:nowrap}
.badge.warn{background:var(--warnbg);color:var(--warn)}.badge.bad{background:#fde4ea;color:var(--out)}.badge.gray{background:#eceee8;color:var(--mut)}
.note{background:var(--warnbg);color:var(--warn);padding:.55rem .75rem;border-radius:10px;font-size:.85rem;margin:.5rem 0}
.seg{display:flex;border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.seg button{flex:1;border:0;background:var(--card);color:var(--ink);padding:.6rem;font:inherit;font-weight:600;cursor:pointer}
.seg button.on{background:var(--pri);color:var(--pri-ink)}
.pills{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.pill{border:1px solid var(--bd);background:var(--card);color:var(--ink);padding:.38rem .85rem;border-radius:99px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.pill.on{border-color:var(--pri);color:var(--pri-text);background:var(--pri2)}
.pill .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.45rem}
.pill.off{opacity:.5;text-decoration:line-through}
/* modal */
.modal{position:fixed;inset:0;background:#10140f80;z-index:50;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:1rem}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:16px;width:min(760px,100%);padding:1.1rem;margin:auto 0;box-shadow:0 20px 50px #0003}
.sheet .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#1b1f1a;color:#fff;font-weight:600;padding:.6rem 1rem;border-radius:10px;z-index:99;max-width:90vw}
.toast.err{background:var(--out);color:#fff}
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(900px 400px at 50% -10%,#fbf1d3,transparent),var(--bg)}
.login .card{width:min(380px,100%)}
.bukti{display:flex;gap:.6rem;flex-wrap:wrap}
.bukti .it{border:1px solid var(--line);border-radius:12px;padding:.4rem;width:150px;font-size:.78rem;background:var(--card2)}
.bukti img{width:100%;height:100px;object-fit:cover;border-radius:8px;cursor:zoom-in;background:#e8ebe4}
.bukti .pdf{height:100px;display:grid;place-items:center;background:var(--pri2);border-radius:8px;font-weight:700;color:var(--pri-text)}
.zoom{position:fixed;inset:0;background:#000d;z-index:80;display:grid;place-items:center}.zoom img{max-width:96vw;max-height:92vh}
/* dashboard */
.greet{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.greet small{display:block;letter-spacing:.14em;font-weight:700;color:var(--pri-text);font-size:.72rem}
.greet h1{font-size:2rem;margin:.1rem 0}
.greet p{margin:0;color:var(--mut)}
.chip{border:1px solid var(--bd);border-radius:99px;padding:.4rem .8rem;font-size:.8rem;color:var(--mut);background:var(--card)}
.alerts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.8rem;margin-bottom:1.1rem}
.alert{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:var(--r);border:1px solid;text-decoration:none;color:var(--ink);cursor:pointer}
.alert i{width:12px;height:12px;border-radius:50%;flex:none}
.alert b{display:block;font-size:1rem}.alert span{font-size:.78rem;color:var(--mut)}
.alert .ch{margin-left:auto;color:var(--mut);font-size:1.2rem;font-style:normal}
.alert.red{background:#fdecef;border-color:#f3b8c5}.alert.red b{color:var(--out)}.alert.red i{background:var(--out)}
.alert.yel{background:#fff6dc;border-color:#ecd48a}.alert.yel b{color:var(--warn)}.alert.yel i{background:#e0a100}
.alert.blu{background:#e6f4fc;border-color:#b3daf0}.alert.blu b{color:var(--blue)}.alert.blu i{background:var(--blue)}
.alert.ok{background:#e8f7ee;border-color:#b8e3cb}.alert.ok b{color:var(--in)}.alert.ok i{background:var(--in)}
.period{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem}
.period>span{color:var(--mut);font-size:.82rem}
.kpi{border-radius:var(--r);border:1px solid;padding:1rem 1.1rem 0;overflow:hidden;position:relative;min-height:170px;display:flex;flex-direction:column}
.kpi .l{color:var(--mut);font-size:.8rem;display:flex;justify-content:space-between;align-items:center}
.kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:.95rem}
.kpi .v{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;margin:.5rem 0 .2rem;font-variant-numeric:tabular-nums}
.kpi .f{font-size:.76rem;color:var(--mut);margin-top:auto;padding:.5rem 0 .8rem;position:relative;z-index:1}
.kpi svg{position:absolute;left:0;right:0;bottom:1.8rem;width:100%;height:56px}
.kpi.gold{background:linear-gradient(160deg,#fff3cf,#fff 78%);border-color:#ecd58a}.kpi.gold .ic{background:#f7e2a0;color:#8a6508}
.kpi.green{background:linear-gradient(160deg,#dff5e9,#fff 78%);border-color:#b8e3cb}.kpi.green .ic{background:#c4ebd5;color:var(--in)}
.kpi.pink{background:linear-gradient(160deg,#fde3ea,#fff 78%);border-color:#f4b9c7}.kpi.pink .ic{background:#f9ccd7;color:var(--out)}
.kpi.blue{background:linear-gradient(160deg,#dff1fb,#fff 78%);border-color:#b3daf0}.kpi.blue .ic{background:#c3e3f5;color:var(--blue)}
.up{color:var(--in);font-weight:700}.dn{color:var(--out);font-weight:700}
.prog{height:8px;border-radius:5px;background:#cfe6f3;margin-top:1.6rem;overflow:hidden}.prog div{height:100%;background:var(--blue)}
.dash2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:.9rem;margin-bottom:1rem}
.chartcard .top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem}
.chartcard .top small{color:var(--mut)}
.donutwrap{display:flex;justify-content:center;margin:.2rem 0 .8rem}
.legrow{display:grid;grid-template-columns:12px 1fr auto auto;gap:.5rem;align-items:center;font-size:.84rem;padding:.22rem 0}
.legrow i{width:10px;height:10px;border-radius:50%}.legrow .p{color:var(--mut);width:3.2rem;text-align:right}
.hb{display:grid;grid-template-columns:minmax(110px,40%) 1fr auto;gap:.5rem;align-items:center;font-size:.8rem;margin:.3rem 0}
.hb .track{background:#eef0e8;border-radius:5px;height:9px}
.bar{height:9px;background:var(--pri);border-radius:5px;min-width:2px}.bar.o{background:var(--out)}
svg text{fill:var(--mut);font-size:10px}
.legend{display:flex;gap:1rem;font-size:.78rem;color:var(--mut);margin-bottom:.3rem}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
.stat span{display:block;color:var(--mut);font-size:.78rem}.stat b{font-size:1.15rem;font-variant-numeric:tabular-nums}
/* input iuran */
.mrow{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(110px,1fr) repeat(4,minmax(54px,.5fr)) minmax(110px,1fr) auto minmax(190px,1.4fr);gap:.5rem .6rem;align-items:start;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mrow .mf label{font-size:.7rem;margin-bottom:.15rem}
.mrow .mf input[type=text],.mrow .mf input:not([type]),.mrow .mf input[inputmode]{min-height:36px;padding:.35rem .5rem}
.mrow .chk{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.mrow .chk label{display:flex;gap:.3rem;align-items:center;font-size:.8rem;color:var(--ink)}
.mrow .mres{font-size:.82rem}
.mrow .mname .mut{font-size:.78rem}
@media(max-width:1100px){.dash2{grid-template-columns:1fr}.mrow{grid-template-columns:repeat(4,1fr)}.mrow .mname{grid-column:1/-1}.mrow .mres{grid-column:1/-1}}
@media(max-width:560px){.mrow{grid-template-columns:repeat(2,1fr)}}
/* mobile */
@media(max-width:820px){
 .shell,.shell.collapsed{display:block}
 .side,.shell.collapsed .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;width:auto;margin:0;z-index:20;flex-direction:row;padding:.25rem .25rem calc(.25rem + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);box-shadow:0 -4px 14px #1b1f1a0f}
 .side .brand{display:none}
 .side nav{flex-direction:row;width:100%;justify-content:space-around}
 nav a{flex:1;flex-direction:column;gap:.1rem;padding:.35rem .1rem;font-size:.68rem;text-align:center;min-width:0;font-weight:500;color:var(--mut)}
 nav a.on{background:none;color:var(--pri-text);font-weight:700}
 nav a i{display:block;font-size:1.2rem}
 nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .topbar{display:none}
 .mtop{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:15;background:#fff;border-bottom:1px solid var(--line);padding:0 12px}
 .mtop .brand{height:52px}
 main{padding:.9rem 12px calc(5rem + env(safe-area-inset-bottom))}
 .card{padding:.85rem}.sheet{padding:.9rem}.modal{padding:0;align-items:stretch}.sheet{border-radius:0;min-height:100%;width:100%;border:0}
 .stats{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}
 .row>*{flex:1 1 130px}.filters{grid-template-columns:repeat(2,1fr)}
 h1{font-size:1.15rem}.greet h1{font-size:1.5rem}.greet .btn{display:none}.toast{bottom:80px}
 .kpi{min-height:150px}.kpi .v{font-size:1.35rem}
 .tbl.cards thead{display:none}.tbl.cards,.tbl.cards tbody{display:block}
 .tbl.cards tr{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;padding:.65rem .2rem;border-bottom:1px solid var(--line)}
 .tbl.cards td{border:0;padding:0}
 .tbl.cards td:nth-child(1){grid-column:1;grid-row:1;font-weight:600}
 .tbl.cards td:nth-child(1) .mut{display:inline;margin-left:.4rem;font-weight:400}
 .tbl.cards td:nth-child(5){grid-column:2;grid-row:1;font-weight:700}
 .tbl.cards td:nth-child(3){grid-column:1/3;grid-row:2}
 .tbl.cards td:nth-child(4){grid-column:1/3;grid-row:3}
 .tbl.cards td:nth-child(4):empty{display:none}
 .tbl.cards td:nth-child(2){grid-column:1;grid-row:4;font-size:.78rem;color:var(--mut)}
 .tbl.cards td:nth-child(7){grid-column:2;grid-row:4;justify-self:end}
 .tbl.cards td:nth-child(6){display:none}
}
@media(min-width:1500px){main{max-width:1440px}}
@media print{.side,.mtop,.topbar,.btn,.filters{display:none}body{background:#fff;color:#000}}