*{box-sizing:border-box}
body{margin:0;font-family:Arial, sans-serif;background:#f6f7f9;}
.topbar{background:#fff;padding:10px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;}
.topbar h2{margin:0;font-size:18px;}
.link{color:#2563eb;text-decoration:none;margin-left:10px;}
.page{padding:10px;}
.card{background:#fff;border-radius:6px;padding:10px;margin-bottom:10px;}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between;}
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th,.table td{border:1px solid #ddd;padding:6px;}
.table input{width:100%;}
.totals .row{margin-bottom:4px;}
.totals .grand{border-top:1px solid #ddd;padding-top:4px;margin-top:4px;}
.footer{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #ddd;padding:8px;display:flex;gap:8px;justify-content:flex-end;}
button{padding:6px 12px;border:1px solid #ccc;border-radius:4px;background:#e5e7eb;}
button.primary{background:#2563eb;color:#fff;border-color:#2563eb;}
button.link{background:none;border:none;color:#2563eb;padding:0;}
.login-box{max-width:320px;margin:80px auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.login-box input{width:100%;margin-bottom:10px;padding:6px;}
.login-box button{width:100%;}
.error{color:red;font-size:13px;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:999;}
.modal-box{background:#fff;padding:10px;border-radius:6px;width:95%;max-width:380px;}
.modal-box input,.modal-box textarea,.modal-box select{width:100%;margin-bottom:8px;padding:6px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.suggest{background:#fff;border:1px solid #ddd;max-height:180px;overflow:auto;margin-top:4px;}
.suggest div{padding:4px 6px;cursor:pointer;}
.suggest div:hover{background:#f1f5f9;}
.balance{margin-top:6px;font-size:13px;}
.balance.positive{color:green;}
.balance.negative{color:red;}