/* =========================================================
   1. ТЕМАТИЧЕСКИЕ ПЕРЕМЕННЫЕ
   ---------------------------------------------------------
   Важно:
   - исходный JS работает через html[data-theme="..."]
   - базовая схема принудительно светлая
   - селекторы data-theme сохранены для совместимости, но без обязательной инициализации темы
   ========================================================= */

:root {
    /* Шрифты */
    --font-main: "Outfit", sans-serif;
    --font-accent: "Space Mono", monospace;
    /* Базовая схема = тёмная */
    --color-bg: #0b1020;
    --color-bg-soft: #121932;
    --color-bg-deep: #080d1a;
    --color-surface: rgba(255, 255, 255, 0.08);
    --color-surface-2: rgba(255, 255, 255, 0.10);
    --color-surface-strong: rgba(255, 255, 255, 0.14);
    --color-border: rgba(255, 255, 255, 0.12);
    --color-border-soft: rgba(255, 255, 255, 0.08);
    --color-text: #f5f7ff;
    --color-text-muted: rgba(245, 247, 255, 0.72);
    --color-text-faint: rgba(245, 247, 255, 0.52);
    --color-primary: #79a8ff;
    --color-primary-strong: #5d8fff;
    --color-primary-soft: rgba(121, 168, 255, 0.16);
    --color-success: #83e6b3;
    --color-warning: #f5c16d;
    --color-danger: #ff8f8f;
    /* Glass-эффекты */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-2: rgba(255, 255, 255, 0.06);
    --glass-border: 1px solid rgba(255, 255, 255, 0.12);
    --glass-blur: blur(18px);
    /* Тени */
    --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);
    /* Скругления */
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-pill: 999px;
    /* Размеры макета */
    --sidebar-width: 310px;
    --navbar-height: 88px;
    /* Отступы */
    --content-padding: 32px;
    --container-gap: 24px;
    /* Переходы */
    --transition-fast: 0.2s ease;
    --transition-main: 0.28s ease;
}


/* =========================================================
   2. СВЕТЛАЯ ТЕМА
   ---------------------------------------------------------
   Оригинальный JS переключает тему через:
   document.documentElement.setAttribute('data-theme', theme)
   Поэтому стили темы должны быть завязаны на html[data-theme].
   ========================================================= */

:root,
html[data-theme="light"] {
    --color-bg: #f4f7fb;
    --color-bg-soft: #eaf0f8;
    --color-bg-deep: #dde7f4;
    --color-surface: rgba(255, 255, 255, 0.72);
    --color-surface-2: rgba(255, 255, 255, 0.84);
    --color-surface-strong: rgba(255, 255, 255, 0.94);
    --color-border: rgba(18, 32, 58, 0.10);
    --color-border-soft: rgba(18, 32, 58, 0.06);
    --color-text: #162033;
    --color-text-muted: rgba(22, 32, 51, 0.70);
    --color-text-faint: rgba(22, 32, 51, 0.50);
    --color-primary: #5d8fff;
    --color-primary-strong: #457cf5;
    --color-primary-soft: rgba(93, 143, 255, 0.14);
    --color-success: #26b36b;
    --color-warning: #d9941d;
    --color-danger: #df5b5b;
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-2: rgba(255, 255, 255, 0.48);
    --glass-border: 1px solid rgba(18, 32, 58, 0.08);
    --glass-blur: blur(18px);
    --shadow-xs: 0 4px 12px rgba(18, 32, 58, 0.06);
    --shadow-sm: 0 8px 18px rgba(18, 32, 58, 0.08);
    --shadow-md: 0 12px 30px rgba(18, 32, 58, 0.10);
    --shadow-lg: 0 24px 60px rgba(18, 32, 58, 0.14);
}


/* =========================================================
   3. БАЗОВЫЙ RESET И ОБЩИЕ ПРАВИЛА
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--color-text);
    background: radial-gradient(circle at top left, rgba(121, 168, 255, 0.14), transparent 28%), radial-gradient(circle at top right, rgba(131, 230, 179, 0.10), transparent 26%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
    overflow-x: hidden;
    position: relative;
    transition: background var(--transition-main), color var(--transition-main);
}

/* Светлая тема получает более воздушный фон */
body,
html[data-theme="light"] body {
    background: radial-gradient(circle at top left, rgba(93, 143, 255, 0.18), transparent 26%), radial-gradient(circle at top right, rgba(38, 179, 107, 0.08), transparent 24%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

    a:hover {
        text-decoration: none;
    }

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

/* Базовая подстройка Bootstrap muted-текста под обе темы */
.text-muted,
.text-muted.small,
.small.text-muted {
    color: var(--color-text-muted) !important;
}


/* =========================================================
   4. ДЕКОРАТИВНЫЙ ФОН
   ---------------------------------------------------------
   Это фоновые слои, которые дают “премиальный” glassmorphism-вид.
   ========================================================= */

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 50%, var(--bg-gradient-3) 100%);
}

    .background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(120, 0, 255, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 200, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 80%, rgba(255, 0, 200, 0.1) 0%, transparent 50%);
    }

/* Светлая тема — более заметные, но мягкие блики */
.background,
html[data-theme="light"] .background {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 58%);
}

.orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(24px);
    opacity: 0.68;
    pointer-events: none;
    z-index: -2;
    transition: opacity var(--transition-main);
}

.orb-1 {
    width: 320px;
    height: 320px;
    top: -80px;
    left: -90px;
    background: radial-gradient(circle, rgba(121, 168, 255, 0.40) 0%, rgba(121, 168, 255, 0) 72%);
}

.orb-2 {
    width: 260px;
    height: 260px;
    top: 90px;
    right: -60px;
    background: radial-gradient(circle, rgba(131, 230, 179, 0.28) 0%, rgba(131, 230, 179, 0) 72%);
}

.orb-3 {
    width: 360px;
    height: 360px;
    bottom: -140px;
    left: 30%;
    background: radial-gradient(circle, rgba(174, 141, 255, 0.24) 0%, rgba(174, 141, 255, 0) 72%);
}

/* В светлой теме орбы делаем легче и чище */
.orb,
html[data-theme="light"] .orb {
    opacity: 0.55;
}

.orb-1,
html[data-theme="light"] .orb-1 {
    background: radial-gradient(circle, rgba(93, 143, 255, 0.26) 0%, rgba(93, 143, 255, 0) 72%);
}

.orb-2,
html[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(38, 179, 107, 0.16) 0%, rgba(38, 179, 107, 0) 72%);
}

.orb-3,
html[data-theme="light"] .orb-3 {
    background: radial-gradient(circle, rgba(145, 126, 255, 0.14) 0%, rgba(145, 126, 255, 0) 72%);
}


/* =========================================================
   5. ОБЩИЙ МАКЕТ DASHBOARD
   ========================================================= */

.dashboard {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    position: relative;
}

.main-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.main-content-inner {
    flex: 1 1 auto;
    padding: 0 var(--content-padding) var(--content-padding);
}

.page-shell {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}


/* =========================================================
   6. SIDEBAR
   ---------------------------------------------------------
   Идём по порядку разметки.
   ========================================================= */

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 30;
    overflow-y: auto;
    padding: 24px 18px;
    background: rgba(8, 12, 26, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
    transition: background var(--transition-main), border-color var(--transition-main), transform var(--transition-main);
}

/* Светлая тема sidebar */
.sidebar,
html[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.66);
    border-right: 1px solid rgba(18, 32, 58, 0.08);
}

    .sidebar::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.12);
        border-radius: var(--radius-pill);
    }

    .sidebar::-webkit-scrollbar-thumb,
    html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
        background: rgba(22, 32, 51, 0.10);
    }


/* ---------- Шапка боковой панели ---------- */

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px 22px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--color-border-soft);
}

.logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-xs);
    overflow: hidden;
}

    .logo img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

.logo-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    letter-spacing: 0.01em;
}


/* ---------- Навигационное меню ---------- */

.nav-menu,
.nav-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-section + .nav-section {
    margin-top: 18px;
}

.nav-section-title {
    display: block;
    padding: 0 12px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

.nav-item + .nav-item {
    margin-top: 6px;
}

/*
   Важный момент:
   @Html.IsActive(...) добавляет класс active к nav-link.
   Ниже заложены и обычное, и active-состояние.
*/
.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--color-text-muted);
    background: transparent;
    position: relative;
    transition: background-color var(--transition-main), color var(--transition-main), transform var(--transition-main), box-shadow var(--transition-main);
}

    .nav-link:hover {
        color: var(--color-text);
        background: var(--color-surface);
        transform: translateX(2px);
    }

    .nav-link.active {
        color: var(--color-text);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.22), rgba(121, 168, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.20), 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .nav-link.active,
    html[data-theme="light"] .nav-link.active {
        background: linear-gradient(135deg, rgba(93, 143, 255, 0.18), rgba(93, 143, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.20), 0 8px 24px rgba(18, 32, 58, 0.10);
    }

        .nav-link.active::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 10px;
            bottom: 10px;
            width: 4px;
            border-radius: var(--radius-pill);
            background: var(--color-primary);
        }

.nav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
    opacity: 0.95;
}


/* =========================================================
   7. NAVBAR
   ========================================================= */

.navbar {
    min-height: var(--navbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--content-padding);
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(11, 16, 32, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border-soft);
}

.navbar,
html[data-theme="light"] .navbar {
    background: rgba(244, 247, 251, 0.72);
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/*
   Кнопка переключения темы.
   Исходный JS переключает только иконки, поэтому здесь
   стилизуем саму кнопку и обе SVG-иконки.
*/
.nav-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-xs);
    cursor: pointer;
    transition: transform var(--transition-main), background-color var(--transition-main), box-shadow var(--transition-main), color var(--transition-main);
}

    .nav-btn:hover {
        transform: translateY(-1px);
        background: var(--color-surface-strong);
        box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sm);
    }

    .nav-btn svg {
        width: 22px;
        height: 22px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =========================================================
   8. PAGE SHELL / ОБЩИЕ ВНУТРЕННИЕ БЛОКИ
   ========================================================= */

.page-shell > .container,
.page-shell .container:first-child {
    /*padding-top: 22px;*/
    padding-bottom: 24px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}


/* =========================================================
   9. BREADCRUMBS
   ---------------------------------------------------------
   У вас этот блок есть в layout, поэтому его сразу стилизуем,
   чтобы он не выбивался из общей glassmorphism-стилистики.
   ========================================================= */

.breadcrumbs-row {
    display: flex;
    gap: 10px;
    min-height: 52px;
    padding-top: 10px;
}

.breadcrumbs-home-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.9;
}

.breadcrumb {
    margin: 0;
    background: transparent;
    font-size: 0.93rem;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--color-text-muted);
}

    .breadcrumb-item a:hover {
        color: var(--color-text);
    }

    .breadcrumb-item.active {
        color: var(--color-text);
        font-weight: 500;
    }


/* =========================================================
   10. УНИВЕРСАЛЬНЫЕ GLASS-CARD
   ========================================================= */

/*
   Базовая карточка под все блоки dashboard.
   Поверх неё можно строить карточку профиля, статистику и т.д.
*/
.glass-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    transition: background var(--transition-main), border-color var(--transition-main), box-shadow var(--transition-main), transform var(--transition-main);
}

    /* Небольшой световой блик сверху для “стеклянности” */
    .glass-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%);
        pointer-events: none;
    }

    .glass-card::before,
    html[data-theme="light"] .glass-card::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 55%);
    }

    .glass-card > * {
        position: relative;
        z-index: 1;
    }

.card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    letter-spacing: 0.01em;
}


/* =========================================================
   11. DASHBOARD: USER CARD
   ========================================================= */

.profile-avatar {
    width: 112px;
    height: 112px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 25%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.20), 0 0 0 8px rgba(121, 168, 255, 0.08);
}

