*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#20242a}
.app{display:flex;min-height:100vh}.side{width:230px;background:#fff;border-right:1px solid #ddd;padding:22px;position:fixed;height:100vh}
.brand{font-size:22px;font-weight:800;color:#204da7;margin-bottom:28px}.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin:5px 0;border:0;background:transparent;text-align:left;border-radius:8px;cursor:pointer;color:#303640}.navbtn span{width:22px;text-align:center;font-size:18px}.navbtn b{font-size:14px;font-weight:600}.navbtn:hover,.navbtn.active{background:#edf2ff;color:#204da7}.side-bottom{position:absolute;bottom:20px;left:22px;right:22px}
.main{margin-left:230px;width:calc(100% - 230px);padding:24px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.top h1{margin:0}
.card{background:#fff;border:1px solid #e0e4ea;border-radius:12px;padding:20px;margin-bottom:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{background:#fff;border:1px solid #e0e4ea;border-radius:10px;padding:16px}.stat small{color:#68707c}.stat strong{display:block;font-size:21px;margin-top:6px}
.btn{border:0;border-radius:7px;padding:11px 16px;font-weight:700;cursor:pointer}.primary{background:#204da7;color:#fff}.success{background:#168544;color:#fff}.light{background:#edf0f5;color:#222}.actions{display:flex;gap:9px;flex-wrap:wrap}
input,select{width:100%;padding:11px;border:1px solid #cbd1db;border-radius:7px}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}label{font-size:13px;font-weight:700;display:block;margin-bottom:6px}
.hidden{display:none}.muted{color:#68707c;font-size:13px}.business{font-size:20px;font-weight:800}.head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.paybox{background:#fafcff;border:1px dashed #aeb7c5;border-radius:8px;padding:13px;margin-top:14px}.tablewrap{overflow:auto}.ledger{border-collapse:collapse;width:100%;min-width:650px}.ledger th,.ledger td{padding:12px 10px;border-bottom:1px solid #e0e4ea;text-align:left}.ledger th{background:#f7f8fa}.date td{background:#fafbfc;font-weight:800;color:#555;border-bottom:0}.payment td{background:#dff5e5;color:#147a35;font-weight:700}.amount{text-align:right!important;font-weight:700}.summary{display:flex;justify-content:flex-end;gap:30px;flex-wrap:wrap;margin-top:18px}.summary strong{display:block;font-size:18px;margin-top:4px}.balance{color:#204da7}
.modal{position:fixed;inset:0;background:#0008;display:none;align-items:center;justify-content:center;padding:18px}.modal.show{display:flex}.modalbox{background:#fff;width:min(600px,100%);border-radius:12px;padding:20px}.modalhead{display:flex;justify-content:space-between}.close{border:0;border-radius:50%;width:32px;height:32px}
.item{padding:13px 0;border-bottom:1px solid #e0e4ea;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
@media(max-width:800px){.side{width:72px;padding:16px 8px}.brand{font-size:0;text-align:center}.brand:after{content:"DB";font-size:18px}.navbtn{justify-content:center;padding:12px 8px}.navbtn b{display:none}.navbtn span{font-size:20px}.side-bottom{left:8px;right:8px}.main{margin-left:68px;width:calc(100% - 68px);padding:14px}.stats{grid-template-columns:repeat(2,1fr)}.grid,.grid3{grid-template-columns:1fr}.top{align-items:flex-start}}
@media print{.side,.top,.no-print{display:none!important}.main{margin:0;width:100%;padding:0}.card{border:0;box-shadow:none}}

.mobile-top{display:flex;align-items:center;gap:12px}.hamburger{display:none;border:0;background:#edf0f5;border-radius:8px;width:42px;height:40px;font-size:22px;cursor:pointer}.mobile-overlay{display:none}
@media(max-width:800px){
.side{width:260px!important;height:100vh!important;left:-270px!important;top:0!important;z-index:1000!important;padding:22px!important;box-shadow:5px 0 20px #0002;transition:left .25s ease}
.side.open{left:0!important}.side .brand{font-size:22px!important;text-align:left!important}.side .brand:after{display:none!important}
.side .navbtn{justify-content:flex-start!important;padding:12px!important}.side .navbtn b{display:block!important}.side-bottom{left:22px!important;right:22px!important}
.main{margin-left:0!important;width:100%!important;padding:14px!important}.hamburger{display:block}.mobile-overlay.show{display:block;position:fixed;inset:0;background:#0007;z-index:999}.top{gap:10px}.top>.actions{display:none}
}