/* ============================================================
   DATANITIV x TP BARC — palette and effects experiment
   Branch-only visual layer. It intentionally leaves layout,
   modal/drawer state, sticky tables, and application logic to
   styles.css and command-center.css.
   ============================================================ */

/* ---------- 1. TP BARC design tokens ---------- */

:root {
  --font-ui: "Switzer", "Manrope", "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-heading: "Unbounded", "Rajdhani", "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;

  --barc-void: #04050d;
  --barc-void-2: #070a18;
  --barc-ink: #eaf0ff;
  --barc-dim: #8b96bc;
  --barc-faint: #7e89ae;
  --barc-magenta: #ff2e96;
  --barc-violet: #8b5cf6;
  --barc-cyan: #4de1ff;
  --barc-success: #3dffa8;
  --barc-gradient: linear-gradient(100deg, #ff2e96 0%, #8b5cf6 52%, #4de1ff 100%);
  --barc-gradient-soft: linear-gradient(135deg, rgba(255, 46, 150, 0.18), rgba(139, 92, 246, 0.1) 54%, rgba(77, 225, 255, 0.14));

  --bg-main: var(--barc-void);
  --bg-page: var(--barc-void-2);
  --bg-panel: rgba(11, 15, 30, 0.84);
  --bg-card: rgba(13, 17, 34, 0.82);
  --bg-card-soft: rgba(17, 22, 43, 0.8);
  --bg-control: rgba(9, 13, 28, 0.88);
  --text-primary: var(--barc-ink);
  --text-secondary: var(--barc-dim);
  --text-muted: var(--barc-faint);
  --text-disabled: #444d6d;
  --border-subtle: rgba(148, 170, 255, 0.14);
  --border-medium: rgba(148, 170, 255, 0.26);
  --border-strong: rgba(191, 204, 255, 0.4);
  --accent-primary: var(--barc-violet);
  --accent-primary-soft: rgba(139, 92, 246, 0.14);
  --accent-primary-glow: rgba(139, 92, 246, 0.28);
  --accent-success: var(--barc-success);
  --accent-success-soft: rgba(61, 255, 168, 0.12);
  --accent-warning: #f6b94a;
  --accent-warning-soft: rgba(246, 185, 74, 0.13);
  --accent-critical: #ff5b7f;
  --accent-critical-soft: rgba(255, 91, 127, 0.14);

  --bg: var(--bg-main);
  --panel: var(--bg-panel);
  --panel-2: var(--bg-card);
  --line: var(--border-subtle);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--barc-cyan);
  --cyan: var(--barc-cyan);
  --magenta: var(--barc-magenta);
  --purple: var(--barc-violet);
  --violet: var(--barc-violet);
  --teal: var(--barc-success);
  --amber: var(--accent-warning);
  --red: var(--accent-critical);
  --glass: rgba(13, 17, 34, 0.55);
  --stripe: rgba(148, 170, 255, 0.035);
  --table-bg: rgba(5, 8, 19, 0.48);
  --th-bg: rgba(17, 22, 43, 0.94);
  --hover-bg: rgba(139, 92, 246, 0.1);
  --modal-mask: rgba(2, 3, 11, 0.78);

  --risk-primary: #ff5b7f;
  --risk-strong: #ff88a2;
  --risk-ink: #ffd9e2;
  --risk-soft: rgba(255, 91, 127, 0.16);
  --risk-wash: rgba(255, 91, 127, 0.09);
  --risk-glow: rgba(255, 91, 127, 0.22);
  --risk-line: rgba(255, 136, 162, 0.48);

  --cc-radius: 14px;
  --cc-radius-sm: 9px;
  --cc-grad-primary: var(--barc-gradient);
  --cc-card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 42%);
  --cc-glow-blue: 0 0 0 1px rgba(148, 170, 255, 0.18), 0 16px 36px -18px rgba(139, 92, 246, 0.58);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 60px rgba(0, 0, 0, 0.38);
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 28px 88px rgba(0, 0, 0, 0.48);
  --cc-shadow-1: var(--shadow-card);
  --cc-shadow-2: var(--shadow-panel);
  --cc-shadow-3: 0 42px 120px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.075);

  --executive-line: var(--border-subtle);
  --executive-line-strong: var(--border-medium);
  --executive-surface: linear-gradient(155deg, rgba(18, 24, 48, 0.88), rgba(8, 12, 27, 0.9) 62%, rgba(5, 7, 18, 0.94));
  --executive-surface-raised: linear-gradient(155deg, rgba(25, 31, 59, 0.94), rgba(12, 16, 35, 0.94) 60%, rgba(7, 9, 22, 0.97));
  --executive-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -22px 42px rgba(0, 0, 0, 0.16);
  --executive-shadow: 0 24px 70px rgba(0, 0, 0, 0.36), 0 8px 24px rgba(0, 0, 0, 0.24), var(--executive-inner-light);
  --executive-hover-shadow: 0 30px 84px rgba(0, 0, 0, 0.48), 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 34px rgba(139, 92, 246, 0.11), var(--executive-inner-light);
}

