/* Positions page */

.page-buyer {
    --pos-bg: #efefee;
    --pos-surface: rgba(255, 255, 255, .72);
    --pos-surface-solid: #fff;
    --pos-soft-panel: #f8f9f6;
    --pos-ink: #111217;
    --pos-muted: #8d919d;
    --pos-text-soft: #4b4f5a;
    --pos-line: rgba(17, 18, 23, .075);
    --pos-green: #A8E76A;
    --pos-green-soft: rgba(168, 231, 106, .24);
    --pos-green-line: rgba(168, 231, 106, .45);
    --pos-red: #dc2626;
    --pos-red-soft: #fff1f1;
    --pos-orange: #f97316;
    --pos-orange-soft: #fff7ed;
    --pos-yellow: #775713;
    --pos-yellow-soft: rgba(245, 198, 83, .22);
    --pos-teal: #2aa7a1;
    --pos-blue-soft: #f1f4fb;
    --pos-teal-soft: #e3f3f1;
    padding: 0 !important;
    background: var(--pos-bg);
}

.pos-shell {
    width: 100%;
    min-height: 100vh;
    padding: 24px 28px 42px;
    color: var(--pos-ink);
    box-sizing: border-box;
}

.pos-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 28px;
}

.pos-hero-main,
.pos-live-card,
.pos-stat,
.pos-panel,
.pos-section {
    border: 1px solid var(--pos-line);
    background: var(--pos-surface);
    box-shadow: 0 1px 0 rgba(17, 18, 23, .035);
}

.pos-hero-main {
    min-height: 142px;
    padding: 24px 28px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 14%, rgba(168, 231, 106, .46), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(248, 249, 246, .72));
}

.pos-eyebrow,
.pos-kicker {
    display: block;
    color: #2a5c12;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pos-title {
    margin: 12px 0 0;
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 36px;
    font-weight: 740;
    letter-spacing: 0;
    line-height: 1.02;
}

.pos-sub {
    max-width: 620px;
    margin: 10px 0 0;
    color: var(--pos-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.pos-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.pos-hero-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(17, 18, 23, .07);
}

.pos-hero-metrics b {
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 13px;
    font-weight: 850;
}

.pos-hero-metrics em {
    color: var(--pos-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.pos-live-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 142px;
    padding: 20px 22px;
    border-radius: 20px;
    background:
        linear-gradient(160deg, var(--pos-green-soft), rgba(255, 255, 255, 0) 56%),
        rgba(255, 255, 255, .78);
    border-color: rgba(17, 18, 23, .08);
}

.pos-live-card span,
.pos-live-card em,
.pos-stat span,
.pos-stat em,
.pos-panel-head p,
.pos-table-head,
.pos-key-name span,
.pos-competitor-row span {
    color: var(--pos-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.35;
}

.pos-live-card strong {
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 42px;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1;
}

.pos-live-card strong small {
    color: var(--pos-muted);
    font-size: 18px;
    font-weight: 800;
}

.pos-live-progress {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(17, 18, 23, .08);
    overflow: hidden;
}

.pos-live-progress b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7fca3d, var(--pos-green));
}

.pos-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 34px;
}

.pos-stat {
    min-height: 132px;
    padding: 22px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.pos-stat--primary {
    background:
        radial-gradient(circle at 86% 18%, rgba(168, 231, 106, .44), transparent 34%),
        #111217;
    color: #fff;
}

.pos-stat:nth-child(2) {
    background: linear-gradient(145deg, rgba(245, 198, 83, .22), rgba(255, 255, 255, .72) 58%);
}

.pos-stat:nth-child(3) {
    background: linear-gradient(145deg, rgba(168, 231, 106, .24), rgba(255, 255, 255, .72) 58%);
}

.pos-stat:nth-child(4) {
    background: linear-gradient(145deg, rgba(249, 115, 22, .12), rgba(255, 255, 255, .72) 58%);
}

.pos-stat:nth-child(5) {
    background: linear-gradient(145deg, rgba(227, 243, 241, .98), rgba(255, 255, 255, .72) 58%);
}

.pos-stat:nth-child(6) {
    background: linear-gradient(145deg, rgba(147, 112, 219, .14), rgba(255, 255, 255, .72) 58%);
}

.pos-stat span {
    display: block;
    margin-bottom: 12px;
}

.pos-stat--primary span,
.pos-stat--primary em {
    color: rgba(255, 255, 255, .68);
}

.pos-stat strong {
    display: block;
    margin-bottom: 9px;
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1;
}

.pos-stat--primary strong {
    color: #fff;
}

.pos-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
    gap: 24px;
    margin-bottom: 36px;
}

