:root {
      --bg: #f3f7f8;
      --surface: #ffffff;
      --surface-2: #edf6f4;
      --text: #142a2b;
      --muted: #647775;
      --border: #d7e4e2;
      --accent: #0f766e;
      --accent-dark: #0a5c56;
      --accent-soft: #d8efea;
      --macro-accent: #d97706;
      --macro-dark: #8a4c00;
      --macro-soft: #fff0d5;
      --carbs: #d97706;
      --fats: #3f7f4c;
      --protein: #8b5cf6;
      --shadow: 0 18px 45px rgba(20, 42, 43, 0.08);
      --shadow-soft: 0 8px 22px rgba(20, 42, 43, 0.06);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

      body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(15,118,110,.09), transparent 35rem),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

button, input, select { font: inherit; }

.app-switcher {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.app-tablist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.app-tab {
  min-width: 0;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.app-tab:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.app-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.2);
}

.app-switcher-note {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
}

.food-database-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.food-database-layout {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.2fr) minmax(260px, .7fr);
  gap: 16px;
  align-items: start;
}

.food-filters,
.food-detail {
  display: grid;
  gap: 12px;
}

.food-filters {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.food-note {
  padding: 12px;
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .84rem;
}

.food-note p { margin: 5px 0 0; }

.food-europe-button {
  width: 100%;
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.food-europe-button[aria-busy="true"] {
  cursor: progress;
  opacity: .7;
}

.food-europe-sources {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: .8rem;
}

.food-europe-sources > strong {
  color: var(--accent-dark);
}

.food-europe-sources p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.food-results-column {
  min-width: 0;
}

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

.food-card {
  width: 100%;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.food-card:hover,
.food-card.selected {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.food-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.food-card-name {
  min-width: 0;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.food-card-kcal {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-weight: 850;
  white-space: nowrap;
}

.food-card-brand,
.food-card-category {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-card-macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 11px;
  font-size: .76rem;
}

.food-card-macros span {
  padding: 5px 6px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
}

.food-card-macros strong {
  display: block;
  color: var(--text);
  font-size: .88rem;
}

.food-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.food-pagination .control-button:last-child { justify-self: end; }

.food-detail {
  min-height: 300px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.food-detail h3 { margin: 0; line-height: 1.15; }
.food-detail p { margin: 5px 0 0; color: var(--muted); }

.food-detail-empty {
  align-self: center;
  text-align: center;
}

.food-nutrient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.food-nutrient-group-title {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--accent-dark);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.food-nutrient-group-title:first-child { margin-top: 0; }

.food-nutrient {
  padding: 9px;
  border-radius: 11px;
  background: var(--surface);
}

.food-nutrient span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
}

.food-nutrient strong {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
}

.food-source-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.food-product-box {
  max-height: 260px;
  margin-top: 14px;
  padding: 12px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: var(--accent-soft);
}

.food-product-box > strong {
  color: var(--accent-dark);
  font-size: .82rem;
}

.food-product-box p {
  overflow-wrap: anywhere;
  font-size: .78rem;
  line-height: 1.45;
}

.food-source-box > strong {
  color: var(--accent-dark);
  font-size: .82rem;
}

.food-source-box p {
  font-size: .78rem;
  line-height: 1.45;
}

.food-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.food-source-links a {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
}

.food-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed var(--border);
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
}

.diet-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.diet-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 18px;
  align-items: start;
}

.diet-form,
.diet-results,
.diet-options {
  display: grid;
  gap: 12px;
}

.diet-target-summary {
  padding: 18px;
  border-radius: 20px;
  background: var(--accent);
  color: white;
}

.diet-target-summary small {
  opacity: .84;
}

.diet-target-summary strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.diet-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.diet-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.diet-card-head h3 {
  margin: 0;
  line-height: 1.15;
}

.diet-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.diet-card-number {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-size: .8rem;
  font-weight: 850;
}

.diet-card-foods {
  display: grid;
  gap: 7px;
  margin: 13px 0;
  padding: 0;
  list-style: none;
}

.diet-card-food {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--surface-2);
}

.diet-card-food span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.diet-card-food strong {
  flex: 0 0 auto;
  color: var(--accent-dark);
  white-space: nowrap;
}

.diet-card-macros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.diet-card-macro {
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
}

.diet-card-macro span {
  display: block;
  color: var(--muted);
  font-size: .73rem;
}

.diet-card-macro strong {
  display: block;
  margin-top: 2px;
  font-size: .96rem;
}

.diet-card-delta {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

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

.diet-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: .8rem;
}

.diet-checks input {
  width: auto;
  margin: 0;
}

.diet-method-box {
  margin: 0;
}

.sleep-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sleep-layout {
  display: grid;
  grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: start;
}

.sleep-form,
.sleep-results {
  display: grid;
  gap: 12px;
}

.sleep-result-main {
  background: #315b83;
}

.sleep-result-main strong {
  font-size: clamp(2.15rem, 6vw, 3.7rem);
}

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

.circadian-box {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.circadian-box .section-heading {
  margin-bottom: 14px;
}

.circadian-box h3 {
  margin: 0;
  line-height: 1.15;
}

.circadian-box p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.circadian-track {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1.1fr 1.2fr;
  gap: 5px;
  padding: 5px;
  border-radius: 13px;
  background: linear-gradient(90deg, #f6c453 0%, #f6c453 23%, #e5f0f8 23%, #e5f0f8 57%, #d6c9e8 57%, #d6c9e8 76%, #243b68 76%, #243b68 100%);
}

.circadian-phase {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 9px;
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.circadian-phase.night {
  color: white;
}

.sleep-guidance-box {
  margin: 0;
}

.sleep-guidance-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 19px;
  color: var(--muted);
  font-size: .84rem;
}

.sleep-week-fieldset {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}

.sleep-week-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.sleep-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.sleep-week-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
}

.sleep-week-grid input {
  width: 100%;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

.evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}

.evidence-links a {
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

.dish-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dish-layout {
  display: grid;
  grid-template-columns: minmax(310px, .78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: start;
}

.dish-form,
.dish-results {
  display: grid;
  gap: 12px;
}

.dish-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.dish-ingredients-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-top: 3px;
}

.dish-ingredients-heading h3 {
  margin: 0;
  line-height: 1.15;
}

.dish-ingredients-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
}

.dish-servings-field {
  min-width: 100px;
}

.dish-servings-field label {
  font-size: .76rem;
}

.dish-servings-field input {
  padding: 8px 10px;
}

.dish-ingredients {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dish-ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  gap: 7px;
  align-items: center;
}

.dish-ingredient-row select,
.dish-ingredient-row input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fbfdfd;
  color: var(--text);
}

.dish-ingredient-row select:focus,
.dish-ingredient-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .1);
  outline: 0;
}

