:root { --bg:#f6f7fb; --fg:#222; --pri:#1769aa; --mut:#666; --ok:#1b8e5a; --warn:#d9822b; --bad:#c0392b; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg)}
.topbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.hamburger{font-size:1.25rem;background:none;border:1px solid #ddd;border-radius:.25rem;padding:.25rem .5rem}
.nav{display:none;gap:.5rem;flex-wrap:wrap;padding:.5rem 1rem;background:#fff;border-bottom:1px solid #eee}
.nav a{display:inline-block;padding:.5rem .75rem;color:var(--pri);text-decoration:none;border-radius:.25rem}
.nav a:hover{background:#eef6fc}
.container{padding:1rem;max-width:1200px;margin:0 auto}
.card{background:#fff;border:1px solid #eee;border-radius:.5rem;padding:1rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
label{display:block;margin:.25rem 0 .25rem .1rem;font-size:.9rem;color:var(--mut)}
input,select,button,textarea{width:100%;padding:.55rem .6rem;border:1px solid #ccc;border-radius:.3rem}
button{cursor:pointer;background:var(--pri);color:#fff;border:0}
button.secondary{background:#6c757d}
button.warn{background:var(--warn)}
button.bad{background:var(--bad)}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #eee}
th,td{padding:.5rem;border-bottom:1px solid #eee;text-align:left;font-size:.92rem}
.status-Paid{color:#fff;background:var(--ok);padding:.1rem .4rem;border-radius:.25rem}
.status-Partial{color:#fff;background:var(--warn);padding:.1rem .4rem;border-radius:.25rem}
.status-Due{color:#fff;background:var(--bad);padding:.1rem .4rem;border-radius:.25rem}
.text-right{text-align:right}
.text-muted{color:var(--mut)}
.inline{display:flex;gap:.5rem;align-items:center}
.badge{background:#eef6fc;color:var(--pri);padding:.15rem .4rem;border-radius:.5rem;font-size:.8rem}
.highlight{color:var(--bad);font-weight:600}
.list{background:#fff;border:1px solid #eee;border-radius:.5rem}
.list > div{padding:.5rem .75rem;border-bottom:1px solid #eee}
.list > div:last-child{border-bottom:0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal.hidden{display:none}
.modal-content{background:#fff;max-width:800px;width:100%;border-radius:.5rem;position:relative;padding:1rem}
.modal-close{position:absolute;right:.5rem;top:.5rem;background:#eee;color:#333}
#signature-pad{border:1px dashed #bbb;border-radius:.25rem;background:#fff}
@media (min-width:768px){ .nav{display:flex} .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} .hamburger{display:none} }
@media (min-width:1024px){ .grid-3{grid-template-columns:repeat(3,1fr)} }