/* ============================================================
   DLG Financials, "Hologram" theme, heat-inverted.
   Copied from /docker/marketing/app/static/app.css so the two dashboards
   are one visual system, with the financials additions appended at the end.
   Sibling of the call-ops dashboard (/docker/calls): same motifs,
   opposite temperature. Warm near-black ember ground, glass panels
   with corner cuts, scanline + particle ambient, mono microtype,
   tabular numerals, sidebar rail, single committed dark theme.

   Role swap vs the calls theme: coral is the focus colour and the
   primary data series; the calls green is the accent / "good" /
   secondary series. Greys warm toward umber instead of sage.

   Series colours are the validated set from the dataviz palette check
   (dark mode, panel surfaces #2A1B16 and #33221A):
     slot 1 coral  #E06B44   spend / primary metric
     slot 2 green  #3FA783   conversions / good / secondary
     slot 3 steel  #4285C0   neutral comparison
     slot 4 amber  #B98C1E   warn series step
     slot 5 violet #A177D9   fifth categorical step
   Slots 1-4 clear the lightness band, chroma floor, adjacent CVD
   separation (worst 9.2 deutan), normal-vision floor (worst 15.9)
   and 3:1 contrast on both panel surfaces. --warn (#E8C34A) is the
   UI status colour only, never a chart series.

   Slot 5 was added for the retained-client stack. The validated stack
   order is coral, violet, green, steel, amber (bottom to top), checked
   with scripts/validate_palette.js against both panel surfaces: all
   five pass, worst adjacent CVD 14.0, worst normal-vision 15.6. Five
   is the ceiling on this ground — a sixth hue fails the normal-vision
   floor against one of these — so the two smallest attribution
   buckets are reported in the table instead of the chart, and a grey
   "unknown" series was rejected outright (a low-chroma slot fails the
   chroma floor and reads close to every other slot).
   ============================================================ */