body.light {
  --font-ui: "Satoshi", "Manrope", "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-heading: "Clash Display", "Rajdhani", "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;

  --barc-void: #fbf9fb;
  --barc-void-2: #f4eef4;
  --barc-ink: #1c0f24;
  --barc-dim: #60506c;
  --barc-faint: #75647e;
  --barc-magenta: #e2007a;
  --barc-violet: #7a2bd0;
  --barc-cyan: #276f8e;
  --barc-success: #0c9a63;
  --barc-gradient: linear-gradient(120deg, #e2007a 0%, #a31bb0 55%, #7a2bd0 100%);
  --barc-gradient-soft: linear-gradient(135deg, rgba(226, 0, 122, 0.11), rgba(163, 27, 176, 0.07) 54%, rgba(122, 43, 208, 0.09));

  --bg-main: #fbf9fb;
  --bg-page: #f4eef4;
  --bg-panel: rgba(255, 255, 255, 0.82);
  --bg-card: rgba(255, 255, 255, 0.78);
  --bg-card-soft: rgba(250, 246, 250, 0.86);
  --bg-control: rgba(255, 255, 255, 0.84);
  --text-primary: var(--barc-ink);
  --text-secondary: var(--barc-dim);
  --text-muted: var(--barc-faint);
  --text-disabled: #b8acbe;
  --border-subtle: rgba(28, 15, 36, 0.09);
  --border-medium: rgba(28, 15, 36, 0.16);
  --border-strong: rgba(28, 15, 36, 0.24);
  --accent-primary: var(--barc-magenta);
  --accent-primary-soft: rgba(226, 0, 122, 0.1);
  --accent-primary-glow: rgba(226, 0, 122, 0.18);
  --accent-success: #087a4d;
  --accent-success-soft: rgba(12, 154, 99, 0.1);
  --accent-warning: #c77800;
  --accent-warning-soft: rgba(199, 120, 0, 0.1);
  --accent-critical: #d6304a;
  --accent-critical-soft: rgba(214, 48, 74, 0.1);

  --bg: var(--bg-main);
  --panel: var(--bg-panel);
  --panel-2: var(--bg-card);
  --line: var(--border-subtle);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--barc-magenta);
  --cyan: var(--barc-cyan);
  --magenta: var(--barc-magenta);
  --purple: var(--barc-violet);
  --violet: var(--barc-violet);
  --teal: #087a4d;
  --amber: var(--accent-warning);
  --red: var(--accent-critical);
  --glass: rgba(255, 255, 255, 0.58);
  --stripe: rgba(28, 15, 36, 0.028);
  --table-bg: rgba(255, 255, 255, 0.82);
  --th-bg: rgba(247, 241, 247, 0.94);
  --hover-bg: rgba(226, 0, 122, 0.055);
  --modal-mask: rgba(28, 15, 36, 0.48);

  --risk-primary: #d6304a;
  --risk-strong: #bd243d;
  --risk-ink: #761426;
  --risk-soft: rgba(214, 48, 74, 0.11);
  --risk-wash: rgba(214, 48, 74, 0.06);
  --risk-glow: rgba(214, 48, 74, 0.12);
  --risk-line: rgba(214, 48, 74, 0.28);

  --cc-grad-primary: var(--barc-gradient);
  --cc-card-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 44%);
  --cc-glow-blue: 0 0 0 1px rgba(226, 0, 122, 0.12), 0 14px 32px -18px rgba(163, 27, 176, 0.26);
  --shadow-card: 0 16px 36px -20px rgba(60, 10, 70, 0.22), 0 3px 10px -6px rgba(60, 10, 70, 0.09);
  --shadow-panel: 0 26px 58px -28px rgba(60, 10, 70, 0.26), 0 8px 20px -14px rgba(60, 10, 70, 0.12);
  --cc-shadow-1: var(--shadow-card);
  --cc-shadow-2: var(--shadow-panel);
  --cc-shadow-3: 0 34px 80px rgba(60, 10, 70, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.84);

  --executive-line: var(--border-subtle);
  --executive-line-strong: var(--border-medium);
  --executive-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(252, 248, 252, 0.78));
  --executive-surface-raised: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(250, 243, 250, 0.88));
  --executive-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --executive-shadow: var(--shadow-card);
  --executive-hover-shadow: 0 24px 52px -24px rgba(60, 10, 70, 0.3), 0 8px 18px -12px rgba(226, 0, 122, 0.15), var(--executive-inner-light);
}