.profile-avatar,
html[data-theme="light"] .profile-avatar {
    border-color: rgba(93, 143, 255, 0.14);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 30px rgba(18, 32, 58, 0.10), 0 0 0 8px rgba(93, 143, 255, 0.08);
}

.glass-card h4 {
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}


/* =========================================================
   12. DASHBOARD: CONSULTATION CARD
   ========================================================= */

.consultation-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.consult-empty {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.98rem;
    line-height: 1.5;
}


/* =========================================================
   13. DASHBOARD: БЛОК "МОЯ АКТИВНОСТЬ"
   ========================================================= */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

/*
   В HTML у stat-tile есть bootstrap-класс m-2.
   Чтобы сетка выглядела аккуратно, margin обнуляем.
*/
.stat-tile {
    margin: 0 !important;
    min-height: 128px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    transition: transform var(--transition-main), background-color var(--transition-main), border-color var(--transition-main), box-shadow var(--transition-main);
}

    .stat-tile:hover {
        transform: translateY(-4px);
        background: var(--color-surface-strong);
        border-color: rgba(121, 168, 255, 0.20);
        box-shadow: var(--shadow-sm);
    }

    .stat-tile:hover,
    html[data-theme="light"] .stat-tile:hover {
        border-color: rgba(93, 143, 255, 0.20);
    }

.stat-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.20), rgba(121, 168, 255, 0.08));
    box-shadow: inset 0 0 0 1px var(--color-border-soft), var(--shadow-xs);
}

.stat-icon,
html[data-theme="light"] .stat-icon {
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.06));
}

    .stat-icon img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

.stat-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
   Важно:
   у вас в HTML класс .stat-number,
   а исходный JS ищет .stat-value.
   Этот CSS стилизует то, что реально есть в разметке.
*/
.stat-number {
    font-family: var(--font-accent);
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.03em;
}

.stat-label {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}


/* =========================================================
   14. ОБЩИЕ СТИЛИ ДЛЯ ФОРМ И ВНУТРЕННИХ СЕКЦИЙ
   ---------------------------------------------------------
   Они пригодятся дальше на страницах профиля / оплаты / курсов,
   чтобы общий стиль кабинета был единым.
   ========================================================= */

.form-control,
.form-select,
.form-input {
    min-height: 48px;
    border-radius: 14px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text);
    box-shadow: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-control::placeholder,
    .form-input::placeholder {
        color: var(--color-text-faint);
    }

    .form-control:focus,
    .form-select:focus,
    .form-input:focus {
        color: var(--color-text);
        background-color: var(--color-surface-strong);
        border-color: rgba(121, 168, 255, 0.30);
        box-shadow: 0 0 0 0.2rem rgba(121, 168, 255, 0.14);
    }

    .form-control:focus,
    html[data-theme="light"] .form-control:focus,
    .form-select:focus,
    html[data-theme="light"] .form-select:focus,
    .form-input:focus,
    html[data-theme="light"] .form-input:focus {
        border-color: rgba(93, 143, 255, 0.30);
        box-shadow: 0 0 0 0.2rem rgba(93, 143, 255, 0.12);
    }

.btn,
.btn-primary,
.btn-outline-primary {
    border-radius: 14px;
    font-weight: 500;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

    .btn:hover,
    .btn-primary:hover,
    .btn-outline-primary:hover {
        transform: translateY(-1px);
    }


/* =========================================================
   15. MOBILE MENU TOGGLE
   ---------------------------------------------------------
   Очень важно:
   исходный JS использует sidebar.classList.toggle('open')
   Поэтому в CSS обязательно должен быть селектор .sidebar.open
   ========================================================= */

.mobile-menu-toggle {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    color: var(--color-text);
    background: rgba(11, 16, 32, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform var(--transition-main), background-color var(--transition-main), color var(--transition-main);
}

.mobile-menu-toggle,
html[data-theme="light"] .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 30px rgba(18, 32, 58, 0.12), inset 0 0 0 1px rgba(18, 32, 58, 0.06);
}

    .mobile-menu-toggle:hover {
        transform: translateY(-2px);
    }

    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
    }


/* =========================================================
   16. FOOTER
   ========================================================= */

.site-footer {
    min-height: 16px;
}


/* =========================================================
   17. АДАПТИВ
   ========================================================= */

@media (max-width: 1199.98px) {
    :root {
        --sidebar-width: 280px;
        --content-padding: 24px;
    }

    .page-shell > .container,
    .page-shell .container:first-child {
        padding-top: 18px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .dashboard {
        display: block;
    }

    /*
       На планшетах и телефонах sidebar превращается в offcanvas-панель.
       Именно .open должен включаться JS-ом.
    */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 70;
    }

        .sidebar.open {
            transform: translateX(0);
        }

        /*
       Небольшое затемнение страницы, когда меню открыто.
       Реализуем через box-shadow на самой панели.
    */
        .sidebar.open {
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28), var(--shadow-lg);
        }

    html[data-theme="light"] .sidebar.open {
        box-shadow: 0 0 0 9999px rgba(18, 32, 58, 0.12), var(--shadow-lg);
    }

    .main-content {
        width: 100%;
    }

    .navbar {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main-content-inner {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    :root {
        --content-padding: 18px;
    }

    .navbar {
        min-height: 74px;
        padding: 14px 16px;
    }

    .main-content-inner {
        padding: 0 16px 18px;
    }

    .page-header {
        margin-bottom: 18px;
    }

    .page-title {
        font-size: 1.65rem;
    }

    .glass-card {
        border-radius: 22px;
    }

    .profile-avatar {
        width: 92px;
        height: 92px;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .stat-tile {
        min-height: 108px;
        padding: 16px;
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 16px;
    }

    .stat-number {
        font-size: 1.6rem;
    }

    .consultation-card {
        min-height: 152px;
    }

    .breadcrumbs-row {
        padding: 10px 14px;
        border-radius: 16px;
    }
}

@media (max-width: 479.98px) {
    .sidebar {
        width: min(86vw, 320px);
        min-width: min(86vw, 320px);
        padding: 20px 14px;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .nav-link {
        min-height: 44px;
        padding: 10px 12px;
    }

    .nav-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .page-title {
        font-size: 1.45rem;
    }

    .glass-card h4 {
        font-size: 1.12rem;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    .mobile-menu-toggle {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        right: 14px;
        bottom: 14px;
    }
}


/* =========================================================
   18. SETTINGS PAGE / ПРОФИЛЬ
   ---------------------------------------------------------
   Эти стили добавляются НИЖЕ уже существующего CSS.
   Они оформляют страницу настроек профиля в той же
   glassmorphism-стилистике, что и весь кабинет.
   ========================================================= */


/* =========================================================
   18.1. ОБЩИЙ КОНТЕЙНЕР СТРАНИЦЫ НАСТРОЕК
   ========================================================= */

/*
   Главная обёртка страницы.
   Bootstrap-класс py-4 уже даёт вертикальные отступы,
   а здесь мы задаём общую структуру и расстояния между секциями.
*/
.settings-page {
    position: relative;
}

/*
   Верхняя область с табами.
*/
.settings-page__header {
    margin-bottom: 20px;
}

/*
   Заголовок карточки секции.
   В вашем HTML он вынесен отдельно над формой.
*/
.settings-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.settings-card__title {
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 0.8vw, 1.8rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
}


/* =========================================================
   18.2. ВКЛАДКИ "ОБЩИЕ / БЕЗОПАСНОСТЬ"
   ---------------------------------------------------------
   Переопределяем Bootstrap nav-tabs под текущий дизайн.
   ========================================================= */

.settings-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    margin: 0;
    border: 0;
    border-radius: 22px;
    background: var(--glass-bg-2);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

    /*
   Убираем стандартные bootstrap-отступы/границы у li.
*/
    .settings-nav-tabs .nav-item {
        margin: 0;
    }

    /*
   Базовый вид таба.
   Это не классические bootstrap tabs, а "пилюли" в духе dashboard.
*/
    .settings-nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 50px;
        padding: 12px 16px;
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--color-text-muted);
        font-weight: 500;
        line-height: 1.2;
        transition: background-color var(--transition-main), color var(--transition-main), transform var(--transition-main), box-shadow var(--transition-main);
    }

        /*
   Bootstrap иногда добавляет border-color в активное состояние.
   Явно его убираем.
*/
        .settings-nav-tabs .nav-link,
        .settings-nav-tabs .nav-link:hover,
        .settings-nav-tabs .nav-link:focus,
        .settings-nav-tabs .nav-link.active {
            border: 0;
        }

            /*
   Hover — мягкая подсветка, без резких контрастов.
*/
            .settings-nav-tabs .nav-link:hover,
            .settings-nav-tabs .nav-link:focus {
                color: var(--color-text);
                background: var(--color-surface);
                transform: translateY(-1px);
            }

            /*
   Активная вкладка.
*/
            .settings-nav-tabs .nav-link.active {
                color: var(--color-text);
                background: linear-gradient(135deg, rgba(121, 168, 255, 0.22), rgba(121, 168, 255, 0.08));
                box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.20), 0 8px 20px rgba(0, 0, 0, 0.14);
            }

            .settings-nav-tabs .nav-link.active,
            html[data-theme="light"] .settings-nav-tabs .nav-link.active {
                background: linear-gradient(135deg, rgba(93, 143, 255, 0.18), rgba(93, 143, 255, 0.08));
                box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.20), 0 8px 20px rgba(18, 32, 58, 0.08);
            }

/*
   Иконка вкладки.
*/
.settings-tab-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    opacity: 0.96;
}

/*
   Вторая иконка у вас чуть компактнее — даём отдельный модификатор.
*/
.settings-tab-icon--sm {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}


/* =========================================================
   18.3. ALERT / СООБЩЕНИЯ
   ---------------------------------------------------------
   У вас используются стандартные bootstrap alert-ы.
   Здесь мы приводим их к общей визуальной системе.
   ========================================================= */

.alert {
    border: 0;
    border-radius: 18px;
    padding: 16px 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-xs);
}

/*
   Успешное сообщение.
*/
.alert-success {
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(131, 230, 179, 0.18), rgba(131, 230, 179, 0.08));
    box-shadow: inset 0 0 0 1px rgba(131, 230, 179, 0.18), var(--shadow-xs);
}

/*
   Информационное сообщение.
*/
.alert-info {
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.18), rgba(121, 168, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.18), var(--shadow-xs);
}

/*
   Предупреждение.
*/
.alert-warning {
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(245, 193, 109, 0.18), rgba(245, 193, 109, 0.08));
    box-shadow: inset 0 0 0 1px rgba(245, 193, 109, 0.18), var(--shadow-xs);
}

/*
   Ошибка.
*/
.alert-danger {
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(255, 143, 143, 0.18), rgba(255, 143, 143, 0.08));
    box-shadow: inset 0 0 0 1px rgba(255, 143, 143, 0.18), var(--shadow-xs);
}

/*
   Кнопка закрытия alert.
*/
.btn-close {
    filter: none;
    opacity: 0.85;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

    .btn-close:hover {
        opacity: 1;
        transform: scale(1.05);
    }

html[data-theme="dark"] .btn-close {
    filter: none;
}


/* =========================================================
   18.4. ДВУХКОЛОНОЧНАЯ СТРУКТУРА НАСТРОЕК
   ========================================================= */

/*
   Ваша строка с двумя колонками:
   - слева фото
   - справа личные данные
*/
.settings-layout {
    row-gap: 20px;
}

/*
   Отдельные колонки оставлены как точки расширения.
   Здесь можно задавать локальные правки только для страницы настроек.
*/
.settings-col-side,
.settings-col-main {
    display: flex;
    flex-direction: column;
}

/*
   Панель настроек — базовая карточка внутри колонок.
   Используем ту же стеклянную основу, что и glass-card,
   но отдельным классом, чтобы было удобнее расширять.
*/
.settings-panel {
    position: relative;
    height: 100%;
    padding: 24px;
    border-radius: 26px;
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

    /*
   Световой блик поверх панели.
*/
    .settings-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%);
        pointer-events: none;
    }

    .settings-panel::before,
    html[data-theme="light"] .settings-panel::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 56%);
    }

    .settings-panel > * {
        position: relative;
        z-index: 1;
    }

