:root {
    color-scheme: dark;

    /* ======================================================
       OVS DESIGN TOKENS
       Dark jest kanonicznym profilem referencyjnym.
       ====================================================== */

    /* page */
    --ovs-page-bg: #090b0e;

    --ovs-page-glow:
        rgba(37, 244, 238, .08);

    --ovs-page-ambient-left:
        transparent;

    --ovs-page-ambient-right:
        transparent;

    --ovs-page-ambient-center:
        transparent;

    /* surfaces */
    --ovs-surface-1: #11151a;
    --ovs-surface-2: #171c22;
    --ovs-surface-3: #0d1115;
    --ovs-surface-deep: #0a0e12;
    --ovs-surface-special: #0b0e12;
    --ovs-surface-input: #0c1014;
    --ovs-surface-control: #151a20;
    --ovs-surface-control-hover: #1a2026;

    /* borders */
    --ovs-border: #252c34;
    --ovs-border-strong: #303944;

    /* typography */
    --ovs-text-primary: #f5f7f9;
    --ovs-text-secondary: #e9edf1;
    --ovs-text-muted: #8f99a5;
    --ovs-text-subtle: #7c8792;

    /* brand / semantic */
    --ovs-accent: #25f4ee;
    --ovs-accent-2: #fe2c55;

    --ovs-success: #39d98a;
    --ovs-warning: #ffc857;
    --ovs-danger: #ff5c6c;
    --ovs-danger-strong: #ef4444;

    /* controls */

    --ovs-text-on-accent: #051011;

    --ovs-live-button-accent-deep: #d91846;
    --ovs-live-button-stop-bg: #242a31;
    --ovs-live-button-stop-border: #3a424c;

    --ovs-status-off: #59616b;

    --ovs-live-button-text: #ffffff;
    --ovs-live-button-stop-text: #ffffff;

    --ovs-ticker-bg:
        rgba(15, 19, 24, .88);

    --ovs-ticker-hover-bg:
        rgba(20, 27, 33, .96);

    --ovs-row-divider:
        rgba(37, 44, 52, .70);

    /* comment */
    --ovs-comment-action-bg: #131a1f;
    --ovs-comment-action-hover-bg: #172126;

    /* phone preview */
    --ovs-phone-bg: #090c10;
    --ovs-phone-frame-border: #303944;
    --ovs-phone-screen-bg: #050607;
    --ovs-phone-screen-glow: #080b0e;

    /* soundpad */

    --ovs-soundpad-master-border: #242c34;
    --ovs-soundpad-volume-border: #252c34;

    --ovs-soundpad-pad-bg: #101419;
    --ovs-soundpad-pad-border: #262e37;

    --ovs-soundpad-pad-assigned-bg: #171c22;
    --ovs-soundpad-pad-assigned-border: #37424d;

    --ovs-soundpad-key-bg: #343b44;
    --ovs-soundpad-key-border: #343d47;
    --ovs-soundpad-key-text: #9aa5b1;

    --ovs-soundpad-label: #737e8a;
    --ovs-soundpad-label-assigned: #e7ebef;

    --ovs-soundpad-edit: #5e6874;

    --ovs-soundpad-editor-border: #252c34;

    --ovs-soundpad-muted: #5f6975;

    --ovs-soundpad-danger-text: #ff8793;

    /* speech */

    --ovs-speech-code-border: #303944;

    --ovs-speech-toggle-bg: #171c22;
    --ovs-speech-toggle-border: #343d47;
    --ovs-speech-toggle-off: #68727e;

    --ovs-speech-control-text: #d8dde2;

    --ovs-speech-runtime-bg: #14191f;
    --ovs-speech-runtime-muted: #8f9aa6;
    --ovs-speech-last-muted: #69737e;

    --ovs-speech-status-off: #555e68;

    --ovs-speech-input-border: #303944;

    /* modal shell */
    --ovs-modal-backdrop:
        rgba(0, 0, 0, .72);

    --ovs-modal-shell-bg: #0d1115;
    --ovs-modal-shell-border: #2b343e;
    --ovs-modal-surface: #0a0e12;

    --ovs-modal-loading-bg: #12171c;
    --ovs-modal-input-bg: #090d11;
    --ovs-modal-select-bg: #0d1217;
    --ovs-modal-table-head-bg: #0f1419;

    --ovs-modal-hover-border: #44505d;

    --ovs-modal-divider:
        rgba(37, 44, 52, .70);

    --ovs-modal-divider-soft:
        rgba(37, 44, 52, .65);

    --ovs-modal-soft-fill:
        rgba(255, 255, 255, .018);

    --ovs-modal-soft-fill-2:
        rgba(255, 255, 255, .025);

    --ovs-modal-kpi-fill-a:
        rgba(255, 255, 255, .028);

    --ovs-modal-kpi-fill-b:
        rgba(255, 255, 255, .012);

    --ovs-event-favorite-text: #f0d58a;

    /* audience */
    --ovs-audience-trigger-bg:
        rgba(15, 19, 24, .88);

    --ovs-audience-trigger-hover-bg:
        rgba(20, 27, 33, .96);

    --ovs-audience-surface: #0a0e12;
    --ovs-audience-kpi-subtle: #66717d;
    --ovs-audience-progress-bg: #161c22;
    --ovs-audience-person-source: #b5bec8;

    --ovs-audience-chart-grid:
        rgba(143, 153, 165, .12);

    /* viewer */
    --ovs-viewer-surface: #0a0e12;
    --ovs-viewer-subtle: #7c8792;
    --ovs-viewer-comment-text: #e9edf1;
    --ovs-viewer-action-bg: #0f1419;

    /* badge semantic colors */
    --ovs-badge-grade-border:
        rgba(250, 204, 21, .42);

    --ovs-badge-fan-border:
        rgba(59, 130, 246, .45);

    --ovs-badge-superfan-border:
        rgba(168, 85, 247, .55);

    --ovs-badge-moderator-border:
        rgba(37, 244, 238, .55);

    /* layout */
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

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

body {
    background:
        radial-gradient(
            ellipse at 0% 52%,
            var(--ovs-page-ambient-left),
            transparent 42rem
        ),
        radial-gradient(
            ellipse at 100% 52%,
            var(--ovs-page-ambient-right),
            transparent 42rem
        ),
        radial-gradient(
            ellipse at 50% 45%,
            var(--ovs-page-ambient-center),
            transparent 48rem
        ),
        radial-gradient(
            circle at 15% 0%,
            var(--ovs-page-glow),
            transparent 32rem
        ),
        var(--ovs-page-bg);

    color: var(--ovs-text-primary);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.hidden {
    display: none !important;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 24px;

    border-bottom: 1px solid var(--ovs-border);

    background: var(--ovs-surface-3);
}

.topbar-left {
    width: calc(50% - 130px);
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 26px;
}

.topbar-brand {
    flex: 0 0 auto;
}

.live-event-ticker {
    min-width: 0;
    height: 36px;

    flex: 1 1 auto;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        0
        11px;

    border: 1px solid var(--ovs-border);
    border-radius: 10px;

    overflow: hidden;

    background:
        var(--ovs-ticker-bg);
}

.live-event-ticker-code {
    flex: 0 0 auto;

    min-width: 34px;

    color: var(--ovs-accent);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: center;
}

.live-event-ticker-text {
    min-width: 0;

    overflow: hidden;

    color: var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-event-ticker[data-kind="gift"] {
    border-color:
        rgba(
            57,
            217,
            138,
            .28
        );
}

.live-event-ticker[data-kind="gift"]
.live-event-ticker-code {
    color: var(--ovs-success);
}

.live-event-ticker[data-kind="envelope"] {
    border-color:
        rgba(
            255,
            200,
            87,
            .32
        );
}

.live-event-ticker[data-kind="envelope"]
.live-event-ticker-code {
    color: var(--ovs-warning);
}

.live-event-ticker[data-kind="battle"] {
    border-color:
        rgba(
            254,
            44,
            85,
            .34
        );
}

.live-event-ticker[data-kind="battle"]
.live-event-ticker-code {
    color: var(--ovs-accent-2);
}

.live-event-ticker[data-kind="gift"]
.live-event-ticker-text,
.live-event-ticker[data-kind="envelope"]
.live-event-ticker-text,
.live-event-ticker[data-kind="battle"]
.live-event-ticker-text {
    color: var(--ovs-text-primary);
}


.brand {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .14em;
}

.brand-subtitle {
    margin-top: 3px;

    color: var(--ovs-text-muted);
    font-size: 12px;
}

.user-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.user-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    font-size: 14px;
}

.user-copy span {
    color: var(--ovs-text-muted);
    font-size: 11px;
}

main {
    width: min(1640px, 100%);
    margin: 0 auto;
    padding: 24px;
}

.center-card {
    min-height: calc(100vh - 124px);

    display: grid;
    place-items: center;
}

.spinner {
    width: 34px;
    height: 34px;

    border: 3px solid var(--ovs-border);
    border-top-color: var(--ovs-accent);
    border-radius: 50%;

    animation: spin .8s linear infinite;

    margin: 0 auto 14px;
}

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

.card {
    border: 1px solid var(--ovs-border);
    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .025),
            transparent 40%
        ),
        var(--ovs-surface-1);

    box-shadow:
        0 16px 44px rgba(0, 0, 0, .2);
}

.login-card {
    width: min(430px, calc(100vw - 32px));
    padding: 32px;
}

.login-card .field > label {
    display: block;
    margin-bottom: 7px;
    color: var(--ovs-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.login-password-field {
    position: relative;
}

.login-card .login-password-field input {
    padding-right: 80px;
}

.login-password-toggle {
    position: absolute;
    inset: 1px 1px 1px auto;
    min-width: 70px;
    padding: 0 10px;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent;
    color: var(--ovs-text-primary);
    cursor: pointer;
}

.login-password-toggle:focus-visible {
    outline: 2px solid var(--ovs-accent);
    outline-offset: -3px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 18px;
    font-size: 14px;
    cursor: pointer;
}

.login-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ovs-accent);
}

.card-heading {
    margin-bottom: 28px;
}

.card-heading.compact {
    margin-bottom: 20px;
}

.card-heading h1,
.card-heading h2,
.comments-header h2 {
    margin: 4px 0 0;
}

.card-heading p {
    margin: 8px 0 0;
    color: var(--ovs-text-muted);
    line-height: 1.5;
}

.eyebrow {
    color: var(--ovs-accent);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.field {
    display: block;
    margin-bottom: 18px;
}

.field > span {
    display: block;

    margin-bottom: 7px;

    color: var(--ovs-text-muted);

    font-size: 12px;
    font-weight: 700;
}

.field input {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid var(--ovs-border);
    border-radius: 11px;

    outline: none;

    background: var(--ovs-surface-input);
    color: var(--ovs-text-primary);
}

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

.input-prefix {
    display: flex;
    align-items: center;

    border: 1px solid var(--ovs-border);
    border-radius: 11px;

    background: var(--ovs-surface-input);
}

.input-prefix:focus-within {
    border-color: var(--ovs-accent);
}

.input-prefix > span {
    padding-left: 13px;
    color: var(--ovs-text-muted);
}

.input-prefix input {
    border: 0;
    background: transparent;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 18px;

    color: var(--ovs-text-muted);
    font-size: 13px;
}

.toggle-row input {
    width: 18px;
    height: 18px;
}

.button {
    min-height: 42px;

    padding: 0 16px;

    border: 1px solid transparent;
    border-radius: 11px;

    font-weight: 800;

    transition:
        transform .12s ease,
        border-color .12s ease,
        background .12s ease;
}

.button:not(:disabled):active {
    transform: translateY(1px);
}

.button-wide {
    width: 100%;
}

.button-primary {
    background: var(--ovs-accent);
    color: var(--ovs-text-on-accent);
}

.button-secondary {
    border-color: var(--ovs-border);
    background: var(--ovs-surface-2);
    color: var(--ovs-text-primary);
}

.button-ghost {
    border-color: var(--ovs-border);
    background: transparent;
    color: var(--ovs-text-muted);
}

.button-live {
    min-height: 50px;

    background:
        linear-gradient(
            135deg,
            var(--ovs-accent-2),
            var(--ovs-live-button-accent-deep)
        );

    color: var(--ovs-live-button-text);

    font-size: 14px;
    letter-spacing: .06em;
}

.button-live.stop {
    background: var(--ovs-live-button-stop-bg);
    border-color: var(--ovs-live-button-stop-border);
    color: var(--ovs-live-button-stop-text);
}

.workspace-grid {
    display: grid;

    grid-template-columns:
        minmax(290px, 350px)
        minmax(0, 1fr);

    gap: 20px;
}

.sidebar {
    display: grid;
    align-content: start;
    gap: 20px;
}

.sidebar > .card {
    padding: 22px;
}

.source-status {
    display: grid;
    gap: 10px;

    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid var(--ovs-border);
}

.status-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;

    font-size: 12px;
}

.status-row > span:first-child {
    color: var(--ovs-text-muted);
}

.status-row strong {
    max-width: 170px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-support-help {
    display: grid;
    gap: 8px;

    padding: 12px;

    border: 1px solid var(--ovs-border);
    border-radius: 11px;

    background: var(--ovs-surface-2);
}

.voice-support-help[hidden] {
    display: none;
}

.voice-support-help p {
    margin: 0;

    color: var(--ovs-text-muted);

    font-size: 12px;
    line-height: 1.45;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 24px;

    padding: 3px 9px;

    border: 1px solid var(--ovs-border);
    border-radius: 999px;

    background: var(--ovs-surface-2);

    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge[data-health="connected"] {
    border-color: rgba(57, 217, 138, .35);
    color: var(--ovs-success);
}

.badge[data-health="idle"],
.badge[data-health="starting"] {
    border-color: rgba(255, 200, 87, .35);
    color: var(--ovs-warning);
}

.badge[data-health="error"],
.badge[data-health="disconnected"],
.badge[data-health="stale"] {
    border-color: rgba(255, 92, 108, .35);
    color: var(--ovs-danger);
}

.live-state {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 52px;
}

.live-state > div:last-child {
    display: flex;
    flex-direction: column;
}

.live-state span {
    margin-top: 3px;

    color: var(--ovs-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

.live-dot {
    width: 12px;
    height: 12px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--ovs-status-off);
}

.live-dot.active {
    background: var(--ovs-success);

    box-shadow:
        0 0 0 6px rgba(57, 217, 138, .09);
}

.live-details {
    display: grid;
    gap: 8px;

    margin: 18px 0;
}

.live-details > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.live-details dt {
    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.live-details dd {
    margin: 0;

    text-align: right;
    font-size: 12px;
}

.comments-card {
    min-height: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.comments-header {
    min-height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 22px;

    border-bottom: 1px solid var(--ovs-border);
}

.comments-header h2 {
    font-size: 20px;
}

.comments-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--ovs-text-muted);

    font-size: 12px;
}

.comments-empty {
    flex: 1;

    min-height: 400px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 30px;

    text-align: center;
}

.comments-empty-icon {
    width: 70px;
    height: 70px;

    display: grid;
    place-items: center;

    margin-bottom: 16px;

    border: 1px solid var(--ovs-border);
    border-radius: 22px;

    color: var(--ovs-accent);

    font-weight: 900;
    letter-spacing: .1em;
}

.comments-empty span {
    margin-top: 6px;

    color: var(--ovs-text-muted);

    font-size: 12px;
}

.comments-list {
    flex: 1;

    overflow-y: auto;

    padding: 10px 18px 24px;
}

.comments-new {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    z-index: 4;

    min-height: 36px;

    padding: 0 15px;

    border: 1px solid rgba(37, 244, 238, .35);
    border-radius: 18px;

    background: var(--ovs-comment-action-bg);
    color: var(--ovs-accent);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .34);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.comments-new:hover {
    border-color: rgba(37, 244, 238, .7);
    background: var(--ovs-comment-action-hover-bg);
}

.comment {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    gap: 12px;

    padding: 14px 4px;

    border-bottom: 1px solid var(--ovs-row-divider);
}

.comment-avatar {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    background: var(--ovs-surface-2);
}

.comment-avatar-fallback {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--ovs-surface-2);

    color: var(--ovs-text-muted);

    font-weight: 900;
}

.comment-author {
    display: flex;
    align-items: baseline;
    gap: 7px;

    min-width: 0;
}

.comment-author strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}

.comment-author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--ovs-text-muted);
    font-size: 10px;
}

.comment-content {
    margin-top: 4px;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: var(--ovs-text-secondary);

    font-size: 15px;
    line-height: 1.45;
}

.comment-time {
    padding-top: 2px;

    color: var(--ovs-text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.notice,
.inline-error,
.form-error {
    margin-top: 14px;

    padding: 10px 12px;

    border-radius: 10px;

    font-size: 12px;
    line-height: 1.4;
}

.notice {
    border: 1px solid rgba(255, 200, 87, .25);
    background: rgba(255, 200, 87, .06);
    color: var(--ovs-warning);
}

.inline-error,
.form-error {
    border: 1px solid rgba(255, 92, 108, .25);
    background: rgba(255, 92, 108, .06);
    color: var(--ovs-danger);
}

.toast {
    position: fixed;

    right: 20px;
    bottom: 20px;

    max-width: min(420px, calc(100vw - 40px));

    padding: 13px 16px;

    border: 1px solid var(--ovs-border);
    border-radius: 12px;

    background: var(--ovs-surface-control-hover);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .35);

    font-size: 13px;

    z-index: 20;
}

@media (max-width: 850px) {
    .topbar {
        padding: 12px 16px;
    }

    .topbar-left {
        width: auto;
        flex: 1 1 auto;
    }

    .live-event-ticker {
        display: none;
    }

    main {
        padding: 14px;
    }

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

    .comments-card {
        min-height: 620px;
    }

    .user-copy {
        display: none;
    }
}

@media (max-width: 520px) {
    .brand-subtitle {
        display: none;
    }

    .comment {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 10px;
    }

    .comment-avatar,
    .comment-avatar-fallback {
        width: 38px;
        height: 38px;
    }

    .comment-time {
        grid-column: 2;
        padding: 0;
    }
}


/* ==========================================================
   OVS cockpit layout v2
   Stały viewport. Scrolluje się content, nie cała aplikacja.
   ========================================================== */

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
}

.app-shell {
    height: 100vh;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.topbar {
    flex: 0 0 auto;

    position: relative;
}

main {
    flex: 1 1 auto;

    min-height: 0;
    height: 0;

    overflow: hidden;
}

.workspace {
    height: 100%;
    min-height: 0;
}

.workspace-grid {
    height: 100%;
    min-height: 0;
}

.sidebar {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.comments-card {
    position: relative;

    height: 100%;
    min-height: 0;
}

.comments-list {
    min-height: 0;
    overscroll-behavior: contain;
}


/* ==========================================================
   Top navigation
   ========================================================== */

.top-tabs {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;

    gap: 4px;

    padding: 4px;

    border: 1px solid var(--ovs-border);
    border-radius: 12px;

    background: var(--ovs-surface-3);
}

.top-tab {
    min-width: 96px;
    height: 34px;

    padding: 0 16px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--ovs-text-muted);

    font-size: 12px;
    font-weight: 800;

    transition:
        background .15s ease,
        color .15s ease;
}

.top-tab:hover {
    color: var(--ovs-text-primary);
}

.top-tab.active {
    background: var(--ovs-surface-control-hover);
    color: var(--ovs-text-primary);

    box-shadow:
        inset 0 0 0 1px var(--ovs-border-strong);
}


/* ==========================================================
   Settings view
   ========================================================== */

.workspace.settings-mode .workspace-grid {
    grid-template-columns:
        minmax(320px, 620px);

    justify-content: center;
}

/* ==========================================================
   Desktop cockpit proportions
   ========================================================== */

@media (min-width: 851px) {
    .workspace-grid {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(0, 1fr);
    }

    .comments-card {
        min-height: 0;
    }
}


/* ==========================================================
   Mobile may scroll normally
   ========================================================== */

@media (max-width: 850px) {
    body {
        overflow: auto;
    }

    .app-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    main {
        height: auto;
        overflow: visible;
    }

    .workspace,
    .workspace-grid {
        height: auto;
    }

    .top-tabs {
        position: static;
        transform: none;

        order: 3;

        width: 100%;
        margin-top: 12px;
    }

    .topbar {
        flex-wrap: wrap;
    }

    .top-tab {
        flex: 1;
    }

    .comments-card {
        height: 620px;
        min-height: 620px;
    }
}


/* ==========================================================
   OVS Soundpad
   ========================================================== */

.soundpad-card {
    position: relative;
    overflow: hidden;

    background: var(--ovs-surface-special);
}

.soundpad-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    opacity: .6;
}

.soundpad-card > * {
    position: relative;
}

.soundpad-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 17px;
}

.soundpad-heading h2 {
    margin: 4px 0 0;

    font-size: 18px;
}

.soundpad-heading-tools {
    display: flex;
    align-items: center;
    gap: 7px;
}

.soundpad-master {
    margin:
        -3px
        0
        17px;

    padding:
        10px
        12px;

    border: 1px solid var(--ovs-soundpad-master-border);
    border-radius: 11px;

    background: rgba(255, 255, 255, .018);
}

.soundpad-volume-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 7px;

    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
}

