/* ============================================================
   Aiyo Merchant Dashboard — Dark Theme Overlay
   Activated by body.dark-mode class.
   Layers on top of dashboard.html's existing inline styles.
   Visualizer (viz.html) is NOT affected — that stays as-is.
   ============================================================ */

body.dark-mode {
  --bg: #0A0E1A;
  --surface: #141926;
  --surface-mute: #0F1420;
  --surface-hi: #1B2233;
  --border: #1F2937;
  --border-hi: #2A3548;
  --text: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --teal: #14B5B3;
  --teal-hi: #38E5D9;
  --ok: #22D3B7;
  --warn: #F5A524;
  --down: #EF4444;
  --grid: rgba(148, 163, 184, 0.06);

  background: var(--bg) !important;
  color: var(--text) !important;
  background-image: radial-gradient(var(--grid) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

/* Anchors */
body.dark-mode a { color: var(--teal); }
body.dark-mode a:hover { color: var(--teal-hi); }

/* Headings and copy */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 { color: var(--text) !important; }
body.dark-mode p,
body.dark-mode .lede,
body.dark-mode .muted { color: var(--text-2) !important; }
body.dark-mode .muted { color: var(--text-3) !important; }
body.dark-mode .eyebrow {
  color: var(--teal) !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
}

/* Topbar — already dark, tune slightly for consistency with website */
body.dark-mode .topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
}
body.dark-mode .topbar .who { color: var(--text-2) !important; }
body.dark-mode .topbar .who b { color: var(--text) !important; }

/* Cards */
body.dark-mode .card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text);
}
body.dark-mode .card h2,
body.dark-mode .card h3,
body.dark-mode .card h4 { color: var(--text) !important; }

/* Buttons */
body.dark-mode .btn-primary {
  background: var(--teal) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 20px rgba(20, 181, 179, 0.25);
}
body.dark-mode .btn-primary:hover {
  background: var(--teal-hi) !important;
  box-shadow: 0 0 32px rgba(20, 181, 179, 0.5);
}
body.dark-mode .rep-btn {
  background: var(--surface-mute) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body.dark-mode .rep-btn:hover { border-color: var(--border-hi) !important; }
body.dark-mode .rep-btn.primary {
  background: var(--teal) !important;
  color: var(--bg) !important;
  border-color: var(--teal) !important;
}
body.dark-mode .rep-btn.primary:hover { background: var(--teal-hi) !important; border-color: var(--teal-hi) !important; }

/* Inputs and selects */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: var(--text-3) !important; }
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--teal) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 181, 179, 0.15) !important;
}

/* Tiles */
body.dark-mode .tile {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Payment block (was mint-green light) */
body.dark-mode .pay-block {
  background: rgba(20, 181, 179, 0.06) !important;
  border-color: rgba(20, 181, 179, 0.3) !important;
}
body.dark-mode .pay-block .pay-url {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Event feed dots — keep semantic colors but tune to dark palette */
body.dark-mode .ev-dot.ok { background: var(--ok) !important; box-shadow: 0 0 8px rgba(34, 211, 183, 0.4); }
body.dark-mode .ev-dot.gated { background: var(--warn) !important; }
body.dark-mode .ev-dot.fail { background: var(--down) !important; }
body.dark-mode .ev-dot.idle { background: var(--text-3) !important; }

/* Event details expanded */
body.dark-mode .ev-detail {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text-2);
}
body.dark-mode .ev-detail .copy {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--teal) !important;
}
body.dark-mode .ev-detail .copy:hover { background: var(--surface-hi) !important; }

