/* ═══════════════════════════════════════════════════════════════
   Коллекция рецептов — "Botanical Elegance" Design System
   Warm, airy, modern — pure CSS for Flask + Jinja2
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design Tokens (Mega Modern Green Glassmorphism v3) ── */
:root {
    --green-deep: #2d5a3d;
    --green-mid: #4a7c59;
    --green-light: #6ba37a;
    --green-pale: #a8cf9f;
    --green-bg: #c8e0c4;
    
    /* Маппинг под старые названия для совместимости */
    --ivory: #c8e0c4;
    --warm-white: #eef5ec;
    --linen: #d4e8d0;
    --sage-mist: #a8cf9f;
    --sage: #6ba37a;
    --sage-mid: #4a7c59;
    --sage-deep: #2d5a3d;
    --forest: #1a3d28;
    --copper: #4a7c59;
    --copper-light: #6ba37a;
    --copper-pale: #a8cf9f;
    --gold: #2d5a3d;
    --gold-pale: #4a7c59;
    --blush: #a8cf9f;
    --cream: #d4e8d0;

    --text-primary: #1a3d28;
    --text-secondary: #2d5a3d;
    --text-muted: #4a7c59;
    --text-inverse: #f0f7ee;

    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-hover: rgba(255, 255, 255, 0.22);
    --glass-bg-solid: rgba(255, 255, 255, 0.32);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-accent: rgba(74, 124, 89, 0.2);
    --glass-shadow-sm: 0 2px 8px rgba(45, 90, 61, 0.04);
    --glass-shadow: 0 4px 20px rgba(45, 90, 61, 0.06);
    --glass-shadow-lg: 0 8px 40px rgba(45, 90, 61, 0.08);
    --glass-shadow-xl: 0 16px 64px rgba(45, 90, 61, 0.1);

    --radius-sm: 0.75rem;
    --radius: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-2xl: 2.5rem;

    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ═══════════════════════════════════════
   BODY & BACKGROUND
   ═══════════════════════════════════════ */
body {
    padding-top: 0 !important;
    min-height: 100vh;
    background: var(--ivory);
    font-family: var(--font-body);
    color: var(--text-primary);
    margin: 0;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Particle Canvas (full page, not viewport) ── */
#particle-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ── Noise Overlay ── */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════
   SOFT BACKGROUND ORBS
   ═══════════════════════════════════════ */
.bg-blobs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.bg-blobs .blob {
    position: absolute;
    border-radius: 50%;
}
.bg-blobs .blob-1 {
    top: -120px; left: -80px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(143, 166, 143, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    animation: orb-drift-1 30s ease-in-out infinite;
}
.bg-blobs .blob-2 {
    top: 20%; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(196, 145, 94, 0.1) 0%, transparent 70%);
    filter: blur(90px);
    animation: orb-drift-2 35s ease-in-out infinite;
}
.bg-blobs .blob-3 {
    bottom: 10%; left: 20%;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(184, 150, 62, 0.08) 0%, transparent 70%);
    filter: blur(100px);
    animation: orb-drift-3 28s ease-in-out infinite;
}
.bg-blobs .blob-warm {
    top: -5%; left: 40%;
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, rgba(212, 160, 120, 0.08) 0%, transparent 60%);
    filter: blur(100px);
}

@keyframes orb-drift-1 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -25px); }
    66% { transform: translate(-20px, 20px); }
}
@keyframes orb-drift-2 {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-25px, 20px); }
    66% { transform: translate(15px, -30px); }
}
@keyframes orb-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(25px, -15px); }
}

/* ═══════════════════════════════════════
   MAIN WRAPPER
   ═══════════════════════════════════════ */
.main-wrapper {
    position: relative;
    z-index: 10;
    padding-bottom: 100px;
}
.main-wrapper > .container {
    max-width: 1140px;
}