:root {
  /* ---- Ink ---- */
  --ink:        #F4F2EC;   /* cream — primary text and numbers */
  --silver:     #C9D0CD;   /* secondary text */
  --muted:      #A89486;   /* umber — labels, axis, hints (5.7:1 on panel) */
  --dim:        #7A6459;   /* faintest */

  /* ---- Focus / status ---- */
  --accent:     #E06B44;   /* coral — focus, primary data, selection */
  --accent-hot: #FF8A5C;   /* brighter coral — glows only */
  --good:       #3FA783;   /* the calls green, now the accent */
  --warn:       #E8C34A;   /* status UI (paired with a label, never alone) */
  --bad:        #E06B44;
  --blue:       #4285C0;   /* neutral comparison series */

  /* ---- Data series (validated categorical slots, fixed order) ---- */
  --series-1:   #E06B44;
  --series-2:   #3FA783;
  --series-3:   #4285C0;
  --series-4:   #B98C1E;
  --series-5:   #A177D9;

  /* ---- Retained-client channels ----
     Colour follows the channel, never its rank, so a channel keeps its
     hue whatever the window shows. The two table-only buckets wear text
     ink rather than a series hue. */
  --chan-google:    #E06B44;
  --chan-instagram: #A177D9;
  --chan-referral:  #3FA783;
  --chan-facebook:  #4285C0;
  --chan-unknown:   #B98C1E;
  --chan-prior_client: #C9D0CD;
  --chan-other:        #A89486;
  --chan-direct:       #8E9A94;
  /* Google splits three ways once a client is traced to a measured lead. The
     three wear one hue in three steps rather than three hues, so the Google
     block still reads as one region of the bar. Same ramp as the lead bands
     below; see the separation figures there. */
  --chan-google_ads:     #E06B44;
  --chan-google_lsa:     #BC4F2E;
  --chan-google_organic: #F2A385;

  /* ---- Inbound-lead channel families ----
     The lead vocabulary has twelve values, which cannot stay
     distinguishable as twelve hues on this ground. So the chart bands are
     five FAMILIES and the fine channels live in the table beneath it,
     each wearing its family's hue.
     Same five validated hexes as the retained channels, re-declared under
     lead names so a family keeps its meaning independently. Order matters:
     validated with scripts/validate_palette.js against both panel
     surfaces (#2A1B16 and #251814) as
       google, instagram, other, facebook, unknown
     -> ALL CHECKS PASS. Putting instagram next to facebook instead puts
     purple beside blue and FAILS both CVD separation (protan dE 4.1) and
     the normal-vision floor (dE 13.4), so do not reorder these.
     Worst adjacent tritan pair is other/instagram at dE 6.1, inside the
     6-8 floor band, which is why every band is also named in the series
     key and repeated with a swatch in the table. */
  --lead-google:    #E06B44;
  --lead-instagram: #A177D9;
  --lead-other:     #3FA783;
  --lead-facebook:  #4285C0;
  --lead-unknown:   #B98C1E;

  /* ---- The Google split ----
     Paid search, Local Services and organic are three different channels and
     the doorway measures which one arrived, so the chart stops merging them.
     They share the google hue at three lightness steps plus one desaturated
     step for "measured as Google, which one unclear", which keeps the number of
     HUES at five and lets the Google bands still read as one block.
     Re-validated 2026-07-31 with the same CIEDE2000 + Vienot dichromat method
     the five-hue order was validated with, in the new stack order
       g_ads, g_lsa, g_organic, g_unspecified, instagram, other, facebook, unknown
     Worst NEW adjacent pair is g_organic/g_unspecified at dE 9.2 (protan),
     above the 6-8 floor band. The worst pair on the chart overall is unchanged
     at other/facebook dE 6.8 (tritan), which predates this split and is why
     every band is named in the series key and repeated with a swatch in the
     table. Surface contrast of the darkest new band is 3.39:1 on #2A1B16. */
  --lead-google_ads:         #E06B44;
  --lead-google_lsa:         #BC4F2E;
  --lead-google_organic:     #F2A385;
  --lead-google_unspecified: #C08A72;

  /* ---- Grounds + surfaces ---- */
  --bg0:        #170D09;
  --bg1:        #1F130F;
  --panel:      #2A1B16;
  --panel2:     #251814;
  --grid:       #432A20;
  --hair:       rgba(201,208,205,.16);
  --hair-soft:  rgba(201,208,205,.09);
  --glass-a:    rgba(240,232,228,.055);
  --glass-b:    rgba(37,24,20,.55);
  --axis:       rgba(201,208,205,.28);

  /* pre-multiplied status tints (glass over the warm ground) */
  --tint-good:  rgba(63,167,131,.14);
  --tint-warn:  rgba(232,195,74,.14);
  --tint-bad:   rgba(224,107,68,.14);

  /* ---- Type (same values as the calls theme) ---- */
  --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", "Cascadia Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;

  --sidebar-w: 238px;
  --radius:    10px;
  --cut:       14px;   /* glass corner-cut size */
}

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

html { -webkit-text-size-adjust: 100%; background: #160C08; }
body {
  background: transparent;   /* the ground lives on <html> + the .ambient layer */
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: var(--silver); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 600; }
img { max-width: 100%; }
::selection { background: rgba(224,107,68,.35); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tnum, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* thin dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
*::-webkit-scrollbar { height: 9px; width: 9px; }
*::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 6px; }

/* ============================================================
   Ambient layer — particle drift + scanline (behind everything)
   Coral glow top-centre, green glow in the corner: the mirror of
   the calls theme. Degrades to the static gradient ground with JS
   off; fully stilled under prefers-reduced-motion.
   ============================================================ */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(72% 55% at 50% 8%, rgba(224,107,68,.13), transparent 60%),
    radial-gradient(80% 70% at 92% 0%, rgba(63,167,131,.09), transparent 55%),
    linear-gradient(180deg, #2B1710 0%, #160C08 72%);
}
.hg-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.hg-scan {
  position: absolute; inset: 0; opacity: .45;
  background: repeating-linear-gradient(0deg, rgba(201,208,205,.045) 0 1px, transparent 1px 4px);
}
.hg-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -34%; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(224,107,68,.10), transparent);
  animation: hg-scan 9s linear infinite;
}
@keyframes hg-scan { to { top: 120%; } }

/* ============================================================
   App shell + sidebar rail
   ============================================================ */
.app-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(42,27,22,.74), rgba(23,13,9,.88));
  border-right: 1px solid var(--hair);
}
.sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid var(--hair-soft); text-align: center; }
/* The full DLG logo, never cropped or recoloured. It keeps the asset's own
   white clear space so the dark logo elements stay legible on the near-black
   ground, with a coral glow behind it. */
