@charset "UTF-8";

/* Custom Styling for nom nom - clean, friendly, minimalist */
:root {
  --bg-primary: #efece6;
  --bg-secondary: #e7e2d9;
  --bg-card: #fbfaf7;
  --border-card: #dad5cc;
  --text-main: #262729;
  --text-muted: #706b64;
  --accent-emerald: #FF7668;
  --accent-cyan: #0284c7;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

html {
  background-color: var(--bg-primary);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
[role="button"],
.dashboard-tracking-btn,
.dashboard-date-display,
.today-meal-card,
.today-meal-card-content,
.tab-btn,
.mobile-nav-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Crisp Clean Minimalist Cards */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
}

.glass-panel-hover {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .glass-panel-hover:hover {
    transform: translateY(-2px);
    border-color: #c9c3b8;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 6px 10px -6px rgba(0, 0, 0, 0.03);
  }
}

/* Custom Fast-Fading Scrollbar System */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track,
::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Smooth Floating Scroll Indicator (iOS native style) */
#app-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: 3px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  background-color: rgba(83, 84, 86, 0.45);
  transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

html.dark #app-scroll-indicator,
.dark #app-scroll-indicator {
  background-color: rgba(255, 255, 255, 0.38);
}

/* Dashboard hero (variant A): ring left, macros right */
.hero-row { display: flex; align-items: center; gap: 16px; }
.hero-ring { width: 124px; height: 124px; }
.hero-ring-num { font-size: 32px; line-height: 1; }
.hero-ring-num.is-long { font-size: 25px; }
.hero-ring-label { font-size: 11px; margin-top: 3px; }
.hero-macros { display: flex; flex-direction: column; gap: 11px; }
.hero-macro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12px; color: #706b64; white-space: nowrap; }
.hero-macro-head > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.hero-macro-val { color: #aaa7a1; font-size: 11.5px; }
.hero-macro-val > span:first-child { font-family: var(--font-rounded); font-weight: 700; font-size: 13.5px; color: #262729; }
html.dark .hero-macro-head { color: #aaa7a1; }
html.dark .hero-macro-val { color: #706b64; }
html.dark .hero-macro-val > span:first-child { color: #efece6; }
.hero-macro-bar { height: 7px; margin-top: 5px; border-radius: 9999px; overflow: hidden; background: #e7e2d9; }
html.dark .hero-macro-bar { background: #313234; }
@media (min-width: 640px) {
  .hero-row { gap: 28px; }
  .hero-ring { width: 168px; height: 168px; }
  .hero-ring-num { font-size: 44px; }
  .hero-ring-num.is-long { font-size: 36px; }
  .hero-ring-label { font-size: 13px; }
  .hero-macro-head { font-size: 13.5px; }
  .hero-macro-val > span:first-child { font-size: 15px; }
  .hero-macro-bar { height: 8px; }
}

.dash-more-toggle { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px auto 0; padding: 6px 12px; border: 0; background: none; color: #706b64; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 9999px; -webkit-tap-highlight-color: transparent; }
html.dark .dash-more-toggle { color: #aaa7a1; }
.dash-more-chev { transition: transform .2s ease; }
.dash-more-toggle.is-open .dash-more-chev { transform: rotate(180deg); }
.dash-more-panel { margin-top: 6px; padding: 12px 14px; border-radius: 16px; background: #efece6; animation: dash-more-in .22s ease both; }
html.dark .dash-more-panel { background: #262729; }
.dash-more-panel[hidden] { display: none; }
@keyframes dash-more-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dash-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 16px; }
.dash-more-grid .hero-macro-head { font-size: 11.5px; }
.dash-more-grid .hero-macro-val > span:first-child { font-size: 13px; }
html.dark .dash-more-grid .hero-macro-bar { background: #313234; }
/* softer, muted tones so the extra nutrients stay quieter than the main macros */
.dash-more-fiber-bg { background: #8cc9ad; }
.dash-more-sugar-bg { background: #e2b77a; }
.dash-more-salt-bg { background: #b9babc; }
.dash-more-panel .macro-fatsat-bg { background: #cf9a9e; }
.dash-more-panel .hero-macro-bar > div.is-over { background: #e3837f; }
html.dark .dash-more-fiber-bg { background: #6fae93; }
html.dark .dash-more-sugar-bg { background: #c9a06a; }
html.dark .dash-more-salt-bg { background: #7f9cc2; }
html.dark .dash-more-panel .macro-fatsat-bg { background: #b07f84; }
html.dark .dash-more-panel .hero-macro-bar > div.is-over { background: #c96f6c; }
.dash-more-note { margin: 9px 0 0; font-size: 11px; color: #aaa7a1; text-align: center; }
html.dark .dash-more-note { color: #706b64; }
@media (prefers-reduced-motion: reduce) { .dash-more-panel { animation: none; } }

/* Calorie Ring SVG */
.circular-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #dad5cc;
  stroke-width: 2.8;
}

.circle-segs path {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: butt;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

/* Microphone voice wave animation */
.voice-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
}
.voice-wave-container.hidden {
  display: none !important;
}

.voice-bar {
  width: 4px;
  height: 8px;
  background-color: #ef4444;
  border-radius: 4px;
  animation: soundWave 1.2s ease-in-out infinite alternate;
}

.voice-bar:nth-child(1) { animation-delay: 0.1s; height: 14px; }
.voice-bar:nth-child(2) { animation-delay: 0.3s; height: 24px; }
.voice-bar:nth-child(3) { animation-delay: 0.2s; height: 18px; }
.voice-bar:nth-child(4) { animation-delay: 0.4s; height: 26px; }
.voice-bar:nth-child(5) { animation-delay: 0.15s; height: 12px; }

@keyframes soundWave {
  0% { transform: scaleY(0.4); opacity: 0.6; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); }
  50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
}

.mic-recording-active {
  animation: pulseGlow 1.5s infinite;
}

/* ========================================================
   HIGH-PERFORMANCE HARDWARE-ACCELERATED SPINNERS
   ======================================================== */
@keyframes spinSmooth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-icon,
.animate-spin,
svg.animate-spin {
  animation: spinSmooth 0.75s linear infinite !important;
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
  transform-box: fill-box !important;
  will-change: transform;
  display: inline-block;
  vertical-align: middle;
}

.spinner-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Fallback CSS Arc Spinner with high-contrast dual-tone */
.spinner-circle {
  display: inline-block;
  border-radius: 9999px;
  border-style: solid;
  border-width: 2.5px;
  border-color: currentColor;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  animation: spinSmooth 0.75s linear infinite !important;
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
  will-change: transform;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Tab indicator */
.tab-btn.active {
  background: #fbfaf7;
  color: #D45F53;
  border-color: #dad5cc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* Outlier Cards - Modern Minimalist */
.outlier-card,
.outlier-card-high,
.outlier-card-low {
  border-left-width: 1px;
}

/* Never show bottom nav or tracking bottom nav when unauthenticated / on login screen */
body:not(.is-authenticated) #app-bottom-nav,
body.not-authenticated #app-bottom-nav,
#app-bottom-nav.hidden,
body:not(.is-authenticated) #tracking-bottom-nav,
body.not-authenticated #tracking-bottom-nav,
#tracking-bottom-nav.hidden {
  display: none !important;
}

/* Mobile & iPad Floating Navigation Pills (iOS 17 Clean Frosted Glass) */
#app-bottom-nav,
#tracking-bottom-nav {
  position: fixed;
  left: 50% !important;
  bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.7) !important;
  padding: 5px !important;
  height: 68px !important;
  box-sizing: border-box !important;
}

/* Main Navigation Pill: 0.58s luxurious inertia ease for scroll hide & show */
#app-bottom-nav {
  transform: translate3d(-50%, 0, 0) !important;
  transition: transform 0.58s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
  pointer-events: auto;
}

/* Sliding under screen edge on scroll down */
#app-bottom-nav.nav-pill-hidden {
  transform: translate3d(-50%, calc(100% + 4.5rem), 0) !important;
  pointer-events: none !important;
}

/* Tracking Bottom Nav is fixed and stays with tracking sheet */
#tracking-bottom-nav {
  transform: translate3d(-50%, 0, 0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease-out;
  will-change: transform, opacity;
  pointer-events: auto !important;
}

/* ==========================================
   iOS MODAL SHEET CARD ("Mahlzeit erfassen")
   ========================================== */
#view-tracking {
  touch-action: pan-x pan-y;
  overflow: hidden !important;
}

#view-tracking-card {
  height: calc(100dvh - env(safe-area-inset-top, 54px) - 10px) !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 54px) - 10px) !important;
  will-change: transform;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background-color: #efece6 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 -10px 32px -4px rgba(0, 0, 0, 0.15) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

@media (min-width: 640px) {
  #view-tracking-card {
    height: 88vh !important;
    max-height: 88vh !important;
  }
}

.dark #view-tracking-card,
html.dark #view-tracking-card {
  background-color: #1c1d1e !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, 0.8) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#tracking-sheet-top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: rgba(239, 236, 230, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-clip: padding-box;
}

.dark #tracking-sheet-top-bar,
html.dark #tracking-sheet-top-bar {
  background-color: rgba(28, 29, 30, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-clip: padding-box;
}

#tracking-sheet-handle-zone {
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

#tracking-sheet-handle-zone:active {
  cursor: grabbing;
}

#tracking-sheet-content {
  min-height: 0 !important;
  max-height: 100% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ==========================================
   FULLSCREEN VORLAGEN-BIBLIOTHEK MODAL
   ========================================== */
#templates-modal {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

#templates-modal .templates-modal-header {
  padding-top: max(3.5rem, calc(env(safe-area-inset-top, 0px) + 1.25rem)) !important;
}

@media (display-mode: standalone) and (max-width: 1023.98px),
       (display-mode: fullscreen) and (max-width: 1023.98px) {
  #templates-modal .templates-modal-header {
    padding-top: max(4rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
  }
}

html.is-standalone #templates-modal .templates-modal-header {
  padding-top: max(4rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
}

#templates-modal-list {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem)) !important;
}

body.templates-modal-active:has(#templates-modal:not(.hidden)) #tracking-sheet-content {
  overflow: hidden !important;
  touch-action: none !important;
  pointer-events: none !important;
}

body.templates-modal-active:has(#templates-modal:not(.hidden)) {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Fluid, buttery-smooth iOS sheet transitions */
.sheet-transition-spring {
  transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.36s ease-out !important;
  will-change: transform, opacity;
}

.sheet-backdrop-transition {
  transition: opacity 0.32s ease-out !important;
}

/* Background scroll-lock and touch-freeze when any modal/sheet is open */
html.modal-scroll-locked,
body.modal-scroll-locked,
html.tracking-sheet-open,
body.tracking-sheet-open,
html.templates-modal-active,
body.templates-modal-active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}


body.modal-scroll-locked #app-main-layout,
body.tracking-sheet-open #app-main-layout,
body.templates-modal-active #app-main-layout {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.modal-scroll-locked #view-tracking,
body.modal-scroll-locked #legal-compliance-modal,
body.modal-scroll-locked #edit-meal-modal,
body.modal-scroll-locked #templates-modal,
body.modal-scroll-locked #barcode-confirm-modal,
body.modal-scroll-locked #barcode-not-found-modal,
body.modal-scroll-locked #webcam-modal,
body.tracking-sheet-open #view-tracking {
  pointer-events: auto !important;
}

#legal-compliance-modal {
  touch-action: none;
}
#legal-compliance-scroll-body,
#legal-compliance-modal .overflow-y-auto {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.edit-meal-scroll-body {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

#tracking-sheet-content {
  touch-action: pan-y;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(14rem, calc(env(safe-area-inset-bottom, 34px) + 11rem)) !important;
}

#tracking-sheet-backdrop {
  background-color: transparent !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  touch-action: none !important;
}

/* Ensure upper tracking modes tabs, desktop top header and desktop nav tabs are permanently hidden on ALL screen sizes */
#tracking-modes-container,
#desktop-nav-tabs,
#desktop-top-header {
  display: none !important;
}

/* Ensure pill nav items are always visible once splash completes */
html.splash-done #app-bottom-nav,
html.splash-done #tracking-bottom-nav,
html.splash-done .mobile-nav-item,
html.splash-done .tracking-pill-item {
  visibility: visible !important;
}

/* Responsive display utilities: ensure sm:/md:/lg: classes override .hidden on larger screens */
@media (min-width: 640px) {
  .sm\:block { display: block !important; }
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:grid { display: grid !important; }
}
@media (min-width: 768px) {
  .md\:block { display: block !important; }
  .md\:inline { display: inline !important; }
  .md\:flex { display: flex !important; }
  .md\:grid { display: grid !important; }
}
@media (min-width: 1024px) {
  .lg\:block { display: block !important; }
  .lg\:inline { display: inline !important; }
  .lg\:flex { display: flex !important; }
  .lg\:grid { display: grid !important; }
}

/* Solid, opaque red cancel button for tracking view */
.tracking-cancel-btn-solid {
  background-color: #ef4444 !important;
  color: #fbfaf7 !important;
  border: 1px solid #dc2626 !important;
  opacity: 1 !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tracking-cancel-btn-solid:hover {
    background-color: #dc2626 !important;
    color: #fbfaf7 !important;
  }
}
.tracking-cancel-btn-solid:active {
  background-color: #b91c1c !important;
  color: #fbfaf7 !important;
  transform: scale(0.95);
}
.tracking-cancel-btn-solid i,
.tracking-cancel-btn-solid svg {
  color: #fbfaf7 !important;
  stroke: #fbfaf7 !important;
}

/* Animated Sliding Pill Focus Indicator - Perfectly Symmetrical & Vertically Centered */
.nav-pill-indicator,
.tracking-pill-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-color: rgba(255, 118, 104, 0.18);
  border: 1px solid rgba(255, 118, 104, 0.35);
  box-shadow: 0 0 8px 0 rgba(255, 118, 104, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.36s cubic-bezier(0.34, 1.25, 0.64, 1),
              width 0.36s cubic-bezier(0.34, 1.25, 0.64, 1),
              opacity 0.2s ease;
  will-change: transform, width;
}

.mobile-nav-item,
.tracking-pill-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  gap: 3px !important;
  color: #706b64;
  transition: color 0.22s ease, transform 0.15s ease;
  font-size: 0.8rem !important;
  line-height: 1.15 !important;
  font-weight: 600;
  border-radius: 9999px;
  padding: 3px 6px;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav-item:hover,
  .tracking-pill-item:hover {
    color: #262729;
  }
}

.mobile-nav-item:active,
.tracking-pill-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active,
.tracking-pill-item.active {
  color: #D45F53 !important;
  font-weight: 700 !important;
}

.mobile-nav-item.active i,
.mobile-nav-item.active svg,
.tracking-pill-item.active i,
.tracking-pill-item.active svg {
  color: #D45F53 !important;
  stroke: #D45F53 !important;
  transform: scale(1.08);
  transition: transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* View Transition on Swipe Navigation */
@keyframes viewSlideFadeIn {
  0% {
    opacity: 0.35;
    transform: translate3d(var(--view-slide-from, 0px), 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.view-slide-enter {
  animation: viewSlideFadeIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  will-change: transform, opacity;
}

/* Shimmer Loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.02) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}

/* Hide scrollbar for clean UI in horizontal lists */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   DARK MODE STYLING (High Contrast, Crisp Typography & Emerald Accents)
   ========================================================================== */
html.dark {
  --bg-primary: #1c1d1e;
  --bg-secondary: #202123;
  --bg-card: #262729;
  --border-card: #3f4042;
  --text-main: #fbfaf7;
  --text-muted: #aaa7a1;
  color-scheme: dark;
  background-color: #1c1d1e !important;
}

html.dark body {
  background-color: #1c1d1e !important;
  color: #e7e2d9 !important;
}

@media (max-width: 767px) {
  header.mobile-hidden,
  .mobile-hidden {
    display: none !important;
  }
}

/* ==========================================
   HEADER & MAIN DESKTOP NAVIGATION
   ========================================== */
html.dark header {
  background-color: rgba(38, 39, 41, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(49, 50, 52, 0.7) !important;
}

html.dark header nav {
  background-color: rgba(38, 39, 41, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(63, 64, 66, 0.5) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html.dark header nav .tab-btn {
  color: #aaa7a1 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border-radius: 0.75rem !important;
  transition: all 0.18s ease-in-out !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark header nav .tab-btn:hover {
    color: #fbfaf7 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  html.dark header nav .tab-btn:hover i,
  html.dark header nav .tab-btn:hover svg {
    color: #fbfaf7 !important;
    stroke: #fbfaf7 !important;
  }
}

/* High-Contrast Emerald Active Tab */
html.dark header nav .tab-btn.active,
html.dark header nav .tab-btn.active.bg-white,
html.dark header nav .tab-btn.active.text-emerald-700 {
  background-color: #FF7668 !important;
  color: #fbfaf7 !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(255, 118, 104, 0.45) !important;
}

html.dark header nav .tab-btn.active i,
html.dark header nav .tab-btn.active svg {
  color: #fbfaf7 !important;
  stroke: #fbfaf7 !important;
}

/* Header Settings Button */
html.dark header button[title="Einstellungen"] {
  background-color: rgba(33, 34, 36, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(55, 56, 58, 0.6) !important;
  color: #c9c3b8 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark header button[title="Einstellungen"]:hover {
    background-color: rgba(50, 51, 53, 0.85) !important;
    border-color: rgba(82, 83, 85, 0.8) !important;
    color: #fbfaf7 !important;
  }
}

/* Mobile Floating Navigation Pills (iOS 17 Floating Pill Dark Mode - Subtle Clean Glass) */
html.dark #app-bottom-nav,
html.dark #tracking-bottom-nav {
  background-color: rgba(38, 39, 41, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

html.dark .nav-pill-indicator,
html.dark .tracking-pill-indicator {
  background-color: rgba(255, 118, 104, 0.26);
  border: 1px solid rgba(255, 155, 142, 0.40);
  box-shadow: 0 0 10px 0 rgba(255, 118, 104, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

html.dark .mobile-nav-item,
html.dark .tracking-pill-item {
  color: #aaa7a1 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark .mobile-nav-item:hover,
  html.dark .tracking-pill-item:hover {
    color: #efece6 !important;
  }
}

html.dark .mobile-nav-item.active,
html.dark .tracking-pill-item.active {
  color: #FF9B8E !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.dark .mobile-nav-item.active i,
html.dark .mobile-nav-item.active svg,
html.dark .tracking-pill-item.active i,
html.dark .tracking-pill-item.active svg {
  color: #FF9B8E !important;
  stroke: #FF9B8E !important;
  transform: scale(1.08);
}

/* ==========================================
   SUBTABS & SEGMENTED CONTROLS
   ========================================== */
/* 1. Tracking Mode Tabs */
html.dark #tracking-modes-container {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark button[id^="track-tab-"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #aaa7a1 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button[id^="track-tab-"]:hover {
    color: #fbfaf7 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark button[id^="track-tab-"].bg-white,
html.dark button[id^="track-tab-"].active {
  background-color: #FF7668 !important;
  color: #fbfaf7 !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(255, 118, 104, 0.45) !important;
}
html.dark button[id^="track-tab-"].bg-white i,
html.dark button[id^="track-tab-"].bg-white svg,
html.dark button[id^="track-tab-"].active i,
html.dark button[id^="track-tab-"].active svg {
  color: #fbfaf7 !important;
  stroke: #fbfaf7 !important;
}

/* 2. Statistics Time Horizon Selector & Advanced Stats Selector */
html.dark #stat-range-container,
html.dark #adv-stat-range-container {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark button[id^="stat-range-"],
html.dark button[id^="adv-range-"] {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #aaa7a1 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button[id^="stat-range-"]:hover,
  html.dark button[id^="adv-range-"]:hover {
    color: #fbfaf7 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark button[id^="stat-range-"].active,
html.dark button[id^="stat-range-"].bg-white,
html.dark button[id^="adv-range-"].active,
html.dark button[id^="adv-range-"].bg-white {
  background-color: #313234 !important;
  color: #fbfaf7 !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 0 #121314 !important;
}

/* 3. Settings Subtabs Navigation */
html.dark #settings-subtabs-container {
  background-color: #202123 !important;
  border: 1px solid #3f4042 !important;
}
html.dark .settings-subtab-btn {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #aaa7a1 !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark .settings-subtab-btn:hover {
    color: #fbfaf7 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
}
html.dark .settings-subtab-btn.bg-white,
html.dark .settings-subtab-btn.active {
  background-color: #FF7668 !important;
  color: #fbfaf7 !important;
  font-weight: 700 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px rgba(255, 118, 104, 0.4) !important;
}
html.dark .settings-subtab-btn.bg-white i,
html.dark .settings-subtab-btn.bg-white svg,
html.dark .settings-subtab-btn.active i,
html.dark .settings-subtab-btn.active svg {
  color: #fbfaf7 !important;
  stroke: #fbfaf7 !important;
}

/* ==========================================
   DATE SELECTOR BAR
   ========================================== */
/* Footer of the calorie card: no own surface; divider inset like the macro divider above */
.dash-date-foot::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 1.25rem 0.25rem;
  background: #e7e2d9; /* slate-100, same as the macro divider */
}
@media (min-width: 640px) {
  .dash-date-foot::before { margin-left: 2rem; margin-right: 2rem; }
}
html.dark .dash-date-foot::before {
  background: rgba(49, 50, 52, 0.8); /* slate-800/80, same as the macro divider */
}
html.dark #dashboard-date-bar {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.dark #dashboard-date-label {
  color: #fbfaf7 !important;
}
html.dark #dashboard-date-sub {
  color: #aaa7a1 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #dashboard-date-bar button:hover {
    background-color: #313234 !important;
    color: #fbfaf7 !important;
  }
}
html.dark #dashboard-date-bar button.bg-slate-100 {
  background-color: #313234 !important;
  border-color: #444547 !important;
  color: #fbfaf7 !important;
}
#dashboard-date-picker {
  color-scheme: light;
}
html.dark #dashboard-date-picker-wrap {
  background-color: #202123 !important;
  border-color: #3d3e40 !important;
}
html.dark #dashboard-date-picker {
  color: #fbfaf7 !important;
  color-scheme: dark;
}

/* ==========================================
   GLASS PANELS, CARDS & ELEVATION
   ========================================== */
html.dark .glass-panel {
  background: #262729 !important;
  border-color: #3f4042 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark .glass-panel-hover:hover {
    background: #343537 !important;
    border-color: #4b4c4e !important;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.55) !important;
  }
}

/* ==========================================
   TYPOGRAPHY & TEXT CONTRASTS
   ========================================== */
html.dark .text-slate-900,
html.dark .text-slate-800 {
  color: #fbfaf7 !important;
}
html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #c9c3b8 !important;
}
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #aaa7a1 !important;
}

/* Background Defaults */
html.dark .bg-white {
  background-color: #262729 !important;
}
html.dark .bg-slate-50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-50\/70,
html.dark .bg-slate-50\/80 {
  background-color: #262729 !important;
}
html.dark .bg-slate-100,
html.dark .bg-slate-100\/90 {
  background-color: #292a2c !important;
}
html.dark .bg-slate-200,
html.dark .bg-slate-200\/80 {
  background-color: #3f4042 !important;
  color: #e7e2d9 !important;
}

/* Hover overrides for slate backgrounds so light themes never bleed into dark mode */
@media (hover: hover) and (pointer: fine) {
  html.dark .hover\:bg-slate-50\/70:hover,
  html.dark .hover\:bg-slate-50:hover {
    background-color: #343537 !important;
  }
  html.dark .hover\:bg-slate-100:hover {
    background-color: #313234 !important;
  }
  html.dark .hover\:bg-slate-200:hover {
    background-color: #3a3b3d !important;
  }
}

/* Borders */
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-slate-100 {
  border-color: #3f4042 !important;
}

/* ==========================================
   FORM CONTROLS (INPUTS, SELECTS, TEXTAREAS)
   ========================================== */
/* Unified Minimalist Select Dropdowns with SVG Chevron */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1rem 1rem !important;
  padding-right: 2.25rem !important;
  cursor: pointer;
}

input[type="date"],
input[type="time"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-sizing: border-box !important;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  min-height: 1.2em !important;
  text-align: left !important;
}

html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background-color: #202123 !important;
  border-color: #3d3e40 !important;
  color: #fbfaf7 !important;
}
html.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #FF7668 !important;
  box-shadow: 0 0 0 3px rgba(255, 118, 104, 0.25) !important;
  outline: none !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #706b64 !important;
}
html.dark select option {
  background-color: #202123 !important;
  color: #fbfaf7 !important;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
  opacity: 0.75;
}
html.dark input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ==========================================
   LUMINOUS MACRO BARS & HERO OVERVIEW
   ========================================== */
html.dark #hero-remaining-calories {
  color: #fbfaf7 !important;
}
html.dark #hero-remaining-label {
  color: #aaa7a1 !important;
}
html.dark #hero-remaining-label.text-rose-600 {
  color: #fb7185 !important;
}
html.dark #hero-consumed-calories,
html.dark #hero-target-calories {
  color: #fbfaf7 !important;
}

