/* ==========================================================================
   Onyx Next: the app shell and component layer.
   Loaded after styles.css. It owns the tokens for both themes, the shell (sidebar, top bar, page header)
   and the shared components (panels, buttons, forms, tables, badges, KPI tiles, drawers). styles.css keeps
   the page-specific rules; anything here wins by order, not by !important.

   Direction: dark-first onyx surfaces with a true light theme, one accent (Pulse Blue, from the logo),
   Geist and Geist Mono, hairline depth instead of shadows, radii 8 / 12 / 16. Status is never colour alone:
   every status carries a word. "Too little traffic" and "No data" are never green.
   Structural reference: Linear (awesome-design-md). An approximation, not an official system.
   ========================================================================== */

/* ---------- Tokens: light (default) ---------- */
:root {
  --canvas: #f5f6f9;
  --s1: #ffffff;
  --s2: #f0f2f6;
  --s3: #e7eaf0;
  --s4: #dde1e9;
  --hairline: #e2e6ed;
  --hairline-strong: #cdd3de;
  --hairline-hi: #b4bccb;
  --edge-hi: rgba(255, 255, 255, 0);

  --ink: #0b0f17;
  --ink-2: #3a4456;
  --ink-3: #596477;
  --ink-4: #8b95a6;

  --accent: #1766d4;
  --accent-hover: #145fc8;
  --accent-press: #104fa6;
  --accent-ink: #ffffff;
  --accent-soft: rgba(23, 102, 212, 0.1);
  --accent-line: rgba(23, 102, 212, 0.4);
  --focus: #1766d4;

  --ok: #0a6e43;
  --ok-soft: rgba(11, 122, 74, 0.1);
  --warn: #885306;
  --warn-soft: rgba(148, 90, 6, 0.1);
  --crit: #b62435;
  --crit-soft: rgba(200, 40, 58, 0.09);
  --low: #596477;
  --low-soft: rgba(89, 100, 119, 0.1);

  --c1: #1766d4;
  --c2: #5aa6ff;
  --c3: #6c7a91;
  --c4: #a3adbf;
  --grid: rgba(11, 15, 23, 0.08);

  --shadow-pop: 0 18px 44px rgba(20, 32, 60, 0.18);
  --scrim: rgba(12, 18, 32, 0.38);

  --r-ctl: 8px;
  --r-panel: 12px;
  --r-frame: 16px;
  --sidebar-w: 248px;
  --topbar-h: 56px;

  /* The app's long-standing token names read from the ladder above, so every page follows the theme. */
  --bg: var(--canvas);
  --panel: var(--s1);
  --panel-bg: var(--s1);
  --panel-strong: var(--s2);
  --panel-border: var(--hairline);
  --text: var(--ink);
  --muted: var(--ink-3);
  --accent-strong: #114ea3;
  --accent-glow: rgba(23, 102, 212, 0.16);
  --accent-warm-soft: var(--accent-soft);
  --teal: var(--ok);
  --success: var(--ok);
  --warning: var(--warn);
  --danger: var(--crit);
  --focus-ring: var(--focus);
  --control-border: var(--hairline-strong);
  --shadow: none;
  --radius: var(--r-panel);
  --radius-sm: var(--r-ctl);
  --sidebar-bg: var(--s1);
  --sidebar-border: var(--hairline);
  --sidebar-text: var(--ink-2);
  --sidebar-text-active: var(--ink);
  --sidebar-hover: var(--s2);
  --sidebar-active-bg: var(--s3);
  color-scheme: light;
}

/* ---------- Tokens: dark ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #080a0f;
  --s1: #0d1118;
  --s2: #131822;
  --s3: #1a202c;
  --s4: #212837;
  --hairline: #1d2431;
  --hairline-strong: #2b3547;
  --hairline-hi: #3a4660;
  --edge-hi: rgba(255, 255, 255, 0.05);

  --ink: #eef1f6;
  --ink-2: #b9c2d2;
  --ink-3: #8c97ab;
  --ink-4: #5d697e;

  --accent: #3d9bff;
  --accent-hover: #67b1ff;
  --accent-press: #2b86ea;
  --accent-ink: #04101f;
  --accent-soft: rgba(61, 155, 255, 0.14);
  --accent-line: rgba(61, 155, 255, 0.42);
  --focus: #7cc0ff;

  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.13);
  --warn: #f5b53d;
  --warn-soft: rgba(245, 181, 61, 0.14);
  --crit: #ff6b78;
  --crit-soft: rgba(255, 107, 120, 0.14);
  --low: #8c97ab;
  --low-soft: rgba(140, 151, 171, 0.12);

  --c1: #3d9bff;
  --c2: #8fd0ff;
  --c3: #b9c2d2;
  --c4: #6f7c93;
  --grid: rgba(185, 194, 210, 0.09);

  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  --scrim: rgba(3, 5, 9, 0.66);

  --accent-strong: #67b1ff;
  --accent-glow: rgba(61, 155, 255, 0.2);
  --purple: #b79cf0;
  --bg-soft: rgba(255, 255, 255, 0.06);
}

/* ---------- Base ---------- */
html { background: var(--canvas); }
body {
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num, .mono-cell, .pay-amount, .pay-txn-id, code, kbd, pre { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }
* { scrollbar-width: thin; scrollbar-color: var(--hairline-hi) transparent; }
.ph, .ph-fill { font-size: 1.15em; vertical-align: -0.18em; flex: none; line-height: 1; }
kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; text-align: center; font-size: 11px;
  background: var(--s2); border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 6px; color: var(--ink-2);
}