.sidebar-logo-img {
  display: block; width: 100%; max-width: 168px; height: auto; margin: 0 auto 12px;
  background: #fff; border-radius: 10px; padding: 6px 8px;
  box-shadow: 0 0 0 1px var(--hair), 0 0 26px -8px var(--accent-hot);
}
.sidebar-subtitle {
  font-family: var(--mono); font-size: 9.5px; color: var(--muted);
  margin-top: 4px; text-transform: uppercase; letter-spacing: .22em;
}
.sidebar-nav { list-style: none; padding: 12px 12px; flex: 1; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin: 2px 0; color: var(--silver);
  font-size: 13px; font-weight: 500; border-radius: 8px;
  border-left: 2px solid transparent; transition: background .13s, color .13s;
}
.nav-icon { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sidebar-nav a:hover { background: rgba(201,208,205,.06); color: var(--ink); }
.sidebar-nav a.active {
  background: linear-gradient(90deg, rgba(224,107,68,.18), transparent);
  color: var(--ink); border-left-color: var(--accent); font-weight: 600;
}
.sidebar-nav a.active .nav-icon { color: var(--accent); opacity: 1; }
.nav-section {
  padding: 16px 12px 6px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .22em; color: var(--muted);
}
.sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--hair-soft); }
.sidebar-sync { font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.7; }
.sidebar-sync .row { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.sidebar-sync .nm { color: var(--silver); }
.btn-logout {
  display: inline-block; margin-top: 10px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; color: var(--muted); font-weight: 500;
}
.btn-logout:hover { color: var(--accent); }

/* ---- Main content ---- */
.main-content { flex: 1; min-width: 0; padding: 26px 32px 60px; max-width: 1500px; }

/* ============================================================
   Page header + section headings
   ============================================================ */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hair-soft);
}
.page-head h1 { font-family: var(--serif); font-size: 25px; letter-spacing: -.01em; line-height: 1.15; }
.page-sub { font-size: 12.5px; color: var(--silver); margin: 5px 0 0; }
.page-sub b { color: var(--ink); }
.section-title {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted); font-weight: 600;
  margin: 26px 0 12px; display: flex; align-items: center; gap: 10px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--hair-soft); }

/* ============================================================
   Status pill / banners
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--silver);
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--hair);
}
.pill .led { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }

.sample-banner {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
  padding: 12px 18px; color: var(--ink);
  background: linear-gradient(90deg, rgba(232,195,74,.16), rgba(232,195,74,.03));
  border: 1px solid rgba(232,195,74,.42);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.sample-banner .sample-tag {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--warn); padding-top: 2px;
}
.sample-banner .msg { font-size: 12.5px; color: var(--silver); line-height: 1.5; }

/* ============================================================
   Buttons + window toggle
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  font-family: var(--mono); letter-spacing: .02em;
  border: 1px solid var(--hair); background: transparent; color: var(--silver);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn:hover { color: var(--ink); border-color: var(--silver); }
.btn-sm { padding: 5px 11px; font-size: 11.5px; }

/* One filter row above everything it scopes — never inside a chart card. */
.filter-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.filter-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.segmented { display: inline-flex; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.segmented a, .segmented button {
  display: inline-block; padding: 6px 14px; font-family: var(--mono); font-size: 11.5px;
  font-weight: 600; letter-spacing: .04em; color: var(--muted); background: transparent;
  border: 0; border-right: 1px solid var(--hair-soft); cursor: pointer; transition: all .13s;
}
.segmented a:last-child, .segmented button:last-child { border-right: 0; }
.segmented a:hover, .segmented button:hover { color: var(--ink); background: rgba(201,208,205,.05); }
.segmented a.active, .segmented button.active {
  color: var(--ink); background: rgba(224,107,68,.20);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.toggle-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--silver); cursor: pointer; }
input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }

/* ============================================================
   Glass panels / cards
   ============================================================ */