/* ---------- 2. Typography and ambient field ---------- */

body {
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
.topbar h1,
.section-head h2,
.block-head h3,
.brand h1 {
  font-family: var(--font-heading);
  text-wrap: balance;
}

.filter-section h2,
.tabs .tab,
.block-head span,
.source-note,
.date-slicer-head,
thead th,
.freshness-badge,
.active-card-filter {
  font-family: var(--font-mono);
}

body:not(.light) {
  background:
    radial-gradient(980px 620px at 86% -8%, rgba(255, 46, 150, 0.1), transparent 60%),
    radial-gradient(820px 560px at -10% 108%, rgba(77, 225, 255, 0.075), transparent 64%),
    radial-gradient(720px 520px at 54% 48%, rgba(139, 92, 246, 0.055), transparent 66%),
    linear-gradient(145deg, #04050d 0%, #070a18 52%, #03040b 100%) !important;
  background-attachment: fixed !important;
}

body.light {
  background:
    radial-gradient(920px 580px at 88% -8%, rgba(226, 0, 122, 0.085), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(122, 43, 208, 0.06), transparent 66%),
    linear-gradient(145deg, #fbf9fb 0%, #f7f1f7 54%, #fbf9fb 100%) !important;
  background-attachment: fixed !important;
}

body:not(.light)::before,
body.light::before {
  display: block;
  opacity: 0.48;
  background:
    linear-gradient(rgba(148, 170, 255, 0.032) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(148, 170, 255, 0.032) 1px, transparent 1px) 0 0 / 72px 72px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 68%, transparent 100%);
}

body.light::before {
  opacity: 0.32;
  background:
    linear-gradient(rgba(28, 15, 36, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(28, 15, 36, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  mix-blend-mode: multiply;
}

body:not(.light)::after,
body.light::after {
  display: block;
  opacity: 0.48;
  background:
    radial-gradient(circle at 14% 28%, rgba(255, 46, 150, 0.78) 0 1px, transparent 2px) 0 0 / 176px 176px,
    radial-gradient(circle at 72% 18%, rgba(77, 225, 255, 0.72) 0 1px, transparent 2px) 0 0 / 238px 238px,
    radial-gradient(circle at 84% 64%, rgba(139, 92, 246, 0.72) 0 1px, transparent 2px) 0 0 / 292px 292px,
    radial-gradient(720px 360px at 86% 4%, rgba(255, 46, 150, 0.06), transparent 68%);
  animation: barcSignalDrift 26s cubic-bezier(0.32, 0.72, 0, 1) infinite alternate;
}

body.light::after {
  opacity: 0.34;
  background:
    radial-gradient(circle at 14% 28%, rgba(226, 0, 122, 0.62) 0 1px, transparent 2px) 0 0 / 196px 196px,
    radial-gradient(circle at 76% 18%, rgba(122, 43, 208, 0.5) 0 1px, transparent 2px) 0 0 / 264px 264px,
    radial-gradient(680px 380px at 88% 2%, rgba(226, 0, 122, 0.08), transparent 70%);
  mix-blend-mode: multiply;
}

@keyframes barcSignalDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(16px, -12px, 0); }
}

/* ---------- 3. Brand, shell, and navigation ---------- */

body:not(.light) .sidebar {
  border-right-color: rgba(148, 170, 255, 0.17);
  background:
    linear-gradient(180deg, rgba(13, 17, 34, 0.94), rgba(5, 7, 17, 0.92)),
    var(--bg-panel);
  box-shadow: 18px 0 56px rgba(0, 0, 0, 0.34), inset -1px 0 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
}

body.light .sidebar {
  border-right-color: rgba(28, 15, 36, 0.09);
  background: rgba(251, 249, 251, 0.82);
  box-shadow: 18px 0 48px rgba(60, 10, 70, 0.08), inset -1px 0 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
}

.brand-mark.tp-brand-mark,
.brand-mark.tp-dashboard-brand-mark {
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: var(--barc-gradient);
  box-shadow: 0 12px 28px -10px rgba(255, 46, 150, 0.58), 0 0 28px rgba(139, 92, 246, 0.16);
  filter: none !important;
}

body:not(.light) .brand-mark.tp-brand-mark,
body:not(.light) .brand-mark.tp-dashboard-brand-mark,
body.light .brand-mark.tp-brand-mark,
body.light .brand-mark.tp-dashboard-brand-mark {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--barc-gradient);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--barc-magenta), transparent 38%), 0 0 28px color-mix(in srgb, var(--barc-violet), transparent 84%);
  filter: none !important;
}

