/* ============================================================================
   TheAnalytic — дизайн-система редизайна верификатора.

   Шрифты self-hosted, а не с fonts.googleapis.com: сайт работает под 152-ФЗ,
   и внешняя загрузка шрифтов утекала бы IP посетителя третьей стороне.
   Все три семейства — вариативные, поэтому по одному файлу на подмножество,
   а не по файлу на начертание.

   Space Grotesk существует только в латинице. Поэтому он объявлен ПЕРВЫМ в
   --font-display, а Inter — вторым: латинские заголовки (названия команд,
   значения ставок) получают гротеск, кириллические аккуратно откатываются
   на Inter вместо подмены случайным системным шрифтом.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter-cyrillic.woff2) format('woff2');
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter-latin.woff2) format('woff2');
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url(../fonts/spacegrotesk-latin.woff2) format('woff2');
    font-weight: 500 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url(../fonts/jetbrainsmono-cyrillic.woff2) format('woff2');
    font-weight: 400 600; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url(../fonts/jetbrainsmono-latin.woff2) format('woff2');
    font-weight: 400 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --p-bg: oklch(16% 0.015 260);
    --p-text: oklch(97% 0.005 260);
    --p-on-accent: oklch(16% 0.02 262);

    --p-card: oklch(20% 0.02 262 / .5);
    --p-card-soft: oklch(20% 0.02 262 / .45);
    --p-card-faint: oklch(100% 0 0 / .03);
    --p-inset: oklch(100% 0 0 / .028);

    --p-border: oklch(100% 0 0 / .08);
    --p-border-soft: oklch(100% 0 0 / .06);
    --p-border-strong: oklch(100% 0 0 / .12);

    --p-muted: oklch(66% 0.01 260);
    --p-muted-2: oklch(58% 0.01 260);
    --p-muted-3: oklch(48% 0.01 260);
    --p-body: oklch(82% 0.01 260);

    /* Два акцента дизайна. Фиолетовый — автор, бирюзовый — модель TheAnalytic;
       эта пара смыслов держится по всем экранам, менять местами нельзя. */
    --p-violet: #7C5CFC;
    --p-teal: #2DD4BF;
    --p-pos: #22C55E;
    --p-neg: #F87171;
    --p-warn: #FFC53D;

    --p-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --p-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --p-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --p-shadow-hero: 0 34px 80px -56px rgba(0, 0, 0, .85);
}

@keyframes p-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes p-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes p-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font-ui);
    font-size: 15px;
    line-height: 1.5;
    /* Декоративный слой уезжает за края — без этого появляется горизонтальный скролл. */
    overflow-x: hidden;
}

a { color: var(--p-violet); text-decoration: none; transition: color .15s; }
a:hover { color: var(--p-teal); }
::selection { background: rgba(124, 92, 252, .35); }

.p-root { position: relative; min-height: 100vh; }