.glass, .card {
  position: relative;
  background: linear-gradient(158deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--hair);
  clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.8);
}
.glass::before, .card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  box-shadow: inset 0 0 22px -10px rgba(224,107,68,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
.card { border-radius: 2px; margin-bottom: 16px; }
.card-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--hair-soft); flex-wrap: wrap;
}
.card-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.card-head .cap { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.card-body { padding: 16px 18px; }
.card-body.no-pad { padding: 0; }
.card-foot {
  padding: 10px 18px; border-top: 1px solid var(--hair-soft);
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
/* a standalone explanatory card, with no chart or table above it to divide from */
.card-body.foot-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.card-body.foot-note code { font-family: var(--mono); color: var(--silver); }
.muted { color: var(--muted); }
.ok  { color: var(--good); font-weight: 600; }
.err { color: var(--accent); font-weight: 600; }

/* ============================================================
   Layout grids
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card {
  position: relative; padding: 15px 17px;
  background: linear-gradient(158deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--hair);
  clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.8);
}
.kpi-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.kpi-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 7px; line-height: 1.4;
}
/* Hero and tile figures take proportional digits — tabular-nums is for columns. */
.kpi-value {
  font-size: 31px; font-weight: 600; letter-spacing: -.02em; line-height: 1.08;
  color: var(--ink); margin-top: 6px;
}
.kpi-foot { font-size: 11.5px; color: var(--silver); margin-top: 6px; line-height: 1.45; }
.kpi-focus::after {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}

/* delta chip — direction is carried by the arrow glyph and the words, not colour alone */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.delta.up   { color: var(--good); }
.delta.down { color: var(--accent); }
.delta.flat { color: var(--muted); }

/* ============================================================
   Hero stat + demoted metric block
   One number the page is actually about, at a size nothing else on
   the page competes with, with its arithmetic spelled out under it.
   ============================================================ */
.hero-stat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 34px; }
.hero-stat .hs-main { min-width: 240px; }
.hero-stat .hs-value {
  font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
  color: var(--ink); text-shadow: 0 0 30px rgba(224,107,68,.28);
}
.hero-stat .hs-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.hero-stat .hs-math {
  font-family: var(--mono); font-size: 11.5px; color: var(--silver);
  font-variant-numeric: tabular-nums; margin-top: 9px; line-height: 1.6;
}
.hero-stat .hs-side { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.hero-stat .hs-side > div { min-width: 130px; }
.hs-sub-value {
  font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.2;
  letter-spacing: -.01em;
}
.hs-sub-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px;
}

/* A metric kept on the page for continuity but no longer the headline. */
.demoted { border-left: 2px solid var(--hair); padding-left: 16px; }
.demoted .hs-sub-value { color: var(--silver); font-size: 18px; }
.demoted-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-bottom: 13px;
  max-width: 780px;
}

/* channel swatch — the legend mark beside a channel name in a table */
.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 8px; vertical-align: 1px; flex: 0 0 auto;
}
.swatch-hollow { background: transparent; border: 1.5px solid var(--chan-other); }
.chan-name { white-space: nowrap; }
.conf-note { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* evidence tag — how well a single row's origin is actually known.
   Same chip language as .src-tag on the source cards, sized for a table cell
   and without the flex-only margin. Three rungs, and the rung is carried by the
   WORD as much as the colour: "measured" is the only one that means a doorway
   recorded the origin, so it gets the accent; a note-derived origin is quieter;
   nothing recorded is the muted warn hue the unknown channel already wears. */
.evi-tag {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 5px; white-space: nowrap;
}
.evi-measured { color: var(--good); }
.evi-note     { color: var(--muted); opacity: .8; }
.evi-none     { color: var(--chan-unknown); opacity: .8; }

/* coverage meter — a share bar sized by the value, not a decorative rail */
.meter { display: flex; align-items: center; gap: 9px; }
.meter .track {
  position: relative; height: 6px; border-radius: 3px; flex: 1 1 90px;
  min-width: 60px; background: rgba(201,208,205,.12);
}
.meter .fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: var(--accent);
}
.meter .val {
  font-family: var(--mono); font-size: 11px; color: var(--silver);
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}
/* A target marker on a meter. Muted ink, not a chart hue, for the same reason
   the chart's goal line is: it is not a measurement and must never read as one.
   The number beside it is what carries the value; this only says where. */
.meter .goal {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--muted); opacity: .85;
}
.meter.meter-goal .track { overflow: visible; }

/* ============================================================
   Funnel chain — an ordered set of stat blocks, not a chart
   ============================================================ */
/* Four ordered magnitudes with big labels is a stat row, not a plot. Order is
   carried by position and by the chevron between blocks, so no hue has to encode
   the sequence and the palette stays where it is. Every block wears the same
   coral, except the outcome block, which wears the green the rest of the
   dashboard already uses for a signed client. */
