*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces, from the page floor up to the tiles that sit on a card */
  --bg:            #0D0F14;
  --bg-2:          #14171F;
  --surface:       #1A1E28;
  --surface-2:     #222734;

  /* Two weights of line: chrome separators and the borders of things you touch */
  --line:          #22283A;
  --border:        #262C3C;
  --border-strong: #2B3141;

  /* Four steps of ink. --text-4 is for micro-labels only; it drops below 4.5:1
     on --surface-2, so anything readable stays at --text-3 or above. */
  --text:          #E8EAF2;
  --text-2:        #A8AEC2;
  --text-3:        #8A91AA;
  --text-4:        #6E7690;

  --accent:        #7C83FF;
  --accent-2:      #9AA0FF;
  --accent-soft:   rgba(124,131,255,.12);
  --accent-line:   rgba(124,131,255,.30);

  /* Meaning, not decoration: lime is money saved, amber is electricity,
     red is a failure. --lime-bar and --ref-bar are the only two chart fills;
     the reference bar is deliberately colourless because amber-vs-green
     collapses under deuteranopia. */
  --lime:          #C0F14E;
  --lime-bar:      #B7E84A;
  --lime-soft:     rgba(192,241,78,.10);
  --lime-line:     rgba(192,241,78,.26);
  --elec:          #F0A63C;
  --elec-soft:     rgba(240,166,60,.08);
  --elec-line:     rgba(240,166,60,.32);
  --red:           #FF8A8A;
  --red-soft:      rgba(255,138,138,.06);
  --red-line:      rgba(255,138,138,.30);
  --ref-bar:       #6E7690;

  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --r-control: 12px;
  --r-card:    18px;
  --r-modal:   26px;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The one micro-label style, used everywhere a field needs naming without
   competing with its value. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-4);
}

header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 15px; height: 15px; }

.logo {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.6px;
}
.logo span { color: var(--text); }

.header-sep { width: 1px; height: 18px; background: var(--border-strong); }
.header-title { font-size: 13px; color: var(--text-2); }

.hdr-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
}
.kb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.kb-dot.ready   { background: var(--lime); }
.kb-dot.pending { background: var(--elec); }
.kb-dot.offline { background: var(--red); }
.kb-text { font-size: 12px; color: var(--text-2); }

.hdr-link {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  transition: border-color .15s, color .15s;
}
.hdr-link:hover { border-color: var(--accent); color: var(--text); }

.session-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .4px;
  color: var(--text-4);
}

.layout { display: flex; flex: 1; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}