.pos-panel,
.pos-section {
    overflow: hidden;
    border-radius: 20px;
}

.pos-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    border-bottom: 1px solid var(--pos-line);
}

.pos-panel-head--section {
    background: rgba(255, 255, 255, .48);
}

.pos-panel-head h2 {
    margin: 7px 0 0;
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    font-weight: 720;
    letter-spacing: 0;
    line-height: 1.2;
}

.pos-panel-head p {
    max-width: 360px;
    margin: 2px 0 0;
    text-align: right;
}

.pos-key-table,
.pos-competitor-list {
    display: flex;
    flex-direction: column;
}

.pos-table-head,
.pos-table-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 92px 84px 110px;
    gap: 14px;
    align-items: center;
    padding: 0 26px;
}

.pos-table-head {
    min-height: 40px;
    border-bottom: 1px solid var(--pos-line);
    background: rgba(248, 249, 246, .9);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .06em;
}

.pos-table-row {
    min-height: 86px;
    border-bottom: 1px solid var(--pos-line);
}

.pos-table-row:last-child,
.pos-competitor-row:last-child {
    border-bottom: 0;
}

.pos-key-name {
    min-width: 0;
}

.pos-key-name strong,
.pos-competitor-row strong,
.pos-rank-row strong {
    display: block;
    overflow: hidden;
    color: var(--pos-ink);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-key-name span,
.pos-competitor-row span {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 30px;
    border-radius: 999px;
    background: rgba(168, 231, 106, .45);
    color: #173111;
    font-family: 'Unbounded', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 760;
    letter-spacing: 0;
}

.pos-pill--mid {
    background: var(--pos-yellow-soft);
    color: var(--pos-yellow);
}

.pos-pill--low {
    background: rgba(17, 18, 23, .08);
    color: var(--pos-text-soft);
}

.pos-pill--aggregator {
    width: auto;
    padding: 0 12px;
    background: var(--pos-orange-soft);
    color: var(--pos-orange);
    cursor: help;
}

.pos-stat-aggr {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pos-orange-soft);
    color: var(--pos-orange);
    font-family: 'Onest', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    cursor: help;
}

