/* FLINCH branding only. Geometry, chart semantics and gesture motion stay owned
   by the existing component styles. No route-specific palette. */
:root {
  --brand-bg: #0B0F0E;
  --brand-fg: #F5F7F5;
  --brand-accent: #4FD8EB;
  --bg: var(--brand-bg);
  --text: var(--brand-fg);
  --accent: var(--brand-accent);
  --logo-dot: var(--brand-accent);
  --on-accent: var(--brand-bg);
  --muted: rgb(245 247 245 / .70);
  --tertiary: rgb(245 247 245 / .50);
  --surface: rgb(11 15 14 / .72);
  --surface-glass: rgb(11 15 14 / .72);
  --surface-raised: rgb(11 15 14 / .72);
  --glass: rgb(11 15 14 / .72);
  --sheet-glass: rgb(11 15 14 / .72);
  --amb-base: var(--brand-bg);
  --amb-1: var(--brand-accent);
  --amb-2: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-bg));
  --amb-3: color-mix(in srgb, var(--brand-fg) 6%, var(--brand-bg));
}
html, body, .showcase, .phone { background-color: var(--bg); }
/* Keep the old wordmark's layout slot. The official artwork uses only the spare
   header gap; feed tabs, rail and navigation retain their original positions. */
.wordmark { width: 65px; flex: 0 0 65px; }
.wordmark .brand-logo-window {
  position: relative;
  display: block;
  flex: 0 0 90px;
  width: 90px;
  aspect-ratio: 632 / 192;
  overflow: hidden;
  color: inherit;
}
/* Render the complete official SVG, without cropping or changing its ratio.
   The header window keeps its approved layout size. */
.brand-logo-window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 370px) {
  .wordmark { width: 58.5px; flex-basis: 58.5px; }
}
.about-brand-logo { display: block; width: 320px; max-width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
/* Cyan fills need dark text; status/price colours remain the existing tokens. */
.creator-avatar-live, .conversation-message.mine,
.conversation-composer > button[type=submit] { color: var(--on-accent); }
.live-chat-message.is-target { background-color: rgb(79 216 235 / .10); }