:root {
  color-scheme: dark;
  --bg: #111113;
  --nav: #1c1c1e;
  --panel: #1c1c1e;
  --panel-strong: #2c2c2e;
  --panel-soft: #161719;
  --line: #343438;
  --line-strong: #48484a;
  --line-soft: #28282b;
  --text: #f5f5f7;
  --muted: #c7c7cc;
  --subtle: #8e8e93;
  --accent: #d1d1d6;
  --accent-strong: #f2f2f7;
  --accent-soft: rgba(209, 209, 214, 0.16);
  --success: #32d674;
  --success-bg: rgba(50, 214, 116, 0.13);
  --warning: #ffd60a;
  --warning-bg: rgba(255, 214, 10, 0.14);
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.15);
  --muted-bg: rgba(142, 142, 147, 0.12);
  --control-bg: #17181b;
  --focus-ring: 0 0 0 3px rgba(209, 209, 214, 0.24);
  --radius: 8px;
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.18);
  --interactive-hover-bg: rgba(209, 209, 214, 0.14);
  --interactive-selected-bg: rgba(209, 209, 214, 0.18);
  --interactive-selected-wash: rgba(209, 209, 214, 0.22);
  --interactive-hover-line: rgba(242, 242, 247, 0.24);
  --interactive-selected-line: rgba(209, 209, 214, 0.42);
  --interactive-active-border: rgba(242, 242, 247, 0.62);
  --interactive-hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(242, 242, 247, 0.24);
  --interactive-selected-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(242, 242, 247, 0.46), 0 0 0 4px rgba(209, 209, 214, 0.14), inset 4px 0 0 var(--accent);
  --interactive-control-selected-shadow: 0 8px 18px rgba(0, 0, 0, 0.14), inset 0 -3px 0 var(--accent);
  --interactive-row-hover-shadow: inset 2px 0 0 rgba(242, 242, 247, 0.52), inset 0 1px 0 rgba(242, 242, 247, 0.18), inset 0 -1px 0 rgba(242, 242, 247, 0.18);
  --interactive-row-selected-shadow: inset 4px 0 0 var(--accent), inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line), 0 8px 22px rgba(0, 0, 0, 0.26);
  --sticky-scroll-offset: 112px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.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: 28px;
}

.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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  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 {
  width: 100%;
  justify-content: center;
  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__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;
  z-index: 28;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 88vw);
  max-height: 340px;
  overflow: 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__chip {
  display: inline-flex;
  align-items: center;
  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__clear {
  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 {
  display: grid;
  gap: 4px;
}

.multiSelectFilter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  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);
}

.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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  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;
}

.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: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  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;
  }
}

.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));
}

.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: #1c1c1e;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

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

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

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

.kpiCard__value {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 760;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.kpiCard__delta {
  margin-top: 6px;
  font-size: 11px;
  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: #1c1c1e;
}

.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);
}

.chartCard h3,
.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__control,
.sectionHeader span,
.panelHeader span {
  color: var(--subtle);
  font-size: 12px;
  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: 12px;
  line-height: 1.25;
}

.barRow__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  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: 12px;
  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:
    linear-gradient(to top, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 33%,
    var(--panel-soft);
}

.trendChart__point {
  flex: 1;
  min-width: 18px;
  border-radius: 4px 4px 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: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.18;
  white-space: normal;
  overflow: hidden;
}

.statusBadge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  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: 11px;
}

.statusBadge--success {
  color: #d5ffe1;
  background: rgba(105, 211, 141, 0.17);
  border-color: rgba(105, 211, 141, 0.44);
}

.statusBadge--warning {
  color: #ffe8ba;
  background: rgba(240, 189, 95, 0.18);
  border-color: rgba(240, 189, 95, 0.48);
}

.statusBadge--danger {
  color: #ffd4d4;
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.52);
}

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

.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;
}

.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--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--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);
}

.kpiCard[role="button"]:focus-visible,
.reviewQueueItem:focus-visible,
.callsMobileCard__details summary:focus-visible,
.sideDrawer:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.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-soft);
  --dense-table-surface-clear: rgba(15, 21, 27, 0);
  --dense-table-edge-shadow: rgba(0, 0, 0, 0.3);
  max-width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--dense-table-surface) 34%, var(--dense-table-surface-clear)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--dense-table-surface) 34%, var(--dense-table-surface-clear)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, var(--dense-table-edge-shadow), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, var(--dense-table-edge-shadow), transparent) right center / 14px 100% no-repeat scroll,
    var(--dense-table-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.denseTableWrap:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

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

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

.denseTable td {
  height: 48px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid rgba(38, 49, 59, 0.55);
  color: #d7dee5;
  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,
.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(--dense-table-header-surface);
}

.denseTable th.isStickyRightColumn,
.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(--dense-table-header-surface);
}

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

.denseTable tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