/*
   Заголовок панели.
*/
.settings-panel__title {
    margin-bottom: 18px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

/*
   Небольшие различия между левой и правой панелью:
   слева панель визуально компактнее.
*/
.settings-panel--general-side {
    min-height: 100%;
}

.settings-panel--general-main {
    min-height: 100%;
}


/* =========================================================
   18.5. БЛОК АВАТАРА
   ========================================================= */

/*
   Общая область фото профиля.
*/
.avatar-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/*
   Контейнер предпросмотра.
   Здесь находится изображение и круглая кнопка камеры.
*/
.avatar-preview-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 25%;
    padding: 8px;
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.20), rgba(121, 168, 255, 0.05));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.avatar-preview-wrap,
html[data-theme="light"] .avatar-preview-wrap {
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.04));
    box-shadow: 0 16px 34px rgba(18, 32, 58, 0.10), inset 0 0 0 1px rgba(18, 32, 58, 0.05);
}

/*
   Само изображение аватара.
*/
.avatar-preview-img {
    width: 100%;
    height: 100%;
    border-radius: 25%;
    object-fit: cover;
    display: block;
    background: var(--color-surface);
    border: 4px solid rgba(255, 255, 255, 0.14);
}

.avatar-preview-img,
html[data-theme="light"] .avatar-preview-img {
    border-color: rgba(93, 143, 255, 0.10);
}

/*
   Кнопка камеры.
   Она привязана к label for="avatarFile",
   поэтому выглядит как action-button поверх аватара.
*/
.avatar-camera-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background: rgba(11, 16, 32, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: transform var(--transition-main), background-color var(--transition-main), box-shadow var(--transition-main), color var(--transition-main);
}

    .avatar-camera-btn:hover {
        transform: translateY(-2px) scale(1.02);
        background: rgba(17, 24, 39, 0.96);
    }

.avatar-camera-btn,
html[data-theme="light"] .avatar-camera-btn {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(18, 32, 58, 0.12), inset 0 0 0 1px rgba(18, 32, 58, 0.06);
}

/*
   Контейнер для cropper-редактора.
   Когда d-none снят, он занимает место аватара.
*/
.avatar-editor {
    width: 100%;
    max-width: 340px;
    height: 340px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-sm);
}

    .avatar-editor img {
        display: block;
        max-width: 100%;
    }

/*
   Блок под текст и кнопки управления.
*/
.avatar-meta {
    width: 100%;
    text-align: center;
}

/*
   Кнопка удаления аватара.
   Делаем её визуально вторичной, но заметной.
*/
.avatar-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border: 0;
    border-radius: 14px;
    color: var(--color-danger);
    background: rgba(255, 143, 143, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 143, 143, 0.14);
    cursor: pointer;
    transition: background-color var(--transition-main), transform var(--transition-main), box-shadow var(--transition-main);
}

    .avatar-remove-btn:hover {
        transform: translateY(-1px);
        background: rgba(255, 143, 143, 0.14);
        box-shadow: inset 0 0 0 1px rgba(255, 143, 143, 0.18);
    }

/*
   Ошибка загрузки/валидации фото.
*/
#avatarError {
    line-height: 1.45;
}


/* =========================================================
   18.6. ПОЛЯ ФОРМЫ НАСТРОЕК
   ========================================================= */

/*
   Метки полей.
*/
.settings-panel .form-label {
    margin-bottom: 8px;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--color-text);
}

/*
   Подстраиваем высоту и визуальный ритм input-ов именно
   в панели настроек, не ломая глобальные формы.
*/
.settings-panel .form-control {
    min-height: 54px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.35;
}

    /*
   Поля в невалидном состоянии.
*/
    .settings-panel .form-control.is-invalid,
    .settings-panel .was-validated .form-control:invalid {
        border-color: rgba(255, 143, 143, 0.42);
        box-shadow: 0 0 0 0.18rem rgba(255, 143, 143, 0.12);
    }

/*
   Текст ошибки bootstrap validation.
*/
.invalid-feedback {
    margin-top: 8px;
    font-size: 0.88rem;
    color: #ff9d9d;
}

.invalid-feedback,
html[data-theme="light"] .invalid-feedback {
    color: #d85b5b;
}

/*
   Дополнительный поясняющий текст у поля.
*/
.field-meta {
    margin-top: 10px;
}

.field-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

/*
   Form-text у аватара и других служебных блоков.
*/
.form-text {
    color: var(--color-text-faint);
}


/* =========================================================
   18.7. INLINE STATUS / СТАТУС ПОДТВЕРЖДЕНИЯ ПОЧТЫ
   ========================================================= */

/*
   Общая плашка статуса.
*/
.inline-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

    /*
   Предупреждение: почта не подтверждена.
*/
    .inline-status.warning {
        color: var(--color-warning);
        background: rgba(245, 193, 109, 0.10);
        box-shadow: inset 0 0 0 1px rgba(245, 193, 109, 0.16);
    }

    /*
   Успех: почта подтверждена.
*/
    .inline-status.success {
        color: var(--color-success);
        background: rgba(131, 230, 179, 0.10);
        box-shadow: inset 0 0 0 1px rgba(131, 230, 179, 0.16);
    }

    .inline-status svg {
        flex: 0 0 18px;
    }

/*
   Ссылка-кнопка "выслать повторно".
   В HTML она уже btn btn-link p-0, мы только визуально подстраиваем.
*/
.settings-panel .btn-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

    .settings-panel .btn-link:hover {
        color: var(--color-primary-strong);
        text-decoration: underline;
    }


/* =========================================================
   18.8. КНОПКА СОХРАНЕНИЯ
   ========================================================= */

/*
   Контейнер нижних действий формы.
*/
.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 28px;
}

/*
   Основная CTA-кнопка карточки.
   Класс .card-btn используется как отдельный стиль кнопки,
   чтобы он визуально отличался от стандартного bootstrap .btn.
*/
.card-btn {
    min-height: 50px;
    padding: 12px 18px;
    border: 0;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    box-shadow: 0 14px 26px rgba(93, 143, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: transform var(--transition-main), box-shadow var(--transition-main), filter var(--transition-main);
}

    .card-btn:hover {
        transform: translateY(-2px);
        filter: brightness(1.03);
        box-shadow: 0 18px 30px rgba(93, 143, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }

    .card-btn:active {
        transform: translateY(0);
    }

    .card-btn.with-icon img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .card-btn.with-icon span {
        display: inline-block;
    }


/* =========================================================
   18.9. CROPperJS — МЯГКАЯ ПОДСТРОЙКА ПОД СТИЛЬ КАБИНЕТА
   ---------------------------------------------------------
   Не ломаем библиотеку, только косметически подстраиваем.
   ========================================================= */

/*
   Затемнение вне области кадрирования.
*/
.cropper-modal {
    background-color: rgba(0, 0, 0, 0.46);
}

.cropper-modal,
html[data-theme="light"] .cropper-modal {
    background-color: rgba(18, 32, 58, 0.18);
}

/*
   Точка/центр cropper скрыты у вас и в JS, но на всякий случай
   оставляем безопасный стиль.
*/
.cropper-center,
.cropper-face {
    opacity: 0;
}

/*
   Контур выделенной области делаем чище и тоньше визуально.
*/
.cropper-view-box {
    outline: 1px solid rgba(255, 255, 255, 0.70);
    outline-color: rgba(255, 255, 255, 0.70);
    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.08);
}

.cropper-view-box,
html[data-theme="light"] .cropper-view-box {
    outline-color: rgba(255, 255, 255, 0.95);
}


/* =========================================================
   18.10. АДАПТИВ ДЛЯ SETTINGS PAGE
   ========================================================= */

@media (max-width: 1199.98px) {
    .avatar-preview-wrap {
        width: 172px;
        height: 172px;
    }

    .avatar-editor {
        max-width: 300px;
        height: 300px;
    }
}

@media (max-width: 991.98px) {
    /*
       На планшетах делаем панели чуть мягче по отступам.
    */
    .settings-panel {
        padding: 22px;
        border-radius: 24px;
    }

    .settings-nav-tabs {
        border-radius: 20px;
    }

    .settings-actions {
        margin-top: 24px;
    }
}

@media (max-width: 767.98px) {
    .settings-page__header {
        margin-bottom: 16px;
    }

    .settings-card__header {
        margin-bottom: 16px;
    }

    /*
       Табы на мобильных становятся более компактными.
    */
    .settings-nav-tabs {
        gap: 10px;
        padding: 6px;
        border-radius: 18px;
    }

        .settings-nav-tabs .nav-link {
            min-height: 46px;
            padding: 10px 14px;
            border-radius: 14px;
            font-size: 0.94rem;
        }

    .settings-tab-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .settings-panel {
        padding: 18px;
        border-radius: 22px;
    }

    .settings-panel__title {
        margin-bottom: 16px;
    }

    .avatar-preview-wrap {
        width: 154px;
        height: 154px;
        padding: 7px;
    }

    .avatar-camera-btn {
        width: 44px;
        height: 44px;
        right: 8px;
        bottom: 8px;
    }

    .avatar-editor {
        max-width: 100%;
        height: 280px;
        border-radius: 20px;
    }

    .field-meta-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-actions {
        justify-content: stretch;
    }

        .settings-actions .card-btn {
            width: 100%;
        }
}

@media (max-width: 479.98px) {
    .settings-card__title {
        font-size: 1.28rem;
    }

    .settings-nav-tabs {
        padding: 5px;
        gap: 8px;
    }

        .settings-nav-tabs .nav-link {
            width: 100%;
            justify-content: center;
        }

    .settings-panel {
        padding: 16px;
        border-radius: 20px;
    }

    .avatar-preview-wrap {
        width: 142px;
        height: 142px;
    }

    .avatar-editor {
        height: 240px;
    }

    .settings-panel .form-control {
        min-height: 50px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .card-btn {
        min-height: 48px;
        border-radius: 14px;
    }
}

/* =========================================================
   19. SETTINGS PAGE / БЕЗОПАСНОСТЬ
   ---------------------------------------------------------
   Этот блок добавляется НИЖЕ стилей страницы "Общие".
   Он использует уже существующие:
   - settings-page
   - settings-nav-tabs
   - settings-panel
   - settings-actions
   - card-btn
   - inline-status
   - form-control
   и дополняет их стилями именно для вкладки "Безопасность".
   ========================================================= */


/* =========================================================
   19.1. ОБЩАЯ СТРУКТУРА СТРАНИЦЫ БЕЗОПАСНОСТИ
   ========================================================= */

/*
   Отдельный модификатор layout для вкладки безопасности.
   Здесь в первую очередь задаём аккуратный вертикальный ритм.
*/
.settings-layout--security {
    row-gap: 20px;
}

/*
   Левая панель с информацией о способе входа.
*/
.settings-panel--security-side {
    min-height: 100%;
}

/*
   Правая панель с формой смены / задания пароля.
*/
.settings-panel--security-main {
    min-height: 100%;
}


/* =========================================================
   19.2. БЛОК "СПОСОБ ВХОДА"
   ========================================================= */

/*
   Общий контейнер карточки текущего способа входа.
   Это не отдельная glass-card, а внутренняя информативная плашка
   внутри левой панели.
*/
.login-provider-block {
    padding: 18px;
    border-radius: 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-xs);
}

/*
   Подпись "Текущий способ входа".
*/
.login-provider-label {
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
   Основное значение — например Google / email / внешний сервис.
   Делаем его заметным и чуть более "системным" по виду.
*/
.login-provider-value {
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--color-text);
    word-break: break-word;
}

    .login-provider-value b,
    .login-provider-value strong {
        font-weight: 700;
        color: var(--color-text);
    }


/* =========================================================
   19.3. ВСПОМОГАТЕЛЬНЫЕ ПРИМЕЧАНИЯ
   ========================================================= */

/*
   Универсальный поясняющий текст под статусами и над формой.
   Используется для подсказок пользователю.
*/
.settings-note {
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--glass-bg-2);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: var(--shadow-xs);
}