.soundpad-volume-head strong {
    color: var(--ovs-text-primary);

    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.soundpad-volume-range {
    width: 100%;
    height: 18px;

    display: block;

    margin: 0;

    accent-color: var(--ovs-accent);

    cursor: pointer;
}

.soundpad-volume-range:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.soundpad-volume-control {
    margin-bottom: 12px;

    padding:
        10px
        11px;

    border: 1px solid var(--ovs-soundpad-volume-border);
    border-radius: 10px;

    background: var(--ovs-surface-3);
}


.soundpad-status {
    color: var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.soundpad-status[data-state="playing"] {
    color: var(--ovs-accent);
}

.soundpad-status[data-state="busy"] {
    color: var(--ovs-warning);
}

.soundpad-status[data-state="error"] {
    color: var(--ovs-danger);
}

.soundpad-stop {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 8px;

    background: var(--ovs-surface-control);
    color: var(--ovs-text-muted);

    font-size: 10px;
}

.soundpad-stop:not(:disabled):hover {
    border-color: var(--ovs-accent-2);
    color: var(--ovs-accent-2);
}

.soundpad-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.soundpad-pad {
    position: relative;

    min-width: 0;

    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 12px;

    background: var(--ovs-soundpad-pad-bg);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        inset 0 -4px 10px rgba(0, 0, 0, .28);

    transition:
        border-color .12s ease,
        transform .08s ease,
        box-shadow .12s ease;
}

.soundpad-pad[data-assigned="1"] {
    border-color: var(--ovs-soundpad-pad-assigned-border);
}

.soundpad-pad[data-active="1"] {
    border-color: rgba(37, 244, 238, .7);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -4px 10px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(37, 244, 238, .15),
        0 0 18px rgba(37, 244, 238, .12);
}

.soundpad-pad:active {
    transform: translateY(1px);
}

.soundpad-trigger {
    width: 100%;
    height: 76px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    padding: 10px 9px 9px;

    border: 0;
    border-radius: 11px;

    background: transparent;
    color: var(--ovs-text-primary);

    text-align: left;
}

.soundpad-keycap {
    min-width: 22px;
    height: 20px;

    display: inline-grid;
    place-items: center;

    padding: 0 5px;

    border: 1px solid var(--ovs-soundpad-key-border);
    border-radius: 6px;

    background: var(--ovs-soundpad-pad-assigned-bg);
    color: var(--ovs-soundpad-key-text);

    font-size: 9px;
    font-weight: 900;
}

.soundpad-pad-label {
    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding-right: 12px;

    color: var(--ovs-soundpad-label);

    font-size: 11px;
    font-weight: 800;
}

.soundpad-pad[data-assigned="1"]
.soundpad-pad-label {
    color: var(--ovs-soundpad-label-assigned);
}

.soundpad-led {
    position: absolute;

    right: 9px;
    bottom: 10px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--ovs-soundpad-key-bg);
}

.soundpad-pad[data-assigned="1"]
.soundpad-led {
    background: var(--ovs-success);
}

.soundpad-pad[data-active="1"]
.soundpad-led {
    background: var(--ovs-accent);

    box-shadow:
        0 0 7px var(--ovs-accent);
}

.soundpad-edit {
    position: absolute;

    top: 7px;
    right: 6px;

    width: 26px;
    height: 22px;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--ovs-soundpad-edit);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: -1px;
}

.soundpad-edit:hover {
    color: var(--ovs-text-primary);
}

.soundpad-editor {
    margin-top: 15px;
    padding-top: 14px;

    border-top: 1px solid var(--ovs-soundpad-editor-border);
}

.soundpad-editor-header {
    display: flex;
    flex-direction: column;

    gap: 2px;

    margin-bottom: 11px;
}

.soundpad-editor-header strong {
    font-size: 12px;
}

.soundpad-editor-header span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--ovs-text-muted);

    font-size: 9px;
}

.soundpad-field {
    margin-bottom: 10px;
}

.soundpad-field input {
    height: 38px;
}

.soundpad-editor-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr;

    gap: 6px;
}

.soundpad-editor-actions .button {
    min-height: 36px;

    display: grid;
    place-items: center;

    padding: 0 8px;

    font-size: 10px;
}

.soundpad-upload {
    cursor: pointer;
}

.soundpad-upload input {
    display: none;
}

.soundpad-delete {
    border-color: rgba(255, 92, 108, .25);

    background: rgba(255, 92, 108, .06);
    color: var(--ovs-soundpad-danger-text);
}

.soundpad-delete:not(:disabled):hover {
    border-color: rgba(255, 92, 108, .5);
}

.soundpad-hint {
    margin-top: 13px;

    color: var(--ovs-soundpad-muted);

    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.soundpad-editor-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;

    margin-bottom: 12px;
}

.soundpad-editor-quick .button {
    min-height: 36px;

    display: grid;
    place-items: center;

    padding: 0 8px;

    font-size: 10px;
}

.soundpad-editor .button-wide {
    min-height: 36px;
    font-size: 10px;
}


/* ==========================================================
   Standalone Jarviska voice settings
   ========================================================== */

.field select {
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid var(--ovs-border);
    border-radius: 11px;

    outline: none;

    background: var(--ovs-surface-input);
    color: var(--ovs-text-primary);
}

.field select:focus {
    border-color: var(--ovs-accent);
}

.field select:disabled {
    opacity: .55;
    cursor: not-allowed;
}



/* ==========================================================
   OVS quick speech controls
   ========================================================== */

.speech-controls-card {
    min-width: 0;
    height: 100%;

    padding: 18px;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;

    background: var(--ovs-surface-special);
}

.speech-controls-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 18px;
}

.speech-controls-title h2 {
    margin: 4px 0 0;

    font-size: 18px;
}

.speech-controls-collapse {
    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid var(--ovs-border);
    border-radius: 8px;

    background: var(--ovs-surface-control);
    color: var(--ovs-text-muted);

    font-size: 20px;
    line-height: 1;
}

.speech-controls-collapse:hover {
    border-color: var(--ovs-border-strong);
    color: var(--ovs-text-primary);
}

.speech-controls-body {
    display: grid;
    gap: 10px;
}

.speech-master,
.speech-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-width: 0;
}

.speech-master {
    min-height: 54px;
}

.speech-master > div,
.speech-control-copy > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.speech-master strong,
.speech-control-row strong {
    font-size: 12px;
}

.speech-master span,
.speech-control-row span {
    color: var(--ovs-text-muted);

    font-size: 10px;
    line-height: 1.35;
}

.speech-control-row {
    min-height: 62px;

    padding: 9px 0;
}

.speech-control-copy {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}

.speech-control-code {
    width: 34px;
    height: 28px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border: 1px solid var(--ovs-speech-code-border);
    border-radius: 7px;

    background: var(--ovs-speech-runtime-bg);
    color: var(--ovs-speech-runtime-muted) !important;

    font-size: 8px !important;
    font-weight: 900;
    letter-spacing: .06em;
}

.speech-control-divider {
    height: 1px;

    margin: 3px 0;

    background: var(--ovs-border);
}

.ovs-live-preview-toggle {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    cursor: pointer;
    user-select: none;
}

.ovs-live-preview-toggle > strong {
    font-size: 12px;
    font-weight: 800;
}

.ovs-live-preview-toggle:hover > strong {
    color: var(--ovs-accent);
}


.speech-toggle {
    position: relative;

    width: 40px;
    height: 22px;

    flex: 0 0 auto;
}

.speech-toggle input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.speech-toggle > span {
    position: absolute;
    inset: 0;

    border: 1px solid var(--ovs-speech-toggle-border);
    border-radius: 999px;

    background: var(--ovs-speech-toggle-bg);

    transition:
        background .15s ease,
        border-color .15s ease;
}

.speech-toggle > span::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: var(--ovs-speech-toggle-off);

    transition:
        transform .15s ease,
        background .15s ease;
}

.speech-toggle input:checked + span {
    border-color: rgba(57, 217, 138, .45);
    background: rgba(57, 217, 138, .12);
}

.speech-toggle input:checked + span::after {
    transform: translateX(18px);

    background: var(--ovs-success);

    box-shadow:
        0 0 8px rgba(57, 217, 138, .35);
}

.speech-runtime-block,
.speech-last-block {
    display: grid;

    gap: 7px;

    padding-top: 4px;
}

.speech-runtime-label,
.speech-last-block > span {
    color: var(--ovs-speech-last-muted);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.speech-runtime-status {
    display: flex;
    align-items: center;

    gap: 8px;
}

.speech-runtime-status strong {
    font-size: 12px;
}

.speech-status-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--ovs-success);
}

.speech-status-dot[data-state="off"] {
    background: var(--ovs-speech-status-off);
}

.speech-status-dot[data-state="busy"] {
    background: var(--ovs-warning);
}

.speech-status-dot[data-state="speaking"] {
    background: var(--ovs-accent);

    box-shadow:
        0 0 10px rgba(37, 244, 238, .45);
}

.speech-last-block strong {
    min-width: 0;

    overflow: hidden;
    display: -webkit-box;

    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    color: var(--ovs-speech-control-text);

    font-size: 10px;
    line-height: 1.45;
}


/* Collapsed desktop control rail */

.speech-controls-card[data-collapsed="1"] {
    padding:
        18px
        10px;

    overflow: hidden;
}

.speech-controls-card[data-collapsed="1"]
.speech-controls-title,

.speech-controls-card[data-collapsed="1"]
.speech-controls-body {
    display: none;
}

.speech-controls-card[data-collapsed="1"]
.speech-controls-heading {
    justify-content: center;

    margin-bottom: 0;
}


/* Desktop cockpit = 3 columns */

@media (min-width: 851px) {
    .workspace-grid {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(0, 1fr)
            minmax(190px, 220px);
    }

    .workspace.speech-controls-collapsed
    .workspace-grid {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(0, 1fr)
            52px;
    }

    .speech-controls-card {
        min-height: 0;
    }
}


/*
 * Wide desktop cockpit.
 *
 * Na dużym ekranie wykorzystujemy wolne miejsce
 * na większą lewą kolumnę i sprzętowy Soundpad.
 */
@media (min-width: 1200px) {
    .workspace-grid {
        grid-template-columns:
            minmax(340px, 400px)
            minmax(0, 1fr)
            minmax(190px, 220px);
    }

    .workspace.speech-controls-collapsed
    .workspace-grid {
        grid-template-columns:
            minmax(340px, 400px)
            minmax(0, 1fr)
            52px;
    }

    .soundpad-grid {
        gap: 10px;
    }

    .soundpad-trigger {
        height: 92px;

        padding:
            12px
            11px
            11px;
    }

    .soundpad-pad-label {
        font-size: 12px;
    }
}


/* Settings remains one centered column */

.workspace.settings-mode
.workspace-grid {
    grid-template-columns:
        minmax(320px, 620px);
}


/* Mobile: normal stacked card */

@media (max-width: 850px) {
    .speech-controls-card {
        height: auto;
    }

    .speech-controls-card[data-collapsed="1"] {
        padding: 18px;
    }

    .speech-controls-card[data-collapsed="1"]
    .speech-controls-title {
        display: block;
    }

    .speech-controls-card[data-collapsed="1"]
    .speech-controls-body {
        display: none;
    }

    .speech-controls-card[data-collapsed="1"]
    .speech-controls-heading {
        justify-content: space-between;
    }
}


/* ==========================================================
   Gift threshold
   ========================================================== */

.speech-gift-minimum {
    display: grid;

    gap: 7px;

    padding:
        2px
        0
        10px
        43px;
}

.speech-gift-minimum > span,
.speech-gift-minimum > small {
    color: var(--ovs-text-muted);

    font-size: 9px;
}

.speech-gift-minimum > div {
    display: flex;
    align-items: center;

    gap: 7px;
}

.speech-gift-minimum input {
    width: 74px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid var(--ovs-speech-input-border);
    border-radius: 8px;

    outline: none;

    background: var(--ovs-surface-input);
    color: var(--ovs-text-primary);

    text-align: center;

    font-size: 11px;
    font-weight: 800;
}

.speech-gift-minimum input:focus {
    border-color: var(--ovs-accent);
}

.speech-gift-minimum input:disabled {
    opacity: .5;
}

.speech-gift-minimum > div > span {
    color: var(--ovs-text-muted);

    font-size: 9px;
}


/* ==========================================================
   OVS Soundpad demo mode
   ========================================================== */

.soundpad-pad .soundpad-trigger,
.soundpad-pad .soundpad-led {
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.soundpad-pad[data-demo="1"][data-active="0"]
.soundpad-trigger {
    border-color: var(--ovs-accent);

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 64, 116, .20),
            rgba(18, 22, 28, .98) 68%
        );

    box-shadow:
        0 0 0 1px rgba(255, 50, 105, .28),
        0 0 18px rgba(255, 38, 96, .32),
        inset 0 0 18px rgba(255, 38, 96, .10);

    transform: translateY(-1px);
}

.soundpad-pad[data-demo="1"][data-active="0"]
.soundpad-led {
    opacity: 1;

    background: var(--ovs-accent);

    box-shadow:
        0 0 7px var(--ovs-accent),
        0 0 15px rgba(255, 38, 96, .65);

    transform: scale(1.25);
}

/*
 * Slot z realnie przypisanym dźwiękiem
 * dostaje odrobinę mocniejszy efekt.
 */
.soundpad-pad[data-demo="1"][data-active="0"][data-assigned="1"]
.soundpad-trigger {
    box-shadow:
        0 0 0 1px rgba(255, 50, 105, .42),
        0 0 24px rgba(255, 38, 96, .42),
        inset 0 0 20px rgba(255, 38, 96, .14);
}

@media (prefers-reduced-motion: reduce) {
    .soundpad-pad .soundpad-trigger,
    .soundpad-pad .soundpad-led {
        transition: none;
    }
}



/* ==========================================================
   OVS LIVE EVENT CENTER v1
   ========================================================== */

.live-event-ticker {
    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.live-event-ticker:hover,
.live-event-ticker:focus-visible {
    border-color:
        rgba(
            37,
            244,
            238,
            .45
        );

    background:
        var(--ovs-ticker-hover-bg);

    outline: none;
}

.live-event-ticker:active {
    transform: translateY(1px);
}


.event-center-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 28px;

    background:
        var(--ovs-modal-backdrop);

    backdrop-filter:
        blur(8px);
}


.event-center-modal {
    width:
        min(
            1280px,
            calc(100vw - 56px)
        );

    height:
        min(
            820px,
            calc(100vh - 56px)
        );

    min-height: 560px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-modal-shell-border);

    border-radius: 20px;

    background:
        var(--ovs-modal-shell-bg);

    box-shadow:
        0 34px 100px
        rgba(
            0,
            0,
            0,
            .62
        );
}


.event-center-header {
    flex: 0 0 auto;

    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    padding:
        18px
        22px;

    border-bottom:
        1px solid
        var(--ovs-border);

    background:
        linear-gradient(
            100deg,
            rgba(
                37,
                244,
                238,
                .055
            ),
            transparent
            38%
        );
}

.event-center-header h2 {
    margin:
        4px
        0
        0;

    font-size: 22px;
}

.event-center-subtitle {
    display: block;

    margin-top: 4px;

    color:
        var(--ovs-text-muted);

    font-size: 11px;
}

.event-center-close {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 12px;

    background:
        var(--ovs-surface-2);

    color:
        var(--ovs-text-muted);

    font-size: 25px;
    line-height: 1;
}

.event-center-close:hover {
    color:
        var(--ovs-text-primary);

    border-color:
        var(--ovs-modal-hover-border);
}


.event-center-tabs {
    flex: 0 0 auto;

    display: flex;

    gap: 4px;

    padding:
        10px
        22px
        0;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.event-center-tab {
    min-height: 42px;

    padding:
        0
        18px;

    border: 0;
    border-bottom:
        2px solid
        transparent;

    background:
        transparent;

    color:
        var(--ovs-text-muted);

    font-size: 12px;
    font-weight: 800;
}

.event-center-tab:hover {
    color:
        var(--ovs-text-primary);
}

.event-center-tab.active {
    border-bottom-color:
        var(--ovs-accent);

    color:
        var(--ovs-accent);
}


.event-center-content {
    flex: 1 1 auto;

    min-height: 0;

    overflow: hidden;

    padding: 18px 22px;
}


.event-center-error {
    flex: 0 0 auto;

    margin:
        14px
        22px
        0;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            255,
            92,
            108,
            .28
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            92,
            108,
            .07
        );

    color:
        var(--ovs-danger);

    font-size: 12px;
}


.event-center-loading {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 4;

    transform:
        translate(
            -50%,
            -50%
        );

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        14px
        18px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-modal-loading-bg);

    box-shadow:
        0 16px 50px
        rgba(
            0,
            0,
            0,
            .4
        );

    color:
        var(--ovs-text-muted);

    font-size: 12px;
}

.event-center-loading .spinner {
    width: 22px;
    height: 22px;

    margin: 0;

    border-width: 2px;
}


.event-center-toolbar {
    display: flex;
    align-items: end;

    gap: 14px;

    margin-bottom: 13px;
}

.event-center-search {
    width:
        min(
            420px,
            100%
        );
}

.event-center-search > span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.event-center-search input {
    width: 100%;
    height: 40px;

    padding:
        0
        12px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 10px;

    outline: none;

    background:
        var(--ovs-modal-input-bg);

    color:
        var(--ovs-text-primary);
}

.event-center-search input:focus {
    border-color:
        var(--ovs-accent);
}


.event-center-favorites-block {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    padding:
        8px
        12px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 12px;

    background:
        var(--ovs-modal-soft-fill);
}

.event-center-section-label {
    flex: 0 0 auto;

    color:
        var(--ovs-warning);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.event-center-favorites {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    overflow-x: auto;
}

.event-center-favorite-chip {
    flex: 0 0 auto;

    min-height: 29px;

    padding:
        0
        10px;

    border:
        1px solid
        rgba(
            255,
            200,
            87,
            .25
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            200,
            87,
            .06
        );

    color:
        var(--ovs-event-favorite-text);

    font-size: 10px;
    font-weight: 800;
}

.event-center-favorite-chip:hover {
    border-color:
        rgba(
            255,
            200,
            87,
            .55
        );
}


.event-center-gift-grid {
    height:
        calc(
            100%
            - 115px
        );

    min-height: 0;

    display: grid;

    grid-template-columns:
        minmax(
            245px,
            310px
        )
        minmax(
            0,
            1fr
        );

    gap: 16px;
}


.event-center-catalog,
.event-center-ranking {
    min-height: 0;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-modal-surface);
}


.event-center-catalog {
    display: flex;
    flex-direction: column;
}

