:root {
    --bg-0: #05060d;
    --bg-1: #08101c;
    --surface: rgba(12, 16, 40, 0.68);
    --surface-strong: rgba(8, 11, 28, 0.9);
    --ink: #eaf0ff;
    --ink-dim: #8a9bc8;
    --ink-mute: #5c6b95;
    --cyan: #35e7ff;
    --cyan-2: #8cf2ff;
    --violet: #a06bff;
    --lime: #c8ff5a;
    --red: #ff5a7e;
    --gold: #ffcc69;
    --stroke: rgba(140, 175, 230, 0.14);
    --stroke-strong: rgba(140, 175, 230, 0.26);
    --shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
    --glass: rgba(12, 16, 40, 0.62);
    --glass-hover: rgba(18, 24, 56, 0.78);
    /* Шапка и main: одинаковые боковые поля; плавный рост на 1280–2560+ (консольный / «PS5»-стиль) */
    --product-inline: clamp(14px, 1.1vw + 14px, 48px);
    --product-header-pad-y: clamp(14px, 0.75vw + 11px, 24px);
    --product-header-height: calc(var(--product-header-pad-y) * 2 + clamp(42px, 2.8vw + 32px, 58px));
    --product-main-pad-y-top: clamp(20px, 1.25vw + 12px, 40px);
    --product-main-pad-y-bottom: clamp(24px, 1.5vw + 14px, 52px);
    --product-gap-section: clamp(18px, 1.15vw + 10px, 36px);
    --product-gap-block: clamp(14px, 0.85vw + 8px, 26px);
    --product-text-nav: clamp(10.5px, 0.22vw + 9.6px, 14px);
    --product-text-ui-sm: clamp(9.5px, 0.18vw + 8.8px, 12px);
    --product-text-ui: clamp(12px, 0.32vw + 10px, 16px);
    --product-text-body: clamp(12.5px, 0.4vw + 10px, 17px);
    --product-text-title: clamp(17px, 0.8vw + 11px, 28px);
    --product-text-mono: clamp(11px, 0.28vw + 9.5px, 15px);
    color-scheme: dark;
}

html[data-lexiorbit-theme="light"] {
    --bg-0: #f4f6fb;
    --bg-1: #eef1f8;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(248, 250, 252, 0.95);
    --ink: #0f172a;
    --ink-dim: #475569;
    --ink-mute: #64748b;
    --cyan: #0e7490;
    --cyan-2: #06b6d4;
    --violet: #6d28d9;
    --lime: #4d7c0f;
    --red: #dc2626;
    --gold: #b45309;
    --stroke: rgba(15, 23, 42, 0.1);
    --stroke-strong: rgba(15, 23, 42, 0.16);
    --shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.18);
    --glass: rgba(255, 255, 255, 0.82);
    --glass-hover: rgba(255, 255, 255, 0.95);
    color-scheme: light;
}

html[data-lexiorbit-theme="light"] body {
    background:
        radial-gradient(1200px 800px at 78% -10%, rgba(109, 40, 217, 0.12), transparent 60%),
        radial-gradient(1200px 900px at 10% 110%, rgba(14, 165, 233, 0.1), transparent 60%),
        radial-gradient(700px 500px at 50% 55%, rgba(99, 102, 241, 0.08), transparent 70%),
        linear-gradient(180deg, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
}

html[data-lexiorbit-theme="light"] .stars {
    opacity: 0.32;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(15, 23, 42, 0.35), transparent 60%),
        radial-gradient(1px 1px at 28% 70%, rgba(14, 165, 233, 0.45), transparent 60%),
        radial-gradient(1px 1px at 55% 12%, rgba(15, 23, 42, 0.3), transparent 60%),
        radial-gradient(1px 1px at 78% 38%, rgba(109, 40, 217, 0.35), transparent 60%),
        radial-gradient(1px 1px at 85% 82%, rgba(15, 23, 42, 0.28), transparent 60%),
        radial-gradient(1px 1px at 40% 90%, rgba(14, 165, 233, 0.35), transparent 60%),
        radial-gradient(1px 1px at 65% 60%, rgba(15, 23, 42, 0.32), transparent 60%);
}

html[data-lexiorbit-theme="light"] .scan {
    opacity: 0.45;
    background: repeating-linear-gradient(to bottom, rgba(15, 23, 42, 0.028) 0 2px, transparent 2px 4px);
}

html[data-lexiorbit-theme="light"] .vignette {
    background: radial-gradient(ellipse at center, transparent 42%, rgba(15, 23, 42, 0.07) 100%);
}

html[data-lexiorbit-theme="light"] .product-header {
    background: rgba(255, 255, 255, 0.76);
}

html[data-lexiorbit-theme="light"] .product-burger:hover {
    background: rgba(15, 23, 42, 0.06);
}

html[data-lexiorbit-theme="light"] .product-nav {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--stroke);
    box-shadow: 0 4px 24px -8px rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .product-nav a {
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .product-nav a:hover,
html[data-lexiorbit-theme="light"] .product-nav a.is-active {
    color: #fff;
    background: linear-gradient(90deg, #0891b2, #6366f1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

html[data-lexiorbit-theme="light"] .product-profile-dropdown {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--stroke-strong);
    box-shadow:
        0 22px 50px -18px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

html[data-lexiorbit-theme="light"] .product-profile-option:hover,
html[data-lexiorbit-theme="light"] .product-profile-option.is-active {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.1);
}

html[data-lexiorbit-theme="light"] .product-profile-settings-link {
    background: rgba(99, 102, 241, 0.12);
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .product-layout .footer-grid {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 48px -28px rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-column-title {
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-brand {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-links a:hover {
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-legal-line {
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-legal-muted {
    color: var(--ink-mute);
    opacity: 0.92;
}

html[data-lexiorbit-theme="light"] .product-layout .footer-legal-link {
    color: #0e7490;
}

html[data-lexiorbit-theme="light"] .product-layout .footer-legal-link:hover {
    color: var(--violet);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-acquiring-note,
html[data-lexiorbit-theme="light"] .product-layout .footer-acquiring-support {
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .product-layout .footer-help-link {
    color: #0891b2;
}

html[data-lexiorbit-theme="light"] .product-layout .footer-help-link:hover {
    color: #0e7490;
}

/* Support / tickets — light theme (list, create modal, chat) */
html[data-lexiorbit-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(10px);
}

html[data-lexiorbit-theme="light"] .modal-close {
    background: rgba(15, 23, 42, 0.06);
}

html[data-lexiorbit-theme="light"] .modal-close:hover {
    background: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .ticket-modal {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow:
        0 24px 64px -24px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

html[data-lexiorbit-theme="light"] .field-input {
    background: rgba(248, 250, 252, 0.95);
    border-color: var(--stroke-strong);
}

html[data-lexiorbit-theme="light"] .cat-chip {
    background: rgba(248, 250, 252, 0.9);
}

html[data-lexiorbit-theme="light"] .cat-chip:hover {
    background: rgba(241, 245, 249, 0.98);
}

html[data-lexiorbit-theme="light"] .attach-add {
    background: rgba(248, 250, 252, 0.6);
}

html[data-lexiorbit-theme="light"] .attach-remove {
    background: rgba(15, 23, 42, 0.65);
}

html[data-lexiorbit-theme="light"] .btn-cancel {
    background: rgba(248, 250, 252, 0.95);
}

html[data-lexiorbit-theme="light"] .btn-cancel:hover {
    background: rgba(241, 245, 249, 1);
}

html[data-lexiorbit-theme="light"] .support-filter-n {
    background: rgba(15, 23, 42, 0.06);
}

/* «Создать тикет»: в светлой теме --cyan тёмный — светлый текст и те же stops, что у основных кнопок */
html[data-lexiorbit-theme="light"] .btn-create-ticket {
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #f8fafc;
    box-shadow: 0 0 28px rgba(14, 165, 233, 0.38);
}

html[data-lexiorbit-theme="light"] .btn-create-ticket:hover {
    color: #ffffff;
    box-shadow: 0 0 36px rgba(14, 165, 233, 0.52);
}

html[data-lexiorbit-theme="light"] .btn-create-ticket span {
    color: inherit;
}

html[data-lexiorbit-theme="light"] .ticket-card:hover {
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18);
}

html[data-lexiorbit-theme="light"] .ticket-chat-shell {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--stroke-strong);
    box-shadow: 0 18px 48px -32px rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .ticket-chat-head {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom-color: var(--stroke);
    backdrop-filter: none;
}

html[data-lexiorbit-theme="light"] .ticket-chat-body {
    background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
}

html[data-lexiorbit-theme="light"] .chat-system {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .chat-bubble.theirs {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 116, 144, 0.28);
}

html[data-lexiorbit-theme="light"] .chat-bubble.mine {
    background: rgba(109, 40, 217, 0.1);
    border-color: rgba(91, 33, 182, 0.28);
}

html[data-lexiorbit-theme="light"] .chat-file {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 116, 144, 0.22);
}

html[data-lexiorbit-theme="light"] .chat-file.chat-file--image img {
    background: radial-gradient(ellipse at center, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.75));
}

html[data-lexiorbit-theme="light"] .chat-file > span {
    background: rgba(15, 23, 42, 0.06);
}

html[data-lexiorbit-theme="light"] .ticket-input-shell {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-top-color: var(--stroke);
    backdrop-filter: none;
}

html[data-lexiorbit-theme="light"] .ticket-input-row {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--stroke-strong);
}

html[data-lexiorbit-theme="light"] .ticket-attach-btn:hover {
    background: rgba(14, 165, 233, 0.1);
}

html[data-lexiorbit-theme="light"] .ticket-send-btn:disabled {
    background: rgba(15, 23, 42, 0.06);
}

html[data-lexiorbit-theme="light"] .ticket-closed-banner:not([hidden]) {
    background: rgba(255, 255, 255, 0.92);
    border-top-color: var(--stroke);
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .settings-screen .settings-group {
    background: var(--surface);
}

html[data-lexiorbit-theme="light"] .settings-screen .settings-row:hover {
    background: rgba(15, 23, 42, 0.05);
}

html[data-lexiorbit-theme="light"] .settings-screen .settings-row.settings-appearance-pick.is-active {
    background: rgba(14, 165, 233, 0.1);
}

html[data-lexiorbit-theme="light"] .product-card--metric {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.94));
}

html[data-lexiorbit-theme="light"] .lobby-progress-card,
html[data-lexiorbit-theme="light"] .lobby-rank-card,
html[data-lexiorbit-theme="light"] .lobby-lb-item,
html[data-lexiorbit-theme="light"] .lobby-streak-card {
    background: var(--glass);
}

html[data-lexiorbit-theme="light"] .lobby-progress-card:hover,
html[data-lexiorbit-theme="light"] .lobby-lb-item:hover {
    background: var(--glass-hover);
}

html[data-lexiorbit-theme="light"] .lobby-cta-button {
    background: linear-gradient(90deg, #0891b2, #6366f1);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(99, 102, 241, 0.32),
        0 6px 22px rgba(8, 145, 178, 0.22);
}

html[data-lexiorbit-theme="light"] .lobby-cta-button::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent);
}

html[data-lexiorbit-theme="light"] .settings-profile-card {
    background: var(--surface);
}

html[data-lexiorbit-theme="light"] .settings-profile-card.is-active {
    border-color: rgba(14, 165, 233, 0.38);
    background: rgba(14, 165, 233, 0.08);
}

/* Settings modals: QR входа в профиль, создание профиля */
html[data-lexiorbit-theme="light"] .settings-modal {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(10px);
}

html[data-lexiorbit-theme="light"] .settings-modal__dialog {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow:
        0 24px 64px -24px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

html[data-lexiorbit-theme="light"] .settings-modal__close {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .settings-modal__close:hover {
    background: rgba(15, 23, 42, 0.1);
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .settings-modal h2 {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .settings-qr-subtitle {
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .settings-field-input {
    background: rgba(248, 250, 252, 0.98);
    border-color: var(--stroke-strong);
}

html[data-lexiorbit-theme="light"] .settings-btn-cancel {
    background: rgba(248, 250, 252, 0.98);
}

html[data-lexiorbit-theme="light"] .settings-btn-cancel:hover {
    background: rgba(241, 245, 249, 1);
}

html[data-lexiorbit-theme="light"] .settings-btn-create {
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    box-shadow: 0 0 24px rgba(14, 165, 233, 0.28);
}

html[data-lexiorbit-theme="light"] .settings-btn-create:hover {
    box-shadow: 0 0 32px rgba(14, 165, 233, 0.42);
}

html[data-lexiorbit-theme="light"] .settings-profile-activate {
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    box-shadow: 0 0 22px rgba(14, 165, 233, 0.22);
}

html[data-lexiorbit-theme="light"] .settings-profile-activate:hover {
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.38);
}

html[data-lexiorbit-theme="light"] .settings-profile-current {
    background: rgba(14, 165, 233, 0.12);
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .settings-profile-share-btn {
    border: 1px solid var(--stroke-strong);
    background: rgba(248, 250, 252, 0.95);
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .settings-profile-share-btn:hover {
    border-color: rgba(14, 165, 233, 0.45);
    background: rgba(14, 165, 233, 0.08);
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .settings-add-card {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.06);
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .settings-add-card span {
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.1);
}

html[data-lexiorbit-theme="light"] .settings-topup-button.btn-pay {
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    box-shadow: 0 0 24px rgba(14, 165, 233, 0.28);
    animation: none;
}

html[data-lexiorbit-theme="light"] .settings-topup-button.btn-pay::after {
    display: none;
}

html[data-lexiorbit-theme="light"] .settings-topup-button.btn-pay:hover {
    filter: none;
    box-shadow: 0 0 32px rgba(14, 165, 233, 0.42);
}

html[data-lexiorbit-theme="light"] .settings-modal-avatar label {
    border-color: rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .settings-modal-avatar strong {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .settings-nav-item.is-active,
html[data-lexiorbit-theme="light"] .settings-nav-item:hover {
    background: rgba(14, 165, 233, 0.12);
}

html[data-lexiorbit-theme="light"] .settings-input {
    background: rgba(15, 23, 42, 0.04);
}

html[data-lexiorbit-theme="light"] .orb.c {
    background: #5eead4;
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.45);
}

html[data-lexiorbit-theme="light"] .orb.v {
    background: #c4b5fd;
    box-shadow: 0 0 10px rgba(109, 40, 217, 0.35);
}

html[data-lexiorbit-theme="light"] .orb.l {
    background: #bef264;
    box-shadow: 0 0 10px rgba(77, 124, 15, 0.35);
}

.settings-screen .settings-row.settings-appearance-pick.is-active {
    background: rgba(53, 231, 255, 0.1);
}

.settings-screen button.settings-row.settings-appearance-pick {
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.settings-screen button.settings-row.settings-appearance-pick:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

.settings-appearance-pick .settings-appearance-check {
    font-style: normal;
    font-weight: 900;
    color: var(--cyan);
    flex: 0 0 auto !important;
}

.settings-screen .settings-row.settings-appearance-pick .settings-appearance-check[hidden] {
    display: none;
}

.product-avatar {
    text-decoration: none;
}

.product-avatar__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.settings-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 22px;
}

.settings-sidebar,
.settings-content .product-card {
    min-width: 0;
}

.settings-sidebar {
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 24px;
    padding: 18px;
    height: max-content;
}

.settings-nav-title {
    color: var(--ink-mute);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.settings-nav-item {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--ink-dim);
    font-weight: 700;
}

.settings-nav-item.is-active,
.settings-nav-item:hover {
    color: var(--cyan);
    background: rgba(53, 231, 255, .08);
}

.settings-content {
    display: grid;
    gap: 18px;
}

.settings-hero,
.settings-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-hero h1,
.settings-section-head h2 {
    margin: 0;
}

.settings-hero p {
    color: var(--ink-dim);
    max-width: 680px;
    margin: 8px 0 0;
}

.settings-create-profile {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-input {
    min-height: 42px;
    min-width: 220px;
    border-radius: 14px;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, .06);
    color: var(--ink);
    padding: 0 14px;
}

.settings-profiles,
.settings-popup-profiles {
    display: grid;
    gap: 12px;
}

.settings-profiles {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 18px;
}

.settings-profile-card {
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, .04);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 12px;
    cursor: pointer;
}

.settings-profile-card.is-active {
    border-color: rgba(53, 231, 255, .42);
    background: rgba(53, 231, 255, .08);
}

.settings-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    color: #fff;
    font-weight: 900;
    overflow: hidden;
}

.settings-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-profile-card small {
    display: block;
    margin-top: 4px;
    color: var(--ink-mute);
}

.settings-avatar-form label {
    display: inline-flex;
    cursor: pointer;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
}

.settings-avatar-form input {
    display: none;
}

.settings-table-wrap {
    overflow-x: auto;
    margin-top: 16px;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.settings-table th,
.settings-table td {
    padding: 12px;
    border-bottom: 1px solid var(--stroke);
    text-align: left;
}

.settings-table th {
    color: var(--ink-mute);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.settings-table .is-plus {
    color: var(--lime);
}

.settings-table .is-minus {
    color: #ff7a90;
}

.settings-popup-profile {
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: var(--ink);
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 700;
}

.settings-screen {
    display: grid;
    grid-template-columns: clamp(250px, 14vw, 350px) minmax(0, 1fr);
    gap: var(--product-gap-section);
    align-items: start;
    margin-top: 25px;
}

.product-page--settings .product-main {
    max-width: min(1440px, 100%);
}

.product-page--settings .settings-screen {
    margin-top: 0;
    gap: var(--product-gap-section);
}

.product-page--settings .settings-panel.is-active {
    display: flex;
    flex-direction: column;
    gap: var(--product-gap-block);
}

.product-page--settings .settings-muted,
.product-page--settings .settings-info-banner {
    margin-bottom: 0;
}

.product-page--settings .settings-screen .settings-profiles {
    margin-top: 4px;
}

.settings-screen .settings-sidebar {
    position: sticky;
    top: var(--product-header-height);
    min-height: calc(100vh - var(--product-header-height) - 24px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: clamp(14px, 1vw + 10px, 26px) clamp(10px, 0.6vw + 8px, 16px);
    border-right: 1px solid var(--stroke);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-sidebar-label {
    margin: 27px 0 4px;
    padding: 0 12px;
    color: var(--ink-mute);
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--product-text-ui-sm);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.settings-sidebar-label:first-child {
    margin-top: 15px;
}

.settings-screen .settings-nav-item {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.5vw + 6px, 12px);
    min-height: clamp(38px, 2.2vw + 28px, 48px);
    padding: clamp(8px, 0.45vw + 6px, 12px) clamp(10px, 0.55vw + 8px, 14px);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ink-dim);
    font-size: var(--product-text-ui);
    font-weight: 500;
    transition: all .2s;
}

.settings-screen .settings-nav-item span {
    width: clamp(20px, 1.2vw + 16px, 26px);
    text-align: center;
}

.settings-screen .settings-nav-item em {
    margin-left: auto;
    min-width: clamp(20px, 1vw + 16px, 26px);
    border-radius: 999px;
    background: rgba(160, 107, 255, .2);
    color: var(--violet);
    font-size: var(--product-text-ui-sm);
    font-style: normal;
    text-align: center;
}

.settings-screen .settings-nav-item.is-active,
.settings-screen .settings-nav-item:hover {
    color: var(--cyan);
    background: rgba(53, 231, 255, .09);
    border-color: rgba(53, 231, 255, .18);
}

.settings-screen .settings-nav-item--logout {
    margin-top: 6px;
    color: var(--ink-mute);
}

.settings-screen .settings-nav-item--logout:hover {
    color: #ffb4b4;
    background: rgba(255, 90, 90, .1);
    border-color: rgba(255, 120, 120, .22);
}

.settings-active-mini {
    margin-top: auto;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(255, 255, 255, .03);
}

.settings-active-mini__row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-active-mini__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    flex-shrink: 0;
}

.settings-active-mini__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-active-mini strong,
.settings-active-mini small {
    display: block;
}

.settings-active-mini small {
    margin-top: 2px;
    color: var(--ink-mute);
    font-size: var(--product-text-ui-sm);
}

.settings-account-delete-wrap {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-delete-account {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 150, 150, 0.75);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.settings-delete-account:hover {
    color: #ffb4b4;
}

.settings-delete-account-hint {
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.45;
    color: var(--ink-mute);
    opacity: 0.85;
}

.settings-screen .settings-content {
    display: block;
    min-width: 0;
}

.settings-panel {
    display: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.settings-panel.is-active {
    display: block;
    animation: slideUp .35s ease both;
}

.settings-panel h1 {
    margin: 0;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--product-text-title);
    font-weight: 800;
}

.settings-section-head p,
.settings-muted {
    margin: 6px 0 0;
    color: var(--ink-mute);
    font-size: var(--product-text-body);
    font-weight: 600;
}

.settings-muted {
    margin-bottom: 20px;
}

.settings-info-banner {
    display: flex;
    gap: clamp(10px, 0.7vw + 8px, 18px);
    align-items: flex-start;
    margin-bottom: 20px;
    padding: clamp(12px, 0.9vw + 10px, 22px) clamp(14px, 1vw + 10px, 24px);
    border: 1px solid rgba(53, 231, 255, .18);
    border-radius: clamp(14px, 0.8vw + 10px, 22px);
    background: rgba(53, 231, 255, .06);
}

.settings-info-banner span {
    font-size: clamp(16px, 1.1vw + 12px, 24px);
}

.settings-info-banner p {
    margin: 0;
    color: var(--ink-dim);
    font-size: var(--product-text-body);
    line-height: 1.55;
}

.settings-info-banner strong {
    color: var(--ink);
}

.settings-screen .settings-profiles {
    grid-template-columns: repeat(auto-fill, minmax(clamp(175px, 12vw + 40px, 255px), 1fr));
    gap: clamp(12px, 0.9vw + 8px, 22px);
    margin-top: 0;
}

.settings-screen .settings-profile-card {
    position: relative;
    min-height: clamp(200px, 12vw + 140px, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 0.55vw + 8px, 16px);
    padding: clamp(16px, 1vw + 12px, 28px) clamp(14px, 0.85vw + 10px, 22px) clamp(14px, 0.85vw + 10px, 22px);
    border-radius: clamp(16px, 0.9vw + 10px, 24px);
    background: rgba(255, 255, 255, .04);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.settings-screen .settings-profile-card:hover {
    transform: translateY(-2px);
    border-color: var(--stroke-strong);
    background: rgba(255, 255, 255, .06);
}

.settings-screen .settings-profile-card.is-active {
    border-color: rgba(53, 231, 255, .42);
    background: rgba(53, 231, 255, .08);
    box-shadow: 0 0 32px rgba(53, 231, 255, .1);
}

.settings-active-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 9px;
    border: 1px solid rgba(53, 231, 255, .3);
    border-radius: 999px;
    background: rgba(53, 231, 255, .15);
    color: var(--cyan);
    font-size: var(--product-text-ui-sm);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.settings-screen .settings-avatar-form {
    margin: 0;
}

.settings-screen .settings-profile-avatar {
    position: relative;
    width: clamp(60px, 4vw + 44px, 88px);
    height: clamp(60px, 4vw + 44px, 88px);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .12);
}

.settings-avatar-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    opacity: 0;
    transition: opacity .2s ease;
}

.settings-profile-avatar:hover .settings-avatar-overlay {
    opacity: 1;
}

.settings-profile-name {
    width: 100%;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    outline: 0;
    padding: 3px 4px;
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--product-text-ui);
    text-align: center;
}

.settings-profile-name:focus {
    border-bottom-color: var(--cyan);
}

.settings-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.settings-profile-stats span {
    padding: 8px 5px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    text-align: center;
}

.settings-profile-stats strong,
.settings-profile-stats small {
    display: block;
}

.settings-profile-stats strong {
    color: var(--cyan);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--product-text-mono);
}

.settings-profile-stats small {
    margin-top: 2px;
    color: var(--ink-mute);
    font-size: var(--product-text-ui-sm);
    font-weight: 700;
}

.settings-profile-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

.settings-profile-share {
    display: flex;
    gap: 8px;
    width: 100%;
}

.settings-profile-activate,
.settings-profile-current,
.settings-profile-delete,
.settings-profile-share-btn,
.settings-add-card,
.settings-btn-create,
.settings-btn-cancel {
    border: 0;
    cursor: pointer;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
}

.settings-profile-activate,
.settings-profile-current {
    flex: 1;
    min-height: clamp(32px, 2vw + 24px, 44px);
    border-radius: 10px;
    font-size: var(--product-text-ui-sm);
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    transition: transform 0.2s, box-shadow 0.2s;
}

.settings-profile-activate:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(53, 231, 255, 0.4);
}

.settings-profile-current {
    background: rgba(53, 231, 255, .12);
    color: var(--cyan);
    cursor: default;
}

.settings-profile-delete {
    width: 34px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, .22);
    background: rgba(248, 113, 113, .08);
    color: #f87171;
    font-size: 20px;
}

.settings-profile-share-btn {
    flex: 1;
    min-height: 34px;
    border: 1px solid rgba(160, 107, 255, .24);
    border-radius: 10px;
    background: rgba(160, 107, 255, .1);
    color: var(--violet);
    font-size: 17px;
}

.settings-qr-dialog {
    align-items: center;
    text-align: center;
}

.settings-qr-subtitle {
    margin: -6px 0 4px;
    color: var(--ink-dim);
    line-height: 1.45;
}

.settings-qr-image {
    width: 260px;
    height: 260px;
    max-width: 100%;
    border-radius: 18px;
    background: #fff;
    padding: 10px;
}

.settings-add-card {
    min-height: clamp(200px, 12vw + 140px, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(16px, 1vw + 12px, 28px) clamp(14px, 0.85vw + 10px, 22px);
    border: 1.5px dashed rgba(160, 107, 255, .35);
    border-radius: clamp(16px, 0.9vw + 10px, 24px);
    background: rgba(160, 107, 255, .05);
    color: var(--violet);
    font-size: var(--product-text-ui);
}

.settings-add-card span {
    width: clamp(48px, 3vw + 36px, 68px);
    height: clamp(48px, 3vw + 36px, 68px);
    display: grid;
    place-items: center;
    border: 1.5px dashed rgba(160, 107, 255, .45);
    border-radius: 50%;
    background: rgba(160, 107, 255, .15);
    font-size: clamp(20px, 1.2vw + 14px, 32px);
}

.settings-add-card small {
    color: var(--ink-mute);
    font-size: var(--product-text-body);
}

.settings-screen .settings-group {
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(12, 16, 40, .62);
}

.settings-screen .settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--stroke);
    color: var(--ink);
    text-decoration: none;
    transition: background .2s;
    cursor: pointer;
}

.settings-screen .settings-row:last-child {
    border-bottom: 0;
}

.settings-screen .settings-row:hover {
    background: rgba(18, 24, 56, .78);
}

.settings-row-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px !important;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(200, 255, 90, .08);
}

.settings-screen .settings-row span {
    flex: 1;
}

.settings-screen .settings-row strong,
.settings-screen .settings-row small {
    display: block;
}

.settings-screen .settings-row strong {
    color: var(--ink);
    font-size: var(--product-text-ui);
    font-weight: 600;
}

.settings-screen .settings-row small {
    margin-top: 2px;
    color: var(--ink-mute);
    font-size: var(--product-text-ui-sm);
    font-weight: 500;
}

.settings-screen .settings-row em {
    font-style: normal;
    font-weight: 900;
}

.settings-screen .settings-row em.is-plus {
    color: var(--lime);
}

.settings-screen .settings-row em.is-minus {
    color: #ff7a90;
}

.settings-purchases-list {
    margin-top: 18px;
}

.settings-subsection-title {
    margin: clamp(22px, 1.6vw + 12px, 36px) 0 6px;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--product-text-ui);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ink-dim);
    text-transform: uppercase;
}

.settings-muted--after-subhead {
    margin-top: 0;
    margin-bottom: 12px;
}

.settings-section-head--with-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(14px, 1.2vw + 8px, 24px);
    flex-wrap: wrap;
}

.settings-section-head--with-action > div:first-child {
    flex: 1 1 min(100%, 360px);
    min-width: 0;
}

.settings-section-head--with-action h1 {
    line-height: 1.15;
}

.settings-topup-button {
    flex: 0 0 auto;
    font-size: calc(var(--product-text-ui-sm) * 1.3);
    padding: 12px 22px;
    min-height: 44px;
}

.settings-wallet-tx-list {
    margin-top: 0;
}

.settings-row.settings-row--static {
    cursor: default;
}

.settings-wallet-tx .settings-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-wallet-tx em {
    flex-shrink: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--product-text-mono);
}

.settings-purchase-row {
    min-height: 60px;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}

.settings-purchase-row .settings-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-purchase-row .settings-row-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-purchase-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(200, 255, 90, .1);
    color: var(--lime);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.settings-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    border: 0;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .25s;
}

.settings-toggle i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    transition: left .25s;
}