.funnel-chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.fn-step {
  position: relative; flex: 1 1 168px; min-width: 168px;
  padding: 0 18px 0 22px; border-left: 1px solid var(--hair-soft);
}
.fn-step:first-child { border-left: 0; padding-left: 0; }
/* The chevron sits on the divider, so the chain reads left to right even when
   the row wraps on a narrow window. */
.fn-step + .fn-step::before {
  content: "\203A"; position: absolute; left: -7px; top: 12px;
  color: var(--dim); font-size: 15px; line-height: 1;
  background: transparent;
}
.fn-val {
  font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.fn-lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
  line-height: 1.4;
}
.fn-note { font-size: 11.5px; color: var(--silver); margin-top: 7px; line-height: 1.45; }
.fn-bar { margin-top: 9px; }
.fn-bar .track {
  position: relative; display: block; height: 4px; border-radius: 2px;
  background: rgba(201,208,205,.12);
}
.fn-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  background: var(--accent);
}
.fn-out .fn-bar .fill { background: var(--good); }
.fn-out .fn-val { color: var(--good); }

/* ============================================================
   Pipeline stage board
   ============================================================ */
/* An indented breakdown row under a family. The indent and the smaller label do
   the grouping, so the LOST family can show its three statuses without three
   separate tables. */
.data-table td.sub-name {
  padding-left: 36px; color: var(--silver); font-size: 12px;
}
.data-table tr.sub-row td { border-bottom-color: var(--hair-soft); }
.stage-kind {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); border: 1px solid currentColor;
  border-radius: 2px; padding: 1px 5px; margin-left: 8px; white-space: nowrap;
}
.stage-open    { color: var(--good); }
.stage-closed  { color: var(--muted); opacity: .8; }
.stage-unknown { color: var(--chan-unknown); opacity: .85; }

/* ============================================================
   Platform cards (the hub's three doors)
   ============================================================ */
/* ---- Per-source cards (overview, above the scorecard table) ----------------
   One card per source, each tinted with that source's own channel hue through
   the --src custom property set inline. No new hues enter the palette: --src is
   always one of the --lead-* / --chan-* values the charts already use, so a
   source wears one colour on the card, the chart band and the table swatch.

   The hologram treatment is carried by the corner cut, the hairline sweep and a
   single accent edge, all of which the theme already speaks. The glow is kept
   to the edge and the dot rather than washing the panel, because these cards
   sit above a dense table and a bloom behind numbers costs legibility. */
.source-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.source-cards-sm {
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); margin-bottom: 10px;
}
.source-card {
  --src: var(--accent);
  position: relative; overflow: hidden; padding: 14px 16px 15px;
  /* Two declarations on purpose. color-mix is the tint, and if a browser does
     not support it the whole shorthand would be dropped and the card would come
     out transparent, so the plain glass gradient is declared first as the
     fallback and the tinted version overrides it where it parses. */
  background: linear-gradient(158deg, var(--glass-a), var(--glass-b));
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--src) 12%, transparent), transparent 62%),
    linear-gradient(158deg, var(--glass-a), var(--glass-b));
  border: 1px solid var(--hair);
  clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.8);
}
/* The accent edge: the card's identity colour, glowing just enough to read. */
.source-card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: var(--src); box-shadow: 0 0 12px -1px var(--src); border-radius: 2px;
}
/* A single hairline sweep across the top, the same language as the scanline. */
.source-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  background: linear-gradient(180deg, var(--hair), transparent 2px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--src) 26%, transparent), transparent 2px);
  opacity: .75;
}
.src-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.src-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--src); box-shadow: 0 0 9px var(--src);
}
.src-name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
  text-decoration: none; line-height: 1.3;
}
a.src-name:hover { color: var(--src); }
.src-tag {
  margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--src); border: 1px solid currentColor;
  border-radius: 2px; padding: 1px 5px; opacity: .85; white-space: nowrap;
}
.src-tag-soft { color: var(--muted); opacity: .7; }
.src-hero { margin-bottom: 12px; }
.src-hero-val {
  font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  color: var(--ink);
}
.src-hero-lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.src-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border-top: 1px solid var(--hair-soft); padding-top: 10px;
}
.src-grid-2 { grid-template-columns: repeat(2, 1fr); border-top: none; padding-top: 0; }
.src-val { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.src-lab {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 3px; line-height: 1.35;
}
/* An honest blank, not a zero: sized down so it never reads as a figure. */
.src-none { font-size: 12px; font-weight: 500; color: var(--silver); }
.src-foot {
  font-size: 10.5px; color: var(--silver); margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--hair-soft);
}
.src-quiet { padding: 12px 14px 13px; }
.src-quiet .src-val { font-size: 20px; }