/* ═══════════════════════════════════════
   GLASS CLASSES
   ═══════════════════════════════════════ */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.glass-solid {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.8);
}
.glass-dark {
    background: rgba(45, 59, 45, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--glass-shadow-lg);
    color: var(--text-inverse);
}
.glass-morph-3d {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--glass-shadow-xl), inset 0 1px 0 rgba(255,255,255,0.9);
}
.glass-dialog {
    background: rgba(250, 248, 244, 0.85);
    backdrop-filter: blur(32px) saturate(1.3);
    -webkit-backdrop-filter: blur(32px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: var(--glass-shadow-xl);
}
.glass-border-gradient::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(139,166,139,0.15), rgba(196,145,94,0.1), rgba(255,255,255,0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* ═══════════════════════════════════════
   TITLE BANNER — Full Width, Bold, Edgy
   ═══════════════════════════════════════ */
.title-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 32vh;
    min-height: 220px;
    max-height: 400px;
    overflow: hidden;
    background: linear-gradient(160deg, #1a2a1a 0%, #2D3B2D 30%, #3a4f3a 60%, #1a2a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
#title-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.title-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 2rem;
}
.edgy-title {
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 700;
    color: transparent;
    background: linear-gradient(
        135deg,
        #FAF8F4 0%,
        #E8CDB0 20%,
        #C4915E 40%,
        #FAF8F4 60%,
        #D4A574 80%,
        #FAF8F4 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: edgy-gradient 8s ease-in-out infinite, edgy-fade-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
    letter-spacing: -0.01em;
    line-height: 1.2;
    filter: drop-shadow(0 2px 16px rgba(196, 145, 94, 0.25));
    opacity: 0;
    transform: translateY(20px);
}
@keyframes edgy-gradient {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}
@keyframes edgy-fade-in {
    to { opacity: 1; transform: translateY(0); }
}
.title-line {
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(196,145,94,0.7), rgba(232,205,176,0.5), transparent);
    margin: 1rem auto 0;
    border-radius: 1px;
    animation: title-line-grow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}
@keyframes title-line-grow {
    to { width: 180px; }
}

/* ═══════════════════════════════════════
   NAVBAR (Floating, Airy)
   ═══════════════════════════════════════ */
.floating-navbar, .navbar.floating-navbar {
    background: rgba(250, 248, 244, 0.7) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.5) !important;
    box-shadow: 0 1px 12px rgba(45,59,45,0.04) !important;
    border-radius: 0 !important;
    padding: 0.5rem 1.5rem;
    z-index: 100;
    position: relative;
    transition: all var(--transition-smooth);
}
.floating-navbar.scrolled, .navbar.floating-navbar.scrolled {
    background: rgba(250, 248, 244, 0.9) !important;
    box-shadow: 0 2px 24px rgba(45,59,45,0.06) !important;
}
.floating-navbar .navbar-brand,
.navbar.floating-navbar .navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--forest) !important;
}
.floating-navbar .nav-link,
.navbar.floating-navbar .nav-link {
    color: var(--text-secondary) !important;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: 2rem;
    transition: all var(--transition-fast);
    position: relative;
}
.floating-navbar .nav-link:hover,
.navbar.floating-navbar .nav-link:hover {
    color: var(--sage-deep) !important;
    background: rgba(107, 143, 113, 0.08);
}
.floating-navbar .nav-link i,
.navbar.floating-navbar .nav-link i {
    font-size: 0.8rem;
    margin-right: 4px;
    opacity: 0.7;
}
.floating-navbar .navbar-text,
.navbar.floating-navbar .navbar-text {
    color: var(--text-muted) !important;
    font-size: 0.82rem;
}
.navbar-toggler {
    border-color: var(--sage-mist) !important;
    padding: 0.3rem 0.6rem;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%236B8F71' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.admin-link {
    background: rgba(196, 145, 94, 0.1) !important;
    border: 1px solid rgba(196, 145, 94, 0.2) !important;
    color: var(--copper) !important;
    border-radius: 2rem !important;
}
.admin-link:hover {
    background: rgba(196, 145, 94, 0.18) !important;
}

/* ═══════════════════════════════════════
   HERO SLIDER (Full-width, Elegant)
   ═══════════════════════════════════════ */
.hero-slider-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}
.hero-slider {
    position: relative;
    height: 65vh;
    min-height: 400px;
    max-height: 650px;
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-slide.active {
    opacity: 1;
}
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(45, 59, 45, 0.05) 0%,
        rgba(45, 59, 45, 0.15) 30%,
        rgba(45, 59, 45, 0.55) 70%,
        rgba(45, 59, 45, 0.75) 100%
    );
}
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 3rem 2rem;
    z-index: 2;
}
.hero-slide-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
    margin-bottom: 0 !important;
}

/* ── Quote Overlay on Slider ── */
.quote-overlay {
    background: rgba(250, 248, 244, 0.2);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 600px;
    box-shadow: var(--glass-shadow-lg);
}
.quote-overlay .ornament {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(196,145,94,0.3), transparent);
    margin: 0.8rem auto;
    max-width: 180px;
}
.chef-quote-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.chef-quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #fff;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.chef-quote-author {
    margin-top: 0.5rem;
    color: var(--copper-pale);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Slider Dots ── */
.slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}
.slider-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.4s ease;
    border: none;
    padding: 0;
}
.slider-dot.active {
    background: var(--copper-light);
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(196, 145, 94, 0.3);
}

/* ═══════════════════════════════════════
   3D FLIP CATEGORY CARDS
   ═══════════════════════════════════════ */
.flip-card {
    perspective: 1200px;
    cursor: pointer;
    height: 220px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.flip-card-inner {
    position: relative;
    width: 100%; height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.flip-card-front {
    box-shadow: var(--glass-shadow-lg);
}
.flip-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
    pointer-events: none;
}
.flip-card-front .cat-emoji {
    font-size: 3.2rem;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
    position: relative; z-index: 1;
}
.flip-card-front .cat-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
    text-align: center;
    padding: 0 0.5rem;
    position: relative; z-index: 1;
}

