/* Proxy Reseller — iPhone-виджет, оформление «Liquid Glass» (светлая/тёмная). */
/* PRXR-BUILD 1.1.29 — маркер сборки для проверки деплоя (ищите в загруженном файле) */
/* Покупатель переключает тему сам (☀️/🌙); реселлер задаёт тему по умолчанию.   */
/* Системные шрифты (без Google Fonts) — виджет грузится быстро.                 */

.prxr-widget-root,
.prxr-overlay,
.prxr-phone * { box-sizing: border-box; }

/* ── Изоляция от CSS темы сайта ──────────────────────────────────────────────
   Тема не должна влиять на кнопки/поля/ссылки/текст виджета. `:where()` даёт
   НУЛЕВУЮ специфичность, поэтому собственные .prxr-* стили ниже всегда
   перекрывают этот сброс, а правила темы (button{}, a{}, .btn{}, input{}) — нет.
   SVG-иконки намеренно не трогаем. Полную изоляцию от `!important`-правил темы
   даёт только Shadow DOM — здесь покрываются обычные (не-!important) темы. */
.prxr-overlay :where(button, input, select, textarea),
.prxr-trigger:where(button, a),
.prxr-trigger :where(button, input, a) {
    font: inherit; letter-spacing: inherit; text-transform: none; text-indent: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit;
    margin: 0; padding: 0; width: auto; min-width: 0; height: auto; min-height: 0;
    line-height: normal; text-align: inherit; text-shadow: none; outline: none;
    text-decoration: none; -webkit-appearance: none; appearance: none; float: none;
    transform: none; transition: none; filter: none;
}
.prxr-overlay :where(a) {
    color: inherit; text-decoration: none; background: none; box-shadow: none; text-transform: none;
}
.prxr-overlay :where(p, h1, h2, h3, h4, h5, ul, ol, li, figure, blockquote, table, hr) {
    margin: 0; padding: 0; text-transform: none; letter-spacing: normal; background: none; border: 0;
}
.prxr-overlay :where(ul, ol) { list-style: none; }

/* ── Дизайн-токены: общие ────────────────────────────────────────────────── */
.prxr-theme-light, .prxr-theme-dark {
    --pr-r-card: 20px; --pr-r-btn: 14px; --pr-r-mini: 999px; --pr-mini-h: 34px;
    --pr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pr-ease-liquid: cubic-bezier(.34,1.56,.64,1);
}