/*
   В светлой теме сохраняем лёгкость и воздух,
   не делая блок слишком контрастным.
*/
.settings-note,
html[data-theme="light"] .settings-note {
    background: rgba(255, 255, 255, 0.56);
}


/* =========================================================
   19.4. ФОРМА ПАРОЛЯ
   ========================================================= */

/*
   На странице безопасности поля особенно важны,
   поэтому делаем их чуть более "собранными":
   - одинаковая высота
   - мягкий внутренний отступ
   - хорошая читабельность placeholder'ов
*/
.settings-panel--security-main .form-control {
    min-height: 56px;
    padding: 15px 16px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

    /*
   Плейсхолдеры делаем заметными, но не кричащими.
*/
    .settings-panel--security-main .form-control::placeholder {
        color: var(--color-text-faint);
    }

    /*
   Небольшое усиление фокуса именно на странице безопасности,
   чтобы пользователь чётко видел активное поле.
*/
    .settings-panel--security-main .form-control:focus {
        background: var(--color-surface-strong);
    }

    /*
   Если MVC отрисует поле как невалидное,
   добавляем читаемый красный акцент.
*/
    .settings-panel--security-main .form-control.input-validation-error,
    .settings-panel--security-main .form-control.is-invalid,
    .settings-panel--security-main .was-validated .form-control:invalid {
        border-color: rgba(255, 143, 143, 0.42);
        box-shadow: 0 0 0 0.18rem rgba(255, 143, 143, 0.12);
    }

/*
   Сообщение под отдельным полем:
   @Html.ValidationMessageFor(..., new { @class = "text-danger small" })
*/
.settings-panel--security-main .text-danger.small,
.settings-panel--security-main .field-validation-error,
.settings-panel--security-main .field-validation-valid {
    display: block;
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
}

.settings-panel--security-main .text-danger.small,
.settings-panel--security-main .field-validation-error {
    color: #ff9d9d !important;
}

.settings-panel--security-main .text-danger.small,
html[data-theme="light"] .settings-panel--security-main .text-danger.small,
.settings-panel--security-main .field-validation-error,
html[data-theme="light"] .settings-panel--security-main .field-validation-error {
    color: #d85b5b !important;
}


/* =========================================================
   19.5. VALIDATION SUMMARY / ОБЩАЯ ОШИБКА ФОРМЫ
   ========================================================= */

/*
   ValidationSummary у вас отрисовывается как alert alert-danger.
   Bootstrap уже подхватит alert, но summary часто содержит список ul,
   который нужно привести в порядок.
*/
.validation-summary-errors {
    margin: 0;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

    .validation-summary-errors li {
        margin-bottom: 6px;
        line-height: 1.45;
    }

        .validation-summary-errors li:last-child {
            margin-bottom: 0;
        }

/*
   Если ValidationSummary пришёл без Bootstrap-списка,
   всё равно сохраняем нормальный ритм.
*/
.alert.alert-danger.validation-summary-errors,
.alert.alert-danger ul {
    color: inherit;
}


/* =========================================================
   19.6. ACTIONS / КНОПКИ ДЕЙСТВИЯ
   ========================================================= */

/*
   Отдельная нижняя зона действий для формы безопасности.
*/
.settings-actions--security {
    margin-top: 28px;
    justify-content: flex-start;
}

    /*
   Кнопка сохранения пароля обычно имеет длинный текст,
   поэтому даём ей чуть больше внутреннего воздуха.
*/
    .settings-actions--security .card-btn {
        min-height: 52px;
        padding-left: 20px;
        padding-right: 20px;
    }

        /*
   Иконка в кнопке.
*/
        .settings-actions--security .card-btn img {
            width: 16px;
            height: 16px;
            object-fit: contain;
        }

        /*
   Текст кнопки — выравниваем и не даём ему визуально "прыгать".
*/
        .settings-actions--security .card-btn span {
            display: inline-block;
            line-height: 1.1;
        }


/* =========================================================
   19.7. ДОПОЛНИТЕЛЬНАЯ ПОДСТРОЙКА СТАТУСОВ
   ========================================================= */

/*
   На вкладке безопасности status-бейджи полезно чуть растянуть по высоте,
   чтобы они выглядели как полноценные информативные элементы.
*/
.settings-panel--security-side .inline-status {
    min-height: 36px;
    padding: 8px 13px;
    line-height: 1.2;
    white-space: normal;
}

    /*
   Если текста больше, чем в одну строку,
   он остаётся аккуратным.
*/
    .settings-panel--security-side .inline-status span {
        display: inline-block;
    }


/* =========================================================
   19.8. АДАПТИВ ДЛЯ СТРАНИЦЫ БЕЗОПАСНОСТИ
   ========================================================= */

@media (max-width: 991.98px) {
    /*
       На планшетах панели уже становятся уже,
       поэтому немного уменьшаем внутренние отступы у блока способа входа.
    */
    .login-provider-block {
        padding: 16px;
        border-radius: 16px;
    }

    .settings-note {
        padding: 13px 14px;
        border-radius: 15px;
    }

    .settings-actions--security {
        margin-top: 24px;
    }
}

@media (max-width: 767.98px) {
    /*
       На мобильных форма безопасности должна оставаться простой,
       поэтому делаем поля и информационные блоки чуть компактнее.
    */
    .login-provider-label {
        font-size: 0.82rem;
    }

    .login-provider-value {
        font-size: 0.98rem;
    }

    .settings-note {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .settings-panel--security-main .form-control {
        min-height: 52px;
        padding: 13px 14px;
        border-radius: 14px;
    }

    .settings-actions--security {
        justify-content: stretch;
    }

        .settings-actions--security .card-btn {
            width: 100%;
        }
}

@media (max-width: 479.98px) {
    /*
       На очень узких экранах ещё немного уплотняем карточки.
    */
    .login-provider-block {
        padding: 14px;
        border-radius: 15px;
    }

    .settings-note {
        padding: 12px 13px;
        border-radius: 14px;
    }

    .settings-panel--security-main .form-control {
        min-height: 50px;
        padding: 12px 13px;
    }

    .settings-actions--security .card-btn {
        min-height: 48px;
        border-radius: 14px;
    }
}

/* =========================================================
   20. FIX ДЛЯ СРЕДНИХ ЭКРАНОВ — ВКЛАДКА "БЕЗОПАСНОСТЬ"
   ---------------------------------------------------------
   Проблема:
   на ширине около 1000–1200px левая колонка безопасности
   слишком узкая, и блоки "Способ входа / статус / примечание"
   начинают скукоживаться.

   Решение:
   - на средних экранах делаем пропорцию ближе к 4/8 вместо 3/9
   - немного уменьшаем внутренние отступы в левой панели
   - делаем внутренние карточки компактнее
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
    /*
       Переопределяем bootstrap-ширину именно для страницы безопасности.
       Было визуально близко к 25% / 75%.
       Делаем примерно 33.333% / 66.666%.
    */
    .settings-layout--security > .settings-col-side {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .settings-layout--security > .settings-col-main {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    /*
       Левая панель делается чуть менее "толстой" по внутренним отступам,
       чтобы полезная ширина стала больше.
    */
    .settings-panel--security-side {
        padding: 20px;
    }

        /*
       Внутренний блок со способом входа тоже делаем компактнее.
    */
        .settings-panel--security-side .login-provider-block {
            padding: 14px;
            border-radius: 16px;
        }

        /*
       Статус и текст-пояснение ужимаем по вертикали и горизонтали,
       чтобы они меньше ломали ширину.
    */
        .settings-panel--security-side .inline-status {
            padding: 8px 12px;
            font-size: 0.84rem;
        }

        .settings-panel--security-side .settings-note {
            padding: 12px 13px;
            font-size: 0.92rem;
            line-height: 1.5;
        }

        /*
       Заголовок и значение способа входа слегка уплотняем.
    */
        .settings-panel--security-side .login-provider-label {
            font-size: 0.8rem;
        }

        .settings-panel--security-side .login-provider-value {
            font-size: 0.98rem;
        }
}

/* =========================================================
   21. FILES LIST PAGE / МОИ ФАЙЛЫ
   ---------------------------------------------------------
   Добавить НИЖЕ всех предыдущих стилей.
   Блок оформляет страницу списка купленных файлов:
   - заголовок страницы
   - пустое состояние
   - карточки файлов
   - обложки / заглушки
   - тип файла, дату покупки, кнопку просмотра
   ========================================================= */


/* =========================================================
   21.1. ОБЩИЙ КОНТЕЙНЕР СТРАНИЦЫ
   ========================================================= */

/*
   Главная обёртка страницы "Мои файлы".
   Bootstrap уже даёт py-5, здесь только базовая структура.
*/
.files-list-page {
    position: relative;
}

    /*
   Заголовок страницы.
   В HTML у вас h1 с bootstrap-классами, но здесь мы задаём
   единый визуальный ритм именно для раздела файлов.
*/
    .files-list-page h1 {
        margin-bottom: 10px;
        font-size: clamp(1.9rem, 1.35rem + 1.4vw, 2.7rem);
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--color-text);
    }

    /*
   Подзаголовок под h1.
*/
    .files-list-page > .mb-4 > p {
        max-width: 680px;
        font-size: 1rem;
        line-height: 1.55;
        color: var(--color-text-muted) !important;
    }


    /* =========================================================
   21.2. ПУСТОЕ СОСТОЯНИЕ
   ---------------------------------------------------------
   Если файлов нет, alert уже есть в HTML.
   Ниже даём ему более "кабинетный" вид.
   ========================================================= */

    .files-list-page .alert-info {
        border: 0;
        border-radius: 20px;
        padding: 18px 20px;
        color: var(--color-text);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.18), rgba(121, 168, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.16), var(--shadow-xs);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .files-list-page .alert-info,
    html[data-theme="light"] .files-list-page .alert-info {
        background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.16), var(--shadow-xs);
    }


/* =========================================================
   21.3. КАРТОЧКА ФАЙЛА
   ---------------------------------------------------------
   Основа списка — .course-card.
   Используем стиль, близкий к settings-panel / glass-card,
   но под формат продуктовой карточки.
   ========================================================= */

.course-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-main), box-shadow var(--transition-main), background var(--transition-main), border-color var(--transition-main);
}

    /*
   Верхний световой блик, чтобы карточка смотрелась "живой".
*/
    .course-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 58%);
        pointer-events: none;
        z-index: 0;
    }

    .course-card::before,
    html[data-theme="light"] .course-card::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 58%);
    }

    /*
   Все реальные элементы карточки поднимаем выше блика.
*/
    .course-card > * {
        position: relative;
        z-index: 1;
    }

    /*
   Hover-эффект.
   На десктопе карточка слегка поднимается.
*/
    .course-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 46px rgba(0, 0, 0, 0.20), 0 10px 20px rgba(121, 168, 255, 0.08);
    }

    .course-card:hover,
    html[data-theme="light"] .course-card:hover {
        box-shadow: 0 24px 46px rgba(18, 32, 58, 0.12), 0 10px 20px rgba(93, 143, 255, 0.08);
    }


