:root {
  --app-font-scale: 1;
  --app-viewport-height: 100dvh;
  --font-display: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-ui: "Inter", "Segoe UI", Arial, sans-serif;
  color-scheme: light;
  /* One root multiplier: every rem-based text token scales exactly once. */
  font-size: calc(16px * var(--app-font-scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(.app-view, .assistant-rich-text, .assistant-message) :where(p, li) {
  line-height: 1.55;
}

html[data-theme="dark"] {
  --ink: #eef9f7;
  --ink-soft: #b5cbc7;
  --muted: #8ea9a5;
  --aqua: #43d9ce;
  --aqua-deep: #36c4ba;
  --aqua-pale: rgba(46, 195, 184, .13);
  --mint: #122c2d;
  --pearl: #102123;
  --white: #14272a;
  --line: rgba(126, 221, 211, .14);
  --line-strong: rgba(126, 221, 211, .24);
  --shadow: 0 28px 90px rgba(0, 0, 0, .52);
  color-scheme: dark;
}

input,
textarea,
select {
  font-size: max(1rem, 1em) !important;
}

.startup-shell {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  color: #effffb;
  background: #073c3f;
}

body:not(.auth-pending) .startup-shell,
body.web-auth-visible .startup-shell { display: none; }

.startup-shell__art,
.startup-shell__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.startup-shell__art {
  object-fit: cover;
  object-position: 57% center;
  transform: scale(1.035);
  animation: startup-atlas-arrive 7s ease-out both;
}

.startup-shell__veil {
  background:
    linear-gradient(180deg, rgba(3, 35, 38, .08), rgba(2, 28, 31, .12) 42%, rgba(2, 26, 29, .92) 100%),
    linear-gradient(90deg, rgba(3, 39, 41, .74), rgba(3, 43, 45, .14) 76%);
}

.startup-shell__content {
  position: absolute;
  z-index: 2;
  inset: auto 24px max(34px, env(safe-area-inset-bottom));
  display: grid;
  max-width: 420px;
  gap: 13px;
  text-shadow: 0 2px 22px rgba(0, 24, 27, .34);
}

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

.startup-shell__brand > strong { font: 800 1.0625rem/1 var(--font-display); letter-spacing: .17em; }
.startup-shell__eyebrow { color: #83e6da; font: 800 0.625rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.startup-shell h1 { margin: 0; max-width: 360px; font: 760 clamp(2.375rem, calc(11vw * var(--app-font-scale)), 3.875rem)/.93 var(--font-display); letter-spacing: -.045em; }
.startup-shell__content > small { display: flex; align-items: center; gap: 9px; color: rgba(235, 255, 251, .72); font: 650 0.75rem/1.3 var(--font-ui); }
.startup-shell__content > small i { width: 7px; height: 7px; border-radius: 50%; background: #78e3d7; box-shadow: 0 0 0 7px rgba(120, 227, 215, .12), 0 0 20px rgba(120, 227, 215, .8); animation: startup-status 1.45s ease-in-out infinite; }

.startup-shell__mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(194, 255, 247, .34);
  border-radius: 50%;
  animation: startup-breathe 1.7s ease-in-out infinite;
}

.startup-shell__mark i,
.startup-shell__mark b {
  position: absolute;
  border-radius: 50%;
  background: #8bf0e5;
}

.startup-shell__mark i { width: 6px; height: 6px; }
.startup-shell__mark i:nth-child(1) { top: 7px; left: 18px; }
.startup-shell__mark i:nth-child(2) { top: 23px; left: 7px; }
.startup-shell__mark i:nth-child(3) { top: 23px; right: 7px; }
.startup-shell__mark b { width: 11px; height: 11px; top: 16px; left: 15px; box-shadow: 0 0 24px rgba(114, 231, 219, .8); }
@keyframes startup-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(24, 185, 173, .06); } }
@keyframes startup-atlas-arrive { from { opacity: .68; transform: scale(1.09); } to { opacity: 1; transform: scale(1.035); } }
@keyframes startup-status { 50% { opacity: .55; transform: scale(.8); } }

.display-settings {
  display: grid;
  gap: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(235, 249, 246, .9));
}

.display-setting-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.display-setting-row > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.display-setting-row > div > svg {
  width: 38px;
  height: 38px;
  padding: 10px;
  color: var(--aqua-deep);
  border-radius: 50%;
  background: var(--aqua-pale);
}

.display-setting-row span { min-width: 0; display: grid; gap: 4px; }
.display-setting-row strong { font: 750 0.875rem/1.25 var(--font-display); }
.display-setting-row small { color: var(--ink-soft); font-size: 0.75rem; line-height: 1.4; }
.display-setting-row output { color: var(--aqua-deep); font: 750 0.875rem/1 var(--font-display); }

.display-setting-row--range input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 28px;
  margin: -3px 0 0;
  accent-color: var(--aqua-deep);
}

