:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-sm:8px;--radius-md:10px;--radius-lg:12px;--radius-pill:999px;--transition-fast:.2s ease;--transition:.25s ease;--color-bg:#f5f6f9;--color-surface:#fff;--color-surface-alt:#f9fafb;--color-border:#e5e7ec;--color-border-strong:#d4d8e1;--color-text:#1a1d2b;--color-text-muted:#677085;--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-soft:#4f46e51a;--color-primary-contrast:#fff;--color-success:#15803d;--color-success-soft:#22c55e24;--color-warning:#b45309;--color-warning-soft:#f59e0b29;--color-danger:#dc2626;--color-danger-soft:#dc26261f;--color-info:#0369a1;--color-info-soft:#0ea5e924;--color-sidebar-bg:#181a27;--color-sidebar-text:#aab0c4;--color-sidebar-text-active:#fff;--color-sidebar-active-bg:#2a2d40;--shadow-sm:0 1px 2px #1018280f;--shadow-md:0 4px 12px #10182814;--shadow-lg:0 12px 28px #1018281f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif}:root.dark{--color-bg:#15171f;--color-surface:#1d2029;--color-surface-alt:#232631;--color-border:#313644;--color-border-strong:#3d4252;--color-text:#e9eaf0;--color-text-muted:#9499ab;--color-primary:#818cf8;--color-primary-hover:#6d78f0;--color-primary-soft:#818cf829;--color-primary-contrast:#14161f;--color-success:#4ade80;--color-success-soft:#4ade8024;--color-warning:#fbbf24;--color-warning-soft:#fbbf2429;--color-danger:#f87171;--color-danger-soft:#f8717124;--color-info:#38bdf8;--color-info-soft:#38bdf824;--color-sidebar-bg:#11131b;--color-sidebar-text:#9499ab;--color-sidebar-text-active:#fff;--color-sidebar-active-bg:#232631;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 14px #00000059;--shadow-lg:0 16px 32px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);transition:background-color var(--transition), color var(--transition);margin:0}button,input,select,textarea{font-family:inherit;font-size:inherit}h1,h2,h3{letter-spacing:-.01em}h1{margin:0;font-size:24px}h2{margin:0;font-size:16px}.btn,.ui-btn{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);font-size:14px;font-weight:500;display:inline-flex}.btn:hover,.ui-btn:hover{background:var(--color-surface-alt);border-color:var(--color-border-strong)}.btn:active,.ui-btn:active{transform:translateY(1px)}.btn:disabled,.ui-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary,.ui-btn-primary{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}.btn-primary:hover,.ui-btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.ui-btn-secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.ui-btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.ui-btn-danger:hover{opacity:.9;background:var(--color-danger)}.ui-btn-ghost{color:var(--color-primary);background:0 0;border-color:#0000}.ui-btn-ghost:hover{background:var(--color-primary-soft)}.ui-btn-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite ui-spin}@keyframes ui-spin{to{transform:rotate(360deg)}}.btn-link{color:var(--color-primary);cursor:pointer;transition:opacity var(--transition-fast);background:0 0;border:none;padding:0;font-size:14px}.btn-link:hover{opacity:.8}.input,.ui-input{border:1px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.input:focus,.ui-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.ui-input-error{border-color:var(--color-danger)}.ui-input-error:focus{box-shadow:0 0 0 3px var(--color-danger-soft)}select.input,select.ui-input{appearance:auto}textarea.input,textarea.ui-input{resize:vertical;min-height:80px}.ui-field{gap:var(--space-1);flex-direction:column;font-size:13px;display:flex}.ui-field-label{color:var(--color-text-muted);font-weight:500}.ui-field-error{color:var(--color-danger);font-size:12px}.field{gap:var(--space-1);color:var(--color-text-muted);flex-direction:column;font-size:13px;font-weight:500;display:flex}.field-wide{grid-column:1/-1}.card,.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);transition:box-shadow var(--transition), border-color var(--transition)}.page-header{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2);flex-wrap:wrap;display:flex}.error-text{color:var(--color-danger);font-size:14px}.muted-text{color:var(--color-text-muted);font-size:14px}.form-panel{margin:var(--space-5) 0;gap:var(--space-4);flex-direction:column;display:flex}.form-panel h2{margin:0;font-size:18px}.form-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=700px){.form-grid{grid-template-columns:1fr}}.actions{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.table-wrap,.ui-table-wrap{margin-top:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow-x:auto}.table,.ui-table{border-collapse:collapse;width:100%}.table th,.table td,.ui-table th,.ui-table td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);white-space:nowrap}.table th,.ui-table th{background:var(--color-surface-alt);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:600}.table tbody tr,.ui-table tbody tr{transition:background-color var(--transition-fast)}.table tbody tr:hover,.ui-table tbody tr:hover{background:var(--color-surface-alt)}.table tr:last-child td,.ui-table tr:last-child td{border-bottom:none}.ui-table-empty{text-align:center;color:var(--color-text-muted);padding:var(--space-8) var(--space-4);white-space:normal}.badge,.ui-badge{align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-pill);font-size:12px;font-weight:600;display:inline-flex}.badge-success,.ui-badge-success{background:var(--color-success-soft);color:var(--color-success)}.badge-muted,.ui-badge-muted{background:var(--color-border);color:var(--color-text-muted)}.badge-danger,.ui-badge-danger{background:var(--color-danger-soft);color:var(--color-danger)}.ui-badge-warning{background:var(--color-warning-soft);color:var(--color-warning)}.ui-badge-info{background:var(--color-info-soft);color:var(--color-info)}.ui-alert{align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid #0000;font-size:14px;display:flex}.ui-alert-danger{background:var(--color-danger-soft);color:var(--color-danger);border-color:var(--color-danger-soft)}.ui-alert-success{background:var(--color-success-soft);color:var(--color-success);border-color:var(--color-success-soft)}.ui-alert-warning{background:var(--color-warning-soft);color:var(--color-warning);border-color:var(--color-warning-soft)}.ui-alert-info{background:var(--color-info-soft);color:var(--color-info);border-color:var(--color-info-soft)}.ui-modal-overlay{padding:var(--space-4);z-index:100;animation:ui-fade-in var(--transition);background:#0f111880;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ui-modal{background:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:90vh;box-shadow:var(--shadow-lg);animation:ui-modal-in var(--transition);overflow-y:auto}.ui-modal-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.ui-modal-header h2{font-size:17px}.ui-modal-close{color:var(--color-text-muted);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);transition:background-color var(--transition-fast);background:0 0;border:none;font-size:20px;line-height:1}.ui-modal-close:hover{background:var(--color-surface-alt)}.ui-modal-body{padding:var(--space-5)}@keyframes ui-fade-in{0%{opacity:0}}@keyframes ui-modal-in{0%{opacity:0;transform:translateY(8px)scale(.98)}}.ui-skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-alt) 50%, var(--color-border) 75%);background-size:200% 100%;animation:1.4s ease-in-out infinite ui-shimmer;display:block}@keyframes ui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.invoice-items-row{background:var(--color-surface-alt)}.invoice-items-row td{padding:var(--space-3) var(--space-4)}.invoice-total{font-size:18px;font-weight:600}.invoice-item-row,.invoice-add-item{margin-top:var(--space-2)}.payment-form{gap:var(--space-2);flex-direction:column;display:flex}.payment-form .input{max-width:220px}.sidebar{background:var(--color-sidebar-bg);width:240px;height:100vh;color:var(--color-sidebar-text);padding:var(--space-4) var(--space-3);transition:background-color var(--transition), transform var(--transition);flex-direction:column;flex-shrink:0;display:flex;position:sticky;top:0}.sidebar-brand{letter-spacing:-.02em;color:var(--color-sidebar-text-active);padding:var(--space-2) var(--space-3) var(--space-6);font-size:19px;font-weight:700}.sidebar-nav{gap:var(--space-1);flex-direction:column;flex:1;display:flex}.sidebar-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-sidebar-text);text-align:left;cursor:pointer;width:100%;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;font-size:14px;font-weight:500;text-decoration:none;display:block}.sidebar-link:hover{background:var(--color-sidebar-active-bg);color:var(--color-sidebar-text-active)}.sidebar-link-active{background:var(--color-primary);color:#fff;font-weight:600}.sidebar-link-active:hover{background:var(--color-primary-hover);color:#fff}.sidebar-logout{margin-top:var(--space-3)}.sidebar-overlay{display:none}@media (width<=900px){.sidebar{z-index:30;box-shadow:var(--shadow-lg);position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.sidebar-open{transform:translate(0)}.sidebar-overlay{z-index:20;animation:ui-fade-in var(--transition-fast);background:#0f111880;display:block;position:fixed;inset:0}}.notif-bell{position:relative}.notif-bell-trigger{padding:var(--space-2) var(--space-3);font-size:16px;position:relative}.notif-bell-count{background:var(--color-danger);color:#fff;border-radius:var(--radius-pill);justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:700;line-height:1;display:flex;position:absolute;top:-4px;right:-4px}.notif-bell-panel{top:calc(100% + var(--space-2));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:320px;max-height:380px;box-shadow:var(--shadow-lg);z-index:50;animation:ui-fade-in var(--transition-fast);position:absolute;right:0;overflow-y:auto}.notif-bell-panel-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-size:14px;font-weight:600}.notif-bell-empty{padding:var(--space-5) var(--space-4);text-align:center}.notif-bell-list{margin:0;padding:0;list-style:none}.notif-bell-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);cursor:pointer;transition:background-color var(--transition-fast);display:flex}.notif-bell-item:last-child{border-bottom:none}.notif-bell-item:hover{background:var(--color-surface-alt)}.notif-bell-item.is-read{opacity:.6}.notif-bell-icon{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;display:flex}.notif-bell-text{flex-direction:column;gap:2px;font-size:13px;display:flex}.notif-bell-dot{background:var(--color-primary);border-radius:50%;flex-shrink:0;width:8px;height:8px;margin-top:4px}.header{justify-content:space-between;align-items:center;gap:var(--space-4);height:64px;padding:0 var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:10;transition:background-color var(--transition), border-color var(--transition);display:flex;position:sticky;top:0}.header-menu-toggle{display:none}.header-search{width:100%;max-width:320px}.header-actions{align-items:center;gap:var(--space-4);display:flex}.header-user{color:var(--color-text);font-size:14px;font-weight:500}@media (width<=900px){.header{padding:0 var(--space-4);gap:var(--space-2)}.header-menu-toggle{display:inline-flex}.header-search,.header-user{display:none}}.main-layout{min-height:100vh;display:flex}.main-layout-content{flex-direction:column;flex:1;min-width:0;display:flex}.main-layout-page{padding:var(--space-6);flex:1}@media (width<=700px){.main-layout-page{padding:var(--space-4)}}.login-page{background:var(--color-bg);min-height:100vh;padding:var(--space-4);justify-content:center;align-items:center;display:flex}.login-form{gap:var(--space-4);width:100%;max-width:380px;padding:var(--space-8) var(--space-6);flex-direction:column;display:flex}.login-brand{text-align:center;color:var(--color-primary);letter-spacing:-.02em;font-size:18px;font-weight:700}.login-title{text-align:center;margin:0;font-size:22px}.login-subtitle{text-align:center;margin:-8px 0 0}.login-submit{width:100%;margin-top:var(--space-2)}.stat-card{align-items:flex-start;gap:var(--space-3);display:flex}.stat-card-icon{border-radius:var(--radius-md);background:var(--color-primary-soft);width:40px;height:40px;color:var(--color-primary);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.stat-card-body{flex-direction:column;gap:2px;min-width:0;display:flex}.stat-card-label{color:var(--color-text-muted);font-size:13px;font-weight:500}.stat-card-value{color:var(--color-text);font-size:24px;font-weight:700;line-height:1.2}.stat-card-description{color:var(--color-text-muted);font-size:12px}.dashboard-stats{gap:var(--space-4);margin-top:var(--space-5);grid-template-columns:repeat(5,1fr);display:grid}@media (width<=1100px){.dashboard-stats{grid-template-columns:repeat(3,1fr)}}@media (width<=700px){.dashboard-stats{grid-template-columns:repeat(2,1fr)}}.stat-card-skeleton{gap:var(--space-3);align-items:flex-start;display:flex}.stat-card-skeleton-icon{border-radius:var(--radius-md)}.stat-card-skeleton-body{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.dashboard-error{color:var(--color-danger)}.dashboard-charts{gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=900px){.dashboard-charts{grid-template-columns:1fr}}.chart-card h2{margin:0 0 var(--space-3);font-size:16px}.chart-canvas-wrap{height:260px;position:relative}.chart-skeleton{margin-top:var(--space-3)}.dashboard-recent{margin-top:var(--space-8)}