:root {
  color-scheme: light;
  --app-bg: #f5f5f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f7f7f9;
  --sidebar: rgba(249, 249, 251, 0.9);
  --text: #1d1d1f;
  --text-soft: #555967;
  --text-muted: #7d8291;
  --line: #dedfe4;
  --line-strong: #c9cbd2;
  --green: #0a9f67;
  --green-soft: #e8f7f0;
  --cyan: #078ea5;
  --cyan-soft: #e5f6f8;
  --teal: #3db7ae;
  --orange: #f08a20;
  --orange-soft: #fff2df;
  --red: #d94b4b;
  --red-soft: #fdeceb;
  --blue: #337eea;
  --graphite: #545b67;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.035);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.16), 0 3px 12px rgba(0, 0, 0, 0.08);
  --radius: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Trust, privacy, budgets, and progressive monitoring extensions */
.sinceVisitPanel,
.regressionPanel,
.criticalPathPanel,
.projectBudgetPanel,
.metricProvenance,
.indexDiagnostics,
.privacyStatus,
.privacyMatrix,
.redactionReasons,
.emergencyLock,
.compareVerdict {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.sinceVisitPanel {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(280px, 1.1fr) minmax(280px, 1.25fr);
  min-height: 82px;
  margin-bottom: 16px;
  overflow: hidden;
}

.sinceVisitPanel > header,
.sinceVisitFacts,
.sinceVisitSessions {
  min-width: 0;
  padding: 14px 16px;
}

.sinceVisitPanel > header,
.sinceVisitPanel > header > span,
.sinceVisitPanel > header > span > span {
  display: flex;
  align-items: center;
}

.sinceVisitPanel > header {
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-muted);
}

.sinceVisitPanel > header > span {
  gap: 10px;
}

.sinceVisitPanel > header > span > svg {
  color: var(--green);
}

.sinceVisitPanel > header > span > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.sinceVisitPanel em,
.sinceVisitFacts b,
.sinceVisitSessions em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}

.sinceVisitPanel strong {
  font-size: 13px;
}

.sinceVisitFacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.sinceVisitFacts span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.sinceVisitFacts svg {
  width: 15px;
  height: 15px;
  color: var(--cyan);
}

.sinceVisitSessions {
  display: grid;
  gap: 3px;
  padding-block: 7px;
}

.sinceVisitSessions button {
  display: grid;
  min-width: 0;
  grid-template-columns: 7px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  background: transparent;
  text-align: left;
}

.sinceVisitSessions button > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.sinceVisitSessions button > i.attention { background: var(--orange); }
.sinceVisitSessions button > i.completed { background: var(--green); }
.sinceVisitSessions button > i.new { background: var(--blue); }

.sinceVisitSessions span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sinceVisitSessions strong,
.sinceVisitSessions em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regressionPanel,
.criticalPathPanel {
  padding: 18px;
}

.regressionVerdict,
.pathConfidence {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 700;
}

.regressionPanel.improved .regressionVerdict { background: var(--green-soft); color: var(--green); }
.regressionPanel.regressed .regressionVerdict { background: var(--orange-soft); color: var(--orange); }
.regressionPanel.running .regressionVerdict { background: var(--cyan-soft); color: var(--cyan); }

.regressionMetrics,
.criticalPathSummary,
.projectOutcomeStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.regressionMetrics > span,
.criticalPathSummary > span,
.projectOutcomeStrip > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.regressionMetrics > span:last-child,
.criticalPathSummary > span:last-child,
.projectOutcomeStrip > span:last-child {
  border-right: 0;
}

.regressionMetrics em,
.regressionMetrics small,
.criticalPathSummary em,
.projectOutcomeStrip em,
.projectOutcomeStrip small {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.regressionMetrics strong,
.criticalPathSummary strong,
.projectOutcomeStrip strong {
  font-size: 16px;
}

.regressionPanel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: var(--text-muted);
  font-size: 11px;
}

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

.criticalPathChart {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 13px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
}

.criticalLane {
  display: grid;
  min-width: 0;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.criticalLane > em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-align: right;
  text-transform: uppercase;
}

.criticalLane > div {
  position: relative;
  min-width: 0;
  height: 26px;
  border-left: 1px solid var(--line-strong);
  background-image: linear-gradient(to right, transparent calc(25% - 1px), var(--line) 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), var(--line) 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), var(--line) 75%, transparent calc(75% + 1px));
}

.criticalSpan {
  position: absolute;
  top: 3px;
  left: var(--path-left);
  display: flex;
  width: var(--path-width);
  min-width: 6px;
  max-width: calc(100% - var(--path-left));
  height: 20px;
  align-items: center;
  overflow: hidden;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line));
  border-radius: 4px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.criticalSpan.critical { border-color: color-mix(in srgb, var(--orange) 55%, var(--line)); background: var(--orange-soft); color: var(--orange); }
.criticalSpan.error { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.criticalSpan.pending { border-style: dashed; }

.criticalSpan b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.criticalPathCaveat {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 11px;
  color: var(--text-muted);
  font-size: 11px;
}

.metricProvenance,
.indexDiagnostics {
  margin-top: 14px;
  overflow: hidden;
  box-shadow: none;
}

.metricProvenance > header,
.indexDiagnostics > header,
.redactionReasons > header,
.projectBudgetPanel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.metricProvenance > header > span:first-child,
.indexDiagnostics > header > span:first-child,
.redactionReasons > header,
.projectBudgetPanel > header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.metricProvenance header em,
.indexDiagnostics header em,
.redactionReasons header em,
.projectBudgetPanel header p {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.metricProvenance > header > span:last-child,
.indexDiagnostics > header > b,
.projectBudgetPanel > header > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.metricProvenance > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 150px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.metricProvenance > div:last-child { border-bottom: 0; }
.metricProvenance > div > span { display: flex; min-width: 0; align-items: center; gap: 9px; }
.metricProvenance > div > span > span { display: flex; min-width: 0; flex-direction: column; }
.metricProvenance > div em,
.metricProvenance > div small { color: var(--text-muted); font-size: 10px; font-style: normal; }
.metricProvenance > div b { font-size: 10px; text-align: right; }
.metricProvenance > div b.measured { color: var(--green); }
.metricProvenance > div b.estimated { color: var(--orange); }
.metricProvenance > div b.missing { color: var(--text-muted); }

.indexDiagnostics > header > b.stale { color: var(--orange); }
.indexDiagnostics > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.indexDiagnostics > div > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.indexDiagnostics > div > span:last-child { border-right: 0; }
.indexDiagnostics > div em { color: var(--text-muted); font-size: 9px; font-style: normal; }
.indexDiagnostics > div strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.indexDiagnostics > p { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 10px; }

.projectBudgetPanel {
  margin-top: 16px;
  overflow: hidden;
  box-shadow: none;
}

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

.budgetMeter {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.budgetMeter > span { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 8px; }
.budgetMeter em,
.budgetMeter small { color: var(--text-muted); font-size: 10px; font-style: normal; }
.budgetMeter strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.budgetMeter > i { height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-muted); }
.budgetMeter > i > b { display: block; width: var(--budget-progress); height: 100%; border-radius: inherit; background: var(--green); transition: width 420ms var(--ease); }
.budgetMeter.near > i > b { background: var(--orange); }
.budgetMeter.over > i > b { background: var(--red); }
.budgetMeter.success.within > i > b { background: var(--green); }

.projectOutcomeStrip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 14px;
}

.projectBudgetEditor {
  margin: 14px;
  border-top: 1px solid var(--line);
}

.projectBudgetEditor summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0 0;
  color: var(--blue);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.projectBudgetEditor summary::-webkit-details-marker { display: none; }
.projectBudgetEditor > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding-top: 12px; }
.projectBudgetEditor label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.projectBudgetEditor label span { color: var(--text-muted); font-size: 10px; }
.projectBudgetEditor input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

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

.notificationRules summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
}

.notificationRules summary::-webkit-details-marker { display: none; }
.notificationRules summary > span { display: flex; flex-direction: column; gap: 2px; }
.notificationRules summary em { color: var(--text-muted); font-size: 10px; font-style: normal; }
.notificationRules[open] summary > svg { transform: rotate(180deg); }
.notificationRules > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 0 0 14px; }
.notificationRules label { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.notificationRules input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--green); }
.quietHours { display: flex; align-items: center; gap: 7px; }
.quietHours input { width: 105px; min-height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

.privacyDialog { width: min(760px, calc(100vw - 32px)); }
.privacyStatus { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: start; padding: 16px; box-shadow: none; }
.privacyStatus > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); }
.privacyStatus.locked > span { background: var(--red-soft); color: var(--red); }
.privacyStatus div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.privacyStatus em { color: var(--text-muted); font-size: 10px; font-style: normal; text-transform: uppercase; }
.privacyStatus strong { font-size: 15px; }
.privacyStatus p { color: var(--text-soft); font-size: 11px; }

.privacyRolePicker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.privacyRolePicker button { display: grid; min-width: 0; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); text-align: left; }
.privacyRolePicker button.selected { border-color: color-mix(in srgb, var(--green) 48%, var(--line)); background: var(--green-soft); }
.privacyRolePicker button > svg:first-child { color: var(--text-muted); }
.privacyRolePicker button.selected > svg { color: var(--green); }
.privacyRolePicker span { display: flex; min-width: 0; flex-direction: column; }
.privacyRolePicker strong,
.privacyRolePicker em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.privacyRolePicker em { color: var(--text-muted); font-size: 9px; font-style: normal; }

.privacyMatrix { margin-top: 12px; overflow: hidden; box-shadow: none; }
.privacyMatrix > header,
.privacyMatrix > div { display: grid; grid-template-columns: minmax(160px, 1.2fr) repeat(3, minmax(95px, 0.8fr)); align-items: center; }
.privacyMatrix > header { padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-muted); color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.privacyMatrix > div { min-height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.privacyMatrix > div:last-child { border-bottom: 0; }
.privacyMatrix > div > strong { font-size: 11px; }
.privacyMatrix > div > span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; }
.privacyMatrix span.allowed { color: var(--green); }
.privacyMatrix span.limited { color: var(--orange); }
.privacyMatrix span.denied { color: var(--text-muted); }
.privacyMatrix svg { width: 13px; height: 13px; }

.redactionReasons { margin-top: 12px; overflow: hidden; box-shadow: none; }
.redactionReasons > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.redactionReasons > div > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-soft); font-size: 10px; }
.redactionReasons svg { width: 14px; height: 14px; color: var(--orange); }

.emergencyLock { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 14px; box-shadow: none; }
.emergencyLock > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; background: var(--red-soft); color: var(--red); }
.emergencyLock > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.emergencyLock p { color: var(--text-muted); font-size: 10px; }

.compareVerdict { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px; box-shadow: none; }
.compareVerdict > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; background: var(--surface-muted); }
.compareVerdict.improved > span { background: var(--green-soft); color: var(--green); }
.compareVerdict.regressed > span { background: var(--orange-soft); color: var(--orange); }
.compareVerdict > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.compareVerdict em,
.compareVerdict p { color: var(--text-muted); font-size: 10px; font-style: normal; }
.compareVerdict > b { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 9px; }

@media (max-width: 920px) {
  .sinceVisitPanel { grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr); }
  .sinceVisitSessions { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .sinceVisitFacts { border-right: 0; }
  .projectBudgetEditor > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .projectBudgetEditor .primaryButton { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .sinceVisitPanel { display: block; margin: 0 0 12px; }
  .sinceVisitPanel > header,
  .sinceVisitFacts,
  .sinceVisitSessions { padding-inline: 13px; }
  .sinceVisitFacts { border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sinceVisitSessions { border-top: 0; }

  .regressionPanel,
  .criticalPathPanel { margin-inline: -16px; padding: 14px 16px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
  .regressionPanel .sectionHeader,
  .criticalPathPanel .sectionHeader { align-items: flex-start; }
  .regressionMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regressionMetrics > span:nth-child(2) { border-right: 0; }
  .regressionMetrics > span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .regressionPanel > footer { align-items: flex-start; flex-direction: column; }
  .criticalLane { grid-template-columns: 34px minmax(0, 1fr); }
  .criticalLane > em { font-size: 8px; }
  .criticalSpan b { display: none; }
  .criticalPathSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .criticalPathSummary > span { padding-inline: 8px; }
  .criticalPathSummary strong { font-size: 13px; }

  .metricProvenance > div { grid-template-columns: minmax(0, 1fr) 74px; }
  .metricProvenance > div > small { grid-column: 1 / -1; padding-left: 27px; }
  .indexDiagnostics > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indexDiagnostics > div > span:nth-child(2) { border-right: 0; }
  .indexDiagnostics > div > span:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .projectBudgetMeters,
  .projectBudgetEditor > div { grid-template-columns: minmax(0, 1fr); }
  .projectOutcomeStrip { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 12px; }
  .projectOutcomeStrip > span { padding-inline: 7px; }
  .projectOutcomeStrip strong { font-size: 13px; }
  .projectBudgetEditor .primaryButton { grid-column: auto; }

  .notificationRules > div { grid-template-columns: minmax(0, 1fr); }
  .quietHours { justify-content: space-between; }

  .privacyDialog { width: 100%; }
  .privacyRolePicker { grid-template-columns: minmax(0, 1fr); }
  .privacyMatrix { display: grid; gap: 8px; overflow: visible; border: 0; background: transparent; }
  .privacyMatrix > header { display: none; }
  .privacyMatrix > div {
    min-width: 0;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 10px 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .privacyMatrix > div:last-child { border-bottom: 1px solid var(--line); }
  .privacyMatrix > div > strong { grid-column: 1 / -1; font-size: 12px; }
  .privacyMatrix > div > span {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    min-width: 0;
    font-size: 8px;
    line-height: 1.25;
  }
  .privacyMatrix > div > span::before {
    content: attr(data-role);
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .emergencyLock { grid-template-columns: 36px minmax(0, 1fr); }
  .emergencyLock > button { grid-column: 1 / -1; width: 100%; }
  .compareVerdict { grid-template-columns: 38px minmax(0, 1fr); }
  .compareVerdict > b { grid-column: 2; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #1c1c1e;
  --surface: #242426;
  --surface-raised: #2b2b2e;
  --surface-muted: #303033;
  --sidebar: rgba(32, 32, 35, 0.92);
  --text: #f5f5f7;
  --text-soft: #c3c3ca;
  --text-muted: #91919a;
  --line: #3c3c40;
  --line-strong: #515157;
  --green: #3dcc8c;
  --green-soft: rgba(61, 204, 140, 0.12);
  --cyan: #44bdd0;
  --cyan-soft: rgba(68, 189, 208, 0.13);
  --teal: #58c8be;
  --orange: #f6a13e;
  --orange-soft: rgba(246, 161, 62, 0.13);
  --red: #ff6b68;
  --red-soft: rgba(255, 107, 104, 0.13);
  --blue: #65a1ff;
  --graphite: #9da2ad;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 10px 28px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.5), 0 3px 16px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--app-bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

h1,
h2,
h3,
p,
blockquote,
dl,
dd {
  margin: 0;
}

kbd {
  min-width: 22px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 0 var(--line);
}

.hidden {
  display: none !important;
}

.mobileOnly,
.mobileBrand,
.bottomNav,
.mobileFilterButton {
  display: none;
}

.appShell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  background: var(--app-bg);
}

.sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: 18px 12px 14px;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}

.brandButton,
.mobileBrand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
}

.brandMark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 8px;
  background: #12151a;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 5px rgba(0, 0, 0, 0.16);
}

.brandMark svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.searchTrigger,
.globalSearch {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.searchTrigger:hover,
.globalSearch:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.searchTrigger span,
.globalSearch span {
  flex: 1;
}

.searchTrigger svg,
.globalSearch svg {
  width: 15px;
  height: 15px;
}

.sideNav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sideNav button,
.preferencesTrigger {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease);
}

.sideNav button:hover,
.preferencesTrigger:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}

.sideNav button:active,
.preferencesTrigger:active {
  transform: scale(0.985);
}

.sideNav button.selected {
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
  font-weight: 650;
}

.sideNav button.selected svg {
  color: var(--green);
}

.sideNav em {
  min-width: 20px;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.preferencesTrigger {
  margin-top: auto;
}

.appMain {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 64px auto minmax(0, 1fr);
}

.globalBar {
  position: relative;
  z-index: 25;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--app-bg) 85%, transparent);
  backdrop-filter: saturate(150%) blur(22px);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
}

.globalSearch {
  width: 220px;
  background: var(--surface);
}

.liveCluster,
.liveStatus {
  display: flex;
  align-items: center;
}

.liveCluster {
  gap: 11px;
  color: var(--text-muted);
  font-size: 12px;
}

.liveStatus {
  gap: 7px;
  color: var(--text);
}

.liveStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent);
  animation: livePulse 2.2s ease-in-out infinite;
}

.liveStatus.demo i {
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 13%, transparent);
  animation: none;
}

.liveStatus.shared i {
  background: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 13%, transparent);
}

.liveStatus b {
  font-weight: 650;
}

.updateLabel {
  min-width: 88px;
  text-align: right;
}

.iconButton {
  position: relative;
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}

.iconButton:hover {
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.iconButton:active {
  transform: scale(0.94);
}

.iconButton.selected {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.languageToggle {
  display: inline-flex;
  width: auto;
  min-width: 52px;
  flex-basis: auto;
  gap: 5px;
  padding: 0 9px;
}

.authControl {
  position: relative;
  display: flex;
  width: auto;
  max-width: 188px;
  height: 38px;
  min-width: 92px;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}

.authControl:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.authControl:active {
  transform: scale(0.97);
}

.authControl.demo {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--line));
}

.authControl.live {
  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 62%, var(--surface));
}

.authControl.shared {
  border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
  background: color-mix(in srgb, var(--cyan-soft) 62%, var(--surface));
}

.authAvatar,
.accountAvatar {
  display: grid;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}

.authAvatar {
  width: 28px;
  height: 28px;
}

.authControl.live .authAvatar {
  background: var(--green-soft);
  color: var(--green);
}

.authControl.shared .authAvatar {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.authAvatar img,
.accountAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.authAvatar svg {
  width: 15px;
  height: 15px;
}

.authAvatar b {
  font-size: 11px;
}

.authControlText {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}

.authControlText b,
.authControlText em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authControlText b {
  max-width: 126px;
  font-size: 11px;
  font-weight: 680;
}

.authControlText em {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 8px;
  font-style: normal;
}

.languageToggle svg {
  width: 16px;
  height: 16px;
}

.languageToggle span {
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

[data-tooltip]::after {
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  left: 50%;
  max-width: 170px;
  padding: 5px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--surface);
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.globalBar .liveCluster [data-tooltip]::after,
.pageActions [data-tooltip]::after,
.detailActions [data-tooltip]::after {
  right: 0;
  left: auto;
  transform: translate(0, -3px);
}

.globalBar .liveCluster [data-tooltip]:hover::after,
.globalBar .liveCluster [data-tooltip]:focus-visible::after,
.pageActions [data-tooltip]:hover::after,
.pageActions [data-tooltip]:focus-visible::after,
.detailActions [data-tooltip]:hover::after,
.detailActions [data-tooltip]:focus-visible::after {
  transform: translate(0, 0);
}

.spinning svg {
  animation: spin 800ms linear infinite;
}

.connectionBanner {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 8px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line));
  background: var(--orange-soft);
  color: var(--text-soft);
  font-size: 12px;
}

