:root{--bg: #f1f4f0;--card: #ffffff;--ink: #14231e;--muted: #6c7c75;--line: #e3e9e4;--green: #0e7c5a;--green-dark: #075c43;--green-soft: #e7f4ee;--amber: #b45309;--amber-soft: #fdf3e4;--radius: 18px;--shadow: 0 1px 2px rgba(16, 38, 30, .05), 0 12px 28px -18px rgba(16, 38, 30, .24)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(1200px 400px at 50% -160px,#dfeee5,#f1f4f000 70%);min-height:100vh}h1,h2,h3,p{margin:0}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}input,textarea{font:inherit;color:inherit}.shell{max-width:1140px;margin:0 auto;padding:20px 16px 56px}.hero{background:linear-gradient(135deg,#0a6b4e,#0e7c5a 45%,#12916a);color:#f4fbf7;border-radius:24px;padding:22px;box-shadow:0 20px 40px -28px #075c43e6;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:280px;height:280px;right:-110px;top:-140px;background:radial-gradient(circle,#ffffff2e,#fff0);border-radius:50%;pointer-events:none}.hero-top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}.brand{display:flex;gap:14px;align-items:flex-start;min-width:0}.brand-mark{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:#ffffff29;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:22px}.brand-text{min-width:0}.brand-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffb8;font-weight:600}.brand-text h1{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin-top:4px;font-weight:700}.brand-text p{font-size:13px;color:#ffffffc7;margin-top:3px}.hero-kas{background:#ffffff24;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:12px 16px;min-width:200px}.hero-kas span{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#ffffffbf}.hero-kas strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:2px}.periode-bar{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}.periode-nav{display:flex;align-items:center;gap:8px}.nav-btn{width:34px;height:34px;border-radius:11px;border:1px solid rgba(255,255,255,.28);background:#ffffff1f;color:#fff;font-size:20px;line-height:1;display:grid;place-items:center;transition:background .15s ease}.nav-btn:hover{background:#ffffff3d}.periode-label{font-size:16px;font-weight:650;min-width:118px;text-align:center;line-height:1.15}.periode-label span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:#ffffffa6;font-weight:500}.nav-now{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}.nav-now:hover{background:#ffffff24}.periode-info{font-size:13px;color:#fffc}.periode-info strong{color:#fff}.stats{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em}.stat-value{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25}.stat-value small{font-size:12px;font-weight:600;color:var(--muted)}.stat-sub{font-size:12px;color:var(--muted);margin-top:auto}.stat--utama{background:linear-gradient(160deg,#fff,#f2faf6);border-color:#cfe9dc}.stat--perhatian{background:linear-gradient(160deg,#fff,#fdf6ea);border-color:#f2e0bd}.stat--perhatian .stat-value{color:var(--amber)}.stat--aman .stat-value{color:var(--green)}.progress{height:6px;border-radius:99px;background:#e9efea;overflow:hidden;margin:6px 0 2px}.progress-fill{height:100%;background:linear-gradient(90deg,#12a074,var(--green));border-radius:99px;transition:width .35s ease}.stat-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#1f8f52;border:none;color:#fff;border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;transition:transform .12s ease,filter .12s ease}.stat-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:16px;margin-top:16px;align-items:start}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:17px;letter-spacing:-.01em}.panel-sub{font-size:12.5px;color:var(--muted);margin-top:2px}.panel-head-actions{display:flex;gap:8px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;border:1px solid transparent;padding:9px 14px;font-size:13px;font-weight:600;background:#f1f4f2;color:var(--ink);transition:background .15s ease,transform .12s ease,box-shadow .15s ease;white-space:nowrap}.btn:hover{background:#e7ece9}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 20px -14px #0e7c5ae6}.btn-primary:hover{background:var(--green-dark)}.btn-ghost{background:#f4f6f4;border-color:var(--line)}.btn-wa{background:#1f9d55;color:#fff}.btn-wa:hover{background:#178244}.btn-sm{padding:7px 11px;font-size:12.5px;border-radius:10px}.btn-icon{width:34px;height:34px;padding:0;background:#f6f7f6;border-color:var(--line);color:#8a978f}.btn-icon:hover{background:#fdeceb;color:#c0392b;border-color:#f6d3cf}.btn-block{width:100%}.btn-danger-ghost{background:#fff;border-color:#f0d8d4;color:#b23c2c}.btn-danger-ghost:hover{background:#fdf1ef}.btn.is-off{background:#eef3f0;color:#6f8a7d;border-color:#e0e8e3}.btn.is-off:hover{background:#e3ede8}.btn.is-done{background:#eaf5ee;color:#17804a;border-color:#cfe9d9}.form-warga{padding:16px 18px;background:#f8faf8;border-bottom:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}.form-grid label,.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:#4a5b53}.form-grid input,.field input,.field textarea{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 12px;font-size:14px;font-weight:500;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease;width:100%}.form-grid input:focus,.field input:focus,.field textarea:focus,.rp-input:focus-within{border-color:#9ed4b9;box-shadow:0 0 0 3px #12916a1f}.field textarea{resize:vertical;line-height:1.55;font-weight:500;font-family:inherit}.form-error{color:#b23c2c;font-size:12.5px;margin-bottom:10px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 18px}.filter-chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#f6f8f6;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#5b6a63;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}.chip:hover{border-color:#cfe0d7}.chip--aktif{background:var(--ink);border-color:var(--ink);color:#fff}.chip-badge{background:#e9a13b;color:#3d2405;border-radius:999px;padding:0 6px;font-size:11px;font-weight:700}.chip--aktif .chip-badge{background:#f2b455}.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#f8faf8;border-radius:11px;padding:0 12px;color:var(--muted);flex:1 1 200px;max-width:300px}.search input{border:none;background:transparent;outline:none;padding:9px 0;font-size:13.5px;width:100%;color:var(--ink)}.warga-list{list-style:none;margin:0;padding:0 12px 14px;display:flex;flex-direction:column;gap:8px}.wrow{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s ease,background .15s ease}.wrow:hover{border-color:#d3e2da}.wrow--lunas{background:#fbfdfb}.wrow-id{display:flex;align-items:center;gap:11px;flex:1 1 190px;min-width:0}.avatar{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;background:var(--amber-soft);color:#a4620c}.avatar--lunas{background:var(--green-soft);color:var(--green)}.wrow-txt{min-width:0}.wrow-nama{font-size:14px;font-weight:650;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.blok{font-size:11px;font-weight:600;color:#63726b;background:#f1f4f2;border-radius:6px;padding:1px 6px}.wrow-sub{font-size:12px;color:var(--muted);margin-top:1px}.wrow-ctl{display:flex;align-items:center;gap:10px;margin-left:auto}.suk-field{display:flex;align-items:center;gap:6px}.suk-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}.rp-input{display:flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 10px;transition:border-color .15s ease,box-shadow .15s ease}.rp-input .rp-prefix{font-size:12px;color:var(--muted);font-weight:600}.rp-input input{border:none;outline:none;background:transparent;padding:10px 0;font-size:14px;font-weight:600;width:100%;min-width:0;text-align:right}.rp-input--sm{max-width:120px;border-radius:10px;padding:0 8px}.rp-input--sm input{padding:7px 0;font-size:13px}.pill{border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;border:1px solid transparent;white-space:nowrap;transition:all .15s ease}.pill--lunas{background:var(--green-soft);color:var(--green-dark);border-color:#c6e6d6}.pill--belum{background:var(--amber-soft);color:#9a4f07;border-color:#f2dcb8}.pill:hover{filter:brightness(.97)}.wrow-act{display:flex;gap:6px;align-items:center}.empty{padding:28px 12px;text-align:center;color:var(--muted);font-size:13.5px;list-style:none}.panel--setting{position:sticky;top:16px}.panel-head--sempit{padding:16px 16px 14px}.badge-simpan{font-size:11px;font-weight:600;color:var(--green-dark);background:var(--green-soft);border-radius:999px;padding:4px 9px}.setting-body{padding:16px;display:flex;flex-direction:column;gap:13px}.hint-box{background:#f4f9f6;border:1px dashed #cfe6d9;border-radius:12px;padding:11px 13px;font-size:12.5px;color:#46604f}.hint-box span{color:var(--muted)}.token-list{display:flex;flex-wrap:wrap;gap:6px}.token-list code{background:#f2f5f2;border:1px solid var(--line);border-radius:7px;padding:2px 7px;font-size:11.5px;color:#4c6157}.field-note{font-size:11.5px;color:var(--muted);margin-top:-6px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c1c1680;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0;z-index:60;animation:fade .16s ease}@keyframes fade{0%{opacity:0}}.dialog{background:var(--card);width:100%;max-width:560px;border-radius:22px 22px 0 0;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 -10px 60px #00000047;animation:naik .2s ease}@keyframes naik{0%{transform:translateY(18px);opacity:.6}}.dialog-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 18px 12px}.dialog-head h3{font-size:17px;letter-spacing:-.01em}.dialog-head p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}.dialog-close{border:none;background:#f2f5f2;width:32px;height:32px;border-radius:10px;font-size:20px;line-height:1;color:#5f6f68;flex:0 0 32px}.dialog-progress{display:flex;align-items:center;gap:10px;padding:0 18px 12px}.dialog-progress .progress{flex:1;margin:0}.dialog-progress span{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}.dialog-list{list-style:none;margin:0;padding:0 12px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.dialog-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.dialog-list li.sudah{background:#fafdfb;border-color:#d9ece2}.dialog-list-txt{display:flex;flex-direction:column;min-width:0}.dialog-list-txt strong{font-size:13.5px;font-weight:650}.dialog-list-txt span{font-size:12px;color:var(--muted)}.dialog-foot{display:flex;gap:8px;padding:12px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fbfcfb;border-radius:0 0 22px 22px}.dialog-foot .btn{flex:1}.footer{margin-top:18px;font-size:12px;color:#7c8a83;text-align:center;line-height:1.6}@media (min-width: 720px){.shell{padding:26px 24px 64px}.hero{padding:26px 28px}.brand-text h1{font-size:26px}.overlay{align-items:center;padding:24px}.dialog{border-radius:22px;max-height:84vh}.dialog-foot{border-radius:0 0 22px 22px}}@media (max-width: 960px){.layout{grid-template-columns:minmax(0,1fr)}.panel--setting{position:static}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.hero-kas{width:100%}.wrow-ctl{margin-left:0;width:100%;justify-content:space-between;order:3}.wrow-act{order:2;margin-left:auto}.rp-input--sm{max-width:130px}.stat-value{font-size:19px}.panel-head,.toolbar{padding-left:14px;padding-right:14px}.search{max-width:none}.form-warga{padding:14px}}