:root{--bg:#0b0f14;--fg:#e6f2ff;--muted:#9bb4c9;--accent:#0ea5e9;--border:rgba(255,255,255,.12);--danger:#ef4444;--ok:#10b981;--warn:#f59e0b}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:22px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.title-wrap h1{margin:0}
.muted{color:var(--muted)}
.small{font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border:1px solid var(--border);padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{border-color:rgba(14,165,233,.35);background:rgba(14,165,233,.12)}
.btn.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.1)}
.input,select{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--fg);border-radius:12px;padding:10px 12px}
.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}
.toolbar .left,.toolbar .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0 14px}
.stat{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.03)}
.stat .value{font-size:20px;font-weight:600}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:rgba(255,255,255,.04);text-align:left;padding:10px;border-bottom:1px solid var(--border)}
tbody td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{cursor:pointer}
tbody tr:hover{background:rgba(255,255,255,.03)}
.num{text-align:right}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px}
.badge.paid{border-color:rgba(16,185,129,.5)}
.badge.overdue{border-color:rgba(239,68,68,.5)}
.badge.sent{border-color:rgba(14,165,233,.5)}
.badge.draft{border-color:rgba(156,163,175,.5)}
.badge.cancelled{border-color:rgba(107,114,128,.5)}
/* Drawer */
.drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.4);backdrop-filter:saturate(120%) blur(2px);z-index:50}
.drawer[aria-hidden="false"]{display:block}
.drawer-card{position:absolute;right:0;top:0;bottom:0;width:480px;max-width:100%;background:#0e1319;border-left:1px solid var(--border);padding:12px 14px 18px;overflow:auto}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.icon{background:transparent;border:1px solid var(--border);border-radius:10px;color:inherit;padding:6px 10px;cursor:pointer}
.form label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.form input,.form select,.form textarea{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:var(--fg);padding:10px}
.form-actions{display:flex;gap:8px;margin-top:6px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr} .drawer-card{width:100%}}