body {
        height: 100dvh; 
        -webkit-tap-highlight-color: transparent;
        line-height: 1.6;
    }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Фоновые градиенты (Аура) */
    @keyframes blob {
        0% { transform: translate(0px, 0px) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 15s infinite alternate; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }

    /* Glassmorphism */
    .glass-panel {
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }

    #pn-btn-analyze-barriers {
        width: 100%;
        border: 1px solid var(--border-subtle);
        color: var(--text-main);
        background: color-mix(in srgb, var(--bg-surface) 78%, transparent);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    #pn-btn-analyze-barriers:hover {
        border-color: var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    }

    /* Индикатор печати ИИ (Стальной / Мягкий голубой) */
    .ai-typing-glow {
        animation: breathe 2.5s infinite ease-in-out;
    }
    @keyframes breathe {
        0%, 100% { box-shadow: 0 0 10px rgba(100, 116, 139, 0.15); transform: scale(1); }
        50% { box-shadow: 0 0 25px rgba(100, 116, 139, 0.4); transform: scale(1.05); }
    }

    /* Анимация появления сообщений */
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }

    /* Стили для Markdown (восстанавливаем после сброса Tailwind) */
    .markdown-body {
        line-height: 1.6;
    }
    .markdown-body p { margin-bottom: 0.75em; }
    .markdown-body p:last-child { margin-bottom: 0; }
    .markdown-body strong { font-weight: 600; color: inherit; }
    .markdown-body ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 0.75em; }
    .markdown-body ol { list-style-type: decimal; padding-left: 1.5em; margin-bottom: 0.75em; }
    .markdown-body li { margin-bottom: 0.25em; }
    .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 600; margin-bottom: 0.5em; margin-top: 1em; }
    .markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child { margin-top: 0; }

    .favorite-preview.markdown-body strong { font-weight: 700; }

    .favorite-say-card {
        border: 1px solid var(--border-strong);
        border-radius: var(--pn-radius-menu);
        background: var(--accent-soft);
    }

    .safe-pb { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .safe-pt { padding-top: calc(0.75rem + env(safe-area-inset-top)); }
    /* Локальный safe-pb для экрана результатов теста: после плотного блока
       «Зафиксировать разбор» + «Уже есть аккаунт?» нужен заметный воздух,
       иначе нижняя кнопка упирается в край экрана / в Home indicator. */
    .pn-diag-safe-pb { padding-bottom: calc(3.25rem + env(safe-area-inset-bottom)); }
    @media (min-width: 640px) { .pn-diag-safe-pb { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } }

    /* Кнопки входа в финальном блоке экрана результатов: явная иерархия,
       иконка слева, единый стиль и нормальная высота 44+px для тапа. */
    .pn-diag-auth-btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 12px 16px;
        min-height: 48px;
        border-radius: 14px;
        border: 1px solid var(--border-strong);
        background: var(--bg-surface);
        color: var(--text-main);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    }
    .pn-diag-auth-btn:hover {
        background: var(--bg-hover, color-mix(in srgb, var(--bg-surface) 60%, var(--text-main) 6%));
        border-color: var(--accent-color);
    }
    .pn-diag-auth-btn:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    .pn-diag-auth-btn svg { flex-shrink: 0; }
    .pn-diag-auth-btn span { text-align: left; line-height: 1.3; }

    /* --- Дизайн-система: светлая (neutral) и тёмная (dark) --- */
    html {
        --pn-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
        --pn-radius-modal: 12px;
        --pn-radius-menu: 12px;
        --pn-blur-dropdown: blur(25px);
        --pn-ease: 0.3s ease;
    }
    .pn-theme-animate,
    .pn-body-bg,
    .pn-header-bar,
    .pn-modal,
    .pn-menu-row,
    .pn-input,
    .pn-btn-primary,
    .pn-header-icon-btn,
    .pn-fav-card,
    #modal-backdrop.pn-backdrop,
    .pn-bottom-fade,
    #onboarding-screen,
    #diagnostic-screen,
    #chat-interface,
    .glass-panel,
    .pn-fav-card__delete,
    .pn-btn-row-secondary,
    .pn-star-btn,
    .pn-bubble-menu-btn,
    .favorite-say-card,
    .pn-fav-rule-card,
    .pn-fav-preview,
    .pn-fav-rule-preview,
    .pn-chat-search,
    .pn-chat-search-wrap,
    .pn-composer,
    .pn-chat-input,
    .pn-send-btn,
    .pn-chat-bubble,
    .pn-chat-typing-bubble,
    .pn-chat-chip-btn,
    .pn-privacy-badge,
    .pn-share-messenger-btn,
    #pn-toast.pn-toast {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
            box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease, opacity 0.28s ease, transform 0.28s ease;
    }

    /* Онбординг: одна колонка, без горизонтального вылета длинных строк в label */
    #onboarding-screen {
        pointer-events: auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
    #onboarding-screen .pn-onb-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 24rem;
        min-width: 0;
        gap: 1.875rem !important;
        margin-top: auto;
        margin-bottom: auto;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
    }
    #onboarding-screen button,
    #onboarding-screen a,
    #onboarding-screen input,
    #onboarding-screen label {
        pointer-events: auto;
    }
    #diagnostic-screen {
        scrollbar-gutter: stable;
    }
    #diagnostic-screen .pn-onb-inner {
        width: 100%;
        max-width: min(28rem, 100%);
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        gap: 2rem !important;
    }
    /* Диагностика: центральная зона вопроса (роль не «прилипает» к верху) */
    #diagnostic-screen.pn-diag-result-visible #diag-question-stage {
        display: none;
    }
    #diagnostic-screen.pn-diag-result-visible #diag-onboarding-lead {
        display: none;
    }
    #diagnostic-screen.pn-diag-result-visible #diag-turnstile-config-warn,
    #diagnostic-screen.pn-diag-result-visible #pn-turnstile-hint,
    #diagnostic-screen.pn-diag-result-visible #pn-turnstile-host {
        display: none !important;
    }
    #diag-question-stage {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: min(28rem, 100%);
        min-height: min(52vh, 26rem);
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }
    #diagnostic-screen.pn-diag-screen--in-progress #diag-onboarding-lead {
        display: none;
    }
    #diag-onboarding-lead {
        padding: 0.75rem 0.5rem 0;
        text-align: center;
    }
    #diag-onboarding-lead .pn-diag-lead-title {
        font-size: 1.375rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
    }
    #diag-onboarding-lead .pn-diag-lead-text {
        margin-top: 1.25rem;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: var(--text-muted);
    }
    #diag-intro-cta {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: min(38vh, 18rem);
        padding: 2rem 1rem 2.5rem;
    }
    #diagnostic-screen.pn-diag-screen--in-progress #diag-intro-cta,
    #diagnostic-screen.pn-diag-result-visible #diag-intro-cta {
        display: none !important;
    }
    .diag-intro-start-btn {
        width: min(100%, 17.5rem);
        min-height: 3.5rem;
        padding: 1rem 2.25rem;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        border-radius: 9999px;
        box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color) 28%, transparent);
    }
    .diag-intro-start-btn:hover {
        transform: scale(1.02);
    }
    .diag-intro-start-btn:active {
        transform: scale(0.98);
    }
    /* Карточка вопроса: glass 2.0 (сильнее блюр); результат — отдельный мягкий glass */
    #diag-panel {
        background: rgba(255, 255, 255, 0.58);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.45);
        padding: 1.25rem !important;
    }
    #diag-result {
        background: rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 1.25rem !important;
    }
    body.theme-dark #diag-panel {
        background: rgba(26, 38, 54, 0.46);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
    }
    body.theme-dark #diag-result {
        background: rgba(26, 38, 54, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    }
    @media (min-width: 640px) {
        #diag-panel,
        #diag-result {
            padding: 1.75rem !important;
        }
    }
    #diag-screen-progress {
        transition: opacity 0.3s ease-out;
    }
    .pn-diag-progress-track {
        height: 4px;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--text-muted) 20%, transparent);
        overflow: hidden;
    }
    .pn-diag-progress-fill {
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--accent-color) 88%, transparent),
            var(--accent-color)
        );
        transition: width 0.45s ease-out;
    }
    .pn-diag-progress-label {
        color: var(--text-muted);
    }
    .pn-diag-feedback-stack {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 0.625rem;
        border-radius: 0.875rem;
        background: color-mix(in srgb, var(--bg-app) 42%, transparent);
        border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
    }
    body.theme-dark .pn-diag-feedback-stack {
        background: color-mix(in srgb, #0f172a 55%, transparent);
        border-color: color-mix(in srgb, var(--border-subtle) 40%, transparent);
    }
    .pn-diag-feedback-stack.hidden,
    .pn-diag-insight-row.hidden {
        display: none !important;
    }
    #diag-panel.pn-diag-panel--role #diag-feedback {
        display: none !important;
    }
    #diag-panel.pn-diag-panel--has-feedback #diag-panel-main {
        opacity: 0.9;
        transition: opacity 0.3s ease-out;
    }
    .pn-diag-insight-row {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        min-width: 0;
    }
    .pn-diag-insight-emoji {
        flex-shrink: 0;
        width: 1.5rem;
        text-align: center;
        font-size: 1.05rem;
        line-height: 1.45;
        filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--bg-app) 40%, transparent));
    }
    .pn-diag-insight-text {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-style: italic;
        font-size: 0.8125rem;
        line-height: 1.5;
        font-weight: 400;
        color: var(--text-muted);
    }
    .pn-diag-answer-word {
        font-style: normal;
        font-weight: 700;
        color: var(--text-main);
    }
    .pn-diag-result-hd {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-bottom: 0.35rem;
    }
    .pn-diag-result-hd-ic {
        font-size: 1rem;
        line-height: 1;
        opacity: 0.92;
    }
    .pn-diag-result-hd-title {
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--text-main);
    }
    #diag-question.pn-diag-question-title {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.6;
        letter-spacing: -0.02em;
        color: var(--text-main);
    }
    #diag-panel-main {
        line-height: 1.6;
    }
    #diag-buttons {
        margin-top: 2rem;
    }
    #diag-panel.pn-diag-panel--role #diag-question.pn-diag-question-title {
        text-align: center;
        margin-bottom: 0;
    }
    .pn-diag-answer-chip {
        min-width: 0;
        padding: 1.125rem 0.875rem;
        min-height: 3.35rem;
        border: none;
        border-radius: 1rem;
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.35;
        background: var(--bg-surface-muted);
        color: var(--text-main);
        cursor: pointer;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--border-subtle) 40%, transparent);
        transition: background-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
    }
    .pn-diag-answer-chip:hover {
        background: color-mix(in srgb, var(--accent-soft) 65%, var(--bg-surface-muted));
        transform: scale(1.02);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 18%, transparent);
    }
    .pn-diag-answer-chip:active {
        transform: scale(0.98);
    }
    body.theme-dark .pn-diag-answer-chip {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    }
    #diag-panel.pn-diag-panel--role {
        border-radius: 12px;
        padding: 1.25rem !important;
        max-width: min(22rem, 100%);
    }
    #diag-panel.pn-diag-panel--role #diag-buttons.pn-diag-role-chips {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        width: 100%;
    }
    @media (min-width: 380px) {
        #diag-panel.pn-diag-panel--role #diag-buttons.pn-diag-role-chips {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }
    }
    #diag-panel.pn-diag-panel--role .pn-diag-role-chip {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 3.5rem;
        padding: 1.125rem 1.125rem;
        border-radius: 1rem;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
        border: none;
        background: var(--bg-surface-muted);
        color: var(--text-main);
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
        box-shadow: 0 1px 0 color-mix(in srgb, var(--border-subtle) 40%, transparent);
    }
    #diag-panel.pn-diag-panel--role .pn-diag-role-chip:hover {
        background: color-mix(in srgb, var(--accent-soft) 65%, var(--bg-surface-muted));
        transform: scale(1.02);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 18%, transparent);
    }
    #diag-panel.pn-diag-panel--role .pn-diag-role-chip:active {
        transform: scale(0.98);
    }
    body.theme-dark #diag-panel.pn-diag-panel--role .pn-diag-role-chip {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    }
    /* Диагностика: «ИИ думает» — одноразовая лёгкая пульсация карточки (только transform) */
    @keyframes pn-diag-thinking-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.011); }
        100% { transform: scale(1); }
    }
    #diag-panel.pn-diag-panel--thinking {
        animation: pn-diag-thinking-pulse 0.2s ease-out 1;
    }
    .pn-diag-panel-main {
        min-width: 0;
    }
    .pn-diag-fade-in-up {
        animation: fadeInUp 0.3s ease-out forwards;
    }
    /* Финализация: glass-загрузка перед отчётом */
    #diag-finalize-loading {
        pointer-events: auto;
        background: color-mix(in srgb, var(--bg-app) 38%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .pn-diag-finalize-card {
        width: 100%;
        max-width: 20rem;
        border-radius: 1rem;
        padding: 1.75rem 1.25rem;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    }
    body.theme-dark .pn-diag-finalize-card {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(26, 38, 54, 0.62);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }
    .pn-diag-kb-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-color);
        opacity: 0.4;
        animation: pn-diag-kb-dot-bounce 0.95s ease-in-out infinite;
    }
    .pn-diag-kb-dot:nth-child(2) {
        animation-delay: 0.14s;
    }
    .pn-diag-kb-dot:nth-child(3) {
        animation-delay: 0.28s;
    }
    @keyframes pn-diag-kb-dot-bounce {
        0%,
        100% {
            transform: translateY(0);
            opacity: 0.35;
        }
        50% {
            transform: translateY(-6px);
            opacity: 1;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        #diag-panel.pn-diag-panel--thinking {
            animation: none !important;
        }
        .pn-diag-fade-in-up {
            animation: none !important;
            opacity: 1;
            transform: none;
        }
        .pn-diag-kb-dot {
            animation: none !important;
            opacity: 0.75;
        }
    }
    /* Онбординг: согласия — крупнее тач и межстрочный интервал */
    #onboarding-screen .pn-onb-consent-block label {
        line-height: 1.55;
        font-size: 0.875rem;
        padding: 0.5rem 0;
        gap: 0.75rem;
    }
    #onboarding-screen .pn-onb-consent-block {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }
    #onboarding-screen .pn-onb-consent-block input[type='checkbox'] {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
        accent-color: var(--accent-color);
    }
    #onboarding-screen .pn-onb-legal-footnote label {
        min-width: 0;
    }
    #onboarding-screen .pn-onb-legal-footnote label span {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* Семантические алиасы (миссия: единый слой токенов) */
    body.theme-neutral,
    body.theme-dark {
        --bg-body: var(--bg-app);
    }

    body.theme-neutral {
        color-scheme: light;
        --bg-app: #f1f5f9;
        --bg-surface: rgba(255, 255, 255, 0.9);
        --bg-surface-muted: #f8fafc;
        --bg-hover: rgba(15, 23, 42, 0.06);
        --text-main: #0f172a;
        --text-muted: #64748b;
        --accent-color: #0d9488;
        --accent-soft: rgba(13, 148, 136, 0.14);
        --accent-soft-strong: rgba(13, 148, 136, 0.24);
        --border-subtle: rgba(15, 23, 42, 0.09);
        --border-strong: rgba(15, 23, 42, 0.14);
        --shadow-elevated: 0 14px 44px rgba(15, 23, 42, 0.1);
        --backdrop-scrim: rgba(15, 23, 42, 0.42);
        --icon-accent: var(--accent-color);
        --theme-color-meta: #f1f5f9;
        --pn-blob-a: rgba(148, 163, 184, 0.32);
        --pn-blob-b: rgba(148, 163, 184, 0.22);
        --pn-blob-c: rgba(226, 232, 240, 0.45);
    }

    body.theme-dark {
        color-scheme: dark;
        --bg-app: #0c1524;
        --bg-surface: rgba(26, 38, 54, 0.86);
        --bg-surface-muted: rgba(18, 28, 42, 0.88);
        --bg-hover: rgba(255, 255, 255, 0.07);
        --text-main: #e8eef5;
        --text-muted: #94a3b8;
        --accent-color: #5eead4;
        --accent-soft: rgba(94, 234, 212, 0.14);
        --accent-soft-strong: rgba(94, 234, 212, 0.26);
        --border-subtle: rgba(255, 255, 255, 0.1);
        --border-strong: rgba(255, 255, 255, 0.16);
        --shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.45);
        --backdrop-scrim: rgba(2, 6, 18, 0.65);
        --icon-accent: var(--accent-color);
        --theme-color-meta: #0c1524;
        --pn-blob-a: rgba(51, 65, 85, 0.45);
        --pn-blob-b: rgba(30, 41, 59, 0.4);
        --pn-blob-c: rgba(15, 23, 42, 0.55);
    }

    .pn-body-bg {
        background-color: var(--bg-app);
        color: var(--text-main);
        font-family: var(--pn-font);
    }
    .pn-header-bar {
        background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
        border-bottom-color: var(--border-subtle) !important;
        color: var(--text-main);
    }
    /* Header status pills: два огонька — приложение работает, ИИ подключён. */
    .pn-header-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        transition: color 0.25s ease, opacity 0.25s ease;
        white-space: nowrap;
    }
    .pn-header-status-pill::before {
        content: "";
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 999px;
        background: currentColor;
        box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
        opacity: 0.9;
    }
    .pn-header-status-pill.pn-status-ok {
        color: #34a853;
        font-weight: 600;
    }
    body.theme-dark .pn-header-status-pill.pn-status-ok {
        color: #4ade80;
    }
    /* Полноэкранная диагностика: чат ниже в DOM и может перекрывать слой теста — гасим явно */
    body.pn-diagnostic-open #onboarding-screen,
    body.pn-diagnostic-open #chat-interface,
    body.pn-diagnostic-open #pn-fixed-composer-bar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.pn-diagnostic-open #modal-backdrop {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
    body.pn-diagnostic-open.pn-modal-over-diagnostic #modal-backdrop {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        z-index: 10080 !important;
    }
    body.pn-diagnostic-open #diagnostic-screen {
        z-index: 10060;
    }
    #pn-turnstile-host.hidden {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    .pn-header-status-pill.pn-status-off {
        color: #888888;
        font-weight: 500;
    }
    body.theme-dark .pn-header-status-pill.pn-status-off {
        color: #94a3b8;
    }
    .pn-header-status-pill.pn-status-pending {
        color: var(--text-muted);
        font-weight: 500;
    }
    #modal-backdrop.pn-backdrop {
        background: var(--backdrop-scrim);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        align-items: flex-start;
        overflow-y: auto;
    }

    .pn-modal {
        font-family: var(--pn-font);
        border-radius: var(--pn-radius-modal) !important;
        padding: 1.5rem !important;
        background: var(--bg-surface) !important;
        color: var(--text-main) !important;
        border: 1px solid var(--border-subtle) !important;
        box-shadow: var(--shadow-elevated) !important;
        backdrop-filter: var(--pn-blur-dropdown);
        -webkit-backdrop-filter: var(--pn-blur-dropdown);
        line-height: 1.6;
    }
    .pn-modal-scroll {
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--accent-color) 42%, transparent) transparent;
    }
    .pn-modal-scroll::-webkit-scrollbar {
        width: 8px;
    }
    .pn-modal-scroll::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background: color-mix(in srgb, var(--accent-color) 42%, transparent);
    }
    .pn-modal-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    @media (min-width: 640px) {
        .pn-modal {
            padding: 2rem !important;
        }
        .pn-modal-scroll {
            max-height: min(88dvh, 760px);
        }
    }
    .pn-modal div.rounded-xl.border,
    .pn-modal div.rounded-2xl.border {
        padding: 1.125rem !important;
    }
    @media (min-width: 640px) {
        .pn-modal div.rounded-xl.border,
        .pn-modal div.rounded-2xl.border {
            padding: 1.5rem !important;
        }
    }
    .pn-modal__close {
        color: var(--text-muted);
        border-radius: 10px;
        padding: 6px;
        transition: background-color var(--pn-ease), color var(--pn-ease);
    }
    .pn-modal__close:hover {
        color: var(--text-main);
        background: var(--bg-hover);
    }
    .pn-modal__title {
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--text-main);
        letter-spacing: -0.02em;
        margin-bottom: 0.85rem;
    }
    .pn-modal__lead {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.6;
    }
    .pn-modal__body {
        line-height: 1.65;
    }
    .pn-modal__body.space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.35rem !important;
    }
    .pn-icon-pill {
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--accent-soft);
        color: var(--icon-accent);
    }
    .pn-icon-pill svg {
        stroke: currentColor;
    }
    /* Иконка приложения для modal-install-explainer.
       Показываем реальную app-иконку (не emoji), чтобы пользователь
       видел ровно то, что появится у него на главном экране после
       «Сохранить на телефон». Радиус ≈ iOS/Android squircle. */
    .pn-install-app-icon {
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 22%;
        box-shadow: 0 6px 18px color-mix(in srgb, var(--text-main) 18%, transparent);
        background: var(--bg-surface);
        display: block;
        flex-shrink: 0;
        object-fit: cover;
    }
    .pn-divider {
        height: 1px;
        background: var(--border-subtle);
        margin: 0.75rem 0;
        border: 0;
    }
    .pn-menu-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        text-align: left;
        cursor: pointer;
        transition: background-color var(--pn-ease), border-color var(--pn-ease), transform 0.15s ease;
    }
    .pn-menu-row:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
    .pn-menu-row:active {
        transform: scale(0.99);
    }
    .pn-menu-row__title {
        font-weight: 600;
        font-size: 15px;
        color: var(--text-main);
        margin-bottom: 0.15rem;
    }
    .pn-menu-row__desc {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.35;
    }
    .pn-menu-row__icon svg {
        stroke: var(--icon-accent);
        color: var(--icon-accent);
    }
    .pn-settings-install-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: var(--pn-radius-menu);
        border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-subtle));
        background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-surface-muted));
        cursor: pointer;
        transition: background-color var(--pn-ease), border-color var(--pn-ease), transform 0.15s ease;
    }
    .pn-settings-install-card:hover {
        background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-hover));
        border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-strong));
    }
    .pn-settings-install-card:active {
        transform: scale(0.99);
    }
    .pn-settings-install-card--done {
        border-color: color-mix(in srgb, #059669 35%, var(--border-subtle));
        background: color-mix(in srgb, #059669 8%, var(--bg-surface-muted));
        cursor: default;
    }
    .pn-settings-install-card--done:hover {
        background: color-mix(in srgb, #059669 8%, var(--bg-surface-muted));
        border-color: color-mix(in srgb, #059669 35%, var(--border-subtle));
    }
    .pn-settings-install-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background: #059669;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .pn-header-icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        color: var(--text-muted);
        transition: background-color var(--pn-ease), border-color var(--pn-ease), color var(--pn-ease);
    }
    .pn-header-icon-btn:hover {
        background: var(--bg-hover);
        color: var(--text-main);
        border-color: var(--border-strong);
    }
    .pn-header-icon-btn.pn-header-icon-btn--active {
        border-color: var(--accent-color);
        color: var(--text-main);
        box-shadow: 0 0 0 2px var(--accent-soft);
    }
    .pn-header-icon-btn svg {
        stroke: var(--icon-accent);
    }
    /**
     * Кнопка-переключатель «Premium» в шапке чата.
     *
     * Зачем: бесплатный пользователь сейчас должен сам догадаться, что
     * полный ИИ открывается через мелкую ссылку «Тарифы» в футере или
     * через «Настройки → Тарифы и оплата». Это снимает уровень CTR с
     * paywall. Кнопка тут — постоянная, заметная, по стилю и тону
     * показывает текущий статус доступа: серая «OFF» без подписки →
     * зелёная «ON» когда подписка активна. Клик одинаково открывает
     * `openServiceTariffs()` — это и витрина (купить), и «Мой тариф»
     * (продлить / посмотреть до какой даты активен).
     *
     * Состояния назначаются через JS (pnSetHeaderPremiumState),
     * синхронизировано с pnSetHeaderAiStatus(). Лёгкая pulse-анимация
     * только в состоянии .is-locked, чтобы новые пользователи замечали
     * кнопку. Активный «ON» — без пульсации, чтобы не дёргать глаз
     * платящему юзеру.
     */
    .pn-header-premium-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 10px 0 9px;
        border-radius: 9999px;
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        color: var(--text-muted);
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        white-space: nowrap;
        transition: background-color var(--pn-ease), border-color var(--pn-ease), color var(--pn-ease), box-shadow var(--pn-ease);
        cursor: pointer;
    }
    .pn-header-premium-btn svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        flex-shrink: 0;
    }
    .pn-header-premium-btn .pn-premium-state {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.06em;
        background: rgba(148, 163, 184, 0.18);
        color: var(--text-muted);
    }
    .pn-header-premium-btn.is-locked {
        color: #92400e;
        border-color: #f59e0b;
        background: color-mix(in srgb, #f59e0b 14%, var(--bg-surface));
        animation: pnPremiumPulse 2.4s ease-in-out infinite;
    }
    .pn-header-premium-btn.is-locked .pn-premium-state {
        background: #f59e0b;
        color: #fff;
    }
    .pn-header-premium-btn.is-locked:hover {
        background: color-mix(in srgb, #f59e0b 22%, var(--bg-surface));
        border-color: #d97706;
    }
    .pn-header-premium-btn.is-active {
        color: #047857;
        border-color: #10b981;
        background: color-mix(in srgb, #10b981 12%, var(--bg-surface));
        animation: none;
    }
    .pn-header-premium-btn.is-active .pn-premium-state {
        background: #10b981;
        color: #fff;
    }
    .pn-header-premium-btn.is-active:hover {
        background: color-mix(in srgb, #10b981 18%, var(--bg-surface));
        border-color: #059669;
    }
    body.theme-dark .pn-header-premium-btn.is-locked {
        color: #fcd34d;
        background: color-mix(in srgb, #f59e0b 22%, var(--bg-surface));
    }
    body.theme-dark .pn-header-premium-btn.is-active {
        color: #6ee7b7;
        background: color-mix(in srgb, #10b981 22%, var(--bg-surface));
    }
    @keyframes pnPremiumPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); }
        50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.24); }
    }
    @media (prefers-reduced-motion: reduce) {
        .pn-header-premium-btn.is-locked { animation: none; }
    }
    /* На очень узких экранах прячем подпись «Premium», оставляем только иконку и статус-таблетку. */
    @media (max-width: 420px) {
        .pn-header-premium-btn .pn-premium-label { display: none; }
        .pn-header-premium-btn { padding: 0 8px; }
    }

    /* ============================================================
       Шапка чата, два ряда (2026-05-29).
       Первый ряд — только узкие кнопки: лого+название, ИИ-помощник,
       Pulse, Battery, поиск и переключатель второго ряда.
       Второй ряд (#pn-header-secondary-row) хранит остальные действия
       (оффлайн / дневник / избранное / мост / настройки) и раскрывается
       по клику на ⋯; по умолчанию свёрнут на всех ширинах.
       ============================================================ */
    .pn-header-overflow-wrap { position: relative; display: inline-flex; }
    .pn-header-overflow-btn { position: relative; }
    .pn-header-overflow-btn .pn-header-overflow-dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: var(--accent-color);
        box-shadow: 0 0 0 2px var(--bg-surface);
    }
    .pn-header-secondary-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        width: 100%;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
    }
    .pn-header-secondary-row.hidden { display: none; }
    body.theme-dark .pn-header-secondary-row {
        border-top-color: color-mix(in srgb, var(--border-subtle) 35%, transparent);
    }
    /* Вторичные действия живут только во втором ряду; в основном их быть не должно. */
    .pn-header-secondary-btn { display: none !important; }

    /* Home-trigger (логотип + название). Поведение «кнопки», но без рамки —
       подсветка только на hover/focus, чтобы не превращать шапку в кричащий UI.
       Сам контейнер остаётся flex-блоком для существующей вёрстки. */
    .pn-header-home-trigger {
        padding: 4px 6px;
        margin: -4px -6px;
        transition: background-color 0.15s ease;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .pn-header-home-trigger:hover {
        background-color: color-mix(in srgb, var(--accent-color) 8%, transparent);
    }
    .pn-header-home-trigger:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
        outline-offset: 2px;
    }

    /* ============================================================
       A2HS (Add to Home Screen) — визуальная инструкция для iPhone.
       Картинка iPhone с двумя кадрами, переключаемыми CSS-анимацией:
          кадр 1: Safari c подсвеченной Share-кнопкой и стрелкой
          кадр 2: открытое Share-меню с подсвеченным «На экран Домой»
       Управляется классом .pn-a2hs-stage--<n> на родителе:
       переключение делается JS (плавнее, чем чистая animation, и
       позволяет пользователю «листать» вручную, если он успел).
       ============================================================ */
    /*
      Контейнер A2HS-иллюстрации.
      ВАЖНО: высота контейнера определяется самим SVG (родной aspect-ratio 11/18
      из viewBox 220×360). Не задаём здесь aspect-ratio — иначе будут обрезаны
      подсвеченные элементы (Share-кнопка снизу первого кадра, нижние пункты
      Share-меню второго). Кадры стекаются в одной grid-ячейке.
    */
    .pn-a2hs-illust {
        position: relative;
        width: 100%;
        max-width: 260px;
        margin: 0 auto 6px;
        display: grid;
        grid-template-areas: "stack";
        border-radius: 22px;
        background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 6%, transparent), transparent 60%);
        border: 1px solid var(--border-subtle);
        padding: 6px;
    }
    /* На узких экранах ещё компактнее — это типичный iPhone < 700px высотой */
    @media (max-height: 740px) {
        .pn-a2hs-illust {
            max-width: 210px;
            margin-bottom: 4px;
        }
    }
    @media (max-height: 600px) {
        .pn-a2hs-illust { max-width: 170px; }
    }
    .pn-a2hs-frame {
        grid-area: stack;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 360ms ease;
    }
    .pn-a2hs-frame[data-active="true"] { opacity: 1; }
    .pn-a2hs-svg {
        width: 100%;
        height: auto;
        display: block;
    }
    .pn-a2hs-dots {
        display: flex;
        gap: 6px;
        justify-content: center;
        margin: 0 auto 8px;
    }
    .pn-a2hs-dot {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--text-muted) 40%, transparent);
        transition: background 200ms ease, transform 200ms ease;
    }
    .pn-a2hs-dot[data-active="true"] {
        background: var(--accent-color);
        transform: scale(1.3);
    }
    /* Подсвечивающий пульс — общий для обоих кадров. */
    @keyframes pnA2hsPulse {
        0%, 100% { opacity: 0.85; transform: scale(1); }
        50%      { opacity: 1;    transform: scale(1.08); }
    }
    .pn-a2hs-pulse { animation: pnA2hsPulse 1.6s ease-in-out infinite; transform-origin: center; }
    @media (prefers-reduced-motion: reduce) {
        .pn-a2hs-pulse { animation: none; }
    }
    /* Большая «эмодзи-иконка» Safari для non-Safari ветки. */
    .pn-a2hs-safari-badge {
        width: 72px;
        height: 72px;
        margin: 4px auto 12px;
        border-radius: 18px;
        background: radial-gradient(circle at 30% 30%, #cce6ff 0%, #5ab1ff 50%, #1976d2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36px;
        box-shadow: 0 6px 18px rgba(25, 118, 210, 0.25);
    }
    /*
      A2HS-модалка для iPhone: на мобильном растягиваем почти на весь viewport
      (модалка занимает ~ширину экрана и почти всю высоту), чтобы иллюстрация
      была крупной и читаемой. Sticky-CTA — чтобы кнопки всегда были видны,
      контент скроллится внутри (pn-modal-scroll).
    */
    #modal-install-ios {
        max-height: calc(100dvh - 1rem);
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
    .pn-a2hs-cta {
        position: sticky;
        bottom: calc(-1 * env(safe-area-inset-bottom));
        padding-top: 10px;
        margin-top: 6px;
        /* solid фон + лёгкая тень-разделитель сверху, чтобы caption не просвечивал
           сквозь полу-прозрачную часть и не «перекрывал» кнопки текстом */
        background: var(--bg-surface);
        box-shadow: 0 -10px 14px -8px color-mix(in srgb, var(--bg-surface) 80%, transparent);
        z-index: 2;
    }
    /* На мобильном растягиваем модалку почти на весь экран — на iPhone Tailwind
       max-w-sm (384px) ещё оставляет лишние боковые поля, плюс свой padding
       съедает место под иллюстрацию. */
    @media (max-width: 639.98px) {
        #modal-install-ios {
            max-width: calc(100vw - 0.5rem) !important;
            width: calc(100vw - 0.5rem) !important;
            padding: 1rem !important;
            padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        }
        #modal-install-ios .pn-modal__title { font-size: 1.05rem; }
        #modal-install-ios .pn-modal__lead { font-size: 13px !important; margin-bottom: 8px !important; }
        #pn-a2hs-caption { font-size: 13.5px !important; margin-bottom: 10px !important; }
        /* Иллюстрация может быть крупной — модалка теперь широкая. */
        #modal-install-ios .pn-a2hs-illust {
            max-width: 280px;
        }
    }
    @media (max-width: 639.98px) and (max-height: 740px) {
        #modal-install-ios .pn-a2hs-illust { max-width: 200px; }
    }
    @media (max-width: 639.98px) and (max-height: 620px) {
        #modal-install-ios .pn-a2hs-illust { max-width: 150px; }
        #modal-install-ios .pn-modal__lead { display: none; }
    }
    .pn-segment {
        display: flex;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        padding: 3px;
        gap: 3px;
        background: var(--bg-surface-muted);
    }
    .pn-segment .pn-seg-option {
        flex: 1;
        position: relative;
        min-width: 0;
    }
    .pn-segment .pn-seg-option input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    .pn-segment .pn-seg-option span {
        display: block;
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        padding: 0.5rem 0.35rem;
        color: var(--text-muted);
        border-radius: calc(var(--pn-radius-menu) - 4px);
        transition: background-color var(--pn-ease), color var(--pn-ease);
        pointer-events: none;
    }
    .pn-segment .pn-seg-option input:checked + span {
        background: var(--accent-soft-strong);
        color: var(--accent-color);
    }
    .pn-segment .pn-seg-option input:focus-visible + span {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    .pn-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        color: var(--text-main);
        outline: none;
        font-size: 14px;
        transition: border-color var(--pn-ease), box-shadow var(--pn-ease);
    }
    .pn-input:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pn-btn-primary {
        width: 100%;
        padding: 0.75rem 1rem;
        border-radius: var(--pn-radius-menu);
        border: none;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        background: var(--accent-color);
        color: #fff;
        transition: filter var(--pn-ease), transform 0.12s ease;
    }
    body.theme-dark .pn-btn-primary,
    body.theme-dark .pn-send-btn {
        color: #0f172a;
    }
    .pn-btn-primary:hover {
        filter: brightness(1.05);
    }
    .pn-btn-primary:active {
        transform: scale(0.99);
    }
    .pn-btn-primary.pn-btn-primary--inline {
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
    }
    .pn-fav-card {
        position: relative;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        padding: 1rem;
        padding-top: 2.75rem;
    }
    .pn-fav-card__delete {
        position: absolute;
        top: 0.65rem;
        right: 0.65rem;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 9999px;
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color var(--pn-ease), color var(--pn-ease), border-color var(--pn-ease);
    }
    .pn-fav-card__delete:hover {
        background: var(--bg-hover);
        color: var(--accent-color);
        border-color: var(--accent-soft-strong);
    }
    .pn-fav-card__delete svg {
        stroke: currentColor;
    }
    .pn-chip-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--accent-color);
    }
    .pn-btn-row-secondary {
        padding: 0.5rem 1rem;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface);
        color: var(--text-main);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        transition: background-color var(--pn-ease), border-color var(--pn-ease);
    }
    .pn-btn-row-secondary:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
    .pn-btn-row-secondary svg {
        stroke: var(--icon-accent);
    }
    .pn-star-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface);
        color: var(--text-muted);
    }
    .pn-star-btn[data-pinned='false'] svg,
    .pn-star-btn:not([data-pinned='true']) svg {
        fill: none;
    }
    .pn-star-btn svg {
        stroke: var(--icon-accent);
    }
    .pn-star-btn[data-pinned='true'] {
        background: var(--accent-soft) !important;
        border-color: var(--accent-soft-strong) !important;
    }
    .pn-star-btn[data-pinned='true'] svg {
        fill: var(--accent-color);
        stroke: var(--accent-color);
    }
    .pn-bubble-menu-anchor {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 10;
    }
    .pn-bubble-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface);
        color: var(--text-muted);
    }
    .pn-bubble-menu-btn svg {
        stroke: var(--icon-accent);
    }
    .pn-bubble-menu-btn[data-pinned='true'] {
        background: var(--accent-soft) !important;
        border-color: var(--accent-soft-strong) !important;
    }
    .pn-bubble-menu-btn[data-pinned='true'] svg {
        stroke: var(--accent-color);
    }
    /* Открытое меню — поверх chip-кнопок, которые идут следом в ленте. */
    .chat-msg-row.pn-bubble-menu-host--open,
    .chat-msg-row:has(.pn-bubble-menu:not(.hidden)) {
        position: relative;
        z-index: 200;
    }
    .pn-bubble-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        min-width: 220px;
        max-width: min(280px, 92vw);
        background: var(--bg-surface);
        border: 1px solid var(--border-strong);
        border-radius: 14px;
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
        padding: 6px;
        z-index: 210;
        display: flex;
        flex-direction: column;
    }
    .pn-bubble-menu--flip-up {
        top: auto;
        bottom: calc(100% + 4px);
    }
    .pn-bubble-menu.hidden {
        display: none;
    }
    .pn-bubble-menu__item {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        width: 100%;
        padding: 0.55rem 0.65rem;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--text-main);
        font-size: 14px;
        text-align: left;
        cursor: pointer;
    }
    .pn-bubble-menu__item:hover:not([disabled]) {
        background: var(--bg-hover);
    }
    .pn-bubble-menu__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        flex-shrink: 0;
        color: var(--icon-accent);
    }
    .pn-bubble-menu__label {
        line-height: 1.35;
    }
    .pn-modal__body {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.65;
    }
    .pn-modal__body strong {
        color: var(--text-main);
        font-weight: 600;
    }
    .pn-field-label {
        display: block;
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 0.35rem;
        margin-left: 0.25rem;
    }
    .pn-menu-row--danger {
        border-color: color-mix(in srgb, #ef4444 28%, var(--border-subtle));
    }
    .pn-menu-row--danger .pn-menu-row__title {
        color: #b91c1c;
    }
    body.theme-dark .pn-menu-row--danger .pn-menu-row__title {
        color: #fca5a5;
    }
    .pn-invite-code-box {
        background: var(--bg-surface-muted);
        border: 1px solid var(--border-subtle);
        border-radius: var(--pn-radius-menu);
    }
    .pn-bottom-fade {
        background: linear-gradient(
            to top,
            var(--bg-app) 0%,
            color-mix(in srgb, var(--bg-app) 92%, transparent) 42%,
            transparent 100%
        );
    }
    /* Узкая колонка на широких мониторах: чат не «расползается» на весь экран */
    .pn-desktop-chat-shell {
        width: 100%;
        max-width: 42rem; /* ~672px, сопоставимо с max-w-2xl */
        margin-left: auto;
        margin-right: auto;
    }
    @media (min-width: 1280px) {
        .pn-desktop-chat-shell {
            max-width: 44rem; /* ~704px на XL */
        }
    }
    .pn-fav-rule-card {
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        padding: 0.65rem 0.75rem;
        margin-bottom: 0.5rem;
    }
    .pn-fav-muted-label {
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        padding-top: 0.25rem;
    }
    .pn-fav-preview {
        font-size: 14px;
        color: var(--text-main);
        line-height: 1.5;
    }
    .pn-fav-rule-head {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .pn-fav-rule-preview {
        font-size: 13px;
        color: var(--text-muted);
        line-height: 1.55;
    }

    /* Чат: поиск, композер, пузыри — на токенах темы */
    .pn-chat-search-wrap {
        position: relative;
        width: 100%;
    }
    .pn-chat-search-icon {
        pointer-events: none;
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        color: var(--text-muted);
    }
    .pn-chat-search-icon svg {
        stroke: currentColor;
    }
    .pn-chat-search {
        width: 100%;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
        padding: 0.65rem 0.75rem 0.65rem 2.25rem;
        font-size: 14px;
        color: var(--text-main);
        outline: none;
        transition: border-color var(--pn-ease), box-shadow var(--pn-ease), background-color var(--pn-ease);
    }
    .pn-chat-search::placeholder {
        color: var(--text-muted);
    }
    .pn-chat-search:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pn-chat-hint {
        font-size: 13px;
        color: var(--text-muted);
    }
    .pn-composer {
        border-radius: 12px;
        border: 1px solid var(--border-subtle) !important;
        background: color-mix(in srgb, var(--bg-surface) 78%, transparent) !important;
        box-shadow: var(--shadow-elevated);
    }
    .pn-chat-input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        padding: 0.75rem;
        font-size: 15px;
        color: var(--text-main);
        resize: none;
        max-height: 8rem;
        min-height: 44px;
    }
    .pn-chat-input::placeholder {
        color: var(--text-muted);
    }
    .pn-session-feedback-card {
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--border-subtle));
        background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent-soft));
        padding: 0.9rem;
        box-shadow: var(--shadow-elevated);
    }
    .pn-session-feedback-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.35rem;
    }
    .pn-session-feedback-lead {
        font-size: 12px;
        line-height: 1.45;
        color: var(--text-muted);
        margin-bottom: 0.65rem;
    }
    .pn-session-feedback-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }
    .pn-session-feedback-btn {
        border-radius: 999px;
        border: 1px solid var(--border-subtle);
        background: color-mix(in srgb, var(--bg-surface-muted) 88%, transparent);
        color: var(--text-main);
        font-size: 12px;
        font-weight: 650;
        padding: 0.45rem 0.7rem;
        cursor: pointer;
        transition: border-color var(--pn-ease), color var(--pn-ease), background-color var(--pn-ease), transform 0.12s ease;
    }
    .pn-session-feedback-btn:hover {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }
    .pn-session-feedback-btn:active {
        transform: scale(0.98);
    }
    .pn-session-feedback-btn[disabled] {
        cursor: default;
        opacity: 0.62;
    }
    .pn-session-feedback-note {
        margin-top: 0.65rem;
        font-size: 12px;
        color: var(--text-muted);
    }
    .pn-send-btn {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        border: none;
        background: var(--accent-color);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
        margin-bottom: 0.125rem;
        margin-right: 0.125rem;
        transition: filter var(--pn-ease), transform 0.12s ease;
    }
    .pn-send-btn:hover {
        filter: brightness(1.06);
    }
    .pn-send-btn:active {
        transform: scale(0.9);
    }
    .pn-send-btn svg {
        stroke: currentColor;
    }
    .pn-privacy-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding-bottom: 0.5rem;
        opacity: 0.72;
        font-size: 10px;
        font-weight: 500;
        color: var(--text-muted);
    }
    .pn-privacy-badge svg {
        stroke: var(--text-muted);
    }
    .pn-chat-bubble {
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-main);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        transition: background-color var(--pn-ease), border-color var(--pn-ease), color var(--pn-ease);
    }
    .pn-chat-bubble--user {
        background: color-mix(in srgb, var(--bg-surface-muted) 92%, var(--text-main) 5%);
        border: 1px solid var(--border-subtle);
        border-radius: 1rem;
        border-bottom-right-radius: 0.25rem;
        padding: 1rem;
        max-width: 90%;
    }
    @media (min-width: 768px) {
        .pn-chat-bubble--user {
            max-width: 75%;
        }
    }
    .pn-chat-bubble--ai {
        background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
        border: 1px solid var(--border-subtle);
        border-radius: 1rem;
        border-bottom-left-radius: 0.25rem;
        padding: 0.75rem 3rem 1rem 1rem;
    }
    .pn-chat-typing-bubble {
        background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
        border: 1px solid var(--border-subtle);
        border-radius: 1rem;
        border-bottom-left-radius: 0.25rem;
        padding: 0.875rem 1rem;
        display: flex;
        gap: 0.35rem;
        align-items: center;
    }
    .pn-chat-typing-dot {
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 9999px;
        background: var(--text-muted);
    }
    .pn-chat-chip-btn {
        position: relative;
        z-index: 1;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid var(--border-subtle);
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
        color: var(--text-main);
        cursor: pointer;
        transition: background-color var(--pn-ease), border-color var(--pn-ease), transform 0.12s ease;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .pn-chat-chip-btn:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
    .pn-chat-chip-btn:active {
        transform: scale(0.95);
    }

    /* Role picker, который рендерится прямо в ленте чата при первом входе
       пользователя, у которого ещё не выбрана роль (parent/teen). Это не
       «системная плашка», а тёплый CTA-блок — две большие кнопки и одна
       строка пояснения. Стиль повторяет pn-profile-role-btn из модалки
       «Профиль семьи», чтобы у пользователя сохранялось ощущение «это та же
       развилка». См. pnRenderChatRolePicker(). */
    .pn-chat-role-picker {
        max-width: 90%;
        margin-left: 2.25rem; /* выравниваем с AI-баблами (учёт аватара) */
        background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
        border: 1px solid var(--border-strong);
        border-radius: 1.25rem;
        padding: 1rem 1rem 1rem 1rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .pn-chat-role-picker .pn-chat-role-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.25rem;
    }
    .pn-chat-role-picker .pn-chat-role-lead {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }
    .pn-chat-role-picker .pn-chat-role-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    @media (max-width: 380px) {
        .pn-chat-role-picker .pn-chat-role-options { grid-template-columns: 1fr; }
    }

    /* Пригласить: шаринг ссылки (мессенджеры + копирование) */
    .pn-share-section-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-main);
        margin-bottom: 0.35rem;
    }
    .pn-share-messenger-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .pn-share-messenger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.65rem 0.5rem;
        border-radius: var(--pn-radius-menu);
        border: 1px solid var(--border-subtle);
        background: var(--bg-surface-muted);
        color: var(--text-main);
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: background-color var(--pn-ease), border-color var(--pn-ease);
    }
    button.pn-share-messenger-btn {
        font: inherit;
        cursor: pointer;
        width: 100%;
    }
    .pn-share-messenger-btn:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
    .pn-share-messenger-btn svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        stroke: var(--icon-accent);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .pn-share-messenger-btn svg.pn-share-icon-fb {
        fill: #1877f2;
        stroke: none;
    }
    .pn-share-messenger-btn svg.pn-share-icon-ig {
        stroke: #e1306c;
        fill: none;
    }
    .pn-share-messenger-btn svg.pn-share-icon-wa {
        color: #25d366;
        stroke: none;
        fill: currentColor;
    }
    #pn-toast.pn-toast {
        position: fixed;
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        left: 50%;
        transform: translate3d(-50%, 120%, 0);
        z-index: 10050;
        padding: 0.65rem 1.25rem;
        border-radius: var(--pn-radius-menu);
        background: var(--bg-surface);
        color: var(--text-main);
        border: 1px solid var(--border-subtle);
        font-size: 14px;
        font-weight: 500;
        box-shadow: var(--shadow-elevated);
        opacity: 0;
        transition: opacity 0.28s ease, transform 0.28s ease;
        pointer-events: none;
        max-width: min(92vw, 22rem);
        text-align: center;
    }
    #pn-toast.pn-toast.is-visible {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
    }

    .pn-aurora-blob {
        background: var(--pn-blob-a, rgba(148, 163, 184, 0.3));
    }
    .pn-aurora-blob--b {
        background: var(--pn-blob-b, rgba(148, 163, 184, 0.2));
    }
    .pn-aurora-blob--c {
        background: var(--pn-blob-c, rgba(226, 232, 240, 0.4));
    }

    .pn-theme-swatch-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.65rem;
        align-items: center;
    }
    .pn-theme-swatch {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 9999px;
        border: 2px solid var(--border-subtle);
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: transform 0.15s ease, box-shadow var(--pn-ease), border-color var(--pn-ease);
    }
    .pn-theme-swatch:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    .pn-theme-swatch:hover {
        transform: scale(1.06);
    }
    .pn-theme-swatch--active {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .pn-theme-swatch--neutral {
        background: linear-gradient(135deg, #f8fafc 45%, #0d9488 45%);
    }
    .pn-theme-swatch--dark {
        background: linear-gradient(135deg, #0c1524 50%, #5eead4 50%);
    }

    .pn-onboarding-logo {
        overflow: hidden;
        background: var(--bg-surface);
        border: 1px solid var(--border-subtle);
    }
    .pn-onboarding-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .pn-onboarding-title {
        color: var(--text-main);
        letter-spacing: -0.02em;
        line-height: 1.25;
    }
    #app-title-main {
        margin-bottom: 0.85rem !important;
    }
    #app-slogan {
        margin-bottom: 0.55rem !important;
        line-height: 1.55;
    }
    .pn-onboarding-slogan {
        color: var(--text-muted);
        line-height: 1.6;
    }
    .pn-onboarding-info-link {
        display: inline;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
        cursor: pointer;
    }
    .pn-onboarding-info-link:hover,
    .pn-onboarding-info-link:focus-visible {
        color: var(--accent-color);
        outline: none;
    }
    .pn-onboarding-start {
        border-radius: 9999px;
        background: var(--accent-color);
        color: #fff;
        font-weight: 600;
    }
    .pn-onboarding-start--secondary {
        background: #fff;
        border: 1px solid color-mix(in srgb, var(--accent-color) 72%, var(--border-strong));
        color: #0f172a;
        box-shadow: none;
    }
    body.theme-dark .pn-onboarding-start {
        color: #0f172a;
    }
    body.theme-dark .pn-onboarding-start.pn-onboarding-start--secondary {
        background: #fff;
        color: #0f172a;
    }
    .pn-onboarding-legal {
        color: var(--text-muted);
        line-height: 1.5;
    }
    .pn-onboarding-legal button {
        color: var(--accent-color);
    }
    .pn-onb-legal-footnote {
        font-size: 11px;
        line-height: 1.45;
        color: var(--text-muted);
        opacity: 0.88;
    }
    .pn-onb-legal-footnote label span {
        color: color-mix(in srgb, var(--text-muted) 92%, var(--text-main) 8%);
    }
    /* Phase F (2026-05-23): click-through consent под главным CTA + узкая
       ссылка-вход внизу. Оба элемента — самые низкие в визуальной иерархии
       онбординга, чтобы не оттягивать фокус от единственной зелёной кнопки. */
    .pn-onb-consent-footnote {
        color: var(--text-muted);
        opacity: 0.88;
        max-width: 32rem;
        margin: 0 auto;
    }
    .pn-onb-consent-footnote .underline {
        color: var(--accent-color);
        cursor: pointer;
        text-underline-offset: 2px;
    }
    .pn-onb-consent-footnote .underline:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
        border-radius: 4px;
    }
    .pn-onb-signin-link {
        background: transparent;
        border: 0;
        padding: 4px 6px;
        color: var(--text-muted);
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }
    .pn-onb-signin-link:hover,
    .pn-onb-signin-link:focus-visible {
        color: var(--accent-color);
        outline: none;
    }
    /* Парная outline-CTA к зелёной pn-onboarding-start: тот же pill,
       тот же размер, но инверсные цвета — чтобы зарегистрированный
       пользователь сразу видел вход и не был визуально «загнан»
       только в путь бесплатного теста. См. #onb-signin-link. */
    .pn-onb-signin-cta {
        border-radius: 9999px;
        border: 2px solid var(--accent-color);
        background: var(--bg-surface);
        color: var(--accent-color);
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .pn-onb-signin-cta:hover,
    .pn-onb-signin-cta:focus-visible {
        background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-surface));
        outline: none;
    }
    .pn-onb-signin-cta:active {
        transform: scale(0.98);
    }
    body.theme-dark .pn-onb-signin-cta {
        background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-surface));
        color: var(--text-main);
    }
    /* Подсветка тарифных карточек после применения промокода:
       pnCheckPromoCode() добавляет класс .pn-promo-applied на
       #modal-service-tariffs / #modal-paywall — визуальный «маяк»,
       что делать дальше (скидка применена → выбери тариф). */
    .pn-promo-applied .pn-pricing-tier-start,
    .pn-promo-applied .pn-pricing-tier-support {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
        transition: box-shadow 0.25s ease;
    }
    .pn-promo-applied .pn-pricing-grid {
        scroll-margin-top: 12px;
    }
    /* Onboarding «или»-разделитель между двумя CTA (Пройти тест / Войти).
       Без него pill-кнопки одинаковой формы визуально сливались. */
    .pn-onb-or-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }
    .pn-onb-or-divider > .pn-onb-or-line {
        flex: 1 1 0%;
        height: 1px;
        background: color-mix(in srgb, var(--border-strong) 70%, transparent);
    }
    .pn-onb-or-divider > .pn-onb-or-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    /* Двухколоночный блок «оплата + промокод» внутри карточки Сопровождение.
       На узких экранах сваливается в одну колонку, на десктопе слева идут
       кнопки оплаты, справа — компактный блок промокода. */
    .pn-tier-support-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    @media (min-width: 480px) {
        .pn-tier-support-actions {
            flex-direction: row;
            align-items: stretch;
            gap: 0.75rem;
        }
        .pn-tier-support-actions > * {
            flex: 1 1 0%;
            min-width: 0;
        }
    }
    .pn-tier-support-pay,
    .pn-tier-support-promo {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    /* Левая колонка: две кнопки делят высоту поровну и тянутся до высоты
       правой колонки (которая обычно выше из-за input + button + hint). */
    .pn-tier-support-pay > button {
        flex: 1 1 0%;
    }
    /* Правая колонка: отдельная мягкая карточка промокода внутри тарифа. */
    .pn-tier-support-promo {
        padding: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 28%, var(--border-strong));
        border-radius: 0.875rem;
        background: color-mix(in srgb, var(--bg-surface) 88%, var(--accent-color) 12%);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 7%, transparent);
    }
    .pn-tier-support-promo > label {
        font-size: 11px;
        font-weight: 600;
        color: var(--text-main);
    }
    .pn-legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.7rem 1.05rem;
        font-size: 10px;
        line-height: 1.45;
        color: var(--text-muted);
    }
    .pn-legal-links a,
    .pn-legal-links button {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    /*
     * Phase B (i18n): компактный переключатель языка над legal-links.
     * Маленькие pill-кнопки с aria-pressed: незаметные русскоязычному
     * пользователю (он уже на RU), но мгновенно находимые тем, кто
     * попал на дефолтный EN через каскад navigator.language → fallback.
     */
    /* === Global language dropdown (2026-05-23) ===
       Глобус-иконка + короткий код языка (EN/RU/ES/FR/ZH). Это отдельный fixed-слой,
       а не часть chat-header: он должен быть виден на онбординге, тесте,
       экране результата и в чате. */
    .pn-lang-dropdown {
        position: fixed;
        top: calc(0.75rem + env(safe-area-inset-top));
        right: 1rem;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        z-index: 10080;
    }
    .pn-lang-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 180px;
        background: var(--bg-surface);
        border: 1px solid var(--border-strong);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
        padding: 6px;
        z-index: 80;
        display: flex;
        flex-direction: column;
    }
    .pn-lang-menu.hidden { display: none; }
    .pn-lang-menu button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 8px 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--text-main);
        font-size: 14px;
        text-align: left;
        cursor: pointer;
    }
    .pn-lang-menu button:hover:not([disabled]) {
        background: var(--bg-hover, color-mix(in srgb, var(--bg-surface) 60%, var(--text-main) 6%));
    }
    .pn-lang-menu button[aria-pressed="true"] {
        background: var(--accent-soft);
        color: var(--accent-color);
        font-weight: 600;
    }
    .pn-lang-menu button[disabled] {
        opacity: 0.45;
        cursor: not-allowed;
    }
    .pn-lang-menu button[disabled]::after {
        content: " · soon";
        font-size: 11px;
        opacity: 0.7;
        margin-left: auto;
        padding-left: 8px;
    }
    .pn-lang-menu button:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }

    .platform-lang-picker {
        display: inline-flex;
        justify-content: center;
        align-self: center;
        gap: 4px;
        padding: 3px;
        margin: 0 auto 6px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
    }
    .platform-lang-picker button {
        min-width: 32px;
        padding: 3px 10px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    .platform-lang-picker button:hover {
        color: var(--text-main);
    }
    .platform-lang-picker button[aria-pressed="true"] {
        background: var(--bg-elevated, color-mix(in srgb, var(--bg-surface) 60%, var(--text-main) 6%));
        color: var(--text-main);
        cursor: default;
    }
    .platform-lang-picker button:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    .pn-onb-access-panel {
        border-top: 1px solid var(--border-strong);
        padding-top: 1rem;
    }
    .pn-onb-access-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.75rem;
        align-items: stretch;
    }
    .pn-onb-chat-btn {
        min-height: 3.25rem;
        border-radius: 1rem;
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
        color: var(--text-main);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .pn-onb-square-btn {
        width: 3.25rem;
        min-height: 3.25rem;
        border-radius: 1rem;
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 72%, transparent);
        color: var(--text-main);
        font-size: 0.9rem;
        font-weight: 800;
        line-height: 1;
    }
    .pn-onb-chat-btn:active,
    .pn-onb-square-btn:active {
        transform: scale(0.98);
    }
    .pn-onb-direct-label {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--text-muted);
        cursor: pointer;
    }
    .pn-onb-direct-label input {
        width: 1rem;
        height: 1rem;
        margin-top: 0.1rem;
        flex-shrink: 0;
        accent-color: var(--accent-color);
    }
    .pn-profile-role-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .pn-profile-role-btn {
        min-height: 3.5rem;
        border-radius: 1rem;
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
        color: var(--text-main);
        font-size: 0.9rem;
        font-weight: 700;
        transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    }
    .pn-profile-role-btn:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent-color) 65%, var(--border-strong));
    }
    .pn-profile-role-btn[aria-pressed="true"] {
        background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-surface));
        border-color: var(--accent-color);
        box-shadow: 0 10px 26px color-mix(in srgb, var(--accent-color) 18%, transparent);
    }
    /* Family Bridge invite banner (ADR-007 §4): показывается приглашённому
       до того, как успел отрисоваться обычный онбординг. Класс
       html.pn-family-invite ставится inline-скриптом в head по наличию
       ?invite= и снимается после успешного join (мягкий переход в чат)
       или safety-таймером 12s. */
    html.pn-family-invite #onboarding-screen,
    html.pn-family-invite #diagnostic-screen,
    html.pn-family-invite #chat-interface,
    html.pn-family-invite #pn-fixed-composer-bar,
    html.pn-family-invite #pn-lang-dropdown {
        display: none !important;
    }
    html.pn-family-invite #pn-family-invite-overlay {
        display: flex !important;
    }
    #pn-family-invite-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 80;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 1.5rem;
        background: var(--bg-app);
        color: var(--text-main);
        text-align: center;
    }
    #pn-family-invite-overlay .pn-family-invite-card {
        max-width: 380px;
        width: 100%;
        border-radius: 20px;
        border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-strong));
        background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-surface));
        padding: 1.5rem 1.25rem 1.25rem;
    }
    #pn-family-invite-overlay .pn-family-invite-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto 0.75rem;
        border-radius: 50%;
        background: color-mix(in srgb, var(--accent-color) 18%, transparent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-color);
    }
    #pn-family-invite-overlay .pn-family-invite-spinner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
        border-top-color: var(--accent-color);
        animation: pn-session-restore-spin 0.9s linear infinite;
        margin: 0.5rem auto 0;
    }
    #pn-family-invite-overlay .pn-family-invite-error-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.75rem;
        padding: 0.6rem 1.1rem;
        border-radius: 12px;
        border: 1px solid var(--border-strong);
        background: var(--bg-surface);
        color: var(--text-main);
        font-size: 13px;
        cursor: pointer;
    }
    /* Сплеш «Восстанавливаю сессию…» поверх онбординга для возвращающегося
       пользователя (см. inline-script в head). Класс ставится до того, как
       основной JS успеет показать онбординг — поэтому сплеш «съедает»
       период async auth-цепочки (до ~10 сек). */
    html.pn-restoring-session #onboarding-screen,
    html.pn-restoring-session #diagnostic-screen,
    html.pn-restoring-session #chat-interface,
    html.pn-restoring-session #pn-fixed-composer-bar,
    html.pn-restoring-session #pn-lang-dropdown {
        display: none !important;
    }
    html.pn-restoring-session #pn-session-restore-overlay {
        display: flex !important;
    }
    #pn-session-restore-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 80;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1.5rem;
        background: var(--bg-app);
        color: var(--text-main);
        text-align: center;
    }
    #pn-session-restore-overlay .pn-session-restore-spinner {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
        border-top-color: var(--accent-color);
        animation: pn-session-restore-spin 0.9s linear infinite;
    }
    @keyframes pn-session-restore-spin {
        to { transform: rotate(360deg); }
    }
    /* Глобус-переключатель языка скрывается на чат-экране — там доступ к языку
       переехал в Настройки (Phase F, 2026-05-23). На онбординге и диагностике
       глобус остаётся, потому что шестерёнки настроек там нет. Управление:
       pnUpdateGlobeVisibility() ставит/снимает класс на <body>. */
    body.pn-globe-hidden #pn-lang-dropdown {
        display: none !important;
    }
    /* Кнопки языка в модалке настроек. Используют тот же data-pn-lang, что и
       глобус — bindPickers/paintActive автоматически держат aria-pressed в синке. */
    .pn-settings-lang-btn {
        padding: 0.55rem 0.95rem;
        border-radius: 0.75rem;
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
        color: var(--text-main);
        font-size: 0.82rem;
        font-weight: 600;
        transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        cursor: pointer;
    }
    .pn-settings-lang-btn[aria-pressed="true"] {
        background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-surface));
        border-color: var(--accent-color);
        color: var(--text-main);
    }
    .pn-settings-lang-btn[disabled],
    .pn-settings-lang-btn[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    /* Сегментированный переключатель аудитории «Опоры» (parent/teen). */
    .pn-support-audience-btn {
        padding: 0.4rem 0.85rem;
        border-radius: 0.6rem;
        border: 1px solid transparent;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1.1;
        transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
        cursor: pointer;
    }
    .pn-support-audience-btn[aria-pressed="true"] {
        background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-surface));
        border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-strong));
        color: var(--text-main);
    }
    .pn-profile-textarea {
        min-height: 10rem;
        resize: vertical;
        line-height: 1.55;
    }
    .pn-profile-help {
        border-radius: 1rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--border-strong));
        background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-surface));
        padding: 0.75rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        line-height: 1.5;
    }
    @keyframes pn-onb-cta-pulse {
        0%, 100% {
            box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-color) 32%, transparent),
                0 0 0 0 color-mix(in srgb, var(--accent-color) 40%, transparent);
        }
        55% {
            box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color) 38%, transparent),
                0 0 0 10px color-mix(in srgb, var(--accent-color) 0%, transparent);
        }
    }
    .pn-onb-cta-pulse {
        animation: pn-onb-cta-pulse 2.4s ease-in-out infinite;
    }

    .pn-diag-emoji {
        display: inline-block;
        line-height: 1;
        transition: filter 0.25s ease, text-shadow 0.25s ease;
    }
    .pn-diag-emoji--good {
        filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.55));
    }
    .pn-diag-emoji--caution {
        filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.58));
    }
    .pn-diag-emoji--bad {
        filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.52));
    }
    .pn-diag-health-track {
        height: 0.45rem;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--border-strong) 50%, var(--bg-app) 50%);
        overflow: hidden;
    }
    .pn-diag-health-fill {
        height: 100%;
        border-radius: 9999px;
        transition: width 0.5s ease;
        min-width: 4px;
    }
    .pn-diag-health-fill--good {
        background: linear-gradient(90deg, #16a34a, #4ade80);
    }
    .pn-diag-health-fill--caution {
        background: linear-gradient(90deg, #ca8a04, #facc15);
    }
    .pn-diag-health-fill--risk {
        background: linear-gradient(90deg, #ea580c, #fb923c);
    }
    .pn-diag-health-fill--bad {
        background: linear-gradient(90deg, #dc2626, #f87171);
    }
    .pn-diag-metric-card {
        border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent);
        border-radius: 1rem;
        padding: 0.875rem;
        background: color-mix(in srgb, var(--bg-app) 58%, transparent);
    }
    body.theme-dark .pn-diag-metric-card {
        background: color-mix(in srgb, #0f172a 48%, transparent);
        border-color: color-mix(in srgb, var(--border-subtle) 42%, transparent);
    }
    /* Compact "Pulse + Battery" pills: live inline with the other round
       header buttons (40px height, ~58–64px wide because we still need to
       fit "100%"). Click opens #modal-state-indicators for the full copy. */
    .pn-state-indicators {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
    .pn-state-indicators.hidden { display: none; }
    /* Pulse/Battery pills: визуально сопоставлены с .pn-header-icon-btn — та же
       тонкая нейтральная обводка и приглушённый фон. Сигнал зоны (низкий /
       средний / высокий) выражается только цветом числа, чтобы шапка
       оставалась спокойной и не «кричала» цветной рамкой. */
    .pn-state-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 40px;
        padding: 0 10px 0 9px;
        border: 1px solid var(--border-subtle);
        border-radius: 999px;
        background: var(--bg-surface-muted);
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition: background-color var(--pn-ease), border-color var(--pn-ease), color var(--pn-ease), transform 0.05s ease;
    }
    .pn-state-pill:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
        color: var(--text-main);
    }
    .pn-state-pill:active {
        transform: scale(0.96);
    }
    .pn-state-pill__icon {
        display: inline-flex;
        align-items: center;
        line-height: 1;
        color: var(--text-muted);
    }
    #pn-state-pulse-pill .pn-state-pill__icon { color: #e0567a; }
    #pn-state-battery-pill .pn-state-pill__icon { color: #3a9d6e; }
    body.theme-dark #pn-state-pulse-pill .pn-state-pill__icon { color: #f87a9a; }
    body.theme-dark #pn-state-battery-pill .pn-state-pill__icon { color: #5fc99a; }
    .pn-state-modal__icon {
        display: inline-flex;
        align-items: center;
        color: var(--text-muted);
    }
    .pn-state-modal__icon[data-kind="pulse"] { color: #e0567a; }
    .pn-state-modal__icon[data-kind="battery"] { color: #3a9d6e; }
    body.theme-dark .pn-state-modal__icon[data-kind="pulse"] { color: #f87a9a; }
    body.theme-dark .pn-state-modal__icon[data-kind="battery"] { color: #5fc99a; }
    .pn-state-pill__value {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    /* Цвет числа — единственный сигнал зоны. Зелёный/жёлтый/красный остаются
       информативными, но обводка пилюли — нейтральная (см. выше). */
    .pn-state-pill[data-band="high"] .pn-state-pill__value { color: #15803d; }
    .pn-state-pill[data-band="mid"] .pn-state-pill__value { color: #a16207; }
    .pn-state-pill[data-band="low"] .pn-state-pill__value { color: #b91c1c; }
    body.theme-dark .pn-state-pill[data-band="high"] .pn-state-pill__value { color: #4ade80; }
    body.theme-dark .pn-state-pill[data-band="mid"] .pn-state-pill__value { color: #facc15; }
    body.theme-dark .pn-state-pill[data-band="low"] .pn-state-pill__value { color: #f87171; }
    /* Empty-state: пилюля видна всегда (для discoverability), но визуально
       «приглушена» — приглашение к клику без давления. */
    .pn-state-pill[data-empty="true"] { opacity: 0.65; }
    .pn-state-pill[data-empty="true"] .pn-state-pill__value { color: var(--text-muted); }
    .pn-state-modal__big[data-empty="true"] { color: var(--text-muted); }
    .pn-state-modal__big {
        font-size: 32px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    .pn-state-modal__big[data-band="high"] { color: #15803d; }
    .pn-state-modal__big[data-band="mid"] { color: #a16207; }
    .pn-state-modal__big[data-band="low"] { color: #b91c1c; }
    body.theme-dark .pn-state-modal__big[data-band="high"] { color: #4ade80; }
    body.theme-dark .pn-state-modal__big[data-band="mid"] { color: #facc15; }
    body.theme-dark .pn-state-modal__big[data-band="low"] { color: #f87171; }
    .pn-diag-resource-advice {
        border: 1px solid color-mix(in srgb, #f59e0b 35%, var(--border-subtle));
        border-radius: 0.875rem;
        padding: 0.625rem 0.75rem;
        background: color-mix(in srgb, #f59e0b 10%, var(--bg-surface));
    }

    .pn-banner-warn {
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--border-subtle));
        background: color-mix(in srgb, var(--accent-soft) 35%, var(--bg-surface-muted));
        color: var(--text-main);
    }

    /* Pricing-сетка тарифов (Базовый / Старт / Сопровождение). Минимальные
       правила — основной стиль карточек уже задан через утилитарные классы
       Tailwind в самой разметке. Здесь только список фич с галочкой и
       стабильное выравнивание галочка-текст на узких экранах. */
    .pn-pricing-features {
        color: var(--text-main);
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .pn-pricing-features li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.45;
    }
    .pn-pricing-check {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        margin-top: 1px;
        background: color-mix(in srgb, var(--accent-color) 16%, transparent);
        color: var(--accent-color);
    }

    /* «Мой тариф» в настройках: компактный бейдж активный/бесплатный. */
    .pn-my-tariff-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: lowercase;
        white-space: nowrap;
    }
    .pn-my-tariff-badge--active {
        background: color-mix(in srgb, var(--accent-color) 18%, transparent);
        color: var(--accent-color);
    }
    .pn-my-tariff-badge--free {
        background: color-mix(in srgb, var(--text-muted) 14%, transparent);
        color: var(--text-muted);
    }

    /* Квота запросов: кольцевая диаграмма (полный круг = лимит, цветная дуга = остаток) */
    #pn-billing-wrap:not(.hidden) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
    }
    #pn-billing-wrap .pn-billing-donut-svg {
        display: block;
    }
    #pn-billing-wrap .pn-billing-donut-arc {
        stroke: var(--accent-color);
        transition: stroke-dasharray 0.35s ease, stroke 0.25s ease;
    }
    #pn-billing-wrap.pn-billing-donut--low .pn-billing-donut-arc {
        stroke: #d97706;
    }
    body.theme-dark #pn-billing-wrap.pn-billing-donut--low .pn-billing-donut-arc {
        stroke: #fbbf24;
    }

    /* Согласие на cookie (152-ФЗ / ePrivacy-подход: явный выбор до необязательных технологий) */
    #pn-cookie-banner {
        position: fixed;
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        z-index: 98;
        max-width: min(36rem, 100%);
        margin-left: auto;
        margin-right: auto;
    }
    #pn-cookie-banner .pn-cookie-banner__inner {
        border-radius: var(--pn-radius-menu, 1rem);
        border: 1px solid var(--border-subtle);
        background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
        color: var(--text-main);
        box-shadow: var(--shadow-elevated);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        padding: 0.9rem 1rem 1rem;
    }
    #pn-cookie-banner .pn-cookie-banner__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    #pn-cookie-banner .pn-cookie-btn {
        flex: 1 1 auto;
        min-width: min(100%, 8.5rem);
        padding: 0.55rem 0.85rem;
        font-size: 13px;
        font-weight: 600;
        border-radius: 0.75rem;
        border: 1px solid var(--border-strong);
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.15s ease;
    }
    #pn-cookie-banner .pn-cookie-btn:active {
        transform: scale(0.98);
    }
    #pn-cookie-banner .pn-cookie-btn--accept {
        background: var(--accent-color);
        color: #fff;
        border-color: transparent;
    }
    #pn-cookie-banner .pn-cookie-btn--reject {
        background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
        color: var(--text-main);
    }
    #pn-cookie-banner .pn-cookie-banner__link {
        font-size: 12px;
        margin-top: 0.5rem;
        color: var(--text-muted);
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
    }
    .pn-header-status-pill.pn-status-free {
        color: #F28C28;
        font-weight: 600;
    }
    /* Индикатор режима под логотипом — кликабелен (открывает тарифы). */
    button.pn-header-status-pill {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
    }
    button.pn-header-status-pill:hover { opacity: 0.82; }

    /* Мобильная шапка: на узких экранах правый кластер (пульс/батарейка/карта/
       «···») наезжал на логотип и индикатор режима. Ужимаем контролы целиком —
       меньше пилюли и кнопки, плотнее отступы — и не даём индикатору растягивать
       строку. Значения %, иконки и доступность сохраняются. */
    @media (max-width: 480px) {
        #pn-header-ai-indicator {
            font-size: 10px;
            max-width: 30vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .pn-header-top-row { gap: 0.25rem; }
        .pn-header-home-trigger { max-width: 46%; }
        #app-title-header { font-size: 14px; }
        .pn-header-controls { gap: 0.2rem; flex-shrink: 0; }
        .pn-header-controls .pn-header-icon-btn {
            width: 1.875rem;
            height: 1.875rem;
        }
        .pn-header-controls .pn-header-icon-btn svg {
            width: 15px;
            height: 15px;
        }
        .pn-state-indicators { gap: 0.2rem; }
        .pn-state-pill {
            height: 1.875rem;
            padding: 0 5px;
            font-size: 10px;
            gap: 2px;
        }
        .pn-state-pill__icon svg {
            width: 12px;
            height: 12px;
        }
    }
    /* Очень узкие экраны (<360px): прячем числовые значения пульса/батарейки,
       оставляя цветные иконки-сигналы — освобождаем место под логотип. */
    @media (max-width: 359px) {
        .pn-state-pill { padding: 0 7px; }
        .pn-state-pill__value { display: none; }
    }

    /* PayPal Smart Buttons overlay — всплывает поверх модалки тарифов для
       международной оплаты (см. pnRenderPaypalButtons в 10-billing.js). */
    .pn-paypal-overlay {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(2px);
    }
    .pn-paypal-overlay.hidden { display: none; }
    .pn-paypal-sheet {
        position: relative;
        width: 100%;
        max-width: 380px;
        max-height: 90dvh;
        overflow-y: auto;
        background: var(--bg-surface, #fff);
        color: var(--text-main, #0f172a);
        border-radius: 1rem;
        padding: 1.5rem 1.25rem 1.25rem;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    }
    .pn-paypal-close {
        position: absolute;
        top: 0.5rem;
        right: 0.65rem;
        font-size: 1.5rem;
        line-height: 1;
        background: none;
        border: none;
        color: var(--text-muted, #94a3b8);
        cursor: pointer;
    }
    .pn-paypal-close:hover { opacity: 0.7; }
    .pn-paypal-title {
        font-size: 0.95rem;
        font-weight: 600;
        margin: 0 1.25rem 0.25rem 0;
    }
    .pn-paypal-price {
        font-size: 0.85rem;
        color: var(--text-muted, #64748b);
        margin: 0 0 1rem;
    }
    .pn-paypal-status {
        font-size: 0.8rem;
        color: var(--text-muted, #64748b);
        margin: 0.75rem 0 0;
        min-height: 1em;
    }