/* Premium (PayWall) - единая дизайн-система платного пути.
 *
 * Принципы: один акцент (брендовый градиент) только там, где он означает
 * «премиум»; всё остальное - чёрное, серое, белое и воздух. Один знак ✦
 * (4-лучевая искра, inline SVG) сопровождает премиум везде: бейдж, гейдж,
 * модалка, студия, кабинет - чтобы глаз узнавал его с первого раза.
 * Мобильный вид основной: больше половины генераций идёт с телефонов.
 */

:root {
    --pw-ink: #1d1d1f;
    --pw-muted: #6e6e73;
    --pw-line: #e6e6eb;
    --pw-canvas: #f5f5f7;
    --pw-surface: #ffffff;
    --pw-soft: #f4f4f7;
    --pw-accent: #5b5fd6;
    --pw-accent-soft: #eeeefb;
    --pw-ok: #1f7a4d;
    --pw-ok-soft: #e7f5ec;
    --pw-warn: #b9531b;
    --pw-warn-soft: #fff3e8;
    --pw-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --pw-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px rgba(29, 29, 31, .06);
    --pw-shadow-lift: 0 2px 6px rgba(0, 0, 0, .06), 0 24px 60px rgba(29, 29, 31, .12);
    --pw-r: 18px;
}

.pw-ico { width: 1em; height: 1em; flex: 0 0 auto; }

/* =====================================================================
   Знак Premium - один компонент, три размера
   ===================================================================== */
.tpl-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: var(--pw-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(102, 126, 234, .45), inset 0 0 0 1px rgba(255, 255, 255, .28);
    pointer-events: none;
    white-space: nowrap;
}
.tpl-badge svg { width: 11px; height: 11px; }
.tpl-badge.is-sm { padding: 3px 7px 3px 6px; font-size: 9.5px; gap: 3px; top: 6px; left: 6px; }
.tpl-badge.is-sm svg { width: 9px; height: 9px; }
.tpl-badge.is-static { position: static; pointer-events: auto; }
.tpl-badge[hidden] { display: none; }

/* Тонкая градиентная рамка вокруг премиум-карточек */
.pw-ring { position: relative; }
.pw-ring::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--pw-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: .75;
}

/* =====================================================================
   Гейдж «Шанс трудоустройства» - сигнатурный элемент
   ===================================================================== */