.pos-table-row b,
.pos-table-row em {
    color: var(--pos-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.pos-table-row b.is-up { color: #2a5c12; }
.pos-table-row b.is-down { color: var(--pos-red); }

.pos-panel--focus {
    background:
        radial-gradient(circle at 78% 14%, rgba(168, 231, 106, .7), transparent 24%),
        linear-gradient(135deg, #111217, #22242b);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.pos-panel--focus .pos-panel-head {
    border-bottom-color: rgba(255, 255, 255, .12);
}

.pos-panel--focus .pos-kicker,
.pos-panel--focus h2 {
    color: #fff;
}

.pos-trend {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 22px;
    padding: 24px 20px 22px;
}

.pos-trend-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 174px;
    height: 174px;
    margin: 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #111217 0 58%, transparent 59%),
        conic-gradient(var(--pos-green) var(--value), rgba(255, 255, 255, .13) 0);
}

.pos-trend-ring strong {
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    font-weight: 760;
}

.pos-trend-ring span {
    margin-top: 4px;
    color: rgba(255, 255, 255, .62);
    font-size: 12px;
    font-weight: 800;
}

.pos-trend-list {
    display: grid;
    gap: 9px;
}

.pos-trend-list span {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 780;
}

.pos-trend-list b {
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 18px;
    line-height: 1;
}

.pos-trend-list em {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    font-style: normal;
}

.pos-trend-list em strong {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.pos-trend-list em small {
    overflow: hidden;
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-trend-list i {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-style: normal;
    font-weight: 820;
    text-align: right;
    white-space: nowrap;
}

.pos-trend-list span:not(:has(i)) {
    grid-template-columns: 46px minmax(0, 1fr);
}

.pos-trend-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pos-trend-kpis div {
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
}

.pos-trend-kpis span {
    display: block;
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pos-trend-kpis strong {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 20px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-trend-foot {
    margin-top: auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 16px;
    align-items: end;
}

.pos-trend-foot span,
.pos-trend-foot em {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pos-trend-foot strong {
    display: block;
    margin: 8px 0 6px;
    color: #fff;
    font-family: 'Unbounded', sans-serif;
    font-size: 28px;
    line-height: .95;
}

.pos-trend-bars {
    height: 78px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    align-items: end;
}

.pos-trend-bars i {
    display: block;
    min-height: 10px;
    border-radius: 12px 12px 4px 4px;
    background: rgba(255, 255, 255, .16);
}

.pos-trend-bars i:nth-child(1),
.pos-trend-bars i:nth-child(2) {
    background: var(--pos-green);
}

.pos-trend-bars i:nth-child(3) {
    background: #dff7c8;
}

.pos-section {
    margin-bottom: 36px;
}

.pos-rank-wrap {
    overflow-x: auto;
}

.pos-rank-table {
    min-width: 820px;
}

.pos-rank-head,
.pos-rank-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 74px repeat(3, minmax(120px, .7fr)) minmax(140px, .8fr);
    gap: 12px;
    align-items: center;
    padding: 0 20px;
}

.pos-rank-head {
    min-height: 42px;
    border-bottom: 1px solid var(--pos-line);
    background:
        linear-gradient(90deg, rgba(168, 231, 106, .24), rgba(245, 198, 83, .16), rgba(255, 255, 255, 0)),
        rgba(248, 249, 246, .9);
    color: var(--pos-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pos-rank-row {
    min-height: 62px;
    border-bottom: 1px solid var(--pos-line);
}

.pos-rank-row:last-child {
    border-bottom: 0;
}

.pos-rank-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    border-radius: 999px;
    background: rgba(21, 23, 25, .06);
    color: var(--pos-soft);
    font-size: 13px;
    font-weight: 800;
}

.pos-rank-row em {
    overflow: hidden;
    color: var(--pos-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-section--competitors {
    background:
        linear-gradient(180deg, rgba(168, 231, 106, .16), rgba(255, 255, 255, 0) 155px),
        rgba(255, 255, 255, .72);
}

.pos-competitor-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.15fr) minmax(180px, 1.4fr) 96px 78px;
    gap: 16px;
    align-items: center;
    min-height: 64px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--pos-line);
}

.pos-competitor-row--us {
    background: linear-gradient(90deg, rgba(168, 231, 106, .22), rgba(255, 255, 255, 0));
}

.pos-competitor-row--above {
    background: linear-gradient(90deg, rgba(255, 241, 241, .86), rgba(255, 255, 255, 0));
}

.pos-competitor-row--below {
    background: linear-gradient(90deg, rgba(227, 243, 241, .78), rgba(255, 255, 255, 0));
}

.pos-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(21, 23, 25, .08);
}

.pos-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(245, 198, 83, .24), #d7ad44);
}

.pos-competitor-row--us .pos-meter i {
    background: linear-gradient(90deg, var(--pos-green), #dff7c8);
}

.pos-competitor-row b {
    color: var(--pos-ink);
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.pos-competitor-row em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 26px;
    border-radius: 999px;
    background: rgba(21, 23, 25, .07);
    color: var(--ink2);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.pos-competitor-row--above em {
    background: var(--pos-red-soft);
    color: var(--pos-red);
}

.pos-competitor-row--below em,
.pos-competitor-row--us em {
    background: rgba(168, 231, 106, .24);
    color: #2a5c12;
}

.pos-empty-line {
    margin: 0;
    padding: 16px 20px;
    color: var(--pos-muted);
    font-size: 12.5px;
    font-weight: 750;
}

@media (max-width: 1120px) {
    .pos-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-grid {
        grid-template-columns: 1fr;
    }

    .pos-panel--focus {
        min-height: auto;
    }

    .pos-trend {
        display: grid;
        grid-template-columns: 190px minmax(220px, .8fr) minmax(240px, .9fr);
        align-items: center;
    }

    .pos-trend-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-trend-foot {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    .pos-hero {
        grid-template-columns: 1fr;
    }

    .pos-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-panel-head {
        flex-direction: column;
    }

    .pos-panel-head p {
        max-width: none;
        text-align: left;
    }

    .pos-competitor-row {
        grid-template-columns: minmax(170px, 1fr) minmax(140px, 1fr) 82px 70px;
    }
}

@media (max-width: 720px) {
    .pos-shell {
        padding: 18px 16px 30px;
    }

    .pos-title {
        font-size: 32px;
    }

    .pos-hero-main,
    .pos-live-card,
    .pos-stat,
    .pos-panel-head {
        padding: 18px;
    }

    .pos-overview {
        grid-template-columns: 1fr;
    }

    .pos-table-head {
        display: none;
    }

    .pos-table-row {
        grid-template-columns: 1fr auto;
        gap: 9px 12px;
        padding: 14px 18px;
    }

    .pos-table-row .pos-pill {
        grid-column: 2;
        grid-row: 1;
    }

    .pos-table-row b,
    .pos-table-row em {
        grid-column: auto;
    }

    .pos-trend {
        display: flex;
        flex-direction: column;
    }

    .pos-trend-kpis {
        grid-template-columns: 1fr;
    }

    .pos-competitor-row {
        grid-template-columns: 1fr auto;
    }

    .pos-competitor-row .pos-meter {
        grid-column: 1 / -1;
    }

    .pos-competitor-row b {
        text-align: left;
    }
}

/* ════════════════════════════════════════════════════════════
   ПРИВЕТСТВИЕ / НАСТРОЙКА ОТСЛЕЖИВАНИЯ (pos-welcome-*) и
   МИНИ-ГЕНЕРАЦИЯ ПОЗИЦИЙ (pos-gen-*). Та же архитектура, что у
   ИИ Аудита (ia-welcome-*/ia-gen-*), свой цвет через --pos-*.
   ════════════════════════════════════════════════════════════ */

/* ── Кнопка "Настроить отслеживание" в шапке готового отчёта ── */
.pos-hero-main-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pos-config-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 9px 15px;
    margin-top: 2px;
    border-radius: 999px;
    border: 1px solid rgba(17, 18, 23, .12);
    background: rgba(255, 255, 255, .6);
    color: var(--pos-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pos-config-btn:hover { border-color: rgba(17, 18, 23, .28); background: #fff; }

/* ── Приветствие / настройка ── */
/* Хиро — фиксированной высоты, не растёт: текст слева + крупный портрет
   персонажа справа. Настройка конкурентов/ключей вынесена в отдельную
   секцию ниже (.pos-welcome-config), которая свободно растёт по числу
   чипов, не ломая пропорции hero. */
.pos-welcome-hero {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 40px 44px;
    margin-bottom: 20px;
    border-radius: 20px;
    border: 1px solid var(--pos-line);
    background:
        radial-gradient(circle at 82% 10%, rgba(168, 231, 106, .4), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(248, 249, 246, .74));
    box-shadow: 0 1px 0 rgba(17, 18, 23, .035);
}

.pos-welcome-hero-text {
    flex: 1;
    min-width: 0;
}

.pos-welcome-hero-visual {
    position: relative;
    flex-shrink: 0;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-welcome-hero-visual::before {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 231, 106, .5) 0%, rgba(168, 231, 106, 0) 72%);
    animation: posWelcomeGlowPulse 3.2s ease-in-out infinite;
}

@keyframes posWelcomeGlowPulse {
    0%, 100% { opacity: .7; transform: scale(.94); }
    50%      { opacity: 1;  transform: scale(1.06); }
}

/* Тема персонажа на "Позициях" — не орб ИИ Аудита, а радар: тонкое кольцо
   со сканирующим лучом (мониторинг выдачи) + пара орбитальных точек-сигналов,
   которые по-настоящему облетают вокруг персонажа по кругу — вместо
   мерцающих на месте искр, как у аудита. Персонаж сам стоит неподвижно,
   жизнь вокруг него добавляют вращения. */
.pos-welcome-radar-ring {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    border: 1.5px solid rgba(168, 231, 106, .22);
}

.pos-welcome-radar-sweep {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--pos-green);
    border-right-color: rgba(168, 231, 106, .4);
    animation: posWelcomeRadarSpin 3.4s linear infinite;
}

@keyframes posWelcomeRadarSpin {
    to { transform: rotate(360deg); }
}

.pos-welcome-orbit {
    position: absolute;
    inset: 0;
    animation: posWelcomeOrbitSpin linear infinite;
}
.pos-welcome-orbit--1 { animation-duration: 6s; }
.pos-welcome-orbit--2 { animation-duration: 9s; animation-direction: reverse; }

.pos-welcome-orbit i {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pos-green);
    box-shadow: 0 0 9px rgba(168, 231, 106, .8);
    transform: translateX(-50%);
}
.pos-welcome-orbit--2 i {
    top: auto;
    bottom: 9%;
    width: 5px;
    height: 5px;
    opacity: .7;
}

@keyframes posWelcomeOrbitSpin {
    to { transform: rotate(360deg); }
}

.pos-welcome-mascot {
    position: relative;
    width: 178px;
    height: auto;
    filter: drop-shadow(0 20px 28px rgba(17, 18, 23, .18));
}

.pos-welcome-title {
    max-width: 560px;
    margin: 14px 0 10px;
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 780;
    line-height: 1.16;
}

.pos-welcome-desc {
    max-width: 480px;
    margin: 0 0 26px;
    color: var(--pos-text-soft);
    font-size: 14px;
    line-height: 1.65;
}

/* ── Настройка отслеживания: отдельная секция, растёт свободно ── */
.pos-welcome-config {
    margin-bottom: 24px;
    border-radius: 20px;
    border: 1px solid var(--pos-line);
    background: var(--pos-surface);
    box-shadow: 0 1px 0 rgba(17, 18, 23, .035);
    overflow: hidden;
}

.pos-welcome-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 26px;
    padding: 24px 26px 28px;
}

.pos-welcome-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--pos-ink);
    font-size: 12.5px;
    font-weight: 800;
}

.pos-welcome-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.pos-welcome-input-row input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--pos-line);
    background: #fff;
    color: var(--pos-ink);
    font-family: inherit;
    font-size: 13px;
}
.pos-welcome-input-row input:focus {
    outline: none;
    border-color: var(--pos-green-line);
    box-shadow: 0 0 0 3px var(--pos-green-soft);
}

.pos-welcome-input-row button {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: var(--pos-ink);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .15s;
}
.pos-welcome-input-row button:hover { opacity: .88; }

.pos-welcome-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 0;
}
.pos-welcome-chips:empty { display: none; }

