:root{
  --primary:#4b3cc4;
  --primary-2:#2e63d9;
  --green:#09a56f;
  --green-soft:#dff6eb;
  --red:#e74b4b;
  --red-soft:#ffe2e2;
  --orange:#f2a33b;
  --bg:#f4f6fa;
  --card:#fff;
  --text:#172033;
  --muted:#778197;
  --border:#e5e8ef;
  --shadow:0 8px 24px rgba(28,37,64,.08);
  --radius:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{padding-bottom:84px}
button,input,select{font:inherit}
button{border:0;cursor:pointer}
.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;height:74px;padding:12px max(18px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand-block{display:flex;flex-direction:column;line-height:1.2;flex:1}
.eyebrow{font-size:11px;color:var(--muted)}
.brand-block strong{font-size:17px}
.top-actions{display:flex;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--border);font-size:19px;color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.back-btn{font-size:28px;line-height:1}
.screen{width:min(100%,1120px);margin:0 auto;padding:18px}
.page{animation:fade .18s ease}
@keyframes fade{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
.hero-card{background:linear-gradient(135deg,#17355c,#17365e 55%,#1f4c77);color:#fff;border-radius:var(--radius);padding:19px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-70px;background:rgba(255,255,255,.07)}
.label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.82}
.big-money{font-size:28px;font-weight:800;margin:6px 0 4px}
.hero-sub{font-size:12px;opacity:.78}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;gap:14px}
.hero-stat{border-right:1px solid rgba(255,255,255,.15)}
.hero-stat:last-child{border-right:0;padding-left:4px}
.hero-stat b{display:block;font-size:15px;margin-top:3px}
.green-text{color:#53e2b0}.blue-text{color:#76a7ff}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.quick-card{min-height:88px;border-radius:14px;padding:15px;color:#fff;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.quick-card:nth-child(1){background:linear-gradient(135deg,#08a26e,#10b77e)}
.quick-card:nth-child(2){background:linear-gradient(135deg,#2d62d5,#285be1)}
.quick-card:nth-child(3){background:linear-gradient(135deg,#5b45c9,#664bd9)}
.quick-card:nth-child(4){background:linear-gradient(135deg,#069e96,#0a8988)}
.quick-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:23px}
.quick-card strong{font-size:12px}.quick-card small{display:block;opacity:.82;margin-top:2px}
.section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px;margin-top:12px;box-shadow:0 4px 18px rgba(28,37,64,.035)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title h3{font-size:14px}
.section-title button{color:var(--primary);background:none;font-size:12px;font-weight:700}
.summary{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px}
.donut{width:125px;height:125px;border-radius:50%;display:grid;place-items:center;margin:auto;background:conic-gradient(var(--green) 0 59%,#e84d4d 59% 100%);position:relative}
.donut:after{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:#fff}
.donut span{position:relative;z-index:1;text-align:center;font-weight:800;font-size:15px}.donut small{display:block;font-weight:500;font-size:10px;color:var(--muted)}
.legend{display:grid;gap:9px}.legend-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--green)}.dot.red{background:var(--red)}.legend-row b{margin-left:auto;color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-box{padding:13px;background:#f8f9fc;border-radius:12px}.stat-box small{color:var(--muted);font-size:10px}.stat-box b{display:block;margin-top:4px;font-size:16px}
.search{position:relative;margin-bottom:12px}.search input{padding-left:42px}.search span{position:absolute;left:14px;top:12px;color:var(--muted)}
input,select{width:100%;height:45px;border:1px solid var(--border);border-radius:11px;padding:0 13px;background:#fff;color:var(--text);outline:none}input:focus,select:focus{border-color:#8278df;box-shadow:0 0 0 3px rgba(75,60,196,.09)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{margin-bottom:11px}.field label{display:block;font-size:11px;font-weight:700;margin:0 0 6px}.field.full{grid-column:1/-1}
.input-money{display:grid;grid-template-columns:52px 1fr}.input-money span{border:1px solid var(--border);border-right:0;border-radius:11px 0 0 11px;display:grid;place-items:center;color:var(--muted);font-size:12px;background:#f8f9fc}.input-money input{border-radius:0 11px 11px 0}
.btn{height:45px;padding:0 18px;border-radius:11px;font-weight:800;font-size:12px}.btn-primary{background:linear-gradient(135deg,#4d3cd0,#5140c7);color:#fff}.btn-secondary{background:#edf0f5;color:#344056}.btn-danger{background:var(--red);color:#fff}.btn-full{width:100%}
.customer-list{display:grid;gap:8px}.customer-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px;display:grid;grid-template-columns:1fr auto;gap:8px;box-shadow:0 3px 10px rgba(28,37,64,.035)}.customer-name{font-weight:800;font-size:13px}.customer-meta{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.55}.amount{font-size:12px;color:#245ecb;font-weight:800;text-align:right}.status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:8px;font-size:9px;font-weight:800;margin-top:5px}.status.paid{background:var(--green-soft);color:#078158}.status.unpaid{background:var(--red-soft);color:#d43d3d}.more{background:none;color:var(--muted);font-size:19px;margin-left:8px}
.pill-tabs{display:flex;gap:7px;margin-bottom:12px}.pill-tabs button{padding:8px 12px;border-radius:9px;background:#eef1f6;color:var(--muted);font-size:10px;font-weight:700}.pill-tabs button.active{background:var(--primary);color:#fff}
.empty{padding:32px 15px;text-align:center;color:var(--muted);font-size:12px}.empty b{display:block;color:var(--text);font-size:14px;margin-bottom:5px}
.receipt-preview{max-width:520px;margin:auto;background:#fff;border:1px solid var(--border);padding:25px 22px;border-radius:14px;box-shadow:var(--shadow);font-family:"Courier New",monospace}.receipt-title{text-align:center;font-family:inherit;font-size:14px;font-weight:800}.receipt-sub{text-align:center;font-size:10px;color:#555;margin-top:5px}.receipt-line{border-top:1px dashed #aaa;margin:17px 0}.receipt-row{display:grid;grid-template-columns:100px 15px 1fr;font-size:11px;margin:9px 0}.receipt-row span:last-child{font-weight:700}.receipt-foot{text-align:center;font-size:10px;color:#555;line-height:1.7}
.profile-head{background:linear-gradient(135deg,#4255cf,#3564d8);color:#fff;border-radius:var(--radius);padding:28px 20px;text-align:center}.avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.7);display:grid;place-items:center;font-size:35px;margin:0 auto 10px}.profile-head h2{font-size:17px}.profile-head p{font-size:11px;opacity:.8;margin-top:3px}.info-list{display:grid;gap:0}.info-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);font-size:11px}.info-row:last-child{border:0}.info-row span{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,22,35,.55);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(100%,430px);max-height:90vh;overflow:auto;background:#fff;border-radius:17px;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.25);animation:pop .16s ease}@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.modal-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff0db;color:#e89a34;font-size:25px;margin:0 auto 12px}.modal h3{text-align:center;font-size:14px}.modal p{text-align:center;font-size:11px;color:var(--muted);line-height:1.65;margin:8px 0 16px}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.detail-table{background:#f8f9fc;border-radius:12px;padding:10px 13px;margin-bottom:14px}.detail-row{display:grid;grid-template-columns:90px 10px 1fr;font-size:10px;padding:6px 0}.detail-row span:last-child{font-weight:700}
.toast-container{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:200;display:grid;gap:8px;width:min(90%,360px)}.toast{background:#1c2434;color:#fff;border-radius:10px;padding:11px 14px;font-size:11px;box-shadow:var(--shadow);animation:toast .2s ease}@keyframes toast{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:70px;background:rgba(255,255,255,.96);backdrop-filter:blur(15px);border-top:1px solid var(--border);z-index:50;display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;align-items:end;padding:0 max(12px,calc((100vw - 1120px)/2));box-shadow:0 -5px 20px rgba(20,30,50,.05)}.nav-item{height:58px;background:none;color:#7a8292;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.nav-item span{font-size:20px;line-height:18px}.nav-item small{font-size:9px}.nav-item.active{color:var(--primary);font-weight:800}.fab{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#4b3cc4,#5144dc);color:#fff;font-size:30px;line-height:1;margin:0 auto 10px;box-shadow:0 8px 20px rgba(75,60,196,.3)}
.dark{--bg:#0e1117;--card:#171b24;--text:#eef1f7;--muted:#9aa4b8;--border:#282f3d}.dark .topbar,.dark .bottom-nav,.dark .modal,.dark input,.dark select,.dark .customer-card,.dark .receipt-preview,.dark .section{background:#171b24}.dark .icon-btn{background:#171b24;color:#fff;border-color:#2b3342}.dark .stat-box,.dark .detail-table{background:#202633}.dark .donut:after{background:#171b24}
@media(min-width:760px){body{padding-bottom:0}.screen{padding:26px}.topbar{position:sticky}.bottom-nav{display:none}.dashboard-grid{grid-template-columns:repeat(4,1fr)}.stats{grid-template-columns:repeat(4,1fr)}.hero-card{padding:24px}.customer-list{grid-template-columns:1fr 1fr}.section{padding:20px}.form-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.summary{grid-template-columns:120px 1fr;gap:10px}.donut{width:105px;height:105px}.donut:after{width:74px;height:74px}.big-money{font-size:25px}}

/* Bulk import + developer card */
.import-drop{border:1.5px dashed #cbd1dc;border-radius:14px;padding:20px 14px;text-align:center;background:#f8f9fc;cursor:pointer;transition:.15s}.import-drop.drag{border-color:var(--primary);background:#f0efff}.import-drop input{display:none}.import-file-icon{font-size:28px;color:var(--primary);margin-bottom:5px}.import-drop b{display:block;font-size:12px}.import-drop small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.import-help{margin-top:10px;background:#f5f7fa;border-radius:10px;padding:10px;font-size:9px;line-height:1.7;color:var(--muted)}.import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.import-summary>div{background:#f5f7fa;border-radius:10px;padding:10px 5px;text-align:center}.import-summary b{display:block;font-size:17px;color:var(--primary)}.import-summary span{font-size:8px;color:var(--muted)}.import-errors{background:#fff3f3;border:1px solid #ffd7d7;border-radius:10px;padding:9px;font-size:9px;color:#c44;line-height:1.7;margin-bottom:10px}.developer-card{text-align:center;overflow:hidden;position:relative}.developer-badge{width:45px;height:45px;border-radius:50%;margin:0 auto 8px;background:linear-gradient(135deg,#f84c68,#e83f7c);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 8px 18px rgba(232,63,124,.22)}.developer-kicker{font-size:9px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}.developer-card h3{font-size:16px;margin-top:3px}.developer-card>p{font-size:9px;color:var(--muted);margin:5px 0 12px}.developer-contact{display:grid;gap:7px}.developer-contact div{display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px}.developer-contact span{width:23px;height:23px;border-radius:7px;background:#f0efff;color:var(--primary);display:grid;place-items:center}.developer-contact a{color:var(--text);font-weight:700;text-decoration:none}.developer-version{font-size:8px;color:var(--muted);margin-top:13px;padding-top:10px;border-top:1px solid var(--border)}.dark .import-drop,.dark .import-help,.dark .import-summary>div{background:#202633;border-color:#30394a}.dark .developer-contact span{background:#252c3b}.dark .developer-contact a{color:var(--text)}

.bulk-btn{border:1px solid var(--border)!important;border-radius:9px!important;padding:8px 10px!important;background:var(--card)!important;color:var(--primary)!important;font-size:10px!important;font-weight:800!important;white-space:nowrap}.bulk-btn:hover{background:#f0efff!important}

/* Tombol kembali pada konfirmasi pembayaran */
.modal-top{display:flex;justify-content:flex-start;margin:-4px 0 2px}
.modal-back{width:34px;height:34px;border-radius:50%;font-size:28px;line-height:1;padding:0;display:inline-flex;align-items:center;justify-content:center}