:root{--primary-color: #667eea;--primary-dark: #764ba2;--secondary-color: #4caf50;--background-color: #f5f5f5;--surface-color: #ffffff;--text-primary: #333333;--text-secondary: #666666;--border-color: #e0e0e0;--error-color: #cc3333;--error-bg: #ffeeee;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .15);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;color:var(--text-primary);background-color:var(--background-color)}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:600;color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--background-color)}::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#999}*:focus{outline:2px solid var(--primary-color);outline-offset:2px}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-color);outline-offset:-2px}@keyframes spin{to{transform:rotate(360deg)}}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--text-secondary)}.text-center{text-align:center}.mt-1{margin-top:var(--spacing-sm)}.mt-2{margin-top:var(--spacing-md)}.mt-3{margin-top:var(--spacing-lg)}.mt-4{margin-top:var(--spacing-xl)}.mb-1{margin-bottom:var(--spacing-sm)}.mb-2{margin-bottom:var(--spacing-md)}.mb-3{margin-bottom:var(--spacing-lg)}.mb-4{margin-bottom:var(--spacing-xl)}.p-1{padding:var(--spacing-sm)}.p-2{padding:var(--spacing-md)}.p-3{padding:var(--spacing-lg)}.p-4{padding:var(--spacing-xl)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f9fa}#app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:linear-gradient(135deg,#667eea,#764ba2);position:sticky;top:0;z-index:100;box-shadow:0 4px 20px #667eea4d}.navbar-content{max-width:1600px;margin:0 auto;padding:0 30px;height:70px;display:flex;justify-content:space-between;align-items:center}.navbar-brand{display:flex;align-items:center;gap:14px;cursor:pointer;transition:opacity .2s}.navbar-brand:hover{opacity:.9}.brand-logo{background:#fff3;padding:10px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.brand-text{display:flex;flex-direction:column}.brand-name{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.5px}.brand-tagline{color:#fffc;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.navbar-center{display:flex;align-items:center;gap:8px}.nav-link{display:flex;align-items:center;gap:8px;color:#ffffffd9;text-decoration:none;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:500;transition:all .2s ease}.nav-link:hover{background:#ffffff26;color:#fff}.nav-link.active{background:#fff3;color:#fff}.navbar-actions{display:flex;align-items:center;gap:20px}.user-section{display:flex;align-items:center;gap:12px}.user-avatar{width:42px;height:42px;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.user-details{display:flex;flex-direction:column}.user-name{color:#fff;font-size:14px;font-weight:600}.user-role{color:#ffffffb3;font-size:12px;text-transform:capitalize}.divider{width:1px;height:30px;background:#fff3}.btn-logout{display:flex;align-items:center;gap:8px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 18px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-logout:hover{background:#ffffff40;border-color:#ffffff4d}.main-content{flex:1}.main-content.with-navbar{padding-top:0}@media (max-width: 1024px){.navbar-center,.brand-tagline{display:none}}@media (max-width: 768px){.navbar-content{padding:0 16px;height:60px}.user-details,.divider,.btn-logout span{display:none}.btn-logout{padding:10px}}