:root{--ink: #14202e;--muted: #6b7a89;--canvas: #eaeef3;--surface: #ffffff;--line: #dee4ec;--paid: #0e7c66;--debt: #c2410c;--primary: #2f4b82;--primary-ink: #ffffff;--danger: #b91c1c;--ok: #0e7c66;--warn: #b45309;--radius: 10px;--radius-sm: 6px;--shadow: 0 1px 2px rgba(20, 32, 46, .06), 0 4px 12px rgba(20, 32, 46, .05);--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SF Mono", ui-monospace, "Roboto Mono", "Menlo", "Consolas", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);color:var(--ink);background:var(--canvas);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.app-shell{display:flex;height:100vh;overflow:hidden}.sidebar{width:236px;flex-shrink:0;background:var(--ink);color:#cdd6e0;display:flex;flex-direction:column;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .18s ease}.app-shell.collapsed .sidebar{width:66px}.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4) var(--space-3) var(--space-3)}.sidebar .brand{color:#fff;font-weight:700;font-size:15px;line-height:1.3;overflow:hidden;white-space:nowrap}.sidebar .brand small{display:block;color:#8fa0b3;font-weight:500;font-size:11px;margin-top:2px}.app-shell.collapsed .brand{display:none}.collapse-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);border:none;background:#ffffff12;color:#cdd6e0;cursor:pointer;transition:background .12s}.collapse-btn:hover{background:#ffffff26;color:#fff}.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 var(--space-2)}.nav-group-label{color:#6b7d92;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:var(--space-3) var(--space-2) var(--space-1);white-space:nowrap}.app-shell.collapsed .nav-group-label{text-align:center;padding:var(--space-2) 0 var(--space-1);font-size:9px;overflow:hidden}.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-2);border-radius:var(--radius-sm);color:#cdd6e0;text-decoration:none;font-size:13.5px;transition:background .12s,color .12s;white-space:nowrap}.nav-link .icon{flex-shrink:0;display:inline-flex;width:20px;height:20px}.nav-link .label{overflow:hidden;text-overflow:ellipsis}.app-shell.collapsed .nav-link{justify-content:center;padding:10px 0}.app-shell.collapsed .nav-link .label{display:none}.nav-link:hover{background:#ffffff0f;color:#fff}.nav-link.active{background:var(--primary);color:#fff}.sidebar .spacer{flex:1;min-height:var(--space-3)}.sidebar-user{border-top:1px solid rgba(255,255,255,.1);margin:var(--space-2) var(--space-2) var(--space-3);padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.user-row{display:flex;align-items:center;gap:var(--space-2);min-width:0}.avatar{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-transform:uppercase}.user-meta{min-width:0;line-height:1.25}.user-meta .name{color:#fff;font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-meta .role{color:#8fa0b3;font-size:11px;text-transform:capitalize}.user-actions{display:flex;gap:var(--space-2)}.user-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.14);background:#ffffff0d;color:#dbe3ec;font-size:12px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}.user-btn:hover{background:#ffffff1f;color:#fff}.user-btn.logout:hover{background:var(--debt);border-color:var(--debt);color:#fff}.user-btn .icon{width:16px;height:16px;display:inline-flex}.app-shell.collapsed .user-meta,.app-shell.collapsed .user-btn .label{display:none}.app-shell.collapsed .sidebar-user{align-items:center}.app-shell.collapsed .user-row{justify-content:center}.app-shell.collapsed .user-actions{flex-direction:column;width:100%}.app-shell.collapsed .user-btn{padding:8px 0}.main-col{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}.content{flex:1;min-width:0;overflow-y:auto;padding:var(--space-5) var(--space-6) var(--space-6)}.topbar{display:none;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--ink);color:#fff;position:sticky;top:0;z-index:40}.topbar .brand{font-weight:700;font-size:14px}.hamburger{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:none;background:#ffffff14;color:#fff;cursor:pointer}.scrim{display:none;position:fixed;inset:0;background:#0a101880;z-index:55}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap}.page-head h1{margin:0;font-size:22px;color:var(--ink)}.page-head p{margin:4px 0 0;color:var(--muted);font-size:13px}.page-head .head-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-pad{padding:var(--space-4)}.card-title{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 var(--space-3)}.grid{display:grid;gap:var(--space-4)}.kpi-row{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow);position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}.kpi.accent-debt:before{background:var(--debt)}.kpi.accent-paid:before{background:var(--paid)}.kpi .label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.kpi .value{font-size:18px;font-weight:700;margin-top:6px;color:var(--ink);white-space:nowrap;overflow-x:auto;letter-spacing:-.01em}.kpi .sub{font-size:12px;color:var(--muted);margin-top:4px}.kpi.accent-debt .value{color:var(--debt)}.kpi.accent-paid .value{color:var(--paid)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s;white-space:nowrap}.btn:hover{background:#f4f7fa}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:#26406f}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.danger:hover{background:#a01818}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.sm{padding:5px 10px;font-size:12px}.btn .icon{width:15px;height:15px;display:inline-flex}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--space-3)}.field label{font-size:12.5px;font-weight:500;color:var(--ink)}.input,.select,textarea.input{padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);width:100%}.input:focus,.select:focus,textarea.input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #2f4b821f}.field .err{color:var(--danger);font-size:11.5px}.form-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr 1fr}.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr}.form-grid .full{grid-column:1 / -1}@media(max-width:560px){.form-grid,.form-grid.cols-3{grid-template-columns:1fr}}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch}table.data{width:100%;border-collapse:collapse;font-size:13px}table.data th,table.data td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}table.data th{background:#f6f8fb;font-weight:600;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;z-index:1;cursor:pointer;user-select:none}table.data th.no-sort{cursor:default}table.data td.right,table.data th.right{text-align:right}table.data tbody tr:hover{background:#f8fafc}table.data tbody tr:last-child td{border-bottom:none}.row-actions{display:inline-flex;gap:6px;white-space:nowrap}.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}.badge.lunas{background:#d7f0e9;color:#0a5e4d}.badge.belum{background:#fbe4d5;color:#9a3412}.badge.role{background:#e6ecf6;color:var(--primary)}.bar-track{background:#eef2f6;border-radius:999px;height:10px;overflow:hidden;display:flex}.bar-paid{background:var(--paid);height:100%}.bar-debt{background:var(--debt);height:100%}.legend{display:flex;gap:var(--space-4);font-size:12px;color:var(--muted);margin-top:var(--space-2);flex-wrap:wrap}.legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}.donut-wrap{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.donut{flex-shrink:0}.donut-center{font-weight:700}.donut-legend{display:flex;flex-direction:column;gap:var(--space-2);font-size:13px;min-width:160px;flex:1}.donut-legend .li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.donut-legend .li .k{display:flex;align-items:center;gap:7px;color:var(--muted)}.center-box{display:flex;align-items:center;justify-content:center;min-height:40vh}.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty{text-align:center;color:var(--muted);padding:var(--space-6)}.error-note{background:#fdecec;border:1px solid #f5c2c2;color:#9a2020;padding:var(--space-3);border-radius:var(--radius-sm);font-size:13px}.toast-wrap{position:fixed;bottom:var(--space-4);right:var(--space-4);display:flex;flex-direction:column;gap:8px;z-index:100}.toast{padding:10px 14px;border-radius:var(--radius-sm);color:#fff;font-size:13px;box-shadow:var(--shadow);min-width:220px}.toast.ok{background:var(--paid)}.toast.err{background:var(--danger)}.toolbar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-4)}.toolbar .grow{flex:1;min-width:180px}.pager{display:flex;gap:var(--space-2);align-items:center;justify-content:flex-end;margin-top:var(--space-3);font-size:13px;color:var(--muted);flex-wrap:wrap}.modal-overlay{position:fixed;inset:0;background:#14202e73;display:flex;align-items:flex-start;justify-content:center;z-index:70;padding:var(--space-4);overflow-y:auto}.modal-card{width:100%;background:var(--surface);border-radius:var(--radius);box-shadow:0 12px 40px #0a101847;margin:4vh auto}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:16px}.modal-body{padding:var(--space-4)}.modal-foot{display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4);border-top:1px solid var(--line);flex-wrap:wrap}.combo{position:relative}.combo-list{border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:4px;max-height:220px;overflow-y:auto;background:var(--surface);box-shadow:var(--shadow)}.combo-item{padding:8px 12px;cursor:pointer;font-size:13.5px}.combo-item:hover,.combo-item.active{background:#eef3fb}.combo-picked{font-size:11.5px;color:var(--paid);margin-top:4px}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--canvas);padding:var(--space-4)}.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-5)}.login-card h1{font-size:19px;margin:0 0 4px}.login-card .muted{color:var(--muted);font-size:13px;margin:0 0 var(--space-4)}.dash-2col{grid-template-columns:1fr 1fr}@media(max-width:980px){.dash-2col{grid-template-columns:1fr}}.stack-row{display:grid;grid-template-columns:150px 1fr auto;gap:var(--space-3);align-items:center;padding:7px 0;font-size:13px}.stack-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.app-shell{position:relative}.sidebar{position:fixed;left:0;top:0;z-index:60;transform:translate(-100%);box-shadow:8px 0 24px #0a101840;width:250px}.app-shell.mobile-open .sidebar{transform:none}.app-shell.mobile-open .scrim{display:block}.collapse-btn{display:none}.content{padding:var(--space-4)}.topbar{display:flex}.page-head h1{font-size:19px}}@media print{.sidebar,.topbar,.scrim,.toolbar,.page-head .head-actions,.no-print{display:none!important}.app-shell,.content{display:block;height:auto;overflow:visible;padding:0}body{background:#fff}.print-only{display:block!important}.card{box-shadow:none;break-inside:avoid}table.data th{position:static}}.print-only{display:none}