.settings-toggle.is-on {
    background: var(--cyan);
}

.settings-toggle.is-on i {
    left: 19px;
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(8px);
}

.settings-modal__dialog {
    position: relative;
    width: min(420px, 100%);
    padding: 34px 38px;
    border: 1px solid rgba(160, 107, 255, .3);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(12, 16, 42, .97), rgba(8, 11, 28, .99));
    box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(160, 107, 255, .14);
}

.settings-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: var(--ink-mute);
    cursor: pointer;
    font-size: 20px;
}

.settings-modal h2 {
    margin: 0 0 22px;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
}

.settings-modal-avatar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.settings-modal-avatar label {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), #6b3fd4);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 900;
}

.settings-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-modal-avatar em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    font-style: normal;
    transition: opacity .2s ease;
}

.settings-modal-avatar label:hover em {
    opacity: 1;
}

.settings-modal-avatar input {
    display: none;
}

.settings-modal-avatar p {
    margin: 0;
    color: var(--ink-mute);
    font-size: 12px;
    line-height: 1.5;
}

.settings-modal-avatar strong {
    display: block;
    color: var(--ink-dim);
    font-size: 13px;
}

.settings-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.settings-field-input {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--stroke-strong);
    border-radius: 13px;
    background: rgba(255, 255, 255, .05);
    color: var(--ink);
    outline: 0;
    font: 700 15px "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

.settings-modal__footer {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.settings-btn-cancel,
.settings-btn-create {
    min-height: 44px;
    border-radius: 12px;
}

.settings-btn-cancel {
    flex: 1;
    border: 1px solid var(--stroke-strong);
    background: rgba(255, 255, 255, .05);
    color: var(--ink-dim);
    transition: background 0.2s, border-color 0.2s;
}

.settings-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.09);
}

.settings-btn-create {
    flex: 2;
    border: 0;
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    box-shadow: 0 0 24px rgba(53, 231, 255, 0.3);
    letter-spacing: 0.02em;
    transition: transform 0.2s, box-shadow 0.2s;
}

.settings-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(53, 231, 255, 0.45);
}

.mission-player__image {
    width: min(260px, 70vw);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
    margin: 0 auto 18px;
    display: block;
}

.mission-player__word,
.mission-player__subword,
.mission-player__sentence {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mission-player__sentence {
    display: block;
    width: 100%;
    margin-top: 10px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
}

.mission-player__sentence.is-ru {
    color: var(--ink-dim);
    font-size: 17px;
}

.mission-player__word.is-blurred {
    filter: blur(4px);
    opacity: .72;
}

@media (max-width: 860px) {
    .settings-screen {
        grid-template-columns: 1fr;
    }

    .settings-screen .settings-sidebar {
        position: static;
        min-height: 0;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-hero,
    .settings-section-head {
        display: grid;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    color: var(--ink);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(1200px 800px at 78% -10%, rgba(160, 107, 255, 0.18), transparent 60%),
        radial-gradient(1200px 900px at 10% 110%, rgba(53, 231, 255, 0.12), transparent 60%),
        radial-gradient(700px 500px at 50% 55%, rgba(22, 40, 100, 0.24), transparent 70%),
        linear-gradient(180deg, #04050b 0%, #060912 50%, #04050b 100%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.stars,
.scan,
.vignette,
.orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.stars {
    z-index: 0;
    opacity: 0.6;
    background-image:
        radial-gradient(1px 1px at 12% 22%, #fff, transparent 60%),
        radial-gradient(1px 1px at 28% 70%, #bde3ff, transparent 60%),
        radial-gradient(1px 1px at 55% 12%, #fff, transparent 60%),
        radial-gradient(1px 1px at 78% 38%, #c6baff, transparent 60%),
        radial-gradient(1px 1px at 85% 82%, #fff, transparent 60%),
        radial-gradient(1px 1px at 40% 90%, #aef5ff, transparent 60%),
        radial-gradient(1px 1px at 65% 60%, #fff, transparent 60%);
    animation: twinkle 6s ease-in-out infinite alternate;
}

.scan {
    z-index: 1;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 4px);
    mix-blend-mode: overlay;
}

.vignette {
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
}

.orbs {
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    left: var(--x, 50%);
    bottom: -20px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0.7;
    animation: floatUp var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
}

.orb.c {
    background: #8cf2ff;
    box-shadow: 0 0 10px #35e7ff;
}

.orb.v {
    background: #c9a8ff;
    box-shadow: 0 0 10px #a06bff;
}

.orb.l {
    background: #e8ff9a;
    box-shadow: 0 0 10px #c8ff5a;
}

.product-layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Типовой подвал (разметка из footer.php) на product-страницах — стили по смыслу как на главной */
.product-layout > .site-footer {
    margin-top: auto;
    flex-shrink: 0;
}

.product-layout .shell {
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
}

.product-layout .site-footer {
    position: relative;
    z-index: 2;
    padding: clamp(12px, 1vw + 8px, 28px) 0 clamp(28px, 2vw + 16px, 52px);
}

.product-layout .footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.25fr) minmax(130px, 0.7fr) minmax(220px, 1fr) minmax(240px, 1fr);
    align-items: start;
    gap: 26px 34px;
    padding: 24px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(4, 7, 15, 0.45);
    border-radius: 20px;
}

.product-layout .footer-column {
    min-width: 0;
}

.product-layout .footer-column-title {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.72);
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-layout .footer-brand {
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.product-layout .footer-copy {
    color: var(--ink-dim);
    margin: 8px 0 0;
}

.product-layout .footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
    justify-content: flex-start;
}

.product-layout .footer-links a {
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.35;
}

.product-layout .footer-links a:hover {
    color: #fff;
}

.product-layout .footer-legal {
    max-width: min(100% - 28px, 1320px);
    margin: 20px auto 0;
    padding: 0 28px 28px;
}

.product-layout .footer-legal-line {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.01em;
}

.product-layout .footer-legal-line:last-child {
    margin-bottom: 0;
}

.product-layout .footer-legal-muted {
    color: rgba(255, 255, 255, 0.34);
}

.product-layout .footer-legal-link {
    color: rgba(255, 255, 255, 0.52);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-layout .footer-legal-link:hover {
    color: rgba(255, 255, 255, 0.78);
}

.product-layout .footer-acquiring-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.product-layout .footer-acquiring-tpay {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0.94;
    background: rgba(255, 255, 255, 0.94);
    padding: 5px 12px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.product-layout .footer-acquiring-tpay:hover {
    opacity: 1;
}

.product-layout .footer-acquiring-tpay img {
    display: block;
    height: 28px;
    width: auto;
}

.product-layout .footer-acquiring-badge {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0.92;
}

.product-layout .footer-acquiring-badge:hover {
    opacity: 1;
}

.product-layout .footer-acquiring-note {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.38);
    max-width: 520px;
}

.product-layout .footer-acquiring-link {
    display: inline-flex;
    margin-top: 10px;
    font-size: 12px;
}

.product-layout .footer-acquiring-support {
    margin: 14px 0 0;
    font-size: 10px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.36);
}

.product-layout .footer-help-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #67e8f9;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

.product-layout .footer-help-link:hover {
    color: #8cf2ff;
}

.product-layout .footer-help-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}

@media (max-width: 900px) {
    .product-layout .footer-grid {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .product-layout .footer-links {
        justify-content: flex-start;
    }
}

.product-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 1vw + 8px, 24px);
    padding: var(--product-header-pad-y) var(--product-inline);
    border-bottom: 1px solid var(--stroke);
    background: rgba(5, 6, 14, 0.8);
    backdrop-filter: blur(16px);
}

.product-header__left,
.product-header__right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-header__left {
    flex-wrap: nowrap;
    min-width: 0;
    row-gap: 8px;
    align-items: center;
}

.product-header-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    line-height: 0;
    border-radius: 12px;
}

.product-header-brand:hover {
    opacity: 0.92;
}

.product-header-brand:focus-visible {
    outline: 2px solid rgba(53, 231, 255, 0.55);
    outline-offset: 3px;
}

.product-header-brand__logo {
    display: block;
    height: clamp(30px, 1.35vw + 22px, 38px);
    width: auto;
    max-width: min(200px, 42vw);
}

.product-header__right {
    justify-content: flex-end;
}

.product-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.product-burger:hover {
    background: rgba(255, 255, 255, 0.06);
}

.product-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-dim);
}

.product-wallet,
.product-avatar,
.product-notify {
    border: 1px solid var(--stroke-strong);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.product-wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    color: var(--lime);
}

.product-wallet--split {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.product-wallet--split .product-wallet-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 6px 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    cursor: pointer;
}

.product-wallet--split .product-wallet-main:hover {
    background: rgba(53, 231, 255, .07);
}

.product-wallet-sep {
    align-self: stretch;
    width: 1px;
    margin: 8px 0;
    flex-shrink: 0;
    background: rgba(200, 255, 90, .28);
}

.product-wallet-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--lime);
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px rgba(200, 255, 90, .45);
}

.product-wallet-plus:hover {
    background: rgba(53, 231, 255, .1);
}

.product-wallet-plus:focus-visible {
    outline: 2px solid rgba(53, 231, 255, 0.55);
    outline-offset: -2px;
}

.product-wallet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 7px rgba(200, 255, 90, .25));
}

