@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body,#root{font-family:Plus Jakarta Sans,Inter,Segoe UI,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;max-width:100vw;overflow-x:hidden}body{overflow-y:auto;transition:background .3s ease,color .3s ease;background:radial-gradient(circle at 20% 20%,#1d2433 0%,#111827 40%,#09090b 100%) fixed;min-height:100vh}:root{--bg-main: transparent;--bg-panel: rgba(16,20,30,.82);--bg-panel-soft: rgba(22,28,42,.75);--bg-sidebar: rgba(10,13,20,.94);--bg-topbar: rgba(12,16,24,.9);--bg-table: rgba(12,16,24,.6);--bg-table-head: rgba(20,26,38,.88);--bg-hover: rgba(30,40,60,.8);--bg-input: rgba(10,14,22,.7);--text-main: #f1f5f9;--text-soft: #94a3b8;--text-muted: #64748b;--border-main: rgba(148,163,184,.1);--border-soft: rgba(148,163,184,.06);--border-blue: rgba(59,130,246,.35);--shadow-main: 0 20px 48px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);--shadow-card: 0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);--shadow-glow-blue: 0 0 32px rgba(59,130,246,.25);--shadow-glow-green: 0 0 32px rgba(34,197,94,.2);--blue: #3b82f6;--blue-bg: rgba(59,130,246,.12);--blue-glow: rgba(59,130,246,.25);--green: #10b981;--green-bg: rgba(16,185,129,.12);--green-glow: rgba(16,185,129,.2);--purple: #8b5cf6;--purple-bg: rgba(139,92,246,.12);--purple-glow: rgba(139,92,246,.2);--red: #ef4444;--red-bg: rgba(239,68,68,.12);--red-glow: rgba(239,68,68,.2);--orange: #f59e0b;--orange-bg: rgba(245,158,11,.12);--orange-glow: rgba(245,158,11,.2);--cyan: #06b6d4;--cyan-bg: rgba(6,182,212,.12);--glass-bg: rgba(16,20,30,.8);--glass-border: rgba(255,255,255,.08);--glass-blur: blur(18px);--glass-shine: inset 0 1px 0 rgba(255,255,255,.06);--glass-shadow: 0 10px 40px rgba(0,0,0,.35);--glass-radius: 20px;--grad-blue: linear-gradient(135deg, #3b82f6, #6366f1);--grad-green: linear-gradient(135deg, #10b981, #059669);--grad-purple: linear-gradient(135deg, #8b5cf6, #ec4899);--grad-orange: linear-gradient(135deg, #f59e0b, #d97706);--grad-red: linear-gradient(135deg, #ef4444, #dc2626);--grad-cyan: linear-gradient(135deg, #06b6d4, #3b82f6);--grad-sidebar-active: linear-gradient(90deg, rgba(59,130,246,.25), rgba(99,102,241,.15))}body.light{background:radial-gradient(circle at 20% 20%,#dbeafe 0%,#f1f5f9 40%,#f8fafc 100%) fixed;--bg-main: transparent;--bg-panel: rgba(255,255,255,.9);--bg-panel-soft: rgba(248,250,252,.92);--bg-sidebar: rgba(255,255,255,.96);--bg-topbar: rgba(255,255,255,.94);--bg-table: rgba(255,255,255,.95);--bg-table-head: rgba(241,245,249,1);--bg-hover: rgba(239,246,255,1);--bg-input: rgba(248,250,252,1);--text-main: #0f172a;--text-soft: #475569;--text-muted: #94a3b8;--border-main: rgba(15,23,42,.08);--border-soft: rgba(15,23,42,.04);--border-blue: rgba(59,130,246,.3);--shadow-main: 0 16px 40px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);--shadow-card: 0 8px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);--blue: #2563eb;--blue-bg: rgba(37,99,235,.08);--green: #059669;--green-bg: rgba(5,150,105,.08);--purple: #7c3aed;--purple-bg: rgba(124,58,237,.08);--red: #dc2626;--red-bg: rgba(220,38,38,.08);--orange: #d97706;--orange-bg: rgba(217,119,6,.08);--glass-bg: rgba(255,255,255,.85);--glass-border: rgba(15,23,42,.08);--glass-shine: inset 0 1px 0 rgba(255,255,255,1);--glass-shadow: 0 8px 32px rgba(15,23,42,.08);--grad-sidebar-active: linear-gradient(90deg, rgba(37,99,235,.12), rgba(99,102,241,.08))}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(59,130,246,.2);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.35)}.glass-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--glass-radius);box-shadow:var(--glass-shadow),var(--glass-shine);transition:transform .3s ease,box-shadow .3s ease}.glass-card:hover{transform:translateY(-3px);box-shadow:0 20px 50px #00000073,var(--glass-shine)}.btn-primary{background:var(--grad-blue);border:none;border-radius:12px;padding:10px 20px;color:#fff;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 16px #3b82f659;transition:all .2s}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #3b82f673}.pill-pending{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-glow);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}.pill-paid{background:var(--green-bg);color:var(--green);border:1px solid var(--green-glow);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}.pill-partial{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-glow);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}.pill-overdue{background:var(--red-bg);color:var(--red);border:1px solid var(--red-glow);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}.table-row{transition:background .15s ease;border-bottom:1px solid var(--border-soft)}.table-row:hover{background:rgba(59,130,246,.05)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-in{animation:fadeInUp .35s ease both}input:focus,select:focus,textarea:focus{border-color:#3b82f680!important;box-shadow:0 0 0 3px #3b82f61f!important}::-moz-selection{background:rgba(59,130,246,.3);color:#fff}::selection{background:rgba(59,130,246,.3);color:#fff}@media (max-width: 767px){main{padding:10px!important}.glass-card{border-radius:14px!important}h1,h2{font-size:18px!important}table{display:block;overflow-x:auto;white-space:nowrap}input[type=date]{width:100%!important}.pill-pending,.pill-paid,.pill-partial,.pill-overdue{font-size:10px!important;padding:2px 8px!important}.filter-bar{flex-wrap:wrap}[role=dialog]{border-radius:0!important;max-height:100dvh!important}.hide-mobile{display:none!important}button{min-height:36px}.pay-btn{padding:8px 14px!important;font-size:13px!important}}@media (max-width: 480px){main{padding:8px!important}h1,h2{font-size:16px!important}}