/* MyDispensa — "Quotidiano del Menù" design system */

:root {
  --pomodoro:        #C8472E;
  --pomodoro-dark:   #9C2F1C;
  --terracotta:      #D88158;
  --zafferano:       #E6A92E;
  --basilico:        #3D6B3A;
  --basilico-dark:   #1F3D1F;
  --oliva:           #7B8A3C;
  --crema:           #F7EBD3;
  --carta:           #EFE2C4;
  --panna:           #FFFDF6;
  --peach-soft:      #FBE8DF;
  --espresso:        #2A1B12;
  --espresso-soft:   #5A4536;
  --espresso-faint:  #8E7C68;
  --hairline:        rgba(42,27,18,.08);
  --hairline-strong: rgba(42,27,18,.18);

  --shadow-card:          0 1px 0 rgba(42,27,18,.05), 0 14px 24px -22px rgba(42,27,18,.18);
  --shadow-card-strong:   0 1px 0 rgba(42,27,18,.05), 0 18px 30px -22px rgba(42,27,18,.2);
  --shadow-tabbar:        0 20px 40px -18px rgba(42,27,18,.25), inset 0 0 0 1px rgba(42,27,18,.05);
  --shadow-pomodoro-glow: 0 18px 30px -10px rgba(200,71,46,.6), 0 2px 0 rgba(0,0,0,.1);
}

/* ── Page ── */
.md-page {
  background: var(--panna);
  min-height: 100vh;
  padding-bottom: 90px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── App Header ── */
.md-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 10px 18px 14px;
  background: var(--panna);
}

.md-app-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-app-header__tomatomark {
  width: 30px;
  height: 30px;
  background: var(--crema);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.md-app-header__wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--espresso);
  letter-spacing: -.01em;
}

.md-app-header__wordmark em {
  font-style: italic;
  color: var(--pomodoro);
}

.md-app-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.md-app-header__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--crema);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.md-app-header__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--crema);
  flex-shrink: 0;
}

/* ── Masthead ── */
.md-masthead {
  padding: 0 22px 16px;
}

.md-masthead__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.md-masthead__hr {
  flex: 1;
  height: 1px;
  background: var(--espresso);
  opacity: .15;
  border: none;
}

.md-masthead__eyebrow-text {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--espresso-faint);
  white-space: nowrap;
  text-transform: uppercase;
}

.md-masthead__title {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 800;
  line-height: .9;
  color: var(--espresso);
  margin: 6px 0 0;
}

.md-masthead__title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--pomodoro);
  display: inline-block;
}

.md-masthead__subline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* ── Floating Tab Bar ── */
.md-tabbar {
  position: fixed;
  bottom: 18px;
  left: 14px;
  right: 14px;
  border-radius: 32px;
  background: #FFFCF4;
  box-shadow: var(--shadow-tabbar);
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 6px 8px;
}

.md-tabbar__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 5px 2px;
  border-radius: 18px;
  transition: background .15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--espresso-faint);
  line-height: 1;
}

.md-tabbar__tab.md-tab-active {
  background: var(--peach-soft);
  font-weight: 600;
  color: var(--pomodoro);
}

.md-tabbar__tab svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* ── Stat Strip ── */
.md-stat-strip {
  display: flex;
  gap: 6px;
  padding: 0 22px 12px;
}

.md-stat-cell {
  flex: 1;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(42,27,18,.12);
}

.md-stat-cell--filled {
  border: none;
}

.md-stat-cell__value {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1;
}

.md-stat-cell__label {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 3px;
  line-height: 1.2;
}

/* ── Filter Chips ── */
.md-filter-chips {
  display: flex;
  gap: 6px;
  padding: 0 22px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.md-filter-chips::-webkit-scrollbar { display: none; }

.md-chip {
  flex-shrink: 0;
  border-radius: 18px;
  padding: 5px 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--espresso-soft);
  background: transparent;
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}

.md-chip.md-chip-active {
  background: var(--espresso);
  color: var(--crema);
  font-weight: 600;
  border-color: var(--espresso);
}

/* ── Section Head ── */
.md-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 22px 8px;
}

.md-section-head__numeral {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.md-section-head__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: var(--espresso);
  line-height: 1;
  flex-shrink: 0;
}