/* =========================================================
   21.4. ИЗОБРАЖЕНИЕ / ОБЛОЖКА / ЗАГЛУШКА
   ========================================================= */

/*
   Верхняя обложка файла.
   Работает и для реального img, и для div-заглушки.
*/
.course-image {
    width: 100%;
    min-height: 220px;
    height: 220px;
    object-fit: cover;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom: 1px solid var(--color-border-soft);
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.10), rgba(121, 168, 255, 0.04));
}

/*
   Если обложки нет, в HTML используется div с inline background:#f8f9fa.
   Чтобы сохранить общий стиль в обеих темах, принудительно перекрываем.
*/
div.course-image {
    color: var(--color-text-faint);
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.10), rgba(121, 168, 255, 0.04)) !important;
}

div.course-image,
html[data-theme="light"] div.course-image {
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.08), rgba(93, 143, 255, 0.03)) !important;
}

/*
   Иконка-заглушка с эмодзи.
   Чуть приглушаем, чтобы не выглядела слишком случайной.
*/
div.course-image {
    font-size: 52px !important;
    line-height: 1;
}


/* =========================================================
   21.5. ТЕЛО КАРТОЧКИ
   ========================================================= */

/*
   Внутренний контейнер текста и действий.
*/
.course-card .card-body {
    padding: 20px 20px 18px;
}

/*
   Название файла / продукта.
*/
.course-card h5 {
    margin-bottom: 10px;
    font-size: 1.08rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/*
   Описание файла.
   Ставим ограничение по высоте, чтобы карточки в сетке
   были визуально ровнее.
*/
.course-card p.small {
    margin-bottom: 0;
    color: var(--color-text-muted) !important;
    font-size: 0.93rem;
    line-height: 1.55;
}

/*
   Если текста много, слегка ограничиваем число строк.
   В современных браузерах это даст аккуратное обрезание.
*/
.course-card .card-body p.flex-grow-1 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =========================================================
   21.6. НИЖНЯЯ СТРОКА: ТИП ФАЙЛА + КНОПКА
   ========================================================= */

/*
   Бейдж типа файла.
   В HTML используется bootstrap badge bg-light text-dark border,
   но мы переоформляем его под текущую тему.
*/
.course-card .badge.bg-light {
    min-height: 34px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border-soft) !important;
    box-shadow: var(--shadow-xs);
}

/*
   Бейдж "Нет доступа".
*/
.course-card .badge.bg-secondary {
    min-height: 34px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 143, 143, 0.72), rgba(255, 143, 143, 0.52)) !important;
    border: 0;
    box-shadow: var(--shadow-xs);
}

/*
   Кнопка "Просмотр".
   Базовый стиль card-btn у вас уже есть.
   Здесь только локальные правки для карточек файлов.
*/
.course-card .card-btn {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 12px;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

    /*
   Иконка внутри кнопки.
*/
    .course-card .card-btn img {
        width: 15px;
        height: 15px;
        object-fit: contain;
    }

/*
   Если кнопка открывает документ в новой вкладке,
   делаем её особенно аккуратной в строке действий.
*/
.course-card .d-flex.justify-content-between.align-items-center.mt-3 {
    gap: 12px;
}


/* =========================================================
   21.7. ДАТА ПОКУПКИ
   ========================================================= */

/*
   Нижняя служебная строка с датой покупки.
*/
.course-card .mt-3.text-muted.small {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-faint) !important;
    font-size: 0.85rem;
    line-height: 1.45;
}


/* =========================================================
   21.8. АДАПТИВ
   ========================================================= */

@media (max-width: 1199.98px) {
    /*
       На ноутбуках чуть уменьшаем описание,
       чтобы сетка выглядела собраннее.
    */
    .course-card .card-body {
        padding: 18px 18px 16px;
    }

        .course-card .card-body p.flex-grow-1 {
            -webkit-line-clamp: 3;
        }
}

@media (max-width: 767.98px) {
    /*
       На телефонах карточки должны быть компактнее,
       но не тесными.
    */
    .files-list-page h1 {
        font-size: 1.8rem;
    }

    .course-card {
        border-radius: 22px;
    }

    .course-image {
        min-height: 200px;
        height: 200px;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
    }

    .course-card .card-body {
        padding: 16px;
    }

    .course-card h5 {
        font-size: 1rem;
    }

    .course-card .d-flex.justify-content-between.align-items-center.mt-3 {
        flex-wrap: wrap;
        align-items: stretch !important;
    }

    .course-card .card-btn {
        width: 100%;
        justify-content: center;
    }

    .course-card .badge.bg-light,
    .course-card .badge.bg-secondary {
        width: fit-content;
    }
}

@media (max-width: 479.98px) {
    /*
       На очень узких экранах ещё немного уменьшаем обложку
       и делаем текст плотнее.
    */
    .course-image {
        min-height: 180px;
        height: 180px;
    }

    div.course-image {
        font-size: 44px !important;
    }

    .course-card .card-body {
        padding: 14px;
    }

    .course-card p.small {
        font-size: 0.9rem;
    }

    .course-card .card-btn {
        min-height: 36px;
        border-radius: 11px;
    }
}

/* =========================================================
   22. DASHBOARD WIDTH FIX
   ---------------------------------------------------------
   Проблема:
   на широких экранах dashboard выглядит слишком узким,
   потому что одновременно срабатывают:
   - .page-shell max-width
   - bootstrap .container

   Решение:
   - расширяем рабочую область
   - убираем лишнее ограничение у container внутри page-shell
   - оставляем безопасные боковые отступы
   ========================================================= */

