.inline-proof-toggles {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  margin-bottom: var(--space-sm);
}

#proofTypeToggles input[type="radio"] {
  display: none;
}

/* ===== COOKIE CONSENT ===== */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px 18px;
  display: flex;
  justify-content: center;
  z-index: 15000;
  background: rgba(47, 95, 85, 0.12);
  backdrop-filter: blur(6px);
}

.cookie-consent__card {
  width: 100%;
  max-width: 960px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cookie-consent__text {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.cookie-consent__text p {
  margin: 0 0 8px;
}

.cookie-consent__text p:last-child {
  margin-bottom: 0;
}

.cookie-consent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-consent__actions .btn {
  min-width: 140px;
  flex: 1 1 160px;
}

.cookie-consent__link {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 600;
}

.cookie-consent-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cookie-consent-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.cookie-consent-status-value {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-cream-dark);
  color: var(--color-text);
  font-weight: 600;
}

.cookie-consent-status-value.is-granted {
  background: rgba(76, 175, 80, 0.16);
  color: var(--color-success);
}

.cookie-consent-status-value.is-denied {
  background: rgba(201, 101, 88, 0.16);
  color: var(--color-danger);
}

/* Cookies modal as bottom sheet */
#cookiesModal.modal-overlay {
  align-items: flex-end;
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
}

#cookiesModal .modal-sheet-legal {
  width: 100%;
  max-width: 400px;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  margin-bottom: var(--space-sm);
}

#cookiesModal .legal-content {
  flex: 1;
  overflow: auto;
}

#cookiesModal .cookie-consent-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-cream);
  flex: 0 0 auto;
  padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom));
  overflow: visible;
}

@media (min-width: 720px) {
  .cookie-consent__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .cookie-consent__actions {
    justify-content: flex-end;
  }
}
/* ===== DIZAINO SISTEMA - Smart Sourdough Brand ===== */

:root {
  /* Pagrindinės spalvos - Brand Green */
  --color-primary: #2F5F55;        /* Primary brand green */
  --color-primary-rgb: 47, 95, 85;
  --color-primary-dark: #254A42;   /* Darker - hover/active */
  --color-primary-light: #3D7268;  /* Light - subtle backgrounds */
  
  /* Akcentinės spalvos - Šilti žemės tonai */
  --color-accent: #D6A756;         /* Warm Gold - akcentas */
  --color-accent-light: #E8C9A0;   /* Light Gold */
  --color-accent-dark: #B8956A;    /* Deep Gold */
  
  /* Fonas - Light Cream */
  --color-cream: #F6F1EB;          /* Background light cream */
  --color-cream-light: #FFFFFF;    /* White - kortelių vidus */
  --color-cream-dark: #EEE7DF;     /* Cards neutral - separacija */
  
  --color-bg: #F6F1EB;             /* Pagrindinis fonas */
  --color-card: #FFFFFF;           /* Kortelių fonas - balta */
  --color-surface: #FFFFFF;        /* Surface fonas - balta */
  
  /* Teksto spalvos */
  --color-text: #36443F;           /* Primary text dark green-gray */
  --color-text-primary: #36443F;   /* Alias */
  --color-text-secondary: #7D867F; /* Antrinis pilkas tekstas */
  --color-text-muted: #7D867F;     /* Aprašymai, meta */
  --color-text-tertiary: #7D867F;  /* Light Gray */
  --color-text-light: #7D867F;     /* Light Gray */
  
  /* Kraštinės */
  --color-border: #D9D4CC;         /* Input outline neaktyvus */
  --color-border-light: #EEE7DF;   /* Skyrimo linijos */
  
  /* Semantinės/statuso spalvos */
  --color-success: #4CAF50;        /* Žalia - sėkmė */
  --color-warning: #D6A756;        /* Geltona - perspėjimas */
  --color-danger: #C96558;         /* Raudona - klaida/pavojus */
  --color-danger-light: #FDF2F2;
  --color-info: #4B83C3;           /* Mėlyna - informacija */
  
  /* Tipografija - pagal design system */
  --text-xs: 13px;    /* Meta tekstas */
  --text-sm: 14px;    /* Meta tekstas */
  --text-base: 15px;  /* Body */
  --text-md: 17px;    /* H3 sekcijų pavadinimai */
  --text-lg: 20px;    /* H2 */
  --text-xl: 22px;    /* H2 */
  --text-2xl: 26px;   /* H1 */
  
  /* Ikonų dydžiai */
  --icon-xs: 18px;
  --icon-sm: 22px;
  --icon-md: 28px;
  --icon-lg: 36px;
  --icon-xl: 40px;
  --icon-2xl: 56px;
  
  /* Spacing sistema */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-2xs: 2px;
  --space-3xs: 1px;
  
  /* Kampų užapvalinimas - pagal design system */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;   /* Kortelės */
  --radius-lg: 24px;   /* Mygtukai */
  --radius-xl: 26px;   /* Modalai */
  --radius-full: 9999px;
  
  /* ===== SOFT NEUMORPHISM ŠEŠĖLIAI ===== */
  /* Raised efektas - šviesa iš viršaus kairės, tamsus apačioje dešinėje */
  --neu-light: rgba(255, 255, 255, 0.85);
  --neu-dark: rgba(47, 95, 85, 0.15);
  
  /* Pakeltos kortelės */
  --shadow-neu: -6px -6px 14px var(--neu-light), 6px 6px 14px var(--neu-dark);
  --shadow-neu-sm: -4px -4px 10px var(--neu-light), 4px 4px 10px var(--neu-dark);
  --shadow-neu-lg: -10px -10px 20px var(--neu-light), 10px 10px 24px rgba(47, 95, 85, 0.18);
  
  /* Hover efektas - stipresnis šešėlis */
  --shadow-neu-hover: -8px -8px 18px var(--neu-light), 8px 8px 18px rgba(47, 95, 85, 0.20);
  
  /* Inset efektas - įspaustas (inputams) */
  --shadow-neu-inset: inset 3px 3px 6px rgba(47, 95, 85, 0.12), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
  --shadow-neu-inset-focus: inset 2px 2px 5px rgba(47, 95, 85, 0.15), inset -2px -2px 5px rgba(255, 255, 255, 0.95);
  
  /* Mygtukai - subtilus pakėlimas */
  --shadow-neu-btn: -4px -4px 8px var(--neu-light), 4px 4px 8px var(--neu-dark);
  --shadow-neu-btn-hover: -5px -5px 10px var(--neu-light), 5px 5px 10px rgba(47, 95, 85, 0.18);
  --shadow-neu-btn-active: inset 2px 2px 4px rgba(47, 95, 85, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
  
  /* Floating navigacija */
  --shadow-neu-nav: -6px -6px 16px var(--neu-light), 8px 8px 20px rgba(47, 95, 85, 0.18);
  
  /* Modal šešėlis */
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.18);
  
  /* Legacy šešėliai (compatibility) */
  --shadow-card: var(--shadow-neu);
  --shadow-card-hover: var(--shadow-neu-hover);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: var(--shadow-neu-sm);
  --shadow-md: var(--shadow-neu);
  --shadow-lg: var(--shadow-neu-lg);
  
  /* Inset šešėliai (inputams) */
  --shadow-inset: var(--shadow-neu-inset);
  --shadow-inset-focus: var(--shadow-neu-inset-focus);
  
  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  
  /* iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
}

/* ===== BENDRI NUSTATYMAI ===== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ===== HEADERIS - iOS Style ===== */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--space-lg);
  background: var(--color-primary);
  color: white;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(47, 95, 85, 0.25);
}

.install-pwa-banner {
  position: sticky;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px var(--space-lg);
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  border-bottom: 1px solid #FFD54F;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.install-pwa-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.install-pwa-text {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.install-pwa-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.install-pwa-actions .btn.btn-sm {
  padding-left: 14px;
  padding-right: 14px;
}

.install-pwa-close {
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.install-pwa-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.install-pwa-close:active {
  transform: scale(0.96);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

@media (max-width: 540px) {
  .install-pwa-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .install-pwa-actions {
    justify-content: space-between;
  }
}

.install-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 999px;
  height: 32px;
  padding: 0 12px;
  color: white;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.install-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.install-btn:active {
  transform: scale(0.98);
}

.install-btn.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.install-icon {
  width: 16px;
  height: 16px;
  color: white;
}

.install-label {
  white-space: nowrap;
}

.notification-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
  position: relative;
}

.notification-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.notification-btn:active {
  transform: scale(0.95);
}

.notification-icon {
  width: 22px;
  height: 22px;
  color: white;
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-primary);
}

.language-switcher { position: relative; margin-right: 8px; }

.language-switcher-btn {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 120px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d9d4cc;
  border-radius: 12px;
  background: #fff;
  color: #2F5F55;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.language-switcher-btn:hover {
  border-color: #2F5F55;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.language-switcher-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}

.language-flag { font-size: 18px; }
.language-switcher-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.language-switcher-text .language-code { font-weight: 800; }
.language-switcher-text .language-label { font-size: 11px; color: #5c6b68; font-weight: 600; }
.language-caret { margin-left: auto; color: #5c6b68; width: 12px; height: 12px; }

.language-dropdown {
  position: absolute;
  right: 0;
  top: 46px;
  background: #fff;
  border: 1px solid #d9d4cc;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 6px;
  min-width: 180px;
  z-index: 30;
  display: none;
}
.language-dropdown.open { display: block; }

.language-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  color: #2F5F55;
  cursor: pointer;
}
.language-option .language-name { flex: 1; text-align: left; }
.language-option .language-code { font-size: 12px; color: #5c6b68; }
.language-option .language-check { opacity: 0; color: var(--color-primary); font-weight: 800; }
.language-option:hover { background: #f4f6f5; }
.language-option.active { background: #e8f3f0; }
.language-option.active .language-check { opacity: 1; }

.profile-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}

.profile-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.profile-btn:active {
  transform: scale(0.95);
}

.profile-icon {
  width: 24px;
  height: 24px;
  color: white;
}

.header-nav-buttons {
  display: flex;
  gap: var(--space-xs);
}

.nav-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.nav-btn:active {
  background: rgba(255, 255, 255, 0.35);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-btn-subtle {
  opacity: 0.5;
  font-size: var(--text-md);
}

.nav-btn-subtle:hover {
  opacity: 1;
}

/* Header Session Indicator */
.header-session {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
  max-width: 180px;
  overflow: hidden;
}

.header-session:hover {
  background: rgba(255, 255, 255, 0.3);
}

.header-session-name {
  font-size: 13px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.header-session-timer {
  font-size: 14px;
  font-weight: 700;
  color: white;
  font-variant-numeric: tabular-nums;
  min-width: 45px;
  text-align: right;
}

/* Floating active session pill (mobile/tablet), desktop stays in header */
@media (max-width: 1024px) {
  #headerSessionIndicator {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0)); /* sits above bottom nav */
    z-index: 200; /* above bottom nav */
    background: #fffdf7;
    color: var(--color-primary);
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    border: 1px solid var(--color-primary);
    padding: 10px 12px;
    justify-content: flex-start;
    max-width: 520px;
    margin: 0 auto;
    gap: var(--space-sm);
  }

  #headerSessionIndicator::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    background: #4ade80;
    border-radius: 999px;
    margin-right: 10px;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25);
    animation: pulse-glow 2s ease-in-out infinite;
  }

  #headerSessionIndicator .header-session-name,
  #headerSessionIndicator .header-session-timer {
    color: var(--color-primary);
    max-width: 65%;
  }

  #headerSessionIndicator .header-session-timer {
    margin-left: auto;
    text-align: right;
  }

  .app-header {
    padding-right: var(--space-md);
  }
}

.app-logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header-main-state,
.header-inner-state {
  display: flex;
  align-items: center;
}

.header-inner-state {
  gap: var(--space-sm);
}

.header-back-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.header-back-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.header-back-btn:active {
  background: rgba(255, 255, 255, 0.3);
}

.header-page-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100vw - 140px);
  margin: 0;
}

h1.header-page-title {
  font-size: var(--text-xl);
}

@media (max-width: 400px) {
  .header-page-title {
    max-width: calc(100vw - 120px);
    font-size: var(--text-md);
  }
  
  h1.header-page-title {
    font-size: var(--text-lg);
  }
}

.logo-icon {
  width: 44px;
  height: 44px;
  color: white;
  flex-shrink: 0;
}

.app-title-text {
  display: flex;
  flex-direction: column;
}

.app-title h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: white;
  letter-spacing: -0.02em;
}

.tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.header-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.header-actions .btn {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.header-actions .btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Mobiliam ekranui - headeris */
@media (max-width: 600px) {
  .app-header {
    padding: var(--space-sm) var(--space-md);
  }

  .app-logo {
    justify-content: center;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }

  .app-title h1 {
    font-size: var(--text-lg);
  }

  .tagline {
    font-size: var(--text-xs);
  }

  .header-actions {
    justify-content: center;
    gap: var(--space-xs);
  }

  .header-actions .btn {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ===== PAGRINDINIS KONTENERIS ===== */

.app-main {
  padding: var(--space-md) 0;
}

.columns {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .columns {
    flex-direction: column;
    align-items: stretch;
  }

  .column {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ===== KORTELĖS - iOS Style ===== */

.card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-card);
  border: none;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.card h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.card h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.card h3:first-child {
  margin-top: 0;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.card-header-row h2 {
  margin: 0;
}

.header-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.card hr {
  border: none;
  border-top: 1px solid var(--color-border-light);
  margin: var(--space-lg) 0;
}

/* Card Variants */
.card-inset {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.card-grouped {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card-grouped .card-item {
  background: var(--color-card);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
}

.card-grouped .card-item:last-child {
  border-bottom: none;
}

/* ===== FORMOS - iOS Style ===== */

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  border-radius: 12px;
  border: 1px solid var(--color-border);
  padding: 14px var(--space-md);
  font-size: 16px;
  line-height: 1.4;
  outline: none;
  background: var(--color-bg);
  color: var(--color-text);
  transition: all var(--transition-base);
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--shadow-neu-inset);
  height: 48px;
  box-sizing: border-box;
  width: 100%;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover {
  border-color: #B5B0A8;
  box-shadow: var(--shadow-neu-inset);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-neu-inset-focus), 0 0 0 2px rgba(47, 95, 85, 0.12);
  outline: none;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

textarea {
  resize: vertical;
  min-height: 80px;
  height: auto;
  transition: height 0.15s ease;
  overflow: hidden;
}

/* Select dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.radio-group {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--text-base);
  padding: var(--space-sm) 0;
}

.radio-label input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.radio-label span {
  color: var(--color-text);
}

.checkbox-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.checkbox-inline label {
  margin: 0;
  font-weight: 400;
}

/* iOS Toggle Switch */
input[type="checkbox"].toggle {
  width: 51px;
  height: 31px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-border);
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}

input[type="checkbox"].toggle::before {
  content: '';
  position: absolute;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-fast);
}

input[type="checkbox"].toggle:checked {
  background: var(--color-primary);
}

input[type="checkbox"].toggle:checked::before {
  transform: translateX(20px);
}

/* ===== GRID ===== */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

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

@media (max-width: 600px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ===== MYGTUKAI - iOS Hierarchija ===== */

.btn {
  border-radius: var(--radius-lg);
  border: none;
  font-size: var(--text-md);
  font-weight: 600;
  padding: 14px 28px;
  min-height: 52px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
  white-space: nowrap;
  transition: all var(--transition-base);
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-neu);
}

@media (max-width: 540px) {
  .btn {
    padding: 10px 14px;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
  .btn-sm {
    padding: 8px 12px;
  }
}

.btn:hover {
  box-shadow: var(--shadow-neu-lg);
}

.btn:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-neu-sm);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button - Pagrindinis veiksmas su neumorphism */
.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: -4px -4px 10px rgba(61, 114, 104, 0.4), 4px 4px 10px rgba(37, 74, 66, 0.5);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: -5px -5px 12px rgba(61, 114, 104, 0.5), 5px 5px 12px rgba(37, 74, 66, 0.6);
}

.btn-primary:active {
  background: var(--color-primary-dark);
  box-shadow: inset 2px 2px 5px rgba(37, 74, 66, 0.4), inset -2px -2px 5px rgba(61, 114, 104, 0.3);
}

/* Secondary Button - Antrinis veiksmas */
.btn-secondary {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(47, 95, 85, 0.05);
}

.btn-secondary:active {
  background: rgba(47, 95, 85, 0.1);
}

/* Tertiary/Ghost Button - Tekstinis */
.btn-tertiary,
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.btn-tertiary:hover,
.btn-ghost:hover {
  background: rgba(47, 95, 85, 0.08);
  box-shadow: var(--shadow-neu-sm);
}

/* Danger Button - Pavojingas veiksmas */
.btn-danger {
  background: rgba(217, 115, 115, 0.12);
  color: var(--color-danger);
}

.btn-danger:hover {
  background: rgba(217, 115, 115, 0.2);
}

.btn-danger-filled {
  background: var(--color-danger);
  color: white;
}

.btn-danger-filled:hover {
  background: #C55E5E;
}

/* Subtle Add Button */
.btn-add-subtle {
  background: rgba(47, 95, 85, 0.08);
  color: var(--color-primary);
  border: 1.5px solid rgba(47, 95, 85, 0.25);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.btn-add-subtle:hover {
  border-color: var(--color-primary);
  background: rgba(47, 95, 85, 0.15);
}

/* Size Variants */
.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-base);
  min-height: 40px;
  border-radius: var(--radius-full);
}

.btn-lg {
  padding: 16px 28px;
  font-size: var(--text-lg);
  min-height: 56px;
  border-radius: var(--radius-full);
}

/* Icon-only Button */
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  min-height: 44px;
  border-radius: 50%;
}

.btn-icon-sm {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* Full Width */
.btn-block {
  width: 100%;
}

@media (max-width: 600px) {
  .btn-sm {
    min-height: 44px;
    padding: 10px 16px;
  }
}

.form-actions {
  margin-top: var(--space-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ===== BREADCRUMB ===== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.breadcrumb-link {
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-link:hover {
  background: var(--color-cream-light);
  text-decoration: underline;
}

.breadcrumb-link:active {
  background: var(--color-cream);
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  font-weight: 300;
}

.breadcrumb-current {
  color: var(--color-text-muted);
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .breadcrumb {
    font-size: var(--text-xs);
  }
  
  .breadcrumb-current {
    max-width: 150px;
  }
}

/* ===== TEKSTAS ===== */

.muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.storage-indicator {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-text-light);
  text-align: center;
}

.storage-indicator:empty {
  display: none;
}

.storage-indicator.warning {
  background: #fff3cd;
  color: #856404;
}

.storage-indicator.danger {
  background: #f8d7da;
  color: #721c24;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;
  background: var(--color-cream);
  color: var(--color-primary-dark);
  font-size: var(--text-xs);
  font-weight: 500;
}

.badge-starter {
  background: var(--color-accent-light);
  color: #5A4020;
}

.badge-flour {
  background: var(--color-primary);
  color: white;
}

.badge-inclusion {
  background: #8B5A2B;
  color: white;
}

.badge-liquid {
  background: #4A90A4;
  color: white;
}

/* ===== INGREDIENTŲ EILUTĖS RECEPTE ===== */

.ingredient-rows {
  margin-bottom: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 16px;
}

.preferments-container {
  min-height: 16px;
}

.ingredient-fab {
  position: sticky;
  bottom: 12px;
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0 0;
  z-index: 5;
}

.ingredient-row {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  align-items: center;
}

.ingredient-row .ing-name-input {
  flex: 1;
  min-width: 0;
}

.ingredient-row .ing-amount-input {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
}

.ingredient-row .remove-row-btn {
  flex-shrink: 0;
}

.ingredient-row .ing-pct-display {
  min-width: 52px;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
  padding: 0 4px;
}

.ingredient-row.system-ingredient-row {
  min-height: 48px;
  padding: 0;
  border: none;
  background: transparent;
}

.system-ingredient-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  align-items: center;
  line-height: 1.4;
  padding: 14px var(--space-md);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-inset);
  box-sizing: border-box;
  min-height: 48px;
}

.system-ingredient-title {
  font-weight: 400;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-ingredient-note {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-ingredient-amount {
  width: 80px;
  flex-shrink: 0;
  text-align: right;
  font-size: 16px;
  color: var(--color-text);
  font-weight: 400;
  padding: 14px var(--space-sm);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-inset);
  box-sizing: border-box;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.system-ingredient-spacer {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  visibility: hidden;
}

.ingredient-row .ing-pct-display.flour-pct {
  color: var(--color-primary);
  font-weight: 600;
}

.ingredient-row .ing-pct-display.starter-pct {
  color: var(--color-primary-dark);
  font-weight: 700;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  border-left: 2px solid var(--color-success);
  box-shadow: var(--shadow-neu-sm);
}

.starter-pct-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  box-shadow: var(--shadow-neu-sm);
  flex-shrink: 0;
  border-left: 2px solid var(--color-success);
}

.ing-pct-input {
  width: 70px;
  min-width: 70px;
  padding: 8px 20px 8px 8px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  text-align: right;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-inset);
}

.ing-pct-input:focus {
  outline: none;
  box-shadow: var(--shadow-inset-focus), 0 0 0 2px rgba(47, 95, 85, 0.15);
}

.pct-label {
  font-size: var(--text-xs);
  color: #2e7d32;
  font-weight: 600;
}

.baker-pct-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
  border: 1px solid var(--color-border);
}

.baker-pct-input {
  width: 55px;
  padding: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-align: center;
  background: transparent;
}

.baker-pct-input:focus {
  outline: none;
  background: white;
}

.baker-pct-input:disabled {
  color: var(--color-text-muted);
  background: transparent;
}

.baker-pct-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ===== PARUOŠIAMIEJI MIŠINIAI (PLIKINYS) ===== */

.preferments-section {
  margin-bottom: var(--space-lg);
}

.preferments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.preferments-header h3 {
  margin: 0;
}

.preferments-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.preferment-card {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-neu);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.preferment-card .pref-ing-pct,
.preferment-card .other-pref-pct-row,
.preferment-card .system-ingredient-pct {
  display: none !important;
}

.preferment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.preferment-name-input {
  flex: 1;
  font-size: var(--text-md);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
}

.preferment-remove-btn {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--space-xs);
  line-height: 1;
}