.event-center-pane-header {
    flex: 0 0 auto;

    min-height: 57px;

    display: flex;
    align-items: center;

    padding:
        11px
        13px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.event-center-pane-header > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.event-center-pane-header strong {
    font-size: 12px;
}

.event-center-pane-header span {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
}


.event-center-catalog-list {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding: 6px;
}

.event-center-gift-item {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap: 8px;

    padding:
        10px
        9px;

    border:
        1px solid
        transparent;

    border-radius: 10px;

    background:
        transparent;

    color:
        var(--ovs-text-primary);

    text-align: left;
}

.event-center-gift-item:hover {
    background:
        var(--ovs-surface-2);
}

.event-center-gift-item.active {
    border-color:
        rgba(
            37,
            244,
            238,
            .35
        );

    background:
        rgba(
            37,
            244,
            238,
            .06
        );
}

.event-center-gift-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.event-center-gift-copy strong,
.event-center-gift-copy span {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-center-gift-copy strong {
    font-size: 11px;
}

.event-center-gift-copy span {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
}

.event-center-gift-count {
    color:
        var(--ovs-success);

    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}


.event-center-ranking {
    display: flex;
    flex-direction: column;
}

.event-center-ranking-header {
    flex: 0 0 auto;

    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        12px
        16px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.event-center-selected-copy {
    min-width: 0;
}

.event-center-selected-copy h3 {
    margin:
        2px
        0
        0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 17px;
}

.event-center-original {
    display: block;

    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 700;
}

.event-center-favorite {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 11px;

    background:
        var(--ovs-surface-2);

    color:
        var(--ovs-text-muted);

    font-size: 22px;
}

.event-center-favorite.active {
    border-color:
        rgba(
            255,
            200,
            87,
            .4
        );

    color:
        var(--ovs-warning);

    background:
        rgba(
            255,
            200,
            87,
            .07
        );
}


.event-center-sortbar {
    flex: 0 0 auto;

    display: flex;
    justify-content: flex-end;

    gap: 10px;

    padding:
        9px
        13px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.event-center-sortbar label {
    display: flex;
    align-items: center;

    gap: 6px;
}

.event-center-sortbar span {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 700;
}

.event-center-sortbar select {
    height: 31px;

    padding:
        0
        8px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 8px;

    outline: none;

    background:
        var(--ovs-modal-select-bg);

    color:
        var(--ovs-text-primary);

    font-size: 10px;
}


.event-center-table-wrap {
    flex: 1 1 auto;

    min-height: 0;

    overflow: auto;
}

.event-center-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}

.event-center-table th,
.event-center-table td {
    padding:
        11px
        12px;

    border-bottom:
        1px solid
        var(--ovs-modal-divider);

    text-align: left;

    font-size: 11px;
}

.event-center-table th {
    position: sticky;
    top: 0;

    z-index: 2;

    background:
        var(--ovs-modal-table-head-bg);

    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.event-center-table th:nth-child(1),
.event-center-table td:nth-child(1) {
    width: 46px;
}

.event-center-table th:nth-child(3),
.event-center-table td:nth-child(3),
.event-center-table th:nth-child(4),
.event-center-table td:nth-child(4) {
    width: 100px;

    text-align: right;
}

.event-center-table th:nth-child(5),
.event-center-table td:nth-child(5) {
    width: 90px;

    text-align: right;
}

.event-center-user {
    min-width: 0;
}

.event-center-user strong,
.event-center-user span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-center-user strong {
    font-size: 11px;
}

.event-center-user span {
    margin-top: 2px;

    color:
        var(--ovs-text-muted);

    font-size: 9px;
}


.event-center-event-list {
    height: 100%;

    overflow-y: auto;

    display: grid;
    align-content: start;

    gap: 8px;
}

.event-center-event {
    display: grid;

    grid-template-columns:
        46px
        minmax(
            0,
            1fr
        )
        auto;

    gap: 12px;

    align-items: center;

    padding:
        13px
        14px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 12px;

    background:
        var(--ovs-modal-surface);
}

.event-center-event-code {
    min-height: 30px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 8px;

    color:
        var(--ovs-accent);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.event-center-event[data-kind="envelope"]
.event-center-event-code {
    color:
        var(--ovs-warning);
}

.event-center-event[data-kind="battle"]
.event-center-event-code {
    color:
        var(--ovs-accent-2);
}

.event-center-event-copy {
    min-width: 0;
}

.event-center-event-copy strong,
.event-center-event-copy span {
    display: block;
}

.event-center-event-copy strong {
    font-size: 12px;
}

.event-center-event-copy span {
    margin-top: 3px;

    color:
        var(--ovs-text-muted);

    font-size: 10px;
}

.event-center-event-time {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
    white-space: nowrap;
}


.event-center-empty {
    padding: 32px;

    color:
        var(--ovs-text-muted);

    text-align: center;

    font-size: 11px;
}


.event-center-footer {
    flex: 0 0 auto;

    min-height: 54px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 14px;

    padding:
        8px
        22px;

    border-top:
        1px solid
        var(--ovs-border);

    color:
        var(--ovs-text-muted);

    font-size: 10px;
}

.event-center-pagination {
    display: flex;
    align-items: center;

    gap: 9px;
}

.event-center-pagination button {
    width: 32px;
    height: 32px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 8px;

    background:
        var(--ovs-surface-2);

    color:
        var(--ovs-text-primary);

    font-size: 18px;
}

.event-center-pagination button:disabled {
    opacity: .3;
}

.event-center-per-page {
    justify-self: end;
}


@media (max-width: 900px) {
    .event-center-backdrop {
        padding: 12px;
    }

    .event-center-modal {
        width:
            calc(
                100vw
                - 24px
            );

        height:
            calc(
                100vh
                - 24px
            );
    }

    .event-center-gift-grid {
        grid-template-columns:
            minmax(
                190px,
                240px
            )
            minmax(
                0,
                1fr
            );
    }
}


@media (max-width: 700px) {
    .event-center-gift-grid {
        grid-template-columns:
            1fr;
    }

    .event-center-catalog {
        max-height: 190px;
    }

    .event-center-gift-grid {
        height:
            calc(
                100%
                - 115px
            );
    }

    .event-center-table th:nth-child(4),
    .event-center-table td:nth-child(4) {
        display: none;
    }
}



/* ==========================================================
   EVENT CENTER READABILITY v1
   ========================================================== */

.event-center-subtitle {
    font-size: 12px;
}

.event-center-tab {
    font-size: 13px;
}

.event-center-search > span {
    font-size: 11px;
}

.event-center-search input {
    font-size: 13px;
}

.event-center-section-label {
    font-size: 11px;
}

.event-center-favorite-chip {
    font-size: 11px;
}

.event-center-pane-header strong {
    font-size: 13px;
}

.event-center-pane-header span {
    font-size: 11px;
}

.event-center-gift-copy strong {
    font-size: 13px;
}

.event-center-gift-copy span {
    font-size: 10px;
}

.event-center-gift-count {
    font-size: 12px;
}

.event-center-original {
    font-size: 10px;
}

.event-center-selected-copy h3 {
    font-size: 19px;
}

.event-center-sortbar span {
    font-size: 10px;
}

.event-center-sortbar select {
    font-size: 11px;
}

.event-center-table th {
    font-size: 10px;
}

.event-center-table td {
    font-size: 13px;
}

.event-center-user strong {
    font-size: 13px;
}

.event-center-user span {
    font-size: 10px;
}

.event-center-event {
    min-height: 72px;
}

.event-center-event-copy strong {
    font-size: 14px;
}

.event-center-event-copy span {
    font-size: 11px;
}

.event-center-battle-opponent {
    margin-top: 4px;

    color: var(--ovs-accent) !important;

    font-size: 12px !important;
    font-weight: 800;
}

.event-center-event.has-score {
    grid-template-columns:
        46px
        minmax(0, 1fr)
        minmax(145px, auto)
        auto;
}

.event-center-battle-score {
    color: var(--ovs-text-primary);

    font-size: 21px;
    font-weight: 900;

    letter-spacing: .025em;

    white-space: nowrap;

    text-align: right;
}

.event-center-event-time {
    font-size: 11px;
}

.event-center-footer {
    font-size: 11px;
}


@media (max-width: 700px) {
    .event-center-event.has-score {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;
    }

    .event-center-event.has-score
    .event-center-event-time {
        grid-column: 2 / 4;
        justify-self: end;
    }

    .event-center-battle-score {
        font-size: 17px;
    }
}



/* ==========================================================
   MULTI BATTLE RANKING v1
   ========================================================== */

.event-center-event.has-multi-score {
    min-height: 88px;
}

.event-center-battle-ranking {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}

.event-center-battle-rank-chip {
    min-width: 150px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 7px;

    padding:
        6px
        9px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 9px;

    background:
        var(--ovs-modal-soft-fill-2);
}

.event-center-battle-rank-chip b {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
}

.event-center-battle-rank-chip span {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-primary) !important;

    font-size: 11px !important;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-center-battle-rank-chip strong {
    color:
        var(--ovs-text-primary);

    font-size: 14px;
    font-weight: 900;
}

.event-center-battle-rank-chip.ours {
    border-color:
        rgba(
            37,
            244,
            238,
            .38
        );

    background:
        rgba(
            37,
            244,
            238,
            .07
        );
}

.event-center-battle-rank-chip.ours b,
.event-center-battle-rank-chip.ours strong {
    color:
        var(--ovs-accent);
}



/* ==========================================================
   GIFT LIVE KPI v1
   ========================================================== */

#eventCenterGiftView {
    display: flex;
    flex-direction: column;
}

#eventCenterGiftView.hidden {
    display: none;
}

.event-center-kpis {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-bottom: 8px;
}

.event-center-kpi {
    min-width: 0;
    min-height: 88px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        13px
        15px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            var(--ovs-modal-kpi-fill-a),
            var(--ovs-modal-kpi-fill-b)
        );
}

.event-center-kpi.featured {
    border-color:
        rgba(
            37,
            244,
            238,
            .27
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                37,
                244,
                238,
                .09
            ),
            rgba(
                37,
                244,
                238,
                .025
            )
        );
}

.event-center-kpi-label {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .07em;

    text-transform: uppercase;
}

.event-center-kpi-value {
    display: block;

    min-width: 0;

    margin-top: 6px;

    overflow: hidden;

    color:
        var(--ovs-text-primary);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.08;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-center-kpi.featured
.event-center-kpi-value {
    color:
        var(--ovs-accent);
}

.event-center-kpi-value.compact {
    font-size: 17px;
}

.event-center-kpi-meta {
    display: block;

    min-width: 0;

    margin-top: 6px;

    overflow: hidden;

    color:
        var(--ovs-text-muted);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Gift panel był wcześniej liczony stałym height.
 * Po dodaniu KPI oddajemy layout flexboxowi.
 */
.event-center-gift-grid {
    flex: 1 1 auto;

    height: auto;

    min-height: 0;
}


@media (max-width: 950px) {
    .event-center-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 560px) {
    .event-center-kpis {
        grid-template-columns:
            1fr;
    }

    .event-center-kpi {
        min-height: 72px;
    }
}



/* ==========================================================
   OVS LIVE AUDIENCE ANALYTICS v1
   ========================================================== */

.live-audience-trigger {
    flex: 0 0 auto;

    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-left: auto;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(
            37,
            244,
            238,
            .22
        );

    border-radius: 11px;

    background:
        var(--ovs-audience-trigger-bg);

    color:
        var(--ovs-text-primary);

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.live-audience-trigger:hover,
.live-audience-trigger:focus-visible {
    border-color:
        rgba(
            37,
            244,
            238,
            .55
        );

    background:
        var(--ovs-audience-trigger-hover-bg);

    outline: none;
}

.live-audience-trigger:active {
    transform:
        translateY(1px);
}

.live-audience-trigger-code {
    color:
        var(--ovs-accent);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.live-audience-trigger-metric {
    display: flex;
    align-items: baseline;

    gap: 5px;
}

.live-audience-trigger-metric small {
    color:
        var(--ovs-text-muted);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
}

.live-audience-trigger-metric strong {
    min-width: 28px;

    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.live-audience-trigger-divider {
    width: 1px;
    height: 18px;

    background:
        var(--ovs-border);
}


.live-audience-modal {
    width:
        min(
            1180px,
            calc(100vw - 56px)
        );

    height:
        min(
            800px,
            calc(100vh - 56px)
        );
}

.live-audience-content {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    display: grid;

    gap: 16px;

    padding:
        18px
        22px
        22px;
}

.live-audience-kpis {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.live-audience-kpi {
    min-width: 0;

    padding:
        15px
        16px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-audience-surface);
}

.live-audience-kpi.featured {
    border-color:
        rgba(
            37,
            244,
            238,
            .32
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                37,
                244,
                238,
                .075
            ),
            var(--ovs-audience-surface)
            65%
        );
}

.live-audience-kpi span,
.live-audience-kpi small {
    display: block;
}

.live-audience-kpi span {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.live-audience-kpi strong {
    display: block;

    margin-top: 5px;

    font-size: 27px;
    line-height: 1.05;
}

.live-audience-kpi small {
    margin-top: 5px;

    color:
        var(--ovs-audience-kpi-subtle);

    font-size: 9px;
}


.live-audience-panel {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-audience-surface);
}

.live-audience-panel-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        11px
        14px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.live-audience-panel-header > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.live-audience-panel-header strong {
    font-size: 12px;
}

.live-audience-panel-header > span {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
}


.live-audience-chart {
    height: 215px;
    min-height: 215px;

    flex:
        0
        0
        215px;

    padding:
        14px
        15px
        8px;
}

.live-audience-chart-panel {
    min-height: 274px;
}

.live-audience-chart svg {
    width: 100%;
    height: 174px;

    overflow: visible;
}

.live-audience-chart-grid {
    stroke:
        var(--ovs-audience-chart-grid);

    stroke-width: 1;
}

.live-audience-chart-line {
    fill: none;

    stroke:
        var(--ovs-accent);

    stroke-width: 4;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;

    filter:
        drop-shadow(
            0
            0
            7px
            rgba(
                37,
                244,
                238,
                .28
            )
        );
}

.live-audience-chart-axis {
    display: flex;
    justify-content: space-between;

    color:
        var(--ovs-text-muted);

    font-size: 9px;
}


.live-audience-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 16px;
}

.live-audience-sources,
.live-audience-recent {
    max-height: 330px;

    overflow-y: auto;

    padding:
        7px
        12px
        12px;
}

.live-audience-source {
    padding:
        9px
        0;

    border-bottom:
        1px solid
        var(--ovs-modal-divider-soft);
}

.live-audience-source:last-child {
    border-bottom: 0;
}

.live-audience-source-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 7px;
}

.live-audience-source-head > div {
    min-width: 0;
}

.live-audience-source-head strong,
.live-audience-source-head span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-audience-source-head strong {
    font-size: 11px;
}

.live-audience-source-head span {
    margin-top: 2px;

    color:
        var(--ovs-text-muted);

    font-size: 8px;
}

.live-audience-source-head b {
    flex: 0 0 auto;

    color:
        var(--ovs-accent);

    font-size: 10px;
}

.live-audience-source progress {
    width: 100%;
    height: 5px;

    display: block;

    overflow: hidden;

    border: 0;
    border-radius: 999px;

    background:
        var(--ovs-audience-progress-bg);
}

.live-audience-source progress::-webkit-progress-bar {
    background:
        var(--ovs-audience-progress-bg);
}

.live-audience-source progress::-webkit-progress-value {
    background:
        var(--ovs-accent);

    border-radius:
        999px;
}

.live-audience-source progress::-moz-progress-bar {
    background:
        var(--ovs-accent);

    border-radius:
        999px;
}


.live-audience-person {
    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(120px, .8fr)
        auto;

    gap: 10px;

    align-items: center;

    padding:
        9px
        2px;

    border-bottom:
        1px solid
        var(--ovs-modal-divider-soft);
}

.live-audience-person:last-child {
    border-bottom: 0;
}

.live-audience-person-copy {
    min-width: 0;
}

.live-audience-person-copy strong,
.live-audience-person-copy span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-audience-person-copy strong {
    font-size: 11px;
}

.live-audience-person-copy span {
    margin-top: 2px;

    color:
        var(--ovs-text-muted);

    font-size: 9px;
}

.live-audience-person-source {
    overflow: hidden;

    color:
        var(--ovs-audience-person-source);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-audience-person-meta {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    text-align: right;
    white-space: nowrap;
}


.live-audience-activity {
    min-height: 76px;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    grid-auto-rows:
        minmax(
            76px,
            auto
        );

    gap: 1px;

    background:
        var(--ovs-border);
}

.live-audience-activity > div {
    min-width: 0;
    min-height: 76px;

    padding:
        14px
        15px;

    background:
        var(--ovs-audience-surface);
}

.live-audience-activity span,
.live-audience-activity strong {
    display: block;
}

.live-audience-activity span {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 700;
}

.live-audience-activity strong {
    margin-top: 4px;

    font-size: 18px;
}


.live-audience-empty {
    padding:
        28px
        16px;

    color:
        var(--ovs-text-muted);

    font-size: 11px;
    text-align: center;
}


@media (max-width: 1180px) {
    .live-audience-trigger-metric small {
        display: none;
    }

    .live-audience-trigger {
        gap: 7px;

        padding:
            0
            9px;
    }
}


@media (max-width: 900px) {
    .live-audience-modal {
        width:
            calc(
                100vw
                - 24px
            );

        height:
            calc(
                100vh
                - 24px
            );
    }

    .live-audience-kpis {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .live-audience-grid {
        grid-template-columns:
            1fr;
    }

    .live-audience-activity {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .live-audience-person {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .live-audience-person-source {
        grid-column:
            1 / -1;

        grid-row:
            2;
    }
}


@media (max-width: 760px) {
    .live-audience-trigger {
        display: none !important;
    }
}


.live-audience-activity-panel {
    display: block !important;
    min-height: 134px !important;
    height: auto !important;
    overflow: hidden;
}

.live-audience-activity-panel
.live-audience-panel-header {
    min-height: 58px !important;
    height: auto !important;
}

.live-audience-activity-panel
.live-audience-activity {
    display: grid !important;
    min-height: 76px !important;
    height: 76px !important;
}

.live-audience-activity-panel
.live-audience-activity > div {
    min-height: 76px !important;
    height: 76px !important;
}


/* ---------------------------------------------------------
 * OVS LIVE viewer profile
 * --------------------------------------------------------- */

.comment-profile-enabled {
    cursor: pointer;

    transition:
        background .14s ease,
        border-color .14s ease;
}

.comment-profile-enabled:hover,
.comment-profile-enabled:focus-visible {
    outline: none;

    background:
        rgba(
            37,
            244,
            238,
            .035
        );

    border-bottom-color:
        rgba(
            37,
            244,
            238,
            .25
        );
}


.live-viewer-modal {
    width:
        min(
            880px,
            calc(100vw - 56px)
        );

    height:
        min(
            760px,
            calc(100vh - 56px)
        );
}

.live-viewer-content {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    display: grid;

    gap: 16px;

    padding:
        18px
        22px
        22px;
}


.live-viewer-identity {
    display: flex;
    align-items: center;

    gap: 16px;

    padding:
        16px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-viewer-surface);
}

.live-viewer-avatar-wrap {
    width: 62px;
    height: 62px;

    flex:
        0
        0
        62px;
}

.live-viewer-avatar,
.live-viewer-avatar-fallback {
    width: 62px;
    height: 62px;

    border-radius: 50%;
}

.live-viewer-avatar {
    display: block;

    object-fit: cover;

    background:
        var(--ovs-surface-2);
}

.live-viewer-avatar-fallback {
    display: grid;
    place-items: center;

    background:
        var(--ovs-surface-2);

    color:
        var(--ovs-accent);

    font-size: 20px;
    font-weight: 900;
}

.live-viewer-identity-copy {
    min-width: 0;
}

.live-viewer-identity-copy strong,
.live-viewer-identity-copy span,
.live-viewer-identity-copy small {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-viewer-identity-copy strong {
    font-size: 19px;
}

.live-viewer-identity-copy span {
    margin-top: 3px;

    color:
        var(--ovs-text-muted);

    font-size: 11px;
}

.live-viewer-identity-copy small {
    margin-top: 7px;

    color:
        var(--ovs-viewer-subtle);

    font-size: 10px;
}

.live-viewer-identity-copy small[data-linked="1"] {
    color:
        var(--ovs-accent);
}


.live-viewer-kpis {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.live-viewer-kpis article {
    min-width: 0;

    padding:
        13px
        12px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 12px;

    background:
        var(--ovs-viewer-surface);
}

.live-viewer-kpis span,
.live-viewer-kpis strong {
    display: block;
}

.live-viewer-kpis span {
    color:
        var(--ovs-text-muted);

    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.live-viewer-kpis strong {
    margin-top: 5px;

    font-size: 20px;
}


.live-viewer-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.live-viewer-panel {
    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-viewer-surface);
}

.live-viewer-panel > header {
    min-height: 57px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    padding:
        10px
        14px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.live-viewer-panel > header strong {
    font-size: 12px;
}


.live-viewer-facts {
    padding:
        7px
        14px
        12px;
}

.live-viewer-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    min-height: 36px;

    border-bottom:
        1px solid
        var(--ovs-modal-divider-soft);
}

.live-viewer-facts > div:last-child {
    border-bottom: 0;
}

.live-viewer-facts span {
    color:
        var(--ovs-text-muted);

    font-size: 10px;
}

.live-viewer-facts strong {
    max-width: 65%;

    overflow: hidden;

    font-size: 10px;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.live-viewer-comments {
    padding:
        6px
        14px
        12px;
}

.live-viewer-comments article {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 16px;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        var(--ovs-modal-divider-soft);
}

.live-viewer-comments article:last-child {
    border-bottom: 0;
}

.live-viewer-comments span {
    overflow-wrap: anywhere;

    color:
        var(--ovs-viewer-comment-text);

    font-size: 12px;
}

.live-viewer-comments time {
    color:
        var(--ovs-text-muted);

    font-size: 9px;

    white-space: nowrap;
}

.live-viewer-empty {
    margin: 0;

    padding:
        16px
        0;

    color:
        var(--ovs-text-muted);

    font-size: 10px;
    line-height: 1.5;
}



.live-viewer-memory-grid {
    align-items: stretch;
}


.live-viewer-relationship {
    padding:
        12px
        14px
        14px;
}


.live-viewer-relationship-current {
    min-height: 34px;

    display: flex;
    align-items: center;

    margin-bottom: 10px;
    padding:
        8px
        10px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 10px;

    background:
        var(--ovs-surface-2);

    font-size: 11px;
    font-weight: 800;
}


.live-viewer-relationship-current[data-status="good"] {
    border-color:
        rgba(37, 244, 238, .42);
}


.live-viewer-relationship-current[data-status="bad"] {
    border-color:
        rgba(239, 68, 68, .58);
}


.live-viewer-relationship-actions {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.live-viewer-relationship-actions button {
    min-height: 36px;

    padding:
        7px
        9px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 10px;

    background:
        var(--ovs-viewer-action-bg);

    color:
        var(--ovs-text-primary);

    font: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.live-viewer-relationship-actions button:hover {
    border-color:
        rgba(37, 244, 238, .36);
}


.live-viewer-relationship-actions button.is-active {
    border-color:
        var(--ovs-accent);

    box-shadow:
        inset 0 0 0 1px
        rgba(37, 244, 238, .2);
}


.live-viewer-relationship-actions
button[data-status="bad"].is-active {
    border-color:
        var(--ovs-danger-strong);

    box-shadow:
        inset 0 0 0 1px
        rgba(239, 68, 68, .22);
}


.live-viewer-relationship-actions button:disabled {
    opacity: .55;
    cursor: wait;
}


@media (max-width: 900px) {
    .live-viewer-modal {
        width:
            calc(
                100vw
                - 24px
            );

        height:
            calc(
                100vh
                - 24px
            );
    }

    .live-viewer-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .live-viewer-grid {
        grid-template-columns:
            1fr;
    }
}\n

.comments-search {
    width: min(360px, 42%);
    height: 38px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 10px;

    border: 1px solid var(--ovs-border);
    border-radius: 11px;

    background: var(--ovs-surface-deep);
}

.comments-search:focus-within {
    border-color: rgba(37, 244, 238, .4);
}

.comments-search-icon {
    color: var(--ovs-text-muted);
    font-size: 16px;
}

.comments-search input {
    width: 100%;
    min-width: 0;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--ovs-text-primary);

    font: inherit;
    font-size: 11px;
}

.comments-search input::placeholder {
    color: var(--ovs-text-subtle);
}

.comments-search-clear {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--ovs-text-muted);

    font-size: 17px;
}

.comments-search-clear:hover {
    background: var(--ovs-surface-2);
    color: var(--ovs-text-primary);
}

.comments-search-empty {
    min-height: 180px;

    display: grid;
    place-items: center;

    padding: 24px;

    color: var(--ovs-text-muted);

    font-size: 11px;
    text-align: center;
}

@media (max-width: 1000px) {
    .comments-search {
        width: 38%;
    }
}

@media (max-width: 760px) {
    .comments-header {
        flex-wrap: wrap;
    }

    .comments-search {
        width: 100%;
        order: 3;
    }
}

.source-retry {
    display: grid;
    gap: 10px;
}

.source-retry small {
    color: var(--ovs-text-muted);
    line-height: 1.4;
}


/* OVS LIVE phone + comments cockpit */

.comments-card {
    display: grid;
    grid-template-columns:
        clamp(340px, 23vw, 390px)
        minmax(0, 1fr);

    flex-direction: initial;
}

.ovs-live-phone {
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 18px 14px;

    border-right: 1px solid var(--ovs-border);

    background: var(--ovs-phone-bg);
}

.ovs-live-phone-heading {
    flex: 0 0 auto;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;
}

.ovs-live-phone-heading strong {
    font-size: 13px;
    font-weight: 800;
}

.ovs-live-phone-frame {
    width: 100%;
    max-width: 370px;

    margin: 0 auto;

    padding: 5px;

    border: 1px solid var(--ovs-phone-frame-border);
    border-radius: 24px;

    background: var(--ovs-phone-screen-bg);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .35);
}

.ovs-live-phone-screen {
    position: relative;

    width: 100%;
    aspect-ratio: 9 / 16;

    overflow: hidden;

    display: grid;
    place-items: center;

    border-radius: 19px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(37, 244, 238, .07),
            transparent 42%
        ),
        var(--ovs-phone-screen-glow);
}

.ovs-live-phone-placeholder {
    display: grid;
    justify-items: center;

    gap: 6px;

    padding: 15px;

    text-align: center;
}

.ovs-live-phone-placeholder > span {
    color: var(--ovs-accent);

    font-size: 22px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ovs-live-phone-placeholder > strong {
    font-size: 12px;
}

.ovs-live-phone-placeholder > small {
    color: var(--ovs-text-muted);
    font-size: 10px;
}

.comments-pane {
    position: relative;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

@media (max-width: 850px) {
    .comments-card {
        display: flex;
        flex-direction: column;

        height: auto;
        min-height: 620px;
    }

    .ovs-live-phone {
        display: none;
    }

    .comments-pane {
        flex: 1;

        min-height: 620px;
    }
}

/* ==========================================================
   OVS LIVE AUDIENCE ANALYTICS — desktop readability v1
   ========================================================== */

@media (min-width: 901px) {

    .live-audience-modal {
        width:
            min(
                1560px,
                calc(100vw - 40px)
            );

        height:
            min(
                920px,
                calc(100vh - 40px)
            );
    }

    .live-audience-content {
        gap: 18px;

        padding:
            20px
            24px
            24px;
    }

    .live-audience-panel-header {
        min-height: 64px;

        padding:
            13px
            16px;
    }

    .live-audience-panel-header strong {
        font-size: 14px;
    }

    .live-audience-panel-header > span {
        font-size: 12px;
    }

    .live-audience-sources,
    .live-audience-recent {
        max-height: 430px;

        padding:
            9px
            16px
            14px;
    }

    .live-audience-source {
        padding:
            12px
            0;
    }

    .live-audience-source-head {
        gap: 16px;

        margin-bottom: 8px;
    }

    .live-audience-source-head strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .live-audience-source-head span {
        margin-top: 3px;

        font-size: 11px;
        line-height: 1.3;
    }

    .live-audience-source-head b {
        font-size: 12px;
    }

    .live-audience-person {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(180px, .8fr)
            auto;

        gap: 16px;

        padding:
            12px
            4px;
    }

    .live-audience-person-copy strong {
        font-size: 14px;
        line-height: 1.25;
    }

    .live-audience-person-copy span {
        margin-top: 3px;

        font-size: 12px;
        line-height: 1.3;
    }

    .live-audience-person-source {
        font-size: 12px;
        line-height: 1.3;
    }

    .live-audience-person-meta {
        font-size: 11px;
        line-height: 1.3;
    }
}

/* ==========================================================
   OVS LIVE VIEWER PROFILE — desktop readability v1
   ========================================================== */

@media (min-width: 901px) {

    .live-viewer-modal {
        width:
            min(
                1320px,
                calc(100vw - 40px)
            );

        height:
            min(
                920px,
                calc(100vh - 40px)
            );
    }

    .live-viewer-content {
        gap: 18px;

        padding:
            20px
            24px
            24px;
    }

    .live-viewer-identity {
        gap: 20px;

        padding:
            18px;
    }

    .live-viewer-avatar-wrap,
    .live-viewer-avatar,
    .live-viewer-avatar-fallback {
        width: 76px;
        height: 76px;
    }

    .live-viewer-avatar-wrap {
        flex:
            0
            0
            76px;
    }

    .live-viewer-avatar-fallback {
        font-size: 24px;
    }

    .live-viewer-identity-copy strong {
        font-size: 22px;
        line-height: 1.2;
    }

    .live-viewer-identity-copy span {
        margin-top: 4px;

        font-size: 14px;
        line-height: 1.3;
    }

    .live-viewer-identity-copy small {
        margin-top: 8px;

        font-size: 13px;
        line-height: 1.35;
    }

    .live-viewer-kpis {
        gap: 12px;
    }

    .live-viewer-kpis article {
        padding:
            16px
            15px;
    }

    .live-viewer-kpis span {
        font-size: 11px;
        letter-spacing: .05em;
    }

    .live-viewer-kpis strong {
        margin-top: 6px;

        font-size: 24px;
    }

    .live-viewer-grid {
        gap: 18px;
    }

    .live-viewer-panel > header {
        min-height: 64px;

        padding:
            12px
            16px;
    }

    .live-viewer-panel > header strong {
        font-size: 15px;
    }

    .live-viewer-facts {
        padding:
            8px
            16px
            14px;
    }

    .live-viewer-facts > div {
        min-height: 44px;

        gap: 20px;
    }

    .live-viewer-facts span {
        font-size: 13px;
        line-height: 1.35;
    }

    .live-viewer-facts strong {
        font-size: 13px;
        line-height: 1.35;
    }

    .live-viewer-empty {
        padding:
            18px
            0;

        font-size: 13px;
        line-height: 1.5;
    }

    .live-viewer-comments {
        padding:
            8px
            16px
            14px;
    }

    .live-viewer-comments article {
        padding:
            12px
            0;
    }

    .live-viewer-comments span {
        font-size: 14px;
        line-height: 1.4;
    }

    .live-viewer-comments time {
        font-size: 11px;
    }

    .live-viewer-relationship {
        padding:
            14px
            16px
            16px;
    }

    .live-viewer-relationship-current {
        min-height: 42px;

        margin-bottom: 12px;

        padding:
            10px
            12px;

        font-size: 13px;
    }

    .live-viewer-relationship-actions {
        gap: 10px;
    }

    .live-viewer-relationship-actions button {
        min-height: 42px;

        padding:
            9px
            12px;

        font-size: 12px;
    }
}

/* OVS TikTok viewer status badges */
.comment-viewer-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;

    min-width: 0;
    margin-left: 3px;
}

.comment-viewer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 16px;
    padding: 1px 5px;

    border: 1px solid var(--ovs-border);
    border-radius: 999px;

    background: var(--ovs-surface-2);

    color:
        var(--ovs-text-primary);

    font-size: 8px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .02em;

    white-space: nowrap;
}

.comment-viewer-badge.is-grade {
    border-color:
        var(--ovs-badge-grade-border);
}

.comment-viewer-badge.is-fan {
    border-color:
        var(--ovs-badge-fan-border);
}

.comment-viewer-badge.is-superfan {
    border-color:
        var(--ovs-badge-superfan-border);
}

.comment-viewer-badge.is-moderator {
    border-color:
        var(--ovs-badge-moderator-border);
}

@media (max-width: 700px) {
    .comment-viewer-badge {
        padding:
            1px
            4px;

        font-size: 7px;
    }
}

/* ==========================================================
   OVS theme system
   ========================================================== */

/*
 * DARK jest referencyjnym wyglądem OVS.
 * LIGHT i STUDIO zmieniają wyłącznie tokeny.
 */

body[data-ovs-theme="dark"] {
    color-scheme: dark;
}


body[data-ovs-theme="light"] {
    color-scheme: light;

    /* page */
    --ovs-page-bg: #edf2f5;
    --ovs-page-glow:
        rgba(37, 244, 238, .055);

    --ovs-page-ambient-left:
        transparent;

    --ovs-page-ambient-right:
        transparent;

    --ovs-page-ambient-center:
        transparent;

    /* general surfaces */
    --ovs-surface-1: #ffffff;
    --ovs-surface-2: #f3f6f8;
    --ovs-surface-3: #edf2f5;

    --ovs-surface-deep: #f7f9fb;
    --ovs-surface-special: #ffffff;
    --ovs-surface-input: #ffffff;

    --ovs-surface-control: #f4f7f9;
    --ovs-surface-control-hover: #e8eef2;

    /* borders */
    --ovs-border: #d2dbe3;
    --ovs-border-strong: #b8c4ce;

    /* typography */
    --ovs-text-primary: #111820;
    --ovs-text-secondary: #202830;
    --ovs-text-muted: #667581;
    --ovs-text-subtle: #87939e;

    /* common controls */
    --ovs-text-on-accent: #051011;

    --ovs-live-button-stop-bg: #e7ebef;
    --ovs-live-button-stop-border: #c3cdd6;

    --ovs-status-off: #98a4ae;

    --ovs-live-button-text: #ffffff;
    --ovs-live-button-stop-text: #33404b;

    --ovs-ticker-bg: #ffffff;
    --ovs-ticker-hover-bg: #f7f9fb;

    --ovs-row-divider:
        rgba(30, 41, 59, .12);

    /* comments / interaction surfaces */
    --ovs-comment-action-bg: #f3f6f8;
    --ovs-comment-action-hover-bg: #e8eef2;

    /* phone preview
       Ekran podglądu celowo pozostaje grafitowy:
       reprezentuje obraz/video, a nie powierzchnię UI. */
    --ovs-phone-bg: #f7f9fa;
    --ovs-phone-frame-border: #bcc7d0;
    --ovs-phone-screen-bg: #20272e;
    --ovs-phone-screen-glow: #101418;

    /* soundpad */
    --ovs-soundpad-master-border: #d5dde4;
    --ovs-soundpad-volume-border: #d5dde4;

    --ovs-soundpad-pad-bg: #f4f7f9;
    --ovs-soundpad-pad-border: #d1dae2;

    --ovs-soundpad-pad-assigned-bg: #edf2f5;
    --ovs-soundpad-pad-assigned-border: #b8c5cf;

    --ovs-soundpad-key-bg: #e5ebef;
    --ovs-soundpad-key-border: #c8d2da;
    --ovs-soundpad-key-text: #44515d;

    --ovs-soundpad-label: #687581;
    --ovs-soundpad-label-assigned: #17202a;

    --ovs-soundpad-edit: #687581;

    --ovs-soundpad-editor-border: #d2dbe3;
    --ovs-soundpad-muted: #687581;

    --ovs-soundpad-danger-text: #b42318;

    /* speech */
    --ovs-speech-code-border: #c8d2db;

    --ovs-speech-toggle-bg: #dbe2e8;
    --ovs-speech-toggle-border: #b8c4ce;
    --ovs-speech-toggle-off: #98a4ae;

    --ovs-speech-control-text: #202830;

    --ovs-speech-runtime-bg: #f3f6f8;
    --ovs-speech-runtime-muted: #687581;
    --ovs-speech-last-muted: #687581;

    --ovs-speech-status-off: #98a4ae;

    --ovs-speech-input-border: #c8d2db;

    /* modal shell */
    --ovs-modal-backdrop:
        rgba(15, 23, 42, .38);

    --ovs-modal-shell-bg: #f8fafb;
    --ovs-modal-shell-border: #cbd5dd;
    --ovs-modal-surface: #ffffff;

    --ovs-modal-loading-bg: #ffffff;
    --ovs-modal-input-bg: #ffffff;
    --ovs-modal-select-bg: #ffffff;
    --ovs-modal-table-head-bg: #f3f6f8;

    --ovs-modal-hover-border: #aebbc6;

    --ovs-modal-divider:
        rgba(30, 41, 59, .16);

    --ovs-modal-divider-soft:
        rgba(30, 41, 59, .11);

    --ovs-modal-soft-fill:
        rgba(15, 23, 42, .025);

    --ovs-modal-soft-fill-2:
        rgba(15, 23, 42, .035);

    --ovs-modal-kpi-fill-a:
        rgba(15, 23, 42, .028);

    --ovs-modal-kpi-fill-b:
        rgba(15, 23, 42, .012);

    --ovs-event-favorite-text: #8a5b00;

    /* audience / analytics */
    --ovs-audience-trigger-bg:
        rgba(255, 255, 255, .94);

    --ovs-audience-trigger-hover-bg:
        rgba(255, 255, 255, 1);

    --ovs-audience-surface: #ffffff;
    --ovs-audience-kpi-subtle: #667581;
    --ovs-audience-progress-bg: #e4eaef;
    --ovs-audience-person-source: #4f5d69;

    --ovs-audience-chart-grid:
        rgba(71, 85, 105, .14);

    /* viewer */
    --ovs-viewer-surface: #ffffff;
    --ovs-viewer-subtle: #687581;
    --ovs-viewer-comment-text: #202830;
    --ovs-viewer-action-bg: #f3f6f8;
}

body[data-ovs-theme="studio"] {
    color-scheme: dark;

    /*
     * Studio = DARK cockpit + regulowane światło otoczenia.
     * Runtime vars ustawia JS na podstawie suwaków.
     */

    --ovs-page-bg:
        var(
            --ovs-studio-page-bg,
            #f4f3ef
        );

    --ovs-page-glow:
        var(
            --ovs-studio-page-glow,
            rgba(255, 255, 255, .72)
        );

    --ovs-page-ambient-left:
        var(
            --ovs-studio-ambient-left,
            rgba(255, 252, 245, .98)
        );

    --ovs-page-ambient-right:
        var(
            --ovs-studio-ambient-right,
            rgba(255, 248, 236, .96)
        );

    --ovs-page-ambient-center:
        var(
            --ovs-studio-ambient-center,
            rgba(255, 255, 255, .34)
        );
}




/* ==========================================================
   Studio appearance controls
   ========================================================== */

.studio-controls-card {
    display: grid;
    gap: 18px;
}

.studio-controls-intro {
    margin:
        -8px
        0
        2px;

    color:
        var(--ovs-text-muted);

    font-size: 11px;
    line-height: 1.5;
}

.studio-control {
    display: grid;
    gap: 8px;
}

.studio-control-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.studio-control-head strong {
    font-size: 12px;
}

.studio-control-value {
    min-width: 46px;

    color:
        var(--ovs-accent);

    font-size: 11px;
    font-weight: 900;

    text-align: right;
}

.studio-control input[type="range"] {
    width: 100%;

    margin: 0;

    accent-color:
        var(--ovs-accent);
}

.studio-control input[type="range"]:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.studio-control-scale {
    display: flex;
    justify-content: space-between;

    color:
        var(--ovs-text-subtle);

    font-size: 9px;
}

.studio-controls-hint {
    margin: 0;

    color:
        var(--ovs-text-muted);

    font-size: 10px;
    line-height: 1.45;
}


/* ==========================================================
   Theme switcher
   ========================================================== */

.ovs-theme-switcher {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;

    gap: 3px;

    padding: 3px;

    border:
        1px
        solid
        var(--ovs-border);

    border-radius: 10px;

    background:
        var(--ovs-surface-3);
}

.ovs-theme-option {
    min-height: 30px;

    padding:
        0
        9px;

    border: 0;
    border-radius: 7px;

    background:
        transparent;

    color:
        var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
}

.ovs-theme-option:hover {
    color:
        var(--ovs-text-primary);
}

.ovs-theme-option.active {
    background:
        var(--ovs-surface-control-hover);

    color:
        var(--ovs-text-primary);

    box-shadow:
        inset
        0
        0
        0
        1px
        var(--ovs-border-strong);
}


@media (max-width: 1100px) {
    .ovs-theme-option {
        padding:
            0
            7px;

        font-size: 9px;
    }
}


@media (max-width: 850px) {
    .ovs-theme-switcher {
        order: 2;
    }

    .ovs-theme-option {
        min-height: 32px;
    }
}


/* ==========================================================
   TikTok Gift Overlay v2 — compact FIFO rail
   ========================================================== */

.gift-overlay-layer {
    position: fixed;

    /*
     * Warstwa nachodzi na istniejącą lewą kolumnę.
     * Nie zajmuje miejsca w gridzie i nie zwęża telefonu.
     */
    /*
     * Pozycję ustawia JS względem rzeczywistego
     * .ovs-live-phone-frame.
     *
     * Warstwa nie bierze udziału w gridzie.
     * Może nachodzić na lewą kolumnę.
     */
    left: 0;
    top: 0;

    width: 300px;
    height: 330px;

    z-index: 30;

    pointer-events: none;
}

.gift-overlay-card {
    position: absolute;

    top: 0;
    left: 0;

    width: 300px;
    height: 140px;
    min-height: 140px;
    max-height: 140px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 11px 13px 12px;

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border-strong);

    border-radius: 15px;

    background:
        color-mix(
            in srgb,
            var(--ovs-surface-2) 95%,
            transparent
        );

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, .30),
        inset 0 1px 0
        rgba(255, 255, 255, .035);

    opacity: 0;

    transform:
        translate3d(
            0,
            calc(
                -100vh
                - var(--gift-slot-y)
            ),
            0
        )
        scale(.96);

    transition:
        transform
        .56s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),
        opacity
        .24s
        ease;

    backdrop-filter:
        blur(13px);

    will-change:
        transform,
        opacity;

    isolation: isolate;
}


/*
 * GIFT TIER BORDER
 *
 * Cztery małe punkty światła krążą po obwodzie.
 * Sam środek pozostaje spokojny.
 */
.gift-overlay-card::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 14px;
    height: 7px;

    border-radius: 999px;

    /*
     * Mała iskra:
     * - biały, jasny punkt z przodu,
     * - kolorowy środek,
     * - bardzo krótki ogon.
     */
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(
                in srgb,
                var(--gift-tier-color) 20%,
                transparent
            ) 18%,
            var(--gift-tier-color) 55%,
            #ffffff 100%
        );

    box-shadow:
        0 0 3px
        #ffffff,

        0 0 7px
        var(--gift-tier-color),

        0 0 14px
        color-mix(
            in srgb,
            var(--gift-tier-color) 65%,
            transparent
        ),

        0 0 24px
        color-mix(
            in srgb,
            var(--gift-tier-color) 24%,
            transparent
        );

    /*
     * Dokładnie po obwodzie karty.
     */
    offset-path:
        inset(1px round 14px)
        border-box;

    offset-position:
        left top;

    offset-anchor:
        50% 50%;

    offset-distance:
        0%;

    /*
     * Obrót zgodny z kierunkiem ruchu.
     * Dzięki temu krótki ogon jedzie za iskrą.
     */
    offset-rotate:
        auto;

    animation:
        giftOverlayBorderOrbit
        5.8s
        linear
        infinite;

    opacity: .96;

    pointer-events: none;

    z-index: 3;
}

/*
 * Bardzo delikatny kolorowy glow wewnątrz
 * i pod kartą.
 */
.gift-overlay-card::after {
    content: '';

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--gift-tier-color) 30%,
            transparent
        ),
        inset 0 0 14px
        color-mix(
            in srgb,
            var(--gift-tier-color) 7%,
            transparent
        );

    opacity: .9;

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
 * STANDARD — 1–29 monet
 * ============================================================ */

.gift-overlay-card[data-gift-tier="standard"] {
    --gift-tier-color:
        #aeb7c2;

    border-color:
        color-mix(
            in srgb,
            #aeb7c2 55%,
            var(--ovs-border-strong)
        );

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .30),
        0 0 14px
        rgba(174, 183, 194, .08),
        inset 0 1px 0
        rgba(255, 255, 255, .045);
}