.plat-card { display: flex; flex-direction: column; }
.plat-card .card-body { flex: 1; }
.plat-card .card-head h2 { display: flex; align-items: center; gap: 9px; }
.plat-card .card-head .nav-icon { width: 15px; height: 15px; color: var(--accent); opacity: 1; }
.plat-nums { display: flex; flex-wrap: wrap; gap: 16px 26px; }
.plat-nums > div { min-width: 84px; }
.plat-num { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; }
.plat-lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.plat-spark { margin-top: 16px; }
.plat-open {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); transition: all .14s;
}
a.plat-open:hover { color: var(--accent); background: rgba(224,107,68,.07); }
.plat-open .arrow { font-size: 13px; }

/* ============================================================
   Freshness strip
   ============================================================ */
.fresh-strip { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.fresh {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; border: 1px solid var(--hair-soft); border-radius: 8px;
  background: rgba(201,208,205,.03);
}
.fresh .led { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fresh.fresh-ok .led    { background: var(--good);   box-shadow: 0 0 8px var(--good); }
.fresh.fresh-stale .led { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.fresh .nm { font-size: 12.5px; color: var(--ink); }
.fresh .ag { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.fresh.fresh-stale .ag { color: var(--accent); }

/* ============================================================
   Charts
   ============================================================ */
/* Heights include the x-axis band, so the axis labels are never clipped and a
   card never grows its own nested scrollbar. */
.chart { position: relative; height: 240px; }
.chart.tall { height: 300px; }
.chart.mid { height: 195px; }
.chart.short { height: 160px; }
.chart-panel + .chart-panel { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair-soft); }
.chart-panel .microlabel { margin-bottom: 8px; }
.microlabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.microlabel i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.chart-empty {
  color: var(--muted); font-size: 12.5px; padding: 34px 12px; text-align: center;
  border: 1px dashed var(--hair-soft); border-radius: 8px;
}

/* inline SVG sparklines (cards + table rows) */
svg.spark { display: block; width: 100%; height: auto; overflow: visible; }
svg.row-spark { width: 88px; height: 24px; }

/* ============================================================
   Tables — crisp, high contrast, tabular numerals
   ============================================================ */
.table-container { overflow-x: auto; border-top: 1px solid var(--hair-soft); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hair);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 14px; border-bottom: 1px solid var(--hair-soft);
  font-size: 13px; color: var(--ink); vertical-align: middle;
}
.data-table th.r { text-align: right; }
.data-table td.num {
  font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: rgba(201,208,205,.04); }
.data-table a { color: var(--good); }
.data-table a:hover { color: var(--ink); }
.data-table .empty-state { text-align: center; color: var(--muted); padding: 30px 14px; }
.data-table tr.inactive { display: none; }
.data-table.show-inactive tr.inactive { display: table-row; }
.data-table tr.inactive td { color: var(--muted); }
.cap-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--silver); }

/* sortable header affordance (ui.js) */
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--silver); }
.sort-ind { color: var(--accent); font-weight: 700; }

/* empty-state block (Facebook post sync not yet enabled) */
.empty-block { padding: 40px 24px; text-align: center; }
.empty-block .eb-icon { width: 30px; height: 30px; color: var(--dim); stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-block h3 { font-size: 14px; color: var(--silver); margin-top: 12px; }
.empty-block p { font-size: 12.5px; color: var(--muted); margin-top: 7px; max-width: 470px;
  margin-left: auto; margin-right: auto; line-height: 1.65; }

/* ============================================================
   Footer note
   ============================================================ */
.foot {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair-soft);
  font-size: 11.5px; color: var(--muted); line-height: 1.7; max-width: 920px;
}
.foot code { font-family: var(--mono); color: var(--silver); }

