.topbar {
  height:72px;
  display:flex;
  align-items:center;
  gap:0;
  padding:0 36px;
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line, #e3e9f2);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
}
.topbar .brand { display:flex; align-items:center; gap:11px; color:var(--ink, #17253d); font-size:20px; font-weight:800; letter-spacing:0; text-decoration:none; }
.topbar .brand-mark { width:35px; height:35px; flex:0 0 35px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:var(--blue, #2d6cdf); color:#fff; box-shadow:0 6px 15px rgba(45,108,223,.25); }
.topbar .brand small { display:block; margin-top:1px; color:var(--muted, #6d7a90); font-size:11px; font-weight:500; letter-spacing:0; }
.topbar .site-nav { display:flex; align-items:center; gap:4px; margin-left:28px; }
.topbar .site-nav-link { padding:8px 11px; border-radius:7px; color:var(--muted, #6d7a90); font-size:13px; text-decoration:none; white-space:nowrap; }
.topbar .site-nav-link:hover,
.topbar .site-nav-link.active { color:var(--blue, #2d6cdf); background:var(--blue-soft, #eaf1ff); }
.topbar .site-nav-link.active { font-weight:600; }
.topbar .site-nav-group { position:relative; display:flex; align-items:center; }
.topbar .site-nav-group.active > .site-nav-category { color:var(--blue, #2d6cdf); background:var(--blue-soft, #eaf1ff); font-weight:600; }
.topbar .site-nav-category { display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border:0; border-radius:7px; background:transparent; color:var(--muted, #6d7a90); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.topbar .site-nav-category span { font-size:12px; transition:transform .16s ease; }
.topbar .site-nav-group:hover > .site-nav-category,
.topbar .site-nav-group.is-open > .site-nav-category { color:var(--blue, #2d6cdf); background:var(--blue-soft, #eaf1ff); }
.topbar .site-nav-group.is-open > .site-nav-category span { transform:rotate(180deg); }
.topbar .site-nav-menu { position:absolute; z-index:30; top:calc(100% + 6px); left:0; display:none; min-width:150px; padding:6px; border:1px solid var(--line, #e3e9f2); border-radius:9px; background:var(--surface, #fff); box-shadow:0 14px 30px rgba(29,53,87,.16); }
.topbar .site-nav-group:hover .site-nav-menu,
.topbar .site-nav-group.is-open .site-nav-menu { display:flex; flex-direction:column; }
.topbar .site-nav-menu .site-nav-link { display:block; width:100%; }
.topbar .topbar-spacer { flex:1; }
.topbar #auth-slot { display:flex; align-items:center; }
.topbar .theme-toggle,
.topbar .settings-button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 10px; border:1px solid var(--line, #e3e9f2); border-radius:8px; background:var(--surface, #fff); color:var(--muted, #6d7a90); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.topbar .theme-toggle { margin-right:6px; }
.topbar .theme-toggle:hover,
.topbar .settings-button:hover { color:var(--blue, #2d6cdf); border-color:#7ba1dc; background:var(--blue-soft, #eaf1ff); }
.topbar .theme-toggle:active { transform:translateY(1px); }
.topbar .theme-toggle > span:first-child { width:16px; font-size:15px; line-height:1; text-align:center; }

:root[data-theme="dark"] .topbar { background:rgba(18,28,43,.94); border-bottom-color:#2b3a50; box-shadow:0 8px 30px rgba(0,0,0,.12); }
:root[data-theme="dark"] .topbar .brand { color:#e7edf7; }
:root[data-theme="dark"] .topbar .brand small,
:root[data-theme="dark"] .topbar .site-nav-link { color:#9ba9bd; }
:root[data-theme="dark"] .topbar .site-nav-link:hover,
:root[data-theme="dark"] .topbar .site-nav-link.active { color:#79a7ff; background:#1d3152; }
:root[data-theme="dark"] .topbar .site-nav-category { color:#9ba9bd; }
:root[data-theme="dark"] .topbar .site-nav-group:hover > .site-nav-category,
:root[data-theme="dark"] .topbar .site-nav-group.is-open > .site-nav-category,
:root[data-theme="dark"] .topbar .site-nav-group.active > .site-nav-category { color:#79a7ff; background:#1d3152; }
:root[data-theme="dark"] .topbar .site-nav-menu { border-color:#34445c; background:#182638; box-shadow:0 14px 30px rgba(0,0,0,.3); }
:root[data-theme="dark"] .topbar .theme-toggle,
:root[data-theme="dark"] .topbar .settings-button { color:#b3c0d2; background:transparent; border-color:#34445c; }
:root[data-theme="dark"] .topbar .theme-toggle:hover,
:root[data-theme="dark"] .topbar .settings-button:hover { color:#79a7ff; background:#1b2b43; border-color:#4b6c9f; }

@media (max-width:820px) {
  .topbar { height:auto; min-height:62px; flex-wrap:wrap; align-content:center; gap:0 8px; padding:8px 12px 0 !important; }
  .topbar .brand { order:1; min-width:0; gap:8px; font-size:17px; }
  .topbar .brand-mark { width:32px; height:32px; flex:0 0 32px; border-radius:8px; }
  .topbar .brand > span:last-child { min-width:0; white-space:nowrap; }
  .topbar .brand small { font-size:9px; }
  .topbar .topbar-spacer { order:2; }
  .topbar .auth-entry,
  .topbar .user-chip,
  .topbar #auth-slot { order:3; flex:0 0 auto; }
  .topbar .theme-toggle { order:4; width:34px; height:34px; min-height:34px; flex:0 0 34px; margin:0; padding:0; }
  .topbar .theme-toggle-label { display:none; }
  .topbar .settings-button { order:5; width:34px; height:34px; flex:0 0 34px; padding:0; font-size:0; }
  .topbar .settings-button > span { font-size:15px; }
  .topbar .site-nav { order:10; width:calc(100% + 24px); max-width:none; min-width:0; flex:0 0 calc(100% + 24px); margin:8px -12px 0 !important; padding:0 12px 7px; gap:5px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .topbar .site-nav::-webkit-scrollbar { display:none; }
  .topbar .site-nav-link { flex:0 0 auto; min-width:max-content; padding:7px 10px; border:1px solid transparent; font-size:11px; line-height:1.2; }
  .topbar .site-nav { overflow:visible; flex-wrap:wrap; }
  .topbar .site-nav-group { flex:0 0 auto; flex-wrap:wrap; }
  .topbar .site-nav-category { padding:7px 10px; font-size:11px; line-height:1.2; border:1px solid transparent; }
  .topbar .site-nav-menu { position:static; flex-basis:100%; min-width:0; padding:3px 0 5px 9px; border:0; border-left:2px solid var(--blue, #2d6cdf); border-radius:0; background:transparent; box-shadow:none; }
  .topbar .site-nav-group:not(.is-open) .site-nav-menu { display:none; }
  .topbar .site-nav-group.is-open .site-nav-menu { display:flex; }
  .topbar .site-nav-menu .site-nav-link { padding:6px 9px; }
}

@media (max-width:560px) {
  .topbar { padding-inline:10px !important; }
  .topbar .site-nav { width:calc(100% + 20px); flex-basis:calc(100% + 20px); margin-inline:-10px !important; padding-inline:10px; }
  .topbar .brand small { display:none; }
}