.md-section-head__hr {
  flex: 1;
  height: 1px;
  background: var(--espresso);
  opacity: .2;
  border: none;
  margin: 0;
}

.md-section-head__count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--espresso-soft);
  letter-spacing: .14em;
  flex-shrink: 0;
}

/* ── Handwritten Section Head ── */
.md-handwritten-head {
  text-align: center;
  padding: 16px 22px 8px;
}

.md-handwritten-head__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  color: var(--espresso);
  display: inline-block;
  line-height: 1;
}

.md-handwritten-head__eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: var(--espresso-soft);
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Inventory Card ── */
.md-card {
  background: var(--panna);
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 4px 16px;
  margin: 0 14px;
}

/* ── Item Row ── */
.md-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(42,27,18,.1);
}

.md-item-row:last-child {
  border-bottom: none;
}

.md-item-monogram {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
}

.md-item-info {
  flex: 1;
  min-width: 0;
}

.md-item-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--espresso);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.md-item-meta {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: var(--espresso-faint);
  letter-spacing: .1em;
  margin-top: 2px;
}

.md-pill {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

.md-pill--urgent {
  background: var(--pomodoro);
  color: var(--crema);
}

.md-pill--expired {
  background: var(--espresso);
  color: var(--crema);
}

/* ── Urgent Banner ── */
.md-urgent-banner {
  background: var(--pomodoro);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 18px 30px -20px rgba(200,71,46,.6);
}

.md-urgent-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(247,235,211,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.md-urgent-banner__text {
  flex: 1;
  min-width: 0;
}

.md-urgent-banner__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--crema);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.md-urgent-banner__subtitle {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: rgba(247,235,211,.85);
  line-height: 1;
  margin-top: 2px;
}

.md-urgent-banner__btn {
  background: var(--crema);
  color: var(--pomodoro);
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  letter-spacing: .05em;
  font-weight: 500;
}

/* ── FAB ── */
.md-fab {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pomodoro);
  border: none;
  color: white;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-pomodoro-glow);
  z-index: 100;
  line-height: 1;
  padding: 0;
}

/* ── Empty state ── */
.md-empty {
  padding: 60px 22px;
  text-align: center;
}

.md-empty__text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--espresso-soft);
}

.md-empty__action {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--pomodoro);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Pasti — Week nav ── */
.md-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 8px;
}

.md-week-nav__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--crema);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--espresso);
}

.md-week-nav__range {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--espresso-soft);
  text-transform: uppercase;
}

/* ── Pasti — Day tabs ── */
.md-day-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 22px;
}

.md-day-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 2px;
  border-radius: 6px;
  border: 1.5px solid var(--hairline-strong);
  background: transparent;
  cursor: pointer;
}

.md-day-tab__letter {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--espresso-faint);
  line-height: 1;
}

.md-day-tab__number {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--espresso);
  line-height: 1;
}

.md-day-tab.md-day-tab-active {
  background: var(--espresso);
  border-color: var(--espresso);
}

.md-day-tab.md-day-tab-active .md-day-tab__letter {
  color: rgba(247,235,211,.55);
}

.md-day-tab.md-day-tab-active .md-day-tab__number {
  color: var(--crema);
  font-style: italic;
}

/* ── Pasti — Day header ── */
.md-day-header {
  text-align: center;
  padding: 12px 22px 14px;
}

.md-day-header__text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 38px;
  color: var(--pomodoro);
  display: inline-block;
  line-height: 1;
}

/* ── Pasti — Meal card stack ── */
.md-meal-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 14px;
}

/* Filled meal card */
.md-meal-card {
  background: var(--panna);
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card-strong);
  overflow: hidden;
}

.md-meal-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}

.md-meal-card__band {
  width: 10px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.md-meal-card__type {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  flex: 1;
  line-height: 1;
}

.md-meal-card__time {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--espresso-faint);
}

.md-meal-card__numeral {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  font-style: italic;
  letter-spacing: .08em;
  margin-left: 4px;
}

.md-meal-card__dish {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  align-items: center;
}

.md-meal-card__dish + .md-meal-card__dish {
  border-top: 1px solid rgba(42,27,18,.08);
}

.md-meal-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  color: #FFFCF4;
  flex-shrink: 0;
}

.md-meal-card__dish-info {
  flex: 1;
  min-width: 0;
}