/* --- декоративный фон ---------------------------------------------------- */
.p-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.p-decor__blob { position: absolute; border-radius: 50%; filter: blur(40px); }
.p-decor__blob--violet {
    width: 860px; height: 860px; left: -320px; top: -420px;
    background: radial-gradient(circle, #7C5CFC26, transparent 65%);
    animation: p-drift 20s ease-in-out infinite;
}
.p-decor__blob--teal {
    width: 700px; height: 700px; right: -280px; top: 300px;
    background: radial-gradient(circle, #2DD4BF1c, transparent 65%);
    animation: p-drift 24s ease-in-out infinite reverse;
}
.p-decor__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(oklch(100% 0 0 / .026) 1px, transparent 1px),
        linear-gradient(90deg, oklch(100% 0 0 / .026) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 25%, #000, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 50% at 50% 25%, #000, transparent 80%);
}
@media (prefers-reduced-motion: reduce) {
    .p-decor__blob { animation: none; }
}

/* --- шапка --------------------------------------------------------------- */
/* Полоса во всю ширину, содержимое — по сетке контента (та же максимальная
   ширина и те же поля, что у .p-wrap), как сделано на основном сайте. */
.p-header {
    position: relative; z-index: 3;
    border-bottom: 1px solid var(--p-border-soft);
    background: oklch(16% 0.015 260 / .82);
    backdrop-filter: blur(14px);
}
.p-header__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; row-gap: 12px; flex-wrap: wrap;
}
.p-header__left { display: flex; align-items: center; gap: 22px; flex: 1 1 auto; min-width: 0; }
/* Градиент задан на всём знаке, а не на каждом слове: так переход идёт сквозным
   через «TheAnalytic Protocol», а не повторяется дважды. Иерархию держит вес. */
.p-wordmark {
    display: flex; align-items: baseline; gap: 8px; white-space: nowrap;
    background: linear-gradient(120deg, var(--p-violet), var(--p-teal));
    -webkit-background-clip: text; background-clip: text;
}
.p-wordmark__brand,
.p-wordmark__sub {
    font-family: var(--p-font-display); font-size: 22px; letter-spacing: .5px;
    color: transparent;
}
.p-wordmark__brand { font-weight: 700; }
.p-wordmark__sub { font-weight: 600; }

/* Именно навигация должна сжиматься, а не правая группа кнопок. */
.p-nav { display: flex; gap: 2px; min-width: 0; overflow: auto; white-space: nowrap; scrollbar-width: none; }
.p-nav::-webkit-scrollbar { display: none; }
.p-nav__item {
    padding: 8px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
    color: oklch(64% 0.01 260); transition: all .15s;
}
.p-nav__item:hover { color: var(--p-teal); }
.p-nav__item--active { color: #fff; font-weight: 600; background: oklch(100% 0 0 / .06); }
.p-nav__item--active:hover { color: #fff; }

.p-header__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.p-btn-new {
    padding: 8px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
    background: linear-gradient(120deg, var(--p-violet), #7C5CFCbb);
    color: var(--p-on-accent); white-space: nowrap;
}
.p-btn-new:hover { color: var(--p-on-accent); filter: brightness(1.06); }
.p-back { font-size: 13px; color: var(--p-muted-2); white-space: nowrap; }
.p-user {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px; border-radius: 999px;
    background: oklch(20% 0.02 262 / .6); font-size: 13px; color: var(--p-text);
}
.p-user:hover { color: var(--p-text); }
.p-user__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--p-violet), var(--p-teal)); }

/* --- каркас страницы ----------------------------------------------------- */
.p-wrap { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 30px 24px 80px; }
.p-screen { display: flex; flex-direction: column; gap: 20px; animation: p-fadeUp .4s ease both; }

/* Двухколоночные раскладки — переносимый flex, а не жёсткий grid:
   так колонки схлопываются сами по своей flex-basis и медиазапросы не нужны. */
.p-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.p-cols__main { flex: 1 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-cols__side { flex: 1 1 320px; min-width: 300px; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; }

/* --- примитивы ----------------------------------------------------------- */
.p-card { border-radius: 18px; border: 1px solid var(--p-border); background: var(--p-card-soft); padding: 20px 22px; }
.p-card__title { font-family: var(--p-font-display); font-size: 17px; font-weight: 600; margin: 0; }
.p-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.p-hero {
    border-radius: 22px; padding: 22px 24px;
    background: linear-gradient(165deg, oklch(22% 0.026 275 / .72), oklch(19% 0.02 262 / .6));
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow-hero);
}

.p-mono { font-family: var(--p-font-mono); font-variant-numeric: tabular-nums; }
.p-muted { color: var(--p-muted); }
.p-pos { color: var(--p-pos); }
.p-neg { color: var(--p-neg); }
.p-warn { color: var(--p-warn); }
.p-violet { color: var(--p-violet); }
.p-teal { color: var(--p-teal); }

.p-pill {
    display: inline-block; padding: 3px 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px;
}
.p-pill--pos { color: var(--p-pos); background: #22C55E1a; border: 1px solid #22C55E55; }
.p-pill--neg { color: var(--p-neg); background: #F871711a; border: 1px solid #F8717155; }
.p-pill--warn { color: var(--p-warn); background: #FFC53D1a; border: 1px solid #FFC53D55; }
.p-pill--teal { color: var(--p-teal); background: #2DD4BF1a; border: 1px solid #2DD4BF55; }
.p-pill--violet { color: var(--p-violet); background: #7C5CFC1a; border: 1px solid #7C5CFC55; }
.p-pill--mute { color: var(--p-muted-2); background: oklch(100% 0 0 / .04); border: 1px solid var(--p-border); }

.p-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 500;
    color: var(--p-muted); background: oklch(100% 0 0 / .04); border: 1px solid var(--p-border);
    white-space: nowrap; transition: all .15s;
}
.p-chip--mono { font-family: var(--p-font-mono); }

.p-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; animation: p-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .p-dot { animation: none; } }

.p-bar { height: 5px; border-radius: 999px; background: oklch(100% 0 0 / .06); overflow: hidden; }
.p-bar__fill { height: 100%; border-radius: 999px; }

/* Полоса формы: победа / поражение / возврат за последние N ставок. */
.p-form-strip { display: flex; gap: 3px; align-items: stretch; }
.p-form-strip__bar { flex: 1; min-width: 4px; height: 24px; border-radius: 3px; }
.p-form-strip__bar--win { background: var(--p-pos); }
.p-form-strip__bar--loss { background: var(--p-neg); }
.p-form-strip__bar--void { background: var(--p-warn); }

.p-divider { height: 1px; background: oklch(100% 0 0 / .07); margin: 16px 0; }

.p-crumbs { font-size: 13px; color: var(--p-muted-2); display: flex; gap: 8px; flex-wrap: wrap; }

/* --- экран прогноза ------------------------------------------------------ */
.p-author { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.p-author__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--p-violet), var(--p-teal)); flex-shrink: 0; }
.p-author__body { flex: 1 1 220px; min-width: 0; }
.p-author__name { font-size: 16.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-author__meta { font-family: var(--p-font-mono); font-size: 12px; color: var(--p-muted-2); margin-top: 3px; }
.p-author__actions { display: flex; gap: 8px; flex-shrink: 0; }

.p-btn {
    padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--p-border-strong); background: oklch(100% 0 0 / .04); color: var(--p-text);
    cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap;
}
.p-btn:hover { color: var(--p-text); border-color: var(--p-teal); }
.p-btn--primary { background: linear-gradient(120deg, var(--p-violet), var(--p-teal)); color: var(--p-on-accent); border-color: transparent; }
.p-btn--primary:hover { color: var(--p-on-accent); filter: brightness(1.06); }
.p-btn--teal { background: var(--p-teal); color: var(--p-on-accent); border-color: transparent; }
.p-btn--teal:hover { color: var(--p-on-accent); filter: brightness(1.06); }
.p-btn--wide { display: block; width: 100%; text-align: center; }

.p-teams { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--p-font-display); font-size: 21px; font-weight: 600; }
.p-teams__vs { font-family: var(--p-font-mono); font-size: 14px; color: var(--p-muted-3); font-weight: 400; }
.p-teams__pos { font-family: var(--p-font-mono); font-size: 11px; color: var(--p-muted-3); font-weight: 400; margin-left: 6px; }

.p-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.p-metric { border-radius: 14px; border: 1px solid var(--p-border); background: var(--p-card-faint); padding: 14px 16px; }
.p-metric--bet { border-color: #7C5CFC44; background: linear-gradient(150deg, #7C5CFC12, oklch(20% 0.02 262 / .5)); }
.p-metric__label { font-size: 11.5px; color: var(--p-muted-2); text-transform: uppercase; letter-spacing: .4px; }
.p-metric__value { font-family: var(--p-font-mono); font-size: 24px; font-weight: 600; margin-top: 6px; }
.p-metric__value--bet { font-family: var(--p-font-display); font-size: 26px; }

/* Слепок линии: открытие → публикация → сейчас. Средняя плитка — эталон. */
.p-snapshot { display: flex; gap: 12px; flex-wrap: wrap; }
.p-snapshot__tile { flex: 1 1 120px; border-radius: 12px; border: 1px solid var(--p-border-soft); background: var(--p-inset); padding: 12px 14px; }
.p-snapshot__tile--now { border-color: #7C5CFC44; }
.p-snapshot__label { font-size: 11px; color: var(--p-muted-2); }
.p-snapshot__value { font-family: var(--p-font-mono); font-size: 20px; font-weight: 500; margin-top: 4px; }
.p-snapshot__value--ref { color: var(--p-violet); font-weight: 600; }
.p-snapshot__note { font-family: var(--p-font-mono); font-size: 11px; color: var(--p-muted-3); margin-top: 3px; }

.p-evidence { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.p-evidence__item { border-radius: 10px; border: 1px solid var(--p-border-soft); background: var(--p-card-faint); padding: 9px 13px; }
.p-evidence__value { font-family: var(--p-font-mono); font-size: 14px; font-weight: 600; }
.p-evidence__label { font-size: 11px; color: var(--p-muted-2); margin-top: 2px; }

.p-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.p-stat { border-radius: 11px; border: 1px solid var(--p-border-soft); background: var(--p-card-faint); padding: 11px 13px; }
.p-stat__value { font-family: var(--p-font-mono); font-size: 17px; font-weight: 600; }
.p-stat__label { font-size: 11px; color: var(--p-muted-2); margin-top: 2px; }

.p-list-card { border-radius: 18px; border: 1px solid #2DD4BF33; background: linear-gradient(150deg, #2DD4BF12, oklch(20% 0.02 262 / .5)); padding: 20px 22px; }
.p-price { font-family: var(--p-font-mono); font-size: 24px; font-weight: 600; margin: 10px 0 14px; }

.p-rules { display: flex; flex-direction: column; gap: 12px; }
.p-rule { display: flex; gap: 10px; font-size: 12.5px; color: var(--p-body); }
.p-rule__index { font-family: var(--p-font-mono); color: var(--p-teal); flex-shrink: 0; }

.p-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--p-muted-2); margin-top: 12px; }
.p-note__icon { flex-shrink: 0; margin-top: 1px; }

.p-empty { padding: 40px 20px; text-align: center; color: var(--p-muted-2); font-size: 14px; }

/* --- подвал -------------------------------------------------------------- */
.p-footer {
    position: relative; z-index: 2;
    border-top: 1px solid var(--p-border-soft);
    padding: 22px 24px 40px;
    /* max-width совпадает с .p-wrap и .p-header__inner — одна сетка на страницу. */
    display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between;
    max-width: 1320px; margin: 0 auto;
    font-size: 12.5px; color: var(--p-muted-3);
}
.p-footer__links { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- заголовок экрана ---------------------------------------------------- */
.p-page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.p-page-head__text { flex: 1 1 420px; min-width: 0; }
.p-title { font-family: var(--p-font-display); font-size: 38px; font-weight: 600; letter-spacing: -1px; margin: 0; }
.p-lede { font-size: 14.5px; line-height: 1.6; color: var(--p-muted); margin: 8px 0 0; max-width: 640px; }
.p-chips { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.p-chip--active-teal { color: #fff; font-weight: 600; background: #2DD4BF26; border-color: #2DD4BF77; }
.p-chip--active-violet { color: #fff; font-weight: 600; background: #7C5CFC26; border-color: #7C5CFC77; }
.p-chip:hover { color: var(--p-text); }

/* --- таблица ------------------------------------------------------------- */
/* Широкая таблица прокручивается внутри своей карточки, а не тянет всю страницу:
   min-width задаётся и шапке, и строкам одинаковый, иначе колонки разъезжаются. */
.p-card--table { padding: 0; overflow: auto; }
.p-table { min-width: 870px; }
.p-table__head,
.p-table__row {
    display: grid;
    /* # · участник · прогнозов · точность · ROI · банк · CLV · форма */
    grid-template-columns: 44px minmax(200px, 1fr) 92px 84px 84px 92px 76px 110px;
    gap: 14px;
    align-items: center;
    padding: 14px 22px;
}
.p-table__head {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--p-muted-3); border-bottom: 1px solid var(--p-border-soft);
}
.p-table__row {
    border-bottom: 1px solid var(--p-border-soft);
    color: var(--p-text); font-size: 13.5px; transition: background .15s;
}
.p-table__row:last-child { border-bottom: 0; }
.p-table__row:hover { background: oklch(100% 0 0 / .03); color: var(--p-text); }
.p-table__row--model { background: #2DD4BF0d; box-shadow: inset 2px 0 0 var(--p-teal); }
.p-table__row--you { background: oklch(100% 0 0 / .04); box-shadow: inset 2px 0 0 var(--p-violet); }
.p-table__num { text-align: right; }

.p-rank { font-size: 14px; font-weight: 600; color: var(--p-muted-3); }
.p-rank--top { color: #fff; }

.p-participant { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p-participant__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: oklch(100% 0 0 / .06); }
.p-participant__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-participant__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.p-participant__scope { font-size: 11.5px; color: var(--p-muted-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p-form-strip--table .p-form-strip__bar { flex: 0 0 8px; height: 16px; }

/* --- пояснительные карточки --------------------------------------------- */
.p-explainers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.p-card--teal { border-color: #2DD4BF33; background: linear-gradient(150deg, #2DD4BF12, oklch(20% 0.02 262 / .5)); }
.p-explainer__text { font-size: 13.5px; line-height: 1.6; color: var(--p-body); margin: 10px 0 0; }

/* --- профиль прогнозиста -------------------------------------------------- */
.p-title--sm { font-size: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-tipster-head { display: flex; align-items: center; gap: 16px; flex: 1 1 420px; min-width: 0; }
.p-tipster-head__avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--p-violet), var(--p-teal)); }
.p-tipster-head__meta { font-size: 12.5px; color: var(--p-muted-2); margin-top: 4px; }

.p-curve-metrics { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.p-curve-metrics__roi { font-size: 22px; font-weight: 600; }
.p-curve-metrics__label { font-size: 11.5px; color: var(--p-muted-3); }

.p-chart { border-radius: 14px; background: var(--p-inset); padding: 14px 14px 6px; }
/* Растягиваем по ширине карточки: preserveAspectRatio="none" в разметке
   даёт кривой заполнить контейнер, а non-scaling-stroke сохраняет толщину линии. */
.p-chart__svg { display: block; width: 100%; height: 170px; }
.p-chart__labels { position: relative; height: 16px; margin-top: 4px; }
.p-chart__labels span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--p-muted-3); }

.p-metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.p-metric-cards .p-metric__value { font-size: 26px; margin: 6px 0 0; }

.p-breakdown { display: flex; flex-direction: column; gap: 10px; }
/* Сетка одна на все строки, поэтому колонки выравниваются между рынками и лигами. */
.p-breakdown__row {
    display: grid;
    grid-template-columns: minmax(120px, 1.4fr) 92px 92px 66px minmax(60px, 1fr);
    gap: 12px; align-items: center; font-size: 13px;
}
.p-breakdown__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-breakdown__count,
.p-breakdown__clv { font-size: 11.5px; color: var(--p-muted-3); text-align: right; }
.p-breakdown__roi { font-size: 13.5px; font-weight: 600; text-align: right; }
.p-breakdown__bar { min-width: 60px; }

.p-records { display: flex; flex-direction: column; gap: 10px; }
.p-record { display: flex; align-items: baseline; gap: 10px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--p-border-soft); }
.p-record--pos { border-color: #22C55E33; background: #22C55E10; }
.p-record--warn { border-color: #FFC53D33; background: #FFC53D10; }
.p-record--teal { border-color: #2DD4BF33; background: #2DD4BF10; }
.p-record__value { font-size: 18px; font-weight: 600; }
.p-record__label { font-size: 11.5px; color: var(--p-muted-2); }

/* --- модель против автора ------------------------------------------------ */
.p-versus { display: flex; flex-direction: column; gap: 10px; }
.p-versus__row { display: grid; grid-template-columns: 64px 1fr 64px; gap: 12px; align-items: center; font-size: 13px; }
.p-versus__author { color: var(--p-violet); font-weight: 600; }
.p-versus__model { color: var(--p-teal); font-weight: 600; text-align: right; }
.p-versus__label { text-align: center; color: var(--p-muted-2); font-size: 12.5px; }
/* Две дорожки одна под другой: сравниваются длины, а не оттенки одной полосы. */
.p-versus__bar { display: flex; flex-direction: column; gap: 4px; }
.p-versus__bar i { display: block; height: 6px; border-radius: 999px; min-width: 2px; }
.p-versus__bar-author { background: var(--p-violet); }
.p-versus__bar-model { background: #2DD4BF88; }
.p-versus__legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--p-muted-3); }
.p-versus__legend span { display: flex; align-items: center; gap: 6px; }
.p-dot-static { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- таблица матчей ------------------------------------------------------- */
.p-table--matches { min-width: 1020px; }
.p-table--matches .p-table__head,
.p-table--matches .p-table__row {
    grid-template-columns: 88px minmax(200px, 1fr) 96px 150px 160px 118px 112px;
}
.p-match-time { display: flex; flex-direction: column; gap: 2px; }
.p-match-time__value { font-size: 14px; font-weight: 600; }
.p-match-time__league { font-size: 10.5px; color: var(--p-muted-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-match { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-match__teams { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-match__top { font-size: 11.5px; color: var(--p-violet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-consensus { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.p-consensus__label { color: var(--p-muted); }
.p-bar__fill--pos { background: var(--p-pos); }
.p-bar__fill--warn { background: var(--p-warn); }
.p-bar__fill--neg { background: var(--p-neg); }
.p-model-pick { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-model-pick__value { font-size: 13px; font-weight: 600; color: var(--p-teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-model-pick__meta { font-size: 10.5px; color: var(--p-muted-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- кабинет -------------------------------------------------------------- */
.p-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: var(--p-teal); text-transform: uppercase; }

.p-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.p-kpi__item { border-radius: 14px; border: 1px solid var(--p-border); background: var(--p-card-soft); padding: 14px 16px; }
.p-kpi__item--pos { border-color: #22C55E33; background: linear-gradient(150deg, #22C55E10, oklch(20% 0.02 262 / .5)); }
.p-kpi__item--neg { border-color: #F8717133; background: linear-gradient(150deg, #F8717110, oklch(20% 0.02 262 / .5)); }
.p-kpi__label { font-size: 11.5px; color: var(--p-muted-2); text-transform: uppercase; letter-spacing: .4px; }
.p-kpi__value { font-size: 24px; font-weight: 600; margin-top: 6px; }
.p-kpi__sub { font-size: 11px; color: var(--p-muted-3); margin-top: 3px; }

/* Шапка внутри карточки-таблицы: у самой карточки padding снят ради прокрутки. */
.p-card__head--padded { padding: 18px 22px 0; margin-bottom: 14px; }

.p-table--bets { min-width: 620px; }
.p-table--bets .p-table__head,
.p-table--bets .p-table__row { grid-template-columns: minmax(220px, 1fr) 72px 116px 92px; }

.p-mylists { display: flex; flex-direction: column; gap: 10px; }
.p-mylist {
    display: flex; flex-direction: column; gap: 5px;
    padding: 13px 14px; border-radius: 13px;
    border: 1px solid var(--p-border); background: var(--p-card-faint);
    color: var(--p-text); transition: all .15s;
}
.p-mylist:hover { color: var(--p-text); border-color: #2DD4BF55; }
.p-mylist--paused { opacity: .62; }
.p-mylist__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-mylist__name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-mylist__scope { font-size: 11.5px; color: var(--p-muted-3); }
.p-mylist__figures { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 2px; }

.p-rules-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.p-rule-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.p-rule-row__label { color: var(--p-muted); }
.p-rule-row__value { font-weight: 600; }

/* --- главная -------------------------------------------------------------- */
.p-screen--home { gap: 40px; }
.p-section { display: flex; flex-direction: column; gap: 16px; }

.p-hero-home { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.p-hero-home__text { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.p-eyebrow-pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid #2DD4BF44; background: #2DD4BF14;
    font-size: 11.5px; font-weight: 600; color: var(--p-teal);
}
.p-hero-home__title {
    font-family: var(--p-font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 600; line-height: 1.04; letter-spacing: -1.2px;
    margin: 0; max-width: 640px; text-wrap: balance;
}
.p-hero-home__lede { font-size: 16px; line-height: 1.65; color: var(--p-muted); margin: 0; max-width: 62ch; }
.p-hero-home__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.p-hero-home__cta .p-btn { padding: 13px 22px; font-size: 14px; border-radius: 12px; }

/* Плитки — сетка 2×2, чтобы блок держал форму рядом с текстом. */
.p-hero-home__stats { flex: 1 1 300px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.p-stat-tile { border-radius: 16px; border: 1px solid var(--p-border); background: var(--p-card-soft); padding: 16px; }
.p-stat-tile__value { font-size: 23px; font-weight: 600; }
.p-stat-tile__label { font-size: 11.5px; color: var(--p-muted-2); margin-top: 4px; line-height: 1.35; }

.p-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.p-how__item { display: flex; flex-direction: column; gap: 8px; }
.p-how__index { font-size: 12px; color: var(--p-violet); font-weight: 600; }
.p-how__title { font-family: var(--p-font-display); font-size: 17.5px; font-weight: 600; margin: 0; }

.p-link-arrow { font-size: 13px; }

.p-authors { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.p-author-card { display: flex; flex-direction: column; gap: 14px; color: var(--p-text); transition: all .15s; }
.p-author-card:hover { color: var(--p-text); border-color: #2DD4BF55; }
.p-author-card--model { border-color: #2DD4BF33; background: linear-gradient(150deg, #2DD4BF12, oklch(20% 0.02 262 / .5)); }
.p-author-card__top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.p-author-card__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: oklch(100% 0 0 / .06); }
.p-author-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-author-card__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.p-author-card__scope { font-size: 11.5px; color: var(--p-muted-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-author-card__figures { display: flex; gap: 18px; flex-wrap: wrap; }
.p-author-card__figures > span { display: flex; flex-direction: column; gap: 2px; }
.p-author-card__roi { font-size: 19px; font-weight: 600; }
.p-author-card__acc { font-size: 15px; font-weight: 600; }
.p-author-card__cap { font-size: 10.5px; color: var(--p-muted-3); }
.p-form-strip--card .p-form-strip__bar { height: 16px; }

.p-table--upcoming { min-width: 640px; }
.p-table--upcoming .p-table__head,
.p-table--upcoming .p-table__row { grid-template-columns: minmax(200px, 1fr) 104px 96px 170px; }

.p-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.p-feed__item { display: flex; flex-direction: column; gap: 9px; }
.p-feed__match { font-weight: 600; font-size: 14.5px; }
.p-feed__bet { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.p-feed__ratio { font-weight: 600; }
.p-feed__note { font-size: 13px; line-height: 1.55; color: var(--p-body); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.p-feed__author { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--p-muted-2); margin-top: auto; }
.p-feed__author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: oklch(100% 0 0 / .06); }
.p-feed__date { margin-left: auto; font-size: 11px; color: var(--p-muted-3); }

.p-cta { display: flex; flex-wrap: wrap; gap: 20px; }
.p-cta__item {
    flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    border-radius: 18px; border: 1px solid var(--p-border); background: var(--p-card-soft); padding: 22px 24px;
}
.p-cta__item--violet { border-color: #7C5CFC2e; background: linear-gradient(140deg, #7C5CFC14, oklch(20% 0.02 262 / .5)); }
.p-cta__title { font-family: var(--p-font-display); font-size: 18px; font-weight: 600; margin: 0; }

/* --- фильтр лиг ----------------------------------------------------------- */
.p-chip__count { color: var(--p-muted-3); font-size: 11px; }
.p-leagues-more { position: relative; }
.p-leagues-more > summary { list-style: none; cursor: pointer; user-select: none; }
.p-leagues-more > summary::-webkit-details-marker { display: none; }
.p-leagues-more[open] > summary { color: #fff; background: oklch(100% 0 0 / .08); }
/* Раскрытый список ложится под строку чипов, а не раздвигает её. */
.p-leagues-more__list {
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--p-border);
    background: var(--p-card-soft);
    max-height: 260px;
    overflow-y: auto;
}

/* --- страница матча ------------------------------------------------------- */
.p-crumbs__current { color: oklch(88% 0.01 260); }

.p-match-hero { padding: 26px 28px 28px; }
.p-match-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p-match-hero__league { font-size: 11.5px; color: var(--p-muted-2); }

.p-match-hero__teams { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.p-match-hero__side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.p-match-hero__side--home { justify-content: flex-end; text-align: right; }
.p-match-hero__side--home .p-match-hero__id { align-items: flex-end; }
.p-match-hero__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p-match-hero__name { font-family: var(--p-font-display); font-size: 28px; font-weight: 600; line-height: 1.1; }
.p-match-hero__meta { font-size: 12px; color: oklch(54% 0.01 260); }
.p-match-hero__vs { font-family: var(--p-font-mono); font-size: 13px; color: oklch(46% 0.01 260); flex-shrink: 0; }
.p-match-hero__score { font-size: 26px; font-weight: 600; color: var(--p-text); }

/* Монограмма — запасной вариант, пока нет герба клуба; изображение занимает тот же круг. */
.p-crest {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: oklch(26% 0.02 262); border: 1px solid oklch(100% 0 0 / .13);
    font-family: var(--p-font-display); font-weight: 700; font-size: 15px;
    letter-spacing: .4px; color: oklch(84% 0.01 260);
}
.p-crest img { width: 100%; height: 100%; object-fit: contain; }

.p-line-plate {
    display: flex; gap: 16px; align-items: center;
    padding: 12px 18px; border-radius: 13px;
    background: oklch(100% 0 0 / .04); border: 1px solid oklch(100% 0 0 / .09);
}
.p-line-plate > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.p-line-plate__label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: oklch(50% 0.01 260); }
.p-line-plate__value { font-size: 17px; font-weight: 600; }

/* Вторичные цифры — прозой, а не плитками: страница и так плотная по числам. */
.p-match-hero__summary {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 22px; border-top: 1px solid oklch(100% 0 0 / .07);
}
.p-summary-figure { display: flex; align-items: baseline; gap: 9px; }
.p-summary-figure__value { font-size: 26px; font-weight: 600; }
.p-summary-figure__label { font-size: 12.5px; color: var(--p-muted-2); }
.p-summary-rule { width: 1px; height: 22px; background: oklch(100% 0 0 / .1); }
.p-summary-note { font-size: 13px; line-height: 1.5; color: oklch(62% 0.01 260); max-width: 300px; margin: 0; text-wrap: pretty; }

/* Таблица прогнозов НЕ прокручивается по горизонтали — это требование макета.
   Колонок ровно четыре; понадобится новая — придётся убрать одну из этих. */
.p-card--picks { padding: 0; overflow: hidden; }
.p-picks__head { padding: 20px 24px 16px; }
.p-picks__sub { font-size: 12.5px; color: var(--p-muted-2); margin-top: 4px; }
.p-picks__row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 116px 66px 104px;
    gap: 12px; align-items: center;
    padding: 15px 24px;
    border-bottom: 1px solid oklch(100% 0 0 / .05);
    color: var(--p-text); transition: background .15s;
}
.p-picks__row--head {
    padding: 12px 24px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .55px; font-weight: 700; color: oklch(48% 0.01 260);
    border-top: 1px solid oklch(100% 0 0 / .07);
}
a.p-picks__row:hover { background: oklch(100% 0 0 / .03); color: var(--p-text); }
.p-picks__row--model { background: #2DD4BF0d; box-shadow: inset 2px 0 0 var(--p-teal); }
.p-picks__row:last-child { border-bottom: 0; }

.p-pick-author { display: flex; align-items: center; gap: 11px; min-width: 0; }
.p-pick-author__avatar {
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: oklch(100% 0 0 / .06); color: oklch(76% 0.01 260);
    font-size: 11px; font-weight: 700;
}
.p-pick-author__avatar--model { background: linear-gradient(135deg, var(--p-teal), #2DD4BF88); color: var(--p-on-accent); }
.p-pick-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-pick-author__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-pick-author__name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.p-pick-author__meta { font-size: 11px; color: oklch(50% 0.01 260); }

.p-pick-bet { font-size: 13.5px; font-weight: 600; color: var(--p-violet); overflow: hidden; text-overflow: ellipsis; }
.p-pick-bet--diverges { color: var(--p-warn); }
.p-pick-odds { font-size: 13px; color: oklch(80% 0.01 260); }

.p-distribution { display: flex; flex-direction: column; gap: 14px; }
.p-distribution__top { display: flex; align-items: baseline; gap: 10px; }
.p-distribution__label { font-size: 13.5px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.p-distribution__count { font-size: 13px; color: oklch(54% 0.01 260); }
.p-distribution__share { font-size: 14px; font-weight: 600; min-width: 44px; text-align: right; }
.p-distribution__row .p-bar { margin-top: 8px; }
.p-bar__fill--mute { background: oklch(56% 0.01 260); }

.p-publish-card { border-color: #7C5CFC2e; background: linear-gradient(150deg, #7C5CFC12, oklch(20% 0.02 262 / .5)); }
.p-publish-card .p-explainer__text { margin: 10px 0 14px; }

.p-model-pick-title { font-family: var(--p-font-display); font-size: 22px; font-weight: 600; margin-top: 10px; }
.p-model-market { font-size: 12px; color: var(--p-muted-2); margin-top: 2px; }
.p-model-figures { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.p-model-figures > span { display: flex; flex-direction: column; gap: 3px; }
.p-model-figures__label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: oklch(50% 0.01 260); }
.p-model-figures__value { font-size: 17px; font-weight: 600; }
.p-model-verdict { font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.p-h2h { display: flex; flex-direction: column; gap: 10px; }
.p-h2h__row { display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
.p-h2h__date { color: oklch(54% 0.01 260); font-size: 12px; }
.p-h2h__score { font-size: 13.5px; font-weight: 600; }
.p-h2h__note { margin-left: auto; min-width: 96px; text-align: right; font-size: 11.5px; color: var(--p-muted-2); }

/* ------------------------------------------------ форма создания рассылки */
/* Две колонки с липкой боковой: предпросмотр и проверки должны быть видны,
   пока автор правит поля, — иначе он узнаёт о короткой описи после отправки. */
.p-list-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.p-list-form__main { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-list-form__side { flex: 1 1 320px; min-width: 300px; position: sticky; top: 20px;
    display: flex; flex-direction: column; gap: 20px; }

.p-field { display: block; margin: 16px 0 0; }
.p-field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
    color: var(--p-muted-3); margin-bottom: 8px; }
.p-field__hint { display: block; font-size: 12.5px; line-height: 1.5; color: var(--p-muted-3); margin-top: 8px; }
.p-field__counter, .p-field__value { font-size: 12px; color: var(--p-muted-2); text-transform: none; letter-spacing: 0; }

.p-input { width: 100%; padding: 13px 15px; border-radius: 12px; font: inherit; font-size: 15px;
    color: var(--p-text); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1);
    outline: none; transition: border-color .15s; }
.p-input:focus { border-color: var(--p-teal); }
.p-input--area { min-height: 112px; line-height: 1.6; resize: vertical; }

.p-range { width: 100%; accent-color: var(--p-teal); margin: 4px 0 0; }

/* Список лиг длинный — прокручиваем его, а не растим страницу на весь каталог. */
.p-chips--scroll { max-height: 190px; overflow-y: auto; margin-top: 10px; align-content: flex-start; }

.p-divider { height: 1px; background: var(--p-border-soft); margin: 18px 0; }

.p-toggle-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.p-toggle-row input { margin-top: 3px; accent-color: var(--p-violet); width: 16px; height: 16px; }
.p-toggle-row__body { display: block; min-width: 0; }
.p-toggle-row__title { display: block; font-size: 14px; font-weight: 600; color: var(--p-text); }

.p-preview__name { font-family: var(--p-font-display); font-size: 16px; font-weight: 600; margin: 10px 0 6px; }
.p-preview__price { font-family: var(--p-font-mono); font-size: 20px; font-weight: 600; margin: 14px 0 6px; }
.p-preview__meta { font-size: 11px; color: var(--p-muted-3); }

.p-btn-primary { width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: #10121A;
    background: linear-gradient(120deg, var(--p-violet), var(--p-teal)); }
.p-btn-primary:hover { filter: brightness(1.06); }
.p-form-message { font-size: 12.5px; color: var(--p-muted-2); margin-top: 10px; min-height: 16px; }

/* ------------------------------------------------ публичная страница рассылки */
.p-breadcrumb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    font-size: 12px; color: var(--p-muted-3); margin-bottom: 18px; }
.p-breadcrumb a { color: var(--p-muted-2); text-decoration: none; }
.p-breadcrumb a:hover { color: var(--p-teal); }
.p-breadcrumb__current { color: var(--p-text); }

.p-list-page { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.p-list-page__main { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-list-page__side { flex: 1 1 320px; min-width: 300px; position: sticky; top: 20px;
    display: flex; flex-direction: column; gap: 20px; }

.p-hero__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.p-hero__author { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0;
    text-decoration: none; color: inherit; }
.p-hero__monogram { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: rgba(124,92,252,.18); color: var(--p-violet); font-weight: 700; font-size: 13px; }
.p-hero__author-body { display: flex; flex-direction: column; min-width: 0; }
.p-hero__author-name { font-size: 14px; font-weight: 600; }
.p-hero__author-meta { font-size: 11.5px; color: var(--p-muted-3); }

.p-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 16px; }
.p-tile { display: flex; flex-direction: column; gap: 3px; }
.p-tile__value { font-size: 22px; font-weight: 600; }
.p-tile__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--p-muted-3); }
.p-tile__note { font-size: 11.5px; color: var(--p-muted-3); }

/* Таблица раскрытых прогнозов — шире карточки, прокручивается внутри неё. */
.p-table--revealed { min-width: 680px; }
.p-table--revealed .p-table__head,
.p-table--revealed .p-table__row { grid-template-columns: minmax(180px,1fr) 130px 82px 72px 82px 92px; }
.p-table__sub { display: block; font-size: 11px; color: var(--p-muted-3); margin-top: 2px; }

.p-faq__item { padding: 14px 0; border-top: 1px solid var(--p-border-soft); }
.p-faq__item:first-child { border-top: 0; padding-top: 4px; }
.p-faq__q { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

.p-buy__price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 14px; }
.p-buy__price .p-mono { font-size: 30px; font-weight: 600; }
.p-buy__period { font-size: 12.5px; color: var(--p-muted-3); }

.p-seats { margin-top: 16px; }
.p-seats__row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--p-muted-2); }
.p-seats__bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); margin: 8px 0 6px; overflow: hidden; }
.p-seats__bar i { display: block; height: 100%; background: var(--p-warn); }

.p-guarantees { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.p-guarantees li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.5; color: var(--p-body); }
.p-guarantees li::before { content: '✓'; position: absolute; left: 0; color: var(--p-teal); font-weight: 700; }

.p-upcoming__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
    border-top: 1px solid var(--p-border-soft); font-size: 13px; text-decoration: none; color: inherit; }
.p-upcoming__row:first-of-type { border-top: 0; }
.p-upcoming__row:hover { color: var(--p-teal); }
.p-upcoming__time { font-size: 11.5px; color: var(--p-muted-3); white-space: nowrap; }
.p-link-violet { color: var(--p-violet); font-size: 12.5px; text-decoration: none; white-space: nowrap; }

/* ------------------------------------------------ закрытый прогноз (витрина) */
.p-screen--narrow { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.p-section-title { font-family: var(--p-font-display); font-size: 22px; font-weight: 600; margin: 4px 0 0; }

.p-locked { position: relative; overflow: hidden; padding: 0; }
/* Размывается ЗАГЛУШКА, а не настоящий прогноз: реальные значения на страницу
   не приходят вовсе, иначе их было бы видно в исходном коде. */
.p-locked__masked { filter: blur(5px); opacity: .5; user-select: none; pointer-events: none; padding: 26px 28px; }
.p-locked__row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0;
    border-top: 1px solid var(--p-border-soft); font-size: 14px; color: var(--p-muted-2); }
.p-locked__row:first-child { border-top: 0; }

.p-locked__overlay { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px;
    background: linear-gradient(rgba(18,20,28,.55), rgba(18,20,28,.86)); }
.p-locked__lock { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
    background: rgba(45,212,191,.16); color: var(--p-teal); }
.p-locked__title { font-family: var(--p-font-display); font-size: 24px; font-weight: 600; margin: 0; }
.p-locked__overlay .p-explainer__text { max-width: 460px; }
.p-locked__proof { display: flex; flex-direction: column; gap: 14px; }

.p-btn-outline { display: block; width: 100%; text-align: center; padding: 12px 18px; margin-top: 12px;
    border-radius: 12px; border: 1px solid var(--p-border); background: rgba(255,255,255,.045);
    color: var(--p-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    text-decoration: none; }
.p-btn-outline:hover { border-color: var(--p-teal); color: var(--p-teal); }
.p-rules { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.p-rules li { font-size: 13px; line-height: 1.55; color: var(--p-body); }

/* ------------------------------------------------------------ оплата и чек */
.p-plan { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-top: 12px;
    border-radius: 14px; border: 1px solid var(--p-border); background: rgba(255,255,255,.03);
    text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.p-plan--active { border-color: #2DD4BF77; background: rgba(45,212,191,.07); }
.p-plan__radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 2px;
    border: 2px solid var(--p-border-strong); position: relative; }
.p-plan--active .p-plan__radio { border-color: var(--p-teal); }
.p-plan--active .p-plan__radio::after { content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--p-teal); }
.p-plan__body { flex: 1 1 auto; min-width: 0; }
.p-plan__title { display: block; font-size: 14.5px; font-weight: 600; }
.p-plan__price { flex: 0 0 auto; font-size: 15px; font-weight: 600; white-space: nowrap; }

.p-total__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
    font-size: 13.5px; color: var(--p-body); }
.p-total__row--sum { border-top: 1px solid var(--p-border-soft); margin-top: 6px; padding-top: 12px;
    font-size: 15px; color: var(--p-text); font-weight: 600; }
.p-total__row--sum .p-mono { font-size: 24px; }
.p-payment-form { margin: 14px 0 6px; }

.p-receipt { max-width: 620px; margin: 0 auto; text-align: center; }
.p-receipt--paid { border-color: #22C55E44; }
.p-receipt__medal { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 18px; background: rgba(255,255,255,.06); color: var(--p-muted-2); }
.p-receipt--paid .p-receipt__medal { background: rgba(34,197,94,.14); color: #22C55E; }
.p-receipt__rows { margin: 20px 0; text-align: left; }
.p-receipt__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
    border-top: 1px solid var(--p-border-soft); font-size: 13.5px; }
.p-receipt__row span:first-child { color: var(--p-muted-3); }
.p-receipt__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.p-receipt__actions > * { flex: 1 1 180px; margin-top: 0; }

/* --------------------------------------------------------- документ методики */
.p-doc { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.p-doc__body { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-doc__side { flex: 0 1 264px; min-width: 240px; position: sticky; top: 20px;
    display: flex; flex-direction: column; gap: 20px; }
.p-doc__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.p-doc__index { font-size: 13px; color: var(--p-violet); font-weight: 600; }
.p-doc__body .p-explainer__text + .p-explainer__text { margin-top: 10px; }

.p-formula { margin: 14px 0; padding: 14px 16px; border-radius: 14px;
    border: 1px solid rgba(124,92,252,.2); background: rgba(124,92,252,.06);
    font-family: var(--p-font-mono); font-size: 13px; line-height: 1.7;
    white-space: pre; overflow-x: auto; color: var(--p-text); }

.p-doc__table { margin: 14px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--p-border-soft); }
.p-doc__row { display: grid; grid-template-columns: 1fr 150px 130px; gap: 12px; padding: 10px 14px; font-size: 13px; }
.p-doc__row:nth-child(odd) { background: rgba(255,255,255,.025); }
.p-doc__row--head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--p-muted-3); background: rgba(255,255,255,.04); }

.p-toc { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.p-toc a { color: var(--p-body); text-decoration: none; font-size: 13px; }
.p-toc a:hover { color: var(--p-teal); }

/* ------------------------------------------------------- форма прогноза */
.p-outcome { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; padding: 14px 16px;
    border-radius: 14px; border: 1px solid rgba(124,92,252,.24); background: rgba(124,92,252,.07); }
.p-outcome__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
    font-weight: 700; color: var(--p-muted-3); }
.p-outcome__value { font-family: var(--p-font-display); font-size: 19px; font-weight: 600; }
select.p-input { appearance: none; cursor: pointer; }

/* Кнопка прогноза в таблице матчей.
   Строка перестала быть одной большой ссылкой: вложить ссылку в ссылку нельзя,
   браузер такую разметку разрывает. Вместо этого ссылка на матч растянута
   подложкой, а кнопка лежит поверх неё. */
.p-table__row--linked { position: relative; }
.p-row-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.p-table__row--linked > span { position: relative; z-index: 1; pointer-events: none; }
.p-table__row--linked .p-row-action { pointer-events: auto; }

.p-row-action { display: flex; justify-content: flex-end; }
.p-row-action__note { font-size: 11.5px; white-space: nowrap; }
.p-btn-row { display: inline-block; padding: 7px 12px; border-radius: 9px; white-space: nowrap;
    border: 1px solid rgba(45,212,191,.45); background: rgba(45,212,191,.12);
    color: var(--p-teal); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.p-btn-row:hover { background: rgba(45,212,191,.2); }
.p-btn-row--muted { border-color: var(--p-border); background: rgba(255,255,255,.04); color: var(--p-muted-2); }

/* ------------------------------------------------- итог прогноза и его расчёт */
.p-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.p-status { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 11px;
    border: 1px solid transparent; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.p-outcome-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px; margin-top: 16px; padding: 16px 20px; border-radius: 14px;
    border: 1px solid transparent; }
.p-outcome-strip--idle { background: rgba(255,255,255,.035); border-color: var(--p-border-soft); }
/* Метка, исход и формула — по одной базовой линии, иначе строка «пляшет». */
.p-outcome-strip__left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-width: 0; }
.p-outcome-strip__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
    font-weight: 700; color: var(--p-muted-3); }
.p-outcome-strip__value { font-family: var(--p-font-display); font-size: 17px; font-weight: 600; }
.p-outcome-strip__formula { font-size: 11.5px; color: var(--p-muted-3); }
.p-outcome-strip__right { display: flex; align-items: baseline; gap: 12px; }
.p-outcome-strip__delta { font-size: 26px; font-weight: 600; }
.p-outcome-strip__link { font-size: 12.5px; color: var(--p-muted-2); text-decoration: none; white-space: nowrap; }
.p-outcome-strip__link:hover { color: var(--p-teal); }

/* Липкой шапки на этих экранах нет, но запас под якорь оставляем: он ничего
   не стоит, а без него ссылка «расчёт →» упирает карточку в самый верх. */
.p-settle { scroll-margin-top: 80px; }

.p-timeline { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 4px; }
.p-timeline__step { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 16px;
    position: relative; padding-bottom: 16px; }
.p-timeline__step:last-child { padding-bottom: 0; }
.p-timeline__step::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px;
    background: rgba(255,255,255,.09); }
.p-timeline__step:last-child::before { display: none; }
.p-timeline__step--done::before { background: rgba(124,92,252,.33); }
.p-timeline__dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 2px;
    border: 2px solid rgba(255,255,255,.16); }
.p-timeline__step--done .p-timeline__dot { background: var(--p-violet); border-color: var(--p-violet); }
.p-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-timeline__title { font-size: 13.5px; font-weight: 600; }
.p-timeline__note { font-size: 11.5px; color: var(--p-muted-3); }

.p-settle__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 16px; margin: 18px 0; padding: 20px 22px; border-radius: 14px; border: 1px solid transparent; }
.p-settle__result--idle { background: rgba(255,255,255,.035); border-color: var(--p-border-soft); }
.p-settle__result-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-settle__outcome { font-family: var(--p-font-display); font-size: 23px; font-weight: 600; }
.p-settle__formula { font-size: 12px; color: var(--p-muted-3); }
/* Дельта и подпись под ней держатся вместе при переносе на узком экране. */
.p-settle__result-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.p-settle__delta { font-size: 34px; font-weight: 600; line-height: 1.1; }