.pos-welcome-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--pos-line);
    color: var(--pos-ink);
    font-size: 12px;
    font-weight: 700;
}

.pos-welcome-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(17, 18, 23, .07);
    color: var(--pos-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.pos-welcome-chip button:hover { background: var(--pos-red-soft); color: var(--pos-red); }

.pos-welcome-suggest-btn {
    margin-top: 2px;
    padding: 7px 14px;
    border: 1.5px dashed var(--pos-green-line);
    border-radius: 999px;
    background: var(--pos-green-soft);
    color: var(--pos-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .15s;
}
.pos-welcome-suggest-btn:hover { opacity: .85; }
.pos-welcome-suggest-btn:disabled { opacity: .6; cursor: default; }

.pos-welcome-suggest {
    margin-top: 10px;
}
.pos-welcome-suggest-label {
    display: block;
    margin-bottom: 6px;
    color: var(--pos-muted);
    font-size: 11.5px;
    font-weight: 700;
}
.pos-welcome-suggest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.pos-welcome-suggest-chip {
    padding: 6px 12px;
    border: 1px dashed var(--pos-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pos-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pos-welcome-suggest-chip:hover {
    background: var(--pos-green-soft);
    border-color: var(--pos-green-line);
}

.pos-welcome-note {
    margin: 0;
    max-width: 620px;
    color: var(--pos-muted);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
}

.pos-welcome-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 480px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--pos-orange-soft);
    color: #9a3412;
}
.pos-welcome-warn svg { flex-shrink: 0; margin-top: 1px; }
.pos-welcome-warn span { font-size: 12.5px; line-height: 1.5; font-weight: 600; }

.pos-welcome-acts { margin-bottom: 10px; }

.pos-welcome-btn-primary {
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    background: var(--pos-ink);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.pos-welcome-btn-primary:hover    { transform: translateY(-1px); opacity: .92; }
.pos-welcome-btn-primary:disabled { opacity: .6; cursor: default; transform: none; }

.pos-welcome-hint {
    display: block;
    color: var(--pos-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.pos-welcome-grid-label {
    margin: 0 0 12px 2px;
}

.pos-welcome-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

/* Блок "Что отслеживаем" без сайта (buyer-tabs/welcome.php) — не отдельные
   карточки, а простые колонки с разделителем, как обычные поля этой же
   панели (.pos-welcome-config уже даёт фон/скругление, дублировать не нужно) */
.pos-welcome-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 26px;
    padding: 24px 26px 28px;
}

.pos-welcome-preview-item + .pos-welcome-preview-item {
    padding-left: 26px;
    border-left: 1px solid var(--pos-line);
}

.pos-welcome-preview-name {
    display: block;
    margin-bottom: 6px;
    color: var(--pos-ink);
    font-size: 12.5px;
    font-weight: 800;
}

.pos-welcome-preview-item p {
    margin: 0;
    color: var(--pos-text-soft);
    font-size: 12.5px;
    line-height: 1.55;
}

.pos-welcome-feature {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid var(--pos-line);
    background: var(--pos-surface);
    box-shadow: 0 1px 0 rgba(17, 18, 23, .035);
}

.pos-welcome-feature-name {
    display: block;
    margin-bottom: 6px;
    color: var(--pos-ink);
    font-size: 13px;
    font-weight: 800;
}

.pos-welcome-feature p {
    margin: 0;
    color: var(--pos-text-soft);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ── Мини-генерация позиций ── */
.pos-gen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: 20px;
}

.pos-gen-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 40px;
    border-radius: 24px;
    border: 1px solid var(--pos-line);
    background: var(--pos-surface-solid);
    box-shadow: 0 24px 60px rgba(17, 18, 23, .08);
}

.pos-gen-orb-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.pos-gen-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 231, 106, .55) 0%, rgba(168, 231, 106, 0) 70%);
    animation: posGenGlowPulse 2.4s ease-in-out infinite;
}
@keyframes posGenGlowPulse {
    0%, 100% { opacity: .5; transform: scale(.9); }
    50%      { opacity: 1;  transform: scale(1.1); }
}