.md-meal-card__dish-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--espresso);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-meal-card__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(42,27,18,.06);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--espresso-faint);
  padding: 0;
}

/* Empty meal card */
.md-meal-card--empty {
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: transparent;
  transition: opacity .15s;
}

.md-meal-card--empty:active { opacity: .65; }

.md-meal-card__empty-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
  color: #FFFCF4;
  line-height: 1;
  font-weight: 300;
}

.md-meal-card__empty-text {
  flex: 1;
  min-width: 0;
}

.md-meal-card__empty-label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.1;
}

.md-meal-card__empty-hint {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--espresso-soft);
  line-height: 1;
  margin-top: 3px;
}

/* ── Spesa — Progress card ── */
.md-progress-card {
  background: var(--panna);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 0 14px 14px;
}

.md-progress-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--espresso);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.md-progress-card__title em {
  font-style: italic;
  color: var(--pomodoro);
}

.md-progress-card__count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--espresso-faint);
}

.md-progress-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(42,27,18,.08);
  margin-bottom: 12px;
  overflow: hidden;
}

.md-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #E6A92E 0%, #C8472E 100%);
  transition: width .4s ease;
}

.md-progress-actions {
  display: flex;
  gap: 10px;
}

.md-progress-action {
  flex: 1;
  padding: 9px 10px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  border: none;
  line-height: 1;
}

.md-progress-action--primary {
  background: var(--peach-soft);
  color: var(--pomodoro);
}

.md-progress-action--secondary {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--espresso-soft);
}

/* ── Spesa — Callout ── */
.md-callout {
  background: #FBE8DF;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 14px 18px;
}

.md-callout__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.md-callout__label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--pomodoro);
  font-weight: 500;
  text-transform: uppercase;
}

.md-callout__body {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--pomodoro-dark);
  line-height: 1.1;
}

/* ── Spesa — Aisle section ── */
.md-aisle-card {
  background: var(--panna);
  border-radius: 14px;
  border: 1px solid var(--hairline);
  padding: 4px 16px;
  margin: 0 14px;
}

/* ── Spesa — Shopping item row ── */
.md-shopping-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(42,27,18,.1);
  transition: opacity .18s;
}

.md-shopping-row:last-child { border-bottom: none; }

.md-shopping-row--checked { opacity: .5; }

.md-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1.5px solid rgba(42,27,18,.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, border-color .15s;
}

.md-checkbox--checked {
  background: var(--basilico);
  border-color: var(--basilico);
}

.md-shopping-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--espresso);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-shopping-name--crossed {
  text-decoration: line-through;
  text-decoration-color: #8E7C68;
}

.md-shopping-qty {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--espresso-faint);
  flex-shrink: 0;
}

.md-shopping-delete {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(42,27,18,.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--espresso-faint);
  padding: 0;
}

/* ── Spesa — Aisle section head (icon tile variant) ── */
.md-aisle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 8px;
}

.md-aisle-head__icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  color: #FFFCF4;
  flex-shrink: 0;
}

.md-aisle-head__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--espresso);
  flex-shrink: 0;
  line-height: 1;
}

.md-aisle-head__count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--espresso-soft);
  letter-spacing: .14em;
}

/* ── Ricette — Search bar ── */
.md-search-bar {
  margin: 0 22px 14px;
  background: var(--panna);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: inset 0 0 0 1px rgba(42,27,18,.08);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: text;
}

.md-search-bar__placeholder {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--espresso-faint);
  flex: 1;
}

.md-search-bar__hint {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(42,27,18,.06);
  color: var(--espresso-faint);
  flex-shrink: 0;
}

/* ── Ricette — Featured hero ── */
.md-recipe-hero {
  margin: 0 14px 4px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/11;
  box-shadow: 0 20px 40px -22px rgba(42,27,18,.35);
  border: 1px solid var(--hairline);
  cursor: pointer;
}

.md-recipe-hero__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(42,27,18,.3);
}

.md-recipe-hero__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E6A92E;
  flex-shrink: 0;
}

.md-recipe-hero__badge-text {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: var(--crema);
  letter-spacing: .16em;
  font-weight: 500;
}

.md-recipe-hero__content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
}

.md-recipe-hero__tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: #E6A92E;
  display: inline-block;
  line-height: 1;
  margin-bottom: 4px;
}

