:root{font-family:Inter,Arial,sans-serif;color:#243247;background:#e0e8f2;font-size:14px;--blue:#2875df;--soft:#edf3fc;--border:#dce5f0}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{border:1px solid transparent;border-radius:8px;padding:11px 16px;cursor:pointer;background:var(--blue);color:white;transition:background .15s,transform .15s}button:hover{background:#1e61c2}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}button.secondary{background:var(--soft);color:#2263bd}button.danger{background:#fff0ed;color:#b33425}button.small{padding:7px 12px}input,select,textarea{background:#f5f8fc;border:1px solid var(--border);border-radius:7px;padding:11px 12px;color:#243247;width:100%;min-width:0}input:focus,select:focus,textarea:focus{outline:2px solid #92b9f0}label{display:flex;flex-direction:column;gap:8px;color:#68778d;font-size:12px}header{height:112px;background:white;display:flex;align-items:center;padding:22px 32px;gap:24px;border-bottom:1px solid var(--border)}.identity{display:flex;gap:12px;align-items:center;min-width:235px}.avatar{border-radius:50%;padding:14px;background:var(--soft);color:var(--blue)}small,.muted{color:#718096}nav{display:flex;gap:7px;flex:1}nav button{white-space:nowrap;font-size:12px;padding:12px}nav button:not(.active){background:var(--soft);color:#2875df}.brand{font-size:32px;font-weight:900;font-style:italic;letter-spacing:-2px}.brand b{color:#d84143}.brand small{display:block;font-size:8px;font-style:normal;letter-spacing:2px;text-align:center}main{max-width:1560px;margin:30px auto;padding:0 32px}h1{font-size:27px;margin:0 0 10px}h2{font-size:20px;margin:0 0 20px}h3{font-size:16px}p{line-height:1.6}.card{background:white;border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 16px #1a2b4a12;padding:24px;margin-bottom:20px}.toolbar{display:flex;gap:12px;margin:26px 0 18px;align-items:center}.toolbar input{flex:2}.toolbar select{flex:1}.toolbar button{white-space:nowrap}.tablewrap{padding:0;overflow:auto;min-height:320px}table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:left}th{color:#718096;background:#f5f8fc;font-size:11px;font-weight:500;padding:18px 16px}td{padding:17px 16px;border-bottom:1px solid #eef2f7;font-size:12px}tbody tr:hover{background:#f5f9ff}.badge{display:inline-block;padding:6px 10px;border-radius:7px;font-size:11px;background:#e9eff8;color:#47617b}.Design{background:#fff0cf;color:#a76b00}.Siapcetak{background:#fbe0eb;color:#ae4368}.Siapdiambil{background:#dceaff;color:#2468cc}.Sudahdiambil,.Lunas{background:#dcf6e6;color:#237546}.BelumLunas{background:#fff0cf;color:#a76b00}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.stats .card{margin:0}.amount{font-size:27px;color:#2375d7;margin-top:12px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.login{max-width:480px;margin:12vh auto;padding:36px}.login .brand{margin-bottom:28px}.login label{margin:18px 0}.login button{width:100%}.notice{background:#edf4ff;border-radius:8px;padding:14px;font-size:13px;line-height:1.6}.empty{text-align:center;padding:80px 24px;color:#718096}.error{color:#b33425;white-space:pre-wrap}.formerror:empty{display:none}dialog{border:0;border-radius:13px;padding:28px;max-width:1000px;width:94vw;max-height:90vh;box-shadow:0 20px 60px #10203040}dialog::backdrop{background:#15233880}.dialoghead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e6edf6;margin-bottom:22px;padding-bottom:16px}.dialoghead h2{margin:0}dialog form{display:grid;gap:18px}.detailgrid{padding:20px;background:#f3f7fb;border-radius:10px;margin-bottom:24px}.detailgrid strong{display:block;margin-top:8px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#243247;color:white;border-radius:9px;display:none;z-index:20}#network{position:sticky;top:0;background:#fff0cf;color:#774a00;padding:12px;text-align:center;z-index:30}#print{display:none}.itemrow{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px}.footnote{font-size:12px;color:#718096;margin-top:22px}.inline{display:flex;gap:12px;align-items:center}.inline input[type=checkbox]{width:auto}a{color:#2269c9}footer{padding:20px;text-align:center;color:#77859b;font-size:11px}@media(max-width:900px){header{height:auto;flex-wrap:wrap;padding:16px;gap:14px}.identity{min-width:0;flex:1}.brand{font-size:28px}nav{order:3;overflow:auto;flex-basis:100%;padding-bottom:2px}main{padding:0 14px;margin-top:22px}.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}.toolbar select{flex-basis:42%}.grid,.stats{grid-template-columns:1fr}.card{padding:20px}.tablewrap{padding:0}.login{margin:8vh 16px;max-width:none}.itemrow{grid-template-columns:1fr 80px}.dialoghead{gap:12px}dialog{padding:20px}.amount{font-size:24px}}@media print{body>*{display:none!important}body{background:white}#print{display:block!important;padding:22px;font:14px Arial;color:#111}#print table{white-space:normal}#print th,#print td{font-size:12px;padding:12px;border-bottom:1px solid #ccc}#print h1{font-size:24px}.noprint{display:none!important}@page{size:A4;margin:12mm}}