/*
 * Кабинет клиента: страницы, шапка, подвал.
 * Свои Tailwind-классы в blade не попадают в CSS Filament, поэтому всё здесь.
 * Цвета берём из переменных Filament (--gray-*, --primary-*), чтобы работали обе темы.
 */

/* ---------- Главная кнопка — копия .ss-cta с sergeev.studio (bloki.css) ----------
   Градиентная «таблетка», тёмный текст, чёрный круг со стрелкой справа, блик раз в 4 с. */
.ss-cta { --ss-cta-krug: 40px; position: relative; isolation: isolate; overflow: hidden;
          display: inline-flex; align-items: center; justify-content: center; gap: 10px;
          min-block-size: 54px; padding-block: 7px; padding-inline: 28px calc(var(--ss-cta-krug) + 7px + 16px);
          border-radius: 999px; background: linear-gradient(90deg, #1affd3, #25cbc2); color: #0b0b0b !important;
          font-size: 15px; font-weight: 500; text-decoration: none;
          box-shadow: 0 10px 26px rgba(37, 203, 194, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
          transition: transform .25s ease, box-shadow .25s ease; }
.ss-cta::before { content: ''; position: absolute; inset-inline-end: 7px; inset-block-start: 50%; translate: 0 -50%;
                  inline-size: var(--ss-cta-krug); block-size: var(--ss-cta-krug); border-radius: 50%;
                  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat 50% 50% / 18px, #0b0b0b;
                  transition: transform .25s ease; }
.ss-cta--down::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v12M6 11l6 6 6-6M5 20h14'/%3E%3C/svg%3E"); }
.ss-cta--plus::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ss-cta::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 40%; z-index: -1; pointer-events: none;
                 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
                 transform: translateX(-160%) skewX(-20deg); animation: ss-blik 4s ease-in-out infinite; }
@media (hover: hover) {
    .ss-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37, 203, 194, .42), inset 0 1px 0 rgba(255, 255, 255, .5); }
    .ss-cta:hover::before { animation: ss-strelka .6s ease-in-out; }
}
.ss-cta:focus-visible { outline: 2px solid #0d8b84; outline-offset: 3px; }
.ss-cta svg { display: none; } /* иконки Filament внутри не нужны — стрелка в круге */
.ss-cta--sm { --ss-cta-krug: 34px; min-block-size: 46px; padding-inline: 16px calc(var(--ss-cta-krug) + 6px + 10px); font-size: 14px; white-space: nowrap; }
.ss-cta--sm::before { inset-inline-end: 6px; background-size: 16px, auto; }
@keyframes ss-blik { 0% { transform: translateX(-160%) skewX(-20deg); } 35%, 100% { transform: translateX(320%) skewX(-20deg); } }
@keyframes ss-strelka { 0% { background-position: 50% 50%, 0 0; } 45% { background-position: calc(50% + 30px) 50%, 0 0; }
                        46% { background-position: calc(50% - 30px) 50%, 0 0; } 100% { background-position: 50% 50%, 0 0; } }
@keyframes ss-strelka-down { 0% { background-position: 50% 50%, 0 0; } 45% { background-position: 50% calc(50% + 30px), 0 0; }
                             46% { background-position: 50% calc(50% - 30px), 0 0; } 100% { background-position: 50% 50%, 0 0; } }
@media (hover: hover) { .ss-cta--down:hover::before { animation-name: ss-strelka-down; } }
@media (prefers-reduced-motion: reduce) {
    .ss-cta::after, .ss-cta:hover::before { animation: none; }
    .ss-cta::after { display: none; }
}

/* Кнопка «Войти» (Filament) в том же стиле. */
.fi-simple-main .fi-sc-actions .fi-btn { position: relative; isolation: isolate; overflow: hidden; border-radius: 999px !important;
    min-height: 54px; padding-inline: 28px 63px; background: linear-gradient(90deg, #1affd3, #25cbc2) !important; color: #0b0b0b !important;
    box-shadow: 0 10px 26px rgba(37, 203, 194, .28), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .25s ease, box-shadow .25s ease; }
.fi-simple-main .fi-sc-actions .fi-btn svg { position: absolute; right: 7px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; padding: 11px;
    border-radius: 50%; background: #0b0b0b; color: #fff !important; }
@media (hover: hover) { .fi-simple-main .fi-sc-actions .fi-btn:hover { transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(37, 203, 194, .42), inset 0 1px 0 rgba(255, 255, 255, .5); } }

/* ---------- Общие элементы страниц ---------- */

/* «← Назад» над заголовком каждой страницы кабинета. */
.ss-back { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-bottom: 1rem;
           font-size: .9375rem; font-weight: 500; color: var(--gray-500); transition: color .15s; }
.ss-back svg { width: 1.125rem; height: 1.125rem; transition: transform .2s; }
.ss-back:hover { color: var(--primary-600); }
.dark .ss-back:hover { color: var(--primary-400); }
.ss-back:hover svg { transform: translateX(-3px); }

.pp-list { display: grid; gap: 1.5rem; }
.pp-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.pp-lead { max-width: 46rem; color: var(--gray-600); line-height: 1.6; }
.dark .pp-lead { color: var(--gray-400); }
.pp-meta { font-size: .875rem; opacity: .75; }
.pp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.pp-version { font-size: 1.125rem; font-weight: 600; }
.pp-desc { margin-bottom: 1rem; line-height: 1.55; }
.pp-note { margin-top: 1rem; padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem;
           background: color-mix(in oklab, var(--warning-500) 12%, transparent); }
.pp-link { font-weight: 500; color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
.dark .pp-link { color: var(--primary-400); }

.pp-history { margin-top: 1.25rem; }
.pp-history summary { cursor: pointer; font-size: .875rem; font-weight: 500; }
.pp-history ol { margin-top: .75rem; display: grid; gap: .875rem; }
.pp-history li { padding-left: .875rem; border-left: 2px solid color-mix(in oklab, currentColor 15%, transparent); }
.pp-history li.is-locked { opacity: .55; }
.pp-changelog { margin-top: .25rem; font-size: .875rem; white-space: pre-line; }

.pp-key { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid color-mix(in oklab, currentColor 10%, transparent); }
.pp-key-value { font-family: var(--mono-font-family), ui-monospace, monospace; font-size: .875rem; word-break: break-all;
                padding: .5rem .75rem; border-radius: .5rem; background: color-mix(in oklab, currentColor 6%, transparent); }

/* Каталог */
.pp-prices { display: grid; gap: .5rem; margin-bottom: 1rem; }
.pp-prices li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .625rem; }
.pp-price { font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.375rem; font-weight: 700; }
.pp-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Шапка страницы с декоративной плиткой (Каталог) ---------- */

.pp-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 11rem; }
.pp-hero-text { position: relative; z-index: 1; max-width: 46rem; }
.pp-hero-title { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.pp-hero-lead { margin-top: .875rem; font-size: 1.0625rem; line-height: 1.6; color: var(--gray-600); }
.dark .pp-hero-lead { color: var(--gray-400); }
.pp-hero-art { position: relative; flex: none; width: 13rem; height: 11rem; }
.pp-hero-blob { position: absolute; border-radius: 50%; filter: blur(2px); background: color-mix(in oklab, var(--primary-400) 22%, transparent); }
.pp-hero-blob--1 { width: 15rem; height: 15rem; right: -3rem; top: -6rem; }
.pp-hero-blob--2 { width: 7rem; height: 7rem; left: -1rem; bottom: -1.5rem; background: color-mix(in oklab, var(--primary-300) 18%, transparent); }
.pp-hero-glass { position: absolute; left: 1rem; top: 2rem; width: 6rem; height: 6rem; border-radius: 1.5rem; transform: rotate(-10deg);
                 background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); backdrop-filter: blur(6px); }
.dark .pp-hero-glass { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pp-hero-tile { position: absolute; right: 1.5rem; top: .75rem; width: 8.5rem; height: 8.5rem; display: grid; place-items: center;
                border-radius: 2rem; transform: rotate(10deg);
                background: linear-gradient(145deg, rgba(255, 255, 255, .95), color-mix(in oklab, var(--primary-100) 70%, #fff));
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 22px 44px -16px color-mix(in oklab, var(--primary-600) 55%, transparent); }
.dark .pp-hero-tile { background: linear-gradient(145deg, #1d2423, #121616);
                      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 44px -16px rgba(37, 203, 194, .35); }
.pp-hero-icon { width: 4.5rem; height: 4.5rem; color: var(--primary-500); filter: drop-shadow(0 6px 10px color-mix(in oklab, var(--primary-600) 40%, transparent)); }
@media (max-width: 767px) { .pp-hero-art { display: none; } .pp-hero { min-height: 0; } }

/* ---------- Карточки каталога ---------- */

.pp-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); align-items: stretch; }
/* Ряды карточек выровнены между собой: subgrid по шести рядам (шапка, описание, цена, факты, «подробнее», кнопки). */
.pp-card { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 1.25rem; align-content: start; padding: 1.5rem; border-radius: 1.25rem; background: #fff;
           box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 6%, transparent), 0 18px 40px -24px rgba(16, 20, 24, .25); }
.dark .pp-card { background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

.pp-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-bottom: 1.25rem;
                border-bottom: 1px solid color-mix(in oklab, currentColor 9%, transparent); }
.pp-card-icon { flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1rem;
                background: color-mix(in srgb, var(--pp-accent) 14%, #fff);
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-accent) 18%, transparent); }
.dark .pp-card-icon { background: color-mix(in srgb, var(--pp-accent) 16%, #151515); }
.pp-card-icon img { width: 3rem; height: 2.5rem; object-fit: contain; } /* квадратные — 40×40, вытянутые (Clearfy) — до 48 в ширину */
/* С загруженной иконкой плашка светлая и в тёмной теме — тёмные логотипы (Crocoblock) иначе не видно. */
.dark .pp-card-icon.has-img { background: color-mix(in srgb, var(--pp-accent) 10%, #f6f7f9);
                              box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.pp-card-icon svg { width: 2.25rem; height: 2.25rem; color: var(--pp-accent); }
.pp-card-title { flex: 1 1 8rem; font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700;
                 line-height: 1.3; letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 479px) { .pp-card-title { font-size: 1.0625rem; } }

.pp-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
             font-size: .8125rem; font-weight: 500; white-space: nowrap; margin-left: auto; }
.pp-status::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pp-status--ok { color: #16a34a; background: color-mix(in srgb, #22c55e 13%, transparent); }
.pp-status--warn { color: #ea580c; background: color-mix(in srgb, #f97316 14%, transparent); }
.pp-status--bad { color: #dc2626; background: color-mix(in srgb, #ef4444 13%, transparent); }
.dark .pp-status--ok { color: #4ade80; }
.dark .pp-status--warn { color: #fb923c; }
.dark .pp-status--bad { color: #f87171; }

.pp-card-desc { font-size: .9375rem; line-height: 1.6; color: var(--gray-600);
                display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.dark .pp-card-desc { color: var(--gray-300); }

/* Цена: подложка, крупная сумма в бирюзовом градиенте, подпись справа. */
.pp-pricing { display: grid; gap: .75rem; position: relative; z-index: 2; }
.pp-price-box { display: flex; align-items: center; gap: 1rem; min-height: 5.25rem; padding: .875rem 1.125rem; border-radius: 1rem;
                background: color-mix(in srgb, #25cbc2 9%, #fff); }
.dark .pp-price-box { background: rgba(37, 203, 194, .08); }
.pp-price-value { flex: none; font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.875rem; font-weight: 700; line-height: 1.1; white-space: nowrap;
                  background: linear-gradient(120deg, #0d8b84, #25cbc2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .pp-price-value { background-image: linear-gradient(120deg, #25cbc2, #1affd3); }
.pp-price-value--word { font-size: 1.375rem; text-transform: uppercase; } /* «Бесплатно» у бонусных плагинов */
.pp-price-note { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.35; color: var(--gray-500); }
.dark .pp-price-note { color: var(--gray-400); }

/* Переключатель «Разово / Год» в стиле iOS — внутри подписи к цене, вместо её первой строки. */
.pp-plan-switch { display: flex; align-items: center; gap: .375rem; margin-bottom: .125rem; }
.pp-plan-switch > span { cursor: pointer; transition: color .2s; user-select: none; white-space: nowrap; }
@media (max-width: 419px) { .pp-price-value { font-size: 1.5rem; } .pp-price-box { gap: .75rem; padding-inline: 1rem; } }
.pp-plan-switch > span.is-on { color: var(--gray-950); font-weight: 600; }
.dark .pp-plan-switch > span.is-on { color: #fff; }
.pp-switch { position: relative; width: 2.125rem; height: 1.25rem; flex: none; border-radius: 999px;
             background: color-mix(in oklab, var(--gray-950) 16%, transparent); transition: background .25s; }
.dark .pp-switch { background: rgba(255, 255, 255, .18); }
.pp-switch.is-year { background: #25cbc2; }
.pp-switch-knob { position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
                  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.pp-switch.is-year .pp-switch-knob { transform: translateX(.875rem); }
.pp-switch:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* Факты с круглыми значками. */
.pp-facts { display: grid; gap: .875rem; align-content: start; padding-bottom: 1.25rem;
            border-bottom: 1px solid color-mix(in oklab, currentColor 9%, transparent); font-size: .9375rem; }
.pp-facts li { display: flex; align-items: center; gap: .875rem; line-height: 1.35; min-height: 2.75rem; }
.pp-fact-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pp-facts small { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--gray-500); }
.pp-fact-icon { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%;
                background: color-mix(in oklab, var(--gray-950) 6%, transparent); color: var(--gray-600); }
.dark .pp-fact-icon { background: rgba(255, 255, 255, .06); color: var(--gray-300); }
.pp-fact-icon--accent { background: color-mix(in srgb, #22c55e 14%, transparent); color: #16a34a; }
.dark .pp-fact-icon--accent { color: #4ade80; }
.pp-fact-icon svg { width: 1.25rem; height: 1.25rem; }


/* Ярлык статуса в верхнем левом углу, вписан в скругление карточки. */
.pp-card { position: relative; isolation: isolate; }
.pp-corner { position: absolute; top: 0; left: 0; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
             padding: .375rem .875rem .375rem .75rem; border-radius: 1.25rem 0 .875rem 0; font-size: .75rem; font-weight: 600; }
.pp-corner::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pp-card-head { padding-top: 1.25rem; } /* место под ярлык статуса */
.pp-card-head { flex-wrap: nowrap; }

/* Вся карточка — ссылка на страницу плагина; кнопки мессенджеров лежат поверх. */
.pp-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pp-card-link:focus-visible { outline: none; }
.pp-card:has(.pp-card-link:focus-visible) { box-shadow: 0 0 0 2px var(--primary-500); }
.pp-card .pp-buy { position: relative; z-index: 2; }
.pp-card-more { display: flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: var(--primary-700); }
.dark .pp-card-more { color: var(--primary-400); }
.pp-card-more svg { width: 1rem; height: 1rem; transition: transform .2s; }
.pp-card:hover .pp-card-more svg { transform: translateX(3px); }

/* «Бегущий ток» по рамке при наведении — как анимация логотипа. */
@property --pp-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pp-card::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
                   background: conic-gradient(from var(--pp-angle), transparent 0deg 250deg, rgba(37, 203, 194, .25) 290deg,
                                              #25cbc2 330deg, #1affd3 350deg, transparent 360deg);
                   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                   -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; }
.pp-card { transition: box-shadow .3s, transform .3s; }
.pp-card:hover::before { opacity: 1; animation: pp-current 2.6s linear infinite; }
.pp-card:hover { transform: translateY(-2px);
                 box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary-500) 25%, transparent), 0 24px 48px -24px rgba(37, 203, 194, .45); }
@keyframes pp-current { to { --pp-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .pp-card:hover::before { animation: none; background: var(--primary-500); }
    .pp-card:hover { transform: none; }
}

/* Вставка «Нужен свой плагин?» — НАОБОРОТ от темы: в светлой тёмная, в тёмной светлая, чтобы выделялась всегда.
   Цвета внутри заданы переменными карточки, а не темой страницы. */
.pp-card--promo {
    /* светлая тема страницы → тёмная карточка */
    --promo-bg: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, .24), transparent 60%),
                radial-gradient(80% 60% at 100% 100%, rgba(26, 255, 211, .08), transparent 60%), #121414;
    --promo-ring: 0 0 0 1px rgba(37, 203, 194, .3), 0 24px 50px -24px rgba(37, 203, 194, .55);
    --promo-ink: #fff; --promo-dim: rgba(255, 255, 255, .7); --promo-mute: rgba(255, 255, 255, .55);
    --promo-line: rgba(255, 255, 255, .1); --promo-chip: rgba(255, 255, 255, .07);
    --promo-price-box: rgba(37, 203, 194, .12); --promo-price: linear-gradient(120deg, #25cbc2, #1affd3);
    --promo-accent: #1affd3; --promo-link: #25cbc2;
    --promo-pill-bg: rgba(255, 255, 255, .06); --promo-pill-bg-hover: rgba(255, 255, 255, .12);
}
.dark .pp-card--promo {
    /* тёмная тема страницы → светлая карточка */
    --promo-bg: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, .22), transparent 60%),
                radial-gradient(80% 60% at 100% 100%, rgba(26, 255, 211, .14), transparent 60%), #f4fbfa;
    --promo-ring: 0 0 0 1px rgba(37, 203, 194, .5), 0 24px 50px -24px rgba(37, 203, 194, .5);
    --promo-ink: #101418; --promo-dim: #4b5563; --promo-mute: #6b7780;
    --promo-line: rgba(16, 20, 24, .1); --promo-chip: rgba(16, 20, 24, .06);
    --promo-price-box: rgba(37, 203, 194, .14); --promo-price: linear-gradient(120deg, #0d8b84, #25cbc2);
    --promo-accent: #0d8b84; --promo-link: #0d8b84;
    --promo-pill-bg: #fff; --promo-pill-bg-hover: #fff;
}
.pp-card--promo { background: var(--promo-bg) !important; box-shadow: var(--promo-ring) !important; color: var(--promo-ink); }
.pp-card--promo .pp-card-title { color: var(--promo-ink); }
.pp-card--promo .pp-card-head, .pp-card--promo .pp-facts { border-color: var(--promo-line); }
.pp-card--promo .pp-card-desc { color: var(--promo-dim) !important; }
.pp-card--promo .pp-price-box { background: var(--promo-price-box); }
.pp-card--promo .pp-price-value { background-image: var(--promo-price); font-size: 1.625rem; }
.pp-card--promo .pp-price-note, .pp-card--promo .pp-buy-caption { color: var(--promo-mute) !important; }
.pp-card--promo .pp-facts { color: var(--promo-ink) !important; }
.pp-card--promo .pp-fact-icon { background: var(--promo-chip) !important; color: var(--promo-dim) !important; }
.pp-card--promo .pp-fact-icon--accent { background: rgba(34, 197, 94, .16) !important; color: #22c55e !important; }
.pp-card-icon--promo { background: rgba(37, 203, 194, .14) !important; box-shadow: inset 0 0 0 1px rgba(37, 203, 194, .35) !important; }
.pp-card-icon--promo svg { color: var(--promo-accent) !important; }
.pp-corner--promo { background: linear-gradient(90deg, #1affd3, #25cbc2); color: #062a28; }
.pp-corner--promo::before { background: #062a28; }
.pp-card--promo .ss-pill { background: var(--promo-pill-bg) !important; color: var(--promo-ink) !important;
                           border-color: color-mix(in srgb, var(--ss-kanal) 50%, transparent) !important; }
.pp-card--promo .ss-pill:hover { background: var(--promo-pill-bg-hover) !important; border-color: var(--ss-kanal) !important; }
.pp-card--promo .pp-buy { position: relative; z-index: 2; }
.pp-card-more--promo { position: relative; z-index: 2; color: var(--promo-link) !important; }
.pp-card-more--promo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Купить/продлить: подпись и «таблетки». */
.pp-buy { display: grid; gap: .625rem; }
.pp-buy-caption { font-size: .875rem; color: var(--gray-500); }
.pp-buy .ss-pill { flex: 1 1 8rem; justify-content: center; }

/* ---------- Мои плагины: карточка-строка ---------- */

.pp-own-list { display: grid; gap: 1.25rem; }
.pp-own { display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 1.25rem; background: #fff;
          box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 6%, transparent), 0 18px 40px -24px rgba(16, 20, 24, .22); }
.dark .pp-own { background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

.pp-own-head { display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.25rem;
               border-bottom: 1px solid color-mix(in oklab, currentColor 9%, transparent); }
.pp-own-title { flex: 1; min-width: 0; }
.pp-own-title h2 { font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.pp-own-title h2 a:hover { color: var(--primary-600); }
.pp-own-title p { margin-top: .375rem; font-size: .9375rem; line-height: 1.5; color: var(--gray-600); max-width: 44rem; }
.dark .pp-own-title p { color: var(--gray-400); }
.pp-own-side { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Срок подписки: иконка + одна-две строки. */
.pp-term { display: inline-flex; align-items: center; gap: .625rem; padding: .5rem .875rem; border-radius: .75rem;
           font-size: .875rem; font-weight: 500; line-height: 1.25; }
.pp-term svg { width: 1.375rem; height: 1.375rem; flex: none; }
.pp-term small { display: block; font-size: .8125rem; font-weight: 400; opacity: .85; }
.pp-term--ok { color: #15803d; background: color-mix(in srgb, #22c55e 12%, transparent); }
.pp-term--warn { color: #c2410c; background: color-mix(in srgb, #f97316 12%, transparent); }
.pp-term--bad { color: #dc2626; background: color-mix(in srgb, #ef4444 11%, transparent); }
.dark .pp-term--ok { color: #4ade80; }
.dark .pp-term--warn { color: #fb923c; }
.dark .pp-term--bad { color: #f87171; }

/* Нижний ряд: версия | история | скачать. */
.pp-own-row { display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
.pp-own-version { display: grid; gap: .125rem; min-width: 14rem; padding-right: 2rem;
                  border-right: 1px solid color-mix(in oklab, currentColor 10%, transparent); }
.pp-own-version strong { font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.125rem; font-weight: 600; }
.pp-own-version span { font-size: .875rem; color: var(--gray-500); }
.pp-own-history-btn { display: inline-flex; align-items: center; gap: .75rem; font-size: .9375rem; font-weight: 500; }
.pp-own-history-btn .pp-fact-icon { width: 2.5rem; height: 2.5rem; }
.pp-chevron { width: 1.25rem; height: 1.25rem; color: var(--gray-500); transition: transform .2s; }
.pp-chevron.is-open { transform: rotate(180deg); }
.pp-download { margin-left: auto; }

.pp-own-history { display: grid; gap: .875rem; padding: 1rem 1.25rem; border-radius: 1rem;
                  background: color-mix(in oklab, var(--gray-950) 3%, transparent); }
.dark .pp-own-history { background: rgba(255, 255, 255, .03); }
.pp-own-history li { padding-left: .875rem; border-left: 2px solid color-mix(in oklab, var(--primary-500) 45%, transparent); }
.pp-own-history li.is-locked { opacity: .55; }
.pp-own .pp-key { margin-top: 0; }

/* Предупреждение о закрытой новой версии. */
.pp-notice { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: 1rem; line-height: 1.55;
             font-size: .9375rem; background: color-mix(in srgb, #f59e0b 12%, #fff); }
.dark .pp-notice { background: rgba(245, 158, 11, .1); }
.pp-notice-icon { width: 1.75rem; height: 1.75rem; flex: none; color: #f59e0b; }

@media (max-width: 767px) {
    .pp-own-head { flex-wrap: wrap; }
    .pp-own-title { flex-basis: calc(100% - 5.25rem); }
    .pp-own-side { width: 100%; justify-content: space-between; }
    .pp-own-version { border-right: 0; padding-right: 0; min-width: 0; }
    .pp-download { width: 100%; margin-left: 0; }
}

/* ---------- Страница плагина ---------- */

.pp-product { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
@media (max-width: 1023px) { .pp-product { grid-template-columns: minmax(0, 1fr); } .pp-product-aside { position: static; } }
.pp-product-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; min-width: 0; }
.pp-product-intro { display: flex; gap: 1.25rem; align-items: center; }
.pp-product-intro > div { min-width: 0; }
.pp-card-icon--lg { width: 5.5rem; height: 5.5rem; border-radius: 1.375rem; }
.pp-card-icon--lg img { width: 3.75rem; height: 3.75rem; }
.pp-card-icon--lg svg { width: 3rem; height: 3rem; }
.pp-product-lead { margin-top: .5rem; font-size: 1.0625rem; line-height: 1.6; color: var(--gray-600); }
.dark .pp-product-lead { color: var(--gray-300); }
/* Колонка цены — обычный столбец, без subgrid карточек каталога (иначе блок цены растягивается на всю высоту). */
.pp-product-aside { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; align-self: start; position: sticky; top: calc(var(--ss-topbar-h, 4.5rem) + 1.5rem); }
.pp-product-aside:hover { transform: none; }
.pp-product-aside::before { display: none; }
.pp-product-actions{width:100%;min-width:0}
.pp-product-actions--demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
.pp-product-actions--demo .pp-buy{min-width:0}
.pp-product-actions--demo .pp-buy-button{--ss-cta-krug:28px;font-size:12px;padding-inline:10px 40px;min-width:0;height:48px;min-height:48px;max-height:48px}
.pp-demo-button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:8px;border:1px solid #159b90;border-radius:999px;background:#e9faf6;color:#086d65;font-size:12px;font-weight:650;line-height:1.25;text-align:center;text-decoration:none;transition:background .2s,border-color .2s}
.pp-demo-button svg{display:block;width:20px;height:20px;flex-shrink:0}
.pp-demo-button{height:48px;min-height:48px}.pp-demo-button span{min-width:0}
.pp-demo-button:hover{background:#d0f7ee;border-color:#0c796e}
.pp-demo-button:focus-visible{outline:2px solid #159b90;outline-offset:3px}
.dark .pp-demo-button{color:#70e9d8;border-color:#287a6e;background:#12342d}
.dark .pp-demo-button:hover{background:#194b40;border-color:#3fcdb5}
.pp-product-h2 { font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
.pp-timeline { display: grid; gap: 1rem; }
.pp-timeline li { padding-left: 1rem; border-left: 2px solid color-mix(in oklab, var(--primary-500) 45%, transparent); }

/* «Как это выглядит»: превью скриншотов и просмотр на весь экран. */
.pp-gallery-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.pp-gallery-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .875rem; cursor: zoom-in;
                    box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent); background: #f4f6f8; transition: box-shadow .15s, transform .15s; }
.dark .pp-gallery-thumb { background: #1a1d1d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.pp-gallery-thumb:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--primary-500); }
.pp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pp-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3rem 4.5rem;
               background: rgba(8, 10, 10, .88); backdrop-filter: blur(4px); }
.pp-lightbox img { max-width: 100%; max-height: 100%; border-radius: .75rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); background: #fff; }
.pp-lightbox-close, .pp-lightbox-nav { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff;
                                       background: rgba(255, 255, 255, .12); transition: background .15s; }
.pp-lightbox-close:hover, .pp-lightbox-nav:hover { background: rgba(255, 255, 255, .24); }
.pp-lightbox-close { top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
.pp-lightbox-nav { top: 50%; translate: 0 -50%; width: 3rem; height: 3rem; font-size: 1.75rem; line-height: 1; }
.pp-lightbox-nav.is-prev { left: 1rem; }
.pp-lightbox-nav.is-next { right: 1rem; }
.pp-lightbox-count { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; color: rgba(255, 255, 255, .75); font-size: .875rem; }
@media (max-width: 639px) { .pp-lightbox { padding: 3.5rem .75rem; } .pp-lightbox-nav { top: auto; bottom: .75rem; translate: none; } }

/* Вкладки на странице плагина: Возможности / Инструкция / Версии. */
.pp-tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: .875rem; width: fit-content; max-width: 100%; overflow-x: auto;
           background: color-mix(in oklab, var(--gray-950) 5%, transparent); }
.dark .pp-tabs { background: rgba(255, 255, 255, .05); }
.pp-tab { padding: .5rem 1rem; border-radius: .625rem; font-size: .9375rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; transition: background .15s, color .15s; }
.pp-tab:hover { color: var(--gray-950); }
.dark .pp-tab:hover { color: #fff; }
@media (max-width: 600px) {
    .pp-tabs { width: 100%; }
    .pp-tab { flex: 1; min-height: 44px; padding: .625rem .75rem; font-size: .8125rem; }
    .fi-panel-client .fi-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([readonly]) { font-size: 16px; min-height: 44px; }
    .fi-panel-client .fi-main .fi-btn { min-height: 44px; }
}
@media (max-width: 359px) { .pp-tab { font-size: .75rem; padding-inline: .625rem; } }
.pp-tab.is-active { background: #fff; color: var(--gray-950); box-shadow: 0 1px 3px rgba(16, 20, 24, .12); }
.dark .pp-tab.is-active { background: #1e2222; color: #fff; }

/* Плашка «Скачать инструкцию (PDF)» над текстом инструкции. */
.pp-manual-download { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 1rem;
                      background: color-mix(in srgb, #25cbc2 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #25cbc2 30%, transparent);
                      transition: box-shadow .15s; max-width: 46rem; }
.pp-manual-download:hover { box-shadow: inset 0 0 0 1px #25cbc2; }
.pp-manual-download svg { width: 2rem; height: 2rem; flex: none; color: var(--primary-600); }
.dark .pp-manual-download svg { color: var(--primary-400); }
.pp-manual-download span { display: grid; }
.pp-manual-download small { font-size: .8125rem; color: var(--gray-500); }
.pp-aside-link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.pp-aside-link svg { width: 1.125rem; height: 1.125rem; }

.pp-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pp-prose th, .pp-prose td { padding: .5rem .75rem; text-align: left; vertical-align: top;
                             border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent); }
.pp-prose th { font-weight: 600; }
.pp-prose code { font-size: .875em; padding: .1em .35em; border-radius: .375rem; background: color-mix(in oklab, currentColor 8%, transparent); }
.pp-prose pre { padding: .875rem 1rem; border-radius: .75rem; overflow-x: auto; font-size: .875rem; background: color-mix(in oklab, currentColor 6%, transparent); }
.pp-prose pre code { padding: 0; background: none; }
.pp-prose blockquote { padding: .75rem 1rem; border-radius: .75rem; background: color-mix(in srgb, #f59e0b 12%, transparent); }

.pp-prose { font-size: 1rem; line-height: 1.7; max-width: 46rem; }
.pp-prose > * + * { margin-top: 1rem; }
.pp-prose h2, .pp-prose h3 { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; line-height: 1.3; margin-top: 1.75rem; }
.pp-prose h2 { font-size: 1.25rem; }
.pp-prose h3 { font-size: 1.0625rem; }
.pp-prose ul { list-style: disc; padding-left: 1.25rem; }
.pp-prose ol { list-style: decimal; padding-left: 1.25rem; }
.pp-prose li + li { margin-top: .375rem; }
.pp-prose a { color: var(--primary-700); text-decoration: underline; text-underline-offset: 2px; }
.dark .pp-prose a { color: var(--primary-400); }
.pp-prose strong { font-weight: 600; }

/* Оплаты */
.pp-table-wrap { overflow-x: auto; margin: -.25rem; }
.pp-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pp-table th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; font-weight: 500; }
.pp-table th, .pp-table td { padding: .75rem .5rem; border-bottom: 1px solid color-mix(in oklab, currentColor 10%, transparent); white-space: nowrap; }
.pp-table tr:last-child td { border-bottom: 0; }
.pp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Инструкции */
.pp-steps { display: grid; gap: .625rem; padding-left: 1.25rem; list-style: decimal; line-height: 1.55; }
.pp-bullets { list-style: disc; }
.pp-steps + .pp-meta { margin-top: 1rem; }

/* Поддержка */
.pp-contact { display: grid; gap: .25rem; padding: 1.25rem; border-radius: .75rem; background: #fff;
              box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent); transition: box-shadow .15s; }
.dark .pp-contact { background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09); }
.pp-contact:hover { box-shadow: 0 0 0 2px var(--primary-500); }
.pp-contact-icon { width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: .5rem;
                   box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 12%, transparent); }
.dark .pp-contact-icon { box-shadow: none; }
.pp-contact-title { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; }

/* ---------- Шапка: контакты и переключатель темы ---------- */

.ss-topbar-end { display: flex; align-items: center; gap: 1rem; }
.ss-topbar-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; white-space: nowrap; }
@media (max-width: 767px) { .ss-topbar-label { display: none; } }

/* Telegram и MAX. Иконки — белые круги с тёмным знаком: на светлом фоне им нужна обводка. */
.ss-messengers { display: flex; flex-wrap: wrap; gap: .5rem; }
.ss-messenger { display: inline-flex; align-items: center; gap: .625rem; transition: transform .15s, box-shadow .15s; }
.ss-messenger img { border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 12%, transparent); }
.dark .ss-messenger img, .ss-footer .ss-messenger img { box-shadow: none; }
.ss-messengers--icons { gap: .375rem; }
.ss-messengers--icons .ss-messenger img { width: 2rem; height: 2rem; }
.ss-messengers--icons .ss-messenger:hover { transform: translateY(-1px); }
/* «Таблетки» каналов — копия .ss-pill с sergeev.studio (bloki.css): цвет рамки и градиента по каналу. */
[data-kanal="telegram"] { --ss-kanal: #26a5e4; --ss-kanal-2: #41b0e7; }
[data-kanal="max"] { --ss-kanal: #9b47dd; --ss-kanal-2: #36b6fd; }
.ss-messengers--buttons { gap: 10px; }
.ss-pill { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-inline: 16px; border-radius: 999px;
           font-size: 15px; font-weight: 400; color: #101418; text-decoration: none;
           background: linear-gradient(120deg, color-mix(in srgb, var(--ss-kanal-2) 16%, #fff), color-mix(in srgb, var(--ss-kanal) 16%, #fff));
           border: 1px solid color-mix(in srgb, var(--ss-kanal) 45%, transparent); transition: border-color .2s ease, background .2s ease; }
.ss-pill:hover, .ss-pill:focus-visible { border-color: var(--ss-kanal); }
.ss-pill img { display: block; width: 24px; height: 24px; box-shadow: none !important; }
.dark .ss-pill, .ss-footer .ss-pill { background: rgba(255, 255, 255, .06); color: #fff;
                                      border-color: color-mix(in srgb, var(--ss-kanal) 50%, transparent); }
.dark .ss-pill:hover, .ss-footer .ss-pill:hover { background: rgba(255, 255, 255, .12); border-color: var(--ss-kanal); }
@media (max-width: 479px) { .fi-topbar .ss-messengers, .ss-simple-header .ss-messengers { display: none; } }
/* Телефон: меню, логотип, три кнопки темы и аватар должны влезть в 360px. */
@media (max-width: 479px) {
    .fi-panel-client .fi-topbar { padding-inline: .75rem; gap: .5rem; }
    .fi-panel-client .fi-topbar-start { min-width: 0; }
    .fi-panel-client .fi-topbar-start > a { padding-inline: 0; }
    .fi-panel-client .fi-topbar-end { column-gap: .5rem; flex-shrink: 0; }
    .fi-panel-client .fi-topbar .fi-user-menu { flex-shrink: 0; }
    .fi-panel-client .fi-topbar .fi-logo { height: 1.75rem !important; }
    .ss-topbar-end { gap: .5rem; }
    .ss-topbar-end .fi-theme-switcher { gap: 0; }
    .ss-topbar-end .fi-theme-switcher-btn { padding: .375rem; }
    .ss-simple-header { padding: 0 .75rem; }
    .ss-simple-logo img { height: 1.75rem; }
}

/*
 * Меню закреплено слева во всю высоту окна (как в приложениях): логотип наверху,
 * пункты, кнопка «Подключить плагин», внизу поддержка и пользователь.
 * Шапка и контент — справа. На телефоне — штатная выезжающая панель Filament.
 */
.fi-panel-client { --ss-topbar-h: 4.5rem; --ss-sidebar-w: 16rem; }
.fi-panel-client .fi-topbar { height: var(--ss-topbar-h); }
@media (min-width: 1024px) {
    .fi-panel-client .fi-layout > div:has(> .fi-sidebar) { position: fixed; inset: 0 auto 0 0; width: var(--ss-sidebar-w); z-index: 35; }
    .fi-panel-client .fi-sidebar { position: relative; top: 0; height: 100dvh; width: 100%; }
    .fi-panel-client .fi-layout { padding-left: var(--ss-sidebar-w); }
    /* Filament прячет шапку меню, когда есть верхняя панель, — возвращаем: логотип живёт в меню. */
    .fi-panel-client .fi-sidebar-header-ctn, .fi-panel-client .fi-sidebar-header { display: flex !important; }
    .fi-panel-client .fi-sidebar-header { height: var(--ss-topbar-h); align-items: center; padding-inline: 1.5rem;
                                          box-shadow: 0 1px 0 color-mix(in oklab, var(--gray-950) 7%, transparent); }
    .dark .fi-panel-client .fi-sidebar-header { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
    /* Верхняя панель — справа от меню. */
    .fi-panel-client .fi-topbar-ctn { padding-left: var(--ss-sidebar-w); }
    .fi-panel-client .fi-topbar-start { display: none; }
    .fi-panel-client .fi-topbar .fi-user-menu { display: none; } /* пользователь — внизу меню */
}
@media (max-width: 1023px) {
    .fi-panel-client .fi-topbar-start { display: flex; } /* Filament прячет логотип рядом с кнопкой меню */
}

/* Меню — оформленная колонка: свой фон и граница, внизу карточка поддержки. */
@media (min-width: 1024px) {
    .fi-panel-client .fi-sidebar { background: #fff; box-shadow: 1px 0 0 color-mix(in oklab, var(--gray-950) 8%, transparent); }
    .dark .fi-panel-client .fi-sidebar, .fi-panel-client.dark .fi-sidebar { background: #121212; box-shadow: 1px 0 0 rgba(255, 255, 255, .07); }
}
.ss-sidebar-help { margin: 0 1rem 1rem; padding: 14px; border-radius: 1rem; display: grid; gap: .5rem;
                   background: linear-gradient(150deg, color-mix(in srgb, #25cbc2 14%, #fff), color-mix(in srgb, #1affd3 6%, #fff));
                   box-shadow: inset 0 0 0 1px color-mix(in srgb, #25cbc2 25%, transparent); }
.dark .ss-sidebar-help { background: radial-gradient(120% 90% at 0% 0%, rgba(37, 203, 194, .16), transparent 60%), #171a1a;
                         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ss-sidebar-help-title { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: .9375rem; }
.ss-sidebar-help-text { font-size: .8125rem; line-height: 1.45; color: var(--gray-600); }
.dark .ss-sidebar-help-text { color: var(--gray-400); }
.ss-sidebar-help .ss-messengers { margin-top: .25rem; gap: .375rem; }
/* Ширина по содержимому (Max короче Telegram), внутри по 10px со всех сторон. */
.ss-sidebar-help .ss-pill { flex: 0 0 auto; min-block-size: 0; padding: 10px; font-size: 14px; gap: 6px; }
.ss-sidebar-help .ss-pill img { width: 20px; height: 20px; }

/* Подвал выровнен по колонке контента: на страницах с меню отступаем на его ширину,
   внутри та же ширина (80rem) и поля (2rem), что у .fi-main. */
@media (min-width: 1024px) {
    body:has(.fi-sidebar) .ss-footer { padding-left: var(--ss-sidebar-w); }
}
body:has(.fi-sidebar) .ss-footer-inner { padding-inline: 2rem; }
.ss-sidebar-help-title { display: flex; align-items: center; gap: .625rem; }
.ss-sidebar-bottom { display: grid; gap: .75rem; padding: 0 1rem 1rem; }
.ss-sidebar-bottom .ss-sidebar-help { margin: 0; }

.ss-sidebar-cta { padding-top: 1.25rem; width: 100%; }
.ss-cta-btn { display: flex; }

.ss-user { display: flex; align-items: center; gap: .5rem; padding: .625rem; border-radius: 1rem;
           box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 9%, transparent); }
.dark .ss-user { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ss-user-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .625rem; }
.ss-user-avatar { width: 2.5rem !important; height: 2.5rem !important; border-radius: .75rem !important; }
.ss-user-text { min-width: 0; display: grid; line-height: 1.25; }
.ss-user-text strong { font-size: .875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-text small { font-size: .75rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-user-logout { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .625rem; color: var(--gray-500);
                  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent); transition: color .15s, box-shadow .15s; }
.dark .ss-user-logout { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ss-user-logout:hover { color: #dc2626; box-shadow: inset 0 0 0 1px #dc2626; }
.ss-user-logout svg { width: 1.125rem; height: 1.125rem; }
/* Копия блока пользователя в шапке: компактнее, с разделителем слева; только на ПК (на телефоне — аватар Filament). */
.ss-topbar-user { display: none; }
@media (min-width: 1024px) {
    .ss-topbar-user { display: block; padding-left: 1rem; margin-left: .25rem;
                      border-left: 1px solid color-mix(in oklab, var(--gray-950) 10%, transparent); }
    .dark .ss-topbar-user { border-color: rgba(255, 255, 255, .1); }
}
.ss-user--compact { padding: 0; box-shadow: none !important; gap: .625rem; }
.ss-user--compact .ss-user-avatar { width: 2.25rem !important; height: 2.25rem !important; }
.ss-user--compact .ss-user-text { max-width: 11rem; }
.ss-user--compact .ss-user-logout { width: 2rem; height: 2rem; }

/* ---------- Простые страницы (вход, сброс пароля) ---------- */

.ss-simple-header { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 4.5rem; display: flex; align-items: center;
                    justify-content: space-between; gap: 1rem; padding: 0 1.5rem; background: #fff;
                    box-shadow: 0 1px 0 color-mix(in oklab, var(--gray-950) 8%, transparent); }
.dark .ss-simple-header { background: #0e0e0e; box-shadow: 0 1px 0 rgba(255, 255, 255, .09); }
.ss-simple-logo img { height: 2.5rem; width: auto; }
.ss-logo-dark, .dark .ss-logo-light { display: none; }
.dark .ss-logo-dark { display: block; }
.fi-panel-client .fi-simple-layout { padding-top: 4.5rem; }
/* Логотип уже в шапке — в карточке входа не дублируем. */
.fi-panel-client .fi-simple-header .fi-logo { display: none; }

/* ---------- Форма входа (и сброса пароля) по макету ---------- */

.fi-simple-main { padding: 2.5rem 2.25rem 2rem; border-radius: 1.5rem; background: #fff;
                  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary-500) 18%, transparent),
                              0 24px 60px -24px color-mix(in oklab, var(--primary-600) 35%, transparent); }
.dark .fi-simple-main { background: #151515; }
@media (max-width: 479px) { .fi-simple-main { padding: 1.75rem 1.25rem; border-radius: 1.25rem; } }

.fi-simple-header { align-items: flex-start; text-align: left; }
.fi-simple-header-heading { font-size: 1.5rem; line-height: 1.2; text-align: left; }
@media (max-width: 479px) { .fi-simple-header-heading { font-size: 1.3rem; } }
.fi-simple-header-subheading { text-align: left; margin-top: .5rem; font-size: .9375rem; color: var(--gray-500); }
.dark .fi-simple-header-subheading { color: var(--gray-400); }

.fi-simple-main .fi-fo-field-label-content { font-size: .9375rem; font-weight: 500; }
.fi-simple-main .fi-input-wrp { min-height: 3.25rem; border-radius: .875rem; background: #f6f8fa;
                                box-shadow: 0 0 0 1px color-mix(in oklab, var(--gray-950) 10%, transparent); transition: box-shadow .15s, background .15s; }
.dark .fi-simple-main .fi-input-wrp { background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.fi-simple-main .fi-input-wrp:focus-within { background: #fff;
                                             box-shadow: 0 0 0 2px var(--primary-500), 0 0 0 6px color-mix(in oklab, var(--primary-500) 15%, transparent); }
.dark .fi-simple-main .fi-input-wrp:focus-within { background: rgba(255, 255, 255, .06); }
/* Рамка выше штатной — растягиваем само поле, чтобы текст и плейсхолдер стояли по центру. */
.fi-simple-main .fi-input-wrp { align-items: stretch; }
.fi-simple-main .fi-input-wrp-content-ctn { display: flex; align-items: center; }
.fi-simple-main .fi-input { font-size: 1rem; height: 100%; min-height: 3.25rem; padding-block: 0; }
.fi-simple-main .fi-input-wrp-prefix { padding-inline-start: 1rem; }
.fi-simple-main .fi-input-wrp-prefix svg { width: 1.25rem; height: 1.25rem; color: var(--gray-500); }
.fi-simple-main .fi-checkbox-input { width: 1.25rem; height: 1.25rem; border-radius: .375rem; }

.fi-simple-main .fi-sc-actions .fi-btn { min-height: 3.25rem; border-radius: .875rem; font-size: 1rem; font-weight: 600; }

.ss-login-after { margin-top: 1.75rem; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.ss-divider { width: 100%; display: flex; align-items: center; gap: 1rem; font-size: .875rem; color: var(--gray-500); }
.ss-divider::before, .ss-divider::after { content: ''; flex: 1; height: 1px; background: color-mix(in oklab, currentColor 35%, transparent); }
.ss-login-help { font-size: .875rem; color: var(--gray-500); max-width: 22rem; }
.dark .ss-login-help { color: var(--gray-400); }
.ss-login-after .ss-messengers { justify-content: center; }

/* ---------- Подвал: всегда тёмный, как на сайте ---------- */

.ss-footer { position: relative; z-index: 31; background: #0e0e0e; color: #fff; border-top: 1px solid rgba(255, 255, 255, .09); }
.ss-footer a { color: inherit; }
.ss-footer-inner { max-width: 80rem; margin: 0 auto; padding: var(--ss-block-y) 1.5rem; }

/* Вертикальные отступы основных блоков (контент страницы, подвал): 100px на ПК, 50px на телефоне. */
:root { --ss-block-y: 100px; }
@media (max-width: 767px) { :root { --ss-block-y: 50px; } }
.fi-panel-client .fi-main { padding-block: var(--ss-block-y) !important; }
.fi-panel-client .fi-page-header-main-ctn { padding-block: 0 !important; } /* свои 32px Filament сверху и снизу — лишние */
.ss-footer-cols { display: grid; gap: 2.5rem; grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 767px) { .ss-footer-cols { grid-template-columns: 1fr; } }
.ss-footer-col { display: grid; gap: .625rem; align-content: start; font-size: .9375rem; }
.ss-footer-col nav a, .ss-footer-col > a { opacity: .85; }
.ss-footer-col a:hover { opacity: 1; color: #25cbc2; }
.ss-footer-title { font-family: 'Unbounded', system-ui, sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-bottom: .75rem; }
.ss-footer-main .ss-messengers { margin-top: .75rem; }
.ss-footer-note { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); display: flex; align-items: center; gap: .5rem; }
.ss-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #25cbc2; box-shadow: 0 0 0 4px rgba(37, 203, 194, .2); }
.ss-footer-head { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .25rem; }
.ss-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .09);
                    display: grid; gap: .375rem; font-size: .8125rem; color: rgba(255, 255, 255, .5); }
.ss-footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.ss-footer-legal a:hover { color: #fff; }

.pp-price-period { font-size: 1rem; white-space: nowrap; }

/* Purchase messenger dialog. Native dialog handles focus, Escape and modality. */
.pp-buy-button { width: 100%; justify-content: center; }
.pp-purchase-dialog { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid #e5e7eb; border-radius: 24px; background: #fff; color: #161616; box-shadow: 0 24px 80px #0005; }
.pp-purchase-dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.dark .pp-purchase-dialog { background: #161616; color: #fff; border-color: #ffffff1a; }
.pp-purchase-content { position: relative; padding: 36px 28px 28px; display: grid; gap: 16px; }
.pp-purchase-content h2 { padding-right: 20px; font-family: 'Unbounded', sans-serif; font-size: 20px; line-height: 1.5; }
.pp-purchase-name { color: #0d8b84; font-weight: 700; }
.dark .pp-purchase-name { color: #25cbc2; }
.pp-purchase-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer; }
.pp-purchase-close:hover { background: #8882; }
.pp-purchase-content .ss-pill { flex: 1 1 120px; justify-content: center; }
@media (max-width: 419px) { .pp-purchase-content { padding: 36px 20px 24px; } .pp-purchase-content h2 { font-size: 17px; } }

/* Animate each opening, including repeated showModal() calls. */
.pp-purchase-dialog[open] { animation: pp-purchase-enter .28s cubic-bezier(.16, 1, .3, 1) both; }
.pp-purchase-dialog[open]::backdrop { animation: pp-purchase-backdrop .24s ease-out both; }
@keyframes pp-purchase-enter {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pp-purchase-backdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pp-purchase-dialog[open], .pp-purchase-dialog[open]::backdrop { animation: none; }
}

/* Keep purchase buttons compact when catalog subgrid rows stretch. */
.pp-buy-button { height: 46px; min-height: 46px; max-height: 46px; align-self: end; }

.pp-catalog-sort { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-catalog-sort label { font-size: 14px; color: var(--gray-500); }
.pp-catalog-sort select { border: 1px solid #ddd; border-radius: 14px; background-color: #fff; color: #161616; padding: 12px 40px 12px 16px; font: inherit; cursor: pointer; }
.dark .pp-catalog-sort select { background-color: #161616; border-color: #ffffff26; color: #fff; }
.pp-catalog-sort select:focus-visible { outline: 2px solid #25cbc2; outline-offset: 2px; }
@media (max-width: 419px) { .pp-catalog-sort { justify-content: space-between; } }

/* Compact price sorting popover, aligned with the catalog's left edge. */
.pp-catalog-sort { position: relative; justify-content: flex-start; align-self: flex-start; width: fit-content; z-index: 10; }
.pp-sort-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #eeedeb; color: #161616; font-size: 14px; cursor: pointer; }
.dark .pp-sort-trigger { background: #242424; color: #fff; }
.pp-sort-chevron { display: block; width: 16px; height: 16px; flex: 0 0 16px; color: currentColor; opacity: .65; transform: rotate(0deg); transform-origin: center; transform-box: view-box; transition: transform .2s ease; }
.pp-sort-chevron.is-open { transform: rotate(180deg); }
.pp-sort-options { position: absolute; left: 0; top: calc(100% + 6px); min-width: 200px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid #eee; box-shadow: 0 12px 32px #0002; }
.dark .pp-sort-options { background: #202020; border-color: #ffffff1a; box-shadow: 0 12px 32px #0006; }
.pp-sort-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border-radius: 10px; text-align: left; font-size: 14px; cursor: pointer; }
.pp-sort-option:hover { background: #8881; }
.pp-sort-dot { width: 16px; height: 16px; flex: none; border-radius: 50%; background: #ececea; }
.dark .pp-sort-dot { background: #414141; }
.pp-sort-option[aria-pressed="true"] .pp-sort-dot { background: #25cbc2; box-shadow: inset 0 0 0 5px #25cbc2; position: relative; }
.pp-sort-option[aria-pressed="true"] .pp-sort-dot::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #102b29; }
.pp-sort-trigger:focus-visible, .pp-sort-option:focus-visible { outline: 2px solid #25cbc2; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .pp-sort-chevron { transition: none; } }

.pp-license-box { border: 1px solid #8883; border-radius: 20px; padding: 24px; display: grid; gap: 18px; }
.pp-license-box h2 { font-family: Unbounded,sans-serif; font-size: 18px; }
.pp-license-form, .pp-license-item { display: grid; gap: 12px; }
.pp-license-item { padding-block: 18px; border-bottom: 1px solid #8883; }
.pp-license-box input:not([type=checkbox]), .pp-license-box select { display:block; width:100%; padding:10px 12px; border:1px solid #8885; border-radius:10px; background:transparent; color:inherit; }
.pp-license-box select option { background:#fff; color:#161616; }
.pp-license-box label { display:block; }
.pp-license-item input[readonly] { font-family:monospace; font-size:13px; }
.pp-license-renew { color:#0d8b84; text-decoration:underline; }
.dark .pp-license-renew { color:#25cbc2; }

/* Licenses live in each plugin card and in the selected client's admin card. */
.pp-inline-licenses { min-width: 0; width: 100%; }
.pp-inline-licenses:has(> h3) { display: grid; gap: 12px; border-top: 1px solid #8883; padding-top: 18px; }
.pp-inline-licenses h3, .pp-license-group h3 { font-family: Unbounded,sans-serif; font-size: 14px; line-height: 1.5; }
.pp-inline-license { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px; border-radius:14px; background:#8881; min-width:0; }
.pp-inline-license-info { display:grid; gap:4px; min-width:0; flex:1 1 180px; overflow-wrap:anywhere; }
.pp-inline-license-info strong { font-size:14px; }
.pp-inline-license-key { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 300px; }
.pp-inline-license-key input { min-width:0; width:100%; font-family:monospace; font-size:12px; border:1px solid #8883; border-radius:8px; padding:8px; background:transparent; }
.pp-license-action { font-size:13px; color:#0d8b84; white-space:nowrap; cursor:pointer; }
.dark .pp-license-action { color:#25cbc2; }
.pp-license-bind { height:46px; align-self:center; width:auto; }
.pp-domain-dialog input[type=text] { display:block; width:100%; border:1px solid #8884; border-radius:10px; background:transparent; color:inherit; padding:12px; margin-top:8px; }
.pp-domain-dialog p { font-size:14px; line-height:1.5; }
.pp-license-group { border:1px solid #8883; border-radius:16px; padding:18px; }
.pp-license-box + .pp-license-box { margin-top:20px; }
.pp-product-aside .pp-inline-license-key { flex-basis:100%; flex-wrap:wrap; }
.pp-product-aside .pp-inline-license-info { flex-basis:100%; }
@media(max-width:600px) { .pp-inline-license-key { flex-basis:100%; flex-wrap:wrap; } }

/* Client administration: compact overview and contextual plugin dialogs. */
.pp-client-overview,.pp-admin-plugins{display:grid;gap:28px;min-width:0}
.pp-client-summary,.pp-admin-section-title,.pp-admin-card-top,.pp-admin-card-bottom,.pp-admin-modal-header,.pp-admin-license-title{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pp-client-summary{padding-bottom:24px;border-bottom:1px solid var(--pp-line,rgba(128,128,128,.2))}
.pp-client-summary h2,.pp-admin-section-title h2{font-size:19px;font-weight:650;margin:0 0 7px}
.pp-client-summary p,.pp-admin-section-title p,.pp-admin-hint,.pp-admin-card-meta,.pp-admin-facts dt{font-size:13px;color:#737b83;line-height:1.6}
.pp-client-profile,.pp-client-payments{padding-top:22px}.pp-client-profile>button{margin-top:18px}
.pp-admin-toolbar{display:flex;flex-wrap:wrap;gap:8px}
.pp-admin-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:38px;padding:9px 14px;border:1px solid rgba(128,128,128,.24);border-radius:11px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:550;cursor:pointer;transition:background .18s,border-color .18s,opacity .18s}
.pp-admin-button:hover{background:rgba(128,128,128,.09);border-color:rgba(128,128,128,.5)}
.pp-admin-button--primary{background:#ffb800;color:#18140a;border-color:#ffb800}.pp-admin-button--primary:hover{background:#f5c43d;border-color:#f5c43d}
.pp-admin-button--danger{color:#e36969}.pp-admin-button:disabled,.pp-admin-plugin-card:disabled{opacity:.5;cursor:wait}
.pp-admin-plugin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.pp-admin-plugin-card{display:flex;flex-direction:column;gap:15px;text-align:left;padding:22px;border:1px solid rgba(128,128,128,.22);border-radius:18px;background:#fff;color:#17191c;min-width:0;cursor:pointer;transition:border-color .22s,box-shadow .22s,background .22s}
.dark .pp-admin-plugin-card{background:#151515;color:#f3f3f3}
.pp-admin-plugin-card:hover{border-color:#b99a42;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.pp-admin-plugin-card:focus-visible,.pp-admin-button:focus-visible,.pp-admin-close:focus-visible{outline:2px solid #dba700;outline-offset:4px}
.pp-admin-plugin-card>strong{font-size:15px;line-height:1.55;font-weight:650}.pp-admin-card-top{width:100%}
.pp-admin-card-top .pp-card-icon,.pp-admin-modal-heading .pp-card-icon{width:42px;height:42px;border-radius:12px;flex-shrink:0;margin:0}
.pp-admin-card-top .pp-card-icon img,.pp-admin-modal-heading .pp-card-icon img{width:27px;height:27px;object-fit:contain}
.pp-admin-card-top .pp-card-icon svg,.pp-admin-modal-heading .pp-card-icon svg{width:25px;height:25px}
.pp-admin-tag{display:inline-flex;align-items:center;white-space:nowrap;font-size:11px;line-height:1.5;padding:5px 8px;border-radius:7px;background:rgba(128,128,128,.1);color:#7c8289}
.pp-admin-tag.is-active{background:rgba(29,162,113,.1);color:#198761}.dark .pp-admin-tag.is-active{color:#65cda8}
.pp-admin-card-meta{margin-top:auto}.pp-admin-card-bottom{width:100%;padding-top:14px;border-top:1px solid rgba(128,128,128,.16);font-size:12px;color:#737b83}.pp-admin-card-bottom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-admin-empty{padding:30px 0;color:#858b91;font-size:14px;line-height:1.7;grid-column:1/-1}
.pp-admin-plugin-dialog{padding:0;border:1px solid rgba(128,128,128,.22);border-radius:22px;width:min(820px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;background:#fff;color:#22252a;box-shadow:0 30px 100px #0005;overflow:auto;overscroll-behavior:contain}
.dark .pp-admin-plugin-dialog{background:#151515;color:#ededed}
.pp-admin-plugin-dialog[open]{animation:pp-admin-dialog-in .26s cubic-bezier(.2,.8,.2,1) both}
.pp-admin-plugin-dialog::backdrop{background:rgba(0,0,0,.58);animation:pp-admin-backdrop-in .24s ease both}
.pp-admin-plugin-dialog.is-closing{animation:pp-admin-dialog-out .18s ease both}.pp-admin-plugin-dialog.is-closing::backdrop{animation:pp-admin-backdrop-out .18s ease both}
.pp-admin-modal-header{padding:24px 28px;border-bottom:1px solid rgba(128,128,128,.2);position:sticky;top:0;background:inherit;z-index:2}.pp-admin-modal-shell{background:inherit}
.pp-admin-modal-heading{display:flex;align-items:center;gap:14px;min-width:0}.pp-admin-modal-heading h2{font-family:Unbounded,sans-serif;font-size:17px;line-height:1.6;margin:4px 0 0;overflow-wrap:anywhere}
.pp-admin-eyebrow{font-size:11px;color:#838a92}.pp-admin-close{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;background:rgba(128,128,128,.1);color:inherit;border:0;border-radius:50%;font:26px/1 Manrope,sans-serif;cursor:pointer;transition:background .18s}.pp-admin-close:hover{background:rgba(128,128,128,.22)}
.pp-admin-modal-body{padding:24px 28px 28px}.pp-admin-tabs{display:flex;gap:22px;margin-bottom:24px;border-bottom:1px solid rgba(128,128,128,.2)}
.pp-admin-tabs button{padding:0 0 12px;border:0;border-bottom:2px solid transparent;background:none;color:#858b91;font:inherit;font-size:13px;cursor:pointer;transition:color .18s,border-color .18s}.pp-admin-tabs button.is-selected{color:inherit;border-bottom-color:#ffb800}
.pp-admin-license{padding:22px 0;border-bottom:1px solid rgba(128,128,128,.2)}.pp-admin-license:last-child{border:0;padding-bottom:0}.pp-admin-license-title{font-size:14px}
.pp-admin-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.pp-admin-facts dd{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere}
.pp-admin-key{display:block;margin:0 0 16px;font-size:12px;color:#858b91}
.pp-admin-plugin-dialog input:not([type=checkbox]),.pp-admin-plugin-dialog select,.pp-admin-plugin-dialog textarea{display:block;width:100%;min-height:42px;padding:10px 12px;margin-top:7px;border:1px solid rgba(128,128,128,.28);border-radius:9px;background:rgba(128,128,128,.04);color:inherit;font:inherit;font-size:13px;outline:none;box-sizing:border-box}
.pp-admin-plugin-dialog select option{background:#fff;color:#222}.dark .pp-admin-plugin-dialog select option{background:#202020;color:#eee}
.pp-admin-plugin-dialog input:focus,.pp-admin-plugin-dialog select:focus,.pp-admin-plugin-dialog textarea:focus{border-color:#c9a12c;box-shadow:0 0 0 2px #ffb80015}.pp-admin-key input{font-family:monospace!important;font-size:12px!important}
.pp-admin-form{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:18px}.pp-admin-form label,.pp-admin-inline-form label{font-size:12px;color:#858b91}.pp-admin-form-panel{padding:20px;background:rgba(128,128,128,.055);border-radius:14px;margin:18px 0}.pp-admin-full{grid-column:1/-1}.pp-admin-form h3{font-size:14px;font-weight:600;margin:0}
.pp-admin-check{display:flex;align-items:center;gap:9px;min-height:42px}.pp-admin-inline-form{display:flex;align-items:end;gap:12px;margin-top:20px}.pp-admin-inline-form label{flex:1}.pp-admin-inline-form button{flex-shrink:0;min-height:42px}
.pp-admin-payment,.pp-admin-event{padding:17px 0;border-bottom:1px solid rgba(128,128,128,.15)}.pp-admin-payment p,.pp-admin-event p{font-size:12px;line-height:1.7;color:#858b91;margin-top:5px;overflow-wrap:anywhere}.pp-admin-event>span,.pp-admin-event>strong{display:block;font-size:12px;margin-bottom:6px}.pp-admin-event>span{color:#858b91}.pp-admin-hint{margin:14px 0}.pp-admin-errors{color:#e36969;font-size:13px;line-height:1.7;padding-top:20px}
@keyframes pp-admin-dialog-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pp-admin-dialog-out{to{opacity:0;transform:translateY(8px) scale(.99)}}
@keyframes pp-admin-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes pp-admin-backdrop-out{to{opacity:0}}
@media(max-width:640px){.pp-client-summary,.pp-admin-section-title{align-items:flex-start;flex-direction:column}.pp-admin-modal-header{padding:20px}.pp-admin-modal-body{padding:20px}.pp-admin-modal-heading h2{font-size:14px}.pp-admin-form{grid-template-columns:1fr}.pp-admin-inline-form{flex-direction:column;align-items:stretch}.pp-admin-facts{gap:14px}.pp-admin-tabs{gap:18px}.pp-admin-plugin-dialog{max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.pp-admin-plugin-dialog[open],.pp-admin-plugin-dialog::backdrop,.pp-admin-plugin-dialog.is-closing,.pp-admin-plugin-dialog.is-closing::backdrop{animation:none}.pp-admin-plugin-card,.pp-admin-button{transition:none}}

/* Catalog actions share one row; product detail and owned-plugin pages retain their layout. */
.pp-cards--catalog .pp-card{grid-row:span 6;row-gap:16px;padding:20px}
.pp-cards--catalog .pp-card-head{padding-top:0;padding-bottom:16px}
.pp-cards--catalog .pp-price-box{min-height:72px;padding-block:12px}
.pp-cards--catalog .pp-facts{gap:10px;padding-bottom:16px}
.pp-cards--catalog .pp-facts li{min-height:38px;gap:12px}
.pp-cards--catalog .pp-fact-icon{width:38px;height:38px}
.pp-cards--catalog .pp-buy--catalog{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;align-self:end;align-items:end}
.pp-buy--catalog .pp-buy-button{min-width:0;font-size:13px;--ss-cta-krug:30px;padding-inline:12px 44px}
.pp-details-button{display:inline-flex;align-items:center;justify-content:center;min-width:0;height:46px;padding:10px 12px;border:1px solid #20aaa0;border-radius:999px;background:rgba(37,203,194,.055);color:#08776e;font-size:13px;font-weight:550;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.dark .pp-details-button{color:#34d9c7;border-color:#25b8a8;background:rgba(37,203,194,.045)}
.pp-details-button:hover{background:rgba(37,203,194,.13);border-color:#15988b}
.pp-details-button:focus-visible{outline:2px solid #25cbc2;outline-offset:3px}
.pp-promo-footer{display:grid;gap:14px;align-content:end;position:relative;z-index:2}
@media(max-width:380px){.pp-cards--catalog .pp-card{padding:18px}.pp-cards--catalog .pp-buy--catalog{gap:8px}.pp-buy--catalog .pp-buy-button{font-size:12px;padding-inline:10px 42px}.pp-details-button{padding-inline:8px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.pp-details-button{transition:none}}

/* Two-line summaries reserve room for a genuine inline detail link. */
.pp-cards--catalog .pp-card-summary{display:block;height:3.2em;min-height:3.2em;max-height:3.2em;line-height:1.6;overflow:hidden;-webkit-line-clamp:unset;line-clamp:unset;align-self:start}
.pp-description-more{position:relative;z-index:2;white-space:nowrap;color:#0d8b84;font-weight:600;text-decoration:none}
.dark .pp-description-more{color:#25cbc2}
.pp-card--promo .pp-description-more{color:var(--promo-link)}
.pp-description-more:hover{text-decoration:underline;text-underline-offset:3px}
.pp-description-more:focus-visible{outline:2px solid #25cbc2;outline-offset:2px;border-radius:2px}

/* Owned licenses are a prominent part of the product introduction. */
.pp-product-main>.pp-licenses-empty{display:none}
.pp-featured-licenses{display:grid;gap:16px;padding:22px;border:1px solid rgba(37,203,194,.4);border-radius:20px;background:linear-gradient(120deg,rgba(37,203,194,.1),rgba(37,203,194,.035));box-shadow:0 8px 32px rgba(37,203,194,.045)}
.dark .pp-featured-licenses{background:linear-gradient(120deg,rgba(37,203,194,.11),rgba(37,203,194,.035));border-color:rgba(37,203,194,.35)}
.pp-featured-license-heading,.pp-featured-license-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pp-featured-license-heading h3{display:flex;align-items:center;gap:10px;font-family:Unbounded,sans-serif;font-size:17px;line-height:1.6}
.pp-featured-license-heading h3>span{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;background:rgba(37,203,194,.13);color:#0d8b84;font-family:Manrope,sans-serif;font-size:12px}
.dark .pp-featured-license-heading h3>span{color:#4ce0d0}
.pp-featured-license-heading p{font-size:12px;color:var(--gray-500);margin-top:4px}
.pp-featured-download{flex-shrink:0;height:46px}
.pp-featured-license{border-top:1px solid rgba(37,203,194,.18);padding-top:18px;min-width:0}
.pp-featured-license-domain{display:flex;gap:12px;align-items:center;flex:1 1 190px;min-width:0}
.pp-featured-license-domain>div{display:grid;gap:5px;min-width:0}.pp-featured-license-domain strong{font-size:16px;font-weight:650;overflow-wrap:anywhere}
.pp-featured-license-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(37,203,194,.12);color:#0d8b84;flex-shrink:0}.pp-featured-license-icon svg{width:22px;height:22px}.dark .pp-featured-license-icon{color:#34d9c7}
.pp-featured-license-term{display:grid;gap:7px;justify-items:start}.pp-featured-license-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#b66d24}.pp-featured-license-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.pp-featured-license-status.is-active{color:#18875c}.dark .pp-featured-license-status.is-active{color:#4bd497}
.pp-featured-license-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-featured-copy{padding:10px 13px;border:1px solid #d4e0dc;border-radius:999px;color:#102b27;background:#fff;font:inherit;font-size:12px;font-weight:600;box-shadow:0 1px 4px #0002;cursor:pointer;transition:background .2s}.pp-featured-copy:hover{background:#e8fff8}
.pp-featured-license-actions .pp-license-action{font-size:12px;display:flex;gap:6px;align-items:center}.pp-featured-copy:focus-visible{outline:2px solid #25cbc2;outline-offset:3px}
.pp-featured-license-details{display:grid;gap:12px;padding-top:18px}.pp-featured-license-details label{display:grid;gap:7px;font-size:12px;color:var(--gray-500)}
.pp-featured-key{display:grid;gap:7px;min-width:0}
.pp-featured-key-row{display:flex;align-items:center;gap:8px;padding:5px;border:1px solid #37b9aa;border-radius:9px;background:#fff;min-width:0}
.dark .pp-featured-key-row{background:#102b27;border-color:#329f90}
.pp-featured-license-details input{flex:1;width:100%;min-width:0;padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#123c35;opacity:1;font:550 13px/1.6 monospace;cursor:text;box-shadow:none;outline:none}
.dark .pp-featured-license-details input{color:#e6fffa}
.pp-featured-key-row:focus-within{outline:2px solid rgba(37,203,194,.3);outline-offset:2px;border-color:#25cbc2}
.pp-featured-key-row .pp-featured-copy{flex-shrink:0;min-width:132px;white-space:nowrap;padding:8px 10px;border-radius:6px}
.pp-featured-license-details p{font-size:12px;line-height:1.6;color:var(--gray-500)}
@media(max-width:600px){.pp-featured-licenses{padding:18px}.pp-featured-license-heading{gap:14px}.pp-featured-license-heading h3{font-size:15px}.pp-featured-license-summary{gap:14px}.pp-featured-license-domain{flex-basis:calc(100% - 130px)}.pp-featured-license-actions{width:100%;gap:16px}.pp-featured-download{font-size:13px}.pp-featured-license-domain strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pp-featured-copy{transition:none}}

/* Approved marketing covers: show the complete artwork in every viewport. */
.pp-cover{min-width:0;width:100%;overflow:hidden;border-radius:14px;background:#101010}
.pp-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.pp-cards--catalog .pp-cover{width:calc(100% + 40px);margin:-20px -20px 0;border-radius:20px 20px 0 0;align-self:start}
.pp-cards--catalog .pp-card-head .pp-card-icon{width:44px;height:44px;border-radius:12px}
.pp-cards--catalog .pp-card-head .pp-card-icon img{max-width:32px;max-height:30px}
.pp-cards--catalog .pp-card-head .pp-card-icon svg{width:26px;height:26px}
.pp-cover--hero{border-radius:20px;box-shadow:0 8px 28px -18px rgba(0,0,0,.3)}
.pp-cover--custom,.pp-cover--placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;gap:24px;background:radial-gradient(ellipse at 50% 70%,rgba(37,203,194,.16),transparent 65%),#101413;color:#25cbc2}
.pp-cover--custom>svg{width:48px;height:48px;padding:10px;box-sizing:content-box;border:1px solid rgba(37,203,194,.22);border-radius:18px;background:rgba(37,203,194,.05)}
.pp-cover--custom>svg:nth-child(2){transform:translateY(-10px);color:#1affd3}
@media(max-width:380px){.pp-cards--catalog .pp-cover{width:calc(100% + 36px);margin:-18px -18px 0}.pp-cover--custom{gap:16px}.pp-cover--custom>svg{width:38px;height:38px}}

/* Compact catalog with the approved price treatment. */
.pp-cards--catalog{gap:18px}
.pp-cards--catalog .pp-card{row-gap:12px;padding:18px}
.pp-cards--catalog .pp-cover{width:calc(100% + 36px);margin:-18px -18px 0}
.pp-cards--catalog .pp-card-head{gap:10px;padding:0;border:0}
.pp-cards--catalog .pp-card-title{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:22px}
.pp-cards--catalog .pp-card-head .pp-card-icon{width:44px;height:44px;border-radius:12px}
.pp-cards--catalog .pp-card-head .pp-card-icon img{max-width:26px;max-height:26px}
.pp-cards--catalog .pp-price-box{min-height:48px;padding:0;gap:10px;border-radius:0;background:none;align-self:center}
.pp-cards--catalog .pp-price-value{font-size:22px;background:none;color:var(--gray-950);line-height:1.25}
.dark .pp-cards--catalog .pp-price-value{color:#f4f4f4}
.pp-cards--catalog .pp-price-value--word{font-size:17px;text-transform:none}
.pp-cards--catalog .pp-price-note{font-size:11px}
.pp-cards--catalog .pp-price-period{font-size:12px}
.pp-cards--catalog .pp-plan-switch{gap:4px}
.pp-cards--catalog .pp-facts{gap:0;padding:0;border:0;font-size:12px}
.pp-cards--catalog .pp-facts li{min-height:24px;gap:8px}
.pp-cards--catalog .pp-fact-icon{width:24px;height:24px}
.pp-cards--catalog .pp-fact-icon svg{width:14px;height:14px}
.pp-cards--catalog .pp-buy--catalog{align-self:start}
/* Selected catalog price treatment: the soft Crocoblock panel for every product. */
.pp-cards--catalog .pp-price-box{background:rgba(37,203,194,.10);border-radius:10px;padding:8px 12px}
/* Custom development: approved graphite banner with a separate responsive cutout. */
.pp-custom-banner{grid-column:1/-1;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(210px,.8fr);align-items:center;gap:16px;min-height:320px;padding:24px;border-radius:20px;background:#101010;color:#fff;border:1px solid #2d3230}
.pp-custom-banner::before{content:'';position:absolute;z-index:-1;inset:-30% -10%;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);background-size:36px 36px;transform:perspective(600px) rotateX(42deg);filter:blur(.7px);mask-image:radial-gradient(ellipse at 55% 70%,#000,transparent 66%);-webkit-mask-image:radial-gradient(ellipse at 55% 70%,#000,transparent 66%)}
.pp-custom-banner-intro{display:block;min-width:0}
.pp-custom-banner-kicker{display:inline-block;font-size:9px;font-weight:650;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:#1affd3;padding:6px 10px;border:1px solid #25cbc2;border-radius:999px}
.pp-custom-banner h2{font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(24px,2.1vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.15;margin:15px 0 12px;color:#fff}
.pp-custom-banner h2 span{color:#1affd3}
.pp-custom-banner p{font-size:13px;line-height:1.55;color:#bfc2c1;margin:0;max-width:330px}
.pp-custom-banner-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.pp-custom-banner-tags>span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;font-size:13px;line-height:1.4;color:#e4e7e5;border:1px solid #353a37;border-radius:7px;background:rgba(255,255,255,.025)}
.pp-custom-banner-tags svg{width:18px;height:18px;flex:none}
.pp-custom-banner-art{min-width:0;display:grid;place-items:center;pointer-events:none}
.pp-custom-banner-art img{display:block;width:100%;height:320px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.pp-custom-banner-price{display:grid;gap:12px}
.pp-custom-banner-price strong{font-family:'Unbounded',system-ui,sans-serif;font-size:clamp(28px,2.3vw,36px);line-height:1.2;font-weight:700;letter-spacing:-.045em;color:#1affd3;white-space:nowrap}
.pp-custom-banner-price span{font-size:13px;line-height:1.55;color:#bfc2c1}
.pp-custom-banner-actions{display:grid;gap:18px;justify-items:start;min-width:0}
.pp-custom-banner-actions .ss-messengers{gap:8px;flex-wrap:wrap}
.pp-custom-banner-actions .ss-pill{font-size:12px;padding:9px 12px;gap:6px;min-height:40px}
.pp-custom-banner-actions .ss-pill img{width:20px;height:20px}
.pp-custom-banner-actions .ss-pill[data-kanal="telegram"]{background:#1affd3;border-color:#1affd3;color:#073b32}
.pp-custom-banner-actions .ss-pill[data-kanal="max"]{background:#171a18;border-color:#545d58;color:#fff}
.pp-custom-banner-actions>a{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#d7e6df;text-underline-offset:4px;text-decoration:underline;text-decoration-color:#25cbc2}
.pp-custom-banner-actions>a svg{width:14px;height:14px}
@media(min-width:1024px) and (max-width:1399px){.pp-custom-banner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px 24px}.pp-custom-banner-art{grid-column:2;grid-row:1/3}.pp-custom-banner-actions{grid-column:1;grid-row:2;gap:12px}.pp-custom-banner-art img{height:340px}.pp-custom-banner-actions .ss-messengers{flex-wrap:wrap}.pp-custom-banner-price{gap:8px}}
@media(min-width:600px) and (max-width:1023px){.pp-custom-banner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px 24px}.pp-custom-banner-art{grid-column:2;grid-row:1/3}.pp-custom-banner-actions{grid-column:1;grid-row:2;gap:12px}.pp-custom-banner-art img{height:320px}}
@media(max-width:599px){.pp-custom-banner{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px;min-height:0}.pp-custom-banner h2{font-size:28px}.pp-custom-banner-kicker{font-size:8px;letter-spacing:.11em}.pp-custom-banner-tags{margin-top:16px}.pp-custom-banner-art img{height:auto;aspect-ratio:3/2;width:100%;max-width:100%}.pp-custom-banner-actions{gap:16px}.pp-custom-banner-price strong{font-size:28px}.pp-custom-banner-price{gap:10px}.pp-custom-banner-actions .ss-messengers{flex-wrap:wrap}.pp-custom-banner-actions .ss-pill{min-height:44px}.pp-custom-banner::before{inset:0 -30%;mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000,transparent 65%)}}
/* Keep the banner between complete rows at each column count. */
.pp-cards--catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
.pp-cards--catalog>.pp-card{order:2}
.pp-cards--catalog>.pp-card:nth-of-type(-n+3){order:0}
.pp-custom-banner{order:1}
@media(min-width:768px) and (max-width:1399px){.pp-cards--catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-cards--catalog>.pp-card:nth-of-type(3){order:2}}
@media(max-width:767px){.pp-cards--catalog{grid-template-columns:minmax(0,1fr)}}
.pp-cards--catalog .pp-pricing{min-width:0}
.pp-cards--catalog .pp-price-box{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:380px){.pp-cards--catalog .pp-pricing[x-data] .pp-price-box{flex-wrap:wrap;gap:4px}.pp-cards--catalog .pp-pricing[x-data] .pp-price-note{flex-basis:100%}}
/* Enlarge the artwork canvas; transparent safety margins keep every metal edge inside its column. */
.pp-custom-banner-art img{width:120%;max-width:none;height:360px}
@media(min-width:600px) and (max-width:1399px){.pp-custom-banner-art img{width:125%;height:360px}}
@media(max-width:599px){.pp-custom-banner-art img{width:140%;height:auto;max-width:none}}

/* Consume the cutout's transparent vertical margins without cropping the metal silhouette. */
@media(min-width:1400px){.pp-custom-banner{min-height:288px}.pp-custom-banner-art{display:flex;align-items:center;justify-content:center;height:288px;margin-block:-24px}}
@media(max-width:599px){.pp-custom-banner-art img{margin-block:-8%}}