/* ============================================================
 * PREMIUM — 30–500 monet
 * ============================================================ */

.gift-overlay-card[data-gift-tier="premium"] {
    --gift-tier-color:
        #b85cff;

    border-color:
        color-mix(
            in srgb,
            #b85cff 72%,
            var(--ovs-border-strong)
        );

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, .34),
        0 0 22px
        rgba(184, 92, 255, .18),
        inset 0 1px 0
        rgba(255, 255, 255, .05);
}


/* ============================================================
 * LEGENDARY — 501+ monet
 * ============================================================ */

.gift-overlay-card[data-gift-tier="legendary"] {
    --gift-tier-color:
        #f5b942;

    border-color:
        color-mix(
            in srgb,
            #f5b942 78%,
            var(--ovs-border-strong)
        );

    box-shadow:
        0 15px 38px
        rgba(0, 0, 0, .38),
        0 0 26px
        rgba(245, 185, 66, .20),
        inset 0 1px 0
        rgba(255, 255, 255, .07);
}


/*
 * Treść zawsze nad warstwą dekoracyjną.
 */
.gift-overlay-header,
.gift-overlay-visual,
.gift-overlay-copy {
    position: relative;
    z-index: 2;
}


/*
 * Punkty światła objeżdżają ramkę.
 */
