@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&family=Inter:wght@400;500&family=Geist+Mono:wght@500&family=Newsreader:ital,wght@1,300&display=swap");

:root {
  --color-ink: #191a1d;
  --color-selected: #17181b;
  --color-graphite: #4f5352;
  --color-graphite-soft: #626765;
  --color-ink-soft: #606975;
  --color-ink-subtle: #606975;
  --color-muted: #606975;
  --color-line: rgba(25, 26, 29, 0.12);
  --color-line-strong: rgba(25, 26, 29, 0.18);
  --color-hairline: rgba(25, 26, 29, 0.1);
  --color-hairline-card: rgba(25, 26, 29, 0.08);
  --color-hairline-soft: rgba(25, 26, 29, 0.06);
  --color-paper: #ece8e1;
  --color-panel: #f4f1eb;
  --color-panel-soft: #e7e2d9;
  --color-sidebar: #f4f1eb;
  --color-clay: #8c7867;
  --color-clay-dark: #8c7867;
  --color-clay-soft: #d4c7bb;
  --color-olive: #606975;
  --color-alert: #6b4f3f;
  --color-sand: #ece8e1;
  --color-card-white: #f8f6f1;
  --color-card-cream: #f7f4ed;
  --color-icon-well: #e9e5dd;
  --status-in-range-rgb: 96, 105, 117;
  --status-in-range: rgb(var(--status-in-range-rgb));
  --status-out-of-range: #8c7867;
  --status-other-rgb: 183, 188, 194;
  --status-other: rgb(var(--status-other-rgb));
  --shadow-card: none;
  --radius-lg: 22px;
  --font-display: "Hanken Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "DM Mono", "Courier New", monospace;
  --font-editorial: "Newsreader", Georgia, serif;
  --texture-dots: radial-gradient(rgba(25, 26, 29, 0.1) 1.2px, transparent 1.5px);
  --texture-size: 16px 16px;
  --user-page-max-width: 1120px;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #f4f0e8;
  --color-selected: #faf7f1;
  --color-graphite: #c4c7cc;
  --color-graphite-soft: #b3b6bb;
  --color-ink-soft: #d0d4da;
  --color-ink-subtle: #a7acb3;
  --color-muted: #a9adb6;
  --color-line: rgba(244, 240, 232, 0.14);
  --color-line-strong: rgba(244, 240, 232, 0.22);
  --color-hairline: rgba(244, 240, 232, 0.1);
  --color-hairline-card: rgba(244, 240, 232, 0.08);
  --color-hairline-soft: rgba(244, 240, 232, 0.06);
  --color-paper: #101114;
  --color-panel: #16191d;
  --color-panel-soft: #13161a;
  --color-sidebar: #14161a;
  --color-clay: #c2a88f;
  --color-clay-dark: #c2a88f;
  --color-clay-soft: #4e4438;
  --color-olive: #a7acb3;
  --color-alert: #df9077;
  --color-sand: #101114;
  --color-card-white: #1b1f25;
  --color-card-cream: #171a1f;
  --color-icon-well: #1e2228;
  --status-in-range-rgb: 169, 173, 182;
  --status-in-range: rgb(var(--status-in-range-rgb));
  --status-out-of-range: #c2a88f;
  --status-other-rgb: 152, 156, 163;
  --status-other: rgb(var(--status-other-rgb));
  --texture-dots: radial-gradient(rgba(255, 255, 255, 0.06) 1.2px, transparent 1.5px);
}

.report-preview-body {
  background-color: var(--color-paper);
  background-image: var(--texture-dots);
  background-size: 16px 16px;
  min-height: 100vh;
}

.report-preview-shell {
  margin: 0 auto;
  max-width: 1040px;
  padding: 28px 20px 56px;
}

.report-preview-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.report-preview-main {
  display: grid;
  gap: 22px;
}

.report-preview-hero,
.report-preview-changes,
.report-preview-categories {
  padding: 28px;
}

.report-preview-subtitle {
  color: var(--color-ink-subtle);
  margin: 10px 0 0;
  max-width: 640px;
}

.report-preview-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.report-preview-meta-item {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(126, 144, 163, 0.24);
  border-radius: 999px;
  align-items: center;
  color: var(--color-ink);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  min-height: 38px;
  padding: 8px 14px;
}

.report-preview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.report-preview-actions[hidden] {
  display: none;
}

.report-preview-download-link {
  align-items: center;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 36px;
  padding: 8px 13px;
  text-decoration: none;
}

.report-preview-download-link:hover {
  background: rgba(255, 255, 255, 0.84);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.report-preview-section {
  display: grid;
  gap: 14px;
}

.report-preview-section-heading h2 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 6px 0 0;
}

.report-preview-summary-grid,
.report-preview-changes-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.report-preview-stat-card,
.report-preview-change-card {
  min-height: 128px;
}

.report-preview-stat-card {
  display: grid;
  gap: 14px;
}

.report-preview-stat-label,
.report-preview-change-label {
  color: var(--color-ink-subtle);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-preview-stat-value,
.report-preview-change-value {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
}

.report-preview-changes-grid {
  margin-top: 10px;
}

.report-preview-change-card {
  background: rgba(246, 248, 251, 0.92);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  display: grid;
  gap: 12px;
  padding: 22px;
}

.report-preview-category-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.report-preview-category-item {
  background: transparent;
  min-height: 70px;
}

.report-preview-empty,
.report-preview-status {
  color: var(--color-ink-subtle);
  margin: 0;
}

.report-preview-status[data-state="error"] {
  color: #9a2f2f;
}

.admin-share-row td {
  background: transparent;
  padding-top: 0;
}

.admin-preview-row td {
  background: transparent;
  padding-top: 0;
}

.admin-preview-panel,
.admin-share-panel {
  background: rgba(246, 248, 251, 0.92);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  display: grid;
  gap: 16px;
  padding: 18px 20px;
}

.admin-preview-panel-header,
.admin-share-panel-header {
  display: grid;
  gap: 6px;
}

.admin-preview-panel-header strong,
.admin-share-panel-header strong {
  font-size: 15px;
}

.admin-preview-meta,
.admin-share-meta {
  color: var(--color-ink-subtle);
  font-size: 13px;
}

.admin-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-preview-stat-card {
  display: contents;
}

.admin-preview-stat {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 4px;
  min-width: 180px;
  padding: 14px 16px;
}

.admin-preview-stat strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.admin-preview-stat span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-preview-summary {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 7px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  padding: 14px;
}

.admin-preview-summary dt {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-preview-summary dd {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}

.admin-preview-text {
  margin: 0;
}

.admin-actual-target-panel {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  padding-top: 4px;
}

.admin-actual-target-panel[hidden] {
  display: none;
}

.admin-actual-target-panel-header {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-actual-target-panel-header strong {
  color: var(--color-ink);
  font-size: 15px;
}

.admin-actual-target-panel-header p,
.admin-actual-target-status {
  color: var(--color-muted);
  font-size: 13px;
  margin: 0;
}

.admin-actual-target-status {
  font-weight: 700;
  text-align: right;
}

.admin-actual-target-status[data-status="success"] {
  color: var(--color-clay-dark);
}

.admin-actual-target-status[data-status="error"] {
  color: #9a2f2f;
}

.admin-actual-target-list {
  display: grid;
  gap: 10px;
}

.admin-actual-target-row {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
}

.admin-actual-target-row summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.1fr) minmax(170px, 0.7fr) auto;
  list-style: none;
  padding: 14px 16px;
}

.admin-actual-target-row summary::-webkit-details-marker {
  display: none;
}

.admin-actual-target-marker,
.admin-actual-target-result {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-actual-target-marker strong,
.admin-actual-target-result strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-actual-target-marker span,
.admin-actual-target-result span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-actual-target-current {
  background: rgba(117, 42, 58, 0.08);
  border: 1px solid rgba(117, 42, 58, 0.18);
  border-radius: 999px;
  color: #752a3a;
  font-size: 12px;
  font-weight: 850;
  justify-self: end;
  line-height: 1.2;
  padding: 7px 10px;
  white-space: nowrap;
}

.admin-actual-target-form {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  padding: 14px 16px 16px;
}

.admin-actual-target-field {
  display: grid;
  gap: 7px;
}

.admin-actual-target-field-wide,
.admin-actual-target-actions {
  grid-column: 1 / -1;
}

.admin-actual-target-field span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-actual-target-field input,
.admin-actual-target-field textarea {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  min-height: 44px;
  padding: 0 12px;
  width: 100%;
}

.admin-actual-target-field textarea {
  line-height: 1.45;
  min-height: 88px;
  padding: 12px;
  resize: vertical;
}

.admin-actual-target-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-user-role-wrap {
  display: grid;
  gap: 8px;
}

.admin-user-role-toggle {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.admin-user-role-toggle span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .admin-actual-target-panel-header,
  .admin-actual-target-row summary,
  .admin-actual-target-form {
    grid-template-columns: 1fr;
  }

  .admin-actual-target-status {
    text-align: left;
  }

  .admin-actual-target-current {
    justify-self: start;
    white-space: normal;
  }
}

.admin-share-link-wrap {
  display: grid;
  gap: 10px;
}

.admin-share-link {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  padding: 12px 14px;
  width: 100%;
}

.admin-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-share-email-history {
  background: rgba(255, 253, 248, 0.58);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink-subtle);
  display: grid;
  font-size: 13px;
  gap: 8px;
  line-height: 1.45;
  padding: 12px 14px;
}

.admin-share-email-history strong {
  color: var(--color-ink);
  font-size: 13px;
}

.admin-share-email-history ul {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-share-email-history li {
  color: var(--color-ink-soft);
}

.plastictox-preview-shell {
  max-width: 1120px;
}

.plastictox-preview-main {
  gap: 24px;
}

.plastictox-hero {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  padding: 30px 30px 34px;
}

.plastictox-hero-copy {
  display: grid;
  gap: 14px;
}

.plastictox-subtitle {
  color: var(--color-ink-soft);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.plastictox-hero-stats {
  display: grid;
  gap: 14px;
}

.plastictox-stat-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.94));
  border: 1px solid rgba(126, 144, 163, 0.18);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(67, 57, 45, 0.08);
  display: grid;
  gap: 10px;
  min-height: 126px;
  padding: 22px;
}

.plastictox-stat-footnote,
.plastictox-bucket-share,
.plastictox-dial-range {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
}

.plastictox-stat-label,
.plastictox-bucket-status {
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.plastictox-stat-value,
.plastictox-bucket-value {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.plastictox-hero-visual {
  background:
    radial-gradient(circle at top right, rgba(132, 182, 196, 0.18), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 249, 0.94));
  border: 1px solid rgba(126, 144, 163, 0.18);
  border-radius: 28px;
  display: grid;
  min-height: 100%;
  padding: 26px;
}

.plastictox-dial-wrap {
  align-content: center;
  display: grid;
  gap: 24px;
}

.plastictox-dial {
  --dial-progress: 0%;
  align-items: center;
  display: grid;
  justify-items: center;
  margin: 0 auto;
  position: relative;
}

.plastictox-dial-ring {
  background:
    radial-gradient(circle at center, rgba(251, 247, 239, 1) 0 58%, transparent 58%),
    conic-gradient(from 210deg, var(--dial-fill, #7e919c) var(--dial-progress), rgba(208, 219, 224, 0.42) 0);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(126, 144, 163, 0.1);
  height: 228px;
  width: 228px;
}

.plastictox-dial[data-tone="low"] {
  --dial-fill: #3d9a68;
}

.plastictox-dial[data-tone="moderate"] {
  --dial-fill: #d08b2e;
}

.plastictox-dial[data-tone="high"] {
  --dial-fill: #bc524b;
}

.plastictox-dial[data-tone="unknown"] {
  --dial-fill: #6d7c88;
}

.plastictox-dial-center {
  align-items: center;
  background: rgba(255, 253, 248, 0.98);
  border: 1px solid rgba(126, 144, 163, 0.14);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(67, 57, 45, 0.08);
  display: grid;
  height: 152px;
  inset: 50%;
  justify-items: center;
  padding: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 152px;
}

.plastictox-dial-value {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 58px);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.plastictox-dial-unit {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plastictox-dial-copy {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.plastictox-dial-caption {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.plastictox-section {
  display: grid;
  gap: 16px;
}

.plastictox-section-heading {
  display: grid;
  gap: 6px;
}

.plastictox-section-heading h2 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.08;
  margin: 0;
}

.plastictox-insight-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plastictox-insight-card {
  display: grid;
  gap: 10px;
  min-height: 180px;
  padding: 24px;
}

.plastictox-insight-card h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1;
  margin: 0;
}

.plastictox-insight-copy,
.plastictox-band-note {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.plastictox-bar-panel {
  display: grid;
  gap: 18px;
  padding: 20px 24px 24px;
}

.plastictox-bar-header {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.7fr);
}

.plastictox-bar-header h3 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.08;
  margin: 0;
}

.plastictox-bar-summary {
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.plastictox-bar-chart {
  display: grid;
  gap: 14px;
}

.plastictox-bar-row {
  background: rgba(247, 250, 251, 0.92);
  border: 1px solid rgba(126, 144, 163, 0.16);
  border-radius: 20px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.plastictox-bar-row-header,
.plastictox-bar-row-footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.plastictox-bar-label,
.plastictox-bar-value {
  color: var(--color-ink);
  font-weight: 700;
}

.plastictox-bar-row-footer {
  color: var(--color-muted);
  font-size: 13px;
}

.plastictox-bar-track {
  background: rgba(216, 225, 229, 0.7);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.plastictox-bar-fill {
  background: linear-gradient(90deg, rgba(78, 145, 164, 0.92), rgba(111, 177, 187, 0.92));
  border-radius: 999px;
  height: 100%;
  min-width: 0;
}

.plastictox-band-panel {
  display: grid;
  gap: 20px;
  padding: 28px;
}

.plastictox-band-summary {
  display: grid;
  gap: 10px;
}

.plastictox-band-chip {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.08em;
  min-height: 46px;
  min-width: 104px;
  padding: 0 18px;
  text-transform: uppercase;
}

.plastictox-band-chip[data-tone="low"] {
  background: rgba(58, 137, 101, 0.12);
  color: #1e6a48;
}

.plastictox-band-chip[data-tone="moderate"] {
  background: rgba(201, 146, 62, 0.14);
  color: #9b6514;
}

.plastictox-band-chip[data-tone="high"] {
  background: rgba(181, 77, 77, 0.12);
  color: #9d3030;
}

.plastictox-band-chip[data-tone="unknown"] {
  background: rgba(102, 115, 131, 0.12);
  color: #4f5d70;
}

.plastictox-band-copy {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.plastictox-scale {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

.plastictox-scale-segment {
  border-radius: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 10px;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.plastictox-scale-segment[data-active="true"] {
  border: 1px solid rgba(37, 40, 39, 0.14);
  box-shadow: 0 16px 32px rgba(67, 57, 45, 0.12);
  transform: translateY(-2px);
}

.plastictox-scale-segment.is-low {
  background: rgba(58, 137, 101, 0.12);
  color: #1e6a48;
}

.plastictox-scale-segment.is-moderate {
  background: rgba(201, 146, 62, 0.14);
  color: #9b6514;
}

.plastictox-scale-segment.is-high {
  background: rgba(181, 77, 77, 0.12);
  color: #9d3030;
}

.plastictox-copy-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.plastictox-copy-card {
  display: grid;
  gap: 12px;
  min-height: 224px;
  padding: 24px;
}

.plastictox-copy-card h2 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.08;
  margin: 0;
}

.plastictox-copy-card p:last-child {
  color: var(--color-ink-soft);
  line-height: 1.65;
  margin: 0;
}

.plastictox-compare-shell {
  max-width: 1320px;
}

.plastictox-compare-header {
  align-items: start;
  gap: 18px;
}

.plastictox-compare-intro {
  display: grid;
  gap: 8px;
  max-width: 760px;
}

.plastictox-compare-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
  margin: 0;
}

.plastictox-compare-intro p:last-child {
  color: var(--color-ink-soft);
  margin: 0;
}

.plastictox-compare-main {
  display: grid;
  gap: 28px;
}

.plastictox-compare-variant {
  display: grid;
  gap: 14px;
}

.plastictox-compare-label {
  display: grid;
  gap: 6px;
}

.plastictox-compare-kicker {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plastictox-compare-label h2 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  margin: 0;
}

.plastictox-compare-label p {
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 760px;
}

.plastictox-variant-card {
  border-radius: 30px;
  overflow: hidden;
}

.ptx-layout {
  display: grid;
  gap: 22px;
  padding: 30px;
}

.ptx-layout-kicker {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.ptx-layout-meta {
  color: var(--color-ink-soft);
  margin: 0;
}

.ptx-inline-badges,
.ptx-c-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ptx-inline-badge {
  align-items: center;
  background: rgba(88, 106, 123, 0.1);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 38px;
  padding: 0 14px;
  text-transform: uppercase;
}

.ptx-inline-badge[data-tone="low"] {
  background: rgba(61, 154, 104, 0.14);
  color: #1e6a48;
}

.ptx-inline-badge[data-tone="moderate"] {
  background: rgba(208, 139, 46, 0.16);
  color: #9b6514;
}

.ptx-inline-badge[data-tone="high"] {
  background: rgba(188, 82, 75, 0.14);
  color: #9d3030;
}

.ptx-inline-badge.is-muted,
.ptx-inline-badge.is-soft {
  background: rgba(88, 106, 123, 0.08);
  color: var(--color-ink-soft);
}

.ptx-metric-card,
.ptx-summary-tile,
.ptx-c-microgrid article {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(126, 144, 163, 0.18);
  border-radius: 22px;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.ptx-metric-card.is-primary {
  background: linear-gradient(180deg, rgba(244, 249, 251, 0.98), rgba(232, 244, 248, 0.98));
}

.ptx-metric-label,
.ptx-summary-tile span,
.ptx-c-microgrid article span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptx-metric-value,
.ptx-summary-tile strong,
.ptx-c-microgrid article strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 0.95;
}

.ptx-summary-tile small {
  color: var(--color-ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.ptx-a-hero {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.ptx-a-copy,
.ptx-b-sidebar,
.ptx-c-copy {
  display: grid;
  gap: 10px;
}

.ptx-a-copy h3,
.ptx-b-sidebar h3,
.ptx-c-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1;
  margin: 0;
}

.ptx-a-priority,
.ptx-summary-stack,
.ptx-c-microgrid {
  display: grid;
  gap: 12px;
}

.ptx-bars-compact,
.ptx-bars-briefing,
.ptx-c-bars {
  display: grid;
  gap: 14px;
}

.ptx-bucket-row {
  background: rgba(248, 251, 252, 0.92);
  border: 1px solid rgba(126, 144, 163, 0.16);
  border-radius: 20px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.ptx-bucket-row[data-detected="false"] {
  background: rgba(248, 249, 250, 0.86);
}

.ptx-bucket-row-header,
.ptx-bucket-row-footer {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ptx-bucket-name,
.ptx-bucket-reading {
  color: var(--color-ink);
  font-weight: 700;
}

.ptx-bucket-row-footer {
  color: var(--color-muted);
  font-size: 13px;
}

.ptx-bucket-track {
  background: rgba(216, 225, 229, 0.7);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.ptx-bucket-fill {
  background: linear-gradient(90deg, rgba(78, 145, 164, 0.92), rgba(111, 177, 187, 0.92));
  border-radius: 999px;
  height: 100%;
}

.ptx-layout-b {
  background: linear-gradient(180deg, rgba(253, 252, 248, 0.98), rgba(246, 248, 249, 0.98));
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}

.ptx-b-main {
  display: grid;
  gap: 16px;
}

.ptx-b-callout {
  border-radius: 24px;
  display: grid;
  gap: 8px;
  padding: 22px;
}

.ptx-b-callout[data-tone="low"] {
  background: rgba(226, 244, 233, 0.96);
}

.ptx-b-callout[data-tone="moderate"] {
  background: rgba(251, 239, 220, 0.96);
}

.ptx-b-callout[data-tone="high"] {
  background: rgba(250, 228, 225, 0.96);
}

.ptx-b-callout[data-tone="unknown"] {
  background: rgba(239, 243, 246, 0.96);
}

.ptx-b-callout-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptx-b-callout strong {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 0.95;
}

.ptx-b-callout p {
  color: var(--color-ink-soft);
  margin: 0;
}

.ptx-layout-c {
  background:
    radial-gradient(circle at top left, rgba(201, 227, 220, 0.62), transparent 32%),
    linear-gradient(180deg, #f8f5ea 0%, #f1f4ec 100%);
}

.ptx-c-hero {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
}

.ptx-c-meter {
  align-items: center;
  display: grid;
  justify-items: center;
}

.ptx-c-meter-ring {
  align-items: center;
  background:
    radial-gradient(circle at center, rgba(250, 248, 242, 1) 0 58%, transparent 58%),
    conic-gradient(from 210deg, rgba(129, 169, 159, 0.96) var(--ptx-progress), rgba(208, 219, 214, 0.54) 0);
  border-radius: 50%;
  display: grid;
  height: 222px;
  justify-items: center;
  width: 222px;
}

.ptx-c-meter-center {
  align-items: center;
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid rgba(122, 151, 142, 0.18);
  border-radius: 50%;
  box-shadow: 0 18px 36px rgba(67, 57, 45, 0.08);
  display: grid;
  height: 148px;
  justify-items: center;
  width: 148px;
}

.ptx-c-meter-center strong {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 0.9;
}

.ptx-c-meter-center span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ptx-layout-d {
  background:
    radial-gradient(circle at top left, rgba(245, 234, 219, 0.86), transparent 34%),
    radial-gradient(circle at top right, rgba(237, 226, 212, 0.76), transparent 38%),
    linear-gradient(180deg, #fbf6ee 0%, #f3e9dc 100%);
  border: 1px solid rgba(168, 143, 117, 0.24);
  color: #30281f;
  gap: 26px;
}

.ptx-d-header {
  align-items: end;
  border-bottom: 1px solid rgba(136, 113, 90, 0.24);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  padding-bottom: 18px;
}

.ptx-d-header-copy {
  display: grid;
  gap: 10px;
}

.ptx-d-header-copy h3 {
  color: #2f271f;
  font-family: var(--font-display);
  font-size: clamp(42px, 4.8vw, 62px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.94;
  margin: 0;
}

.ptx-d-header .ptx-layout-kicker {
  color: #8f7b66;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.ptx-d-header .ptx-layout-meta {
  color: #7c6955;
}

.ptx-d-level {
  background: rgba(252, 247, 238, 0.92);
  border: 1px solid rgba(156, 131, 106, 0.22);
  border-radius: 20px;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.ptx-d-level span {
  color: #8f7b66;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ptx-d-level strong {
  color: #33291f;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 500;
  line-height: 0.95;
}

.ptx-d-level small {
  color: #74614f;
  font-size: 13px;
  line-height: 1.45;
}

.ptx-d-level[data-tone="low"] {
  background: rgba(240, 250, 242, 0.94);
  border-color: rgba(104, 157, 118, 0.28);
}

.ptx-d-level[data-tone="moderate"] {
  background: rgba(255, 243, 224, 0.94);
  border-color: rgba(197, 145, 74, 0.3);
}

.ptx-d-level[data-tone="high"] {
  background: rgba(255, 234, 229, 0.94);
  border-color: rgba(193, 98, 89, 0.3);
}

.ptx-d-main {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
}

.ptx-d-spotlight {
  background: rgba(255, 252, 246, 0.9);
  border: 1px solid rgba(156, 131, 106, 0.2);
  border-radius: 24px;
  display: grid;
  gap: 12px;
  padding: 22px;
}

.ptx-d-overline {
  color: #8f7b66;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin: 0;
  text-transform: uppercase;
}

.ptx-d-spotlight > strong {
  color: #30271e;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 62px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 0.92;
}

.ptx-d-spotlight > p {
  color: #665443;
  line-height: 1.52;
  margin: 0;
  max-width: 60ch;
}

.ptx-d-stat-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
}

.ptx-d-stat-grid article {
  background: rgba(251, 245, 236, 0.88);
  border: 1px solid rgba(156, 131, 106, 0.18);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 14px;
}

.ptx-d-stat-grid article span {
  color: #8f7b66;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ptx-d-stat-grid article strong {
  color: #30271e;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 0.94;
}

.ptx-d-side {
  display: grid;
  gap: 12px;
}

.ptx-d-note {
  background: rgba(253, 247, 238, 0.86);
  border: 1px solid rgba(156, 131, 106, 0.2);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.ptx-d-note h4 {
  color: #3b3128;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}

.ptx-d-note p {
  color: #665443;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.ptx-d-distribution {
  display: grid;
  gap: 14px;
}

.ptx-d-distribution h4 {
  color: #3b3128;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.03;
  margin: 0;
}

.ptx-bars-editorial {
  display: grid;
  gap: 14px;
}

.ptx-layout-d .ptx-bucket-row {
  background: rgba(255, 250, 243, 0.9);
  border: 1px solid rgba(156, 131, 106, 0.2);
}

.ptx-layout-d .ptx-bucket-row[data-detected="false"] {
  background: rgba(248, 241, 232, 0.72);
}

.ptx-layout-d .ptx-bucket-row-footer,
.ptx-layout-d .ptx-layout-meta {
  color: #74614f;
}

.ptx-layout-d .ptx-bucket-track {
  background: rgba(210, 188, 162, 0.48);
}

.ptx-layout-d .ptx-bucket-fill {
  background: linear-gradient(90deg, rgba(165, 117, 74, 0.92), rgba(209, 168, 127, 0.94));
}

.ptx-layout-e {
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(116, 191, 166, 0.24), transparent 55%),
    radial-gradient(120% 90% at 0% 0%, rgba(112, 161, 206, 0.2), transparent 52%),
    linear-gradient(170deg, #f7fcfb 0%, #eef7f4 44%, #eaf4f6 100%);
  border: 1px solid rgba(104, 136, 153, 0.22);
  color: #15313d;
  gap: 24px;
}

.ptx-e-hero {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.82fr);
}

.ptx-e-headline {
  display: grid;
  gap: 10px;
}

.ptx-e-kicker {
  color: #4f6e79;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}

.ptx-e-headline h3 {
  color: #123241;
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  line-height: 0.92;
  margin: 0;
}

.ptx-e-headline p {
  color: #4d6872;
  margin: 0;
}

.ptx-e-concentration {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(100, 134, 151, 0.24);
  border-radius: 24px;
  display: grid;
  gap: 8px;
  padding: 18px;
}

.ptx-e-concentration-label {
  color: #4f6e79;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ptx-e-concentration > strong {
  color: #14313f;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.94;
}

.ptx-e-concentration > p {
  color: #4d6872;
  margin: 0;
}

.ptx-e-kpi {
  background: rgba(238, 247, 248, 0.86);
  border: 1px solid rgba(100, 134, 151, 0.18);
  border-radius: 16px;
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 12px;
}

.ptx-e-kpi span {
  color: #4f6e79;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ptx-e-kpi strong {
  color: #15313d;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 40px);
  line-height: 0.94;
}

.ptx-e-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.ptx-e-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(100, 134, 151, 0.2);
  border-radius: 22px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.ptx-e-card h4 {
  color: #1f3e4d;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  margin: 0;
}

.ptx-e-card strong {
  color: #15313d;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.94;
}

.ptx-e-card p {
  color: #4d6872;
  line-height: 1.5;
  margin: 0;
}

.ptx-e-card-primary {
  background: linear-gradient(160deg, rgba(233, 247, 241, 0.95), rgba(227, 239, 248, 0.84));
}

.ptx-e-card-compare {
  background: linear-gradient(165deg, rgba(232, 246, 251, 0.96), rgba(224, 242, 248, 0.84));
}

.ptx-e-card-dominant {
  background: linear-gradient(162deg, rgba(233, 245, 250, 0.95), rgba(235, 248, 242, 0.84));
}

.ptx-e-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ptx-e-badge {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(100, 134, 151, 0.2);
  border-radius: 999px;
  color: #3f5d69;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
}

.ptx-e-compare-circle {
  align-items: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0 58%, transparent 58%),
    conic-gradient(from 210deg, rgba(76, 174, 141, 0.88) 68%, rgba(189, 224, 217, 0.76) 0);
  border-radius: 50%;
  display: grid;
  height: 154px;
  justify-items: center;
  margin: 2px 0 4px;
  width: 154px;
}

.ptx-e-compare-circle strong {
  color: #183948;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.9;
}

.ptx-e-compare-circle span {
  color: #4f6e79;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ptx-e-distribution {
  display: grid;
  gap: 12px;
}

.ptx-e-distribution-head {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
}

.ptx-e-distribution-head h4 {
  color: #1f3e4d;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 0.96;
  margin: 0;
}

.ptx-e-distribution-head p {
  color: #4d6872;
  margin: 0;
}

.ptx-e-distribution-list {
  display: grid;
  gap: 12px;
}

.ptx-layout-e .ptx-bucket-row {
  background: rgba(250, 255, 255, 0.76);
  border: 1px solid rgba(100, 134, 151, 0.2);
}

.ptx-layout-e .ptx-bucket-row[data-detected="false"] {
  background: rgba(242, 249, 250, 0.72);
}

.ptx-layout-e .ptx-bucket-name,
.ptx-layout-e .ptx-bucket-reading {
  color: #1d3e4e;
}

.ptx-layout-e .ptx-bucket-row-footer {
  color: #4d6872;
}

.ptx-layout-e .ptx-bucket-track {
  background: rgba(165, 195, 206, 0.42);
}

.ptx-layout-e .ptx-bucket-fill {
  background: linear-gradient(90deg, rgba(63, 147, 176, 0.94), rgba(103, 192, 157, 0.94));
}

.ptx-e-insight {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(100, 134, 151, 0.2);
  border-radius: 22px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.ptx-e-insight h4 {
  color: #1f3e4d;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  margin: 0;
}

.ptx-e-insight-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ptx-e-insight-grid article {
  background: rgba(241, 249, 251, 0.78);
  border: 1px solid rgba(100, 134, 151, 0.18);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  min-height: 124px;
  padding: 14px;
}

.ptx-e-insight-grid span {
  color: #4f6e79;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ptx-e-insight-grid p {
  color: #355462;
  line-height: 1.48;
  margin: 0;
}

.ptx-layout-empty {
  background: rgba(255, 255, 255, 0.82);
  border-radius: 24px;
  color: var(--color-ink-soft);
  padding: 22px;
}

@media (max-width: 900px) {
  .report-preview-shell {
    padding: 22px 16px 44px;
  }

  .report-preview-hero,
  .report-preview-changes,
  .report-preview-categories {
    padding: 22px;
  }

  .plastictox-hero {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .plastictox-bar-header {
    grid-template-columns: 1fr;
  }

  .ptx-a-hero,
  .ptx-layout-b,
  .ptx-c-hero,
  .ptx-d-header,
  .ptx-d-main,
  .ptx-e-hero {
    grid-template-columns: 1fr;
  }

  .ptx-e-grid,
  .ptx-e-insight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .plastictox-stat-card,
  .plastictox-hero-visual,
  .plastictox-insight-card,
  .plastictox-bar-panel,
  .plastictox-band-panel,
  .plastictox-copy-card {
    padding: 20px;
  }

  .plastictox-section-heading h2,
  .plastictox-copy-card h2 {
    font-size: 26px;
  }

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

  .plastictox-dial-ring {
    height: 196px;
    width: 196px;
  }

  .plastictox-dial-center {
    height: 132px;
    width: 132px;
  }

  .ptx-layout {
    padding: 22px;
  }

  .ptx-c-meter-ring {
    height: 196px;
    width: 196px;
  }

  .ptx-c-meter-center {
    height: 132px;
    width: 132px;
  }

  .ptx-d-stat-grid {
    grid-template-columns: 1fr;
  }
}

.account-dashboard {
  display: grid;
  gap: 1.75rem;
}

.account-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.account-profile-editor {
  margin: 0;
}

.account-password-panel {
  margin: 0;
}

.account-dashboard [hidden] {
  display: none !important;
}

.account-editor-group {
  border-top: 1px solid rgba(92, 86, 79, 0.14);
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
}

.account-editor-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.account-editor-heading {
  display: grid;
  gap: 0.2rem;
}

.account-editor-heading h3 {
  color: #2d261e;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.account-editor-list {
  display: grid;
  gap: 1rem;
}

.account-editor-field {
  align-items: center;
  border-top: 1px solid rgba(92, 86, 79, 0.1);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  padding-top: 1rem;
}

.account-editor-field:first-child {
  border-top: 0;
  padding-top: 0;
}

.account-editor-label {
  color: #7a746b;
  font-size: 0.84rem;
  font-weight: 600;
  gap: 0.45rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.account-editor-control {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.account-input {
  appearance: none;
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid transparent;
  border-radius: 16px;
  color: #2d261e;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  min-height: 52px;
  padding: 0.85rem 1rem;
  text-transform: none;
}

.account-input[readonly] {
  cursor: default;
}

.account-editor-field.is-editing .account-input {
  background: rgba(255, 253, 248, 0.9);
  border-color: rgba(213, 204, 192, 0.96);
}

.account-editor-field.is-invalid .account-input {
  border-color: rgba(184, 56, 38, 0.72);
  box-shadow: 0 0 0 3px rgba(184, 56, 38, 0.12);
}

.account-input:focus {
  border-color: var(--color-clay);
  box-shadow: 0 0 0 3px rgba(192, 120, 88, 0.14);
  outline: none;
}

.account-editor-field.is-invalid .account-input:focus {
  border-color: rgba(184, 56, 38, 0.82);
  box-shadow: 0 0 0 3px rgba(184, 56, 38, 0.16);
}

.account-input:disabled {
  background: rgba(241, 234, 223, 0.66);
  color: #8a8379;
}

.account-checkbox-control {
  align-items: center;
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid transparent;
  border-radius: 16px;
  color: #2d261e;
  display: flex;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.85rem 1rem;
}

.account-checkbox-control input {
  accent-color: var(--color-clay);
  height: 18px;
  width: 18px;
}

.account-checkbox-control input:disabled {
  cursor: default;
}

.account-editor-field.is-editing .account-checkbox-control {
  background: rgba(255, 253, 248, 0.9);
  border-color: rgba(213, 204, 192, 0.96);
}

.account-editor-button {
  align-items: center;
  background: rgba(248, 244, 236, 0.88);
  border: 1px solid rgba(92, 86, 79, 0.12);
  border-radius: 999px;
  color: var(--color-ink-soft);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 42px;
}

.account-editor-button:hover {
  border-color: rgba(143, 86, 62, 0.24);
  color: var(--color-clay-dark);
  transform: translateY(-1px);
}

.account-editor-button:disabled {
  cursor: default;
  opacity: 0.55;
  transform: none;
}

.account-editor-button svg {
  display: block;
  fill: none;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 18px;
}

.account-editor-icon-save {
  display: none;
}

.account-editor-field.is-editing .account-editor-button {
  border-color: rgba(143, 86, 62, 0.28);
  color: var(--color-clay-dark);
}

.account-editor-field.is-editing .account-editor-icon-edit {
  display: none;
}

.account-editor-field.is-editing .account-editor-icon-save {
  display: inline-flex;
}

.account-field-error {
  color: #b83826;
  font-size: 0.88rem;
  font-weight: 600;
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
}

.account-plan-summary {
  display: grid;
  gap: 0.35rem;
  padding: 0.1rem 0;
}

.account-plan-highlight .account-plan-summary {
  border-left: 3px solid rgba(192, 120, 88, 0.54);
  padding-left: 1rem;
}

.account-plan-label {
  color: #7a746b;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.account-plan-name {
  color: #2d261e;
  display: block;
  font-size: 1.4rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
}

.account-plan-detail {
  color: #6f675d;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0.1rem 0 0;
  max-width: 58rem;
}

.account-consent-panel {
  margin: 0;
}

.account-consent-summary {
  border-top: 1px solid rgba(92, 86, 79, 0.14);
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.account-consent-control {
  align-items: center;
  background: rgba(255, 253, 248, 0.64);
  border: 1px solid rgba(92, 86, 79, 0.12);
  border-radius: 16px;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem;
}

.account-consent-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.account-consent-label {
  color: #2d261e;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}

.account-consent-copy p {
  color: #6f675d;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.account-consent-switch {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(92, 86, 79, 0.16);
  border-radius: 999px;
  color: #3d342b;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 850;
  gap: 0.5rem;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 0.85rem;
  white-space: nowrap;
}

.account-consent-switch input {
  accent-color: var(--color-clay);
  height: 18px;
  width: 18px;
}

.account-consent-switch:has(input:disabled) {
  color: rgba(61, 52, 43, 0.55);
}

.account-consent-meta {
  color: #7a746b;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 0.5rem 1rem;
  line-height: 1.45;
}

.account-consent-actions {
  display: flex;
  justify-content: flex-end;
}

.clinical-context-panel {
  display: grid;
  gap: 24px;
}

.clinical-context-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.clinical-context-card {
  align-content: start;
  background: #fffdf8;
  border: 1px solid rgba(86, 70, 47, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.clinical-context-card-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.clinical-context-card-header p {
  color: #786f64;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 4px 0 0;
}

.clinical-context-label {
  color: var(--color-ink-soft);
  display: block;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.clinical-context-list {
  display: grid;
  gap: 10px;
}

.clinical-context-row {
  align-items: start;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(86, 70, 47, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.clinical-context-row.is-condition {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.clinical-context-entry-fields {
  background: rgba(255, 253, 248, 0.8);
  border: 1px solid rgba(86, 70, 47, 0.14);
  border-radius: 8px;
  display: grid;
  min-width: 0;
}

.clinical-context-row:not(.is-condition) .clinical-context-name-cell {
  border-bottom: 1px solid rgba(86, 70, 47, 0.1);
  padding: 8px;
}

.clinical-context-row:not(.is-condition) .clinical-context-detail-cell {
  background: rgba(248, 242, 234, 0.48);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(140px, 0.34fr) minmax(92px, 0.18fr) minmax(220px, 0.48fr);
  min-width: 0;
  padding: 8px;
}

.clinical-context-edit-fields {
  display: grid;
  min-width: 0;
}

.clinical-context-summary {
  align-items: baseline;
  display: flex;
  gap: 10px;
  min-height: 42px;
  min-width: 0;
  padding: 10px 12px;
}

.clinical-context-summary-name {
  color: #2d261e;
  flex: 0 1 auto;
  font-size: 0.98rem;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinical-context-summary-detail {
  color: #786f64;
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinical-context-row[data-clinical-context-mode="view"] .clinical-context-edit-fields,
.clinical-context-row[data-clinical-context-mode="edit"] .clinical-context-summary,
.clinical-context-row[data-clinical-context-mode="edit"] .clinical-context-edit-button {
  display: none;
}

.clinical-context-control-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.clinical-context-field-label {
  color: #786f64;
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.clinical-context-row .account-input {
  min-height: 42px;
}

.clinical-context-entry-fields .account-input {
  background: #ffffff;
  border-color: rgba(86, 70, 47, 0.12);
  border-radius: 6px;
  font-size: 0.94rem;
  min-height: 40px;
  padding: 0.68rem 0.75rem;
}

.clinical-context-entry-fields .account-input:focus {
  border-color: var(--color-clay);
}

.clinical-context-name-cell {
  min-width: 0;
  position: relative;
}

.clinical-context-name-cell .clinical-context-field-label {
  margin-bottom: 4px;
}

.clinical-context-name-cell .account-input {
  width: 100%;
}

.clinical-context-suggestions {
  background: #ffffff;
  border: 1px solid rgba(86, 70, 47, 0.18);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(48, 39, 26, 0.15);
  display: grid;
  gap: 2px;
  left: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

.clinical-context-suggestions[hidden] {
  display: none;
}

.clinical-context-suggestion-button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #42382d;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  min-height: 36px;
  padding: 8px 10px;
  text-align: left;
}

.clinical-context-suggestion-button:hover,
.clinical-context-suggestion-button:focus-visible {
  background: rgba(31, 79, 70, 0.08);
  outline: none;
}

.clinical-context-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.clinical-context-chip-grid button,
.clinical-context-none-button,
.clinical-context-add-button,
.clinical-context-edit-button,
.clinical-context-remove-button {
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  justify-content: center;
  line-height: 1.1;
  min-height: 36px;
  padding: 0 12px;
}

.clinical-context-chip-grid button,
.clinical-context-none-button {
  background: #ffffff;
  border: 1px solid rgba(96, 78, 52, 0.18);
  color: #53483c;
}

.clinical-context-chip-grid button[aria-pressed="true"],
.clinical-context-none-button[aria-pressed="true"] {
  background: #1f4f46;
  border-color: #1f4f46;
  color: #ffffff;
}

.clinical-context-add-button {
  background: rgba(31, 79, 70, 0.08);
  border: 1px dashed rgba(31, 79, 70, 0.35);
  color: #1f4f46;
  justify-self: start;
}

.clinical-context-row-actions {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.clinical-context-edit-button {
  background: rgba(31, 79, 70, 0.08);
  border: 1px solid rgba(31, 79, 70, 0.18);
  color: #1f4f46;
}

.clinical-context-remove-button {
  align-self: start;
  background: #ffffff;
  border: 1px solid rgba(155, 60, 43, 0.22);
  color: #8e3a2c;
  height: 36px;
  justify-self: end;
  min-width: 88px;
}

.clinical-context-card[data-clinical-context-none-selected="true"] .clinical-context-list,
.clinical-context-card[data-clinical-context-none-selected="true"] .clinical-context-chip-grid {
  opacity: 0.45;
}

.clinical-context-card[data-clinical-context-empty="true"] .clinical-context-list::before {
  background: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(96, 78, 52, 0.18);
  border-radius: 8px;
  color: #8a8177;
  content: "No entries yet";
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px;
}

.clinical-context-actions {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.clinical-context-actions .account-plan-detail {
  margin: 0;
  max-width: 620px;
}

.account-password-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-password-field {
  color: #7a746b;
  display: grid;
  font-size: 0.84rem;
  font-weight: 600;
  gap: 0.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-password-required {
  background: rgba(140, 120, 103, 0.12);
  border: 1px solid rgba(140, 120, 103, 0.28);
  border-radius: 16px;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.45;
  margin: 0.85rem 0 0;
  padding: 0.9rem 1rem;
}

.account-password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.account-mfa-setup {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, auto) minmax(16rem, 1fr) auto minmax(12rem, 0.65fr);
}

.account-mfa-qr {
  align-self: start;
  background: #fff;
  border: 1px solid rgba(92, 86, 79, 0.14);
  border-radius: 8px;
  display: grid;
  min-height: 11rem;
  padding: 0.75rem;
  place-items: center;
}

.account-mfa-qr[hidden] {
  display: none;
}

.account-mfa-qr-image {
  display: block;
  height: min(12rem, 54vw);
  max-width: 100%;
  width: min(12rem, 54vw);
}

.account-mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.account-mfa-open-link {
  align-self: end;
  text-decoration: none;
  white-space: nowrap;
}

.account-mfa-actions {
  justify-content: flex-start;
}

.account-history-list {
  border-top: 1px solid rgba(92, 86, 79, 0.14);
  display: grid;
}

.account-history-item {
  align-items: start;
  border-bottom: 1px solid rgba(92, 86, 79, 0.1);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1rem 0;
}

.account-history-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.account-history-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.account-history-summary {
  color: #2d261e;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.account-history-meta,
.account-history-empty {
  color: #7a746b;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

.account-history-empty {
  padding-top: 1rem;
}

.account-history-type {
  background: rgba(248, 244, 236, 0.9);
  border: 1px solid rgba(92, 86, 79, 0.12);
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.45rem 0.6rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-history-footer {
  align-items: center;
  border-top: 1px solid rgba(92, 86, 79, 0.14);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  min-height: 2.5rem;
  padding-top: 0.85rem;
}

.account-history-page-button {
  appearance: none;
  background: #ffffff;
  border: 1px solid rgba(92, 86, 79, 0.18);
  border-radius: 8px;
  color: #3d342b;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  min-height: 2rem;
  padding: 0.5rem 0.75rem;
}

.account-history-page-button:disabled {
  color: rgba(92, 86, 79, 0.45);
  cursor: not-allowed;
}

.account-history-page-summary {
  color: var(--color-ink-soft);
  font-size: 0.84rem;
  font-weight: 750;
  min-width: 7.5rem;
  text-align: center;
}

@media (max-width: 860px) {
  .account-password-grid,
  .account-mfa-setup {
    grid-template-columns: 1fr;
  }

  .account-mfa-open-link {
    justify-self: start;
  }

  .account-history-item {
    grid-template-columns: 1fr;
  }

  .account-history-type {
    justify-self: start;
  }

  .account-history-footer {
    justify-content: space-between;
  }

  .account-history-page-summary {
    min-width: auto;
  }

  .account-consent-control {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .account-consent-switch {
    justify-self: start;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  background:
    radial-gradient(circle at 95% 0%, rgba(192, 120, 88, 0.16), transparent 28rem),
    linear-gradient(130deg, #fbf7ef 0%, #f7efe3 52%, #fdfbf6 100%);
}

.sidebar {
  align-items: center;
  align-self: stretch;
  background: #f4efe7;
  border-right: 1px solid var(--color-line);
  display: flex;
  flex: 0 0 128px;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
  padding: 12px 10px 20px;
  position: sticky;
  top: 0;
}

.rail-logo {
  align-items: center;
  display: inline-flex;
  height: 58px;
  justify-content: center;
  width: 100%;
}

.rail-logo.node-health-wordmark {
  gap: 5px;
}

.rail-logo.node-health-wordmark .wordmark-node {
  font-size: 17px;
}

.rail-logo.node-health-wordmark .wordmark-health {
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-top: 2px;
}

.brand-logo-image {
  display: block;
  height: auto;
  max-height: 42px;
  max-width: 180px;
  object-fit: contain;
  width: auto;
}

.rail-nav {
  align-items: center;
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 100%;
}

.rail-item {
  align-items: center;
  border: 1px solid transparent;
  color: #6b716f;
  display: grid;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  justify-items: center;
  line-height: 1.1;
  min-height: 68px;
  padding: 10px 8px;
  text-align: center;
  width: 100%;
  max-width: 108px;
}

.rail-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-item:hover,
.rail-item-active,
.rail-item.is-active {
  background: var(--color-panel);
  border-color: var(--color-line);
  color: var(--color-clay);
}

.rail-icon {
  align-items: center;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.rail-icon svg {
  display: block;
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 28px;
}

.sidebar[data-nav-mode="admin"] {
  gap: 10px;
  overflow: hidden;
}

.sidebar[data-nav-mode="admin"] .rail-logo {
  height: 46px;
}

.sidebar[data-nav-mode="admin"] .rail-nav {
  align-content: start;
  gap: 5px;
  justify-items: stretch;
  overflow-y: auto;
  padding: 0 2px 8px;
  scrollbar-width: none;
}

.sidebar[data-nav-mode="admin"] .rail-nav::-webkit-scrollbar {
  display: none;
}

.sidebar[data-nav-mode="admin"] .rail-item {
  font-size: 10px;
  gap: 4px;
  letter-spacing: 0.08em;
  min-height: 50px;
  padding: 6px 5px;
}

.sidebar[data-nav-mode="admin"] .rail-label {
  line-height: 1.15;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.sidebar[data-nav-mode="admin"] .rail-icon,
.sidebar[data-nav-mode="admin"] .rail-icon svg {
  height: 22px;
  width: 22px;
}

.wordmark {
  align-items: center;
  color: var(--color-ink-soft);
  display: inline-flex;
  gap: 12px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.wordmark-text {
  font-size: 24px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--color-ink-soft);
  display: flex;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.nav-item:hover,
.nav-item-active {
  background: rgba(255, 253, 248, 0.82);
  border-color: rgba(97, 104, 103, 0.1);
  color: var(--color-ink);
  transform: translateX(2px);
}

.nav-icon {
  align-items: center;
  background: rgba(192, 120, 88, 0.1);
  border-radius: 12px;
  color: var(--color-clay-dark);
  display: inline-flex;
  flex: 0 0 34px;
  font-family: var(--font-mono);
  font-size: 12px;
  height: 34px;
  justify-content: center;
}

.sidebar-footer {
  display: grid;
  gap: 18px;
  margin-top: auto;
}

.member-pill {
  align-items: center;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.avatar {
  align-items: center;
  background: var(--color-clay);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 42px;
  font-family: var(--font-display);
  font-size: 24px;
  height: 42px;
  justify-content: center;
}

.eyebrow {
  color: var(--color-clay-dark);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.footer-actions {
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 10px 14px;
}

.page {
  flex: 1;
  min-width: 0;
}

.desktop-profile-link {
  position: fixed;
  right: clamp(18px, 3vw, 34px);
  top: 22px;
  z-index: 20;
}

.mobile-header,
.mobile-nav {
  display: none;
}

body:not(.is-admin) a[href="/admin"],
body:not(.is-admin) a[href^="/admin/"] {
  display: none !important;
}

.dashboard {
  margin: 0 auto;
  max-width: var(--user-page-max-width);
  padding: 42px 42px 0;
}

.dashboard-intro {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 18px;
}

.dashboard-intro h1 {
  display: grid;
  gap: 2px;
}

.dashboard-greeting-prefix,
.dashboard-greeting-name {
  display: block;
}

.dashboard-greeting-prefix {
  color: var(--color-ink);
}

.dashboard-greeting-name {
  color: var(--status-out-of-range);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
}

.dashboard-intro h1 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
}

.dashboard-intro-actions {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.home-layout-toggle,
.home-layout-reset {
  align-items: center;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  min-height: 38px;
  padding: 0 16px;
  cursor: pointer;
}

.home-layout-toggle:hover,
.home-layout-toggle:focus-visible,
.home-layout-reset:hover,
.home-layout-reset:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.home-layout-editor {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  margin-top: 18px;
  padding: 20px;
}

.home-layout-editor-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.home-layout-editor-header h2 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.home-layout-list {
  display: grid;
  gap: 8px;
}

.home-layout-group-label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  margin: 10px 0 0;
  text-transform: uppercase;
}

.home-layout-row {
  align-items: center;
  background: var(--color-card-white);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 52px;
  padding: 6px 8px;
}

.home-layout-row.is-hidden {
  background: rgba(235, 231, 224, 0.68);
  color: var(--color-muted);
}

.home-layout-drag-handle,
.home-layout-row-actions button {
  align-items: center;
  background: rgba(25, 26, 29, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font: inherit;
  font-family: var(--font-mono);
  height: 34px;
  justify-content: center;
  min-width: 34px;
  cursor: pointer;
}

.home-layout-row-actions {
  display: inline-flex;
  gap: 5px;
}

.home-layout-drag-handle {
  cursor: grab;
}

.home-layout-row-actions button:disabled {
  cursor: default;
  opacity: 0.34;
}

.home-layout-row-label {
  font-weight: 700;
}

.home-layout-status {
  color: var(--color-muted);
  font-size: 0.86rem;
  min-height: 1.2em;
  margin: 12px 0 0;
}

@media (max-width: 720px) {
  .dashboard-intro {
    grid-template-columns: 1fr;
  }

  .dashboard-intro-actions {
    justify-content: flex-start;
    padding-top: 0;
  }

  .home-layout-editor {
    padding: 16px;
  }

  .home-layout-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .home-layout-row-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

.page-report-picker {
  color: var(--color-ink-soft);
  display: grid;
  flex: 0 0 min(280px, 100%);
  font-size: 11px;
  font-weight: 800;
  gap: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-report-picker span {
  display: block;
}

.page-report-picker select {
  appearance: none;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid rgba(213, 204, 192, 0.96);
  border-radius: 16px;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: normal;
  min-height: 50px;
  padding: 0 16px;
  text-transform: none;
}

.page-report-picker option {
  color: var(--color-ink);
}

.page-report-picker-dark {
  color: rgba(255, 253, 248, 0.72);
}

.page-report-picker-dark select {
  background: rgba(255, 253, 248, 0.1);
  border-color: rgba(255, 253, 248, 0.24);
  color: #fffdf8;
}

.page-report-picker-dark option {
  color: var(--color-ink);
}

.page-report-picker-inline {
  align-items: start;
  color: var(--color-muted);
  gap: 6px;
  letter-spacing: 0.08em;
}

.page-report-picker-inline select {
  background: rgba(255, 253, 248, 0.82);
  border-color: rgba(213, 204, 192, 0.96);
  border-radius: 12px;
  font-size: 13px;
  min-height: 42px;
  padding: 0 12px;
}

.followup-section {
  margin-bottom: 50px;
}

.followup-section h2 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.followup-card {
  align-items: center;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(213, 204, 192, 0.96);
  border-radius: 20px;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 96px;
  padding: 18px 20px;
}

.followup-icon {
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink-soft);
  display: inline-flex;
  height: 58px;
  justify-content: center;
  width: 58px;
}

.followup-icon svg {
  fill: none;
  height: 30px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 30px;
}

.followup-copy {
  display: grid;
  gap: 5px;
}

.followup-copy strong {
  color: var(--color-ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.followup-copy span {
  color: var(--color-ink-soft);
  font-size: 17px;
}

.followup-button {
  align-items: center;
  background: var(--color-ink);
  border-radius: 10px;
  color: #fffdf8;
  display: inline-flex;
  font-size: 17px;
  font-weight: 800;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
}

.hero-card {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(37, 40, 39, 0.94), rgba(69, 75, 68, 0.9)),
    radial-gradient(circle at 78% 16%, rgba(192, 120, 88, 0.44), transparent 18rem);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: #fffdf8;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  position: relative;
}

.hero-card::after {
  background:
    linear-gradient(90deg, rgba(255, 253, 248, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 253, 248, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  pointer-events: none;
  position: absolute;
}

.hero-copy,
.hero-actions {
  position: relative;
  z-index: 1;
}

.hero-card .eyebrow {
  color: #e5b59e;
}

.hero-card h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.2vw, 104px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.94;
  margin: 0;
  max-width: 820px;
}

.hero-text {
  color: rgba(255, 253, 248, 0.76);
  font-size: 18px;
  line-height: 1.6;
  margin: 22px 0 0;
  max-width: 640px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.button {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: #fffdf8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  color: var(--color-ink);
}

.button-secondary {
  background: rgba(255, 253, 248, 0.1);
  border: 1px solid rgba(255, 253, 248, 0.22);
  color: #fffdf8;
}

.dashboard-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.98fr);
  margin-top: 18px;
}

[data-home-layout-root] > [data-home-layout-visible="false"] {
  display: none !important;
}

.panel,
.story-card {
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.08);
  padding: 28px;
}

.panel-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.panel h2,
.story-card h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
}

.date-chip {
  background: var(--color-sand);
  border-radius: 999px;
  color: var(--color-clay-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 12px;
  white-space: nowrap;
}

.biomarker-chart {
  align-items: end;
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 315px;
  margin-top: 40px;
  padding: 0;
}

.chart-column {
  --chart-height: 34%;
  align-items: center;
  align-self: end;
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: end;
  min-width: 0;
}

.chart-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 54px);
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.chart-label {
  color: var(--color-ink);
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin: 6px 0 8px;
}

.chart-bar {
  background: currentColor;
  border-radius: 5px 5px 0 0;
  display: block;
  height: var(--chart-height);
  min-height: 28px;
  transition: height 220ms ease;
  width: 100%;
}

.biomarker-panel {
  min-height: 455px;
  padding: 24px 20px 0;
}

.biomarker-reading-meta {
  align-items: start;
}

.biomarker-reading-meta dd[data-biomarker-target-summary],
.biomarker-reading-meta dd[data-biomarker-actual-target-summary] {
  min-height: 1.2em;
}

.biomarker-range-empty {
  color: var(--color-muted);
  font-style: italic;
}

.biomarker-panel h2 {
  font-family: var(--font-body);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.dashboard-add-report-link {
  align-items: center;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  width: 38px;
}

.dashboard-add-report-link:hover,
.dashboard-add-report-link:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-1px);
}

.dashboard-add-report-link:focus-visible {
  outline: 3px solid rgba(197, 113, 71, 0.18);
  outline-offset: 3px;
}

.dashboard-add-report-link svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

.chart-column-good {
  color: var(--status-in-range);
}

.chart-column-alert {
  color: var(--status-out-of-range);
}

.chart-column-target {
  color: #752a3a;
}

.chart-column-muted {
  color: var(--status-other);
}

.chart-footer-link {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.chart-footer-link::after {
  color: var(--color-clay);
  content: " >";
  font-family: var(--font-mono);
}

.chart-footer {
  align-items: flex-end;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  display: flex;
  font-size: 14px;
  gap: 18px;
  justify-content: space-between;
  margin: 0 -20px;
  min-height: 56px;
  padding: 0 20px;
}

.chart-footer-main {
  display: grid;
  gap: 8px;
  justify-items: start;
  min-width: 0;
}

.insight-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 161, 130, 0.18), transparent 13rem),
    linear-gradient(145deg, rgba(255, 253, 248, 0.94), rgba(239, 228, 213, 0.9));
  display: grid;
  gap: 18px;
}

.insight-panel h2 {
  font-size: clamp(26px, 2.4vw, 38px);
}

.insight-score {
  align-items: baseline;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  color: var(--color-ink);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 86px;
  padding: 10px 13px;
}

.insight-score strong {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 450;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.insight-score span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
}

.insight-meter {
  background: rgba(25, 26, 29, 0.1);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.insight-meter span {
  background: linear-gradient(90deg, #8c7867, #66a182, #e6b84a);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 260ms ease;
  width: 0%;
}

.insight-meter-label {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-top: -10px;
}

.insight-sources {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.insight-source {
  align-items: center;
  background: rgba(255, 253, 248, 0.62);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  min-height: 34px;
  min-width: 0;
  padding: 7px 10px;
}

.insight-source span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-source-dot {
  background: var(--status-other);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.insight-source[data-status="complete"] .insight-source-dot {
  background: #66a182;
}

.insight-source[data-status="partial"] .insight-source-dot {
  background: #e6b84a;
}

.insight-source[data-status="missing"] .insight-source-dot,
.insight-source[data-status="unavailable"] .insight-source-dot {
  background: #8c7867;
}

.health-insights-panel {
  display: grid;
  gap: 14px;
}

.health-insights-copy {
  color: var(--color-muted);
  font-size: 14px;
  margin: 0;
}

.health-insights-list {
  display: grid;
  gap: 10px;
}

.health-insight-item {
  background: rgba(255, 253, 248, 0.68);
  border: 1px solid var(--color-line);
  border-left: 4px solid #8a8f98;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.health-insight-item[data-priority="high"] {
  border-left-color: #d45d4c;
}

.health-insight-item[data-priority="medium"] {
  border-left-color: #d98a45;
}

.health-insight-item[data-priority="low"] {
  border-left-color: #66a182;
}

.health-insight-item-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.health-insight-item-header strong {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.2;
}

.health-insight-item-header span {
  color: var(--color-muted);
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}

.health-insight-item p {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.health-insight-evidence {
  display: grid;
  gap: 5px 10px;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  margin: 0;
}

.health-insight-evidence dt,
.health-insight-evidence dd {
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.health-insight-evidence dt {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-weight: 700;
}

.health-insight-evidence dd {
  color: var(--color-ink);
}

.health-insight-action {
  justify-self: start;
}

.admin-insight-rules-workbench {
  align-items: start;
}

.admin-insight-rules-list {
  display: grid;
  gap: 10px;
}

.admin-insight-rule-card {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--color-line);
  border-left: 4px solid #8a8f98;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 13px;
  text-align: left;
  width: 100%;
}

.admin-insight-rule-card:hover,
.admin-insight-rule-card:focus-visible {
  border-color: rgba(25, 26, 29, 0.22);
  box-shadow: 0 14px 26px rgba(25, 26, 29, 0.08);
  outline: none;
}

.admin-insight-rule-card[data-status="active"] {
  border-left-color: #66a182;
}

.admin-insight-rule-card[data-status="draft"] {
  border-left-color: #d98a45;
}

.admin-insight-rule-card[data-status="retired"] {
  border-left-color: #8a8f98;
}

.admin-insight-rule-card-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.admin-insight-rule-card-header strong {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.2;
}

.admin-insight-rule-card-header span,
.admin-insight-rule-card-meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-insight-rule-card-summary {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
}

.admin-insight-rule-form {
  display: grid;
  gap: 14px;
}

.admin-insight-rule-form textarea[name="condition"] {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
}

.insight-readiness-dashboard {
  display: grid;
  gap: 22px;
}

.insight-readiness-hero {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.insight-detail-score-card {
  align-items: baseline;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: inline-flex;
  gap: 4px;
  min-width: 132px;
  padding: 18px 20px;
}

.insight-detail-score-card strong {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 86px);
  font-weight: 420;
  letter-spacing: 0;
  line-height: 0.88;
}

.insight-detail-score-card span {
  color: var(--color-muted);
  font-size: 16px;
  font-weight: 850;
}

.insight-detail-summary-panel,
.insight-detail-panel {
  display: grid;
  gap: 18px;
}

.insight-detail-summary-panel h2,
.insight-detail-panel h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.insight-detail-summary-panel p {
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 760px;
}

.insight-detail-meter {
  margin-top: 4px;
}

.insight-detail-layout {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
}

.insight-detail-source-grid,
.insight-next-actions {
  display: grid;
  gap: 12px;
}

.insight-detail-source-card,
.insight-next-action,
.insight-empty {
  background: rgba(255, 253, 248, 0.66);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: inherit;
  padding: 16px;
}

.insight-detail-source-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.insight-detail-source-header h3 {
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 7px;
}

.insight-detail-source-header strong {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

.insight-detail-status-chip {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.insight-detail-source-card[data-status="complete"] .insight-detail-status-chip {
  background: rgba(102, 161, 130, 0.14);
  border-color: rgba(102, 161, 130, 0.34);
  color: #47765e;
}

.insight-detail-source-card[data-status="partial"] .insight-detail-status-chip {
  background: rgba(230, 184, 74, 0.14);
  border-color: rgba(230, 184, 74, 0.34);
  color: #80651d;
}

.insight-detail-source-card p,
.insight-detail-source-card small,
.insight-empty {
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

.insight-detail-source-card small {
  display: block;
  margin-top: 8px;
}

.insight-next-action {
  display: grid;
  gap: 6px;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.insight-next-action:hover,
.insight-next-action:focus-visible {
  background: #fffdf8;
  transform: translateY(-1px);
}

.insight-next-action strong {
  color: var(--color-ink);
  font-size: 16px;
}

.insight-next-action span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.track-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--status-in-range-rgb), 0.18), transparent 14rem),
    rgba(255, 253, 248, 0.88);
  color: inherit;
  display: grid;
  gap: 22px;
}

.track-panel h2 {
  font-size: clamp(26px, 2.6vw, 38px);
}

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

.track-change-stat {
  align-items: center;
  background: #f8f1e7;
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 20px;
  color: inherit;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 16px;
  text-align: center;
  transition: background 160ms ease, transform 160ms ease;
}

.track-change-stat:hover {
  background: #fffdf8;
  transform: translateY(-1px);
}

.track-change-stat strong {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.track-change-stat span {
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.track-change-improved strong {
  color: var(--status-in-range);
}

.track-change-worsened strong {
  color: var(--status-out-of-range);
}

.track-change-stable strong {
  color: var(--status-other);
}

.track-panel-acknowledgement {
  margin: -4px 0 0;
  padding: 12px 14px;
  color: var(--color-ink);
  background: rgba(var(--status-in-range-rgb), 0.09);
  border: 1px solid rgba(var(--status-in-range-rgb), 0.22);
  border-left: 3px solid var(--status-in-range);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.track-panel-acknowledgement[hidden] {
  display: none;
}

.track-panel-acknowledgement.is-mixed {
  background: rgba(192, 147, 96, 0.11);
  border-color: rgba(192, 147, 96, 0.28);
  border-left-color: #a97843;
}

.home-mood-panel {
  --home-mood-color: var(--color-clay);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--home-mood-color) 20%, transparent), transparent 13rem),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--home-mood-color) 13%, transparent), transparent 13rem),
    rgba(255, 253, 248, 0.88);
  color: inherit;
  display: grid;
  gap: 20px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-mood-panel:hover,
.home-mood-panel:focus-visible {
  border-color: color-mix(in srgb, var(--home-mood-color) 40%, var(--color-line) 60%);
  box-shadow: 0 22px 58px rgba(67, 57, 45, 0.12);
  transform: translateY(-1px);
}

.home-mood-panel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--home-mood-color) 38%, transparent);
  outline-offset: 3px;
}

.home-mood-panel[data-mood-state="locked"] {
  --home-mood-color: var(--color-clay);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.94), rgba(245, 238, 226, 0.86)),
    rgba(255, 253, 248, 0.88);
}

.home-mood-panel h2 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.home-mood-summary {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
}

.home-mood-summary strong {
  align-items: center;
  background: color-mix(in srgb, var(--home-mood-color) 18%, #fffdf8 82%);
  border: 1px solid color-mix(in srgb, var(--home-mood-color) 48%, var(--color-line) 52%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--home-mood-color) 66%, var(--color-ink) 34%);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 400;
  height: 82px;
  justify-content: center;
  letter-spacing: -0.055em;
  line-height: 1;
  width: 82px;
}

.home-mood-panel[data-mood-state="locked"] .home-mood-summary strong {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 820;
  letter-spacing: 0;
}

.home-mood-summary p {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.home-mood-summary span {
  color: var(--color-muted);
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

.home-mood-summary .home-mood-dominant {
  align-items: center;
  background: color-mix(in srgb, var(--home-mood-color) 18%, #ffffff 82%);
  border: 1px solid color-mix(in srgb, var(--home-mood-color) 46%, var(--color-line) 54%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--home-mood-color) 58%, var(--color-ink) 42%);
  display: inline-flex;
  font-size: 13px;
  font-weight: 820;
  gap: 8px;
  line-height: 1.2;
  margin-top: 10px;
  padding: 7px 10px;
  width: fit-content;
}

.home-mood-summary .home-mood-dominant::before {
  background: var(--home-mood-color);
  border-radius: 999px;
  content: "";
  height: 9px;
  width: 9px;
}

.home-mood-summary .home-mood-dominant[hidden] {
  display: none;
}

.home-health-snapshot-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 105, 117, 0.2), transparent 13rem),
    radial-gradient(circle at 0% 100%, rgba(140, 120, 103, 0.16), transparent 12rem),
    rgba(255, 253, 248, 0.88);
  color: inherit;
  display: grid;
  gap: 20px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-health-snapshot-panel:hover,
.home-health-snapshot-panel:focus-visible {
  border-color: rgba(96, 105, 117, 0.36);
  box-shadow: 0 22px 58px rgba(67, 57, 45, 0.12);
  transform: translateY(-1px);
}

.home-health-snapshot-panel:focus-visible {
  outline: 3px solid rgba(96, 105, 117, 0.2);
  outline-offset: 3px;
}

.home-health-snapshot-panel h2 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.home-health-snapshot-summary {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
}

.home-health-snapshot-icon {
  align-items: center;
  background: rgba(96, 105, 117, 0.13);
  border: 1px solid rgba(96, 105, 117, 0.26);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  height: 82px;
  justify-content: center;
  width: 82px;
}

.home-health-snapshot-icon svg {
  fill: none;
  height: 34px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 34px;
}

.home-health-snapshot-summary p {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.home-health-snapshot-summary span {
  color: var(--color-muted);
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

.home-wearables-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(88, 167, 180, 0.2), transparent 13rem),
    radial-gradient(circle at 0% 100%, rgba(102, 161, 130, 0.16), transparent 12rem),
    rgba(255, 253, 248, 0.88);
  color: inherit;
  display: grid;
  gap: 20px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-wearables-panel:hover,
.home-wearables-panel:focus-visible {
  border-color: rgba(88, 167, 180, 0.38);
  box-shadow: 0 22px 58px rgba(67, 57, 45, 0.12);
  transform: translateY(-1px);
}

.home-wearables-panel:focus-visible {
  outline: 3px solid rgba(88, 167, 180, 0.2);
  outline-offset: 3px;
}

.home-wearables-panel h2 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.home-wearables-summary {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(0, 1fr);
}

.home-wearables-icon {
  align-items: center;
  background: rgba(88, 167, 180, 0.13);
  border: 1px solid rgba(88, 167, 180, 0.28);
  border-radius: 999px;
  color: #3f7580;
  display: inline-flex;
  height: 82px;
  justify-content: center;
  width: 82px;
}

.home-wearables-icon svg {
  fill: none;
  height: 34px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 34px;
}

.home-wearables-summary p {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.35;
  margin: 0;
}

.home-wearables-summary span {
  color: var(--color-muted);
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

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

.home-wearables-stat {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  min-width: 0;
  padding: 11px 12px 10px;
}

.home-wearables-stat span {
  color: var(--color-muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-wearables-stat strong {
  color: var(--color-ink);
  display: block;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
  margin-top: 5px;
  min-width: 0;
}

.insight-panel p,
.story-card p,
.muted {
  color: var(--color-muted);
  line-height: 1.65;
}

.status-dot {
  background: var(--color-clay);
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(192, 120, 88, 0.14);
  display: inline-block;
  height: 10px;
  margin-top: 12px;
  width: 10px;
}

.text-link {
  color: var(--color-clay-dark);
  display: inline-block;
  font-weight: 700;
  margin-top: 16px;
}

.section-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.section-actions .text-link,
.report-pdf-link {
  margin-top: 0;
}

.report-pdf-link[hidden] {
  display: none;
}

.quick-panel {
  min-height: 230px;
}

.age-panel,
.age-panel.panel {
  background:
    radial-gradient(circle at 2% 96%, rgba(var(--status-in-range-rgb), 0.42), transparent 15rem),
    linear-gradient(145deg, #6d7982 0%, #747f86 46%, #86a989 100%);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: #fffdf8;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 455px;
  padding: 44px 38px 38px;
}

.age-card-topline {
  align-items: center;
  color: rgba(255, 253, 248, 0.86);
  display: flex;
  font-size: 15px;
  justify-content: space-between;
}

.age-brand {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.age-brand-mark {
  background:
    repeating-linear-gradient(28deg, transparent 0 4px, rgba(255, 253, 248, 0.78) 4px 8px),
    #fffdf8;
  border-radius: 999px;
  display: inline-block;
  height: 27px;
  width: 27px;
}

.age-result-card {
  align-self: center;
  align-items: center;
  background: var(--color-paper);
  border-radius: 16px;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  justify-self: center;
  max-width: 354px;
  min-height: 330px;
  padding: 56px 44px 26px;
  text-align: center;
  width: 100%;
}

.age-value {
  color: var(--status-in-range);
  font-family: var(--font-body);
  font-size: clamp(86px, 8vw, 118px);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.78;
}

.age-title {
  color: #6a956f;
  display: block;
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-top: 10px;
}

.age-rule {
  background: var(--color-line);
  display: block;
  height: 1px;
  margin: 44px 0 30px;
  width: 100%;
}

.age-delta {
  color: #6d886c;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.7vw, 34px);
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin: 0;
}

.age-tested {
  color: var(--color-muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: auto;
  padding-top: 28px;
}

.quick-links {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.quick-links a {
  align-items: center;
  background: #f8f1e7;
  border-radius: 16px;
  display: flex;
  font-weight: 600;
  justify-content: space-between;
  padding: 16px 18px;
}

.quick-links a::after {
  color: var(--color-clay);
  content: ">";
  font-family: var(--font-mono);
}

.story-section {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
  margin-top: 18px;
}

.categories-section {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  margin-top: 18px;
  padding: 28px;
}

.dashboard-grid > .categories-section {
  grid-column: 1 / -1;
  margin-top: 0;
}

.section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
}

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

.category-placeholder {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  grid-column: 1 / -1;
  line-height: 1.6;
  margin: 0;
  padding: 18px 4px 0;
}

.raw-results-notice {
  background: rgba(192, 120, 88, 0.08);
  border: 1px solid rgba(192, 120, 88, 0.18);
  border-radius: 18px;
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  padding: 14px 16px;
}

.category-item {
  align-items: center;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 70px;
  padding: 12px 4px;
}

.category-item:nth-child(odd) {
  padding-right: 24px;
}

.category-item:nth-child(even) {
  border-left: 1px solid var(--color-line);
  padding-left: 24px;
}

.all-categories-list {
  display: grid;
}

.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 18px;
}

.category-filter {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 11px 14px;
}

.category-filter:hover,
.category-filter.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-panel);
}

.all-category-row {
  align-items: start;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  padding: 18px 4px;
}

.single-category-row {
  border-top: 0;
  padding-top: 4px;
}

.all-category-title {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  position: sticky;
  top: 18px;
}

.all-category-biomarkers {
  display: grid;
  gap: 0;
}

.all-category-biomarker {
  align-items: stretch;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  display: grid;
  gap: 14px;
  grid-template-columns: 7px minmax(0, 1fr);
  min-height: 86px;
  padding: 10px 0;
}

.all-category-biomarker:hover {
  background: #fffdf8;
}

.all-category-biomarker-status {
  background: var(--status-other);
  border-radius: 999px;
  display: block;
  width: 7px;
}

.all-category-biomarker.is-in-range .all-category-biomarker-status {
  background: var(--status-in-range);
}

.all-category-biomarker.is-out-of-range .all-category-biomarker-status {
  background: var(--status-out-of-range);
}

.all-category-biomarker.is-out-of-target .all-category-biomarker-status {
  background: #752a3a;
}

.all-category-biomarker-copy {
  align-self: center;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-right: 4px;
}

.all-category-biomarker-name {
  color: var(--color-ink-soft);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.all-category-biomarker-value {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.all-category-biomarker-label {
  color: var(--status-other);
}

.all-category-biomarker.is-in-range .all-category-biomarker-label {
  color: var(--status-in-range);
}

.all-category-biomarker.is-out-of-range .all-category-biomarker-label {
  color: var(--status-out-of-range);
}

.all-category-biomarker.is-out-of-target .all-category-biomarker-label {
  color: #752a3a;
}

.all-category-empty {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 0;
}

.category-icon {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 12px;
  height: 28px;
  justify-content: center;
  letter-spacing: -0.04em;
  width: 28px;
}

.category-copy {
  display: grid;
  gap: 7px;
}

.category-copy strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
}

.all-category-title .category-copy strong {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.category-breakdown {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 10px;
}

.category-breakdown i {
  border-radius: 999px;
  display: block;
  height: 8px;
  width: var(--status-width, 10px);
}

.category-breakdown b {
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-right: 5px;
}

.status-green {
  background: var(--status-in-range);
}

.status-brown {
  background: var(--status-out-of-range);
}

.status-target {
  background: #752a3a;
}

.status-gray {
  background: var(--status-other);
}

.unmapped-results-section {
  padding-top: 8px;
}

.unmapped-results-copy {
  color: var(--color-muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.unmapped-results-list {
  display: grid;
  gap: 0;
}

.unmapped-result-row {
  align-items: stretch;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 14px;
  grid-template-columns: 7px minmax(0, 1fr);
  min-height: 96px;
  padding: 14px 4px;
}

.unmapped-result-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.unmapped-result-header {
  display: grid;
  gap: 6px;
}

.unmapped-result-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.unmapped-result-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.unmapped-result-raw {
  background: #f6f1e8;
  border-radius: 14px;
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  white-space: pre-wrap;
}

.story-card-dark {
  background: var(--color-ink);
  color: #fffdf8;
}

.story-card-dark .eyebrow {
  color: #e5b59e;
}

.story-card-dark p {
  color: rgba(255, 253, 248, 0.76);
}

.health-snapshot-dashboard {
  max-width: var(--user-page-max-width);
}

.health-snapshot-hero {
  margin-bottom: 18px;
}

.health-snapshot-actions {
  align-items: end;
}

.health-snapshot-status {
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 18px;
  color: var(--color-muted);
  font-weight: 700;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.health-snapshot-status[hidden] {
  display: none;
}

.health-snapshot-status[data-tone="error"] {
  color: #9a2f2f;
}

.health-weekly-panel {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.health-weekly-panel h2 {
  font-family: var(--font-body);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.health-weekly-summary {
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 860px;
}

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

.health-weekly-grid h3 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 10px;
}

.health-weekly-list-item p {
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.55;
}

.health-weekly-email {
  background: rgba(248, 246, 241, 0.76);
  border: 1px dashed var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.health-weekly-email[hidden] {
  display: none;
}

.health-weekly-email strong {
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.25;
}

.health-snapshot-summary-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.health-snapshot-card {
  display: grid;
  gap: 14px;
  min-height: 220px;
}

.health-snapshot-card h2,
.health-snapshot-panel h2 {
  font-family: var(--font-body);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.health-snapshot-card p,
.health-snapshot-panel p {
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

.health-snapshot-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.health-snapshot-facts div {
  display: contents;
}

.health-snapshot-facts dt {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-transform: uppercase;
}

.health-snapshot-facts dd {
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.4;
  margin: -4px 0 4px;
  overflow-wrap: anywhere;
}

.health-snapshot-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
}

.health-snapshot-main,
.health-snapshot-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.health-snapshot-panel {
  display: grid;
  gap: 18px;
}

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

.health-snapshot-source-item {
  background: rgba(248, 246, 241, 0.82);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.health-snapshot-source-item[data-status="ready"] {
  background: rgba(96, 105, 117, 0.09);
  border-color: rgba(96, 105, 117, 0.24);
}

.health-snapshot-source-item[data-status="needs-source"] {
  background: rgba(140, 120, 103, 0.09);
  border-color: rgba(140, 120, 103, 0.24);
}

.health-snapshot-source-item[data-status="missing"] {
  background: rgba(183, 188, 194, 0.1);
}

.health-snapshot-source-item > div,
.health-snapshot-note-header {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.health-snapshot-source-item strong {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.25;
}

.health-snapshot-source-item p {
  font-size: 13px;
}

.health-snapshot-chip {
  align-items: center;
  background: rgba(255, 253, 248, 0.8);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  padding: 6px 9px;
}

.health-snapshot-chip[data-tone="ready"] {
  background: rgba(96, 105, 117, 0.12);
  border-color: rgba(96, 105, 117, 0.28);
  color: var(--status-in-range);
}

.health-snapshot-chip[data-tone="needs-source"] {
  background: rgba(140, 120, 103, 0.12);
  border-color: rgba(140, 120, 103, 0.3);
  color: var(--status-out-of-range);
}

.health-snapshot-chip[data-tone="missing"],
.health-snapshot-chip[data-tone="confidential"] {
  background: rgba(183, 188, 194, 0.16);
}

.health-snapshot-note-list,
.health-snapshot-list {
  display: grid;
  gap: 12px;
}

.health-snapshot-note-card,
.health-snapshot-list-item {
  background: rgba(248, 246, 241, 0.76);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  padding: 16px;
}

.health-snapshot-note-card h3 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.health-snapshot-note-card .notes-markdown {
  display: grid;
  gap: 10px;
}

.health-snapshot-note-card .notes-markdown p {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.65;
}

.health-snapshot-list-item > a,
.health-snapshot-list-item > strong {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.health-snapshot-list-item > a:hover {
  color: var(--color-clay-dark);
}

.health-snapshot-list-item .health-snapshot-chip {
  justify-self: start;
}

.health-snapshot-empty {
  background: rgba(248, 246, 241, 0.76);
  border: 1px dashed var(--color-line);
  border-radius: 16px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 14px;
}

.digital-consultant-dashboard {
  max-width: var(--user-page-max-width);
}

.digital-consultant-hero {
  margin-bottom: 18px;
}

.digital-consultant-hero-actions {
  align-items: end;
}

.digital-consultant-status {
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 18px;
  color: var(--color-muted);
  font-weight: 800;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.digital-consultant-status[hidden] {
  display: none;
}

.digital-consultant-status[data-tone="error"] {
  color: #9a2f2f;
}

.digital-consultant-status[data-tone="success"] {
  color: var(--status-in-range);
}

.digital-consultant-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
}

.digital-consultant-chat-panel,
.digital-consultant-goals-panel,
.digital-consultant-memory-panel,
.digital-consultant-context-panel {
  display: grid;
  gap: 18px;
  align-content: start;
}

.digital-consultant-chat-panel h2,
.digital-consultant-goals-panel h2,
.digital-consultant-memory-panel h2,
.digital-consultant-context-panel h2 {
  font-family: var(--font-body);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.digital-consultant-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.digital-consultant-ai-pill {
  background: rgba(96, 105, 117, 0.12);
  border: 1px solid rgba(96, 105, 117, 0.24);
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 9px 11px;
  white-space: nowrap;
}

.digital-consultant-ai-pill[data-enabled="true"] {
  color: var(--status-in-range);
}

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

.digital-consultant-starter {
  background: rgba(248, 246, 241, 0.8);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 14px;
  text-align: left;
}

.digital-consultant-starter:hover,
.digital-consultant-starter:focus-visible {
  border-color: rgba(197, 113, 71, 0.42);
  outline: none;
}

.digital-consultant-starter strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.digital-consultant-starter span {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.45;
}

.digital-consultant-chat-log {
  background: rgba(255, 253, 248, 0.52);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  max-height: 560px;
  min-height: 320px;
  overflow: auto;
  padding: 16px;
}

.digital-consultant-message {
  background: rgba(248, 246, 241, 0.86);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  max-width: 86%;
  padding: 14px;
}

.digital-consultant-message[data-role="user"] {
  background: rgba(96, 105, 117, 0.12);
  border-color: rgba(96, 105, 117, 0.22);
  justify-self: end;
}

.digital-consultant-message[data-safety="urgent"] {
  background: rgba(154, 47, 47, 0.08);
  border-color: rgba(154, 47, 47, 0.28);
}

.digital-consultant-message-label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.digital-consultant-message-body {
  display: grid;
  gap: 10px;
}

.digital-consultant-message-body p,
.digital-consultant-context-panel li,
.digital-consultant-goal-group p,
.digital-consultant-memory-panel li,
.digital-consultant-memory-summary,
.digital-consultant-memory-meta {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.58;
  margin: 0;
}

.digital-consultant-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.digital-consultant-replies button {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.digital-consultant-replies button:hover,
.digital-consultant-replies button:focus-visible {
  border-color: rgba(197, 113, 71, 0.42);
  outline: none;
}

.digital-consultant-composer,
.digital-consultant-goal-form {
  display: grid;
  gap: 12px;
}

.digital-consultant-composer label,
.digital-consultant-goal-form span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.digital-consultant-composer textarea,
.digital-consultant-goal-form input,
.digital-consultant-goal-form select {
  background: rgba(255, 253, 248, 0.86);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  line-height: 1.45;
  padding: 12px 13px;
  width: 100%;
}

.digital-consultant-composer-input {
  position: relative;
}

.digital-consultant-composer-input textarea {
  padding-right: 58px;
}

.digital-consultant-voice-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--color-ink);
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
}

.digital-consultant-voice-button svg {
  width: 20px;
  height: 20px;
}

.digital-consultant-voice-button:hover,
.digital-consultant-voice-button:focus-visible,
.digital-consultant-voice-button.is-listening {
  color: var(--color-panel);
  background: var(--color-ink);
  outline: none;
}

.digital-consultant-voice-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.digital-consultant-composer textarea:focus,
.digital-consultant-goal-form input:focus,
.digital-consultant-goal-form select:focus {
  border-color: rgba(197, 113, 71, 0.55);
  outline: none;
}

.digital-consultant-composer-actions {
  display: flex;
  justify-content: flex-end;
}

.digital-consultant-goals {
  display: grid;
  gap: 12px;
}

.digital-consultant-memory {
  display: grid;
  gap: 12px;
}

.digital-consultant-memory-summary {
  background: rgba(248, 246, 241, 0.76);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: 14px;
}

.digital-consultant-goal-group {
  background: rgba(248, 246, 241, 0.76);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.digital-consultant-goal-group h3 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.digital-consultant-memory-group {
  display: grid;
  gap: 8px;
}

.digital-consultant-memory-group h3 {
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.digital-consultant-memory-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.1rem;
}

.digital-consultant-memory-meta {
  color: var(--color-muted);
  font-size: 13px;
}

.digital-consultant-context-panel ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.1rem;
}

.digital-consultant-empty {
  background: rgba(248, 246, 241, 0.76);
  border: 1px dashed var(--color-line);
  border-radius: 16px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.5;
  margin: 0;
  padding: 14px;
}

.biological-age-dashboard {
  max-width: var(--user-page-max-width);
}

.biological-age-hero {
  margin-bottom: 18px;
}

.biological-age-overview {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
}

.biological-age-latest-card {
  background:
    radial-gradient(circle at 0% 100%, rgba(var(--status-in-range-rgb), 0.2), transparent 15rem),
    #fffdf8;
  display: grid;
  min-height: 300px;
}

.biological-age-latest-card strong {
  color: var(--status-in-range);
  font-family: var(--font-body);
  font-size: clamp(82px, 9vw, 132px);
  font-weight: 800;
  letter-spacing: -0.07em;
  line-height: 0.85;
  margin-top: 20px;
}

.biological-age-latest-card.is-older strong,
.biological-age-latest-card.is-older > span {
  color: var(--status-out-of-range);
}

.biological-age-latest-card > span {
  color: #6a956f;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.biological-age-latest-card p {
  color: #6d886c;
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1.35;
  margin: 34px 0 0;
}

.biological-age-context-card {
  background:
    linear-gradient(135deg, rgba(37, 40, 39, 0.94), rgba(86, 98, 86, 0.88)),
    radial-gradient(circle at 86% 16%, rgba(var(--status-in-range-rgb), 0.32), transparent 16rem);
  color: #fffdf8;
}

.biological-age-context-card .eyebrow {
  color: #d7b8a3;
}

.biological-age-context-card h2 {
  color: #fffdf8;
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
  max-width: 640px;
}

.biological-age-context-card p {
  color: rgba(255, 253, 248, 0.72);
  font-size: 16px;
  line-height: 1.7;
  margin: 24px 0 0;
  max-width: 620px;
}

.biological-age-chart-section {
  margin-top: 18px;
}

.biological-age-chart-heading {
  align-items: start;
  margin-bottom: 12px;
}

.biological-age-chart-controls {
  background: rgba(241, 234, 223, 0.7);
  border: 1px solid rgba(229, 222, 212, 0.95);
  border-radius: 999px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.biological-age-chart-controls button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 14px;
}

.biological-age-chart-controls button[aria-pressed="true"] {
  background: var(--color-ink);
  color: #fffdf8;
}

.biological-age-chart-range {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 18px;
}

.biological-age-chart {
  background:
    radial-gradient(circle at 0% 100%, rgba(var(--status-in-range-rgb), 0.18), transparent 14rem),
    linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(251, 247, 239, 0.72));
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 28px;
  overflow-x: auto;
  padding: 18px 18px 10px;
}

.biological-age-line-chart {
  display: block;
  height: auto;
  min-width: 560px;
  width: 100%;
}

.biological-age-chart-grid {
  stroke: rgba(121, 128, 128, 0.22);
  stroke-width: 1;
}

.biological-age-chart-axis {
  stroke: rgba(37, 40, 39, 0.2);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.biological-age-chart-reference {
  fill: none;
  opacity: 0.42;
  stroke: rgba(var(--status-other-rgb), 0.72);
  stroke-dasharray: 8 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.biological-age-chart-reference-label {
  fill: rgba(var(--status-other-rgb), 0.78);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
}

.biological-age-chart-line-segment {
  fill: none;
  stroke: var(--status-in-range);
  stroke-linecap: round;
  stroke-width: 5;
}

.biological-age-chart-line-segment.is-older {
  stroke: var(--status-out-of-range);
}

.biological-age-chart-point {
  fill: #fffdf8;
  stroke: var(--status-in-range);
  stroke-width: 5;
}

.biological-age-chart-point.is-older {
  stroke: var(--status-out-of-range);
}

.biological-age-chart-axis-label,
.biological-age-chart-date-label,
.biological-age-chart-point-label {
  fill: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
}

.biological-age-chart-point-label {
  fill: var(--status-in-range);
  font-size: 15px;
}

.biological-age-chart-point-label.is-older {
  fill: var(--status-out-of-range);
}

.biological-age-timeline-section {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  margin-top: 18px;
  padding: 28px;
}

.biological-age-timeline {
  display: grid;
  gap: 0;
}

.biological-age-timeline-item {
  display: grid;
  min-height: 0;
  position: relative;
}

.biological-age-timeline-item time {
  color: var(--color-ink-soft);
  font-size: 14px;
  font-weight: 800;
  padding-top: 6px;
}

.biological-age-timeline-marker {
  background: var(--status-in-range);
  border: 5px solid var(--color-paper);
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--color-line);
  display: block;
  height: 22px;
  position: relative;
  width: 22px;
  z-index: 1;
}

.biological-age-timeline-card-header {
  align-items: center;
  align-self: start;
  display: flex;
  gap: 10px;
  padding-right: 24px;
}

.biological-age-timeline-marker.is-older {
  background: var(--status-out-of-range);
}

.biological-age-timeline-card {
  background: #fffdf8;
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: 24px;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
  margin-bottom: 18px;
  padding: 22px 24px;
}

.biological-age-timeline-card-body {
  border-left: 1px solid var(--color-line);
  display: grid;
  gap: 8px;
  padding-left: 24px;
}

.biological-age-timeline-card strong {
  color: var(--status-in-range);
  font-family: var(--font-body);
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.biological-age-timeline-card.is-older strong,
.biological-age-timeline-card.is-older span {
  color: var(--status-out-of-range);
}

.biological-age-timeline-card span {
  color: #6a956f;
  font-size: 16px;
  font-weight: 800;
}

.biological-age-timeline-card p {
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  letter-spacing: -0.035em;
  line-height: 1.35;
  margin: 8px 0 0;
}

.biological-age-timeline-card small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.site-footer {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 42px auto 0;
  max-width: 1260px;
  padding: 0 42px 42px;
}

.site-footer-links {
  color: var(--color-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.auth-legal-links,
.auth-terms-note {
  border-top: 1px solid rgba(25, 26, 29, 0.10);
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: -0.75rem 0 0;
  padding-top: 1rem;
}

.auth-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

.auth-terms-note {
  margin-top: -0.75rem;
}

.auth-legal-links a,
.auth-terms-note a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}

.auth-legal-links a:hover,
.auth-terms-note a:hover {
  text-decoration: underline;
}

.legal-page {
  background: var(--color-paper);
  color: var(--color-ink);
  min-height: 100vh;
}

.legal-shell {
  margin: 0 auto;
  max-width: 980px;
  padding: clamp(24px, 5vw, 56px);
}

.legal-header {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: clamp(40px, 8vw, 76px);
}

.legal-wordmark {
  text-decoration: none;
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: flex-end;
}

.legal-nav a {
  color: var(--color-ink-soft);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
  text-decoration: none;
}

.legal-nav a[aria-current="page"],
.legal-nav a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.legal-document {
  display: grid;
  gap: 28px;
}

.legal-document > h1 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 76px);
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0;
  max-width: 11ch;
}

.legal-updated {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: -12px 0 8px;
}

.legal-partner-note {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: -10px 0 4px;
  padding: 14px 16px;
}

.legal-partner-note a {
  color: var(--color-ink);
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-section {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  padding-top: 24px;
}

.legal-section h2 {
  color: var(--color-ink);
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
}

.legal-section p,
.legal-section li {
  color: var(--color-ink-soft);
  font-size: 16px;
  line-height: 1.7;
}

.legal-section p,
.legal-section ul {
  margin: 0;
}

.legal-section ul {
  display: grid;
  gap: 8px;
  padding-left: 1.2rem;
}

.legal-section a {
  color: var(--color-ink);
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.disclaimer {
  max-width: 980px;
}

.category-detail-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
  margin-top: 18px;
}

.category-counts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.category-counts span {
  background: #f8f1e7;
  border-radius: 18px;
  color: var(--color-muted);
  display: grid;
  font-size: 13px;
  gap: 6px;
  padding: 16px;
}

.category-counts strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.category-note-panel p {
  color: var(--color-muted);
  line-height: 1.65;
}

.category-results-section {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  margin-top: 18px;
  padding: 28px;
}

.category-result-list {
  display: grid;
  gap: 0;
}

.category-result-row {
  align-items: center;
  border-top: 1px solid var(--color-hairline-soft);
  color: var(--color-ink);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 4px;
  text-decoration: none;
}

.category-result-row:hover {
  background: rgba(255, 253, 248, 0.78);
}

.category-result-row strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
}

.category-result-value {
  color: var(--color-ink-soft);
  font-size: 12.5px;
  font-weight: 400;
  justify-self: end;
  line-height: 1.3;
  white-space: nowrap;
}

.category-insight-section {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  margin-top: 18px;
  padding: 28px;
}

.section-link {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.section-link::after {
  color: var(--color-clay);
  content: " >";
  font-family: var(--font-mono);
}

.category-markdown {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.75;
  max-width: 860px;
}

.category-markdown p {
  margin: 0 0 14px;
}

.category-markdown p:last-child {
  margin-bottom: 0;
}

.category-lab-notes-panel {
  margin-top: 22px;
  scroll-margin-top: 24px;
}

.report-ai-summary-panel {
  display: grid;
  gap: 18px;
  margin: 18px 0 20px;
}

.report-ai-summary-panel[hidden] {
  display: none;
}

.report-ai-summary-content {
  color: var(--color-ink-soft);
  display: grid;
  gap: 18px;
  line-height: 1.7;
  max-width: 940px;
}

.report-ai-summary-toolbar,
.report-ai-summary-translation,
.notes-translation-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.report-summary-translate-button,
.notes-translate-button {
  background: #fffdf8;
  border: 1px solid rgba(194, 178, 153, 0.9);
  border-radius: 8px;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  padding: 9px 12px;
}

.report-summary-translate-button:hover,
.notes-translate-button:hover {
  background: var(--color-sand);
}

.report-summary-translate-button:disabled,
.notes-translate-button:disabled {
  cursor: progress;
  opacity: 0.62;
}

.report-summary-translation-status,
.notes-translation-status {
  color: var(--color-ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.report-ai-summary-block {
  display: grid;
  gap: 8px;
}

.report-ai-summary-block h3 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.35;
  margin: 0;
}

.report-ai-summary-block p {
  font-size: 15px;
  margin: 0;
}

.category-note-block + .category-note-block {
  margin-top: 24px;
}

.category-note-title {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.35;
  margin: 0 0 10px;
}

.biomarker-report {
  display: grid;
  gap: 26px;
  padding: 10px 0 20px;
}

.biomarker-back-link {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  justify-self: start;
}

.biomarker-back-link::before {
  content: "< ";
  font-family: var(--font-mono);
}

.biomarker-report-header {
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  padding-bottom: 22px;
}

.biomarker-report-header h1 {
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 0;
}

.biomarker-report-header p:last-child {
  color: var(--color-ink-soft);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 650;
  line-height: 1.45;
  margin: 0;
  max-width: 1020px;
}

.biomarker-chart-card {
  background: rgba(255, 253, 248, 0.5);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  min-height: 360px;
  overflow: hidden;
}

.biomarker-chart-card.has-no-history {
  grid-template-columns: 1fr;
  min-height: 0;
}

.biomarker-chart-card.has-no-history .biomarker-current {
  border-right: 0;
}

.biomarker-current {
  align-content: start;
  border-right: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 32px 28px;
}

.biomarker-current-status {
  color: var(--status-other);
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.biomarker-current-in-range .biomarker-current-status {
  color: var(--status-in-range);
}

.biomarker-current-out-of-range .biomarker-current-status {
  color: var(--status-out-of-range);
}

.biomarker-current-value {
  align-items: center;
  color: var(--color-ink-soft);
  display: flex;
  font-size: 17px;
  font-weight: 800;
  gap: 10px;
  margin: 0;
}

.biomarker-current-dot {
  background: var(--status-other);
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

.biomarker-current-in-range .biomarker-current-dot {
  background: var(--status-in-range);
}

.biomarker-current-out-of-range .biomarker-current-dot {
  background: var(--status-out-of-range);
}

.biomarker-current-dot.is-in-range {
  background: var(--status-in-range);
}

.biomarker-current-dot.is-out-of-range {
  background: var(--status-out-of-range);
}

.biomarker-current-dot.is-other {
  background: var(--status-other);
}

.biomarker-current-value span:last-child {
  color: var(--color-ink);
}

.biomarker-current time {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
}

.biomarker-history {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: 138px minmax(0, 1fr);
  padding: 30px 26px 22px;
}

.biomarker-history[hidden] {
  display: none;
}

.biomarker-history-scale {
  align-self: end;
  display: grid;
  font-size: 14px;
  font-weight: 700;
  height: 255px;
}

.biomarker-history-scale span {
  align-items: center;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  display: grid;
  gap: 10px;
  grid-template-columns: 7px minmax(0, 1fr);
  padding-left: 4px;
}

.biomarker-history-scale em {
  display: grid;
  font-style: normal;
  gap: 5px;
  line-height: 1.2;
}

.biomarker-history-scale small {
  color: var(--color-ink-soft);
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.biomarker-history-scale b {
  background: var(--status-out-of-range);
  border-radius: 999px;
  display: block;
  height: 100%;
  min-height: 62px;
}

.biomarker-history-scale span:nth-child(2) b {
  background: var(--status-in-range);
}

.biomarker-history-chart {
  min-width: 0;
}

.biomarker-history-svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.biomarker-history-axis,
.biomarker-history-guide {
  stroke: rgba(121, 128, 128, 0.24);
  stroke-width: 1;
}

.biomarker-history-line {
  fill: none;
  stroke: rgba(121, 128, 128, 0.36);
  stroke-dasharray: 6 9;
  stroke-linecap: round;
  stroke-width: 2;
}

.biomarker-history-point {
  fill: var(--status-other);
  stroke: var(--color-paper);
  stroke-width: 5;
}

.biomarker-history-point.is-in-range {
  fill: var(--status-in-range);
}

.biomarker-history-point.is-out-of-range {
  fill: var(--status-out-of-range);
}

.biomarker-history-point.is-other {
  fill: var(--status-other);
}

.biomarker-history-point.is-current {
  stroke: rgba(var(--status-in-range-rgb), 0.22);
  stroke-width: 10;
}

.biomarker-history-point.is-out-of-range.is-current {
  stroke: rgba(176, 113, 81, 0.22);
}

.biomarker-history-point.is-other.is-current {
  stroke: rgba(var(--status-other-rgb), 0.22);
}

.biomarker-history-value {
  fill: var(--status-other);
  font-size: 16px;
  font-weight: 800;
}

.biomarker-history-value.is-in-range {
  fill: var(--status-in-range);
}

.biomarker-history-value.is-out-of-range {
  fill: var(--status-out-of-range);
}

.biomarker-history-value.is-other {
  fill: var(--status-other);
}

.biomarker-history-date {
  fill: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
}

.category-meta {
  color: var(--color-muted);
  font-size: 12px;
  margin: 18px 0 0;
}

.notes-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 280px minmax(0, 1fr);
  margin-top: 18px;
}

.notes-toc-panel {
  position: sticky;
  top: 24px;
}

.notes-toc {
  display: grid;
  gap: 6px;
}

.notes-toc a {
  border-radius: 14px;
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  padding: 10px 12px;
}

.notes-toc a:hover {
  background: #f8f1e7;
  color: var(--color-ink);
}

.notes-content,
.notes-card-list,
.notes-category-list {
  display: grid;
  gap: 18px;
}

.notes-section-group {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 54px rgba(67, 57, 45, 0.06);
  padding: 28px;
}

.notes-card,
.notes-category-card {
  background: #fffdf8;
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: 26px;
  padding: clamp(22px, 3vw, 34px);
}

.notes-card-strength {
  background:
    linear-gradient(135deg, rgba(var(--status-in-range-rgb), 0.16), transparent 16rem),
    #fffdf8;
}

.notes-card-attention {
  background:
    linear-gradient(135deg, rgba(192, 120, 88, 0.18), transparent 16rem),
    #fffdf8;
}

.notes-card h3,
.notes-category-card h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
}

.notes-markdown {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.75;
  margin-top: 18px;
  max-width: 880px;
}

.notes-markdown p {
  margin: 0 0 14px;
}

.notes-markdown p:last-child {
  margin-bottom: 0;
}

.notes-lab-notes-group {
  scroll-margin-top: 24px;
}

.notes-card-lab-note {
  background: rgba(255, 253, 248, 0.82);
}

.notes-inline-biomarker-link {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration-color: rgba(var(--color-selected-rgb), 0.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.notes-inline-biomarker-link:hover {
  color: var(--color-selected);
  text-decoration-color: var(--color-selected);
}

.notes-category-title-row {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.notes-category-breakdown {
  margin-top: 12px;
}

.notes-biomarker-panel {
  background: #f8f1e7;
  border: 1px solid rgba(213, 204, 192, 0.96);
  border-radius: 13px;
  margin-top: 30px;
  padding: 16px 20px 18px;
}

.notes-biomarker-panel h4 {
  border-bottom: 1px solid rgba(213, 204, 192, 0.96);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 14px;
  padding-bottom: 12px;
}

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

.notes-biomarker-item {
  align-items: center;
  color: var(--color-ink-soft);
  display: flex;
  font-size: 13px;
  gap: 9px;
  line-height: 1.35;
  min-width: 0;
}

.notes-biomarker-item:hover {
  color: var(--color-ink);
}

.notes-biomarker-item i {
  background: var(--status-out-of-range);
  border-radius: 999px;
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.notes-placeholder {
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

.report-selector-group {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
}

.report-selector-group label {
  color: rgba(255, 253, 248, 0.72);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  text-transform: uppercase;
}

.report-selector-group select {
  appearance: none;
  background: rgba(255, 253, 248, 0.1);
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: 14px;
  color: #fffdf8;
  font: inherit;
  font-size: 14px;
  padding: 12px 38px 12px 14px;
}

.report-selector-group option {
  color: var(--color-ink);
}

.report-change-summary {
  margin-top: 18px;
}

.report-change-summary .track-change-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-change-acknowledgement {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 18px 20px;
  color: var(--color-ink);
  background: rgba(var(--status-in-range-rgb), 0.08);
  border: 1px solid rgba(var(--status-in-range-rgb), 0.24);
  border-left: 4px solid var(--status-in-range);
  border-radius: 18px;
}

.report-change-acknowledgement[hidden] {
  display: none;
}

.report-change-acknowledgement.is-mixed {
  background: rgba(192, 147, 96, 0.1);
  border-color: rgba(192, 147, 96, 0.3);
  border-left-color: #a97843;
}

.report-change-acknowledgement strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
}

.report-change-acknowledgement span {
  max-width: 64ch;
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.report-change-filter-bar {
  margin-top: 18px;
}

.report-change-list {
  display: grid;
  gap: 0;
  margin-top: 18px;
}

.report-change-biomarker.is-improved .all-category-biomarker-status {
  background: var(--status-in-range);
}

.report-change-biomarker.is-worsened .all-category-biomarker-status {
  background: var(--status-out-of-range);
}

.report-change-biomarker.is-stable .all-category-biomarker-status {
  background: rgba(var(--status-other-rgb), 0.55);
}

.report-change-biomarker-value {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
}

.report-change-metric {
  align-items: baseline;
  color: var(--color-ink-soft);
  display: inline-flex;
  gap: 5px;
}

.report-change-metric b {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-change-metric span {
  color: var(--color-ink);
  font-weight: 850;
}

.report-change-metric em {
  color: var(--color-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.report-change-result {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.report-change-biomarker.is-improved .report-change-result,
.report-change-biomarker.is-improved .report-change-delta span {
  color: var(--status-in-range);
}

.report-change-biomarker.is-worsened .report-change-result,
.report-change-biomarker.is-worsened .report-change-delta span {
  color: var(--status-out-of-range);
}

.documents-dashboard {
  max-width: var(--user-page-max-width);
}

.documents-hero {
  margin-bottom: 18px;
}

.documents-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
}

.documents-grid-single {
  grid-template-columns: minmax(0, 820px);
}

.document-upload-panel,
.document-imports-panel {
  min-height: 320px;
}

.document-upload-panel-wide {
  min-height: 0;
}

.document-upload-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.document-dropzone {
  align-items: center;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--status-in-range-rgb), 0.15), transparent 15rem),
    #f8f1e7;
  border: 1px dashed rgba(97, 104, 103, 0.38);
  border-radius: 24px;
  cursor: pointer;
  display: grid;
  gap: 16px;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 150px;
  padding: 22px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.document-dropzone:hover {
  background: #fffdf8;
  border-color: var(--color-clay);
  transform: translateY(-1px);
}

.document-dropzone input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.document-dropzone-icon {
  align-items: center;
  background: var(--color-ink);
  border-radius: 18px;
  color: #fffdf8;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 13px;
  height: 58px;
  justify-content: center;
  letter-spacing: 0.08em;
  width: 58px;
}

.document-dropzone-copy {
  display: grid;
  gap: 7px;
}

.document-dropzone-copy strong {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.document-dropzone-copy span {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.45;
}

.document-submit-button {
  appearance: none;
  background: var(--color-ink);
  border: 0;
  border-radius: 14px;
  color: #fffdf8;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  min-height: 52px;
  padding: 0 20px;
}

.document-submit-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.document-submit-button[data-busy="true"],
.document-full-text-button[data-busy="true"],
.document-parse-button[data-busy="true"] {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.document-submit-button[data-busy="true"]::before,
.document-full-text-button[data-busy="true"]::before,
.document-parse-button[data-busy="true"]::before,
.document-upload-status[data-status="loading"]::before,
.document-processing-spinner {
  animation: suede-spin 900ms linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.document-upload-status {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  min-height: 20px;
}

.document-upload-status[data-status="loading"] {
  align-items: center;
  color: var(--color-ink-soft);
  display: flex;
  gap: 8px;
}

.document-upload-status[data-status="success"] {
  color: var(--status-in-range);
}

.document-upload-status[data-status="error"] {
  color: var(--status-out-of-range);
}

.document-review-panel {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.document-review-card {
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.document-review-card[data-status="warning"] {
  border-color: color-mix(in srgb, var(--status-other) 55%, var(--color-line));
}

.document-processing-card {
  align-items: start;
  background:
    radial-gradient(circle at 100% 0%, rgba(197, 113, 71, 0.12), transparent 12rem),
    rgba(255, 253, 248, 0.74);
  grid-template-columns: auto minmax(0, 1fr);
}

.document-processing-spinner {
  color: var(--color-clay);
  height: 22px;
  margin-top: 3px;
  width: 22px;
}

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

.document-review-card[data-status="error"] {
  border-color: color-mix(in srgb, var(--status-out-of-range) 60%, var(--color-line));
}

.document-review-heading {
  display: grid;
  gap: 6px;
}

.document-review-card h3 {
  color: var(--color-ink);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0;
}

.document-review-card p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.wearables-dashboard {
  max-width: var(--user-page-max-width);
}

.wearables-hero {
  margin-bottom: 18px;
}

.wearables-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr);
}

.wearables-grid-lower {
  align-items: start;
  margin-top: 18px;
}

.wearable-upload-panel,
.wearable-connect-panel,
.wearable-summary-panel,
.wearable-sleep-panel,
.wearable-activities-panel,
.wearable-imports-panel,
.wearable-samples-panel,
.wearable-day-panel {
  min-height: 0;
}

.wearable-connect-panel,
.wearable-summary-panel,
.wearable-sleep-panel,
.wearable-activities-panel,
.wearable-activity-detail-panel,
.wearable-day-panel,
.wearable-samples-panel,
.wearable-imports-panel {
  display: grid;
  gap: 18px;
}

.wearable-connect-panel {
  gap: 0;
}

.wearable-connect-panel[open] {
  gap: 18px;
}

.wearable-connect-summary {
  cursor: pointer;
  list-style: none;
  padding-right: 42px;
  position: relative;
}

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

.wearable-connect-summary::after {
  border-bottom: 2px solid var(--color-muted);
  border-right: 2px solid var(--color-muted);
  content: "";
  height: 10px;
  position: absolute;
  right: 2px;
  top: 10px;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  width: 10px;
}

.wearable-connect-panel[open] .wearable-connect-summary::after {
  transform: rotate(225deg);
}

.wearable-connect-panel:not([open]) .wearable-connect-body {
  display: none;
}

.wearable-connect-panel[open] .wearable-connect-body {
  display: grid;
  gap: 18px;
}

.wearable-connect-heading {
  align-items: center;
  gap: 18px;
}

.wearable-connection-badge {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  gap: 8px;
  justify-self: end;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 34px;
  padding: 7px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.wearable-connection-badge[hidden] {
  display: none;
}

.wearable-connection-icons {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 22px;
  justify-content: center;
  min-width: 22px;
}

.wearable-connection-icons svg {
  fill: none;
  height: 17px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 17px;
}

.wearable-connection-icons img {
  background: #ffffff;
  border: 1px solid rgba(74, 151, 111, 0.2);
  border-radius: 6px;
  display: block;
  height: 22px;
  object-fit: contain;
  padding: 2px 4px;
  width: 58px;
}

.wearable-connection-icons[data-logo-count="2"] img,
.wearable-connection-icons[data-logo-count="3"] img {
  width: 42px;
}

.wearable-connection-icons[data-logo-count="2"] img + img,
.wearable-connection-icons[data-logo-count="3"] img + img {
  margin-left: -8px;
}

.wearable-connection-badge[data-status="connected"] {
  background: rgba(231, 245, 238, 0.92);
  border-color: rgba(74, 151, 111, 0.32);
  color: #2f6f50;
}

.wearable-connection-badge[data-status="loading"] {
  color: var(--color-muted);
}

.wearable-summary-copy {
  color: var(--color-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.wearable-focus-dashboard {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.wearable-focus-header {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.wearable-focus-header h3 {
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.15;
  margin: 3px 0 5px;
}

.wearable-focus-header span {
  color: var(--color-muted);
  display: block;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.45;
  max-width: 56ch;
}

.wearable-focus-controls {
  align-items: center;
  background: rgba(248, 241, 231, 0.72);
  border: 1px solid rgba(229, 222, 212, 0.92);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  padding: 4px;
}

.wearable-focus-controls button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  min-height: 34px;
  padding: 9px 11px;
  white-space: nowrap;
}

.wearable-focus-controls button:hover,
.wearable-focus-controls button:focus-visible {
  background: rgba(255, 253, 248, 0.82);
  border-color: rgba(88, 167, 180, 0.28);
  color: var(--color-ink);
  outline: none;
}

.wearable-focus-controls button[data-active="true"] {
  background: #fffdf8;
  border-color: rgba(88, 167, 180, 0.42);
  box-shadow: 0 8px 18px rgba(38, 43, 48, 0.07);
  color: var(--color-ink);
}

.wearable-metric-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.wearable-key-metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wearable-provider-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.wearable-provider-card {
  align-items: stretch;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-rows: 1fr auto;
  min-height: 116px;
  padding: 12px;
}

.wearable-provider-main {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 74px minmax(0, 1fr);
}

.wearable-provider-logo {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
  width: 74px;
}

.wearable-provider-logo img {
  display: block;
  height: 30px;
  max-width: 70px;
  object-fit: contain;
  width: 70px;
}

.wearable-provider-logo > span {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 900;
}

.wearable-provider-card strong {
  color: var(--color-ink);
  display: block;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
}

.wearable-provider-copy span {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 5px;
  min-height: 24px;
  padding: 5px 8px;
  text-transform: uppercase;
}

.wearable-provider-status {
  background: rgba(108, 121, 133, 0.1);
  border: 1px solid transparent;
  border-radius: 999px;
}

.wearable-provider-status[data-status="connected"] {
  background: rgba(231, 245, 238, 0.96);
  border-color: rgba(74, 151, 111, 0.24);
  color: #2f6f50;
}

.wearable-provider-status[data-status="broken"] {
  background: rgba(255, 240, 232, 0.96);
  border-color: rgba(170, 94, 64, 0.24);
  color: #8b4a32;
}

.wearable-provider-card[data-connected="true"] {
  background: linear-gradient(180deg, rgba(238, 248, 243, 0.86) 0%, rgba(255, 253, 248, 0.92) 100%);
  border-color: rgba(74, 151, 111, 0.42);
}

.wearable-provider-card[data-broken="true"] {
  border-color: rgba(170, 94, 64, 0.42);
}

.wearable-provider-actions {
  align-items: stretch;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  padding-top: 10px;
}

.wearable-provider-connect,
.wearable-provider-disconnect {
  flex: 1 1 82px;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

.wearable-provider-disconnect {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  padding-bottom: 11px;
  padding-top: 11px;
}

.wearable-provider-disconnect:hover,
.wearable-provider-disconnect:focus-visible {
  background: rgba(255, 253, 248, 0.94);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.wearable-connect-status {
  margin: 0;
}

.wearable-metric-card {
  appearance: none;
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 8px;
  min-height: 136px;
  padding: 16px;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.wearable-metric-card-priority {
  min-height: 150px;
}

.wearable-metric-card-compact {
  gap: 6px;
  min-height: 112px;
  padding: 13px;
}

.wearable-metric-card:hover,
.wearable-metric-card:focus-visible {
  background: #fffdf8;
  border-color: rgba(88, 167, 180, 0.38);
  transform: translateY(-1px);
}

.wearable-metric-card:focus-visible {
  outline: 3px solid rgba(88, 167, 180, 0.18);
  outline-offset: 3px;
}

.wearable-metric-label {
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.wearable-metric-card strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 40px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
}

.wearable-metric-card-compact strong {
  font-size: clamp(23px, 2.4vw, 31px);
}

.wearable-metric-card span:not(.wearable-metric-label),
.wearable-metric-card small {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.wearable-metric-drawer {
  background: rgba(255, 253, 248, 0.58);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  overflow: hidden;
}

.wearable-metric-drawer > summary,
.wearable-metric-group > summary {
  align-items: center;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 850;
  gap: 10px;
  justify-content: space-between;
  line-height: 1.2;
  list-style: none;
  padding: 13px 15px;
}

.wearable-metric-drawer > summary::-webkit-details-marker,
.wearable-metric-group > summary::-webkit-details-marker {
  display: none;
}

.wearable-metric-drawer > summary::after,
.wearable-metric-group > summary::after {
  content: "+";
  color: var(--color-muted);
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.wearable-metric-drawer[open] > summary::after,
.wearable-metric-group[open] > summary::after {
  content: "-";
}

.wearable-metric-drawer summary small,
.wearable-metric-group summary small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  margin-left: auto;
}

.wearable-metric-group-list {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 10px;
  padding: 12px;
}

.wearable-metric-group {
  background: rgba(248, 241, 231, 0.56);
  border: 1px solid rgba(229, 222, 212, 0.84);
  border-radius: 8px;
  overflow: hidden;
}

.wearable-metric-group-grid {
  border-top: 1px solid rgba(229, 222, 212, 0.84);
  padding: 12px;
}

.wearable-sleep-panel {
  margin-top: 18px;
}

.wearable-sleep-report {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.wearable-sleep-overview {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
}

.wearable-sleep-primary,
.wearable-sleep-stat-grid span,
.wearable-sleep-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.wearable-sleep-primary {
  display: grid;
  gap: 9px;
  min-height: 160px;
  padding: 16px;
}

.wearable-sleep-primary strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.wearable-sleep-primary small {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.4;
}

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

.wearable-sleep-stat-grid span {
  color: var(--color-ink-soft);
  display: grid;
  font-size: 18px;
  font-weight: 850;
  gap: 7px;
  line-height: 1.1;
  min-height: 92px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 13px;
}

.wearable-sleep-stat-grid b {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.wearable-sleep-detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
}

.wearable-sleep-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.wearable-sleep-card h3 {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.wearable-sleep-timeline {
  background: rgba(248, 241, 231, 0.68);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  min-height: 74px;
  overflow: hidden;
  padding: 6px;
}

.wearable-sleep-timeline span {
  border-radius: 5px;
  flex: 0 0 var(--segment-width, 1%);
  min-width: 3px;
}

.wearable-sleep-timeline-labels {
  color: var(--color-muted);
  display: flex;
  font-size: 12px;
  font-weight: 850;
  justify-content: space-between;
  line-height: 1.2;
}

.wearable-sleep-stage-list {
  display: grid;
  gap: 10px;
}

.wearable-sleep-stage-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 94px minmax(90px, 1fr) 64px 42px;
  min-width: 0;
}

.wearable-sleep-stage-row > span {
  align-items: center;
  color: var(--color-ink-soft);
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  gap: 8px;
  line-height: 1.2;
  min-width: 0;
}

.wearable-sleep-stage-row i {
  border-radius: 999px;
  flex: 0 0 auto;
  height: 10px;
  width: 10px;
}

.wearable-sleep-stage-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wearable-sleep-stage-row strong,
.wearable-sleep-stage-row small {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
}

.wearable-sleep-stage-row strong {
  color: var(--color-ink);
}

.wearable-sleep-stage-bar {
  background: rgba(229, 222, 212, 0.7);
  border-radius: 999px;
  height: 10px;
  min-width: 0;
  overflow: hidden;
}

.wearable-sleep-stage-bar span {
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--stage-percent, 0%);
}

.wearable-sleep-timeline span[data-stage="awake"],
.wearable-sleep-stage-row[data-stage="awake"] i,
.wearable-sleep-stage-row[data-stage="awake"] .wearable-sleep-stage-bar span {
  background: #bfa98d;
}

.wearable-sleep-timeline span[data-stage="light"],
.wearable-sleep-stage-row[data-stage="light"] i,
.wearable-sleep-stage-row[data-stage="light"] .wearable-sleep-stage-bar span {
  background: #5b9cbd;
}

.wearable-sleep-timeline span[data-stage="deep"],
.wearable-sleep-stage-row[data-stage="deep"] i,
.wearable-sleep-stage-row[data-stage="deep"] .wearable-sleep-stage-bar span {
  background: #4d5792;
}

.wearable-sleep-timeline span[data-stage="rem"],
.wearable-sleep-stage-row[data-stage="rem"] i,
.wearable-sleep-stage-row[data-stage="rem"] .wearable-sleep-stage-bar span {
  background: #b35f82;
}

.wearable-sleep-timeline span[data-stage="unknown"] {
  background: #8f969d;
}

.wearable-sleep-trend-card {
  min-height: 248px;
}

.wearable-sleep-trend {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 186px;
}

.wearable-sleep-trend span {
  align-items: end;
  color: var(--color-muted);
  display: grid;
  font-size: 11px;
  font-weight: 820;
  gap: 5px;
  grid-template-rows: 1fr auto auto;
  line-height: 1.15;
  min-width: 0;
  text-align: center;
}

.wearable-sleep-trend i {
  align-self: end;
  background: linear-gradient(180deg, #5b9cbd 0%, #4d5792 100%);
  border-radius: 7px 7px 3px 3px;
  display: block;
  height: var(--sleep-trend-height, 12%);
  min-height: 10px;
  width: 100%;
}

.wearable-sleep-trend b,
.wearable-sleep-trend small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wearable-sleep-trend b {
  color: var(--color-ink);
  font-size: 12px;
}

.wearable-activities-panel {
  margin-top: 18px;
}

.wearable-activity-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.wearable-activity-card {
  align-items: start;
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 178px;
  padding: 16px;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wearable-activity-card:hover,
.wearable-activity-card:focus-visible,
.wearable-activity-card[data-selected="true"] {
  border-color: rgba(57, 124, 133, 0.46);
  box-shadow: 0 14px 28px rgba(38, 43, 48, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.wearable-activity-card[data-selected="true"] {
  background: linear-gradient(180deg, rgba(238, 248, 243, 0.88) 0%, rgba(255, 253, 248, 0.96) 100%);
}

.wearable-activity-main {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, 1fr);
  min-width: 0;
}

.wearable-activity-main > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.wearable-activity-icon {
  align-items: center;
  background: rgba(57, 124, 133, 0.1);
  border: 1px solid rgba(57, 124, 133, 0.22);
  border-radius: 8px;
  color: #397c85;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.wearable-activity-icon svg {
  fill: none;
  height: 25px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 25px;
}

.wearable-activity-card strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.wearable-activity-card small {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.wearable-provider-pill {
  background: rgba(248, 241, 231, 0.8);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 10px;
  white-space: nowrap;
}

.wearable-activity-stats {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wearable-activity-stats span {
  background: rgba(248, 241, 231, 0.64);
  border: 1px solid rgba(229, 222, 212, 0.86);
  border-radius: 8px;
  color: var(--color-ink-soft);
  display: grid;
  font-size: 13px;
  font-weight: 820;
  gap: 3px;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px;
}

.wearable-activity-stats b {
  color: var(--color-muted);
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.wearable-activity-detail-panel {
  margin-top: 18px;
}

.wearable-activity-detail {
  display: grid;
  gap: 18px;
}

.wearable-route-block,
.wearable-activity-summary-block,
.wearable-activity-analysis-block,
.wearable-activity-splits-block {
  display: grid;
  gap: 14px;
}

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

.wearable-route-heading h3,
.wearable-activity-summary-block h3,
.wearable-activity-analysis-block h3,
.wearable-activity-splits-block h3 {
  color: var(--color-ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.wearable-route-legend {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  gap: 8px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.wearable-route-legend i {
  background: linear-gradient(90deg, #2d77c4, #3c9ad9, #81c943, #f2c84b, #f08b2f, #d92f2f);
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 88px;
}

.wearable-route-map {
  background: #eef3ef;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: block;
  height: auto;
  min-height: 240px;
  overflow: hidden;
  width: 100%;
}

.wearable-route-real-map,
.wearable-route-fallback {
  min-width: 0;
  width: 100%;
}

.wearable-route-real-map {
  background: #eef3ef;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  height: 360px;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.wearable-route-real-map[hidden],
.wearable-route-fallback[hidden] {
  display: none !important;
}

.wearable-route-real-map .maplibregl-ctrl-attrib {
  font-family: inherit;
  font-size: 10px;
}

.wearable-route-real-map .maplibregl-canvas {
  outline: none;
}

.wearable-route-map rect {
  fill: #eef3ef;
}

.wearable-route-grid path {
  fill: none;
  stroke: rgba(100, 117, 123, 0.18);
  stroke-linecap: round;
  stroke-width: 2;
}

.wearable-route-line line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 7;
}

.wearable-route-pins circle {
  stroke: #fffdf8;
  stroke-width: 4;
}

.wearable-route-start {
  fill: #4aa36f;
}

.wearable-route-end {
  fill: #c94444;
}

.wearable-activity-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.wearable-activity-summary-grid span {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-muted);
  display: grid;
  font-size: 13px;
  font-weight: 780;
  gap: 6px;
  line-height: 1.25;
  min-height: 104px;
  padding: 14px;
}

.wearable-activity-summary-grid b {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.wearable-analysis-time-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.wearable-analysis-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
}

.wearable-analysis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wearable-analysis-legend span {
  align-items: center;
  background: rgba(248, 241, 231, 0.62);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 8px;
  color: var(--color-muted);
  display: grid;
  gap: 2px 8px;
  grid-template-columns: 10px minmax(0, auto);
  min-width: min(210px, 100%);
  padding: 9px 10px;
}

.wearable-analysis-legend i {
  align-self: start;
  background: #d32f2f;
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  margin-top: 3px;
  width: 10px;
}

.wearable-analysis-legend b {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
}

.wearable-analysis-legend small {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 780;
  grid-column: 2;
  line-height: 1.2;
}

.wearable-analysis-legend [data-analysis-legend="heart-rate"] i {
  background: #e34a4a;
}

.wearable-analysis-legend [data-analysis-legend="elevation"] i {
  background: #7b8288;
}

.wearable-analysis-chart-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.wearable-analysis-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.wearable-analysis-chart-head {
  align-items: end;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: space-between;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.wearable-analysis-chart-head [data-analysis-heading="effort"],
.wearable-analysis-chart-head [data-analysis-heading="heart-rate"] {
  color: #d32f2f;
}

.wearable-analysis-chart-head [data-analysis-heading="elevation"] {
  color: #4f575d;
}

.wearable-analysis-plot {
  background: #f1f1ef;
  border: 1px solid rgba(91, 105, 112, 0.12);
  border-radius: 8px;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}

.wearable-analysis-svg {
  display: block;
  height: 300px;
  width: 100%;
}

.wearable-analysis-svg rect {
  fill: transparent;
}

.wearable-analysis-grid path {
  fill: none;
  stroke: rgba(91, 105, 112, 0.24);
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  stroke-width: 1.1;
}

.wearable-analysis-split-marker path {
  fill: none;
  stroke: rgba(91, 105, 112, 0.18);
  stroke-dasharray: 4 6;
  stroke-width: 1;
}

.wearable-analysis-split-marker text {
  fill: rgba(91, 105, 112, 0.78);
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 850;
  text-anchor: middle;
}

.wearable-analysis-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.wearable-analysis-effort-line {
  stroke: #d32f2f;
  stroke-width: 4.6;
}

.wearable-analysis-heart-rate-line {
  stroke: #d32f2f;
  stroke-width: 4.2;
}

.wearable-analysis-elevation-line {
  stroke: #71777c;
  stroke-width: 2.6;
}

.wearable-analysis-area {
  opacity: 1;
}

.wearable-analysis-elevation-area {
  fill: rgba(113, 119, 124, 0.18);
}

.wearable-analysis-y-axis {
  bottom: 44px;
  color: var(--color-muted);
  display: grid;
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  justify-items: start;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 34px;
  z-index: 1;
}

.wearable-analysis-y-axis-left {
  color: #d32f2f;
  left: 12px;
}

.wearable-analysis-y-axis-elevation {
  color: #8a9097;
  justify-items: end;
  right: 12px;
  text-align: right;
}

.wearable-analysis-y-axis-right {
  color: #e34a4a;
  justify-items: end;
  right: 12px;
  text-align: right;
}

.wearable-analysis-time-axis {
  color: var(--color-muted);
  display: flex;
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  justify-content: space-between;
  line-height: 1;
  padding: 0 64px;
}

.wearable-split-panel {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

.wearable-split-panel-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.wearable-split-panel-head h4 {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.wearable-split-panel-head span {
  color: var(--color-muted);
  display: block;
  font-size: 13px;
  font-weight: 780;
  margin-top: 4px;
  line-height: 1.2;
}

.wearable-split-chart-shell {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.wearable-split-distance-axis,
.wearable-split-chart-main,
.wearable-split-secondary-row {
  display: grid;
  grid-template-columns: 112px minmax(calc(var(--split-count, 1) * 68px), 1fr);
  min-width: min(100%, calc(112px + var(--split-count, 1) * 68px));
}

.wearable-split-distance-axis {
  align-items: end;
  border-bottom: 1px solid rgba(91, 105, 112, 0.24);
  min-height: 34px;
}

.wearable-split-distance-unit,
.wearable-split-y-axis strong,
.wearable-split-secondary-row strong {
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.wearable-split-distance-labels,
.wearable-split-plot,
.wearable-split-secondary-row > div {
  display: grid;
  grid-template-columns: repeat(var(--split-count, 1), minmax(68px, 1fr));
}

.wearable-split-distance-labels span {
  color: var(--color-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding-bottom: 8px;
  text-align: center;
}

.wearable-split-chart-main {
  min-height: 278px;
}

.wearable-split-y-axis {
  display: grid;
  grid-template-rows: auto 1fr 1fr 1fr;
  min-height: 260px;
  padding: 10px 12px 12px 0;
}

.wearable-split-y-axis span {
  color: var(--color-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
  padding-top: 4px;
}

.wearable-split-plot {
  background:
    linear-gradient(to bottom, rgba(91, 105, 112, 0.12) 1px, transparent 1px) 0 0 / 100% 33.333%,
    #fbfcfb;
  border-bottom: 1px solid rgba(91, 105, 112, 0.16);
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.wearable-split-column {
  align-items: end;
  display: flex;
  justify-content: center;
  min-width: 68px;
  padding: 10px 0 0;
  position: relative;
  z-index: 1;
}

.wearable-split-column:last-child {
  border-right: 0;
}

.wearable-split-bar {
  align-items: end;
  background: #d32f2f;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 900;
  height: var(--split-height, 50%);
  justify-content: center;
  line-height: 1;
  min-height: 34px;
  min-width: 0;
  padding: 0 6px 10px;
  width: 100%;
}

.wearable-split-column + .wearable-split-column .wearable-split-bar {
  box-shadow: inset 1px 0 rgba(255, 253, 248, 0.24);
}

.wearable-split-average-line {
  border-top: 1px dashed rgba(91, 105, 112, 0.72);
  left: 0;
  position: absolute;
  right: 0;
  top: var(--split-average-top, 50%);
  z-index: 2;
}

.wearable-split-average-line b {
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(91, 105, 112, 0.14);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  left: 8px;
  line-height: 1;
  padding: 5px 7px;
  position: absolute;
  top: -12px;
  white-space: nowrap;
}

.wearable-split-secondary {
  border-top: 1px solid rgba(91, 105, 112, 0.14);
  display: grid;
  gap: 0;
}

.wearable-split-secondary-row {
  align-items: center;
  min-height: 44px;
}

.wearable-split-secondary-row + .wearable-split-secondary-row {
  border-top: 1px solid rgba(91, 105, 112, 0.08);
}

.wearable-split-secondary-row strong {
  padding-right: 10px;
}

.wearable-split-secondary-row span {
  color: var(--color-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  min-width: 68px;
  text-align: center;
}

.wearable-activity-splits-wrap {
  max-height: 440px;
}

.wearable-activity-splits-table th,
.wearable-activity-splits-table td {
  white-space: nowrap;
}

.wearable-timeline-panel {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.wearable-timeline-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.wearable-timeline-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  min-height: 304px;
  padding: 16px;
}

.wearable-timeline-card-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.wearable-timeline-card-header div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.wearable-timeline-card-header strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.wearable-timeline-card-header > span {
  background: #f8f1e7;
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 999px;
  color: var(--color-ink-soft);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  padding: 7px 10px;
  white-space: nowrap;
}

.wearable-sparkline {
  background: rgba(248, 241, 231, 0.54);
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 12px;
  display: block;
  height: 132px;
  width: 100%;
}

.wearable-sparkline polyline {
  fill: none;
  stroke: #397c85;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.wearable-baseline-line {
  stroke: #ba6f43;
  stroke-dasharray: 7 7;
  stroke-linecap: round;
  stroke-width: 2.5;
}

.wearable-sparkline-empty {
  min-height: 132px;
}

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

.wearable-baseline-grid span {
  background: rgba(248, 241, 231, 0.68);
  border: 1px solid rgba(229, 222, 212, 0.86);
  border-radius: 8px;
  color: var(--color-ink-soft);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 4px;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 10px;
}

.wearable-baseline-grid b {
  color: var(--color-muted);
  display: block;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wearable-delta {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  justify-content: center;
  line-height: 1.3;
  margin: 0;
  min-height: 38px;
  padding: 9px 12px;
}

.wearable-delta[data-direction="up"] {
  background: rgba(186, 111, 67, 0.13);
  color: #8f5636;
}

.wearable-delta[data-direction="down"] {
  background: rgba(57, 124, 133, 0.13);
  color: #397c85;
}

.wearable-delta[data-direction="flat"] {
  background: rgba(96, 105, 117, 0.12);
  color: var(--color-ink-soft);
}

.wearable-day-panel,
.wearable-activities-panel,
.wearable-activity-detail-panel,
.wearable-samples-panel,
.wearable-upload-panel,
.wearable-imports-panel {
  margin-top: 18px;
}

.wearable-day-control {
  align-items: center;
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.wearable-day-control span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wearable-day-control select {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  min-height: 42px;
  padding: 9px 12px;
}

.wearable-day-table-wrap {
  max-height: 420px;
}

.wearable-day-metric-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  padding: 0;
  text-align: left;
}

.wearable-day-metric-button:hover,
.wearable-day-metric-button:focus-visible {
  color: #397c85;
  outline: none;
  text-decoration: underline;
}

.wearable-day-detail-button {
  white-space: nowrap;
}

.wearable-upload-panel {
  padding: 0;
}

.wearable-upload-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  list-style: none;
  padding: 18px;
}

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

.wearable-upload-summary span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.wearable-upload-summary b {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}

.wearable-upload-summary small {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.wearable-upload-panel .document-upload-form {
  border-top: 1px solid var(--color-line);
  padding: 0 18px 18px;
}

.wearable-import-list,
.wearable-sample-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.wearable-import-list {
  margin-top: 0;
}

.wearable-import-summary-row {
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 13px 14px;
}

.wearable-import-summary-row strong {
  color: var(--color-ink);
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wearable-import-summary-row span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.wearable-import-summary-row p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  line-height: 1.4;
  margin: 0;
}

.wearable-import-summary-row .wearable-import-message {
  color: var(--color-ink-soft);
  font-weight: 650;
}

.wearable-import-card {
  align-items: start;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px;
}

.wearable-import-card strong {
  color: var(--color-ink);
  display: block;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.wearable-import-card span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.wearable-import-card p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  grid-column: 1 / -1;
  line-height: 1.5;
  margin: 0;
}

.wearable-status-pill {
  background: rgba(96, 105, 117, 0.13);
  border: 1px solid rgba(96, 105, 117, 0.22);
  border-radius: 999px;
  color: var(--color-ink-soft);
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  justify-content: center;
  line-height: 1.2;
  padding: 7px 10px;
  white-space: nowrap;
}

.wearable-import-card[data-status="imported"] .wearable-status-pill {
  background: rgba(102, 161, 130, 0.16);
  border-color: rgba(102, 161, 130, 0.3);
  color: #426d58;
}

.wearable-import-card[data-status="failed"] .wearable-status-pill {
  background: rgba(140, 120, 103, 0.16);
  border-color: rgba(140, 120, 103, 0.32);
  color: var(--color-alert);
}

.wearable-import-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.wearable-import-meta span {
  background: #f8f1e7;
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 999px;
  color: var(--color-ink-soft);
  padding: 6px 10px;
}

.wearable-table-wrap {
  border: 1px solid var(--color-line);
  border-radius: 18px;
  max-height: 460px;
  overflow: auto;
}

.wearable-table {
  border-collapse: collapse;
  min-width: 520px;
  width: 100%;
}

.wearable-table th,
.wearable-table td {
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}

.wearable-table th {
  background: rgba(248, 241, 231, 0.82);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
}

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

.document-review-summary {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  margin: 0;
}

.document-review-summary dt {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
}

.document-review-summary dd {
  color: var(--color-ink-soft);
  font-size: 14px;
  font-weight: 750;
  margin: 0;
  min-width: 0;
}

.document-review-warnings {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.document-review-warnings li {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  padding: 11px 12px;
}

.document-review-warnings li[data-status="error"] {
  border-color: color-mix(in srgb, var(--status-out-of-range) 62%, var(--color-line));
  color: var(--status-out-of-range);
}

.document-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.document-import-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.document-empty {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
  padding: 18px 0 0;
}

.document-import-card {
  background: #f8f1e7;
  border: 1px solid rgba(229, 222, 212, 0.95);
  border-radius: 24px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.document-import-card-header {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.document-import-card h3 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
}

.document-import-card p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  margin: 8px 0 0;
}

.document-status-pill {
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--status-other);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 8px 10px;
}

.document-import-card.is-text_extracted .document-status-pill {
  color: var(--status-in-range);
}

.document-import-card.is-failed .document-status-pill {
  color: var(--status-out-of-range);
}

.document-text-preview {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  color: var(--color-ink-soft);
  font: 13px/1.55 var(--font-mono);
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.document-text-preview[data-collapsed="true"] {
  max-height: 240px;
}

.document-text-preview[data-collapsed="false"] {
  max-height: 72vh;
}

.document-full-text-button,
.document-parse-button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-clay-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  justify-self: start;
  line-height: 1;
  padding: 11px 14px;
}

.document-parse-button {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fffdf8;
}

.document-full-text-button:disabled,
.document-parse-button:disabled {
  cursor: default;
  opacity: 0.62;
}

.document-import-message {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 14px;
}

.document-parse-results {
  display: grid;
  gap: 14px;
}

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

.document-parse-stat {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 5px;
  padding: 14px;
  text-align: center;
}

.admin-import-page {
  box-sizing: border-box;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: min(1760px, calc(100vw - 128px));
  min-width: 0;
  padding: 42px clamp(18px, 3vw, 40px) 72px;
  width: 100%;
}

.admin-health-page {
  box-sizing: border-box;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: min(1760px, calc(100vw - 128px));
  min-width: 0;
  padding: 42px clamp(18px, 3vw, 40px) 72px;
  width: 100%;
}

.admin-import-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.admin-header-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.admin-import-hero {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.admin-import-hero h1 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.admin-import-hero p {
  color: var(--color-ink-soft);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.admin-health-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-health-metric {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  min-height: 126px;
  padding: 14px 16px;
}

.admin-health-metric[data-group="Platform"] {
  border-top: 3px solid rgba(25, 26, 29, 0.7);
}

.admin-health-metric[data-group="Customers"] {
  border-top: 3px solid rgba(140, 106, 79, 0.8);
}

.admin-health-metric[data-group="Engagement"] {
  border-top: 3px solid rgba(64, 110, 132, 0.82);
}

.admin-health-metric[data-group="Reports"] {
  border-top: 3px solid rgba(114, 88, 150, 0.8);
}

.admin-health-metric[data-group="Wearables"] {
  border-top: 3px solid rgba(86, 133, 92, 0.82);
}

.admin-health-metric[data-group="Spike"] {
  border-top: 3px solid rgba(42, 119, 158, 0.82);
}

.admin-health-metric[data-group="Consults"] {
  border-top: 3px solid rgba(174, 108, 66, 0.82);
}

.admin-health-metric-group {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-health-metric-value {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.admin-health-metric-label {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.admin-health-metric-detail {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-health-activity-list {
  display: grid;
  gap: 10px;
}

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

.admin-health-service-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  padding: 13px;
}

.admin-health-service-card[data-status="UP"] {
  border-top: 3px solid rgba(52, 132, 82, 0.8);
}

.admin-health-service-card[data-status="DEGRADED"] {
  border-top: 3px solid rgba(189, 129, 42, 0.85);
}

.admin-health-service-card[data-status="DISABLED"] {
  border-top: 3px solid rgba(132, 136, 145, 0.85);
}

.admin-health-service-card strong {
  color: var(--color-ink);
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.admin-health-service-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-health-service-status {
  border-radius: 999px;
  color: var(--color-paper);
  display: inline-flex;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  text-transform: uppercase;
}

.admin-health-service-card[data-status="UP"] .admin-health-service-status {
  background: rgba(52, 132, 82, 0.96);
}

.admin-health-service-card[data-status="DEGRADED"] .admin-health-service-status {
  background: rgba(189, 129, 42, 0.96);
}

.admin-health-service-card[data-status="DISABLED"] .admin-health-service-status {
  background: rgba(132, 136, 145, 0.96);
}

.admin-health-service-group {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-health-service-detail {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.admin-health-activity-item {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  display: grid;
  gap: 4px;
  padding: 13px;
}

.admin-health-activity-item strong {
  color: var(--color-ink);
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.admin-health-activity-item span,
.admin-health-activity-item small {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-health-empty {
  color: var(--color-muted);
  margin: 0;
}

.admin-function-nav {
  align-items: center;
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.admin-import-page > .admin-function-nav {
  display: none;
}

.admin-function-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  min-height: 36px;
  padding: 10px 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.admin-function-nav a:hover {
  background: var(--color-panel-soft);
  border-color: var(--color-line);
  color: var(--color-ink);
}

.admin-function-nav a.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

@media (max-width: 1280px) {
  .admin-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-health-service-grid {
    grid-template-columns: 1fr;
  }
}

.admin-import-controls {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.75fr) minmax(300px, 1.4fr) auto auto auto;
}

.admin-import-controls,
.admin-cleanup-panel,
.admin-token-panel,
.admin-webhook-panel,
.admin-user-panel,
.admin-import-files-panel {
  scroll-margin-top: 24px;
}

[data-admin-function-panel][hidden] {
  display: none !important;
}

.admin-section-heading {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}

.admin-section-heading h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-section-heading p {
  margin: 0;
}

.admin-import-controls [hidden] {
  display: none !important;
}

.admin-import-controls label {
  display: grid;
  gap: 8px;
}

.admin-import-controls label span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-import-controls input,
.admin-import-controls select {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  min-height: 52px;
  padding: 0 16px;
}

.admin-import-controls input[type="file"] {
  align-content: center;
  padding: 13px 16px;
}

.admin-import-controls .document-upload-status {
  grid-column: 1 / -1;
}

.admin-biomarker-workbench {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.admin-biomarker-panel {
  align-content: start;
  display: grid;
  gap: 18px;
}

.admin-biomarker-panel h2 {
  color: var(--color-ink);
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-biomarker-table-wrap {
  overflow-x: auto;
}

.admin-biomarker-field {
  display: grid;
  gap: 8px;
}

.admin-biomarker-field span,
.admin-checkbox-row span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-biomarker-field input,
.admin-biomarker-field select,
.admin-biomarker-field textarea {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  min-height: 52px;
  padding: 0 16px;
}

.admin-biomarker-field select {
  cursor: pointer;
}

.admin-biomarker-field-hint {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.admin-biomarker-field textarea {
  line-height: 1.45;
  min-height: 150px;
  padding: 14px 16px;
  resize: vertical;
}

.admin-biomarker-search-results {
  display: grid;
  gap: 8px;
}

.admin-biomarker-result {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 11px 13px;
  text-align: left;
}

.admin-biomarker-result:hover {
  border-color: var(--color-out);
}

.admin-checkbox-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.admin-biomarker-catalogue-search {
  min-width: min(360px, 100%);
}

.admin-biomarker-catalogue {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.admin-biomarker-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 8px;
  padding: 15px;
}

.admin-biomarker-card-header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.admin-biomarker-card strong {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
}

.admin-biomarker-card span,
.admin-biomarker-card small,
.admin-search-message {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

.admin-biomarker-description {
  color: var(--color-ink);
  display: -webkit-box;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  margin: 2px 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.admin-biomarker-edit-button {
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.admin-biomarker-content-form {
  display: grid;
  gap: 18px;
}

.admin-biomarker-editor-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 28px;
  position: fixed;
  z-index: 150;
}

.admin-biomarker-editor-backdrop {
  background: rgba(17, 18, 20, 0.78);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.admin-biomarker-editor-sheet {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 32px 90px rgba(44, 45, 51, 0.24);
  display: grid;
  gap: 22px;
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 24px;
  position: relative;
  scrollbar-gutter: stable;
  width: min(1280px, calc(100vw - 56px));
}

.admin-biomarker-editor-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.admin-biomarker-editor-header h2 {
  color: var(--color-ink);
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-biomarker-editor-header p:last-child {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  margin: 8px 0 0;
}

.admin-biomarker-editor-close {
  background: #f1ede7;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 40px;
  padding: 0 16px;
}

.admin-biomarker-editor-fields {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.admin-biomarker-editor-identity {
  display: grid;
  gap: 16px;
}

.admin-biomarker-editor-sheet .admin-biomarker-field textarea {
  min-height: 238px;
}

.admin-biomarker-editor-sheet .admin-biomarker-target-row {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.admin-biomarker-target-editor {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
}

.admin-biomarker-target-heading {
  display: grid;
  gap: 4px;
}

.admin-biomarker-target-heading strong {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
}

.admin-biomarker-target-heading span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.admin-biomarker-target-list {
  display: grid;
  gap: 10px;
}

.admin-biomarker-target-row {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  padding: 12px;
}

.admin-biomarker-target-guidance {
  grid-column: 1 / -1;
}

.admin-biomarker-target-guidance textarea {
  min-height: 92px;
}

.admin-biomarker-target-remove {
  align-self: end;
  justify-self: start;
  min-height: 42px;
}

.admin-biomarker-content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-biomarker-secondary-button {
  background: transparent;
  color: var(--color-ink);
}

.admin-biomarker-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-biomarker-ai-note {
  color: var(--color-muted);
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.35;
}

.admin-cleanup-panel {
  display: grid;
  gap: 18px;
}

.admin-token-panel {
  display: grid;
  gap: 18px;
}

.admin-webhook-panel {
  display: grid;
  gap: 18px;
}

.admin-user-panel {
  display: grid;
  gap: 18px;
}

.admin-cleanup-panel h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-cleanup-panel p {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 900px;
}

.admin-token-panel h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-webhook-panel h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-user-panel h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-token-panel p {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 900px;
}

.admin-webhook-panel p {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 900px;
}

.admin-user-panel p {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 900px;
}

.admin-user-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.admin-user-directory {
  display: grid;
  gap: 14px;
}

.admin-user-directory-tools {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 1fr) 120px auto;
}

.admin-user-page-size select {
  min-height: 46px;
}

.admin-user-table {
  min-width: 1180px;
}

.admin-user-table[data-partner-admin-compact="true"] {
  min-width: 900px;
}

.admin-report-file-table.admin-user-table th:nth-child(1),
.admin-report-file-table.admin-user-table td:nth-child(1) {
  width: 16%;
}

.admin-report-file-table.admin-user-table th:nth-child(2),
.admin-report-file-table.admin-user-table td:nth-child(2) {
  width: 22%;
}

.admin-report-file-table.admin-user-table td.admin-user-email-cell {
  min-width: 0;
  white-space: normal;
}

.admin-user-email-cell .admin-table-stack strong,
.admin-user-email-cell .admin-table-stack span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-report-file-table.admin-user-table th:nth-child(3),
.admin-report-file-table.admin-user-table td:nth-child(3) {
  width: 150px;
}

.admin-report-file-table.admin-user-table th:nth-child(4),
.admin-report-file-table.admin-user-table td:nth-child(4) {
  width: 105px;
}

.admin-report-file-table.admin-user-table th:nth-child(5),
.admin-report-file-table.admin-user-table td:nth-child(5) {
  width: 16%;
  white-space: normal;
}

.admin-report-file-table.admin-user-table th:nth-child(6),
.admin-report-file-table.admin-user-table td:nth-child(6) {
  width: 110px;
}

.admin-report-file-table.admin-user-table th:nth-child(7),
.admin-report-file-table.admin-user-table td:nth-child(7) {
  width: 145px;
}

.admin-report-file-table.admin-user-table th:nth-child(8),
.admin-report-file-table.admin-user-table td:nth-child(8) {
  width: 170px;
}

.admin-report-file-table.admin-user-table th:nth-child(9),
.admin-report-file-table.admin-user-table td:nth-child(9) {
  width: 145px;
}

.admin-user-directory-row {
  cursor: pointer;
}

.admin-user-directory-row:hover {
  background: rgba(25, 26, 29, 0.035);
}

.admin-user-directory-row:focus-visible {
  outline: 2px solid var(--color-out);
  outline-offset: -2px;
}

.admin-user-partner-badge {
  background: rgba(25, 26, 29, 0.06);
  border: 1px solid rgba(25, 26, 29, 0.12);
  border-radius: 999px;
  color: var(--color-ink);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  max-width: 140px;
  padding: 7px 10px;
  white-space: normal;
}

.admin-user-partner-select {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  min-height: 38px;
  min-width: 0;
  padding: 0 10px;
  width: 100%;
}

.admin-user-role-badge {
  background: rgba(55, 87, 138, 0.1);
  border: 1px solid rgba(55, 87, 138, 0.16);
  border-radius: 999px;
  color: #37578a;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 7px 10px;
}

.admin-user-role-badge.is-admin {
  background: rgba(94, 70, 130, 0.12);
  border-color: rgba(94, 70, 130, 0.18);
  color: #5e4682;
}

.admin-user-role-badge.is-partner-admin {
  background: rgba(25, 102, 95, 0.11);
  border-color: rgba(25, 102, 95, 0.18);
  color: #19665f;
}

.admin-user-status-badge {
  background: rgba(37, 110, 82, 0.11);
  border: 1px solid rgba(37, 110, 82, 0.16);
  border-radius: 999px;
  color: #256e52;
  display: inline-flex;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 7px 10px;
}

.admin-user-status-badge.is-temporary-password {
  background: rgba(156, 112, 47, 0.12);
  border-color: rgba(156, 112, 47, 0.2);
  color: #835d24;
}

.admin-user-status-badge.is-suspended {
  background: rgba(160, 57, 57, 0.11);
  border-color: rgba(160, 57, 57, 0.18);
  color: #923333;
}

.admin-user-status-badge.is-muted {
  background: rgba(99, 104, 112, 0.1);
  border-color: rgba(99, 104, 112, 0.16);
  color: var(--color-muted);
}

.admin-user-status-detail {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 8px;
}

.admin-user-plan-label {
  color: var(--color-ink);
  display: block;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.admin-user-role-select,
.admin-user-plan-select,
.admin-plan-user-select {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  min-height: 38px;
  padding: 0 10px;
  width: 100%;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-user-credential-toggle {
  justify-content: flex-start;
}

.admin-user-credential-toggle span {
  letter-spacing: 0;
  text-transform: none;
}

.admin-user-action-button {
  font-size: 12px;
  min-height: 34px;
  padding: 0 10px;
}

.admin-user-pagination {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 12px;
  justify-content: space-between;
}

.admin-user-pagination > div {
  display: flex;
  gap: 8px;
}

.admin-user-pager-button {
  min-height: 38px;
  padding: 0 13px;
}

.admin-user-detail-page {
  align-content: start;
}

.admin-user-detail-page-hero {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.admin-user-detail-action-bar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 42px;
}

.admin-user-detail-action-bar:empty {
  display: none;
}

.admin-user-detail-action-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-user-detail-action-group.is-danger {
  justify-content: flex-end;
  margin-left: auto;
}

.admin-user-detail-action-bar .admin-user-action-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 1.15;
  min-height: 38px;
  text-align: center;
}

.admin-user-detail-action-bar .admin-user-action-button[data-active="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fffdf8;
}

.admin-user-detail-page-status {
  min-height: 20px;
}

.admin-user-detail-page-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.admin-user-detail-section {
  align-content: start;
  display: grid;
  gap: 16px;
}

.admin-user-detail-section-wide {
  grid-column: 1 / -1;
}

.admin-user-detail-section-header {
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 10px;
}

.admin-user-detail-section-header h2 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.admin-user-detail-form-grid.is-account-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-user-detail-empty {
  margin: 0;
}

.admin-user-detail-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 180;
}

.admin-user-detail-modal[hidden] {
  display: none !important;
}

.has-admin-user-detail-modal {
  overflow: hidden;
}

.admin-user-detail-backdrop {
  background: rgba(17, 18, 20, 0.72);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.admin-user-detail-sheet {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(17, 18, 20, 0.28);
  display: grid;
  gap: 16px;
  max-height: min(920px, calc(100vh - 48px));
  max-width: min(1120px, calc(100vw - 48px));
  overflow: auto;
  padding: 20px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.admin-user-detail-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-line);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-bottom: 14px;
}

.admin-user-detail-header h2 {
  color: var(--color-ink);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.1;
  margin: 0;
}

.admin-user-detail-header p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  margin: 6px 0 0;
}

.admin-user-detail-close,
.admin-user-detail-tabs button {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 38px;
  padding: 0 13px;
}

.admin-user-detail-close:hover,
.admin-user-detail-tabs button:hover {
  border-color: var(--color-out);
}

.admin-user-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-user-detail-tabs button[data-active="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.admin-user-detail-status {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  margin: 0;
  min-height: 18px;
}

.admin-user-detail-status[data-status="loading"] {
  color: #835d24;
}

.admin-user-detail-status[data-status="success"] {
  color: #256e52;
}

.admin-user-detail-status[data-status="error"] {
  color: #923333;
}

.admin-user-detail-body {
  display: grid;
  gap: 16px;
}

.admin-user-detail-form {
  display: grid;
  gap: 16px;
}

.admin-user-detail-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-user-detail-field {
  display: grid;
  gap: 8px;
}

.admin-user-detail-field.is-wide {
  grid-column: span 2;
}

.admin-user-detail-field span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-user-detail-field input,
.admin-user-detail-field select {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  min-height: 44px;
  min-width: 0;
  padding: 0 12px;
  width: 100%;
}

.admin-user-detail-field .admin-checkbox-row {
  min-height: 44px;
}

.admin-user-detail-field .admin-checkbox-row input[type="checkbox"] {
  accent-color: var(--color-ink);
  appearance: auto;
  flex: 0 0 auto;
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.admin-user-detail-field .admin-checkbox-row span {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.admin-user-detail-field input:disabled,
.admin-user-detail-field select:disabled {
  color: var(--color-muted);
  opacity: 0.72;
}

.admin-user-detail-summary {
  border: 1px solid var(--color-line);
  border-radius: 10px;
  display: grid;
  gap: 0;
  grid-template-columns: max-content minmax(180px, 1fr) max-content minmax(180px, 1fr);
  margin: 0;
  overflow: hidden;
}

.admin-user-detail-summary dt,
.admin-user-detail-summary dd {
  margin: 0;
  padding: 10px 12px;
}

.admin-user-detail-summary dt {
  background: rgba(25, 26, 29, 0.04);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  min-width: 116px;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-user-detail-summary dd {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-user-detail-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-user-detail-link {
  text-decoration: none;
}

.admin-user-detail-report-pane {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
}

.admin-user-detail-access-banner {
  background: rgba(96, 105, 117, 0.06);
  border: 1px solid color-mix(in srgb, var(--color-line) 70%, rgba(96, 105, 117, 0.28) 30%);
  border-radius: 10px;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 12px 13px;
}

.admin-user-detail-access-banner:empty {
  display: none;
}

.admin-user-detail-access-status {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  margin: 0;
}

.admin-user-detail-report-list,
.admin-user-detail-history {
  display: grid;
  gap: 10px;
}

.admin-user-detail-history-body {
  display: grid;
  gap: 12px;
}

.admin-user-detail-report-card,
.admin-user-detail-history-item {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  display: grid;
  gap: 9px;
  padding: 13px;
}

.admin-user-detail-report-card > div:first-child,
.admin-user-detail-history-item {
  min-width: 0;
}

.admin-user-detail-report-card strong,
.admin-user-detail-history-item strong,
.admin-user-detail-target-header strong {
  color: var(--color-ink);
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.admin-user-detail-report-card span,
.admin-user-detail-history-item span {
  color: var(--color-muted);
  display: block;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-user-detail-report-requires-action {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-user-detail-report-requires-action[data-requires-action="true"] {
  color: #923333;
}

.admin-user-detail-history-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.admin-user-detail-history-page-button {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  min-height: 36px;
  padding: 0 12px;
}

.admin-user-detail-history-page-button:hover:not(:disabled) {
  border-color: var(--color-out);
}

.admin-user-detail-history-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-user-detail-history-page-summary,
.admin-user-detail-history-status {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.admin-user-detail-history-status {
  margin: 0;
  min-height: 18px;
}

.admin-user-detail-report-counts {
  color: var(--color-ink) !important;
}

.admin-user-detail-targets {
  align-content: start;
  display: grid;
  gap: 12px;
}

.admin-user-detail-target-header {
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
}

@media (max-width: 980px) {
  .admin-user-detail-page-grid,
  .admin-user-detail-form-grid,
  .admin-user-detail-form-grid.is-account-grid,
  .admin-user-detail-summary,
  .admin-user-detail-report-pane {
    grid-template-columns: 1fr;
  }

  .admin-user-detail-field.is-wide {
    grid-column: auto;
  }

  .admin-user-detail-page-hero {
    align-items: stretch;
    display: grid;
  }

}

.admin-partner-panel {
  display: grid;
  gap: 24px;
}

.admin-partner-detail-page {
  align-content: start;
}

.admin-partner-detail-page-hero {
  align-items: flex-end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.admin-partner-detail-action-bar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 42px;
}

.admin-partner-detail-action-bar:empty {
  display: none;
}

.admin-partner-detail-page-status {
  min-height: 20px;
}

.admin-partner-detail-page-grid {
  display: grid;
  gap: 18px;
}

.admin-partner-detail-section {
  display: grid;
  gap: 16px;
}

.admin-partner-detail-section-header {
  border-bottom: 1px solid var(--color-line);
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
}

.admin-partner-detail-section-header h2 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
  margin: 0;
}

.admin-partner-detail-section-header p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  max-width: 70ch;
}

.admin-partner-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}

.admin-partner-toolbar {
  margin-top: 4px;
}

.admin-partner-directory {
  display: grid;
  gap: 12px;
}

.admin-partner-list {
  display: grid;
  gap: 10px;
}

.admin-partner-table .admin-partner-directory-row {
  cursor: pointer;
}

.admin-partner-table .admin-partner-directory-row[data-selected="true"] {
  background: rgba(140, 106, 79, 0.08);
}

.admin-partner-table td {
  vertical-align: middle;
}

.admin-partner-name-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-partner-name-cell strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-partner-name-cell span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.admin-partner-card {
  align-items: start;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 14px;
  text-align: left;
}

.admin-partner-card[data-selected="true"] {
  border-color: rgba(25, 26, 29, 0.38);
  box-shadow: 0 12px 28px rgba(44, 45, 51, 0.08);
}

.admin-partner-swatch {
  border: 1px solid rgba(25, 26, 29, 0.12);
  border-radius: 999px;
  display: block;
  height: 34px;
  width: 34px;
}

.admin-partner-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-partner-card-copy strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-partner-card-copy span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 2;
}

.admin-partner-form {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.admin-partner-form-head {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.admin-partner-form h3 {
  color: var(--color-ink);
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
}

.admin-partner-form [data-admin-partner-admin-card] {
  margin-top: 4px;
}

.admin-partner-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.admin-partner-plan-section {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.admin-partner-admin-section {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.admin-partner-plan-section-head {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.admin-partner-admin-section-head {
  align-items: start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.admin-partner-plan-section-head h4 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  margin: 0;
}

.admin-partner-plan-section-head p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 58ch;
}

.admin-partner-admin-section-head h4 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  margin: 0;
}

.admin-partner-admin-section-head p {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 58ch;
}

.admin-partner-plan-list {
  display: grid;
  gap: 10px;
}

.admin-partner-plan-option {
  background: rgba(255, 253, 248, 0.88);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
}

.admin-partner-plan-option .admin-checkbox-row {
  margin: 0;
}

.admin-partner-plan-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-partner-admin-card {
  gap: 12px;
}

.admin-partner-admin-card h4 {
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  margin: 0;
}

.admin-partner-admin-list {
  display: grid;
  gap: 10px;
}

.admin-partner-admin-row {
  align-items: start;
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  text-align: left;
}

.admin-partner-admin-row strong {
  color: var(--color-ink);
  display: block;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

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

.admin-user-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 22px;
  display: grid;
  gap: 14px;
  padding: 18px;
}

.admin-user-create-card {
  background: linear-gradient(180deg, #fffdf8 0%, #fbf4e8 100%);
  border-color: rgba(92, 86, 79, 0.28);
  box-shadow: 0 18px 42px rgba(44, 45, 51, 0.08);
  grid-column: 1 / -1;
}

.admin-user-card h3 {
  color: var(--color-ink);
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

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

.admin-user-phone-field {
  align-self: start;
  display: grid;
  gap: 10px;
}

.admin-user-credentials textarea {
  font-family: var(--font-mono);
}

.admin-cleanup-controls {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 0.8fr) minmax(220px, 0.8fr) minmax(260px, 1fr);
}

.admin-token-grid {
  display: grid;
  gap: 12px 16px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.admin-token-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-token-field-full {
  grid-column: 1 / -1;
}

.admin-token-field span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-token-field input,
.admin-token-field select,
.admin-token-field textarea {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  min-height: 52px;
  min-width: 0;
  padding: 0 16px;
  width: 100%;
}

.admin-token-field textarea {
  min-height: 180px;
  padding: 14px 16px;
  resize: vertical;
}

.admin-token-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-token-field[hidden],
.admin-checkbox-row[hidden],
.admin-token-field-help[hidden] {
  display: none !important;
}

.admin-doctor-profile-fields {
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 14px;
}

.admin-doctor-profile-fields[hidden] {
  display: none !important;
}

.admin-doctor-profile-fields legend {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 850;
  padding: 0 6px;
}

.admin-user-card[data-admin-user-create-card][hidden],
.admin-user-grid[data-admin-staff-create-card][hidden],
.admin-user-grid[data-platform-staff-create-card][hidden] {
  display: none !important;
}

.admin-token-output {
  display: grid;
  gap: 14px;
}

.admin-signup-code-tool {
  background: rgba(25, 26, 29, 0.025);
}

.admin-signup-code-result {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  padding: 12px;
}

.admin-signup-code-result.is-link-only {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-signup-code-result[hidden] {
  display: none !important;
}

.admin-signup-code-result span {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 850;
}

.admin-signup-code-result input {
  background: rgba(25, 26, 29, 0.035);
  border: 1px solid rgba(25, 26, 29, 0.08);
  border-radius: 10px;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  min-width: 0;
  padding: 10px 12px;
}

.admin-plans-page {
  max-width: min(1500px, calc(100vw - 128px));
}

.admin-plans-panel {
  display: grid;
  gap: 18px;
}

.admin-plans-panel h2 {
  color: var(--color-ink);
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.admin-plans-panel p {
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 900px;
}

.admin-plan-toolbar {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr);
}

.admin-plan-search {
  max-width: 430px;
}

.admin-plan-list {
  display: grid;
  gap: 10px;
}

.admin-plan-list-item {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  overflow: hidden;
}

.admin-plan-list-item[data-expanded="true"] {
  border-color: rgba(25, 26, 29, 0.2);
}

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

.admin-plan-summary-main {
  display: grid;
  gap: 3px;
}

.admin-plan-summary h2 {
  font-size: 20px;
}

.admin-plan-feature-summary {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  margin: 0;
}

.admin-plan-summary-meta {
  align-items: end;
  display: grid;
  gap: 7px;
  justify-items: end;
}

.admin-plan-summary-actions {
  display: grid;
  gap: 8px;
}

.admin-plan-price {
  background: rgba(25, 26, 29, 0.06);
  border: 1px solid rgba(25, 26, 29, 0.12);
  border-radius: 999px;
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 850;
  padding: 8px 10px;
  white-space: nowrap;
}

.admin-plan-feature-count {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.admin-plan-open-button {
  min-width: 78px;
}

.admin-plan-details {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 16px;
  padding: 16px;
}

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

.admin-partner-plan-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.admin-partner-plan-form .admin-token-actions {
  margin: 0;
}

.admin-partner-plan-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
}

.admin-plan-owner {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.admin-plan-feature-section {
  display: grid;
  gap: 10px;
}

.admin-plan-feature-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}

.admin-plan-feature-heading strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 850;
}

.admin-plan-feature-heading span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-plan-feature-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.admin-plan-feature {
  align-items: center;
  background: rgba(25, 26, 29, 0.035);
  border: 1px solid rgba(25, 26, 29, 0.08);
  border-radius: 12px;
  color: var(--color-ink);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
}

.admin-plan-feature input {
  accent-color: var(--color-ink);
  height: 16px;
  width: 16px;
}

.admin-shopify-page {
  gap: 1.4rem;
}

.admin-shopify-status {
  padding: 0.85rem 1rem;
  color: var(--color-muted);
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 800;
}

.admin-shopify-status[data-status="success"] {
  color: #277450;
}

.admin-shopify-status[data-status="error"] {
  color: #a93624;
}

.admin-shopify-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.admin-shopify-panel {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.admin-shopify-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.admin-shopify-search {
  margin: 0;
}

.admin-shopify-product-list {
  display: grid;
  gap: 0.7rem;
}

.admin-shopify-product {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.admin-shopify-product[data-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px rgba(25, 26, 29, 0.12);
}

.admin-shopify-product-thumbnail {
  width: 58px;
  height: 58px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-panel-soft);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}

.admin-shopify-product-thumbnail-placeholder {
  background:
    linear-gradient(135deg, rgba(25, 26, 29, 0.08), rgba(25, 26, 29, 0.02)),
    var(--color-panel-soft);
}

.admin-shopify-product-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.admin-shopify-product-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: 1rem;
}

.admin-shopify-product-main span,
.admin-shopify-product-details span {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-shopify-product-details {
  display: grid;
  gap: 0.2rem;
  justify-items: end;
  white-space: nowrap;
}

.admin-shopify-form {
  display: grid;
  gap: 0.9rem;
}

.admin-shopify-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-shopify-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-shopify-open-link {
  text-decoration: none;
}

.admin-pathology-page {
  max-width: min(1840px, calc(100vw - 128px));
}

.clinician-patient-page {
  max-width: min(1840px, calc(100vw - 128px));
}

.admin-pathology-status {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.45;
  padding: 0.85rem 1rem;
}

.admin-pathology-status[data-status="success"] {
  color: #277450;
}

.admin-pathology-status[data-status="error"] {
  color: #a93624;
}

.admin-pathology-workbench {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
}

.clinician-patient-workbench {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.clinician-patient-directory-panel {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.clinician-patient-panel-header {
  align-items: start;
}

.clinician-patient-table {
  min-width: 1180px;
}

.admin-report-file-table.clinician-patient-table th:nth-child(1),
.admin-report-file-table.clinician-patient-table td:nth-child(1) {
  width: 18%;
}

.admin-report-file-table.clinician-patient-table th:nth-child(2),
.admin-report-file-table.clinician-patient-table td:nth-child(2) {
  width: 23%;
}

.admin-report-file-table.clinician-patient-table th:nth-child(3),
.admin-report-file-table.clinician-patient-table td:nth-child(3) {
  width: 15%;
}

.admin-report-file-table.clinician-patient-table th:nth-child(4),
.admin-report-file-table.clinician-patient-table td:nth-child(4) {
  width: 120px;
}

.admin-report-file-table.clinician-patient-table th:nth-child(5),
.admin-report-file-table.clinician-patient-table td:nth-child(5) {
  width: 150px;
}

.admin-report-file-table.clinician-patient-table th:nth-child(6),
.admin-report-file-table.clinician-patient-table td:nth-child(6) {
  width: 22%;
  white-space: normal;
}

.clinician-patient-directory-row[data-selected="true"] {
  background: rgba(64, 110, 132, 0.08);
  box-shadow: inset 3px 0 0 rgba(64, 110, 132, 0.72);
}

.clinician-patient-count,
.clinician-patient-identifier {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.clinician-patient-summary-list {
  display: grid;
  gap: 0.65rem 1rem;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  margin: 0;
}

.clinician-patient-summary-list dt {
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}

.clinician-patient-summary-list dd {
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 750;
  margin: 0;
  overflow-wrap: anywhere;
}

.clinician-patient-detail-summary {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 1rem;
}

.clinician-patient-actions {
  display: grid;
  gap: 0.75rem;
}

.clinician-patient-action {
  align-items: center;
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  display: grid;
  font: inherit;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 0.9rem;
  text-align: left;
  text-decoration: none;
}

.clinician-patient-action:not(:disabled):hover {
  border-color: rgba(64, 110, 132, 0.45);
}

.clinician-patient-action:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.clinician-patient-action span:first-child {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.clinician-patient-action strong {
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 850;
}

.clinician-patient-action small {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.clinician-report-review-section {
  display: grid;
  gap: 1rem;
}

.clinician-report-review-intro {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.clinician-report-review-reason,
.clinician-report-review-comments {
  max-width: none;
}

.clinician-report-review-reason textarea,
.clinician-report-review-comments textarea {
  min-height: 76px;
  resize: vertical;
}

.clinician-report-review-list {
  display: grid;
  gap: 0.75rem;
}

.clinician-report-review-row {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.9fr) auto;
  padding: 1rem;
}

.clinician-report-review-row-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.clinician-report-review-row-main h3 {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 850;
  margin: 0;
}

.clinician-report-review-row-main p {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.clinician-report-review-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.clinician-report-review-count {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

.clinician-report-review-detail {
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.clinician-report-review-detail-header {
  display: grid;
  gap: 0.25rem;
}

.clinician-report-review-detail-header h3 {
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 850;
  margin: 0;
}

.clinician-report-review-detail-header p {
  color: var(--color-muted);
  font-size: 0.84rem;
  font-weight: 700;
  margin: 0;
}

.clinician-report-review-table {
  border-collapse: collapse;
  font-size: 0.84rem;
  width: 100%;
}

.clinician-report-review-table th,
.clinician-report-review-table td {
  border-bottom: 1px solid var(--color-line);
  padding: 0.65rem 0.55rem;
  text-align: left;
  vertical-align: top;
}

.clinician-report-review-table th {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.clinician-report-review-table td {
  color: var(--color-ink);
  font-weight: 700;
}

.clinician-report-review-table td[data-result-group="out_of_range"] {
  color: #9f3a2c;
}

.clinician-report-review-table td[data-result-group="in_range"] {
  color: #2f6b4f;
}

@media (max-width: 860px) {
  .clinician-report-review-row {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .clinician-report-review-table {
    display: block;
    overflow-x: auto;
  }
}

.admin-pathology-panel {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.admin-pathology-form {
  display: grid;
  gap: 1rem;
}

.admin-pathology-field-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-pathology-wide-field {
  grid-column: 1 / -1;
}

.clinician-pathology-patient-section {
  display: grid;
  gap: 0.9rem;
}

.clinician-pathology-readonly-grid input[readonly] {
  background: rgba(255, 253, 248, 0.72);
  color: var(--color-ink);
  cursor: default;
}

.admin-pathology-template-list {
  display: grid;
  gap: 0.7rem;
}

.admin-pathology-template-option {
  align-items: start;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.8rem;
}

.admin-pathology-template-option:has(input:checked) {
  border-color: rgba(64, 110, 132, 0.55);
  box-shadow: 0 0 0 2px rgba(64, 110, 132, 0.12);
}

.admin-pathology-template-option input {
  appearance: auto;
  height: 18px;
  margin: 3px 0 0;
  width: 18px;
}

.admin-pathology-template-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.admin-pathology-template-body strong {
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.25;
}

.admin-pathology-template-body small,
.admin-pathology-template-tests {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-pathology-template-tests {
  color: var(--color-ink-soft);
}

.customer-pathology-collection-list {
  display: grid;
  gap: 0.7rem;
}

.customer-pathology-collection-option {
  align-items: start;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.8rem;
}

.customer-pathology-collection-option:has(input:checked) {
  border-color: rgba(64, 110, 132, 0.55);
  box-shadow: 0 0 0 2px rgba(64, 110, 132, 0.12);
}

.customer-pathology-collection-option input {
  appearance: auto;
  height: 18px;
  margin: 3px 0 0;
  width: 18px;
}

.customer-pathology-collection-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.customer-pathology-collection-body strong {
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.25;
}

.customer-pathology-collection-body small {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-pathology-template-admin-list,
.admin-pathology-template-test-rows {
  display: grid;
  gap: 0.7rem;
}

.admin-pathology-template-admin-card {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.admin-pathology-template-admin-card[data-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px rgba(25, 26, 29, 0.12);
}

.admin-pathology-template-admin-card[data-active="false"] {
  opacity: 0.68;
}

.admin-pathology-template-admin-main {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.admin-pathology-template-admin-main strong {
  color: var(--color-ink);
  font-size: 0.98rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-pathology-template-admin-main span,
.admin-pathology-template-admin-main small {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-pathology-template-active-row {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  display: flex;
  font-size: 0.86rem;
  font-weight: 850;
  gap: 0.55rem;
  min-height: 45px;
  padding: 0.75rem 0.85rem;
}

.admin-pathology-template-active-row input {
  accent-color: var(--color-ink);
  height: 17px;
  width: 17px;
}

.admin-pathology-template-tests-editor {
  display: grid;
  gap: 0.75rem;
}

.admin-pathology-template-tests-editor h3 {
  color: var(--color-ink);
  font-size: 1rem;
  margin: 0;
}

.admin-pathology-template-test-headings,
.admin-pathology-template-test-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(88px, 0.75fr) minmax(180px, 1.45fr) minmax(72px, 0.45fr) minmax(64px, 0.38fr) auto;
  align-items: center;
}

.admin-pathology-template-test-headings {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-pathology-template-test-row {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.65rem;
}

.admin-pathology-template-test-row input {
  appearance: none;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  min-width: 0;
  padding: 0.62rem 0.68rem;
  width: 100%;
}

.admin-pathology-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-pathology-output-panel {
  min-height: 720px;
}

.admin-pathology-output-meta {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-pathology-output {
  appearance: none;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f7f3eb;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.55;
  min-height: 640px;
  padding: 1rem;
  resize: vertical;
  white-space: pre;
  width: 100%;
}

.clinician-pathology-review-panel,
.customer-pathology-page {
  align-content: start;
}

.customer-pathology-page {
  display: grid;
  gap: 1.35rem;
}

.customer-pathology-hero {
  margin: 0;
}

.customer-pathology-page .admin-pathology-status {
  margin: 0;
}

.clinician-pathology-active-review {
  background: #f6fbf8;
  border: 1px solid rgba(39, 116, 80, 0.22);
  border-radius: 8px;
  color: #277450;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.45;
  padding: 0.75rem 0.85rem;
}

.clinician-pathology-review-list,
.customer-pathology-request-list {
  display: grid;
  gap: 0.95rem;
}

.clinician-pathology-review-card,
.customer-pathology-request-card {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
}

.clinician-pathology-review-card {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.clinician-pathology-review-card[data-selected="true"] {
  border-color: rgba(39, 116, 80, 0.45);
  box-shadow: 0 0 0 2px rgba(39, 116, 80, 0.08);
}

.clinician-pathology-review-main,
.customer-pathology-request-card {
  min-width: 0;
}

.clinician-pathology-review-main,
.customer-pathology-request-card {
  display: grid;
  gap: 0.35rem;
}

.clinician-pathology-review-main strong,
.customer-pathology-request-card strong {
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 850;
}

.clinician-pathology-review-main span,
.clinician-pathology-review-main small,
.customer-pathology-request-card span,
.customer-pathology-request-card small {
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.clinician-pathology-review-note,
.customer-pathology-request-card p {
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.customer-pathology-review-note {
  background: #f6fbf8;
  border: 1px solid rgba(39, 116, 80, 0.16);
  border-radius: 8px;
  color: #277450;
  padding: 0.6rem 0.7rem;
}

.customer-pathology-request-card[data-status="generated"] {
  border-color: rgba(39, 116, 80, 0.26);
}

.customer-pathology-request-card[data-status="rejected"] {
  border-color: rgba(169, 54, 36, 0.26);
}

.customer-pathology-workbench {
  align-items: start;
  gap: 1.35rem;
}

.admin-recipes-page {
  gap: 1.4rem;
}

.admin-recipes-status {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.85rem 1rem;
}

.admin-recipes-status[data-status="success"] {
  color: #277450;
}

.admin-recipes-status[data-status="error"] {
  color: #a93624;
}

.admin-recipe-curator-profile {
  display: grid;
  gap: 1rem;
}

.admin-recipe-curator-profile[hidden] {
  display: none;
}

.admin-recipe-curator-profile-form {
  display: grid;
  gap: 0.9rem;
}

.admin-recipe-curator-profile-grid {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-recipe-curator-active {
  align-self: center;
  margin: 0;
}

.admin-recipes-workbench {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
}

.admin-recipes-panel {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.admin-recipes-toolbar {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.35fr) auto;
}

.admin-recipes-search,
.admin-recipes-status-filter {
  margin: 0;
}

.admin-recipes-mode-row,
.admin-recipes-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-recipes-filter-chip {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  min-height: 30px;
  padding: 0.42rem 0.62rem;
}

.admin-recipes-filter-chip[data-active="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fffdf8;
}

.admin-recipes-list {
  display: grid;
  gap: 0.7rem;
}

.admin-recipe-card {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.admin-recipe-card[data-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px rgba(25, 26, 29, 0.12);
}

.admin-recipe-thumb {
  aspect-ratio: 1;
  background: var(--color-panel-soft);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  height: 70px;
  object-fit: cover;
  width: 70px;
}

.admin-recipe-thumb-placeholder {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 0.95rem;
  font-weight: 900;
  justify-content: center;
}

.admin-recipe-card-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-recipe-card-main strong {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-recipe-card-main span {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-recipe-card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.admin-recipes-pagination {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 0.82rem;
  font-weight: 850;
  gap: 0.6rem;
  justify-content: flex-end;
}

.admin-recipe-rating-summary {
  color: #8a6727 !important;
}

.admin-recipe-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-recipe-chip-row span {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  color: #39473c;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  padding: 0.32rem 0.45rem;
}

.admin-recipe-form {
  display: grid;
  gap: 0.9rem;
}

.admin-recipe-field-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-recipe-macro-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.admin-recipes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-recipe-match-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-recipe-match-summary {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.admin-recipe-match-results {
  display: grid;
  gap: 0.55rem;
}

.admin-recipe-match-results[hidden] {
  display: none;
}

.admin-recipe-match-row {
  align-items: start;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  padding: 0.82rem;
}

.admin-recipe-match-row[data-status="needs_review"] {
  border-color: rgba(169, 54, 36, 0.42);
}

.admin-recipe-match-row[data-status="matched"] {
  border-color: rgba(39, 116, 80, 0.3);
}

.admin-recipe-match-main,
.admin-recipe-match-product > div {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.admin-recipe-match-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-recipe-match-title strong,
.admin-recipe-match-product strong {
  color: var(--color-ink);
  font-size: 0.92rem;
  line-height: 1.25;
}

.admin-recipe-match-meta,
.admin-recipe-match-product span,
.admin-recipe-match-substitutes {
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-recipe-match-badge {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  color: #39473c;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0.32rem 0.45rem;
  text-transform: uppercase;
}

.admin-recipe-match-row[data-status="needs_review"] .admin-recipe-match-badge {
  background: rgba(169, 54, 36, 0.12);
  border-color: rgba(169, 54, 36, 0.24);
  color: #8f2c1e;
}

.admin-ingredient-coverage-section {
  display: grid;
  gap: 1rem;
}

.admin-ingredient-coverage-summary {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.admin-ingredient-stat {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.85rem;
}

.admin-ingredient-stat strong {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1;
}

.admin-ingredient-stat span {
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
  text-transform: uppercase;
}

.admin-ingredient-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.25fr) minmax(150px, 0.25fr) minmax(150px, 0.25fr);
}

.admin-ingredient-status {
  margin: 0;
}

.admin-ingredient-list {
  display: grid;
  gap: 0.65rem;
}

.admin-ingredient-card {
  align-items: start;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.6fr) auto;
  padding: 0.9rem;
}

.admin-ingredient-card[data-match-status="matched"] {
  border-color: rgba(39, 116, 80, 0.3);
}

.admin-ingredient-card[data-match-status="needs_review"] {
  border-color: rgba(169, 54, 36, 0.42);
}

.admin-ingredient-card[data-review-status="pantry"],
.admin-ingredient-card[data-review-status="ignored"],
.admin-ingredient-card[data-review-status="canonicalized"] {
  border-color: rgba(45, 88, 129, 0.28);
}

.admin-ingredient-main,
.admin-ingredient-product {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.admin-ingredient-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.admin-ingredient-title strong,
.admin-ingredient-product strong {
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-ingredient-query {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-ingredient-query input {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.82rem;
  min-height: 36px;
  padding: 0.55rem 0.65rem;
}

.admin-ingredient-actions {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.admin-ingredient-mismatch-summary {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.admin-ingredient-mismatch-header,
.admin-ingredient-mismatch-group,
.admin-ingredient-ai-assessment {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-ingredient-mismatch-header strong {
  color: var(--color-ink);
  font-size: 0.95rem;
}

.admin-ingredient-mismatch-header span {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.admin-ingredient-mismatch-list {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-ingredient-mismatch-group {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.75rem;
}

.admin-ingredient-ai-assessment {
  border-top: 1px solid var(--color-line);
  padding-top: 0.45rem;
}

.admin-ingredient-ai-assessment[data-ai-status="mismatch"] .admin-recipe-match-badge,
.admin-ingredient-ai-assessment[data-ai-status="no_product"] .admin-recipe-match-badge {
  background: rgba(169, 54, 36, 0.12);
  border-color: rgba(169, 54, 36, 0.24);
  color: #8f2c1e;
}

.admin-ingredient-ai-assessment[data-ai-status="good_match"] .admin-recipe-match-badge {
  background: rgba(39, 116, 80, 0.12);
  border-color: rgba(39, 116, 80, 0.24);
  color: #277450;
}

.admin-recipes-partner-section {
  display: grid;
  gap: 1rem;
}

.admin-recipe-partner-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
}

.admin-recipe-partner-list {
  display: grid;
  gap: 0.65rem;
}

.admin-recipe-partner-card {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.admin-recipe-partner-card[data-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px rgba(25, 26, 29, 0.12);
}

.admin-recipe-partner-avatar {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-panel-soft);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-muted);
  display: flex;
  font-size: 0.82rem;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  overflow: hidden;
  width: 54px;
}

.admin-recipe-partner-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.admin-recipe-partner-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.admin-recipe-partner-main strong {
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-recipe-partner-main span {
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: capitalize;
}

.admin-recipe-partner-form {
  display: grid;
  gap: 0.9rem;
}

.admin-token-summary {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.admin-cleanup-search {
  display: grid;
  gap: 8px;
}

.admin-cleanup-search span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-cleanup-search input {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 16px;
  color: var(--color-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  min-height: 52px;
  padding: 0 16px;
}

.admin-cleanup-selected {
  align-self: center;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-cleanup-data-types {
  border: 1px solid var(--color-line);
  border-radius: 16px;
  display: grid;
  gap: 13px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px 16px;
}

.admin-cleanup-data-types legend {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  padding: 0 6px;
  text-transform: uppercase;
}

.admin-cleanup-data-grid {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.admin-cleanup-type-option {
  align-items: center;
  color: var(--color-ink);
  display: flex;
  font-size: 14px;
  font-weight: 800;
  gap: 10px;
  line-height: 1.35;
}

.admin-cleanup-type-option input {
  accent-color: var(--color-ink);
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.admin-cleanup-selection-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-cleanup-selection-actions span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.admin-cleanup-secondary-button {
  min-height: 42px;
}

.admin-cleanup-action-row {
  grid-column: 1 / -1;
}

.admin-review-tools {
  align-items: end;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 14px;
  padding-top: 18px;
}

.admin-import-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  grid-column: 1 / -1;
}

.admin-import-bulk-actions .document-full-text-button,
.admin-import-bulk-actions .document-parse-button {
  justify-self: auto;
}

.admin-import-files-panel {
  display: grid;
  gap: 20px;
}

.admin-report-file-table-wrap {
  border: 1px solid rgba(229, 222, 212, 0.95);
  border-radius: 24px;
  overflow-x: auto;
}

.admin-report-file-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.admin-report-file-table th,
.admin-report-file-table td {
  border-bottom: 1px solid var(--color-line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.admin-report-file-table th:nth-child(1),
.admin-report-file-table td:nth-child(1) {
  width: 48px;
}

.admin-report-file-table th:nth-child(2),
.admin-report-file-table td:nth-child(2) {
  width: 18%;
}

.admin-report-file-table td.admin-file-name-cell {
  min-width: 0;
}

.admin-report-file-table th:nth-child(3),
.admin-report-file-table td:nth-child(3) {
  width: 170px;
}

.admin-report-file-table th:nth-child(3),
.admin-report-file-table td.admin-report-date-cell {
  white-space: nowrap;
}

.admin-report-file-table th:nth-child(4),
.admin-report-file-table td:nth-child(4),
.admin-report-file-table th:nth-child(5),
.admin-report-file-table td:nth-child(5) {
  width: 15%;
}

.admin-report-file-table th:nth-child(6),
.admin-report-file-table td:nth-child(6) {
  width: 22%;
}

.admin-report-file-table th:nth-child(7),
.admin-report-file-table td:nth-child(7) {
  width: 128px;
}

.admin-report-file-table th:nth-child(8),
.admin-report-file-table td:nth-child(8) {
  width: 104px;
}

.admin-report-file-table th:nth-child(9),
.admin-report-file-table td:nth-child(9) {
  width: 135px;
}

.admin-review-requires-action {
  color: var(--color-muted);
  display: block;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.admin-review-requires-action[data-requires-action="true"] {
  color: #923333;
}

.admin-report-file-table.admin-webhook-table th:nth-child(1),
.admin-report-file-table.admin-webhook-table td:nth-child(1) {
  width: 18%;
}

.admin-report-file-table.admin-webhook-table th:nth-child(2),
.admin-report-file-table.admin-webhook-table td:nth-child(2) {
  width: 15%;
}

.admin-report-file-table.admin-webhook-table th:nth-child(3),
.admin-report-file-table.admin-webhook-table td:nth-child(3) {
  width: 25%;
}

.admin-report-file-table.admin-webhook-table th:nth-child(4),
.admin-report-file-table.admin-webhook-table td:nth-child(4) {
  width: 90px;
}

.admin-report-file-table.admin-webhook-table th:nth-child(5),
.admin-report-file-table.admin-webhook-table td:nth-child(5) {
  width: 22%;
}

.admin-report-file-table.admin-webhook-table th:nth-child(6),
.admin-report-file-table.admin-webhook-table td:nth-child(6) {
  width: 120px;
}

.admin-report-file-table th {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sort-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.admin-sort-button[data-active="true"] {
  color: var(--color-clay-dark);
}

.admin-sort-button:hover {
  color: var(--color-ink);
}

.admin-sort-button [data-admin-sort-label] {
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 4px;
  text-transform: none;
}

.admin-report-file-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-status-text {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-status-stack {
  display: grid;
  gap: 4px;
}

.admin-status-warning {
  color: var(--status-out-of-range);
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.35;
}

.admin-status-email {
  color: var(--color-clay-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-status-email[hidden] {
  display: none;
}

.admin-status-email::before {
  content: "Sent: ";
  color: var(--color-muted);
  font-weight: 700;
}

.admin-status-warning-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.admin-status-warning-toggle:hover {
  color: var(--color-clay-dark);
}

.admin-status-warning-toggle[aria-expanded="true"] {
  color: var(--color-clay-dark);
}

.admin-report-file-row.is-linked .admin-status-text {
  color: var(--status-in-range);
}

.admin-report-file-row.is-quarantined .admin-status-text {
  color: var(--color-clay);
}

.admin-report-file-row.is-failed .admin-status-text {
  color: var(--status-out-of-range);
}

.admin-report-file-row.is-deleted .admin-status-text {
  color: var(--status-other);
}

.admin-table-stack {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-table-stack strong {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.admin-file-name-cell .admin-table-stack strong,
.admin-file-name-cell .admin-table-stack span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-stack span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-report-warning-row td {
  background: rgba(176, 113, 81, 0.06);
}

.admin-parse-warning-panel {
  display: grid;
  gap: 10px;
  padding: 8px 0 2px;
}

.admin-parse-warning-copy {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
}

.admin-parse-warning-details[hidden] {
  display: none;
}

.admin-unmatched-card-list {
  display: grid;
  gap: 12px;
}

.admin-unmatched-card {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid rgba(38, 43, 48, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  padding: 12px;
}

.admin-unmatched-panel {
  align-content: start;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-unmatched-panel + .admin-unmatched-panel {
  border-top: 1px solid rgba(38, 43, 48, 0.08);
  padding-top: 12px;
}

.admin-unmatched-panel-heading {
  display: grid;
  gap: 3px;
}

.admin-unmatched-panel-heading strong {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.admin-unmatched-panel-heading span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.admin-unmatched-section-label {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-unmatched-detail {
  display: grid;
  gap: 7px;
}

.admin-unmatched-detail + .admin-unmatched-section-label {
  margin-top: 4px;
}

.admin-unmatched-detail strong {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
}

.admin-unmatched-meta {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-unmatched-mapper {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.admin-unmatched-search-tools {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(180px, 1fr);
}

.admin-ai-suggest-button {
  background: rgba(25, 26, 29, 0.06);
  white-space: nowrap;
}

.admin-unmatched-mapper input,
.admin-unmatched-select {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(38, 43, 48, 0.14);
  border-radius: 8px;
  color: var(--color-ink);
  font: inherit;
  min-width: 0;
  padding: 10px 12px;
  width: 100%;
}

.admin-unmatched-select {
  min-height: 42px;
}

.admin-unmatched-category {
  display: grid;
  gap: 6px;
}

.admin-unmatched-category span {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-unmatched-selected,
.admin-unmatched-confidence {
  margin: 0;
}

.admin-unmatched-actions {
  align-content: start;
  border-top: 1px solid rgba(38, 43, 48, 0.08);
  display: grid;
  gap: 10px 14px;
  grid-template-columns: minmax(240px, 1fr) auto;
  min-width: 0;
  padding-top: 12px;
}

.admin-unmatched-actions .document-parse-button {
  align-self: end;
  justify-self: end;
  text-align: center;
}

.admin-unmatched-actions .admin-unmatched-panel-heading {
  grid-column: 1 / -1;
}

.admin-unmatched-persist {
  align-items: flex-start;
  color: var(--color-muted);
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.admin-unmatched-persist input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.admin-unmatched-persist > span {
  display: grid;
  gap: 2px;
}

.admin-unmatched-persist small {
  color: var(--color-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.admin-unmatched-row-raw {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(38, 43, 48, 0.08);
  border-radius: 8px;
  color: var(--color-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
  max-height: 88px;
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  white-space: pre-wrap;
}

@media (max-width: 620px) {
  .wearable-day-panel .panel-header {
    align-items: stretch;
  }

  .wearable-day-control {
    width: 100%;
  }

  .wearable-timeline-card-header {
    align-items: stretch;
    flex-direction: column;
  }

  .wearable-timeline-card-header > span {
    width: fit-content;
  }

  .wearable-activity-card {
    grid-template-columns: 1fr;
  }

  .wearable-provider-pill {
    justify-self: start;
  }

  .wearable-focus-header {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .wearable-focus-controls {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wearable-focus-controls::-webkit-scrollbar {
    display: none;
  }

  .wearable-focus-controls button {
    flex: 0 0 auto;
  }

  .wearable-sleep-overview,
  .wearable-sleep-detail-grid {
    grid-template-columns: 1fr;
  }

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

  .wearable-sleep-stage-row {
    grid-template-columns: 82px minmax(84px, 1fr) 56px 36px;
  }

  .wearable-sleep-trend {
    gap: 6px;
  }

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

  .wearable-route-heading {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr;
  }

  .wearable-route-legend {
    white-space: normal;
  }

  .wearable-route-map {
    min-height: 190px;
  }

  .wearable-route-real-map {
    height: 260px;
    min-height: 220px;
  }

  .wearable-analysis-card {
    padding: 12px;
  }

  .wearable-analysis-legend span {
    min-width: 100%;
  }

  .wearable-analysis-plot {
    min-height: 260px;
  }

  .wearable-analysis-svg {
    height: 260px;
  }

  .wearable-analysis-time-axis {
    padding: 0 44px;
  }

  .wearable-analysis-y-axis {
    font-size: 10px;
  }

  .wearable-split-panel-head {
    display: grid;
  }

  .wearable-split-panel-head span {
    text-align: left;
  }

  .wearable-split-distance-axis,
  .wearable-split-chart-main,
  .wearable-split-secondary-row {
    grid-template-columns: 88px minmax(calc(var(--split-count, 1) * 58px), 1fr);
    min-width: min(100%, calc(88px + var(--split-count, 1) * 58px));
  }

  .wearable-split-distance-labels,
  .wearable-split-plot,
  .wearable-split-secondary-row > div {
    grid-template-columns: repeat(var(--split-count, 1), minmax(58px, 1fr));
  }

  .wearable-split-column,
  .wearable-split-secondary-row span {
    min-width: 58px;
  }

  .wearable-split-y-axis {
    padding-right: 8px;
  }

  .wearable-split-y-axis strong,
  .wearable-split-secondary-row strong {
    font-size: 11px;
  }

  .wearable-split-bar {
    min-width: 0;
    width: 100%;
  }

  .wearable-baseline-grid {
    grid-template-columns: 1fr;
  }

  .wearable-import-summary-row {
    align-items: start;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .wearable-sleep-stat-grid {
    grid-template-columns: 1fr;
  }

  .wearable-sleep-stage-row {
    grid-template-columns: 1fr 52px 34px;
  }

  .wearable-sleep-stage-row > span {
    grid-column: 1 / -1;
  }

  .wearable-activity-main {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .wearable-activity-icon {
    height: 38px;
    width: 38px;
  }

  .wearable-activity-stats {
    grid-template-columns: 1fr;
  }

  .wearable-activity-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .admin-biomarker-editor-modal {
    padding: 14px;
  }

  .admin-biomarker-editor-sheet {
    max-height: calc(100vh - 28px);
    padding: 18px;
    width: min(100%, calc(100vw - 28px));
  }

  .admin-biomarker-editor-header {
    align-items: start;
  }

  .admin-biomarker-editor-header h2 {
    font-size: 24px;
  }

  .admin-biomarker-editor-fields {
    grid-template-columns: 1fr;
  }

  .admin-biomarker-editor-sheet .admin-biomarker-field textarea {
    min-height: 180px;
  }

  .admin-biomarker-target-row {
    grid-template-columns: 1fr;
  }

  .admin-unmatched-actions,
  .admin-unmatched-search-tools {
    grid-template-columns: 1fr;
  }

  .admin-unmatched-actions .document-parse-button {
    justify-self: stretch;
  }
}

.admin-patient-match {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

.admin-patient-match-text {
  display: grid;
  gap: 4px;
}

.admin-patient-match-text strong {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.admin-patient-match-text span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-confidence-dot {
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  height: 10px;
  margin-top: 4px;
  width: 10px;
}

.admin-confidence-dot.is-high {
  background: var(--status-in-range);
}

.admin-confidence-dot.is-medium {
  background: #c9a646;
}

.admin-confidence-dot.is-low,
.admin-confidence-dot.is-unknown {
  background: var(--status-out-of-range);
}

.admin-report-import-link {
  color: var(--color-clay-dark);
  font-weight: 850;
  text-decoration: none;
}

.admin-report-file-table input[type="checkbox"] {
  accent-color: var(--color-clay);
  height: 18px;
  width: 18px;
}

.admin-patient-override {
  display: grid;
  gap: 10px;
}

.admin-selected-patient {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.admin-partner-suggestion {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-partner-suggestion strong {
  color: var(--color-text);
  font-size: 13px;
  font-weight: 850;
}

.admin-partner-suggestion-label {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-partner-match-badge {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  padding: 5px 7px;
}

.admin-partner-match-badge.is-high {
  background: rgba(63, 141, 104, 0.12);
  border-color: rgba(63, 141, 104, 0.28);
  color: var(--status-in-range);
}

.admin-partner-match-badge.is-medium {
  background: rgba(201, 166, 70, 0.16);
  border-color: rgba(201, 166, 70, 0.34);
  color: #80651d;
}

.admin-partner-match-badge.is-low,
.admin-partner-match-badge.is-unknown {
  background: rgba(191, 95, 95, 0.12);
  border-color: rgba(191, 95, 95, 0.28);
  color: var(--status-out-of-range);
}

.admin-muted-italic {
  color: var(--color-muted);
  font-size: 13px;
  font-style: italic;
  font-weight: 650;
}

.admin-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-link-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-clay-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0;
}

.admin-link-button[hidden] {
  display: none !important;
}

.admin-patient-search-panel {
  display: grid;
  gap: 8px;
}

.admin-patient-search-panel[hidden] {
  display: none !important;
}

.admin-patient-search-panel input {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-style: italic;
  font-weight: 650;
  min-height: 38px;
  padding: 0 12px;
}

.admin-partner-select {
  appearance: none;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  color: var(--color-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  min-height: 38px;
  padding: 0 12px;
}

.admin-patient-search-panel input::placeholder {
  color: var(--color-muted);
  opacity: 0.75;
}

.admin-patient-search-results {
  display: grid;
  gap: 7px;
}

.admin-patient-result {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 13px;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 9px 10px;
  text-align: left;
}

.admin-patient-result:hover {
  background: rgba(255, 253, 248, 0.95);
}

.admin-patient-search-message {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.document-parse-stat strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.document-parse-stat span {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
}

.document-parse-metadata {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 7px 14px;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
  padding: 14px;
}

.document-parse-metadata dt {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 850;
}

.document-parse-metadata dd {
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}

.document-parse-row-list {
  display: grid;
  gap: 8px;
}

.document-parse-row {
  align-items: stretch;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: 7px minmax(0, 1fr);
  min-height: 76px;
  overflow: hidden;
  padding: 0 14px 0 0;
}

.document-parse-row-status {
  background: var(--status-other);
  display: block;
}

.document-parse-row.is-in_range .document-parse-row-status {
  background: var(--status-in-range);
}

.document-parse-row.is-out_of_range .document-parse-row-status {
  background: var(--status-out-of-range);
}

.document-parse-row-copy {
  align-self: center;
  display: grid;
  gap: 6px;
  padding: 12px 0;
}

.document-parse-row h4 {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}

.document-parse-row p {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  margin: 0;
}

.document-match {
  color: var(--status-out-of-range);
  font-size: 12px;
  font-weight: 850;
}

.document-match.is-matched {
  color: var(--status-in-range);
}

.document-parse-message {
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  padding: 14px;
}

@media (max-width: 1100px) {
  .sidebar {
    display: none;
  }

  .mobile-header {
    align-items: center;
    background: rgba(251, 247, 239, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-line);
    display: flex;
    justify-content: space-between;
    padding: 16px 22px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .wordmark-mobile .wordmark-text {
    font-size: 24px;
  }

  .account-link {
    background: var(--color-ink);
    border-radius: 999px;
    color: #fffdf8;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
  }

  .mobile-nav {
    background: rgba(251, 247, 239, 0.9);
    border-bottom: 1px solid var(--color-line);
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px 14px;
  }

  .mobile-nav-item {
    background: rgba(255, 253, 248, 0.74);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-ink-soft);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
  }

  .mobile-nav-item-active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fffdf8;
  }

  .dashboard,
  .site-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (max-width: 860px) {
  .hero-card,
  .dashboard-grid,
  .story-section,
  .category-detail-grid,
  .category-grid,
  .report-preview-category-grid,
  .notes-layout,
  .biological-age-overview,
  .documents-grid,
  .clinical-context-grid,
  .insight-detail-layout,
  .wearables-grid,
  .health-weekly-grid,
  .health-snapshot-summary-grid,
  .health-snapshot-layout,
  .health-snapshot-source-grid,
  .digital-consultant-layout,
  .digital-consultant-starters {
    grid-template-columns: 1fr;
  }

  .report-selector-group,
  .report-change-summary .track-change-grid {
    grid-template-columns: 1fr;
  }

  .document-review-summary {
    grid-template-columns: 1fr;
  }

  .wearable-provider-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .wearable-connect-heading {
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr;
  }

  .wearable-connection-badge {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }

  .wearable-provider-actions {
    justify-content: flex-start;
  }

  .clinical-context-actions {
    align-items: stretch;
    display: grid;
  }

  .clinical-context-card-header,
  .clinical-context-row,
  .clinical-context-row.is-condition,
  .clinical-context-entry-fields,
  .clinical-context-row:not(.is-condition) .clinical-context-detail-cell {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .clinical-context-summary {
    align-items: start;
    display: grid;
  }

  .clinical-context-summary-name,
  .clinical-context-summary-detail {
    white-space: normal;
  }

  .clinical-context-row-actions {
    justify-content: flex-start;
  }

  .clinical-context-card-header {
    display: grid;
  }

  .clinical-context-add-button,
  .clinical-context-remove-button,
  .clinical-context-none-button {
    justify-self: start;
  }

  .notes-toc-panel {
    position: static;
  }

  .category-item:nth-child(odd),
  .category-item:nth-child(even) {
    border-left: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  .all-category-row {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  .all-category-title {
    position: static;
  }

  .biomarker-history {
    grid-template-columns: 1fr;
  }

  .biomarker-chart-card {
    grid-template-columns: 1fr;
  }

  .biomarker-current {
    border-bottom: 1px solid var(--color-line);
    border-right: 0;
  }

  .biomarker-history-scale {
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
  }

  .biomarker-history-scale span {
    border-bottom: 0;
    grid-template-columns: 7px minmax(0, 1fr);
  }

  .biomarker-history-scale b {
    min-height: 34px;
  }

  .hero-card {
    align-items: start;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .health-snapshot-actions {
    align-items: start;
  }

}

@media (max-width: 620px) {
  .dashboard {
    padding-top: 20px;
  }

  .account-editor-field {
    grid-template-columns: 1fr;
  }

  .account-editor-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .followup-section {
    margin-bottom: 34px;
  }

  .followup-section h2 {
    font-size: 20px;
  }

  .followup-card {
    align-items: center;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
    padding: 18px;
  }

  .followup-icon {
    border-radius: 13px;
    height: 48px;
    width: 48px;
  }

  .followup-icon svg {
    height: 25px;
    width: 25px;
  }

  .followup-copy {
    min-width: 0;
  }

  .followup-copy strong {
    font-size: 19px;
    line-height: 1.05;
  }

  .followup-copy span {
    display: block;
    font-size: 16px;
    line-height: 1.25;
  }

  .followup-button {
    grid-column: 1 / -1;
    min-height: 44px;
    padding: 0 18px;
    width: 100%;
  }

  .hero-card,
  .panel,
  .story-card,
  .age-panel,
  .document-import-card {
    border-radius: 24px;
    padding: 22px;
  }

  .document-import-card-header,
  .document-dropzone {
    grid-template-columns: 1fr;
  }

  .document-import-card-header {
    display: grid;
  }

  .document-status-pill {
    justify-self: start;
  }

  .page-report-picker {
    width: 100%;
  }

  .document-parse-summary {
    grid-template-columns: 1fr;
  }

  .admin-import-page {
    max-width: none;
    padding: 24px 16px 52px;
  }

  .admin-import-header {
    align-items: stretch;
    display: grid;
  }

  .admin-function-nav {
    flex-wrap: nowrap;
    margin: 0 -16px;
    overflow-x: auto;
    padding: 8px 16px;
    scrollbar-width: none;
  }

  .admin-function-nav::-webkit-scrollbar {
    display: none;
  }

  .admin-function-nav a {
    flex: 0 0 auto;
  }

  .admin-import-controls,
  .admin-review-tools,
  .admin-cleanup-controls,
  .admin-token-grid,
  .admin-user-directory-tools,
  .admin-user-grid,
  .admin-user-two-col,
  .admin-partner-layout,
  .admin-partner-plan-section-head,
  .admin-plan-toolbar,
  .admin-plan-fields,
  .admin-signup-code-result,
  .admin-partner-plan-form,
  .admin-plan-summary,
  .admin-biomarker-workbench,
  .admin-shopify-workbench,
  .admin-shopify-toolbar,
  .admin-shopify-product,
  .admin-shopify-field-grid,
  .admin-pathology-workbench,
  .clinician-patient-workbench,
  .clinician-patient-search,
  .clinician-patient-row,
  .clinician-patient-action,
  .admin-pathology-field-grid,
  .admin-pathology-template-test-headings,
  .admin-pathology-template-test-row,
  .admin-recipes-workbench,
  .admin-recipes-toolbar,
  .admin-exercises-workbench,
  .admin-exercises-toolbar,
  .admin-exercise-card,
  .admin-exercise-field-grid,
  .admin-exercise-taxonomy-grid,
  .admin-ingredient-coverage-summary,
  .admin-ingredient-toolbar,
  .admin-ingredient-card,
  .admin-ingredient-query,
  .admin-recipe-card,
  .admin-recipe-curator-profile-grid,
  .admin-recipe-field-grid,
  .admin-recipe-macro-grid,
  .admin-recipe-rating-grid,
  .admin-recipe-match-row,
  .admin-recipe-partner-layout,
  .admin-recipe-partner-card {
    grid-template-columns: 1fr;
  }

  .admin-signup-code-result.is-link-only {
    grid-template-columns: 1fr;
  }

  .clinician-patient-row-partner {
    justify-self: start;
    text-align: left;
  }

  .clinician-patient-summary-list {
    grid-template-columns: 1fr;
  }

  .admin-pathology-template-test-headings {
    display: none;
  }

  .admin-shopify-product-details,
  .admin-recipe-card,
  .admin-exercise-card,
  .admin-ingredient-card,
  .admin-recipe-partner-card {
    justify-items: start;
    white-space: normal;
  }

  .admin-import-bulk-actions {
    display: grid;
  }

  .age-card-topline {
    font-size: 12px;
  }

  .age-result-card {
    min-height: 280px;
    padding: 38px 26px 24px;
  }

  .biomarker-chart {
    height: 220px;
  }

  .panel-header {
    display: grid;
  }

  .chart-footer {
    align-items: start;
    display: grid;
    gap: 10px;
    min-height: 0;
    padding-bottom: 16px;
    padding-top: 16px;
  }

  .date-chip {
    justify-self: start;
  }

  .section-heading {
    align-items: start;
    display: grid;
  }

  .biological-age-chart-controls {
    justify-self: start;
  }

  .biological-age-chart-section {
    padding: 22px;
  }

  .biological-age-chart {
    padding: 12px 12px 6px;
  }

  .notes-biomarker-list {
    grid-template-columns: 1fr;
  }

  .biological-age-timeline-card-header {
    border-bottom: 1px solid var(--color-line);
    border-right: 0;
    padding-bottom: 14px;
    padding-right: 0;
  }

  .biological-age-timeline-card {
    grid-template-columns: 1fr;
  }

  .biological-age-timeline-card-body {
    border-left: 0;
    padding-left: 0;
  }
}

/* NODE Health brand brief alignment */
html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

body {
  background-color: var(--color-paper);
  background-image: var(--texture-dots);
  background-size: 16px 16px;
  color: var(--color-ink);
  line-height: 1.6;
}

.app-shell {
  background-color: var(--color-paper);
  background-image: var(--texture-dots);
  background-size: 16px 16px;
}

.sidebar,
.mobile-header,
.mobile-nav {
  background: var(--color-sidebar);
}

.sidebar {
  border-right-color: var(--color-line);
}

.rail-item {
  border-radius: 8px;
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rail-item:hover {
  background: var(--color-panel-soft);
  border-color: var(--color-line);
  color: var(--color-ink);
}

.rail-item-active,
.rail-item.is-active,
.mobile-nav-item-active,
.nav-item-active {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

.rail-item-active .rail-icon,
.rail-item.is-active .rail-icon,
.mobile-nav-item-active .rail-icon,
.nav-item-active .nav-icon {
  background: transparent;
  color: var(--color-paper);
}

h1,
h2,
h3,
.dashboard-intro h1,
.panel h2,
.story-card h2,
.report-preview-section-heading h2,
.plastictox-section-heading h2,
.plastictox-bar-header h3,
.plastictox-copy-card h2,
.plastictox-insight-card h2,
.plastictox-compare-intro h1,
.plastictox-compare-label h2,
.ptx-a-copy h3,
.ptx-b-sidebar h3,
.ptx-c-copy h3,
.ptx-d-header-copy h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow,
.page-report-picker,
.page-report-picker-inline,
.report-preview-stat-label,
.report-preview-change-label,
.report-preview-chip,
.plastictox-stat-label,
.plastictox-bucket-status,
.plastictox-band-chip,
.ptx-layout-kicker,
.ptx-b-callout-label,
.ptx-d-overline,
.date-chip {
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.panel,
.story-card,
.hero-card,
.document-import-card,
.report-preview-change-card,
.report-preview-category-card,
.admin-preview-panel,
.admin-share-panel,
.admin-preview-stat,
.admin-preview-summary,
.plastictox-stat-card,
.plastictox-hero-visual,
.plastictox-bar-panel,
.plastictox-band-panel,
.plastictox-copy-card,
.plastictox-insight-card,
.ptx-layout,
.ptx-layout-b,
.ptx-layout-c,
.ptx-layout-d,
.ptx-metric-card,
.ptx-summary-tile,
.ptx-c-microgrid article,
.ptx-bucket-row,
.ptx-d-spotlight,
.ptx-d-level,
.ptx-d-stat-grid article {
  background: var(--color-panel) !important;
  background-image: none !important;
  border: 1px solid var(--color-line);
  box-shadow: none !important;
}

.panel,
.story-card,
.admin-preview-panel,
.admin-share-panel,
.plastictox-bar-panel,
.plastictox-band-panel,
.ptx-layout,
.ptx-layout-c,
.ptx-layout-d {
  background: var(--color-card-cream) !important;
}

.report-preview-stat-card,
.admin-preview-stat,
.plastictox-stat-card,
.ptx-metric-card,
.ptx-summary-tile,
.ptx-c-microgrid article,
.ptx-bucket-row,
.ptx-d-level,
.ptx-d-stat-grid article {
  background: var(--color-panel) !important;
}

.hero-card::after {
  background-image: none;
}

.hero-card,
.story-card-dark,
.biological-age-context-card {
  color: var(--color-ink);
}

.hero-card .eyebrow,
.story-card-dark .eyebrow,
.biological-age-context-card .eyebrow {
  color: var(--color-ink-soft);
}

.button {
  border-radius: 100px;
  min-height: 44px;
  padding: 12px 22px;
}

.button-primary {
  background: var(--color-selected);
  border: 1px solid var(--color-selected);
  box-shadow: none;
  color: var(--color-paper);
}

.button-secondary {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
}

.button-secondary:hover,
.category-filter:hover,
.document-full-text-button:hover {
  background: var(--color-panel-soft);
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.text-link,
.chart-footer-link,
.admin-share-actions button,
.admin-import-bulk-actions button {
  color: var(--status-out-of-range);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

input,
select,
textarea {
  background: var(--color-paper);
  border: 1px solid rgba(25, 26, 29, 0.12);
  border-radius: 8px;
  color: var(--color-ink);
  font-family: var(--font-body);
}

input::placeholder,
textarea::placeholder {
  color: #b7bcc2;
}

.login-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 20%, rgba(181, 126, 89, 0.22), transparent 28rem),
    linear-gradient(135deg, #f3f0e8 0%, #ebe5da 48%, #d8d0c2 100%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.login-card {
  width: min(100%, 34rem);
  display: grid;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgba(36, 35, 32, 0.12);
  border-radius: 2rem;
  background: rgba(255, 252, 245, 0.88);
  box-shadow: 0 2rem 5rem rgba(36, 35, 32, 0.14);
  backdrop-filter: blur(18px);
}

.signup-card {
  width: min(100%, 40rem);
}

.login-wordmark {
  justify-self: start;
  text-decoration: none;
}

.login-copy {
  display: grid;
  gap: 0.75rem;
}

.login-copy h1 {
  max-width: 9em;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 0.82;
  letter-spacing: -0.08em;
}

.login-copy p:last-child {
  max-width: 32rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 1rem;
}

.login-mfa-step[hidden] {
  display: none;
}

.login-step-copy {
  display: grid;
  gap: 0.45rem;
  border-bottom: 1px solid rgba(36, 35, 32, 0.1);
  padding-bottom: 0.35rem;
}

.login-step-copy h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
}

.login-step-copy p:last-child {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.login-secondary-action {
  justify-content: center;
  min-height: 3rem;
  text-decoration: none;
}

.signup-field-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.login-form label {
  display: grid;
  gap: 0.45rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 999px;
  background: #fffaf1;
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  padding: 1rem 1.15rem;
  text-transform: none;
}

.login-form input:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 4px rgba(36, 35, 32, 0.08);
}

.login-submit {
  border: 0;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fffaf1;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1rem 1.25rem;
  text-transform: uppercase;
}

.login-submit:disabled {
  cursor: default;
  opacity: 0.64;
}

.login-status {
  min-height: 1.4em;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.login-status[data-status="error"] {
  color: #8f351d;
}

.signup-code-status {
  min-height: 1.3em;
  margin: -0.35rem 0 0.15rem;
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.signup-code-status[data-status="success"] {
  color: #2f6b4f;
}

.signup-code-status[data-status="error"] {
  color: #8f351d;
}

.login-switch {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: -0.75rem 0 0;
}

.login-switch a {
  color: var(--color-ink);
  font-weight: 800;
  text-decoration: none;
}

.login-switch a:hover {
  text-decoration: underline;
}

@media (max-width: 620px) {
  .signup-field-grid {
    grid-template-columns: 1fr;
  }
}

.onboarding-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(244, 241, 233, 0.92), rgba(229, 235, 231, 0.92)),
    #f4f1e9;
}

.onboarding-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  padding: clamp(1rem, 4vw, 3rem);
}

.onboarding-aside,
.onboarding-panel {
  border: 1px solid rgba(36, 35, 32, 0.12);
  background: rgba(255, 252, 245, 0.88);
  box-shadow: 0 1.5rem 4rem rgba(36, 35, 32, 0.08);
}

.onboarding-aside {
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.onboarding-wordmark {
  justify-self: start;
  text-decoration: none;
}

.onboarding-aside-copy {
  display: grid;
  gap: 0.75rem;
}

.onboarding-aside-copy h1,
.onboarding-step h2,
.onboarding-complete h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  letter-spacing: 0;
}

.onboarding-aside-copy h1 {
  max-width: 9em;
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  line-height: 0.88;
}

.onboarding-aside-copy p:last-child,
.onboarding-step-copy,
.onboarding-complete p {
  margin: 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.onboarding-progress {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-progress li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  color: var(--color-muted);
}

.onboarding-progress span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  font-weight: 800;
}

.onboarding-progress strong {
  min-width: 0;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 800;
}

.onboarding-progress li.is-current {
  color: var(--color-ink);
}

.onboarding-progress li.is-current span,
.onboarding-progress li.is-complete span {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fffaf1;
}

.onboarding-panel {
  align-self: stretch;
  border-radius: 1.25rem;
  overflow: hidden;
}

.onboarding-form {
  display: grid;
  min-height: 100%;
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.onboarding-step,
.onboarding-complete {
  display: grid;
  align-content: start;
  gap: 1.35rem;
  padding: clamp(1.25rem, 5vw, 3rem);
}

.onboarding-step[hidden],
.onboarding-complete[hidden] {
  display: none;
}

.onboarding-step h2,
.onboarding-complete h2 {
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 0.96;
}

.onboarding-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.onboarding-choice-grid label,
.onboarding-consent {
  display: grid;
  cursor: pointer;
}

.onboarding-choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.onboarding-choice-grid span {
  min-height: 3rem;
  display: grid;
  align-items: center;
  border: 1px solid rgba(36, 35, 32, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--color-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.8rem 0.95rem;
}

.onboarding-choice-grid input:checked + span {
  border-color: rgba(36, 35, 32, 0.72);
  background: #eef3ee;
  box-shadow: inset 0 0 0 1px rgba(36, 35, 32, 0.32);
}

.onboarding-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.onboarding-field {
  display: grid;
  gap: 0.45rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.onboarding-field-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.onboarding-field-label label {
  min-width: 0;
}

.onboarding-help {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.onboarding-help-button {
  display: grid;
  width: 1.3rem;
  height: 1.3rem;
  place-items: center;
  border: 1px solid rgba(36, 35, 32, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-ink-soft);
  cursor: help;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  text-transform: none;
}

.onboarding-help-button:hover,
.onboarding-help-button:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink);
  outline: none;
}

.onboarding-help-tooltip {
  position: absolute;
  z-index: 25;
  right: 0;
  bottom: calc(100% + 0.55rem);
  display: none;
  width: min(19rem, calc(100vw - 3rem));
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 1rem 2rem rgba(36, 35, 32, 0.12);
  color: var(--color-ink);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 0.75rem 0.85rem;
  text-transform: none;
}

.onboarding-help:hover .onboarding-help-tooltip,
.onboarding-help:focus-within .onboarding-help-tooltip {
  display: block;
}

.onboarding-field input,
.onboarding-field select,
.onboarding-field textarea {
  width: 100%;
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 8px;
  background: #fffaf1;
  color: var(--color-ink);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.4;
  padding: 0.9rem 1rem;
  text-transform: none;
}

.onboarding-field textarea {
  min-height: 8rem;
  resize: vertical;
}

.onboarding-tag-field {
  position: relative;
}

.onboarding-tag-editor {
  display: grid;
  gap: 0.55rem;
}

.onboarding-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 1.9rem;
}

.onboarding-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 0.4rem;
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 999px;
  background: #eef3ee;
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0.35rem 0.45rem 0.35rem 0.75rem;
  text-transform: none;
}

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

.onboarding-tag button {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(36, 35, 32, 0.12);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.onboarding-tag-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.onboarding-tag-entry button {
  min-height: 2.9rem;
  border: 1px solid rgba(36, 35, 32, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: 0 0.95rem;
}

.onboarding-suggestions {
  position: absolute;
  z-index: 20;
  right: 0;
  left: 0;
  display: grid;
  gap: 0.25rem;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid rgba(36, 35, 32, 0.16);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 1rem 2rem rgba(36, 35, 32, 0.12);
  padding: 0.35rem;
}

.onboarding-suggestions[hidden],
.onboarding-action-grid a[hidden] {
  display: none;
}

.onboarding-suggestions button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.onboarding-suggestions button:hover,
.onboarding-suggestions button:focus-visible {
  background: #eef3ee;
  outline: none;
}

.onboarding-field input:focus,
.onboarding-field select:focus,
.onboarding-field textarea:focus {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 4px rgba(36, 35, 32, 0.08);
}

.onboarding-consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  border: 1px solid rgba(36, 35, 32, 0.12);
  border-radius: 8px;
  background: rgba(238, 243, 238, 0.68);
  color: var(--color-ink);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 1rem;
}

.onboarding-consent input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
}

.onboarding-status {
  min-height: 1.4rem;
  margin: 0;
  padding: 0 3rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.onboarding-status[data-status="error"] {
  color: #8f351d;
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid rgba(36, 35, 32, 0.1);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 5vw, 3rem);
}

.onboarding-primary,
.onboarding-secondary,
.onboarding-action-grid a {
  min-height: 2.9rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.8rem 1.15rem;
  text-decoration: none;
}

.onboarding-primary,
.onboarding-primary-link {
  border: 0;
  background: var(--color-ink);
  color: #fffaf1;
}

.onboarding-secondary {
  border: 1px solid rgba(36, 35, 32, 0.18);
  background: rgba(255, 255, 255, 0.62);
  color: var(--color-ink);
}

.onboarding-primary:disabled,
.onboarding-secondary:disabled {
  cursor: default;
  opacity: 0.56;
}

.onboarding-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.onboarding-action-grid a {
  display: grid;
  place-items: center;
  border: 1px solid rgba(36, 35, 32, 0.16);
  color: var(--color-ink);
  text-align: center;
}

.onboarding-action-grid .onboarding-primary-link {
  color: #fffaf1;
}

@media (max-width: 900px) {
  .onboarding-shell {
    grid-template-columns: 1fr;
  }

  .onboarding-aside {
    gap: 1.25rem;
  }

  .onboarding-aside-copy h1 {
    max-width: 11em;
  }

  .onboarding-progress {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .onboarding-progress li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

@media (max-width: 680px) {
  .onboarding-shell {
    padding: 0;
  }

  .onboarding-aside,
  .onboarding-panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .onboarding-choice-grid,
  .onboarding-field-grid,
  .onboarding-action-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-status {
    padding: 0 1.25rem;
  }

  .onboarding-tag-entry {
    grid-template-columns: 1fr;
  }

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

  .onboarding-primary {
    grid-column: 1 / -1;
    order: -1;
  }
}

.chart-column-good,
.status-green,
.document-import-card.is-text_extracted .document-status-pill,
.admin-report-file-row.is-linked .admin-status-text {
  color: var(--status-in-range);
}

.chart-column-alert,
.status-brown,
.document-import-card.is-failed .document-status-pill,
.admin-status-warning,
.admin-report-file-row.is-failed .admin-status-text {
  color: var(--status-out-of-range);
}

.chart-column-target,
.status-target {
  color: #752a3a;
}

.chart-column-muted,
.status-gray,
.document-status-pill,
.admin-report-file-row.is-deleted .admin-status-text {
  color: var(--status-other);
}

.status-green,
.chart-bar.status-green {
  background: var(--status-in-range);
}

.status-brown,
.chart-bar.status-brown {
  background: var(--status-out-of-range);
}

.status-target,
.chart-bar.status-target {
  background: #752a3a;
}

.status-gray,
.chart-bar.status-gray {
  background: var(--status-other);
}

.status-dot {
  background: var(--status-out-of-range);
  box-shadow: none;
}

.nav-icon,
.rail-icon,
.document-dropzone-icon,
.admin-preview-stat-card,
.account-editor-button {
  background: var(--color-icon-well);
  border-radius: 10px;
  color: var(--color-clay);
}

.rail-item-active .rail-icon,
.mobile-nav-item-active .rail-icon,
.nav-item-active .nav-icon {
  background: transparent;
  color: var(--color-paper);
}

.site-footer {
  border-top: 1px solid rgba(25, 26, 29, 0.12);
  color: var(--color-ink-soft);
}

.wordmark {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
}

.wordmark-text {
  font-size: 22px;
}

.node-health-wordmark {
  gap: 7px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.node-health-wordmark .wordmark-node {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.node-health-wordmark .wordmark-health {
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-top: 3px;
}

.account-icon-link {
  align-items: center;
  background: var(--color-ink);
  border-radius: 999px;
  color: var(--color-paper);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  width: 40px;
}

.account-icon-link:hover {
  background: var(--color-selected);
  color: var(--color-paper);
  transform: translateY(-1px);
}

.account-icon-link svg {
  display: block;
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

@media (max-width: 1100px) {
  .account-icon-link.desktop-profile-link {
    display: none;
  }
}

.hero-card,
.story-card-dark,
.biological-age-context-card {
  background: var(--color-graphite) !important;
  border-color: rgba(236, 232, 225, 0.12);
  color: var(--color-paper);
}

.hero-card h1,
.hero-card h2,
.story-card-dark h1,
.story-card-dark h2,
.biological-age-context-card h1,
.biological-age-context-card h2 {
  color: var(--color-paper);
}

.hero-card p,
.hero-card .hero-text,
.story-card-dark p,
.biological-age-context-card p {
  color: rgba(236, 232, 225, 0.76);
}

.hero-card .eyebrow,
.story-card-dark .eyebrow,
.biological-age-context-card .eyebrow {
  color: var(--color-clay-soft);
}

.age-panel,
.age-panel.panel {
  background:
    radial-gradient(circle at 10% 90%, rgba(140, 120, 103, 0.18), transparent 14rem),
    linear-gradient(145deg, var(--color-card-cream) 0%, var(--color-panel) 55%, var(--color-panel-soft) 100%) !important;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
}

.age-result-card {
  background: var(--color-card-white);
  border: 1px solid var(--color-hairline-card);
  box-shadow: none;
}

.age-value {
  color: var(--color-clay);
}

.age-title {
  color: var(--color-ink);
}

.age-rule {
  background: var(--color-clay-soft);
}

.age-delta,
.age-tested {
  color: var(--color-ink-soft);
}

.button-primary {
  background: var(--color-selected);
  border-color: var(--color-selected);
  color: var(--color-paper);
}

.hero-card .button-primary {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.hero-card .button-secondary {
  border-color: rgba(236, 232, 225, 0.44);
  color: var(--color-paper);
}

.category-filter.is-active,
.biological-age-chart-controls button[aria-pressed="true"],
.document-submit-button,
.document-parse-button {
  background: var(--color-selected);
  border-color: var(--color-selected);
  color: var(--color-paper);
}

.biomarker-panel,
.categories-section,
.admin-import-panel,
.admin-biomarker-panel,
.document-import-card,
.report-preview-change-card,
.report-preview-category-card {
  background: var(--color-card-white) !important;
  border-color: var(--color-line);
}

.category-hero h1,
.biological-age-hero h1,
.report-changes-hero h1,
.documents-hero h1 {
  font-size: 42px;
  line-height: 1.05;
  max-width: 760px;
}

.section-heading h2,
.categories-section h2 {
  font-size: 30px;
  line-height: 1.12;
}

.dashboard-intro h1 {
  font-size: 44px;
  line-height: 1.05;
}

@media (max-width: 720px) {
  .category-hero h1,
  .biological-age-hero h1,
  .report-changes-hero h1,
  .documents-hero h1 {
    font-size: 34px;
  }

  .section-heading h2,
  .categories-section h2 {
    font-size: 26px;
  }

  .dashboard-intro h1 {
    font-size: 36px;
  }

  .category-result-row {
    gap: 5px;
    grid-template-columns: minmax(0, 1fr);
  }

  .category-result-value {
    justify-self: start;
    white-space: normal;
  }
}

/* NODE mock merge: component proportions and biomarker-specific details */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
}

.app-shell,
body,
.report-preview-body {
  background-size: var(--texture-size);
}

.dashboard-intro h1,
.category-hero h1,
.biological-age-hero h1,
.report-changes-hero h1,
.documents-hero h1,
.biomarker-report-header h1,
.plastictox-compare-intro h1 {
  font-size: 38px;
  letter-spacing: 0;
  line-height: 0.98;
}

.app-title-hero h1,
.account-hero h1 {
  font-size: 38px;
  letter-spacing: 0;
  line-height: 0.98;
  max-width: 760px;
}

.dashboard-intro h1 {
  gap: 2px;
}

.dashboard-greeting-name {
  color: var(--status-out-of-range);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
}

.section-heading h2,
.categories-section h2,
.report-preview-section-heading h2,
.plastictox-section-heading h2,
.plastictox-copy-card h2,
.plastictox-insight-card h2 {
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1;
}

.story-card h2,
.panel h2,
.category-note-title,
.all-category-title .category-copy strong {
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.2;
}

.category-filter,
.biological-age-chart-controls button,
.mobile-nav-item {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  min-height: 36px;
  padding: 0 18px;
}

.category-filter {
  border-color: var(--color-hairline);
  color: var(--color-ink);
}

.category-filter.is-active {
  background: var(--color-selected);
  border-color: var(--color-selected);
  color: var(--color-paper);
}

.button {
  font-size: 13px;
  font-weight: 500;
}

.document-status-pill,
.report-preview-chip,
.plastictox-band-chip,
.ptx-inline-badge {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100px;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  min-height: 22px;
  padding: 0 9px;
  text-transform: uppercase;
}

.category-icon {
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  height: 28px;
  letter-spacing: 0;
  width: 28px;
}

.category-copy strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.category-breakdown {
  gap: 12px;
}

.category-breakdown b {
  color: var(--color-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.category-breakdown i {
  height: 6px;
  min-width: 6px;
}

.all-category-row {
  gap: 24px;
  padding: 18px 4px;
}

.all-category-biomarker,
.unmapped-result-row {
  border-top-color: var(--color-hairline-soft);
  grid-template-columns: 4px minmax(0, 1fr);
  min-height: 0;
  padding: 14px 4px 14px 0;
}

.all-category-biomarker:hover {
  background: transparent;
}

.all-category-biomarker-status,
.unmapped-result-status {
  border-radius: 2px;
  width: 4px;
}

.all-category-biomarker-name {
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.all-category-biomarker-value {
  color: var(--color-ink-soft);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.all-category-biomarker-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.biomarker-chart-card {
  background: var(--color-card-cream);
  border-color: var(--color-hairline-card);
  border-radius: var(--radius-lg);
}

.biomarker-current {
  gap: 16px;
  padding: 28px 24px;
}

.biomarker-current-status {
  border: 1px solid currentColor;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  padding: 8px 9px;
  text-transform: uppercase;
}

.biomarker-current-value {
  align-items: flex-start;
  display: grid;
  font-size: 15px;
  font-weight: 400;
  gap: 12px;
  grid-template-columns: 3px minmax(0, 1fr);
}

.biomarker-current-dot {
  border-radius: 2px;
  height: 18px;
  margin-top: 2px;
  width: 3px;
}

.biomarker-history {
  gap: 18px;
  grid-template-columns: 126px minmax(0, 1fr);
  padding: 28px 24px 22px;
}

.biomarker-history-scale {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.biomarker-history-scale span {
  border-bottom-color: var(--color-hairline-soft);
  color: var(--color-ink-soft);
  grid-template-columns: 4px minmax(0, 1fr);
}

.biomarker-history-scale small {
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.biomarker-history-scale b {
  border-radius: 2px;
  min-height: 56px;
}

.biomarker-history-axis,
.biomarker-history-guide {
  stroke: var(--color-hairline);
}

.biomarker-history-line {
  stroke: rgba(96, 105, 117, 0.36);
}

.biomarker-history-point {
  stroke: var(--color-card-cream);
}

.biomarker-history-value {
  font-size: 13px;
  font-weight: 600;
}

.biomarker-history-date {
  fill: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .dashboard-intro h1,
  .category-hero h1,
  .biological-age-hero h1,
  .report-changes-hero h1,
  .documents-hero h1,
  .biomarker-report-header h1,
  .plastictox-compare-intro h1 {
    font-size: 32px;
  }

  .app-title-hero h1,
  .account-hero h1 {
    font-size: 32px;
  }

  .section-heading h2,
  .categories-section h2,
  .report-preview-section-heading h2,
  .plastictox-section-heading h2 {
    font-size: 24px;
  }

  .all-category-row {
    grid-template-columns: 1fr;
  }

  .all-category-title {
    position: static;
  }

  .biomarker-history {
    grid-template-columns: 1fr;
  }
}

/* Biomarker detail reading-first layout */
.biomarker-detail-overview {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(520px, 1.4fr) minmax(320px, 0.9fr);
}

.biomarker-reading-card,
.biomarker-about-card,
.biomarker-history-section {
  background: var(--color-card-cream) !important;
  border: 1px solid var(--color-hairline-card);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
}

.biomarker-reading-card {
  align-content: start;
  border-right: 0;
  display: grid;
  gap: 18px;
  justify-items: stretch;
  padding: 28px;
}

.biomarker-reading-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.biomarker-reading-head .eyebrow {
  margin: 0;
}

.biomarker-reading-title-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.biomarker-reading-title-block h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
  overflow-wrap: anywhere;
}

.biomarker-reading-card .biomarker-current-status {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100px;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  justify-content: center;
  justify-self: start;
  letter-spacing: 0.18em;
  line-height: 1;
  min-height: 22px;
  padding: 0 9px;
  text-transform: uppercase;
  width: max-content;
}

.biomarker-reading-value {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: end;
  margin: 0;
  min-width: 132px;
  text-align: right;
}

.biomarker-reading-number {
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.95;
}

.biomarker-reading-number[data-value-type="text"] {
  font-size: 28px;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.biomarker-reading-unit {
  color: var(--color-ink-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
  max-width: 18ch;
}

.biomarker-current-in-range .biomarker-current-status {
  color: var(--status-in-range);
}

.biomarker-current-out-of-range .biomarker-current-status {
  color: var(--status-out-of-range);
}

.biomarker-current-other .biomarker-current-status {
  color: var(--status-other);
}

.biomarker-reading-card .biomarker-current-value {
  align-items: start;
  color: var(--color-ink-soft);
  display: grid;
  font-size: 13px;
  font-weight: 400;
  gap: 10px;
  grid-template-columns: 4px minmax(0, 1fr);
  margin: 0;
}

.biomarker-reading-card .biomarker-current-dot {
  border-radius: 2px;
  height: 16px;
  margin-top: 2px;
  width: 4px;
}

.biomarker-reading-card .biomarker-current-value span:last-child {
  color: var(--color-ink-soft);
}

.biomarker-range-meter {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  max-width: 720px;
  width: min(100%, 720px);
}

.biomarker-range-meter[hidden] {
  display: none;
}

.biomarker-range-track {
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  height: 10px;
  min-width: min(100%, 560px);
  overflow: visible;
  position: relative;
}

.biomarker-range-segment {
  min-width: 0;
}

.biomarker-range-segment-low {
  background: var(--color-clay-soft);
  border-radius: 5px 0 0 5px;
}

.biomarker-range-segment-optimal {
  background: var(--status-in-range);
}

.biomarker-range-segment-high {
  background: var(--status-out-of-range);
  border-radius: 0 5px 5px 0;
}

.biomarker-range-meter[data-scale] .biomarker-range-segment-low {
  background: var(--status-in-range);
}

.biomarker-range-meter[data-scale] .biomarker-range-segment-optimal {
  background: var(--color-clay-soft);
}

.biomarker-range-meter[data-range-segments="2"] .biomarker-range-track,
.biomarker-range-meter[data-range-segments="2"] .biomarker-range-labels {
  grid-template-columns: 1fr 1fr;
}

.biomarker-range-meter[data-range-segments="2"] .biomarker-range-segment-optimal,
.biomarker-range-meter[data-range-segments="2"] .biomarker-range-labels span:nth-child(2) {
  display: none;
}

.biomarker-range-meter[data-range-segments="2"] .biomarker-range-segment-low {
  border-radius: 5px 0 0 5px;
}

.biomarker-range-meter[data-range-segments="2"] .biomarker-range-segment-high {
  border-radius: 0 5px 5px 0;
}

.biomarker-range-meter[data-range-segments="2"][data-range-direction="high"] .biomarker-range-segment-low {
  background: var(--status-in-range);
}

.biomarker-range-meter[data-range-segments="2"][data-range-direction="high"] .biomarker-range-segment-high {
  background: var(--status-out-of-range);
}

.biomarker-range-meter[data-range-segments="2"][data-range-direction="low"] .biomarker-range-segment-low {
  background: var(--status-out-of-range);
}

.biomarker-range-meter[data-range-segments="2"][data-range-direction="low"] .biomarker-range-segment-high {
  background: var(--status-in-range);
}

.biomarker-range-marker {
  background: var(--color-selected);
  border-radius: 999px;
  bottom: -7px;
  box-shadow: 0 0 0 3px var(--color-card-cream);
  display: block;
  position: absolute;
  top: -7px;
  transform: translateX(-50%);
  width: 3px;
}

.biomarker-node-range {
  --biomarker-node-range-color: #752a3a;
  bottom: -10px;
  display: block;
  position: absolute;
  top: -10px;
  z-index: 2;
}

.biomarker-node-range[hidden] {
  display: none;
}

.biomarker-node-range::before,
.biomarker-node-range::after {
  background: var(--biomarker-node-range-color);
  border-radius: 999px;
  bottom: 0;
  box-shadow: 0 0 0 2px var(--color-card-cream);
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
}

.biomarker-node-range::before {
  left: 0;
  transform: translateX(-50%);
}

.biomarker-node-range::after {
  right: 0;
  transform: translateX(50%);
}

.biomarker-range-labels {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1.4fr 1fr;
}

.biomarker-range-labels span {
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.biomarker-range-labels span:nth-child(2) {
  color: var(--color-ink);
  text-align: center;
}

.biomarker-range-labels span:last-child {
  text-align: right;
}

.biomarker-reading-meta {
  border-top: 1px solid var(--color-hairline-soft);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 4px 0 0;
  padding-top: 16px;
}

.biomarker-reading-meta div {
  display: grid;
  gap: 5px;
}

.biomarker-reading-meta dt {
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.biomarker-reading-meta dd {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.biomarker-reading-meta [data-biomarker-target-wrapper] dt {
  color: #752a3a;
  font-weight: 700;
}

.biomarker-reading-meta [data-biomarker-actual-target-wrapper] dt {
  color: #2f6651;
}

.biomarker-range-info {
  border-top: 1px solid var(--color-hairline-soft);
  display: grid;
  margin-top: 2px;
}

.biomarker-range-info-item {
  border-bottom: 1px solid var(--color-hairline-soft);
}

.biomarker-range-info-item summary {
  align-items: center;
  color: var(--color-ink-soft);
  cursor: pointer;
  display: flex;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  gap: 14px;
  justify-content: space-between;
  line-height: 1.15;
  list-style: none;
  padding: 16px 0;
}

.biomarker-range-info-item summary::-webkit-details-marker {
  display: none;
}

.biomarker-range-info-item summary::after {
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  color: var(--color-ink-soft);
  content: "+";
  display: inline-grid;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  height: 24px;
  line-height: 1;
  place-items: center;
  width: 24px;
}

.biomarker-range-info-item[open] summary::after {
  content: "-";
}

.biomarker-range-info-body {
  display: grid;
  gap: 12px;
  padding: 0 0 18px;
}

.biomarker-range-info-body p {
  color: var(--color-ink-soft);
  font-size: 14px;
  line-height: 1.62;
  margin: 0;
}

.biomarker-range-info-note {
  font-size: 12px !important;
}

.biomarker-range-info-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.biomarker-range-info-legend span {
  align-items: center;
  color: var(--color-ink-soft);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  gap: 6px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.range-swatch {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 20px;
}

.range-swatch-low {
  background: var(--color-clay-soft);
}

.range-swatch-in {
  background: var(--status-in-range);
}

.range-swatch-high {
  background: var(--status-out-of-range);
}

.range-swatch-node {
  background: #752a3a;
  width: 8px;
}

.biomarker-about-card,
.biomarker-history-section {
  display: grid;
  gap: 14px;
  padding: 28px;
}

.biomarker-about-card h2 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

.biomarker-about-card p {
  color: var(--color-ink-soft);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.biomarker-about-card[hidden] {
  display: none;
}

.biomarker-about-card [data-biomarker-description] {
  white-space: pre-line;
}

.biomarker-history-section .section-heading {
  margin-bottom: 0;
}

.biomarker-history-section .section-heading h2 {
  font-size: 28px;
}

.biomarker-history-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: flex-end;
}

.biomarker-history-legend[hidden] {
  display: none;
}

.biomarker-history-legend span {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.biomarker-history-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 22px;
}

.biomarker-history-legend i.is-lab {
  background: rgba(64, 110, 132, 0.8);
}

.biomarker-history-legend i.is-home {
  background: #b9894a;
}

.biomarker-history-section .biomarker-chart-card {
  background: var(--color-panel) !important;
  border-color: var(--color-hairline-card);
  border-radius: 18px;
  display: block;
  min-height: 0;
  overflow: hidden;
}

.biomarker-history-section .biomarker-chart-card.has-no-history {
  display: grid;
}

.biomarker-history-section .biomarker-history {
  gap: 22px;
  grid-template-columns: 1fr;
}

.biomarker-history-section .biomarker-history-scale {
  align-self: stretch;
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1.4fr 1fr;
  height: auto;
}

.biomarker-history-section .biomarker-history-scale span {
  align-items: start;
  border-bottom: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  padding: 0;
}

.biomarker-history-section .biomarker-history-scale b {
  height: 6px;
  min-height: 0;
  width: 100%;
}

.biomarker-history-section .biomarker-history-scale span:first-child b {
  background: var(--color-clay-soft);
  border-radius: 4px 0 0 4px;
}

.biomarker-history-section .biomarker-history-scale span:nth-child(2) b {
  background: var(--status-in-range);
  border-radius: 0;
}

.biomarker-history-section .biomarker-history-scale span:last-child b {
  background: var(--status-out-of-range);
  border-radius: 0 4px 4px 0;
}

.biomarker-history-section .biomarker-history-scale em {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.biomarker-history-section .biomarker-history-scale span:nth-child(2) em {
  text-align: center;
}

.biomarker-history-section .biomarker-history-scale span:last-child em {
  text-align: right;
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"] {
  grid-template-columns: 1fr 1fr;
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"] span:nth-child(2) {
  display: none;
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"] span:first-child b {
  border-radius: 4px 0 0 4px;
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"] span:last-child b {
  border-radius: 0 4px 4px 0;
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"][data-range-direction="high"] span:first-child b {
  background: var(--status-in-range);
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"][data-range-direction="high"] span:last-child b {
  background: var(--status-out-of-range);
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"][data-range-direction="low"] span:first-child b {
  background: var(--status-out-of-range);
}

.biomarker-history-section .biomarker-history-scale[data-range-segments="2"][data-range-direction="low"] span:last-child b {
  background: var(--status-in-range);
}

.biomarker-history-line.is-lab {
  stroke: rgba(64, 110, 132, 0.78);
  stroke-dasharray: none;
  stroke-width: 2.5;
}

.biomarker-history-line.is-home {
  stroke: #b9894a;
  stroke-dasharray: 5 7;
  stroke-width: 2.5;
}

.biomarker-history-guide.is-home {
  stroke: rgba(185, 137, 74, 0.18);
}

.biomarker-history-point.is-home {
  fill: #fffdf8;
  stroke: #b9894a;
  stroke-width: 4;
}

.biomarker-history-value.is-home {
  fill: #8b642f;
}

.biomarker-history-section .category-placeholder {
  margin: 0;
  padding: 20px;
}

@media (max-width: 980px) {
  .biomarker-detail-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .biomarker-reading-card,
  .biomarker-about-card,
  .biomarker-history-section {
    padding: 22px;
  }

  .biomarker-reading-head {
    grid-template-columns: 1fr;
  }

  .biomarker-reading-title-block h2 {
    font-size: 30px;
  }

  .biomarker-reading-value {
    justify-content: start;
    text-align: left;
  }

  .biomarker-reading-number {
    font-size: 38px;
  }

  .biomarker-reading-meta {
    grid-template-columns: 1fr;
  }

  .biomarker-history-section .biomarker-history {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

.home-dashboard .dashboard-intro h1 {
  font-size: clamp(46px, 5vw, 70px);
  line-height: 0.96;
}

@media (max-width: 720px) {
  .home-dashboard .dashboard-intro h1 {
    font-size: clamp(38px, 11vw, 50px);
  }
}

/* One Playground host-specific brand treatment */
html[data-brand="one-playground"] {
  --color-ink: #181818;
  --color-selected: #181818;
  --color-graphite: #717171;
  --color-graphite-soft: #717171;
  --color-ink-soft: #717171;
  --color-ink-subtle: #717171;
  --color-muted: #717171;
  --color-line: #c6c6c6;
  --color-line-strong: #a8a8a8;
  --color-hairline: rgba(24, 24, 24, 0.12);
  --color-hairline-card: rgba(24, 24, 24, 0.1);
  --color-hairline-soft: rgba(24, 24, 24, 0.08);
  --color-paper: #ffffff;
  --color-panel: #f6f6f4;
  --color-panel-soft: #eeeeeb;
  --color-sidebar: #181818;
  --color-clay: #717171;
  --color-clay-dark: #181818;
  --color-clay-soft: #c6c6c6;
  --color-alert: #181818;
  --color-sand: #ffffff;
  --color-card-white: #ffffff;
  --color-card-cream: #ffffff;
  --color-icon-well: #eeeeeb;
  --status-in-range-rgb: 24, 24, 24;
  --status-in-range: #181818;
  --status-out-of-range: #717171;
  --status-other-rgb: 198, 198, 198;
  --status-other: #c6c6c6;
  --radius-lg: 8px;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-editorial: "Financier Display", Georgia, serif;
  --texture-dots: none;
}

html[data-brand="one-playground"],
html[data-brand="one-playground"] body,
html[data-brand="one-playground"] .app-shell,
html[data-brand="one-playground"] .report-preview-body {
  background-color: var(--color-paper);
  background-image: none;
  color: var(--color-ink);
}

html[data-brand="one-playground"] .sidebar,
html[data-brand="one-playground"] .mobile-header,
html[data-brand="one-playground"] .mobile-nav {
  background: #181818 !important;
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

html[data-brand="one-playground"] .page {
  background: #ffffff;
}

html[data-brand="one-playground"] .panel,
html[data-brand="one-playground"] .story-card,
html[data-brand="one-playground"] .hero-card,
html[data-brand="one-playground"] .document-import-card,
html[data-brand="one-playground"] .report-preview-change-card,
html[data-brand="one-playground"] .report-preview-category-card,
html[data-brand="one-playground"] .admin-preview-panel,
html[data-brand="one-playground"] .admin-share-panel,
html[data-brand="one-playground"] .admin-preview-stat,
html[data-brand="one-playground"] .admin-preview-summary,
html[data-brand="one-playground"] .plastictox-stat-card,
html[data-brand="one-playground"] .plastictox-hero-visual,
html[data-brand="one-playground"] .plastictox-bar-panel,
html[data-brand="one-playground"] .plastictox-band-panel,
html[data-brand="one-playground"] .plastictox-copy-card,
html[data-brand="one-playground"] .plastictox-insight-card,
html[data-brand="one-playground"] .ptx-layout,
html[data-brand="one-playground"] .ptx-layout-b,
html[data-brand="one-playground"] .ptx-layout-c,
html[data-brand="one-playground"] .ptx-layout-d,
html[data-brand="one-playground"] .ptx-metric-card,
html[data-brand="one-playground"] .ptx-summary-tile,
html[data-brand="one-playground"] .ptx-c-microgrid article,
html[data-brand="one-playground"] .ptx-bucket-row,
html[data-brand="one-playground"] .ptx-d-spotlight,
html[data-brand="one-playground"] .ptx-d-level,
html[data-brand="one-playground"] .ptx-d-stat-grid article,
html[data-brand="one-playground"] .biomarker-reading-card,
html[data-brand="one-playground"] .biomarker-about-card,
html[data-brand="one-playground"] .biomarker-history-section,
html[data-brand="one-playground"] .biomarker-chart-card {
  background: var(--color-card-white) !important;
  background-image: none !important;
  border-color: var(--color-line);
  border-radius: 8px;
  box-shadow: none !important;
}

html[data-brand="one-playground"] h1,
html[data-brand="one-playground"] h2,
html[data-brand="one-playground"] h3,
html[data-brand="one-playground"] .dashboard-intro h1,
html[data-brand="one-playground"] .panel h2,
html[data-brand="one-playground"] .story-card h2,
html[data-brand="one-playground"] .report-preview-section-heading h2,
html[data-brand="one-playground"] .plastictox-section-heading h2,
html[data-brand="one-playground"] .biomarker-detail-title,
html[data-brand="one-playground"] .biomarker-reading-number {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0;
}

html[data-brand="one-playground"] .biomarker-reading-title-block h2 {
  color: var(--color-ink);
  font-weight: 600;
}

html[data-brand="one-playground"] .biomarker-reading-card .biomarker-reading-number {
  color: var(--color-ink-soft);
  font-weight: 500;
}

html[data-brand="one-playground"] .eyebrow,
html[data-brand="one-playground"] .page-report-picker,
html[data-brand="one-playground"] .page-report-picker-inline,
html[data-brand="one-playground"] .report-preview-stat-label,
html[data-brand="one-playground"] .report-preview-change-label,
html[data-brand="one-playground"] .report-preview-chip,
html[data-brand="one-playground"] .plastictox-stat-label,
html[data-brand="one-playground"] .plastictox-bucket-status,
html[data-brand="one-playground"] .plastictox-band-chip,
html[data-brand="one-playground"] .ptx-layout-kicker,
html[data-brand="one-playground"] .ptx-b-callout-label,
html[data-brand="one-playground"] .ptx-d-overline,
html[data-brand="one-playground"] .date-chip,
html[data-brand="one-playground"] .rail-item,
html[data-brand="one-playground"] .mobile-nav-item,
html[data-brand="one-playground"] .button,
html[data-brand="one-playground"] .login-submit,
html[data-brand="one-playground"] .login-form label,
html[data-brand="one-playground"] .text-link,
html[data-brand="one-playground"] .chart-footer-link {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
}

html[data-brand="one-playground"] .rail-item,
html[data-brand="one-playground"] .mobile-nav-item {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.72);
}

html[data-brand="one-playground"] .rail-item:hover,
html[data-brand="one-playground"] .mobile-nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html[data-brand="one-playground"] .rail-item-active,
html[data-brand="one-playground"] .mobile-nav-item-active,
html[data-brand="one-playground"] .nav-item-active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #181818 !important;
}

html[data-brand="one-playground"] .rail-item-active .rail-icon,
html[data-brand="one-playground"] .mobile-nav-item-active .rail-icon,
html[data-brand="one-playground"] .nav-item-active .nav-icon {
  color: #181818;
}

html[data-brand="one-playground"] .nav-icon,
html[data-brand="one-playground"] .rail-icon,
html[data-brand="one-playground"] .document-dropzone-icon,
html[data-brand="one-playground"] .admin-preview-stat-card,
html[data-brand="one-playground"] .account-editor-button {
  background: rgba(255, 255, 255, 0.1);
  color: currentColor;
}

html[data-brand="one-playground"] .button-primary,
html[data-brand="one-playground"] .login-submit {
  background: #181818;
  border-color: #181818;
  color: #ffffff;
}

html[data-brand="one-playground"] .button-secondary {
  background: transparent;
  border-color: #181818;
  color: #181818;
}

html[data-brand="one-playground"] .login-page {
  background: #ffffff;
}

html[data-brand="one-playground"] .login-card {
  background: #ffffff;
  border-color: var(--color-line);
  border-radius: 8px;
  box-shadow: none;
}

html[data-brand="one-playground"] .login-copy h1 {
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.92;
}

html[data-brand="one-playground"] .login-form input {
  background: #ffffff;
  border-color: var(--color-line);
  border-radius: 42px;
}

html[data-brand="one-playground"] .node-health-wordmark {
  align-items: center;
  gap: 0;
  min-height: 24px;
}

html[data-brand="one-playground"] .node-health-wordmark:not(.has-brand-logo)::before {
  color: var(--color-ink);
  content: "ONE PLAYGROUND";
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

html[data-brand="one-playground"] .sidebar .node-health-wordmark:not(.has-brand-logo)::before,
html[data-brand="one-playground"] .mobile-header .node-health-wordmark:not(.has-brand-logo)::before {
  color: #ffffff;
}

html[data-brand="one-playground"] .node-health-wordmark:not(.has-brand-logo) .wordmark-node,
html[data-brand="one-playground"] .node-health-wordmark:not(.has-brand-logo) .wordmark-health {
  display: none;
}

html[data-brand="one-playground"] .brand-logo-image {
  filter: invert(1);
  max-height: 30px;
  max-width: 184px;
}

html[data-brand="one-playground"] .rail-logo .brand-logo-image,
html[data-brand="one-playground"] .mobile-header .brand-logo-image {
  filter: none;
  max-height: 26px;
  max-width: 108px;
}

html[data-brand="one-playground"] .login-wordmark .brand-logo-image,
html[data-brand="one-playground"] .report-preview-header .brand-logo-image {
  filter: invert(1);
}
html[data-brand="one-playground"][data-opg-page] {
  --opg-page-image: url("/assets/one-playground/bg-report.svg") !important;
  --opg-page-background-size: 100% 100%, min(46vw, 760px) auto !important;
  --opg-page-background-position: center, right top !important;
  --opg-bg-left: rgba(248, 248, 246, 1) !important;
  --opg-bg-mid: rgba(248, 248, 246, .96) !important;
  --opg-bg-right: rgba(248, 248, 246, .76) !important;
  --opg-readable-ink: #181818 !important;
  --opg-readable-body: #242424 !important;
  --opg-readable-muted: #4b4b4b !important;
  --opg-readable-soft: #626262 !important;
  --color-text: #181818 !important;
  --color-muted: #4b4b4b !important;
  --color-text-muted: #4b4b4b !important;
}

html[data-brand="one-playground"][data-opg-page="workspace"] {
  --opg-page-image: url("/assets/one-playground/bg-dashboard.svg") !important;
}

html[data-brand="one-playground"][data-opg-page="biomarkers"] {
  --opg-page-image: url("/assets/one-playground/bg-biomarkers.svg") !important;
  --opg-page-background-size: 100% 100%, min(44vw, 700px) auto !important;
}

html[data-brand="one-playground"][data-opg-page="bio-age"] {
  --opg-page-image: url("/assets/one-playground/bg-bio-age.svg") !important;
  --opg-page-background-size: 100% 100%, min(42vw, 680px) auto !important;
  --opg-bg-right: rgba(248, 248, 246, .82) !important;
}

html[data-brand="one-playground"][data-opg-page="admin"] {
  --opg-page-image: url("/assets/one-playground/bg-admin.svg") !important;
  --opg-page-background-size: 100% 100%, min(38vw, 560px) auto !important;
  --opg-bg-right: rgba(248, 248, 246, .9) !important;
}

html[data-brand="one-playground"][data-opg-page="auth"] {
  --opg-page-image: url("/assets/one-playground/bg-auth.svg") !important;
  --opg-page-background-size: 100% 100%, cover !important;
  --opg-page-background-position: center, center !important;
  --opg-bg-left: rgba(24, 24, 24, .42) !important;
  --opg-bg-mid: rgba(248, 248, 246, .74) !important;
  --opg-bg-right: rgba(248, 248, 246, .96) !important;
}

html[data-brand="one-playground"][data-opg-page] body {
  background-color: #f8f8f6 !important;
  background-image:
    linear-gradient(90deg, var(--opg-bg-left) 0%, var(--opg-bg-mid) 52%, var(--opg-bg-right) 100%),
    var(--opg-page-image) !important;
  background-position: var(--opg-page-background-position) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: var(--opg-page-background-size) !important;
  background-attachment: fixed, fixed !important;
  color: var(--opg-readable-body) !important;
  font-weight: 410 !important;
}

html[data-brand="one-playground"][data-opg-page] :where(.app, .app-shell, .page-shell, .content-shell, .report-preview, .report-shell, .dashboard-shell, .biomarker-shell, .timeline-shell, main) {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-brand="one-playground"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--opg-readable-ink) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html[data-brand="one-playground"] :where(p, li, dd, dt, td, th, label, input, textarea, select) {
  color: var(--opg-readable-body) !important;
  font-weight: 410 !important;
}

html[data-brand="one-playground"] :where(small, figcaption, caption, .muted, .text-muted, .secondary, .helper-text, .subtle, .eyebrow, .kicker, .meta, .metric-label, .stat-label, .timeline-label, .bio-age-label, .age-label) {
  color: var(--opg-readable-muted) !important;
  font-weight: 460 !important;
}

html[data-brand="one-playground"] :where(.card, .panel, .surface, .section-card, .metric-card, .stat-card, .timeline-card, .bio-age-card, .result-card, .insight-card, .summary-card, .report-card, .table-card) {
  background-color: rgba(255, 255, 255, .96) !important;
  color: var(--opg-readable-body) !important;
}

html[data-brand="one-playground"] :where(.card, .panel, .surface, .section-card, .metric-card, .stat-card, .timeline-card, .bio-age-card, .result-card, .insight-card, .summary-card, .report-card, .table-card) :where(p, li, span, small, dd, dt, td, th, label) {
  color: inherit;
}

html[data-brand="one-playground"] :where(.card, .panel, .surface, .section-card, .metric-card, .stat-card, .timeline-card, .bio-age-card, .result-card, .insight-card, .summary-card, .report-card, .table-card) :where(.muted, .text-muted, .secondary, .helper-text, .subtle, .eyebrow, .kicker, .meta, small) {
  color: var(--opg-readable-muted) !important;
}

html[data-brand="one-playground"] :where([class*="timeline"], [class*="biological-age"], [class*="bio-age"]) {
  color: var(--opg-readable-body);
}

html[data-brand="one-playground"] :where([class*="timeline"], [class*="biological-age"], [class*="bio-age"]) :where(p, li, span, small, label, td, th) {
  font-weight: 430;
}

html[data-brand="one-playground"] :where(button, .button, .btn, .nav-link, .tab, .pill, .badge) {
  font-weight: 520 !important;
}

html[data-brand="one-playground"][data-opg-page] body h1,
html[data-brand="one-playground"][data-opg-page] body h2,
html[data-brand="one-playground"][data-opg-page] body h3,
html[data-brand="one-playground"][data-opg-page] body h4,
html[data-brand="one-playground"][data-opg-page] body h5,
html[data-brand="one-playground"][data-opg-page] body h6 {
  color: #181818 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html[data-brand="one-playground"][data-opg-page] body p,
html[data-brand="one-playground"][data-opg-page] body li,
html[data-brand="one-playground"][data-opg-page] body dd,
html[data-brand="one-playground"][data-opg-page] body dt,
html[data-brand="one-playground"][data-opg-page] body td,
html[data-brand="one-playground"][data-opg-page] body th,
html[data-brand="one-playground"][data-opg-page] body label,
html[data-brand="one-playground"][data-opg-page] body input,
html[data-brand="one-playground"][data-opg-page] body textarea,
html[data-brand="one-playground"][data-opg-page] body select {
  color: #242424 !important;
  font-weight: 410 !important;
}

html[data-brand="one-playground"][data-opg-page] body small,
html[data-brand="one-playground"][data-opg-page] body figcaption,
html[data-brand="one-playground"][data-opg-page] body caption,
html[data-brand="one-playground"][data-opg-page] body .muted,
html[data-brand="one-playground"][data-opg-page] body .text-muted,
html[data-brand="one-playground"][data-opg-page] body .secondary,
html[data-brand="one-playground"][data-opg-page] body .helper-text,
html[data-brand="one-playground"][data-opg-page] body .subtle,
html[data-brand="one-playground"][data-opg-page] body .eyebrow,
html[data-brand="one-playground"][data-opg-page] body .kicker,
html[data-brand="one-playground"][data-opg-page] body .meta,
html[data-brand="one-playground"][data-opg-page] body .metric-label,
html[data-brand="one-playground"][data-opg-page] body .stat-label,
html[data-brand="one-playground"][data-opg-page] body .timeline-label,
html[data-brand="one-playground"][data-opg-page] body .bio-age-label,
html[data-brand="one-playground"][data-opg-page] body .age-label {
  color: #4b4b4b !important;
  font-weight: 460 !important;
}

html[data-brand="one-playground"][data-opg-page] body .card,
html[data-brand="one-playground"][data-opg-page] body .panel,
html[data-brand="one-playground"][data-opg-page] body .surface,
html[data-brand="one-playground"][data-opg-page] body .section-card,
html[data-brand="one-playground"][data-opg-page] body .metric-card,
html[data-brand="one-playground"][data-opg-page] body .stat-card,
html[data-brand="one-playground"][data-opg-page] body .timeline-card,
html[data-brand="one-playground"][data-opg-page] body .bio-age-card,
html[data-brand="one-playground"][data-opg-page] body .result-card,
html[data-brand="one-playground"][data-opg-page] body .insight-card,
html[data-brand="one-playground"][data-opg-page] body .summary-card,
html[data-brand="one-playground"][data-opg-page] body .report-card,
html[data-brand="one-playground"][data-opg-page] body .table-card {
  background-color: rgba(255, 255, 255, .96) !important;
  color: #242424 !important;
}

html[data-brand="one-playground"][data-opg-page] body .app,
html[data-brand="one-playground"][data-opg-page] body .app-shell,
html[data-brand="one-playground"][data-opg-page] body .page-shell,
html[data-brand="one-playground"][data-opg-page] body .content-shell,
html[data-brand="one-playground"][data-opg-page] body .report-preview,
html[data-brand="one-playground"][data-opg-page] body .report-shell,
html[data-brand="one-playground"][data-opg-page] body .dashboard-shell,
html[data-brand="one-playground"][data-opg-page] body .biomarker-shell,
html[data-brand="one-playground"][data-opg-page] body .timeline-shell,
html[data-brand="one-playground"][data-opg-page] body main {
  background-color: transparent !important;
  background-image: none !important;
}

.opg-demo-body {
  background-color: var(--color-paper);
  background-image: var(--texture-dots);
  background-size: var(--texture-size);
  color: var(--color-ink);
  margin: 0;
  min-height: 100vh;
}

.opg-demo-body .app-shell {
  background-color: var(--color-paper) !important;
  background-image: var(--texture-dots) !important;
  background-size: var(--texture-size) !important;
}

.opg-demo-body .page {
  background: transparent;
}

.dashboard.opg-demo-shell {
  margin: 0 auto;
  padding: 42px 42px 72px;
}

.opg-protocols-page {
  max-width: var(--user-page-max-width);
}

.opg-demo-hero {
  align-items: center;
  margin-bottom: 34px;
  min-height: 230px;
}

.opg-demo-hero.hero-card {
  padding: clamp(30px, 4.8vw, 52px);
}

.opg-demo-hero h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
  max-width: 760px;
}

.opg-demo-hero .hero-text {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  margin-top: 16px;
  max-width: 760px;
}

.opg-protocol-grid {
  display: grid;
  gap: 22px 34px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opg-protocol-card {
  background: rgba(255, 251, 244, 0.26);
  border: 1.5px solid rgba(63, 61, 56, 0.18);
  border-radius: 22px;
  color: inherit;
  display: grid;
  grid-template-rows: minmax(150px, 1fr) 58px;
  min-height: 220px;
  overflow: hidden;
  text-decoration: none;
}

.opg-protocol-card-link {
  cursor: pointer;
}

.opg-protocol-card-body {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 28px 28px 24px;
}

.opg-protocol-card h2 {
  color: #36383f;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 18px;
}

.opg-protocol-card p {
  color: #4f565a;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.45;
  margin: 0;
}

.opg-protocol-mark {
  color: #bf7656;
  display: inline-flex;
  min-width: 48px;
  place-self: start end;
}

.opg-protocol-mark svg {
  fill: none;
  height: 42px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 42px;
}

.opg-protocol-mark-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.opg-demo-action {
  align-items: center;
  align-self: end;
  background: rgba(250, 245, 237, 0.74);
  border: 0;
  border-top: 1px solid rgba(80, 75, 67, 0.2);
  color: #34363d;
  cursor: default;
  display: flex;
  font: inherit;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 600;
  gap: 10px;
  justify-content: flex-start;
  min-height: 58px;
  padding: 0 28px;
  text-align: left;
}

.opg-demo-action svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.opg-demo-action[href] {
  cursor: pointer;
  text-decoration: none;
}

.opg-protocol-run-body {
  background: #f6efe3;
  color: #34363d;
  min-height: 100vh;
}

.opg-protocol-run-body::before {
  display: none;
}

.opg-protocol-progress-dashboard,
.opg-meal-plan-dashboard {
  max-width: var(--user-page-max-width);
}

.opg-protocol-flow-hero {
  margin-bottom: 34px;
  min-height: 190px;
}

.opg-protocol-progress-page {
  display: grid;
  min-height: 0;
  padding: 0 0 42px;
  place-items: start center;
}

.opg-protocol-progress-panel {
  max-width: 860px;
  width: min(860px, 100%);
}

.opg-protocol-progress-title-row {
  align-items: center;
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.opg-protocol-progress-title-row h2 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.opg-protocol-spinner {
  border: 2px solid rgba(52, 54, 61, 0.22);
  border-left-color: #34363d;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  height: 28px;
  width: 28px;
  animation: opgProtocolSpin 1.1s linear infinite;
}

.opg-protocol-progress-list {
  border-left: 8px solid rgba(52, 54, 61, 0.12);
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0 0 0 32px;
}

.opg-protocol-progress-list li {
  align-items: start;
  border-bottom: 1px solid rgba(52, 54, 61, 0.16);
  display: grid;
  gap: 16px;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 122px;
  padding: 26px 0 20px;
}

.opg-protocol-progress-list li:last-child {
  border-bottom: 0;
}

.opg-protocol-progress-icon {
  color: #34363d;
  display: inline-flex;
  height: 28px;
  width: 28px;
}

.opg-protocol-progress-icon svg {
  fill: none;
  height: 28px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  width: 28px;
}

.opg-protocol-progress-list h3 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: clamp(25px, 2.5vw, 33px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 10px;
}

.opg-protocol-progress-list p {
  color: #5d6464;
  font-size: clamp(24px, 2.35vw, 31px);
  line-height: 1.16;
  margin: 0;
}

.opg-protocol-progress-list li:not(.is-active, .is-complete) {
  opacity: 0.95;
}

.opg-protocol-progress-list li.is-active .opg-protocol-progress-icon {
  color: #34363d;
}

.opg-meal-plan-page {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 0 72px;
}

.opg-meal-plan-page-connected {
  max-width: none;
}

.opg-meal-shop-layout {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
}

.opg-protocol-chip {
  background: rgba(52, 54, 61, 0.12);
  border-radius: 14px;
  color: #34363d;
  font-size: 16px;
  line-height: 1;
  margin: 0 auto 20px;
  padding: 13px 20px;
  text-align: center;
  width: max-content;
  max-width: 100%;
}

.opg-meal-plan-intro {
  padding-top: 0;
}

.opg-meal-plan-intro p,
.opg-meal-section p,
.opg-meal-section li {
  color: #34363d;
  font-size: 18px;
  line-height: 1.55;
}

.opg-meal-section {
  margin-top: 28px;
}

.opg-meal-section h2 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 18px;
}

.opg-nutrition-summary {
  border: 1px solid rgba(52, 54, 61, 0.16);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  padding: 18px 20px;
}

.opg-nutrition-summary div {
  align-content: start;
  display: grid;
  gap: 8px;
}

.opg-nutrition-summary strong {
  color: #34363d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.opg-nutrition-summary b {
  color: #34363d;
  font-size: 18px;
  line-height: 1;
}

.opg-macro-dot {
  align-items: center;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  height: 14px;
  justify-content: center;
  line-height: 1;
  margin-right: 5px;
  transform: translateY(-1px);
  width: 14px;
}

.opg-macro-dot.is-calories {
  background: #7f6ed8;
}

.opg-macro-dot.is-protein {
  background: #be7450;
}

.opg-macro-dot.is-carbs {
  background: #3d8edc;
}

.opg-macro-dot.is-fats {
  background: #d9b54b;
}

.opg-meal-benefit-list {
  margin: 0;
  padding-left: 25px;
}

.opg-meal-days {
  display: grid;
  gap: 26px;
}

.opg-meal-days .grocery-empty {
  font-size: 16px;
}

.opg-meal-day h3 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 26px;
}

.opg-meal-day[data-selected="true"] .opg-meal-card {
  border-color: rgba(71, 105, 87, 0.52);
  box-shadow: 0 18px 46px rgba(71, 105, 87, 0.1);
}

.opg-meal-card {
  border: 1px solid rgba(52, 54, 61, 0.16);
  border-radius: 16px;
  padding: 22px 20px 20px;
}

.opg-meal-type {
  color: #5d6464 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  margin: 0 0 8px;
  text-transform: none;
}

.opg-meal-card h4 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 10px;
}

.opg-meal-summary {
  color: #5d6464 !important;
  font-size: 16px !important;
  margin: 0 0 18px !important;
}

.opg-meal-actions {
  border-bottom: 1px solid rgba(52, 54, 61, 0.16);
  margin: -4px 0 20px;
  padding-bottom: 20px;
}

.opg-macro-row {
  align-items: center;
  border-bottom: 1px solid rgba(52, 54, 61, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.opg-macro-item {
  align-items: center;
  color: #34363d;
  display: inline-flex;
  gap: 4px;
  min-width: 72px;
}

.opg-macro-item b {
  font-size: 16px;
}

.opg-ingredient-list {
  margin: 0 0 24px;
  padding-left: 24px;
}

.opg-meal-step-list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding-left: 24px;
}

.opg-meal-card h5 {
  color: #34363d;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 22px 0 8px;
}

.opg-meal-card p {
  margin: 0;
}

.opg-meal-guidance {
  padding-bottom: 30px;
}

.opg-meal-guidance ul {
  margin: 0 0 22px;
  padding-left: 24px;
}

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

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

.opg-order-page {
  max-width: var(--user-page-max-width);
  padding-top: clamp(42px, 4vw, 62px);
}

.opg-order-page .opg-demo-hero {
  margin-bottom: 0;
  min-height: 220px;
}

.opg-order-page .opg-demo-hero h1 {
  font-size: 38px;
  max-width: 760px;
}

.opg-order-panel {
  background:
    linear-gradient(#f9f3ea, #f9f3ea) padding-box,
    linear-gradient(90deg, #c97856 0%, #d7b85a 38%, #aeb8b4 100%) border-box;
  border: 5px solid transparent;
  border-radius: 0 46px 46px 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 52px;
  padding: 52px 48px 36px;
  position: relative;
}

.opg-order-progress {
  height: 52px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -32px;
}

.opg-order-progress::before {
  background: linear-gradient(90deg, #c97856 0%, #d7b85a 42%, #aeb8b4 100%);
  content: "";
  height: 5px;
  left: 86px;
  position: absolute;
  right: 34px;
  top: 28px;
}

.opg-order-start-arrow {
  border-left: 5px solid #c97856;
  border-top: 5px solid #c97856;
  border-radius: 34px 0 0;
  height: 54px;
  left: -5px;
  position: absolute;
  top: 28px;
  width: 64px;
}

.opg-order-start-arrow::after {
  border-right: 5px solid #c97856;
  border-top: 5px solid #c97856;
  content: "";
  height: 18px;
  position: absolute;
  right: -11px;
  top: -14px;
  transform: rotate(45deg);
  width: 18px;
}

.opg-order-step-dot {
  background: #fbf6ed;
  border: 5px solid #d7b85a;
  border-radius: 999px;
  height: 22px;
  position: absolute;
  top: 16px;
  width: 22px;
}

.opg-order-step-dot.is-current {
  background: #f9f3ea;
  border: 11px solid #c97856;
  height: 34px;
  left: 74px;
  top: 5px;
  width: 34px;
}

.opg-order-step-dot.is-secondary {
  left: 39%;
}

.opg-order-step-dot.is-muted {
  border-color: #aeb8b4;
  left: 70%;
}

.opg-order-column {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  min-height: 360px;
  padding: 0 32px 0 0;
}

.opg-order-column + .opg-order-column {
  border-left: 1px solid rgba(70, 65, 58, 0.16);
  padding-left: 32px;
}

.opg-order-frequency {
  color: #555a5c;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 40px;
}

.opg-order-icon {
  color: #b5bcbc;
  display: inline-flex;
  margin-bottom: 22px;
}

.opg-order-icon svg {
  fill: none;
  height: 42px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
  width: 42px;
}

.opg-order-icon.is-warm {
  color: #c97856;
}

.opg-order-icon.is-gold {
  color: #d1b24e;
}

.opg-order-column h2 {
  color: #37383d;
  font-family: var(--font-body);
  font-size: clamp(26px, 2.35vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 16px;
}

.opg-order-subtitle {
  color: #565a5b;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 40px;
}

.opg-order-links {
  align-content: start;
  display: grid;
  gap: 4px;
  margin-bottom: 36px;
}

.opg-order-links a {
  color: #5a5f5f;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.28;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.opg-order-button {
  border: 0;
  border-radius: 10px;
  color: #fffdf8;
  cursor: default;
  font: inherit;
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 600;
  min-height: 58px;
  padding: 0 24px;
}

.opg-order-button.is-gold {
  background: #d2b451;
}

.opg-order-button.is-dark {
  background: #676f6d;
}

.assessment-page {
  color: #303737;
  max-width: min(1340px, calc(100vw - 84px));
  padding-bottom: 64px;
  padding-top: clamp(34px, 4vw, 56px);
}

.assessment-hero {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(248, 243, 233, 0.96), rgba(255, 253, 248, 0.92) 50%, rgba(219, 230, 222, 0.84)),
    radial-gradient(circle at 82% 14%, rgba(71, 105, 87, 0.2), transparent 28%);
  color: #303737;
  display: grid;
  gap: clamp(24px, 4vw, 54px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  margin-bottom: 24px;
  min-height: 0;
}

.assessment-hero.hero-card {
  background:
    linear-gradient(135deg, rgba(248, 243, 233, 0.96), rgba(255, 253, 248, 0.92) 50%, rgba(219, 230, 222, 0.84)),
    radial-gradient(circle at 82% 14%, rgba(71, 105, 87, 0.2), transparent 28%) !important;
  border-color: rgba(52, 63, 61, 0.12);
  color: #303737 !important;
}

.assessment-hero::before,
.assessment-hero::after {
  display: none;
}

.assessment-hero .hero-copy {
  max-width: 760px;
}

.assessment-hero .eyebrow,
.assessment-page .eyebrow {
  color: #476957;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.assessment-hero h1 {
  color: #303737;
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0;
  max-width: 760px;
}

.assessment-hero .hero-text {
  color: #54605f;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  margin-top: 18px;
  max-width: 680px;
}

.assessment-hero-actions,
.assessment-next-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.assessment-primary-action,
.assessment-secondary-action,
.assessment-select-button {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
}

.assessment-primary-action {
  background: #365c49;
  border: 1px solid #365c49;
  color: #fffdf8;
}

button.assessment-primary-action {
  cursor: pointer;
}

.assessment-secondary-action {
  background: rgba(255, 253, 248, 0.7);
  border: 1px solid rgba(54, 92, 73, 0.24);
  color: #365c49;
}

.assessment-hero-panel {
  align-self: end;
  display: grid;
  gap: 12px;
}

.assessment-hero-panel > div {
  align-items: center;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(54, 92, 73, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 14px;
}

.assessment-panel-icon {
  align-items: center;
  background: rgba(71, 105, 87, 0.12);
  border-radius: 8px;
  color: #365c49;
  display: inline-flex;
  grid-row: span 2;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.assessment-panel-icon svg {
  fill: none;
  height: 22px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 22px;
}

.assessment-hero-panel p,
.assessment-hero-panel strong {
  margin: 0;
}

.assessment-hero-panel p {
  color: #65706f;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.assessment-hero-panel strong {
  color: #303737;
  font-size: 15px;
  line-height: 1.25;
}

.assessment-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

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

.assessment-pathway-card,
.assessment-next-panel,
.assessment-process,
.assessment-benefit-panel,
.assessment-faq-panel,
.assessment-guidance {
  background: #fffdf8;
  border: 1px solid rgba(52, 63, 61, 0.14);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(44, 52, 48, 0.08);
}

.assessment-pathway-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 20px;
}

.assessment-pathway-card.is-selected {
  border-color: rgba(54, 92, 73, 0.78);
  box-shadow: 0 20px 46px rgba(54, 92, 73, 0.16);
}

.assessment-card-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.assessment-card-head strong {
  color: #303737;
  font-size: 26px;
  line-height: 1;
}

.assessment-pathway-card h2,
.assessment-next-panel h2,
.assessment-process h2,
.assessment-benefit-panel h2,
.assessment-faq-panel h2,
.assessment-guidance h2 {
  color: #303737;
  font-family: var(--font-display, var(--font-body));
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.assessment-pathway-card h2 {
  font-size: clamp(26px, 2.4vw, 34px);
}

.assessment-card-summary {
  color: #596462;
  font-size: 15px;
  line-height: 1.55;
  margin: 14px 0 18px;
}

.assessment-feature-list,
.assessment-benefit-panel ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.assessment-feature-list li,
.assessment-benefit-panel li {
  color: #3f4847;
  font-size: 14px;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}

.assessment-feature-list li::before,
.assessment-benefit-panel li::before {
  background: #476957;
  border-radius: 999px;
  content: "";
  height: 7px;
  left: 0;
  position: absolute;
  top: 0.58em;
  width: 7px;
}

.assessment-card-limits {
  background: #f7f1e8;
  border-radius: 8px;
  margin-top: auto;
  padding: 14px;
}

.assessment-card-limits.is-positive {
  background: #edf4ee;
}

.assessment-card-limits span {
  color: #365c49;
  display: block;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.assessment-card-limits p {
  color: #596462;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.assessment-select-button {
  background: #fffdf8;
  border: 1px solid rgba(54, 92, 73, 0.24);
  color: #365c49;
  cursor: pointer;
  margin-top: 14px;
  width: 100%;
}

.assessment-pathway-card.is-selected .assessment-select-button {
  background: #365c49;
  border-color: #365c49;
  color: #fffdf8;
}

.assessment-next-panel {
  padding: 22px;
  position: sticky;
  top: 24px;
}

.assessment-next-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.assessment-next-header strong {
  color: #303737;
  font-size: 30px;
  line-height: 1;
}

.assessment-next-panel h2 {
  font-size: 30px;
}

.assessment-next-panel > p {
  color: #596462;
  line-height: 1.55;
}

.assessment-next-steps {
  border-left: 2px solid rgba(71, 105, 87, 0.18);
  display: grid;
  gap: 12px;
  list-style: decimal-leading-zero;
  margin: 20px 0 0 13px;
  padding-left: 18px;
}

.assessment-next-steps li {
  color: #3f4847;
  line-height: 1.45;
  padding-left: 4px;
}

.assessment-status {
  background: #f5f0e6;
  border-radius: 8px;
  color: #596462;
  font-size: 13px;
  line-height: 1.45;
  margin: 16px 0 0;
  padding: 12px;
}

.assessment-status[data-state="selected"] {
  background: #edf4ee;
  color: #365c49;
}

.assessment-process,
.assessment-detail-grid,
.assessment-guidance {
  margin-top: 22px;
}

.assessment-process {
  padding: 26px;
}

.assessment-section-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.assessment-section-heading h2,
.assessment-benefit-panel h2,
.assessment-faq-panel h2,
.assessment-guidance h2 {
  font-size: clamp(26px, 3vw, 42px);
}

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

.assessment-process-grid article {
  background: #f8f4ed;
  border-radius: 8px;
  padding: 18px;
}

.assessment-process-grid span {
  color: #476957;
  display: block;
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 14px;
}

.assessment-process-grid h3 {
  color: #303737;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 8px;
}

.assessment-process-grid p,
.assessment-benefit-panel p,
.assessment-guidance p,
.assessment-faq-panel p {
  color: #596462;
  line-height: 1.55;
  margin: 0;
}

.assessment-detail-grid {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.assessment-benefit-panel,
.assessment-faq-panel {
  padding: 26px;
}

.assessment-benefit-panel h2,
.assessment-faq-panel h2 {
  margin-bottom: 18px;
}

.assessment-faq-panel {
  display: grid;
  gap: 10px;
}

.assessment-faq-panel details {
  border-bottom: 1px solid rgba(52, 63, 61, 0.12);
  padding: 0 0 12px;
}

.assessment-faq-panel details:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.assessment-faq-panel summary {
  color: #303737;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.3;
  list-style-position: outside;
  padding: 5px 0;
}

.assessment-faq-panel details p {
  padding-top: 6px;
}

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

.assessment-guidance p {
  margin-top: 8px;
  max-width: 680px;
}

.grocery-dashboard {
  max-width: min(1360px, calc(100vw - 84px));
  padding-top: clamp(34px, 4vw, 56px);
}

.grocery-hero {
  margin-bottom: 30px;
  min-height: 0;
}

.grocery-hero .grocery-status {
  color: rgba(255, 253, 248, 0.72);
  max-width: 360px;
  position: relative;
  text-align: right;
  z-index: 1;
}

.grocery-status {
  color: #5d6464;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  max-width: 430px;
  text-align: right;
}

.grocery-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
}

.grocery-section-heading {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.grocery-section-heading h2 {
  color: #37383d;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.grocery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.grocery-filter-chip {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 999px;
  color: #4c5555;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  min-height: 32px;
  padding: 8px 11px;
}

.grocery-filter-chip[data-active="true"] {
  background: #476957;
  border-color: #476957;
  color: #fffdf8;
}

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

.grocery-recipe-card,
.grocery-cart-panel {
  background: rgba(255, 251, 244, 0.74);
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(52, 54, 61, 0.07);
}

.grocery-recipe-card {
  display: grid;
  grid-template-rows: 178px minmax(0, 1fr);
  min-height: 530px;
  overflow: hidden;
}

.grocery-recipe-card[data-selected="true"] {
  border-color: rgba(71, 105, 87, 0.52);
  box-shadow: 0 18px 46px rgba(71, 105, 87, 0.14);
}

.grocery-recipe-card[data-resolving="true"] {
  position: relative;
}

.grocery-recipe-card[data-resolving="true"]::after {
  animation: suede-spin 900ms linear infinite;
  background: #fffdf8;
  border: 2px solid #476957;
  border-radius: 999px;
  border-right-color: transparent;
  box-shadow: 0 8px 18px rgba(52, 54, 61, 0.16);
  content: "";
  height: 20px;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 20px;
  z-index: 2;
}

.grocery-recipe-visual {
  align-items: center;
  background: #dfe6dc;
  color: #39473c;
  display: flex;
  font-family: var(--font-display);
  font-size: 40px;
  justify-content: center;
  letter-spacing: 0;
}

.grocery-recipe-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.grocery-recipe-body {
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto;
  padding: 18px;
}

.grocery-recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.grocery-recipe-tags span {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  color: #39473c;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  padding: 6px 8px;
}

.grocery-recipe-card h3 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
}

.grocery-recipe-card p {
  color: #50585a;
  font-size: 14px;
  line-height: 1.48;
  margin: 0;
}

.grocery-recipe-meta {
  color: #5d6464;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}

.grocery-recipe-rating-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.grocery-rating-chip {
  background: rgba(255, 253, 248, 0.76);
  border: 1px solid rgba(63, 61, 56, 0.13);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-width: 132px;
  padding: 8px 10px;
}

.grocery-rating-chip > span {
  color: #606768;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.grocery-rating-chip strong {
  align-items: center;
  color: #37383d;
  display: inline-flex;
  font-size: 13px;
  gap: 5px;
  line-height: 1;
}

.grocery-rating-stars {
  color: rgba(63, 61, 56, 0.24);
  display: inline-flex;
  font-size: 13px;
  gap: 1px;
  letter-spacing: 0;
}

.grocery-rating-stars .is-filled {
  color: #d1a033;
}

.grocery-recipe-sponsor {
  align-items: center;
  color: #606768;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  line-height: 1.35;
  margin: 0;
}

.grocery-recipe-creator-image {
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 999px;
  flex: 0 0 auto;
  height: 30px;
  object-fit: cover;
  width: 30px;
}

.grocery-recipe-links {
  display: grid;
  gap: 8px;
}

.grocery-recipe-links a {
  color: #476957;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.grocery-recipe-links a:hover {
  text-decoration: underline;
}

.grocery-recipe-tutorial {
  background: rgba(255, 253, 248, 0.78);
  border: 1px solid rgba(63, 61, 56, 0.13);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-decoration: none;
  width: 148px;
}

.grocery-recipe-tutorial::before {
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fffdf8;
  border-top: 7px solid transparent;
  content: "";
  height: 0;
  left: calc(50% + 2px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  z-index: 2;
}

.grocery-recipe-tutorial img,
.grocery-recipe-tutorial-placeholder {
  aspect-ratio: 16 / 9;
  background: #efeae2;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.grocery-recipe-tutorial::after {
  background: #e62117;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(25, 26, 29, 0.22);
  content: "";
  height: 30px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
}

.grocery-recipe-tutorial-placeholder {
  align-items: center;
  color: #717775;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
}

.grocery-recipe-select {
  justify-self: start;
}

.grocery-recipe-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grocery-recipe-view {
  background: #fffdf8;
  color: #476957;
}

.grocery-detail-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 130;
}

.grocery-detail-modal[hidden] {
  display: none;
}

.grocery-detail-backdrop {
  background: rgba(27, 28, 31, 0.62);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.grocery-detail-sheet {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 14px;
  box-shadow: 0 32px 90px rgba(44, 45, 51, 0.24);
  display: grid;
  gap: 22px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  position: relative;
  width: min(1060px, 100%);
}

.grocery-detail-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.grocery-detail-heading {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.grocery-detail-eyebrow {
  margin-bottom: 0;
}

.grocery-detail-title {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
}

.grocery-detail-close {
  align-items: center;
  background: #f1ede7;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 999px;
  color: #37383d;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0 16px;
}

.grocery-detail-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

.grocery-detail-side,
.grocery-detail-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.grocery-detail-visual {
  align-items: center;
  background: #dfe6dc;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 12px;
  color: #39473c;
  display: flex;
  font-family: var(--font-display);
  font-size: 52px;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}

.grocery-detail-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.grocery-detail-meta {
  color: #5d6464;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.grocery-detail-meta span {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  padding: 7px 10px;
}

.grocery-detail-summary {
  color: #50585a;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.grocery-detail-section {
  display: grid;
  gap: 10px;
}

.grocery-detail-section h3 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.grocery-detail-section ul,
.grocery-detail-section ol {
  color: #50585a;
  display: grid;
  gap: 8px;
  line-height: 1.48;
  margin: 0;
  padding-left: 22px;
}

.grocery-detail-section li {
  padding-left: 4px;
}

.grocery-detail-benefits {
  color: #50585a;
  line-height: 1.5;
  margin: 0;
}

.grocery-detail-tutorial .grocery-recipe-tutorial {
  width: min(100%, 240px);
}

.grocery-detail-shop-button {
  justify-self: start;
  min-width: 190px;
}

.grocery-cart-panel {
  display: grid;
  gap: 16px;
  overflow: hidden;
  position: sticky;
  top: 22px;
}

.grocery-cart-header,
.grocery-store-row,
.grocery-cart-lines,
.grocery-cart-footer {
  padding-left: 20px;
  padding-right: 20px;
}

.grocery-cart-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-top: 20px;
}

.grocery-cart-header h2 {
  color: #37383d;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.grocery-servings-control {
  align-items: end;
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  justify-items: end;
}

.grocery-servings-control[hidden] {
  display: none;
}

.grocery-servings-label {
  color: #5d6464;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.grocery-servings-stepper {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.grocery-servings-stepper button {
  align-items: center;
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.14);
  border-radius: 999px;
  color: #476957;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  min-width: 30px;
  padding: 0 9px;
}

.grocery-servings-stepper button:disabled {
  cursor: default;
  opacity: 0.42;
}

.grocery-servings-stepper strong {
  color: #37383d;
  font-size: 15px;
  min-width: 22px;
  text-align: center;
}

.grocery-panel-close {
  align-items: center;
  background: #f1ede7;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 999px;
  color: #37383d;
  cursor: default;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 18px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.grocery-store-row {
  align-items: center;
  border-bottom: 1px solid rgba(63, 61, 56, 0.12);
  border-top: 1px solid rgba(63, 61, 56, 0.12);
  color: #5d6464;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  min-height: 48px;
}

.grocery-store-row strong {
  color: #37383d;
}

.grocery-cart-lines {
  display: grid;
  gap: 16px;
  max-height: min(660px, calc(100vh - 320px));
  overflow: auto;
  padding-bottom: 4px;
}

.grocery-processing-card {
  align-items: center;
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.2);
  border-radius: 8px;
  color: #39473c;
  display: flex;
  font-size: 13px;
  font-weight: 760;
  gap: 10px;
  line-height: 1.35;
  min-height: 50px;
  padding: 12px;
}

.grocery-processing-spinner {
  animation: suede-spin 900ms linear infinite;
  border: 2px solid currentColor;
  border-radius: 999px;
  border-right-color: transparent;
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
}

.grocery-cart-section {
  display: grid;
  gap: 10px;
}

.grocery-cart-section-heading {
  background: transparent;
  border: 0;
  color: #37383d;
  cursor: default;
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: 0;
  padding: 0;
  text-align: left;
}

.grocery-cart-section-list {
  display: grid;
  gap: 12px;
}

.grocery-cart-line {
  border-bottom: 1px solid rgba(63, 61, 56, 0.12);
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
}

.grocery-cart-line[data-included="false"] {
  opacity: 0.72;
}

.grocery-ingredient-copy p {
  color: #5d6464;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  margin: 0;
}

.grocery-product-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr);
}

.grocery-product-image {
  align-items: center;
  background: #f5f2ed;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 8px;
  color: #717775;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  overflow: hidden;
  width: 52px;
}

.grocery-product-image img,
.grocery-substitute-image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.grocery-product-details {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.grocery-product-details strong {
  color: #37383d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.grocery-product-details span {
  color: #5d6464;
  font-size: 12px;
  line-height: 1.3;
}

.grocery-line-controls {
  align-items: center;
  display: flex;
  gap: 8px;
  grid-column: 2;
}

.grocery-line-action {
  background: transparent;
  border: 0;
  color: #476957;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 0;
}

.grocery-line-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.grocery-quantity-controls {
  margin-left: auto;
}

.grocery-substitute-panel {
  background: #f7f2ea;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.grocery-substitute-panel > p {
  color: #37383d;
  font-size: 13px;
  font-weight: 760;
  margin: 0;
}

.grocery-substitute-search {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.grocery-substitute-search input {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  color: #37383d;
  font: inherit;
  font-size: 13px;
  min-height: 38px;
  min-width: 0;
  padding: 0 10px;
}

.grocery-substitute-search .document-full-text-button {
  min-height: 38px;
  white-space: nowrap;
}

.grocery-substitute-search-status {
  color: #5d6464;
  font-size: 12px;
  line-height: 1.3;
}

.grocery-substitute-row {
  display: grid;
  gap: 10px;
  grid-auto-columns: minmax(130px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
}

.grocery-substitute-card {
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.grocery-substitute-image {
  align-items: center;
  background: #f5f2ed;
  border-radius: 6px;
  color: #717775;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 74px;
  justify-content: center;
  overflow: hidden;
}

.grocery-substitute-card strong {
  color: #37383d;
  font-size: 13px;
  line-height: 1.2;
}

.grocery-substitute-card span {
  color: #5d6464;
  font-size: 12px;
  line-height: 1.3;
}

.grocery-cart-footer {
  background: #fffdf8;
  border-top: 1px solid rgba(63, 61, 56, 0.16);
  display: grid;
  gap: 12px;
  padding-bottom: 20px;
  padding-top: 16px;
}

.grocery-cart-footer > div {
  align-items: center;
  color: #5d6464;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
}

.grocery-cart-footer > div strong {
  color: #37383d;
  font-size: 22px;
}

.grocery-empty {
  color: #5d6464;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.shop-dashboard {
  max-width: 1440px;
  padding-top: clamp(34px, 4vw, 56px);
}

.shop-hero {
  margin-bottom: 30px;
  min-height: 0;
}

.shop-layout {
  align-items: start;
  display: grid;
  gap: clamp(24px, 2.5vw, 36px);
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.shop-product-region {
  min-width: 0;
}

.shop-section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.shop-section-heading h2 {
  color: #37383d;
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.shop-section-heading p {
  color: #5d6464;
  font-size: 14px;
  margin: 0;
}

.shop-product-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.shop-product-card,
.shop-cart-panel {
  background: rgba(255, 251, 244, 0.72);
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(52, 54, 61, 0.07);
}

.shop-product-card {
  display: grid;
  grid-template-rows: clamp(170px, 14vw, 210px) minmax(0, 1fr);
  min-height: 420px;
  overflow: hidden;
  cursor: pointer;
}

.shop-product-visual {
  align-items: center;
  background: #f5f2ed;
  color: var(--color-ink-soft);
  display: flex;
  font-family: var(--font-display);
  font-size: 42px;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 0;
}

.shop-product-visual img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.shop-product-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 18px;
}

.shop-product-meta,
.shop-cart-header .eyebrow {
  color: #717775;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 9px;
  text-transform: uppercase;
}

.shop-product-card h3,
.shop-cart-line h3 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

.shop-product-description {
  color: #50585a;
  font-size: 14px;
  line-height: 1.48;
  margin: 12px 0 18px;
}

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

.shop-product-footer strong {
  color: #37383d;
  font-size: 18px;
}

.shop-add-button,
.shop-icon-button {
  align-items: center;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  justify-content: center;
}

.shop-add-button {
  background: #37383d;
  color: #fffdf8;
  font-size: 25px;
  height: 42px;
  line-height: 1;
  width: 42px;
}

.shop-add-button:disabled,
.shop-icon-button:disabled,
.shop-checkout-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.shop-cart-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  position: sticky;
  top: 22px;
}

.shop-cart-header {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.shop-cart-header h2 {
  color: #37383d;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.shop-cart-count {
  align-items: center;
  background: #d7b85a;
  border-radius: 999px;
  color: #1f2324;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 10px;
}

.shop-cart-lines {
  display: grid;
  gap: 12px;
}

.shop-empty-cart,
.shop-cart-note {
  color: #5d6464;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.shop-cart-line {
  border-bottom: 1px solid rgba(63, 61, 56, 0.14);
  display: grid;
  gap: 10px;
  padding: 0 0 14px;
}

.shop-cart-line p {
  color: #5d6464;
  font-size: 13px;
  margin: 0;
}

.shop-quantity-controls {
  align-items: center;
  display: flex;
  gap: 8px;
}

.shop-quantity-controls span {
  color: #37383d;
  font-size: 15px;
  font-weight: 750;
  min-width: 24px;
  text-align: center;
}

.shop-icon-button {
  background: #ede4d6;
  color: #37383d;
  height: 31px;
  width: 31px;
}

.shop-icon-button.is-remove {
  background: transparent;
  border: 1px solid rgba(63, 61, 56, 0.2);
  margin-left: auto;
}

.exercise-dashboard {
  max-width: 1440px;
}

.exercise-hero {
  align-items: end;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
}

.exercise-status {
  color: #5d6464;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  text-align: right;
}

.exercise-hero .exercise-status {
  color: rgba(255, 253, 248, 0.72);
  position: relative;
  z-index: 1;
}

.exercise-status[data-status="error"] {
  color: #a93624;
}

.exercise-layout {
  align-items: start;
  display: grid;
  gap: 18px;
}

.exercise-section-heading {
  align-items: end;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  margin-bottom: 16px;
}

.exercise-section-heading h2 {
  color: #37383d;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0;
}

.exercise-search {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.exercise-search span {
  color: #5d6464;
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
}

.exercise-search input {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  color: #37383d;
  font: inherit;
  min-height: 42px;
  padding: 0.65rem 0.8rem;
}

.exercise-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.exercise-filter-chip {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 999px;
  color: #4c5555;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  min-height: 32px;
  padding: 8px 11px;
}

.exercise-filter-chip[data-active="true"] {
  background: #476957;
  border-color: #476957;
  color: #fffdf8;
}

.exercise-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.exercise-card,
.exercise-detail-panel {
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(52, 54, 61, 0.07);
}

.exercise-card {
  background: rgba(255, 251, 244, 0.74);
  cursor: pointer;
  display: grid;
  grid-template-rows: 156px minmax(0, 1fr);
  min-height: 440px;
  overflow: hidden;
}

.exercise-card:hover,
.exercise-card:focus-visible {
  border-color: rgba(71, 105, 87, 0.42);
  outline: none;
}

.exercise-card[data-selected="true"] {
  border-color: rgba(71, 105, 87, 0.52);
  box-shadow: 0 18px 46px rgba(71, 105, 87, 0.14);
}

.exercise-card-visual,
.exercise-detail-visual {
  align-items: center;
  background: #dfe6dc;
  color: #39473c;
  display: flex;
  font-family: var(--font-display);
  font-size: 40px;
  justify-content: center;
  letter-spacing: 0;
}

.exercise-card-visual img,
.exercise-detail-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.exercise-card-body {
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  padding: 18px;
}

.exercise-tag-row,
.exercise-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exercise-tag-row span,
.exercise-detail-chip-row span {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  color: #39473c;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  padding: 6px 8px;
}

.exercise-card h3 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
}

.exercise-card p,
.exercise-detail-panel p,
.exercise-detail-panel li {
  color: #50585a;
  font-size: 14px;
  line-height: 1.48;
  margin: 0;
}

.exercise-card-meta,
.exercise-rating {
  color: #5d6464;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 650;
}

.exercise-stars {
  color: rgba(63, 61, 56, 0.24);
  display: inline-flex;
  gap: 1px;
  letter-spacing: 0;
}

.exercise-stars .is-filled {
  color: #d1a033;
}

.exercise-view-button {
  justify-self: start;
}

.exercise-detail-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 130;
}

.exercise-detail-modal[hidden] {
  display: none;
}

.exercise-detail-backdrop {
  background: rgba(17, 18, 20, 0.82);
  border: 0;
  cursor: pointer;
  inset: 0;
  position: absolute;
}

.exercise-detail-panel {
  align-content: start;
  background: #fffbf4;
  display: grid;
  gap: 22px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  width: min(1080px, 100%);
}

.exercise-detail-empty {
  display: grid;
  gap: 10px;
}

.exercise-detail-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.exercise-detail-heading {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.exercise-detail-header h2 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0;
}

.exercise-detail-close {
  align-items: center;
  background: #f1ede7;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 999px;
  color: #37383d;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0 16px;
}

.exercise-detail-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.exercise-detail-side,
.exercise-detail-content {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.exercise-detail-visual {
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 8px;
  min-height: 280px;
  overflow: hidden;
}

.exercise-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.exercise-detail-meta span {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.13);
  border-radius: 8px;
  color: #4c5555;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.exercise-detail-section {
  display: grid;
  gap: 10px;
}

.exercise-detail-section h3 {
  color: #37383d;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  margin: 0;
}

.exercise-detail-section ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2rem;
}

.exercise-video-card {
  align-items: center;
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.13);
  border-radius: 8px;
  color: #37383d;
  display: grid;
  gap: 12px;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 76px;
  overflow: hidden;
  text-decoration: none;
}

.exercise-video-card:hover,
.exercise-video-card:focus-visible {
  border-color: rgba(71, 105, 87, 0.42);
  outline: none;
}

.exercise-video-thumb {
  align-items: center;
  align-self: stretch;
  background: #dfe6dc;
  color: #fffdf8;
  display: flex;
  justify-content: center;
  min-height: 76px;
  overflow: hidden;
  position: relative;
}

.exercise-video-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.exercise-video-play {
  align-items: center;
  background: rgba(185, 36, 24, 0.9);
  border-radius: 999px;
  color: #fffdf8;
  display: flex;
  font-size: 16px;
  height: 38px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  padding-left: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
}

.exercise-video-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 12px 12px 0;
}

.exercise-video-copy strong {
  color: #37383d;
  font-size: 14px;
  line-height: 1.2;
}

.exercise-video-copy span {
  color: #5d6464;
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.admin-exercises-status {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0.9rem 1rem;
}

.admin-exercises-status[data-status="success"],
.admin-exercises-form-status[data-status="success"] {
  color: #277450;
}

.admin-exercises-status[data-status="error"],
.admin-exercises-form-status[data-status="error"] {
  color: #a93624;
}

.admin-exercises-workbench {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
}

.admin-exercises-panel {
  align-content: start;
  display: grid;
  gap: 1rem;
}

.admin-exercises-toolbar {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.35fr) auto;
}

.admin-exercises-search,
.admin-exercises-status-filter {
  margin: 0;
}

.admin-exercises-list {
  display: grid;
  gap: 0.7rem;
}

.admin-exercise-card {
  align-items: center;
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  padding: 0.9rem;
}

.admin-exercise-card[data-selected="true"] {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 2px rgba(25, 26, 29, 0.12);
}

.admin-exercise-thumb {
  aspect-ratio: 1;
  background: var(--color-panel-soft);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  height: 70px;
  object-fit: cover;
  width: 70px;
}

.admin-exercise-thumb-placeholder {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: 0.95rem;
  font-weight: 900;
  justify-content: center;
}

.admin-exercise-card-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.admin-exercise-card-main strong {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-exercise-card-main span {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-exercise-card-actions {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
}

.admin-exercise-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-exercise-chip-row span {
  background: rgba(71, 105, 87, 0.1);
  border: 1px solid rgba(71, 105, 87, 0.18);
  border-radius: 999px;
  color: #39473c;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  padding: 0.32rem 0.45rem;
}

.admin-exercise-form {
  display: grid;
  gap: 0.9rem;
}

.admin-exercise-field-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.admin-exercises-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.admin-exercises-form-status {
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 850;
  margin: 0;
}

.shop-cart-summary {
  align-items: center;
  border-top: 1px solid rgba(63, 61, 56, 0.16);
  color: #37383d;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  padding-top: 16px;
}

.shop-cart-summary strong {
  font-size: 20px;
}

.shop-checkout-button {
  background: #37383d;
  border: 0;
  border-radius: 8px;
  color: #fffdf8;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 750;
  min-height: 50px;
}

.shop-product-modal {
  align-items: center;
  display: grid;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: fixed;
  z-index: 120;
}

.shop-product-modal[hidden] {
  display: none;
}

.shop-product-modal-backdrop {
  background: rgba(27, 28, 31, 0.6);
  border: 0;
  inset: 0;
  position: absolute;
}

.shop-product-modal-sheet {
  background: #fffdf8;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 14px;
  box-shadow: 0 32px 90px rgba(44, 45, 51, 0.22);
  display: grid;
  gap: 22px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  position: relative;
  width: min(920px, 100%);
}

.shop-product-modal-header {
  align-items: start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.shop-product-modal-header > div {
  min-width: 0;
}

.shop-product-modal-eyebrow,
.shop-product-modal-meta {
  color: #717775;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.shop-product-modal-title {
  color: #37383d;
}

.shop-product-modal-header h2 {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
}

.shop-product-modal-close {
  align-items: center;
  background: #f1ede7;
  border: 1px solid rgba(63, 61, 56, 0.12);
  border-radius: 999px;
  color: #37383d;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 28px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  margin-top: 2px;
  width: 40px;
}

.shop-product-modal-layout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.shop-product-modal-visual {
  align-items: center;
  background: #f5f2ed;
  border: 1px solid rgba(63, 61, 56, 0.16);
  border-radius: 12px;
  color: var(--color-ink-soft);
  display: flex;
  font-family: var(--font-display);
  font-size: 52px;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}

.shop-product-modal-visual img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.shop-product-modal-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.shop-product-modal-description {
  color: #50585a;
  font-size: 15px;
  line-height: 1.52;
  margin: 0;
}

.shop-product-modal-section-title {
  color: #37383d;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
}

.shop-product-modal-variants {
  display: grid;
  gap: 14px;
}

.shop-product-modal-empty {
  color: #50585a;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.shop-product-modal-variant {
  align-items: center;
  border-top: 1px solid rgba(63, 61, 56, 0.12);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding-top: 14px;
}

.shop-product-modal-variant:first-child {
  border-top: 0;
  padding-top: 0;
}

.shop-product-modal-variant-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shop-product-modal-variant-copy strong {
  color: #37383d;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.15;
}

.shop-product-modal-variant-copy span {
  color: #5d6464;
  font-size: 13px;
  line-height: 1.35;
}

.shop-product-modal-variant-action {
  display: grid;
  justify-items: end;
}

html[data-brand="one-playground"][data-opg-page] body.opg-demo-body .app-shell,
html[data-brand="one-playground"][data-opg-page] body.opg-demo-body .page {
  background: transparent !important;
  background-image: none !important;
}

html[data-brand="one-playground"] .opg-demo-hero .eyebrow {
  color: var(--opg-readable-muted) !important;
}

html[data-brand="one-playground"][data-opg-page] body .opg-demo-hero.hero-card h1 {
  color: var(--opg-readable-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
}

html[data-brand="one-playground"] .opg-demo-hero .hero-text {
  color: var(--opg-readable-body) !important;
  font-weight: 410 !important;
}

html[data-brand="one-playground"] .opg-protocol-card h2 {
  color: #36383f !important;
  font-weight: 500 !important;
}

html[data-brand="one-playground"][data-opg-page] body .opg-order-column h2 {
  color: #37383d !important;
  font-weight: 400 !important;
}

html[data-brand="one-playground"][data-opg-page] body .opg-protocol-card p,
html[data-brand="one-playground"][data-opg-page] body .opg-order-frequency,
html[data-brand="one-playground"][data-opg-page] body .opg-order-subtitle {
  color: #555a5c !important;
  font-weight: 400 !important;
}

html[data-brand="one-playground"][data-opg-page] body .opg-order-frequency,
html[data-brand="one-playground"][data-opg-page] body .opg-order-subtitle {
  font-weight: 500 !important;
}

html[data-brand="one-playground"][data-opg-page] body .opg-demo-action,
html[data-brand="one-playground"][data-opg-page] body .opg-order-button {
  font-weight: 600 !important;
}

@media (max-width: 980px) {
  .opg-demo-shell {
    padding: 34px 20px 48px;
  }

  .opg-demo-hero {
    margin-bottom: 28px;
    min-height: 190px;
  }

  .opg-demo-hero h1,
  .opg-order-page .opg-demo-hero h1 {
    font-size: 38px;
  }

  .opg-demo-hero .hero-text {
    font-size: 16px;
  }

  .opg-protocol-grid,
  .opg-order-panel {
    grid-template-columns: 1fr;
  }

  .opg-protocol-card-body {
    padding: 24px;
  }

  .opg-protocol-card h2 {
    font-size: 24px;
  }

  .opg-protocol-card p,
  .opg-demo-action {
    font-size: 18px;
  }

  .opg-order-panel {
    border-radius: 28px;
    margin-top: 22px;
    padding: 28px 24px;
  }

  .opg-order-progress {
    display: none;
  }

  .opg-order-column {
    min-height: 0;
    padding: 0;
  }

  .opg-order-column + .opg-order-column {
    border-left: 0;
    border-top: 1px solid rgba(70, 65, 58, 0.16);
    margin-top: 28px;
    padding: 28px 0 0;
  }

  .opg-order-frequency,
  .opg-order-subtitle {
    font-size: 20px;
    margin-bottom: 22px;
  }

  .opg-order-column h2 {
    font-size: 30px;
  }

  .opg-order-links a {
    font-size: 18px;
  }

  .opg-order-button {
    font-size: 22px;
    min-height: 56px;
  }

  .shop-layout,
  .exercise-layout,
  .exercise-section-heading,
  .exercise-hero {
    grid-template-columns: 1fr;
  }

  .grocery-layout,
  .grocery-recipe-grid {
    grid-template-columns: 1fr;
  }

  .grocery-dashboard {
    max-width: var(--user-page-max-width);
  }

  .grocery-hero {
    grid-template-columns: 1fr;
  }

  .grocery-hero .grocery-status,
  .grocery-status {
    max-width: none;
    text-align: left;
  }

  .grocery-cart-panel {
    order: -1;
    position: static;
    scroll-margin-top: 96px;
  }

  .grocery-cart-lines {
    max-height: none;
  }

  .grocery-detail-modal {
    padding: 16px;
  }

  .exercise-detail-modal {
    padding: 16px;
  }

  .exercise-detail-panel {
    max-height: calc(100vh - 32px);
    padding: 18px;
  }

  .exercise-detail-layout {
    grid-template-columns: 1fr;
  }

  .exercise-detail-visual {
    min-height: 220px;
  }

  .grocery-detail-sheet {
    max-height: calc(100vh - 32px);
    padding: 18px;
  }

  .grocery-detail-layout {
    grid-template-columns: 1fr;
  }

  .grocery-detail-visual {
    min-height: 220px;
  }

  .shop-product-grid {
    grid-template-columns: 1fr;
  }

  .shop-product-card {
    grid-template-rows: 150px minmax(0, 1fr);
    min-height: 0;
  }

  .shop-section-heading {
    align-items: start;
    flex-direction: column;
  }

  .shop-cart-panel {
    position: static;
  }

  .shop-product-modal {
    padding: 16px;
  }

  .shop-product-modal-sheet {
    max-height: calc(100vh - 32px);
    padding: 18px;
  }

  .shop-product-modal-layout {
    grid-template-columns: 1fr;
  }

  .shop-product-modal-visual {
    min-height: 220px;
  }

  .exercise-status,
  .exercise-hero .exercise-status {
    max-width: none;
    text-align: left;
  }

  .assessment-page {
    max-width: var(--user-page-max-width);
    padding: 34px 20px 48px;
  }

  .assessment-hero,
  .assessment-layout,
  .assessment-detail-grid {
    grid-template-columns: 1fr;
  }

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

  .assessment-pathway-grid,
  .assessment-process-grid {
    grid-template-columns: 1fr;
  }

  .assessment-pathway-card {
    min-height: 0;
  }

  .assessment-next-panel {
    position: static;
  }

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

}

@media (max-width: 720px) {
  .opg-demo-hero h1,
  .opg-order-page .opg-demo-hero h1 {
    font-size: 32px;
  }

  .opg-protocol-progress-page {
    padding: 0 0 42px;
    place-items: start center;
  }

  .opg-protocol-progress-title-row {
    gap: 14px;
  }

  .opg-protocol-progress-title-row h2 {
    font-size: 27px;
  }

  .opg-protocol-progress-list {
    border-left-width: 7px;
    margin-left: 12px;
    padding-left: 24px;
  }

  .opg-protocol-progress-list li {
    gap: 12px;
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 108px;
    padding: 22px 0 18px;
  }

  .opg-protocol-progress-list h3 {
    font-size: 23px;
  }

  .opg-protocol-progress-list p {
    font-size: 20px;
  }

  .opg-meal-plan-page {
    padding: 0 0 54px;
  }

  .opg-protocol-chip {
    border-radius: 10px;
    font-size: 14px;
    padding: 11px 14px;
  }

  .opg-meal-plan-intro p,
  .opg-meal-section p,
  .opg-meal-section li {
    font-size: 16px;
  }

  .opg-nutrition-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .opg-meal-card {
    border-radius: 12px;
    padding: 18px 16px;
  }

  .opg-macro-row {
    gap: 14px 20px;
  }

  .opg-macro-item {
    min-width: 64px;
  }

  .assessment-page {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }

  .assessment-hero h1 {
    font-size: 36px;
  }

  .assessment-hero .hero-text {
    font-size: 15px;
  }

  .assessment-hero-panel {
    grid-template-columns: 1fr;
  }

  .assessment-primary-action,
  .assessment-secondary-action,
  .assessment-select-button {
    width: 100%;
  }

  .assessment-pathway-card,
  .assessment-next-panel,
  .assessment-process,
  .assessment-benefit-panel,
  .assessment-faq-panel,
  .assessment-guidance {
    padding: 18px;
  }

  .assessment-card-head strong,
  .assessment-next-header strong {
    font-size: 24px;
  }

  .assessment-next-panel h2 {
    font-size: 28px;
  }
}

@media (max-width: 900px) {
  html[data-brand="one-playground"][data-opg-page] {
    --opg-page-background-size: 100% 100%, 96vw auto !important;
    --opg-page-background-position: center, right top !important;
    --opg-bg-left: rgba(248, 248, 246, .98) !important;
    --opg-bg-mid: rgba(248, 248, 246, .96) !important;
    --opg-bg-right: rgba(248, 248, 246, .9) !important;
  }

  html[data-brand="one-playground"][data-opg-page="auth"] {
    --opg-bg-left: rgba(248, 248, 246, .88) !important;
    --opg-bg-mid: rgba(248, 248, 246, .94) !important;
    --opg-bg-right: rgba(248, 248, 246, .98) !important;
  }
}

html[data-brand="one-playground"][data-opg-page] body.opg-protocol-run-body main {
  background: transparent !important;
}

.mood-dashboard {
  gap: 24px;
}

.mood-hero {
  margin-bottom: 24px;
}

.mood-hero h1 {
  font-size: 42px;
  line-height: 1.05;
  max-width: 760px;
}

.mood-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
}

.mood-entry-panel,
.mood-calendar-panel {
  align-content: start;
  display: grid;
  gap: 22px;
}

.mood-panel-header {
  align-items: start;
  gap: 18px;
}

.mood-panel-title-row {
  align-items: start;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.mood-panel-header h2 {
  font-size: 28px;
  line-height: 1.1;
  margin: 4px 0 0;
}

.mood-settings-button {
  align-items: center;
  background: var(--color-card-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  margin-top: 2px;
  width: 38px;
}

.mood-settings-button:hover,
.mood-settings-button:focus-visible,
.mood-settings-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line) 55%);
  color: var(--color-accent);
  outline: none;
}

.mood-settings-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(197, 113, 71, .16);
}

.mood-settings-button svg {
  fill: none;
  height: 19px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 19px;
}

.mood-settings-panel {
  border-bottom: 1px solid color-mix(in srgb, var(--color-line) 80%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--color-line) 80%, transparent);
  display: grid;
  gap: 12px;
  margin-top: -6px;
  padding: 14px 0;
}

.mood-settings-panel[hidden] {
  display: none;
}

.mood-wheel-wrap {
  aspect-ratio: 1;
  display: grid;
  justify-self: center;
  max-width: 430px;
  position: relative;
  width: min(100%, 430px);
}

.mood-wheel {
  height: 100%;
  overflow: visible;
  width: 100%;
}

.mood-wheel-option {
  cursor: pointer;
  outline: none;
}

.mood-wheel-segment-depth {
  fill: color-mix(in srgb, var(--mood-segment-color) 62%, #1f211f 38%);
  filter:
    drop-shadow(0 1.5px 1.8px rgba(38, 40, 39, .22))
    drop-shadow(0 9px 14px rgba(38, 40, 39, .08));
  opacity: .42;
  pointer-events: none;
  transform: translateY(1.2px) scale(.996);
  transform-box: fill-box;
  transform-origin: center;
  transition: filter .16s ease, opacity .16s ease, transform .16s ease;
}

.mood-wheel-segment {
  fill: color-mix(in srgb, var(--mood-segment-color) 86%, #ffffff 14%);
  stroke: var(--color-card-white);
  stroke-width: 1.2;
  transition: fill .16s ease, filter .16s ease, transform .16s ease;
}

.mood-wheel-segment-highlight {
  fill: transparent;
  opacity: .72;
  pointer-events: none;
  stroke: rgba(255, 253, 248, .28);
  stroke-linejoin: round;
  stroke-width: .55;
  transition: opacity .16s ease, transform .16s ease;
}

.mood-wheel-option:nth-child(even) .mood-wheel-segment-highlight {
  opacity: .5;
}

.mood-wheel-option:hover .mood-wheel-segment,
.mood-wheel-option:focus-visible .mood-wheel-segment,
.mood-wheel-option.is-selected .mood-wheel-segment {
  fill: var(--mood-segment-color);
  filter: drop-shadow(0 12px 18px rgba(38, 40, 39, .16));
  transform: translateY(-.5px);
}

.mood-wheel-option:hover .mood-wheel-segment-depth,
.mood-wheel-option:focus-visible .mood-wheel-segment-depth,
.mood-wheel-option.is-selected .mood-wheel-segment-depth {
  filter:
    drop-shadow(0 2px 2px rgba(38, 40, 39, .26))
    drop-shadow(0 12px 18px rgba(38, 40, 39, .12));
  opacity: .5;
  transform: translateY(1.8px) scale(.998);
}

.mood-wheel-option:hover .mood-wheel-segment-highlight,
.mood-wheel-option:focus-visible .mood-wheel-segment-highlight,
.mood-wheel-option.is-selected .mood-wheel-segment-highlight {
  opacity: .88;
  transform: translateY(-.35px);
}

.mood-wheel-label {
  fill: #fffdf8;
  font-family: var(--font-sans);
  font-size: 4.4px;
  font-weight: 760;
  letter-spacing: 0;
  pointer-events: none;
}

.mood-wheel-center {
  align-items: center;
  appearance: none;
  background: var(--color-card-white);
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, #ffffff 18%);
  border-radius: 50%;
  box-shadow: 0 12px 18px rgba(38, 40, 39, .14);
  color: var(--color-muted);
  cursor: default;
  display: flex;
  font-size: 13px;
  font-weight: 760;
  height: 28%;
  justify-content: center;
  left: 50%;
  opacity: 1;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
  width: 28%;
}

.mood-wheel-center span {
  max-width: 72%;
}

.mood-wheel-center[data-can-go-back="true"] {
  color: var(--color-text);
  cursor: pointer;
}

.mood-wheel-center[data-can-go-back="true"]:hover,
.mood-wheel-center[data-can-go-back="true"]:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-line) 58%);
  box-shadow: 0 14px 22px rgba(38, 40, 39, .18);
  color: var(--color-accent);
  outline: none;
  transform: translate(-50%, calc(-50% - .5px));
}

.mood-wheel-center[data-can-go-back="true"]:focus-visible {
  box-shadow:
    0 14px 22px rgba(38, 40, 39, .18),
    0 0 0 4px rgba(197, 113, 71, .16);
}

.mood-breadcrumb {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px;
  min-height: 26px;
}

.mood-breadcrumb-button {
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-weight: 760;
  padding: 0;
}

.mood-selection {
  border-left: 4px solid var(--color-accent);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 780;
  line-height: 1.25;
  margin: -4px 0 0;
  min-height: 25px;
  padding-left: 14px;
}

.mood-body-check {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .84), rgba(245, 238, 226, .44));
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.mood-body-header {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mood-body-header h3 {
  font-size: 20px;
  line-height: 1.15;
  margin: 4px 0 0;
}

.mood-charge-value {
  background: color-mix(in srgb, var(--mood-charge-color, var(--color-accent)) 16%, #ffffff 84%);
  border: 1px solid color-mix(in srgb, var(--mood-charge-color, var(--color-accent)) 42%, var(--color-line) 58%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--mood-charge-color, var(--color-accent)) 58%, var(--color-ink) 42%);
  font-size: 13px;
  line-height: 1.2;
  padding: 7px 10px;
  white-space: nowrap;
}

.mood-subheading {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mood-field {
  display: grid;
  gap: 9px;
}

.mood-field span {
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 760;
}

.mood-field select,
.mood-field input[type="text"],
.mood-field textarea {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-text);
  font: inherit;
  padding: 13px 14px;
}

.mood-field select {
  min-height: 48px;
}

.mood-field textarea {
  min-height: 96px;
  resize: vertical;
}

.mood-custom-state-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.mood-custom-state-row input {
  min-height: 42px;
}

.mood-custom-state-button {
  align-self: stretch;
  min-height: 42px;
  padding: 9px 14px;
}

.mood-field-hint {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.4;
  margin: -2px 0 0;
}

.mood-field select:focus,
.mood-field textarea:focus,
.mood-field input[type="range"]:focus-visible {
  border-color: var(--color-accent);
  outline: 3px solid rgba(197, 113, 71, .16);
}

.mood-field input[type="range"] {
  --mood-intensity-color: var(--color-accent);
  --mood-intensity-progress: 50%;
  appearance: none;
  background:
    linear-gradient(
      90deg,
      var(--mood-intensity-color) 0 var(--mood-intensity-progress),
      color-mix(in srgb, var(--mood-intensity-color) 16%, #ece6dc 84%) var(--mood-intensity-progress) 100%
    );
  border-radius: 999px;
  height: 10px;
  margin: 10px 0;
  outline-offset: 5px;
  width: 100%;
}

.mood-field input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 10px;
}

.mood-field input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
  height: 10px;
}

.mood-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: #fffdf8;
  border: 3px solid var(--mood-intensity-color);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(38, 40, 39, .18);
  cursor: pointer;
  height: 24px;
  margin-top: -7px;
  width: 24px;
}

.mood-field input[type="range"]::-moz-range-thumb {
  background: #fffdf8;
  border: 3px solid var(--mood-intensity-color);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(38, 40, 39, .18);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.mood-charge-scale {
  color: var(--color-muted);
  display: flex;
  font-size: 11px;
  font-weight: 760;
  justify-content: space-between;
  margin-top: -8px;
}

.mood-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mood-state-chip {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  padding: 9px 11px;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.mood-state-chip:hover,
.mood-state-chip:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-line) 62%);
  color: var(--color-text);
  outline: none;
  transform: translateY(-.5px);
}

.mood-state-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 14%, #ffffff 86%);
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-line) 52%);
  color: color-mix(in srgb, var(--color-accent) 58%, var(--color-ink) 42%);
}

.mood-state-chip-custom {
  border-style: dashed;
}

.mood-pain-check {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .82), rgba(245, 238, 226, .36));
  border: 1px solid color-mix(in srgb, var(--color-line) 84%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.mood-pain-check.is-open {
  border-color: color-mix(in srgb, #d45d4c 34%, var(--color-line) 66%);
}

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

.mood-pain-summary h3 {
  font-size: 18px;
  line-height: 1.18;
  margin: 4px 0 0;
}

.mood-pain-toggle {
  min-height: 38px;
  padding: 8px 13px;
  white-space: nowrap;
}

.mood-pain-fields {
  display: grid;
  gap: 14px;
}

.mood-pain-fields[hidden] {
  display: none;
}

.mood-pain-location-row {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 154px);
}

.mood-pain-location-row .mood-field,
.mood-pain-location-row select {
  min-width: 0;
}

.mood-pain-location-row select {
  box-sizing: border-box;
  width: 100%;
}

.mood-pain-map-stack {
  align-self: end;
  justify-self: end;
  width: min(154px, 100%);
}

.mood-pain-map {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .74), rgba(236, 232, 225, .46));
  border: 1px solid color-mix(in srgb, var(--color-line) 84%, transparent);
  border-radius: 8px;
  margin: 0;
  padding: 10px;
}

.mood-pain-map-3d {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: grab;
  min-height: 160px;
  overflow: hidden;
  padding: 0;
  touch-action: none;
}

.mood-pain-map-3d:empty,
.mood-pain-map-3d.is-unavailable {
  display: none;
}

.mood-pain-map-3d.is-dragging {
  cursor: grabbing;
}

.mood-pain-map-3d canvas {
  display: block;
  height: 160px;
  width: 100%;
}

.mood-pain-map-3d.is-ready + .mood-pain-map-fallback {
  display: none;
}

.mood-pain-map svg {
  display: block;
  height: auto;
  max-height: 160px;
  width: 100%;
}

.mood-body-outline {
  fill: color-mix(in srgb, var(--color-muted) 9%, #ffffff 91%);
  stroke: color-mix(in srgb, var(--color-muted) 32%, var(--color-line) 68%);
  stroke-width: 1.4;
}

.mood-body-limb {
  fill: none;
  stroke: color-mix(in srgb, var(--color-muted) 32%, var(--color-line) 68%);
  stroke-linecap: round;
  stroke-width: 12;
}

.mood-pain-region {
  cursor: pointer;
  fill: rgba(212, 93, 76, .08);
  outline: none;
  stroke: rgba(212, 93, 76, .16);
  stroke-width: 1;
  transition: fill .16s ease, opacity .16s ease, stroke .16s ease, transform .16s ease;
}

.mood-pain-region:hover,
.mood-pain-region:focus-visible {
  fill: rgba(212, 93, 76, .18);
  stroke: rgba(212, 93, 76, .52);
}

.mood-pain-region.is-active {
  fill: rgba(212, 93, 76, .66);
  stroke: rgba(130, 45, 35, .72);
  stroke-width: 1.8;
}

.mood-pain-intensity-field {
  position: relative;
}

.mood-pain-value {
  color: var(--color-text);
  font-size: 13px;
  justify-self: end;
  margin-top: -28px;
}

.mood-pain-safety {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: -2px 0 0;
}

@media (max-width: 720px) {
  .mood-pain-location-row {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 112px;
  }

  .mood-pain-map-stack {
    width: 112px;
  }

  .mood-pain-map-3d {
    min-height: 138px;
  }

  .mood-pain-map-3d canvas {
    height: 138px;
  }
}

.mood-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.mood-save-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.mood-status {
  color: var(--color-muted);
  font-size: 14px;
  margin: -8px 0 0;
  min-height: 20px;
}

.mood-status[data-status="success"] {
  color: #2f7d5a;
}

.mood-status[data-status="error"] {
  color: var(--color-alert);
}

.home-readings-dashboard {
  display: grid;
  gap: 28px;
}

.home-readings-hero {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 28px;
}

.home-readings-hero h1 {
  font-size: 40px;
  letter-spacing: 0;
  line-height: 1.04;
  max-width: 640px;
}

.home-readings-hero .hero-text {
  font-size: 15px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 820px;
}

.home-readings-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
}

.home-reading-panel {
  align-content: start;
  display: grid;
  gap: 20px;
  padding: 24px;
}

.home-reading-panel .panel-header h2 {
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1.12;
}

.home-reading-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.home-reading-field > span:first-child {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-reading-field select,
.home-reading-field input,
.home-reading-field textarea {
  background: #fffdf8;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  min-height: 46px;
  padding: 11px 12px;
  width: 100%;
}

.home-reading-field textarea {
  min-height: 84px;
  resize: vertical;
}

.home-reading-field select:focus,
.home-reading-field input:focus,
.home-reading-field textarea:focus {
  border-color: var(--color-accent);
  outline: 3px solid rgba(197, 113, 71, .16);
}

.hr-value-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.36fr);
}

.home-reading-actions {
  display: flex;
  justify-content: flex-end;
}

.home-reading-status {
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.4;
  margin: -6px 0 0;
  min-height: 18px;
}

.home-reading-status[data-kind="success"] {
  color: #2f7d5a;
}

.home-reading-status[data-kind="error"] {
  color: #a93624;
}

.home-reading-hint {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.home-reading-timeline {
  display: grid;
  gap: 10px;
}

.home-reading-item {
  background: #fffdf8;
  border: 1px solid rgba(229, 222, 212, 0.9);
  border-radius: 8px;
  display: grid;
  gap: 7px;
  padding: 14px;
  position: relative;
}

.home-reading-item::before {
  background: #b9894a;
  border-radius: 999px;
  content: "";
  height: calc(100% - 28px);
  left: 0;
  position: absolute;
  top: 14px;
  width: 3px;
}

.hr-item-head {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.hr-item-head strong {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.home-reading-badge {
  background: rgba(185, 137, 74, 0.13);
  border: 1px solid rgba(185, 137, 74, 0.22);
  border-radius: 999px;
  color: #7a5728;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  padding: 6px 9px;
}

.hr-item-value {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 0.96;
  margin: 2px 0 0;
}

@media (max-width: 900px) {
  .home-readings-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .home-readings-dashboard {
    gap: 20px;
  }

  .home-readings-hero {
    padding: 22px;
  }

  .home-readings-hero h1 {
    font-size: 30px;
  }

  .home-reading-panel {
    padding: 18px;
  }

  .hr-value-row {
    grid-template-columns: 1fr;
  }

  .hr-item-head {
    display: grid;
  }

  .home-reading-badge {
    justify-self: start;
  }
}

.mood-month-actions {
  display: inline-flex;
  gap: 8px;
}

.mood-icon-button {
  align-items: center;
  background: var(--color-card-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.mood-icon-button svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 20px;
}

.mood-calendar {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mood-weekday {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 820;
  text-align: center;
  text-transform: uppercase;
}

.mood-day {
  --mood-day-color: transparent;
  --mood-energy-color: var(--color-muted);
  --mood-energy-width: 0%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--mood-day-color) 15%, #fffdf8 85%);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  color: var(--color-text);
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  text-align: left;
}

.mood-day-empty {
  background: transparent;
  border-color: transparent;
  pointer-events: none;
}

.mood-day.has-entry {
  border-color: color-mix(in srgb, var(--mood-day-color) 45%, var(--color-line) 55%);
}

.mood-day.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mood-day-color) 30%, rgba(197, 113, 71, .18) 70%);
}

.mood-day-number {
  font-size: 13px;
  font-weight: 780;
}

.mood-day-dots {
  display: flex;
  gap: 3px;
  min-height: 7px;
}

.mood-day-energy {
  background: color-mix(in srgb, var(--mood-energy-color) 18%, #ffffff 82%);
  border-radius: 999px;
  display: block;
  height: 4px;
  overflow: hidden;
  position: relative;
}

.mood-day-energy::before {
  background: var(--mood-energy-color);
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: var(--mood-energy-width);
}

.mood-day-dot {
  border-radius: 999px;
  height: 6px;
  width: 6px;
}

.mood-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.mood-legend-item {
  align-items: center;
  color: var(--color-muted);
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}

.mood-legend-dot {
  border-radius: 999px;
  height: 9px;
  width: 9px;
}

.mood-legend-energy {
  border-left: 1px solid var(--color-line);
  padding-left: 14px;
}

.mood-legend-energy-bar {
  background: linear-gradient(90deg, #4F7CAC 0%, #66A182 50%, #D98A45 100%);
  border-radius: 999px;
  display: inline-block;
  height: 5px;
  width: 28px;
}

.mood-weekly-snapshot {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .78), rgba(245, 238, 226, .42));
  border: 1px solid color-mix(in srgb, var(--color-line) 82%, transparent);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.mood-weekly-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mood-weekly-heading h3 {
  font-size: 20px;
  line-height: 1.15;
  margin: 4px 0 0;
}

.mood-snapshot-source {
  background: color-mix(in srgb, var(--color-accent) 13%, #ffffff 87%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 38%, var(--color-line) 62%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-accent) 58%, var(--color-ink) 42%);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  padding: 6px 9px;
}

.mood-snapshot-source[hidden] {
  display: none;
}

.mood-weekly-snapshot p {
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.mood-weekly-snapshot ul {
  color: var(--color-muted);
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.mood-weekly-snapshot li {
  font-size: 13px;
  line-height: 1.45;
}

.mood-weekly-snapshot .mood-weekly-focus {
  color: var(--color-muted);
  font-size: 13px;
}

.mood-log {
  display: grid;
  gap: 12px;
}

.mood-log-list {
  display: grid;
  gap: 10px;
}

.mood-log-item {
  border-left: 4px solid var(--mood-entry-color);
  background: color-mix(in srgb, var(--mood-entry-color) 8%, #fffdf8 92%);
  border-radius: 8px;
  padding: 13px 14px;
}

.mood-log-title {
  font-size: 15px;
  font-weight: 780;
}

.mood-log-meta {
  color: var(--color-muted);
  font-size: 13px;
  margin-top: 4px;
}

.mood-log-states {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.mood-log-state {
  background: color-mix(in srgb, var(--mood-entry-color) 12%, #ffffff 88%);
  border: 1px solid color-mix(in srgb, var(--mood-entry-color) 32%, var(--color-line) 68%);
  border-radius: 999px;
  color: var(--color-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  padding: 6px 9px;
}

.mood-log-pain {
  background: color-mix(in srgb, #d45d4c 12%, #ffffff 88%);
  border: 1px solid color-mix(in srgb, #d45d4c 35%, var(--color-line) 65%);
  border-radius: 999px;
  color: var(--color-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  margin-top: 9px;
  padding: 6px 9px;
}

.mood-log-trigger {
  background: color-mix(in srgb, var(--mood-entry-color) 14%, #ffffff 86%);
  border: 1px solid color-mix(in srgb, var(--mood-entry-color) 35%, var(--color-line) 65%);
  border-radius: 999px;
  color: var(--color-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  margin-top: 9px;
  padding: 6px 9px;
}

.mood-log-change,
.mood-empty {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.mood-empty {
  margin: 0;
}

html[data-brand="one-playground"] .mood-wheel-segment {
  stroke: #f8f8f6;
}

html[data-brand="one-playground"] .mood-wheel-segment-highlight {
  stroke: rgba(255, 255, 255, .34);
}

html[data-brand="one-playground"] .mood-wheel-center,
html[data-brand="one-playground"] .mood-field select,
html[data-brand="one-playground"] .mood-field input[type="text"],
html[data-brand="one-playground"] .mood-field textarea,
html[data-brand="one-playground"] .mood-icon-button,
html[data-brand="one-playground"] .mood-body-check,
html[data-brand="one-playground"] .mood-pain-check,
html[data-brand="one-playground"] .mood-state-chip,
html[data-brand="one-playground"] .mood-day,
html[data-brand="one-playground"] .mood-weekly-snapshot {
  background-color: var(--brand-color-panel, #ffffff);
}

@media (max-width: 980px) {
  .mood-layout {
    grid-template-columns: 1fr;
  }

  .mood-wheel-wrap {
    max-width: 380px;
  }
}

@media (max-width: 640px) {
  .mood-hero h1 {
    font-size: 34px;
  }

  .mood-entry-panel,
  .mood-calendar-panel {
    gap: 18px;
  }

  .mood-panel-header {
    align-items: stretch;
  }

  .mood-wheel-label {
    font-size: 4px;
  }

  .mood-day {
    border-radius: 7px;
    padding: 6px;
  }

  .mood-calendar {
    gap: 5px;
  }
}

@media (max-width: 720px) {
  .login-page {
    --auth-mobile-brand-primary: var(--brand-color-primary, var(--color-ink, #191a1d));
    --auth-mobile-brand-accent: var(--brand-color-accent, var(--color-clay, #8c7867));
    --auth-mobile-surface: var(--brand-color-background, #f8f6f1);
    --auth-mobile-panel: var(--brand-color-panel, #f4f1eb);
    --auth-mobile-ink: var(--brand-color-text, var(--color-ink, #191a1d));
    --auth-mobile-muted: var(--brand-color-muted, var(--color-muted, #606975));
    --auth-mobile-line: var(--brand-color-border, rgba(25, 26, 29, 0.12));
    --auth-mobile-band: color-mix(in srgb, var(--auth-mobile-brand-accent) 12%, transparent);
    --auth-mobile-press: color-mix(in srgb, var(--auth-mobile-brand-primary) 7%, transparent);
    min-height: 100dvh;
    background:
      linear-gradient(180deg, var(--auth-mobile-band), transparent 280px),
      var(--auth-mobile-surface);
    color: var(--auth-mobile-ink);
    color-scheme: light dark;
  }

  .login-shell {
    display: block;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 24px) 0 calc(env(safe-area-inset-bottom) + 34px);
  }

  .login-card,
  html[data-brand="one-playground"] .login-card {
    width: min(100%, 680px);
    margin: 0 auto;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .login-wordmark {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    margin: 0 24px 28px;
    color: var(--auth-mobile-ink);
    text-decoration: none;
  }

  .login-wordmark .wordmark-node {
    color: var(--auth-mobile-ink);
  }

  .login-wordmark .wordmark-health {
    color: var(--auth-mobile-muted);
  }

  .login-copy {
    gap: 10px;
    padding: 0 24px 24px;
  }

  .login-copy .eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    color: var(--auth-mobile-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.11em;
  }

  .login-copy .eyebrow::before {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--auth-mobile-brand-accent);
    border-radius: 999px;
    content: "";
  }

  .login-copy h1,
  html[data-brand="one-playground"] .login-copy h1 {
    max-width: 12ch;
    color: var(--auth-mobile-ink);
    font-size: clamp(2.2rem, 11vw, 3.45rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.94;
  }

  .login-copy p:last-child {
    max-width: 32rem;
    color: var(--auth-mobile-muted);
    font-size: 1rem;
    line-height: 1.45;
  }

  .login-form {
    gap: 0;
    margin: 4px 0 0;
    border-top: 1px solid var(--auth-mobile-line);
    border-bottom: 1px solid var(--auth-mobile-line);
  }

  .signup-field-grid {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .login-form label,
  html[data-brand="one-playground"] .login-form label {
    gap: 8px;
    padding: 16px 24px;
    color: var(--auth-mobile-muted);
    border-bottom: 1px solid var(--auth-mobile-line);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
  }

  .login-form label:focus-within {
    background: var(--auth-mobile-press);
  }

  .login-form input,
  html[data-brand="one-playground"] .login-form input {
    min-height: 30px;
    padding: 0;
    color: var(--auth-mobile-ink);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.05rem;
  }

  .login-form input:focus {
    outline: none;
    box-shadow: none;
  }

  .login-submit,
  html[data-brand="one-playground"] .login-submit {
    width: calc(100% - 48px);
    min-height: 54px;
    margin: 20px 24px 0;
    padding: 0 18px;
    color: var(--auth-mobile-surface);
    background: var(--auth-mobile-brand-primary);
    border-radius: 999px;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .login-status {
    min-height: 1.4em;
    margin: 12px 24px 0;
    color: var(--auth-mobile-muted);
  }

  .login-status[data-status="error"] {
    color: var(--status-out-of-range, #b65f49);
  }

  .signup-code-status {
    min-height: 1.3em;
    margin: 10px 24px 0;
    color: var(--auth-mobile-muted);
    font-size: 0.88rem;
  }

  .signup-code-status[data-status="success"] {
    color: var(--status-optimal, #2f6b4f);
  }

  .signup-code-status[data-status="error"] {
    color: var(--status-out-of-range, #b65f49);
  }

  .login-switch {
    margin: 20px 24px 0;
    padding-top: 18px;
    color: var(--auth-mobile-muted);
    border-top: 1px solid var(--auth-mobile-line);
    font-size: 0.95rem;
  }

  .login-switch a {
    color: var(--auth-mobile-brand-primary);
  }

  .auth-legal-links,
  .auth-terms-note {
    margin: 18px 24px 0;
    padding-top: 16px;
    color: var(--auth-mobile-muted);
    border-top: 1px solid var(--auth-mobile-line);
  }

  .auth-legal-links a,
  .auth-terms-note a {
    color: var(--auth-mobile-brand-primary);
  }

  .legal-shell {
    padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 34px);
  }

  .legal-header {
    align-items: flex-start;
    display: grid;
    gap: 22px;
    margin-bottom: 40px;
  }

  .legal-nav {
    justify-content: flex-start;
  }

  .legal-document > h1 {
    font-size: clamp(36px, 12vw, 52px);
    line-height: 1;
  }
}

@media (max-width: 720px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .login-page {
    --auth-mobile-brand-primary: #eadfd2;
    --auth-mobile-brand-accent: #c2a88f;
    --auth-mobile-surface: #14161a;
    --auth-mobile-panel: #1c1f24;
    --auth-mobile-ink: #f4f0e8;
    --auth-mobile-muted: #a9adb6;
    --auth-mobile-line: rgba(244, 240, 232, 0.14);
    --auth-mobile-band: color-mix(in srgb, var(--auth-mobile-brand-accent) 11%, transparent);
    --auth-mobile-press: color-mix(in srgb, var(--auth-mobile-brand-primary) 10%, transparent);
  }
}

html[data-theme="dark"] .login-page {
  --auth-mobile-brand-primary: #eadfd2;
  --auth-mobile-brand-accent: #c2a88f;
  --auth-mobile-surface: #14161a;
  --auth-mobile-panel: #1c1f24;
  --auth-mobile-ink: #f4f0e8;
  --auth-mobile-muted: #a9adb6;
  --auth-mobile-line: rgba(244, 240, 232, 0.14);
  --auth-mobile-band: color-mix(in srgb, var(--auth-mobile-brand-accent) 11%, transparent);
  --auth-mobile-press: color-mix(in srgb, var(--auth-mobile-brand-primary) 10%, transparent);
}

html[data-theme="dark"]:not([data-brand="one-playground"]) {
  --color-ink: #f4f0e8 !important;
  --color-selected: #faf7f1 !important;
  --color-graphite: #c4c7cc !important;
  --color-graphite-soft: #b3b6bb !important;
  --color-ink-soft: #d0d4da !important;
  --color-ink-subtle: #a7acb3 !important;
  --color-muted: #a9adb6 !important;
  --color-line: rgba(244, 240, 232, 0.14) !important;
  --color-line-strong: rgba(244, 240, 232, 0.22) !important;
  --color-hairline: rgba(244, 240, 232, 0.1) !important;
  --color-hairline-card: rgba(244, 240, 232, 0.08) !important;
  --color-hairline-soft: rgba(244, 240, 232, 0.06) !important;
  --color-paper: #101114 !important;
  --color-panel: #16191d !important;
  --color-panel-soft: #13161a !important;
  --color-sidebar: #14161a !important;
  --color-clay: #c2a88f !important;
  --color-clay-dark: #c2a88f !important;
  --color-clay-soft: #4e4438 !important;
  --color-olive: #a7acb3 !important;
  --color-alert: #df9077 !important;
  --color-sand: #101114 !important;
  --color-card-white: #1b1f25 !important;
  --color-card-cream: #171a1f !important;
  --color-icon-well: #1e2228 !important;
  --status-in-range-rgb: 169, 173, 182 !important;
  --status-in-range: rgb(var(--status-in-range-rgb)) !important;
  --status-out-of-range: #c2a88f !important;
  --status-other-rgb: 152, 156, 163 !important;
  --status-other: rgb(var(--status-other-rgb)) !important;
  --texture-dots: radial-gradient(rgba(255, 255, 255, 0.06) 1.2px, transparent 1.5px) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) body,
html[data-theme="dark"]:not([data-brand="one-playground"]) .app-shell,
html[data-theme="dark"]:not([data-brand="one-playground"]) .report-preview-body {
  background-color: var(--color-paper) !important;
  background-image: var(--texture-dots) !important;
  color: var(--color-ink);
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .sidebar,
html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-header,
html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-nav {
  background: var(--color-sidebar) !important;
  border-color: var(--color-line) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-nav-item {
  background: var(--color-panel) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-nav-item:hover,
html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-nav-item:focus-visible {
  background: var(--color-card-white) !important;
  border-color: var(--color-line-strong) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .mobile-nav-item-active {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.page, .dashboard, main) {
  color: var(--color-ink);
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .panel,
  .story-card,
  .account-panel,
  .mood-entry-panel,
  .mood-calendar-panel,
  .mood-settings-panel,
  .health-weekly-panel,
  .health-snapshot-panel,
  .digital-consultant-chat-panel,
  .digital-consultant-goals-panel,
  .digital-consultant-memory-panel,
  .digital-consultant-context-panel,
  .wearable-connect-panel,
  .wearable-summary-panel,
  .wearable-activities-panel,
  .wearable-activity-detail-panel,
  .wearable-day-panel,
  .wearable-samples-panel,
  .wearable-upload-panel,
  .wearable-imports-panel,
  .document-upload-panel,
  .document-imports-panel,
  .home-mood-panel,
  .home-health-snapshot-panel,
  .home-wearables-panel,
  .followup-card
) {
  background: var(--color-card-cream) !important;
  background-image: none !important;
  border-color: var(--color-line) !important;
  box-shadow: none !important;
  color: var(--color-ink);
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  input,
  select,
  textarea,
  .account-input,
  .date-chip,
  .mood-wheel-center,
  .mood-body-check,
  .mood-day,
  .mood-weekly-snapshot,
  .mood-log-item,
  .mood-log-state,
  .mood-log-pain,
  .mood-log-trigger,
  .mood-trigger-chip,
  .mood-state-chip,
  .page-report-picker select,
  .page-report-picker-inline select
) {
  background: var(--color-panel) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .panel p,
  .story-card p,
  .hero-text,
  .mood-panel-header p,
  .mood-log-meta,
  .account-plan-detail,
  .account-history-body,
  .health-snapshot-panel p,
  .digital-consultant-message-body,
  .wearable-empty,
  .document-upload-help
) {
  color: var(--color-ink-soft);
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.hero-card) {
  background: #20242a !important;
  background-image: none !important;
  border-color: var(--color-line) !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .hero-card :where(h1, h2, p, .hero-text) {
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .hero-card .eyebrow {
  color: var(--color-muted) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.button-primary, .document-upload-button, .followup-button) {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.button-secondary, .account-editor-button, .mood-settings-button) {
  background: var(--color-panel) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .wearable-metric-card,
  .wearable-focus-controls,
  .wearable-focus-controls button,
  .wearable-metric-drawer,
  .wearable-metric-group,
  .wearable-sleep-primary,
  .wearable-sleep-stat-grid span,
  .wearable-sleep-card,
  .wearable-sleep-timeline,
  .wearable-sleep-stage-bar,
  .wearable-activity-card,
  .wearable-activity-icon,
  .wearable-provider-pill,
  .wearable-activity-stats span,
  .wearable-route-real-map,
  .wearable-route-map,
  .wearable-activity-summary-grid span,
  .wearable-analysis-card,
  .wearable-analysis-legend span,
  .wearable-analysis-plot,
  .wearable-analysis-svg,
  .wearable-split-panel,
  .wearable-split-plot,
  .wearable-split-average-line b,
  .wearable-timeline-card,
  .wearable-timeline-card-header > span,
  .wearable-sparkline,
  .wearable-baseline-grid span,
  .wearable-day-metric-button,
  .wearable-import-card,
  .wearable-table-wrap,
  .home-wearables-stat,
  .home-layout-toggle,
  .home-layout-reset,
  .home-layout-editor,
  .home-layout-row,
  .health-weekly-email,
  .health-snapshot-note-card,
  .health-snapshot-list-item,
  .health-snapshot-source-item,
  .health-snapshot-empty,
  .health-snapshot-chip,
  .admin-function-nav,
  .digital-consultant-status,
  .digital-consultant-ai-pill,
  .digital-consultant-starter,
  .digital-consultant-chat-log,
  .digital-consultant-message,
  .digital-consultant-replies button,
  .digital-consultant-composer textarea,
  .digital-consultant-goal-form input,
  .digital-consultant-goal-form select,
  .digital-consultant-voice-button,
  .digital-consultant-memory-summary,
  .digital-consultant-goal-group,
  .digital-consultant-empty,
  .admin-plan-list-item,
  .admin-plan-price,
  .admin-plan-feature,
  .admin-biomarker-card,
  .admin-biomarker-target-row,
  .admin-shopify-status,
  .admin-shopify-product,
  .admin-shopify-product-thumbnail,
  .admin-pathology-status,
  .admin-pathology-template-admin-card,
  .admin-pathology-template-active-row,
  .admin-pathology-template-test-row,
  .admin-recipes-status,
  .admin-recipe-card,
  .admin-recipe-thumb,
  .admin-recipe-partner-card,
  .admin-recipe-partner-avatar,
  .admin-recipes-filter-chip,
  .admin-recipe-chip-row span,
  .admin-recipe-match-row,
  .admin-recipe-match-badge,
  .admin-exercises-status,
  .admin-exercise-card,
  .admin-exercise-thumb,
  .admin-exercise-chip-row span,
  .admin-ingredient-stat,
  .admin-ingredient-card,
  .admin-ingredient-mismatch-summary,
  .admin-ingredient-mismatch-group,
  .exercise-search input,
  .exercise-filter-chip,
  .exercise-card,
  .exercise-card-visual,
  .exercise-detail-panel,
  .exercise-detail-close,
  .exercise-detail-visual,
  .exercise-detail-meta span,
  .exercise-video-card,
  .exercise-video-thumb,
  .exercise-tag-row span,
  .exercise-detail-chip-row span,
  .grocery-filter-chip,
  .grocery-recipe-card,
  .grocery-rating-chip,
  .grocery-recipe-tutorial,
  .grocery-recipe-tutorial-placeholder,
  .grocery-detail-sheet,
  .grocery-detail-visual,
  .grocery-detail-close,
  .grocery-detail-meta span,
  .grocery-cart-panel,
  .grocery-recipe-tags span,
  .grocery-store-row,
  .grocery-cart-line,
  .grocery-substitute-panel,
  .grocery-substitute-card,
  .grocery-cart-footer,
  .grocery-panel-close,
  .track-change-stat,
  .track-panel-acknowledgement,
  .report-change-acknowledgement,
  .report-preview-change-card,
  .biological-age-latest-card,
  .biological-age-chart,
  .biological-age-timeline-section,
  .biological-age-timeline-card,
  .category-results-section,
  .category-insight-section,
  .category-counts span,
  .biomarker-chart-card,
  .document-dropzone,
  .document-review-card,
  .document-processing-card,
  .shop-product-card,
  .shop-cart-panel,
  .shop-product-visual,
  .shop-cart-line,
  .shop-product-modal-sheet,
  .shop-product-modal-visual,
  .shop-product-modal-variant,
  .shop-icon-button
) {
  background: var(--color-panel) !important;
  background-image: none !important;
  border-color: var(--color-line) !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .wearable-metric-card:hover,
  .wearable-metric-card:focus-visible,
  .wearable-focus-controls button:hover,
  .wearable-focus-controls button:focus-visible,
  .wearable-focus-controls button[data-active="true"],
  .track-change-stat:hover,
  .category-result-row:hover,
  .all-category-biomarker:hover,
  .document-dropzone:hover,
  .digital-consultant-starter:hover,
  .digital-consultant-starter:focus-visible,
  .digital-consultant-replies button:hover,
  .digital-consultant-replies button:focus-visible,
  .exercise-card:hover,
  .exercise-card:focus-visible,
  .exercise-video-card:hover,
  .exercise-video-card:focus-visible,
  .grocery-recipe-card:hover,
  .grocery-recipe-card:focus-visible,
  .shop-product-card:hover,
  .shop-product-card:focus-visible
) {
  background: var(--color-card-white) !important;
  border-color: var(--color-line-strong) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .wearable-metric-card strong,
  .wearable-sleep-primary strong,
  .wearable-sleep-stage-row strong,
  .wearable-sleep-trend b,
  .wearable-timeline-card-header strong,
  .health-weekly-email strong,
  .health-snapshot-list-item > a,
  .health-snapshot-list-item > strong,
  .digital-consultant-starter strong,
  .digital-consultant-message-body p,
  .digital-consultant-context-panel li,
  .digital-consultant-goal-group h3,
  .digital-consultant-goal-group p,
  .digital-consultant-memory-panel li,
  .digital-consultant-memory-summary,
  .digital-consultant-empty,
  .admin-plan-summary h2,
  .admin-plan-price,
  .admin-plan-feature,
  .admin-biomarker-card strong,
  .admin-biomarker-description,
  .admin-shopify-product-main strong,
  .admin-pathology-template-admin-main strong,
  .admin-pathology-template-tests-editor h3,
  .admin-recipe-card-main strong,
  .admin-exercise-card-main strong,
  .admin-recipe-match-title strong,
  .admin-recipe-match-product strong,
  .admin-ingredient-stat strong,
  .admin-ingredient-title strong,
  .admin-ingredient-product strong,
  .admin-ingredient-mismatch-header strong,
  .admin-recipe-partner-main strong,
  .exercise-section-heading h2,
  .exercise-card h3,
  .exercise-detail-header h2,
  .exercise-detail-section h3,
  .exercise-video-copy strong,
  .grocery-rating-chip strong,
  .grocery-detail-title,
  .grocery-detail-section h3,
  .grocery-section-heading h2,
  .grocery-recipe-card h3,
  .grocery-cart-header h2,
  .grocery-store-row strong,
  .grocery-cart-section-heading,
  .grocery-product-details strong,
  .grocery-substitute-panel > p,
  .grocery-substitute-card strong,
  .grocery-cart-footer > div strong,
  .category-counts strong,
  .category-result-row strong,
  .document-dropzone-copy strong,
  .document-review-card h3,
  .shop-section-heading h2,
  .shop-product-card h3,
  .shop-cart-header h2,
  .shop-cart-line h3,
  .shop-product-footer strong,
  .shop-cart-summary,
  .shop-cart-summary strong,
  .shop-quantity-controls span,
  .shop-product-modal-title,
  .shop-product-modal-header h2,
  .shop-product-modal-variant-copy strong
) {
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-analysis-svg rect {
  fill: var(--color-panel) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-analysis-grid path {
  stroke: rgba(244, 240, 232, 0.12) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .wearable-metric-label,
  .wearable-metric-card span:not(.wearable-metric-label),
  .wearable-metric-card small,
  .wearable-focus-header span,
  .wearable-metric-drawer summary small,
  .wearable-metric-group summary small,
  .wearable-sleep-primary small,
  .wearable-sleep-stat-grid span,
  .wearable-sleep-stat-grid b,
  .wearable-sleep-timeline-labels,
  .wearable-sleep-stage-row > span,
  .wearable-sleep-stage-row small,
  .wearable-sleep-trend span,
  .wearable-activity-card small,
  .wearable-provider-pill,
  .wearable-activity-stats span,
  .wearable-activity-stats b,
  .wearable-route-legend,
  .wearable-route-real-map,
  .wearable-analysis-time-label,
  .wearable-analysis-legend span,
  .wearable-analysis-legend small,
  .wearable-analysis-y-axis,
  .wearable-analysis-time-axis,
  .wearable-split-panel-head span,
  .wearable-split-distance-labels span,
  .wearable-split-y-axis span,
  .wearable-split-average-line b,
  .wearable-activity-summary-grid span,
  .wearable-timeline-card-header > span,
  .wearable-baseline-grid span,
  .wearable-baseline-grid b,
  .health-snapshot-empty,
  .home-layout-status,
  .mood-log-meta,
  .mood-log-change,
  .mood-log-state,
  .mood-log-pain,
  .mood-log-trigger,
  .admin-function-nav a,
  .digital-consultant-status,
  .digital-consultant-ai-pill,
  .digital-consultant-starter span,
  .digital-consultant-message-label,
  .digital-consultant-replies button,
  .digital-consultant-composer label,
  .digital-consultant-goal-form span,
  .digital-consultant-memory-meta,
  .admin-plan-feature-summary,
  .admin-plan-summary-meta,
  .admin-plan-feature-count,
  .admin-plan-feature-heading span,
  .admin-biomarker-card span,
  .admin-biomarker-card small,
  .admin-search-message,
  .admin-shopify-status,
  .admin-shopify-product-main span,
  .admin-shopify-product-details span,
  .admin-pathology-status,
  .admin-pathology-template-admin-main span,
  .admin-pathology-template-admin-main small,
  .admin-recipes-status,
  .admin-recipe-card-main span,
  .admin-exercises-status,
  .admin-exercise-card-main span,
  .admin-exercise-chip-row span,
  .admin-recipe-match-summary,
  .admin-recipe-match-meta,
  .admin-recipe-match-product span,
  .admin-recipe-match-substitutes,
  .admin-ingredient-stat span,
  .admin-ingredient-product span,
  .admin-ingredient-product small,
  .admin-ingredient-mismatch-header span,
  .admin-recipe-partner-main span,
  .admin-recipe-chip-row span,
  .exercise-search span,
  .exercise-status,
  .exercise-filter-chip,
  .exercise-card p,
  .exercise-card-meta,
  .exercise-rating,
  .exercise-detail-panel p,
  .exercise-detail-panel li,
  .exercise-detail-meta span,
  .exercise-video-copy span,
  .exercise-tag-row span,
  .exercise-detail-chip-row span,
  .grocery-status,
  .grocery-filter-chip,
  .grocery-recipe-card p,
  .grocery-recipe-sponsor,
  .grocery-rating-chip > span,
  .grocery-recipe-meta,
  .grocery-detail-meta,
  .grocery-detail-summary,
  .grocery-detail-section,
  .grocery-detail-benefits,
  .grocery-recipe-tags span,
  .grocery-store-row,
  .grocery-ingredient-copy p,
  .grocery-product-details span,
  .grocery-line-action,
  .grocery-substitute-card span,
  .grocery-empty,
  .grocery-cart-footer > div,
  .track-change-stat span,
  .report-preview-change-label,
  .category-counts span,
  .category-result-value,
  .document-dropzone-copy span,
  .document-review-card p,
  .biological-age-timeline-card p,
  .biological-age-timeline-card small,
  .biological-age-timeline-item time,
  .shop-section-heading p,
  .shop-product-meta,
  .shop-cart-header .eyebrow,
  .shop-product-description,
  .shop-empty-cart,
  .shop-cart-note,
  .shop-cart-line p,
  .shop-product-modal-eyebrow,
  .shop-product-modal-meta,
  .shop-product-modal-description,
  .shop-product-modal-section-title,
  .shop-product-modal-empty,
  .shop-product-modal-variant-copy span
) {
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-function-nav a.is-active {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .rail-item.is-active {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .grocery-filter-chip[data-active="true"] {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .exercise-filter-chip[data-active="true"] {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .exercise-card[data-selected="true"] {
  border-color: var(--color-selected) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipes-filter-chip[data-active="true"] {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-match-badge {
  background: var(--color-icon-well) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-match-row[data-status="matched"] {
  border-color: color-mix(in srgb, #9fd5af 36%, var(--color-line) 64%) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-match-row[data-status="needs_review"] {
  border-color: color-mix(in srgb, #f0a28f 46%, var(--color-line) 54%) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-match-row[data-status="needs_review"] .admin-recipe-match-badge {
  background: color-mix(in srgb, #f0a28f 18%, var(--color-card-white) 82%) !important;
  border-color: color-mix(in srgb, #f0a28f 40%, var(--color-line) 60%) !important;
  color: #ffd0c4 !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .dashboard-add-report-link {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
  box-shadow: 0 0 0 1px rgba(244, 240, 232, 0.08) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .dashboard-add-report-link:hover,
html[data-theme="dark"]:not([data-brand="one-playground"]) .dashboard-add-report-link:focus-visible {
  background: var(--color-clay) !important;
  border-color: var(--color-clay) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .digital-consultant-message[data-role="user"] {
  background: color-mix(in srgb, var(--color-card-white) 82%, var(--color-clay) 18%) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-table th {
  background: var(--color-card-white) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-table td {
  background: var(--color-panel) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-day-metric-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-selected) !important;
  padding: 0 !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-day-metric-button:hover,
html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-day-metric-button:focus-visible {
  color: #9ccfd6 !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .mood-log-state,
html[data-theme="dark"]:not([data-brand="one-playground"]) .mood-log-trigger {
  background: color-mix(in srgb, var(--mood-entry-color, var(--color-clay)) 18%, var(--color-card-white) 82%) !important;
  border-color: color-mix(in srgb, var(--mood-entry-color, var(--color-clay)) 42%, var(--color-line) 58%) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .mood-log-pain {
  background: color-mix(in srgb, #d45d4c 22%, var(--color-card-white) 78%) !important;
  border-color: color-mix(in srgb, #d45d4c 46%, var(--color-line) 54%) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-plan-list-item[data-expanded="true"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-shopify-product[data-selected="true"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-pathology-template-admin-card[data-selected="true"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-card[data-selected="true"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipe-partner-card[data-selected="true"] {
  border-color: var(--color-clay) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-clay) 48%, transparent) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-shopify-status[data-status="success"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-pathology-status[data-status="success"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipes-status[data-status="success"] {
  color: #9fd5af !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-shopify-status[data-status="error"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-pathology-status[data-status="error"],
html[data-theme="dark"]:not([data-brand="one-playground"]) .admin-recipes-status[data-status="error"] {
  color: #f0a28f !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .grocery-recipe-visual,
  .grocery-detail-visual,
  .grocery-product-image,
  .grocery-substitute-image
) {
  background: var(--color-icon-well) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .grocery-recipe-card[data-selected="true"] {
  border-color: var(--color-clay) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-clay) 48%, transparent) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .grocery-line-action {
  color: #9fc6ac !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .shop-add-button,
html[data-theme="dark"]:not([data-brand="one-playground"]) .shop-checkout-button {
  background: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .assessment-hero {
  background: var(--color-panel) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .assessment-pathway-card,
  .assessment-next-panel,
  .assessment-process,
  .assessment-benefit-panel,
  .assessment-faq-panel,
  .assessment-guidance,
  .assessment-hero-panel > div
) {
  background: var(--color-card-white) !important;
  border-color: var(--color-line) !important;
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .assessment-hero h1,
  .assessment-pathway-card h2,
  .assessment-next-panel h2,
  .assessment-process h2,
  .assessment-benefit-panel h2,
  .assessment-faq-panel h2,
  .assessment-guidance h2,
  .assessment-card-head strong,
  .assessment-next-header strong,
  .assessment-hero-panel strong,
  .assessment-faq-panel summary
) {
  color: var(--color-ink) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .assessment-hero .hero-text,
  .assessment-card-summary,
  .assessment-card-limits p,
  .assessment-next-panel > p,
  .assessment-process-grid p,
  .assessment-benefit-panel p,
  .assessment-guidance p,
  .assessment-faq-panel p,
  .assessment-status
) {
  color: var(--color-ink-soft) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.assessment-card-limits, .assessment-process-grid article, .assessment-status) {
  background: var(--color-panel) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .assessment-primary-action,
html[data-theme="dark"]:not([data-brand="one-playground"]) .assessment-pathway-card.is-selected .assessment-select-button {
  background: var(--color-selected) !important;
  border-color: var(--color-selected) !important;
  color: var(--color-paper) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(.assessment-secondary-action, .assessment-select-button) {
  background: var(--color-card-white) !important;
  border-color: var(--color-line) !important;
  color: var(--color-selected) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .biological-age-chart-grid,
  .biological-age-chart-axis,
  .biological-age-chart-reference,
  .biomarker-history-axis,
  .biomarker-history-guide,
  .biomarker-history-line
) {
  stroke: var(--color-line-strong) !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-sparkline polyline {
  stroke: #4fa7b3 !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) .wearable-baseline-line {
  stroke: #d18a5f !important;
}

html[data-theme="dark"]:not([data-brand="one-playground"]) :where(
  .biological-age-chart-axis-label,
  .biological-age-chart-date-label,
  .biological-age-chart-reference-label,
  .biomarker-history-date
) {
  fill: var(--color-ink-soft) !important;
}

@media print {
  .sidebar,
  .mobile-header,
  .mobile-nav,
  .desktop-profile-link,
  .health-snapshot-actions,
  .site-footer {
    display: none !important;
  }

  body {
    background: #ffffff !important;
  }

  .page,
  .dashboard {
    display: block;
    max-width: none;
    padding: 0;
  }

  .health-snapshot-hero,
  .panel,
  .health-snapshot-note-card,
  .health-snapshot-list-item,
  .health-snapshot-source-item {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    box-shadow: none !important;
    color: #111111 !important;
  }

  .health-snapshot-layout,
  .health-weekly-grid,
  .health-snapshot-summary-grid,
  .health-snapshot-source-grid {
    grid-template-columns: 1fr;
  }
}