.preferment-ingredients {
  margin-bottom: var(--space-sm);
}

.preferment-type-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
}

.preferment-target-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
}

.preferment-target-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  font-size: var(--text-sm);
}

.preferment-target-select {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
}

.preferment-type-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-size: var(--text-sm);
}

.preferment-type-label input[type="radio"] {
  margin: 0;
  accent-color: var(--color-primary);
}

.type-badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.type-badge.type-levain {
  background: var(--color-bg);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 700;
}

.type-badge.type-other {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-neu-sm);
}

.type-hint {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.levain-pct-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-success);
}

.levain-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #2e7d32;
}

.levain-pct-display {
  font-size: var(--text-md);
  font-weight: 700;
  color: #1b5e20;
}

.other-pref-pct-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  border-radius: var(--radius-sm);
  border-left: 3px solid #9e9e9e;
}

.other-pref-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #616161;
}

.other-pref-pct-display {
  font-size: var(--text-md);
  font-weight: 700;
  color: #424242;
}

.preferment-note-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--color-card);
  resize: vertical;
  min-height: 50px;
}

.preferment-note-input::placeholder {
  color: var(--color-text-light);
}

.preferment-add-ing-btn {
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm);
  margin-top: var(--space-xs);
  align-self: flex-end;
}

.preferment-duration-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
}

/* Ingredient and preferment rows – allow wrapping on narrow screens */
@media (max-width: 640px) {
  .ingredient-row {
    flex-wrap: wrap;
    row-gap: 6px;
    align-items: flex-start;
  }
  .ingredient-row .ing-name-input {
    flex: 1 1 100%;
  }
  .system-ingredient-name {
    flex: 1 1 100%;
  }
  .system-ingredient-title,
  .system-ingredient-note {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .ingredient-row .ing-amount-input,
  .ingredient-row .ing-pct-display,
  .starter-pct-wrapper {
    flex: 1 1 48%;
    min-width: 0;
  }
  .ingredient-row .remove-row-btn {
    margin-left: auto;
  }
  .preferment-type-row,
  .preferment-target-row,
  .preferment-duration-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .ingredient-row .ing-amount-input,
  .ingredient-row .ing-pct-display,
  .starter-pct-wrapper {
    flex: 1 1 100%;
  }
}

.preferment-duration-row label {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin: 0;
}

.duration-adjuster {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.duration-adjuster .adj-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: background 0.15s, transform 0.1s;
}

.duration-adjuster .adj-btn:hover {
  background: #e8f1ea;
}

.duration-adjuster .adj-btn:active {
  background: var(--color-border-light);
  transform: translateY(1px);
}

.duration-adjuster .duration-display {
  min-width: 96px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: #f7faf7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.duration-input-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.duration-input {
  width: 64px;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  background: #f7faf7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  appearance: textfield;
}

.duration-input.duration-hours {
  width: 56px;
}

.duration-input.duration-minutes {
  width: 72px;
}

.duration-input::-webkit-outer-spin-button,
.duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.duration-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Total ingredients summary */
.total-ingredients-section {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.total-ingredients-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-cream-light);
}

.total-ingredients-toggle::-webkit-details-marker {
  display: none;
}

.total-ingredients-toggle::after {
  content: "▸";
  margin-left: auto;
  font-size: 14px;
  color: var(--color-primary);
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(47, 95, 85, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.total-ingredients-section[open] .total-ingredients-toggle::after {
  transform: rotate(90deg);
}

.total-ingredients-toggle:hover {
  background: var(--color-cream);
  border-color: var(--color-border);
}

.total-ingredients-section .ingredients-table {
  margin-bottom: 0;
}

.recipe-block {
  background: #fbfaf7;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: 10px;
}

.recipe-block:last-child {
  margin-bottom: 0;
}

.ingredients-block .ingredients-title {
  margin-top: 0;
}

.total-ingredients-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
}

.total-ingredient-item {
  background: transparent;
  border-radius: var(--radius-md);
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  font-size: var(--text-sm);
  border: none;
  box-shadow: none;
}

.total-ingredient-name {
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
}

.total-ingredient-values {
  text-align: right;
}

.total-ingredient-amount {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.total-ingredient-pct {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.total-ingredients-table th:nth-child(2),
.total-ingredients-table th:nth-child(3),
.total-ingredients-table td:nth-child(2),
.total-ingredients-table td:nth-child(3),
.align-right {
  text-align: right;
}

.starter-detail-row {
  background: var(--color-bg-soft);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.starter-detail-row td:first-child {
  padding-left: 1.5rem;
}

/* Preferment detail view */
.preferments-detail-section {
  margin-bottom: var(--space-lg);
}

.preferment-detail-card {
  background: var(--color-bg);
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.preferment-detail-name {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.preferment-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-sm);
}

.preferment-detail-table th,
.preferment-detail-table td {
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-cream);
}

.preferment-detail-table th {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.preferment-detail-table td {
  font-size: var(--text-sm);
}

.preferment-detail-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-sm);
  background: var(--color-card);
  border-radius: var(--radius-sm);
}

.preferment-header-row {
  background: var(--color-cream-light);
}

.preferment-header-row td {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-xs) !important;
  color: var(--color-primary);
  font-size: var(--text-sm);
  text-align: left !important;
}

.preferment-ingredient-row td:first-child {
  padding-left: var(--space-md);
}

/* ===== FERMENTACIJOS SKAIČIUOKLĖ ===== */

.fermentation-calc {
  margin-bottom: var(--space-sm);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.autolyse-section {
  background: var(--color-cream-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.autolyse-details {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.autolyse-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.autolyse-row label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.autolyse-duration-input {
  width: 70px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  text-align: center;
}

.autolyse-details textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  resize: vertical;
}

.folds-section {
  background: var(--color-cream-light);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.folds-details {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.folds-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.folds-row label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 70px;
}

.folds-input {
  width: 70px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  text-align: center;
}

.temp-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.temp-input-row label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.temp-input {
  width: 70px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  text-align: center;
}

.bake-stages-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bake-stage-card {
  background: var(--color-cream-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}

.bake-stage-header {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.bake-hint {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.bake-stage-row {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.bake-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.bake-temp-input {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.bake-time-input {
  width: 60px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  text-align: center;
  background: var(--color-white);
}

.bake-input-group span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bake-note {
  width: 100%;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  resize: none;
}

.bake-total-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.bake-total-row strong {
  color: var(--color-primary);
  font-size: var(--text-md);
}

.bake-stages-detail {
  margin-top: var(--space-sm);
}

.bake-stage-info {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--text-sm);
  border-bottom: 1px dashed var(--color-border);
}

.bake-stage-info:last-of-type {
  border-bottom: none;
}

.bake-stage-label {
  color: var(--color-text-muted);
}

.bake-stage-total {
  margin-top: var(--space-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-align: right;
}

.temp-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87, 126, 137, 0.15);
}

.temp-unit {
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.fermentation-advice {
  background: linear-gradient(135deg, var(--color-cream-light), var(--color-cream));
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-neu);
}

.fermentation-advice .advice-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.fermentation-advice .advice-main {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  line-height: 1.3;
}

.fermentation-advice .advice-main strong {
  color: var(--color-primary);
  font-size: var(--text-md);
}

.advice-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
}

.advice-card {
  background: #fff;
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-neu);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.advice-card-header {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-2xs);
}

.advice-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.advice-card-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: 1.3;
  font-size: var(--text-base);
  color: var(--color-text);
}

.advice-proof-lines {
  flex-direction: column;
  gap: 4px;
}

.advice-proof-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.advice-proof-label {
  color: var(--color-text);
  font-weight: 400;
}

.advice-proof-value {
  color: var(--color-primary);
  font-weight: 600;
}

.advice-card-time {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.3;
}

.advice-card-time > span:not(.smart-chip),
.advice-card-main > span:not(.smart-chip) {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.advice-time-strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
}

.advice-card-main .advice-time-strong {
  color: var(--color-primary);
}

.fermentation-advice .bulk-advice,
.fermentation-advice .proof-advice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  line-height: 1.1;
}

.fermentation-advice .bulk-advice .advice-label,
.fermentation-advice .proof-advice .advice-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.fermentation-advice .bulk-advice .advice-rise,
.fermentation-advice .proof-advice .advice-rise {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--color-primary);
}

.advice-card .advice-rise {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.fermentation-advice .bulk-advice .advice-time,
.fermentation-advice .proof-advice .advice-time {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

/* Fermentation cards (detail view) */
.fermentation-card,
.fermentation-advice .fermentation-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 12px;
  border-radius: 12px;
  background: var(--color-surface-strong, #f7f4f1);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.fermentation-card.bulk,
.fermentation-advice .fermentation-card.bulk {
  background: linear-gradient(135deg, #eef6f3, #f6fbf8);
  border-color: #d6ebe1;
}

.fermentation-card.proof,
.fermentation-advice .fermentation-card.proof {
  background: linear-gradient(135deg, #eef1fb, #f7f8fe);
  border-color: #dbe1f5;
}

.tech-section .fermentation-card {
  background: var(--color-cream-light);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tech-section .fermentation-card.bulk,
.tech-section .fermentation-card.proof {
  background: var(--color-cream-light);
  border-color: var(--color-border-light);
}

.fermentation-card .card-icon,
.fermentation-advice .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.fermentation-card .card-icon svg,
.fermentation-advice .card-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.fermentation-card .card-body,
.fermentation-advice .fermentation-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fermentation-card .card-title,
.fermentation-advice .fermentation-card .card-title {
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--text-md);
}

.fermentation-card .card-main,
.fermentation-advice .fermentation-card .card-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.fermentation-card .card-rise,
.fermentation-advice .fermentation-card .card-rise {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
}

.fermentation-card .card-time,
.fermentation-advice .fermentation-card .card-time {
  font-weight: 600;
  color: var(--color-text-light);
}

.fermentation-primary {
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--text-base);
}

.fermentation-secondary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-base);
  width: 100%;
  flex-wrap: wrap;
}

.fermentation-secondary.fermentation-secondary-row {
  align-items: center;
  column-gap: 24px;
  row-gap: 6px;
}

.fermentation-smart-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-width: 0;
}

.fermentation-secondary-text {
  line-height: 1.35;
}

.fermentation-link-slot {
  display: flex;
  align-items: center;
}

.rise-planner-link {
  white-space: nowrap;
}

.fermentation-primary,
.advice-time-strong,
.advice-card-header {
  line-height: 1.3;
}

.fermentation-secondary > span:not(.smart-chip) {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.tech-section .fermentation-secondary .rise-highlight {
  font-weight: 800;
  color: var(--color-primary);
}

.smart-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
  align-self: center;
}

.smart-chip img {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.smart-chip span {
  display: flex;
  align-items: center;
  line-height: 1.1;
}

.fermentation-card .card-meta,
.fermentation-advice .fermentation-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.proof-card-compact {
  align-items: center;
}

.proof-card-compact .card-body {
  gap: 2px;
}

.proof-card-compact .card-main {
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.status-chip .chip-icon {
  font-size: 14px;
  line-height: 1;
}

.status-chip.positive {
  background: #e7f6ef;
  color: #2f5f55;
}

.status-chip.info {
  background: #eef1fb;
  color: #3a4c87;
}

.status-chip.neutral {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text);
}

/* ===== RECIPE QUICK FACTS (DETAIL HEADER) ===== */
.recipe-quick-facts {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-xs);
  width: 100%;
  max-width: 100%;
}

.recipe-quick-facts-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.recipe-quick-facts-note {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  max-width: 100%;
}

.recipe-quick-facts-note .note-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #FFE082;
  background: #FFF8E1;
  color: #8D6E63;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.recipe-quick-facts-row::-webkit-scrollbar {
  display: none;
}

.recipe-quick-facts .status-chip {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--text-sm);
  line-height: 1.1;
  gap: 6px;
}

.recipe-quick-facts .status-chip .chip-icon {
  width: 16px;
  height: 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tech-value.notes-callout {
  background: #f7f4f1;
  border-left: 3px solid var(--color-primary);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 8px;
  color: var(--color-text);
}

.tech-item {
  margin-bottom: 16px;
}

.tech-temp-row {
  margin-bottom: 6px;
}

.fermentation-advice {
  margin-top: 4px;
}

.fermentation-advice .advice-secondary {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: var(--text-sm);
}

.fermentation-advice .advice-detail {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

.fermentation-advice .advice-total {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border);
}

.fermentation-advice .advice-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: normal;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
}

.fermentation-advice .advice-section {
  margin-bottom: var(--space-sm);
}

.fermentation-advice .advice-proof {
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border);
}

.fermentation-advice .proof-scenario {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-xs) 0;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-secondary);
  margin: var(--space-xs) 0;
}

.large-batch-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: normal;
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-accent);
}

.note,
.advice-note,
.large-batch-note,
.result-note,
.vessel-note,
.rise-target-note,
.time-range-note,
.ingredient-note,
.guide-stage-note,
.info-notes,
.profile-id-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  background: var(--color-cream-light);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  font-style: normal;
  margin-top: var(--space-xs);
}

.note-collapsible {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.note-header {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.note-body {
  color: var(--color-text);
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  overflow: hidden;
}

.note-toggle {
  align-self: flex-start;
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.note-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-subtle);
  color: var(--color-primary);
}

.note-toggle svg {
  transition: transform 0.2s ease;
}

.note-toggle.expanded svg {
  transform: rotate(180deg);
}

.vessel-note {
  color: var(--color-accent);
  font-weight: 600;
}

/* ===== REMOVE BUTTON ===== */

.remove-row-btn {
  border-radius: 50%;
  border: none;
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  background: var(--color-danger-light);
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}

.remove-row-btn:hover {
  background: #F0D4CF;
}

/* ===== UNIFIED PAGE HEADER ===== */

.home-view {
  padding-top: var(--space-lg);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: 0 var(--space-xs);
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.02em;
}

.page-actions {
  display: flex;
  gap: var(--space-sm);
}

.page-actions-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: 0 var(--space-xs);
}

/* Unified toolbar - filters + actions in one row */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: 0 var(--space-xs);
  flex-wrap: wrap;
}

.page-toolbar .recipe-category-pills,
.page-toolbar .ing-category-pills {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-toolbar .recipe-category-pills::-webkit-scrollbar,
.page-toolbar .ing-category-pills::-webkit-scrollbar {
  display: none;
}

.page-toolbar-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.page-toolbar .page-action-btn {
  position: static;
  flex-shrink: 0;
}

.page-action-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(61, 107, 107, 0.1);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.page-action-btn:hover {
  background: rgba(61, 107, 107, 0.16);
}

.page-action-btn:active {
  transform: scale(0.95);
}

.page-action-btn svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-action-btn.active {
  background: var(--color-primary);
  color: white;
}

.page-action-btn.active svg {
  stroke: white;
}

.page-action-btn-primary {
  background: var(--color-primary);
  color: white;
  text-decoration: none;
}

.page-action-btn-primary:hover {
  background: var(--color-primary-dark);
}

.page-action-btn-primary svg {
  stroke: white;
}

/* Legacy support */
.home-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding: 0 var(--space-xs); }
.home-title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: -0.02em; }
.home-actions { display: flex; gap: var(--space-sm); }
.home-action-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(61, 107, 107, 0.1); color: var(--color-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); -webkit-tap-highlight-color: transparent; }
.home-action-btn:hover { background: rgba(61, 107, 107, 0.16); }
.home-action-btn:active { transform: scale(0.95); }
.home-action-btn svg { stroke-linecap: round; stroke-linejoin: round; }
.home-action-btn-primary { background: var(--color-primary); color: white; text-decoration: none; }
.home-action-btn-primary:hover { background: var(--color-primary-dark); }
.home-action-btn-primary svg { stroke: white; }

/* ===== RECEPTŲ SĄRAŠAS - iOS Style ===== */

.recipe-filter-section {
  margin-bottom: var(--space-md);
}

.recipe-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.recipe-category-pills::-webkit-scrollbar {
  display: none;
}

.recipe-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(118, 118, 128, 0.12);
  color: #8E8E93;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.recipe-pill:hover {
  background: rgba(118, 118, 128, 0.2);
}

.recipe-pill.active {
  background: var(--color-primary);
  color: white;
}

.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-list .card {
  margin: 0;
}

.recipe-list .recipe-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
  border: none;
}

.recipe-list .recipe-card:last-child {
  border: none;
}

.recipe-list-item {
  padding: 14px var(--space-md);
  font-size: var(--text-md);
  cursor: pointer;
  background: var(--color-card);
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  transition: background var(--transition-fast);
  border-bottom: 0.5px solid var(--color-border-light);
}

.recipe-list-item:last-child {
  border-bottom: none;
}

.recipe-list-item:hover {
  background: var(--color-bg);
}

.recipe-list-item:active {
  background: var(--color-border-light);
}

.recipe-list-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--color-text);
}

.recipe-list-actions {
  display: flex;
  gap: var(--space-sm);
}

.recipe-list-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text-muted);
}

.recipe-list-empty-icon {
  font-size: 56px;
  margin-bottom: var(--space-md);
  opacity: 0.4;
}

.recipe-list-empty-text {
  font-size: var(--text-md);
  margin-bottom: var(--space-sm);
  color: var(--color-text-secondary);
}

.recipe-list-empty-hint {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.icon-btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  background: var(--color-cream);
  color: var(--color-text-muted);
  transition: background-color 0.15s;
}

.icon-btn:hover {
  background: var(--color-accent-light);
}

.icon-btn-danger {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.icon-btn-danger:hover {
  background: #F0D4CF;
}

/* ===== RECEPTŲ DETALĖS ===== */

.recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.recipe-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.ingredients-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.recipe-block .ingredients-table {
  margin-bottom: 0;
  box-shadow: none;
}

.recipe-block .nutrition-table {
  margin-top: 0;
  box-shadow: none;
}

.recipe-block.info-section {
  display: block;
  padding: var(--space-md);
}

.ingredients-table {
  --pref-base-indent: 12px;
}

.ingredients-table th,
.ingredients-table td {
  padding: 8px 12px;
  text-align: left;
  border: none;
}

.ingredients-table th:first-child,
.ingredients-table td:first-child {
  width: 60%;
}

.ingredients-table th:nth-child(2),
.ingredients-table td:nth-child(2),
.ingredients-table th:nth-child(3),
.ingredients-table td:nth-child(3) {
  width: 20%;
  text-align: right;
}

.ingredients-table thead th {
  background: var(--color-cream-light);
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.2px;
  opacity: 0.7;
  border-bottom: 1px solid var(--color-cream);
}

.ingredients-table tbody tr {
  transition: background 0.15s ease;
}

.ingredients-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-cream-light);
}

.ingredients-table tbody tr:hover {
  background: var(--color-cream-light);
}

.ingredients-table tbody td:first-child {
  font-weight: 500;
  color: var(--color-text);
}