/* Category gradient backgrounds — warm, food-toned */
.flip-card-front.bg-baking { background: linear-gradient(135deg, #D4956B, #C4855A, #E8B896); }
.flip-card-front.bg-main-dish { background: linear-gradient(135deg, #8FA68F, #6B8F71, #A8C4A8); }
.flip-card-front.bg-pickles { background: linear-gradient(135deg, #7BA097, #5C8A80, #A0C4BC); }
.flip-card-front.bg-sides { background: linear-gradient(135deg, #B8A06B, #9C8A5A, #D4C090); }
.flip-card-front.bg-desserts { background: linear-gradient(135deg, #C49898, #B08080, #D8B8B8); }
.flip-card-front.bg-default { background: linear-gradient(135deg, var(--sage-mid), var(--sage), var(--sage-mist)); }
.flip-card-front.has-bg-image {
    background-size: cover;
    background-position: center;
}
.flip-card-front.has-bg-image::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}
.flip-card-front.has-bg-image .cat-emoji,
.flip-card-front.has-bg-image .cat-name { position: relative; z-index: 1; }

.flip-card-back {
    transform: rotateY(180deg);
    background: var(--glass-bg-solid);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
}
.flip-card-back .back-icon {
    font-size: 1.8rem;
    color: var(--copper);
    margin-bottom: 0.3rem;
}
.flip-card-back .back-count {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--forest);
    line-height: 1;
}
.flip-card-back .back-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.flip-card-back .back-action {
    margin-top: 0.5rem;
    padding: 0.35rem 1.1rem;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sage-deep);
    background: rgba(107, 143, 113, 0.1);
    border: 1px solid rgba(107, 143, 113, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: all var(--transition-fast);
}
.flip-card-back .back-action:hover {
    background: rgba(107, 143, 113, 0.18);
    transform: scale(1.03);
    text-decoration: none;
    color: var(--sage-deep);
}

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */
.card {
    background: var(--glass-bg-solid) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glass-shadow) !important;
    overflow: hidden;
    transition: all var(--transition-smooth);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-xl) !important;
}
.card-img-top {
    object-fit: cover;
    height: 200px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transition: transform 0.6s ease;
}
.card:hover .card-img-top {
    transform: scale(1.04);
}
.card-body { padding: 1.25rem; }
.card-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--forest) !important;
}
.card-text {
    color: var(--text-muted) !important;
    font-size: 0.82rem;
}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 2rem !important;
    padding: 0.5rem 1.25rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn:hover {
    background: var(--glass-bg-hover) !important;
    border-color: rgba(139, 166, 139, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow-sm);
    color: var(--forest) !important;
}
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary {
    background: var(--sage-mid) !important;
    color: #fff !important;
    border-color: var(--sage) !important;
}
.btn-primary:hover {
    background: var(--sage-deep) !important;
    box-shadow: 0 4px 16px rgba(74, 107, 80, 0.2);
}
.btn-success {
    background: var(--sage) !important;
    color: #fff !important;
    border-color: var(--sage-mid) !important;
}
.btn-danger {
    background: rgba(190, 90, 90, 0.75) !important;
    color: #fff !important;
    border-color: rgba(190, 90, 90, 0.5) !important;
}
.btn-danger:hover { background: rgba(190, 90, 90, 0.9) !important; }
.btn-warning {
    background: rgba(196, 145, 94, 0.8) !important;
    color: #fff !important;
    border-color: var(--copper-light) !important;
}
.btn-warning:hover { background: var(--copper) !important; }
.btn-info {
    background: rgba(139, 166, 139, 0.2) !important;
    color: var(--sage-deep) !important;
    border-color: rgba(139, 166, 139, 0.3) !important;
}
.btn-info:hover { background: rgba(139, 166, 139, 0.35) !important; }
.btn-secondary {
    background: var(--glass-bg-solid) !important;
    color: var(--text-secondary) !important;
    border-color: var(--glass-border) !important;
}
.btn-secondary:hover { background: var(--glass-bg-hover) !important; }
.btn-sm { font-size: 0.78rem; padding: 0.3rem 0.9rem; }
.btn-lg { font-size: 0.95rem; padding: 0.6rem 1.5rem; }

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */
.form-control, .form-control-file {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 166, 139, 0.2) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    padding: 0.65rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.form-control:focus, .form-control-file:focus {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--sage) !important;
    box-shadow: 0 0 0 3px rgba(107, 143, 113, 0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    outline: none;
}
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}
.form-group label, .col-form-label {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}
.form-text { color: var(--text-muted) !important; font-size: 0.75rem; }
.form-check-input:checked { background-color: var(--sage-mid); border-color: var(--sage-mid); }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%236B8F71' d='M8 11L3 6h10l-5 5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

/* ═══════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════ */
.alert {
    background: var(--glass-bg-solid) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-size: 0.88rem;
}
.alert-danger { border-color: rgba(190, 90, 90, 0.25) !important; background: rgba(190, 90, 90, 0.08) !important; color: #6B2D2D !important; }
.alert-success { border-color: rgba(107, 143, 113, 0.25) !important; background: rgba(107, 143, 113, 0.08) !important; }

/* ═══════════════════════════════════════
   HEADINGS
   ═══════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    color: var(--forest);
    font-weight: 700;
}
h2 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 1.25rem; }
h3 { font-family: var(--font-display); font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
a {
    color: var(--sage-mid);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}
a:hover { color: var(--sage-deep); text-decoration: none; }
hr { border-color: var(--linen) !important; }

/* ═══════════════════════════════════════
   TABLES
   ═══════════════════════════════════════ */
.table { color: var(--text-primary) !important; }
.table thead th {
    background: rgba(139, 166, 139, 0.08) !important;
    color: var(--forest);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--sage-mist) !important;
}
.table-bordered th, .table-bordered td { border-color: var(--linen) !important; }
.table td { vertical-align: middle; font-size: 0.85rem; }
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: rgba(139, 166, 139, 0.04) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.3) !important; }
.drag-handle { cursor: grab; font-size: 1.1rem; color: var(--text-muted); opacity: 0.5; transition: opacity 0.2s; }
.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }

/* ═══════════════════════════════════════
   CHAT INTERFACE
   ═══════════════════════════════════════ */
.chat-container {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: var(--glass-shadow-lg);
}
.chat-messages { max-height: 400px; overflow-y: auto; padding: 0.5rem; margin-bottom: 1rem; }
.chat-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    margin-bottom: 0.5rem;
    max-width: 85%;
    font-size: 0.88rem;
    line-height: 1.55;
}
.chat-bubble-user {
    background: rgba(107, 143, 113, 0.15);
    border: 1px solid rgba(107, 143, 113, 0.1);
    margin-left: auto;
    border-bottom-right-radius: 0.375rem;
    color: var(--forest);
}
.chat-bubble-ai {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    margin-right: auto;
    border-bottom-left-radius: 0.375rem;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════
   RECIPE VIEW
   ═══════════════════════════════════════ */
.recipe-ingredients {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.recipe-step {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.6rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    transition: all var(--transition-fast);
}
.recipe-step:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(4px);
}
.recipe-step-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(196, 145, 94, 0.12);
    color: var(--copper);
    font-weight: 700;
    font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}