/* ==========================================================================
   Shell: sidebar
   ========================================================================== */
.app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); background: var(--canvas); }
.sidebar {
  height: 100vh; height: 100dvh; padding: 12px 12px 14px; gap: 12px;
  background: var(--s1); border-right: 1px solid var(--hairline);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 40px; }
/* Emblem crop of the existing logo poster; stands in until design supplies a vector mark. */
.sidebar-brand::before {
  content: ""; width: 28px; height: 28px; flex: none; border-radius: var(--r-ctl);
  background: #05070b url("/assets/logo-onyx-insights.jpg") no-repeat; background-size: 101px auto; background-position: -37px -13px;
  border: 1px solid var(--hairline-strong);
}
.sidebar-brand .brand-logo-img { display: none; }
.sidebar-brand .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.sidebar-brand .brand-name small { display: block; font-weight: 400; font-size: 11.5px; letter-spacing: 0; color: var(--ink-3); margin-top: 1px; }

.nav-search-wrap { position: relative; }
.nav-search-wrap::before {
  content: "\e30c"; font-family: "Phosphor"; font-size: 15px; color: var(--ink-3);
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none;
}
.nav-search-wrap::after {
  content: "\2318K"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 1px 6px; border: 1px solid var(--hairline-strong); border-radius: 6px; background: var(--s1);
}
.nav-search-wrap:focus-within::after { opacity: 0; }
html[data-kbd="ctrl"] .nav-search-wrap::after { content: "Ctrl K"; }
html[data-kbd="ctrl"] .sidebar .nav-search, html[data-kbd="ctrl"] .nav-search { padding-right: 62px; }
.sidebar .nav-search, .nav-search {
  min-height: 36px; padding: 7px 44px 7px 33px; font-size: 13.5px; color: var(--ink);
  background: var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl);
}
.sidebar .nav-search::placeholder, .nav-search::placeholder { color: var(--ink-3); }
.sidebar .nav-search:hover { border-color: var(--hairline-hi); }
.sidebar .nav-search:focus { background: var(--s2); border-color: var(--accent-line); outline: 2px solid var(--focus); outline-offset: 0; }

.sidebar-nav { gap: 2px; padding-right: 2px; }
.nav-pinned { border-bottom: 1px solid var(--hairline); margin-bottom: 8px; padding-bottom: 8px; }
.nav-group-label, .nav-group-label.is-flat {
  padding: 8px 10px 4px; margin-top: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3);
}
.sidebar .nav-group-label, .sidebar .nav-group-label.is-flat:hover { color: var(--ink-3); background: none; }
.sidebar .nav-group-label:hover { color: var(--ink); background: none; }
.nav-group-label { justify-content: space-between; }
.nav-chev { order: 2; color: var(--ink-3); width: 12px; height: 12px; font-size: 0.65rem; }
.nav-group-items { padding-left: 0; gap: 1px; }
.nav-item, .sidebar .nav-item {
  position: relative; min-height: 34px; padding: 7px 10px; gap: 10px; font-size: 13.5px; font-weight: 450;
  border: 0; border-radius: var(--r-ctl); color: var(--ink-2); background: transparent;
  transition: background 0.12s, color 0.12s;
}
.nav-icon, .sidebar .nav-icon { width: 17px; color: var(--ink-3); }
.nav-icon svg { stroke-width: 1.6; }
.nav-item:hover, .sidebar .nav-item:hover { background: var(--s2); color: var(--ink); border-left-color: transparent; }
.nav-item.active, .sidebar .nav-item.active { background: var(--s3); color: var(--ink); font-weight: 500; border-left-color: transparent; }
.nav-item.active .nav-icon, .sidebar .nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item .nav-desc { color: var(--ink-3); font-size: 11.5px; }
.nav-item.nav-connect:not(.active) { color: var(--accent); }
.nav-item.nav-connect:not(.active) .nav-icon { color: var(--accent); }
.nav-enterprise-badge { background: var(--accent); color: var(--accent-ink); border-radius: 6px; }