.brand h1 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand p,
.filter-section h2,
.source-note {
  color: var(--text-secondary);
}

.topbar {
  border-bottom-color: var(--border-subtle);
}

body:not(.light) .topbar h1,
body.light .topbar h1 {
  padding-bottom: 3px;
  background: var(--barc-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  filter: none;
  text-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.12);
}

body:not(.light) .topbar p,
body.light .topbar p {
  background: linear-gradient(100deg, var(--text-secondary), color-mix(in srgb, var(--barc-magenta), var(--text-secondary) 78%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.tabs {
  border-color: var(--border-subtle);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 48%), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--shadow-card);
  backdrop-filter: blur(16px);
}

body.light .tabs {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), var(--shadow-card);
}

.tabs::after,
body.light .tabs::after {
  background: linear-gradient(90deg, transparent, var(--barc-magenta), var(--barc-violet), var(--barc-cyan), transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--barc-violet), transparent 72%);
  opacity: 0.78;
}

.tab {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.055em;
}

.tab.active,
body:not(.light) .tab.active,
body.light .tab.active {
  border: 1px solid transparent;
  color: var(--text-primary);
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--barc-gradient) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2), 0 0 28px color-mix(in srgb, var(--barc-violet), transparent 82%);
  text-shadow: none;
}

.tab.active::before,
body:not(.light) .tab.active::before,
body.light .tab.active::before {
  background: var(--barc-gradient);
}

.tab.active::after,
body:not(.light) .tab.active::after,
body.light .tab.active::after {
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card), white 4%), var(--bg-card));
}

/* ---------- 4. Controls and primary actions ---------- */

body:not(.light) :is(
  .font-toggle,
  .guide-button,
  .freshness-badge,
  .mode-button,
  .export-button,
  .compact-action,
  .threshold-mode-button,
  .audited-guide-toggle,
  .dropdown-button,
  .sidebar-toggle,
  input,
  select,
  textarea,
  .filter-multi-toggle
) {
  border-color: var(--border-subtle);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), rgba(9, 13, 28, 0.78);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 24px rgba(0, 0, 0, 0.16);
}

body.light :is(
  .font-toggle,
  .guide-button,
  .freshness-badge,
  .mode-button,
  .export-button,
  .compact-action,
  .threshold-mode-button,
  .audited-guide-toggle,
  .dropdown-button,
  .sidebar-toggle,
  input,
  select,
  textarea,
  .filter-multi-toggle
) {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 8px 20px rgba(60, 10, 70, 0.055);
}

body :is(.mode-button, .export-button, .compact-action, .threshold-mode-button, .audited-guide-toggle, .dropdown-button, .sidebar-toggle):hover {
  border-color: color-mix(in srgb, var(--barc-magenta), var(--border-medium) 55%);
  background: var(--barc-gradient-soft);
  box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--barc-magenta), transparent 46%);
}