/* ============================================================
   Auth page — glass centrepiece on the ember ground
   ============================================================ */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
  position: relative; z-index: 1; width: 360px; max-width: 94vw; padding: 38px 34px; text-align: center;
  background: linear-gradient(158deg, rgba(240,232,228,.07), rgba(37,24,20,.64));
  border: 1px solid var(--hair);
  clip-path: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), 0 0 60px -30px rgba(224,107,68,.45);
}
.login-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  box-shadow: inset 0 0 30px -10px rgba(224,107,68,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
/* The full logo on its own light field, never cropped or masked. */
.login-logo {
  display: block; width: 190px; height: auto; margin: 0 auto 18px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--hair), 0 10px 30px -12px rgba(0,0,0,.6), 0 0 46px -10px var(--accent-hot);
}
.login-title { font-family: var(--serif); font-size: 20px; margin: 6px 0 4px; color: var(--ink); }
.login-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-form label {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; color: var(--muted);
}
input[type=text], input[type=password] {
  width: 100%; background: rgba(23,13,9,.6); border: 1px solid var(--hair);
  border-radius: 8px; color: var(--ink); padding: 8px 10px; font-size: 13px;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--dim); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(224,107,68,.35); }
.login-form .btn { margin-top: 4px; justify-content: center; }
.btn-primary {
  background: linear-gradient(180deg, rgba(224,107,68,.92), rgba(224,107,68,.74));
  color: #1B0A05; border-color: rgba(224,107,68,.7);
}
.btn-primary:hover { color: #1B0A05; box-shadow: 0 0 22px -6px var(--accent); border-color: var(--accent); }
.err-flash {
  background: var(--tint-bad); color: var(--accent); border: 1px solid rgba(224,107,68,.5);
  border-radius: 8px; padding: 9px 13px; font-size: 12.5px; margin-bottom: 16px;
}

/* ============================================================
   Utilities
   ============================================================ */
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }
.mb-3 { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }

/* ============================================================
   Responsive — sidebar collapses to a top bar; panels stack;
   tables scroll inside their own containers.
   ============================================================ */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%; min-width: 0; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: column; border-right: none; border-bottom: 1px solid var(--hair);
    background: linear-gradient(180deg, rgba(31,19,15,.96), rgba(23,13,9,.96));
  }
  .sidebar-header { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 16px; }
  .sidebar-logo-img { width: 104px; max-width: 104px; margin: 0; padding: 4px 6px; }
  .sidebar-subtitle { margin-top: 0; }
  .sidebar-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 4px; -webkit-overflow-scrolling: touch; }
  .sidebar-nav li { flex: 0 0 auto; }
  .sidebar-nav a { margin: 0; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
  .sidebar-nav a.active { border-left: none; border-bottom-color: var(--accent); background: rgba(224,107,68,.16); }
  .nav-section { display: none; }
  .sidebar-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; }
  .sidebar-footer .btn-logout { margin-top: 0; }
  .sidebar-sync { flex: 1; min-width: 190px; }
  .sidebar-sync .row { justify-content: flex-start; }
  .main-content { padding: 18px 16px 48px; }
}
@media (max-width: 560px) {
  .page-head h1 { font-size: 21px; }
  .kpi-value { font-size: 27px; }
  .main-content { padding: 16px 12px 40px; }
  .chart { height: 200px; }
}

/* ============================================================
   Motion — stilled entirely for prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hg-scan::after { display: none; }
}

/* ============================================================
   Financials additions
   Everything above this line is the marketing dashboard's sheet,
   copied so the two apps read as one system. Everything below is
   this app's own vocabulary: request status pills, the inline
   editors the billing coordinator types into, goal meters, and the
   balance freshness strip.
   ============================================================ */

/* ---- status pill ----------------------------------------------------------
   Five states, and the state is carried by the WORD as much as the colour, so
   the table is still readable in greyscale and to a colour blind reader.
   green   every installment covered
   yellow  an unpaid installment falls due inside two days
   red     an unpaid installment is past due
   sched   money still owed but nothing is due yet
   none    no installment dates were ever recorded
   review  the amount itself is unresolved
*/
.st {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  border: 1px solid currentColor;
}
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st-green  { color: var(--good);         background: var(--tint-good); }
.st-yellow { color: var(--warn);         background: var(--tint-warn); }
.st-red    { color: var(--accent);       background: var(--tint-bad); }
.st-sched  { color: var(--blue);         background: rgba(66,133,192,.13); }
.st-none   { color: var(--muted);        background: rgba(201,208,205,.06); }
.st-review { color: var(--chan-unknown); background: rgba(185,140,30,.13); }
.st-manual::after {
  content: "set"; margin-left: 5px; font-size: 8.5px; letter-spacing: .1em;
  opacity: .75;
}

