:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #18212f;
  --muted: #697386;
  --line: #d8dde6;
  --blue: #2f6df6;
  --green: #248a57;
  --amber: #b96208;
  --red: #b42318;
  --teal: #087f8c;
  --shadow: 0 14px 35px rgba(20, 30, 46, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

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

button,
.navButton {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
}

.navButton {
  display: grid;
  place-items: center;
  text-decoration: none;
}

button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.dangerBtn {
  border-color: #f3b4ad;
  color: var(--red);
}

.warningBtn {
  border-color: #f6d58b;
  color: var(--amber);
}

.authScreen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  background: var(--bg);
  padding: 24px;
}

body.authLocked .authScreen {
  display: grid;
}

body.authChecking .authScreen {
  display: none;
}

body.authLocked .portalShell {
  visibility: hidden;
}

.authCard {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 24px;
}

.authCard h1,
.authCard p {
  margin: 0;
}

.authCard p,
.helperText,
.portalHeader p,
.pageHero p,
.placeholderCard p,
.settingsCard header p,
.repMeta,
.teamCard p {
  color: var(--muted);
}

.authCard label,
.settingsCard label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 800;
}

.authCard input,
.settingsCard input:not([type="checkbox"]),
.settingsCard select,
.settingsCard textarea,
.tabControls input,
.tabControls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.brandMark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.portalShell {
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 24px 0 42px;
}