@keyframes giftOverlayBorderOrbit {
    from {
        offset-distance:
            0%;
    }

    to {
        offset-distance:
            100%;
    }
}


.gift-overlay-card.is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            var(--gift-slot-y),
            0
        )
        scale(1);
}


.gift-overlay-card.is-falling {
    opacity: 0;

    transform:
        translate3d(
            0,
            calc(
                100vh
                - var(--gift-slot-y)
            ),
            0
        )
        scale(.94);

    transition:
        transform
        .9s
        cubic-bezier(
            .45,
            0,
            .9,
            .5
        ),
        opacity
        .25s
        ease
        .58s;
}


.gift-overlay-header {
    min-width: 0;

    display: flex;
    align-items: center;

    padding:
        0 2px
        0 3px;
}


.gift-overlay-actor {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-primary);

    font-size: 14px;
    font-weight: 800;

    line-height: 18px;

    text-overflow: ellipsis;
    white-space: nowrap;

    letter-spacing:
        -.01em;
}


.gift-overlay-body {
    min-width: 0;

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    flex: 1;
}


.gift-overlay-visual {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(
                in srgb,
                var(--ovs-accent) 14%,
                transparent
            ),
            transparent 70%
        );
}


.gift-overlay-image {
    width: 54px;
    height: 54px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 9px
            rgba(0, 0, 0, .30)
        );
}


.gift-overlay-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 5px;
}


.gift-overlay-gift {
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 7px;

    line-height: 20px;
}


.gift-overlay-gift-name {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-primary);

    font-size: 14px;
    font-weight: 750;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.gift-overlay-gift-count {
    flex: 0 0 auto;

    color:
        var(--ovs-accent);

    font-size: 17px;
    font-weight: 900;

    line-height: 20px;
}


.gift-overlay-value {
    color:
        var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 700;

    line-height: 15px;
}


.gift-overlay-fallback {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border-strong);

    border-radius: 50%;

    background:
        var(--ovs-surface-3);

    color:
        var(--ovs-accent);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}


.gift-overlay-visual {
    width: 104px;
    height: 104px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(
                in srgb,
                var(--ovs-accent) 14%,
                transparent
            ),
            transparent 70%
        );
}

.gift-overlay-image {
    width: 96px;
    height: 96px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 9px
            rgba(0, 0, 0, .30)
        );
}

.gift-overlay-fallback {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border-strong);

    border-radius: 50%;

    background:
        var(--ovs-surface-3);

    color:
        var(--ovs-accent);

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.gift-overlay-copy {
    min-width: 0;

    display: grid;

    gap: 2px;
}

.gift-overlay-actor {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-primary);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;

    display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    white-space: normal;
}

.gift-overlay-gift {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-accent);

    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-overlay-value {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
}

@media (max-width: 1250px) {
    .gift-overlay-layer {
        width: 300px;
    }

    .gift-overlay-card {
        width: 300px;
    }

    .gift-overlay-visual {
        width: 60px;
        height: 60px;
    }

    .gift-overlay-image {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 1099px) {
    .gift-overlay-layer {
        display: none;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .gift-overlay-card {
        transition:
            opacity .15s linear;
    }

    .gift-overlay-card::before {
        animation:
            none;
    }
}



/* ==========================================================
   TikTok Mega Gift Banner — chat overlay
   ========================================================== */

.mega-gift-banner {
    position: absolute;

    left: 12px;
    right: 12px;
    top: 86px;

    z-index: 8;

    pointer-events: none;

    opacity: 0;

    transform:
        translateY(-10px)
        scale(.985);

    transition:
        opacity .2s ease,
        transform .24s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}

.mega-gift-banner.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.mega-gift-banner-card {
    min-width: 0;
    min-height: 92px;

    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding: 10px 14px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            #f5b942 74%,
            var(--ovs-border-strong)
        );

    border-radius: 16px;

    background:
        color-mix(
            in srgb,
            var(--ovs-surface-2) 96%,
            transparent
        );

    box-shadow:
        0 14px 36px
        rgba(0, 0, 0, .38),

        0 0 26px
        rgba(245, 185, 66, .17),

        inset 0 1px 0
        rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(14px);
}

.mega-gift-banner-visual {
    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(245, 185, 66, .16),
            transparent 72%
        );
}

.mega-gift-banner-image {
    width: 64px;
    height: 64px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 6px 10px
            rgba(0, 0, 0, .34)
        );
}

.mega-gift-banner-fallback {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border-strong);

    border-radius: 50%;

    color:
        #f5b942;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
}

.mega-gift-banner-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mega-gift-banner-badge {
    color:
        #f5b942;

    font-size: 9px;
    font-weight: 900;

    line-height: 1.15;

    letter-spacing: .12em;
}

.mega-gift-banner-actor {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-primary);

    font-size: 15px;
    font-weight: 900;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-gift-banner-gift {
    min-width: 0;

    overflow: hidden;

    color:
        var(--ovs-text-muted);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-gift-banner-value {
    align-self: center;

    color:
        #f5b942;

    font-size: 15px;
    font-weight: 900;

    white-space: nowrap;
}

@media (max-width: 850px) {
    .mega-gift-banner {
        left: 8px;
        right: -4px;
    }

    .mega-gift-banner-card {
        grid-template-columns:
            58px
            minmax(0, 1fr)
            auto;

        gap: 9px;

        min-height: 80px;

        padding: 8px 10px;
    }

    .mega-gift-banner-visual {
        width: 54px;
        height: 54px;
    }

    .mega-gift-banner-image {
        width: 52px;
        height: 52px;
    }

    .mega-gift-banner-value {
        font-size: 13px;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .mega-gift-banner {
        transition:
            opacity .15s linear;
    }
}

/* ==========================================================
   Mega Gift Banner v2 — cinematic chat card
   ========================================================== */

.mega-gift-banner-card {
    position: relative;

    min-height: 172px;

    display: block;

    padding: 14px 210px 16px 16px;

    overflow: hidden;
}

.mega-gift-banner-top {
    position: relative;
    z-index: 2;

    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.mega-gift-banner-actor {
    min-width: 0;

    overflow: hidden;

    color: var(--ovs-text-primary);

    font-size: 16px;
    font-weight: 900;

    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-gift-banner-value {
    flex: 0 0 auto;

    color: #f5b942;

    font-size: 16px;
    font-weight: 950;

    line-height: 1;

    white-space: nowrap;
}

.mega-gift-banner-gift {
    position: relative;
    z-index: 2;

    margin-top: 10px;

    max-width: 100%;

    overflow: hidden;

    color: var(--ovs-text-muted);

    font-size: 13px;
    font-weight: 850;

    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-gift-banner-visual {
    position: absolute;

    right: 8px;
    bottom: -6px;

    width: 210px;
    height: 172px;

    display: grid;
    place-items: center;

    overflow: visible;

    border-radius: 0;

    background: transparent;

    z-index: 1;
}

.mega-gift-banner-image {
    width: 200px;
    height: 200px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(0, 0, 0, .42)
        );
}

.mega-gift-banner-fallback {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border:
        1px solid
        var(--ovs-border-strong);

    border-radius: 50%;

    color: #f5b942;

    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 850px) {
    .mega-gift-banner-card {
        min-height: 142px;

        padding:
            12px
            154px
            14px
            12px;
    }

    .mega-gift-banner-visual {
        width: 150px;
        height: 132px;

        right: -2px;
    }

    .mega-gift-banner-image {
        width: 142px;
        height: 142px;
    }

    .mega-gift-banner-actor {
        font-size: 14px;
    }

    .mega-gift-banner-value {
        font-size: 14px;
    }
}


/* OVS LIVE audience viewers v1 */

.live-audience-viewer-tools {
    padding:
        10px
        12px;

    border-bottom:
        1px solid
        var(--ovs-modal-divider-soft);
}

.live-audience-viewer-search {
    width: 100%;
    height: 34px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 8px;

    outline: none;

    background:
        var(--ovs-audience-surface);

    color:
        var(--ovs-text);

    font: inherit;
    font-size: 10px;
}

.live-audience-viewer-search:focus {
    border-color:
        var(--ovs-accent);
}

.live-audience-viewer-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 8px;
}

.live-audience-viewer-filters button {
    min-height: 26px;

    padding:
        4px
        9px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--ovs-text-muted);

    font: inherit;
    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}

.live-audience-viewer-filters button.active {
    border-color:
        var(--ovs-accent);

    color:
        var(--ovs-text);

    background:
        color-mix(
            in srgb,
            var(--ovs-accent) 12%,
            transparent
        );
}

.live-audience-person-identity {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}

.live-audience-person-avatar {
    position: relative;

    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 50%;

    background:
        var(--ovs-audience-surface);

    color:
        var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
}

.live-audience-person-avatar img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.live-audience-person-meta > div {
    color:
        var(--ovs-text);

    font-weight: 700;
}

.live-audience-person-meta small {
    display: block;

    margin-top: 3px;

    color:
        var(--ovs-text-muted);

    font-size: 8px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .live-audience-viewer-tools {
        padding:
            12px
            16px;
    }

    .live-audience-viewer-search {
        height: 38px;
        font-size: 12px;
    }

    .live-audience-viewer-filters button {
        min-height: 30px;

        padding:
            5px
            10px;

        font-size: 10px;
    }

    .live-audience-person-avatar {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }

    .live-audience-person-meta small {
        font-size: 9px;
    }
}


/* OVS LIVE audience viewers v1 — taller viewer list */

.live-audience-recent {
    max-height: 520px;
}

@media (min-width: 1200px) {
    .live-audience-recent {
        max-height: 560px;
    }
}

@media (max-width: 900px) {
    .live-audience-recent {
        max-height: 430px;
    }
}


.live-audience-viewer-more {
    display: flex;
    justify-content: center;

    padding:
        14px
        8px
        6px;
}

.live-audience-viewer-more button {
    min-height: 32px;

    padding:
        6px
        14px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--ovs-text);

    font: inherit;
    font-size: 9px;
    font-weight: 700;

    cursor: pointer;
}

.live-audience-viewer-more button:hover {
    border-color:
        var(--ovs-accent);
}

.live-audience-viewer-more button:disabled {
    opacity: .55;
    cursor: default;
}


/* OVS LIVE audience viewers v1 — readable desktop typography */

.live-audience-person {
    padding:
        11px
        4px;

    gap: 14px;
}

.live-audience-person-avatar {
    width: 36px;
    height: 36px;

    flex-basis: 36px;
}

.live-audience-person-copy strong {
    font-size: 13px;
    line-height: 1.25;
}

.live-audience-person-copy span {
    margin-top: 3px;

    font-size: 11px;
    line-height: 1.25;
}

.live-audience-person-source {
    font-size: 11px;
    line-height: 1.3;
}

.live-audience-person-meta {
    font-size: 11px;
    line-height: 1.3;
}

.live-audience-person-meta small {
    margin-top: 4px;

    font-size: 10px;
    line-height: 1.25;
}

.live-audience-viewer-search {
    font-size: 11px;
}

.live-audience-viewer-filters button {
    font-size: 10px;
}


/* TikTok LIVE raw video preview */

.ovs-live-phone-video {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .18s ease;
}

.ovs-live-phone-video.is-active {
    opacity: 1;
    visibility: visible;
}

.ovs-live-phone-placeholder {
    position: relative;
    z-index: 2;

    transition:
        opacity .18s ease;
}

.ovs-live-phone-placeholder.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* OVS TOP GIFTERS V1 */

.workspace-grid {
    position: relative;
}

/*
 * Ranking żyje poza głównym gridem.
 * Nie wpływa na wysokość sidebara i nie spycha Soundpada.
 */
.top-gifters-card {
    position: fixed;

    top: 84px;
    left: 18px;

    width: 180px;

    z-index: 3;

    padding: 6px 0 0;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.top-gifters-card .card-heading {
    margin: 0 0 12px;
    padding: 0 2px;
}

.top-gifters-card .card-heading h2 {
    font-size: 17px;
}

.top-gifters-list {
    display: grid;

    gap: 4px;

    margin: 0;
}

/*
 * Brak kafelkowych ramek.
 * Medalowe obramowania będą później tylko na avatarach.
 */
.top-gifter-row {
    display: grid;

    grid-template-columns:
        20px
        42px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    min-width: 0;

    padding: 6px 2px;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.top-gifter-rank {
    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 900;

    text-align: center;
}

.top-gifter-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    overflow: hidden;

    border: 1px solid var(--ovs-border);
    border-radius: 50%;

    background: var(--ovs-surface-3);
}

.top-gifter-avatar,
.top-gifter-avatar-fallback {
    width: 100%;
    height: 100%;
}

.top-gifter-avatar {
    display: block;

    object-fit: cover;
}

.top-gifter-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ovs-text-muted);

    font-size: 15px;
    font-weight: 900;
}

.top-gifter-copy {
    display: grid;

    gap: 1px;

    min-width: 0;
}

.top-gifter-name {
    overflow: hidden;

    color: var(--ovs-text);

    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-gifter-value {
    color: var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;

    white-space: nowrap;
}

.top-gifters-empty {
    padding: 12px 2px;

    color: var(--ovs-text-muted);

    font-size: 11px;
}

.top-gifters-footer {
    margin-top: 9px;
    padding: 0 2px;

    color: var(--ovs-text-muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .06em;
    text-transform: uppercase;
}


/* OVS TOP GIFTERS MEDALS V1 */

/*
 * Podstawowy avatar pozostaje neutralny.
 * Medalową obręcz dostają wyłącznie miejsca 1–3.
 */
.top-gifter-avatar-wrap {
    box-sizing: border-box;

    border: 0;

    background: transparent;
}

/* #1 — GOLD */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-wrap {
    padding: 3px;

    background:
        linear-gradient(
            135deg,
            #fff3b0 0%,
            #f6cd55 24%,
            #b77b16 52%,
            #f5c542 74%,
            #fff0a0 100%
        );

    box-shadow:
        0 0 0 1px rgba(255, 213, 79, .34),
        0 0 12px rgba(255, 190, 45, .24);
}

/* #2 — SILVER */
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-wrap {
    padding: 3px;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #cfd7df 26%,
            #79838e 52%,
            #d9e0e6 76%,
            #ffffff 100%
        );

    box-shadow:
        0 0 0 1px rgba(207, 220, 232, .24),
        0 0 9px rgba(190, 205, 220, .16);
}

/* #3 — BRONZE */
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-wrap {
    padding: 3px;

    background:
        linear-gradient(
            135deg,
            #f2c39d 0%,
            #bf7540 26%,
            #713e22 53%,
            #c8814c 76%,
            #efbd91 100%
        );

    box-shadow:
        0 0 0 1px rgba(199, 123, 70, .24),
        0 0 8px rgba(183, 101, 48, .14);
}

/*
 * Obraz jest wewnątrz metalowej obręczy.
 */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar,
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-fallback,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-fallback,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-fallback {
    border-radius: 50%;
}

/*
 * Delikatnie wzmacniamy pierwsze trzy pozycje,
 * ale bez zwiększania szerokości raila.
 */
.top-gifter-row[data-rank="1"]
.top-gifter-name {
    color: #fff2b0;
}

.top-gifter-row[data-rank="2"]
.top-gifter-name {
    color: #e7edf3;
}

.top-gifter-row[data-rank="3"]
.top-gifter-name {
    color: #e8b38d;
}

.top-gifter-row[data-rank="1"]
.top-gifter-rank {
    color: #f6cd55;
}

.top-gifter-row[data-rank="2"]
.top-gifter-rank {
    color: #cfd7df;
}

.top-gifter-row[data-rank="3"]
.top-gifter-rank {
    color: #c8814c;
}

/* ==========================================================
   OVS TOP GIFTERS — ORNAMENT FRAMES V1
   ========================================================== */

/*
 * Fantasy frames are SVG overlays.
 * The avatar remains underneath and the SVG center is transparent.
 */

.top-gifter-row[data-rank="1"]
.top-gifter-avatar-wrap,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-wrap,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-wrap {
    position: relative;

    overflow: visible;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;
}

/*
 * Slightly reduce the photo itself so the ornament
 * has enough room without increasing the left rail width.
 */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar,
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-fallback,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-fallback,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-fallback {
    position: absolute;

    left: 4px;
    top: 4px;

    z-index: 1;

    width: 34px;
    height: 34px;

    border-radius: 50%;
}

/*
 * Ornament overlay.
 */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-wrap::after,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-wrap::after,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-wrap::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 2;

    width: 54px;
    height: 54px;

    transform:
        translate(-50%, -50%);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;
}

/* GOLD */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-wrap::after {
    width: 58px;
    height: 58px;

    background-image:
        url("top-gifters/frame-gold.svg");

    filter:
        drop-shadow(
            0 0 4px
            rgba(255, 199, 49, .32)
        );
}

/* SILVER */
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-wrap::after {
    background-image:
        url("top-gifters/frame-silver.svg");

    filter:
        drop-shadow(
            0 0 3px
            rgba(205, 221, 235, .24)
        );
}

/* BRONZE */
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-wrap::after {
    background-image:
        url("top-gifters/frame-bronze.svg");

    filter:
        drop-shadow(
            0 0 3px
            rgba(193, 111, 59, .22)
        );
}

/*
 * Remove earlier simple medal backgrounds if that experimental
 * CSS is still present higher in the stylesheet.
 */
.top-gifter-row[data-rank="1"]
.top-gifter-avatar-wrap,
.top-gifter-row[data-rank="2"]
.top-gifter-avatar-wrap,
.top-gifter-row[data-rank="3"]
.top-gifter-avatar-wrap {
    background-image: none;
}


/* ==========================================================
   OVS control drawer v1
   ========================================================== */

@media (min-width: 851px) {
    .workspace-grid {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(0, 1fr);
    }

    .workspace.speech-controls-collapsed
    .workspace-grid {
        grid-template-columns:
            minmax(270px, 320px)
            minmax(0, 1fr);
    }
}

@media (min-width: 1200px) {
    .workspace-grid {
        grid-template-columns:
            minmax(340px, 400px)
            minmax(0, 1fr);
    }

    .workspace.speech-controls-collapsed
    .workspace-grid {
        grid-template-columns:
            minmax(340px, 400px)
            minmax(0, 1fr);
    }
}


.speech-controls-card {
    position: fixed;

    z-index: 160;

    top: 82px;
    right: 16px;
    bottom: 16px;

    width:
        min(
            430px,
            calc(100vw - 32px)
        );

    height: auto;
    min-height: 0;
    max-height:
        calc(100vh - 98px);

    padding: 20px;

    overflow-x: hidden;
    overflow-y: auto;

    border:
        1px solid
        var(--ovs-border-strong);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .38);

    transform: translateX(0);

    opacity: 1;
    visibility: visible;

    transition:
        transform .22s ease,
        opacity .18s ease,
        visibility .22s ease;
}


.speech-controls-card[data-collapsed="1"] {
    padding: 20px;

    transform:
        translateX(
            calc(100% + 32px)
        );

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.speech-controls-card[data-collapsed="1"]
.speech-controls-title,

.speech-controls-card[data-collapsed="1"]
.speech-controls-body {
    display: initial;
}


.speech-controls-card[data-collapsed="1"]
.speech-controls-heading {
    justify-content: space-between;

    margin-bottom: 18px;
}


.speech-controls-collapse {
    font-size: 23px;
    line-height: 1;
}


.speech-controls-tab {
    position: fixed;

    z-index: 159;

    top: 50%;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    min-height: 142px;

    padding:
        14px
        9px;

    border:
        1px solid
        var(--ovs-border-strong);

    border-right: 0;

    border-radius:
        12px
        0
        0
        12px;

    background:
        var(--ovs-surface-special);

    color:
        var(--ovs-text-primary);

    box-shadow:
        -8px 12px 30px
        rgba(0, 0, 0, .24);

    cursor: pointer;

    transform:
        translateY(-50%);
}


.speech-controls-tab span {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .09em;
    text-transform: uppercase;
}


.speech-controls-tab:hover {
    border-color:
        var(--ovs-accent);

    color:
        var(--ovs-accent);
}


.speech-controls-tab.hidden {
    display: none;
}


@media (max-width: 850px) {
    .speech-controls-card {
        top: 72px;
        right: 8px;
        bottom: 8px;

        width:
            calc(100vw - 16px);

        max-height:
            calc(100vh - 80px);

        height: auto;
    }

    .speech-controls-card[data-collapsed="1"] {
        padding: 20px;
    }

    .speech-controls-tab {
        min-height: 124px;
    }
}


/* ==========================================================
   OVS control drawer polish v2
   ========================================================== */

.speech-controls-backdrop {
    position: fixed;
    inset: 0;

    z-index: 150;

    background: rgba(4, 10, 16, .46);
    backdrop-filter: blur(2px);
}

.speech-controls-backdrop.hidden {
    display: none;
}

.speech-controls-card {
    z-index: 160;
}

.speech-controls-tab {
    z-index: 159;

    min-width: 48px;
    min-height: 182px;

    padding:
        18px
        11px;

    border-radius:
        16px
        0
        0
        16px;

    box-shadow:
        -10px 16px 34px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(37, 244, 238, .10) inset;

    animation:
        speech-controls-tab-pulse
        2.4s
        ease-in-out
        infinite;
}

.speech-controls-tab span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
}

