/* ============================================
   MODERN CSS VARIABLES - Bookish Theme 2025
   Только переменные и минимальные безопасные стили
   ============================================ */

:root {
    /* Цвета бренда - КРАСНО-БОРДОВЫЙ */
    --primary-color: #be003c;
    --primary-hover: #a00034;
    --primary-light: rgba(190, 0, 60, 0.1);
    
    /* Основные цвета */
    --text-color: #666;
    --heading-color: #444;
    --background-color: #fff;
    --border-color: #ddd;
    --border-light: #eee;
    
    /* Тени (современные многоуровневые) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 4px 12px rgba(190, 0, 60, 0.3);
    --shadow-primary-hover: 0 6px 16px rgba(190, 0, 60, 0.4);
    
    /* Типография */
    --font-family: 'Open Sans', Arial, sans-serif;
    --font-size-base: clamp(0.875rem, 2.5vw, 1rem); /* 14-16px */
    --font-size-sm: clamp(0.75rem, 2vw, 0.875rem);  /* 12-14px */
    --font-size-lg: clamp(1rem, 3vw, 1.125rem);     /* 16-18px */
    --line-height-base: 1.5;
    --line-height-tight: 1.25;
    
    /* Закругления */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    /* Переходы/Анимации */
    --transition-fast: all 0.15s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* Эффекты */
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(16px);
    
    /* Отступы */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}

/* ============================================
   МИНИМАЛЬНЫЕ БЕЗОПАСНЫЕ ГЛОБАЛЬНЫЕ СТИЛИ
   ============================================ */

/* Скроллбары (для webkit браузеров) - единственный безопасный глобальный стиль */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Плавная прокрутка */
html {
    scroll-behavior: smooth;
}

/* Selection (выделение текста) */
::selection {
    background-color: var(--primary-color);
    color: white;
}

::-moz-selection {
    background-color: var(--primary-color);
    color: white;
}

/* Accessibility - focus visible для клавиатурной навигации */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Анимация загрузки */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Skeleton loader для lazy loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ============================================
   YOUTUBE-INSPIRED IMPROVEMENTS 2025
   Современные улучшения производительности
   ============================================ */

/* Оптимизация производительности анимаций */
.product-thumb,
.btn,
.button,
.swiper-slide,
.catalog_item {
    will-change: auto; /* Браузер сам решает */
}

.product-thumb:hover,
.btn:hover,
.button:hover {
    will-change: transform, opacity; /* Подсказываем что будет анимироваться */
}

/* Touch Feedback - эффект нажатия (только для touch устройств) */
@media (hover: none) {
        .btn:active,
    button:active,
    a:active {
        transform: scale(0.97);
        transition: transform 0.1s cubic-bezier(.05, 0, 0, 1);
    }
}

/* ================================================
   8. LIQUID GLASS EFFECTS (Modern Trend)
   ================================================ */

/* Скляні кнопки з розмитим фоном */
.btn-glass,
.btn-outline-secondary,
.btn-outline-primary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color, #333);
    transition: all 0.3s ease;
}

.btn-glass:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Скляна навігаційна панель */
.navbar-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Скляні картки товарів */
.product-thumb.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.product-thumb.glass:hover {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Скляні модальні вікна */
.modal-glass .modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
}

.modal-glass .modal-backdrop {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні випадаючі меню */
.dropdown-menu.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Скляні інпут поля */
.form-control.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

.form-control.glass:focus {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(190, 0, 60, 0.3);
    box-shadow: 0 0 0 3px rgba(190, 0, 60, 0.1);
}

/* Скляні алерти */
.alert.glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: var(--text-color, #333);
}

/* Скляні бейджі */
.badge.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    color: var(--primary-color, #be003c);
}

/* Скляний футер */
#footer.glass {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Скляні tooltip */
.tooltip.glass .tooltip-inner {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
}

/* Скляні tabs */
.nav-tabs.glass .nav-link {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px 8px 0 0;
    color: var(--text-color, #333);
    margin-right: 4px;
}

.nav-tabs.glass .nav-link.active {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom-color: transparent;
}

/* Скляні акордеони */
.accordion.glass .card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin-bottom: 8px;
}

.accordion.glass .card-header {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 12px 0 0;
}

/* Скляні breadcrumbs */
.breadcrumb.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 16px;
}

/* Скляні pagination */
.pagination.glass .page-link {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color, #333);
    margin: 0 2px;
    border-radius: 6px;
}