.pos-gen-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid var(--pos-green);
    animation: posGenRingSpin 2.2s linear infinite;
}
.pos-gen-ring--1 { inset: 0; opacity: .4; }
.pos-gen-ring--2 { inset: -14px; opacity: .18; animation-direction: reverse; animation-duration: 3s; }
@keyframes posGenRingSpin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.06); }
    to   { transform: rotate(360deg) scale(1); }
}

.pos-gen-spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pos-green);
    box-shadow: 0 0 8px rgba(168, 231, 106, .85);
    opacity: 0;
    animation: posGenSparkTwinkle 2.6s ease-in-out infinite;
}
.pos-gen-spark--1 { top: 2%;  left: 82%; animation-delay: 0s; }
.pos-gen-spark--2 { top: 74%; left: 4%;  animation-delay: .85s; }
.pos-gen-spark--3 { top: 84%; left: 84%; animation-delay: 1.7s; }
@keyframes posGenSparkTwinkle {
    0%, 65%, 100% { opacity: 0; transform: scale(.4); }
    32%           { opacity: 1; transform: scale(1); }
}

.pos-gen-orb-core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-gen-orb-mascot {
    width: 66px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 16px rgba(49, 93, 32, .28));
}

.pos-gen-title {
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 19px;
    font-weight: 800;
}