.ingredients-table tbody td:not(:first-child) {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.ingredients-table tbody td:last-child {
  font-weight: 500;
  text-align: right;
}

.card .ingredients-title {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card .total-ingredients-toggle {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.baker-pct-starter {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #1b5e20;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.baker-pct-levain {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  color: #1b5e20;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.baker-pct-kita {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  color: #424242;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85em;
}

.preferment-summary-row {
  background: var(--color-cream-light);
  border-top: 1px dashed var(--color-cream);
}

.preferment-summary-row td:first-child {
  font-style: italic;
  color: var(--color-text-muted);
}

.pref-indent-row td:first-child {
  padding-left: var(--pref-indent, var(--pref-base-indent, 12px));
}

.preferment-info-row td {
  opacity: 0.7;
  font-weight: 400;
}

.preferment-info-row .pref-info-pct {
  color: var(--color-text-muted);
}

.pref-info-target {
  color: var(--color-text-muted);
  font-size: 0.85em;
  margin-left: var(--space-xs);
}

.preferment-expandable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.preferment-expandable:hover {
  background: var(--color-cream);
}

.pref-expand-icon {
  display: inline-block;
  width: 1em;
  font-size: 0.7em;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.preferment-expandable.expanded .pref-expand-icon {
  transform: rotate(90deg);
}

.preferment-detail-row {
  background: #fafafa;
}

.preferment-detail-row td {
  padding: 8px 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.preferment-detail-row .pref-detail-name {
  padding-left: calc(var(--space-md) + 1.2em) !important;
}

.pref-indent-row .pref-detail-name {
  padding-left: var(--pref-indent, var(--pref-base-indent, 12px)) !important;
}

.calc-section {
  margin-top: var(--space-sm);
  padding: var(--space-sm) 0 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--color-border-light);
}

.calc-section.recipe-block {
  margin-top: 0;
  padding: var(--space-md);
  background: #fbfaf7;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: none;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.calc-title {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.calc-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}

.calc-toolbar::-webkit-scrollbar {
  display: none;
}

.calc-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.calc-control label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.calc-control .calc-input {
  height: 34px;
  padding: 6px 10px;
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: 10px;
  border: 1px solid var(--color-border-light);
  background: var(--color-cream-light);
  box-shadow: none;
}

.calc-control .calc-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(47, 95, 85, 0.12);
}

.calc-output {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  padding: 8px 10px;
}

.calc-output-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.calc-output-values {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}

.calc-output-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(47, 95, 85, 0.06);
  color: var(--color-primary);
}

.calc-output-label {
  font-weight: 700;
  color: var(--color-text);
}

.calc-output-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 500;
}

.calc-output-item + .calc-output-item::before {
  content: "•";
  color: var(--color-text-muted);
  margin-right: 4px;
}

.calc-output-item-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.calc-output-item > span:last-child {
  color: var(--color-text);
  font-weight: 700;
}

@media (max-width: 560px) {
  .calc-output {
    gap: 6px;
    font-size: 12px;
    padding: 6px 8px;
  }

  .calc-output-values {
    gap: 8px;
  }

  .calc-output-icon {
    width: 18px;
    height: 18px;
    font-size: 12px;
    border-radius: 6px;
  }

  .calc-output-item {
    gap: 4px;
  }

  .calc-output-item + .calc-output-item::before {
    margin-right: 2px;
  }
}

@media (max-width: 640px) {
  .calc-output {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .calc-output-values {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .calc-output-values::-webkit-scrollbar {
    display: none;
  }
}

.calc-results {
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.calc-results p,
.nutrition-section p,
.price-section p {
  margin: var(--space-xs) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  display: flex;
  justify-content: space-between;
}

.calc-results p strong {
  color: var(--color-text-muted);
  font-weight: 500;
}

.calc-results p span {
  font-weight: 600;
  color: var(--color-text);
}

.hydration-section {
  display: none;
}

/* Info Cards - unified styling for Hidratacija, Tešla, Savikaina */
.info-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid var(--color-cream);
}

.info-card-inline {
  margin-top: var(--space-md);
  margin-bottom: 0;
  background: var(--color-cream-light);
}

.info-card-header {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-sm);
}

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.info-card-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.2px;
  text-transform: none;
  opacity: 0.7;
}

.info-card-value {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.info-card-value-highlight {
  color: var(--color-primary);
  font-weight: 700;
}

.nutrition-card {
  margin-top: var(--space-lg);
}

@media (max-width: 480px) {
  .info-card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }
}

.nutrition-section,
.price-section {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nutrition-section h3,
.price-section h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
}

.info-item {
  background: white;
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  border: 1px solid var(--color-cream);
}

.info-label {
  color: var(--color-text-muted);
}

.info-value {
  font-weight: 600;
  color: var(--color-text);
}

.nutrition-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nutrition-table th,
.nutrition-table td {
  padding: 8px 12px;
  text-align: right;
  border: none;
}

.nutrition-table th:first-child,
.nutrition-table td:first-child {
  text-align: left;
}

.nutrition-table thead th {
  background: var(--color-cream-light);
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.2px;
  opacity: 0.7;
  border-bottom: 1px solid var(--color-cream);
}

.nutrition-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-cream-light);
}

.nutrition-table tbody td:first-child {
  color: var(--color-text);
  font-weight: 500;
}

.nutrition-table tbody td:not(:first-child) {
  font-weight: 500;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.nutrition-table .sub-row td:first-child {
  padding-left: var(--space-md);
  font-style: italic;
  color: var(--color-text-muted);
}

.data-warning {
  padding: var(--space-sm) var(--space-md);
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: #795548;
  margin-bottom: var(--space-sm);
}

.data-warning strong {
  color: #5D4037;
}

.missing-ingredient-link {
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}

.missing-ingredient-link:hover {
  color: var(--color-primary-dark);
}

.hydration-section p {
  margin: var(--space-xs) 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.flour-sum-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.dough-type-display {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  padding: 6px 10px;
  background: linear-gradient(135deg, #8B7355 0%, #A08060 100%);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  line-height: 1.2;
  align-self: flex-start;
}

.tool-link {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 12px;
  margin-top: 8px;
  background: var(--color-cream);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.tool-link:hover {
  background: var(--color-primary);
  color: white;
}

/* ===== MODALAS - iOS Style ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 101;
  overflow: hidden;
}

.modal-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(142, 142, 147, 0.12);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  color: var(--color-text-secondary);
}

.modal-close-btn:hover {
  background: rgba(142, 142, 147, 0.2);
}

.modal-body {
  padding: var(--space-lg);
  overflow: auto;
  flex: 1;
}

/* Inputs inside modals need adjusted styling for white background */
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="datetime-local"],
.modal-body textarea,
.modal-body select {
  background: #FAFAFA;
  border: 1px solid #E0E0E0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.modal-body input[type="text"]:focus,
.modal-body input[type="number"]:focus,
.modal-body input[type="date"]:focus,
.modal-body input[type="datetime-local"]:focus,
.modal-body textarea:focus,
.modal-body select:focus {
  background: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 2px rgba(47, 95, 85, 0.12);
}

.modal-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--color-bg);
  flex-shrink: 0;
}

.modal-grid {
  display: flex;
  gap: var(--space-lg);
}

.modal-list-panel {
  flex: 1;
  min-width: 0;
  max-height: 450px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-bg);
}

.modal-form-panel {
  flex: 1.2;
  min-width: 0;
}

/* ===== NEW CONTENT MODAL ===== */

.new-content-modal {
  width: min(380px, 90vw);
  padding: var(--space-lg);
  text-align: center;
}

.new-content-modal h3 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-primary);
  font-size: var(--text-lg);
}

.new-content-list {
  text-align: left;
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.new-content-list p {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.new-content-list ul {
  margin: 0 0 var(--space-sm) 0;
  padding-left: var(--space-md);
  list-style: none;
}

.new-content-list li {
  padding: var(--space-xs) 0;
  font-size: var(--text-sm);
}

.modal-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
}

.modal-actions .btn {
  min-width: 100px;
}

/* ===== DEMO NOTES + PAYWALL ===== */
.demo-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: #fff7e6;
  border-left: 3px solid #c79a2b;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin: 8px 0;
}

.demo-empty-actions {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 16px;
}

.demo-empty-actions .btn {
  width: min(240px, 100%);
}

.demo-seed-modal {
  width: min(640px, 100%);
}

.demo-actions-modal {
  width: min(420px, 92vw);
}

.demo-actions-modal .modal-body {
  display: grid;
  gap: var(--space-sm);
}

.demo-actions-modal .btn {
  width: 100%;
}

.demo-seed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-seed-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.demo-seed-card-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--space-sm);
}

.demo-seed-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: var(--space-sm);
}

.demo-seed-card-title {
  font-weight: 600;
}

.demo-seed-card-desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: 4px;
}

.demo-seed-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: 6px 0;
}

.paywall-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.paywall-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: #b08400;
}

.demo-mode [data-paywall-dim="1"] {
  opacity: 0.65;
  filter: saturate(0.9);
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.demo-mode .btn.btn-secondary[data-paywall-dim="1"] {
  color: var(--color-text-muted);
  border-color: var(--color-border-light);
}

.paywall-modal {
  z-index: 13000;
}

.paywall-modal .modal-content {
  z-index: 13001;
}

.paywall-modal-content {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-modal);
  max-width: 560px;
  width: min(560px, 94vw);
  position: relative;
}

.paywall-modal .paywall-modal-header {
  border-bottom: none;
  padding: var(--space-md) var(--space-md) 0;
  justify-content: flex-end;
  background: transparent;
}

.paywall-close-btn {
  background: rgba(47, 95, 85, 0.08);
  color: var(--color-text);
}

.paywall-modal-body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.paywall-modal-actions {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  background: var(--color-cream);
  border-top: 1px solid var(--color-border-light);
}

.paywall-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.paywall-hero-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(214, 167, 86, 0.18);
  color: var(--color-accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(214, 167, 86, 0.35);
}

.paywall-hero-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.paywall-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.paywall-reason {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.paywall-subtitle {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.paywall-plans {
  display: grid;
  gap: var(--space-sm);
  background: rgba(47, 95, 85, 0.04);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.paywall-plan-card {
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-cream-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  box-shadow: var(--shadow-neu-sm);
}

.paywall-plan-card:hover {
  box-shadow: var(--shadow-neu);
}

.paywall-plan-card.active {
  border-color: var(--color-primary);
  background: rgba(47, 95, 85, 0.08);
  box-shadow: var(--shadow-neu-lg);
}

.paywall-plan-card:focus-visible {
  outline: 2px solid rgba(47, 95, 85, 0.4);
  outline-offset: 2px;
}

.paywall-plan-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--color-accent);
  color: white;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-xs);
}

.paywall-plan-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.paywall-plan-name {
  font-weight: 700;
  color: var(--color-text);
}

.paywall-plan-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.paywall-plan-price {
  text-align: right;
  flex: 0 0 auto;
}

.paywall-plan-price-main {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-md);
}

.paywall-feature-card {
  background: rgba(47, 95, 85, 0.04);
  border: 1px solid rgba(47, 95, 85, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-neu-sm);
}

.paywall-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.paywall-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.paywall-feature-list li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
}

.paywall-trial {
  background: rgba(47, 95, 85, 0.02);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border-light);
}

.paywall-trial-title {
  text-align: center;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
}

.paywall-trial-detail {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
  line-height: 1.4;
}

.paywall-trial-highlight {
  color: var(--color-primary);
  font-weight: 700;
}

.paywall-trial-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: var(--space-sm);
}

.paywall-trial-steps::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--color-border);
}

.paywall-trial-step {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 33%;
}

.paywall-step-dot {
  width: 24px;
  height: 24px;
  background: var(--color-cream-light);
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  margin: 0 auto var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
}

.paywall-trial-step.is-active .paywall-step-dot {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.paywall-trial-step.is-complete .paywall-step-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.paywall-step-label {
  font-size: 11px;
  font-weight: 700;
  display: block;
}

.paywall-step-desc {
  font-size: 10px;
  color: var(--color-text-muted);
  display: block;
}

.paywall-guarantee {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.paywall-secondary {
  padding: 6px 12px;
  min-height: auto;
  font-size: var(--text-sm);
}

@media (max-width: 520px) {
  .paywall-modal-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .paywall-modal-body {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
  }
}

/* ===== GUEST ONBOARDING ===== */
body.onboarding-active {
  overflow: hidden;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  background: var(--color-cream);
  color: var(--color-text);
}

.onboarding-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(214, 167, 86, 0.25), transparent 50%),
              radial-gradient(circle at 80% 10%, rgba(47, 95, 85, 0.18), transparent 45%),
              radial-gradient(circle at 50% 90%, rgba(214, 167, 86, 0.2), transparent 55%);
  pointer-events: none;
}

.onboarding-shell {
  position: relative;
  height: 100%;
  width: 100%;
}

.onboarding-scroll {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.onboarding-step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-xl);
  scroll-snap-align: start;
  text-align: center;
}

.onboarding-step-content {
  max-width: 520px;
  width: 100%;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neu-lg);
  padding: var(--space-2xl) var(--space-2xl);
  backdrop-filter: blur(6px);
  position: relative;
}

.onboarding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(47, 95, 85, 0.12);
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}

.onboarding-icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.onboarding-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xl);
  color: var(--color-text);
}

.onboarding-text {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.onboarding-checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  max-width: 360px;
  text-align: left;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.onboarding-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.onboarding-checklist li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  margin-top: 2px;
}

.onboarding-info {
  margin: var(--space-sm) auto 0;
  max-width: 360px;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.onboarding-actions {
  display: grid;
  gap: var(--space-sm);
}

.onboarding-actions .btn {
  width: 100%;
}

.onboarding-secondary-link {
  width: auto;
  justify-self: center;
  text-decoration: underline;
  font-size: var(--text-xs);
}

.onboarding-skip {
  position: fixed;
  top: 16px;
  right: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-text);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-neu-sm);
  cursor: pointer;
  z-index: 10003;
}

.onboarding-lang-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  border: none;
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  box-shadow: var(--shadow-neu-sm);
  cursor: pointer;
  z-index: 10003;
}

.onboarding-lang-toggle:hover {
  background: rgba(255, 255, 255, 0.9);
}

.onboarding-progress {
  position: fixed;
  bottom: 18px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10003;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: transform 0.2s ease, background 0.2s ease;
}

.onboarding-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}

body.onboarding-active .modal {
  z-index: 12010;
}

body.onboarding-active .modal .modal-backdrop {
  z-index: 12009;
}

body.onboarding-active .modal .modal-content {
  z-index: 12011;
}

/* ===== GUEST PROFILE ===== */
.profile-guest-card {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--color-cream-dark);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.profile-guest-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.profile-guest-actions {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.profile-guest-action {
  display: grid;
  gap: 6px;
  text-align: center;
  justify-items: center;
}

.profile-guest-action-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.profile-guest-action-label.is-muted {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.profile-guest-actions .btn {
  padding: 10px 16px;
  font-size: var(--text-sm);
  min-height: 40px;
  width: 100%;
}

.profile-guest-scope-toggle {
  margin-top: var(--space-sm);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-decoration: underline;
}

/* Tighter spacing for guest header block */
.demo-mode #profileModal .profile-user-row {
  margin-bottom: 4px;
}

.demo-mode #profileModal .profile-guest-note {
  margin: 2px 0;
}

.demo-mode #profileModal .profile-guest-scope-toggle {
  margin-top: 2px;
}

.profile-note {
  font-size: 11px !important;
  color: #5b4400 !important;
  background: #fff4c2 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin: 2px 0 4px 0 !important;
  line-height: 1.2 !important;
}

.profile-guest-scope {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.profile-guest-scope-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.profile-guest-scope-list {
  margin: 0;
  padding-left: var(--space-md);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  display: grid;
  gap: 4px;
}

.profile-guest-scope-secondary {
  display: block;
  margin-top: 0;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ===== INGREDIENTŲ SĄRAŠAS MODALE ===== */

.ingredient-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  gap: var(--space-sm);
  background: var(--color-card);
  margin-bottom: var(--space-xs);
  border: 1px solid var(--color-border-light);
  transition: all 0.15s;
}

.ingredient-list-row:hover {
  border-color: var(--color-primary-light);
  background: white;
}

.ingredient-list-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.ingredient-list-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ingredient-list-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.ing-btn {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background 0.15s;
}

.ing-btn:hover {
  background: var(--color-cream-dark);
}

.ing-btn-danger:hover {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}

/* ===== INGREDIENT FORM COLLAPSIBLE SECTIONS ===== */

.ingredient-details-section {
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-cream-light);
}

.ingredient-details-toggle {
  display: block;
  padding: var(--space-md);
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  list-style: none;
  user-select: none;
  transition: all 0.2s;
}

.ingredient-details-toggle::-webkit-details-marker {
  display: none;
}

.ingredient-details-toggle::before {
  content: "▶";
  display: inline-block;
  margin-right: var(--space-sm);
  font-size: var(--text-xs);
  transition: transform 0.2s;
}

.ingredient-details-section[open] .ingredient-details-toggle::before {
  transform: rotate(90deg);
}

.ingredient-details-section[open] .ingredient-details-toggle {
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.ingredient-details-content {
  padding: var(--space-md);
}

.ingredient-export-import {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.ingredient-export-import .btn {
  flex: 1;
}

/* ===== BARKODO SKENAVIMAS ===== */

.barcode-input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.barcode-input-group {
  flex: 1;
}

.barcode-scanner-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#barcodeScannerView {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#barcodeScannerView video {
  width: 100% !important;
  height: 100% !important;
  max-height: 70vh;
  object-fit: cover;
}

.barcode-scanner-container .btn {
  position: absolute;
  bottom: 40px;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-lg);
  background: white;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ===== NUOTRAUKOS ===== */

.recipe-image-preview {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  position: relative;
}

.recipe-image-preview .image-frame {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-cream);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-image-preview .image-frame:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.recipe-image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.recipe-image-preview .image-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.recipe-image-preview .btn-enlarge {
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}

.recipe-image-preview .btn-enlarge:hover {
  background: var(--color-cream-dark);
}

.recipe-header-with-image {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.recipe-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.recipe-header-text h2 {
  margin: 0;
}

.recipe-header-text .muted {
  margin: var(--space-xs) 0 var(--space-md);
}

.recipe-image-detail {
  flex-shrink: 0;
}

.recipe-image-detail .image-frame {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-cream);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.recipe-image-detail .image-frame:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.recipe-image-detail img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.recipe-header-with-image + .recipe-quick-facts {
  margin-top: var(--space-sm);
}

@media (max-width: 720px) {
  .recipe-header-with-image {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-md);
  }

  .recipe-image-detail .image-frame {
    width: 110px;
    height: 110px;
  }
}

/* ===== LIGHTBOX ===== */

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}

.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.image-lightbox img {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  z-index: 101;
}

/* ===== STARTER TABS ===== */

/* Old starter-tabs removed - see newer version below */

.starter-tab-content {
  display: none;
}

.starter-tab-content.active {
  display: block;
}

.starter-results {
  background: var(--color-cream-light);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.starter-results p {
  margin: var(--space-xs) 0;
  font-size: var(--text-sm);
}

.starter-results strong {
  color: var(--color-primary);
}

/* ===== RESPONSIVE - MOBILE ===== */

@media (max-width: 768px) {
  .app-main {
    padding: var(--space-sm) 0;
  }

  .card {
    padding: var(--space-md);
  }

  .modal-grid {
    flex-direction: column;
  }

  .modal-list-panel {
    max-height: 200px;
  }
}

@media (max-width: 600px) {
  .form-group {
    margin-bottom: var(--space-sm);
  }

  /* Ingrediento eilutė recepte */
  .ingredient-row {
    gap: 4px;
  }

  .ingredient-row .ing-name-input {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .ingredient-row .ing-amount-input {
    width: 65px;
    font-size: var(--text-sm);
    padding: var(--space-xs);
    text-align: right;
  }

  .system-ingredient-row {
    padding: var(--space-xs) var(--space-sm);
    min-height: 44px;
  }

  .system-ingredient-title,
  .system-ingredient-note,
  .system-ingredient-amount,
  .system-ingredient-pct {
    font-size: var(--text-sm);
  }

  .system-ingredient-name {
    padding: var(--space-xs) var(--space-sm);
    min-height: 44px;
  }

  .system-ingredient-amount {
    width: 65px;
    padding: var(--space-xs);
    min-height: 44px;
  }

  .ing-pct-input {
    width: 62px;
    min-width: 62px;
    padding: 6px 18px 6px 6px;
    font-size: 14px;
    text-align: right;
  }

  .starter-pct-wrapper {
    padding: 3px 6px;
    gap: 3px;
  }

  .pct-label {
    font-size: 10px;
  }
  
  .baker-pct-wrapper {
    padding: 2px;
    min-width: 58px;
  }
  
  .baker-pct-input {
    width: 42px;
    font-size: var(--text-xs);
    padding: 4px;
  }
  
  .baker-pct-label {
    font-size: 10px;
  }

  /* Mygtukai */
  .btn-sm {
    padding: var(--space-xs) var(--space-sm);
  }

  /* Lentelė */
  .ingredients-table {
    font-size: var(--text-sm);
    --pref-base-indent: var(--space-sm);
  }

  .ingredients-table th,
  .ingredients-table td {
    padding: var(--space-xs) var(--space-sm);
  }

  .preferment-detail-row td {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .ingredients-table td:first-child {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ingredient-missing td:first-child {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ingredient-missing td:first-child .missing-badge {
    margin-left: 0;
    white-space: nowrap;
  }

  /* Modalas */
  .modal-content {
    width: 98vw;
    max-height: 95vh;
  }

  .modal-header {
    padding: var(--space-sm) var(--space-md);
  }

  .modal-body {
    padding: var(--space-md);
  }

  /* Starter tabs */
  .starter-tabs {
    flex-wrap: wrap;
  }

  .starter-tab {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* ===== TOOLS PAGE ===== */

.modal-content-lg {
  width: min(800px, 96vw);
}

.tools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-neu);
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.tool-card:hover {
  box-shadow: var(--shadow-neu-lg);
}

.tool-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
}

.tool-card-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neu-sm);
}

.tool-card-icon svg {
  width: 32px;
  height: 32px;
}

.tool-card-info {
  flex: 1;
  min-width: 0;
}

.tool-card-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-card-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-card-chevron {
  flex-shrink: 0;
  color: #C7C7CC;
  transition: transform 0.3s ease;
}

.tool-card.open .tool-card-chevron {
  transform: rotate(180deg);
}

.tool-card-content {
  display: none;
  padding: 14px;
  margin: 10px 10px 10px 10px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.tool-card.open .tool-card-content {
  display: block;
}

.tool-card-content .muted:first-child {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.rise-mode-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

.rise-mode-switch {
  display: inline-flex;
  gap: 6px;
  background: var(--color-cream-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.proof-mode-switch {
  background: rgba(47, 95, 85, 0.08);
  border: 1px solid rgba(47, 95, 85, 0.22);
  box-shadow: 0 4px 12px rgba(15, 24, 20, 0.08);
}

.rise-mode-btn {
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rise-mode-btn:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.02);
}

.rise-mode-btn.active {
  background: white;
  color: var(--color-primary);
  box-shadow: var(--shadow-neu-sm);
}

#riseCalcTab.rise-mode-recipe:not(.rise-advanced-open) [data-rise-manual] {
  display: none !important;
}

#riseCalcTab.rise-mode-manual [data-rise-manual],
#riseCalcTab.rise-mode-recipe.rise-advanced-open [data-rise-manual] {
  display: block;
}

#riseCalcTab.rise-mode-manual [data-rise-recipe] {
  display: none !important;
}

#inoculationCalcTab.ioc-mode-recipe:not(.ioc-advanced-open) [data-ioc-manual] {
  display: none !important;
}

#inoculationCalcTab.ioc-mode-manual [data-ioc-manual],
#inoculationCalcTab.ioc-mode-recipe.ioc-advanced-open [data-ioc-manual] {
  display: block;
}

#inoculationCalcTab.ioc-mode-manual [data-ioc-recipe] {
  display: none !important;
}