.sc {
    background: var(--pw-surface);
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-r);
    padding: 18px 18px 16px;
    box-shadow: var(--pw-shadow);
    font-family: inherit;
    color: var(--pw-ink);
}
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-label { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.sc-max { font-size: 12px; color: var(--pw-muted); white-space: nowrap; }
.sc-num {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 6px 0 10px;
    font-variant-numeric: tabular-nums;
}
.sc-pct { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.sc-unit { font-size: 18px; font-weight: 500; color: var(--pw-muted); }

/* Дорожка: бесплатная часть заполняется по мере ввода, премиум-сегмент
   отделён зазором и заштрихован - «зарезервировано», а не «недоступно». */
.sc-track { display: flex; gap: 4px; height: 10px; }
.sc-free { flex: 0 0 var(--sc-free, 100%); background: #ececf1; border-radius: 999px; overflow: hidden; }
.sc-prem {
    flex: 1 1 auto;
    border-radius: 999px;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #e6e3f7 0 4px, #f4f2fc 4px 8px);
}
.sc-fill, .sc-prem-fill {
    height: 100%;
    width: 0;
    background: var(--pw-grad);
    border-radius: 999px;
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.sc-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--pw-muted); line-height: 1.45; }

.sc-premium { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pw-line); }
.sc-premium-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pw-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.sc-premium-head .pw-ico { font-size: 12px; }
.sc-total { margin-left: auto; color: var(--pw-muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sc-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.sc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    transition: background .2s ease;
}
.sc-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pw-soft);
    color: var(--pw-muted);
    flex: 0 0 auto;
    transition: background .25s ease, color .25s ease;
}
.sc-dot svg { width: 11px; height: 11px; }
.sc-text { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.sc-tag {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pw-accent);
    background: var(--pw-accent-soft);
    border-radius: 999px;
    padding: 2px 7px;
    margin-left: 6px;
    vertical-align: 1px;
}
.sc-delta { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--pw-muted); font-weight: 600; }
.sc-item.is-open .sc-dot { background: var(--pw-ok-soft); color: var(--pw-ok); }
.sc-item.is-open .sc-delta { color: var(--pw-ok); }
.sc-item.is-wanted { background: var(--pw-accent-soft); }
.sc-item.is-wanted .sc-dot { background: var(--pw-grad); color: #fff; }
.sc-cta {
    margin-top: 12px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--pw-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .15s ease, background .15s ease;
}
.sc-cta:hover { background: #000; transform: translateY(-1px); }
.sc-cta:focus-visible, .st-btn:focus-visible, .pw-cta:focus-visible, .st-tpl:focus-visible { outline: 3px solid rgba(102, 126, 234, .45); outline-offset: 2px; }
.sc.sc-bump { animation: sc-bump .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes sc-bump { 0% { transform: scale(1); } 35% { transform: scale(1.025); } 100% { transform: scale(1); } }

/* =====================================================================
   Конструктор: карточки шаблонов, выбранный шаблон, кнопка
   ===================================================================== */
.template-option { position: relative; }
.template-option.is-premium { overflow: visible; }

.ct-thumb { position: relative; display: inline-block; line-height: 0; }
.ct-thumb .tpl-badge { top: auto; bottom: -13px; left: 50%; transform: translateX(-50%); }
.current-template.is-premium { position: relative; }
/* Бейдж висит на кромке листа, заголовок и подпись - с воздухом под ним:
   три строки подряд без интервалов читались как одна каша. */
.current-template.is-premium h3 { margin-top: 30px; margin-bottom: 4px; }
.ct-note {
    display: none;
    margin: 0 0 20px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pw-accent);
    font-weight: 500;
}
.current-template.is-premium .ct-note { display: block; }

.btn-primary.is-premium {
    background: var(--pw-grad) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary.is-premium .pw-ico { font-size: 15px; }

/* Модалка: чего не хватает резюме для покупки */
.pw-missing { background: var(--pw-warn-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.pw-missing-h { font-size: 13.5px; font-weight: 600; color: var(--pw-warn); margin: 0 0 8px; }
.pw-missing-p { font-size: 12.5px; color: var(--pw-muted); margin: 0 0 10px; line-height: 1.45; }
.pw-missing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pw-missing li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pw-ink); }
.pw-missing li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pw-warn); flex: 0 0 auto; }
/* Конструктор в режиме дозаполнения премиум-заказа */
.pw-editbar { display: flex; align-items: center; gap: 10px; background: var(--pw-accent-soft); color: var(--pw-ink); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; }
.pw-editbar .pw-ico { color: var(--pw-accent); font-size: 16px; }
.pw-editbar a { margin-left: auto; color: var(--pw-accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
/* Студия: подсказка про пустое резюме + ссылка на дозаполнение */
.st-thin { background: var(--pw-warn-soft); border-radius: 14px; padding: 14px 16px; margin-top: 14px; }
.st-thin-h { font-size: 14px; font-weight: 600; color: var(--pw-warn); margin: 0 0 4px; }
.st-thin-p { font-size: 13px; color: var(--pw-ink); margin: 0 0 10px; line-height: 1.45; }
.st-edit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--pw-accent); text-decoration: none; }
.st-edit:hover { text-decoration: underline; }

/* Остаток бесплатных скачиваний под кнопками конструктора */
.pw-usage { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--pw-muted); }
.pw-usage.is-out { color: var(--pw-warn); }
.pw-notice { margin: -4px 0 14px; font-size: 13px; line-height: 1.45; color: var(--pw-warn); background: var(--pw-warn-soft); border-radius: 12px; padding: 10px 12px; text-align: center; }

/* =====================================================================
   Модалка покупки
   ===================================================================== */