.pos-gen-sub {
    margin-top: 4px;
    margin-bottom: 22px;
    color: var(--pos-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.pos-gen-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 24px;
}

.pos-gen-progress {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: rgba(17, 18, 23, .07);
    overflow: hidden;
}

.pos-gen-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #c3f08f, #6fae3a);
    transition: width .5s ease;
}

.pos-gen-progress-pct {
    min-width: 34px;
    color: var(--pos-ink);
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.pos-gen-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
}

.pos-gen-steps span {
    position: relative;
    padding-left: 18px;
    color: var(--pos-text-soft);
    font-size: 12.5px;
    font-weight: 600;
}
.pos-gen-steps span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pos-green);
}

/* ── Мини-генерация: ошибка ── */
.pos-gen-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px;
    color: var(--pos-red);
}
.pos-gen-error-title {
    margin-top: 4px;
    color: var(--pos-ink);
    font-size: 15px;
    font-weight: 800;
}
.pos-gen-error-text {
    max-width: 320px;
    margin: 0 0 14px;
    color: var(--pos-muted);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ── Адаптив ── */
@media (max-width: 900px) {
    .pos-welcome-hero { flex-direction: column; align-items: stretch; text-align: center; }
    .pos-welcome-hero-visual { width: 100%; height: 160px; order: -1; }
    .pos-welcome-mascot { width: 130px; }
    .pos-welcome-title,
    .pos-welcome-desc { max-width: none; }
    .pos-welcome-inputs { grid-template-columns: 1fr; }
    .pos-welcome-grid { grid-template-columns: repeat(2, 1fr); }
    .pos-welcome-preview { grid-template-columns: 1fr; }
    .pos-welcome-preview-item + .pos-welcome-preview-item {
        padding-left: 0;
        border-left: none;
        padding-top: 18px;
        border-top: 1px solid var(--pos-line);
    }
}

@media (max-width: 640px) {
    .pos-welcome-hero { padding: 30px 24px; }
    .pos-welcome-grid { grid-template-columns: 1fr; }
    .pos-hero-main-top { flex-direction: column; }
}