/* ── Дизайн-токены: ТЁМНАЯ (по умолчанию) ────────────────────────────────── */
.prxr-theme-dark {
    --g-aqua: #5ee7df;   --g-aqua-rgb: 94,231,223;
    --g-violet: #b490f5; --g-violet-rgb: 180,144,245;
    --g-amber: #ffd27f;
    --g-ink: #ffffff;
    --g-sub: rgba(255,255,255,.62);
    --g-faint: rgba(255,255,255,.40);
    --g-statusbar-ink: #ffffff;
    --g-screen: linear-gradient(165deg,#10131f 0%,#0c0f1a 55%,#141022 100%);
    --g-glass: rgba(255,255,255,.08);
    --g-glass-md: rgba(255,255,255,.15);
    --g-glass-strong: rgba(255,255,255,.22);
    --g-border: rgba(255,255,255,.16);
    --g-border-soft: rgba(255,255,255,.10);
    --g-border-bright: rgba(255,255,255,.30);
    --g-reflect: rgba(255,255,255,.18);
    --g-card-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
    --g-field: rgba(255,255,255,.06);
    --g-field-focus: rgba(255,255,255,.12);
    --g-field-solid: #1b1f2b; /* непрозрачный тон поля (для перебивки белого автозаполнения) */
    --g-tabbar: rgba(10,12,24,.55);
    --g-home: rgba(255,255,255,.85);
    --g-overlay-bg: rgba(8,10,22,.42); /* полупрозрачная тёмная подложка (сквозь неё видно страницу) */
    --g-scene-op: .55;
    --g-btn-grad: linear-gradient(135deg, rgba(94,231,223,.60) 0%, rgba(120,140,246,.60) 100%);
    --g-btn-grad-hover: linear-gradient(135deg, rgba(94,231,223,.78) 0%, rgba(120,140,246,.78) 100%);
    --g-hero-grad: linear-gradient(135deg, #0b5d6f 0%, #352457 100%);
    --g-ok-bg: rgba(48,209,88,.18);   --g-ok-fg: #5be584;
    --g-warn-bg: rgba(255,159,10,.18); --g-warn-fg: #ffce6b;
    --g-bad-bg: rgba(255,69,58,.18);   --g-bad-fg: #ff7a72;
    --g-neutral-bg: rgba(142,142,147,.2); --g-neutral-fg: #c2c7d4;
}

/* ── Дизайн-токены: СВЕТЛАЯ ──────────────────────────────────────────────── */
.prxr-theme-light {
    --g-aqua: #0891b2;   --g-aqua-rgb: 8,145,178;
    --g-violet: #6d28d9; --g-violet-rgb: 109,40,217;
    --g-amber: #b45309;
    --g-ink: #0f172a;
    --g-sub: rgba(15,23,42,.60);
    --g-faint: rgba(15,23,42,.42);
    --g-statusbar-ink: #0f172a;
    --g-screen: linear-gradient(165deg,#eaf0fb 0%,#dde7f6 50%,#cdd9f0 100%);
    --g-glass: rgba(255,255,255,.55);
    --g-glass-md: rgba(255,255,255,.72);
    --g-glass-strong: rgba(255,255,255,.88);
    --g-border: rgba(15,23,42,.12);
    --g-border-soft: rgba(15,23,42,.08);
    --g-border-bright: rgba(15,23,42,.22);
    --g-reflect: rgba(255,255,255,.55);
    --g-card-shadow: 0 8px 30px rgba(31,60,120,.12), inset 0 1px 0 rgba(255,255,255,.6);
    --g-field: rgba(255,255,255,.55);
    --g-field-focus: rgba(255,255,255,.85);
    --g-field-solid: #eef3f9; /* непрозрачный тон поля (для перебивки белого автозаполнения) */
    --g-tabbar: rgba(255,255,255,.55);
    --g-home: rgba(15,23,42,.55);
    --g-overlay-bg: rgba(210,222,240,.55);
    --g-scene-op: .35;
    --g-btn-grad: linear-gradient(135deg, rgba(8,145,178,.85) 0%, rgba(109,40,217,.80) 100%);
    --g-btn-grad-hover: linear-gradient(135deg, rgba(8,145,178,1) 0%, rgba(109,40,217,.95) 100%);
    --g-hero-grad: linear-gradient(135deg, #0a6f88 0%, #4a2296 100%);
    --g-ok-bg: rgba(21,128,61,.12);  --g-ok-fg: #15803d;
    --g-warn-bg: rgba(180,83,9,.12); --g-warn-fg: #b45309;
    --g-bad-bg: rgba(185,28,28,.10); --g-bad-fg: #b91c1c;
    --g-neutral-bg: rgba(15,23,42,.08); --g-neutral-fg: #475569;
}

/* ── Триггер: контейнер размещения (fixed/absolute + 8 позиций) ──────────── */
.prxr-trigger-pos { position: fixed; z-index: 99990; }
.prxr-trigger-pos.prxr-pin-fixed  { position: fixed; }
.prxr-trigger-pos.prxr-pin-scroll { position: absolute; }
.prxr-pos-lt { top: 22px;  left: 22px;  right: auto; bottom: auto; }
.prxr-pos-lb { bottom: 22px; left: 22px; right: auto; top: auto; }
.prxr-pos-rt { top: 22px;  right: 22px; left: auto; bottom: auto; }
.prxr-pos-rb { bottom: 22px; right: 22px; left: auto; top: auto; }
.prxr-pos-lm { top: 50%; left: 22px;  right: auto; bottom: auto; transform: translateY(-50%); }
.prxr-pos-rm { top: 50%; right: 22px; left: auto;  bottom: auto; transform: translateY(-50%); }
.prxr-pos-ct { top: 22px;  left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
.prxr-pos-cb { bottom: 22px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }

.prxr-trigger {
    cursor: pointer; user-select: none; display: inline-block;
    transition: transform .18s var(--pr-ease-liquid);
    font-family: var(--pr-font);
}
.prxr-trigger:hover { transform: translateY(-3px) scale(1.03); }
.prxr-trigger:active { transform: scale(.96); }
.prxr-trigger img { display: block; max-width: 180px; max-height: 90px; border-radius: 16px; }

/* Классический вид кнопки/баннера — стеклянный с акцентным градиентом */
.prxr-trigger--icon {
    display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px;
    background: var(--g-btn-grad); border: 1px solid rgba(var(--g-aqua-rgb),.45); color: #fff;
    font-weight: 600; font-size: 15px; letter-spacing: .3px;
    box-shadow: 0 10px 28px rgba(var(--g-aqua-rgb),.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.prxr-icon-emoji { font-size: 20px; line-height: 1; }
.prxr-trigger--banner {
    display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 18px;
    background: var(--g-btn-grad); border: 1px solid rgba(var(--g-aqua-rgb),.45); color: #fff;
    font-weight: 700; font-size: 17px;
    box-shadow: 0 12px 30px rgba(var(--g-aqua-rgb),.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.prxr-banner-emoji { font-size: 26px; line-height: 1; }

/* ── Встроенный баннер (шорткод inline) — встаёт ровно на место вставки ───── */
.prxr-trigger--inline { display: inline-block; vertical-align: middle; max-width: 100%; }
.prxr-trigger--inline.prxr-trigger--banner { justify-content: center; }
.prxr-trigger--inline.prxr-has-img {
    padding: 0; border: 0; background: none; box-shadow: none; border-radius: 14px; overflow: hidden; line-height: 0;
}
.prxr-trigger--inline.prxr-has-img img {
    width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; border-radius: inherit; display: block;
}

/* ── Темы кнопки-триггера (объёмная «3D»-кнопка) — независимы от темы виджета */
.prxr-trigger.prxr-btn-candy.prxr-trigger--icon,
.prxr-trigger.prxr-btn-green.prxr-trigger--icon,
.prxr-trigger.prxr-btn-red.prxr-trigger--icon,
.prxr-trigger.prxr-btn-blue.prxr-trigger--icon {
    color: #1f2020; font-weight: 700; letter-spacing: 0;
    border: 1px solid rgba(0,0,0,.18); border-bottom-width: 6px; border-radius: 18px;
    background-image: linear-gradient(155deg, rgba(255,255,255,.24), rgba(0,0,0,.07) 55%, rgba(255,255,255,.26));
    box-shadow: 0 8px 10px rgba(0,0,0,.2); text-shadow: none;
    transition: transform .12s ease, border-bottom-width .12s ease, box-shadow .12s ease;
}
.prxr-trigger.prxr-btn-candy.prxr-trigger--icon { background-color: #f9f6ef; }
.prxr-trigger.prxr-btn-green.prxr-trigger--icon { background-color: hsl(95 58% 78%); }
.prxr-trigger.prxr-btn-red.prxr-trigger--icon   { background-color: hsl(2 78% 80%); }
.prxr-trigger.prxr-btn-blue.prxr-trigger--icon  { background-color: hsl(210 82% 80%); }
.prxr-trigger.prxr-btn-candy.prxr-trigger--icon:active,
.prxr-trigger.prxr-btn-green.prxr-trigger--icon:active,
.prxr-trigger.prxr-btn-red.prxr-trigger--icon:active,
.prxr-trigger.prxr-btn-blue.prxr-trigger--icon:active {
    transform: translateY(3px) scale(.99); border-bottom-width: 2px; box-shadow: 0 3px 5px rgba(31,32,32,.35);
}

/* ── Оверлей + анимированный фон-блобы за телефоном ──────────────────────── */
.prxr-overlay {
    position: fixed; inset: 0; z-index: 99999; overflow: hidden;
    /* Никакой мобильной «подсветки» кнопок при тапе (серый/синий блик iOS/Android).
       Наследуется всем содержимым — при переключении вкладок красятся только
       эмодзи и текст, самой кнопки не видно. */
    -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
    background: var(--g-overlay-bg);
    backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1);
    font-family: var(--pr-font);
    animation: prxr-fade .2s ease;
}
@keyframes prxr-fade { from { opacity: 0; } to { opacity: 1; } }
.prxr-overlay[hidden] { display: none; }

.prxr-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* «Капли» фона: мягкость запечена в сам градиент (прозрачный край) вместо
   filter: blur(80px) — блюр трёх огромных слоёв на каждый кадр анимации был
   самым дорогим местом рендера (лаги на телефонах). Вид тот же, стоимость ~0. */
.prxr-blob {
    position: absolute; border-radius: 50%;
    opacity: var(--g-scene-op); will-change: transform;
    animation: prxr-blob-drift var(--bd, 20s) ease-in-out infinite alternate;
}
.prxr-blob-1 { width: 74vmin; height: 74vmin; top: -18%; left: -14%;
    background: radial-gradient(circle, rgba(94,231,223,.85) 0%, rgba(59,130,246,.40) 42%, transparent 70%); --bd: 22s; }
.prxr-blob-2 { width: 68vmin; height: 68vmin; bottom: -20%; right: -12%;
    background: radial-gradient(circle, rgba(180,144,245,.85) 0%, rgba(236,72,153,.40) 42%, transparent 70%); --bd: 17s; animation-delay: -8s; }
.prxr-blob-3 { width: 50vmin; height: 50vmin; top: 34%; left: 42%;
    background: radial-gradient(circle, rgba(255,210,127,.80) 0%, rgba(247,168,196,.35) 42%, transparent 70%); --bd: 25s; animation-delay: -13s; }
@keyframes prxr-blob-drift {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(6%, -5%) scale(1.08); }
    66%  { transform: translate(-5%, 6%) scale(.94); }
    100% { transform: translate(4%, 4%) scale(1.04); }
}

/* ── Корпус iPhone (тёмный в тёмной теме, светлый в светлой) ─────────────── */
.prxr-phone {
    position: relative; z-index: 1;
    /* Натуральный корпус 538×896: ширина на 30% больше iPhone 11 (414), чтобы
       помещался мелкий текст (шрифт 12). Под экран подгоняем РАВНОМЕРНО через
       transform: scale(--prxr-scale) — рамка И весь контент (шрифты, отступы,
       кнопки) уменьшаются пропорционально, текст не ломается. Коэффициент считает
       widget.js (fitPhone): на мобильном — во всю ширину устройства. */
    width: 538px; height: 896px;
    transform: scale(var(--prxr-scale, 1));
    transform-origin: center center;
    will-change: transform; /* корпус живёт на GPU-слое: scale без перерисовки содержимого */
    background-color: #0a0a0c;
    background-image: linear-gradient(150deg,#1b1b1f 0%,#0a0a0c 60%,#050506 100%);
    border-radius: 60px; padding: 11px;
    box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1.5px rgba(255,255,255,.06) inset;
    animation: prxr-pop .26s cubic-bezier(.34,1.4,.64,1);
}
/* 📱 Мобильный стандарт: корпус у́же (430) — на телефоне даёт ВСЮ ширину
   устройства и более КРУПНЫЙ контент (меньше ужимается). Ширина синхронизирована
   с fitPhone (scale = ширина_экрана / 430). */
@media (max-width: 640px) {
    .prxr-phone { width: 430px; height: 820px; }
}
/* Светлая тема: серебристый корпус (как светлый iPhone). */
.prxr-theme-light .prxr-phone {
    background-color: #e6e9ee;
    background-image: linear-gradient(150deg,#f6f7f9 0%,#e2e6ec 58%,#cfd5df 100%);
    box-shadow: 0 30px 70px rgba(31,60,120,.22), 0 0 0 1.5px rgba(0,0,0,.10) inset;
}
@keyframes prxr-pop {
    from { transform: scale(calc(var(--prxr-scale, 1) * .92)); opacity: 0; }
    to   { transform: scale(var(--prxr-scale, 1)); opacity: 1; }
}
.prxr-phone::after {
    content: ""; position: absolute; inset: 4px; border-radius: 56px; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.07) inset;
}
.prxr-theme-light .prxr-phone::after {
    box-shadow: 0 0 0 1px rgba(0,0,0,.10) inset;
}
/* Едва заметное свечение по периметру: светлая дуга «переливается» по часовой
   стрелке вокруг корпуса. Крутим УГОЛ конического градиента (@property), а не
   сам блок — иначе высокий прямоугольник вылезал бы углами. Цвет — из темы. */
@property --prxr-glow-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.prxr-phone::before {
    content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 62px;
    pointer-events: none; will-change: background;
    background: conic-gradient(from var(--prxr-glow-a),
        transparent 0deg,
        rgba(var(--g-aqua-rgb),0) 40deg,
        rgba(var(--g-aqua-rgb),.6) 95deg,
        rgba(var(--g-violet-rgb),.6) 160deg,
        rgba(var(--g-violet-rgb),0) 215deg,
        transparent 360deg);
    filter: blur(12px); opacity: .4;
    animation: prxr-glow-rot 10s linear infinite;
}
@keyframes prxr-glow-rot { to { --prxr-glow-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .prxr-phone::before { animation: none; } }
/* На мобильном свечение статично: анимация размытого conic-градиента дорогая,
   а на маленьком экране движение дуги почти не заметно. */
@media (max-width: 640px) { .prxr-phone::before { animation: none; } }

/* ── Экран: стеклянный холст с внутренними «каплями» ─────────────────────── */
.prxr-screen {
    position: relative; width: 100%; height: 100%;
    border-radius: 49px; overflow: hidden;
    display: flex; flex-direction: column;
    color: var(--g-ink);
    background: var(--g-screen);
    contain: paint; /* перерисовки внутри экрана не выходят за его пределы */
}
.prxr-screen::before {
    content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
    will-change: transform;
    background:
        radial-gradient(closest-side, rgba(var(--g-aqua-rgb),.40), transparent) 14% 20% / 52% 52% no-repeat,
        radial-gradient(closest-side, rgba(var(--g-violet-rgb),.36), transparent) 84% 26% / 56% 56% no-repeat,
        radial-gradient(closest-side, rgba(255,210,127,.30), transparent) 60% 84% / 54% 54% no-repeat;
    animation: prxr-blob-drift 24s ease-in-out infinite alternate;
}
.prxr-statusbar, .prxr-nav, .prxr-content, .prxr-tabbar, .prxr-home { position: relative; z-index: 1; }

/* ── Dynamic Island ──────────────────────────────────────────────────────── */
.prxr-island {
    flex: 0 0 auto; margin: 0 10px;
    height: 29px; min-width: 104px;
    background: #000; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; gap: 0;
    overflow: hidden; padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    transition: min-width .35s cubic-bezier(.34,1.4,.64,1), padding .35s ease;
}
.prxr-di-cam {
    width: 7px; height: 7px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2a4a52, #02080a 70%);
    flex: 0 0 auto; opacity: .9;
}
.prxr-di-stat { display: none; color: var(--g-aqua); font-size: 12px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; line-height: 1; font-variant-numeric: tabular-nums; }
.prxr-di-stat .prxr-di-ic { opacity: .85; margin-right: 3px; font-weight: 400; font-size: 11px; }
.prxr-island.has-info { min-width: 170px; padding: 0 12px; gap: 9px; }
.prxr-island.has-info .prxr-di-stat { display: inline-flex; align-items: center; animation: prxr-di-in .35s ease; }
.prxr-island.has-info .prxr-di-right { color: #5be584; }
@keyframes prxr-di-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Статус-бар ──────────────────────────────────────────────────────────── */
.prxr-statusbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 32px 6px; font-weight: 600; font-size: 15px; flex: 0 0 auto;
    color: var(--g-statusbar-ink);
}
.prxr-time { flex: 1 1 0; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.prxr-sb-icons { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.prxr-sb-icons svg { fill: var(--g-statusbar-ink); display: block; }
.prxr-batt { position: relative; width: 24px; height: 12px; border: 1px solid color-mix(in srgb, var(--g-statusbar-ink) 45%, transparent); border-radius: 3px; display: inline-block; }
.prxr-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 6px; background: color-mix(in srgb, var(--g-statusbar-ink) 45%, transparent); border-radius: 1px; }
.prxr-batt-fill { position: absolute; inset: 1.5px; width: 78%; background: var(--g-statusbar-ink); border-radius: 1.5px; }

/* ── Навигация (язык · заголовок · переключатель темы · закрыть) ─────────── */
.prxr-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 18px 8px; flex: 0 0 auto; }
.prxr-nav-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    text-align: center; font-weight: 600; font-size: 17px; letter-spacing: -.2px;
    color: var(--g-ink); pointer-events: none;
    max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prxr-nav-right { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.prxr-subhead { display: flex; align-items: center; gap: 12px; min-height: 38px; margin: 6px 0 12px; }
.prxr-subhead .prxr-mini { flex: 0 0 auto; }
.prxr-subhead-title {
    flex: 1 1 auto; min-width: 0; text-align: center;
    font-weight: 600; font-size: 17px; letter-spacing: -.2px; color: var(--g-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prxr-lang { display: inline-flex; gap: 2px; background: var(--g-glass); border: 1px solid var(--g-border-soft); border-radius: 9px; padding: 2px; }
.prxr-lang a { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--g-sub); padding: 4px 9px; border-radius: 7px; transition: .15s; }
.prxr-lang a.on { background: rgba(var(--g-aqua-rgb),.20); color: var(--g-aqua); }
.prxr-x, .prxr-theme-toggle {
    border: 1px solid var(--g-border); background: var(--g-glass); color: var(--g-ink);
    width: 31px; height: 31px; border-radius: 50%; font-size: 14px; cursor: pointer; line-height: 1;
    transition: .15s var(--pr-ease-liquid); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;

}
.prxr-x:hover, .prxr-theme-toggle:hover { background: var(--g-glass-md); }
.prxr-x:active { transform: scale(.92); }
.prxr-theme-toggle:hover { transform: scale(1.08) rotate(12deg); }
.prxr-tt-light { display: none; }
.prxr-tt-dark  { display: inline; }
.prxr-theme-light .prxr-tt-dark  { display: none; }
.prxr-theme-light .prxr-tt-light { display: inline; }

/* ── Контент ─────────────────────────────────────────────────────────────── */
.prxr-content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 18px; background: transparent; }
.prxr-content::-webkit-scrollbar { width: 0; }
/* iOS Large Title: крупный, плотный трекинг как в SF Pro Display */
.prxr-h1 { font-size: 28px; font-weight: 700; margin: 10px 4px 16px; letter-spacing: -.6px; color: var(--g-ink); }

/* Стеклянная карточка */
.prxr-card {
    position: relative; overflow: hidden;
    background: var(--g-glass);
    border: 1px solid var(--g-border); border-radius: var(--pr-r-card); padding: 16px; margin-bottom: 14px;
    box-shadow: var(--g-card-shadow); color: var(--g-ink);
    animation: prxr-rise .28s ease both;
}
.prxr-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: linear-gradient(135deg, var(--g-reflect) 0%, transparent 45%);
}
.prxr-card > * { position: relative; z-index: 1; }
@keyframes prxr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prxr-card-top { display: flex; align-items: center; gap: 12px; }
.prxr-card-emoji {
    width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    background: linear-gradient(150deg,#5ee7df,#b490f5); color: #0d1326;
    box-shadow: 0 6px 16px rgba(94,231,223,.30), inset 0 1px 0 rgba(255,255,255,.4);
}
.prxr-card-name { font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--g-ink); }
.prxr-card-sub { color: var(--g-sub); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.prxr-card-from { margin-left: auto; text-align: right; }
.prxr-card-from b { font-size: 18px; color: var(--g-aqua); }
.prxr-card-from span { display: block; font-size: 12px; color: var(--g-sub); }

.prxr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prxr-chip {
    border: 1px solid var(--g-border); border-radius: 15px; padding: 9px 12px; cursor: pointer;
    font-size: 13px; color: var(--g-sub); background: var(--g-glass); transition: .14s; text-align: center; min-width: 66px;

}
.prxr-chip:active { transform: scale(.95); }
.prxr-chip b { display: block; font-size: 14px; color: var(--g-ink); margin-top: 2px; }
.prxr-chip.on { border-color: rgba(var(--g-aqua-rgb),.6); background: rgba(var(--g-aqua-rgb),.16); color: var(--g-aqua); box-shadow: 0 0 16px rgba(var(--g-aqua-rgb),.22); }
.prxr-chip.on b { color: var(--g-aqua); }

/* Основная кнопка */
.prxr-buy {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 54px; margin-top: 14px; padding: 15px; cursor: pointer;
    border: 1px solid rgba(var(--g-aqua-rgb),.45); border-radius: var(--pr-r-btn);
    background: var(--g-btn-grad);
    color: #fff; font-weight: 600; font-size: 18px; letter-spacing: -.1px; font-family: var(--pr-font);
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
    box-shadow: 0 8px 22px rgba(var(--g-aqua-rgb),.30), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .12s, box-shadow .2s, background .2s; line-height: 1.1;
}
.prxr-buy:not(:disabled):hover { background: var(--g-btn-grad-hover); transform: translateY(-1px); }
.prxr-buy:disabled { background: var(--g-glass-md); border-color: var(--g-border); color: var(--g-faint); text-shadow: none; box-shadow: none; cursor: default; }
.prxr-buy:not(:disabled):active { transform: scale(.98); }

.prxr-empty { text-align: center; color: var(--g-sub); font-size: 16px; padding: 56px 20px; }
.prxr-empty-ic { font-size: 46px; display: block; margin-bottom: 10px; }

/* ── Поля и сегменты ─────────────────────────────────────────────────────── */
/* Сегменты в стиле iOS UISegmentedControl: активный — приподнятая «пилюля» */
.prxr-seg { display: flex; background: var(--g-glass); border: 1px solid var(--g-border-soft); border-radius: 12px; padding: 3px; margin: 0 0 14px; }
.prxr-seg button { flex: 1; border: 0; background: none; padding: 11px; border-radius: 9px; font-weight: 600; font-size: 16px; color: var(--g-sub); cursor: pointer; font-family: inherit; transition: .15s; }
.prxr-seg button.on {
    background: var(--g-glass-strong); color: var(--g-ink);
    box-shadow: 0 3px 8px rgba(0,0,0,.16), inset 0 .5px 0 rgba(255,255,255,.35);
}
.prxr-in {
    width: 100%; border: 1px solid var(--g-border); border-radius: 14px; padding: 15px 16px;
    /* ≥16px — чтобы Safari не приближал экран при фокусе */
    font-size: 17px; margin-bottom: 12px; font-family: inherit; background: var(--g-field); color: var(--g-ink);
    -webkit-appearance: none; transition: .15s;
}
.prxr-in::placeholder { color: var(--g-faint); }
.prxr-in:focus { outline: none; border-color: rgba(var(--g-aqua-rgb),.6); background: var(--g-field-focus); box-shadow: 0 0 0 3px rgba(var(--g-aqua-rgb),.16); }
/* Прячем встроенные браузерные иконки в поле пароля (Edge/Windows «глаз» и крестик,
   Safari — кнопки автозаполнения), чтобы поле «Пароль» выглядело так же, как «Логин». */
.prxr-in::-ms-reveal,
.prxr-in::-ms-clear { display: none; }
.prxr-in::-webkit-credentials-auto-fill-button,
.prxr-in::-webkit-strong-password-auto-fill-button,
.prxr-in::-webkit-contacts-auto-fill-button {
    visibility: hidden; pointer-events: none; position: absolute; right: 0; width: 0; height: 0; margin: 0;
}
/* Автозаполнение (особенно iOS Safari на type=password) красит поле сплошным
   белым. Перебиваем непрозрачной inset-тенью цвета поля + задаём цвет текста —
   поле «Пароль» выглядит как «Логин». box-shadow inset — единственный способ
   переопределить фон автозаполнения (background-color браузер игнорирует). */
input.prxr-in:-webkit-autofill,
input.prxr-in:-webkit-autofill:hover,
input.prxr-in:-webkit-autofill:focus,
input.prxr-in:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--g-field-solid, #1b1f2b) inset !important;
    box-shadow: 0 0 0 1000px var(--g-field-solid, #1b1f2b) inset !important;
    -webkit-text-fill-color: var(--g-ink, #fff) !important;
    caret-color: var(--g-ink);
    border: 1px solid var(--g-border) !important;
}
.prxr-theme-light input.prxr-in:-webkit-autofill { -webkit-text-fill-color: var(--g-ink, #0f172a) !important; }
.prxr-err { color: var(--g-bad-fg); font-size: 14px; min-height: 18px; margin-bottom: 4px; }

/* ── Разделы, прокси-строки, мини-кнопки ─────────────────────────────────── */
/* Заголовки секций — как в Настройках iOS: серый uppercase footnote */
.prxr-sec { font-size: 13px; font-weight: 600; color: var(--g-sub); text-transform: uppercase; letter-spacing: .06em; margin: 18px 8px 8px; }
.prxr-proxy {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; color: var(--g-ink);
    background: var(--g-glass); border: 1px solid var(--g-border-soft); border-radius: 11px; padding: 11px 13px; margin: 8px 0;
    word-break: break-all; line-height: 1.5;
}
.prxr-mini {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: var(--pr-mini-h); padding: 0 14px; border: 1px solid rgba(var(--g-aqua-rgb),.4); border-radius: var(--pr-r-mini);
    background: rgba(var(--g-aqua-rgb),.14); color: var(--g-aqua);
    font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1;
    transition: .14s; white-space: nowrap;
}
.prxr-mini:active { transform: scale(.96); background: rgba(var(--g-aqua-rgb),.26); }
.prxr-mini:disabled { opacity: .4; }
.prxr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.prxr-actions .prxr-mini { flex: 1 1 auto; }

.prxr-status { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.prxr-st-pending   { background: var(--g-warn-bg);    color: var(--g-warn-fg); }
.prxr-st-confirmed { background: var(--g-ok-bg);      color: var(--g-ok-fg); }
.prxr-st-rejected  { background: var(--g-bad-bg);     color: var(--g-bad-fg); }
.prxr-st-expired   { background: var(--g-neutral-bg); color: var(--g-neutral-fg); }

/* Профиль */
.prxr-profile {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px; background: var(--g-glass);

    border: 1px solid var(--g-border); border-radius: var(--pr-r-card); padding: 14px 16px; margin-bottom: 14px;
    box-shadow: var(--g-card-shadow);
}
.prxr-profile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(135deg, var(--g-reflect) 0%, transparent 45%); }
.prxr-profile > * { position: relative; z-index: 1; }
.prxr-avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: #0d1326; background: linear-gradient(150deg,#5ee7df,#b490f5); box-shadow: 0 4px 14px rgba(94,231,223,.40); }
.prxr-profile-meta { flex: 1; min-width: 0; }
.prxr-profile-name { font-weight: 600; font-size: 16px; color: var(--g-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prxr-profile-sub { color: var(--g-sub); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кошелёк-герой (акцентный градиент) */
.prxr-wallet {
    position: relative; overflow: hidden; margin: 18px 0 14px;
    background: var(--g-hero-grad); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 18px 20px;
    box-shadow: 0 14px 34px rgba(var(--g-violet-rgb),.34), inset 0 1px 0 rgba(255,255,255,.3);
}
.prxr-wallet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 45%); }
.prxr-wallet > * { position: relative; }
.prxr-wallet-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.prxr-wallet-amt { font-size: 34px; font-weight: 800; margin: 6px 0 2px; letter-spacing: -.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.38); font-variant-numeric: tabular-nums; }
.prxr-wallet-gb { font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.42); }
/* Одноцветная контурная иконка «график» (замена эмодзи 📊) — наследует цвет текста */
.prxr-ic-chart { vertical-align: -.15em; flex: 0 0 auto; }
/* Мини-график расхода GB — на всю ширину карточки, между суммой и «Пополнить» */
.prxr-wallet-chart { width: 100%; margin-top: 12px; }
.prxr-wallet-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.prxr-wallet-chart-cap { font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.42); margin-top: 4px; text-align: center; min-height: 14px; font-variant-numeric: tabular-nums; }
.prxr-wbar rect { transition: fill .15s; cursor: pointer; }
.prxr-wbar:hover rect { fill: #fff; }
.prxr-wallet .prxr-mini { background: rgba(255,255,255,.24); color: #fff; border: 1px solid rgba(255,255,255,.35); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.prxr-wallet .prxr-mini:active { background: rgba(255,255,255,.34); }

/* Пагинация */
.prxr-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 2px; }
.prxr-pager-info { font-size: 14px; color: var(--g-sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.prxr-pager .prxr-mini { min-width: 44px; padding: 0 12px; font-size: 17px; flex: 0 0 auto; }

/* ── Отзывы ──────────────────────────────────────────────────────────────── */
.prxr-stars { font-size: 27px; letter-spacing: 4px; margin: 6px 0 10px; user-select: none; }
.prxr-stars span { cursor: pointer; color: var(--g-faint); }
textarea.prxr-in { resize: none; line-height: 1.4; }
select.prxr-in { -webkit-appearance: none; appearance: none; }
.prxr-bubble { margin-top: 10px; padding: 11px 14px; background: var(--g-glass); border: 1px solid var(--g-border-soft); border-radius: 16px 16px 16px 5px; font-size: 15px; color: var(--g-ink); line-height: 1.45; word-break: break-word; }
.prxr-review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Горизонтальные строки настроек */
.prxr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 2px; cursor: pointer; min-height: 48px; transition: opacity .12s; }
.prxr-row + .prxr-row { border-top: .5px solid var(--g-border-soft); }
.prxr-row:active { opacity: .5; }
.prxr-row-label { font-weight: 600; font-size: 16px; color: var(--g-ink); flex: 0 0 auto; }
.prxr-row-val { color: var(--g-sub); font-size: 15px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prxr-row-val.on { color: var(--g-aqua); font-weight: 600; }
.prxr-row[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── Таб-бар ─────────────────────────────────────────────────────────────── */
.prxr-tabbar {
    flex: 0 0 auto; display: flex; padding: 9px 6px 4px;
    background: var(--g-tabbar);
    border-top: 1px solid var(--g-border-soft);
}
.prxr-tab { flex: 1 1 0; min-width: 0; border: 0; background: none; cursor: pointer; color: var(--g-sub); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; font-family: inherit; padding: 4px 0; transition: .14s; }
.prxr-tab > span:last-child { line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prxr-tab-ic { height: 25px; display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; filter: grayscale(1) opacity(.5); transition: .16s; }
.prxr-tab.on { color: var(--g-aqua); }
.prxr-tab.on .prxr-tab-ic { filter: none; transform: translateY(-1px); }
.prxr-tab:active .prxr-tab-ic { transform: scale(.88); }

.prxr-home { flex: 0 0 auto; display: flex; justify-content: center; padding: 6px 0 9px; }
.prxr-home::before { content: ""; width: 138px; height: 5px; background: var(--g-home); border-radius: 3px; opacity: .9; }

/* ══════════════ ВНУТРЕННИЙ ДИЗАЙН: доводка ══════════════ */

/* Карточки товара — лёгкий подъём и подсветка рамки при наведении (ПК) */
.prxr-card { transition: transform .2s var(--pr-ease-liquid), box-shadow .2s, border-color .2s; }
.prxr-card[data-pid] { cursor: default; }
.prxr-card[data-pid]:hover {
    transform: translateY(-3px);
    border-color: var(--g-border-bright);
    box-shadow: 0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);
}
.prxr-theme-light .prxr-card[data-pid]:hover {
    box-shadow: 0 18px 42px rgba(31,60,120,.18), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Иконка товара / аватар — тонкое кольцо */
.prxr-card-emoji, .prxr-avatar { border: 1px solid rgba(255,255,255,.30); }

/* Основная кнопка — блик-пробег при наведении + мягкое нажатие */
.prxr-buy::after {
    content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
    transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.prxr-buy:not(:disabled):hover::after { animation: prxr-sheen .85s ease; }
.prxr-buy:not(:disabled):active { transform: translateY(1px) scale(.99); box-shadow: 0 4px 14px rgba(var(--g-aqua-rgb),.32), inset 0 1px 0 rgba(255,255,255,.35); }
@keyframes prxr-sheen { 0% { left: -70%; opacity: 0; } 15% { opacity: .9; } 100% { left: 130%; opacity: 0; } }

/* Чипы — ховер и выбранное состояние с лёгким подъёмом */
.prxr-chip { transition: transform .14s var(--pr-ease-liquid), background .14s, border-color .14s, box-shadow .14s; }
.prxr-chip:hover { border-color: var(--g-border-bright); background: var(--g-glass-md); }
.prxr-chip.on { transform: translateY(-1px); }

/* Мини-кнопки — ховер */
.prxr-mini { transition: transform .14s var(--pr-ease-liquid), background .14s, box-shadow .14s; }
.prxr-mini:hover { background: rgba(var(--g-aqua-rgb),.22); }

/* Прокси-строка — тонкий акцент слева */
.prxr-proxy { border-left: 2px solid rgba(var(--g-aqua-rgb),.4); }

/* Кошелёк — декоративное свечение в углу, контент поверх */
.prxr-wallet::after {
    content: ""; position: absolute; right: -30px; top: -50px; width: 150px; height: 150px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.30), transparent 70%);
    pointer-events: none; z-index: 0;
}
.prxr-wallet::before { z-index: 0; }
.prxr-wallet > * { z-index: 1; }

/* Таб-бар — по-нативному: активная вкладка только тинтом, с пружинкой иконки */
.prxr-tab.on .prxr-tab-ic { animation: prxr-tab-spring .3s var(--pr-ease-liquid); }
@keyframes prxr-tab-spring { 0% { transform: scale(.85); } 60% { transform: scale(1.08) translateY(-1px); } 100% { transform: translateY(-1px); } }

/* Сегмент-переключатель — плавнее */
.prxr-seg button { transition: background .18s, color .18s, box-shadow .18s; }

/* ── Мобайл ──────────────────────────────────────────────────────────────────
   Размеры на мобильном НЕ переопределяем: весь корпус равномерно уменьшается
   через transform:scale (см. .prxr-phone), поэтому вид 1-в-1 как на ПК, только
   мельче. Оставляем лишь визуальную настройку — чуть темнее экран в тёмной теме. */
@media (max-width: 440px) {
    .prxr-theme-dark .prxr-screen { background: linear-gradient(165deg,#0b0e18 0%,#080a12 55%,#0c0916 100%); }
    .prxr-theme-dark .prxr-screen::before { opacity: .5; }
}

/* ── prefers-reduced-motion: гасим дрейф «капель» ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .prxr-blob, .prxr-screen::before { animation: none; }
}