.sidebar-account { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); }
.account-menu-trigger {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.account-menu-trigger:hover { background: var(--s2); }
.account-avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600;
}
.account-menu-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.account-menu-text strong { font-size: 13px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-text .small-meta { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-popover {
  background: var(--s2); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); color: var(--ink);
  box-sizing: border-box; width: min(300px, var(--sidebar-w)); max-width: var(--sidebar-w); min-width: 0; overflow-wrap: anywhere;
}
.account-menu-link { color: var(--ink-2); }
.account-menu-link:hover { background: var(--s3); color: var(--ink); }
.nav-flyout { background: var(--s2); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop); color: var(--ink); }

/* ==========================================================================
   Shell: top bar and page header
   ========================================================================== */
.content { background: var(--canvas); min-width: 0; }
.shell-bar {
  position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h); display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap; padding: 8px 24px;
  min-width: 0; container-type: inline-size; container-name: shellbar;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--hairline); box-shadow: none;
}
.shell-context { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.shell-context-label { flex: none; color: var(--ink-3); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.shell-workspace-name { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; font-weight: 550; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-env-badge { flex: none; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--s3); color: var(--ink-2); border: 1px solid var(--hairline-strong); }
.shell-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.shell-actions > * { white-space: nowrap; }
.shell-updated { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.shell-timerange {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--hairline-strong); background: var(--s1); color: var(--ink-2);
}
.shell-timerange:hover { border-color: var(--hairline-hi); color: var(--ink); }
.shell-theme-btn, .shell-refresh-btn { min-width: 36px; padding: 0 10px; }
.shell-theme-btn .ph::before { content: "\e472"; }                                  /* sun: shown in dark, offers light */
html[data-theme="light"] .shell-theme-btn .ph::before { content: "\e330"; }          /* moon: shown in light, offers dark */
.shell-back-btn { border-color: transparent; background: transparent; }

/* The content column: a full-width sticky top bar, then padded pages. */
.content { padding: 0; gap: 0; }
.content > .section, .content > #page-topbar { width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px; align-content: start; gap: 20px; }
.content > #page-topbar { padding-bottom: 0; }
.content > :is(.trial-banner, .email-verify-banner, .shell-notice):not(.section) { margin: 12px 24px 0; }
.shell-timerange svg { left: 12px; color: var(--ink-3); }
.shell-timerange select { width: 11rem; max-width: 11rem; padding-left: 32px; min-height: 36px; border: 0; background: transparent; text-overflow: ellipsis; }

/* Compact top bar: at 125%/150% zoom the CSS viewport shrinks and the time picker
   used to wrap onto a second row. The title ellipsizes, secondary labels collapse,
   and the time picker switches to compact mode so the bar stays one row. */
@container shellbar (max-width: 1100px) {
  .shell-updated,
  .shell-context-label,
  .shell-refresh-btn > span,
  .shell-back-btn > span { display: none; }
  .shell-refresh-btn { padding-inline: 8px; }
  .shell-timerange { min-height: 32px; padding: 0 6px 0 8px; gap: 4px; }
  .shell-timerange svg { left: 6px; width: 14px; height: 14px; }
  .shell-timerange select { width: 8.5rem; max-width: 8.5rem; min-height: 32px; padding-left: 22px; }
}
@container shellbar (max-width: 760px) {
  #ai-analyst-open,
  .shell-env-badge,
  .shell-timerange svg { display: none; }
  .shell-timerange { padding-left: 6px; }
  .shell-timerange select { width: 7.25rem; max-width: 7.25rem; padding-left: 8px; }
}

.email-verify-banner, .trial-banner {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-panel); font-size: 13px; line-height: 1.45;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--ink);
}
.email-verify-banner strong { color: var(--ink); }

/* One header per page. pageHeader() / .section-hero is the page's title block. */
.section-hero.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 4px 0 0; margin: 0 0 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.section-hero.page-header::before, .section-hero.page-header::after { display: none; }
.section-hero.page-header h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); }
.section-hero.page-header p { color: var(--ink-3); margin-top: 4px; max-width: 62ch; font-size: 14px; line-height: 1.5; }
.section-hero-badge { color: var(--ink-2); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: 12px; padding: 2px 10px; border-radius: 99px; background: var(--s2); color: var(--ink-2); border: 1px solid var(--hairline-strong); }
.page-header-aside, .page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .breadcrumb, #page-topbar .breadcrumb { font-size: 28px; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); }
.page-description { color: var(--ink-3); }