.recipe-step:hover .recipe-step-num {
    background: var(--copper);
    color: #fff;
    transform: scale(1.1);
}
.recipe-step-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.comment-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all var(--transition-fast);
}
.comment-card:hover { background: rgba(255, 255, 255, 0.55); transform: translateY(-1px); }

/* ═══════════════════════════════════════
   PRODUCTS TAGS
   ═══════════════════════════════════════ */
.product-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 2rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition-fast);
}
.product-tag:hover { background: rgba(107, 143, 113, 0.1); border-color: rgba(107, 143, 113, 0.2); }
.product-tag .remove-tag {
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.2s;
    border: none; background: none; padding: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.product-tag .remove-tag:hover { opacity: 1; color: #BE5A5A; transform: scale(1.15); }

/* ═══════════════════════════════════════
   SEARCH RESULTS
   ═══════════════════════════════════════ */
.search-result-item {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all var(--transition-smooth);
}
.search-result-item:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(6px);
    box-shadow: var(--glass-shadow-sm);
    text-decoration: none;
}

/* ═══════════════════════════════════════
   ADMIN STAT CARDS
   ═══════════════════════════════════════ */
.stat-card {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    text-align: center;
    box-shadow: var(--glass-shadow);
    transition: all var(--transition-smooth);
}
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--glass-shadow-xl);
}
.stat-card .stat-number {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--forest);
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════
   AUTH BOX
   ═══════════════════════════════════════ */
.auth-box {
    max-width: 420px;
    margin: 2rem auto;
    background: rgba(250, 248, 244, 0.7);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 2.25rem;
    box-shadow: var(--glass-shadow-xl), inset 0 1px 0 rgba(255,255,255,0.9);
    animation: auth-enter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes auth-enter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.auth-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: var(--font-display);
}

/* ═══════════════════════════════════════
   PROFILE
   ═══════════════════════════════════════ */
.profile-card {
    background: var(--glass-bg-solid);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--glass-shadow-lg);
}
.profile-info p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.profile-info strong { color: var(--forest); }

/* ═══════════════════════════════════════
   AI RESULT
   ═══════════════════════════════════════ */
.ai-result-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1rem;
    animation: fade-up 0.4s ease;
}

/* ═══════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════ */
.section-title {
    font-family: var(--font-display);
    color: var(--forest);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2.5rem 0 1rem;
    position: relative;
    padding-bottom: 0.6rem;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 2px;
    background: linear-gradient(90deg, var(--copper), var(--copper-pale));
    border-radius: 1px;
    transition: width 0.4s ease;
}
.section-title:hover::after { width: 80px; }
.section-title i { color: var(--copper); margin-right: 8px; }

/* ═══════════════════════════════════════
   FLOATING NAV (Bottom Bar)
   ═══════════════════════════════════════ */
.nav-toggle-btn {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 51;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(250, 248, 244, 0.8);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: 0;
}
.nav-toggle-btn:hover {
    transform: scale(1.08);
    box-shadow: var(--glass-shadow-xl);
}
.nav-toggle-icon {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--sage-mid), var(--copper));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.floating-nav {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 50;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: rgba(250, 248, 244, 0.88);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: var(--glass-shadow-xl);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: all 0.3s ease;
}
.floating-nav.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.95);
}
.floating-nav .nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all var(--transition-fast);
    border: none;
    background: none;
    cursor: pointer;
}
.floating-nav .nav-btn:hover {
    background: rgba(107, 143, 113, 0.1);
    color: var(--sage-deep);
    text-decoration: none;
}
.floating-nav .nav-btn i {
    width: 20px;
    text-align: center;
    color: var(--copper);
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════ */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.revealed > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.revealed > *:nth-child(8) { transition-delay: 0.4s; }
.reveal-stagger.revealed > * { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════
   PAGE ENTER
   ═══════════════════════════════════════ */
.page-enter {
    animation: fade-up 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══════════════════════════════════════
   TILT CARD
   ═══════════════════════════════════════ */
.tilt-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}
.tilt-card:hover {
    box-shadow: var(--glass-shadow-xl);
}

/* ═══════════════════════════════════════
   CUSTOM SCROLLBAR
   ═══════════════════════════════════════ */
.chat-messages::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.chat-messages::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.02); border-radius: 2px; }
.chat-messages::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(139, 166, 139, 0.2); border-radius: 2px; }
.chat-messages::-webkit-scrollbar-thumb:hover,
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(139, 166, 139, 0.35); }

/* ═══════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════ */
.loading-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(107, 143, 113, 0.2);
    border-top-color: var(--sage-mid);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════ */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.82rem;
    transition: all var(--transition-smooth);
    text-decoration: none;
    margin-bottom: 1rem;
}
.back-link:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateX(-3px);
    color: var(--forest);
    text-decoration: none;
}
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}
.empty-state .empty-emoji {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    display: block;
    animation: float-gentle 4s ease-in-out infinite;
}
@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.empty-state p { font-size: 0.95rem; }
.form-check-input { width: 1.1em; height: 1.1em; border-color: var(--sage-mist); }
.img-preview {
    border-radius: var(--radius);
    border: 2px solid var(--glass-border);
    max-height: 120px;
    object-fit: cover;
}

/* ═══════════════════════════════════════
   CATEGORY GRID (5 columns on XL)
   ═══════════════════════════════════════ */