.display-setting-row--range datalist { display: none; }

.display-setting-row > .font-scale-marks {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 6px;
  margin-top: -6px;
  color: var(--ink-soft);
  font: 650 0.625rem/1.2 var(--font-ui);
  text-align: center;
}

.font-scale-marks span {
  position: relative;
  display: block;
  padding-top: 8px;
}

.font-scale-marks span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aqua-deep);
  transform: translateX(-50%);
}

.display-switch {
  width: 48px;
  height: 28px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #9badac;
  cursor: pointer;
  transition: background .2s ease;
}

.display-switch::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}

.display-switch:checked { background: var(--aqua-deep); }
.display-switch:checked::after { transform: translateX(20px); }

.bottom-nav {
  z-index: 70;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  isolation: isolate;
  pointer-events: auto;
}

.bottom-nav button {
  min-height: 50px;
  overflow: hidden;
  touch-action: manipulation;
  pointer-events: auto;
}

.bottom-nav span {
  font-size: 0.625rem;
  letter-spacing: -.12px;
}

html[data-font-preset="compact"] .bottom-nav { min-height: 80px; }
html[data-font-preset="compact"] .bottom-nav svg { width: 28px; height: 28px; }

html[data-font-preset="standard"] .bottom-nav { min-height: 86px; }
html[data-font-preset="standard"] .bottom-nav svg { width: 32px; height: 32px; }

html[data-font-preset="large"] .bottom-nav { min-height: 90px; }
html[data-font-preset="large"] .bottom-nav svg { width: 34px; height: 34px; }
html[data-font-preset="large"] .bottom-nav span { line-height: 1.1; }

html[data-font-preset="maximum"] .bottom-nav { min-height: 94px; }
html[data-font-preset="maximum"] .bottom-nav svg { width: 36px; height: 36px; }
html[data-font-preset="maximum"] .bottom-nav span { line-height: 1.05; }
html[data-font-preset="maximum"] .bottom-nav button { padding-inline: 1px; }