/* ---- inline edit forms in a table cell ---------------------------------- */
.cell-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cell-form input[type=text], .cell-form input[type=date],
.cell-form input[type=number], .cell-form select, .cell-form textarea {
  background: rgba(23,13,9,.6); border: 1px solid var(--hair);
  border-radius: 6px; color: var(--ink); padding: 5px 8px;
  font-family: inherit; font-size: 12.5px; width: 100%;
}
.cell-form textarea { resize: vertical; min-height: 34px; line-height: 1.45; }
.cell-form select { font-family: var(--mono); font-size: 11.5px; }
.cell-form input[type=number], .cell-form input[type=date] {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.cell-form input:focus, .cell-form select:focus, .cell-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(224,107,68,.35);
}
.w-narrow { max-width: 118px; }
.w-mid    { max-width: 190px; }
.field-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field-lab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px;
}

/* ---- expandable detail row --------------------------------------------- */
.data-table tr.detail-row > td { background: rgba(23,13,9,.34); padding: 16px 18px; }
.data-table tr.detail-row[hidden] { display: none; }
.disclose {
  background: transparent; border: 1px solid var(--hair); color: var(--muted);
  border-radius: 6px; width: 22px; height: 22px; cursor: pointer; line-height: 1;
  font-family: var(--mono); font-size: 12px; padding: 0;
}
.disclose:hover { color: var(--ink); border-color: var(--silver); }
.disclose[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }

/* ---- installment editor ------------------------------------------------- */
.inst-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.inst-row {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: 26px minmax(90px, 130px) minmax(120px, 150px) minmax(90px, 130px) 1fr auto;
}
.inst-seq {
  font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right;
}
.inst-unknown { font-family: var(--mono); font-size: 10.5px; color: var(--chan-unknown); }
.inst-paid { font-family: var(--mono); font-size: 11px; color: var(--good); }
@media (max-width: 760px) {
  .inst-row { grid-template-columns: 1fr 1fr; }
}

/* ---- goal meters -------------------------------------------------------- */
.goal-meter { margin-top: 9px; }
.goal-meter .track {
  position: relative; height: 8px; border-radius: 4px;
  background: rgba(201,208,205,.12); overflow: hidden;
}
.goal-meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); }
.goal-meter .fill.hit { background: var(--good); }
.goal-meter .cap {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- balance freshness -------------------------------------------------- */
.fresh-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 11px 18px;
  background: linear-gradient(90deg, rgba(63,167,131,.12), rgba(63,167,131,.02));
  border: 1px solid rgba(63,167,131,.34);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.fresh-bar.stale {
  background: linear-gradient(90deg, rgba(232,195,74,.16), rgba(232,195,74,.03));
  border-color: rgba(232,195,74,.44);
}
.fresh-bar.absent {
  background: linear-gradient(90deg, rgba(224,107,68,.16), rgba(224,107,68,.03));
  border-color: rgba(224,107,68,.46);
}
.fresh-bar .tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--good); flex: none;
}
.fresh-bar.stale .tag  { color: var(--warn); }
.fresh-bar.absent .tag { color: var(--accent); }
.fresh-bar .msg { font-size: 12.5px; color: var(--silver); line-height: 1.5; }
.fresh-bar .msg b { color: var(--ink); }
.fresh-bar .act { margin-left: auto; }

/* ---- flash messages ----------------------------------------------------- */
.flash {
  padding: 10px 16px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.55;
  border-radius: 8px; border: 1px solid var(--hair); color: var(--silver);
}
.flash-ok  { border-color: rgba(63,167,131,.5);  background: var(--tint-good); color: var(--ink); }
.flash-err { border-color: rgba(224,107,68,.55); background: var(--tint-bad);  color: var(--ink); }
.flash ul { margin: 6px 0 0 18px; }
.flash li { margin-top: 3px; }

/* ---- movement flag ------------------------------------------------------ */
.moved {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--chan-unknown);
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
  margin-left: 7px; white-space: nowrap;
}

/* ---- admin table ------------------------------------------------------- */
.grant-boxes { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.grant-boxes label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--silver); cursor: pointer; white-space: nowrap;
}
.pw-reveal {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: rgba(23,13,9,.7); border: 1px dashed var(--accent);
  border-radius: 6px; padding: 7px 11px; display: inline-block; letter-spacing: .06em;
}
.tiny { font-size: 11px; color: var(--muted); line-height: 1.5; }
.right { text-align: right; }