:root {
  --ink: #08131f;
  --ink-2: #0d2030;
  --green: #06728b;
  --line: #dce6eb;
  --paper: #f5f8fa;
  --soft: #eaf7f8;
  --muted: #607484;
  --brand-cyan: #67e8f9;
  --brand-cyan-2: #22d3ee;
  --brand-orange: #f59e0b;
}

body { background: var(--paper); color: var(--ink); }
.public-header,
.topbar { height: 60px; flex: 0 0 60px; background: rgba(8, 19, 31, 0.98); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.topbar { padding: 0 max(16px, calc((100vw - 1100px) / 2 + 16px)); }
.public-brand,
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.public-brand img,
.brand img { display: block; height: 50px; width: auto; max-width: min(42vw, 160px); object-fit: contain; background: #071525; border-radius: 3px; }
.assistant-mark,
.brand-small { border-left: 1px solid rgba(255, 255, 255, 0.24); margin-left: 0; padding-left: 10px; color: #b8c7d4; font-size: 12px; font-weight: 650; white-space: nowrap; }
.home-link,
.topbar a { color: #b8c7d4; }
.home-link:hover,
.topbar a:hover { color: var(--brand-cyan); }
.user-pill { background: rgba(103, 232, 249, 0.12); border: 1px solid rgba(103, 232, 249, 0.25); color: #d5f7fb; }
.primary { background: var(--brand-cyan-2); color: #06202c; }
.primary:hover { background: var(--brand-cyan); }
.secondary { border-color: #cbd9df; color: var(--ink); }
.bottom-nav { border-top-color: #dce6eb; }
.nav-button.active { color: var(--green); background: var(--soft); }
.brand-bar { height: 60px; display: flex; align-items: center; margin-bottom: 28px; }
@media (max-width: 760px) {
  .public-header,
  .topbar { height: 60px; flex-basis: 60px; }
  .public-brand img,
  .brand img { height: 42px; max-width: min(40vw, 126px); }
  .assistant-mark,
  .brand-small { padding-left: 8px; font-size: 11px; }
}