/*
   Делаем общую рабочую область шире.
*/
.page-shell {
    max-width: 1300px;
}

    /*
   Убираем дополнительное bootstrap-ограничение внутри page-shell,
   чтобы контент реально мог занять доступную ширину.
*/
    .page-shell > .container,
    .page-shell .container:first-child {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

/* =========================================================
   23. BILLING PAGE / ИСТОРИЯ ПЛАТЕЖЕЙ
   ---------------------------------------------------------
   Добавить НИЖЕ всех предыдущих стилей.
   Важно:
   - в view используется обёртка .marathon-list
   - внутри неё либо alert, либо table-responsive с таблицей
   - стили ниже оформляют блок как glass-panel
   ========================================================= */


/* =========================================================
   23.1. ВНЕШНИЙ КОНТЕЙНЕР ИСТОРИИ ПЛАТЕЖЕЙ
   ========================================================= */

/*
   Общая панель раздела.
   Несмотря на имя класса .marathon-list, в этой view это контейнер
   истории оплат. Оформляем его как основную стеклянную карточку.
*/
.marathon-list {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 26px;
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
}

    /*
   Верхний световой блик.
*/
    .marathon-list::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 58%);
        pointer-events: none;
    }

    .marathon-list::before,
    html[data-theme="light"] .marathon-list::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 58%);
    }

    /*
   Контент панели поднимаем выше декоративного слоя.
*/
    .marathon-list > * {
        position: relative;
        z-index: 1;
    }


    /* =========================================================
   23.2. ПУСТОЕ СОСТОЯНИЕ
   ========================================================= */

    /*
   Если оплат пока нет, alert приводим к общей стилистике кабинета.
*/
    .marathon-list .alert-info {
        margin: 0;
        border: 0;
        border-radius: 18px;
        padding: 18px 20px;
        color: var(--color-text);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.18), rgba(121, 168, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.16), var(--shadow-xs);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .marathon-list .alert-info,
    html[data-theme="light"] .marathon-list .alert-info {
        background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.16), var(--shadow-xs);
    }


    /* =========================================================
   23.3. ОБЛАСТЬ С ТАБЛИЦЕЙ
   ========================================================= */

    /*
   Таблица уже завернута в .table-responsive.
   Добавляем мягкие края и аккуратный скролл.
*/
    .marathon-list .table-responsive {
        border-radius: 20px;
        overflow: auto;
        background: transparent;
    }

        /*
   Кастомный скролл для горизонтальной прокрутки.
*/
        .marathon-list .table-responsive::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

        .marathon-list .table-responsive::-webkit-scrollbar-track {
            background: transparent;
        }

        .marathon-list .table-responsive::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 999px;
        }

        .marathon-list .table-responsive::-webkit-scrollbar-thumb,
        html[data-theme="light"] .marathon-list .table-responsive::-webkit-scrollbar-thumb {
            background: rgba(22, 32, 51, 0.10);
        }


    /* =========================================================
   23.4. ТАБЛИЦА ПЛАТЕЖЕЙ
   ========================================================= */

    /*
   Основная таблица.
   Убираем лишний bootstrap-маргин снизу и задаём минимальную ширину,
   чтобы столбцы не ломались на средних экранах.
*/
    .marathon-list .table.table-hover.align-middle {
        margin-bottom: 0;
        min-width: 980px;
        color: var(--color-text);
        border-color: var(--color-border-soft);
        vertical-align: middle;
    }

    /*
   Заголовок таблицы.
*/
    .marathon-list .table thead th {
        padding: 16px 18px;
        border-top: 0;
        border-bottom: 1px solid var(--color-border-soft);
        background: rgba(255, 255, 255, 0.03);
        color: var(--color-text-faint);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .marathon-list .table thead th,
    html[data-theme="light"] .marathon-list .table thead th {
        background: rgba(255, 255, 255, 0.34);
    }

    /*
   Строки таблицы.
*/
    .marathon-list .table tbody tr {
        transition: background-color var(--transition-main), transform var(--transition-main);
    }

    /*
   Hover-эффект строки.
   Делаем очень деликатным, чтобы таблица не выглядела "шумной".
*/
    .marathon-list .table-hover > tbody > tr:hover > * {
        color: var(--color-text);
        background-color: rgba(121, 168, 255, 0.06);
    }

    .marathon-list .table-hover > tbody > tr:hover > *,
    html[data-theme="light"] .marathon-list .table-hover > tbody > tr:hover > * {
        background-color: rgba(93, 143, 255, 0.05);
    }

    /*
   Ячейки тела таблицы.
*/
    .marathon-list .table tbody td {
        padding: 18px;
        border-bottom: 1px solid var(--color-border-soft);
        color: var(--color-text);
        background: transparent;
        font-size: 0.95rem;
        line-height: 1.45;
    }

    /*
   Последняя строка — без лишней нижней границы.
*/
    .marathon-list .table tbody tr:last-child td {
        border-bottom: 0;
    }

    /*
   Первый столбец — название продукта.
   Делаем чуть выразительнее.
*/
    .marathon-list .table tbody td:first-child {
        font-weight: 600;
        color: var(--color-text);
    }

    /*
   Столбцы с датами и ценами — цифры обычно лучше смотрятся
   на более "системном" шрифте, но только слегка.
*/
    .marathon-list .table tbody td:nth-child(3),
    .marathon-list .table tbody td:nth-child(5),
    .marathon-list .table tbody td:nth-child(6) {
        font-family: var(--font-accent);
        font-size: 0.9rem;
        letter-spacing: -0.01em;
    }

    /*
   Столбец действия выравниваем красиво по правому краю.
*/
    .marathon-list .table td.text-end,
    .marathon-list .table th.text-end {
        white-space: nowrap;
    }


    /* =========================================================
   23.5. БЕЙДЖИ СТАТУСОВ
   ========================================================= */

    /*
   Базовый стиль всех badge в таблице.
*/
    .marathon-list .badge {
        min-height: 34px;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        border: 0;
        box-shadow: var(--shadow-xs);
    }

        /*
   Оплачен.
*/
        .marathon-list .badge.bg-success {
            color: #ffffff;
            background: linear-gradient(135deg, rgba(38, 179, 107, 0.90), rgba(38, 179, 107, 0.74)) !important;
        }

        /*
   Ожидает оплаты.
*/
        .marathon-list .badge.bg-warning {
            color: #2e2412 !important;
            background: linear-gradient(135deg, rgba(245, 193, 109, 0.92), rgba(245, 193, 109, 0.76)) !important;
        }

        /*
   Возврат.
*/
        .marathon-list .badge.bg-secondary {
            color: #ffffff;
            background: linear-gradient(135deg, rgba(125, 134, 153, 0.92), rgba(125, 134, 153, 0.76)) !important;
        }

        /*
   Прочие статусы.
*/
        .marathon-list .badge.bg-light {
            color: var(--color-text) !important;
            background: var(--color-surface) !important;
            border: 1px solid var(--color-border-soft);
            box-shadow: var(--shadow-xs);
        }


    /* =========================================================
   23.6. КНОПКА "ОПЛАТИТЬ"
   ========================================================= */

    /*
   Локальная подстройка .card-btn внутри таблицы.
   Делаем кнопку компактнее, чем на карточках.
*/
    .marathon-list .card-btn {
        min-height: 38px;
        padding: 9px 14px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

        /*
   Если в будущем появится иконка внутри кнопки — всё уже готово.
*/
        .marathon-list .card-btn.with-icon {
            gap: 8px;
        }


/* =========================================================
   23.7. АДАПТИВ
   ========================================================= */

@media (max-width: 1199.98px) {
    /*
       На ноутбуках делаем панель чуть компактнее.
    */
    .marathon-list {
        padding: 18px;
        border-radius: 24px;
    }

        .marathon-list .table thead th,
        .marathon-list .table tbody td {
            padding-left: 16px;
            padding-right: 16px;
        }
}

@media (max-width: 767.98px) {
    /*
       На телефонах таблица всё равно останется с горизонтальным скроллом,
       но сам контейнер делаем компактнее.
    */
    .marathon-list {
        padding: 14px;
        border-radius: 22px;
    }

        .marathon-list .table-responsive {
            border-radius: 16px;
        }

        .marathon-list .table thead th {
            padding: 14px 14px;
            font-size: 0.76rem;
        }

        .marathon-list .table tbody td {
            padding: 14px;
            font-size: 0.92rem;
        }

        .marathon-list .badge {
            min-height: 32px;
            padding: 7px 10px;
            font-size: 0.74rem;
        }

        .marathon-list .card-btn {
            min-height: 36px;
            padding: 8px 12px;
            border-radius: 11px;
            font-size: 0.88rem;
        }
}

@media (max-width: 479.98px) {
    /*
       На очень узких экранах чуть сильнее уплотняем.
    */
    .marathon-list {
        padding: 12px;
        border-radius: 20px;
    }

        .marathon-list .table thead th,
        .marathon-list .table tbody td {
            padding-left: 12px;
            padding-right: 12px;
        }
}
/* =========================================================
   24. BILLING MOBILE CARDS
   ---------------------------------------------------------
   Мобильная версия таблицы оплат без изменения HTML.
   На узких экранах таблица превращается в набор карточек.
   Добавить В САМЫЙ НИЗ CSS, чтобы этот блок переопределил
   обычные табличные стили.
   ========================================================= */

@media (max-width: 767.98px) {
    /*
       Убираем горизонтальный скролл, потому что ниже таблица
       уже перестраивается в карточки.
    */
    .marathon-list .table-responsive {
        overflow: visible;
    }

    /*
       Таблица больше не ведёт себя как таблица.
    */
    .marathon-list .table.table-hover.align-middle,
    .marathon-list .table.table-hover.align-middle thead,
    .marathon-list .table.table-hover.align-middle tbody,
    .marathon-list .table.table-hover.align-middle tr,
    .marathon-list .table.table-hover.align-middle th,
    .marathon-list .table.table-hover.align-middle td {
        display: block;
        width: 100%;
    }

    /*
       Минимальная ширина больше не нужна.
    */
    .marathon-list .table.table-hover.align-middle {
        min-width: 0;
        border: 0;
    }

        /*
       Заголовок таблицы скрываем, потому что названия полей
       будут выводиться у каждой строки через ::before.
    */
        .marathon-list .table.table-hover.align-middle thead {
            display: none;
        }

        /*
       Каждая запись оплаты становится самостоятельной карточкой.
    */
        .marathon-list .table.table-hover.align-middle tbody tr {
            margin-bottom: 14px;
            padding: 14px;
            border-radius: 18px;
            background: var(--color-surface);
            border: 1px solid var(--color-border-soft);
            box-shadow: var(--shadow-xs);
        }

            .marathon-list .table.table-hover.align-middle tbody tr:last-child {
                margin-bottom: 0;
            }

    /*
       Убираем табличные линии и превращаем ячейки в строки
       вида "Подпись / Значение".
    */
    .marathon-list .table tbody td {
        position: relative;
        padding: 0 0 12px 0;
        margin: 0 0 12px 0;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal;
        font-size: 0.93rem;
        line-height: 1.45;
    }

        /*
       Между строками внутри карточки делаем тонкий разделитель.
    */
        .marathon-list .table tbody td:not(:last-child) {
            border-bottom: 1px solid var(--color-border-soft) !important;
            padding-bottom: 12px;
        }

        /*
       Последняя ячейка обычно содержит кнопку действия.
       Для неё убираем нижний отступ.
    */
        .marathon-list .table tbody td:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        /*
       Подписи к полям.
       Их нет в HTML, поэтому рисуем через псевдоэлемент.
    */
        .marathon-list .table tbody td::before {
            display: block;
            margin-bottom: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color-text-faint);
        }

        /*
       Соответствие колонок и заголовков таблицы.
    */
        .marathon-list .table tbody td:nth-child(1)::before {
            content: "Продукт";
        }

        .marathon-list .table tbody td:nth-child(2)::before {
            content: "Тип";
        }

        .marathon-list .table tbody td:nth-child(3)::before {
            content: "Цена";
        }

        .marathon-list .table tbody td:nth-child(4)::before {
            content: "Статус";
        }

        .marathon-list .table tbody td:nth-child(5)::before {
            content: "Создан";
        }

        .marathon-list .table tbody td:nth-child(6)::before {
            content: "Оплачен";
        }

        .marathon-list .table tbody td:nth-child(7)::before {
            content: "Действие";
        }

        /*
       Название продукта делаем главным элементом карточки.
    */
        .marathon-list .table tbody td:first-child {
            font-size: 1rem;
            font-weight: 700;
            color: var(--color-text);
        }

        /*
       Цены и даты на мобильном можно вернуть к обычному шрифту,
       чтобы не было излишней "техническости".
    */
        .marathon-list .table tbody td:nth-child(3),
        .marathon-list .table tbody td:nth-child(5),
        .marathon-list .table tbody td:nth-child(6) {
            font-family: var(--font-main);
            font-size: 0.93rem;
            letter-spacing: 0;
        }

    /*
       Бейджи статусов красиво встают в карточку.
    */
    .marathon-list .table .badge {
        min-height: 30px;
        padding: 7px 10px;
        font-size: 0.74rem;
    }

    /*
       Кнопка действия на мобильном должна быть удобной для нажатия.
    */
    .marathon-list .table td.text-end .card-btn,
    .marathon-list .table td .card-btn {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }

    /*
       Если действия нет, пустая ячейка не должна занимать место.
    */
    .marathon-list .table tbody td:last-child:empty {
        display: none;
    }
}

/* =========================================================
   25. CONSULTATION LIST PAGE / МОИ КОНСУЛЬТАЦИИ
   ---------------------------------------------------------
   Добавить НИЖЕ всех предыдущих стилей.
   Важно:
   - view использует .consultation-list-page
   - карточки собраны на bootstrap .card
   - есть inline-style у обложек и заглушек, поэтому часть
     правил ниже использует !important, чтобы аккуратно
     привести всё к общей теме
   ========================================================= */


/* =========================================================
   25.1. ОБЩИЙ КОНТЕЙНЕР СТРАНИЦЫ
   ========================================================= */

.consultation-list-page {
    position: relative;
}

    /*
   Заголовок страницы.
*/
    .consultation-list-page h3 {
        margin-bottom: 0.5rem;
        font-size: clamp(1.55rem, 1.2rem + 1vw, 2.2rem);
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--color-text);
    }


    /* =========================================================
   25.2. ПУСТОЕ СОСТОЯНИЕ
   ========================================================= */

    .consultation-list-page .alert-info {
        border: 0;
        padding: 18px 20px;
        color: var(--color-text);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.18), rgba(121, 168, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.16), var(--shadow-xs);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .consultation-list-page .alert-info,
    html[data-theme="light"] .consultation-list-page .alert-info {
        background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.08));
        box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.16), var(--shadow-xs);
    }


    /* =========================================================
   25.3. КАРТОЧКА КОНСУЛЬТАЦИИ
   ---------------------------------------------------------
   Переоформляем bootstrap .card под стиль кабинета.
   ========================================================= */

    .consultation-list-page .card {
        position: relative;
        overflow: hidden;
        border: 0 !important;
        border-radius: 24px !important;
        background: var(--glass-bg);
        border: var(--glass-border);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow-lg) !important;
        transition: transform var(--transition-main), box-shadow var(--transition-main), background var(--transition-main), border-color var(--transition-main);
    }

        /*
   Верхний световой блик.
*/
        .consultation-list-page .card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 58%);
            pointer-events: none;
            z-index: 0;
        }

        .consultation-list-page .card::before,
        html[data-theme="light"] .consultation-list-page .card::before {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 58%);
        }

        /*
   Контент карточки поднимаем выше декоративного слоя.
*/
        .consultation-list-page .card > * {
            position: relative;
            z-index: 1;
        }

        /*
   Hover-эффект.
*/
        .consultation-list-page .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 46px rgba(0, 0, 0, 0.20), 0 10px 20px rgba(121, 168, 255, 0.08) !important;
        }

        .consultation-list-page .card:hover,
        html[data-theme="light"] .consultation-list-page .card:hover {
            box-shadow: 0 24px 46px rgba(18, 32, 58, 0.12), 0 10px 20px rgba(93, 143, 255, 0.08) !important;
        }


    /* =========================================================
   25.4. ОБЛОЖКА КОНСУЛЬТАЦИИ
   ========================================================= */

    /*
   Реальная обложка img.
   В view высота задана inline-style, поэтому переопределяем через !important.
*/
    .consultation-list-page .card-img-top {
        width: 100%;
        height: 240px !important;
        min-height: 240px;
        object-fit: cover !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        border-bottom: 1px solid var(--color-border-soft);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.10), rgba(121, 168, 255, 0.04));
    }

    /*
   Заглушка без изображения.
   В HTML это обычный div с inline-style.
*/
    .consultation-list-page .card > .bg-light {
        height: 240px !important;
        min-height: 240px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        border-bottom: 1px solid var(--color-border-soft);
        color: var(--color-text-faint);
        background: linear-gradient(135deg, rgba(121, 168, 255, 0.10), rgba(121, 168, 255, 0.04)) !important;
        font-size: 54px !important;
    }

    .consultation-list-page .card > .bg-light,
    html[data-theme="light"] .consultation-list-page .card > .bg-light {
        background: linear-gradient(135deg, rgba(93, 143, 255, 0.08), rgba(93, 143, 255, 0.03)) !important;
    }


    /* =========================================================
   25.5. ТЕЛО КАРТОЧКИ
   ========================================================= */

    .consultation-list-page .card-body {
        padding: 20px !important;
    }

        /*
   Название консультации.
*/
        .consultation-list-page .card-body h4 {
            margin-bottom: 10px;
            font-size: 1.12rem;
            line-height: 1.32;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--color-text);
        }

        /*
   Описание.
*/
        .consultation-list-page .card-body p.small {
            margin-bottom: 0;
            color: var(--color-text-muted) !important;
            font-size: 0.93rem;
            line-height: 1.55;
        }

        /*
   Ограничиваем число строк описания для более ровной сетки.
*/
        .consultation-list-page .card-body p.flex-grow-1 {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }


    /* =========================================================
   25.6. СТАТУС КОНСУЛЬТАЦИИ И ВСПОМОГАТЕЛЬНЫЕ БЕЙДЖИ
   ========================================================= */

    /*
   Бейдж статуса консультации:
   "назначена", "завершена", и т.д.
*/
    .consultation-list-page .badge.bg-light {
        min-height: 34px;
        padding: 8px 12px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px !important;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--color-text) !important;
        background: var(--color-surface) !important;
        border: 1px solid var(--color-border-soft) !important;
        box-shadow: var(--shadow-xs);
    }

    /*
   Бейдж оплаты.
*/
    .consultation-list-page .badge.bg-success {
        min-height: 34px;
        padding: 8px 12px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px !important;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #ffffff;
        background: linear-gradient(135deg, rgba(38, 179, 107, 0.90), rgba(38, 179, 107, 0.74)) !important;
        border: 0;
        box-shadow: var(--shadow-xs);
    }


    /* =========================================================
   25.7. ДАТЫ, ЦЕНА И НИЖНЯЯ ИНФОРМАЦИЯ
   ========================================================= */

    /*
   Служебные строки с датой покупки и датой консультации.
*/
    .consultation-list-page .card-body .small.text-muted {
        color: var(--color-text-faint) !important;
        line-height: 1.5;
    }

    /*
   Блок "цена + статус оплаты".
*/
    .consultation-list-page .card-body .d-flex.justify-content-between.align-items-center.mt-3.mb-3 {
        gap: 12px;
        padding-top: 14px;
        margin-top: 14px !important;
        margin-bottom: 16px !important;
        border-top: 1px solid var(--color-border-soft);
    }

    /*
   Цена.
*/
    .consultation-list-page .fw-bold.fs-5 {
        font-family: var(--font-accent);
        font-size: 1.15rem !important;
        line-height: 1;
        letter-spacing: -0.02em;
        color: var(--color-text);
    }


    /* =========================================================
   25.8. КНОПКА "ОТКРЫТЬ"
   ========================================================= */

    /*
   В view используется bootstrap .btn.btn-primary.w-100.
   Переоформляем его в том же духе, что card-btn.
*/
    .consultation-list-page .btn.btn-primary {
        min-height: 48px;
        border: 0;
        border-radius: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        line-height: 1;
        color: #ffffff;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
        box-shadow: 0 14px 26px rgba(93, 143, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        transition: transform var(--transition-main), box-shadow var(--transition-main), filter var(--transition-main);
    }

        .consultation-list-page .btn.btn-primary:hover,
        .consultation-list-page .btn.btn-primary:focus {
            transform: translateY(-2px);
            filter: brightness(1.03);
            box-shadow: 0 18px 30px rgba(93, 143, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        }

        .consultation-list-page .btn.btn-primary:active {
            transform: translateY(0);
        }


/* =========================================================
   25.9. АДАПТИВ
   ========================================================= */

@media (max-width: 1199.98px) {
    .consultation-list-page .card-body {
        padding: 18px !important;
    }

        .consultation-list-page .card-body p.flex-grow-1 {
            -webkit-line-clamp: 3;
        }
}

@media (max-width: 767.98px) {
    .consultation-list-page h3 {
        font-size: 1.45rem;
    }

    .consultation-list-page .card {
        border-radius: 22px !important;
    }

        .consultation-list-page .card-img-top,
        .consultation-list-page .card > .bg-light {
            height: 210px !important;
            min-height: 210px !important;
            border-top-left-radius: 22px !important;
            border-top-right-radius: 22px !important;
        }

    .consultation-list-page .card-body {
        padding: 16px !important;
    }

        .consultation-list-page .card-body h4 {
            font-size: 1.02rem;
        }

        .consultation-list-page .card-body .d-flex.justify-content-between.align-items-center.mt-3.mb-3 {
            flex-wrap: wrap;
            align-items: stretch !important;
        }

    .consultation-list-page .btn.btn-primary {
        min-height: 46px;
        border-radius: 14px;
    }
}

@media (max-width: 479.98px) {
    .consultation-list-page .card-img-top,
    .consultation-list-page .card > .bg-light {
        height: 190px !important;
        min-height: 190px !important;
    }

    .consultation-list-page .card > .bg-light {
        font-size: 46px !important;
    }

    .consultation-list-page .card-body {
        padding: 14px !important;
    }

        .consultation-list-page .card-body p.small {
            font-size: 0.9rem;
        }

    .consultation-list-page .btn.btn-primary {
        min-height: 44px;
        border-radius: 13px;
    }
}

/* =========================================================
   26. MARATHON PAGE / МОИ МАРАФОНЫ
   ---------------------------------------------------------
   Добавить НИЖЕ всех предыдущих стилей.
   Важно:
   - не переопределяем .marathon-list целиком, чтобы не сломать
     другие view, где этот класс уже используется
   - стили строятся вокруг .marathon-card и связанных блоков
   ========================================================= */


/* =========================================================
   26.1. ПУСТОЕ СОСТОЯНИЕ
   ========================================================= */

/*
   Если у пользователя пока нет марафонов,
   показываем мягкую стеклянную заглушку в стиле кабинета.
*/
.marathon-empty {
    padding: 22px 24px;
    border-radius: 22px;
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(121, 168, 255, 0.18), rgba(121, 168, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(121, 168, 255, 0.16), var(--shadow-xs);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.marathon-empty,
html[data-theme="light"] .marathon-empty {
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.16), rgba(93, 143, 255, 0.08));
    box-shadow: inset 0 0 0 1px rgba(93, 143, 255, 0.16), var(--shadow-xs);
}


/* =========================================================
   26.2. КАРТОЧКА МАРАФОНА
   ---------------------------------------------------------
   Основной элемент списка.
   На десктопе строим карточку как сетку:
   название / прогресс / статус / действие
   ========================================================= */

.marathon-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) minmax(220px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 24px;
    background: var(--glass-bg);
    border: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition: transform var(--transition-main), box-shadow var(--transition-main), background var(--transition-main), border-color var(--transition-main);
}

    /*
   Световой блик поверх карточки.
*/
    .marathon-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 36%), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 58%);
        pointer-events: none;
    }

    .marathon-card::before,
    html[data-theme="light"] .marathon-card::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 58%);
    }

    /*
   Контент выше декоративного слоя.
*/
    .marathon-card > * {
        position: relative;
        z-index: 1;
    }

    /*
   Расстояние между карточками в списке.
*/
    .marathon-card + .marathon-card {
        margin-top: 16px;
    }

    /*
   Hover-эффект на десктопе.
*/
    .marathon-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 46px rgba(0, 0, 0, 0.20), 0 10px 20px rgba(121, 168, 255, 0.08);
    }

    .marathon-card:hover,
    html[data-theme="light"] .marathon-card:hover {
        box-shadow: 0 24px 46px rgba(18, 32, 58, 0.12), 0 10px 20px rgba(93, 143, 255, 0.08);
    }