.col-lg-5-custom {
    flex: 0 0 20%;
    max-width: 20%;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1200px) {
    .col-lg-5-custom { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 768px) {
    .edgy-title { font-size: 2rem; }
    .title-banner { height: 24vh; min-height: 180px; }
    .hero-slider { height: 50vh; min-height: 320px; }
    .hero-slide-content { padding: 2rem 1.5rem; }
    .hero-slide-title { font-size: 2.2rem; }
    .flip-card { height: 190px; }
    .flip-card:hover .flip-card-inner { transform: none; }
    .flip-card-back { display: none; }
    .glass, .glass-solid { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .floating-nav { bottom: 0.75rem; right: 0.75rem; }
    .auth-box { margin: 1rem auto; padding: 1.5rem; }
    .container { padding-left: 12px; padding-right: 12px; }
    .stat-card .stat-number { font-size: 2.2rem; }
    .col-lg-5-custom { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 576px) {
    .edgy-title { font-size: 1.6rem; }
    .title-banner { height: 20vh; min-height: 150px; }
    .flip-card { height: 160px; }
    .flip-card-front .cat-emoji { font-size: 2.5rem; }
    .flip-card-front .cat-name { font-size: 1rem; }
    .col-lg-5-custom { flex: 0 0 50%; max-width: 50%; }
}
.site-title-on-slider {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-align: center;
}
.hero-slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-top: 3rem;
}
.quote-overlay {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 1.5rem 2.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.2);
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
@media (max-width: 768px) {
    .site-title-on-slider { font-size: 2.5rem; }
    .quote-overlay { padding: 1rem 1.5rem; }
}
@media (max-width: 576px) {
    .site-title-on-slider { font-size: 1.8rem; }
}
html, body {
    min-height: 100vh;
    height: auto;
}
.hero-slider-full {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.main-wrapper .container {
    padding-top: 0 !important;
}
body {
    padding-top: 0 !important;
}
/* Убрать отступы у слайдера */
.hero-slider-full {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.main-wrapper .container {
    padding-top: 0 !important;
}
body {
    padding-top: 0 !important;
}


/* ═══════════════════════════════════════
   V3 EXCLUSIVE UPDATES
   ═══════════════════════════════════════ */
body {
    background: linear-gradient(170deg, #d4e8d0, #c0dcbc, #a8cf9f, #b8d8b0, #c8e0c4) !important;
    background-attachment: fixed !important;
}

/* Блобы V3 (Больше blur, строго зеленые) */
.bg-blobs .blob-1 { background: radial-gradient(circle, rgba(45, 90, 61, 0.15) 0%, transparent 70%); filter: blur(120px); width: 800px; height: 800px; animation: blob-float-1 35s ease-in-out infinite; }
.bg-blobs .blob-2 { background: radial-gradient(circle, rgba(74, 124, 89, 0.12) 0%, transparent 70%); filter: blur(120px); width: 600px; height: 600px; animation: blob-float-2 28s ease-in-out infinite; }
.bg-blobs .blob-3 { background: radial-gradient(circle, rgba(107, 163, 122, 0.08) 0%, transparent 70%); filter: blur(120px); width: 450px; height: 450px; animation: blob-float-3 22s ease-in-out infinite; }
.bg-blobs .blob-warm { background: radial-gradient(circle, rgba(168, 207, 159, 0.1) 0%, transparent 70%); filter: blur(120px); width: 700px; height: 700px; animation: blob-float-4 30s ease-in-out infinite; }

@keyframes blob-float-1 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(80px, -60px) scale(1.2) rotate(10deg); } }
@keyframes blob-float-2 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-60px, 40px) scale(0.9) rotate(-5deg); } }
@keyframes blob-float-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 80px) scale(1.1); } }
@keyframes blob-float-4 { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-50px, -50px) scale(1.15) rotate(8deg); } }

/* Hero V3 (85vh, Shimmer, Strict Overlay) */
.hero-slider { height: 85vh !important; min-height: 55vh !important; }
@media (max-width: 768px) { .hero-slider { height: 55vh !important; } }
@media (max-width: 576px) { .hero-slider { height: 45vh !important; } }