.denseTable tr.isClickable {
  cursor: pointer;
}

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

.denseTable tr.isClickable:focus-visible td {
  background: rgba(209, 209, 214, 0.1);
}

.denseTable tr.isClickable:focus-visible td:first-child {
  box-shadow: inset 4px 0 0 var(--accent), var(--focus-ring);
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td,
.denseTable tr:focus-within td {
  background: rgba(209, 209, 214, 0.08);
}

.denseTable tr.isClickable:hover td:first-child,
.denseTable tr:focus-within td:first-child {
  box-shadow: inset 3px 0 0 rgba(209, 209, 214, 0.55);
}

.denseTable tr.isSelected td,
.denseTable tr:has(input[type="checkbox"]:checked) td {
  background: rgba(209, 209, 214, 0.13);
}

.denseTable tr.isSelected td:first-child,
.denseTable tr:has(input[type="checkbox"]:checked) td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.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: 9px;
    font-weight: 800;
    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);
}

.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: minmax(220px, 1.4fr) repeat(5, minmax(150px, 1fr)) 112px;
  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: 100%;
  min-height: 34px;
  margin-top: 0;
  padding: 0 12px;
  white-space: nowrap;
}

.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: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
}

.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);
}

.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;
}

.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;
}

.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;
}

.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,
  .analyticsGrowthGrid {
    grid-template-columns: 1fr;
  }

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

@container (max-width: 720px) {
  .analyticsFilterPanel,
  .analyticsMetricsKpis,
  .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;
}

.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;
}

.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: -5;
}

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

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

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

.singleCallScreen > .callReviewContext {
  order: 2;
}

.singleCallScreen > .statusStrip {
  order: 3;
}

.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: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
  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;
}

.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;
}

.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;
}

.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;
}

.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));
  }
}

@media (max-width: 720px) {
  .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;
}

.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);
}

.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;
}

.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));
  }

  .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;
  }

  .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;
    padding: 0;
    border-top: 0;
  }

  .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 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --nav: #ffffff;
  --panel: #ffffff;
  --panel-strong: #fbfbfd;
  --panel-soft: #f6f6fa;
  --line: #d1d1d6;
  --line-strong: #aeaeb2;
  --line-soft: #e5e5ea;
  --text: #1c1c1e;
  --muted: #636366;
  --subtle: #8e8e93;
  --accent: #6e6e73;
  --accent-strong: #3a3a3c;
  --accent-soft: rgba(110, 110, 115, 0.1);
  --success: #248a3d;
  --success-bg: rgba(52, 199, 89, 0.11);
  --warning: #b56b00;
  --warning-bg: rgba(255, 159, 10, 0.13);
  --danger: #d70015;
  --danger-bg: rgba(255, 59, 48, 0.1);
  --muted-bg: rgba(142, 142, 147, 0.11);
  --control-bg: #ffffff;
  --focus-ring: 0 0 0 3px rgba(110, 110, 115, 0.18);
  --shadow: 0 20px 48px rgba(28, 28, 30, 0.14);
  --shadow-soft: 0 8px 20px rgba(28, 28, 30, 0.08);
  --interactive-hover-bg: rgba(110, 110, 115, 0.08);
  --interactive-selected-bg: rgba(110, 110, 115, 0.13);
  --interactive-selected-wash: rgba(110, 110, 115, 0.16);
  --interactive-hover-line: rgba(110, 110, 115, 0.14);
  --interactive-selected-line: rgba(110, 110, 115, 0.28);
  --interactive-active-border: rgba(110, 110, 115, 0.5);
  --interactive-hover-shadow: 0 10px 24px rgba(28, 28, 30, 0.11), 0 0 0 1px rgba(110, 110, 115, 0.18);
  --interactive-selected-shadow: 0 14px 30px rgba(28, 28, 30, 0.14), 0 0 0 1px rgba(110, 110, 115, 0.32), inset 3px 0 0 var(--accent);
  --interactive-control-selected-shadow: 0 8px 18px rgba(28, 28, 30, 0.09), inset 0 -3px 0 var(--accent);
  --interactive-row-hover-shadow: inset 3px 0 0 rgba(110, 110, 115, 0.42), inset 0 1px 0 rgba(110, 110, 115, 0.12), inset 0 -1px 0 rgba(110, 110, 115, 0.12);
  --interactive-row-selected-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line), 0 8px 18px rgba(28, 28, 30, 0.11);
}

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: #155c32;
  background: rgba(35, 122, 69, 0.1);
  border-color: rgba(35, 122, 69, 0.24);
}

.statusBadge--warning {
  color: #7b4a0a;
  background: rgba(167, 101, 17, 0.11);
  border-color: rgba(167, 101, 17, 0.24);
}

.statusBadge--danger {
  color: #8c2525;
  background: rgba(185, 56, 56, 0.1);
  border-color: rgba(185, 56, 56, 0.24);
}

