*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f6f9;color:#20252b}header{background:#1A2B6D;color:#fff;padding:14px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}header strong{font-size:20px}header small{display:block;opacity:.8}nav{display:flex;gap:16px;flex-wrap:wrap}nav a{color:#fff;text-decoration:none}main{max-width:1100px;margin:28px auto;padding:0 18px}h1{color:#1A2B6D}h2{margin-top:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.cards>div,.panel{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 10px #00000010}.cards b{font-size:28px;color:#1A2B6D;display:block}.cards span{color:#666}.panel{margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center}.btn{display:inline-block;background:#DD9B09;color:#fff;border:0;border-radius:7px;padding:10px 15px;text-decoration:none;cursor:pointer}.wa{background:#168a4a}.full{width:100%}table{width:100%;border-collapse:collapse;margin-top:12px;background:#fff}th,td{border:1px solid #ddd;padding:9px;text-align:left}th{background:#1A2B6D;color:#fff}label{display:block;font-weight:bold;margin:10px 0}input,select,textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;margin-top:5px;font:inherit}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.wide{grid-column:1/-1}.status{padding:4px 8px;border-radius:20px;font-size:12px}.lunas{background:#dff1df}.belum-lunas{background:#ffe5d8}.login{min-height:100vh;display:grid;place-items:center;background:#f4f6f9}.loginbox{width:min(400px,92%);background:#fff;padding:30px;border-radius:14px;box-shadow:0 4px 20px #0002}.alert{background:#ffe5e5;padding:10px;margin:10px 0;border-radius:6px}.actions{max-width:900px;margin:20px auto;display:flex;gap:10px;justify-content:flex-end;padding:0 18px}.invoice{max-width:900px;margin:0 auto 40px;background:#fff;padding:35px;box-shadow:0 2px 12px #0001}.inv-head{display:flex;justify-content:space-between;border-bottom:4px solid #DD9B09;padding-bottom:18px}.inv-head h1{margin:0}.inv-head p{margin:4px 0;color:#666}.right{text-align:right}.customer{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}.totals{margin-left:auto;max-width:320px}.totals div{display:flex;justify-content:space-between;padding:7px 0}.grand{background:#DD9B09;color:#fff;padding:12px!important;font-size:18px}.foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:25px;border-top:1px solid #ddd;padding-top:20px}@media(max-width:700px){.cards,.grid,.customer,.foot{grid-template-columns:1fr}.inv-head{flex-direction:column}.right{text-align:left}.actions{justify-content:flex-start;flex-wrap:wrap}}@media print{body{background:#fff}.no-print{display:none!important}.invoice{box-shadow:none;margin:0;max-width:none;padding:0}.invoice table{page-break-inside:auto}.invoice tr{page-break-inside:avoid}.invoice{font-size:12px}@page{size:A4;margin:12mm}}