/* ============================================================
   Стол — Custom CSS (поверх TailwindCSS CDN)
   Палитра: томат #E94B3C | сливочный #FFF8EE | базилик #6B9F4A | шоколад #2A1F1A
   Шрифты: Unbounded (заголовки) | Inter (текст)
   ============================================================ */

:root {
  --tomato:    #E94B3C;
  --cream:     #FFF8EE;
  --basil:     #6B9F4A;
  --chocolate: #2A1F1A;
  --gold:      #E6A23C;
  --lavender:  #A78BFA;
}

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

body {
  background-color: var(--cream);
  color: var(--chocolate);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Navigation links ---- */
.nav-link {
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4B5563;
  transition: color 0.15s, background-color 0.15s;
  text-decoration: none;
}
.nav-link:hover { color: var(--tomato); background-color: #FEF2F2; }
.nav-link-active { color: var(--tomato); background-color: #FEF2F2; }

/* ---- Dropdown items ---- */
.dropdown-item {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.1s;
}
.dropdown-item:hover { background-color: var(--cream); }

/* ---- Mobile nav items ---- */
.mobile-nav-item {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.15s;
}
.mobile-nav-item:hover { background-color: var(--cream); }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  background-color: var(--tomato);
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 4px 14px rgba(233,75,60,0.25);
  white-space: nowrap;
}
.btn-primary:hover {
  background-color: #d43a2b;
  box-shadow: 0 6px 20px rgba(233,75,60,0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.375rem;
  background-color: transparent;
  color: var(--chocolate);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 9999px;
  border: 2px solid #E5E0D8;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: var(--tomato);
  color: var(--tomato);
  background-color: #FEF2F2;
}

/* ---- Form Elements ---- */
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.375rem;
  letter-spacing: 0.01em;
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid #E9E0D4;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  color: var(--chocolate);
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  font-family: 'Inter', sans-serif;
}
.form-input:focus {
  border-color: var(--tomato);
  box-shadow: 0 0 0 3px rgba(233,75,60,0.12);
}
.form-input::placeholder { color: #9CA3AF; }
select.form-input { appearance: auto; }

/* ---- Lucide iconography: всегда inline-flex и правильный размер svg ---- */
[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
[data-lucide] svg {
  width: 1em;
  height: 1em;
  display: block;
}
/* Tailwind w-3 h-3 и пр. уже ставят размер на <i>; svg внутри подхватывает 1em */
.w-3.h-3[data-lucide] { font-size: 0.75rem; }
.w-4.h-4[data-lucide] { font-size: 1rem; }
.w-5.h-5[data-lucide] { font-size: 1.25rem; }
.w-6.h-6[data-lucide] { font-size: 1.5rem; }
.w-8.h-8[data-lucide] { font-size: 2rem; }

/* ---- Post body (страница /post/{slug}) — мобильные фиксы ---- */
.post-body { overflow-wrap: break-word; word-wrap: break-word; }
.post-body img,
.post-body iframe,
.post-body video {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}
.post-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body figure { margin-left: 0; margin-right: 0; }
.post-body figure img { width: 100%; }

/* ---- Measurement field (большой инпут с единицей справа) ---- */
.meas-field {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid #E9E0D4;
  border-radius: 0.875rem;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  overflow: hidden;
}
.meas-field:hover { border-color: #f0b7ad; }
.meas-field:focus-within {
  border-color: var(--tomato);
  box-shadow: 0 0 0 3px rgba(233,75,60,0.12);
}
.meas-field input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 0.85rem 0.5rem 0.85rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--chocolate);
  background: transparent;
  font-family: 'Unbounded','Inter',sans-serif;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.meas-field input::-webkit-outer-spin-button,
.meas-field input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.meas-field input::placeholder { color: #C8BFB4; font-weight: 500; }
.meas-field .unit {
  align-self: center;
  padding-right: 0.875rem;
  padding-left: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #B6A89A;
  pointer-events: none;
  white-space: nowrap;
}
.meas-field .step-btns {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #F1E8DC;
}
.meas-field .step-btns button {
  flex: 1 1 0;
  width: 1.85rem;
  background: #FFF8EE;
  color: var(--tomato);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: background-color .12s;
}
.meas-field .step-btns button:hover { background: #FCE9DF; }
.meas-field .step-btns button:active { background: #F8D6C5; }
.meas-field .step-btns button + button { border-top: 1px solid #F1E8DC; }

.meas-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9C8C7D;
  margin-bottom: 0.375rem;
}

html.theme-dark .meas-field {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,248,238,0.15);
}
html.theme-dark .meas-field input { color: var(--cream); }
html.theme-dark .meas-field .unit { color: #B6A89A; }
html.theme-dark .meas-field .step-btns { border-left-color: rgba(255,248,238,0.08); }
html.theme-dark .meas-field .step-btns button { background: rgba(0,0,0,0.25); color: var(--tomato); }
html.theme-dark .meas-field .step-btns button + button { border-top-color: rgba(255,248,238,0.08); }
html.theme-dark .meas-label { color: #B6A89A; }

/* ---- Recipe Cards ---- */
.recipe-card {
  background: #fff;
  border-radius: 1.25rem;
  border: 1.5px solid #E8DDC8;
  box-shadow: 0 2px 8px rgba(42,31,26,0.07), 0 1px 2px rgba(42,31,26,0.05);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
  text-decoration: none;
}
.recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(42,31,26,0.18), 0 6px 14px rgba(42,31,26,0.10);
}

/* ---- Cuisine Tile ---- */
.cuisine-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.75rem;
  border-radius: 1.25rem;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
  cursor: pointer;
  min-height: 110px;
}
.cuisine-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* ---- Chip / Tag ---- */
.chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: var(--tomato);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---- КБЖУ badge ---- */
.badge-kcal {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  background-color: rgba(233,75,60,0.1);
  color: var(--tomato);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- Meta pill ---- */
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background-color: #F3EDE4;
  color: #6B7280;
  border-radius: 9999px;
  font-size: 0.8125rem;
}

/* ---- Flash Messages ---- */
.flash {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.flash-success { background-color: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.flash-error   { background-color: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.flash-info    { background-color: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; }
.flash-warning { background-color: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

/* ---- Hover lift animation (generic) ---- */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* ---- Prose overrides (for post content) ---- */
.prose h2, .prose h3 { font-family: 'Unbounded', sans-serif; color: var(--chocolate); }
.prose a { color: var(--tomato); text-decoration: underline; }
.prose blockquote { border-left-color: var(--tomato); background: var(--cream); padding: 1rem 1.5rem; border-radius: 0.5rem; }

/* ---- Scrollbar (optional, Webkit) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #D4C5B0; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--tomato); }

/* ---- Cook Mode specific ---- */
.cook-mode-body { background: var(--chocolate); color: var(--cream); }

/* ============================================================
   THEME — Light (default) + Dark
   ============================================================ */
:root {
  --bg-page:        #FFF8EE;   /* cream */
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   #FFFBF1;
  --bg-hover:       rgba(233, 75, 60, 0.06);
  --bg-active:      rgba(233, 75, 60, 0.10);
  --border-soft:    #FFE9D6;
  --border-strong:  #F4D9BC;
  --text-strong:    #2A1F1A;
  --text-body:      #3D2F26;
  --text-muted:     #8A7A6F;
  --shadow-soft:    0 1px 2px rgba(42,31,26,0.04), 0 1px 8px rgba(42,31,26,0.04);
  --shadow-pop:     0 8px 24px rgba(42,31,26,0.10);
}

html.theme-dark {
  --bg-page:        #1A1614;
  --bg-surface:     #221C19;
  --bg-surface-2:   #2A221E;
  --bg-hover:       rgba(233, 75, 60, 0.10);
  --bg-active:      rgba(233, 75, 60, 0.18);
  --border-soft:    #2E2622;
  --border-strong:  #3A2F29;
  --text-strong:    #FFF3DD;
  --text-body:      #E7DCC9;
  --text-muted:     #A38F7C;
  --chocolate:      #FFF3DD;
  --cream:          #1A1614;
  --shadow-soft:    0 1px 2px rgba(0,0,0,0.30), 0 1px 8px rgba(0,0,0,0.18);
  --shadow-pop:     0 12px 32px rgba(0,0,0,0.45);
}

html.theme-dark body { background-color: var(--bg-page); color: var(--text-body); }
html.theme-dark .bg-white { background-color: var(--bg-surface) !important; }
html.theme-dark .bg-cream { background-color: var(--bg-surface-2) !important; }
html.theme-dark .text-chocolate { color: var(--text-strong) !important; }
html.theme-dark .border-orange-100 { border-color: var(--border-soft) !important; }
html.theme-dark .border-orange-200 { border-color: var(--border-strong) !important; }
html.theme-dark .text-gray-400 { color: var(--text-muted) !important; }
html.theme-dark .text-gray-500 { color: var(--text-muted) !important; }
html.theme-dark .text-gray-600 { color: #B8A99A !important; }
html.theme-dark .text-gray-700 { color: #D4C5B0 !important; }
html.theme-dark .bg-orange-50, html.theme-dark .bg-orange-50\/60 { background-color: rgba(233,75,60,0.08) !important; }
html.theme-dark .bg-green-50, html.theme-dark .bg-green-50\/60  { background-color: rgba(107,159,74,0.10) !important; }
html.theme-dark .bg-purple-50, html.theme-dark .bg-purple-50\/60 { background-color: rgba(167,139,250,0.10) !important; }
html.theme-dark .bg-blue-50, html.theme-dark .bg-blue-50\/60   { background-color: rgba(96,165,250,0.10) !important; }
html.theme-dark .bg-orange-100 { background-color: rgba(233,75,60,0.16) !important; }
html.theme-dark .bg-green-100  { background-color: rgba(107,159,74,0.18) !important; }
html.theme-dark .bg-purple-100 { background-color: rgba(167,139,250,0.18) !important; }
html.theme-dark .bg-blue-100   { background-color: rgba(96,165,250,0.18) !important; }
html.theme-dark .shadow-sm, html.theme-dark .shadow-md, html.theme-dark .shadow-lg, html.theme-dark .shadow-xl, html.theme-dark .shadow-2xl { box-shadow: var(--shadow-pop) !important; }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select { background-color: var(--bg-surface-2); color: var(--text-body); }
html.theme-dark .bg-white\/95 { background-color: rgba(34,28,25,0.92) !important; }
/* Generic dark-text fixes — fallback for stray black text */
html.theme-dark .text-gray-800,
html.theme-dark .text-gray-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-slate-900,
html.theme-dark .text-black,
html.theme-dark .text-zinc-900 { color: var(--text-strong) !important; }
html.theme-dark .text-gray-300 { color: var(--text-muted) !important; }
html.theme-dark .text-gray-200 { color: var(--text-muted) !important; }
html.theme-dark a:not([class*="text-"]):not(.btn-primary):not(.btn-ghost) { color: var(--text-body); }
html.theme-dark a:not([class*="text-"]):not(.btn-primary):not(.btn-ghost):hover { color: var(--tomato); }
html.theme-dark h1:not([class*="text-"]),
html.theme-dark h2:not([class*="text-"]),
html.theme-dark h3:not([class*="text-"]),
html.theme-dark h4:not([class*="text-"]),
html.theme-dark h5:not([class*="text-"]),
html.theme-dark h6:not([class*="text-"]) { color: var(--text-strong); }

/* ===== Карточки рецептов, кухонь, плейсхолдеры — dark theme ===== */
html.theme-dark .recipe-card {
    background: var(--bg-surface) !important;
    border-color: var(--border-soft) !important;
}
html.theme-dark .recipe-card .text-chocolate,
html.theme-dark .recipe-card h3,
html.theme-dark .recipe-card h2,
html.theme-dark .recipe-card .recipe-title { color: var(--text-strong) !important; }
html.theme-dark .recipe-card .text-gray-500,
html.theme-dark .recipe-card .text-gray-400 { color: var(--text-muted) !important; }
html.theme-dark .recipe-card .bg-orange-50 { background-color: rgba(233,75,60,0.10) !important; }

/* Плейсхолдер карточки (без cover) */
html.theme-dark .recipe-card .aspect-\[4\/3\],
html.theme-dark .aspect-\[4\/3\] { background-color: rgba(233,75,60,0.10); }

/* Баджи поверх изображения (сложность, время, КБЖУ) — bg-white/90 в светлом, в темном другой фон */
html.theme-dark .bg-white\/90 { background-color: rgba(34,28,25,0.85) !important; color: var(--text-strong) !important; }
html.theme-dark .bg-white\/80 { background-color: rgba(34,28,25,0.78) !important; color: var(--text-strong) !important; }
html.theme-dark .bg-white\/70 { background-color: rgba(34,28,25,0.7) !important; color: var(--text-strong) !important; }

/* Cuisine tile — бренд-градиенты остаются яркими, но без изменений */

/* Бежевые/оранжевые блоки профиля */
html.theme-dark .bg-orange-50\/30,
html.theme-dark .bg-orange-50\/40,
html.theme-dark .bg-orange-50\/50,
html.theme-dark .bg-cream\/40,
html.theme-dark .bg-cream\/50,
html.theme-dark .bg-cream\/30 { background-color: rgba(233,75,60,0.07) !important; }

/* Янтарные / жёлтые бейджи аллергенов в холодильнике — ясный текст */
html.theme-dark .text-amber-700,
html.theme-dark .text-amber-800,
html.theme-dark .text-amber-900,
html.theme-dark .text-yellow-700,
html.theme-dark .text-yellow-800,
html.theme-dark .text-yellow-900,
html.theme-dark .text-orange-700,
html.theme-dark .text-orange-800,
html.theme-dark .text-orange-900,
html.theme-dark .text-red-700,
html.theme-dark .text-red-800,
html.theme-dark .text-red-900 { color: #FFD58E !important; }
html.theme-dark .bg-amber-50,
html.theme-dark .bg-yellow-50,
html.theme-dark .bg-red-50 { background-color: rgba(255,200,100,0.10) !important; }
html.theme-dark .bg-amber-100,
html.theme-dark .bg-yellow-100,
html.theme-dark .bg-red-100 { background-color: rgba(255,200,100,0.18) !important; }
html.theme-dark .border-amber-200,
html.theme-dark .border-yellow-200,
html.theme-dark .border-red-200 { border-color: rgba(255,200,100,0.30) !important; }

/* text-chocolate с opacity модификаторами (Tailwind JIT) — в dark theme их надо перевернуть на кремовый */
html.theme-dark .text-chocolate\/40 { color: rgba(255,243,221,0.40) !important; }
html.theme-dark .text-chocolate\/50 { color: rgba(255,243,221,0.50) !important; }
html.theme-dark .text-chocolate\/60 { color: rgba(255,243,221,0.65) !important; }
html.theme-dark .text-chocolate\/70 { color: rgba(255,243,221,0.75) !important; }
html.theme-dark .text-chocolate\/80 { color: rgba(255,243,221,0.85) !important; }
html.theme-dark .text-chocolate\/90 { color: rgba(255,243,221,0.92) !important; }

/* Аналогично bg-chocolate с opacity */
html.theme-dark .bg-chocolate\/5 { background-color: rgba(255,243,221,0.05) !important; }
html.theme-dark .bg-chocolate\/10 { background-color: rgba(255,243,221,0.08) !important; }
html.theme-dark .bg-chocolate\/20 { background-color: rgba(255,243,221,0.12) !important; }
html.theme-dark p:not([class*="text-"]),
html.theme-dark li:not([class*="text-"]),
html.theme-dark strong:not([class*="text-"]),
html.theme-dark em:not([class*="text-"]),
html.theme-dark blockquote:not([class*="text-"]) { color: var(--text-body); }
html.theme-dark .btn-ghost { color: var(--text-strong); border-color: var(--border-strong); }
html.theme-dark .btn-ghost:hover { color: var(--tomato); border-color: var(--tomato); background-color: rgba(233,75,60,0.08); }
html.theme-dark .prose,
html.theme-dark .prose * { color: var(--text-body); }
html.theme-dark .prose h1, html.theme-dark .prose h2, html.theme-dark .prose h3, html.theme-dark .prose h4 { color: var(--text-strong); }
html.theme-dark .prose a { color: var(--tomato); }
html.theme-dark .prose code { background-color: var(--bg-surface-2); color: var(--text-strong); }
html.theme-dark .prose strong { color: var(--text-strong); }
html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--text-muted) !important; }
html.theme-dark hr { border-color: var(--border-soft); }
html.theme-dark table { color: var(--text-body); }
html.theme-dark thead { background-color: var(--bg-surface-2); }
html.theme-dark .bg-gray-50, html.theme-dark .bg-gray-100, html.theme-dark .bg-slate-50, html.theme-dark .bg-slate-100 { background-color: var(--bg-surface-2) !important; }
html.theme-dark .border-gray-100, html.theme-dark .border-gray-200, html.theme-dark .border-slate-200 { border-color: var(--border-soft) !important; }
/* Tooltips for shopping/share buttons */
html.theme-dark .bg-orange-50\/40 { background-color: var(--bg-surface-2) !important; }
html.theme-dark .divide-orange-50 > * + * { border-color: var(--border-soft) !important; }
html.theme-dark .divide-orange-100 > * + * { border-color: var(--border-soft) !important; }

/* ============================================================
   SIDEBAR (VK-style left navigation)
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 248px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: width 0.18s ease;
}

.app-main {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem 1rem;
  text-decoration: none;
}
.sidebar-brand-text {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--tomato);
  letter-spacing: -0.01em;
}

.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.25rem 0.75rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.sidebar-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.875rem 0.875rem 0.375rem;
}

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
  margin-bottom: 0.125rem;
}
.side-link:hover { background: var(--bg-hover); color: var(--text-strong); }
.side-link.active {
  background: var(--bg-active);
  color: var(--tomato);
  font-weight: 600;
}
.side-link.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--tomato);
  border-radius: 0 3px 3px 0;
}
.side-link .side-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  stroke-width: 2;
}
.side-link .side-icon svg { width: 1.25rem; height: 1.25rem; }
.side-link.active .side-icon { color: var(--tomato); }
.side-link .side-icon-old {
  display: none;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}
.side-link .side-badge {
  margin-left: auto;
  background: var(--tomato);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  line-height: 1.2;
}
.side-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0.625rem 0.5rem;
}

.sidebar-footer {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border-soft);
}

/* Сворачиваемые группы в боковой панели */
.side-group {
  margin-top: 0.5rem;
}
.side-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color 0.12s, background-color 0.12s;
  -webkit-appearance: none;
}
.side-group-toggle .side-icon { width: 1rem; height: 1rem; opacity: 0.7; }
.side-group-toggle .side-icon svg { width: 1rem; height: 1rem; }
.side-group-toggle:hover { color: var(--text-strong); background: var(--bg-hover); }
.side-group-toggle .chev {
  margin-left: auto;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.2s ease;
}
.side-group.is-open > .side-group-toggle .chev { transform: rotate(180deg); }
.side-group-body {
  padding: 0.125rem 0 0.25rem 0.125rem;
}
.side-group .side-link { font-size: 0.9rem; padding-top: 0.4375rem; padding-bottom: 0.4375rem; }

/* Нижняя плашка с юзером */
.side-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--text-strong);
  background: var(--bg-soft, transparent);
  transition: background 0.12s;
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
}
.side-user:hover { background: var(--bg-hover); }
.side-user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--bg-hover);
  flex-shrink: 0;
}
.side-user-info { min-width: 0; flex: 1; }
.side-user-name { font-weight: 600; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-sub  { font-size: 0.75rem; color: var(--text-muted); line-height: 1.2; }
.side-user-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0; right: 0;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  padding: 0.375rem;
  z-index: 50;
}
html.theme-dark .side-user-menu { background: #2a2422; }
.side-user-menu .side-link { font-size: 0.875rem; padding: 0.4375rem 0.625rem; margin-bottom: 0; }
.side-user-menu hr { border: 0; height: 1px; background: var(--border-soft); margin: 0.25rem 0; }

html.theme-dark .side-group-toggle { color: var(--text-muted); }
html.theme-dark .side-group-toggle:hover { color: var(--text-strong); background: var(--bg-hover); }


.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 60px;
  padding: 0 1.25rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
html.theme-dark .app-topbar { background: rgba(34,28,25,0.92); }

.topbar-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 0.625rem;
  color: var(--text-body);
  background: transparent;
  border: none;
  cursor: pointer;
}
.topbar-burger:hover { background: var(--bg-hover); }

.theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-surface);
  color: var(--text-body);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.2s;
}
.theme-toggle:hover { background: var(--bg-hover); }
.theme-toggle:active { transform: scale(0.94); }

/* ---- Responsive sidebar: collapse to drawer on mobile/tablet ---- */
@media (max-width: 1023px) {
  .app-sidebar {
    position: fixed;
    top: 0; left: 0;
    /* 100dvh починит срез на iOS Safari из-за address bar; 100vh как fallback */
    height: 100vh;
    height: 100dvh;
    width: 84vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
  }
  .app-sidebar.is-open { transform: translateX(0); }
  .topbar-burger { display: inline-flex; }
  .app-main { width: 100%; }
  /* На мобилке делаем тап-зоны больше и плотнее, чтобы влезали все пункты */
  .side-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
  }
  .side-group { margin-top: 0.25rem; }
  .side-group-toggle {
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
  }
  .side-group .side-link {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
  }
  .side-user { padding: 0.625rem 0.625rem; }
  .side-user-avatar { width: 2.25rem; height: 2.25rem; }
  .sidebar-brand { padding: 0.875rem 1rem 0.625rem; }
  .sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  .sidebar-footer {
    flex-shrink: 0;
    padding: 0.625rem 0.875rem max(0.875rem, env(safe-area-inset-bottom));
  }
}
@media (max-width: 1023px) and (max-height: 720px) {
  /* На низких телефонах сжимаем ещё */
  .side-link { padding: 0.4375rem 0.75rem; font-size: 0.9rem; }
  .side-group .side-link { padding: 0.3125rem 0.75rem; font-size: 0.85rem; }
  .sidebar-brand { padding: 0.625rem 1rem 0.375rem; }
}

/* Backdrop when drawer is open */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 39;
}

/* ---- Dark mode overrides for common Tailwind utilities used in templates ---- */
html.theme-dark .from-cream,
html.theme-dark .via-orange-50,
html.theme-dark .to-red-50,
html.theme-dark .from-orange-50,
html.theme-dark .to-orange-50 { --tw-gradient-from: transparent !important; --tw-gradient-to: transparent !important; --tw-gradient-via: transparent !important; }
html.theme-dark section.bg-gradient-to-br,
html.theme-dark .bg-gradient-to-br,
html.theme-dark .bg-gradient-to-r,
html.theme-dark .bg-gradient-to-b { background-image: none !important; background-color: var(--bg-page) !important; }
html.theme-dark .text-gray-500 { color: var(--text-muted) !important; }
html.theme-dark .text-gray-600 { color: #C2B19E !important; }
html.theme-dark .text-gray-800, html.theme-dark .text-gray-900 { color: var(--text-strong) !important; }
html.theme-dark .border-gray-100, html.theme-dark .border-gray-200 { border-color: var(--border-soft) !important; }
html.theme-dark .ring-orange-100\/50 { --tw-ring-color: var(--border-soft) !important; }
html.theme-dark hr { border-color: var(--border-soft) !important; }
html.theme-dark .tomato-gradient-text,
html.theme-dark span.text-tomato { color: var(--tomato) !important; }
html.theme-dark .bg-orange-50\/60, html.theme-dark .bg-tomato\/10 { background-color: rgba(233,75,60,0.14) !important; }
html.theme-dark footer.bg-chocolate { background-color: #100C0A !important; }

/* ============================================================
   LAYOUT WIDTH — wider central area inside .app-main
   После перехода на sidebar (248px) основная зона осталась max-w-7xl (1280px),
   что на FullHD/2K оставляет много пустоты справа. Расширяем «потолок».
   ============================================================ */
@media (min-width: 1280px) {
  .app-main .max-w-7xl { max-width: 1440px; }
  .app-main .max-w-6xl { max-width: 1280px; }
  .app-main .max-w-5xl { max-width: 1120px; }
}
@media (min-width: 1600px) {
  .app-main .max-w-7xl { max-width: 1560px; }
}

/* Чтение длинных статей (журнал/гайды) — оставляем читабельные строки */
.app-main article.bg-white.rounded-2xl,
.app-main article.prose {
  /* ничего не трогаем — внутренний article сам ограничен grid'ом */
}

/* ===== /recipes filter panel — компактная и продуманная ===== */
.filter-panel { font-size: 13.5px; }

.filter-group {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.5));
  border-radius: 14px;
  overflow: hidden;
}
.filter-summary {
  cursor: pointer;
  padding: 0.625rem 0.875rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-strong, #2A1F1A);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  list-style: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-chev {
  color: #9ca3af;
  font-size: 0.75rem;
  transition: transform 0.2s;
}
.filter-group[open] .filter-chev { transform: rotate(180deg); }
.filter-body {
  padding: 0 0.875rem 0.875rem;
}
.filter-sublabel {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

/* Строка списка (категория, кухня, аллерген) */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem;
  border-radius: 8px;
  color: var(--text-body, #3D2F26);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.filter-row:hover { background: rgba(254, 235, 200, 0.55); }
.filter-row.is-active {
  background: rgba(233, 75, 60, 0.10);
  color: var(--tomato);
  font-weight: 600;
}
.filter-row.is-disabled { opacity: 0.4; pointer-events: none; }
.filter-count {
  font-size: 0.6875rem;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Кнопка «Ещё» */
.filter-more {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--tomato);
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.125rem 0.5rem;
}
.filter-more:hover { text-decoration: underline; }

/* Пилюли (диета, техника, повод) */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.6));
  background: rgba(255, 248, 238, 0.5);
  color: var(--text-body, #3D2F26);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.filter-pill:hover { background: rgba(254, 235, 200, 0.7); border-color: rgba(233, 75, 60, 0.3); }
.filter-pill.is-active {
  background: var(--tomato);
  border-color: var(--tomato);
  color: #fff;
  font-weight: 600;
}
.filter-pill-diet.is-active {
  background: var(--basil);
  border-color: var(--basil);
}
.filter-pill-occ.is-active {
  background: var(--chocolate);
  border-color: var(--chocolate);
}
.filter-pill.is-disabled { opacity: 0.4; pointer-events: none; }

/* Квадратики (время-кнопки, ингредиенты-max) */
.filter-square {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.5));
  background: rgba(255, 248, 238, 0.4);
  color: var(--text-body, #3D2F26);
  font-size: 0.75rem;
  text-decoration: none;
  transition: all 0.15s;
}
.filter-square:hover { background: rgba(254, 235, 200, 0.7); }
.filter-square.is-active {
  background: rgba(233, 75, 60, 0.12);
  border-color: var(--tomato);
  color: var(--tomato);
  font-weight: 600;
}
.filter-square.is-disabled { opacity: 0.4; pointer-events: none; }

/* Квадратики со стеком (сложность, сезон) */
.filter-square-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.5rem 0.25rem;
  border-radius: 10px;
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.5));
  background: rgba(255, 248, 238, 0.4);
  color: var(--text-body, #3D2F26);
  font-size: 0.6875rem;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 1.2;
}
.filter-square-stack:hover { background: rgba(254, 235, 200, 0.7); }
.filter-square-stack.is-active {
  background: rgba(233, 75, 60, 0.12);
  border-color: var(--tomato);
  color: var(--tomato);
  font-weight: 600;
}
.filter-square-stack.is-active-basil {
  background: rgba(107, 159, 74, 0.15);
  border-color: var(--basil);
  color: var(--basil);
}
.filter-square-stack.is-disabled { opacity: 0.4; pointer-events: none; }