/* =========================================================
   26.3. ЛЕВАЯ ЧАСТЬ: НАЗВАНИЕ И МЕТА
   ========================================================= */

.marathon-card__main {
    min-width: 0;
}

/*
   Название марафона.
*/
.marathon-card__title {
    margin: 0 0 8px;
    font-size: 1.12rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/*
   Подпись с тарифом.
*/
.marathon-card__meta {
    color: var(--color-text-muted);
    font-size: 0.94rem;
    line-height: 1.45;
}


/* =========================================================
   26.4. ПРОГРЕСС
   ========================================================= */

.marathon-card__progress {
    min-width: 0;
}

/*
   Контейнер полосы прогресса.
*/
.marathon-progress-bar {
    position: relative;
    width: 100%;
    height: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px var(--color-border-soft);
}

.marathon-progress-bar,
html[data-theme="light"] .marathon-progress-bar {
    background: rgba(22, 32, 51, 0.05);
}

/*
   Заполненная часть полосы.
   Ширина приходит inline-style из Razor.
*/
.marathon-progress-bar__fill {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
    box-shadow: 0 0 14px rgba(93, 143, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/*
   Информация под полосой:
   слева шаги, справа процент.
*/
.marathon-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

    .marathon-progress-info strong {
        font-family: var(--font-accent);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-text);
        letter-spacing: -0.02em;
    }


/* =========================================================
   26.5. СТАТУС
   ========================================================= */

.marathon-card__status {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*
   Базовый стиль бейджа статуса.
*/
.marathon-badge {
    min-height: 36px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

/*
   Активный марафон.
*/
.marathon-badge--active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(93, 143, 255, 0.92), rgba(93, 143, 255, 0.76));
}

/*
   Завершённый марафон.
*/
.marathon-badge--completed {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(38, 179, 107, 0.92), rgba(38, 179, 107, 0.76));
}


/* =========================================================
   26.6. КНОПКА ДЕЙСТВИЯ
   ========================================================= */

.marathon-card__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    /*
   Используем уже существующий стиль .card-btn,
   только локально делаем кнопку компактнее для списка.
*/
    .marathon-card__action .card-btn {
        min-height: 42px;
        padding: 10px 16px;
        border-radius: 14px;
        white-space: nowrap;
    }

        .marathon-card__action .card-btn img {
            width: 16px;
            height: 16px;
            object-fit: contain;
        }


/* =========================================================
   26.7. ПЛАНШЕТЫ / СРЕДНИЕ ЭКРАНЫ
   ---------------------------------------------------------
   Здесь карточка перестраивается в более удобный формат:
   2 строки, чтобы ничего не "скукоживалось".
   ========================================================= */

@media (max-width: 1199.98px) {
    .marathon-card {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main status"
            "progress action";
        align-items: start;
        gap: 16px 18px;
        padding: 20px 20px;
        border-radius: 22px;
    }

    .marathon-card__main {
        grid-area: main;
    }

    .marathon-card__progress {
        grid-area: progress;
    }

    .marathon-card__status {
        grid-area: status;
        justify-content: flex-end;
    }

    .marathon-card__action {
        grid-area: action;
        justify-content: flex-end;
        align-self: end;
    }
}


/* =========================================================
   26.8. МОБИЛЬНЫЕ УСТРОЙСТВА
   ---------------------------------------------------------
   На телефонах карточка становится полностью вертикальной.
   ========================================================= */

@media (max-width: 767.98px) {
    .marathon-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "progress"
            "status"
            "action";
        gap: 14px;
        padding: 18px 16px;
        border-radius: 20px;
    }

    .marathon-card__status {
        justify-content: flex-start;
    }

    .marathon-card__action {
        justify-content: stretch;
    }

        .marathon-card__action .card-btn {
            width: 100%;
            justify-content: center;
        }

    .marathon-card__title {
        font-size: 1.04rem;
    }

    .marathon-card__meta {
        font-size: 0.9rem;
    }

    .marathon-progress-info {
        font-size: 0.84rem;
    }

    .marathon-badge {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 0.75rem;
    }
}


/* =========================================================
   26.9. ОЧЕНЬ УЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 479.98px) {
    .marathon-card {
        padding: 16px 14px;
        border-radius: 18px;
    }

    .marathon-card__action .card-btn {
        min-height: 40px;
        border-radius: 13px;
    }

    .marathon-progress-bar {
        height: 10px;
    }
}

/* =========================================================
   27.1. SIDEBAR BRAND С КАРТИНКОЙ
   ========================================================= */

