:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #212529;--text-secondary: #6c757d;--text-muted: #adb5bd;--border-color: #dee2e6;--primary: #0066cc;--primary-hover: #0052a3;--primary-light: #e6f0ff;--success: #28a745;--danger: #dc3545;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--radius: 8px;--radius-lg: 12px;--transition: .2s ease}[data-theme=dark]{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--text-primary: #e9ecef;--text-secondary: #adb5bd;--text-muted: #6c757d;--border-color: #2d3748;--primary: #4da6ff;--primary-hover: #3399ff;--primary-light: #1a365d;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background-color var(--transition),color var(--transition)}a{color:var(--primary);text-decoration:none;transition:color var(--transition)}a:hover{color:var(--primary-hover)}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:2rem 1rem}.page{max-width:1200px;margin:0 auto}.navbar{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:1rem;position:sticky;top:0;z-index:100}.navbar-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.navbar-brand{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.navbar-links{display:flex;align-items:center;gap:1rem}.nav-link{color:var(--text-secondary);padding:.5rem}.nav-link:hover{color:var(--primary)}.nav-user{color:var(--text-secondary);font-size:.875rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;border-radius:var(--radius);border:none;cursor:pointer;transition:all var(--transition);text-decoration:none}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover);color:#fff}.btn-outline{background-color:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.btn-outline:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-lg{padding:.875rem 1.75rem;font-size:1rem}.theme-toggle{background:transparent;border:none;cursor:pointer;padding:.5rem;border-radius:var(--radius);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.theme-toggle:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.hero{text-align:center;padding:4rem 1rem}.hero h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem}.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;padding:2rem 0}.feature-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem;text-align:center;transition:transform var(--transition),box-shadow var(--transition)}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;background-color:var(--primary-light);color:var(--primary);border-radius:50%;margin-bottom:1rem}.feature-card h3{font-size:1.25rem;margin-bottom:.5rem}.feature-card p{color:var(--text-secondary);font-size:.875rem}.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 200px)}.auth-container{width:100%;max-width:400px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2rem}.auth-container h1{font-size:1.5rem;text-align:center;margin-bottom:.5rem}.auth-subtitle{text-align:center;color:var(--text-secondary);margin-bottom:2rem}.auth-footer{text-align:center;margin-top:1.5rem;color:var(--text-secondary);font-size:.875rem}.dashboard-page{padding:1rem 0}.dashboard-header{margin-bottom:2rem}.dashboard-header h1{font-size:1.75rem;margin-bottom:.25rem}.dashboard-header p{color:var(--text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem;display:flex;align-items:center;gap:1rem}.stat-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background-color:var(--primary-light);color:var(--primary);border-radius:var(--radius);flex-shrink:0}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:1.5rem;font-weight:700;line-height:1.2}.stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.chart-section{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1.5rem}.chart-section h2{font-size:1rem;margin-bottom:1.5rem;color:var(--text-secondary)}.bar-chart{display:flex;justify-content:space-around;align-items:flex-end;height:200px;gap:.5rem}.bar-item{display:flex;flex-direction:column;align-items:center;flex:1;max-width:60px}.bar-container{width:100%;height:160px;display:flex;align-items:flex-end;justify-content:center}.bar{width:100%;max-width:40px;background:linear-gradient(180deg,var(--primary) 0%,var(--primary-hover) 100%);border-radius:4px 4px 0 0;position:relative;transition:height .3s ease;min-height:20px}.bar-value{position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:.75rem;font-weight:600;color:var(--text-primary)}.bar-label{margin-top:.5rem;font-size:.75rem;color:var(--text-secondary)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.navbar-container{flex-wrap:wrap;gap:1rem}.navbar-links{width:100%;justify-content:center;flex-wrap:wrap}.hero h1{font-size:2rem}.hero-subtitle{font-size:1rem}.stats-grid{grid-template-columns:1fr}.bar-chart{height:150px}.bar-container{height:120px}}