*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary: #0077b6;--primary-dark: #023e8a;--secondary: #f4a261;--accent: #e76f51;--bg: #f8f9fa;--surface: #ffffff;--text: #212529;--text-light: #6c757d;--border: #dee2e6;--radius: 8px;--shadow: 0 2px 8px rgba(0, 0, 0, .08)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}#app{min-height:100vh;display:flex;flex-direction:column}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--surface);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.logo{font-size:1.5rem;font-weight:700;color:var(--primary);text-decoration:none}.navbar-menu{display:flex;align-items:center;gap:1rem}.nav-link{color:var(--text);text-decoration:none;font-weight:500;transition:color .2s}.nav-link:hover{color:var(--primary)}.user-role{padding:.2rem .6rem;border-radius:12px;font-size:.7rem;font-weight:600;text-transform:capitalize;background:var(--bg);color:var(--text-light)}.btn{padding:.5rem 1.25rem;border-radius:var(--radius);font-weight:500;text-decoration:none;cursor:pointer;transition:all .2s;border:none;font-size:.9rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}.main-content{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.footer{text-align:center;padding:2rem;background:var(--surface);color:var(--text-light);border-top:1px solid var(--border)}