.md-recipe-hero__title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--crema);
  letter-spacing: -.025em;
  line-height: .95;
}

.md-recipe-hero__sub {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: #E6A92E;
  line-height: 1;
}

.md-recipe-hero__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: rgba(247,235,211,.8);
  letter-spacing: .14em;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Ricette — Recipe grid ── */
.md-recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 14px;
}

.md-recipe-card {
  background: var(--panna);
  border-radius: 16px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
}

.md-recipe-card__image {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.md-recipe-card__letter {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 72px;
  color: #FFFCF4;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.md-recipe-card__body {
  padding: 10px 12px 12px;
}

.md-recipe-card__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--espresso);
  letter-spacing: -.01em;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.md-recipe-card__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--espresso-faint);
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}

.md-recipe-card__admin-bar {
  display: flex;
  gap: 4px;
  padding: 4px 8px 8px;
}

.md-recipe-admin-btn {
  flex: 1;
  padding: 5px;
  border-radius: 7px;
  background: rgba(42,27,18,.05);
  border: none;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: var(--espresso-soft);
  letter-spacing: .06em;
}

/* ── Home — Greeting block ── */
.md-greeting {
  padding: 18px 22px 10px;
}

.md-greeting__eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .28em;
  color: var(--espresso-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.md-greeting__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 0.95;
  color: var(--espresso);
  letter-spacing: -.02em;
  margin: 0;
}

.md-greeting__salute {
  font-style: italic;
  font-weight: 500;
  color: var(--pomodoro);
  display: block;
}

.md-greeting__tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--pomodoro-dark);
  display: inline-block;
  margin-top: 10px;
}

/* ── Home — Next meal hero card ── */
.md-next-meal {
  margin: 14px 14px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card-strong);
  cursor: pointer;
}

.md-next-meal__band {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.md-next-meal__band-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  color: var(--panna);
  letter-spacing: -.01em;
}

.md-next-meal__countdown {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(247,235,211,.8);
  white-space: nowrap;
  margin-left: 8px;
}

.md-next-meal__body {
  background: var(--panna);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-next-meal__thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  color: var(--panna);
}

.md-next-meal__info {
  flex: 1;
  min-width: 0;
}

.md-next-meal__dish {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--espresso);
  letter-spacing: -.01em;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-next-meal__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--espresso-faint);
  margin-top: 4px;
  text-transform: uppercase;
}

.md-next-meal__chevron {
  flex-shrink: 0;
  color: var(--espresso-faint);
}

.md-next-meal--empty .md-next-meal__body {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.md-next-meal__caveat {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--espresso-soft);
}

.md-next-meal__cta {
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--espresso);
  border: none;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--panna);
  text-transform: uppercase;
}

/* ── Home — Quick stats row ── */
.md-quick-stats {
  display: flex;
  gap: 10px;
  padding: 14px 14px 0;
}

.md-quick-card {
  flex: 1;
  border-radius: 16px;
  padding: 14px 12px 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}


.md-quick-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.md-quick-card__num {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--panna);
}

.md-quick-card__label {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  color: rgba(247,235,211,.9);
}

.md-quick-card__sub {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  margin-top: 4px;
  text-transform: uppercase;
  color: rgba(247,235,211,.6);
}

.md-quick-card--pomodoro { background: var(--pomodoro); }
.md-quick-card--basilico { background: var(--basilico); }

.md-quick-card--zafferano {
  background: var(--zafferano);
}
.md-quick-card--zafferano .md-quick-card__icon {
  background: rgba(42,27,18,.1);
}
.md-quick-card--zafferano .md-quick-card__num {
  color: var(--espresso);
}
.md-quick-card--zafferano .md-quick-card__label {
  color: var(--espresso-soft);
}
.md-quick-card--zafferano .md-quick-card__sub {
  color: var(--espresso-faint);
}

/* ── Home — Use-it-soon section ── */
.md-use-soon {
  margin: 14px 14px 0;
  background: var(--panna);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.md-use-soon__head {
  display: flex;
  align-items: center;
  padding: 12px 14px 10px;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
}

.md-use-soon__title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  color: var(--espresso);
  letter-spacing: -.01em;
  flex: 1;
}

.md-use-soon__count {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--pomodoro);
  text-transform: uppercase;
}