.portalHeader,
.brandRow,
.portalNav,
.tabBar,
.settingsCard header,
.settingsCard footer,
.teamCardHeader {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portalHeader,
.settingsCard header,
.settingsCard footer,
.teamCardHeader {
  justify-content: space-between;
}

.portalHeader {
  margin-bottom: 20px;
}

.portalNav,
.tabBar {
  gap: 8px;
}

.portalHeader h1,
.portalHeader p,
.pageHero h2,
.pageHero p,
.settingsCard h2,
.settingsCard p,
.teamCard p {
  margin: 0;
}

.pageHero,
.tabPanel,
.settingsCard,
.placeholderCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.pageHero {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.tabBar {
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.authCard > p,
.portalHeader .brandRow > div > p,
.pageHero > p,
.businessHeader > div > p,
.breakdownOverridePanel > header p,
.placeholderCard > p,
.settingsCard > header p {
  display: none;
}

.firstRoundHeader > div > p,
.secondRoundHeader > div > p,
.orientationHeader > div > p,
.recruitingSectionHeader > div > p,
.customerWorkflowHeader > div > p,
.metricsImportHeader > div > p {
  display: none;
}

.tabButton.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.tabPanel {
  min-height: 420px;
}

.placeholderGrid,
.settingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settingsGrid {
  align-items: start;
}

body.settingsPage .settingsGrid {
  grid-template-columns: minmax(360px, 0.85fr) minmax(480px, 1fr);
}

.settingsOverview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.settingsOverview article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.settingsOverview span,
.memberBase span,
.memberTeam span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settingsOverview strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.settingsWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  gap: 14px;
  align-items: start;
}

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

.placeholderCard,
.settingsCard {
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: none;
}

.placeholderCard strong {
  display: block;
  font-size: 22px;
}

.importCard label,
.fileDrop {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.importCard input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
}

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

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

.aliasRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.aliasRow strong,
.aliasRow small {
  display: block;
}

.aliasRow small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.aliasRow select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
}

.aliasActions {
  display: flex;
  gap: 6px;
}

.aliasActions .dangerButton {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
}

.aliasIgnoredHeader {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.aliasIgnoredHeader small {
  color: var(--muted);
}

.aliasRowIgnored {
  background: #f1f5f9;
  opacity: 0.9;
}

.aliasIgnoredBadge {
  justify-self: end;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.importHistoryItem {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.importHistoryItem strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importHistoryItem em {
  grid-column: 1 / -1;
  color: var(--amber);
  font-style: normal;
  font-weight: 800;
}

.importHistoryItem button {
  min-height: 34px;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #fff1f2;
  color: #9f1239;
  font-weight: 900;
}

.firstRoundHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}

.firstRoundHeader h3,
.firstRoundHeader p,
.interviewFormCard h4,
.interviewDecisionCard h4,
.dayRecapCard h4,
.firstRoundListCard h4 {
  margin: 0;
}

.firstRoundHeader p {
  max-width: 720px;
  margin-top: 6px;
  color: var(--muted);
}

.eyebrowText {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.firstRoundActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  justify-content: flex-end;
}

.firstRoundActions label,
.interviewFormGrid label,
.interviewDecisionCard label,
.fullLabel {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.firstRoundActions input,
.interviewFormGrid input,
.interviewFormGrid select,
.interviewDecisionCard select,
.fullLabel textarea,
.firstRoundListCard input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.interviewWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
  gap: 14px;
  margin: 14px 0;
}

.interviewFormCard,
.interviewDecisionCard,
.dayRecapCard,
.firstRoundListCard {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

.interviewFormCard header,
.dayRecapCard header,
.firstRoundListCard header {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
}

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

.interviewActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fullLabel textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.45;
  text-transform: none;
}

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

.ratingButtons button {
  display: flex;
  align-items: center;
  justify-content: start;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.ratingButtons button.active {
  border-color: #f4b400;
  background: #fff8dd;
  color: #8a5a00;
}

.ratingMeaning {
  min-height: 48px;
  margin: 0;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.starLegend {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.starLegend strong {
  color: var(--ink);
}

.dayRecapCard {
  margin: 14px 0;
  background: #f8fbff;
}

.dayRecapOutput {
  overflow: auto;
  max-height: 620px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  color: #223048;
  font-family: inherit;
  line-height: 1.5;
}

.recapTitle {
  border-bottom: 1px solid #e4eaf3;
  padding-bottom: 12px;
  color: #101828;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.recapSectionTitle {
  margin: 20px 0 8px;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recapSpacer {
  height: 5px;
}

.recapParagraph {
  margin: 8px 0;
  color: #475467;
  font-size: 14px;
  line-height: 1.65;
}

.recapQualityRead,
.recapAverageCommute {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 9px 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
}

.recapQualityRead {
  border-left: 4px solid #2563eb;
  background: #eff6ff;
  color: #1e3a8a;
}

.recapQualityRead strong,
.recapAverageCommute strong {
  flex: 0 0 auto;
}

.recapAverageCommute {
  border: 1px solid #e4e7ec;
  background: #f8fafc;
  color: #344054;
}

.recapAverageCommute.great {
  border-color: #a6f4c5;
  background: #ecfdf3;
  color: #027a48;
}

.recapAverageCommute.good {
  border-color: #bbefc9;
  background: #f0fdf4;
  color: #166534;
}

.recapAverageCommute.notIdeal {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #b45309;
}

.recapAverageCommute.concerning {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.recapBullet {
  display: flex;
  gap: 9px;
  margin: 6px 0;
  color: #344054;
  font-size: 14px;
}

.recapBullet > span {
  color: #2563eb;
}

.recapStarRow {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid #eef2f7;
  padding: 8px 4px;
  color: #475467;
  font-size: 13px;
}

.recapStarRow strong,
.recapStars {
  color: #f59e0b;
  letter-spacing: 0.04em;
}

.recapInterviewRow {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr);
  gap: 14px;
  border-top: 1px solid #e9eef5;
  padding: 12px 2px;
}

.recapInterviewIdentity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #101828;
}

.recapInterviewIdentity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recapInterviewDetails {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.recapDetailChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #d8e2f2;
  border-radius: 999px;
  background: #f8fafc;
  padding: 5px 9px;
  color: #344054;
  font-size: 12px;
  line-height: 1.25;
}

.recapDetailChip.accepted {
  border-color: #a6f4c5;
  background: #ecfdf3;
  color: #027a48;
}

.recapDetailChip.commute {
  border-color: #c7d7fe;
  background: #eef4ff;
  color: #3538cd;
}

.recapDetailChip.confidence {
  border-color: #fedf89;
  background: #fffaeb;
  color: #b54708;
}

.recapDetailChip.negative {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

.recapDetailChip em {
  opacity: 0.82;
  font-style: italic;
  font-weight: 650;
}

.firstRoundListCard {
  margin-top: 14px;
}

.firstRoundListCard header {
  align-items: center;
}

.firstRoundListCard input {
  max-width: 300px;
}

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

.interviewRow {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
  gap: 10px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.expandInterviewButton {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 999px;
  padding: 0;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.interviewRowMain {
  min-width: 0;
}

.interviewRow strong,
.interviewRow span,
.interviewRow small {
  display: block;
}

.interviewRow small {
  margin-top: 3px;
  color: var(--muted);
}

.ratingPill,
.decisionPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eef4ff;
  color: #194185;
  font-size: 12px;
  font-weight: 900;
}

.decisionPill.invited {
  background: #ecfdf3;
  color: #027a48;
}

.decisionPill.notInvited {
  background: #fff1f2;
  color: #9f1239;
}

.acceptedControls {
  display: flex;
  grid-column: 2 / -1;
  grid-row: 2;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid #edf1f7;
  padding-top: 9px;
}

.acceptedLabel {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.acceptedBubbleButtons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e8edf5;
  border-radius: 999px;
  background: #f8fbff;
  padding: 4px;
}

.acceptedBubbleButtons button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.acceptedBubbleButtons button.active.yes {
  background: #ecfdf3;
  color: #027a48;
}

.acceptedBubbleButtons button.active.pending {
  background: #eef4ff;
  color: #194185;
}

.acceptedBubbleButtons button.active.no {
  background: #fff7ed;
  color: #b45309;
}

.acceptedReasonSelect,
.acceptedTimingSelect,
.acceptedReasonOtherInput {
  width: auto;
  min-width: 145px;
  min-height: 34px;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  background: #fffaf5;
  color: #7c2d12;
  font-size: 12px;
  font-weight: 800;
  padding: 0 10px;
}

.acceptedTimingSelect {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.showConfidenceControl {
  display: grid;
  grid-template-columns: auto minmax(340px, 1fr) minmax(170px, 220px);
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
  border: 1px solid #d8e2f2;
  border-radius: 10px;
  background: #f8fbff;
  padding: 7px 9px;
}

.showConfidenceHeading {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

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

.showConfidenceSlider::before {
  display: none;
}

.showConfidenceTier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid #d8e2f2;
  border-radius: 8px;
  background: #fff;
  padding: 5px 7px;
  color: #667085;
}

.showConfidenceTier > span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border: 0;
  border-radius: 999px;
  background: #d0d5dd;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.showConfidenceTier strong {
  color: inherit;
  font-size: 9px;
  line-height: 1.15;
  text-align: left;
}

.showConfidenceTier:hover,
.showConfidenceTier:focus-visible {
  color: #194185;
}

.showConfidenceTier.active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #101828;
}

.showConfidenceTier.active > span {
  background: #2563eb;
}

.showConfidenceDescription {
  display: none;
}

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

.showConfidenceReasonLabel > span {
  color: #344054;
  font-size: 11px;
  font-weight: 900;
}

.showConfidenceReasonSelect,
.showConfidenceReasonOtherInput {
  width: 100%;
  min-height: 36px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #fff;
  color: #194185;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.showConfidenceReasonOtherInput {
  grid-column: 3;
  color: #344054;
}

#ratingReasonOther {
  width: 100%;
  min-height: 36px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
}

.secondRoundMuted {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #f8fafc;
  color: #98a2b3;
  font-size: 12px;
  font-weight: 900;
}

.interviewNotePreview {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  border-top: 1px solid #edf1f7;
  padding-top: 10px;
  color: #344054;
  line-height: 1.45;
}

.interviewNotePreview p {
  margin: 0;
}

.interviewRowActions {
  display: flex;
  grid-column: 5;
  grid-row: 1;
  gap: 8px;
}

.interviewRowActions button {
  min-height: 34px;
  border-radius: 999px;
}

.metricStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metricTile {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 14px;
}

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

.metricTile strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.metricsControls {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(180px, 260px) minmax(170px, auto);
  gap: 12px;
  margin-bottom: 16px;
}

.metricsControls label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.metricsControls input,
.metricsControls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.metricsActionButton {
  align-self: end;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.metricsActionButton.active {
  border-color: #f59e0b;
  background: #fff7ed;
  color: #9a3412;
}

.readOnlyMetricControl {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 900;
}

.payOnlyControls {
  max-width: 880px;
}

.weekRangePicker {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.weekRangePicker button {
  min-width: 0;
  padding: 0 10px;
}

.weekRangeButton {
  font-weight: 900;
}

.weekRangePicker input[type="date"] {
  grid-column: 1 / -1;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.metricsChartGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metricsSummaryGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metricsLinesHero {
  margin-bottom: 12px;
}

.metricsLinesHero article {
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #fff 58%, #ecfeff 100%);
  padding: 20px;
}

.metricsLinesHero span,
.breakevenRosterCard span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metricsLinesHero strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 44px;
  letter-spacing: -0.06em;
}

.metricsLinesHero p {
  margin: 0;
  color: #475467;
  font-weight: 800;
}

.metricsSummaryGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  padding: 14px;
}

.metricsSummaryGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metricsSummaryGrid strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.05em;
}

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

.paySummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.paySummaryGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.paySummaryGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paySummaryGrid strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.05em;
}

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

.breakevenRoster {
  margin: 0 0 16px;
}

.breakevenRosterCard {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfe;
  padding: 14px;
}

.breakevenRosterCard header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.breakevenRosterCard header strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
}

.breakevenRosterCard header small {
  color: var(--muted);
  text-align: right;
}

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

.breakevenRosterRows div {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.breakevenRosterRows div.active {
  border-color: #93c5fd;
  background: #eff6ff;
}

.breakevenRosterRows strong,
.breakevenRosterRows small {
  display: block;
}

.breakevenRosterRows strong {
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.breakevenRosterRows small {
  color: var(--muted);
}

.paySummaryGrid article.negativeMoney strong,
.financeLine.negative strong {
  color: #b42318;
}

.paySummaryGrid article.positiveMoney strong,
.financeLine.positive strong {
  color: #067647;
}

.businessHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.businessHeaderControls {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(180px, auto);
  gap: 10px;
  align-items: end;
}

.businessTeamPicker {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.businessTeamPicker select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}

.businessHeader strong {
  display: block;
  font-size: 24px;
}

.businessHeader p {
  margin: 4px 0 0;
  color: var(--muted);
}

.businessWorkspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.businessCard {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}

.businessCard h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

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

.expenseControls label {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(140px, 1fr) minmax(80px, auto);
  gap: 12px;
  align-items: center;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.expenseControls input[type="range"] {
  accent-color: var(--blue);
}

.expenseControls output {
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}

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

.financeLine {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
  color: var(--muted);
}

.financeLine strong {
  color: var(--ink);
}

.financeLine.total {
  border-bottom: 0;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
}

.metricChartCard {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 14px 10px;
  text-align: center;
}

.metricChartCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metricChartCard strong {
  font-size: 24px;
}

.chartPlaceholder {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) 0 32%, #dbe7ff 32% 100%);
}

.ringChart {
  background: conic-gradient(var(--blue) 0 0%, #dbe7ff 0% 100%);
}

.ringChart::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
}

.ringChart.amber {
  background: conic-gradient(var(--amber) 0 0%, #dbe7ff 0% 100%);
}

.ringChart.teal {
  background: conic-gradient(var(--teal) 0 0%, #dbe7ff 0% 100%);
}

.ringChart.green {
  background: conic-gradient(var(--green) 0 0%, #dbe7ff 0% 100%);
}

.metricsTableShell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metricsOverviewTableShell {
  max-height: calc(100vh - 24px);
  scrollbar-gutter: stable;
}

.metricsOverviewTableShell .metricsTable thead th {
  position: sticky;
  top: 0;
  z-index: 7;
  background: #f4f7fb;
  box-shadow: 0 1px 0 var(--line), 0 7px 14px rgba(15, 23, 42, 0.07);
}

.metricsOverviewTableShell .metricsTable thead th.metricStickyRep,
.metricsOverviewTableShell .metricsTable thead th.metricStickyCustomer {
  z-index: 10;
}

.metricsColorLegend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 2px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: #475467;
  font-size: 11px;
}

.metricsColorLegend strong {
  color: #1d2939;
  font-size: 11px;
}

.metricsColorLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.metricLegendSwatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 4px;
  background: #fff;
}

.metricLegendActivated { background: #ecfdf3; }
.metricLegendPending { background: #fff; }
.metricLegendOverdue { background: #fef9c3; }
.metricLegendCancelled { background: #fff1f2; }
.metricLegendMixed { background: #f3e8ff; }
.metricLegendNonPort { background: #ffedd5; border-color: #f97316; }
.metricLegendCpo { background: #eef2f6; border-color: #64748b; }
.metricLegendConnected { background: #ffedd5; border-color: #f97316; }

.metricsTable {
  min-width: 1320px;
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.metricsTable th,
.metricsTable td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

.metricsTable th {
  background: #f4f7fb;
  color: #344054;
  font-weight: 900;
}

.metricsTable td {
  color: var(--muted);
}

.metricsTable tr.metricActivated td {
  background: #ecfdf3;
  color: #065f46;
}

.metricsTable tr.metricCancelled td {
  background: #fff1f2;
  color: #991b1b;
}

.metricsTable tr.metricMixed td {
  background: #f3e8ff;
  color: #6b21a8;
}

.metricsTable tr.metricPendingOverdue td {
  background: #fef9c3;
  color: #854d0e;
}

.metricsTable tr.metricCpoOrder td {
  background: #eef2f6 !important;
  color: #334155 !important;
}

.metricsTable tr.metricNonPortSale td {
  background: #ffedd5 !important;
  color: #9a3412 !important;
}

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

.metricLineCountCell strong {
  color: inherit;
  font-size: 13px;
}

.metricExpandButton {
  display: inline-grid;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  padding: 0;
  font-size: 21px;
  line-height: 1;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.metricExpandButton:hover,
.metricExpandButton:focus-visible {
  border-color: var(--blue);
  background: #eff6ff;
  color: var(--blue);
}

.metricExpandButton[aria-expanded="true"] {
  transform: rotate(90deg);
}

.metricExpandPrompt,
.metricOrderStatus {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
}

.metricExpandPrompt {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #475467;
}

.metricStatusActivated {
  background: #d1fae5;
  color: #047857;
}

.metricStatusPending {
  background: #fef3c7;
  color: #92400e;
}

.metricStatusCancelled {
  background: #ffe4e6;
  color: #be123c;
}

.metricsTable tr.metricOrderSummaryRow td {
  border-bottom-width: 2px;
  font-weight: 750;
}

.metricsTable tr.metricOrderLineRow td {
  border-bottom-color: #dfe5ee;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 11px;
  vertical-align: middle;
}

.metricsTable tr.metricOrderLineRow:last-of-type td {
  border-bottom-width: 2px;
}

.metricLineDeviceCell,
.metricLineStatusCell {
  display: flex;
  align-items: center;
  gap: 3px;
}

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

.metricLineStatusCell small {
  color: inherit;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  white-space: normal;
}

.metricLineDeviceCell {
  gap: 7px;
  min-width: 190px;
}

.metricLineDeviceCell strong {
  color: inherit;
  font-size: 11px;
  white-space: normal;
}

.metricChildMarker {
  color: #3b82f6;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.metricDeviceBadge {
  width: fit-content;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metricConnectedDevice .metricDeviceBadge {
  background: #ffedd5;
  color: #9a3412;
}

.metricConnectedDevice .metricLineDeviceCell {
  border-left: 4px solid #f97316;
  padding-left: 8px;
}

.metricsTable tr.metricCpoLine td {
  background: #eef2f6 !important;
  color: #1e293b !important;
}

.metricCpoLine .metricDeviceBadge {
  background: #475569;
  color: #fff;
}

.metricCpoLine .metricLineDeviceCell {
  border-left: 4px solid #334155;
  padding-left: 8px;
}

.metricsTable tr.metricCpoLine td.metricStickyRep,
.metricsTable tr.metricCpoLine td.metricStickyCustomer {
  background: #eef2f6 !important;
}

.metricLineEmptyRow td {
  background: #f8fafc;
  color: var(--muted);
  font-style: italic;
}

.metricsTable th.metricStickyRep,
.metricsTable td.metricStickyRep {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 145px;
}

.metricsTable th.metricStickyCustomer,
.metricsTable td.metricStickyCustomer {
  position: sticky;
  left: 145px;
  z-index: 3;
  min-width: 185px;
  box-shadow: none;
  transition: box-shadow 140ms ease;
}

.metricsTableShell.isHorizontallyScrolled .metricsTable th.metricStickyCustomer,
.metricsTableShell.isHorizontallyScrolled .metricsTable td.metricStickyCustomer {
  box-shadow: 5px 0 7px rgba(15, 23, 42, 0.12);
}

.metricsTable th.metricStickyRep,
.metricsTable th.metricStickyCustomer {
  z-index: 5;
  background: #f4f7fb;
}

.metricsTable tr.metricPending td.metricStickyRep,
.metricsTable tr.metricPending td.metricStickyCustomer {
  background: #fff;
}

.metricsTable tr.metricActivated td.metricStickyRep,
.metricsTable tr.metricActivated td.metricStickyCustomer {
  background: #ecfdf3;
}

.metricsTable tr.metricCancelled td.metricStickyRep,
.metricsTable tr.metricCancelled td.metricStickyCustomer {
  background: #fff1f2;
}

.metricsTable tr.metricMixed td.metricStickyRep,
.metricsTable tr.metricMixed td.metricStickyCustomer {
  background: #f3e8ff;
}

.metricsTable tr.metricPendingOverdue td.metricStickyRep,
.metricsTable tr.metricPendingOverdue td.metricStickyCustomer {
  background: #fef9c3;
}

.metricsTable tr.metricCpoOrder td.metricStickyRep,
.metricsTable tr.metricCpoOrder td.metricStickyCustomer {
  background: #eef2f6 !important;
}

.metricsTable tr.metricNonPortSale td.metricStickyRep,
.metricsTable tr.metricNonPortSale td.metricStickyCustomer {
  background: #ffedd5 !important;
}

.metricsTable tr.metricOrderLineRow td.metricStickyRep {
  padding-left: 27px;
  font-weight: 650;
}

.metricsTable tr.metricOrderLineRow td.metricStickyRep::before {
  position: absolute;
  left: 11px;
  color: #94a3b8;
  content: "↳";
  font-size: 14px;
  font-weight: 900;
}

.productionLogTable {
  min-width: 1180px;
}

.productionLogTable th,
.productionLogTable td {
  vertical-align: top;
}

.productionLogCell {
  display: grid;
  gap: 2px;
}

.productionLogCell strong {
  color: var(--ink);
}

.productionLogCell small {
  color: var(--muted);
}

#productionLogTable {
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.productionOfficeSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.productionOfficeSummary div {
  border: 1px solid #cddbf1;
  border-radius: 10px;
  background: linear-gradient(145deg, #f7faff, #edf4ff);
  padding: 13px 14px;
}

.productionOfficeSummary span,
.productionTeamSection header span {
  display: block;
  color: #607087;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.productionOfficeSummary strong {
  display: block;
  margin-top: 5px;
  color: #173f9f;
  font-size: 24px;
}

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

.productionTeamSection {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.productionTeamSection > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #dbe4f2;
  background: #f7f9fd;
  padding: 12px 14px;
}

.productionTeamSection h3,
.productionTeamSection p {
  margin: 0;
}

.productionTeamSection h3 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 17px;
}

.productionTeamSection p {
  color: #607087;
  font-size: 12px;
  font-weight: 750;
}

.productionTeamTableWrap {
  overflow-x: auto;
}

.productionTeamSection .productionLogTable {
  border: 0;
}

.productionTeamSection .productionLogTable td:first-child small {
  display: block;
  margin-top: 2px;
  color: #2f6fd8;
  font-size: 10px;
  font-weight: 800;
}

.productionZeroRow td {
  background: #fbfcfe;
  color: #75839a;
}

.productionZero {
  color: #b0bac8;
}

.productionLogTeamTotal th,
.productionLogTeamTotal td {
  border-top: 2px solid #9db7e5;
  background: #f3f7fd;
  color: #244b8d;
  font-weight: 850;
}

.productionOfficeDailyTotals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  border: 1px solid #b9cdec;
  border-radius: 11px;
  background: #eef5ff;
  padding: 12px;
}

.productionOfficeDailyTotals > strong {
  grid-column: 1 / -1;
  color: #173f9f;
}

.productionOfficeDailyTotals > div {
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
}

.productionOfficeDailyTotals > div > span {
  display: block;
  margin-bottom: 4px;
  color: #607087;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.productionLogOfficeTotal th,
.productionLogOfficeTotal td {
  border-top: 2px solid #1d4ed8;
  background: #eff6ff;
  color: #173f9f;
  font-weight: 850;
}

.productionLogOfficeTotal .productionLogCell small {
  color: #49639a;
}

@media (max-width: 700px) {
  .productionOfficeSummary,
  .productionOfficeDailyTotals {
    grid-template-columns: 1fr;
  }

  .productionTeamSection > header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.tabControls,
.repCreate,
.teamCreate,
.repModalFields,
.repModalActions {
  display: grid;
  gap: 10px;
}

.tabControls {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  margin-bottom: 14px;
}

.repCreate,
.teamCreate {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

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

body.settingsPage .addRepActions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

body.settingsPage .addRepActions button {
  min-width: 150px;
}

body.settingsPage .teamCreate {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body.settingsPage .teamCreate label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body.settingsPage .memberDirectoryCard {
  min-height: 640px;
}

body.settingsPage .teamSettingsCard {
  min-height: 0;
}

.memberCardHeader {
  align-items: center;
}

.addRepPanel {
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f7f9ff;
  padding: 12px;
}

.memberToolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto);
  gap: 10px;
}

.repList,
.teamList,
.teamMemberList {
  display: grid;
  gap: 10px;
}

.teamCard,
.emptyState,
.noticeBox {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.emptyState.compact {
  min-height: 84px;
}

.repPermissionToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-weight: 800;
}

.repPermissionToggle input {
  width: auto;
  margin: 0;
  accent-color: var(--blue);
}

.memberRow {
  display: grid;
  grid-template-columns: 46px minmax(170px, 1fr) minmax(130px, 0.75fr) minmax(125px, 0.7fr) minmax(95px, auto) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.memberRow:focus,
.memberRow:hover {
  border-color: #b9c6da;
  box-shadow: 0 8px 24px rgba(20, 30, 46, 0.08);
  outline: none;
}

.memberRow.inactiveMember {
  background: #f7f8fb;
}

.memberAvatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 950;
}

.memberAvatar.large {
  width: 58px;
  height: 58px;
  font-size: 17px;
}

.memberInfo,
.memberBase,
.memberTeam,
.memberStatusGroup {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.memberInfo strong,
.memberBase strong,
.memberTeam strong {
  overflow-wrap: anywhere;
}

.memberInfo span,
.memberBase span,
.memberTeam span,
.memberStatusGroup span:not(.statusPill) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.statusPill,
.inactiveBadge,
.inactiveStatus {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #eef2f7;
  color: #526071;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  vertical-align: middle;
}

.statusPill {
  width: fit-content;
}

.statusPill.active {
  background: #e8f5ee;
  color: var(--green);
}

.statusPill.online {
  background: #dcfce7;
  color: #166534;
}

.statusPill.away {
  background: #fff7ed;
  color: var(--amber);
}

.statusPill.inactive {
  background: #eef2f7;
  color: #526071;
}

.memberSettingsButton {
  min-width: 92px;
}

.activeText {
  color: var(--green);
}

.inactiveText {
  color: #526071;
}

.inactiveStatus {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.teamActionGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.teamTreeHeader {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

.teamTreeHeader strong {
  color: var(--ink);
  font-size: 14px;
}

.teamTreeBranch {
  display: grid;
  gap: 8px;
  border-left: 3px solid #dbe7ff;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px 10px 10px 12px;
}

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

.teamTreeLead span,
.teamTreeBranch li small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.teamNestedList,
.teamNestedList ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.teamTreeBranch li {
  color: #344054;
  font-size: 13px;
}

.teamTreeBranch li span {
  font-weight: 800;
}

.teamTreeBranch li small {
  display: block;
  margin-top: 2px;
}

.teamTreeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.teamTreeActions button {
  min-height: 34px;
  padding: 0 10px;
}

.compactTeamCard {
  padding: 10px;
}

.resetPasswordResult code {
  border-radius: 6px;
  background: #eef2f7;
  padding: 2px 6px;
}

.settingsModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.35);
  padding: 20px;
}

body.modalOpen {
  overflow: hidden;
}

.metricsTextReviewBackdrop {
  z-index: 70;
}

.metricsTextReviewModal {
  width: min(680px, 100%);
  max-height: min(780px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 30, 46, 0.24);
}

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

.metricsTextReviewHeader h2,
.metricsTextReviewHeader p {
  margin: 0;
}

.metricsTextReviewHeader h2 {
  margin-top: 3px;
  font-size: 22px;
}

.metricsTextReviewHeader p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.metricsTextReviewEyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metricsTextReviewBody {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}

.metricsTextSelectAll {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}

.metricsTextSelectAll input,
.metricsTextCandidate input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.metricsTextCandidateList {
  display: grid;
  gap: 9px;
  max-height: min(440px, 52vh);
  overflow: auto;
  padding-right: 3px;
}

.metricsTextCandidate {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.15fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #cddbf7;
  border-radius: 10px;
  background: #f7faff;
  padding: 13px 14px;
}

.metricsTextCandidate.unavailable {
  border-color: var(--line);
  background: #f7f8fa;
  color: var(--muted);
}

.metricsTextCandidate > label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.metricsTextCandidateIdentity {
  display: grid;
  min-width: 0;
}

.metricsTextCandidateIdentity strong,
.metricsTextCandidateIdentity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metricsTextCandidateIdentity small,
.metricsTextCandidate > p {
  color: var(--muted);
  font-size: 12px;
}

.metricsTextCandidate > p {
  grid-column: 1 / -1;
  margin: -3px 0 0 29px;
}

.metricsTextCandidateUpdates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.metricsTextCandidateUpdates span {
  border: 1px solid #cddbf7;
  border-radius: 999px;
  background: #fff;
  padding: 5px 8px;
  color: #294774;
  font-size: 11px;
  font-weight: 800;
}

.metricsTextReviewActions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 16px 20px;
}

@media (max-width: 640px) {
  .metricsTextReviewBackdrop {
    align-items: end;
    padding: 0;
  }

  .metricsTextReviewModal {
    width: 100%;
    max-height: 92vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
  }

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

  .metricsTextCandidateUpdates {
    justify-content: flex-start;
    padding-left: 29px;
  }

  .metricsTextReviewActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.repSettingsModal {
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 30, 46, 0.24);
}

.repModalHeader,
.repModalIdentity,
.agreementAccessPanel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.repModalHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 18px;
}

.repModalHeader h2,
.repModalHeader p,
.agreementAccessPanel h3,
.agreementAccessPanel p {
  margin: 0;
}

.repModalHeader p,
.agreementAccessPanel p {
  color: var(--muted);
}

.iconButton {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.repModalBody {
  display: grid;
  gap: 16px;
  padding: 18px;
}

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

.repModalStats div,
.agreementAccessPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.repModalStats span,
.repModalFields label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.repModalStats strong {
  display: block;
  margin-top: 4px;
}

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

.repModalFields label {
  display: grid;
  gap: 6px;
}

.repSettingsModal input:not([type="checkbox"]),
.repSettingsModal select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.modalToggle {
  grid-column: 1 / -1;
  align-self: end;
}

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

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

.teamMemberList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
}

.teamMemberHeader {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.teamMemberHeader strong {
  color: var(--ink);
}

.teamMemberList label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  line-height: 1.2;
}

.teamMemberList label.disabledTeamMember {
  background: #f1f5f9;
  color: var(--muted);
}

.teamMemberList input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.teamMemberList span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.breakdownOverridePanel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.breakdownOverridePanel > header {
  display: block;
}

.breakdownOverridePanel h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 15px;
}

.breakdownOverridePanel header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.breakdownOverrideViewer {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.breakdownOverrideViewer select {
  width: 100%;
}

body.settingsPage .breakdownOverrideRepList {
  grid-template-columns: 1fr;
  max-height: 260px;
}

.breakdownOverridePanel > button {
  width: 100%;
}

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

.avatarRow {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
}

.avatarPreview {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f7;
  color: var(--ink);
  font-weight: 900;
  overflow: hidden;
}

.avatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statusLine {
  min-height: 22px;
  color: var(--muted);
  font-weight: 800;
}

body:not(.ownerRole) .ownerOnly {
  display: none !important;
}

body:not(.ownerRole) .settingsWorkspace {
  grid-template-columns: minmax(0, 640px);
}

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

.secondRoundHeader,
.secondRoundTableCard > header,
.secondRoundTeamCard > header,
.secondRoundMappingCard > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.secondRoundHeader h3,
.secondRoundHeader p,
.secondRoundTableCard h4,
.secondRoundTeamCard h4,
.secondRoundMappingCard h4,
.secondRoundMappingCard p {
  margin: 0;
}

.secondRoundHeader p,
.secondRoundMappingCard p {
  margin-top: 5px;
  color: var(--muted);
}

.secondRoundSyncActions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.secondRoundRangeBar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 12px;
}

.secondRoundRangeMode {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #d7dfeb;
  border-radius: 9px;
  background: #fff;
}

.secondRoundRangeMode button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: #607087;
}

.secondRoundRangeMode button.active {
  background: #246bfe;
  color: #fff;
}

.secondRoundPeriodControls {
  display: flex;
  align-items: end;
  gap: 7px;
  color: #526077;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.secondRoundPeriodControls label {
  display: grid;
  gap: 4px;
}

.secondRoundPeriodControls input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
}

.secondRoundPeriodControls > button {
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  font-size: 1.25rem;
}

.secondRoundRangeLabel {
  margin-left: auto;
  padding: 9px 12px;
  color: #1e3a66;
  font-size: .88rem;
}

.secondRoundSyncActions label,
.secondRoundFilters label {
  display: grid;
  gap: 5px;
  color: #526077;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.secondRoundSyncActions input,
.secondRoundFilters input,
.secondRoundFilters select,
.secondRoundMappingRow select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
}

.secondRoundSyncStatus {
  border: 1px solid #dbe5f4;
  border-radius: 8px;
  background: #f6f9fe;
  color: #4d5f78;
  padding: 10px 12px;
  font-size: 0.84rem;
  font-weight: 700;
}

.secondRoundSyncStatus.isSuccess {
  border-color: #b9e3cd;
  background: #f0fbf5;
  color: #18794e;
}

.secondRoundSyncStatus.isError {
  border-color: #f1b8b3;
  background: #fff5f4;
  color: #a83228;
}

.secondRoundFilters {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.7fr) minmax(240px, 1.5fr);
  gap: 10px;
}

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

.secondRoundMetric {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid #dbe2ec;
  border-radius: 10px;
  background: #f9fbfd;
  padding: 14px;
}

.secondRoundMetric > span {
  color: #657187;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.secondRoundMetric strong {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1;
}

.secondRoundMetric small {
  color: var(--muted);
  line-height: 1.35;
}

.secondRoundTableCard,
.secondRoundTeamCard,
.secondRoundMappingCard,
.secondRoundBackgroundCard {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.secondRoundBackgroundCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.secondRoundBackgroundCard h4,
.secondRoundBackgroundCard p { margin: 0; }
.secondRoundBackgroundCard p { margin-top: 4px; color: var(--muted); }
.secondRoundBackgroundActions { display: flex; gap: 8px; flex-wrap: wrap; }
.secondRoundBackgroundCard .helperText { grid-column: 1 / -1; }

.secondRoundTable input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #246bfe;
}

.secondRoundTable select,
.secondRoundTable input[type="date"] {
  width: 100%;
  min-width: 130px;
  min-height: 34px;
  border: 1px solid #d6dfeb;
  border-radius: 7px;
  background: #fff;
  padding: 5px 7px;
  font-size: .75rem;
}

.secondRoundLifecycleCell {
  min-width: 150px;
}

.secondRoundLifecycleActions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.secondRoundLifecycleActions button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: .7rem;
}

.secondRoundBackgroundToggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3c4b62;
  font-weight: 800;
  white-space: nowrap;
}

.secondRoundAccountState {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.secondRoundAccountState > span {
  color: #637187;
  font-size: .72rem;
  font-weight: 750;
}

.secondRoundAccountState > span.active { color: #087443; }
.secondRoundAccountState > span.inactive { color: #a83228; }

.secondRoundTableCard > header,
.secondRoundTeamCard > header,
.secondRoundMappingCard > header {
  padding: 15px 16px;
}

.secondRoundLastSynced {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.secondRoundTableWrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--line);
}

.secondRoundTable {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.secondRoundTable th,
.secondRoundTable td {
  border-bottom: 1px solid #e6eaf0;
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
}

.secondRoundTable th {
  background: #f5f7fa;
  color: #526077;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.secondRoundTable tr:last-child td {
  border-bottom: 0;
}

.secondRoundTable td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.secondRoundTable .unmatchedManager {
  color: #a15c07;
}

.secondRoundNotes {
  min-width: 240px;
  max-width: 380px;
  white-space: normal;
  line-height: 1.45;
}

.secondRoundStatus {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border-radius: 999px;
  padding: 4px 9px;
  background: #edf1f6;
  color: #526077;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.secondRoundStatus.hired { background: #dcf8e9; color: #126b42; }
.secondRoundStatus.no_show { background: #ffe5e2; color: #a83228; }
.secondRoundStatus.not_hired { background: #fff0e0; color: #98520a; }
.secondRoundStatus.showed { background: #e4efff; color: #285da8; }
.secondRoundStatus.awaiting_update { background: #fff5cb; color: #815b00; }

.secondRoundTeamStats {
  border-top: 1px solid var(--line);
}

.secondRoundTeamHead,
.secondRoundTeamRow {
  display: grid;
  grid-template-columns: minmax(170px, 1.5fr) repeat(5, minmax(78px, 0.65fr));
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e6eaf0;
  border-radius: 0;
  padding: 10px 14px;
  text-align: left;
}

.secondRoundTeamHead {
  min-height: 36px;
  background: #f5f7fa;
  color: #667085;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.secondRoundTeamRow:hover {
  background: #f7faff;
}

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

.secondRoundUnmatchedList {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 14px 16px 16px;
}

.secondRoundMappingRow {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e0e6ef;
  border-radius: 9px;
  background: #f9fbfd;
  padding: 10px;
}

.secondRoundMappingRow > div {
  display: grid;
  gap: 3px;
}

.secondRoundMappingRow span {
  color: var(--muted);
  font-size: 0.76rem;
}

.secondRoundAllMatched {
  border: 1px solid #b9e3cd;
  border-radius: 8px;
  background: #f0fbf5;
  color: #18794e;
  padding: 12px;
  font-weight: 750;
}

@media (max-width: 900px) {
  .portalHeader,
  .settingsCard header,
  .placeholderGrid,
  .settingsGrid,
  .settingsOverview,
  .settingsWorkspace,
  .settingsSideRail,
  .metricStrip,
  .metricsControls,
  .metricsSummaryGrid,
  .paySummaryGrid,
  .breakevenRosterRows,
  .metricsChartGrid,
  .businessHeader,
  .businessHeaderControls,
  .businessWorkspace,
  .tabControls,
  .repCreate,
  .teamCreate,
  .memberToolbar,
  .aliasRow,
  .memberRow,
  .repModalStats,
  .repModalFields,
  .repModalActions,
  .agreementAccessPanel,
  .teamMemberList,
  .firstRoundHeader,
  .interviewWorkspace,
  .interviewFormGrid,
  .interviewRow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .secondRoundHeader,
  .secondRoundTableCard > header,
  .secondRoundTeamCard > header,
  .secondRoundMappingCard > header,
  .secondRoundSyncActions,
  .secondRoundFilters,
  .secondRoundSummary,
  .secondRoundMappingRow,
  .secondRoundBackgroundCard {
    display: grid;
    grid-template-columns: 1fr;
  }

  .secondRoundRangeBar,
  .secondRoundPeriodControls {
    align-items: stretch;
    flex-direction: column;
  }

  .secondRoundRangeLabel { margin-left: 0; padding-left: 0; }

  .secondRoundBackgroundActions {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .secondRoundSyncActions button {
    width: 100%;
  }

  .secondRoundTeamStats {
    overflow-x: auto;
  }

  .secondRoundTeamHead,
  .secondRoundTeamRow {
    min-width: 720px;
  }

  .firstRoundActions,
  .interviewFormCard header,
  .dayRecapCard header,
  .firstRoundListCard header {
    align-items: stretch;
    flex-direction: column;
  }

  .firstRoundListCard input {
    max-width: none;
  }

  .recapQualityRead,
  .recapAverageCommute {
    display: grid;
    gap: 4px;
  }

  .recapInterviewRow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .recapInterviewDetails {
    align-items: flex-start;
  }

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

  .acceptedControls {
    display: grid;
    grid-column: 1;
    grid-row: auto;
    justify-items: stretch;
  }

  .acceptedBubbleButtons {
    justify-content: center;
  }

  .acceptedReasonSelect,
  .acceptedTimingSelect,
  .acceptedReasonOtherInput {
    width: 100%;
  }

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

  .showConfidenceTier {
    min-height: 38px;
  }

  .showConfidenceReasonOtherInput {
    grid-column: 1;
  }

  .interviewRowActions {
    grid-column: 1;
    grid-row: auto;
  }

  .expenseControls label {
    grid-template-columns: 1fr;
  }

  body.settingsPage .memberDirectoryCard,
  body.settingsPage .teamSettingsCard {
    min-height: 0;
  }

  body.settingsPage .teamCreate {
    grid-template-columns: 1fr;
  }

  .teamTreeLead {
    display: grid;
  }

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

  body.settingsPage .repCreate {
    grid-template-columns: 1fr;
  }

  .portalNav {
    flex-wrap: wrap;
  }
}

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

  .secondRoundTableWrap {
    overflow: visible;
    border-top: 0;
    padding: 0 10px 10px;
  }

  .secondRoundTable {
    min-width: 0;
  }

  .secondRoundTable thead {
    display: none;
  }

  .secondRoundTable,
  .secondRoundTable tbody,
  .secondRoundTable tr,
  .secondRoundTable td {
    display: block;
    width: 100%;
  }

  .secondRoundTable tr {
    margin-bottom: 10px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .secondRoundTable td {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid #edf0f4;
    padding: 9px 10px;
  }

  .secondRoundTable td::before {
    content: attr(data-label);
    color: #697386;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .secondRoundNotes {
    min-width: 0;
    max-width: none;
  }
}
/* SMS authorization and access gate */
.smsConsentPage {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at top left, #eef5ff 0, #f4f6f9 42%, #edf0f4 100%);
  color: #172033;
}

.smsConsentPage.authChecking .smsConsentShell { opacity: 0; }

.smsConsentShell {
  width: min(760px, calc(100% - 32px));
  margin: 48px auto;
  transition: opacity 160ms ease;
}

.smsConsentHeader,
.smsConsentCard {
  border: 1px solid #dce3ed;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 42px rgba(25, 38, 62, 0.1);
}

.smsConsentHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  border-radius: 18px 18px 0 0;
}

.smsConsentHeader h1 { margin: 0 0 3px; font-size: 1.35rem; }
.smsConsentHeader p { margin: 0; color: #69758a; }

.smsConsentCard {
  padding: 32px;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.smsConsentCard h2 { margin: 6px 0 10px; font-size: clamp(1.55rem, 4vw, 2.15rem); }
.smsConsentCard > p { color: #5d687b; line-height: 1.55; }
.smsConsentCard form { display: grid; gap: 18px; margin-top: 26px; }
.smsConsentCard label { display: grid; gap: 7px; font-weight: 750; }
.smsConsentCard input[type="tel"],
.smsConsentCard input[autocomplete="name"] {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid #cbd5e3;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

.smsConsentEyebrow {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #2457a7;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.smsConsentEyebrow.warning { background: #fff0e8; color: #a23b0e; }

.smsAgreementText {
  padding: 18px;
  border: 1px solid #d8e0eb;
  border-left: 4px solid #2f6df6;
  border-radius: 10px;
  background: #f7f9fc;
  line-height: 1.55;
  font-weight: 550;
}

.smsAgreementCheck {
  grid-template-columns: auto 1fr !important;
  align-items: start;
  gap: 10px !important;
  font-weight: 650 !important;
}

.smsAgreementCheck input { width: 19px; height: 19px; margin-top: 1px; }
.smsAgreementCheck a { color: #2457a7; font-weight: 800; }
.smsConsentActions { display: flex; flex-wrap: wrap; gap: 10px; }
.smsConsentActions button { min-height: 44px; }
.smsConsentCard small { color: #738095; font-weight: 500; }
.smsStartExample { margin: 22px 0; padding: 18px; border-radius: 12px; background: #f1f5fa; font-size: 1.1rem; }

.smsAdminPanel { align-items: flex-start; }
.smsAdminPanel > div { flex: 1; min-width: 0; }
.smsTemplateTestActions {
  display: grid;
  flex: 0 0 190px;
  gap: 8px;
}
.smsTemplateTestActions button { width: 100%; min-height: 38px; }
.smsAuthorizationUpload {
  display: grid;
  gap: 11px;
  margin-top: 14px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 14px;
}
.smsAuthorizationUpload h4 { margin: 0 0 3px; color: #182235; font-size: 0.92rem; }
.smsAuthorizationUpload p { margin: 0; color: #667085; font-size: 0.8rem; }
.smsAuthorizationUploadFields {
  display: grid;
  grid-template-columns: minmax(145px, 0.55fr) minmax(220px, 1.45fr);
  gap: 10px;
}
.smsAuthorizationUploadFields label { display: grid; gap: 5px; }
.smsAuthorizationUploadFields label > span {
  color: #536076;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.smsAuthorizationUploadFields input { width: 100%; }
.smsAuthorizationFileField input { padding: 8px; background: #fff; }
.smsAuthorizationUploadActions { display: flex; flex-wrap: wrap; gap: 8px; }
.smsAuthorizationUploadActions button { min-height: 36px; }
.smsAuthorizationUpload small { color: #69758a; line-height: 1.45; }
.smsDocumentReady { color: #18794e !important; font-weight: 750; }
.smsDocumentMissing { color: #9a6700 !important; font-weight: 700; }
.smsHistoryList { display: grid; gap: 7px; margin-top: 12px; }
.smsHistoryList article { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #e0e6ef; border-radius: 9px; background: #f8fafc; }
.smsHistoryList article strong { font-size: 0.78rem; }
.smsHistoryList article span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d596d; font-size: 0.78rem; }
.smsHistoryList article small { color: #7c8798; }

/* Admin SMS chat logs */
.chatLogsPortal { width: min(1240px, calc(100vw - 36px)); }
.chatLogsShell {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  height: min(760px, calc(100vh - 150px));
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.chatContactPane,
.chatConversationPane { min-width: 0; min-height: 0; }
.chatContactPane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-right: 1px solid #e4e8ef;
  background: #f9fafc;
}
.chatContactHeader,
.chatConversationHeader {
  display: flex;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid #e4e8ef;
  background: rgba(255, 255, 255, 0.96);
  padding: 14px 16px;
}
.chatContactHeader > div,
.chatConversationHeader > div:not(.chatAvatar) { display: grid; gap: 3px; }
.chatEyebrow {
  color: #7b8494;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chatSearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  background: #eef1f5;
  padding: 0 11px;
}
.chatSearch span { color: #6f7a8b; font-size: 1.25rem; }
.chatSearch input {
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.chatContactList { overflow-y: auto; overscroll-behavior: contain; }
.chatContact {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e4e8ef;
  background: transparent;
  padding: 10px 12px;
  text-align: left;
}
.chatContact:hover { background: #f0f3f8; }
.chatContact.active { background: #e8f0ff; }
.chatAvatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(145deg, #dce8ff, #92afe8);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 950;
}
.chatContactCopy { display: grid; gap: 5px; min-width: 0; }
.chatContactTopline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chatContactTopline strong,
.chatContactTopline time,
.chatContactPreview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatContactTopline strong { color: #111827; font-size: 0.9rem; }
.chatContactTopline time { flex: 0 0 auto; color: #7b8494; font-size: 0.72rem; }
.chatContactPreview { color: #6b7280; font-size: 0.8rem; }
.chatReplyDot { width: 8px; height: 8px; border-radius: 999px; background: #1685f8; }
.chatListEmpty { padding: 30px 18px; color: var(--muted); text-align: center; }
.chatConversationPane { display: grid; grid-template-rows: auto minmax(0, 1fr); background: #fff; }
.chatConversationHeader { gap: 12px; }
.chatConversationHeader strong { font-size: 1rem; }
.chatConversationHeader span { color: var(--muted); font-size: 0.78rem; }
.chatMobileBack { display: none; width: 38px; min-height: 38px; padding: 0; font-size: 2rem; line-height: 1; }
.chatMessageThread {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(#fff, #fbfcfe);
  padding: 20px 22px 26px;
}
.chatEmptyState {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  height: 100%;
  color: var(--muted);
  text-align: center;
}
.chatEmptyState strong { color: var(--ink); }
.chatEmptyIcon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: #eef2f7; color: #64748b; font-size: 1.4rem; letter-spacing: 0.12em; }
.chatDayDivider { display: flex; justify-content: center; margin: 12px 0 16px; }
.chatDayDivider span { border-radius: 999px; background: #f1f3f6; color: #737e8f; padding: 4px 10px; font-size: 0.7rem; font-weight: 800; }
.chatBubbleRow { display: flex; margin: 6px 0; }
.chatBubbleRow.outbound { justify-content: flex-end; }
.chatBubbleRow.inbound { justify-content: flex-start; }
.chatBubble { display: grid; gap: 5px; width: fit-content; max-width: min(72%, 620px); border-radius: 18px; padding: 9px 13px 7px; }
.chatBubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chatBubble small { font-size: 0.65rem; }
.chatBubbleRow.outbound .chatBubble { border-bottom-right-radius: 5px; background: #1685f8; color: #fff; }
.chatBubbleRow.outbound small { color: rgba(255,255,255,.78); text-align: right; }
.chatBubbleRow.inbound .chatBubble { border-bottom-left-radius: 5px; background: #e9ebef; color: #111827; }
.chatBubbleRow.inbound small { color: #717b8b; }

@media (max-width: 760px) {
  .chatLogsPortal { width: 100%; padding: 0; }
  .chatLogsPage .portalHeader { padding: 14px; }
  .chatLogsPage .portalNav { display: flex; flex-wrap: wrap; }
  .chatLogsShell { height: calc(100vh - 116px); min-height: 480px; border-right: 0; border-left: 0; border-radius: 0; grid-template-columns: 1fr; }
  .chatContactPane,
  .chatConversationPane { grid-column: 1; grid-row: 1; }
  .chatConversationPane { display: none; }
  body.chatConversationOpen .chatContactPane { display: none; }
  body.chatConversationOpen .chatConversationPane { display: grid; }
  .chatMobileBack { display: grid; place-items: center; }
  .chatBubble { max-width: 84%; }
  .chatMessageThread { padding: 16px 12px 22px; }
  .chatLogsPage .statusLine { padding: 0 14px; }
}

@media (max-width: 620px) {
  .smsConsentShell { margin: 16px auto; width: min(100% - 20px, 760px); }
  .smsConsentHeader { align-items: flex-start; }
  .smsConsentCard { padding: 22px 18px; }
  .smsAuthorizationUploadFields { grid-template-columns: 1fr; }
  .smsTemplateTestActions { width: 100%; flex-basis: auto; }
}

/* Recruiting paper-form intake + orientation calendar */
.orientationPanel { display: grid; gap: 16px; }
.orientationPanel[hidden] { display: none; }
.orientationHeader,
.paperIntakeIntro,
.orientationReminderCard,
.orientationAgendaCard > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.orientationHeader h3,
.paperIntakeCard h4,
.orientationReminderCard h4,
.orientationAgendaCard h4 { margin: 2px 0 4px; }
.orientationHeader p,
.paperIntakeCard p,
.orientationReminderCard p { margin: 0; color: #67748a; line-height: 1.45; }
.orientationMonthControls { display: flex; align-items: end; gap: 8px; }
.orientationMonthControls label,
.orientationFilters label,
.orientationReminderCard label { display: grid; gap: 5px; }
.orientationMonthControls label > span,
.orientationFilters label > span,
.orientationReminderCard label > span {
  color: #647188;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.orientationMonthControls button { width: 40px; min-height: 40px; padding: 0; font-size: 1.4rem; }
.paperIntakeCard,
.orientationReminderCard,
.orientationAgendaCard {
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}
.paperIntakeCard { border-top: 4px solid #2f6df6; }
.paperIntakeActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cameraUploadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 800;
}
.cameraUploadButton input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.orientationFormQueue { display: grid; gap: 12px; margin-top: 12px; }
.orientationEmptyState {
  padding: 24px;
  border: 1px dashed #cfd8e6;
  border-radius: 12px;
  background: #f8fafc;
  color: #718096;
  text-align: center;
}
.orientationEmptyState.isError { color: #b42318; background: #fff5f3; border-color: #f2b8b0; }
.orientationQueueCard {
  display: grid;
  grid-template-columns: 76px 1fr auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe6f0;
  border-radius: 12px;
  padding: 10px;
  background: #fbfcfe;
}
.orientationQueueCard.extracting { border-color: #a8c1ff; background: #f4f7ff; }
.orientationQueueCard.error { border-color: #f2b8b0; background: #fff7f5; }
.orientationQueueCard img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; }
.orientationQueueCard > div { display: grid; gap: 3px; }
.orientationQueueCard span { color: #68758a; font-size: .78rem; }
.orientationReviewCard { overflow: hidden; border: 1px solid #dbe3ee; border-radius: 14px; background: #fff; }
.orientationReviewCard > header,
.orientationReviewCard > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: #f8fafc;
}
.orientationReviewCard > header { border-bottom: 1px solid #e4e9f1; }
.orientationReviewCard > footer { border-top: 1px solid #e4e9f1; }
.orientationReviewCard h4 { margin: 1px 0 0; }
.orientationReviewBody { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 15px; }
.orientationPreviewButton { align-self: start; padding: 0; overflow: hidden; border-radius: 10px; background: #111827; color: #fff; }
.orientationPreviewButton img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top; }
.orientationPreviewButton span { display: block; padding: 9px; }
.orientationReviewFields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.orientationReviewFields label { display: grid; align-content: start; gap: 5px; }
.orientationReviewFields label > span { color: #526077; font-size: .7rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.orientationReviewFields input,
.orientationReviewFields select,
.orientationReviewFields textarea { width: 100%; }
.orientationReviewFields [hidden] { display: none !important; }
.orientationReviewFields textarea { resize: vertical; }
.orientationLowConfidence { padding: 8px; border: 1px solid #f1bd60; border-radius: 9px; background: #fff8e8; }
.orientationLowConfidence em { margin-left: 5px; color: #9a6700; font-size: .63rem; font-style: normal; }
.orientationSaveAlias,
.orientationNotesField { grid-column: 1 / -1; }
.orientationSaveAlias { grid-template-columns: auto 1fr !important; align-items: center; }
.orientationSaveAlias input { width: 17px; height: 17px; }
.orientationExtractionNotice { margin: 0 15px 15px; padding: 10px 12px; border-radius: 9px; background: #fff7e5; color: #855500; font-size: .78rem; }
.orientationFilters { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(180px, .7fr) minmax(250px, 1.4fr); gap: 12px; }
.orientationSearchField input { width: 100%; }
.orientationReminderCard { display: grid; grid-template-columns: 1fr auto auto auto; align-items: end; }
.orientationReminderCard > div:first-child { align-self: center; }
.orientationReminderStatus { grid-column: 1 / -1; }
.orientationSummary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.orientationSummary article { display: grid; gap: 4px; border: 1px solid #dfe5ee; border-radius: 12px; padding: 13px; background: #fff; }
.orientationSummary span { color: #68758a; font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.orientationSummary strong { color: #182235; font-size: 1.5rem; }
.orientationCalendar { overflow: hidden; border: 1px solid #dce4ef; border-radius: 14px; background: #fff; }
.orientationWeekdays,
.orientationCalendarGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.orientationWeekdays { border-bottom: 1px solid #dce4ef; background: #f4f7fb; }
.orientationWeekdays span { padding: 9px; color: #647188; font-size: .68rem; font-weight: 850; text-align: center; text-transform: uppercase; }
.orientationCalendarDay { min-height: 108px; padding: 8px; border-right: 1px solid #e6ebf2; border-bottom: 1px solid #e6ebf2; }
.orientationCalendarDay:nth-child(7n) { border-right: 0; }
.orientationCalendarDay.outside { background: #f8fafc; }
.orientationCalendarDay > span { display: block; margin-bottom: 5px; color: #778398; font-size: .72rem; font-weight: 800; }
.orientationCalendarDay.hasEvents { background: #f8fbff; }
.orientationCalendarDay button { display: grid; width: 100%; margin: 3px 0; padding: 6px 7px; border: 0; border-radius: 7px; background: #eaf1ff; color: #234b9b; text-align: left; }
.orientationCalendarDay button strong,
.orientationCalendarDay button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orientationCalendarDay button strong { font-size: .72rem; }
.orientationCalendarDay button small { color: #5874a8; font-size: .62rem; }
.orientationAgendaCard { padding: 0; }
.orientationAgendaCard > header { padding: 14px 16px; border-bottom: 1px solid #e2e8f0; }
.orientationAgenda { display: grid; }
.orientationAgendaRow {
  display: grid;
  grid-template-columns: auto 110px minmax(150px, 1fr) minmax(135px, .9fr) minmax(120px, .75fr) minmax(95px, .6fr) minmax(190px, 1.1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 15px;
  border-bottom: 1px solid #e6ebf2;
  transition: background .2s, outline .2s;
}
.orientationAgendaRow:last-child { border-bottom: 0; }
.orientationAgendaRow.isFocused { outline: 2px solid #2f6df6; outline-offset: -2px; background: #f2f6ff; }
.orientationAgendaRow.hired { border-left: 4px solid #20a66a; }
.orientationAgendaRow.pending { border-left: 4px solid #e2a514; }
.orientationAgendaRow.disqualified,
.orientationAgendaRow.declined { border-left: 4px solid #d14a3c; }
.orientationReminderCheck { width: 18px; height: 18px; }
.orientationAgendaDate,
.orientationAgendaPerson,
.orientationAgendaManager,
.orientationSmsStatus { display: grid; gap: 3px; }
.orientationAgendaRow span,
.orientationAgendaRow small { color: #6b778c; font-size: .7rem; }
.orientationAgendaPerson strong,
.orientationAgendaManager strong { color: #1e293b; }
.orientationOutcomePill { justify-self: start; padding: 5px 8px; border-radius: 999px; font-weight: 800; }
.orientationOutcomePill.hired { color: #087443; background: #dff8ec; }
.orientationOutcomePill.pending { color: #8c5c00; background: #fff2c7; }
.orientationOutcomePill.disqualified,
.orientationOutcomePill.declined { color: #a93227; background: #ffe7e4; }
.orientationSmsStatus .sent,
.orientationSmsStatus .delivered { color: #087443; }
.orientationSmsStatus .failed { color: #b42318; }
.orientationAgendaLifecycle { display: grid; gap: 5px; min-width: 190px; }
.orientationAgendaLifecycle label { display: inline-flex; align-items: center; gap: 6px; color: #34445d; font-size: .72rem; font-weight: 800; }
.orientationAgendaLifecycle input[type="checkbox"] { width: 16px; height: 16px; accent-color: #246bfe; }
.orientationAgendaLifecycle select { width: 100%; min-height: 32px; border: 1px solid #d6dfeb; border-radius: 7px; background: #fff; padding: 4px 6px; font-size: .7rem; }
.orientationAgendaLifecycleActions { display: flex; gap: 5px; flex-wrap: wrap; }
.orientationAgendaLifecycleActions button { min-height: 30px; padding: 4px 7px; font-size: .65rem; }

@media (max-width: 900px) {
  .orientationReviewBody { grid-template-columns: 130px 1fr; }
  .orientationPreviewButton img { height: 170px; }
  .orientationReminderCard { grid-template-columns: 1fr 1fr; }
  .orientationReminderCard > div:first-child,
  .orientationReminderStatus { grid-column: 1 / -1; }
  .orientationCalendar { overflow-x: auto; }
  .orientationWeekdays,
  .orientationCalendarGrid { min-width: 760px; }
  .orientationAgendaRow { grid-template-columns: auto 100px minmax(145px, 1fr) minmax(130px, 1fr) minmax(180px, 1fr) auto; }
  .orientationSmsStatus { display: none; }
  .orientationAgendaLifecycle { grid-column: 5; }
}

@media (max-width: 650px) {
  .orientationHeader,
  .paperIntakeIntro,
  .orientationAgendaCard > header { align-items: stretch; flex-direction: column; }
  .orientationMonthControls { width: 100%; }
  .orientationMonthControls label { flex: 1; }
  .paperIntakeActions { justify-content: stretch; }
  .paperIntakeActions > * { flex: 1 1 130px; }
  .orientationQueueCard { grid-template-columns: 64px 1fr; }
  .orientationQueueCard img { width: 64px; height: 64px; }
  .orientationReviewBody { grid-template-columns: 1fr; }
  .orientationPreviewButton img { height: 145px; }
  .orientationReviewFields,
  .orientationFilters,
  .orientationSummary { grid-template-columns: 1fr; }
  .orientationSaveAlias,
  .orientationNotesField { grid-column: auto; }
  .orientationReviewCard > footer { align-items: stretch; flex-direction: column; }
  .orientationReminderCard { grid-template-columns: 1fr; }
  .orientationReminderCard > div:first-child,
  .orientationReminderStatus { grid-column: auto; }
  .orientationCalendar { display: none; }
  .orientationAgendaRow { grid-template-columns: auto 92px 1fr auto; gap: 8px; padding: 11px; }
  .orientationAgendaManager { grid-column: 3; }
  .orientationAgendaOutcome { grid-column: 3; }
  .orientationSmsStatus { display: grid; grid-column: 3; }
  .orientationAgendaLifecycle { grid-column: 3; min-width: 0; }
  .orientationAgendaRow > button { grid-column: 4; grid-row: 1; }
}

/* Sales Verification + transactional customer inbox */
.customerWorkflowPanel { display: grid; gap: 18px; }
.customerWorkflowPanel[hidden] { display: none !important; }
.customerWorkflowEyebrow {
  display: block;
  color: #2f6df6;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.customerWorkflowHero,
.customerInboxHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 55%, #edf4ff);
}
.customerWorkflowHero h2,
.customerInboxHeader h2,
.customerWorkflowCard h3,
.customerApprovalModal h2,
.customerSmsTestModal h2 { margin: 4px 0 6px; color: #121c30; }
.customerWorkflowHero p,
.customerInboxHeader p,
.customerWorkflowCard p { margin: 0; color: #67758b; }
.verificationIdentity {
  display: grid;
  grid-template-columns: auto minmax(150px, auto);
  gap: 5px 12px;
  min-width: 240px;
  padding: 14px 16px;
  border: 1px solid #cbd9f2;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
}
.verificationIdentity span { color: #6b778c; font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.verificationIdentity strong { color: #17233a; font-size: .82rem; text-align: right; }
.verificationIdentity em { color: #536681; font-style: normal; font-weight: 700; }
.verificationWorkspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); gap: 18px; }
.customerWorkflowCard {
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 53, 88, .055);
}
.verificationForm { padding: 22px; }
.verificationForm > header,
.verificationAdminHeader,
.customerApprovalModal > header,
.customerSmsTestModal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.verificationFormGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.verificationFormGrid label,
.customerSmsTestModal label,
.customerSignatureField { display: grid; gap: 6px; }
.verificationFormGrid label > span,
.customerSmsTestModal label > span,
.customerSignatureField > span { color: #52617a; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.verificationFormGrid input,
.verificationFormGrid select,
.customerSmsTestModal input,
.customerSmsTestModal select,
.customerSignatureField input,
.customerInboxFilters input,
.customerInboxFilters select,
.customerReplyComposer textarea {
  width: 100%;
  border: 1px solid #d5dfed;
  border-radius: 10px;
  background: #fff;
}
.verificationCheck {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid #e0e7f1;
  border-radius: 10px;
  background: #f8faff;
}
.verificationCheck input { width: 19px; height: 19px; flex: 0 0 auto; }
.verificationCheck span { display: grid; gap: 2px; color: #27344a !important; text-transform: none !important; }
.verificationCheck small { color: #748198; font-weight: 600; }
.approvalLaunch { width: 100%; min-height: 48px; }
.workflowNotice { margin-top: 14px; padding: 11px 13px; border-radius: 10px; background: #eff5ff; color: #315891; font-size: .8rem; font-weight: 700; }
.workflowNotice[data-tone="warning"] { background: #fff4d7; color: #8a5a00; }
.workflowNotice[data-tone="error"] { background: #ffe8e6; color: #a52c24; }
.verificationHelpCard { padding: 22px; }
.verificationSteps { display: grid; gap: 13px; margin: 18px 0 0; padding: 0; list-style: none; }
.verificationSteps li { display: grid; grid-template-columns: 31px 1fr; gap: 10px; align-items: start; }
.verificationSteps li > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #eaf1ff; color: #245fcf; font-weight: 900; }
.verificationSteps strong { color: #1f2c43; }
.verificationSteps p { margin-top: 2px; font-size: .76rem; line-height: 1.4; }
.verificationAdminArea { padding: 20px; }
.verificationAdminActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verificationAdminSummary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.verificationAdminSummary > div { display: grid; gap: 3px; padding: 11px; border: 1px solid #e0e7f1; border-radius: 11px; background: #f9fbfe; }
.verificationAdminSummary span { color: #69768b; font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.verificationAdminSummary strong { color: #162238; font-size: 1.25rem; }
.verificationAdminSummary [data-tone="verified"] strong { color: #087443; }
.verificationAdminSummary [data-tone="mismatch"] strong,
.verificationAdminSummary [data-tone="not_found"] strong { color: #b33b31; }
.verificationTable td { vertical-align: top; }
.verificationTable td small { display: block; max-width: 190px; margin-top: 4px; color: #748198; font-size: .65rem; line-height: 1.35; }
.workflowPill { display: inline-flex; align-items: center; width: max-content; padding: 5px 8px; border-radius: 999px; background: #edf2fa; color: #43526a; font-size: .65rem; font-weight: 900; text-transform: capitalize; }
.workflowPill.match-verified,
.workflowPill.thread-completed { color: #087443; background: #dff8ec; }
.workflowPill.match-mismatch,
.workflowPill.match-not_found,
.workflowPill.thread-cancelled { color: #a93227; background: #ffe7e4; }
.workflowPill.match-duplicate,
.workflowPill.acsc { color: #7a3fb0; background: #f2e7ff; }
.workflowPill.match-pending { color: #8c5c00; background: #fff2c7; }
.workflowPill.thread-opted_out { color: #6d7788; background: #e8edf3; }
.customerInboxBadge { min-width: 20px; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: #d32626; color: #fff; font-size: .65rem; }
.customerInboxFilters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(130px, .7fr)) repeat(3, auto); align-items: center; gap: 9px; padding: 12px; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; }
.customerInboxFilters label { display: inline-flex; align-items: center; gap: 6px; color: #52617a; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.customerInboxFilters .customerDateFilter { display: grid; grid-template-columns: auto minmax(125px, 1fr); }
.customerDateFilter input { min-width: 0; }
.customerInboxShell { display: grid; grid-template-columns: minmax(270px, .82fr) minmax(0, 1.8fr); min-height: 590px; overflow: hidden; border: 1px solid #d7e1ed; border-radius: 17px; background: #fff; }
.customerThreadList { overflow-y: auto; border-right: 1px solid #dfe6ef; background: #f8fafd; }
.customerThreadItem { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; width: 100%; min-height: 72px; padding: 12px; border: 0; border-bottom: 1px solid #e3e9f1; border-radius: 0; background: transparent; text-align: left; }
.customerThreadItem:hover,
.customerThreadItem.active { background: #eaf2ff; }
.customerThreadItem.unread { background: #f0f6ff; }
.customerThreadAvatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #dce8ff; color: #2459b5; font-size: .72rem; font-weight: 900; }
.customerThreadCopy { display: grid; align-content: center; min-width: 0; gap: 4px; }
.customerThreadCopy strong,
.customerThreadCopy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customerThreadCopy strong { color: #1b2940; font-size: .8rem; }
.customerThreadCopy em { color: #62728a; font-style: normal; font-weight: 700; }
.customerThreadCopy small { color: #77849a; font-size: .66rem; }
.customerThreadFlags { display: flex; align-items: center; gap: 5px; }
.customerThreadFlags i { padding: 3px 5px; border-radius: 6px; background: #ffe7e4; color: #a93227; font-size: .58rem; font-style: normal; font-weight: 900; }
.customerThreadFlags i.deliveryIssue { background: #fff0ca; color: #855700; }
.customerThreadFlags b { width: 8px; height: 8px; border-radius: 50%; background: #246bfe; }
.customerConversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: #fff; }
.customerConversationEmpty,
.emptyState { display: grid; place-content: center; gap: 5px; min-height: 120px; padding: 22px; color: #728098; text-align: center; }
.customerConversationHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e1e7f0; }
.customerConversationHeader > div { display: grid; gap: 3px; }
.customerConversationHeader strong { color: #17243a; }
.customerConversationHeader em { color: #5f7089; font-style: normal; }
.customerConversationHeader span { color: #728098; font-size: .7rem; }
.customerMessageStream { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 18px; background: linear-gradient(#fbfcfe, #f7f9fc); }
.customerMessage { display: flex; max-width: 76%; }
.customerMessage.inbound { align-self: flex-start; }
.customerMessage.outbound { align-self: flex-end; }
.customerMessage > div { padding: 10px 12px; border-radius: 15px; box-shadow: 0 2px 5px rgba(24, 39, 66, .06); }
.customerMessage.inbound > div { border: 1px solid #dce3ed; border-bottom-left-radius: 4px; background: #fff; }
.customerMessage.outbound > div { border-bottom-right-radius: 4px; background: #2670f7; color: #fff; }
.customerMessage span { display: block; margin-bottom: 3px; font-size: .58rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; opacity: .72; }
.customerMessage p { margin: 0; font-size: .78rem; line-height: 1.45; white-space: normal; }
.customerMessage small { display: block; margin-top: 5px; font-size: .58rem; opacity: .68; }
.customerMessage a { color: inherit; text-decoration: underline; }
.customerReplyComposer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 14px; border-top: 1px solid #e1e7f0; }
.customerReplyComposer label { display: grid; gap: 5px; }
.customerReplyComposer label > span { color: #5e6c83; font-size: .66rem; font-weight: 850; }
.customerReplyComposer textarea { resize: vertical; }
.customerReplyComposer .helperText { grid-column: 1 / -1; }
.customerReadOnlyNotice { display: grid; gap: 3px; padding: 14px 16px; border-top: 1px solid #e1e7f0; background: #f8fafc; }
.customerReadOnlyNotice strong { color: #334258; }
.customerReadOnlyNotice span { color: #748198; font-size: .7rem; }
.customerApprovalBackdrop,
.customerSmsTestBackdrop { z-index: 1200; }
.customerApprovalModal,
.customerSmsTestModal { width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 36px); overflow-y: auto; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 26px 80px rgba(15, 31, 59, .28); }
.customerSmsTestModal { width: min(520px, calc(100vw - 28px)); display: grid; gap: 14px; }
.customerApprovalSummary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 17px 0; }
.customerApprovalSummary > div { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f3f7fd; }
.customerApprovalSummary span { color: #6d798d; font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.customerApprovalSummary strong { color: #1c2b42; font-size: .76rem; }
.customerConsentCopy { padding: 15px; border: 1px solid #dbe4f0; border-radius: 12px; background: #f9fbfe; }
.customerConsentCopy p { color: #37465c; font-size: .8rem; line-height: 1.5; }
.customerConsentCopy small { color: #748198; }
.customerHelpOptions { display: grid; gap: 9px; margin: 16px 0; padding: 0; border: 0; }
.customerHelpOptions legend { margin-bottom: 8px; color: #26364f; font-weight: 900; }
.customerHelpOptions label { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 11px; border: 1px solid #e0e7f1; border-radius: 10px; }
.customerHelpOptions input,
.customerConsentCheck input { width: 19px; height: 19px; }
.customerHelpOptions span { display: grid; gap: 2px; }
.customerHelpOptions small { color: #748198; }
.customerConsentCheck { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; padding: 12px; border-radius: 10px; background: #edf4ff; color: #294e89; font-size: .78rem; font-weight: 800; }
.customerApprovalModal footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }

@media (max-width: 900px) {
  .verificationWorkspace { grid-template-columns: 1fr; }
  .verificationAdminSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customerInboxFilters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customerInboxShell { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.5fr); }
}

@media (max-width: 680px) {
  .customerWorkflowHero,
  .customerInboxHeader,
  .verificationAdminHeader { align-items: stretch; flex-direction: column; padding: 18px; }
  .verificationIdentity { min-width: 0; }
  .verificationFormGrid { grid-template-columns: 1fr; }
  .verificationAdminActions { display: grid; grid-template-columns: 1fr 1fr; }
  .verificationAdminActions select { grid-column: 1 / -1; }
  .verificationAdminSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customerInboxFilters { grid-template-columns: 1fr 1fr; }
  .customerInboxFilters input[type="search"] { grid-column: 1 / -1; }
  .customerInboxShell { display: block; min-height: 0; overflow: visible; }
  .customerThreadList { max-height: 320px; border-right: 0; border-bottom: 1px solid #dfe6ef; }
  .customerConversation { min-height: 560px; }
  .customerMessage { max-width: 90%; }
  .customerReplyComposer { grid-template-columns: 1fr; }
  .customerApprovalSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customerApprovalModal footer { display: grid; grid-template-columns: 1fr 1fr; }
}
.eyebrowText {
  display: none !important;
}