#hydrationCalcTab.hyd-mode-recipe:not(.hyd-advanced-open) [data-hyd-manual] {
  display: none !important;
}

#hydrationCalcTab.hyd-mode-manual [data-hyd-manual],
#hydrationCalcTab.hyd-mode-recipe.hyd-advanced-open [data-hyd-manual] {
  display: block;
}

#hydrationCalcTab.hyd-mode-manual [data-hyd-recipe] {
  display: none !important;
}

.rise-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 10px 12px;
  margin: -6px 0 var(--space-sm);
  border: 1px solid var(--color-border-light);
  background: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.rise-advanced-toggle:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.rise-advanced-toggle svg {
  transition: transform 0.2s ease;
}

.rise-advanced-toggle.open svg {
  transform: rotate(180deg);
}

.rise-temp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rise-temp-group .rise-temp-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  min-width: 40px;
  text-align: right;
}

.rise-temp-slider {
  width: 100%;
  flex: 1;
  accent-color: var(--color-primary);
}

@media (max-width: 640px) {
  .rise-mode-row {
    justify-content: flex-start;
  }

  .rise-mode-switch {
    width: 100%;
  }

  .rise-mode-btn {
    flex: 1;
    text-align: center;
  }
}

.tools-formula {
  background: var(--color-cream-light);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.formula-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-family: monospace;
}

.formula-text strong {
  color: var(--color-primary);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

@media (max-width: 500px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.tools-result {
  background: linear-gradient(135deg, var(--color-cream-light), var(--color-cream));
  border: 2px solid var(--color-accent-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}

#riseCalcTab #riseTempAdvice {
  border: 1px solid var(--color-accent-light);
}

#riseCalcTab #riseResult {
  border: 1px solid transparent;
  box-shadow: none;
  padding: var(--space-md);
  margin-top: var(--space-md);
}

#riseCalcTab #riseResult .result-value {
  font-size: var(--text-lg);
}

.result-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.result-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.result-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.result-unit {
  font-size: var(--text-md);
  color: var(--color-text-muted);
}

.result-note {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
}

.vessel-note {
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-weight: 500;
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.result-arrow {
  font-size: var(--text-xl);
  color: var(--color-accent);
  font-weight: bold;
}

.temp-advice {
  background: linear-gradient(135deg, #e8f4f0, #d4ebe4);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.temp-advice strong {
  color: var(--color-primary);
}

.hint {
  font-size: var(--text-xs);
  color: var(--color-secondary);
  font-weight: normal;
}

.advice-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-left: var(--space-sm);
}

/* Vessel Guide Tables */

.vessel-section {
  margin-bottom: var(--space-xl);
}

.vessel-section h4 {
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
}

.vessel-section h5 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.vessel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.vessel-table th,
.vessel-table td {
  border: 1px solid var(--color-border-light);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
}

.vessel-table thead th {
  background: var(--color-cream);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-xs);
}

.vessel-table thead th small {
  font-weight: 400;
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}

.vessel-table tbody tr:nth-child(even) {
  background: var(--color-cream-light);
}

.vessel-table-sm {
  font-size: var(--text-xs);
}

.vessel-table-sm th,
.vessel-table-sm td {
  padding: var(--space-xs) var(--space-sm);
}

.banneton-tables {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 700px) {
  .banneton-tables {
    grid-template-columns: 1fr;
  }
  
  .vessel-table {
    font-size: var(--text-xs);
  }
  
  .vessel-table th,
  .vessel-table td {
    padding: var(--space-xs);
  }
  
  .tools-tabs {
    gap: 2px;
  }
  
  .tools-tab {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
    flex: 1;
    text-align: center;
  }
}

/* ===== RECIPE ACTIONS BAR ===== */

.recipe-actions-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-light);
}

/* Dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  min-width: 44px;
  font-size: var(--text-lg);
  font-weight: 700;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-xs);
  min-width: 160px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--text-base);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--color-cream-light);
}

.dropdown-item-danger {
  color: var(--color-danger);
}

.dropdown-item-danger:hover {
  background: #fee;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-xs) 0;
}

.recipe-actions-left {
  display: flex;
  gap: var(--space-xs);
}

/* ===== KEPIMO ŽURNALAS ===== */

.bake-log-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.bake-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.bake-log-header h3 {
  margin: 0;
}

.bake-log-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bake-log-entry {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.bake-log-entry-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bake-log-entry-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bake-log-entry-content {
  flex: 1;
  min-width: 0;
}

.bake-log-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xs);
}

.bake-log-entry-date {
  font-weight: 500;
  color: var(--color-text);
}

.bake-log-entry-rating {
  font-size: var(--text-sm);
}

.bake-log-entry-notes {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.bake-log-entry-actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* ===== KEPIMO ŽURNALAS – NAUJA KORTELĖ ===== */
.bake-journal-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bake-journal-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: flex-start;
}

.bake-journal-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bake-journal-name {
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text);
}

.bake-journal-meta {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.bake-journal-meta-right {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bake-journal-photo img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bake-journal-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef5f0;
  color: var(--color-primary);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
}

.stage-progress {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #EEE7DF;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.stage-row {
  position: relative;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-dot {
  position: absolute;
  left: -27px; /* -(padding-left 20 + dot 12/2 + border 2/2) */
  top: 4px;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  box-sizing: border-box !important;
  border: 2px solid #ffffff;
  background: #2f5f55;
  flex-shrink: 0;
}

.stage-dot-done {
  background: #2f5f55;
  border-color: #2f5f55;
}

.stage-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stage-rise {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff1e6;
  color: #c96b00;
  font-weight: 700;
  font-size: 12px;
  vertical-align: middle;
}

.stage-row-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.stage-name {
  color: var(--color-text);
}

.stage-time {
  color: var(--color-text-muted);
  font-weight: 500;
}

.stage-meta {
  color: var(--color-text-muted);
  font-size: 12px;
}

.stage-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e9ecef;
  max-width: 100%;
}

.time-bar-fill {
  position: absolute;
  inset: 0;
  height: 10px;
  z-index: 1;
  max-width: 100%;
}

.time-bar-under {
  background: linear-gradient(90deg, #2f5f55, #57b88b);
  border-radius: 999px;
}

.time-bar-over {
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 999px;
  left: 0;
  z-index: 2;
  max-width: 100%;
}

.plan-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed #9ca3af;
  pointer-events: none;
  z-index: 3;
}

.stage-extra {
  margin-left: 8px;
  color: #c96b00;
  font-weight: 700;
}

.bake-journal-summary {
  display: flex;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.bake-journal-note {
  margin-top: var(--space-sm);
  padding: 12px 14px;
  background: #f6f1eb;
  border-radius: 12px;
  color: var(--color-text);
  font-style: italic;
  line-height: 1.4;
}

.journal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

/* Mobile tweaks to prevent horizontal overflow in bake journal */
@media (max-width: 560px) {
  .bake-journal-top {
    flex-wrap: wrap;
    gap: 8px;
  }
  .bake-journal-meta-right {
    width: 100%;
    justify-content: flex-start;
  }
  .bake-journal-detail {
    overflow-x: hidden;
  }
  .bake-journal-detail .edit-form > div {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }
}

/* Manual bake log modal */
.manual-bake-log-modal .modal-content {
  max-width: 980px;
  width: 92%;
}

.manual-bake-log-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.manual-bake-log-left {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manual-bake-log-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

.manual-stage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}

.manual-stage-header-title {
  font-weight: 700;
}

.manual-stage-header-col {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.manual-stage-header-actual {
  text-align: right;
}

.manual-stage-rows {
  padding: 12px;
  max-height: min(420px, 50vh);
  overflow: auto;
}

.manual-stage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.manual-stage-row.manual-stage-untimed {
  grid-template-columns: minmax(0, 1fr) auto;
}

.manual-stage-title {
  font-weight: 600;
  min-width: 0;
}

.manual-stage-planned {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.manual-stage-actual {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  flex-wrap: wrap;
}

.manual-duration-adjuster .duration-display {
  min-width: 72px;
  text-align: center;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.manual-duration-adjuster .duration-display:empty::before {
  content: '–';
  color: var(--color-text-muted);
}

.manual-stage-done {
  text-align: right;
}

.manual-stage-done-label {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.manual-folds-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .manual-bake-log-right {
    min-width: 100%;
  }
  .manual-stage-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title title"
      "planned actual";
    align-items: center;
    row-gap: 6px;
  }
  .manual-stage-planned,
  .manual-stage-actual,
  .manual-stage-done {
    justify-self: start;
  }
  .manual-stage-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title title"
      "planned actual";
    align-items: center;
    row-gap: 6px;
  }

  .manual-stage-header-title {
    grid-area: title;
  }

  .manual-stage-header-planned {
    grid-area: planned;
  }

  .manual-stage-header-actual {
    grid-area: actual;
    justify-self: end;
  }

  .manual-stage-title {
    grid-area: title;
  }

  .manual-stage-planned {
    grid-area: planned;
  }

  .manual-stage-actual {
    grid-area: actual;
    justify-self: end;
  }

  .manual-stage-row.manual-stage-untimed {
    grid-template-areas: "title done";
  }

  .manual-stage-done {
    grid-area: done;
    justify-self: end;
  }
}

@media (max-width: 1024px) and (min-width: 721px) {
  .manual-stage-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title title"
      "planned actual";
    align-items: center;
    row-gap: 6px;
  }

  .manual-stage-title {
    grid-area: title;
  }

  .manual-stage-planned {
    grid-area: planned;
  }

  .manual-stage-actual {
    grid-area: actual;
    justify-self: end;
  }

  .manual-stage-row.manual-stage-untimed {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title done";
  }

  .manual-stage-done {
    grid-area: done;
    justify-self: end;
  }

  .manual-stage-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title title"
      "planned actual";
    align-items: center;
    row-gap: 6px;
  }

  .manual-stage-header-title {
    grid-area: title;
  }

  .manual-stage-header-planned {
    grid-area: planned;
  }

  .manual-stage-header-actual {
    grid-area: actual;
    justify-self: end;
  }
}

.bake-journal-card .journal-actions button {
  border: none;
  background: #eef5f0;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.bake-journal-card .journal-actions button:hover {
  background: #d9ebdf;
}

.bake-log-form {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.bake-log-form h4 {
  margin: 0 0 var(--space-md);
  color: var(--color-primary);
}

.bake-log-photo-preview {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.bake-log-photo-preview img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.bake-log-form input[type="file"] {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 8px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: #f7faf7;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  width: auto;
}

.bake-log-form input[type="file"]::file-selector-button {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.bake-log-form input[type="file"]:hover {
  border-color: var(--color-primary);
  background: #eef5f0;
}

/* ===== TECH/BAKING PROCESS SECTION ===== */

.tech-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
  --tech-gap: 14px;
  --tech-title-size: var(--text-md);
  --tech-body-size: var(--text-sm);
  --tech-chip-height: 32px;
}

.tech-section h3 {
  margin-bottom: var(--space-md);
}

.tech-item {
  position: relative;
  margin-bottom: 10px;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 18px);
  background: #fbfaf7;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--tech-gap);
}

.tech-item:last-child {
  margin-bottom: 0;
}

.tech-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 4px 0 0;
}

.tech-meta-row:empty {
  display: none;
  margin-bottom: 0;
}

.tech-advice-row {
  display: block;
  margin: 0;
}

.tech-advice-row .fermentation-advice {
  width: 100%;
}

.tech-user-duration {
  display: inline-flex;
  align-items: center;
}

.tech-note-row {
  margin: 0;
}

.tech-link {
  font-size: var(--text-xs);
  padding: 0;
  margin-top: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  text-decoration: underline;
}

.tech-link-row {
  margin-top: 4px;
}

.tech-link:hover {
  background: transparent;
  color: var(--color-text);
}

.tech-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
  padding-left: 10px;
  border-left: 2px solid var(--color-border-light);
}

.tech-step + .tech-step {
  margin-top: var(--space-xs);
}

.tech-step-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  height: var(--tech-chip-height);
  min-height: var(--tech-chip-height);
  border-radius: 999px;
  border: 1px solid rgba(47, 95, 85, 0.16);
  background: rgba(47, 95, 85, 0.06);
  font-size: var(--tech-body-size);
  color: var(--color-text);
  line-height: 1.1;
  font-weight: 500;
  white-space: nowrap;
}

.tech-chip-muted {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--color-border-light);
  color: var(--color-text-secondary);
}

.tech-chip-muted .chip-icon {
  color: var(--color-text-secondary);
}

.tech-chip .chip-icon {
  font-size: 14px;
  color: var(--color-primary);
}

.tech-chip-text {
  font-weight: 600;
}

.tech-duration-chip {
  border-color: rgba(47, 95, 85, 0.18);
  background: rgba(47, 95, 85, 0.06);
  color: var(--color-text);
  font-weight: 600;
}

.tech-duration-chip .tech-chip-text {
  font-weight: 700;
}

.tech-value .tech-chip {
  margin-bottom: 0;
}

.tech-value .tech-note {
  display: block;
  margin-top: 4px;
}

.tech-line .tech-note {
  display: inline;
  margin-top: 0;
}

.tech-item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: calc(var(--space-md) + 3px);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(47, 95, 85, 0.15);
  z-index: 2;
}

.tech-item::after {
  display: none;
}

.tech-item:last-child::after {
  display: none;
}

.tech-label {
  font-size: var(--tech-title-size);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.tech-label + .tech-value {
  margin-top: 4px;
}

.tech-value {
  color: var(--color-text-secondary);
  line-height: 1.5;
  white-space: normal;
  font-size: var(--tech-body-size);
}

.tech-line-name {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--tech-body-size);
}

.tech-note {
  color: var(--color-text-muted);
  white-space: pre-wrap;
  font-size: var(--tech-body-size);
}

.tech-item .fermentation-advice {
  margin-top: 0; /* išlaiko tokias pačias paraštes kaip Bulk kortelėje */
}

.tech-section .fermentation-advice {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--space-xs);
}

.tech-section .fermentation-card {
  padding: 6px 10px;
  border-radius: 10px;
  background: #fdfbf8;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: none;
  margin-top: 4px;
}

.tech-section .fermentation-card.bulk,
.tech-section .fermentation-card.proof {
  background: #fdfbf8;
  border-color: rgba(0, 0, 0, 0.04);
}

.tech-section .fermentation-secondary {
  font-size: var(--tech-body-size);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.tech-section .smart-chip {
  font-size: var(--text-xs);
  font-weight: 600;
}

.tech-notes-block {
  position: relative;
  margin-top: var(--space-xl);
  margin-bottom: 10px;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-cream-light);
  border: 1px solid var(--color-border-light);
}

.tech-notes-block::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--space-md));
  height: 1px;
  background: var(--color-border-light);
}

.tech-notes-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.tech-notes-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  white-space: pre-wrap;
}

.folds-info {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.folds-info .folds-icon {
  font-size: 14px;
  color: var(--color-primary);
}

.folds-info strong {
  color: var(--color-primary);
}

.tech-temp-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.tech-temp-row .temp-label {
  font-size: inherit;
  color: var(--color-text-muted);
}

.tech-temp-row .temp-input-sm {
  width: 54px;
  height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: inherit;
  text-align: center;
  background: white;
}

.tech-temp-row .temp-input-sm:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87, 126, 137, 0.15);
}

.tech-temp-row .temp-unit {
  font-size: inherit;
  color: var(--color-text-muted);
}

/* ===== MISSING INGREDIENT WARNING ===== */

.ingredient-missing {
  background-color: var(--color-danger-light);
}

.ingredient-missing td:first-child {
  color: var(--color-danger);
}

.missing-badge {
  display: inline-block;
  background: var(--color-danger);
  color: white;
  font-size: var(--text-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin-left: var(--space-sm);
  font-weight: 500;
  vertical-align: middle;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.missing-badge:hover {
  background: var(--color-danger);
  filter: brightness(1.1);
}

.missing-badge:active {
  transform: scale(0.95);
}

/* ===== UTILITY CLASSES ===== */

.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ===== FLOATING SAVE BUTTON ===== */

.floating-save-btn {
  position: fixed;
  /* Lifted higher so it doesn’t cover the bottom Back/Save CTA */
  bottom: calc(180px + env(safe-area-inset-bottom, 0));
  right: var(--space-lg);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  font-size: 24px;
  transition: bottom 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


.floating-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
}

.floating-save-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.floating-save-btn:active {
  transform: scale(0.95);
}

.floating-save-btn.saving {
  pointer-events: none;
  opacity: 0.7;
}

/* ===== BOTTOM NAVIGATION (Mobile App Style with Neumorphism) ===== */

.bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neu-nav);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 10px;
  padding: 6px 12px;
  min-width: 56px;
  min-height: 50px;
  border-radius: var(--radius-lg);
  transition: all 0.18s ease-out;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.nav-item:hover {
  background: rgba(47, 95, 85, 0.06);
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-item.active {
  color: var(--color-primary);
  background: transparent;
  box-shadow: none;
}

.nav-icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
}

.nav-icon-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.nav-icon-outline {
  opacity: 1;
  stroke: currentColor;
}

.nav-icon-filled {
  opacity: 0;
  color: var(--color-primary);
}

.nav-item.active .nav-icon-outline {
  opacity: 0;
}

.nav-item.active .nav-icon-filled {
  opacity: 1;
}

.nav-label {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

/* ===== VIEW SYSTEM ===== */

.view {
  display: none;
  min-height: calc(100vh - 60px - 90px);
  padding-bottom: 100px;
}

.view.view-active,
.view:target {
  display: block;
}

#view-home {
  display: block;
}

.view-content {
  max-width: 100%;
  margin: 0;
  padding: 0 var(--space-md);
}

@media (min-width: 600px) {
  .view-content {
    padding: 0 var(--space-lg);
  }
}

/* ===== HEADER UPDATES FOR APP ===== */

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.back-btn {
  background: none;
  border: none;
  color: white;
  font-size: var(--text-md);
  padding: var(--space-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}

.back-btn:active {
  background: rgba(255,255,255,0.1);
}

.app-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
}

/* ===== RECIPE CARDS FOR LIST VIEW ===== */

.recipe-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: visible;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
  padding: 0;
  gap: 0;
  box-shadow: var(--shadow-neu);
  position: relative;
}

.recipe-card:hover {
  box-shadow: var(--shadow-neu-lg);
}

.recipe-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-neu-sm);
}

.recipe-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.recipe-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.recipe-card-image {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-sm);
}

.recipe-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-card-placeholder {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-card-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.6;
}

.recipe-card-info {
  flex: 1;
  min-width: 0;
}

.recipe-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipe-card-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipe-card-meta {
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 2px;
}

.recipe-card.menu-open {
  z-index: 100;
  position: relative;
}

.recipe-card-menu {
  position: relative;
  flex-shrink: 0;
}

.recipe-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

.recipe-card-duration {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
}

.recipe-card-duration-label {
  color: var(--color-text-muted);
}

.recipe-card-duration-value {
  font-weight: 600;
  color: var(--color-primary);
}

.recipe-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.recipe-card-actions .recipe-action-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-neu-sm);
  transition: all var(--transition-fast);
}

.recipe-card-actions .recipe-action-btn svg {
  width: 18px;
  height: 18px;
}

.recipe-card-actions .recipe-action-btn:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-neu);
}

.recipe-card-actions .recipe-action-btn:active {
  box-shadow: var(--shadow-inset);
}

.recipe-card-menu-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.recipe-card-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.recipe-card-menu-btn:active {
  background: rgba(0, 0, 0, 0.1);
}

.recipe-card-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 1000;
  overflow: hidden;
}

.recipe-card-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

.recipe-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.recipe-dropdown-item:hover {
  background: var(--color-bg);
}

.recipe-dropdown-item:active {
  background: #e8e8e8;
}

.recipe-dropdown-item svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.recipe-dropdown-item--favorite svg {
  color: var(--color-primary);
}

.recipe-dropdown-item--danger {
  color: #dc3545;
}

.recipe-dropdown-item--danger svg {
  color: #dc3545;
}