.statusBadge--muted,
.statusBadge--neutral {
  color: #43515d;
  background: rgba(95, 111, 125, 0.1);
  border-color: rgba(95, 111, 125, 0.18);
}

.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: #ffffff;
  --dense-table-header-surface: #f4f7f9;
  --dense-table-surface-clear: rgba(255, 255, 255, 0);
  --dense-table-edge-shadow: rgba(95, 111, 125, 0.22);
  border-color: var(--line);
}

.denseTable th {
  background: #f4f7f9;
  color: #536373;
  border-color: var(--line);
}

.denseTable td {
  color: #26323d;
  border-color: var(--line-soft);
}

.denseTable tr:nth-child(even) td {
  background: #fbfcfd;
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td,
.denseTable tr:focus-within td {
  background: #eef7f6;
}

.denseTable tr.isSelected td,
.denseTable tr:has(input[type="checkbox"]:checked) td {
  background: #e8f4f2;
}

.kpiCard {
  min-height: 86px;
}

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

.chartCard,
.kpiCard,
.callHero,
.detailMain,
.detailGrid--single,
.summaryPanel,
.passportPanel,
.insightPanel,
.uploadPanel,
.tablePanel {
  background: #ffffff;
}

.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;
}

.barRow__track,
.managerSnapshotBox,
.queueHint,
.operationalNoteBox pre,
.multiSelectFilter__menu,
.stageRow,
.queueRow,
.evidenceAnchor,
.transcriptRow,
.scoreBlock {
  background: #f8fafb;
  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"] {
  color-scheme: dark;
  --bg: #111113;
  --nav: #1c1c1e;
  --panel: #1c1c1e;
  --panel-strong: #2c2c2e;
  --panel-soft: #161719;
  --line: #343438;
  --line-strong: #48484a;
  --line-soft: #28282b;
  --text: #f5f5f7;
  --muted: #c7c7cc;
  --subtle: #8e8e93;
  --accent: #d1d1d6;
  --accent-strong: #f2f2f7;
  --accent-soft: rgba(209, 209, 214, 0.16);
  --success: #32d674;
  --success-bg: rgba(50, 214, 116, 0.13);
  --warning: #ffd60a;
  --warning-bg: rgba(255, 214, 10, 0.14);
  --danger: #ff453a;
  --danger-bg: rgba(255, 69, 58, 0.15);
  --muted-bg: rgba(142, 142, 147, 0.12);
  --control-bg: #17181b;
  --focus-ring: 0 0 0 3px rgba(209, 209, 214, 0.24);
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.18);
  --interactive-hover-bg: rgba(209, 209, 214, 0.14);
  --interactive-selected-bg: rgba(209, 209, 214, 0.18);
  --interactive-selected-wash: rgba(209, 209, 214, 0.22);
  --interactive-hover-line: rgba(242, 242, 247, 0.24);
  --interactive-selected-line: rgba(209, 209, 214, 0.42);
  --interactive-active-border: rgba(242, 242, 247, 0.62);
  --interactive-hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(242, 242, 247, 0.24);
  --interactive-selected-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(242, 242, 247, 0.46), 0 0 0 4px rgba(209, 209, 214, 0.14), inset 4px 0 0 var(--accent);
  --interactive-control-selected-shadow: 0 8px 18px rgba(0, 0, 0, 0.14), inset 0 -3px 0 var(--accent);
  --interactive-row-hover-shadow: inset 2px 0 0 rgba(242, 242, 247, 0.52), inset 0 1px 0 rgba(242, 242, 247, 0.18), inset 0 -1px 0 rgba(242, 242, 247, 0.18);
  --interactive-row-selected-shadow: inset 4px 0 0 var(--accent), inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line), 0 8px 22px rgba(0, 0, 0, 0.26);
}

: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: #d5ffe1;
  background: rgba(105, 211, 141, 0.17);
  border-color: rgba(105, 211, 141, 0.44);
}

:root[data-theme="dark"] .statusBadge--warning {
  color: #ffe8ba;
  background: rgba(240, 189, 95, 0.18);
  border-color: rgba(240, 189, 95, 0.48);
}

:root[data-theme="dark"] .statusBadge--danger {
  color: #ffd4d4;
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.52);
}

:root[data-theme="dark"] .statusBadge--muted,
:root[data-theme="dark"] .statusBadge--neutral {
  color: #d2dbe4;
  background: rgba(141, 154, 168, 0.13);
  border-color: rgba(141, 154, 168, 0.28);
}