.connectionBanner svg {
  width: 16px;
  color: var(--orange);
}

.connectionBanner span {
  flex: 1;
}

.connectionBanner button {
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--orange);
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
}

.viewHost {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.page {
  width: min(100%, 1480px);
  min-height: 100%;
  margin: 0 auto;
  padding: 22px 28px 54px;
}

.pageHeader {
  display: flex;
  min-height: 72px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 0 4px 16px;
}

.pageHeader h1,
.detailTitleRow h1 {
  color: var(--text);
  font-size: 30px;
  font-weight: 720;
  line-height: 1.13;
}

.pageHeader p,
.detailHeader p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

.pageHeader p span {
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.pageActions,
.detailActions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.primaryButton,
.secondaryButton,
.textButton {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 620;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}

.primaryButton {
  background: var(--green);
  color: #ffffff;
}

.primaryButton:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--green) 28%, transparent);
}

.secondaryButton {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
}

.secondaryButton:hover {
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.textButton {
  padding-inline: 3px;
  background: transparent;
  color: var(--blue);
  text-decoration: none;
}

.textButton svg,
.primaryButton svg,
.secondaryButton svg {
  width: 15px;
  height: 15px;
}

.primaryButton:active,
.secondaryButton:active,
.textButton:active {
  transform: scale(0.97);
}

.segmented {
  display: inline-flex;
  min-height: 36px;
  align-items: stretch;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.segmented button {
  min-width: 76px;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 550;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease);
}

.segmented button:hover {
  color: var(--text);
}

.segmented button.on {
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}

.segmented button:active {
  transform: scale(0.97);
}

.segmented.compact {
  min-height: 34px;
}

.segmented.compact button {
  min-width: 66px;
  padding-inline: 10px;
}

.metricBand,
.detailMetricBand {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}

.metricBand {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.metricBandItem {
  display: flex;
  min-width: 0;
  min-height: 94px;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
}

.metricBandItem + .metricBandItem {
  border-left: 1px solid var(--line);
}

.metricGlyph {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-soft);
}

.metricBandItem.green .metricGlyph {
  background: var(--green-soft);
  color: var(--green);
}

.metricBandItem.cyan .metricGlyph {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.metricBandItem > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.metricBandItem em,
.metricBandItem small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metricBandItem strong {
  overflow: hidden;
  margin: 2px 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 710;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overviewFrame {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(280px, 0.85fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.weekPanel,
.goalPanel,
.recentPanel,
.momentumPanel {
  min-width: 0;
  padding: 18px 20px;
}

.weekPanel,
.goalPanel {
  border-bottom: 1px solid var(--line);
}

.goalPanel,
.momentumPanel {
  border-left: 1px solid var(--line);
}

.goalPanel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--text);
  text-align: center;
}

.goalPanel:hover {
  background: color-mix(in srgb, var(--orange) 3%, transparent);
}

.goalTop {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}

.goalTop svg {
  width: 15px;
  color: var(--orange);
}

.goalRing {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  margin: 10px 0 8px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--orange) var(--goal-progress), var(--surface-muted) 0);
}

.goalRing::after {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.goalRing > span {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
}

.goalRing strong {
  font-size: 24px;
  line-height: 1;
}

.goalRing em {
  color: var(--text-soft);
  font-size: 13px;
  font-style: normal;
}

.goalRing small {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.goalPanel > b {
  color: var(--orange);
  font-size: 12px;
}

.goalPanel > em {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}

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

.sectionHeader.inline {
  align-items: center;
}

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

.sectionHeader > div > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sectionHeader h2 {
  color: var(--text);
  font-size: 16px;
  font-weight: 690;
  line-height: 1.25;
}

.sectionHeader p,
.sectionHeader > span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 560;
  white-space: nowrap;
}

.change svg {
  width: 13px;
  height: 13px;
}

.change.up {
  color: var(--green);
}

.change.down {
  color: var(--red);
}

.weeklyChart {
  display: grid;
  height: 255px;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: 8px;
  padding: 10px 6px 0;
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 62px, var(--line) 63px, transparent 64px);
}

.chartColumn {
  display: grid;
  min-width: 0;
  grid-template-rows: 24px minmax(0, 1fr) 24px;
  align-items: end;
  padding: 0 4px;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-muted);
}

.chartColumn:hover,
.chartColumn.selected {
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
}

.chartColumn strong {
  align-self: center;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 620;
  opacity: 0;
  text-align: center;
  transition: opacity 140ms ease;
}

.chartColumn:hover strong,
.chartColumn.selected strong {
  opacity: 1;
}

.chartColumn em {
  overflow: hidden;
  align-self: center;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chartPlot {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: end;
  justify-content: center;
}

.chartStack {
  display: flex;
  width: min(58px, 74%);
  height: var(--bar-height);
  min-height: 2px;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 4px 4px 1px 1px;
  transform-origin: bottom;
  animation: barReveal 520ms var(--ease) both;
  animation-delay: var(--delay);
}

.chartStack:not(.tokens) > i {
  width: 100%;
  height: 100%;
  background: var(--green);
}

.chartStack.agentMs > i {
  background: var(--orange);
}

.chartStack i.uncached,
.reportBar span i.uncached,
.tokenMixTrack i.uncached,
.chartLegend i.uncached,
.tokenMixLabels i.uncached {
  background: var(--cyan);
}

.chartStack i.cached,
.reportBar span i.cached,
.tokenMixTrack i.cached,
.chartLegend i.cached,
.tokenMixLabels i.cached {
  background: var(--teal);
}

.chartStack i.output,
.reportBar span i.output,
.tokenMixTrack i.output,
.chartLegend i.output,
.tokenMixLabels i.output {
  background: var(--orange);
}

.chartStack i.reasoning,
.reportBar span i.reasoning,
.tokenMixTrack i.reasoning,
.chartLegend i.reasoning,
.tokenMixLabels i.reasoning {
  background: var(--graphite);
}

.chartLegend {
  display: flex;
  min-height: 31px;
  align-items: end;
  gap: 12px;
  color: var(--text-muted);
  font-size: 10px;
}

.chartLegend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chartLegend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.chartLegend button {
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-size: 10px;
}

.recentPanel,
.momentumPanel {
  min-height: 280px;
}

.compactList .sessionRow {
  min-height: 56px;
  grid-template-columns: 7px minmax(150px, 1.5fr) minmax(300px, 2fr) 28px;
  padding: 8px 4px;
}

.compactList .sessionIdentity p,
.compactList .rowPin {
  display: none;
}

.compactList .sessionMeta {
  grid-template-columns: repeat(5, minmax(48px, 1fr));
}

.compactList .sessionMeta > span:first-child {
  display: none;
}

.compactList .sessionMeta em {
  display: none;
}

.compactList .sessionMeta b {
  font-size: 11px;
}

.heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8px, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  width: 100%;
  height: 108px;
  padding: 4px 0 10px;
}

.heatCell {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted) 11%, transparent);
  transition: transform 150ms var(--ease), box-shadow 150ms ease;
}

.heatCell:not(.blank):hover {
  z-index: 2;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--green);
  transform: scale(1.3);
}

.heatCell.blank {
  visibility: hidden;
}

.heatCell.level1 {
  background: color-mix(in srgb, var(--green) 24%, var(--surface));
}

.heatCell.level2 {
  background: color-mix(in srgb, var(--green) 43%, var(--surface));
}

.heatCell.level3 {
  background: color-mix(in srgb, var(--green) 68%, var(--surface));
}

.heatCell.level4 {
  background: var(--green);
}

.momentumStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.momentumStats > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px 1fr;
  padding: 13px 8px 2px;
}

.momentumStats > span + span {
  border-left: 1px solid var(--line);
}

.momentumStats svg {
  grid-row: 1 / 3;
  width: 15px;
  color: var(--green);
}

.momentumStats > span:first-child svg {
  color: var(--orange);
}

.momentumStats em,
.momentumStats small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.momentumStats strong {
  font-size: 17px;
  line-height: 1.35;
}

.momentumStats small {
  display: block;
  font-weight: 500;
}

