.retention-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #d8dfe5;
  background: #fff;
}
.retention-header h1 { margin: 0 0 4px; font-size: 25px; }
.retention-header .sub { color: #68727f; font-size: 13px; }
.retention-source { color: #7a8490; font-size: 12px; white-space: nowrap; }
.retention-page-main { max-width: 1560px; padding-top: 18px; }
.retention-status {
  margin-bottom: 12px;
  color: #68727f;
  font-size: 12px;
}
.retention-filter {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #d8dfe5;
  background: #fff;
}
.retention-filter > div:first-child { display: flex; align-items: baseline; gap: 12px; }
.retention-filter > div:first-child b { color: #354353; font-size: 13px; }
.retention-filter > div:first-child span { color: #7a8490; font-size: 12px; }
.retention-range-picker { width: 330px; }
.retention-range-picker .ltv-range-panel { right: 0; left: auto; width: min(720px, calc(100vw - 300px)); }
.retention-range-picker .ltv-range-day.is-in-range:not(:disabled) {
  background: #d8ebe5 !important;
  color: #174d44 !important;
  font-weight: 650;
}
.retention-range-picker .ltv-range-day.is-start:not(:disabled),
.retention-range-picker .ltv-range-day.is-end:not(:disabled) {
  background: radial-gradient(circle at center, var(--accent) 0 13px, #d8ebe5 14px) !important;
  color: #fff !important;
  font-weight: 800;
}
.retention-range-picker .ltv-range-day.is-start:not(:disabled) { border-radius: 8px 0 0 8px; }
.retention-range-picker .ltv-range-day.is-end:not(:disabled) { border-radius: 0 8px 8px 0; }
.retention-range-picker .ltv-range-day.is-start.is-end:not(:disabled) { border-radius: 8px; }
.retention-range-picker .ltv-range-day:disabled {
  background: #f6f8f7 !important;
  color: #c2cac6 !important;
  cursor: not-allowed;
  opacity: 1;
}
.retention-tabs {
  display: flex;
  gap: 26px;
  margin-bottom: 0;
  border-bottom: 1px solid #d8dfe5;
}
.retention-tabs button {
  position: relative;
  padding: 10px 2px 12px;
  border: 0;
  background: transparent;
  color: #5f6b78;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.retention-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: "";
}
.retention-tabs button:hover { color: #1a5f91; }
.retention-tabs button.active { color: #175d93; font-weight: 700; }
.retention-tabs button.active::after { background: #3f8fc7; }
.retention-panel {
  padding: 0 0 4px;
  border: 1px solid #d8dfe5;
  border-top: 0;
  background: #fff;
}
.retention-panel[hidden] { display: none; }
.retention-table-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 12px;
}
.retention-table-title h2,
.retention-table-title h3 { margin: 0 0 4px; font-size: 16px; }
.retention-table-title p { margin: 0; color: #727d89; font-size: 12px; line-height: 1.5; }
.retention-table-title > span { color: #7b8692; font-size: 12px; }
.retention-table-wrap,
.retention-series-wrap { overflow: auto; border-top: 1px solid #dfe4e8; }
.retention-table-wrap.is-middle-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.retention-table-wrap.is-middle-dragging * { cursor: grabbing !important; }
.retention-table-wrap table,
.retention-series-table { width: 100%; min-width: 1060px; margin: 0; border-collapse: separate; border-spacing: 0; }
.retention-matrix-table {
  width: var(--retention-matrix-width, max-content) !important;
  min-width: 100% !important;
  table-layout: fixed;
}
.retention-matrix-table th,
.retention-matrix-table td { min-width: 82px; width: 82px; }
.retention-matrix-table th:first-child,
.retention-matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 132px;
  width: 132px;
  background: #fff;
}
.retention-matrix-table th:nth-child(2),
.retention-matrix-table td:nth-child(2) {
  position: sticky;
  left: 132px;
  z-index: 3;
  min-width: 140px;
  width: 140px;
  background: #fff;
  box-shadow: 5px 0 8px rgba(39, 55, 67, .06);
}
.retention-matrix-table thead th:first-child,
.retention-matrix-table thead th:nth-child(2) { z-index: 5; background: #f6f7f9; }
.retention-matrix-table tbody tr:hover th:first-child,
.retention-matrix-table tbody tr:hover td:nth-child(2) { background: #f3f8fc; }
.retention-matrix-table tbody tr.retention-weighted-row th,
.retention-matrix-table tbody tr.retention-weighted-row td {
  background: #edf5f2;
  border-bottom: 2px solid #b7cec5;
  color: #214b42;
  font-weight: 700;
}
.retention-matrix-table tbody tr.retention-weighted-row th:first-child,
.retention-matrix-table tbody tr.retention-weighted-row td:nth-child(2) { background: #e5f0ec; }
.retention-matrix-table tbody tr.retention-weighted-row:hover th,
.retention-matrix-table tbody tr.retention-weighted-row:hover td { background: #e5f0ec; }
.retention-unmatured { color: #a7afb7 !important; background: #fbfcfd !important; }
.retention-table-wrap th,
.retention-table-wrap td,
.retention-series-table th,
.retention-series-table td {
  height: 44px;
  padding: 8px 12px;
  border-right: 1px solid #e3e7eb;
  border-bottom: 1px solid #e3e7eb;
  background: #fff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.retention-table-wrap thead th,
.retention-series-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f7f9;
  color: #4e5966;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.retention-table-wrap th:first-child,
.retention-series-table th:first-child { text-align: left; }
.retention-table-wrap tbody th { color: #344151; font-weight: 600; white-space: nowrap; }
.retention-table-wrap tbody tr:hover th,
.retention-table-wrap tbody tr:hover td,
.retention-series-table tbody tr:hover th,
.retention-series-table tbody tr:hover td { background: #f3f8fc; }
.retention-table-wrap tbody tr.latest-row th,
.retention-table-wrap tbody tr.latest-row td { background: #f8fafc; }
.retention-table-wrap .num,
.retention-series-table .num,
.retention-series-table td { text-align: center; }
.retention-rate { color: #14579b; cursor: help; white-space: nowrap; }
.retention-rate.empty { color: #adb5bd; cursor: default; }
.retention-series-table thead th:first-child,
.retention-series-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 180px;
  background: #fff;
  text-align: left;
}
.retention-series-table thead th:first-child { z-index: 3; background: #f6f7f9; }
.retention-series-table tbody th small { display: block; margin: 3px 0 0 17px; color: #7b8692; font-size: 11px; font-weight: 400; }
.series-label { display: inline-flex; align-items: center; gap: 8px; }
.series-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); }
.retention-series-table td { color: #14579b; cursor: help; }
.retention-series-table td.small-sample { background: #fffaf0; }
.retention-inline-note {
  padding: 10px 18px;
  color: #6e7884;
  font-size: 12px;
  line-height: 1.6;
}
.retention-inline-note b { color: #354353; }
.retention-week-picker { display: flex; align-items: center; gap: 8px; color: #68727f; font-size: 12px; }
.retention-week-picker select {
  min-height: 34px;
  padding: 5px 30px 5px 9px;
  border: 1px solid #cfd6dc;
  border-radius: 3px;
  background: #fff;
  color: #344151;
  font: inherit;
  font-size: 12px;
}
.tier-name { display: inline-flex; align-items: center; gap: 8px; }
.tier-dot { width: 8px; height: 8px; border-radius: 50%; }
.sample-warning { color: #a66a13; }
.retention-definition-details {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid #d8dfe5;
  background: #fff;
}
.retention-definition-details > summary { color: #586574; cursor: pointer; font-size: 13px; font-weight: 600; }
.retention-definition-details[open] > summary { margin-bottom: 14px; }
.retention-definition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.retention-definition-grid > div,
.retention-evidence-grid > div { min-width: 0; padding: 10px 12px; border: 1px solid #e1e6ea; background: #fafbfc; }
.retention-definition-grid b { display: block; margin-bottom: 4px; font-size: 12px; }
.retention-definition-grid p { margin: 0; color: #6d7783; font-size: 12px; line-height: 1.6; }
.retention-evidence { margin-bottom: 12px; }
.retention-evidence h3 { margin: 0 0 8px; font-size: 13px; }
.retention-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.retention-evidence-grid span { display: block; margin-bottom: 3px; color: #77818d; font-size: 11px; }
.retention-evidence-grid b { font-size: 12px; }
.retention-evidence-grid code { display: block; overflow-wrap: anywhere; color: #475361; font-size: 10px; line-height: 1.4; }
.retention-definition-details .business-note { margin: 0; padding: 10px 12px; border: 0; border-radius: 0; background: #f7f9fa; color: #697481; font-size: 12px; }
.retention-error { color: #a43838; }

@media (max-width: 720px) {
  .retention-header { align-items: flex-start; flex-direction: column; }
  .retention-page-main { padding-right: 10px; padding-left: 10px; }
  .retention-tabs { gap: 18px; overflow-x: auto; }
  .retention-tabs button { white-space: nowrap; }
  .retention-filter { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px; }
  .retention-filter > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
  .retention-range-picker { width: 100%; }
  .retention-range-picker .ltv-range-panel { right: auto; left: 0; width: min(660px, calc(100vw - 20px)); }
  .retention-table-title { align-items: flex-start; flex-direction: column; padding: 14px 12px 10px; }
  .retention-week-picker { width: 100%; justify-content: space-between; }
  .retention-definition-grid,
  .retention-evidence-grid { grid-template-columns: 1fr; }
}