.pw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 31, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1200;
    opacity: 0;
    transition: opacity .2s ease;
    overflow-y: auto;
}
.pw-overlay[hidden] { display: none; }
.pw-overlay.show { opacity: 1; }
.pw-modal {
    background: var(--pw-surface);
    border-radius: 22px;
    width: 100%;
    max-width: 440px;
    padding: 26px 24px 22px;
    position: relative;
    box-shadow: var(--pw-shadow-lift);
    animation: pw-in .26s cubic-bezier(.2, .8, .2, 1);
    max-height: 94vh;
    overflow-y: auto;
    color: var(--pw-ink);
}
/* iOS: vh = экран без панелей браузера, модалка уезжала за верх; dvh - реальная высота */
@supports (height: 1dvh) { .pw-modal { max-height: 94dvh; } }
@keyframes pw-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.pw-close {
    /* Внутри липкой шапки: отступы совпадают с полем модалки (шапка перекрывает его
       отрицательными margin), по вертикали - по центру строки заголовка */
    position: absolute;
    top: 21px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--pw-soft);
    color: var(--pw-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.pw-close svg { width: 14px; height: 14px; display: block; }
.pw-close:hover { color: var(--pw-ink); }
/* Шапка липкая: крестик виден при любой длине модалки и любой прокрутке.
   Отрицательные поля перекрывают padding самой модалки. */
.pw-head { position: sticky; top: -26px; z-index: 3; text-align: center; margin: -26px -24px 12px; padding: 22px 24px 8px; background: var(--pw-surface); }
/* Низ липкий: кнопка оплаты и бесплатная строка всегда на экране */
.pw-foot { position: sticky; bottom: -22px; z-index: 2; margin: 0 -24px -22px; padding: 10px 24px 22px; background: var(--pw-surface); box-shadow: 0 -14px 14px -14px rgba(29, 29, 31, .10); }
/* Бесплатный путь - вторичная кнопка того же ряда, что и оплата, но тихая */
.pw-alt-btn { display: block; width: 100%; margin-top: 10px; padding: 12px 16px; border: 1.5px solid var(--pw-line); border-radius: 14px; background: var(--pw-surface); color: var(--pw-ink); font: 600 14.5px/1.25 inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pw-alt-btn:hover { border-color: var(--pw-ink); background: var(--pw-soft); }
.pw-alt { margin: 8px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--pw-muted); }
.pw-alt a { color: var(--pw-ink); text-decoration: underline; text-decoration-color: var(--pw-line); text-underline-offset: 3px; }
.pw-alt a:hover { text-decoration-color: var(--pw-ink); }
.pw-alt-or { color: var(--pw-muted); }
.pw-alt-muted { color: var(--pw-muted); }
.pw-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pw-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
}
.pw-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.pw-title .pw-ico { color: var(--pw-accent); font-size: 18px; }
.pw-sub { font-size: 14px; color: var(--pw-muted); margin: 0; line-height: 1.45; }

.pw-tpl {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pw-soft);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.pw-tpl-img { width: 30px; aspect-ratio: 210 / 297; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.pw-tpl-n { font-size: 13.5px; font-weight: 600; }
.pw-tpl .tpl-badge { margin-left: auto; }

.pw-price { text-align: center; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.pw-amount { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.pw-cur { font-size: 15px; color: var(--pw-muted); margin-left: 6px; }
.pw-once { display: block; font-size: 12px; color: var(--pw-muted); margin-top: 5px; }

.pw-features { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.pw-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; padding: 7px 0; }
.pw-features .sc-dot { width: 20px; height: 20px; background: var(--pw-ok-soft); color: var(--pw-ok); margin-top: 1px; }
.pw-features .sc-dot svg { width: 10px; height: 10px; }

.pw-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--pw-grad);
    color: #fff;
    border: 0;
    border-radius: 14px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(102, 126, 234, .35);
    transition: transform .15s ease, opacity .15s ease;
    text-decoration: none;
}
.pw-cta:hover { transform: translateY(-1px); }
.pw-cta:disabled { opacity: .6; cursor: default; transform: none; }
.pw-free {
    display: block;
    width: 100%;
    margin-top: 6px;
    background: none;
    border: 0;
    color: var(--pw-muted);
    font-size: 13.5px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
}
.pw-free:hover { color: var(--pw-ink); background: var(--pw-soft); }
.pw-free small { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
.pw-secure { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--pw-muted); line-height: 1.5; }
.pw-sandbox, .pw-error { margin-top: 10px; text-align: center; font-size: 12.5px; border-radius: 10px; padding: 8px 10px; }
.pw-sandbox { color: var(--pw-warn); background: var(--pw-warn-soft); }
.pw-error { color: #b03030; background: #fdf0f0; }
.pw-error[hidden] { display: none; }

/* Сравнение «бесплатно / премиум»: человек видит, что именно теряет */
/* «Chet elga»: два тарифа-карточки, выбор языка, таблица на три столбца */
.pw-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.pw-tier { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--pw-line); border-radius: 14px; background: var(--pw-surface); color: var(--pw-ink); cursor: pointer; text-align: left; font: inherit; transition: border-color .15s ease, background .15s ease; }
.pw-tier:hover { border-color: var(--pw-ink); }
.pw-tier.is-on { border-color: var(--pw-accent); background: var(--pw-accent-soft); }
.pw-tier-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.pw-tier-name .pw-ico { width: 14px; height: 14px; color: var(--pw-accent); }
.pw-tier-price { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pw-tier-sub { font-size: 11.5px; line-height: 1.35; color: var(--pw-muted); }
.pw-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--pw-muted); }
.pw-lang select { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--pw-line); border-radius: 10px; background: var(--pw-surface); color: var(--pw-ink); }
/* тот же селект после js/select.js - компактный триггер */
.pw-lang .sel { width: auto; min-width: 170px; max-width: 60%; }
.pw-lang .sel-trigger { font-size: 14px; padding: 6px 8px 6px 10px; border-color: var(--pw-line); border-radius: 10px; color: var(--pw-ink); }
.pw-lang .sel-chev { width: 16px; height: 16px; }
.pw-cmp.is-3 th, .pw-cmp.is-3 td { padding-left: 4px; padding-right: 4px; font-size: 12px; }
.pw-cmp.is-3 th.is-prem, .pw-cmp.is-3 td.is-prem { background: transparent; color: var(--pw-muted); font-weight: 500; }
.pw-cmp.is-3 th.is-on, .pw-cmp.is-3 td.is-on { background: var(--pw-accent-soft); color: var(--pw-ink); font-weight: 600; }
.pw-cmp.is-3 th.is-on { color: var(--pw-accent); border-radius: 10px 10px 0 0; padding-top: 8px; }
@media (max-width: 400px) { .pw-tiers { grid-template-columns: 1fr; } }

