/* ── Shared navigation bar ────────────────────────── */
:root {
  --topbar-height: 54px;
  --nav-bg: #163443;
  --nav-border: #1e3f54;
  --nav-logo-accent: #ABCF38;
  --nav-logo-text: #e0eaf0;
  --nav-tab-color: #7ab0c4;
  --nav-tab-hover-color: #c8dde8;
  --nav-tab-hover-bg: #1a3a4d;
  --nav-tab-active-color: #ABCF38;
}
.topbar { height: var(--topbar-height); background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 1.2rem; font-weight: 700; color: var(--nav-logo-accent); white-space: nowrap; }
.logo span { color: var(--nav-logo-text); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.topnav-tabs { display: flex; align-items: stretch; margin-left: .5rem; }
.topnav-tab { display: flex; align-items: center; padding: 0 .85rem; height: var(--topbar-height); font-size: .8rem; font-weight: 500; color: var(--nav-tab-color); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, background .15s; white-space: nowrap; }
.topnav-tab:hover { color: var(--nav-tab-hover-color); background: var(--nav-tab-hover-bg); }
.topnav-tab.active { color: var(--nav-tab-active-color); border-bottom-color: var(--nav-tab-active-color); font-weight: 700; pointer-events: none; cursor: default; }
.sidebar { width: 260px; background: #122d3d; border-right: 1px solid #1e3f54; display: flex; flex-direction: column; position: fixed; top: var(--topbar-height); bottom: 0; overflow: hidden; z-index: 50; }
.main { margin-left: 260px; height: calc(100vh - var(--topbar-height)); overflow-y: auto; padding: 2rem; }
.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-thumb { background: #2a5570; border-radius: 4px; }