/* ══════════════════════════════════════════════════════════════════
   Fig × Midday Squares — partner report
   Brand tokens live at the top so cobranding can be adjusted in one
   place. --brand-partner is the only colour you'd normally change when
   swapping this dashboard to a different CPG partner.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Fig's mark is lime on black; Mid-Day Squares' is black type. A purple
     UI accent clashed with both, so interactive chrome is now Fig black and
     lime is the highlight — the two brands' own colours, nothing invented. */
  --fig-lime: #E4FB67;
  --brand-fig: #111111;        /* primary interactive: buttons, tab underline */
  --brand-fig-dark: #000000;   /* hover */
  --brand-fig-light: #f7fee7;  /* pale lime wash for panels + chip hover */
  --brand-partner: #000000;    /* Mid-Day Squares wordmark */

  --bg: #f5f5f7;
  --white: #fff;
  --border: #e5e7eb;
  --text: #111;
  --muted: #6b7280;
  --muted-2: #9ca3af;

  --good: #1a7244;
  --warn: #b45309;
  --est: #0369a1;
  --est-bg: #e0f2fe;

  --sh: 0 1px 4px rgba(0, 0, 0, .07);
  --sh-md: 0 4px 18px rgba(0, 0, 0, .11);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, .22);
  --r: 10px;
  --rl: 16px;
}

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

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* ─────────────── passcode gate ─────────────── */
.gate {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, #f4fecb 0%, #f5f5f7 45%, #fff 100%);
}
.gate-card {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 20px;
  box-shadow: var(--sh-md); padding: 34px 32px; width: 100%; max-width: 380px; text-align: center;
}
.gate-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 20px; }
.gate-card h1 { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.gate-card p { font-size: 13px; color: var(--muted); margin: 6px 0 18px; line-height: 1.5; }
.gate-card input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 40px;
  padding: 11px 16px; font-size: 14px; font-family: inherit; outline: none; text-align: center;
}
.gate-card input:focus { border-color: var(--brand-fig); box-shadow: 0 0 0 3px rgba(228, 251, 103, .55); }
.gate-card button {
  width: 100%; margin-top: 10px; border: none; border-radius: 40px;
  background: var(--brand-fig); color: #fff; padding: 12px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.gate-card button:hover { background: var(--brand-fig-dark); }
.gate-card button:disabled { opacity: .6; cursor: default; }
.gate-error {
  margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #b91c1c;
  background: #fee2e2; border-radius: 8px; padding: 8px 10px;
}

/* ─────────────── wordmarks / brand ─────────────── */
.wordmark { font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.wordmark-fig { color: var(--brand-fig); }
.wordmark-partner { color: var(--brand-partner); }
.wordmark-x { color: var(--muted-2); font-size: 14px; font-weight: 600; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-logo { height: 30px; width: auto; display: block; object-fit: contain; }
.gate-brand .brand-logo { height: 34px; }

/* ─────────────── topbar / tabs ─────────────── */
.topbar {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 12px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.campaign-window { font-size: 12px; color: var(--muted); font-weight: 500; }
.ghost-btn {
  border: 1.5px solid var(--border); background: var(--white); border-radius: 40px;
  padding: 6px 13px; font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text); cursor: pointer;
}
.ghost-btn:hover { border-color: var(--brand-fig); color: var(--brand-fig); }

.tabs {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 22px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 300; box-shadow: var(--sh);
}
.tab {
  border: none; background: none; padding: 13px 14px; font-size: 13.5px; font-weight: 700;
  font-family: inherit; color: var(--muted); cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--brand-fig); }
.tab.on { color: var(--brand-fig); border-bottom-color: var(--brand-fig); }
.est-toggle {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--muted); cursor: pointer; padding: 8px 0;
}
.est-toggle input { accent-color: var(--brand-fig); width: 14px; height: 14px; cursor: pointer; }

/* ─────────────── shared controls (date + estimates) ─────────────── */
.controls {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 10px 22px; position: sticky; top: 44px; z-index: 290;
}
.controls-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.controls-row .chip-row { flex: 1; min-width: 0; }
.controls-meta { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

.date-custom {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px;
  background: var(--brand-fig-light); border-radius: var(--r);
}
.date-field { display: flex; flex-direction: column; gap: 3px; }
.date-field span {
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted);
}
.date-field input {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 5px 9px;
  font-size: 12px; font-family: inherit; color: var(--text); background: var(--white);
}
.date-field input:focus { border-color: var(--brand-fig); outline: none; }
.date-dash { color: var(--muted); padding-bottom: 6px; }
.date-apply {
  border: none; border-radius: 8px; background: var(--brand-fig); color: #fff;
  padding: 7px 18px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.date-apply:hover { background: var(--brand-fig-dark); }

.view { max-width: 1500px; margin: 0 auto; padding: 20px 22px 60px; }

/* ─────────────── filters ─────────────── */
.filters {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rl);
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; box-shadow: var(--sh);
}
.filter-search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.filter-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filter-search input {
  width: 100%; background: var(--bg); border: 1.5px solid var(--border); border-radius: 40px;
  padding: 8px 14px 8px 34px; font-size: 13px; font-family: inherit; outline: none;
}
.filter-search input:focus { border-color: var(--brand-fig); background: var(--white); }

.chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-row::before {
  content: attr(data-label); font-size: 9px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted-2); min-width: 58px;
}
.chip {
  border: 1.5px solid var(--border); background: var(--bg); border-radius: 40px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.chip:hover { border-color: var(--brand-fig); color: var(--brand-fig); background: var(--brand-fig-light); }
.chip.on { background: var(--fig-lime); border-color: var(--fig-lime); color: #111; }
.chip .n { opacity: .65; font-weight: 500; font-size: 11px; margin-left: 3px; }

.filter-tail { display: flex; align-items: center; gap: 8px; }
.select {
  appearance: none; background: var(--white); border: 1.5px solid var(--border); border-radius: 40px;
  padding: 6px 28px 6px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236b7280' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.result-bar { display: flex; align-items: baseline; gap: 10px; padding: 14px 2px 4px; flex-wrap: wrap; }
#result-count { font-size: 13.5px; font-weight: 700; }
.result-note { font-size: 12px; color: var(--muted); }

/* ─────────────── card grid ─────────────── */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px; padding: 8px 0;
}
.post {
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--rl);
  overflow: hidden; box-shadow: var(--sh); cursor: pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

.post-media { position: relative; width: 100%; padding-bottom: 133%; background: #0d0d1a; overflow: hidden; }
.post-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* Facebook's video plugin always renders a fixed ~64px title strip above the
   video regardless of the requested size, so it's pushed out of frame. */
.post-media iframe.fb { top: -64px; height: calc(100% + 64px); }
.post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.media-none {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .5); font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
}
.play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .12); z-index: 3; pointer-events: none; transition: background .15s;
}
.post:hover .play { background: rgba(0, 0, 0, .28); }
.play svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }

.post-badges {
  position: absolute; top: 8px; left: 8px; right: 8px; z-index: 4;
  display: flex; justify-content: space-between; gap: 6px;
}
.pill {
  background: rgba(255, 255, 255, .95); border-radius: 40px; padding: 3px 9px;
  font-size: 10px; font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); white-space: nowrap;
}
.pill-est { background: var(--est-bg); color: var(--est); }

.post-body { padding: 10px 12px 12px; }
.post-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.post-platform { font-size: 12.5px; font-weight: 700; }
.post-date { font-size: 10.5px; color: var(--muted); }
.post-caption {
  font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em;
}
.tags { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 8px; min-height: 17px; }
.tag { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 6px; }
.tag-retailer { background: #fdf4ff; color: #a21caf; }
.tag-theme { background: #fff7ed; color: #c2410c; }
.tag-type { background: #eef2ff; color: #4338ca; }

.metrics .m {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border);
}
.metrics .m:last-child { border-bottom: none; }
.metrics .m-l { color: var(--muted); }
.metrics .m-v { font-weight: 600; }
.est-pill {
  background: var(--est-bg); color: var(--est); font-size: 9px; font-weight: 800;
  border-radius: 3px; padding: 1px 4px; margin-left: 4px; vertical-align: middle;
}

.load-more-wrap { display: flex; justify-content: center; padding: 22px 0 0; }
.load-more {
  border: 1.5px solid var(--border); background: var(--white); border-radius: 40px;
  padding: 10px 26px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.load-more:hover { border-color: var(--brand-fig); color: var(--brand-fig); }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 13.5px; }

/* ─────────────── analytics ─────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rl);
  padding: 15px 17px; box-shadow: var(--sh);
}
.kpi-l { font-size: 9.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted-2); }
.kpi-v { font-size: 25px; font-weight: 800; letter-spacing: -.6px; margin-top: 3px; }
.kpi-s { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--rl);
  padding: 18px 20px; box-shadow: var(--sh); margin-bottom: 18px;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.card h2 { font-size: 13.5px; font-weight: 800; }
.card-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.seg { display: flex; background: var(--bg); border-radius: 40px; padding: 3px; flex-shrink: 0; }
.seg-btn {
  border: none; background: none; border-radius: 40px; padding: 5px 13px;
  font-size: 11.5px; font-weight: 700; font-family: inherit; color: var(--muted); cursor: pointer;
}
.seg-btn.on { background: var(--white); color: var(--brand-fig); box-shadow: var(--sh); }

.chart-wrap { height: 280px; position: relative; }

.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.strip .post { flex: 0 0 190px; }

.method ul { margin: 0 0 0 18px; }
.method li { font-size: 12.5px; color: var(--muted); line-height: 1.65; margin-bottom: 7px; }
.method li b { color: var(--text); }
.method-foot { font-size: 11.5px; color: var(--muted-2); margin-top: 12px; }

.footer {
  max-width: 1500px; margin: 0 auto; padding: 18px 22px 40px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted-2);
}

/* ─────────────── modal ─────────────── */
.modal {
  position: fixed; inset: 0; z-index: 700; background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  backdrop-filter: blur(3px);
}
.modal-card {
  background: var(--white); border-radius: var(--rl); box-shadow: var(--sh-lg);
  width: 100%; max-width: 780px; max-height: 90vh; display: flex; overflow: hidden; position: relative;
}
.modal-video {
  flex: 0 0 330px; background: #080810; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.modal-video iframe { border: 0; width: 100%; height: 100%; }
.modal-info { flex: 1; overflow-y: auto; padding: 22px; }
.modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 10; width: 28px; height: 28px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, .9);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: #fff; }
.modal-info h3 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.modal-sub { font-size: 12px; color: var(--muted); margin: 3px 0 14px; }
.sect-l {
  font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted-2); margin: 16px 0 6px;
}
.caption-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap;
}
@media (max-width: 760px) {
  .modal-card { flex-direction: column; max-height: 94vh; }
  .modal-video { flex: none; height: 46vh; }
}