/* Flow stages */
body.dark-mode .flow-stage {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

/* Onboarding / progress bar */
body.dark-mode .ob-bar { background: var(--surface-mute) !important; }

/* Roles */
body.dark-mode .role.viewer {
  background: var(--surface-mute) !important;
  color: var(--text-3) !important;
}

/* Code, kbd, inline mono */
body.dark-mode code,
body.dark-mode kbd,
body.dark-mode .mono {
  background: rgba(20, 181, 179, 0.08) !important;
  border-color: rgba(20, 181, 179, 0.2) !important;
  color: var(--teal) !important;
}

/* Account list rows */
body.dark-mode .acct {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
body.dark-mode .acct.clickable:hover { background: var(--surface-hi) !important; }

/* Any generic light-mode background surfaces we didn't explicitly hit */
body.dark-mode [class*="card"],
body.dark-mode [class*="panel"],
body.dark-mode [class*="tile"] {
  color: var(--text);
}

/* ============================================================
   OPERATIONAL BAR (top-of-page across dashboard)
   Same visual language as aiyoplane.com website.
   Contains the theme toggle switch.
   ============================================================ */

.opbar {
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #1F2937;
  color: #94A3B8;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: color 0.2s;
}
.opbar .op-inner { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: center; }
.opbar a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 14px; }
.opbar a:hover { color: #F1F5F9; text-decoration: none; }
.opbar .sep { color: #64748B; opacity: 0.5; }
.opbar .state-word { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.opbar .state-word.ok { color: #22D3B7; text-shadow: 0 0 8px rgba(34, 211, 183, 0.4); }
.opbar .state-word.warn { color: #F5A524; text-shadow: 0 0 8px rgba(245, 165, 36, 0.4); }
.opbar .state-word.down { color: #EF4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
.opbar .op-detail { color: #94A3B8; }
.opbar .op-checked { color: #64748B; font-size: 0.72rem; }
.opbar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #64748B;
  flex: none;
}
.opbar-dot.ok {
  background: #22D3B7;
  box-shadow: 0 0 0 0 rgba(34, 211, 183, 0.7);
  animation: opbar-pulse 2.4s infinite;
}
.opbar-dot.warn { background: #F5A524; }
.opbar-dot.down { background: #EF4444; }
@keyframes opbar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 211, 183, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 211, 183, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 183, 0); }
}

/* Theme toggle switch (sits on the right side of opbar) */
.opbar .theme-toggle {
  display: flex; align-items: center; gap: 8px;
  padding-left: 20px;
  border-left: 1px solid #1F2937;
  margin-left: auto;
  position: absolute;
  right: 24px;
}
.opbar .theme-toggle label {
  color: #64748B;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.opbar .theme-toggle .switch {
  position: relative;
  width: 34px; height: 18px;
  background: #1F2937;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid #2A3548;
}
.opbar .theme-toggle .switch::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #94A3B8;
  transition: transform 0.2s, background 0.2s;
}
body.dark-mode .opbar .theme-toggle .switch {
  background: rgba(20, 181, 179, 0.25);
  border-color: rgba(20, 181, 179, 0.4);
}
body.dark-mode .opbar .theme-toggle .switch::after {
  transform: translateX(16px);
  background: #22D3B7;
  box-shadow: 0 0 8px rgba(34, 211, 183, 0.5);
}

@media (max-width: 720px) {
  .opbar .op-detail { display: none; }
  .opbar .theme-toggle label { display: none; }
}

/* Logo glow when dark */
body.dark-mode .mark-glow {
  filter: drop-shadow(0 0 6px rgba(20, 181, 179, 0.35))
          drop-shadow(0 0 14px rgba(20, 181, 179, 0.15));
}

/* ============================================================
   Tab strip (Overview / Settings / Help)
   Base is #64748B on light border — too muted in dark mode.
   ============================================================ */
body.dark-mode .tab-bar {
  border-bottom-color: var(--border) !important;
}
body.dark-mode .tab-btn {
  color: var(--text-2) !important;
}
body.dark-mode .tab-btn:hover {
  color: var(--teal-hi) !important;
}
body.dark-mode .tab-btn.active {
  color: var(--teal-hi) !important;
  border-bottom-color: var(--teal) !important;
  text-shadow: 0 0 8px rgba(56, 229, 217, 0.35);
}

/* ============================================================
   Execution Lineage slide-out panel
   Base sheet is #FFFFFF. In dark mode the inherited body color
   (~#F1F5F9) was landing on that white sheet — invisible title.
   Recolor the whole sheet to match the dark surface.
   ============================================================ */
body.dark-mode .lin-overlay {
  background: rgba(4, 8, 18, 0.72) !important;
}
body.dark-mode .lin-sheet {
  background: var(--surface) !important;
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.6) !important;
  color: var(--text) !important;
}
body.dark-mode .lin-head h3 {
  color: var(--text) !important;
}
body.dark-mode .lin-close {
  color: var(--text-3) !important;
}
body.dark-mode .lin-close:hover {
  color: var(--text) !important;
}
body.dark-mode .lin-meta {
  color: var(--text-3) !important;
}
body.dark-mode .lin-timeline {
  border-left-color: var(--border-hi) !important;
}
/* Neutral (uncolored) event dot only — the kind-* rules below win. */
body.dark-mode .lin-event::before {
  background: var(--surface) !important;
  border-color: var(--border-hi) !important;
}
/* Restore semantic dot colors on dark bg. Intent was #1E293B (near-black)
   which disappears on the dark surface — swap in a bright slate. Others
   get a slight punch so they read against the darker sheet. */
body.dark-mode .lin-event.kind-intent::before        { background: #E2E8F0 !important; border-color: #E2E8F0 !important; }
body.dark-mode .lin-event.kind-transaction::before   { background: #22D3B7 !important; border-color: #22D3B7 !important; box-shadow: 0 0 0 3px rgba(34, 211, 183, 0.18); }
body.dark-mode .lin-event.kind-refund::before        { background: #F5A524 !important; border-color: #F5A524 !important; }
body.dark-mode .lin-event.kind-execution::before     { background: #A78BFA !important; border-color: #A78BFA !important; }
body.dark-mode .lin-event.kind-webhook::before       { background: #60A5FA !important; border-color: #60A5FA !important; }
body.dark-mode .lin-event.kind-unlock_token::before  { background: #FBBF24 !important; border-color: #FBBF24 !important; }
body.dark-mode .lin-event.kind-audit::before         { background: #94A3B8 !important; border-color: #94A3B8 !important; }
body.dark-mode .lin-event.kind-job::before           { background: #64748B !important; border-color: #64748B !important; }
body.dark-mode .lin-event.kind-execution_event::before {
  background: #38E5D9 !important; border-color: #38E5D9 !important;
  box-shadow: 0 0 0 3px rgba(56, 229, 217, 0.25);
}
/* Kind chip label above each event ("INTENT", "TRANSACTION", "REFUND", ...) */
body.dark-mode .lin-kind { color: var(--text) !important; letter-spacing: 0.06em; }
body.dark-mode .lin-kind {
  color: var(--text-2) !important;
}
body.dark-mode .lin-when {
  color: var(--text-3) !important;
}
body.dark-mode .lin-body {
  color: var(--text) !important;
}
body.dark-mode .lin-body .lin-pair {
  color: var(--text-2) !important;
}
body.dark-mode .lin-body .lin-pair b {
  color: var(--text) !important;
}
body.dark-mode .lin-empty {
  color: var(--text-3) !important;
}

/* Exec-events filter strip inside lineage */
body.dark-mode .exec-events-filter { color: var(--text-2) !important; }
body.dark-mode .exec-events-filter select {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Retry tiles — the numbers and labels use dark slate on light bg */
body.dark-mode .retry-tile {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
}
body.dark-mode .retry-tile-n { color: var(--text) !important; }
body.dark-mode .retry-tile-lbl { color: var(--text-2) !important; }
body.dark-mode .retries-h3 { color: var(--text-2) !important; }
body.dark-mode .retry-row { border-bottom-color: var(--border) !important; }
body.dark-mode .retry-evt { color: var(--text) !important; }
body.dark-mode .retry-attempts { color: var(--text-2) !important; }
body.dark-mode .retry-when { color: var(--text-2) !important; }
body.dark-mode .retry-kind {
  background: var(--surface-hi) !important;
  color: var(--text) !important;
}

/* ============================================================
   Top summary tiles (Settlements Gated / Settled Volume / etc.)
   The big values were hard-coded #1E293B — near-black on dark bg.
   ============================================================ */
body.dark-mode .tile .k { color: var(--text-2) !important; }
body.dark-mode .tile .v { color: var(--text) !important; }
body.dark-mode .tile .v.teal {
  color: var(--teal-hi) !important;
  text-shadow: 0 0 12px rgba(56, 229, 217, 0.25);
}

/* ============================================================
   Execution Insights — flow stages, outcome bar, spark chart
   ("Intents created / Settlements verified / Executions unlocked",
    "Intent outcomes", "Settlements over time")
   ============================================================ */
body.dark-mode .flow-stage {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
body.dark-mode .flow-stage .v { color: var(--text) !important; }
body.dark-mode .flow-stage .k,
body.dark-mode .flow-stage .u { color: var(--text-2) !important; }
body.dark-mode .flow-arrow { color: var(--text-3) !important; }
body.dark-mode .ob-title { color: var(--text) !important; }
body.dark-mode .ob-total { color: var(--text-2) !important; }
body.dark-mode .ob-legend { color: var(--text-2) !important; }
body.dark-mode .ob-legend b { color: var(--text) !important; }
body.dark-mode .sp-stat { color: var(--text-2) !important; }
body.dark-mode .sp-stat b { color: var(--text) !important; }

/* ============================================================
   API & Integration card (First call — gate an execution)
   ============================================================ */
body.dark-mode .api-actions select {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* api-key-box and api-pre are already near-black (#0a0a0a) so they
   already read fine in dark mode — no override needed there. */
body.dark-mode .api-activity {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.dark-mode .api-activity .api-act-item b,
body.dark-mode .api-activity .api-act-item span { color: var(--text) !important; }

body.dark-mode .mem-msg.ok { color: var(--teal-hi) !important; }

/* ============================================================
   Settlement & signing authority
   (Rotate signing credentials, ✅ Ready for settlement execution)
   ============================================================ */
body.dark-mode .rep-note { color: var(--text-2) !important; }

/* ============================================================
   Permissions & grants — used / remaining / cap / expires,
   Authorize refunds from your account
   ============================================================ */
body.dark-mode .grant-row { border-bottom-color: var(--border) !important; }
body.dark-mode .grant-wallet { color: var(--text) !important; }
body.dark-mode .grant-meter { background: var(--surface-mute) !important; }
body.dark-mode .grant-fill { background: var(--teal) !important; box-shadow: 0 0 8px rgba(20, 181, 179, 0.4); }
body.dark-mode .grant-nums { color: var(--text-2) !important; }
body.dark-mode .grant-nums b { color: var(--text) !important; }
body.dark-mode .grant-status.active {
  background: rgba(34, 211, 183, 0.15) !important;
  color: var(--ok) !important;
}
body.dark-mode .grant-status.expired {
  background: var(--surface-mute) !important;
  color: var(--text-3) !important;
}
body.dark-mode .grant-status.revoked {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--down) !important;
}
body.dark-mode .grant-setup { border-top-color: var(--border) !important; }
body.dark-mode .grant-setup-row input {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .grant-banner {
  background: rgba(245, 165, 36, 0.10) !important;
  border-color: rgba(245, 165, 36, 0.35) !important;
  color: #F5A524 !important;
}
body.dark-mode .grant-banner b { color: #F5A524 !important; }

/* ============================================================
   Team & access — member list (emails, invite input, role select)
   ============================================================ */
body.dark-mode .mem-row { border-bottom-color: var(--border) !important; }
body.dark-mode .mem-email { color: var(--text) !important; }
body.dark-mode .mem-you {
  background: rgba(20, 181, 179, 0.15) !important;
  color: var(--teal-hi) !important;
}
body.dark-mode .mem-rolesel,
body.dark-mode .mem-invite select,
body.dark-mode .mem-invite input[type=email] {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .mem-remove {
  background: transparent !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: var(--down) !important;
}
body.dark-mode .mem-remove:hover { background: rgba(239, 68, 68, 0.10) !important; }

/* ============================================================
   FAQ / Help tab — section headings + Q&A blocks
   ============================================================ */
body.dark-mode .faq-card #faqSearch {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.dark-mode .faq-stats { color: var(--text-2) !important; }
body.dark-mode details.faq-cat { border-top-color: var(--border) !important; }
body.dark-mode details.faq-cat > summary { color: var(--text) !important; }
body.dark-mode details.faq-cat > summary::before { color: var(--text-3) !important; }
body.dark-mode .faq-count {
  background: var(--surface-mute) !important;
  color: var(--text-2) !important;
}
body.dark-mode .faq-subtitle { color: var(--text-2) !important; }
body.dark-mode details.faq-q {
  background: var(--surface-mute) !important;
  border-color: transparent !important;
}
body.dark-mode details.faq-q[open] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
body.dark-mode details.faq-q > summary { color: var(--text) !important; }
body.dark-mode details.faq-q > summary::before { color: var(--teal-hi) !important; }
body.dark-mode .faq-a { color: var(--text-2) !important; }
body.dark-mode .faq-a code {
  background: rgba(20, 181, 179, 0.10) !important;
  color: var(--teal-hi) !important;
}
body.dark-mode .tile .u { color: var(--text-3) !important; }

/* ============================================================
   Event feed rows (action name + trace meta + amount + status)
   ============================================================ */
body.dark-mode .feed-sub { color: var(--text-2) !important; }
body.dark-mode .ev-main .act { color: var(--text) !important; }
body.dark-mode .ev-main .meta { color: var(--text-3) !important; }
body.dark-mode .ev-right .amt { color: var(--text) !important; }
body.dark-mode .ev-right .st.ok { color: var(--ok) !important; }
body.dark-mode .ev-right .st.gated { color: var(--warn) !important; }
body.dark-mode .ev-right .st.fail { color: var(--down) !important; }
body.dark-mode .ev-right .st.idle { color: var(--text-3) !important; }

/* Expanded intent detail card under an event row */
body.dark-mode .ev-detail {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
}
body.dark-mode .ev-detail dt { color: var(--text-2) !important; }
body.dark-mode .ev-detail dd { color: var(--text) !important; }
body.dark-mode .ev-detail dd.muted { color: var(--text-3) !important; }
body.dark-mode .ev-detail .copy {
  background: var(--surface) !important;
  border-color: var(--border-hi) !important;
  color: var(--teal-hi) !important;
}
body.dark-mode .ev-detail .copy:hover { background: var(--surface-hi) !important; }

/* View lineage / reload buttons on the detail card */
body.dark-mode .ev-lineage-btn,
body.dark-mode .ev-reload-btn {
  background: var(--surface) !important;
  border-color: var(--teal) !important;
  color: var(--teal-hi) !important;
}
body.dark-mode .ev-lineage-btn:hover,
body.dark-mode .ev-reload-btn:hover {
  background: rgba(20, 181, 179, 0.10) !important;
}

/* Refund button on event rows */
body.dark-mode .ev-refund {
  background: rgba(20, 181, 179, 0.10) !important;
  border-color: rgba(20, 181, 179, 0.35) !important;
  color: var(--teal-hi) !important;
}
body.dark-mode .ev-refund:hover { background: rgba(20, 181, 179, 0.18) !important; }

/* ============================================================
   Feed filter bar (search, dropdown, dates, max $)
   Base was white bg + slate text. Bring it into the dark surface.
   ============================================================ */
body.dark-mode .feed-filter {
  background: var(--surface-mute) !important;
  border-color: var(--border) !important;
}
body.dark-mode .feed-filter label { color: var(--text-2) !important; }
body.dark-mode .feed-filter input,
body.dark-mode .feed-filter select {
  background: var(--surface) !important;
  border-color: var(--border-hi) !important;
  color: var(--text) !important;
}
body.dark-mode .feed-filter .ff-clear {
  background: var(--surface) !important;
  border-color: var(--border-hi) !important;
  color: var(--text-2) !important;
}
body.dark-mode .feed-filter .ff-clear:hover { background: var(--surface-hi) !important; }
body.dark-mode .feed-filter .ff-count { color: var(--text-3) !important; }
body.dark-mode .feed-filter .ff-count b { color: var(--text) !important; }

/* ============================================================
   Accounts list (micopeia_main, acme_co, ...)
   The .id was #1E293B — invisible on dark surface.
   ============================================================ */
body.dark-mode .acct .id { color: var(--text) !important; }
body.dark-mode .acct .chev { color: var(--text-3) !important; }

/* Generic muted-slate rescues for any remaining #64748B / #475569
   labels that ride on the intent detail surface. */
body.dark-mode .tile .label,
body.dark-mode .tile-lbl,
body.dark-mode .kv-label,
body.dark-mode .field-label,
body.dark-mode .subtle,
body.dark-mode .meta {
  color: var(--text-2) !important;
}
body.dark-mode .tile .value,
body.dark-mode .tile-val,
body.dark-mode .kv-value,
body.dark-mode .field-value {
  color: var(--text) !important;
}