.pagination.glass .page-link:hover,
.pagination.glass .page-item.active .page-link {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(190, 0, 60, 0.3);
    color: var(--primary-color, #be003c);
}

/* Скляні progress bars */
.progress.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    height: 8px;
}

.progress.glass .progress-bar {
    background: linear-gradient(45deg, var(--primary-color, #be003c), rgba(190, 0, 60, 0.8));
    border-radius: 8px;
}

/* Скляні спінери */
.spinner-border.glass {
    border-color: rgba(190, 0, 60, 0.3);
    border-right-color: var(--primary-color, #be003c);
}

/* Скляні чекбокси */
.form-check-input.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.form-check-input.glass:checked {
    background-color: var(--primary-color, #be003c);
    border-color: var(--primary-color, #be003c);
}

/* Скляні радіо кнопки */
.form-check-input[type="radio"].glass {
    border-radius: 50%;
}

/* Скляні селекти */
.form-select.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

.form-select.glass:focus {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(190, 0, 60, 0.3);
    box-shadow: 0 0 0 3px rgba(190, 0, 60, 0.1);
}

/* Скляні textarea */
.form-control.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
    resize: vertical;
}

.form-control.glass:focus {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(190, 0, 60, 0.3);
    box-shadow: 0 0 0 3px rgba(190, 0, 60, 0.1);
}

/* Скляні таблиці */
.table.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.table.glass thead th {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color, #333);
}

.table.glass tbody tr:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Скляні cards */
.card.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.card.glass:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Скляні list groups */
.list-group.glass .list-group-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color, #333);
}

.list-group.glass .list-group-item:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Скляні media objects */
.media.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
}

/* Скляні jumbotron */
.jumbotron.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-color, #333);
}

/* Скляні carousel indicators */
.carousel-indicators.glass li {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.carousel-indicators.glass .active {
    background: var(--primary-color, #be003c);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Скляні toast повідомлення */
.toast.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: var(--text-color, #333);
}

/* Скляні offcanvas */
.offcanvas.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

/* Скляні collapse елементи */
.collapse.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні спінери для завантаження */
.spinner-border.glass {
    border-color: rgba(190, 0, 60, 0.3);
    border-right-color: var(--primary-color, #be003c);
}

.spinner-grow.glass {
    background-color: rgba(190, 0, 60, 0.3);
}

.spinner-grow.glass::before {
    background-color: var(--primary-color, #be003c);
}

/* Скляні range sliders */
.form-range.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    height: 6px;
}

.form-range.glass::-webkit-slider-thumb {
    background: var(--primary-color, #be003c);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.form-range.glass::-moz-range-thumb {
    background: var(--primary-color, #be003c);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

/* Скляні floating labels */
.form-floating.glass > .form-control {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
}

.form-floating.glass > label {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-color, #333);
}

/* Скляні input groups */
.input-group.glass .form-control {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color, #333);
}

.input-group.glass .btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-color, #333);
}

.input-group.glass .btn:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Скляні validation states */
.form-control.glass.is-valid {
    border-color: #198754;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);
}

.form-control.glass.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Скляні file inputs */
.form-control.glass[type="file"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

.form-control.glass[type="file"]::-webkit-file-upload-button {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 6px;
    color: var(--primary-color, #be003c);
    padding: 4px 12px;
    margin-right: 8px;
}

/* Скляні color inputs */
.form-control.glass[type="color"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    height: 40px;
    padding: 4px;
}

/* Скляні datetime inputs */
.form-control.glass[type="datetime-local"],
.form-control.glass[type="date"],
.form-control.glass[type="time"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні search inputs */
.form-control.glass[type="search"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    color: var(--text-color, #333);
    padding-left: 40px;
}

.form-control.glass[type="search"]::-webkit-search-decoration,
.form-control.glass[type="search"]::-webkit-search-cancel-button,
.form-control.glass[type="search"]::-webkit-search-results-button,
.form-control.glass[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Скляні number inputs */
.form-control.glass[type="number"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

.form-control.glass[type="number"]::-webkit-outer-spin-button,
.form-control.glass[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control.glass[type="number"]:focus {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-color: rgba(190, 0, 60, 0.3);
    box-shadow: 0 0 0 3px rgba(190, 0, 60, 0.1);
}

/* Скляні tel inputs */
.form-control.glass[type="tel"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні url inputs */
.form-control.glass[type="url"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні email inputs */
.form-control.glass[type="email"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні password inputs */
.form-control.glass[type="password"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні text inputs */
.form-control.glass[type="text"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: var(--text-color, #333);
}

/* Скляні figure елементи */
.figure.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
}

/* Скляні blockquote */
.blockquote.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 4px solid var(--primary-color, #be003c);
    border-radius: 8px;
    padding: 16px;
    color: var(--text-color, #333);
}

/* Скляні pre елементи */
pre.glass {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f8f9fa;
    padding: 16px;
}

/* Скляні code елементи */
code.glass {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
}

/* Скляні kbd елементи */
kbd.glass {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Скляні samp елементи */
samp.glass {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
}

/* Скляні var елементи */
var.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні mark елементи */
mark.glass {
    background: rgba(255, 193, 7, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 4px;
    color: #856404;
    padding: 2px 6px;
}

/* Скляні small елементи */
small.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
}

/* Скляні strong елементи */
strong.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні em елементи */
em.glass {
    background: rgba(23, 162, 184, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 4px;
    color: #0c5460;
    padding: 2px 6px;
}

/* Скляні u елементи */
u.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--primary-color, #be003c);
    color: var(--text-color, #333);
    text-decoration: none;
}

/* Скляні ins елементи */
ins.glass {
    background: rgba(40, 167, 69, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: 4px;
    color: #155724;
    padding: 2px 6px;
    text-decoration: none;
}

/* Скляні del елементи */
del.glass {
    background: rgba(220, 53, 69, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 4px;
    color: #721c24;
    padding: 2px 6px;
    text-decoration: line-through;
}

/* Скляні s елементи */
s.glass {
    background: rgba(108, 117, 125, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(108, 117, 125, 0.2);
    border-radius: 4px;
    color: #383d41;
    padding: 2px 6px;
    text-decoration: line-through;
}

/* Скляні q елементи */
q.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-color, #333);
    padding: 8px 16px;
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Скляні cite елементи */
cite.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 4px solid var(--primary-color, #be003c);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 4px 8px;
    font-style: italic;
}

/* Скляні dfn елементи */
dfn.glass {
    background: rgba(23, 162, 184, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 4px;
    color: #0c5460;
    padding: 2px 6px;
    font-style: italic;
}

/* Скляні abbr елементи */
abbr.glass {
    background: rgba(255, 193, 7, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 4px;
    color: #856404;
    padding: 2px 6px;
    text-decoration: underline dotted;
}

/* Скляні time елементи */
time.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
}

/* Скляні data елементи */
data.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні meter елементи */
meter.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    height: 12px;
}

meter.glass::-webkit-meter-bar {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

meter.glass::-webkit-meter-optimum-value {
    background: linear-gradient(45deg, #28a745, rgba(40, 167, 69, 0.8));
    border-radius: 6px;
}

meter.glass::-webkit-meter-suboptimum-value {
    background: linear-gradient(45deg, #ffc107, rgba(255, 193, 7, 0.8));
    border-radius: 6px;
}

meter.glass::-webkit-meter-even-less-good-value {
    background: linear-gradient(45deg, #dc3545, rgba(220, 53, 69, 0.8));
    border-radius: 6px;
}

/* Скляні progress елементи */
progress.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    height: 12px;
}

progress.glass::-webkit-progress-bar {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

progress.glass::-webkit-progress-value {
    background: linear-gradient(45deg, var(--primary-color, #be003c), rgba(190, 0, 60, 0.8));
    border-radius: 6px;
}

progress.glass::-moz-progress-bar {
    background: linear-gradient(45deg, var(--primary-color, #be003c), rgba(190, 0, 60, 0.8));
    border-radius: 6px;
}

/* Скляні output елементи */
output.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 4px 8px;
}

/* Скляні details елементи */
details.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--text-color, #333);
}

details.glass summary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    cursor: pointer;
}

details.glass[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Скляні dialog елементи */
dialog.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    color: var(--text-color, #333);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Скляні picture елементи */
picture.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

/* Скляні canvas елементи */
canvas.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні svg елементи */
svg.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні video елементи */
video.glass {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
}

/* Скляні audio елементи */
audio.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні iframe елементи */
iframe.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* Скляні embed елементи */
embed.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні object елементи */
object.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні portal елементи */
portal.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* Скляні slot елементи */
slot.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні template елементи */
template.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні shadow елементи */
shadow.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні content елементи */
content.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні element елементи */
element.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні custom елементи */
custom.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні unknown елементи */
unknown.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні math елементи */
math.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні svg елементи всередині */
svg.glass circle,
svg.glass ellipse,
svg.glass line,
svg.glass path,
svg.glass polygon,
svg.glass polyline,
svg.glass rect {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні marker елементи */
marker.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні defs елементи */
defs.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні pattern елементи */
pattern.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні gradient елементи */
linearGradient.glass stop,
radialGradient.glass stop {
    stop-color: var(--primary-color, #be003c);
    stop-opacity: 0.8;
}

/* Скляні filter елементи */
filter.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні animate елементи */
animate.glass {
    fill: var(--primary-color, #be003c);
}

/* Скляні animateTransform елементи */
animateTransform.glass {
    fill: var(--primary-color, #be003c);
}

/* Скляні animateMotion елементи */
animateMotion.glass {
    fill: var(--primary-color, #be003c);
}

/* Скляні set елементи */
set.glass {
    fill: var(--primary-color, #be003c);
}

/* Скляні text елементи */
text.glass {
    fill: var(--text-color, #333);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні tspan елементи */
tspan.glass {
    fill: var(--text-color, #333);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні textPath елементи */
textPath.glass {
    fill: var(--text-color, #333);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні clipPath елементи */
clipPath.glass {
    fill: rgba(190, 0, 60, 0.1);
}

/* Скляні mask елементи */
mask.glass {
    fill: rgba(255, 255, 255, 0.8);
}

/* Скляні symbol елементи */
symbol.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні use елементи */
use.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні view елементи */
view.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні metadata елементи */
metadata.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні title елементи */
title.glass {
    fill: var(--text-color, #333);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні desc елементи */
desc.glass {
    fill: var(--text-color, #333);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні switch елементи */
switch.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні foreignObject елементи */
foreignObject.glass {
    fill: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні image елементи */
image.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Скляні feBlend елементи */
feBlend.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feColorMatrix елементи */
feColorMatrix.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feComponentTransfer елементи */
feComponentTransfer.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feComposite елементи */
feComposite.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feConvolveMatrix елементи */
feConvolveMatrix.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feDiffuseLighting елементи */
feDiffuseLighting.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feDisplacementMap елементи */
feDisplacementMap.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feDistantLight елементи */
feDistantLight.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feDropShadow елементи */
feDropShadow.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feFlood елементи */
feFlood.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feFuncA елементи */
feFuncA.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feFuncB елементи */
feFuncB.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feFuncG елементи */
feFuncG.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feFuncR елементи */
feFuncR.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feGaussianBlur елементи */
feGaussianBlur.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feImage елементи */
feImage.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feMerge елементи */
feMerge.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feMergeNode елементи */
feMergeNode.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feMorphology елементи */
feMorphology.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feOffset елементи */
feOffset.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні fePointLight елементи */
fePointLight.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feSpecularLighting елементи */
feSpecularLighting.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feSpotLight елементи */
feSpotLight.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feTile елементи */
feTile.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні feTurbulence елементи */
feTurbulence.glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Скляні hatch елементи */
hatch.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні hatchpath елементи */
hatchpath.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні mesh елементи */
mesh.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні meshgradient елементи */
meshgradient.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні meshpatch елементи */
meshpatch.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні meshrow елементи */
meshrow.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні solidcolor елементи */
solidcolor.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні unknown SVG елементи */
unknown.glass {
    fill: rgba(190, 0, 60, 0.1);
    stroke: var(--primary-color, #be003c);
    stroke-width: 2;
}

/* Скляні MathML елементи */
math.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні mi елементи */
mi.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні mo елементи */
mo.glass {
    background: rgba(23, 162, 184, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 4px;
    color: #0c5460;
    padding: 2px 6px;
}

/* Скляні mn елементи */
mn.glass {
    background: rgba(40, 167, 69, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: 4px;
    color: #155724;
    padding: 2px 6px;
}

/* Скляні mtext елементи */
mtext.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--text-color, #333);
    padding: 2px 6px;
}

/* Скляні mspace елементи */
mspace.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Скляні ms елементи */
ms.glass {
    background: rgba(255, 193, 7, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 4px;
    color: #856404;
    padding: 2px 6px;
}

/* Скляні mrow елементи */
mrow.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mfrac елементи */
mfrac.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні msqrt елементи */
msqrt.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mroot елементи */
mroot.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні msub елементи */
msub.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні msup елементи */
msup.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні msubsup елементи */
msubsup.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні munder елементи */
munder.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mover елементи */
mover.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні munderover елементи */
munderover.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mtable елементи */
mtable.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px;
}

/* Скляні mtr елементи */
mtr.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Скляні mtd елементи */
mtd.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 4px 8px;
}

/* Скляні maligngroup елементи */
maligngroup.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
}

/* Скляні malignmark елементи */
malignmark.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні menclose елементи */
menclose.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mfenced елементи */
mfenced.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні mglyph елементи */
mglyph.glass {
    background: rgba(190, 0, 60, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(190, 0, 60, 0.2);
    border-radius: 4px;
    color: var(--primary-color, #be003c);
    padding: 2px 6px;
}

/* Скляні semantics елементи */
semantics.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* Скляні annotation елементи */
annotation.glass {
    background: rgba(108, 117, 125, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(108, 117, 125, 0.2);
    border-radius: 4px;
    color: #383d41;
    padding: 2px 6px;
    font-size: 0.875em;
}

/* Скляні annotation-xml елементи */
annotation-xml.glass {
    background: rgba(23, 162, 184, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 4px;
    color: #0c5460;
    padding: 2px 6px;
    font-size: 0.875em;
}

/* Скляні unknown MathML елементи */
unknown.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 4px 8px;
}

/* ================================================
   END OF LIQUID GLASS EFFECTS
   ================================================ */

/* Плавные cubic-bezier переходы вместо обычного ease */
.product-thumb,
.btn,
.button,
.catalog_item {
    transition: all 0.3s cubic-bezier(.05, 0, 0, 1);
    transition-property: transform, box-shadow, opacity;
}

/* Backdrop blur для модальных окон и overlay */
.modal-backdrop,
.popup-overlay,
.overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Легкий backdrop blur для dropdown меню */
.dropdown-menu,
.submenu {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================
   YOUTUBE-INSPIRED BUTTON VARIANTS
   Новые варианты кнопок для разных целей
   ============================================ */

/* TONAL BUTTONS - Приглушенные (для второстепенных действий) */
.btn-tonal,
.button-tonal {
    background: rgba(190, 0, 60, 0.12) !important;
    color: var(--primary-color) !important;
    border: none !important;
    font-weight: 500;
}

.btn-tonal:hover,
.button-tonal:hover {
    background: rgba(190, 0, 60, 0.2) !important;
    color: var(--primary-hover) !important;
}

/* OUTLINE BUTTONS - С бордюром (для альтернативных действий) */
.btn-outline,
.button-outline {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(190, 0, 60, 0.4) !important;
    font-weight: 500;
}

.btn-outline:hover,
.button-outline:hover {
    background: rgba(190, 0, 60, 0.08) !important;
    border-color: var(--primary-color) !important;
}

/* TEXT BUTTONS - Минималистичные (для ссылок) */
.btn-text,
.button-text {
    background: transparent !important;
    color: var(--primary-color) !important;
    border: none !important;
    padding: 8px 12px !important;
    font-weight: 500;
}

.btn-text:hover,
.button-text:hover {
    background: rgba(190, 0, 60, 0.08) !important;
}

/* РАЗМЕРЫ КНОПОК (YouTube-style: border-radius = height/2) */

/* Small */
.btn-sm,
.button-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 32px;
    border-radius: 16px; /* 32/2 = 16 */
}

/* Medium (default) */
.btn-md,
.button-md {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 40px;
    border-radius: 20px; /* 40/2 = 20 */
}

/* Large */
.btn-lg,
.button-lg {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 48px;
    border-radius: 24px; /* 48/2 = 24 */
}

/* FLEXBOX для кнопок с иконками */
.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Автоматический отступ между иконкой и текстом */
    white-space: nowrap;
}

/* Иконки внутри кнопок */
.btn i,
.button i {
    line-height: 0;
    flex-shrink: 0;
}

/* ============================================
   СПЕЦИФИЧЕСКИЕ СТИЛИ ДЛЯ BUTTON-GROUP
   Перекрывают старые стили безопасно
   ============================================ */

/* Кнопки в группе кнопок товаров */
.button-group .btn,
.button-group .button {
    /* Отменяем старые стили float */
    width: auto !important;
    float: none !important;
    display: inline-flex !important;
    
    /* Сохраняем функциональность */
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Главная кнопка "В корзину" - больше и ярче */
.button-group .btn-primary {
    flex: 2; /* Занимает больше места */
}

/* Второстепенные кнопки - компактнее */
.button-group .btn-tonal,
.button-group .btn-outline {
    flex: 1; /* Меньше места */
}

/* Отступы между кнопками */
.button-group .btn + .btn,
.button-group .button + .button {
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-left: 0 !important;
}

/* Для мобильных - все кнопки одинаковой ширины */
@media (max-width: 768px) {
    .button-group .btn,
    .button-group .button {
        flex: 1 !important;
    }
}