.hero-slide::after {
    background: linear-gradient(180deg, rgba(15,40,25,0.25) 0%, rgba(15,40,25,0.45) 30%, rgba(15,40,25,0.8) 70%, rgba(15,40,25,0.95) 100%) !important;
}
.shimmer-layer {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.05) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmer-move 6s ease-in-out infinite;
}
@keyframes shimmer-move { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Заголовок слайдера V3 */
.site-title-on-slider {
    font-family: 'Playfair Display', serif !important;
    background: linear-gradient(135deg, #fff, #e8f5e9, #a8cf9f, #fff, #c8e6c9, #fff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: title-gradient-shift 8s ease infinite !important;
    filter: drop-shadow(0 2px 20px rgba(0,0,0,0.3)) drop-shadow(0 0 60px rgba(168,207,159,0.15)) !important;
    text-shadow: none !important;
}
@keyframes title-gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Цитата V3 (Пульсация, Углы) */
.quote-overlay {
    border-radius: 2rem !important;
    backdrop-filter: blur(32px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
    animation: glow-ring-pulse 4s ease-in-out infinite !important;
    position: relative;
}
@keyframes glow-ring-pulse { 0%,100%{box-shadow: 0 0 20px rgba(107,163,122,0.1)} 50%{box-shadow: 0 0 40px rgba(107,163,122,0.25)} }

.corner-deco { position: absolute; width: 20px; height: 20px; border-color: rgba(107,163,122,0.4); transition: all 0.3s ease; pointer-events: none; }
.corner-tl { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; border-radius: 4px 0 0 0; }
.corner-tr { top: 8px; right: 8px; border-top: 2px solid; border-right: 2px solid; border-radius: 0 4px 0 0; }
.corner-bl { bottom: 8px; left: 8px; border-bottom: 2px solid; border-left: 2px solid; border-radius: 0 0 0 4px; }
.corner-br { bottom: 8px; right: 8px; border-bottom: 2px solid; border-right: 2px solid; border-radius: 0 0 4px 0; }
.quote-overlay:hover .corner-deco { border-color: rgba(74, 124, 89, 0.8); width: 25px; height: 25px; }

/* Pills индикаторы цитаты */
.quote-pills { display: flex; gap: 8px; justify-content: center; margin-top: 1rem; }
.q-pill { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.4s ease; cursor: pointer; }
.q-pill.active { width: 24px; border-radius: 12px; background: var(--green-light); }

/* Кнопки V3 (Shimmer эффект) */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(transparent, rgba(255,255,255,0.2), transparent);
    transform: rotate(45deg) translateY(-100%); transition: transform 0.6s ease;
}
.btn:hover::after { transform: rotate(45deg) translateY(0); }

/* Floating Nav V3 (По центру снизу) */
.floating-nav {
    left: 50% !important; right: auto !important; bottom: 1.25rem !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important; align-items: center !important;
    background: rgba(255,255,255,0.35) !important;
    backdrop-filter: blur(32px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
    box-shadow: 0 8px 32px rgba(45, 90, 61, 0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    padding: 0.6rem 1rem !important;
}
.floating-nav .nav-btn { font-size: 0.75rem !important; padding: 0.4rem 0.8rem !important; white-space: nowrap; }
.nav-toggle-btn { display: none !important; } /* Прячем старую кнопку тоггла, навбар теперь всегда виден */
.floating-nav.hidden { opacity: 1 !important; transform: translateX(-50%) translateY(0) scale(1) !important; pointer-events: auto !important; }
@media (max-width: 768px) { .floating-nav { gap: 0.1rem !important; padding: 0.5rem !important; } .floating-nav .nav-btn span { display: none; } }

/* Декоративные элементы Hero */
.hero-decor { position: absolute; pointer-events: none; z-index: 2; }
.floating-window { width: 80px; height: 80px; border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(4px); border-radius: 12px; animation: float-decor 8s ease-in-out infinite; }
.floating-window.sq { width: 60px; height: 60px; border-radius: 16px; animation-duration: 6s; animation-delay: -2s; }
.floating-window.sm { width: 30px; height: 30px; border-radius: 50%; animation-duration: 7s; animation-delay: -4s; }
@keyframes float-decor { 0%,100%{transform: translateY(0)} 50%{transform: translateY(-20px)} }

.orbit-container { position: absolute; width: 140px; height: 140px; animation: orbit-spin 20s linear infinite; }
.orbit-dot { position: absolute; width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; box-shadow: 0 0 10px rgba(168,207,159,0.4); }
.orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.orbit-dot:nth-child(2) { bottom: 0; left: 50%; transform: translateX(-50%); }
.orbit-dot:nth-child(3) { left: 0; top: 50%; transform: translateY(-50%); }
@keyframes orbit-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.morph-shape {
    width: 250px; height: 250px; border: 1px solid rgba(255,255,255,0.08);
    position: absolute; backdrop-filter: blur(2px);
    animation: morph 14s ease-in-out infinite;
}
@keyframes morph {
    0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg); }
    50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; transform: rotate(180deg); }
    75% { border-radius: 60% 40% 60% 30% / 60% 40% 30% 60%; transform: rotate(270deg); }
}
@media (max-width: 768px) { .hero-decor { display: none !important; } }

/* ═══════════════════════════════════════
   V3 CRITICAL FIXES (Z-INDEX & SHIMMER)
   ═══════════════════════════════════════ */
/* Заставляем декорации быть НАД темным оверлеем слайдера */
.hero-slide::after { z-index: 1 !important; }
.shimmer-layer { z-index: 2 !important; }
#hero-particle-canvas { z-index: 3 !important; }
.hero-decor { z-index: 2 !important; opacity: 1 !important; background: rgba(255,255,255,0.05); }
.hero-slide-content { z-index: 10 !important; }

/* Правильный Шиммер на кнопках (чтобы текст был виден) */
.btn { position: relative !important; overflow: hidden !important; z-index: 1; }
.btn span, .btn i, .btn-text { position: relative; z-index: 2; }
.btn::after {
    content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; 
    width: 100% !important; height: 100% !important;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%) !important;
    transform: translateX(-100%) !important; 
    transition: transform 0.6s ease !important; 
    z-index: 1 !important;
}
.btn:hover::after { transform: translateX(100%) !important; }

/* Мобильная адаптация Floating Nav */
@media (max-width: 768px) {
    .floating-nav {
        left: 50% !important; right: auto !important; bottom: 0.75rem !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 2rem) !important;
        max-width: 400px !important;
        overflow-x: auto !important; /* Горизонтальный скролл если не влезает */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }
    .floating-nav::-webkit-scrollbar { display: none; } /* Прячем скроллбар */
    .floating-nav .nav-btn { flex-shrink: 0; }
}

/* ═══════════════════════════════════════
   HARD FIX: СЛАЙДЕР И ЦИТАТА
   ═══════════════════════════════════════ */

/* Жестко фиксируем размер карусели */
.hero-slider-full {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    overflow: hidden !important;
}

.hero-slider {
    position: relative !important;
    width: 100% !important;
    height: 85vh !important;
    min-height: 400px !important;
    max-height: 900px !important; /* Чтобы не был слишком гигантским на мониторах */
}

/* Жестко фиксируем слайды и обрезаем картинки */
.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    will-change: opacity;
}

/* Правильная структура контента слайда (столбиком) */
.hero-slide-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 3rem !important;
    height: 100% !important;
}

/* Заголовок сайта прижимаем к верху */
.site-title-on-slider {
    margin-bottom: auto !important; /* Толкает цитату вниз */
    padding-bottom: 2rem;
}

/* Плашка цитаты жестко ограничена по ширине и прижата к низу */
.quote-overlay {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    margin-bottom: 3rem !important; /* Отступ от низа слайдера */
    flex-shrink: 0 !important;
}