/* styles.css still paints a few sidebar details in the old brand amber; the layer takes them back. */
.sidebar .nav-item.active, .sidebar .nav-item.active:hover { border-left-color: transparent; }
.nav-item:focus-visible, .nav-group-label:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sidebar :focus-visible, .mobile-app-header :focus-visible { outline-color: var(--focus) !important; } /* !important: styles.css forces its amber the same way */
.bar.alt { background: linear-gradient(180deg, var(--c2), var(--c1)); }

/* ==========================================================================
   Components
   ========================================================================== */

/* panels: depth by ladder and hairline, no shadow */
.sidebar-card, .panel, .metric-card, .table-card, .tile-card, .widget, .story-card, .integration-card, .chart-card {
  background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
.panel-header { border-bottom-color: var(--hairline); }
.panel-header h3, .panel h3, .panel h2 { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.panel strong { font-weight: 550; }
.small-meta { color: var(--ink-3); }
.insight-item, .dashboard-item { border-color: var(--hairline); }
.dashboard-item:hover, .insight-item:hover { background: var(--s2); }

/* buttons */
.primary-btn, .secondary-btn, .ghost-btn, .link-btn.is-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 500; font-size: 13.5px; line-height: 1.2; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s; box-shadow: none; text-decoration: none;
}
.primary-btn:active, .secondary-btn:active, .ghost-btn:active { transform: translateY(1px) scale(0.99); }
.primary-btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.primary-btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.primary-btn:active { background: var(--accent-press); }
.secondary-btn, .ghost-btn { background: var(--s2); color: var(--ink); border-color: var(--hairline-strong); }
.secondary-btn:hover, .ghost-btn:hover { background: var(--s3); border-color: var(--hairline-hi); color: var(--ink); }
.primary-btn[disabled], .secondary-btn[disabled], .ghost-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.link-btn { color: var(--accent); }
.link-btn:hover { color: var(--accent-hover); }

/* forms */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"], input:not([type]), select, textarea {
  min-height: 36px; padding: 7px 12px; background: var(--s1); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-ctl); font-size: 13.5px;
}
textarea { min-height: 80px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--hairline-hi); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
select option { background: var(--s2); color: var(--ink); }
.ui-field-label, .field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.ui-field-hint { color: var(--ink-3); }

/* status badges: soft tint, a word always present */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap; background: var(--s3); color: var(--ink-2);
}
.badge.good { color: var(--ok); background: var(--ok-soft); }
.badge.warn { color: var(--warn); background: var(--warn-soft); }
.badge.bad { color: var(--crit); background: var(--crit-soft); }
.badge.info { color: var(--accent); background: var(--accent-soft); }
.badge.neutral { color: var(--ink-2); background: var(--low-soft); border: 1px dashed var(--hairline-hi); }
.badge.good::before, .badge.warn::before, .badge.bad::before, .badge.info::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}

/* tables */
:where(.content) table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
:where(.content) table th {
  text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 9px 16px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap; background: var(--s1);
}
:where(.content) table td { padding: 10px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--ink); }
:where(.content) table tbody tr:last-child td { border-bottom: 0; }
:where(.content) table tbody tr:hover td { background: var(--s2); }

/* KPI tiles */
.kpi-tile { background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 var(--edge-hi); padding: 16px; }
.kpi-tile-label { color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.kpi-tile-value {
  font-family: var(--font-body); font-size: 30px; line-height: 1.1; letter-spacing: -0.035em; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--ink);
}
.kpi-tile .kpi-tile-delta:not(.good):not(.warn):not(.bad), .metric-delta:not(.good):not(.warn):not(.bad) { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3); }
.kpi-tile-bar { background: var(--s3); }
.kpi-tile-delta.good, .kpi-tile-delta.up-good { color: var(--ok); }
.kpi-tile-delta.bad, .kpi-tile-delta.up-bad { color: var(--crit); }

/* overlays */
#ai-analyst-dialog, .feature-settings-drawer, .resource-drawer, .logs-rules-drawer {
  background: var(--s1); color: var(--ink); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-pop);
}
#ai-analyst-dialog header p { color: var(--ink-3); }
.resource-drawer-backdrop, .mobile-nav-overlay { background: var(--scrim); }

