/**
 * SITE-SCOPED topbar skin — colours, backgrounds, borders, radii.
 * Packs may fork this file only; never fork topbar-construct.css.
 * Loaded after chrome (admin.css / user.css) so skin wins without !important wall.
 */
:root {
  --tb-topbar-bg: linear-gradient(
    to bottom,
    rgba(105, 128, 133, 0.95) 0%,
    rgba(72, 78, 76, 0.88) 50%,
    rgba(7, 9, 7, 0.88) 51%,
    rgba(7, 5, 6, 0.8) 100%
  );
  --tb-topbar-border: #2a3040;
  --tb-topbar-user-fg: #dbe3ff;
  --tb-topbar-muted: #9da3b1;
  --tb-topbar-plan-fg: #9eb0d4;
  --tb-topbar-plan-border: rgba(255, 255, 255, 0.18);
  --tb-topbar-plan-bg: rgba(255, 255, 255, 0.06);
  --tb-topbar-plan-border-hover: rgba(255, 255, 255, 0.35);
  --tb-topbar-plan-bg-hover: rgba(255, 255, 255, 0.12);
  --tb-topbar-pill-radius: 999px;
  --tb-topbar-ctrl-radius: 8px;
  --tb-topbar-hud-bg: rgba(255, 255, 255, 0.08);
  --tb-topbar-hud-fg: rgba(255, 255, 255, 0.92);
  --tb-topbar-hud-radius: 4px;
  --tb-topbar-btn-bg: #1a1e2a;
  --tb-topbar-btn-fg: #dbe3ff;
  --tb-topbar-btn-border: #33384a;
  --tb-topbar-btn-bg-hover: #26354f;
  --tb-topbar-btn-border-hover: #5d8ced;
  --tb-topbar-btn-fg-hover: #fff;
  --tb-topbar-health-bg: #161922;
  --tb-topbar-health-border: #2a3040;
  --tb-topbar-health-ok-border: #166534;
  --tb-topbar-health-ok-bg: #14532d;
  --tb-topbar-health-ok-fg: #86efac;
  --tb-topbar-health-bad-border: #991b1b;
  --tb-topbar-health-bad-bg: #450a0a;
  --tb-topbar-health-bad-fg: #fca5a5;
  --tb-topbar-lib-fg: #9fb0c8;
  --tb-topbar-lib-bad-fg: #fca5a5;
  --tb-site-topbar-bg: rgba(15, 16, 21, 0.82);
  --tb-site-topbar-link: var(--tb-accent, #5d8ced);
}

/* Lab/admin chrome only — public .tb-site-topbar.admin-topbar uses --tb-site-topbar-* below. */
.admin-topbar:not(.tb-site-topbar) {
  border-bottom: 1px solid var(--tb-topbar-border);
  background: var(--tb-topbar-bg);
}

.admin-user-name {
  color: var(--tb-topbar-user-fg);
}

.admin-user-plan-pill {
  border: 1px solid var(--tb-topbar-plan-border);
  border-radius: var(--tb-topbar-pill-radius);
  background: var(--tb-topbar-plan-bg);
  color: var(--tb-topbar-plan-fg);
}

.admin-user-plan-pill:hover {
  border-color: var(--tb-topbar-plan-border-hover);
  background: var(--tb-topbar-plan-bg-hover);
  color: var(--tb-topbar-user-fg);
}

.admin-topbar-tool-slot .scene-component-count-hud {
  border-radius: var(--tb-topbar-hud-radius);
  background: var(--tb-topbar-hud-bg);
  color: var(--tb-topbar-hud-fg);
}

.admin-topbar-tool-slot .al-transport-perf-pill {
  border-radius: var(--tb-topbar-hud-radius);
}

.admin-clock {
  color: var(--tb-topbar-muted);
}

.health-icon {
  border-radius: 6px;
  border: 1px solid var(--tb-topbar-health-border);
  background: var(--tb-topbar-health-bg);
}

.health-icon.ok {
  border-color: var(--tb-topbar-health-ok-border);
  background: var(--tb-topbar-health-ok-bg);
  color: var(--tb-topbar-health-ok-fg);
}

.health-icon.bad {
  border-color: var(--tb-topbar-health-bad-border);
  background: var(--tb-topbar-health-bad-bg);
  color: var(--tb-topbar-health-bad-fg);
}

.admin-lib-versions {
  color: var(--tb-topbar-lib-fg);
}

.admin-lib-versions.admin-lib-versions--bad {
  color: var(--tb-topbar-lib-bad-fg);
}

.admin-ffmpeg-loading {
  color: var(--tb-topbar-lib-fg);
}

.admin-ffmpeg-readout {
  color: var(--tb-topbar-lib-fg);
}

.btn-icon {
  border-radius: var(--tb-topbar-ctrl-radius);
  background: var(--tb-topbar-btn-bg);
  color: var(--tb-topbar-btn-fg);
  border: 1px solid var(--tb-topbar-btn-border);
}

.btn-icon:hover {
  background: var(--tb-topbar-btn-bg-hover);
  border-color: var(--tb-topbar-btn-border-hover);
  color: var(--tb-topbar-btn-fg-hover);
}

.tb-site-topbar {
  background: var(--tb-site-topbar-bg);
  border-bottom: 1px solid var(--tb-rule, var(--tb-topbar-border));
}

.tb-site-topbar__nav--menu a,
.tb-site-topbar__nav--menu span,
.tb-site-topbar__nav-link {
  color: var(--tb-site-topbar-link);
}

.al-top-bar-radius,
.wl-top-bar-radius,
.vl-top-bar-radius,
.ll-top-bar-radius,
.ml-top-bar-radius ,
.al-transport-radius,
.wl-transport-radius,
.vl-transport-radius,
.ll-transport-radius {
  border-radius: 2px !important;
}