/* Мини-чипы (ккал-бакеты) */
.filter-mini {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.5));
  background: rgba(255, 248, 238, 0.5);
  color: var(--text-body, #3D2F26);
  font-size: 0.6875rem;
  text-decoration: none;
  transition: all 0.15s;
}
.filter-mini:hover { background: rgba(254, 235, 200, 0.7); }
.filter-mini.is-active {
  background: var(--tomato);
  border-color: var(--tomato);
  color: #fff;
  font-weight: 600;
}

/* === /recipes — пресет-бар === */
.preset-bar {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.preset-bar::-webkit-scrollbar { display: none; }
.preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.6));
  color: var(--text-body, #3D2F26);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}
.preset-chip:hover {
  border-color: var(--tomato);
  color: var(--tomato);
  transform: translateY(-1px);
}
.preset-chip.is-active {
  background: var(--tomato);
  color: #fff;
  border-color: var(--tomato);
}

/* Dark theme переопределения для фильтров */
html.theme-dark .filter-group {
  background: var(--bg-surface);
  border-color: var(--border-soft);
}
html.theme-dark .filter-row:hover { background: rgba(233, 75, 60, 0.08); }
html.theme-dark .filter-pill,
html.theme-dark .filter-square,
html.theme-dark .filter-square-stack,
html.theme-dark .filter-mini {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
}
html.theme-dark .filter-pill:hover,
html.theme-dark .filter-square:hover,
html.theme-dark .filter-square-stack:hover,
html.theme-dark .filter-mini:hover {
  background: rgba(233, 75, 60, 0.08);
}
html.theme-dark .preset-chip {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
html.theme-dark .preset-chip:hover { background: var(--bg-surface-2); }

/* ===== Sticky-бар на /recipes ===== */
.recipes-stickybar {
  position: sticky;
  top: 64px; /* под глобальной .app-topbar (60px) + 4px отбивки */
  z-index: 25;
  transition: padding 0.18s ease;
}
.recipes-stickybar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-soft, rgba(254, 215, 170, 0.6));
  border-radius: 14px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
/* Когда «приклеился» — лёгкая тень + ярче кант */
.recipes-stickybar.is-stuck .recipes-stickybar-inner {
  box-shadow: 0 4px 14px rgba(42, 31, 26, 0.08), 0 1px 2px rgba(42, 31, 26, 0.04);
  border-color: var(--tomato);
}
html.theme-dark .recipes-stickybar.is-stuck .recipes-stickybar-inner {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.recipes-stickybar-count {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--tomato);
  font-variant-numeric: tabular-nums;
}
.recipes-stickybar-filters-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: rgba(233, 75, 60, 0.12);
  color: var(--tomato);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .recipes-stickybar { top: 56px; }
  .recipes-stickybar-inner { padding: 0.5rem 0.625rem; border-radius: 12px; }
  .recipes-stickybar-count { font-size: 1rem; }
}