/* Macro Bar Empty Track */
html.dark .w-full.h-2\.5.bg-slate-200\/80,
html.dark .w-full.bg-slate-200\/80 {
  background-color: #333436 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Circular ring */
html.dark .circle-bg {
  stroke: #313234 !important;
}

/* ==========================================
   TINTED FEATURE BOXES & BADGES
   ========================================== */
/* Emerald */
html.dark .bg-emerald-50,
html.dark .bg-emerald-50\/60,
html.dark .bg-emerald-50\/80 {
  background-color: rgba(255, 118, 104, 0.18) !important;
}
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800,
html.dark .text-emerald-900 {
  color: #FF9B8E !important;
}
html.dark .border-emerald-100,
html.dark .border-emerald-200 {
  border-color: rgba(255, 118, 104, 0.35) !important;
}
html.dark .bg-emerald-50 i,
html.dark .bg-emerald-50 svg {
  color: #FF9B8E !important;
  stroke: #FF9B8E !important;
}

/* Sky */
html.dark .bg-sky-50,
html.dark .bg-sky-50\/60 {
  background-color: rgba(14, 165, 233, 0.18) !important;
}
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800 {
  color: #38bdf8 !important;
}
html.dark .border-sky-100,
html.dark .border-sky-200 {
  border-color: rgba(14, 165, 233, 0.35) !important;
}
html.dark .bg-sky-50 i,
html.dark .bg-sky-50 svg {
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
}

/* Amber */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/60 {
  background-color: rgba(245, 158, 11, 0.18) !important;
}
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-amber-950 {
  color: #fbbf24 !important;
}
html.dark .border-amber-100,
html.dark .border-amber-200 {
  border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark .bg-amber-50 i,
html.dark .bg-amber-50 svg {
  color: #fbbf24 !important;
  stroke: #fbbf24 !important;
}

/* Rose */
html.dark .bg-rose-50,
html.dark .bg-rose-50\/50,
html.dark .bg-rose-50\/60 {
  background-color: rgba(244, 63, 94, 0.18) !important;
}
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800 {
  color: #fb7185 !important;
}
html.dark .border-rose-100,
html.dark .border-rose-200 {
  border-color: rgba(244, 63, 94, 0.35) !important;
}
html.dark .bg-rose-50 i,
html.dark .bg-rose-50 svg {
  color: #fb7185 !important;
  stroke: #fb7185 !important;
}

/* Purple */
html.dark .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.18) !important;
}
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-purple-800 {
  color: #AAA7A1 !important;
}
html.dark .border-purple-100,
html.dark .border-purple-200 {
  border-color: rgba(168, 85, 247, 0.35) !important;
}
html.dark .bg-purple-50 i,
html.dark .bg-purple-50 svg {
  color: #AAA7A1 !important;
  stroke: #AAA7A1 !important;
}

/* Indigo */
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.16) !important;
}
html.dark .text-indigo-700 {
  color: #818cf8 !important;
}
html.dark .border-indigo-200 {
  border-color: rgba(99, 102, 241, 0.35) !important;
}

/* Teal */
html.dark .text-teal-700 {
  color: #2dd4bf !important;
}

/* ==========================================
   DIARY MACRO STRIP & MEAL CARDS
   ========================================== */
html.dark .grid.grid-cols-4.bg-slate-50 {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark .grid.grid-cols-4.bg-slate-50 > div {
  background-color: #242527 !important;
  border: 1px solid #37383a !important;
  border-radius: 0.75rem !important;
  padding: 0.35rem 0.25rem !important;
}
html.dark .grid.grid-cols-4.bg-slate-50 > div .text-slate-900 {
  color: #fbfaf7 !important;
}

/* ==========================================
   BUTTONS (PRIMARY & SECONDARY)
   ========================================== */
/* Primary Buttons */
html.dark button.bg-emerald-500,
html.dark button.bg-emerald-600 {
  background: #FF7668 !important;
  color: #fbfaf7 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(255, 118, 104, 0.35) !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button.bg-emerald-500:hover,
  html.dark button.bg-emerald-600:hover {
    background: #D45F53 !important;
  }
}

/* Secondary slate buttons (excluding active tabs) */
html.dark button.bg-slate-100:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]) {
  background-color: #2c2d2f !important;
  border-color: #404143 !important;
  color: #fbfaf7 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark button.bg-slate-100:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]):hover {
    background-color: #3a3b3d !important;
    border-color: #525355 !important;
  }
}

/* White buttons (excluding active tabs) */
html.dark button.bg-white:not(.tab-btn):not(.settings-subtab-btn):not([id^="stat-range-"]):not([id^="track-tab-"]) {
  background-color: #262729 !important;
  border-color: #404143 !important;
  color: #fbfaf7 !important;
}

/* Modals */
html.dark .bg-slate-900\/40 {
  background-color: rgba(0, 0, 0, 0.78) !important;
}

/* Outlier Cards */
html.dark .outlier-card,
html.dark .outlier-card-high,
html.dark .outlier-card-low {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
  border-left-width: 1px !important;
}

/* Toast Notifications: Ultra-smooth, buttery entry & exit */
#toast {
  will-change: transform, opacity;
  transform: translate3d(0, -14px, 0) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.36s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

#toast.toast-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease-out !important;
}

html.dark #toast {
  background-color: #262729 !important;
  color: #fbfaf7 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================
   AI OCR SCANNER BANNER (MANUELL ERFASSEN)
   ========================================== */
html.dark #ocr-scanner-banner {
  background-color: #262729 !important;
  background-image: none !important;
  border-color: #3f4042 !important;
}
html.dark #ocr-scanner-banner .w-10.h-10 {
  background-color: rgba(255, 118, 104, 0.18) !important;
  border-color: rgba(255, 118, 104, 0.35) !important;
  color: #FF9B8E !important;
}
html.dark #ocr-scanner-banner .w-10.h-10 i,
html.dark #ocr-scanner-banner .w-10.h-10 svg {
  color: #FF9B8E !important;
  stroke: #FF9B8E !important;
}
html.dark #ocr-scanner-banner h4 {
  color: #fbfaf7 !important;
}
html.dark #ocr-scanner-banner h4 span {
  background-color: rgba(255, 118, 104, 0.2) !important;
  border-color: rgba(255, 118, 104, 0.4) !important;
  color: #FF9B8E !important;
}
html.dark #ocr-scanner-banner p {
  color: #aaa7a1 !important;
}

/* ==========================================
   KALORIEN- & ABNEHMRECHNER (BMR / TDEE)
   ========================================== */
html.dark #calculator-card-container {
  background-color: #262729 !important;
  background-image: none !important;
  border-color: #3f4042 !important;
}
html.dark #calculator-card-container h4 {
  color: #fbfaf7 !important;
}
html.dark #calculator-card-container span.bg-emerald-100 {
  background-color: rgba(255, 118, 104, 0.2) !important;
  border-color: rgba(255, 118, 104, 0.4) !important;
  color: #FF9B8E !important;
}
html.dark #calculator-card-container p {
  color: #aaa7a1 !important;
}
html.dark #calculator-card-container label {
  color: #c9c3b8 !important;
}

/* Calculator Result Preview Card */
html.dark #calculator-result-card {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark #calculator-result-card .border-b {
  border-color: #3f4042 !important;
}
html.dark #calc-res-diff-badge {
  background-color: rgba(255, 118, 104, 0.2) !important;
  border-color: rgba(255, 118, 104, 0.4) !important;
  color: #FF9B8E !important;
}
html.dark #calc-res-p,
html.dark #calc-res-c,
html.dark #calc-res-f {
  color: #fbfaf7 !important;
}

/* Macro Preview Strip */
html.dark #macro-goals-preview-strip {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
  color: #aaa7a1 !important;
}
html.dark #macro-goals-calc-summary {
  color: #e7e2d9;
}
html.dark #macro-goals-calc-summary .text-emerald-400 {
  color: #FF9B8E !important;
}
html.dark #macro-goals-calc-summary .text-rose-400 {
  color: #fb7185 !important;
}

/* ==========================================
   GEFAHRENZONE (HIGH CONTRAST & READABLE)
   ========================================== */
html.dark #settings-danger-zone-card {
  background-color: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
}
html.dark #settings-danger-zone-card .text-rose-800 {
  color: #fb7185 !important;
}
html.dark #settings-danger-zone-card .text-rose-800 i,
html.dark #settings-danger-zone-card .text-rose-800 svg {
  color: #f43f5e !important;
  stroke: #f43f5e !important;
}
/* Explanatory text in clear, high-contrast light slate (NOT red on red!) */
html.dark #settings-danger-zone-card p,
html.dark #settings-danger-zone-card .text-rose-900\/80 {
  color: #c9c3b8 !important;
}
html.dark #settings-danger-zone-card button {
  background-color: rgba(244, 63, 94, 0.15) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  color: #fb7185 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-danger-zone-card button:hover {
    background-color: #e11d48 !important;
    border-color: #e11d48 !important;
    color: #fbfaf7 !important;
  }
}
html.dark #settings-danger-zone-card button i,
html.dark #settings-danger-zone-card button svg {
  color: #fb7185 !important;
  stroke: #fb7185 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-danger-zone-card button:hover i,
  html.dark #settings-danger-zone-card button:hover svg {
    color: #fbfaf7 !important;
    stroke: #fbfaf7 !important;
  }
}

/* Demo Data Toggle Button in Dark Mode */
html.dark #settings-demo-toggle-btn.bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
}
@media (hover: hover) and (pointer: fine) {
  html.dark #settings-demo-toggle-btn.bg-amber-50:hover {
    background-color: rgba(245, 158, 11, 0.25) !important;
  }
}
html.dark #settings-demo-toggle-btn.bg-amber-50 i,
html.dark #settings-demo-toggle-btn.bg-amber-50 svg {
  color: #fbbf24 !important;
  stroke: #fbbf24 !important;
}
html.dark #settings-demo-active-badge {
  background-color: rgba(255, 118, 104, 0.2) !important;
  border-color: rgba(255, 118, 104, 0.4) !important;
  color: #FF9B8E !important;
}
html.dark #demo-status-explanation {
  color: #aaa7a1 !important;
}

/* Catch-all for any Tailwind light gradients */
html.dark [class*="bg-gradient-to"][class*="from-emerald-50"],
html.dark [class*="bg-gradient-to"][class*="from-teal-50"] {
  background-image: none !important;
  background-color: #262729 !important;
}