/* ==========================================================================
   Shared page primitives (OnyxNext in ui.js draws these): status, chips, provenance, trends, charts,
   segmented controls, tabs, callouts, empty states, lists, popovers.
   ========================================================================== */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5;
  white-space: nowrap; border: 1px solid transparent;
}
.status .ph, .status .ph-fill { font-size: 14px; vertical-align: 0; }
.status.is-ok { color: var(--ok); background: var(--ok-soft); }
.status.is-warn { color: var(--warn); background: var(--warn-soft); }
.status.is-crit { color: var(--crit); background: var(--crit-soft); }
.status.is-low { color: var(--ink-2); background: var(--low-soft); border: 1px dashed var(--hairline-hi); }   /* dashed: unknown, not healthy */
.status.is-none { color: var(--ink-3); background: transparent; border: 1px dashed var(--hairline-strong); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; background: var(--s2); border: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 12px; line-height: 1.5;
}
.chip.mono, .chip .mono { font-family: var(--font-mono); font-size: 11.5px; }
.chip--accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
/* provenance chip: says how a number was counted (one counting rule, same on every page) */
.prov {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 6px; border: 1px dashed var(--hairline-hi);
  color: var(--ink-3); font-size: 11.5px; cursor: help; background: transparent;
}
.prov:hover { color: var(--ink); border-color: var(--accent-line); }
.pop { position: relative; display: inline-flex; }
.pop-card {
  position: absolute; z-index: 25; top: calc(100% + 8px); left: 0; width: 300px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--s4); border: 1px solid var(--hairline-hi); border-radius: var(--r-panel); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.pop:hover .pop-card, .pop:focus-within .pop-card { opacity: 1; visibility: visible; transform: none; }
.pop.is-dismissed .pop-card { opacity: 0; visibility: hidden; }

.delta { font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
.delta.up-bad, .delta.down-bad { color: var(--crit); }
.delta.up-good, .delta.down-good { color: var(--ok); }
.delta.flat { color: var(--ink-3); }
.spark { width: 100%; height: 30px; overflow: visible; display: block; }
.spark polyline { fill: none; stroke: var(--c1); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark .area { fill: var(--accent-soft); stroke: none; }
.spark.is-crit polyline { stroke: var(--crit); } .spark.is-crit .area { fill: var(--crit-soft); }
.spark.is-warn polyline { stroke: var(--warn); } .spark.is-warn .area { fill: var(--warn-soft); }
.spark.is-low polyline { stroke: var(--low); stroke-dasharray: 3 3; } .spark.is-low .area { fill: transparent; }

.nx-chart { position: relative; width: 100%; }
.nx-chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.nx-chart .gridline { stroke: var(--grid); stroke-width: 1; }
.nx-chart .axis { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; }
.nx-chart .line-1 { fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linejoin: round; }
.nx-chart .line-2 { fill: none; stroke: var(--crit); stroke-width: 1.8; stroke-linejoin: round; }
.nx-chart .cursor { stroke: var(--hairline-hi); stroke-dasharray: 3 3; }
.chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -110%); padding: 8px 10px; border-radius: var(--r-ctl); background: var(--s4);
  border: 1px solid var(--hairline-hi); font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-pop); opacity: 0; transition: opacity 0.1s; z-index: 3;
}
.chart-tip.is-on { opacity: 1; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 2px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c1); }
.legend i.crit { background: var(--crit); }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--s2); border: 1px solid var(--hairline); border-radius: 10px; }
.seg button { min-height: 28px; padding: 0 12px; border: 0; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; font-weight: 500; font-size: 13px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--s4); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; padding: 10px 2px 11px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-weight: 500; font-size: 13.5px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.tabs .badge { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; background: var(--s3); color: var(--ink-2); border: 0; }

.callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-panel); border: 1px solid var(--hairline-strong); background: var(--s2); align-items: flex-start; color: var(--ink); }
.callout .ph, .callout .ph-fill { font-size: 18px; margin-top: 1px; }
.callout.is-info { border-color: var(--accent-line); background: var(--accent-soft); } .callout.is-info > .ph, .callout.is-info > .ph-fill { color: var(--accent); }
.callout.is-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); } .callout.is-warn > .ph, .callout.is-warn > .ph-fill { color: var(--warn); }
.callout.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: var(--crit-soft); } .callout.is-crit > .ph, .callout.is-crit > .ph-fill { color: var(--crit); }
.callout.is-low { border-style: dashed; border-color: var(--hairline-hi); }