.projectSection,
.periodSection {
  margin-top: 20px;
  padding: 18px 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.projectRows > button {
  display: grid;
  width: 100%;
  min-height: 60px;
  grid-template-columns: 36px minmax(220px, 2fr) repeat(3, minmax(92px, 0.7fr)) 20px;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  transition: background 150ms ease, padding 150ms ease;
}

.projectRows > button:hover {
  padding-inline: 9px;
  background: var(--surface-muted);
}

.projectRank {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.projectIdentity,
.projectRows > button > span:not(.projectRank) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.projectIdentity strong,
.projectRows b {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectRows em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectRows svg {
  width: 15px;
  color: var(--text-muted);
}

.dataCaveat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 18px;
  color: var(--text-muted);
  font-size: 10px;
  text-align: center;
}

.dataCaveat svg {
  width: 13px;
}

.sessionsHeader {
  align-items: center;
}

.clientScope {
  display: flex;
  min-width: 0;
  align-items: center;
  margin-bottom: 12px;
}

.clientSegmented {
  min-height: 40px;
}

.clientSegmented button {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.clientSegmented button svg {
  width: 14px;
  height: 14px;
}

.clientSegmented button em {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

.clientSegmented button.on em {
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  color: var(--blue);
}

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

.pageSearch,
.inlineSearch {
  display: flex;
  min-width: 0;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pageSearch:focus-within,
.inlineSearch:focus-within {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.pageSearch svg,
.inlineSearch svg {
  width: 16px;
  color: var(--text-muted);
}

.pageSearch input,
.inlineSearch input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.pageSearch input::placeholder,
.inlineSearch input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

.sortControl {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
}

select {
  min-height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.sessionStatusStrip {
  display: flex;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 11px;
}

.sessionStatusStrip > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sessionStatusStrip b {
  color: var(--text-soft);
  font-weight: 620;
}

.sessionStatusStrip em {
  font-style: normal;
}

.sessionList {
  min-width: 0;
}

.sessionGroups {
  min-width: 0;
}

.sessionSourceGroup + .sessionSourceGroup {
  margin-top: 20px;
}

.sessionSourceHeader {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  min-height: 48px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  backdrop-filter: blur(18px);
}

.sessionSourceGroup.sdk .sessionSourceHeader {
  background: color-mix(in srgb, var(--cyan) 6%, var(--surface));
}

.sessionSourceGlyph {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.sessionSourceGroup.sdk .sessionSourceGlyph {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.sessionSourceGlyph svg {
  width: 15px;
  height: 15px;
}

.sessionSourceHeader > span:nth-child(2) {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

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

.sessionSourceHeader em,
.sessionSourceLive {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.sessionSourceLive {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sessionSourceLive .statusDot {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  box-shadow: none;
}

.fullList {
  background: var(--surface);
}

.sessionRow {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 8px minmax(220px, 1.65fr) minmax(520px, 2.4fr) 32px 18px;
  align-items: center;
  gap: 13px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease);
  animation: rowEnter 380ms var(--ease) both;
  animation-delay: calc(var(--row-index) * 22ms);
}

.sessionRow:hover {
  z-index: 1;
  background: var(--surface-muted);
}

.sessionRow:active {
  transform: scale(0.997);
}

.sessionRow.live::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--green);
  content: "";
}

.sessionRow.pinned {
  background: color-mix(in srgb, var(--orange) 3%, var(--surface));
}

.statusDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.statusDot.active {
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent);
}

.statusDot.warm {
  background: var(--orange);
}

.statusDot.idle {
  background: var(--text-muted);
}

.sessionIdentity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.sessionIdentity strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionIdentity > span {
  display: flex;
  overflow: hidden;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionClientDot {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--blue);
}

.sessionClientDot.sdk {
  background: var(--cyan);
}

.sessionIdentity p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.sessionMeta {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(62px, 1fr));
  align-items: center;
  gap: 9px;
}

.sessionMeta > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sessionMeta em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sessionMeta b {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionMeta .sessionTokens b {
  color: var(--cyan);
  font-weight: 700;
}

.statusText {
  color: var(--text-muted) !important;
}

.statusText.active {
  color: var(--green) !important;
}

.statusText.warm {
  color: var(--orange) !important;
}

.rowPin {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  opacity: 0;
}

.sessionRow:hover .rowPin,
.rowPin.on,
.rowPin:focus-visible {
  opacity: 1;
}

.rowPin:hover,
.rowPin.on {
  background: var(--orange-soft);
  color: var(--orange);
}

.rowPin svg,
.rowChevron {
  width: 15px;
  height: 15px;
}

.rowChevron {
  color: var(--text-muted);
  transition: transform 160ms var(--ease);
}

.sessionRow:hover .rowChevron {
  transform: translateX(3px);
}

.detailPage {
  padding-top: 14px;
}

.detailHeader {
  padding: 0 0 14px;
}

.backLink {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
  padding: 0 4px 0 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
}

.backLink:hover {
  color: var(--blue);
}

.backLink svg {
  width: 15px;
}

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

.detailTitleRow > div:first-child {
  min-width: 0;
}

.detailTitleRow h1 {
  overflow-wrap: anywhere;
}

.detailTitleRow p {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusLine {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 11px;
  font-weight: 650;
}

.detailPrompt {
  display: -webkit-box;
  max-width: 920px;
  overflow: hidden;
  margin-top: 10px !important;
  color: var(--text-soft) !important;
  font-size: 12px !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.detailMetricBand {
  grid-template-columns: repeat(5, minmax(130px, 0.7fr)) minmax(320px, 1.55fr);
  margin-bottom: 0;
}

.detailMetricBand .metricBandItem {
  min-height: 91px;
  padding: 12px 14px;
}

.detailMetricBand .metricGlyph {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.detailMetricBand .metricGlyph svg {
  width: 16px;
}

.detailMetricBand .metricBandItem strong {
  font-size: 18px;
}

.detailTokenMix {
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 12px 16px;
  border-left: 1px solid var(--line);
}

.tokenMix {
  width: 100%;
  min-width: 0;
}

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

.tokenMixLabels span {
  display: grid;
  min-width: 0;
  grid-template-columns: 7px 1fr;
  align-items: center;
  column-gap: 5px;
}

.tokenMixLabels i {
  width: 6px;
  height: 6px;
  grid-row: 1 / 3;
  border-radius: 50%;
}

.tokenMixLabels b,
.tokenMixLabels em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tokenMixLabels em {
  color: var(--text-soft);
  font-weight: 650;
}

.tokenMixTrack {
  display: flex;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-muted);
}

.tokenMixTrack i + i {
  border-left: 1px solid var(--surface);
}

.detailTabs {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  min-height: 50px;
  align-items: end;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--app-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.detailTabs button {
  position: relative;
  display: inline-flex;
  height: 49px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 570;
}

.detailTabs button::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  content: "";
}

.detailTabs button.on {
  color: var(--text);
  font-weight: 680;
}

.detailTabs button.on::after {
  background: var(--green);
}

.detailTabs em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.detailLayout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 310px;
}

.detailContent {
  min-width: 0;
  padding: 18px 20px 20px 4px;
}

.detailRail {
  min-width: 0;
  padding: 20px 4px 20px 20px;
  border-left: 1px solid var(--line);
}

.detailRail > section + section {
  margin-top: 20px;
}

.detailRail h3,
.dataSection h2 {
  font-size: 14px;
  font-weight: 680;
}

.detailRail dl {
  margin-top: 10px;
}

.detailRail dl div {
  display: grid;
  min-height: 34px;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.detailRail dt,
.detailRail dd {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailRail dd {
  color: var(--text-soft);
  font-weight: 580;
  text-align: right;
}

.relationshipCard {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.relationshipCard > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.relationshipCard > span svg {
  width: 13px;
}

.relationshipCard button {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 15px;
  gap: 2px 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 5px;
  background: var(--surface-raised);
  text-align: left;
}

.relationshipCard button strong,
.relationshipCard button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.relationshipCard button em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.relationshipCard button svg {
  width: 14px;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--text-muted);
}

.currentStepCard {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.currentStepCard header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.currentStepCard strong {
  display: block;
  margin-top: 13px;
  font-size: 19px;
}

.currentStepCard p {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.miniProgress {
  height: 4px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-muted);
}

.miniProgress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.noteSection label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 650;
}

.noteSection textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.45;
}

.noteSection textarea:focus {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.noteSection > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 9px;
}

.noteSection svg {
  width: 11px;
}

.detailOverview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overviewNarrative,
.tokenBreakdownPanel,
.latestActivityPanel {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.overviewNarrative h2,
.tokenBreakdownPanel h2,
.latestActivityPanel h2 {
  font-size: 15px;
}

.overviewNarrative blockquote {
  max-width: 900px;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 3px solid var(--green);
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.detailQuickStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detailQuickStats span {
  display: grid;
  min-height: 70px;
  grid-template-columns: 24px 1fr;
  align-content: center;
  padding: 10px 14px;
}

.detailQuickStats span + span {
  border-left: 1px solid var(--line);
}

.detailQuickStats svg {
  grid-row: 1 / 3;
  width: 16px;
  color: var(--green);
}

.detailQuickStats em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.detailQuickStats strong {
  font-size: 18px;
}

.tokenBreakdownPanel > .tokenMix {
  margin-top: 18px;
}

.tokenBasisComparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.tokenBasisComparison span {
  display: flex;
  min-height: 62px;
  flex-direction: column;
  justify-content: center;
  padding: 8px 14px;
}

.tokenBasisComparison span + span {
  border-left: 1px solid var(--line);
}

.tokenBasisComparison em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.tokenBasisComparison b {
  margin-top: 2px;
  font-size: 16px;
}

.latestEvents article {
  display: grid;
  min-height: 54px;
  grid-template-columns: 30px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.eventIcon,
.toolGlyph {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.eventIcon svg,
.toolGlyph svg {
  width: 14px;
  height: 14px;
}

.eventIcon.tool,
.toolGlyph {
  background: var(--green-soft);
  color: var(--green);
}

.eventIcon.token {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.eventIcon.reasoning {
  background: var(--orange-soft);
  color: var(--orange);
}

.latestEvents strong,
.latestEvents p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latestEvents strong {
  display: block;
  font-size: 11px;
}

.latestEvents p,
.latestEvents time {
  color: var(--text-muted);
  font-size: 9px;
}

.latestEvents time {
  text-align: right;
}

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

.inlineSearch {
  height: 36px;
}

.timeRuler {
  display: grid;
  min-height: 42px;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 9px;
}

.timeRuler i {
  position: relative;
  height: 1px;
  background: var(--line);
}

.timeRuler i::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  content: "";
}

.timeRuler b {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--green);
  color: #ffffff;
  font-size: 9px;
}

.stepGroup {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.stepGroup + .stepGroup {
  margin-top: 10px;
}

.stepGroup summary,
.toolRow summary {
  list-style: none;
  cursor: pointer;
}

.stepGroup summary::-webkit-details-marker,
.toolRow summary::-webkit-details-marker {
  display: none;
}

.stepGroup > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: var(--surface-muted);
}

.stepGroup > summary > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 9px;
}

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

.stepGroup > summary em {
  color: var(--green);
  font-size: 9px;
  font-style: normal;
}

.stepGroup > summary b {
  color: var(--text-soft);
  font-size: 9px;
  font-weight: 580;
}

.stepGroup > summary svg {
  width: 14px;
  transition: transform 180ms var(--ease);
}

.stepGroup[open] > summary svg {
  transform: rotate(90deg);
}

.stepEvents {
  padding: 0 10px;
}

.timelineEvent {
  display: grid;
  min-width: 0;
  min-height: 53px;
  grid-template-columns: 28px 72px minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  border-top: 1px solid var(--line);
}

.timelineEvent:first-child {
  border-top: 0;
}

.timelineEvent time,
.timelineEvent > em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

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

.timelineEvent strong,
.timelineEvent p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timelineEvent strong {
  font-size: 11px;
}

.timelineEvent p {
  margin-top: 2px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.eventStatus {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
}

.eventStatus.done {
  color: var(--green);
}

.eventStatus.pending {
  color: var(--orange);
}

.eventStatus.error {
  color: var(--red);
}

.dataSection {
  min-width: 0;
}

.dataTable {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.dataTableHead,
.dataTableRow {
  display: grid;
  grid-template-columns: 60px 100px repeat(3, minmax(70px, 0.75fr)) minmax(120px, 1.5fr) 70px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.dataTableHead {
  min-height: 38px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.dataTableRow {
  min-height: 43px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 10px;
}

.dataTableRow b,
.dataTableRow strong {
  color: var(--text);
  font-size: 10px;
}

.dataTableRow time {
  color: var(--text-muted);
  font-size: 9px;
}

.miniTokenBar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-muted);
}

.miniTokenBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.toolRows {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

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

.toolRow summary {
  display: grid;
  min-height: 58px;
  grid-template-columns: 34px minmax(180px, 1fr) 90px 70px 60px 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.toolRow summary:hover {
  background: var(--surface-muted);
}

.toolIdentity {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.toolIdentity strong,
.toolIdentity em {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolIdentity em,
.toolRow time,
.toolRow summary > em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.toolRow summary > svg {
  width: 14px;
  color: var(--text-muted);
  transition: transform 180ms var(--ease);
}

.toolRow[open] summary > svg {
  transform: rotate(90deg);
}

.toolDetails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 12px 12px 56px;
}

.toolDetails b {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
}

.toolDetails pre {
  min-height: 58px;
  max-height: 170px;
  margin: 0;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.reportControls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.reportRange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.reportRange svg {
  width: 15px;
}

.reportChartPanel {
  padding: 18px 20px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.reportChart {
  position: relative;
  display: flex;
  height: 265px;
  align-items: stretch;
  gap: 8px;
  padding: 16px 8px 0;
}

.reportGridLines {
  position: absolute;
  inset: 16px 8px 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.reportGridLines i {
  width: 100%;
  height: 1px;
  background: var(--line);
}

.reportBar {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 30px;
  flex: 1;
  grid-template-rows: 22px minmax(0, 1fr) 27px;
  align-items: end;
  padding: 0 3px;
  border-radius: 5px 5px 0 0;
  background: transparent;
}

.reportBar:hover,
.reportBar.selected {
  background: color-mix(in srgb, var(--cyan) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 25%, transparent);
}

.reportBar strong {
  align-self: center;
  color: var(--text-soft);
  font-size: 9px;
  opacity: 0;
  text-align: center;
  white-space: nowrap;
}

.reportBar:hover strong,
.reportBar.selected strong {
  opacity: 1;
}

.reportBar > span {
  display: flex;
  width: min(58px, 76%);
  min-height: 2px;
  flex-direction: column-reverse;
  justify-self: center;
  overflow: hidden;
  border-radius: 4px 4px 1px 1px;
  transform-origin: bottom;
  animation: barReveal 520ms var(--ease) both;
  animation-delay: var(--delay);
}

.reportBar > span > i:only-child {
  width: 100%;
  height: 100%;
  background: var(--green);
}

.reportBar em {
  overflow: hidden;
  align-self: center;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportSummary {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.reportSummary > section {
  min-width: 0;
  padding: 15px 18px;
}

.reportSummary > section + section {
  border-left: 1px solid var(--line);
}

.reportSummary h2 {
  margin-bottom: 12px;
  font-size: 14px;
}

.reportSummary section > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.reportSummary section:last-child > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reportSummary section > div > span {
  display: flex;
  min-width: 0;
  min-height: 51px;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
}

.reportSummary section > div > span + span {
  border-left: 1px solid var(--line);
}

.reportSummary section:last-child > div > span {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-content: center;
}

.reportSummary svg {
  grid-row: 1 / 3;
  width: 14px;
  color: var(--green);
}

.reportSummary section:last-child span:first-child svg {
  color: var(--orange);
}

.reportSummary em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportSummary strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportSummary small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.2;
  white-space: normal;
}

.periodSection {
  padding-bottom: 0;
}

.reportTable {
  min-width: 0;
}

.reportTableHead,
.reportTableRow {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(7, minmax(72px, 0.65fr));
  align-items: center;
  gap: 9px;
}

.reportTableHead {
  min-height: 36px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

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

.reportRowGroup.selected {
  margin-inline: -20px;
  padding-inline: 20px;
  border-top-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.reportTableRow {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.reportTableRow:hover {
  background: var(--surface-muted);
}

.reportTableRow > span:first-child {
  display: grid;
  min-width: 0;
  grid-template-columns: 16px 1fr;
  align-items: center;
}

.reportTableRow svg {
  width: 13px;
  color: var(--text-muted);
  transition: transform 180ms var(--ease);
}

.reportRowGroup.selected .reportTableRow svg {
  transform: rotate(90deg);
}

.reportTableRow b,
.reportTableRow em {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportTableRow em {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.bucketSessions {
  padding: 6px 10px 12px 26px;
}

.bucketSessions h3 {
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.bucketSessions > button {
  display: grid;
  width: 100%;
  min-height: 40px;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(72px, 0.6fr)) 18px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.bucketSessions > button:hover {
  color: var(--blue);
}

.bucketSessions span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.bucketSessions strong,
.bucketSessions b,
.bucketSessions em {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bucketSessions em {
  color: var(--text-muted);
  font-style: normal;
}

.bucketSessions svg {
  width: 13px;
}

.bucketEmpty,
.emptyInline {
  padding: 16px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.emptyState {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

.emptyState > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  color: var(--text-muted);
}

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

.emptyState span {
  max-width: 360px;
  margin-top: 4px;
  font-size: 11px;
}

.loadingView {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.loadingView span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: loadingBounce 1.1s ease-in-out infinite;
}

.loadingView span:nth-child(2) {
  animation-delay: 120ms;
}

.loadingView span:nth-child(3) {
  animation-delay: 240ms;
}

.detailDataState {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
}

.detailDataState.loading {
  gap: 6px;
}

.detailDataState.loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: loadingBounce 1.1s ease-in-out infinite;
}

.detailDataState.loading span:nth-child(2) {
  animation-delay: 120ms;
}

.detailDataState.loading span:nth-child(3) {
  animation-delay: 240ms;
}

.detailDataState.error {
  flex-direction: column;
  gap: 6px;
  color: var(--text-muted);
  text-align: center;
}

.detailDataState.error > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--red);
}

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

.detailDataState.error span {
  max-width: 360px;
  font-size: 11px;
}

.detailDataState.error button {
  margin-top: 8px;
}

dialog {
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

dialog[open] {
  animation: dialogIn 220ms var(--ease) both;
}

.commandDialog {
  width: min(620px, calc(100vw - 32px));
  margin-top: 12vh;
}

.commandInputWrap {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--line);
}

.commandInputWrap > svg {
  color: var(--text-muted);
}

.commandInputWrap input {
  height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
}

.commandResults {
  max-height: min(440px, 60vh);
  overflow: auto;
  padding: 7px;
}

.commandResults > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 8px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.commandResults > button:hover,
.commandResults > button.selected {
  background: var(--surface-muted);
}

.commandResults > button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.commandResults strong,
.commandResults em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.commandResults em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.commandResults b {
  color: var(--cyan);
  font-size: 11px;
}

.commandResults svg {
  width: 14px;
  color: var(--text-muted);
}

.commandDialog > footer {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 9px;
}

.commandDialog footer span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.commandDialog footer kbd {
  min-width: 18px;
  padding-inline: 3px;
  font-size: 9px;
  line-height: 15px;
}

.sheetDialog {
  width: min(560px, calc(100vw - 32px));
}

.authDialog {
  width: min(440px, calc(100vw - 32px));
}

.authDialogContent {
  padding: 18px;
}

.authIntro,
.accountIdentity,
.accountAccess,
.ownerSetupNotice,
.authUnavailable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.authIntroIcon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: var(--radius);
  background: var(--green-soft);
  color: var(--green);
}

.authIntroIcon svg {
  width: 21px;
  height: 21px;
}

.authIntro strong,
.accountAccess strong,
.ownerSetupNotice strong,
.authUnavailable strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
}

.authIntro p,
.accountAccess p,
.ownerSetupNotice p,
.authUnavailable p {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.ownerSetupNotice,
.authUnavailable,
.accountAccess {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

.ownerSetupNotice > svg,
.authUnavailable > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  color: var(--orange);
}

.accountIdentity {
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.accountAvatar {
  width: 46px;
  height: 46px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
}

.accountIdentity > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.accountIdentity em,
.accountIdentity small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountIdentity strong {
  overflow: hidden;
  margin: 2px 0;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountAccess > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}

.accountAccess > span svg {
  width: 16px;
  height: 16px;
}

.accountAccess.authorized {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 58%, var(--surface));
}

.accountAccess.authorized > span {
  background: var(--green-soft);
  color: var(--green);
}

.accountAccess.viewer {
  border-color: color-mix(in srgb, var(--cyan) 34%, var(--line));
  background: color-mix(in srgb, var(--cyan-soft) 58%, var(--surface));
}

.accountAccess.viewer > span {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.sharedAccessNotice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cyan-soft) 54%, var(--surface));
  color: var(--cyan);
}

.sharedAccessNotice > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
}

.sharedAccessNotice span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

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

.sharedAccessNotice em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
}

.googleButtonSlot {
  display: grid;
  min-height: 46px;
  margin-top: 18px;
  place-items: center;
}

.googleButtonSlot > div,
.googleButtonSlot iframe {
  max-width: 100% !important;
}

.googleButtonLoading,
.authLoadingState {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.googleButtonLoading svg,
.authLoadingState svg {
  animation: spin 900ms linear infinite;
}

.googleButtonError {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--red);
  font-size: 10px;
}

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

.authLoadingState {
  min-height: 150px;
  justify-content: center;
}

.authPrivacy,
.authInlineError {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.5;
}

.authPrivacy svg,
.authInlineError svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 1px;
}

.authInlineError {
  color: var(--red);
}

.authActions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.authActions .secondaryButton {
  min-height: 36px;
}

.dangerButton {
  color: var(--red);
}

.dialogHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.dialogHeader h2 {
  font-size: 17px;
}

.dialogHeader p {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.settingRows {
  padding: 0 18px;
}

.settingRow {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.settingRow > span:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.settingRow b {
  font-size: 12px;
  font-weight: 650;
}

.settingRow em {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.settingRow select,
.goalInput {
  min-width: 140px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-muted);
  text-align: right;
}

.goalInput {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.goalInput input {
  width: 58px;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: right;
}

.goalInput em {
  margin: 0;
}

.switchRow input {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  appearance: none;
  border-radius: 14px;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 180ms ease;
}

.switchRow input::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  content: "";
  transition: transform 190ms var(--ease);
}

.switchRow input:checked {
  background: var(--green);
}

.switchRow input:checked::after {
  transform: translateX(18px);
}

.dialogActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px;
}

.dialogActions .primaryButton,
.dialogActions .secondaryButton {
  min-width: 100px;
}

.toastRegion {
  position: fixed;
  z-index: 120;
  top: 76px;
  right: 18px;
  display: flex;
  width: min(330px, calc(100vw - 36px));
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  animation: toastIn 280ms var(--ease) both;
}

.toast.leaving {
  animation: toastOut 260ms ease both;
}

.toast > svg {
  width: 20px;
  color: var(--green);
}

.toast span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.toast strong {
  font-size: 12px;
}

.toast em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.celebration {
  position: fixed;
  z-index: 110;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.celebration i {
  position: absolute;
  top: -20px;
  left: var(--x);
  display: none;
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--green);
}

.celebration i:nth-child(4n + 2) {
  background: var(--cyan);
}

.celebration i:nth-child(4n + 3) {
  background: var(--orange);
}

.celebration i:nth-child(4n + 4) {
  background: var(--graphite);
}

.celebration.run i {
  display: block;
  animation: confettiFall 1.5s ease-in both;
  animation-delay: var(--delay);
}

body[data-density="compact"] .fullList .sessionRow {
  min-height: 64px;
}

body[data-density="compact"] .fullList .sessionIdentity p {
  display: none;
}

.viewEnter {
  animation: viewIn 360ms var(--ease) both;
}

.suppressEntryAnimation .viewEnter,
.suppressEntryAnimation .sessionRow,
.suppressEntryAnimation .chartStack,
.suppressEntryAnimation .reportBar > span {
  animation: none !important;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rowEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes barReveal {
  from { opacity: 0; transform: scaleY(0.08); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes livePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 2%, transparent); }
}

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

@keyframes loadingBounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.45; }
  35% { transform: translateY(-7px); opacity: 1; }
}

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(14px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(12px); }
}

@keyframes confettiFall {
  from { opacity: 1; transform: translateY(-10px) rotate(var(--rotate)); }
  to { opacity: 0; transform: translateY(100vh) rotate(calc(var(--rotate) + 620deg)); }
}

.cleanDetailHeader {
  padding-bottom: 18px;
}

.cleanDetailHeader .backLink {
  margin-bottom: 4px;
}

.cleanDetailHeader .sessionHeaderMeta {
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
}

.cleanDetailHeader .detailPrompt {
  display: block;
  max-width: 980px;
  overflow: hidden;
  color: var(--text-soft) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionOverview {
  display: grid;
  gap: 18px;
}

.liveProgressBand {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(250px, 1.25fr) minmax(235px, 0.9fr) minmax(280px, 1fr);
  grid-template-areas:
    "lead timing numbers"
    "trace trace trace"
    "axis axis axis";
  gap: 18px 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.liveProgressLead {
  display: flex;
  min-width: 0;
  grid-area: lead;
  align-items: center;
  gap: 13px;
}

.liveProgressGlyph {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.liveProgressGlyph.active {
  background: var(--green-soft);
  color: var(--green);
  animation: liveBreathe 2.8s ease-in-out infinite;
}

.liveProgressGlyph.warm {
  background: var(--orange-soft);
  color: var(--orange);
}

.liveProgressGlyph svg {
  width: 20px;
  height: 20px;
}

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

.liveEyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font-size: 10px;
  font-weight: 680;
  text-transform: uppercase;
}

.liveProgressLead h2 {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text);
  font-size: 20px;
  font-weight: 710;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveProgressLead p {
  overflow: hidden;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveTiming {
  display: grid;
  min-width: 0;
  grid-area: timing;
  align-content: center;
  gap: 5px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.liveTiming span {
  display: flex;
  min-width: 0;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 10px;
}

.liveTiming b {
  overflow: hidden;
  color: var(--text-soft);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveNumbers {
  display: grid;
  min-width: 0;
  grid-area: numbers;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border-left: 1px solid var(--line);
}

.liveNumbers span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding-left: 18px;
}

.liveNumbers span + span {
  border-left: 1px solid var(--line);
}

.liveNumbers em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.liveNumbers strong {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text);
  font-size: 20px;
  font-weight: 710;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveTrace {
  display: grid;
  height: 38px;
  grid-area: trace;
  grid-template-columns: repeat(30, minmax(2px, 1fr));
  align-items: end;
  gap: 4px;
  padding-top: 6px;
  border-bottom: 1px solid var(--line);
}

.liveTrace i {
  display: block;
  height: var(--trace-height);
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--green) 55%, var(--surface-muted));
  transform-origin: bottom;
  animation: traceReveal 520ms var(--ease) both;
  animation-delay: var(--trace-delay);
}

.liveTrace i.latest {
  background: var(--green);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
}

.liveTraceAxis {
  display: grid;
  grid-area: axis;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  margin-top: -13px;
  color: var(--text-muted);
  font-size: 9px;
}

.liveTraceAxis span:nth-child(2) {
  text-align: center;
}

.liveTraceAxis b {
  color: var(--green);
  font-weight: 650;
}

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

.detailChartPanel {
  min-width: 0;
  padding: 18px 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.detailChartPanel .sectionHeader {
  align-items: center;
  margin-bottom: 10px;
}

.chartDirectLabels {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chartDirectLabels b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 580;
}

.chartDirectLabels i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.chartDirectLabels i.steps {
  background: var(--green);
}

.chartDirectLabels i.tools {
  background: var(--cyan);
}

.workPulsePlot {
  display: grid;
  height: 148px;
  grid-template-columns: repeat(30, minmax(2px, 1fr));
  align-items: end;
  gap: 4px;
  padding-top: 12px;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px));
}

.workPulsePlot > span {
  display: flex;
  height: 100%;
  flex-direction: column-reverse;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}

.workPulsePlot > span > i {
  display: block;
  min-height: 0;
  transform-origin: bottom;
  animation: pulseRise 560ms var(--ease) both;
  animation-delay: var(--pulse-delay);
}

.workPulsePlot i.steps {
  background: var(--green);
}

.workPulsePlot i.tools {
  background: var(--cyan);
}

.chartAxis {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  color: var(--text-muted);
  font-size: 9px;
}

.chartAxis i {
  height: 1px;
  background: var(--line);
}

.tokenPacePanel .sectionHeader > strong {
  color: var(--cyan);
  font-size: 16px;
  font-weight: 710;
  white-space: nowrap;
}

.tokenPacePanel .sectionHeader > strong em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 520;
}

.tokenPacePlot {
  position: relative;
  height: 148px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px));
}

.tokenPaceBars {
  position: absolute;
  inset: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(30, minmax(2px, 1fr));
  align-items: end;
  gap: 4px;
}

.tokenPaceBars span {
  display: flex;
  height: 100%;
  align-items: end;
  justify-content: center;
}

.tokenPaceBars i {
  display: block;
  width: 76%;
  height: var(--bar-height);
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--cyan) 58%, transparent);
  transform-origin: bottom;
  animation: pulseRise 560ms var(--ease) both;
  animation-delay: var(--bar-delay);
}

.tokenPacePlot svg {
  position: absolute;
  inset: 12px 0 0;
  width: 100%;
  height: calc(100% - 12px);
  overflow: visible;
  animation: lineReveal 620ms var(--ease) both;
  pointer-events: none;
}

.tokenPacePlot polyline {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.tokenPacePlot circle {
  fill: var(--surface);
  stroke: var(--orange);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chartInsight {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-size: 9px;
  text-align: left;
  text-decoration: none;
}

.chartInsight svg {
  width: 16px;
  color: var(--text-muted);
}

.chartInsight.healthy svg {
  color: var(--green);
}

.chartInsight.warning svg {
  color: var(--red);
}

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

.chartInsight b {
  margin-right: 6px;
  color: var(--text-soft);
  font-size: 10px;
}

.chartInsight > svg:last-child {
  width: 13px;
  color: var(--text-muted);
  transition: transform 160ms var(--ease);
}

.chartInsight:hover > svg:last-child {
  transform: translateX(3px);
}

.sessionOverviewLower {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.92fr);
  grid-template-areas: "activity explore";
  gap: 28px;
  padding-top: 2px;
}

.exploreSessionPanel {
  grid-area: explore;
}

.compactActivityPanel {
  grid-area: activity;
}

.exploreSessionPanel,
.compactActivityPanel {
  min-width: 0;
  padding-bottom: 4px;
  border-bottom: 0;
}

.exploreRows,
.compactActivityPanel .latestEvents {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.exploreRows a {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms var(--ease);
}

.exploreRows a:first-child {
  border-top: 0;
}

.exploreRows a:hover {
  background: var(--surface-muted);
}

.exploreRows a:active {
  transform: scale(0.995);
}

.exploreGlyph {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-soft);
}

.exploreGlyph svg {
  width: 14px;
  height: 14px;
}

.exploreRows a > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.exploreRows strong,
.exploreRows em,
.exploreRows b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.exploreRows em,
.exploreRows b {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 520;
}

.exploreRows a > svg {
  width: 14px;
  color: var(--text-muted);
  transition: transform 160ms var(--ease);
}

.exploreRows a:hover > svg {
  transform: translateX(3px);
}

.compactActivityPanel .latestEvents article {
  padding-inline: 4px;
}

.detailSubpageHeader {
  padding-bottom: 18px;
}

.detailBreadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 10px;
}

.detailBreadcrumb a {
  max-width: 220px;
  overflow: hidden;
  padding: 2px 3px;
  background: transparent;
  color: var(--blue);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailBreadcrumb svg {
  width: 12px;
  height: 12px;
}

.detailBreadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailSubpageHeader > .backLink {
  margin-bottom: 8px;
}

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

.subpageGlyph {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.subpageGlyph svg {
  width: 19px;
  height: 19px;
}

.detailSubpageTitle h1 {
  font-size: 28px;
  font-weight: 720;
  line-height: 1.15;
}

.detailSubpageTitle p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.detailSubpageTitle > strong {
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.detailSubpageContent {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sessionInfoPage {
  display: grid;
  gap: 0;
}

.sessionInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sessionInfoSection {
  min-width: 0;
  padding: 18px 4px;
}

.sessionInfoGrid .sessionInfoSection + .sessionInfoSection {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.sessionInfoPage > .sessionInfoSection {
  border-bottom: 1px solid var(--line);
}

.sessionInfoSection > header {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}

.sessionInfoSection > header > svg {
  width: 16px;
  margin-top: 1px;
  color: var(--cyan);
}

.sessionInfoSection h2 {
  font-size: 14px;
  font-weight: 690;
}

.sessionInfoSection header p {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 10px;
}

.sessionInfoRows div {
  display: grid;
  min-height: 35px;
  grid-template-columns: 125px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.sessionInfoRows dt,
.sessionInfoRows dd {
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.sessionInfoRows dd {
  overflow: hidden;
  color: var(--text-soft);
  font-weight: 580;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infoTokenSection > .tokenMix {
  max-width: 920px;
  margin-top: 4px;
}

.infoTokenSection .tokenBasisComparison {
  max-width: 920px;
}

.infoPromptSection blockquote {
  max-width: 920px;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.6;
}

.infoRelationshipSection > button {
  display: grid;
  width: min(100%, 720px);
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}

.infoRelationshipSection > button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.infoRelationshipSection strong,
.infoRelationshipSection em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infoRelationshipSection strong {
  font-size: 11px;
}

.infoRelationshipSection em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.infoRelationshipSection > button > svg {
  width: 14px;
  color: var(--text-muted);
}

.infoNoteSection textarea {
  width: min(100%, 720px);
}

.suppressEntryAnimation .liveProgressGlyph,
.suppressEntryAnimation .liveTrace i,
.suppressEntryAnimation .workPulsePlot i,
.suppressEntryAnimation .tokenPaceBars i,
.suppressEntryAnimation .tokenPacePlot svg {
  animation: none !important;
}

@keyframes traceReveal {
  from { opacity: 0; transform: scaleY(0.05); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes pulseRise {
  from { opacity: 0; transform: scaleY(0.04); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes lineReveal {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes liveBreathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 8%, transparent); }
}

@media (max-width: 1180px) {
  .appShell {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 10px;
  }

  .overviewFrame {
    grid-template-columns: minmax(0, 1.9fr) minmax(250px, 0.85fr);
  }

  .metricBandItem {
    padding-inline: 13px;
  }

  .metricGlyph {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .metricBandItem strong {
    font-size: 19px;
  }

  .sessionRow {
    grid-template-columns: 8px minmax(190px, 1.4fr) minmax(430px, 2fr) 30px 16px;
    gap: 9px;
  }

  .detailMetricBand {
    grid-template-columns: repeat(5, minmax(116px, 1fr));
  }

  .detailTokenMix {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

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

  .reportSummary > section + section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .reportTableHead,
  .reportTableRow {
    grid-template-columns: minmax(150px, 1.4fr) repeat(7, minmax(62px, 0.65fr));
    gap: 6px;
  }
}

@media (max-width: 920px) and (min-width: 761px) {
  .appShell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .brandButton {
    justify-content: center;
    padding: 0;
  }

  .brandButton > span:last-child,
  .searchTrigger span,
  .searchTrigger kbd,
  .sideNav span,
  .sideNav em,
  .preferencesTrigger span {
    display: none;
  }

  .searchTrigger {
    justify-content: center;
  }

  .sideNav button,
  .preferencesTrigger {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }

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

  .goalPanel,
  .momentumPanel {
    border-left: 0;
  }

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

  .recentPanel {
    border-bottom: 1px solid var(--line);
  }

  .sessionControls {
    grid-template-columns: minmax(180px, 1fr) auto;
  }

  .sessionControls .segmented {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .sessionRow {
    grid-template-columns: 8px minmax(180px, 1.25fr) minmax(340px, 1.8fr) 28px 16px;
  }

  .sessionMeta > span:nth-child(2),
  .sessionMeta > span:nth-child(5) {
    display: none;
  }

  .sessionMeta {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
  }

  .detailLayout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .detailRail {
    padding-left: 14px;
  }

  .reportControls {
    flex-wrap: wrap;
  }

  .reportRange {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow: hidden;
  }

  .appShell {
    display: block;
    height: 100dvh;
  }

  .sidebar {
    display: none;
  }

  .appMain {
    height: 100%;
    grid-template-rows: 64px auto minmax(0, 1fr);
  }

  .globalBar {
    padding: env(safe-area-inset-top) 14px 0;
  }

  .mobileBrand {
    display: flex;
    min-width: 0;
    padding: 0;
    font-size: 15px;
  }

  .mobileBrand .brandMark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .globalSearch,
  .updateLabel,
  #refreshNow {
    display: none;
  }

  .liveCluster {
    gap: 9px;
  }

  .liveStatus {
    font-size: 12px;
  }

  .globalBar .iconButton {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .globalBar .languageToggle {
    width: auto;
    min-width: 48px;
    flex-basis: auto;
    padding-inline: 8px;
  }

  .authControl {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    padding: 4px;
    justify-content: center;
  }

  .authControlText {
    display: none;
  }

  .authAvatar {
    width: 28px;
    height: 28px;
  }

  [data-tooltip]::after {
    display: none;
  }

  .connectionBanner {
    padding-inline: 14px;
  }

  .viewHost {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
    scrollbar-gutter: auto;
  }

  .bottomNav {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: calc(64px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(3, 1fr);
    padding: 4px 12px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: saturate(160%) blur(24px);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
  }

  .bottomNav button {
    display: flex;
    min-width: 0;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 560;
  }

  .bottomNav button.selected {
    color: var(--green);
  }

  .bottomNav svg {
    width: 20px;
    height: 20px;
  }

  .page {
    width: 100%;
    padding: 16px 14px 34px;
  }

  .pageHeader {
    min-height: 76px;
    align-items: center;
    gap: 12px;
    padding: 0 2px 14px;
  }

  .pageHeader h1,
  .detailTitleRow h1 {
    font-size: 27px;
    overflow-wrap: anywhere;
  }

  .pageHeader p {
    font-size: 12px;
  }

  .pageHeader .mobileOnly {
    display: inline-flex;
  }

  .pageHeader .mobileOnly span,
  .sessionsHeader .pageActions {
    display: none;
  }

  .metricBand {
    grid-template-columns: 1fr 1fr;
    margin-inline: -14px;
  }

  .metricBandItem {
    min-height: 82px;
    gap: 9px;
    padding: 11px 14px;
  }

  .metricBandItem:nth-child(3),
  .metricBandItem:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .metricBandItem:nth-child(3) {
    border-left: 0;
  }

  .metricGlyph {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .metricGlyph svg {
    width: 15px;
  }

  .metricBandItem strong {
    font-size: 17px;
  }

  .metricBandItem em,
  .metricBandItem small {
    font-size: 9px;
  }

  .overviewFrame {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .weekPanel,
  .goalPanel,
  .recentPanel,
  .momentumPanel {
    padding: 16px 14px;
  }

  .goalPanel,
  .momentumPanel {
    border-left: 0;
  }

  .goalPanel {
    min-height: 245px;
  }

  .recentPanel {
    border-bottom: 1px solid var(--line);
  }

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

  .sectionHeader.inline .segmented {
    align-self: stretch;
  }

  .sectionHeader.inline .segmented button {
    min-width: 0;
    flex: 1;
  }

  .weeklyChart {
    height: 230px;
    gap: 2px;
    padding-inline: 0;
  }

  .chartColumn {
    padding-inline: 2px;
  }

  .chartStack {
    width: 70%;
  }

  .chartColumn strong,
  .chartColumn em {
    font-size: 8px;
  }

  .chartLegend {
    flex-wrap: wrap;
    gap: 7px 10px;
    padding-top: 6px;
  }

  .chartLegend button {
    margin-left: 0;
  }

  .compactList .sessionRow {
    grid-template-columns: 8px minmax(0, 1fr) 18px;
    min-height: 104px;
    padding: 12px 6px;
  }

  .compactList .sessionMeta {
    grid-column: 2 / 4;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 4px;
  }

  .compactList .sessionMeta > span:first-child {
    display: none;
  }

  .compactList .sessionMeta b {
    font-size: 9px;
  }

  .heatmap {
    height: 118px;
  }

  .momentumStats {
    margin-inline: -4px;
  }

  .momentumStats > span {
    padding-inline: 5px;
  }

  .momentumStats em {
    font-size: 8px;
  }

  .momentumStats strong {
    font-size: 15px;
  }

  .projectSection,
  .periodSection {
    margin-inline: -14px;
    padding-inline: 14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .projectRows > button {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    min-height: 67px;
    gap: 8px;
  }

  .projectRows > button > span:not(.projectRank):not(.projectIdentity) {
    display: none;
  }

  .dataCaveat {
    align-items: flex-start;
    padding-inline: 12px;
    line-height: 1.5;
  }

  .clientScope,
  .clientSegmented {
    width: 100%;
  }

  .clientSegmented button {
    flex: 1;
    padding-inline: 7px;
    font-size: 11px;
  }

  .clientSegmented button em {
    min-width: 18px;
    padding-inline: 4px;
  }

  .sessionControls {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 9px;
  }

  .pageSearch {
    height: 44px;
  }

  .mobileFilterButton {
    display: grid;
    width: 44px;
    height: 44px;
  }

  .sessionControls > .segmented {
    grid-column: 1 / -1;
    width: 100%;
    height: 44px;
  }

  .sessionControls > .segmented button {
    min-width: 0;
    flex: 1;
    font-size: 12px;
  }

  .sortControl {
    display: none;
  }

  .sessionStatusStrip {
    min-height: 50px;
    margin-inline: -14px;
    padding-inline: 16px;
  }

  .sessionStatusStrip > span:last-child {
    display: none;
  }

  .fullList {
    margin-inline: -14px;
  }

  .sessionSourceGroup + .sessionSourceGroup {
    margin-top: 14px;
  }

  .sessionSourceHeader {
    margin-inline: -14px;
    padding-inline: 16px;
  }

  .sessionRow,
  body[data-density="compact"] .fullList .sessionRow {
    min-height: 112px;
    grid-template-columns: 8px minmax(0, 1fr) 17px;
    grid-template-rows: auto auto;
    gap: 9px 10px;
    padding: 13px 14px;
  }

  .sessionIdentity strong {
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sessionIdentity > span {
    font-size: 9px;
  }

  .sessionIdentity p,
  body[data-density="compact"] .fullList .sessionIdentity p {
    display: none;
  }

  .sessionMeta {
    grid-column: 2 / 4;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .sessionMeta > span:first-child,
  .sessionMeta > span:nth-child(2),
  .sessionMeta > span:nth-child(5) {
    display: none;
  }

  .sessionMeta em {
    font-size: 8px;
  }

  .sessionMeta b {
    font-size: 10px;
  }

  .rowPin {
    display: none;
  }

  .rowChevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .detailPage {
    padding-top: 8px;
  }

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

  .detailTitleRow p {
    max-width: 245px;
  }

  .detailPrompt {
    font-size: 11px !important;
  }

  .detailMetricBand {
    grid-template-columns: 1fr 1fr;
    margin-inline: -14px;
  }

  .detailMetricBand .metricBandItem {
    min-height: 82px;
    padding: 10px 12px;
  }

  .detailMetricBand .metricBandItem:nth-child(3),
  .detailMetricBand .metricBandItem:nth-child(5) {
    border-left: 0;
  }

  .detailMetricBand .metricBandItem:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .detailMetricBand .metricBandItem:last-of-type {
    grid-column: 1 / -1;
  }

  .detailTokenMix {
    grid-column: 1 / -1;
    padding: 13px 14px;
  }

  .detailTabs {
    top: 0;
    gap: 0;
    margin-inline: -14px;
    padding-inline: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .detailTabs::-webkit-scrollbar {
    display: none;
  }

  .detailTabs button {
    min-width: max-content;
    padding-inline: 12px;
  }

  .detailLayout {
    display: block;
  }

  .detailContent {
    padding: 16px 0 20px;
  }

  .detailRail {
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

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

  .detailQuickStats span:nth-child(3),
  .detailQuickStats span:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .detailQuickStats span:nth-child(3) {
    border-left: 0;
  }

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

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

  .tokenBasisComparison span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .latestEvents article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .latestEvents time {
    display: none;
  }

  .timelineToolbar {
    grid-template-columns: 1fr auto;
  }

  .timelineToolbar .segmented {
    grid-column: 1 / -1;
    width: 100%;
    overflow-x: auto;
  }

  .timelineToolbar .segmented button {
    min-width: 80px;
    flex: 1;
  }

  .timelineEvent {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 66px;
  }

  .timelineEvent time,
  .timelineEvent > em {
    display: none;
  }

  .timelineEvent > div {
    grid-column: 2;
  }

  .timelineEvent .eventStatus {
    grid-column: 3;
    grid-row: 1;
  }

  .stepGroup > summary > span:last-child b {
    display: none;
  }

  .dataTable {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .dataTableHead {
    display: none;
  }

  .dataTableRow {
    display: grid;
    min-height: 100px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .dataTableRow > *::before {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 8px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .dataTableRow .miniTokenBar {
    grid-column: 1 / 3;
    align-self: center;
  }

  .toolRows {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .toolRow summary {
    grid-template-columns: 32px minmax(0, 1fr) auto 15px;
    min-height: 72px;
    padding-inline: 9px;
  }

  .toolRow summary time,
  .toolRow summary > em {
    display: none;
  }

  .toolDetails {
    grid-template-columns: 1fr;
    padding: 0 9px 12px 50px;
  }

  .reportControls {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .reportControls .segmented {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reportControls .segmented button {
    min-width: 78px;
    flex: 1;
  }

  .reportRange {
    margin-left: 0;
    padding: 5px 2px;
  }

  .reportsPage .pageActions .secondaryButton:first-child,
  .reportsPage .pageActions .iconButton {
    display: none;
  }

  .reportsPage .pageActions .secondaryButton span {
    display: none;
  }

  .reportChartPanel {
    margin-inline: -14px;
    padding: 16px 10px 8px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .reportChartPanel .sectionHeader .chartLegend {
    display: flex;
    width: 100%;
  }

  .reportChart {
    height: 245px;
    gap: 3px;
    padding-inline: 0;
  }

  .reportGridLines {
    right: 0;
    left: 0;
  }

  .reportBar {
    padding-inline: 1px;
  }

  .reportBar > span {
    width: 72%;
  }

  .reportBar strong,
  .reportBar em {
    font-size: 8px;
  }

  .reportSummary {
    grid-template-columns: 1fr;
    margin-inline: -14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .reportSummary > section {
    padding-inline: 14px;
  }

  .reportSummary > section + section {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .reportSummary section > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reportSummary section:last-child > div {
    grid-template-columns: 1fr 1fr;
  }

  .reportSummary section > div > span:nth-child(4),
  .reportSummary section > div > span:nth-child(5),
  .reportSummary section > div > span:nth-child(6),
  .reportSummary section:last-child > div > span:nth-child(3),
  .reportSummary section:last-child > div > span:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .reportSummary section > div > span:nth-child(4),
  .reportSummary section:last-child > div > span:nth-child(3) {
    border-left: 0;
  }

  .reportTableHead {
    display: none;
  }

  .reportRowGroup {
    padding: 0;
    border-top: 0;
  }

  .reportRowGroup.selected {
    margin-inline: 0;
    padding-inline: 0;
    background: transparent;
  }

  .reportTableRow {
    display: grid;
    min-height: 126px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 9px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .reportRowGroup.selected .reportTableRow {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
    background: color-mix(in srgb, var(--blue) 4%, var(--surface));
  }

  .reportTableRow > span:first-child {
    grid-column: 1 / -1;
  }

  .reportTableRow > b::before {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 8px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .reportTableRow > b:last-child {
    display: none;
  }

  .bucketSessions {
    margin: -3px 0 10px;
    padding: 4px 9px 9px;
    border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .bucketSessions > button {
    grid-template-columns: minmax(0, 1fr) auto 14px;
    min-height: 55px;
  }

  .bucketSessions > button > span:nth-child(3),
  .bucketSessions > button > span:nth-child(4) {
    display: none;
  }

  dialog {
    max-width: 100vw;
  }

  .commandDialog {
    width: calc(100vw - 20px);
    margin-top: 8vh;
  }

  .commandDialog > footer {
    display: none;
  }

  .sheetDialog {
    width: 100vw;
    max-height: 82dvh;
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .authDialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 86dvh;
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
  }

  .authDialog[open] {
    animation-name: sheetIn;
  }

  .authDialogContent {
    padding: 17px 16px calc(18px + env(safe-area-inset-bottom));
  }

  .authActions {
    flex-direction: column;
  }

  .authActions .secondaryButton {
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .sheetDialog[open] {
    animation-name: sheetIn;
  }

  .settingRows {
    max-height: 58dvh;
    overflow: auto;
    padding-inline: 16px;
  }

  .settingRow {
    min-height: 72px;
  }

  .settingRow .segmented {
    max-width: 190px;
  }

  .settingRow .segmented button {
    min-width: 56px;
    padding-inline: 7px;
  }

  .toastRegion {
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 380px) {
  .globalBar .liveStatus {
    display: none;
  }
}

/* Productivity layer: attention, trust, summaries, and progressive disclosure. */
.overviewFocusStrip {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease);
}

.overviewFocusStrip:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, var(--green-soft));
  transform: translateY(-1px);
}

.overviewFocusStrip > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.overviewFocusStrip.attention > span:first-child {
  background: var(--orange-soft);
  color: var(--orange);
}

.overviewFocusStrip > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.overviewFocusStrip strong {
  font-size: 13px;
  font-weight: 700;
}

.overviewFocusStrip em {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overviewFocusStrip > b {
  color: var(--blue);
  font-size: 12px;
}

.focusPage {
  max-width: 1480px;
}

.focusHeader p::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 9%, transparent);
}

.focusPage.data-demo .focusHeader p::before {
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 9%, transparent);
}

.focusMetricBand {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.focusMetricBand > .metricBandItem,
.focusTrustMetric {
  min-width: 0;
  border-left: 1px solid var(--line);
}

.focusMetricBand > .metricBandItem:first-child {
  border-left: 0;
}

.focusMetricBand .metricBandItem {
  min-height: 88px;
  padding: 14px 18px;
  border: 0;
  box-shadow: none;
}

.focusTrustMetric {
  padding: 0;
  background: transparent;
  text-align: left;
}

.focusTrustMetric:hover {
  background: var(--surface-muted);
}

.focusGrid,
.focusLowerGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.attentionPanel,
.weeklyReviewPanel,
.projectHealthPanel,
.achievementPanel,
.baselinePanel,
.relationshipPanel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.attentionPanel,
.weeklyReviewPanel,
.achievementPanel,
.baselinePanel,
.relationshipPanel {
  padding: 17px 18px;
}

.focusSectionHeader {
  align-items: center;
}

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

.attentionRow {
  display: grid;
  min-height: 72px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto 30px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

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

.attentionGlyph {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange);
}

.attentionRow.critical .attentionGlyph {
  background: var(--red-soft);
  color: var(--red);
}

.attentionRow.info .attentionGlyph {
  background: var(--green-soft);
  color: var(--green);
}

.attentionGlyph svg {
  width: 16px;
  height: 16px;
}

.attentionMain {
  display: grid;
  min-width: 0;
  gap: 1px;
  padding: 8px 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.attentionMain strong,
.attentionMain b,
.attentionMain p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attentionMain strong {
  font-size: 12px;
  font-weight: 700;
}

.attentionMain b {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 620;
}

.attentionMain p,
.attentionRow time {
  color: var(--text-muted);
  font-size: 11px;
}

.attentionRow time {
  white-space: nowrap;
}

.attentionAction {
  min-width: 92px;
  justify-content: center;
  font-size: 11px;
}

.attentionDismiss {
  width: 28px;
  height: 28px;
  opacity: 0;
}

.attentionRow:hover .attentionDismiss,
.attentionDismiss:focus-visible {
  opacity: 1;
}

.focusEmpty {
  display: grid;
  min-height: 210px;
  place-content: center;
  justify-items: center;
  color: var(--text-muted);
  text-align: center;
}

.focusEmpty svg {
  width: 30px;
  height: 30px;
  margin-bottom: 8px;
  color: var(--green);
}

.focusEmpty strong {
  color: var(--text);
  font-size: 15px;
}

.focusEmpty span {
  font-size: 12px;
}

.reviewSparkline {
  width: 100%;
  height: 68px;
  margin: 1px 0 6px;
  overflow: visible;
}

.reviewSparkline polyline {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

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

.reviewRows > div {
  display: grid;
  min-height: 62px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.reviewRows > div:last-child {
  border-bottom: 0;
}

.reviewIcon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
}

.reviewIcon.friction {
  background: var(--orange-soft);
  color: var(--orange);
}

.reviewIcon.focus {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.reviewRows b {
  font-size: 11px;
}

.reviewRows p {
  color: var(--text-soft);
  font-size: 12px;
}

.projectHealthPanel {
  margin-bottom: 14px;
  padding: 17px 18px 8px;
}

.projectHealthTable {
  min-width: 0;
}

.projectHealthHead,
.projectHealthRow {
  display: grid;
  grid-template-columns: minmax(210px, 1.8fr) 58px 92px 84px 92px 78px 94px 18px;
  align-items: center;
  gap: 10px;
}

.projectHealthHead {
  min-height: 34px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.projectHealthRow {
  width: 100%;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  text-align: left;
  transition: background 140ms ease;
}

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

.projectHealthRow:hover {
  background: var(--surface-muted);
}

.projectHealthRow > span:first-child {
  display: grid;
  min-width: 0;
}

.projectHealthRow > span strong,
.projectHealthRow > span em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.projectHealthRow > span em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.projectHealthStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-style: normal;
  white-space: nowrap;
}

.projectHealthStatus i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.projectHealthStatus.watch {
  color: var(--orange);
}

.projectHealthStatus.attention {
  color: var(--red);
}

.achievementStrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.achievementStrip > div {
  display: grid;
  min-height: 94px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.achievementStrip > div:nth-child(2n) {
  border-right: 0;
}

.achievementStrip > div > span {
  display: grid;
  width: 30px;
  height: 30px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green);
}

.achievementStrip strong {
  align-self: end;
  font-size: 12px;
}

.achievementStrip p {
  align-self: start;
  color: var(--text-muted);
  font-size: 10px;
}

.baselineMetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.baselineMetrics span {
  display: grid;
  min-height: 78px;
  align-content: center;
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.baselineMetrics span:nth-child(2n) {
  border-right: 0;
}

.baselineMetrics em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.baselineMetrics strong {
  font-size: 19px;
}

.sessionBriefPanel {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.briefLead {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 17px 18px;
  border-right: 1px solid var(--line);
}

.briefStateIcon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.sessionBriefPanel.state-attention .briefStateIcon {
  background: var(--orange-soft);
  color: var(--orange);
}

.briefEyebrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.state-attention .briefEyebrow {
  color: var(--orange);
}

.briefLead h2 {
  overflow: hidden;
  margin: 2px 0;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.briefLead p {
  color: var(--text-soft);
  font-size: 12px;
}

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

.briefFacts span {
  display: grid;
  min-height: 58px;
  align-content: center;
  padding: 8px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.briefFacts span:nth-child(2n) {
  border-right: 0;
}

.briefFacts em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.briefFacts strong {
  font-size: 17px;
}

.briefFacts .warning strong {
  color: var(--red);
}

.briefEvidence,
.briefLabels {
  display: flex;
  grid-column: 1 / -1;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
}

.briefEvidenceLabel {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 650;
}

.verificationChip,
.briefLabels span,
.briefLabels button,
.sessionLabelList em {
  display: inline-flex;
  min-height: 24px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 10px;
  font-style: normal;
}

.verificationChip.failed {
  background: var(--red-soft);
  color: var(--red);
}

.briefNoEvidence {
  color: var(--text-muted);
  font-size: 10px;
}

.briefLabels {
  min-height: 40px;
  border-top-color: color-mix(in srgb, var(--line) 70%, transparent);
}

.briefLabels button {
  background: transparent;
  color: var(--blue);
}

.sessionTrustStrip {
  display: grid;
  width: 100%;
  min-height: 68px;
  grid-template-columns: 44px minmax(180px, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.sessionTrustStrip:hover {
  border-color: var(--line-strong);
  background: var(--surface-muted);
}

.trustScoreRing {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  grid-template-columns: auto auto;
  place-content: center;
  border: 4px solid var(--green);
  border-radius: 50%;
  color: var(--green);
}

.sessionTrustStrip.level-medium .trustScoreRing {
  border-color: var(--orange);
  color: var(--orange);
}

.sessionTrustStrip.level-low .trustScoreRing {
  border-color: var(--red);
  color: var(--red);
}

.trustScoreRing b {
  color: var(--text);
  font-size: 12px;
}

.trustScoreRing em {
  align-self: center;
  font-size: 8px;
  font-style: normal;
}

.sessionTrustStrip > span:nth-child(2) {
  display: grid;
}

.sessionTrustStrip > span:nth-child(2) em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}

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

.trustBasis b {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 9px;
}

.relationshipPanel {
  padding: 17px 18px;
}

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

.agentTreeRoot,
.agentTreeNode {
  display: grid;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--text);
  text-align: left;
}

.agentTreeRoot {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
}

.agentTreeRoot > span:first-child,
.agentTreeNode > span:first-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
}

.agentTreeNode > span:nth-child(2),
.agentTreeRoot > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.agentTreeNode em,
.agentTreeRoot em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.agentTreeNode strong,
.agentTreeRoot strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentTreeChildren {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}

.agentTreeTotals {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 10px;
}

.agentTreeTotals span {
  display: grid;
}

.agentTreeTotals em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.agentTreeTotals strong {
  font-size: 12px;
}

.followButton {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
}

.followButton.selected {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.savedViewsBar {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;
}

.savedViewsBar > span:first-child {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-right: 3px;
  color: var(--text-muted);
  font-size: 10px;
}

.savedViewsBar > button,
.savedViewChip {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.savedViewsBar > button {
  gap: 5px;
  padding: 0 9px;
  color: var(--text-soft);
  font-size: 10px;
}

.savedViewsBar > button.on,
.savedViewChip.on {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.savedViewChip button {
  height: 28px;
  padding: 0 7px;
  background: transparent;
  color: inherit;
  font-size: 10px;
}

.savedViewChip button:last-child {
  width: 26px;
  padding: 0;
  color: var(--text-muted);
}

.sessionRow.compareSelected {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--surface) 94%, var(--cyan-soft));
}

.sessionRow.compareMode {
  grid-template-columns: 24px 8px minmax(220px, 1.65fr) minmax(520px, 2.4fr) 32px 18px;
}

.compareCheck {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
}

.compareCheck.on {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.sessionLabelList {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.compareDock {
  position: sticky;
  z-index: 15;
  bottom: 16px;
  display: flex;
  width: min(560px, calc(100% - 24px));
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px auto 0;
  padding: 9px 11px 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.compareDock > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
}

.compareDock > span > svg {
  grid-row: 1 / span 2;
  color: var(--blue);
}

.compareDock em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.compareDialog {
  width: min(760px, calc(100vw - 32px));
}

.compareHead,
.compareRows > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) repeat(2, minmax(0, 1fr));
}

.compareHead {
  border-bottom: 1px solid var(--line);
}

.compareHead button {
  display: grid;
  min-width: 0;
  grid-template-columns: 12px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-left: 1px solid var(--line);
  background: transparent;
  text-align: left;
}

.compareHead button strong,
.compareHead button em {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compareHead button em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.compareRows > div {
  min-height: 47px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.compareRows > div > * {
  padding: 9px 14px;
}

.compareRows > div > strong {
  color: var(--text-muted);
  font-size: 10px;
}

.compareRows > div > span {
  border-left: 1px solid var(--line);
  font-size: 13px;
  font-weight: 650;
}

.compareInsight {
  display: flex;
  gap: 10px;
  margin: 14px;
  padding: 12px;
  border-radius: 7px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.compareInsight p {
  color: var(--text-soft);
  font-size: 11px;
}

.labelDialog,
.trustDialog,
.dataDialog,
.tourDialog,
.auditDialog {
  width: min(620px, calc(100vw - 32px));
}

.labelSession,
.trustHero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.labelSession > span,
.trustHero > span:last-child {
  display: grid;
  min-width: 0;
}

.labelSession em,
.trustHero p {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.labelChips,
.labelSuggestions {
  display: flex;
  min-height: 48px;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
}

.labelChips button,
.labelSuggestions button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 11px;
}

.labelInput {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
  padding: 7px 7px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-muted);
}

.labelInput input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

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

.labelSuggestions > b {
  width: 100%;
  color: var(--text-muted);
  font-size: 10px;
}

.dialogFootnote {
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 10px;
}

.trustScoreRing.large {
  width: 62px;
  height: 62px;
  border-width: 5px;
}

.trustScoreRing.large b {
  font-size: 18px;
}

.trustFormula {
  padding: 4px 16px 10px;
}

.trustFormula > div {
  display: grid;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr) 48px 70px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.trustFormula > div > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trustFormula > div > em {
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

.trustFormula > div.warning > em {
  color: var(--orange);
}

.trustFormula > div.missing > em {
  color: var(--red);
}

.trustExplanation,
.dataManagementRows,
.auditList {
  border-top: 1px solid var(--line);
}

.trustExplanation > div,
.dataManagementRows > section,
.auditList > div {
  display: grid;
  min-height: 78px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.trustExplanation > div {
  grid-template-columns: 34px minmax(0, 1fr);
}

.trustExplanation > div > svg,
.dataManagementRows > section > span,
.auditList > div > span:first-child {
  color: var(--green);
}

.trustExplanation p,
.dataManagementRows p,
.auditList p {
  color: var(--text-soft);
  font-size: 11px;
}

.dataManagementRows section > span,
.auditList > div > span:first-child {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 7px;
  background: var(--green-soft);
}

.dataManagementRows section > div,
.auditList > div > span:nth-child(2) {
  display: grid;
}

.dataManagementRows em,
.auditList time,
.auditList time em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.auditList time {
  display: grid;
  justify-items: end;
}

.tourProgress {
  display: flex;
  gap: 6px;
  padding: 16px 18px 0;
}

.tourProgress i {
  height: 3px;
  flex: 1;
  border-radius: 3px;
  background: var(--line);
}

.tourProgress i.on {
  background: var(--green);
}

.tourStage {
  display: grid;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  padding: 26px 42px;
  text-align: center;
}

.tourStage > span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
}

.tourStage > span svg {
  width: 28px;
  height: 28px;
}

.tourStage > em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.tourStage h3 {
  margin: 5px 0;
  font-size: 22px;
}

.tourStage p {
  max-width: 420px;
  color: var(--text-soft);
  font-size: 13px;
}

.tourActions {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

@media (max-width: 1100px) {
  .focusGrid,
  .focusLowerGrid {
    grid-template-columns: 1fr;
  }

  .projectHealthHead,
  .projectHealthRow {
    grid-template-columns: minmax(180px, 1.5fr) 52px 82px 76px 80px 70px 86px 18px;
  }

  .sessionBriefPanel {
    grid-template-columns: 1fr 320px;
  }
}

@media (max-width: 760px) {
  .bottomNav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: 8px;
  }

  .bottomNav button {
    min-width: 0;
  }

  .focusPage,
  .focusPage .pageHeader {
    padding-inline: 0;
  }

  .focusPage .pageHeader {
    padding-inline: 16px;
  }

  .focusMetricBand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 12px;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .focusMetricBand > :nth-child(3) {
    border-left: 0;
  }

  .focusMetricBand > :nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .focusMetricBand .metricBandItem {
    min-height: 78px;
    padding: 10px 14px;
  }

  .focusMetricBand .metricGlyph {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .focusMetricBand .metricBandItem strong {
    font-size: 20px;
  }

  .focusGrid,
  .focusLowerGrid {
    gap: 10px;
    margin-bottom: 10px;
  }

  .attentionPanel,
  .weeklyReviewPanel,
  .projectHealthPanel,
  .achievementPanel,
  .baselinePanel {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .attentionPanel,
  .weeklyReviewPanel,
  .achievementPanel,
  .baselinePanel {
    padding: 14px 16px;
  }

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

  .focusSectionHeader .segmented {
    width: 100%;
  }

  .attentionRow {
    min-height: 74px;
    grid-template-columns: 32px minmax(0, 1fr) auto 18px;
    gap: 8px;
  }

  .attentionAction {
    display: none;
  }

  .attentionDismiss {
    display: none;
  }

  .attentionMain p {
    white-space: normal;
  }

  .attentionRow time {
    align-self: start;
    padding-top: 13px;
  }

  .reviewSparkline {
    height: 52px;
  }

  .projectHealthPanel {
    padding: 14px 16px 5px;
  }

  .projectHealthHead {
    display: none;
  }

  .projectHealthRow {
    grid-template-columns: minmax(0, 1fr) auto 16px;
    gap: 8px;
    padding: 8px 0;
  }

  .projectHealthRow > b {
    display: none;
  }

  .projectHealthStatus {
    justify-self: end;
  }

  .projectHealthStatus::before {
    content: attr(data-label) " · ";
    color: var(--text-muted);
    font-size: 9px;
  }

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

  .achievementStrip > div,
  .achievementStrip > div:nth-child(2n) {
    min-height: 70px;
    border-right: 0;
  }

  .baselineMetrics span {
    min-height: 68px;
  }

  .overviewFocusStrip {
    grid-template-columns: auto minmax(0, 1fr) 16px;
    margin-inline: 0;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .overviewFocusStrip > b {
    display: none;
  }

  .overviewFocusStrip em {
    white-space: normal;
  }

  .sessionBriefPanel {
    grid-template-columns: 1fr;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .briefLead {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .briefLead h2 {
    font-size: 15px;
    white-space: normal;
  }

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

  .briefFacts span,
  .briefFacts span:nth-child(2n) {
    min-height: 54px;
    padding: 7px 8px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .briefFacts span:last-child {
    border-right: 0;
  }

  .briefFacts strong {
    font-size: 14px;
  }

  .briefEvidence,
  .briefLabels {
    padding-inline: 14px;
  }

  .sessionTrustStrip {
    grid-template-columns: 42px minmax(0, 1fr) 16px;
    margin-inline: 12px;
    width: calc(100% - 24px);
  }

  .trustBasis {
    display: none;
  }

  .relationshipPanel {
    margin-inline: 12px;
    padding: 14px;
  }

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

  .agentTreeTotals {
    justify-content: space-between;
    gap: 8px;
  }

  .followButton span {
    display: none;
  }

  .savedViewsBar {
    padding-inline: 14px;
  }

  .sessionsHeader .pageActions .secondaryButton span {
    display: none;
  }

  .sessionRow.compareMode,
  body[data-density="compact"] .fullList .sessionRow.compareMode {
    grid-template-columns: 24px 8px minmax(0, 1fr) 17px;
  }

  .sessionRow.compareMode .sessionMeta {
    grid-column: 3 / 5;
  }

  .sessionRow.compareMode .rowChevron {
    grid-column: 4;
  }

  .compareDock {
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: calc(100% - 24px);
  }

  .compareHead,
  .compareRows > div {
    grid-template-columns: 92px repeat(2, minmax(0, 1fr));
  }

  .compareHead button,
  .compareRows > div > * {
    padding-inline: 8px;
  }

  .tourStage {
    min-height: 270px;
    padding: 24px 24px;
  }

  .tourStage h3 {
    font-size: 19px;
  }
}

@media (max-width: 380px) {
  .focusMetricBand .metricBandItem {
    gap: 8px;
    padding-inline: 10px;
  }

  .focusMetricBand .metricBandItem strong {
    font-size: 18px;
  }

  .briefFacts em {
    font-size: 8px;
  }

  .agentTreeTotals em {
    font-size: 8px;
  }

  .compareHead,
  .compareRows > div {
    grid-template-columns: 78px repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .liveProgressBand {
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
    grid-template-areas:
      "lead numbers"
      "timing timing"
      "trace trace"
      "axis axis";
  }

  .liveTiming {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .liveTiming span {
    display: flex;
    justify-content: flex-start;
  }

  .liveTiming b {
    margin-left: 4px;
  }
}

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

  .sessionOverviewLower {
    grid-template-areas:
      "explore"
      "activity";
    gap: 20px;
  }

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

  .sessionInfoGrid .sessionInfoSection + .sessionInfoSection {
    padding-left: 4px;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .cleanDetailHeader {
    padding-bottom: 14px;
  }

  .cleanDetailHeader .detailTitleRow {
    gap: 10px;
  }

  .cleanDetailHeader .detailTitleRow h1 {
    font-size: 24px;
    line-height: 1.16;
  }

  .cleanDetailHeader .sessionHeaderMeta {
    max-width: 255px;
    font-size: 9px;
  }

  .cleanDetailHeader .detailPrompt {
    display: -webkit-box;
    margin-top: 8px !important;
    overflow: hidden;
    font-size: 10px !important;
    line-height: 1.4;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .sessionOverview {
    gap: 12px;
  }

  .liveProgressBand {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "lead"
      "timing"
      "numbers"
      "trace"
      "axis";
    gap: 13px;
    margin-inline: -14px;
    padding: 16px 14px 13px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .liveProgressGlyph {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .liveProgressLead h2 {
    font-size: 18px;
  }

  .liveProgressLead p {
    max-width: 260px;
  }

  .liveTiming {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .liveTiming span {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .liveTiming b {
    margin-left: 0;
    font-size: 10px;
  }

  .liveNumbers {
    min-height: 48px;
    border-left: 0;
  }

  .liveNumbers span {
    padding: 0 10px;
  }

  .liveNumbers span:first-child {
    padding-left: 0;
  }

  .liveNumbers strong {
    font-size: 18px;
  }

  .liveTrace {
    height: 31px;
    gap: 2px;
    padding-top: 3px;
  }

  .liveTraceAxis {
    margin-top: -8px;
  }

  .liveTraceAxis span:nth-child(2) {
    display: none;
  }

  .liveTraceAxis {
    grid-template-columns: 1fr auto;
  }

  .detailChartPanel {
    margin-inline: -14px;
    padding: 16px 14px 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .detailChartPanel .sectionHeader {
    gap: 8px;
  }

  .detailChartPanel .sectionHeader h2 {
    font-size: 15px;
  }

  .chartDirectLabels {
    gap: 8px;
  }

  .workPulsePlot,
  .tokenPacePlot {
    height: 126px;
  }

  .workPulsePlot,
  .tokenPaceBars {
    gap: 2px;
  }

  .chartInsight {
    min-height: 48px;
  }

  .sessionOverviewLower {
    gap: 18px;
    padding-top: 6px;
  }

  .exploreSessionPanel,
  .compactActivityPanel {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .exploreRows a {
    min-height: 62px;
    grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    gap: 8px;
  }

  .exploreRows em {
    max-width: 220px;
  }

  .exploreRows b {
    max-width: 74px;
  }

  .detailSubpageHeader {
    padding-bottom: 13px;
  }

  .detailBreadcrumb a {
    max-width: 105px;
  }

  .detailBreadcrumb span {
    max-width: 90px;
  }

  .detailSubpageTitle {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .subpageGlyph {
    width: 38px;
    height: 38px;
  }

  .detailSubpageTitle h1 {
    font-size: 23px;
  }

  .detailSubpageTitle p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detailSubpageTitle > strong {
    grid-column: 2;
    justify-self: start;
    padding: 3px 6px;
    font-size: 9px;
  }

  .detailSubpageContent {
    margin-inline: -14px;
    padding: 14px 14px 0;
  }

  .sessionInfoSection {
    padding: 16px 0;
  }

  .sessionInfoGrid .sessionInfoSection + .sessionInfoSection {
    padding-left: 0;
  }

  .sessionInfoRows div {
    min-height: 42px;
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 8px;
  }

  .sessionInfoRows dd {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .infoTokenSection .tokenBasisComparison {
    margin-top: 12px;
  }

  .infoPromptSection blockquote {
    font-size: 11px;
  }

  .infoNoteSection textarea {
    min-height: 100px;
  }
}

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body.motionOff *,
body.motionOff *::before,
body.motionOff *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (min-width: 761px) {
  .liveStatus.demo {
    display: none;
  }

  .mobileBrand,
  .mobileOnly,
  .mobileFilterButton,
  .bottomNav {
    display: none !important;
  }
}

/* Apple-quality refinement: calmer hierarchy, denser monitoring, native-feeling controls. */
:root {
  --app-bg: #f3f3f5;
  --surface-muted: #f6f6f8;
  --sidebar: rgba(248, 248, 250, 0.92);
  --line: #e3e3e8;
  --line-strong: #cfcfd6;
  --text-soft: #51515c;
  --text-muted: #81818d;
  --blue: #087cf0;
  --green: #079b68;
  --cyan: #078fa5;
  --teal: #43b9af;
  --orange: #ef8819;
  --graphite: #555c68;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.025), 0 8px 24px rgba(0, 0, 0, 0.025);
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.14), 0 4px 18px rgba(0, 0, 0, 0.07);
}

:root[data-theme="dark"] {
  --app-bg: #1b1b1d;
  --surface: #252527;
  --surface-raised: #2b2b2e;
  --surface-muted: #303033;
  --sidebar: rgba(31, 31, 34, 0.94);
  --line: #39393e;
  --line-strong: #505057;
  --text-soft: #c8c8cf;
  --text-muted: #94949d;
  --blue: #68a9ff;
  --green: #38cd8c;
  --cyan: #4bc0d1;
  --teal: #59c8bd;
  --orange: #f7a13b;
}

body {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.appShell {
  grid-template-columns: 228px minmax(0, 1fr);
}

.sidebar {
  gap: 14px;
  padding: 16px 11px 12px;
  border-right-color: color-mix(in srgb, var(--line) 86%, transparent);
  background: var(--sidebar);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}

.brandButton {
  min-height: 42px;
  padding-inline: 7px;
  font-size: 16px;
  font-weight: 700;
}

.brandMark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 8px;
  background: #111319;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11), 0 3px 8px rgba(0, 0, 0, 0.16);
}

.brandMark svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.sidebar .searchTrigger {
  display: none;
}

.sideNav {
  gap: 3px;
  margin-top: 5px;
}

.sideNav button,
.preferencesTrigger {
  min-height: 42px;
  border-radius: 8px;
  color: var(--text-soft);
  font-weight: 540;
  transition: color 150ms ease, background 150ms ease, transform 150ms var(--ease);
}

.sideNav button:hover,
.preferencesTrigger:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
}

.sideNav button.selected {
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--text);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 6%, transparent);
}

.sideNav button:active,
.preferencesTrigger:active {
  transform: scale(0.985);
}

.sideNav em {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 7px;
  background: var(--green-soft);
  font-size: 11px;
  text-align: center;
}

.preferencesTrigger {
  margin-top: auto;
}

.sidebarConnection {
  display: grid;
  min-height: 38px;
  grid-template-columns: 10px auto 1fr;
  align-items: center;
  gap: 7px;
  margin-top: -4px;
  padding: 8px 9px 4px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}

.sidebarConnectionDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent);
}

.sidebarConnection.demo .sidebarConnectionDot {
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 10%, transparent);
}

.sidebarConnection.shared .sidebarConnectionDot {
  background: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 10%, transparent);
}

.sidebarConnection.paused .sidebarConnectionDot,
.sidebarConnection.stale .sidebarConnectionDot {
  background: var(--text-muted);
  box-shadow: none;
}

.sidebarConnection b {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}

.sidebarConnection em {
  overflow: hidden;
  font-size: 10px;
  font-style: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appMain {
  grid-template-rows: 60px auto minmax(0, 1fr);
}

.globalBar {
  padding-inline: 22px 18px;
  border-bottom-color: color-mix(in srgb, var(--line) 84%, transparent);
  background: color-mix(in srgb, var(--app-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
}

.globalSearch {
  width: 248px;
  height: 36px;
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.globalSearch:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.liveCluster {
  gap: 8px;
}

.globalBar .liveStatus {
  display: none;
}

.updateLabel {
  min-width: 92px;
  font-size: 11px;
}

.iconButton,
.authControl,
.secondaryButton,
.primaryButton,
.segmented {
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
}

.iconButton {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.iconButton:hover,
.authControl:hover,
.secondaryButton:hover {
  border-color: var(--line-strong);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.045);
}

.authControl {
  height: 36px;
  min-width: 88px;
  padding-right: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.authAvatar {
  width: 26px;
  height: 26px;
}

.authControlText b {
  font-size: 11px;
}

.authControlText em {
  font-size: 8px;
}

.mobileMore {
  display: none;
}

.page {
  width: min(100%, 1370px);
  padding: 24px 28px 56px;
}

.pageHeader {
  min-height: 62px;
  align-items: center;
  padding: 0 2px 14px;
}

.pageHeader h1,
.detailTitleRow h1 {
  font-size: 29px;
  font-weight: 730;
  line-height: 1.12;
}

.overviewPage .pageHeader > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.overviewPage .pageHeader p {
  margin-top: 0;
}

.overviewPage .pageHeader p::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 9%, transparent);
  content: "";
  vertical-align: 1px;
}

.overviewPage.data-demo .pageHeader p::before {
  background: var(--orange);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 9%, transparent);
}

.overviewPage.data-shared .pageHeader p::before {
  background: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 9%, transparent);
}

.metricBand {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
}

.metricBandItem {
  min-height: 96px;
  gap: 13px;
  padding: 15px 20px;
}

.metricBandItem + .metricBandItem {
  border-left-color: var(--line);
}

.metricGlyph {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.metricGlyph svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

.metricBandItem em,
.metricBandItem small {
  font-size: 11px;
}

.metricBandItem strong {
  margin-block: 3px;
  font-size: 23px;
  font-weight: 720;
}

.overviewFrame {
  grid-template-columns: minmax(0, 2.65fr) minmax(260px, 0.95fr);
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 98%, transparent);
  box-shadow: var(--shadow-sm);
}

.weekPanel,
.goalPanel,
.recentPanel,
.momentumPanel {
  padding: 18px 20px;
}

.sectionHeader {
  margin-bottom: 12px;
}

.sectionHeader h2 {
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p,
.sectionHeader > span,
.change {
  font-size: 11px;
}

.segmented {
  min-height: 34px;
  padding: 2px;
  background: color-mix(in srgb, var(--surface-muted) 92%, transparent);
}

.segmented button {
  min-width: 72px;
  font-size: 11px;
  font-weight: 560;
}

.segmented button.on {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.weeklyChart {
  height: 226px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 52px, var(--line) 53px, transparent 54px);
}

.chartColumn {
  transition: background 150ms ease, transform 150ms var(--ease);
}

.chartColumn:hover {
  transform: translateY(-1px);
}

.chartStack {
  width: min(54px, 66%);
}

.chartLegend {
  min-height: 34px;
  padding-top: 4px;
  font-size: 10px;
}

.goalRing {
  width: 132px;
  height: 132px;
}

.goalRing::after {
  inset: 11px;
}

.goalProgressTrack {
  display: none;
}

.recentPanel,
.momentumPanel {
  min-height: 252px;
}

.compactList .sessionRow {
  min-height: 52px;
  padding-block: 6px;
}

.sessionRow {
  transition: background 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease);
}

.sessionRow:hover {
  background: color-mix(in srgb, var(--green) 3%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--green) 62%, transparent);
  transform: translateX(1px);
}

.sessionRow:active {
  transform: scale(0.997);
}

.heatmap {
  height: 100px;
}

.projectSection,
.periodSection,
.reportChartPanel,
.reportSummary {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.projectRows > button:hover,
.bucketSessions > button:hover,
.exploreRows a:hover {
  background: color-mix(in srgb, var(--green) 3%, var(--surface));
}

.cleanDetailHeader {
  padding-bottom: 18px;
}

.liveProgressBand {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.detailChartPanel,
.exploreSessionPanel,
.compactActivityPanel {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.workPulsePlot,
.tokenPacePlot {
  height: 142px;
}

.detailSubpageContent {
  border-color: var(--line);
}

.utilityDialog {
  width: min(420px, calc(100vw - 24px));
}

.utilityActions {
  display: flex;
  flex-direction: column;
  padding: 4px 14px 16px;
}

.utilityActions > button {
  display: grid;
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 11px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}

.utilityActions > button:last-child {
  border-bottom: 0;
}

.utilityActions > button:active {
  background: var(--surface-muted);
  transform: scale(0.992);
}

.utilityGlyph {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--green);
}

.utilityGlyph svg {
  width: 17px;
  height: 17px;
}

.utilityActions > button > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.utilityActions b {
  font-size: 13px;
  font-weight: 650;
}

.utilityActions em {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utilityActions > button > svg {
  width: 15px;
  color: var(--text-muted);
}

@media (max-width: 1180px) and (min-width: 761px) {
  .appShell {
    grid-template-columns: 206px minmax(0, 1fr);
  }

  .overviewFrame {
    grid-template-columns: minmax(0, 2fr) minmax(245px, 0.86fr);
  }

  .metricBandItem {
    padding-inline: 14px;
  }
}

@media (max-width: 920px) and (min-width: 761px) {
  .appShell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .sidebarConnection {
    display: none;
  }

  .metricBandItem {
    gap: 8px;
    padding-inline: 10px;
  }

  .metricGlyph {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .metricBandItem strong {
    font-size: 19px;
  }

  .metricBandItem em,
  .metricBandItem small,
  .chartColumn em {
    font-size: 9px;
  }
}

@media (max-width: 760px) {
  .appMain {
    grid-template-rows: calc(62px + env(safe-area-inset-top)) auto minmax(0, 1fr);
  }

  .globalBar {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(190%) blur(28px);
    -webkit-backdrop-filter: saturate(190%) blur(28px);
  }

  .mobileBrand {
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
  }

  .mobileBrand .brandMark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .globalBar .liveStatus,
  .globalBar .languageToggle,
  .globalBar #refreshNow,
  .globalBar #pauseRefresh,
  .globalBar .updateLabel {
    display: none;
  }

  .liveCluster {
    gap: 7px;
  }

  .mobileMore {
    display: inline-grid;
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .authControl {
    width: auto;
    min-width: 76px;
    max-width: 112px;
    height: 40px;
    justify-content: flex-start;
    gap: 7px;
    padding: 4px 10px 4px 5px;
  }

  .authControlText {
    display: flex;
  }

  .authControlText b {
    max-width: 64px;
    font-size: 12px;
  }

  .authControlText em {
    display: none;
  }

  .authAvatar {
    width: 29px;
    height: 29px;
  }

  .viewHost {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }

  .page {
    padding: 14px 16px 32px;
  }

  .pageHeader {
    min-height: 58px;
    padding: 0 0 10px;
  }

  .pageHeader h1,
  .detailTitleRow h1 {
    font-size: 27px;
    line-height: 1.08;
  }

  .overviewPage .pageHeader > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 11px;
  }

  .overviewPage .pageHeader p {
    margin-top: 0;
    font-size: 11px;
  }

  .overviewPage .pageHeader .mobileOnly {
    display: none;
  }

  .metricBand {
    margin: 0 -16px 14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .metricBandItem {
    min-height: 78px;
    gap: 10px;
    padding: 10px 16px;
  }

  .metricGlyph {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .metricGlyph svg {
    width: 17px;
    height: 17px;
  }

  .metricBandItem strong {
    margin-block: 2px;
    font-size: 19px;
  }

  .metricBandItem em,
  .metricBandItem small {
    font-size: 10px;
  }

  .overviewFrame {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: -16px;
  }

  .weekPanel,
  .goalPanel,
  .recentPanel,
  .momentumPanel {
    padding: 16px;
  }

  .weekPanel {
    padding-top: 14px;
    padding-bottom: 10px;
  }

  .weekPanel .sectionHeader.inline {
    align-items: flex-end;
    flex-direction: row;
    gap: 10px;
  }

  .weekPanel .sectionHeader.inline > div {
    flex: 0 0 auto;
  }

  .weekPanel .sectionHeader.inline .segmented {
    min-width: 0;
    flex: 1;
  }

  .weekPanel .sectionHeader.inline .segmented button {
    min-width: 0;
    padding-inline: 6px;
    font-size: 10px;
  }

  .weeklyChart {
    height: 150px;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--line) 34px, transparent 35px);
  }

  .chartColumn {
    grid-template-rows: 20px minmax(0, 1fr) 22px;
  }

  .chartStack {
    width: 64%;
  }

  .chartLegend {
    min-height: 29px;
    flex-wrap: nowrap;
    gap: 6px 9px;
    overflow: hidden;
    padding-top: 5px;
  }

  .chartLegend > span {
    gap: 4px;
    white-space: nowrap;
  }

  .chartLegend button {
    margin-left: auto;
    white-space: nowrap;
  }

  .goalPanel {
    display: grid;
    min-height: 106px;
    grid-template-areas:
      "top top top"
      "ring track stat"
      "ring remain remain";
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 12px;
    padding-block: 11px;
    text-align: left;
  }

  .goalTop {
    grid-area: top;
  }

  .goalRing {
    width: 46px;
    height: 46px;
    grid-area: ring;
    margin: 2px 0 0;
  }

  .goalRing::after {
    inset: 6px;
  }

  .goalRing > span {
    display: block;
  }

  .goalRing strong {
    font-size: 11px;
  }

  .goalRing em,
  .goalRing small {
    display: none;
  }

  .goalProgressTrack {
    display: block;
    width: 100%;
    height: 7px;
    grid-area: track;
    overflow: hidden;
    border-radius: 5px;
    background: var(--surface-muted);
  }

  .goalProgressTrack i {
    display: block;
    width: var(--goal-percent);
    height: 100%;
    border-radius: inherit;
    background: var(--orange);
    transform-origin: left;
    animation: lineReveal 520ms var(--ease) both;
  }

  .goalPanel > b {
    grid-area: stat;
    font-size: 11px;
    white-space: nowrap;
  }

  .goalPanel > em {
    grid-area: remain;
    justify-self: start;
    margin: 0;
    font-size: 10px;
  }

  .recentPanel,
  .momentumPanel {
    min-height: 0;
  }

  .recentPanel {
    padding-bottom: 8px;
  }

  .compactList .sessionRow {
    min-height: 72px;
    grid-template-columns: 8px minmax(0, 1fr) 18px;
    grid-template-rows: 1fr;
    gap: 10px;
    padding: 10px 2px;
  }

  .compactList .sessionMeta {
    display: none;
  }

  .compactList .sessionIdentity strong {
    font-size: 13px;
    line-height: 1.2;
  }

  .compactList .sessionIdentity > span {
    margin-top: 4px;
    font-size: 9px;
  }

  .compactList .rowChevron {
    grid-column: 3;
    grid-row: 1;
  }

  .momentumPanel {
    padding-top: 18px;
  }

  .heatmap {
    height: 104px;
  }

  .bottomNav {
    height: calc(64px + env(safe-area-inset-bottom));
    padding-inline: 18px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(190%) blur(28px);
    -webkit-backdrop-filter: saturate(190%) blur(28px);
  }

  .bottomNav button {
    min-height: 52px;
    font-size: 10px;
    font-weight: 570;
  }

  .bottomNav button.selected {
    color: var(--green);
    font-weight: 680;
  }

  .bottomNav button.selected svg {
    stroke-width: 2.2;
  }

  .sessionsHeader {
    min-height: 68px;
  }

  .clientScope {
    margin-top: 2px;
  }

  .sessionControls {
    gap: 8px;
  }

  .sessionControls > .segmented,
  .pageSearch,
  .mobileFilterButton {
    height: 42px;
  }

  .sessionStatusStrip {
    min-height: 44px;
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .fullList {
    margin-inline: -16px;
  }

  .sessionSourceHeader {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .sessionRow,
  body[data-density="compact"] .fullList .sessionRow {
    min-height: 98px;
    gap: 7px 10px;
    padding: 12px 16px;
  }

  .sessionIdentity strong {
    font-size: 14px;
    line-height: 1.18;
  }

  .sessionMeta {
    gap: 7px;
  }

  .sessionMeta em {
    font-size: 8px;
  }

  .sessionMeta b {
    font-size: 10px;
  }

  .detailPage {
    padding-top: 9px;
  }

  .cleanDetailHeader .detailTitleRow h1 {
    font-size: 23px;
    line-height: 1.12;
  }

  .cleanDetailHeader .detailPrompt {
    margin-top: 7px !important;
    -webkit-line-clamp: 2;
  }

  .liveProgressBand {
    gap: 11px;
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .liveProgressLead h2 {
    font-size: 18px;
  }

  .liveTiming {
    padding-block: 8px;
  }

  .liveNumbers {
    min-height: 44px;
  }

  .liveTrace {
    height: 27px;
  }

  .detailChartPanel {
    padding-top: 14px;
  }

  .workPulsePlot,
  .tokenPacePlot {
    height: 108px;
  }

  .chartInsight {
    min-height: 44px;
  }

  .exploreRows a {
    min-height: 58px;
  }

  .sheetDialog,
  .authDialog {
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.14);
  }

  .utilityDialog {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 380px) {
  .mobileBrand > span:last-child {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .authControl {
    min-width: 70px;
    max-width: 92px;
  }

  .weekPanel .sectionHeader.inline {
    align-items: stretch;
    flex-direction: column;
  }

  .weeklyChart {
    height: 174px;
  }

  .reportControls .segmented {
    overflow-x: hidden;
  }

  .reportControls .segmented button {
    min-width: 0;
    padding-inline: 4px;
    font-size: 9px;
  }
}

@media (max-width: 760px) {
  .bottomNav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: 8px;
  }

  .sessionsHeader .pageActions {
    display: flex;
    gap: 5px;
  }

  .sessionsHeader .pageActions .secondaryButton {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
  }

  .sessionsHeader .pageActions .secondaryButton span {
    display: none;
  }

  .focusHeader .pageActions .secondaryButton {
    width: 36px;
    min-width: 36px;
    padding: 0;
    justify-content: center;
  }

  .focusHeader .pageActions .secondaryButton span {
    display: none;
  }

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

  .cleanDetailHeader .detailTitleRow > div:first-child {
    width: 100%;
  }

  .cleanDetailHeader .detailTitleRow h1 {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .cleanDetailHeader .detailActions {
    width: 100%;
    justify-content: flex-start;
  }

  .cleanDetailHeader .detailActions > button {
    min-width: 42px;
    min-height: 42px;
  }

  .briefEvidence,
  .briefLabels,
  .savedViewsBar {
    scrollbar-width: none;
  }

  .briefEvidence::-webkit-scrollbar,
  .briefLabels::-webkit-scrollbar,
  .savedViewsBar::-webkit-scrollbar {
    display: none;
  }
}

/* Progressive navigation and insight surfaces. */
.skipLink {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 160ms var(--ease);
}

.skipLink:focus-visible {
  transform: translateY(0);
}

.viewHost h1[tabindex="-1"]:focus {
  outline: 0;
}

.mobileFreshness {
  display: none;
}

.connectionBanner > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.connectionBanner > span strong {
  color: inherit;
  font-size: 11px;
}

.connectionBanner > span em {
  overflow: hidden;
  color: inherit;
  font-size: 10px;
  font-style: normal;
  opacity: 0.82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attentionGroup + .attentionGroup {
  margin-top: 6px;
  border-top: 1px solid var(--line);
}

.attentionGroup > header {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding-top: 6px;
  color: var(--text-muted);
}

.attentionGroup > header > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 5px;
  background: var(--orange-soft);
  color: var(--orange);
}

.attentionGroup.review > header > span {
  background: var(--green-soft);
  color: var(--green);
}

.attentionGroup > header svg {
  width: 13px;
  height: 13px;
}

.attentionGroup > header strong {
  color: var(--text-soft);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.attentionGroup > header em {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.attentionRecovery {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 10px;
}

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

.attentionRecovery svg {
  width: 13px;
}

.attentionRecovery button {
  background: transparent;
  color: var(--blue);
  font-size: 10px;
  font-weight: 650;
}

.focusEmpty .secondaryButton,
.actionableEmpty .secondaryButton {
  margin-top: 12px;
}

.sessionLoadMore,
.timelineLoadOlder {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
}

.sessionLoadMore:hover,
.timelineLoadOlder:hover {
  background: var(--surface-muted);
}

.sessionLoadMore > svg,
.timelineLoadOlder > svg {
  width: 16px;
  color: var(--blue);
}

.sessionLoadMore > span,
.timelineLoadOlder > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sessionLoadMore strong,
.timelineLoadOlder strong {
  font-size: 11px;
}

.sessionLoadMore em,
.timelineLoadOlder em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.timelineLoadOlder {
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.detailNavigation {
  position: sticky;
  z-index: 8;
  top: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 52px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.detailNavigation a {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-right: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 620;
  text-decoration: none;
}

.detailNavigation a:last-child {
  border-right: 0;
}

.detailNavigation a:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.detailNavigation a.selected {
  color: var(--green);
  font-weight: 720;
}

.detailNavigation a.selected::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--green);
  content: "";
}

.detailNavigation svg {
  width: 15px;
  height: 15px;
}

.reportComparison {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
  overflow: hidden;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.comparisonLead {
  display: grid;
  min-height: 106px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}

.comparisonLead > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: var(--green-soft);
  color: var(--green);
}

.reportComparison.down .comparisonLead > span {
  background: var(--orange-soft);
  color: var(--orange);
}

.comparisonLead svg {
  width: 17px;
}

.comparisonLead div {
  display: grid;
}

.comparisonLead em,
.comparisonLead p,
.comparisonMetrics em,
.comparisonMetrics small {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
}

.comparisonLead strong {
  margin: 1px 0;
  font-size: 22px;
  letter-spacing: 0;
}

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

.comparisonMetrics > span {
  display: grid;
  min-width: 0;
  align-content: center;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}

.comparisonMetrics > span:last-child {
  border-right: 0;
}

.comparisonMetrics strong {
  margin: 3px 0 1px;
  font-size: 18px;
}

.projectDialog {
  width: min(720px, calc(100vw - 32px));
}

.projectInsightHero {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.projectInsightGlyph {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}

.projectInsightGlyph svg {
  width: 20px;
}

.projectInsightHero div {
  min-width: 0;
}

.projectInsightHero h3 {
  overflow: hidden;
  margin: 2px 0;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectInsightHero em,
.projectInsightHero p {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectInsightHero > strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 11px;
}

.projectInsightHero > strong i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.projectInsightHero.watch > strong {
  color: var(--orange);
}

.projectInsightHero.attention > strong {
  color: var(--red);
}

.projectInsightMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.projectInsightMetrics > span {
  display: grid;
  min-width: 0;
  min-height: 82px;
  align-content: center;
  padding: 12px 15px;
  border-right: 1px solid var(--line);
}

.projectInsightMetrics > span:last-child {
  border-right: 0;
}

.projectInsightMetrics em,
.projectInsightMetrics small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projectInsightMetrics strong {
  margin: 3px 0;
  font-size: 17px;
}

.projectRecentSessions {
  padding: 16px 18px 10px;
}

.projectRecentSessions > header {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  justify-content: space-between;
}

.projectRecentSessions h3 {
  font-size: 13px;
}

.projectRecentSessions p {
  color: var(--text-muted);
  font-size: 10px;
}

.projectRecentSessions > div {
  border-top: 1px solid var(--line);
}

.projectRecentSessions > div > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 8px minmax(0, 1fr) auto auto 16px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.projectRecentSessions > div > button:hover {
  background: var(--surface-muted);
}

.projectRecentSessions button > span {
  display: grid;
  min-width: 0;
}

.projectRecentSessions button strong,
.projectRecentSessions button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.projectRecentSessions button em,
.projectRecentSessions button time,
.projectRecentSessions button b {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.commandResults > .commandResult {
  grid-template-columns: 30px minmax(0, 1fr) auto 18px;
}

.commandResultGlyph {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--blue);
}

.commandResultGlyph svg {
  width: 14px;
  color: currentColor;
}

.commandEmpty {
  min-height: 190px;
}

.projectHealthPanel,
.focusLowerGrid,
.periodSection {
  content-visibility: auto;
  contain-intrinsic-size: 1px 320px;
}

@media (max-width: 760px) {
  .mobileFreshness {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    text-align: left;
  }

  .mobileFreshness > svg:first-child {
    width: 14px;
    color: var(--green);
  }

  .mobileFreshness.stale > svg:first-child {
    color: var(--orange);
  }

  .mobileFreshness > span {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: baseline;
    gap: 5px;
  }

  .mobileFreshness b,
  .mobileFreshness em,
  .mobileFreshness > strong {
    overflow: hidden;
    font-size: 9px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileFreshness b {
    color: var(--text);
    font-size: 10px;
  }

  .mobileFreshness em {
    color: var(--text-muted);
  }

  .mobileFreshness > strong {
    color: var(--blue);
    font-weight: 650;
  }

  .mobileFreshness > svg:last-child {
    width: 13px;
    color: var(--text-muted);
  }

  .attentionGroup > header {
    padding-inline: 0;
  }

  .attentionDismiss {
    display: grid;
    width: 32px;
    height: 32px;
    opacity: 1;
  }

  .attentionRow {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .attentionRow time {
    display: none;
  }

  .attentionRecovery {
    padding-top: 3px;
  }

  .sessionLoadMore {
    margin-inline: -16px;
    width: calc(100% + 32px);
  }

  .detailNavigation {
    grid-template-columns: repeat(6, minmax(68px, 1fr));
    min-height: 48px;
    margin-inline: -14px;
    overflow-x: auto;
    border-inline: 0;
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    scrollbar-width: none;
  }

  .detailNavigation::-webkit-scrollbar {
    display: none;
  }

  .detailNavigation a {
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
  }

  .detailNavigation a.selected::after {
    right: 14px;
    left: 14px;
  }

  .detailNavigation svg {
    width: 14px;
    height: 14px;
  }

  .reportComparison {
    grid-template-columns: minmax(0, 1fr);
    margin: 10px -16px;
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .comparisonLead {
    min-height: 78px;
    padding: 11px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .comparisonLead strong {
    font-size: 19px;
  }

  .comparisonMetrics > span {
    min-height: 66px;
    padding: 9px 10px;
  }

  .comparisonMetrics strong {
    font-size: 15px;
  }

  .comparisonMetrics small {
    font-size: 8px;
  }

  .projectDialog {
    width: 100vw;
    max-width: 100vw;
  }

  .projectInsightHero {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 15px 16px;
  }

  .projectInsightGlyph {
    width: 38px;
    height: 38px;
  }

  .projectInsightHero > strong {
    grid-column: 2;
    justify-self: start;
  }

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

  .projectInsightMetrics > span:nth-child(2) {
    border-right: 0;
  }

  .projectInsightMetrics > span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .projectRecentSessions {
    padding-inline: 16px;
  }

  .projectRecentSessions > div > button {
    grid-template-columns: 8px minmax(0, 1fr) auto 14px;
  }

  .projectRecentSessions button time {
    display: none;
  }

  .commandResults > .commandResult {
    min-height: 62px;
  }
}

/* Session navigation, live activity, and scoped reporting. */
.liveCenterControl {
  display: grid;
  width: min(240px, 22vw);
  min-width: 150px;
  height: 38px;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  padding: 3px 8px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text-soft);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease), box-shadow 160ms ease;
}

.liveCenterControl:hover {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
  box-shadow: var(--shadow-sm);
}

.liveCenterControl:active {
  transform: scale(0.98);
}

.liveCenterControl > span:first-child {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.liveCenterControl.hasActivity > span:first-child {
  background: var(--green-soft);
  color: var(--green);
}

.liveCenterControl > span:first-child svg {
  width: 15px;
}

.liveCenterControl > span:first-child b {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  min-width: 15px;
  height: 15px;
  place-items: center;
  padding-inline: 3px;
  border: 2px solid var(--surface);
  border-radius: 8px;
  background: var(--text-muted);
  color: #ffffff;
  font-size: 7px;
}

.liveCenterControl.hasActivity > span:first-child b {
  background: var(--green);
}

.liveCenterControl > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.liveCenterControl strong,
.liveCenterControl em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveCenterControl strong {
  color: var(--text);
  font-size: 10px;
  font-weight: 680;
}

.liveCenterControl em {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 8px;
  font-style: normal;
}

.liveCenterControl > svg {
  width: 13px;
  color: var(--text-muted);
}

.liveCenterDialog {
  width: min(760px, calc(100vw - 28px));
}

.liveCenterSummary {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 10px;
}

.liveCenterSummary span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
}

.liveCenterSummary svg {
  width: 14px;
}

.liveCenterSummary em {
  font-style: normal;
}

.liveCenterRows > button {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: 16px minmax(180px, 1fr) minmax(88px, auto) minmax(80px, auto) auto 16px;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  text-align: left;
}

.liveCenterRows > button:hover {
  background: var(--surface-muted);
}

.liveCenterRows button > span:not(.liveCenterPulse) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

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

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

.liveCenterRows b,
.liveCenterRows em,
.liveCenterRows small {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
}

.liveCenterRows small {
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--green-soft);
  color: var(--green);
}

.liveCenterPulse {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
}

.liveCenterPulse i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
  animation: livePulse 2.2s ease-in-out infinite;
}

.sessionTableHead {
  display: grid;
  min-height: 34px;
  grid-template-columns: 8px minmax(220px, 1.65fr) minmax(520px, 2.4fr) 32px 18px;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.sessionTableHead > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(62px, 1fr));
  gap: 9px;
}

.sessionTableHead button,
.sessionTableHead > b,
.sessionTableHead > div > span {
  overflow: hidden;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: inherit;
  white-space: nowrap;
}

.sessionTableHead button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sessionTableHead button:hover,
.sessionTableHead button.selected {
  color: var(--text);
}

.sessionTableHead button svg {
  width: 10px;
}

.fullList .sessionRow {
  min-height: 72px;
}

.fullList .sessionMeta em {
  display: none;
}

.fullList .sessionMeta b {
  margin-top: 0;
}

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

.sessionTitleLine > strong {
  min-width: 0;
}

.familyBranch {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: var(--cyan);
}

.familyBranch svg {
  width: 13px;
}

.familyToggle {
  display: inline-flex;
  min-width: 0;
  height: 22px;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 8px;
  font-weight: 680;
}

.familyToggle svg {
  width: 11px;
}

.sessionRow.familyChild {
  background: color-mix(in srgb, var(--cyan) 2.5%, var(--surface));
}

.sessionRow.familyChild .sessionIdentity {
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
}

.sessionDelta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--green);
  font-size: 8px;
  font-weight: 650;
}

.sessionDelta svg {
  width: 10px;
}

.activeFilterBar {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  margin: -2px 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.activeFilterBar::-webkit-scrollbar {
  display: none;
}

.activeFilterBar > button {
  display: inline-flex;
  min-height: 27px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  color: var(--text-soft);
  font-size: 9px;
}

.activeFilterBar svg {
  width: 10px;
  color: var(--text-muted);
}

.activeFilterBar > .clearAllFilters {
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.phaseTracker {
  padding: 13px 18px 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.phaseTracker header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.phaseTracker header > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
}

.phaseTracker header em {
  font-style: normal;
  text-transform: uppercase;
}

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

.phaseTracker header svg {
  width: 12px;
}

.phaseTracker ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  list-style: none;
}

.phaseTracker li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 4px;
  color: var(--text-muted);
}

.phaseTracker li > span {
  z-index: 1;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
}

.phaseTracker li svg {
  width: 12px;
}

.phaseTracker li > i {
  position: absolute;
  z-index: 0;
  top: 13px;
  left: calc(50% + 13px);
  width: calc(100% - 26px);
  height: 1px;
  background: var(--line);
}

.phaseTracker li.complete,
.phaseTracker li.current {
  color: var(--green);
}

.phaseTracker li.complete > span {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
}

.phaseTracker li.complete > i {
  background: color-mix(in srgb, var(--green) 55%, var(--line));
}

.phaseTracker li.current > span {
  border-color: color-mix(in srgb, var(--green) 50%, var(--line));
  background: var(--green-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 7%, transparent);
  animation: liveBreathe 2.4s ease-in-out infinite;
}

.phaseTracker li b {
  overflow: hidden;
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phaseTracker > p {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 8px;
}

.timelineEvent {
  grid-template-columns: 28px 72px minmax(0, 1fr) auto 48px 32px;
}

.timelineBookmark {
  display: grid;
  width: 28px;
  height: 28px;
  grid-column: 6;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  opacity: 0;
}

.timelineBookmark:hover,
.timelineBookmark:focus-visible,
.timelineBookmark.on,
.timelineEvent:hover .timelineBookmark {
  opacity: 1;
}

.timelineBookmark.on {
  background: var(--orange-soft);
  color: var(--orange);
}

.timelineBookmark svg {
  width: 13px;
}

.timelineIdleGap {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
}

.timelineIdleGap::before,
.timelineIdleGap::after {
  width: min(90px, 12vw);
  height: 1px;
  background: var(--line);
  content: "";
}

.timelineIdleGap svg {
  width: 11px;
}

.timelineIdleGap + .stepGroup {
  margin-top: 0;
}

.reportControls {
  flex-wrap: wrap;
}

.reportScopeControls {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
}

.reportScopeControls label {
  display: grid;
  min-width: 142px;
  height: 36px;
  grid-template-columns: 16px auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-muted);
}

.reportScopeControls svg {
  width: 13px;
}

.reportScopeControls span {
  font-size: 9px;
}

.reportScopeControls select {
  width: 100%;
  min-width: 0;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .liveCenterControl {
    width: 174px;
  }

  .sessionTableHead {
    grid-template-columns: 8px minmax(190px, 1.4fr) minmax(430px, 2fr) 30px 16px;
    gap: 9px;
  }
}

@media (max-width: 920px) and (min-width: 761px) {
  .liveCenterControl {
    display: none;
  }

  .sessionTableHead {
    grid-template-columns: 8px minmax(180px, 1.25fr) minmax(340px, 1.8fr) 28px 16px;
  }
}

@media (max-width: 760px) {
  .liveCenterControl,
  .clientScope,
  .sessionsPage .sessionControls > .segmented,
  .sessionsPage .sortControl,
  .sessionsPage .sessionStatusStrip,
  .sessionTableHead {
    display: none;
  }

  .sessionsPage {
    padding-top: 9px;
  }

  .sessionsHeader {
    min-height: 58px;
    padding-bottom: 9px;
  }

  .sessionsHeader h1 {
    font-size: 24px;
  }

  .sessionsHeader p {
    margin-top: 2px;
    font-size: 10px;
  }

  .sessionsHeader .pageActions [data-open-filters] {
    display: none;
  }

  .sessionsPage .sessionControls {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    margin-bottom: 7px;
  }

  .sessionsPage .pageSearch,
  .sessionsPage .mobileFilterButton {
    height: 42px;
  }

  .savedViewsBar {
    min-height: 31px;
    margin: 0 -16px 6px;
    padding: 0 16px;
  }

  .savedViewsBar > span:first-child {
    display: none;
  }

  .savedViewsBar > button,
  .savedViewChip {
    min-height: 27px;
  }

  .activeFilterBar {
    margin: 0 -16px 6px;
    padding: 0 16px;
  }

  .sessionSourceHeader {
    min-height: 43px;
  }

  .fullList .sessionRow,
  body[data-density="compact"] .fullList .sessionRow {
    min-height: 91px;
  }

  .fullList .sessionMeta em {
    display: block;
  }

  .sessionRow.familyChild .sessionIdentity {
    padding-left: 7px;
  }

  .familyToggle span {
    display: none;
  }

  .familyToggle {
    width: 24px;
    padding: 0;
    justify-content: center;
  }

  .sessionDelta {
    display: none;
  }

  .phaseTracker {
    margin-inline: -16px;
    padding: 12px 16px 10px;
  }

  .phaseTracker header > span:last-child {
    display: none;
  }

  .phaseTracker li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .phaseTracker li > span {
    width: 24px;
    height: 24px;
  }

  .phaseTracker li > i {
    top: 12px;
    left: calc(50% + 12px);
    width: calc(100% - 24px);
  }

  .phaseTracker li b {
    font-size: 8px;
  }

  .timelineToolbar .segmented {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .timelineToolbar .segmented button {
    min-width: 72px;
  }

  .timelineEvent {
    grid-template-columns: 26px minmax(0, 1fr) 30px;
  }

  .timelineEvent time,
  .timelineEvent > .eventStatus,
  .timelineEvent > em {
    display: none;
  }

  .timelineEvent > div {
    grid-column: 2;
  }

  .timelineBookmark {
    grid-column: 3;
    opacity: 1;
  }

  .reportScopeControls {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .reportScopeControls label {
    min-width: 0;
  }

  .reportScopeControls span {
    display: none;
  }

  .reportScopeControls label {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .liveCenterRows > button {
    grid-template-columns: 14px minmax(0, 1fr) 16px;
    padding-inline: 15px;
  }

  .liveCenterRows button > span:nth-child(n + 3),
  .liveCenterRows button > small {
    display: none;
  }
}

/* Command-first overview and progressive session analysis. */
.overviewCommandDeck {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
  gap: 12px;
  margin-bottom: 14px;
}

.overviewNowCard {
  display: grid;
  min-width: 0;
  min-height: 92px;
  grid-template-columns: 44px minmax(220px, 1fr) minmax(250px, 0.8fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease);
}

.overviewNowCard:hover {
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, var(--green-soft));
  transform: translateY(-1px);
}

.overviewNowCard.quiet {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.overviewNowGlyph {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.overviewNowCard.quiet .overviewNowGlyph {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.overviewNowGlyph svg {
  width: 19px;
  height: 19px;
}

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

.overviewNowIdentity em {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.overviewNowCard.quiet .overviewNowIdentity em {
  color: var(--text-muted);
}

.overviewNowIdentity em i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent);
  animation: liveBreathe 2.6s ease-in-out infinite;
}

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

.overviewNowIdentity strong {
  margin: 2px 0;
  font-size: 17px;
  font-weight: 710;
}

.overviewNowIdentity small {
  color: var(--text-muted);
  font-size: 10px;
}

.overviewNowMetrics {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.overviewNowMetrics > span {
  display: grid;
  min-width: 0;
  padding: 2px 13px;
}

.overviewNowMetrics > span + span {
  border-left: 1px solid var(--line);
}

.overviewNowMetrics em,
.overviewNowMetrics b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overviewNowMetrics em {
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.overviewNowMetrics b {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
}

.overviewNowAction {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.overviewNowAction svg {
  width: 13px;
}

.overviewCommandDeck .overviewFocusStrip {
  min-height: 92px;
  margin: 0;
}

.overviewFrame {
  grid-template-areas:
    "week goal"
    "recent momentum";
}

.weekPanel { grid-area: week; }
.goalPanel { grid-area: goal; }
.recentPanel { grid-area: recent; }
.momentumPanel { grid-area: momentum; }

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

.advancedInsights > summary {
  display: grid;
  min-height: 74px;
  grid-template-columns: 38px minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  list-style: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease);
}

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

.advancedInsights > summary:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 95%, var(--cyan-soft));
  transform: translateY(-1px);
}

.advancedInsightsGlyph {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.advancedInsightsGlyph svg {
  width: 17px;
}

.advancedInsights > summary > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.advancedInsights > summary strong {
  font-size: 13px;
  font-weight: 700;
}

.advancedInsights > summary em {
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.advancedInsightsMeta b,
.advancedInsightsMeta em {
  min-height: 24px;
  margin: 0 !important;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--surface-muted);
  color: var(--text-soft) !important;
  font-size: 9px !important;
  font-style: normal;
  font-weight: 620;
}

.advancedInsightsMeta em.regressed {
  background: var(--orange-soft);
  color: var(--orange) !important;
}

.advancedInsightsAction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
}

.advancedInsightsAction b {
  font-size: 10px !important;
  font-weight: 650 !important;
}

.advancedInsightsAction svg {
  width: 15px;
  transition: transform 180ms var(--ease);
}

.advancedInsights[open] .advancedInsightsAction svg {
  transform: rotate(180deg);
}

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

@media (max-width: 1100px) and (min-width: 761px) {
  .overviewCommandDeck {
    grid-template-columns: minmax(0, 1fr);
  }

  .overviewFrame {
    grid-template-areas:
      "recent"
      "week"
      "goal"
      "momentum";
  }
}

@media (max-width: 760px) {
  .appMain {
    grid-template-rows: calc(56px + env(safe-area-inset-top)) auto minmax(0, 1fr);
  }

  .globalBar {
    height: calc(56px + env(safe-area-inset-top));
  }

  .mobileBrand .brandMark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .mobileMore,
  .authControl {
    height: 36px !important;
  }

  .mobileMore {
    width: 36px !important;
    flex-basis: 36px !important;
  }

  .authControl {
    min-width: 72px;
  }

  .mobileFreshness {
    min-height: 34px;
  }

  .overviewPage {
    padding-top: 10px;
  }

  .overviewPage .pageHeader {
    min-height: 46px;
    padding-bottom: 8px;
  }

  .overviewPage .pageHeader h1 {
    font-size: 24px;
  }

  .overviewPage .pageHeader p {
    display: none;
  }

  .overviewCommandDeck {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }

  .overviewNowCard {
    min-height: 108px;
    grid-template-areas:
      "glyph identity action"
      "metrics metrics metrics";
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 10px 12px;
    padding: 12px 13px 10px;
  }

  .overviewNowGlyph {
    width: 38px;
    height: 38px;
    grid-area: glyph;
  }

  .overviewNowIdentity {
    grid-area: identity;
  }

  .overviewNowIdentity strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.2;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .overviewNowIdentity small {
    font-size: 9px;
  }

  .overviewNowMetrics {
    grid-area: metrics;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding-top: 9px;
  }

  .overviewNowMetrics > span {
    padding-inline: 10px;
  }

  .overviewNowMetrics > span:first-child {
    padding-left: 0;
  }

  .overviewNowMetrics b {
    font-size: 14px;
  }

  .overviewNowAction {
    width: 18px;
    grid-area: action;
    overflow: hidden;
    font-size: 0;
  }

  .overviewNowCard.quiet {
    min-height: 78px;
    grid-template-areas: "glyph identity action";
    grid-template-columns: 38px minmax(0, 1fr) 18px;
  }

  .overviewCommandDeck .overviewFocusStrip {
    min-height: 58px;
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    gap: 10px;
    padding: 9px 12px;
  }

  .overviewCommandDeck .overviewFocusStrip > span:first-child {
    width: 32px;
    height: 32px;
  }

  .overviewCommandDeck .overviewFocusStrip > b {
    display: none;
  }

  .overviewCommandDeck .overviewFocusStrip em {
    font-size: 9px;
  }

  .overviewPage > .metricBand {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
  }

  .overviewPage > .metricBand .metricBandItem {
    display: grid;
    min-height: 68px;
    align-content: center;
    padding: 8px 7px;
    border-top: 0;
    text-align: center;
  }

  .overviewPage > .metricBand .metricGlyph {
    display: none;
  }

  .overviewPage > .metricBand .metricBandItem:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  .overviewPage > .metricBand .metricBandItem strong {
    font-size: 16px;
  }

  .overviewPage > .metricBand .metricBandItem em {
    font-size: 8px;
  }

  .overviewPage > .metricBand .metricBandItem small {
    font-size: 8px;
  }

  .overviewFrame {
    grid-template-areas:
      "recent"
      "week"
      "goal"
      "momentum";
  }

  .detailNavigation {
    scroll-padding-inline: 18px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  }

  .detailNavigation a {
    scroll-snap-align: center;
  }

  .advancedInsights > summary {
    min-height: 70px;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 10px;
    padding: 10px 12px;
  }

  .advancedInsightsMeta {
    display: none;
  }

  .advancedInsightsAction {
    width: 18px;
    overflow: hidden;
  }

  .advancedInsightsAction b {
    display: none;
  }

  .advancedInsightsBody {
    gap: 12px;
  }
}

@media (min-width: 360px) and (max-width: 760px) {
  .detailNavigation {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow-x: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 340px) {
  .overviewNowMetrics em,
  .overviewPage > .metricBand .metricBandItem small {
    display: none;
  }

  .overviewNowCard {
    min-height: 96px;
  }

  .overviewPage > .metricBand .metricBandItem {
    min-height: 58px;
  }
}

/* Interaction clarity, report attribution, and mobile touch polish. */
.attentionOpenCue,
.reportMoreToggle {
  display: none;
}

.reportMoreBody {
  display: contents;
}

.reportAttributionNote {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 9px 13px;
  border-left: 3px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan-soft) 56%, transparent);
  color: var(--text-soft);
}

.reportAttributionNote > svg {
  width: 18px;
  flex: 0 0 18px;
  color: var(--cyan);
}

.reportAttributionNote > span {
  display: grid;
  gap: 1px;
}

.reportAttributionNote strong {
  font-size: 11px;
}

.reportAttributionNote em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .mobileBrand {
    min-height: 44px;
  }

  .mobileMore,
  .authControl {
    height: 44px !important;
  }

  .mobileMore {
    width: 44px !important;
    flex-basis: 44px !important;
  }

  .authControl {
    min-width: 78px;
  }

  .mobileFreshness {
    min-height: 40px;
  }

  .mobileFreshness b {
    font-size: 11px;
  }

  .mobileFreshness em,
  .mobileFreshness > strong {
    font-size: 10px;
  }

  .sessionsHeader .pageActions .secondaryButton,
  .focusHeader .pageActions .secondaryButton,
  .focusHeader .pageActions .iconButton,
  .reportsPage .pageActions .secondaryButton {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .segmented.compact {
    min-height: 44px;
  }

  .segmented.compact button {
    min-height: 40px;
    font-size: 11px;
  }

  .textButton,
  .chartLegend button {
    min-height: 40px;
  }

  .chartLegend button {
    padding-inline: 6px;
  }

  .focusSectionHeader .segmented button {
    min-height: 36px;
  }

  .attentionRow {
    min-height: 94px;
    grid-template-columns: 36px minmax(0, 1fr) 40px;
    gap: 9px;
  }

  .attentionGlyph {
    width: 34px;
    height: 34px;
  }

  .attentionMain {
    gap: 2px;
    padding-block: 10px;
  }

  .attentionMain strong {
    font-size: 13px;
  }

  .attentionMain p {
    font-size: 11px;
    line-height: 1.35;
  }

  .attentionOpenCue {
    display: inline-flex;
    width: max-content;
    min-height: 24px;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 680;
  }

  .attentionOpenCue svg {
    width: 12px;
  }

  .attentionDismiss {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
  }

  .sessionsHeader p,
  .sessionIdentity > span,
  .compactList .sessionIdentity > span {
    font-size: 10px;
  }

  .sessionMeta em,
  .fullList .sessionMeta em {
    font-size: 9px;
  }

  .sessionMeta b,
  .fullList .sessionMeta b {
    font-size: 11px;
  }

  .savedViewsBar > button,
  .savedViewChip,
  .activeFilterBar > button {
    min-height: 36px;
  }

  .familyToggle {
    width: 36px;
    height: 36px;
  }

  .backLink,
  .detailSubpageHeader > .backLink {
    min-height: 40px;
  }

  .detailBreadcrumb a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
  }

  .detailNavigation {
    min-height: 54px;
  }

  .detailNavigation a {
    min-height: 54px;
    font-size: 10px;
  }

  .phaseTracker li b,
  .phaseTracker > p {
    font-size: 9px;
  }

  .timelineToolbar .segmented button {
    min-height: 36px;
  }

  .timelineEvent {
    grid-template-columns: 28px minmax(0, 1fr) 40px;
  }

  .timelineBookmark {
    width: 40px;
    height: 40px;
  }

  .stepGroup > summary {
    min-height: 48px;
  }

  .reportControls {
    gap: 7px;
  }

  .reportControls > .segmented button {
    min-height: 36px;
  }

  .reportMoreToggle {
    display: grid;
    width: 100%;
    min-height: 48px;
    grid-template-columns: 20px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text-soft);
    text-align: left;
  }

  .reportMoreToggle > svg {
    width: 16px;
    color: var(--text-muted);
  }

  .reportMoreToggle > svg:last-child {
    transition: transform 180ms var(--ease);
  }

  .reportMoreToggle[aria-expanded="true"] > svg:last-child {
    transform: rotate(180deg);
  }

  .reportMoreToggle > span {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .reportMoreToggle strong {
    font-size: 11px;
  }

  .reportMoreToggle em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .reportMoreBody {
    display: none;
    width: 100%;
  }

  .reportMoreBody.open {
    display: grid;
    gap: 7px;
  }

  .reportMoreBody > .segmented,
  .reportMoreBody .reportScopeControls {
    width: 100%;
  }

  .reportScopeControls label {
    min-height: 44px;
  }

  .reportScopeControls select {
    font-size: 11px;
  }

  .reportRange {
    min-height: 30px;
    align-items: center;
    padding-block: 2px;
    font-size: 10px;
  }

  .reportAttributionNote {
    align-items: flex-start;
    margin: -2px -16px 10px;
    padding: 10px 16px;
  }

  .reportAttributionNote strong {
    font-size: 12px;
  }

  .reportAttributionNote em {
    font-size: 11px;
  }
}

.toolToolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
}

.toolStatusFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toolStatusFilters button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}

.toolStatusFilters em {
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.toolStatusFilters .on {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.toolStatusFilters .pending.on {
  border-color: color-mix(in srgb, var(--orange) 50%, var(--line));
  background: var(--orange-soft);
  color: var(--text);
}

.toolStatusFilters .error.on {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: var(--red-soft);
  color: var(--red);
}

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

.toolSearch,
.toolSort {
  min-width: 0;
  min-height: 40px;
}

.toolSearch .searchClear {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
}

.toolSearch .searchClear:hover {
  background: var(--surface-muted);
}

.toolSort {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-muted);
}

.toolSort > svg {
  width: 15px;
  flex: 0 0 15px;
}

.toolSort select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 11px;
}

.toolResultsMeta {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 11px;
}

.toolResultsMeta .textButton {
  min-height: 26px;
  font-size: 11px;
}

.toolRangeNote {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.toolRangeNote svg {
  width: 14px;
  height: 16px;
  flex: 0 0 14px;
}

.toolRow.pending {
  box-shadow: inset 3px 0 var(--orange);
}

.toolRow.error {
  box-shadow: inset 3px 0 var(--red);
}

.toolRow.pending .toolGlyph {
  color: var(--orange);
  background: var(--orange-soft);
}

.toolRow.error .toolGlyph {
  color: var(--red);
  background: var(--red-soft);
}

.toolRow summary {
  grid-template-columns: 34px minmax(160px, 1fr) 94px 76px 92px 16px;
}

.toolMobileTiming {
  display: none;
}

.toolPayload {
  min-width: 0;
}

.toolPayload > header {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
}

.toolPayload > header b {
  margin: 0;
  font-size: 10px;
}

.toolPayload .iconButton {
  width: 32px;
  height: 32px;
}

.toolPayload pre {
  font-size: 11px;
  line-height: 1.6;
  overscroll-behavior: contain;
}

@media (max-width: 760px) {
  .toolToolbar {
    gap: 8px;
  }

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

  .toolStatusFilters button {
    min-width: 0;
    min-height: 44px;
    gap: 4px;
    padding: 6px 3px;
    font-size: 11px;
  }

  .toolStatusFilters em {
    font-size: 10px;
  }

  .toolSearchRow {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 7px;
  }

  .toolSearch,
  .toolSort {
    min-height: 44px;
  }

  .toolSearch {
    gap: 7px;
    padding-inline: 9px;
  }

  .toolSearch input {
    font-size: 12px;
  }

  .toolSearch .searchClear {
    width: 36px;
    height: 40px;
    flex-basis: 36px;
    margin-right: -7px;
  }

  .toolSort {
    padding-inline: 7px;
    gap: 4px;
  }

  .toolSort select {
    min-height: 42px;
    font-size: 11px;
  }

  .toolResultsMeta,
  .toolResultsMeta .textButton {
    min-height: 36px;
  }

  .toolRow summary {
    grid-template-columns: 30px minmax(0, 1fr) auto 12px;
    min-height: 88px;
    gap: 8px;
    padding: 12px 10px;
  }

  .toolIdentity strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    font-size: 12px;
    line-height: 1.4;
  }

  .toolIdentity > em {
    margin-top: 2px;
    font-size: 10px;
  }

  .toolMobileTiming {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .toolRow summary .toolMobileTiming time {
    display: inline;
    font-size: inherit;
  }

  .toolDetails {
    gap: 8px;
    padding: 0 12px 14px;
  }

  .toolPayload > header {
    min-height: 44px;
  }

  .toolPayload .iconButton {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 360px) {
  .toolSearchRow {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .toolSort > svg {
    display: none;
  }

  .toolStatusFilters button {
    flex-direction: column;
    gap: 0;
  }
}