/* ==========================================
   KI-ERNÄHRUNGSBERATER (DARK MODE ENHANCEMENTS)
   ========================================== */
html.dark #ai-advisor-card {
  background-color: #262729 !important;
  border-color: #3f4042 !important;
}

/* Header hover */
@media (hover: hover) and (pointer: fine) {
  html.dark #ai-advisor-card > div:first-child:hover,
  html.dark div[onclick="toggleAdvisorCard()"]:hover {
    background-color: #343537 !important;
  }
}

/* Score pill in header */
html.dark #advisor-score-preview-badge {
  background-color: rgba(255, 118, 104, 0.18) !important;
  border-color: rgba(255, 118, 104, 0.35) !important;
  color: #FF9B8E !important;
}

/* Advisor Summary & Score Banner */

html.dark #advisor-score-val {
  color: #FF9B8E !important;
}
html.dark #advisor-score-label {
  color: #fbfaf7 !important;
}
html.dark #advisor-summary-text {
  color: #c9c3b8 !important;
}

/* Strengths Column ("Was läuft schon super?") - Dark sleek container instead of light wash */
html.dark #advisor-collapsible-body .bg-emerald-50\/50 {
  background-color: #202123 !important;
  border-color: rgba(255, 118, 104, 0.28) !important;
}
html.dark #advisor-collapsible-body .bg-emerald-50\/50 h4 {
  color: #FF9B8E !important;
}
html.dark #advisor-collapsible-body .bg-emerald-50\/50 .border-emerald-100 {
  border-color: rgba(255, 118, 104, 0.2) !important;
}
html.dark #advisor-strengths-list > div {
  background-color: #222325 !important;
  border-color: rgba(255, 118, 104, 0.22) !important;
}
html.dark #advisor-strengths-list > div h5 {
  color: #fbfaf7 !important;
}
html.dark #advisor-strengths-list > div p {
  color: #c9c3b8 !important;
}
html.dark #advisor-strengths-list .bg-emerald-100 {
  background-color: rgba(255, 118, 104, 0.25) !important;
  color: #FF9B8E !important;
}

/* Improvements Column ("Optimierungspotenziale & Tipps") - Dark sleek container instead of light wash */
html.dark #advisor-collapsible-body .bg-amber-50\/50 {
  background-color: #1c1820 !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
html.dark #advisor-collapsible-body .bg-amber-50\/50 h4 {
  color: #fbbf24 !important;
}
html.dark #advisor-collapsible-body .bg-amber-50\/50 .border-amber-100 {
  border-color: rgba(245, 158, 11, 0.2) !important;
}
html.dark #advisor-improvements-list > div {
  background-color: #1f1b26 !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}
html.dark #advisor-improvements-list > div h5 {
  color: #fbfaf7 !important;
}
html.dark #advisor-improvements-list > div p {
  color: #c9c3b8 !important;
}
/* Praxistipp box inside improvements */
html.dark #advisor-improvements-list .bg-amber-50\/80 {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fde68a !important;
}
html.dark #advisor-improvements-list .bg-amber-50\/80 strong {
  color: #fbbf24 !important;
}

/* Outdated hint in dark mode: calm grey line */
html.dark #advisor-outdated-alert,
html.dark #advisor-outdated-alert #advisor-outdated-text { background: transparent !important; color: #aaa7a1 !important; }

/* Macro Verdict Grid */
html.dark #advisor-macro-verdict-grid > div {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark #advisor-macro-verdict-grid > div p {
  color: #dad5cc !important;
}

/* Recommended Foods Box */
html.dark #advisor-foods-box {
  background-color: transparent !important;
}

/* ==========================================
   ERWEITERTE STATISTIKEN & FIBER (DARK MODE)
   ========================================== */
@media (hover: hover) and (pointer: fine) {
  html.dark #advanced-stats-card > button:first-child:hover,
  html.dark button[onclick="toggleAdvancedStats()"]:hover {
    background-color: #343537 !important;
  }
}
html.dark #advanced-stats-content .border-b {
  border-color: #3f4042 !important;
}
html.dark #advanced-stats-content .bg-slate-50\/80 {
  background-color: #262729 !important;
  border-color: #3f4042 !important;
}
/* Macro Donut rows */
html.dark #advanced-stats-content .bg-white.p-2\.5 {
  background-color: #212224 !important;
  border-color: #3f4042 !important;
}
html.dark #donut-stat-protein,
html.dark #donut-stat-carbs,
html.dark #donut-stat-fat {
  color: #fbfaf7 !important;
}

/* Fiber Stats Card */
html.dark #fiber-stat-avg {
  color: #2dd4bf !important;
}
html.dark #fiber-stat-status.bg-teal-50 {
  background-color: rgba(45, 212, 191, 0.18) !important;
  border-color: rgba(45, 212, 191, 0.35) !important;
  color: #2dd4bf !important;
}
html.dark #fiber-stat-pct,
html.dark #fiber-stat-days-goal {
  color: #c9c3b8 !important;
}
html.dark #fiber-stat-meta {
  color: #aaa7a1 !important;
}
html.dark #advanced-stats-content .bg-slate-200\/80 {
  background-color: #313234 !important;
}

/* Outlier Card internal main meal box */
html.dark #outliers-container .bg-slate-50 {
  background-color: #202123 !important;
  border-color: #3f4042 !important;
}
html.dark #outliers-container .bg-slate-50 span.font-semibold {
  color: #dad5cc !important;
}

/* ==========================================
   EDIT MEAL FULLSCREEN VIEW (VOLLBILDMODUS & NO HORIZONTAL SCROLL)
   ========================================== */
#edit-meal-modal {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #efece6 !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  touch-action: pan-y !important;
  will-change: transform;
}

#edit-meal-modal.hidden {
  display: none !important;
}

html.dark #edit-meal-modal {
  background-color: #1c1d1e !important;
}

/* Fullscreen Header Safe-Area Insets (Pushes below iOS Status Bar & Blur Zone) */
#edit-meal-modal header,
#edit-meal-fullscreen-header {
  padding-top: max(1.25rem, calc(env(safe-area-inset-top, 0px) + 0.75rem)) !important;
  background-color: #fbfaf7 !important;
  border-bottom: 1px solid #dad5cc !important;
}

html.dark #edit-meal-modal header,
html.dark #edit-meal-fullscreen-header {
  background-color: #262729 !important;
  border-bottom-color: #313234 !important;
}

@media (max-width: 767.98px) {
  #edit-meal-modal header,
  #edit-meal-fullscreen-header {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
  }
}

/* Standalone Web App (PWA on iOS Home Screen): pushes completely clear of native status-bar blur */
@media (display-mode: standalone) and (max-width: 767.98px),
       (display-mode: fullscreen) and (max-width: 767.98px) {
  #edit-meal-modal header,
  #edit-meal-fullscreen-header {
    padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
  }
}

html.is-standalone #edit-meal-modal header,
html.is-standalone #edit-meal-fullscreen-header {
  padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
}

#edit-meal-modal .edit-meal-scroll-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

#edit-meal-modal * {
  box-sizing: border-box !important;
}

#edit-meal-modal input,
#edit-meal-modal select,
#edit-meal-modal textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#edit-meal-modal input.edit-item-weight {
  width: 56px !important;
  max-width: 56px !important;
  min-width: 48px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

#edit-meal-modal input[type="date"],
#edit-meal-modal input[type="time"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  height: 42px !important;
  min-height: 42px !important;
  line-height: normal !important;
  padding: 0.625rem 0.75rem !important;
  border-radius: 0.75rem !important;
  text-align: left !important;
}

#edit-meal-modal input[type="date"]::-webkit-date-and-time-value,
#edit-meal-modal input[type="time"]::-webkit-date-and-time-value {
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  min-height: 1.2em !important;
  text-align: left !important;
}

html.dark #edit-meal-modal input[type="date"],
html.dark #edit-meal-modal input[type="time"] {
  color-scheme: dark !important;
}

html.dark #edit-meal-modal .bg-white {
  background-color: #262729 !important;
}

html.dark #edit-meal-modal .border-slate-200 {
  border-color: #3f4042 !important;
}

html.dark #edit-meal-items-container .item-row {
  background-color: #262729 !important;
  border-color: #313234 !important;
}

html.dark #edit-meal-items-container input {
  background-color: #0a0f1d !important;
  border-color: #3f4042 !important;
  color: #fbfaf7 !important;
}

html.dark #edit-meal-items-container input:focus {
  border-color: #FF7668 !important;
}

html.dark #edit-meal-ai-feedback-banner {
  background-color: rgba(255, 118, 104, 0.15) !important;
  border-color: rgba(255, 118, 104, 0.35) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.dark button[onclick^="openEditMealModal"]:hover {
    background-color: #343537 !important;
    color: #FF9B8E !important;
  }
}

/* ==========================================
   WEBCAM MODAL (DARK MODE)
   ========================================== */
html.dark #webcam-modal {
  background-color: rgba(0, 0, 0, 0.78) !important;
}
html.dark #webcam-modal .glass-panel {
  background: #262729 !important;
  border-color: #3f4042 !important;
}

/* ==========================================
   MINIMALIST INPUT CLEANUP (HIDE DEFAULT SPINNERS)
   ========================================== */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* ===================================================
   iOS & MOBILE NOTCH / SAFE AREA SUPPORT (env(safe-area-inset-*))
   Fixes top content cut off by Dynamic Island / Status Bar
   and bottom content cut off by the Home Indicator Bar
   =================================================== */

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Akzent „Sonnenuntergang“: Verlauf Gold → Orange-Rot nur für Hauptknöpfe (und Ring/Icon/Maskottchen) */
.nn-sunset,
.btn-chunky.bg-emerald-500,
html.dark .btn-chunky.bg-emerald-500 {
  background-image: linear-gradient(135deg, #FF7668 0%, #FF7668 100%) !important;
  background-color: #FF7668 !important;
}
.nn-sunset:hover,
.btn-chunky.bg-emerald-500:hover { filter: brightness(0.97); }

@media (max-width: 1023.98px) {
  /* 1. Main Content Layout: Header is hidden on mobile & iPad, so main must push down below Notch / Dynamic Island and iOS status bar blur */
  main,
  #app-main-content {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 0.4rem)) !important;
    padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.75rem)) !important;
    padding-left: max(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.5rem)) !important;
    padding-right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem)) !important;
  }

  /* 2. Floating Pill Bottom Navigation Bar (iOS 17): Lift above the iOS Home Indicator */
  #app-bottom-nav,
  #tracking-bottom-nav {
    bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem)) !important;
  }

  /* 3. Modals Overlay: Align items to start so flexbox never clips the top header into the notch */
  #settings-modal,
  #webcam-modal {
    padding-top: max(1.25rem, calc(env(safe-area-inset-top, 0px) + 1rem)) !important;
    padding-bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem)) !important;
    padding-left: max(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.5rem)) !important;
    padding-right: max(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.5rem)) !important;
    align-items: flex-start !important;
  }

  /* 4. Modal Cards: Constrain max-height so modal always fits cleanly within safe viewport */
  #settings-modal > div,
  #webcam-modal > div {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2.5rem) !important;
    margin-top: 0 !important;
    margin-bottom: auto !important;
    width: 100% !important;
  }

  /* 5. Toast Notifications: Keep below the Dynamic Island / Notch */
  #toast {
    top: max(1.5rem, calc(env(safe-area-inset-top, 0px) + 1.2rem)) !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

}

#view-auth {
  background-color: var(--bg-primary);
}

@media (max-width: 1023.98px) {
  /* 6. Auth / Login Screen: Safe padding at top and bottom */
  #view-auth {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.4rem)) !important;
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
  }
}

/* Standalone Web App (PWA on iOS Home Screen): iOS applies a native status-bar blur across the top ~50-65px */
@media (display-mode: standalone) and (max-width: 1023.98px),
       (display-mode: fullscreen) and (max-width: 1023.98px) {
  main,
  #app-main-content {
    padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
  }
  #view-auth {
    padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
  }
  #settings-modal,
  #webcam-modal {
    padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
  }
}

html.is-standalone main,
html.is-standalone #app-main-content {
  padding-top: max(2.5rem, calc(env(safe-area-inset-top, 0px) + 1.75rem)) !important;
}
html.is-standalone #view-auth {
  padding-top: max(2.75rem, calc(env(safe-area-inset-top, 0px) + 1.85rem)) !important;
}
html.is-standalone #settings-modal,
html.is-standalone #webcam-modal {
  padding-top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.35rem)) !important;
}

/* ==========================================
   SIMULATED IPHONE SAFE AREA & NOTCH INSETS
   Enables 100% pixel-faithful iPhone testing on desktop
   ========================================== */
html.mock-safe-area {
  --safe-area-top: 54px !important;
  --safe-area-bottom: 34px !important;
}
html.mock-safe-area main,
html.mock-safe-area #app-main-content {
  padding-top: calc(54px + 0.4rem) !important;
  padding-bottom: calc(34px + 4.75rem) !important;
}
html.mock-safe-area.is-standalone main,
html.mock-safe-area.is-standalone #app-main-content {
  padding-top: calc(54px + 1.75rem) !important;
}
html.mock-safe-area #app-bottom-nav,
html.mock-safe-area #tracking-bottom-nav {
  bottom: calc(34px + 0.25rem) !important;
}
html.mock-safe-area #edit-meal-modal header,
html.mock-safe-area #edit-meal-fullscreen-header {
  padding-top: calc(54px + 1.5rem) !important;
}
html.mock-safe-area #toast {
  top: calc(54px + 1.2rem) !important;
}
html.mock-safe-area #view-auth {
  padding-top: calc(54px + 1.85rem) !important;
}
html.mock-safe-area #settings-modal,
html.mock-safe-area #webcam-modal {
  padding-top: calc(54px + 1.35rem) !important;
}
html.mock-safe-area #barcode-confirm-modal {
  padding-bottom: calc(34px + 1rem) !important;
}
html.mock-safe-area #barcode-not-found-modal {
  padding-bottom: calc(34px + 1rem) !important;
}
html.mock-safe-area #templates-modal .templates-modal-header {
  padding-top: calc(54px + 1.5rem) !important;
}
html.mock-safe-area #templates-modal-list {
  padding-bottom: calc(34px + 1.5rem) !important;
}

/* ==========================================
   TODAY MEAL ACCORDION CARDS (NO SHIFTING)
   ========================================== */
.today-meal-card {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  margin: 0 !important;
}

.today-meal-header {
  box-sizing: border-box;
}

.today-meal-header h4 {
  margin: 0 !important;
  padding: 0 !important;
}
/* Closed: one line with "…", so all meal cards have the same height */
.today-meal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.today-meal-card:hover,
.today-meal-card:active,
.today-meal-card:focus {
  box-shadow: none;
}

html.dark .today-meal-card:hover,
html.dark .today-meal-card:active,
html.dark .today-meal-card:focus {
  box-shadow: none;
}

/* ==========================================
   BARCODE SCANNER ANIMATIONS & VIEWPORT
   ========================================== */
@keyframes scanLaser {
  0% {
    top: 10%;
    opacity: 0.4;
  }
  50% {
    top: 86%;
    opacity: 1;
  }
  100% {
    top: 10%;
    opacity: 0.4;
  }
}

.animate-scan-laser {
  animation: scanLaser 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

#barcode-scanner-viewport video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 1.25rem !important;
}

/* ==========================================
   EDIT MEAL: SEAMLESS WEIGHT & NUTRITION INPUTS
   ========================================== */
#edit-meal-total-weight,
#edit-meal-calories,
#edit-meal-protein,
#edit-meal-carbs,
#edit-meal-fat,
#edit-meal-sat-fat,
#edit-meal-unsat-fat,
#edit-meal-fiber {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: right !important;
  display: inline-block !important;
}

#edit-meal-total-weight {
  width: 3.5ch !important;
  max-width: 85px !important;
}

#edit-meal-calories {
  width: 4.2ch !important;
  max-width: 105px !important;
}

#edit-meal-protein,
#edit-meal-carbs,
#edit-meal-fat,
#edit-meal-sat-fat,
#edit-meal-unsat-fat,
#edit-meal-fiber {
  width: 3.2ch !important;
  max-width: 75px !important;
}

#edit-meal-total-weight:focus,
#edit-meal-calories:focus,
#edit-meal-protein:focus,
#edit-meal-carbs:focus,
#edit-meal-fat:focus,
#edit-meal-sat-fat:focus,
#edit-meal-unsat-fat:focus,
#edit-meal-fiber:focus {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.touch-manipulation {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}

/* 1. Date display scoped hover & active to avoid sticky mobile hover */
@media (hover: hover) and (pointer: fine) {
  .dashboard-date-display:hover {
    background-color: rgba(233, 234, 236, 0.7);
  }
  html.dark .dashboard-date-display:hover {
    background-color: rgba(49, 50, 52, 0.5);
  }
}
.dashboard-date-display:active {
  background-color: rgba(218, 213, 204, 0.6);
}
html.dark .dashboard-date-display:active {
  background-color: rgba(63, 64, 66, 0.6);
}