.speech-controls-tab:hover {
    border-color: var(--ovs-accent);
    color: var(--ovs-accent);

    box-shadow:
        -10px 16px 34px rgba(0, 0, 0, .34),
        0 0 18px rgba(37, 244, 238, .22);
}

@keyframes speech-controls-tab-pulse {
    0%,
    100% {
        box-shadow:
            -10px 16px 34px rgba(0, 0, 0, .30),
            0 0 0 1px rgba(37, 244, 238, .08) inset,
            0 0 0 rgba(37, 244, 238, 0);
    }

    50% {
        box-shadow:
            -10px 16px 34px rgba(0, 0, 0, .32),
            0 0 0 1px rgba(37, 244, 238, .16) inset,
            0 0 22px rgba(37, 244, 238, .20);
    }
}

@media (max-width: 850px) {
    .speech-controls-tab {
        min-width: 44px;
        min-height: 154px;
        padding:
            16px
            10px;
    }

    .speech-controls-tab span {
        font-size: 10px;
        letter-spacing: .12em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .speech-controls-card,
    .speech-controls-tab {
        transition: none;
        animation: none;
    }
}


/* ==========================================================
   OVS control sections v1
   ========================================================== */

.speech-control-section {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 13px;

    background:
        color-mix(
            in srgb,
            var(--ovs-surface-control) 72%,
            transparent
        );
}


.speech-control-section-head {
    padding:
        12px
        13px
        10px;

    border-bottom:
        1px solid
        var(--ovs-border);

    background:
        color-mix(
            in srgb,
            var(--ovs-surface-special) 78%,
            transparent
        );
}


.speech-control-section-head > div {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 10px;
}


.speech-control-section-head > div > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.speech-control-section-head strong {
    color:
        var(--ovs-text-primary);

    font-size: 12px;
    font-weight: 900;
}


.speech-control-section-head div > div > span {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
    line-height: 1.35;
}


.speech-section-code {
    min-width: 38px;
    height: 30px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    padding:
        0
        6px;

    border:
        1px solid
        var(--ovs-speech-code-border);

    border-radius: 8px;

    background:
        var(--ovs-speech-runtime-bg);

    color:
        var(--ovs-speech-runtime-muted);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
}


.speech-control-section-body {
    display: grid;

    padding:
        2px
        13px;
}


.speech-control-section-body
.speech-control-row {
    min-height: 58px;

    padding:
        9px
        0;
}


.speech-control-section-body
.speech-control-row
+ .speech-control-row,

.speech-control-section-body
.speech-control-row
+ .speech-gift-minimum,

.speech-control-section-body
.speech-gift-minimum
+ .speech-control-row {
    border-top:
        1px solid
        var(--ovs-border);
}


.speech-control-section-body
.speech-gift-minimum {
    margin: 0;

    padding:
        12px
        0;
}


.speech-section-future {
    display: grid;

    gap: 3px;

    margin:
        2px
        0
        12px;

    padding:
        10px
        11px;

    border:
        1px dashed
        var(--ovs-border-strong);

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--ovs-surface-special) 58%,
            transparent
        );
}


.speech-section-future > span {
    color:
        var(--ovs-text-muted);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.speech-section-future strong {
    color:
        var(--ovs-text-primary);

    font-size: 10px;
    line-height: 1.4;
}


.speech-section-future small {
    color:
        var(--ovs-text-muted);

    font-size: 9px;
}


/*
 * Kody sekcji zastępują wizualnie małe kody poszczególnych
 * pstryczków. Same elementy pozostają w DOM dla ciągłości.
 */
.speech-control-section
.speech-control-code {
    display: none;
}


@media (max-width: 850px) {
    .speech-control-section-head {
        padding:
            12px
            12px
            10px;
    }

    .speech-control-section-body {
        padding:
            2px
            12px;
    }
}


.speech-profile-control {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, 190px);
    align-items: center;
    gap: 14px;

    padding:
        12px
        0;
}

.speech-profile-control > span {
    min-width: 0;
}

.speech-profile-control strong {
    display: block;

    color:
        var(--ovs-text-primary);

    font-size: 12px;
    font-weight: 800;
}

.speech-profile-control small {
    display: block;

    margin-top: 3px;

    color:
        var(--ovs-text-muted);

    font-size: 9px;
    line-height: 1.35;
}

.speech-profile-control select {
    width: 100%;
    min-height: 36px;

    padding:
        7px
        30px
        7px
        10px;

    border:
        1px solid
        var(--ovs-speech-input-border);

    border-radius: 9px;

    outline: none;

    background:
        var(--ovs-surface-input);

    color:
        var(--ovs-text-primary);

    font-size: 11px;
    font-weight: 750;
}

.speech-profile-control select:focus {
    border-color:
        var(--ovs-accent);
}

.speech-profile-control select:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .speech-profile-control {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   OVS comment audience filters
   ========================================================== */

.speech-comment-filters {
    display: grid;
    gap: 12px;

    padding: 14px;

    border: 1px solid var(--ovs-border);
    border-radius: 12px;

    background:
        rgba(255, 255, 255, .018);
}


.speech-comment-filter-title {
    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
}


.speech-comment-mode {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}


.speech-comment-mode label {
    min-width: 0;
}


.speech-comment-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


.speech-comment-mode span {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px 10px;

    border: 1px solid var(--ovs-border);
    border-radius: 9px;

    background: var(--ovs-surface-control);

    color: var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    transition:
        border-color .12s ease,
        background .12s ease,
        color .12s ease;
}


.speech-comment-mode input:checked + span {
    border-color:
        rgba(57, 217, 138, .48);

    background:
        rgba(57, 217, 138, .08);

    color: var(--ovs-text-primary);
}


.speech-comment-mode input:disabled + span {
    opacity: .45;
    cursor: not-allowed;
}


.speech-comment-selected {
    display: grid;
    gap: 0;

    border-top: 1px solid var(--ovs-border);
}


.speech-comment-filter-row,
.speech-comment-fan-level {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-bottom: 1px solid var(--ovs-border);

    color: var(--ovs-speech-control-text);

    font-size: 12px;
    font-weight: 650;
}


.speech-comment-selected
> :last-child {
    border-bottom: 0;
}


.speech-comment-fan-level input {
    width: 72px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid
        var(--ovs-speech-input-border);
    border-radius: 8px;

    outline: none;

    background:
        var(--ovs-surface-input);

    color: var(--ovs-text-primary);

    text-align: center;
}


.speech-comment-fan-level input:focus {
    border-color: var(--ovs-accent);
}


.speech-comment-fan-level input:disabled {
    opacity: .45;
    cursor: not-allowed;
}


@media (max-width: 560px) {
    .speech-comment-mode {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   Jarviska device volume
   ========================================================== */

.voice-volume-control {
    display: grid;
    gap: 8px;

    margin: 14px 0;
}

.voice-volume-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.voice-volume-head strong {
    font-size: 12px;
}

.voice-volume-value {
    min-width: 44px;

    color: var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.voice-volume-control input[type="range"] {
    width: 100%;
}

.voice-volume-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--ovs-text-muted);

    font-size: 10px;
}

/* Jarviska volume in OVS control drawer */
.speech-master-volume {
    margin: 2px 0 7px;
    padding: 0;
}



/* ==========================================================
   Comments workspace v1
   ========================================================== */

.comments-header-title {
    flex: 0 0 auto;
}

.comments-header-tools {
    min-width: 0;

    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 14px;
}


/* Search must look like an actual control. */

.comments-search {
    position: relative;

    width: min(360px, 100%);
    min-width: 220px;
    height: 38px;

    display: flex;
    align-items: center;

    border: 1px solid var(--ovs-border);
    border-radius: 10px;

    background: var(--ovs-surface-input);

    transition:
        border-color .12s ease,
        background .12s ease,
        box-shadow .12s ease;
}

.comments-search:hover {
    border-color: var(--ovs-modal-hover-border);
}

.comments-search:focus-within {
    border-color: var(--ovs-accent);

    box-shadow:
        0 0 0 2px rgba(37, 244, 238, .08);
}

.comments-search-icon {
    flex: 0 0 auto;

    margin-left: 11px;

    color: var(--ovs-text-muted);

    font-size: 14px;
    line-height: 1;
}

.comments-search input {
    min-width: 0;
    width: 100%;
    height: 100%;

    padding:
        0
        34px
        0
        9px;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--ovs-text-primary);

    font-size: 11px;
}

.comments-search input::placeholder {
    color: var(--ovs-text-muted);
    opacity: .8;
}

.comments-search-clear {
    position: absolute;

    top: 50%;
    right: 8px;

    width: 24px;
    height: 24px;

    transform: translateY(-50%);

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: var(--ovs-text-muted);

    font-size: 16px;
    line-height: 1;
}

.comments-search-clear:hover {
    background: var(--ovs-surface-control-hover);
    color: var(--ovs-text-primary);
}


/* Text size selector. */

.comments-text-size {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 800;
}

.comments-text-size > span {
    letter-spacing: .04em;
}

.comments-text-size-options {
    display: flex;

    padding: 2px;

    border: 1px solid var(--ovs-border);
    border-radius: 9px;

    background: var(--ovs-surface-2);
}

.comments-text-size-options button {
    min-width: 27px;
    height: 25px;

    padding: 0 6px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: var(--ovs-text-muted);

    font-size: 10px;
    font-weight: 900;
}

.comments-text-size-options button:hover {
    color: var(--ovs-text-primary);
}

.comments-text-size-options button.active {
    background: var(--ovs-surface-control-hover);
    color: var(--ovs-accent);
}


/* Comment typography presets. */

.comments-pane {
    --ovs-comment-author-size: 13px;
    --ovs-comment-handle-size: 10px;
    --ovs-comment-content-size: 15px;
    --ovs-comment-time-size: 10px;
    --ovs-comment-line-height: 1.45;
    --ovs-comment-row-padding: 14px;
}

.comments-pane[data-text-size="s"] {
    --ovs-comment-author-size: 12px;
    --ovs-comment-handle-size: 9px;
    --ovs-comment-content-size: 14px;
    --ovs-comment-time-size: 9px;
    --ovs-comment-line-height: 1.42;
    --ovs-comment-row-padding: 12px;
}

.comments-pane[data-text-size="m"] {
    --ovs-comment-author-size: 13px;
    --ovs-comment-handle-size: 10px;
    --ovs-comment-content-size: 15px;
    --ovs-comment-time-size: 10px;
    --ovs-comment-line-height: 1.45;
    --ovs-comment-row-padding: 14px;
}

.comments-pane[data-text-size="l"] {
    --ovs-comment-author-size: 15px;
    --ovs-comment-handle-size: 11px;
    --ovs-comment-content-size: 17px;
    --ovs-comment-time-size: 11px;
    --ovs-comment-line-height: 1.48;
    --ovs-comment-row-padding: 16px;
}

.comments-pane[data-text-size="xl"] {
    --ovs-comment-author-size: 17px;
    --ovs-comment-handle-size: 12px;
    --ovs-comment-content-size: 20px;
    --ovs-comment-time-size: 12px;
    --ovs-comment-line-height: 1.5;
    --ovs-comment-row-padding: 18px;
}

.comments-pane .comment {
    padding-top:
        var(--ovs-comment-row-padding);

    padding-bottom:
        var(--ovs-comment-row-padding);
}

.comments-pane .comment-author strong {
    font-size:
        var(--ovs-comment-author-size);
}

.comments-pane .comment-author span {
    font-size:
        var(--ovs-comment-handle-size);
}

.comments-pane .comment-content {
    font-size:
        var(--ovs-comment-content-size);

    line-height:
        var(--ovs-comment-line-height);
}

.comments-pane .comment-time {
    font-size:
        var(--ovs-comment-time-size);
}


@media (max-width: 1100px) {
    .comments-header {
        align-items: flex-start;
    }

    .comments-header-tools {
        flex-wrap: wrap;
    }

    .comments-search {
        flex: 1 1 260px;
    }
}


@media (max-width: 720px) {
    .comments-header {
        flex-direction: column;
        align-items: stretch;

        gap: 12px;
    }

    .comments-header-tools {
        justify-content: flex-start;
    }

    .comments-search {
        order: 1;

        width: 100%;
        flex-basis: 100%;
    }

    .comments-text-size {
        order: 2;
    }

    .comments-meta {
        order: 3;

        margin-left: auto;
    }
}


/* ==========================================================
   OVS host aliases
   ========================================================== */

.host-alias-field {
    margin-bottom: 18px;
}

.host-alias-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 8px;
}

.host-alias-list.is-empty {
    display: none;
}

.host-alias-pill {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 3px 5px 3px 9px;

    border: 1px solid var(--ovs-border);
    border-radius: 999px;

    background: var(--ovs-surface-2);
    color: var(--ovs-text-primary);

    font-size: 11px;
    font-weight: 700;
}

.host-alias-remove {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--ovs-text-muted);

    cursor: pointer;

    font-size: 15px;
    line-height: 1;
}

.host-alias-remove:hover {
    background: var(--ovs-surface-input);
    color: var(--ovs-text-primary);
}

.host-alias-hint {
    display: block;

    margin-top: 6px;

    color: var(--ovs-text-muted);

    font-size: 10px;
    line-height: 1.45;
}


/* ==========================================================
   Viewer Questions v1
   ========================================================== */

.comments-view-tabs {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 5px;
}


.comments-view-tab {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 0 11px;

    border: 1px solid transparent;
    border-radius: 9px;

    background: transparent;
    color: var(--ovs-text-muted);

    font-size: 13px;
    font-weight: 800;
}


.comments-view-tab:hover {
    color: var(--ovs-text-primary);
    background: var(--ovs-surface-control);
}


.comments-view-tab.active {
    border-color: var(--ovs-border-strong);

    background: var(--ovs-surface-control);
    color: var(--ovs-text-primary);
}


.comments-question-count {
    min-width: 20px;
    height: 20px;

    display: inline-grid;
    place-items: center;

    padding: 0 6px;

    border-radius: 10px;

    background: rgba(37, 244, 238, .12);
    color: var(--ovs-accent);

    font-size: 10px;
    line-height: 1;
}


.comments-pane[data-comments-view="questions"]
.comments-search {
    display: none;
}


.questions-list {
    flex: 1;

    overflow-y: auto;

    padding: 12px 18px 24px;
}


.questions-empty {
    min-height: 240px;

    display: grid;
    place-items: center;

    padding: 30px;

    color: var(--ovs-text-muted);

    text-align: center;
    font-size: 13px;
}


.viewer-question-card {
    display: grid;
    gap: 10px;

    padding: 15px 4px;

    border-bottom:
        1px solid var(--ovs-row-divider);
}


.viewer-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: var(--ovs-text-muted);

    font-size: 11px;
}


.viewer-question-head strong {
    overflow: hidden;

    color: var(--ovs-text-primary);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
}


.viewer-question-head time {
    flex: 0 0 auto;
}


.viewer-question-content {
    width: 100%;

    padding: 0;

    border: 0;

    background: transparent;
    color: var(--ovs-text-primary);

    text-align: left;

    font: inherit;
    font-size:
        var(--ovs-comment-content-size, 15px);
    line-height: 1.45;

    cursor: pointer;
}


.viewer-question-content:hover {
    color: var(--ovs-accent);
}


.viewer-question-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    flex: 0 0 auto;
}


.viewer-question-action {
    min-height: 32px;

    padding: 0 11px;

    border: 1px solid var(--ovs-border);
    border-radius: 8px;

    background: var(--ovs-surface-control);
    color: var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 800;
}


.viewer-question-action:hover {
    border-color: var(--ovs-border-strong);
    color: var(--ovs-text-primary);
}


.viewer-question-action.primary {
    border-color: rgba(57, 217, 138, .30);
    color: var(--ovs-success);
}


.comment-question-focus {
    border-radius: 10px;

    background:
        rgba(37, 244, 238, .08);

    box-shadow:
        inset 3px 0 0 var(--ovs-accent);
}


@media (max-width: 720px) {
    .comments-view-tabs {
        flex-wrap: wrap;
    }

    .viewer-question-actions {
        flex-wrap: wrap;
    }
}


.viewer-question-header-row {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;
}


.viewer-question-avatar,
.viewer-question-avatar-fallback {
    width: 38px;
    height: 38px;

    border-radius: 50%;
}


.viewer-question-avatar {
    object-fit: cover;

    background: var(--ovs-surface-2);
}


.viewer-question-avatar-fallback {
    display: grid;
    place-items: center;

    background: var(--ovs-surface-2);
    color: var(--ovs-text-muted);

    font-size: 13px;
    font-weight: 900;
}


.viewer-question-header-row
.viewer-question-head {
    min-width: 0;
}


.viewer-question-header-row
.viewer-question-head strong {
    min-width: 0;
}


@media (max-width: 620px) {
    .viewer-question-header-row {
        grid-template-columns:
            34px
            minmax(0, 1fr);
    }

    .viewer-question-avatar,
    .viewer-question-avatar-fallback {
        width: 34px;
        height: 34px;
    }

    .viewer-question-actions {
        grid-column: 2;

        justify-self: start;
    }
}


.viewer-question-author {
    min-width: 0;

    display: grid;
    gap: 1px;
}


.viewer-question-author strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.viewer-question-author span {
    overflow: hidden;

    color: var(--ovs-text-muted);

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   OVS Alerts v1
   ========================================================= */

.alerts-view {
    grid-column: 1 / -1;
    min-width: 0;
}

.alerts-card {
    min-height: 420px;
}

.alerts-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.alerts-heading .card-heading p {
    margin: 6px 0 0;
    color: var(--ovs-text-secondary);
}

.alerts-loading,
.alerts-empty {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--ovs-text-secondary);
}

.alerts-empty strong {
    color: var(--ovs-text-primary);
    font-size: 17px;
}

.alerts-list {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.alert-rule-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--ovs-border);
    border-radius: 14px;
    background: var(--ovs-surface-2);
}

.alert-rule-match {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--ovs-modal-soft-fill);
    font-size: 30px;
    font-weight: 800;
}

.alert-rule-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alert-rule-copy strong {
    color: var(--ovs-text-primary);
}

.alert-rule-copy span,
.alert-rule-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ovs-text-secondary);
}

.alert-rule-state {
    min-width: 52px;
    min-height: 30px;
    padding: 5px 9px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 999px;

    background:
        transparent;

    color:
        var(--ovs-text-secondary);

    text-align: center;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        opacity .15s ease;
}

.alert-rule-state:hover {
    border-color:
        var(--ovs-modal-hover-border);

    background:
        var(--ovs-modal-soft-fill);

    color:
        var(--ovs-text-primary);
}

.alert-rule-state[data-enabled="1"] {
    color:
        var(--ovs-accent);

    border-color:
        currentColor;

    background:
        color-mix(
            in srgb,
            var(--ovs-accent) 8%,
            transparent
        );
}

.alert-rule-state:disabled {
    opacity: .55;
    cursor: wait;
}

.alert-editor-modal {
    width: min(760px, calc(100vw - 56px));
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 56px);
}

.alert-editor-body {
    display: grid;
    gap: 18px;
    padding: 22px;
    overflow: auto;
}

.alert-editor-match-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    align-items: end;
}

.alert-emoji-choice {
    min-height: 58px;
    width: 100%;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--ovs-border);
    border-radius: 10px;
    background: var(--ovs-modal-input-bg);
    color: var(--ovs-text-primary);
    cursor: pointer;
}

.alert-emoji-choice strong {
    font-size: 28px;
}

.alert-emoji-choice span {
    color: var(--ovs-text-secondary);
    font-size: 12px;
}

.alert-editor-note {
    padding: 12px 14px;
    border: 1px solid var(--ovs-border);
    border-radius: 10px;
    color: var(--ovs-text-secondary);
    font-size: 13px;
}

.emoji-picker-modal {
    width: min(920px, calc(100vw - 56px));
    height: min(760px, calc(100vh - 56px));
    min-height: 500px;
}

.emoji-picker-toolbar {
    flex: 0 0 auto;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--ovs-border);
}

.emoji-picker-search {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--ovs-border);
    border-radius: 12px;
    background: var(--ovs-modal-input-bg);
}

.emoji-picker-search span {
    color: var(--ovs-text-secondary);
    font-size: 22px;
}

.emoji-picker-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ovs-text-primary);
    font: inherit;
}

.emoji-picker-categories {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-top: 10px;
    scrollbar-width: thin;
}