.product-wallet strong,
.product-wallet--split .product-wallet-main strong {
    white-space: nowrap;
    color: var(--lime);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
    text-shadow: 0 0 12px rgba(200, 255, 90, .35);
}

.product-wallet i {
    width: 1px;
    height: 22px;
    background: rgba(200, 255, 90, .28);
}

.product-wallet b {
    color: var(--lime);
    font-family: "Sora", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 12px rgba(200, 255, 90, .45);
}

a.product-wallet {
    cursor: pointer;
    text-decoration: none;
}

a.product-wallet:hover {
    border-color: rgba(53, 231, 255, .32);
    background: rgba(53, 231, 255, .07);
}

.btn-pay {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    color: #1a1300;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--product-text-ui-sm);
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(135deg, #FFD000, #FF9A00);
    background-size: 240% 240%;
    box-shadow: 0 6px 28px rgba(255,180,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
    animation: btnPayFlow 4.8s ease infinite;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-pay::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -45%;
    width: 42%;
    transform: rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
    animation: btnPayGlare 3.2s ease-in-out infinite;
    pointer-events: none;
}

.btn-pay:hover {
    transform: translateY(-2px);
    filter: saturate(1.12);
    box-shadow: 0 10px 36px rgba(255,180,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

.product-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: rgba(10, 16, 36, 0.55);
}

.product-nav a {
    padding: clamp(7px, 0.45vw + 5px, 12px) clamp(11px, 0.65vw + 8px, 18px);
    border-radius: 999px;
    color: var(--ink-dim);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--product-text-nav);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: 0.2s ease;
}

.product-nav a:hover,
.product-nav a.is-active {
    color: #07111d;
    background: linear-gradient(90deg, var(--cyan-2), var(--cyan));
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.38);
}

.product-notify {
    position: relative;
    width: clamp(38px, 2.2vw + 28px, 50px);
    height: clamp(38px, 2.2vw + 28px, 50px);
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink);
    font-size: clamp(16px, 0.9vw + 12px, 22px);
}

.product-notify span {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.product-avatar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
}

.product-avatar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 1.8vw + 22px, 42px);
    height: clamp(30px, 1.8vw + 22px, 42px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    font-size: var(--product-text-ui-sm);
    font-weight: 700;
}

.product-avatar__text strong,
.product-avatar__text small {
    display: block;
}

.product-avatar__text strong {
    font-size: var(--product-text-ui);
}

.product-avatar__text small {
    color: var(--ink-mute);
    font-size: var(--product-text-ui-sm);
}

.product-avatar__rating {
    color: rgba(255, 215, 118, .92) !important;
    text-shadow: 0 0 10px rgba(255, 204, 105, .2);
}

.product-profile-menu {
    position: relative;
}

.product-avatar--button {
    color: var(--ink);
    cursor: pointer;
    font: inherit;
}

.product-avatar__chevron {
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1;
}

.product-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 292px;
    padding: 12px;
    border: 1px solid var(--stroke-strong);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(12, 16, 42, .98), rgba(8, 11, 28, .98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .48), 0 0 40px rgba(160, 107, 255, .12);
}

.product-profile-dropdown[hidden],
.settings-modal[hidden],
.modal-overlay[hidden] {
    display: none !important;
}

/* ─── Support (aligned with lexiorbit_base/project/LexiOrbit Settings.html + support-tickets.jsx) ─── */
/* Must NOT set display on [data-support-root] alone — it sits on .settings-panel and would override
   .settings-panel { display: none } (attribute selector beats single class → «Помощь» visible on every tab). */
.product-page--settings .settings-panel[data-support-root].is-active {
    gap: 28px;
}

[data-support-list-view]:not([hidden]),
[data-support-chat-view]:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

[data-support-list-view][hidden],
[data-support-chat-view][hidden] {
    display: none !important;
}

.settings-panel .section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.section-title {
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
}

.section-sub {
    font-size: 13px;
    color: var(--ink-mute);
    font-weight: 500;
}

.support-intro {
    font-size: 13px;
    color: var(--ink-mute);
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.55;
}

.support-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-create-ticket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.2s;
    box-shadow: 0 0 24px rgba(53, 231, 255, 0.28);
}

.btn-create-ticket:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(53, 231, 255, 0.45);
}

.btn-create-ticket__plus {
    font-size: 16px;
    line-height: 1;
    opacity: 0.92;
}

.btn-create-ticket__label {
    display: inline-block;
}

.support-filter {
    display: flex;
    gap: 4px;
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: 4px;
}

.support-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--ink-mute);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
}

.support-filter-btn:hover {
    color: var(--ink-dim);
}

.support-filter-btn.on {
    background: rgba(53, 231, 255, 0.1);
    color: var(--cyan);
}

.support-filter-n {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    opacity: 0.7;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.support-filter-btn.on .support-filter-n {
    background: rgba(53, 231, 255, 0.15);
    opacity: 1;
}

.support-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.support-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 14px;
}

.support-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.support-stat-val {
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.support-stat-lbl {
    font-size: 11px;
    color: var(--ink-mute);
    font-weight: 600;
    margin-top: 1px;
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.ticket-card {
    text-align: left;
    cursor: pointer;
    padding: 18px;
    background: var(--glass);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s;
    font-family: inherit;
    color: inherit;
}

.ticket-card:hover {
    background: var(--glass-hover);
    border-color: var(--stroke-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.tc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tc-id {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
}

.tc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 20px;
    border: 1px solid;
}

.tc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.tc-subject {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    text-wrap: pretty;
}

.tc-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-dim);
}

.tc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--stroke);
    margin-top: 2px;
}

.tc-foot-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
}

.tc-msg-count {
    color: var(--ink-dim);
}

.tc-unread {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--violet);
    color: #fff;
    box-shadow: 0 0 10px rgba(160, 107, 255, 0.5);
    letter-spacing: 0.03em;
}

.support-empty {
    padding: 50px 20px;
    text-align: center;
    background: var(--glass);
    border: 1px dashed var(--stroke-strong);
    border-radius: 16px;
}

.support-empty__icon {
    font-size: 38px;
    margin-bottom: 10px;
}

.support-empty__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.support-empty__sub {
    font-size: 13px;
    color: var(--ink-mute);
}

/* Modal overlay + create ticket — не задавать display:flex всем .modal-overlay:
   на маркетинговой главной подключается этот файл и ломает скрытие #videoOverlay / auth (main.css: none до .open). */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    animation: lo-support-fadeIn 0.2s ease;
}

.modal-overlay.open,
.modal-overlay[data-ticket-modal]:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes lo-support-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes lo-support-popIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    color: var(--ink-mute);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ink);
}

.ticket-modal {
    background: linear-gradient(145deg, rgba(12, 16, 42, 0.97), rgba(8, 11, 28, 0.99));
    border: 1px solid rgba(53, 231, 255, 0.28);
    border-radius: 24px;
    padding: 32px 36px 28px;
    width: 540px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 80px rgba(53, 231, 255, 0.12), 0 32px 64px rgba(0, 0, 0, 0.6);
    animation: lo-support-popIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.topup-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topup-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.topup-title {
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.topup-sub {
    font-size: 13px;
    color: var(--ink-mute);
    font-weight: 500;
    margin-bottom: 22px;
}

.quick-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
    display: block;
}

.field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 8px;
    display: block;
}

.field-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--stroke-strong);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--ink);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}

.field-input:focus {
    border-color: var(--violet);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.cat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke-strong);
    border-radius: 12px;
    color: var(--ink-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    text-align: left;
}

.cat-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink);
}

.cat-chip.selected {
    background: rgba(53, 231, 255, 0.1);
    border-color: rgba(53, 231, 255, 0.45);
    color: var(--cyan);
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.15);
}

.cat-chip[data-color="lime"].selected {
    background: rgba(200, 255, 90, 0.1);
    border-color: rgba(200, 255, 90, 0.45);
    color: var(--lime);
    box-shadow: 0 0 18px rgba(200, 255, 90, 0.15);
}

.cat-chip[data-color="violet"].selected {
    background: rgba(160, 107, 255, 0.1);
    border-color: rgba(160, 107, 255, 0.45);
    color: var(--violet);
    box-shadow: 0 0 18px rgba(160, 107, 255, 0.15);
}

.cat-chip[data-color="pink"].selected {
    background: rgba(255, 107, 157, 0.1);
    border-color: rgba(255, 107, 157, 0.45);
    color: #ff6b9d;
    box-shadow: 0 0 18px rgba(255, 107, 157, 0.15);
}

.cat-icon {
    font-size: 16px;
}

.ticket-textarea {
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
    font-size: 14px;
}

.attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attach-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--stroke-strong);
    flex-shrink: 0;
}

.attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attach-thumb.mini {
    width: 52px;
    height: 52px;
}

.attach-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attach-add {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1.5px dashed var(--stroke-strong);
    background: rgba(255, 255, 255, 0.02);
    color: var(--ink-mute);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: all 0.2s;
}

.attach-add:hover {
    border-color: rgba(53, 231, 255, 0.4);
    color: var(--cyan);
    background: rgba(53, 231, 255, 0.05);
}

.ticket-modal .modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.btn-cancel {
    flex: 1;
    padding: 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--stroke-strong);
    color: var(--ink-dim);
    font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.09);
}

.btn-create-submit {
    flex: 2;
    padding: 13px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 24px rgba(53, 231, 255, 0.3);
    letter-spacing: 0.02em;
}

.btn-create-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(53, 231, 255, 0.45);
}

.btn-create-submit:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

/* Ticket chat */
.ticket-chat-shell {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 900px);
    min-height: 0;
    margin: calc(var(--product-main-pad-y-top, 20px) * -0.5) calc(var(--product-inline, 24px) * -0.35) 0;
    background: rgba(5, 6, 14, 0.4);
    border: 1px solid var(--stroke);
    border-radius: 20px;
    overflow: hidden;
}

.ticket-chat-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding: 16px 28px;
    border-bottom: 1px solid var(--stroke);
    background: rgba(5, 6, 14, 0.6);
    backdrop-filter: blur(10px);
    flex-wrap: wrap;
}

.ticket-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid var(--stroke-strong);
    color: var(--ink-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ticket-back:hover {
    background: var(--glass-hover);
    color: var(--ink);
}

.ticket-chat-info {
    flex: 1;
    min-width: 0;
}

.ticket-chat-title {
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-chat-meta {
    font-size: 12px;
    color: var(--ink-dim);
    font-weight: 500;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ticket-chat-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid;
    flex-shrink: 0;
}

.ticket-close-btn {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: rgba(248, 113, 113, 0.85);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ticket-close-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

.ticket-chat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    max-height: min(52vh, 560px);
}

.chat-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 0;
}

.chat-date-divider::before,
.chat-date-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--stroke);
    max-width: 80px;
}

.chat-date-divider span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 0 4px;
}

.chat-system {
    text-align: center;
    font-size: 12px;
    color: var(--ink-mute);
    font-weight: 500;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    align-self: center;
    max-width: 80%;
}

.chat-row {
    display: flex;
    gap: 10px;
    max-width: min(80%, 720px);
}

.chat-row.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: min(92%, 720px);
}

.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(53, 231, 255, 0.25);
}

.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    max-width: 100%;
    align-items: flex-start;
}

.chat-row.mine .chat-bubble-wrap {
    align-items: flex-end;
}

.chat-author {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cyan);
    padding-left: 4px;
}

.chat-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
}

.chat-bubble.theirs {
    background: rgba(53, 231, 255, 0.08);
    border: 1px solid rgba(53, 231, 255, 0.2);
    color: var(--ink);
    border-top-left-radius: 4px;
}

.chat-bubble.mine {
    background: rgba(160, 107, 255, 0.12);
    border: 1px solid rgba(160, 107, 255, 0.28);
    color: var(--ink);
    border-top-right-radius: 4px;
}

.chat-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-time {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
    padding: 3px 4px 0;
    line-height: 1.35;
    flex-shrink: 0;
    align-self: stretch;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.chat-row.mine .chat-time {
    text-align: right;
}

.chat-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chat-file {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
    max-width: 140px;
    font-family: inherit;
    text-decoration: none;
    color: inherit;
    background: rgba(53, 231, 255, 0.06);
    border-color: rgba(53, 231, 255, 0.35);
}

.chat-file.chat-file--image {
    max-width: min(260px, 100%);
    min-width: 140px;
    cursor: zoom-in;
}

.chat-file:hover {
    transform: translateY(-1px);
}

.chat-file img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.chat-file.chat-file--image img {
    height: auto;
    min-height: 120px;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.45));
}

.chat-file:not(.chat-file--image) img {
    height: 80px;
    object-fit: cover;
}

.chat-file > span {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.chat-file-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-input-shell {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--stroke);
    background: rgba(5, 6, 14, 0.7);
    backdrop-filter: blur(10px);
}

.ticket-input-attach {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ticket-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--stroke-strong);
    border-radius: 14px;
    padding: 8px;
    transition: border-color 0.2s;
}

.ticket-input-row:focus-within {
    border-color: rgba(53, 231, 255, 0.45);
}

.ticket-attach-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: transparent;
    border: none;
    color: var(--ink-mute);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ticket-attach-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cyan);
}

.ticket-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    padding: 8px 4px;
    max-height: 120px;
    min-height: 22px;
}

.ticket-input::placeholder {
    color: var(--ink-mute);
}

.ticket-send-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--cyan), #0099cc);
    color: #04050b;
    font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.ticket-send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(53, 231, 255, 0.4);
}

.ticket-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-mute);
}

.ticket-closed-banner:not([hidden]) {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-mute);
    font-weight: 500;
}

.ticket-closed-banner[hidden] {
    display: none !important;
}

/* Chat image lightbox (support ticket attachments) */
.support-chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(16px, 4vw, 48px);
    animation: lo-support-fadeIn 0.2s ease;
}

.support-chat-lightbox__close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-mute);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 2;
}

.support-chat-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ink);
}

.support-chat-lightbox__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 92vw;
    max-height: 90vh;
}

.support-chat-lightbox__frame {
    position: relative;
    max-width: 90vw;
    max-height: 78vh;
}

.support-chat-lightbox__frame img {
    display: block;
    max-width: 90vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.support-chat-lightbox__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--glass);
    border: 1px solid var(--stroke-strong);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-dim);
    font-weight: 600;
    max-width: 90vw;
}

.support-chat-lightbox__meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.support-chat-lightbox__dl {
    flex-shrink: 0;
    color: var(--cyan);
    text-decoration: none;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(53, 231, 255, 0.1);
    border: 1px solid rgba(53, 231, 255, 0.3);
    transition: all 0.2s;
}

.support-chat-lightbox__dl:hover {
    background: rgba(53, 231, 255, 0.18);
}

@media (max-width: 720px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }

    .support-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .ticket-chat-head {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .ticket-chat-body {
        padding: 16px;
    }

    .ticket-input-shell {
        padding: 12px 16px;
    }

    .chat-row {
        max-width: 92%;
    }

    .ticket-chat-shell {
        margin-left: 0;
        margin-right: 0;
    }
}

.product-profile-dropdown__title {
    padding: 4px 6px 10px;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-profile-option {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.product-profile-option:hover,
.product-profile-option.is-active {
    border-color: rgba(53, 231, 255, .24);
    background: rgba(53, 231, 255, .08);
}

.product-profile-option__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--violet), var(--cyan));
    color: #fff;
    font-size: 12px;
    font-weight: 900;
}

.product-profile-option__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-profile-option strong,
.product-profile-option small {
    display: block;
}

.product-profile-option small {
    margin-top: 2px;
    color: var(--ink-mute);
}

.product-profile-option em {
    color: var(--cyan);
    font-style: normal;
}

.product-profile-settings-link {
    display: block;
    margin-top: 8px;
    padding: 11px 12px;
    border-radius: 13px;
    background: rgba(160, 107, 255, .12);
    color: var(--violet);
    font-weight: 800;
    text-align: center;
}

.product-main {
    width: 100%;
    max-width: min(1380px, 100%);
    margin: 0 auto;
    padding: var(--product-main-pad-y-top) var(--product-inline) var(--product-main-pad-y-bottom);
    box-sizing: border-box;
}

.product-layout .product-main {
    flex: 1 0 auto;
}

.product-card,
.product-hero,
.mission-card,
.track-item,
.filter-item {
    border: 1px solid var(--stroke);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.product-card {
    padding: 22px;
    border-radius: 22px;
}

.product-card--metric {
    background: linear-gradient(160deg, rgba(12, 16, 40, 0.9), rgba(8, 11, 28, 0.9));
}

.product-card--flat {
    padding: 18px 22px;
}

.product-card__eyebrow {
    margin-bottom: 14px;
    color: var(--ink-mute);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 20px;
}

.product-page--lobby .product-main {
    width: 100%;
    max-width: min(1440px, 100%);
    margin: 0 auto;
    padding: 0;
}

.lobby-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    /* Высота по контенту колонок — без принудительного «на весь экран», иначе центр пустует */
    min-height: 0;
}

.lobby-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    overflow-y: auto;
}

.lobby-side--left {
    border-right: 1px solid var(--stroke);
}

.lobby-side--right {
    border-left: 1px solid var(--stroke);
}

.lobby-panel-title {
    margin: 0 0 4px;
    color: var(--ink-mute);
    font-family: "Sora", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lobby-progress-card,
.lobby-rank-card,
.lobby-lb-item,
.lobby-streak-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(12, 16, 40, 0.62);
    box-shadow: var(--shadow);
    transition: all 0.24s ease;
}