.dish-remove {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.dish-remove:hover {
  border-color: #c96868;
  color: #a33d3d;
}

.dish-status {
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .82rem;
}

.dish-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.dish-result-main {
  background: linear-gradient(135deg, #0f766e, #155e75);
}

.dish-result-main strong {
  font-size: clamp(2.25rem, 7vw, 4rem);
}

.dish-kcal-unit {
  font-size: .3em;
  letter-spacing: 0;
}

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

.dish-macro-card,
.dish-micro-card {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}

.dish-macro-card span,
.dish-micro-card span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}

.dish-macro-card strong,
.dish-micro-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1.02rem;
}

.dish-micros-box {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

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

.dish-micro-card {
  background: var(--surface);
}

.dish-note {
  margin: 0;
  font-size: .82rem;
}

.distribution-panel {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.distribution-layout {
  display: grid;
  grid-template-columns: minmax(290px, .76fr) minmax(0, 1.24fr);
  gap: 18px;
  align-items: start;
}

.distribution-form,
.distribution-results {
  display: grid;
  gap: 12px;
}

.distribution-status {
  padding: 10px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .82rem;
}

.distribution-status.invalid {
  border-left-color: #b7791f;
  background: #fff7dd;
  color: #684b0b;
}

.distribution-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.distribution-method-box {
  margin: 0;
  font-size: .84rem;
}

.distribution-method-box p {
  color: var(--muted);
}

.distribution-result-main {
  background: linear-gradient(135deg, #0f766e, #155e75);
}

.distribution-result-main strong {
  font-size: clamp(2.35rem, 7vw, 4.1rem);
}

.distribution-kcal-unit {
  font-size: .3em;
  letter-spacing: 0;
}

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

.distribution-daily-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.distribution-daily-card span,
.distribution-daily-card small {
  display: block;
}

.distribution-daily-card span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.distribution-daily-card strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  line-height: 1.05;
}

.distribution-daily-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: .75rem;
}

.distribution-daily-card.carbs-card { border-top: 4px solid var(--carbs); }
.distribution-daily-card.protein-card { border-top: 4px solid var(--protein); }
.distribution-daily-card.fat-card { border-top: 4px solid var(--fats); }

.distribution-visuals {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 12px;
}

.distribution-chart-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.distribution-chart-card .section-heading {
  margin-bottom: 14px;
}

.distribution-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  width: 100%;
  gap: clamp(10px, 1.5vw, 14px);
}

