:root{--color-primary: #6366f1;--color-primary-light: #818cf8;--color-primary-dark: #4f46e5;--color-primary-bg: rgba(99, 102, 241, .1);--color-amazon: #f59e0b;--color-amazon-light: #fbbf24;--color-amazon-bg: rgba(245, 158, 11, .1);--color-blubrain: #06b6d4;--color-blubrain-light: #22d3ee;--color-blubrain-bg: rgba(6, 182, 212, .1);--color-success: #10b981;--color-success-bg: rgba(16, 185, 129, .1);--color-warning: #f59e0b;--color-warning-bg: rgba(245, 158, 11, .1);--color-danger: #ef4444;--color-danger-bg: rgba(239, 68, 68, .1);--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-bg-white: #ffffff;--color-bg-light: #f8fafc;--color-bg-card: #ffffff;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-text-light: #f8fafc;--color-border: #e2e8f0;--color-border-dark: #334155;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--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;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--sidebar-width: 280px;--header-height: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-light);min-height:100vh;min-height:-webkit-fill-available;overscroll-behavior:none}body.modal-open{overflow:hidden;position:fixed;width:100%;height:100%}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:1.3;color:var(--color-text-primary)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}p{color:var(--color-text-secondary)}.app-layout{display:flex;min-height:100vh;max-width:100vw;overflow-x:hidden}.main-content{flex:1;margin-left:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column;max-width:100%;overflow-x:hidden}.page-content{flex:1;padding:var(--space-6);max-width:1400px;width:100%;overflow-x:hidden}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:linear-gradient(180deg,var(--color-bg-primary) 0%,var(--color-bg-secondary) 100%);padding:var(--space-6);display:flex;flex-direction:column;z-index:100;overflow-y:auto}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-border-dark);margin-bottom:var(--space-6)}.sidebar-logo h1{font-size:var(--font-size-xl);color:var(--color-text-light);font-weight:var(--font-weight-bold)}.sidebar-logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:#fff}.sidebar-section{margin-bottom:var(--space-6)}.sidebar-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)}.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)}.sidebar-nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-muted);text-decoration:none;cursor:pointer;transition:all var(--transition-fast);border:none;background:transparent;width:100%;text-align:left;font-size:var(--font-size-sm)}.sidebar-nav-item:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-light)}.sidebar-nav-item.active{background-color:var(--color-primary);color:#fff}.sidebar-nav-item.amazon.active{background-color:var(--color-amazon)}.sidebar-nav-item.blubrain.active{background-color:var(--color-blubrain)}.header{height:var(--header-height);background-color:var(--color-bg-white);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);position:sticky;top:0;z-index:50}.header-title{display:flex;align-items:center;gap:var(--space-3)}.header-title h2{font-size:var(--font-size-xl)}.company-badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.05em}.company-badge.amazon{background-color:var(--color-amazon-bg);color:var(--color-amazon)}.company-badge.blubrain{background-color:var(--color-blubrain-bg);color:var(--color-blubrain)}.header-actions{display:flex;align-items:center;gap:var(--space-3)}.user-menu{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-4);padding-left:var(--space-4);border-left:1px solid var(--color-border)}.user-avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:default}.logout-btn{background-color:transparent;color:var(--color-text-muted);border:1px solid var(--color-border)}.logout-btn:hover{background-color:var(--color-danger-bg);color:var(--color-danger);border-color:var(--color-danger)}.card{background-color:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);overflow:hidden}.card-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.card-header h3{font-size:var(--font-size-base)}.card-body{padding:var(--space-5)}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5);margin-bottom:var(--space-6)}.summary-card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);display:flex;align-items:flex-start;gap:var(--space-4);transition:all var(--transition-fast)}.summary-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.summary-card-icon{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}.summary-card-icon.primary{background-color:var(--color-primary-bg);color:var(--color-primary)}.summary-card-icon.success{background-color:var(--color-success-bg);color:var(--color-success)}.summary-card-icon.warning{background-color:var(--color-warning-bg);color:var(--color-warning)}.summary-card-icon.danger{background-color:var(--color-danger-bg);color:var(--color-danger)}.summary-card-content{flex:1}.summary-card-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-1)}.summary-card-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.summary-card-change{font-size:var(--font-size-xs);margin-top:var(--space-1)}.summary-card-change.positive{color:var(--color-success)}.summary-card-change.negative{color:var(--color-danger)}.category-tabs-wrapper{width:100%;max-width:100%;overflow:hidden}.category-tabs{display:flex;gap:var(--space-2);background-color:var(--color-bg-light);padding:var(--space-2);border-radius:var(--radius-lg);margin-bottom:var(--space-5);flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;max-width:100%}.category-tabs::-webkit-scrollbar{display:none}.category-tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;touch-action:manipulation}.category-tab:hover{background-color:var(--color-bg-white);color:var(--color-text-primary)}.category-tab.active{background-color:var(--color-bg-white);color:var(--color-primary);box-shadow:var(--shadow-sm)}.category-tab-count{background-color:var(--color-bg-light);padding:2px 8px;border-radius:var(--radius-full);font-size:var(--font-size-xs)}.category-tab.active .category-tab-count{background-color:var(--color-primary-bg);color:var(--color-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:none;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-bg-light);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-bg-white);color:var(--color-text-primary);border-color:var(--color-text-muted)}.btn-danger{background-color:var(--color-danger-bg);color:var(--color-danger)}.btn-danger:hover:not(:disabled){background-color:var(--color-danger);color:#fff}.btn-success{background-color:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background-color:#059669}.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--font-size-base)}.btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs)}.btn-icon{padding:var(--space-2);width:36px;height:36px}.form-group{margin-bottom:var(--space-4)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--space-2)}.form-label.required:after{content:" *";color:var(--color-danger)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:16px;color:var(--color-text-primary);background-color:var(--color-bg-white);transition:all var(--transition-fast);-webkit-appearance:none;appearance:none}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg)}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}.form-input.error,.form-select.error{border-color:var(--color-danger)}.form-error{font-size:var(--font-size-xs);color:var(--color-danger);margin-top:var(--space-1)}.form-textarea{min-height:100px;resize:vertical}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.expense-list{display:flex;flex-direction:column}.expense-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);transition:background-color var(--transition-fast)}.expense-item:hover{background-color:var(--color-bg-light)}.expense-item:last-child{border-bottom:none}.expense-checkbox{width:20px;height:20px;accent-color:var(--color-primary)}.expense-info{flex:1;min-width:0}.expense-description{font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin-bottom:var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.expense-meta{display:flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-xs);color:var(--color-text-muted)}.expense-amount{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);white-space:nowrap}.expense-status{padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.expense-status.paid{background-color:var(--color-success-bg);color:var(--color-success)}.expense-status.unpaid{background-color:var(--color-warning-bg);color:var(--color-warning)}.expense-actions{display:flex;gap:var(--space-2);opacity:0;transition:opacity var(--transition-fast)}.expense-item:hover .expense-actions{opacity:1}.filters-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4);background-color:var(--color-bg-light);border-radius:var(--radius-lg);margin-bottom:var(--space-5)}.filter-group{display:flex;align-items:center;gap:var(--space-2)}.filter-input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);min-width:150px}.search-input{padding-left:var(--space-10);min-width:250px}.search-wrapper{position:relative}.search-icon{position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);color:var(--color-text-muted)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4);padding-top:env(safe-area-inset-top,var(--space-4));padding-bottom:env(safe-area-inset-bottom,var(--space-4));animation:fadeIn var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--color-bg-white);border-radius:var(--radius-xl);width:100%;max-width:560px;max-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--space-8));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--space-8));overflow:hidden;display:flex;flex-direction:column;animation:slideUp var(--transition-base)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.modal-header h2{font-size:var(--font-size-lg)}.modal-close{background:none;border:none;cursor:pointer;color:var(--color-text-muted);padding:var(--space-1);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.modal-close:hover{color:var(--color-text-primary);background-color:var(--color-bg-light)}.modal-body{padding:var(--space-6);overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-3);flex-shrink:0}.modal-body-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.confirm-dialog{max-width:400px;text-align:center}.confirm-dialog .modal-body{padding:var(--space-8)}.confirm-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4)}.confirm-icon.danger{background-color:var(--color-danger-bg);color:var(--color-danger)}.confirm-dialog h3{margin-bottom:var(--space-2)}.confirm-dialog p{color:var(--color-text-muted)}.empty-state{text-align:center;padding:var(--space-12) var(--space-6)}.empty-state-icon{width:80px;height:80px;background-color:var(--color-bg-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4);color:var(--color-text-muted)}.empty-state h3{margin-bottom:var(--space-2);color:var(--color-text-primary)}.empty-state p{color:var(--color-text-muted);margin-bottom:var(--space-4)}.category-breakdown{display:grid;gap:var(--space-4)}.category-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}.category-row:last-child{border-bottom:none}.category-name{font-weight:var(--font-weight-medium)}.category-amount{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.progress-bar{height:8px;background-color:var(--color-bg-light);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow)}.progress-fill.primary{background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-light) 100%)}.progress-fill.success{background:linear-gradient(90deg,var(--color-success) 0%,#34d399 100%)}.progress-fill.warning{background:linear-gradient(90deg,var(--color-warning) 0%,var(--color-warning-light) 100%)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.badge-cash{background-color:var(--color-success-bg);color:var(--color-success)}.badge-bank{background-color:var(--color-primary-bg);color:var(--color-primary)}.badge-card{background-color:var(--color-warning-bg);color:var(--color-warning)}.export-panel{background-color:var(--color-bg-light);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6)}.export-options{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-4)}@media(max-width:1024px){:root{--sidebar-width: 240px}.summary-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){:root{--sidebar-width: 0px}.sidebar{transform:translate(-100%);transition:transform var(--transition-base)}.sidebar.open{transform:translate(0);width:280px}.main-content{margin-left:0}.page-content{padding:var(--space-4)}.header{padding:var(--space-3) var(--space-4)}.header-title h2{font-size:var(--font-size-base)}.header-actions{gap:var(--space-2)}.header-actions .btn span{display:none}.header-actions .btn{padding:var(--space-2)}.form-row{grid-template-columns:1fr}.filters-bar{flex-direction:column;gap:var(--space-3)}.filter-input,.search-input{width:100%;min-width:auto}.category-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--space-3);-webkit-overflow-scrolling:touch}.category-tab{flex-shrink:0;white-space:nowrap;padding:var(--space-2) var(--space-3);font-size:var(--font-size-xs)}.summary-cards{grid-template-columns:1fr;gap:var(--space-3)}.summary-card{padding:var(--space-4)}.summary-card-value{font-size:var(--font-size-xl)}.card{border-radius:var(--radius-md)}.card-body{padding:var(--space-4)}.expense-item{flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-4)}.expense-info{width:100%}.expense-amount{width:100%;display:flex;justify-content:space-between;align-items:center}.expense-actions{opacity:1;width:100%;justify-content:flex-end;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--color-border)}.modal-overlay{align-items:flex-end;padding:0;padding-bottom:env(safe-area-inset-bottom,0)}.modal{margin:0;max-height:90vh;max-height:90dvh;width:100%;max-width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;animation:slideUpMobile var(--transition-base)}@keyframes slideUpMobile{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:var(--space-4);position:sticky;top:0;background:var(--color-bg-white);z-index:1}.modal-body{padding:var(--space-4);padding-bottom:var(--space-6)}.modal-footer{padding:var(--space-3) var(--space-4);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0));flex-direction:column-reverse;gap:var(--space-2);position:sticky;bottom:0;background:var(--color-bg-white);border-top:1px solid var(--color-border)}.modal-footer .btn{width:100%;justify-content:center;padding:var(--space-3) var(--space-4)}.expense-table{display:block;overflow-x:auto}.btn-lg{width:100%;justify-content:center}.mobile-menu-btn{display:flex}.user-menu{gap:var(--space-2)}.logout-btn{padding:var(--space-2)}}@media(max-width:480px){.page-content{padding:var(--space-3)}.header{padding:var(--space-2) var(--space-3)}.company-badge{display:none}.summary-card-icon{width:40px;height:40px}.summary-card-value{font-size:var(--font-size-lg)}.category-tab{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}}@media(min-width:769px){.mobile-menu-btn{display:none}}.file-upload{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;cursor:pointer;transition:all var(--transition-fast)}.file-upload:hover{border-color:var(--color-primary);background-color:var(--color-primary-bg)}.file-upload-icon{color:var(--color-text-muted);margin-bottom:var(--space-2)}.file-upload p{font-size:var(--font-size-sm);color:var(--color-text-muted)}.file-upload input{display:none}.file-preview{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background-color:var(--color-bg-light);border-radius:var(--radius-md);margin-top:var(--space-2)}.file-preview-name{flex:1;font-size:var(--font-size-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-light)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.loading{display:flex;align-items:center;justify-content:center;padding:var(--space-8)}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-danger{color:var(--color-danger)}.font-bold{font-weight:var(--font-weight-bold)}.mt-4{margin-top:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);gap:var(--space-4)}.loading-container p{color:var(--color-text-muted);font-size:var(--font-size-sm)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.spinning{animation:spin 1s linear infinite}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#0d0d1f)}.login-background{position:absolute;inset:0;overflow:hidden;z-index:0}.gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;animation:float 20s ease-in-out infinite}.orb-1{width:400px;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);top:-100px;left:-100px;animation-delay:0s}.orb-2{width:350px;height:350px;background:linear-gradient(135deg,#f093fb,#f5576c);bottom:-80px;right:-80px;animation-delay:-7s}.orb-3{width:300px;height:300px;background:linear-gradient(135deg,#4facfe,#00f2fe);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}@keyframes float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.1)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(20px,10px) scale(1.05)}}.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:#ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.1);padding:3rem;box-shadow:0 25px 50px -12px #00000080,inset 0 1px #ffffff1a;animation:cardAppear .6s ease-out}@keyframes cardAppear{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-header{text-align:center;margin-bottom:2.5rem}.login-logo{width:70px;height:70px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -10px #667eea80}.login-logo svg{width:36px;height:36px;color:#fff}.login-header h1{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:.5rem;letter-spacing:-.02em}.login-header p{font-size:.95rem;color:#fff9}.login-form{display:flex;flex-direction:column;gap:1.5rem}.login-form .form-group{display:flex;flex-direction:column;gap:.5rem}.login-form .form-group label{font-size:.875rem;font-weight:500;color:#fffc;padding-left:.25rem}.input-wrapper{position:relative}.input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#fff6;pointer-events:none;transition:color .2s ease}.input-wrapper input{width:100%;padding:.875rem 1rem .875rem 3rem;font-size:1rem;font-family:inherit;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:none;transition:all .2s ease}.input-wrapper input::placeholder{color:#ffffff59}.input-wrapper input:focus{background:#ffffff14;border-color:#667eea99;box-shadow:0 0 0 3px #667eea26}.input-wrapper:focus-within .input-icon{color:#667eeacc}.login-button{width:100%;padding:1rem;font-size:1rem;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s ease;margin-top:.5rem}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px -10px #667eea99}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.7;cursor:not-allowed}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-error{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:#fca5a5;font-size:.9rem;animation:shake .4s ease-in-out}.login-error svg{width:20px;height:20px;flex-shrink:0;color:#f87171}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.login-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);text-align:center}.login-footer p{font-size:.8rem;color:#fff6}@media(max-width:480px){.login-container{padding:1rem}.login-card{padding:2rem;border-radius:20px}.login-logo{width:60px;height:60px}.login-header h1{font-size:1.5rem}}