/* Точки навигации слайдера фиксируем внизу */
.slider-dots {
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
}

/* ═══════════════════════════════════════
   IRON CLAD FIX: КАРТИНКИ КАТЕГОРИЙ
   ═══════════════════════════════════════ */
.flip-card-front.has-bg-image {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    /* ОТКЛЮЧАЕМ стекломорфизм для карточек с картинками, чтобы не было серой мути */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

/* Красивый затемняющий градиент поверх картинки, чтобы текст был читаемым */
.flip-card-front.has-bg-image::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45)) !important;
    z-index: 1 !important;
    border-radius: inherit !important;
}

/* Выталкиваем текст и эмодзи поверх картинки и градиента */
.flip-card-front.has-bg-image .cat-emoji,
.flip-card-front.has-bg-image .cat-name {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6) !important;
}


/* ═══════════════════════════════════════
   ЖЕЛЕЗОБЕТОННЫЙ ФИКС КАРТИНОК (Приоритет МАКСИМУМ)
   ═══════════════════════════════════════ */
div.flip-card-front.has-bg-image {
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}
div.flip-card-front.has-bg-image::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.5) 100%) !important;
    z-index: 1 !important;
    border-radius: inherit !important;
}
div.flip-card-front.has-bg-image .cat-name,
div.flip-card-front.has-bg-image .cat-emoji {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
}


/* ═══════════════════════════════════════
   ПРЕМИУМ ЭФФЕКТЫ ДЛЯ КАТЕГОРИЙ (Всплытие + Тень)
   ═══════════════════════════════════════ */
.flip-card {
    /* Базовая тень (чтобы было от чего отрываться) */
    box-shadow: 0 8px 24px rgba(45, 90, 61, 0.08) !important;
    /* Плавная анимация подъема и тени */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s ease !important;
}

/* Эффект при наведении: всплывает на 12px и тень увеличивается */
.flip-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 30px 60px rgba(45, 90, 61, 0.2) !important;
}

