*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #2563eb;--primary-dark: #1d4ed8;--secondary: #10b981;--danger: #ef4444;--warning: #f59e0b;--background: #f1f5f9;--card: #ffffff;--text: #1e293b;--text-muted: #64748b;--border: #e2e8f0;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1)}html{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--background);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}.app{display:flex;min-height:100vh;overflow-x:hidden}.sidebar{width:250px;min-width:250px;background:linear-gradient(180deg,#1e293b,#0f172a);color:#fff;padding:20px 0;position:fixed;height:100vh;display:flex;flex-direction:column;will-change:transform}.sidebar-header{padding:0 20px 30px;border-bottom:1px solid rgba(255,255,255,.1);position:relative}.sidebar-header h1{font-size:1.25rem;font-weight:600;color:#f8fafc;animation:fadeInUp .4s var(--ease-out) both}.sidebar-header p{font-size:.75rem;color:#94a3b8;margin-top:4px;animation:fadeInUp .4s var(--ease-out) .1s both}.sidebar-close{display:none;position:absolute;top:0;right:0;background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s var(--ease-smooth)}.sidebar-close:hover{background:#ffffff1a}.nav-menu{list-style:none;padding:20px 0;flex:1}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#94a3b8;cursor:pointer;transition:all .2s var(--ease-smooth);position:relative;will-change:transform}.nav-item:hover{background:#ffffff0d;color:#fff;transform:translate(4px)}.nav-item.active{background:#2563eb33;color:#60a5fa;border-left:3px solid #60a5fa}.nav-icon{width:20px;height:20px;flex-shrink:0;transition:transform .2s var(--ease-spring)}.nav-item:hover .nav-icon{transform:scale(1.1)}.sidebar-overlay{display:none}.main-content{flex:1;margin-left:250px;padding:30px;min-width:0;animation:fadeIn .3s var(--ease-out) both}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:12px;animation:fadeInUp .4s var(--ease-out) both}.header-left{display:flex;align-items:center;gap:12px}.header h2{font-size:1.75rem;font-weight:600;color:var(--text);white-space:nowrap}.header-actions{display:flex;gap:12px}.menu-toggle{display:none;background:none;border:1px solid var(--border);padding:10px;cursor:pointer;color:var(--text);border-radius:8px;align-items:center;justify-content:center;transition:all .2s var(--ease-smooth)}.menu-toggle:hover{background:#f1f5f9}.menu-toggle:active{transform:scale(.95)}.btn-text-mobile{display:none}.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s var(--ease-smooth);white-space:nowrap;position:relative;overflow:hidden;will-change:transform}.btn:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:scale(0);opacity:0;transition:transform .3s,opacity .3s}.btn:active:after{transform:scale(2);opacity:1;transition:0s}.btn:active{transform:scale(.97)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}.btn-secondary{background:#fff;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#f8fafc;transform:translateY(-1px)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}.filters{display:flex;gap:16px;margin-bottom:30px;flex-wrap:wrap;align-items:flex-end;animation:fadeInUp .4s var(--ease-out) .1s both}.filter-group{display:flex;flex-direction:column;gap:6px;min-width:160px}.filter-group label{font-size:.75rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.filter-input{padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:.875rem;background:#fff;min-width:160px;transition:all .2s var(--ease-smooth)}.filter-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a;transform:translateY(-1px)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}.stat-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000d;transition:all .3s var(--ease-smooth);animation:fadeInUp .5s var(--ease-out) both;will-change:transform,box-shadow}.stat-card:nth-child(1){animation-delay:.1s}.stat-card:nth-child(2){animation-delay:.15s}.stat-card:nth-child(3){animation-delay:.2s}.stat-card:nth-child(4){animation-delay:.25s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a}.stat-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.stat-title{font-size:.875rem;color:var(--text-muted);font-weight:500}.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s var(--ease-spring)}.stat-card:hover .stat-icon{transform:scale(1.1) rotate(5deg)}.stat-icon.revenue{background:#10b9811a;color:var(--secondary)}.stat-icon.expense{background:#ef44441a;color:var(--danger)}.stat-icon.profit{background:#2563eb1a;color:var(--primary)}.stat-icon.clients{background:#f59e0b1a;color:var(--warning)}.stat-value{font-size:2rem;font-weight:700;color:var(--text);margin-bottom:8px}.stat-change{font-size:.75rem;display:flex;align-items:center;gap:4px}.stat-change.positive{color:var(--secondary)}.stat-change.negative{color:var(--danger)}.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:30px}.chart-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000d;min-width:0;animation:fadeInUp .5s var(--ease-out) .3s both;transition:transform .3s var(--ease-smooth)}.chart-card:hover{transform:translateY(-2px)}.chart-title{font-size:1rem;font-weight:600;margin-bottom:20px;color:var(--text)}.table-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000d;margin-bottom:30px;overflow-x:auto;animation:fadeInUp .5s var(--ease-out) .4s both}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.table-title{font-size:1rem;font-weight:600;color:var(--text)}table{width:100%;border-collapse:collapse;min-width:480px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--border)}th{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:#f8fafc;white-space:nowrap}td{font-size:.875rem;color:var(--text)}tbody tr{transition:all .2s var(--ease-smooth)}tbody tr:hover{background:#f8fafc;transform:scale(1.01)}tfoot td{border-top:2px solid var(--border);background:#f8fafc;font-weight:600}.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:500;white-space:nowrap;transition:transform .2s var(--ease-spring)}.badge:hover{transform:scale(1.05)}.badge-success{background:#10b9811a;color:var(--secondary)}.badge-warning{background:#f59e0b1a;color:var(--warning)}.badge-danger{background:#ef44441a;color:var(--danger)}.service-badge{display:inline-block;padding:4px 10px;background:linear-gradient(135deg,#e0f2fe,#bae6fd);color:#0369a1;border-radius:6px;font-size:.75rem;font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .2s var(--ease-spring)}.service-badge:hover{transform:scale(1.05)}.action-buttons{display:flex;gap:8px}.btn-icon{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-smooth);will-change:transform}.btn-icon:active{transform:scale(.9)}.btn-icon.edit{background:#2563eb1a;color:var(--primary)}.btn-icon.edit:hover{background:var(--primary);color:#fff;transform:rotate(15deg)}.btn-icon.delete{background:#ef44441a;color:var(--danger)}.btn-icon.delete:hover{background:var(--danger);color:#fff;transform:rotate(15deg)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:12px;animation:fadeInUp .4s var(--ease-out) both}.section-header h3{font-size:1.25rem;font-weight:600;color:var(--text)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);animation:fadeInUp .5s var(--ease-out) both}.empty-state svg{width:64px;height:64px;margin-bottom:16px;opacity:.5;animation:bounceIn .6s var(--ease-spring) both}.empty-state h3{font-size:1.125rem;margin-bottom:8px;color:var(--text)}.quick-actions{background:#fff;border-radius:12px;padding:20px;margin-bottom:24px;box-shadow:0 1px 3px #0000000d;animation:fadeInUp .4s var(--ease-out) .05s both}.quick-actions-title{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:16px}.quick-actions-title svg{color:var(--warning);animation:pulse 2s ease-in-out infinite}.quick-actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border:none;border-radius:10px;background:var(--action-color);color:#fff;cursor:pointer;transition:all .3s var(--ease-smooth);font-size:.75rem;font-weight:500;position:relative;overflow:hidden;will-change:transform}.quick-action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity .3s}.quick-action-btn:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 24px -8px var(--action-color)}.quick-action-btn:hover:before{opacity:1}.quick-action-btn:active{transform:translateY(-2px) scale(.98)}.quick-action-btn svg{transition:transform .3s var(--ease-spring)}.quick-action-btn:hover svg{transform:scale(1.2) rotate(-5deg)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;animation:fadeIn .2s var(--ease-out) both;backdrop-filter:blur(4px)}.modal{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #00000040;animation:fadeInScale .3s var(--ease-spring) both;will-change:transform}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}.modal-header h3{font-size:1.125rem;font-weight:600;color:var(--text)}.modal-close{width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s var(--ease-smooth)}.modal-close:hover{background:#f1f5f9;color:var(--text);transform:rotate(90deg)}.modal-form{padding:24px;display:flex;flex-direction:column;gap:20px}.modal-form .input-group{display:flex;flex-direction:column;gap:8px;animation:fadeInUp .3s var(--ease-out) both}.modal-form .input-group:nth-child(1){animation-delay:.05s}.modal-form .input-group:nth-child(2){animation-delay:.1s}.modal-form .input-group:nth-child(3){animation-delay:.15s}.modal-form .input-group:nth-child(4){animation-delay:.2s}.modal-form .input-group:nth-child(5){animation-delay:.25s}.modal-form .input-group label{font-size:.875rem;font-weight:500;color:var(--text)}.modal-form .input-group input,.modal-form .input-group select{padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-size:.9375rem;transition:all .2s var(--ease-smooth);width:100%}.modal-form .input-group input:focus,.modal-form .input-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a;transform:translateY(-2px)}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;animation:fadeInUp .3s var(--ease-out) .3s both}.modal-actions .btn{padding:12px 24px}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e293b,#0f172a);padding:20px}.login-card{background:#fff;border-radius:16px;padding:40px;width:100%;max-width:400px;box-shadow:0 25px 50px -12px #00000040;animation:fadeInScale .5s var(--ease-spring) both}.login-header{text-align:center;margin-bottom:32px}.login-logo{width:64px;height:64px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;animation:bounceIn .6s var(--ease-spring) .2s both}.login-header h1{font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:4px;animation:fadeInUp .4s var(--ease-out) .3s both}.login-header p{font-size:.875rem;color:var(--text-muted);animation:fadeInUp .4s var(--ease-out) .4s both}.login-form{display:flex;flex-direction:column;gap:20px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-size:.875rem;font-weight:500;color:var(--text)}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:14px;color:var(--text-muted);transition:color .2s var(--ease-smooth)}.input-wrapper input:focus~.input-icon,.input-wrapper input:focus+.input-icon{color:var(--primary)}.input-wrapper input{width:100%;padding:14px 14px 14px 44px;border:1px solid var(--border);border-radius:10px;font-size:.9375rem;transition:all .2s var(--ease-smooth)}.input-wrapper input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a;transform:translateY(-2px)}.toggle-password{position:absolute;right:14px;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-smooth)}.toggle-password:hover{color:var(--text);transform:scale(1.1)}.error-message{background:#ef44441a;color:var(--danger);padding:12px 16px;border-radius:8px;font-size:.875rem;text-align:center;animation:fadeInUp .3s var(--ease-spring) both}.login-button{width:100%;padding:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s var(--ease-smooth);margin-top:8px;position:relative;overflow:hidden}.login-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity .3s}.login-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px #2563eb80}.login-button:hover:before{opacity:1}.login-button:active{transform:translateY(0);box-shadow:0 5px 10px -5px #2563eb4d}.login-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);text-align:center}.login-footer p{font-size:.75rem;color:var(--text-muted);margin-bottom:12px}.credentials{display:flex;flex-direction:column;gap:8px}.credentials span{font-size:.75rem;color:var(--text-muted);background:#f8fafc;padding:8px 12px;border-radius:6px;transition:all .2s var(--ease-smooth)}.credentials span:hover{background:#f1f5f9;transform:translate(4px)}.credentials strong{color:var(--text)}.user-info{display:flex;align-items:center;gap:12px}.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;flex-shrink:0;overflow:hidden}.user-avatar.clickable{cursor:pointer;transition:all .3s var(--ease-smooth)}.user-avatar.clickable:hover{opacity:.9;transform:scale(1.1);box-shadow:0 4px 12px #2563eb66}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.user-details{display:flex;flex-direction:column;min-width:0}.user-name{font-weight:600;font-size:.875rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:.75rem;color:var(--text-muted)}.profile-modal{max-width:400px}.profile-modal-content{padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px}.profile-preview{width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#2563eb,#1d4ed8);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -8px #2563eb66;transition:transform .3s var(--ease-spring)}.profile-preview:hover{transform:scale(1.05)}.profile-preview-img{width:100%;height:100%;object-fit:cover}.profile-preview-placeholder{font-size:3rem;font-weight:700;color:#fff}.profile-actions{display:flex;gap:12px;width:100%}.profile-actions .btn{padding:12px 20px;flex:1;justify-content:center}.profile-hint{font-size:.75rem;color:var(--text-muted);text-align:center}tfoot td{border-top:2px solid var(--border);background:#f8fafc}@media (max-width: 768px){.sidebar{position:fixed;left:-280px;width:280px;min-width:280px;transition:left .35s cubic-bezier(.4,0,.2,1);z-index:1500;height:100vh;will-change:transform}.sidebar.open{left:0}.sidebar-close{display:flex}.sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:1400;opacity:0;transition:opacity .35s var(--ease-smooth)}.sidebar-overlay.open{display:block;opacity:1}.main-content{margin-left:0;padding:16px;width:100%}.menu-toggle{display:flex}.header{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}.header-left{justify-content:space-between}.header h2{font-size:1.35rem;flex:1}.header-actions{width:100%}.header-actions .btn{width:100%;justify-content:center}.btn-text-desktop{display:none}.btn-text-mobile{display:inline}.filters{flex-direction:column;gap:12px;margin-bottom:20px}.filter-group,.filter-input{width:100%;min-width:0}.stats-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.stat-card{padding:16px;animation:fadeInUp .4s var(--ease-out) both}.stat-card:nth-child(1){animation-delay:.05s}.stat-card:nth-child(2){animation-delay:.1s}.stat-card:nth-child(3){animation-delay:.15s}.stat-card:nth-child(4){animation-delay:.2s}.stat-value{font-size:1.25rem}.stat-title{font-size:.75rem}.stat-icon{width:32px;height:32px}.stat-icon svg{width:16px;height:16px}.stat-change{font-size:.65rem}.charts-grid{grid-template-columns:1fr;gap:16px;margin-bottom:20px}.chart-card{padding:16px}.chart-card h3{font-size:.875rem;margin-bottom:12px}.quick-actions{padding:16px;margin-bottom:16px}.quick-actions-grid{grid-template-columns:repeat(2,1fr);gap:10px}.quick-action-btn{padding:14px 8px;font-size:.7rem}.quick-action-btn svg{width:18px;height:18px}.table-section{padding:16px;margin-bottom:16px}.table-header{flex-direction:column;align-items:flex-start;gap:8px}.section-header{flex-direction:column;align-items:stretch;gap:12px}.section-header .btn{width:100%;justify-content:center}.btn-icon{width:28px;height:28px}.btn-icon svg{width:14px;height:14px}.service-badge{max-width:100px;font-size:.65rem}.modal-overlay{padding:0;align-items:flex-end}.modal{max-height:90vh;border-radius:16px 16px 0 0;animation:slideInUp .35s var(--ease-out) both}.modal-header{padding:16px 20px}.modal-form{padding:16px 20px 24px;gap:16px}.modal-actions{flex-direction:column-reverse;gap:10px}.modal-actions .btn{width:100%;justify-content:center;padding:14px}.profile-actions{flex-direction:column}.profile-actions .btn{width:100%}.login-card{padding:24px;margin:0 8px}.login-logo{width:56px;height:56px}.credentials span{font-size:.7rem;padding:6px 10px}}@media (max-width: 380px){.stats-grid{grid-template-columns:1fr}.quick-actions-grid{grid-template-columns:1fr 1fr}.login-card{padding:20px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}