/* ============================================
   QUIZ FEATURE - MODULAR ARCHITECTURE
   ============================================
   
   This file imports modular quiz CSS files.
   The monolithic quiz.css has been split into:
   
   - quiz/quiz-base.css         - Основные контейнеры, wrapper, header, кнопки
   - quiz/quiz-screens.css      - Контейнер экранов, анимации, стартовый экран
   - quiz/quiz-game.css         - Игровой процесс (progress, rounds, options, feedback)
   - quiz/quiz-result.css       - Экран результатов и статистика
   - quiz/quiz-leaderboard.css  - Таблица лидеров и toast-уведомления
   - quiz/quiz-top.css          - Экран топов и детальной статистики
   - quiz/quiz-responsive.css   - Мобильные и адаптивные стили
   
   ============================================ */

/* ---- inlined: interactive-hub.css ---- */
/* Контейнер для квизов, мини-игр и других интерактивов. */
.interactive-hub {
    --interactive-surface: linear-gradient(
        135deg,
        rgba(120, 40, 200, 0.85) 0%,
        rgba(80, 20, 160, 0.9) 35%,
        rgba(50, 10, 120, 0.95) 65%,
        rgba(20, 5, 80, 1) 100%
    );
    --interactive-panel-min-height: 430px;
    --interactive-content-width: 650px;
    --interactive-control-width: 540px;
    --interactive-panel-padding: clamp(2rem, 5vw, 3.5rem);
    --interactive-title-size: clamp(1.55rem, 4vw, 2.55rem);
    --interactive-copy-size: 1rem;
    --interactive-header-gap: 1rem;
    --interactive-content-gap: 1.5rem;
    --interactive-action-padding: 0.85rem 1.45rem;
    --interactive-action-size: 0.78rem;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-hub-sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.interactive-auth-session-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.7rem 0 0;
}

.interactive-auth-session-controls[hidden] {
    display: none;
}

.interactive-auth-session-controls button {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(15, 8, 25, 0.72);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.interactive-auth-session-controls button:hover {
    color: #fff;
    background: rgba(30, 14, 50, 0.88);
    border-color: rgba(212, 160, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(120, 40, 200, 0.28);
}

.interactive-auth-session-controls button:focus-visible {
    color: #fff;
    border-color: rgba(212, 160, 255, 0.7);
    outline: none;
    box-shadow: 0 0 0 2px rgba(212, 160, 255, 0.4);
}

.interactive-auth-session-controls button:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .interactive-auth-session-controls button {
        transition: none;
        transform: none;
    }
    .interactive-auth-session-controls button:hover,
    .interactive-auth-session-controls button:active {
        transform: none;
    }
}

/* Единый каркас экранов Telegram-входа: кнопка под кнопкой, один размер. */
.event-auth-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: min(100%, 19rem);
    margin: var(--interactive-content-gap) auto 0;
}

.event-auth-actions .event-auth-cta,
.event-auth-actions .event-auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    text-decoration: none;
}

.event-auth-actions .event-auth-back {
    padding: var(--interactive-action-padding);
    border-radius: 999px;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: var(--interactive-action-size);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.event-auth-actions .event-auth-cta:active,
.event-auth-actions .event-auth-back:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

/* Состояния ожидания Telegram-входа: спиннер + читаемая подпись. */
.event-auth-cta.is-loading,
.event-auth-cta.is-waiting {
    cursor: progress;
}

.event-auth-cta.is-loading {
    opacity: 0.75;
    pointer-events: none;
}

.event-auth-cta.is-loading::after,
.event-auth-cta.is-waiting::after {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: event-auth-spin 0.75s linear infinite;
}

@keyframes event-auth-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .event-auth-cta.is-loading::after,
    .event-auth-cta.is-waiting::after {
        animation-duration: 1.6s;
    }
}

.event-auth-notice {
    max-width: 34rem;
    margin: 1.1rem auto 0;
    font-family: 'Affect', sans-serif;
    font-size: 0.72rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .event-auth-actions {
        width: 100%;
        gap: 0.6rem;
    }

    .event-auth-actions .event-auth-cta,
    .event-auth-actions .event-auth-back {
        min-height: 46px;
        font-size: 0.7rem;
    }
}

.interactive-hub-tabs {
    --interactive-tab-gap: 0.35rem;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--interactive-tab-gap);
    position: relative;
    z-index: 1;
}

.interactive-hub-indicator {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 3;
    width: calc((100% - var(--interactive-tab-gap)) / 2);
    height: 4px;
    min-height: 4px;
    max-height: 4px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px 999px 0 0;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.65);
    pointer-events: none;
    will-change: transform;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.interactive-hub[data-theme="first-listen"] .interactive-hub-indicator {
    background: #15111a;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.92);
}

