/* ============================================================================
   Mozgi.kz — мобильная версия
   Источник: Figma «Mozgi.kz (Copy)», handoff-фрейм 3042-18.
   Контрольные ширины 390 и 430 px, между ними всё тянется.
   Верхняя граница слоя — 1023 px: планшет в портрете (820) не помещал десктопную
   сетку и ездил вбок, поэтому он тоже получает адаптивную раскладку.
   Правило файла: ни одно объявление не выходит за пределы медиазапросов ниже,
   поэтому десктоп остаётся ровно таким, каким был.
   ============================================================================ */

:root {
    --m-brand: #0C91CD;
    --m-brand-deep: #7B5CD6;
    --m-navy: #12304F;
    --m-text: #161B22;
    --m-muted: #6E7681;
    --m-error: #EF3B46;
    --m-surface: #FFFFFF;
    --m-ground: #F2F7FC;
    --m-hairline: #DCE6F1;
    --m-brand-soft: #EAF5FD;

    --m-radius-sm: 16px;
    --m-radius: 20px;
    --m-radius-lg: 22px;

    --m-step: 8px;
    --m-gutter: 20px;          /* поля при 390; на 430 переопределяются ниже */
    --m-touch: 44px;           /* минимальная зона касания */

    --m-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --m-shadow: 0 2px 10px rgba(18, 48, 79, .07);
    --m-shadow-lg: 0 12px 34px rgba(18, 48, 79, .16);
}

/* Шапка и меню существуют только на мобильных — на десктопе они скрыты всегда. */
.m-header,
.m-drawer,
.m-drawer-overlay,
.m-only {
    display: none;
}

/* Вход и регистрация раньше были страницами без вёрстки вообще. Эти правила
   действуют на новых классах, поэтому существующий десктоп они не затрагивают. */
.m-auth {
    padding: 48px 0 64px;
}

.m-auth__card {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow);
    padding: 28px;
}

.m-auth__lead {
    color: var(--m-muted);
    margin-bottom: 20px;
}

.m-auth__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m-auth .m-field__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--m-muted);
    margin-bottom: 6px;
}

.m-auth .form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-radius-sm);
    font-family: var(--m-font);
    font-size: 15px;
}

.m-auth__alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: 1px solid var(--m-brand);
    border-radius: 999px;
    color: var(--m-brand);
    font-weight: 600;
    text-decoration: none;
}

.m-auth .m-field-error {
    color: var(--m-error);
    font-size: 13px;
}

/* Состояния (пусто / загрузка / ошибка) — новые классы, поэтому работают и на десктопе. */
.m-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 36px 24px;
    background: #fff;
    border: 1px solid var(--m-hairline);
    border-radius: var(--m-radius);
    margin-bottom: 16px;
}

.m-state__title {
    font-size: 18px;
    font-weight: 600;
}

.m-state__text {
    color: var(--m-muted);
    max-width: 46ch;
}

.m-state .m-btn--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--m-brand);
    border-radius: 999px;
    color: var(--m-brand);
    background: #fff;
    font-weight: 600;
    text-decoration: none;
}

.m-state--error {
    border-color: rgba(239, 59, 70, .4);
}

.m-state--error .m-state__title {
    color: var(--m-error);
}

.m-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--m-brand-soft);
    border-top-color: var(--m-brand);
    animation: m-spin .9s linear infinite;
}