/* ===== BARCODE STATUS ===== */

.barcode-status {
  width: 100%;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.barcode-status-text {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== INGREDIENTS VIEW (Apple Style) ===== */

.ing-search-section {
  margin-bottom: var(--space-md);
  max-height: 60px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

.ing-search-section.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

.ing-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ing-search-input {
  flex: 1;
  padding: 14px 16px;
  padding-right: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.12);
  font-size: 17px;
  color: var(--color-text);
  outline: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.ing-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.ing-search-section:not(.collapsed) .ing-search-clear {
  opacity: 1;
}

.ing-search-clear:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text);
}

.ing-search-input:focus {
  background: rgba(118, 118, 128, 0.18);
  box-shadow: 0 0 0 3px rgba(87, 126, 137, 0.15);
}

.ing-search-input::placeholder {
  color: #8E8E93;
}

.ing-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ing-category-pills::-webkit-scrollbar {
  display: none;
}

.ing-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(118, 118, 128, 0.12);
  color: #8E8E93;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.ing-pill:hover {
  background: rgba(118, 118, 128, 0.2);
}

.ing-pill.active {
  background: var(--color-primary);
  color: white;
}

.ing-list-section {
  margin-bottom: var(--space-lg);
}

.ing-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding: 0 var(--space-xs);
}

.ing-count {
  font-size: 13px;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ing-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon-text {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 20px;
  background: var(--color-primary);
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-icon-text svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.btn-icon-text:hover {
  filter: brightness(1.1);
}

.btn-icon-text:active {
  transform: scale(0.96);
}

.btn-icon-sm {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.12);
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-icon-sm svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.btn-icon-sm:hover {
  background: rgba(118, 118, 128, 0.2);
  color: var(--color-text);
}

.btn-icon-sm:active {
  transform: scale(0.92);
}

.ing-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  overflow: hidden;
}

.ing-grid.ing-grid-empty {
  background: transparent;
}

.ing-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: white;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ing-card:hover {
  background: #F5F5F7;
}

.ing-card:active {
  background: #EBEBED;
}

.ing-card-info {
  flex: 1;
  min-width: 0;
}

.ing-card-name {
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ing-card-meta {
  font-size: 13px;
  color: #8E8E93;
}

.ing-card-category {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(118, 118, 128, 0.12);
  color: #636366;
}

.ing-card-category.cat-miltai { background: var(--color-cream); color: var(--color-accent-dark); }
.ing-card-category.cat-skystis { background: rgba(107, 155, 195, 0.15); color: #4A7A9E; }
.ing-card-category.cat-raugas { background: rgba(61, 107, 107, 0.12); color: var(--color-primary); }
.ing-card-category.cat-inkliuzas { background: rgba(212, 165, 116, 0.2); color: var(--color-accent-dark); }
.ing-card-category.cat-kita { background: rgba(118, 118, 128, 0.12); color: #636366; }

.ing-card-arrow {
  width: 20px;
  height: 20px;
  color: #C7C7CC;
  margin-left: 8px;
  flex-shrink: 0;
}

.ing-empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: #8E8E93;
}

.ing-empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.ing-empty-state p {
  margin: 0;
  font-size: 15px;
}

/* Ingrediento forma */
.ing-form-section {
  background: white;
  border-radius: 16px;
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ing-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.ing-form-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.btn-icon-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.12);
  color: #8E8E93;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon-close svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.btn-icon-close:hover {
  background: rgba(118, 118, 128, 0.2);
}

.ing-form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ing-form-actions .btn {
  flex: 1;
}

/* Empty ingredient list old style override */
#view-ingredients .ingredient-list {
  max-height: none;
  overflow-y: visible;
  margin-bottom: 0;
}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
  :root {
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
  }
  
  body {
    font-size: var(--text-base);
  }
  
  .stage-header-full {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .stage-header-left {
    flex: 1 1 100% !important;
    margin-bottom: 4px;
  }
  .stage-header-right {
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
  }
  .stage-header-right .btn-compact,
  .stage-header-right .btn {
    padding: 10px 14px !important;
  }
}

@media (max-width: 420px) {
  :root {
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
  }
}

@media (max-width: 480px) {
  .view-content {
    padding: 0 var(--space-sm);
  }
  
  .app-header {
    padding: var(--space-sm) var(--space-md);
  }
  
  .app-name {
    font-size: var(--text-md);
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
  }
  
  /* Guide wizard header - mobile compact */
  .guide-wizard-top {
    padding: var(--space-xs) var(--space-sm);
    gap: 4px;
  }
  
  .guide-wizard-title {
    gap: 4px !important;
  }
  
  .guide-wizard-title span:first-child {
    font-size: 15px !important;
  }
  
  .guide-wizard-meta {
    font-size: 12px !important;
  }
  
  .guide-header-controls {
    gap: var(--space-xs);
  }
  
  .guide-temp-stepper {
    padding: 2px 4px;
    gap: 2px;
  }
  
  .guide-temp-stepper .temp-label {
    display: none;
  }
  
  .guide-temp-stepper .temp-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .guide-temp-stepper .temp-value {
    font-size: var(--text-sm);
    min-width: 18px;
  }
  
  .guide-temp-stepper .temp-unit-small {
    font-size: 10px;
  }
  
  .guide-end-session-btn {
    padding: 4px 8px;
    font-size: var(--text-xs);
  }
  
  .guide-end-session-btn span {
    display: none;
  }
}

/* ===== KEPIMO VEDLYS (Wizard) ===== */

.guide-wizard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-background);
}

.guide-wizard-header {
  background: white;
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  z-index: 101;
}

.guide-wizard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-md);
  flex-wrap: wrap;
  row-gap: var(--space-xs);
}

.guide-wizard-title {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.guide-wizard-title span:first-child {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.2;
}

.guide-wizard-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.guide-header-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.btn-icon:hover {
  background: var(--color-cream-light);
  color: var(--color-text);
}

.guide-back-btn {
  font-size: 28px;
  font-weight: 300;
}

/* Progress bar */
.guide-progress-bar {
  display: flex;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  gap: 4px;
}

.progress-step {
  flex: 1;
  height: 4px;
  background: #E8E4DD;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08), inset -1px -1px 2px rgba(255,255,255,0.5);
}

/* Enlarged touch/click target */
.progress-step::before {
  content: '';
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: 0;
  right: 0;
}

.progress-step:hover {
  background: #D8D2C8;
}

.progress-step:active {
  background: #C8C0B4;
}

.progress-step-dot {
  display: none;
}

.progress-step-active {
  background: var(--color-primary);
  height: 8px;
  margin-top: -2px;
  box-shadow: 0 2px 8px rgba(47, 95, 85, 0.4);
  position: relative;
}

.progress-step-active::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--color-primary);
}

.progress-step-done {
  background: var(--color-primary);
  opacity: 0.5;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.08), -1px -1px 2px rgba(255,255,255,0.5);
}

/* Stage view (main content) */
.guide-stage-view {
  flex: 1;
  padding: var(--space-md);
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

.guide-stage-full {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.stage-header-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, var(--color-cream-light) 0%, white 100%);
  border-bottom: 1px solid var(--color-border-light);
}

.stage-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.stage-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.btn-compact {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  min-height: 48px;
  min-width: 100px;
  gap: 6px;
}

.btn-compact svg {
  width: 18px;
  height: 18px;
}

.stage-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-cream-light);
  border-bottom: 1px solid var(--color-border-light);
}

.stage-duration-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.stage-duration-display .duration-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.stage-controls-row .stage-duration-big {
  font-size: var(--text-base);
}

.stage-controls-row .time-range-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.stage-controls-row .duration-adjust {
  margin: 0;
  padding: var(--space-xs);
  background: transparent;
}

.stage-controls-row .duration-adjust .btn {
  min-width: 44px;
  min-height: 44px;
}

.stage-controls-row .duration-adjust .current-duration {
  font-size: var(--text-md);
  line-height: 1.2;
}

.stage-smart-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-secondary);
}

.stage-smart-card .smart-chip {
  align-self: flex-start;
  margin-top: 2px;
}

.stage-smart-lines {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  flex: 1;
  min-width: 0;
}

.stage-smart-item {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.35;
  white-space: nowrap;
}

.stage-number-big {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 700;
  flex-shrink: 0;
}

.stage-info {
  flex: 1;
}

.stage-title-big {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

.stage-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.stage-duration-big {
  font-size: var(--text-lg);
  color: var(--color-primary);
  font-weight: 600;
}

.stage-content-full {
  padding: var(--space-lg);
}

.stage-content-full.has-smart-summary {
  padding-top: var(--space-md);
}

.stage-actions-full {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.btn-xl {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  min-height: 56px;
}

/* Starter display in header */
.guide-starter-display {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(47, 95, 85, 0.1);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  flex-shrink: 0;
}

.guide-starter-display .starter-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 2px;
}

.guide-starter-display .starter-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
}

.guide-starter-display .starter-unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Temperature stepper in header */
.guide-temp-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  flex-shrink: 0;
  min-width: fit-content;
  z-index: 20;
}

.guide-temp-stepper .temp-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 2px;
}

.guide-temp-stepper .temp-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.guide-temp-stepper .temp-btn:hover {
  background: var(--color-cream-light);
  border-color: var(--color-primary);
}

.guide-temp-stepper .temp-btn:active {
  background: var(--color-cream);
  transform: scale(0.95);
}

.guide-temp-stepper .temp-value {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary-dark);
  min-width: 20px;
  text-align: center;
}

.guide-temp-stepper .temp-unit-small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-right: 2px;
}


/* Notification toggle in guide header */
.guide-notif-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #9C7B5C;
}

.guide-notif-toggle svg {
  flex-shrink: 0;
}

.guide-notif-toggle.active {
  color: var(--color-primary);
}

.guide-notif-toggle.active svg {
  stroke: var(--color-primary);
}

/* Compact toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: 0.2s;
  border-radius: 18px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(14px);
}

.toggle-switch input:disabled + .toggle-slider {
  background-color: #d6d1c9;
  cursor: not-allowed;
}

.toggle-switch input:disabled + .toggle-slider:before {
  background-color: #f4f1ec;
  box-shadow: none;
}

/* End session button in guide header */
.guide-end-session-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #E8D5D5;
  border: 1px solid #C9A8A8;
  border-radius: var(--radius-md);
  color: #8B3A3A;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.08), -1px -1px 3px rgba(255,255,255,0.7);
}

.guide-end-session-btn:hover {
  background: #DEC8C8;
  border-color: #B89090;
}

.guide-end-session-btn:active {
  background: #D4BABA;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

.guide-end-session-btn svg {
  stroke: #8B3A3A;
  stroke-width: 2.5;
  flex-shrink: 0;
}

/* Completed stage */
.guide-stage-full.stage-completed .stage-number-big {
  background: var(--color-success);
}

.guide-stage-full.stage-completed .stage-number-big::after {
  content: '✓';
}

.guide-stage-full.stage-active {
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* Timer active indicator in stage card */
.guide-stage-full.timer-active {
  border-left: 4px solid var(--color-primary);
}

.stage-timer-active-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, rgba(61, 107, 107, 0.08) 0%, rgba(61, 107, 107, 0.04) 100%);
  border: 1px solid rgba(61, 107, 107, 0.15);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.timer-active-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.timer-active-icon.running svg {
  animation: timerPulse 1.5s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.timer-active-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-primary);
}

.timer-active-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-left: auto;
}

/* Next stage preview */
.next-stage-preview {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-md) var(--space-lg);
}

.next-stage-label {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}

.next-stage-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.next-stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 600;
}

.next-stage-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}

.next-stage-duration {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.next-stage-preview.next-stage-final {
  text-align: center;
}

.next-stage-preview.next-stage-final .next-stage-label {
  font-size: var(--text-sm);
  color: var(--color-success);
  font-weight: 500;
  margin-bottom: 0;
}

/* Sticky mini-timer bar (appears when scrolling, positioned below guide header) */
.sticky-mini-timer {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px 16px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.sticky-mini-timer.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-timer-title {
  font-size: var(--text-sm);
  opacity: 0.9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-timer-time {
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sticky-timer-scroll-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.sticky-timer-scroll-btn:hover {
  background: rgba(255,255,255,0.3);
}

/* Laikmačio kortelė */
.guide-timer-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border-radius: var(--radius-lg);
  text-align: center;
  margin: var(--space-md);
  margin-bottom: 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  z-index: 50;
}

.guide-timer-card.timer-is-collapsed {
  padding: 0;
}

.guide-timer-card:not(.timer-is-collapsed) {
  padding: var(--space-sm) var(--space-md);
}

.timer-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  gap: var(--space-md);
}

.timer-collapsed-title {
  font-size: var(--text-sm);
  opacity: 0.9;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-collapsed-time {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.timer-expand-btn,
.timer-collapse-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.timer-expand-btn:hover,
.timer-collapse-btn:hover {
  background: rgba(255,255,255,0.3);
}

.timer-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.timer-header-row .timer-stage-title {
  margin-bottom: 0;
  flex: 1;
  text-align: left;
}

.timer-stage-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  opacity: 0.95;
}

.timer-display {
  font-size: 48px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  margin: var(--space-sm) 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.timer-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}

.timer-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.5s ease;
  width: 0%;
}

.timer-controls {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.timer-controls .btn {
  min-width: auto;
  min-height: 40px;
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-md);
}

.timer-controls .btn-lg {
  padding: var(--space-sm) var(--space-md);
}

.timer-controls .btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.timer-controls .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

.timer-controls .btn-ghost {
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.timer-controls .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* Timer footer actions - secondary controls */
.timer-footer-actions {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}


.timer-next-event {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.timer-cue-slot {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.timer-cue-card {
  padding: var(--space-md);
  background: #f3f7f5;
  border-radius: var(--radius-md);
  border: 1px solid #d6e6df;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: center;
  color: #0f3b32;
}

.timer-cue-slot.cue-highlight .timer-cue-card {
  animation: cue-flash 0.5s ease-in-out 3;
}

.timer-cue-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #0f3b32;
}

.timer-cue-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.guide-fold-row.fold-overdue {
  background: rgba(255, 207, 64, 0.12);
  border-left: 3px solid #ffb300;
}

.bake-cue-bar {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: #ff9800;
  color: #000;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 600;
  text-align: center;
  animation: cue-pulse 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bake-cue-bar.cue-highlight {
  animation: cue-flash 0.5s ease-in-out 3;
}

@keyframes cue-flash {
  0%, 100% { background: #ff9800; }
  50% { background: #ffcc00; }
}

@keyframes cue-pulse {
  0% { transform: scale(0.95); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.bake-cue-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg);
  background: #fff;
  color: #2f5f55;
  border: 1px solid #d0d7d3;
  border-radius: 9999px;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  min-width: 200px;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bake-cue-action:hover {
  background: #f5f7f6;
}

.bake-cue-action:active {
  transform: scale(0.98);
}

.bake-cue-action svg {
  stroke: currentColor;
}

/* Etapų sąrašas */
.guide-stages-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.guide-stage-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border-left: 4px solid var(--color-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.guide-stage-card.stage-active {
  border-left-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.guide-stage-card.stage-completed {
  border-left-color: #4CAF50;
  opacity: 0.7;
}

.guide-stage-card.stage-highlight {
  animation: pulse-highlight 0.5s ease-in-out 3;
  border-left-color: var(--color-accent);
}

@keyframes pulse-highlight {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 0 4px var(--color-accent), var(--shadow-md); }
}

.guide-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-cream-light);
  cursor: pointer;
}

.guide-stage-header:active {
  background: var(--color-cream);
}

.stage-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.stage-number {
  width: 28px;
  height: 28px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
}

.stage-completed .stage-number {
  background: #4CAF50;
}

.stage-title {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-text);
}

.stage-duration {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.stage-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-xs) var(--space-lg);
  background: rgba(255,255,255,0.3);
}

.parallel-badge {
  font-size: var(--text-xs);
  background: var(--color-secondary);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: var(--space-sm);
}

.guide-stage-content {
  padding: var(--space-lg);
}

.rise-target-note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-primary);
  background: var(--color-cream-light);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  text-align: center;
  border-left: 3px solid var(--color-secondary);
}

.rise-target-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  line-height: 1.2;
}

.rise-target-note strong {
  font-size: var(--text-lg);
}

.rise-label {
  font-weight: 700;
  color: var(--color-text);
}

.rise-strong {
  color: var(--color-primary);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.rise-volume {
  color: var(--color-text-secondary);
  line-height: 1.2;
}

.time-range-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  text-align: center;
}

.duration-adjust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.duration-adjust .btn {
  min-width: 48px;
  min-height: 48px;
  font-size: var(--text-lg);
  font-weight: 700;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.duration-adjust .current-duration {
  font-size: 24px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
}

.duration-adjust .duration-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Ingredientų lentelė vedlyje - didelė ir aiški */
.guide-ingredients {
  margin-bottom: var(--space-lg);
}

.guide-ingredients-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guide-ingredients-group {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
}

.guide-ingredients-group .guide-ingredients-title {
  font-weight: 600;
  color: var(--color-primary);
}

.guide-ingredients-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-ingredient-row {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 16px 0 8px;
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  gap: 12px;
}

.guide-ingredient-row:hover {
  background: var(--color-cream);
}

.guide-ingredient-row:has(.ingredient-check:checked) {
  background: #E8F5E9;
  opacity: 0.8;
}

.guide-ingredient-row:has(.ingredient-check:checked) .guide-ingredient-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.ingredient-check {
  display: none;
}

.ingredient-check-custom {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 0.2s;
  position: relative;
}

/* Touch target 40px */
.ingredient-check-custom::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ingredient-check:checked + .ingredient-check-custom {
  background: #4CAF50;
  border-color: #4CAF50;
}

.ingredient-check:checked + .ingredient-check-custom::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.guide-ingredient-name {
  font-weight: 500;
  flex: 1;
}

.guide-ingredient-amount {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-xl);
  min-width: 80px;
  text-align: right;
}

.ingredient-note {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.guide-stage-note {
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.bake-stages-info {
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-left: 3px solid #FFB74D;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bake-stage-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-xs) 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.bake-stage-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.bake-stage-block:first-child {
  padding-top: 0;
}

.bake-stage-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  row-gap: 4px;
  padding: 2px 0;
}

.bake-stage-row.is-active {
  background: rgba(47, 95, 85, 0.08);
  border-radius: 12px;
  padding: 6px 8px;
}

.bake-stage-note {
  margin-left: calc(20px + var(--space-xs));
  padding-left: var(--space-xs);
  border-left: 2px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.bake-action-row {
  gap: var(--space-xs);
  align-items: center;
  cursor: pointer;
}

.bake-action-row.action-overdue {
  background: rgba(255, 207, 64, 0.12);
  border-left: 3px solid #ffb300;
  padding-left: var(--space-xs);
}

.bake-action-check-input {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  cursor: pointer;
}

.bake-action-label {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 600;
}

.bake-stage-icon {
  font-size: var(--text-sm);
  margin-right: var(--space-xs);
  width: 20px;
  text-align: center;
}

.bake-stage-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bake-stage-details {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.guide-stage-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.guide-stage-actions .btn {
  flex: 1;
  min-height: 48px;
  font-size: var(--text-md);
}

/* Fold checklist */
.guide-folds-section {
  margin-top: var(--space-lg);
}

.guide-folds-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guide-folds-note {
  margin-bottom: var(--space-sm);
}

.guide-folds-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guide-fold-row {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 16px 0 8px;
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  gap: 12px;
}

.guide-fold-row:hover {
  background: var(--color-cream);
}

.guide-fold-row:has(.fold-check:checked) {
  background: #E8F5E9;
  opacity: 0.8;
}

.guide-fold-row:has(.fold-check:checked) .guide-fold-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.fold-check {
  display: none;
}

.fold-check-custom {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  transition: all 0.2s;
  position: relative;
}

.fold-check-custom::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fold-check:checked + .fold-check-custom {
  background: #4CAF50;
  border-color: #4CAF50;
}

.fold-check:checked + .fold-check-custom::after {
  content: '✓';
  color: white;
  font-size: 14px;
  font-weight: bold;
}

.guide-fold-name {
  font-weight: 500;
  flex: 1;
}

.guide-fold-time {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* Mobile optimizations */
@media (max-width: 600px) {
  .timer-display {
    font-size: 48px;
  }
  
  .timer-controls {
    flex-direction: column;
  }
  
  .timer-controls .btn {
    width: 100%;
  }
  
  .guide-ingredient-row {
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    gap: 8px;
  }
  
  .guide-ingredient-name {
    font-size: var(--text-base);
  }
  
  .guide-ingredient-amount {
    font-size: var(--text-lg);
    min-width: 60px;
  }
  
  .guide-ingredients-group {
    padding: var(--space-xs);
  }
  
  .guide-fold-row {
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    gap: 8px;
  }
  
  .guide-fold-name {
    font-size: var(--text-base);
  }
  
  .guide-fold-time {
    font-size: var(--text-sm);
  }
}

/* ===== TOAST NOTIFICATIONS ===== */

.toast-container {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  background: var(--color-card);
  color: var(--color-text);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-weight: 500;
  font-size: var(--text-base);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: auto;
  max-width: 90vw;
  text-align: center;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #4caf50;
}

.toast-error {
  background: #ffebee;
  color: #c62828;
  border-left: 4px solid #f44336;
}

.toast-info {
  background: #e3f2fd;
  color: #1565c0;
  border-left: 4px solid #2196f3;
}

/* ===== IMAGE LOADING OVERLAY ===== */

.image-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.image-loading-spinner {
  font-size: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== STARTER TRACKING ===== */

.starter-subview {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.starters-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.starter-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: visible;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
  padding: 14px;
  box-shadow: var(--shadow-neu);
  position: relative;
}

.starter-card:hover {
  box-shadow: var(--shadow-neu-lg);
}

.starter-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-neu-sm);
}

.starter-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.starter-card-image {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-sm);
}

.starter-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.starter-card-placeholder {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.starter-card-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.6;
}

.starter-card-info {
  flex: 1;
  min-width: 0;
}

.starter-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.starter-card-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.starter-card-meta {
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 2px;
}

.starter-card-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
}

.state-info {
  flex: 1;
  min-width: 0;
}

.state-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.state-label {
  font-weight: 600;
  color: var(--color-text);
}

.state-time {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-left: auto;
}

.state-progress-bg {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.state-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.state-progress-bar.post-peak {
  animation: pulse-bar 1.5s ease-in-out infinite;
}

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.state-progress-mini {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
  font-weight: 500;
}

.state-detail {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.state-detail-label {
  color: var(--color-text-light);
}

.state-detail-ready {
  color: var(--color-primary);
  font-weight: 500;
}

.starter-card-state-empty .state-label,
.starter-card-state-dormant .state-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.state-toggle {
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  padding: 8px;
  margin: -8px;
  position: relative;
  z-index: 10;
}

.state-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1.5px solid var(--color-cream);
  background: var(--color-card);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.state-toggle-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.state-toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.state-toggle-btn.active svg {
  stroke: white;
}

.state-toggle-btn svg {
  stroke: currentColor;
  width: 14px;
  height: 14px;
}

/* Starter card status row with toggle */
.starter-card-status-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 14px 10px 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.starter-card-status-row .starter-card-state {
  flex: 1;
  border-radius: 0;
  border-top: none;
  margin: 0;
  padding: 0;
}

.starter-dormant-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  margin-left: 8px;
}

.starter-dormant-toggle:hover {
  background: var(--color-cream);
  color: var(--color-text);
}

.starter-dormant-toggle.is-dormant {
  background: rgba(76, 175, 80, 0.1);
  color: var(--color-success);
  border-radius: var(--radius-sm);
}

.starter-dormant-toggle.is-dormant:hover {
  background: rgba(76, 175, 80, 0.2);
}

.starter-dormant-toggle svg {
  flex-shrink: 0;
}

/* Starter card feeding recommendation */
.starter-card-recommendation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 14px 14px 14px;
  background: linear-gradient(135deg, rgba(232, 245, 233, 0.7) 0%, rgba(241, 248, 233, 0.7) 100%);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text);
}

.starter-card-recommendation svg {
  flex-shrink: 0;
  color: var(--color-primary);
  opacity: 0.8;
}

.starter-card-recommendation span {
  line-height: 1.3;
}

.starter-card-recommendation.recommendation-urgent {
  background: linear-gradient(135deg, rgba(255, 243, 224, 0.9) 0%, rgba(255, 236, 179, 0.9) 100%);
}

.starter-card-recommendation.recommendation-urgent svg {
  color: #E65100;
}

/* Starter detail recommendation */
.starter-detail-recommendation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: var(--space-md) 0;
  background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.starter-detail-recommendation svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.starter-detail-recommendation span {
  line-height: 1.4;
}

.starter-detail-recommendation.recommendation-urgent {
  background: linear-gradient(135deg, #FFF3E0 0%, #FFECB3 100%);
  border: 1px solid #FFB74D;
}

.starter-detail-recommendation.recommendation-urgent svg {
  color: #E65100;
}

/* Starter Tips Panel */
.starter-tips-panel {
  margin-top: var(--space-lg);
  background: linear-gradient(135deg, #faf8f5 0%, #f5f2ed 100%);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.starter-tips-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all 0.15s ease;
  list-style: none;
}

.starter-tips-toggle::-webkit-details-marker {
  display: none;
}

.starter-tips-toggle::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--color-text-muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: var(--space-xs);
  transition: transform 0.2s ease;
}

.starter-tips-panel[open] .starter-tips-toggle::before {
  transform: rotate(90deg);
}

.starter-tips-toggle:hover {
  color: var(--color-text);
  background: rgba(0,0,0,0.02);
}

.starter-tips-toggle svg {
  color: var(--color-primary);
  opacity: 0.7;
}

.starter-tips-content {
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.starter-tips-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.starter-tips-list li {
  position: relative;
  padding: var(--space-sm) 0;
  padding-left: var(--space-md);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
}

.starter-tips-list li:last-child {
  border-bottom: none;
}

.starter-tips-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: var(--space-sm);
  color: var(--color-primary);
  font-weight: bold;
  font-size: var(--text-md);
}

.starter-tips-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

.starter-tips-list li p {
  margin: var(--space-xs) 0 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* Starter Photo Upload */
.starter-photo-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.starter-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-cream-light);
}

.starter-photo-preview:empty {
  display: none;
}

.starter-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.starter-photo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Fermentation Progress Bar */
.fermentation-progress {
  padding: 0 12px 12px 12px;
  background: var(--color-cream-light);
}

.fermentation-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.fermentation-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease-out, background 0.5s ease-out;
  position: relative;
}

/* Stage-specific colors - using design palette with visible gradients */
.fermentation-fed .fermentation-fill {
  background: linear-gradient(90deg, #B8D4E3 0%, #5B8A8A 50%, #3D6B6B 100%);
}

.fermentation-rising .fermentation-fill {
  background: linear-gradient(90deg, #5B8A8A 0%, #3D6B6B 50%, #2C5454 100%);
}

.fermentation-near-peak .fermentation-fill {
  background: linear-gradient(90deg, #3D6B6B 0%, #D4A574 50%, #E8A838 100%);
}

.fermentation-at-peak .fermentation-fill {
  background: linear-gradient(90deg, #7BA05B 0%, #5B8A3D 50%, #4A7A2E 100%);
  animation: peak-pulse 1.5s ease-in-out infinite;
}

.fermentation-falling .fermentation-fill {
  background: linear-gradient(90deg, #E8A838 0%, #D4A574 50%, #D97373 100%);
}

.fermentation-needs-feeding .fermentation-fill {
  background: linear-gradient(90deg, #D97373 0%, #C25555 50%, #A94444 100%);
}

/* Fallen state - post peak, not usable for baking */
.fermentation-fallen .fermentation-fill {
  background: linear-gradient(90deg, #C9A066 0%, #B8956B 50%, #9E7F5A 100%);
}

/* Stale state - very old, needs feeding urgently */
.fermentation-stale .fermentation-fill {
  background: linear-gradient(90deg, #D97373 0%, #C25555 50%, #A94444 100%);
  animation: stale-pulse 2s ease-in-out infinite;
}

@keyframes stale-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Dormant state - sleeping/fridge */
.fermentation-dormant .fermentation-track {
  background: #E8E8E8;
}

.fermentation-dormant .fermentation-fill {
  background: linear-gradient(90deg, #9CA3AF 0%, #9CA3AF 100%);
  width: 100% !important;
  opacity: 0.3;
}

/* Post-peak state - fill reverses from right */
.fermentation-progress.post-peak .fermentation-track {
  position: relative;
}

.fermentation-progress.post-peak .fermentation-fill {
  position: absolute;
  right: 0;
  left: auto;
  border-radius: 0 3px 3px 0;
}

.peak-marker {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--color-text);
  opacity: 0.25;
  transform: translateX(-50%);
}

@keyframes peak-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Detail view navigation */
.starter-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-cream);
}

.btn-back {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.btn-back:hover {
  background: var(--color-cream-light);
}

.btn-back .back-arrow {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

.btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-icon:hover {
  background: var(--color-cream);
}

.btn-icon-danger {
  color: #c53030;
}

.btn-icon-danger:hover {
  background: #fee;
  color: #9b2c2c;
}

.starter-detail-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Starter hero section */
.starter-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0 var(--space-md) 0;
}

.starter-hero-text {
  flex: 1;
  min-width: 0;
}

.starter-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.starter-title-row h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.starter-hero-text h2 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-xl);
}

.starter-hero-meta {
  color: var(--color-text-muted);
  margin: 0;
}

/* Inline action buttons (next to title) */
.inline-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.inline-action-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-neu-sm);
}

.inline-action-btn:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-neu);
}

.inline-action-btn:active {
  box-shadow: var(--shadow-inset);
}

.inline-action-btn-danger:hover {
  color: var(--color-danger);
}

.starter-hero-visual {
  flex-shrink: 0;
}

.starter-hero-icon-svg {
  color: var(--color-text-muted);
}

.starter-hero-visual img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.starter-hero-visual .image-frame {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: white;
  border: 2px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.starter-hero-visual .image-frame:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.starter-hero-visual .image-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Starter Status Section */
.starter-status-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-card);
}

.starter-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.starter-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: white;
  background-color: #888;
}