.nx-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 32px 24px; }
.nx-empty > .ph, .nx-empty > .ph-fill { font-size: 28px; color: var(--ink-3); }
.nx-empty p { color: var(--ink-3); max-width: 52ch; }
.skeleton { background: linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%); background-size: 200% 100%; border-radius: 6px; animation: nx-shimmer 0.8s linear infinite; min-height: 12px; }
@keyframes nx-shimmer { to { background-position: -200% 0; } }
.nx-list { display: flex; flex-direction: column; }
.nx-list > * { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.nx-list > *:last-child { border-bottom: 0; }
.nx-code { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-panel); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; overflow: auto; }
.nx-code pre { margin: 0; padding: 12px 14px; font-family: inherit; }
.tok-k { color: var(--accent); } .tok-s { color: var(--ok); } .tok-n { color: var(--warn); } .tok-c { color: var(--ink-3); }

/* ==========================================================================
   Responsive: the existing mobile drawer stays; it just takes the new surfaces
   ========================================================================== */
@media (max-width: 1100px) {
  /* styles.css turns the sidebar into an off-canvas drawer here; the layer must not put the column back */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .content { padding: 0; }
  .shell-bar { padding: 8px 16px; }
  .nav-item.active::before { left: -12px; }
  .mobile-app-header { background: var(--s1); border-bottom: 1px solid var(--hairline); color: var(--ink); }
  .mobile-app-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .mobile-nav-toggle, .mobile-nav-close { color: var(--ink); }
}
@media (max-width: 640px) {
  .shell-bar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .shell-actions { margin-left: 0; width: 100%; flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; }
  .shell-actions .shell-timerange { flex: 1 1 150px; min-height: 44px; padding: 0 10px 0 12px; gap: 8px; }
  .shell-timerange svg { display: block; width: 15px; height: 15px; left: 12px; }
  .shell-timerange select { width: auto; max-width: 100%; min-height: 44px; padding-left: 32px; }
  #ai-analyst-open { display: inline-flex; }
  .shell-env-badge:not(.is-hidden) { display: inline-flex; }
  .shell-refresh-btn > span { display: inline; }
  .shell-back-btn span { display: none; }
  .shell-back-btn { min-width: 44px; padding: 0 12px; }
  .shell-context-label { display: none; }
  .content > .section, .content > #page-topbar { padding: 16px 12px; gap: 16px; }
  .content > :is(.trial-banner, .email-verify-banner, .shell-notice):not(.section) { margin: 8px 12px 0; flex-wrap: wrap; }
  .section-hero.page-header h2, .topbar .breadcrumb, #page-topbar .breadcrumb { font-size: 24px; }
  .shell-updated { display: none; }
  /* touch targets: 44px minimum */
  .primary-btn, .secondary-btn, .ghost-btn, .nav-item, .sidebar .nav-item, .sidebar .nav-search, .nav-group-label, .account-menu-trigger, .shell-timerange, .shell-timerange select,
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"],
  input[type="date"], input[type="datetime-local"], input:not([type]), select, .seg button, .tabs button, summary { min-height: 44px; }
  .shell-theme-btn, .shell-refresh-btn { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Dark theme: hard-coded light colours in styles.css that the tokens cannot reach
   (found by scanning every rule for light fills, dark text and light borders).
   ========================================================================== */
html[data-theme="dark"] .primary-btn, html[data-theme="dark"] .account-avatar, html[data-theme="dark"] .nav-enterprise-badge,
html[data-theme="dark"] .guardian-chip.is-selected, html[data-theme="dark"] .guardian-chip:has(input:checked) { color: var(--accent-ink); }
html[data-theme="dark"] .provider-badge.aws { color: var(--ink); }
html[data-theme="dark"] .provider-badge.gcp, html[data-theme="dark"] input.toggle-input::before,
html[data-theme="dark"] .security-qr svg { background-color: var(--s2); }
html[data-theme="dark"] .trial-banner-warning { color: var(--ink); }
html[data-theme="dark"] .ui-field-required { color: #ff9aa4; }
html[data-theme="dark"] .badge.info, html[data-theme="dark"] .trace-inline-link, html[data-theme="dark"] .trace-kind-chip.kind-server { color: #8fc3ff; }
html[data-theme="dark"] .trace-kind-chip { color: var(--ink-2); background-color: var(--s3); }
html[data-theme="dark"] .trace-kind-chip.kind-client { color: #7fe3d6; }
html[data-theme="dark"] .trace-kind-chip.kind-producer, html[data-theme="dark"] .trace-kind-chip.kind-consumer { color: #c3adf5; }
html[data-theme="dark"] .trace-span-error-msg, html[data-theme="dark"] .trace-status-message { color: #ff9aa4; }
html[data-theme="dark"] .trace-stack, html[data-theme="dark"] .topo-control:disabled, html[data-theme="dark"] .auth-password-meter { background-color: var(--s3); }
html[data-theme="dark"] .logs-footer .logs-tail-note { color: var(--warn); }
html[data-theme="dark"] .topo-summary-pill.good, html[data-theme="dark"] .a15-status.a15-tone-good, html[data-theme="dark"] .svc-cat-score.good, html[data-theme="dark"] .svc-cat-ready { color: var(--ok); }
html[data-theme="dark"] .topo-summary-pill.bad, html[data-theme="dark"] .a15-status.a15-tone-bad { color: var(--crit); }
html[data-theme="dark"] .a15-status.a15-tone-warn, html[data-theme="dark"] .svc-cat-score.warn { color: var(--warn); }
html[data-theme="dark"] .topo-control:hover { border-color: var(--hairline-hi); }
html[data-theme="dark"] .topo-map-scroll { background: radial-gradient(circle, rgba(185, 194, 210, 0.1) 1px, transparent 1px) 0 0 / 22px 22px, var(--s1); }
html[data-theme="dark"] .topo-node-status text { fill: var(--s1); }
html[data-theme="dark"] .sa-sample-banner { background-color: var(--warn-soft); color: var(--warn); }
html[data-theme="dark"] .badge.sa-sample-badge { color: var(--warn); }
html[data-theme="dark"] .a14-fields input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .a14-fields select,
html[data-theme="dark"] .studio-builder input, html[data-theme="dark"] .studio-builder select, html[data-theme="dark"] .email-verified-card { background-color: var(--s1); color: var(--ink); }
html[data-theme="dark"] #ai-analyst-dialog, html[data-theme="dark"] #ai-analyst-dialog header p, html[data-theme="dark"] #ai-analyst-dialog button:not(.ai-demo-question) { color: var(--ink); }
html[data-theme="dark"] #ai-analyst-dialog, html[data-theme="dark"] #ai-analyst-form textarea, html[data-theme="dark"] #ai-analyst-dialog button { border-color: var(--hairline-strong); }
html[data-theme="dark"] #ai-analyst-form textarea { background-color: var(--s2); color: var(--ink); }
html[data-theme="dark"] .ai-message { background-color: var(--s2); color: var(--ink); }
html[data-theme="dark"] .ai-message.user { background-color: var(--accent-soft); }

/* The guided Explore demo uses deliberately light fixed colours in styles.css. Keep its cards,
   prompts and action buttons legible when the signed-in app is using the dark theme. */
html[data-theme="dark"] .demo-walkthrough { border-color: var(--hairline-strong); background: linear-gradient(145deg, var(--s1) 0%, var(--s2) 58%, var(--s1) 100%); }
html[data-theme="dark"] .demo-walkthrough-hero h2, html[data-theme="dark"] .demo-industry-heading h3, html[data-theme="dark"] .qs-demo-questions h3 { color: var(--ink); }
html[data-theme="dark"] .demo-walkthrough-hero p, html[data-theme="dark"] .demo-tour-step p, html[data-theme="dark"] .demo-industry-heading p, html[data-theme="dark"] .demo-industry-card > p, html[data-theme="dark"] .qs-demo-questions p { color: var(--ink-2); }
html[data-theme="dark"] .demo-eyebrow { color: var(--accent) !important; }
html[data-theme="dark"] .demo-data-note { border-left-color: var(--accent); background-color: var(--accent-soft); color: var(--ink-2); }
html[data-theme="dark"] .demo-tour-progress-card, html[data-theme="dark"] .demo-tour-step, html[data-theme="dark"] .demo-industry-card, html[data-theme="dark"] .demo-oracle-question-library { border-color: var(--hairline-strong); background-color: var(--s1); }
html[data-theme="dark"] .demo-tour-progress-card strong, html[data-theme="dark"] .demo-tour-step h3, html[data-theme="dark"] .demo-industry-card-head, html[data-theme="dark"] .demo-oracle-question-library summary { color: var(--ink); }
html[data-theme="dark"] .demo-tour-step.is-complete { border-color: var(--ok); background-color: var(--ok-soft); }
html[data-theme="dark"] .demo-tour-number, html[data-theme="dark"] .demo-industry-count { background-color: var(--s3); color: var(--accent); }
html[data-theme="dark"] .demo-tour-check { color: var(--ok); }
html[data-theme="dark"] .demo-industry-icon { background-color: var(--s3); color: var(--accent); }
html[data-theme="dark"] .demo-feature-tags span { border-color: var(--hairline-strong); background-color: var(--s2); color: var(--ink-2); }
html[data-theme="dark"] .qs-demo-questions { border-color: var(--hairline-strong); background: linear-gradient(120deg, var(--s1), var(--s2)); }
html[data-theme="dark"] .qs-demo-question { border-color: var(--hairline-strong); background-color: var(--s1); color: var(--ink); }
html[data-theme="dark"] .qs-demo-question span:last-child { color: var(--accent); }
html[data-theme="dark"] .qs-demo-question:hover, html[data-theme="dark"] .qs-demo-question:focus-visible { border-color: var(--hairline-hi); background-color: var(--s3); }
html[data-theme="dark"] .ai-demo-question-group h3 { color: var(--ink-2); }
html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question { border-color: var(--hairline-strong) !important; background-color: var(--s2) !important; color: var(--ink) !important; }
html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question:hover, html[data-theme="dark"] #ai-analyst-dialog .ai-demo-question:focus-visible { border-color: var(--hairline-hi) !important; background-color: var(--s3) !important; }

/* Translucent black fills and borders (hover states, tracks, input wells) are invisible on a dark surface;
   these are the same rules with light-on-dark equivalents. Found by scanning every rule in styles.css. */
html[data-theme="dark"] .auth-overlay-back:hover { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .auth-form input { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .explain-btn { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .feature-settings-field input[type="text"], html[data-theme="dark"] .feature-settings-field input[type="number"], html[data-theme="dark"] .feature-settings-field select, html[data-theme="dark"] .feature-settings-field textarea { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] #overview .integration-pill { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-waterfall-track { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .kpi-nav-card { border: 1px solid rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .service-item { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .service-item { border: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .builder-row-stack input, html[data-theme="dark"] .builder-row-stack textarea { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .filter-row select, html[data-theme="dark"] .filter-row input, html[data-theme="dark"] .builder-row select, html[data-theme="dark"] .builder-row input, html[data-theme="dark"] .builder-row textarea { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .log-item, html[data-theme="dark"] .insight-item, html[data-theme="dark"] .rum-card, html[data-theme="dark"] .cloud-card, html[data-theme="dark"] .dashboard-item { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .log-item, html[data-theme="dark"] .insight-item, html[data-theme="dark"] .rum-card, html[data-theme="dark"] .cloud-card, html[data-theme="dark"] .dashboard-item { border: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .dashboard-item:hover, html[data-theme="dark"] .insight-item:hover { background-color: var(--s2); }
html[data-theme="dark"] .explain-btn:hover { background-color: var(--accent-soft); }
html[data-theme="dark"] .api-key { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .api-key { border: 1px solid rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .code-block { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .code-block { border: 1px solid rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .host-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .resource-bar-track { background-color: rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .vital-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .pipeline-stage { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .dora-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .threat-signal { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .model-card { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .topology-node { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .business-kpi-card { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .funnel-step-bar-track { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .monitor-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .pattern-cluster { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .pay-bar-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .resource-drawer-close:hover { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .resource-json-view mark { background-color: rgba(245, 181, 61, 0.32); }
html[data-theme="dark"] .kpi-tile-bar { background-color: rgba(255, 255, 255, 0.11); }
html[data-theme="dark"] .badge.neutral { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .auth-panel .auth-overlay-back:hover, html[data-theme="dark"] .auth-panel .auth-overlay-back:focus-visible { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .auth-password-toggle:hover { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .onb-code-bar { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .trace-dist-bar:hover { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .trace-chip { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .trace-detail-note { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .trace-span-toggle:hover { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-collapsed-count { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-kind-chip { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .trace-detail .trace-waterfall-track { background-color: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .trace-critical-btn[aria-pressed="true"] { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .trace-panel-count { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .trace-attr-table th, html[data-theme="dark"] .trace-attr-table td { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .trace-span-logs li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .logs-chip-remove:hover, html[data-theme="dark"] .logs-chip-remove:focus-visible { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .metrics-key { background-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .sa-apdex-track { background-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .sa-volume-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .a14-hbar-track { background-color: rgba(255, 255, 255, 0.09); }
html[data-theme="dark"] .a15-form input:not([type="hidden"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] .a15-form select, html[data-theme="dark"] .a15-form textarea, html[data-theme="dark"] .a15-mono-input { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .a15-key-code { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .studio-error { background-color: var(--crit-soft); }
html[data-theme="dark"] .studio-sql pre { background-color: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] #ai-analyst-dialog::backdrop { background-color: rgba(3, 5, 9, 0.66); }
html[data-theme="dark"] .shell-timerange select { background-color: transparent; }
html[data-theme="dark"] .bar.alt { background: linear-gradient(180deg, var(--c2), var(--c1)); }