.interactive-hub-tab {
    min-width: 0;
    padding: 0.8rem 1rem;
    color: rgba(255, 255, 255, 0.58);
    background-image:
        linear-gradient(rgba(11, 3, 32, 0.62), rgba(11, 3, 32, 0.62)),
        var(--interactive-surface);
    border: 1px solid rgba(180, 100, 255, 0.22);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    cursor: pointer;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: clamp(0.68rem, 1.8vw, 0.85rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.interactive-hub-tab:hover,
.interactive-hub-tab:focus-visible {
    color: #fff;
    background-image:
        linear-gradient(rgba(26, 7, 67, 0.36), rgba(26, 7, 67, 0.36)),
        var(--interactive-surface);
    outline: none;
}

.interactive-hub-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(212, 160, 255, 0.52);
}

.interactive-hub-tab:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.interactive-hub-tab.is-active {
    color: #fff;
    background-image: var(--interactive-surface);
    border-color: rgba(212, 160, 255, 0.48);
    border-bottom-color: transparent;
    margin-bottom: -1px;
    position: relative;
    z-index: 2;
}

.interactive-hub-tab[data-theme="first-listen"] {
    color: #15111a;
    background-image: linear-gradient(135deg, #ffffff 0%, #e5e0ed 56%, #fbfbfd 100%);
    border-color: rgba(255, 255, 255, 0.92);
}

.interactive-hub-tab[data-theme="first-listen"]:hover,
.interactive-hub-tab[data-theme="first-listen"]:focus-visible {
    color: #15111a;
    background-image: linear-gradient(135deg, #ffffff 0%, #ece8f2 56%, #ffffff 100%);
}

.interactive-hub[data-theme="first-listen"] .interactive-hub-tab.is-active {
    color: #15111a;
    background-image: linear-gradient(135deg, #ffffff 0%, #e5e0ed 56%, #fbfbfd 100%);
    border-color: rgba(255, 255, 255, 0.92);
}

@media (hover: hover) and (pointer: fine) {
    .interactive-hub:hover {
        transform: translateY(-3px);
        filter:
            drop-shadow(0 0 18px rgba(120, 40, 200, 0.35))
            drop-shadow(0 22px 38px rgba(0, 0, 0, 0.42));
    }

    /* Поднимается общий контейнер, поэтому содержимое не должно двигаться отдельно. */
    .interactive-hub:hover .quiz-wrapper {
        transform: none;
        border-color: rgba(212, 160, 255, 0.45);
    }
}

.interactive-hub-panel {
    min-width: 0;
}

.interactive-hub-stage {
    position: relative;
}

.interactive-hub-panel[hidden] {
    display: none;
}

.is-transitioning {
    pointer-events: none;
}

.interactive-hub .is-transitioning .quiz-feedback-overlay.visible {
    pointer-events: none;
}


.interactive-hub .quiz-wrapper {
    box-sizing: border-box;
    max-width: none;
    min-height: var(--interactive-panel-min-height);
    margin: 0;
    padding: var(--interactive-panel-padding);
    border-radius: 0 0 28px 28px;
    background: var(--interactive-surface);
}

@media (max-width: 768px) {
    .interactive-hub-tabs {
        --interactive-tab-gap: 0.2rem;
    }

    .interactive-hub-tab {
        padding: 0.7rem 0.35rem;
        border-radius: 12px 12px 0 0;
    }

    .interactive-hub .quiz-wrapper {
        border-radius: 0 0 20px 20px;
    }

    .interactive-hub .quiz-wrapper {
        padding: 2rem 1.1rem;
    }
}

@media (max-width: 600px) {
    .interactive-hub .quiz-wrapper {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-hub-indicator,
    .interactive-hub-tab,
    .interactive-hub-tab:active,
    .event-auth-actions .event-auth-cta:active,
    .event-auth-actions .event-auth-back:active {
        transition: none;
        transform: none;
    }

    .interactive-hub:hover,
    .interactive-hub:hover .quiz-wrapper {
        transform: none;
        filter: none;
    }
}

/* ---- inlined: first-listen.css ---- */
/* «С какого трека начал слушать» — светлая перламутровая вкладка. */
.first-listen-panel {
    min-height: var(--interactive-panel-min-height);
    overflow: hidden;
    color: #121217;
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.98), transparent 30%),
        radial-gradient(circle at 86% 82%, rgba(204, 194, 235, 0.56), transparent 36%),
        linear-gradient(130deg, #f9f8fb 0%, #e8e4f0 45%, #fdfdfe 100%);
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 0 0 28px 28px;
    box-shadow: 0 20px 60px rgba(7, 4, 18, 0.28);
}

.first-listen-screen {
    box-sizing: border-box;
    max-width: var(--interactive-content-width);
    min-height: var(--interactive-panel-min-height);
    margin: 0 auto;
    padding: var(--interactive-panel-padding);
    text-align: center;
}

.first-listen-eyebrow {
    margin: 0 0 0.75rem;
    color: #635b72;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.first-listen-title {
    max-width: 15ch;
    margin: 0 auto;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: var(--interactive-title-size);
    letter-spacing: -0.025em;
    line-height: 1.03;
}

.first-listen-screen[data-first-listen-screen="choose"] .first-listen-title {
    text-transform: uppercase;
}

.first-listen-auth-screen .first-listen-title { max-width: 22ch; }
.first-listen-auth-screen .first-listen-copy { margin-bottom: 0; }

.first-listen-copy {
    max-width: 44ch;
    margin: var(--interactive-header-gap) auto var(--interactive-content-gap);
    color: #696271;
    font-family: 'Affect', sans-serif;
    font-size: var(--interactive-copy-size);
    line-height: 1.45;
}

.first-listen-search {
    display: block;
    max-width: var(--interactive-control-width);
    margin: 0 auto;
    padding: 0.7rem 1.1rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(31, 24, 42, 0.13);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 25px rgba(52, 38, 74, 0.08);
}

.first-listen-search[hidden],
.first-listen-selection[hidden] {
    display: none;
}

.first-listen-search-label,
.first-listen-selection-label {
    display: block;
    color: #7d7586;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.57rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.first-listen-search input {
    width: 100%;
    padding: 0;
    color: #141118;
    background: transparent;
    border: 0;
    outline: none;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.15rem);
}

.first-listen-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.35rem 1.35rem;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.22rem;
}

.first-listen-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.first-listen-search input::placeholder { color: #aaa4b0; }
.first-listen-search:focus-within { border-color: rgba(35, 26, 49, 0.36); box-shadow: 0 0 0 4px rgba(147, 131, 181, 0.17); }
.first-listen-input-clear,
.first-listen-search-icon {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    color: #5f5967;
}
.first-listen-input-clear {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}
.first-listen-input-clear:hover { color: #2d2635; background: rgba(64, 54, 75, 0.1); }
.first-listen-input-clear:focus-visible { outline: 2px solid rgba(95, 89, 103, 0.55); outline-offset: 2px; }
.first-listen-input-clear svg,
.first-listen-search-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.15; }

.first-listen-suggestions {
    --first-listen-suggestion-height: 57px;
    display: grid;
    max-width: var(--interactive-control-width);
    /* Видны три самых похожих трека, остальные — в ленис-скролле */
    max-height: calc(var(--first-listen-suggestion-height) * 3);
    margin: 0.75rem auto 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    border-radius: 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 37, 56, 0.32) transparent;
}

.first-listen-suggestions::-webkit-scrollbar {
    width: 12px;
}

.first-listen-suggestions::-webkit-scrollbar-track {
    margin: 6px 0;
    background: transparent;
}

.first-listen-suggestions::-webkit-scrollbar-thumb {
    background: rgba(45, 37, 56, 0.32);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}

.first-listen-suggestions::-webkit-scrollbar-thumb:hover {
    background: rgba(45, 37, 56, 0.5);
    background-clip: content-box;
}

.first-listen-suggestion {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-sizing: border-box;
    min-height: var(--first-listen-suggestion-height);
    width: 100%;
    padding: 0.6rem 0.8rem;
    color: #221c29;
    background: rgba(255, 255, 255, 0.62);
    border: 0;
    border-bottom: 1px solid rgba(39, 30, 50, 0.08);
    cursor: pointer;
    font-family: 'Affect', sans-serif;
    font-size: 1rem;
    text-align: left;
    transition: background 0.2s ease, transform 0.2s ease;
}
.first-listen-suggestion:hover { background: #fff; transform: translateX(3px); }
.first-listen-suggestion img, .first-listen-selection-cover, .first-listen-ranking-cover { width: 38px; height: 38px; object-fit: cover; border-radius: 10px; }
.first-listen-suggestion img { flex: none; }
.first-listen-suggestion > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.first-listen-suggestion small { display: block; margin-top: 0.12rem; overflow: hidden; color: #857d90; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.first-listen-no-results { margin: 0.7rem 0; color: #7d7586; font-family: 'Affect', sans-serif; font-size: 0.9rem; }

.first-listen-selection {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: var(--interactive-control-width);
    margin: 0 auto;
    padding: 0.7rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(35, 26, 49, 0.13);
    border-radius: 16px;
}
.first-listen-selection strong { display: block; margin-top: 0.18rem; font-family: 'DrukTextWideCyr', sans-serif; }
.first-listen-clear { width: 30px; height: 30px; margin-left: auto; color: #625b6b; background: transparent; border: 0; cursor: pointer; font-size: 1.5rem; }

.first-listen-confirm, .first-listen-again {
    margin-top: var(--interactive-content-gap);
    padding: var(--interactive-action-padding);
    color: #fff;
    background: #18141e;
    border: 1px solid #18141e;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: var(--interactive-action-size);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.first-listen-confirm:hover:not(:disabled), .first-listen-again:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(22, 16, 31, 0.22); }
.first-listen-confirm:disabled { opacity: 0.4; cursor: default; }
.first-listen-again { color: #2a2232; background: transparent; border-color: rgba(42, 34, 50, 0.25); }
.first-listen-confirm:active:not(:disabled), .first-listen-again:active, .first-listen-suggestion:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.first-listen-clear:active, .first-listen-input-clear:active { transform: translateY(0) scale(0.97); }

.first-listen-auth-button-icon { width: 1.05em; height: 1.05em; flex: none; fill: currentColor; }
.first-listen-auth-notice { color: #7d7586; }
.first-listen-auth-notice a { color: #2a2232; text-underline-offset: 2px; }

.first-listen-leaderboard { display: grid; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; text-align: left; }
.first-listen-ranking-item { display: grid; grid-template-columns: 1.4rem 38px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem; background: rgba(255, 255, 255, 0.45); border-radius: 14px; }
.first-listen-rank { color: #857c91; font-family: 'DrukTextWideCyr', sans-serif; font-size: 0.78rem; text-align: center; }
.first-listen-ranking-copy { min-width: 0; }
.first-listen-ranking-copy strong { display: block; font-family: 'DrukTextWideCyr', sans-serif; font-size: 0.74rem; }
.first-listen-ranking-details { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-width: 0; }
.first-listen-ranking-artist { min-width: 0; overflow: hidden; color: #746c7e; font-family: 'Affect', sans-serif; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.first-listen-ranking-votes { flex: 0 0 auto; margin-left: auto; color: #746c7e; font-family: 'Affect', sans-serif; font-size: 0.8rem; white-space: nowrap; }
.first-listen-ranking-copy i { display: block; width: 100%; height: 4px; margin-top: 0.3rem; overflow: hidden; background: rgba(45, 37, 56, 0.12); border-radius: 999px; }
.first-listen-ranking-copy b { display: block; height: 100%; background: linear-gradient(90deg, #17121d, #8f839d); border-radius: inherit; transition: width 0.6s ease; }
.first-listen-ranking-item em { color: #4c4355; font-family: 'DrukTextWideCyr', sans-serif; font-size: 0.68rem; font-style: normal; white-space: nowrap; }
.first-listen-empty { padding: 1rem; color: #716979; background: rgba(255, 255, 255, 0.42); border-radius: 14px; font-family: 'Affect', sans-serif; text-align: center; }

@media (max-width: 600px) {
    .first-listen-panel { min-height: 0; border-radius: 0 0 20px 20px; }
    .first-listen-screen { min-height: 0; padding: 2rem 1.1rem; }
    .first-listen-ranking-item { box-sizing: border-box; grid-template-columns: 1.2rem 34px minmax(0, 1fr) auto; gap: 0.5rem; height: 66px; overflow: hidden; }
    .first-listen-ranking-copy { overflow: hidden; }
    .first-listen-ranking-copy strong { overflow: hidden; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .first-listen-ranking-details { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 0.5rem; line-height: 1.2; }
    .first-listen-ranking-artist { display: block; }
    .first-listen-ranking-votes { display: block; }
    .first-listen-suggestion img, .first-listen-selection-cover, .first-listen-ranking-cover { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .first-listen-confirm:active:not(:disabled), .first-listen-again:active, .first-listen-suggestion:active, .first-listen-clear:active, .first-listen-input-clear:active { transform: none; }
}

/* ---- inlined: quiz/quiz-base.css ---- */
/* ============================================
   QUIZ BASE STYLES
   Основные контейнеры, wrapper, header
   Отступы секции — в section-spacing.css (единый источник).
   ============================================ */

.quiz-wrapper {
    max-width: 700px;
    margin: 0 auto;
    border-radius: 28px;
    padding: 1.75rem 1.75rem 2.5rem;
    position: relative;
    overflow: visible;
    /* Фиолетовый градиент */
    background: linear-gradient(135deg,
        rgba(120, 40, 200, 0.85) 0%,
        rgba(80, 20, 160, 0.9) 35%,
        rgba(50, 10, 120, 0.95) 65%,
        rgba(20, 5, 80, 1) 100%
    );
    border: 1px solid rgba(180, 100, 255, 0.25);
    box-shadow:
        0 0 60px rgba(120, 40, 200, 0.35),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(120, 40, 200, 0.1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.quiz-wrapper:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 160, 255, 0.45);
    box-shadow:
        0 0 68px rgba(120, 40, 200, 0.42),
        0 28px 72px rgba(0, 0, 0, 0.56),
        inset 0 0 44px rgba(120, 40, 200, 0.14);
}

/* Декоративные блики — внутри отдельного слоя чтобы не обрезать свечение дочерних элементов */
.quiz-wrapper-inner-bg {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.quiz-wrapper-inner-bg::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 80, 255, 0.3) 0%, transparent 70%);
}

.quiz-wrapper-inner-bg::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 20, 200, 0.4) 0%, transparent 70%);
}

/* Убираем старые псевдоэлементы с враппера */
.quiz-wrapper::before,
.quiz-wrapper::after {
    display: none;
}

/* Header */
.quiz-header {
    max-width: var(--interactive-content-width);
    text-align: center;
    margin: 0 auto var(--interactive-content-gap);
    position: relative;
    z-index: 1;
}

.quiz-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: var(--interactive-title-size);
    color: #fff;
    max-width: 15ch;
    margin: 0 auto;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 20px rgba(180, 80, 255, 0.5);
    line-height: 1.03;
    text-transform: uppercase;
}

.quiz-subtitle {
    max-width: 44ch;
    font-family: 'Affect', sans-serif;
    font-size: var(--interactive-copy-size);
    color: rgba(255, 255, 255, 0.5);
    margin: var(--interactive-header-gap) auto 0;
    letter-spacing: 0.02em;
    line-height: 1.45;
}

/* На экране авторизации заголовок ивента подменяется заголовком входа */
.quiz-header--auth {
    display: none;
}

.quiz-wrapper.is-auth-view .quiz-header--event {
    display: none;
}

.quiz-wrapper.is-auth-view .quiz-header--auth {
    display: block;
}

.quiz-header--auth .quiz-title {
    max-width: 22ch;
}


/* Action Button */
.quiz-action-btn {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: var(--interactive-action-size);
    letter-spacing: 0.05em;
    color: #0a0a0a;
    background: linear-gradient(135deg, #d4a0ff, #a855f7);
    border: none;
    border-radius: 50px;
    padding: var(--interactive-action-padding);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.4);
    margin-top: 0.25rem;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.quiz-action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #e0b0ff, #c084fc);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.55);
}

.quiz-action-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.quiz-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Quiz Top Button */
.quiz-top-btn {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: rgba(212, 160, 255, 0.9);
    background: rgba(168, 85, 247, 0.12);
    border: 2px solid rgba(168, 85, 247, 0.35);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.quiz-top-btn:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.7);
    color: #d4a0ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
}

.quiz-top-btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-action-btn:active:not(:disabled),
    .quiz-top-btn:active {
        transform: none;
    }
}

/* ---- inlined: quiz/quiz-screens.css ---- */
/* ============================================
   QUIZ SCREENS
   Контейнер экранов, анимации переходов, стартовый экран
   ============================================ */

.quiz-screens {
    position: relative;
    z-index: 1;
}

/* Все экраны имеют отступ снизу для свечения */
.quiz-start-screen,
.quiz-auth-screen,
.quiz-game-screen,
.quiz-result-screen {
    padding-bottom: 20px;
}

.quiz-screen {
    width: 100%;
}

/* ============================================
   START SCREEN
   ============================================ */

.quiz-start-screen {
    max-width: var(--interactive-control-width);
    margin: 0 auto;
    text-align: center;
}

.quiz-start-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: var(--interactive-content-gap);
}

/* Rounds Selection */
.quiz-rounds-select {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.quiz-rounds-label {
    display: block;
    font-family: 'Affect', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.quiz-rounds-btns {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}

.quiz-round-btn {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 70px;
}

/* 5 раундов — зелёный */
.quiz-round-btn[data-rounds="5"] {
    border-color: rgba(80, 220, 120, 0.25);
    color: rgba(127, 255, 170, 0.7);
}
.quiz-round-btn[data-rounds="5"]:hover {
    background: rgba(80, 220, 120, 0.15);
    border-color: rgba(80, 220, 120, 0.6);
    color: #7fffaa;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(80, 220, 120, 0.25);
}
.quiz-round-btn[data-rounds="5"].selected {
    background: rgba(80, 220, 120, 0.2);
    border-color: rgba(80, 220, 120, 0.8);
    color: #7fffaa;
    box-shadow: 0 0 20px rgba(80, 220, 120, 0.4);
}

/* 10 раундов — жёлтый */
.quiz-round-btn[data-rounds="10"] {
    border-color: rgba(255, 200, 50, 0.25);
    color: rgba(255, 217, 125, 0.7);
}
.quiz-round-btn[data-rounds="10"]:hover {
    background: rgba(255, 200, 50, 0.15);
    border-color: rgba(255, 200, 50, 0.6);
    color: #ffd97d;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(255, 200, 50, 0.25);
}
.quiz-round-btn[data-rounds="10"].selected {
    background: rgba(255, 200, 50, 0.2);
    border-color: rgba(255, 200, 50, 0.8);
    color: #ffd97d;
    box-shadow: 0 0 20px rgba(255, 200, 50, 0.4);
}

/* 15 раундов — красный */
.quiz-round-btn[data-rounds="15"] {
    border-color: rgba(255, 80, 80, 0.25);
    color: rgba(255, 150, 150, 0.7);
}
.quiz-round-btn[data-rounds="15"]:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: rgba(255, 80, 80, 0.6);
    color: #ff9696;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(255, 80, 80, 0.25);
}
.quiz-round-btn[data-rounds="15"].selected {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.8);
    color: #ff9696;
    box-shadow: 0 0 20px rgba(255, 80, 80, 0.4);
    position: relative;
    z-index: 1;
}

.quiz-round-btn[data-rounds]:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

/* Кнопки на стартовом экране — в ряд по центру */
.quiz-start-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0;
}

.quiz-start-actions .quiz-action-btn,
.quiz-start-actions .quiz-top-btn {
    margin-top: 0;
}

/* ============================================
   AUTH SCREEN
   ============================================ */

.quiz-auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--interactive-control-width);
    margin: 0 auto;
    padding-top: 0.25rem;
    text-align: center;
}

.quiz-auth-screen .event-auth-actions {
    margin-top: 0.25rem;
}

.quiz-auth-screen[hidden] {
    display: none;
}

.quiz-auth-button[aria-disabled="true"] {
    opacity: 0.88;
}

.quiz-auth-button-icon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    fill: currentColor;
}

.quiz-auth-back {
    color: rgba(255, 255, 255, 0.62);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.quiz-auth-back:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.quiz-auth-back:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.quiz-auth-notice {
    color: rgba(255, 255, 255, 0.55);
}

.quiz-auth-notice a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .quiz-round-btn[data-rounds]:active,
    .quiz-auth-back:active {
        transform: none;
    }

    .quiz-auth-back {
        transition: none;
    }
}

@media (max-width: 600px) {
    .quiz-auth-screen {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* ---- inlined: quiz/quiz-game.css ---- */
/* ============================================
   QUIZ GAME SCREEN
   Progress bar, round info, punch block, attempts, options, feedback
   ============================================ */

/* Progress Bar */
.quiz-progress-bar-wrap {
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.quiz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #d4a0ff);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

/* Round Info */
.quiz-round-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.quiz-round-info span {
    font-family: 'Affect', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.05em;
}

#quiz-score-label {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1rem;
    color: rgba(212, 160, 255, 0.9);
}

/* Punch Block */
.quiz-punch-block {
    position: relative;
    text-align: center;
    padding: 0.75rem 1rem 0.5rem;
    margin-bottom: 0.75rem;
}

.quiz-punch-quotes {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 2.5rem;
    color: rgba(180, 80, 255, 0.35);
    line-height: 0.5;
    display: block;
    user-select: none;
    text-align: left;
}

.quiz-punch-quotes--close {
    text-align: right;
    margin-top: 0.15rem;
}

.quiz-punch-line {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    color: #fff;
    line-height: 1.25;
    margin: 0.15rem 0;
    text-shadow: 0 2px 20px rgba(180, 80, 255, 0.4);
    letter-spacing: 0.02em;
}

/* Attempts */
.quiz-attempts-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.quiz-attempt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
}

.quiz-attempt-dot--active {
    background: rgba(212, 160, 255, 0.8);
    border-color: rgba(212, 160, 255, 0.8);
    box-shadow: 0 0 8px rgba(212, 160, 255, 0.5);
}

.quiz-attempt-dot--used {
    background: rgba(255, 100, 100, 0.5);
    border-color: rgba(255, 100, 100, 0.5);
}

/* Options */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.quiz-option:hover:not(:disabled) {
    background: rgba(180, 80, 255, 0.15);
    border-color: rgba(180, 80, 255, 0.4);
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}

.quiz-option:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option-cover {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
}

.quiz-option-info {
    flex: 1;
    min-width: 0;
}

.quiz-option-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 0.15rem;
}

.quiz-option-artist {
    font-family: 'Affect', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Option states */
.quiz-option--correct {
    background: rgba(80, 220, 120, 0.2) !important;
    border-color: rgba(80, 220, 120, 0.6) !important;
    transform: none !important;
}

.quiz-option--correct .quiz-option-title {
    color: #7fffaa;
}

.quiz-option--wrong {
    background: rgba(255, 80, 80, 0.15) !important;
    border-color: rgba(255, 80, 80, 0.4) !important;
    transform: none !important;
}

.quiz-option--wrong .quiz-option-title {
    color: rgba(255, 150, 150, 0.9);
}

.quiz-option--dimmed {
    opacity: 0.35;
}

/* Feedback overlay — поверх всего quiz-wrapper */
.quiz-feedback-overlay {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 20;
    background: rgba(8, 3, 22, 0.96);
}

.quiz-feedback-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.quiz-feedback-text {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    color: #fff;
    text-align: center;
    letter-spacing: 0.03em;
    line-height: 1.2;
    padding: 0 2rem;
    text-shadow: 0 2px 20px rgba(180, 80, 255, 0.5);
}

.quiz-feedback-overlay.feedback-correct .quiz-feedback-text {
    color: #7fffaa;
    text-shadow: 0 2px 30px rgba(80, 220, 120, 0.6);
}

.quiz-feedback-overlay.feedback-second .quiz-feedback-text {
    color: #ffd97d;
    text-shadow: 0 2px 30px rgba(255, 200, 50, 0.5);
}

.quiz-feedback-overlay.feedback-wrong .quiz-feedback-text {
    color: #ff9696;
    text-shadow: 0 2px 30px rgba(255, 80, 80, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .quiz-option:active:not(:disabled) {
        transform: none;
    }
}

/* ---- inlined: quiz/quiz-result.css ---- */
/* ============================================
   QUIZ RESULT SCREEN
   Результаты, статистика, кнопки
   ============================================ */

.quiz-result-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.quiz-result-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding-bottom: 0.5rem;
}

.quiz-result-score-wrap {
    text-align: left;
    min-width: 0;
}

.quiz-result-score-label {
    display: block;
    font-family: 'Affect', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.quiz-result-score-row {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.quiz-result-score {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, #d4a0ff 60%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 0;
}

.quiz-result-score-max {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.35);
    align-self: flex-end;
    padding-bottom: 0.2rem;
    white-space: nowrap;
}

.quiz-result-phrase {
    font-family: 'Affect', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin: 0;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.quiz-result-stats {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quiz-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.15rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.5rem 0.5rem;
    flex: 1;
    min-width: 60px;
}

.quiz-stat-item--correct {
    background: rgba(80, 220, 120, 0.1);
    border-color: rgba(80, 220, 120, 0.3);
}

.quiz-stat-item--correct .quiz-stat-num {
    color: #7fffaa;
}

.quiz-stat-item--second {
    background: rgba(255, 200, 50, 0.1);
    border-color: rgba(255, 200, 50, 0.3);
}

.quiz-stat-item--second .quiz-stat-num {
    color: #ffd97d;
}

.quiz-stat-item--wrong {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.3);
}

.quiz-stat-item--wrong .quiz-stat-num {
    color: #ff9696;
}

.quiz-stat-num {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1.4rem;
    color: #d4a0ff;
    line-height: 1;
    display: block;
    width: 100%;
    text-align: center;
}

.quiz-stat-lbl {
    font-family: 'Affect', sans-serif;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    line-height: 1.3;
    display: block;
    width: 100%;
}

.quiz-restart-btn {
    width: 100%;
    text-align: center;
    margin-top: 0.25rem;
}

.quiz-result-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Кнопки на экране результата — в ряд */
.quiz-result-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.quiz-result-actions .quiz-action-btn,
.quiz-result-actions .quiz-top-btn {
    margin-top: 0;
}

/* Mobile result */
@media (max-width: 600px) {
    .quiz-result-layout {
        grid-template-columns: 1fr;
    }
}

/* ---- inlined: quiz/quiz-leaderboard.css ---- */
/* ============================================
   QUIZ LEADERBOARD
   Таблица лидеров, табы, строки, toast-уведомления
   ============================================ */

.quiz-leaderboard {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 0.85rem;
    opacity: 0;
    animation: quiz-lb-fadein 0.4s ease 0.2s both;
    overflow: hidden;
    min-width: 0;
}

.quiz-leaderboard--ready {
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-leaderboard-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}

/* Tabs */
.quiz-lb-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quiz-lb-tabs::-webkit-scrollbar {
    display: none;
}

.quiz-lb-tab {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    white-space: nowrap;
    min-width: fit-content;
}

.quiz-lb-tab:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.quiz-lb-tab.active {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #d4a0ff;
}

.quiz-lb-tab:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.08s;
}

.quiz-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

/* Анимации */
@keyframes quiz-lb-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quiz-lb-fadeout {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@keyframes quiz-lb-row-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.quiz-leaderboard-list--animating {
    animation: quiz-lb-fadein 0.28s ease both;
    will-change: opacity, transform;
}

.quiz-leaderboard-list--leaving {
    animation: quiz-lb-fadeout 0.18s ease both;
    pointer-events: none;
    will-change: opacity, transform;
}

.quiz-lb-row {
    opacity: 0;
    animation: quiz-lb-row-in 0.35s ease both;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
    min-width: 0;
    overflow: hidden;
}

.quiz-lb-row--me {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
    position: relative;
    z-index: 1;
}

.quiz-lb-row--separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.2rem 0;
    border: none;
    padding: 0;
    animation: quiz-lb-fadein 0.3s ease both;
    transform: none;
}

.quiz-lb-rank {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.quiz-lb-row--me .quiz-lb-rank {
    color: #d4a0ff;
}

.quiz-lb-score {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1rem;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-lb-row--me .quiz-lb-score {
    color: #d4a0ff;
}

.quiz-lb-meta {
    font-family: 'Affect', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.quiz-lb-row--me .quiz-lb-meta {
    color: rgba(212, 160, 255, 0.7);
}

/* Кнопка удаления записи (только для админа) */
.quiz-lb-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 80, 80, 0.3);
    background: rgba(255, 80, 80, 0.08);
    color: rgba(255, 100, 100, 0.6);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 0.25rem;
}

.quiz-lb-delete-btn:hover {
    background: rgba(255, 80, 80, 0.25);
    border-color: rgba(255, 80, 80, 0.7);
    color: #ff6464;
    transform: scale(1.15);
}

/* Toast-уведомления об удалении (стек) */
.quiz-lb-toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10100;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.6rem;
    align-items: center;
    pointer-events: none;
}

.quiz-lb-toast {
    background: rgba(18, 10, 30, 0.96);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 16px;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 280px;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.15);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    position: relative;
}

.quiz-lb-toast--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.quiz-lb-toast--hiding {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.quiz-lb-toast-body {
    flex: 1;
    min-width: 0;
}

.quiz-lb-toast-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.85rem;
    color: #fff;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.quiz-lb-toast-sub {
    font-family: 'Affect', sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
}

.quiz-lb-toast-restore {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.78rem;
    color: #d4a0ff;
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.quiz-lb-toast-restore:hover {
    background: rgba(168, 85, 247, 0.35);
    border-color: rgba(168, 85, 247, 0.7);
    color: #fff;
}

/* Прогресс-бар таймера внутри toast */
.quiz-lb-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(90deg, #a855f7, #d4a0ff);
    width: 100%;
    transform-origin: left;
    animation: quiz-toast-progress 30s linear forwards;
}

@keyframes quiz-toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-lb-tab:active {
        transform: none;
    }

    .quiz-leaderboard,
    .quiz-leaderboard-list--animating,
    .quiz-leaderboard-list--leaving,
    .quiz-lb-row,
    .quiz-lb-row--separator {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .quiz-leaderboard--ready {
        transition: none;
    }

    .quiz-lb-toast-progress {
        animation: none;
    }
}

/* ---- inlined: quiz/quiz-top.css ---- */
/* ============================================
   QUIZ TOP SCREEN - NEW TWO COLUMN LAYOUT
   Экран топов с двухколоночным дизайном
   ============================================ */

.quiz-top-screen {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 0.5rem;
}

/* Кнопка назад */
.quiz-top-back-btn {
    font-family: 'Affect', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    transition: color 0.2s ease;
}

.quiz-top-back-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Two column layout */
.quiz-top-content {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Left column - User stats */
.quiz-top-left {
    display: flex;
    flex-direction: column;
}

.quiz-top-user-stats {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    cursor: default;
}

.quiz-top-user-stats:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.15);
}

/* Right column - Leaderboards */
.quiz-top-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    overflow: hidden;
}

/* Section titles */
.quiz-top-section-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1rem 0;
}

/* Tabs for leaderboard categories */
.quiz-top-tabs {
    display: grid;
    grid-template-columns: 0.6fr 0.6fr 0.6fr 1.2fr;
    gap: 0.5rem;
    min-width: 0;
}

.quiz-top-tab {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.quiz-top-tab:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: rgba(255, 255, 255, 0.8);
}

.quiz-top-tab.active {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #d4a0ff;
}

/* Leaderboard wrapper with smooth height transitions */
.quiz-top-leaderboard-wrap {
    position: relative;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

/* Leaderboard list */
.quiz-top-lb-list {
    min-width: 0;
    overflow-x: hidden;
}

.quiz-top-lb-list.fading .quiz-lb-row,
.quiz-top-lb-list.fading .quiz-top-track-row,
.quiz-top-lb-list.fading .quiz-top-empty {
    animation: quiz-lb-row-out 0.3s ease forwards !important;
}

@keyframes quiz-lb-row-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}
.quiz-top-records-block,
.quiz-top-totals-block,
.quiz-top-tracks-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quiz-top-records-title,
.quiz-top-totals-title,
.quiz-top-tracks-title {
    font-family: 'Affect', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* Мои рекорды */
.quiz-top-records {
    display: flex;
    gap: 0.6rem;
}

.quiz-top-record-item {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.6rem 0.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.quiz-top-record-rounds {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1;
}

.quiz-top-record-score {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1;
}

.quiz-top-record-score--set {
    color: #d4a0ff;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}

.quiz-top-record-label {
    font-family: 'Affect', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
}

/* Суммарная статистика */
.quiz-top-totals {
    display: flex;
    gap: 0.6rem;
}

.quiz-top-total-item {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.55rem 0.4rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.quiz-top-total--correct { border-color: rgba(80, 220, 120, 0.2); }
.quiz-top-total--second  { border-color: rgba(255, 200, 50, 0.2); }
.quiz-top-total--wrong   { border-color: rgba(255, 80, 80, 0.2); }

.quiz-top-total-num {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 1.3rem;
    line-height: 1;
}

.quiz-top-total--correct .quiz-top-total-num { color: #7fffaa; }
.quiz-top-total--second  .quiz-top-total-num { color: #ffd97d; }
.quiz-top-total--wrong   .quiz-top-total-num { color: #ff9696; }

.quiz-top-total-lbl {
    font-family: 'Affect', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* Leaderboard list */
.quiz-top-lb-list {
    transition: opacity 0.25s ease;
    min-width: 0;
    overflow-x: hidden;
}

.quiz-top-lb-list.fading {
    opacity: 0.3;
    pointer-events: none;
}

/* User stats blocks */
.quiz-top-track-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.quiz-top-track-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    animation: quiz-track-row-in 0.35s ease both;
}

@keyframes quiz-track-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quiz-top-track-rank {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    min-width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.quiz-top-track-cover {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.quiz-top-track-info {
    flex: 1;
    min-width: 0;
}

.quiz-top-track-title {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.78rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.quiz-top-track-artist {
    font-family: 'Affect', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.quiz-top-track-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    flex-shrink: 0;
}

.quiz-top-track-ms {
    font-family: 'DrukTextWideCyr', sans-serif;
    font-size: 0.8rem;
    color: #d4a0ff;
    letter-spacing: 0.02em;
    line-height: 1;
}

.quiz-top-track-attempts {
    font-family: 'Affect', sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.quiz-top-loading,
.quiz-top-empty {
    font-family: 'Affect', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    padding: 1.25rem 0;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: quiz-lb-row-in 0.35s ease 0.1s both;
}

/* Responsive */
@media (max-width: 1024px) {
    .quiz-top-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .quiz-top-left {
        order: 2;
    }

    .quiz-top-right {
        order: 1;
    }
}

@media (max-width: 768px) {
    .quiz-top-records,
    .quiz-top-totals {
        flex-direction: column;
    }

    .quiz-top-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quiz-top-tab {
        font-size: 0.65rem;
        padding: 0.5rem 0.3rem;
    }
}

/* ---- inlined: quiz/quiz-responsive.css ---- */
/* ============================================
   QUIZ RESPONSIVE STYLES
   Мобильные и адаптивные стили
   ============================================ */

/* Mobile */
@media (max-width: 768px) {
    .quiz-wrapper {
        padding: 2rem 1.1rem;
        border-radius: 20px;
    }

    .quiz-rounds-select {
        text-align: center;
    }

    .quiz-rounds-btns {
        gap: 0.5rem;
        justify-content: center;
    }

    .quiz-round-btn {
        font-size: 1.2rem;
        padding: 0.5rem 1.1rem;
        min-width: 60px;
    }

    .quiz-option {
        padding: 0.75rem 0.85rem;
        gap: 0.75rem;
    }

    .quiz-option-cover {
        width: 44px;
        height: 44px;
    }

    .quiz-result-stats {
        gap: 0.6rem;
    }

    .quiz-stat-item {
        padding: 0.6rem 0.9rem;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .quiz-punch-line {
        font-size: clamp(1.1rem, 5vw, 1.5rem);
    }

    .quiz-result-stats {
        flex-direction: row;
        justify-content: center;
    }

    .quiz-top-records,
    .quiz-top-totals {
        gap: 0.5rem;
    }
    
    .quiz-top-record-item,
    .quiz-top-total-item {
        padding: 0.6rem 0.35rem;
    }
    
    .quiz-top-total-num {
        font-size: 1.25rem;
    }
    
    .quiz-top-record-rounds {
        font-size: 1.3rem;
    }
}

/* На узких экранах — табы 2×2 */
@media (max-width: 420px) {
    .quiz-top-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .quiz-top-tab {
        font-size: 0.78rem;
        padding: 0.45rem 0.5rem;
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
        line-height: 1.2;
    }
}

/* ---- inlined: ai-widget.css ---- */
/* ============================================
   AI ASSISTANT WIDGET (home page)
   ============================================ */

.ai-widget {
    position: fixed;
    inset: 0;
    /* Выше точек навигации (1000), ниже модалок (9000). */
    z-index: 1100;
    pointer-events: none;
}

.ai-widget[hidden],
.ai-widget__panel[hidden] {
    display: none;
}

/* ---------- scroll lock (mobile fullscreen) ---------- */

html.ai-widget-lock,
html.ai-widget-lock body {
    overflow: hidden;
}

/* ---------- floating action button ---------- */

.ai-widget__fab {
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background:
        linear-gradient(
            140deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.04) 55%,
            rgba(255, 255, 255, 0.12)
        ),
        rgba(15, 15, 15, 0.72);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s linear,
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s ease;
}

.ai-widget.is-visible .ai-widget__fab {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.ai-widget.is-visible .ai-widget__fab:hover {
    transform: scale(1.05);
    border-color: var(--surface-hover-border);
}

.ai-widget.is-visible .ai-widget__fab:active {
    transform: scale(0.97);
}

.ai-widget__fab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

.ai-widget.is-open .ai-widget__fab {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.6);
    pointer-events: none;
}

.ai-widget__fab-label {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.ai-widget__fab-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;
    background: #1a1a1a;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ---------- panel ---------- */

.ai-widget__panel {
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(420px, calc(100vw - 32px));
    max-height: min(72vh, 640px);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: rgba(15, 15, 15, 0.96);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.92);
    pointer-events: none;
    transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.32s linear;
}

.ai-widget.is-open .ai-widget__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ai-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.ai-widget__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ai-widget__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.ai-widget__beta {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.14rem 0.44rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    line-height: 1.2;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.ai-widget__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ai-widget__close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.ai-widget__close:hover {
    background: var(--surface-hover-background);
    border-color: var(--surface-hover-border);
    color: var(--text-primary);
}

.ai-widget__close:focus-visible,
.ai-widget__link:focus-visible,
.ai-widget__suggestion:focus-visible,
.ai-widget__copy:focus-visible,
.ai-widget__media-download:focus-visible,
.ai-widget__video-preview:focus-visible,
.ai-widget__send:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

/* ---------- dialog log ---------- */

.ai-widget__log {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    user-select: text;
    -webkit-user-select: text;
}

.ai-widget__log::-webkit-scrollbar {
    display: none;
}

.ai-widget__message {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    user-select: text;
    -webkit-user-select: text;
}

.ai-widget__message--user {
    align-items: flex-end;
}

.ai-widget__message--assistant {
    align-items: flex-start;
}

.ai-widget__message--user .ai-widget__text {
    max-width: 88%;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--surface-hover-border);
    border-radius: 16px 16px 4px 16px;
    background: var(--surface-hover-background);
}

.ai-widget__bubble {
    max-width: 92%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: 16px 16px 16px 4px;
    background: var(--glass-bg);
}

.ai-widget__text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-primary);
    user-select: text;
    -webkit-user-select: text;
}

.ai-widget__text strong {
    font-weight: 700;
    color: #ffffff;
}

.ai-widget__text--error {
    color: #ff9696;
}

.ai-widget__text + .ai-widget__text {
    margin-top: 0.5rem;
}

/* ---------- message actions ---------- */

.ai-widget__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.05rem;
    color: var(--text-secondary);
}

.ai-widget__monogram {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.ai-widget__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.45rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 0.7rem;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.ai-widget__copy:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.ai-widget__copy.is-copied {
    color: #7fffaa;
}

.ai-widget__copy-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- system note ---------- */

.ai-widget__note {
    align-self: center;
    margin: 0.1rem auto;
    padding: 0.3rem 0.7rem;
    border: 1px dashed var(--glass-border);
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--text-secondary);
    text-align: center;
}

/* ---------- links ---------- */

.ai-widget__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.ai-widget__link {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 0.76rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ai-widget__link:hover {
    background: var(--surface-hover-background);
    border-color: var(--surface-hover-border);
}

/* ---------- images ---------- */

.ai-widget__images {
    column-width: 160px;
    column-gap: 0.5rem;
    margin-top: 0.6rem;
}

.ai-widget__images--single {
    column-count: 1;
}

.ai-widget__figure {
    display: block;
    margin: 0 0 0.5rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.ai-widget__media {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.ai-widget__image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
}

.ai-widget__images--single .ai-widget__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto;
}

.ai-widget__media-download {
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #ffffff;
    font-size: 0.68rem;
    line-height: 1.2;
    text-decoration: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ai-widget__media-download:hover {
    background: rgba(0, 0, 0, 0.82);
    border-color: rgba(255, 255, 255, 0.45);
}

.ai-widget__download-icon {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) {
    .ai-widget__media:hover .ai-widget__image {
        transform: scale(1.06);
        filter: brightness(1.08);
    }

    .ai-widget__media:hover .ai-widget__media-download {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none) {
    .ai-widget__media-download {
        opacity: 1;
        transform: none;
    }
}

.ai-widget__caption {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* ---------- video (lite) ---------- */

.ai-widget__video-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: min(320px, 100%);
    margin: 0.6rem 0 0;
}

.ai-widget__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: #000000;
}

.ai-widget__video-preview {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000000;
    cursor: pointer;
}

.ai-widget__video-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.35s ease, opacity 0.25s ease;
}

.ai-widget__video-preview:hover .ai-widget__video-thumb {
    transform: scale(1.05);
    opacity: 1;
}

.ai-widget__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ai-widget__video-preview:hover .ai-widget__video-play {
    background: rgba(0, 0, 0, 0.82);
    transform: translate(-50%, -50%) scale(1.06);
}

.ai-widget__play-icon {
    width: 20px;
    height: 20px;
    margin-left: 2px;
    fill: currentColor;
    stroke: none;
}

.ai-widget__video-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.ai-widget__video-title {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* ---------- thinking ---------- */

.ai-widget__thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--glass-border);
    border-radius: 16px 16px 16px 4px;
    background: var(--glass-bg);
}

.ai-widget__thinking-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: ai-widget-dot 1.2s ease-in-out infinite;
}

.ai-widget__thinking-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.ai-widget__thinking-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ai-widget-dot {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* ---------- suggestions ---------- */

.ai-widget__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 92%;
    margin-top: 0.5rem;
}

.ai-widget__suggestion {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ai-widget__suggestion:hover {
    background: var(--surface-hover-background);
    border-color: var(--surface-hover-border);
    color: var(--text-primary);
}

/* ---------- status + composer ---------- */

.ai-widget__status {
    margin: 0;
    padding: 0 1rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: #ff9a9f;
}

.ai-widget__status:empty {
    display: none;
}

.ai-widget__form {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    padding: 0.6rem;
    background: rgba(15, 15, 15, 0.96);
}

.ai-widget__composer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.3rem 0.32rem 0.3rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-widget__disclaimer {
    margin: 0.4rem 0.35rem 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

.ai-widget__composer:focus-within {
    border-color: var(--surface-hover-border);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

.ai-widget__input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 2.5em;
    max-height: 120px;
    padding: 0.4rem 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 0.86rem;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    outline: none;
    cursor: text;
    caret-color: var(--text-primary);
    user-select: text;
    -webkit-user-select: text;
    -webkit-user-modify: read-write;
}

.ai-widget__input::selection,
.ai-widget__message ::selection,
.ai-widget__text::selection {
    background: rgba(255, 255, 255, 0.28);
    color: var(--text-primary);
}

.ai-widget__input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

/* iOS Safari сам зумит страницу при фокусе на input/textarea с computed
   font-size меньше 16px — это жёсткий порог Mobile Safari, через JS не
   отменяется. На тач-устройствах и узких экранах держим 16px: зум не
   срабатывает и вёрстка не съезжает; на десктопе остаётся компактный размер. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    .ai-widget__input {
        font-size: 16px;
    }
}

.ai-widget__send {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.ai-widget__send svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ai-widget__send .ai-widget__stop-icon {
    display: none;
}

.ai-widget__send.is-busy .ai-widget__send-icon {
    display: none;
}

.ai-widget__send.is-busy .ai-widget__stop-icon {
    display: block;
}

.ai-widget__send:hover:not(.is-cooldown) {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
}

.ai-widget__send.is-busy {
    border-color: rgba(255, 120, 120, 0.6);
    background: rgba(255, 90, 90, 0.18);
}

.ai-widget__send.is-busy:hover {
    background: rgba(255, 90, 90, 0.3);
    border-color: rgba(255, 140, 140, 0.8);
}

.ai-widget__send.is-cooldown {
    cursor: default;
    opacity: 0.85;
}

.ai-widget__send.is-cooldown::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        rgba(255, 255, 255, 0.75) calc(var(--cooldown-progress, 0) * 360deg),
        rgba(255, 255, 255, 0.1) 0
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}

.ai-widget__send[aria-disabled="true"]:not(.is-busy) {
    cursor: default;
}

.ai-widget__visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- mobile: fullscreen modal ---------- */

@media (max-width: 768px) {
    .ai-widget__fab {
        right: max(20px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
    }

    .ai-widget__panel {
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        opacity: 1;
        transform: translateY(100%);
    }

    .ai-widget.is-open .ai-widget__panel {
        opacity: 1;
        transform: translateY(0);
    }

    .ai-widget__form {
        padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .ai-widget__images {
        column-width: 132px;
    }

    .ai-widget__media-download {
        padding: 0.32rem;
        border-radius: 50%;
    }

    .ai-widget__media-download-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ai-widget,
    .ai-widget__fab,
    .ai-widget__fab-badge,
    .ai-widget__panel,
    .ai-widget__close,
    .ai-widget__link,
    .ai-widget__suggestion,
    .ai-widget__copy,
    .ai-widget__composer,
    .ai-widget__media-download,
    .ai-widget__image,
    .ai-widget__video-thumb,
    .ai-widget__video-play,
    .ai-widget__send {
        transition: none;
    }

    .ai-widget__thinking-dot {
        animation: none;
        opacity: 1;
    }

    .ai-widget__media:hover .ai-widget__image {
        transform: none;
    }

    .ai-widget__video-preview:hover .ai-widget__video-thumb {
        transform: none;
    }

    .ai-widget__video-preview:hover .ai-widget__video-play {
        transform: translate(-50%, -50%);
    }
}