.topbar{background:#102033;color:#d7e2f0;font-size:14px}
.topbar-inner{display:flex;justify-content:space-between;gap:16px;padding:10px 0}
.topbar-right{display:flex;gap:18px;flex-wrap:wrap}
.header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(221,228,238,.85)}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;padding:16px 0}
.logo{display:flex;align-items:center;gap:14px}
.logo-mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;font-weight:900;color:#111827;box-shadow:0 12px 28px rgba(217,164,65,.30)}
.logo strong{display:block;font-size:1rem}
.logo small{display:block;color:var(--muted)}
.nav{display:flex;justify-content:center;gap:20px}
.nav a{position:relative;padding:10px 0;color:var(--muted);font-weight:700}
.nav a.active,.nav a:hover{color:var(--navy)}
.nav a.active::after,.nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);border-radius:10px}
.header-actions{display:flex;gap:12px}
.mobile-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
@media (max-width: 980px){
  .header-inner{grid-template-columns:auto auto auto}
  .mobile-toggle{display:block}
  .nav{display:none;position:absolute;left:16px;right:16px;top:100%;padding:14px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);flex-direction:column}
  .nav.is-open{display:flex}
  .header-actions{display:none}
}
@media (max-width: 640px){
  .topbar-inner{flex-direction:column;align-items:flex-start}
}