:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#333;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#333}#root{width:100%;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}.card{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:24px;margin-bottom:20px;color:#333}.btn{background:#667eea;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s ease}.btn:hover{background:#5a6fd8;transform:translateY(-1px)}.btn-secondary{background:#6c757d}.btn-secondary:hover{background:#5a6268}.btn-danger{background:#dc3545}.btn-danger:hover{background:#c82333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;color:#333;background:#fff}.form-control:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.table{width:100%;border-collapse:collapse;margin-top:16px;color:#333}.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid #ddd;color:#333}.table th{background:#f8f9fa;font-weight:600;color:#333}.table tr:hover{background:#f8f9fa}.actions{display:flex;gap:12px;margin-bottom:20px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;color:#333}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{font-size:20px;font-weight:600;color:#333}.close{background:none;border:none;font-size:24px;cursor:pointer;color:#666}.close:hover{color:#333}.status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.status-paid{background:#d4edda;color:#155724}.status-sent{background:#fff3cd;color:#856404}.status-overdue{background:#f8d7da;color:#721c24}.status-draft{background:#e2e3e5;color:#383d41}@media (max-width: 768px){.container,.card{padding:16px}.navbar-content{flex-direction:column;gap:16px;padding:0 16px}.navbar-menu{flex-direction:column;gap:16px;width:100%}.nav-section{width:100%}.nav-section-header{font-size:10px;padding:3px 6px;margin-bottom:6px}.nav-section-links{flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:center}.nav-link{font-size:13px;padding:6px 10px;min-width:80px;justify-content:center}.navbar-actions{width:100%;justify-content:center}.btn-logout{padding:8px 14px;font-size:13px}.navbar-nav{gap:16px}.actions{flex-direction:column}.table{font-size:14px}.table th,.table td{padding:8px}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive table{min-width:800px}.table td:last-child .btn{padding:4px;font-size:10px}.table td:last-child .btn svg{width:10px;height:10px}}@media (min-width: 769px) and (max-width: 1024px){.navbar-menu{gap:24px}.nav-section-header{font-size:10px;padding:3px 6px}.nav-link{font-size:13px;padding:6px 10px}}.modern-navbar{background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;position:sticky;top:0;z-index:1000;padding:0}.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px}.nav-brand{flex-shrink:0}.brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1a1a1a;font-weight:700;font-size:20px;letter-spacing:-.025em;transition:all .3s ease}.brand-link:hover{transform:translateY(-1px);color:#667eea}.brand-logo{height:36px;width:auto;object-fit:contain;border-radius:8px}.brand-icon{color:#667eea;filter:drop-shadow(0 2px 4px rgba(102,126,234,.3))}.brand-text{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 1px 2px rgba(0,0,0,.05)}.nav-menu{display:flex;align-items:center;gap:12px;flex:1;justify-content:center;margin:0 40px}.nav-item{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:12px;text-decoration:none;color:#374151;font-weight:600;font-size:15px;letter-spacing:.025em;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;background:transparent;border:1px solid transparent;min-width:52px;height:52px}.nav-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea1a,#764ba21a);opacity:0;transition:opacity .3s ease;border-radius:12px}.nav-item:hover{color:#1f2937;transform:translateY(-2px);box-shadow:0 8px 25px #667eea26;border-color:#667eea33}.nav-item:hover:before{opacity:1}.nav-item.active{color:#1f2937;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea4d;box-shadow:0 4px 20px #667eea33;font-weight:700}.nav-item.active:before{opacity:1}.nav-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#667eea1a;transition:all .3s ease;flex-shrink:0;box-shadow:0 2px 4px #0000000d}.nav-item:hover .nav-icon{background:#667eea33;transform:scale(1.1);box-shadow:0 4px 12px #667eea33}.nav-item.active .nav-icon{background:#667eea40;box-shadow:0 4px 16px #667eea4d}.nav-label{font-weight:inherit;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.05)}.nav-dropdown{position:relative}.nav-dropdown-trigger{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:12px;background:transparent;border:1px solid transparent;color:#374151;font-weight:600;font-size:15px;letter-spacing:.025em;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;min-width:60px;height:60px}.nav-dropdown-trigger:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea1a,#764ba21a);opacity:0;transition:opacity .3s ease;border-radius:12px}.nav-dropdown-trigger:hover{color:#1f2937;transform:translateY(-2px);box-shadow:0 8px 25px #667eea26;border-color:#667eea33}.nav-dropdown-trigger:hover:before{opacity:1}.nav-dropdown-trigger.active{color:#1f2937;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea4d;box-shadow:0 4px 20px #667eea33;font-weight:700}.nav-dropdown-trigger.active:before{opacity:1}.nav-dropdown-trigger:hover .nav-icon{background:#667eea33;transform:scale(1.1);box-shadow:0 4px 12px #667eea33}.nav-dropdown-trigger.active .nav-icon{background:#667eea40;box-shadow:0 4px 16px #667eea4d}.dropdown-arrow{transition:transform .3s ease;color:#6b7280;font-weight:600;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.dropdown-arrow.rotated{transform:translateY(-50%) rotate(180deg);color:#667eea}.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:200px;background:#fffffffa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 20px 40px #00000026;padding:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1001;margin-top:8px}.nav-dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#374151;text-decoration:none;border-radius:8px;font-weight:600;font-size:14px;letter-spacing:.025em;transition:all .2s ease;position:relative;overflow:hidden}.dropdown-item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#667eea1a,#764ba21a);opacity:0;transition:opacity .2s ease;border-radius:8px}.dropdown-item:hover{color:#1f2937;transform:translate(4px);font-weight:700}.dropdown-item:hover:before{opacity:1}.mobile-menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:#667eea1a;border:1px solid rgba(102,126,234,.2);border-radius:10px;color:#667eea;cursor:pointer;transition:all .3s ease}.mobile-menu-btn:hover{background:#667eea33;transform:translateY(-1px);box-shadow:0 4px 15px #667eea33}.mobile-nav{position:fixed;top:70px;left:0;right:0;background:#fffffffa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;transform:translateY(-100%);opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:999}.mobile-nav.show{transform:translateY(0);opacity:1;visibility:visible}.mobile-nav-content{max-width:1400px;margin:0 auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}.mobile-nav-item{display:flex;align-items:center;gap:16px;padding:16px 20px;color:#374151;text-decoration:none;border-radius:12px;font-weight:600;font-size:16px;letter-spacing:.025em;transition:all .3s ease;background:transparent;border:1px solid transparent}.mobile-nav-item:hover{color:#1f2937;background:#667eea1a;border-color:#667eea33;transform:translate(8px);font-weight:700}.mobile-nav-item.active{color:#1f2937;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea4d;font-weight:700}.mobile-nav-section{display:flex;flex-direction:column;gap:8px}.mobile-nav-section-title{display:flex;align-items:center;gap:8px;padding:8px 20px;font-size:13px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:1.2px;text-shadow:0 1px 2px rgba(0,0,0,.05)}.nav-actions{flex-shrink:0}.logout-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.025em;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #ef44444d;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.1)}.logout-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.logout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #ef444466;background:linear-gradient(135deg,#dc2626,#b91c1c)}.logout-btn:hover:before{left:100%}.logout-btn:active{transform:translateY(0)}@media (max-width: 1024px){.nav-menu{gap:12px;margin:0 20px}.nav-item,.nav-dropdown-trigger{padding:10px 12px;font-size:13px}.nav-icon{width:28px;height:28px}.nav-dropdown-menu{min-width:180px}}@media (max-width: 768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.nav-container{padding:0 16px}.nav-actions{margin-left:auto}.logout-btn{padding:8px 12px;font-size:13px}}@media (min-width: 769px){.mobile-only{display:none!important}.desktop-only{display:flex!important}}.navbar{background:#fff;padding:16px 0;box-shadow:0 2px 4px #0000001a;margin-bottom:32px}.navbar-content{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.navbar-brand{font-size:24px;font-weight:700;color:#667eea;text-decoration:none;display:flex;align-items:center}.navbar-menu{display:flex;align-items:center;gap:32px}.nav-section{display:flex;flex-direction:column;align-items:center}.nav-section-header{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding:4px 8px;background:#f3f4f6;border-radius:6px}.nav-section-links{display:flex;flex-direction:column;gap:4px}.nav-link{display:flex;align-items:center;gap:8px;color:#374151;text-decoration:none;font-weight:500;font-size:14px;padding:8px 12px;border-radius:8px;transition:all .2s ease;white-space:nowrap}.nav-link:hover{color:#667eea;background:#f8fafc;transform:translateY(-1px)}.nav-link.active{color:#667eea;background:#eff6ff;font-weight:600}.nav-link svg{flex-shrink:0}.navbar-actions{display:flex;align-items:center}.btn-logout{background:#e53e3e;border:none;color:#fff;cursor:pointer;padding:10px 16px;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.btn-logout:hover{background:#c53030;transform:translateY(-1px);box-shadow:0 4px 8px #0003}.navbar-nav{display:flex;list-style:none;gap:24px}.navbar-nav a{color:#333;text-decoration:none;font-weight:500;transition:color .2s ease}.navbar-nav a:hover,.navbar-nav a.active{color:#667eea}