: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--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"] .denseTableWrap,
:root[data-theme="dark"] .barRow__track,
: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"] .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: #1c1c1e;
  --dense-table-header-surface: var(--panel-soft);
  --dense-table-surface-clear: rgba(16, 22, 29, 0);
  --dense-table-edge-shadow: rgba(0, 0, 0, 0.32);
  background:
    linear-gradient(to right, var(--dense-table-surface) 34%, var(--dense-table-surface-clear)) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--dense-table-surface) 34%, var(--dense-table-surface-clear)) right center / 28px 100% no-repeat local,
    linear-gradient(to right, var(--dense-table-edge-shadow), transparent) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left, var(--dense-table-edge-shadow), transparent) right center / 14px 100% no-repeat scroll,
    var(--dense-table-surface);
}

:root[data-theme="dark"] .denseTable th {
  background: var(--panel-soft);
  color: #aeb8c2;
  border-color: var(--line);
}

:root[data-theme="dark"] .denseTable td {
  color: #d7dee5;
  border-color: rgba(38, 49, 59, 0.55);
}

:root[data-theme="dark"] .denseTable tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

:root[data-theme="dark"] .denseTable tbody tr:hover td,
:root[data-theme="dark"] .denseTable tr.isClickable:hover td,
:root[data-theme="dark"] .denseTable tr:focus-within td {
  background: rgba(209, 209, 214, 0.08);
}

:root[data-theme="dark"] .denseTable tr.isSelected td,
:root[data-theme="dark"] .denseTable tr:has(input[type="checkbox"]:checked) td {
  background: rgba(209, 209, 214, 0.13);
}

:root[data-theme="dark"] .kpiCard:hover {
  background: #151d25;
  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(--focus-ring);
}

.kpiCard.isSelected,
.kpiCard--clickable:hover {
  border-color: var(--line-strong);
}

.kpiCard__action {
  margin-top: 10px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 760;
}

.barRow--clickable {
  appearance: none;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.barRow--clickable:hover,
.barRow--clickable:focus-visible {
  border-color: var(--line);
  background: var(--panel-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: 22px;
  line-height: 1;
}

.matrixSettingsScreen .kpiCard__delta {
  margin-top: 4px;
  font-size: 11px;
}

.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 .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;
  }
}

.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: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  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: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.reviewQueueFilterGroup .filterChip {
  flex: 1 1 128px;
  min-width: 0;
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.15;
  white-space: normal;
}

.reviewQueueFilterGroup > span {
  flex: 1 0 100%;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.reviewDeskLayout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.reviewQueuePanel,
.reviewCallPanel {
  min-width: 0;
}

.reviewQueuePanel {
  position: sticky;
  top: 16px;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.reviewQueueSearch {
  width: 100%;
  min-width: 0;
  margin: 0 0 12px;
}

.reviewQueueFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px;
}

.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;
  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: pointer;
  padding: 11px;
  text-align: left;
}

.reviewQueueItem:hover,
.reviewQueueItem.isActive {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.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.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 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.25;
}

.reviewQueueItem__reason {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.reviewQueueItem__reasonLabel {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.reviewQueueItem__meta span {
  color: var(--subtle);
  font-size: 11px;
  line-height: 1.2;
}

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

.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;
}

.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;
}

.reviewNextActionPanel__action {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  border-left: 1px solid var(--line-soft);
  padding-left: 12px;
}

.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(2, minmax(0, 1fr));
  gap: 12px;
}

.reviewDeskBlock {
  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;
}

.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%;
  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;
}

.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;
}

.reviewDecisionPrep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 9px 10px;
}

.reviewDecisionPrep > div:first-child {
  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;
}

.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__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:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.reviewNotice {
  margin: 0;
}

@media (max-width: 1320px) {
  .reviewDeskLayout,
  .reviewDeskContent {
    grid-template-columns: 1fr;
  }

  .reviewQueuePanel {
    position: static;
    max-height: none;
  }

  .reviewQueueList {
    max-height: 420px;
  }

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

@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;
  }

  .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;
  }

  .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;
  }

  .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;
  }

  .reviewDecisionPrep {
    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: 7px;
  background-color: var(--panel);
}

.modelCostScreen .denseTable th {
  height: 36px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  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: inset 3px 0 0 rgba(141, 154, 168, 0.36);
  }

  .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: 6px;
    background: var(--panel);
  }

  .modelRegistryBucket .denseTable--mobileLabels td[data-label]::before {
    color: var(--muted);
    font-size: 10px;
  }

  .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: var(--panel-soft);
  }

  .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: 13px;
  }

  .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;
}

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

  .periodSummaryToolbar__actions {
    justify-content: flex-start;
  }

  .periodSummaryGrid,
  .periodGrowthInsightsGrid,
  .periodSummaryKpis {
    grid-template-columns: 1fr;
  }

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

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

  .periodSummaryToolbar__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .periodSummaryToolbar__actions .secondaryButton,
  .periodSummaryToolbar__actions .tableAction {
    width: 100%;
  }

  .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 */
.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;
}

.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: 23px;
}

.kpiCard__delta {
  margin-top: 4px;
  line-height: 1.35;
}