.distribution-donut {
  --chart-carbs: var(--carbs);
  --chart-protein: var(--protein);
  --chart-fat: var(--fats);
  --chart-carbs-stop: 50%;
  --chart-protein-stop: 80%;
  --chart-fat-stop: 100%;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 160px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--chart-carbs) 0 var(--chart-carbs-stop),
    var(--chart-protein) var(--chart-carbs-stop) var(--chart-protein-stop),
    var(--chart-fat) var(--chart-protein-stop) var(--chart-fat-stop)
  );
  box-shadow: 0 10px 22px rgba(20, 42, 43, .08);
}

.distribution-donut-hole {
  display: grid;
  place-items: center;
  width: 57.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  text-align: center;
}

.distribution-donut-hole strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.distribution-donut-hole span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}

.distribution-legend {
  display: grid;
  gap: 10px;
}

.distribution-legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}

.distribution-legend-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.distribution-legend-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  color: var(--muted);
}

.legend-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.carbs-dot { background: var(--carbs); }
.protein-dot { background: var(--protein); }
.fat-dot { background: var(--fats); }

.distribution-legend-item strong {
  color: var(--text);
  white-space: nowrap;
}

.distribution-bar-chart {
  display: grid;
  gap: 16px;
  padding: 5px 0;
}

.distribution-bar-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 850;
}

.distribution-bar-track {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.distribution-bar-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .3s ease;
}

#distribution-bar-carbs { background: var(--carbs); }
#distribution-bar-protein { background: var(--protein); }
#distribution-bar-fat { background: var(--fats); }

.distribution-bar-row strong {
  min-width: 75px;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.distribution-meals-box {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
}

.distribution-meals-box .section-heading {
  margin-bottom: 12px;
}

.distribution-meals-list {
  display: grid;
  gap: 7px;
}

.distribution-meal-header,
.distribution-meal-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) repeat(4, minmax(70px, 1fr));
  gap: 7px;
  align-items: center;
}