@keyframes m-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1023px) {

    /* ---------- База ---------- */

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;              /* страница не ездит вбок */
    }

    body {
        font-family: var(--m-font);
        font-size: 14px;                 /* Body · Inter Regular · 14 */
        line-height: 1.5;
        color: var(--m-text);
        background: var(--m-ground);
    }

    body.m-drawer-open {
        overflow: hidden;                /* фон не прокручивается под меню */
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        max-width: 100%;
        height: auto;
    }

    /* Контентная колонка 350 px: поля 20 при 390 и 40 при 430. */
    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
        margin-left: 0;
        margin-right: 0;
    }

    /* Вложенный контейнер не добавляет вторые поля: иначе на 430 колонка сжимается
       с 350 до 257 px. */
    .container .container,
    .container .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .row {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    [class*='col-'] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* Классы старого Bootstrap 3: на телефоне они должны прятать, а не растягивать. */
    .hidden-xs {
        display: none !important;
    }

    .m-only {
        display: block;
    }

    /* ---------- Типографика ---------- */

    h1,
    .screen-title h1 {
        font-size: 28px;                 /* H1 · Inter Bold · 28 */
        line-height: 1.18;
        font-weight: 700;
        letter-spacing: -.02em;
        margin: 0 0 12px;
        overflow-wrap: anywhere;         /* длинные заголовки не рвут вёрстку */
    }

    h2 {
        font-size: 23px;                 /* H2 · Inter Bold · 23 */
        line-height: 1.25;
        font-weight: 700;
        margin: 0 0 10px;
        overflow-wrap: anywhere;
    }

    h3,
    h4 {
        font-size: 17px;
        line-height: 1.3;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    p,
    li,
    td,
    th,
    label {
        font-size: 14px;
        overflow-wrap: anywhere;
    }

    small,
    .caption {
        font-size: 12px;                 /* Caption · Inter Regular · 12 */
        color: var(--m-muted);
    }

    .m-eyebrow {
        font-size: 12px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--m-brand);
        margin-bottom: 6px;
    }

    /* ---------- Шапка ---------- */

    .m-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px var(--m-gutter);
        background: var(--m-surface);
        border-bottom: 1px solid var(--m-hairline);
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .m-header__logo img {
        height: 34px;
        width: auto;
        display: block;
    }

    .m-burger {
        width: var(--m-touch);
        height: var(--m-touch);
        min-width: var(--m-touch);
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--m-hairline);
        border-radius: 12px;
        background: var(--m-surface);
        padding: 0;
        cursor: pointer;
    }

    .m-burger span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: var(--m-text);
    }

    /* Десктопная шапка на телефоне не нужна: её место занимает .m-header. */
    header.default,
    header.app {
        display: none;
    }

    /* ---------- Выезжающее меню ---------- */

    .m-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(11, 24, 39, .55);   /* затемнение 55% */
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
        z-index: 1300;
    }

    .m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;                            /* drawer выезжает справа */
        bottom: 0;
        width: min(86%, 340px);
        background: var(--m-surface);
        box-shadow: var(--m-shadow-lg);
        transform: translateX(100%);
        transition: transform .24s ease;
        z-index: 1310;
        padding: 16px 20px 24px;
        overflow-y: auto;
    }

    body.m-drawer-open .m-drawer-overlay {
        opacity: 1;
        visibility: visible;
    }

    body.m-drawer-open .m-drawer {
        transform: translateX(0);
    }

    .m-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .m-drawer__head img {
        height: 32px;
        width: auto;
    }

    .m-drawer__close {
        width: var(--m-touch);
        height: var(--m-touch);
        min-width: var(--m-touch);
        border: none;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        color: var(--m-text);
        cursor: pointer;
    }

    .m-drawer__role {
        font-size: 12px;
        color: var(--m-muted);
        margin-bottom: 10px;
    }

    .m-drawer__nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .m-drawer__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: var(--m-touch);
        padding: 11px 14px;
        border-radius: var(--m-radius-sm);
        color: var(--m-text);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
    }

    .m-drawer__link::after {
        content: '›';
        color: var(--m-muted);
        font-size: 18px;
    }

    .m-drawer__link.is-active {
        background: var(--m-brand-soft);
        color: var(--m-brand);
    }

    .m-drawer__divider {
        height: 1px;
        background: var(--m-hairline);
        margin: 14px 0;
    }

    .m-drawer__langs {
        display: flex;
        gap: 10px;
        font-size: 13px;
        color: var(--m-muted);
    }

    .m-drawer__langs a {
        color: var(--m-muted);
        text-decoration: none;
    }

    .m-drawer__footer {
        margin-top: auto;
        padding-top: 20px;
    }

    /* ---------- Кнопки ---------- */

    .btn,
    button,
    input[type='submit'],
    .m-btn {
        min-height: var(--m-touch);
        font-family: var(--m-font);
        font-size: 15px;
        border-radius: 999px;
        padding: 12px 20px;
    }

    .btn-theme,
    .m-btn--primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: linear-gradient(90deg, var(--m-brand) 0%, var(--m-brand-deep) 100%);
        color: #fff;
        border: none;
        font-weight: 600;
    }

    .m-btn--secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: var(--m-surface);
        color: var(--m-brand);
        border: 1px solid var(--m-brand);
        font-weight: 600;
    }

    .m-btn--navy {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: var(--m-navy);
        color: #fff;
        border: none;
        font-weight: 600;
    }

    .m-btn--danger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: var(--m-surface);
        color: var(--m-error);
        border: 1px solid var(--m-error);
        font-weight: 600;
    }

    .m-btn-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* ---------- Поля ввода и переключатели ---------- */

    input[type='text'],
    input[type='email'],
    input[type='password'],
    input[type='number'],
    input[type='search'],
    input[type='tel'],
    select,
    textarea,
    .form-control {
        width: 100%;
        max-width: 100%;
        min-height: var(--m-touch);
        font-family: var(--m-font);
        font-size: 15px;                 /* меньше 16 iOS зумит форму при фокусе */
        padding: 11px 14px;
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius-sm);
        background: var(--m-surface);
        color: var(--m-text);
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus {
        outline: none;
        border-color: var(--m-brand);
        box-shadow: 0 0 0 3px rgba(12, 145, 205, .15);
    }

    .is-invalid,
    .form-control.is-invalid,
    input.error {
        border-color: var(--m-error);
        color: var(--m-error);
    }

    .m-field-error {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--m-error);
    }

    .ui-toggle,
    .switch {
        min-width: 52px;
        min-height: 30px;
    }

    /* ---------- Карточки и таблицы ---------- */

    .m-card,
    .window,
    .bot-card,
    .user-card,
    .test-card {
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius);
        box-shadow: var(--m-shadow);
        padding: 16px;
        margin-bottom: 12px;
        width: 100%;
    }

    .m-card__title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .m-card__text {
        color: var(--m-muted);
    }

    /* Широкая таблица превращается в стопку карточек: заголовок строки — из data-label. */
    .m-table-cards table,
    table.m-as-cards {
        display: block;
        width: 100%;
    }

    .m-table-cards thead,
    table.m-as-cards thead {
        display: none;
    }

    .m-table-cards tbody,
    .m-table-cards tr,
    .m-table-cards td,
    table.m-as-cards tbody,
    table.m-as-cards tr,
    table.m-as-cards td {
        display: block;
        width: 100%;
    }

    .m-table-cards tr,
    table.m-as-cards tr {
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius);
        box-shadow: var(--m-shadow);
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .m-table-cards td,
    table.m-as-cards td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: none;
        padding: 6px 0;
        text-align: left;
    }

    .m-table-cards td::before,
    table.m-as-cards td::before {
        content: attr(data-label);
        color: var(--m-muted);
        font-size: 12px;
        flex: 0 0 42%;
    }

    /* Всё, что шире экрана и не переводится в карточки, скроллится внутри себя. */
    .m-scroll-x,
    pre,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Единственная разрешённая горизонтальная прокрутка — карусель предметов урока.
       В существующей вёрстке это ряд .row.scroller на странице уроков. */
    .row.scroller {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-left: calc(var(--m-gutter) * -1);
        margin-right: calc(var(--m-gutter) * -1);
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
    }

    .row.scroller > [class*='col-'] {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
    }

    /* Единственное исключение: пустое состояние занимает всю ширину, не карточку карусели. */
    .row.scroller > [class*='col-']:only-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .m-carousel {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-left: calc(var(--m-gutter) * -1);
        margin-right: calc(var(--m-gutter) * -1);
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
    }

    .m-carousel > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* ---------- Модальные окна ---------- */

    .modal-backdrop,
    .m-modal-overlay {
        background: rgba(11, 24, 39, .55);
        opacity: 1;
    }

    .modal-dialog,
    .m-modal {
        width: 350px;                    /* колонка 350 на 390 */
        max-width: calc(100% - var(--m-gutter) * 2);
        margin: 24px auto;               /* на 430 центрируется полями по 40 */
    }

    .modal-content,
    .m-modal__body {
        border-radius: var(--m-radius);
        border: none;
        padding: 4px;
    }

    /* ---------- Состояния ---------- */

    .m-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 32px 20px;
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius);
        margin-bottom: 12px;
    }

    .m-state__title {
        font-size: 17px;
        font-weight: 600;
    }

    .m-state__text {
        color: var(--m-muted);
    }

    .m-state--error {
        border-color: rgba(239, 59, 70, .4);
    }

    .m-state--error .m-state__title {
        color: var(--m-error);
    }

    .m-spinner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 3px solid var(--m-brand-soft);
        border-top-color: var(--m-brand);
        animation: m-spin .9s linear infinite;
    }

    @keyframes m-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ---------- Лендинг ---------- */

    /* На десктопе заголовки набраны капсом и очень крупно. На 390 такой заголовок
       рвётся по слогам — в макете он обычным регистром, 28 и 23 px. */
    .visual-box h1,
    #about h3,
    #about h3 strong,
    #how h3,
    #edge h3,
    .about-title,
    .edge-title,
    .how-box h3 {
        text-transform: none;
    }

    .visual-box h1 {
        font-size: 28px;
        line-height: 1.15;
        margin-bottom: 12px;
    }

    #about h3,
    #how h3,
    #edge h3,
    .about-title,
    .edge-title {
        font-size: 23px;
        line-height: 1.25;
    }

    .visual-box {
        padding: 28px 0 32px;
    }

    .visual-box .text,
    .visual-box .textd {
        font-size: 16px;
        line-height: 1.4;
    }

    /* Первая кнопка — заливка, вторая контурная, как в макете. */
    .visual-ctrl .btn + .btn,
    .visual-box .btn + .btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .8);
        color: #fff;
    }

    .visual-ctrl {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Пункты «что умеет платформа» — карточками, а не сплошным списком. */
    .about-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius-sm);
        padding: 14px;
        margin-bottom: 10px;
    }

    .about-item .icon,
    .about-item img {
        width: 20px;
        flex: 0 0 20px;
    }

    .edge-item {
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius-sm);
        padding: 16px;
        margin-bottom: 10px;
    }

    .edge-icon img {
        width: 40px;
        height: auto;
    }

    .how-box,
    .how-carousel {
        max-width: 100%;
    }

    .how-c-item img {
        border-radius: var(--m-radius-sm);
    }

    /* ---------- Вход и регистрация ---------- */

    .m-auth__card {
        background: var(--m-surface);
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius);
        box-shadow: var(--m-shadow);
        padding: 20px 16px 22px;
    }

    .m-auth__lead {
        color: var(--m-muted);
        margin-bottom: 18px;
    }

    .m-auth__form {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .m-field__label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--m-muted);
        margin-bottom: 6px;
    }

    .m-auth__alt {
        margin-top: 12px;
    }

    /* ---------- Разделы существующей вёрстки ---------- */

    #screen {
        padding: 20px 0 32px;
    }

    .screen-title {
        margin-bottom: 16px;
    }

    /* Боковое меню кабинета: на телефоне его роль выполняет drawer.
       !important — потому что в responsive.css оно тоже помечено важным. */
    .side-menu,
    .bot-menu {
        display: none !important;
    }

    /* Заголовки экранов в макете обычным регистром: капсом «МОИ КУРСЫ. STUDYROOM BOT»
       занимает три строки и режется. */
    .screen-title h1,
    .window-title,
    .section-title h3 {
        text-transform: none;
    }

    .screen-title h1 {
        font-size: 23px;
        line-height: 1.25;
    }

    /* Внутренние «таблицы» свёрстаны дивами .t-row/.t-col — на телефоне это карточки. */
    body .table,
    body .user-table {
        display: block;
        width: 100%;
    }

    body .t-row {
        /* Десктоп раскладывает строку шестью колонками grid — на телефоне это столбик. */
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        /* Десктопные строки полупрозрачные — на белой карточке это выглядит грязно. */
        background: var(--m-surface) !important;
        border: 1px solid var(--m-hairline);
        border-radius: var(--m-radius);
        box-shadow: var(--m-shadow);
        padding: 14px;
        margin-bottom: 12px;
        width: 100%;
    }

    /* Шапка таблицы на телефоне бессмысленна: подписи переезжают в сами карточки.
       !important — десктопное правило задаёт .t-row display: grid. */
    body .t-row--head,
    body .user-row--head,
    body .t-row.head {
        display: none !important;
    }

    /* Названия курсов и уроков не обрезаем многоточием — на узком экране это съедает смысл. */
    body .t-col,
    body .t-col * {
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        overflow-wrap: anywhere;
        max-width: 100%;
    }

    body .t-col {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 4px 0;
        text-align: left;
        border: none;
    }

    body .t-col[data-label]::before {
        content: attr(data-label) !important;
        flex: 0 0 44%;
        color: var(--m-muted);
        font-size: 12px;
    }

    body .t-col.center {
        justify-content: flex-start;
    }

    /* Длинное значение рядом с подписью не помещается в строку — тогда подпись сверху.
       Так же ведут себя первые ячейки-заголовки в подкурсах и уроках. */
    body .t-col[data-label='Описание'],
    body .t-col[data-label='Модуль'],
    body .t-col[data-label='Урок'],
    body .t-col[data-label='Название курса'],
    body .t-col[data-label='Название'] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    body .t-col[data-label='Описание']::before,
    body .t-col[data-label='Модуль']::before,
    body .t-col[data-label='Урок']::before,
    body .t-col[data-label='Название курса']::before,
    body .t-col[data-label='Название']::before {
        flex: none;
    }

    /* Заголовок строки с кнопками действий остаётся строкой: разворачивать её в столбик
       незачем, иначе стрелка, карандаш и плюс разъезжаются по вертикали. */
    body .t-col.strong {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    body .t-col.strong::before {
        flex: 1 1 100%;
    }

    /* Счётчик символов у описания выводится абсолютом поверх текста. */
    body .t-col .counter,
    body .t-col [class*='counter'] {
        position: static;
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: var(--m-muted);
    }

    /* Скрытые ячейки (например вторая валюта) остаются скрытыми. */
    body .t-col[hidden],
    body [hidden] {
        display: none !important;
    }

    /* Чат с учеником: поле ввода на всю ширину, кнопка под ним. На десктопе они в строку,
       и на 390 поле сжималось до кружка. */
    .chat-layout,
    .chat-window {
        width: 100%;
        min-width: 0;
    }

    .chat-reply {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }

    .chat-reply input,
    .chat-reply textarea {
        flex: 1 1 100%;
        width: 100%;
        min-height: var(--m-touch);
        border-radius: var(--m-radius-sm);
    }

    .chat-reply .btn,
    .chat-reply button {
        flex: 1 1 100%;
        width: 100%;
    }

    .chat-messages,
    .chat-body {
        max-height: 55vh;
        overflow-y: auto;
    }

    /* Карточка бота на «Моих ботах»: заголовок обычным регистром, действия — в ряд
       с нормальной зоной касания, основная кнопка во всю ширину. */
    .bot-card .title,
    .bot-item .title {
        text-transform: none;
        font-size: 18px;
        line-height: 1.25;
    }

    .bot-card .id,
    .bot-item .id {
        color: var(--m-muted);
        font-size: 13px;
    }

    .bot-card-actions,
    .bot-item .ctrl {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .bot-card-actions .ctrl-item:first-child,
    .bot-enter-btn {
        flex: 1 1 auto;
    }

    .bot-enter-btn {
        width: 100%;
    }

    .bot-card-actions .ctrl-item a {
        min-width: var(--m-touch);
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Блок привязки Telegram в кабинете: на десктопе он одной строкой, на 390 ник
       наезжал на подпись, а тумблер вылезал за край карточки. */
    .screen-tg-toggler {
        width: 100%;
        margin-bottom: 16px;
        border-radius: var(--m-radius);
        overflow: hidden;
    }

    .screen-tgt {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 12px;
        padding: 12px 14px;
        width: 100%;
    }

    .screen-tgt-name {
        flex: 1 1 100%;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .screen-tgt-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
    }

    .screen-tgt-toggle i {
        font-size: 12px;
        color: var(--m-muted);
        font-style: normal;
    }

    /* Карточка ученика: на десктопе заголовок — одна широкая «таблетка» с ID, статусом
       и контактами в строку. На 390 такая строка уезжает за экран, поэтому раскладываем
       её в столбик и делаем фон карточки обычным. */
    .user-card {
        padding: 0;
        overflow: hidden;
    }

    .user-card__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-height: var(--m-touch);
        padding: 14px;
        border-radius: 0;
        background: var(--m-surface) !important;
        color: var(--m-text) !important;
        text-align: left;
    }

    .user-card__title {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 14px;
        color: var(--m-text) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Разделители «|» между полями в столбик не нужны. */
    .user-card__title > span {
        display: none;
    }

    .user-card__header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .user-card__body {
        padding: 0 14px 14px;
    }

    .user-card__arrow {
        width: 24px;
        height: 24px;
    }

    /* Форма привязки веб-аккаунта помещается в столбик. */
    .student-web-link-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 0 4px;
    }

    .student-web-link__save {
        width: 100%;
        min-height: var(--m-touch);
        border-radius: 999px;
        border: 1px solid var(--m-brand);
        background: var(--m-surface);
        color: var(--m-brand);
        font-weight: 600;
    }

    .student-web-link__hint {
        font-size: 12px;
        color: var(--m-muted);
    }

    /* Шапка блока: на градиенте серый текст не читается, а переключатель валют
       и подписи колонок на телефоне не нужны — их роль берут подписи в карточках. */
    .window-header,
    .table-head-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        border-radius: var(--m-radius) var(--m-radius) 0 0;
    }

    .window-header *,
    .window-header a,
    .window-header span {
        color: #fff;
    }

    .window-header .currency-switch a,
    .currency-switch a {
        color: rgba(255, 255, 255, .75);
        min-width: 32px;
        text-align: center;
    }

    .window-header .currency-switch a.active,
    .currency-switch a.active {
        color: #fff;
        font-weight: 600;
    }

    /* Мелкие иконки-действия дотягиваем до зоны касания. */
    .course-row-edit-link,
    .course-row-add-link,
    .row-expander,
    .box-add-btn,
    .courses-header-link,
    .icon-button {
        min-width: var(--m-touch);
        min-height: var(--m-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sort-search {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sort-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .search-pill {
        width: 100%;
        min-height: var(--m-touch);
    }

    footer,
    .footer {
        padding: 24px var(--m-gutter);
        text-align: center;
    }

    footer .row > div,
    .footer .row > div {
        margin-bottom: 14px;
    }
}

/* 430 px и шире (но всё ещё телефон): поля 40, колонка те же 350. */
@media (min-width: 430px) and (max-width: 1023px) {
    :root {
        --m-gutter: 40px;
    }
}

/* Планшет в портрете: колонка шире телефонной, карточки встают по две в ряд,
   но раскладка остаётся адаптивной — десктопная сетка сюда не помещается. */
@media (min-width: 769px) and (max-width: 1023px) {

    .container,
    .container-fluid {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .bots-list,
    .m-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .bot-card {
        margin-bottom: 0;
    }

    .m-btn--primary,
    .m-btn--secondary,
    .m-btn--navy,
    .btn-theme {
        width: auto;
        min-width: 220px;
    }

    .m-auth__card {
        max-width: 520px;
    }

    /* Ряд карточек курса на планшете помещается без карусели. */
    .row.scroller > [class*='col-'] {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

/* Планшет в ландшафте (1024–1199): десктопная карусель на лендинге рассчитана на
   ширину от 1200 и вылезала на 17 px за экран. Больше 1200 правило не действует. */
@media (min-width: 1024px) and (max-width: 1199px) {

    .how-carousel,
    .how-box {
        max-width: 100%;
        overflow: hidden;
    }

    .how-c-item img {
        max-width: 100%;
        height: auto;
    }
}

/* Мышь на планшете/телефоне бывает редко — ховеры не должны залипать. */
@media (max-width: 1023px) and (hover: none) {

    .btn:hover,
    .m-drawer__link:hover {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .m-drawer,
    .m-drawer-overlay {
        transition: none;
    }

    .m-spinner {
        animation: none;
    }
}