.statusBadge {
  align-items: center;
  min-height: 22px;
  border-color: rgba(141, 154, 168, 0.22);
  background: rgba(141, 154, 168, 0.1);
  font-weight: 720;
  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-soft);
  --dense-table-edge-shadow: rgba(37, 48, 60, 0.16);
  box-shadow: none;
}

.denseTable th {
  height: 34px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.denseTable td {
  height: 42px;
  padding: 6px 9px;
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td,
.denseTable tr:focus-within td {
  background: var(--accent-soft);
}

.denseTable tr.isClickable:hover td:first-child,
.denseTable tr:focus-within td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

.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: 12px;
  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: 12px;
  font-weight: 800;
}

.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: 12px;
  font-weight: 720;
  line-height: 1.35;
}

.emptyTableState p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  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,
.denseTable tbody tr:focus-within td {
  background: var(--interactive-hover-bg);
}

.denseTable tbody tr:hover td:not(:first-child),
.denseTable tbody tr.isClickable:hover td:not(:first-child),
.denseTable tbody tr:focus-within td:not(:first-child) {
  box-shadow: inset 0 1px 0 var(--interactive-hover-line), inset 0 -1px 0 var(--interactive-hover-line);
}

.denseTable tbody tr.isClickable:hover td:first-child,
.denseTable tbody tr:focus-within td:first-child {
  box-shadow: var(--interactive-row-hover-shadow);
}

.denseTable tbody tr.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--interactive-selected-bg);
  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: inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line);
}

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

.denseTable tbody tr.isSelected td.isStickyColumn,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td.isStickyColumn {
  background: var(--interactive-selected-bg);
}

.reviewQueueItem:hover,
.reviewQueueItem:focus-visible {
  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.isPriority:hover,
.reviewQueueItem.isOkScore:hover,
.reviewQueueItem.isDone:hover,
.reviewQueueItem.isSkipped:hover,
.reviewQueueItem.isReopened: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.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,
.barRow--clickable:hover,
.barRow--clickable:focus-visible,
button.scrutexBarRow:hover {
  border-color: var(--interactive-active-border);
  box-shadow: var(--interactive-hover-shadow);
  outline: none;
}

.scrutexBarRow.isSelected,
.kpiCard.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--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: linear-gradient(90deg, rgba(242, 242, 247, 0.15), rgba(242, 242, 247, 0.08));
  color: #f2f2f7;
  border-bottom-color: rgba(242, 242, 247, 0.24);
}

: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-row-hover-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: inset 0 1px 0 var(--interactive-hover-line), inset 0 -1px 0 var(--interactive-hover-line);
}

:root[data-theme="dark"] .denseTable tbody tr.isSelected td,
:root[data-theme="dark"] .denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: linear-gradient(90deg, rgba(209, 209, 214, 0.24), rgba(209, 209, 214, 0.16));
  color: #f5f5f7;
  border-bottom-color: rgba(242, 242, 247, 0.42);
}

: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: linear-gradient(90deg, rgba(209, 209, 214, 0.28), rgba(209, 209, 214, 0.18));
}

: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"] .barRow--clickable:hover,
:root[data-theme="dark"] .barRow--clickable:focus-visible,
:root[data-theme="dark"] button.scrutexBarRow:not(.isSelected):hover,
:root[data-theme="dark"] .kpiCard--clickable: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"] .queueRow.isActive,
:root[data-theme="dark"] .scrutexBarRow.isSelected,
:root[data-theme="dark"] .kpiCard.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"] .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%;
  }
}

