:root{
  --pine:#0d4d3a;--pine-600:#116a4f;--pine-50:#e9f4ef;
  --amber:#e6a23c;--amber-soft:#fbeecf;
  --sand:#f6f4ee;--ink:#16211d;--ink-soft:#5a675f;
  --line:#e7e3d8;--line2:#efece3;--white:#fff;
  --danger:#c0472b;--danger-soft:#fbe6df;--ok:#1f7a4d;
  --sbw:264px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--sand);color:var(--ink);min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
svg{display:block}
input{font-family:inherit}
[x-cloak]{display:none !important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d9d4c7;border-radius:8px;border:3px solid var(--sand)}

/* ============ AUTH ============ */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{background:linear-gradient(150deg,#0d4d3a 0%,#072a20 100%);color:#fff;padding:56px 52px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-brand::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(230,162,60,.1)}
.auth-brand::before{content:"";position:absolute;left:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.04)}
.ab-logo{display:flex;align-items:center;gap:12px}
.ab-logo .l{width:46px;height:46px;border-radius:13px;background:var(--amber);color:var(--pine);display:grid;place-items:center;font-weight:800;font-size:17px}
.ab-logo h1{font-size:17px;font-weight:800}.ab-logo .s{font-size:12px;opacity:.65}
.ab-mid{margin-top:auto;position:relative;z-index:1}
.ab-mid h2{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.15}
.ab-mid p{font-size:15px;opacity:.8;margin-top:14px;line-height:1.6;max-width:400px}
.ab-feats{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.ab-feat{display:flex;align-items:center;gap:11px;font-size:13.5px;opacity:.9}
.ab-feat .fi{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.ab-foot{margin-top:36px;font-size:12px;opacity:.55;position:relative;z-index:1}

.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.fcard{width:100%;max-width:400px;animation:fade .3s ease}
.fcard h3{font-size:26px;font-weight:800;letter-spacing:-.5px}
.fcard .sub{color:var(--ink-soft);font-size:14px;margin-top:6px;line-height:1.5}
.field{margin-top:18px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.inp{position:relative}
.inp input{width:100%;height:48px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  padding:0 44px 0 14px;font-size:14.5px;color:var(--ink);transition:border .15s,box-shadow .15s}
.inp input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-50)}
.inp .eye{position:absolute;right:12px;top:12px;width:24px;height:24px;color:var(--ink-soft);cursor:pointer;background:none;border:none;padding:0;display:inline-flex;align-items:center;justify-content:center}
.inp .eye svg{width:20px;height:20px}
.inp .eye:hover{color:var(--ink)}
.inp .lead{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--ink-soft)}
.inp .lead svg{width:20px;height:20px}
.inp.has-lead input{padding-left:42px}
.row-between{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none}
.check input[type=checkbox],.check input[type=radio]{width:16px;height:16px;min-height:0;accent-color:var(--pine);margin:0;flex-shrink:0}
/* Multi-item picker: header/row/foot untuk daftar checklist dengan optional amount di kanan */
.check-list .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.check-list .head .t{font-weight:700;font-size:13px}
.check-list .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-family:inherit;cursor:pointer;user-select:none}
.check-list .row:last-of-type{border-bottom:none}
.check-list .row input[type=checkbox]{width:16px;height:16px;min-height:0;accent-color:var(--pine);margin:0;flex-shrink:0}
.check-list .row .lbl{flex:1;font-weight:600;font-size:13.5px;color:var(--ink);min-width:0}
.check-list .row .sub{font-size:12px;color:var(--ink-soft);margin-left:4px;font-weight:500}
.check-list .row .amt{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',monospace}
.check-list .row .num{width:118px;text-align:right;height:34px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:13px;background:#fff;color:var(--ink)}
.check-list .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:700}
.flink{color:var(--pine-600);font-size:13px;font-weight:700;background:none;border:none;cursor:pointer}
.fbtn{width:100%;height:48px;background:var(--pine);color:#fff;border:none;border-radius:12px;font-family:inherit;
  font-weight:700;font-size:15px;cursor:pointer;margin-top:22px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.fbtn:hover{background:var(--pine-600)}
.fbtn:disabled{opacity:.55;cursor:not-allowed}
.fbtn.amber{background:var(--amber);color:#3d2a05}
.err{background:var(--danger-soft);color:var(--danger);border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;margin-top:16px;display:none;align-items:flex-start;gap:8px}
.err.show{display:flex;animation:shake .3s}
.err svg,.ok-note svg,.demo-note svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.ok-note{background:var(--pine-50);color:var(--ok);border-radius:11px;padding:11px 14px;font-size:13px;font-weight:600;margin-top:16px;display:flex;gap:8px}
.demo-note{background:var(--amber-soft);color:#8a5b0e;border-radius:11px;padding:12px 14px;font-size:13px;margin-top:16px;line-height:1.5}
.demo-note b{font-weight:800}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:13px;font-weight:700;background:none;border:none;cursor:pointer;margin-bottom:18px}
.steps{display:flex;gap:6px;margin-bottom:20px}
.steps i{height:4px;flex:1;border-radius:99px;background:var(--line)}
.steps i.on{background:var(--pine)}

/* strength meter */
.strength{display:flex;gap:5px;margin-top:9px}
.strength i{height:5px;flex:1;border-radius:99px;background:var(--line)}
.strength.s1 i:nth-child(1){background:var(--danger)}
.strength.s2 i:nth-child(-n+2){background:var(--amber)}
.strength.s3 i:nth-child(-n+3){background:#7cae4a}
.strength.s4 i{background:var(--ok)}
.stext{font-size:11.5px;color:var(--ink-soft);margin-top:6px;font-weight:600}

/* demo accounts */
.demo-accs{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.demo-accs .dt{font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.accgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.acc{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;cursor:pointer;text-align:left;font-family:inherit}
.acc:hover{border-color:var(--pine);background:var(--pine-50)}
.acc .an{font-size:12.5px;font-weight:700;color:var(--ink)}
.acc .ar{font-size:11px;color:var(--ink-soft)}

.otpbox{background:var(--pine);color:#fff;border-radius:12px;padding:14px 16px;margin-top:16px;text-align:center}
.otpbox .l{font-size:11.5px;opacity:.75}
.otpbox .c{font-size:28px;font-weight:800;letter-spacing:8px;margin-top:4px;font-family:'JetBrains Mono',monospace}

/* ============ PORTAL ============ */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sbw);flex-shrink:0;background:#0b3f2f;color:#dfeee8;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid #0a3527}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;text-decoration:none;cursor:pointer;color:inherit}
.brand .logo{width:40px;height:40px;border-radius:12px;background:var(--amber);color:var(--pine);display:grid;place-items:center;font-weight:800;font-size:15px}
.brand h1{font-size:15px;font-weight:800;color:#fff}.brand .sub{font-size:11px;opacity:.6}
.navscroll{flex:1;overflow-y:auto;margin:0 -6px;padding:0 6px}
.navscroll::-webkit-scrollbar-thumb{background:#1c5a46;border-color:#0b3f2f}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;cursor:pointer;color:#eaf5f0;font-size:13px;font-weight:700;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:background .15s;margin-bottom:2px;text-decoration:none}
.navitem:hover{background:rgba(255,255,255,.06);color:#fff}
.navitem.active{background:var(--amber);color:#3d2a05}
.navitem>svg{width:18px;height:18px;opacity:.85;flex-shrink:0}
.navsec{margin-bottom:1px}
.navhead{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;cursor:pointer;color:#eaf5f0;font-size:12.5px;font-weight:700;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:background .15s;letter-spacing:.2px}
.navhead:hover{background:rgba(255,255,255,.06)}
.navhead>svg{width:18px;height:18px;opacity:.8;flex-shrink:0}
.navhead .chev{margin-left:auto;width:15px;height:15px;opacity:.6;transition:transform .2s}
.navsec:not(.open) .chev{transform:rotate(-90deg)}
.navsec:not(.open) .navsubs{display:none}
.navsubs{padding:1px 0 6px}
.navsub{display:flex;align-items:center;gap:9px;padding:8px 10px 8px 18px;border-radius:9px;cursor:pointer;color:#a9c8bd;font-size:12.5px;font-weight:600;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:background .15s,color .15s;text-decoration:none}
.navsub .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0;margin-left:5px}
.navsub:hover{background:rgba(255,255,255,.05);color:#eaf5f0}
.navsub.active{background:var(--amber);color:#3d2a05;font-weight:700}
.navsub.active .dot{opacity:.85}
.navbadge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--amber);color:#3d2a05;font-size:11px;font-weight:800;display:grid;place-items:center}
.sb-foot{border-top:1px solid rgba(255,255,255,.1);padding-top:12px;margin-top:8px;position:relative}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer}
.sb-user:hover{background:rgba(255,255,255,.06)}
.sb-user .av{width:36px;height:36px;border-radius:10px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;font-weight:800;font-size:13px}
.sb-user .nm{font-size:13px;font-weight:700;color:#fff}.sb-user .rl{font-size:11px;opacity:.6}.sb-user>svg{width:18px;height:18px;opacity:.55;flex-shrink:0}
.usermenu{position:absolute;bottom:64px;left:8px;right:8px;background:#fff;border-radius:12px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);padding:6px;display:none;z-index:30}
.usermenu.open{display:block}
.um-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;cursor:pointer;color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none}
.um-item:hover{background:var(--sand)}
.um-item.danger{color:var(--danger)}.um-item svg{width:17px;height:17px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:64px;background:rgba(246,244,238,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 28px;position:sticky;top:0;z-index:20}
.menubtn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;place-items:center;cursor:pointer}
.topbar .ttl{font-size:17px;font-weight:800;letter-spacing:-.3px}
.search{margin-left:auto;position:relative;width:280px}
.search input{width:100%;height:40px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 14px 0 40px;font-size:13.5px;color:var(--ink)}
.search input:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-50)}
.search svg{position:absolute;left:13px;top:11px;width:18px;height:18px;color:var(--ink-soft)}
.tb-ic{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);position:relative}
.tb-ic .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.rolebadge{height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 12px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--pine)}
.rolebadge .rdot{width:22px;height:22px;border-radius:7px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center}

.content{padding:26px 28px 60px;max-width:1240px;width:100%}
.page-h{margin-bottom:22px}.page-h h2{font-size:22px;font-weight:800;letter-spacing:-.4px}.page-h p{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.kpi .ic{width:38px;height:38px;border-radius:11px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;margin-bottom:12px}
.kpi .num{font-size:26px;font-weight:800;letter-spacing:-.6px}.kpi .cap{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:2px}
.kpi .cap b{color:var(--danger);font-weight:700}.kpi .cap b.g{color:var(--ok)}
.cols{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 4px}.card-h h3{font-size:15px;font-weight:700}
.link{color:var(--pine-600);font-size:12.5px;font-weight:700;background:none;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.link svg{width:14px;height:14px;flex-shrink:0}
.kas{background:linear-gradient(135deg,var(--pine),#0a3d2e);color:#fff;border-radius:18px;padding:22px;position:relative;overflow:hidden}
.kas::after{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(230,162,60,.14)}
.kas .lbl{font-size:12.5px;opacity:.8;font-weight:600}.kas .amt{font-size:38px;font-weight:800;letter-spacing:-1.5px;margin-top:4px}
.kas .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;position:relative;z-index:1}
.kas .chip{background:rgba(255,255,255,.1);border-radius:12px;padding:11px 14px;flex:1 1 130px;min-width:120px}.kas .chip .t{font-size:11px;opacity:.75;font-weight:600}.kas .chip .v{font-size:15px;font-weight:700;margin-top:3px}
.kas .chip .v.in{color:#8fe6b6}.kas .chip .v.out{color:#ffc79a}
.chartcard{padding:18px}
.chart{display:flex;align-items:flex-end;gap:16px;height:160px;padding:8px 4px 0}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%}
.chart .bars{display:flex;gap:5px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.chart .bars i{width:16px;border-radius:5px 5px 0 0}.chart .bars .bi{background:var(--pine)}.chart .bars .bo{background:var(--amber)}
.chart .bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart .bval{font-size:9px;font-weight:800;line-height:1;margin-bottom:3px;white-space:nowrap}
.chart .bval.in{color:var(--pine)}.chart .bval.out{color:#b9832a}
.chart .cl{font-size:11px;color:var(--ink-soft);font-weight:600}
.legend{display:flex;gap:18px;font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:10px;padding-left:4px}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:11px;height:11px;border-radius:3px}
.li{display:flex;gap:13px;padding:13px 18px;align-items:center}.li+.li{border-top:1px solid var(--line2)}
.li .dt{width:46px;text-align:center;flex-shrink:0}.li .dt .d{font-size:19px;font-weight:800;line-height:1;color:var(--pine)}.li .dt .m{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink-soft)}
.li .ic{width:40px;height:40px;border-radius:11px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;flex-shrink:0}
.li .info{flex:1;min-width:0}.li .info .a{font-weight:700;font-size:13.5px}.li .info .b{font-size:12px;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;gap:6px}
.li .amt{font-weight:800;font-size:14px;text-align:right}
.tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--amber-soft);color:#8a5b0e}.tag.g{background:var(--pine-50);color:var(--ok)}.tag.r{background:var(--danger-soft);color:var(--danger)}
.announce{padding:16px 18px;border-left:3px solid var(--amber);margin:4px}.announce .top{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-soft);font-weight:600}.announce .top svg{width:14px;height:14px;flex-shrink:0}.announce h4{font-size:14px;font-weight:700;margin:7px 0 4px}.announce p{font-size:12.5px;color:var(--ink-soft);line-height:1.55}
.btn{background:var(--pine);color:#fff;border:none;border-radius:11px;padding:11px 18px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.btn:hover{background:var(--pine-600)}.btn.amber{background:var(--amber);color:#3d2a05}.btn.ghost{background:var(--pine-50);color:var(--pine)}.btn.sm{padding:8px 12px;font-size:12px;border-radius:9px}
.btn svg{width:16px;height:16px;flex-shrink:0}
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);font-weight:700;padding:13px 18px;background:var(--sand);border-bottom:1px solid var(--line)}
tbody td{padding:14px 18px;font-size:13.5px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}tbody tr:hover{background:#fbfaf6}
td .rw{display:flex;align-items:center;gap:11px}td .av{width:34px;height:34px;border-radius:9px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;font-weight:800;font-size:12px}
td .nm{font-weight:700}.td-sub{font-size:12px;color:var(--ink-soft)}td.right{text-align:right}
.status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-block}
.status.lunas{background:var(--pine-50);color:var(--ok)}.status.nunggak{background:var(--danger-soft);color:var(--danger)}.status.proses{background:var(--amber-soft);color:#8a5b0e}
.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 16px}
.pager-left,.pager-right{display:flex;align-items:center;gap:10px}
.pager-left{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.pager-info{font-size:12.5px;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums}
.pager-per{height:34px;border:1px solid var(--line);border-radius:9px;padding:0 26px 0 10px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235a675f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center}
.pager-per:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-50)}
.pager-nav{display:flex;align-items:center;gap:6px}
.pager-nav a,.pager-nav span.off{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.pager-nav a:hover{background:var(--pine-50);border-color:var(--pine-50);color:var(--pine)}
.pager-nav span.off{color:#cbc6b8;background:var(--sand);cursor:default}
.pager-cur{width:54px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;text-align:center;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--ink);padding:0 2px;-moz-appearance:textfield;appearance:textfield}
.pager-cur::-webkit-outer-spin-button,.pager-cur::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pager-cur:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-50)}
.pager-of{font-size:12px;color:var(--ink-soft);font-weight:600;font-variant-numeric:tabular-nums;margin-right:2px}
@media(max-width:720px){.pager{justify-content:center;gap:10px}.pager-left,.pager-right{width:100%;justify-content:center}.pager-right{flex-wrap:wrap}}
.subtabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:20px}
.subtabs button,.subtabs a{border:none;background:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;color:var(--ink-soft);cursor:pointer;text-decoration:none}.subtabs button.on,.subtabs a.on{background:var(--pine);color:#fff}
.sumcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.sumcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.sumcard .t{font-size:12.5px;color:var(--ink-soft);font-weight:600}.sumcard .v{font-size:24px;font-weight:800;letter-spacing:-.6px;margin-top:6px}
.empty{text-align:center;padding:70px 24px;color:var(--ink-soft)}
.empty .eic{width:70px;height:70px;border-radius:20px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;margin:0 auto 18px}.empty .eic svg{width:30px;height:30px}
.empty h3{font-size:18px;color:var(--ink);font-weight:700}.empty p{font-size:13.5px;margin-top:7px;line-height:1.5;max-width:400px;margin-inline:auto}
.grid-mod{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.modcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;gap:14px;align-items:flex-start}
.modcard .mic{width:44px;height:44px;border-radius:12px;background:var(--pine-50);color:var(--pine);display:grid;place-items:center;flex-shrink:0}.modcard .mt{font-weight:700;font-size:14px}.modcard .md{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.dhead{display:flex;align-items:center;gap:14px;margin-bottom:22px}.dhead h2{font-size:22px;font-weight:800;letter-spacing:-.4px}.dhead .ds{font-size:12.5px;color:var(--ink-soft)}.dhead .sp{flex:1}
.dhead-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:-10px;margin-bottom:16px}
.dhead-actions .btn{padding:8px 12px;font-size:12px;border-radius:9px}
.crud{display:flex;gap:4px}.crud b{font-size:9px;font-weight:800;width:16px;height:16px;border-radius:4px;display:grid;place-items:center;background:var(--pine-50);color:var(--pine)}.crud b.off{background:#f0eee7;color:#c3bfb2}
.qrrow{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center}
.qrimg{width:170px;height:170px;margin:0 auto 16px;border-radius:14px;border:7px solid #fff;box-shadow:0 0 0 1px var(--line)}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40}
.modal-bg{position:fixed;inset:0;background:rgba(8,20,15,.5);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.open{display:flex}
.modal{background:var(--sand);border-radius:20px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px}
.modal-hd h3{font-size:18px;font-weight:800}
.modal-hd .x{width:32px;height:32px;border-radius:9px;border:none;background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft)}
.modal-bd{padding:0 22px 22px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{margin-top:12px}
.fg label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:11px;background:#fff;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-50)}
.modal .err{margin:14px 0 0}
.modal-ft{display:flex;gap:10px;padding:18px 22px 22px}
.modal-ft .btn{flex:1;justify-content:center;height:46px}
.btn.outline{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn.danger{background:var(--danger)}
.iconbtn2{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft)}
.iconbtn2:hover{border-color:var(--pine);color:var(--pine)}
.iconbtn2.del:hover{border-color:var(--danger);color:var(--danger)}
.iconbtn2:disabled{opacity:.3;cursor:not-allowed}
.relpill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--pine-50);color:var(--pine)}
.relpill.kk{background:var(--amber-soft);color:#8a5b0e}

/* Modifier untuk .cols supaya varian grid tetap responsif — INI menggantikan
   inline style="grid-template-columns:..." yang men-override media query. */
.cols.wide{grid-template-columns:1.6fr 1fr}
.cols.even{grid-template-columns:1fr 1fr}
/* Grid metrik statistik (dipakai kartu Statistik Rumah/Warga/Tugas Satpam). */
.grid-metric{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ===== Donut + legend (Statistik Rumah/Warga di beranda) =====
   Pakai conic-gradient CSS + radial-gradient mask — tanpa library/SVG. */
.donut-row{display:flex;gap:20px;align-items:center}
.donut-wrap{position:relative;width:120px;height:120px;flex-shrink:0}
.donut{width:100%;height:100%;border-radius:50%;-webkit-mask:radial-gradient(circle, transparent 58%, black 59%);mask:radial-gradient(circle, transparent 58%, black 59%)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center .n{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;line-height:1;letter-spacing:-.5px}
.donut-center .l{font-size:10.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.legend{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.legend-item{display:flex;align-items:center;gap:9px;font-size:13px}
.legend-item .dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-item .lbl{flex:1;font-weight:600;min-width:0}
.legend-item .n{font-weight:800;font-family:'JetBrains Mono',monospace;font-size:14px;font-variant-numeric:tabular-nums}
.sub-stat{border-top:1px solid var(--line2);margin-top:16px;padding-top:14px;display:flex;justify-content:space-between;align-items:center}
.sub-stat .l{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.sub-stat .n{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;color:var(--pine)}

@media(max-width:1000px){.auth{grid-template-columns:1fr}.auth-brand{display:none}}
@media(max-width:960px){.kpis{grid-template-columns:repeat(2,1fr)}.cols,.cols.wide,.cols.even{grid-template-columns:1fr}.sumcards{grid-template-columns:1fr 1fr}.grid-mod{grid-template-columns:1fr 1fr}.qrrow{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{position:fixed;left:0;top:0;z-index:50;transform:translateX(-100%);transition:transform .25s;box-shadow:8px 0 30px -10px rgba(0,0,0,.4)}
  body.nav-open .sidebar{transform:translateX(0)}body.nav-open .backdrop{display:block}
  .menubtn{display:grid}.search{width:auto;flex:1}
  .tablewrap table{min-width:600px}
  .tablewrap td,.tablewrap th{white-space:nowrap}
  .topbar .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr;gap:12px}.sumcards{grid-template-columns:1fr}.grid-mod{grid-template-columns:1fr}.grid-metric{grid-template-columns:repeat(2,1fr);gap:16px}.content{padding:18px 16px 40px}.topbar{padding:0 16px}.accgrid{grid-template-columns:1fr}.auth-form{padding:28px 18px}}
.flash{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:200;box-shadow:0 10px 30px -8px rgba(0,0,0,.4)}
.flash.ok{background:var(--ok)}.flash.err{background:var(--danger)}