#uploadButton,
#processUploadButton,
.auditor-access-actions .primary,
body.light #uploadButton {
  border: 1px solid transparent;
  background: var(--barc-gradient);
  color: #04050d;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--barc-magenta), transparent 26%);
}

#uploadButton:hover,
#processUploadButton:hover,
.auditor-access-actions .primary:hover,
body.light #uploadButton:hover {
  border-color: transparent;
  background: var(--barc-gradient);
  color: #04050d;
  filter: brightness(1.08) saturate(1.04);
  box-shadow: 0 18px 42px -14px color-mix(in srgb, var(--barc-magenta), transparent 18%);
}

body.light #uploadButton,
body.light #processUploadButton,
body.light .auditor-access-actions .primary,
body.light #uploadButton:hover,
body.light #processUploadButton:hover,
body.light .auditor-access-actions .primary:hover {
  color: #ffffff;
  filter: none;
}

:focus-visible {
  outline-color: var(--barc-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--barc-violet), transparent 80%);
}

.freshness-badge.good strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.freshness-badge.good strong::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-success);
  box-shadow: 0 0 10px var(--accent-success);
  animation: barcStatusPulse 2.4s ease-in-out infinite;
}

@keyframes barcStatusPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ---------- 5. Glass dashboard surfaces ---------- */

body:not(.light) :is(
  .metric-card:not(.metal-border),
  .executive-card:not(.metal-border),
  .overview-block,
  .auditor-panel,
  .movement-card,
  .audit-bucket,
  .readiness-lane,
  .owner-report-panel,
  .audited-panel,
  .auditor-trend-card,
  .action-risk-card,
  .quality-card,
  .insight-card,
  .diagnostic-card,
  .owner-queue,
  .intervention-list,
  .batch-readiness
) {
  border-color: var(--executive-line) !important;
  background: var(--executive-surface) !important;
  box-shadow: var(--executive-shadow) !important;
  backdrop-filter: blur(16px);
}

body.light :is(
  .metric-card,
  .executive-card,
  .overview-block,
  .auditor-panel,
  .movement-card,
  .audit-bucket,
  .readiness-lane,
  .owner-report-panel,
  .audited-panel,
  .auditor-trend-card,
  .action-risk-card,
  .quality-card,
  .insight-card,
  .diagnostic-card,
  .owner-queue,
  .intervention-list,
  .batch-readiness
) {
  border-color: var(--executive-line) !important;
  background: var(--executive-surface) !important;
  box-shadow: var(--executive-shadow) !important;
  backdrop-filter: blur(14px);
}

body:not(.light) :is(
  .metric-card:not(.metal-border),
  .executive-card:not(.metal-border),
  .overview-block,
  .auditor-panel,
  .movement-card,
  .audit-bucket,
  .readiness-lane,
  .owner-report-panel,
  .audited-panel,
  .auditor-trend-card,
  .action-risk-card,
  .quality-card,
  .insight-card,
  .diagnostic-card,
  .owner-queue,
  .intervention-list,
  .batch-readiness
)::before {
  background:
    linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, 0.66) 50%, transparent 92%) top / 100% 1px no-repeat,
    linear-gradient(145deg, rgba(255, 46, 150, 0.32), rgba(139, 92, 246, 0.1) 38%, rgba(77, 225, 255, 0.22));
  opacity: 0.58;
}

body:not(.light) :is(
  .metric-card:not(.metal-border),
  .executive-card:not(.metal-border),
  .overview-block,
  .auditor-panel,
  .movement-card,
  .audit-bucket,
  .readiness-lane,
  .owner-report-panel,
  .audited-panel,
  .auditor-trend-card,
  .action-risk-card,
  .quality-card,
  .insight-card,
  .diagnostic-card,
  .owner-queue,
  .intervention-list,
  .batch-readiness
)::after {
  background:
    radial-gradient(75% 34% at 12% 0%, rgba(255, 46, 150, 0.11), transparent 66%),
    radial-gradient(62% 34% at 92% 4%, rgba(77, 225, 255, 0.085), transparent 68%),
    linear-gradient(118deg, transparent 0 24%, rgba(255, 255, 255, 0.035) 40%, transparent 56%);
}