.sidebar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px 18px;
    margin-bottom: 18px;
    text-decoration: none;
    transition: transform var(--transition-main), background-color var(--transition-main), box-shadow var(--transition-main);
}

    .sidebar-brand:active {
        transform: translateY(0);
    }

    .sidebar-brand:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(121, 168, 255, 0.18), var(--shadow-xs);
    }

.sidebar-brand__image {
    display: block;
    height: 52px;
    width: auto;
    object-fit: contain;
}

/* =========================================================
   30. iPhone / Safari THEME FIX
   ---------------------------------------------------------
   Чистый финальный блок без конфликта с мобильным sidebar.
   ========================================================= */


/* =========================================================
   30.1. ДУБЛИРУЕМ СВЕТЛУЮ ТЕМУ ДЛЯ BODY
   ========================================================= */

:root,
html[data-theme="light"],
body,
body[data-theme="light"] {
    --color-bg: #f4f7fb;
    --color-bg-soft: #eaf0f8;
    --color-bg-deep: #dde7f4;
    --color-surface: rgba(255, 255, 255, 0.72);
    --color-surface-2: rgba(255, 255, 255, 0.84);
    --color-surface-strong: rgba(255, 255, 255, 0.94);
    --color-border: rgba(18, 32, 58, 0.10);
    --color-border-soft: rgba(18, 32, 58, 0.06);
    --color-text: #162033;
    --color-text-muted: rgba(22, 32, 51, 0.70);
    --color-text-faint: rgba(22, 32, 51, 0.50);
    --color-primary: #5d8fff;
    --color-primary-strong: #457cf5;
    --color-primary-soft: rgba(93, 143, 255, 0.14);
    --color-success: #26b36b;
    --color-warning: #d9941d;
    --color-danger: #df5b5b;
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-2: rgba(255, 255, 255, 0.48);
    --glass-border: 1px solid rgba(18, 32, 58, 0.08);
    --glass-blur: blur(18px);
    --shadow-xs: 0 4px 12px rgba(18, 32, 58, 0.06);
    --shadow-sm: 0 8px 18px rgba(18, 32, 58, 0.08);
    --shadow-md: 0 12px 30px rgba(18, 32, 58, 0.10);
    --shadow-lg: 0 24px 60px rgba(18, 32, 58, 0.14);
}


/* =========================================================
   30.2. СТАБИЛЬНЫЙ ФОН СТРАНИЦЫ
   ========================================================= */

body {
    background: radial-gradient(circle at top left, rgba(121, 168, 255, 0.14), transparent 28%), radial-gradient(circle at top right, rgba(131, 230, 179, 0.10), transparent 26%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}

    body,
    html[data-theme="light"] body,
    body[data-theme="light"] {
        background: radial-gradient(circle at top left, rgba(93, 143, 255, 0.18), transparent 26%), radial-gradient(circle at top right, rgba(38, 179, 107, 0.08), transparent 24%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
    }


/* =========================================================
   30.3. ПЕРЕОПРЕДЕЛЯЕМ .background
   ========================================================= */

.background {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 60%);
}

    .background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(120, 0, 255, 0.15) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 200, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 80%, rgba(255, 0, 200, 0.10) 0%, transparent 50%);
    }

.background,
html[data-theme="light"] .background,
body .background,
body[data-theme="light"] .background {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 58%);
}

    .background::before,
    html[data-theme="light"] .background::before,
    body .background::before,
    body[data-theme="light"] .background::before {
        background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(93, 143, 255, 0.10) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(38, 179, 107, 0.08) 0%, transparent 50%), radial-gradient(ellipse 50% 30% at 50% 80%, rgba(145, 126, 255, 0.07) 0%, transparent 50%);
    }


/* =========================================================
   30.4. СВЕТЛАЯ ТЕМА ДЛЯ КЛЮЧЕВЫХ БЛОКОВ
   ========================================================= */

.sidebar,
html[data-theme="light"] .sidebar,
body .sidebar,
body[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, 0.66);
    border-right: 1px solid rgba(18, 32, 58, 0.08);
}

.navbar,
html[data-theme="light"] .navbar,
body .navbar,
body[data-theme="light"] .navbar {
    background: rgba(244, 247, 251, 0.72);
}

.glass-card::before,
html[data-theme="light"] .glass-card::before,
body .glass-card::before,
body[data-theme="light"] .glass-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 32%), linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 55%);
}

.settings-panel::before,
html[data-theme="light"] .settings-panel::before,
body .settings-panel::before,
body[data-theme="light"] .settings-panel::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.20), transparent 56%);
}

.course-card::before,
html[data-theme="light"] .course-card::before,
body .course-card::before,
body[data-theme="light"] .course-card::before,
.consultation-list-page .card::before,
html[data-theme="light"] .consultation-list-page .card::before,
body .consultation-list-page .card::before,
body[data-theme="light"] .consultation-list-page .card::before,
.marathon-card::before,
html[data-theme="light"] .marathon-card::before,
body .marathon-card::before,
body[data-theme="light"] .marathon-card::before,
.marathon-list::before,
html[data-theme="light"] .marathon-list::before,
body .marathon-list::before,
body[data-theme="light"] .marathon-list::before,
.login-card::before,
html[data-theme="light"] .login-card::before,
body .login-card::before,
body[data-theme="light"] .login-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 58%);
}


/* =========================================================
   30.5. ОРБЫ В СВЕТЛОЙ ТЕМЕ
   ========================================================= */

.orb,
html[data-theme="light"] .orb,
body .orb,
body[data-theme="light"] .orb {
    opacity: 0.55;
}

.orb-1,
html[data-theme="light"] .orb-1,
body .orb-1,
body[data-theme="light"] .orb-1 {
    background: radial-gradient(circle, rgba(93, 143, 255, 0.26) 0%, rgba(93, 143, 255, 0) 72%);
}

.orb-2,
html[data-theme="light"] .orb-2,
body .orb-2,
body[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(38, 179, 107, 0.16) 0%, rgba(38, 179, 107, 0) 72%);
}

.orb-3,
html[data-theme="light"] .orb-3,
body .orb-3,
body[data-theme="light"] .orb-3 {
    background: radial-gradient(circle, rgba(145, 126, 255, 0.14) 0%, rgba(145, 126, 255, 0) 72%);
}


/* =========================================================
   30.6. SAFARI / IPHONE REPAINT STABILIZATION
   ---------------------------------------------------------
   ВАЖНО: sidebar исключён, чтобы не ломать мобильное меню.
   ========================================================= */

.background,
.background::before,
.orb,
.navbar,
.glass-card,
.settings-panel,
.marathon-card,
.course-card,
.consultation-list-page .card,
.marathon-list,
.login-card,
.stat-tile,
.avatar-preview-wrap,
.avatar-editor,
.login-provider-block,
.settings-note,
.theme-toggle-float,
.mobile-menu-toggle {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: background, box-shadow, border-color, opacity, transform;
}


/* =========================================================
   30.7. ДОПОЛНИТЕЛЬНЫЙ FIX ДЛЯ REPAINT-КЛАССА
   ---------------------------------------------------------
   ВАЖНО: sidebar исключён, чтобы не ломать мобильное меню.
   ========================================================= */

body.theme-repaint .background,
body.theme-repaint .background::before,
body.theme-repaint .orb,
body.theme-repaint .navbar,
body.theme-repaint .glass-card,
body.theme-repaint .settings-panel,
body.theme-repaint .marathon-card,
body.theme-repaint .course-card,
body.theme-repaint .consultation-list-page .card,
body.theme-repaint .marathon-list,
body.theme-repaint .login-card,
body.theme-repaint .stat-tile {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/* =========================================================
   30.8. MOBILE SIDEBAR FIX AFTER SAFARI REPAINT
   ========================================================= */

@media (max-width: 991.98px) {
    .sidebar {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

        .sidebar.open {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
}

/* =========================================================
   32. MOBILE NAVBAR BRAND
   ========================================================= */

.mobile-navbar-brand {
    display: none;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    text-decoration: none;
    min-width: 0;
}

.mobile-navbar-brand__image {
    display: block;
    height: 42px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .mobile-navbar-brand {
        display: inline-flex !important;
    }

    .sidebar-brand {
        display: none !important;
    }

    .navbar {
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

        .navbar .page-header {
            display: none !important;
        }

    .navbar-right {
        margin-left: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 479.98px) {
    .mobile-navbar-brand__image {
        height: 45px;
        max-width: 170px;
    }
}

/* =========================================================
   33. BRAND LINK — АККУРАТНЫЙ HOVER БЕЗ РАМКИ
   ========================================================= */

.sidebar-brand,
.mobile-navbar-brand {
    text-decoration: none !important;
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

    .sidebar-brand img,
    .mobile-navbar-brand img,
    .sidebar-brand__image,
    .mobile-navbar-brand__image {
        display: block;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease;
    }

    /* Убираем любые дефолтные состояния ссылки */
    .sidebar-brand:hover,
    .sidebar-brand:active,
    .sidebar-brand:focus,
    .sidebar-brand:focus-visible,
    .mobile-navbar-brand:hover,
    .mobile-navbar-brand:active,
    .mobile-navbar-brand:focus,
    .mobile-navbar-brand:focus-visible {
        text-decoration: none !important;
        outline: none !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

        /* Мягкий красивый hover только для картинки */
        .sidebar-brand:hover img,
        .sidebar-brand:hover .sidebar-brand__image,
        .mobile-navbar-brand:hover img,
        .mobile-navbar-brand:hover .mobile-navbar-brand__image {
            transform: scale(1.02);
            opacity: 0.96;
            filter: brightness(1.02);
        }

        /* На нажатии чуть возвращаем назад */
        .sidebar-brand:active img,
        .sidebar-brand:active .sidebar-brand__image,
        .mobile-navbar-brand:active img,
        .mobile-navbar-brand:active .mobile-navbar-brand__image {
            transform: scale(0.995);
        }

        /* Если браузер всё равно рисует focus у ссылки */
        .sidebar-brand:focus:not(:focus-visible),
        .mobile-navbar-brand:focus:not(:focus-visible) {
            outline: none !important;
            box-shadow: none !important;
        }


/* =========================================================
   BREADCRUMBS — корректный перенос по левому краю
   ========================================================= */

.breadcrumbs-row {
    display: flex;
    align-items: flex-start; /* важно: верхнее выравнивание */
    gap: 10px;
}

    .breadcrumbs-row nav {
        flex: 1 1 auto;
        min-width: 0; /* важно для переноса длинного текста */
    }

.breadcrumb {
    display: flex;
    flex-wrap: wrap; /* разрешаем перенос */
    align-items: center;
    justify-content: flex-start;
    gap: 6px 0;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    white-space: normal; /* даём переноситься */
}

    .breadcrumb-item + .breadcrumb-item::before {
        float: none; /* убираем bootstrap-float */
        display: inline-block;
        padding-right: 0.5rem;
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        white-space: normal;
        word-break: break-word;
    }

/* =========================================================
   BREADCRUMBS — корректный перенос по левому краю
   ========================================================= */

.breadcrumbs-row {
    display: flex;
    align-items: flex-start; /* важно: верхнее выравнивание */
    gap: 10px;
}

    .breadcrumbs-row nav {
        flex: 1 1 auto;
        min-width: 0; /* важно для переноса длинного текста */
    }

.breadcrumb {
    display: flex;
    flex-wrap: wrap; /* разрешаем перенос */
    align-items: center;
    justify-content: flex-start;
    gap: 6px 0;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    white-space: normal; /* даём переноситься */
}

    .breadcrumb-item + .breadcrumb-item::before {
        float: none; /* убираем bootstrap-float */
        display: inline-block;
        padding-right: 0.5rem;
    }

    .breadcrumb-item a,
    .breadcrumb-item.active {
        white-space: normal;
        word-break: break-word;
    }