/* ===========================================================
   LIGHT THEME — boost contrast (по просьбе: блоки слишком бледные)
   Чуть темнее границы, заметнее тени, чуть плотнее фон cream.
   =========================================================== */
html:not(.theme-dark) {
    --cream: #FFF8EE;
    --bg-page: #F5EDD8;          /* насыщеннее — чёткий тёплый фон */
    --bg-surface: #FFFFFF;
    --bg-surface-2: #FFF1DD;
    --border-soft: #D6C5A8;      /* заметнее */
    --border-strong: #C4AA84;    /* ярче */
    --text-secondary: #4B5563;   /* темнее серый текст */
    --text-muted: #6B7280;       /* чуть темнее чем раньше */
}
/* Текст — серый чуть темнее в светлой теме */
html:not(.theme-dark) .text-gray-400 { color: #6B7280 !important; }
html:not(.theme-dark) .text-gray-500 { color: #4B5563 !important; }
html:not(.theme-dark) .text-gray-600 { color: #374151 !important; }

html:not(.theme-dark) .border-orange-100 { border-color: #D6C5A8 !important; }
html:not(.theme-dark) .border-orange-200 { border-color: #C4AA84 !important; }

/* Карточки и блоки — заметная тень и граница */
html:not(.theme-dark) .bg-white {
    box-shadow: 0 2px 6px rgba(42,31,26,0.10), 0 1px 3px rgba(42,31,26,0.07);
    border: 1px solid #D6C5A8;
}
html:not(.theme-dark) .bg-white.border-0,
html:not(.theme-dark) .bg-white.shadow-none { box-shadow: none; border: none; }

html:not(.theme-dark) .shadow-sm,
html:not(.theme-dark) .bg-white.shadow-sm {
    box-shadow: 0 3px 8px rgba(42,31,26,0.11), 0 1px 3px rgba(42,31,26,0.07) !important;
}
html:not(.theme-dark) .shadow-md {
    box-shadow: 0 6px 16px rgba(42,31,26,0.13), 0 2px 6px rgba(42,31,26,0.08) !important;
}
html:not(.theme-dark) .shadow-lg {
    box-shadow: 0 12px 28px rgba(42,31,26,0.16), 0 4px 12px rgba(42,31,26,0.09) !important;
}
html:not(.theme-dark) .shadow-xl {
    box-shadow: 0 24px 40px rgba(42,31,26,0.18), 0 8px 18px rgba(42,31,26,0.10) !important;
}
html:not(.theme-dark) .shadow-2xl {
    box-shadow: 0 30px 55px rgba(42,31,26,0.22), 0 14px 28px rgba(42,31,26,0.12) !important;
}

/* Sidebar */
html:not(.theme-dark) .app-sidebar {
    border-right: 2px solid #D6C5A8;
    background-color: #FDF5E8;
}

/* Фильтры */
html:not(.theme-dark) .filter-row,
html:not(.theme-dark) .filter-square,
html:not(.theme-dark) .filter-pill,
html:not(.theme-dark) .filter-square-stack {
    border-color: #D6C5A8;
    background-color: #FFFBF4;
}
html:not(.theme-dark) .filter-row:hover,
html:not(.theme-dark) .filter-pill:hover {
    border-color: #C4AA84;
    background-color: #FFF6E8;
}
html:not(.theme-dark) .filter-row.is-active,
html:not(.theme-dark) .filter-pill.is-active {
    background-color: #E94B3C;
    border-color: #E94B3C;
    color: #ffffff !important;
    font-weight: 600;
}
html:not(.theme-dark) .filter-pill-diet.is-active {
    background-color: #6B9F4A;
    border-color: #6B9F4A;
    color: #ffffff !important;
}
html:not(.theme-dark) .filter-pill-occ.is-active {
    background-color: #2A1F1A;
    border-color: #2A1F1A;
    color: #ffffff !important;
}
html:not(.theme-dark) .filter-square.is-active,
html:not(.theme-dark) .filter-square-stack.is-active {
    background-color: rgba(233, 75, 60, 0.12);
    border-color: #E94B3C;
    color: #E94B3C !important;
    font-weight: 600;
}
html:not(.theme-dark) .filter-mini.is-active {
    background-color: #E94B3C;
    border-color: #E94B3C;
    color: #ffffff !important;
    font-weight: 600;
}
html:not(.theme-dark) .filter-row.is-active .filter-count,
html:not(.theme-dark) .filter-pill.is-active .filter-count {
    color: #ffffff !important;
    opacity: 0.85;
}

/* Cuisine tiles */
html:not(.theme-dark) .cuisine-tile {
    box-shadow: 0 4px 14px rgba(42,31,26,0.12);
}

/* recipe-card — усиленная граница */
html:not(.theme-dark) .recipe-card {
    border: 1.5px solid #D6C5A8 !important;
    box-shadow: 0 2px 8px rgba(42,31,26,0.09);
}
html:not(.theme-dark) .recipe-card:hover {
    border-color: #E94B3C !important;
    box-shadow: 0 8px 20px rgba(42,31,26,0.14) !important;
}

/* Цвет бейджей сложности */
html:not(.theme-dark) .border-orange-100 {
    border-width: 1.5px;
}

/* ============================================================
   DARK THEME — дополнительные overrides (2025-06 аудит)
   ============================================================ */

/* bg-white с opacity-модификаторами (Tailwind utility) */
html.theme-dark .bg-white\/50 { background-color: rgba(34,28,25,0.50) !important; }
html.theme-dark .bg-white\/60 { background-color: rgba(34,28,25,0.60) !important; }
html.theme-dark .bg-white\/30 { background-color: rgba(34,28,25,0.30) !important; }
html.theme-dark .bg-white\/20 { background-color: rgba(34,28,25,0.20) !important; }

/* Form elements */
html.theme-dark .form-input {
  background-color: var(--bg-surface-2);
  color: var(--text-body);
  border-color: var(--border-strong);
}
html.theme-dark .form-label { color: var(--text-strong); }

/* Dropdown items */
html.theme-dark .dropdown-item { color: var(--text-body) !important; }
html.theme-dark .dropdown-item:hover { background-color: var(--bg-hover) !important; }

/* Meta pills */
html.theme-dark .meta-pill {
  background-color: var(--bg-surface-2);
  color: var(--text-muted);
}

/* Badge kcal */
html.theme-dark .badge-kcal {
  background-color: rgba(233,75,60,0.20);
  color: #FF9980;
}

/* prose overrides — inline code blocks inside Markdown content */
html.theme-dark .prose blockquote {
  background-color: var(--bg-surface-2);
  border-left-color: var(--tomato);
}

/* bg-cream/* Tailwind JIT opacity variants */
html.theme-dark [class*="bg-cream\/"] { background-color: var(--bg-surface-2) !important; }

/* CLS — images without defined dimensions get height through aspect-ratio container;
   make sure inline-block images don't collapse before load */
img { display: block; }

/* Difficulty badges in diets — dark overrides */
html.theme-dark .bg-green-100.text-green-700 { background-color: rgba(107,159,74,0.20) !important; color: #8FCA70 !important; }
html.theme-dark .bg-yellow-100.text-yellow-700 { background-color: rgba(230,162,60,0.18) !important; color: #F0C060 !important; }
html.theme-dark .bg-red-100.text-red-700 { background-color: rgba(233,75,60,0.20) !important; color: #FF8070 !important; }

/* Sticky recipe info panel on desktop */
html.theme-dark .sticky { background-color: var(--bg-surface); }

/* Prose inside posts/show: text-gray-700 content wrapper */
html.theme-dark .prose > div.text-gray-700 { color: var(--text-body) !important; }
html.theme-dark .prose > div.text-gray-700 h2,
html.theme-dark .prose > div.text-gray-700 h3 { color: var(--text-strong) !important; }

/* Skeleton loaders / placeholder elements */
html.theme-dark .animate-pulse { background-color: var(--bg-surface-2) !important; }

/* Navigation active states — already set via CSS var, but ensure sidebar dark looks fine */
html.theme-dark .side-link { color: var(--text-body); }
html.theme-dark .side-link:hover { background: var(--bg-hover); color: var(--text-strong); }
html.theme-dark .side-link.active { background: var(--bg-active); color: var(--tomato); }
html.theme-dark .sidebar-section-title { color: var(--text-muted); }

/* Search input in topbar */
html.theme-dark input[type="text"].w-full,
html.theme-dark input[name="q"] {
  background-color: var(--bg-surface-2);
  color: var(--text-body);
  border-color: var(--border-strong);
}

/* Search dropdown result items */
html.theme-dark [x-show*="open"] .bg-white {
  background-color: var(--bg-surface) !important;
}