.pw-cmp { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 14px; font-size: 13px; }
.pw-cmp th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--pw-muted); font-weight: 600; padding: 0 8px 6px; text-align: center; }
.pw-cmp th:first-child { text-align: left; padding-left: 0; }
.pw-cmp td { padding: 8px 8px; border-top: 1px solid var(--pw-line); text-align: center; color: var(--pw-muted); line-height: 1.3; }
.pw-cmp td:first-child { text-align: left; color: var(--pw-ink); padding-left: 0; }
.pw-cmp .is-prem { background: var(--pw-accent-soft); color: var(--pw-ink); font-weight: 600; }
.pw-cmp th.is-prem { color: var(--pw-accent); border-radius: 10px 10px 0 0; padding-top: 8px; }
.pw-cmp tr:last-child td.is-prem { border-radius: 0 0 10px 10px; }
.pw-cmp .sc-dot { display: inline-grid; width: 20px; height: 20px; vertical-align: middle; }
.pw-cmp td.is-prem .sc-dot { background: var(--pw-ok-soft); color: var(--pw-ok); }
.pw-cmp .pw-no { color: #c9c9d1; font-size: 15px; line-height: 1; }

/* =====================================================================
   Кабинет: оплаченные премиум-резюме
   ===================================================================== */
.po { margin-bottom: 26px; }
.po-h {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pw-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 12px;
}
.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.po-card {
    background: var(--pw-surface);
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-r);
    padding: 14px;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    box-shadow: var(--pw-shadow);
    color: var(--pw-ink);
}
.po-thumb {
    position: relative;
    width: 74px;
    aspect-ratio: 210 / 297;
    border-radius: 8px;
    background: var(--pw-soft) center top / cover no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.po-body { min-width: 0; }
.po-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-role { color: var(--pw-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--pw-muted); }
.po-status { color: var(--pw-ok); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.po-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.po-ai { display: inline-flex; align-items: center; gap: 6px; }
.po-dots { display: inline-flex; gap: 3px; }
.po-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9d9e3; }
.po-dot.on { background: var(--pw-accent); }
.po-test { font-size: 10px; background: var(--pw-warn-soft); color: var(--pw-warn); border-radius: 999px; padding: 2px 7px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.po-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.po-btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .15s ease, background .15s ease;
}
.po-btn-primary { background: var(--pw-ink); color: #fff; }
.po-btn-primary:hover { background: #000; transform: translateY(-1px); }
.po-btn-ghost { background: var(--pw-soft); color: var(--pw-ink); }
.po-btn-ghost:hover { background: #ebebf0; }

/* =====================================================================
   Студия (payment.php)
   ===================================================================== */
.st-body { background: var(--pw-canvas); color: var(--pw-ink); }
.st {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 28px;
    align-items: start;
}
.st-preview { position: sticky; top: 84px; min-width: 0; }
.st-sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 210 / 297;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--pw-shadow-lift);
    overflow: hidden;
}
.st-sheet iframe {
    display: block;
    width: 794px;
    height: 1123px;
    border: 0;
    background: #fff;
    transform-origin: 0 0;
    transition: opacity .35s ease;
}
.st-sheet.is-loading iframe { opacity: .35; }
.st-sheet-cap { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--pw-muted); }

.st-panel { display: grid; gap: 14px; }
.st-card {
    background: var(--pw-surface);
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-r);
    padding: 18px;
    box-shadow: var(--pw-shadow);
}
.st-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pw-muted);
    margin: 0 0 10px;
}
.st-head { display: block; }
/* строка «PREMIUM REZYUME … пилюли» над именем: пилюли справа, при нехватке места переносятся с отступом */
.st-head-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.st-mark { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--pw-accent); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.st-mark .ic-flag { flex: 0 0 auto; width: 18px; height: 18px; display: block; }
.st-mark-abroad { color: var(--pw-ink); }
/* оплата: галочка + слово, один цвет, без плашки; плашка остаётся только у тестовых заказов */
.st-status { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }   /* не влезает - уходит на вторую строку вправо, без обрезки страны */
.st-status-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--pw-ok); white-space: nowrap; }
.st-status-ok svg { width: 12px; height: 12px; }
.st-name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 0; line-height: 1.15; }
.st-role { color: var(--pw-muted); font-size: 14px; margin: 3px 0 0; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pw-ok); background: var(--pw-ok-soft); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.st-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pill.is-test { color: var(--pw-warn); background: var(--pw-warn-soft); }