.starter-progress-container {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.starter-progress-bar-bg {
  flex: 1;
  height: 10px;
  background: linear-gradient(90deg,
    #F5D76E 0%,
    #87CEAB 25%,
    #5B8A8A 45%,
    #3D6B6B 55%,
    #D4A574 75%,
    #D97373 100%
  );
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
  position: relative;
}

.starter-progress-bar-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  border-radius: 5px;
  pointer-events: none;
}

.starter-progress-bar {
  height: 100%;
  background: transparent;
  border-radius: 5px;
  transition: width 0.3s ease;
  position: relative;
}

.starter-progress-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 14px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.starter-progress-bar.post-peak::after {
  animation: pulse-indicator 1.5s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%, 100% { 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-50%) scale(1);
  }
  50% { 
    box-shadow: 0 1px 8px rgba(217, 115, 115, 0.6);
    transform: translateY(-50%) scale(1.1);
  }
}

.starter-progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: right;
}

.starter-status-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.starter-peak-info {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 500;
  margin: 0;
}

.starter-baking-window {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  padding: 10px 14px;
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-text-muted);
}

.starter-baking-window.baking-ready {
  background: rgba(47, 95, 85, 0.1);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

.starter-feeding-recommendation {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  padding: 10px 14px;
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  border-left: 3px solid #F59E0B;
}

.starter-feeding-recommendation.feeding-urgent {
  background: rgba(217, 115, 115, 0.1);
  border-left-color: #D97373;
  color: #D97373;
  font-weight: 500;
}

/* Starter tabs - segmented control */
.starter-tabs {
  display: flex;
  gap: 6px;
  background: rgba(47, 95, 85, 0.08);
  padding: 6px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(47, 95, 85, 0.12);
}

.starter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 14px var(--space-lg);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 540px) {
  .starter-tabs {
    flex-wrap: wrap;
  }
  .starter-tab {
    flex: 1 1 calc(50% - 6px);
    padding: 10px 12px;
    gap: 6px;
  }
}

.starter-tab svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.starter-tab:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.6);
}

.starter-tab.active {
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(47, 95, 85, 0.3);
}

.starter-tab-content {
  animation: fadeIn 0.2s ease;
}

/* Starter Statistics UI */
.starter-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.stats-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.stats-summary-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.stats-summary-value {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stats-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stats-summary-grid + .stats-section {
  margin-top: var(--space-md);
}

.stats-section + .stats-section {
  margin-top: var(--space-md);
}

.stats-summary-line {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.starter-stats .stats-section-header h4 {
  margin: 0 0 8px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.starter-stats .stats-section-header .muted {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.stats-groups-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stats-group-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: white;
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stats-group-row:hover {
  border-color: var(--color-primary-light);
}

.stats-group-row.active {
  border-color: var(--color-primary);
  box-shadow: none;
}

.stats-group-main {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.stats-group-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.stats-trend-chart {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-surface);
  min-height: 110px;
  width: 100%;
}

.stats-trend-chart .muted {
  margin: 8px 0;
  text-align: center;
}

.stats-trend-svg {
  width: 100%;
  height: 110px;
  display: block;
  overflow: hidden;
}

.stats-trend-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
}

.stats-trend-point {
  fill: var(--color-primary);
  pointer-events: none;
}

.stats-trend-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
}

.stats-trend-point-label {
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text);
  min-height: 1em;
}

.stats-trend-point-label.is-hint {
  color: var(--color-text-muted);
}

.stats-trend-grid {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.stats-trend-axis {
  stroke: var(--color-border);
  stroke-width: 1;
}

.stats-trend-text {
  font-size: 11px;
  fill: var(--color-text-secondary);
}

/* Starter Reminders UI */
.reminder-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.reminder-toggle-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.reminder-type-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.reminder-type-text strong {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 4px;
}

.reminder-type-text .muted {
  font-size: var(--text-sm);
  margin: 0;
}

.reminder-settings-disabled {
  opacity: 0.6;
}

.reminder-type-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.reminder-type-option {
  display: block;
  cursor: pointer;
}

.reminder-type-option input {
  display: none;
}

.reminder-type-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.reminder-type-option input:checked + .reminder-type-card {
  border-color: var(--color-primary);
  background: rgba(47, 95, 85, 0.05);
}

.reminder-type-card strong {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 4px;
}

.reminder-type-card .muted {
  font-size: var(--text-sm);
  margin: 0;
}

.reminder-settings-section {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.reminder-settings-section h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--color-text);
}

.reminder-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.reminder-checkbox:last-of-type {
  border-bottom: none;
}

.reminder-checkbox input[type="checkbox"],
.reminder-checkbox input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.reminder-checkbox span {
  font-size: var(--text-base);
  color: var(--color-text);
}

.reminder-sub-option {
  margin-left: 28px;
  padding: 8px 0;
}

.reminder-sub-option label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 6px;
}

.reminder-sub-option input {
  width: 100px;
}

.custom-reminder-type-selector {
  margin-bottom: 12px;
}

.reminder-time-settings,
.reminder-interval-settings {
  display: flex;
  gap: 12px;
}

.reminder-time-settings .form-group,
.reminder-interval-settings .form-group {
  flex: 1;
  margin-bottom: 0;
}

.reminder-time-settings input,
.reminder-interval-settings input {
  width: 100%;
  background: #e8e4de;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: var(--text-base);
  color: var(--color-text);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.08),
              inset -2px -2px 5px rgba(255, 255, 255, 0.6);
  -webkit-appearance: none;
  appearance: none;
}

.reminder-time-settings input:focus,
.reminder-interval-settings input:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
              inset -2px -2px 5px rgba(255, 255, 255, 0.7),
              0 0 0 2px rgba(47, 95, 85, 0.2);
}

.reminder-time-settings input[type="time"],
.reminder-interval-settings input[type="time"] {
  min-height: 44px;
}

/* Toast message */
.toast-message {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 14000;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 1.7s forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* Calculator ratio row */
.calc-ratio-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.calc-ratio-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.calc-ratio-row input[type="number"] {
  text-align: center;
  padding: 12px 8px;
  height: 48px;
}

@media (max-width: 520px) {
  .calc-ratio-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .calc-ratio-row .form-group {
    flex: 1 1 45%;
  }
  .calc-ratio-row .ratio-separator {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    padding-bottom: 4px;
  }
}

.ratio-separator {
  font-size: 20px;
  font-weight: 400;
  color: #8D8D8D;
  padding-bottom: 12px;
  line-height: 1;
}

/* Feeding result card - unified results display */
.feeding-result {
  background: #F4F5F2;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.feeding-result-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  text-align: center;
}

.feeding-result-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.feeding-result-item .feeding-result-value {
  font-size: 24px;
  font-weight: 600;
  color: #1E1E1E;
  line-height: 1.2;
}

.feeding-result-item .feeding-result-label {
  font-size: 14px;
  color: #6A6A6A;
}

.feeding-result-peak {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.feeding-result-peak:first-of-type {
  margin-top: 12px;
  padding-top: 12px;
}

.peak-label {
  font-size: 13px;
  color: #6A6A6A;
  display: flex;
  align-items: center;
}

.peak-label svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.peak-value {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
}

.feeding-result-peak-highlight {
  background: rgba(47, 95, 85, 0.06);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 10px;
  border-top: none;
}

.feeding-result-peak-highlight .peak-value {
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
}

.feeding-result-peak-muted {
  opacity: 0.7;
  margin-top: 6px;
  padding-top: 6px;
  border-top: none;
}

.feeding-result-peak-muted .peak-value {
  font-weight: 500;
  font-size: 13px;
}

.summary-row-highlight {
  background: rgba(47, 95, 85, 0.06);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 4px 0;
}

.summary-row-highlight strong {
  color: var(--color-primary);
  font-size: 14px;
}

/* Starter info content */
#starterInfoContent {
  line-height: 1.5;
}

#starterInfoContent p {
  margin: 0 0 6px 0;
}

#starterInfoContent .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

#starterInfoContent .info-row + .info-row {
  border-top: 1px dashed var(--color-cream);
}

#starterInfoContent .info-label {
  color: var(--color-text-muted);
  font-size: 13px;
}

#starterInfoContent .info-value {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

#starterInfoContent .info-row-editable {
  align-items: center;
}

#starterInfoContent .info-value-editable {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 500;
}

/* Starter Status Toggle */
#starterInfoContent .info-row-status {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.peak-stats-section {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(47, 95, 85, 0.04);
}

.peak-stats-section .info-row {
  border-top: none;
  padding: 0;
}

.peak-stats-section .info-hint {
  margin-top: 4px;
  font-size: 12px;
}

.starter-status-toggle {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
}

.status-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 2px solid var(--color-cream);
  background: var(--color-card);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-text);
}

.status-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.status-btn.active svg {
  stroke: white;
}

.status-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.starter-status-hint {
  line-height: 1.4;
}

.btn-icon-subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  padding: 0;
}

.btn-icon-subtle:hover {
  background: var(--color-cream-light);
  color: var(--color-primary);
}

.btn-icon-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  padding: 0;
  margin-left: 8px;
  vertical-align: middle;
}

.btn-icon-small:hover {
  background: var(--color-cream-light);
  color: var(--color-primary);
}

.info-age-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  margin: var(--space-md) 0;
  background: var(--color-cream-light);
  border-radius: var(--radius-lg);
  text-align: center;
}

.info-age-badge .age-icon {
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.info-age-badge .age-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.info-age-badge .age-milestone {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 4px 12px;
  background: var(--color-primary);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
}

.info-row-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-cream);
}

.status-toggle-container {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-xs);
}

.status-toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 2px solid var(--color-cream);
  background: var(--color-card);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.status-toggle-btn:hover {
  border-color: var(--color-primary-light);
  color: var(--color-text);
}

.status-toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.status-toggle-btn.active svg {
  stroke: white;
}

.status-toggle-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.info-hint {
  font-size: 13px;
  margin: var(--space-xs) 0 var(--space-md) 0;
}

.info-section {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-cream);
}

.info-section .info-label {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
}

.info-notes {
  padding: var(--space-sm);
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.feeding-calculator {
  background: linear-gradient(135deg, var(--color-cream-light) 0%, #f0ebe3 100%);
  border: 1px solid var(--color-cream);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.feeding-calculator h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--text-base);
}

.feeding-result-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-cream);
}

.feeding-result-row:last-child {
  border-bottom: none;
}

.feeding-result-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.feeding-result-value {
  font-weight: 600;
  font-size: var(--text-base);
}