.emoji-picker-category {
    flex: 0 0 42px;
    width: 42px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.emoji-picker-category:hover,
.emoji-picker-category.active {
    border-color: var(--ovs-modal-hover-border);
    background: var(--ovs-modal-soft-fill);
}

.emoji-picker-recent {
    flex: 0 0 auto;
    padding: 12px 18px 0;
}

.emoji-picker-recent > strong {
    display: block;
    margin-bottom: 8px;
    color: var(--ovs-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.emoji-picker-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(48px, 1fr));
    align-content: start;
    gap: 4px;
    padding: 14px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.emoji-picker-grid-recent {
    max-height: 116px;
    padding: 0;
    overflow-y: auto;
}

.emoji-picker-item {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker-item:hover,
.emoji-picker-item:focus-visible {
    border-color: var(--ovs-modal-hover-border);
    background: var(--ovs-modal-soft-fill);
    outline: 0;
}

@media (max-width: 900px) {
    .alerts-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .alert-editor-modal,
    .emoji-picker-modal {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    .alert-editor-match-grid {
        grid-template-columns: 1fr;
    }

    .emoji-picker-toolbar {
        padding:
            12px
            12px
            8px;
    }

    .emoji-picker-recent {
        padding:
            10px
            12px
            0;
    }

    .emoji-picker-grid {
        grid-template-columns:
            repeat(7, minmax(0, 1fr));
        gap: 2px;
        padding:
            10px
            10px
            18px;
    }

    .emoji-picker-item {
        font-size: 27px;
        border-radius: 8px;
    }
}

@media (max-width: 520px) {
    .emoji-picker-grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }

    .alert-rule-card {
        grid-template-columns:
            50px
            minmax(0, 1fr)
            auto;
        gap: 10px;
        padding: 10px;
    }

    .alert-rule-match {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }
}


.alert-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.alert-editor-actions .button {
    min-width: 130px;
}

@media (max-width: 520px) {
    .alert-editor-actions {
        flex-direction: column-reverse;
    }

    .alert-editor-actions .button {
        width: 100%;
    }
}


.alert-rule-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.alert-rule-action {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--ovs-border);
    border-radius: 9px;
    background: transparent;
    color: var(--ovs-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.alert-rule-action:hover {
    color: var(--ovs-text-primary);
    border-color: var(--ovs-modal-hover-border);
    background: var(--ovs-modal-soft-fill);
}

.alert-rule-action-danger:hover {
    color: #ff7c87;
    border-color: rgba(255, 124, 135, .55);
}

@media (max-width: 700px) {
    .alert-rule-card {
        grid-template-columns:
            50px
            minmax(0, 1fr);
    }

    .alert-rule-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}


/* =========================================================
   OVS Alerts editor — expanded audio layout
   ========================================================= */

.alert-editor-modal {
    width:
        min(
            1040px,
            calc(100vw - 56px)
        );

    height:
        min(
            880px,
            calc(100vh - 56px)
        );

    max-height:
        calc(100vh - 56px);
}

.alert-editor-body {
    padding: 26px 30px 30px;
}

#alertSpeechText {
    width: 100%;
    min-height: 92px;
    max-height: 180px;
    resize: vertical;
    line-height: 1.45;
}

.alert-speech-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.alert-speech-tools .button {
    flex: 0 0 auto;
    min-width: 170px;
}

.alert-help {
    display: grid;
    gap: 8px;

    padding: 16px 18px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-modal-soft-fill);
}

.alert-help > strong {
    color:
        var(--ovs-text-primary);

    font-size: 15px;
}

.alert-help p {
    margin: 0;

    color:
        var(--ovs-text-secondary);

    font-size: 13px;
    line-height: 1.5;
}

.alert-help code {
    color:
        var(--ovs-text-primary);
}

.alert-sound-section {
    display: grid;
    gap: 16px;

    padding: 18px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 14px;

    background:
        var(--ovs-modal-surface);
}

.alert-sound-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.alert-sound-heading > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.alert-sound-heading > div > strong {
    color:
        var(--ovs-text-primary);

    font-size: 16px;
}

.alert-sound-heading small {
    color:
        var(--ovs-text-secondary);
}

.alert-sound-status {
    flex: 0 0 auto;

    padding: 5px 9px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 999px;

    color:
        var(--ovs-text-secondary);

    font-size: 11px;
    font-weight: 800;
}

.alert-sound-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-sound-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.alert-sound-upload input {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

.alert-sound-file {
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr);

    align-items: center;
    gap: 12px;

    padding: 10px 12px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 10px;

    background:
        var(--ovs-modal-input-bg);
}

.alert-sound-file span {
    color:
        var(--ovs-text-secondary);

    font-size: 12px;
}

.alert-sound-file strong {
    overflow: hidden;

    color:
        var(--ovs-text-primary);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-sound-volume {
    padding: 12px;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 10px;
}

.alert-sound-volume-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.alert-sound-volume-head span {
    color:
        var(--ovs-text-secondary);
}

.alert-sound-volume-head strong {
    color:
        var(--ovs-text-primary);
}

#alertSoundVolume {
    width: 100%;
}

@media (max-width: 900px) {
    .alert-editor-modal {
        width:
            calc(100vw - 24px);

        height:
            calc(100vh - 24px);

        max-height:
            calc(100vh - 24px);
    }

    .alert-editor-body {
        padding:
            18px
            16px
            22px;
    }
}

@media (max-width: 520px) {
    #alertSpeechText {
        min-height: 88px;
        max-height: 150px;
    }

    .alert-speech-tools {
        align-items: stretch;
        flex-direction: column;
    }

    .alert-speech-tools .button {
        width: 100%;
    }

    .alert-sound-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .alert-sound-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .alert-sound-controls .button {
        width: 100%;
    }
}


/* ============================================================
   OVS Battle HUD — 1v1 aggregate / multiplayer participant segments
   ============================================================ */

.battle-hud {
    position: fixed;
    top: var(--ovs-battle-hud-top, 64px);
    left: 8px;
    right: 8px;

    height: 34px;

    z-index: 140;
    pointer-events: none;

    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.battle-hud[hidden] {
    display: none !important;
}

.battle-hud-shell {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 9px;

    background:
        rgba(7, 12, 16, 0.94);

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.38);
}

.battle-hud-side {
    position: absolute;
    top: 0;
    bottom: 0;

    transition:
        width 220ms linear;
}

.battle-hud-side-ours {
    left: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 223, 213, 0.84),
            rgba(0, 173, 198, 0.82)
        );
}

.battle-hud-side-theirs {
    right: 0;

    background:
        linear-gradient(
            90deg,
            rgba(194, 64, 172, 0.82),
            rgba(232, 67, 126, 0.86)
        );
}

.battle-hud-segments {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
}

.battle-hud-segments[hidden] {
    display: none;
}

.battle-hud.has-multi-progress .battle-hud-side,
.battle-hud.has-multi-progress .battle-hud-score {
    visibility: hidden;
}

.battle-hud-segment {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
    background: var(--ovs-battle-participant-color);
    box-shadow: inset -1px 0 rgba(255, 255, 255, .3);
}

.battle-hud-segment-score {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    visibility: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

.battle-hud-content {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns:
        minmax(70px, 1fr)
        auto
        minmax(70px, 1fr);

    align-items: center;

    padding:
        0 12px;

    gap: 10px;

    color: #fff;

    text-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.85);
}

.battle-hud-score {
    position: relative;
    z-index: 2;

    font-size: 14px;
    font-weight: 900;
    line-height: 1;

    font-variant-numeric:
        tabular-nums;
}

.battle-hud-score-ours {
    justify-self: start;
}

.battle-hud-score-theirs {
    justify-self: end;
}

.battle-hud-center {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 7px;

    height: 24px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 999px;

    background:
        rgba(5, 9, 12, 0.82);

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, 0.34);
}

.battle-hud-center span {
    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.12em;

    color:
        #b9fff9;
}

.battle-hud-center strong {
    min-width: 36px;

    font-size: 12px;
    font-weight: 900;

    text-align: center;

    font-variant-numeric:
        tabular-nums;
}

.battle-hud-participants {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    pointer-events: none;
}

.battle-hud-participants.is-scrollable {
    pointer-events: auto;
}

.battle-hud-participants[hidden] {
    display: none;
}

.battle-hud-participant {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 3px 8px;
    border: 1px solid var(--ovs-battle-participant-color, rgba(255, 255, 255, .18));
    border-radius: 6px;
    background: rgba(7, 12, 16, .94);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.battle-hud-participant.ours {
    border-color: #00dfd5;
}

.battle-hud-participant-ours {
    color: #b9fff9;
}

.battle-hud-participant-name {
    min-width: 0;
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 760px) {
    .battle-hud {
        left: 5px;
        right: 5px;

        height: 32px;
    }

    .battle-hud-content {
        grid-template-columns:
            minmax(52px, 1fr)
            auto
            minmax(52px, 1fr);

        padding:
            0 8px;

        gap: 6px;
    }

    .battle-hud-score {
        font-size: 12px;
    }

    .battle-hud-segment-score {
        font-size: 12px;
    }

    .battle-hud-center {
        height: 22px;

        padding:
            0 7px;
    }

    .battle-hud-center span {
        display: none;
    }
}


/* ============================================================
   OVS Battle Reward HUD v1
   Globalny BattleTask reward pod playerem.
   ============================================================ */

.battle-reward-hud {
    width: 100%;
    max-width: 370px;

    margin:
        5px auto
        0;

    pointer-events: none;
}

.battle-reward-hud[hidden] {
    display: none !important;
}

.battle-reward-hud-shell {
    position: relative;

    min-height: 38px;

    overflow: hidden;

    border:
        1px solid
        rgba(155, 91, 255, .40);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(39, 24, 68, .96),
            rgba(20, 14, 36, .97)
        );

    box-shadow:
        0 7px 20px
        rgba(0, 0, 0, .28);
}

.battle-reward-hud-progress {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #8d5cff,
            #e85bd8
        );

    transition:
        width 240ms linear;
}

.battle-reward-hud-content {
    position: relative;
    z-index: 2;

    min-height: 38px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 9px;

    padding:
        0 11px;

    color: #fff;
}

.battle-reward-hud-label {
    color:
        rgba(255, 255, 255, .70);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .13em;
}

.battle-reward-hud-multiplier {
    font-size: 20px;
    font-weight: 950;

    line-height: 1;

    letter-spacing: -.02em;

    text-shadow:
        0 0 14px
        rgba(155, 91, 255, .50);
}

.battle-reward-hud-meta {
    min-width: 42px;

    color:
        rgba(255, 255, 255, .82);

    font-size: 12px;
    font-weight: 850;

    font-variant-numeric:
        tabular-nums;

    text-align: right;
}

.battle-reward-hud.is-active
.battle-reward-hud-shell {
    border-color:
        rgba(255, 195, 77, .58);

    background:
        linear-gradient(
            90deg,
            rgba(91, 49, 13, .97),
            rgba(47, 25, 13, .97)
        );

    box-shadow:
        0 7px 22px
        rgba(255, 165, 32, .12);
}

.battle-reward-hud.is-active
.battle-reward-hud-progress {
    background:
        linear-gradient(
            90deg,
            #ffc34d,
            #ff7a45
        );
}

.battle-reward-hud.is-active
.battle-reward-hud-multiplier {
    color: #ffd36a;

    text-shadow:
        0 0 16px
        rgba(255, 184, 54, .50);
}

/* ==========================================================
   LIVE EVENT CENTER COMPACT UI v1
   ========================================================== */

.event-center-header {
    min-height: 68px;

    padding:
        10px
        22px;
}

.event-center-header h2 {
    margin-top: 2px;

    font-size: 20px;
}

.event-center-subtitle {
    margin-top: 2px;
}

.event-center-close {
    width: 38px;
    height: 38px;
}


.event-center-tabs-row {
    flex: 0 0 auto;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        0
        22px;

    border-bottom:
        1px solid
        var(--ovs-border);
}

.event-center-tabs {
    min-width: 0;

    padding: 0;

    border-bottom: 0;
}

.event-center-tab {
    min-height: 51px;
}


.event-center-search-inline {
    width:
        min(
            360px,
            38vw
        );

    flex: 0 1 360px;
}

.event-center-search-inline > span {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;
}

.event-center-search-inline input {
    height: 36px;
}


.event-center-content {
    padding:
        10px
        22px
        14px;
}


.event-center-kpis {
    grid-template-columns:
        minmax(130px, .7fr)
        minmax(130px, .7fr)
        minmax(130px, .7fr)
        minmax(280px, 2fr);

    gap: 8px;

    margin-bottom: 8px;
}

.event-center-kpi {
    min-height: 58px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    grid-template-rows:
        auto
        auto;

    align-content: center;
    align-items: baseline;

    column-gap: 9px;
    row-gap: 2px;

    padding:
        8px
        12px;
}

.event-center-kpi-label {
    grid-column:
        1 / -1;

    font-size: 9px;
}

.event-center-kpi-value {
    grid-column: 1;

    margin-top: 0;

    font-size: 20px;

    line-height: 1;
}

.event-center-kpi-meta {
    grid-column: 2;

    margin-top: 0;

    align-self: end;

    font-size: 9px;
}


.event-center-kpi.top-gifter {
    grid-template-columns:
        34px
        minmax(0, 1fr);

    grid-template-rows:
        auto
        auto
        auto;

    column-gap: 10px;
}

.event-center-kpi.top-gifter
.event-center-kpi-label {
    grid-column:
        1 / -1;
}

.event-center-kpi-top-avatar {
    grid-column: 1;
    grid-row:
        2 / 4;

    width: 32px;
    height: 32px;

    align-self: center;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 50%;

    background:
        var(--ovs-surface-2);
}

.event-center-kpi-top-avatar img,
.event-center-user-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.event-center-kpi.top-gifter
.event-center-kpi-value {
    grid-column: 2;
    grid-row: 2;

    margin-top: 0;

    font-size: 14px;

    line-height: 1.15;
}

.event-center-kpi.top-gifter
.event-center-kpi-meta {
    grid-column: 2;
    grid-row: 3;

    align-self: start;
}


.event-center-favorites-block {
    min-height: 38px;

    margin-bottom: 8px;

    padding:
        5px
        10px;
}


.event-center-gift-grid {
    gap: 12px;

    grid-template-columns:
        minmax(
            220px,
            285px
        )
        minmax(
            0,
            1fr
        );
}


.event-center-pane-header {
    min-height: 48px;

    padding:
        8px
        11px;
}

.event-center-ranking-header {
    min-height: 54px;

    padding:
        8px
        13px;
}

.event-center-selected-copy h3 {
    font-size: 17px;
}

.event-center-sortbar {
    padding:
        6px
        11px;
}

.event-center-sortbar select {
    height: 29px;
}


.event-center-table th,
.event-center-table td {
    padding:
        8px
        10px;
}

.event-center-table th:nth-child(1),
.event-center-table td:nth-child(1) {
    width: 40px;
}

.event-center-table th:nth-child(3),
.event-center-table td:nth-child(3),
.event-center-table th:nth-child(4),
.event-center-table td:nth-child(4) {
    width: 86px;
}

.event-center-table th:nth-child(5),
.event-center-table td:nth-child(5) {
    width: 82px;
}


.event-center-user {
    min-width: 0;

    display: grid;

    grid-template-columns:
        34px
        minmax(
            0,
            1fr
        );

    align-items: center;

    gap: 9px;
}

.event-center-user-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        var(--ovs-border);

    border-radius: 50%;

    background:
        var(--ovs-surface-2);
}

.event-center-avatar-fallback {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    color:
        var(--ovs-text-muted);

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
}

.event-center-user-copy {
    min-width: 0;

    display: block;
}

.event-center-user-copy strong,
.event-center-user-copy span {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


@media (max-width: 950px) {
    .event-center-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    110px,
                    1fr
                )
            );
    }

    .event-center-kpi.top-gifter {
        grid-column:
            1 / -1;
    }

    .event-center-search-inline {
        flex-basis: 280px;

        width:
            min(
                280px,
                38vw
            );
    }
}


@media (max-width: 700px) {
    .event-center-header {
        min-height: 62px;

        padding:
            8px
            12px;
    }

    .event-center-tabs-row {
        min-height: auto;

        align-items: stretch;

        flex-direction: column;

        gap: 6px;

        padding:
            0
            12px
            8px;
    }

    .event-center-tabs {
        width: 100%;
    }

    .event-center-tab {
        min-height: 42px;
    }

    .event-center-search-inline {
        width: 100%;

        flex:
            0 0 auto;
    }

    .event-center-content {
        padding:
            8px
            12px
            12px;
    }

    .event-center-kpis {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        gap: 6px;
    }

    .event-center-kpi {
        min-height: 54px;

        padding:
            7px
            8px;
    }

    .event-center-kpi.top-gifter {
        grid-column:
            1 / -1;
    }

    .event-center-user {
        grid-template-columns:
            30px
            minmax(
                0,
                1fr
            );

        gap: 7px;
    }

    .event-center-user-avatar {
        width: 30px;
        height: 30px;
    }
}

/* ==========================================================
   EVENT CENTER GIFTER PROFILE LINK v1
   ========================================================== */

.event-center-table tbody
tr.event-center-gifter-profile-enabled {
    cursor: pointer;

    transition:
        background-color .14s ease;
}

.event-center-table tbody
tr.event-center-gifter-profile-enabled:hover {
    background:
        var(--ovs-surface-2);
}

.event-center-table tbody
tr.event-center-gifter-profile-enabled:focus-visible {
    outline:
        1px solid
        var(--ovs-accent);

    outline-offset: -1px;

    background:
        var(--ovs-surface-2);
}

.event-center-table tbody
tr.event-center-gifter-profile-enabled:hover
.event-center-user strong {
    color:
        var(--ovs-accent);
}

/* ==========================================================
   OVS Responsive Layout v1
   Final layout overrides; keep the existing DOM and drawer.
   1920px retains the 400px sidebar and 390px preview column.
   ========================================================== */

:root {
    --ovs-layout-viewport: 100vh;
    --ovs-layout-gap: 20px;
    --ovs-layout-padding: 24px;
    --ovs-layout-sidebar: 400px;
    --ovs-layout-preview: 390px;
    --ovs-layout-ranking: 180px;
}

/* One viewport token keeps older WebViews on vh. */
@supports (height: 100dvh) {
    :root {
        --ovs-layout-viewport: 100dvh;
    }
}

.app-shell {
    height: var(--ovs-layout-viewport);
}

main {
    width: min(1840px, 100%);
    padding: var(--ovs-layout-padding);
}

.workspace-grid,
.workspace.speech-controls-collapsed .workspace-grid {
    grid-template-columns:
        var(--ovs-layout-ranking)
        var(--ovs-layout-sidebar)
        minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--ovs-layout-gap);
}

.sidebar {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    grid-auto-rows: max-content;
    gap: var(--ovs-layout-gap);
    overscroll-behavior: contain;
}

.comments-card {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    grid-template-columns: var(--ovs-layout-preview) minmax(0, 1fr);
}

.comments-pane {
    container: ovs-comments / inline-size;
}

.comments-header,
.comments-header-tools {
    flex-wrap: wrap;
}

.comments-search {
    min-width: 0;
    flex: 1 1 220px;
}

.comments-header-title,
.comments-meta {
    min-width: 0;
}

.comments-empty,
.questions-list {
    min-height: 0;
}

.comments-header,
.battle-reward-hud {
    flex-shrink: 0;
}

.ovs-live-phone-heading {
    flex-wrap: wrap;
}

/* Anchor transient gifts below the header, even when its tools wrap. */
.mega-gift-banner {
    position: relative;
    inset: auto;
    flex: 0 0 0;
    height: 0;
    min-height: 0;
    margin-inline: 12px;
}

.mega-gift-banner-card {
    margin-top: 8px;
}

.viewer-question-content,
.live-details dd {
    overflow-wrap: anywhere;
}

/* Tools respond to the actual chat width, including narrow desktop. */
@container ovs-comments (max-width: 680px) {
    .comments-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .comments-header-tools {
        justify-content: flex-start;
        gap: 8px;
    }

    .comments-search {
        order: 0;
    }
}