body :is(
  .metric-card,
  .executive-card[data-kpi-tab],
  .movement-card,
  .quality-card,
  .insight-card,
  .diagnostic-card
):hover {
  transform: perspective(900px) translate3d(0, -4px, 12px);
  border-color: color-mix(in srgb, var(--barc-violet), var(--executive-line-strong) 48%) !important;
  background: var(--executive-surface-raised) !important;
  box-shadow: var(--executive-hover-shadow) !important;
}

body:not(.light) :is(.lane-client, .owner-row, .batch-row, .intervention-row, .audited-queue-row, .audited-risk-table button, .auditor-workload-list button, .auditor-focus-list button) {
  border-color: rgba(148, 170, 255, 0.11);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 62%), rgba(7, 11, 25, 0.54);
}

body:not(.light) :is(tbody tr:hover td, .owner-row:hover, .batch-row:hover, .intervention-row:hover, .lane-client:hover, .audited-queue-row:hover, .audited-risk-table button:hover, .auditor-workload-list button:hover, .auditor-focus-list button:hover) {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(77, 225, 255, 0.055)) !important;
}

body.light :is(tbody tr:hover td, .owner-row:hover, .batch-row:hover, .intervention-row:hover, .lane-client:hover, .audited-queue-row:hover, .audited-risk-table button:hover, .auditor-workload-list button:hover, .auditor-focus-list button:hover) {
  background: linear-gradient(90deg, rgba(226, 0, 122, 0.055), rgba(122, 43, 208, 0.035)) !important;
}

/* ---------- 6. Data surfaces and semantic color ---------- */

body:not(.light) :is(.table-wrap, .modal-table, .audited-table-wrap, .owner-report-table-wrap, .heatmap, .audited-risk-table, .auditor-workload-list, .auditor-focus-list),
body.light :is(.table-wrap, .modal-table, .audited-table-wrap, .owner-report-table-wrap, .heatmap, .audited-risk-table, .auditor-workload-list, .auditor-focus-list) {
  border-color: var(--executive-line);
  background: var(--executive-surface);
  box-shadow: var(--executive-shadow);
}

body:not(.light) :is(.table-wrap thead th, .modal-table thead th, .audited-clients-table th, .owner-report-table-wrap th),
body.light :is(.table-wrap thead th, .modal-table thead th, .audited-clients-table th, .owner-report-table-wrap th) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--th-bg), white 3%), var(--th-bg));
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.065em;
}

body:not(.light) :is(.bar-fill, .progress-fill, .batch-bar span, .workload-bar-completed, .quality-fill, .pareto-bar),
body.light :is(.bar-fill, .progress-fill, .batch-bar span, .workload-bar-completed, .quality-fill, .pareto-bar) {
  background: var(--barc-gradient) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--barc-violet), transparent 76%);
}

body:not(.light) .range-slicer::after,
body.light .range-slicer::after {
  background: var(--barc-gradient) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--barc-violet), transparent 76%);
}