:root,
:root[data-theme="dark"] {
  --glass-surface: rgba(28, 28, 30, 0.7);
  --glass-surface-strong: rgba(36, 36, 38, 0.82);
  --glass-surface-soft: rgba(28, 28, 30, 0.44);
  --glass-control: rgba(28, 28, 30, 0.58);
  --glass-line: rgba(255, 255, 255, 0.12);
  --glass-line-strong: rgba(242, 242, 247, 0.38);
  --glass-highlight: rgba(255, 255, 255, 0.14);
  --glass-active: rgba(209, 209, 214, 0.16);
  --glass-active-strong: rgba(209, 209, 214, 0.24);
  --glass-active-text: #f5f5f7;
  --glass-icon: rgba(209, 209, 214, 0.18);
  --glass-icon-line: rgba(242, 242, 247, 0.4);
  --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 var(--glass-highlight);
  --glass-control-shadow: 0 7px 18px rgba(0, 0, 0, 0.14), inset 0 1px 0 var(--glass-highlight);
  --glass-active-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(242, 242, 247, 0.34), 0 0 0 4px rgba(209, 209, 214, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] {
  --glass-surface: rgba(255, 255, 255, 0.74);
  --glass-surface-strong: rgba(255, 255, 255, 0.88);
  --glass-surface-soft: rgba(255, 255, 255, 0.54);
  --glass-control: rgba(255, 255, 255, 0.7);
  --glass-line: rgba(60, 60, 67, 0.13);
  --glass-line-strong: rgba(110, 110, 115, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.82);
  --glass-active: rgba(110, 110, 115, 0.13);
  --glass-active-strong: rgba(110, 110, 115, 0.2);
  --glass-active-text: #2c2c2e;
  --glass-icon: rgba(110, 110, 115, 0.12);
  --glass-icon-line: rgba(110, 110, 115, 0.24);
  --glass-shadow: 0 10px 26px rgba(28, 28, 30, 0.07), inset 0 1px 0 var(--glass-highlight);
  --glass-control-shadow: 0 7px 18px rgba(28, 28, 30, 0.06), inset 0 1px 0 var(--glass-highlight);
  --glass-active-shadow: 0 12px 26px rgba(28, 28, 30, 0.1), 0 0 0 1px rgba(110, 110, 115, 0.22), 0 0 0 4px rgba(110, 110, 115, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body {
  background: var(--bg);
}

.leftNav,
.topBar,
.directionBriefing,
.scopeOverviewBar,
.guidanceStrip,
.tablePanel,
.chartCard,
.kpiCard,
.uploadPanel,
.summaryPanel,
.passportPanel,
.insightPanel,
.managerProfileCard,
.placeholderPanel,
.detailMain,
.detailGrid--single,
.operationalPanel,
.calibrationGuide,
.workQueueFilters,
.denseTableWrap,
.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);
}

.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,
.kpiCard.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);
}

.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,
.statusBadge::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);
}

.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,
.denseTable tbody tr:focus-within td {
  background: var(--interactive-hover-bg);
}

.denseTable tbody tr.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--interactive-selected-bg);
  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"] .barRow--clickable:hover,
:root[data-theme="dark"] button.scrutexBarRow:not(.isSelected):hover,
:root[data-theme="dark"] .kpiCard--clickable: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);
}