.distribution-meal-header {
  padding: 0 10px 2px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.distribution-meal-row {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.distribution-meal-cell {
  min-width: 0;
  color: var(--muted);
  font-size: .82rem;
}

.distribution-meal-cell strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  white-space: nowrap;
}

.distribution-meal-row .meal-name strong {
  color: var(--accent-dark);
}

.distribution-warning {
  margin: 0;
}

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid rgba(15,118,110,.28);
      outline-offset: 2px;
    }

    .app-shell {
      width: min(1180px, calc(100% - 28px));
      margin: 0 auto;
      padding: 24px 0 48px;
    }

    .hero {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    .eyebrow {
      color: var(--accent);
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .78rem;
    }

    h1 {
      margin: 4px 0 8px;
      font-size: clamp(2rem, 5vw, 3.8rem);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    .hero p {
      margin: 0;
      max-width: 760px;
      color: var(--muted);
      font-size: 1.05rem;
    }

    .hero-actions {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    .hero-actions a {
      padding: 10px 14px;
      border: 1px solid var(--accent);
      border-radius: 12px;
      color: var(--accent-dark);
      background: white;
      font-size: .82rem;
      font-weight: 850;
      text-decoration: none;
    }

    .hero-actions a:first-child {
      color: white;
      background: var(--accent);
    }

    .hero-badge {
      min-width: 130px;
      padding: 18px;
      border-radius: 28px;
      background: var(--accent);
      color: white;
      text-align: center;
      box-shadow: var(--shadow);
    }

    .hero-badge strong {
      display: block;
      font-size: 2rem;
      line-height: 1;
    }

    .tabs,
    .scenario-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .macro-button,
    .scenario-button,
    .control-button {
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
    }

    .macro-button:hover,
    .scenario-button:hover,
    .control-button:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
    }

    .macro-button {
      flex: 1 1 210px;
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      text-align: left;
    }

    .macro-button .emoji { font-size: 1.75rem; }
    .macro-button strong { display: block; font-size: 1rem; }
    .macro-button small { color: var(--muted); }

.macro-button[aria-pressed="true"],
.scenario-button[aria-pressed="true"] {
  color: white;
  background: var(--macro-accent);
  border-color: var(--macro-accent);
}

.macro-button[aria-pressed="true"] small {
  color: rgba(255,255,255,.82);
}

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(290px, .7fr);
      gap: 20px;
      margin-top: 18px;
    }

    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow);
    }

    .circuit-panel { padding: 20px; }
    .info-panel { padding: 18px; }

    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
      margin-bottom: 10px;
    }

    .section-heading h2,
    .section-heading h3 {
      margin: 0;
      line-height: 1.15;
    }

    .section-heading p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .92rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent-dark);
      font-size: .82rem;
      font-weight: 800;
    }

    .circuit-wrap {
      position: relative;
      width: 100%;
      margin: 8px auto;
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .track {
      fill: none;
      stroke: var(--border);
      stroke-width: 20;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.track-progress {
  fill: none;
      stroke: var(--macro-accent);
      stroke-width: 20;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-dashoffset .5s ease;
    }

    .station-circle {
      fill: var(--surface);
      stroke: var(--border);
      stroke-width: 3;
      transition: fill .22s ease, stroke .22s ease, stroke-width .22s ease;
    }

.station.active .station-circle {
      fill: var(--macro-soft);
      stroke: var(--macro-accent);
      stroke-width: 6;
    }

.station.done .station-circle {
      fill: var(--surface-2);
      stroke: var(--macro-accent);
    }

.runner-dot {
      fill: var(--macro-accent);
      stroke: white;
      stroke-width: 4;
      transition: cx .5s ease, cy .5s ease;
      filter: drop-shadow(0 4px 5px rgba(18,32,30,.22));
    }

    .atp-center {
      transform-origin: 380px 280px;
      animation: atp-pulse 1.8s ease-in-out infinite;
    }

    @keyframes atp-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-top: 8px;
    }

    .control-button {
      padding: 11px 12px;
      font-weight: 750;
    }

    .control-button.primary {
      background: var(--accent);
      color: white;
      border-color: var(--accent);
    }

    .metric,
    .detail,
    .speed-box,
    .memory-box,
    .scenario-panel,
    .route-card,
    .quiz-panel {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface);
    }

    .metric,
    .detail,
    .speed-box,
    .memory-box {
      padding: 15px;
    }

    .metric {
      margin-bottom: 12px;
      background: var(--surface-2);
    }

    .metric small {
      color: var(--muted);
      font-weight: 700;
    }

    .metric strong {
      display: block;
      margin-top: 3px;
      font-size: 1.55rem;
      line-height: 1.05;
    }

    .metric p,
    .detail p,
    .memory-box p {
      margin: 6px 0 0;
    }

    .detail h3 {
      margin: 10px 0 5px;
    }

    .detail-icon { font-size: 2rem; }

.key-box {
      margin-top: 12px;
      padding: 12px;
      border-radius: 14px;
      background: var(--macro-soft);
      color: var(--macro-dark);
      font-weight: 700;
    }

    .speed-box,
    .memory-box { margin-top: 12px; }

    .speed-track,
    .fuel-track {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #e3ebe9;
    }

.speed-fill,
.fuel-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--macro-accent);
      transition: width .35s ease;
    }

    .speed-labels {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 7px;
      color: var(--muted);
      font-size: .82rem;
    }

    .scenario-panel {
      margin-top: 20px;
      padding: 20px;
      box-shadow: var(--shadow);
    }

    .scenario-button {
      padding: 9px 13px;
      font-weight: 750;
    }

    .fuel-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 15px;
    }

    .fuel-card {
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 16px;
    }

    .fuel-card-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 9px;
    }

