:root{color-scheme:light;--bg:#f3f4f0;--panel:#ffffff;--ink:#141414;--muted:#6b6f76;--line:#e5e2da;--brand:#111111;--accent:#f37021;--accent-soft:#fff1e8;--green:#14804a;--green-soft:#e8f6ef;--red:#b42318;--yellow:#a15c07;--shadow:0 18px 50px rgba(20,20,20,0.08)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(243,112,33,.12),transparent 34%),linear-gradient(180deg,#faf8f3 0,var(--bg) 100%);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}h1,h2,p{margin-top:0}.shell{max-width:1380px;margin:0 auto;padding:26px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.hero-bar{padding:26px;border:1px solid rgba(17,17,17,.08);border-radius:14px;background:linear-gradient(135deg,#111111,#27221f);color:#ffffff;box-shadow:var(--shadow)}.eyebrow{margin:0 0 8px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}h1{font-size:32px;letter-spacing:-.03em}h1,h2{margin:0}h2{font-size:18px;letter-spacing:-.01em}.hero-copy{max-width:620px;margin:10px 0 0;color:rgba(255,255,255,.72);line-height:1.55}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tab{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.08);color:#ffffff;font-size:14px;font-weight:800;text-decoration:none}.tab.active{background:#ffffff;color:var(--brand)}.tab.danger{color:#ffd8d8}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:14px;gap:14px}.chart-grid,.metric-grid{display:grid;margin-bottom:16px}.chart-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-gap:16px;gap:16px}.metric,.panel{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(20,20,20,.05)}.metric{padding:18px;min-height:128px}.metric.accent{background:linear-gradient(135deg,#ffffff,var(--accent-soft));border-color:#ffd9c2}.metric-label{color:var(--muted);font-size:13px;font-weight:800;margin-bottom:10px}.metric-value{font-size:31px;font-weight:900;letter-spacing:-.04em}.panel-title{display:flex;justify-content:space-between;gap:12px;padding:18px 18px 0}.panel-title span{color:var(--muted);font-size:13px}.chart-panel{min-height:292px}.status-bars{display:grid;grid-gap:14px;gap:14px;padding:18px}.bar-head{display:flex;justify-content:space-between;margin-bottom:7px;font-size:14px;text-transform:capitalize}.bar-track{height:11px;overflow:hidden;border-radius:999px;background:#ecebe7}.bar-fill{height:100%;border-radius:inherit;background:var(--muted)}.bar-fill.pending{background:var(--accent)}.bar-fill.paid{background:var(--green)}.month-chart{display:grid;grid-template-columns:repeat(6,minmax(86px,1fr));align-items:end;grid-gap:12px;gap:12px;min-height:230px;padding:24px 18px 18px}.month-col{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}.month-value{color:var(--muted);font-size:11px;font-weight:800;text-align:center}.month-bar{width:100%;max-width:56px;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--accent),#111111)}.month-label{font-size:12px;font-weight:800;text-align:center}.toolbar{display:flex;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--line)}.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}button,input,select{font:inherit}input,select{height:40px;min-width:180px;border:1px solid var(--line);border-radius:8px;padding:0 11px;background:#fff}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:1080px}td,th{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#fbfaf8}tbody tr:hover{background:#fffaf6}.main-cell{font-weight:900}.sub{display:block;margin-top:5px;color:var(--muted);font-size:12px}.link{color:#0b57d0;font-weight:800;text-decoration:none}.link:hover{text-decoration:underline}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;text-transform:capitalize}.badge.pending{background:#fff4e5;color:var(--yellow)}.badge.paid{background:var(--green-soft);color:var(--green)}.badge.other{background:#f1f2f4;color:var(--muted)}.actions{display:flex;gap:6px;flex-wrap:wrap}.btn{height:32px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 10px;font-size:12px;font-weight:900;cursor:pointer}.btn.primary{border-color:var(--accent);background:var(--accent);color:#fff}.btn.success{border-color:var(--green);color:var(--green)}.btn:disabled{opacity:.55;cursor:wait}.empty{padding:44px;color:var(--muted);text-align:center}.login-page{display:grid;min-height:100vh;place-items:center;padding:22px}.login-card{width:min(100%,440px);padding:34px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:linear-gradient(145deg,#111111,#29231f);color:#ffffff;box-shadow:var(--shadow)}.login-brand{display:inline-flex;margin-bottom:28px;padding:8px 12px;border-radius:8px;background:#ffffff;color:var(--brand);font-weight:900}.login-copy{margin:10px 0 22px;color:rgba(255,255,255,.7);line-height:1.5}.login-error{margin-bottom:14px;padding:10px 12px;border:1px solid rgba(255,110,110,.35);border-radius:8px;background:rgba(180,35,24,.15);color:#ffd6d6;font-size:14px}.login-form{display:grid;grid-gap:14px;gap:14px}.login-form label{display:grid;grid-gap:7px;gap:7px;color:rgba(255,255,255,.78);font-size:13px;font-weight:800}.login-form input{width:100%;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#ffffff}.login-button{height:44px;margin-top:6px;border:0;border-radius:9px;background:var(--accent);color:#ffffff;font-weight:900;cursor:pointer}@media (max-width:980px){.shell{padding:18px}.toolbar,.topbar{flex-direction:column}.chart-grid,.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{justify-content:flex-start}}@media (max-width:680px){.chart-grid,.metric-grid,.month-chart{grid-template-columns:1fr}.hero-bar,.login-card{padding:22px}h1{font-size:26px}}