body:not(.light) .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 1) { fill: #ff2e96 !important; }
body:not(.light) .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 2) { fill: #8b5cf6 !important; }
body:not(.light) .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 3) { fill: #4de1ff !important; }
body:not(.light) .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 4) { fill: #3dffa8 !important; }
body:not(.light) .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n) { fill: #f6b94a !important; }

body.light .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 1) { fill: #e2007a !important; }
body.light .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 2) { fill: #7a2bd0 !important; }
body.light .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 3) { fill: #276f8e !important; }
body.light .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n + 4) { fill: #0c9a63 !important; }
body.light .pareto-combo-svg .pareto-bar-rect:nth-of-type(5n) { fill: #c77800 !important; }

body:not(.light) :is(.executive-card.good, .movement-card.good, .audit-bucket.good, .readiness-lane.good) {
  box-shadow: var(--executive-shadow), inset 0 3px 0 rgba(61, 255, 168, 0.72) !important;
}

body:not(.light) :is(.executive-card.warn, .movement-card.warn, .audit-bucket.warn, .readiness-lane.warn) {
  box-shadow: var(--executive-shadow), inset 0 3px 0 rgba(246, 185, 74, 0.72) !important;
}

body:not(.light) :is(.executive-card.bad, .movement-card.bad, .audit-bucket.bad, .readiness-lane.bad) {
  box-shadow: var(--executive-shadow), inset 0 3px 0 rgba(255, 91, 127, 0.78), 0 0 32px rgba(255, 46, 150, 0.09) !important;
}

/* ---------- 7. Modals, drawers, and overlays ---------- */

body:not(.light) :is(.modal-panel, .guide-panel, .audited-clients-panel, .audited-guide-panel, .drawer-panel, .owner-report-page) {
  border-color: var(--executive-line-strong);
  background:
    radial-gradient(90% 24% at 14% 0%, rgba(255, 46, 150, 0.08), transparent 70%),
    linear-gradient(160deg, rgba(18, 24, 48, 0.98), rgba(5, 8, 19, 0.98));
  box-shadow: var(--cc-shadow-3);
  backdrop-filter: blur(22px);
}

body.light :is(.modal-panel, .guide-panel, .audited-clients-panel, .audited-guide-panel, .drawer-panel, .owner-report-page) {
  border-color: var(--executive-line-strong);
  background:
    radial-gradient(90% 24% at 14% 0%, rgba(226, 0, 122, 0.055), transparent 72%),
    rgba(255, 255, 255, 0.94);
  box-shadow: var(--cc-shadow-3);
  backdrop-filter: blur(22px);
}

body:not(.light) :is(.modal-backdrop, .guide-backdrop, .audited-guide-backdrop) {
  background: rgba(2, 3, 11, 0.84);
  backdrop-filter: blur(10px);
}

body.light :is(.modal-backdrop, .guide-backdrop, .audited-guide-backdrop) {
  background: rgba(28, 15, 36, 0.44);
  backdrop-filter: blur(10px);
}

body:not(.light) .dashboard-tooltip,
body.light .dashboard-tooltip {
  border-color: var(--border-medium);
  background: color-mix(in srgb, var(--bg-panel), transparent 4%);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(16px);
}

body:not(.light) .auditor-focus-list button[data-risk-tooltip]::after,
body.light .auditor-focus-list button[data-risk-tooltip]::after {
  border-color: var(--border-medium);
  background: color-mix(in srgb, var(--bg-panel), transparent 4%);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(16px);
}

/* ---------- 8. Boot state and responsive guards ---------- */

#ccBootLoader {
  background:
    radial-gradient(720px 420px at 50% 28%, rgba(255, 46, 150, 0.11), transparent 64%),
    radial-gradient(620px 360px at 58% 44%, rgba(77, 225, 255, 0.07), transparent 68%),
    var(--bg);
}

#ccBootLoader img {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--barc-gradient);
  box-shadow: 0 16px 40px -14px rgba(255, 46, 150, 0.62);
}

#ccBootLoader .cc-spinner {
  border-color: rgba(148, 170, 255, 0.18);
  border-top-color: var(--barc-magenta);
  border-right-color: var(--barc-cyan);
}

* {
  scrollbar-color: color-mix(in srgb, var(--barc-violet), var(--border-medium) 40%) color-mix(in srgb, var(--bg-panel), var(--bg) 34%);
}

*::-webkit-scrollbar-thumb {
  border-color: color-mix(in srgb, var(--bg-panel), var(--bg) 34%);
  background: linear-gradient(180deg, var(--barc-magenta), var(--barc-violet), var(--barc-cyan));
}

@media (max-width: 980px) {
  body:not(.light)::after,
  body.light::after {
    opacity: 0.24;
  }

  body:has(.modal.open) .mobile-sidebar-toggle,
  body:has(.guide-drawer.open) .mobile-sidebar-toggle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .tabs,
  body:not(.light) :is(.overview-block, .auditor-panel, .table-wrap),
  body.light :is(.overview-block, .auditor-panel, .table-wrap) {
    backdrop-filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.light)::after,
  body.light::after,
  .freshness-badge.good strong::before {
    animation: none !important;
  }

  body :is(.metric-card, .executive-card[data-kpi-tab], .movement-card, .quality-card, .insight-card, .diagnostic-card):hover {
    transform: none;
  }
}