.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. */
:root {
  color-scheme: dark;
  --bg: #111113;
  --nav: #1c1c1e;
  --panel: #1c1c1e;
  --panel-strong: #242426;
  --panel-soft: #171719;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(242, 242, 247, 0.3);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #f5f5f7;
  --muted: #c7c7cc;
  --subtle: #8e8e93;
  --accent: #d1d1d6;
  --accent-strong: #f2f2f7;
  --accent-soft: rgba(209, 209, 214, 0.13);
  --control-bg: rgba(255, 255, 255, 0.055);
  --focus-ring: 0 0 0 3px rgba(242, 242, 247, 0.2);
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.16);
  --interactive-hover-bg: rgba(242, 242, 247, 0.075);
  --interactive-selected-bg: rgba(209, 209, 214, 0.14);
  --interactive-selected-wash: rgba(209, 209, 214, 0.18);
  --interactive-hover-line: rgba(242, 242, 247, 0.18);
  --interactive-selected-line: rgba(242, 242, 247, 0.26);
  --interactive-active-border: rgba(242, 242, 247, 0.38);
  --interactive-hover-shadow: 0 8px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --interactive-selected-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(242, 242, 247, 0.18), inset 3px 0 0 rgba(242, 242, 247, 0.72);
  --interactive-control-selected-shadow: 0 8px 18px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(242, 242, 247, 0.16), inset 0 -2px 0 rgba(242, 242, 247, 0.72);
  --interactive-row-hover-shadow: inset 2px 0 0 rgba(242, 242, 247, 0.44), inset 0 1px 0 rgba(242, 242, 247, 0.12), inset 0 -1px 0 rgba(242, 242, 247, 0.12);
  --interactive-row-selected-shadow: inset 3px 0 0 rgba(242, 242, 247, 0.7), inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line), 0 7px 18px rgba(0, 0, 0, 0.18);
  --surface-shadow: 0 1px 0 rgba(255, 255, 255, 0.035);
  --titanium-nav: rgba(28, 28, 30, 0.86);
  --titanium-bar: rgba(28, 28, 30, 0.68);
  --titanium-glass: rgba(28, 28, 30, 0.72);
  --titanium-glass-strong: rgba(36, 36, 38, 0.82);
  --titanium-control: rgba(255, 255, 255, 0.055);
  --titanium-line: rgba(255, 255, 255, 0.12);
  --titanium-line-strong: rgba(242, 242, 247, 0.3);
  --titanium-highlight: rgba(255, 255, 255, 0.1);
  --titanium-active: rgba(209, 209, 214, 0.13);
  --titanium-active-strong: rgba(242, 242, 247, 0.18);
  --titanium-icon: rgba(209, 209, 214, 0.16);
  --titanium-icon-line: rgba(242, 242, 247, 0.28);
  --titanium-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--titanium-highlight);
  --titanium-pop-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--titanium-highlight);
}

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

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --nav: #ffffff;
  --panel: #ffffff;
  --panel-strong: #fbfbfd;
  --panel-soft: #f1f1f4;
  --line: rgba(60, 60, 67, 0.14);
  --line-strong: rgba(60, 60, 67, 0.26);
  --line-soft: rgba(60, 60, 67, 0.1);
  --text: #1c1c1e;
  --muted: #636366;
  --subtle: #8e8e93;
  --accent: #5f5f63;
  --accent-strong: #2c2c2e;
  --accent-soft: rgba(60, 60, 67, 0.09);
  --control-bg: rgba(255, 255, 255, 0.78);
  --focus-ring: 0 0 0 3px rgba(60, 60, 67, 0.16);
  --shadow: 0 18px 42px rgba(28, 28, 30, 0.12);
  --shadow-soft: 0 8px 20px rgba(28, 28, 30, 0.07);
  --interactive-hover-bg: rgba(60, 60, 67, 0.06);
  --interactive-selected-bg: rgba(60, 60, 67, 0.1);
  --interactive-selected-wash: rgba(60, 60, 67, 0.13);
  --interactive-hover-line: rgba(60, 60, 67, 0.12);
  --interactive-selected-line: rgba(60, 60, 67, 0.2);
  --interactive-active-border: rgba(60, 60, 67, 0.28);
  --interactive-hover-shadow: 0 7px 16px rgba(28, 28, 30, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --interactive-selected-shadow: 0 9px 22px rgba(28, 28, 30, 0.09), 0 0 0 1px rgba(60, 60, 67, 0.12), inset 3px 0 0 rgba(44, 44, 46, 0.7);
  --interactive-control-selected-shadow: 0 7px 16px rgba(28, 28, 30, 0.08), 0 0 0 1px rgba(60, 60, 67, 0.12), inset 0 -2px 0 rgba(44, 44, 46, 0.68);
  --interactive-row-hover-shadow: inset 2px 0 0 rgba(60, 60, 67, 0.34), inset 0 1px 0 rgba(60, 60, 67, 0.08), inset 0 -1px 0 rgba(60, 60, 67, 0.08);
  --interactive-row-selected-shadow: inset 3px 0 0 rgba(44, 44, 46, 0.62), inset 0 1px 0 var(--interactive-selected-line), inset 0 -1px 0 var(--interactive-selected-line), 0 7px 16px rgba(28, 28, 30, 0.07);
  --surface-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(28, 28, 30, 0.045);
  --titanium-nav: rgba(255, 255, 255, 0.9);
  --titanium-bar: rgba(255, 255, 255, 0.72);
  --titanium-glass: rgba(255, 255, 255, 0.78);
  --titanium-glass-strong: rgba(255, 255, 255, 0.9);
  --titanium-control: rgba(255, 255, 255, 0.7);
  --titanium-line: rgba(60, 60, 67, 0.13);
  --titanium-line-strong: rgba(60, 60, 67, 0.24);
  --titanium-highlight: rgba(255, 255, 255, 0.88);
  --titanium-active: rgba(60, 60, 67, 0.08);
  --titanium-active-strong: rgba(60, 60, 67, 0.13);
  --titanium-icon: rgba(60, 60, 67, 0.1);
  --titanium-icon-line: rgba(60, 60, 67, 0.2);
  --titanium-shadow: 0 12px 28px rgba(28, 28, 30, 0.075), inset 0 1px 0 var(--titanium-highlight);
  --titanium-pop-shadow: 0 10px 22px rgba(28, 28, 30, 0.08), inset 0 1px 0 var(--titanium-highlight);
}

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,
.kpiCard.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);
}

.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,
.statusBadge::before {
  border: 1px solid var(--titanium-icon-line);
  box-shadow: 0 0 0 3px var(--accent-soft), inset 0 1px 0 var(--titanium-highlight);
}

.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. */
:root {
  --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);
}

:root[data-theme="light"] {
  --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);
}

.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-soft);
  --dense-table-surface-clear: rgba(28, 28, 30, 0);
  --dense-table-edge-shadow: rgba(0, 0, 0, 0.18);
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--surface-shadow);
  backdrop-filter: none;
}

:root[data-theme="light"] .denseTableWrap {
  --dense-table-surface-clear: rgba(255, 255, 255, 0);
  --dense-table-edge-shadow: rgba(28, 28, 30, 0.08);
}

.denseTable th {
  background: var(--panel-soft);
  color: var(--muted);
  border-color: var(--line);
}

.denseTable td {
  color: var(--text);
  border-color: var(--line-soft);
}

.denseTable tr:nth-child(even) td {
  background: rgba(142, 142, 147, 0.035);
}

.denseTable tbody tr:hover td,
.denseTable tr.isClickable:hover td,
.denseTable tr:focus-within td,
.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.isSelected td,
.denseTable tbody tr:has(input[type="checkbox"]:checked) td {
  background: var(--interactive-selected-bg);
  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);
}

