.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
transition: all .3s cubic-bezier(.4,0,.2,1);
}
.navbar.scrolled {
background: var(--nav-bg, rgba(255,255,255,.94));
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 24px rgba(6,37,156,.1);
border-bottom: 1px solid var(--border, #e2e8f0);
}
[data-theme="dark"] .navbar.scrolled {
background: var(--nav-bg, rgba(6,14,36,.94));
}
.navbar .nav-inner {
max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
display: flex; align-items: center; justify-content: space-between;
height: 72px; gap: 1rem;
}
.navbar .nav-logo {
display: flex; align-items: center; gap: .6rem;
font-family: var(--font-display, 'Google Sans', sans-serif);
font-weight: 800; font-size: 1.05rem; color: var(--text, #0f172a);
transition: transform .2s cubic-bezier(.34,1.56,.64,1);
white-space: nowrap; flex-shrink: 0;
}
.navbar .nav-logo:hover { transform: scale(1.02); }
.navbar .nav-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-item  { position: relative; }
.nav-item .nav-link {
display: flex; align-items: center; gap: .3rem;
padding: .5rem .85rem; border-radius: .75rem;
font-size: .875rem; font-weight: 500;
color: var(--text-muted, #64748b);
transition: all .3s cubic-bezier(.4,0,.2,1);
white-space: nowrap; line-height: 1;
}
.nav-item .nav-link:hover,
.nav-item .nav-link.active  { color: var(--primary, #06259C); background: rgba(6,37,156,.06); }
.nav-item .nav-link.active  { font-weight: 600; }
[data-theme="dark"] .nav-item .nav-link:hover,
[data-theme="dark"] .nav-item .nav-link.active { color: var(--accent, #FF914C); background: rgba(255,145,76,.08); }
.nav-item .nav-link svg.nav-chevron {
width: 14px; height: 14px; flex-shrink: 0;
transition: transform .2s;
}
.nav-item:hover .nav-link svg.nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 220px; background: var(--surface, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 1rem; box-shadow: 0 20px 60px rgba(6,37,156,.18);
padding: 8px .5rem .5rem; opacity: 0; pointer-events: none;
transition: all .2s cubic-bezier(.4,0,.2,1); z-index: 200;
}
.nav-item:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.nav-dropdown a {
display: flex; align-items: center; gap: .75rem;
padding: .6rem .875rem; border-radius: .375rem;
font-size: .85rem; color: var(--text-muted, #64748b);
font-weight: 500; transition: all .15s; background: none;
}
.nav-dropdown a:hover { background: rgba(6,37,156,.07); color: var(--primary, #06259C); }
[data-theme="dark"] .nav-dropdown a:hover { background: rgba(255,145,76,.08); color: var(--accent, #FF914C); }
.dd-icon {
width: 28px; height: 28px; border-radius: 7px;
background: rgba(6,37,156,.07);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
[data-theme="dark"] .dd-icon { background: rgba(255,145,76,.08); }
.nav-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.btn-theme {
width: 38px; height: 38px; border-radius: .75rem;
background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted, #64748b);
transition: all .3s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
}
.btn-theme:hover { background: var(--primary, #06259C); color: white; border-color: var(--primary, #06259C); }
.btn-theme svg { width: 18px; height: 18px; }
.btn-nav-primary {
padding: .55rem 1.25rem; border-radius: .75rem;
background: linear-gradient(135deg, var(--primary, #06259C), var(--primary-light, #1a3db5));
color: white; font-size: .85rem; font-weight: 600;
box-shadow: 0 4px 12px rgba(6,37,156,.3);
transition: all .3s cubic-bezier(.4,0,.2,1); white-space: nowrap;
}
.btn-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(6,37,156,.4); }
.btn-nav-outline {
padding: .55rem 1.1rem; border-radius: .75rem;
border: 1.5px solid var(--border, #e2e8f0);
color: var(--text, #0f172a); font-size: .85rem; font-weight: 500;
transition: all .3s cubic-bezier(.4,0,.2,1); white-space: nowrap;
}
.btn-nav-outline:hover { border-color: var(--primary, #06259C); color: var(--primary, #06259C); background: rgba(6,37,156,.04); }
.nav-hamburger {
display: none; flex-direction: column; gap: 5px;
width: 36px; height: 36px; border-radius: .375rem;
background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
align-items: center; justify-content: center; padding: 8px; flex-shrink: 0;
}
.nav-hamburger span {
display: block; width: 18px; height: 2px;
background: var(--text, #0f172a); border-radius: 2px; transition: all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mobile-menu {
display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
background: var(--bg, #fff); z-index: 999; padding: 1.5rem;
overflow-y: auto; transform: translateX(100%);
transition: transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
.mobile-menu.open { transform: translateX(0); pointer-events: all; }
.mobile-menu > a {
display: block; padding: .875rem 1rem; border-radius: .75rem;
font-size: 1rem; font-weight: 500; color: var(--text, #0f172a);
border-bottom: 1px solid var(--border, #e2e8f0); margin-bottom: .25rem;
}
.mobile-menu > a:hover { color: var(--primary, #06259C); background: rgba(6,37,156,.05); }
[data-theme="dark"] .mobile-menu > a:hover { color: var(--accent, #FF914C); background: rgba(255,145,76,.05); }
.mobile-menu-actions { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.mobile-menu-actions .btn-nav-primary { text-align: center; padding: .875rem; font-size: 1rem; display: block; border-radius: .75rem; }
.mobile-menu-actions .btn-nav-outline  { text-align: center; display: block; }
@media (max-width: 1024px) {
.navbar .nav-links  { display: none; }
.nav-actions .btn-nav-outline,
.nav-actions .btn-nav-primary { display: none; }
.nav-hamburger { display: flex; }
.mobile-menu   { display: block; }
}
@media (max-width: 480px) {
.navbar .nav-inner { padding: 0 1rem; }
}