/* 1b. Mobile / Touch: Prevent sticky hover & active highlights on buttons and cards */
@media (hover: none), (pointer: coarse) {
  button,
  [role="button"],
  .dashboard-tracking-btn,
  .dashboard-date-display,
  .today-meal-card,
  .today-meal-card-content,
  .tab-btn,
  .mobile-nav-item,
  a {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }

  /* Completely disable sticky hover transformations on touch devices */
  button:hover,
  [role="button"]:hover,
  .dashboard-tracking-btn:hover,
  .dashboard-tracking-btn.glass-panel-hover:hover,
  .glass-panel-hover:hover,
  .dashboard-date-display:hover,
  .today-meal-card:not(.meal-swipe-slide):hover,
  .today-meal-card-content:hover,
  #dashboard-date-bar button:hover {
    transform: none !important;
  }

  /* Light mode: Keep normal card background on hover/focus */
  .dashboard-tracking-btn:hover,
  .dashboard-tracking-btn.glass-panel-hover:hover,
  .glass-panel-hover:hover {
    background-color: var(--bg-card) !important;
    border-color: var(--border-card) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
  }

  /* Dark mode: Ensure buttons and cards NEVER turn brighter on touch hover */
  html.dark .glass-panel-hover:hover,
  html.dark .dashboard-tracking-btn:hover,
  html.dark .dashboard-tracking-btn.glass-panel-hover:hover {
    background: #262729 !important;
    background-color: #262729 !important;
    border-color: #3f4042 !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
  }

  /* Date Bar arrows on touch: no sticky hover/focus background (only while pressed, see .date-nav-btn:active) */
  #dashboard-date-bar button:hover,
  #dashboard-date-bar button:focus,
  html.dark #dashboard-date-bar button:hover,
  html.dark #dashboard-date-bar button:focus {
    background-color: transparent !important;
    border-color: transparent !important;
  }

  /* Date display: transparent background on hover/focus */
  .dashboard-date-display:hover,
  html.dark .dashboard-date-display:hover,
  .dashboard-date-display:focus,
  html.dark .dashboard-date-display:focus {
    background-color: transparent !important;
  }

  /* Focus outlines/glows never persist as a sticky active highlight on buttons */
  button:focus:not(:focus-visible),
  [role="button"]:focus:not(:focus-visible),
  .dashboard-tracking-btn:focus,
  .dashboard-tracking-btn:focus-visible,
  .dashboard-date-display:focus {
    outline: none !important;
    box-shadow: inherit;
  }
}

/* 2. Tracking Bottom Nav hidden when on-screen keyboard is active */
#tracking-bottom-nav.nav-keyboard-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(-50%, 60px, 0) !important;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out !important;
}

/* 3. Solid bottom bleed for tracking sheet to prevent background peek when keyboard opens */
#view-tracking-card::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 600px;
  background-color: inherit;
  pointer-events: none;
}

/* 4. Filled bookmark icon when meal is already in templates */
svg.lucide-bookmark.fill-current,
.fill-current svg.lucide-bookmark,
[data-lucide="bookmark"].fill-current {
  fill: currentColor !important;
}