.kpiCard--clickable:hover,
.managerViolationRow:hover,
.barRow--clickable:hover,
button.scrutexBarRow:not(.isSelected):hover {
  border-color: var(--interactive-active-border);
  background: var(--interactive-hover-bg);
  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: rgba(255, 69, 58, 0.38);
  background: var(--danger-bg);
  box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.08), inset 0 1px 0 var(--titanium-highlight);
}

.reviewViolationRow--critical .statusBadge::before,
.reviewViolationRow--high .statusBadge::before {
  background: var(--danger);
  border-color: rgba(255, 69, 58, 0.42);
}

: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. */
:root {
  --online: #63e08b;
  --online-text: #dff8e7;
  --online-bg: rgba(99, 224, 139, 0.14);
  --online-line: rgba(99, 224, 139, 0.34);
}

:root[data-theme="light"] {
  --online: #248a3d;
  --online-text: #1f6f35;
  --online-bg: rgba(52, 199, 89, 0.12);
  --online-line: rgba(36, 138, 61, 0.24);
}

.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"] {
  --online: #66d889;
  --online-text: #d8f4df;
  --online-bg: rgba(102, 216, 137, 0.075);
  --online-line: rgba(102, 216, 137, 0.2);
}

: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(--titanium-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    rgba(142, 142, 147, 0.1);
  color: var(--muted);
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.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: 11px;
}

.violationCodeBadge--danger {
  border-color: rgba(255, 69, 58, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 58%),
    rgba(255, 69, 58, 0.12);
  color: #ffb4ae;
  box-shadow: inset 3px 0 0 rgba(255, 69, 58, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.violationCodeBadge--warning {
  border-color: rgba(255, 214, 10, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    rgba(255, 214, 10, 0.095);
  color: #f1d377;
}

.violationCodeBadge--success {
  border-color: rgba(50, 214, 116, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    rgba(50, 214, 116, 0.09);
  color: #aeeaba;
}

.violationCodeBadge--muted,
.violationCodeBadge--neutral {
  color: var(--muted);
}

:root[data-theme="light"] .violationCodeBadge {
  border-color: rgba(60, 60, 67, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), transparent 62%),
    rgba(142, 142, 147, 0.08);
  color: #636366;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] .violationCodeBadge--danger {
  border-color: rgba(215, 0, 21, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), transparent 62%),
    rgba(255, 59, 48, 0.1);
  color: #a62020;
  box-shadow: inset 3px 0 0 rgba(215, 0, 21, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="light"] .violationCodeBadge--warning {
  border-color: rgba(181, 107, 0, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), transparent 62%),
    rgba(255, 159, 10, 0.11);
  color: #7b4a0a;
}

:root[data-theme="light"] .violationCodeBadge--success {
  border-color: rgba(36, 138, 61, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), transparent 62%),
    rgba(52, 199, 89, 0.1);
  color: #246b38;
}

/* 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(4, 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;
}

.callsTablePanel {
  overflow: hidden;
  padding: 10px;
}

.callsTablePanel .denseTable {
  font-size: 11px;
}

.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;
}

.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: 13px;
  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%;
}

.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) {
  .clientComplaintDetailPanel__grid {
    grid-template-columns: 1fr;
  }
}

.denseTableToolbar__copy span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  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: 10px;
  font-weight: 840;
  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: 7px;
  background: var(--control-bg);
  color: var(--text);
  font-size: 12px;
}

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

.denseTableQuickFilter__clear {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
}

.denseTableQuickFilter__clear:hover,
.denseTableQuickFilter__clear:focus-visible {
  border-color: var(--line);
  background: var(--interactive-hover-bg);
  color: var(--text);
  transform: translateY(-50%);
}

.denseTableQuickFilter em {
  color: var(--subtle);
  font-size: 10px;
  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: 10px;
  font-weight: 860;
  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: 9px;
    font-weight: 840;
    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,
  .denseTable--mobileLabels tbody tr:hover td,
  .denseTable--mobileLabels tr.isClickable:hover td,
  .denseTable--mobileLabels tr:focus-within td {
    background: transparent;
  }
}

@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;
}

.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,
  .chartCard,
  .kpiCard {
    border-radius: 7px;
  }

  .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: 11px;
    line-height: 1.25;
  }

  .kpiCard__value {
    margin-top: 7px;
    font-size: 22px;
  }

  .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;
  }

  .chartCard h3,
  .sectionHeader h2,
  .panelHeader h2,
  .summaryPanel h2 {
    font-size: 14px;
    line-height: 1.2;
  }

  .denseTable th {
    padding: 8px 9px;
    font-size: 10px;
  }

  .denseTable td {
    padding: 8px 9px;
    font-size: 12px;
  }
}