:root{--ink:#14333c;--muted:#6d7f83;--line:#dce7e5;--cream:#f4f4ed;--teal:#0d6b64;--orange:#e97843;--shadow:0 18px 50px rgba(31,57,57,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif}.shell{width:min(1400px,calc(100% - 64px));margin:auto}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1400px)/2));position:sticky;top:0;z-index:10}.brand,.header-right{display:flex;align-items:center;gap:12px}.brandmark,.logo{width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font:23px Georgia}.brand strong{display:block;font:17px Georgia}.brand small{color:var(--muted);letter-spacing:.07em}.sync{font-size:13px;color:var(--muted);padding:9px 13px;background:#f4f8f7;border-radius:99px}.sync i{width:7px;height:7px;background:#28a272;border-radius:50%;display:inline-block;margin-right:6px}.logout{color:var(--ink);text-decoration:none;font-weight:700}.hero{padding:58px 0 34px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.eyebrow{color:var(--teal);font-weight:800;letter-spacing:.14em;font-size:11px;margin:0 0 10px}.hero h1,.auth-card h1{font:clamp(36px,4vw,62px)/1.04 Georgia;margin:0}.hero h1 em{color:var(--orange);font-weight:400}.sub{max-width:690px;color:var(--muted);font-size:16px;line-height:1.65}.filters{display:flex;gap:10px;background:#fff;padding:12px;border-radius:16px;box-shadow:var(--shadow)}label{font-size:11px;color:var(--muted);font-weight:700}.filters label{text-transform:uppercase;letter-spacing:.08em}.filters select{display:block;border:0;background:#f2f6f5;border-radius:9px;margin-top:5px;padding:9px 32px 9px 10px;color:var(--ink);font-weight:700}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpis article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}.kpis article.accent{background:var(--ink);color:#fff}.kpis span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase}.kpis strong{display:block;font:clamp(22px,2vw,34px) Georgia;margin:12px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpis small{color:var(--muted)}.progress{height:7px;background:#e3ebe9;border-radius:99px;margin-top:16px;overflow:hidden}.progress i{height:100%;display:block;background:var(--orange)}.overview{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-top:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:20px}.chart-panel,.issue-panel,.table-panel{padding:25px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.panel h2{font:25px Georgia;margin:0}.pill{padding:8px 12px;border:1px solid var(--line);border-radius:99px;font-size:11px;font-weight:800}.bars{display:grid;gap:16px;margin-top:25px}.bar-row{display:grid;grid-template-columns:105px 1fr 135px;gap:14px;align-items:center;font-size:12px}.bar-row>div{height:11px;background:#edf2f1;border-radius:99px;overflow:hidden}.bar-row i{height:100%;display:block;background:linear-gradient(90deg,var(--teal),#68b5a4)}.bar-row strong{text-align:right;font-size:12px}.issue-panel{background:#fff8f2;border-color:#f1d8c7}.issue-top{display:flex;align-items:center;gap:14px}.warning{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f9d5bb;color:#a84e22;font:bold 22px Georgia}.issue-panel>p{color:#786c64;line-height:1.5}.issue-list{border-top:1px solid #eddccf}.issue-list div{padding:11px 0;border-bottom:1px solid #eddccf}.issue-list span,.issue-list small{display:block}.issue-list span{font-weight:800;font-size:12px}.issue-list small{color:#7e7168;margin-top:3px}.table-panel{margin-top:16px}.search{border:1px solid var(--line);background:#f7faf9;border-radius:11px;padding:9px 12px}.search input{border:0;outline:0;background:transparent;min-width:230px}.table-wrap{overflow-x:auto;margin-top:22px}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:#7a898b;text-transform:uppercase;font-size:10px;padding:12px;border-bottom:1px solid var(--line)}td{padding:13px 12px;border-bottom:1px solid #e7eeec;white-space:nowrap}td:first-child{min-width:230px;white-space:normal}td strong,td small{display:block}td small{color:#8a9899;margin-top:3px}td.amount{font-weight:800;color:#b6532c}code{font-size:10px;color:#687979}.status{display:inline-block;padding:6px 9px;border-radius:99px;font-size:9px;font-weight:900}.lunas,.lebih-bayar{background:#dff1e8;color:#267353}.sebagian{background:#fff0cc;color:#87651c}.belum-bayar{background:#fde0d4;color:#a74322}.data-bermasalah{background:#f9d5d5;color:#9d2828}.tidak-ada-tagihan{background:#e9eeee;color:#687777}.pagination,footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.pagination{padding-top:18px}.pagination div{display:flex;gap:10px;align-items:center}.pagination button{border:1px solid var(--line);background:#fff;border-radius:8px;width:32px;height:32px}footer{padding:26px 0 38px}.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f5f2e9,#dceae6)}.auth-card{width:min(440px,calc(100% - 30px));background:white;padding:38px;border-radius:24px;box-shadow:var(--shadow)}.auth-card h1{font-size:34px}.auth-card p{color:var(--muted);line-height:1.5}.auth-card form{display:grid;gap:16px;margin-top:22px}.auth-card input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:9px}.auth-card button{padding:13px;border:0;border-radius:10px;background:var(--ink);color:white;font-weight:800}.alert{padding:11px;background:#fde0d4;color:#963d22;border-radius:9px;font-size:13px}@media(max-width:1000px){.hero{align-items:flex-start;flex-direction:column}.kpis{grid-template-columns:repeat(2,1fr)}.overview{grid-template-columns:1fr}}@media(max-width:650px){.shell{width:calc(100% - 28px)}.topbar{padding:0 14px}.sync{display:none}.kpis{grid-template-columns:1fr}.filters{width:100%;flex-direction:column}.bar-row{grid-template-columns:80px 1fr}.bar-row strong{grid-column:2}.panel-head{align-items:flex-start;flex-direction:column}.search,.search input{width:100%}footer{gap:8px;flex-direction:column;align-items:flex-start}}