/* ─────────────── boot / spinner ─────────────── */
.boot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 100px 20px; color: var(--muted); font-size: 13px;
}
.spinner {
  width: 30px; height: 30px; border: 3px solid var(--border);
  border-top-color: var(--brand-fig); border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.spinner.dark { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .view { padding: 14px 12px 50px; }
  .topbar, .tabs { padding-left: 14px; padding-right: 14px; }
  .est-toggle { margin-left: 0; width: 100%; padding-bottom: 10px; }
}

/* Platform metric-availability notes. Deliberately quiet and factual —
   the missing rows are a platform API limitation, not an omission here, so
   this reads as context rather than an apology. */
.coverage-note {
  font-size: 11.5px; color: var(--muted); padding: 2px 2px 0;
}
.coverage-inline {
  font-size: 11px; color: var(--muted); margin-top: 8px;
  padding: 7px 10px; background: var(--bg);
  border-left: 2px solid var(--border); border-radius: 0 6px 6px 0;
}
/* Cards now vary in height (fewer metric rows on platforms that provide
   fewer metrics), so let each sit at its natural height instead of
   stretching to match the tallest in its row. */
.grid { align-items: start; }

/* "Now" shortcut on the custom range's end date. Sits at the same baseline
   as the date inputs, which are taller than their label because of the
   stacked caption above them. */
.date-now {
  border: 1.5px solid var(--border); background: var(--white); border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; font-family: inherit;
  color: var(--text); cursor: pointer; transition: background .12s, border-color .12s;
}
.date-now:hover { border-color: var(--brand-fig); }
.date-now.on { background: var(--fig-lime); border-color: var(--fig-lime); color: #111; }

/* ══════════════ admin console ══════════════
   Deliberately plain and step-numbered: the people creating dashboards are
   not engineers, so the form reads as a short checklist rather than a
   settings panel. */
.admin-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border-radius: 40px; padding: 4px 10px; margin-left: 4px;
}
.admin-view { max-width: 860px; }

.admin-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.field-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--brand-fig); color: var(--fig-lime);
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.field-help { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 0 0 3px 27px; }
.field input[type="text"], .field input[type="password"] {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--white); outline: none;
}
.field input:focus { border-color: var(--brand-fig); box-shadow: 0 0 0 3px rgba(228, 251, 103, .55); }
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row input { flex: 1; }
.field-row .ghost-btn { flex-shrink: 0; padding-left: 16px; padding-right: 16px; }

