:root{--blue: #378add;--blue-dark: #185fa5;--blue-light: #e6f1fb;--bg-page: #f5f5f3;--bg-card: #ffffff;--bg-secondary: #f5f5f3;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--border: .5px solid #e0dfdb;--radius: 8px;--radius-lg: 12px;--paid-bg: #eaf3de;--paid-text: #3b6d11;--pending-bg: #fff5db;--pending-text: #8a6400;--overdue-bg: #ffe2de;--overdue-text: #9d1d12;--sent-bg: #e7f1ff;--sent-text: #185fa5}*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:var(--text-primary);background:var(--bg-page)}.app-shell{display:flex;min-height:100vh}.sidebar{width:200px;position:fixed;inset:0 auto 0 0;background:var(--bg-card);border-right:var(--border);padding:20px 0}.logo{font-weight:700;color:var(--blue);padding:0 16px 20px}.nav-item{display:block;padding:10px 16px;color:var(--text-secondary);text-decoration:none;border-left:2px solid transparent}.nav-item.active{color:var(--text-primary);border-left-color:var(--blue);background:var(--blue-light)}.content{margin-left:200px;width:calc(100% - 200px);padding:24px;overflow:auto}.card{background:var(--bg-card);border:var(--border);border-radius:var(--radius-lg);padding:16px}.grid.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.muted{color:var(--text-muted);font-size:13px}.row{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.between{justify-content:space-between}.btn{border:var(--border);background:#fff;border-radius:var(--radius);padding:8px 12px;cursor:pointer}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.badge{border-radius:999px;padding:4px 10px;font-size:12px;text-transform:capitalize}.badge.paid{background:var(--paid-bg);color:var(--paid-text)}.badge.sent{background:var(--sent-bg);color:var(--sent-text)}.badge.overdue{background:var(--overdue-bg);color:var(--overdue-text)}.badge.pending,.badge.draft{background:var(--pending-bg);color:var(--pending-text)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14141459;display:grid;place-items:center}.modal-panel{width:min(560px,90vw);background:#fff;border-radius:var(--radius-lg);padding:16px}.modal-header{display:flex;justify-content:space-between;align-items:center}.form{display:grid;gap:10px}input,textarea,select{width:100%;padding:8px;border:var(--border);border-radius:var(--radius)}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:var(--border);padding:8px;font-size:14px}.login-page{min-height:100vh;display:grid;place-items:center}.error-text{color:#9d1d12;margin:0;font-size:13px}.pill{border:var(--border);border-radius:999px;padding:6px 10px;color:var(--text-muted)}.pill.active{background:var(--blue-light);color:var(--blue-dark);border-color:var(--blue)}