/* Approved Phoenix concept. Appearance only; behavior and state classes are unchanged. */
:root {
  color-scheme: light;
  --concept-border-width: 2px;
  --concept-border-base: 4px;
  --concept-border-pressed: 2px;
  --concept-radius-card: 24px;
  --concept-radius-action: 18px;
  --bg-primary: #EFECE6; --bg-secondary: #E7E2D9; --bg-card: #FBFAF7;
  --border-card: #DAD5CC; --text-main: #2B2B2B; --text-muted: #706B64;
  --concept-field: #E7E2D9; --concept-edge: var(--border-card); --concept-track: #E7E3DC;
  --concept-coral: #FF7668; --concept-coral-ink: #AD4C43;
  --concept-primary: #3A3A3C; --concept-primary-ink: #FF9B8E; --concept-primary-edge: #202021;
  --concept-pro: #3A3A3C; --concept-good: #35B889; --concept-good-ink: #138250;
  --concept-protein: #6C9ED8; --concept-carbs: #D9AD55; --concept-fat: #DDA080; --concept-over: #D95F76;
  --pill-surface: #FBFAF7; --pill-border: #DAD5CC; --pill-base: var(--pill-border); --pill-muted: #706B64;
  --pill-selected: #E7E2D9; --pill-selected-border: #E7E2D9; --pill-selected-base: #E7E2D9; --pill-selected-ink: #3A3A3C;
}
html.dark {
  color-scheme: dark;
  --bg-primary: #1C1D1E; --bg-secondary: #202123; --bg-card: #262729;
  --border-card: #3F4042; --text-main: #F3EDE0; --text-muted: #AAA7A1;
  --concept-field: #313234; --concept-edge: var(--border-card); --concept-track: #3C3D3F;
  --concept-coral-ink: #FF9B8E; --concept-primary: #FF7668; --concept-primary-ink: #261B21; --concept-primary-edge: #BC4C40;
  --concept-pro: #313234; --concept-good-ink: #73DCAA;
  --pill-surface: #262729; --pill-border: #3F4042; --pill-base: var(--pill-border); --pill-muted: #AAA7A1;
  --pill-selected: #424345; --pill-selected-border: #424345; --pill-selected-base: #424345; --pill-selected-ink: #FF9B8E;
}
html, body, html.dark, html.dark body { background-color: var(--bg-primary) !important; }
body, html.dark body { color: var(--text-main) !important; }
html .bg-white { background-color: var(--bg-card); }
html .glass-panel, html.dark .glass-panel {
  background-color: var(--bg-card); border-color: var(--border-card); border-width: var(--concept-border-width);
  border-bottom-width: var(--concept-border-base); border-bottom-color: var(--concept-edge); box-shadow: none;
}
button, input[type="submit"], .tracking-sheet-title { font-family: var(--font-rounded); }
.capture-round-icon, html.dark .capture-round-icon {
  border-radius: var(--concept-radius-action); background: var(--bg-card); color: var(--text-muted);
  border-width: var(--concept-border-width); border-bottom-width: var(--concept-border-base);
  border-color: var(--border-card); border-bottom-color: var(--concept-edge);
}
.hero-macro-head, .hero-macro-val, html.dark .hero-macro-head, html.dark .hero-macro-val { color: var(--text-muted); }
.hero-macro-val > span:first-child, html.dark .hero-macro-val > span:first-child { color: var(--text-main); }
.hero-macro-head { white-space: normal; flex-wrap: wrap; }
.hero-macros { min-width: 0; }
.hero-macro-bar, html.dark .hero-macro-bar { background: var(--concept-track); }
.circle-bg, html.dark .circle-bg { stroke: var(--concept-track); }
#calorie-ring-over { filter: none; }
html .macro-protein-bg, html.dark .macro-protein-bg { background-color: var(--concept-protein); }
html .macro-carbs-bg, html.dark .macro-carbs-bg { background-color: var(--concept-carbs); }
html .macro-fat-bg, html.dark .macro-fat-bg { background-color: var(--concept-fat); }
html .macro-fatsat-bg, html.dark .macro-fatsat-bg { background-color: #B76572; }
.stat-leg-good { background: var(--concept-good); }
.stat-leg-okay { background: var(--concept-fat); }
.stat-leg-over { background: var(--concept-over); }
/* Shared fields include auth, capture, editing, goals, account, export and dialogs. */
html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
html textarea, html select,
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
html.dark textarea, html.dark select {
  background-color: var(--concept-field); color: var(--text-main); border-color: transparent;
  border-radius: 14px; caret-color: var(--concept-coral); accent-color: var(--concept-coral);
}
html input:focus-visible, html textarea:focus-visible, html select:focus-visible { outline: 2px solid var(--concept-coral); outline-offset: 2px; }
/* Felder in einer eigenen Hülle: Der Ring sitzt auf der Hülle, nicht zusätzlich auf dem Feld */
html .edit-b-val input:focus-visible, html .track-soft-field:focus-visible { outline: none; }
html input[type="checkbox"], html input[type="radio"], html input[type="range"] { accent-color: var(--concept-coral); }
html select option { background: var(--bg-card); color: var(--text-main); }
html input::placeholder, html textarea::placeholder { color: var(--text-muted); opacity: .8; }
html .track-soft-field, html.dark .track-soft-field { background-color: var(--concept-field) !important; }
html input.goal-inline, html.dark input.goal-inline,
html input.edit-b-val-input, html.dark input.edit-b-val-input,
html input.edit-b-weight-input, html.dark input.edit-b-weight-input,
html input.tpl-search-input, html.dark input.tpl-search-input { background: transparent !important; }
html .track-meta-panel input.track-soft-field, html.dark .track-meta-panel input.track-soft-field { background-color: var(--concept-field) !important; }
/* Existing primary and disabled classes continue to determine state. */
html .nn-sunset, html .btn-chunky.bg-emerald-500, html .btn-chunky.bg-emerald-600, html .result-x-save.bg-emerald-500,
html.dark .nn-sunset, html.dark .btn-chunky.bg-emerald-500, html.dark .btn-chunky.bg-emerald-600, html.dark .result-x-save.bg-emerald-500 {
  background: var(--concept-primary) !important; color: var(--concept-primary-ink) !important;
  border-bottom: 4px solid var(--concept-primary-edge) !important; box-shadow: none !important;
  font-family: var(--font-rounded); border-radius: 17px;
}
html .btn-chunky:disabled, html .nn-sunset:disabled { opacity: .5; }
html .manual-switch-input:checked + .manual-switch, html.dark .manual-switch-input:checked + .manual-switch { background: var(--concept-coral); }
html .theme-opt.is-selected, html.dark .theme-opt.is-selected,
html.dark #settings-subpanel-design .theme-opt.is-selected { border-color: var(--concept-coral) !important; }
/* Red is reserved for destructive actions and errors. */
html #tracking-cancel-btn, html.dark #tracking-cancel-btn,
html .tracking-cancel-btn-solid, html.dark .tracking-cancel-btn-solid {
  background: var(--concept-field) !important; color: var(--text-muted) !important; border: 0 !important; box-shadow: none !important;
}
html .tracking-cancel-btn-solid svg { color: inherit !important; stroke: currentColor !important; }
.keks-bubble { background: #FFF; border-color: var(--border-card); }
html.dark .keks-bubble { background: var(--concept-field); border-color: var(--border-card); }
.keks-bubble::before, html.dark .keks-bubble::before { border-color: var(--border-card); }
/* Full-screen sheets, sticky headers/footers and safe-area fades. */
html #tracking-sheet, html.dark #tracking-sheet,
html #tracking-sheet-top-bar, html.dark #tracking-sheet-top-bar,
html .track-sheet-shell, html.dark .track-sheet-shell,
html .edit-b-shell, html.dark .edit-b-shell,
html .edit-b-header, html.dark .edit-b-header,
html .edit-b-footer, html.dark .edit-b-footer,
html .tpl-shell, html.dark .tpl-shell,
html .tpl-header, html.dark .tpl-header { background: var(--bg-primary) !important; }
#bottom-nav-fade { background: linear-gradient(transparent, var(--bg-primary) 60%) !important; }
html .settings-menu-row > svg, html.dark .settings-menu-row > svg { color: var(--text-muted); }
/* Dark Pro stage in both appearances, with one coral main action. */
html .pro-paywall, html.dark .pro-paywall {
  background: var(--concept-pro); color: #F3EDE0; border: 2px solid var(--concept-edge); border-bottom-width: 4px; box-shadow: none;
}
.pro-paywall::after { display: none; }
html #settings-page-title, html .page-heading { font-size: 27px; letter-spacing: -1px; line-height: 1.15; }
html #view-dashboard, html #view-statistics:not([data-detail]) { padding-top: 1rem; }
html #view-settings > #settings-home-intro { margin-top: 20px; }
html #dashboard-date-display { padding-left: 4px; padding-right: 4px; min-width: 0; }
#dashboard-date-label { flex: none; white-space: nowrap; }
#dashboard-date-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-kcal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.dash-kcal-summary { min-width: 0; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.dash-kcal-summary b { font-weight: 700; color: var(--text-main); }
html .dash-kcal-row .dash-more-toggle { flex: none; margin: 0; padding: 8px 0 8px 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
/* Optischer Ausgleich: Leerraum über der ersten Textzeile */
.hero-macros { position: relative; top: -2px; }
.keks-say-action { display: block; margin-top: 3px; font-weight: 700; color: #C24F44; }
html.dark .keks-say-action { color: var(--concept-coral); }
.keks-say-action[hidden] { display: none; }
/* Nährwerte: gleiche Balken, Farben nach Nährstoff-Familie (Zucker = Kohlenhydrate, gesättigt = Fett) */
html .hero-macro-bar, html.dark .hero-macro-bar, html.dark .dash-more-grid .hero-macro-bar { background: var(--concept-track); }
html .dash-more-fiber-bg { background: #5FA487; }
html.dark .dash-more-fiber-bg { background: #6FAE93; }
html .dash-more-sugar-bg, html.dark .dash-more-sugar-bg { background: var(--concept-carbs); }
html .dash-more-salt-bg { background: #A39D93; }
html.dark .dash-more-salt-bg { background: #A8A39A; }
html .dash-more-panel .macro-fatsat-bg { background: #B76572; }
html.dark .dash-more-panel .macro-fatsat-bg { background: #C67B86; }
.dash-more-grid .hero-macro-head { flex-wrap: nowrap; white-space: nowrap; gap: 4px; }
.dash-more-grid .hero-macro-head > span:first-child { min-width: 0; }
.settings-profile { display: flex; align-items: center; overflow: hidden; }
.settings-profile-main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 14px; text-align: left; cursor: pointer; }
.settings-profile-logout { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 10px; border-radius: 14px; color: var(--text-muted); cursor: pointer; }
.settings-profile-logout:active { background: var(--concept-field); }
.settings-profile-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--concept-field); color: var(--text-main); font-family: var(--font-rounded); font-size: 21px; font-weight: 800; }
.settings-profile-name { display: block; font-family: var(--font-rounded); font-size: 16px; font-weight: 700; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-profile-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
html .settings-home-heading, html.dark .settings-home-heading { margin: 22px 2px -6px; font-size: 15px; color: var(--text-main); }
.pro-paywall-keks { filter: none; }
.pro-paywall-badge { background: #424345; color: #F3EDE0; letter-spacing: 0; }
html .pro-paywall-btn, html.dark .pro-paywall-btn { background: var(--concept-coral); color: #261B21; box-shadow: 0 4px 0 #BC4C40; }
.pro-paywall-list .ck { background: rgba(53,184,137,.16); }
.pro-paywall-list .ck svg { stroke: #73DCAA; }
.pro-lock { background: #FFF4DE; border-color: #DFCAA1; }
html.dark .pro-lock { background: #332C21; border-color: #61513A; }
.pro-lock-btn { background: var(--concept-primary); color: var(--concept-primary-ink); box-shadow: 0 3px 0 var(--concept-primary-edge); }
html .splash-icon-box { background: #313234; box-shadow: none; border-color: #424345; }
html:not(.dark) .splash-icon-box { background: #FBFAF7; border-color: #DAD5CC; }
html .splash-spinner-ring { border-color: rgba(255,118,104,.2); border-top-color: #FF7668; }
html .photo-live-loading { background: radial-gradient(120% 90% at 50% 40%, #313234 0%, #1C1D1E 70%, #121314 100%); }
html .photo-live-ring::before, html .photo-live-ring::after { border-color: rgba(255,118,104,.5); }
html .coach-focus, html.dark .coach-focus { background: var(--bg-card); border-color: var(--border-card); }
.coach-chip-ok, html.dark .coach-chip-ok { color: var(--concept-good-ink); }
.coach-chip-up, html.dark .coach-chip-up { color: var(--concept-over); }
html .text-purple-500, html .text-purple-600, html.dark .dark\:text-purple-400 { color: var(--text-muted); }
html .bg-purple-500\/15, html .bg-purple-500\/20 { background: var(--concept-field); }
/* Portion/category choices use a quiet selection instead of another filled main action. */
html .track-cat-chip.is-active, html.dark .track-cat-chip.is-active,
html .edit-b-portions button.is-active, html.dark .edit-b-portions button.is-active {
  background: var(--pill-selected); color: var(--text-main);
  box-shadow: inset 0 0 0 1.5px var(--concept-coral);
}
html [id$="-error-banner"] { color: #A62E39; background-color: #FCE9E6; border-color: #E5B8B5; }
html.dark [id$="-error-banner"] { color: #F2ADB4; background-color: #3D292D; border-color: #70434B; }
/* Small segmented controls follow the same quiet selection as the bottom pill. */
html #auth-tab-bar button.bg-emerald-500,
html #auth-lang-btn-de.bg-emerald-500, html #auth-lang-btn-en.bg-emerald-500,
html #legal-compliance-modal [id^="legal-tab-btn-"].bg-emerald-500 {
  background: var(--pill-selected) !important;
  color: var(--pill-selected-ink) !important;
  box-shadow: none !important;
}
html #delete-account-confirm-btn {
  background: #E0383E !important; color: #FFF !important;
}
html input::placeholder, html textarea::placeholder,
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--text-muted) !important; opacity: .8 !important; }
.dash-more-note, html.dark .dash-more-note,
.tpl-hint, html.dark .tpl-hint { color: var(--text-muted); }
/* The same primary treatment also applies to less frequent dialogs and export actions. */
html button.bg-emerald-500, html button.bg-emerald-600,
html.dark button.bg-emerald-500, html.dark button.bg-emerald-600,
html.dark button.bg-emerald-500:hover, html.dark button.bg-emerald-600:hover {
  background: var(--concept-primary) !important;
  color: var(--concept-primary-ink) !important;
  box-shadow: none !important;
}
html #welcome-trial-sub-btn, html #btn-trigger-export {
  border-bottom: 4px solid var(--concept-primary-edge);
}
html #auth-tab-bar button.bg-emerald-500,
html #auth-lang-btn-de.bg-emerald-500, html #auth-lang-btn-en.bg-emerald-500,
html #legal-compliance-modal [id^="legal-tab-btn-"].bg-emerald-500 {
  background: var(--pill-selected) !important;
  color: var(--pill-selected-ink) !important;
}
#macro-goals-calc-status.text-emerald-600, html.dark #macro-goals-calc-status.dark\:text-emerald-400 { color: var(--concept-good-ink) !important; }
/* Success is jade; coral remains the brand/action accent. */
html [id$="-stat-status"][class*="text-emerald-"],
html #welcome-trial-badge-container,
html #badge-yearly-active, html #badge-monthly-active {
  background-color: rgba(53,184,137,.10) !important;
  border-color: rgba(53,184,137,.28) !important;
  color: var(--concept-good-ink) !important;
}
html #toast-icon.text-emerald-500 { color: var(--concept-good) !important; }

/* Consistent neutral frames. Internal separators, soft fields, selection and
   recording/error indicators retain their own semantic styles. */
html :is(.glass-panel, .track-photo-box, .track-meta-panel, .track-list-card,
  .result-x-card, .edit-b-card, .tpl-list, .tpl-how, .manual-switch-row,
  .coach-card, .stat-group-card, .stat-kompass),
html.dark :is(.glass-panel, .track-photo-box, .track-meta-panel, .track-list-card,
  .result-x-card, .edit-b-card, .tpl-list, .tpl-how, .manual-switch-row,
  .coach-card, .stat-group-card, .stat-kompass) {
  border-style: solid !important;
  border-width: var(--concept-border-width) !important;
  border-bottom-width: var(--concept-border-base) !important;
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
  border-radius: var(--concept-radius-card) !important;
  box-shadow: none !important;
}
html :is(.capture-round-icon, .meal-a-act > span, .edit-b-round, .track-round-btn, .photo-gallery-btn, .theme-opt),
html.dark :is(.capture-round-icon, .meal-a-act > span, .edit-b-round, .track-round-btn, .photo-gallery-btn, .theme-opt) {
  border: var(--concept-border-width) solid var(--border-card);
  border-bottom: var(--concept-border-base) solid var(--concept-edge);
  box-shadow: none;
}
html :is(.capture-round-icon, .theme-opt) { border-radius: var(--concept-radius-action); }
html .capture-round-btn:active .capture-round-icon,
html .meal-a-act:active > span, html .edit-b-round:active, html .track-round-btn:active, html .photo-gallery-btn:active {
  border-bottom-width: var(--concept-border-pressed);
  transform: translateY(2px);
}
html :is(.glass-panel, .track-photo-box):hover,
html.dark :is(.glass-panel, .track-photo-box):hover {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
  box-shadow: none !important;
}
/* The Pro page intentionally contains a borderless structural wrapper. */
html #settings-subpanel-ai #pro-status-card,
html.dark #settings-subpanel-ai #pro-status-card,
html #webcam-modal .glass-panel, html.dark #webcam-modal .glass-panel {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
}
html #settings-subpanel-ai :is(#card-plan-yearly, #card-plan-monthly),
html.dark #settings-subpanel-ai :is(#card-plan-yearly, #card-plan-monthly) {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
  border-radius: var(--concept-radius-card) !important;
}
html #settings-subpanel-ai :is(#card-plan-yearly, #card-plan-monthly).border-emerald-500,
html.dark #settings-subpanel-ai :is(#card-plan-yearly, #card-plan-monthly).border-emerald-500 {
  border-color: var(--concept-coral) !important;
  border-bottom-color: var(--concept-coral) !important;
}
html .theme-opt.is-selected, html.dark .theme-opt.is-selected,
html.dark #settings-subpanel-design .theme-opt.is-selected { border-color: var(--concept-coral) !important; }
html #app-bottom-nav, html #tracking-bottom-nav,
html.dark #app-bottom-nav, html.dark #tracking-bottom-nav {
  border-width: var(--concept-border-width) !important;
  border-bottom-width: var(--concept-border-base) !important;
}
html .pro-paywall, html.dark .pro-paywall,
html .dash-cal, html.dark .dash-cal {
  border-width: var(--concept-border-width);
  border-bottom-width: var(--concept-border-base);
  border-color: var(--border-card);
  border-bottom-color: var(--concept-edge);
  border-radius: var(--concept-radius-card);
}
html :is(#mic-toggle-btn, #photo-note-mic-btn, #refine-mic-btn, #edit-meal-mic-btn):not(.mic-recording-active),
html.dark :is(#mic-toggle-btn, #photo-note-mic-btn, #refine-mic-btn, #edit-meal-mic-btn):not(.mic-recording-active) {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
}
/* Preserve the existing file-drop feedback while sharing the normal frame. */
html .track-photo-box.drag-over, html.dark .track-photo-box.drag-over {
  border-color: var(--concept-coral) !important;
}
/* Legacy ID/button rules must not override the shared neutral lower edge. */
html #calculator-card-container, html.dark #calculator-card-container,
html #settings-subpanel-design .theme-opt:not(.is-selected),
html.dark #settings-subpanel-design .theme-opt:not(.is-selected) {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
}

html .barcode-viewfinder, html.dark .barcode-viewfinder {
  border: var(--concept-border-width) solid var(--border-card);
  border-bottom: var(--concept-border-base) solid var(--concept-edge);
  border-radius: var(--concept-radius-card);
}
html #view-settings button.glass-panel, html.dark #view-settings button.glass-panel {
  border-color: var(--border-card) !important;
  border-bottom-color: var(--concept-edge) !important;
}

/* Compact statistics overview: one-line metadata at iPhone 15 Pro width. */
html .stat-overview, html.dark .stat-overview { padding: 16px; }
.stat-overview-greeting { gap: 10px; margin-bottom: 18px; }
.stat-overview #stat-keks { width: 52px; height: 58px; margin: 0; }
.stat-overview #stat-keks-bubble { padding: 9px 10px; line-height: 1.45; min-width: 0; }
.stat-overview #stat-keks-title { display: block; font-size: 13px; white-space: nowrap; }
.stat-overview #stat-keks-text { display: block; font-size: 11.5px; white-space: nowrap; }
.stat-overview-kpi { margin-bottom: 0; }
.stat-overview-kpi > div { flex-wrap: nowrap; align-items: baseline; gap: 7px; }
.stat-overview #stat-chart-avg-value { font-size: clamp(34px, 11vw, 44px); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-overview #stat-chart-avg-unit { font-size: 12px; white-space: nowrap; }
.stat-overview #stat-chart-avg-pill { margin-top: 9px; padding: 5px 9px; background: var(--concept-field) !important; color: var(--concept-good-ink) !important; font-size: 11px; white-space: nowrap; }
.stat-overview #stat-chart-avg-pill[data-band="empty"],
.stat-overview #stat-chart-avg-pill[data-band="under"] { color: var(--text-muted) !important; }
.stat-overview #stat-chart-avg-pill[data-band="over"] { background: #F4E2DF !important; color: #9A4352 !important; }
html.dark .stat-overview #stat-chart-avg-pill { background: #3C3D3F !important; }
html.dark .stat-overview #stat-chart-avg-pill[data-band="over"] { background: #50383B !important; color: #FFD0C9 !important; }
.stat-bar-bubble { position: absolute; left: 0; top: 0; z-index: 5; min-width: 178px; max-width: 100%; padding: 8px 11px 9px; background: #FFF; border: 2px solid var(--border-card); border-bottom-width: 3px; border-radius: 18px; color: var(--text-main, #2B2B2B); font-family: var(--font-rounded); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility .1s; will-change: transform; }
html.dark .stat-bar-bubble { background: var(--concept-field); color: #F3EDE0; }
.stat-overview-chart canvas { touch-action: pan-y; }
.stat-bar-bubble.is-visible { opacity: 1; visibility: visible; }
.stat-bar-bubble-main, .stat-bar-bubble-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stat-bar-bubble-main strong { font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.stat-bar-bubble-main small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.stat-bar-bubble-main > span, .stat-bar-bubble-foot > span { font-size: 11px; color: var(--text-muted); }
.stat-bar-bubble-foot { margin-top: 3px; font-size: 11px; }
.stat-bar-bubble-foot b { font-weight: 600; color: var(--text-muted); }
.stat-bar-bubble[data-over="true"] .stat-bar-bubble-foot b { color: #9A4352; }
html.dark .stat-bar-bubble[data-over="true"] .stat-bar-bubble-foot b { color: #FFBAB4; }
.stat-bar-bubble-tip { position: absolute; left: 0; bottom: -8px; width: 13px; height: 13px; margin-left: -8.5px; background: inherit; border-right: 2px solid var(--border-card); border-bottom: 2px solid var(--border-card); border-bottom-right-radius: 4px; transform: translateX(var(--tip-x, 90px)) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .stat-bar-bubble { transition: none; } }
.stat-overview-period { min-height: 1.3em; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 14px; font-size: 11px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; }
.stat-overview-chart-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.stat-overview-chart-meta #stat-chart-target { font-weight: 600; }
.stat-overview-chart { height: 190px; }
html #calorie-chart-legend, html.dark #calorie-chart-legend { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 0; margin: 12px 0 16px; font-size: 11px; line-height: 1.3; color: var(--text-muted); white-space: nowrap; }
#calorie-chart-legend > span { gap: 4px; flex: 0 0 auto; }
#calorie-chart-legend .stat-leg { width: 7px; height: 7px; border-radius: 2px; flex: none; }
/* Independent rectangular period buttons with the app's tactile lower edge. */
html #stat-range-container, html.dark #stat-range-container { margin-top: 0; padding: 0 0 2px; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; gap: 9px; }
html #stat-range-container button, html.dark #stat-range-container button { min-width: 0; height: 49px; min-height: 49px; padding: 10px 4px; font-size: 13px; line-height: 1.25; font-weight: 750; border: var(--concept-border-width) solid var(--border-card); border-color: var(--border-card) !important; border-bottom-width: var(--concept-border-base); border-radius: var(--concept-radius-action); white-space: nowrap; box-shadow: none !important; background: var(--bg-card) !important; color: var(--text-muted) !important; transform: none; transition: background-color .16s ease, color .16s ease; }
html #stat-range-container button.active, html.dark #stat-range-container button.active { box-shadow: none !important; background: var(--concept-field) !important; color: var(--text-main) !important; border-color: var(--border-card) !important; border-bottom-width: var(--concept-border-base); transform: none; }
@media (prefers-reduced-motion: reduce) { html #stat-range-container button { transition: none; } }
@media (min-width: 640px) {
  html .stat-overview, html.dark .stat-overview { padding: 24px; }
  .stat-overview-chart { height: 240px; }
  html #calorie-chart-legend, html.dark #calorie-chart-legend { justify-content: center; gap: 20px; }
}

/* GPU-composited bar growth; canvas retains axes, data and touch hit testing. */
.stat-calorie-bar-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.stat-calorie-goal-dot { display: none; position: absolute; z-index: 2; width: 10px; height: 10px; border: 1.5px solid; border-radius: 50%; transform: translate(-50%, -50%); }
.stat-calorie-bar { position: absolute; transform-origin: center bottom; pointer-events: none; }
.stat-calorie-target-line { position: absolute; z-index: 2; border-top: 1px dashed var(--text-muted); opacity: .65; pointer-events: none; }

.stat-overview-chart canvas { position: relative; }


/* Intro tour: four full-screen steps in the app's card design */
.itour { --it-bg:#EFECE6; --it-card:#FBFAF7; --it-field:#E7E2D9; --it-border:#DAD5CC; --it-text:#2B2B2B; --it-muted:#7B766D; --it-primary:#2B2B2B; --it-primary-text:#FFB2A8; position:fixed; inset:0; z-index:85; background:var(--it-bg); color:var(--it-text); display:flex; justify-content:center; font-family:var(--font-rounded); user-select:none; -webkit-user-select:none; }
html.dark .itour { --it-bg:#1C1D1E; --it-card:#262729; --it-field:#313234; --it-border:#3F4042; --it-text:#F3EDE0; --it-muted:#A39D91; --it-primary:#FF7668; --it-primary-text:#2B2B2B; }
.itour.hidden { display:none; }
.itour-inner { position:relative; width:100%; max-width:440px; height:100%; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px); }
.itour-close { position:absolute; z-index:1; top:calc(env(safe-area-inset-top, 0px) + 16px); right:16px; width:36px; height:36px; border-radius:50%; background:var(--it-field); color:var(--it-text); display:grid; place-items:center; cursor:pointer; }
.itour-close svg { width:18px; height:18px; }
.itour-cards { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.itour-step { display:flex; flex-direction:column; gap:14px; padding-bottom:12px; }
.itour-step.hidden { display:none; }
.itour-head { min-height:40px; display:flex; align-items:center; padding-right:48px; }
.itour-head h2 { margin:0; font-size:28px; line-height:1.1; color:var(--it-text); }
.itour-say { display:flex; align-items:center; gap:10px; }
.itour-say img { width:58px; height:58px; flex:none; }
.itour-bubble { flex:1; border-width:2px; border-style:solid; border-radius:18px; padding:9px 12px; font-size:14px; line-height:1.35; color:var(--it-text); }
.itour-card { background:var(--it-card); border:2px solid var(--it-border); border-bottom-width:4px; border-radius:24px; padding:14px; }
.itour-dash { display:flex; align-items:center; gap:14px; }
.itour-ring { position:relative; width:110px; height:110px; flex:none; }
.itour-ring svg { width:100%; height:100%; }
.itour-ring circle { fill:none; stroke-width:9; }
.itour-ring-track { stroke:var(--it-field); }
.itour-ring-progress { stroke:#35B889; stroke-linecap:round; }
.itour-ring-text { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.itour-ring-text b { font-size:27px; line-height:1; }
.itour-ring-text small { font-size:11px; color:var(--it-muted); margin-top:2px; }
.itour-macs { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.itour-mac-row { display:flex; justify-content:space-between; font-size:12px; color:var(--it-muted); }
.itour-mac-row b { color:var(--it-text); }
.itour-bar { height:7px; margin-top:3px; border-radius:9px; background:var(--it-field); overflow:hidden; }
.itour-bar u { display:block; height:100%; border-radius:9px; }
.itour-hint { margin:0; padding:0 10px; text-align:center; font-size:14px; line-height:1.4; color:var(--it-muted); }
.itour-status { padding:12px; border-radius:16px; background:var(--it-field); text-align:center; font-size:14px; font-weight:600; line-height:1.35; }
.itour-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.itour-tile { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:13px; font-weight:700; }
.itour-tile-icon { width:60px; height:60px; display:grid; place-items:center; background:var(--it-card); border:2px solid var(--it-border); border-bottom-width:4px; border-radius:18px; }
.itour-tile-icon svg { width:23px; height:23px; }
.itour-list { padding:4px 14px; }
.itour-row { padding:9px 0; border-bottom:1px solid var(--it-field); }
.itour-row:last-child { border-bottom:0; }
.itour-row b, .itour-result div + div b, .itour-coach b { display:block; font-size:15px; }
.itour-row span, .itour-result div + div span, .itour-coach span { display:block; font-size:13px; line-height:1.3; color:var(--it-muted); }
.itour-field { padding:13px 14px; border-radius:16px; background:var(--it-field); font-size:15px; }
.itour-field-dim { color:var(--it-muted); }
.itour-result { display:flex; align-items:center; gap:14px; }
.itour-kcal { text-align:center; }
.itour-kcal b { display:block; font-size:28px; line-height:1; }
.itour-kcal small { font-size:11px; color:var(--it-muted); }
.itour-bars { display:flex; align-items:flex-end; gap:8px; height:170px; }
.itour-col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
.itour-col u { display:block; width:100%; border-radius:8px 8px 3px 3px; }
.itour-col em { font-style:normal; font-size:11px; color:var(--it-muted); }
.itour-coach { display:flex; align-items:center; gap:12px; padding:11px 14px; }
.itour-coach > svg { width:21px; height:21px; flex:none; color:var(--it-muted); }
.itour-coach div { flex:1; min-width:0; }
.itour-footer { flex:none; display:flex; flex-direction:column; gap:12px; padding-top:10px; }
.itour-dots { display:flex; justify-content:center; gap:6px; }
.itour-dots span { width:7px; height:7px; border-radius:9px; background:var(--it-border); transition:width .2s ease; }
.itour-dots span.on { width:22px; background:#FF7668; }
.itour-buttons { display:flex; gap:9px; }
.itour-primary, .itour-secondary { height:54px; border-radius:18px; border-bottom:4px solid rgba(0,0,0,.28); font-family:var(--font-rounded); font-weight:700; font-size:16px; cursor:pointer; }
.itour-primary { flex:1; background:var(--it-primary); color:var(--it-primary-text); }
.itour-secondary { padding:0 20px; background:var(--it-field); color:var(--it-text); border-bottom-color:var(--it-border); }
.itour-secondary.hidden, .itour-offers.hidden { display:none; }
.itour-primary:active, .itour-secondary:active { border-bottom-width:2px; transform:translateY(2px); }


/* Sign-in messages: calm field with a coloured icon */
.auth-alert { display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; padding:12px 14px; border-radius:18px; background:#E7E2D9; color:#2B2B2B; font-family:var(--font-rounded); font-size:14px; font-weight:600; line-height:1.35; }
html.dark .auth-alert { background:#313234; color:#F3EDE0; }
.auth-alert.hidden { display:none; }
.auth-alert > span { flex:1; min-width:0; }
.auth-alert-icon { width:19px; height:19px; flex:none; margin-top:1px; }
.auth-alert-error .auth-alert-icon { color:#D95F76; }
.auth-alert-ok .auth-alert-icon { color:#35B889; }

/* Dashboard: four independent comic tiles with a visible lower edge. */
#dashboard-tracking-options .capture-bar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px;
  padding-bottom: 2px; overflow: visible; background: transparent; border: 0; border-radius: 0;
}
#dashboard-tracking-options .capture-round-btn {
  gap: 7px; min-width: 0; height: 80px; padding: 12px 3px 10px; justify-content: center;
  background: var(--bg-card); color: var(--text-main);
  border: var(--concept-border-width) solid var(--border-card);
  border-bottom-width: var(--concept-border-base); border-radius: var(--concept-radius-action);
  transition: transform .1s ease, border-bottom-width .1s ease, background-color .1s ease;
}
#dashboard-tracking-options .capture-round-btn:active {
  transform: translateY(2px); border-bottom-width: var(--concept-border-pressed); background: var(--concept-field);
}
#dashboard-tracking-options .capture-round-btn:focus-visible { outline: 2px solid #FF7668; outline-offset: 3px; }
html #dashboard-tracking-options .capture-round-icon, html.dark #dashboard-tracking-options .capture-round-icon {
  width: 24px; height: 24px; background: none; border: 0; border-radius: 0; color: inherit; transform: none;
}
#dashboard-tracking-options .capture-round-icon svg { width: 24px; height: 24px; }
#dashboard-tracking-options .capture-round-label { font-size: 12px; line-height: 1.2; font-weight: 650; color: inherit; }
@media (max-width: 360px) {
  #dashboard-tracking-options .capture-bar { gap: 7px; }
  #dashboard-tracking-options .capture-round-label { font-size: 11px; }
}
@media (hover: hover) and (pointer: fine) {
  #dashboard-tracking-options .capture-round-btn:hover { background: var(--concept-field); }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-tracking-options .capture-round-btn { transition: none; }
}

.stat-missing-note { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); }

/* Dashboard: compact chronological meal list. */
.meal-sec {
  position: relative; background: var(--bg-card);
  border: var(--concept-border-width) solid var(--border-card);
  border-bottom: var(--concept-border-base) solid var(--concept-edge);
  border-radius: var(--concept-radius-card); overflow: hidden;
}
.meal-sec .meal-swipe { border-radius: 0; }
.meal-sec .meal-swipe + .meal-swipe { border-top: 1px solid var(--border-card); }
html .today-meal-card.meal-row, html.dark .today-meal-card.meal-row { background: var(--bg-card); border: 0; border-radius: 0; box-shadow: none; }
.meal-row .today-meal-header { min-height: 54px; padding: 9px 14px; -webkit-tap-highlight-color: transparent; }

/* Zutat per Wischen entfernen */
.ing-swipe { position: relative; overflow: hidden; border-top: 1.5px solid var(--border-card); }
.ing-swipe:first-child { border-top: 0; }
.ing-swipe .meal-a-row { border-top: 0; }
.ing-swipe-slide { position: relative; z-index: 1; touch-action: pan-y; background: var(--bg-page, #EFECE6); will-change: transform; }
html.dark .ing-swipe-slide { background: #2B2C2E; }
.ing-swipe-del { position: absolute; right: 0; top: 0; bottom: 0; width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #E0383E; color: #fff; border: 0; padding: 0; }
.ing-swipe.is-armed .ing-swipe-del { background: #e85555; }

html .meal-a-act.is-delete, html .meal-a-act.is-delete > span, html.dark .meal-a-act.is-delete, html.dark .meal-a-act.is-delete > span { color: #FF7668; }

/* Free writing area shared by photo, text and both meal adjustment flows. */
.meal-composer { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 24px; background: var(--concept-field); min-width: 0; }
.meal-composer:focus-within { outline: 2px solid var(--concept-coral); outline-offset: 2px; }
html .meal-composer textarea.track-soft-field, html.dark .meal-composer textarea.track-soft-field {
  display: block; width: 100%; min-width: 0; min-height: 76px !important; height: 76px; padding: 4px 5px;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--font-rounded); font-size: 16px; line-height: 1.45; resize: vertical;
}
html .meal-composer textarea.track-soft-field:focus, html.dark .meal-composer textarea.track-soft-field:focus { border: 0 !important; box-shadow: none !important; outline: none; }
.meal-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 46px; }
html .meal-composer-actions > button, html.dark .meal-composer-actions > button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: none;
  padding: 0 !important; margin: 0 !important; border-radius: 50% !important; font-size: 0 !important;
}
html .meal-composer-actions > button.hidden { display: none !important; }
html .meal-composer-actions > button > span { display: none !important; }
.meal-composer-actions > button svg { width: 22px; height: 22px; flex: none; }
html .meal-composer-actions > :is(#mic-toggle-btn,#photo-note-mic-btn,#refine-mic-btn,#edit-meal-mic-btn):not(.mic-recording-active),
html.dark .meal-composer-actions > :is(#mic-toggle-btn,#photo-note-mic-btn,#refine-mic-btn,#edit-meal-mic-btn):not(.mic-recording-active) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--text-muted) !important;
}
html .meal-composer-actions > :is(#btn-submit-analyze,#btn-submit-refine,#btn-trigger-ai-reanalysis),
html.dark .meal-composer-actions > :is(#btn-submit-analyze,#btn-submit-refine,#btn-trigger-ai-reanalysis) {
  background: var(--concept-coral) !important; color: #292929 !important; border: 0 !important; border-bottom: 3px solid #202021 !important; box-shadow: none !important;
}
html .meal-composer-actions > button:disabled { opacity: .55 !important; cursor: wait; }
html .meal-composer-actions > button:active:not(:disabled) { transform: translateY(2px); }
.meal-composer-actions > button:focus-visible { outline: 2px solid var(--concept-coral); outline-offset: 2px; }
html .meal-composer-actions > :is(#mic-toggle-btn,#photo-note-mic-btn,#refine-mic-btn,#edit-meal-mic-btn).mic-recording-active,
html.dark .meal-composer-actions > :is(#mic-toggle-btn,#photo-note-mic-btn,#refine-mic-btn,#edit-meal-mic-btn).mic-recording-active {
  background: rgba(239,68,68,.14) !important; border: 0 !important; box-shadow: none !important; color: #ef4444 !important;
}

html #btn-save-analyzed-meal, html #btn-save-edited-meal { height: 64px; min-height: 64px; max-height: 64px; padding: 8px 12px; }
.result-save-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.result-save-hint { display: block; margin: 0; color: inherit; font-size: 11px; font-weight: 500; line-height: 1.25; white-space: normal; }
.result-save-hint.hidden { display: none; }
html #btn-save-analyzed-meal:disabled, html.dark #btn-save-analyzed-meal:disabled,
html #btn-save-edited-meal:disabled, html.dark #btn-save-edited-meal:disabled {
  background: var(--concept-field) !important; color: var(--text-muted) !important;
  border-color: var(--border-card) !important; box-shadow: none !important; cursor: not-allowed; transform: none; opacity: 1 !important;
}
/* Voice status occupies the free lower-left area instead of adding a row. */
#refine-inputs-container { position: relative; }
#refine-voice-status {
  position: absolute; left: 14px; right: 118px; bottom: 23px; height: 20px; min-height: 20px;
  padding: 0; overflow: hidden;
}
#refine-voice-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#refine-voice-status .voice-rec-line { display: flex; min-width: 0; max-width: 100%; }
#refine-voice-status .voice-rec-dot, #refine-voice-status .voice-rec-time, #refine-voice-status .voice-rec-sep { flex-shrink: 0; }

/* A disabled Save action uses text only, including its explanation. */
html #btn-save-analyzed-meal:disabled > svg:not(.spinner-icon), html #btn-save-edited-meal:disabled > svg:not(.spinner-icon) { display: none; }

/* Result speech input is reviewed before sending; unavailable arrows stay neutral. */
html .meal-composer-actions > #btn-submit-refine:disabled, html.dark .meal-composer-actions > #btn-submit-refine:disabled {
  background: var(--concept-track) !important; color: var(--text-muted) !important;
  border-bottom-color: var(--border-card) !important; opacity: 1 !important; cursor: not-allowed;
}

/* Anmeldung/Registrierung: Checkboxen in Akzentfarbe statt Grün */
#auth-login-remember, #auth-reg-age, #auth-reg-health, #auth-reg-terms { accent-color: #FF7668; }
#auth-login-remember:focus-visible, #auth-reg-age:focus-visible, #auth-reg-health:focus-visible, #auth-reg-terms:focus-visible { outline: 2px solid #FF7668; outline-offset: 2px; }

/* Opened meal: the header name wraps and shows in full instead of repeating it below. */
.today-meal-card.is-title-open .today-meal-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* Settings: Pro card (light like the other cards; three states) */
.spro { padding: 18px 16px 16px; }
.spro-top { display: flex; align-items: center; gap: 12px; }
.spro-phoenix { flex: none; width: 60px; height: 60px; object-fit: contain; }
.spro-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--concept-coral-ink); }
html.dark .spro-label { color: #FF9B8E; }
html .spro-title, html.dark .spro-title { margin: 2px 0 0; font-size: 21px; line-height: 1.15; color: var(--text-main); text-wrap: balance; }
.spro-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--concept-field); color: var(--text-muted); }
.spro-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.spro-status.is-trial { color: var(--text-main); }
.spro-status.is-trial .spro-dot { background: var(--concept-coral); }
.spro-status.is-active { background: #DDF3EA; color: var(--concept-good-ink); }
html.dark .spro-status.is-active { background: #1F3A30; color: #5CD3A6; }
.spro-meter { height: 7px; margin-top: 14px; border-radius: 9px; background: var(--concept-field); overflow: hidden; }
.spro-meter i { display: block; height: 100%; border-radius: 9px; background: var(--concept-coral); }
.spro-perks { display: grid; gap: 11px; margin: 16px 0 0; padding: 0; list-style: none; }
.spro-perks li { display: flex; align-items: flex-start; gap: 11px; }
.spro-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--concept-field); color: var(--concept-coral); }
.spro.is-active .spro-ic { color: var(--concept-good); }
.spro-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spro.is-active .spro-perks li { align-items: center; }
.spro-perks b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--text-main); }
.spro-perks small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
html #settings-pro-btn, html.dark #settings-pro-btn { display: block; width: 100%; margin-top: 18px; padding: 14px 16px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 800; cursor: pointer;
  background: #2B2B2B; color: #FF9B8E; box-shadow: 0 4px 0 #111; }
html.dark #settings-pro-btn { background: var(--concept-coral); color: #2B2B2B; box-shadow: 0 4px 0 #B6544A; }
html #settings-pro-btn.is-soft, html.dark #settings-pro-btn.is-soft { background: var(--concept-field); color: var(--text-main); box-shadow: 0 4px 0 var(--concept-edge); }
html #settings-pro-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #111; }
.spro-fine { margin: 11px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }

/* Small comic celebration anchored to the existing save-confirmation sheet. */
.yum-fireworks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.yum-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; opacity: 0; pointer-events: none; }
.yum-spark.is-star { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.yum-spark.is-dash { width: 5px; height: 11px; border-radius: 3px; }

/* Give the mobile save celebration more room above the bottom edge. */
@media (max-width: 639px) {
  #yum-moment .yum-moment-sheet { padding-top: 44px; max-height: calc(100svh - max(12px, env(safe-area-inset-top))); overflow-y: auto; }
  #yum-moment-keks { width: 112px; height: 112px; }
  #yum-moment-title { margin-top: 12px; }
  #yum-moment-pill { margin-top: 16px; margin-bottom: 28px; }
}

/* Push-to-talk stays on the dashboard until the finger is released. */
#dashboard-text-capture { -webkit-touch-callout: none; user-select: none; touch-action: pan-y; }
#dashboard-tracking-options #dashboard-text-capture.is-voice-starting,
#dashboard-tracking-options #dashboard-text-capture.is-voice-recording { background: var(--concept-field); transform: translateY(2px); border-bottom-width: var(--concept-border-pressed); }
#dashboard-tracking-options #dashboard-text-capture.is-voice-recording { border-color: #FF7668; color: var(--text-main); }
html #dashboard-tracking-options #dashboard-text-capture.is-voice-recording .capture-round-icon,
html.dark #dashboard-tracking-options #dashboard-text-capture.is-voice-recording .capture-round-icon { color: #FF7668; animation: dashboard-mic-pulse .85s ease-in-out infinite alternate; }
.dashboard-voice-hold-status { margin: 9px 2px 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
@keyframes dashboard-mic-pulse { to { transform: scale(1.13); } }
@media (prefers-reduced-motion: reduce) {
  html #dashboard-tracking-options #dashboard-text-capture.is-voice-recording .capture-round-icon,
  html.dark #dashboard-tracking-options #dashboard-text-capture.is-voice-recording .capture-round-icon { animation: none; }
}

.dashboard-voice-hold-status[data-phase="recording"] { display: flex; align-items: center; gap: 7px; color: #A73E50; font-weight: 600; }
html.dark .dashboard-voice-hold-status[data-phase="recording"] { color: #FF9B9F; }
.dashboard-voice-hold-status[data-phase="recording"]::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }

/* Meals open as a subpage; the dashboard list contains no category headings. */
html #view-dashboard[data-meal-detail] > :not(#meal-detail-page) { display: none !important; }
html #view-dashboard[data-meal-detail] { padding-top: 0; }
.meal-overview-list .meal-swipe:first-child, .meal-overview-list .meal-swipe:first-child .meal-row { border-radius: 20px 20px 0 0; }
.meal-overview-list .meal-swipe:last-child, .meal-overview-list .meal-swipe:last-child .meal-row { border-radius: 0 0 20px 20px; }
.meal-overview-list .meal-swipe:only-child, .meal-overview-list .meal-swipe:only-child .meal-row { border-radius: 20px; }
.meal-detail-card { background: var(--bg-card); border: 2px solid var(--border-card); border-bottom: 4px solid var(--concept-edge); border-radius: var(--concept-radius-card); overflow: hidden; }
html #meal-detail-content .meal-a-details, html.dark #meal-detail-content .meal-a-details { padding: 20px 16px; border: 0; background: transparent; }
#meal-detail-title { outline: none; overflow-wrap: anywhere; }
.meal-overview-list .today-meal-header:focus-visible { outline: 2px solid var(--concept-coral); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { #view-dashboard.view-slide-enter { animation: none !important; } }

/* Meal categories: heading outside the card. */
.meal-cat-group { display: flex; flex-direction: column; gap: 7px; }
html .meal-cat-head, html.dark .meal-cat-head { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 4px; font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--text-main); }
.meal-cat-icon { width: 15px; height: 15px; color: var(--text-muted); flex: none; }