.st-ai-desc { font-size: 13.5px; color: var(--pw-muted); line-height: 1.5; margin: 0 0 14px; }
.st-btn {
    width: 100%;
    border: 0;
    border-radius: 13px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.st-btn:hover { transform: translateY(-1px); }
.st-btn:disabled { opacity: .55; cursor: default; transform: none; }
.st-btn-grad { background: var(--pw-grad); color: #fff; box-shadow: 0 8px 24px rgba(102, 126, 234, .3); }
.st-btn-ink { background: var(--pw-ink); color: #fff; }
.st-btn-ink:hover { background: #000; }
.st-btn-ghost { background: var(--pw-soft); color: var(--pw-ink); }
.st-btn-ghost:hover { background: #ebebf0; }
.st-btn + .st-btn { margin-top: 8px; }
.st-runs { margin: 10px 0 0; font-size: 12.5px; color: var(--pw-muted); text-align: center; }

/* Мини-гейдж в шапке студии: обещание «до 100%» закрывается здесь */
.st-score { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: var(--pw-muted); }
.st-score b { font-size: 15px; color: var(--pw-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.st-score-track { height: 6px; border-radius: 999px; background: #ececf1; overflow: hidden; margin-top: 6px; }
.st-score-fill { height: 100%; width: 0; background: var(--pw-grad); border-radius: 999px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* Результаты ИИ */
.st-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.st-stat { flex: 1; background: var(--pw-soft); border-radius: 12px; padding: 12px 14px; }
.st-stat b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-stat span { font-size: 12px; color: var(--pw-muted); }
.st-stat.is-added b { color: var(--pw-accent); }
.st-toggle { background: none; border: 0; color: var(--pw-accent); font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px 0; display: inline-flex; align-items: center; gap: 4px; }
.st-toggle:disabled { color: var(--pw-muted); cursor: default; }
/* «Chet elga» в студии: пилюля продукта, бейдж странового шаблона, письмо, чек-лист */
.st-pill.is-abroad { background: var(--pw-accent-soft); color: var(--pw-accent); }
.st-tpl .tpl-badge.is-country { background: var(--pw-ink); color: #fff; }
.st-seg-sm { margin-bottom: 10px; }
.st-letter-form, .st-letter-blocks { display: grid; gap: 10px; margin: 0 0 12px; }
.st-field { display: grid; gap: 4px; font-size: 12.5px; color: var(--pw-muted); }
.st-field input, .st-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.45; color: var(--pw-ink); padding: 9px 12px; border: 1px solid var(--pw-line); border-radius: 10px; background: var(--pw-surface); }
.st-field textarea { resize: vertical; min-height: 44px; }
.st-letter-blocks textarea[rows="4"] { min-height: 96px; }
.st-field input:focus, .st-field textarea:focus { outline: none; border-color: var(--pw-accent); box-shadow: 0 0 0 3px var(--pw-accent-soft); }
.st-letter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-letter-actions .st-btn { flex: 1 1 auto; margin: 0; }
.st-runs.is-err { color: #c0392b; }
.st-check-h { margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--pw-ink); }
.st-check { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--pw-ink); }
.st-check-note { color: var(--pw-muted); }
.st-disclaimer { text-align: left; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pw-line); }
.st-changes { display: grid; gap: 8px; margin-top: 8px; }
.st-changes[hidden] { display: none; }
.st-change { border: 1px solid var(--pw-line); border-radius: 12px; padding: 10px 12px; font-size: 13px; transition: opacity .2s ease; animation: st-rise .3s ease both; }
.st-change.is-off { opacity: .5; }
.st-change-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.st-change-field { font-weight: 600; font-size: 12.5px; }
.st-reason { font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 7px; background: var(--pw-accent-soft); color: var(--pw-accent); white-space: nowrap; }
.st-reason.is-added { background: var(--pw-ok-soft); color: var(--pw-ok); }
.st-undo { margin-left: auto; background: none; border: 0; color: var(--pw-muted); font-size: 12px; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.st-undo:hover { color: var(--pw-ink); }
.st-before { color: #9a3d3d; text-decoration: line-through; text-decoration-color: rgba(154, 61, 61, .35); white-space: pre-wrap; font-size: 12.5px; line-height: 1.45; }
.st-after { white-space: pre-wrap; margin-top: 4px; line-height: 1.45; }
.st-change.is-off .st-after { text-decoration: line-through; color: var(--pw-muted); }
.st-change.is-off .st-before { text-decoration: none; color: var(--pw-ink); }
@keyframes st-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Шаблоны и язык */
.st-tpls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.st-tpl { position: relative; min-width: 0; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; font: inherit; color: inherit; }
.st-tpl-img {
    display: block;
    width: 100%;
    aspect-ratio: 210 / 297;
    border-radius: 8px;
    background: var(--pw-soft) center top / cover no-repeat;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.st-tpl:hover .st-tpl-img { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.st-tpl.is-on .st-tpl-img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pw-accent); }
.st-tpl-name { display: block; font-size: 11px; color: var(--pw-muted); margin-top: 6px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tpl.is-on .st-tpl-name { color: var(--pw-ink); font-weight: 600; }
.st-tpl .tpl-badge { top: 5px; left: 5px; padding: 2px 6px 2px 5px; font-size: 8.5px; gap: 3px; }
.st-tpl .tpl-badge svg { width: 8px; height: 8px; }
.st-seg { display: flex; background: var(--pw-soft); border-radius: 11px; padding: 3px; }
.st-seg button { flex: 1; border: 0; background: none; padding: 8px; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--pw-muted); cursor: pointer; transition: all .15s ease; }
.st-seg button.is-on { background: #fff; color: var(--pw-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Перевод */
.st-seg button .st-seg-mark { display: inline-block; margin-left: 5px; font-size: 10px; opacity: .75; vertical-align: 1px; }
.st-seg button .st-seg-mark svg { width: 10px; height: 10px; vertical-align: -1px; }
.st-xlate { margin-top: 12px; }
.st-xlate:empty { display: none; }
.st-xlate-hint { margin: 8px 0 0; font-size: 12px; color: var(--pw-muted); text-align: center; }
.st-xlate-stale { margin: 0 0 10px; font-size: 12.5px; color: var(--pw-warn); background: var(--pw-warn-soft); border-radius: 10px; padding: 8px 10px; }

/* Процесс ИИ - видно, что сервис реально работает над ЭТИМ резюме */
.st-work-bar { height: 6px; border-radius: 999px; background: #ececf1; overflow: hidden; margin: 12px 0 16px; }
.st-work-fill { position: relative; height: 100%; width: 0; background: var(--pw-grad); border-radius: 999px; transition: width .7s ease; }
.st-work-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: st-shimmer 1.4s infinite; }
@keyframes st-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.st-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.st-stage { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--pw-muted); transition: color .3s ease; }
.st-stage-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #dcdce3; display: grid; place-items: center; flex: 0 0 auto; color: #fff; transition: all .3s ease; }
.st-stage-dot svg { width: 10px; height: 10px; opacity: 0; transform: scale(.4); transition: all .25s ease; }
.st-stage.is-active { color: var(--pw-ink); font-weight: 500; }
.st-stage.is-active .st-stage-dot { border-color: var(--pw-accent); animation: st-pulse 1.3s infinite; }
.st-stage.is-done { color: var(--pw-ink); }
.st-stage.is-done .st-stage-dot { background: var(--pw-grad); border-color: transparent; }
.st-stage.is-done .st-stage-dot svg { opacity: 1; transform: none; }
@keyframes st-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(102, 126, 234, .2); } 50% { box-shadow: 0 0 0 7px rgba(102, 126, 234, .06); } }
.st-live { margin-top: 12px; min-height: 20px; font-size: 12.5px; color: var(--pw-accent); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-live span { display: inline-block; animation: st-fade .35s ease; }
@keyframes st-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.st-work-hint { margin: 10px 0 0; font-size: 12px; color: var(--pw-muted); }

/* Ожидание/ошибка оплаты */
.st-state { max-width: 460px; margin: 60px auto; text-align: center; }
.st-state .st-card { padding: 30px 24px; }
.st-spinner { width: 30px; height: 30px; border: 3px solid #e7e7ee; border-top-color: var(--pw-accent); border-radius: 50%; margin: 0 auto 16px; animation: st-spin 1s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-state-h { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
.st-state-p { color: var(--pw-muted); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.st-state-ico { font-size: 34px; margin-bottom: 10px; }

/* Мобильный: одна колонка, превью между ИИ и шаблонами, док внизу */
.st-bar { display: none; }
@media (max-width: 960px) {
    /* minmax(0, 1fr), а не 1fr: iframe превью 794px иначе растягивает
       единственную колонку, и страница уезжает вправо */
    .st { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px 110px; }
    .st-card { min-width: 0; }
    .st-panel { display: contents; }
    .st-preview { position: static; order: 2; }
    .st-card { order: 1; }
    .st-card.st-c-tpl { order: 3; }
    .st-card.st-c-lang { order: 4; }
    .st-card.st-c-dl { display: none; }
    .st-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--pw-line);
        z-index: 50;
    }
    .st-name { font-size: 20px; }
}
@media (max-width: 600px) {
    .pw-overlay { padding: 10px; align-items: flex-end; }
    .pw-modal { padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px; max-height: 92vh; }
    @supports (height: 1dvh) { .pw-modal { max-height: 92dvh; } }
    .pw-head { top: -18px; margin: -18px -16px 10px; padding: 16px 16px 6px; }
    .pw-close { top: 15px; right: 16px; }
    .pw-foot { bottom: calc(-14px - env(safe-area-inset-bottom)); margin: 0 -16px calc(-14px - env(safe-area-inset-bottom)); padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); }
    .pw-amount { font-size: 30px; }
    .pw-cmp { font-size: 12.5px; }
    .pw-cmp td { padding: 7px 6px; }
    .pw-cta { padding: 14px 18px; font-size: 15px; }
    .pw-free { padding: 8px; }
    .sc-pct { font-size: 34px; }
    .po-card { grid-template-columns: 64px 1fr; }
    .po-thumb { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .pw-modal, .st-change, .st-live span { animation: none; }
    .sc.sc-bump { animation: none; }
    .st-work-fill::after, .st-stage.is-active .st-stage-dot { animation: none; }
    .sc-fill, .sc-prem-fill, .st-work-fill { transition: none; }
}

/* Word (DOCX) в студии - второй формат под основной кнопкой PDF */
.st-btn-docx { background: var(--pw-soft); color: var(--pw-ink); border: 1px solid rgba(0,0,0,.08); }
.st-btn-docx:hover { background: #ebebf0; }
.st-c-dl .st-runs + .st-btn { margin-top: 14px; }

/* Гостевой заказ в студии: заказ живёт в этом браузере, предлагаем закрепить */
.st-guest { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--pw-line); background: var(--pw-soft); }
.st-guest p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pw-ink); }
.st-guest-mail { color: var(--pw-muted); }
.st-guest .st-btn { align-self: flex-start; }
.pw-guest { display: block; margin-top: 4px; }

/* Возврат к оплаченному заказу над формой конструктора */
.order-return { padding: 16px 0 0; }
.order-return-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--pw-surface); border: 1px solid var(--pw-line); border-radius: 16px; padding: 12px 16px; text-decoration: none; color: var(--pw-ink); box-shadow: var(--pw-shadow); margin-bottom: 8px; transition: transform .18s ease, box-shadow .18s ease; }
.order-return-card:hover { transform: translateY(-1px); box-shadow: var(--pw-shadow-lift); color: var(--pw-ink); }
.order-return-card.is-paid { border-color: transparent; background: linear-gradient(var(--pw-surface), var(--pw-surface)) padding-box, var(--pw-grad) border-box; border: 2px solid transparent; }
.order-return-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--pw-grad); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.order-return-card.is-pending .order-return-badge { background: var(--pw-warn-soft); color: var(--pw-warn); }
.order-return-badge svg { width: 11px; height: 11px; }
.order-return-who { flex: 1 1 200px; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-return-cta { font-weight: 600; font-size: 14px; color: var(--pw-accent); white-space: nowrap; }
.order-return-hint { margin: 2px 4px 0; font-size: 12px; color: var(--pw-muted); }
@media (max-width: 719px) { .order-return-card { padding: 12px 14px; } .order-return-who { flex-basis: 100%; white-space: normal; } }

/* Вошедший: оплаченные заказы - одна тихая строка вместо карточек (карточки - гостю и незавершённой оплате) */
.order-return.is-mini { padding: 8px 0 0; }
.order-return-mini { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--pw-soft); color: var(--pw-muted); font-size: 12.5px; text-decoration: none; margin-bottom: 4px; }
.order-return-mini .pw-ico { width: 12px; height: 12px; color: var(--pw-accent); }
.order-return-mini-cta { color: var(--pw-ink); font-weight: 600; }
.order-return-mini:hover { color: var(--pw-ink); }
/* «Chet elga»: карточка пакета документов в студии */
.st-pkg { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.st-pkg li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--pw-line); border-radius: 12px; font-size: 13.5px; }
.st-pkg li > span:not(.st-pkg-dot) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.st-pkg b { font-weight: 600; }
.st-pkg small { font-size: 12px; color: var(--pw-muted); }
.st-pkg-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pw-soft); color: var(--pw-muted); flex: 0 0 auto; }
.st-pkg-dot svg { width: 11px; height: 11px; }
.st-pkg-dot.is-ok { background: var(--pw-ok-soft); color: var(--pw-ok); }
.st-pkg-dot.is-wait { background: var(--pw-warn-soft); position: relative; }
.st-pkg-dot.is-wait::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pw-warn); animation: st-pulse 1.2s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* ожидание автоперевода: спиннер + текст, кнопка пакета заблокирована; is-done - «готово», is-err - повтор */
.st-pkg-wait { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--pw-accent-soft); color: var(--pw-ink); font-size: 13.5px; line-height: 1.4; }
.st-pkg-wait[hidden] { display: none; }
.st-pkg-wait > span:not(.st-spin):not(.st-pkg-dot) { display: grid; gap: 2px; min-width: 0; }
.st-pkg-wait b { font-weight: 600; }
.st-pkg-wait small { font-size: 12px; color: var(--pw-muted); }
.st-pkg-wait.is-done { background: var(--pw-ok-soft); color: var(--pw-ok); }
.st-pkg-wait.is-err { background: var(--pw-warn-soft); }
.st-spin { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(102, 126, 234, .25); border-top-color: var(--pw-accent); animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
/* предложение апгрейда abroad → abroad_plus в карточке пакета */
.st-upsell { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(102, 126, 234, .55); background: var(--pw-accent-soft); }
.st-upsell > span { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.st-upsell b { font-size: 13.5px; font-weight: 600; color: var(--pw-ink); }
.st-upsell small { font-size: 12px; line-height: 1.4; color: var(--pw-muted); }
.st-upsell .st-btn { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .st-spin { animation: none; border-top-color: var(--pw-accent); } }
.st-pkg-link { flex: 0 0 auto; color: var(--pw-accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.st-check-details { margin-top: 12px; border-top: 1px solid var(--pw-line); padding-top: 10px; }
.st-check-details summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--pw-ink); }