/* Scoped visual layer for the existing cabinet bundle. No pane or player logic changes. */
body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] {
  --karma-surface: #fff;
  --karma-surface-soft: #f6f8f8;
  --karma-surface-hover: #eaf0ef;
  --karma-header: #eef2f3;
  --karma-line: #e4e9e9;
  --karma-muted: #53626b;
  --karma-track: #bfd0d2;
}
html.dark body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] {
  --karma-surface: #1c2938;
  --karma-surface-soft: #223142;
  --karma-surface-hover: #2a3b49;
  --karma-header: #253648;
  --karma-line: #334454;
  --karma-muted: #bdcedb;
  --karma-track: #708596;
}

/* The KPI component draws colored left strips. Keep its own padding and grid. */
body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] [class~="border-l-2"] {
  border-left-width: 0 !important;
  border-radius: 16px;
  background: var(--karma-surface-soft);
  box-shadow: none;
}
body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] [class~="border-l-2"] [class~="text-[11px]"] {
  font-size: 12px;
  color: var(--karma-muted);
}
body[data-karma-view="analytics"] #root [class~="max-w-[1600px]"] div[class~="rounded-md"][class~="border"] {
  border-color: var(--karma-line);
  border-radius: 16px;
  background: var(--karma-surface);
  box-shadow: 0 3px 18px rgb(30 54 58 / 5%);
}

/* All header and data rows share the same width and exactly the same columns. */
body[data-karma-view="analytics"] #root .karma-m3-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--karma-line);
  border-radius: 18px;
  background: var(--karma-surface);
  box-shadow: 0 5px 22px rgb(30 54 58 / 6%);
  scrollbar-width: thin;
  scrollbar-color: var(--karma-track) transparent;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid {
  box-sizing: border-box;
  width: 100%;
  min-width: 1020px;
  grid-template-columns: minmax(198px, 1.65fr) 84px 96px repeat(var(--karma-metric-count, 5), minmax(118px, 1fr)) !important;
  border-color: var(--karma-line);
  padding-inline: 12px;
  align-items: center;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child {
  min-height: 60px;
  background: var(--karma-header);
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:not(:first-child) {
  min-height: 64px;
  background: var(--karma-surface);
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:nth-child(2n + 3) {
  background: var(--karma-surface-soft);
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:not(:first-child):hover {
  background: var(--karma-surface-hover);
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child > button {
  min-width: 0;
  justify-content: flex-start;
  gap: 5px;
  padding: 9px;
  color: var(--karma-muted);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child > button:first-child,
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:first-child { padding-left: 12px; }
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child > button:hover {
  color: inherit;
  background: var(--karma-surface-hover);
  border-radius: 10px;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid:first-child > button:focus-visible,
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:first-child button:focus-visible {
  outline: 2px solid #829ca4;
  outline-offset: -2px;
  border-radius: 8px;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div {
  min-width: 0;
  justify-content: flex-start;
  padding: 9px;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:first-child button {
  display: block;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  text-align: left;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span {
  display: inline-flex;
  min-width: 59px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #e5ede8;
  color: #3c6254;
  font-size: 15px;
  font-weight: 700;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(3) > span {
  color: inherit;
  font-size: 15px;
  font-weight: 600;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span {
  min-width: 65px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 10px;
  background: #e5eee8;
  color: #416453;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span[class*="text-amber"],
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span[class*="text-amber"] { background: #f1eade; color: #745d39; }
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span[class*="text-rose"],
body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span[class*="text-rose"] { background: #f2e7e8; color: #875b61; }
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span,
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span { background: #344e49; color: #d1eadc; }
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span[class*="text-amber"],
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span[class*="text-amber"] { background: #554a38; color: #f5dca8; }
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(2) > span[class*="text-rose"],
html.dark body[data-karma-view="analytics"] #root .karma-m3-table > .grid > div:nth-child(n + 4) > span[class*="text-rose"] { background: #553f49; color: #f3ced4; }
body[data-karma-view="analytics"] #root .karma-m3-table::-webkit-scrollbar { height: 8px; }
body[data-karma-view="analytics"] #root .karma-m3-table::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--karma-track); }

/* Dialogs: retain the existing 50/50 panes, list padding, and card sizes. */
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] {
  border-right: 1px solid #e4e9e9;
  background: #f6f8f8;
}
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] {
  border-right-color: #314153;
  background: #141f2d;
}
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"][class~="border"] {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgb(34 61 65 / 5%);
}
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"][class~="border"] {
  background: #202d3c;
  box-shadow: none;
}
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"][class~="border"]:hover { background: #eef3f2; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"][class~="border"]:hover { background: #283a4a; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="border-indigo-500"] { background: #e7eeed; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="border-indigo-500"] { background: #304357; }
/* The earlier general light-theme rule made these badges white on white in dark mode. */
body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"] [class~="bg-gray-100"] {
  border-radius: 8px;
  background: #e8eeee;
  color: #344c56;
}
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"][class~="border-r"] [class~="space-y-1"] > [class~="cursor-pointer"] [class~="bg-gray-100"] {
  background: #304153;
  color: #e0e9f0;
}
/* Distinct surfaces for transcript and metrics, without changing their grid or padding. */
body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="cursor-pointer"][class~="rounded-lg"] { border-color: #e4e9e9; background: #f7f9f9; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="cursor-pointer"][class~="rounded-lg"] { border-color: #344657; background: #202d3c; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="cursor-pointer"][class~="rounded-lg"]:hover { background: #edf3f2; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="cursor-pointer"][class~="rounded-lg"]:hover { background: #293b4c; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [data-active="true"] { border-color: #a2b9b9; background: #e5efed; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [data-active="true"] { border-color: #6b929a; background: #2c4450; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="grid"] > [class~="rounded-lg"] { border-color: #e4e9e9; background: #f7f9f9; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] section [class~="grid"] > [class~="rounded-lg"] { border-color: #344657; background: #202d3c; }
/* Restore the original unframed audio row; actual waveform still comes from its audio source. */
body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="shrink-0"][class~="border-b"] > [class~="flex"] > [class~="min-h-[44px]"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Scrollbars follow each theme, including the divider in the middle of Dialogs. */
body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"] { scrollbar-color: #aabec5 #edf2f3; scrollbar-width: thin; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"] { scrollbar-color: #5a7486 #1a2836; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"]::-webkit-scrollbar { width: 9px; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"]::-webkit-scrollbar-track { background: #edf2f3; border-radius: 10px; }
body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"]::-webkit-scrollbar-thumb { background: #aabec5; border: 2px solid #edf2f3; border-radius: 10px; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"]::-webkit-scrollbar-track { background: #1a2836; }
html.dark body[data-karma-view="dialogs"] #root [class~="w-1/2"] [class~="overflow-y-auto"]::-webkit-scrollbar-thumb { background: #5a7486; border-color: #1a2836; }