/* Bloxy School - Актуализированный дизайн личного кабинета */

/* Подключение шрифта Nekst SemiBold */
@font-face {
    font-family: 'Nekst';
    src: url('../fonts/Nekst-SemiBold-Web.woff2') format('woff2'),
         url('../fonts/Nekst-SemiBold-Web.woff') format('woff'),
         url('../fonts/Nekst-SemiBold-Web.ttf') format('truetype'),
         url('../fonts/Nekst-SemiBold-Web.eot') format('embedded-opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Цветовая палитра */
:root {
    /* Основной фон */
    --bg-primary: #F9FBFD;
    
    /* Акцентные цвета */
    --color-yellow: #FFC73A;
    --color-orange: #FC7557;
    --color-blue: #2D65F2;
    --color-black: #000000;
    
    /* Дополнительные цвета */
    --color-white: #FFFFFF;
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
}

/* Основной фон страницы */
body {
    background-color: var(--bg-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Заголовки h1 - Nekst SemiBold */
h1, .h1 {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--color-black) !important;
}

/* Заголовки h2, h3 - тоже Nekst для единообразия */
h2, h3, .h2, .h3 {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--color-black) !important;
}

/* Кнопки - Nekst SemiBold + UPPERCASE */
.btn-primary,
.gradient-bg {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    background: var(--color-yellow) !important;
    border: none !important;
    transition: all 0.3s ease !important;
    color: var(--color-black) !important;
}

.btn-primary:hover,
.gradient-bg:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
    background: #E6B333 !important;
}

/* Базовые стили для всех кнопок */
button, input[type="submit"] {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

/* Фирменные кнопки с конкретными цветами */
.btn-bloxy-primary {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    background: var(--color-yellow) !important;
    color: var(--color-black) !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.btn-bloxy-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
    background: #E6B333 !important;
}

.btn-bloxy-secondary {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    background: var(--color-yellow) !important;
    color: var(--color-black) !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.btn-bloxy-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
    background: #E6B333 !important;
}

/* Специальные кнопки с акцентными цветами */
.btn-yellow {
    background-color: var(--color-yellow) !important;
    color: var(--color-black) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.btn-yellow:hover {
    background-color: #E6B333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
}

.btn-orange {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.btn-orange:hover {
    background-color: #E6674E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(252, 117, 87, 0.3) !important;
}

/* Универсальная система кнопок разных цветов */
.btn-blue {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-blue:hover {
    background-color: #1E4ED8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(45, 101, 242, 0.3) !important;
}

.btn-black {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-black:hover {
    background-color: #333333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.btn-white {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
    border: 2px solid var(--color-gray-300) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

.btn-white:hover {
    background-color: var(--color-gray-50) !important;
    border-color: var(--color-gray-400) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn-gray {
    background-color: var(--color-gray-500) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-gray:hover {
    background-color: var(--color-gray-600) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important;
}

/* Размеры кнопок */
.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.btn-md {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
}

.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}

.btn-xl {
    padding: 1.25rem 2.5rem !important;
    font-size: 1.125rem !important;
}

/* Варианты кнопок */
.btn-outline-yellow {
    background-color: transparent !important;
    color: var(--color-yellow) !important;
    border: 2px solid var(--color-yellow) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

.btn-outline-yellow:hover {
    background-color: var(--color-yellow) !important;
    color: var(--color-black) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
}

.btn-outline-blue {
    background-color: transparent !important;
    color: var(--color-blue) !important;
    border: 2px solid var(--color-blue) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

.btn-outline-blue:hover {
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(45, 101, 242, 0.3) !important;
}

.btn-outline-orange {
    background-color: transparent !important;
    color: var(--color-orange) !important;
    border: 2px solid var(--color-orange) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

.btn-outline-orange:hover {
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(252, 117, 87, 0.3) !important;
}

.btn-outline-black {
    background-color: transparent !important;
    color: var(--color-black) !important;
    border: 2px solid var(--color-black) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    transition: all 0.3s ease !important;
}

.btn-outline-black:hover {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Градиентные кнопки */
.btn-gradient-primary {
    background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-orange) 100%) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-gradient-primary:hover {
    background: linear-gradient(135deg, #1E4ED8 0%, #E6674E 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(45, 101, 242, 0.3) !important;
}

.btn-gradient-yellow {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-orange) 100%) !important;
    color: var(--color-black) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-gradient-yellow:hover {
    background: linear-gradient(135deg, #E6B333 0%, #E6674E 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
}

.btn-gradient-blue {
    background: linear-gradient(135deg, var(--color-blue) 0%, #1E4ED8 100%) !important;
    color: var(--color-white) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-gradient-blue:hover {
    background: linear-gradient(135deg, #1E4ED8 0%, #1E3A8A 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(45, 101, 242, 0.3) !important;
}

/* Специальные эффекты */
.btn-shadow {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.btn-shadow:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

.btn-rounded {
    border-radius: 50px !important;
}

.btn-square {
    border-radius: 0 !important;
}

.btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Кнопки-иконки */
.btn-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

.btn-icon-sm {
    width: 32px !important;
    height: 32px !important;
}

.btn-icon-lg {
    width: 48px !important;
    height: 48px !important;
}

/* Группы кнопок */
.btn-group {
    display: flex !important;
    gap: 0 !important;
}

.btn-group > * {
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-group > *:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.btn-group > *:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-right: none !important;
}

/* Анимации для кнопок */
.btn-pulse {
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.btn-bounce:hover {
    animation: bounce 0.6s !important;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* Обновленный градиент для основных кнопок */
.gradient-bg {
    background: var(--color-yellow) !important;
    color: var(--color-black) !important;
}

/* Переопределение для всех кнопок с синим фоном на жёлтый */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700 {
    background: var(--color-yellow) !important;
    color: var(--color-black) !important;
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

.bg-blue-500:hover,
.bg-blue-600:hover,
.bg-blue-700:hover {
    background: #E6B333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
}

/* Кнопки "Открыть" для уроков */
a[href*="lessonId"],
a[href*="masterclassId"] {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
}

/* Кнопки в формах - только для кнопок без специальных классов */
button[type="submit"]:not([class*="btn-"]),
input[type="submit"]:not([class*="btn-"]) {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025em !important;
    background: var(--color-yellow) !important;
    color: var(--color-black) !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.5rem !important;
}

button[type="submit"]:not([class*="btn-"]):hover,
input[type="submit"]:not([class*="btn-"]):hover {
    background: #E6B333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 199, 58, 0.3) !important;
}

/* Карточки с обновленным дизайном */
.bg-white {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-gray-200) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}


/* Навигация с обновленными цветами */
.bg-white.border-b {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
}

/* Активные ссылки навигации */
.text-blue-600 {
    color: var(--color-blue) !important;
}

/* Иконки с акцентными цветами */
.text-blue-500 {
    color: var(--color-blue) !important;
}

.text-orange-500 {
    color: var(--color-orange) !important;
}

.text-yellow-600 {
    color: var(--color-yellow) !important;
}

/* Бейджи и метки */
.bg-yellow-100 {
    background-color: rgba(255, 199, 58, 0.1) !important;
}

.text-yellow-800 {
    color: #B45309 !important;
}

.bg-blue-100 {
    background-color: rgba(45, 101, 242, 0.1) !important;
}

.text-blue-800 {
    color: #1E3A8A !important;
}

.bg-orange-100 {
    background-color: rgba(252, 117, 87, 0.1) !important;
}

.text-orange-800 {
    color: #C2410C !important;
}

/* Поля ввода с обновленным дизайном */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    border: 1px solid var(--color-gray-300) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 3px rgba(45, 101, 242, 0.1) !important;
    outline: none !important;
}

/* Stories карточки с обновленным дизайном */
.story-card {
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-gray-200) !important;
    transition: all 0.3s ease !important;
}

.story-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.story-unread {
    border: 2px solid var(--color-blue) !important;
    box-shadow: 0 0 20px rgba(45, 101, 242, 0.2) !important;
}

.story-high-priority {
    border: 2px solid var(--color-orange) !important;
    box-shadow: 0 0 20px rgba(252, 117, 87, 0.2) !important;
}

/* Статистика и прогресс-бары */
.gradient-bg.h-2 {
    background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-orange) 100%) !important;
}

/* Уведомления и алерты */
.bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Zoom блоки с обновленным дизайном */
.bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(90deg, rgba(45, 101, 242, 0.05) 0%, rgba(45, 101, 242, 0.1) 100%) !important;
}

/* Мобильная адаптивность */
@media (max-width: 768px) {
    h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    
    .btn-primary,
    .gradient-bg,
    button[type="submit"] {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Дополнительные утилиты */
.text-nekst {
    font-family: 'Nekst', 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.border-primary {
    border-color: var(--color-gray-200) !important;
}

/* Улучшенные тени */
.shadow-modern {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.shadow-modern-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Переопределение цветов Tailwind для соответствия новой палитре */
.text-gray-900 {
    color: var(--color-gray-900) !important;
}

.text-gray-800 {
    color: var(--color-gray-800) !important;
}

.text-gray-700 {
    color: var(--color-gray-700) !important;
}

.text-gray-600 {
    color: var(--color-gray-600) !important;
}

.text-gray-500 {
    color: var(--color-gray-500) !important;
}

.bg-gray-50 {
    background-color: var(--color-gray-50) !important;
}

.bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

.border-gray-200 {
    border-color: var(--color-gray-200) !important;
}

.border-gray-300 {
    border-color: var(--color-gray-300) !important;
}

/* Стили для вторых кнопок в блоках (чёрный цвет)
.btn-secondary-black,
button.btn-secondary,
a.btn-secondary,
.button-group > *:nth-child(2),
.flex > button:nth-child(2),
.flex > a:nth-child(2),
.grid > button:nth-child(2),
.grid > a:nth-child(2),
.space-x-2 > button:nth-child(2),
.space-x-2 > a:nth-child(2),
.space-x-3 > button:nth-child(2),
.space-x-3 > a:nth-child(2),
.space-x-4 > button:nth-child(2),

.btn-secondary-black:hover,
button.btn-secondary:hover,
a.btn-secondary:hover,
.button-group > *:nth-child(2):hover,
.flex > button:nth-child(2):hover,
.flex > a:nth-child(2):hover,
.grid > button:nth-child(2):hover,
.grid > a:nth-child(2):hover,
.space-x-2 > button:nth-child(2):hover,
.space-x-2 > a:nth-child(2):hover,
.space-x-3 > button:nth-child(2):hover,
.space-x-3 > a:nth-child(2):hover,
.space-x-4 > button:nth-child(2):hover,
.space-x-4 > a:nth-child(2):hover {
    background: #333333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Специальные селекторы для конкретных случаев 
.lesson-buttons > button:nth-child(2),
.lesson-buttons > a:nth-child(2),
.action-buttons > button:nth-child(2),
.action-buttons > a:nth-child(2),
.button-container > button:nth-child(2),

.lesson-buttons > button:nth-child(2):hover,
.lesson-buttons > a:nth-child(2):hover,
.action-buttons > button:nth-child(2):hover,
.action-buttons > a:nth-child(2):hover,
.button-container > button:nth-child(2):hover,
.button-container > a:nth-child(2):hover {
    background: #333333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
} */