html[data-font-preset="large"] :is(
  .player-line strong,
  .mode-switch button,
  .voice-preset-grid small,
  .questionnaire-stage-tabs strong,
  .profile-start-block strong,
  .assistant-mode-settings b,
  .assistant-conversation-heading strong,
  .assistant-thread-select small,
  .food-photo-preview b,
  .myepigen-music-control__label,
  .library-premium-card__copy span,
  .library-result-card small,
  .food-result small,
  .nutrient-result small,
  .day.event > strong
),
html[data-font-preset="maximum"] :is(
  .player-line strong,
  .mode-switch button,
  .voice-preset-grid small,
  .questionnaire-stage-tabs strong,
  .profile-start-block strong,
  .assistant-mode-settings b,
  .assistant-conversation-heading strong,
  .assistant-thread-select small,
  .food-photo-preview b,
  .myepigen-music-control__label,
  .library-premium-card__copy span,
  .library-result-card small,
  .food-result small,
  .nutrient-result small,
  .day.event > strong
) {
  height: auto;
  min-height: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

html[data-font-preset="large"] .day.event > strong,
html[data-font-preset="maximum"] .day.event > strong,
html[data-font-preset="large"] .library-premium-card__copy span,
html[data-font-preset="maximum"] .library-premium-card__copy span {
  display: block;
}

html[data-font-preset="maximum"] :is(
  .profile-start-blocks__grid,
  .profile-fact-grid,
  .profile-source-list,
  .questionnaire-choice-grid,
  .library-calculator-grid,
  .library-module-filters,
  .product-macro-grid,
  .nutrient-standard-grid,
  .nutrient-food-columns,
  .food-macro-grid,
  .health-pep__steps
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-font-preset="maximum"] .profile-source-list > li {
  grid-column: auto !important;
}

html[data-font-preset="maximum"] .living-hero {
  height: auto;
  min-height: 0;
  padding-bottom: 24px;
}

html[data-font-preset="maximum"] .hero-copy {
  width: auto;
  max-width: none;
}

html[data-font-preset="maximum"] .hero-score {
  position: relative;
  inset: auto;
  margin-top: 18px;
}

html[data-font-preset="large"] .calendar-scroll,
html[data-font-preset="maximum"] .calendar-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

html[data-font-preset="large"] :is(.weekdays, .month-grid),
html[data-font-preset="maximum"] :is(.weekdays, .month-grid) {
  min-width: 560px;
}

html[data-font-preset="large"] .day,
html[data-font-preset="maximum"] .day {
  height: auto;
  min-height: 112px;
}

html[data-font-preset="large"] .bottom-nav button,
html[data-font-preset="maximum"] .bottom-nav button {
  height: auto;
  overflow: visible;
}

html[data-font-preset="large"] .bottom-nav span,
html[data-font-preset="maximum"] .bottom-nav span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.assistant-sheet,
.bottom-sheet { max-width: 100vw; }

.assistant-sheet .chat-body,
.assistant-rich-text,
.assistant-rich-text * { max-width: 100%; overflow-wrap: anywhere; }

.assistant-sheet .chat-input input,
.assistant-sheet textarea { font-size: 1rem !important; }

body.keyboard-open .assistant-sheet.active {
  height: var(--app-viewport-height);
  max-height: var(--app-viewport-height);
}

html[data-theme="dark"],
html[data-theme="dark"] body { background: #071315; }

html[data-theme="dark"] .app-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(21, 129, 125, .2), transparent 34%),
    linear-gradient(180deg, #081719, #050d0f);
}

html[data-theme="dark"] .app-frame,
html[data-theme="dark"] .app-view,
html[data-theme="dark"] .section-band,
html[data-theme="dark"] .simple-header,
html[data-theme="dark"] .profile-actions,
html[data-theme="dark"] .personal-route,
html[data-theme="dark"] .display-settings {
  color: var(--ink);
  background-color: #102123;
}

html[data-theme="dark"] .section-band,
html[data-theme="dark"] .profile-actions,
html[data-theme="dark"] .display-settings {
  background-image: linear-gradient(145deg, rgba(20, 43, 45, .98), rgba(10, 29, 31, .98));
  border-color: var(--line);
}

html[data-theme="dark"] :is(.bottom-nav, .assistant-composer, .assistant-discussions, .bottom-sheet, .chat-input, .library-module-search, .library-module-filters select, .food-result, .nutrient-result, .gene-card, .web-access__panel) {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(10, 27, 29, .96);
}

html[data-theme="dark"] :is(.tracker, .vital-item, .day, .profile-fact-grid > *, .library-result-card, .assistant-message, .assistant-mode-dock, .assistant-mode-tabs) {
  color: var(--ink);
  border-color: var(--line);
  background-color: rgba(19, 45, 47, .78);
}

html[data-theme="dark"] .user-message { color: #effffd; background: linear-gradient(135deg, #145d5a, #0d4443); }
html[data-theme="dark"] .bottom-nav { box-shadow: 0 -16px 36px rgba(0, 0, 0, .32); }
html[data-theme="dark"] .ai-nav__mark { color: #06201f; background: #55e0d5; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--ink); background-color: #0d1e20; }

@media (max-width: 560px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .app-stage { padding: 0; }
  .assistant-sheet.active {
    inset: 0 !important;
    width: 100vw !important;
    height: var(--app-viewport-height);
    max-height: var(--app-viewport-height);
    margin: 0 !important;
    transform: none !important;
  }
  .assistant-sheet.is-expanded { height: var(--app-viewport-height); max-height: var(--app-viewport-height); }
  .assistant-conversation-header { grid-template-columns: auto auto minmax(0, 1fr) auto auto !important; }
  .assistant-profile-context { display: none; }
  .bottom-nav { padding-inline: 2px; }
  .font-scale-marks { font-size: 0.5625rem; gap: 2px; }
  .display-settings { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .startup-shell__mark,
  .startup-shell__art,
  .startup-shell__content > small i { animation: none; }
  .display-switch,
  .display-switch::after { transition: none; }
}

/* Presets improve readability without rebuilding the screen geometry. */
html[data-font-preset] .bottom-nav { min-height: 86px; }
html[data-font-preset] .bottom-nav svg { width: 32px; height: 32px; }
html[data-font-preset] .bottom-nav button { min-height: 52px; padding-inline: 2px; }
html[data-font-preset] .bottom-nav span {
  min-height: 0;
  overflow: hidden;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

html[data-theme="light"] .app-stage {
  background:
    radial-gradient(circle at 50% -8%, rgba(53, 190, 178, .14), transparent 38%),
    linear-gradient(180deg, #edf8f5, #f7fbf9);
}

html[data-theme="dark"] :is(.display-setting-row, .profile-actions > button, .epigen-feature-setting) {
  color: var(--ink);
  border-color: rgba(126, 221, 211, .14);
}

@media (max-width: 860px) {
  .profile-fact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    border: 0;
    background: transparent;
  }
}

/* module=profile; channel=miniapp,web; layer=ui; scenario=display.theme */
#settings .settings-header { padding-bottom:14px;background:transparent;color:var(--ink,#123b49); }
#settings .settings-header > :is(.eyebrow,p) { display:none; }
#settings .settings-header h1 { margin:0;font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.12;letter-spacing:-.04em; }
#settings :is(.display-settings,.ai-companion-settings,.settings-response-card,.communications-settings-entry) {
 margin:0 var(--settings-card-gutter,20px) 12px;padding:15px;border:1px solid var(--line-glass,#ffffffc9);border-radius:19px;
 color:var(--ink,#123b49);background:var(--surface-card,#ffffffa8);box-shadow:0 4px 18px #113f5010;backdrop-filter:blur(18px);
}
#settings .display-settings { gap:7px; }
#settings :is(.section-heading h2,.settings-response-card h2) { margin:0;font-size:1.1rem;line-height:1.2;letter-spacing:-.025em;color:var(--ink,#123b49); }
#settings .section-heading { margin:0 0 3px;gap:8px; }
#settings .section-heading .eyebrow { display:none; }
#settings .display-setting-row { min-height:46px;padding:9px 0;gap:8px;border-color:var(--line-glass,#a5cbd636);color:var(--ink,#123b49); }
#settings .display-setting-row > div:not(.font-scale-marks) { grid-template-columns:minmax(0,1fr);gap:0; }
#settings .display-setting-row > div > svg { display:none; }
#settings .display-setting-row strong { font:500 .86rem/1.3 var(--font-ui);color:var(--ink,#123b49); }
#settings .display-setting-row small { font-size:.74rem;line-height:1.35;color:var(--muted,#3f6a77); }
#settings .display-setting-row--range { border:0;padding-top:4px;gap:7px; }
#settings .display-setting-row--range small { display:none; }
#settings .display-setting-row--range output { font-size:.76rem;color:var(--muted,#3f6a77); }
#settings .display-setting-row--range input[type="range"] { min-height:26px;margin:0; }
#settings .font-scale-marks { font-size:.62rem; }
#settings .display-theme-label { border:0;padding:7px 0 0;min-height:0; }
#settings .display-theme-label small { display:none; }
#settings #dark-theme-toggle[hidden] { display:none!important; }
#settings .display-theme-segments { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:2px;border-radius:12px;background:var(--surface-glass,#e4f0f1c7);border:1px solid var(--line-glass,#d4e7ea);box-shadow:inset 0 1px 4px #0d4c5510; }
#settings .display-theme-segments button { min-height:38px;padding:7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink,#123b49);font:500 .88rem/1.2 var(--font-ui);cursor:pointer;touch-action:manipulation; }
#settings .display-theme-segments button.is-selected { color:#124752;background:linear-gradient(145deg,#efffff,#b7ebed);border-color:#66d8dd;box-shadow:inset 0 0 8px #ffffffcc; }
#settings .display-theme-segments button:focus-visible { outline:3px solid #3ab7c6;outline-offset:2px; }
#settings .settings-response-card h2 { margin-bottom:3px; }
#settings .settings-response-card .display-setting-row:first-of-type { border:0; }
#settings .settings-response-card .display-setting-row > div > span { gap:3px; }
#settings .display-setting-row--music { grid-template-columns:minmax(0,1fr); }
#settings .display-setting-row--music .music-settings-control { grid-template-columns:minmax(0,1fr); }
#settings .ai-companion-settings > p,#settings .communications-settings-entry > p { font-size:.81rem;line-height:1.45;color:var(--muted,#3f6a77); }
#settings .ai-companion-setting { padding:10px 0;min-height:48px;border-color:var(--line-glass,#b5d5dd50); }
#settings .ai-companion-setting b { font-size:.86rem;line-height:1.3;color:var(--ink,#123b49); }
#settings .ai-companion-setting small { font-size:.74rem;line-height:1.35;color:var(--muted,#3f6a77); }
#settings .ai-companion-topics { border-color:var(--line-glass,#b5d5dd50);font-size:.8rem; }
#settings .display-switch { width:42px;height:25px;min-width:42px;background:#9ebbc0;border-color:#78a8b152; }
#settings .display-switch::after { width:19px;height:19px;margin:2px; }
#settings .display-switch:checked { background:#27bbc0;border-color:#49cbd0; }
#settings .display-switch:checked::after { transform:translateX(17px); }
html[data-theme="dark"] #settings .display-theme-segments button.is-selected { color:#efffff;background:linear-gradient(145deg,#20535e,#0c3948);border-color:#9af4f1;box-shadow:inset 0 0 11px #75e7e666,0 0 6px #4bd6cf33; }
@media(max-width:360px) { #settings :is(.display-settings,.ai-companion-settings,.settings-response-card,.communications-settings-entry) { margin-inline:12px;padding:12px; } }