.field-status { font-size: 12px; color: var(--muted); padding: 8px 11px; border-radius: 8px; background: var(--bg); }
.field-status.ok { background: #f0fdf4; color: #15803d; }
.field-status.err { background: #fee2e2; color: #b91c1c; }

.slug-row { display: flex; align-items: center; gap: 0; }
.slug-prefix {
  font-size: 12px; color: var(--muted); background: var(--bg);
  border: 1.5px solid var(--border); border-right: none;
  border-radius: 10px 0 0 10px; padding: 10px 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46%;
}
.slug-row input { border-radius: 0 10px 10px 0 !important; }

.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.primary-btn {
  border: none; border-radius: 40px; background: var(--brand-fig); color: #fff;
  padding: 11px 26px; font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.primary-btn:hover { background: var(--brand-fig-dark); }
.primary-btn:disabled { opacity: .55; cursor: default; }
.form-status { font-size: 12.5px; color: var(--muted); }
.form-status.err { color: #b91c1c; font-weight: 600; }

.success-card { border-color: var(--fig-lime); border-width: 2px; background: #fcffee; }
.copy-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.copy-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); min-width: 62px;
}
.copy-value {
  flex: 1; min-width: 200px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; background: var(--white); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 9px 12px; overflow-x: auto; white-space: nowrap;
}

.dash-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.dash-row:last-child { border-bottom: none; }
.dash-main { flex: 1; min-width: 220px; }
.dash-name { font-size: 13.5px; font-weight: 700; }
.dash-url { font-size: 12px; color: var(--brand-fig); text-decoration: none; word-break: break-all; }
.dash-url:hover { text-decoration: underline; }
.dash-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dash-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ghost-btn.danger:hover { border-color: #b91c1c; color: #b91c1c; }
.empty-hint { font-size: 12.5px; color: var(--muted); padding: 8px 0; }

/* Two segmented controls sit together above the time chart: what the line
   measures (cumulative vs per period) and how wide a period is. */
.seg-group { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Optional budget/CPM pair in the admin form. */
.field-optional {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted-2); background: var(--bg); border-radius: 40px; padding: 2px 8px;
}
.money-field { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.money-field > span {
  font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted);
}

/* How fresh the figures are. Quiet by default; the dot turns amber if a
   background refresh has failed and the numbers are older than expected. */
.updated-at { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.updated-at::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--good); flex-shrink: 0;
}
.updated-at.stale::before { background: var(--warn); }