.lobby-progress-card:hover,
.lobby-lb-item:hover {
    border-color: var(--stroke-strong);
    background: rgba(18, 24, 56, 0.78);
}

.lobby-progress-card {
    padding: 14px 16px 12px;
}

.lobby-progress-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lobby-progress-card__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lobby-progress-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 17px;
}

.lobby-progress-card__icon.is-cyan {
    background: rgba(53, 231, 255, 0.12);
}

.lobby-progress-card__icon.is-violet {
    background: rgba(160, 107, 255, 0.12);
}

.lobby-progress-card__icon.is-lime {
    background: rgba(200, 255, 90, 0.1);
}

.lobby-progress-card__label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.lobby-progress-card__sub {
    margin-top: 1px;
    color: var(--ink-mute);
    font-size: 11px;
}

.lobby-progress-card__count {
    font-family: "JetBrains Mono", monospace;
    font-size: 22px;
    font-weight: 700;
}

.lobby-progress-card__count.is-cyan {
    color: var(--cyan);
    text-shadow: 0 0 14px rgba(53, 231, 255, 0.5);
}

.lobby-progress-card__count.is-violet {
    color: var(--violet);
    text-shadow: 0 0 14px rgba(160, 107, 255, 0.5);
}

.lobby-progress-card__count.is-lime {
    color: var(--lime);
    text-shadow: 0 0 14px rgba(200, 255, 90, 0.45);
}

.lobby-progress-card__bar {
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
}

.lobby-progress-card__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.lobby-progress-card__bar span.is-cyan {
    background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
    box-shadow: 0 0 8px var(--cyan);
}

.lobby-progress-card__bar span.is-violet {
    background: linear-gradient(90deg, var(--violet), #c9a8ff);
    box-shadow: 0 0 8px var(--violet);
}

.lobby-progress-card__bar span.is-lime {
    background: linear-gradient(90deg, var(--lime), #e8ff9a);
    box-shadow: 0 0 8px var(--lime);
}

.lobby-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--stroke);
}

.lobby-achievements {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lobby-achievement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(10, 14, 35, 0.5);
}

.lobby-achievement-item.is-locked {
    opacity: 0.45;
    filter: grayscale(0.8);
}

.lobby-achievement-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(200, 255, 90, 0.1);
    font-size: 16px;
}

.lobby-achievement-item__text {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.lobby-achievement-item__xp {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(200, 255, 90, 0.1);
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.lobby-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 24px;
    overflow: hidden;
}

.lobby-ground-glow {
    position: absolute;
    bottom: 90px;
    left: 50%;
    width: 320px;
    height: 60px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(53, 231, 255, 0.22), transparent 70%);
}

.lobby-glyph-wrap {
    position: relative;
    margin-bottom: -10px;
    animation: lobbyGlyphFloat 4s ease-in-out infinite;
}

.lobby-glyph-wrap img {
    display: block;
    width: 230px;
    height: auto;
   }

.lobby-glyph-ring {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 130px;
    height: 24px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(53, 231, 255, 0.35), transparent 70%);
}

.lobby-level-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 5px 16px;
    border: 1px solid rgba(160, 107, 255, 0.3);
    border-radius: 20px;
    background: rgba(160, 107, 255, 0.12);
    color: var(--violet);
    font-family: "Sora", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lobby-level-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 8px var(--violet);
}

.lobby-xp-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 300px;
    margin-top: 12px;
}

.lobby-xp-label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--ink-mute);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
}

.lobby-xp-label span:last-child {
    color: var(--ink-dim);
}

.lobby-xp-track {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.lobby-xp-fill {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    box-shadow: 0 0 10px rgba(160, 107, 255, 0.6);
}

.lobby-xp-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: lobbyShimmer 2s linear infinite;
}

.lobby-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 22px;
    padding: 16px 40px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    /* как активная вкладка «МИССИИ» в шапке */
    background: linear-gradient(90deg, var(--cyan-2), var(--cyan));
    color: #07111d;
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.38);
    font-family: "Sora", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.lobby-cta-button:hover {
    filter: brightness(1.04);
}

.lobby-cta-button:active {
    filter: brightness(0.97);
}

.lobby-cta-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
}

.lobby-cta-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    color: var(--ink-mute);
    font-size: 12px;
}

.lobby-cta-sub__dot {
    color: var(--cyan);
    font-size: 8px;
}

.lobby-cta-sub__sep {
    color: var(--stroke-strong);
}

.lobby-rank-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-color: rgba(160, 107, 255, 0.25);
    background: rgba(160, 107, 255, 0.08);
}

.lobby-rank-card__label {
    color: var(--ink-mute);
    font-size: 12px;
}

.lobby-rank-card__num {
    line-height: 1;
    color: var(--violet);
    font-family: "Sora", sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-shadow: 0 0 18px rgba(160, 107, 255, 0.6);
}

.lobby-rank-card__num span {
    margin-right: 2px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0.75;
}

.lobby-rank-card__month {
    text-align: right;
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 600;
}

.lobby-sect-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-mute);
    font-family: "Sora", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lobby-sect-sep::before,
.lobby-sect-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--stroke);
}

.lobby-leaderboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lobby-lb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.lobby-lb-item.is-me {
    border-color: rgba(53, 231, 255, 0.25);
    background: rgba(53, 231, 255, 0.06);
}

.lobby-lb-item__rank {
    width: 28px;
    flex-shrink: 0;
    color: var(--ink-mute);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.lobby-lb-item__rank.is-gold {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.lobby-lb-item__rank.is-silver {
    color: #c0c8e0;
    text-shadow: 0 0 6px rgba(192, 200, 224, 0.5);
}

.lobby-lb-item__rank.is-bronze {
    color: #e8a87c;
    text-shadow: 0 0 6px rgba(232, 168, 124, 0.5);
}

.lobby-lb-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.lobby-lb-item__avatar.tone-gold {
    background: linear-gradient(135deg, #ffd700, #ff9a00);
}

.lobby-lb-item__avatar.tone-silver {
    background: linear-gradient(135deg, #a06bff, #6b3fd4);
}

.lobby-lb-item__avatar.tone-bronze {
    background: linear-gradient(135deg, #35e7ff, #0099cc);
}

.lobby-lb-item__avatar.tone-pink {
    background: linear-gradient(135deg, #ff6b9d, #c8375a);
}

.lobby-lb-item__avatar.tone-lime {
    background: linear-gradient(135deg, #c8ff5a, #78b800);
}

.lobby-lb-item__avatar.tone-self {
    background: linear-gradient(135deg, var(--violet), var(--cyan));
}

.lobby-lb-item__name {
    flex: 1;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.lobby-lb-item.is-me .lobby-lb-item__name {
    color: var(--cyan);
}

.lobby-lb-item__xp {
    color: var(--ink-dim);
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 600;
}

.lobby-lb-item__xp span {
    color: var(--cyan-2);
}

.lobby-rank-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(160, 107, 255, 0.25);
    border-radius: 12px;
    background: rgba(160, 107, 255, 0.1);
    color: var(--violet);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-sizing: border-box;
}

.lobby-streak-card {
    margin-top: auto;
    padding: 16px;
}

.lobby-days {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.lobby-day-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink-mute);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
}

.lobby-day-dot.is-done {
    border-color: rgba(200, 255, 90, 0.3);
    background: rgba(200, 255, 90, 0.12);
    color: var(--lime);
}

.lobby-day-dot.is-today {
    border-color: rgba(53, 231, 255, 0.4);
    background: rgba(53, 231, 255, 0.14);
    color: var(--cyan);
    box-shadow: 0 0 10px rgba(53, 231, 255, 0.2);
}

.lobby-streak-card__meta {
    margin-top: 10px;
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.dashboard-col,
.missions-sidebar,
.missions-content {
    display: grid;
    gap: 20px;
    align-content: start;
}

.metric-stack,
.achievement-list,
.leaderboard-list,
.shortcut-list,
.track-list,
.filter-list,
.mission-list {
    display: grid;
    gap: 12px;
}

.metric-row,
.leaderboard-item,
.popup-balance div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.metric-row span,
.mission-card__subtitle,
.leaderboard-item__rank,
.popup-balance span,
.product-hero p,
.current-mission p {
    color: var(--ink-dim);
}

.product-hero {
    display: grid;
    gap: 24px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(500px 320px at 80% -10%, rgba(160, 107, 255, 0.18), transparent 60%),
        radial-gradient(500px 300px at 0% 100%, rgba(53, 231, 255, 0.14), transparent 65%),
        linear-gradient(150deg, rgba(12, 16, 40, 0.94), rgba(8, 11, 28, 0.96));
}

.product-hero h1 {
    margin: 0 0 10px;
    font-family: "Sora", sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.04;
}

.hero-stats {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
}

.hero-level,
.hero-xp,
.current-mission,
.shortcut-item,
.track-item,
.filter-item {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.hero-level {
    display: grid;
    place-items: center;
    text-align: center;
}

.hero-level strong {
    font-family: "Sora", sans-serif;
    font-size: 42px;
}

.hero-xp__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.progress-line {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.35);
}

.current-mission {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.current-mission__actions,
.product-popup__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.week-grid__item {
    display: grid;
    place-items: center;
    min-height: 78px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
}

.week-grid__item.is-done {
    color: var(--lime);
    border-color: rgba(200, 255, 90, 0.28);
}

.week-grid__item.is-today {
    color: var(--cyan);
    border-color: rgba(53, 231, 255, 0.4);
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.2);
}

.achievement-item,
.shortcut-item,
.track-item,
.filter-item,
.leaderboard-item {
    transition: 0.2s ease;
}

.achievement-item,
.leaderboard-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.achievement-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 20px;
}

.achievement-item small {
    display: block;
    color: var(--ink-mute);
}

.achievement-item.is-unlocked {
    border-color: rgba(200, 255, 90, 0.2);
}

.leaderboard-rank {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.leaderboard-rank span {
    font-family: "Sora", sans-serif;
    font-size: 40px;
}

.leaderboard-item {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.leaderboard-item__user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.leaderboard-item__user span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 700;
}

.tone-gold {
    border-color: rgba(255, 204, 105, 0.25);
}

.tone-silver {
    border-color: rgba(181, 202, 255, 0.2);
}

.tone-bronze {
    border-color: rgba(255, 148, 95, 0.18);
}

.tone-self {
    border-color: rgba(53, 231, 255, 0.24);
    box-shadow: 0 0 22px rgba(53, 231, 255, 0.12);
}

.shortcut-item,
.filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shortcut-item span {
    font-size: 18px;
}

.filter-item__ico {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.filter-item__label {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-item__count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.filter-item.is-active .filter-item__count {
    color: var(--cyan);
    opacity: 0.95;
}

.missions-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 20px;
}

.missions-quick-filter {
    position: relative;
    margin-bottom: 12px;
}

.missions-quick-filter__input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 38px 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.missions-quick-filter__input::placeholder {
    color: var(--ink-mute);
}

.missions-quick-filter__input:focus {
    border-color: rgba(53, 231, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(53, 231, 255, 0.12);
}

.missions-quick-filter__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.missions-quick-filter__clear:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.12);
}

.product-page--missions .mission-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.product-page--missions .mission-card {
    cursor: pointer;
    grid-template-columns: minmax(52px, 72px) minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
}

.product-page--missions .mission-card__thumb-wrap {
    width: 100%;
    max-width: 72px;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    justify-self: start;
}

.product-page--missions .mission-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    max-width: 100%;
}

.mission-card__units {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-dim);
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.04em;
    line-height: 1.35;
    white-space: nowrap;
}

.mission-card__info-wrap {
    position: relative;
}

.mission-card__info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-dim);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mission-card__info-btn:hover,
.mission-card__info-btn:focus-visible {
    color: var(--cyan);
    border-color: rgba(53, 231, 255, 0.35);
    background: rgba(53, 231, 255, 0.1);
    outline: none;
}

.mission-card__info-ico {
    display: block;
}

.mission-card__tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 200px;
    max-width: min(300px, 72vw);
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke-strong);
    background: rgba(8, 11, 28, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.mission-card__info-wrap:hover .mission-card__tooltip,
.mission-card__info-wrap:focus-within .mission-card__tooltip,
.mission-card__info-wrap.is-open .mission-card__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 768px) {
    .product-page--missions .mission-list {
        grid-template-columns: 1fr;
    }

    .product-page--missions .mission-card {
        grid-template-columns: 1fr;
        overflow: visible;
        align-items: start;
    }

    .product-page--missions .mission-card__thumb-wrap {
        max-width: 88px;
    }

    .product-page--missions .mission-card__side {
        justify-items: stretch;
        width: 100%;
        max-width: 100%;
    }

    .product-page--missions .mission-card__side.mission-card__actions {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 10px 12px;
        box-sizing: border-box;
    }

    .product-page--missions .mission-card__meta {
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .product-page--missions .mission-card__units {
        white-space: normal;
        word-break: break-word;
    }

    .product-page--missions .mission-card__actions > .xp-tag,
    .product-page--missions .mission-card__actions > a.button,
    .product-page--missions .mission-card__actions > button.mission-card__stats {
        flex-shrink: 0;
    }

    .product-page--missions .mission-card__tooltip {
        left: 0;
        right: auto;
    }
}

.mission-route {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.mission-route__meta,
.mission-route__player {
    display: grid;
    gap: 20px;
}

.mission-intro__header {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.mission-intro__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    font-size: 36px;
}

.mission-intro h1 {
    margin: 0 0 6px;
    font-family: "Sora", sans-serif;
    font-size: 28px;
}

.mission-intro p {
    margin: 0;
    color: var(--ink-dim);
}

.mission-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.mission-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 700;
}

.memory-pillars,
.memory-hints {
    display: grid;
    gap: 12px;
}

.memory-pillars__item,
.memory-hints__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.memory-pillars__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(160, 107, 255, 0.16);
    font-size: 20px;
}

.memory-pillars__item strong,
.memory-hints__item {
    font-weight: 700;
}

.memory-pillars__item small {
    display: block;
    margin-top: 4px;
    color: var(--ink-dim);
}

.mission-player {
    min-height: 760px;
    border-radius: 34px;
    border: 1px solid var(--stroke-strong);
    background:
        radial-gradient(560px 260px at 70% -10%, rgba(160, 107, 255, 0.22), transparent 60%),
        radial-gradient(560px 260px at 20% 120%, rgba(53, 231, 255, 0.14), transparent 65%),
        linear-gradient(180deg, rgba(14, 16, 36, 0.98), rgba(8, 11, 28, 0.98));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.mission-player__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 760px;
}

.mission-player__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mission-player__back,
.mission-player__pause,
.mission-player__timer,
.mission-player__coins {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink);
}

.mission-player__timer,
.mission-player__coins {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    font-weight: 700;
}

.mission-player__coins {
    color: var(--gold);
}

.mission-player__title {
    text-align: center;
    font-weight: 800;
}

.mission-player__title small {
    display: block;
    margin-top: 4px;
    color: var(--ink-mute);
    font-size: 12px;
}

.mission-player__modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 20px 8px;
}

.mission-player__mode {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    padding: 12px 10px;
}

.mission-player__mode.is-active {
    border-color: rgba(160, 107, 255, 0.45);
    background: rgba(160, 107, 255, 0.12);
}

.mission-player__mode strong {
    display: block;
    margin-bottom: 8px;
    text-align: center;
}

.mission-player__mode-track {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.mission-player__mode-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--violet), #c4b5fd);
}

.mission-player__progress {
    padding: 8px 20px 12px;
}

.mission-player__progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ink-dim);
    font-size: 13px;
}

.mission-player__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.mission-player__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 26px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.mission-player__eyebrow {
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.mission-player__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    margin: 0 auto;
    border-radius: 32px;
    background: rgba(160, 107, 255, 0.12);
    border: 2px solid rgba(160, 107, 255, 0.16);
    font-size: 64px;
}

.mission-player__word {
    font-family: "Sora", sans-serif;
    font-size: clamp(34px, 6vw, 54px);
    line-height: 1.02;
}

.mission-player__subword {
    color: var(--ink-dim);
    font-size: 24px;
    font-weight: 700;
}

.mission-player__forms,
.mission-player__combo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(160, 107, 255, 0.12);
    color: #cbb7ff;
    font-size: 13px;
    font-weight: 700;
}

.mission-player__helper {
    color: var(--ink-dim);
    font-size: 14px;
}

.mission-player__choices,
.mission-player__summary-grid {
    display: grid;
    gap: 12px;
}

.mission-player__choices.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mission-player__choice {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    min-height: 62px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
}

.mission-player__choice.is-correct {
    border-color: rgba(52, 211, 153, 0.55);
    background: rgba(52, 211, 153, 0.16);
    color: #6ee7b7;
}

.mission-player__choice.is-wrong {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.14);
    color: #fda4af;
}

.mission-player__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
}

.mission-player__statsline {
    color: var(--ink-dim);
    font-size: 14px;
    font-weight: 700;
}

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

.mission-player__summary-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mission-player__summary-card strong {
    display: block;
    margin-top: 4px;
    font-size: 24px;
}

.mission-player__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 8, 20, 0.84);
    backdrop-filter: blur(8px);
}

.mission-player__pause-card {
    width: min(360px, calc(100% - 32px));
    padding: 26px;
    border-radius: 24px;
    background: rgba(12, 16, 40, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.mission-route--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--product-header-height) - var(--product-main-pad-y-top) - var(--product-main-pad-y-bottom));
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.product-page--mission .product-main {
    max-width: 100%;
}

.lo-mission-root {
    --lo-frame-height: clamp(620px, calc(100vh - var(--product-header-height) - var(--product-main-pad-y-top) - var(--product-main-pad-y-bottom)), 1120px);
    width: min(clamp(360px, 46vh, 560px), 100%);
    height: var(--lo-frame-height);
    min-height: 0;
    border-radius: 34px;
    background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(99, 60, 220, .18), transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(60, 20, 120, .24), transparent 60%),
        #0f0f1e;
    color: #f0edff;
    font-family: "Nunito", "Space Grotesk", sans-serif;
    overflow: hidden;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .45);
}