.feeding-result-highlight {
  background: var(--color-cream-light);
  margin: var(--space-sm) calc(-1 * var(--space-md));
  margin-bottom: calc(-1 * var(--space-md));
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.feeding-result-highlight .feeding-result-value {
  color: var(--color-primary);
}

.feeding-log-section {
  margin-top: var(--space-lg);
}

.feeding-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.feeding-log-header h4 {
  margin: 0;
  font-size: var(--text-base);
}

/* Compact primary button for feeding log */
.feeding-log-header .btn {
  padding: 10px var(--space-lg);
  min-height: 44px;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}

.feeding-form {
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.feeding-log-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.feeding-log-item {
  background: white;
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.feeding-log-main {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.feeding-log-date {
  display: flex;
  flex-direction: column;
  min-width: 60px;
}

.feeding-date {
  font-weight: 600;
  font-size: var(--text-sm);
}

.feeding-time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.feeding-log-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
}

.feeding-ratio {
  background: var(--color-cream-light);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
}

.feeding-temp {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.feeding-status {
  font-size: 16px;
}

.feeding-log-actions {
  display: flex;
  gap: var(--space-xs);
}

.feeding-log-notes {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--color-cream);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.feeding-history-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 3px;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  gap: 12px;
  flex-wrap: wrap;
}

.feeding-history-item:last-child {
  margin-bottom: 0;
}

.feeding-main-col {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.feeding-date-col {
  display: flex;
  flex-direction: column;
  min-width: 50px;
  margin-right: 16px;
}

.feeding-date-day {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.feeding-date-time {
  font-size: 12px;
  color: var(--color-text-muted);
}

.feeding-info-col {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.feeding-ratio-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  min-width: 45px;
}

.feeding-weight-badge {
  background: var(--color-primary);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.feeding-temp-text {
  font-size: 13px;
  color: var(--color-text-muted);
}

.feeding-info-icon {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  cursor: help;
}

.feeding-info-icon svg {
  width: 16px;
  height: 16px;
}

.feeding-actions-col {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.feeding-action-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.feeding-action-btn:hover {
  background: var(--color-cream);
}

.feeding-action-btn svg {
  width: 18px;
  height: 18px;
}

.feeding-action-delete {
  color: var(--color-text-muted);
}

.feeding-action-delete:hover {
  color: #D97373;
  background: rgba(217, 115, 115, 0.1);
}

.peak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  background: var(--color-cream-dark);
  color: var(--color-text);
}

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

.peak-chip--active {
  background: rgba(47, 95, 85, 0.12);
  color: var(--color-primary);
  font-weight: 600;
}

.peak-chip--inactive {
  background: #ECEFEA;
  color: var(--color-text-muted);
}

.peak-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.peak-chip--inactive .peak-chip-dot {
  background: #C4CBC6;
}

.peak-chip-label {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .feeding-actions-col {
    width: 100%;
    margin-left: 0;
  }
}

.empty-state-text {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-muted);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-text-muted);
}

.empty-state-actions {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 16px;
}

.empty-state-actions .btn {
  width: min(240px, 100%);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.empty-state-small {
  text-align: center;
  padding: var(--space-lg);
}

.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
}

/* ===== MODAL OVERLAY (Centered Style) ===== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12000; /* Above access-code-screen (10001) */
  padding: var(--space-lg);
  animation: fadeInOverlay 0.2s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Ensure legal modals appear above cookie banner */
#privacyModal.modal-overlay,
#termsModal.modal-overlay,
#cookiesModal.modal-overlay {
  z-index: 16000;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-sheet,
.modal-panel {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  animation: modalFadeIn 0.2s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-cream);
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.reauth-panel .reauth-subtitle {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

.reauth-email {
  margin: 0 0 var(--space-md);
  font-weight: 600;
  word-break: break-word;
}

.reauth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.reauth-password-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.btn-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream-dark);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  color: var(--color-text-light);
  cursor: pointer;
  transition: background 0.2s;
}

.btn-close::before {
  content: "×";
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.btn-close:hover {
  background: var(--color-cream);
  color: var(--color-text);
}

.modal-body {
  padding: var(--space-lg);
}

.modal-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-cream);
  position: sticky;
  bottom: 0;
  background: white;
}

.modal-footer .btn-block,
.modal-footer .btn-primary {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.modal-footer .btn-primary svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#bakeSummaryModal .modal-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#bakeSummaryModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#bakeSummaryModal .modal-footer {
  position: static;
}

.btn-block {
  width: 100%;
}

@media (min-width: 768px) {
  .modal-sheet,
  .modal-panel {
    max-height: 80vh;
  }
}

.modal-sheet-tall {
  max-height: 90vh;
}

.modal-lg {
  max-width: 500px;
}

/* ===== PROFILE MODAL ===== */
.profile-modal-sheet {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 340px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
  margin: var(--space-md);
}

.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}

.profile-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
}

.profile-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.profile-close-btn:hover {
  background: var(--color-cream);
  color: var(--color-text);
}

.profile-modal-body {
  padding: 12px 14px;
}

.profile-user-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.profile-user-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.profile-user-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.profile-premium-badge {
  background: rgba(47, 95, 85, 0.12);
  color: var(--color-primary);
  font-weight: 600;
}

.profile-subscription-card {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-cream-light);
  text-align: left;
}

.profile-subscription-header {
  margin-bottom: var(--space-xs);
}

.profile-subscription-status {
  font-weight: 700;
  color: var(--color-text);
}

.profile-subscription-note {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.profile-subscription-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.profile-subscription-actions {
  display: block;
}

.profile-subscription-label {
  margin: 0 0 var(--space-sm);
  font-weight: 600;
  color: var(--color-text);
}

.profile-subscription-plans {
  margin-bottom: var(--space-sm);
}

.profile-subscription-plans .paywall-plan-card {
  padding: var(--space-sm);
}

.profile-logout-row {
  margin-top: 4px;
}

.profile-user-email {
  font-size: 14px;
  color: var(--color-text);
  font-weight: 700;
}

.profile-logout-btn {
  background: #e76f00 !important;
  color: white !important;
  padding-left: 34px;
}

.profile-logout-btn:hover {
  background: #d76300 !important;
}

.profile-logout-btn:active {
  box-shadow: var(--shadow-inset);
}

/* Sync section */
.profile-sync-section {
  text-align: center;
  padding-bottom: 8px;
}

.profile-id-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}

.profile-id-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.profile-id-code {
  font-size: 16px;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 1.5px;
  color: var(--color-primary);
  transition: color 0.2s;
}

.profile-id-code:hover {
  color: var(--color-sage);
}

.profile-copy-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: var(--color-cream);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.profile-copy-btn:hover {
  background: var(--color-primary);
  color: white;
}

.profile-copy-btn.copied {
  background: var(--color-success);
  color: white;
}

.profile-id-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: #FFF8E7;
  border: 1px solid #E5D9C3;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.profile-id-note svg {
  flex-shrink: 0;
  color: #B8860B;
  margin-top: 1px;
  width: 14px;
  height: 14px;
}

.profile-id-note span {
  font-size: 11px;
  line-height: 1.4;
  color: #7A6A3D;
}

.profile-sync-label {
  font-size: 11px;
  color: #6A6A6A;
  margin-top: 8px;
  margin-bottom: 2px;
  text-align: left;
}

.profile-sync-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-success);
  margin-bottom: 10px;
}

.profile-sync-status.warning {
  color: var(--color-warning);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-sync-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  min-height: 36px;
  background: var(--color-bg);
  border: 1.5px solid #3B5C52;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: #3B5C52;
  cursor: pointer;
  transition: all 0.15s;
}

.profile-sync-btn svg {
  flex-shrink: 0;
  stroke-width: 2.5;
  width: 16px;
  height: 16px;
}

.profile-sync-btn:hover {
  background: #3B5C52;
  color: white;
}

.profile-sync-btn:active {
  transform: scale(0.98);
}

.profile-sync-btn.active {
  background: var(--color-cream);
}

.profile-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-neu-sm);
}

.profile-action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.profile-action-btn.active {
  background: var(--color-cream);
  border-color: var(--color-primary);
}

.profile-sync-panel {
  margin-top: 10px;
  padding: 10px;
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  text-align: left;
}

.profile-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.profile-code-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-sizing: border-box;
  background: var(--color-bg);
}

.profile-code-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

.profile-error {
  color: var(--color-danger);
  font-size: 11px;
  margin-top: 4px;
  display: none;
}

.profile-save-btn {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}

.profile-save-btn:hover {
  background: var(--color-primary-dark);
}

.profile-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Profile sections */
.profile-section {
  margin-bottom: 0;
}

.profile-section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 6px 0;
}

.profile-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 10px 0;
}

.profile-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--color-cream-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.profile-toggle-group .profile-menu-item {
  background: var(--color-cream-light);
  box-shadow: none;
  padding: 8px 10px;
  min-height: 32px;
  font-size: 13px;
  border-radius: 0;
}

.profile-toggle-group .profile-menu-item + .profile-menu-item {
  border-top: 1px solid var(--color-border-light);
}

.profile-toggle-group .profile-menu-item:hover {
  background: var(--color-cream);
}

.profile-toggle-group .profile-menu-item:active {
  background: #E8E4DE;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  min-height: 32px;
  background: var(--color-cream-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.profile-menu-item:hover {
  background: var(--color-cream);
  color: var(--color-text);
}

.profile-menu-item:active {
  background: #E8E4DE;
}

.profile-menu-item svg:not(.profile-toggle-icon) {
  color: var(--color-text-muted);
  flex-shrink: 0;
  stroke-width: 2;
  width: 16px;
  height: 16px;
}

.profile-menu-item span {
  flex: 1;
}

.profile-menu-item--feedback {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
}

.profile-menu-item--feedback svg {
  color: var(--color-primary-dark);
}

.profile-menu-item--feedback:hover {
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary-dark);
}

.profile-menu-item--support {
  background: var(--color-accent-light);
  color: var(--color-primary-dark);
}

.profile-menu-item--support svg {
  color: var(--color-accent-dark);
}

.profile-menu-item--support:hover {
  background: var(--color-accent-light);
  color: var(--color-primary-dark);
}

.profile-lang-buttons {
  display: flex;
  gap: 8px;
}

.profile-lang-btn {
  padding: 8px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.profile-lang-btn:hover {
  background: #f4f8f5;
}

.profile-lang-btn.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-neu-sm);
}

.profile-toggle-item {
  cursor: default;
}

.profile-toggle-item:hover {
  box-shadow: var(--shadow-neu-sm);
  color: var(--color-text);
}

.profile-toggle-compact {
  padding: 8px 10px;
  gap: 8px;
}

.profile-toggle-compact:hover {
  color: var(--color-text);
}

.profile-toggle-icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  flex-shrink: 0;
  color: var(--color-text-light);
  fill: transparent;
  transition: color 0.15s, fill 0.15s, opacity 0.15s;
}

.profile-toggle-item.is-enabled .profile-toggle-icon {
  color: var(--color-primary);
  fill: var(--color-primary);
}

.profile-toggle-item.is-pending .profile-toggle-icon {
  color: var(--color-primary);
  fill: transparent;
}

.profile-toggle-item.is-disabled .profile-toggle-icon {
  color: var(--color-text-light);
  fill: transparent;
  opacity: 0.7;
}

.profile-toggle-item.is-unsupported {
  opacity: 0.5;
}

.profile-toggle-subitem {
  padding-left: 18px;
}

.profile-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.profile-toggle-label {
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-text);
}

.profile-toggle-hint {
  font-size: 11px;
  color: var(--color-text-light);
}

.profile-version {
  text-align: center;
  font-size: 10px;
  color: #8D8D8D;
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 14px;
}

/* ===== FEEDBACK MODAL ===== */
.feedback-modal-sheet {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin: var(--space-md);
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 1;
}

.feedback-modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.feedback-modal-body {
  padding: var(--space-md);
}

.feedback-question {
  margin-bottom: var(--space-lg);
}

.feedback-label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.feedback-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm) 0;
}

.feedback-premium-desc {
  font-style: italic;
  line-height: 1.4;
}

.feedback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-chip {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.feedback-chip input {
  display: none;
}

.feedback-chip span {
  padding: 8px 14px;
  background: var(--color-cream-light);
  border: 2px solid transparent;
  border-radius: 20px;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: all 0.15s;
}

.feedback-chip:hover span {
  background: var(--color-cream);
}

.feedback-chip input:checked + span {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.feedback-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feedback-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.feedback-radio input {
  display: none;
}

.feedback-radio span {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--color-cream-light);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: all 0.15s;
}

.feedback-radio:hover span {
  background: var(--color-cream);
}

.feedback-radio input:checked + span {
  background: white;
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

.feedback-stars {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: var(--space-sm) 0;
}

.feedback-star {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--color-cream-light);
  border-radius: 50%;
  font-size: 24px;
  color: #D0C8BC;
  cursor: pointer;
  transition: all 0.15s;
}

.feedback-star:hover {
  background: var(--color-cream);
  transform: scale(1.1);
}

.feedback-star.active {
  background: #FFD700;
  color: white;
}

.feedback-other-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.feedback-chip-other {
  flex-shrink: 0;
}

.feedback-text-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-cream-light);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: all 0.15s;
}

.feedback-text-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: white;
}

.feedback-text-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-cream-light);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-text);
  resize: vertical;
  min-height: 80px;
  transition: all 0.15s;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: white;
}

.feedback-textarea::placeholder {
  color: var(--color-text-tertiary);
}

.feedback-submit-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: var(--space-md);
}

.feedback-submit-btn:hover {
  background: var(--color-sage);
}

.feedback-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.feedback-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14000;
  animation: slideUp 0.3s ease;
}

.feedback-toast-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  font-weight: 500;
}

.feedback-toast.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Navigation list for legal items */
.profile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.profile-menu + .profile-nav-list {
  margin-top: 6px;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  min-height: 32px;
  background: var(--color-cream-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.profile-nav-item:hover {
  background: var(--color-cream);
}

.profile-nav-item:active {
  background: #E8E4DE;
}

.profile-nav-item svg:first-child {
  color: var(--color-text-muted);
  flex-shrink: 0;
  stroke-width: 2;
  width: 16px;
  height: 16px;
}

.profile-nav-item span {
  flex: 1;
}

.profile-nav-item .nav-chevron {
  color: #BBBBBB;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

/* Legacy styles kept for backward compat */
.btn-primary-sm {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-sage);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  margin-top: var(--space-sm);
  transition: background 0.2s;
}

.btn-primary-sm:hover {
  background: var(--color-primary);
}

.btn-primary-sm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.menu-chevron {
  color: var(--color-text-light);
}

/* Feeding calculator in modal */
.feeding-calc-section {
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.feeding-calc-header {
  margin-bottom: var(--space-sm);
}

.feeding-calc-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.feeding-ratio-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.ratio-input-group {
  flex: 1;
}

.ratio-input-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #4D4D4D;
  margin-bottom: 6px;
}

.ratio-input-group input {
  width: 100%;
  text-align: center;
  padding: 12px 8px;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
}

.ratio-colon {
  font-size: 20px;
  font-weight: 400;
  color: #8D8D8D;
  padding-bottom: 12px;
  line-height: 1;
}

.feeding-calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.calc-result-item {
  background: white;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  text-align: center;
}

.calc-result-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

.calc-result-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.feeding-calc-summary {
  background: white;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.summary-row svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
}

.summary-row strong {
  font-size: 14px;
  color: var(--color-primary);
}

.summary-row-muted {
  border-top: 1px dashed var(--color-cream);
  font-size: 12px;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.summary-row-muted svg {
  width: 14px;
  height: 14px;
}

/* Journal entry with total amount */
.feeding-total-badge {
  background: var(--color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Starter age display */
.starter-age-display {
  background: linear-gradient(135deg, var(--color-cream-light) 0%, var(--color-cream) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  text-align: center;
  border: 1px solid var(--color-cream);
}

.starter-age-display .age-icon {
  display: block;
  font-size: 32px;
  margin-bottom: var(--space-xs);
}

.starter-age-display .age-text {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.starter-age-display .age-milestone {
  display: inline-block;
  background: var(--color-primary);
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ========== RECIPE EDITOR SECTIONS ========== */
.editor-section {
  background: white;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

#editorSectionExtra {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.editor-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.editor-section-header:hover {
  background: var(--color-cream-light);
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.section-title-row h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.section-toggle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition: transform 0.2s;
}

.editor-section-content {
  padding: 0 var(--space-md) var(--space-md);
}

.editor-section:not(.editor-section-open) .editor-section-content {
  display: none !important;
}

/* Subsection labels */
.subsection-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.main-dough-section {
  margin-top: var(--space-md);
}

/* Large input for recipe name */
.input-lg {
  font-size: var(--text-lg);
  padding: var(--space-md);
}

/* Radio chips for dough type */
.radio-group-inline {
  display: flex;
  gap: var(--space-sm);
}

.radio-chip {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--color-cream-light);
  color: var(--color-text-secondary);
}

.radio-chip:hover {
  border-color: var(--color-primary-light);
  background: var(--color-cream);
}

.radio-chip input[type="radio"] {
  display: none;
}

.radio-chip input[type="radio"]:checked + span {
  color: white;
}

.radio-chip:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.radio-chip:has(input[type="radio"]:checked) svg {
  stroke: white;
}

.radio-chip-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
}

/* Radio chips container (used in modals) */
.radio-chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Label hint for selection fields */
.label-hint {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.form-label-sm {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.main-dough-section.has-error .ingredient-rows {
  outline: 1px solid var(--color-danger);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.radio-group-inline.has-error .radio-chip {
  border-color: var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
  display: none;
}

.field-error.show {
  display: block;
}

/* Image upload zone - compact */
.image-upload-zone {
  position: relative;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  transition: all 0.2s;
  cursor: pointer;
}

.image-upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-cream-light);
}

.image-upload-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}

.upload-icon {
  width: 20px;
  height: 20px;
  opacity: 0.6;
  flex-shrink: 0;
}

.upload-text {
  font-size: var(--text-sm);
}

/* Form row compact */
.form-row-compact {
  display: flex;
  gap: var(--space-md);
}

.flex-1 {
  flex: 1;
}

/* Import section in editor */
.import-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

/* Editor save section */
.editor-save-section {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.btn-lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
}

/* Quick Import Action at top of editor */
.import-quick-action {
  margin-bottom: var(--space-md);
}

.btn-import {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: white;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-import:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-cream-light);
}

.btn-import:active {
  transform: scale(0.98);
}

.btn-import .import-icon {
  font-size: 1.25em;
}

/* ===== VEDLYS HUB ===== */

.guide-hub-header {
  text-align: center;
  padding: var(--space-lg) 0;
}

.guide-hub-header h1 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.guide-hub-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.guide-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Guide option cards - aligned with recipe-card styling */
.guide-start-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-xl);
}

.guide-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.guide-option-card:hover {
  box-shadow: var(--shadow-neu-lg);
}

.guide-option-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-neu-sm);
}

.guide-option-icon {
  width: 60px;
  height: 60px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  box-shadow: var(--shadow-neu-sm);
}

.guide-option-icon svg {
  width: 32px;
  height: 32px;
}

.guide-option-icon-premium {
  color: var(--color-accent-dark);
}

.guide-option-content {
  flex: 1;
  min-width: 0;
}

.guide-option-content h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-option-content p {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-option-chevron {
  color: #C7C7CC;
  flex-shrink: 0;
}

/* Bake Mode Selection Modal */
.bake-mode-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bake-mode-option {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.bake-mode-option.is-disabled,
.bake-mode-option[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: var(--shadow-neu-sm);
  transform: none;
}

.bake-mode-option.is-disabled:hover,
.bake-mode-option[disabled]:hover,
.bake-mode-option.is-disabled:active,
.bake-mode-option[disabled]:active {
  transform: none;
  box-shadow: var(--shadow-neu-sm);
}

.bake-mode-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-neu-lg);
}

.bake-mode-option:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-neu-sm);
}

.bake-mode-icon {
  width: 56px;
  height: 56px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  box-shadow: var(--shadow-neu-sm);
}

.bake-mode-icon svg {
  width: 32px;
  height: 32px;
}

.bake-mode-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bake-mode-text strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.bake-mode-text span {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Active Session Pill - Spotify mini player style */
.session-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-primary);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: var(--space-lg);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(61, 107, 107, 0.3);
}

.session-pill-status {
  width: 10px;
  height: 10px;
  position: relative;
  flex-shrink: 0;
}

.session-pill-pulse {
  width: 10px;
  height: 10px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.session-pill-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-pill-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-pill-stage {
  font-size: 13px;
  opacity: 0.85;
}

.session-pill-timer {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.session-pill-action {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.15s;
}

.session-pill-action:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.05);
}

.session-pill-action:active {
  transform: scale(0.95);
}

.session-pill-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
}

.session-pill-progress-fill {
  height: 100%;
  background: white;
  transition: width 0.3s ease;
}

/* Section label */
.guide-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-md) 0;
}

/* Recipe Select List */
.guide-recipe-select-list {
  max-height: 400px;
  overflow-y: auto;
}

.guide-recipe-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background 0.15s;
}

.guide-recipe-item:hover {
  background: var(--color-cream-light);
}

.guide-recipe-item:last-child {
  border-bottom: none;
}

.guide-recipe-item-name {
  flex: 1;
  font-weight: 500;
}

.guide-recipe-item-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Recent Sessions */
.guide-sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.guide-session-item {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.guide-session-item-info {
  flex: 1;
}

.guide-session-item-name {
  font-weight: 500;
  margin-bottom: 2px;
}

.guide-session-item-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.input-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Form input styling for modal */
.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(61, 107, 107, 0.1);
}

/* Recipe Select Modal */
.recipe-select-list {
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

.recipe-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background 0.15s;
}

.recipe-select-item:hover {
  background: var(--color-cream-light);
}

.recipe-select-item:last-child {
  border-bottom: none;
}

.recipe-select-name {
  font-weight: 500;
  color: var(--color-text);
}

.empty-hint {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-xl);
}

/* Timeline Modal Improvements */
.modal-timeline {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-timeline .modal-body {
  overflow-y: auto;
  flex: 1;
}

.modal-intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}

.timeline-form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.input-with-unit .form-input {
  flex: 1;
  max-width: 100px;
}

.input-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.timeline-action-row {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* Form submit button - centered with max-width on desktop */
.btn-form-submit {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  padding: 16px 24px;
}

.btn-form-submit svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* Section title styles */
.form-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1E1E1E;
  margin: 0 0 12px 0;
}

.form-section-subtitle {
  font-size: 14px;
  color: #6A6A6A;
  margin: 0 0 16px 0;
}

/* Card internal section title */
.card h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1E1E1E;
  margin: 0 0 8px 0;
}

.card > p.muted:first-of-type {
  font-size: 14px;
  color: #6A6A6A;
  margin: 0 0 20px 0;
}

/* Timeline Results Section */
#timelineResultsSection {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.timeline-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.timeline-actions-grid .btn {
  padding: var(--space-md) var(--space-sm);
  font-size: 14px;
  flex-direction: column;
  gap: 6px;
  height: auto;
  min-height: 70px;
}

.timeline-actions-grid .btn svg {
  margin: 0 !important;
}

