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

:root {
    /* Палитра глубокого синего градиента */
    --bg-gradient-start: #0a1128;
    --bg-gradient-end: #101f42;
    --accent-blue-bright: #00b4d8;
    --accent-blue-deep: #0077b6;
    --panel-bg: rgba(16, 31, 66, 0.65);
    --border-glow: rgba(0, 180, 216, 0.3);
}

/* Общий плавный фон форума */
body {
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)) !important;
    background-attachment: fixed !important;
    color: #f0f3f8 !important;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Шапка форума (Header) с мягким переливом */
.p-header, .p-navSticky {
    background: linear-gradient(90deg, #03045e, #0077b6) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--accent-blue-bright);
}

/* Блоки категорий и разделов */
.block-container {
    background: var(--panel-bg) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 180, 216, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

/* Плавное свечение блоков при наведении */
.block-container:hover {
    border-color: var(--accent-blue-bright) !important;
    box-shadow: 0 8px 30px var(--border-glow);
}

/* Заголовки категорий с красивым синим градиентом */
.block-header {
    background: linear-gradient(90deg, #0077b6, #00b4d8) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 7px 7px 0 0 !important;
}

/* Кнопки на форуме */
.button.button--cta, .button.button--primary {
    background: linear-gradient(135deg, #00b4d8, #0077b6) !important;
    border: none !important;
    color: #fff !important;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.button.button--cta:hover, .button.button--primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ==========================================================================
   КРАСИВЫЕ БАННЕРЫ И РАНГИ (Title Case)
   ========================================================================== */

.userBanner {
    font-size: 85%;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    text-transform: capitalize !important; /* Автоматический Title Case (Первая буква заглавная) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Кастомные синие префиксы/ранги */
.userBanner.banner-admin {
    background: linear-gradient(135deg, #00b4d8, #03045e) !important;
    color: #fff !important;
    border: 1px solid #00b4d8;
}

.userBanner.banner-mod {
    background: linear-gradient(135deg, #0077b6, #0096c7) !important;
    color: #fff !important;
}

.userBanner.banner-player {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}