/* Аудио: корень = тот же фрейм, что у слов; внутренний .lo-audio-mission — колонка на всю ширину/высоту без второй узкой карточки */
.lo-mission-root.lo-mission-root--audio {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

.lo-mission-screen {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.lo-mission-screen.is-intro,
.lo-mission-screen.is-result {
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 24px 36px;
    text-align: center;
}

.lo-glyph {
    position: relative;
    width: clamp(88px, 11.8vh, 128px);
    height: clamp(88px, 11.8vh, 128px);
    animation: glyphFloat 3.2s ease-in-out infinite;
    filter: drop-shadow(0 14px 24px rgba(109, 40, 217, .38));
}

.lo-glyph-wrap {
    position: relative;
    width: clamp(114px, 15.4vh, 166px);
    height: clamp(114px, 15.4vh, 166px);
    display: grid;
    place-items: center;
}

.lo-orbit {
    position: absolute;
    inset: 0;
    animation: loGlyphOrbitSpin 5s linear infinite;
}

.lo-orbit.is-two {
    animation-duration: 8s;
    animation-direction: reverse;
}

.lo-orbit span {
    position: absolute;
    border-radius: 50%;
    background: #a78bfa;
}

.lo-orbit.is-one span {
    top: 4px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    opacity: .8;
}

.lo-orbit.is-two span {
    right: 10px;
    bottom: 8px;
    width: 6px;
    height: 6px;
    background: #c4b5fd;
    opacity: .5;
}

.lo-kicker,
.lo-section-title {
    color: rgba(167, 139, 250, .7);
    font-size: clamp(10px, 1.3vh, 14px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lo-intro-text h1,
.lo-mission-screen.is-result h1 {
    margin: 12px 0 8px;
    color: #e8e4ff;
    font-size: clamp(20px, 2.6vh, 28px);
    line-height: 1.55;
    font-weight: 900;
}

.lo-intro-text p,
.lo-mission-screen.is-result p {
    margin: 0;
    color: rgba(255, 255, 255, .32);
    font-size: clamp(14px, 1.78vh, 19px);
    font-weight: 600;
}

.lo-chain-preview {
    width: 100%;
    margin-top: 22px;
    padding: 18px 16px 14px;
    border: 1.5px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: rgba(255, 255, 255, .03);
}

.lo-chain-preview > div:first-child {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .22);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lo-form-chain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.lo-form-chain em {
    color: rgba(196, 181, 253, .8);
    font-style: normal;
    font-size: 18px;
    font-weight: 900;
    opacity: .25;
    transition: opacity .3s ease;
}

.lo-form-chain em.is-visible {
    opacity: 1;
}

.lo-form-pill {
    min-width: 104px;
    padding: 12px 18px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    font-family: inherit;
}

.lo-form-pill.is-hidden {
    opacity: .18;
}

.lo-form-pill.is-visible {
    opacity: 1;
    animation: formReveal .55s ease both;
}

.lo-form-chain.is-static .lo-form-pill.is-visible {
    animation: none;
}

.lo-form-chain.is-compact .lo-form-pill {
    min-width: 78px;
    padding: 9px 12px 7px;
}

.lo-form-pill strong,
.lo-form-pill small {
    display: block;
}

.lo-form-pill strong {
    font-size: 22px;
    font-weight: 900;
}

.lo-form-pill.is-active {
    box-shadow: 0 0 22px rgba(167, 139, 250, .38);
}

.lo-form-chain.is-compact .lo-form-pill strong {
    font-size: 18px;
}

.lo-form-pill small {
    margin-top: 5px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    max-width: 120px;
}

.lo-form-chain.is-compact .lo-form-pill small {
    font-size: 8px;
    max-width: 92px;
}

.lo-form-pill.is-blue,
.lo-sentence-card.is-blue {
    border: 2px solid #60a5fa;
    background: rgba(96, 165, 250, .14);
    color: #93c5fd;
}

.lo-form-pill.is-purple,
.lo-sentence-card.is-purple {
    border: 2px solid #a78bfa;
    background: rgba(167, 139, 250, .14);
    color: #c4b5fd;
}

.lo-form-pill.is-green,
.lo-sentence-card.is-green {
    border: 2px solid #34d399;
    background: rgba(52, 211, 153, .14);
    color: #6ee7b7;
}

.lo-legend,
.lo-intro-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.lo-legend span {
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    font-weight: 800;
}

.lo-intro-stats span {
    color: rgba(255, 255, 255, .38);
    font-size: clamp(12px, 1.54vh, 17px);
    font-weight: 800;
}

.lo-primary,
.lo-ghost,
.lo-ghost-link {
    border: 0;
    border-radius: 18px;
    font-family: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
}

.lo-primary {
    width: 100%;
    padding: clamp(15px, 2vh, 22px);
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: clamp(15px, 2vh, 22px);
    box-shadow: 0 6px 28px rgba(109, 40, 217, .55);
}

.lo-primary:disabled,
.lo-primary[aria-disabled="true"] {
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .36);
    box-shadow: none;
    cursor: not-allowed;
}

.lo-ghost {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid rgba(139, 92, 246, .3);
    background: rgba(139, 92, 246, .1);
    color: #a78bfa;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .lo-bottom .lo-primary {
        height: 56px;
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .lo-ghost {
        width: 56px;
        min-width: 56px;
        height: 56px;
        border-width: 1.75px;
        font-size: 22px;
    }
}

.lo-stage-pills {
    display: flex;
    gap: 8px;
    padding: 18px 16px 8px;
}

.lo-stage-pills span {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px;
    border: 1.5px solid rgba(255, 255, 255, .06);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .24);
    text-align: center;
    font-size: clamp(11px, 1.42vh, 15px);
    font-weight: 900;
}

.lo-stage-pills span.is-active {
    border-color: rgba(139, 92, 246, .62);
    background: rgba(139, 92, 246, .22);
    color: #c4b5fd;
}

.lo-stage-pills span.is-done {
    border-color: rgba(52, 211, 153, .28);
    background: rgba(52, 211, 153, .1);
    color: #6ee7b7;
}

.lo-dots {
    display: flex;
    gap: 6px;
    padding: 7px 16px 10px;
}

.lo-dots span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
}

.lo-dots span.is-done { background: #8b5cf6; }
.lo-dots span.is-current { background: #c4b5fd; }

.lo-spelling-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 22px);
    padding: 12px 16px;
    text-align: center;
}

.lo-spelling-title {
    max-width: min(100%, 560px);
    border: 0;
    background: transparent;
    color: rgba(196, 181, 253, .86);
    font: 900 clamp(22px, 4vh, 42px) "Nunito", sans-serif;
    letter-spacing: .07em;
    line-height: 1.08;
    text-transform: uppercase;
    cursor: pointer;
}

.lo-spelling-sound {
    flex: 0 0 auto;
}

.lo-spelling-cells {
    display: flex;
    justify-content: center;
    gap: clamp(5px, 1vw, 10px);
    width: 100%;
    max-width: 560px;
}

.lo-spelling-cell {
    width: clamp(30px, 8.5vw, 50px);
    height: clamp(42px, 10.5vw, 62px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: clamp(10px, 2.6vw, 16px);
    background: rgba(255, 255, 255, .055);
    color: #f0edff;
    font: 900 clamp(21px, 5.2vw, 34px) "Sora", sans-serif;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lo-spelling-cell.is-active {
    border-color: rgba(196, 181, 253, .72);
    box-shadow: 0 0 26px rgba(139, 92, 246, .28);
    transform: translateY(-1px);
}

.lo-spelling-stage.is-correct .lo-spelling-cell {
    border-color: #34d399;
    background: rgba(52, 211, 153, .15);
    color: #6ee7b7;
    animation: glow .65s ease;
}

.lo-spelling-stage.is-wrong .lo-spelling-cell {
    border-color: #f87171;
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
    animation: shake .4s ease;
}

.lo-spelling-feedback {
    min-height: 22px;
    color: rgba(255, 255, 255, .34);
    font-size: clamp(12px, 1.7vh, 16px);
    font-weight: 900;
}

.lo-spelling-stage.is-correct .lo-spelling-feedback {
    color: #6ee7b7;
}

.lo-spelling-stage.is-wrong .lo-spelling-feedback {
    color: #fca5a5;
}

.lo-spelling-letters {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.lo-spelling-letters button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    min-width: clamp(42px, 11vw, 58px);
    min-height: clamp(42px, 11vw, 58px);
    border: 1.5px solid rgba(139, 92, 246, .26);
    border-radius: 16px;
    background: rgba(139, 92, 246, .12);
    color: #f0edff;
    font: 900 clamp(17px, 4.4vw, 25px) "Sora", sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.lo-spelling-letters button:hover,
.lo-spelling-letters button:focus-visible {
    background: rgba(139, 92, 246, .22);
    outline: none;
    transform: translateY(-1px);
}

.lo-spelling-letters button:disabled {
    opacity: .28;
    cursor: not-allowed;
    transform: none;
}

.lo-spelling-letters .lo-spelling-delete {
    color: #fca5a5;
    background: rgba(248, 113, 113, .11);
    border-color: rgba(248, 113, 113, .26);
}

.lo-learn-group {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 0 16px 10px;
}

.lo-group-evolve,
.lo-group-chain-wrap,
.lo-group-sentences {
    position: absolute;
    inset: 0 16px 10px;
    transition: opacity .35s ease, transform .35s ease;
}

.lo-group-evolve.is-fade,
.lo-group-chain-wrap.is-fade,
.lo-group-sentences.is-fade {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    pointer-events: none;
}

.lo-group-evolve.is-active,
.lo-group-chain-wrap.is-active,
.lo-group-sentences.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.lo-group-evolve {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 8px 8px 16px;
}

.lo-group-sentences {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 16px 0 8px;
}

.lo-group-kicker {
    color: rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lo-group-word {
    font-size: clamp(36px, 6vh, 62px);
    font-weight: 900;
    letter-spacing: .04em;
    animation: wordEvolve .65s ease both;
}

.lo-group-chain-progress {
    width: 100%;
}

.lo-group-sentence-chain {
    flex-shrink: 0;
    margin-bottom: 4px;
}

.lo-group-word.is-blue { color: #93c5fd; }
.lo-group-word.is-purple { color: #c4b5fd; }
.lo-group-word.is-green { color: #6ee7b7; }
.lo-group-word.is-empty { color: rgba(255, 255, 255, .2); animation: none; }

.lo-group-label {
    color: #ffffff;
    font-size: clamp(26px, 4.2vh, 38px);
    font-weight: 800;
    line-height: 1.05;
    margin-top: 8px;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(255, 255, 255, .18);
    text-transform: uppercase;
}

.lo-group-label-card {
    margin: 0 auto;
    min-width: 150px;
    padding: 16px 20px;
    border-radius: 14px;
    text-align: center;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: .03em;
}

.lo-group-label-card.is-blue { background: rgba(96,165,250,.14); border: 2px solid #60a5fa; color: #93c5fd; }
.lo-group-label-card.is-purple { background: rgba(167,139,250,.14); border: 2px solid #a78bfa; color: #c4b5fd; }
.lo-group-label-card.is-green { background: rgba(52,211,153,.14); border: 2px solid #34d399; color: #6ee7b7; }

.lo-learn-group .lo-section-title {
    margin: 30px 0 20px;
    text-align: center;
    color: rgba(255, 255, 255, .22);
}

.lo-sentence-list,
.lo-options {
    display: grid;
    gap: 10px;
}

.lo-sentence-card {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.lo-sentence-card.is-hidden {
    opacity: .22;
    transform: translateY(12px);
    pointer-events: none;
}

.lo-sentence-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.lo-sentence-card span {
    display: inline-flex;
    margin: 12px 14px 6px;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 900;
}

.lo-sentence-card strong,
.lo-sentence-card small {
    display: block;
    padding: 10px 14px;
}

.lo-sentence-card strong {
    color: #f0edff;
    font-size: 18px;
}

.lo-sentence-card small {
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 15px;
    font-weight: 800;
}

.lo-sentence-card.is-big {
    width: 100%;
    max-width: clamp(300px, 39vh, 422px);
    margin-top: 25px;
    text-align: center;
    animation: sentenceIn .5s ease both;
}

.lo-sentence-card.is-big button {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: clamp(16px, 2.13vh, 23px) clamp(18px, 2.37vh, 26px);
    border-radius: inherit;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lo-sentence-card.is-big button:hover,
.lo-sentence-card.is-big button:focus-visible {
    background: rgba(167, 139, 250, .12);
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .32), 0 0 24px rgba(139, 92, 246, .18);
    outline: none;
    transform: translateY(-1px);
}

.lo-sentence-card.is-big button:hover em,
.lo-sentence-card.is-big button:focus-visible em {
    color: #c4b5fd;
}

.lo-sentence-card.is-big button + button {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.lo-sentence-card.is-big span,
.lo-sentence-card.is-big strong,
.lo-sentence-card.is-big em {
    display: block;
}

.lo-sentence-card.is-big span {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .22);
    font-size: clamp(10px, 1.3vh, 14px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lo-sentence-card.is-big strong {
    padding: 0;
    color: #f0edff;
    font-size: clamp(20px, 2.6vh, 28px);
    line-height: 1.45;
    text-align: center;
}

.lo-sentence-card.is-big .is-ru strong {
    color: rgba(167, 139, 250, .88);
    font-size: clamp(17px, 2.25vh, 24px);
}

.lo-sentence-card.is-big em {
    align-self: end;
    justify-self: end;
    margin-top: 0;
    color: rgba(139, 92, 246, .5);
    font-size: clamp(9px, 1.18vh, 13px);
    font-style: normal;
    font-weight: 800;
    letter-spacing: 1px;
}

.lo-bottom {
    display: flex;
    gap: 10px;
    padding: 8px 16px 6px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.lo-bottom.is-stack {
    width: 100%;
    flex-direction: column;
    border-top: 0;
}

.lo-word-learn,
.lo-question {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    text-align: center;
}

.lo-question--group {
    justify-content: flex-start;
    gap: 14px;
}

.lo-group-sentence-fill {
    width: 100%;
    max-width: 440px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1.5px solid rgba(255, 255, 255, .08);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

.lo-learn-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.lo-word-layer,
.lo-sentence-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 1.9vh, 20px) clamp(24px, 3.3vh, 36px);
    text-align: center;
    transition: opacity .55s ease, transform .55s ease;
}

.lo-word-layer {
    gap: clamp(14px, 1.9vh, 20px);
    opacity: 1;
    transform: scale(1) translateY(0);
}

.lo-word-layer.has-en {
    justify-content: flex-start;
    padding-top: clamp(14px, 3vh, 34px);
}

.lo-word-layer.is-out {
    opacity: 0;
    transform: scale(.58) translateY(-10.6vh);
    pointer-events: none;
}

.lo-sentence-layer {
    padding: clamp(18px, 2.37vh, 26px);
    opacity: 0;
    transform: translateY(28px);
    pointer-events: none;
    transition-delay: .25s;
}

.lo-sentence-layer.is-in {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lo-learn-anchor {
    position: absolute;
    top: clamp(18px, 6vh, 62px);
    left: clamp(18px, 4vh, 44px);
    right: clamp(18px, 4vh, 44px);
    display: grid;
    gap: 6px;
    justify-items: center;
    opacity: .82;
}

.lo-learn-anchor span {
    color: rgba(196, 181, 253, .58);
    font-size: clamp(15px, 2.2vh, 22px);
    font-weight: 900;
    letter-spacing: .08em;
}

.lo-learn-anchor strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(240, 237, 255, .74);
    font-size: clamp(24px, 3.6vh, 38px);
    font-weight: 900;
    letter-spacing: .06em;
}

.lo-learn-anchor .lo-word-sound {
    flex: 0 0 auto;
    align-self: center;
}

.lo-ru-block {
    animation: ruWordIn .55s ease both;
}

.lo-ru-block > div {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .25);
    font-size: clamp(10px, 1.3vh, 14px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.lo-en-block {
    display: grid;
    gap: 10px;
    justify-items: center;
    animation: slideInRight .5s ease both;
}

.lo-word-sound {
    width: clamp(34px, 4.5vh, 48px);
    height: clamp(34px, 4.5vh, 48px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid rgba(196, 181, 253, .28);
    border-radius: 999px;
    background: rgba(139, 92, 246, .12);
    color: #c4b5fd;
    font-size: clamp(15px, 2vh, 22px);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(139, 92, 246, .1);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lo-word-sound:hover,
.lo-word-sound:focus-visible {
    border-color: rgba(196, 181, 253, .58);
    background: rgba(139, 92, 246, .22);
    box-shadow: 0 0 28px rgba(139, 92, 246, .28);
    outline: none;
    transform: translateY(-1px);
}

.lo-en-block small {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .2);
    font-size: clamp(9px, 1.18vh, 13px);
    font-weight: 700;
    letter-spacing: 1px;
}

.lo-word-learn img {
    width: 170px;
    height: 170px;
    border-radius: 28px;
    object-fit: cover;
}

.lo-word-image,
.lo-word-emoji {
    animation: fadeIn .45s ease both;
}

.lo-word-image {
    width: clamp(150px, 20.1vh, 218px);
    height: clamp(150px, 20.1vh, 218px);
    max-width: min(500px, 100%);
    max-height: min(500px, 100%);
    border-radius: clamp(24px, 3.3vh, 36px);
    object-fit: cover;
}

.lo-word-emoji {
    font-size: clamp(65px, 8.8vh, 95px);
    line-height: 1;
}

.lo-ru-word,
.lo-en-word,
.lo-sentence-card button {
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.lo-ru-word {
    color: rgba(196, 181, 253, .75);
    font-size: clamp(23px, 3.08vh, 33px);
    font-weight: 900;
}

.lo-en-word,
.lo-review-word {
    color: #f0edff;
    font-size: clamp(40px, 5.45vh, 59px);
    font-weight: 900;
}

.lo-options {
    flex: 1;
    padding: 4px 16px;
}

.lo-options button {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    color: #e0e0ff;
    font: 800 clamp(14px, 1.9vh, 20px) "Nunito", sans-serif;
    text-align: left;
    cursor: pointer;
}

.lo-options button span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .35);
}

.lo-options button.is-correct {
    border-color: #34d399;
    background: rgba(52, 211, 153, .15);
    color: #6ee7b7;
    animation: glow .6s ease;
}

.lo-options button.is-wrong {
    border-color: #f87171;
    background: rgba(248, 113, 113, .12);
    color: #fca5a5;
    animation: shake .4s ease;
}

.lo-feedback {
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}

.lo-feedback.is-ok { color: #6ee7b7; }
.lo-feedback.is-bad { color: #fca5a5; }

.lo-quiz-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
}

.lo-timer {
    width: clamp(42px, 5.7vh, 62px);
    height: clamp(42px, 5.7vh, 62px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#34d399 var(--p), rgba(255, 255, 255, .06) 0deg);
    color: #34d399;
    font-weight: 900;
}

.lo-timer span {
    width: 75%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0f0f1e;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.lo-timer.is-warn {
    background: conic-gradient(#fbbf24 var(--p), rgba(255, 255, 255, .06) 0deg);
    color: #fbbf24;
}

.lo-timer.is-danger {
    background: conic-gradient(#f87171 var(--p), rgba(255, 255, 255, .06) 0deg);
    color: #f87171;
}

.lo-timer.is-danger span {
    animation: pulse .55s ease infinite;
}

.lo-listen {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    border: 1.5px solid rgba(139, 92, 246, .25);
    border-radius: 12px;
    background: rgba(139, 92, 246, .12);
    color: #a78bfa;
    font: 900 13px "Nunito", sans-serif;
    line-height: 1.2;
    cursor: pointer;
}

.lo-coins {
    padding: 8px 11px;
    border-radius: 12px;
    background: rgba(251, 191, 36, .1);
    color: #fbbf24;
    font-weight: 900;
}

.lo-coins small {
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(251, 191, 36, .2);
    font-size: 10px;
    animation: comboFlash .8s ease infinite;
}

.lo-combo {
    padding: 2px 0 3px;
    color: #fbbf24;
    font-size: clamp(12px, 1.54vh, 17px);
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    animation: comboFlash .9s ease infinite;
}

.lo-blur-word {
    margin: 4px 16px;
    padding: 11px 16px;
    border: 1.5px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    color: #f0edff;
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    filter: blur(12px);
    transition: filter .35s;
}

.lo-blur-word em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    animation: popIn .4s ease both;
}

.lo-quiz-status {
    min-height: clamp(16px, 2.1vh, 23px);
    padding: 0;
    color: rgba(255, 255, 255, .28);
    font-size: clamp(11px, 1.42vh, 15px);
    font-weight: 800;
    text-align: center;
}

.lo-coin-burst {
    position: absolute;
    top: 38%;
    left: 50%;
    z-index: 20;
    pointer-events: none;
}

.lo-coin-burst span,
.lo-coin-burst strong {
    position: absolute;
    left: var(--x, 0);
    top: 0;
    animation: coinFloat .95s ease-out var(--d, 0ms) both;
}

.lo-coin-burst strong {
    left: -18px;
    top: -54px;
    color: #fbbf24;
    font-size: clamp(18px, 2.37vh, 26px);
    white-space: nowrap;
    animation-duration: 1s;
}

.lo-blur-word.is-open {
    filter: none;
}

.lo-blur-word small {
    display: block;
    margin-top: 4px;
    color: rgba(167, 139, 250, .8);
    font-size: 15px;
}

.lo-result-icon {
    font-size: 54px;
}

.lo-result-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.lo-result-grid span {
    padding: 14px 12px;
    border: 1.5px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.lo-result-grid strong,
.lo-result-grid small {
    display: block;
}

.lo-result-grid strong {
    color: #f0edff;
    font-size: 20px;
}

.lo-result-grid small,
.lo-ghost-link {
    color: rgba(255, 255, 255, .45);
}

.mission-card {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 20px 22px;
    border-radius: 22px;
    overflow: hidden;
}

.mission-card__stripe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.mission-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 26px;
}

.cyan-bg {
    background: rgba(53, 231, 255, 0.1);
}

.violet-bg {
    background: rgba(160, 107, 255, 0.12);
}

.lime-bg {
    background: rgba(200, 255, 90, 0.1);
}

.red-bg {
    background: rgba(255, 90, 126, 0.12);
}

.mission-card__title {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 700;
}

.mission-card__subtitle {
    margin: 2px 0 12px;
    padding: 2px 0 4px;
    line-height: 1.35;
}

article.mission-card[hidden] {
    display: none !important;
}

.mission-card__side {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.xp-tag,
.price-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
}

.xp-tag {
    color: var(--cyan);
    background: rgba(53, 231, 255, 0.1);
}

.price-tag {
    color: var(--red);
    background: rgba(255, 90, 126, 0.1);
}

/* Paid mission: single price tap opens buy popup — green, larger */
.button--mission-price {
    min-height: auto;
    padding: 8px 18px;
    font-family: "JetBrains Mono", monospace;
    font-size: calc(18px * 0.7);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lime, #c8ff5a) !important;
    background: rgba(120, 220, 120, 0.14) !important;
    border: 1px solid rgba(120, 220, 140, 0.45) !important;
    box-shadow: 0 0 22px rgba(100, 220, 130, 0.18);
}

.button--mission-price:hover {
    color: #e4ffc4 !important;
    border-color: rgba(160, 255, 170, 0.65) !important;
    box-shadow: 0 0 28px rgba(120, 255, 160, 0.28);
}

.button--mission-price--locked {
    opacity: 0.92;
    border-color: rgba(255, 190, 120, 0.45) !important;
    box-shadow: 0 0 18px rgba(255, 180, 100, 0.12);
}

.mission-card__btn--with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mission-card__btn--with-icon .mission-card__ico {
    flex-shrink: 0;
    opacity: 0.92;
}

.mission-card__btn--icon-only {
    min-width: 44px;
    width: 44px;
    padding: 0;
    justify-content: center;
}

.mission-card__btn--icon-only .mission-card__ico {
    margin: 0;
    opacity: 0.95;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.mission-card.is-in_progress .mission-card__stripe {
    background: linear-gradient(180deg, var(--cyan), transparent);
}

.mission-card.is-completed .mission-card__stripe {
    background: linear-gradient(180deg, var(--lime), transparent);
}

.mission-card.is-available .mission-card__stripe {
    background: linear-gradient(180deg, var(--violet), transparent);
}

.mission-card.is-paid .mission-card__stripe {
    background: linear-gradient(180deg, rgba(120, 220, 140, 0.95), transparent);
}

.mission-card.is-paid_locked .mission-card__stripe {
    background: linear-gradient(180deg, rgba(255, 170, 90, 0.9), transparent);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: 0.2s ease;
    text-decoration: none;
}

.button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.button--primary {
    background: linear-gradient(135deg, var(--violet), rgba(160, 107, 255, 0.7));
    color: #fff;
    box-shadow: 0 0 20px rgba(160, 107, 255, 0.28);
}

.button--secondary {
    color: var(--cyan);
    background: rgba(53, 231, 255, 0.1);
    border: 1px solid rgba(53, 231, 255, 0.25);
}

.button--ghost {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--stroke);
}

.button--danger {
    color: var(--red);
    background: rgba(255, 90, 126, 0.12);
    border: 1px solid rgba(255, 90, 126, 0.28);
}

.button:hover,
.track-item:hover,
.filter-item:hover,
.shortcut-item:hover,
.achievement-item:hover,
.leaderboard-item:hover,
.mission-card:hover {
    transform: translateY(-2px);
}

.filter-item.is-active {
    border-color: rgba(53, 231, 255, 0.26);
    box-shadow: 0 0 18px rgba(53, 231, 255, 0.12);
}

.product-popup {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(560px 420px at 29% 53%, rgba(200, 255, 90, .14), transparent 70%),
        radial-gradient(740px 520px at 67% 42%, rgba(53, 231, 255, .08), transparent 72%),
        rgba(2, 4, 10, 0.72);
    backdrop-filter: blur(15px);
}

.product-popup[hidden] {
    display: none;
}

.product-popup__dialog {
    position: relative;
    width: min(420px, 100%);
    padding: 30px;
    border-radius: 26px;
    border: 1px solid var(--stroke-strong);
    background: linear-gradient(145deg, rgba(12, 16, 42, 0.98), rgba(8, 11, 28, 0.98));
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.56);
}

.product-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
    cursor: pointer;
}

.topup-modal .product-popup__close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .08);
    color: var(--ink-dim);
    font-size: 22px;
}

.product-popup__badge {
    margin-bottom: 14px;
    font-size: 42px;
}

.topup-modal {
    width: min(680px, 92vw);
    padding: 48px 54px 42px;
    border: 1px solid rgba(200,255,90,.28);
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(12,16,42,.97), rgba(8,11,28,.99));
    box-shadow: 0 0 80px rgba(200,255,90,.12), 0 32px 64px rgba(0,0,0,.6);
    animation: popIn .3s cubic-bezier(.22,1,.36,1);
}

.topup-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.topup-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 12px var(--lime);
}

.topup-title {
    margin: 0 0 6px;
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: .01em;
}

.topup-sub {
    margin-bottom: 30px;
    color: var(--ink-mute);
    font-size: 18px;
    font-weight: 500;
}

.amount-shell {
    position: relative;
    margin-bottom: 12px;
    padding: 28px 34px 26px;
    border: 1.5px solid rgba(200,255,90,.18);
    border-radius: 28px;
    background: rgba(200,255,90,.04);
    transition: all .2s;
}

.amount-shell:focus-within {
    border-color: rgba(200,255,90,.5);
    background: rgba(200,255,90,.06);
    box-shadow: 0 0 28px rgba(200,255,90,.1);
}

.amount-shell.error {
    border-color: rgba(248,113,113,.45);
    background: rgba(248,113,113,.05);
}

.amount-label {
    margin-bottom: 16px;
    color: var(--ink-mute);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.amount-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.amount-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    color: var(--ink);
    background: transparent;
    font-family: "JetBrains Mono", monospace;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.amount-input::placeholder {
    color: rgba(140,175,230,.32);
    font-size: .67em;
    font-weight: 600;
}

.amount-currency {
    flex-shrink: 0;
    color: var(--lime);
    font-family: "Sora", sans-serif;
    font-size: 42px;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(200,255,90,.42);
}

.amount-hint {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 26px;
    padding: 0 6px;
    color: var(--ink-mute);
    font-size: 15px;
    font-weight: 500;
}

.amount-hint.error-text {
    justify-content: flex-start;
    color: #f87171;
    font-weight: 700;
}

.quick-label {
    margin-bottom: 14px;
    color: var(--ink-mute);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.quick-chip {
    min-height: 64px;
    padding: 11px 8px;
    border: 1px solid var(--stroke-strong);
    border-radius: 16px;
    color: var(--ink-dim);
    background: rgba(255,255,255,.04);
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: all .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.quick-chip:hover,
.quick-chip.selected,
.quick-chip.is-active {
    transform: translateY(-1px);
    color: var(--lime);
    background: rgba(200,255,90,.12);
    border-color: var(--lime);
    box-shadow: 0 0 18px rgba(200,255,90,.18);
}

.quick-chip .chip-cur {
    opacity: .6;
    font-size: 14px;
    font-weight: 600;
}

.topup-submit {
    width: 100%;
    min-height: 76px;
    padding: 18px;
    border-radius: 18px;
    font-size: 20px;
}

.btn-pay:disabled {
    opacity: .35;
    cursor: not-allowed;
    color: var(--ink-mute);
    background: rgba(255,255,255,.06);
    box-shadow: none;
    animation: none;
}

.btn-pay .pay-logo {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #1a1300;
    color: #FFD000;
    font-family: "Sora", sans-serif;
    font-size: 15px;
    font-weight: 900;
}

.btn-pay .pay-amount {
    font-family: "JetBrains Mono", monospace;
    opacity: .72;
    font-weight: 800;
}

.btn-pay .pay-arrow {
    transition: transform .25s;
}

.btn-pay:hover:not(:disabled) .pay-arrow {
    transform: translateX(4px);
}

.btn-pay.loading .pay-arrow {
    display: none;
}

.tbank-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--ink-mute);
    font-size: 14px;
    font-weight: 500;
}

.topup-error {
    margin: 12px 0 0;
    color: #ff9ead;
    font-size: var(--product-text-ui-sm);
    font-weight: 700;
}

.popup-balance {
    display: grid;
    gap: 10px;
    margin: 18px 0 20px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.buy-modal-eyebrow-title {
    margin: 0 0 16px;
    text-align: center;
    font-family: "Sora", sans-serif;
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.buy-modal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px 28px;
    margin-top: 4px;
    align-items: stretch;
}

.buy-modal-col {
    min-width: 0;
    min-height: 0;
}

.buy-modal-col--right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.buy-modal-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
}

.buy-modal-heading__icon {
    flex-shrink: 0;
    font-size: 34px;
    line-height: 1;
}

.buy-modal-mission-name {
    margin: 0;
    font-family: "Sora", sans-serif;
    font-size: clamp(20px, 1.35vw, 24px);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.buy-modal-mission-desc {
    margin: 0 0 14px;
    font-size: clamp(14px, 0.95vw, 16px);
    line-height: 1.55;
    color: var(--ink-dim);
}

.buy-modal-block {
    padding: 14px 16px;
    border: 1px solid rgba(53, 231, 255, 0.18);
    border-radius: 14px;
    background: rgba(53, 231, 255, 0.06);
}

.buy-modal-block--words {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Десктоп: колонка «Слова в уроке» тянется по высоте левой колонки; прокрутка только если список длинный */
.buy-modal-words-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Узкие экраны: ограничиваем высоту списка слов, чтобы модалка не раздувалась */
@media (max-width: 900px) {
    .buy-modal-layout {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .buy-modal-col--right {
        display: grid;
    }

    .buy-modal-block--words {
        flex: 0 1 auto;
    }

    .buy-modal-words-scroll {
        flex: 0 1 auto;
        max-height: calc(20px + 3 * (1.25 * clamp(17px, 4.2vw, 24px)) + 8px);
    }
}

.buy-modal-words-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buy-modal-words-list li {
    margin: 0;
    padding: 0;
    font-family: "Sora", sans-serif;
    font-size: clamp(20px, 1.4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    color: rgba(180, 238, 255, 0.95);
    letter-spacing: 0.02em;
}

.buy-modal-words-list__empty {
    font-size: clamp(15px, 1vw, 18px) !important;
    font-weight: 600 !important;
    color: var(--ink-dim) !important;
}

.buy-modal-profiles-hint {
    margin: 18px auto 0;
    max-width: 46ch;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-dim);
}

.product-popup__dialog--buy .product-popup__actions {
    margin-top: 20px;
}

.buy-modal-block h3 {
    margin: 0 0 8px;
    color: var(--cyan-2);
    font-size: var(--product-text-ui-sm);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.buy-modal-block p {
    margin: 0;
    color: var(--ink);
    font-size: var(--product-text-ui-sm);
    line-height: 1.45;
}

.product-toast {
    padding: 14px 20px;
    border-radius: 999px;
    background: rgba(8, 11, 28, 0.92);
    border: 1px solid rgba(200, 255, 90, 0.35);
    color: var(--lime);
    font-family: "JetBrains Mono", monospace;
}

@keyframes twinkle {
    from { opacity: 0.35; }
    to { opacity: 0.65; }
}

@keyframes btnPayFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes btnPayGlare {
    0%, 42% { transform: translateX(0) rotate(16deg); opacity: 0; }
    54% { opacity: .9; }
    74%, 100% { transform: translateX(360%) rotate(16deg); opacity: 0; }
}

@keyframes floatUp {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.75; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-100vh) translateX(24px); opacity: 0; }
}

@keyframes lobbyGlyphFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes lobbyShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes ruWordIn {
    0% { opacity: 0; transform: scale(.75); }
    65% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes formReveal {
    0% { opacity: 0; transform: scale(.6) translateY(10px); }
    65% { transform: scale(1.08) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes arrowIn {
    from { opacity: 0; transform: scaleX(0) translateX(-4px); }
    to { opacity: 1; transform: scaleX(1) translateX(0); }
}

@keyframes wordEvolve {
    0% { opacity: 0; transform: scale(.65) translateY(12px); }
    55% { opacity: 1; transform: scale(1.08) translateY(-3px); }
    80% { transform: scale(.98) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes labelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(64px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes imgPop {
    0% { opacity: 0; transform: scale(.7); }
    65% { transform: scale(1.07); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes sentenceIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes learnAnchorIn {
    from { opacity: 0; transform: scale(1.2) translateY(72px); }
    to { opacity: .82; transform: scale(1) translateY(0); }
}

@keyframes glyphFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes loGlyphOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes coinFloat {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-80px) scale(1.4); opacity: 0; }
}

@keyframes glow {
    0% { box-shadow: 0 0 0 0 rgba(134, 239, 172, .5); }
    50% { box-shadow: 0 0 0 16px rgba(134, 239, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes popIn {
    0% { transform: scale(.82); opacity: 0; }
    70% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes comboFlash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .7; transform: scale(1.18); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (max-width: 1200px) {
    .dashboard-grid,
    .lobby-layout,
    .missions-grid,
    .mission-route {
        grid-template-columns: 1fr;
    }
}

/* Планшет: шапка остаётся в одну строку (лого · меню · профиль), только уплотняем отступы */
@media (max-width: 1180px) and (min-width: 769px) {
    .product-header {
        gap: clamp(8px, 0.8vw + 4px, 16px);
    }

    .product-header__left,
    .product-header__right {
        gap: 8px;
    }

    .product-nav {
        padding: 5px;
        gap: 2px;
    }

    .product-nav a {
        padding: 7px 9px;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 768px) {
    :root {
        --product-inline: clamp(12px, 3.2vw, 22px);
    }

    .product-main {
        width: 100%;
        max-width: 100%;
    }

    .product-header {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "left right"
            "nav nav";
        align-items: center;
        padding: 16px var(--product-inline);
    }

    .product-nav {
        grid-area: nav;
        width: 100%;
        justify-self: stretch;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
        display: grid;
        min-width: 0;
    }

    .product-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 10px 8px;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-align: center;
    }

    .product-header__right {
        grid-area: right;
        justify-self: end;
        align-self: center;
    }

    .product-header__left {
        grid-area: left;
    }

    .product-header__left,
    .product-header__right,
    .current-mission,
    .hero-stats,
    .lobby-layout,
    .mission-card,
    .mission-intro__header,
    .mission-player__choices.is-two,
    .mission-player__summary-grid {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }

    .lobby-center {
        min-height: 0;
        padding: 24px 20px 32px;
    }

    .lobby-side {
        padding: 18px 12px;
    }

    .lobby-days {
        flex-wrap: wrap;
    }

    .mission-card {
        grid-template-columns: 1fr;
    }

    .mission-card__side {
        justify-items: start;
    }

    .product-page--mission .product-main {
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .mission-route--mobile {
        align-items: flex-start;
        min-height: calc(100dvh - var(--product-header-height) - 14px);
    }

    .lo-mission-root {
        --lo-frame-height: calc(100dvh - var(--product-header-height) - 14px);
        width: 100%;
        border-radius: 24px;
    }

    .lo-stage-pills {
        padding-top: 12px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer,
    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer {
        justify-content: center;
        gap: clamp(10px, 2.2svh, 18px);
        padding-top: clamp(8px, 1.8svh, 20px);
        padding-bottom: clamp(8px, 1.8svh, 20px);
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer.has-en,
    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer.has-en {
        justify-content: center;
        padding-top: clamp(8px, 1.8svh, 20px);
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-learn-stage {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lo-word-image {
        width: clamp(132px, 18svh, 178px);
        height: clamp(132px, 18svh, 178px);
    }

    .lo-learn-anchor {
        top: clamp(12px, 3.6svh, 36px);
    }

    .lo-learn-anchor .lo-word-sound {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .lo-sentence-card.is-big {
        margin-top: 18px;
    }

    .lo-bottom {
        margin-bottom: clamp(28px, 7svh, 64px);
    }

    .week-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .current-mission {
        align-items: start;
    }

    .mission-player {
        min-height: 680px;
    }

    .mission-player__screen {
        min-height: 680px;
    }

    .mission-player__top,
    .mission-player__footer {
        flex-wrap: wrap;
    }
}

/**
 * Миссия на телефоне (≤640px): ~15px по горизонтали, укладываемся в высоту экрана без прокрутки.
 * Шаблоны: .lo-mission-root--words | --group; стадии: [data-lo-stage="learn"|"review"|"quiz"|…].
 */
@media (max-width: 640px) {
    .product-page--mission {
        --product-main-pad-y-top: 4px;
        --product-main-pad-y-bottom: max(4px, env(safe-area-inset-bottom, 0px));
        --product-inline: 15px;
    }

    .product-page--mission .product-header {
        padding: 6px 15px 8px;
        row-gap: 8px;
    }

    .product-page--mission .product-header__left,
    .product-page--mission .product-header__right {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .product-page--mission .product-header-brand__logo {
        height: 26px;
    }

    .product-page--mission a.product-wallet {
        padding: 6px 10px;
        font-size: 11px;
    }

    .product-page--mission .product-wallet--split .product-wallet-main {
        padding: 5px 4px 5px 10px;
        font-size: 11px;
    }

    .product-page--mission .product-wallet--split .product-wallet-main strong {
        font-size: 11px;
    }

    .product-page--mission .product-wallet-plus {
        min-width: 34px;
        padding: 0 6px;
        font-size: 17px;
    }

    .product-page--mission .product-notify {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .product-page--mission .product-avatar {
        gap: 8px;
        padding: 4px 9px 4px 4px;
    }

    .product-page--mission .product-avatar__badge {
        width: 34px;
        height: 34px;
    }

    .product-page--mission .product-avatar__text strong {
        font-size: 13px;
        line-height: 1.05;
    }

    .product-page--mission .product-avatar__text small {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1;
    }

    .product-page--mission .product-avatar__chevron {
        margin-left: 0;
        font-size: 12px;
    }

    .product-page--mission .product-nav {
        padding: 4px;
        gap: 4px;
    }

    .product-page--mission .product-nav a {
        padding: 8px 4px;
        font-size: 10px;
        letter-spacing: 0.07em;
    }

    .product-page--mission .product-main {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }

    .mission-route--mobile {
        align-items: stretch;
        min-height: 0;
        height: calc(100dvh - 156px - env(safe-area-inset-bottom, 0px));
        overflow: hidden;
    }

    .product-page--mission .lo-mission-root,
    .home-mission-shell .lo-mission-root,
    .mission-player--public .lo-mission-root {
        --lo-frame-height: min(calc(100dvh - 88px), 620px);
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        height: var(--lo-frame-height);
        max-height: calc(100dvh - 72px);
        min-height: 0;
    }

    .product-page--mission .mission-route--mobile .lo-mission-root {
        --lo-frame-height: 100%;
        height: 100%;
        max-height: none;
    }

    .lo-mission-screen {
        min-height: 0;
    }

    .lo-stage-pills {
        padding: 6px 10px 4px;
        gap: 5px;
    }

    .lo-stage-pills span {
        padding: 7px 4px;
        font-size: 10px;
        letter-spacing: 0.04em;
    }

    .lo-dots {
        padding: 4px 10px 5px;
    }

    .lo-bottom {
        padding: 6px 10px max(6px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .lo-primary {
        padding: 11px 14px;
        font-size: 15px;
    }

    .lo-ghost {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 17px;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-stage {
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 4px 10px 8px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-title {
        font-size: clamp(18px, 6vw, 28px);
        letter-spacing: .05em;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-cells {
        gap: 4px;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-cell {
        width: clamp(26px, 8.2vw, 36px);
        height: clamp(36px, 10vw, 46px);
        border-radius: 10px;
        font-size: clamp(18px, 5.5vw, 25px);
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-letters {
        gap: 6px;
    }

    .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-letters button {
        min-width: clamp(36px, 10.5vw, 46px);
        min-height: clamp(36px, 10.5vw, 46px);
        border-radius: 12px;
    }

    /* Слова — изучение */
    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-learn-stage {
        flex: 1;
        min-height: 0;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer {
        padding: 8px 12px;
        gap: 8px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-layer.has-en {
        padding-top: 10px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-image {
        width: min(42vw, 140px);
        height: min(42vw, 140px);
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-word-emoji {
        font-size: 52px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-ru-word {
        font-size: clamp(18px, 4.2vw, 26px);
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-en-word {
        font-size: clamp(26px, 8vw, 40px);
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-learn-anchor {
        top: 8px;
        left: 10px;
        right: 10px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-sentence-card.is-big {
        margin-top: 6px;
        max-width: 100%;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-sentence-layer.is-in {
        padding: 6px 10px 8px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="learn"] .lo-sentence-card.is-big strong {
        font-size: clamp(15px, 3.8vw, 22px);
    }

    /* Группа — изучение */
    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-learn-group {
        padding: 0 10px 4px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-group-evolve {
        gap: 14px;
        padding: 4px 4px 8px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-group-label {
        font-size: clamp(20px, 6vw, 30px);
        margin-top: 4px;
        margin-bottom: 6px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-group-word {
        font-size: clamp(28px, 9vw, 44px);
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-group-sentences {
        padding: 8px 0 4px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-form-chain.is-compact .lo-form-pill {
        min-width: 64px;
        padding: 7px 8px 5px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="learn"] .lo-form-chain.is-compact .lo-form-pill strong {
        font-size: 15px;
    }

    /* Разминка */
    .lo-mission-root .lo-mission-screen[data-lo-stage="review"] .lo-question {
        padding: 6px 10px;
        gap: 8px;
        min-height: 0;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="review"] .lo-section-title {
        margin: 0 0 4px;
        font-size: 10px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="review"] .lo-review-word {
        font-size: clamp(24px, 7vw, 36px);
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="review"] .lo-options {
        padding: 4px 10px;
        gap: 6px;
        min-height: 0;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="review"] .lo-options button {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="review"] .lo-feedback {
        margin: 2px 10px 0;
        font-size: 12px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="review"] .lo-group-label-card {
        min-width: 120px;
        padding: 12px 14px;
        font-size: 28px;
    }

    /* Квиз */
    .lo-mission-root .lo-mission-screen[data-lo-stage="quiz"] .lo-quiz-top {
        padding: 4px 10px;
        gap: 6px;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="quiz"] .lo-timer {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="quiz"] .lo-listen {
        padding: 8px 6px;
        font-size: 12px;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="quiz"] .lo-coins {
        padding: 6px 8px;
        font-size: 12px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="quiz"] .lo-combo {
        padding: 0;
        font-size: 11px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="quiz"] .lo-blur-word {
        margin: 2px 10px;
        padding: 8px 10px;
        font-size: 20px;
    }

    .lo-mission-root--words .lo-mission-screen[data-lo-stage="quiz"] .lo-blur-word small {
        font-size: 13px;
    }

    .lo-mission-root .lo-mission-screen[data-lo-stage="quiz"] .lo-quiz-status {
        min-height: 0;
        padding: 2px 8px 0;
        font-size: 11px;
        line-height: 1.25;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="quiz"] .lo-question--group {
        padding: 4px 10px;
    }

    .lo-mission-root--group .lo-mission-screen[data-lo-stage="quiz"] .lo-group-sentence-fill {
        padding: 10px 12px;
        font-size: clamp(15px, 3.6vw, 20px);
    }

    .lo-mission-screen.is-intro,
    .lo-mission-screen.is-result {
        padding: 16px 14px 18px;
        gap: 12px;
    }

    .lo-mission-screen.is-result .lo-result-grid span {
        padding: 10px 8px;
    }
}

.product-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    font-size: var(--product-text-ui-sm);
    color: var(--ink-dim);
    white-space: nowrap;
}

.product-rating-pill__sep {
    opacity: 0.55;
}

.product-rating-pill__muted {
    font-size: clamp(9px, 0.2vw + 8px, 11px);
    white-space: normal;
    max-width: min(200px, 38vw);
    line-height: 1.25;
}

.mission-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.mission-card__stats {
    font-size: var(--product-text-ui-sm);
}

.product-popup__dialog--wide {
    max-width: min(640px, 96vw);
}

.product-popup__dialog--buy {
    width: min(860px, 96vw);
    max-height: min(92dvh, 900px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.product-popup__hint {
    margin: 0 0 12px;
    font-size: var(--product-text-ui-sm);
    color: var(--ink-dim);
    line-height: 1.45;
}

@media (max-width: 640px) {
    .product-popup {
        padding: 12px;
        box-sizing: border-box;
    }

    .product-popup__dialog--buy {
        width: 100%;
        max-width: min(440px, calc(100vw - 24px));
        max-height: 90dvh;
        margin: 0 auto;
        padding: 44px 20px 22px;
        border-radius: 22px;
    }

    .product-popup__dialog--buy .product-popup__close {
        top: 12px;
        right: 12px;
    }

    .product-popup__dialog--buy .buy-modal-eyebrow-title {
        margin: 0 0 18px;
        padding: 0 36px;
        box-sizing: border-box;
    }

    .product-popup__dialog--buy .buy-modal-layout {
        gap: 18px;
        margin-top: 0;
    }

    .product-popup__dialog--buy .buy-modal-heading {
        gap: 10px;
        margin-bottom: 10px;
    }

    .product-popup__dialog--buy .buy-modal-mission-desc {
        margin: 0 0 12px;
    }

    .product-popup__dialog--buy .popup-balance {
        margin: 12px 0 16px;
        padding: 14px 14px;
    }

    .product-popup__dialog--buy .buy-modal-block {
        padding: 14px 14px 16px;
    }

    .product-popup__dialog--buy .buy-modal-block h3 {
        margin: 0 0 10px;
    }

    .product-popup__dialog--buy .buy-modal-words-scroll {
        max-height: calc(20px + 3 * (1.25 * clamp(17px, 5vw, 22px)) + 8px);
        margin-top: 6px;
        padding: 0 2px 4px;
        scrollbar-gutter: stable;
    }

    .product-popup__dialog--buy .buy-modal-words-list {
        margin-top: 0;
    }

    .product-popup__dialog--buy .buy-modal-words-list li {
        text-align: left;
    }

    .product-popup__dialog--buy .buy-modal-profiles-hint {
        margin: 14px 0 0;
        padding: 0;
        max-width: none;
    }

    .product-popup__dialog--buy .product-popup__actions {
        margin-top: 16px;
        width: 100%;
        padding: 0;
        justify-content: stretch;
        gap: 10px;
        box-sizing: border-box;
    }

    .product-popup__dialog--buy .product-popup__actions .button {
        flex: 1 1 0;
        min-width: 0;
    }
}

.mission-stats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.mission-stats-tabs button {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    font-size: var(--product-text-ui-sm);
}

.mission-stats-tabs button.is-active {
    border-color: var(--cyan);
    color: var(--cyan);
}

.mission-stats-summary {
    font-size: var(--product-text-ui-sm);
    color: var(--ink-dim);
    margin-bottom: 12px;
    line-height: 1.5;
}

.mission-stats-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
}

.mission-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--product-text-ui-sm);
}

.mission-stats-table th,
.mission-stats-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--stroke);
    text-align: left;
}

.mission-stats-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.mission-stats-chart {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: var(--surface);
}

.mission-stats-chart h3 {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ink-dim);
    font-weight: 600;
}

.mission-stats-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 88px;
}

.mission-stats-bar {
    flex: 1;
    min-width: 6px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    opacity: 0.85;
}

/* —— Rating & analytics —— */
.product-page--rating .product-main {
    max-width: 1120px;
}

.rating-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rating-title {
    margin: 0 0 4px;
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rating-muted {
    margin: 0;
    color: var(--ink-dim);
    font-size: 12px;
    font-weight: 600;
}

.rating-global__head {
    margin-bottom: 10px;
}

.rating-global__scroll {
    max-height: min(380px, 52vh);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: var(--surface);
}

.rating-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 13px;
}

.rating-table th,
.rating-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--stroke);
    white-space: nowrap;
}

.rating-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(15, 15, 30, 0.92);
    color: var(--ink-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

html[data-lexiorbit-theme="light"] .rating-global__scroll .rating-table th {
    background: rgba(241, 245, 249, 0.98);
    color: rgba(15, 23, 42, 0.58);
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.rating-table tr.is-me td {
    background: rgba(34, 211, 238, 0.08);
    box-shadow: inset 3px 0 0 var(--cyan);
}

.rating-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ink-dim);
}

.rating-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: start;
}

.rating-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rating-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.rating-toolbar__label {
    margin: 0;
}

.rating-select {
    min-width: 200px;
    flex: 1 1 220px;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-weight: 600;
}

.rating-chart-tabs {
    display: flex;
    gap: 8px;
}

.rating-tab {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--ink-dim);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.rating-tab.is-active {
    border-color: rgba(34, 211, 238, 0.45);
    color: var(--cyan-2);
    background: rgba(34, 211, 238, 0.08);
}

.rating-chart-wrap {
    position: relative;
    height: 220px;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: var(--surface);
    overflow: hidden;
}

.rating-chart-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rating-chart-svg polyline {
    stroke: var(--cyan-2);
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.38));
}

.rating-chart-svg [data-rating-points] circle {
    fill: var(--cyan-2);
    stroke: rgba(5, 6, 13, 0.92);
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.rating-chart-wrap[data-mode="xp"] .rating-chart-svg polyline {
    stroke: #a78bfa;
}

.rating-chart-wrap[data-mode="xp"] .rating-chart-svg [data-rating-points] circle {
    fill: #a78bfa;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.5));
}

.rating-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    color: var(--ink-dim);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

.rating-chart-empty[hidden] {
    display: none;
}

.rating-chart-hover {
    position: absolute;
    left: 12px;
    top: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}

.rating-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rating-side__title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
}

.rating-period-desktop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rating-period {
    width: 100%;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.rating-period.is-active {
    border-color: rgba(167, 139, 250, 0.55);
    color: #e9d5ff;
    background: rgba(139, 92, 246, 0.12);
}

.rating-period-mobile-label,
.rating-period-mobile {
    display: none;
}

.rating-activity-head {
    margin-bottom: 14px;
}

.rating-activity-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    margin-bottom: 16px;
}

.rating-activity-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rating-activity-field .rating-muted {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* В колонке label+control общий .rating-select { flex: 1 1 220px } тянул селект по высоте — сбрасываем */
.rating-activity-field .rating-select.rating-select--activity {
    flex: 0 0 auto;
    width: 100%;
    max-width: min(320px, 100%);
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    line-height: normal;
}

.rating-input-date {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    min-width: 150px;
}

html[data-lexiorbit-theme="light"] .rating-input-date {
    background: #fff;
}

.rating-activity-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rating-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--ink-dim);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

html[data-lexiorbit-theme="light"] .rating-chip {
    color: rgba(15, 23, 42, 0.72);
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.65);
}

.rating-chip:hover {
    border-color: rgba(167, 139, 250, 0.45);
    color: #e9d5ff;
}

html[data-lexiorbit-theme="light"] .rating-chip:hover {
    color: #5b21b6;
}

.rating-activity-scroll {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: var(--surface);
}

.rating-activity-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}

.rating-activity-table th,
.rating-activity-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--stroke);
    vertical-align: middle;
}

.rating-activity-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(15, 15, 30, 0.92);
    color: var(--ink-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

html[data-lexiorbit-theme="light"] .rating-activity-table th {
    background: rgba(241, 245, 249, 0.98);
    color: rgba(15, 23, 42, 0.78);
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}

.rating-activity-table tr.is-me td {
    background: rgba(34, 211, 238, 0.06);
    box-shadow: inset 3px 0 0 var(--cyan);
}

.rating-act-mission {
    white-space: normal;
    max-width: 280px;
    font-weight: 600;
    line-height: 1.35;
}

.rating-act-profile {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rating-act-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--stroke);
    flex-shrink: 0;
}

.rating-act-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    background: rgba(139, 92, 246, 0.22);
    color: #e9d5ff;
}

html[data-lexiorbit-theme="light"] .rating-act-avatar--fallback {
    color: #5b21b6;
}

.rating-act-profile-name {
    font-weight: 700;
    min-width: 0;
}

.rating-activity-empty {
    margin: 0;
    padding: 18px 16px 22px;
}

.rating-activity-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rating-act-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: var(--surface);
}

.rating-act-card.is-me {
    border-color: rgba(34, 211, 238, 0.35);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12);
}

.rating-act-name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
}

.rating-act-meta {
    margin: 0;
    color: var(--ink-dim);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.rating-spark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 48px;
}

.rating-spark span {
    flex: 1;
    min-width: 4px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--cyan-2), rgba(34, 211, 238, 0.2));
    opacity: 0.9;
}

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

    .rating-period-desktop {
        display: none;
    }

    .rating-period-mobile-label,
    .rating-period-mobile {
        display: block;
    }
}

/* ─── Audio mission (TIP=Аудио) — layout aligned with lexiorbit_base/project/audio-mission/Audio Mission.html ─── */
.lo-audio-mission {
    --am-bg: #0f0f1e;
    --am-ink: #e8e8ff;
    --am-mute: rgba(255, 255, 255, 0.32);
    --am-violet: #8b5cf6;
    --am-violet2: #6d28d9;
    --am-lilac: #c4b5fd;
    --am-accent: #a78bfa;
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--am-bg);
    color: var(--am-ink);
    border-radius: 34px;
    overflow: hidden;
    overflow-x: hidden;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .45);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Интро аудио: та же колонка/отступы, что у слов (.lo-mission-screen.is-intro внутри корня миссии) */
.lo-audio-mission > .lo-mission-screen.is-intro {
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

@keyframes lo-am-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes lo-am-slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes lo-am-popIn {
    0% { transform: scale(0.82); opacity: 0; }
    70% { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes lo-am-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@keyframes lo-am-glow {
    0% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0.5); }
    50% { box-shadow: 0 0 0 16px rgba(134, 239, 172, 0); }
    100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0); }
}
@keyframes lo-am-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes lo-am-barPulse {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}
@keyframes lo-am-coinFloat {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-80px) scale(1.3); opacity: 0; }
}

.lo-am-header {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.lo-am-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lo-am-header__badge {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.07);
    padding: 2px 8px;
    border-radius: 8px;
}
.lo-am-timer {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 4px 11px;
    color: var(--am-accent);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    gap: 5px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.lo-am-dots {
    display: flex;
    gap: 5px;
    padding: 8px 16px 4px;
    flex-shrink: 0;
}
.lo-am-dots span {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.35s;
}
.lo-am-dots span.is-done { background: var(--am-violet); }
.lo-am-dots span.is-active { background: var(--am-lilac); }

.lo-am-listen,
.lo-am-questions,
.lo-am-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.lo-am-result {
    scrollbar-gutter: stable;
}

.lo-am-header__title {
    font-size: 15px;
    font-weight: 800;
}

.lo-am-listen-top {
    padding: 18px 20px 14px;
    text-align: center;
}

.lo-am-listen-kicker {
    font-size: 11px;
    font-weight: 700;
    color: rgba(167, 139, 250, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lo-am-listen-title {
    font-size: 24px;
    font-weight: 900;
    color: #f0edff;
}

.lo-am-time-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
    padding: 0 16px;
}

.lo-am-time-row__dur {
    color: rgba(255, 255, 255, 0.3);
}

.lo-am-bar-footer {
    padding: 12px 16px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lo-am-bar-footer--tight {
    padding: 10px 16px;
}

.lo-am-q-head {
    padding: 12px 20px 6px;
    text-align: center;
}

.lo-am-q-kicker {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lo-am-q-en {
    font-size: 18px;
    font-weight: 800;
    color: #f0edff;
    line-height: 1.4;
}

.lo-am-choice-letter {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.35);
}

.lo-am-result-hero {
    text-align: center;
    margin-top: 4px;
}

.lo-am-result-title {
    font-size: 22px;
    font-weight: 900;
    color: #f0edff;
}

.lo-am-result-xp-card {
    padding: 16px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(139, 92, 246, 0.15));
    border: 1.5px solid rgba(251, 191, 36, 0.25);
    text-align: center;
}

.lo-am-result-xp-kicker {
    font-size: 11px;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.7);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lo-am-result-xp-value {
    font-size: 38px;
    font-weight: 900;
    color: #fbbf24;
}

.lo-am-result-xp-cap {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.32);
}

.lo-am-result-stats {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lo-am-result-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.07);
}

.lo-am-result-stat__label {
    flex: 1;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.lo-am-result-stat__ok {
    color: #6ee7b7;
}

.lo-am-result-rank {
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(139, 92, 246, 0.1);
    border: 1.5px solid rgba(139, 92, 246, 0.2);
    display: flex;
    align-items: center;
    gap: 14px;
}

.lo-am-result-rank__label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(167, 139, 250, 0.6);
    text-transform: uppercase;
}

.lo-am-result-rank__hash {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.lo-am-result-rank__place {
    font-size: 26px;
    font-weight: 900;
    color: #c4b5fd;
}

.lo-am-result-actions {
    display: flex;
    gap: 8px;
}

.lo-am-btn-primary--ghost-violet {
    background: rgba(139, 92, 246, 0.15);
    border: 1.5px solid rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
    box-shadow: none;
}

.lo-am-btn-primary--ghost-nav {
    flex: 1;
    text-align: center;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    padding: 13px;
    box-shadow: none;
}

.lo-am-modal__bar {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #e8e8ff;
}

.lo-am-modal__close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #e8e8ff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.lo-am-modal__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    font-size: 15px;
    line-height: 1.65;
    color: #e8e4ff;
    white-space: pre-wrap;
}

.lo-am-modal__ru {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    color: rgba(167, 139, 250, 0.85);
    white-space: pre-wrap;
}

.lo-am-btn-primary {
    width: 100%;
    padding: 15px 17px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, var(--am-violet), var(--am-violet2));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 28px rgba(109, 40, 217, 0.55);
}
.lo-am-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
    box-shadow: none;
}

.lo-am-player-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lo-am-ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}
.lo-am-play {
    position: relative;
    z-index: 2;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--am-violet), var(--am-violet2));
    box-shadow: 0 12px 50px rgba(109, 40, 217, 0.55), inset 0 2px 8px rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}
.lo-am-play:active { transform: scale(0.96); }

.lo-am-bars {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 18px;
    pointer-events: none;
    z-index: 1;
}
.lo-am-bars i {
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--am-accent);
    transform-origin: bottom;
    animation: lo-am-barPulse 0.7s ease-in-out infinite;
}
.lo-am-bars i:nth-child(1) { animation-delay: 0s; }
.lo-am-bars i:nth-child(2) { animation-delay: 0.12s; }
.lo-am-bars i:nth-child(3) { animation-delay: 0.24s; }
.lo-am-bars i:nth-child(4) { animation-delay: 0.36s; }
.lo-am-bars i:nth-child(5) { animation-delay: 0.48s; }

.lo-am-seek {
    position: relative;
    height: 18px;
    cursor: pointer;
    margin: 0 16px;
}
.lo-am-seek__rail {
    position: absolute;
    inset: 7px 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.lo-am-seek__reach {
    position: absolute;
    top: 7px;
    left: 0;
    bottom: 7px;
    background: rgba(139, 92, 246, 0.25);
    border-radius: 8px;
    transition: width 0.3s;
}
.lo-am-seek__fill {
    position: absolute;
    top: 7px;
    left: 0;
    bottom: 7px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--am-accent), var(--am-violet));
    transition: width 0.12s linear;
}
.lo-am-seek__thumb {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.6);
    border: 2px solid var(--am-violet);
    transform: translate(-50%, -50%);
}

.lo-am-q-xpbar {
    flex: 1;
    height: 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.lo-am-q-xpbar > i {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    transition: width 0.5s, background 0.3s;
}

.lo-am-choice {
    padding: 15px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    color: #e0e0ff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}

.lo-am-choice > span:last-child {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}
.lo-am-choice.is-correct {
    background: rgba(52, 211, 153, 0.15);
    border-color: #34d399;
    color: #6ee7b7;
    animation: lo-am-glow 0.6s ease;
}
.lo-am-choice.is-wrong-pick {
    background: rgba(248, 113, 113, 0.12);
    border-color: #f87171;
    color: #fca5a5;
    animation: lo-am-shake 0.4s ease;
}

.lo-am-modal {
    position: absolute;
    inset: 0;
    z-index: 300;
    background: rgba(7, 7, 16, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    animation: lo-am-fadeIn 0.25s ease both;
}

.mission-route--mobile .lo-mission-root.lo-mission-root--audio > .lo-audio-mission {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Inner legal pages: main column inside product-layout */
.product-main--inner-site {
    flex: 1 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--product-main-pad-y-top) var(--product-inline) var(--product-main-pad-y-bottom);
    box-sizing: border-box;
}

html[data-lexiorbit-theme="light"] .lobby-achievement-item {
    background: var(--surface);
    border-color: var(--stroke);
}

html[data-lexiorbit-theme="light"] .lobby-achievement-item__xp {
    background: rgba(14, 165, 233, 0.12);
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .product-popup {
    background:
        radial-gradient(560px 420px at 29% 53%, rgba(99, 102, 241, 0.12), transparent 70%),
        radial-gradient(740px 520px at 67% 42%, rgba(14, 165, 233, 0.1), transparent 72%),
        rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(14px);
}

html[data-lexiorbit-theme="light"] .product-popup__dialog {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 32px 64px -24px rgba(15, 23, 42, 0.2);
}

html[data-lexiorbit-theme="light"] .topup-modal {
    border: 1px solid rgba(14, 165, 233, 0.3);
    background: linear-gradient(168deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 28px 70px -20px rgba(15, 23, 42, 0.18),
        0 0 48px rgba(99, 102, 241, 0.08);
}

html[data-lexiorbit-theme="light"] .topup-eyebrow {
    color: var(--cyan);
}

html[data-lexiorbit-theme="light"] .topup-title {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .topup-sub,
html[data-lexiorbit-theme="light"] .amount-label,
html[data-lexiorbit-theme="light"] .quick-label {
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .amount-input {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--stroke-strong);
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .quick-chip {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--stroke);
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .quick-chip:hover {
    border-color: rgba(14, 165, 233, 0.45);
    box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.2);
}

html[data-lexiorbit-theme="light"] .btn-pay,
html[data-lexiorbit-theme="light"] .topup-submit {
    background: linear-gradient(135deg, #0e7490, #6366f1);
    color: #fff;
}

html[data-lexiorbit-theme="light"] .product-popup__close,
html[data-lexiorbit-theme="light"] .topup-modal .product-popup__close {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .buy-modal-block--words {
    border-color: rgba(14, 165, 233, 0.22);
    background: rgba(224, 242, 254, 0.72);
}

html[data-lexiorbit-theme="light"] .buy-modal-block--words h3 {
    color: #0e7490;
}

html[data-lexiorbit-theme="light"] .buy-modal-words-list li {
    color: #0c4a6e;
}

/* Lesson player frame (light) */
html[data-lexiorbit-theme="light"] .lo-mission-root {
    background:
        radial-gradient(ellipse 60% 55% at 30% 20%, rgba(99, 102, 241, 0.14), transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(14, 165, 233, 0.1), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 45%, #eef2ff 100%);
    color: var(--ink);
    box-shadow: 0 28px 70px -24px rgba(15, 23, 42, 0.18);
}

html[data-lexiorbit-theme="light"] .lo-kicker,
html[data-lexiorbit-theme="light"] .lo-section-title {
    color: rgba(109, 40, 217, 0.75);
}

html[data-lexiorbit-theme="light"] .lo-intro-text h1,
html[data-lexiorbit-theme="light"] .lo-mission-screen.is-result h1 {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .lo-intro-text p,
html[data-lexiorbit-theme="light"] .lo-mission-screen.is-result p {
    color: var(--ink-mute);
}

html[data-lexiorbit-theme="light"] .lo-chain-preview {
    border-color: var(--stroke);
    background: rgba(15, 23, 42, 0.03);
}

html[data-lexiorbit-theme="light"] .lo-form-pill {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--stroke);
    box-shadow: 0 4px 16px -6px rgba(15, 23, 42, 0.08);
}

html[data-lexiorbit-theme="light"] .lo-stage-pills span {
    background: rgba(15, 23, 42, 0.06);
    color: var(--ink-dim);
}

html[data-lexiorbit-theme="light"] .lo-stage-pills span.is-active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

html[data-lexiorbit-theme="light"] .lo-word-learn strong,
html[data-lexiorbit-theme="light"] .lo-word-translation {
    color: var(--ink);
}

html[data-lexiorbit-theme="light"] .lo-bottom .lo-primary {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
}

/* Mission player (words + group): светлая тема — читаемый текст на всех шагах */
html[data-lexiorbit-theme="light"] .lo-review-word,
html[data-lexiorbit-theme="light"] .lo-en-word,
html[data-lexiorbit-theme="light"] .lo-blur-word {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-ru-word {
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-learn-anchor span {
    color: rgba(91, 33, 182, 0.72);
}

html[data-lexiorbit-theme="light"] .lo-learn-anchor strong {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-en-block small {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-options button {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .lo-options button span {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

html[data-lexiorbit-theme="light"] .lo-options button.is-correct {
    color: #047857;
}

html[data-lexiorbit-theme="light"] .lo-options button.is-wrong {
    color: #b91c1c;
}

html[data-lexiorbit-theme="light"] .lo-dots span {
    background: rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .lo-dots span.is-done {
    background: #6366f1;
}

html[data-lexiorbit-theme="light"] .lo-dots span.is-current {
    background: #8b5cf6;
}

html[data-lexiorbit-theme="light"] .lo-bottom {
    border-top-color: var(--stroke);
}

html[data-lexiorbit-theme="light"] .lo-ghost,
html[data-lexiorbit-theme="light"] .lo-ghost-link {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.75);
    color: #334155;
}

html[data-lexiorbit-theme="light"] .lo-ghost:hover,
html[data-lexiorbit-theme="light"] .lo-ghost-link:hover {
    color: #0f172a;
    border-color: rgba(99, 102, 241, 0.35);
}

html[data-lexiorbit-theme="light"] .lo-sentence-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .lo-sentence-card strong,
html[data-lexiorbit-theme="light"] .lo-sentence-card small,
html[data-lexiorbit-theme="light"] .lo-sentence-card.is-big span,
html[data-lexiorbit-theme="light"] .lo-sentence-card.is-big strong,
html[data-lexiorbit-theme="light"] .lo-sentence-card.is-big em {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-sentence-card.is-big .is-ru strong {
    color: #1e293b;
}

html[data-lexiorbit-theme="light"] .lo-group-sentence-fill {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-group-label,
html[data-lexiorbit-theme="light"] .lo-group-kicker {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-group-word {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-group-label-card.is-blue {
    color: #1d4ed8;
}

html[data-lexiorbit-theme="light"] .lo-group-label-card.is-purple {
    color: #6d28d9;
}

html[data-lexiorbit-theme="light"] .lo-group-label-card.is-green {
    color: #047857;
}

html[data-lexiorbit-theme="light"] .lo-form-pill strong {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-form-pill small {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-timer span {
    background: #f8fafc;
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-listen {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-quiz-status {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-blur-word small {
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-result-grid span {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-result-grid strong {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-result-grid small {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-title,
html[data-lexiorbit-theme="light"] .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-feedback {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-cell {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-screen[data-lo-stage="learn"] .lo-spelling-letters button {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-word-sound {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.12);
    color: #5b21b6;
    box-shadow: none;
}

html[data-lexiorbit-theme="light"] .lo-word-sound:hover,
html[data-lexiorbit-theme="light"] .lo-word-sound:focus-visible {
    border-color: rgba(99, 102, 241, 0.55);
    background: rgba(99, 102, 241, 0.18);
}

html[data-lexiorbit-theme="light"] .lo-chain-preview > div:first-child {
    color: rgba(15, 23, 42, 0.45);
}

html[data-lexiorbit-theme="light"] .lo-form-chain em {
    color: rgba(99, 102, 241, 0.55);
}

/* Audio mission (шаблон 3) — светлая тема */
html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-audio-mission {
    --am-bg: rgba(255, 255, 255, 0.94);
    --am-ink: #0f172a;
    --am-mute: rgba(15, 23, 42, 0.55);
    --am-violet: #7c3aed;
    --am-violet2: #5b21b6;
    --am-lilac: #8b5cf6;
    --am-accent: #6d28d9;
    color: var(--am-ink);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 28px 70px -24px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

html[data-lexiorbit-theme="light"] .mission-route--mobile .lo-mission-root--audio > .lo-audio-mission {
    border: none;
    box-shadow: none;
    background: transparent;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-header {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-header__badge {
    color: rgba(15, 23, 42, 0.48);
    background: rgba(15, 23, 42, 0.06);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-timer {
    background: rgba(99, 102, 241, 0.12);
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-dots span {
    background: rgba(15, 23, 42, 0.12);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-dots span.is-active {
    background: #8b5cf6;
}

/* Как вкладка «МИССИИ» в шапке: cyan → indigo */
html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-btn-primary:not(:disabled):not(.lo-am-btn-primary--ghost-violet):not(.lo-am-btn-primary--ghost-nav) {
    background: linear-gradient(90deg, #0891b2, #6366f1);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(99, 102, 241, 0.32),
        0 6px 22px rgba(8, 145, 178, 0.22);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-audio-mission .lo-primary:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(90deg, #0891b2, #6366f1);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(99, 102, 241, 0.32),
        0 6px 22px rgba(8, 145, 178, 0.22);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-play {
    background: linear-gradient(135deg, #0891b2, #6366f1);
    box-shadow:
        0 12px 40px rgba(99, 102, 241, 0.38),
        0 10px 36px rgba(8, 145, 178, 0.22),
        inset 0 2px 8px rgba(255, 255, 255, 0.22);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-seek__fill {
    background: linear-gradient(90deg, #22d3ee, #6366f1);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-btn-primary:disabled {
    background: rgba(15, 23, 42, 0.08);
    color: rgba(15, 23, 42, 0.42);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-seek__rail {
    background: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-seek__reach {
    background: rgba(124, 58, 237, 0.22);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-ring circle:not([data-am-ring-arc]) {
    stroke: rgba(15, 23, 42, 0.1) !important;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-listen-kicker {
    color: rgba(91, 33, 182, 0.78);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-listen-title {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-time-row {
    color: rgba(15, 23, 42, 0.55);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-time-row__dur {
    color: rgba(15, 23, 42, 0.38);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-bar-footer,
html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-bar-footer--tight {
    border-top-color: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio [data-am-listen-pill]:not([data-am-full="1"]) {
    border-color: rgba(15, 23, 42, 0.14) !important;
    background: rgba(15, 23, 42, 0.04) !important;
    color: rgba(15, 23, 42, 0.62) !important;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio [data-am-listen-pill][data-am-full="1"] {
    border-color: rgba(16, 185, 129, 0.42) !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-q-xpbar {
    background: rgba(15, 23, 42, 0.08);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-q-kicker {
    color: rgba(15, 23, 42, 0.5);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-q-en {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-choice {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-choice-letter {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-choice.is-correct {
    color: #047857;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-choice.is-wrong-pick {
    color: #b91c1c;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-title {
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-xp-card {
    border-color: rgba(245, 158, 11, 0.35);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(139, 92, 246, 0.1));
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-xp-kicker {
    color: #b45309;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-xp-cap {
    color: rgba(15, 23, 42, 0.5);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-stat {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-stat__label {
    color: rgba(15, 23, 42, 0.6);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-stat__ok {
    color: #047857;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-rank {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.22);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-rank__label {
    color: rgba(91, 33, 182, 0.85);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-rank__hash {
    color: rgba(15, 23, 42, 0.45);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-result-rank__place {
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-btn-primary--ghost-violet {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.35);
    color: #5b21b6;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-btn-primary--ghost-nav {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-modal {
    background: rgba(248, 250, 252, 0.94);
    backdrop-filter: blur(10px);
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-modal__bar {
    border-bottom-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-modal__close {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-modal__body {
    color: #1e293b;
}

html[data-lexiorbit-theme="light"] .lo-mission-root--audio .lo-am-modal__ru {
    border-top-color: rgba(15, 23, 42, 0.12);
    color: #5b21b6;
}