#editTimelineBtn {
  margin-top: var(--space-sm);
}

/* Timeline Recipe Info */
.timeline-recipe-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.timeline-recipe-label {
  font-size: 13px;
  opacity: 0.8;
}

.timeline-recipe-name {
  font-size: 15px;
  font-weight: 600;
}

/* Timeline Preview Card */
.timeline-preview-section {
  margin-top: var(--space-lg);
}

.timeline-stages-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border-light);
}

.timeline-stages-card.timeline-stages-full {
  max-height: none;
  overflow-y: visible;
}

/* Inline controls for recalculation */
.timeline-inline-controls {
  margin-bottom: 12px;
}

.timeline-control-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

@media (max-width: 640px) {
  .timeline-actions-grid {
    grid-template-columns: 1fr;
  }
  .timeline-control-row {
    flex-wrap: wrap;
  }
  .timeline-control-item {
    flex: 1 1 100%;
  }
}

.timeline-control-item {
  flex: 1;
}

.timeline-control-item label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.timeline-control-temp {
  flex: 0 0 auto;
}

.temp-stepper-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-background);
  border-radius: 8px;
  padding: 4px 8px;
}

.temp-step-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-primary);
  color: white;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.temp-step-btn:hover {
  background: var(--color-primary-dark);
}

.temp-step-btn:active {
  transform: scale(0.95);
}

.temp-value-inline {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 24px;
  text-align: center;
}

.temp-unit-inline {
  font-size: 13px;
  color: var(--color-text-muted);
}

.form-input-sm {
  padding: 6px 10px;
  font-size: 14px;
  height: 32px;
}

.input-with-unit-sm {
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-with-unit-sm .form-input-sm {
  width: 55px;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.input-with-unit-sm .form-input-sm::-webkit-outer-spin-button,
.input-with-unit-sm .form-input-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-with-unit-sm .input-unit {
  font-size: 12px;
}

.timeline-control-row .btn-sm {
  height: 32px;
  padding: 0 10px;
  flex-shrink: 0;
}

/* Compact action buttons */
.timeline-actions-compact {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-compact {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-compact svg {
  flex-shrink: 0;
}

.timeline-summary {
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  text-align: center;
}

.timeline-summary strong {
  display: block;
  font-size: var(--text-lg);
  margin-bottom: 4px;
}

.timeline-until {
  opacity: 0.8;
  font-size: var(--text-sm);
}

.timeline-summary.timeline-warning {
  background: linear-gradient(135deg, #c4a574 0%, #a68b5b 100%);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
}

.timeline-summary.timeline-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.9;
}

.timeline-summary.timeline-warning strong {
  margin-bottom: 2px;
}

.timeline-past-info {
  display: block;
  font-size: var(--text-sm);
  opacity: 0.85;
}

.timeline-stages-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-date-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px 6px;
  margin-top: 8px;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
}

.timeline-date-header:first-child {
  margin-top: 0;
}

.timeline-stage-item {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  align-items: flex-start;
  background: white;
  border-bottom: 1px solid var(--color-border-light);
}

.timeline-stage-inline {
  padding: 6px 12px 14px 55px;
  background: white;
  border-bottom: 1px solid var(--color-border-light);
}

.timeline-inline-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.timeline-inline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timeline-inline-controls .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-cream);
  background: white;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.timeline-inline-controls input.proof-duration-input {
  width: 74px;
  height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}

.timeline-inline-controls input.bulk-duration-input {
  width: 74px;
  height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  text-align: center;
}

.timeline-inline-hint,
.proof-duration-reset,
.bulk-reset {
  font-size: 12px;
  color: var(--color-text-muted);
}

.proof-duration-reset,
.bulk-reset {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.timeline-stage-item:last-child {
  border-bottom: none;
}

.timeline-stage-time {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.timeline-stage-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 15px;
  color: var(--color-text);
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.25;
}

.proof-mode-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.proof-mode-indicator svg {
  width: 12px;
  height: 12px;
}

.proof-mode-indicator.is-cold {
  color: var(--color-info);
  background: rgba(75, 131, 195, 0.12);
  border-color: rgba(75, 131, 195, 0.35);
}

.proof-mode-indicator.is-room {
  color: var(--color-accent-dark);
  background: rgba(214, 167, 86, 0.15);
  border-color: rgba(214, 167, 86, 0.35);
}

.timeline-stage-duration {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  background: var(--color-cream);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.timeline-stage-duration-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  align-self: flex-start;
}

.timeline-stage-edit {
  font-size: 12px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.timeline-inline-collapsible {
  display: none;
}

.timeline-inline-collapsible.is-open {
  display: block;
}

.timeline-stage-bake {
  background: #FFF5EB;
  border-bottom: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.timeline-stage-bake .timeline-stage-time {
  color: var(--color-danger);
}

.timeline-stage-bake .timeline-stage-name {
  color: var(--color-danger);
  font-weight: 600;
}

/* Session card actions */
.session-actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.btn-danger-text {
  color: var(--color-danger) !important;
}

.btn-danger-text:hover {
  background: rgba(217, 115, 115, 0.1) !important;
}

/* Starter State Tracker */
.starter-state-tracker {
  margin: var(--space-md) var(--space-md) 0 var(--space-md);
}

.state-tracker-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--stage-color, var(--color-primary));
}

.state-tracker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.state-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-sm);
  font-weight: 600;
}

.state-time-remaining {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.state-progress-container {
  margin-bottom: var(--space-md);
}

.state-progress-bar {
  position: relative;
  height: 8px;
  background: var(--color-cream);
  border-radius: var(--radius-full);
  overflow: visible;
}

.state-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease, background 0.3s ease;
}

.state-progress-markers {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.state-progress-markers .marker {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.state-progress-markers .peak-marker {
  font-weight: 600;
  color: var(--color-primary);
}

.state-tracker-info {
  margin-top: var(--space-lg);
}

.state-message {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.state-peak-time {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.state-peak-time strong {
  color: var(--color-primary);
}

.state-tracker-empty {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.state-tracker-empty svg {
  flex-shrink: 0;
  opacity: 0.5;
}

/* Notification Enable Banner */
.notification-enable-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
  border: 1px solid #FFD54F;
  border-radius: var(--radius-md);
}

.notification-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #5D4037;
}

.notification-banner-content svg {
  flex-shrink: 0;
  color: #F9A825;
}

.notification-banner-content.notification-success {
  color: var(--color-primary-dark);
}

.notification-banner-content.notification-success svg {
  color: var(--color-primary);
}

.notification-enable-banner .btn-sm {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ===== SETTINGS MODAL ===== */

.settings-section {
  margin-bottom: var(--space-lg);
}

.settings-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 var(--space-sm) 0;
  padding-left: var(--space-xs);
}

.settings-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  background: var(--color-cream-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-xs);
}

.settings-item:last-child {
  margin-bottom: 0;
}

.settings-item:hover {
  background: var(--color-cream);
  border-color: var(--color-primary-light);
}

.settings-item:active {
  transform: scale(0.98);
}

.settings-item svg:first-child {
  flex-shrink: 0;
  color: var(--color-primary);
}

.settings-item-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-item-label {
  font-weight: 500;
}

.settings-item-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.settings-item-chevron {
  flex-shrink: 0;
  color: var(--color-text-light);
}

.settings-toggle-item {
  cursor: default;
}

.settings-toggle-item:active {
  transform: none;
}

.settings-subsection {
  padding: var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  margin-top: var(--space-sm);
}

.settings-info-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}

.settings-info-box p {
  margin: 0 0 var(--space-xs);
  color: var(--color-text-secondary);
}

.settings-info-box ol.compact-list {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-lg);
}

.settings-info-box ol.compact-list li {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.settings-info-box a {
  color: var(--color-primary);
  text-decoration: underline;
}

.vapid-input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: monospace;
  margin-bottom: var(--space-sm);
}

.vapid-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(47, 95, 85, 0.1);
}

.fcm-status {
  font-size: var(--text-xs);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

.fcm-status.success {
  background: rgba(47, 95, 85, 0.1);
  color: var(--color-primary);
}

.fcm-status.error {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.fcm-status.pending {
  background: rgba(255, 193, 7, 0.1);
  color: #856404;
}

.app-version {
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: center;
}

.btn-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--color-primary);
  cursor: pointer;
  transition: opacity 0.2s;
  margin-right: var(--space-sm);
}

.btn-back:hover {
  opacity: 0.7;
}

/* Legal Modal Styles */
.modal-sheet-legal {
  max-height: 90vh;
}

.legal-content {
  line-height: 1.6;
}

.legal-content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-lg) 0 var(--space-sm) 0;
}

.legal-content h4:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.legal-content ul {
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-lg);
}

.legal-content li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal-content a:hover {
  color: var(--color-primary-dark);
}

/* Timeline Modal Footer */
.timeline-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
}

.timeline-action-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Planned Bakes Section */
.planned-bakes-section {
  margin-top: var(--space-lg);
}

.planned-bakes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.planned-bakes-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: var(--space-sm);
}

.planned-bakes-toggle:hover {
  background: var(--color-bg);
  box-shadow: var(--shadow-neu-hover);
}

.planned-bakes-toggle:active {
  box-shadow: var(--shadow-neu-pressed);
}

.planned-bakes-toggle-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.planned-bakes-toggle-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.planned-bakes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-primary);
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}

.toggle-chevron {
  transition: transform 0.3s ease;
  color: var(--color-text-muted);
}

.planned-bakes-toggle.expanded .toggle-chevron {
  transform: rotate(180deg);
}

.planned-bakes-content {
  display: none;
  padding: 14px;
  margin-top: 10px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05), inset -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.planned-bakes-content.expanded {
  display: block;
}

.planned-bakes-filters {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.filter-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(118, 118, 128, 0.12);
  color: #8E8E93;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.filter-chip:hover {
  background: rgba(118, 118, 128, 0.2);
}

.filter-chip.active {
  background: var(--color-primary);
  color: white;
}

.filter-chip[data-filter="overdue"].active {
  background: #8b5a2b;
}

.planned-bakes-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 350px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.planned-bakes-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.planned-bake-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-neu);
}

.planned-bake-info {
  flex: 1;
  min-width: 0;
}

.planned-bake-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planned-bake-times {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.planned-bake-start {
  color: var(--color-primary);
  font-weight: 500;
}

.planned-bake-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.planned-bake-reminder {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  cursor: pointer;
}

.reminder-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.planned-bake-reminder .toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: #ddd;
  border-radius: 11px;
  transition: background 0.2s ease;
  cursor: pointer;
}

.planned-bake-reminder .toggle-switch.active {
  background: var(--color-primary);
}

.planned-bake-reminder .toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.planned-bake-reminder .toggle-switch.active .toggle-slider {
  transform: translateX(18px);
}

/* Planned Bake Status Indicators */
.planned-bake-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.bake-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.bake-status-badge.urgent {
  background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 100%);
  color: white;
  animation: pulse-urgent 1.5s ease-in-out infinite;
}

.bake-status-badge.soon {
  background: linear-gradient(135deg, #2F5F55 0%, #234840 100%);
  color: white;
}

@keyframes pulse-urgent {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

.planned-bake-card.time-to-start {
  border-left: 3px solid #8b5a2b;
  background: var(--color-bg);
  box-shadow: var(--shadow-neu);
}

.planned-bake-card.time-to-start .start-planned-bake-btn {
  background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 100%);
  animation: pulse-button 2s ease-in-out infinite;
}

@keyframes pulse-button {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 90, 43, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(139, 90, 43, 0);
  }
}

.planned-bake-card.starting-soon {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg);
}

/* Plan Preview Modal */
.plan-preview-modal {
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.plan-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.plan-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

.plan-preview-summary {
  background: var(--color-primary);
  color: white;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  margin-bottom: var(--space-md);
  font-weight: 600;
}

.plan-preview-date-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--space-md);
  padding: 6px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
}

.plan-preview-stage {
  display: flex;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  gap: var(--space-sm);
}

.plan-preview-stage-time {
  width: 50px;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
}

.plan-preview-stage-name {
  flex: 1;
  font-size: 14px;
}

.plan-preview-stage-duration {
  font-size: 12px;
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.04);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.plan-preview-stage.bake-done {
  background: #FFF5EB;
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  border-radius: var(--radius-md);
  border: none;
}

.plan-preview-stage.bake-done .plan-preview-stage-time,
.plan-preview-stage.bake-done .plan-preview-stage-name {
  color: #D35400;
}

.plan-preview-stage.bake-done .plan-preview-stage-name {
  font-weight: 600;
}

.plan-preview-footer {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-md);
  border-top: 1px solid rgba(0,0,0,0.08);
}

.plan-preview-footer .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toast Notification */
.app-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-text);
  color: white;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 14000;
  box-shadow: var(--shadow-lg);
}

.app-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ===== ACCESS CODE SCREEN ===== */

.hidden {
  display: none !important;
}

.access-code-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.access-code-container {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-raised);
  max-height: calc(100vh - (var(--space-lg) * 2));
  max-height: calc(100dvh - (var(--space-lg) * 2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile / low-height viewports: leisti scroll, kad matytųsi login mygtukai */
@media (max-height: 900px) {
  .access-code-screen {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  .access-code-container {
    margin: 0 auto;
  }
}

.access-lang-switch {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.access-lang-btn {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px 6px;
  font-weight: 700;
}

.access-lang-btn.active {
  color: var(--color-primary);
  text-decoration: underline;
}

.access-lang-sep {
  color: var(--color-text-muted);
  align-self: center;
}

.access-code-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  color: var(--color-primary);
}

.access-code-logo svg {
  width: 100%;
  height: 100%;
}

.access-code-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.access-code-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl);
}

.access-code-email {
  margin-top: calc(var(--space-xl) * -1);
  margin-bottom: var(--space-lg);
  font-weight: 600;
  color: var(--color-text);
}

.access-code-paywall-note {
  margin-bottom: var(--space-lg);
}

.access-code-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.access-code-input {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-lg);
  text-align: left;
  letter-spacing: normal;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.access-code-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 95, 85, 0.1);
}

.access-code-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
}

.access-code-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-sm);
  background: var(--color-danger-light);
  border-radius: var(--radius-xs);
}

.access-code-success {
  color: var(--color-success, #1f7a3f);
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-sm);
  background: rgba(31, 122, 63, 0.12);
  border-radius: var(--radius-xs);
}

.access-code-btn {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-md);
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.access-code-btn:hover {
  background: var(--color-primary-dark);
}

.access-code-btn:active {
  transform: scale(0.98);
}

.access-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: left;
}

.legal-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  box-sizing: border-box;
  accent-color: var(--color-primary);
}

.legal-consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

.access-code-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 0;
}

/* Access code tabs */
.access-code-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  background: var(--color-surface-alt, #f0ebe5);
  padding: 4px;
  border-radius: var(--radius-lg);
}

.access-tab {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.access-tab:hover {
  color: var(--color-text);
}

.access-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.access-code-section {
  display: none;
}

.access-code-section.active {
  display: block;
}

.access-code-btn-google {
  background: #fff;
  color: #222;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.access-code-btn-google:hover {
  background: #f6f6f6;
}

.access-code-divider {
  margin: var(--space-md) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.access-code-divider span {
  position: relative;
}

.access-code-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.access-code-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
}

.access-code-btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}

.access-code-btn-outline:hover {
  background: var(--color-cream-light);
}

.invite-redeem {
  text-align: left;
}

.invite-redeem-panel {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border-light);
  background: var(--color-cream-light);
  border-radius: var(--radius-md);
}

.invite-redeem-subtitle {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.invite-redeem-actions {
  display: flex;
  justify-content: flex-end;
}

.premium-block-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 13050;
  padding: var(--space-lg);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.premium-blocked {
  overflow: hidden;
}

.premium-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 13040;
  padding: var(--space-lg);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.premium-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.checkout-success-modal {
  z-index: 13100;
}

.checkout-success-modal .modal-panel {
  max-width: 420px;
}

.checkout-success-modal .modal-body {
  text-align: center;
}

.checkout-success-text {
  margin: 0;
  color: var(--color-text-secondary);
}

.guest-import-modal {
  z-index: 13100;
}

.guest-import-text {
  margin: 0;
  color: var(--color-text-secondary);
}

.guest-import-summary {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.guest-import-progress {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.guest-import-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.premium-block-card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--color-border-light);
}

.premium-block-title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-xl);
}

.premium-block-subtitle {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-secondary);
}

.premium-block-plan-label {
  margin: 0 0 var(--space-sm);
  font-weight: 600;
  color: var(--color-text);
}

.premium-block-plans {
  margin-bottom: var(--space-md);
}

.premium-block-actions {
  display: grid;
  gap: var(--space-sm);
}

/* ===== NOTIFICATION CENTER ===== */
.notification-center-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 60px var(--space-md) var(--space-md);
}

.notification-center-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.notification-center-content {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 140px);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-center-header {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

.notification-center-header h3 {
  flex: 1;
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.mark-all-read-btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.mark-all-read-btn:hover {
  background: rgba(47, 95, 85, 0.1);
}

.delete-all-notifications-btn {
  background: none;
  border: none;
  color: #c44;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.delete-all-notifications-btn:hover {
  background: rgba(204, 68, 68, 0.1);
}

.close-notification-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  margin-left: var(--space-sm);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.close-notification-btn:hover {
  background: var(--color-cream-dark);
  color: var(--color-text);
}

.notification-center-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--color-text-muted);
  text-align: center;
}

.notification-empty svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
  margin-bottom: var(--space-md);
}

.notification-empty p {
  margin: 0;
  font-size: var(--text-base);
}

.notification-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: background 0.2s;
  cursor: pointer;
  margin-bottom: var(--space-xs);
}

.notification-item:hover {
  background: var(--color-cream-dark);
}

.notification-item.unread {
  background: rgba(47, 95, 85, 0.06);
}

.notification-item.unread:hover {
  background: rgba(47, 95, 85, 0.1);
}

.notification-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-item-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.notification-item.unread .notification-item-icon {
  background: var(--color-primary);
}

.notification-item.unread .notification-item-icon svg {
  color: white;
}

.notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

.notification-item-message {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.notification-item-time {
  font-size: 11px;
  color: var(--color-text-muted);
}

.notification-item-delete {
  opacity: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  transition: opacity 0.2s, background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notification-item:hover .notification-item-delete {
  opacity: 1;
}

.notification-item-delete:hover {
  background: var(--color-danger-light);
  color: var(--color-danger);
}

.notification-item-delete svg {
  width: 16px;
  height: 16px;
}

.notification-item.clickable {
  position: relative;
}

.notification-item.clickable::after {
  content: '';
  position: absolute;
  right: 40px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-50%) rotate(-45deg);
  opacity: 0.5;
  transition: opacity 0.2s, right 0.2s;
}

.notification-item.clickable:hover::after {
  opacity: 1;
  right: 38px;
}

/* Highlight pulse animation for navigated items */
@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 95, 85, 0.4);
    background: rgba(47, 95, 85, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(47, 95, 85, 0);
    background: rgba(47, 95, 85, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(47, 95, 85, 0);
    background: transparent;
  }
}

.highlight-pulse {
  animation: highlight-pulse 1s ease-out 2;
}

.stage-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.stage-duration-input {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-duration-input input[type="number"]:not(.duration-input) {
  width: 120px;
}

.bake-duration-input {
  gap: 12px;
  align-items: flex-start;
}

.bake-duration-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bake-time-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bake-time-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.bake-time-inline .duration-adjuster {
  flex-wrap: nowrap;
}

.bake-temp-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .bake-duration-group {
    width: 100%;
    flex: 1 1 100%;
  }

  .bake-time-group .duration-adjuster {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.time-input-with-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.time-display {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.stage-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: #f3f4f6;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.stage-adjust-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.stage-adjust-note {
  font-size: 12px;
  color: var(--color-text-muted);
}

.stage-adjust-reset {
  font-size: 12px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.editor-step-pills {
  display: flex;
  gap: 6px;
  background: rgba(47, 95, 85, 0.08);
  padding: 6px;
  border-radius: var(--radius-lg);
  margin: 10px 0 16px;
  border: 1px solid rgba(47, 95, 85, 0.12);
  flex-wrap: wrap;
}

.editor-step-pill {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 12px var(--space-lg);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 160px;
}

.editor-step-pill:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.6);
}

.editor-step-pill.active {
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(47, 95, 85, 0.3);
}

.section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-nav-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--space-md);
}

.editor-nav-actions .btn {
  min-width: 120px;
}

.wizard-footer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin: 12px 0;
  background: #f7f4ef;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.wizard-footer .btn {
  min-width: 140px;
}

.wizard-next-dup {
  margin-top: var(--space-sm);
}

.wizard-footer .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}


.btn.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}

.recipe-card-actions .btn.btn-sm {
  padding: 10px 22px;
}

.stage-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: #fff;
  margin: 12px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.stage-group {
  background: #f9f6f1;
  border: 1px solid #e4dfd7;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin: 14px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.stage-group-title {
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
}

.stage-group .stage-card {
  margin: 10px 0;
}

.stage-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.stage-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.stage-toggle .toggle {
  margin: 0;
}

.stage-card-title {
  font-weight: 600;
  color: var(--color-text);
}

.stage-card-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.stage-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stage-card-body textarea {
  width: 100%;
}

/* CSS Version v142 */