:root {
    --bg-page: #060b16;
    --accent-blue: #2563eb;
    --light-blue: #60a5fa;
    --glass: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body {
    background-color: var(--bg-page);
    color: #cbd5e1;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

.bg-visual {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% -10%, rgba(37, 99, 235, 0.15), transparent 60%);
    z-index: -1;
}

/* ФИРМЕННАЯ КНОПКА НАЗАД */
.back-btn {
    position: fixed; top: 30px; left: 30px; z-index: 1000;
    color: #fff; text-decoration: none; font-weight: 700; text-transform: uppercase;
    font-size: 0.75rem; letter-spacing: 2px; background: rgba(37, 99, 235, 0.1);
    padding: 12px 24px; border: 1px solid var(--accent-blue); border-radius: 4px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.back-btn:hover { background: var(--accent-blue); box-shadow: 0 0 25px var(--accent-blue); transform: scale(1.1); }

/* ШАПКА */
.kuli-header { padding: 80px 20px 30px; text-align: center; }
.kuli-header h1 { font-family: 'Orbitron'; font-size: 3rem; letter-spacing: 8px; color: #fff; margin: 0; }
.subtitle { color: var(--accent-blue); letter-spacing: 4px; font-weight: bold; }

.kuli-container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* ПОИСК С АНИМАЦИЕЙ ЛИНИИ */
.search-wrapper { position: relative; margin-bottom: 40px; }
#recipeSearch {
    width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--glass-border);
    padding: 15px; color: #fff; font-size: 1rem; outline: none; transition: 0.3s;
}
.search-line {
    position: absolute; bottom: 0; left: 50%; width: 0; height: 2px;
    background: var(--accent-blue); transition: 0.4s ease; transform: translateX(-50%);
}
#recipeSearch:focus + .search-line { width: 100%; box-shadow: 0 0 15px var(--accent-blue); }

/* КАРТОЧКИ КАТЕГОРИЙ */
.category-grid { display: flex; gap: 25px; justify-content: center; margin-bottom: 50px; }
.cat-card {
    position: relative; background: var(--glass); border: 1px solid var(--glass-border);
    padding: 25px 50px; border-radius: 20px; cursor: pointer; overflow: hidden;
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); text-align: center;
}
.cat-glow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, var(--accent-blue), transparent 70%);
    opacity: 0; transition: 0.5s;
}
.cat-card.active { border-color: var(--accent-blue); transform: translateY(-10px); }
.cat-card.active .cat-glow { opacity: 0.15; }
.cat-card:hover { border-color: var(--light-blue); }

.cat-icon { font-size: 2.5rem; display: block; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }
.cat-name { font-family: 'Orbitron'; font-size: 0.9rem; color: #fff; letter-spacing: 2px; }

/* ТАБЛИЦА */
.table-container { background: var(--glass); border-radius: 20px; border: 1px solid var(--glass-border); padding: 10px; }
.recipe-table { width: 100%; border-collapse: collapse; }
.recipe-table th { 
    padding: 20px; text-align: left; font-family: 'Orbitron'; 
    font-size: 0.75rem; color: var(--light-blue); border-bottom: 1px solid var(--glass-border);
}
.recipe-table td { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.03); }

/* АНИМАЦИЯ ПОЯВЛЕНИЯ СТРОК */
.recipe-table tbody tr {
    opacity: 0; transform: translateY(20px);
    animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}

.recipe-table tr:hover { background: rgba(37, 99, 235, 0.05); }
.ing-list { color: var(--accent-blue); font-weight: 600; font-size: 0.9rem; }
.stat-val { font-family: 'Orbitron'; color: #fff; }