/**
 * Централизованная система стилей для ru-office.com
 * Цветовая схема приложений + дополнительные стили
 */

/* ============================================
   ЕДИНЫЙ ШРИФТ ДЛЯ ВСЕГО САЙТА
   ============================================ */

/* Системный стек шрифтов — современный, легкий, с поддержкой кириллицы */
html, body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ============================================
   TAILWIND v4 FIX: цвет рамок по умолчанию
   В Tailwind v4 класс border не задаёт цвет (использует currentColor = чёрный).
   Восстанавливаем поведение v3: серый по умолчанию.
   Обёрнуто в @layer base чтобы @layer utilities (классы border-gray-* и др.)
   могли корректно его перекрывать.
   ============================================ */
@layer base {
    *, ::before, ::after {
        border-color: #e5e7eb; /* gray-200 */
    }
}

/* Классы border-l-*-* отсутствующие в скомпилированном tailwind.min.css */
.border-l-amber-400 { border-left-color: #fbbf24; }
.border-l-amber-500 { border-left-color: #f59e0b; }
.mt-14 { margin-top: 3.5rem; }

/* ============================================
   ЦВЕТА ПРИЛОЖЕНИЙ MICROSOFT OFFICE
   ============================================ */

/* Word - Синий */
.app-word-bg { background-color: rgb(219 234 254); } /* bg-blue-100 */
.app-word-text { color: rgb(29 78 216); } /* text-blue-700 */
.app-word-border { border-color: rgb(191 219 254); } /* border-blue-200 */
.app-word-active-bg { background-color: rgb(37 99 235); } /* bg-blue-600 */
.app-word-active-text { color: rgb(255 255 255); } /* text-white */

/* Excel - Зелёный */
.app-excel-bg { background-color: rgb(220 252 231); } /* bg-green-100 */
.app-excel-text { color: rgb(21 128 61); } /* text-green-700 */
.app-excel-border { border-color: rgb(187 247 208); } /* border-green-200 */
.app-excel-active-bg { background-color: rgb(22 163 74); } /* bg-green-600 */
.app-excel-active-text { color: rgb(255 255 255); } /* text-white */

/* PowerPoint - Оранжевый */
.app-powerpoint-bg { background-color: rgb(254 235 200); } /* bg-orange-100 */
.app-powerpoint-text { color: rgb(194 65 12); } /* text-orange-700 */
.app-powerpoint-border { border-color: rgb(254 215 170); } /* border-orange-200 */
.app-powerpoint-active-bg { background-color: rgb(234 88 12); } /* bg-orange-600 */
.app-powerpoint-active-text { color: rgb(255 255 255); } /* text-white */

/* Outlook - Синий (как Word) */
.app-outlook-bg { background-color: rgb(219 234 254); }
.app-outlook-text { color: rgb(29 78 216); }
.app-outlook-border { border-color: rgb(191 219 254); }
.app-outlook-active-bg { background-color: rgb(37 99 235); }
.app-outlook-active-text { color: rgb(255 255 255); }

/* OneNote - Фиолетовый */
.app-onenote-bg { background-color: rgb(237 233 254); } /* bg-purple-100 */
.app-onenote-text { color: rgb(109 40 217); } /* text-purple-700 */
.app-onenote-border { border-color: rgb(221 214 254); } /* border-purple-200 */
.app-onenote-active-bg { background-color: rgb(147 51 234); } /* bg-purple-600 */
.app-onenote-active-text { color: rgb(255 255 255); }

/* Access - Красный */
.app-access-bg { background-color: rgb(254 226 226); } /* bg-red-100 */
.app-access-text { color: rgb(185 28 28); } /* text-red-700 */
.app-access-border { border-color: rgb(254 202 202); } /* border-red-200 */
.app-access-active-bg { background-color: rgb(220 38 38); } /* bg-red-600 */
.app-access-active-text { color: rgb(255 255 255); }

/* Publisher - Бирюзовый */
.app-publisher-bg { background-color: rgb(204 251 241); } /* bg-teal-100 */
.app-publisher-text { color: rgb(15 118 110); } /* text-teal-700 */
.app-publisher-border { border-color: rgb(153 246 228); } /* border-teal-200 */
.app-publisher-active-bg { background-color: rgb(13 148 136); } /* bg-teal-600 */
.app-publisher-active-text { color: rgb(255 255 255); }

/* Teams - Индиго/фиолетово-синий */
.app-teams-bg { background-color: rgb(224 231 255); } /* bg-indigo-100 */
.app-teams-text { color: rgb(67 56 202); } /* text-indigo-700 */
.app-teams-border { border-color: rgb(199 210 254); } /* border-indigo-200 */
.app-teams-active-bg { background-color: rgb(79 70 229); } /* bg-indigo-600 */
.app-teams-active-text { color: rgb(255 255 255); }
.app-teams-active-border { border-color: rgb(79 70 229); }

/* Office (по умолчанию) - Синий */
.app-office-bg { background-color: rgb(219 234 254); }
.app-office-text { color: rgb(29 78 216); }
.app-office-border { border-color: rgb(191 219 254); }
.app-office-active-bg { background-color: rgb(37 99 235); }
.app-office-active-text { color: rgb(255 255 255); }

/* Очень светлые фоновые цвета для верхней части страницы */
.app-word-header-bg { 
    background: linear-gradient(180deg, rgb(235 245 255) 0%, rgb(248 252 255) 150px, rgb(255 255 255) 250px);
}
.app-excel-header-bg { 
    background: linear-gradient(180deg, rgb(240 252 245) 0%, rgb(248 254 250) 150px, rgb(255 255 255) 250px);
}
.app-powerpoint-header-bg { 
    background: linear-gradient(180deg, rgb(255 248 240) 0%, rgb(255 252 248) 150px, rgb(255 255 255) 250px);
}
.app-outlook-header-bg { 
    background: linear-gradient(180deg, rgb(235 245 255) 0%, rgb(248 252 255) 150px, rgb(255 255 255) 250px);
}
.app-onenote-header-bg { 
    background: linear-gradient(180deg, rgb(245 240 255) 0%, rgb(250 248 255) 150px, rgb(255 255 255) 250px);
}
.app-access-header-bg { 
    background: linear-gradient(180deg, rgb(255 240 240) 0%, rgb(255 248 248) 150px, rgb(255 255 255) 250px);
}
.app-publisher-header-bg { 
    background: linear-gradient(180deg, rgb(240 252 248) 0%, rgb(248 254 252) 150px, rgb(255 255 255) 250px);
}
.app-teams-header-bg { 
    background: linear-gradient(180deg, rgb(238 242 255) 0%, rgb(248 250 255) 150px, rgb(255 255 255) 250px);
}
.app-office-header-bg { 
    background: linear-gradient(180deg, rgb(235 245 255) 0%, rgb(248 252 255) 150px, rgb(255 255 255) 250px);
}

/* Hover состояния */
.app-word-hover:hover { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.app-excel-hover:hover { background-color: rgb(220 252 231); color: rgb(21 128 61); }
.app-powerpoint-hover:hover { background-color: rgb(254 235 200); color: rgb(194 65 12); }
.app-outlook-hover:hover { background-color: rgb(219 234 254); color: rgb(29 78 216); }
.app-onenote-hover:hover { background-color: rgb(237 233 254); color: rgb(109 40 217); }
.app-access-hover:hover { background-color: rgb(254 226 226); color: rgb(185 28 28); }
.app-publisher-hover:hover { background-color: rgb(204 251 241); color: rgb(15 118 110); }
.app-teams-hover:hover { background-color: rgb(224 231 255); color: rgb(67 56 202); }
.app-office-hover:hover { background-color: rgb(219 234 254); color: rgb(29 78 216); }

/* Рамки для активных кнопок (в цвет приложения) */
.app-word-active-border { border-color: rgb(37 99 235); } /* blue-600 */
.app-excel-active-border { border-color: rgb(22 163 74); } /* green-600 */
.app-powerpoint-active-border { border-color: rgb(234 88 12); } /* orange-600 */
.app-outlook-active-border { border-color: rgb(37 99 235); }
.app-onenote-active-border { border-color: rgb(147 51 234); } /* purple-600 */
.app-access-active-border { border-color: rgb(220 38 38); } /* red-600 */
.app-publisher-active-border { border-color: rgb(13 148 136); } /* teal-600 */
.app-office-active-border { border-color: rgb(37 99 235); }

/* Контейнер главной картинки - рамка по размеру картинки */
.main-image-container {
    display: inline-flex;
    background-color: rgb(249 250 251); /* gray-50 */
    box-shadow: none; /* Убрано для премиального минимализма */
}

.main-image-container img {
    max-height: 450px;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    user-select: none; /* Убираем выделение при клике */
    -webkit-user-drag: none; /* Убираем перетаскивание */
}

/* Миниатюры галереи - базовые стили в стилистике сайта */
.thumbnail-btn,
.thumbnail-btn-v2 {
    border: 1px solid rgb(229 231 235); /* gray-200 - как у карточек */
    background-color: white;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none; /* Убрано для единства стиля */
}

/* Активная миниатюра - чуть темнее рамка */
.thumbnail-active {
    border: 1px solid rgb(209 213 219) !important; /* gray-300 */
    box-shadow: none !important;
    background-color: white !important;
}

/* Неактивная миниатюра - нейтральная */
.thumbnail-inactive {
    border: 1px solid rgb(229 231 235); /* gray-200 */
    background-color: white;
}

/* Hover-эффект для неактивных миниатюр - легкое увеличение */
.thumbnail-inactive:hover {
    border-color: rgb(209 213 219); /* gray-300 */
    transform: scale(1.02);
    box-shadow: none;
}

/* Индикаторы активности для миниатюр */
.thumbnail-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(209 213 219); /* gray-300 - неактивный */
    transition: all 0.25s ease;
}

/* Активный индикатор - расширяется в полоску */
.thumbnail-indicator.active {
    width: 24px;
    border-radius: 4px;
}

/* Вертикальные индикаторы (справа от миниатюр) */
.thumbnail-indicator-vertical {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(209 213 219); /* gray-300 - неактивный */
    transition: all 0.25s ease;
    flex-shrink: 0;
}

/* Активный вертикальный индикатор - расширяется в полоску по высоте */
.thumbnail-indicator-vertical.active {
    height: 24px;
    border-radius: 4px;
}

/* Эффект при наведении на неактивную миниатюру - индикатор подсвечивается в цвете */
/* Используем :has() для hover на родительском контейнере */
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-word { background-color: rgb(37 99 235); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-excel { background-color: rgb(22 163 74); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-powerpoint { background-color: rgb(234 88 12); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-outlook { background-color: rgb(37 99 235); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-onenote { background-color: rgb(147 51 234); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-access { background-color: rgb(220 38 38); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-publisher { background-color: rgb(13 148 136); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator.indicator-office { background-color: rgb(37 99 235); }

/* Вертикальные индикаторы при hover */
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-word { background-color: rgb(37 99 235); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-excel { background-color: rgb(22 163 74); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-powerpoint { background-color: rgb(234 88 12); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-outlook { background-color: rgb(37 99 235); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-onenote { background-color: rgb(147 51 234); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-access { background-color: rgb(220 38 38); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-publisher { background-color: rgb(13 148 136); }
.thumbnail-container:has(.thumbnail-inactive:hover) .thumbnail-indicator-vertical.indicator-office { background-color: rgb(37 99 235); }

/* Фирменные цвета для активных индикаторов (полоска) */
.thumbnail-indicator.active.indicator-word { background-color: rgb(37 99 235); } /* blue-600 */
.thumbnail-indicator.active.indicator-excel { background-color: rgb(22 163 74); } /* green-600 */
.thumbnail-indicator.active.indicator-powerpoint { background-color: rgb(234 88 12); } /* orange-600 */
.thumbnail-indicator.active.indicator-outlook { background-color: rgb(37 99 235); } /* blue-600 */
.thumbnail-indicator.active.indicator-onenote { background-color: rgb(147 51 234); } /* purple-600 */
.thumbnail-indicator.active.indicator-access { background-color: rgb(220 38 38); } /* red-600 */
.thumbnail-indicator.active.indicator-publisher { background-color: rgb(13 148 136); } /* teal-600 */
.thumbnail-indicator.active.indicator-office { background-color: rgb(37 99 235); } /* blue-600 */

.thumbnail-indicator-vertical.active.indicator-word { background-color: rgb(37 99 235); }
.thumbnail-indicator-vertical.active.indicator-excel { background-color: rgb(22 163 74); }
.thumbnail-indicator-vertical.active.indicator-powerpoint { background-color: rgb(234 88 12); }
.thumbnail-indicator-vertical.active.indicator-outlook { background-color: rgb(37 99 235); }
.thumbnail-indicator-vertical.active.indicator-onenote { background-color: rgb(147 51 234); }
.thumbnail-indicator-vertical.active.indicator-access { background-color: rgb(220 38 38); }
.thumbnail-indicator-vertical.active.indicator-publisher { background-color: rgb(13 148 136); }
.thumbnail-indicator-vertical.active.indicator-office { background-color: rgb(37 99 235); }

/* Цветные полоски для меню */
.app-word-border-top { background-color: rgb(37 99 235); } /* blue-600 */
.app-excel-border-top { background-color: rgb(22 163 74); } /* green-600 */
.app-powerpoint-border-top { background-color: rgb(234 88 12); } /* orange-600 */
.app-outlook-border-top { background-color: rgb(37 99 235); } /* blue-600 */
.app-onenote-border-top { background-color: rgb(147 51 234); } /* purple-600 */
.app-access-border-top { background-color: rgb(220 38 38); } /* red-600 */
.app-publisher-border-top { background-color: rgb(13 148 136); } /* teal-600 */
.app-teams-border-top { background-color: rgb(79 70 229); } /* indigo-600 */
.app-office-border-top { background-color: rgb(37 99 235); } /* blue-600 */

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ============================================ */

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

/* Улучшенные переходы для выпадающих меню */
.group:hover .group-hover\:opacity-100 {
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Анимация появления карточек */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Стили для звёзд рейтинга */
.stars-container {
    display: flex;
    gap: 0.25rem;
}

/* Hover эффекты для кнопок */
button,
a.button {
    transition: all 0.2s ease-in-out;
}

/* Убираем эффект сжатия при клике глобально */
button:active,
a:active,
a.button:active {
    transform: none !important;
}

/* Отключаем эффект сжатия для главного изображения */
.main-image-container img:active,
.main-image-container:active {
    transform: none;
}

/* Стили для модальных окон */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* Убрано для премиального минимализма */
.shadow-card {
    box-shadow: none;
}

.shadow-card:hover {
    box-shadow: none;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-menu {
        display: block;
    }
}

@media (min-width: 769px) {
    .mobile-menu {
        display: none;
    }
}

/* Прелоадер */
.loader {
    border: 4px solid #f3f4f6;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   ПАТТЕРНЫ ФОНА
   ============================================ */

/* Точечный паттерн */
.bg-dots-pattern {
    background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Сеточный паттерн */
.bg-grid-pattern {
    background-image:
        linear-gradient(to right, #e5e7eb 1px, transparent 1px),
        linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ============================================
   ОТСУТСТВУЮЩИЕ УТИЛИТЫ TAILWIND (compiled CSS gap)
   ============================================ */

/* pl-12 — padding-left: 3rem (иконка в селекторе версий) */
.pl-12 { padding-left: 3rem; }

/* bg-gray-50/50 — фон с 50% прозрачностью */
.bg-gray-50\/50 { background-color: rgb(249 250 251 / 0.5); }

/* border-slate-100 — светло-серый бордер (чёрные линии) */
.border-slate-100 { border-color: rgb(241 245 249); }

/* w-1/3 и sm:w-1/4 — ширины колонок таблицы */
.w-1\/3 { width: 33.333333%; }
@media (min-width: 640px) {
    .sm\:w-1\/4 { width: 25%; }
}

/* lg:block — виртуальная клавиатура (hidden lg:block) */
@media (min-width: 1024px) {
    .lg\:block { display: block; }
}

/* ============================================
   ARBITRARY VALUE УТИЛИТЫ (tailwind v4 не скомпилировал)
   ============================================ */

/* border-radius */
.rounded-\[5px\] { border-radius: 5px; }

/* ============================================
   MOBILE DRAWER (menu)
   ============================================ */

/* Drawer скрыт за правым краем экрана */
.translate-x-full { transform: translateX(100%); }
/* Drawer открыт */
.translate-x-0    { transform: translateX(0); }

/* Плавность дравера */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
/* Drawer не показывается на десктопе — независимо от JS */
@media (min-width: 768px) {
    #mobile-menu-panel,
    #mobile-menu-overlay,
    #mobile-menu-btn {
        display: none !important;
    }
}

/* font-size */
.text-\[6px\]   { font-size: 6px;   line-height: 1; }
.text-\[7px\]   { font-size: 7px;   line-height: 1; }
.text-\[8px\]   { font-size: 8px;   line-height: 1.2; }
.text-\[9px\]   { font-size: 9px;   line-height: 1.2; }
.text-\[10px\]  { font-size: 10px;  line-height: 1.3; }
.text-\[11px\]  { font-size: 11px;  line-height: 1.4; }
.text-\[12px\]  { font-size: 12px;  line-height: 1.4; }
.text-\[13px\]  { font-size: 13px;  line-height: 1.5; }
.text-\[14px\]  { font-size: 14px;  line-height: 1.5; }
.text-\[15px\]  { font-size: 15px;  line-height: 1.5; }
.text-\[15\.5px\] { font-size: 15.5px; line-height: 1.5; }
.text-\[16px\]  { font-size: 16px;  line-height: 1.5; }
.text-\[18px\]  { font-size: 18px;  line-height: 1.5; }
.text-\[19px\]  { font-size: 19px;  line-height: 1.4; }
.text-\[22px\]  { font-size: 22px;  line-height: 1.3; }
.text-\[26px\]  { font-size: 26px;  line-height: 1.3; }
.text-\[250px\] { font-size: 250px; line-height: 1; }

/* width */
.w-\[90px\]  { width: 90px; }
.w-\[155px\] { width: 155px; }
.w-\[160px\] { width: 160px; }
.w-\[195px\] { width: 195px; }
.w-\[240px\] { width: 240px; }
.w-\[360px\] { width: 360px; }
.w-\[380px\] { width: 380px; }
.w-\[556px\] { width: 556px; }

/* height */
.h-\[1\.5px\] { height: 1.5px; }
.h-\[38px\]   { height: 38px; }
.h-\[44px\]   { height: 44px; }
.h-\[120px\]  { height: 120px; }
.h-\[140px\]  { height: 140px; }
.h-\[150px\]  { height: 150px; }
.h-\[600px\]  { height: 600px; }

/* max-width */
.max-w-\[70\%\]  { max-width: 70%; }
.max-w-\[80\%\]  { max-width: 80%; }
.max-w-\[80vw\]  { max-width: 80vw; }
.max-w-\[150px\] { max-width: 150px; }
.max-w-\[180px\] { max-width: 180px; }
.max-w-\[240px\] { max-width: 240px; }

/* max-height */
.max-h-\[350px\] { max-height: 350px; }
.max-h-\[500px\] { max-height: 500px; }
.max-h-\[60vh\]  { max-height: 60vh; }
.max-h-\[80vh\]  { max-height: 80vh; }
.max-h-\[90vh\]  { max-height: 90vh; }

/* min-width */
.min-w-\[1\.25rem\] { min-width: 1.25rem; }
.min-w-\[1\.6em\]   { min-width: 1.6em; }
.min-w-\[24px\]  { min-width: 24px; }
.min-w-\[70px\]  { min-width: 70px; }
.min-w-\[140px\] { min-width: 140px; }
.min-w-\[200px\] { min-width: 200px; }
.min-w-\[210px\] { min-width: 210px; }
.min-w-\[240px\] { min-width: 240px; }
.min-w-\[300px\] { min-width: 300px; }
.min-w-\[320px\] { min-width: 320px; }
.min-w-\[600px\] { min-width: 600px; }

/* min-height */
.min-h-\[10px\]  { min-height: 10px; }
.min-h-\[100px\] { min-height: 100px; }
.min-h-\[3rem\]  { min-height: 3rem; }
.min-h-\[400px\] { min-height: 400px; }

/* padding/margin */
.pb-\[60vh\]    { padding-bottom: 60vh; }
.py-\[1\.4rem\] { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.mb-\[2px\]     { margin-bottom: 2px; }

/* positioning */
.top-\[2px\]   { top: 2px; }
.top-\[90px\]  { top: 90px; }
.top-\[120px\] { top: 120px; }
.top-\[200px\] { top: 200px; }
.left-\[2px\]  { left: 2px; }
.left-\[22px\] { left: 22px; }
.left-\[24px\] { left: 24px; }
.right-\[1\%\] { right: 1%; }

/* z-index */
.z-\[5\]    { z-index: 5; }
.z-\[90\]   { z-index: 90; }
.z-\[100\]  { z-index: 100; }
.z-\[1000\] { z-index: 1000; }
.z-\[1001\] { z-index: 1001; }
.z-\[1002\] { z-index: 1002; }
.z-\[1100\] { z-index: 1100; }
.z-\[2000\] { z-index: 2000; }
.z-\[9999\] { z-index: 9999; }

/* grid-template-columns */
.grid-cols-\[100px_1fr\]   { grid-template-columns: 100px 1fr; }
.grid-cols-\[1fr_380px\]   { grid-template-columns: 1fr 380px; }
.grid-cols-\[200px_1fr\]   { grid-template-columns: 200px 1fr; }
.grid-cols-\[280px_1fr\]   { grid-template-columns: 280px 1fr; }
.grid-cols-\[300px_1fr\]   { grid-template-columns: 300px 1fr; }

/* typography */
.leading-\[0\]       { line-height: 0; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* border-width */
.border-b-\[3px\] { border-bottom-width: 3px; }
.border-l-\[6px\] { border-left-width: 6px; }
.border-r-\[6px\] { border-right-width: 6px; }
.border-t-\[6px\] { border-top-width: 6px; }

/* background */
.bg-\[\#ffcf00\] { background-color: #ffcf00; }

/* filters */
.backdrop-blur-\[0\.5px\] { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px); }
.grayscale-\[0\.5\]       { filter: grayscale(0.5); }
.scale-\[2\]              { --tw-scale-x: 2; --tw-scale-y: 2; transform: scale(2); }

/* Кнопка «Скачать» в таблице версий */
.btn-download {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #374151;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-download:hover {
    background-color: #ffffff;
    border-color: #d1d5db;
}

/* Кнопка «Купить» в таблице покупки */
.btn-buy {
    background-color: #facc15;
    border-color: #eab308;
    color: #111827;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-buy:hover {
    background-color: #fde047;
    border-color: #facc15;
}

/* Желтая кнопка (акцентная) — для страницы Office 2026 */
.btn-yellow-highlight {
    background-color: #ffcf00 !important;
    border-color: #eab308 !important;
    color: #000000 !important;
}
.btn-yellow-highlight:hover {
    background-color: #eab308 !important;
}


/* Таблица покупки /buy/ — hover строки и sticky-столбца */
#buy-table tbody tr.buy-table-row {
    transition: background-color 0.15s ease;
}
#buy-table tbody tr.buy-table-row td.buy-table-sticky {
    transition: background-color 0.15s ease;
}
#buy-table tbody tr.buy-table-row:hover {
    background-color: rgb(243 244 246); /* gray-100 */
}
#buy-table tbody tr.buy-table-row:hover td.buy-table-sticky {
    background-color: rgb(243 244 246); /* gray-100 */
}

/* Таблица версий /download/ — hover строки и первого sticky-столбца */
#versions-table tbody tr {
    transition: background-color 0.15s ease;
}
#versions-table tbody tr td.version-table-sticky {
    transition: background-color 0.15s ease;
}
#versions-table tbody tr:hover {
    background-color: rgb(243 244 246); /* gray-100 */
}
#versions-table tbody tr:hover td.version-table-sticky {
    background-color: rgb(243 244 246); /* gray-100 */
}