/* Macro colors (dashboard, meal list, statistics): clear and friendly, the only colors besides the ring */
.macro-protein-bg { background-color: #6C9ED8; }
.macro-carbs-bg { background-color: #D9AD55; }
.macro-fat-bg { background-color: #DDA080; }
.macro-fatsat-bg { background-color: #B76572; }
.macro-protein-text { color: #386BA7; }
.macro-carbs-text { color: #87651F; }
.macro-fat-text { color: #A16C4E; }
html.dark .macro-protein-bg { background-color: #6C9ED8; }
html.dark .macro-carbs-bg { background-color: #D9AD55; }
html.dark .macro-fat-bg { background-color: #DDA080; }
html.dark .macro-fatsat-bg { background-color: #C67B86; }
html.dark .macro-protein-text { color: #8DB2DF; }
html.dark .macro-carbs-text { color: #E1BF7D; }
html.dark .macro-fat-text { color: #E4B49C; }


/* Playful but calm: rounded system font (SF Pro Rounded on Apple devices) for
   headings and the big numbers. No web font download; other devices fall back. */
:root {
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4,
.font-rounded,
#hero-remaining-calories,
#macro-protein-consumed, #macro-carbs-consumed, #macro-fat-consumed,
#stat-chart-avg-value,
.today-meal-header .font-bold,
#dashboard-date-label,
.dashboard-tracking-btn h4 {
  font-family: var(--font-rounded);
}

/* Chunky, tactile surfaces: thicker bottom edge that presses in on tap (comic feel
   without extra color). */
.chunky {
  border-width: 2px !important;
  border-bottom-width: 4px !important;
  transition: transform 0.08s ease, border-bottom-width 0.08s ease !important;
}
.chunky:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}
.btn-chunky {
  border-bottom: 4px solid rgba(0, 0, 0, 0.22) !important;
  transition: transform 0.08s ease, border-bottom-width 0.08s ease !important;
}
.btn-chunky:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}

/* Design step 2: cookie mood inside the calorie ring */
.hero-keks {
  user-select: none;
  -webkit-user-drag: none;
  animation: keks-bob 3s ease-in-out infinite;
}
.hero-keks.hero-keks-pop {
  animation: keks-pop 0.5s cubic-bezier(.3, 1.6, .5, 1) both, keks-bob 3s ease-in-out 0.5s infinite;
}
@keyframes keks-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(-4deg); }
}
@keyframes keks-pop {
  0% { transform: scale(.4) rotate(-20deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-keks, .hero-keks.hero-keks-pop { animation: none; }
}

/* "Lecker!" moment after saving */
.yum-moment:not(.hidden) .yum-moment-backdrop { animation: yum-fade 0.2s ease both; }
.yum-moment:not(.hidden) .yum-moment-sheet { animation: yum-up 0.32s cubic-bezier(.2, 1.2, .4, 1) both; }
.yum-moment:not(.hidden) .yum-moment-keks { animation: keks-pop 0.6s cubic-bezier(.3, 1.6, .5, 1) 0.1s both; }
.yum-moment.yum-closing .yum-moment-backdrop { animation: yum-fade 0.18s ease reverse both; }
.yum-moment.yum-closing .yum-moment-sheet { animation: yum-down 0.2s ease-in both; }
@keyframes yum-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes yum-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes yum-down { from { transform: translateY(0); } to { transform: translateY(110%); } }
@media (prefers-reduced-motion: reduce) {
  .yum-moment .yum-moment-backdrop, .yum-moment .yum-moment-sheet, .yum-moment .yum-moment-keks { animation: none !important; }
}

/* Cookie speech bubble: white comic bubble with a tail pointing at the cookie */
.keks-bubble {
  position: relative;
  display: block;
  background: #fbfaf7;
  border: 2px solid #dad5cc;
  border-bottom-width: 3px;
  border-radius: 18px;
  transform-origin: left center;
  transition: transform 0.08s ease;
}
.keks-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: inherit;
  border-left: 2px solid #dad5cc;
  border-bottom: 2px solid #dad5cc;
  border-bottom-left-radius: 4px;
  transform: rotate(45deg);
}
.group:active .keks-bubble { transform: scale(0.98); }
html.dark .keks-bubble { background: #313234; border-color: #3f4042; }
html.dark .keks-bubble::before { border-color: #3f4042; }
.keks-bubble.keks-bubble-pop { animation: keks-bubble-pop 0.45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes keks-bubble-pop {
  0% { opacity: 0; transform: scale(0.6) translateX(-10px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}
.hero-keks.hero-keks-talk { animation: keks-talk 0.5s ease both, keks-bob 3s ease-in-out 0.5s infinite; }
@keyframes keks-talk {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-8deg) scale(1.06); }
  60% { transform: rotate(5deg) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .keks-bubble.keks-bubble-pop, .hero-keks.hero-keks-talk { animation: none; }
}

/* Date arrows: highlight only while pressed on touch screens (iOS keeps :hover after a tap) */
#dashboard-date-bar .date-nav-btn:active { background-color: #e7e2d9 !important; color: #262729; }
html.dark #dashboard-date-bar .date-nav-btn:active { background-color: #313234 !important; color: #fbfaf7; }
@media (hover: hover) and (pointer: fine) {
  .date-nav-btn:hover { background-color: #e7e2d9; color: #262729; }
  html.dark .date-nav-btn:hover { background-color: #313234; color: #fbfaf7; }
}

/* Bottom nav: a little slimmer than the original 68 px pill (63 px), slightly closer to the edge, plus a soft fade above it
   so content never ends with a hard edge right at the pill (works on every iPhone). */
/* The "Mahlzeit erfassen" pill uses exactly the same size and position, so nothing jumps when switching. */
#app-bottom-nav,
#tracking-bottom-nav {
  height: 63px !important;
  bottom: max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) !important;
}
#app-bottom-nav .mobile-nav-item, #tracking-bottom-nav .tracking-pill-item { gap: 2px !important; }
#app-bottom-nav .mobile-nav-item svg, #app-bottom-nav .mobile-nav-item i,
#tracking-bottom-nav .tracking-pill-item svg, #tracking-bottom-nav .tracking-pill-item i { width: 22px !important; height: 22px !important; }
#app-bottom-nav .mobile-nav-item span, #tracking-bottom-nav .tracking-pill-item span { font-size: 12px !important; }
html.mock-safe-area #app-bottom-nav, html.mock-safe-area #tracking-bottom-nav { bottom: calc(34px + 0.35rem) !important; }
html.mock-safe-area #bottom-nav-fade { height: calc(34px + 0.35rem + var(--nomnom-nav-height, 75px) + 3rem); }

#bottom-nav-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) + var(--nomnom-nav-height, 75px) + 3rem);
  z-index: 39;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(239, 236, 230, 0) 0%, rgba(239, 236, 230, 0.85) 45%, #efece6 75%);
  transition: opacity 0.4s ease;
}
html.dark #bottom-nav-fade {
  background: linear-gradient(to bottom, rgba(28, 29, 30, 0) 0%, rgba(28, 29, 30, 0.85) 45%, #1c1d1e 75%);
}
/* Fade only where the pill is visible */
body:not(.is-authenticated) #bottom-nav-fade,
body.not-authenticated #bottom-nav-fade,
#app-bottom-nav.hidden ~ #bottom-nav-fade { display: none; }
#app-bottom-nav.nav-pill-hidden ~ #bottom-nav-fade { opacity: 0; }
/* Keep the main pill and its fade at their screen position while native
   UIRefreshControl changes the visible viewport. No hiding or bottom transition. */
#app-bottom-nav {
  bottom: calc(max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) + var(--nav-refresh-inset, 0px)) !important;
}
#bottom-nav-fade { bottom: var(--nav-refresh-inset, 0px); }
/* The native app refreshes its UIScrollView; the PWA keeps the original layers.
   One fixed parent keeps the fade, lower background and pill in the same frame. */
#app-bottom-nav-layer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--nav-refresh-inset, 0px);
  height: calc(max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) + var(--nomnom-nav-height, 75px) + 3rem);
  z-index: 40;
  pointer-events: none;
  transform: translateZ(0);
}
#app-bottom-nav-layer #app-bottom-nav {
  position: absolute;
  bottom: max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) !important;
}
#app-bottom-nav-layer #bottom-nav-fade {
  position: absolute;
  bottom: 0;
  height: 100%;
}

/* "Mahlzeit erfassen": the same fade inside the sheet, under the tracking pill */
#tracking-nav-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.35rem)) + var(--nomnom-nav-height, 75px) + 3rem);
  z-index: 25;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(239, 236, 230, 0) 0%, rgba(239, 236, 230, 0.85) 45%, #efece6 75%);
  transition: opacity 0.22s ease;
}
html.dark #tracking-nav-fade {
  background: linear-gradient(to bottom, rgba(28, 29, 30, 0) 0%, rgba(28, 29, 30, 0.85) 45%, #1c1d1e 75%);
}
html.mock-safe-area #tracking-nav-fade { height: calc(34px + 0.35rem + var(--nomnom-nav-height, 75px) + 3rem); }
/* Only while the pill is shown (not with the keyboard open or when the pill is hidden) */
body:has(#tracking-bottom-nav.hidden) #tracking-nav-fade,
body:has(#tracking-bottom-nav.nav-keyboard-hidden) #tracking-nav-fade { opacity: 0; }

/* Own dashboard calendar: opens upward above the date bar (which sits under the calorie card) with a small tail */
.dash-cal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  margin: 0 auto;
  max-width: 360px;
  background: #fbfaf7;
  border: 2px solid #dad5cc;
  border-bottom-width: 4px;
  border-radius: 24px;
  padding: 12px 10px 12px;
  box-shadow: 0 18px 40px -12px rgba(38, 39, 41, 0.25);
  transform-origin: bottom center;
  animation: dash-cal-drop 0.26s cubic-bezier(.2, 1.3, .4, 1) both;
}
.dash-cal::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: inherit;
  border-right: 3px solid #dad5cc;
  border-bottom: 3px solid #dad5cc;
  border-bottom-right-radius: 4px;
  transform: rotate(45deg);
}
html.dark .dash-cal { background: #262729; border-color: #3f4042; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7); }
html.dark .dash-cal::before { border-color: #3f4042; }
/* Flipped: calendar below the date bar, arrow on top */
.dash-cal.is-below { bottom: auto; top: calc(100% + 6px); transform-origin: top center; animation-name: dash-cal-drop-down; }
.dash-cal.is-below::before { bottom: auto; top: -10px; border-right: 0; border-bottom: 0; border-left: 3px solid #dad5cc; border-top: 3px solid #dad5cc; border-bottom-right-radius: 0; border-top-left-radius: 4px; }
html.dark .dash-cal.is-below::before { border-color: #3f4042; }
@keyframes dash-cal-drop-down { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dash-cal-drop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.dash-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; text-align: center; }
.dash-cal-wd { font-size: 11px; font-weight: 600; color: #706b64; padding: 3px 0; }
html.dark .dash-cal-wd { color: #aaa7a1; }
.dash-cal-day {
  position: relative;
  width: 36px; height: 36px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-rounded); font-size: 15px; font-weight: 600;
  color: #262729; background: transparent; border: 0; cursor: pointer;
  transition: transform 0.08s ease;
}
html.dark .dash-cal-day { color: #e7e2d9; }
.dash-cal-day:active { transform: scale(0.9); }
.dash-cal-day.is-future { color: #aaa7a1; opacity: 0.55; }
html.dark .dash-cal-day.is-future { color: #706b64; }
.dash-cal-day.is-today { box-shadow: inset 0 0 0 2px #FF7668; color: #D45F53; }
html.dark .dash-cal-day.is-today { box-shadow: inset 0 0 0 2px #FF9B8E; color: #FF9B8E; }
.dash-cal-day.is-selected { background: #FF7668; color: #fbfaf7 !important; box-shadow: 0 3px 0 #202021; opacity: 1; }
html.dark .dash-cal-day.is-selected { color: #261B21 !important; }
.dash-cal-dot { position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #aaa7a1; }
.dash-cal-day.is-selected .dash-cal-dot { background: currentColor; }
.dash-cal-nav {
  width: 32px; height: 32px; border-radius: 9999px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #e7e2d9; color: #5d5852;
}
html.dark .dash-cal-nav { background: #313234; color: #c9c3b8; }
.dash-cal-nav:active { transform: scale(0.9); }
.dash-cal-today {
  border: 0; cursor: pointer; padding: 8px 18px; border-radius: 9999px;
  font-family: var(--font-rounded); font-weight: 700; font-size: 14px;
  background: #e7e2d9; color: #262729; box-shadow: 0 3px 0 #dad5cc;
}
html.dark .dash-cal-today { background: #313234; color: #e7e2d9; box-shadow: 0 3px 0 #3f4042; }
.dash-cal-today:active { transform: translateY(2px); box-shadow: 0 1px 0 #dad5cc; }
#dashboard-date-display[aria-expanded="true"] .dash-cal-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .dash-cal { animation: none; } }

/* Statistics legend markers (same colors as the ring) */
.stat-leg { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }
.stat-leg-goal { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed #706b64; }
html.dark .stat-leg-goal { border-top-color: #aaa7a1; }
.stat-leg-good { background: linear-gradient(180deg, #35B889, #35B889); }
.stat-leg-okay { background: linear-gradient(180deg, #DDA080, #DDA080); }
.stat-leg-over { background: linear-gradient(180deg, #D95F76, #D95F76); }
.stat-leg-low { background: #c9c3b8; }
html.dark .stat-leg-low { background: #3f4042; }
/* Time range segment: neutral active tab with a chunky edge */
#stat-range-container button.active { box-shadow: 0 2px 0 #dad5cc !important; }
html.dark #stat-range-container button.active { box-shadow: 0 2px 0 #121314 !important; }

/* Statistics: overview + list by default; one detail page at a time */
#view-statistics:not([data-detail]) #ai-advisor-card,
#view-statistics:not([data-detail]) #advanced-stats-card,
#view-statistics:not([data-detail]) .stat-detail-only { display: none !important; }
#view-statistics[data-detail] .stat-main-part,
#view-statistics[data-detail] .stat-card-head { display: none !important; }
#view-statistics[data-detail="advisor"] #advanced-stats-card { display: none !important; }
#view-statistics[data-detail="macros"] #ai-advisor-card,
#view-statistics[data-detail="fiber"] #ai-advisor-card,
#view-statistics[data-detail="fats"] #ai-advisor-card { display: none !important; }
#view-statistics[data-detail="macros"] #adv-container-fiber,
#view-statistics[data-detail="macros"] #adv-container-fats,
#view-statistics[data-detail="fiber"] #adv-container-macros,
#view-statistics[data-detail="fiber"] #adv-container-fats,
#view-statistics[data-detail="fats"] #adv-container-macros,
#view-statistics[data-detail="fats"] #adv-container-fiber { display: none !important; }
#view-statistics[data-detail="sugar"] #ai-advisor-card,
#view-statistics[data-detail="salt"] #ai-advisor-card { display: none !important; }
#view-statistics:not([data-detail="sugar"]) #adv-container-sugar,
#view-statistics:not([data-detail="salt"]) #adv-container-salt { display: none !important; }
#view-statistics[data-detail="sugar"] #adv-container-macros,
#view-statistics[data-detail="sugar"] #adv-container-fiber,
#view-statistics[data-detail="sugar"] #adv-container-fats,
#view-statistics[data-detail="salt"] #adv-container-macros,
#view-statistics[data-detail="salt"] #adv-container-fiber,
#view-statistics[data-detail="salt"] #adv-container-fats { display: none !important; }
/* Unterpunkte in den Zucker-/Salz-Seiten */
.stat-subpoints:empty { display: none; }
.stat-subpoints { display: flex; flex-direction: column; gap: 14px; }
.stat-group-title { display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; font-size: 12px; font-weight: 700; color: #706b64; }
html.dark .stat-group-title { color: #aaa7a1; }
.stat-group-title svg { width: 14px; height: 14px; }
.stat-group-card { border-radius: 14px; background: #fbfaf7; border: 1px solid rgba(218, 213, 204, .8); overflow: hidden; }
html.dark .stat-group-card { background: rgba(38, 39, 41, .9); border-color: #313234; }
.stat-group-card > .stat-subpoint + .stat-subpoint { border-top: 1px solid #e7e2d9; }
html.dark .stat-group-card > .stat-subpoint + .stat-subpoint { border-top-color: #313234; }
.stat-subpoint-label { flex: 1; min-width: 0; }
/* grid/flex children must be allowed to shrink, otherwise long meal names stretch the card */
#advanced-stats-content .grid > *, #adv-container-fiber, #adv-container-fats, #adv-container-sugar, #adv-container-salt, .stat-subpoints, .stat-group-card { min-width: 0; }
.stat-rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; background: #e7e2d9; color: #706b64; flex-shrink: 0; }
html.dark .stat-rank { background: #313234; color: #aaa7a1; }
.stat-subpoint-label.has-rank { display: flex; align-items: center; min-width: 0; }
.stat-subpoint-label.has-rank > .stat-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-subpoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 13px; }
.stat-subpoint-label { color: #5d5852; min-width: 0; }
html.dark .stat-subpoint-label { color: #c9c3b8; }
.stat-subpoint-hint { display: block; font-size: 11px; color: #aaa7a1; margin-top: 1px; }
.stat-subpoint-val { font-weight: 700; color: #262729; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.dark .stat-subpoint-val { color: #e7e2d9; }
.stat-ss-ok { background: #8cc9ad; }
.stat-ss-warn { background: #e2b77a; }
.stat-ss-over { background: #e3837f; }
html.dark .stat-ss-ok { background: #6fae93; }
html.dark .stat-ss-warn { background: #c9a06a; }
html.dark .stat-ss-over { background: #c96f6c; }
#view-statistics[data-detail] #advanced-stats-content,
#view-statistics[data-detail] #advisor-collapsible-body { border-top: 0 !important; padding-top: 1rem !important; }
#view-statistics[data-detail] #advanced-stats-content .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }

/* Statistics detail pages: calm like the dashboard (step 3) */
#view-statistics[data-detail] .uppercase { text-transform: none !important; letter-spacing: normal !important; }
#view-statistics[data-detail] .adv-title { display: none !important; }
#view-statistics[data-detail] #adv-container-macros,
#view-statistics[data-detail] #adv-container-fiber,
#view-statistics[data-detail] #adv-container-fats,
#view-statistics[data-detail] #adv-container-sugar,
#view-statistics[data-detail] #adv-container-salt { background: transparent !important; border: 0 !important; padding: 0 !important; }
#view-statistics[data-detail] #ai-advisor-card,
#view-statistics[data-detail] #advanced-stats-card { border-width: 2px !important; border-bottom-width: 4px !important; }
/* Neutral status pills and numbers */
#view-statistics[data-detail] #fiber-stat-status,
#view-statistics[data-detail] #adv-stat-unsat-status-pill,
#view-statistics[data-detail] #adv-stat-sat-status-pill,
#view-statistics[data-detail] #adv-stat-fat-quality-badge { background: #e7e2d9 !important; color: #5d5852 !important; border-color: transparent !important; }
html.dark #view-statistics[data-detail] #fiber-stat-status,
html.dark #view-statistics[data-detail] #adv-stat-unsat-status-pill,
html.dark #view-statistics[data-detail] #adv-stat-sat-status-pill,
html.dark #view-statistics[data-detail] #adv-stat-fat-quality-badge { background: #313234 !important; color: #c9c3b8 !important; }
#view-statistics[data-detail] #fiber-stat-avg,
#view-statistics[data-detail] #adv-stat-fat-ratio-main,
#view-statistics[data-detail] #advisor-score-val { color: #262729 !important; font-family: var(--font-rounded); font-weight: 700 !important; }
html.dark #view-statistics[data-detail] #fiber-stat-avg,
html.dark #view-statistics[data-detail] #adv-stat-fat-ratio-main,
html.dark #view-statistics[data-detail] #advisor-score-val { color: #fbfaf7 !important; }
#view-statistics[data-detail] #fiber-stat-bar.bg-teal-500 { background-color: #14B8A6 !important; }
/* Kompass texts: collapsed, tap header to read */
/* Kompass: content always visible, no dropdown */
.stat-kompass > p { display: block; }
.stat-kompass-chev { display: none !important; }
.stat-kompass-head { cursor: default !important; pointer-events: none; }
/* Kompass as a neutral card (same look as the sub-point cards), icon badge, sources as a separate footer */
.stat-kompass { background: #fbfaf7 !important; border: 1px solid rgba(218, 213, 204, .8) !important; border-radius: 16px !important; padding: 14px 16px !important; }
html.dark .stat-kompass { background: rgba(38, 39, 41, .9) !important; border-color: #313234 !important; }
.stat-kompass-head { gap: 10px !important; font-size: 13.5px !important; color: #262729 !important; margin-bottom: 4px; }
html.dark .stat-kompass-head { color: #e7e2d9 !important; }
.stat-kompass-head > svg:first-child { box-sizing: content-box; width: 15px !important; height: 15px !important; padding: 6px; border-radius: 10px; background: #e7e2d9; color: #706b64; }
html.dark .stat-kompass-head > svg:first-child { background: #313234; color: #aaa7a1; }
.stat-kompass > p:first-of-type { font-size: 13.5px !important; line-height: 1.55 !important; color: #5d5852 !important; }
html.dark .stat-kompass > p:first-of-type { color: #c9c3b8 !important; }
.stat-kompass > p + p { margin-top: 10px; padding-top: 10px !important; border-top: 1px solid #e7e2d9 !important; font-size: 12.5px !important; line-height: 1.5; color: #706b64 !important; }
html.dark .stat-kompass > p + p { border-top-color: #313234 !important; color: #aaa7a1 !important; }
.stat-kompass > p + p strong { display: block; margin-bottom: 2px; font-size: 11.5px; letter-spacing: .02em; color: #5d5852 !important; }
html.dark .stat-kompass > p + p strong { color: #c9c3b8 !important; }

/* AI coach page (new layout): cards stacked on the page, no outer card */
#view-statistics[data-detail="advisor"] #ai-advisor-card { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
#view-statistics[data-detail="advisor"] #advisor-collapsible-body { padding: 0 !important; gap: 0.75rem !important; }
#advisor-collapsible-body > #advisor-action-bar { order: 5; }
#advisor-collapsible-body > #advisor-outdated-alert { order: 6; }
#advisor-collapsible-body > :last-child { order: 7; }
.coach-ring-bg { stroke: #dad5cc; }
html.dark .coach-ring-bg { stroke: #313234; }
html.dark .coach-card { background: #262729 !important; border-color: #3f4042 !important; }
.coach-focus { background: linear-gradient(180deg, rgba(255, 118, 104,.10), rgba(255, 118, 104,.03)); border-color: #FFC2B7; }
html.dark .coach-focus { background: linear-gradient(180deg, rgba(255, 118, 104,.14), rgba(255, 118, 104,.04)); border-color: #1f5c4a; }
.coach-row > summary::-webkit-details-marker { display: none; }
.coach-row[open] .coach-chev, .coach-more[open] summary { transform: none; }
.coach-row[open] .coach-chev { transform: rotate(180deg); }
.coach-chev { transition: transform .2s ease; }
.coach-chip { font-size: 11.5px; font-weight: 600; border-radius: 9999px; padding: 3px 9px; background: #e7e2d9; white-space: nowrap; }
html.dark .coach-chip { background: #313234; }
.coach-chip-ok { color: #D45F53; } html.dark .coach-chip-ok { color: #FF9B8E; }
.coach-chip-up { color: #A16C4E; } html.dark .coach-chip-up { color: #F58A8A; }
.coach-chip-dn { color: #87651F; } html.dark .coach-chip-dn { color: #D9AD55; }
.coach-food { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 9999px; background: #fbfaf7; border: 2px solid #dad5cc; color: #262729; }
html.dark .coach-food { background: #313234; border-color: #3f4042; color: #e7e2d9; }
#advisor-summary-text.keks-bubble::before { top: 14px; margin-top: 0; }

/* Settings pages in the new style: calm calculator (no uppercase, neutral accents) */
#settings-subpanel-goals .uppercase { text-transform: none !important; letter-spacing: normal !important; }
#settings-subpanel-goals #goals-dropdown-body-calc .text-sky-700,
#settings-subpanel-goals #goals-dropdown-body-calc .text-sky-600 { color: #6C9ED8 !important; }
#settings-subpanel-goals #calc-res-target { color: inherit !important; font-family: var(--font-rounded); font-weight: 700 !important; }
.goal-step { box-shadow: 0 3px 0 #dad5cc; transition: transform .08s ease, box-shadow .08s ease; }
html.dark .goal-step { box-shadow: 0 3px 0 #121314; }
.goal-step:active { transform: translateY(2px); box-shadow: 0 1px 0 #dad5cc; }
.goal-macro:focus-within { box-shadow: inset 0 0 0 2px #FF7668; }
#settings-daily-goal::-webkit-inner-spin-button, .goal-macro input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Settings rows: chevrons grey, slightly tighter stacking */
.settings-row-card [id$="-chevron-name"], .settings-row-card [data-lucide="chevron-down"], .settings-row-card [data-lucide="chevron-right"] { color: #aaa7a1; }
#settings-subpanel-account, #settings-subpanel-export { row-gap: 0.6rem; }
#settings-subpanel-account > * + *, #settings-subpanel-export > * + * { margin-top: 0.6rem !important; }
#settings-subpanel-account .uppercase { text-transform: none !important; letter-spacing: normal !important; }
/* Theme options: selected = green edge */
.theme-opt { transition: transform .08s ease; }
.theme-opt:active { transform: translateY(2px); }
.theme-opt.is-selected, html.dark .theme-opt.is-selected, html.dark #settings-subpanel-design .theme-opt.is-selected { border-color: #FF7668 !important; }
#settings-subpanel-design, #settings-subpanel-language { margin-top: 0.5rem; }

/* Settings 4/4: calmer Pro page (purchase buttons and logic unchanged) */
#settings-subpanel-ai .uppercase { text-transform: none !important; letter-spacing: normal !important; }
#settings-subpanel-ai #pro-status-card { background: #efece6 !important; border: 0 !important; box-shadow: none !important; border-radius: 1.25rem !important; }
html.dark #settings-subpanel-ai #pro-status-card { background: #313234 !important; }
#settings-subpanel-ai #pro-status-header { color: #706b64 !important; font-weight: 600 !important; font-size: 12px !important; }
html.dark #settings-subpanel-ai #pro-status-header { color: #aaa7a1 !important; }
#settings-subpanel-ai #pro-status-title { font-family: var(--font-rounded); font-weight: 700 !important; letter-spacing: -0.01em; }
#settings-subpanel-ai #card-plan-yearly, #settings-subpanel-ai #card-plan-monthly { border-width: 2px !important; border-bottom-width: 4px !important; border-radius: 1.5rem !important; background-image: none !important; box-shadow: none !important; }
#settings-subpanel-ai #badge-yearly-popular { font-weight: 700 !important; font-size: 11px !important; }
#settings-subpanel-ai #price-plan-yearly, #settings-subpanel-ai #price-plan-monthly { font-family: var(--font-rounded); font-weight: 700 !important; }
#settings-subpanel-ai #pro-settings-subtitle.keks-bubble { font-size: 13px; }

/* =========================================================
   SETTINGS DESIGN SYSTEM (same language as dashboard & statistics)
   - cards: chunky edge; inner tiles: soft fill, no border
   - fields: soft tile, no border, green focus ring
   - labels: small and muted; icons grey; no uppercase
   - buttons: chunky (green primary, grey secondary)
   ========================================================= */
#view-settings .uppercase { text-transform: none !important; letter-spacing: normal !important; }

/* Form fields */
#view-settings input[type="text"], #view-settings input[type="email"], #view-settings input[type="password"],
#view-settings input[type="number"], #view-settings select, #view-settings textarea {
  background-color: #e7e2d9 !important; border: 0 !important; border-radius: 1rem !important;
  box-shadow: none !important; color: #262729 !important; font-weight: 600 !important;
}
html.dark #view-settings input[type="text"], html.dark #view-settings input[type="email"], html.dark #view-settings input[type="password"],
html.dark #view-settings input[type="number"], html.dark #view-settings select, html.dark #view-settings textarea {
  background-color: #313234 !important; border: 0 !important; color: #e7e2d9 !important;
}
#view-settings input:focus, #view-settings select:focus, #view-settings textarea:focus,
html.dark #view-settings input:focus, html.dark #view-settings select:focus, html.dark #view-settings textarea:focus {
  box-shadow: inset 0 0 0 2px #FF7668 !important; outline: none !important;
}
#view-settings input::placeholder { color: #aaa7a1 !important; font-weight: 500 !important; }

/* Inline numbers inside goal tiles: no field look at all */
#view-settings input.goal-inline, html.dark #view-settings input.goal-inline {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; color: #262729 !important; font-weight: 700 !important; -moz-appearance: textfield;
}
html.dark #view-settings input.goal-inline { color: #fbfaf7 !important; }
#view-settings input.goal-inline:focus { box-shadow: none !important; }
#view-settings input.goal-inline::-webkit-inner-spin-button, #view-settings input.goal-inline::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.goal-kcal { field-sizing: content; min-width: 3ch; max-width: 6ch; width: 5ch; }
input.goal-gram { field-sizing: content; min-width: 1ch; max-width: 5ch; width: 3.5ch; }
.goal-macro { min-width: 0; }

/* Labels and label icons */
#view-settings label { font-weight: 500 !important; color: #706b64 !important; }
html.dark #view-settings label { color: #aaa7a1 !important; }
#view-settings label i, #view-settings label svg { color: #aaa7a1 !important; }

/* Inner panels: soft tiles instead of boxed cards */
#macro-goals-preview-strip, html.dark #macro-goals-preview-strip { background: transparent !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; }
#calculator-result-card, html.dark #calculator-result-card { background: #efece6 !important; border: 0 !important; border-radius: 1.25rem !important; }
html.dark #calculator-result-card { background: #313234 !important; }
#calculator-result-card .border-b, html.dark #calculator-result-card .border-b { border-color: rgba(170, 167, 161, .18) !important; }
#calculator-result-card .grid > div { background: #fbfaf7 !important; border: 0 !important; border-radius: 1rem !important; }
html.dark #calculator-result-card .grid > div { background: #262729 !important; }
#calc-res-target { font-size: 2rem !important; }
#calc-res-diff-badge, html.dark #calc-res-diff-badge { background: #fbfaf7 !important; border: 0 !important; color: #D45F53 !important; font-weight: 600 !important; }
html.dark #calc-res-diff-badge { background: #262729 !important; color: #FF9B8E !important; }

/* Info boxes inside settings (e.g. export format description) */
#view-settings [id$="-dropdown-body-export"] .rounded-xl.border,
#view-settings [id$="-dropdown-body-import"] .rounded-xl.border { border: 0 !important; background: #efece6 !important; border-radius: 1rem !important; }
html.dark #view-settings [id$="-dropdown-body-export"] .rounded-xl.border,
html.dark #view-settings [id$="-dropdown-body-import"] .rounded-xl.border { background: #313234 !important; }

/* Buttons: chunky everywhere in settings */
#view-settings form button[type="submit"], #view-settings button.bg-emerald-500 {
  border-radius: 1rem !important; font-family: var(--font-rounded); font-weight: 700 !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22) !important; transition: transform .08s ease, box-shadow .08s ease !important;
}
#view-settings form button[type="submit"]:active, #view-settings button.bg-emerald-500:active {
  transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22) !important;
}
#view-settings form button[type="button"].bg-slate-100 { border-radius: 1rem !important; font-family: var(--font-rounded); }

/* Accordion bodies: no extra divider line, consistent spacing */
#view-settings [id*="-dropdown-body-"] { border-top-color: rgba(170, 167, 161, .15) !important; }
/* Pro page: benefits listed once (in the yearly card), monthly card stays short */
#settings-subpanel-ai #card-plan-monthly ul { display: none !important; }
/* Page title spacing on the settings list */
#settings-page-title { margin-bottom: 0.25rem; }
/* Pro page: no card-in-card; status and plans are cards on the page itself */
#settings-subpanel-ai > .glass-panel:first-of-type,
html.dark #settings-subpanel-ai > .glass-panel:first-of-type { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#settings-subpanel-ai #pro-status-card, html.dark #settings-subpanel-ai #pro-status-card { background: #fbfaf7 !important; border: 2px solid #dad5cc !important; border-bottom-width: 4px !important; border-radius: 1.5rem !important; }
html.dark #settings-subpanel-ai #pro-status-card { background: #262729 !important; border-color: #3f4042 !important; }
html.dark #settings-subpanel-ai #card-plan-monthly { background: #262729 !important; }


/* Dashboard "Mahlzeit erfassen": round buttons (Entwurf R1, 05.11.2026) */
.capture-round-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.capture-round-icon {
  width: 62px;
  height: 62px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbfaf7;
  border: 2px solid #dad5cc;
  border-bottom-width: 5px;
  color: #5d5852;
  transition: transform .12s ease, border-bottom-width .12s ease, background-color .15s ease;
}
html.dark .capture-round-icon {
  background: #313234;
  border-color: #3f4042;
  color: #dad5cc;
}
.capture-round-icon svg { width: 24px; height: 24px; }
.capture-round-label {
  font-family: var(--font-rounded);
  font-size: 13px;
  font-weight: 700;
  color: #262729;
  line-height: 1.15;
  text-align: center;
}
html.dark .capture-round-label { color: #e7e2d9; }
.capture-round-btn:active .capture-round-icon {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .capture-round-btn:hover .capture-round-icon { background: #e7e2d9; }
  html.dark .capture-round-btn:hover .capture-round-icon { background: #3f4042; }
}
@media (min-width: 640px) {
  .capture-round-icon { width: 72px; height: 72px; }
  .capture-round-icon svg { width: 28px; height: 28px; }
  .capture-round-label { font-size: 14px; }
}

/* ==========================================================
   ERFASSEN-MENÜ IM NEUEN STIL (Entwurf B + X + M, 05.11.2026)
   ========================================================== */
.tracking-sheet-title { font-family: var(--font-rounded); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
#tracking-cancel-btn { background: #e7e2d9; }
html.dark #tracking-cancel-btn { background: #313234; }

/* Header pill: calm, only when needed */
#tracking-credits-pill.pill-quiet { display: none !important; }
.track-pro-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: #e7e2d9; color: #5d5852; font-family: var(--font-rounded); font-weight: 700; font-size: 12px; cursor: pointer; }
html.dark .track-pro-pill { background: #313234; color: #c9c3b8; }

/* Keks + bubble */
.track-keks { display: flex; align-items: center; gap: 10px; }
.track-keks-img { width: 52px; height: 52px; flex-shrink: 0; }
.track-keks-bubble { flex: 1; min-width: 0; padding: 9px 13px; font-size: 13.5px; line-height: 1.4; color: #3f4042; }
html.dark .track-keks-bubble { color: #dad5cc; }
.track-keks-bubble b { font-family: var(--font-rounded); color: #262729; }
html.dark .track-keks-bubble b { color: #fff; }

/* Photo area */
.track-photo-box { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; padding: 30px 14px 26px; text-align: center; transition: border-color .15s ease; }
html.dark .track-photo-box { background: #262729; border-color: #3f4042; }
.track-photo-box.drag-over, .track-photo-box:hover { border-color: rgba(255, 118, 104, 0.55); }
.track-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.track-photo-title { font-family: var(--font-rounded); font-weight: 800; font-size: 16px; color: #262729; margin-top: 2px; }
html.dark .track-photo-title { color: #e7e2d9; }
.track-photo-sub { font-size: 13px; color: #706b64; }
html.dark .track-photo-sub { color: #aaa7a1; }
.track-link { color: #D45F53; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
html.dark .track-link { color: #FF9B8E; }

.track-round-btn { width: 62px; height: 62px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #e7e2d9; border: 2px solid #dad5cc; border-bottom-width: 5px; color: #5d5852; }
html.dark .track-round-btn { background: #313234; border-color: #3f4042; color: #dad5cc; }
.track-round-btn svg { width: 24px; height: 24px; }
.track-round-btn-green, html.dark .track-round-btn-green { background: #FF7668; border-color: #202021; color: #261B21; }
.track-photo-box:active .track-round-btn { transform: translateY(3px); border-bottom-width: 2px; }

.track-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9999px; background: #e7e2d9; color: #5d5852; font-family: var(--font-rounded); font-weight: 700; font-size: 13px; cursor: pointer; }
html.dark .track-chip { background: #313234; color: #c9c3b8; }

/* Soft fields (settings design system) */
.track-soft-field { display: block; width: 100%; background: #fbfaf7; border: 2px solid transparent; border-radius: 16px; padding: 11px 14px; font-size: 15px; line-height: 1.4; color: #262729; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
html.dark .track-soft-field { background: #313234; color: #e7e2d9; }
.track-soft-field::placeholder { color: #aaa7a1; }
html.dark .track-soft-field::placeholder { color: #706b64; }
.track-soft-field:focus { border-color: #FF7668; box-shadow: 0 0 0 3px rgba(255, 118, 104, 0.18); }
input.track-soft-field { -webkit-appearance: none; appearance: none; min-height: 46px; }
.track-label { display: block; font-size: 12px; font-weight: 600; color: #706b64; margin: 0 0 6px 2px; }
html.dark .track-label { color: #aaa7a1; }

/* Note/text field with round mic button */
.track-note-row { display: flex; align-items: center; gap: 8px; }
.track-note-row-top { align-items: flex-end; }
.track-note-row textarea { flex: 1; min-width: 0; }
#tracking-photo-note-input { min-height: 48px; }

/* Mic buttons (Text, Foto note, result "Mit KI anpassen"): JS swaps Tailwind classes, so the look is pinned here by id.
   The button ALWAYS stays a 48 px circle so the field next to it never moves. */
#mic-toggle-btn, #photo-note-mic-btn, #refine-mic-btn {
  position: relative; flex-shrink: 0; width: 48px !important; height: 48px !important; min-width: 48px; padding: 0 !important; border-radius: 9999px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important;
  background: #e7e2d9 !important; border: 2px solid #dad5cc !important; border-bottom-width: 4px !important;
  color: #5d5852 !important; box-shadow: none !important; opacity: 1 !important; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
html.dark #mic-toggle-btn, html.dark #photo-note-mic-btn, html.dark #refine-mic-btn { background: #313234 !important; border-color: #3f4042 !important; color: #dad5cc !important; }
#refine-mic-btn.is-locked { opacity: .55 !important; }
#mic-toggle-btn > span, #photo-note-mic-btn > span, #refine-mic-btn > span { display: none !important; }
#mic-toggle-btn svg, #photo-note-mic-btn svg, #refine-mic-btn svg { color: inherit !important; stroke: currentColor !important; width: 20px; height: 20px; }
#mic-toggle-btn:active, #photo-note-mic-btn:active, #refine-mic-btn:active { transform: translateY(2px); border-bottom-width: 2px !important; }
/* Spinner while starting / evaluating */
#mic-toggle-btn > svg.animate-spin, #photo-note-mic-btn > svg.animate-spin, #refine-mic-btn > svg.animate-spin,
#mic-toggle-btn > .animate-spin, #photo-note-mic-btn > .animate-spin, #refine-mic-btn > .animate-spin { color: #FF7668 !important; }
/* Recording: same size, soft red with a red stop icon and a calm pulsing ring (light AND dark mode) */
#mic-toggle-btn.mic-recording-active, #photo-note-mic-btn.mic-recording-active, #refine-mic-btn.mic-recording-active,
html.dark #mic-toggle-btn.mic-recording-active, html.dark #photo-note-mic-btn.mic-recording-active, html.dark #refine-mic-btn.mic-recording-active {
  background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.65) !important; color: #ef4444 !important;
}
#mic-toggle-btn.mic-recording-active svg, #photo-note-mic-btn.mic-recording-active svg, #refine-mic-btn.mic-recording-active svg { width: 16px; height: 16px; fill: currentColor; }
#mic-toggle-btn.mic-recording-active::after, #photo-note-mic-btn.mic-recording-active::after, #refine-mic-btn.mic-recording-active::after {
  content: ''; position: absolute; inset: -6px; border-radius: 9999px; border: 2px solid rgba(239, 68, 68, 0.45);
  animation: mic-rec-pulse 1.6s ease-out infinite; pointer-events: none;
}
@keyframes mic-rec-pulse { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #mic-toggle-btn.mic-recording-active::after, #photo-note-mic-btn.mic-recording-active::after, #refine-mic-btn.mic-recording-active::after { animation: none; } }

/* Status line under the field: its space is always reserved, so nothing below jumps when it appears */
.track-voice-status { display: flex !important; visibility: hidden; min-height: 20px; }
.track-voice-status:has(.text-red-500, .text-purple-600, .text-emerald-600) { visibility: visible; }
.voice-rec-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.voice-rec-dot { width: 7px; height: 7px; border-radius: 9999px; background: #ef4444; flex-shrink: 0; animation: voice-rec-blink 1.2s ease-in-out infinite; }
@keyframes voice-rec-blink { 50% { opacity: .25; } }
.voice-rec-time { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.voice-rec-sep { opacity: .5; }

/* Compact "Mahlzeit · Heute, 13:00" row */
.track-meta { margin-top: 2px; }
.track-meta-summary { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 8px 10px; border-radius: 14px; background: none; border: 0; color: #706b64; font-size: 13.5px; cursor: pointer; }
.track-meta-summary > span { font-family: var(--font-rounded); font-weight: 700; color: #262729; }
html.dark .track-meta-summary { color: #aaa7a1; }
html.dark .track-meta-summary > span { color: #e7e2d9; }
.track-meta-chev { transition: transform .2s ease; }
.track-meta-summary.is-open .track-meta-chev { transform: rotate(180deg); }
.track-meta-panel { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; padding: 14px; margin-top: 4px; }
html.dark .track-meta-panel { background: #262729; border-color: #3f4042; }
.track-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.track-cat-chip { font-family: var(--font-rounded); font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 9999px; background: #e7e2d9; color: #5d5852; border: 0; cursor: pointer; }
html.dark .track-cat-chip { background: #313234; color: #c9c3b8; }
.track-cat-chip.is-active, html.dark .track-cat-chip.is-active { background: #FF7668; color: #261B21; box-shadow: 0 3px 0 #202021; }

/* Main green button */
#btn-submit-analyze { font-family: var(--font-rounded); font-size: 16px !important; font-weight: 800 !important; border-radius: 20px !important; box-shadow: none !important; }

/* Beat the global input/textarea rules (they use !important) */
.track-soft-field, html.dark .track-soft-field { border: 2px solid transparent !important; border-radius: 16px !important; box-shadow: none; }
.track-soft-field { background-color: #fbfaf7 !important; color: #262729 !important; }
html.dark .track-soft-field { background-color: #313234 !important; color: #e7e2d9 !important; }
.track-meta-panel .track-soft-field { background-color: #e7e2d9 !important; }
html.dark .track-meta-panel .track-soft-field { background-color: #313234 !important; }
.track-soft-field:focus, html.dark .track-soft-field:focus { border-color: #FF7668 !important; box-shadow: 0 0 0 3px rgba(255, 118, 104, 0.18); }
.track-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.track-cat-chip { padding: 8px 4px; text-align: center; white-space: nowrap; }
html.dark input.track-soft-field, html.dark textarea.track-soft-field, input.track-soft-field, textarea.track-soft-field { border-color: transparent !important; }
html.dark input.track-soft-field:focus, html.dark textarea.track-soft-field:focus, input.track-soft-field:focus, textarea.track-soft-field:focus { border-color: #FF7668 !important; }

/* ---- Ergebnis (Entwurf X) ---- */
.result-x-card { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; padding: 16px; }
html.dark .result-x-card { background: #262729; border-color: #3f4042; }
.result-x-top { display: flex; align-items: center; gap: 14px; }
.result-x-ring { --pct: 0; width: 96px; height: 96px; flex-shrink: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#FF7668 calc(var(--pct) * 1%), #dad5cc 0); }
html.dark .result-x-ring { background: conic-gradient(#FF7668 calc(var(--pct) * 1%), #3f4042 0); }
.result-x-ring-inner { width: 78px; height: 78px; border-radius: 9999px; background: #fbfaf7; display: flex; flex-direction: column; align-items: center; justify-content: center; }
html.dark .result-x-ring-inner { background: #262729; }
.result-x-kcal { font-family: var(--font-rounded); font-size: 24px; font-weight: 800; line-height: 1; color: #262729; }
html.dark .result-x-kcal { color: #efece6; }
.result-x-kcal-unit { font-size: 11px; color: #706b64; margin-top: 2px; }
html.dark .result-x-kcal-unit { color: #aaa7a1; }
.result-x-title { font-family: var(--font-rounded); font-size: 19px; font-weight: 800; line-height: 1.2; color: #262729; }
html.dark .result-x-title { color: #efece6; }
.result-x-desc { font-size: 12.5px; line-height: 1.4; color: #706b64; margin-top: 4px; }
html.dark .result-x-desc { color: #aaa7a1; }
.result-x-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1.5px solid #dad5cc; }
html.dark .result-x-macros { border-top-color: #3f4042; }
.result-x-mlabel { display: block; font-size: 12px; color: #706b64; }
html.dark .result-x-mlabel { color: #aaa7a1; }
.result-x-mval { display: block; font-family: var(--font-rounded); font-size: 17px; font-weight: 800; margin: 2px 0 6px; color: #262729; }
html.dark .result-x-mval { color: #efece6; }
.result-x-bar { height: 6px; border-radius: 9999px; background: #e7e2d9; overflow: hidden; }
html.dark .result-x-bar { background: #313234; }
.result-x-bar i { display: block; height: 100%; border-radius: 9999px; transition: width .4s ease; }
.result-x-extra { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 12.5px; color: #706b64; }
html.dark .result-x-extra { color: #aaa7a1; }
.result-x-extra strong { font-family: var(--font-rounded); color: #262729; }
html.dark .result-x-extra strong { color: #e7e2d9; }
.result-x-section { font-family: var(--font-rounded); font-size: 16px; font-weight: 700; margin: 14px 2px 8px; color: #262729; }
html.dark .result-x-section { color: #e7e2d9; }
.result-x-list { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; overflow: hidden; }
html.dark .result-x-list { background: #262729; border-color: #3f4042; }
.result-x-list:empty { display: none; }
.result-x-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1.5px solid #e7e2d9; }
html.dark .result-x-row { border-top-color: #3f4042; }
.result-x-row:first-child { border-top: 0; }
.result-x-row-name { display: block; font-family: var(--font-rounded); font-weight: 700; font-size: 15px; color: #262729; word-break: break-word; }
html.dark .result-x-row-name { color: #efece6; }
.result-x-row-sub, .result-x-row-macros { display: block; font-size: 12px; color: #706b64; margin-top: 1px; }
html.dark .result-x-row-sub, html.dark .result-x-row-macros { color: #aaa7a1; }
.result-x-row-note { font-size: 11.5px; color: #aaa7a1; margin-top: 2px; line-height: 1.35; }
.result-x-row-kcal { font-family: var(--font-rounded); font-weight: 800; font-size: 15px; white-space: nowrap; color: #262729; }
html.dark .result-x-row-kcal { color: #efece6; }
#result-barcode-portion-card { border-radius: 24px !important; border-width: 2px !important; border-bottom-width: 4px !important; box-shadow: none !important; }
html.dark #result-barcode-portion-card { background: #262729 !important; border-color: #3f4042 !important; }
.result-x-send { width: 48px; height: 48px; flex-shrink: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: #FF7668; color: #261B21; border: 0; box-shadow: 0 3px 0 #202021; cursor: pointer; }
.result-x-send:active { transform: translateY(2px); box-shadow: 0 1px 0 #202021; }
.refine-voice-status { display: flex; align-items: center; gap: 6px; min-height: 26px; font-size: 12px; font-weight: 500; padding: 6px 4px 0; color: #ef4444; }
.refine-voice-status.hidden { display: flex !important; visibility: hidden; }
.refine-voice-status[data-state="processing"] { color: #D45F53; }
html.dark .refine-voice-status[data-state="processing"] { color: #FF9B8E; }
.result-x-save { font-family: var(--font-rounded); font-size: 16px; font-weight: 800; border-radius: 20px !important; }
.result-x-discard { width: 100%; margin-top: 10px; padding: 11px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-rounded); font-weight: 700; font-size: 14px; background: #e7e2d9; color: #5d5852; box-shadow: 0 3px 0 #dad5cc; border: 0; cursor: pointer; }
html.dark .result-x-discard { background: #313234; color: #c9c3b8; box-shadow: 0 3px 0 #3f4042; }
/* Loading card in the same card style */
#analysis-loading-card { border-radius: 24px !important; border-width: 2px !important; border-bottom-width: 4px !important; box-shadow: none !important; }
html.dark #analysis-loading-card { background: #262729 !important; border-color: #3f4042 !important; }
.result-x-send > span { display: none !important; }

/* ---- Manuell (Entwurf M) ---- */
.track-list-card { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; overflow: hidden; }
html.dark .track-list-card { background: #262729; border-color: #3f4042; }
.track-list-card:empty { display: none; }
.track-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1.5px solid #e7e2d9; cursor: pointer; transition: background-color .15s ease; }
html.dark .track-list-row { border-top-color: #3f4042; }
.track-list-row:first-child { border-top: 0; }
.track-list-row-static { cursor: default; }
@media (hover: hover) and (pointer: fine) { .track-list-row:not(.track-list-row-static):hover { background: #efece6; } html.dark .track-list-row:not(.track-list-row-static):hover { background: #343537; } }
.track-list-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: #e7e2d9; color: #706b64; display: flex; align-items: center; justify-content: center; }
html.dark .track-list-icon { background: #313234; color: #aaa7a1; }
.track-list-icon svg { width: 20px; height: 20px; }
.track-list-text { flex: 1; min-width: 0; }
.track-list-text b { display: block; font-family: var(--font-rounded); font-size: 15px; font-weight: 700; color: #262729; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .track-list-text b { color: #efece6; }
.track-list-text small { display: block; font-size: 12px; color: #706b64; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .track-list-text small { color: #aaa7a1; }
.track-list-chev { width: 18px; height: 18px; color: #aaa7a1; flex-shrink: 0; }
html.dark .track-list-chev { color: #5d5852; }
#manual-form-chevron.rotate-180 { transform: rotate(180deg); }
.track-list-form { border-top: 1.5px solid #e7e2d9; }
html.dark .track-list-form { border-top-color: #3f4042; }
.track-add-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 118, 104, 0.14); color: #D45F53; border: 0; cursor: pointer; }
html.dark .track-add-btn { color: #FF9B8E; }
.track-add-btn:active { transform: scale(0.92); }

/* ---- Barcode im neuen Stil ---- */
.barcode-viewfinder { background: #1C1D1E; border: 2px solid #3f4042; border-bottom-width: 4px; border-radius: 24px; }
.barcode-prompt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.barcode-prompt-icon, html.dark .barcode-prompt-icon { background: #313234; border-color: #3f4042; color: #dad5cc; }
.barcode-prompt-title { font-family: var(--font-rounded); font-weight: 800; font-size: 16px; color: #efece6; margin-top: 4px; }
.barcode-prompt-desc { font-size: 13px; line-height: 1.4; color: #aaa7a1; }
.barcode-prompt-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 9999px; background: #FF7668; color: #261B21; font-family: var(--font-rounded); font-weight: 800; font-size: 15px; border: 0; box-shadow: 0 4px 0 #202021; cursor: pointer; }
.barcode-prompt-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #202021; }
.barcode-source { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #aaa7a1; }

/* ---- "Mit KI berechnen" (Entwurf D): grau bis etwas da ist, dann grün ohne Leuchten ---- */
#btn-submit-analyze:not(.is-ready):not([disabled]) { background: #e7e2d9 !important; color: #aaa7a1 !important; border-bottom-color: #dad5cc !important; }
html.dark #btn-submit-analyze:not(.is-ready):not([disabled]) { background: #313234 !important; color: #706b64 !important; border-bottom-color: #3f4042 !important; }
#btn-submit-analyze.is-ready, #btn-submit-analyze[disabled] { background: #FF7668 !important; color: #fbfaf7 !important; border-bottom-color: #202021 !important; box-shadow: none !important; }
#btn-submit-analyze { transition: background-color .25s ease, color .25s ease, transform .08s ease !important; }

/* ---- Aufgeklappte Mahlzeit im Dashboard (Entwurf A, 05.11.2026) ---- */
.meal-a-details { padding: 14px 16px 16px; border-top: 1.5px solid #e7e2d9; display: flex; flex-direction: column; gap: 12px; }
html.dark .meal-a-details { border-top-color: #3f4042; }
.meal-a-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.meal-a-mlabel { display: block; font-size: 12px; color: #706b64; }
html.dark .meal-a-mlabel { color: #aaa7a1; }
.meal-a-mval { display: block; font-family: var(--font-rounded); font-size: 17px; font-weight: 800; margin: 2px 0 6px; color: #262729; }
html.dark .meal-a-mval { color: #efece6; }
.meal-a-bar { height: 6px; border-radius: 9999px; background: #e7e2d9; overflow: hidden; }
html.dark .meal-a-bar { background: #313234; }
.meal-a-bar i { display: block; height: 100%; border-radius: 9999px; }
.meal-a-extra { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #706b64; margin-top: -2px; }
html.dark .meal-a-extra { color: #aaa7a1; }
.meal-a-extra strong { font-family: var(--font-rounded); color: #262729; }
html.dark .meal-a-extra strong { color: #e7e2d9; }
.meal-a-desc { font-size: 13px; line-height: 1.45; color: #706b64; }
html.dark .meal-a-desc { color: #aaa7a1; }
.meal-a-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.meal-a-more { background: none; border: 0; padding: 2px 0 0; font-size: 13px; font-weight: 700; color: #D45F53; cursor: pointer; }
html.dark .meal-a-more { color: #FF9B8E; }
.meal-a-section { font-family: var(--font-rounded); font-size: 15px; font-weight: 700; margin: 2px 2px 8px; color: #262729; }
html.dark .meal-a-section { color: #e7e2d9; }
.meal-a-list { border: 1.5px solid #dad5cc; border-radius: 18px; overflow: hidden; background: #efece6; }
html.dark .meal-a-list { border-color: #3f4042; background: rgba(49, 50, 52, 0.35); }
.meal-a-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1.5px solid #dad5cc; }
html.dark .meal-a-row { border-top-color: #3f4042; }
.meal-a-row:first-child { border-top: 0; }
.meal-a-row-name { display: block; font-family: var(--font-rounded); font-weight: 700; font-size: 14px; color: #262729; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .meal-a-row-name { color: #efece6; }
.meal-a-row-sub { display: block; font-size: 11.5px; color: #706b64; margin-top: 1px; }
html.dark .meal-a-row-sub { color: #aaa7a1; }
.meal-a-row-kcal { font-family: var(--font-rounded); font-weight: 800; font-size: 14px; text-align: right; color: #262729; }
html.dark .meal-a-row-kcal { color: #efece6; }
.meal-a-row-kcal small { display: block; font-size: 10.5px; font-weight: 600; color: #706b64; font-family: -apple-system, system-ui, sans-serif; }
html.dark .meal-a-row-kcal small { color: #aaa7a1; }
.meal-a-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding-top: 4px; }
.meal-a-act { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font-family: var(--font-rounded); font-weight: 700; font-size: 12px; color: #5d5852; cursor: pointer; }
html.dark .meal-a-act { color: #c9c3b8; }
.meal-a-act > span { width: 50px; height: 50px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #e7e2d9; border: 2px solid #dad5cc; border-bottom-width: 4px; color: #5d5852; transition: transform .1s ease; }
html.dark .meal-a-act > span { background: #313234; border-color: #3f4042; color: #dad5cc; }
.meal-a-act > span svg { width: 20px; height: 20px; }
.meal-a-act:active > span { transform: translateY(2px); border-bottom-width: 2px; }
.meal-a-act.is-saved > span { color: #FF7668; }
.meal-a-act.is-delete, .meal-a-act.is-delete > span, html.dark .meal-a-act.is-delete, html.dark .meal-a-act.is-delete > span { color: #E0383E; }

/* ---- Mahlzeit bearbeiten (Entwurf B, 05.11.2026) ---- */
.edit-b-header { background: #efece6; }
html.dark .edit-b-header { background: #1c1d1e; }
@media (min-width: 1024px) { .edit-b-header, .edit-b-footer { border: 2px solid #dad5cc; } .edit-b-header { border-bottom: 0; } .edit-b-footer { border-top: 0; } html.dark .edit-b-header, html.dark .edit-b-footer { border-color: #3f4042; } }
.edit-b-close { width: 36px; height: 36px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #e7e2d9; color: #706b64; border: 0; cursor: pointer; flex-shrink: 0; }
html.dark .edit-b-close { background: #313234; color: #c9c3b8; }
.edit-b-name { font-family: var(--font-rounded); font-weight: 700 !important; font-size: 16px !important; }
.edit-b-card { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; padding: 16px 14px; text-align: center; }
html.dark .edit-b-card { background: #262729; border-color: #3f4042; }
.edit-b-kcal { font-family: var(--font-rounded); font-weight: 800; font-size: 42px; line-height: 1; color: #262729; }
html.dark .edit-b-kcal { color: #efece6; }
.edit-b-kcal small { font-size: 15px; font-weight: 700; color: #706b64; }
html.dark .edit-b-kcal small { color: #aaa7a1; }
.edit-b-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: #706b64; }
html.dark .edit-b-dots { color: #aaa7a1; }
.edit-b-dots i { display: inline-block; width: 7px; height: 7px; border-radius: 9px; margin-right: 5px; vertical-align: middle; }
.edit-b-dots b { font-family: var(--font-rounded); color: #262729; }
html.dark .edit-b-dots b { color: #e7e2d9; }
.edit-b-hr { height: 1.5px; background: #e7e2d9; margin: 14px 0 12px; }
html.dark .edit-b-hr { background: #3f4042; }
.edit-b-q { font-size: 12.5px; font-weight: 600; color: #706b64; margin-bottom: 8px; }
html.dark .edit-b-q { color: #aaa7a1; }
.edit-b-stepper { display: flex; align-items: center; justify-content: center; gap: 16px; }
.edit-b-round { width: 50px; height: 50px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #e7e2d9; border: 2px solid #dad5cc; border-bottom-width: 4px; color: #3f4042; cursor: pointer; touch-action: manipulation; }
html.dark .edit-b-round { background: #313234; border-color: #3f4042; color: #e7e2d9; }
.edit-b-round:active { transform: translateY(2px); border-bottom-width: 2px; }
.edit-b-weight { display: flex; align-items: baseline; justify-content: center; min-width: 110px; }
.edit-b-weight span { font-family: var(--font-rounded); font-weight: 700; font-size: 16px; color: #aaa7a1; margin-left: 4px; }
.edit-b-weight-input, html.dark .edit-b-weight-input { font-family: var(--font-rounded); font-weight: 800; font-size: 32px; text-align: right; background: transparent !important; border: 0 !important; padding: 0 !important; color: #262729 !important; outline: none; box-shadow: none !important; }
html.dark .edit-b-weight-input { color: #efece6 !important; }
.edit-b-portions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.edit-b-portions button { font-family: var(--font-rounded); font-weight: 700; font-size: 14px; padding: 8px 0; border-radius: 9999px; background: #e7e2d9; color: #5d5852; border: 0; cursor: pointer; }
html.dark .edit-b-portions button { background: #313234; color: #c9c3b8; }
.edit-b-portions button.is-active { background: #FF7668; color: #261B21; box-shadow: 0 3px 0 #202021; }
.edit-b-ai { display: flex; flex-direction: column; gap: 8px; }
.edit-b-ai #edit-meal-ai-prompt { min-height: 72px; }
#edit-meal-mic-btn:not(.mic-recording-active) { width: 48px; height: 48px; flex-shrink: 0; border-radius: 9999px !important; display: inline-flex; align-items: center; justify-content: center; background: #e7e2d9 !important; border: 2px solid #dad5cc !important; border-bottom-width: 4px !important; color: #5d5852 !important; box-shadow: none !important; }
html.dark #edit-meal-mic-btn:not(.mic-recording-active) { background: #313234 !important; border-color: #3f4042 !important; color: #dad5cc !important; }
#edit-meal-mic-btn svg { color: inherit !important; stroke: currentColor !important; }
#edit-meal-mic-btn.mic-recording-active { width: 48px !important; height: 48px !important; border-radius: 9999px !important; flex-shrink: 0; }
#btn-trigger-ai-reanalysis { width: 48px !important; height: 48px !important; flex-shrink: 0; border-radius: 9999px !important; display: inline-flex; align-items: center; justify-content: center; background: #FF7668 !important; color: #261B21 !important; border: 0 !important; box-shadow: 0 3px 0 #202021 !important; }
#btn-trigger-ai-reanalysis[disabled] { opacity: .85; }
#edit-meal-apikey-missing-banner { border-radius: 20px !important; }
.edit-b-fold { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; background: none; border: 0; font-family: var(--font-rounded); font-weight: 700; font-size: 14px; color: #706b64; cursor: pointer; }
html.dark .edit-b-fold { color: #aaa7a1; }
.edit-b-fold.is-open .track-meta-chev { transform: rotate(180deg); }
.edit-b-vrow { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1.5px solid #e7e2d9; }
html.dark .edit-b-vrow { border-top-color: #3f4042; }
#edit-meal-values-panel > .edit-b-vrow:first-of-type { border-top: 0; }
.edit-b-vdot { width: 9px; height: 9px; border-radius: 9px; flex-shrink: 0; }
.edit-b-vlabel { flex: 1; font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; color: #262729; }
html.dark .edit-b-vlabel { color: #e7e2d9; }
.edit-b-val { display: flex; align-items: baseline; gap: 3px; padding: 7px 12px; border-radius: 12px; background: #e7e2d9; }
html.dark .edit-b-val { background: #313234; }
.edit-b-val:focus-within { box-shadow: 0 0 0 2px #FF7668; }
.edit-b-val span { font-size: 12.5px; font-weight: 700; color: #aaa7a1; }
.edit-b-val-input, html.dark .edit-b-val-input { font-family: var(--font-rounded); font-weight: 800; font-size: 15px; text-align: right; background: transparent !important; border: 0 !important; padding: 0 !important; color: #262729 !important; outline: none; box-shadow: none !important; -moz-appearance: textfield; }
html.dark .edit-b-val-input { color: #efece6 !important; }
.edit-b-val-input::-webkit-outer-spin-button, .edit-b-val-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.edit-b-footer { background: rgba(239, 236, 230, 0.95); }
html.dark .edit-b-footer { background: rgba(28, 29, 30, 0.95); }
#edit-meal-ai-icon-box, #edit-meal-ai-locked-badge { display: none !important; }
html.dark .edit-b-portions button.is-active, .edit-b-portions button.is-active { background: #FF7668; color: #261B21; box-shadow: 0 3px 0 #202021; }
#edit-meal-ai-container.edit-b-ai, html.dark #edit-meal-ai-container.edit-b-ai { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#edit-meal-ai-container, html.dark #edit-meal-ai-container { display: flex; flex-direction: column; gap: 8px; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#edit-meal-ai-container.hidden { display: none !important; }
#edit-meal-ai-prompt { min-height: 72px; }
#edit-meal-ai-container[hidden] { display: none !important; }
html.dark #edit-meal-modal #edit-meal-ai-container, #edit-meal-modal #edit-meal-ai-container { background: none !important; background-color: transparent !important; border: 0 !important; }

/* ---- Vorlagen-Bibliothek (Entwurf A, 05.11.2026) ---- */
.tpl-shell { background: #efece6; }
html.dark .tpl-shell { background: #1c1d1e; }
.tpl-header { background: #efece6; }
html.dark .tpl-header { background: #1c1d1e; }
.tpl-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 16px; background: #fbfaf7; color: #aaa7a1; }
html.dark .tpl-search { background: #313234; color: #706b64; }
.tpl-search:focus-within { box-shadow: 0 0 0 2px #FF7668; }
.tpl-search-input, html.dark .tpl-search-input { flex: 1; min-width: 0; height: 46px; background: transparent !important; border: 0 !important; outline: none; box-shadow: none !important; padding: 0 !important; font-size: 15px; color: #262729 !important; }
html.dark .tpl-search-input { color: #e7e2d9 !important; }
.tpl-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; border-radius: 14px; background: #edeef0; }
html.dark .tpl-seg { background: #313234; }
.tpl-seg-btn { padding: 7px 0; border-radius: 11px; border: 0; background: transparent; font-family: var(--font-rounded); font-weight: 700; font-size: 13.5px; color: #706b64; cursor: pointer; }
html.dark .tpl-seg-btn { color: #aaa7a1; }
.tpl-seg-btn.is-active { background: #fbfaf7; color: #262729; box-shadow: 0 1px 3px rgba(38, 39, 41, 0.12); }
html.dark .tpl-seg-btn.is-active { background: #3f4042; color: #efece6; box-shadow: none; }
.tpl-list { background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; border-radius: 24px; overflow: hidden; margin-top: 4px; }
html.dark .tpl-list { background: #262729; border-color: #3f4042; }
.tpl-row { position: relative; overflow: hidden; border-top: 1.5px solid #e7e2d9; }
html.dark .tpl-row { border-top-color: #3f4042; }
.tpl-row:first-child { border-top: 0; }
.tpl-del { position: absolute; right: 0; top: 0; bottom: 0; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #E0383E; color: #fff; border: 0; font-family: var(--font-rounded); font-weight: 700; font-size: 12px; cursor: pointer; }
.tpl-slide { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px; background: #fbfaf7; cursor: pointer; transition: transform .22s ease; }
html.dark .tpl-slide { background: #262729; }
.tpl-row.is-open .tpl-slide { transform: translateX(-88px); }
/* Dashboard meals: same swipe-to-delete as the templates */
.meal-swipe { position: relative; border-radius: 1rem; overflow: hidden; }
/* Only vertical scrolling is left to the browser, so horizontal drags always reach the swipe */
.meal-swipe-slide { position: relative; z-index: 1; touch-action: pan-y; will-change: transform; transition: transform .26s cubic-bezier(.25, .8, .25, 1); }
.meal-swipe-del {
  left: auto; width: 0; opacity: 0; border-radius: 1rem; overflow: hidden; white-space: nowrap;
  transition: opacity .12s ease; --reveal: 0;
}
.meal-swipe.is-swiping .meal-swipe-del, .meal-swipe.is-open .meal-swipe-del, .meal-swipe.is-removing .meal-swipe-del { opacity: 1; }
/* Icon and label grow in with the finger */
.meal-swipe-del i, .meal-swipe-del svg, .meal-swipe-del span {
  opacity: var(--reveal); transform: scale(calc(.6 + .4 * var(--reveal)));
  transition: transform .18s cubic-bezier(.22, 1.25, .36, 1);
}
/* Long swipe: button takes over, icon pops */
.meal-swipe.is-armed .meal-swipe-del { background: #e85555; }
.meal-swipe.is-armed .meal-swipe-del i, .meal-swipe.is-armed .meal-swipe-del svg { transform: scale(1.18); }
.tpl-text { flex: 1; min-width: 0; }
.tpl-text b { display: block; font-family: var(--font-rounded); font-weight: 700; font-size: 15px; color: #262729; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.dark .tpl-text b { color: #efece6; }
.tpl-text small { display: block; font-size: 12px; color: #706b64; margin-top: 1px; }
html.dark .tpl-text small { color: #aaa7a1; }
.tpl-kcal { font-family: var(--font-rounded); font-weight: 800; font-size: 15px; text-align: right; color: #262729; }
html.dark .tpl-kcal { color: #efece6; }
.tpl-kcal small { display: block; font-size: 10.5px; font-weight: 600; color: #706b64; font-family: -apple-system, system-ui, sans-serif; }
html.dark .tpl-kcal small { color: #aaa7a1; }
.tpl-trash-desk { display: none; width: 32px; height: 32px; border-radius: 9999px; align-items: center; justify-content: center; background: transparent; border: 0; color: #aaa7a1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tpl-row:hover .tpl-trash-desk { display: inline-flex; } .tpl-trash-desk:hover { color: #E0383E; } }
.tpl-hint { font-size: 11.5px; color: #aaa7a1; text-align: center; margin: 10px 0 0; }
html.dark .tpl-hint { color: #706b64; }
.tpl-empty { text-align: center; padding: 34px 8px 10px; }
.tpl-empty b { display: block; font-family: var(--font-rounded); font-size: 19px; font-weight: 800; color: #262729; margin-top: 8px; }
html.dark .tpl-empty b { color: #efece6; }
.tpl-empty p { font-size: 13.5px; line-height: 1.45; color: #706b64; margin: 6px 0 16px; }
html.dark .tpl-empty p { color: #aaa7a1; }
.tpl-empty-keks { width: 86px; height: 86px; margin: 0 auto; }
.tpl-how { background: #fbfaf7; border: 2px solid #dad5cc; border-radius: 20px; padding: 4px 14px; text-align: left; }
html.dark .tpl-how { background: #262729; border-color: #3f4042; }
.tpl-how div { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; color: #262729; }
html.dark .tpl-how div { color: #dad5cc; }
.tpl-how div + div { border-top: 1.5px solid #e7e2d9; }
html.dark .tpl-how div + div { border-top-color: #3f4042; }
.tpl-how span { width: 24px; height: 24px; flex-shrink: 0; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #e7e2d9; font-family: var(--font-rounded); font-weight: 800; font-size: 12px; }
html.dark .tpl-how span { background: #313234; }
html.dark input.tpl-search-input, input.tpl-search-input { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- Barcode laser: GPU-friendly (transform/opacity only) so it stays smooth while decoding ---- */
#barcode-tab-laser.animate-scan-laser {
  top: 10% !important;
  height: 76% !important;
  background: none !important;
  box-shadow: none !important;
  animation: scanLaserSmooth 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate !important;
  will-change: transform, opacity;
}
#barcode-tab-laser.animate-scan-laser::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #FF9B8E, transparent);
  box-shadow: 0 0 14px #FF7668;
}
@keyframes scanLaserSmooth {
  0%   { transform: translate3d(0, 0, 0); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  #barcode-tab-laser.animate-scan-laser { animation: none !important; transform: translate3d(0, 50%, 0); }
}

/* ---- Foto: live camera in the box, gallery below ---- */
.track-photo-box:has(.photo-live:not(.hidden)) { padding: 8px; }
.photo-live { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 58vh; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; }
.photo-live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
/* Loading layer while the camera starts: soft dark gradient, pulsing camera ring, short label */
.photo-live-loading {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(120% 90% at 50% 40%, #313234 0%, #1C1D1E 70%, #121314 100%);
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.photo-live.is-loading .photo-live-loading { opacity: 1; }
.photo-live.is-ready .photo-live-loading { opacity: 0; }
.photo-live-ring {
  position: relative; width: 74px; height: 74px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08); color: #dad5cc;
}
.photo-live-ring svg { width: 30px; height: 30px; }
.photo-live-ring::before, .photo-live-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 155, 142, 0.55);
  animation: photo-live-pulse 1.6s ease-out infinite;
}
.photo-live-ring::after { animation-delay: .8s; }
@keyframes photo-live-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
.photo-live-label { font-family: var(--font-rounded); font-weight: 600; font-size: 14px; color: #c9c3b8; letter-spacing: .1px; }
/* Shutter appears only once the picture is there */
.photo-live .photo-shutter { z-index: 2; transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1.25, .36, 1); }
.photo-live.is-loading .photo-shutter { opacity: 0; transform: scale(.8); pointer-events: none; }
.cam-loading { z-index: 15; border-radius: inherit; }
.cam-loading.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .photo-live-ring::before, .photo-live-ring::after { animation: none; } }
.photo-shutter { position: absolute; left: 50%; bottom: 16px; width: 70px; height: 70px; margin-left: -35px; border-radius: 9999px; border: 4px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.photo-shutter span { width: 54px; height: 54px; border-radius: 9999px; background: #fbfaf7; transition: transform .1s ease; }
.photo-shutter:active span { transform: scale(0.88); }
.photo-gallery-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 9999px; background: #fbfaf7; border: 2px solid #dad5cc; border-bottom-width: 4px; font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; color: #3f4042; cursor: pointer; }
html.dark .photo-gallery-btn { background: #313234; border-color: #3f4042; color: #dad5cc; }
.photo-gallery-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.track-photo-box.photo-flash::after { content: ''; position: absolute; inset: 0; background: #fff; border-radius: inherit; animation: photo-flash .35s ease-out forwards; pointer-events: none; }
@keyframes photo-flash { from { opacity: 0.85; } to { opacity: 0; } }
.photo-live { aspect-ratio: 4 / 5; max-height: 50vh; }

/* ---- „Selbst eingeben“ (Entwurf A, 100 g vorgewählt) ---- */
.track-list-card > .edit-b-vrow:first-child { border-top: 0; }
.manual-values-for { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #706b64; margin-left: 4px; }
html.dark .manual-values-for { color: #aaa7a1; }
.manual-values-hint { font-size: 12px; line-height: 1.4; color: #706b64; margin: -2px 2px 8px; }
html.dark .manual-values-hint { color: #aaa7a1; }
.manual-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #fbfaf7; border: 2px solid #dad5cc; cursor: pointer; user-select: none; font-family: var(--font-rounded); font-weight: 700; font-size: 14.5px; color: #262729; }
html.dark .manual-switch-row { background: #262729; border-color: #3f4042; color: #e7e2d9; }
.manual-switch-row > span:first-child { flex: 1; min-width: 0; }
.manual-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.manual-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; border-radius: 9999px; background: #c9c3b8; transition: background-color .2s ease; }
html.dark .manual-switch { background: #3f4042; }
.manual-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.manual-switch-input:checked + .manual-switch, html.dark .manual-switch-input:checked + .manual-switch { background: #FF7668; }
.manual-switch-input:checked + .manual-switch::after { transform: translateX(20px); }
.manual-switch-input:disabled + .manual-switch { opacity: .5; }
.manual-template-only { width: 100%; margin-top: 10px; padding: 8px; background: none; border: 0; font-family: var(--font-rounded); font-weight: 700; font-size: 14px; color: #706b64; cursor: pointer; }
html.dark .manual-template-only { color: #aaa7a1; }
#manual-form-content.track-list-form { padding-top: 14px; }
#manual-gram-chips button { font-size: 13px; }
#manual-form-content .edit-b-val-input { width: 64px !important; min-width: 0; }
#manual-form-content .edit-b-val { flex-shrink: 0; }
#manual-form-content .edit-b-weight-input { width: 96px !important; text-align: center; }
#manual-form-content .edit-b-vlabel { min-width: 0; }
html.dark input.edit-b-val-input, html.dark input.edit-b-weight-input, input.edit-b-val-input, input.edit-b-weight-input { background: transparent !important; background-color: transparent !important; border: 0 !important; box-shadow: none !important; }
html.dark input.track-soft-field, html.dark textarea.track-soft-field { background-color: #313234 !important; }
input.track-soft-field, textarea.track-soft-field { background-color: #fbfaf7 !important; }
.track-meta-panel input.track-soft-field { background-color: #e7e2d9 !important; }
html.dark .track-meta-panel input.track-soft-field { background-color: #313234 !important; }

/* Neutral comic navigation: same tactile shape for the main and capture pills. */
:root {
  --nomnom-nav-height: 75px;
  --pill-surface: #fbfaf7;
  --pill-border: #dad5cc;
  --pill-base: #cecfd1;
  --pill-muted: #706b64;
  --pill-selected: #edeef0;
  --pill-selected-border: #d0d1d3;
  --pill-selected-base: #c8c9cb;
  --pill-selected-ink: #363739;
}
html.dark {
  --pill-surface: #262729;
  --pill-border: #434446;
  --pill-base: #3f4042;
  --pill-muted: #b0b1b3;
  --pill-selected: #353638;
  --pill-selected-border: #565759;
  --pill-selected-base: #202123;
  --pill-selected-ink: #e7e2d9;
}
html #app-bottom-nav, html #tracking-bottom-nav,
html.dark #app-bottom-nav, html.dark #tracking-bottom-nav {
  height: var(--nomnom-nav-height) !important;
  /* Equal gaps to the inner edge; the lower outer border is thicker. */
  padding: 6px !important;
  gap: 5px;
  border: 2px solid var(--pill-border) !important;
  border-bottom: 3px solid var(--pill-base) !important;
  background: var(--pill-surface) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#app-bottom-nav .nav-pill-indicator,
#tracking-bottom-nav .tracking-pill-indicator { display: none !important; }
html #app-bottom-nav .mobile-nav-item,
html #tracking-bottom-nav .tracking-pill-item {
  min-width: 0;
  min-height: 48px;
  padding: 5px 3px !important;
  gap: 4px !important;
  border: 1.5px solid transparent;
  border-radius: 28px;
  font-family: var(--font-rounded);
  font-weight: 500 !important;
  color: var(--pill-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .12s ease, background-color .16s ease, color .16s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
html #app-bottom-nav .mobile-nav-item.active,
html #tracking-bottom-nav .tracking-pill-item.active {
  border-color: var(--pill-selected-border);
  color: var(--pill-selected-ink) !important;
  background: var(--pill-selected) !important;
  box-shadow: 0 1px 0 var(--pill-selected-base) !important;
  transform: none !important;
}
html #app-bottom-nav .mobile-nav-item:active,
html #tracking-bottom-nav .tracking-pill-item:active { transform: translateY(1px) !important; }
html #app-bottom-nav .mobile-nav-item.active:active,
html #tracking-bottom-nav .tracking-pill-item.active:active {
  box-shadow: none !important;
}
html #app-bottom-nav .mobile-nav-item svg,
html #tracking-bottom-nav .tracking-pill-item svg {
  width: 24px !important;
  height: 24px !important;
  color: inherit !important;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
}
html #app-bottom-nav .mobile-nav-item.active svg,
html #tracking-bottom-nav .tracking-pill-item.active svg { stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) {
  html #app-bottom-nav .mobile-nav-item,
  html #tracking-bottom-nav .tracking-pill-item { transition: none; }
}

html #app-bottom-nav .mobile-nav-item span,
html #tracking-bottom-nav .tracking-pill-item span { font-weight: 500 !important; }


/* A single sliding surface keeps the neutral selection soft and centered. */
#app-bottom-nav.pill-slider-ready .nav-pill-indicator,
#tracking-bottom-nav.pill-slider-ready .tracking-pill-indicator {
  display: block !important;
  left: 0;
  border: 1.5px solid var(--pill-selected-border);
  border-radius: 28px;
  background: var(--pill-selected);
  box-shadow: 0 1px 0 var(--pill-selected-base);
  transition: none;
  will-change: transform, width;
}
html #app-bottom-nav.pill-slider-ready .mobile-nav-item.active,
html #tracking-bottom-nav.pill-slider-ready .tracking-pill-item.active {
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
}

/* Pro lock row: one calm line instead of a red alert (photo/text analysis, AI coach, AI adjustment) */
.pro-lock { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 8px; border-radius: 18px; background: #fff8ec; border: 1.5px solid #f5d9a8; }
.pro-lock.hidden { display: none; }
html.dark .pro-lock { background: #231c10; border-color: #5a4520; }
.pro-lock-keks { width: 46px; height: 46px; flex-shrink: 0; }
.pro-lock-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pro-lock-title { font-family: var(--font-rounded); font-weight: 800; font-size: 14px; line-height: 1.25; color: #262729; }
html.dark .pro-lock-title { color: #efece6; }
.pro-lock-desc { font-size: 12.5px; line-height: 1.3; color: #706b64; }
html.dark .pro-lock-desc { color: #aaa7a1; }
.pro-lock-btn { flex-shrink: 0; border: 0; border-radius: 9999px; padding: 9px 14px; background: #FF7668; color: #fff; font-family: var(--font-rounded); font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 0 #AD4C43; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.pro-lock-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #AD4C43; }
.pro-lock-limit .pro-lock-btn { background: #fff; color: #3f4042; box-shadow: 0 3px 0 #e2c48f; }
html.dark .pro-lock-limit .pro-lock-btn { background: #313234; color: #dad5cc; box-shadow: 0 3px 0 #5a4520; }

/* Pro mini paywall (design D): shown where an AI feature needs Pro */
.pro-paywall { position: relative; overflow: hidden; border-radius: 24px; padding: 16px 16px 14px; color: #fff; background: linear-gradient(160deg, #3A3A3C 0%, #262729 100%); box-shadow: 0 8px 20px rgba(58, 58, 60, .3); }
.pro-paywall.hidden { display: none; }
.pro-paywall::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: #fff; opacity: .08; top: -130px; right: -80px; pointer-events: none; }
.pro-paywall-top { display: flex; gap: 12px; align-items: center; position: relative; z-index: 1; }
.pro-paywall-keks { width: 68px; height: 68px; flex-shrink: 0; filter: drop-shadow(0 6px 10px rgba(255, 118, 104, .35)); }
.pro-paywall-badge { display: inline-block; font-family: var(--font-rounded); font-size: 10.5px; font-weight: 900; letter-spacing: .08em; background: #fde68a; color: #78350f; padding: 3px 8px; border-radius: 7px; margin-bottom: 5px; }
.pro-paywall-title { display: block; font-family: var(--font-rounded); font-size: 18px; font-weight: 800; line-height: 1.2; }
.pro-paywall-list { list-style: none; padding: 0; margin: 12px 0; position: relative; z-index: 1; }
.pro-paywall-list li { display: flex; gap: 9px; align-items: center; font-size: 14px; padding: 4px 0; }
.pro-paywall-list li.hl { font-weight: 800; }
.pro-paywall-list .ck { width: 22px; height: 22px; border-radius: 50%; background: rgba(125, 255, 216, .16); display: grid; place-items: center; flex-shrink: 0; }
.pro-paywall-list .ck svg { width: 13px; height: 13px; fill: none; stroke: #35B889; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pro-paywall-btn { position: relative; z-index: 1; display: block; width: 100%; border: 0; border-radius: 16px; padding: 13px; background: linear-gradient(135deg, #FF7668 0%, #FF7668 100%); color: #fff; font-family: var(--font-rounded); font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 #8D3D35; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.pro-paywall-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8D3D35; }
.pro-paywall-fine { position: relative; z-index: 1; display: block; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .7); margin-top: 9px; }


/* Indeterminate while App Store changes are being confirmed. */
#pro-renewal-progress {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--concept-field, #E7E2D9);
}
#pro-renewal-progress > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: #FF7668;
  animation: pro-renewal-loading 1.4s ease-in-out infinite;
}
@keyframes pro-renewal-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  #pro-renewal-progress > span { animation: none; width: 100%; opacity: .65; }
}

/* Subscription status, approved option B: one neutral card and a fine divider. */
#settings-subpanel-ai #pro-status-header {
  color: var(--text-muted); text-transform: none; letter-spacing: 0;
  font-size: 11px; margin-bottom: 12px;
}
#settings-subpanel-ai .pro-status-heading { display: flex; align-items: center; gap: 10px; }
#settings-subpanel-ai #pro-status-title { font-size: 24px; line-height: 1.2; }
#settings-subpanel-ai .pro-status-icon { display: inline-flex; flex: none; color: var(--text-muted); }
#settings-subpanel-ai #pro-status-desc { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
#settings-subpanel-ai .pro-renewal-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border: 0; border-top: 1px solid var(--border-card); border-radius: 0;
  background: transparent; padding: 12px 0 0; margin-top: 16px;
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
#settings-subpanel-ai #pro-renewal-status-detail { font-weight: 650; color: var(--text-main); text-align: right; }
#settings-subpanel-ai #pro-renewal-progress { height: 5px; margin-top: 18px; }
#settings-subpanel-ai .pro-manage-status-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--concept-field); color: var(--text-muted); font-size: 10px; font-weight: 700; vertical-align: middle;
}

#settings-subpanel-ai .pro-session-notice { position: relative; padding: 20px; background: var(--bg-card); border: 2px solid var(--border-card); border-bottom-width: 4px; border-radius: 24px; }
#settings-subpanel-ai .pro-notice-heading { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
#settings-subpanel-ai .pro-notice-heading h3 { font-size: 24px; line-height: 1.2; }
#settings-subpanel-ai #subscription-notice-detail { margin-top: 10px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
#settings-subpanel-ai #subscription-notice-value { color: var(--text-main); font-weight: 650; text-align: right; }
#settings-subpanel-ai #subscription-notice-restore { color: var(--text-main); font-weight: 650; text-align: right; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#settings-subpanel-ai #subscription-notice-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: var(--concept-field); color: var(--text-muted); font-size: 22px; cursor: pointer; }

html #welcome-trial-badge-container, html.dark #welcome-trial-badge-container { background: var(--concept-field) !important; color: var(--text-main) !important; border-color: var(--border-card) !important; box-shadow: none !important; }
html #welcome-trial-badge-container svg, html.dark #welcome-trial-badge-container svg { color: var(--text-muted) !important; }

/* Tagesziel-Knopf: grau, solange die berechneten Werte schon übernommen sind */
html #apply-calculated-goals-btn:disabled { background: #e7e2d9 !important; color: #8f8a82 !important; border-color: #dad5cc !important; box-shadow: none !important; opacity: 1 !important; cursor: default !important; transform: none !important; }
html.dark #apply-calculated-goals-btn:disabled { background: #313234 !important; color: #8f8a82 !important; border-color: #3f4042 !important; }