:root{--bg: #f1f5f9;--card: #ffffff;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;--primary: #059669;--primary-dark: #047857;--primary-light: #d1fae5;--danger: #dc2626;--danger-light: #fee2e2;--warn: #d97706;--warn-light: #fef3c7;--sidebar: #0f172a;--sidebar-text: #cbd5e1;--radius: 12px;--shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .08)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5}#root{min-height:100vh}.app{display:flex;min-height:100vh}.sidebar{width:232px;background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;font-weight:700;font-size:16px}.sidebar-brand .logo{width:34px;height:34px;background:linear-gradient(135deg,#10b981,#059669);border-radius:10px;display:grid;place-items:center;font-size:17px}.sidebar-nav{padding:8px;display:flex;flex-direction:column;gap:2px;flex:1}.sidebar-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--sidebar-text);text-decoration:none;font-weight:500;transition:background .15s,color .15s}.sidebar-nav a:hover{background:#ffffff0f;color:#fff}.sidebar-nav a.active{background:var(--primary);color:#fff}.sidebar-nav a svg{width:18px;height:18px;flex-shrink:0}.sidebar-foot{padding:14px 18px;font-size:12px;color:#475569}.main{flex:1;margin-left:232px;padding:26px 30px 60px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}.page-head h1{font-size:21px;font-weight:700}.page-head p{color:var(--muted);font-size:13.5px;margin-top:2px}.head-actions{display:flex;gap:8px;flex-wrap:wrap}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:18px 20px}.card-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}.stat{padding:16px 18px}.stat .label{font-size:12.5px;color:var(--muted);font-weight:500}.stat .value{font-size:21px;font-weight:700;margin-top:4px;letter-spacing:-.3px}.stat .sub{font-size:12px;color:var(--muted);margin-top:3px}.stat.masuk .value{color:var(--primary)}.stat.keluar .value{color:var(--danger)}.stat.tunggakan .value{color:var(--warn)}.stat-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:10px}.stat-icon svg{width:19px;height:19px}.stat-icon.hijau{background:var(--primary-light);color:var(--primary-dark)}.stat-icon.merah{background:var(--danger-light);color:var(--danger)}.stat-icon.kuning{background:var(--warn-light);color:var(--warn)}.stat-icon.biru{background:#dbeafe;color:#1d4ed8}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}@media (max-width: 900px){.two-col{grid-template-columns:1fr}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8.5px 15px;border-radius:9px;border:1px solid transparent;background:var(--primary);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;white-space:nowrap}.btn:hover{background:var(--primary-dark)}.btn svg{width:16px;height:16px}.btn.secondary{background:#fff;color:var(--text);border-color:var(--border)}.btn.secondary:hover{background:#f8fafc}.btn.danger{background:var(--danger)}.btn.danger:hover{background:#b91c1c}.btn.small{padding:5px 10px;font-size:12.5px;border-radius:7px}.btn.ghost-danger{background:transparent;color:var(--danger);border-color:transparent;padding:5px 8px}.btn.ghost-danger:hover{background:var(--danger-light)}.btn.ghost{background:transparent;color:var(--text);border-color:transparent;padding:5px 8px}.btn.ghost:hover{background:#f1f5f9}.btn:disabled{opacity:.55;cursor:not-allowed}.icon-btn{background:none;border:none;cursor:pointer;padding:5px;border-radius:6px;color:var(--muted);display:inline-grid;place-items:center}.icon-btn:hover{background:#f1f5f9;color:var(--text)}.icon-btn.danger:hover{background:var(--danger-light);color:var(--danger)}.icon-btn svg{width:15px;height:15px}.field{margin-bottom:13px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}.field .hint{font-size:12px;color:var(--muted);margin-top:4px}input[type=text],input[type=number],input[type=tel],input[type=date],input[type=month],select,textarea{width:100%;padding:8.5px 11px;border:1px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0596691f}textarea{resize:vertical;min-height:64px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 640px){.form-row,.form-row-3{grid-template-columns:1fr}}.checkbox-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}@media (max-width: 520px){.checkbox-grid{grid-template-columns:repeat(3,1fr)}}.month-chip{border:1px solid var(--border);border-radius:8px;padding:7px 4px;text-align:center;font-size:12.5px;font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;color:var(--muted);transition:all .12s}.month-chip:hover{border-color:var(--primary);color:var(--primary-dark)}.month-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}.quick-picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.quick-picks button{font-size:12px;font-weight:600;border:1px solid var(--border);background:#fff;color:var(--muted);border-radius:99px;padding:4px 11px;cursor:pointer}.quick-picks button:hover{border-color:var(--primary);color:var(--primary-dark)}.total-preview{background:var(--primary-light);border:1px solid #a7f3d0;border-radius:9px;padding:10px 14px;font-weight:700;color:var(--primary-dark);display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.table-wrap{overflow-x:auto}table.data{width:100%;border-collapse:collapse}table.data th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}table.data td{padding:11px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle}table.data tbody tr:hover{background:#f8fafc}table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}table.data tfoot td{font-weight:700;border-top:2px solid var(--border);border-bottom:none;background:#f8fafc}.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600}.badge.masuk{background:var(--primary-light);color:var(--primary-dark)}.badge.keluar{background:var(--danger-light);color:var(--danger)}.badge.abu{background:#f1f5f9;color:var(--muted)}.badge.kuning{background:var(--warn-light);color:var(--warn)}.jumlah-pos{color:var(--primary);font-weight:600}.jumlah-neg{color:var(--danger);font-weight:600}.empty-state{text-align:center;padding:40px 20px;color:var(--muted)}.empty-state p{margin-top:6px;font-size:13.5px}.filter-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.filter-bar select,.filter-bar input{width:auto}.search-box{position:relative}.search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted)}.search-box input{padding-left:32px}.matrix td.cell{text-align:center;padding:6px 4px}.pay-dot{display:inline-grid;place-items:center;width:30px;height:26px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer}.pay-dot.yes{background:var(--primary-light);color:var(--primary-dark)}.pay-dot.no{background:#f8fafc;color:#cbd5e1}.pay-dot.no.future{background:transparent;color:transparent;cursor:default}.pay-dot:hover:not(.future){outline:2px solid var(--primary)}.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);align-items:center;flex-wrap:wrap}.legend span{display:inline-flex;align-items:center;gap:6px}.dot-sample{width:14px;height:14px;border-radius:4px;display:inline-block}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:grid;place-items:center;z-index:100;padding:20px}.modal{background:#fff;border-radius:14px;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 50px #0f172a40;animation:pop .18s ease-out}.modal.wide{max-width:560px}@keyframes pop{0%{transform:scale(.96) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.modal-head h2{font-size:16px;font-weight:700}.modal-body{padding:18px 20px}.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px;border-top:1px solid var(--border)}.alert-error{background:var(--danger-light);color:var(--danger);border:1px solid #fecaca;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:500;margin-bottom:13px}.alert-ok{background:var(--primary-light);color:var(--primary-dark);border:1px solid #a7f3d0;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:500;margin-bottom:13px}.loading{text-align:center;color:var(--muted);padding:40px}.preview-box{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:9px}.preview-box table.data th{position:sticky;top:0;background:#fff;z-index:1}.preview-box table.data td,.preview-box table.data th{padding:8px 12px;font-size:13.5px}.dup-group{border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden}.dup-group-head{background:#f8fafc;padding:8px 13px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.dup-actions{display:flex;justify-content:flex-end;gap:8px;padding:9px 12px;border-top:1px dashed var(--border);background:#fcfcfd}.print-only{display:none}@media print{@page{size:A4 landscape;margin:12mm}body{background:#fff;font-size:12px}.sidebar,.no-print,.page-head .head-actions{display:none!important}.main{margin-left:0;padding:0;max-width:none}.print-only{display:block;margin-bottom:14px}.print-only h1{font-size:18px}.print-only p{color:#333;font-size:12px}.card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}table.data th,table.data td{padding:5px 8px}}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,var(--bg) 40%,#d1fae5)}.login-card{width:min(380px,100%);padding:30px 28px;text-align:center}.login-card .logo-big{width:52px;height:52px;margin:0 auto 12px;background:linear-gradient(135deg,#10b981,#059669);border-radius:14px;display:grid;place-items:center;color:#fff}.login-card h1{font-size:19px}.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:16px}.login-card .field{text-align:left;margin-bottom:12px}.login-btn{width:100%;margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.sidebar-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-user .avatar{width:32px;height:32px;flex:none;border-radius:50%;background:#ffffff14;display:grid;place-items:center;color:#6ee7b7}.sidebar-user .who{flex:1;min-width:0;line-height:1.25}.sidebar-user .who strong{display:block;color:#fff;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-user .who span{font-size:11px;color:var(--sidebar-text)}.btn-logout{background:none;border:none;color:var(--sidebar-text);cursor:pointer;padding:7px;border-radius:8px;display:grid;place-items:center}.btn-logout:hover{color:#fff;background:#ffffff14}.banner-warn{background:var(--warn-light);color:#92400e;font-size:13px;padding:8px 20px}.banner-warn a{color:inherit;font-weight:600}.main.full{margin-left:0}.publik-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--border)}.publik-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}.publik-brand .logo{width:30px;height:30px;background:linear-gradient(135deg,#10b981,#059669);border-radius:9px;display:grid;place-items:center;color:#fff}.publik-actions{display:flex;align-items:center;gap:12px}.publik-tag{font-size:12.5px;color:var(--muted)}.pay-dot.ro{cursor:default}.pay-dot.ro:hover:not(.future){outline:none}@media print{.publik-head{position:static}}