.scenario-message {
      margin-top: 14px;
      padding: 14px;
      border-left: 5px solid var(--macro-accent);
      border-radius: 14px;
      background: var(--macro-soft);
      font-weight: 700;
    }

    .route-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 20px;
    }

    .route-card {
      padding: 16px;
    }

    .route-card h3 { margin: 0 0 8px; }
    .route-card p { margin: 0; color: var(--muted); }

    .route-flow {
      margin-top: 13px;
      color: var(--text);
      font-weight: 750;
    }

    .quiz-panel {
      margin-top: 20px;
      padding: 20px;
      box-shadow: var(--shadow);
    }

    .quiz-options {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .quiz-option {
      width: 100%;
      padding: 11px 13px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      text-align: left;
      cursor: pointer;
    }

    .quiz-option:hover { border-color: var(--accent); }
    .quiz-option.correct { background: #dff5e6; border-color: #3f7f4c; }
    .quiz-option.incorrect { background: #fde7e7; border-color: #b54747; }

    .quiz-feedback {
      min-height: 48px;
      margin-top: 10px;
      padding: 11px 12px;
      border-radius: 12px;
      background: var(--surface-2);
    }



    .calculator-panel {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .fueling-panel {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .fueling-layout {
      display: grid;
      grid-template-columns: minmax(310px, .8fr) minmax(0, 1.2fr);
      gap: 18px;
      align-items: start;
    }

    .fueling-form,
    .fueling-results {
      display: grid;
      gap: 12px;
    }

    .fueling-result-main {
      background: linear-gradient(135deg, #0b7285, #0f766e);
    }

    .fueling-unit {
      font-size: .3em;
      letter-spacing: 0;
    }

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

    .sweat-test-box {
      padding: 14px;
      border: 1px solid #b9dfe3;
      border-radius: 17px;
      background: #edfafa;
    }

    .compact-heading {
      margin-bottom: 12px;
    }

    .compact-heading h3 {
      margin: 0;
    }

    .compact-heading p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .8rem;
    }

    .formula-note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: .74rem;
    }

    .gel-timeline-box {
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 17px;
      background: var(--surface-2);
    }

    .gel-timeline {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 10px;
    }

    .gel-time {
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--surface);
      color: var(--accent-dark);
      font-size: .76rem;
      font-weight: 850;
      box-shadow: inset 0 0 0 1px var(--border);
    }

    .gel-time-more {
      background: var(--accent);
      color: white;
    }

    .gel-empty {
      color: var(--muted);
      font-size: .82rem;
    }

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

    .fuel-plan-card {
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 17px;
      background: var(--surface);
    }

    .fuel-plan-card h3 {
      margin: 6px 0 7px;
    }

    .fuel-plan-card p {
      margin: 0;
      color: var(--muted);
      font-size: .82rem;
    }

    .fuel-plan-step {
      color: var(--accent-dark);
      font-size: .74rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .035em;
    }

    .pre-card { border-top: 4px solid #d97706; }
    .during-card { border-top: 4px solid #0b7285; }
    .post-card { border-top: 4px solid #3f7f4c; }

    .fueling-method-box {
      margin: 0;
      font-size: .84rem;
    }

    #pcr-bar { background: #ef4444; }
    #carbs-bar { background: var(--carbs); }
    #fats-bar { background: var(--fats); }
    #protein-bar { background: var(--protein); }

    .calculator-layout {
      display: grid;
      grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
      gap: 18px;
      align-items: start;
    }

    .calculator-form,
    .calculator-results {
      display: grid;
      gap: 12px;
    }

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

    .form-field {
      display: grid;
      gap: 6px;
    }

    .form-field.full { grid-column: 1 / -1; }

    .form-field label {
      font-size: .86rem;
      color: var(--muted);
      font-weight: 800;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 13px;
      background: var(--surface);
      color: var(--text);
    }

    .form-helper {
      margin: 0;
      color: var(--muted);
      font-size: .78rem;
    }

    .calculator-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 9px;
    }

    .result-main {
      padding: 18px;
      border-radius: 20px;
      background: var(--accent);
      color: white;
    }

    .result-main small { opacity: .82; }

    .result-main strong {
      display: block;
      margin-top: 3px;
      font-size: clamp(2.35rem, 8vw, 4.5rem);
      line-height: 1;
      letter-spacing: -.045em;
    }

    .result-main p {
      margin: 8px 0 0;
      color: rgba(255,255,255,.84);
    }

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

    .result-card {
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
    }

    .result-card span {
      display: block;
      color: var(--muted);
      font-size: .8rem;
      font-weight: 750;
    }

    .result-card strong {
      display: block;
      margin-top: 4px;
      font-size: 1.35rem;
      line-height: 1.05;
    }

    .method-box {
      padding: 14px;
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
    }

    .method-box p { margin: 6px 0 0; }

    .estimate-scale {
      display: grid;
      gap: 8px;
    }

    .estimate-scale-line {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      gap: 9px;
      align-items: center;
      font-size: .86rem;
    }

    .estimate-scale-line .fuel-track { height: 9px; }

    .warning-box {
      padding: 12px;
      border-left: 5px solid #b7791f;
      border-radius: 13px;
      background: #fff7dd;
      color: #684b0b;
      font-size: .86rem;
    }

    .hidden { display: none !important; }

.footer {
      margin-top: 22px;
      padding: 18px 4px;
      color: var(--muted);
      font-size: .86rem;
      line-height: 1.65;
      border-top: 1px solid var(--border);
    }

    .app-shell {
      padding-top: 30px;
    }

    h1,
    h2,
    h3 {
      font-weight: 850;
    }

    .hero {
      padding: 6px 2px 2px;
    }

    .hero p {
      line-height: 1.65;
    }

    .hero-badge {
      background: linear-gradient(145deg, var(--accent), var(--accent-dark));
      box-shadow: 0 16px 30px rgba(15, 118, 110, .2);
    }

    .panel,
    .scenario-panel,
    .quiz-panel,
    .calculator-panel,
    .fueling-panel,
    .food-database-panel,
    .diet-panel,
    .sleep-panel {
      box-shadow: var(--shadow);
    }

    .distribution-panel {
      box-shadow: var(--shadow);
    }

    .macro-button,
    .scenario-button,
    .control-button,
    .food-card,
    .diet-card,
    .result-card {
      box-shadow: 0 2px 0 rgba(20, 42, 43, .02);
    }

    .control-button.primary {
      box-shadow: 0 8px 16px rgba(15, 118, 110, .16);
    }

    .form-field input,
    .form-field select {
      background: #fbfdfd;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: var(--accent);
      background: var(--surface);
      box-shadow: 0 0 0 4px rgba(15, 118, 110, .1);
      outline: 0;
    }

    .result-card,
    .diet-card,
    .food-card {
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .result-card:hover,
    .diet-card:hover {
      transform: translateY(-2px);
      border-color: rgba(15, 118, 110, .38);
      box-shadow: var(--shadow-soft);
    }

    @media (max-width: 980px) {
      .app-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 880px) {
      .hero { grid-template-columns: 1fr; }
      .hero-badge { display: none; }
      .layout { grid-template-columns: 1fr; }
      .fuel-grid, .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .calculator-layout, .fueling-layout, .food-database-layout, .diet-layout, .sleep-layout, .dish-layout, .distribution-layout { grid-template-columns: 1fr; }
      .food-detail { min-height: 0; }
    }

    @media (max-width: 620px) {
      .app-shell { width: min(100% - 18px, 1180px); padding-top: 14px; }
      .app-tablist { grid-template-columns: 1fr; }
      .panel, .scenario-panel, .quiz-panel, .calculator-panel, .fueling-panel, .diet-panel, .sleep-panel, .dish-panel, .distribution-panel { border-radius: 18px; }
      .circuit-panel, .info-panel, .scenario-panel, .quiz-panel, .calculator-panel, .fueling-panel, .diet-panel, .sleep-panel, .dish-panel, .distribution-panel { padding: 14px; }
      .controls, .calculator-actions, .distribution-actions, .field-grid, .result-grid, .food-list { grid-template-columns: 1fr; }
      .fuel-grid, .route-grid, .fuel-plan-grid, .diet-checks { grid-template-columns: 1fr; }
      .sleep-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .diet-card-macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dish-macro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dish-micro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dish-ingredient-row { grid-template-columns: minmax(0, 1fr) 82px auto; }
      .distribution-daily-grid { grid-template-columns: 1fr; }
      .distribution-visuals { grid-template-columns: 1fr; }
      .distribution-meal-header { display: none; }
      .distribution-meal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
      .distribution-meal-row .meal-name { grid-column: 1 / -1; }
      .distribution-meal-cell::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
      .circadian-track { grid-template-columns: 1fr 1fr; }
      .macro-button { flex-basis: 100%; }
      .section-heading { flex-direction: column; }
      .station-label { font-size: 16px; }
      .station-emoji { font-size: 30px; }
    }

    @media (max-width: 360px) {
      .distribution-chart-layout { grid-template-columns: 1fr; }
      .distribution-donut { width: min(150px, 100%); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }