Как поменять дизайн стилей на свой

/* ============================================
CUSTOM CSS TEMPLATE — LITERAI
============================================
Скопируйте этот код в поле «Пользовательский CSS»
и отредактируйте по своему вкусу.
============================================ */

/* 1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ (Цветовая схема)
Переопределите семантические переменные для изменения общей палитры.
Все переменные определены в :root.
============================================ */
:root {
/* Фоны */
—bg-app: #0a0a0f; /* основной фон приложения */
—bg-surface-1: #12101a; /* фон поверхностей первого уровня */
—bg-surface-2: #1a1525;
—bg-surface-3: #241c30;
—bg-surface-4: #2d1f2f;
—bg-surface-5: #3a1f35;
—bg-input: #2d1f2f; /* фон полей ввода */
—glass-bg: color-mix(in srgb, var(—bg-surface-1), transparent 25%);
—glass-bg-heavy: color-mix(in srgb, var(—bg-surface-1), transparent 12%);
—glass-bg-light: color-mix(in srgb, var(—bg-surface-1), transparent 40%);

/* Текст */
—txt-primary: #e8d8c4; /* основной текст */
—txt-secondary: #a09080; /* второстепенный текст */
—txt-muted: #706050; /* приглушённый текст */
—txt-gold: #c4a35a; /* акцентный текст на тёмном фоне */
—txt-gold-light: #d4b96a; /* светлый акцент */
—txt-on-accent: #f0e4b8; /* текст на акцентных кнопках (обычно светлый) */
—txt-inverse: #0a0a0f; /* текст на светлом фоне (для инверсии) */

/* Границы */
—border-color: rgba(196, 163, 90, 0.2);
—border-subtle: rgba(196, 163, 90, 0.1);
—border-hover: rgba(196, 163, 90, 0.4);
—border-active: rgba(196, 163, 90, 0.6);
—border-accent: #a6894d;
—glass-border: rgba(196, 163, 90, 0.2);
—glass-border-hover: rgba(196, 163, 90, 0.4);

/* Акценты */
—accent-primary: #c4a35a; /* основной акцентный цвет */
—accent-secondary: #d4b96a;
—accent-tertiary: #a6894d;
—accent-success: #4a9e6e;
—accent-error: #c45a5a;
—accent-info: #5a8ec4;
—accent-warning: #e0a040;

/* Состояния */
—state-success: #4a9e6e;
—state-success-bg: rgba(74, 158, 110, 0.15);
—state-error: #c45a5a;
—state-error-bg: rgba(196, 90, 90, 0.15);
—state-info: #5a8ec4;
—state-info-bg: rgba(90, 142, 196, 0.15);
—state-warning: #e0a040;
—state-warning-bg: rgba(224, 160, 64, 0.15);

/* Тени */
—shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
—shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.18);
—shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25);
—shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.18), 0 8px 32px rgba(0, 0, 0, 0.30);
—shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.20), 0 16px 48px rgba(0, 0, 0, 0.35);

/* Эффекты */
—fx-shadow-gold: 0 0 16px rgba(196, 163, 90, 0.15), 0 0 36px rgba(196, 163, 90, 0.05);
—fx-glow-gold: 0 0 15px rgba(196, 163, 90, 0.2);
—fx-glass-blur: 16px;

/* Градиенты */
—grad-burgundy: linear-gradient(135deg, #4a2040, #3a1530); /* основной градиент кнопок */

/* Скроллбар */
—scrollbar-thumb: #241c30;
—scrollbar-thumb-hover: #c4a35a;

/* Разное */
—overlay-bg: rgba(10, 10, 15, 0.85);
—overlay-blur: 8px;
—focus-ring: 0 0 0 2px rgba(196, 163, 90, 0.35), 0 0 10px rgba(196, 163, 90, 0.08);
—input-focus-shadow: 0 0 0 2px rgba(196, 163, 90, 0.2), 0 0 14px rgba(196, 163, 90, 0.05);
}

/* 2. ОБЩИЕ СТИЛИ ДЛЯ КОМПОНЕНТОВ (опционально)
Можно переопределить конкретные компоненты.
============================================ */

/* Кнопки */
.btn-primary,
.step-btn-start,
.send-btn,
.export-btn-primary,
.modal-submit-btn {
/* Пример: замена градиента на сплошной цвет */
background: var(—accent-primary) !important;
color: var(—txt-inverse) !important;
border: none !important;
box-shadow: var(—shadow-sm) !important;
}

.btn-primary:hover,
.send-btn:hover {
background: var(—accent-secondary) !important;
transform: translateY(-1px) !important;
box-shadow: var(—shadow-md) !important;
}

.btn-secondary,
.step-btn-back,
.ie-btn,
.footer-btn {
background: var(—bg-surface-3) !important;
border: 1px solid var(—border-color) !important;
color: var(—txt-secondary) !important;
}

.btn-secondary:hover,
.footer-btn:hover {
background: var(—bg-surface-4) !important;
color: var(—txt-primary) !important;
border-color: var(—border-hover) !important;
}

/* Карточки каталога */
.catalog-card {
border: 1px solid var(—border-color);
background: var(—glass-bg);
backdrop-filter: blur(var(—fx-glass-blur));
}

.catalog-card:hover {
border-color: var(—border-hover);
box-shadow: var(—shadow-sm);
}

.catalog-card.selected {
border-color: var(—accent-primary);
background: linear-gradient(165deg, var(—card-selected-bg-from), var(—card-selected-bg-to));
box-shadow: 0 0 24px var(—card-selected-glow);
}

/* Аватары */
.card-avatar,
.message-avatar {
border-radius: 50%; /* или 0 для квадратных */
border: 2px solid var(—border-color);
}

/* Поля ввода */
.search-input,
.chat-input,
.panel-textarea,
.panel-input {
border: 1px solid var(—border-color);
background: var(—bg-input);
color: var(—txt-primary);
border-radius: var(—radius-md);
}

.search-input:focus,
.chat-input:focus {
border-color: var(—border-accent);
box-shadow: var(—input-focus-shadow);
}

/* Сообщения в чате */
.message-content {
background: var(—bg-surface-2);
border-radius: var(—radius-lg);
padding: var(—space-4);
}

.user-message .message-content {
border-left: 3px solid var(—accent-primary);
}

.bot-message-content {
border-left: 3px solid var(—accent-info);
}

/* Модальные окна */
.modal-box,
.modal-panel {
background: var(—bg-surface-1);
border: 1px solid var(—glass-border);
border-radius: var(—radius-xl);
box-shadow: var(—shadow-xl);
}

.modal-close {
background: var(—bg-surface-3);
border-color: var(—glass-border);
color: var(—txt-muted);
}

.modal-close:hover {
color: var(—txt-primary);
background: var(—bg-surface-4);
}

/* Шапка */
.app-header {
background: var(—glass-bg-heavy);
backdrop-filter: blur(var(—fx-glass-blur));
border-bottom: 1px solid var(—glass-border);
}

/* Подвал и панель инструментов */
.app-footer {
background: var(—glass-bg-heavy);
backdrop-filter: blur(var(—fx-glass-blur));
border-top: 1px solid var(—glass-border);
}

.footer-btn {
color: var(—txt-muted);
}

.footer-btn:hover {
color: var(—txt-gold);
}

/* Индикатор прогресса (шаги) */
.progress-step {
background: var(—bg-surface-3);
border: 2px solid var(—border-color);
color: var(—txt-muted);
}

.progress-step.active {
background: var(—grad-burgundy);
color: var(—txt-on-accent);
border-color: var(—border-accent);
box-shadow: var(—fx-shadow-gold);
}

.progress-step.completed {
border-color: var(—accent-primary);
color: var(—accent-primary);
}

/* Панель тегов */
.tag-btn {
background: var(—bg-surface-3);
border: 1px solid var(—border-color);
color: var(—txt-secondary);
}

.tag-btn.active {
background: var(—grad-burgundy);
color: var(—txt-on-accent);
border-color: transparent;
box-shadow: var(—fx-glow-gold);
}

.tag-btn.tag-new.active {
background: linear-gradient(135deg, var(—tag-new-bg-from), var(—tag-new-bg-to));
color: var(—tag-new-text);
}

.tag-btn.tag-custom.active {
background: linear-gradient(135deg, var(—tag-custom-bg-from), var(—tag-custom-bg-to));
color: var(—tag-custom-text);
}

/* Ползунки */
.panel-range::-webkit-slider-thumb {
background: var(—grad-burgundy);
border: 2px solid var(—accent-secondary);
}

.panel-range:focus-visible::-webkit-slider-thumb {
box-shadow: var(—focus-ring);
}

/* Скроллбар */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(—scrollbar-thumb);
border-radius: var(—radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: var(—scrollbar-thumb-hover);
}

/* 3. ДОПОЛНИТЕЛЬНЫЕ СТИЛИ (по желанию)
Например, изменить форму всех элементов, добавить текстуры.
============================================ */
* {
/* Убрать скругления */
/* border-radius: 0 !important; */
}

/* Можно добавить кастомный фон через body::before и т.п. */
body::before {
/* Свой фон */
background: radial-gradient(ellipse at 20% 80%, rgba(255,0,0,0.1) 0%, transparent 60%);
}

/* 4. МЕДИА-ЗАПРОСЫ (для адаптивности) */
@media (max-width: 768px) {
.catalog-card {
/* стили для мобильных */
}
}

/* ============================================
CUSTOM CSS TEMPLATE — LITERAI
ТЕМА: НЕОНОВЫЙ КИБЕРПАНК
ОСНОВА: КРАСНЫЕ ТОНА + НЕОНОВО-ЗЕЛЁНЫЕ АКЦЕНТЫ
============================================
Стиль: cyberpunk / neon / techno / red-core
Без фиолетовых и сиреневых оттенков.
============================================ */

/* 1. ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
============================================ */
:root {
/* Фоны */
—bg-app: #090506;
—bg-surface-1: #12090b;
—bg-surface-2: #1a0d10;
—bg-surface-3: #231114;
—bg-surface-4: #2d1518;
—bg-surface-5: #38181d;
—bg-input: #1a0f12;

—glass-bg: color-mix(in srgb, #160a0d, transparent 18%);
—glass-bg-heavy: color-mix(in srgb, #160a0d, transparent 8%);
—glass-bg-light: color-mix(in srgb, #160a0d, transparent 35%);

/* Текст */
—txt-primary: #ffe9e9;
—txt-secondary: #ffb8b8;
—txt-muted: #b97d7d;
—txt-gold: #7bff57;
—txt-gold-light: #b4ff9a;
—txt-on-accent: #0b1408;
—txt-inverse: #0a0d08;

/* Границы */
—border-color: rgba(255, 70, 70, 0.22);
—border-subtle: rgba(255, 70, 70, 0.10);
—border-hover: rgba(255, 90, 90, 0.42);
—border-active: rgba(255, 100, 100, 0.60);
—border-accent: #78ff4d;
—glass-border: rgba(255, 70, 70, 0.18);
—glass-border-hover: rgba(120, 255, 77, 0.45);

/* Акценты */
—accent-primary: #ff3b3b; /* неоново-красный */
—accent-secondary: #ff6b57; /* горячий красно-оранжевый */
—accent-tertiary: #b81f2f; /* глубокий красный */
—accent-success: #61ff6f; /* токсично-зелёный */
—accent-error: #ff4d4d;
—accent-info: #7dff5a; /* зелёный вместо синего */
—accent-warning: #ffb347;

/* Состояния */
—state-success: #61ff6f;
—state-success-bg: rgba(97, 255, 111, 0.14);
—state-error: #ff4d4d;
—state-error-bg: rgba(255, 77, 77, 0.14);
—state-info: #7dff5a;
—state-info-bg: rgba(125, 255, 90, 0.14);
—state-warning: #ffb347;
—state-warning-bg: rgba(255, 179, 71, 0.14);

/* Тени */
—shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.14);
—shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 2px 10px rgba(0, 0, 0, 0.24);
—shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25), 0 4px 18px rgba(0, 0, 0, 0.30);
—shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.30), 0 10px 34px rgba(0, 0, 0, 0.34);
—shadow-xl: 0 10px 22px rgba(0, 0, 0, 0.34), 0 18px 52px rgba(0, 0, 0, 0.40);

/* Эффекты */
—fx-shadow-gold:
0 0 18px rgba(255, 59, 59, 0.18),
0 0 36px rgba(255, 59, 59, 0.10),
0 0 10px rgba(120, 255, 77, 0.08);
—fx-glow-gold:
0 0 10px rgba(120, 255, 77, 0.22),
0 0 18px rgba(120, 255, 77, 0.12);
—fx-glow-red:
0 0 12px rgba(255, 59, 59, 0.26),
0 0 28px rgba(255, 59, 59, 0.10);
—fx-glow-green:
0 0 12px rgba(120, 255, 77, 0.28),
0 0 28px rgba(120, 255, 77, 0.12);
—fx-glass-blur: 16px;

/* Градиенты */
—grad-burgundy: linear-gradient(135deg, #ff3b3b 0%, #c81d25 45%, #7dff5a 140%);
—grad-cyber-red: linear-gradient(135deg, #ff4545 0%, #a8121d 100%);
—grad-cyber-green: linear-gradient(135deg, #9cff57 0%, #4cff7a 100%);
—grad-panel: linear-gradient(180deg, rgba(255, 50, 50, 0.06) 0%, rgba(0, 0, 0, 0) 100%);

/* Доп. переменные */
—card-selected-bg-from: rgba(255, 59, 59, 0.18);
—card-selected-bg-to: rgba(120, 255, 77, 0.08);
—card-selected-glow: rgba(120, 255, 77, 0.18);

—tag-new-bg-from: #7dff5a;
—tag-new-bg-to: #b6ff70;
—tag-new-text: #071006;

—tag-custom-bg-from: #ff4a4a;
—tag-custom-bg-to: #ff8457;
—tag-custom-text: #150606;

/* Скроллбар */
—scrollbar-thumb: #3a171a;
—scrollbar-thumb-hover: #78ff4d;

/* Разное */
—overlay-bg: rgba(8, 4, 5, 0.82);
—overlay-blur: 8px;
—focus-ring:
0 0 0 2px rgba(120, 255, 77, 0.34),
0 0 0 4px rgba(255, 59, 59, 0.12),
0 0 14px rgba(120, 255, 77, 0.10);
—input-focus-shadow:
0 0 0 1px rgba(120, 255, 77, 0.30),
0 0 0 3px rgba(255, 59, 59, 0.12),
0 0 18px rgba(120, 255, 77, 0.10);
}

/* 2. БАЗОВЫЕ ГЛОБАЛЬНЫЕ ЭФФЕКТЫ
============================================ */
html,
body {
background:
radial-gradient(circle at top left, rgba(255, 50, 50, 0.08), transparent 32%),
radial-gradient(circle at top right, rgba(120, 255, 77, 0.05), transparent 28%),
linear-gradient(180deg, #090506 0%, #0c0708 100%);
color: var(—txt-primary);
}

/* Киберпанк-сетка на фоне */
body::before {
content: «»;
position: fixed;
inset: 0;
pointer-events: none;
background:
linear-gradient(rgba(120, 255, 77, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(120, 255, 77, 0.035) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.04));
z-index: 0;
}

/* Неоновая подсветка */
body::after {
content: «»;
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 15% 20%, rgba(255, 59, 59, 0.12) 0%, transparent 25%),
radial-gradient(circle at 80% 18%, rgba(120, 255, 77, 0.10) 0%, transparent 22%),
radial-gradient(circle at 50% 85%, rgba(255, 80, 80, 0.08) 0%, transparent 28%);
z-index: 0;
}

/* Лёгкий техно-стиль для выделения */
::selection {
background: rgba(120, 255, 77, 0.28);
color: #081005;
}

/* 3. КНОПКИ
============================================ */
.btn-primary,
.step-btn-start,
.send-btn,
.export-btn-primary,
.modal-submit-btn {
background: var(—grad-cyber-red) !important;
color: var(—txt-primary) !important;
border: 1px solid rgba(255, 120, 120, 0.25) !important;
box-shadow: var(—shadow-sm), var(—fx-glow-red) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
position: relative;
overflow: hidden;
}

.btn-primary::before,
.step-btn-start::before,
.send-btn::before,
.export-btn-primary::before,
.modal-submit-btn::before {
content: «»;
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.14) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform 0.6s ease;
}

.btn-primary:hover::before,
.step-btn-start:hover::before,
.send-btn:hover::before,
.export-btn-primary:hover::before,
.modal-submit-btn:hover::before {
transform: translateX(120%);
}

.btn-primary:hover,
.send-btn:hover,
.step-btn-start:hover,
.export-btn-primary:hover,
.modal-submit-btn:hover {
background: linear-gradient(135deg, #ff5555 0%, #cf1b24 100%) !important;
transform: translateY(-1px) !important;
box-shadow: var(—shadow-md), 0 0 20px rgba(255, 59, 59, 0.22) !important;
}

.btn-secondary,
.step-btn-back,
.ie-btn,
.footer-btn {
background: linear-gradient(180deg, rgba(255, 70, 70, 0.05), rgba(0, 0, 0, 0.08)) !important;
border: 1px solid var(—border-color) !important;
color: var(—txt-secondary) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.btn-secondary:hover,
.step-btn-back:hover,
.ie-btn:hover,
.footer-btn:hover {
background: linear-gradient(180deg, rgba(120, 255, 77, 0.07), rgba(255, 70, 70, 0.05)) !important;
color: var(—txt-primary) !important;
border-color: var(—glass-border-hover) !important;
box-shadow: var(—fx-glow-green) !important;
}

/* 4. КАРТОЧКИ И ПАНЕЛИ
============================================ */
.catalog-card {
position: relative;
border: 1px solid var(—border-color);
background:
var(—grad-panel),
var(—glass-bg);
backdrop-filter: blur(var(—fx-glass-blur));
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
overflow: hidden;
}

.catalog-card::before {
content: «»;
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(120,255,77,0.06), transparent 35%, rgba(255,59,59,0.05));
opacity: 0.9;
}

.catalog-card:hover {
border-color: var(—border-hover);
box-shadow: var(—shadow-md), 0 0 20px rgba(255, 59, 59, 0.10);
transform: translateY(-2px);
}

.catalog-card.selected {
border-color: var(—accent-success);
background: linear-gradient(165deg, var(—card-selected-bg-from), var(—card-selected-bg-to));
box-shadow:
0 0 0 1px rgba(120, 255, 77, 0.18),
0 0 24px var(—card-selected-glow),
inset 0 0 24px rgba(255, 59, 59, 0.04);
}

/* 5. АВАТАРЫ
============================================ */
.card-avatar,
.message-avatar {
border-radius: 50%;
border: 2px solid rgba(120, 255, 77, 0.35);
box-shadow: 0 0 10px rgba(120, 255, 77, 0.10);
}

/* 6. ПОЛЯ ВВОДА
============================================ */
.search-input,
.chat-input,
.panel-textarea,
.panel-input {
border: 1px solid var(—border-color);
background:
linear-gradient(180deg, rgba(255, 60, 60, 0.04), rgba(0, 0, 0, 0.08)),
var(—bg-input);
color: var(—txt-primary);
border-radius: var(—radius-md);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.015);
}

.search-input::placeholder,
.chat-input::placeholder,
.panel-textarea::placeholder,
.panel-input::placeholder {
color: var(—txt-muted);
}

.search-input:focus,
.chat-input:focus,
.panel-textarea:focus,
.panel-input:focus {
border-color: var(—border-accent);
box-shadow: var(—input-focus-shadow);
outline: none;
}

/* 7. СООБЩЕНИЯ В ЧАТЕ
============================================ */
.message-content {
background:
linear-gradient(180deg, rgba(255, 59, 59, 0.04), transparent 100%),
var(—bg-surface-2);
border: 1px solid rgba(255, 70, 70, 0.10);
border-radius: var(—radius-lg);
padding: var(—space-4);
position: relative;
}

.message-content::before {
content: «»;
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(255,59,59,0.4), transparent);
}

.user-message .message-content {
border-left: 3px solid var(—accent-primary);
box-shadow: 0 0 18px rgba(255, 59, 59, 0.06);
}

.bot-message-content {
border-left: 3px solid var(—accent-info);
box-shadow: 0 0 18px rgba(120, 255, 77, 0.05);
}

/* 8. МОДАЛЬНЫЕ ОКНА
============================================ */
.modal-box,
.modal-panel {
background:
linear-gradient(180deg, rgba(255, 59, 59, 0.05), rgba(0,0,0,0)),
var(—bg-surface-1);
border: 1px solid var(—glass-border);
border-radius: var(—radius-xl);
box-shadow: var(—shadow-xl), 0 0 30px rgba(255, 59, 59, 0.12);
backdrop-filter: blur(var(—fx-glass-blur));
}

.modal-close {
background: var(—bg-surface-3);
border: 1px solid var(—glass-border);
color: var(—txt-muted);
}

.modal-close:hover {
color: var(—accent-success);
background: var(—bg-surface-4);
box-shadow: var(—fx-glow-green);
}

/* 9. ШАПКА И ПОДВАЛ
============================================ */
.app-header {
background:
linear-gradient(180deg, rgba(255, 59, 59, 0.06), rgba(0,0,0,0)),
var(—glass-bg-heavy);
backdrop-filter: blur(var(—fx-glass-blur));
border-bottom: 1px solid var(—glass-border);
box-shadow: 0 1px 0 rgba(120,255,77,0.08);
}

.app-footer {
background:
linear-gradient(180deg, rgba(120, 255, 77, 0.03), rgba(0,0,0,0)),
var(—glass-bg-heavy);
backdrop-filter: blur(var(—fx-glass-blur));
border-top: 1px solid var(—glass-border);
}

.footer-btn {
color: var(—txt-muted);
}

.footer-btn:hover {
color: var(—accent-success);
text-shadow: 0 0 10px rgba(120, 255, 77, 0.25);
}

/* 10. ИНДИКАТОР ШАГОВ
============================================ */
.progress-step {
background: var(—bg-surface-3);
border: 2px solid var(—border-color);
color: var(—txt-muted);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.progress-step.active {
background: linear-gradient(135deg, #ff3b3b 0%, #c41a22 60%, #7dff5a 160%);
color: var(—txt-primary);
border-color: var(—accent-success);
box-shadow: var(—fx-shadow-gold);
}

.progress-step.completed {
border-color: var(—accent-success);
color: var(—accent-success);
box-shadow: 0 0 12px rgba(120, 255, 77, 0.12);
}

/* 11. ТЕГИ
============================================ */
.tag-btn {
background: var(—bg-surface-3);
border: 1px solid var(—border-color);
color: var(—txt-secondary);
position: relative;
overflow: hidden;
}

.tag-btn:hover {
border-color: var(—accent-success);
color: var(—txt-primary);
}

.tag-btn.active {
background: linear-gradient(135deg, rgba(255,59,59,0.95), rgba(120,255,77,0.90));
color: #081005;
border-color: transparent;
box-shadow: var(—fx-glow-gold);
}

.tag-btn.tag-new.active {
background: linear-gradient(135deg, var(—tag-new-bg-from), var(—tag-new-bg-to));
color: var(—tag-new-text);
}

.tag-btn.tag-custom.active {
background: linear-gradient(135deg, var(—tag-custom-bg-from), var(—tag-custom-bg-to));
color: var(—tag-custom-text);
}

/* 12. ПОЛЗУНКИ
============================================ */
.panel-range {
accent-color: var(—accent-success);
}

.panel-range::-webkit-slider-runnable-track {
height: 6px;
background: linear-gradient(90deg, rgba(255,59,59,0.20), rgba(120,255,77,0.20));
border-radius: 999px;
}

.panel-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(—grad-cyber-green);
border: 2px solid #d9ffcb;
box-shadow: 0 0 12px rgba(120, 255, 77, 0.30);
}

.panel-range:focus-visible::-webkit-slider-thumb {
box-shadow: var(—focus-ring);
}

/* 13. СКРОЛЛБАР
============================================ */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #3a171a, #1e0d0f);
border-radius: var(—radius-full);
border: 1px solid rgba(255, 70, 70, 0.10);
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #78ff4d, #47c92c);
}

/* 14. ДОПОЛНИТЕЛЬНЫЕ СТИЛЕВЫЕ ФИШКИ
============================================ */

/* Техно-линии для ключевых блоков */
.catalog-card,
.modal-box,
.modal-panel,
.message-content,
.app-header,
.app-footer {
position: relative;
}

.catalog-card::after,
.modal-box::after,
.modal-panel::after,
.app-header::after,
.app-footer::after {
content: «»;
position: absolute;
top: 0;
right: 16px;
width: 56px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(120,255,77,0.85), transparent);
box-shadow: 0 0 10px rgba(120,255,77,0.25);
pointer-events: none;
}

/* Акцент на активных элементах интерфейса */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
box-shadow: var(—focus-ring);
}

/* Лёгкий «сканирующий» отблеск для крупных панелей */
.modal-box::before,
.modal-panel::before {
content: «»;
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
transparent 0%,
rgba(120, 255, 77, 0.03) 45%,
transparent 55%
);
mix-blend-mode: screen;
}

/* 15. МЕДИА-ЗАПРОСЫ
============================================ */
@media (max-width: 768px) {
body::before {
background-size: 24px 24px;
}

.catalog-card:hover {
transform: none;
}
}