.ovs-live-phone {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ovs-live-phone-frame {
    flex: 0 0 auto;
}

.ovs-live-phone-frame,
.battle-reward-hud {
    max-width: min(100%, 640px, calc((var(--ovs-layout-viewport) - 260px) * .5625));
}

@media (min-width: 851px) {
    .ovs-live-phone {
        container: ovs-preview / size;
    }

    .ovs-live-phone-frame,
    .battle-reward-hud {
        max-width: min(100%, 640px, calc((100cqh - 96px) * .5625));
    }
}

.top-gifters-card {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 6px 8px;
}

.top-gifter-value {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Keep secondary screens independent of cockpit column placement. */
.workspace.settings-mode .workspace-grid,
.workspace.settings-mode.speech-controls-collapsed .workspace-grid {
    grid-template-columns: minmax(0, 620px);
    grid-template-rows: minmax(0, 1fr);
    justify-content: center;
}

.workspace.settings-mode .sidebar {
    grid-column: 1;
    grid-row: 1;
}

.alerts-view {
    min-height: 0;
    overflow-y: auto;
}

.speech-controls-card {
    max-height: calc(var(--ovs-layout-viewport) - 98px);
}

/* The existing 560px modal minimum overflows phone landscape. */
.event-center-modal {
    min-height: 0;
    max-height: calc(var(--ovs-layout-viewport) - 24px);
}

.event-center-backdrop {
    overflow-y: auto;
}

@media (min-width: 851px) and (max-width: 1799px) {
    :root {
        --ovs-layout-padding: 16px;
        --ovs-layout-gap: 14px;
        --ovs-layout-sidebar: clamp(260px, 24vw, 380px);
        --ovs-layout-preview: clamp(180px, 21vw, 340px);
    }

    main {
        padding-right: 60px;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto auto auto;
        gap: 12px;
    }

    .topbar-left {
        width: auto;
        gap: 12px;
    }

    .top-tabs {
        position: static;
        transform: none;
    }

    .workspace-grid,
    .workspace.speech-controls-collapsed .workspace-grid {
        grid-template-columns: var(--ovs-layout-sidebar) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .sidebar {
        grid-column: 1;
    }

    .comments-card {
        grid-column: 2;
    }

    .top-gifters-card {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        padding: 8px;
        border-top: 1px solid var(--ovs-border);
    }

    .top-gifters-card .card-heading {
        margin: 0;
    }

    .top-gifters-card .card-heading h2 {
        font-size: 14px;
    }

    .top-gifters-list {
        grid-column: 2;
        grid-row: 1 / 3;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: thin;
    }

    .top-gifters-footer {
        margin-top: 4px;
    }
}

@media (min-width: 851px) and (max-width: 1399px) {
    .topbar {
        grid-template-columns: minmax(0, 1fr) auto auto;
        padding-block: 10px;
        gap: 8px 12px;
    }

    .ovs-theme-switcher {
        grid-column: 2;
        grid-row: 1;
    }

    .user-bar {
        grid-column: 3;
        grid-row: 1;
    }

    .top-tabs {
        grid-column: 1 / 3;
        grid-row: 2;
        justify-content: center;
    }

    .live-audience-trigger {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (min-width: 1800px) {
    .topbar-left {
        width: calc(50% - 190px);
    }
}

@media (min-width: 851px) and (max-height: 800px) {
    :root {
        --ovs-layout-padding: 12px;
        --ovs-layout-gap: 12px;
    }

    .sidebar > .card {
        padding: 14px;
    }

    .sidebar .card-heading,
    .soundpad-heading {
        margin-bottom: 10px;
    }

    .live-state {
        margin-top: 12px;
    }

    .live-details {
        margin: 12px 0;
    }

    .soundpad-master {
        margin-bottom: 10px;
        padding: 8px 10px;
    }

    .soundpad-trigger {
        height: clamp(56px, calc(var(--ovs-layout-viewport) * .09), 72px);
        padding: 8px;
    }

    .soundpad-grid {
        gap: 6px;
    }

    .ovs-live-phone {
        padding: 12px 10px;
    }
}

@media (min-width: 2200px) {
    :root {
        --ovs-layout-padding: clamp(28px, 1.1vw, 44px);
        --ovs-layout-gap: clamp(24px, 1vw, 36px);
        --ovs-layout-sidebar: clamp(440px, 18vw, 560px);
        --ovs-layout-preview: clamp(440px, 19vw, 640px);
        --ovs-layout-ranking: clamp(220px, 9vw, 300px);
        --ovs-layout-comment-growth: clamp(2px, .15vw, 5px);
        --ovs-layout-small-text: clamp(12px, .48vw, 16px);
        --ovs-layout-text: clamp(15px, .6vw, 20px);
        --ovs-layout-avatar: clamp(50px, 2vw, 64px);
    }

    main {
        width: min(3200px, 96%);
    }

    .workspace-grid,
    .workspace.speech-controls-collapsed .workspace-grid {
        grid-template-columns:
            var(--ovs-layout-ranking)
            var(--ovs-layout-sidebar)
            minmax(0, 1660px);
        justify-content: center;
    }

    .sidebar > .card {
        padding: clamp(26px, 1vw, 36px);
    }

    .sidebar .card-heading h2,
    .soundpad-heading h2,
    .speech-controls-title h2,
    .top-gifters-card .card-heading h2 {
        font-size: clamp(21px, .85vw, 28px);
    }

    .sidebar .eyebrow,
    .live-details dt,
    .soundpad-status,
    .soundpad-volume-head,
    .soundpad-volume-head strong,
    .soundpad-keycap,
    .speech-control-row,
    .speech-master,
    .speech-control-section-head,
    .comments-search input,
    .comments-text-size,
    .comments-text-size-options button,
    .comments-meta,
    .top-gifter-value,
    .top-gifter-rank,
    .top-gifters-footer,
    .ovs-live-phone-placeholder > small {
        font-size: var(--ovs-layout-small-text);
    }

    .live-details dd,
    .live-state strong,
    .live-state span,
    .soundpad-pad-label,
    .top-gifter-name,
    .ovs-live-phone-heading strong,
    .ovs-live-phone-placeholder > strong {
        font-size: var(--ovs-layout-text);
    }

    .sidebar .button {
        min-height: 52px;
        font-size: var(--ovs-layout-text);
    }

    .soundpad-trigger {
        height: clamp(104px, 4.3vw, 144px);
        padding: 16px;
    }

    .soundpad-stop,
    .speech-controls-collapse {
        width: 40px;
        height: 40px;
    }

    .comments-search {
        height: 44px;
    }

    .comments-text-size-options button {
        min-width: 34px;
        height: 34px;
    }

    /* Add to the user's S/M/L/XL choice instead of replacing it. */
    .comments-pane .comment-author strong {
        font-size: calc(var(--ovs-comment-author-size) + var(--ovs-layout-comment-growth));
    }

    .comments-pane .comment-author span {
        font-size: calc(var(--ovs-comment-handle-size) + var(--ovs-layout-comment-growth));
    }

    .comments-pane .comment-content {
        font-size: calc(var(--ovs-comment-content-size) + var(--ovs-layout-comment-growth));
        max-width: 64ch;
    }

    .comments-pane .comment-time {
        font-size: calc(var(--ovs-comment-time-size) + var(--ovs-layout-comment-growth));
    }

    .comment {
        grid-template-columns: var(--ovs-layout-avatar) minmax(0, 1fr) auto;
    }

    .comment-avatar,
    .comment-avatar-fallback,
    .top-gifter-avatar-wrap {
        width: var(--ovs-layout-avatar);
        height: var(--ovs-layout-avatar);
    }

    .top-gifter-row {
        grid-template-columns: 24px var(--ovs-layout-avatar) minmax(0, 1fr);
        gap: 12px;
        padding: 10px 2px;
    }

    .top-gifter-row[data-rank] .top-gifter-avatar,
    .top-gifter-row[data-rank] .top-gifter-avatar-fallback {
        width: calc(var(--ovs-layout-avatar) - 8px);
        height: calc(var(--ovs-layout-avatar) - 8px);
    }

    .top-gifter-row[data-rank] .top-gifter-avatar-wrap::after {
        width: calc(var(--ovs-layout-avatar) + 16px);
        height: calc(var(--ovs-layout-avatar) + 16px);
    }

    .speech-controls-card {
        width: min(540px, calc(100vw - 32px));
        padding: 26px;
    }

    .speech-toggle {
        width: 46px;
        height: 26px;
        flex-basis: 46px;
    }

    .speech-toggle > span::after {
        width: 18px;
        height: 18px;
    }

    .speech-toggle input:checked + span::after {
        transform: translateX(20px);
    }
}

@media (min-width: 3000px) {
    .ovs-live-phone {
        padding: 24px 20px;
    }

    .comments-header {
        padding: 24px;
    }

    .comments-list,
    .questions-list {
        padding-inline: 26px;
    }
}

@media (max-width: 850px) {
    :root {
        --ovs-layout-padding: 12px;
        --ovs-layout-gap: 12px;
        --ovs-layout-preview: clamp(160px, 26vw, 240px);
    }

    .app-shell {
        height: var(--ovs-layout-viewport);
        min-height: 0;
        overflow: hidden;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body {
        overflow: hidden;
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .topbar-left {
        display: contents;
    }

    .topbar-brand {
        grid-column: 1;
        grid-row: 1;
    }

    .live-event-ticker {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .ovs-theme-switcher {
        grid-column: 2;
        grid-row: 1;
    }

    .top-tabs {
        grid-column: 1 / 3;
        grid-row: 2;
        margin-top: 0;
    }

    .top-tab {
        min-width: 0;
        padding-inline: 8px;
        white-space: normal;
    }

    .user-bar {
        grid-column: 3;
        grid-row: 1;
        margin-left: auto;
    }

    .live-audience-trigger {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
    }

    /* Base mobile CSS hides analytics with !important; keep .hidden intact. */
    .live-audience-trigger:not(.hidden) {
        display: flex !important;
    }

    main {
        height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 12px;
    }

    .workspace-grid,
    .workspace.speech-controls-collapsed .workspace-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    /* Expose the existing session and Soundpad as grid items. */
    .sidebar {
        display: contents;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) {
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(100px, .7fr);
        gap: 12px;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) .card-heading {
        grid-column: 1;
        margin: 0;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) .live-state {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) .live-details {
        grid-column: 2;
        grid-row: 1 / 3;
        margin: 0;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) .button,
    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) .notice {
        grid-column: 1 / -1;
    }

    .sidebar > .card {
        min-width: 0;
        padding: 16px;
    }

    .comments-card {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        height: min(680px, calc(var(--ovs-layout-viewport) * .75));
        min-height: 420px;
    }

    .comments-pane {
        min-height: 0;
    }

    .ovs-live-phone {
        display: flex;
        padding: 12px 10px;
    }

    .ovs-live-phone-frame,
    .battle-reward-hud {
        max-width: 240px;
    }

    .top-gifters-card {
        grid-column: 1;
        grid-row: 3;
        padding: 14px;
        border: 1px solid var(--ovs-border);
        border-radius: var(--radius);
    }

    .top-gifters-list {
        grid-template-columns: repeat(5, minmax(156px, 1fr));
        overflow-x: auto;
        padding: 8px;
    }

    .soundpad-card {
        grid-column: 1;
        grid-row: 4;
    }

    .workspace.settings-mode .sidebar {
        display: grid;
        overflow: visible;
    }

    .speech-controls-card {
        top: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        max-height: calc(var(--ovs-layout-viewport) - 16px - env(safe-area-inset-bottom));
    }

    .speech-controls-tab {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
        right: 12px;
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        border: 1px solid var(--ovs-border-strong);
        border-radius: 12px;
        transform: none;
    }

    .speech-controls-tab span {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

@media (min-width: 701px) and (max-width: 850px) {
    .topbar {
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    }

    .live-event-ticker {
        grid-column: 2;
        grid-row: 1;
    }

    .live-audience-trigger {
        grid-column: 3;
        grid-row: 1;
    }

    .ovs-theme-switcher {
        grid-column: 4;
    }

    .user-bar {
        grid-column: 5;
    }

    .top-tabs {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .top-tabs {
        gap: 2px;
        padding: 3px;
    }

    .top-tab {
        padding-inline: 4px;
        font-size: 11px;
    }

    .comments-card {
        display: flex;
        height: auto;
        min-height: 0;
    }

    .comments-pane {
        order: -1;
        flex: 0 0 auto;
        height: clamp(380px, calc(var(--ovs-layout-viewport) * .65), 640px);
    }

    .ovs-live-phone {
        border-right: 0;
        border-top: 1px solid var(--ovs-border);
    }

    .ovs-live-phone-frame,
    .battle-reward-hud {
        max-width: 180px;
    }

    .comments-text-size-options button,
    .ovs-theme-option,
    .top-tab {
        min-height: 36px;
    }

    .comments-search {
        flex-basis: 100%;
    }
}

@media (max-width: 700px) {
    .event-center-gift-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 190px minmax(280px, auto);
    }
}

@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .topbar {
        padding-block: 6px;
    }

    .brand-subtitle {
        display: none;
    }

    .top-tab {
        height: 30px;
        min-height: 30px;
    }

    .workspace,
    .workspace-grid {
        height: auto;
        overflow: visible;
    }

    .app-shell {
        padding-bottom: 64px;
    }

    main {
        overflow-y: auto;
        padding-bottom: 12px;
    }

    .workspace-grid,
    .workspace.speech-controls-collapsed .workspace-grid {
        grid-template-columns: 224px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .sidebar {
        display: grid;
        grid-column: 1;
        grid-row: 1;
        max-height: 440px;
        overflow-y: auto;
    }

    .sidebar > .card {
        grid-row: auto;
        padding: 10px;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) {
        display: block;
    }

    .sidebar .card-heading h2 {
        font-size: 16px;
    }

    .sidebar .live-state {
        margin-block: 8px;
    }

    .sidebar .live-state span {
        font-size: 10px;
        line-height: 1.3;
    }

    .sidebar .live-details {
        display: flex;
        gap: 6px;
        margin-block: 8px;
        padding-top: 0;
    }

    .sidebar .live-details > div {
        flex: 1;
        min-width: 0;
        display: block;
    }

    .sidebar .live-details dd {
        text-align: left;
        font-size: 10px;
    }

    .sidebar .button-live {
        min-height: 40px;
    }

    .soundpad-trigger {
        height: 56px;
    }

    .comments-card {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: 136px minmax(0, 1fr);
        height: 440px;
        min-height: 0;
    }

    .top-gifters-card {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-height: 500px) {
    .speech-controls-card {
        top: 8px;
        bottom: 8px;
        max-height: calc(var(--ovs-layout-viewport) - 16px);
        padding: 14px;
    }

    .speech-controls-tab {
        min-height: 44px;
    }

    .event-center-backdrop {
        padding: 8px;
    }

    .event-center-modal {
        height: calc(var(--ovs-layout-viewport) - 16px);
        max-height: calc(var(--ovs-layout-viewport) - 16px);
    }
}

@media (max-width: 600px) and (max-height: 500px) and (orientation: landscape) {
    .workspace-grid,
    .workspace.speech-controls-collapsed .workspace-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        display: contents;
    }

    .sidebar > [data-tab-view="ovs"]:not(.soundpad-card) {
        grid-row: 1;
    }

    .comments-card {
        grid-column: 1;
        grid-row: 2;
        height: auto;
    }

    .top-gifters-card {
        grid-row: 3;
    }

    .soundpad-card {
        grid-row: 4;
    }
}

/* Both narrow and short modals need a scrollable, usable gift detail. */
@media (max-width: 850px), (max-height: 500px) {
    .event-center-content {
        overflow: auto;
    }

    .event-center-gift-grid {
        flex: 0 0 auto;
        min-height: 300px;
    }
}


/*
 * TOP TAPPERS: sekcja w tym samym fixed railu.
 * Wspoldzieli rzedowe style i medalowe ramki gifterow.
 */
.top-tappers-section {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .25);
}

.top-tappers-section .card-heading {
    margin-bottom: 12px;
}

/*
 * W układzie poziomym TOP gifterów nowa sekcja
 * zajmuje pełny drugi wiersz, nie trzecią komórkę.
 */
@media (min-width: 851px) and (max-width: 1799px) {
    .top-tappers-section {
        grid-column: 1 / -1;
        grid-row: 3;
        min-width: 0;
        margin-top: 8px;
    }

    .top-tappers-section .top-gifters-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        overflow-x: auto;
    }
}

/*
 * Na telefonach ranking pozostaje pod gifterami.
 */
@media (max-width: 850px) {
    /*
     * Mobile: oba rankingi pionowo, bez poziomego scrolla.
     * Desktop pozostaje bez zmian.
     */
    .top-gifters-card .top-gifters-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        padding: 4px 0;
    }

    .top-gifters-card .top-gifter-row {
        min-width: 0;
        width: 100%;
    }

    .top-tappers-section {
        min-width: 0;
        width: 100%;
    }

    .top-tappers-section .top-gifters-list {
        grid-template-columns: minmax(0, 1fr);
        overflow-x: hidden;
    }
}

/* Soundpad banks: keep the existing grid/pad geometry and card height budget. */
.soundpad-heading { gap: 6px; }
.soundpad-heading-title { flex: 0 0 auto; }
.soundpad-heading .soundpad-master {
    flex: 1 1 0;
    min-width: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.soundpad-heading #soundpadMasterValue {
    flex: 0 0 auto;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.soundpad-heading .soundpad-stop { flex: 0 0 auto; }
.soundpad-bank-nav {
    height: 58px;
    margin: -3px 0 17px;
    display: flex;
    gap: 4px;
    align-items: center;
    min-width: 0;
}
.soundpad-bank-nav > button {
    flex: 0 0 28px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 8px;
    background: var(--ovs-surface-control);
    color: var(--ovs-text-primary);
    font: inherit;
    font-weight: 700;
}
.soundpad-bank-nav .soundpad-bank-current {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px;
    font-size: 11px;
}
#soundpadBankName { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#soundpadBankCounter { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; }
.soundpad-hint { position: relative; }
.soundpad-hint > .soundpad-status {
    position: absolute;
    inset: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--ovs-surface-special);
}
.soundpad-hint > .soundpad-status[data-state="idle"] { display: none; }
.soundpad-bank-dialog {
    width: min(460px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 14px;
    background: var(--ovs-surface-1);
    color: var(--ovs-text-primary);
    overflow: auto;
}
.soundpad-bank-dialog [hidden] { display: none !important; }
.soundpad-bank-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.soundpad-bank-dialog h2 { margin: 0 0 14px; font-size: 18px; }
.soundpad-bank-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.soundpad-bank-dialog button:focus-visible { outline: 2px solid var(--ovs-accent); outline-offset: 2px; }
.soundpad-bank-dialog-head button,
.soundpad-bank-tools button {
    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 6px;
    background: var(--ovs-surface-control);
    color: var(--ovs-text-primary);
    min-width: 32px;
    min-height: 32px;
}
.soundpad-bank-list { max-height: min(440px, calc(100dvh - 116px)); overflow: auto; overscroll-behavior: contain; }
.soundpad-bank-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; }
.soundpad-bank-choice {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 6px;
    border: 1px solid var(--ovs-soundpad-pad-border);
    border-radius: 6px;
    background: var(--ovs-surface-control);
    color: var(--ovs-text-primary);
    text-align: left;
    overflow-wrap: anywhere;
}
.soundpad-bank-choice[aria-current="true"] { border-color: var(--ovs-accent); color: var(--ovs-accent); }
.soundpad-bank-tools { display: flex; gap: 3px; flex: none; }
.soundpad-bank-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#soundpadBankNameHelp { font-size: 12px; color: var(--ovs-text-muted); }
@media (min-width: 851px) and (max-height: 800px) {
    .soundpad-bank-nav { height: 54px; margin-bottom: 10px; }
}
@media (min-width: 2200px) {
    .soundpad-bank-nav { height: 66px; }
}
/* Non-modal Pro window: UI-only state, separate from Standard and existing modal guards. */
.soundpad-pro[hidden], #soundpadProLauncher[hidden], .soundpad-pro-window-body[hidden] { display: none !important; }
.soundpad-pro {
    position: fixed;
    z-index: 170;
    top: 8px;
    left: 8px;
    width: min(720px, calc(100vw - 16px));
    height: min(760px, calc(100dvh - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ovs-border-strong);
    background: var(--ovs-modal-shell-bg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
}
.soundpad-pro-window-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 auto;
    min-height: 0;
    padding: 10px 12px;
    overflow: auto;
    border-bottom: 1px solid var(--ovs-border);
}
.soundpad-pro-window-head h2 { flex: 1; min-width: 120px; margin: 0; font-size: 16px; }
.soundpad-pro-window-head [data-pro-status] { flex-basis: 100%; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.soundpad-pro-window-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.soundpad-pro-window-actions button, .soundpad-pro-window-body button {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--ovs-border-strong);
    border-radius: 8px;
    background: var(--ovs-surface-control);
    color: var(--ovs-text-primary);
}
.soundpad-pro button:focus-visible, .soundpad-pro-launcher:focus-visible { outline: 2px solid var(--ovs-accent); outline-offset: -2px; }
.soundpad-pro-window-body { flex: 1 1 0; min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; }
.soundpad-pro-window-body > p { margin: 0 0 12px; }
.soundpad-pro-window-body section { margin-top: 16px; }
.soundpad-pro input, .soundpad-pro select { min-width: 0; max-width: 100%; }
.soundpad-pro-window-body button { max-width: 100%; overflow-wrap: anywhere; }
.soundpad-pro-launcher { flex-shrink: 1; min-width: 0; }
@media (min-width: 701px) {
    .soundpad-pro-window-head { cursor: move; touch-action: none; user-select: none; }
    .soundpad-pro-window-head button { cursor: pointer; }
}
@media (max-width: 700px) {
    .soundpad-pro-window-head h2 { flex-basis: 100%; }
    .soundpad-pro-window-head {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .soundpad-pro-window-body { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .soundpad-pro-window-actions { width: 100%; justify-content: flex-end; }
    .soundpad-pro-window-actions button { min-height: 44px; min-width: 44px; }
    .soundpad-pro .soundpad-pro-window-body fieldset { grid-template-columns: minmax(0, 1fr); }
}
.soundpad-pro-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.soundpad-pro fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.soundpad-pro label { display: flex; flex-direction: column; gap: 4px; }
.soundpad-pro input[type="range"] { width: 100%; }
/* Subscription recovery stays inside OVS; checkout has no active destination. */
.subscription-view { max-width: 680px; margin: 48px auto; padding: 32px; }
.subscription-view h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.subscription-view p { line-height: 1.6; }
.subscription-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.subscription-view button:disabled { cursor: not-allowed; opacity: .55; }
.subscription-view #subscriptionPlans { margin-top: 24px; border-top: 1px solid var(--border, #64748b); padding-top: 16px; }