.md-use-soon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.md-use-soon-row + .md-use-soon-row {
  border-top: 1px solid var(--hairline);
}

.md-use-soon__tile {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  flex-shrink: 0;
}

.md-use-soon__info {
  flex: 1;
  min-width: 0;
}

.md-use-soon__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--espresso);
  letter-spacing: -.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-use-soon__expiry {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--pomodoro);
  text-transform: uppercase;
  margin-top: 2px;
}

.md-use-soon__cta {
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--peach-soft);
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--pomodoro);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Home — Recipe of day mini hero ── */
.md-day-recipe {
  margin: 14px 14px 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-card-strong);
  aspect-ratio: 2.4 / 1;
}

.md-day-recipe__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
}

.md-day-recipe__label {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .2em;
  color: rgba(247,235,211,.7);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.md-day-recipe__title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--panna);
  line-height: 1;
  letter-spacing: -.015em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.md-day-recipe__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(247,235,211,.65);
  margin-top: 4px;
  text-transform: uppercase;
}

/* ── Dark Mode (usa classe .fp-dark già applicata da MainLayout) ── */
.fp-dark .md-page { background: #1C130F; }

.fp-dark .md-app-header { background: #1C130F; }
.fp-dark .md-app-header__tomatomark { background: #2D1E16; }
.fp-dark .md-app-header__wordmark { color: #EFE2C4; }
.fp-dark .md-app-header__btn {
  background: #2D1E16;
  color: #C4B49A;
}
.fp-dark .md-app-header__avatar {
  background: #5A4536;
  color: #EFE2C4;
  border: none;
  cursor: pointer;
}

.fp-dark .md-masthead__title { color: #EFE2C4; }
.fp-dark .md-masthead__eyebrow-text { color: #6B5A48; }
.fp-dark .md-masthead__hr { background: #EFE2C4; opacity: .1; }

.fp-dark .md-tabbar {
  background: #231714;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
.fp-dark .md-tabbar__tab { color: #6B5A48; }
.fp-dark .md-tabbar__tab.md-tab-active { color: var(--pomodoro); background: rgba(200,71,46,.12); }

.fp-dark .md-card { background: #231714; border-color: rgba(255,255,255,.07); }
.fp-dark .md-item-row { border-color: rgba(255,255,255,.06); }
.fp-dark .md-item-name { color: #EFE2C4; }
.fp-dark .md-item-meta { color: #6B5A48; }

.fp-dark .md-section-head__title { color: #EFE2C4; }
.fp-dark .md-section-head__count { color: #6B5A48; }
.fp-dark .md-section-head__hr { background: #EFE2C4; opacity: .1; }
.fp-dark .md-handwritten-head__title { color: #EFE2C4; }

.fp-dark .md-chip { color: #8E7C68; border-color: rgba(255,255,255,.1); }
.fp-dark .md-chip.md-chip-active { background: #EFE2C4; color: #1C130F; border-color: #EFE2C4; }

.fp-dark .md-stat-cell { border-color: rgba(255,255,255,.08); }

/* Greeting */
.fp-dark .md-greeting__h1 { color: #EFE2C4; }
.fp-dark .md-greeting__eyebrow { color: #6B5A48; }
.fp-dark .md-greeting__tagline { color: #6B5A48; }

/* Next meal card */
.fp-dark .md-next-meal {
  background: #231714;
  border-color: rgba(255,255,255,.07);
}
.fp-dark .md-next-meal__body { background: #231714; }
.fp-dark .md-next-meal__dish { color: #EFE2C4; }
.fp-dark .md-next-meal__meta { color: #6B5A48; }
.fp-dark .md-next-meal--empty .md-next-meal__caveat { color: #6B5A48; }

/* Use-it-soon section */
.fp-dark .md-use-soon {
  background: #231714;
  border-color: rgba(255,255,255,.07);
}
.fp-dark .md-use-soon__head { border-color: rgba(255,255,255,.06); }
.fp-dark .md-use-soon__title { color: #EFE2C4; }
.fp-dark .md-use-soon-row { border-color: rgba(255,255,255,.06); }
.fp-dark .md-use-soon__name { color: #EFE2C4; }
.fp-dark .md-use-soon__cta { background: rgba(200,71,46,.15); color: var(--pomodoro); }