:root{--bg-primary: #050505;--bg-dark: #050505;--bg-secondary: #0D0D0F;--bg-surface: #0D0D0F;--bg-surface-elevated: #141417;--bg-card: rgba(20, 20, 20, .85);--bg-glass: rgba(20, 20, 20, .85);--bg-input: #121214;--bg-modal: #0D0D0F;--bg-overlay: rgba(0, 0, 0, .82);--bg-sidebar: #0D0D0F;--bg-navbar: rgba(13, 13, 15, .92);--border-color: rgba(230, 184, 74, .25);--border-subtle: rgba(230, 184, 74, .18);--border-accent: rgba(230, 184, 74, .5);--border-red: rgba(225, 29, 72, .5);--border-divider: rgba(255, 255, 255, .08);--border-width-thin: 1px;--border-width-medium: 2px;--border-width-thick: 3px;--text-primary: #FFFFFF;--text-main: #FFFFFF;--text-secondary: #A1A1AA;--text-muted: #A1A1AA;--text-dim: #71717A;--text-heading: #FFFFFF;--heading-color: #FFFFFF;--text-placeholder: #52525B;--primary-accent: #E6B84A;--primary-gold: #E6B84A;--primary-gold-hover: #FFD978;--primary-gold-glow: rgba(230, 184, 74, .35);--accent-gold: #E6B84A;--gold-gradient: linear-gradient(135deg, #E6B84A 0%, #FFD978 100%);--gold-gradient-hover: linear-gradient(135deg, #FFD978 0%, #FFF0AA 100%);--secondary-accent: #E11D48;--accent-red: #E11D48;--accent-red-hover: #BE123C;--red-gradient: linear-gradient(135deg, #FB7185 0%, #E11D48 100%);--red-glow: 0 0 22px rgba(225, 29, 72, .4);--accent-orange: #F97316;--accent-amber: #F59E0B;--amber-glow: 0 0 20px rgba(245, 158, 11, .35);--accent-emerald: #10B981;--accent-blue: #38BDF8;--accent-purple: #A855F7;--color-success: #10B981;--color-warning: #F59E0B;--color-danger: #E11D48;--color-info: #38BDF8;--color-focus: rgba(230, 184, 74, .4);--color-disabled: #3F3F46;--color-hover: rgba(230, 184, 74, .1);--color-active: rgba(230, 184, 74, .18);--color-selection: rgba(230, 184, 74, .28);--status-active-bg: rgba(16, 185, 129, .15);--status-active-text: #10B981;--status-active-border: rgba(16, 185, 129, .35);--status-pending-bg: rgba(245, 158, 11, .18);--status-pending-text: #FDE047;--status-pending-border: rgba(245, 158, 11, .45);--status-overdue-bg: rgba(225, 29, 72, .18);--status-overdue-text: #FB7185;--status-overdue-border: rgba(225, 29, 72, .45);--status-info-bg: rgba(230, 184, 74, .15);--status-info-text: #E6B84A;--status-info-border: rgba(230, 184, 74, .35);--scrollbar-track: #050505;--scrollbar-thumb: rgba(230, 184, 74, .45);--scrollbar-thumb-hover: #E6B84A;--glass-border: 1px solid rgba(230, 184, 74, .22);--glass-shadow: 0 16px 40px rgba(0, 0, 0, .75);--neon-glow: 0 0 25px rgba(230, 184, 74, .25);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .5);--shadow-md: 0 4px 12px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .7);--shadow-card: 0 12px 32px rgba(0, 0, 0, .65);--shadow-card-hover: 0 18px 42px rgba(230, 184, 74, .2);--shadow-floating: 0 12px 32px rgba(0, 0, 0, .7);--shadow-dropdown: 0 16px 40px rgba(0, 0, 0, .85);--shadow-modal: 0 24px 60px rgba(0, 0, 0, .9);--font-family-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-family-heading: "Outfit", "Plus Jakarta Sans", sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--font-heading: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--font-size-display: 2.25rem;--font-size-h1: 1.875rem;--font-size-h2: 1.5rem;--font-size-h3: 1.25rem;--font-size-h4: 1.125rem;--font-size-body-lg: 1rem;--font-size-body-md: .875rem;--font-size-body-sm: .8125rem;--font-size-caption: .75rem;--font-size-label: .75rem;--font-size-button: .875rem;--font-size-nav: .875rem;--font-size-stat: 2rem;--font-size-table: .8125rem;--font-size-input: .875rem;--font-size-helper: .6875rem;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--font-weight-black: 900;--line-height-none: 1;--line-height-tight: 1.2;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--letter-spacing-tighter: -.05em;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0em;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--letter-spacing-widest: .1em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-pill: 9999px;--radius-circle: 50%;--transition-duration-fast: .15s;--transition-duration-normal: .25s;--transition-duration-slow: .35s;--transition-ease: cubic-bezier(.4, 0, .2, 1);--transition-ease-in: cubic-bezier(.4, 0, 1, 1);--transition-ease-out: cubic-bezier(0, 0, .2, 1);--transition-fast: all .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: all .3s cubic-bezier(.4, 0, .2, 1);--icon-size-sm: 14px;--icon-size-md: 18px;--icon-size-lg: 24px;--icon-size-xl: 32px}[data-theme=light]{--bg-primary: #f8fafc;--bg-dark: #f8fafc;--bg-secondary: #ffffff;--bg-surface: #ffffff;--bg-surface-elevated: #f1f5f9;--bg-card: #ffffff;--bg-glass: rgba(255, 255, 255, .95);--bg-input: #f1f5f9;--bg-modal: #ffffff;--bg-overlay: rgba(15, 23, 42, .55);--bg-sidebar: #ffffff;--bg-navbar: rgba(255, 255, 255, .9);--border-color: #cbd5e1;--border-subtle: #e2e8f0;--border-accent: #cbd5e1;--border-red: rgba(225, 29, 72, .35);--border-divider: #e2e8f0;--primary-accent: #c59b27;--primary-gold: #c59b27;--primary-gold-hover: #b48a1c;--primary-gold-glow: rgba(197, 155, 39, .2);--accent-gold: #c59b27;--gold-gradient: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);--gold-gradient-hover: linear-gradient(135deg, #e5c158 0%, #c59b27 100%);--secondary-accent: #e11d48;--accent-red: #e11d48;--accent-red-hover: #be123c;--red-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);--red-glow: 0 4px 14px rgba(225, 29, 72, .15);--text-primary: #0f172a;--text-main: #0f172a;--text-secondary: #475569;--text-muted: #475569;--text-dim: #64748b;--text-heading: #0f172a;--heading-color: #0f172a;--text-placeholder: #94a3b8;--status-active-bg: rgba(16, 185, 129, .12);--status-active-text: #047857;--status-active-border: rgba(16, 185, 129, .4);--status-pending-bg: rgba(245, 158, 11, .14);--status-pending-text: #b45309;--status-pending-border: rgba(245, 158, 11, .4);--status-overdue-bg: rgba(225, 29, 72, .12);--status-overdue-text: #be123c;--status-overdue-border: rgba(225, 29, 72, .4);--status-info-bg: rgba(212, 175, 55, .14);--status-info-text: #996515;--status-info-border: rgba(212, 175, 55, .4);--scrollbar-track: #f1f5f9;--scrollbar-thumb: #cbd5e1;--scrollbar-thumb-hover: #94a3b8;--glass-border: 1px solid #e2e8f0;--glass-shadow: 0 4px 20px -2px rgba(0, 0, 0, .08), 0 2px 6px -1px rgba(0, 0, 0, .04);--neon-glow: 0 0 15px rgba(212, 175, 55, .15);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--shadow-card: 0 4px 20px -2px rgba(0, 0, 0, .08);--shadow-card-hover: 0 8px 30px -4px rgba(0, 0, 0, .12);--shadow-floating: 0 12px 32px rgba(0, 0, 0, .12);--shadow-dropdown: 0 16px 40px rgba(0, 0, 0, .15);--shadow-modal: 0 20px 40px rgba(0, 0, 0, .15)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);background-image:radial-gradient(circle at 15% 15%,rgba(0,255,136,.08) 0%,transparent 40%),radial-gradient(circle at 85% 85%,rgba(0,217,255,.08) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(168,85,247,.05) 0%,transparent 60%);color:var(--text-main);font-family:var(--font-body);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-xs)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--font-weight-extrabold);color:var(--heading-color);letter-spacing:var(--letter-spacing-tight)}.app-container{display:flex;min-height:100vh;background-color:var(--bg-dark);transition:background-color .3s ease}.main-content{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto}.content-wrapper{padding:var(--space-6) var(--space-8) var(--space-12) var(--space-8);max-width:1440px;margin:0 auto;width:100%}.sidebar-container{width:260px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;z-index:50;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s ease,border-color .3s ease}.mobile-menu-toggle{display:none;background:none;border:1px solid var(--border-subtle);color:var(--primary-gold);padding:var(--space-2);border-radius:var(--radius-sm);cursor:pointer;align-items:center;justify-content:center;transition:var(--transition-fast)}.mobile-menu-toggle:hover{background:#d4af3726}.sidebar-backdrop{display:none}.glass-card{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--glass-shadow);transition:var(--transition-normal);position:relative;overflow:hidden;color:var(--text-main)}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary-gold),transparent);opacity:.4}.glass-card-interactive{transition:all .3s cubic-bezier(.16,1,.3,1)}.glass-card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--border-accent)!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:10px 20px;font-family:var(--font-body);font-weight:var(--font-weight-bold);font-size:var(--font-size-button);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:var(--transition-fast);text-decoration:none;white-space:nowrap;min-height:40px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.98)}.btn-primary{background:var(--gold-gradient);color:#050505;box-shadow:0 4px 20px #e6b84a59;letter-spacing:var(--letter-spacing-wide);position:relative;overflow:hidden}.btn-primary:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(60deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:rotate(30deg) translate(-100%);transition:transform .6s ease}.btn-primary:hover:after{transform:rotate(30deg) translate(100%)}.btn-primary:hover{background:var(--gold-gradient-hover);transform:translateY(-2px);box-shadow:0 8px 30px #e6b84a73}.btn-secondary{background:var(--bg-surface-elevated);color:var(--text-main);border:1px solid var(--border-subtle)}.btn-secondary:hover{background:#d4af371f;border-color:var(--primary-gold);color:var(--primary-gold)}.btn-success{background:linear-gradient(135deg,#10b981,#047857);color:#fff;box-shadow:0 4px 16px #10b98159}.btn-success:hover{background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 6px 20px #10b98180}.btn-danger{background:var(--red-gradient);color:#fff;box-shadow:0 4px 16px #e11d4859}.btn-danger:hover{background:linear-gradient(135deg,#fb7185,#be123c);box-shadow:0 6px 20px #e11d4880}.btn-icon{padding:var(--space-2);border-radius:var(--radius-sm)}.btn-sm{padding:6px 12px;font-size:var(--font-size-body-sm);border-radius:var(--radius-sm);min-height:34px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-full);font-size:var(--font-size-label);font-weight:var(--font-weight-bold);text-transform:capitalize}.badge-paid,.badge-active,.badge-approved,.badge-success{background:var(--status-active-bg);color:var(--status-active-text);border:1px solid var(--status-active-border)}.badge-overdue,.badge-expired,.badge-rejected,.badge-danger{background:var(--status-overdue-bg);color:var(--status-overdue-text);border:1px solid var(--status-overdue-border)}.badge-pending,.badge-pending-payment,.badge-warning{background:var(--status-pending-bg);color:var(--status-pending-text);border:1px solid var(--status-pending-border)}.badge-info{background:var(--status-info-bg);color:var(--status-info-text);border:1px solid var(--status-info-border)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}.form-label{font-size:var(--font-size-body-sm);font-weight:var(--font-weight-bold);color:var(--text-muted)}.form-input,.form-select,.form-textarea{width:100%;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:10px 14px;color:var(--text-main);font-family:var(--font-body);font-size:var(--font-size-input);transition:var(--transition-fast);min-height:42px}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--primary-gold);box-shadow:0 0 0 3px var(--primary-gold-glow)}.form-select option{background:var(--bg-surface);color:var(--text-main)}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);border:var(--glass-border)}.custom-table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--font-size-table);min-width:600px}.custom-table th{background:var(--bg-surface-elevated);padding:14px 18px;font-family:var(--font-heading);font-size:var(--font-size-caption);font-weight:var(--font-weight-extrabold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);color:var(--primary-gold);border-bottom:1px solid var(--border-subtle);white-space:nowrap}.custom-table td{padding:14px 18px;border-bottom:1px solid var(--border-subtle);color:var(--text-main);vertical-align:middle;white-space:nowrap}.custom-table tbody tr{transition:var(--transition-fast)}.custom-table tbody tr:nth-child(2n){background-color:#ffffff05}.custom-table tbody tr:hover{background-color:#e6b84a1a!important}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-5);animation:fadeIn .2s ease-out}.modal-content{background:var(--bg-modal);border:var(--border-accent);border-radius:var(--radius-lg);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-modal);animation:slideUp .25s cubic-bezier(.16,1,.3,1);color:var(--text-main)}.modal-header{padding:20px 24px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between}.modal-body{padding:var(--space-6)}.modal-footer{padding:16px 24px;border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end;gap:var(--space-3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1023px){.mobile-menu-toggle{display:inline-flex}.sidebar-container{position:fixed;top:0;left:0;bottom:0;z-index:1000;width:280px;transform:translate(-100%);box-shadow:none}.sidebar-container.mobile-open{transform:translate(0);box-shadow:0 0 50px #00000080}.sidebar-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-backdrop.mobile-open{opacity:1;pointer-events:auto}.content-wrapper{padding:20px 20px 40px}.header-navbar{padding:0 20px!important}.modal-content{max-width:90vw}}@media (max-width: 640px){.content-wrapper{padding:16px 12px 32px}.header-navbar{padding:0 12px!important;height:64px!important}.header-title-text{font-size:16px!important}.header-subtitle-text{font-size:11px!important;display:none}.hide-on-mobile{display:none!important}.btn-text-mobile{display:none}.glass-card{padding:16px!important;border-radius:12px!important}.modal-overlay{padding:12px}.modal-content{max-width:100%!important;max-height:95vh;border-radius:14px}.modal-header{padding:14px 16px}.modal-body{padding:16px}.modal-footer{padding:12px 16px;flex-wrap:wrap}.grid-mobile-stack,.modal-body-grid{grid-template-columns:1fr!important}}@keyframes flg-spin{to{transform:rotate(360deg)}}.spin{animation:flg-spin 1s linear infinite}