/* Стили «как на платформе» (локалхост-монолит). Блоки рынка и профиля-хаба
   перенесены из new_design/stylesheet.css монолита (там они были обёрнуты
   в .skyid-scope - тут префикс снят, потому что это и есть SkyID). */
.ph-kpi { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ph-kpi:last-child { border-bottom: none; }

.ph-road { display: flex; flex-direction: column; }
.ph-step { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
.ph-step:last-child { padding-bottom: 0; }
.ph-step::before {
    content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px;
    width: 2px; background: var(--border);
}
.ph-step:last-child::before { display: none; }
.ph-step__dot {
    width: 32px; height: 32px; border-radius: 50%; flex: none; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    background: var(--surface); border: 2px solid var(--border); color: var(--text-muted);
}
.ph-step.is-done .ph-step__dot { background: var(--success); border-color: var(--success); color: #fff; }
.ph-step.is-current .ph-step__dot { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.ph-step__body { flex: 1; padding-top: 4px; }
.ph-step__body p { margin: 3px 0 4px; }

.ph-achv-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ph-achv {
    aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; background: var(--brand-soft); border: 1px solid var(--brand-border); cursor: default;
}
.ph-achv.is-locked { background: var(--bg); border-color: var(--border); filter: grayscale(1); opacity: .45; }

.ph-bars { display: flex; gap: 4px; align-items: flex-end; height: 72px; }
.ph-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; background: transparent; }
.ph-bar__fill { width: 100%; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .85; }

.ph-crit { display: grid; grid-template-columns: 150px 1fr 74px; gap: 10px; align-items: center; padding: 5px 0; }
.ph-crit .progress { width: auto; }
.ph-crit .xs.b { text-align: right; }

.ph-scale {
    position: relative; height: 14px; border-radius: 999px;
    background: linear-gradient(90deg, #F04438, #F79009, #12B76A);
}
.ph-scale--tension { background: linear-gradient(90deg, #12B76A, #F79009, #F04438); }
.ph-scale__marker {
    position: absolute; top: -9px; transform: translateX(-50%);
    font-size: 18px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* profile_hub: точки легенды и сводный бар динамики состояния */
.ph-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.ph-ratio { height: 10px; border-radius: 999px; background: #FCA5A5; overflow: hidden; }
.ph-ratio > div { height: 100%; border-radius: 999px 0 0 999px; background: var(--success); }

/* profile_hub: эмоции в диалогах - hero + сгруппированные бары */
.ph-emo-hero {
    display: flex; gap: 14px; align-items: center;
    padding: 12px 16px; border-radius: 12px;
    background: var(--brand-soft); border: 1px solid var(--brand-border);
}
.ph-emo-hero__emoji { font-size: 34px; line-height: 1; }
.ph-emo-row { display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; padding: 7px 0; }
.ph-emo-row__emoji { display: inline-block; width: 22px; text-align: center; }
.ph-emo-row__bars { display: flex; flex-direction: column; gap: 3px; }
.ph-emo-bar { display: flex; align-items: center; gap: 8px; }
.ph-emo-bar__fill {
    height: 10px; border-radius: 0 4px 4px 0; min-width: 3px;
    transition: width .5s ease;
}
.ph-emo-bar .xs.b { min-width: 32px; color: var(--text-muted); }

/* profile_hub: строки тренировок, подсветка слабых */
.ph-train-row {
    display: flex; gap: 12px; align-items: center;
    padding: 11px 10px; margin: 0 -10px; border-radius: 10px;
    border-bottom: 1px solid var(--border);
}
.ph-train-row.is-weak {
    background: #FEF3F2; border: 1px solid #FECDCA; margin-bottom: 6px;
}

/* profile_hub: тултипы наград (за что получена / как получить) */
.ph-achv { position: relative; cursor: help; }
.ph-achv[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 220px; padding: 9px 11px; border-radius: 10px;
    background: #101828; color: #fff; font-size: 12px; line-height: 1.45;
    text-align: left; z-index: 30; white-space: normal;
    box-shadow: 0 8px 24px rgba(16,24,40,.18); filter: none;
}
.ph-achv[data-tip]:hover::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #101828; z-index: 30;
}
.ph-achv-grid .ph-achv:nth-child(7n+1)[data-tip]:hover::after { left: 0; transform: none; }
.ph-achv-grid .ph-achv:nth-child(7n)[data-tip]:hover::after { left: auto; right: 0; transform: none; }

/* profile_hub: пиксельные награды и монета SkyCoin */
.ph-award-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ph-award {
    position: relative; aspect-ratio: 1; border-radius: 6px; cursor: help;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #FFF7ED, #FDEAD7);
    border: 2px solid #E8C39A;
    box-shadow: inset 0 -3px 0 rgba(190, 125, 60, .25), inset 0 2px 0 rgba(255,255,255,.7);
    image-rendering: pixelated;
}
.ph-award.is-locked { background: #F2F4F7; border-color: #D0D5DD; box-shadow: inset 0 -3px 0 rgba(0,0,0,.06); }
.ph-award.is-locked .px-canvas { filter: grayscale(1); opacity: .45; }
.px-canvas { width: 38px; height: 38px; image-rendering: pixelated; }

.ph-award[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 230px; padding: 9px 11px; border-radius: 10px;
    background: #101828; color: #fff; font-size: 12px; line-height: 1.45;
    text-align: left; z-index: 40; white-space: normal;
    box-shadow: 0 8px 24px rgba(16,24,40,.18);
}

/* монета SkyCoin: пиксель-арт на box-shadow, сетка 12x12, пиксель 2px */
.skycoin {
    display: inline-block; width: 24px; height: 24px; position: relative; flex: none;
}
.skycoin::before {
    content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 2px;
    box-shadow:
        8px 2px 0 #8A5A0C, 10px 2px 0 #8A5A0C, 12px 2px 0 #8A5A0C, 14px 2px 0 #8A5A0C,
        6px 4px 0 #8A5A0C, 8px 4px 0 #F7B733, 10px 4px 0 #FFE08A, 12px 4px 0 #F7B733, 14px 4px 0 #F7B733, 16px 4px 0 #8A5A0C,
        4px 6px 0 #8A5A0C, 6px 6px 0 #F7B733, 8px 6px 0 #FFE08A, 10px 6px 0 #FFF6D8, 12px 6px 0 #FFE08A, 14px 6px 0 #F7B733, 16px 6px 0 #DE9B26, 18px 6px 0 #8A5A0C,
        4px 8px 0 #8A5A0C, 6px 8px 0 #F7B733, 8px 8px 0 #FFF6D8, 10px 8px 0 #F7B733, 12px 8px 0 #F7B733, 14px 8px 0 #F7B733, 16px 8px 0 #DE9B26, 18px 8px 0 #8A5A0C,
        4px 10px 0 #8A5A0C, 6px 10px 0 #F7B733, 8px 10px 0 #FFE08A, 10px 10px 0 #F7B733, 12px 10px 0 #DE9B26, 14px 10px 0 #F7B733, 16px 10px 0 #DE9B26, 18px 10px 0 #8A5A0C,
        4px 12px 0 #8A5A0C, 6px 12px 0 #F7B733, 8px 12px 0 #FFE08A, 10px 12px 0 #F7B733, 12px 12px 0 #F7B733, 14px 12px 0 #DE9B26, 16px 12px 0 #DE9B26, 18px 12px 0 #8A5A0C,
        4px 14px 0 #8A5A0C, 6px 14px 0 #F7B733, 8px 14px 0 #F7B733, 10px 14px 0 #F7B733, 12px 14px 0 #DE9B26, 14px 14px 0 #DE9B26, 16px 14px 0 #DE9B26, 18px 14px 0 #8A5A0C,
        6px 16px 0 #8A5A0C, 8px 16px 0 #F7B733, 10px 16px 0 #DE9B26, 12px 16px 0 #DE9B26, 14px 16px 0 #DE9B26, 16px 16px 0 #8A5A0C,
        8px 18px 0 #8A5A0C, 10px 18px 0 #8A5A0C, 12px 18px 0 #8A5A0C, 14px 18px 0 #8A5A0C;
}
.skycoin--xs { transform: scale(.7); transform-origin: center; margin: -3px; }

/* плитки в окне всех наград */
.ph-award-grid--modal { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 12px; }
.ph-award-tile {
    position: relative; text-align: center; padding: 12px 8px 10px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.ph-award-tile .ph-award { width: 58px; margin: 0 auto 6px; aspect-ratio: 1; }
.ph-award-tile .px-canvas { width: 44px; height: 44px; }
.ph-award-tile__name { line-height: 1.25; min-height: 30px; }
.ph-award-tile.is-locked { opacity: .82; }
.ph-award-tile[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    width: 220px; padding: 9px 11px; border-radius: 10px;
    background: #101828; color: #fff; font-size: 12px; line-height: 1.45;
    text-align: left; z-index: 60; white-space: normal;
    box-shadow: 0 8px 24px rgba(16,24,40,.18);
}

/* profile_hub: контраст наград - полученные ярче, задачи приглушённые */
.ph-award-tile.is-locked .px-canvas { filter: grayscale(.85) brightness(1.04); opacity: .5; }
.ph-award-tile.is-locked .ph-award { background: #F2F4F7; border-color: #D8DCE3; box-shadow: inset 0 -3px 0 rgba(0,0,0,.05); }
.ph-award-tile:not(.is-locked) .px-canvas { filter: saturate(1.3) contrast(1.05); }
.ph-award-tile:not(.is-locked) .ph-award {
    border-color: #E3A93F;
    background: linear-gradient(180deg, #FFF9EC, #FCEBC8);
    box-shadow: inset 0 -3px 0 rgba(190, 135, 30, .3), inset 0 2px 0 rgba(255,255,255,.85), 0 0 0 1px rgba(227,169,63,.25);
}
.ph-award-tile:not(.is-locked) { border-color: #EAD3A2; background: #FFFDF7; }
.market-balance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 16px;
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
    gap: 26px 14px;
}

.market-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.market-item__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #F2F4F7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.market-item__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.market-item:hover .market-item__photo img { transform: scale(1.05); }
.market-item__emoji { font-size: 64px; }

/* сердечко избранного */
.market-item__like {
    position: absolute;
    top: 8px; right: 8px;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #667085;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(16,24,40,.15);
    transition: color .15s ease, transform .15s ease;
    z-index: 2;
}
.market-item__like:hover { transform: scale(1.1); color: #E01A76; }
.market-item__like.is-on { color: #E01A76; }
.market-item__like.is-on svg path { fill: currentColor; }

/* бейджи на фото */
.market-item__badges {
    position: absolute;
    left: 8px; bottom: 8px;
    display: flex; gap: 4px;
    z-index: 2;
}
.mbadge {
    font-size: 11px; font-weight: 700;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 7px;
    color: #FFFFFF;
}
.mbadge--disc { background: rgba(16,24,40,.82); }
.mbadge--sale { background: #7A3FF2; }
.mbadge--hit  { background: #F7681C; }

/* шторка с описанием при наведении */
.market-item__hover {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 34px 12px 12px;
    background: linear-gradient(180deg, rgba(16,24,40,0) 0%, rgba(16,24,40,.8) 50%);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 1;
}
.market-item:hover .market-item__hover { transform: none; opacity: 1; }
.market-item__hover p {
    color: #FFFFFF;
    font-size: 12px; line-height: 16px;
    margin: 0;
}

.market-item__info { padding: 8px 2px 0; flex: 1; }

.market-item__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.market-item__price-new {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 18px; font-weight: 800;
    color: #101828;
}
.market-item__price-old {
    font-size: 13px;
    color: #98A2B3;
}

.market-item__name {
    font-size: 13px; line-height: 17px;
    color: #475467;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.market-item__brand { font-weight: 700; color: #101828; }

.market-item__meta {
    display: flex; align-items: center; gap: 4px;
    margin-top: 3px;
}
.market-item__stars { font-size: 12px; font-weight: 700; color: #C4600E; }

.market-item__left {
    margin-top: 4px;
    font-size: 12px; font-weight: 600;
    color: #F04438;
}
.market-item__left-bar {
    height: 3px; width: 38%;
    margin-top: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #F04438 55%, #FEE4E2 55%);
}

/* кнопка на всю ширину карточки */
.market-buy {
    margin-top: 8px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0;
    border-radius: 12px;
    padding: 10px 8px;
    background: #F7681C;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}
.market-buy:hover { background: #DE5A12; }

/* активная категория - фиолетовая (цвета кнопок и чипов поменяны местами) */
#market_cats .btn--primary {
    background: #7A3FF2 !important;
    border-color: #7A3FF2 !important;
    color: #FFFFFF !important;
}
.market-buy--off {
    background: #F2F4F7;
    color: #98A2B3;
    cursor: default;
}
.market-buy--off:hover { background: #F2F4F7; }

@media (max-width: 640px) {
    .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
    /* на тач-экране шторка с описанием не мешает - её просто нет */
    .market-item__hover { display: none; }
    .ph-grid--main,
    .ph-grid--half { grid-template-columns: 1fr !important; }
    .ph-grid--kpi  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* строка вкладок профиля прокручивается вместо переноса в три ряда */
    #ph_tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    #ph_tabs .btn { flex: none; }

    .ph-train-row { flex-wrap: wrap; gap: 10px; }
    .ph-award-grid--modal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    /* плитки метрик держим по две: в один столбец вкладка растягивается
       на несколько экранов прокрутки */
    .ph-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ph-grid--kpi .card { padding: 12px 8px; }
    .ph-grid--kpi .b { font-size: 19px !important; }
    .ph-award-grid--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Кнопка обложки показывается по наведению, а на сенсорных экранах наведения
   нет - там держим её видимой всегда. */
@media (hover: none) {
    .sky-course__cover-btn { opacity: 1; }
}

/* Окно выбора обложки на узком экране: во всю ширину с отступами */
@media (max-width: 420px) {
    .sky-cover-pop {
        width: calc(100vw - 24px);
        left: 12px !important;
    }
    .sky-cover-pop__tile { width: 62px; }
}

/* вкладки каталога прокручиваются, а не ломаются в столбик */
@media (max-width: 640px) {
    .catalog_switch.ui.menu {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .catalog_switch.ui.menu .item { white-space: nowrap; }
}

/* кнопки карточки курса на телефоне: компактнее, чтобы вставали в ряд */
@media (max-width: 480px) {
    .sky-course .sky-course__footer { gap: 6px; }
    .sky-course .sky-course__footer .ui.button {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Профиль на телефоне: шапка и сводка перестраиваются в столбец, иначе
   имя и показатели сжимаются в колонки из отдельных букв. */
@media (max-width: 640px) {
    .ph-head {
        flex-wrap: wrap;
        gap: 14px !important;
    }
    .ph-head > div:nth-child(2) { flex: 1 1 100%; }

    .ph-head__stats {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 12px !important;
    }
    .ph-head__stats > div { flex: 1 1 0; min-width: 0; }

    .ph-summary {
        flex-direction: column;
        align-items: center !important;
        gap: 14px !important;
    }
    .ph-summary > div { width: 100%; }
}

/* Диалог с агентом на телефоне: шапка в две строки, иначе название агента
   сжимается в узкую колонку между кнопками. */

/* ==========================================================================
   Локальные добивки под монолит: меню, заголовки, каталог.
   ========================================================================== */

/* Активный пункт меню - тёплая заливка, как .is-current на платформе */
.nav__item.is-active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    font-weight: 600;
}
.nav__item.is-active:hover { background: var(--nav-active-bg); }

/* Заголовки страниц как на платформе: 24px/700 */
.page__title { font-size: 24px; font-weight: 700; }

/* Карточка курса в каталоге: обложка повыше, имя плотнее (как _products_cards) */
.case__cover { height: 132px; }
.case__name { font-weight: 600; }

/* Панель тренировки: настроение и стадии в стиле боевого диалога */
.livepanel .mood { background: linear-gradient(90deg, #F04438 0%, #F7B733 50%, #12B76A 100%); }
.stagelist { display: flex; flex-direction: column; gap: 2px; }
.stagelist__item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 14px; color: var(--text-secondary);
}
.stagelist__item.is-current {
    background: var(--indigo-soft); color: var(--indigo); font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--indigo);
}
.stagelist__item.is-done { color: var(--success); }
.stagelist__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--border-strong);
}
.stagelist__item.is-current .stagelist__dot { background: var(--indigo); }
.stagelist__item.is-done .stagelist__dot { background: var(--success); }

/* История тренировок: карточки списком, как .page.progress на платформе */
.hist-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px 18px;
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.hist-card__score {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
    background: var(--brand-soft); color: var(--nav-active-text);
}
.hist-card__score.is-good { background: var(--success-soft); color: var(--success); }
.hist-card__score.is-bad  { background: var(--danger-soft); color: var(--danger); }
.hist-card__body { flex: 1; min-width: 0; }
.hist-card__name {
    font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   Узоры обложки курса.
   Рисуются градиентами и встроенными svg - никаких файлов. Слои полупрозрачные
   (белый и тёмный), поэтому один и тот же узор одинаково хорошо ложится на
   любой цвет палитры и не спорит с текстом карточки.
   ========================================================================== */
.sky-pattern { background-repeat: no-repeat; }

/* мягкие световые пятна */
.sky-pattern--aurora {
    background-image:
        radial-gradient(60% 80% at 15% 15%, rgba(255, 255, 255, 0.85), transparent 70%),
        radial-gradient(50% 70% at 85% 25%, rgba(16, 24, 40, 0.10), transparent 72%),
        radial-gradient(70% 90% at 60% 110%, rgba(255, 255, 255, 0.60), transparent 70%);
}

/* градиентная сетка из нескольких пятен */
.sky-pattern--mesh {
    background-image:
        radial-gradient(40% 60% at 10% 80%, rgba(16, 24, 40, 0.12), transparent 70%),
        radial-gradient(45% 55% at 80% 10%, rgba(255, 255, 255, 0.90), transparent 70%),
        radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, 0.45), transparent 75%);
}

/* крупные полупрозрачные круги */
.sky-pattern--bubbles {
    background-image:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.75) 0 42px, transparent 43px),
        radial-gradient(circle at 72% 18%, rgba(16, 24, 40, 0.07) 0 28px, transparent 29px),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.60) 0 34px, transparent 35px),
        radial-gradient(circle at 40% 92%, rgba(16, 24, 40, 0.06) 0 22px, transparent 23px);
}

/* концентрические дуги из угла */
.sky-pattern--arcs {
    background-image:
        radial-gradient(circle at 0% 100%, transparent 58px, rgba(255, 255, 255, 0.75) 59px 74px, transparent 75px),
        radial-gradient(circle at 0% 100%, transparent 96px, rgba(255, 255, 255, 0.55) 97px 112px, transparent 113px),
        radial-gradient(circle at 0% 100%, transparent 134px, rgba(16, 24, 40, 0.07) 135px 150px, transparent 151px);
}

/* геометрия баухауса: четверти кругов и круг */
.sky-pattern--bauhaus {
    background-image:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.80) 0 70px, transparent 71px),
        radial-gradient(circle at 22% 100%, rgba(16, 24, 40, 0.08) 0 52px, transparent 53px),
        linear-gradient(90deg, transparent 0 62%, rgba(255, 255, 255, 0.45) 62% 66%, transparent 66%);
}

/* контурные линии карты */
.sky-pattern--topography {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke='%23101828' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpath d='M-20 70c40-40 80-40 120 0s80 40 120 0'/%3E%3Cpath d='M-20 92c40-40 80-40 120 0s80 40 120 0'/%3E%3Cpath d='M-20 48c40-40 80-40 120 0s80 40 120 0'/%3E%3Cpath d='M-20 26c40-40 80-40 120 0s80 40 120 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 120px;
    background-repeat: repeat;
}

/* широкие мягкие ленты по диагонали */
.sky-pattern--ribbon {
    background-image: repeating-linear-gradient(115deg,
        rgba(255, 255, 255, 0.55) 0 26px,
        transparent 26px 64px,
        rgba(16, 24, 40, 0.05) 64px 84px,
        transparent 84px 120px);
}

/* растр: точки, тающие к краю */
.sky-pattern--halftone {
    background-image:
        radial-gradient(rgba(16, 24, 40, 0.16) 1.6px, transparent 1.7px),
        linear-gradient(160deg, rgba(255, 255, 255, 0.85), transparent 62%);
    background-size: 14px 14px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

/* тонкое зерно поверх цвета */
.sky-pattern--grain {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.24'/%3E%3C/svg%3E"),
        radial-gradient(70% 90% at 30% 10%, rgba(255, 255, 255, 0.70), transparent 70%);
    background-size: 120px 120px, 100% 100%;
    background-repeat: repeat, no-repeat;
}

/* крупные скруглённые блоки */
.sky-pattern--blocks {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.55'%3E%3Crect x='8' y='10' width='46' height='30' rx='12'/%3E%3Crect x='66' y='54' width='44' height='44' rx='16'/%3E%3C/g%3E%3Cg fill='%23101828' fill-opacity='0.07'%3E%3Crect x='14' y='60' width='34' height='34' rx='12'/%3E%3Crect x='72' y='12' width='30' height='24' rx='10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    background-repeat: repeat;
}

/* плавные широкие волны */
.sky-pattern--waves {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cpath d='M0 78c40-26 80-26 120 0s80 26 120 0v42H0z' fill='%23FFFFFF' fill-opacity='0.55'/%3E%3Cpath d='M0 96c40-26 80-26 120 0s80 26 120 0v24H0z' fill='%23101828' fill-opacity='0.06'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* лучи из угла */
.sky-pattern--rays {
    background-image: repeating-conic-gradient(from 210deg at 0% 100%,
        rgba(255, 255, 255, 0.55) 0deg 6deg, transparent 6deg 16deg);
}

/* Кнопки на плитке курса: «Тренироваться!» + «Статистика», как в подвале
   карточки на платформе. Grid, чтобы длинные подписи не вылезали за край. */
.case__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case__btns .btn {
    min-width: 0; padding-left: 8px; padding-right: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case__btns .btn:only-child { grid-column: 1 / -1; }

/* Плитки каталога одной высоты: карточка тянется на всю ячейку сетки,
   бейдж и кнопки прижаты к низу, описание не длиннее четырёх строк. */
.case-wrap { display: flex; }
.case-wrap .case { display: flex; flex-direction: column; width: 100%; height: 100%; }
.case .case__cover { flex: none; }
.case .case__body { display: flex; flex-direction: column; flex: 1; }
.case .case__desc {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.case .case__foot { margin-top: auto; padding-top: 10px; }