/* Local, licensed variable fonts; no runtime CDN or local-font dependency. */
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/fonts/JetBrainsMonoVariable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

/* Phase 1: one theme token source. Legacy token names remain compatible. */
:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --nav: #161618;
  --panel: #161618;
  --panel-strong: #1e1e21;
  --panel-soft: #161618;
  --line: #26262a;
  --line-strong: #26262a;
  --line-soft: #26262a;
  --text: #f1f1f3;
  --muted: #94949c;
  --subtle: #94949c;
  --accent: #6c7bff;
  --accent-strong: #6c7bff;
  --accent-soft: rgba(108, 123, 255, 0.14);
  --success: #3ecf8e;
  --success-bg: color-mix(in srgb, var(--success) 14%, transparent);
  --warning: #f2b84b;
  --warning-bg: color-mix(in srgb, var(--warning) 14%, transparent);
  --danger: #f2685c;
  --danger-bg: color-mix(in srgb, var(--danger) 14%, transparent);
  --muted-bg: color-mix(in srgb, var(--muted) 14%, transparent);
  --control-bg: var(--panel-strong);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --radius: 10px;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.14);
  --interactive-hover-bg: var(--panel-strong);
  --interactive-selected-bg: var(--accent-soft);
  --interactive-selected-wash: var(--accent-soft);
  --interactive-hover-line: var(--line);
  --interactive-selected-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --interactive-active-border: var(--accent);
  --interactive-hover-shadow: none;
  --interactive-selected-shadow: inset 3px 0 0 var(--accent);
  --interactive-control-selected-shadow: inset 0 -2px 0 var(--accent);
  --interactive-row-hover-shadow: inset 2px 0 0 var(--accent);
  --interactive-row-selected-shadow: inset 3px 0 0 var(--accent);
  --sticky-scroll-offset: 112px;
  font-family: var(--font-sans);
  --glass-surface: var(--panel);
  --glass-surface-strong: var(--panel-strong);
  --glass-surface-soft: var(--panel-soft);
  --glass-control: var(--control-bg);
  --glass-line: var(--line);
  --glass-line-strong: var(--line-strong);
  --glass-highlight: transparent;
  --glass-active: var(--accent-soft);
  --glass-active-strong: var(--accent-soft);
  --glass-active-text: var(--text);
  --glass-icon: var(--accent-soft);
  --glass-icon-line: var(--line);
  --glass-shadow: var(--shadow);
  --glass-control-shadow: var(--shadow-soft);
  --glass-active-shadow: var(--interactive-selected-shadow);
  --surface-shadow: none;
  --titanium-nav: var(--nav);
  --titanium-bar: var(--panel);
  --titanium-glass: var(--panel);
  --titanium-glass-strong: var(--panel-strong);
  --titanium-control: var(--control-bg);
  --titanium-line: var(--line);
  --titanium-line-strong: var(--line-strong);
  --titanium-highlight: transparent;
  --titanium-active: var(--accent-soft);
  --titanium-active-strong: var(--accent-soft);
  --titanium-icon: var(--accent-soft);
  --titanium-icon-line: var(--line);
  --titanium-shadow: var(--shadow);
  --titanium-pop-shadow: var(--shadow-soft);
  --button-focus-ring: 0 0 0 3px rgba(209, 209, 214, 0.18), inset 0 1px 0 var(--titanium-highlight);
  --button-primary-border: rgba(242, 242, 247, 0.46);
  --button-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%), linear-gradient(180deg, #f2f2f7, #d1d1d6);
  --button-primary-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 42%), linear-gradient(180deg, #ffffff, #dcdce1);
  --button-primary-text: #1c1c1e;
  --button-primary-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --button-secondary-bg: var(--titanium-control);
  --button-secondary-hover-bg: var(--interactive-hover-bg);
  --button-secondary-text: var(--text);
  --button-row-bg: color-mix(in srgb, var(--panel) 84%, var(--titanium-control));
  --button-row-hover-bg: color-mix(in srgb, var(--panel-soft) 76%, var(--interactive-hover-bg));
  --button-row-primary-bg: color-mix(in srgb, var(--panel-soft) 76%, var(--interactive-selected-bg));
  --button-row-primary-line: color-mix(in srgb, var(--accent-strong) 42%, var(--line));
  --button-active-bg: linear-gradient(180deg, var(--titanium-active-strong), var(--titanium-active)), var(--panel-soft);
  --button-active-shadow: var(--interactive-control-selected-shadow);
  --online: #66d889;
  --online-text: #d8f4df;
  --online-bg: rgba(102, 216, 137, 0.075);
  --online-line: rgba(102, 216, 137, 0.2);
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --titanium-surface: var(--panel);
  --titanium-surface-strong: var(--panel-strong);
  --titanium-surface-soft: var(--panel-soft);
  --titanium-active-text: var(--text);
  --titanium-control-shadow: var(--shadow-soft);
  --titanium-active-shadow: var(--interactive-selected-shadow);
  --glass-nav: var(--nav);
  --glass-bar: var(--panel);
  --glass-glass: var(--panel);
  --glass-glass-strong: var(--panel-strong);
  --glass-pop-shadow: var(--shadow-soft);
  --dense-table-selected-surface: color-mix(in srgb, var(--panel) 86%, var(--accent));
  --text-legacy-15: 15px;
  --text-legacy-9: 9px;
  --text-legacy-22: 22px;
  --text-legacy-10: 10px;
  --text-legacy-8: 8px;
  --text-legacy-23: 23px;
  --text-legacy-10-5: 10.5px;
  --text-legacy-9-5: 9.5px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f6;
  --nav: #ffffff;
  --panel: #ffffff;
  --panel-strong: #f0f0ef;
  --panel-soft: #ffffff;
  --line: #e3e2df;
  --line-strong: #e3e2df;
  --line-soft: #e3e2df;
  --text: #18181a;
  --muted: #6d6d74;
  --subtle: #6d6d74;
  --accent: #4c46e0;
  --accent-strong: #4c46e0;
  --accent-soft: rgba(76, 70, 224, 0.09);
  --success: #0f9d63;
  --warning: #b9760a;
  --danger: #d43f30;
  --button-focus-ring: 0 0 0 3px rgba(44, 44, 46, 0.12), inset 0 1px 0 var(--titanium-highlight);
  --button-primary-border: rgba(44, 44, 46, 0.24);
  --button-primary-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 46%), linear-gradient(180deg, #6e6e73, #3a3a3c);
  --button-primary-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%), linear-gradient(180deg, #77777d, #2c2c2e);
  --button-primary-text: #ffffff;
  --button-primary-shadow: 0 10px 20px rgba(28, 28, 30, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --button-row-bg: color-mix(in srgb, var(--panel) 86%, #f2f2f7);
  --button-row-hover-bg: color-mix(in srgb, var(--panel-soft) 72%, #ffffff);
  --button-row-primary-bg: color-mix(in srgb, var(--panel-soft) 74%, rgba(60, 60, 67, 0.1));
  --button-row-primary-line: rgba(44, 44, 46, 0.44);
  --online: #248a3d;
  --online-text: #1f6f35;
  --online-bg: rgba(52, 199, 89, 0.12);
  --online-line: rgba(36, 138, 61, 0.24);
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.06);
}
 

.technicalControlScreen {
  --technical-control-min-card: 210px;
}

.technicalControlIntro {
  display: grid;
  gap: 12px;
}

.technicalControlSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.technicalControlSearchBox {
  grid-column: auto;
}

.technicalControlClearButton {
  min-height: 38px;
}

.technicalControlSummaryGrid .kpiCard__value {
  font-size: var(--text-2xl);
}

.technicalControlGroupsPanel {
  display: grid;
  gap: 12px;
}

.technicalControlGroupGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--technical-control-min-card), 100%), 1fr));
  gap: 12px;
  min-width: 0;
}

.technicalControlGroupGrid .kpiCard {
  min-height: 138px;
}

.technicalControlCardAction {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.technicalControlTablePanel {
  min-width: 0;
}

.technicalControlFunctionCell,
.technicalControlOwnerCell,
.technicalControlDuplicateCell,
.technicalControlGuardrailCell,
.technicalControlMetaBlock {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.technicalControlFunctionCell strong,
.technicalControlOwnerCell strong,
.technicalControlMetaBlock strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.technicalControlFunctionCell span,
.technicalControlOwnerCell span,
.technicalControlDuplicateCell span,
.technicalControlGuardrailCell span,
.technicalControlMetaBlock span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.technicalControlMetaBlock {
  margin-top: 3px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.technicalControlMetaBlock strong,
.technicalControlMetaBlock span {
  font-family: var(--font-mono);
  font-size: 10px;
}

.technicalControlDuplicateCell .statusBadge {
  justify-self: start;
}

.technicalControlGuardrailCell em {
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.technicalControlRouteButton {
  min-width: 0;
  width: 100%;
  justify-content: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 760px) {
  .technicalControlSearchRow {
    grid-template-columns: 1fr;
  }

  .technicalControlClearButton {
    width: 100%;
  }

  .technicalControlSummaryGrid,
  .technicalControlGroupGrid {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

html {
  scrollbar-gutter: stable;
  scroll-padding-top: var(--sticky-scroll-offset);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

.appShell {
  min-height: 100vh;
  background: var(--bg);
}

.bootScreen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
}

.bootScreen__panel {
  display: grid;
  gap: 6px;
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.bootScreen__panel strong {
  font-size: 16px;
}

.bootScreen__panel span {
  color: var(--muted);
  font-size: 13px;
}

.bootScreen--error .bootScreen__panel {
  border-color: rgba(255, 107, 107, 0.52);
  box-shadow: inset 3px 0 0 var(--danger);
}

.leftNav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 248px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--nav);
}

.leftNav__brand {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  padding: 24px 20px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.brandMark {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.leftNav__brand span {
  display: block;
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.leftNav__brand strong {
  display: block;
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.15;
}

.leftNav__role {
  display: grid;
  gap: 7px;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.leftNav__role span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.leftNav__role select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 760;
}

.leftNav__role strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leftNav__role small {
  min-width: 0;
  overflow: hidden;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leftNav__scope {
  display: grid;
  gap: 8px;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.leftNav__scopeHeader {
  display: grid;
  gap: 3px;
}

.leftNav__scopeHeader span,
.leftNav__scopeSelect span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.leftNav__scopeHeader strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leftNav__scopeSelect {
  display: grid;
  gap: 6px;
}

.leftNav__scopeSelect select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text);
  padding: 9px 10px;
  font-size: 12px;
  outline: none;
}

.leftNav__scopeSummary,
.leftNav__scopeLists,
.leftNav__scopeAll,
.leftNav__scopeWarning {
  margin: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.35;
}

.leftNav__scopeLists {
  display: grid;
  gap: 4px;
}

.leftNav__scopeLists span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leftNav__scopeAll {
  color: var(--text);
  font-weight: 800;
}

.leftNav__scopeWarning {
  color: var(--warning);
  font-weight: 800;
}

.leftNav__menu {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 10px;
}

.leftNav__group {
  display: grid;
  gap: 4px;
}

.leftNav__domains {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 0 2px 12px;
  border-top: 1px solid var(--line-soft);
}

.leftNav__domainButton {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.15;
  padding: 4px 6px;
  text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.leftNav__domainButton:hover {
  border-color: rgba(209, 209, 214, 0.48);
  color: var(--text);
}

.leftNav__domainButton.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.leftNav__groupTitle {
  padding: 6px 12px 4px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.leftNav__item {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 12px;
  text-align: left;
  font-weight: 620;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.leftNav__item:hover {
  border-color: var(--line);
  background: #242426;
  color: var(--text);
}

.leftNav__item.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--accent);
}

.leftNav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--subtle);
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.leftNav__item.isActive .leftNav__dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(209, 209, 214, 0.16);
}

.leftNav__footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--subtle);
  font-size: 12px;
}

.leftNav__footerToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--subtle);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
}

.leftNav__footerToggle:hover,
.leftNav__footerToggle:focus-visible {
  color: var(--text);
  outline: none;
}

.leftNav__footerToggleIcon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

.leftNav__footerToggle:hover .leftNav__footerToggleIcon,
.leftNav__footerToggle:focus-visible .leftNav__footerToggleIcon {
  border-color: var(--interactive-active-border);
  box-shadow: var(--focus-ring);
}

.leftNav__footerContent {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.leftNav__footerContent[hidden] {
  display: none;
}

.leftNav__footer--collapsed {
  gap: 0;
  padding-block: 7px;
}

.leftNav__footerText {
  color: var(--subtle);
  font-size: 12px;
}

.systemStatus,
.userPlate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.systemStatus strong,
.userPlate strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.systemStatus span,
.userPlate span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.systemStatus__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(105, 211, 141, 0.12);
}

.systemStatus--warning .systemStatus__dot {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.14);
}

.systemStatus--danger .systemStatus__dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.14);
}

.systemStatus span.systemStatus__warning {
  color: var(--warning);
}

.userPlate__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(209, 209, 214, 0.38);
  border-radius: 50%;
  background: rgba(209, 209, 214, 0.12);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.mainArea {
  min-width: 0;
  min-height: 100vh;
  margin-left: 248px;
  padding: 0 24px 36px;
  overflow-x: clip;
}

.topBar {
  position: static;
  top: auto;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 84px;
  padding: 16px 0;
  background: rgba(9, 11, 15, 0.94);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(16px);
}

.topBar > div {
  min-width: 0;
}

.topBar > div:first-child {
  flex: 1 1 280px;
}

.topBar h1 {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.18;
}

.topBar__eyebrow {
  margin: 0;
  color: var(--subtle);
  font-size: 12px;
  text-transform: uppercase;
}

.topBar__filters,
.filterBar,
.tableControls,
.badgeStack,
.badgeStack--row,
.callHero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filterBar {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
  min-width: 0;
}

.toolbarFilters {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.historyPeriodControls.periodSegments {
  flex-wrap: wrap;
  width: 100%;
  overflow-x: visible;
}

.historyPeriodControls.periodSegments button {
  min-width: max-content;
}

.callsToolbar > .historyPeriodControls.periodSegments,
.callsToolbar > .historyFiltersAdvanced {
  grid-column: 1 / -1;
}

.callsToolbar > .historyFiltersAdvanced .historyFiltersAdvanced__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.historyFiltersAdvanced {
  flex: 1 1 100%;
  min-width: 0;
}

.historyFiltersAdvanced summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  list-style: none;
}

.historyFiltersAdvanced summary::-webkit-details-marker {
  display: none;
}

.historyFiltersAdvanced summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.historyFiltersAdvanced[open] summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.historyFiltersAdvanced summary em {
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.historyFiltersAdvanced__grid {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-top: 8px;
}

.topBar__filters {
  flex: 1 1 620px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(820px, 64vw);
  min-width: 0;
  overflow: visible;
  padding-bottom: 2px;
}

.topBar__filters .sourceChip,
.topBar__filters .secondaryButton {
  min-height: 30px;
  padding-inline: 8px;
  font-size: 11px;
}

.topBar__filters .sourceChip {
  max-width: min(260px, 100%);
}

.topBar__filters .sourceChip--source {
  max-width: min(300px, 100%);
}

.topBar__filters .sourceChip--accent {
  flex: 0 1 auto;
}

.topBar__filters .sourceChip__label,
.topBar__filters .sourceChip__detail,
.topBar__filters .sourceChip span,
.topBar__filters .sourceChip strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topBar__filters .dashboardTokenChip {
  flex: 0 1 132px;
}

.directionBriefing {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(320px, 1.4fr);
  gap: 14px;
  align-items: start;
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.directionBriefing--collapsed {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 0;
  background: transparent;
  border-color: var(--line-soft);
}

.directionBriefing--collapsed > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.directionBriefing--collapsed > summary::-webkit-details-marker {
  display: none;
}

.directionBriefing--collapsed > summary span {
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
}

.directionBriefing--collapsed > summary em {
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
}

.directionBriefing--collapsed > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.directionBriefing--collapsed[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.directionBriefing--collapsed > .directionBriefing__main,
.directionBriefing--collapsed > .directionBriefing__points {
  padding: 0 12px 12px;
}

.directionBriefing__main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.directionBriefing__main strong {
  color: var(--text);
  font-size: 13px;
}

.directionBriefing__main span,
.directionBriefing__points span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.directionBriefing__points {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.screenContent {
  min-width: 0;
}

.filterControl,
.filterChip,
.secondaryButton,
.ghostButton,
.tableAction,
.primaryButton,
.iconButton {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.filterChip,
.secondaryButton,
.ghostButton,
.tableAction,
.primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 650;
  white-space: nowrap;
}

.filterControl,
.filterChip,
.secondaryButton,
.ghostButton,
.tableAction {
  min-height: 32px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.filterControl {
  min-width: 150px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 13px;
}

.multiSelectFilter {
  position: relative;
  min-width: 156px;
  max-width: min(260px, 100%);
}

.multiSelectFilter__summary {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  width: 100%;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
}

.multiSelectFilter__summary:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.multiSelectFilter__summaryText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiSelectFilter__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 140ms ease, border-color 140ms ease;
}

.multiSelectFilter.isOpen .multiSelectFilter__summary {
  border-color: rgba(209, 209, 214, 0.64);
  background: #242426;
  box-shadow: var(--focus-ring);
}

.multiSelectFilter.isOpen .multiSelectFilter__chevron {
  border-color: var(--accent);
  transform: rotate(225deg) translate(-1px, -1px);
}

.multiSelectFilter__menu {
  position: absolute;
  box-sizing: border-box;
  z-index: 28;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 88vw);
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #1c1c1e;
  box-shadow: var(--shadow);
}

.multiSelectFilter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.multiSelectFilter__inlineChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.multiSelectFilter__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid rgba(209, 209, 214, 0.32);
  border-radius: 999px;
  background: rgba(209, 209, 214, 0.14);
  color: #f2f2f7;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.multiSelectFilter__chipButton {
  appearance: none;
  cursor: pointer;
  text-align: left;
}

.multiSelectFilter__chipRemove {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.multiSelectFilter__search {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.multiSelectFilter__clear {
  box-sizing: border-box;
  min-height: 28px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  padding: 0 9px;
}

.multiSelectFilter__options {
  box-sizing: border-box;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.multiSelectFilter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
}

.multiSelectFilter__option:hover,
.multiSelectFilter__option:has(input:checked) {
  border-color: var(--line);
  background: var(--interactive-hover-bg);
  color: var(--text);
}

.multiSelectFilter__option input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.multiSelectFilter__option span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.multiSelectFilter__empty {
  display: block;
  padding: 7px;
  color: var(--subtle);
  font-size: 12px;
}

.sourceChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: normal;
}

.sourceChip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.78;
}

.dashboardTokenChip {
  gap: 6px;
  padding-right: 6px;
}

.dashboardTokenChip input {
  width: 92px;
  min-width: 72px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.dashboardTokenChip input::placeholder {
  color: var(--subtle);
}

.sourceChip--accent {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  color: #f2f2f7;
}

.sourceChip--source {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

.sourceChip--source .sourceChip__label,
.sourceChip--source .sourceChip__detail {
  display: block;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.sourceChip--source .sourceChip__detail {
  color: var(--text);
  font-size: 12px;
}

.sourceChip--success {
  border-color: rgba(105, 211, 141, 0.5);
  background: rgba(105, 211, 141, 0.1);
  color: #bcefcf;
}

.sourceChip--warning {
  border-color: #8d742e;
  background: #29220f;
  color: #ffe7a3;
}

.sourceChip--danger {
  border-color: #8f3b3b;
  background: #2b1719;
  color: #ffd1d1;
}

.uploadIndicator {
  appearance: none;
  max-width: min(280px, 36vw);
}

.uploadIndicator strong,
.uploadIndicator__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uploadIndicator strong {
  color: var(--text);
  font-size: 11px;
}

.uploadIndicator--warning {
  border-color: #8d742e;
  background: #29220f;
  color: #ffe7a3;
}

.uploadIndicator--success {
  border-color: rgba(50, 214, 116, 0.42);
  background: var(--success-bg);
  color: var(--success);
}

.uploadIndicator--danger {
  border-color: #8f3b3b;
  background: #2b1719;
  color: #ffd1d1;
}

.dateFilter,
.checkFilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.dateFilter {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.dateFilter .filterControl {
  min-width: 138px;
}

.checkFilter {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 10px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.checkFilter input,
.tagOption input,
.denseTable input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.filterChip.isActive,
.filterChip:hover,
.secondaryButton:hover,
.ghostButton:hover,
.tableAction:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
}

.checkFilter:hover,
.checkFilter:has(input:checked) {
  color: var(--text);
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
}

.checkFilter:focus-within,
.tagOption:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.primaryButton {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  background: #d1d1d6;
  border-color: #d1d1d6;
  color: #f5faff;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(209, 209, 214, 0.18);
}

.primaryButton:hover {
  background: #c7c7cc;
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-1px);
}

.primaryButton:active:not(:disabled) {
  background: #3a3a3c;
  transform: translateY(0);
}

.secondaryButton {
  background: var(--control-bg);
  color: #d7e0e8;
}

.secondaryButton--inline {
  min-height: 34px;
}

.secondaryButton--danger {
  border-color: rgba(255, 107, 107, 0.46);
  background: rgba(255, 107, 107, 0.12);
  color: #ffd1d1;
}

.secondaryButton--danger:hover {
  border-color: rgba(255, 107, 107, 0.72);
  background: rgba(255, 107, 107, 0.2);
}

.filterChip--accent,
.tableAction--primary {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  color: #f2f2f7;
}

.filterChip--success {
  border-color: rgba(105, 211, 141, 0.42);
  background: rgba(105, 211, 141, 0.12);
  color: #d9ffe3;
}

.filterChip--warning {
  border-color: rgba(240, 189, 95, 0.46);
  background: rgba(240, 189, 95, 0.12);
  color: #ffe6bd;
}

.filterChip--danger {
  border-color: rgba(255, 107, 107, 0.48);
  background: rgba(255, 107, 107, 0.13);
  color: #ffd1d1;
}

.tableAction--danger {
  border-color: rgba(255, 107, 107, 0.46);
  background: rgba(255, 107, 107, 0.12);
  color: #ffd1d1;
}

.tableAction--danger:hover {
  border-color: rgba(255, 107, 107, 0.72);
  background: rgba(255, 107, 107, 0.2);
}

.tableAction {
  min-height: 30px;
  padding: 0 9px;
}

button[aria-busy="true"] {
  cursor: progress;
}

button[aria-busy="true"]::after {
  content: "";
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.82;
  animation: spin 700ms linear infinite;
}

.iconButton {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 20px;
}

.iconButton:hover {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.screenStack {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-top: 14px;
}

.screenStack > .workCompass {
  order: -1;
}

.loginShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
}

.loginPanel {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.loginPanel__brand {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.loginPanel__brand span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.loginPanel__brand strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.15;
}

.inlineCode {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
}

.uploadActions--compact {
  gap: 6px;
  flex-wrap: nowrap;
}

.usersPasswordControl,
.usersPasswordControl__actions {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.usersPasswordControl__inputRow,
.usersPasswordControl__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.usersPasswordControl__inputRow {
  gap: 6px;
}

.usersPasswordControl__inputRow input {
  flex: 1 1 148px;
  min-width: 0;
}

.usersPasswordControl__button {
  flex: 0 1 auto;
  min-height: 32px;
  padding-right: 8px;
  padding-left: 8px;
}

.usersPasswordControl__actions {
  gap: 6px;
}

.usersPasswordControl__actions .tableAction {
  min-height: 28px;
}

.usersAccessPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.usersAccessPanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.usersAccessPanel__header strong {
  color: var(--text);
  font-size: 13px;
}

.usersAccessPanel__header span {
  color: var(--muted);
  font-size: 12px;
}

.usersAccessPanel__grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(280px, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.usersTeamPicker {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.usersTeamPicker > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.usersTeamPicker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.usersTeamPicker__option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.usersTeamPicker__option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.usersTeamPicker__option--locked {
  border-style: dashed;
  background: var(--panel-soft);
  cursor: default;
}

.usersScopeDisclosure {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}

.usersScopeDisclosure .fieldStack--wide {
  margin-bottom: 0;
}

.usersScopeDisclosure textarea {
  min-height: 122px;
}

.usersInvitePanel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(240, 189, 95, 0.38);
  border-radius: var(--radius);
  background: rgba(240, 189, 95, 0.08);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--warning);
}

.usersInvitePanel__header,
.usersInvitePanel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.usersInvitePanel__header {
  justify-content: space-between;
}

.usersInvitePanel__header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.usersInvitePanel__header strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.usersInvitePanel__header span,
.usersInvitePanel small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.usersInvitePanel__badge {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(240, 189, 95, 0.42);
  border-radius: 999px;
  background: rgba(240, 189, 95, 0.12);
  color: #ffe8ba;
  font-size: 11px;
  font-weight: 760;
}

.usersInvitePanel__message {
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.usersRowActions.uploadActions--compact {
  align-items: flex-start;
  flex-wrap: wrap;
}

.usersRowCopyMenu {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.usersRowCopyMenu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  list-style: none;
  white-space: nowrap;
}

.usersRowCopyMenu > summary::-webkit-details-marker {
  display: none;
}

.usersRowCopyMenu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.usersRowCopyMenu[open] > summary,
.usersRowCopyMenu > summary:hover {
  border-color: var(--line-strong);
  background: var(--panel-strong);
  color: var(--text);
}

.usersRowCopyMenu[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.usersRowCopyMenu__menu {
  display: grid;
  gap: 4px;
  min-width: min(190px, 100%);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.usersRowCopyMenu__menu .tableAction {
  justify-content: flex-start;
  width: 100%;
  min-height: 28px;
  white-space: normal;
}

.usersRowCopyMenu__divider {
  display: block;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.statusStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18, 24, 31, 0.97);
  overflow: visible;
  scrollbar-width: thin;
  box-shadow: var(--shadow-soft);
}

.statusStrip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 128px;
  min-width: 0;
  min-height: 26px;
  padding: 3px 9px;
  border-right: 1px solid var(--line-soft);
}

.statusStrip__label {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.statusStrip__value {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.summaryStrip,
.callsToolbar,
.tableControls,
.callHero,
.provenanceSummary,
.summaryPanel,
.passportPanel,
.insightPanel,
.placeholderPanel,
.tablePanel,
.chartCard,
.kpiCard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.summaryStrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel-soft);
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--accent);
}

.summaryStrip strong {
  color: var(--text);
}

.provenanceSummary {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: var(--panel-soft);
  border-color: var(--line-strong);
}

.provenanceSummary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.provenanceSummary__item {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.provenanceSummary__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.provenanceSummary__label {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.provenanceSummary__item p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.provenanceSummary .statusBadge {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (max-width: 980px) {
  .provenanceSummary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .provenanceSummary__grid {
    grid-template-columns: 1fr;
  }

  .provenanceSummary__item {
    min-height: 0;
  }
}

/* Client complaints v94: one bounded work list, intentionally independent from QA scores. */
.clientComplaintsSimple {
  gap: 14px;
}

.clientComplaintsSimple__intro,
.clientComplaintsSimple__workbench {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.clientComplaintsSimple__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.clientComplaintsSimple__intro h2,
.clientComplaintsSimple__intro p,
.clientComplaintsSimple__detailRow p {
  margin: 0;
}

.clientComplaintsSimple__intro p {
  margin-top: 6px;
  color: var(--muted);
}

.clientComplaintsSimple__titleLine,
.clientComplaintsSimple__detailBadges,
.clientComplaintsSimple__pagination,
.clientComplaintsSimple__pagination > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.clientComplaintsSimple__summaries {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.clientComplaintsSimple__summary {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}

.clientComplaintsSimple__summary--warning { border-left-color: var(--warning); }
.clientComplaintsSimple__summary--danger { border-left-color: var(--danger); }
.clientComplaintsSimple__summary--success { border-left-color: var(--success); }

.clientComplaintsSimple__summary span,
.clientComplaintsSimple__summary small {
  display: block;
  color: var(--muted);
}

.clientComplaintsSimple__summary strong {
  display: block;
  margin: 5px 0 2px;
  font-size: 25px;
}

.clientComplaintsSimple__workbench {
  padding: 14px;
}

.clientComplaintsSimple__filters {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

.clientComplaintsSimple__filter > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.clientComplaintsSimple__filter input,
.clientComplaintsSimple__filter select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.clientComplaintsSimple__filterHint {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.clientComplaintsSimple__tableWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.clientComplaintsSimple__table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.clientComplaintsSimple__table th,
.clientComplaintsSimple__table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.clientComplaintsSimple__table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.clientComplaintsSimple__table td:nth-child(2) { width: 46%; }
.clientComplaintsSimple__table td strong,
.clientComplaintsSimple__table td span { display: block; }
.clientComplaintsSimple__table td > span { margin-top: 3px; color: var(--muted); }

.clientComplaintsSimple__empty {
  padding: 28px !important;
  color: var(--muted);
  text-align: center !important;
}

.clientComplaintsSimple__pagination {
  justify-content: space-between;
  margin-top: 12px;
  color: var(--muted);
}

.clientComplaintsSimple__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clientComplaintsSimple__error p { margin: 4px 0 0; }

.clientComplaintsSimple__details {
  display: grid;
  gap: 14px;
}

.clientComplaintsSimple__detailRow {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.clientComplaintsSimple__detailRow > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .clientComplaintsSimple__summaries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clientComplaintsSimple__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .clientComplaintsSimple__intro,
  .clientComplaintsSimple__pagination,
  .clientComplaintsSimple__error { align-items: stretch; flex-direction: column; }
  .clientComplaintsSimple__summaries,
  .clientComplaintsSimple__filters { grid-template-columns: 1fr; }
}

@media (min-width: 1121px) {
  .appShell--simple.appShell--screen-review .reviewQueuePanel {
    grid-template-rows: auto auto auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
  }

  .appShell--simple.appShell--screen-review .reviewQueuePanel.isControlsCollapsed {
    grid-template-rows: auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
  }
}

.kpiGrid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.kpiGrid--six {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
}

.kpiGrid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calibrationLearningChat {
  display: grid;
  gap: 16px;
}

.calibrationLearningChat__messages {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border-color, #d9dee7);
  border-radius: 12px;
  background: var(--surface-subtle, #f7f9fc);
}

.calibrationLearningChat__message {
  max-width: 84%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}

.calibrationLearningChat__message--user {
  justify-self: end;
  background: #e8f0ff;
}

.calibrationLearningChat__message p {
  margin: 4px 0 0;
}

.kpiGrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metricGroupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.metricGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

.metricGroup__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.metricGroup--kpi .metricGroup__header {
  border-bottom-color: rgba(58, 160, 109, 0.38);
}

.metricGroup--diagnostic .metricGroup__header {
  border-bottom-color: rgba(240, 189, 95, 0.42);
}

.metricGroup__header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
  line-height: 1.2;
}

.metricGroup__header span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.kpiCard {
  min-height: 96px;
  padding: 13px;
  background: var(--panel);
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.kpiCard:hover {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.kpiCard__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.kpiCard__label {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.kpiCard__value {
  margin-top: 10px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.kpiCard__delta {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--subtle);
}

.kpiCard__delta--success {
  color: var(--success);
}

.kpiCard__delta--warning {
  color: var(--warning);
}

.kpiCard__delta--danger {
  color: var(--danger);
}

.dashboardGrid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.dashboardGrid--two {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
}

.chartCard {
  min-height: 220px;
  padding: 14px;
  background: var(--panel);
}

.chartCard__header,
.sectionHeader,
.panelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.sectionHeader h2,
.panelHeader h2,
.summaryPanel h2,
.passportPanel h2,
.insightPanel h2,
.placeholderPanel h2 {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.25;
}

.chartCard h3 {
  min-width: 0;
  margin: 0;
  font-size: var(--text-legacy-15);
  letter-spacing: 0;
  line-height: 1.25;
}

.sectionHeader span,
.panelHeader span {
  color: var(--subtle);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.chartCard__control {
  color: var(--subtle);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.sectionHeader--compact {
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.sectionHeader--compact h3 {
  margin: 0;
}

.chartCard__body {
  display: grid;
  gap: 10px;
}

.barRow {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(100px, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.barRow__label {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.25;
}

.barRow__track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--panel-strong);
}

.barRow__fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.barRow__fill--success {
  background: var(--success);
}

.barRow__fill--warning {
  background: var(--warning);
}

.barRow__fill--danger {
  background: var(--danger);
}

.barRow__value {
  color: var(--text);
  font-size: var(--text-sm);
  text-align: right;
}

.trendChart {
  height: 150px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    var(--panel);
}

.trendChart__point {
  flex: 1;
  min-width: 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent);
}

.statusBadge {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.18;
  white-space: normal;
  overflow: hidden;
}

.statusBadge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.84;
  margin-top: 4px;
}

.statusBadge__text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.statusBadge--sm {
  min-height: 21px;
  padding: 2px 7px;
  font-size: var(--text-xs);
}

.statusBadge--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

.statusBadge--warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.statusBadge--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.statusBadge--muted,
.statusBadge--neutral {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.recurringViolationCell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.recurringViolationCell > span:last-child {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.recurringViolationNotice {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(240, 189, 95, 0.42);
  border-radius: var(--radius);
  background: rgba(240, 189, 95, 0.1);
}

.recurringViolationNotice > span:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.callsCompactCell {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.callsCompactCell > strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callsCompactCell--call > strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.callsInlineAction {
  justify-self: start;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(10, 132, 255, 0.34);
  border-radius: 6px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.callsInlineAction:hover,
.callsInlineAction:focus-visible {
  border-color: rgba(10, 132, 255, 0.62);
  background: rgba(10, 132, 255, 0.18);
  color: var(--text);
}

.callsMobileList {
  display: none;
}

.callsMobileCard {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.callsMobileCard__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.callsMobileCard__select {
  display: grid;
  place-items: center;
  min-height: 28px;
}

.callsMobileCard__identity {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.callsMobileCard__identity strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.callsMobileCard__identity span,
.callsMobileCard__score span,
.callsMobileCard__meta span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.callsMobileCard__score {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 56px;
  text-align: right;
}

.callsMobileCard__score strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}

.callsMobileCard__badges,
.callsMobileCard__meta,
.callsMobileCard__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.callsMobileCard__actions {
  padding-top: 2px;
}

.callsMobileCard__details {
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 7px;
}

.callsMobileCard__details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
}

.callsMobileEmpty {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.callsMobileEmpty strong {
  color: var(--text);
  font-size: 13px;
}

.callsMobileEmpty p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.callsMobileEmpty__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.callsCellMeta {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.callsBadgeCluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.callsScoreLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  color: var(--text);
  font-weight: 760;
}

.callsScoreValue {
  flex: 0 0 auto;
  min-width: 0;
}

.callsMetaLine {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.callsMetaLine .callsCellMeta {
  flex: 1 1 auto;
}

.callsMetaLine .tableAction {
  flex: 0 0 auto;
}

.callsCompactCell--risk > strong,
.callsCompactCell--risk .callsCellMeta {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.tableAction--mini {
  min-height: 24px;
  padding: 0 7px;
  font-size: 11px;
}

.projectBadgeList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 100%;
}

.projectBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectBadge--leebet {
  color: #f0dcff;
  background: rgba(164, 96, 255, 0.18);
  border-color: rgba(188, 132, 255, 0.48);
}

.projectBadge--kush {
  color: #ffe9a6;
  background: rgba(218, 167, 45, 0.18);
  border-color: rgba(240, 189, 95, 0.52);
}

.projectBadge--eva {
  color: #d7ffe4;
  background: rgba(66, 178, 104, 0.18);
  border-color: rgba(105, 211, 141, 0.48);
}

.projectBadge--banda {
  color: #ffd7d7;
  background: rgba(225, 72, 72, 0.18);
  border-color: rgba(255, 107, 107, 0.5);
}

.projectBadge--apex {
  color: #d7f4ff;
  background: rgba(68, 152, 214, 0.18);
  border-color: rgba(104, 185, 243, 0.5);
}

.projectBadge--unknown {
  color: #d2dbe4;
  background: rgba(141, 154, 168, 0.13);
  border-color: rgba(141, 154, 168, 0.28);
}

.projectBadge--leebet {
  color: #65349c;
  background: #f0e4ff;
  border-color: #c99cf2;
}

.projectBadge--kush {
  color: #6f4700;
  background: #fff1c2;
  border-color: #e1b94b;
}

.projectBadge--eva {
  color: #176239;
  background: #dcf6e6;
  border-color: #7fc99a;
}

.projectBadge--banda {
  color: #8a2b2b;
  background: #ffe1e1;
  border-color: #e99898;
}

.projectBadge--apex {
  color: #114b72;
  background: #deefff;
  border-color: #89bee4;
}

.projectBadge--unknown {
  color: #465562;
  background: #edf2f6;
  border-color: #c8d3dc;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.tabs__button {
  flex: 0 0 auto;
  max-width: 220px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.tabs--dense .tabs__button {
  min-height: 32px;
  font-size: 12px;
}

.tabs__button.isActive {
  color: var(--text);
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tabs__button:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.reviewQueueItem:focus-visible,
.callsMobileCard__details summary:focus-visible,
.sideDrawer:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.kpiCard[role="button"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--interactive-selected-shadow);
}

.tablePanel {
  min-width: 0;
  padding: 14px;
  background: #1c1c1e;
}

.tablePanel--flex {
  min-height: 520px;
}

.denseTableWrap {
  --dense-table-surface: var(--panel);
  --dense-table-header-surface: var(--panel-strong);
  --dense-table-surface-clear: var(--panel);
  --dense-table-edge-shadow: var(--panel);
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    var(--panel);
  box-shadow: none;
}

.denseTableWrap:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable {
  width: 100%;
  min-width: var(--table-min-width, 980px);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.denseTable th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 40px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--panel-strong);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
  font-weight: var(--weight-bold);
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}

.denseTable td {
  height: 48px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.denseTable--compact td {
  height: 38px;
  padding: 5px 8px;
}

.denseTable th.isRight {
  text-align: right;
}

.denseTable th.isCompact,
.denseTable td.isCompact {
  padding-left: 8px;
  padding-right: 8px;
}

.denseTable th.isWrapped {
  white-space: normal;
}

.denseTable td.isWrapped {
  line-height: 1.34;
  white-space: normal;
  overflow-wrap: anywhere;
}

.denseTable th.isNowrap,
.denseTable td.isNowrap {
  white-space: nowrap;
}

.denseTable td.isBadgeCell,
.denseTable td.isNowrap {
  min-width: 0;
  text-overflow: ellipsis;
}

.denseTable td.isBadgeCell .statusBadge {
  width: 100%;
}

.denseTable td.isBadgeCell .projectBadge,
.denseTable td.isBadgeCell .projectBadgeList {
  width: 100%;
}

.denseTable td.isClipped {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.denseTable th.isStickyColumn {
  position: sticky;
  left: var(--sticky-left, 0px);
  z-index: 3;
  background: var(--panel-strong);
  box-shadow: 1px 0 0 var(--line);
}

.denseTable td.isStickyColumn {
  position: sticky;
  left: var(--sticky-left, 0px);
  z-index: 3;
  background: var(--dense-table-surface);
  box-shadow: 1px 0 0 var(--line);
}

.denseTable th.isStickyColumn {
  z-index: 5;
  background: var(--panel-strong);
}

.denseTable th.isStickyRightColumn {
  position: sticky;
  right: var(--sticky-right, 0px);
  z-index: 3;
  background: var(--panel-strong);
  box-shadow: -1px 0 0 var(--line);
}

.denseTable td.isStickyRightColumn {
  position: sticky;
  right: var(--sticky-right, 0px);
  z-index: 3;
  background: var(--dense-table-surface);
  box-shadow: -1px 0 0 var(--line);
}

.denseTable th.isStickyRightColumn {
  z-index: 5;
  background: var(--panel-strong);
}

.denseTable th:last-child,
.denseTable td:last-child {
  border-right: 0;
}

.denseTable tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 94%, var(--line));
}

.denseTable tr.isClickable {
  cursor: pointer;
}

.denseTable tr:focus-visible {
  outline: none;
}

.denseTable tr.isClickable:focus-visible td {
  background: var(--dense-table-selected-surface);
}

.denseTable tr.isClickable:focus-visible td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td {
  background: var(--panel-strong);
}

.denseTable tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

.denseTable tr.isClickable:hover td:first-child {
  box-shadow: var(--interactive-hover-shadow);
}

.denseTable tr:focus-within td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tr.isSelected td,
.denseTable tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
}

.denseTable tr.isSelected td:first-child,
.denseTable tr:has(input[type="checkbox"]:checked) td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable .isRight {
  text-align: right;
}

.stackedCell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stackedCell strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.stackedCell span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.denseTable__empty {
  color: var(--subtle);
  text-align: center;
  padding: 28px 12px;
}

@media (max-width: 760px) {
  .denseTable--mobileLabels td[data-label]:not(.isNowrap) {
    vertical-align: top;
  }

  .denseTable--mobileLabels td[data-label]:not(.isNowrap)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--subtle);
    font-size: var(--text-legacy-9);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .denseTable--mobileLabels .stackedCell,
  .denseTable--mobileLabels .callsCompactCell {
    gap: 3px;
  }
}

.callsToolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  align-items: end;
  gap: 10px;
  padding: 13px;
  background: #1c1c1e;
  border-color: var(--line);
}

.searchBox {
  display: grid;
  gap: 5px;
  grid-column: span 2;
  min-width: 0;
}

.searchBox span,
.dateFilter--toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.searchBox small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.searchBox input,
.callsToolbar select,
.dateFilter--toolbar input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font-size: 13px;
  padding: 0 10px;
}

.filterControl,
.searchBox input,
.callsToolbar select,
.dateFilter--toolbar input,
.fieldStack input,
.fieldStack select,
.fieldStack textarea,
.calibrationToolbar select,
.calibrationActions select {
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

select,
.filterControl,
.callsToolbar select,
.fieldStack select,
.calibrationToolbar select,
.calibrationActions select {
  color-scheme: dark;
}

.searchBox input:hover,
.callsToolbar select:hover,
.dateFilter--toolbar input:hover,
.fieldStack input:hover,
.fieldStack select:hover,
.fieldStack textarea:hover,
.calibrationToolbar select:hover,
.calibrationActions select:hover,
.filterControl:hover {
  border-color: var(--line-strong);
  background: #242426;
}

.dateFilter--toolbar {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.commandCenterScreen {
  gap: 12px;
}

.commandFilterPanel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.commandFilterPanel__top,
.commandFilterPanel__quick {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.commandFilterPanel__quick .commandField--search {
  width: min(560px, 100%);
  flex: 1 1 320px;
}

.commandFilterPanel__toggle {
  min-height: 34px;
  white-space: nowrap;
}

.periodSegments {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  scrollbar-width: thin;
}

.periodSegments button {
  appearance: none;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.periodSegments button:hover,
.periodSegments button.isActive {
  border-color: rgba(209, 209, 214, 0.48);
  background: rgba(209, 209, 214, 0.12);
  color: var(--accent-strong);
}

.commandFilterPanel__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.commandField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.commandField span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.commandField input,
.commandField select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  color-scheme: dark;
}

.commandField input:hover,
.commandField select:hover,
.commandField input:focus,
.commandField select:focus {
  border-color: var(--line-strong);
  background: #111111;
}

.commandFilterPanel__apply {
  width: auto;
  min-width: 112px;
  min-height: 34px;
  margin-top: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.commandOverviewSwitch {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.commandOverviewSwitch button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  white-space: nowrap;
}

.commandOverviewSwitch button.isActive {
  background: var(--accent);
  color: #fff;
}

.commandEmptySliceNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 36%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning-bg) 74%, var(--panel-soft));
  box-shadow: inset 3px 0 0 var(--warning);
}

.commandEmptySliceNotice__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.commandEmptySliceNotice__text strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.commandEmptySliceNotice__text p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.commandEmptySliceNotice .primaryButton {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .commandEmptySliceNotice {
    align-items: stretch;
    flex-direction: column;
  }

  .commandEmptySliceNotice .primaryButton {
    width: 100%;
  }
}

.commandKpiGrid .kpiCard {
  min-height: 88px;
}

.commandTablePanel {
  padding: 12px;
}

.commandTableFilterRow {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 0;
  margin: -2px 0 10px;
}

.commandTableFilterRow__field {
  width: min(360px, 100%);
}

.paginationBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

.paginationBar__controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.paginationBar__summary,
.paginationBar__page {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrutexAnalytics {
  container-type: inline-size;
  gap: 12px;
  font-family: inherit;
}

.analyticsIntro {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.analyticsIntro p {
  max-width: 1120px;
  margin: 0;
}

.analyticsFilterPanel {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 0.55fr)) minmax(180px, 1fr) minmax(140px, 0.74fr) minmax(150px, 0.8fr) minmax(120px, 0.58fr) minmax(170px, 0.9fr) minmax(170px, 0.92fr) 118px;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.analyticsFilterField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.analyticsFilterField span {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.analyticsFilterField input,
.analyticsFilterField select,
.agentProfilePanel__select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  color-scheme: dark;
}

.analyticsFilterField input:hover,
.analyticsFilterField select:hover,
.analyticsFilterField input:focus,
.analyticsFilterField select:focus,
.agentProfilePanel__select:hover,
.agentProfilePanel__select:focus {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.commandField .multiSelectFilter,
.analyticsFilterField .multiSelectFilter,
.calibrationToolbar .multiSelectFilter {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.commandField .multiSelectFilter__summary,
.analyticsFilterField .multiSelectFilter__summary {
  min-height: 34px;
  border-radius: 6px;
  font-size: 12px;
}

.calibrationToolbar .multiSelectFilter__summary {
  min-height: 38px;
  font-size: 13px;
}

.multiSelectFilter .multiSelectFilter__option input[type="checkbox"] {
  flex: 0 0 15px;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  padding: 0;
}

.multiSelectFilter .multiSelectFilter__option span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.analyticsFilterPanel__apply {
  width: 100%;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.analyticsMetricsDashboard {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.analyticsMetricsKpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analyticsMetricsKpis .kpiCard {
  min-height: 86px;
}

.analyticsMetricsGrid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.analyticsMetricsGrid--primary {
  grid-template-columns: 1fr;
}

.analyticsMetricsGrid--secondary {
  grid-template-columns: 1fr;
}

.analyticsCompactSelect {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 760;
  color-scheme: dark;
}

.analyticsTrafficPanel,
.analyticsDailyQaPanel,
.analyticsTopErrorsPanel {
  padding: 12px;
}

.analyticsTrafficSummary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.analyticsTrafficSummary strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.analyticsTrafficSummary span {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.analyticsTrafficScale {
  display: flex;
  gap: 3px;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-soft);
}

.analyticsTrafficScale__part {
  min-width: 2%;
}

.analyticsTrafficScale__part--red,
.analyticsTrafficZone--red {
  background: var(--danger-bg);
}

.analyticsTrafficScale__part--yellow,
.analyticsTrafficZone--yellow {
  background: var(--warning-bg);
}

.analyticsTrafficScale__part--green,
.analyticsTrafficZone--green {
  background: var(--success-bg);
}

.analyticsTrafficScale__part--red {
  background: var(--danger);
}

.analyticsTrafficScale__part--yellow {
  background: var(--warning);
}

.analyticsTrafficScale__part--green {
  background: var(--success);
}

.analyticsTrafficZones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 8px;
  margin-top: 10px;
}

.analyticsTrafficZone {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

.analyticsTrafficZone span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.analyticsTrafficZone strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  text-align: right;
}

.analyticsTrafficZone em {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  overflow-wrap: anywhere;
  text-align: right;
}

.analyticsDailyQaWrap {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.analyticsDailyQaBars {
  display: grid;
  align-items: end;
  gap: 7px;
  min-height: 220px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:
    linear-gradient(to top, rgba(141, 154, 168, 0.08) 1px, transparent 1px) 0 0 / 100% 25%,
    var(--panel-soft);
}

.analyticsDailyQaDay {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  min-width: 0;
  min-height: 200px;
  text-align: center;
}

.analyticsDailyQaDay__bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 150px;
}

.analyticsDailyQaBar {
  position: relative;
  display: block;
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: var(--line-strong);
}

.analyticsDailyQaBar i {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  color: var(--subtle);
  font-size: 9px;
  font-style: normal;
  transform: translateX(-50%);
}

.analyticsDailyQaBar--total {
  background: var(--accent);
}

.analyticsDailyQaBar--checked {
  background: var(--success);
}

.analyticsDailyQaBar--noScore {
  background: var(--warning);
}

.analyticsDailyQaDay strong {
  color: var(--text);
  font-size: 10px;
  line-height: 1;
}

.analyticsDailyQaDay span {
  color: var(--subtle);
  font-size: 9px;
  line-height: 1;
}

.analyticsGrid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.analyticsGrid--top {
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.78fr);
}

.scrutexPanel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.scrutexPanel--chart {
  min-height: 284px;
}

.scrutexPanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.scrutexPanel__header h2 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
  line-height: 1.25;
  text-transform: uppercase;
}

.scrutexPanel__header span,
.scrutexPanel__control {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
}

.scrutexLineChartWrap {
  min-width: 0;
  min-height: 232px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:
    linear-gradient(to right, rgba(141, 154, 168, 0.06) 1px, transparent 1px) 0 0 / 12.5% 100%,
    var(--panel-soft);
}

.scrutexLineChart {
  display: block;
  width: 100%;
  height: 260px;
}

.scrutexLineChart__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.scrutexLineChart__tick,
.scrutexLineChart__label {
  fill: var(--subtle);
  font-size: 11px;
  font-weight: 700;
}

.scrutexLineChart__area {
  fill: rgba(209, 209, 214, 0.25);
}

.scrutexLineChart__line {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.scrutexLineChart__dot {
  fill: #ff6b45;
  stroke: var(--panel);
  stroke-width: 2;
}

.scrutexChartEmpty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  text-align: center;
}

.scrutexChartEmpty strong {
  color: var(--text);
  font-size: 13px;
}

.scrutexChartEmpty span {
  max-width: 420px;
  font-size: 12px;
  line-height: 1.45;
}

.scrutexBarChart {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:
    linear-gradient(to right, rgba(141, 154, 168, 0.07) 1px, transparent 1px) 0 0 / 25% 100%,
    var(--panel-soft);
}

.scrutexBarRow {
  appearance: none;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

button.scrutexBarRow {
  cursor: pointer;
}

button.scrutexBarRow:hover,
.scrutexBarRow.isSelected {
  border-color: rgba(209, 209, 214, 0.42);
  background: rgba(209, 209, 214, 0.08);
  color: var(--text);
}

.scrutexBarRow__code {
  font-size: 12px;
  font-weight: 820;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.scrutexBarRow__track {
  display: block;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(141, 154, 168, 0.11);
}

.scrutexBarRow__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7a7d85;
}

.scrutexBarRow--accent .scrutexBarRow__fill {
  background: var(--accent);
}

.scrutexBarRow--warning .scrutexBarRow__fill {
  background: #f0bd22;
}

.scrutexBarRow--danger .scrutexBarRow__fill {
  background: #ff4848;
}

.scrutexBarRow--muted .scrutexBarRow__fill {
  background: #777a82;
}

.scrutexBarRow__value {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.agentProfilePanel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.agentProfilePanel__select {
  max-width: 280px;
}

.agentKpiGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.agentKpiGrid .kpiCard {
  min-height: 84px;
}

.analyticsOperationalPanel {
  padding: 12px;
}

.analyticsOperationalGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 10px 0;
}

.analyticsOperationalGrid .kpiCard {
  min-height: 84px;
  overflow-wrap: anywhere;
}

.analyticsKpiSamplePanel {
  padding: 10px;
}

.analyticsKpiSamplePanel .analyticsOperationalGrid .kpiCard {
  min-height: 78px;
  padding: 10px;
}

.analyticsKpiVisualGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: 10px;
  min-width: 0;
  margin: 8px 0 10px;
}

.analyticsKpiDistributionStack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.analyticsKpiDistributionChart,
.analyticsKpiRadarChart {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.analyticsKpiDistributionChart__header,
.analyticsKpiRadarChart__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 6px;
}

.analyticsKpiDistributionChart__header h3,
.analyticsKpiRadarChart__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
}

.analyticsKpiDistributionChart__header span,
.analyticsKpiRadarChart__header span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.analyticsKpiDistributionChart__note {
  margin: -1px 0 6px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 680;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.analyticsKpiLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  margin: 3px 0 6px;
}

.analyticsKpiLegend--center {
  justify-content: center;
}

.analyticsKpiLegend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
  line-height: 1.2;
}

.analyticsKpiLegend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.analyticsKpiBarSvg,
.analyticsKpiRadarSvg {
  display: block;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.analyticsKpiBarSvg {
  width: min(100%, 440px);
}

.analyticsKpiRadarSvg {
  width: min(100%, 320px);
}

.analyticsKpiBarSvg__grid,
.analyticsKpiRadarSvg__ring {
  stroke: var(--line);
  stroke-width: 1;
  fill: none;
}

.analyticsKpiRadarSvg__target {
  fill: none;
  stroke: var(--warning);
  stroke-dasharray: 5 5;
  stroke-width: 1.4;
  opacity: 0.78;
}

.analyticsKpiBarSvg__base {
  stroke: var(--text-soft);
  stroke-width: 1.2;
}

.analyticsKpiBarSvg__axis,
.analyticsKpiBarSvg__label,
.analyticsKpiBarSvg__caption,
.analyticsKpiRadarSvg__ringLabel {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 720;
}

.analyticsKpiBarSvg__caption {
  font-size: 8px;
}

.analyticsKpiBarSvg__value {
  fill: var(--text);
  font-size: 9px;
  font-weight: 820;
}

.analyticsKpiBarSvg__bar {
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.16));
  transition: filter 160ms ease, opacity 160ms ease, stroke 160ms ease;
}

.analyticsKpiBarSvg__item.isInteractive,
.analyticsKpiRadarSvg__pointButton.isInteractive {
  cursor: pointer;
  outline: none;
}

.analyticsKpiBarSvg__item.isInteractive:hover .analyticsKpiBarSvg__bar,
.analyticsKpiBarSvg__item.isInteractive:focus-visible .analyticsKpiBarSvg__bar {
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.22)) brightness(1.08);
}

.analyticsKpiBarSvg__bar.isSelected {
  stroke: var(--text);
  stroke-width: 2;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) brightness(1.12);
}

.analyticsKpiBarSvg__label.isSelected,
.analyticsKpiBarSvg__value.isSelected {
  fill: var(--text);
  font-weight: 900;
}

.analyticsKpiRadarSvg__axis {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.analyticsKpiRadarSvg__area {
  fill: rgba(91, 140, 255, 0.16);
  stroke: none;
}

.analyticsKpiRadarSvg__line {
  fill: none;
  stroke: #5b8cff;
  stroke-width: 2;
  stroke-linejoin: round;
}

.analyticsKpiRadarSvg__point {
  fill: #5b8cff;
  stroke: var(--panel);
  stroke-width: 1.5;
  transition: fill 160ms ease, r 160ms ease, stroke 160ms ease;
}

.analyticsKpiRadarSvg__pointButton.isInteractive:hover .analyticsKpiRadarSvg__point,
.analyticsKpiRadarSvg__pointButton.isInteractive:focus-visible .analyticsKpiRadarSvg__point,
.analyticsKpiRadarSvg__point.isSelected {
  fill: #7aa5ff;
  stroke: var(--text);
  stroke-width: 2.2;
}

.analyticsKpiRadarEmpty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.analyticsKpiRadarChart__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin-top: 6px;
}

.analyticsKpiGradePanel {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.analyticsKpiGradePanel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.analyticsKpiGradePanel__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
}

.analyticsKpiGradePanel__header span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  overflow-wrap: anywhere;
  text-align: right;
}

.analyticsKpiGradeCharts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
}

.analyticsKpiRadarBadge {
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.analyticsKpiRadarBadge:disabled {
  cursor: default;
  opacity: 0.66;
}

.analyticsKpiRadarBadge.isSelected .statusBadge {
  box-shadow: none;
}

.analyticsKpiDiagnosticChips {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 7px;
  min-width: 0;
  margin: 2px 0 10px;
}

.analyticsKpiDiagnosticChip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "share count";
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel-soft);
  text-align: left;
  cursor: pointer;
}

.analyticsKpiDiagnosticChip:disabled {
  cursor: default;
  opacity: 0.58;
}

.analyticsKpiDiagnosticChip span {
  grid-area: label;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
}

.analyticsKpiDiagnosticChip strong {
  grid-area: count;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.analyticsKpiDiagnosticChip em {
  grid-area: share;
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.analyticsKpiDiagnosticChip:not(:disabled):hover,
.analyticsKpiDiagnosticChip:not(:disabled):focus-visible,
.analyticsKpiDiagnosticChip.isSelected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.analyticsKpiDiagnosticChip--danger {
  border-color: rgba(248, 113, 113, 0.34);
}

.analyticsKpiDiagnosticChip--warning {
  border-color: rgba(245, 158, 11, 0.34);
}

.analyticsKpiDrilldownPanel {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 2px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.analyticsKpiDrilldownHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.analyticsKpiDrilldownHeader__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.analyticsKpiDrilldownHeader__copy h3 {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.analyticsKpiDrilldownHeader__copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 880;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.analyticsKpiDrilldownHeader__copy span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.analyticsKpiSliceSummary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 210px;
}

@media (max-width: 780px) {
  .analyticsKpiDiagnosticChips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analyticsKpiDrilldownHeader {
    display: grid;
  }

  .analyticsKpiSliceSummary {
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .analyticsKpiDiagnosticChips {
    grid-template-columns: 1fr;
  }
}

.analyticsGrowthPanel {
  padding: 12px;
}

.analyticsGrowthSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 10px 0;
}

.analyticsGrowthGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
  min-width: 0;
}

.analyticsGrowthBlock {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.analyticsGrowthBlock h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.analyticsScoreValue {
  display: inline-flex;
  align-items: baseline;
  color: var(--text);
}

.analyticsScoreValue--success {
  color: var(--success);
}

.analyticsScoreValue--warning {
  color: var(--accent-strong);
}

.analyticsScoreValue--danger {
  color: var(--danger);
}

.analyticsScoreValue--muted {
  color: var(--muted);
}

.analyticsDecodePanel,
.analyticsRelatedPanel {
  padding: 12px;
}

.analyticsRelatedPanel__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.analyticsCodeLink {
  appearance: none;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid rgba(209, 209, 214, 0.4);
  border-radius: 4px;
  background: rgba(209, 209, 214, 0.12);
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 11px;
  font-weight: 860;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.analyticsCodeLink:hover {
  border-color: rgba(209, 209, 214, 0.72);
  background: rgba(209, 209, 214, 0.18);
}

.analyticsCallId {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.analyticsCallId strong,
.analyticsCallId span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analyticsCallId strong {
  color: var(--text);
  font-size: 12px;
}

.analyticsCallId span {
  color: var(--subtle);
  font-size: 10px;
}

@media (max-width: 1540px) {
  .analyticsFilterPanel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .analyticsFilterPanel__apply {
    grid-column: span 1;
  }

  .analyticsGrid--top {
    grid-template-columns: 1fr;
  }

  .analyticsMetricsGrid--primary,
  .analyticsMetricsGrid--secondary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .analyticsFilterPanel,
  .agentKpiGrid,
  .analyticsMetricsKpis {
    grid-template-columns: 1fr;
  }

  .analyticsFilterPanel__apply {
    grid-column: auto;
  }

  .scrutexPanel__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .agentProfilePanel__select {
    max-width: none;
  }

  .scrutexBarRow {
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    gap: 8px;
  }

  .scrutexLineChart {
    min-width: 680px;
  }

  .scrutexLineChartWrap {
    overflow-x: auto;
  }

  .analyticsTrafficSummary,
  .analyticsTrafficZone {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .analyticsTrafficSummary {
    align-items: flex-start;
    flex-direction: column;
  }

  .analyticsTrafficSummary span,
  .analyticsTrafficZone strong,
  .analyticsTrafficZone em {
    text-align: left;
  }

  .analyticsTrafficZones {
    grid-template-columns: 1fr;
  }
}

@container (max-width: 1100px) {
  .analyticsMetricsGrid--primary,
  .analyticsMetricsGrid--secondary,
  .analyticsGrid--top,
  .analyticsKpiVisualGrid,
  .analyticsGrowthGrid {
    grid-template-columns: 1fr;
  }

  .analyticsMetricsKpis,
  .analyticsOperationalGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 720px) {
  .analyticsFilterPanel,
  .analyticsMetricsKpis,
  .analyticsKpiVisualGrid,
  .analyticsOperationalGrid,
  .analyticsTrafficZones,
  .analyticsGrowthGrid,
  .agentKpiGrid {
    grid-template-columns: 1fr;
  }

  .analyticsTrafficSummary,
  .analyticsTrafficZone {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .analyticsTrafficSummary {
    align-items: flex-start;
    flex-direction: column;
  }

  .analyticsTrafficSummary span,
  .analyticsTrafficZone strong,
  .analyticsTrafficZone em {
    text-align: left;
  }
}

.paginationBar__button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.paginationBar__button:hover:not(:disabled) {
  border-color: rgba(209, 209, 214, 0.48);
  background: rgba(209, 209, 214, 0.12);
  color: var(--accent-strong);
}

.paginationBar__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkFilter--toolbar {
  min-height: 38px;
  align-self: end;
}

.tableControls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 11px;
  justify-content: space-between;
  background: #1c1c1e;
}

.tableControls > .tabs {
  flex: 1 1 420px;
  flex-wrap: wrap;
  overflow: visible;
}

.callsScreen .tableControls > .tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  flex: 1 1 100%;
  max-width: 100%;
  overflow: visible;
}

.callsScreen .tableControls > .tabs .tabs__button {
  min-width: 0;
  max-width: none;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 1.15;
  white-space: normal;
}

.callsScreen .tableControls__right {
  flex: 1 1 100%;
}

@media (max-width: 920px) {
  .callsScreen .tableControls > .tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .callsScreen .tableControls > .tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tableControls__right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 360px;
  min-width: 0;
  justify-content: flex-end;
}

.bulkActionBar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 3px 0 0 var(--warning);
}

.bulkActionBar__summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bulkActionBar__titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.bulkActionBar__summary strong {
  color: var(--text);
  font-size: 13px;
}

.bulkActionBar__summary span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.bulkActionBar__clear {
  min-height: 28px;
  padding: 0 8px;
  white-space: nowrap;
}

.bulkActionBar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.bulkStateChip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--control-bg);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.bulkStateChip--ready {
  color: var(--text);
  border-color: rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.12);
}

.bulkStateChip--muted {
  opacity: 0.72;
}

.bulkActionBar__hint {
  color: var(--warning);
}

.bulkActionBar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bulkActionBar__message {
  grid-column: 1 / -1;
  margin-top: 0;
}

.calibrationBulkActionBar {
  box-shadow: inset 3px 0 0 var(--accent);
}

.sideDrawerOverlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  background: rgba(4, 7, 11, 0.42);
}

.sideDrawer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: min(var(--drawer-width, 440px), calc(100vw - 288px));
  max-width: calc(100vw - 248px);
  height: 100vh;
  background: #1c1c1e;
  border-left: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}

.sideDrawer__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: #242426;
}

.sideDrawer__titleBlock {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.sideDrawer__header h2 {
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sideDrawer__header p {
  min-width: 0;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sideDrawer__header .iconButton {
  flex: 0 0 auto;
}

.sideDrawer__content {
  overflow: auto;
  padding: 2px 18px 22px;
}

.sideDrawerConfirmBackdrop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 7, 11, 0.58);
}

.sideDrawerConfirm {
  width: min(440px, calc(100vw - 36px));
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #1c1c1e;
  box-shadow: var(--shadow);
}

.sideDrawerConfirm p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.sideDrawerConfirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.drawerSection {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}

.drawerSection:last-child {
  border-bottom: 0;
}

.drawerSection--openCall {
  padding: 12px 0;
}

.drawerSection h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text);
}

.primaryButton--drawerAction {
  margin-top: 0;
}

.previewPanel__score {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 34px;
  font-weight: 800;
}

.previewPanel__score strong {
  font: inherit;
}

.previewPanel__score span {
  color: var(--subtle);
  font-size: 16px;
}

.metaGrid,
.summaryList {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  min-width: 0;
}

.metaGrid--wide {
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
}

.metaGrid dt,
.summaryList dt {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 650;
}

.metaGrid dd,
.summaryList dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.summaryList {
  row-gap: 10px;
}

.miniBlockList {
  display: grid;
  gap: 8px;
}

.miniBlockList__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  color: var(--muted);
  font-size: 12px;
}

.semanticShadowPanel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.drawerSection.semanticShadowPanel {
  padding: 18px 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
}

.semanticShadowPanel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.semanticShadowPanel__header h2,
.semanticShadowPanel__header h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.semanticShadowPanel__header h3 {
  font-size: 14px;
}

.semanticShadowNotice {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(240, 189, 95, 0.28);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius);
  background: var(--warning-bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.semanticSection {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  min-width: 0;
}

.semanticSection > strong,
.semanticEvidenceList > strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.semanticSummaryGrid {
  margin-top: 0;
}

.semanticFlagList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.semanticFlag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
}

.semanticFlag span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.semanticFlag.isTrue {
  border-color: rgba(105, 211, 141, 0.4);
}

.semanticFlag.isFalse {
  border-color: rgba(148, 163, 184, 0.32);
}

.semanticBlockList {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.semanticBlock {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.semanticBlock__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.semanticBlock__header strong,
.semanticBlock__header span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

.semanticBlock__header span {
  color: var(--subtle);
}

.semanticEvidenceList {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}

.semanticEvidenceList ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
}

.semanticEvidenceList li {
  overflow-wrap: anywhere;
}

.mutedText {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.callHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 16px;
  background: var(--panel-soft);
  border-color: var(--line-strong);
}

.callHero__identity {
  min-width: 0;
}

.callHero h2 {
  margin: 8px 0;
  font-size: 21px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.callHero__subline {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.callHero__score {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 292px;
}

.callHero__score strong {
  font-size: 42px;
  line-height: 1;
}

.callHero__score .isRestrictedScore,
.previewPanel__score .isRestrictedScore {
  color: #ffe8ba;
}

.callHero__score span {
  color: var(--subtle);
}

.callOverviewGrid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 12px;
  min-width: 0;
}

.callOverviewGrid--single {
  grid-template-columns: 1fr;
}

.callReviewContext {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 376px);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.callReviewContext__main {
  min-width: 0;
}

.singleCallScreen .callHero__score {
  min-width: min(236px, 100%);
}

.singleCallScreen .callHero__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.singleCallWorkHub {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d9e3dd;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 120px),
    #f7faf8;
  color: #20252c;
  box-shadow: inset 3px 0 0 rgba(36, 138, 61, 0.54), 0 8px 18px rgba(32, 37, 44, 0.05);
}

.singleCallWorkHub__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.singleCallWorkHub__header h2 {
  margin: 2px 0 4px;
  color: #20252c;
  font-size: 18px;
  line-height: 1.2;
}

.singleCallWorkHub__header p,
.singleCallWorkHub__lane p,
.singleCallWorkHub__fact small {
  margin: 0;
  color: #626d78;
  font-size: 12px;
  line-height: 1.45;
}

.singleCallWorkHub__eyebrow {
  color: #4f6f5c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.singleCallWorkHub__status,
.singleCallWorkHub__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.singleCallWorkHub__status {
  justify-content: flex-end;
}

.singleCallWorkHub__facts,
.singleCallWorkHub__columns {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.singleCallWorkHub__facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.singleCallWorkHub__columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr) minmax(0, 1fr);
}

.singleCallWorkHub__fact,
.singleCallWorkHub__lane {
  min-width: 0;
  padding: 11px;
  border: 1px solid #dfe7e2;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(32, 37, 44, 0.035);
}

.singleCallWorkHub__lane--calibration {
  border-color: rgba(181, 107, 0, 0.32);
  background: #fff8eb;
  box-shadow: inset 3px 0 0 rgba(181, 107, 0, 0.62), 0 1px 2px rgba(32, 37, 44, 0.035);
}

.singleCallWorkHub__fact span {
  display: block;
  color: #6b7580;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.singleCallWorkHub__fact strong {
  display: block;
  margin: 4px 0 2px;
  color: #20252c;
  font-size: 13px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.singleCallWorkHub__lane h3 {
  margin: 0 0 5px;
  color: #20252c;
  font-size: 13px;
  line-height: 1.25;
}

.singleCallWorkHub__lane .singleCallWorkHub__actions {
  margin-top: 10px;
}

.singleCallWorkHub .secondaryButton.singleCallWorkHub__button {
  min-height: 34px;
  border-color: #cfd9d3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 62%),
    #eef3f1;
  color: #252a31;
  white-space: normal;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.singleCallWorkHub .secondaryButton.singleCallWorkHub__button:hover {
  border-color: #aebdb5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), transparent 62%),
    #e6eeea;
  color: #15191f;
}

.singleCallWorkHub .secondaryButton.singleCallWorkHub__button--danger {
  border-color: rgba(185, 56, 56, 0.32);
  background: rgba(185, 56, 56, 0.08);
  color: #8e2727;
}

.singleCallWorkHub .singleCallWorkHub__note {
  margin-top: 0;
  border-color: rgba(181, 107, 0, 0.28);
  background: rgba(181, 107, 0, 0.08);
  color: #70470d;
}

.singleCallAudioPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.singleCallAudioPanel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.singleCallAudioPanel__header h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.singleCallAudioPanel__header span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.singleCallAudioPlayer {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 40px;
}

.singleCallAudioUnavailable {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.singleCallAudioActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.singleCallScreen .callReviewContext {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 348px);
}

.singleCallScreen > .scoreBlockGrid {
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
}

.singleCallScreen .detailMain,
.singleCallScreen .tablePanel {
  overflow: hidden;
}

.singleCallScreen .detailMain {
  padding: 12px;
}

.singleCallScreen .denseTable th {
  padding-right: 8px;
  padding-left: 8px;
}

.singleCallScreen .denseTable--compact td {
  padding-right: 7px;
  padding-left: 7px;
}

.singleCallScreen > .callHero {
  order: -6;
}

.singleCallScreen > .singleCallAudioPanel {
  order: -5;
}

.singleCallScreen > .singleCallReviewSheet {
  order: -4;
}

.singleCallScreen > .statusStrip {
  order: -3;
}

.singleCallScreen > .singleCallWorkHub {
  order: -2;
}

.singleCallScreen > .callFocusContext {
  order: -2;
}

.singleCallScreen > .callOverviewGrid {
  order: -1;
}

.singleCallScreen > .tabs {
  order: 0;
}

.singleCallScreen > .diagnosticRail,
.singleCallScreen > [data-testid="single-call-shadow-agent-diagnostics"] {
  order: 8;
}

.singleCallScreen > .detailGrid,
.singleCallScreen > .semanticShadowPanel {
  order: 9;
}

.singleCallScreen .managerProfileCard {
  position: static;
  max-height: none;
}

.managerProfileCard {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 11px;
  min-width: 0;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 12px;
  border: 1px solid #2d2927;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(209, 209, 214, 0.08), rgba(209, 209, 214, 0) 115px),
    #0d0d0e;
  box-shadow: inset 3px 0 0 rgba(209, 209, 214, 0.72), 0 18px 46px rgba(0, 0, 0, 0.28);
  font-family: var(--font-mono);
  scrollbar-width: thin;
}

.managerProfileCard__top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.managerProfileCard__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(209, 209, 214, 0.5);
  border-radius: 6px;
  background: var(--interactive-selected-bg);
  color: var(--accent-strong);
  font-size: 15px;
  font-weight: 860;
  line-height: 1;
  text-transform: uppercase;
}

.managerProfileCard__identity {
  min-width: 0;
}

.managerProfileCard__eyebrow {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 860;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerProfileCard h2 {
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 17px;
  font-weight: 840;
  line-height: 1.2;
}

.managerProfileCard__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
}

.managerProfileCard__id {
  max-width: 100%;
  overflow: hidden;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managerProfileCard__risk {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
}

.managerProfileCard__riskHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerProfileCard__riskHead strong {
  color: var(--text);
  font-size: 11px;
  text-align: right;
}

.managerRiskMeter {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #232326;
}

.managerRiskMeter__fill {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
}

.managerProfileCard--risk-low .managerRiskMeter__fill {
  width: 36%;
  background: var(--success);
}

.managerProfileCard--risk-medium .managerRiskMeter__fill {
  width: 68%;
  background: var(--warning);
}

.managerProfileCard--risk-high .managerRiskMeter__fill {
  width: 100%;
  background: var(--danger);
}

.managerProfileCard--risk-none .managerRiskMeter__fill {
  width: 18%;
}

.managerProfileCard--risk-unlinked .managerRiskMeter__fill {
  width: 52%;
  background: var(--warning);
}

.managerProfileCard--unlinked .managerProfileCard__avatar {
  border-color: rgba(240, 189, 95, 0.48);
  background: rgba(240, 189, 95, 0.1);
  color: var(--warning);
}

.managerProfileCard--unlinked .managerProfileCard__id {
  border-color: rgba(240, 189, 95, 0.22);
  background: rgba(240, 189, 95, 0.08);
  color: var(--warning);
}

.managerProfileCard__hint,
.managerProfileCard__empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.managerProfileCard__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.managerProfileCard__kpi {
  min-width: 0;
  padding: 8px 7px 9px;
  border: 1px solid #252527;
  border-radius: 6px;
  background: #111113;
}

.managerProfileCard__kpi span {
  display: block;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerProfileCard__kpi strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.managerProfileCard__kpiValue--success {
  color: var(--success) !important;
}

.managerProfileCard__kpiValue--warning {
  color: var(--accent-strong) !important;
}

.managerProfileCard__kpiValue--danger {
  color: var(--danger) !important;
}

.managerProfileCard__kpiValue--muted {
  color: var(--muted) !important;
}

.managerProfileCard__section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}

.managerProfileCard__sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.managerProfileCard__sectionHeader h3 {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 840;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerProfileCard__sectionHeader > span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 760;
}

.managerProfileCard__callId {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(209, 209, 214, 0.24);
  border-radius: 6px;
  background: rgba(209, 209, 214, 0.08);
}

.managerProfileCard__callId span {
  color: var(--subtle);
  font-size: 9px;
  font-weight: 840;
  line-height: 1.1;
}

.managerProfileCard__callId strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managerProfileCard__reviewGrid {
  display: grid;
  grid-template-columns: minmax(90px, 0.58fr) minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  min-width: 0;
}

.managerProfileCard__reviewGrid dt,
.managerProfileCard__reviewGrid dd {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
}

.managerProfileCard__reviewGrid dt {
  color: var(--subtle);
}

.managerProfileCard__reviewGrid dd {
  color: var(--text);
  overflow-wrap: anywhere;
}

.managerProfileCard__reviewGrid dd.isAccent {
  color: var(--accent-strong);
  font-weight: 760;
}

.managerViolationList {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.managerViolationRow {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: #111113;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.managerViolationRow:hover,
.managerViolationRow:focus-visible {
  border-color: rgba(209, 209, 214, 0.58);
  background: rgba(209, 209, 214, 0.1);
}

.managerViolationRow--critical,
.managerViolationRow--high {
  border-color: rgba(255, 107, 107, 0.26);
}

.managerViolationRow--critical .managerViolationRow__meta,
.managerViolationRow--high .managerViolationRow__meta {
  color: var(--danger);
}

.managerViolationRow__title {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managerViolationRow__meta {
  color: var(--text);
  font-size: 10px;
  font-weight: 820;
  white-space: nowrap;
}

.managerAiViolationList {
  display: grid;
  gap: 7px;
}

.managerAiViolationRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: #111113;
}

.managerAiViolationRow.isAccepted {
  border-color: rgba(74, 222, 128, 0.46);
  background: rgba(74, 222, 128, 0.07);
}

.managerAiViolationRow.isRejected {
  border-color: rgba(255, 107, 107, 0.48);
  background: rgba(255, 107, 107, 0.07);
}

.managerAiViolationRow__open {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.managerAiViolationRow__open:hover .managerViolationRow__title,
.managerAiViolationRow__open:focus-visible .managerViolationRow__title {
  color: var(--text);
}

.managerAiViolationRow__actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.managerAiViolationDecision {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.managerAiViolationDecision--accept:hover,
.managerAiViolationDecision--accept:focus-visible,
.managerAiViolationDecision--accept.isSelected {
  border-color: rgba(74, 222, 128, 0.72);
  background: rgba(74, 222, 128, 0.16);
  color: #86efac;
}

.managerAiViolationDecision--reject:hover,
.managerAiViolationDecision--reject:focus-visible,
.managerAiViolationDecision--reject.isSelected {
  border-color: rgba(255, 107, 107, 0.72);
  background: rgba(255, 107, 107, 0.16);
  color: #ff8f8f;
}

.managerAiViolationDecision:disabled {
  cursor: wait;
  opacity: 0.55;
}

.managerAiViolationRow__saving {
  color: var(--muted);
  font-size: 11px;
}

.aiViolationDecisionInline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.aiViolationDecisionInline .managerAiViolationDecision {
  display: inline-flex;
  width: auto;
  min-width: 86px;
  padding: 0 9px;
  gap: 5px;
  font-size: 11px;
}

.aiViolationDecisionInline__status {
  flex: 0 0 100%;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
}

.aiViolationDecisionInline__status.isAccepted {
  color: #86efac;
}

.aiViolationDecisionInline__status.isRejected {
  color: #ff8f8f;
}

.aiViolationDecisionInline__comment {
  display: grid;
  flex: 0 0 100%;
  gap: 4px;
  min-width: 0;
}

.aiViolationDecisionInline__comment > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.aiViolationDecisionInline__comment textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
}

.aiViolationDecisionInline__comment textarea:focus {
  border-color: var(--interactive-active-border);
  box-shadow: var(--focus-ring);
}

.aiViolationDecisionInline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.managerQualityAiReviewList {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.managerQualityAiReviewItem {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.managerQualityAiReviewItem__label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.managerProfileCard__section--ai {
  gap: 9px;
}

.managerProfileCard__aiNote {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.managerProfileCard__wideAction {
  width: 100%;
  min-height: 34px;
}

.managerProfileCard__comment {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.managerProfileCard__comment span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerProfileCard__comment textarea {
  width: 100%;
  min-height: 74px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--text);
  resize: vertical;
  font-size: 12px;
  line-height: 1.35;
}

.managerProfileCard__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.managerProfileCard__actions .secondaryButton {
  justify-content: center;
  min-height: 32px;
  padding: 0 9px;
  font-size: 11px;
}

.managerProfileCard__banner {
  margin-top: 0;
  padding: 8px 9px;
  font-size: 11px;
}

.summaryPanel,
.passportPanel,
.insightPanel {
  padding: 16px;
  background: #1c1c1e;
}

.summaryList {
  margin-top: 12px;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
}

.finalCommentary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.finalCommentary strong {
  font-size: 13px;
}

.finalCommentary p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.scoreBlockGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(136px, 1fr));
  gap: 10px;
}

.scoreBlock {
  min-width: 0;
  min-height: 150px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.scoreBlock:hover,
.scoreBlock.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  box-shadow: var(--shadow-soft);
}

.scoreBlock--neutral {
  border-color: rgba(141, 154, 168, 0.22);
  background: #11171d;
}

.scoreBlock:hover {
  transform: translateY(-1px);
}

.scoreBlock__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}

.scoreBlock__head span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.scoreBlock__head strong {
  justify-self: end;
  max-width: 100%;
  font-size: 13px;
  text-align: right;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.scoreBlock p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.scoreBlock small {
  display: block;
  margin-top: 8px;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.scoreBlock__scoreNote {
  display: block;
  margin-top: 7px;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.scoreContributionCell {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 0;
}

.scoreContributionCell strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.scoreContributionCell span {
  color: var(--subtle);
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
}

.detailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 12px;
  min-width: 0;
}

.detailGrid--single {
  display: block;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.detailMain {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
}

.panelHeader--spaced {
  margin-top: 14px;
}

.evidenceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
  min-width: 0;
}

.evidenceAnchor {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.evidenceAnchor:hover,
.evidenceAnchor.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  box-shadow: var(--shadow-soft);
}

.evidenceAnchor:hover {
  transform: translateY(-1px);
}

.evidenceAnchor--compact {
  min-height: 58px;
}

.evidenceAnchor__time {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.evidenceAnchor__quote {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.evidenceAnchor__meta {
  grid-column: 2;
  color: var(--subtle);
  font-size: 11px;
}

.transcriptBlock {
  display: grid;
  gap: 6px;
}

.transcriptBlock--full {
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.transcriptToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 12px;
}

.transcriptRow {
  display: grid;
  grid-template-columns: 54px 90px minmax(0, 1fr) 72px;
  align-items: start;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #1c1c1e;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.transcriptRow:hover,
.transcriptRow.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: rgba(209, 209, 214, 0.12);
}

.transcriptRow--noEvidence {
  cursor: default;
}

.transcriptRow--noEvidence:hover {
  border-color: var(--line-soft);
  background: #1c1c1e;
}

.transcriptRow.isActive {
  box-shadow: inset 3px 0 0 var(--accent);
}

.transcriptRow__time {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.speakerChip {
  display: inline-flex;
  justify-content: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  white-space: nowrap;
}

.speakerChip--manager {
  color: #f2f2f7;
  background: rgba(209, 209, 214, 0.16);
}

.speakerChip--client {
  color: #dde7f2;
  background: rgba(140, 158, 176, 0.16);
}

.transcriptRow__text {
  min-width: 0;
  color: #dce4eb;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.transcriptRow__marker {
  justify-self: end;
  color: var(--warning);
  font-size: 11px;
}

.violationRow {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}

.placeholderPanel {
  padding: 28px;
}

.placeholderPanel p {
  max-width: 720px;
  color: var(--muted);
}

.placeholderPanel__grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.placeholderPanel__grid span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 12px;
}

.knowledgeBaseScreen {
  min-width: 0;
}

.knowledgeIntroPanel,
.knowledgeRoleGrid,
.knowledgeRoleTabsPanel,
.knowledgeUxPanel,
.knowledgeHeroGrid,
.knowledgeHeroSearch,
.knowledgeQuickRoutes,
.knowledgeSearchRow,
.knowledgeGuideGrid,
.knowledgeGlossaryGrid {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.knowledgeIntroPanel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.knowledgeIntroPanel > div,
.knowledgeUxPanel,
.knowledgeRolePanel,
.knowledgeGlossaryPanel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.knowledgeUxPanel {
  padding: 14px;
}

.knowledgeHeroPanel {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
}

.knowledgeHeroGrid {
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
  margin-bottom: 12px;
}

.knowledgeHeroCurrent {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.knowledgeHeroCurrent.isCurrentRole {
  border-color: rgba(105, 211, 141, 0.42);
  box-shadow: inset 3px 0 0 rgba(105, 211, 141, 0.78);
}

.knowledgeHeroCurrent > span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.knowledgeHeroCurrent.isCurrentRole > span {
  color: var(--success);
}

.knowledgeHeroCurrent > strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.knowledgeHeroCurrent > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.knowledgeHeroSearch {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.knowledgeQuickRoutes {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
}

.knowledgeQuickRoute {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.knowledgeQuickRoute::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.knowledgeQuickRoute:hover,
.knowledgeQuickRoute.isActive {
  border-color: var(--line-strong);
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
}

.knowledgeQuickRoute:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline: none;
}

.knowledgeQuickRoute.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
}

.knowledgeQuickRoute.isActive::before {
  background: var(--accent);
}

.knowledgeQuickRoute.isCurrentRole:not(.isActive) {
  border-color: rgba(105, 211, 141, 0.34);
}

.knowledgeQuickRoute.isCurrentRole:not(.isActive)::before {
  background: rgba(105, 211, 141, 0.86);
}

.knowledgeQuickRoute strong {
  font-size: 13px;
  line-height: 1.25;
}

.knowledgeQuickRoute span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledgeSearchRow {
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
}

.knowledgeSearchBox {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.knowledgeSearchBox span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.knowledgeSearchBox small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledgeSearchBox input {
  width: 100%;
}

.knowledgeTopicFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  align-content: flex-start;
}

.knowledgeIntroPanel > div {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.knowledgeIntroPanel span,
.knowledgeRolePanel .sectionHeader span,
.knowledgeGuideBlock h3,
.knowledgeScenario strong,
.knowledgeGlossaryTerm strong {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.knowledgeIntroPanel strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.knowledgeRoleGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knowledgeRoleTabsPanel {
  align-items: start;
}

.knowledgeRolePanel,
.knowledgeGlossaryPanel {
  padding: 12px;
}

.knowledgeRolePanel--current {
  border-color: rgba(105, 211, 141, 0.34);
  box-shadow: inset 3px 0 0 rgba(105, 211, 141, 0.78);
}

.knowledgeRoleActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.knowledgeRoleAction {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
}

.knowledgeRoleAction.isAvailable {
  border-color: rgba(209, 209, 214, 0.4);
}

.knowledgeRoleAction.isPrimary {
  border-color: rgba(105, 211, 141, 0.44);
  background: rgba(105, 211, 141, 0.08);
}

.knowledgeRoleAction.isPrimary .knowledgeRoleAction__body strong {
  color: var(--success);
}

.knowledgeRoleAction__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.knowledgeRoleAction__body strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.knowledgeRoleAction__body span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledgeRoleAction .tableAction {
  justify-self: start;
  white-space: nowrap;
}

.knowledgeAccessNotice {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(209, 209, 214, 0.06);
}

.knowledgeAccessNotice strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.knowledgeAccessNotice span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.knowledgeAccessPill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--subtle);
  background: rgba(209, 209, 214, 0.06);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.knowledgeGuideGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}

.knowledgeDisclosurePanel {
  padding: 0;
}

.knowledgeDisclosureSummary {
  padding: 12px;
  margin-bottom: 0;
  cursor: pointer;
  list-style: none;
}

.knowledgeDisclosureSummary::-webkit-details-marker {
  display: none;
}

.knowledgeDisclosureSummary::after {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-weight: 800;
}

.knowledgeDisclosurePanel[open] > .knowledgeDisclosureSummary::after {
  content: '−';
  color: var(--text);
  border-color: rgba(94, 234, 212, 0.38);
}

.knowledgeDisclosurePanel > .knowledgeGuideGrid,
.knowledgeDisclosurePanel > .knowledgeScenarioList,
.knowledgeDisclosurePanel > .knowledgeEmptyState {
  margin: 0 12px 12px;
}

.knowledgeGuideBlock {
  min-width: 0;
}

.knowledgeGuideBlock h3 {
  margin: 0 0 6px;
}

.knowledgeGuideBlock ul,
.knowledgeScenarioList {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.knowledgeGuideBlock li,
.knowledgeScenario span,
.knowledgeGlossaryTerm span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.38;
}

.knowledgeGuidePoint {
  min-width: 0;
}

.knowledgeGuidePoint--tagged {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  list-style-position: outside;
}

.knowledgePointTag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 6px;
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 999px;
  color: var(--text);
  background: rgba(94, 234, 212, 0.08);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.knowledgeScenarioList {
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.knowledgeScenario {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel-soft);
}

.knowledgeGlossaryGrid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.knowledgeGlossaryTerm {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.knowledgeEmptyState {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-soft);
}

.knowledgeEmptyState strong {
  color: var(--text);
  font-size: 13px;
}

.knowledgeEmptyState span {
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .knowledgeIntroPanel,
  .knowledgeRoleGrid,
  .knowledgeRoleActions,
  .knowledgeHeroGrid,
  .knowledgeQuickRoutes,
  .knowledgeSearchRow,
  .knowledgeGuideGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .knowledgeUxPanel,
  .knowledgeRolePanel,
  .knowledgeGlossaryPanel,
  .knowledgeIntroPanel > div {
    padding: 10px;
  }

  .knowledgeDisclosurePanel {
    padding: 0;
  }

  .knowledgeDisclosureSummary {
    padding: 10px;
  }

  .knowledgeDisclosurePanel > .knowledgeGuideGrid,
  .knowledgeDisclosurePanel > .knowledgeScenarioList,
  .knowledgeDisclosurePanel > .knowledgeEmptyState {
    margin: 0 10px 10px;
  }

  .knowledgeTopicFilters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .knowledgeTopicFilters .filterChip {
    flex: 0 0 auto;
  }

  .knowledgeQuickRoutes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledgeGuidePoint--tagged {
    grid-template-columns: 1fr;
  }
}

.uploadGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  gap: 12px;
  min-width: 0;
}

.uploadPanel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
}

.uploadPanel--status {
  align-self: start;
}

.uploadModeGate {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.uploadModeGate__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.uploadModeGate__header h2,
.uploadModeGate__header p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.uploadModeGate__header h2 {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.uploadModeGate__header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.uploadModeGate__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.uploadModeOption {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.uploadModeOption:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.uploadModeOption.isActive {
  color: var(--text);
  border-color: rgba(209, 209, 214, 0.64);
  background: rgba(209, 209, 214, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.uploadModeOption__title,
.uploadModeOption small,
.uploadModeOption b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.uploadModeOption__title {
  font-size: 13px;
  font-weight: 820;
  line-height: 1.25;
}

.uploadModeOption small {
  font-size: 12px;
  line-height: 1.35;
}

.uploadModeOption b {
  color: var(--text);
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .uploadModeGate__header {
    align-items: stretch;
    flex-direction: column;
  }

  .uploadModeOption {
    min-height: auto;
  }
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.fieldStack {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.fieldStack--wide {
  grid-column: 1 / -1;
}

.fieldStack span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.fieldStack small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.fieldStack input,
.fieldStack select,
.fieldStack textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font-size: 13px;
  padding: 0 10px;
}

.fieldStack input[type="file"] {
  min-height: auto;
  padding: 9px 10px;
  color: #cbd5df;
}

.fieldStack input::file-selector-button {
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--text);
  padding: 5px 8px;
}

.fieldStack textarea {
  min-height: 96px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.4;
}

.vicidialDailyQaPanel .fieldStack--inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-top: 18px;
}

.vicidialDailyQaPanel .fieldStack--inline input[type="checkbox"] {
  width: auto;
  min-height: auto;
}

.vicidialDailyQaNoWait {
  grid-column: 1 / -1;
  padding-top: 0;
}

.vicidialDailyQaPanel .vicidialUploadHandoffBanner {
  order: -40;
}

.vicidialDailyQaPanel .vicidialQaProgressPanel {
  order: -39;
}

.vicidialDailyQaPanel [data-testid="vicidial-focused-run-missing"] {
  order: -38;
}

.vicidialDailyQaPanel [data-testid="vicidial-active-run-routing-banner"] {
  order: -37;
}

.vicidialDailyQaPanel .vicidialDailyQaActionSteps {
  order: -36;
}

.qaCandidateSettingsDisclosure {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.qaCandidateSettingsDisclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.qaCandidateSettingsDisclosure__summary::-webkit-details-marker {
  display: none;
}

.qaCandidateSettingsDisclosure__summary::after {
  content: "+";
  color: var(--muted);
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.qaCandidateSettingsDisclosure[open] > .qaCandidateSettingsDisclosure__summary::after {
  content: "-";
}

.qaCandidateSettingsDisclosure__summary span,
.qaCandidateSettingsDisclosure__summary small {
  margin: 0;
}

.qaCandidateSettingsDisclosure__summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
}

.qaCandidateSettingsDisclosure__summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.qaCandidateSettingsDisclosure > [data-testid="qa-candidate-limit-controls"] {
  padding: 0 12px 12px;
  margin-bottom: 0;
}

.qaCandidateSettingsDisclosure:not([open]) > [data-testid="qa-candidate-limit-controls"] {
  display: none;
}

.vicidialDailyQaScheduleCard {
  grid-column: 1 / -1;
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vicidialDailyQaScheduleDisclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.vicidialDailyQaScheduleDisclosure__summary::-webkit-details-marker {
  display: none;
}

.vicidialDailyQaScheduleDisclosure__summary::after {
  content: "+";
  color: var(--muted);
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.vicidialDailyQaScheduleDisclosure[open] > .vicidialDailyQaScheduleDisclosure__summary::after {
  content: "-";
}

.vicidialDailyQaScheduleDisclosure__summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
  text-align: right;
}

.vicidialDailyQaScheduleDisclosure__body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.vicidialDailyQaScheduleDisclosure:not([open]) > .vicidialDailyQaScheduleDisclosure__body {
  display: none;
}

.vicidialDailyQaGuidanceDisclosure {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vicidialDailyQaGuidanceDisclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  cursor: pointer;
  list-style: none;
}

.vicidialDailyQaGuidanceDisclosure__summary::-webkit-details-marker {
  display: none;
}

.vicidialDailyQaGuidanceDisclosure__summary::after {
  content: "+";
  color: var(--muted);
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.vicidialDailyQaGuidanceDisclosure[open] > .vicidialDailyQaGuidanceDisclosure__summary::after {
  content: "-";
}

.vicidialDailyQaGuidanceDisclosure__summary strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.vicidialDailyQaGuidanceDisclosure__summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
  text-align: right;
}

.vicidialDailyQaGuidanceDisclosure__body {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.vicidialDailyQaGuidanceDisclosure:not([open]) > .vicidialDailyQaGuidanceDisclosure__body {
  display: none;
}

.vicidialReportImportDisclosure {
  display: block;
}

.vicidialReportImportDisclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
}

.vicidialReportImportDisclosure__summary::-webkit-details-marker {
  display: none;
}

.vicidialReportImportDisclosure__summary::after {
  content: "+";
  color: var(--muted);
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.vicidialReportImportDisclosure[open] > .vicidialReportImportDisclosure__summary::after {
  content: "-";
}

.vicidialReportImportDisclosure__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.vicidialReportImportDisclosure__title strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.vicidialReportImportDisclosure__title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}

.vicidialReportImportDisclosure__summary small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.vicidialReportImportDisclosure__body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.vicidialReportImportDisclosure:not([open]) > .vicidialReportImportDisclosure__body {
  display: none;
}

.vicidialDailyQaScheduleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.vicidialDailyQaScheduleTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.vicidialDailyQaScheduleTitle strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.vicidialDailyQaScheduleState {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
}

.vicidialDailyQaScheduleState.isEnabled {
  border-color: color-mix(in srgb, var(--success) 46%, var(--line));
  background: var(--success-bg);
  color: var(--success);
}

.vicidialDailyQaScheduleActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.vicidialDailyQaScheduleActions .primaryButton,
.vicidialDailyQaScheduleActions .secondaryButton {
  width: auto;
  min-height: 32px;
  margin-top: 0;
}

.vicidialDailyQaScheduleGrid {
  display: grid;
  grid-template-columns:
    minmax(148px, 0.72fr)
    minmax(150px, 0.6fr)
    minmax(210px, 0.95fr)
    minmax(260px, 1.65fr);
  align-items: end;
  gap: 8px 10px;
  min-width: 0;
}

.vicidialDailyQaScheduleGrid .fieldStack {
  margin-bottom: 0;
}

.vicidialDailyQaScheduleGrid .fieldStack--inline {
  min-height: 32px;
  padding-top: 0;
  transform: none;
}

.vicidialDailyQaScheduleGrid input[type="time"] {
  max-width: 180px;
}

.vicidialDailyQaScheduleDays {
  grid-column: auto;
  min-width: 0;
}

.vicidialDailyQaScheduleDayList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vicidialDailyQaScheduleDay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  transform: none;
}

.vicidialDailyQaScheduleGrid .fieldStack--inline:hover,
.vicidialDailyQaScheduleGrid .fieldStack--inline:focus-within,
.vicidialDailyQaScheduleDay:hover,
.vicidialDailyQaScheduleDay:focus-within,
.vicidialDailyQaScheduleActions .primaryButton:hover,
.vicidialDailyQaScheduleActions .secondaryButton:hover {
  transform: none;
}

.vicidialDailyQaScheduleGrid .fieldStack--inline input[type="checkbox"],
.vicidialDailyQaScheduleDay input[type="checkbox"] {
  flex: 0 0 14px;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  transform: none;
  box-shadow: none;
}

.vicidialDailyQaScheduleGrid .fieldStack--inline input[type="checkbox"]:hover,
.vicidialDailyQaScheduleGrid .fieldStack--inline input[type="checkbox"]:focus,
.vicidialDailyQaScheduleDay input[type="checkbox"]:hover,
.vicidialDailyQaScheduleDay input[type="checkbox"]:focus {
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  padding: 0;
  transform: none;
  box-shadow: none;
}

.vicidialDailyQaScheduleStatusSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 5px 12px;
  min-width: 0;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}

.vicidialDailyQaScheduleStatusItem {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.vicidialDailyQaScheduleStatusItem b {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
}

.vicidialDailyQaScheduleStatusItem span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vicidialDailyQaScheduleCard .vicidialDailyQaStepHint {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.vicidialDailyQaLatestImportBanner,
.vicidialDailyQaActionSteps {
  grid-column: 1 / -1;
}

.vicidialDailyQaLatestImportBanner,
.vicidialDailyQaResultCompact {
  display: grid;
  gap: 9px;
  align-content: start;
}

.vicidialQaProgressPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.vicidialQaProgressPanel--compact {
  gap: 10px;
}

.vicidialQaProgressHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.vicidialQaProgressTitle {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vicidialQaProgressTitle strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.vicidialQaProgressTitle span {
  color: var(--muted);
  font-size: 12px;
}

.vicidialQaProgressRail {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
}

.vicidialQaProgressFill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.vicidialQaProgressNextAction {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vicidialQaActionFocus {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--panel);
}

.vicidialQaActionFocus--danger {
  border-left-color: var(--danger);
}

.vicidialQaActionFocus--warning {
  border-left-color: var(--warning);
}

.vicidialQaActionFocus--success {
  border-left-color: var(--success);
}

.vicidialQaActionFocusLabel {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.vicidialQaActionFocus strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vicidialQaActionFocus span,
.vicidialQaActionFocus small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vicidialQaActionFocusBoundary {
  color: var(--subtle);
}

.vicidialQaProgressMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 8px;
  min-width: 0;
}

.vicidialQaProgressMetric {
  display: grid;
  gap: 4px;
  min-height: 58px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
}

.vicidialQaProgressMetric span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
}

.vicidialQaProgressMetric strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.vicidialQaProgressHint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.vicidialDailyQaStepGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: 12px;
  min-width: 0;
}

.vicidialDailyQaStepCard {
  --vicidial-step-accent: var(--accent);
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--vicidial-step-accent) 36%, var(--line));
  border-radius: 8px;
  background: var(--panel-soft);
  box-shadow: inset 3px 0 0 var(--vicidial-step-accent);
}

.vicidialDailyQaStepCard--collect {
  --vicidial-step-accent: var(--accent-strong);
}

.vicidialDailyQaStepCard--dryRun {
  --vicidial-step-accent: var(--warning);
}

.vicidialDailyQaStepCard--launch {
  --vicidial-step-accent: var(--danger);
}

.vicidialDailyQaStepHeader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.vicidialDailyQaStepNumber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vicidial-step-accent) 18%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--vicidial-step-accent) 42%, var(--line));
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 auto;
}

.vicidialDailyQaStepCopy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vicidialDailyQaStepCopy strong,
.vicidialDailyQaStepCopy span,
.vicidialDailyQaStepHint {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vicidialDailyQaStepCopy span,
.vicidialDailyQaStepHint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.vicidialDailyQaActionButton {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  white-space: normal;
  line-height: 1.25;
  cursor: pointer;
}

.vicidialDailyQaActionButton--dryRun {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--line));
  background: color-mix(in srgb, var(--warning-bg) 82%, var(--panel));
  color: var(--text);
}

.vicidialDailyQaActionButton--dryRun:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
}

.vicidialDailyQaActionButton--launch {
  width: 100%;
}

@media (max-width: 720px) {
  .vicidialDailyQaScheduleCard {
    gap: 6px;
    padding: 8px;
  }

  .vicidialDailyQaScheduleHeader {
    align-items: stretch;
  }

  .vicidialDailyQaScheduleActions {
    width: 100%;
    gap: 4px;
  }

  .vicidialDailyQaScheduleActions .primaryButton,
  .vicidialDailyQaScheduleActions .secondaryButton {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding-inline: 4px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .vicidialDailyQaScheduleGrid {
    grid-template-columns: 1fr;
  }

  .vicidialDailyQaScheduleGrid input[type="time"] {
    max-width: none;
  }

  .vicidialDailyQaScheduleDayList {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .vicidialDailyQaScheduleDay {
    justify-content: center;
    gap: 2px;
    min-height: 26px;
    min-width: 0;
    padding: 2px;
  }

  .vicidialDailyQaScheduleDay input[type="checkbox"] {
    flex-basis: 12px;
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
  }

  .vicidialDailyQaScheduleDay input[type="checkbox"]:hover,
  .vicidialDailyQaScheduleDay input[type="checkbox"]:focus {
    width: 12px;
    min-width: 12px;
    height: 12px;
    min-height: 12px;
  }

  .vicidialDailyQaScheduleDay span {
    font-size: 10.5px;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .vicidialDailyQaScheduleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vicidialDailyQaScheduleDays {
    grid-column: 1 / -1;
  }
}

.managerSnapshotBox {
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.managerSnapshotBox .metaGrid {
  grid-template-columns: minmax(90px, 0.44fr) minmax(0, 1fr);
  gap: 6px 10px;
}

.managerTeamCoverageStrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 4px;
}

.managerTeamCoverageChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
}

.managerTeamCoverageChip:hover,
.managerTeamCoverageChip.isActive {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.managerTeamCoverageChip.isEmpty {
  color: var(--muted);
}

.managerTeamCoverageChip strong {
  font-weight: 780;
}

.managerTeamCoverageChip span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.managerTeamCoverageWarning {
  flex-basis: 100%;
  color: var(--warning);
  font-size: 12px;
  line-height: 1.35;
}

.managerDirectorySectionHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.managerDirectorySectionHeader h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.managerDirectorySectionHeader p {
  max-width: 860px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.telegramBotConnectPanel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.38fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}

.telegramBotConnectPanel__main,
.telegramBotConnectPanel__actions {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.telegramBotConnectPanel h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.telegramBotConnectPanel p {
  max-width: 840px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.telegramBotConnectPanel__chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

.telegramBotConnectPanel__chips strong,
.telegramBotConnectPanel__chips span,
.telegramBotConnectPanel__copyStatus {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.telegramBotConnectPanel__chips strong {
  color: var(--text);
}

.telegramBotConnectPanel__copyStatus {
  color: var(--success);
}

.telegramBotConnectPanel__actions .primaryButton,
.telegramBotConnectPanel__actions .secondaryButton {
  width: 100%;
  min-height: 34px;
}

.telegramBotConnectPanel__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
  min-width: 0;
  margin: 2px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  counter-reset: telegram-onboarding;
}

.telegramBotConnectPanel__steps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 8px;
  min-width: 0;
  counter-increment: telegram-onboarding;
}

.telegramBotConnectPanel__steps li::before {
  content: counter(telegram-onboarding);
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 840;
  line-height: 1;
}

.telegramBotConnectPanel__steps strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.telegramBotConnectPanel__steps span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .telegramBotConnectPanel {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .telegramBotConnectPanel__steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.uploadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.uploadActions--stacked {
  align-items: stretch;
}

.uploadDangerZone {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(240, 189, 95, 0.36);
  border-radius: var(--radius);
  background: var(--warning-bg);
}

.uploadDangerZone summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.uploadDangerZone summary::-webkit-details-marker {
  display: none;
}

.uploadDangerZone summary span,
.uploadDangerZone summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.uploadDangerZone summary span {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.uploadDangerZone summary small {
  color: var(--warning);
  font-size: 11px;
  font-weight: 820;
}

.uploadDangerZone p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.queueHint {
  margin: -2px 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
}

.uploadQueue {
  display: grid;
  gap: 8px;
}

.queueRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #1c1c1e;
}

.queueRow.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: rgba(209, 209, 214, 0.1);
  box-shadow: inset 3px 0 0 var(--accent);
}

.queueRow__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.queueRow__main strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.queueRow__main span,
.queueRow__meta {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
}

.queueRow__meta,
.queueRow .errorBanner,
.queueRow .tableAction {
  grid-column: 1 / -1;
}

.calibrationGuide {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
}

.guideGrid,
.guideFull {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.guideFull {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.guideGrid h3,
.guideFull h3,
.tagGroup h3 {
  margin: 0 0 6px;
  font-size: 13px;
}

.guideGrid p,
.guideFull p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.calibrationToolbar select,
.calibrationActions select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  padding: 0 10px;
}

.calibrationActions {
  align-items: stretch;
}

.calibrationActions--grouped {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.1fr)
    minmax(230px, 0.9fr)
    minmax(250px, 0.9fr)
    minmax(300px, 1.1fr);
  gap: 10px;
  align-items: stretch;
}

.calibrationRegistryBridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 30%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-bg) 72%, var(--panel-soft));
  box-shadow: inset 3px 0 0 var(--accent-strong);
}

.calibrationRegistryBridge__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calibrationRegistryBridge__text strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calibrationRegistryBridge__text p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.calibrationRegistryBridge .primaryButton {
  flex: 0 0 auto;
}

.calibrationIntakeChecklist {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 24%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-bg) 70%, transparent), transparent 74%),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-strong) 64%, var(--line));
}

.calibrationIntakeChecklist__header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calibrationIntakeChecklist__header strong,
.calibrationIntakeChecklist__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calibrationIntakeChecklist__header strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.calibrationIntakeChecklist__header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calibrationIntakeChecklist__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.calibrationIntakeChecklist__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.calibrationIntakeChecklist__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-strong) 18%, var(--panel-soft));
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.calibrationIntakeChecklist__item p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.calibrationRegistryBridge--standalone {
  align-items: flex-start;
  padding: 14px 16px;
}

.calibrationBridgeRoute {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.calibrationBridgeRoute__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.calibrationBridgeRoute__step {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.calibrationBridgeRoute__step strong,
.calibrationBridgeRoute__step p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calibrationBridgeRoute__step strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.calibrationBridgeRoute__step p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.calibrationActionGroup {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.calibrationActionGroup--primary {
  border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-strong) 58%, var(--line));
}

.calibrationActionGroup--danger {
  border-color: rgba(240, 189, 95, 0.36);
}

.calibrationActionGroup--status {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--line));
}

.calibrationActionGroup__header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.calibrationActionGroup__header strong,
.calibrationActionGroup__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calibrationActionGroup__header strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.calibrationActionGroup__header span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.calibrationActionGroup__body {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.calibrationActionGroup__body .primaryButton,
.calibrationActionGroup__body .secondaryButton,
.calibrationActionGroup__body .filterChip {
  flex: 1 1 150px;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.calibrationActionGroup__body .filterChip {
  display: inline-flex;
  align-items: center;
}

.calibrationSensitiveExport {
  gap: 8px;
}

.calibrationSensitiveExport summary {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--text);
  cursor: pointer;
}

.calibrationSensitiveExport summary span,
.calibrationSensitiveExport summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calibrationSensitiveExport summary span {
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.calibrationSensitiveExport summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.calibrationActions__left,
.rowActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.calibrationActions__left select {
  width: 94px;
}

.calibrationActions--grouped .calibrationActions__left select {
  flex: 0 0 94px;
}

@media (max-width: 1280px) {
  .calibrationActions--grouped {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calibrationBridgeRoute__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calibrationIntakeChecklist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .calibrationRegistryBridge {
    align-items: stretch;
    flex-direction: column;
  }

  .calibrationRegistryBridge .primaryButton {
    width: 100%;
  }

  .calibrationBridgeRoute__grid {
    grid-template-columns: 1fr;
  }

  .calibrationIntakeChecklist__grid {
    grid-template-columns: 1fr;
  }

  .calibrationActions--grouped {
    grid-template-columns: 1fr;
  }

  .calibrationActionGroup__body,
  .calibrationActionGroup__body .primaryButton,
  .calibrationActionGroup__body .secondaryButton,
  .calibrationActionGroup__body .filterChip,
  .calibrationActions--grouped .calibrationActions__left select {
    width: 100%;
  }
}

.rowActions {
  gap: 6px;
}

.tableActionSelect {
  width: 122px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  padding: 0 8px;
  font-size: 12px;
}

.tableActionSelect:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.callsActionSelect {
  width: 154px;
}

.bulkActionSelect {
  width: 176px;
}

.calibrationViewPanel .sectionHeader {
  margin-bottom: 8px;
}

.calibrationViewPanel .tabs {
  flex-wrap: wrap;
  overflow-x: visible;
}

.rowActions--manager {
  align-items: stretch;
}

.codexTaskPanel {
  gap: 14px;
}

.codexTaskList {
  display: grid;
  gap: 12px;
}

.codexTaskCard {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.codexTaskCard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.codexTaskLog {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.codexTaskLog--drawer {
  max-height: 260px;
}

.codexTaskResultStrip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
}

.codexTaskResultStrip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codexQueueTriageSummary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px;
  min-width: 0;
}

.codexQueueTriageSummary__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.codexQueueTriageSummary__hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.codexQueueTriageSummary__button {
  min-height: 28px;
  padding-inline: 10px;
}

.codexQueueTriageSummary__button[aria-pressed="true"] {
  box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.18), var(--shadow-soft);
}

.calibrationQuickRoutePanel {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.calibrationQuickRoutePanel--green {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  box-shadow: inset 3px 0 0 var(--success);
}

.calibrationQuickRoutePanel--yellow {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  box-shadow: inset 3px 0 0 var(--warning);
}

.calibrationQuickRoutePanel--red {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  box-shadow: inset 3px 0 0 var(--danger);
}

.calibrationQuickRoutePanel__header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.calibrationQuickRoutePanel__header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.calibrationQuickRoutePanel__header strong,
.calibrationQuickRoutePanel__header span,
.calibrationQuickRoutePanel__hint {
  min-width: 0;
  overflow-wrap: anywhere;
}

.calibrationQuickRoutePanel__header strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.calibrationQuickRoutePanel__header span,
.calibrationQuickRoutePanel__hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.calibrationQuickRoutePanel__body {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.calibrationQuickRoutePanel__select {
  display: grid;
  gap: 4px;
  flex: 1 1 210px;
  min-width: min(100%, 190px);
}

.calibrationQuickRoutePanel__select span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
}

.calibrationQuickRoutePanel__select select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
}

.calibrationQuickRoutePanel__selectVisible,
.calibrationQuickRoutePanel__body .primaryButton,
.calibrationQuickRoutePanel__body .secondaryButton {
  flex: 1 1 160px;
  justify-content: center;
  min-height: 34px;
  white-space: normal;
}

.calibrationQuickRoutePanel__manual {
  border-color: color-mix(in srgb, var(--warning) 62%, var(--line));
  background: var(--warning-bg);
  color: var(--warning);
}

.calibrationQuickRoutePanel__hint {
  flex: 2 1 260px;
  align-self: center;
}

.calibrationQuickRoutePanel__hint--blocked {
  color: var(--warning);
}

.codexQueueCell {
  gap: 3px;
}

.codexQueueCell__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.codexQueueCell__task,
.codexQueueCell__action {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.codexTriageCell {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 5px 7px 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: inset 3px 0 0 rgba(142, 142, 147, 0.38);
}

.codexTriageCell .statusBadge {
  width: max-content;
  max-width: 100%;
}

.codexTriageCell span:last-child {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}

.codexTriageCell--empty {
  opacity: 0.72;
}

.codexTriageCell--green {
  border-color: rgba(42, 168, 101, 0.34);
  background: rgba(37, 156, 94, 0.08);
  box-shadow: inset 3px 0 0 #2aa865;
}

.codexTriageCell--yellow {
  border-color: rgba(214, 145, 44, 0.36);
  background: rgba(214, 145, 44, 0.1);
  box-shadow: inset 3px 0 0 #d6912c;
}

.codexTriageCell--red {
  border-color: rgba(224, 80, 72, 0.34);
  background: rgba(224, 80, 72, 0.08);
  box-shadow: inset 3px 0 0 #e05048;
}

.codexTriageCell--white {
  border-color: rgba(142, 142, 147, 0.24);
  background: rgba(142, 142, 147, 0.045);
}

.codexTrafficLightSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.codexTriageList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.codexTriageItem {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.codexTriageItem__header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}

.codexTriageItem__header strong,
.codexTriageItem__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codexTriageItem p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.codexCaseList {
  display: grid;
  gap: 10px;
}

.codexCaseItem {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.codexCaseItem span,
.codexCaseItem p,
.codexBlockedCases p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.codexBlockedCases {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.codexPreflightList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.codexPreflightItem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.managerLinkControl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.managerLinkControl select {
  min-width: 150px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  padding: 0 8px;
}

.managerAccessWorkspace {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.managerAccessWorkspace--drawer {
  padding: 0;
  overflow: hidden;
}

.managerAccessWorkspace__summaryToggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.managerAccessWorkspace__summaryToggle::-webkit-details-marker {
  display: none;
}

.managerAccessWorkspace__summaryToggle::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  transition: transform 160ms ease;
}

.managerAccessWorkspace--drawer:not([open]) .managerAccessWorkspace__summaryToggle::after {
  transform: rotate(-90deg);
}

.managerAccessWorkspace__summaryToggle span,
.managerAccessWorkspace__summaryToggle em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.managerAccessWorkspace__summaryToggle span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.managerAccessWorkspace__summaryToggle em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
}

.managerAccessWorkspace--drawer > *:not(summary) {
  margin: 0 14px 12px;
}

.managerAccessWorkspace--drawer > .managerAccessWorkspace__header {
  margin-top: 2px;
}

.managerAccessWorkspace__header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px 18px;
  align-items: end;
}

.managerAccessWorkspace__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.managerAccessWorkspace__title strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.15;
}

.managerAccessWorkspace__controls,
.managerAccessWorkspace__summary,
.managerAccessWorkspace__lists {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.managerAccessWorkspace__controls {
  justify-content: flex-end;
  align-items: flex-end;
}

.managerAccessWorkspace__scopeSelect {
  min-width: 280px;
}

.managerAccessWorkspace__summary span,
.managerAccessWorkspace__lists span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  padding: 0 10px;
}

.managerAccessWorkspace__lists span {
  border-radius: var(--radius);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.managerPeriodAutomation {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(209, 209, 214, 0.34);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.managerPeriodAutomation__header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px 18px;
  align-items: start;
}

.managerPeriodAutomation__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.managerPeriodAutomation__title strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
}

.managerPeriodAutomation__eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.managerPeriodAutomation__stats,
.managerPeriodAutomation__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.managerPeriodAutomation__stats {
  justify-content: flex-end;
}

.managerPeriodAutomation__stats span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  padding: 0 10px;
}

.managerPeriodAutomation__stats span.isSuccess {
  border-color: rgba(105, 211, 141, 0.42);
  background: var(--success-bg);
  color: var(--success);
}

.managerPeriodAutomation__stats span.isWarning {
  border-color: rgba(240, 189, 95, 0.46);
  background: var(--warning-bg);
  color: var(--warning);
}

.managerPeriodAutomation__controls {
  align-items: flex-end;
}

.managerPeriodAutomation__message {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.managerPeriodAutomation .fieldStack {
  min-width: 190px;
}

.managerPeriodAutomation .primaryButton,
.managerPeriodAutomation .secondaryButton {
  min-height: 38px;
  margin-top: 0;
}

.managerPeriodPreview {
  display: grid;
  gap: 10px;
  width: min(100%, calc(100vw - 296px));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.managerPeriodPreview > * {
  min-width: 0;
}

.managerPeriodPreview__header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
}

.managerPeriodPreview__summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.managerPeriodPreview__summary strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.managerPeriodPreview__summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.managerPeriodPreview__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.managerPeriodPreview__bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.managerPeriodPreview__bulkTitle {
  display: grid;
  gap: 3px;
  flex: 1 0 100%;
  min-width: 0;
}

.managerPeriodPreview__bulkTitle strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.managerPeriodPreview__bulkTitle span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.managerPeriodPreview__bulk .fieldStack {
  flex: 1 1 128px;
  min-width: 0;
  margin-bottom: 0;
}

.managerPeriodPreview__bulk .managerPeriodPreview__rowSelector {
  flex-basis: 190px;
}

.managerPeriodPreview__bulk .tableAction {
  flex: 0 0 auto;
  min-width: 154px;
  min-height: 38px;
}

.managerMonthStatus {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.managerMonthStatus .statusBadge {
  width: fit-content;
  max-width: 100%;
}

.managerMonthStatus span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.managerAssignmentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.managerAssignmentHeader h3 {
  margin: 0;
}

.managerAssignmentList {
  display: grid;
  gap: 10px;
}

.managerAssignmentCard {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.managerAssignmentCard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.managerAssignmentCard__top strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.managerAssignmentGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px 10px;
}

.managerAssignmentGrid .fieldStack {
  margin-bottom: 0;
}

.managerAssignmentEmpty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.managerAssignmentSummary {
  display: grid;
  gap: 4px;
}

.managerAssignmentSummary span,
.managerAssignmentSummary small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.managerAssignmentSummary span {
  color: var(--text);
}

.managerPreviewAssignmentList {
  display: grid;
  gap: 8px;
}

.managerPreviewAssignment {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.managerPreviewAssignment__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.managerPreviewAssignment__top strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.managerPreviewAssignment__top span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.managerPreviewAssignment__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
}

.managerPreviewAssignment__grid .fieldStack {
  min-width: 0;
  margin-bottom: 0;
}

.managerPreviewAssignment__grid .fieldStack--wide {
  grid-column: span 2;
}

.managerPreviewAssignment__grid input,
.managerPreviewAssignment__grid select,
.managerPeriodPreview__bulk input,
.managerPeriodPreview__bulk select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .managerPeriodAutomation__header {
    grid-template-columns: 1fr;
  }

  .managerPeriodAutomation__stats {
    justify-content: flex-start;
  }

  .managerPeriodAutomation__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .managerPeriodAutomation .fieldStack,
  .managerPeriodAutomation .primaryButton,
  .managerPeriodAutomation .secondaryButton {
    width: 100%;
  }

  .managerPeriodPreview__header {
    grid-template-columns: 1fr;
  }

  .managerPeriodPreview {
    width: 100%;
  }

  .managerPeriodPreview__actions {
    justify-content: flex-start;
  }

  .managerPeriodPreview__bulk {
    align-items: stretch;
    flex-direction: column;
  }

  .managerPeriodPreview__bulkTitle,
  .managerPeriodPreview__bulk .fieldStack,
  .managerPeriodPreview__bulk .tableAction {
    flex: 1 1 auto;
    width: 100%;
  }

  .managerAssignmentHeader,
  .managerAssignmentCard__top {
    align-items: stretch;
    flex-direction: column;
  }

  .managerAssignmentGrid,
  .managerPreviewAssignment__grid {
    grid-template-columns: 1fr;
  }

  .managerPreviewAssignment__grid .fieldStack--wide {
    grid-column: auto;
  }
}

.calibrationForm {
  display: grid;
  gap: 0;
}

.tagGroup {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.tagGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 7px;
}

.tagOption {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-height: 34px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #1c1c1e;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.tagOption input,
.denseTable input[type="checkbox"] {
  accent-color: var(--accent);
}

.tagOption input[type="checkbox"] {
  flex: 0 0 14px;
  align-self: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
}

.tagOption:has(input:checked) {
  color: var(--text);
  border-color: rgba(209, 209, 214, 0.64);
  background: rgba(209, 209, 214, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tagOption:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.aiCalibrationBlock {
  display: grid;
  gap: 12px;
}

.codeBadgeStack {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.aiBlockList {
  display: grid;
  gap: 7px;
}

.aiBlockList__row {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiBlockList__row strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.aiSignalBox {
  padding: 10px 11px;
  border: 1px solid rgba(209, 209, 214, 0.32);
  border-radius: var(--radius);
  background: rgba(209, 209, 214, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.aiSignalBox strong {
  display: block;
  margin-bottom: 4px;
  color: #f2f2f7;
  font-size: 12px;
}

.aiSignalBox p {
  margin: 0;
  color: #c7dedb;
  font-size: 12px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.codeChecklist {
  display: grid;
  gap: 8px;
}

.codeOption {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #1c1c1e;
  color: var(--muted);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.codeOption input[type="checkbox"] {
  flex: 0 0 14px;
  align-self: flex-start;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 5px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.codeOption:has(input:checked) {
  color: var(--text);
  border-color: rgba(209, 209, 214, 0.64);
  background: rgba(209, 209, 214, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.codeOption:hover,
.codeOption:focus-within {
  color: var(--text);
  border-color: var(--line-strong);
}

.codeOption__body,
.codeOption__top {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.codeOption__top {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.codeOption__top strong,
.codeOption__description {
  min-width: 0;
  overflow-wrap: anywhere;
}

.codeOption__top strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.28;
}

.codeOption__description {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiEmptyState {
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.primaryButton--inline {
  width: auto;
  min-width: 142px;
  margin-top: 0;
}

.callsAiAction {
  min-height: 32px;
  min-width: 170px;
  padding: 0 12px;
  font-size: 12px;
}

.callsRerunNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.callsRerunNotice span {
  min-width: 0;
}

.callsRerunHint {
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

button:disabled,
.primaryButton:disabled,
.secondaryButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
  transform: none;
}

button:disabled:hover,
.primaryButton:disabled:hover,
.secondaryButton:disabled:hover {
  border-color: var(--line);
  background: var(--panel);
}

.primaryButton:disabled:hover {
  background: #d1d1d6;
  border-color: #d1d1d6;
}

.filterChip:disabled:hover,
.tableAction:disabled:hover {
  background: var(--panel);
  border-color: var(--line);
}

.stageList {
  display: grid;
  gap: 8px;
}

.stageRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.stageRow__name {
  color: var(--text);
  font-size: 13px;
}

.runSummary {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.importPreflight {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.importPreflight--ready {
  border-color: rgba(77, 214, 159, 0.38);
}

.importPreflight--warnings {
  border-color: rgba(240, 189, 95, 0.48);
}

.importPreflight--blocked {
  border-color: rgba(255, 107, 107, 0.48);
}

.preflightIssueList {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.preflightIssueList--danger {
  color: #ffd4d4;
}

.preflightIssueList--warning {
  color: #ffe8ba;
}

.importStepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.importStepper__item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.importStepper__item strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.importStepper__item span {
  color: var(--muted);
  font-size: 11px;
}

.importStepper__item--success {
  border-color: rgba(77, 214, 159, 0.35);
}

.importStepper__item--warning {
  border-color: rgba(240, 189, 95, 0.5);
}

.importStepper__item--danger {
  border-color: rgba(255, 107, 107, 0.5);
}

.importPreviewControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.toggleControl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.toggleControl input {
  width: 16px;
  min-height: 16px;
}

.dataHubTimeline__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dataHubTimeline__item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.dataHubTimeline__item strong {
  color: var(--text);
  font-size: 12px;
}

.dataHubTimeline__item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .importStepper,
  .dataHubTimeline__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .importStepper,
  .dataHubTimeline__items {
    grid-template-columns: 1fr;
  }
}

.errorBanner {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 107, 107, 0.52);
  border-radius: var(--radius);
  background: rgba(255, 107, 107, 0.16);
  color: #ffd4d4;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: inset 3px 0 0 var(--danger);
}

.warningBanner {
  padding: 7px 10px;
  border: 1px solid rgba(240, 189, 95, 0.5);
  border-radius: var(--radius);
  background: rgba(240, 189, 95, 0.1);
  color: #ffe8ba;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  box-shadow: inset 2px 0 0 var(--warning);
}

.infoBanner {
  padding: 10px 11px;
  border: 1px solid rgba(47, 128, 237, 0.35);
  border-radius: var(--radius);
  background: rgba(47, 128, 237, 0.11);
  color: var(--accent);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: inset 3px 0 0 var(--accent);
}

.postCheckHandoffBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.postCheckHandoffBanner strong,
.postCheckHandoffBanner span {
  display: block;
}

.postCheckHandoffBanner .secondaryButton {
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .postCheckHandoffBanner {
    align-items: stretch;
    flex-direction: column;
  }

  .postCheckHandoffBanner .secondaryButton {
    width: 100%;
  }
}

.privacyNotice {
  padding: 0;
  border: 1px solid rgba(240, 189, 95, 0.34);
  border-radius: var(--radius);
  background: rgba(240, 189, 95, 0.07);
  color: #ffe8ba;
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
}

.privacyNotice summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
}

.privacyNotice summary::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(240, 189, 95, 0.18);
  color: var(--warning);
  font-size: 11px;
  font-weight: 800;
}

.privacyNotice p {
  margin: 0;
  padding: 0 10px 8px 34px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.dashboardDisclosureGroup {
  display: block;
  min-width: 0;
}

.dashboardDisclosureGroup > summary {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.dashboardDisclosureGroup > summary::-webkit-details-marker {
  display: none;
}

.dashboardDisclosureGroup > summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  transition: transform 160ms ease;
}

.dashboardDisclosureGroup:not([open]) > summary::after {
  transform: rotate(-90deg);
}

.dashboardDisclosureGroup > summary span,
.dashboardDisclosureGroup > summary em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboardDisclosureGroup > summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.dashboardDisclosureGroup > summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
}

.dashboardDisclosureGroup > summary + * {
  margin-top: 10px;
}

.dashboardDisclosureGroup > *:not(summary):not(:last-child) {
  margin-bottom: 12px;
}

.technicalDisclosure {
  padding: 0;
  overflow: hidden;
}

.technicalDisclosure__summary {
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.technicalDisclosure__summary::-webkit-details-marker {
  display: none;
}

.technicalDisclosure__summary::after {
  content: "Показать";
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.technicalDisclosure[open] .technicalDisclosure__summary::after {
  content: "Скрыть";
}

.technicalDisclosure > :not(summary) {
  margin-left: 12px;
  margin-right: 12px;
}

.technicalDisclosure > :last-child {
  margin-bottom: 12px;
}

.successBanner {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(105, 211, 141, 0.44);
  border-radius: var(--radius);
  background: var(--success-bg);
  color: var(--success);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: inset 3px 0 0 var(--success);
}

.operationalPanel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #1c1c1e;
  box-shadow: inset 3px 0 0 rgba(209, 209, 214, 0.38);
}

.operationalPanel--compact {
  margin-top: 8px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.operationalSummary,
.operationalActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.operationalSummary {
  margin-bottom: 12px;
}

.operationalGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  min-width: 0;
}

.operationalGrid--two {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.operationalActions {
  margin: 2px 0 12px;
}

.operationalNotesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  min-width: 0;
}

.operationalNoteBox {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.operationalNoteBox h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.operationalNoteBox pre {
  max-height: 150px;
  overflow: auto;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: #d7dee5;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.operationalManualNote {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.operationalMeta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1260px) {
  .kpiGrid--six {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .singleCallReviewSheet {
    grid-template-columns: 1fr;
  }

  .singleCallReviewSheet__review {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .singleCallReviewSheet__transcript .transcriptBlock--full {
    max-height: 62vh;
  }

  .singleCallWorkHub__header,
  .singleCallWorkHub__facts,
  .singleCallWorkHub__columns {
    grid-template-columns: 1fr;
  }

  .singleCallWorkHub__header {
    display: grid;
  }

  .singleCallWorkHub__status {
    justify-content: flex-start;
  }

  .singleCallAudioPanel__header {
    display: grid;
  }

  .singleCallAudioActions .secondaryButton {
    width: 100%;
  }

  .callReviewContext {
    grid-template-columns: 1fr;
  }

  .singleCallScreen .callReviewContext {
    grid-template-columns: 1fr;
  }

  .managerProfileCard {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .scoreBlockGrid {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }

  .operationalGrid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .dashboardGrid--two,
  .detailGrid,
  .callOverviewGrid {
    grid-template-columns: 1fr;
  }

  .callHero {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bulkActionBar {
    grid-template-columns: 1fr;
  }

  .bulkActionBar__titleRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .bulkActionBar__clear {
    width: 100%;
  }

  .bulkActionBar__actions,
  .bulkActionBar__actions .filterChip,
  .bulkActionBar__actions .tableActionSelect {
    width: 100%;
  }

  .callHero h2 {
    font-size: 19px;
  }

  .callHero__score {
    justify-items: start;
    min-width: 0;
  }

  .callHero__actions {
    justify-content: flex-start;
  }

  .commandFilterPanel__grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 1120px) {
  .kpiGrid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .callsToolbar {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  }

  .guideGrid,
  .guideFull,
  .uploadGrid {
    grid-template-columns: 1fr;
  }

  .uploadModeGate__options {
    grid-template-columns: 1fr;
  }

  .operationalNotesGrid {
    grid-template-columns: 1fr;
  }

  .commandFilterPanel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .leftNav {
    position: static;
    width: auto;
    min-height: auto;
    gap: 10px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .leftNav__brand {
    padding: 0;
    border-bottom: 0;
  }

  .leftNav__role {
    padding: 0;
    border-bottom: 0;
  }

  .leftNav__role small {
    display: none;
  }

  .leftNav__scope {
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
  }

  .leftNav__menu {
    display: grid;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .leftNav__domains,
  .leftNav__group {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .leftNav__domains {
    padding: 0;
    border-top: 0;
  }

  .leftNav__domainButton,
  .leftNav__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .leftNav__domainButton {
    min-width: 128px;
    min-height: 36px;
  }

  .leftNav__groupTitle {
    display: none;
  }

  .leftNav__item {
    grid-template-columns: auto auto;
    min-height: 36px;
    padding: 0 12px;
  }

  .leftNav__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: 0;
  }

  .leftNav__footerToggle {
    width: auto;
    min-width: 36px;
    padding: 4px 8px;
  }

  .leftNav__footerToggle > span:first-child {
    display: none;
  }

  .leftNav__footerContent {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }

  .leftNav__footerContent[hidden] {
    display: none;
  }

  .systemStatus,
  .userPlate,
  .leftNav__footerText {
    display: none;
  }

  .themeToggle {
    width: 100%;
  }

  .mainArea {
    margin-left: 0;
    padding: 0 12px 28px;
  }

  .topBar {
    top: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .topBar__filters {
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .kpiGrid--four,
  .kpiGrid--six,
  .callsToolbar,
  .uploadGrid,
  .formGrid,
  .scoreBlockGrid,
  .evidenceGrid,
  .guideGrid,
  .guideFull,
  .tagGrid,
  .operationalGrid,
  .operationalNotesGrid {
    grid-template-columns: 1fr;
  }

  .managerAccessWorkspace__header {
    grid-template-columns: 1fr;
  }

  .managerAccessWorkspace__controls {
    justify-content: flex-start;
  }

  .managerAccessWorkspace__scopeSelect {
    min-width: min(100%, 280px);
  }

  .callHero {
    grid-template-columns: 1fr;
  }

  .managerProfileCard__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .searchBox {
    grid-column: auto;
    min-width: 0;
  }

  .callHero__score {
    justify-items: start;
  }

  .sideDrawer {
    max-width: 100vw;
    width: 100vw;
  }

  .periodSegments,
  .commandFilterPanel__apply {
    width: 100%;
  }

  .commandFilterPanel__grid {
    grid-template-columns: 1fr;
  }

  .paginationBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tableControls__right {
    justify-content: flex-start;
  }
}

/* Optional light mode for legacy operator preference */
 

body,
.appShell {
  background: var(--bg);
  color: var(--text);
}

.leftNav,
.topBar,
.filterBar,
.summaryStrip,
.callsToolbar,
.tableControls,
.callHero,
.tablePanel,
.chartCard,
.kpiCard,
.uploadPanel,
.summaryPanel,
.passportPanel,
.insightPanel,
.managerProfileCard,
.placeholderPanel,
.detailMain,
.detailGrid--single,
.operationalPanel,
.calibrationGuide {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
}

.leftNav {
  width: 236px;
}

.mainArea {
  margin-left: 236px;
}

.leftNav__brand,
.leftNav__footer,
.topBar,
.sectionHeader,
.panelHeader,
.chartCard__header,
.drawerSection,
.operationalNoteBox,
.operationalManualNote,
.operationalMeta {
  border-color: var(--line-soft);
}

.leftNav__brand span,
.topBar__eyebrow {
  color: var(--subtle);
  text-transform: none;
}

.leftNav__item {
  color: var(--muted);
  border-radius: 7px;
}

.leftNav__domainButton {
  color: var(--muted);
}

.leftNav__domainButton:hover,
.leftNav__domainButton.isActive {
  color: var(--text);
  border-color: var(--line);
  background: #f2f6f8;
  box-shadow: inset 0 -3px 0 var(--accent);
}

.leftNav__item:hover,
.leftNav__item.isActive {
  color: var(--text);
  border-color: var(--line);
  background: #f2f6f8;
  box-shadow: inset 3px 0 0 var(--accent);
}

.leftNav__item.isActive .leftNav__dot {
  background: var(--accent);
}

.topBar {
  background: rgba(244, 246, 248, 0.94);
  backdrop-filter: blur(14px);
}

.sourceChip,
.filterChip,
.secondaryButton,
.ghostButton,
.tableAction,
.iconButton,
.tabs__button,
.checkFilter,
.multiSelectFilter__summary {
  background: #ffffff;
  border-color: var(--line);
  color: #40505e;
}

.sourceChip--accent,
.filterChip--accent,
.tableAction--primary,
.tabs__button.isActive {
  background: #f6f6fa;
  border-color: #d1d1d6;
  color: #3a3a3c;
}

.sourceChip--quiet {
  background: #f6f8fa;
  color: var(--subtle);
}

.sourceChip--success {
  background: #e7f7ed;
  border-color: #9bd8b5;
  color: #246441;
}

.sourceChip--warning {
  background: #fff4d8;
  border-color: #ddb45c;
  color: #725011;
}

.sourceChip--danger {
  background: #ffe9e9;
  border-color: #e2a0a0;
  color: #7a2b2b;
}

.themeToggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.themeToggle:hover {
  background: #f6f9fb;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.themeToggle__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #bdd1dd;
  border-radius: 50%;
  background: #fbfbfd;
  color: var(--accent-strong);
  font-size: 13px;
  line-height: 1;
}

.filterChip:hover,
.secondaryButton:hover,
.ghostButton:hover,
.tableAction:hover,
.tabs__button:hover,
.multiSelectFilter__summary:hover {
  background: #f6f9fb;
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="light"] .multiSelectFilter.isOpen .multiSelectFilter__summary {
  background: #f6f9fb;
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

:root[data-theme="light"] .multiSelectFilter.isOpen .multiSelectFilter__chevron {
  border-color: var(--accent);
}

.primaryButton {
  background: #6e6e73;
  border-color: #6e6e73;
  color: #ffffff;
  box-shadow: none;
}

.primaryButton:hover {
  background: #3a3a3c;
  border-color: #3a3a3c;
}

.filterChip--success,
.tableAction--success {
  border-color: rgba(35, 122, 69, 0.28);
  background: rgba(35, 122, 69, 0.08);
  color: #185d34;
}

.filterChip--warning,
.tableAction--warning {
  border-color: rgba(167, 101, 17, 0.28);
  background: rgba(167, 101, 17, 0.09);
  color: #7c4a0b;
}

.filterChip--danger,
.secondaryButton--danger,
.tableAction--danger {
  border-color: rgba(185, 56, 56, 0.28);
  background: rgba(185, 56, 56, 0.08);
  color: #8e2727;
}

.statusStrip {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--line);
  box-shadow: 0 8px 22px rgba(37, 48, 60, 0.08);
}

.statusStrip__item {
  border-color: var(--line-soft);
}

.statusBadge--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

.statusBadge--warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

.statusBadge--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.statusBadge--muted,
.statusBadge--neutral {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.workQueueFilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.fieldStack--inline {
  margin-bottom: 0;
}

.fieldStack--tags {
  grid-column: 1 / -1;
}

.workQueueFilters .fieldStack input,
.workQueueFilters .fieldStack select,
.fieldStack input,
.fieldStack select,
.fieldStack textarea,
.searchBox input,
.callsToolbar select,
.dateFilter--toolbar input,
.calibrationToolbar select,
.calibrationActions select,
.managerLinkControl select,
.filterControl {
  background: var(--control-bg);
  color: var(--text);
  border-color: var(--line);
}

.workQueueFilters .fieldStack input:hover,
.workQueueFilters .fieldStack select:hover,
.fieldStack input:hover,
.fieldStack select:hover,
.fieldStack textarea:hover,
.searchBox input:hover,
.callsToolbar select:hover,
.dateFilter--toolbar input:hover,
.calibrationToolbar select:hover,
.calibrationActions select:hover,
.managerLinkControl select:hover,
.filterControl:hover,
.workQueueFilters .fieldStack input:focus,
.workQueueFilters .fieldStack select:focus,
.fieldStack input:focus,
.fieldStack select:focus,
.fieldStack textarea:focus,
.searchBox input:focus,
.callsToolbar select:focus,
.dateFilter--toolbar input:focus,
.calibrationToolbar select:focus,
.calibrationActions select:focus,
.managerLinkControl select:focus,
.filterControl:focus {
  background: #f7fafc;
  color: var(--text);
  border-color: var(--line-strong);
}

.workQueuePanel {
  min-height: 560px;
}

.queueActionConfirm {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.queueActionConfirm--success {
  border-color: rgba(35, 122, 69, 0.28);
}

.queueActionConfirm--warning {
  border-color: rgba(167, 101, 17, 0.28);
}

.queueActionConfirm__header,
.queueActionConfirm__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.queueActionConfirm__detail,
.queueActionConfirm__error {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.queueActionConfirm__detail {
  color: var(--muted);
}

.queueActionConfirm__error {
  color: var(--warning);
  font-weight: 760;
}

.queueActionConfirm__reason textarea {
  min-height: 68px;
  resize: vertical;
}

.queueActionConfirm__actions .tableAction {
  white-space: normal;
  text-align: center;
}

:root[data-theme="light"] .commandFilterPanel {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="light"] .periodSegments {
  background: var(--panel-soft);
  border-color: var(--line);
}

:root[data-theme="light"] .periodSegments button:hover,
:root[data-theme="light"] .periodSegments button.isActive {
  border-color: rgba(167, 101, 17, 0.36);
  background: rgba(167, 101, 17, 0.1);
  color: #7c4a0b;
}

:root[data-theme="light"] .commandField input,
:root[data-theme="light"] .commandField select {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
  color-scheme: light;
}

:root[data-theme="light"] .commandField input:hover,
:root[data-theme="light"] .commandField select:hover,
:root[data-theme="light"] .commandField input:focus,
:root[data-theme="light"] .commandField select:focus {
  background: #f7fafc;
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-theme="light"] .checkFilter:hover,
:root[data-theme="light"] .checkFilter:has(input:checked) {
  background: #f6f6fa;
  border-color: #d1d1d6;
  color: #3a3a3c;
}

:root[data-theme="light"] .paginationBar__button:hover:not(:disabled) {
  background: #f6f9fb;
  border-color: var(--line-strong);
  color: var(--text);
}

:root[data-theme="light"] .analyticsFilterPanel,
:root[data-theme="light"] .scrutexPanel {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="light"] .analyticsFilterField input,
:root[data-theme="light"] .analyticsFilterField select,
:root[data-theme="light"] .agentProfilePanel__select,
:root[data-theme="light"] .analyticsCompactSelect {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
  color-scheme: light;
}

:root[data-theme="light"] .analyticsFilterField input:hover,
:root[data-theme="light"] .analyticsFilterField select:hover,
:root[data-theme="light"] .analyticsFilterField input:focus,
:root[data-theme="light"] .analyticsFilterField select:focus,
:root[data-theme="light"] .agentProfilePanel__select:hover,
:root[data-theme="light"] .agentProfilePanel__select:focus,
:root[data-theme="light"] .analyticsCompactSelect:hover,
:root[data-theme="light"] .analyticsCompactSelect:focus {
  background: #f7fafc;
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-theme="light"] .scrutexLineChartWrap,
:root[data-theme="light"] .scrutexBarChart,
:root[data-theme="light"] .scrutexChartEmpty {
  background:
    linear-gradient(to right, rgba(95, 111, 125, 0.12) 1px, transparent 1px) 0 0 / 25% 100%,
    #f7fafc;
}

:root[data-theme="light"] .scrutexBarRow__track {
  background: #eef3f7;
}

:root[data-theme="light"] button.scrutexBarRow:hover,
:root[data-theme="light"] .scrutexBarRow.isSelected {
  background: rgba(167, 101, 17, 0.1);
  border-color: rgba(167, 101, 17, 0.36);
  color: var(--text);
}

.queueReason,
.queueMetaLine {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.queueReason strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.queueReason span,
.queueMetaLine span {
  color: var(--subtle);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.queueActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.queueActions--compact {
  align-items: stretch;
  gap: 5px;
}

.queueActions--compact .tableAction {
  min-width: max-content;
}

.queueDecisionSelect {
  width: 116px;
  min-width: 116px;
}

.denseTableWrap {
  --dense-table-surface: var(--panel);
  --dense-table-header-surface: var(--panel-strong);
  --dense-table-surface-clear: var(--panel);
  --dense-table-edge-shadow: var(--panel);
  border-color: var(--line);
}

.denseTable th {
  background: var(--panel-strong);
  color: var(--muted);
  border-color: var(--line);
}

.denseTable td {
  color: var(--text);
  border-color: var(--line-soft);
}

.denseTable tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 94%, var(--line));
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td {
  background: var(--panel-strong);
}

.denseTable tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

.denseTable tr.isSelected td,
.denseTable tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
}

.kpiCard {
  min-height: 86px;
}

.kpiCard:hover {
  background: var(--panel-strong);
  border-color: var(--line-strong);
}

.callHero,
.detailMain,
.detailGrid--single,
.summaryPanel,
.passportPanel,
.insightPanel,
.uploadPanel,
.tablePanel {
  background: #ffffff;
}

.chartCard,
.kpiCard {
  background: var(--panel);
}

.callHero {
  border-color: var(--line);
}

.callHero h2,
.callHero__score strong,
.sectionHeader h2,
.panelHeader h2,
.scoreBlock__head span,
.scoreBlock__head strong,
.evidenceAnchor__quote,
.transcriptRow__text {
  color: var(--text);
}

.callHero__subline,
.callHero__score span,
.scoreBlock p,
.scoreBlock small,
.scoreBlock__scoreNote,
.scoreContributionCell span,
.evidenceAnchor__meta {
  color: var(--muted);
}

.callHero__score .isRestrictedScore,
.previewPanel__score .isRestrictedScore {
  color: #8a520c;
}

.speakerChip--manager {
  color: #11605b;
  background: #dff5f1;
}

.speakerChip--client {
  color: #43515d;
  background: #edf2f6;
}

.managerSnapshotBox,
.queueHint,
.operationalNoteBox pre,
.multiSelectFilter__menu,
.stageRow,
.queueRow,
.evidenceAnchor,
.transcriptRow,
.scoreBlock {
  background: #f8fafb;
  border-color: var(--line);
}

.barRow__track {
  background: var(--panel-strong);
  border-color: var(--line);
}

.multiSelectFilter__menu,
.sideDrawer,
.sideDrawer__header,
.sideDrawerConfirm {
  background: #ffffff;
}

.sideDrawerOverlay {
  background: rgba(23, 32, 42, 0.24);
}

.sideDrawer {
  border-color: var(--line-strong);
}

.multiSelectFilter__option:hover,
.multiSelectFilter__option:has(input:checked),
.tagOption:has(input:checked),
.tagOption:hover,
.scoreBlock:hover,
.scoreBlock.isActive,
.evidenceAnchor:hover,
.evidenceAnchor.isActive,
.transcriptRow:hover,
.transcriptRow.isActive {
  background: #eaf5f3;
  border-color: #d1d1d6;
  color: var(--text);
}

.scoreBlock:hover .scoreBlock__head span,
.scoreBlock:hover .scoreBlock__head strong,
.scoreBlock.isActive .scoreBlock__head span,
.scoreBlock.isActive .scoreBlock__head strong,
.evidenceAnchor:hover .evidenceAnchor__quote,
.evidenceAnchor.isActive .evidenceAnchor__quote,
.transcriptRow:hover .transcriptRow__text,
.transcriptRow.isActive .transcriptRow__text {
  color: var(--text);
}

.transcriptRow--noEvidence:hover {
  background: #f8fafb;
  border-color: var(--line);
}

.tagGrid--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tagOption {
  background: #f8fafb;
  border-color: var(--line);
  color: #465562;
}

.tagOption--compact {
  align-items: center;
  min-height: 32px;
  padding: 6px 8px;
}

.tagOption--compact span {
  line-height: 1.2;
}

.warningBanner {
  background: rgba(167, 101, 17, 0.1);
  border-color: rgba(167, 101, 17, 0.28);
  color: #73470d;
}

:root[data-theme="light"] .privacyNotice {
  background: var(--warning-bg);
  border-color: rgba(167, 101, 17, 0.28);
  color: #73470d;
}

.errorBanner {
  background: rgba(185, 56, 56, 0.1);
  border-color: rgba(185, 56, 56, 0.28);
  color: #842323;
}

@media (max-width: 920px) {
  .leftNav {
    position: static;
    width: auto;
    min-height: auto;
    gap: 10px;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .leftNav__brand {
    padding: 0;
    border-bottom: 0;
  }

  .leftNav__role {
    padding: 0;
    border-bottom: 0;
  }

  .leftNav__role small {
    display: none;
  }

  .leftNav__scope {
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
  }

  .leftNav__menu {
    display: grid;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .leftNav__domains,
  .leftNav__group {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .leftNav__domains {
    padding: 0;
    border-top: 0;
  }

  .leftNav__domainButton,
  .leftNav__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .leftNav__domainButton {
    min-width: 128px;
    min-height: 36px;
  }

  .leftNav__groupTitle {
    display: none;
  }

  .leftNav__item {
    grid-template-columns: auto auto;
    min-height: 36px;
    padding: 0 12px;
  }

  .leftNav__footer {
    display: flex;
    padding: 0;
    border-top: 0;
  }

  .systemStatus,
  .userPlate,
  .leftNav__footerText {
    display: none;
  }

  .themeToggle {
    width: 100%;
  }

  .mainArea {
    margin-left: 0;
    padding: 0 16px 32px;
  }

  .topBar {
    top: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .topBar__filters {
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 100%;
  }

}

@media (max-width: 920px) {
  .leftNav {
    width: auto;
  }

  .mainArea {
    margin-left: 0;
  }

  .workQueueFilters {
    grid-template-columns: 1fr;
  }
}

 

:root[data-theme="dark"] body,
:root[data-theme="dark"] .appShell {
  background: var(--bg);
  color: var(--text);
}

:root[data-theme="dark"] .leftNav,
:root[data-theme="dark"] .topBar,
:root[data-theme="dark"] .filterBar,
:root[data-theme="dark"] .summaryStrip,
:root[data-theme="dark"] .callsToolbar,
:root[data-theme="dark"] .tableControls,
:root[data-theme="dark"] .callHero,
:root[data-theme="dark"] .tablePanel,
:root[data-theme="dark"] .chartCard,
:root[data-theme="dark"] .kpiCard,
:root[data-theme="dark"] .uploadPanel,
:root[data-theme="dark"] .summaryPanel,
:root[data-theme="dark"] .passportPanel,
:root[data-theme="dark"] .insightPanel,
:root[data-theme="dark"] .managerProfileCard,
:root[data-theme="dark"] .placeholderPanel,
:root[data-theme="dark"] .detailMain,
:root[data-theme="dark"] .detailGrid--single,
:root[data-theme="dark"] .operationalPanel,
:root[data-theme="dark"] .calibrationGuide {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="dark"] .callHero {
  background: var(--panel-soft);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .detailMain {
  background: #1c1c1e;
}

:root[data-theme="dark"] .topBar {
  background: rgba(9, 11, 15, 0.94);
}

:root[data-theme="dark"] .leftNav__item:hover,
:root[data-theme="dark"] .leftNav__item.isActive {
  border-color: var(--line);
  background: #242426;
  color: var(--text);
}

:root[data-theme="dark"] .leftNav__item.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
}

:root[data-theme="dark"] .sourceChip,
:root[data-theme="dark"] .filterChip,
:root[data-theme="dark"] .secondaryButton,
:root[data-theme="dark"] .ghostButton,
:root[data-theme="dark"] .tableAction,
:root[data-theme="dark"] .iconButton,
:root[data-theme="dark"] .tabs__button,
:root[data-theme="dark"] .checkFilter,
:root[data-theme="dark"] .multiSelectFilter__summary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--muted);
}

:root[data-theme="dark"] .sourceChip--accent,
:root[data-theme="dark"] .filterChip--accent,
:root[data-theme="dark"] .tableAction--primary,
:root[data-theme="dark"] .tabs__button.isActive {
  border-color: rgba(209, 209, 214, 0.64);
  background: var(--interactive-selected-bg);
  color: #f2f2f7;
}

:root[data-theme="dark"] .sourceChip--quiet {
  background: var(--control-bg);
  color: var(--subtle);
}

:root[data-theme="dark"] .sourceChip--success {
  border-color: rgba(105, 211, 141, 0.5);
  background: rgba(105, 211, 141, 0.1);
  color: #bcefcf;
}

:root[data-theme="dark"] .sourceChip--warning {
  border-color: #8d742e;
  background: #29220f;
  color: #ffe7a3;
}

:root[data-theme="dark"] .sourceChip--danger {
  border-color: #8f3b3b;
  background: #2b1719;
  color: #ffd1d1;
}

:root[data-theme="dark"] .callHero__score .isRestrictedScore,
:root[data-theme="dark"] .previewPanel__score .isRestrictedScore {
  color: #ffe8ba;
}

:root[data-theme="dark"] .speakerChip--manager {
  color: #f2f2f7;
  background: rgba(209, 209, 214, 0.16);
}

:root[data-theme="dark"] .speakerChip--client {
  color: #dde7f2;
  background: rgba(140, 158, 176, 0.16);
}

:root[data-theme="dark"] .themeToggle {
  background: var(--control-bg);
  border-color: var(--line);
  color: var(--text);
}

:root[data-theme="dark"] .themeToggle:hover {
  background: var(--panel-strong);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .themeToggle__icon {
  background: var(--interactive-selected-bg);
  border-color: rgba(209, 209, 214, 0.64);
  color: var(--accent);
}

:root[data-theme="dark"] .filterChip:hover,
:root[data-theme="dark"] .secondaryButton:hover,
:root[data-theme="dark"] .ghostButton:hover,
:root[data-theme="dark"] .tableAction:hover,
:root[data-theme="dark"] .tabs__button:hover,
:root[data-theme="dark"] .multiSelectFilter__summary:hover {
  background: var(--panel-strong);
  border-color: var(--line-strong);
  color: var(--text);
}

:root[data-theme="dark"] .primaryButton {
  background: #d1d1d6;
  border-color: #d1d1d6;
  color: #f5faff;
}

:root[data-theme="dark"] .filterChip--success,
:root[data-theme="dark"] .tableAction--success {
  border-color: rgba(105, 211, 141, 0.42);
  background: rgba(105, 211, 141, 0.12);
  color: #d9ffe3;
}

:root[data-theme="dark"] .filterChip--warning,
:root[data-theme="dark"] .tableAction--warning {
  border-color: rgba(240, 189, 95, 0.46);
  background: rgba(240, 189, 95, 0.12);
  color: #ffe6bd;
}

:root[data-theme="dark"] .filterChip--danger,
:root[data-theme="dark"] .secondaryButton--danger,
:root[data-theme="dark"] .tableAction--danger {
  border-color: rgba(255, 107, 107, 0.48);
  background: rgba(255, 107, 107, 0.13);
  color: #ffd1d1;
}

:root[data-theme="dark"] .statusStrip {
  background: rgba(18, 24, 31, 0.97);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .statusBadge--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
}

:root[data-theme="dark"] .statusBadge--warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
}

:root[data-theme="dark"] .statusBadge--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

:root[data-theme="dark"] .statusBadge--muted,
:root[data-theme="dark"] .statusBadge--neutral {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

:root[data-theme="dark"] .projectBadge--leebet {
  color: #f0dcff;
  background: rgba(164, 96, 255, 0.18);
  border-color: rgba(188, 132, 255, 0.48);
}

:root[data-theme="dark"] .projectBadge--kush {
  color: #ffe9a6;
  background: rgba(218, 167, 45, 0.18);
  border-color: rgba(240, 189, 95, 0.52);
}

:root[data-theme="dark"] .projectBadge--eva {
  color: #d7ffe4;
  background: rgba(66, 178, 104, 0.18);
  border-color: rgba(105, 211, 141, 0.48);
}

:root[data-theme="dark"] .projectBadge--banda {
  color: #ffd7d7;
  background: rgba(225, 72, 72, 0.18);
  border-color: rgba(255, 107, 107, 0.5);
}

:root[data-theme="dark"] .projectBadge--apex {
  color: #d7f4ff;
  background: rgba(68, 152, 214, 0.18);
  border-color: rgba(104, 185, 243, 0.5);
}

:root[data-theme="dark"] .projectBadge--unknown {
  color: #d2dbe4;
  background: rgba(141, 154, 168, 0.13);
  border-color: rgba(141, 154, 168, 0.28);
}

:root[data-theme="dark"] .workQueueFilters,
:root[data-theme="dark"] .managerSnapshotBox,
:root[data-theme="dark"] .queueHint,
:root[data-theme="dark"] .operationalNoteBox pre,
:root[data-theme="dark"] .multiSelectFilter__menu,
:root[data-theme="dark"] .queueRow,
:root[data-theme="dark"] .evidenceAnchor,
:root[data-theme="dark"] .transcriptRow,
:root[data-theme="dark"] .scoreBlock,
:root[data-theme="dark"] .tagOption {
  background: #1c1c1e;
  border-color: var(--line);
}

:root[data-theme="dark"] .denseTableWrap {
  background: var(--panel);
  border-color: var(--line);
}

:root[data-theme="dark"] .barRow__track {
  background: var(--panel-strong);
  border-color: var(--line);
}

:root[data-theme="dark"] .workQueueFilters .fieldStack input,
:root[data-theme="dark"] .workQueueFilters .fieldStack select,
:root[data-theme="dark"] .fieldStack input,
:root[data-theme="dark"] .fieldStack select,
:root[data-theme="dark"] .fieldStack textarea,
:root[data-theme="dark"] .searchBox input,
:root[data-theme="dark"] .callsToolbar select,
:root[data-theme="dark"] .dateFilter--toolbar input,
:root[data-theme="dark"] .calibrationToolbar select,
:root[data-theme="dark"] .calibrationActions select,
:root[data-theme="dark"] .managerLinkControl select,
:root[data-theme="dark"] .filterControl {
  background: var(--control-bg);
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] .workQueueFilters .fieldStack input:hover,
:root[data-theme="dark"] .workQueueFilters .fieldStack select:hover,
:root[data-theme="dark"] .fieldStack input:hover,
:root[data-theme="dark"] .fieldStack select:hover,
:root[data-theme="dark"] .fieldStack textarea:hover,
:root[data-theme="dark"] .searchBox input:hover,
:root[data-theme="dark"] .callsToolbar select:hover,
:root[data-theme="dark"] .dateFilter--toolbar input:hover,
:root[data-theme="dark"] .calibrationToolbar select:hover,
:root[data-theme="dark"] .calibrationActions select:hover,
:root[data-theme="dark"] .managerLinkControl select:hover,
:root[data-theme="dark"] .filterControl:hover,
:root[data-theme="dark"] .workQueueFilters .fieldStack input:focus,
:root[data-theme="dark"] .workQueueFilters .fieldStack select:focus,
:root[data-theme="dark"] .fieldStack input:focus,
:root[data-theme="dark"] .fieldStack select:focus,
:root[data-theme="dark"] .fieldStack textarea:focus,
:root[data-theme="dark"] .searchBox input:focus,
:root[data-theme="dark"] .callsToolbar select:focus,
:root[data-theme="dark"] .dateFilter--toolbar input:focus,
:root[data-theme="dark"] .calibrationToolbar select:focus,
:root[data-theme="dark"] .calibrationActions select:focus,
:root[data-theme="dark"] .managerLinkControl select:focus,
:root[data-theme="dark"] .filterControl:focus {
  background: #242426;
  color: var(--text);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .multiSelectFilter__menu,
:root[data-theme="dark"] .sideDrawer,
:root[data-theme="dark"] .sideDrawer__header,
:root[data-theme="dark"] .sideDrawerConfirm {
  background: #1c1c1e;
}

:root[data-theme="dark"] .denseTableWrap {
  --dense-table-surface: var(--panel);
  --dense-table-header-surface: var(--panel-strong);
  --dense-table-surface-clear: var(--panel);
  --dense-table-edge-shadow: var(--panel);
  background:
    var(--panel);
}

:root[data-theme="dark"] .denseTable th {
  background: var(--panel-strong);
  color: var(--muted);
  border-color: var(--line);
}

:root[data-theme="dark"] .denseTable td {
  color: var(--text);
  border-color: var(--line);
}

:root[data-theme="dark"] .denseTable tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 94%, var(--line));
}

:root[data-theme="dark"] .denseTable tbody tr:hover td,
:root[data-theme="dark"] .denseTable tr.isClickable:hover td {
  background: var(--panel-strong);
}

:root[data-theme="dark"] .denseTable tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

:root[data-theme="dark"] .denseTable tr.isSelected td,
:root[data-theme="dark"] .denseTable tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
}

:root[data-theme="dark"] .kpiCard:hover {
  background: var(--panel-strong);
  border-color: var(--line-strong);
}

:root[data-theme="dark"] .queueReason strong {
  color: var(--text);
}

:root[data-theme="dark"] .queueReason span,
:root[data-theme="dark"] .queueMetaLine span {
  color: var(--subtle);
}

:root[data-theme="dark"] .multiSelectFilter__option:hover,
:root[data-theme="dark"] .multiSelectFilter__option:has(input:checked),
:root[data-theme="dark"] .tagOption:has(input:checked),
:root[data-theme="dark"] .tagOption:hover,
:root[data-theme="dark"] .scoreBlock:hover,
:root[data-theme="dark"] .scoreBlock.isActive,
:root[data-theme="dark"] .evidenceAnchor:hover,
:root[data-theme="dark"] .evidenceAnchor.isActive,
:root[data-theme="dark"] .transcriptRow:hover,
:root[data-theme="dark"] .transcriptRow.isActive {
  background: var(--interactive-selected-bg);
  border-color: rgba(209, 209, 214, 0.64);
  color: var(--text);
}

:root[data-theme="dark"] .transcriptRow--noEvidence:hover {
  background: #1c1c1e;
  border-color: var(--line);
}

:root[data-theme="dark"] .warningBanner {
  background: rgba(240, 189, 95, 0.1);
  border-color: rgba(240, 189, 95, 0.42);
  color: #ffe8ba;
}

:root[data-theme="dark"] .errorBanner {
  background: rgba(255, 107, 107, 0.16);
  border-color: rgba(255, 107, 107, 0.52);
  color: #ffd4d4;
}

.kpiCard--clickable {
  cursor: pointer;
}

.kpiCard--clickable:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--interactive-selected-shadow);
}

.kpiCard.isSelected,
.kpiCard--clickable:hover {
  border-color: var(--line-strong);
}

.kpiCard__action {
  margin-top: 10px;
  color: var(--accent-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.barRow--clickable {
  appearance: none;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
}

.barRow--clickable:hover {
  border-color: var(--line);
  background: var(--panel-strong);
  outline: none;
}

.barRow--clickable:focus-visible {
  border-color: var(--line);
  background: var(--accent-soft);
  outline: none;
}

.analyticsModeBar,
.analyticsSection,
.analyticsPersonalPanel,
.emptyState,
.loadingState {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.analyticsModeBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.analyticsModeBar__left,
.analyticsCaseActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analyticsModeBar__summary {
  color: var(--muted);
  font-size: 12px;
}

.analyticsSection,
.analyticsPersonalPanel {
  padding: 14px;
}

.analyticsBlockList {
  display: grid;
  gap: 8px;
}

.analyticsBlockRow {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(160px, 1.4fr) 70px 110px 112px 132px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--text);
  text-align: left;
}

.analyticsBlockRow:hover,
.analyticsBlockRow:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.analyticsBlockRow__title {
  font-weight: 760;
  line-height: 1.25;
}

.analyticsBlockRow__bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-bg);
}

.analyticsBlockRow__bar span {
  display: block;
  height: 100%;
  background: var(--success);
}

.analyticsBlockRow--warning .analyticsBlockRow__bar span {
  background: var(--warning);
}

.analyticsBlockRow--danger .analyticsBlockRow__bar span {
  background: var(--danger);
}

.analyticsBlockRow--muted .analyticsBlockRow__bar span {
  background: var(--subtle);
}

.analyticsBlockRow__metric {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.analyticsMatrixWrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.analyticsMatrix {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.analyticsMatrix th,
.analyticsMatrix td {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  vertical-align: middle;
}

.analyticsMatrix th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-strong);
  color: var(--muted);
  font-weight: 760;
  text-align: left;
}

.analyticsMatrix th:last-child,
.analyticsMatrix td:last-child {
  border-right: 0;
}

.analyticsMatrix__person {
  display: grid;
  gap: 4px;
}

.analyticsLinkButton,
.analyticsSubLink {
  appearance: none;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 760;
  text-align: left;
  line-height: 1.25;
}

.analyticsSubLink {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.analyticsLinkButton:hover,
.analyticsSubLink:hover,
.analyticsLinkButton:focus-visible,
.analyticsSubLink:focus-visible {
  color: var(--accent-strong);
  outline: none;
}

.analyticsHeatCell {
  appearance: none;
  display: grid;
  gap: 2px;
  place-items: center;
  width: 100%;
  min-height: 48px;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--muted-bg);
  color: var(--text);
  cursor: pointer;
}

.analyticsHeatCell strong {
  font-size: 13px;
  line-height: 1.1;
}

.analyticsHeatCell span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
}

.analyticsHeatCell--success {
  border-color: rgba(35, 122, 69, 0.24);
  background: var(--success-bg);
}

.analyticsHeatCell--warning {
  border-color: rgba(167, 101, 17, 0.28);
  background: var(--warning-bg);
}

.analyticsHeatCell--danger {
  border-color: rgba(185, 56, 56, 0.32);
  background: var(--danger-bg);
}

.analyticsHeatCell--muted {
  color: var(--muted);
  background: var(--panel-soft);
}

.analyticsHeatCell:hover,
.analyticsHeatCell:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
  outline: none;
}

.analyticsReasonGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.analyticsReasonPanel {
  min-width: 0;
}

.analyticsReasonList {
  display: grid;
  gap: 8px;
}

.analyticsReasonItem {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.analyticsReasonItem span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.analyticsReasonItem:hover,
.analyticsReasonItem:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  outline: none;
}

.analyticsPersonalGrid,
.analyticsMetricsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.analyticsMetricsGrid.analyticsMetricsGrid--primary,
.analyticsMetricsGrid.analyticsMetricsGrid--secondary {
  grid-template-columns: 1fr;
}

.analyticsPersonalGrid > div,
.analyticsMetric {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.analyticsPersonalGrid span,
.analyticsMetric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.analyticsPersonalGrid strong,
.analyticsMetric strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 17px;
  line-height: 1.15;
}

.analyticsMetric .statusBadge {
  margin-top: 8px;
}

.emptyState,
.loadingState {
  padding: 18px;
  color: var(--muted);
}

.emptyState h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 15px;
}

.emptyState p {
  margin: 0;
}

.analyticsDrawer {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.analyticsBreadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.analyticsBreadcrumbs span:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--subtle);
}

.analyticsMeaning,
.analyticsCaseCard {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.analyticsMeaning strong {
  display: block;
  margin-bottom: 4px;
}

.analyticsMeaning p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.analyticsDrawerControls {
  padding: 10px;
}

.analyticsDrawerControls > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.analyticsCaseCard .sectionHeader {
  margin-bottom: 10px;
}

.analyticsCaseActions {
  margin-top: 12px;
}

.matrixPanelStack {
  display: grid;
  gap: 14px;
}

.matrixSummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.matrixSummaryTile {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.matrixSummaryTile > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.matrixSummaryTile strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.matrixSummaryTile p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrixEvidenceCell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.matrixEvidenceCell strong {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.matrixEvidenceCell span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.matrixFixList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.matrixFixItem {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.matrixFixItem__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.matrixFixItem p {
  margin: 10px 0 6px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.matrixFixItem span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrixSettingsScreen .kpiGrid {
  align-items: stretch;
  gap: 8px;
}

.matrixSettingsScreen .kpiCard {
  min-height: 0;
  padding: 10px;
}

.matrixSettingsScreen .kpiCard__value {
  margin-top: 4px;
  font-size: var(--text-legacy-22);
  line-height: 1;
}

.matrixSettingsScreen .kpiCard__delta {
  margin-top: 4px;
  font-size: var(--text-xs);
}

.matrixStatusStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.matrixStatusStrip div {
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid var(--line-soft);
}

.matrixStatusStrip div:first-child {
  border-left: 0;
  padding-left: 0;
}

.matrixStatusStrip span,
.matrixStatusStrip strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrixStatusStrip span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  text-transform: uppercase;
}

.matrixStatusStrip strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.matrixJumpNav {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 6px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--bg);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.matrixJumpNav button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
  padding: 0 9px;
}

.matrixJumpNav button:hover,
.matrixJumpNav button:focus-visible {
  border-color: var(--line-strong);
  background: var(--interactive-hover-bg);
  color: var(--text);
}

.matrixToolbar {
  align-items: end;
}

.matrixDisclosure {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.matrixDisclosureSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.matrixDisclosureSummary::-webkit-details-marker {
  display: none;
}

.matrixDisclosureSummary span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
  overflow-wrap: anywhere;
}

.matrixDisclosureSummary em {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
  text-align: right;
  overflow-wrap: anywhere;
}

.matrixDisclosureSummary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.matrixDisclosure[open] > .matrixDisclosureSummary::after {
  transform: rotate(225deg) translateY(-1px);
}

.matrixDisclosureBody {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 12px 12px;
}

.matrixOverviewDisclosure {
  background: var(--panel-soft);
}

.matrixContextPanel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.matrixPanelIntro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.matrixPanelIntro__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.matrixPanelIntro__copy > span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.1;
  text-transform: uppercase;
}

.matrixPanelIntro h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.22;
}

.matrixPanelIntro p {
  max-width: 920px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrixPanelIntro__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: min(360px, 42%);
  color: var(--subtle);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.matrixContextGrid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(260px, 1.25fr) minmax(220px, 1fr) minmax(180px, 0.9fr);
  gap: 0 12px;
  align-items: end;
}

.matrixWorkflowLabel {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.matrixWorkflowLabel--actions {
  grid-column: 1 / -1;
  margin-top: -2px;
  margin-bottom: 0;
}

.matrixWorkflowLabel strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
}

.matrixWorkflowLabel span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.matrixContextActions {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 0;
  white-space: normal;
}

.matrixActionGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.matrixActionGroup > span {
  flex: 1 0 100%;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  text-transform: uppercase;
}

.matrixActionGroup--primary {
  border-color: var(--line);
}

.matrixContextActions .primaryButton,
.matrixContextActions .secondaryButton {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.matrixContextPanel .privacyNotice {
  margin-top: 10px;
}

.matrixSettingsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.matrixRulesPanel {
  min-width: 0;
}

.qaSettingsScreen .qaRegistryMetaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  margin: 10px 0 4px;
}

.qaSettingsScreen .qaRegistryMetaItem {
  min-width: 0;
  padding: 8px 0 8px 10px;
  border-left: 1px solid var(--line);
}

.qaSettingsScreen .qaRegistryMetaItem--wide {
  grid-column: 1 / -1;
}

.qaSettingsScreen .qaRegistryMetaItem span,
.qaSettingsScreen .qaRegistryMetaItem small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.qaSettingsScreen .qaRegistryMetaItem strong {
  display: block;
  margin: 2px 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.qaSettingsScreen .qaSettingsSafetyStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.qaSettingsScreen .qaSettingsSafetyStrip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
}

.qaSettingsScreen .qaSettingsSafetyStrip strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.qaSettingsScreen .qaSettingsOverview,
.qaSettingsScreen .qaSettingsCatalogDetails,
.qaSettingsScreen .qaSettingsRareAction {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.qaSettingsScreen .qaSettingsOverview > summary,
.qaSettingsScreen .qaSettingsCatalogDetails > summary,
.qaSettingsScreen .qaSettingsRareAction > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.qaSettingsScreen .qaSettingsOverview > summary::-webkit-details-marker,
.qaSettingsScreen .qaSettingsCatalogDetails > summary::-webkit-details-marker,
.qaSettingsScreen .qaSettingsRareAction > summary::-webkit-details-marker,
.qaSettingsScreen .qaSettingsGroup__summary::-webkit-details-marker {
  display: none;
}

.qaSettingsScreen .qaSettingsOverview > summary::after,
.qaSettingsScreen .qaSettingsCatalogDetails > summary::after,
.qaSettingsScreen .qaSettingsRareAction > summary::after,
.qaSettingsScreen .qaSettingsGroup__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.qaSettingsScreen .qaSettingsOverview[open] > summary::after,
.qaSettingsScreen .qaSettingsCatalogDetails[open] > summary::after,
.qaSettingsScreen .qaSettingsRareAction[open] > summary::after,
.qaSettingsScreen .qaSettingsGroup--disclosure[open] > .qaSettingsGroup__summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.qaSettingsScreen .qaSettingsOverview > summary span,
.qaSettingsScreen .qaSettingsCatalogDetails > summary span,
.qaSettingsScreen .qaSettingsRareAction > summary span {
  min-width: 0;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.qaSettingsScreen .qaSettingsOverview > summary em,
.qaSettingsScreen .qaSettingsCatalogDetails > summary em,
.qaSettingsScreen .qaSettingsRareAction > summary em {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  text-align: right;
}

.qaSettingsScreen .qaSettingsOverview[open] {
  padding-bottom: 12px;
}

.qaSettingsScreen .qaSettingsOverview[open] > .dashboardLogicMap,
.qaSettingsScreen .qaSettingsOverview[open] > .infoBanner,
.qaSettingsScreen .qaSettingsOverview[open] > .guidanceStrip {
  margin: 0 12px 10px;
}

.qaSettingsScreen .qaSettingsCompactNotice {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.qaSettingsScreen .qaSettingsFormSections {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.qaSettingsScreen .qaSettingsGroup {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.qaSettingsScreen .qaSettingsGroup--disclosure {
  display: block;
  padding: 0;
}

.qaSettingsScreen .qaSettingsGroup__header {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qaSettingsScreen .qaSettingsGroup__header > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.qaSettingsScreen .qaSettingsGroup__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.qaSettingsScreen .qaSettingsGroup__header p,
.qaSettingsScreen .qaSettingsInlineHelp {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.qaSettingsScreen .qaSettingsGroup__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.qaSettingsScreen .qaSettingsGroup__summary .qaSettingsGroup__header {
  flex: 1 1 auto;
}

.qaSettingsScreen .qaSettingsGroup__summary em {
  flex: 0 0 auto;
  max-width: 180px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  text-align: right;
}

.qaSettingsScreen .qaSettingsGroup__body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 14px 14px;
}

.qaSettingsScreen .qaSettingsGroup__description {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.qaSettingsScreen .qaSettingsThresholdGrid,
.qaSettingsScreen .qaSettingsFocusGrid {
  margin: 0;
}

.qaSettingsScreen .qaSettingsThresholdBlock {
  display: grid;
  gap: 12px;
}

.qaSettingsScreen .qaSettingsThresholdSaveRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.qaSettingsScreen .qaSettingsThresholdSaveRow .primaryButton {
  width: auto;
  margin-top: 0;
  white-space: normal;
}

.qaSettingsScreen .qaSettingsSelectionBlock {
  margin: 0;
  padding: 0;
}

.qaSettingsScreen .qaSettingsAuditDetails {
  margin-top: 14px;
}

.qaSettingsScreen .qaSettingsActionBar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}

.qaSettingsScreen .qaSettingsActionBar__main,
.qaSettingsScreen .qaSettingsActionBar__rare {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.qaSettingsScreen .qaSettingsActionBar__main strong,
.qaSettingsScreen .qaSettingsActionBar__rare strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

.qaSettingsScreen .qaSettingsActionBar__main span,
.qaSettingsScreen .qaSettingsActionBar__rare span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.qaSettingsScreen .qaSettingsActionBar .uploadActions {
  margin-top: 4px;
}

.qaSettingsScreen .qaSettingsActionBar__rare .secondaryButton {
  justify-self: start;
  margin-top: 4px;
  white-space: normal;
}

.qaSettingsScreen .qaSettingsSaveRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.qaSettingsScreen .qaSettingsSaveRow__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qaSettingsScreen .qaSettingsSaveRow__copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.qaSettingsScreen .qaSettingsSaveRow__copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.qaSettingsScreen .qaSettingsSaveRow .primaryButton,
.qaSettingsScreen .qaSettingsSaveRow .secondaryButton {
  width: auto;
  margin-top: 0;
  white-space: normal;
}

.qaSettingsScreen .qaSettingsRareAction {
  margin-top: 8px;
  background: var(--panel-soft);
}

.qaSettingsScreen .qaSettingsRareAction__body {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
  padding: 0 12px 12px;
}

.qaSettingsScreen .qaSettingsRareAction__body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.qaSettingsScreen .warningBanner ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.qaSettingsScreen .warningBanner li {
  margin: 2px 0;
}

.qaSettingsScreen textarea[readonly] {
  background: var(--panel-soft);
  color: var(--muted);
}

.qaSettingsScreen .qaTagCatalogSearchBox {
  flex: 1 1 320px;
  grid-column: auto;
  max-width: 560px;
}

.qaSettingsScreen .qaTagCatalogSearch {
  min-width: min(320px, 100%);
}

.qaSettingsScreen .qaTagCatalogNote {
  margin-top: -2px;
}

.qaSettingsScreen .qaSettingsCatalogDetails {
  margin-top: 10px;
}

.qaSettingsScreen .qaSettingsCatalogDetails[open] {
  padding-bottom: 12px;
}

.qaSettingsScreen .qaSettingsCatalogDetails .denseTableWrap {
  margin: 0 12px;
}

.qaSettingsScreen .qaTagCatalogCode {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
}

.qaSettingsScreen .qaTagWeightInput {
  width: 82px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  text-align: right;
}

.qaSettingsScreen .qaTagWeightInput:disabled {
  opacity: 0.66;
  cursor: not-allowed;
}

.qaSettingsScreen .qaTagCatalogDescription {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.35;
}

.qaSettingsScreen .qaTagCatalogInput,
.qaSettingsScreen .qaTagCatalogNumber,
.qaSettingsScreen .qaTagCatalogTextarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
}

.qaSettingsScreen .qaTagCatalogInput,
.qaSettingsScreen .qaTagCatalogNumber {
  min-height: 32px;
  padding: 5px 8px;
}

.qaSettingsScreen .qaTagCatalogTextarea {
  min-height: 52px;
  padding: 7px 8px;
  line-height: 1.32;
  resize: vertical;
  white-space: normal;
}

.qaSettingsScreen .denseTable td:has(.qaTagCatalogTextarea) {
  height: 68px;
  vertical-align: top;
}

@media (max-width: 860px) {
  .qaSettingsScreen .qaSettingsSafetyStrip {
    grid-template-columns: 1fr;
  }

  .qaSettingsScreen .qaSettingsActionBar {
    grid-template-columns: 1fr;
  }

  .qaSettingsScreen .qaSettingsSaveRow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .qaSettingsScreen .qaSettingsThresholdSaveRow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .qaSettingsScreen .qaSettingsSaveRow .primaryButton,
  .qaSettingsScreen .qaSettingsSaveRow .secondaryButton,
  .qaSettingsScreen .qaSettingsThresholdSaveRow .primaryButton {
    width: 100%;
  }

  .qaSettingsScreen .qaSettingsGroup {
    padding: 12px;
  }

  .qaSettingsScreen .qaSettingsGroup--disclosure {
    padding: 0;
  }

  .qaSettingsScreen .qaSettingsGroup__summary {
    align-items: flex-start;
  }

  .qaSettingsScreen .qaSettingsGroup__summary em {
    max-width: 96px;
  }

  .usersAccessPanel__grid {
    grid-template-columns: 1fr;
  }
}

.matrixContextRulePanel {
  border-color: var(--line-strong);
}

.matrixContextRulePanel .denseTableWrap {
  max-height: min(620px, 68vh);
  overflow: auto;
}

.matrixContextSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrixContextGoal {
  flex-basis: 100%;
  color: var(--text);
  font-weight: 700;
}

.matrixConditionCell {
  min-width: 0;
}

.matrixConditionCell strong,
.matrixConditionCell span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.matrixConditionCell strong {
  font-size: 12px;
  line-height: 1.25;
}

.matrixConditionCell span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.matrixRuleForm {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.matrixRuleForm--wide {
  width: 100%;
}

.matrixFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

.matrixConfigGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 0 12px;
}

.matrixErrorFocusPanel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.matrixErrorFocusGrid {
  margin-bottom: 12px;
}

.matrixErrorFocusSection {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 12px;
}

.matrixErrorFocusSection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrixNestedDisclosure {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.matrixNestedDisclosure > summary {
  min-height: 34px;
  padding: 0 9px;
  cursor: pointer;
  list-style: none;
}

.matrixNestedDisclosure > summary::-webkit-details-marker {
  display: none;
}

.matrixNestedDisclosure > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.matrixNestedDisclosure[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.matrixNestedDisclosure .matrixErrorFocusChipGrid {
  padding: 0 9px 9px;
}

.matrixErrorFocusChipGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.matrixErrorFocusChipGrid .filterChip {
  min-height: 34px;
  max-width: 320px;
  white-space: normal;
  text-align: left;
}

.matrixErrorFocusChipGrid--blocks .filterChip {
  max-width: 220px;
}

.matrixErrorFocusActions {
  margin-top: 12px;
}

.matrixEditorGuardrail {
  margin: -2px 0 12px;
}

.matrixSaveActions {
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin: 12px -14px -14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(28, 28, 30, 0.96);
  backdrop-filter: blur(12px);
}

.matrixSaveActions .mutedText {
  flex: 1 1 320px;
  min-width: min(260px, 100%);
}

.matrixRuleForm textarea {
  min-height: 92px;
  padding-top: 9px;
  font-family: var(--font-mono);
  line-height: 1.35;
  resize: vertical;
}

.matrixRuleForm--checklist textarea {
  font-family: inherit;
}

.matrixChecklist {
  display: grid;
  gap: 12px;
  margin: 4px 0 14px;
}

.matrixChecklistGroup {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.matrixChecklistGroup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.matrixChecklistGroup__header h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.matrixChecklistGroup__header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.matrixChecklistGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.matrixChecklistItem {
  display: grid;
  grid-template-columns: 0 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  cursor: pointer;
}

.matrixChecklistItem input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.matrixChecklistItem__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--panel);
  background: var(--control-bg);
  font-size: 15px;
  font-weight: 900;
}

.matrixChecklistItem.isChecked {
  border-color: rgba(105, 211, 141, 0.44);
  background: var(--success-bg);
}

.matrixChecklistItem.isChecked .matrixChecklistItem__mark {
  border-color: var(--success);
  background: var(--success);
  color: #0f1720;
}

.matrixChecklistItem__body {
  min-width: 0;
}

.matrixChecklistItem__body strong,
.matrixChecklistItem__body small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.matrixChecklistItem__body strong {
  font-size: 12px;
  line-height: 1.25;
}

.matrixChecklistItem__body small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.matrixChecklistItem:hover,
.matrixChecklistItem:focus-within {
  border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
}

.matrixLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}

.requirementMatrixWrap {
  overflow-x: auto;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.requirementMatrixBlockStack {
  display: grid;
  gap: 8px;
  min-width: 1120px;
  padding: 8px;
}

.requirementBlockDisclosure {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.requirementBlockDisclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.requirementBlockDisclosure > summary::-webkit-details-marker {
  display: none;
}

.requirementBlockDisclosure > summary span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
  overflow-wrap: anywhere;
}

.requirementBlockDisclosure > summary em {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
}

.requirementBlockDisclosure > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.requirementBlockDisclosure[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.requirementBlockDisclosure .requirementMatrix {
  border-top: 1px solid var(--line-soft);
}

.requirementMatrix {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.requirementMatrix th,
.requirementMatrix td {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 8px;
  vertical-align: middle;
}

.requirementMatrix th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.requirementMatrix th:first-child,
.requirementMatrix th:nth-child(2) {
  text-align: left;
}

.requirementMatrix th:first-child {
  width: 150px;
}

.requirementMatrix th:nth-child(2) {
  width: 360px;
}

.requirementMatrix th:nth-child(n+3) {
  width: 122px;
}

.requirementMatrix tr:last-child td {
  border-bottom: 0;
}

.requirementMatrix td:last-child,
.requirementMatrix th:last-child {
  border-right: 0;
}

.requirementMatrix__block {
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.requirementMatrix__checkpoint strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.requirementMatrix__checkpoint span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.requirementMatrix__choice {
  text-align: center;
}

.matrixStatusCell {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.matrixStatusCell:hover,
.matrixStatusCell:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
  outline: none;
}

.matrixStatusCell.isSelected {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.34);
}

.matrixStatusCell--not_required.isSelected {
  background: var(--panel-soft);
  color: var(--muted);
}

.matrixStatusCell--optional.isSelected {
  background: var(--warning-bg);
  color: var(--warning);
}

.matrixStatusCell--mandatory.isSelected {
  background: var(--success-bg);
  color: var(--success);
}

.matrixStatusCell--forbidden.isSelected,
.matrixStatusCell--critical.isSelected {
  background: var(--danger-bg);
  color: var(--danger);
}

.mappingsToolbar {
  align-items: flex-end;
}

.mappingsToolbar .tabs {
  flex: 1 1 520px;
}

.mappingsToolbar .searchBox {
  flex: 1 1 240px;
  grid-column: auto;
  max-width: 360px;
}

.roleAccessResetButton {
  flex: 0 0 auto;
  min-width: 174px;
}

.mappingsAdminAction {
  display: grid;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 10px;
  border: 1px solid rgba(240, 189, 95, 0.36);
  border-radius: var(--radius);
  background: var(--warning-bg);
}

.mappingsAdminAction summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  list-style: none;
}

.mappingsAdminAction summary::-webkit-details-marker {
  display: none;
}

.mappingsAdminAction summary span,
.mappingsAdminAction summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mappingsAdminAction summary span {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.mappingsAdminAction summary small {
  color: var(--warning);
  font-size: 11px;
  font-weight: 820;
}

.mappingsAdminAction p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.roleAccessToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  cursor: pointer;
}

.roleAccessToggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.roleAccessToggle input:disabled {
  cursor: not-allowed;
}

.reviewDeskScreen {
  gap: 14px;
}

.reviewDeskKpis {
  align-items: stretch;
}

.reviewQueueFilters {
  display: grid;
  gap: 8px;
}

.reviewQueueFilterGroup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 6px;
  min-width: 0;
}

.reviewQueueFilterGroup .filterChip {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.reviewQueueFilterGroup > span {
  grid-column: 1 / -1;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.multiSelectFilter.reviewQueueManagerFilter {
  width: 100%;
  max-width: 100%;
}

.reviewQueueManagerFilter .multiSelectFilter__menu {
  width: min(360px, calc(100vw - 32px));
}

.reviewDeskLayout {
  --review-queue-min-width: 320px;
  --review-queue-max-width: min(640px, calc(100vw - 720px));
  --review-queue-width: 400px;
  display: grid;
  grid-template-columns:
    minmax(var(--review-queue-min-width), min(var(--review-queue-width), var(--review-queue-max-width)))
    14px
    minmax(0, 1fr);
  column-gap: 0;
  row-gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.reviewQueuePanel,
.reviewCallPanel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.reviewQueuePanel {
  --review-queue-list-min-height: min(280px, 40dvh);
  container: review-queue-panel / inline-size;
  position: sticky;
  top: 16px;
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  overflow-x: hidden;
}

.reviewQueuePanel.isControlsCollapsed {
  grid-template-rows: auto auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
}

.reviewQueuePanel.isControlsCollapsed .reviewPeriodControls,
.reviewQueuePanel.isControlsCollapsed .reviewWorkflowPanel,
.reviewQueuePanel.isControlsCollapsed .reviewQueueFilters {
  display: none;
}

.reviewQueuePanelHeader {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}

.reviewQueuePanelTitle {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reviewQueueControlsToggle {
  flex: 0 0 auto;
  min-height: 28px;
  padding-inline: 8px;
  font-size: 11px;
  line-height: 1.1;
}

.reviewDeskResizeHandle {
  position: sticky;
  top: 16px;
  z-index: 2;
  display: flex;
  align-self: stretch;
  justify-content: center;
  width: 14px;
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.reviewDeskResizeHandle span {
  display: block;
  width: 2px;
  margin: 8px 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 140ms ease, box-shadow 140ms ease, width 140ms ease;
}

.reviewDeskResizeHandle:hover span,
.reviewDeskResizeHandle:focus-visible span,
.reviewDeskLayout.isResizing .reviewDeskResizeHandle span {
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.reviewDeskResizeHandle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.reviewDeskLayout.isResizing,
.reviewDeskLayout.isResizing * {
  cursor: col-resize !important;
  user-select: none;
}

.reviewWorkflowPanel {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}

.reviewWorkflowPanel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 3px;
  min-width: 0;
}

.reviewWorkflowPanel__header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewWorkflowPanel__header .tableAction {
  justify-self: end;
  white-space: normal;
}

.reviewWorkflowPanel__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewWorkflowPanel__header span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .reviewWorkflowPanel__header {
    grid-template-columns: 1fr;
  }

  .reviewWorkflowPanel__header .tableAction {
    justify-self: stretch;
  }
}

.reviewWorkflowSteps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.reviewWorkflowStep {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.reviewWorkflowStep:hover,
.reviewWorkflowStep.isActive {
  border-color: var(--interactive-selected-line);
  background: var(--interactive-selected-bg);
}

.reviewWorkflowStep--success {
  border-left-color: var(--success);
}

.reviewWorkflowStep--warning {
  border-left-color: var(--warning);
}

.reviewWorkflowStep--danger {
  border-left-color: var(--danger);
}

.reviewWorkflowStep__top {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) max-content;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.reviewWorkflowStep__top strong {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted-bg);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
}

.reviewWorkflowStep__top span {
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.reviewWorkflowStep__top b {
  justify-self: end;
  min-width: 2ch;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  text-align: right;
}

.reviewWorkflowStep small {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.reviewQueueSearch {
  width: 100%;
  min-width: 0;
  margin: 0 0 12px;
}

.reviewQueueFilters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 0 12px;
  min-width: 0;
}

.reviewQueueBulkBar {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning-bg) 72%, transparent), transparent 82%),
    var(--panel);
  padding: 8px;
}

.reviewQueueBulkBar__selection,
.reviewQueueBulkBar__action {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.reviewQueueBulkBar__selection {
  justify-content: space-between;
}

.reviewQueueBulkBar__check,
.reviewQueueItem__select {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  cursor: pointer;
}

.reviewQueueBulkBar__check input,
.reviewQueueItem__select input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--warning);
}

.reviewQueueBulkBar__count,
.reviewQueueBulkBar__hint {
  min-width: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewQueueBulkBar__rerun {
  flex: 1 1 170px;
  min-height: 32px;
  border-color: var(--warning);
  background: var(--warning-bg);
  color: var(--warning);
  box-shadow: inset 0 -2px 0 var(--warning);
}

.reviewQueueBulkBar__rerun:disabled,
.reviewQueueBulkBar__rerun:disabled:hover {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
  box-shadow: none;
}

.reviewPeriodControls {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.reviewPeriodControls__segments {
  width: 100%;
}

.reviewPeriodControls__dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.reviewPeriodControls__dates .secondaryButton {
  min-height: 38px;
  padding-inline: 10px;
}

.reviewPeriodControls__summary {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewQueuePanel .reviewPeriodControls__segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  overflow: visible;
}

.reviewQueuePanel .reviewPeriodControls__segments button {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding-right: 8px;
  padding-left: 8px;
  line-height: 1.15;
  white-space: normal;
}

.reviewQueuePanel .reviewPeriodControls__segments button:last-child {
  grid-column: 1 / -1;
}

.reviewQueuePanel .reviewPeriodControls__dates {
  grid-template-columns: 1fr;
}

.reviewQueuePanel .reviewPeriodControls__dates .secondaryButton {
  width: 100%;
}

.reviewQueueList {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: 0 2px 12px 0;
}

.reviewQueueEmptyState {
  align-self: start;
  width: 100%;
  margin-top: 4px;
}

.reviewEmptyActions {
  justify-content: flex-start;
  margin-top: 12px;
}

.reviewQueueItem {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--text);
  cursor: default;
  padding: 11px;
  text-align: left;
}

.reviewQueueItem__open {
  display: grid;
  gap: 7px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.reviewQueueItem__open:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.reviewQueueItem:hover,
.reviewQueueItem:focus-within,
.reviewQueueItem.isActive,
.reviewQueueItem.isSelected {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.reviewQueueItem.isSelected {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning-bg) 58%, transparent), transparent 136px),
    var(--panel-soft);
}

.reviewQueueItem__selectRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.reviewQueueItem.isPriority {
  border-color: rgba(255, 107, 107, 0.45);
  background:
    linear-gradient(90deg, rgba(255, 107, 107, 0.13), rgba(255, 107, 107, 0) 128px),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(255, 107, 107, 0.76);
}

.reviewQueueItem.isOkScore {
  border-color: rgba(105, 211, 141, 0.4);
  background:
    linear-gradient(90deg, rgba(105, 211, 141, 0.12), rgba(105, 211, 141, 0) 128px),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(105, 211, 141, 0.72);
}

.reviewQueueItem.isPriority.isActive,
.reviewQueueItem.isOkScore.isActive {
  border-color: var(--accent);
}

.reviewQueueItem.isDone {
  border-color: rgba(105, 211, 141, 0.35);
  background:
    linear-gradient(90deg, rgba(105, 211, 141, 0.12), rgba(105, 211, 141, 0) 120px),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(105, 211, 141, 0.72);
}

.reviewQueueItem.isSkipped {
  border-color: rgba(148, 163, 184, 0.34);
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.11), rgba(148, 163, 184, 0) 120px),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.58);
}

.reviewQueueItem.isReopened {
  border-color: rgba(240, 189, 95, 0.42);
  background:
    linear-gradient(90deg, rgba(240, 189, 95, 0.12), rgba(240, 189, 95, 0) 120px),
    var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(240, 189, 95, 0.72);
}

.reviewQueueItem.needsPostAiDecision {
  border-color: rgba(255, 107, 107, 0.52);
  background:
    linear-gradient(90deg, rgba(255, 107, 107, 0.16), rgba(240, 189, 95, 0.07) 150px, rgba(255, 107, 107, 0) 260px),
    var(--panel-soft);
  box-shadow: inset 4px 0 0 rgba(255, 107, 107, 0.82);
}

.reviewQueueItem.needsRerunAction {
  border-color: rgba(240, 189, 95, 0.48);
  background:
    linear-gradient(90deg, rgba(240, 189, 95, 0.15), rgba(240, 189, 95, 0) 142px),
    var(--panel-soft);
  box-shadow: inset 4px 0 0 rgba(240, 189, 95, 0.78);
}

.reviewQueueItem.hasDraft {
  border-color: rgba(240, 189, 95, 0.42);
  box-shadow: inset 3px 0 0 rgba(240, 189, 95, 0.72);
}

.reviewQueueItem__top,
.reviewQueueItem__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.reviewQueueItem strong {
  display: -webkit-box;
  min-width: 0;
  overflow-wrap: anywhere;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reviewQueueItem__reason,
.reviewQueueItem__workflow {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewQueueItem__workflow {
  border-top: 1px solid var(--line-soft);
  padding-top: 7px;
}

.reviewQueueItem__reasonLabel {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.reviewQueueItem__reason > span:last-child,
.reviewQueueItem__workflow > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reviewQueueItem__meta span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.reviewCallPanel {
  container: review-call-panel / inline-size;
  display: grid;
  gap: 14px;
  overflow-x: clip;
}

.reviewCallPanel > * {
  max-width: 100%;
  min-width: 0;
}

.reviewCallHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}

.reviewCallHeader h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 24px;
  line-height: 1.15;
}

.reviewCallContext {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  min-width: 0;
}

.reviewCallContext__item {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 5px 8px;
}

.reviewCallContext__item dt,
.reviewCallContext__item dd {
  margin: 0;
}

.reviewCallContext__item dt {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.reviewCallContext__item dd {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewCallContext__item--manager {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line-soft));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel-soft));
}

.reviewCallHeader__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.reviewCallHeader__actions .secondaryButton {
  flex: 1 1 132px;
  min-width: 0;
  min-height: 32px;
  line-height: 1.15;
  white-space: normal;
}

.reviewRerunButton {
  min-width: 104px;
  border-color: rgba(240, 189, 95, 0.42);
  background: var(--warning-bg);
  color: var(--warning);
}

.reviewRerunButton:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.reviewDecisionNotice {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(105, 211, 141, 0.28);
  border-radius: 8px;
  background: var(--success-bg);
  color: var(--text);
  padding: 10px 12px;
}

.reviewDecisionNotice--warning {
  border-color: rgba(240, 189, 95, 0.34);
  background: var(--warning-bg);
}

.reviewDecisionNotice strong {
  font-size: 13px;
}

.reviewDecisionNotice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.reviewDecisionNotice__header strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reviewDecisionNotice__reopen {
  flex: 0 0 auto;
}

.reviewDecisionNotice span,
.reviewDecisionNotice p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewNextActionPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.32fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.reviewNextActionPanel__main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.reviewNextActionPanel__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewNextActionPanel__title span,
.reviewDecisionPrep span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.reviewNextActionPanel__title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.25;
}

.reviewNextActionPanel__title p,
.reviewNextActionPanel__action span {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewNextActionPanel__facts {
  display: grid;
  grid-template-columns: repeat(2, max-content minmax(0, 1fr));
  gap: 6px 8px;
  margin: 0;
  min-width: 0;
}

.reviewNextActionPanel__facts dt {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.25;
  text-transform: uppercase;
}

.reviewNextActionPanel__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.reviewOperationalDecision {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.reviewOperationalDecision--success {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.reviewOperationalDecision--warning {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}

.reviewOperationalDecision--danger {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.reviewOperationalDecision__header {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 8px;
  align-items: center;
  min-width: 0;
}

.reviewOperationalDecision__header > span:last-child {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewOperationalDecision__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewOperationalDecision__grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  min-width: 0;
}

.reviewOperationalDecision__grid dt {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.25;
  text-transform: uppercase;
}

.reviewOperationalDecision__grid dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewManagerGuide {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.reviewManagerGuide__header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewManagerGuide__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewManagerGuide__header span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewManagerGuide__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reviewManagerGuide__step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  border-left: 3px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  padding: 8px;
}

.reviewManagerGuide__step--success {
  border-left-color: var(--success);
}

.reviewManagerGuide__step--warning {
  border-left-color: var(--warning);
}

.reviewManagerGuide__step--danger {
  border-left-color: var(--danger);
}

.reviewManagerGuide__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 860;
  line-height: 1;
}

.reviewManagerGuide__step div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewManagerGuide__step strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewManagerGuide__step span:last-child {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewNextActionPanel__action {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  border-left: 1px solid var(--line-soft);
  padding-left: 12px;
}

.reviewPrimaryNextStep {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--accent-strong);
  border-radius: 8px;
  background: var(--interactive-selected-bg);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  padding: 10px;
  text-align: left;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 var(--titanium-highlight);
}

.reviewPrimaryNextStep:hover,
.reviewPrimaryNextStep:focus-visible {
  border-color: var(--accent);
  box-shadow:
    var(--focus-ring),
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--titanium-highlight);
}

.reviewPrimaryNextStep--warning {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.reviewPrimaryNextStep--danger {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.reviewPrimaryNextStep span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 860;
  line-height: 1.2;
  text-transform: uppercase;
}

.reviewPrimaryNextStep strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.reviewPrimaryNextStep small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewDecisionPanel--nextStep {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

.reviewDecisionBar--nextStep {
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--interactive-selected-bg);
  padding: 8px;
}

.reviewDecisionButton.isRecommendedNextStep {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.14);
}

.secondaryButton.reviewCallAction.isRecommendedNextStep {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--warning) 42%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 -2px 0 var(--warning),
    inset 0 1px 0 var(--titanium-highlight);
}

.reviewNextActionPanel,
.reviewDeskBlock,
.reviewDecisionPanel {
  scroll-margin-top: 78px;
}

.reviewQuickNav {
  position: sticky;
  top: 8px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-soft);
  padding: 6px;
}

.reviewQuickNav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  text-align: center;
  text-decoration: none;
}

.reviewQuickNav__link:hover,
.reviewQuickNav__link:focus-visible {
  border-color: var(--accent);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

.reviewCalibrationRoute {
  display: grid;
  gap: 9px;
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}

.reviewCalibrationRoute__header,
.reviewCalibrationFocusList {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.reviewCalibrationRoute__header span,
.reviewCalibrationFocusList span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewCalibrationRoute__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 12px;
  min-width: 0;
}

.reviewCalibrationCheckItem {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 3px solid var(--line);
  padding-left: 8px;
}

.reviewCalibrationCheckItem--success {
  border-left-color: var(--success);
}

.reviewCalibrationCheckItem--warning {
  border-left-color: var(--warning);
}

.reviewCalibrationCheckItem--danger {
  border-left-color: var(--danger);
}

.reviewCalibrationCheckItem strong,
.reviewCalibrationFocusList strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewCalibrationCheckItem span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewCalibrationConflicts {
  display: grid;
  gap: 5px;
  min-width: 0;
  border-left: 3px solid var(--warning);
  background: var(--warning-bg);
  padding: 7px 9px;
}

.reviewCalibrationConflicts p {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewRerunProgress {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(240, 189, 95, 0.34);
  border-radius: 8px;
  background: var(--warning-bg);
  padding: 10px 12px;
}

.reviewRerunProgress--success {
  border-color: rgba(105, 211, 141, 0.32);
  background: var(--success-bg);
}

.reviewRerunProgress--danger {
  border-color: rgba(255, 107, 107, 0.38);
  background: var(--danger-bg);
}

.reviewRerunProgress--neutral {
  border-color: rgba(148, 163, 184, 0.3);
  background: var(--muted-bg);
}

.reviewRerunProgress__header,
.reviewRerunProgress__run,
.reviewRerunProgress__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.reviewRerunProgress__header > div,
.reviewRerunProgress__run > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reviewRerunProgress strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.3;
}

.reviewRerunProgress span,
.reviewRerunProgress dd,
.reviewRerunProgress p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewRerunProgress__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
}

.reviewRerunProgress__meta dt {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.reviewRerunProgress__runs,
.reviewRerunProgress__skipped {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.reviewRerunProgress__run {
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.reviewRerunProgress__skipped {
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.reviewRerunProgress__error {
  color: var(--danger);
}

.reviewDeskContent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.reviewDeskBlock {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 13px;
}

.reviewDeskMeta dt,
.reviewDeskMeta dd {
  font-size: 12px;
}

.reviewViolationList,
.reviewDeskEvidence {
  display: grid;
  gap: 8px;
}

.reviewViolationRow,
.reviewEvidenceRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.reviewEvidenceRow {
  grid-template-columns: minmax(96px, 140px) minmax(0, 1fr);
}

.reviewViolationRow:first-child,
.reviewEvidenceRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.reviewViolationRow strong,
.reviewEvidenceRow strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.25;
}

.reviewViolationRow span,
.reviewEvidenceRow span {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewDeskEvidencePanel {
  grid-column: 1 / -1;
}

.reviewDeskAudioPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 11px;
  max-width: 100%;
}

.reviewAudioShell {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.reviewAudioShell__identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.reviewAudioShell__identity strong,
.reviewAudioShell__identity span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reviewAudioShell__identity strong {
  font-size: 13px;
  line-height: 1.25;
}

.reviewAudioShell__identity span,
.reviewAudioUnavailable {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewAudioPlayer {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 38px;
}

.reviewAudioActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.reviewEvidenceCardList {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.reviewEvidenceCard {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
}

.reviewEvidenceCard--missing {
  border-color: rgba(240, 189, 95, 0.38);
  background: var(--warning-bg);
}

.reviewEvidenceCard__header,
.reviewEvidenceCard__meta,
.reviewEvidenceFeedbackBar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.reviewEvidenceCard__header {
  justify-content: space-between;
}

.reviewEvidenceCard__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewEvidenceCard__title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.reviewEvidenceCard__title span,
.reviewEvidenceCard__meta span,
.reviewEvidenceReason,
.reviewEvidenceEmpty,
.reviewEvidenceFeedbackState,
.reviewEvidenceEmptyState p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewEvidenceCard__meta span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 2px 7px;
  overflow-wrap: anywhere;
}

.reviewEvidenceQuote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.reviewEvidenceReason,
.reviewEvidenceEmpty {
  margin: 0;
}

.reviewEvidenceReason strong {
  color: var(--text);
}

.reviewEvidenceFeedbackButton {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
}

.reviewEvidenceFeedbackButton:hover,
.reviewEvidenceFeedbackButton.isSelected {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

.reviewEvidenceFeedbackButton--success.isSelected {
  border-color: rgba(105, 211, 141, 0.5);
  background: var(--success-bg);
  color: var(--success);
}

.reviewEvidenceFeedbackButton--warning.isSelected {
  border-color: rgba(240, 189, 95, 0.52);
  background: var(--warning-bg);
  color: var(--warning);
}

.reviewEvidenceFeedbackButton--neutral.isSelected {
  border-color: rgba(148, 163, 184, 0.45);
  background: var(--muted-bg);
}

.reviewEvidenceFeedbackState {
  font-weight: 700;
}

.reviewEvidenceComment {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-top: 2px;
}

.reviewEvidenceComment > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.reviewEvidenceComment textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

.reviewEvidenceComment small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.reviewEvidenceSendButton {
  justify-self: start;
}

.reviewEvidenceEmptyState {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.reviewEvidenceEmptyState strong {
  font-size: 13px;
  line-height: 1.25;
}

.reviewDecisionPanel {
  position: static;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.reviewDecisionPanel textarea {
  min-height: 86px;
  resize: vertical;
}

.reviewViolationCorrection {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}

.reviewViolationCorrection > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.reviewViolationCorrection > summary::-webkit-details-marker {
  display: none;
}

.reviewViolationCorrection > summary::after {
  content: '+';
  margin-left: auto;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.reviewViolationCorrection[open] > summary::after {
  content: '−';
}

.reviewViolationCorrection > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.reviewViolationCorrection__body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.reviewViolationCorrection__body > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.reviewDecisionPrep {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 9px 10px;
}

.reviewDecisionPrep__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.reviewDecisionPrep__head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewDecisionPrep strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.reviewDecisionPrep__items {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.reviewDecisionPrep__items span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--control-bg);
  padding: 4px 7px;
  text-transform: none;
}

.reviewDecisionReadiness {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  min-width: 0;
}

.reviewDecisionReadiness__item {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 3px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  padding: 8px 9px;
}

.reviewDecisionReadiness__item--success {
  border-left-color: var(--success);
}

.reviewDecisionReadiness__item--warning {
  border-left-color: var(--warning);
}

.reviewDecisionReadiness__item--danger {
  border-left-color: var(--danger);
}

.reviewDecisionReadiness__item span {
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.reviewDecisionReadiness__item strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewDecisionReadiness__item p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reviewDecisionChoiceGuide {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
}

.reviewDecisionChoiceGuide__header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.reviewDecisionChoiceGuide__header strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.reviewDecisionChoiceGuide__header span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewDecisionChoiceGuide__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  min-width: 0;
}

.reviewDecisionChoice {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 3px solid var(--line);
  padding-left: 8px;
}

.reviewDecisionChoice--success {
  border-left-color: var(--success);
}

.reviewDecisionChoice--warning {
  border-left-color: var(--warning);
}

.reviewDecisionChoice--danger {
  border-left-color: var(--danger);
}

.reviewDecisionChoice strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.reviewDecisionChoice span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.violationPicker {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.violationPicker__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px;
}

.violationPicker__selected div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.violationPicker__selected span,
.violationPicker__caption,
.reviewDecisionRules span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.violationPicker__selected strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.violationPicker__selectedList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.violationPicker__selectedTag {
  min-height: 28px;
  padding: 5px 8px;
}

.violationPicker__controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.6fr);
  gap: 10px;
}

.violationPicker__quick,
.violationPicker__quickList,
.violationPicker__results {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.violationPickerItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 10px;
}

.violationPickerItem.isSelected {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.violationPickerItem--compact {
  padding: 8px 10px;
}

.violationPickerItem__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.violationPickerItem strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.violationPickerItem__meta,
.violationPickerItem__description {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.violationPickerItem__button {
  min-width: 82px;
  justify-content: center;
}

.reviewDecisionRules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.reviewDecisionRules span {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 5px 8px;
  text-transform: none;
}

.reviewDecisionBar {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 8px;
}

.reviewDecisionButton {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--text);
  cursor: pointer;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  text-align: center;
}

.reviewDecisionButton:hover,
.reviewDecisionButton.isSelected {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.reviewDecisionButton--success {
  border-color: rgba(105, 211, 141, 0.36);
  background: var(--success-bg);
  color: var(--success);
}

.reviewDecisionButton--warning {
  border-color: rgba(240, 189, 95, 0.36);
  background: var(--warning-bg);
  color: var(--warning);
}

.reviewDecisionButton--neutral {
  color: var(--muted);
}

.reviewDecisionButton.isBlocked {
  border-color: rgba(219, 80, 74, 0.42);
  background: var(--danger-bg);
  color: var(--danger);
}

.reviewDecisionButton:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.reviewDecisionBar__nextHint {
  flex: 1 0 100%;
  margin: 0 0 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.reviewNotice {
  margin: 0;
}

@media (max-width: 1320px) {
  .reviewDecisionBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1321px) and (max-width: 2400px) {
  .reviewDeskContent {
    grid-template-columns: 1fr;
  }

  .reviewDeskAudioPanel,
  .reviewDeskEvidencePanel {
    grid-column: auto;
  }
}

@media (max-width: 1120px) {
  .analyticsReasonGrid,
  .analyticsPersonalGrid,
  .analyticsMetricsGrid,
  .matrixSummaryGrid,
  .matrixFixList,
  .matrixSettingsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analyticsBlockRow {
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 64px 92px;
  }

  .analyticsMetricsGrid--primary,
  .analyticsMetricsGrid--secondary {
    grid-template-columns: 1fr;
  }

  .reviewDeskLayout,
  .reviewDeskContent {
    grid-template-columns: 1fr;
  }

  .reviewDeskResizeHandle {
    display: none;
  }

  .reviewQueuePanel {
    position: static;
    max-height: none;
  }

  .reviewQueueList {
    max-height: 420px;
  }

  .reviewDecisionBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analyticsBlockRow .statusBadge {
    justify-self: start;
  }
}

@media (max-width: 920px) {
  .analyticsModeBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewQuickNav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reviewManagerGuide__steps {
    grid-template-columns: 1fr;
  }

  .analyticsReasonGrid,
  .analyticsPersonalGrid,
  .analyticsMetricsGrid,
  .matrixSummaryGrid,
  .matrixFixList,
  .matrixSettingsGrid,
  .matrixContextGrid,
  .matrixChecklistGrid,
  .matrixConfigGrid,
  .matrixFormGrid {
    grid-template-columns: 1fr;
  }

  .matrixContextActions {
    justify-content: flex-start;
    padding-bottom: 0;
  }

  .matrixPanelIntro {
    align-items: stretch;
    flex-direction: column;
  }

  .matrixPanelIntro__meta {
    justify-content: flex-start;
    max-width: none;
    text-align: left;
  }

  .matrixStatusStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matrixWorkflowLabel {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .matrixActionGroup {
    width: 100%;
  }

  .matrixActionGroup .primaryButton,
  .matrixActionGroup .secondaryButton {
    flex: 1 1 180px;
  }

  .analyticsBlockRow {
    grid-template-columns: 1fr;
  }

  .analyticsBlockRow__metric {
    text-align: left;
  }

  .reviewCallHeader {
    flex-direction: column;
  }

  .reviewCallContext {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .reviewCallContext__item {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .reviewNextActionPanel {
    grid-template-columns: 1fr;
  }

  .reviewNextActionPanel__facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .reviewNextActionPanel__action {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
    padding-top: 10px;
    padding-left: 0;
  }

  .reviewPrimaryNextStep {
    text-align: center;
  }

  .reviewDecisionPrep__summary {
    align-items: stretch;
    flex-direction: column;
  }

  .reviewDecisionPrep__items {
    justify-content: flex-start;
  }

  .reviewAudioShell {
    grid-template-columns: 1fr;
  }

  .reviewAudioActions {
    justify-content: stretch;
  }

  .reviewAudioActions .secondaryButton {
    width: 100%;
  }

  .violationPicker__controls,
  .violationPickerItem {
    grid-template-columns: 1fr;
  }

  .violationPickerItem__button {
    width: 100%;
  }

  .reviewCallHeader__actions,
  .reviewDecisionBar {
    width: 100%;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .reviewCallHeader__actions .secondaryButton {
    width: 100%;
  }

  .reviewRerunProgress__header,
  .reviewRerunProgress__run,
  .reviewRerunProgress__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reviewRerunProgress__actions .secondaryButton {
    width: 100%;
  }
}

:root[data-theme="dark"] .managerProfileCard {
  border-color: #2d2927;
  background:
    linear-gradient(180deg, rgba(209, 209, 214, 0.08), rgba(209, 209, 214, 0) 115px),
    #0d0d0e;
  box-shadow: inset 3px 0 0 rgba(209, 209, 214, 0.72), 0 18px 46px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .managerProfileCard__risk,
:root[data-theme="dark"] .managerProfileCard__kpi,
:root[data-theme="dark"] .managerViolationRow {
  background: #111113;
}

:root[data-theme="light"] .managerProfileCard {
  border-color: #cfd9e2;
  background:
    linear-gradient(180deg, rgba(110, 110, 115, 0.08), rgba(110, 110, 115, 0) 120px),
    #ffffff;
  box-shadow: inset 3px 0 0 rgba(110, 110, 115, 0.48), 0 14px 32px rgba(37, 48, 60, 0.12);
}

:root[data-theme="light"] .managerProfileCard__avatar {
  border-color: rgba(110, 110, 115, 0.42);
  background: #eaf5f3;
  color: var(--accent-strong);
}

:root[data-theme="light"] .managerProfileCard--unlinked .managerProfileCard__avatar {
  border-color: rgba(167, 101, 17, 0.3);
  background: rgba(167, 101, 17, 0.1);
  color: var(--warning);
}

:root[data-theme="light"] .managerProfileCard--unlinked .managerProfileCard__id {
  border-color: rgba(167, 101, 17, 0.24);
  background: rgba(167, 101, 17, 0.08);
  color: var(--warning);
}

:root[data-theme="light"] .managerProfileCard__risk,
:root[data-theme="light"] .managerProfileCard__kpi,
:root[data-theme="light"] .managerViolationRow {
  border-color: #dbe4eb;
  background: #f8fafb;
}

:root[data-theme="light"] .managerProfileCard__callId {
  border-color: rgba(110, 110, 115, 0.22);
  background: rgba(110, 110, 115, 0.08);
}

:root[data-theme="light"] .managerRiskMeter {
  background: #dde6ed;
}

:root[data-theme="light"] .managerProfileCard__comment textarea {
  background: #ffffff;
  color: var(--text);
}

.modelCostScreen .kpiGrid {
  align-items: stretch;
}

.modelCostScreen .tablePanel--flex {
  min-height: 0;
}

.aiTimerScreen .tablePanel--flex {
  min-height: 0;
}

.aiTimerControlGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.aiTimerControlGrid--primary {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.aiTimerField {
  min-width: 0;
}

.aiTimerField input,
.aiTimerField select {
  width: 100%;
  min-width: 0;
}

.aiTimerRefreshButton {
  min-height: 40px;
  white-space: nowrap;
}

.aiTimerSourceStrip {
  margin-top: 12px;
}

.aiTimerSourceStrip .aiTimerRefreshButton {
  margin-left: auto;
}

.aiTimerWarning {
  margin-top: 10px;
}

.aiTimerAdvancedControls,
.aiTimerTechnicalWarnings {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.aiTimerAdvancedControls summary,
.aiTimerTechnicalWarnings summary {
  min-height: 40px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.aiTimerAdvancedControls .aiTimerControlGrid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  padding: 0 12px 12px;
}

.aiTimerTechnicalWarnings .infoBanner {
  margin: 0 12px 12px;
}

.aiTimerBatchSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.aiTimerBatchSummary strong {
  color: var(--text);
  font-size: 13px;
}

.aiTimerPipelineTableWrap {
  overflow-x: auto;
}

.aiTimerPipelineTable {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.aiTimerPipelineTable th,
.aiTimerPipelineTable td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.aiTimerPipelineTable th {
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.aiTimerPipelineTable td strong {
  color: var(--text);
  font-size: 12px;
}

.aiTimerFactForecastGrid {
  align-items: stretch;
}

.aiTimerSpendCell,
.aiTimerGroupCell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.aiTimerSpendCell strong,
.aiTimerGroupCell strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.aiTimerSpendCell span,
.aiTimerSpendCell small,
.aiTimerGroupCell span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.aiTimerSpendCell small {
  color: var(--warning);
}

@media (max-width: 1180px) {
  .aiTimerControlGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aiTimerRefreshButton {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .aiTimerControlGrid,
  .aiTimerControlGrid--primary,
  .aiTimerAdvancedControls .aiTimerControlGrid,
  .aiTimerFactForecastGrid {
    grid-template-columns: 1fr;
  }
}

.modelGovernanceDisclosure {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.modelGovernanceDisclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 12px;
  color: var(--text);
  cursor: pointer;
}

.modelGovernanceDisclosure summary span,
.modelGovernanceDisclosure summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelGovernanceDisclosure summary span {
  font-size: 13px;
  font-weight: 820;
  line-height: 1.25;
}

.modelGovernanceDisclosure summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
  text-align: right;
}

.modelGovernanceDisclosure summary small::before {
  content: "Показать · ";
  color: var(--text);
  font-weight: 800;
}

.modelGovernanceDisclosure[open] summary small::before {
  content: "Скрыть · ";
}

.modelGovernanceDisclosure__body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0 10px 10px;
}

.modelGovernanceDisclosure .infoBanner {
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.35;
}

.modelGovernanceDisclosure .dashboardLogicMap {
  gap: 8px;
  padding: 10px;
  border-color: var(--line-soft);
  background: var(--panel);
}

.modelGovernanceDisclosure .dashboardLogicMap__header p,
.modelGovernanceDisclosure .dashboardLogicMap__item p {
  font-size: 11px;
  line-height: 1.35;
}

.modelMetricGroups {
  display: grid;
  gap: 12px;
}

.modelMetricGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.modelMetricGroup__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.modelMetricGroup__header h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.modelMetricGroup__header span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.modelWorkspaceDisclosure,
.modelTableDisclosure {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.modelWorkspaceDisclosure summary,
.modelTableDisclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  color: var(--text);
  cursor: pointer;
}

.modelWorkspaceDisclosure summary span,
.modelWorkspaceDisclosure summary small,
.modelTableDisclosure summary span,
.modelTableDisclosure summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelWorkspaceDisclosure summary span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.modelWorkspaceDisclosure summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

.modelWorkspaceDisclosure summary small::before {
  content: "Показать · ";
  color: var(--text);
  font-weight: 800;
}

.modelWorkspaceDisclosure[open] summary small::before {
  content: "Скрыть · ";
}

.modelWorkspaceDisclosure__description,
.modelTableDisclosure__description {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.modelWorkspaceDisclosure__body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.modelWorkspaceDisclosure__body > .tablePanel {
  margin: 0;
}

.modelCostPolicyHighlight {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 52%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning-bg) 42%, var(--panel-soft));
  box-shadow: inset 4px 0 0 var(--warning);
}

.modelCostPolicyNotice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.modelCostPolicyNotice strong {
  min-width: 180px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.modelCostPolicyNotice span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.modelCostPolicyHighlight .denseTableWrap {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}

.modelCostPolicyEditor {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(150px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.modelCostPolicyEditor__toggle {
  min-height: 36px;
  align-self: end;
}

.modelCostPolicyEditor__actions {
  justify-content: flex-end;
  align-self: end;
  min-width: 0;
}

.modelTableDisclosure {
  background: var(--panel-soft);
}

.modelTableDisclosure summary {
  min-height: 34px;
  padding: 8px 10px;
}

.modelTableDisclosure summary span {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.modelTableDisclosure summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
  text-align: right;
}

.modelTableDisclosure summary small::before {
  content: "Показать · ";
  color: var(--text);
  font-weight: 800;
}

.modelTableDisclosure[open] summary small::before {
  content: "Скрыть · ";
}

.modelTableDisclosure .denseTableWrap {
  margin: 0 10px 10px;
}

.modelDashboardPanel {
  display: grid;
  gap: 10px;
}

.modelDashboardPanel__grid {
  display: grid;
  grid-template-columns: minmax(340px, 1.35fr) repeat(4, minmax(136px, 1fr));
  gap: 10px;
  align-items: start;
}

.modelPeriodControls {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelPeriodControls .periodSegments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  width: 100%;
  overflow: visible;
}

.modelPeriodControls .periodSegments button {
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  line-height: 1.15;
  white-space: normal;
}

.modelPeriodCalendars {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr)) minmax(78px, auto);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.modelPeriodCalendars .dateFilter--toolbar input {
  min-height: 34px;
  font-size: 12px;
}

.modelPeriodCalendars .secondaryButton {
  min-height: 34px;
  min-width: 78px;
  padding: 0 10px;
}

.modelOverviewTile {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(110, 110, 115, 0.07), rgba(110, 110, 115, 0) 92px),
    var(--panel-soft);
}

.modelOverviewTile span,
.modelOverviewTile small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.modelOverviewTile span {
  font-weight: 760;
  text-transform: uppercase;
}

.modelOverviewTile strong {
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.modelOverviewTile p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.modelReadOrder {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.modelReadOrder__header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.modelReadOrder__header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.modelReadOrder__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

.modelReadOrder__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.modelReadOrderStep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelReadOrderStep__eyebrow {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 840;
  line-height: 1;
}

.modelReadOrderStep__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modelReadOrderStep__body strong,
.modelReadOrderStep__body p,
.modelReadOrderStep__body small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelReadOrderStep__body strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.modelReadOrderStep__body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.modelReadOrderStep__body small {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
}

.modelCostActiveGrid,
.modelCostCreateGrid,
.modelExportGrid {
  display: grid;
  gap: 12px;
  align-items: end;
}

.modelCostActiveGrid {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, 0.72fr) minmax(180px, 0.72fr) auto;
}

.modelCostCreateGrid,
.modelExportGrid {
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.8fr) auto;
}

.modelCostCreateGrid {
  grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 1fr) minmax(150px, 0.72fr) repeat(3, minmax(116px, 0.5fr)) auto;
}

.modelExportGrid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  align-items: start;
}

.modelCostCreateGrid__wide {
  grid-column: span 2;
}

.modelCostCreateGrid__actions {
  align-self: end;
}

.modelCostActiveMeta,
.modelCostModelCell,
.modelHealthCell,
.modelCostSpendCell,
.modelCalibrationMetricCell,
.modelCostSourceCell {
  min-width: 0;
}

.modelCostActiveMeta {
  display: grid;
  gap: 4px;
  min-height: 42px;
  align-content: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelCostInputCell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modelCostInputCell > span {
  display: none;
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.modelCostActiveMeta strong,
.modelCostActiveMeta span,
.modelCostModelCell strong,
.modelCostModelCell span,
.modelCostModelCell small,
.modelHealthCell strong,
.modelHealthCell span,
.modelHealthCell small,
.modelCostSourceCell span,
.modelCostSourceCell small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelCostActiveMeta strong,
.modelCostModelCell strong,
.modelHealthCell strong,
.modelCostSpendCell strong,
.modelCalibrationMetricCell strong {
  font-size: 12px;
  line-height: 1.25;
}

.modelCostActiveMeta span,
.modelCostModelCell span,
.modelCostModelCell small,
.modelHealthCell span,
.modelHealthCell small,
.modelCostSpendCell span,
.modelCalibrationMetricCell span,
.modelCostSourceCell span,
.modelCostSourceCell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.modelCostModelCell span,
.modelHealthCell span,
.modelHealthCell small,
.modelCostSpendCell span,
.modelCalibrationMetricCell span,
.modelCostSourceCell small {
  margin-top: 3px;
}

.modelCalibrationMetricCell {
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.modelCalibrationMetricCell strong,
.modelCalibrationMetricCell span {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.modelStageBadges,
.modelCostActions,
.modelHealthScore,
.modelSignalList,
.modelExportSelector,
.modelExportUtilityActions,
.modelExportActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.modelExportSelectorGroup,
.modelExportActionStack,
.modelActionGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.modelExportSelectorGroup,
.modelActionGroup {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.modelActionGroup--primary {
  border-color: color-mix(in srgb, var(--accent-strong) 28%, var(--line));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-strong) 58%, var(--line));
}

.modelActionGroup--danger {
  border-color: rgba(240, 189, 95, 0.36);
  background: var(--warning-bg);
}

.modelActionGroup--danger summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.modelActionGroup--danger summary span,
.modelActionGroup--danger summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelActionGroup--danger summary small {
  color: var(--warning);
  font-size: 11px;
  font-weight: 820;
}

.modelActionGroup__header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.modelActionGroup__header strong,
.modelActionGroup__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelActionGroup__header strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.modelActionGroup__header span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.modelExportSelector {
  align-items: stretch;
  min-width: 0;
}

.modelExportCheck {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-width: min(260px, 100%);
  max-width: 340px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelExportCheck input {
  grid-row: span 2;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.modelExportCheck span,
.modelExportCheck small {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.modelExportCheck span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.modelExportCheck small {
  color: var(--muted);
  font-size: 11px;
}

.modelExportActions {
  justify-content: flex-end;
}

.modelExportUtilityActions {
  justify-content: flex-start;
}

.modelExportActionStack .primaryButton,
.modelExportActionStack .secondaryButton,
.modelExportUtilityActions .secondaryButton {
  min-height: 34px;
}

.modelHealthScore strong {
  min-width: 44px;
  font-size: 12px;
  line-height: 1.25;
}

.modelSignalList {
  gap: 6px;
}

.modelSignalList span {
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.modelSignalList__empty {
  color: var(--muted);
  font-size: 11px;
}

.modelCostActions {
  justify-content: flex-end;
}

.modelCostToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.modelCostToggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.modelCostInput {
  width: 100%;
  min-width: 84px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
}

.modelCostInput:hover,
.modelCostInput:focus {
  border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
}

.modelCostPlanner {
  gap: 12px;
}

.aiInventoryPanel {
  gap: 10px;
}

.aiInventorySummary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  padding: 0 2px;
}

.aiInventorySummary strong,
.aiInventorySummary span {
  max-width: 100%;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.aiInventorySummary strong {
  color: var(--text);
}

.aiInventoryFilterBar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.aiInventoryFilterButton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  max-width: 100%;
  min-width: min(138px, 100%);
  flex: 1 1 138px;
  justify-content: space-between;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  cursor: pointer;
}

.aiInventoryFilterButton:hover,
.aiInventoryFilterButton:focus-visible {
  border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
}

.aiInventoryFilterButton.isActive {
  border-color: rgba(88, 166, 255, 0.58);
  background: rgba(88, 166, 255, 0.14);
}

.aiInventoryFilterButton span,
.aiInventoryFilterButton strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.aiInventoryFilterButton strong {
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.aiInventorySplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.aiInventoryBucket {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.aiInventoryBucket--working {
  box-shadow: inset 3px 0 0 var(--success);
}

.aiInventoryBucket--paused {
  box-shadow: inset 3px 0 0 rgba(141, 154, 168, 0.36);
}

.aiInventoryBucket__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-width: 0;
}

.aiInventoryBucket__header h3,
.aiInventoryBucket__header p {
  margin: 0;
}

.aiInventoryBucket__header h3 {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.aiInventoryBucket__header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
  text-transform: uppercase;
}

.aiInventoryBucket__header p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiInventoryList {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-height: 420px;
  overflow: auto;
  padding-right: 2px;
}

.aiInventoryItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.aiInventoryItem__main,
.aiInventoryItem__meta {
  min-width: 0;
}

.aiInventoryItem__main {
  display: grid;
  gap: 3px;
}

.aiInventoryItem__main strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.aiInventoryItem__main span,
.aiInventoryItem p,
.aiInventoryItem small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.aiInventoryItem__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.aiInventoryItem__meta > span {
  color: var(--text);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.aiInventoryItem p {
  grid-column: 1 / -1;
  margin: 0;
}

.aiInventoryItem small {
  grid-column: 1 / -1;
  color: var(--subtle);
}

.aiInventoryEmpty {
  min-width: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  background: var(--panel);
}

.modelCostScreen .denseTableWrap {
  border-radius: var(--radius-sm);
  background-color: var(--panel);
}

.modelCostScreen .denseTable th {
  height: 36px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

.modelCostScreen .denseTable td {
  padding: 8px 9px;
  vertical-align: top;
}

.modelCostScreen .denseTable--compact td {
  height: auto;
  min-height: 40px;
}

.modelCostScreen .denseTable .statusBadge {
  max-width: 100%;
}

.modelCostScreen .denseTable .modelCostPolicyStatusBadge {
  align-items: flex-start;
  width: fit-content;
  min-width: 0;
  margin-top: 5px;
  overflow: visible;
  white-space: normal;
}

.modelCostScreen .denseTable .modelCostPolicyStatusBadge .statusBadge__text {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.modelCostScreen .modelHealthCell,
.modelCostScreen .modelCostSourceCell,
.modelCostScreen .modelCostSpendCell,
.modelCostScreen .modelCalibrationMetricCell {
  gap: 4px;
}

.modelCostScreen .modelHealthCell strong,
.modelCostScreen .modelCostSourceCell span,
.modelCostScreen .modelCostSpendCell strong,
.modelCostScreen .modelCalibrationMetricCell strong {
  line-height: 1.25;
}

.modelCostPlannerStats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.modelCostPlannerStat {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  box-shadow: inset 3px 0 0 rgba(141, 154, 168, 0.28);
}

.modelCostPlannerStat--success {
  box-shadow: inset 3px 0 0 var(--success);
}

.modelCostPlannerStat--warning {
  box-shadow: inset 3px 0 0 var(--warning);
}

.modelCostPlannerStat span,
.modelCostPlannerStat small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.modelCostPlannerStat span {
  font-weight: 760;
  text-transform: uppercase;
}

.modelCostPlannerStat strong {
  min-width: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.modelCostPlannerControls {
  display: grid;
  grid-template-columns: repeat(5, minmax(142px, 1fr));
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelCostPlannerToggle {
  align-self: end;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
}

.modelCostPlannerStatusPanel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelCostPlannerStatusPanel__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.modelCostPlannerStatusPanel__title strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.modelCostPlannerStatusPanel__title span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.modelCostPlannerStatusGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.modelCostPlannerStatusOption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
}

.modelCostPlannerStatusOption input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.modelCostPlannerStatusOption span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelCostPlannerGrandTotal {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(105, 211, 141, 0.42);
  border-radius: 7px;
  background: var(--success-bg);
}

.modelCostPlannerGrandTotal__main,
.modelCostPlannerGrandTotal__breakdown {
  min-width: 0;
}

.modelCostPlannerGrandTotal__main {
  display: grid;
  gap: 3px;
}

.modelCostPlannerGrandTotal__main span {
  color: var(--success);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.modelCostPlannerGrandTotal__main strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.12;
}

.modelCostPlannerGrandTotal__main small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.modelCostPlannerGrandTotal__breakdown {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.modelCostPlannerGrandTotal__breakdown span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.aiAgentGroupStack,
.modelRegistryBucketStack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.aiAgentGroup,
.modelRegistryBucket {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.modelRegistryBucket {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.modelRegistryBucket__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 38px;
  padding: 9px 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.modelRegistryBucket__summary::-webkit-details-marker {
  display: none;
}

.modelRegistryBucket__summary span,
.modelRegistryBucket__summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modelRegistryBucket__summary span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.modelRegistryBucket__summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
  text-align: right;
}

.modelRegistryBucket__summary small::before {
  content: "Показать · ";
  color: var(--text);
  font-weight: 800;
}

.modelRegistryBucket[open] .modelRegistryBucket__summary small::before {
  content: "Скрыть · ";
}

.modelRegistryBucket__description {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.modelRegistryBucket > .denseTableWrap {
  margin: 0 10px 10px;
}

.aiAgentGroup__header,
.modelRegistryBucket__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.aiAgentGroup__header h3,
.aiAgentGroup__header p,
.modelRegistryBucket__header h3,
.modelRegistryBucket__header p {
  margin: 0;
}

.aiAgentGroup__header h3,
.modelRegistryBucket__header h3 {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.aiAgentGroup__header span,
.modelRegistryBucket__header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
  text-transform: uppercase;
}

.aiAgentGroup__header p,
.modelRegistryBucket__header p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.aiAgentPurposeCell {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.aiAgentPurposeCell span,
.aiAgentPurposeCell small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.aiAgentPurposeCell span {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.aiAgentPurposeCell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.aiAgentPolicyBadges,
.aiAgentListCell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.aiAgentListCell span {
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.aiAgentListCell small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.aiAgentPreflight {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.aiAgentActivationPlan {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-soft);
}

.aiAgentActivationPlan__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.aiAgentActivationPlan__header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
}

.aiAgentActivationPlan__header span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
}

.aiAgentActivationPlan__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 8px;
}

.aiAgentActivationPlan__item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel);
}

.aiAgentActivationPlan__item strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
}

.aiAgentActivationPlan__item span,
.aiAgentActivationPlan__item small {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.aiAgentActivationPlan__item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.aiPilotPackGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 8px;
  min-width: 0;
}

.aiPilotPackAction {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.aiPilotPackAction__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.aiPilotPackAction__head strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
  overflow-wrap: anywhere;
}

.aiPilotPackAction__head span,
.aiPilotPackAction p,
.aiPilotPackAction small {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.aiPilotPackAction p {
  margin: 0;
  color: var(--muted);
  font-weight: 660;
}

.aiAgentPreflight__item,
.aiAgentPreflight__note,
.aiAgentRuntimeCell,
.aiAgentControls {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.aiAgentPreflight__item span,
.aiAgentPreflight__note span,
.aiAgentRuntimeCell span,
.aiAgentRuntimeCell small,
.aiAgentControls small {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.aiAgentPreflight__item strong,
.aiAgentPreflight__note strong,
.aiAgentRuntimeCell > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
}

.aiAgentPreflight__note {
  grid-column: span 1;
}

.aiAgentRuntimeCell {
  padding: 0;
  border: 0;
  background: transparent;
}

.aiAgentRuntimeCell__warning {
  color: var(--warning) !important;
}

.aiAgentControls {
  padding: 0;
  border: 0;
  background: transparent;
}

.aiAgentControlToggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.aiAgentControlToggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.aiAgentControls button {
  min-height: 30px;
  justify-content: center;
  padding: 6px 9px;
  font-size: 11px;
}

@media (max-width: 1320px) {
  .modelDashboardPanel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .modelPeriodControls {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1180px) {
  .modelDashboardPanel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modelReadOrder__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modelPeriodControls {
    grid-column: 1 / -1;
  }

  .modelCostActiveGrid,
  .modelCostCreateGrid,
  .modelCostPolicyEditor,
  .modelExportGrid,
  .aiInventorySplit,
  .modelCostPlannerControls,
  .modelCostPlannerStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modelCostActions,
  .modelCostCreateGrid__actions,
  .modelCostPolicyEditor__actions,
  .modelExportUtilityActions,
  .modelExportActions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .modelMetricGroup__header,
  .modelGovernanceDisclosure summary,
  .modelWorkspaceDisclosure summary,
  .modelRegistryBucket__summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .modelMetricGroup__header span,
  .modelGovernanceDisclosure summary small,
  .modelWorkspaceDisclosure summary small,
  .modelRegistryBucket__summary small {
    text-align: left;
  }

  .modelDashboardPanel__grid,
  .modelPeriodCalendars,
  .modelCostPolicyEditor,
  .modelReadOrder__steps {
    grid-template-columns: 1fr;
  }

  .modelReadOrder__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .modelReadOrder__header strong {
    text-align: left;
  }

  .modelCostPolicyNotice {
    align-items: flex-start;
    flex-direction: column;
  }

  .modelCostPolicyNotice span {
    text-align: left;
  }

  .modelCostActiveGrid,
  .modelCostCreateGrid,
  .modelExportGrid,
  .aiInventorySplit,
  .modelCostPlannerControls,
  .modelCostPlannerStats {
    grid-template-columns: 1fr;
  }

  .modelCostCreateGrid__wide {
    grid-column: auto;
  }

  .modelCostPlannerGrandTotal {
    grid-template-columns: 1fr;
  }

  .modelCostPlannerGrandTotal__breakdown {
    justify-content: flex-start;
  }

  .aiAgentGroup__header,
  .aiInventoryBucket__header,
  .aiInventoryItem,
  .modelRegistryBucket__header {
    grid-template-columns: 1fr;
  }

  .aiInventoryItem__meta {
    justify-content: flex-start;
  }

  .modelCostScreen .denseTable--mobileLabels .modelCostInputCell > span {
    display: block;
  }

  .modelCostScreen .denseTable--mobileLabels .modelCostInput {
    min-height: 34px;
  }

  .modelRegistryBucket > .denseTableWrap {
    margin: 0 8px 8px;
  }

  .modelRegistryBucket .denseTableToolbar {
    padding: 8px;
  }

  .modelRegistryBucket .denseTableQuickFilter {
    min-width: 0;
  }

  .modelRegistryBucket .denseTable--mobileLabels tbody {
    gap: 10px;
  }

  .modelRegistryBucket .denseTable--mobileLabels tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .modelRegistryBucket--working .denseTable--mobileLabels tr {
    box-shadow: inset 3px 0 0 var(--success);
  }

  .modelRegistryBucket--paused .denseTable--mobileLabels tr {
    box-shadow: none;
  }

  .modelRegistryBucket .denseTable--mobileLabels td,
.modelRegistryBucket .denseTable--mobileLabels td.isWrapped,
.modelRegistryBucket .denseTable--mobileLabels td.isNowrap {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--panel);
  }

  .modelRegistryBucket .denseTable--mobileLabels td[data-label]::before {
    color: var(--muted);
    font-size: var(--text-legacy-10);
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(1),
  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(2),
  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(3),
  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(8),
  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(9),
  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(10) {
    grid-column: 1 / -1;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(1) {
    background: color-mix(in srgb, var(--panel) 94%, var(--line));
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(3) {
    order: 2;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(2) {
    order: 3;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(n + 4):nth-child(-n + 7) {
    order: 4;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(8) {
    order: 5;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(9) {
    order: 6;
  }

  .modelRegistryBucket .denseTable--mobileLabels td:nth-child(10) {
    order: 7;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelCostModelCell {
    gap: 4px;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelCostModelCell strong {
    font-size: var(--text-base);
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelCostModelCell small,
  .modelRegistryBucket .denseTable--mobileLabels .modelCostSourceCell small {
    line-height: 1.35;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelStageBadges {
    gap: 5px;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelStageBadges .statusBadge {
    max-width: 100%;
    white-space: normal;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelCostToggle {
    width: 100%;
    justify-content: space-between;
  }

  .modelRegistryBucket .denseTable--mobileLabels .modelCostInput {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .modelCostScreen .denseTable--mobileLabels .modelRegistrySaveButton {
    width: 100%;
    min-height: 34px;
    justify-content: center;
  }
}

.periodSummaryScreen {
  min-width: 0;
}

.periodSummaryToolbar {
  display: grid;
  grid-template-columns: minmax(128px, 0.85fr) repeat(3, minmax(150px, 1fr)) minmax(92px, 0.55fr) minmax(118px, 0.65fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.periodSummaryField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.periodSummaryField span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.periodSummaryField input,
.periodSummaryField select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.periodSummaryToolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.periodSummaryToolbar__actions .secondaryButton,
.periodSummaryToolbar__actions .tableAction {
  min-height: 38px;
  min-width: max-content;
}

.periodSummaryExportNote {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--panel);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.periodSummaryKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.periodNameCell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.periodNameCell strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.periodNameCell span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.28;
}

.periodScoreValue,
.periodDeltaValue {
  display: inline-flex;
  justify-content: flex-end;
  min-width: 54px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.periodScoreValue--success,
.periodDeltaValue--success {
  color: #69d38d;
}

.periodScoreValue--warning {
  color: #f0bd5f;
}

.periodScoreValue--danger,
.periodDeltaValue--danger {
  color: #ff8b8b;
}

.periodScoreValue--muted,
.periodDeltaValue--muted {
  color: var(--subtle);
}

.periodWeekCell {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.periodWeekCell span:last-child {
  color: var(--subtle);
  font-size: 10px;
}

.periodWeekCell--empty {
  display: inline-flex;
  justify-content: flex-end;
  color: var(--subtle);
}

.periodSummaryRow--total td {
  background: rgba(105, 211, 141, 0.08);
  font-weight: 760;
}

.periodSummaryRow--group td {
  background: rgba(90, 171, 255, 0.06);
}

.periodSummaryGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
  min-width: 0;
}

.periodGrowthInsightsPanel {
  padding: 12px;
}

.periodGrowthInsightsGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 12px;
  min-width: 0;
  margin-top: 10px;
}

.managerQualityScreen {
  display: grid;
  gap: 16px;
}

.managerQualityToolbar {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.managerQualityFilterDetails {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.managerQualityFilterDetails > summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}

.managerQualityFilterDetails > summary strong {
  min-width: 0;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

.managerQualityAdvancedFilters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding-top: 10px;
}

.managerQualityPeriodSegments {
  grid-column: span 3;
  align-self: end;
  min-width: min(100%, 320px);
}

.managerQualityNavigation {
  position: sticky;
  top: 8px;
  z-index: 18;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}

.managerQualityNavigation button {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.managerQualityNavigation button:hover,
.managerQualityNavigation button:focus-visible {
  background: var(--panel-soft);
  color: var(--text);
}

.managerQualityNavigation strong {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
  font-size: 10px;
}

#quality-results,
#quality-errors,
#quality-calls {
  scroll-margin-top: 60px;
}

.managerQualityRolePreview select {
  font-weight: 760;
}

.managerQualityIdentity {
  justify-content: center;
}

.managerQualityIdentity strong {
  min-width: 0;
  color: var(--text);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.managerQualityKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.managerQualityOverview {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.72fr);
  gap: 16px;
  align-items: stretch;
}

.managerQualityEyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 860;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.managerQualityIssues {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.managerQualityIssues .sectionHeader {
  align-items: center;
}

.managerQualityIssues .sectionHeader h2,
.managerQualityTrendPanel .sectionHeader h2 {
  margin: 0;
}

.managerQualityIssues__lead,
.managerQualityIssues__empty {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.managerQualityIssueList {
  display: grid;
  gap: 8px;
}

.managerQualityIssue {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
}

.managerQualityIssue__heading {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.managerQualityIssue__rank {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  color: var(--danger);
  font-size: 12px;
  font-weight: 860;
}

.managerQualityIssue__heading > div {
  min-width: 0;
}

.managerQualityIssue__heading > div:nth-child(2) {
  display: grid;
  gap: 2px;
}

.managerQualityIssue__heading > div:nth-child(2) strong,
.managerQualityIssue__heading > div:nth-child(2) span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.managerQualityIssue__heading > div:nth-child(2) strong {
  color: var(--text);
  line-height: 1.25;
}

.managerQualityIssue__heading > div:nth-child(2) span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.managerQualityIssue__frequency {
  display: grid;
  justify-items: end;
  white-space: nowrap;
}

.managerQualityIssue__frequency strong {
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
}

.managerQualityIssue__frequency span {
  color: var(--muted);
  font-size: 11px;
}

.managerQualityIssue__track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 7%, var(--panel-raised));
}

.managerQualityIssue__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 66%, var(--warning)));
}

.managerQualityIssue__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.managerQualityIssue__delta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.managerQualityIssue__delta--bad {
  color: var(--danger);
}

.managerQualityIssue__delta--good {
  color: var(--success);
}

.managerQualityExecutive {
  display: grid;
  gap: 12px;
}

.managerQualityExecutiveStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.managerQualityExecutiveStats span {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.managerQualityExecutiveStats b {
  color: var(--text);
}

.managerQualityExecutiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.managerQualityExecutiveGrid__wide {
  grid-column: 1 / -1;
}

.managerQualityTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.72fr) minmax(260px, 0.62fr);
  gap: 16px;
  align-items: stretch;
}

.managerQualityGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: 16px;
  align-items: start;
}

.managerQualityTrendPanel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.managerQualityTrend {
  min-height: 132px;
  display: grid;
  grid-template-columns: repeat(12, minmax(42px, 1fr));
  gap: 8px;
  align-items: end;
}

.managerQualityTrend__point {
  min-width: 0;
  display: grid;
  grid-template-rows: 64px auto auto;
  gap: 5px;
  align-items: end;
  text-align: center;
  color: var(--muted);
}

.managerQualityTrend__point i {
  width: 100%;
  min-height: 8px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(63, 131, 248, 0.92), rgba(38, 173, 129, 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.managerQualityTrend__point--empty i {
  background: var(--border);
  box-shadow: none;
}

.managerQualityTrend__point strong {
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}

.managerQualityTrend__point span {
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.managerQualityFocus {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--warning) 7%, transparent), transparent 58%),
    var(--panel);
}

.managerQualityFocus > strong {
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}

.managerQualityFocus ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.managerQualityFocus li,
.managerQualityFocus p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.managerQualityFocus__action {
  justify-self: start;
}

.managerQualitySecondaryGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  padding: 0 16px 16px;
}

.managerQualitySecondaryGrid--diagnostic {
  grid-template-columns: 1fr;
}

.managerQualitySecondaryGrid .managerQualityDiagnostic {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.managerQualityScoreDetails .infoBanner {
  margin: 0 16px 16px;
}

.usersEditorDisclosure > .matrixRuleForm {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.managerQualityDiagnostic {
  display: grid;
  gap: 12px;
}

.managerQualitySignalGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.managerQualitySignal {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.managerQualitySignal strong {
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}

.managerQualitySignal span,
.managerQualitySignal em {
  min-width: 0;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.managerQualitySignal em {
  color: var(--muted);
  font-size: 12px;
}

.managerQualityExamples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.managerQualityTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.managerQualityTags__more {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.managerQualityDetails {
  padding: 0;
  overflow: hidden;
}

.managerQualityDetails summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--text);
}

.managerQualityDetails summary span,
.managerQualityDetails summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.managerQualityDetails .denseTableShell {
  border-top: 1px solid var(--border);
  border-radius: 0;
}

.managerQualityAccessBlock {
  display: grid;
  gap: 10px;
}

.managerQualityAccessBlock p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .periodSummaryToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .managerQualityToolbar,
  .managerQualityKpis,
  .managerQualityExecutiveStats,
  .managerQualityExecutiveGrid,
  .managerQualityOverview,
  .managerQualityTopGrid,
  .managerQualityGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .managerQualityDiagnostic {
    grid-column: 1 / -1;
  }

  .managerQualityPeriodSegments {
    grid-column: span 2;
  }

  .periodSummaryToolbar__actions {
    justify-content: flex-start;
  }

  .periodSummaryGrid,
  .periodGrowthInsightsGrid,
  .periodSummaryKpis {
    grid-template-columns: 1fr;
  }

  .analyticsKpiVisualGrid,
  .analyticsGrowthGrid,
  .analyticsOperationalGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .periodSummaryToolbar {
    grid-template-columns: 1fr;
  }

  .managerQualityToolbar,
  .managerQualityKpis,
  .managerQualityExecutiveStats,
  .managerQualityExecutiveGrid,
  .managerQualityOverview,
  .managerQualityTopGrid,
  .managerQualityGrid,
  .managerQualitySecondaryGrid {
    grid-template-columns: 1fr;
  }

  .managerQualityIssue__heading {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .managerQualityPeriodSegments {
    grid-column: span 1;
    width: 100%;
  }

  .managerQualityNavigation {
    top: 6px;
    width: 100%;
  }

  .managerQualityNavigation button {
    flex: 1 0 auto;
    justify-content: center;
  }

  .managerQualityIssue__frequency {
    grid-column: 2;
    justify-items: start;
  }

  .managerQualityIssue__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .managerQualityIssue__footer .tableAction {
    width: 100%;
  }

  .managerQualityTrend {
    grid-template-columns: repeat(6, minmax(42px, 1fr));
  }

  [data-testid="manager-quality-call-list"] td[data-label$="Рекомендация"] {
    display: none;
  }

  .managerQualityKpis .kpiCard__top .statusBadge {
    display: none;
  }

  .managerQualityKpis .kpiCard__label {
    font-size: var(--text-legacy-8);
    letter-spacing: 0.04em;
  }

  .periodSummaryToolbar__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .periodSummaryToolbar__actions .secondaryButton,
  .periodSummaryToolbar__actions .tableAction {
    width: 100%;
  }

  .analyticsKpiVisualGrid,
  .analyticsGrowthGrid,
  .analyticsOperationalGrid {
    grid-template-columns: 1fr;
  }
}

.gamificationScreen {
  min-width: 0;
}

.gamificationToolbar {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(320px, 1fr) minmax(190px, 0.34fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.gamificationToolbar__group,
.gamificationToolbar__actions {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationToolbar__groupHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.gamificationToolbar__groupHeader strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
  line-height: 1.2;
}

.gamificationToolbar__groupHeader span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.gamificationToolbar__groupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.gamificationField {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.gamificationField > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.gamificationField > input,
.gamificationField > select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.gamificationField .multiSelectFilter {
  width: 100%;
}

.gamificationField .multiSelectFilter__summary {
  min-height: 38px;
}

.gamificationManagerSelect .multiSelectFilter__menu {
  overflow-x: hidden;
}

.gamificationManagerSelect .multiSelectFilter__options {
  min-width: 0;
}

.gamificationManagerSelect .multiSelectFilter__option {
  min-width: 0;
}

.gamificationManagerSelect .multiSelectFilter__option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.gamificationManagerSelect .multiSelectFilter__option span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gamificationToolbar__actions .primaryButton,
.gamificationToolbar__actions .secondaryButton {
  min-height: 38px;
  min-width: 0;
  width: 100%;
  white-space: normal;
}

.gamificationToolbar__actions {
  grid-template-columns: 1fr;
  align-content: start;
}

.gamificationToolbar__actions .gamificationToolbar__groupHeader {
  grid-column: 1 / -1;
}

.gamificationScoreSummary {
  font-weight: 650;
}

.gamificationSectionGroup {
  display: block;
  min-width: 0;
}

.gamificationSectionGroup__summary {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.gamificationSectionGroup__summary::-webkit-details-marker {
  display: none;
}

.gamificationSectionGroup__summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  transition: transform 160ms ease;
}

.gamificationSectionGroup:not([open]) .gamificationSectionGroup__summary::after {
  transform: rotate(-90deg);
}

.gamificationSectionGroup__summary span,
.gamificationSectionGroup__summary em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gamificationSectionGroup__summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.gamificationSectionGroup__summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
}

.gamificationSectionGroup__body {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 10px;
}

.gamificationOverview {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.gamificationTokenLegend {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.raceToken {
  --token-color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--token-color) 28%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--token-color) 7%, transparent), transparent),
    var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
}

.raceToken--compact {
  justify-content: center;
  width: 28px;
  min-width: 28px;
  padding: 0;
}

.raceToken__glyph {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--token-color);
  transition: transform 160ms ease;
}

.raceToken__svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--token-color);
  overflow: visible;
  transition: transform 160ms ease;
}

.raceToken__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.raceToken__glyph::before,
.raceToken__glyph::after {
  content: "";
  position: absolute;
  display: block;
}

.raceToken--race_car {
  --token-color: #9b5cff;
}

.raceToken--race_car .raceToken__glyph::before {
  left: 1px;
  right: 1px;
  top: 5px;
  height: 7px;
  border-radius: 7px 9px 3px 3px;
  background: currentColor;
  clip-path: polygon(0 68%, 15% 28%, 42% 2%, 78% 0, 100% 54%, 94% 100%, 4% 100%);
}

.raceToken--race_car .raceToken__glyph::after {
  left: 2px;
  right: 2px;
  bottom: 1px;
  height: 4px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 2px var(--panel-soft), 0 0 0 3px color-mix(in srgb, currentColor 78%, #111317);
}

.raceToken--rocket {
  --token-color: #7bdff2;
}

.raceToken--rocket .raceToken__glyph::before {
  inset: 1px 4px 2px;
  border-radius: 9px 9px 4px 4px;
  background: currentColor;
  clip-path: polygon(50% 0, 88% 34%, 72% 100%, 28% 100%, 12% 34%);
}

.raceToken--rocket .raceToken__glyph::after {
  left: 5px;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50% 50% 70% 70%;
  background: #f0bd5f;
}

.raceToken--boat {
  --token-color: #5aa7ff;
}

.raceToken--hyperbike {
  --token-color: #ff4fd8;
}

.raceToken--armored_unit,
.raceToken--command_center {
  --token-color: #69d38d;
}

.raceToken--cyber_unit,
.raceToken--radar {
  --token-color: #7bdff2;
}

.raceToken--lab {
  --token-color: #f0bd5f;
}

.raceToken--boat .raceToken__glyph::before {
  left: 1px;
  right: 1px;
  bottom: 2px;
  height: 6px;
  border-radius: 1px 1px 8px 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 20% 100%);
}

.raceToken--boat .raceToken__glyph::after {
  left: 6px;
  top: 1px;
  width: 7px;
  height: 9px;
  background: color-mix(in srgb, currentColor 55%, white);
  clip-path: polygon(0 0, 100% 54%, 0 100%);
}

.raceToken--summit {
  --token-color: #d1d1d6;
}

.raceToken--summit .raceToken__glyph::before {
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 100%, 34% 28%, 52% 62%, 70% 8%, 100% 100%);
}

.raceToken--summit .raceToken__glyph::after {
  left: 9px;
  top: 0;
  width: 5px;
  height: 4px;
  border-radius: 1px 4px 4px 1px;
  background: #f0bd5f;
}

.raceToken--relay {
  --token-color: #69d38d;
}

.raceToken--relay .raceToken__glyph::before {
  left: 2px;
  top: 6px;
  width: 12px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-18deg);
}

.raceToken--relay .raceToken__glyph::after {
  left: 1px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 42%, white);
  box-shadow: 9px 5px 0 color-mix(in srgb, currentColor 42%, white);
}

.raceToken--trophy {
  --token-color: #f0bd5f;
}

.raceToken--trophy .raceToken__glyph::before {
  inset: 1px 3px 5px;
  border-radius: 2px 2px 6px 6px;
  background: currentColor;
  box-shadow: -5px 2px 0 -2px currentColor, 5px 2px 0 -2px currentColor;
}

.raceToken--trophy .raceToken__glyph::after {
  left: 5px;
  bottom: 1px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
}

.raceToken--shield {
  --token-color: #69d38d;
}

.raceToken--shield .raceToken__glyph::before {
  inset: 1px 3px 1px;
  clip-path: polygon(50% 0, 100% 16%, 88% 72%, 50% 100%, 12% 72%, 0 16%);
  background: currentColor;
}

.raceToken--smile {
  --token-color: #d1d1d6;
}

.raceToken--smile .raceToken__glyph::before {
  left: 1px;
  right: 1px;
  top: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.raceToken--smile .raceToken__glyph::after {
  left: 2px;
  top: 3px;
  width: 11px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 2px;
  transform: rotate(45deg);
}

.raceToken--flame {
  --token-color: #ff8b56;
}

.raceToken--flame .raceToken__glyph::before {
  inset: 1px 3px 1px;
  border-radius: 70% 45% 70% 45%;
  background: currentColor;
  transform: rotate(38deg);
}

.raceToken--flag {
  --token-color: #7bdff2;
}

.raceToken--flag .raceToken__glyph::before {
  left: 3px;
  top: 1px;
  width: 2px;
  height: 13px;
  border-radius: 2px;
  background: currentColor;
}

.raceToken--flag .raceToken__glyph::after {
  left: 5px;
  top: 2px;
  width: 8px;
  height: 6px;
  border-radius: 1px 4px 4px 1px;
  background: currentColor;
}

.raceToken--pit_stop {
  --token-color: #f0bd5f;
}

.raceToken--pit_stop .raceToken__glyph::before {
  inset: 2px 8px 2px 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
}

.raceToken--repair {
  --token-color: #ff8b8b;
}

.raceToken--repair .raceToken__glyph::before {
  left: 6px;
  top: 1px;
  width: 3px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  transform: rotate(45deg);
}

.raceToken--repair .raceToken__glyph::after {
  left: 5px;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -11px 0 currentColor;
}

.gamificationTopCards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gamificationMetricGroups {
  align-items: stretch;
}

.gamificationMetricGroup__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationMetricTile {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationMetricTile--diagnostic {
  background:
    linear-gradient(180deg, rgba(240, 189, 95, 0.055), transparent 54%),
    var(--panel-soft);
}

.gamificationMetricTile--success {
  border-color: rgba(105, 211, 141, 0.28);
}

.gamificationMetricTile--warning {
  border-color: rgba(240, 189, 95, 0.34);
}

.gamificationMetricTile--danger {
  border-color: rgba(255, 139, 139, 0.42);
}

.gamificationMetricTile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.gamificationMetricTile__top > span {
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.15;
  text-transform: uppercase;
}

.gamificationMetricTile strong {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.gamificationMetricTile p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gamificationQualityCell {
  display: grid;
  gap: 3px;
  justify-items: end;
  min-width: 0;
}

.gamificationQualityCell strong {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gamificationQualityCell span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: right;
}

.gamificationFormulaGuide {
  min-width: 0;
}

.gamificationFormulaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.gamificationFormulaTile {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationFormulaTile strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.15;
}

.gamificationFormulaTile span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.1;
  text-transform: uppercase;
}

.gamificationFormulaTile p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.gamificationFormulaTile--qualityPoints {
  border-color: rgba(105, 211, 141, 0.28);
}

.gamificationFormulaTile--coveragePoints {
  border-color: rgba(90, 167, 255, 0.28);
}

.gamificationFormulaTile--conversionPoints {
  border-color: rgba(166, 227, 161, 0.34);
}

.gamificationFormulaTile--growthPoints {
  border-color: rgba(255, 139, 86, 0.28);
}

.gamificationFormulaTile--consistencyPoints {
  border-color: rgba(240, 189, 95, 0.28);
}

.gamificationActionCockpit {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.gamificationActionStats,
.gamificationMainFocus__top,
.gamificationMainFocus__meta,
.gamificationPriorityItem__head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.gamificationActionLayout {
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.gamificationMainFocus,
.gamificationPriorityItem,
.gamificationHeatmapTile,
.gamificationDirectionTile {
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationMainFocus {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px;
  border-color: rgba(240, 189, 95, 0.32);
  background:
    linear-gradient(180deg, rgba(240, 189, 95, 0.08), transparent 42%),
    var(--panel-soft);
}

.gamificationMainFocus--danger {
  border-color: rgba(255, 139, 139, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 139, 139, 0.1), transparent 42%),
    var(--panel-soft);
}

.gamificationMainFocus--success {
  border-color: rgba(105, 211, 141, 0.34);
  background:
    linear-gradient(180deg, rgba(105, 211, 141, 0.08), transparent 42%),
    var(--panel-soft);
}

.gamificationMainFocus strong,
.gamificationPriorityItem strong,
.gamificationHeatmapTile strong,
.gamificationDirectionTile strong {
  min-width: 0;
  color: var(--text);
  line-height: 1.2;
}

.gamificationMainFocus p,
.gamificationPriorityItem p,
.gamificationHeatmapTile p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.gamificationMainFocus em {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.gamificationMainFocus__meta span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
}

.gamificationPriorityList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-width: 0;
}

.gamificationPriorityItem {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.gamificationPriorityItem--danger {
  border-color: rgba(255, 139, 139, 0.42);
}

.gamificationPriorityItem--warning {
  border-color: rgba(240, 189, 95, 0.42);
}

.gamificationPriorityItem--success {
  border-color: rgba(105, 211, 141, 0.32);
}

.gamificationPriorityItem__head strong {
  flex: 1 1 120px;
  font-size: 12px;
}

.gamificationPriorityItem ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gamificationPriorityItem li {
  position: relative;
  padding-left: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.gamificationPriorityItem li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.gamificationCoachingPlan {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(123, 223, 242, 0.08), rgba(155, 92, 255, 0.06)),
    var(--panel-soft);
}

.gamificationCoachingPlan__header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 2px 2px;
}

.gamificationCoachingPlan__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.gamificationCoachingPlan__header span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

.gamificationCoachingStep {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
}

.gamificationCoachingStep--danger {
  border-color: rgba(255, 139, 139, 0.42);
}

.gamificationCoachingStep--warning {
  border-color: rgba(240, 189, 95, 0.42);
}

.gamificationCoachingStep--success {
  border-color: rgba(105, 211, 141, 0.32);
}

.gamificationCoachingStep span,
.gamificationCoachingStep p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.gamificationCoachingStep strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gamificationHeatmap,
.gamificationDirectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationHeatmapTile,
.gamificationDirectionTile {
  display: grid;
  gap: 5px;
  padding: 9px;
}

.gamificationHeatmapTile--danger,
.gamificationDirectionTile--danger {
  border-color: rgba(255, 139, 139, 0.38);
}

.gamificationHeatmapTile--warning,
.gamificationDirectionTile--warning {
  border-color: rgba(240, 189, 95, 0.34);
}

.gamificationHeatmapTile--success,
.gamificationDirectionTile--success {
  border-color: rgba(105, 211, 141, 0.28);
}

.gamificationHeatmapTile span,
.gamificationDirectionTile span {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.gamificationDirectionTile strong {
  font-size: 11px;
}

.gamificationFocusCalls {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.gamificationFocusCallStats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.gamificationFocusBrief,
.gamificationReasonJournal__guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationFocusBrief article,
.gamificationReasonJournal__guide article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
}

.gamificationReasonJournal__summary {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.25;
}

.gamificationFocusBrief span,
.gamificationReasonJournal__guide span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.15;
  text-transform: uppercase;
}

.gamificationFocusBrief strong,
.gamificationReasonJournal__guide strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gamificationFocusBrief p,
.gamificationReasonJournal__guide p {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.gamificationFocusFilters {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(132px, 0.75fr)) max-content;
  gap: 8px;
  align-items: end;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationFocusFilters .gamificationField {
  min-width: 0;
}

.gamificationFocusCallActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.gamificationFocusCallActions span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gamificationParticipantCoach {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(123, 223, 242, 0.32);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(123, 223, 242, 0.1), rgba(155, 92, 255, 0.07)),
    var(--panel-soft);
}

.gamificationParticipantCoach__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.gamificationParticipantCoach__header > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 8px;
  min-width: 0;
}

.gamificationParticipantCoach__header strong,
.gamificationParticipantCoach__header span,
.gamificationParticipantCoach__header em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gamificationParticipantCoach__header strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.gamificationParticipantCoach__header span {
  grid-column: 2;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
}

.gamificationParticipantCoach__header em {
  max-width: 440px;
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.gamificationParticipantCoach__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationParticipantCoach__grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
}

.gamificationParticipantCoach__grid span,
.gamificationParticipantCoach__grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.gamificationParticipantCoach__grid strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gamificationParticipantCoach__calls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.gamificationFocusCallList {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.gamificationFocusCall {
  display: grid;
  grid-template-columns: minmax(92px, 0.12fr) minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationFocusCall--danger {
  border-color: rgba(255, 139, 139, 0.46);
  background: rgba(255, 139, 139, 0.08);
}

.gamificationFocusCall--warning {
  border-color: rgba(240, 189, 95, 0.42);
  background: rgba(240, 189, 95, 0.07);
}

.gamificationFocusCall__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gamificationFocusCall__rank,
.gamificationFocusCall__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.gamificationFocusCall__actions {
  justify-content: flex-end;
}

.gamificationFocusCall__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.gamificationFocusCall__head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.gamificationFocusCall__head strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.gamificationFocusCall__head span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gamificationFocusCall__summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.18fr) minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.gamificationFocusCall__summary span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gamificationFocusCall__summary p,
.gamificationFocusCall__summary em {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gamificationFocusCall__summary em {
  color: var(--subtle);
  font-style: normal;
}

.gamificationFocusCallList__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 0 0;
}

.gamificationFocusCallList__footer span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.3;
}

.gamificationReasonJournal {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.gamificationReasonJournal__notice,
.gamificationReasonJournal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationReasonJournal__notice {
  align-items: stretch;
}

.gamificationReasonJournal__notice .secondaryButton {
  align-self: start;
  flex: 0 0 auto;
}

.gamificationReasonJournal__stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.gamificationReasonJournal__toolbar {
  align-items: end;
}

.gamificationReasonJournal__toolbar .gamificationField {
  min-width: 180px;
}

.gamificationReasonJournal__groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationReasonGroup {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(240, 189, 95, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(240, 189, 95, 0.08), rgba(255, 255, 255, 0.02));
}

.gamificationReasonGroup--danger {
  border-color: rgba(255, 139, 139, 0.44);
  background: linear-gradient(135deg, rgba(255, 139, 139, 0.1), rgba(255, 255, 255, 0.02));
}

.gamificationReasonGroup span,
.gamificationReasonGroup p,
.gamificationReasonGroup em {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gamificationReasonGroup span {
  color: var(--subtle);
  font-weight: 800;
  text-transform: uppercase;
}

.gamificationReasonGroup strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.gamificationReasonGroup em {
  color: var(--subtle);
  font-style: normal;
}

.gamificationReasonEvidence {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.gamificationReasonEvidence strong {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.3;
}

.gamificationReasonEvidence span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.gamificationReasonJournal__row--danger td {
  background: rgba(255, 139, 139, 0.06);
}

.gamificationReasonJournal__row--warning td {
  background: rgba(240, 189, 95, 0.045);
}

.callFocusContext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(240, 189, 95, 0.42);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(240, 189, 95, 0.12), rgba(255, 255, 255, 0.03));
}

.callFocusContext__main {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
}

.callFocusContext__main strong,
.callFocusContext__main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.callFocusContext__main strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.callFocusContext__main span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.gamificationDataFunnel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.gamificationFunnelSteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.gamificationFunnelStep {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.gamificationFunnelStep--warning {
  border-color: rgba(240, 189, 95, 0.34);
}

.gamificationFunnelStep--danger {
  border-color: rgba(255, 139, 139, 0.38);
}

.gamificationFunnelStep--success {
  border-color: rgba(105, 211, 141, 0.28);
}

.gamificationFunnelStep span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.15;
  text-transform: uppercase;
}

.gamificationFunnelStep strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gamificationFunnelStep p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.gamificationRacePanel {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.gamificationTheme--gt_league,
.gamificationTheme--premium_track,
.gamificationTheme--auto_track,
.gamificationTheme--gt_track {
  background: var(--panel);
}

.gamificationTheme--tactical_league,
.gamificationTheme--command_center,
.gamificationTheme--space_sprint {
  background: var(--panel);
}

.gamificationTheme--cyber_drift_league,
.gamificationTheme--radar_grid {
  background: var(--panel);
}

.gamificationTheme--hyperbike_league,
.gamificationTheme--quality_lab {
  background: var(--panel);
}

.gamificationTheme--corsair_league,
.gamificationTheme--fleet_command,
.gamificationTheme--pirate_regatta,
.gamificationTheme--regatta {
  background: var(--panel);
}

.gamificationTheme--summit {
  background: var(--panel);
}

.gamificationTheme--relay {
  background: var(--panel);
}

.gamificationRaceIntro {
  display: flex;
  gap: 8px 14px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.gamificationRaceIntro strong {
  color: var(--text);
}

.raceLaneList {
  display: grid;
  gap: 10px;
}

.raceLane {
  display: grid;
  grid-template-columns: minmax(230px, 0.38fr) minmax(320px, 1fr) minmax(210px, 0.28fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lane-accent) 54%, var(--line));
}

.raceLane[role="button"] {
  cursor: pointer;
}

.raceLane[role="button"]:hover,
.raceLane[role="button"]:focus-visible,
.raceLane--selected {
  border-color: color-mix(in srgb, var(--lane-accent) 62%, var(--line-soft));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--lane-accent) 72%, var(--line)),
    0 0 0 2px color-mix(in srgb, var(--lane-accent) 12%, transparent);
}

.raceLane[role="button"]:focus-visible {
  outline: none;
}

.raceLane--selected {
  background: var(--panel-soft);
}

.raceLane--leader {
  border-color: color-mix(in srgb, var(--lane-accent) 48%, var(--line));
  background: var(--panel-soft);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--lane-accent) 80%, var(--accent));
}

.raceLane--provisional {
  border-color: rgba(240, 189, 95, 0.38);
  background: var(--panel);
  box-shadow: inset 3px 0 0 rgba(240, 189, 95, 0.68);
}

.raceLane--incident {
  border-color: rgba(255, 139, 139, 0.5);
  background: var(--panel);
  box-shadow: inset 3px 0 0 rgba(255, 139, 139, 0.78);
}

.raceLane--recovery {
  border-color: rgba(240, 189, 95, 0.46);
  background: var(--panel);
  box-shadow: inset 3px 0 0 rgba(240, 189, 95, 0.7);
}

.raceLane--incident .raceTrack,
.raceLane--recovery .raceTrack {
  border-color: color-mix(in srgb, var(--lane-accent) 22%, var(--line));
}

.raceLane--incident .raceTrack__finish,
.raceLane--recovery .raceTrack__finish {
  opacity: 0.58;
}

.raceLane--incident .raceTrack::after,
.raceLane--recovery .raceTrack::after {
  content: none;
  pointer-events: none;
}

.raceLane--incident .raceTrack::after {
  background: linear-gradient(90deg, rgba(255, 139, 139, 0.18), transparent);
}

.raceLane--recovery .raceTrack::after {
  background: linear-gradient(90deg, rgba(240, 189, 95, 0.16), transparent);
}

.raceLane__meta,
.raceLane__name {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.raceLane__name strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.raceLane__name span,
.raceLane__points span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.raceLane__badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.raceTrack {
  position: relative;
  min-width: 0;
  min-height: 70px;
  --race-vehicle-w: 72px;
  --race-vehicle-h: 42px;
  --race-vehicle-half: 38px;
  --race-finish-zone: 46px;
  --race-safe-progress: clamp(var(--race-vehicle-half), var(--race-progress), calc(100% - var(--race-finish-zone)));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.gamificationTheme--gt_league .raceTrack,
.gamificationTheme--premium_track .raceTrack,
.gamificationTheme--auto_track .raceTrack,
.gamificationTheme--gt_track .raceTrack,
.gamificationTheme--corsair_league .raceTrack,
.gamificationTheme--fleet_command .raceTrack,
.gamificationTheme--hyperbike_league .raceTrack,
.gamificationTheme--tactical_league .raceTrack,
.gamificationTheme--cyber_drift_league .raceTrack {
  min-height: 92px;
  --race-vehicle-w: 120px;
  --race-vehicle-h: 66px;
  --race-vehicle-half: 76px;
  --race-finish-zone: 100px;
}

.raceTrack__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  pointer-events: none;
}

.raceTrack__grid span {
  border-right: 1px dashed rgba(209, 209, 214, 0.12);
}

.raceTrack__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--race-progress);
  overflow: hidden;
  background: color-mix(in srgb, var(--lane-accent) 12%, transparent);
  transition: width 420ms ease;
}

.raceTrack__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.12) 48%, transparent 56% 100%);
  transform: translateX(-100%);
}

.raceTrack__car {
  position: absolute;
  left: var(--race-safe-progress);
  top: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transition: left 420ms ease;
}

.raceTrack__car::before {
  content: "";
  position: absolute;
  right: 54%;
  top: 50%;
  width: 54px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lane-accent) 24%, transparent));
  opacity: 0.2;
  filter: blur(4px);
  transform: translateY(-50%);
  pointer-events: none;
}

.gamificationTheme--gt_league .raceTrack__car::before,
.gamificationTheme--premium_track .raceTrack__car::before,
.gamificationTheme--auto_track .raceTrack__car::before,
.gamificationTheme--gt_track .raceTrack__car::before {
  width: 72px;
  height: 18px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lane-accent) 26%, transparent));
  opacity: 0.22;
}

.raceTrack__finish {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.raceCarShape {
  position: relative;
  display: inline-block;
  width: 92px;
  height: 54px;
  color: var(--lane-accent);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

.raceVehicleShape--svg::before,
.raceVehicleShape--svg::after {
  content: none;
}

.raceVehicleSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.raceVehicleSvg__speed,
.raceVehicleSvg__underglow {
  vector-effect: non-scaling-stroke;
}

.raceVehicleSvg__wheel {
  transform-box: fill-box;
  transform-origin: center;
}

.raceVehicleSvg__sail,
.raceVehicleSvg__flag {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.raceVehicleSvg__wake,
.raceVehicleSvg__cannonGlow,
.raceVehicleSvg__trackTread {
  vector-effect: non-scaling-stroke;
}

.raceCarShape__body {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 5px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px 15px 8px 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0 18%, transparent 18% 100%),
    var(--lane-accent);
}

.raceCarShape__body::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -6px;
  width: 13px;
  height: 8px;
  border-radius: 8px 8px 2px 2px;
  background: color-mix(in srgb, var(--lane-accent) 54%, white);
}

.raceCarShape__body::after {
  content: "";
  position: absolute;
  display: none;
}

.raceCarShape__wheel {
  position: absolute;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: #0f1115;
}

.raceCarShape__wheel--left {
  left: 10px;
}

.raceCarShape__wheel--right {
  right: 10px;
}

.raceCarShape--provisional {
  opacity: 0.84;
}

.raceVehicleShape--race_car {
  width: 54px;
  height: 27px;
}

.raceVehicleShape--race_car .raceCarShape__body {
  left: 2px;
  right: 2px;
  top: 6px;
  height: 16px;
  border-radius: 16px 20px 8px 9px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0 8%, transparent 8% 78%, rgba(17, 19, 23, 0.38) 78% 86%, transparent 86%),
    radial-gradient(circle at 70% 34%, rgba(255, 255, 255, 0.84) 0 9%, transparent 10%),
    var(--lane-accent);
  clip-path: polygon(0 58%, 10% 20%, 35% 2%, 70% 0, 91% 25%, 100% 60%, 94% 100%, 4% 100%);
}

.raceVehicleShape--race_car .raceCarShape__body::before {
  left: 18px;
  top: -5px;
  width: 17px;
  height: 9px;
  border-radius: 10px 12px 2px 2px;
  background: color-mix(in srgb, var(--lane-accent) 42%, white);
  transform: skewX(-18deg);
}

.raceVehicleShape--race_car .raceCarShape__body::after {
  display: block;
  right: -3px;
  top: 1px;
  width: 7px;
  height: 3px;
  border-radius: 999px;
  background: #f0bd5f;
  box-shadow: -44px 5px 0 #f5f5f7;
}

.raceVehicleShape--race_car .raceCarShape__wheel {
  bottom: 0;
  width: 10px;
  height: 10px;
  border-color: color-mix(in srgb, var(--panel) 82%, white);
  background:
    radial-gradient(circle, #f5f5f7 0 20%, #0f1115 22% 100%);
}

.raceVehicleShape--rocket {
  width: 42px;
  height: 30px;
}

.raceVehicleShape--rocket .raceCarShape__body {
  left: 11px;
  right: 11px;
  top: 2px;
  height: 25px;
  border-radius: 16px 16px 7px 7px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.84) 0 15%, transparent 16%),
    var(--lane-accent);
  clip-path: polygon(50% 0, 92% 30%, 74% 100%, 26% 100%, 8% 30%);
}

.raceVehicleShape--rocket .raceCarShape__body::before {
  left: 6px;
  top: 23px;
  width: 8px;
  height: 9px;
  border-radius: 50% 50% 70% 70%;
  background: #f0bd5f;
}

.raceVehicleShape--rocket .raceCarShape__wheel {
  display: none;
}

.raceVehicleShape--boat {
  width: 58px;
  height: 34px;
}

.raceVehicleShape--boat::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 3px;
  width: 2px;
  height: 21px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lane-accent) 52%, #1b1f27);
  box-shadow: 13px 4px 0 color-mix(in srgb, var(--lane-accent) 52%, #1b1f27);
}

.raceVehicleShape--boat::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 1px;
  bottom: -2px;
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(123, 223, 242, 0.72) 13% 24%, transparent 25% 38%, rgba(123, 223, 242, 0.54) 39% 52%, transparent 53% 100%);
  opacity: 0.78;
}

.raceVehicleShape--boat .raceCarShape__body {
  left: 3px;
  right: 3px;
  top: 20px;
  height: 10px;
  border-radius: 3px 3px 16px 16px;
  background:
    linear-gradient(90deg, rgba(17, 19, 23, 0.26) 0 14%, transparent 14% 72%, rgba(255, 255, 255, 0.38) 72% 84%, transparent 84%),
    var(--lane-accent);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

.raceVehicleShape--boat .raceCarShape__body::before {
  left: 18px;
  top: -18px;
  width: 13px;
  height: 18px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lane-accent) 38%, #f6efe1);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow: 13px 3px 0 color-mix(in srgb, var(--lane-accent) 46%, #f6efe1);
}

.raceVehicleShape--boat .raceCarShape__body::after {
  display: block;
  left: 37px;
  top: -22px;
  width: 9px;
  height: 6px;
  border-radius: 1px 6px 6px 1px;
  background: #f0bd5f;
}

.raceVehicleShape--boat .raceCarShape__wheel {
  display: none;
}

.raceVehicleShape--svg.raceVehicleShape--boat::before,
.raceVehicleShape--svg.raceVehicleShape--boat::after {
  content: none;
}

.raceVehicleShape--summit {
  width: 42px;
  height: 30px;
}

.raceVehicleShape--summit .raceCarShape__body {
  left: 4px;
  right: 4px;
  top: 8px;
  height: 19px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lane-accent) 58%, white);
  clip-path: polygon(0 100%, 34% 25%, 52% 62%, 72% 0, 100% 100%);
}

.raceVehicleShape--summit .raceCarShape__body::before {
  left: 25px;
  top: -7px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: var(--lane-accent);
}

.raceVehicleShape--summit .raceCarShape__body::after {
  display: block;
  left: 27px;
  top: -7px;
  width: 9px;
  height: 6px;
  border-radius: 1px 5px 5px 1px;
  background: #f0bd5f;
}

.raceVehicleShape--summit .raceCarShape__wheel {
  display: none;
}

.raceVehicleShape--relay {
  width: 46px;
  height: 28px;
}

.raceVehicleShape--relay .raceCarShape__body {
  left: 5px;
  right: 5px;
  top: 10px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0 18%, transparent 18% 82%, rgba(255, 255, 255, 0.78) 82%),
    var(--lane-accent);
  transform: rotate(-15deg);
}

.raceVehicleShape--relay .raceCarShape__body::before {
  left: 4px;
  top: -8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--lane-accent) 42%, white);
  box-shadow: 22px 14px 0 color-mix(in srgb, var(--lane-accent) 42%, white);
}

.raceVehicleShape--relay .raceCarShape__wheel {
  display: none;
}

.raceVehicleShape--svg.raceVehicleShape--race_car,
.raceVehicleShape--svg.raceVehicleShape--boat,
.raceVehicleShape--svg.raceVehicleShape--hyperbike,
.raceVehicleShape--svg.raceVehicleShape--armored_unit,
.raceVehicleShape--svg.raceVehicleShape--cyber_unit,
.raceVehicleShape--svg.raceVehicleShape--command_center,
.raceVehicleShape--svg.raceVehicleShape--radar,
.raceVehicleShape--svg.raceVehicleShape--lab,
.raceVehicleShape--svg.raceVehicleShape--rocket,
.raceVehicleShape--svg.raceVehicleShape--summit,
.raceVehicleShape--svg.raceVehicleShape--relay {
  width: var(--race-vehicle-w, 72px);
  height: var(--race-vehicle-h, 42px);
}

.raceVehicleShape--svg.raceVehicleShape--summit,
.raceVehicleShape--svg.raceVehicleShape--relay {
  width: 66px;
}

.raceLane__points {
  display: grid;
  justify-items: end;
  gap: 3px;
  min-width: 0;
}

.raceLane__points span:first-child {
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.gamificationConversionCell {
  display: inline-grid;
  grid-template-columns: minmax(58px, 1fr) auto;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.gamificationConversionCell input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gamificationConversionCell span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.gamificationPlanFactStatus {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 0;
}

.gamificationPlanFactStatus strong {
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.gamificationLowerGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 12px;
  min-width: 0;
}

.achievementGrid {
  display: grid;
  gap: 8px;
}

.achievementTile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.achievementTile--success {
  border-color: rgba(105, 211, 141, 0.32);
}

.achievementTile--warning {
  border-color: rgba(240, 189, 95, 0.36);
}

.achievementTile div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.achievementTile span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.1;
  text-transform: uppercase;
}

.achievementTile strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.achievementTile em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.weeklyRaceGrid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.weeklyRaceRow {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.weeklyRaceRow__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.weeklyRaceRow__title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weeklyRaceCells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
  min-width: 0;
}

.weeklyRaceCell {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
}

.weeklyRaceCell--empty {
  opacity: 0.68;
}

.weeklyRaceCell span,
.weeklyRaceCell em {
  color: var(--subtle);
  font-size: 10px;
  font-style: normal;
  line-height: 1.1;
}

.weeklyRaceCell strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.weeklyRaceCell__bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-bg);
}

.weeklyRaceCell__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #69d38d, #7bdff2);
}

@media (max-width: 1180px) {
  .gamificationToolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamificationToolbar__actions {
    grid-column: span 2;
    justify-content: flex-start;
  }

  .gamificationMetricGroups {
    grid-template-columns: 1fr;
  }

  .gamificationTopCards,
  .gamificationLowerGrid,
  .gamificationFormulaGrid,
  .gamificationActionLayout,
  .gamificationCoachingPlan,
  .gamificationParticipantCoach__grid {
    grid-template-columns: 1fr;
  }

  .raceLane {
    grid-template-columns: 1fr;
  }

  .raceLane__points {
    justify-items: start;
  }

  .gamificationFocusFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamificationReasonJournal__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gamificationFocusCall {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .gamificationFocusCall__rank,
  .gamificationFocusCall__actions {
    justify-content: flex-start;
  }

  .gamificationFocusCall__summary {
    grid-template-columns: 1fr;
  }

  .gamificationFocusCallList__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .gamificationToolbar {
    grid-template-columns: 1fr;
  }

  .gamificationToolbar__groupGrid,
  .gamificationMetricGroup__tiles {
    grid-template-columns: 1fr;
  }

  .gamificationToolbar__actions {
    grid-column: auto;
  }

  .gamificationToolbar__actions .primaryButton,
  .gamificationToolbar__actions .secondaryButton {
    width: 100%;
  }

  .gamificationSectionGroup__summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .gamificationSectionGroup__summary::after {
    position: absolute;
    right: 12px;
    top: 14px;
  }

  .gamificationSectionGroup__summary em {
    padding-right: 18px;
    text-align: left;
  }

  .gamificationFocusFilters,
  .callFocusContext,
  .gamificationParticipantCoach__header,
  .gamificationFocusBrief,
  .gamificationReasonJournal__guide {
    grid-template-columns: 1fr;
  }

  .gamificationFocusCallActions,
  .gamificationReasonJournal__notice,
  .gamificationReasonJournal__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .gamificationReasonJournal__groups {
    grid-template-columns: 1fr;
  }

  .gamificationReasonJournal__toolbar .gamificationField {
    min-width: 0;
  }

  .gamificationCoachingPlan__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .gamificationCoachingPlan__header span {
    text-align: left;
  }

  .gamificationParticipantCoach__header {
    align-items: stretch;
    flex-direction: column;
  }

  .gamificationParticipantCoach__header > div {
    grid-template-columns: 1fr;
  }

  .gamificationParticipantCoach__header span {
    grid-column: auto;
  }

  .callFocusContext {
    align-items: stretch;
    flex-direction: column;
  }

  .callFocusContext__main {
    grid-template-columns: 1fr;
  }

  .callFocusContext__main span {
    grid-column: auto;
  }

  .raceTrack {
    min-height: 58px;
  }

  .gamificationTheme--gt_league .raceTrack,
  .gamificationTheme--premium_track .raceTrack,
  .gamificationTheme--auto_track .raceTrack,
  .gamificationTheme--gt_track .raceTrack,
  .gamificationTheme--corsair_league .raceTrack,
  .gamificationTheme--fleet_command .raceTrack,
  .gamificationTheme--hyperbike_league .raceTrack,
  .gamificationTheme--tactical_league .raceTrack,
  .gamificationTheme--cyber_drift_league .raceTrack {
    min-height: 70px;
    --race-vehicle-w: 84px;
    --race-vehicle-h: 46px;
    --race-vehicle-half: 52px;
    --race-finish-zone: 70px;
  }

  .raceCarShape {
    width: 72px;
  }

  .raceVehicleShape--svg.raceVehicleShape--race_car,
  .raceVehicleShape--svg.raceVehicleShape--boat,
  .raceVehicleShape--svg.raceVehicleShape--hyperbike,
  .raceVehicleShape--svg.raceVehicleShape--armored_unit,
  .raceVehicleShape--svg.raceVehicleShape--cyber_unit {
    width: var(--race-vehicle-w, 84px);
    height: var(--race-vehicle-h, 46px);
  }

  .achievementTile {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .achievementTile > .statusBadge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .raceToken:hover .raceToken__glyph,
  .raceToken:hover .raceToken__svg,
  .raceToken:focus-within .raceToken__glyph,
  .raceToken:focus-within .raceToken__svg {
    transform: translateY(-1px);
  }

  .raceTrack__progress::after {
    animation: raceProgressSheen 2.8s ease-in-out infinite;
  }

  .raceTrack__car {
    animation: raceVehicleFloat 2.4s ease-in-out infinite;
  }

  .raceVehicleSvg__wheel {
    animation: raceWheelSpin 680ms linear infinite;
  }

  .raceVehicleSvg__speed,
  .raceVehicleSvg__underglow {
    animation: raceNeonTrail 1.6s ease-in-out infinite alternate;
  }

  .raceVehicleSvg__wake {
    animation: raceWakeFlow 1.5s ease-in-out infinite alternate;
  }

  .raceVehicleSvg__sail {
    animation: raceSailTension 2.4s ease-in-out infinite;
  }

  .raceVehicleSvg__flag {
    animation: raceFlagWave 1.15s ease-in-out infinite;
  }

  .raceVehicleSvg__cannonGlow {
    animation: raceCannonPulse 1.9s ease-in-out infinite alternate;
  }

  .raceVehicleSvg__trackTread {
    animation: raceTrackTread 780ms linear infinite;
  }

  .raceVehicleShape--svg .raceVehicleSvg {
    animation: raceVehicleVectorFloat 2.4s ease-in-out infinite;
  }

  .raceVehicleShape--rocket .raceCarShape__body::before {
    animation: rocketFlamePulse 720ms ease-in-out infinite alternate;
  }

  .raceVehicleShape--boat::after {
    animation: frigateWake 1.7s linear infinite;
  }
}

@keyframes raceProgressSheen {
  0% {
    transform: translateX(-110%);
  }

  54%,
  100% {
    transform: translateX(110%);
  }
}

@keyframes raceVehicleFloat {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 1px));
  }
}

@keyframes raceVehicleVectorFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

@keyframes raceWheelSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes raceNeonTrail {
  from {
    opacity: 0.36;
    transform: translateX(0);
  }

  to {
    opacity: 0.78;
    transform: translateX(-3px);
  }
}

@keyframes rocketFlamePulse {
  from {
    transform: scaleY(0.82);
    opacity: 0.68;
  }

  to {
    transform: scaleY(1.15);
    opacity: 1;
  }
}

@keyframes frigateWake {
  to {
    background-position: 28px 0;
  }
}

@keyframes raceWakeFlow {
  from {
    opacity: 0.26;
    transform: translateX(0);
  }

  to {
    opacity: 0.68;
    transform: translateX(-5px);
  }
}

@keyframes raceSailTension {
  0%,
  100% {
    transform: skewX(0deg) scaleX(1);
  }

  50% {
    transform: skewX(-2deg) scaleX(1.025);
  }
}

@keyframes raceFlagWave {
  0%,
  100% {
    transform: skewX(0deg);
  }

  50% {
    transform: skewX(-9deg) translateX(-1px);
  }
}

@keyframes raceCannonPulse {
  from {
    opacity: 0.28;
    transform: translateX(0);
  }

  to {
    opacity: 0.82;
    transform: translateX(2px);
  }
}

@keyframes raceTrackTread {
  from {
    opacity: 0.42;
    transform: translateX(0);
  }

  to {
    opacity: 0.74;
    transform: translateX(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .raceTrack__progress,
  .raceTrack__car,
  .raceTrack__progress::after,
  .raceCarShape__wheel,
  .raceVehicleSvg__wheel,
  .raceVehicleSvg__speed,
  .raceVehicleSvg__underglow,
  .raceVehicleSvg__wake,
  .raceVehicleSvg__sail,
  .raceVehicleSvg__flag,
  .raceVehicleSvg__cannonGlow,
  .raceVehicleSvg__trackTread,
  .raceVehicleSvg,
  .raceVehicleShape--boat::after,
  .weeklyRaceCell__bar i {
    animation: none;
    transition: none;
  }
}

/* Operational UX polish layer */
.helpHintWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: text-bottom;
}

.helpHint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(141, 154, 168, 0.12);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: text-bottom;
  cursor: help;
}

.helpHint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.helpHint__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 80;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 2px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  visibility: hidden;
  white-space: normal;
}

.helpHint__bubble::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
  content: '';
  transform: translate(-50%, -4px) rotate(45deg);
}

.helpHintWrap:hover .helpHint__bubble,
.helpHint:focus + .helpHint__bubble,
.helpHint:focus-visible + .helpHint__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.fieldStack > span,
.periodSummaryField > span,
.kpiCard__label,
.scopeOverviewBar__main > span,
.guidanceStrip > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tablePanel,
.chartCard,
.kpiCard,
.scrutexPanel,
.matrixErrorFocusPanel,
.managerAccessWorkspace,
.managerPeriodAutomation,
.periodSummaryToolbar {
  box-shadow: none;
}

.tablePanel,
.chartCard,
.kpiCard,
.scrutexPanel {
  background: var(--panel);
}

.kpiCard {
  min-height: 86px;
  padding: 11px 12px;
}

.kpiCard__top {
  gap: 8px;
}

.kpiCard__label {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.kpiCard__value {
  margin-top: 8px;
  font-size: var(--text-legacy-23);
}

.kpiCard__delta {
  margin-top: 4px;
  line-height: 1.35;
}

.statusBadge {
  align-items: center;
  min-height: 22px;
  border-color: var(--line);
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-weight: var(--weight-bold);
  white-space: normal;
  overflow: visible;
}

.statusBadge::before {
  width: 5px;
  height: 5px;
}

.statusBadge__text {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.denseTableWrap {
  --dense-table-surface: var(--panel);
  --dense-table-header-surface: var(--panel-strong);
  --dense-table-edge-shadow: var(--panel);
  box-shadow: none;
}

.denseTable th {
  height: 34px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.denseTable td {
  height: 42px;
  padding: 6px 9px;
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td {
  background: var(--panel-strong);
}

.denseTable tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

.denseTable tr.isClickable:hover td:first-child {
  box-shadow: var(--interactive-hover-shadow);
}

.denseTable tr:focus-within td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTablePagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.denseTablePagination > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.denseTablePagination__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.denseTablePagination__actions > span {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.emptyTableState {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 520px);
  min-height: 64px;
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
}

.emptyTableState strong {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.35;
}

.emptyTableState p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.emptyTableState__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.guidanceStrip,
.scopeOverviewBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.guidanceStrip {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.guidanceStrip--compact {
  padding: 7px 10px;
}

.guidanceStrip > span {
  display: inline-flex;
  align-items: center;
}

.directionBriefing__main span,
.directionBriefing__points span {
  overflow-wrap: anywhere;
}

.scopeOverviewBar {
  align-items: stretch;
}

.scopeOverviewBar--warning {
  border-color: rgba(240, 189, 95, 0.52);
}

.scopeOverviewBar__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scopeOverviewBar__main > span {
  display: inline-flex;
  align-items: center;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.scopeOverviewBar__main > strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scopeOverviewBar__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
  flex: 0 1 420px;
}

.scopeOverviewBar__metric {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 4px 0 4px 10px;
  border-left: 1px solid var(--line);
}

.scopeOverviewBar__metric strong {
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.scopeOverviewBar__metric em {
  color: var(--subtle);
  font-size: 10px;
  font-style: normal;
  font-weight: 720;
}

.tabs {
  gap: 5px;
}

.tabs__button {
  min-height: 34px;
  padding-inline: 10px;
}

.tabs__button.isActive,
.leftNav__item.isActive,
.leftNav__domainButton.isActive {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.leftNav__item.isActive .leftNav__dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Shared hover/selection layer for operational dashboards. */
.denseTable td,
.reviewQueueItem,
.queueRow,
.managerViolationRow,
.scrutexBarRow,
.barRow--clickable,
.kpiCard--clickable,
.tabs__button,
.leftNav__item,
.leftNav__domainButton,
.filterChip,
.scoreBlock,
.evidenceAnchor,
.transcriptRow,
.matrixStatusCell,
.reviewEvidenceFeedbackButton,
.violationPickerItem,
.reviewDecisionButton,
.modelExportCheck,
.modelCostPlannerStatusOption {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.denseTable tbody tr:hover td,
.denseTable tbody tr.isClickable:hover td {
  background: var(--panel-strong);
}

.denseTable tbody tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

.denseTable tbody tr:hover td:not(:first-child),
.denseTable tbody tr.isClickable:hover td:not(:first-child) {
  box-shadow: var(--interactive-hover-shadow);
}

.denseTable tbody tr:focus-within td:not(:first-child) {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tbody tr.isClickable:hover td:first-child {
  box-shadow: var(--interactive-hover-shadow);
}

.denseTable tbody tr:focus-within td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tbody tr.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
  color: var(--text);
  border-bottom-color: var(--interactive-selected-line);
}

.denseTable tbody tr.isSelected td:not(:first-child),
.denseTable tbody tr:has(input[type="checkbox"]:checked) td:not(:first-child) {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tbody tr.isSelected td:first-child,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

.denseTable tbody tr.isSelected td.isStickyColumn,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td.isStickyColumn {
  background: var(--dense-table-selected-surface);
}

.reviewQueueItem:hover,
.reviewQueueItem:focus-visible,
.reviewQueueItem:focus-within {
  border-color: var(--interactive-active-border);
  box-shadow: var(--interactive-hover-shadow);
  outline: none;
}

.reviewQueueItem.isActive {
  border-color: var(--accent);
  background:
    linear-gradient(90deg, var(--interactive-selected-wash), transparent 140px),
    var(--panel-soft);
  box-shadow: var(--interactive-selected-shadow);
}

.reviewQueueItem.isSelected {
  border-color: var(--warning);
  box-shadow: var(--interactive-selected-shadow);
}

.reviewQueueItem.isPriority:hover,
.reviewQueueItem.isOkScore:hover,
.reviewQueueItem.isDone:hover,
.reviewQueueItem.isSkipped:hover,
.reviewQueueItem.isReopened:hover,
.reviewQueueItem.isSelected:hover,
.reviewQueueItem.hasDraft:hover {
  box-shadow: var(--interactive-hover-shadow);
}

.reviewQueueItem.isPriority.isActive,
.reviewQueueItem.isOkScore.isActive,
.reviewQueueItem.isDone.isActive,
.reviewQueueItem.isSkipped.isActive,
.reviewQueueItem.isReopened.isActive,
.reviewQueueItem.isSelected.isActive,
.reviewQueueItem.hasDraft.isActive {
  border-color: var(--accent);
  box-shadow: var(--interactive-selected-shadow);
}

.queueRow.isActive {
  border-color: var(--accent);
  background: var(--interactive-selected-bg);
  box-shadow: var(--interactive-selected-shadow);
}

.managerViolationRow:hover,
.managerViolationRow:focus-visible,
button.scrutexBarRow:hover,
.barRow--clickable:hover {
  border-color: var(--interactive-active-border);
  box-shadow: var(--interactive-hover-shadow);
  outline: none;
}

.barRow--clickable:focus-visible {
  border-color: var(--interactive-active-border);
  box-shadow: var(--interactive-selected-shadow);
  outline: none;
}

.scrutexBarRow.isSelected,
.scoreBlock.isActive,
.evidenceAnchor.isActive,
.transcriptRow.isActive,
.matrixStatusCell.isSelected,
.reviewEvidenceFeedbackButton.isSelected,
.violationPickerItem.isSelected,
.reviewDecisionButton.isSelected,
.modelExportCheck:has(input:checked),
.modelCostPlannerStatusOption:has(input:checked) {
  border-color: var(--accent);
  background: var(--interactive-selected-bg);
  box-shadow: var(--interactive-selected-shadow);
}

.kpiCard.isSelected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--interactive-selected-shadow);
}

.kpiCard--clickable:hover {
  border-color: var(--interactive-active-border);
  box-shadow: var(--interactive-hover-shadow);
}

.filterChip.isActive,
.tabs__button.isActive,
.leftNav__domainButton.isActive {
  border-color: var(--accent);
  box-shadow: var(--interactive-control-selected-shadow);
}

.leftNav__item.isActive {
  border-color: var(--accent);
  box-shadow: var(--interactive-hover-shadow), inset 3px 0 0 var(--accent);
}

:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td,
:root[data-theme="dark"] .denseTable tbody tr.isClickable:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td,
:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):focus-within td {
  background: var(--dense-table-selected-surface);
  color: var(--text);
  border-bottom-color: var(--line);
}

:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td:first-child,
:root[data-theme="dark"] .denseTable tbody tr.isClickable:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td:first-child,
:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):focus-within td:first-child {
  box-shadow: var(--interactive-selected-shadow);
}

:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td:not(:first-child),
:root[data-theme="dark"] .denseTable tbody tr.isClickable:not(.isSelected):not(:has(input[type="checkbox"]:checked)):hover td:not(:first-child),
:root[data-theme="dark"] .denseTable tbody tr:not(.isSelected):not(:has(input[type="checkbox"]:checked)):focus-within td:not(:first-child) {
  box-shadow: var(--interactive-selected-shadow);
}

:root[data-theme="dark"] .denseTable tbody tr.isSelected td,
:root[data-theme="dark"] .denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
  color: var(--text);
  border-bottom-color: var(--line);
}

:root[data-theme="dark"] .denseTable tbody tr.isSelected td.isStickyColumn,
:root[data-theme="dark"] .denseTable tbody tr:has(input[type="checkbox"]:checked) td.isStickyColumn {
  background: var(--dense-table-selected-surface);
}

:root[data-theme="dark"] .reviewQueueItem.isActive {
  background:
    linear-gradient(90deg, rgba(209, 209, 214, 0.3), rgba(209, 209, 214, 0.16) 54%, rgba(209, 209, 214, 0.07)),
    #1c1c1e;
  color: #f5f5f7;
}

:root[data-theme="dark"] .reviewQueueItem.isActive .reviewQueueItem__reason,
:root[data-theme="dark"] .reviewQueueItem.isActive .reviewQueueItem__meta span {
  color: #c7c7cc;
}

:root[data-theme="dark"] .reviewQueueItem:not(.isActive):hover,
:root[data-theme="dark"] .reviewQueueItem:not(.isActive):focus-visible,
:root[data-theme="dark"] .managerViolationRow:hover,
:root[data-theme="dark"] .managerViolationRow:focus-visible,
:root[data-theme="dark"] button.scrutexBarRow:not(.isSelected):hover {
  background:
    linear-gradient(90deg, rgba(242, 242, 247, 0.14), rgba(242, 242, 247, 0.07)),
    #242426;
  border-color: rgba(242, 242, 247, 0.58);
  color: #f2f2f7;
  box-shadow: var(--interactive-hover-shadow);
}

:root[data-theme="dark"] .barRow--clickable:hover {
  background:
    var(--panel-strong);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--interactive-hover-shadow);
}

:root[data-theme="dark"] .barRow--clickable:focus-visible,
:root[data-theme="dark"] .kpiCard--clickable:not(.isSelected):hover {
  background:
    var(--accent-soft);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--interactive-selected-shadow);
}

:root[data-theme="dark"] .queueRow.isActive,
:root[data-theme="dark"] .scrutexBarRow.isSelected,
:root[data-theme="dark"] .scoreBlock.isActive,
:root[data-theme="dark"] .evidenceAnchor.isActive,
:root[data-theme="dark"] .transcriptRow.isActive,
:root[data-theme="dark"] .matrixStatusCell.isSelected,
:root[data-theme="dark"] .reviewEvidenceFeedbackButton.isSelected,
:root[data-theme="dark"] .violationPickerItem.isSelected,
:root[data-theme="dark"] .reviewDecisionButton.isSelected,
:root[data-theme="dark"] .modelExportCheck:has(input:checked),
:root[data-theme="dark"] .modelCostPlannerStatusOption:has(input:checked) {
  background: linear-gradient(90deg, rgba(209, 209, 214, 0.22), rgba(209, 209, 214, 0.12));
  color: #f5f5f7;
}

:root[data-theme="dark"] .kpiCard.isSelected {
  background: var(--accent-soft);
  color: var(--text);
}

:root[data-theme="dark"] .filterChip:not(.isActive):hover,
:root[data-theme="dark"] .secondaryButton:hover,
:root[data-theme="dark"] .ghostButton:hover,
:root[data-theme="dark"] .tableAction:not(.tableAction--primary):hover,
:root[data-theme="dark"] .tabs__button:not(.isActive):hover,
:root[data-theme="dark"] .multiSelectFilter__summary:hover,
:root[data-theme="dark"] .sourceChip:not(.sourceChip--accent):hover,
:root[data-theme="dark"] .leftNav__item:not(.isActive):hover,
:root[data-theme="dark"] .leftNav__domainButton:not(.isActive):hover,
:root[data-theme="dark"] .themeToggle:hover {
  background:
    linear-gradient(180deg, rgba(242, 242, 247, 0.13), rgba(242, 242, 247, 0.06)),
    #242426;
  border-color: rgba(242, 242, 247, 0.48);
  color: #f2f2f7;
  box-shadow: var(--interactive-hover-shadow);
}

:root[data-theme="dark"] .scoreBlock:not(.isActive):hover,
:root[data-theme="dark"] .evidenceAnchor:not(.isActive):hover,
:root[data-theme="dark"] .transcriptRow:not(.isActive):hover,
:root[data-theme="dark"] .multiSelectFilter__option:hover,
:root[data-theme="dark"] .tagOption:hover {
  background:
    linear-gradient(90deg, rgba(242, 242, 247, 0.13), rgba(242, 242, 247, 0.06)),
    #242426;
  border-color: rgba(242, 242, 247, 0.5);
  color: #f2f2f7;
}

:root[data-theme="dark"] .workQueueFilters .fieldStack input:hover,
:root[data-theme="dark"] .workQueueFilters .fieldStack select:hover,
:root[data-theme="dark"] .fieldStack input:hover,
:root[data-theme="dark"] .fieldStack select:hover,
:root[data-theme="dark"] .fieldStack textarea:hover,
:root[data-theme="dark"] .searchBox input:hover,
:root[data-theme="dark"] .callsToolbar select:hover,
:root[data-theme="dark"] .dateFilter--toolbar input:hover,
:root[data-theme="dark"] .calibrationToolbar select:hover,
:root[data-theme="dark"] .calibrationActions select:hover,
:root[data-theme="dark"] .managerLinkControl select:hover,
:root[data-theme="dark"] .filterControl:hover {
  background: #2c2c2e;
  border-color: rgba(242, 242, 247, 0.34);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(242, 242, 247, 0.12);
}

:root[data-theme="dark"] .workQueueFilters .fieldStack input:focus,
:root[data-theme="dark"] .workQueueFilters .fieldStack select:focus,
:root[data-theme="dark"] .fieldStack input:focus,
:root[data-theme="dark"] .fieldStack select:focus,
:root[data-theme="dark"] .fieldStack textarea:focus,
:root[data-theme="dark"] .searchBox input:focus,
:root[data-theme="dark"] .callsToolbar select:focus,
:root[data-theme="dark"] .dateFilter--toolbar input:focus,
:root[data-theme="dark"] .calibrationToolbar select:focus,
:root[data-theme="dark"] .calibrationActions select:focus,
:root[data-theme="dark"] .managerLinkControl select:focus,
:root[data-theme="dark"] .filterControl:focus {
  background: #2c2c2e;
  border-color: var(--accent);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

:root[data-theme="dark"] .filterChip.isActive,
:root[data-theme="dark"] .tabs__button.isActive,
:root[data-theme="dark"] .leftNav__domainButton.isActive {
  background: rgba(209, 209, 214, 0.2);
  color: #f5f5f7;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(242, 242, 247, 0.38), inset 0 -3px 0 var(--accent);
}

.onboardingLaunchButton {
  min-width: 88px;
}

.onboardingLayer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.onboardingSpotlight {
  position: fixed;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(6, 9, 13, 0.58), 0 16px 46px rgba(0, 0, 0, 0.28), 0 0 0 5px rgba(209, 209, 214, 0.18);
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

.onboardingCard {
  position: fixed;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 32px);
  padding: 16px;
  overflow: auto;
  pointer-events: none;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(209, 209, 214, 0.12);
}

.onboardingCard button {
  pointer-events: auto;
}

.onboardingCard__header,
.onboardingCard__actions,
.onboardingCard__actions > div {
  display: flex;
  align-items: center;
}

.onboardingCard__header,
.onboardingCard__actions {
  justify-content: space-between;
  gap: 10px;
}

.onboardingCard__actions > div {
  justify-content: flex-end;
  gap: 8px;
}

.onboardingCard__header span,
.onboardingCard__eyebrow {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.onboardingCard__close {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  cursor: pointer;
}

.onboardingCard__close:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel-soft);
}

.onboardingCard__eyebrow,
.onboardingCard h2,
.onboardingCard p {
  margin: 0;
}

.onboardingCard h2 {
  font-size: 18px;
  line-height: 1.22;
}

.onboardingCard p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.onboardingCard .primaryButton,
.onboardingCard .secondaryButton {
  margin-top: 0;
}

@media (max-width: 960px) {
  .directionBriefing {
    grid-template-columns: 1fr;
  }

  .onboardingCard {
    inset-inline: 16px auto;
    width: calc(100vw - 32px) !important;
    max-width: none;
  }

  .scopeOverviewBar {
    flex-direction: column;
  }

  .scopeOverviewBar__metrics {
    flex-basis: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .guidanceStrip {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewDeskMeta {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .reviewDeskMeta dd {
    margin-bottom: 8px;
  }

  .reviewDeskMeta dd:last-child {
    margin-bottom: 0;
  }

  .reviewEvidenceRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .scopeOverviewBar__main > strong {
    white-space: normal;
  }

  .scopeOverviewBar__metrics {
    grid-template-columns: 1fr 1fr;
  }

  .kpiCard {
    min-height: 78px;
  }

  .onboardingCard__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .onboardingCard__actions > div,
  .onboardingCard .primaryButton,
  .onboardingCard .secondaryButton {
    width: 100%;
  }
}

 

 

body {
  background: var(--bg);
}

.leftNav,
.topBar,
.directionBriefing,
.scopeOverviewBar,
.guidanceStrip,
.tablePanel,
.uploadPanel,
.summaryPanel,
.passportPanel,
.insightPanel,
.managerProfileCard,
.placeholderPanel,
.detailMain,
.detailGrid--single,
.operationalPanel,
.calibrationGuide,
.workQueueFilters,
.multiSelectFilter__menu,
.queueRow,
.reviewQueueItem,
.evidenceAnchor,
.transcriptRow,
.scoreBlock,
.tagOption,
.sideDrawer,
.sideDrawer__header,
.sideDrawerConfirm,
.modelOverviewTile,
.modelPeriodControls,
.onboardingCard {
  border-color: var(--glass-line);
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(1.22);
}

.chartCard,
.kpiCard,
.denseTableWrap {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(1.22);
}

.topBar {
  background: var(--glass-surface-soft);
  box-shadow: 0 1px 0 var(--glass-line), inset 0 1px 0 var(--glass-highlight);
}

.leftNav {
  background: var(--glass-surface-strong);
}

.filterControl,
.multiSelectFilter__summary,
.leftNav__role select,
.leftNav__scopeSelect select,
.sourceChip,
.filterChip,
.secondaryButton,
.ghostButton,
.tableAction,
.iconButton,
.tabs__button,
.checkFilter,
.themeToggle,
.reviewDecisionButton,
.reviewEvidenceFeedbackButton,
.modelExportCheck,
.modelCostPlannerStatusOption {
  position: relative;
  overflow: hidden;
  border-color: var(--glass-line);
  background: var(--glass-control);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(14px) saturate(1.18);
}

.leftNav__item,
.leftNav__domainButton {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: transparent;
  background: transparent;
}

.leftNav__item::after,
.leftNav__domainButton::after,
.themeToggle::after,
.sourceChip::after,
.filterChip::after,
.secondaryButton::after,
.ghostButton::after,
.tableAction::after,
.tabs__button::after,
.checkFilter::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-highlight), transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.leftNav__item > *,
.leftNav__domainButton > * {
  position: relative;
  z-index: 1;
}

.leftNav__item:hover,
.leftNav__domainButton:hover,
.themeToggle:hover,
.sourceChip:not(.sourceChip--accent):hover,
.filterChip:not(.isActive):hover,
.secondaryButton:hover,
.ghostButton:hover,
.tableAction:not(.tableAction--primary):hover,
.tabs__button:not(.isActive):hover,
.checkFilter:hover {
  border-color: var(--glass-line-strong);
  background: var(--glass-surface-soft);
  color: var(--text);
  box-shadow: var(--glass-control-shadow);
}

.leftNav__item:hover::after,
.leftNav__domainButton:hover::after,
.themeToggle:hover::after,
.sourceChip:hover::after,
.filterChip:hover::after,
.secondaryButton:hover::after,
.ghostButton:hover::after,
.tableAction:hover::after,
.tabs__button:hover::after,
.checkFilter:hover::after,
.leftNav__item.isActive::after,
.leftNav__domainButton.isActive::after,
.tabs__button.isActive::after,
.filterChip.isActive::after {
  opacity: 1;
}

.leftNav__item.isActive,
.leftNav__domainButton.isActive,
.sourceChip--accent,
.filterChip--accent,
.filterChip.isActive,
.tableAction--primary,
.tabs__button.isActive,
.checkFilter:has(input:checked),
.queueRow.isActive,
.scrutexBarRow.isSelected,
.scoreBlock.isActive,
.evidenceAnchor.isActive,
.transcriptRow.isActive,
.matrixStatusCell.isSelected,
.reviewEvidenceFeedbackButton.isSelected,
.violationPickerItem.isSelected,
.reviewDecisionButton.isSelected,
.modelExportCheck:has(input:checked),
.modelCostPlannerStatusOption:has(input:checked) {
  border-color: var(--glass-line-strong);
  background:
    linear-gradient(135deg, var(--glass-active-strong), transparent 66%),
    var(--glass-active);
  color: var(--glass-active-text);
  box-shadow: var(--glass-active-shadow);
}

.kpiCard.isSelected {
  border-color: var(--line);
  background:
    var(--accent-soft);
  color: var(--glass-active-text);
  box-shadow: var(--interactive-selected-shadow);
}

.leftNav__item.isActive {
  transform: translateX(1px);
}

.leftNav__item.isActive::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 5px;
  width: 3px;
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 16px rgba(209, 209, 214, 0.52);
}

.leftNav__dot,
.themeToggle__icon,
.userPlate__avatar,
.systemStatus__dot,
.sourceChip::before {
  border: 1px solid var(--glass-icon-line);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 32%),
    var(--glass-icon);
  box-shadow: 0 7px 18px rgba(209, 209, 214, 0.18), inset 0 1px 0 var(--glass-highlight);
}

.statusBadge::before {
  border: 1px solid var(--glass-icon-line);
  background:
    currentColor;
  box-shadow: none;
}

.themeToggle__icon {
  position: relative;
  color: transparent;
  font-size: 0;
}

.themeToggle__icon::before,
.themeToggle__icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.themeToggle__icon::before {
  inset: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(209, 209, 214, 0.36);
}

.themeToggle__icon::after {
  inset: 4px 3px 4px 8px;
  border-radius: 50%;
  background: var(--glass-surface-strong);
  opacity: 0;
}

:root[data-theme="dark"] .themeToggle__icon::before {
  background: var(--accent-strong);
}

:root[data-theme="dark"] .themeToggle__icon::after {
  opacity: 1;
}

:root[data-theme="light"] .themeToggle__icon::before {
  box-shadow:
    0 0 0 3px rgba(110, 110, 115, 0.1),
    0 0 14px rgba(110, 110, 115, 0.22);
}

.leftNav__item.isActive .leftNav__dot,
.leftNav__domainButton.isActive::before,
.tabs__button.isActive::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.95), transparent 32%),
    var(--accent);
  box-shadow: 0 0 0 4px rgba(209, 209, 214, 0.12), 0 0 20px rgba(209, 209, 214, 0.42);
}

.primaryButton {
  border-color: rgba(242, 242, 247, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, #e5e5ea, var(--accent));
  color: #1c1c1e;
  box-shadow: 0 14px 28px rgba(209, 209, 214, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.primaryButton:hover {
  border-color: rgba(242, 242, 247, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, #f2f2f7, #d1d1d6);
  box-shadow: 0 18px 34px rgba(209, 209, 214, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

:root[data-theme="light"] .primaryButton {
  border-color: rgba(110, 110, 115, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 44%),
    linear-gradient(180deg, #8e8e93, #6e6e73);
  color: #ffffff;
}

.multiSelectFilter__chip,
.speakerChip--manager {
  border-color: var(--glass-line-strong);
  background: var(--glass-active);
  color: var(--glass-active-text);
}

.managerProfileCard,
.modelOverviewTile {
  background:
    linear-gradient(180deg, var(--glass-active) 0, transparent 110px),
    var(--glass-surface);
  box-shadow: var(--glass-shadow);
}

.managerProfileCard__avatar,
.managerProfileCard__callId,
.managerProfileCard__risk,
.managerProfileCard__kpi,
.managerViolationRow {
  border-color: var(--glass-line);
  background: var(--glass-control);
}

.denseTable tbody tr:hover td,
.denseTable tbody tr.isClickable:hover td {
  background: var(--panel-strong);
}

.denseTable tbody tr:focus-within td {
  background: var(--dense-table-selected-surface);
}

.denseTable tbody tr.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
  color: var(--text);
}

:root[data-theme="dark"] .reviewQueueItem.isActive,
:root[data-theme="dark"] .reviewQueueItem:not(.isActive):hover,
:root[data-theme="dark"] .managerViolationRow:hover,
:root[data-theme="dark"] button.scrutexBarRow:not(.isSelected):hover {
  background:
    linear-gradient(135deg, rgba(209, 209, 214, 0.22), transparent 64%),
    var(--glass-surface-soft);
  border-color: var(--glass-line-strong);
  color: var(--text);
  box-shadow: var(--glass-active-shadow);
}

:root[data-theme="dark"] .barRow--clickable:hover {
  background:
    var(--panel-strong);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--interactive-hover-shadow);
}

:root[data-theme="dark"] .kpiCard--clickable:not(.isSelected):hover {
  background:
    var(--accent-soft);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--interactive-selected-shadow);
}

.onboardingSpotlight {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 9999px rgba(10, 12, 16, 0.5), 0 18px 48px rgba(0, 0, 0, 0.26), 0 0 0 5px rgba(209, 209, 214, 0.14);
}

:root[data-theme="light"] .onboardingSpotlight {
  box-shadow: 0 0 0 9999px rgba(242, 242, 247, 0.62), 0 18px 42px rgba(28, 28, 30, 0.16), 0 0 0 5px rgba(110, 110, 115, 0.1);
}

/* Titanium gray design pass: softer iOS-like themes without blue accent drift. */
 

 

 

body,
.appShell {
  background: var(--bg);
  color: var(--text);
}

.tablePanel,
.chartCard,
.kpiCard,
.uploadPanel,
.summaryPanel,
.passportPanel,
.insightPanel,
.managerProfileCard,
.placeholderPanel,
.detailMain,
.detailGrid--single,
.operationalPanel,
.calibrationGuide,
.directionBriefing,
.scopeOverviewBar,
.guidanceStrip,
.workQueueFilters,
.modelOverviewTile,
.modelPeriodControls,
.onboardingCard {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--surface-shadow);
  backdrop-filter: none;
}

.leftNav,
.topBar,
.multiSelectFilter__menu,
.sideDrawer,
.sideDrawer__header,
.sideDrawerConfirm {
  border-color: var(--titanium-line);
  background: var(--titanium-glass);
  box-shadow: var(--titanium-shadow);
  backdrop-filter: blur(22px) saturate(1.12);
}

.leftNav {
  background: var(--titanium-nav);
}

.topBar {
  background: var(--titanium-bar);
  box-shadow: 0 1px 0 var(--titanium-line), inset 0 1px 0 var(--titanium-highlight);
}

.filterControl,
.multiSelectFilter__summary,
.leftNav__role select,
.leftNav__scopeSelect select,
.sourceChip,
.filterChip,
.secondaryButton,
.ghostButton,
.tableAction,
.iconButton,
.tabs__button,
.checkFilter,
.themeToggle,
.reviewDecisionButton,
.reviewEvidenceFeedbackButton,
.modelExportCheck,
.modelCostPlannerStatusOption,
.managerProfileCard__avatar,
.managerProfileCard__callId,
.managerProfileCard__risk,
.managerProfileCard__kpi,
.managerViolationRow {
  border-color: var(--titanium-line);
  background: var(--titanium-control);
  box-shadow: inset 0 1px 0 var(--titanium-highlight);
  backdrop-filter: blur(14px) saturate(1.08);
}

.leftNav__item,
.leftNav__domainButton {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.leftNav__item:hover,
.leftNav__domainButton:hover,
.themeToggle:hover,
.sourceChip:not(.sourceChip--accent):hover,
.filterChip:not(.isActive):hover,
.secondaryButton:hover,
.ghostButton:hover,
.tableAction:not(.tableAction--primary):hover,
.tabs__button:not(.isActive):hover,
.checkFilter:hover,
.multiSelectFilter__summary:hover {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  color: var(--text);
  box-shadow: var(--interactive-hover-shadow);
}

.leftNav__item.isActive,
.leftNav__domainButton.isActive,
.sourceChip--accent,
.filterChip--accent,
.filterChip.isActive,
.tableAction--primary,
.tabs__button.isActive,
.checkFilter:has(input:checked),
.multiSelectFilter__option:has(input:checked),
.tagOption:has(input:checked),
.queueRow.isActive,
.scrutexBarRow.isSelected,
.scoreBlock.isActive,
.evidenceAnchor.isActive,
.transcriptRow.isActive,
.matrixStatusCell.isSelected,
.reviewEvidenceFeedbackButton.isSelected,
.violationPickerItem.isSelected,
.reviewDecisionButton.isSelected,
.modelExportCheck:has(input:checked),
.modelCostPlannerStatusOption:has(input:checked) {
  border-color: var(--interactive-active-border);
  background:
    linear-gradient(180deg, var(--titanium-active-strong), var(--titanium-active)),
    var(--panel-soft);
  color: var(--text);
  box-shadow: var(--interactive-selected-shadow);
}

.kpiCard.isSelected {
  border-color: var(--interactive-active-border);
  background:
    var(--accent-soft);
  color: var(--text);
  box-shadow: var(--interactive-selected-shadow);
}

.leftNav__domainButton.isActive,
.filterChip.isActive,
.tabs__button.isActive {
  box-shadow: var(--interactive-control-selected-shadow);
}

.leftNav__item.isActive::before {
  inset: 9px auto 9px 5px;
  width: 3px;
  background: var(--accent-strong);
  box-shadow: 0 0 10px rgba(242, 242, 247, 0.22);
}

:root[data-theme="light"] .leftNav__item.isActive::before {
  box-shadow: 0 0 8px rgba(44, 44, 46, 0.16);
}

.brandMark,
.leftNav__dot,
.themeToggle__icon,
.userPlate__avatar,
.sourceChip::before {
  border-color: var(--titanium-icon-line);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.86), transparent 34%),
    var(--titanium-icon);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1), inset 0 1px 0 var(--titanium-highlight);
}

:root[data-theme="light"] .brandMark,
:root[data-theme="light"] .leftNav__dot,
:root[data-theme="light"] .themeToggle__icon,
:root[data-theme="light"] .userPlate__avatar,
:root[data-theme="light"] .sourceChip::before {
  box-shadow: 0 6px 14px rgba(28, 28, 30, 0.07), inset 0 1px 0 var(--titanium-highlight);
}

.brandMark {
  border: 1px solid var(--titanium-icon-line);
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 48%),
    var(--titanium-control);
  padding: 2px;
  object-fit: contain;
  backdrop-filter: blur(14px) saturate(1.05);
  filter: saturate(0.72) contrast(1.04);
  transform-origin: 50% 50%;
  animation: titaniumMarkIntro 720ms cubic-bezier(0.2, 0.9, 0.22, 1) 1;
}

:root[data-theme="light"] .brandMark {
  filter: saturate(0.62) contrast(1.02);
}

@keyframes titaniumMarkIntro {
  0% {
    opacity: 0.72;
    transform: translateY(4px) scale(0.92) rotate(-3deg);
  }

  58% {
    opacity: 1;
    transform: translateY(-1px) scale(1.04) rotate(1deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brandMark {
    animation: none;
  }
}

.brandMarkButton {
  position: relative;
  isolation: isolate;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: -2px 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: visible;
}

.brandMarkButton::before,
.brandMarkButton::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.brandMarkButton::before {
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(255, 179, 95, 0.24);
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 34%),
    linear-gradient(135deg, rgba(242, 140, 40, 0.18), rgba(241, 238, 233, 0.08) 52%, transparent 78%);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms ease, transform 220ms ease;
}

.brandMarkButton::after {
  inset: 4px;
  z-index: 2;
  border-radius: 10px;
  background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.38) 48%, transparent 60%);
  opacity: 0;
  transform: translateX(-90%);
  transition: opacity 160ms ease, transform 680ms ease;
}

.brandMarkButton:focus-visible {
  box-shadow: var(--focus-ring);
}

.brandMarkButton:hover::before,
.brandMarkButton:focus-visible::before,
.brandMarkButton.isActive::before {
  opacity: 1;
  transform: scale(1);
}

.brandMarkButton:hover::after,
.brandMarkButton:focus-visible::after {
  opacity: 1;
  transform: translateX(90%);
}

.brandMarkButton:hover .brandMark,
.brandMarkButton:focus-visible .brandMark {
  animation: brandMarkHomeSpin 820ms cubic-bezier(0.2, 0.9, 0.22, 1) 1 both;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 179, 95, 0.36), 0 0 22px rgba(242, 140, 40, 0.16), inset 0 1px 0 var(--titanium-highlight);
  filter: saturate(0.95) contrast(1.08);
}

.brandMarkButton.isActive .brandMark {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(242, 242, 247, 0.18), inset 0 1px 0 var(--titanium-highlight);
}

@keyframes brandMarkHomeSpin {
  0% {
    transform: translateY(0) scale(1) rotate(0);
  }

  42% {
    transform: translateY(-1px) scale(1.08) rotate(-9deg);
  }

  68% {
    transform: translateY(0) scale(1.05) rotate(5deg);
  }

  100% {
    transform: translateY(0) scale(1.03) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brandMarkButton:hover .brandMark,
  .brandMarkButton:focus-visible .brandMark {
    animation: none;
    transform: scale(1.03);
  }

  .brandMarkButton::after {
    transition: none;
  }
}

.systemStatus__dot {
  border: 1px solid var(--titanium-icon-line);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 0 var(--titanium-highlight);
}

.statusBadge::before {
  border: 1px solid var(--titanium-icon-line);
  box-shadow: none;
}

.systemStatus--warning .systemStatus__dot {
  box-shadow: 0 0 0 3px var(--warning-bg), inset 0 1px 0 var(--titanium-highlight);
}

.systemStatus--danger .systemStatus__dot {
  box-shadow: 0 0 0 3px var(--danger-bg), inset 0 1px 0 var(--titanium-highlight);
}

.leftNav__item.isActive .leftNav__dot,
.leftNav__domainButton.isActive::before,
.tabs__button.isActive::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.94), transparent 34%),
    var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px rgba(242, 242, 247, 0.18);
}

.iconButton svg,
.primaryButton svg,
.secondaryButton svg,
.ghostButton svg,
.tableAction svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}

.iconButton {
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 46%),
    var(--titanium-control);
  color: var(--accent-strong);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--titanium-highlight);
}

.iconButton:hover {
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 46%),
    var(--interactive-hover-bg);
  box-shadow: var(--titanium-pop-shadow);
}

:root[data-theme="light"] .iconButton svg,
:root[data-theme="light"] .primaryButton svg,
:root[data-theme="light"] .secondaryButton svg,
:root[data-theme="light"] .ghostButton svg,
:root[data-theme="light"] .tableAction svg {
  filter: drop-shadow(0 1px 1px rgba(28, 28, 30, 0.12));
}

.primaryButton {
  border-color: rgba(242, 242, 247, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, #f2f2f7, #d1d1d6);
  color: #1c1c1e;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.primaryButton:hover {
  border-color: rgba(242, 242, 247, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(180deg, #ffffff, #dcdce1);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

:root[data-theme="light"] .primaryButton {
  border-color: rgba(44, 44, 46, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 46%),
    linear-gradient(180deg, #6e6e73, #3a3a3c);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(28, 28, 30, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

:root[data-theme="light"] .primaryButton:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%),
    linear-gradient(180deg, #77777d, #2c2c2e);
  box-shadow: 0 14px 28px rgba(28, 28, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* Shared button hierarchy: one clear CTA, calm panel actions, compact row actions. */
 

 

.primaryButton,
.secondaryButton,
.ghostButton,
.tableAction,
.filterChip,
.tabs__button,
.paginationBar__button,
.multiSelectFilter__clear {
  border-radius: 8px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 120ms ease;
}

.primaryButton {
  min-height: 38px;
  padding: 0 14px;
  border-color: var(--button-primary-border);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: 800;
  box-shadow: var(--button-primary-shadow);
}

.primaryButton:hover {
  border-color: var(--button-primary-border);
  background: var(--button-primary-hover-bg);
  color: var(--button-primary-text);
  box-shadow: var(--button-primary-shadow);
  transform: translateY(-1px);
}

.primaryButton--inline {
  min-height: 34px;
  min-width: 132px;
  padding: 0 14px;
}

.secondaryButton,
.ghostButton,
.filterChip,
.multiSelectFilter__clear {
  min-height: 34px;
  border-color: var(--titanium-line);
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  font-weight: 720;
  box-shadow: inset 0 1px 0 var(--titanium-highlight);
}

.secondaryButton:hover,
.ghostButton:hover,
.filterChip:not(.isActive):hover,
.multiSelectFilter__clear:hover {
  border-color: var(--interactive-active-border);
  background: var(--button-secondary-hover-bg);
  color: var(--text);
  box-shadow: var(--interactive-hover-shadow);
}

.tableAction {
  min-height: 28px;
  padding: 0 9px;
  border-color: var(--line);
  background: var(--button-row-bg);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 760;
  box-shadow: none;
}

.tableAction::after {
  display: none;
}

.tableAction:hover {
  border-color: var(--interactive-active-border);
  background: var(--button-row-hover-bg);
  color: var(--text);
  box-shadow: none;
}

.tableAction--primary {
  border-color: var(--button-row-primary-line);
  background: var(--button-row-primary-bg);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--button-row-primary-line);
}

.tableAction--primary:hover {
  border-color: var(--button-row-primary-line);
  background: var(--button-row-hover-bg);
  box-shadow: inset 0 -2px 0 var(--button-row-primary-line);
}

.filterChip.isActive,
.filterChip--accent,
.tabs__button.isActive,
.checkFilter:has(input:checked) {
  border-color: var(--interactive-active-border);
  background: var(--button-active-bg);
  color: var(--text);
  box-shadow: var(--button-active-shadow);
}

.primaryButton:focus-visible,
.secondaryButton:focus-visible,
.ghostButton:focus-visible,
.tableAction:focus-visible,
.filterChip:focus-visible,
.tabs__button:focus-visible,
.iconButton:focus-visible,
.paginationBar__button:focus-visible,
.multiSelectFilter__summary:focus-visible,
.multiSelectFilter__clear:focus-visible {
  outline: none;
  border-color: var(--interactive-active-border);
  box-shadow: var(--button-focus-ring);
}

button:disabled,
.primaryButton:disabled,
.secondaryButton:disabled,
.ghostButton:disabled,
.tableAction:disabled,
.filterChip:disabled,
.paginationBar__button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

button:disabled:hover,
.primaryButton:disabled:hover,
.secondaryButton:disabled:hover,
.ghostButton:disabled:hover,
.tableAction:disabled:hover,
.filterChip:disabled:hover,
.paginationBar__button:disabled:hover {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
  transform: none;
  box-shadow: none;
}

.secondaryButton.reviewCallAction {
  min-width: 132px;
  border-color: var(--review-call-action-border, var(--interactive-active-border));
  background: var(--review-call-action-bg, var(--button-secondary-bg));
  color: var(--review-call-action-text, var(--text));
  box-shadow:
    inset 0 -2px 0 var(--review-call-action-line, transparent),
    inset 0 1px 0 var(--titanium-highlight);
}

.secondaryButton.reviewCallAction:hover {
  border-color: var(--review-call-action-hover-border, var(--review-call-action-border, var(--interactive-active-border)));
  background: var(--review-call-action-hover-bg, var(--review-call-action-bg, var(--button-secondary-hover-bg)));
  color: var(--review-call-action-text, var(--text));
  box-shadow:
    0 8px 18px var(--review-call-action-shadow, rgba(0, 0, 0, 0.12)),
    inset 0 -2px 0 var(--review-call-action-line, transparent),
    inset 0 1px 0 var(--titanium-highlight);
}

.secondaryButton.reviewCallAction:disabled,
.secondaryButton.reviewCallAction:disabled:hover {
  border-color: var(--review-call-action-border, var(--line));
  background: var(--review-call-action-bg, var(--panel));
  color: var(--review-call-action-text, var(--muted));
  box-shadow: inset 0 -2px 0 var(--review-call-action-line, transparent);
}

.secondaryButton.reviewCallAction.reviewCallAction--rerun {
  --review-call-action-border: var(--warning);
  --review-call-action-bg: var(--warning-bg);
  --review-call-action-hover-bg: var(--warning-bg);
  --review-call-action-line: var(--warning);
  --review-call-action-text: var(--warning);
  --review-call-action-shadow: rgba(0, 0, 0, 0.12);
  border-color: var(--warning);
  background: var(--warning-bg);
  color: var(--warning);
  box-shadow:
    inset 0 -2px 0 var(--warning),
    inset 0 1px 0 var(--titanium-highlight);
}

.secondaryButton.reviewCallAction.reviewCallAction--qa {
  --review-call-action-border: var(--accent-strong);
  --review-call-action-bg: var(--interactive-selected-bg);
  --review-call-action-hover-bg: var(--interactive-selected-bg);
  --review-call-action-line: var(--accent-strong);
  --review-call-action-text: var(--text);
  --review-call-action-shadow: rgba(0, 0, 0, 0.12);
  border-color: var(--accent-strong);
  background: var(--interactive-selected-bg);
  color: var(--text);
  box-shadow:
    inset 0 -2px 0 var(--accent-strong),
    inset 0 1px 0 var(--titanium-highlight);
}

.secondaryButton.reviewCallAction.reviewCallAction--calibration {
  --review-call-action-border: var(--success);
  --review-call-action-bg: var(--success-bg);
  --review-call-action-hover-bg: var(--success-bg);
  --review-call-action-line: var(--success);
  --review-call-action-text: var(--success);
  --review-call-action-shadow: rgba(0, 0, 0, 0.12);
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
  box-shadow:
    inset 0 -2px 0 var(--success),
    inset 0 1px 0 var(--titanium-highlight);
}

.denseTableWrap {
  --dense-table-surface: var(--panel);
  --dense-table-header-surface: var(--panel-strong);
  --dense-table-surface-clear: var(--panel);
  --dense-table-edge-shadow: var(--panel);
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--surface-shadow);
  backdrop-filter: none;
}

:root[data-theme="light"] .denseTableWrap {
  --dense-table-surface-clear: var(--panel);
  --dense-table-edge-shadow: var(--panel);
}

.denseTable th {
  background: var(--panel-strong);
  color: var(--muted);
  border-color: var(--line);
}

.denseTable td {
  color: var(--text);
  border-color: var(--line-soft);
}

.denseTable tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel) 94%, var(--line));
}

.multiSelectFilter__option:hover,
.tagOption:hover,
.scoreBlock:not(.isActive):hover,
.evidenceAnchor:not(.isActive):hover,
.transcriptRow:not(.isActive):hover {
  background: var(--interactive-hover-bg);
  border-color: var(--interactive-active-border);
  color: var(--text);
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td {
  background: var(--panel-strong);
  border-color: var(--interactive-active-border);
  color: var(--text);
}

.denseTable tr:focus-within td {
  background: var(--dense-table-selected-surface);
  border-color: var(--interactive-active-border);
  color: var(--text);
}

.denseTable tbody tr.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--dense-table-selected-surface);
  color: var(--text);
  border-bottom-color: var(--interactive-selected-line);
}

.reviewQueueItem,
.queueRow,
.evidenceAnchor,
.transcriptRow,
.scoreBlock,
.tagOption {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: none;
  backdrop-filter: none;
}

.reviewQueueItem:hover,
.reviewQueueItem:focus-visible,
.queueRow:hover {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  box-shadow: var(--interactive-hover-shadow);
}

.reviewQueueItem.isActive {
  border-color: var(--interactive-active-border);
  background:
    linear-gradient(90deg, var(--interactive-selected-wash), transparent 150px),
    var(--panel);
  color: var(--text);
  box-shadow: var(--interactive-selected-shadow);
}

.managerViolationRow:hover,
button.scrutexBarRow:not(.isSelected):hover {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  box-shadow: var(--interactive-hover-shadow);
}

.kpiCard--clickable:hover,
.barRow--clickable:hover {
  border-color: var(--interactive-active-border);
  background: var(--panel-strong);
  box-shadow: var(--interactive-hover-shadow);
}

.managerProfileCard,
.modelOverviewTile {
  background:
    linear-gradient(180deg, var(--interactive-hover-bg) 0, transparent 110px),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.themeToggle__icon::before {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(242, 242, 247, 0.18);
}

.themeToggle__icon::after {
  background: var(--titanium-glass-strong);
}

:root[data-theme="light"] .themeToggle__icon::before {
  box-shadow: 0 0 0 3px rgba(60, 60, 67, 0.08), 0 0 10px rgba(60, 60, 67, 0.12);
}

.onboardingSpotlight {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 9999px rgba(10, 12, 16, 0.48), 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 0 5px var(--accent-soft);
}

:root[data-theme="light"] .onboardingSpotlight {
  box-shadow: 0 0 0 9999px rgba(245, 245, 247, 0.64), 0 16px 36px rgba(28, 28, 30, 0.12), 0 0 0 5px var(--accent-soft);
}

.systemStatus,
.userPlate {
  min-height: 48px;
  padding: 8px 10px;
  border-color: var(--titanium-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 62%),
    var(--titanium-control);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(14px) saturate(1.08);
}

.userPlate {
  grid-template-columns: 32px minmax(0, 1fr);
}

.systemStatus strong,
.userPlate strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.18;
}

.systemStatus span,
.userPlate span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.22;
}

.userPlate__avatar {
  width: 32px;
  height: 32px;
  border: 1px solid var(--titanium-icon-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), transparent 34%),
    linear-gradient(180deg, var(--titanium-active-strong), var(--titanium-active)),
    var(--titanium-control);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 860;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--titanium-highlight);
}

:root[data-theme="light"] .userPlate__avatar {
  color: #4a4a4f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 7px 16px rgba(28, 28, 30, 0.08), inset 0 1px 0 var(--titanium-highlight);
}

.reviewViolationRow {
  position: relative;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-top-color: var(--line-soft);
  border-radius: 8px;
  background: transparent;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.reviewViolationRow:first-child {
  border-top-color: transparent;
}

.reviewViolationRow strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
}

.reviewViolationRow span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.28;
}

.reviewViolationRow--critical,
.reviewViolationRow--high {
  border-color: rgba(255, 69, 58, 0.28);
  background:
    linear-gradient(90deg, var(--danger-bg), transparent 78%),
    var(--panel);
  box-shadow: inset 3px 0 0 var(--danger), 0 7px 18px rgba(255, 69, 58, 0.08);
}

.reviewViolationRow--critical strong,
.reviewViolationRow--high strong {
  color: var(--text);
}

.reviewViolationRow--critical .statusBadge,
.reviewViolationRow--high .statusBadge {
  color: var(--danger);
  border-color: var(--line);
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: none;
}

.reviewViolationRow--critical .statusBadge::before,
.reviewViolationRow--high .statusBadge::before {
  background: currentColor;
  border-color: var(--line);
}

:root[data-theme="light"] .reviewViolationRow--critical,
:root[data-theme="light"] .reviewViolationRow--high {
  border-color: rgba(215, 0, 21, 0.24);
  box-shadow: inset 3px 0 0 var(--danger), 0 7px 16px rgba(215, 0, 21, 0.06);
}

/* Sidebar identity/status polish. */
 

 

.leftNav__role {
  gap: 7px;
  padding: 10px 14px 12px;
  border-bottom-color: var(--line-soft);
}

.leftNav__role select,
.leftNav__scopeSelect select {
  min-height: 36px;
  border-color: var(--titanium-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 56%),
    var(--titanium-control);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--titanium-highlight);
}

.leftNav__role select:hover,
.leftNav__scopeSelect select:hover,
.leftNav__role select:focus,
.leftNav__scopeSelect select:focus {
  border-color: var(--interactive-active-border);
  background:
    linear-gradient(180deg, var(--titanium-highlight), transparent 56%),
    var(--interactive-hover-bg);
}

.systemStatus,
.userPlate {
  overflow: hidden;
  border-radius: 12px;
}

.systemStatus {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  min-height: 50px;
  padding: 8px 10px;
}

.systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) {
  border-color: var(--online-line);
  background:
    radial-gradient(circle at 22px 18px, rgba(255, 255, 255, 0.78), transparent 22px),
    linear-gradient(135deg, var(--online-bg), transparent 72%),
    var(--titanium-control);
  box-shadow: 0 8px 18px rgba(50, 214, 116, 0.08), inset 0 1px 0 var(--titanium-highlight);
}

.systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) strong {
  color: var(--online-text);
}

.systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) .systemStatus__dot {
  background: var(--online);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 5px var(--online-bg), 0 0 18px rgba(99, 224, 139, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

:root[data-theme="light"] .systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) .systemStatus__dot {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 5px var(--online-bg), 0 5px 13px rgba(36, 138, 61, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.systemStatus__dot {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.systemStatus > div,
.userPlate > div {
  min-width: 0;
}

.systemStatus strong,
.userPlate strong {
  max-width: 100%;
  letter-spacing: 0;
}

.systemStatus span,
.userPlate span {
  max-width: 100%;
}

.userPlate {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 52px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 22px 18px, rgba(255, 255, 255, 0.72), transparent 24px),
    linear-gradient(135deg, var(--titanium-active), transparent 76%),
    var(--titanium-control);
}

.userPlate__avatar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  text-align: center;
  text-indent: 0;
  font-size: 10px;
  font-weight: 860;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

 

:root[data-theme="dark"] .systemStatus,
:root[data-theme="dark"] .userPlate {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 62%),
    rgba(28, 28, 30, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

:root[data-theme="dark"] .systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) {
  background:
    linear-gradient(135deg, var(--online-bg), transparent 74%),
    rgba(28, 28, 30, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

:root[data-theme="dark"] .systemStatus:not(.systemStatus--warning):not(.systemStatus--danger) .systemStatus__dot {
  box-shadow: 0 0 0 4px rgba(102, 216, 137, 0.08), 0 0 8px rgba(102, 216, 137, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

:root[data-theme="dark"] .userPlate {
  background:
    linear-gradient(135deg, rgba(242, 242, 247, 0.055), transparent 74%),
    rgba(28, 28, 30, 0.58);
}

:root[data-theme="dark"] .userPlate__avatar {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.42), transparent 32%),
    linear-gradient(180deg, rgba(242, 242, 247, 0.16), rgba(142, 142, 147, 0.12)),
    rgba(28, 28, 30, 0.5);
  color: rgba(245, 245, 247, 0.72);
  text-shadow: none;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.violationCodeBadge {
  display: inline-grid;
  place-items: center;
  gap: 0;
  flex: 0 0 auto;
  width: 58px;
  min-width: 58px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    var(--panel-strong);
  color: var(--muted);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-legacy-10-5);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  box-shadow: none;
}

.violationCodeBadge__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.violationCodeBadge--sm {
  width: 58px;
  min-width: 58px;
  height: 28px;
  min-height: 28px;
}

.violationCodeBadge--md {
  width: 64px;
  min-width: 64px;
  height: 30px;
  min-height: 30px;
  font-size: var(--text-xs);
}

.violationCodeBadge--long {
  width: auto;
  min-width: 58px;
  max-width: 164px;
  height: auto;
  min-height: 28px;
  padding: 5px 7px;
  line-height: 1.15;
  white-space: normal;
}

.violationCodeBadge--long .violationCodeBadge__label {
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.violationCodeBadge--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--danger);
  box-shadow: none;
}

.violationCodeBadge--warning {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--warning);
}

.violationCodeBadge--success {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--success);
}

.violationCodeBadge--muted,
.violationCodeBadge--neutral {
  color: var(--muted);
}

:root[data-theme="light"] .violationCodeBadge {
  border-color: var(--line);
  background:
    var(--panel-strong);
  color: var(--text);
  box-shadow: none;
}

:root[data-theme="light"] .violationCodeBadge--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--danger);
  box-shadow: none;
}

:root[data-theme="light"] .violationCodeBadge--warning {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--warning);
}

:root[data-theme="light"] .violationCodeBadge--success {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background:
    var(--panel-strong);
  color: var(--success);
}

/* UX simplification: local grouping and table filtering. */
.leftNav__menuCluster {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--line-soft);
}

.leftNav__menuCluster:last-child {
  border-bottom: 0;
}

.leftNav__menuClusterTitle {
  min-width: 0;
  padding: 2px 12px 3px;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.dashboardSectionGroup {
  display: grid;
  gap: 10px;
  min-width: 0;
  scroll-margin-top: var(--sticky-scroll-offset);
}

.callsScreen > .callsWorkspace {
  order: -3;
}

.callsScreen > .tablePanel {
  order: -2;
}

.callsScreen > .callsUtilityDrawer {
  order: 6;
}

.callsUtilityDrawer,
.callsInsightDrawer {
  min-width: 0;
}

.callsUtilityDrawer > summary,
.callsInsightDrawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.callsUtilityDrawer > summary::-webkit-details-marker,
.callsInsightDrawer > summary::-webkit-details-marker {
  display: none;
}

.callsUtilityDrawer > summary span,
.callsInsightDrawer > summary span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
  line-height: 1.2;
}

.callsUtilityDrawer > summary em,
.callsInsightDrawer > summary em {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: right;
}

.callsUtilityDrawer > summary::after,
.callsInsightDrawer > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.callsUtilityDrawer[open] > summary::after,
.callsInsightDrawer[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.callsUtilityDrawer .statusStrip {
  margin-top: 8px;
}

.callsWorkspace {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.callsWorkspace > .workCompass {
  order: 1;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.callsWorkspace > .callsLogicDrawer {
  order: 5;
}

.callsLogicDrawer[open] .dashboardLogicMap {
  margin-top: 8px;
}

.callsWorkspace > .callsToolbar {
  order: 2;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.callsWorkspace > .callsToolbar > .tableSectionHeader {
  display: none;
}

.callsWorkspace > .tableControls {
  order: 3;
  padding: 0;
  border: 0;
  background: transparent;
}

.callsWorkspace > .bulkActionBar--recurring {
  order: 4;
}

.callsInsightDrawer {
  order: 5;
  display: block;
}

.callsInsightDrawer[open] {
  display: grid;
  gap: 10px;
}

.callsInsightDrawer > .tableSectionHeader {
  margin-top: 8px;
}

.scrutexAnalytics > .workCompass {
  order: -4;
}

.scrutexAnalytics > .analyticsOverviewSection {
  order: -3;
}

.scrutexAnalytics > .analyticsFilterSection {
  order: -2;
}

.scrutexAnalytics > .analyticsIntro {
  order: 5;
}

.scrutexAnalytics > .statusStrip {
  order: 6;
}

.analyticsIntro--drawer {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
}

.analyticsIntro--drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.analyticsIntro--drawer > summary::-webkit-details-marker {
  display: none;
}

.analyticsIntro--drawer > summary span {
  color: var(--text);
  font-size: 12px;
  font-weight: 840;
}

.analyticsIntro--drawer > summary em {
  color: var(--subtle);
  font-size: 11px;
  font-style: normal;
}

.analyticsIntro--drawer > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.analyticsIntro--drawer[open] > summary::after {
  transform: rotate(225deg) translateY(-1px);
}

.analyticsIntro--drawer > p {
  margin-right: 12px;
  margin-left: 12px;
}

.workCompass {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(360px, 0.9fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.workCompass--warning {
  border-color: rgba(255, 214, 10, 0.34);
}

.workCompass--danger {
  border-color: rgba(255, 69, 58, 0.34);
}

.workCompass--success {
  border-color: rgba(50, 214, 116, 0.28);
}

.workCompass__main {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.workCompass__eyebrow {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.1;
  text-transform: uppercase;
}

.workCompass h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.18;
}

.workCompass p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.workCompass__chips,
.workCompass__actions,
.workCompass__metrics {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.workCompass__chips {
  flex-wrap: wrap;
  margin-top: 4px;
}

.workCompass__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 680;
  overflow-wrap: anywhere;
}

.workCompass__actions {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.workCompass__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workCompassMetric {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.workCompassMetric:hover,
.workCompassMetric[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: var(--interactive-hover-bg);
  color: var(--text);
}

.workCompassMetric strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.workCompassMetric span {
  min-width: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.15;
}

.workCompassMetric--success strong {
  color: var(--success);
}

.workCompassMetric--warning strong {
  color: var(--warning);
}

.workCompassMetric--danger strong {
  color: var(--danger);
}

.tableSectionHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.tableSectionHeader h2 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 860;
  line-height: 1.25;
  text-transform: uppercase;
}

.tableSectionHeader p {
  max-width: 980px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.tableSectionHeader__meta {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.callsToolbar--grouped {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  scroll-margin-top: var(--sticky-scroll-offset);
}

.callsToolbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.callsArchiveSelect {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.callsArchiveSelect span,
.callsActionGroupLabel {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.callsActionGroupLabel {
  align-self: center;
}

.callsExportScopeHint {
  align-self: center;
  max-width: 360px;
  min-width: 180px;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.25;
}

.callsTablePanel {
  overflow: hidden;
  padding: 10px;
}

.callsTablePanel .denseTable {
  font-size: var(--text-xs);
}

.callsTablePanel .denseTable__groupRow th,
.callsTablePanel .denseTable th {
  padding-right: 8px;
  padding-left: 8px;
}

.callsTablePanel .denseTable td {
  padding-right: 6px;
  padding-left: 6px;
}

.callsTablePanel .denseTable--compact td {
  padding-right: 6px;
  padding-left: 6px;
}

.callsTablePanel .callsCompactCell {
  gap: 3px;
}

.callsTablePanel .callsBadgeCluster {
  gap: 3px;
}

.callsTablePanel .callsScoreLine,
.callsTablePanel .callsMetaLine {
  gap: 4px;
}

.callsTablePanel .statusBadge--sm {
  padding-right: 5px;
  padding-left: 5px;
}

.callsTablePanel .tableAction,
.callsTablePanel .callsInlineAction {
  min-height: 24px;
  padding-right: 7px;
  padding-left: 7px;
  font-size: 11px;
}

.listeningChecklistScreen {
  gap: 12px;
}

.listeningProgressGrid {
  order: -4;
}

.listeningWorkspace {
  order: -3;
}

.listeningAssigneeBar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
}

.listeningAssigneeSelect {
  flex: 0 1 260px;
  min-width: min(100%, 220px);
}

.listeningAssigneeBar__summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 280px;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.listeningToolbar {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

.listeningStatusFilters {
  padding: 0;
  border: 0;
  background: transparent;
}

.listeningStatusFilters .tableControls__right {
  justify-content: flex-start;
}

.listeningTablePanel {
  overflow: hidden;
  padding: 10px;
}

.listeningChecklistLoadingState,
.listeningChecklistEmptyState {
  min-height: 180px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface-soft);
}

.listeningTablePanel .denseTable {
  font-size: var(--text-xs);
}

.listeningTablePanel .denseTable th,
.listeningTablePanel .denseTable td {
  padding-right: 7px;
  padding-left: 7px;
}

.listeningCallCell,
.listeningMetaCell,
.listeningStatusCell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.listeningRosterCell {
  align-content: start;
}

.listeningRosterCell .statusBadge {
  justify-self: start;
  max-width: 100%;
}

.listeningCallCell strong,
.listeningMetaCell strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.listeningCallCell span,
.listeningMetaCell span,
.listeningStatusCell span {
  min-width: 0;
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.listeningCheckControl {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  cursor: pointer;
}

.listeningCheckControl input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.listeningCheckControl span {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
}

.listeningCheckControl small {
  grid-column: 2;
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 680;
  line-height: 1.1;
}

.denseTableToolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  scroll-margin-top: var(--sticky-scroll-offset);
}

.sideDrawerOverlay {
  z-index: 2100;
}

.analyticsFilterPanel,
.analyticsFilterPanel__apply,
.analyticsFilterPanel input,
.analyticsFilterPanel select,
.callsToolbar .historyPeriodControls button,
.commandFilterPanel .periodSegments button {
  scroll-margin-top: var(--sticky-scroll-offset);
}

.tableSectionHeader__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.analyticsFilterPanel__apply--dirty {
  box-shadow: 0 0 0 3px rgba(240, 189, 95, 0.18);
}

.denseTableToolbar__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.denseTableToolbar__copy strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.25;
}

.scrutexAnalytics .analyticsFocusPanel .denseTableToolbar {
  align-items: stretch;
  flex-direction: column;
}

.scrutexAnalytics .analyticsFocusPanel .denseTableQuickFilter {
  flex-basis: auto;
  width: 100%;
  min-width: 0;
}

.clientComplaintsReport .denseTableToolbar,
.clientComplaintsReport .denseTablePagination {
  position: sticky;
  left: 0;
  z-index: 5;
  width: 100%;
}

.clientComplaintsReport > .statusStrip {
  order: -90;
}

.clientComplaintsReport > .clientComplaintDataStatus {
  order: -80;
}

.clientComplaintsReport > .clientComplaintCommandPanel {
  order: -50;
}

.clientComplaintsReport > .clientComplaintFilterSummary {
  order: -70;
}

.clientComplaintsReport > .tablePanel--priorityQueue {
  order: -60;
}

.clientComplaintsReport > .guidanceStrip {
  order: -40;
}

.clientComplaintsReport > .analyticsFilterPanel {
  order: -30;
}

.clientComplaintsReport > .clientComplaintReadGuide {
  order: -20;
}

.clientComplaintsReport > .clientComplaintAnalyticsGrid {
  order: -10;
}

.dashboardGrid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clientComplaintCommandPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.clientComplaintCommandGrid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.35fr);
  gap: 12px;
  min-width: 0;
}

.clientComplaintRoutePanel,
.clientComplaintSignalPanel,
.clientComplaintReferencePanel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.clientComplaintRoutePanel > strong,
.clientComplaintSignalPanel > strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.clientComplaintRouteList {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.clientComplaintRouteStep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 3px 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel);
}

.clientComplaintRouteStep span,
.clientComplaintSignalCard span,
.clientComplaintUrgentChip span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.2;
  text-transform: uppercase;
}

.clientComplaintRouteStep strong,
.clientComplaintSignalCard strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.clientComplaintRouteStep p,
.clientComplaintSignalCard p,
.clientComplaintUrgentStrip p,
.clientComplaintReferenceIntro,
.clientComplaintReferenceRow p,
.clientComplaintReferenceRow em,
.clientComplaintGuardrailItem span,
.clientComplaintGuardrailItem em {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clientComplaintRouteStep p {
  grid-column: 1 / -1;
}

.clientComplaintSignalGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.clientComplaintSignalCard {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 92px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
}

.clientComplaintSignalCard--success {
  border-left-color: var(--success);
}

.clientComplaintSignalCard--warning {
  border-left-color: var(--warning);
}

.clientComplaintSignalCard--danger {
  border-left-color: var(--danger);
}

.clientComplaintUrgentStrip {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.clientComplaintUrgentStrip > strong {
  color: var(--text);
  font-size: 12px;
}

.clientComplaintUrgentChip {
  display: grid;
  grid-template-columns: minmax(100px, 0.32fr) minmax(0, 1fr) minmax(120px, 0.42fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.clientComplaintUrgentChip:hover,
.clientComplaintUrgentChip:focus-visible {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.clientComplaintUrgentChip--danger {
  border-left-color: var(--danger);
}

.clientComplaintUrgentChip--warning {
  border-left-color: var(--warning);
}

.clientComplaintUrgentChip--success {
  border-left-color: var(--success);
}

.clientComplaintUrgentChip strong,
.clientComplaintUrgentChip em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.clientComplaintUrgentChip strong {
  font-size: 12px;
  line-height: 1.25;
}

.clientComplaintUrgentChip em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.25;
}

.clientComplaintDataStatus,
.clientComplaintFilterSummary,
.clientComplaintLoadNotice,
.clientComplaintReadGuide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.clientComplaintDataStatus--warning,
.clientComplaintLoadNotice {
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 9%, var(--panel));
}

.clientComplaintDataStatus--success {
  border-left: 3px solid var(--success);
}

.clientComplaintDataStatus strong,
.clientComplaintFilterSummary strong,
.clientComplaintLoadNotice strong,
.clientComplaintReadGuide strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.clientComplaintDataStatus span,
.clientComplaintFilterSummary span,
.clientComplaintLoadNotice span,
.clientComplaintReadGuide span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clientComplaintReadGuide span {
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--panel-soft);
}

.clientComplaintAnalyticsGrid .chartCard {
  min-height: 190px;
}

.chartCard__empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 116px;
  padding: 16px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  text-align: center;
}

.chartCard__empty strong {
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.25;
}

.chartCard__empty span {
  max-width: 280px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.clientComplaintReferenceGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 12px;
  min-width: 0;
}

.clientComplaintReferencePanel {
  background: var(--panel);
}

.clientComplaintReferenceList,
.clientComplaintGuardrailList {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.clientComplaintReferenceRow,
.clientComplaintGuardrailItem {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--panel-soft);
}

.clientComplaintReferenceRow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.clientComplaintReferenceRow strong,
.clientComplaintGuardrailItem strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.clientComplaintReferenceRow > span {
  color: var(--subtle);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.clientComplaintReferenceRow em,
.clientComplaintGuardrailItem em {
  color: var(--text);
}

.clientComplaintHandoffChecklist {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel);
}

.clientComplaintHandoffChecklist strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.clientComplaintHandoffChecklist ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.clientComplaintHandoffChecklist li {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .dashboardGrid--three,
  .clientComplaintCommandGrid,
  .clientComplaintReferenceGrid {
    grid-template-columns: 1fr;
  }

  .clientComplaintSignalGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.clientComplaintDetailPanel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.clientComplaintDetailPanel__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.clientComplaintDetailPanel__quote {
  min-width: 0;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.clientComplaintDetailPanel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.clientComplaintDetailField {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.clientComplaintDetailField--wide {
  grid-column: 1 / -1;
}

.clientComplaintDetailField span {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.clientComplaintDetailField strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clientComplaintDetailPanel__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 720px) {
  .clientComplaintSignalGrid,
  .clientComplaintUrgentChip {
    grid-template-columns: 1fr;
  }

  .clientComplaintDetailPanel__grid {
    grid-template-columns: 1fr;
  }
}

.denseTableToolbar__copy span {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.denseTableQuickFilter {
  display: grid;
  gap: 4px;
  flex: 0 1 330px;
  min-width: min(260px, 100%);
}

.denseTableQuickFilter__control {
  position: relative;
  min-width: 0;
}

.denseTableQuickFilter span {
  color: var(--subtle);
  font-size: var(--text-legacy-10);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  text-transform: uppercase;
}

.denseTableQuickFilter input {
  width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--text);
  font-size: var(--text-sm);
}

.denseTableQuickFilter input:hover {
  border-color: var(--line-strong);
  background: var(--panel-strong);
}

.denseTableQuickFilter input:focus {
  border-color: var(--line-strong);
  background: var(--dense-table-selected-surface);
}

.denseTableQuickFilter__clear {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  transform: translateY(-50%);
}

.denseTableQuickFilter__clear:hover {
  border-color: var(--line);
  background: var(--panel-strong);
  color: var(--text);
  transform: translateY(-50%);
}

.denseTableQuickFilter__clear:focus-visible {
  border-color: var(--line);
  background: var(--dense-table-selected-surface);
  color: var(--text);
  transform: translateY(-50%);
}

.denseTableQuickFilter em {
  color: var(--subtle);
  font-size: var(--text-legacy-10);
  font-style: normal;
  line-height: 1.1;
}

.dashboardLogicMap {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: inset 3px 0 0 rgba(91, 141, 239, 0.45);
}

.dashboardLogicMap__header {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dashboardLogicMap__flowLabel {
  color: var(--accent);
  font-size: 10px;
  font-weight: 860;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.dashboardLogicMap__header h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.dashboardLogicMap__header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboardLogicMap__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.dashboardLogicMap__item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border-left: 3px solid var(--line-strong);
  background: var(--panel-soft);
}

.dashboardLogicMap__itemTop {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dashboardLogicMap__step {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 10px;
  font-weight: 860;
  line-height: 1;
}

.dashboardLogicMap__eyebrow {
  min-width: 0;
  color: var(--subtle);
  font-size: 10px;
  font-weight: 840;
  line-height: 1.1;
  text-transform: uppercase;
}

.dashboardLogicMap__item strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.dashboardLogicMap__item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.dashboardLogicMap__item em {
  color: var(--subtle);
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
}

.dashboardLogicMap__item--success {
  border-left-color: var(--success);
}

.dashboardLogicMap__item--warning {
  border-left-color: var(--warning);
}

.dashboardLogicMap__item--danger {
  border-left-color: var(--danger);
}

.dashboardLogicMap--compact .dashboardLogicMap__items {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.denseTable__groupRow th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text);
  font-size: var(--text-legacy-10);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.denseTable__groupRow th.isEmptyGroup {
  color: transparent;
}

.denseTable--hasGroups thead tr:not(.denseTable__groupRow) th {
  top: 30px;
}

.denseTable--hasGroups thead tr:not(.denseTable__groupRow) th.isStickyColumn {
  z-index: 4;
}

@media (max-width: 920px) {
  :root {
    --sticky-scroll-offset: 0px;
  }

  html {
    scroll-padding-top: 0;
  }

  .topBar {
    position: static;
    min-height: 0;
  }

  .topBar > div:first-child {
    flex: 0 1 auto;
  }

  .topBar__filters {
    flex: 0 1 auto;
    width: 100%;
  }

  .workCompass {
    grid-template-columns: 1fr;
  }

  .workCompass__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .workCompass__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metricGroupGrid,
  .kpiGrid--two {
    grid-template-columns: 1fr;
  }

  .metricGroup__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .metricGroup__header span {
    text-align: left;
  }

  .leftNav__menuCluster {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0;
    border-bottom: 0;
  }

  .leftNav__menuClusterTitle {
    flex: 0 0 auto;
    padding: 0 2px;
    white-space: nowrap;
  }

  .tableSectionHeader,
  .denseTableToolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .denseTableQuickFilter {
    flex-basis: auto;
    width: 100%;
  }

  .callsToolbar__grid {
    grid-template-columns: 1fr;
  }

  .singleCallScreen .operationalActions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .singleCallScreen .operationalActions .secondaryButton,
  .singleCallScreen .operationalActions .primaryButton {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .callsTablePanel > .denseTableWrap {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .callsTablePanel .callsMobileList {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    background: var(--panel);
  }

  .callsTablePanel .tableSectionHeader p {
    display: none;
  }

  .callsTablePanel {
    position: relative;
    padding: 10px;
  }

  .callsMobileCard .metaGrid {
    grid-template-columns: minmax(82px, 0.38fr) minmax(0, 1fr);
    gap: 6px 8px;
  }

  .denseTableWrap:has(.denseTable--mobileLabels) {
    overflow-x: visible;
  }

  .denseTable--mobileLabels {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .denseTable--mobileLabels colgroup,
  .denseTable--mobileLabels thead {
    display: none;
  }

  .denseTable--mobileLabels tbody {
    display: grid;
    gap: 8px;
  }

  .denseTable--mobileLabels tr {
    display: grid;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--dense-table-surface);
  }

  .denseTable--mobileLabels td,
  .denseTable--mobileLabels td.isNowrap,
  .denseTable--mobileLabels td.isWrapped {
    display: grid;
    grid-template-columns: minmax(78px, 0.34fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    width: 100%;
    padding: 7px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .denseTable--mobileLabels td:last-child {
    border-bottom: 0;
  }

  .denseTable--mobileLabels td.isStickyColumn,
  .denseTable--mobileLabels td.isStickyRightColumn {
    position: static;
    box-shadow: none;
  }

  .denseTable--mobileLabels td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 0;
    color: var(--subtle);
    font-size: var(--text-legacy-9);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .denseTable--mobileLabels td:not([data-label]) {
    grid-template-columns: 1fr;
  }

  .denseTable--mobileLabels .tableAction,
  .denseTable--mobileLabels .callsInlineAction {
    justify-self: start;
  }

  .denseTable--mobileLabels tr:nth-child(even) td {
    background: color-mix(in srgb, var(--panel) 94%, var(--line));
  }

.denseTable--mobileLabels tbody tr:hover td,
.denseTable--mobileLabels tr.isClickable:hover td {
    background: var(--panel-strong);
  }

.denseTable--mobileLabels tr:focus-within td {
    background: var(--dense-table-selected-surface);
  }
}

@media (max-width: 760px) {
  .appShell {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .leftNav {
    position: static;
    inset: auto;
    z-index: auto;
    width: 100%;
    min-height: 0;
    max-height: none;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: none;
  }

  .leftNav__brand {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
  }

  .brandMark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .brandMarkButton {
    width: 34px;
    height: 34px;
    margin: -2px 0;
    border-radius: 10px;
  }

  .leftNav__brand span {
    font-size: 10px;
  }

  .leftNav__brand strong {
    font-size: 14px;
  }

  .leftNav__role,
  .leftNav__scope,
  .leftNav__footer {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
  }

  .leftNav__scope {
    gap: 6px;
  }

  .leftNav__scopeSummary,
  .leftNav__scopeLists,
  .leftNav__scopeAll,
  .leftNav__scopeWarning {
    font-size: 10px;
  }

  .leftNav__menu {
    gap: 8px;
    overflow: visible;
    padding: 8px 0 0;
  }

  .leftNav__domains,
  .leftNav__menuCluster {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 0 2px 4px;
    border: 0;
    scrollbar-width: thin;
  }

  .leftNav__domainButton,
  .leftNav__item {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .leftNav__item {
    display: inline-grid;
    grid-template-columns: 8px auto;
    gap: 7px;
    max-width: min(280px, 84vw);
    font-size: 12px;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
  }

  .leftNav__item span:last-child {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .leftNav__domainButton {
    font-size: 11px;
  }

  .leftNav__groupTitle,
  .leftNav__menuClusterTitle,
  .leftNav__footerText {
    display: none;
  }

  .leftNav__footer {
    gap: 8px;
  }

  .themeToggle {
    min-height: 34px;
  }

  .mainArea {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    padding: 0 8px 28px;
    overflow-x: clip;
  }

  .topBar {
    display: grid;
    gap: 10px;
    min-height: 0;
    padding: 10px 0;
  }

  .topBar > div:first-child {
    flex-basis: auto;
  }

  .topBar h1 {
    font-size: 20px;
  }

  .topBar__filters {
    flex: none;
    justify-content: flex-start;
    max-width: none;
    width: 100%;
  }

  .topBar__filters .sourceChip,
  .topBar__filters .secondaryButton {
    min-height: 32px;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
  }

  .dashboardTokenChip input {
    width: min(94px, 28vw);
  }

  .directionBriefing,
  .directionBriefing--collapsed {
    margin: 8px 0 10px;
  }

  .screenStack {
    gap: 10px;
  }
}

/* UI consistency pass: keep operational badges and compact controls readable. */
.sourceChip,
.statusBadge,
.filterChip,
.secondaryButton.reviewCallAction {
  min-width: 0;
}

.sourceChip,
.statusBadge {
  overflow: visible;
}

.sourceChip span,
.sourceChip strong,
.statusBadge__text {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.reviewQueueItem__top {
  flex-wrap: nowrap;
  overflow: hidden;
}

.reviewQueueItem__top .statusBadge {
  flex: 1 1 0;
  overflow: hidden;
  white-space: nowrap;
}

.reviewQueueItem__top .statusBadge__text,
.reviewQueueItem__meta span {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewQueueItem__reason > span:last-child,
.reviewQueueItem__workflow > span:last-child {
  -webkit-line-clamp: 1;
}

.topBar__filters .sourceChip {
  flex: 0 1 auto;
  max-width: min(260px, 100%);
  opacity: 0.9;
}

.topBar__filters .sourceChip--accent,
.topBar__filters .sourceChip--source,
.topBar__filters .uploadIndicator {
  opacity: 1;
}

.topBar__filters .dashboardTokenChip {
  flex: 0 1 132px;
}

.reviewDeskScreen > .statusStrip {
  align-items: stretch;
}

.reviewDeskScreen > .statusStrip .statusStrip__item {
  flex: 1 1 136px;
  border-right: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}

.reviewDeskScreen > .statusStrip .statusBadge {
  flex: 0 0 auto;
}

.reviewQueueFilterGroup .filterChip,
.reviewDecisionBar .reviewDecisionButton,
.reviewEvidenceFeedbackButton {
  min-width: 0;
  line-height: 1.18;
  white-space: normal;
}

.denseTable td.isBadgeCell .statusBadge {
  width: auto;
  max-width: 100%;
}

/* Responsive layout pass: compact the mobile shell without hiding QA/KPI safety labels. */
@media (max-width: 920px) {
  .leftNav__domains,
  .leftNav__menuCluster {
    scroll-padding-inline: 12px;
  }

  .leftNav__menuCluster {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .leftNav {
    display: grid;
    grid-template-columns: minmax(132px, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: 7px;
    padding: 7px;
  }

  .leftNav__brand,
  .leftNav__role,
  .leftNav__scope,
  .leftNav__footer {
    margin-top: 0;
  }

  .leftNav__brand,
  .leftNav__role {
    min-height: 66px;
  }

  .leftNav__brand {
    padding: 7px;
  }

  .leftNav__brand span {
    font-size: 9px;
    line-height: 1.1;
  }

  .leftNav__brand strong {
    font-size: 13px;
  }

  .leftNav__role {
    align-content: center;
    gap: 5px;
    padding: 7px;
  }

  .leftNav__role select {
    min-height: 34px;
    padding: 7px 9px;
  }

  .leftNav__scope,
  .leftNav__menu,
  .leftNav__footer {
    grid-column: 1 / -1;
  }

  .leftNav__menu {
    gap: 6px;
    padding-top: 0;
  }

  .leftNav__group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    overflow: visible;
  }

  .leftNav__domains,
  .leftNav__menuCluster {
    gap: 5px;
    padding-bottom: 2px;
  }

  .leftNav__menuCluster {
    flex-wrap: wrap;
    overflow: visible;
  }

  .leftNav__domainButton,
  .leftNav__item {
    min-height: 32px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .leftNav__item {
    flex: 1 1 min(150px, 48%);
    max-width: none;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .leftNav__footer {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .themeToggle {
    min-height: 32px;
  }

  .topBar {
    gap: 8px;
    padding: 8px 0;
  }

  .topBar__filters {
    gap: 6px;
  }

  .topBar__filters .sourceChip,
  .topBar__filters .secondaryButton {
    min-height: 30px;
  }

  .topBar__filters .sourceChip--source {
    flex-basis: min(260px, 100%);
  }

  .statusStrip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    padding: 8px;
  }

  .statusStrip__item {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    align-items: start;
    gap: 6px;
    min-height: 34px;
    padding: 6px 7px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
  }

  .statusStrip__label,
  .statusStrip__value {
    line-height: 1.15;
  }

  .statusStrip .statusBadge {
    justify-self: start;
    max-width: 100%;
  }

  .uploadLogicMap {
    gap: 8px;
    padding: 10px;
  }

  .uploadLogicMap .dashboardLogicMap__items {
    display: none;
  }

  .denseTable--mobileLabels,
  .denseTable--mobileLabels tbody,
  .denseTable--mobileLabels tr {
    width: 100%;
    max-width: 100%;
  }

  .denseTable--mobileLabels colgroup,
  .denseTable--mobileLabels col {
    display: none;
    width: auto !important;
    min-width: 0 !important;
  }

  .denseTable--mobileLabels td,
  .denseTable--mobileLabels td.isWrapped,
  .denseTable--mobileLabels td.isNowrap,
  .denseTable--mobileLabels td.isBadgeCell {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
  }

  .denseTable--mobileLabels td.isBadgeCell .statusBadge {
    width: auto;
    max-width: 100%;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .leftNav {
    grid-template-columns: minmax(118px, 0.82fr) minmax(0, 1.18fr);
  }

  .leftNav__brand,
  .leftNav__role {
    min-height: 62px;
  }

  .brandMark,
  .brandMarkButton {
    width: 28px;
    height: 28px;
  }

  .statusStrip__item {
    grid-template-columns: 1fr;
  }
}

/* Operational compact pass: keep the production dashboard dense enough for daily QA work. */
@media (min-width: 921px) {
  .leftNav {
    width: 212px;
  }

  .mainArea {
    margin-left: 212px;
    padding: 0 16px 28px;
  }

  .leftNav__brand {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 3px 8px;
    padding: 14px 14px 12px;
  }

  .brandMark,
  .brandMarkButton {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .leftNav__brand span {
    font-size: 10px;
    line-height: 1.1;
  }

  .leftNav__brand strong {
    font-size: 15px;
    line-height: 1.12;
  }

  .leftNav__role,
  .leftNav__scope {
    gap: 6px;
    padding: 9px 14px 10px;
  }

  .leftNav__role select,
  .leftNav__scopeSelect select {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .leftNav__scopeSummary,
  .leftNav__scopeLists,
  .leftNav__scopeAll,
  .leftNav__scopeWarning,
  .leftNav__role small {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .leftNav__menu {
    gap: 3px;
    padding: 10px 8px;
  }

  .leftNav__domains {
    gap: 6px;
    padding: 0 2px 9px;
  }

  .leftNav__groupTitle,
  .leftNav__menuClusterTitle {
    padding: 5px 10px 3px;
    font-size: 10px;
  }

  .leftNav__domainButton,
  .leftNav__item {
    min-height: 34px;
    font-size: 11px;
    line-height: 1.15;
  }

  .leftNav__item {
    grid-template-columns: 8px minmax(0, 1fr);
    gap: 8px;
    padding: 0 9px;
  }

  .leftNav__domainButton {
    padding-inline: 8px;
  }

  .leftNav__footer {
    gap: 8px;
    padding: 12px 14px 14px;
    font-size: 11px;
  }

  .systemStatus,
  .userPlate {
    gap: 8px;
    padding: 8px;
  }

  .topBar {
    gap: 12px;
    min-height: 64px;
    padding: 10px 0;
  }

  .topBar h1 {
    font-size: 20px;
    line-height: 1.14;
  }

  .topBar__eyebrow,
  .topBar__filters .sourceChip__label,
  .topBar__filters .sourceChip__detail,
  .topBar__filters .sourceChip span,
  .topBar__filters .sourceChip strong {
    font-size: 10.5px;
  }

  .topBar__filters,
  .filterBar,
  .tableControls,
  .badgeStack,
  .badgeStack--row,
  .callHero__actions {
    gap: 6px;
  }

  .screenStack {
    gap: 12px;
  }

  .summaryStrip,
.callsToolbar,
.tableControls,
.callHero,
.provenanceSummary,
.summaryPanel,
.passportPanel,
.insightPanel,
.placeholderPanel,
.tablePanel {
    border-radius: 7px;
  }

.chartCard,
.kpiCard {
    border-radius: var(--radius-sm);
  }

  .summaryStrip,
  .callsToolbar,
  .tableControls,
  .provenanceSummary,
  .summaryPanel,
  .passportPanel,
  .insightPanel,
  .placeholderPanel,
  .tablePanel,
  .chartCard {
    padding: 10px;
  }

  .kpiGrid,
  .metricGroupGrid,
  .dashboardGrid {
    gap: 10px;
  }

  .kpiCard {
    min-height: 78px;
    padding: 10px;
  }

  .kpiCard__label {
    font-size: var(--text-xs);
    line-height: 1.25;
  }

  .kpiCard__value {
    margin-top: 7px;
    font-size: var(--text-legacy-22);
  }

  .kpiCard__delta {
    margin-top: 5px;
  }

  .primaryButton {
    min-height: 34px;
    padding: 0 12px;
  }

  .secondaryButton,
  .ghostButton,
  .filterChip,
  .multiSelectFilter__clear,
  .sourceChip,
  .themeToggle {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 11px;
  }

  .filterControl,
  .multiSelectFilter__summary,
  .callsToolbar select,
  .fieldStack input,
  .fieldStack select,
  .fieldStack textarea {
    min-height: 32px;
    font-size: 12px;
  }

  .sectionHeader,
  .panelHeader,
  .chartCard__header {
    gap: 8px;
    padding-bottom: 8px;
  }

  .sectionHeader h2,
.panelHeader h2,
.summaryPanel h2 {
    font-size: 14px;
    line-height: 1.2;
  }

.chartCard h3 {
    font-size: var(--text-md);
    line-height: 1.2;
  }

  .denseTable th {
    padding: 8px 9px;
    font-size: var(--text-legacy-10);
  }

  .denseTable td {
    padding: 8px 9px;
    font-size: var(--text-sm);
  }
}

/* Server viewport density pass: keep 100% browser zoom usable on 1280-1440px dashboards. */
@media (min-width: 921px) and (max-width: 1440px) {
  .leftNav {
    width: 196px;
  }

  .mainArea {
    margin-left: 196px;
    padding: 0 12px 24px;
  }

  .leftNav__brand {
    padding: 10px 12px 9px;
  }

  .leftNav__role,
  .leftNav__scope {
    padding: 8px 12px;
  }

  .leftNav__menu {
    padding: 8px 7px;
  }

  .leftNav__footer {
    padding: 10px 12px 12px;
  }

  .topBar {
    align-items: flex-start;
    gap: 10px;
    min-height: 56px;
    padding: 7px 0;
  }

  .topBar > div:first-child {
    flex: 1 1 220px;
  }

  .topBar h1 {
    font-size: 18px;
    line-height: 1.12;
  }

  .topBar__eyebrow {
    font-size: 9.5px;
    line-height: 1.15;
  }

  .topBar__filters {
    flex: 1 1 520px;
    gap: 5px;
    max-width: min(760px, 69vw);
  }

  .topBar__filters .sourceChip,
  .topBar__filters .secondaryButton {
    min-height: 26px;
    padding-inline: 7px;
    font-size: 10px;
    line-height: 1.12;
  }

  .topBar__filters .sourceChip {
    max-width: min(220px, 100%);
  }

  .topBar__filters .sourceChip--source {
    max-width: min(260px, 100%);
  }

  .topBar__filters .dashboardTokenChip {
    flex-basis: 112px;
  }

  .dashboardTokenChip input {
    width: min(74px, 100%);
  }

  .directionBriefing--collapsed {
    margin: 6px 0 8px;
  }

  .directionBriefing--collapsed > summary {
    min-height: 30px;
    padding: 0 10px;
  }

  .directionBriefing--collapsed > .directionBriefing__main,
  .directionBriefing--collapsed > .directionBriefing__points {
    padding: 0 10px 10px;
  }

  .scopeOverviewBar {
    gap: 8px;
    padding: 7px 9px;
  }

  .scopeOverviewBar__main {
    gap: 1px;
  }

  .scopeOverviewBar__main > span {
    font-size: 10px;
  }

  .scopeOverviewBar__main > strong {
    font-size: 12px;
    line-height: 1.25;
  }

  .scopeOverviewBar__metrics {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: 5px;
    flex-basis: 340px;
  }

  .scopeOverviewBar__metric {
    padding: 2px 0 2px 8px;
  }

  .scopeOverviewBar__metric strong {
    font-size: 13px;
    line-height: 1;
  }

  .scopeOverviewBar__metric em {
    font-size: 9.5px;
    line-height: 1.1;
  }

  .screenStack {
    gap: 10px;
    padding-top: 10px;
  }

  .workCompass {
    gap: 9px;
    padding: 9px;
  }

  .workCompass h2 {
    font-size: 16px;
  }

  .workCompass p {
    font-size: 11px;
    line-height: 1.28;
  }

  .workCompassMetric {
    min-height: 50px;
    padding: 7px;
  }

  .workCompassMetric strong {
    font-size: 16px;
  }

  .summaryStrip,
  .callsWorkspace,
  .callsToolbar,
  .tableControls,
  .provenanceSummary,
  .summaryPanel,
  .passportPanel,
  .insightPanel,
  .placeholderPanel,
  .tablePanel,
  .chartCard,
  .scrutexPanel {
    padding: 8px;
  }

  .kpiGrid,
  .metricGroupGrid,
  .dashboardGrid {
    gap: 8px;
  }

  .kpiCard {
    min-height: 70px;
    padding: 8px 9px;
  }

  .kpiCard__label {
    font-size: var(--text-legacy-10-5);
    line-height: 1.18;
  }

  .kpiCard__value {
    margin-top: 5px;
    font-size: var(--text-xl);
  }

  .kpiCard__delta {
    margin-top: 3px;
    font-size: var(--text-legacy-10);
  }

  .chartCard {
    min-height: 190px;
  }

  .sectionHeader,
  .panelHeader,
  .chartCard__header {
    margin-bottom: 8px;
    padding-bottom: 7px;
  }

  .filterControl,
  .multiSelectFilter__summary,
  .callsToolbar select,
  .fieldStack input,
  .fieldStack select,
  .fieldStack textarea {
    min-height: 30px;
    font-size: 11px;
  }

  .secondaryButton,
  .ghostButton,
  .filterChip,
  .tableAction,
  .sourceChip,
  .themeToggle {
    min-height: 28px;
    padding-inline: 8px;
    font-size: 10.5px;
  }

  .primaryButton {
    min-height: 32px;
    margin-top: 8px;
    padding-inline: 10px;
  }

  .denseTableWrap {
    overscroll-behavior-x: contain;
  }

  .denseTable th {
    height: 30px;
    padding: 6px 7px;
    font-size: var(--text-legacy-9-5);
  }

  .denseTable td {
    height: 36px;
    padding: 5px 7px;
    font-size: var(--text-xs);
  }

  .denseTable--compact td {
    height: 32px;
    padding: 4px 6px;
  }
}

/* Compact review queue rail used by dashboard review desks. */
@media (min-width: 1121px) {
  .reviewDeskLayout {
    grid-template-columns:
      minmax(var(--review-queue-min-width), min(var(--review-queue-width), var(--review-queue-max-width)))
      12px
      minmax(0, 1fr);
    column-gap: 0;
    row-gap: 12px;
  }

  .reviewQueuePanel {
    position: sticky;
    top: 16px;
    --review-queue-list-min-height: min(320px, 46dvh);
    grid-template-rows: auto auto auto auto auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .reviewQueuePanel.isControlsCollapsed {
    grid-template-rows: auto auto auto auto minmax(var(--review-queue-list-min-height), 1fr);
  }

  .reviewQueuePanel.tablePanel {
    padding: 8px;
  }

  .reviewQueuePanel .reviewWorkflowPanel {
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .reviewQueuePanel .reviewWorkflowPanel__header span {
    display: none;
  }

  .reviewQueuePanel .reviewWorkflowSteps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .reviewQueuePanel .reviewWorkflowStep {
    gap: 4px;
    min-height: 42px;
    border-left-width: 2px;
    padding: 6px;
  }

  .reviewQueuePanel .reviewWorkflowStep__top {
    grid-template-columns: 16px minmax(0, 1fr) max-content;
    gap: 5px;
  }

  .reviewQueuePanel .reviewWorkflowStep__top strong {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .reviewQueuePanel .reviewWorkflowStep__top span {
    font-size: 10.5px;
    line-height: 1.14;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .reviewQueuePanel .reviewWorkflowStep__top b {
    grid-column: auto;
    justify-self: end;
    font-size: 12px;
  }

  .reviewQueuePanel .reviewWorkflowStep small {
    display: none;
  }

  .reviewQueuePanel .sectionHeader,
  .reviewQueuePanel .panelHeader {
    margin-bottom: 7px;
    padding-bottom: 6px;
  }

  .reviewQueuePanel .sectionHeader h2,
  .reviewQueuePanel .panelHeader h2 {
    font-size: 12px;
  }

  .reviewQueuePanel .reviewQueueControlsToggle {
    min-height: 24px;
    padding-inline: 6px;
    font-size: 10px;
  }

  .reviewPeriodControls {
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .reviewQueuePanel .reviewPeriodControls__segments {
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 4px;
  }

  .reviewQueuePanel .reviewPeriodControls__segments button {
    min-height: 24px;
    padding: 2px 5px;
    font-size: 10px;
    line-height: 1.1;
  }

  .reviewQueuePanel .reviewPeriodControls__segments button:last-child {
    grid-column: 1 / -1;
  }

  .reviewQueuePanel .reviewPeriodControls__dates {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 5px;
  }

  .reviewQueuePanel .reviewPeriodControls__dates .secondaryButton {
    min-height: 28px;
    padding-inline: 10px;
  }

  .reviewQueuePanel .dateFilter {
    gap: 2px;
  }

  .reviewQueuePanel .dateFilter--toolbar span {
    font-size: 10px;
    line-height: 1.15;
  }

  .reviewQueuePanel .dateFilter--toolbar input {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .reviewPeriodControls__summary {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .reviewQueueSearch {
    margin-bottom: 8px;
  }

  .reviewQueueSearch > span,
  .reviewQueueFilterGroup > span {
    font-size: 10px;
    line-height: 1.1;
  }

  .reviewQueueSearch input {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .reviewQueueSearch em {
    font-size: 9.5px;
    line-height: 1.2;
  }

  .reviewQueueFilters {
    gap: 4px;
    padding-bottom: 8px;
  }

  .reviewQueueBulkBar {
    gap: 5px;
    margin-bottom: 8px;
    padding: 6px;
  }

  .reviewQueueBulkBar__selection,
  .reviewQueueBulkBar__action {
    gap: 5px;
  }

  .reviewQueueBulkBar__check,
  .reviewQueueItem__select {
    font-size: 10px;
  }

  .reviewQueueBulkBar__count,
  .reviewQueueBulkBar__hint {
    font-size: 9.5px;
  }

  .reviewQueueBulkBar__rerun {
    min-height: 28px;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.15;
  }

  .reviewQueueFilterGroup {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 4px;
  }

  .reviewQueueFilterGroup .filterChip {
    min-height: 26px;
    padding: 3px 5px;
    font-size: 9.5px;
    line-height: 1.12;
  }

  .reviewQueueList {
    gap: 6px;
    max-height: none;
    padding-right: 1px;
    padding-bottom: 6px;
  }

  .reviewQueueEmptyState {
    margin-top: 2px;
    padding: 10px;
  }

  .reviewQueueEmptyState strong {
    font-size: 11px;
  }

  .reviewQueueEmptyState p {
    font-size: 10.5px;
    line-height: 1.3;
  }

  .reviewQueueItem {
    gap: 4px;
    padding: 6px;
    border-radius: 7px;
  }

  .reviewQueueItem__open {
    gap: 4px;
  }

  .reviewQueueItem__selectRow {
    gap: 5px;
  }

  .reviewQueueItem__top,
  .reviewQueueItem__meta {
    min-width: 0;
  }

  .reviewQueueItem__meta {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .reviewQueueItem__top .statusBadge,
  .reviewQueueItem__meta span {
    max-width: 100%;
  }

  .reviewQueueItem__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reviewQueueItem__meta .reviewQueueItem__leadId {
    flex: 0 0 auto;
    font-weight: 760;
  }

  .reviewQueueItem strong {
    font-size: 12px;
    word-break: break-word;
  }

  .reviewQueueItem__reason,
  .reviewQueueItem__workflow {
    font-size: 11px;
    line-height: 1.22;
  }

  .reviewQueueItem__reason > span:last-child,
  .reviewQueueItem__workflow > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .reviewQueueItem__workflow {
    padding-top: 4px;
  }

  .reviewQueueItem__meta span {
    font-size: 10px;
  }
}

@container review-call-panel (max-width: 760px) {
  .reviewCallHeader {
    flex-direction: column;
  }

  .reviewCallHeader__actions,
  .reviewDecisionBar {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .reviewCallHeader__actions .secondaryButton {
    width: 100%;
  }

  .reviewNextActionPanel {
    grid-template-columns: 1fr;
  }

  .reviewNextActionPanel__facts {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .reviewNextActionPanel__action {
    border-top: 1px solid var(--line-soft);
    border-left: 0;
    padding-top: 10px;
    padding-left: 0;
  }

  .reviewManagerGuide__steps,
  .reviewDeskContent,
  .reviewAudioShell,
  .violationPicker__controls,
  .violationPickerItem {
    grid-template-columns: 1fr;
  }

  .reviewAudioActions {
    justify-content: stretch;
  }

  .reviewAudioActions .secondaryButton,
  .violationPickerItem__button {
    width: 100%;
  }
}

@container review-call-panel (max-width: 560px) {
  .reviewDecisionBar {
    grid-template-columns: 1fr;
  }
}

.calibrationActionGroup--manualReview {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning-bg) 78%, transparent), transparent 88%),
    var(--panel-soft);
  box-shadow:
    inset 4px 0 0 var(--warning),
    0 8px 20px color-mix(in srgb, var(--warning-bg) 48%, transparent);
}

.calibrationActionGroup--manualReview .calibrationActionGroup__header strong {
  font-size: 13px;
}

.calibrationActionGroup--manualReview .calibrationActionGroup__header span {
  color: var(--text);
}

.calibrationActionGroup__body--decision {
  align-items: stretch;
}

.calibrationManualReviewButton {
  flex-basis: 190px;
  min-height: 44px;
  border-color: color-mix(in srgb, var(--warning) 70%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 26%, transparent), transparent 42%),
    var(--warning-bg);
  color: var(--warning);
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--warning) 72%, var(--line)),
    0 10px 22px color-mix(in srgb, var(--warning-bg) 64%, transparent);
}

.calibrationManualReviewButton:hover {
  border-color: var(--warning);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 34%, transparent), transparent 42%),
    color-mix(in srgb, var(--warning-bg) 84%, var(--panel));
  color: var(--warning);
}

.calibrationManualReviewButton:disabled,
.calibrationManualReviewButton:disabled:hover {
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
  box-shadow: none;
}

.calibrationActionGroup__note {
  flex: 1 1 180px;
  align-self: center;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tableAction--manualReview {
  min-height: 32px;
  border-color: color-mix(in srgb, var(--warning) 56%, var(--line));
  background: color-mix(in srgb, var(--warning-bg) 74%, var(--button-row-bg));
  color: var(--warning);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warning) 62%, var(--line));
  line-height: 1.15;
  white-space: normal;
}

.tableAction--manualReview:hover {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning-bg) 88%, var(--button-row-hover-bg));
  color: var(--warning);
  box-shadow: inset 0 -2px 0 var(--warning);
}

.rowActions .tableAction--manualReview {
  min-width: 112px;
  justify-content: center;
}

/* Final single-call work hub palette override: keeps this workflow block readable across global themes. */
.singleCallWorkHub .secondaryButton.singleCallWorkHub__button {
  border-color: #cfd9d3;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 62%),
    #eef3f1;
  color: #252a31;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.singleCallWorkHub .secondaryButton.singleCallWorkHub__button:hover {
  border-color: #aebdb5;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), transparent 62%),
    #e6eeea;
  color: #15191f;
}

.singleCallWorkHub .secondaryButton.singleCallWorkHub__button--danger {
  border-color: rgba(185, 56, 56, 0.32);
  background: rgba(185, 56, 56, 0.08);
  color: #8e2727;
}

.singleCallWorkHub__lane--calibration .secondaryButton.singleCallWorkHub__button--danger {
  border-color: rgba(181, 107, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 62%),
    rgba(181, 107, 0, 0.1);
  color: #7c4a0b;
}

.singleCallWorkHub__lane--calibration .secondaryButton.singleCallWorkHub__button--danger:hover {
  border-color: rgba(181, 107, 0, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent 62%),
    rgba(181, 107, 0, 0.16);
  color: #613908;
}

.singleCallWorkHub .warningBanner.singleCallWorkHub__note {
  border-color: rgba(181, 107, 0, 0.28);
  background: rgba(181, 107, 0, 0.08);
  color: #70470d;
}

/* Resizable desktop navigation shell. Mobile/tablet keeps the existing horizontal nav model. */
.leftNav__brandControls,
.leftNav__resizeHandle {
  display: none;
}

.navToggleButton {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 860;
  line-height: 1;
}

.navToggleButton span {
  display: block;
  grid-column: auto;
  color: inherit;
  font-size: inherit;
  line-height: 1;
  text-transform: none;
}

.navToggleButton:hover,
.navToggleButton:focus-visible {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  color: var(--text);
  box-shadow: var(--focus-ring);
}

@media (min-width: 921px) {
  .appShell {
    --left-nav-width: 212px;
  }

  .leftNav {
    width: var(--left-nav-width);
    min-width: var(--left-nav-width);
    max-width: var(--left-nav-width);
    transition: width 140ms ease, min-width 140ms ease, max-width 140ms ease;
  }

  .mainArea {
    margin-left: var(--left-nav-width);
    transition: margin-left 140ms ease;
  }

  .leftNav__brand {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
  }

  .leftNav__brandControls {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    align-self: center;
  }

  .leftNav__resizeHandle {
    position: absolute;
    inset: 0 -5px 0 auto;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 10px;
    border: 0;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
  }

  .leftNav__resizeHandle span {
    width: 2px;
    height: 42px;
    border-radius: 999px;
    background: var(--line-strong);
    opacity: 0.36;
    transition: opacity 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  }

  .leftNav__resizeHandle:hover span,
  .leftNav__resizeHandle:focus-visible span {
    background: var(--accent-strong);
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(209, 209, 214, 0.14);
  }

  .isNavResizing,
  .isNavResizing * {
    cursor: ew-resize !important;
    user-select: none !important;
  }

  .leftNav__menuCluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .leftNav__menuCluster:not([open]) .leftNav__item {
    display: none;
  }

  .leftNav__menuClusterTitle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
  }

  .leftNav__menuClusterTitle::-webkit-details-marker {
    display: none;
  }

  .leftNav__menuClusterTitle span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leftNav__menuClusterIcon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
  }

  .leftNav__menuClusterTitle:hover .leftNav__menuClusterIcon {
    border-color: var(--interactive-active-border);
    color: var(--text);
  }

  .appShell--navCollapsed {
    --left-nav-width: 56px;
  }

  .appShell--navCollapsed .leftNav {
    overflow: hidden;
  }

  .appShell--navCollapsed .leftNav__brand {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 10px 8px;
  }

  .appShell--navCollapsed .leftNav__brand > span,
  .appShell--navCollapsed .leftNav__brand > strong,
  .appShell--navCollapsed .leftNav__role,
  .appShell--navCollapsed .leftNav__scope,
  .appShell--navCollapsed .leftNav__menu,
  .appShell--navCollapsed .leftNav__footer,
  .appShell--navCollapsed .leftNav__resizeHandle {
    display: none;
  }

  .appShell--navCollapsed .brandMarkButton {
    grid-column: 1;
    grid-row: auto;
  }

  .appShell--navCollapsed .leftNav__brandControls {
    grid-column: 1;
    grid-row: auto;
  }
}

.vicidialQaToolbar {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: max-content minmax(260px, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px);
}

.vicidialQaToolbar__statusDot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--subtle);
}

.vicidialQaToolbar--danger .vicidialQaToolbar__statusDot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 69, 58, 0.12);
}

.vicidialQaToolbar--warning .vicidialQaToolbar__statusDot {
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.12);
}

.vicidialQaToolbar--success .vicidialQaToolbar__statusDot {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(50, 214, 116, 0.12);
}

.vicidialQaToolbar__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.vicidialQaToolbar__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.vicidialQaToolbar__header strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.vicidialQaToolbar__header span,
.vicidialQaToolbar__warning {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vicidialQaToolbar__warning {
  color: var(--danger);
}

.vicidialQaToolbar__rail {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-bg);
}

.vicidialQaToolbar__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--subtle);
}

.vicidialQaToolbar--success .vicidialQaToolbar__fill {
  background: var(--success);
}

.vicidialQaToolbar--warning .vicidialQaToolbar__fill {
  background: var(--warning);
}

.vicidialQaToolbar--danger .vicidialQaToolbar__fill {
  background: var(--danger);
}

.vicidialQaToolbar__metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.vicidialQaToolbar__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding: 0;
}

.vicidialQaToolbar__metric em {
  color: var(--subtle);
  font-size: 9px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.1;
  text-transform: none;
}

.vicidialQaToolbar__metric strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.vicidialQaToolbar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.vicidialQaToolbar__control {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  background: var(--muted-bg);
  font: inherit;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.vicidialQaToolbar__control:hover:not(:disabled) {
  border-color: var(--accent);
}

.vicidialQaToolbar__control--resume {
  color: var(--success);
}

.vicidialQaToolbar__control--stop {
  color: var(--danger);
}

.vicidialQaToolbar__control:disabled {
  cursor: wait;
  opacity: 0.58;
}

:root[data-theme="light"] .vicidialQaToolbar {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(28, 28, 30, 0.08);
}

@media (max-width: 1180px) {
  .vicidialQaToolbar {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .vicidialQaToolbar__metrics {
    grid-column: 2;
    justify-content: flex-start;
  }

  .vicidialQaToolbar__controls {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .vicidialQaToolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .vicidialQaToolbar__statusDot,
  .vicidialQaToolbar__metrics,
  .vicidialQaToolbar__controls {
    grid-column: auto;
  }

  .vicidialQaToolbar__statusDot {
    justify-self: start;
  }

  .vicidialQaToolbar__metrics {
    justify-content: flex-start;
  }

  .vicidialQaToolbar__controls {
    justify-content: flex-start;
  }
}
.sidebarTokenBalance {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-soft);
  text-align: left;
  cursor: pointer;
}

.sidebarTokenBalance__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted);
}

.sidebarTokenBalance__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sidebarTokenBalance__body span,
.sidebarTokenBalance__body small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebarTokenBalance--success .sidebarTokenBalance__dot { background: var(--success); }
.sidebarTokenBalance--warning .sidebarTokenBalance__dot { background: var(--warning); }
.sidebarTokenBalance--danger .sidebarTokenBalance__dot { background: var(--danger); }
.appShell--navCollapsed .sidebarTokenBalance { justify-content: center; padding-inline: 8px; }
.appShell--navCollapsed .sidebarTokenBalance__body { display: none; }

/* The guided Review Desk is the single daily workflow; expert context stays behind disclosures. */
.appShell--simple.appShell--screen-review .reviewDeskAdvancedOnly,
.appShell--simple.appShell--screen-review .directionBriefing,
.appShell--simple.appShell--screen-review .dashboardTokenChip,
.appShell--simple.appShell--screen-review .onboardingLaunchButton {
  display: none !important;
}

.appShell--simple.appShell--screen-review .reviewDeskScreen {
  gap: 14px;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis {
  margin-block: 0;
}

.appShell--simple.appShell--screen-review .reviewNextActionPanel__facts {
  grid-template-columns: max-content minmax(0, 1fr);
}

@media (max-width: 640px) {
  .appShell--simple.appShell--screen-review .leftNav__footer,
  .appShell--simple.appShell--screen-review .leftNav__role > small {
    display: none;
  }

  .appShell--simple.appShell--screen-review .reviewDeskKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tokenBalancePanel {
  border-top: 3px solid var(--border);
}

.tokenBalancePanel--normal { border-top-color: var(--success); }
.tokenBalancePanel--warning,
.tokenBalancePanel--incomplete_data { border-top-color: var(--warning); }
.tokenBalancePanel--danger,
.tokenBalancePanel--critical,
.tokenBalancePanel--exhausted { border-top-color: var(--danger); }

.providerLivePanel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.providerLivePanel--live { border-left-color: var(--success); }
.providerLivePanel--access_denied,
.providerLivePanel--timeout,
.providerLivePanel--unavailable { border-left-color: var(--warning); }

.providerLivePanel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.providerLivePanel__header h3,
.providerLivePanel__header p { margin: 0; }
.providerLivePanel__header p { color: var(--muted); }

.providerLiveGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.providerLivePanel__message { margin: 0; }

.providerCreditBalance {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  margin-bottom: 10px;
}

.providerUsagePeriod select { min-width: 120px; }

.tokenBalanceGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.tokenBalancePrimary,
.tokenBalanceMetric {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.tokenBalancePrimary strong { font-size: clamp(1.4rem, 2vw, 2rem); }
.tokenBalanceMetric strong { overflow-wrap: anywhere; }
.tokenBalancePrimary span,
.tokenBalanceMetric span,
.tokenBalancePrimary small,
.tokenBalanceMetric small,
.tokenBalanceDisclaimer { color: var(--muted); }

.tokenBalanceNotice {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.tokenBalanceNotice textarea {
  width: 100%;
  resize: vertical;
}

.tokenBalanceAdminGrid,
.tokenBalanceHistory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tokenBalanceForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.tokenBalanceRequestActions { margin-top: 14px; }
.tokenBalanceHistory ul { max-height: 220px; overflow: auto; padding-left: 20px; }
.tokenBalanceHistory li { margin-bottom: 6px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .tokenBalanceGrid,
  .providerLiveGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .tokenBalanceGrid,
  .providerCreditBalance,
  .providerLiveGrid,
  .tokenBalanceAdminGrid,
  .tokenBalanceHistory,
  .tokenBalanceForm { grid-template-columns: 1fr; }
  .providerLivePanel__header { display: grid; }
}

.reviewQuickNav__label--short {
  display: none;
}

.appShell--simple.appShell--screen-review .reviewCallPanel {
  gap: 10px;
}

.appShell--simple.appShell--screen-review .reviewCallHeader {
  gap: 8px;
  padding-bottom: 8px;
}

.appShell--simple.appShell--screen-review .reviewCallHeader h2 {
  font-size: 20px;
}

.appShell--simple.appShell--screen-review .reviewDeskSecondaryAction,
.appShell--simple.appShell--screen-review .reviewQuickNav__label--full {
  display: none;
}

.appShell--simple.appShell--screen-review .reviewQuickNav__label--short {
  display: inline;
}

.appShell--simple.appShell--screen-review .reviewQuickNav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
}

.appShell--simple.appShell--screen-review .reviewQuickNav__link {
  min-height: 28px;
  padding: 5px 4px;
}

.appShell--simple.appShell--screen-review .reviewDeskContent {
  gap: 8px;
}

.appShell--simple.appShell--screen-review .reviewDeskBlock,
.appShell--simple.appShell--screen-review .reviewDecisionPanel {
  padding: 11px;
}

.reviewQueueItem__compact {
  display: none;
}

.reviewSimpleSectionFrame {
  display: contents;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis {
  gap: 6px;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard {
  min-height: 58px;
  padding: 8px 10px;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard__top .statusBadge {
  display: none;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard__label {
  font-size: var(--text-xs);
  line-height: 1.15;
}

.appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard__value {
  margin-top: 3px;
  font-size: var(--text-xl);
}

.appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard__delta {
  margin-top: 2px;
  font-size: var(--text-legacy-10);
  line-height: 1.1;
}

.appShell--simple.appShell--screen-review .reviewQueueList {
  gap: 4px;
  padding-bottom: 4px;
}

.appShell--simple.appShell--screen-review .reviewQueueItem {
  gap: 0;
  min-height: 58px;
  border-radius: 6px;
  padding: 5px 7px;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__selectRow,
.appShell--simple.appShell--screen-review .reviewQueueItem__top,
.appShell--simple.appShell--screen-review .reviewQueueItem__open > strong,
.appShell--simple.appShell--screen-review .reviewQueueItem__reason,
.appShell--simple.appShell--screen-review .reviewQueueItem__workflow,
.appShell--simple.appShell--screen-review .reviewQueueItem__meta {
  display: none;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__open {
  gap: 0;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compact {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr) minmax(96px, auto);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compactIdentity,
.appShell--simple.appShell--screen-review .reviewQueueItem__compactOutcome {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compactIdentity strong {
  display: block;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compact small {
  min-width: 0;
  overflow: hidden;
  color: var(--subtle);
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compactOutcome {
  justify-items: end;
  text-align: right;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compactOutcome strong {
  display: block;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}

.appShell--simple.appShell--screen-review .reviewQueueItem__compactOutcome .statusBadge,
.appShell--simple.appShell--screen-review .reviewQueueItem__compact > .statusBadge {
  max-width: 100%;
  min-height: 18px;
  padding: 2px 5px;
  font-size: var(--text-legacy-9);
}

.appShell--simple.appShell--screen-review .reviewSimpleSectionFrame {
  display: none;
}

.appShell--simple.appShell--screen-review .reviewSimpleSectionFrame.isActive {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.appShell--simple.appShell--screen-review .reviewQuickNav__link.isActive {
  border-color: var(--accent);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 640px) {
  .appShell--simple.appShell--screen-review .reviewQueueItem__compact {
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr) minmax(82px, auto);
    gap: 5px;
  }

  .appShell--simple.appShell--screen-review .reviewDeskKpis .kpiCard__delta {
    display: none;
  }
}
.calibrationFeedbackExportHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)) 0%, var(--panel) 72%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}

.calibrationFeedbackExportHero__copy {
  display: grid;
  gap: 6px;
}

.calibrationFeedbackExportHero__copy h2,
.calibrationFeedbackExportHero__copy p {
  margin: 0;
}

.calibrationFeedbackExportHero__copy p {
  color: var(--muted);
  max-width: 760px;
}

.calibrationFeedbackExportHero__button {
  min-width: 260px;
  min-height: 48px;
  white-space: nowrap;
}

.calibrationDisputePanel .sectionHeader > div {
  display: grid;
  gap: 4px;
}

.calibrationDisputePanel .sectionHeader p {
  margin: 0;
}

.calibrationDisputeMetric {
  font-variant-numeric: tabular-nums;
}

.calibrationDisputeMetric--agree {
  color: var(--success);
}

.calibrationDisputeMetric--disagree {
  color: var(--danger);
}

.calibrationDisputeRow--new > td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}

.calibrationDisputeRow--attention {
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}

.calibrationDisputeGovernance {
  margin: 12px 4px 0;
}

@media (max-width: 760px) {
  .calibrationFeedbackExportHero {
    align-items: stretch;
    flex-direction: column;
  }

  .calibrationFeedbackExportHero__button {
    min-width: 0;
    width: 100%;
  }
}

/* Unified guided dashboard contract: one compact Scrutex-like workspace across all screens. */
.appShell--guided {
  --workspace-gap: 10px;
  --workspace-radius: 8px;
  --workspace-panel-padding: 12px;
  background: var(--bg);
}

.appShell--guided .leftNav {
  border-right: 1px solid var(--line);
  box-shadow: none;
}

.appShell--guided .leftNav__menu {
  gap: 10px;
}

.appShell--guided .leftNav__domains {
  gap: 4px;
}

.appShell--guided .leftNav__groupTitle {
  display: none;
}

.appShell--guided .leftNav__menuCluster {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.appShell--guided .leftNav__menuClusterTitle {
  min-height: auto;
  margin: 4px 8px 2px;
  padding: 0;
  color: var(--subtle);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: default;
}

.appShell--guided .leftNav__menuClusterTitle::marker,
.appShell--guided .leftNav__menuClusterTitle::-webkit-details-marker,
.appShell--guided .leftNav__menuClusterIcon {
  display: none;
}

.appShell--guided .leftNav__item,
.appShell--guided .leftNav__menuCluster:not([open]) .leftNav__item {
  display: grid;
  min-height: 32px;
  border-radius: 6px;
}

.appShell--guided .topBar {
  min-height: 54px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.appShell--guided .topBar h1 {
  font-size: 18px;
  line-height: 1.15;
}

.appShell--guided .topBar__eyebrow {
  color: var(--subtle);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.appShell--guided [data-testid="dashboard-source-updated-at"],
.appShell--guided [data-testid="dashboard-source-chip"] {
  display: none;
}

.appShell--guided .directionBriefing {
  display: none;
}

.appShell--guided .scopeOverviewBar {
  display: none;
}

.appShell--guided .leftNav__scope {
  display: none;
}

.appShell--guided .screenContent,
.appShell--guided .screenStack {
  min-width: 0;
}

.appShell--guided .screenStack {
  gap: var(--workspace-gap);
  padding-top: var(--workspace-gap);
}

.appShell--guided .kpiGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--workspace-gap);
}

.appShell--guided .kpiGrid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appShell--guided .tablePanel,
.appShell--guided .summaryPanel,
.appShell--guided .passportPanel,
.appShell--guided .insightPanel,
.appShell--guided .callsWorkspace,
.appShell--guided .callsToolbar,
.appShell--guided .tableControls,
.appShell--guided .summaryStrip,
.appShell--guided .workCompass,
.appShell--guided .scrutexPanel {
  border-radius: var(--workspace-radius);
  box-shadow: none;
}

.appShell--guided .kpiCard,
.appShell--guided .chartCard {
  border-radius: var(--radius);
  box-shadow: none;
}

.appShell--guided .kpiCard {
  min-height: 76px;
  padding: 10px 12px;
}

.appShell--guided .kpiCard__value {
  margin-top: 5px;
  font-size: var(--text-legacy-22);
}

.appShell--guided .kpiCard__delta {
  margin-top: 3px;
  font-size: var(--text-legacy-10);
  line-height: 1.25;
}

.appShell--guided .tablePanel,
.appShell--guided .chartCard,
.appShell--guided .summaryPanel,
.appShell--guided .passportPanel,
.appShell--guided .insightPanel,
.appShell--guided .callsWorkspace,
.appShell--guided .summaryStrip,
.appShell--guided .workCompass,
.appShell--guided .scrutexPanel {
  padding: var(--workspace-panel-padding);
}

.appShell--guided .panelHeader,
.appShell--guided .sectionHeader,
.appShell--guided .tableSectionHeader,
.appShell--guided .chartCard__header {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.appShell--guided .denseTable th {
  padding: 7px 9px;
  font-size: var(--text-legacy-9-5);
}

.appShell--guided .denseTable td {
  padding: 7px 9px;
  font-size: var(--text-xs);
}

.appShell--guided .callsWorkspace {
  display: grid;
  gap: 8px;
}

.appShell--guided .callsToolbar,
.appShell--guided .tableControls {
  padding: 8px;
}

.appShell--guided .callsToolbar--grouped {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.appShell--guided .callsToolbar--grouped > .historyPeriodControls.periodSegments,
.appShell--guided .callsToolbar--grouped > .historyFiltersAdvanced {
  grid-column: auto;
  width: auto;
}

.appShell--guided .callsToolbar--grouped > .historyPeriodControls.periodSegments {
  flex: 1 1 100%;
}

.appShell--guided .callsToolbar--grouped > .dateFilter {
  flex: 0 1 150px;
}

.appShell--guided .callsToolbar--grouped > .multiSelectFilter {
  flex: 0 1 190px;
}

.appShell--guided .callsToolbar--grouped > .historyFiltersAdvanced {
  flex: 0 1 auto;
}

.appShell--guided .commandCenterScreen {
  gap: 14px;
}

.appShell--guided .commandFilterPanel {
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.appShell--guided .commandFilterPanel .periodSegments {
  border-radius: 4px;
}

.appShell--guided .commandFilterPanel__grid {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--workspace-radius);
  background: var(--panel);
}

.appShell--guided .commandKpiGrid {
  gap: 14px;
}

.appShell--guided .commandKpiGrid .kpiCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 118px;
  padding: 16px;
  text-align: center;
}

.appShell--guided .commandKpiGrid .kpiCard__value {
  order: -1;
  margin: 0 0 8px;
  font-size: var(--text-2xl);
  line-height: 1;
}

.appShell--guided .commandKpiGrid .kpiCard__top {
  justify-content: center;
}

.appShell--guided .commandKpiGrid .kpiCard__top .statusBadge {
  display: none;
}

.appShell--guided .commandKpiGrid .kpiCard__label {
  color: var(--muted);
  font-size: var(--text-legacy-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.appShell--guided .commandKpiGrid .kpiCard__delta {
  font-size: var(--text-legacy-9);
}

.appShell--guided .commandTablePanel > .mutedText {
  display: none;
}

.appShell--guided .commandTablePanel {
  padding: 12px 14px;
}

.appShell--guided .commandTablePanel .sectionHeader {
  margin-bottom: 4px;
}

@media (min-width: 921px) {
  .appShell--guided:not(.appShell--navCollapsed) {
    --left-nav-width: 216px !important;
  }

  .appShell--guided:not(.appShell--navCollapsed) .leftNav {
    width: 216px;
  }

  .appShell--guided:not(.appShell--navCollapsed) .mainArea {
    margin-left: 216px;
  }

  .appShell--guided .mainArea {
    padding: 0 16px 24px;
  }
}

@media (max-width: 920px) {
  .appShell--guided .kpiGrid,
  .appShell--guided .kpiGrid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appShell--guided .topBar {
    padding-inline: 10px;
  }
}

@media (max-width: 560px) {
  .appShell--guided .kpiGrid,
  .appShell--guided .kpiGrid--two {
    grid-template-columns: 1fr;
  }
}

/* Scrutex workspace v4: the information architecture, not only the palette. */
.scrutexShell {
  --scrutex-sidebar-width: 220px;
  min-height: 100vh;
  background: #1a1a1e;
  color: #d4d4d8;
  font-family: var(--font-sans);
  font-size: 13px;
}

.scrutexSidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  display: flex;
  width: var(--scrutex-sidebar-width);
  min-width: var(--scrutex-sidebar-width);
  height: 100vh;
  flex-direction: column;
  border-right: 1px solid #333340;
  background: #141417;
}

.scrutexSidebar__header {
  padding: 24px 20px 20px;
  border-bottom: 1px solid #333340;
}

.scrutexBrand {
  display: block;
  border: 0;
  background: transparent;
  color: #e8762d;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.scrutexSidebar__header > span {
  display: block;
  margin-top: 4px;
  color: #71717a;
  font-size: 10px;
  letter-spacing: 1px;
}

.scrutexLastSync {
  display: block;
  margin-top: 5px;
  color: #52525b;
  font-size: 8px;
  line-height: 1.3;
}

.scrutexSidebar__nav {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.scrutexNavLink,
.scrutexServiceMenu > summary {
  display: flex;
  width: 100%;
  min-height: 39px;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: #71717a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .45px;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.scrutexNavLink:hover,
.scrutexServiceMenu > summary:hover {
  background: rgba(255, 255, 255, .03);
  color: #d4d4d8;
}

.scrutexNavLink.isActive {
  border-left-color: #e8762d;
  background: rgba(232, 118, 45, .15);
  color: #e8762d;
}

.scrutexNavLink__icon {
  width: 20px;
  flex: 0 0 20px;
  text-align: center;
}

.scrutexServiceMenu {
  margin-top: 8px;
  border-top: 1px solid #28282f;
  padding-top: 8px;
}

.scrutexServiceMenu > summary {
  list-style: none;
}

.scrutexServiceMenu > summary::-webkit-details-marker {
  display: none;
}

.scrutexServiceMenu > summary::after {
  margin-left: auto;
  content: "+";
}

.scrutexServiceMenu[open] > summary::after {
  content: "−";
}

.scrutexServiceMenu__items .scrutexNavLink {
  min-height: 34px;
  padding-block: 7px;
  padding-left: 28px;
  font-size: 10px;
}

.scrutexManagerActions,
.scrutexManagerHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scrutexManagerSectionTitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.scrutexManagerSectionTitle h2 {
  margin: 0;
}

.scrutexManagerDirectionSwitch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}

.scrutexManagerDirectionSwitch button {
  min-height: 28px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.scrutexManagerDirectionSwitch button.isActive {
  background: var(--accent);
  color: #fff;
}

.scrutexManagerNameLink {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}

.scrutexManagerNameLink:hover,
.scrutexManagerNameLink:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.scrutexManagerHeaderActions {
  justify-content: flex-end;
}

.scrutexShell .denseTable tbody tr.scrutexManagerRow--attention td:first-child {
  border-left: 2px solid var(--danger);
}

.singleCallConversationReview {
  gap: 16px;
}

.singleCallConversationReview__transcript {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.singleCallReviewSheet {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .72fr);
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 8px 18px color-mix(in srgb, #000 8%, transparent);
}

.singleCallReviewSheet__transcript,
.singleCallReviewSheet__review {
  min-width: 0;
}

.singleCallReviewSheet__transcript {
  display: grid;
  gap: 10px;
  align-content: start;
}

.singleCallReviewSheet__review {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 10px;
  align-content: start;
  max-height: calc(100vh - 108px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.singleCallReviewSheet__heading,
.singleCallReviewSheet__issueHeader,
.singleCallReviewSheet__issueFooter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.singleCallReviewSheet__heading {
  justify-content: space-between;
}

.singleCallReviewSheet__heading h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.singleCallReviewSheet__heading > span,
.singleCallReviewSheet__hint {
  color: var(--muted);
  font-size: 12px;
}

.singleCallReviewSheet__hint {
  margin: 0;
  line-height: 1.45;
}

.singleCallReviewSheet__eyebrow {
  display: block;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.singleCallReviewSheet__transcript .transcriptBlock--full {
  max-height: calc(100vh - 286px);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--panel-soft);
}

.singleCallReviewSheet__transcript .transcriptRow.isIssue {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  background: color-mix(in srgb, var(--danger-bg) 70%, var(--panel));
}

.singleCallReviewSheet__issueList {
  display: grid;
  gap: 8px;
}

.singleCallReviewSheet__issue {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 6px;
  background: var(--panel);
}

.singleCallReviewSheet__issue.isManual {
  border-left-color: var(--success);
}

.singleCallReviewSheet__issueHeader {
  align-items: flex-start;
  flex-wrap: wrap;
}

.singleCallReviewSheet__issueHeader strong {
  flex: 1 1 150px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

.singleCallReviewSheet__issue p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.violationCriteriaDisclosure {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}

.violationCriteriaDisclosure > summary {
  padding: 8px 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
}

.violationCriteriaDisclosure__body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.violationCriteriaDisclosure__meta {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
}

.violationCriteriaDisclosure__meta dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.violationCriteriaDisclosure__meta dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.violationCriteriaDisclosure__evidence {
  display: grid;
  gap: 7px;
}

.violationCriteriaDisclosure__evidence > strong {
  font-size: 11px;
}

.violationCriteriaDisclosure__evidence blockquote {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel);
}

.violationCriteriaDisclosure__evidence blockquote span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.violationCriteriaDisclosure--compact {
  background: transparent;
}

.violationCriteriaDisclosure--compact > summary {
  padding: 0;
}

.violationCriteriaDisclosure--compact[open] {
  min-width: 420px;
  padding: 8px;
}

.violationCriteriaDisclosure--compact[open] > summary {
  margin-bottom: 8px;
}

.violationCriteriaDisclosure--compact .violationCriteriaDisclosure__body {
  padding: 0;
}

.singleCallReviewSheet__issueFooter {
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.singleCallReviewSheet__issueFooter .aiViolationDecisionInline {
  margin-left: auto;
}

.singleCallReviewSheet__addError {
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.singleCallReviewSheet__addError > summary {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.singleCallReviewSheet__addError > .operationalPanel {
  margin-top: 9px;
  padding: 10px;
}

.singleCallReviewSheet__addError .operationalGrid--two {
  grid-template-columns: 1fr;
}

.singleCallSupplemental {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.singleCallSupplemental > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.singleCallSupplemental > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.singleCallSupplemental__content {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line-soft);
}

.singleCallSupplemental__content > :first-child {
  margin-top: 14px;
}

.singleCallScreen > .singleCallSupplemental {
  order: -1;
}

.singleCallScreen > .callHero {
  padding: 12px 14px;
}

.singleCallScreen > .callHero .callHero__identity h2 {
  margin-top: 7px;
  font-size: clamp(17px, 1.6vw, 22px);
}

.singleCallScreen > .singleCallAudioPanel {
  gap: 8px;
  padding: 10px 12px;
  box-shadow: none;
}

.singleCallScreen > .singleCallAudioPanel .singleCallAudioPanel__header h2 {
  font-size: 14px;
}

@media (max-width: 1260px) {
  .singleCallReviewSheet {
    grid-template-columns: 1fr;
  }

  .singleCallReviewSheet__review {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .singleCallReviewSheet__transcript .transcriptBlock--full {
    max-height: 62vh;
  }
}

@media (max-width: 640px) {
  .singleCallReviewSheet {
    gap: 10px;
    padding: 9px;
  }

  .singleCallReviewSheet__review {
    padding: 9px;
  }

  .singleCallReviewSheet__issueFooter,
  .singleCallReviewSheet__issueFooter .aiViolationDecisionInline {
    width: 100%;
    margin-left: 0;
  }

  .singleCallReviewSheet__issueFooter .managerAiViolationDecision {
    flex: 1 1 0;
  }

  .singleCallSupplemental > summary {
    align-items: flex-start;
  }

  .singleCallReviewSheet__transcript .transcriptBlock {
    display: flex;
    flex-direction: column;
  }

  .singleCallReviewSheet__transcript .transcriptRow {
    grid-template-columns: 48px minmax(84px, auto) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 8px;
    height: auto;
    min-height: 70px;
    overflow: visible;
  }

  .singleCallReviewSheet__transcript .transcriptRow__text {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    width: 100%;
    white-space: normal;
    overflow: visible;
  }

  .singleCallReviewSheet__transcript .transcriptRow__text > span {
    display: block;
  }

  .singleCallReviewSheet__transcript .transcriptRow__marker {
    grid-column: 3;
    grid-row: 1;
  }
}

.singleCallConversationReview .transcriptRow.isIssue {
  border-color: rgba(255, 69, 58, .58);
  background: rgba(255, 69, 58, .08);
}

.singleCallConversationReview .transcriptRow__marker--issue {
  border-color: rgba(255, 69, 58, .45);
  background: rgba(255, 69, 58, .16);
  color: #ff6b63;
}

.scrutexSidebar__footer {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #333340;
  color: #71717a;
  font-size: 10px;
}

.scrutexOpenAiSpend {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #333340;
  border-left: 2px solid #22c55e;
  border-radius: 4px;
  background: #1a1a1e;
  color: #a1a1aa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scrutexOpenAiSpend:hover {
  border-color: #e8762d;
}

.scrutexOpenAiSpend.isWarning {
  border-left-color: #eab308;
}

.scrutexOpenAiSpend.isUnavailable {
  border-left-color: #71717a;
}

.scrutexOpenAiSpend__header,
.scrutexOpenAiSpend__values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scrutexOpenAiSpend__header strong {
  color: #d4d4d8;
  font-size: 10px;
  letter-spacing: .08em;
}

.scrutexOpenAiSpend__header small {
  color: #22c55e;
  font-size: 8px;
}

.scrutexOpenAiSpend__values > span {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.scrutexOpenAiSpend__values > span:last-child {
  text-align: right;
}

.scrutexOpenAiSpend__values small,
.scrutexOpenAiSpend__status,
.scrutexOpenAiSpend__empty {
  color: #71717a;
  font-size: 8px;
  line-height: 1.35;
}

.scrutexOpenAiSpend__status {
  display: none;
}

.scrutexOpenAiSpend__values strong {
  color: #d4d4d8;
  font-size: 10px;
}

.scrutexSystemStatus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scrutexSystemStatus > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 7px rgba(34, 197, 94, .7);
}

.scrutexSystemStatus.isWarning > span {
  background: #eab308;
  box-shadow: 0 0 7px rgba(234, 179, 8, .7);
}

.scrutexSystemStatus strong,
.scrutexUser strong {
  color: #d4d4d8;
  font-size: 10px;
}

.scrutexUser {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid #28282f;
}

.scrutexLogout {
  min-height: 28px;
  border: 1px solid #333340;
  border-radius: 4px;
  background: transparent;
  color: #a1a1aa;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.scrutexMain {
  width: calc(100% - var(--scrutex-sidebar-width));
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--scrutex-sidebar-width);
  overflow-x: clip;
}

.scrutexTopbar {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid #333340;
  background: #1a1a1e;
}

.scrutexBreadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #71717a;
  font-size: 11px;
}

.scrutexBreadcrumb strong {
  overflow: hidden;
  color: #d4d4d8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scrutexBreadcrumb em {
  flex: 0 0 auto;
  color: #e8762d;
  font-style: normal;
  font-weight: 700;
}

.scrutexTopbar__right {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.scrutexDirectionSwitch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #333340;
  border-radius: 4px;
  background: #141417;
}

.scrutexDirectionSwitch button {
  min-height: 24px;
  padding: 4px 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #71717a;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
}

.scrutexDirectionSwitch button:hover {
  color: #d4d4d8;
}

.scrutexDirectionSwitch button.isActive {
  background: #e8762d;
  color: #151515;
}

.scrutexThemeToggle {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid #333340;
  border-radius: 4px;
  background: #222228;
  color: #a1a1aa;
  padding: 4px 9px;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.scrutexThemeToggle:hover {
  border-color: #e8762d;
  color: #e8762d;
}

.scrutexThemeToggle strong {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

.scrutexCompactSelect {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #71717a;
  font-size: 9px;
  text-transform: uppercase;
}

.scrutexCompactSelect select {
  min-height: 30px;
  max-width: 180px;
  border: 1px solid #333340;
  border-radius: 4px;
  background: #222228;
  color: #d4d4d8;
  padding: 4px 8px;
  font: inherit;
  font-size: 10px;
}

.scrutexCallCount {
  min-height: 28px;
  border: 1px solid rgba(232, 118, 45, .4);
  border-radius: 4px;
  background: rgba(232, 118, 45, .12);
  color: #e8762d;
  padding: 5px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.scrutexCallCount.isWarning {
  border-color: rgba(234, 179, 8, .4);
  background: rgba(234, 179, 8, .1);
  color: #eab308;
}

.scrutexMenuButton,
.scrutexMobileBackdrop {
  display: none;
}

.scrutexScopeLine {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 24px;
  border-bottom: 1px solid #28282f;
  color: #71717a;
  font-size: 10px;
}

.scrutexScopeLine strong {
  color: #a1a1aa;
}

.scrutexMain > .vicidialQaToolbar {
  margin: 12px 24px 0;
}

.scrutexContent {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: clip;
  padding: 20px 24px 28px;
}

.scrutexFooter {
  padding: 14px 24px 24px;
  color: #52525b;
  font-size: 9px;
  text-align: center;
}

/* Scrutex dashboards: period, four facts, operational table, recent records. */
.scrutexShell .screenStack {
  gap: 16px;
  padding-top: 0;
}

.scrutexShell .commandFilterPanel {
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.scrutexShell .commandFilterPanel__grid {
  border-radius: 4px;
  background: #222228;
}

.scrutexShell .periodSegments {
  border-radius: 4px;
}

.scrutexShell .periodSegment {
  border-radius: 3px;
}

.scrutexShell .kpiGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.scrutexShell .kpiGrid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scrutexShell .kpiCard {
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: none;
  padding: 16px;
}

.scrutexShell .kpiCard__value {
  font-size: var(--text-2xl);
}

.scrutexShell .kpiCard__label {
  color: var(--muted);
  font-size: var(--text-legacy-10);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scrutexShell .kpiCard__delta {
  color: var(--muted);
  font-size: var(--text-legacy-9);
}

.scrutexShell .tablePanel,
.scrutexShell .summaryPanel,
.scrutexShell .passportPanel,
.scrutexShell .insightPanel,
.scrutexShell .scrutexPanel {
  border: 1px solid #333340;
  border-radius: 4px;
  background: #222228;
  box-shadow: none;
}

.scrutexShell .chartCard {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: none;
}

.scrutexShell .tablePanel {
  padding: 16px;
}

.scrutexShell .sectionHeader h2,
.scrutexShell .sectionHeader h3,
.scrutexShell .panelHeader h2 {
  color: #fafafa;
  font-size: 14px;
}

.scrutexShell .chartCard__header h2 {
  color: var(--text);
  font-size: var(--text-md);
}

.scrutexShell .denseTable th {
  border-bottom-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted);
  font-size: var(--text-legacy-9);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scrutexShell .denseTable td {
  border-bottom-color: var(--line);
  color: var(--text);
  font-size: var(--text-xs);
}

.scrutexShell .denseTable tbody tr:hover td {
  background: var(--panel-strong);
}

.scrutexShell .tableAction--primary,
.scrutexShell .primaryButton,
.scrutexShell .reviewDecisionButton.isRecommendedNextStep {
  border-color: #e8762d;
  background: #e8762d;
  color: #151515;
}

/* One guided review route: queue first, then audio, AI findings and QA decision. */
.scrutexShell.appShell--screen-review .reviewDeskKpis,
.scrutexShell.appShell--screen-review .reviewDeskResizeHandle,
.scrutexShell.appShell--screen-review .reviewQueueBulkActionBar,
.scrutexShell.appShell--screen-review .reviewCallHeader__actions .reviewDeskSecondaryAction {
  display: none;
}

.scrutexShell.appShell--screen-review .reviewDeskLayout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
}

.scrutexShell.appShell--screen-review .reviewQueuePanel {
  position: sticky;
  top: 73px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.scrutexShell.appShell--screen-review .reviewCallPanel {
  min-width: 0;
}

.scrutexShell.appShell--screen-review .reviewQuickNav {
  position: sticky;
  top: 57px;
  z-index: 20;
  border-radius: 4px;
  background: #222228;
}

.scrutexShell.appShell--screen-review .reviewSimpleSectionFrame.isActive {
  gap: 12px;
}

.scrutexShell.appShell--screen-review .reviewDecisionPanel {
  border-radius: 4px;
  box-shadow: none;
}

.scrutexShell.appShell--screen-review .reviewDecisionBar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 10px;
  border-top: 1px solid #333340;
  background: rgba(34, 34, 40, .96);
}

.scrutexShell.appShell--screen-review .reviewDecisionButton {
  min-height: 42px;
}

/* Review/complaints stability pass v198: readable compact UI and isolated failures. */
.screenErrorState {
  max-width: 720px;
  margin: 24px auto;
  padding: 24px;
}

.clientComplaintsSimple__intro p,
.clientComplaintsSimple__filterHint,
.clientComplaintsSimple__pagination,
.clientComplaintsSimple__table td {
  font-size: 14px;
  line-height: 1.45;
}

.clientComplaintsSimple__filter > span,
.clientComplaintsSimple__table th,
.clientComplaintsSimple__detailRow > span {
  font-size: 12px;
  letter-spacing: .035em;
}

.clientComplaintsSimple__filter input,
.clientComplaintsSimple__filter select {
  min-height: 42px;
  padding-inline: 10px;
  font-size: 14px;
}

.scrutexShell.appShell--screen-review .reviewDeskLayout {
  grid-template-columns: 320px minmax(0, 1fr);
}

.scrutexShell.appShell--screen-review .reviewQueueItem__reason,
.scrutexShell.appShell--screen-review .reviewQueueItem__workflow,
.scrutexShell.appShell--screen-review .reviewQueueItem__meta,
.scrutexShell.appShell--screen-review .reviewDeskBlock p,
.scrutexShell.appShell--screen-review .reviewDecisionPanel {
  font-size: 14px;
  line-height: 1.45;
}

.reviewQueuePagination--server {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 1023px) {
  .scrutexDirectionSwitch button {
    padding-inline: 6px;
  }

  .scrutexTopbar__right .scrutexCompactSelect span {
    display: none;
  }

  .scrutexTopbar__right .scrutexCompactSelect select {
    max-width: 130px;
  }

  .scrutexShell.appShell--screen-review .reviewDeskLayout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .scrutexMobileBackdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    background: rgba(0, 0, 0, .62);
  }

  .scrutexMobileBackdrop.isVisible {
    display: block;
  }

  .scrutexSidebar {
    transform: translateX(-100%);
    transition: transform .16s ease;
  }

  .scrutexSidebar.isOpen {
    transform: translateX(0);
  }

  .scrutexMain {
    width: 100%;
    margin-left: 0;
  }

  .scrutexMenuButton {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #333340;
    border-radius: 4px;
    background: #222228;
    color: #d4d4d8;
  }

  .scrutexTopbar {
    padding-inline: 12px;
  }

  .scrutexTopbar__right .scrutexCompactSelect,
  .scrutexScopeLine {
    display: none;
  }

  .scrutexThemeToggle strong {
    display: none;
  }

  .scrutexContent {
    padding: 14px 12px 22px;
  }

  .scrutexMain > .vicidialQaToolbar {
    margin-inline: 12px;
  }

  .scrutexShell .kpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scrutexShell.appShell--screen-review .reviewDeskLayout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .scrutexShell.appShell--screen-review .reviewQueuePanel {
    position: static;
    max-height: none;
  }

  .scrutexShell.appShell--screen-review .reviewQueueList {
    min-height: 180px;
    max-height: 340px;
  }
}

@media (max-width: 520px) {
  .scrutexBreadcrumb {
    display: none;
  }

  .scrutexDirectionSwitch button {
    padding-inline: 5px;
    font-size: 7px;
  }

  .scrutexCallCount {
    display: none;
  }

  .scrutexShell .kpiGrid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .scrutexShell .kpiCard {
    min-height: 82px;
    padding: 11px;
  }

  .scrutexShell .kpiCard__value {
    font-size: var(--text-legacy-23);
  }
}

/* Light Scrutex workspace: same product architecture, user-selectable palette. */
:root[data-theme="light"] .scrutexShell {
  background: #f2f2f7;
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexSidebar {
  border-right-color: #d1d1d6;
  background: #ffffff;
}

:root[data-theme="light"] .scrutexSidebar__header,
:root[data-theme="light"] .scrutexSidebar__footer,
:root[data-theme="light"] .scrutexServiceMenu,
:root[data-theme="light"] .scrutexUser {
  border-color: #e5e5ea;
}

:root[data-theme="light"] .scrutexSidebar__header > span,
:root[data-theme="light"] .scrutexLastSync,
:root[data-theme="light"] .scrutexSidebar__footer,
:root[data-theme="light"] .scrutexNavLink,
:root[data-theme="light"] .scrutexServiceMenu > summary {
  color: #636366;
}

:root[data-theme="light"] .scrutexNavLink:hover,
:root[data-theme="light"] .scrutexServiceMenu > summary:hover {
  background: rgba(28, 28, 30, .04);
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexNavLink.isActive {
  border-left-color: #e8762d;
  background: rgba(232, 118, 45, .11);
  color: #c95f1d;
}

:root[data-theme="light"] .scrutexSystemStatus strong,
:root[data-theme="light"] .scrutexUser strong {
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexLogout,
:root[data-theme="light"] .scrutexMenuButton,
:root[data-theme="light"] .scrutexThemeToggle,
:root[data-theme="light"] .scrutexOpenAiSpend,
:root[data-theme="light"] .scrutexCompactSelect select {
  border-color: #d1d1d6;
  background: #ffffff;
  color: #3a3a3c;
}

:root[data-theme="light"] .scrutexOpenAiSpend__header strong,
:root[data-theme="light"] .scrutexOpenAiSpend__values strong {
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexOpenAiSpend__values small,
:root[data-theme="light"] .scrutexOpenAiSpend__status,
:root[data-theme="light"] .scrutexOpenAiSpend__empty {
  color: #636366;
}

:root[data-theme="light"] .scrutexDirectionSwitch {
  border-color: #d1d1d6;
  background: #ffffff;
}

:root[data-theme="light"] .scrutexDirectionSwitch button {
  color: #636366;
}

:root[data-theme="light"] .scrutexDirectionSwitch button:hover {
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexDirectionSwitch button.isActive {
  background: #e8762d;
  color: #ffffff;
}

:root[data-theme="light"] .scrutexMain,
:root[data-theme="light"] .scrutexTopbar {
  background: #f2f2f7;
}

:root[data-theme="light"] .scrutexTopbar,
:root[data-theme="light"] .scrutexScopeLine {
  border-color: #d1d1d6;
}

:root[data-theme="light"] .scrutexBreadcrumb,
:root[data-theme="light"] .scrutexScopeLine,
:root[data-theme="light"] .scrutexCompactSelect {
  color: #636366;
}

:root[data-theme="light"] .scrutexBreadcrumb strong,
:root[data-theme="light"] .scrutexScopeLine strong {
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexCallCount {
  border-color: rgba(201, 95, 29, .34);
  background: rgba(232, 118, 45, .1);
  color: #a94d16;
}

:root[data-theme="light"] .scrutexShell .commandFilterPanel__grid,
:root[data-theme="light"] .scrutexShell .tablePanel,
:root[data-theme="light"] .scrutexShell .summaryPanel,
:root[data-theme="light"] .scrutexShell .passportPanel,
:root[data-theme="light"] .scrutexShell .insightPanel,
:root[data-theme="light"] .scrutexShell .scrutexPanel,
:root[data-theme="light"] .scrutexShell.appShell--screen-review .reviewQuickNav {
  border-color: #d1d1d6;
  background: #ffffff;
}

:root[data-theme="light"] .scrutexShell .kpiCard,
:root[data-theme="light"] .scrutexShell .chartCard {
  border-color: var(--line);
  background: var(--panel);
}

:root[data-theme="light"] .singleCallConversationReview__transcript {
  border-color: #d1d1d6;
  background: #ffffff;
}

:root[data-theme="light"] .singleCallConversationReview .transcriptRow.isIssue {
  border-color: rgba(215, 40, 35, .48);
  background: rgba(255, 59, 48, .07);
}

:root[data-theme="light"] .scrutexShell .sectionHeader h2,
:root[data-theme="light"] .scrutexShell .sectionHeader h3,
:root[data-theme="light"] .scrutexShell .panelHeader h2 {
  color: #1c1c1e;
}

:root[data-theme="light"] .scrutexShell .chartCard__header h2 {
  color: var(--text);
}

:root[data-theme="light"] .scrutexShell .denseTable th {
  border-bottom-color: var(--line);
  background: var(--panel-strong);
  color: var(--muted);
}

:root[data-theme="light"] .scrutexShell .denseTable td {
  border-bottom-color: var(--line);
  color: var(--text);
}

:root[data-theme="light"] .scrutexShell .denseTable tbody tr:hover td {
  background: var(--panel-strong);
}

:root[data-theme="light"] .scrutexShell.appShell--screen-review .reviewDecisionBar {
  border-top-color: #d1d1d6;
  background: rgba(255, 255, 255, .96);
}

/* The single-call work hub follows the selected dark theme instead of staying white. */
:root[data-theme="dark"] .singleCallWorkHub {
  border-color: var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--success-bg) 32%, transparent), transparent 120px),
    var(--panel);
  color: var(--text);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--success) 54%, transparent);
}

:root[data-theme="dark"] .singleCallWorkHub__header h2,
:root[data-theme="dark"] .singleCallWorkHub__fact strong,
:root[data-theme="dark"] .singleCallWorkHub__lane h3 {
  color: var(--text);
}

:root[data-theme="dark"] .singleCallWorkHub__header p,
:root[data-theme="dark"] .singleCallWorkHub__lane p,
:root[data-theme="dark"] .singleCallWorkHub__fact small,
:root[data-theme="dark"] .singleCallWorkHub__fact span {
  color: var(--muted);
}

:root[data-theme="dark"] .singleCallWorkHub__eyebrow {
  color: var(--success);
}

:root[data-theme="dark"] .singleCallWorkHub__fact,
:root[data-theme="dark"] .singleCallWorkHub__lane {
  border-color: var(--line);
  background: var(--panel-soft);
  box-shadow: none;
}

:root[data-theme="dark"] .singleCallWorkHub__lane--calibration {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: color-mix(in srgb, var(--warning-bg) 56%, var(--panel-soft));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 62%, transparent);
}

:root[data-theme="dark"] .singleCallWorkHub .secondaryButton.singleCallWorkHub__button {
  border-color: var(--line-strong);
  background: var(--control-bg);
  color: var(--text);
  box-shadow: none;
}

:root[data-theme="dark"] .singleCallWorkHub .secondaryButton.singleCallWorkHub__button:hover {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  color: var(--text);
}

:root[data-theme="dark"] .singleCallWorkHub .secondaryButton.singleCallWorkHub__button--danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
  background: var(--danger-bg);
  color: var(--danger);
}

:root[data-theme="dark"] .singleCallWorkHub__lane--calibration .secondaryButton.singleCallWorkHub__button--danger {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: var(--warning-bg);
  color: var(--warning);
}

:root[data-theme="dark"] .singleCallWorkHub .warningBanner.singleCallWorkHub__note {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
  background: var(--warning-bg);
  color: var(--warning);
}

@media (max-width: 920px) {
  .commandFilterPanel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scrutexShell .kpiGrid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .commandFilterPanel__top,
  .commandFilterPanel__quick {
    align-items: stretch;
    flex-direction: column;
  }

  .commandFilterPanel__top .periodSegments,
  .commandFilterPanel__toggle,
  .commandFilterPanel__quick .commandField--search,
  .commandFilterPanel__apply,
  .commandOverviewSwitch {
    width: 100%;
  }

  .commandFilterPanel__quick .commandField--search {
    flex: 0 0 auto;
  }

  .commandFilterPanel__grid,
  .scrutexShell .kpiGrid--three {
    grid-template-columns: 1fr;
  }

  .commandOverviewSwitch button {
    min-width: 0;
    flex: 1 1 50%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px) {
  .technicalControlScreen .technicalControlRouteButton {
    min-width: 0;
    max-width: 100%;
    padding-inline: 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
.callsJournalSearch {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}

.callsJournalSearch__field {
  flex: 1 1 520px;
  min-width: 240px;
}

.callsJournalState {
  padding: 32px 16px;
  color: var(--muted);
  text-align: center;
}

.callsJournalHelp {
  padding-block: 14px;
}

@media (max-width: 760px) {
  .callsJournalSearch {
    align-items: stretch;
    flex-direction: column;
  }
}
.scrutexVersionButton {
  display: block;
  width: fit-content;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  color: #71717a;
  background: transparent;
  font: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: left;
  cursor: pointer;
  opacity: 0.78;
}

:root[data-theme="light"] .scrutexVersionButton {
  color: #636366;
}

.scrutexVersionButton:hover,
.scrutexVersionButton:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.releaseNotesLayer {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 12, 24, 0.68);
  backdrop-filter: blur(6px);
}

.releaseNotesDialog {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
  border-radius: 22px;
  color: var(--text, #e8eefc);
  background: var(--panel, #111a2c);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.releaseNotesDialog__header,
.releaseNotesDialog__actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.releaseNotesDialog__eyebrow {
  margin: 0 0 7px;
  color: var(--accent, #66e3c4);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.releaseNotesDialog h2 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.releaseNotesDialog__close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.28));
  border-radius: 12px;
  color: inherit;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.releaseNotesDialog__summary {
  margin: 20px 0 16px;
  color: var(--muted, #a9b7cf);
  line-height: 1.6;
}

.releaseNotesDialog__changes {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
  line-height: 1.5;
}

.releaseNotesDialog__changes li::marker {
  color: var(--accent, #66e3c4);
}

.releaseNotesDialog__safety {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--muted, #a9b7cf);
  background: rgba(102, 227, 196, 0.08);
  font-size: 0.88rem;
  line-height: 1.5;
}

.releaseNotesDialog__actions {
  justify-content: flex-end;
  margin-top: 22px;
}

@media (max-width: 560px) {
  .releaseNotesLayer {
    align-items: end;
    padding: 10px;
  }

  .releaseNotesDialog {
    max-height: calc(100vh - 20px);
    padding: 22px 18px;
    border-radius: 20px;
  }
}