/* ==========================================================================
   STATIA Picks — мобильная оболочка (≤767px)
   Источник: STATIA_new_design «design_handoff_mobile_verifier» (пакет 31).

   Грузится ПОСЛЕ picks.css и переиспользует её токены (--p-bg, --p-violet,
   --p-font-mono и т.д.) — значения в макете и в picks.css совпадают, дублировать
   палитру не нужно.

   Десктопная шапка .p-header и подвал остаются как есть: по решению по объёму у
   stav своя мобильная оболочка, а не общая с основным сайтом.
   ========================================================================== */

/* Мобильные элементы скрыты на десктопе. */
.pm-header,
.pm-tabbar{ display: none; }
/* Блоки, существующие только в мобильном макете. */
.pm-only{ display: none; }
.pm-lbl{ display: none; }

@media (max-width: 767px) {

/* ---------- 1. Каркас ---------- */
/* Десктопные шапка и подвал на мобильном не участвуют. */
.p-header,
.p-footer{ display: none !important; }

body{ padding-bottom: 0; }

/* Скроллер контента: 108px снизу — под таб-бар (макет, App Shell). */
.p-wrap{
    padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 2. Шапка ---------- */
.pm-header{
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 14px;
    background: var(--p-bg);
    /* Шапка перекрывает декоративное свечение — без фона оно просвечивает. */
}
.pm-header__left{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pm-header__right{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pm-wordmark{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    font-family: var(--p-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .4px;
}
.pm-wordmark__brand{
    background: linear-gradient(120deg, var(--p-violet), var(--p-teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pm-wordmark__sub{
    font-weight: 600;
    color: var(--p-muted);
}
.pm-header__titles{ min-width: 0; }
.pm-header__title{
    font-family: var(--p-font-display);
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--p-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-header__sub{
    font-size: 11.5px;
    color: oklch(54% 0.01 260);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-iconbtn{
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid oklch(100% 0 0 / .09);
    background: oklch(100% 0 0 / .05);
    color: var(--p-body);
    text-decoration: none;
}
.pm-avatar{
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--p-violet), var(--p-teal));
    color: var(--p-on-accent);
    text-decoration: none;
}
.pm-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 3. Таб-бар с центральной кнопкой ---------- */
.pm-tabbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    padding: 9px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid oklch(100% 0 0 / .07);
    background: oklch(17% 0.015 260 / .93);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.pm-tab{
    flex: 1;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: oklch(50% 0.01 260);
    text-decoration: none;
}
.pm-tab svg{ width: 22px; height: 22px; }
.pm-tab span{ font-size: 10px; font-weight: 500; line-height: 1; }
.pm-tab--on{ color: var(--p-teal); }

/* Центральная кнопка публикации: приподнята над панелью, единственная тень
   в дизайне помимо тени bottom sheet. */
.pm-fab{
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: -18px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p-violet), var(--p-teal));
    box-shadow: 0 10px 26px #7C5CFC44;
    color: var(--p-on-accent);
    text-decoration: none;
}
.pm-fab svg{ width: 24px; height: 24px; }

/* ---------- 4. Общие правила контента ---------- */
/* Горизонтальный паддинг экрана из макета. */
.p-wrap > *{ padding-left: 0; padding-right: 0; }
.p-container,
.p-wrap .p-section{ padding-left: 18px; padding-right: 18px; }

/* Все числа — моношрифтом: опорное правило дизайна, держит колонки метрик. */
.p-num,
.p-odd,
.p-roi,
.p-money,
.p-mono{ font-family: var(--p-font-mono); }

/* Ленты чипов: горизонтальный скролл без полосы, чип ≥38px. */
.p-chips{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.p-chips::-webkit-scrollbar{ width: 0; height: 0; }
.p-chips > *{
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}


/* ---------- 5. Экраны «Ещё», «Итоги дня», «Каталог», «Сравнение» ----------
   Строки списков и карточки метрик по макету: тач-таргет 44px, числа
   моношрифтом, вложенные блоки на --p-card-faint. */

/* Экран «Ещё» */
.pm-menu__group{ margin-bottom: 22px; }
.pm-menu__label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--p-muted-3);
    margin-bottom: 9px;
}
.pm-menu__row{
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 16px;
    border: 1px solid var(--p-border-soft);
    background: var(--p-card-soft);
    text-decoration: none;
    color: var(--p-text);
}
.pm-menu__ico{
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: oklch(100% 0 0 / .05);
    color: var(--i, var(--p-violet));
}
.pm-menu__body{ flex: 1; min-width: 0; display: block; }
.pm-menu__title{ display: block; font-size: 14.5px; font-weight: 600; }
.pm-menu__desc{
    display: block;
    font-size: 11.5px;
    color: var(--p-muted-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-menu__chev{ flex-shrink: 0; color: var(--p-muted-3); }

/* Сводка «Итогов дня» */
.pm-summary{ padding: 14px; margin-bottom: 14px; }
.pm-summary__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.pm-summary__cell{
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--p-card-faint);
    text-align: center;
}
.pm-summary__val{ font-size: 18px; font-weight: 600; line-height: 1.1; }
.pm-summary__lbl{
    font-size: 9.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--p-muted-3);
    margin-top: 4px;
}
.pm-summary__note{ font-size: 11.5px; color: var(--p-muted-3); margin-top: 10px; }
.pm-pos{ color: var(--p-pos); }
.pm-neg{ color: var(--p-neg); }

/* Исход прогноза в «Итогах дня» */
.pm-result__badge{
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 7px;
}
.pm-result--win .pm-result__badge{ color: var(--p-pos); background: #22C55E1f; }
.pm-result--lose .pm-result__badge{ color: var(--p-neg); background: #F871711f; }

/* Строка каталога */
.pm-list{ display: flex; flex-direction: column; gap: 9px; }
.pm-row{
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--p-text);
}
.pm-row__rank{ width: 20px; font-size: 12px; color: var(--p-muted-3); flex-shrink: 0; }
.pm-row__ava{
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #7C5CFC55, #2DD4BF55);
    display: block;
}
.pm-row__ava img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-row__body{ flex: 1; min-width: 0; display: block; }
.pm-row__title{
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-row__sub{
    display: block;
    font-size: 11.5px;
    color: var(--p-muted-2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-row__meta{ display: flex; align-items: baseline; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.pm-row__metalbl{ font-size: 10px; color: var(--p-muted-3); }
.pm-row__dim{ color: var(--p-body); font-size: 12px; }
.pm-row__chev{ flex-shrink: 0; color: var(--p-muted-3); }

/* Сравнение авторов */
.pm-compare{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-compare__card{ padding: 14px; }
.pm-compare__head{ display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pm-compare__name{
    font-size: 13.5px;
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-compare__metrics{ display: flex; flex-direction: column; gap: 10px; }
.pm-compare__metric{
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--p-card-faint);
}
.pm-compare__val{ display: block; font-size: 17px; font-weight: 600; line-height: 1.1; }
.pm-compare__lbl{ display: block; font-size: 10px; color: var(--p-muted-3); margin-top: 3px; }
.pm-compare__link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid var(--p-border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p-body);
    text-decoration: none;
}
.pm-compare__hint{ margin-top: 12px; }
.p-empty{ padding: 18px; text-align: center; color: var(--p-muted-2); font-size: 13px; }


/* ---------- 6. Карточка матча (макет: «Матчи дня») ---------- */
.pm-only{ display: block; }
.pm-hide{ display: none !important; }

.pm-mlist{ display: flex; flex-direction: column; gap: 14px; }
.pm-mlist__more{
    display: block;
    padding: 13px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--p-violet);
    border: 1px solid var(--p-border);
    border-radius: 14px;
}

.pm-mc{
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--p-border);
    border-radius: 18px;
    background: oklch(20% 0.02 262 / .5);
    color: inherit;
}
.pm-mc__top{ display: flex; align-items: center; gap: 10px; }
.pm-mc__league{
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: oklch(54% 0.01 260);
    /* Лига приходит как «Страна · Турнир» и в одну строку на 390px не влезает. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-mc__time{ flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: oklch(74% 0.01 260); }
.pm-mc__live{
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--p-warn);
    background: #FFC53D14;
    border: 1px solid #FFC53D44;
}

.pm-mc__mid{ display: flex; align-items: center; gap: 12px; }
.pm-mc__teams{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-mc__team{
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-mc__team--away{ color: var(--p-body); }

.pm-mc__odds{ flex-shrink: 0; display: flex; gap: 5px; }
.pm-odd{
    width: 50px;
    padding: 7px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid oklch(100% 0 0 / .07);
    border-radius: 10px;
    background: oklch(100% 0 0 / .035);
}
.pm-odd i{ font-style: normal; font-size: 9.5px; font-weight: 700; color: oklch(50% 0.01 260); }
.pm-odd b{ font-size: 13px; font-weight: 500; }

.pm-mc__foot{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--p-border-soft);
}
.pm-mc__pick{
    flex-shrink: 0;
    max-width: 45%;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-mc__bar{
    flex: 1;
    min-width: 0;
    height: 5px;
    border-radius: 999px;
    background: oklch(100% 0 0 / .07);
    overflow: hidden;
}
.pm-mc__fill{ display: block; height: 100%; border-radius: 999px; }
.pm-mc__cnt{ flex-shrink: 0; font-size: 11.5px; color: var(--p-muted-3); }

/* Тон консенсуса задаётся бэкендом (pos/warn/neg) — тот же словарь, что в таблице. */
.pm-tone--pos{ color: var(--p-pos); }
.pm-tone--warn{ color: var(--p-warn); }
.pm-tone--neg{ color: var(--p-neg); }
.pm-fill--pos{ background: var(--p-pos); }
.pm-fill--warn{ background: var(--p-warn); }
.pm-fill--neg{ background: var(--p-neg); }


/* ---------- 7. Экран «Сегодня» (макет, экран 1) ---------- */
.pm-home{ display: flex; flex-direction: column; gap: 24px; }

.pm-hero{
    padding: 18px 19px;
    border: 1px solid #2DD4BF33;
    border-radius: 20px;
    background: linear-gradient(150deg, #2DD4BF14, oklch(20% 0.02 262 / .5));
}
.pm-hero__live{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--p-teal);
}
.pm-hero__dot{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--p-teal);
    animation: pm-pulse 2s ease-in-out infinite;
}
@keyframes pm-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.pm-hero__title{
    margin: 10px 0 15px;
    font-family: var(--p-font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.7px;
}
.pm-hero__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pm-hero__cell{
    padding: 12px 11px;
    border: 1px solid oklch(100% 0 0 / .07);
    border-radius: 14px;
    background: oklch(100% 0 0 / .04);
}
.pm-hero__val{ font-size: 17px; font-weight: 500; line-height: 1.1; }
.pm-hero__lbl{
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: oklch(52% 0.01 260);
}
.pm-teal{ color: var(--p-teal); }
.pm-violet{ color: var(--p-violet); }
.pm-warn{ color: var(--p-warn); }

.pm-tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pm-tile{
    min-height: 78px;
    padding: 14px 13px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid var(--p-border);
    border-radius: 15px;
    background: var(--p-card-soft);
    color: inherit;
}
.pm-tile__lbl{ font-size: 12px; font-weight: 600; line-height: 1.25; }

.pm-sec{ display: flex; flex-direction: column; gap: 13px; }
.pm-sec__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pm-sec__title{ margin: 0; font-family: var(--p-font-display); font-size: 19px; font-weight: 600; }
.pm-sec__link{ flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--p-violet); }
/* Лента дней уезжает под края экрана — так видно, что она прокручивается. */
.pm-sec__chips{ margin: 0 -18px; padding: 0 18px 2px; }

.pm-arow{
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: var(--p-card-soft);
    color: inherit;
}
.pm-arow__ava{
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: oklch(100% 0 0 / .06);
}
.pm-arow__ava img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-arow__body{ flex: 1; min-width: 0; display: block; }
.pm-arow__name{
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-arow__form{ margin-top: 6px; }
.pm-arow__fig{ flex-shrink: 0; display: block; text-align: right; }
.pm-arow__roi{ display: block; font-size: 16px; font-weight: 600; }
.pm-arow__cap{
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: oklch(52% 0.01 260);
}

.pm-cta{
    display: block;
    padding: 20px 19px;
    border: 1px solid #7C5CFC33;
    border-radius: 20px;
    background: linear-gradient(140deg, #7C5CFC1a, oklch(20% 0.02 262 / .5));
    color: inherit;
}
.pm-cta__title{ display: block; font-family: var(--p-font-display); font-size: 18px; font-weight: 600; }
.pm-cta__text{ display: block; margin: 8px 0 15px; font-size: 13px; line-height: 1.55; color: oklch(70% 0.01 260); }
.pm-cta__btn{
    display: inline-block;
    padding: 12px 20px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--p-on-accent);
    background: linear-gradient(120deg, #7C5CFC, #7C5CFCbb);
}


/* ---------- 8. Экран «Матч» (макет, экран 3) ---------- */
/* Порядок блоков в макете другой, чем в двухколоночном десктопе: сначала матч,
   потом консенсус и вердикт модели, и только затем список прогнозов. Колонки
   растворяем через display:contents и раскладываем карточки по order. */
.p-cols{ display: flex; flex-direction: column; gap: 18px; }
/* Флекс-элементы не сжимаются ниже своего содержимого (min-width:auto), и широкая
   карточка растягивала колонку за край экрана — содержимое обрезалось справа. */
.p-cols > *,
.p-cols__main > *,
.p-cols__side > *{ min-width: 0; max-width: 100%; }
.p-table__row > *{ min-width: 0; overflow-wrap: anywhere; }
/* flex-basis колонок (620/320px) в колоночном флексе задаёт ВЫСОТУ: колонка
   вырастала до 620px и оставляла пустоту под коротким содержимым. */
.p-cols__main,
.p-cols__side{ flex: 0 0 auto; min-width: 0; position: static; gap: 18px; }
.p-screen--match .p-cols__main,
.p-screen--match .p-cols__side{ display: contents; }
.p-screen--match .p-card--consensus{ order: 1; }
.p-screen--match .p-card--teal{ order: 2; }
.p-screen--match .p-publish-card{ order: 3; }
.p-screen--match .p-card--picks{ order: 4; }
.p-screen--match .p-card--h2h{ order: 5; }

/* Шапка матча: команды в столбик, гербы и подписи «дома/в гостях» не помещаются
   и в макете их нет. */
.p-match-hero{ padding: 18px; border-radius: 20px; }
.p-match-hero__top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-match-hero__league{
    flex: 1;
    min-width: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: oklch(54% 0.01 260);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-match-hero__teams{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 14px;
    text-align: left;
}
.p-match-hero__side{ display: block; width: 100%; }
.p-match-hero .p-crest,
.p-match-hero__meta,
.p-match-hero__vs--empty{ display: none; }
.p-match-hero__name{
    font-family: var(--p-font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.4px;
    text-align: left;
}
.p-match-hero__side:last-of-type .p-match-hero__name{ color: oklch(82% 0.01 260); }
.p-match-hero__side--home{ justify-content: flex-start; text-align: left; }
.p-match-hero__side--home .p-match-hero__id{ align-items: flex-start; }
.p-match-hero__id{ width: 100%; }
.p-match-hero__vs{ margin: 6px 0; }

.p-line-plate{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
    margin-top: 14px;
}
.p-line-plate > span{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid oklch(100% 0 0 / .07);
    border-radius: 10px;
    background: oklch(100% 0 0 / .035);
}
.p-line-plate__label{ font-size: 10px; font-weight: 700; color: oklch(50% 0.01 260); }
.p-line-plate__value{ font-size: 16px; font-weight: 500; }

/* Сводка под шапкой — одна строка мелким кеглем, а не три колонки с линейками. */
.p-match-hero__summary{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--p-border-soft);
}
.p-summary-rule{ display: none; }
.p-summary-figure{ display: flex; align-items: baseline; gap: 5px; }
.p-summary-figure__value{ font-size: 14px; font-weight: 600; }
.p-summary-figure__label,
.p-summary-note{ font-size: 11.5px; color: var(--p-muted-3); margin: 0; }

/* Прогнозы на матч: таблица из четырёх колонок → карточки макета. */
.p-card--picks{ padding: 0; border: 0; background: none; }
.p-picks__head{ padding: 0 0 12px; }
.p-picks__row{
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 10px;
    border: 1px solid var(--p-border);
    border-radius: 14px;
    background: var(--p-card-soft);
}
/* Свой прогноз пользователя и прогноз модели подсвечены в макете. */
.p-picks__row--model{ border-color: #2DD4BF4d; background: #2DD4BF10; }
.p-picks__row--head{ display: none; }
.p-pick-author{ grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-pick-author__body{ flex: 1; min-width: 0; }
.p-pick-author__name{ font-size: 13.5px; font-weight: 600; }
.p-pick-author__meta{ display: block; font-size: 11px; color: oklch(52% 0.01 260); }
.p-picks__row > .p-pick-bet{
    grid-column: 1;
    justify-self: start;
    padding: 6px 11px;
    border: 1px solid oklch(100% 0 0 / .09);
    border-radius: 9px;
    background: oklch(100% 0 0 / .05);
    font-size: 12.5px;
    font-weight: 700;
}
.p-picks__row > .p-pick-odds{ grid-column: 2; font-size: 12.5px; }
.p-picks__row > .p-table__num:last-child{ grid-column: 3; }
/* Вторая строка карточки отделена от автора — как в макете. */
.p-pick-author{ padding-bottom: 11px; border-bottom: 1px solid var(--p-border-soft); }


/* ---------- 9. Экран «Рейтинг» (макет, экран 5) ---------- */
/* Восемь колонок таблицы в 390px не помещаются — строка становится карточкой:
   ранг, автор и ROI сверху, форма и остальные метрики ниже. */
.p-card--table{ padding: 0; border: 0; background: none; overflow: visible; }
/* Таблица держит min-width под десктопные колонки — на мобильном её нет. */
.p-card--table .p-table{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-table__head{ display: none; }
.p-table__row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 13px 15px;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: var(--p-card-soft);
}
.p-table__row--model{ border-color: #2DD4BF4d; background: #2DD4BF10; }
.p-table__row--you{ border-color: #7C5CFC4d; background: #7C5CFC12; }
.p-table--rating .p-table__row > .p-rank{ order: 1; flex: 0 0 20px; font-size: 13px; font-weight: 600; text-align: center; }
.p-table--rating .p-table__row > .p-participant{ order: 2; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px; }
.p-participant__avatar{ width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; object-fit: cover; }
.p-participant__body{ min-width: 0; }
.p-participant__name{ font-size: 14px; font-weight: 600; }
.p-participant__scope{
    display: block;
    font-size: 11px;
    color: oklch(50% 0.01 260);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ROI — пятая ячейка строки: главная цифра карточки, поэтому наверх и крупно. */
.p-table--rating .p-table__row > :nth-child(5){ order: 3; flex: 0 0 auto; font-size: 15.5px; font-weight: 600; }
.p-table--rating .p-table__row > .p-form-strip{ order: 4; flex: 1 0 100%; padding-top: 11px; border-top: 1px solid var(--p-border-soft); }
.p-table--rating .p-table__row > :nth-child(3){ order: 5; }
.p-table--rating .p-table__row > :nth-child(4){ order: 6; }
.p-table--rating .p-table__row > :nth-child(6){ order: 7; }
.p-table--rating .p-table__row > :nth-child(7){ order: 8; }
.p-table--rating .p-table__row > :nth-child(3),
.p-table--rating .p-table__row > :nth-child(4),
.p-table--rating .p-table__row > :nth-child(6),
.p-table--rating .p-table__row > :nth-child(7){
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    text-align: left;
}
.pm-lbl{
    display: block;
    font-family: var(--p-font-ui);
    font-style: normal;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: oklch(50% 0.01 260);
}
.p-form-strip--table{ display: flex; gap: 3px; }
.p-form-strip__bar{ flex: 1; height: 5px; border-radius: 3px; }


/* ---------- 10. Профиль автора (макет, экран 6) ---------- */
/* Метрики в макете стоят в шапке — на мобильном поднимаем карточку «Итоги»
   к автору, а справочные блоки уводим вниз. */
.p-screen--tipster .p-cols__main,
.p-screen--tipster .p-cols__side{ display: contents; }
.p-screen--tipster .p-card--totals{ order: 1; }
.p-screen--tipster .p-card--curve{ order: 2; }
.p-screen--tipster .p-metric-cards{ order: 3; display: flex; flex-direction: column; gap: 18px; }
.p-screen--tipster .p-card--strength{ order: 4; }
.p-screen--tipster .p-card--table{ order: 5; }
.p-screen--tipster .p-card--records{ order: 6; }
.p-screen--tipster .p-card--rules{ order: 7; }

.p-tipster-head{ gap: 13px; }
.p-tipster-head__avatar{ width: 56px; height: 56px; border-radius: 17px; }
.p-title--sm{ font-size: 20px; gap: 8px; }
.p-tipster-head__meta{ font-size: 11.5px; }
/* Четыре метрики в две колонки — как в макете. */
.p-stat-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* «Где автор силён»: пять фиксированных колонок требуют ~470px. На мобильном —
   название и ROI в строку, счётчики и полоса ниже. */
.p-breakdown__row{
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    font-size: 12.5px;
}
.p-breakdown__name{ grid-column: 1; }
.p-breakdown__roi{ grid-column: 2; }
.p-breakdown__count,
.p-breakdown__clv{ grid-row: 2; text-align: left; }
.p-breakdown__count{ grid-column: 1; }
.p-breakdown__clv{ grid-column: 2; text-align: right; }
.p-breakdown__bar{ grid-column: 1 / -1; grid-row: 3; min-width: 0; }

/* ---------- 11. «Как это работает» (макет, экран 17) ---------- */
/* Таблица методики: 1fr + 150px + 130px не влезает — колонки уже и переносятся. */
.p-doc__row{ grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 12px; font-size: 12.5px; }
.p-doc__row > *{ min-width: 0; overflow-wrap: anywhere; }

/* ---------- 12. Экран «Прогноз» (макет, экран 4) ---------- */
/* Хлебные крошки на мобильном не нужны: назад ведёт кнопка в шапке.
   Экраны используют два разных класса — оба десктопные. */
.p-crumbs,
.p-breadcrumb{ display: none; }
/* Четыре полноширинных блока метрик занимали пол-экрана. В макете это ставка
   заголовком и три параметра-пилюли под ней. */
.p-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p-metric--bet{ grid-column: 1 / -1; }
.p-metric{ padding: 12px 13px; }
.p-metric__label{ font-size: 9.5px; }
.p-metric__value{ font-size: 16px; }
.p-metric__value--bet{
    font-family: var(--p-font-display);
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -.6px;
}
.p-author__actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 13. Кабинет (макет, экран 7) ---------- */
/* Пять полноширинных плиток занимали два экрана: ROI остаётся крупным, как
   карточка банка в макете, остальные — в две колонки. */
.p-kpi{ grid-template-columns: repeat(2, 1fr); gap: 9px; }
.p-kpi__item{ padding: 13px 14px; border-radius: 15px; }
.p-kpi__item:first-child{ grid-column: 1 / -1; }
.p-kpi__item:first-child .p-kpi__value{ font-size: 30px; letter-spacing: -1px; }
.p-kpi__label{ font-size: 9.5px; font-weight: 700; letter-spacing: .5px; }
.p-kpi__value{ font-size: 20px; margin-top: 4px; }
.p-kpi__sub{ font-size: 10.5px; }

/* ---------- 15. Оплата, закрытый прогноз, создание рассылки ---------- */
/* Заголовок экрана уже стоит в мобильной шапке — на странице он второй раз
   не нужен и съедал по 2–3 строки. .p-title--sm — исключение: там это имя
   автора, а не название экрана. */
.p-page-head .p-title:not(.p-title--sm){ display: none; }

/* Вторая колонка «оплаты» и «рассылки»: min-width:300px не оставлял запаса на
   узких телефонах, sticky внутри скроллера контента смысла не имеет. */
.p-list-page__side{ min-width: 0; position: static; }
.p-list-page__main{ flex: 1 1 100%; }
.p-list-page__side{ flex: 1 1 100%; }

/* Три показателя рассылки — в строку: minmax(140px) ломал их на 2+1. */
.p-tiles{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-tile__value{ font-size: 15px; }
.p-tile__label{ font-size: 10px; }

/* Цена: 30px хороши для числа, но в этом же месте бывает текст
   («после матча ≈ 6 ч»), и он разъезжался на три строки. */
.p-buy__price .p-mono{ font-size: 22px; }


/* ---------- 14. Хит-зоны ---------- */
/* Ссылки-стрелки и «назад» в тексте — 16-20px по высоте: пальцем не попасть.
   Вертикальный паддинг доводит их до 32px, не сдвигая соседей (inline-block). */
.pm-sec__link,
.p-link-arrow,
.p-link-violet,
.p-back,
.p-outcome-strip__link,
.p-feed__match{
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
}
.pm-sec__link,
.p-link-arrow{ margin-bottom: -7px; }

} /* /@media (max-width: 767px) */