/* Делаем сам переворот более плавным и "пружинистым" */
.flip-card-inner {
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* Украшаем обратную (стеклянную) сторону */
.flip-card-back {
    border: 1px solid rgba(255,255,255,0.35) !important;
    box-shadow: inset 0 0 40px rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}

/* На мобильных убираем 3D-переворот, оставляем только всплытие */
@media (max-width: 768px) {
    .flip-card:hover .flip-card-inner {
        transform: none !important;
    }
    .flip-card-back {
        display: none !important;
    }
}


/* ═══════════════════════════════════════
   LIVE AMBIENT ANIMATIONS (Живые анимации)
   ═══════════════════════════════════════ */

/* 1. Легкое "дыхание" главного контейнера */
@keyframes ambientGlow {
    0%, 100% { box-shadow: 0 8px 32px rgba(45, 90, 61, 0.05); }
    50% { box-shadow: 0 12px 48px rgba(168, 207, 159, 0.15); }
}
.main-wrapper > .container {
    animation: ambientGlow 8s ease-in-out infinite;
}

/* 2. Плавное покачивание для пустых плашек категорий */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
.flip-card-front.bg-default {
    animation: gentleFloat 6s ease-in-out infinite;
}
/* Чтобы карточки не ломались при наведении (убираем анимацию покачивания) */
.flip-card:hover .flip-card-front.bg-default {
    animation: none;
}

/* 3. Элегантное появление для алертов (уведомлений) */
@keyframes slideDownAlert {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.alert {
    animation: slideDownAlert 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 4. Пульсация иконок в меню */
.floating-nav .nav-btn i {
    transition: transform 0.3s ease, color 0.3s ease;
}
.floating-nav .nav-btn:hover i {
    transform: scale(1.2) rotate(10deg);
    color: var(--green-mid) !important;
}


/* ═══════════════════════════════════════
   PREMIUM FROSTED GLASS & NEW BACKGROUND
   ═══════════════════════════════════════ */

/* 1. Новый фон: идеальный холст для стекла */
body {
    background: linear-gradient(135deg, #e0e5ec 0%, #f5f7fa 100%) !important;
    background-attachment: fixed !important;
}

/* Адаптируем блобы под новый фон (делаем их мягко-серыми) */
.bg-blobs .blob-1 { background: radial-gradient(circle, rgba(150, 160, 180, 0.2) 0%, transparent 70%) !important; }
.bg-blobs .blob-2 { background: radial-gradient(circle, rgba(180, 190, 200, 0.15) 0%, transparent 70%) !important; }
.bg-blobs .blob-3 { background: radial-gradient(circle, rgba(120, 140, 160, 0.1) 0%, transparent 70%) !important; }
.bg-blobs .blob-warm { background: radial-gradient(circle, rgba(200, 210, 220, 0.12) 0%, transparent 70%) !important; }

/* 2. ШЛИФОВАННОЕ СТЕКЛО: Плашки категорий (без картинок) */
.flip-card-front.bg-default {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important; /* Яркий край стекла */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06) !important,
        inset 0 0 30px rgba(255, 255, 255, 0.3) !important; /* Внутреннее свечение матового стекла */
}

/* 3. ШЛИФОВАННОЕ СТЕКЛО: Карточки рецептов */
.card {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06) !important,
        inset 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

/* 4. ШЛИФОВАННОЕ СТЕКЛО: Обратная сторона категорий */
.flip-card-back {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.06) !important,
        inset 0 0 20px rgba(255, 255, 255, 0.4) !important;
}


/* ═══════════════════════════════════════
   TRUE 30% FROSTED GLASS & CRISP BG
   ═══════════════════════════════════════ */

/* 1. Четкий, контрастный фон (чтобы размытие за стеклом было заметно) */
body {
    background: linear-gradient(120deg, #dfe9f3 0%, #ffffff 50%, #eef2f3 100%) !important;
    background-attachment: fixed !important;
}

/* Обновляем блобы под четкий фон */
.bg-blobs .blob-1 { background: radial-gradient(circle, rgba(180, 195, 210, 0.25) 0%, transparent 70%) !important; }
.bg-blobs .blob-2 { background: radial-gradient(circle, rgba(160, 180, 200, 0.2) 0%, transparent 70%) !important; }

/* 2. Настоящее стекло на 30% (без фальшивого внутреннего свечения) */
.flip-card-front.bg-default {
    background: rgba(255, 255, 255, 0.3) !important; /* Чистые 30% */
    backdrop-filter: blur(25px) !important; /* Усилил размытие для эффекта матового стекла */
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    /* УБРАЛИ inset свечение! Только легкая падающая тень */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important; 
}

/* Так же поправляем карточки рецептов, чтобы стиль был единым */
.card {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important; /* Убрали inset */
}


/* ═══════════════════════════════════════
   ABSOLUTE TRANSPARENCY (NO UNDERLAY)
   ═══════════════════════════════════════ */

.flip-card-front.bg-default {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

.card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}


/* ═══════════════════════════════════════
   ABSOLUTE TRANSPARENCY (NO UNDERLAY)
   ═══════════════════════════════════════ */

.flip-card-front.bg-default {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}

.card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
}


/* ═══════════════════════════════════════
   WINDOWS 10 BEAUTY FIX (Сглаживание шрифтов)
   ═══════════════════════════════════════ */

/* 1. Принудительное антиалиасирование для всех элементов */
body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select, li, td, th, div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; /* Оптимизация для экранного чтения */
    font-feature-settings: 'kern' 1; /* Включает правильное кернинг (межбуквенное расстояние) */
}

/* 2. Жесткое указание запасных шрифтов для Windows (если Playfair не загрузится) */
/* Вместо уродливого стандартного Times New Roman будет красивый Georgia */
:root {
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    /* Вместо системного Arial будет красивый Segoe UI */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* 3. Убираем тонкие линии на Windows (где Windows обрезает полупиксели) */
.floating-nav, .flip-card-front, .flip-card-back, .card {
    -webkit-transform: translateZ(0); /* Включает аппаратное ускорение */
    transform: translateZ(0);
}


/* ═══════════════════════════════════════
   PHASE 1: УБИРАЕМ ПЕРЕВОРОТ, СТАНДАРТНЫЙ ШРИФТ, ЧИСТЫЕ КАРТИНКИ
   ═══════════════════════════════════════ */

/* 1. Полностью отключаем 3D-переворот */
.flip-card-inner { transform: none !important; }
.flip-card:hover .flip-card-inner { transform: none !important; }
.flip-card-back { display: none !important; } /* Прячем заднюю сторону */

/* Возвращаем нормальную видимость лицевой стороне */
.flip-card-front { 
    backface-visibility: visible !important; 
    position: relative !important;
    height: 100% !important;
}

/* 2. Убираем размытие с картинок категорий */
.flip-card-front.has-bg-image {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 3. Возвращаем СТАНДАРТНЫЙ читаемый шрифт (убираем Playfair) */
:root {
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body) !important;
    text-transform: none !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════
   GLOBALLY ENFORCE CAMBRIA FONT
   Залезаем в самые глубокие места
   ═══════════════════════════════════════ */
*, *::before, *::after {
    font-family: 'Cambria', 'Georgia', 'Times New Roman', serif !important;
    font-feature-settings: 'kern' 1 !important;
}

/* ПЕРЕНОСЫ СТРОК В РЕЦЕПТАХ (чтобы ингредиенты не слипались в строчку) */
.recipe-ingredients, .recipe-step-text, .recipe-description, 
#recipe-ingredients, .card-text, .ai-result-box p, .ai-result-box ol, 
.chat-bubble-ai p, .chat-bubble-ai ol {
    white-space: pre-line !important; 
}


/* ═══════════════════════════════════════
   FINAL FONT & NEWLINE FIX
   ═══════════════════════════════════════ */

/* 1. Переписываем корневые переменные на Cambria */
:root {
    --font-display: 'Cambria', 'Georgia', serif !important;
    --font-body: 'Cambria', 'Georgia', serif !important;
}

/* 2. Принудительно меняем шрифт в категориях */
.flip-card-front .cat-name { 
    font-family: 'Cambria', 'Georgia', serif !important; 
    font-weight: 700 !important;
}

/* 3. Гарантия переноса строк для текста рецептов */
p, li, .recipe-ingredients, .recipe-step-text, .card-text, 
.chat-bubble-ai p, .chat-bubble-ai ol {
    white-space: pre-wrap !important; 
}

/* ── Missing Admin Styles ── */
.reveal-stagger {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    padding: 20px 0;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}
.reveal-stagger a, .reveal-stagger .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px !important;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.btn-editor {
    background: var(--green-mid) !important;
    color: #fff !important;
    border: none !important;
}
.btn-editor:hover {
    background: var(--green-deep) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(45,90,61,0.15);
}
.stat-card {
    background: var(--glass-bg-solid);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
}
.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--green-mid);
}
.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Fix body and content visibility ── */
body {
    background: var(--warm-white) !important;
    color: var(--text-primary) !important;
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
}
h2 {
    color: var(--text-primary) !important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ── Table visibility fix ── */
.table {
    color: var(--text-primary) !important;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}
.table th {
    background: var(--green-bg) !important;
    color: var(--green-deep) !important;
    font-weight: 600;
    border-color: var(--glass-border) !important;
}
.table td {
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}