/* --- 2026 dashboard redesign pass (twitch/kick-like shell) --- */
body .tl-dash-page .dashboard.tl-dash-inner {
    background: linear-gradient(180deg, rgba(20,22,35,.72), rgba(12,13,21,.82));
    border: 1px solid rgba(124, 58, 237, .2);
    box-shadow: 0 20px 44px rgba(0,0,0,.3);
}
body .tl-dash-page .dash-tabs .dash-tab {
    border-radius: 12px;
    font-weight: 700;
}
body .tl-dash-page .dash-tabs .dash-tab.active {
    background: linear-gradient(135deg, rgba(124,58,237,.32), rgba(59,130,246,.24));
    border-color: rgba(124,58,237,.55);
}
body .tl-dash-page .dash-card,
#tab-analytics .dash-card,
#tab-analytics .analytics-ov-card,
#tab-analytics .analytics-stat-box,
#tab-chat .dash-card,
#tab-chat .tl-chat-admin-card,
#tab-subsetting .dash-card,
#tab-subsetting .emoji-tier-board {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.18);
    background: rgba(22, 24, 32, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 28px rgba(0, 0, 0, 0.22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body .tl-dash-page .dash-card,
    #tab-analytics .dash-card,
    #tab-analytics .analytics-ov-card,
    #tab-analytics .analytics-stat-box,
    #tab-chat .dash-card,
    #tab-chat .tl-chat-admin-card,
    #tab-subsetting .dash-card,
    #tab-subsetting .emoji-tier-board {
        background: rgba(20, 22, 30, 0.42);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
    }
}
#tab-analytics .analytics-overview-grid .analytics-ov-card,
#tab-monetize .analytics-stat-box,
#tab-stream .analytics-stat-box {
    border-radius: 12px;
}
#myEmojiTierBoards .emoji-tier-board {
    transition: border-color .15s ease, transform .15s ease;
}
#myEmojiTierBoards .emoji-tier-board:hover {
    border-color: rgba(124,58,237,.5);
    transform: translateY(-1px);
}
.emoji-tier-dropzone [draggable="true"] {
    cursor: grab;
}
.emoji-tier-dropzone [draggable="true"]:active {
    cursor: grabbing;
}
#tab-obs .dash-card {
    background: linear-gradient(180deg, rgba(26,29,45,.86), rgba(18,20,33,.86));
}
@font-face {
    font-family: 'Dana';
    src: url('../fonts/Dana-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dana';
    src: url('../fonts/Dana-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ============ THEME VARIABLES ============ */
:root,
[data-theme="dark"] {
    --bg: #0e0e10;
    --bg-elev-1: #18181b;
    --bg-elev-2: #1f1f23;
    --bg-elev-3: #26262c;
    --text: #efeff1;
    --text-muted: #a6a6b2;
    --line: #3a3a40;
    --brand: #1e56f5;
    --brand-strong: #1245d6;
    --brand-soft: #5280ff;
    --danger: #f43f5e;
    --success: #22c55e;
    --warning: #f59e0b;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    --tl-bg-dot: rgba(255, 255, 255, 0.032);
    --tl-bg-glow-1: rgba(30, 86, 245, 0.13);
    --tl-bg-glow-2: rgba(96, 165, 250, 0.09);
    --tl-bg-glow-3: rgba(12, 20, 48, 0.28);
    --tl-bg-base-end: #0a0a12;
    --gradient-bg: none;
}

[data-theme="light"] {
    --bg: #f7f7f8;
    --bg-elev-1: #ffffff;
    --bg-elev-2: #f0f0f2;
    --bg-elev-3: #e8e8ec;
    --text: #0e0e10;
    --text-muted: #53535f;
    --line: #d4d4dc;
    --brand: #1e56f5;
    --brand-strong: #1245d6;
    --brand-soft: #7aa3ff;
    --danger: #e91e63;
    --success: #059669;
    --warning: #d97706;
    --shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
    --tl-bg-dot: rgba(30, 86, 245, 0.045);
    --tl-bg-glow-1: rgba(30, 86, 245, 0.07);
    --tl-bg-glow-2: rgba(96, 165, 250, 0.06);
    --tl-bg-glow-3: rgba(200, 210, 235, 0.2);
    --tl-bg-base-end: #ececf2;
    --gradient-bg: none;
}

/* Lite — flat dark theme, no glass, no rounded corners (low-end Android) */
[data-theme="lite"] {
    --bg: #0e0e10;
    --bg-elev-1: #18181b;
    --bg-elev-2: #1f1f23;
    --bg-elev-3: #26262c;
    --text: #efeff1;
    --text-muted: #a6a6b2;
    --line: #3a3a40;
    --brand: #1e56f5;
    --brand-strong: #1245d6;
    --brand-soft: #5280ff;
    --danger: #f43f5e;
    --success: #22c55e;
    --warning: #f59e0b;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-xs: 4px;
    --shadow: none;
    --tl-bg-dot: transparent;
    --tl-bg-glow-1: transparent;
    --tl-bg-glow-2: transparent;
    --tl-bg-glow-3: transparent;
    --tl-bg-base-end: #0e0e10;
    --gradient-bg: none;
    --tl-surface-blur: 0;
    --tl-glass-bg: var(--bg-elev-1);
    --tl-glass-border: var(--line);
}

@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg: #f7f7f8;
        --bg-elev-1: #ffffff;
        --bg-elev-2: #f0f0f2;
        --bg-elev-3: #e8e8ec;
        --text: #0e0e10;
        --text-muted: #53535f;
        --line: #d4d4dc;
        --shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
        --tl-bg-dot: rgba(30, 86, 245, 0.045);
        --tl-bg-glow-1: rgba(30, 86, 245, 0.07);
        --tl-bg-glow-2: rgba(96, 165, 250, 0.06);
        --tl-bg-glow-3: rgba(200, 210, 235, 0.2);
        --tl-bg-base-end: #ececf2;
        --gradient-bg: none;
    }
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: var(--bg);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background-color: transparent;
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    isolation: isolate;
}

/* Site background — dot mesh + soft blooms (fixed, seamless) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at center, var(--tl-bg-dot) 0.55px, transparent 0.56px),
        radial-gradient(ellipse 150% 95% at 6% -8%, var(--tl-bg-glow-1), transparent 58%),
        radial-gradient(ellipse 130% 85% at 94% 4%, var(--tl-bg-glow-2), transparent 55%),
        radial-gradient(ellipse 110% 75% at 50% 108%, var(--tl-bg-glow-3), transparent 62%),
        linear-gradient(180deg, var(--bg) 0%, var(--tl-bg-base-end) 100%);
    background-size: 30px 30px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed;
}

body::after {
    content: '';
    position: fixed;
    inset: -30%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 58% 48% at 22% 28%, rgba(30, 86, 245, 0.14), transparent 70%),
        radial-gradient(ellipse 52% 44% at 76% 68%, rgba(107, 159, 255, 0.1), transparent 68%);
    animation: tl-site-bg-glow 30s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes tl-site-bg-glow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
    }
    100% {
        transform: translate3d(1.2%, -0.8%, 0) scale(1.05);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none;
        opacity: 0.85;
    }
}

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

img {
    max-width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

.container {
    width: min(1400px, 94vw);
    margin: 0 auto;
}

.main-content {
    flex: 1;
    display: flex;
}
.main-content > .tl-left-sidebar {
    flex-shrink: 0;
}
.main-content > .tl-page-content {
    flex: 1;
    min-width: 0;
}

.text-muted {
    color: var(--text-muted);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: 0.2s ease;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--brand-soft), var(--brand));
    color: #fff;
    box-shadow: 0 6px 18px rgba(30, 86, 245, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #6a98ff, var(--brand-strong));
}

.btn-outline {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
}

.btn-outline:hover {
    border-color: var(--brand);
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ff6a88, var(--danger));
    color: #fff;
}

.btn-danger-outline {
    border-color: var(--danger, #e74c3c);
    color: var(--danger, #e74c3c);
}
.btn-danger-outline:hover {
    background: var(--danger, #e74c3c);
    color: #fff;
}

.btn-sm {
    padding: 8px 13px;
    font-size: 0.86rem;
}

.btn-lg {
    padding: 13px 24px;
    font-size: 1rem;
}

.btn-full {
    width: 100%;
}

/* Page Loader - Unified Tele Loader */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tl-bg, #0e0e10);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Admin viewing /dashboard?as= — never let the global loader block interaction (belt + suspenders) */
body.tl-admin-as-view #pageLoader {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* Heavier streamer layouts: keep tab bar above long cards / banners */
/* Tabs live outside .tl-sk-mount so skeleton never blocks clicks */
body .tl-dash-page > .dash-tabs,
body.tl-admin-as-view .tl-dash-page .dash-tabs {
    position: relative;
    z-index: 30;
    isolation: isolate;
    pointer-events: auto;
}
body.tl-admin-as-view .tl-dash-page .dash-tabs .dash-tab {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
body .tl-dash-page > .tl-sk-mount--dashboard {
    position: relative;
    z-index: 0;
}
/* Admin ?as=: skeleton layer sits above real tabs — hide it so .dash-tab buttons receive clicks */
body.tl-admin-as-view .tl-sk-mount--dashboard .tl-sk-layer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}
body.tl-admin-as-view .tl-sk-mount--dashboard .tl-sk-real {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.tl-admin-as-view .tl-sk-mount--dashboard {
    min-height: 0;
}
/* Admin ?as=: no skeleton mount — tab bar must stay above all dashboard content */
body.tl-admin-as-view #tlDashTabsBar {
    position: sticky;
    top: calc(46px + 8px);
    z-index: 200;
    pointer-events: auto !important;
    background: var(--dash-card, #1a1a22);
}
body.tl-admin-as-view .tl-dash-admin-body {
    position: relative;
    z-index: 0;
    pointer-events: auto;
}
body.tl-admin-as-view .tl-dash-page > .tl-sk-mount--dashboard {
    pointer-events: none;
}
body.tl-admin-as-view .tl-sk-mount--dashboard .tl-sk-real {
    pointer-events: auto;
}

/* Tab panels: explicit show/hide (fixes ?as= admin view stuck on stream tab) */
.tl-dash-page #tlDashTabPanels > .dash-tab-content {
    display: none !important;
    overflow: hidden;
}
.tl-dash-page #tlDashTabPanels > .dash-tab-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible;
}
#tlDashTabPanels > .dash-tab-content {
    display: none !important;
}
#tlDashTabPanels > .dash-tab-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.tl-admin-as-view #tlDashTabPanels > .dash-tab-content:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.tl-admin-as-view #tlDashTabPanels > .dash-tab-content.active {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.tele-loader-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.tele-loader-ambient::before,
.tele-loader-ambient::after {
    content: '';
    position: absolute;
    width: 55vmax;
    height: 55vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.10;
    background: radial-gradient(circle, var(--tl-accent, #1e56f5) 0%, transparent 70%);
}

.tele-loader-ambient::before {
    top: -20vmax;
    inset-inline-start: -15vmax;
    animation: tlAmbientA 9s ease-in-out infinite;
}

.tele-loader-ambient::after {
    bottom: -22vmax;
    inset-inline-end: -15vmax;
    animation: tlAmbientB 11s ease-in-out infinite;
}

.tele-loader-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: tlLoaderIn 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.tele-loader-logo {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tele-loader-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.tele-loader-ring--outer {
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--tl-accent, #1e56f5);
    border-inline-end-color: var(--tl-accent, #1e56f5);
    opacity: 0.9;
    animation: tlSpin 1.4s linear infinite;
    filter: drop-shadow(0 0 6px var(--tl-accent-glow, rgba(30,86,245,0.4)));
}

.tele-loader-ring--inner {
    inset: 10px;
    border: 2px solid transparent;
    border-bottom-color: rgba(255,255,255,0.35);
    border-inline-start-color: rgba(255,255,255,0.12);
    animation: tlSpinReverse 2.2s linear infinite;
}

.tele-loader-glow {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--tl-accent, #1e56f5);
    opacity: 0.18;
    filter: blur(18px);
    animation: tlPulse 2s ease-in-out infinite;
}

.tele-loader-logo img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 26px var(--tl-accent-glow, rgba(30,86,245,0.3));
    animation: tlLogoBreath 2s ease-in-out infinite;
}

.tele-loader-logo i {
    font-size: 42px;
    color: var(--tl-accent, #1e56f5);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px var(--tl-accent-glow, rgba(30,86,245,0.4)));
}

.tele-loader-name {
    font-size: 1.7rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 26px;
    letter-spacing: 0.5px;
    position: relative;
    background: linear-gradient(110deg, #fff 35%, var(--tl-accent, #1e56f5) 50%, #fff 65%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tlShimmer 2.8s linear infinite;
}

.tele-loader-name span {
    font-weight: 800;
}

.tele-loader-info {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.tele-loader-bar {
    position: relative;
    width: 220px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    overflow: hidden;
    margin: 0 auto;
}

.tele-loader-fill {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background: var(--tl-gradient, linear-gradient(135deg, #1e56f5, #5280ff));
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px var(--tl-accent-glow, rgba(30,86,245,0.4));
    overflow: hidden;
}

.tele-loader-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-100%);
    animation: tlBarSheen 1.2s ease-in-out infinite;
}

@keyframes tlLoaderIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

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

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

@keyframes tlLogoBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes tlShimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -130% 0; }
}

@keyframes tlBarSheen {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(220%); }
}

@keyframes tlAmbientA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6vmax, 4vmax) scale(1.12); }
}

@keyframes tlAmbientB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vmax, -4vmax) scale(1.1); }
}

@keyframes tlPulse {
    0%, 100% { transform: scale(1); opacity: 0.18; }
    50% { transform: scale(1.2); opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .tele-loader-ring,
    .tele-loader-fill::after,
    .tele-loader-ambient::before,
    .tele-loader-ambient::after,
    .tele-loader-logo img,
    .tele-loader-name {
        animation: none;
    }
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 4px;
    margin-inline-end: 12px;
}

.lang-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(24, 26, 34, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    transition: all 0.2s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lang-btn {
        backdrop-filter: blur(14px) saturate(155%);
        -webkit-backdrop-filter: blur(14px) saturate(155%);
    }
}

.lang-btn:hover {
    color: var(--text);
    background: var(--bg-elev-3);
}

.lang-btn.active {
    color: #fff;
    background: var(--brand);
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(12px);
    background: rgba(14, 14, 16, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-container {
    width: min(1500px, 96vw);
    margin: 0 auto;
    min-height: 74px;
    display: grid;
    grid-template-columns: auto minmax(300px, 600px) auto;
    align-items: center;
    gap: 16px;
}

.navbar-right,
.navbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
}

.navbar-brand i {
    color: var(--brand-soft);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(30, 86, 245, 0.16);
}

.navbar-center {
    justify-self: center;
    width: 100%;
}

.search-form {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
}

.search-form:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(30, 86, 245, 0.2);
}

.search-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: 10px 13px;
    border-radius: 12px 0 0 12px;
}

.search-input::placeholder {
    color: #8f8f9b;
}

.search-btn {
    border: 0;
    background: var(--bg-elev-3);
    color: var(--text-muted, #9ca3af);
    width: 42px;
    align-self: stretch;
    cursor: pointer;
    border-radius: 0 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: none;
    max-height: 350px;
    overflow: auto;
    z-index: 999;
}

.search-results.active {
    display: block;
}

.search-result-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.search-result-item:last-child {
    border-bottom: 0;
}

.search-result-thumb {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: var(--bg-elev-3);
    object-fit: cover;
}

.search-result-title {
    font-weight: 700;
    color: #fff;
    display: block;
    line-height: 1.3;
}

.search-result-sub {
    font-size: 0.84rem;
    color: var(--text-muted);
}

.avatar-sm {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}

.user-menu {
    position: relative;
}

.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    padding: 4px 8px 4px 5px;
    cursor: pointer;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 220px;
    background: rgba(22, 24, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: none;
    overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .user-dropdown {
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
    }
}
.user-menu:has(.user-dropdown.active) .user-menu-btn {
    background: rgba(24, 26, 34, 0.55);
    border-color: rgba(107, 159, 255, 0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .user-menu:has(.user-dropdown.active) .user-menu-btn {
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}

.user-dropdown.active {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.92rem;
    color: #d4d4dc;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.dropdown-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 4px 0;
}

/* Language row inside dropdown */
.dropdown-lang-row {
    gap: 8px;
    cursor: default;
    flex-wrap: wrap;
}
.dropdown-lang-row:hover { background: none; }
.dropdown-lang-btn {
    font-size: .8rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all .15s;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .dropdown-lang-btn,
    .dropdown-theme-btn {
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
    }
}
.dropdown-lang-btn:hover { background: rgba(30, 86, 245, 0.35); color: #fff; border-color: rgba(107, 159, 255, 0.45); }
.dropdown-lang-btn.active { background: rgba(30, 86, 245, 0.55); color: #fff; border-color: rgba(107, 159, 255, 0.55); }

/* Theme row inside dropdown */
.dropdown-theme-row {
    gap: 8px;
    cursor: default;
}
.dropdown-theme-row:hover { background: none; }
.dropdown-theme-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: all .15s;
}
.dropdown-theme-btn:hover { background: rgba(30, 86, 245, 0.35); color: #fff; border-color: rgba(107, 159, 255, 0.45); }
.dropdown-theme-btn.active { background: rgba(30, 86, 245, 0.55); color: #fff; border-color: rgba(107, 159, 255, 0.55); }

/* Hero */
.hero-section {
    padding: 24px 0 10px;
}

.hero-stream {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
}

.hero-player {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    min-height: 410px;
}

.player-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 410px;
    background:
        linear-gradient(120deg, rgba(30, 86, 245, 0.25), transparent 45%),
        linear-gradient(180deg, #1f1f2a, #101013);
}

.player-overlay {
    position: absolute;
    inset: 0;
    padding: 22px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 52%);
}

.live-badge,
.live-tag,
.mini-live-badge,
.profile-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-weight: 800;
    background: rgba(244, 63, 94, 0.96);
    color: #fff;
}

.live-badge {
    position: absolute;
    top: 18px;
    inset-inline-start: 18px;
    padding: 6px 12px;
    font-size: 0.78rem;
}

.live-tag,
.mini-live-badge,
.profile-live-badge {
    font-size: 0.7rem;
    padding: 5px 9px;
}

.hero-info h2 {
    margin: 0 0 8px;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #dfdfec;
    font-size: 0.9rem;
}

.hero-category {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.8rem;
}

.hero-play-btn {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(30, 86, 245, 0.95);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(30, 86, 245, 0.45);
}

.hero-play-btn:hover {
    transform: scale(1.05);
}

.hero-sidebar {
    display: grid;
    gap: 10px;
    max-height: 410px;
    overflow: auto;
    padding-inline-start: 2px;
}

.hero-sidebar-item {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
}

.hero-sidebar-item.active,
.hero-sidebar-item:hover {
    border-color: rgba(30, 86, 245, 0.6);
    background: var(--bg-elev-2);
}

.sidebar-item-thumb {
    border-radius: 10px;
    background:
        linear-gradient(120deg, rgba(30, 86, 245, 0.45), transparent),
        var(--bg-elev-3);
    position: relative;
    min-height: 68px;
}

.mini-live-badge {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
}

.sidebar-item-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.sidebar-item-title,
.stream-title {
    font-weight: 700;
    color: #fff;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-streamer,
.stream-streamer,
.stream-category,
.sidebar-item-viewers {
    color: var(--text-muted);
    font-size: 0.84rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Generic sections */
.section {
    padding: 18px 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-header h2 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.24rem;
}

.see-all {
    color: #c9c9d4;
    font-size: 0.9rem;
}

.see-all:hover {
    color: #fff;
}

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

.category-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
    overflow: hidden;
    transition: transform .18s, border-color .18s;
    padding: 0;
    text-decoration: none;
    color: inherit;
}

.category-card:hover {
    border-color: var(--brand);
    transform: translateY(-3px);
}

.category-box-art {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}

.category-box-art-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30, 86, 245, .18), rgba(30, 86, 245, .05));
    font-size: 2.2rem;
    color: var(--brand);
}

.category-card .category-info {
    padding: 8px 10px 10px;
}

.category-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(30, 86, 245, 0.2);
    color: #fff;
    font-size: 1.2rem;
}

.category-info h3 {
    margin: 0 0 3px;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-info span {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.categories-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.category-card-lg {
    min-height: unset;
}

.category-icon-lg {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(30, 86, 245, 0.24);
    font-size: 1.6rem;
}

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

/* ── Page skeleton mounts (home banners / grids + browse grids + sidebar) ─ */
.tl-sk-mount {
    position: relative;
    isolation: isolate;
}

/* Real content must not paint under the skeleton (opacity alone can still flash images). */
.tl-sk-mount:not(.is-loaded) .tl-sk-real {
    visibility: hidden;
}

.tl-sk-mount.is-loaded .tl-sk-real {
    visibility: visible;
}

.tl-sk-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.38s ease;
}

.tl-sk-mount.is-loaded .tl-sk-layer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0s linear 0.38s;
}

.tl-sk-real {
    position: relative;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.42s ease 0.06s;
}

.tl-sk-mount.is-loaded .tl-sk-real {
    opacity: 1;
}

/* Sidebar: fill column so absolute layer matches real height */
.tl-left-sidebar > .tl-sk-mount--sidebar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.tl-sk-mount--sidebar .tl-sk-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    gap: 2px;
    overflow: hidden;
}
@media (min-width: 769px) {
    body.page-stream .tl-sk-mount--stream-chat {
        position: sticky;
        top: calc(46px + 10px);
        height: calc(100dvh - 56px);
        max-height: calc(100dvh - 56px);
        align-self: start;
    }
    body.page-stream .stream-page .chat-panel,
    body.page-stream .tl-sk-mount--stream-chat .chat-panel {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        position: relative;
        top: auto;
    }
}
.tl-sk-mount--ad-gallery .tl-sk-layer {
    position: relative;
    inset: auto;
}

/* Page-form / dashboard / settings / about: skeleton in flow; real content out of flow until loaded */
.tl-sk-mount--page-form:not(.is-loaded) .tl-sk-real,
.tl-sk-mount--dashboard:not(.is-loaded) .tl-sk-real,
.tl-sk-mount--settings:not(.is-loaded) .tl-sk-real,
.tl-sk-mount--about:not(.is-loaded) .tl-sk-real {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}
.tl-sk-mount--page-form:not(.is-loaded) .tl-sk-layer,
.tl-sk-mount--dashboard:not(.is-loaded) .tl-sk-layer,
.tl-sk-mount--settings:not(.is-loaded) .tl-sk-layer,
.tl-sk-mount--about:not(.is-loaded) .tl-sk-layer {
    position: relative;
    inset: auto;
}
.tl-sk-mount--page-form.is-loaded .tl-sk-real,
.tl-sk-mount--dashboard.is-loaded .tl-sk-real,
.tl-sk-mount--settings.is-loaded .tl-sk-real,
.tl-sk-mount--about.is-loaded .tl-sk-real {
    position: relative;
    visibility: visible;
    pointer-events: auto;
}
.tl-sk-mount--dashboard.is-loaded .tl-sk-layer,
.tl-sk-mount--settings.is-loaded .tl-sk-layer,
.tl-sk-mount--about.is-loaded .tl-sk-layer {
    pointer-events: none;
}

.tl-sidebar-sk {
    pointer-events: none;
}

.tl-sidebar-sk-circle {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elev-2);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.tl-sidebar-sk-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        transparent 90%
    );
    transform: translateX(-100%);
    animation: tl-stream-sk-shimmer 1.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tl-sidebar-sk-circle::after {
        animation: none !important;
    }
}

.stream-card--skeleton {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
    display: flex;
    flex-direction: column;
    height: 100%;
    pointer-events: none;
}

.stream-card--skeleton .stream-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
}

.stream-card--skeleton-thumb {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--bg-elev-3);
}

.stream-card--skeleton-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 45%,
        transparent 90%
    );
    transform: translateX(-100%);
    animation: tl-stream-sk-shimmer 1.25s ease-in-out infinite;
}

.stream-overlay--skeleton {
    pointer-events: none;
}

.stream-card--skel-live {
    opacity: 0.88;
}

.stream-card--skel-live .stream-card--skel-dot {
    animation: none;
    opacity: 0.82;
    font-size: 0.48rem;
}

.stream-card--skel-view {
    opacity: 0.72;
    margin-inline-start: auto;
}

.stream-card--skeleton-meta {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    align-items: flex-start;
}

.stream-card--skeleton-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-elev-3);
    border: 2px solid #363640;
    position: relative;
    overflow: hidden;
}

.stream-card--skeleton-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 45%,
        transparent 90%
    );
    transform: translateX(-100%);
    animation: tl-stream-sk-shimmer 1.25s ease-in-out infinite;
    animation-delay: 0.15s;
}

.stream-card--skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 3px;
    min-width: 0;
}

.stream-card--skeleton-line {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: var(--bg-elev-3);
    position: relative;
    overflow: hidden;
}

.stream-card--skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 45%,
        transparent 90%
    );
    transform: translateX(-100%);
    animation: tl-stream-sk-shimmer 1.25s ease-in-out infinite;
}

.stream-card--skeleton-line--lg {
    width: 78%;
}

.stream-card--skeleton-line--sm {
    width: 48%;
    height: 9px;
}

.stream-card--skeleton-line--sm::after {
    animation-delay: 0.12s;
}

.stream-card--skeleton-line--cat {
    width: 38%;
    height: 9px;
}

.stream-card--skeleton-line--cat::after {
    animation-delay: 0.22s;
}

@keyframes tl-stream-sk-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tl-sk-layer {
        display: none !important;
    }

    .tl-sk-real {
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
    }

    .stream-card--skeleton-thumb::after,
    .stream-card--skeleton-avatar::after,
    .stream-card--skeleton-line::after {
        animation: none !important;
    }
}

.stream-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Liquid-glass card (solid bg above is the no-blur fallback) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .stream-card {
        background: rgba(26, 26, 30, 0.45);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

/* ── Shared liquid-glass chips (cards, hero, browse, stream page) ── */
.tl-glass-chip {
    background: rgba(30, 30, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-glass-chip {
        background: rgba(30, 30, 38, 0.42);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}
.tl-glass-chip--blue {
    color: var(--brand-soft, #6b9fff);
    font-weight: 700;
}
.tl-glass-chip--blue .fa-eye,
.tl-glass-chip--blue i:not(.so-dot):not(.fa-circle) {
    color: var(--brand-soft, #6b9fff);
    opacity: 0.92;
}
.tl-glass-chip--live {
    color: var(--brand-soft, #6b9fff);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tl-glass-chip--live .so-dot,
.tl-glass-chip--live .fa-circle {
    color: #ef4444;
}
.tl-glass-panel {
    background: rgba(12, 14, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.35);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-glass-panel {
        background: rgba(22, 24, 32, 0.45);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
    }
}

/* Shared glass surface (nav controls, dashboard panels, menus) */
.tl-glass-surface {
    background: rgba(22, 24, 32, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-glass-surface {
        background: rgba(20, 22, 30, 0.42);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }
}

.stream-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 86, 245, 0.7);
}

body.page-browse .stream-card:hover,
body.page-browse .stream-card-wrap--suggested .stream-card:hover,
body.page-browse .stream-card-wrap--suggested:hover .stream-card,
body.page-browse .stream-card.tl-yn-stream-card:hover,
body.page-browse .stream-card.tl-as-stream-card:hover,
body.page-browse .stream-card--offline:hover {
    transform: none !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.page-browse .stream-card-wrap--suggested .stream-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

body.page-browse .stream-thumbnail--mature:hover::after {
    opacity: 0 !important;
}

body.page-browse .stream-card,
body.page-browse .stream-card-wrap--suggested .stream-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

body.page-browse .browse-cat-head-link:not(.browse-cat-head-link--static):hover {
    background: transparent;
}

/* استریمر پیشنهادی — بوردر سبز چرخان (مثل منتخب) + جایگاه اول لیست */
.stream-card-wrap--suggested {
    position: relative;
    border-radius: 14px;
    padding: 3px;
    overflow: hidden;
    height: 100%;
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.28), rgba(22, 163, 74, 0.18));
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.35),
        0 8px 28px rgba(34, 197, 94, 0.12);
}

.stream-card-wrap--suggested::before {
    content: '';
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg,
        #86efac,
        #22c55e,
        #4ade80,
        #bbf7d0,
        #16a34a,
        #86efac
    );
    animation: tl-suggested-orbit 4.5s linear infinite;
    opacity: 0.95;
    z-index: 0;
}

@keyframes tl-suggested-orbit {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .stream-card-wrap--suggested::before {
        animation: none;
        opacity: 0.5;
        transform: rotate(20deg);
    }
}

.stream-card-wrap--suggested .stream-card {
    position: relative;
    z-index: 1;
    height: 100%;
    border: none;
    background: linear-gradient(165deg, rgba(34, 197, 94, 0.1) 0%, var(--bg-elev-1) 40%);
    box-shadow: none;
}

.stream-card-wrap--suggested .stream-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.2);
}

.stream-card--suggested {
    position: relative;
}

.stream-suggested-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ecfdf5;
    background: rgba(22, 163, 74, 0.92);
    border: 1px solid rgba(134, 239, 172, 0.45);
    pointer-events: none;
}

.stream-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-elev-3);
    flex-shrink: 0;
}

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

/* 18+ streams: blur preview thumbnail; show +18 on hover (home / browse grids) */
.stream-thumbnail--mature img.live-thumb {
    filter: blur(14px);
    transform: scale(1.06);
}
.stream-thumbnail--mature::after {
    content: '+18';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 4vw, 1.85rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.stream-thumbnail--mature:hover::after {
    opacity: 1;
}
.stream-thumbnail--mature .stream-overlay {
    z-index: 3;
}

.stream-overlay {
    position: absolute;
    inset: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 32%),
        linear-gradient(to top, rgba(0, 0, 0, 0.42) 0%, transparent 42%);
    pointer-events: none;
}
.stream-overlay > * {
    pointer-events: auto;
}

.so-top {
    display: flex;
    align-items: flex-start;
}

.so-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 6px;
}

.stream-thumbnail .live-tag {
    background: rgba(30, 30, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--brand-soft, #6b9fff);
    font-weight: 800;
    letter-spacing: 0.04em;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .stream-thumbnail .live-tag {
        background: rgba(30, 30, 38, 0.42);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}
.stream-thumbnail .live-tag .so-dot {
    color: #ef4444;
}

.viewer-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(30, 30, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--brand-soft, #6b9fff);
    margin-left: auto;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .viewer-tag {
        background: rgba(30, 30, 38, 0.42);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}
.viewer-tag .fa-eye {
    color: var(--brand-soft, #6b9fff);
    opacity: 0.92;
}

@keyframes liveDotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.15; }
}
.so-dot {
    font-size: .5rem;
    animation: liveDotBlink 1.4s ease-in-out infinite;
}

.so-cat-img { display: none; }

/* Small category thumbnail inside stream-info */
.stream-cat-img {
    width: 14px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    margin-inline-end: 4px;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
    top: -1px;
}

/* (viewer-tag glass styles live under .stream-overlay block above) */

/* Home / browse / following — card meta row (avatar + title; was in stream.css, broke grids when scoped to stream page only) */
.stream-card .stream-info {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    box-sizing: border-box;
}

.stream-card.tl-ad-card .stream-info.tl-ad-card__info {
    grid-template-columns: minmax(0, 1fr);
}

.stream-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #363640;
}

.stream-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stream-title {
    margin: 0 0 5px;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verified {
    color: #58a6ff;
}

.empty-state {
    border: 1px dashed #444451;
    border-radius: 12px;
    text-align: center;
    padding: 44px 20px;
    background: rgba(255, 255, 255, 0.02);
}

.empty-state i {
    font-size: 2.4rem;
    color: var(--brand-soft);
    margin-bottom: 10px;
}

.empty-state h3 {
    margin: 0 0 6px;
}

.empty-state p {
    margin: 0 0 14px;
    color: var(--text-muted);
}

/* CTA */
.cta-section {
    padding: 30px 0 18px;
}

.cta-content {
    border-radius: 16px;
    border: 1px solid rgba(30, 86, 245, 0.35);
    background:
        radial-gradient(800px 300px at 75% 10%, rgba(30, 86, 245, 0.35), transparent 60%),
        #16161d;
    padding: 32px;
    text-align: center;
}

.cta-content h2 {
    margin: 0 0 6px;
    font-size: 1.8rem;
}

.cta-content p {
    margin: 0 0 14px;
    color: var(--text-muted);
}

/* Browse */
.browse-header {
    padding: 22px 0 16px;
    display: grid;
    gap: 14px;
}

.browse-header h1 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.browse-category-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.browse-count {
    color: var(--text-muted);
}

.browse-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab-btn {
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--text);
    font-weight: 600;
}

.tab-btn.active,
.tab-btn:hover {
    border-color: var(--brand);
    background: rgba(30, 86, 245, 0.16);
    color: #fff;
}

/* Browse — default live tab: streams grouped by category (ordered by category viewers) */
.browse-live-by-category {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.browse-live-by-category .section-categories-scroll {
    margin: 0 0 20px;
    padding-bottom: 0;
}

/* Browse live — single row: all streams by viewer_count (see getBrowseLiveGrouped) */
.browse-all-live-section {
    min-width: 0;
    scroll-margin-top: 96px;
}
.browse-all-live-heading {
    margin: 0 0 12px;
    font-size: 1.12rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-base, #efeff1);
}

.browse-cat-section {
    min-width: 0;
    scroll-margin-top: 96px;
}

.browse-cat-head {
    margin-bottom: 12px;
}

.browse-cat-head-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background 0.15s ease;
}

.browse-cat-head-link:not(.browse-cat-head-link--static):hover {
    background: rgba(30, 86, 245, 0.12);
}

.browse-cat-head-link--static {
    cursor: default;
}

.browse-cat-head__media {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
}

.browse-cat-head__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.browse-cat-head__placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--brand-soft);
    background:
        linear-gradient(145deg, rgba(30, 86, 245, 0.22), var(--bg-elev-1));
}

.browse-cat-head__placeholder.is-visible {
    display: flex;
}

.browse-cat-head__text {
    min-width: 0;
    flex: 1;
}

.browse-cat-head__title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
}

.browse-cat-head__meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* All live on browse: same vertical grid as homepage (.streams-grid) */
.browse-all-live-section .browse-all-live-grid {
    margin-top: 0;
}

.pagination {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.page-info {
    color: var(--text-muted);
}

/* Auth */
.auth-page {
    min-height: calc(100vh - 220px);
    display: grid;
    place-items: center;
    padding: 42px 16px;
}

.auth-card {
    width: min(460px, 100%);
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(150deg, rgba(30, 86, 245, 0.17), transparent 35%),
        #18181f;
    padding: 24px;
    box-shadow: var(--shadow);
}

.auth-header {
    text-align: center;
    margin-bottom: 18px;
}

.auth-logo {
    color: var(--brand-soft);
    font-size: 2.1rem;
    margin-bottom: 8px;
}

.auth-header h1 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.auth-header p,
.auth-footer p {
    margin: 0;
    color: var(--text-muted);
}

.auth-footer {
    text-align: center;
    margin-top: 16px;
}

.auth-footer a {
    color: var(--brand-soft);
    font-weight: 700;
}

.auth-oauth-block {
    margin-bottom: 18px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth-divider span {
    flex-shrink: 0;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid var(--line);
    font-weight: 600;
}

.btn-google:hover {
    background: #f3f4f6;
    color: #111;
}

.auth-email-alt {
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.auth-email-alt summary {
    cursor: pointer;
}

.form-group {
    margin-bottom: 13px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #d7d7df;
    font-weight: 600;
    font-size: 0.92rem;
}

.form-group input,
.form-group textarea,
.form-group select,
.key-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: #fff;
    padding: 10px 11px;
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.key-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(30, 86, 245, 0.18);
}

.password-input {
    position: relative;
}

.password-input input {
    padding-inline-end: 42px;
}

.toggle-password {
    position: absolute;
    top: 50%;
    inset-inline-end: 8px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #a3a3af;
    cursor: pointer;
}

.form-hint {
    display: block;
    margin-top: 5px;
    color: #9191a1;
    font-size: 0.78rem;
}

.form-error {
    min-height: 22px;
    color: #fda4af;
    font-size: 0.86rem;
    margin-bottom: 6px;
}

/* Dashboard */
.dashboard {
    padding: 24px 0;
}

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

.dashboard-header h1 {
    margin: 0;
    font-size: 1.45rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
}

.status-live {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-offline {
    background: rgba(148, 163, 184, 0.13);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.dash-card {
    grid-column: span 6;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-elev-1);
    padding: 16px;
}

.dash-card h2 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dash-card-desc {
    margin: -6px 0 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* User search dropdown for Mod/VIP */
.user-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    margin-top: 4px;
}
.user-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .85rem;
    color: var(--text);
    cursor: pointer;
    transition: background .12s;
}
.user-search-item:hover {
    background: var(--bg-elev-3);
}
.user-search-item + .user-search-item {
    border-top: 1px solid var(--line);
}

.current-stream-info,
.quick-links {
    display: grid;
    gap: 10px;
}

.stream-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d4d4de;
}

.key-display {
    display: flex;
    align-items: center;
    gap: 7px;
}

.key-input {
    flex: 1;
}

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

.stat-item {
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.quick-link {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 11px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.quick-link:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Dashboard Tabs */
.dash-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--line);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dash-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -2px;
}

.dash-tab:hover {
    color: var(--text);
}

.dash-tab.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.dash-tab-content {
    display: none;
}

.dash-tab-content.active {
    display: block;
    animation: dashFadeIn .2s ease;
}

@keyframes dashFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Live/Offline status dots in stream tab */
.dash-live-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 10px;
    font-size: .88rem;
    color: #86efac;
}

.dash-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.dash-offline-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(148, 163, 184, .07);
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 10px;
    font-size: .88rem;
    color: var(--text-muted);
}

.dash-offline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}

/* Dashboard chart wrapper */
.dash-chart-wrap {
    position: relative;
    width: 100%;
}

.dash-chart-wrap canvas {
    width: 100% !important;
    height: 180px;
    display: block;
}

.dash-chart-label {
    text-align: center;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* Dashboard table */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    margin-top: 12px;
}

.dash-table th {
    text-align: center;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--line);
}

.dash-table td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.dash-table tr:hover td {
    background: rgba(255,255,255,.02);
}

/* Responsive dashboard */
@media (max-width: 768px) {
    .dash-grid-2 {
        grid-template-columns: 1fr;
    }
    .dash-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .dash-tabs {
        gap: 0;
    }
    .dash-tab {
        padding: 10px 12px;
        font-size: .82rem;
    }
    #tab-moderation .dash-card > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Stream key / key-display rows */
    .key-display {
        flex-wrap: wrap;
    }
    .key-display .key-input {
        min-width: 0;
        flex: 1 1 0;
    }
}

/* ─── Responsive grid rows for dashboard ─────────────────────── */
.db-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.db-r3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.db-r4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.db-r2 > *, .db-r3 > *, .db-r4 > * { margin: 0 !important; }

/* Stream Key + OBS side-by-side, collapse to 1col on narrow */
.db-key-obs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .db-key-obs { grid-template-columns: 1fr; } }

/* OBS overlay tiles (compact 2x2 grid inside OBS Links card) */
.obs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .obs-tiles { grid-template-columns: 1fr; } }
.obs-tile {
    background: var(--bg-elev-3, rgba(255,255,255,.03));
    border: 1px solid var(--line, rgba(255,255,255,.08));
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .15s, transform .15s;
}
.obs-tile:hover { border-color: var(--dash-accent, #6366f1); transform: translateY(-1px); }
.obs-tile-head { display: flex; align-items: center; gap: 8px; }
.obs-tile-icon {
    width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.obs-tile-label { font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.obs-tile-actions { display: flex; gap: 6px; }
.obs-tile-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 8px; border-radius: 6px;
    background: var(--bg-elev-2, rgba(255,255,255,.04));
    border: 1px solid var(--line, rgba(255,255,255,.1));
    color: var(--text); font-size: .72rem; font-weight: 500;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.obs-tile-btn:hover { background: var(--dash-accent-soft, rgba(99,102,241,.15)); border-color: var(--dash-accent, #6366f1); color: var(--dash-accent-2, #818cf8); }
.obs-tile-btn-test:hover { background: rgba(34,197,94,.15); border-color: #22c55e; color: #22c55e; }
.obs-tile-btn i { font-size: .75rem; }

@media (max-width: 900px) {
    .db-r4 { grid-template-columns: 1fr 1fr; }
    .db-r3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .db-r2, .db-r3, .db-r4 { grid-template-columns: 1fr; }
    .analytics-stat-row { flex-direction: column; }
    .analytics-overview-grid { grid-template-columns: 1fr 1fr !important; }
    .dashboard-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ach-grid { grid-template-columns: 1fr !important; }
    .ach-specials { flex-direction: column; }
    .ach-special-card { min-width: 0 !important; }
}

/* ─── Followers tab ─────────────────────────────────────────── */
.fl-search-row {
    display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.fl-search-row input { flex: 1; min-width: 0; padding: 9px 12px;
    background: var(--bg-elev-3); border: 1px solid var(--line);
    border-radius: 8px; color: var(--text); outline: none; font-size: .88rem; }
.fl-search-row .btn { white-space: nowrap; }

.fl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
@media (max-width: 480px) {
    .fl-grid { grid-template-columns: 1fr; }
}
.fl-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: border-color .15s;
}
.fl-card:hover { border-color: rgba(255,255,255,.12); }
.fl-card img {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.fl-card-body { flex: 1; min-width: 0; }
.fl-card-name {
    font-weight: 700; font-size: .88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-card-user {
    font-size: .75rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-card-meta { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }
.fl-live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; margin-left: 5px; margin-bottom: 1px;
}
.fl-remove-btn {
    border: none; background: transparent; color: rgba(166,166,178,.5);
    cursor: pointer; padding: 4px 6px; border-radius: 6px;
    font-size: .8rem; transition: color .15s, background .15s;
    flex-shrink: 0;
}
.fl-remove-btn:hover { color: #f43f5e; background: rgba(244,63,94,.1); }
.fl-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.fl-pagination button { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg-elev-2); color: var(--text); font-size: .83rem; cursor: pointer; }
.fl-pagination button:disabled { opacity: .35; cursor: not-allowed; }
.fl-pagination .fl-page-info { font-size: .82rem; color: var(--text-muted); }

/* Profile */
.profile-page {
    padding: 20px 0;
}

.profile-header {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--bg-elev-1);
    overflow: hidden;
}

.profile-banner {
    height: 200px;
    background:
        radial-gradient(600px 200px at 20% -10%, rgba(30, 86, 245, 0.55), transparent 60%),
        linear-gradient(120deg, var(--bg-elev-2), var(--bg-elev-1));
    background-size: cover;
    background-position: center;
}

.profile-info {
    margin-top: -42px;
    padding: 0 18px 18px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 14px;
}

.profile-avatar-wrapper {
    position: relative;
}

.profile-avatar {
    width: 124px;
    height: 124px;
    border-radius: 16px;
    border: 4px solid #17171d;
    object-fit: cover;
}

.profile-live-badge {
    position: absolute;
    bottom: 7px;
    inset-inline-end: 7px;
}

.profile-name {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-username {
    color: #b8b8c6;
    display: block;
    margin: 2px 0 8px;
}

.profile-bio {
    margin: 0 0 10px;
    color: #dddde7;
}

.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: #b4b4c2;
    font-size: 0.9rem;
}

.profile-actions {
    display: flex;
    gap: 8px;
}

.profile-stream {
    margin-top: 16px;
}

.profile-stream h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.stream-card-lg {
    max-width: 760px;
}

.stream-duration {
    color: #c8c8d4;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stream-player {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
}

/* Older Android / Samsung browser fallback — use padding-top trick */
@supports not (aspect-ratio: 1) {
    .player-wrapper {
        height: 0;
        padding-top: 56.25%; /* 9/16 */
    }
    .player-wrapper > * {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

.hls-video-player {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* ── Custom player dark theme overrides ── */
.hls-video-player::-webkit-media-controls-panel {
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}
.hls-video-player::-webkit-media-controls-current-time-display,
.hls-video-player::-webkit-media-controls-time-remaining-display {
    color: #e0e0e0;
    font-size: 13px;
}
/* +18 + viewer/chat peek: one row (no stacking under mature badge) */
.player-top-right-stack {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 55;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.player-mature-badge {
    position: static;
    z-index: 6;
    pointer-events: none;
    border-radius: 8px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
}

/* Mobile fullscreen: video + chat drawer (streamPageWrap) */
#streamPageWrap:fullscreen,
#streamPageWrap:-webkit-full-screen {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000;
    overflow: hidden !important;
}
#streamPageWrap:fullscreen .stream-player,
#streamPageWrap:-webkit-full-screen .stream-player {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#streamPageWrap:fullscreen .chat-panel,
#streamPageWrap:-webkit-full-screen .chat-panel {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 380px) !important;
    max-width: 100% !important;
    height: 100% !important;
    z-index: 50 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: translateX(100%);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
    background: var(--bg-elev-1, #16161c) !important;
}
#streamPageWrap:fullscreen .chat-panel-toggle-hint,
#streamPageWrap:-webkit-full-screen .chat-panel-toggle-hint {
    display: none !important;
}
@media (max-width: 900px) {
    .player-mob-tray {
        display: none;
    }
    html:not(.tl-mobfs-fullscreen-page) body.page-stream.tl-mob-chat-drawer-open .player-mob-tray,
    html.tl-mobfs-fullscreen-page .player-mob-tray {
        display: flex;
    }
    .player-mob-tray .tl-mobfs-chat-btn {
        display: none;
    }
}
@media (min-width: 901px) {
    .player-mob-tray {
        display: none !important;
    }
}
/* Viewer count lives in mob-info bar — hide duplicate overlay on player (RTL: top-left) */
body.page-stream .player-mob-tray .player-mob-viewer,
body.page-stream #viewerCountMobPlayer {
    display: none !important;
}

@media (max-width: 900px) {
    body.page-stream:not(.tl-mob-chat-drawer-open) .player-mob-tray .player-mob-viewer,
    body.page-stream:not(.tl-mob-chat-drawer-open) #viewerCountMobPlayer {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .mob-info-bar-actions > .viewer-count {
        display: none !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .mob-info-bar-actions > .viewer-count {
        display: inline-flex !important;
    }
    html.tl-mobfs-fullscreen-page .player-mob-tray .player-mob-viewer,
    html.tl-mobfs-fullscreen-page #viewerCountMobPlayer {
        display: none !important;
    }
}

/* ── Custom player controls overlay ── */
.player-controls-bar {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: 35;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
    overflow: visible;
    min-height: 36px;
}
.player-controls-bar__cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    min-height: 36px;
    border-radius: 10px;
    background: rgba(14, 16, 24, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
    overflow: visible;
}
.player-controls-bar__cluster .player-ctrl-btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-controls-bar__cluster--center {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
}
.player-controls-bar__cluster--right {
    margin-left: auto;
}
.player-ctrl-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.player-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.2);
}
.pq-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
}
.pq-res {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
}
.pq-fps {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
    font-weight: 400;
}
.pq-opt.active .pq-fps {
    color: rgba(255,255,255,.6);
}
.player-big-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    cursor: pointer;
    background: rgba(0,0,0,0.3);
    transition: opacity 0.3s;
}
.player-big-play.hidden {
    opacity: 0;
    pointer-events: none;
}
.player-big-play i {
    font-size: 3rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
@keyframes spin { to { transform: rotate(360deg); } }

.live-placeholder {
    background:
        linear-gradient(130deg, rgba(30, 86, 245, 0.32), transparent 45%),
        linear-gradient(180deg, var(--bg-elev-2), var(--bg));
}

.offline-placeholder {
    background:
        linear-gradient(130deg, rgba(148, 163, 184, 0.22), transparent 45%),
        linear-gradient(180deg, var(--bg-elev-2), var(--bg));
}

.player-center {
    height: 100%;
    display: grid;
    place-content: center;
    gap: 7px;
    text-align: center;
    color: #fff;
}

.player-center p {
    margin: 0;
    color: var(--text-muted);
}

.live-badge-lg {
    justify-self: center;
    margin-top: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(244, 63, 94, 0.9);
    font-weight: 800;
}

.channel-avatar {
    position: relative;
}

.channel-avatar img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3b3b45;
}

.avatar-live-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    bottom: 2px;
    inset-inline-end: 2px;
    border: 2px solid #17171d;
}

.channel-name {
    margin: 0;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stream-title-bar {
    display: block;
    font-size: 0.95rem;
    margin-top: 2px;
}

.stream-category-link {
    display: inline-block;
    margin-top: 4px;
    color: var(--brand-soft);
    font-size: 0.88rem;
}

.viewer-count,
.follower-count {
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px 14px;
    background: var(--bg-elev-2);
    white-space: nowrap;
    min-height: 42px;
    box-sizing: border-box;
}

.channel-about {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elev-1);
    padding: 14px;
}

.channel-about h3 {
    margin: 0 0 6px;
}

.channel-about p {
    margin: 0 0 8px;
    color: #d6d6e1;
}

.channel-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #b8b8c6;
    font-size: 0.9rem;
}

/* Hidden on desktop — only shown inside mobile info tab */
.mip-close-btn { display: none; }

.chat-panel {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elev-1);
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 84px);
    position: sticky;
    top: 76px;
}

.chat-header {
    border-bottom: 1px solid var(--line);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.chat-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-header h3 {
    margin: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.chat-toggle {
    border: 1px solid var(--line);
    background: var(--bg-elev-3);
    color: #c8c8d4;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.chat-messages {
    flex: 1;
    overflow: auto;
    padding: 8px 12px;
    display: grid;
    gap: 0;
    direction: rtl;
    position: relative;
}

.chat-new-msg-pill {
    transition: filter 0.15s, transform 0.15s;
}
.chat-new-msg-pill:hover {
    filter: brightness(1.08);
}
.chat-new-msg-pill:active {
    transform: translateX(-50%) scale(0.97) !important;
}
.popout-chat-wrap .chat-new-msg-pill {
    bottom: 56px !important;
}

.chat-message {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 8px;
    padding: 8px 12px;
}

@keyframes tl-chat-intro-from-right {
    from {
        opacity: 0;
        transform: translate3d(1.75rem, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.chat-message.tl-chat-intro-in {
    animation: tl-chat-intro-from-right 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    .chat-message.tl-chat-intro-in {
        animation: none;
    }
}

/* Alternating row backgrounds — flush, no gap */
.chat-message:nth-child(odd)  { background: rgba(255,255,255,.03); }
.chat-message:nth-child(even) { background: rgba(0,0,0,.12); }

/* Admin private-to-streamer whisper message */
.chat-message.chat-msg-whisper {
    background: linear-gradient(90deg, rgba(245,158,11,.10), rgba(245,158,11,.02));
    border-inline-start: 3px solid #f59e0b;
    padding: 6px 8px;
    border-radius: 6px;
}
.chat-whisper-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .65rem; color: #f59e0b; font-weight: 600;
    background: rgba(245,158,11,.12);
    padding: 2px 6px; border-radius: 4px;
    margin-bottom: 3px;
}
.chat-whisper-tag i { font-size: .6rem; }

/* Soft-deleted message — visible to streamer / mods / site admins only */
.chat-message.chat-msg--deleted {
    opacity: .95;
    background: rgba(239, 68, 68, .05) !important;
}
.chat-deleted-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .65rem;
    color: #ef4444;
    font-weight: 600;
    background: rgba(239, 68, 68, .12);
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 3px;
}
.chat-deleted-tag i { font-size: .6rem; }
.chat-deleted-tag--ai {
    color: #3b82f6;
    background: rgba(59, 130, 246, .18);
}
.chat-message.chat-msg--ai-deleted {
    background: rgba(59, 130, 246, .06) !important;
}
.chat-message.chat-sys-notice.chat-sys-notice--ai {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}
.chat-message.chat-sys-notice.chat-sys-notice--ai .chat-deleted-tag--ai {
    flex-shrink: 0;
}
.chat-message.chat-sys-notice.chat-sys-notice--ai .chat-sys-notice__text {
    font-weight: 700;
}
.chat-message.chat-msg--deleted .chat-msg-text {
    text-decoration: line-through;
    opacity: .55;
}

/* System notices (timeout / ban / unban / generic) */
.chat-message.chat-sys-notice {
    display: block;
    grid-template-columns: unset;
    margin: 8px 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.chat-message.chat-sys-notice.chat-sys-notice--info {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.35), rgba(30, 41, 59, 0.5));
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.35);
}
.chat-message.chat-sys-notice.chat-sys-notice--timeout {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(120, 53, 15, 0.45));
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.45);
}
.chat-message.chat-sys-notice.chat-sys-notice--ban {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(127, 29, 29, 0.5));
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.45);
}
.chat-message.chat-sys-notice.chat-sys-notice--unban {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(6, 78, 59, 0.45));
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.4);
}
.chat-message.chat-sys-notice.chat-sys-notice--warn {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.22), rgba(113, 63, 18, 0.4));
    color: #fef08a;
    border-color: rgba(250, 204, 21, 0.4);
}

.chat-msg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #444;
}

.chat-msg-body {
    min-width: 0;
}

.chat-msg-user {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f3f3ff;
    font-size: 0.85rem;
    font-weight: 700;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.chat-msg-time {
    color: #9b9bac;
    font-size: 0.72rem;
    margin-inline-start: 6px;
}

.chat-msg-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}
/* Same visual size for every role/site/sub badge in chat (main + en-site mirror) */
.chat-msg-badges .chat-badge,
.chat-msg-badges img.chat-badge,
.chat-msg-user > .chat-badge,
.chat-msg-user > img.chat-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 4px;
}
.chat-msg-badges .chat-badge,
.chat-msg-user > .chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.chat-msg-badges .chat-badge i,
.chat-msg-user > .chat-badge i {
    font-size: 0.64rem;
    line-height: 1;
}
.chat-msg-badges .site-badge-img {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin-inline-start: 0 !important;
}
.chat-msg-badges .chat-badge-external,
.chat-msg-user > .chat-badge-external { background: rgba(59, 130, 246, 0.2); }

/* Diaspora guest chat (outside Iran — nickname on device) */
.chat-diaspora-gate {
    flex-shrink: 0;
    padding: 14px 12px 12px;
    border-top: 1px solid var(--line, #2a2a35);
    background: var(--bg-elev-2, #18181b);
}
.chat-diaspora-gate__lead {
    margin: 0 0 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #f3f3ff);
    line-height: 1.45;
}
.chat-diaspora-gate__label {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted, #9b9bac);
    margin-bottom: 6px;
}
.chat-diaspora-gate__input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line, #444);
    background: var(--bg-elev-3, #0e0e12);
    color: var(--text, #fff);
    font-size: 16px;
    margin-bottom: 6px;
}
.chat-diaspora-gate__hint {
    margin: 0 0 10px;
    font-size: 0.72rem;
    color: var(--text-muted, #888);
    line-height: 1.4;
}
.chat-diaspora-gate__btn {
    width: 100%;
}
.chat-diaspora-gate__err {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: #f87171;
    text-align: center;
}
.chat-msg-badges .chat-badge-sub,
.chat-msg-user > .chat-badge-sub   { background: rgba(169, 112, 255, 0.15); }
.chat-msg-badges img.chat-badge-sub,
.chat-msg-user > img.chat-badge-sub { background: rgba(0,0,0,0.2); }
.chat-msg-badges .chat-badge-giftgiver,
.chat-msg-user > .chat-badge-giftgiver {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.28), rgba(244, 63, 94, 0.2));
    border-radius: 5px;
    padding: 0 4px 0 3px !important;
    gap: 3px;
    font-size: 0.58rem;
    font-weight: 800;
    color: #fda4af;
}
.chat-giftgiver-num {
    font-variant-numeric: tabular-nums;
    min-width: 0.6em;
}

.chat-msg-text {
    margin-top: 2px;
    color: #d9d9e6;
    word-break: break-word;
    font-size: 0.89rem;
}

.chat-mention {
    color: var(--brand);
    font-weight: 600;
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
}
.chat-mention:hover {
    text-decoration: underline;
}
.chat-mention-me {
    background: rgba(30,86,245,.18);
    color: #c4a0ff;
}

.chat-empty {
    text-align: center;
    color: #9a9aaa;
    margin-top: 20px;
    font-size: 0.9rem;
}

.chat-input-area {
    border-top: 1px solid #2f2f39;
    padding: 10px 10px 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    z-index: 4;
}

.chat-reply-preview,
#chatReplyPreview {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 10px;
    margin: 0 0 4px;
    background: var(--bg-elev-3, #25252b);
    border-inline-start: 3px solid var(--brand, #1e56f5);
    border-radius: 4px;
    font-size: .78rem;
    color: var(--text-muted, #9ca3af);
    overflow: hidden;
}
.chat-reply-preview__icon {
    color: var(--brand, #1e56f5);
    font-size: .7rem;
    flex-shrink: 0;
}
.chat-reply-preview__info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.chat-reply-preview__user {
    color: var(--text, #e8e8e8);
    flex-shrink: 0;
}
.chat-reply-preview__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.chat-reply-preview__close {
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    padding: 0;
    font-size: .8rem;
    flex-shrink: 0;
}

#chatForm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    overflow: hidden;
}
/* Cheer (Tele) — physical left of the input strip (چپ باکس چت) */
.chat-input-wrap:has(.chat-tele-btn) {
    padding-left: 36px;
}
.chat-input-wrap:has(.chat-admin-btn) .chat-input,
.chat-input-wrap:has(.chat-emoji-btn) .chat-input {
    padding-inline-end: 4px;
}

/* Admin whisper panel — custom private message input (RTL-safe) */
.chat-admin-whisper-panel { direction: rtl; }
.chat-admin-whisper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(245,158,11,.18);
    background: rgba(245,158,11,.06);
}
.chat-admin-whisper-head__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 700;
    color: #fbbf24;
}
.chat-admin-whisper-close {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: .95rem;
    padding: 4px;
}
.chat-admin-whisper-body {
    padding: 10px 12px 12px;
    overflow-y: auto;
    max-height: calc(62vh - 48px);
}
.chat-admin-whisper-hint {
    font-size: .72rem;
    color: #9ca3af;
    margin-bottom: 10px;
    line-height: 1.45;
}
.chat-admin-whisper-hint i { color: #22c55e; margin-inline-end: 4px; }
.chat-admin-whisper-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 4px;
}
.chat-admin-preset {
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px 11px;
    background: #1f1f25;
    border: 1px solid #2a2a30;
    border-radius: 9px;
    color: #e5e7eb;
    font-size: .78rem;
    cursor: pointer;
    line-height: 1.45;
    transition: background .12s, border-color .12s;
}
.chat-admin-preset:hover {
    background: #26262d;
    border-color: rgba(245,158,11,.45);
}
.chat-admin-whisper-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #2a2a30;
}
.chat-admin-whisper-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 6px;
}
.chat-admin-whisper-input-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.chat-admin-whisper-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
    background: #0e0e12;
    border: 1px solid #2a2a30;
    border-radius: 8px;
    color: #fff;
    font-size: .78rem;
    outline: none;
    box-sizing: border-box;
}
.chat-admin-whisper-input:focus {
    border-color: #f59e0b;
}
.chat-admin-whisper-send {
    flex-shrink: 0;
    padding: 8px 12px;
    background: #f59e0b;
    border: none;
    border-radius: 8px;
    color: #1a1a1e;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.chat-input-wrap .chat-input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #fff;
    padding: 10px;
    outline: none;
}

.chat-input-wrap .chat-input:focus {
    border-color: transparent;
}
.chat-input-wrap:focus-within {
    border-color: var(--brand);
}

.chat-emoji-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 10px;
    transition: color .15s;
}
.chat-emoji-btn:hover {
    color: var(--brand);
}

/* Slash command help (stream owner / admin / streamer) — glass */
.chat-slash-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 8px;
    right: 8px;
    margin-bottom: 8px;
    max-height: min(55vh, 420px);
    overflow-y: auto;
    background: rgba(22, 24, 32, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 12px 14px;
    z-index: 60;
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 36px rgba(0, 0, 0, 0.45);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .chat-slash-panel {
        background: rgba(20, 22, 30, 0.42);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
    }
}
.chat-slash-panel.chat-slash-panel--open {
    display: block;
}
.chat-slash-panel p.intro {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.chat-slash-panel table {
    width: 100%;
    border-collapse: collapse;
}
.chat-slash-panel td {
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
.chat-slash-panel td.cmd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #93c5fd;
    white-space: nowrap;
    font-size: 0.74rem;
}
.chat-slash-panel td.desc {
    color: var(--text-muted);
}

.chat-slash-panel__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.chat-slash-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: start;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px 6px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 6px;
    box-sizing: border-box;
}
.chat-slash-row:last-child {
    border-bottom: none;
}
.chat-slash-row:hover,
.chat-slash-row:focus {
    background: rgba(30, 86, 245, 0.12);
    outline: none;
}
.chat-slash-row .cmd {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #93c5fd;
    font-size: 0.74rem;
    white-space: nowrap;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-slash-row .desc {
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
    text-align: start;
}

.chat-emoji-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 10px;
    right: 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    max-height: min(52vh, 320px);
    overflow: hidden;
    z-index: 220;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5);
    display: none;
    flex-direction: column;
}
.emoji-picker-v2 {
    display: none;
}
.emoji-picker-v2.open { display: flex; flex-direction: column; }
/* Show/hide via style.display done via JS */
.chat-emoji-picker[style*="block"],
.chat-emoji-picker[style*="flex"] {
    display: flex !important;
    flex-direction: column;
}

/* Emoji category tabs */
.emoji-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 8px 8px 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev-3);
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
    min-width: 52px;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: 8px 8px 0 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 600;
    transition: background .12s, color .12s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.emoji-tab:hover { color: var(--text); background: var(--bg-elev-2); }
.emoji-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.emoji-tab-icon { font-size: 1.05rem; line-height: 1; }
.emoji-tab-label { font-size: .62rem; line-height: 1.1; }

/* Emoji picker v2 layout (tabs + body) */
.emoji-picker__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(45vh, 300px);
}
.emoji-picker__inner--gifs {
    max-height: min(52vh, 360px);
}
.emoji-picker__body:has(.emoji-grid--gifs) {
    min-height: 200px;
}
.emoji-picker__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    background: var(--bg-elev-2);
}

/* Sub packs — one row per streamer the viewer subbed to (or "you") */
.emoji-sub-packs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 8px 10px;
}
.emoji-sub-pack {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-elev-1);
    overflow: hidden;
}
.emoji-sub-pack__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: linear-gradient(90deg, rgba(30, 86, 245, 0.06), transparent);
    border-bottom: 1px solid var(--line);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
}
.emoji-sub-pack__av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.emoji-sub-pack__name {
    flex: 1;
    min-width: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emoji-sub-pack__badge {
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elev-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.emoji-sub-pack__noem {
    font-size: .8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 8px;
}
.emoji-sub-pack__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 6px;
    max-height: 140px;
    overflow-y: auto;
}
.emoji-item.emoji-custom { position: relative; }
.emoji-lock-over {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: .7rem;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0,0,0,0.75);
}
.emoji-item.emoji-locked { cursor: pointer; }

/* Emoji grid */
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    max-height: 180px;
}
.emoji-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    padding: 18px 0;
}
.emoji-item {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background .12s, transform .1s;
    text-align: center;
    line-height: 1.4;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-item:hover { background: var(--bg-elev-3); transform: scale(1.15); }
.emoji-item:hover {
    background: var(--bg-elev-3);
}
.emoji-item.emoji-text {
    font-size: .7rem;
    font-weight: 700;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}

.chat-login-prompt,
.chat-offline {
    margin: auto;
    text-align: center;
    color: #b0b0bf;
    padding: 12px;
}

/* Bot message styling */
.chat-message-bot {
    background: rgba(0, 197, 110, 0.06);
    border-radius: 8px;
    margin: 4px 0;
    padding: 2px 0;
}
.chat-bot-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #00c56e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    flex-shrink: 0;
}
.chat-badge-bot {
    background: #00c56e;
    color: #fff;
    font-size: .55rem;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
}

.chat-login-prompt a {
    color: var(--brand-soft);
    font-weight: 700;
}

.chat-panel.collapsed .chat-messages,
.chat-panel.collapsed .chat-input-area,
.chat-panel.collapsed .chat-login-prompt,
.chat-panel.collapsed .chat-offline {
    display: none;
}

.chat-panel.collapsed {
    min-height: auto;
}

/* Footer */
.footer {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
}

.footer-grid {
    padding: 26px 0 18px;
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 18px;
}

.footer-col h4,
.footer-brand {
    margin: 0 0 8px;
}

.footer-col a {
    display: block;
    color: #c9c9d6;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.footer-col a:hover {
    color: #fff;
}

.footer-desc {
    color: #9f9fb0;
}

.social-links {
    display: flex;
    gap: 8px;
}

.social-links a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #393947;
    background: var(--bg-elev-1);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0 18px;
    color: #9999aa;
    text-align: center;
    font-size: 0.86rem;
}

/* Motion */
.pulse {
    animation: pulse 1.4s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.88);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-section,
.section,
.dashboard,
.profile-page,
.browse-header,
.auth-page {
    animation: fadeUp 0.45s ease;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1280px) {
    .stream-page {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .hero-stream {
        grid-template-columns: minmax(0, 1fr) 290px;
    }
}

@media (max-width: 1024px) {
    .navbar-container {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 8px 12px;
        padding: 8px 0;
        min-height: auto;
        align-items: center;
    }

    .navbar-left {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        justify-content: flex-start;
    }

    .navbar-right {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        justify-content: flex-end;
    }

    .navbar-center {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .hero-stream {
        grid-template-columns: 1fr;
    }
    /* stream-page stacking only on phone — tablet/desktop keep side chat (see min-width 769) */
    .stream-page {
        grid-template-columns: 1fr;
    }

    .stream-page .mobile-tab-bar {
        border-radius: 8px;
    }

    .chat-panel {
        position: static;
        min-height: 430px;
        max-height: 540px;
    }

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

    .dash-card {
        grid-column: span 1;
    }

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

@media (max-width: 760px) {
    .navbar-links {
        display: none;
    }

    .profile-info {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .profile-avatar {
        width: 95px;
        height: 95px;
    }

    .stream-info-bar {
        flex-direction: column;
        align-items: start;
    }

    .stream-info-left {
        flex-wrap: wrap;
    }

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

    .hero-player,
    .player-placeholder {
        min-height: 260px;
    }

    .auth-card {
        padding: 18px;
    }

    /* Compact navbar controls on small screens */
    .theme-switcher {
        padding: 7px 9px;
        margin-inline-end: 6px;
    }

    .lang-switcher {
        margin-inline-end: 6px;
    }

    .notification-bell {
        margin-inline-end: 6px;
    }

    /* notification dropdown should not overflow screen */
    .notification-dropdown {
        width: min(380px, 94vw);
        right: 0;
        border-radius: 12px;
    }

    /* Browse header compact */
    .browse-header {
        padding: 14px 0 10px;
    }

    /* Stream cards: 2 columns on phones */
    .streams-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Categories: 2 columns */
    .categories-grid,
    .categories-grid-lg {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Hero sidebar hides on small screens */
    .hero-sidebar {
        display: none;
    }

    /* Donations / forms */
    .donation-form-row {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    /* Single column stream grid on very small phones */
    .streams-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Categories: 2 compact columns */
    .categories-grid,
    .categories-grid-lg {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .category-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .category-card-lg {
        min-height: auto;
    }

    /* Navbar: hide theme switcher text, keep icon only */
    .theme-switcher > i {
        margin: 0;
    }

    /* Hero on very small screens */
    .hero-player,
    .player-placeholder {
        min-height: 200px;
    }

    /* Profile avatar */
    .profile-avatar {
        width: 76px;
        height: 76px;
    }

    /* Profile actions stack */
    .profile-actions {
        flex-wrap: wrap;
    }

    /* Auth page */
    .auth-page {
        padding: 24px 12px;
    }

    /* Browse header */
    .browse-header h1 {
        font-size: 1.3rem;
    }

    /* Section header */
    .section-header h2 {
        font-size: 1rem;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Ensure tap targets are at least 44px */
    .btn {
        min-height: 44px;
    }

    .nav-link,
    .tab-btn {
        min-height: 44px;
    }
}
/* ============ THEME SWITCHER ============ */
.theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 12px;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: var(--radius-xs);
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: all 0.2s;
    user-select: none;
}

.theme-switcher:hover {
    background: var(--bg-elev-3);
    color: var(--text);
}

.theme-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow);
    min-width: 150px;
    z-index: 200;
    overflow: hidden;
    display: none;
}

.theme-switcher.open .theme-dropdown {
    display: block;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.theme-option:hover {
    background: var(--bg-elev-3);
    color: var(--text);
}

.theme-option.active {
    color: var(--brand);
    font-weight: 600;
}

/* ============ NOTIFICATIONS ============ */
.notification-bell {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2);
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
    margin-inline-end: 0;
}

.notification-bell:hover {
    background: var(--bg-elev-3);
    color: var(--text);
    border-color: var(--line);
    transform: scale(1.05);
}

.notification-bell > i {
    font-size: .95rem;
    transition: transform .3s ease;
}
.notification-bell:hover > i {
    animation: notif-ring .5s ease;
}
@keyframes notif-ring {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(14deg); }
    40%  { transform: rotate(-14deg); }
    60%  { transform: rotate(8deg); }
    80%  { transform: rotate(-8deg); }
    100% { transform: rotate(0); }
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-body);
    animation: notif-badge-pop .3s ease;
}
@keyframes notif-badge-pop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 520px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.97);
    transition: opacity .2s ease, visibility .2s ease, transform .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    z-index: 100;
}

.notification-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tl-push-prompt {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(30, 86, 245, 0.08);
}
.tl-push-prompt p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.tl-push-prompt__btn {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: var(--brand, #1e56f5);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.tl-push-prompt__btn:hover:not(:disabled) {
    filter: brightness(1.08);
}
.tl-push-prompt__ok {
    margin: 0;
    font-size: 0.82rem;
    color: #22c55e;
}
.tl-push-prompt__ok i {
    margin-inline-end: 6px;
}

.notification-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30,86,245,.04);
}

.notification-header-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.notification-header-title i {
    color: var(--brand);
    font-size: .85rem;
}

.notification-header-actions {
    display: flex;
    gap: 4px;
}
.notification-header-actions button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .78rem;
    transition: all .15s ease;
}
.notification-header-actions button:hover {
    background: var(--bg-elev-2);
    color: var(--brand);
}

.notification-list {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}
.notification-list::-webkit-scrollbar { width: 4px; }
.notification-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background .15s ease;
}

.notification-item:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.notification-item:hover {
    background: var(--bg-elev-2);
}

.notification-item.unread {
    background: rgba(30, 86, 245, 0.06);
}

.notification-item.unread::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--brand);
    border-radius: 50%;
}

.notification-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line);
}

.notification-type-icon {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    color: #fff;
    box-shadow: 0 0 0 2px var(--bg-elev-1);
}
.notification-type-icon.follow { background: linear-gradient(135deg,#1e56f5,#6366f1); }
.notification-type-icon.live   { background: linear-gradient(135deg,#ef4444,#ff6a88); }
.notification-type-icon.system { background: linear-gradient(135deg,#f59e0b,#facc15); }
.notification-type-icon.donation { background: linear-gradient(135deg,#10b981,#34d399); }

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notification-item.unread .notification-text {
    font-weight: 600;
}

.notification-time {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.notification-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.notification-empty i {
    font-size: 2.5rem;
    opacity: 0.3;
}
.notification-empty p {
    margin: 0;
    font-size: .85rem;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.notification-empty i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ============ BADGES ============ */
.user-badges {
    display: flex;
    gap: 4px;
    margin-inline-start: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.65rem;
}

.badge-verified { background: var(--brand); color: #fff; }
.badge-partner { background: linear-gradient(135deg, #ff6a88, var(--danger)); color: #fff; }
.badge-subscriber { background: var(--warning); color: #000; }
.badge-vip { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #000; }
.badge-moderator { background: var(--success); color: #fff; }
.badge-early-supporter { background: #e91e63; color: #fff; }
.badge-top-donator { background: #4caf50; color: #fff; }

.badge-lg {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

/* ============ EMOJI PICKER ============ */
.emoji-picker-wrapper {
    position: relative;
}

.emoji-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2);
    border: none;
    border-radius: var(--radius-xs);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.emoji-btn:hover {
    background: var(--bg-elev-3);
}

.emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 320px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.emoji-picker.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.emoji-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}

.emoji-tab {
    flex: 1;
    padding: 6px;
    background: none;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.emoji-tab:hover,
.emoji-tab.active {
    background: var(--bg-elev-2);
    color: var(--text);
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.1s ease;
    background: none;
    border: none;
}

.emoji-item:hover {
    background: var(--bg-elev-2);
    transform: scale(1.15);
}

/* Tier-locked channel emojis: visible but un-insertable; click opens sub modal. */
.emoji-item.emoji-locked {
    position: relative;
    cursor: pointer;
}
.emoji-item.emoji-locked:hover {
    transform: scale(1.05);
    background: rgba(255, 215, 0, 0.08);
}
.emoji-item.emoji-locked .emoji-lock-overlay {
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ============ DONATIONS ============ */
.donation-alert {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 350px;
    background: linear-gradient(135deg, var(--bg-elev-1), var(--bg-elev-2));
    border: 2px solid var(--success);
    border-radius: var(--radius);
    box-shadow: var(--shadow), 0 0 30px rgba(34, 197, 94, 0.2);
    padding: 16px;
    animation: slideInRight 0.4s ease, pulse 2s ease-in-out infinite;
    z-index: 1000;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.donation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.donation-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--success);
}

.donation-info h4 {
    margin: 0;
    font-size: 0.95rem;
}

.donation-amount {
    color: var(--success);
    font-weight: 700;
    font-size: 0.85rem;
}

.donation-message {
    background: var(--bg-elev-2);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

.donation-panel {
    background: var(--bg-elev-1);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 16px;
}

.donation-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.donation-amount-btn {
    padding: 10px;
    background: var(--bg-elev-2);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.donation-amount-btn:hover,
.donation-amount-btn.active {
    border-color: var(--brand);
    background: rgba(30, 86, 245, 0.1);
}

.donation-custom {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.donation-custom input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
}

/* ============ LAZY LOADING ============ */
.lazy-image {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

.lazy-placeholder {
    background: linear-gradient(90deg, var(--bg-elev-2) 25%, var(--bg-elev-3) 50%, var(--bg-elev-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============ VIDEO PLAYER ============ */
.video-player {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.video-player video {
    width: 100%;
    display: block;
}

.player-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 40px 16px 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-player:hover .player-controls {
    opacity: 1;
}

.player-progress {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin-bottom: 12px;
    cursor: pointer;
}

.player-progress-bar {
    height: 100%;
    background: var(--brand);
    border-radius: 2px;
    transition: width 0.1s ease;
}

.player-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.player-left,
.player-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.player-btn:hover {
    opacity: 1;
}

.player-btn.play-btn {
    font-size: 1.3rem;
}

.player-time {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.9);
}

.volume-slider {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
}

.quality-selector {
    position: relative;
}

.quality-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 0;
    margin-bottom: 8px;
    min-width: 100px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.quality-selector:hover .quality-menu {
    opacity: 1;
    visibility: visible;
}

.quality-option {
    display: block;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.quality-option:hover,
.quality-option.active {
    background: var(--bg-elev-2);
}

.quality-option.active::after {
    content: '✓';
    float: right;
    color: var(--brand);
}

/* ============ VOD & CLIPS ============ */
.vod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.vod-card {
    background: var(--bg-elev-1);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease;
}

.vod-card:hover {
    transform: translateY(-4px);
}

.vod-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-elev-2);
}

.vod-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vod-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.vod-info {
    padding: 12px;
}

.vod-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vod-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.clip-card {
    position: relative;
}

.clip-creator {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.7);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.clip-creator img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

/* Homepage / browse clip cards */
.tl-clips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.tl-clip-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elev-1, #16161c);
    border: 1px solid var(--line, #2a2a35);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-clip-card {
        background: rgba(26, 26, 30, 0.45);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
}

.tl-clip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, .45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.tl-clip-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.tl-clip-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tl-clip-card__dur {
    position: absolute;
    bottom: 6px;
    inset-inline-end: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tl-clip-card__badge {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, .9);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.tl-clip-card__body { padding: 10px 12px 12px; }

.tl-clip-card__title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text, #eee);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.tl-clip-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: var(--text-muted, #888);
}

.tl-clip-card__channel-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tl-clip-card__channel-name {
    font-weight: 600;
    font-size: .78rem;
    color: var(--text, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-clip-card__category {
    font-size: .68rem;
    color: var(--text-muted, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-clip-card__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.tl-clip-card__views { margin-inline-start: auto; }

.tl-clip-card--pending .tl-clip-card__thumb img { opacity: .65; }

/* Homepage clips panel + shared clips filter tabs */
.tl-home-clips-panel {
    border-radius: 18px;
    padding: 16px;
}
.tl-clips-filter-tabs {
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tl-home-clips-panel .tl-clips-filter-tabs {
    margin-top: 0;
}
#tlHomeClipsGrid .pt-spinner,
#tlHomeClipsGrid .pt-empty-msg,
#browseClipsGrid .pt-spinner,
#browseClipsGrid .pt-empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 12px;
    color: var(--text-muted);
}

/* Clip management table (dashboard / my-clips) */
.tl-clip-manage {
    width: 100%;
    max-width: 920px;
    border-collapse: collapse;
    font-size: .88rem;
    table-layout: fixed;
}
.tl-clip-manage__col-thumb { width: 108px; }
.tl-clip-manage__col-views { width: 84px; }
.tl-clip-manage__col-actions { width: 148px; }
.tl-clip-manage th {
    text-align: start;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.tl-clip-manage td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.tl-clip-manage__info {
    min-width: 0;
}
.tl-clip-manage__title,
.tl-clip-manage__title-input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tl-clip-manage__views {
    color: var(--text-muted);
    font-size: .82rem;
    white-space: nowrap;
}
.tl-clip-manage__thumb img {
    width: 96px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.tl-clip-manage__title-input {
    width: 100%;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    color: var(--text);
    font-size: .85rem;
}
.tl-clip-manage__creator {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.tl-clip-manage__status {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(59, 130, 246, .15);
    color: #60a5fa;
}
.tl-clip-manage__status--failed {
    background: rgba(248, 113, 113, .15);
    color: #f87171;
}
.tl-clip-manage__actions {
    white-space: nowrap;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tl-clip-manage__empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px !important;
}
@media (max-width: 720px) {
    .tl-clip-manage__thumb { display: none; }
    .tl-clip-manage th:first-child { display: none; }
}

/* VODs browse tabs */
.tl-vods-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.tl-vods-tab {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--line, #333);
    background: var(--bg-elev-1, #16161c);
    color: var(--text-muted, #aaa);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tl-vods-tab.active {
    background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(99,102,241,.2));
    border-color: rgba(59, 130, 246, .5);
    color: #fff;
}

.tl-vods-panel { display: none; }
.tl-vods-panel.active { display: block; }

/* Clip player page */
.clip-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 16px 60px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

@media (max-width: 900px) {
    .clip-page { grid-template-columns: 1fr; }
}

.clip-page__player.player-wrapper {
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

.player-clip-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 5;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.clip-time-readout {
    font-size: .7rem;
    color: #ddd;
    font-variant-numeric: tabular-nums;
    margin-inline-start: 8px;
    white-space: nowrap;
}

.clip-page__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text, #eee);
}

.clip-page__below {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.clip-page__info {
    flex: 1 1 220px;
    min-width: 0;
}

.clip-page__share {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.clip-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    font-size: .82rem;
    color: var(--text-muted, #888);
    margin-bottom: 0;
}

.clip-page__cat {
    color: #93c5fd;
}

.clip-page__share .clip-share-bar {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.player-dvr--vod {
    width: 100%;
}

.player-dvr--vod .player-dvr__track {
    width: 100%;
}

@media (max-width: 640px) {
    .clip-page__share {
        width: 100%;
        margin-inline-start: 0;
    }
    .clip-page__share .clip-share-bar {
        justify-content: flex-start;
    }
}

.clip-share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--bg-elev-1, #16161c);
    border: 1px solid var(--line, #2a2a35);
}

.clip-share-bar__label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted, #aaa);
    margin-inline-end: 4px;
}

.clip-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, opacity .12s ease;
}

.clip-share-btn:hover { transform: scale(1.06); opacity: .92; }

.clip-share-btn--tg { background: #229ed9; }
.clip-share-btn--wa { background: #25d366; }
.clip-share-btn--x { background: #111; border: 1px solid #333; }
.clip-share-btn--copy { background: #374151; }

.clip-side-card {
    background: var(--bg-elev-1, #16161c);
    border: 1px solid var(--line, #2a2a35);
    border-radius: 14px;
    padding: 16px;
}

.clip-side-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.clip-side-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.clip-side-card__name { font-weight: 700; color: var(--text, #eee); }

.clip-side-card__user {
    font-size: .8rem;
    color: var(--text-muted, #888);
    text-decoration: none;
}

.clip-side-card__btn {
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.clip-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    padding: 24px;
    text-align: center;
    color: #cbd5e1;
    gap: 10px;
    background: rgba(14, 16, 24, 0.35);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .clip-pending {
        backdrop-filter: blur(16px) saturate(150%);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
    }
}

.clip-pending__ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(99,102,241,.22));
    border: 1px solid rgba(59, 130, 246, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #3b82f6;
    animation: tlClipPendingPulse 2s ease-in-out infinite;
}

@keyframes tlClipPendingPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: .85; }
}

.clip-pending__bar {
    width: min(280px, 80%);
    height: 5px;
    background: rgba(255,255,255,.1);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.clip-pending__bar-fill {
    display: block;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: 999px;
    animation: tlClipBarPulse 1.8s ease-in-out infinite;
}

.clip-pending--failed .clip-pending__ring {
    background: linear-gradient(135deg, rgba(239,68,68,.2), rgba(248,113,113,.15));
    border-color: rgba(239, 68, 68, .4);
    color: #f87171;
    animation: none;
}

.clip-pending--failed strong { color: #fecaca; }

.clip-share-btn--dl { background: #2563eb; }
.clip-share-btn--del { background: #dc2626; }

/* ============ CHAT MODERATION ============ */
.mod-actions {
    display: none;
    gap: 4px;
    margin-inline-start: auto;
}

.chat-message:hover .mod-actions {
    display: flex;
}

.mod-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-2);
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mod-btn:hover {
    color: var(--text);
}

.mod-btn.ban:hover {
    background: var(--danger);
    color: #fff;
}

.mod-btn.timeout:hover {
    background: var(--warning);
    color: #000;
}

.mod-btn.delete:hover {
    background: var(--danger);
    color: #fff;
}

.banned-user-message {
    opacity: 0.5;
    text-decoration: line-through;
}

/* ---- Chat role badges ---- */
.chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    border-radius: 4px;
    font-size: 0.6rem;
    flex-shrink: 0;
    padding: 0 3px;
}
.chat-badge i { color: #fff; font-size: 0.6rem; }
.chat-badge-streamer { background: rgba(245,166,35,.25); }
.chat-badge-streamer i { color: #f5a623; }
.chat-badge-mod      { background: rgba(0,197,110,.25); }
.chat-badge-mod i    { color: #00c56e; }
.chat-badge-vip      { background: rgba(37,99,235,.25); }
.chat-badge-vip i    { color: #4a8af4; }
.chat-badge-admin    { background: rgba(245,158,11,.2); }
.chat-badge-admin i  { color: #fbbf24; }
.chat-badge-admin,
.chat-badge-owner,
.cup-badge-admin {
    display: none !important;
}
.chat-badge-owner    { background: rgba(245,158,11,.2); }
.chat-badge-owner i  { color: #fbbf24; }
.chat-badge-site     { background: rgba(145,71,255,.2); }
.chat-badge-site i   { color: inherit; }
.chat-msg-badges .chat-badge-site.tl-role-badge {
    padding: 0;
    min-width: 0;
    background: rgba(59, 130, 246, 0.14);
}
/* Site logo badge (verified-streamer) */
.site-badge-img {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: middle;
    margin-inline-start: 3px;
    flex-shrink: 0;
}

/* Role row: verified (blue tick) → partner → affiliate — home, browse, profile, search */
.tl-role-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: 5px;
    vertical-align: middle;
}
.tl-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
    box-sizing: border-box;
}
.tl-role-badge--verified {
    width: 22px;
    height: 22px;
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}
.tl-role-badge--verified i { font-size: 0.95rem; line-height: 1; }
.tl-role-badge--streamer {
    width: 20px;
    height: 20px;
    background: rgba(30, 86, 245, 0.12);
    color: #1e56f5;
}
.tl-role-badge--streamer i { font-size: 0.78rem; line-height: 1; }
.tl-role-badge--partner {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(192,132,252,.22), rgba(30,86,245,.18));
    color: #c084fc;
    border: 1px solid rgba(192,132,252,.35);
}
.tl-role-badge--affiliate {
    width: 18px;
    height: 18px;
}
.tl-role-badge--partner i,
.tl-role-badge--affiliate i { font-size: 0.72rem; line-height: 1; }
.tl-role-badge--img img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
}
.stream-streamer .tl-role-badges,
.tl-spotlight__who .tl-role-badges,
.tl-bar-name .tl-role-badges {
    margin-inline-start: 4px;
}
.tl-last-live-label {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 8px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    vertical-align: middle;
}
.tl-last-live-label i {
    font-size: .65rem;
    margin-inline-end: 4px;
    opacity: 0.75;
}

/* ---- User custom badges (no background, colored icon circle) ---- */
.user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-inline-start: 3px;
    vertical-align: middle;
    background: transparent;
}
.user-badge i { font-size: 0.78rem; }

/* ---- Clickable username in chat ---- */
.chat-msg-username {
    color: var(--brand);
    cursor: pointer;
    transition: opacity 0.15s;
    flex: 0 1 auto;
    min-width: 1.25em;
    max-width: 72%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-msg-username.tl-chat-name-rgb:not([data-mem-theme]) {
    color: var(--brand) !important;
    -webkit-text-fill-color: var(--brand);
    background: none !important;
}
.chat-msg-username:hover { opacity: 0.75; }

/* ---- Action buttons group ---- */
.chat-msg-actions {
    display: none;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-inline-start: auto;
}
.chat-message:hover .chat-msg-actions { display: inline-flex; }

/* ---- Per-message delete button (visible on hover) ---- */
.chat-msg-delete-btn {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-msg-delete-btn:hover { background: var(--danger); color: #fff; }

/* ============ MINI PROFILE POPUP ============ */
.chat-user-popup {
    position: fixed;
    z-index: 9999;
    width: 260px;
    background: var(--bg-elev-2, #18181b);
    border: 1px solid var(--border, #3a3a45);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: cupFadeIn 0.15s ease;
}
@keyframes cupFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cup-chat-history-modal {
    position: fixed;
    inset: 0;
    z-index: 100200;
    background: rgba(0, 0, 0, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.cup-chat-history-box {
    width: min(480px, 100%);
    max-height: min(78vh, 560px);
    background: var(--bg-elev-2, #18181b);
    border: 1px solid var(--border, #3a3a45);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.cup-chat-history-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #3a3a45);
    font-weight: 700;
    font-size: 0.92rem;
}
.cup-chat-history-list {
    overflow-y: auto;
    padding: 10px 12px 14px;
    flex: 1;
    min-height: 0;
}
.cup-chat-history-row {
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
}
.cup-chat-history-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted, #9b9bac);
    margin-bottom: 4px;
}
.cup-chat-history-text {
    font-size: 0.86rem;
    color: var(--text, #f3f3ff);
    word-break: break-word;
    white-space: pre-wrap;
}

.cup-loading { text-align: center; color: var(--text-muted, #9b9bac); padding: 20px 0; }
.cup-err     { text-align: center; color: var(--danger, #e74c3c); font-size: 0.85rem; margin: 8px 0; }

.cup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
}
.cup-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--brand, #1e56f5);
}
.cup-info { flex: 1; min-width: 0; }
.cup-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text, #f3f3ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cup-username { font-size: 0.78rem; color: var(--text-muted, #9b9bac); }
.cup-close {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-elev-3, #2a2a35);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cup-close:hover { background: var(--danger); color: #fff; }

.cup-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.cup-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
}
.cup-badge-streamer { background: #f5a623; }
.cup-badge-mod      { background: #00c56e; }
.cup-badge-vip      { background: #2563eb; }
.cup-badge-banned   { background: var(--danger, #e74c3c); }
.cup-badge-admin    { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.cup-stats {
    font-size: 0.78rem;
    color: var(--text-muted, #9b9bac);
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
}
.cup-stats i { color: var(--brand, #1e56f5); margin-inline-end: 3px; }

.cup-divider { height: 1px; background: var(--border, #3a3a45); margin: 8px 0; }

.cup-actions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cup-action-group { display: flex; flex-direction: column; gap: 4px; }
.cup-action-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cup-timeout-btns  { display: flex; gap: 4px; flex-wrap: wrap; }

.cup-btn {
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: var(--bg-elev-3, #2a2a35);
    color: var(--text, #f3f3ff);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cup-btn:hover                { background: var(--brand, #1e56f5); color: #fff; }
.cup-btn.cup-btn-sm           { width: auto; flex: 1; min-width: 36px; padding: 4px 6px; font-size: 0.75rem; text-align: center; justify-content: center; }
.cup-btn.cup-btn-danger       { color: var(--danger, #e74c3c); }
.cup-btn.cup-btn-danger:hover { background: var(--danger, #e74c3c); color: #fff; }
.cup-btn.cup-btn-success:hover{ background: var(--success, #00c56e); color: #fff; }
.cup-btn.cup-btn-outline      { background: transparent; border: 1px solid var(--border, #3a3a45); }
.cup-btn.cup-btn-outline:hover{ background: var(--bg-elev-3); border-color: var(--brand); }

.cup-profile-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--bg-elev-3, #2a2a35);
    color: var(--brand, #1e56f5);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s;
}
.cup-profile-link:hover { background: var(--brand); color: #fff; }

.mod-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--success);
    border-radius: 3px;
    margin-inline-end: 4px;
}

.mod-badge i {
    font-size: 0.55rem;
    color: #fff;
}

/* ============ PASSWORD RESET ============ */
.forgot-password-link {
    display: block;
    text-align: center;
    color: var(--brand);
    font-size: 0.85rem;
    margin-top: 12px;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.reset-success {
    text-align: center;
    padding: 40px 20px;
}

.reset-success i {
    font-size: 4rem;
    color: var(--success);
    margin-bottom: 16px;
}

.reset-success h2 {
    margin-bottom: 12px;
}

.reset-success p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ============ SMOOTH TRANSITIONS ============ */
.navbar,
.btn,
.card,
.stream-card,
.category-card,
.dash-card,
input,
textarea,
select {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* =====================
   Toast Notifications
===================== */
.toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    border-color: var(--success-color);
}

.toast-success i {
    color: var(--success-color);
}

.toast-error {
    border-color: var(--error-color);
}

.toast-error i {
    color: var(--error-color);
}

/* =====================
   Form Messages
===================== */
.form-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.form-message.success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.form-message.error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--error-color);
    color: var(--error-color);
}

.form-message a {
    color: inherit;
    text-decoration: underline;
}

/* =====================
   Toggle Password
===================== */
.input-group .toggle-password {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
}

[dir="ltr"] .input-group .toggle-password {
    left: auto;
    right: 10px;
}

.input-group .toggle-password:hover {
    color: var(--primary-color);
}

/* =====================
   Password Strength Indicator
===================== */
.password-strength {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.password-strength::before {
    content: '';
    height: 4px;
    width: 60px;
    border-radius: 2px;
    background: var(--bg-tertiary);
}

.password-strength.weak::before {
    background: linear-gradient(90deg, var(--error-color) 33%, var(--bg-tertiary) 33%);
}

.password-strength.weak span {
    color: var(--error-color);
}

.password-strength.medium::before {
    background: linear-gradient(90deg, #f39c12 66%, var(--bg-tertiary) 66%);
}

.password-strength.medium span {
    color: #f39c12;
}

.password-strength.strong::before {
    background: var(--success-color);
}

.password-strength.strong span {
    color: var(--success-color);
}

/* =====================
   Auth Container Fixes
===================== */
.auth-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-container .auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.auth-container .auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-container .auth-header i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.auth-container .auth-header h1 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.auth-container .auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-container .input-group {
    position: relative;
}

.auth-container .input-group i:first-child {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

[dir="ltr"] .auth-container .input-group i:first-child {
    right: auto;
    left: 12px;
}

.auth-container .input-group input {
    width: 100%;
    padding: 12px 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
}

.auth-container .input-group input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.auth-container .form-group {
    margin-bottom: 20px;
}

.auth-container .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.auth-container .form-actions {
    margin-top: 25px;
}

.auth-container .btn-block {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.auth-container .auth-links {
    text-align: center;
    margin-top: 25px;
}

.auth-container .auth-links a {
    color: var(--primary-color);
}

.text-warning {
    color: #f39c12 !important;
}

/* =============================================
   Profile Tabs (Twitch-like profile page)
   ============================================= */

/* ---- Header ---- */
.pt-header {
    position: relative;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
}

.pt-banner {
    height: 200px;
    background: var(--bg-elev-2);
    overflow: hidden;
    position: relative;
}

.pt-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-banner-gradient {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #1a0533 0%, #0e0e10 50%, #0e2a1a 100%);
}

.pt-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 20px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    position: relative;
    margin-top: -48px;
}

.pt-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.pt-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--bg);
    object-fit: cover;
    background: var(--bg-elev-2);
    display: block;
}

.pt-live-badge {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #e91916;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    pointer-events: none;
}

.pulse-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid rgba(233, 25, 22, 0.6);
    animation: pulse-ring 1.6s ease-out infinite;
}

@keyframes pulse-ring {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
}

.pt-meta {
    flex: 1;
    min-width: 0;
    padding-bottom: 4px;
}

.pt-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pt-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.pt-verified {
    color: var(--brand, #1e56f5);
    font-size: 1rem;
}

.pt-username {
    font-size: .9rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pt-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.pt-stat {
    font-size: .85rem;
    color: var(--text-muted);
}

.pt-stat strong {
    color: var(--text);
}

.pt-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    padding-bottom: 4px;
    flex-wrap: wrap;
}

/* ---- Tabs bar ---- */
.pt-tabs-bar {
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 60px;
    z-index: 10;
}

.pt-tabs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 0;
}

.pt-tab {
    padding: 14px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.pt-tab:hover {
    color: var(--text);
}

.pt-tab.active {
    color: var(--text);
    border-bottom-color: var(--brand, #1e56f5);
}

/* ---- Body ---- */
.pt-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.pt-panel {
    display: none;
}

.pt-panel.active {
    display: block;
}

/* ---- About tab ---- */
.pt-about-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

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

.pt-live-card {
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
}

.pt-live-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
}

.pt-live-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-live-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    transition: background .2s;
}

.pt-live-thumb:hover .pt-live-overlay {
    background: rgba(0,0,0,.55);
}

.pt-live-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(30,86,245,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.pt-live-viewers {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: .75rem;
    padding: 3px 8px;
    border-radius: 4px;
}

.pt-live-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e91916;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 3px;
}

.pt-live-info {
    padding: 14px 16px;
}

.pt-live-info h3 {
    margin: 0 0 4px;
    font-size: .97rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-live-info span {
    font-size: .82rem;
    color: var(--text-muted);
}

.pt-offline-card {
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
}

.pt-offline-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-elev-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.offline-tag {
    background: var(--bg-elev-3);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 3px;
}

.pt-offline-msg {
    padding: 14px 16px;
    font-size: .85rem;
    color: var(--text-muted);
}

.pt-bio-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    padding: 18px;
    margin-bottom: 16px;
}

.pt-bio-card h4 {
    margin: 0 0 10px;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}

.pt-bio-text {
    font-size: .9rem;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.pt-recent-vods h4 {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.pt-see-all {
    font-size: .82rem;
    color: var(--brand, #1e56f5);
    text-decoration: none;
    float: right;
    margin-top: 2px;
}

.pt-see-all:hover {
    text-decoration: underline;
}

/* ---- Media grid (VODs / Clips) ---- */
.pt-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.pt-media-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}

.pt-media-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.pt-media-thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bg-elev-2);
    overflow: hidden;
}

.pt-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pt-dur {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: .7rem;
    padding: 2px 6px;
    border-radius: 3px;
}

.pt-media-info {
    padding: 10px 12px;
}

.pt-media-info h4,
.pt-media-title {
    margin: 0 0 4px;
    font-size: .87rem;
    color: var(--text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pt-media-info span,
.pt-media-meta {
    font-size: .78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ---- Embedded chat ---- */
.pt-embedded-chat-wrap {
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}

.pt-embedded-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}

.pt-embedded-msgs {
    height: 360px;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

.pt-chat-msg {
    font-size: .85rem;
    line-height: 1.5;
    word-break: break-word;
}

.pt-chat-msg .pt-cm-user {
    font-weight: 700;
    color: var(--brand, #1e56f5);
    margin-right: 4px;
}

.pt-embedded-form {
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 8px;
}

.pt-embedded-form input {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
}

.pt-embedded-form input:focus {
    border-color: var(--brand, #1e56f5);
}

/* ---- Load more / spinners ---- */
.pt-load-more {
    text-align: center;
    margin-top: 24px;
}

.pt-empty-msg {
    color: var(--text-muted);
    font-size: .9rem;
    text-align: center;
    padding: 40px 0;
}

.pt-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: .9rem;
    gap: 10px;
}

/* =============================================
   Dashboard: live/offline status indicators
   ============================================= */
.dash-live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0, 197, 110, .08);
    border: 1px solid rgba(0, 197, 110, .25);
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: .9rem;
    color: var(--text);
    flex-wrap: wrap;
}

.dash-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00c56e;
    flex-shrink: 0;
}

.dash-live-dot.pulse {
    animation: dot-pulse 1.4s ease infinite;
}

@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 197, 110, .6); }
    50%       { box-shadow: 0 0 0 6px rgba(0, 197, 110, 0); }
}

.dash-offline-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: .85rem;
    color: var(--text-muted);
}

.dash-offline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

/* =============================================
   Navbar logo image
   ============================================= */
.navbar-logo-img {
    height: 28px;
    width: 28px;
    object-fit: contain;
    border-radius: 6px;
    position: relative;
    top: -5px;
}

/* Auth page logo image */
.auth-logo-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 14px;
    margin-bottom: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================
   Profile page: chat badges & offline banner
   ============================================= */
.pt-chat-offline-banner {
    padding: 10px 14px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--line);
    font-size: .82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.pt-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .87rem;
    line-height: 1.5;
    word-break: break-word;
}

.pt-chat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: .6rem;
    margin-right: 3px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.pt-badge-streamer {
    background: #1e56f5;
    color: #fff;
}

.pt-badge-mod {
    background: #00c56e;
    color: #fff;
}

.pt-badge-vip {
    background: #2563eb;
    color: #fff;
}


/* ============================================================
   PROFILE PAGE — tl-*  (redesigned)
   ============================================================ */

/* ── Outer wrapper ─────────────────────────────────────────── */
.tl-page-wrapper {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 74px);
    background: var(--bg);
}

/* ── Left sidebar (collapsible drawer) ─────────────────────── */
.tl-left-sidebar {
    --tl-sidebar-w-collapsed: 58px;
    --tl-sidebar-w-expanded: 228px;
    width: var(--tl-sidebar-w-collapsed);
    flex-shrink: 0;
    background: var(--bg-elev-1);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 74px);
    position: sticky;
    top: 74px;
    align-self: flex-start;
    transition: width 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: width;
}
.tl-left-sidebar--drawer.is-expanded {
    width: var(--tl-sidebar-w-expanded);
}
.tl-left-sidebar--drawer.is-collapsed {
    width: var(--tl-sidebar-w-collapsed);
}
.tl-left-sidebar--drawer:not(.tl-left-sidebar--has-content) {
    display: none;
}

.tl-sidebar-toggle-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tl-sidebar-toggle-btn:hover,
.tl-sidebar-toggle-btn:active,
.tl-left-sidebar.is-expanded .tl-sidebar-toggle-btn {
    background: rgba(24, 26, 34, 0.52);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-sidebar-toggle-btn:hover,
    .tl-sidebar-toggle-btn:active,
    .tl-left-sidebar.is-expanded .tl-sidebar-toggle-btn {
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}
.tl-sidebar-toggle-btn i {
    font-size: 0.82rem;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.tl-sidebar-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0 6px 12px;
}

.tl-sidebar-hd {
    width: 100%;
    padding: 12px 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
    font-size: .95rem;
    text-align: center;
}
.tl-sidebar-hd-label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.28s ease 0.08s, max-width 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.tl-left-sidebar.is-expanded .tl-sidebar-hd-label {
    opacity: 1;
    max-width: 120px;
}
.tl-sidebar-hd i {
    flex-shrink: 0;
    font-size: 0.88rem;
}
.tl-sidebar-sep {
    width: 100%;
    height: 1px;
    background: var(--line);
    margin: 8px 0 0;
}

.tl-sidebar-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    width: 100%;
    min-width: 0;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s ease;
    box-sizing: border-box;
}
.tl-sidebar-item:hover {
    background: var(--bg-elev-2);
}
.tl-sidebar-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, filter 0.25s ease, opacity 0.25s ease;
}
.tl-sidebar-item:hover img {
    border-color: var(--brand);
}
.tl-sidebar-av-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.tl-sidebar-live-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid var(--brand, #1e56f5);
    box-shadow: none;
    pointer-events: none;
}
.tl-sidebar-item-live:hover .tl-sidebar-live-ring {
    border-color: var(--brand-soft, #6b9fff);
}

/* Offline followed channels — gray avatar */
.tl-sidebar-item--offline .tl-sidebar-av-wrap img {
    filter: grayscale(1);
    opacity: 0.5;
}
.tl-sidebar-item--offline:hover .tl-sidebar-av-wrap img {
    border-color: transparent;
    opacity: 0.62;
}
.tl-sidebar-item--offline .tl-sidebar-uname,
.tl-sidebar-item--offline .tl-sidebar-sub {
    color: var(--text-muted);
    opacity: 0.72;
}

.tl-sidebar-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.28s ease 0.06s, transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
.tl-left-sidebar.is-expanded .tl-sidebar-meta {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.tl-sidebar-uname-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.tl-sidebar-uname {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
    flex: 0 1 auto;
    min-width: 0;
}
.tl-sidebar-sub {
    font-size: .68rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
    margin-top: 2px;
}
.tl-sidebar-ach-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tl-sidebar-ach-badges--inline {
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.tl-sidebar-ach-badge {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    flex-shrink: 0;
}
.tl-sidebar-ach-badge--img img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    display: block;
}

.tl-left-sidebar.is-collapsed .tl-sidebar-item {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
}
.tl-left-sidebar.is-collapsed .tl-sidebar-meta {
    width: 0;
    flex: 0;
    overflow: hidden;
}
.tl-left-sidebar.is-collapsed .tl-sidebar-inner {
    padding-inline: 0;
}
.tl-left-sidebar.is-collapsed .tl-sidebar-hd {
    padding-inline: 0;
    justify-content: center;
}

.tl-sidebar-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: .65rem;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}
.tl-sidebar-more-btn:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tl-left-sidebar,
    .tl-sidebar-meta,
    .tl-sidebar-hd-label,
    .tl-sidebar-toggle-btn i {
        transition: none !important;
    }
    .tl-sidebar-meta {
        transform: none;
    }
}

.tl-sidebar-empty {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 1.1rem;
    opacity: .5;
}

/* ── Main content ──────────────────────────────────────────── */
.tl-main-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Live hero ─────────────────────────────────────────────── */
.tl-live-hero { position: relative; background: #000; width: 100%; }
.tl-live-video-link {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.tl-live-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-live-video-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.tl-live-video-link:hover .tl-live-video-overlay { background: rgba(0,0,0,.5); }
.tl-play-btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(30,86,245,.9);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem;
    box-shadow: 0 4px 20px rgba(30,86,245,.5);
    transition: transform .15s;
}
.tl-live-video-link:hover .tl-play-btn { transform: scale(1.07); }
.tl-live-meta-row {
    position: absolute; bottom: 12px; left: 14px;
    display: flex; align-items: center; gap: 8px;
}
.tl-live-tag {
    background: #e91916; color: #fff;
    font-size: .62rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
}
.tl-viewers-tag {
    background: rgba(0,0,0,.7); color: #fff;
    font-size: .75rem; padding: 4px 10px; border-radius: 10px;
}
.tl-live-title-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 28px 14px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    font-size: .9rem; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Offline hero — clean full-width banner ────────────────── */
.tl-offline-hero {
    position: relative;
    height: 300px;
    background: linear-gradient(135deg, #1a0a2e 0%, #0e0e10 60%, #0e2020 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.tl-hero-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.45) 60%,
        rgba(0,0,0,.82) 100%
    );
}
.tl-hero-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 32px 28px;
    z-index: 1;
}
.tl-offline-tag {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.25);
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px; border-radius: 3px;
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
}
.tl-hero-name {
    font-size: 1.75rem; font-weight: 800;
    color: #fff; margin: 0 0 6px; line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.tl-hero-bio {
    font-size: .88rem; color: rgba(255,255,255,.72);
    line-height: 1.5; margin: 0 0 12px;
    max-width: 520px;
}
.tl-notif-btn {
    background: none; border: 1px solid rgba(255,255,255,.3);
    color: rgba(255,255,255,.88);
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 6px;
    transition: background .2s, border-color .2s;
}
.tl-notif-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }
.tl-notif-btn.tl-notif-on { color: #4ade80; border-color: #4ade80; }

/* ── Channel bar ───────────────────────────────────────────── */
.tl-channel-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.tl-bar-avatar {
    width: 46px; height: 46px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--line);
}
.tl-bar-info { flex: 1; min-width: 0; }
.tl-bar-name {
    font-size: .97rem; font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 6px;
}
.tl-bar-sub {
    font-size: .81rem; color: var(--text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-cat-link { color: var(--brand); text-decoration: none; }
.tl-cat-link:hover { text-decoration: underline; }
.tl-verified { color: var(--brand); font-size: .92rem; }
.tl-bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-btn-donate {
    background: linear-gradient(135deg, #ff6a35, #ff3f6c);
    color: #fff;
    border: none;
}
.tl-btn-subscribe {
    background: linear-gradient(135deg, #9147ff, #6441a5);
    color: #fff;
    border: none;
    font-weight: 600;
    gap: 6px;
    transition: filter .15s, transform .1s;
}
.tl-btn-subscribe:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tl-btn-subbed {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    font-weight: 600;
    gap: 6px;
}
.tl-btn-giftsub {
    border-color: #a78bfa;
    color: #a78bfa;
    font-weight: 600;
    gap: 6px;
}
.tl-btn-giftsub:hover { background: rgba(167,139,250,.12); }

/* ── Tabs ──────────────────────────────────────────────────── */
.tl-tabs-row {
    display: flex;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev-1);
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tl-tabs-row::-webkit-scrollbar { display: none; }
.tl-tab {
    padding: 13px 18px;
    font-size: .87rem; font-weight: 600;
    color: var(--text-muted);
    background: none; border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.tl-tab:hover { color: var(--text); }
.tl-tab.active { color: var(--text); border-bottom-color: var(--brand); }
.tl-tab-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Tab panels ────────────────────────────────────────────── */
.tl-tabs-body { flex: 1; padding: 24px 20px; }
.tl-panel { display: none; }
.tl-panel.active { display: block; }

/* ── About tab ─────────────────────────────────────────────── */
.tl-about-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px; align-items: start;
}
@media (max-width: 1000px) { .tl-about-wrap { grid-template-columns: 1fr; } }
.tl-about-left { min-width: 0; }
.tl-about-right { min-width: 0; }
.tl-bio-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 8px; padding: 20px;
}
.tl-bio-card h4 {
    margin: 0 0 10px; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.tl-bio-text {
    font-size: .9rem; color: var(--text); line-height: 1.65;
    white-space: pre-wrap; word-break: break-word; margin: 0 0 16px;
}
.tl-stats-row {
    display: flex; gap: 20px; flex-wrap: wrap;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.tl-stat { text-align: center; }
.tl-stat strong { display: block; font-size: 1rem; color: var(--text); font-weight: 700; }
.tl-stat span { font-size: .73rem; color: var(--text-muted); }
.tl-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.tl-section-head h4 {
    margin: 0; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.tl-see-all { font-size: .82rem; color: var(--brand); text-decoration: none; }
.tl-see-all:hover { text-decoration: underline; }
.tl-mini-grid { grid-template-columns: repeat(2, 1fr) !important; }

/* ── Right chat sidebar (live only, sticky) ────────────────── */
.tl-right-chat {
    width: 320px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--bg-elev-1);
    max-height: calc(100vh - 74px);
    position: sticky; top: 74px;
    align-self: flex-start;
    transition: width .22s;
    overflow: hidden;
}
.tl-right-chat.collapsed { width: 46px; }
.tl-right-chat.collapsed .tl-chat-msgs,
.tl-right-chat.collapsed .tl-chat-input-row,
.tl-right-chat.collapsed .tl-chat-login-prompt { display: none !important; }
.tl-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 14px; border-bottom: 1px solid var(--line);
    font-weight: 700; font-size: .88rem; color: var(--text);
    flex-shrink: 0; min-height: 48px;
}
.tl-chat-head-title { display: flex; align-items: center; gap: 8px; }
.tl-chat-collapse-btn {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 4px 6px; border-radius: 4px;
    transition: color .15s, background .15s; flex-shrink: 0;
    font-size: .84rem;
}
.tl-chat-collapse-btn:hover { color: var(--text); background: var(--bg-elev-3); }

/* ── Shared chat styles ────────────────────────────────────── */
.tl-chat-msgs {
    flex: 1; overflow-y: auto;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px;
    scroll-behavior: smooth;
}
.tl-chat-input-row {
    flex-shrink: 0; border-top: 1px solid var(--line); padding: 10px 12px;
}
.tl-chat-input-row form { display: flex; gap: 6px; }
.tl-chat-input-row input {
    flex: 1; padding: 8px 10px;
    background: var(--bg-elev-2); border: 1px solid var(--line);
    border-radius: 6px; color: var(--text); font-size: .85rem; outline: none;
}
.tl-chat-input-row input:focus { border-color: var(--brand); }
.tl-chat-input-row button {
    background: var(--brand); color: #fff; border: none;
    padding: 8px 13px; border-radius: 6px; cursor: pointer;
    font-size: .85rem; transition: opacity .15s;
}
.tl-chat-input-row button:hover { opacity: .85; }
.tl-chat-login-prompt {
    padding: 14px; text-align: center;
    border-top: 1px solid var(--line); flex-shrink: 0;
}
.tl-chat-msg {
    display: flex; align-items: flex-start; gap: 7px;
    font-size: .85rem; line-height: 1.5;
}
.tl-chat-msg-av {
    width: 20px; height: 20px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; margin-top: 2px;
}
.tl-chat-msg-body { flex: 1; min-width: 0; word-break: break-word; }
.tl-chat-msg-name { font-weight: 700; color: var(--brand); font-size: .82rem; margin-right: 3px; }
.tl-chat-msg-text { color: var(--text); font-size: .85rem; }

/* ── Chat Drawer (slides from right, works everywhere) ─────── */
.tl-chat-drawer {
    position: fixed;
    top: 74px; right: 0; bottom: 0;
    width: 360px;
    background: var(--bg-elev-1);
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22,.68,0,1.2);
    z-index: 400;
    box-shadow: -6px 0 32px rgba(0,0,0,.35);
}
.tl-chat-drawer.open { transform: translateX(0); }
.tl-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 399;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}
.tl-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.tl-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
    flex-shrink: 0; min-height: 52px;
}
.tl-drawer-title {
    font-weight: 700; font-size: .92rem; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.tl-live-dot-sm {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e91916; flex-shrink: 0;
    animation: dot-pulse 1.4s ease infinite;
}
.tl-drawer-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 5px 7px; border-radius: 5px;
    font-size: .9rem; transition: color .15s, background .15s;
}
.tl-drawer-close:hover { color: var(--text); background: var(--bg-elev-3); }
.tl-drawer-offline-note {
    padding: 9px 14px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--line);
    font-size: .8rem; color: var(--text-muted);
    flex-shrink: 0;
}
.tl-chat-drawer .tl-chat-msgs { border-radius: 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .tl-right-chat { width: 280px; }
}
@media (max-width: 860px) {
    .tl-left-sidebar { display: none; }
    .tl-right-chat { width: 260px; }
}
@media (max-width: 640px) {
    .tl-right-chat { display: none; }
    .tl-chat-drawer { width: 100%; top: 74px; }
    .tl-offline-hero { height: 200px; }
    .tl-hero-content { padding: 0 14px 18px; }
    .tl-hero-name { font-size: 1.15rem; }
    .tl-tabs-body { padding: 14px 10px; }

    /* ── tl-channel-bar mobile rebuild ── */
    .tl-channel-bar {
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    /* Avatar shrinks a bit */
    .tl-bar-avatar {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }
    /* Info fills the rest of row 1 */
    .tl-bar-info { flex: 1; min-width: 0; }
    .tl-bar-name {
        font-size: .9rem !important;
        flex-wrap: wrap;
    }
    .tl-bar-sub {
        font-size: .76rem !important;
        white-space: normal !important;
    }
    /* Actions: pushed to its own row */
    .tl-bar-actions {
        flex-basis: 100% !important;
        display: flex !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    .tl-bar-actions .btn {
        font-size: .8rem !important;
        padding: 7px 12px !important;
    }
    .tl-bar-actions .tl-notif-btn {
        font-size: .8rem !important;
        padding: 6px 10px !important;
    }
    /* Tabs: smaller on mobile */
    .tl-tab {
        padding: 10px 12px !important;
        font-size: .82rem !important;
    }
}

/* ── Toggle switch ── */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.toggle-switch input { display: none; }
.toggle-slider {
    position: relative;
    width: 42px;
    height: 24px;
    background: #3a3a46;
    border-radius: 999px;
    transition: background 0.25s;
    flex-shrink: 0;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--brand, #1e56f5);
}
.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(18px);
}
.toggle-label {
    color: var(--text);
    font-size: 0.9rem;
}

/* ============================================================
   Chat header actions
   ============================================================ */
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-header-actions-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
html[dir="rtl"] .chat-header-actions-grid {
    direction: rtl;
}

.chat-hdr-btn-warn {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
    background: rgba(127, 29, 29, 0.35) !important;
}
.chat-hdr-btn-warn:hover {
    color: #fecaca !important;
    background: rgba(185, 28, 28, 0.45) !important;
}

.chat-hdr-btn {
    border: 1px solid var(--line);
    background: var(--bg-elev-3);
    color: #c8c8d4;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.chat-hdr-btn:hover { background: #2e2e38; color: #fff; }

.chat-hdr-total-views {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 14px;
    font-size: .78rem;
    color: #9aa0b2;
    flex-wrap: wrap;
}
.chat-hdr-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.chat-hdr-stat .fa-heart { color: #e91916; font-size: .72rem; }
.chat-hdr-stat .fa-eye { font-size: .72rem; }

/* ============================================================
   Popout chat overlay mode
   ============================================================ */
#chatPanel.tl-popout {
    position: fixed !important;
    top: 74px;
    right: 16px;
    bottom: auto !important;
    left: auto !important;
    width: 340px;
    height: calc(100vh - 90px);
    z-index: 900;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.75);
    border: 1px solid var(--line);
    display: flex !important;
    flex-direction: column;
    resize: both;
    overflow: hidden;
    min-width: 280px;
    min-height: 320px;
    background: var(--bg-elev-1);
}
#chatPanel.tl-popout .chat-panel-toggle-hint {
    display: none !important;
}
#chatPanel.tl-popout .chat-header,
#chatPanel.tl-popout .chat-messages,
#chatPanel.tl-popout .chat-input-area,
#chatPanel.tl-popout .chat-login-prompt {
    display: flex !important;
}
#chatPanel.tl-popout .chat-messages {
    display: grid !important;
    flex: 1;
}

/* ============================================================
   Chat users panel
   ============================================================ */
.chat-users-panel {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-elev-2, #16161c);
    flex-direction: column;
    z-index: 10;
    border-top: 1px solid #2f2f39;
    overflow: hidden;
}

.chat-users-panel.is-open {
    display: flex;
}

.cup-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 600;
    color: var(--text);
}
.cup-panel-header button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .85rem;
    padding: 3px;
}
.cup-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background .15s;
}
.cup-back-btn:hover { background: rgba(255,255,255,.08); }

.cup-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cup-panel-loading {
    text-align: center;
    padding: 18px;
    color: var(--text-muted);
    font-size: .9rem;
}

.cup-panel-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 7px;
    transition: background .15s;
}
.cup-panel-user:hover { background: #1f1f28; }

.cup-panel-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.cup-panel-name {
    flex: 1;
    font-size: .82rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Stream info edit button
   ============================================================ */
.btn-edit-stream {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 3px 7px;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-left: 6px;
    vertical-align: middle;
}
.btn-edit-stream:hover { background: rgba(255,255,255,.14); color: #fff; }

.stream-category-wrap { display: inline; }

/* ============================================================
   Analytics rebuild
   ============================================================ */
.analytics-live-banner {
    background: linear-gradient(135deg, #1a1a25 0%, #1e1428 100%);
    border: 1px solid #3b244a;
    margin-bottom: 16px;
}
.analytics-live-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.analytics-live-dot {
    background: #e91916;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: .04em;
}
.analytics-live-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-live-duration {
    font-size: .82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.analytics-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.analytics-stat-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,.25);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #2a2a35;
}
.analytics-stat-viewers .asb-icon { color: #22c55e; }
.analytics-stat-peak    .asb-icon { color: #f59e0b; }
.analytics-stat-totalv  .asb-icon { color: #3b82f6; }
.asb-icon { font-size: 1.2rem; flex-shrink: 0; }
.asb-body { display: flex; flex-direction: column; min-width: 0; }
.asb-value { font-size: 1.45rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.asb-label { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

.analytics-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.analytics-main-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 14px;
    align-items: start;
    margin-top: 14px;
}
.analytics-main-left,
.analytics-main-right {
    min-width: 0;
}
.analytics-main-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.analytics-block-card {
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
#tab-analytics .dash-card {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
#tab-analytics .analytics-live-banner {
    border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
#tab-analytics .analytics-ov-card {
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#tab-analytics .analytics-ov-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ov-clr, #3b82f6) 55%, var(--line));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ov-clr, #3b82f6) 12%, transparent);
}
#tab-analytics .dash-table.past-streams-table tbody tr {
    transition: background .15s ease;
}
#tab-analytics .dash-table.past-streams-table tbody tr:hover {
    background: rgba(255,255,255,.03);
}
#bestDayLabel,
#bestHourLabel {
    font-size: .78rem !important;
    letter-spacing: .01em;
}
.analytics-ov-card {
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.analytics-ov-card > i {
    font-size: 1.3rem;
    color: var(--ov-clr, var(--brand));
    opacity: .85;
}
.aov-val { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.aov-lbl { font-size: .72rem; color: var(--text-muted); }

.past-streams-table th:not(:first-child),
.past-streams-table td:not(:first-child) { text-align: center; }

@media (max-width: 760px) {
    .analytics-stat-row { grid-template-columns: 1fr 1fr; }
    .analytics-stat-totalv { display: none; }
    .analytics-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-main-split { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .analytics-stat-row { grid-template-columns: 1fr; }
    .analytics-stat-totalv { display: flex; }
}

/* Chat dashboard — compact tools layout (streamer dashboard) */
.tl-chat-admin-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.tl-chat-admin-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tl-chat-admin-tab .tl-chat-admin-card {
    border: 1px solid color-mix(in srgb, var(--line) 85%, #334155 15%);
    background: var(--bg-elev-1);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: 12px 14px !important;
}
.tl-chat-admin-tab .tl-chat-admin-card h2 {
    font-size: 0.92rem !important;
    margin-bottom: 6px !important;
}
.tl-chat-admin-tab .dash-card-desc {
    font-size: 0.76rem !important;
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
}
.tl-chat-admin-tab .tl-chat-admin-card #botMessagesList,
.tl-chat-admin-tab .tl-chat-admin-card #chatRulesList,
.tl-chat-admin-tab .tl-chat-admin-card #modList,
.tl-chat-admin-tab .tl-chat-admin-card #vipList {
    max-height: 200px;
    overflow-y: auto;
}
.tl-chat-admin-tab .tl-chat-admin-raids-polls {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tl-mod-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-elev-3);
}
.tl-mod-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tl-mod-row-av {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--line);
}
.tl-mod-row-name { flex: 1; font-size: .86rem; color: var(--text); }
.tl-mod-row-user { color: var(--text-muted); font-size: .75rem; }
.tl-mod-remove-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}
.tl-mod-remove-btn:hover { background: rgba(244,63,94,.18); color: #fda4af; }
.tl-mod-perm-wrap { display: flex; flex-direction: column; gap: 8px; padding-left: 38px; }
.tl-mod-perm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-elev-2);
    color: var(--text-muted);
    padding: 5px 12px;
    font-size: .76rem;
    cursor: pointer;
}
.tl-mod-perm-toggle .fa-chevron-down { transition: transform .2s ease; }
.tl-mod-perm-panel {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-elev-2);
}
.tl-mod-perm-wrap.is-open .tl-mod-perm-panel { display: grid; }
.tl-mod-perm-wrap.is-open .tl-mod-perm-toggle .fa-chevron-down { transform: rotate(180deg); }
.tl-mod-perm-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
@media (max-width: 1100px) {
    .tl-chat-admin-split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .tl-mod-perm-panel { grid-template-columns: 1fr; }
}

/* ============================================================
   Global Custom Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #5a5a6e; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #3a3a4a transparent; }

/* ============================================================
   Nav live badge (Browse link)
   ============================================================ */
.nav-live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e91916;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    margin-inline-start: 4px;
    min-width: 18px;
    vertical-align: middle;
    letter-spacing: .01em;
}

/* ============================================================
   Stream notification bell button (/live)
   ============================================================ */
.stream-notif-btn {
    padding: 10px 14px;
    min-width: 42px;
}
.stream-notif-btn.active {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(30,86,245,.12);
}

/* ============================================================
   Chat users panel — group headers
   ============================================================ */
.cup-group-hd {
    display: flex;
    align-items: center;
    padding: 8px 8px 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--line);
    margin-top: 4px;
}
.cup-group-hd:first-child { border-top: none; margin-top: 0; }
.cup-group-count {
    margin-inline-start: 5px;
    background: var(--bg-elev-2);
    color: var(--text-muted);
    border-radius: 20px;
    font-size: .65rem;
    padding: 0 5px;
    line-height: 1.5;
}

.cup-watch-stats {
    margin: 0 2px 10px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}
.cup-stat-row + .cup-stat-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.cup-watch-stats .cup-group-hd {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: .78rem;
    color: var(--text);
}
.cup-stat-hint {
    margin: 4px 8px 0;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ============================================================
   Hero Section — Real Thumbnails
   ============================================================ */
.hero-thumb-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 410px;
    border-radius: var(--radius);
    overflow: hidden;
}
.hero-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.hero-thumb-link:hover .hero-thumb-img {
    transform: scale(1.02);
}
.hero-thumb-link .player-overlay {
    border-radius: var(--radius);
}
.hero-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    margin: auto;
    background: rgba(30, 86, 245, 0.95);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(30, 86, 245, 0.45);
    transition: transform .2s;
    pointer-events: none;
}
.hero-thumb-link:hover .hero-play-btn {
    transform: scale(1.08);
}

/* Hero sidebar thumbnails */
.sidebar-item-thumb {
    position: relative;
    min-height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: #2a2a33;
}
.sidebar-item-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* ============================================================
   Horizontal-Scroll Categories Row
   ============================================================ */
.section-categories-scroll {
    padding-bottom: 4px;
}
.categories-scroll-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 6px 0 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(107, 159, 255, 0.45) transparent;
}
.categories-scroll-row::-webkit-scrollbar {
    height: 5px;
}
.categories-scroll-row::-webkit-scrollbar-thumb {
    background: rgba(107, 159, 255, 0.35);
    border-radius: 999px;
}
.categories-scroll-row.is-wheel-scroll {
    cursor: grab;
}
.categories-scroll-row.is-wheel-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.category-card-scroll {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 76px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: rgba(30, 30, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .category-card-scroll {
        background: rgba(30, 30, 38, 0.42);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
}
.category-card-scroll:hover {
    border-color: rgba(107, 159, 255, 0.55);
    box-shadow: 0 4px 14px rgba(30, 86, 245, 0.14);
}
.category-card-scroll .category-box-art-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(14, 16, 24, 0.95), rgba(22, 26, 38, 0.82));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.category-card-scroll .category-box-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.category-card-scroll .category-box-art-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(30,86,245,.18), rgba(30,86,245,.05));
    font-size: 1.15rem;
    color: var(--brand-soft, #6b9fff);
}
.category-card-scroll .category-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    font-size: 0.82rem;
    border-radius: 8px;
    background: rgba(30,86,245,.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card-scroll .category-info {
    padding: 4px 5px 6px;
}
.category-card-scroll .category-info h3 {
    font-size: 0.64rem;
    font-weight: 700;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-card-scroll .category-info span:not(.cat-live-info) {
    font-size: 0.58rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.category-card-scroll .category-info .cat-live-info {
    display: flex;
    font-size: 0.58rem;
}

/* ============================================================
   Mobile Improvements — stream, nav, cards
   ============================================================ */
@media (max-width: 768px) {
    /* Hero: stack and show thumbnail full-width */
    .hero-stream {
        grid-template-columns: 1fr !important;
    }
    .hero-thumb-link,
    .hero-player {
        min-height: 240px;
    }
    .hero-sidebar {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        max-height: none;
        gap: 10px;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .hero-sidebar::-webkit-scrollbar { display: none; }
    .hero-sidebar-item {
        flex: 0 0 220px;
        scroll-snap-align: start;
    }

    /* ==============================================================
       STREAM PAGE — Mobile app layout (Chat / Info tabs)
       ============================================================== */

    /* ── 1. Body: flex column, exact viewport height, no scroll. iOS Safari fallback chain. ── */
    body.page-stream {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }
    body.page-stream .mob-bottom-nav { display: none !important; }
    body.page-stream .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 300 !important;
        flex-shrink: 0 !important;
    }
    body.page-stream .navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
        box-sizing: border-box !important;
    }
    body.page-stream .navbar .navbar-container {
        min-height: 52px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        box-sizing: border-box !important;
    }
    body.page-stream .main-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .main-content {
        overflow: hidden !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .stream-left-col {
        padding-bottom: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .stream-left-col {
        padding-bottom: 0 !important;
    }
    body.page-stream .tl-page-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body.page-stream .stream-page {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        grid-template-columns: unset !important;
    }
    /* Info tab: allow stream-page to scroll (content may exceed screen) */
    .stream-page[data-mob-tab="info"] {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* ── Left column wrapper: full-width block on mobile ── */
    .stream-left-col {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
    }

    /* ── 2. Stream-main: video ── */
    .stream-main {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    /* ── 3. Video: full-bleed, no radius ── */
    .stream-player { width: 100% !important; border-radius: 0 !important; border: none !important; }
    .player-wrapper { border-radius: 0 !important; aspect-ratio: 16 / 9 !important; }

    /* ── 4. Stream info bar — hidden on mobile (replaced by mob-info-bar) ── */
    .stream-info-bar { display: none !important; }

    /* ── 5. Mobile tab bar — strip card styling, go full-bleed ── */
    .stream-page .mobile-tab-bar {
        border: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    .mobile-tab-bar {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0;
        background: var(--bg-elev-1, #1a1a1e);
    }
    /* Tab buttons row */
    .mob-tab-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-shrink: 0;
        border-bottom: 1px solid var(--line, #2f2f39);
    }
    .mob-tab {
        flex: 1;
        padding: 10px 14px;
        border-bottom: 3px solid transparent;
        margin-bottom: -1px;
        color: var(--text-muted, #8888aa);
        font-size: .84rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: color .18s, border-color .18s;
        cursor: pointer;
        background: none;
        border-top: none;
        border-left: none;
        border-right: none;
        text-decoration: none;
    }
    .mob-tab.active {
        color: var(--brand, #1e56f5);
        border-bottom-color: var(--brand, #1e56f5);
    }

    /* ── 6. Info panel wrap — hidden on chat tab, shown on info tab ── */
    .mob-info-panel-wrap {
        display: none !important;
    }
    .stream-page[data-mob-tab="info"] .mob-info-panel-wrap {
        display: flex !important;
        flex-direction: column !important;
    }
    /* On info tab: hide chat panel */
    .stream-page[data-mob-tab="info"] .chat-panel { display: none !important; }

    /* ── 7. mob-info-bar — channel row + uniform 3×2 action grid on /live ── */
    body.page-stream .stream-page .mob-info-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 10px 12px !important;
        gap: 8px 10px !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid var(--line, #2f2f39);
    }
    body.page-stream .stream-page .mob-info-bar-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: unset !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
        flex-shrink: 1 !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn,
    body.page-stream .stream-page .mob-info-bar-actions .viewer-count {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        flex-shrink: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border: 1px solid var(--line, #2f2f39) !important;
        background: var(--bg-elev-2, #26262c) !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.mob-info-btn-txt {
        flex-direction: column !important;
        padding: 6px 5px !important;
        gap: 4px !important;
        font-size: 0.76rem !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.mob-info-btn-txt .mob-info-btn-label {
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn:not(.mob-info-btn-txt) {
        padding: 6px 5px !important;
        font-size: 0.82rem !important;
        color: var(--text-muted, #8888aa) !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .viewer-count {
        gap: 4px !important;
        padding: 6px 5px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        color: var(--text-base, #efeff1) !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions #streamMoreWrap {
        display: flex !important;
        min-height: 44px !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions #streamMoreWrap .mob-info-btn {
        flex: 1 1 auto !important;
        width: 100% !important;
    }
    .mob-info-avatar {
        position: relative;
        flex-shrink: 0;
        display: block;
        width: 38px;
        height: 38px;
    }
    .mob-info-avatar img {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: block !important;
        object-fit: cover !important;
    }
    .mob-info-channel {
        min-width: 0;
        flex: 1 1 0;
        overflow: hidden;
    }
    .mob-info-name {
        font-size: .88rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-base, #efeff1);
    }
    .mob-info-title {
        font-size: .72rem;
        color: var(--text-muted, #8888aa);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 2px;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.active,
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn:active {
        background: var(--brand, #1e56f5) !important;
        color: #fff !important;
        border-color: var(--brand, #1e56f5) !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn-danger {
        border-color: rgba(244,63,94,.35) !important;
        color: #f43f5e !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn-danger:active {
        background: #f43f5e !important;
        color: #fff !important;
        border-color: #f43f5e !important;
    }

    /* ── 8. channel-about inside mob-info-panel-wrap ── */
    .channel-about.mob-info-panel {
        padding: 12px 12px 16px !important;
    }
    .mip-bio {
        font-size: .85rem;
        color: var(--text-muted, #8888aa);
        line-height: 1.5;
        margin: 0 0 10px;
    }
    .mip-stats {
        display: flex;
        gap: 16px;
        font-size: .82rem;
        color: var(--text-muted, #8888aa);
        flex-wrap: wrap;
    }
    .mip-stats span { display: flex; align-items: center; gap: 5px; }
    .mip-stats i { color: var(--brand, #1e56f5); }

    /* Keep users panel scoped inside chat panel on mobile */
    .chat-panel { position: relative !important; top: 0 !important; }

    /* چت موبایل: bottom sheet — جزئیات در بلوک tl-mob-chat-drawer پایین فایل */
    body.page-stream.tl-mob-chat-drawer-open .chat-panel {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
    }
    /* Tab switch fade-slide animation — fires when element becomes visible */
    .stream-page:not([data-mob-tab="info"]) .chat-panel,
    .stream-page[data-mob-tab="info"] .stream-info-bar,
    .stream-page[data-mob-tab="info"] .channel-about {
        animation: tab-fadein .22s ease;
    }
    @keyframes tab-fadein {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Full-width chat form on mobile */
    #chatForm { width: 100%; }
    /* Bottom-sheet chat toggle: visibility controlled in body.page-stream mobile drawer block */
    .chat-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--line, #2f2f39);
        padding: 10px 14px;
        min-height: 46px;
    }
    .chat-header-top {
        gap: 8px;
    }
    .chat-header-actions-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .chat-header-actions-grid::-webkit-scrollbar { display: none; }
    .chat-hdr-total-views {
        justify-content: center;
        gap: 12px;
    }
    .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px 10px !important;
        min-height: 0;
    }
    .chat-input-area {
        display: block !important;
        flex-shrink: 0;
        position: relative !important;
        overflow: visible !important;
        z-index: 5;
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line, #2f2f39);
        background: var(--bg-elev-1, #1a1a1e);
    }
    .chat-login-prompt {
        display: block !important;
        flex-shrink: 0;
        padding: 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    #pinnedMsgBar, #followOnlyBar { flex-shrink: 0; }
    #chatToggle { display: none !important; }

    /* ── General page fixes on mobile ── */

    /* Bottom nav: reserve space (floating capsule + gap + home indicator) */
    body:not(.page-stream) .main-content {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Container tighter on mobile */
    .container {
        padding-inline: 14px;
    }

    /* Stream cards: 2 columns */
    .streams-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .stream-card-thumb { border-radius: 10px; }

    /* Section headers */
    .section-header h2 { font-size: 1rem; }
    .section { padding-top: 16px; padding-bottom: 12px; }

    /* Navbar: keep brand + search + bell only (hide links, lang switcher, user text) */
    .navbar-links { display: none; }
    .lang-switcher { display: none; }
    .user-menu-btn span,
    .user-menu-btn .fa-chevron-down { display: none !important; }
    .user-menu-btn { padding: 4px; background: transparent; border: none; }
    .avatar-sm { width: 32px; height: 32px; }
    .theme-switcher span,
    .theme-switcher > span { display: none; }

    /* Navbar: fixed at top on mobile */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 300 !important;
    }
    /* Push content below fixed navbar + notch (main-content handles inset; no body padding) */
    body { padding-top: 0 !important; }
    body.page-stream { padding-top: 0 !important; }
    .navbar {
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    .navbar-container {
        min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
        padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 4px !important;
        box-sizing: border-box !important;
    }
    body .main-content {
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }

    /* ── Floating glass capsule header (non-stream pages) —
       same style as .mob-bottom-nav ── */
    body:not(.page-stream) .navbar {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        padding-top: 0 !important;
        border-radius: 26px;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top-color: rgba(255, 255, 255, 0.16) !important;
        isolation: isolate;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    body:not(.page-stream) .navbar::before {
        border-radius: inherit;
    }
    /* Logo far left, buttons far right */
    body:not(.page-stream) .navbar-container {
        min-height: 52px !important;
        width: 100% !important;
        padding: 4px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between !important;
        gap: 12px;
        transition: min-height .35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* RTL: brand sits in .navbar-right (DOM-first = visually right) —
       reorder so the logo lands far LEFT and buttons far RIGHT */
    html[dir="rtl"] body:not(.page-stream) .navbar-container > .navbar-right { order: 2; }
    html[dir="rtl"] body:not(.page-stream) .navbar-container > .navbar-left { order: 1; }
    /* Expanded search drops to its own row below the buttons */
    body:not(.page-stream) .navbar.mob-search-open .navbar-center {
        order: 10;
    }
    /* Compact on scroll: slimmer capsule, Tele balance hides */
    body:not(.page-stream) .navbar.is-compact .navbar-container {
        min-height: 42px !important;
    }
    .tele-pill-amount {
        max-width: 60px;
        overflow: hidden;
        transition: max-width .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .25s ease;
    }
    .navbar.is-compact .tele-pill-amount {
        max-width: 0;
        min-width: 0;
        opacity: 0;
    }
    /* Content clears the floating capsule (8px gap + 52px bar + breathing) */
    body:not(.page-stream) .main-content {
        padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
    }
}
/* Narrow phones: logo only, so the capsule row never wraps (all pages incl. /live) */
@media (max-width: 480px) {
    .navbar-brand span {
        display: none;
    }
    .navbar-container {
        gap: 8px;
    }
}
@media (max-width: 768px) {
    /* Category scroll row smaller */
    .category-card-scroll {
        width: 76px;
        min-width: 0;
        padding: 0;
    }

    /* Profile actions wrap */
    .tl-bar-actions { flex-wrap: wrap; gap: 6px; }

    /* Dashboard single column */
    .dashboard-grid { grid-template-columns: 1fr !important; }

    /* Browse header compact */
    .browse-header { padding: 12px 0 8px; }
    .browse-header h1 { font-size: 1.15rem; }

    /* Browse: category scroll + stream grid */
    .browse-all-live-section .browse-all-live-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .browse-all-live-heading {
        font-size: 1rem;
    }

    /* Stream info bar on non-stream pages */
    body:not(.page-stream) .stream-info-bar { flex-wrap: wrap; gap: 8px; }
    body:not(.page-stream) .stream-info-right { width: 100%; }

    /* Footer grid: hide on mobile or single col */
    .footer-grid { grid-template-columns: 1fr !important; }

    /* Notifications: full-screen centered modal on mobile */
    .notification-bell {
        position: relative !important;
    }
    .notification-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 70dvh !important;
        border-radius: 16px !important;
        transform: translate(-50%, -50%) scale(0.94) !important;
        transform-origin: center center !important;
        z-index: 45002 !important;
        overflow-y: auto !important;
        transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
    }
    .notification-dropdown.active {
        transform: translate(-50%, -50%) scale(1) !important;
        animation: tlSheetModalIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    /* Dim backdrop when notif is open — html layer so it covers stream + chat */
    html.notif-open::before {
        content: none !important;
        display: none !important;
        pointer-events: none !important;
    }
    .notification-dropdown.active {
        z-index: 45002 !important;
    }
}

/* Small tablets: same centered notification panel as phones */
@media (min-width: 769px) and (max-width: 1024px) {
    .notification-bell .notification-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 70dvh !important;
        border-radius: 16px !important;
        transform: translate(-50%, -50%) scale(0.94) !important;
        transform-origin: center center !important;
        z-index: 45002 !important;
        overflow-y: auto !important;
        transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease;
    }
    .notification-bell .notification-dropdown.active {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    html.notif-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 45000;
        pointer-events: auto;
        animation: tlSheetOverlayIn 0.22s ease both;
    }
}

@media (max-width: 480px) {
    /* Single column on very small phones */
    .streams-grid { grid-template-columns: 1fr !important; }
    .hero-sidebar-item { flex: 0 0 180px; }
    .hero-thumb-link, .hero-player { min-height: 200px; }
    .container { padding-inline: 12px; }
    .player-controls { gap: 6px; }
    .categories-grid,
    .categories-grid-lg { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ============================================================
   Mobile Bottom Navigation Bar
   ============================================================ */
.mob-bottom-nav { display: none; }  /* hidden on desktop */
/* Info-trigger button: hidden on desktop */
.si-mob-info-btn { display: none; }

@media (max-width: 768px) {
    /* iOS liquid-glass floating capsule (blur lives on ::before) */
    .mob-bottom-nav {
        display: flex;
        position: fixed;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        z-index: 200;
        background: rgba(22, 22, 26, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.16);
        border-radius: 30px;
        min-height: 60px;
        padding: 5px 6px;
        box-sizing: border-box;
        overflow: hidden;
        isolation: isolate;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition: min-height .35s cubic-bezier(0.4, 0, 0.2, 1),
                    padding .35s cubic-bezier(0.4, 0, 0.2, 1),
                    left .35s cubic-bezier(0.4, 0, 0.2, 1),
                    right .35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mob-bottom-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }
    /* Liquid specular sheen across the top of the capsule */
    .mob-bottom-nav::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.09) 0%,
            rgba(255, 255, 255, 0.02) 40%,
            transparent 60%);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .mob-bottom-nav {
            background: rgba(24, 24, 27, 0.97);
        }
    }
    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 7px 4px 6px;
        color: var(--text-muted, #a6a6b2);
        font-size: .68rem;
        font-weight: 600;
        gap: 3px;
        text-decoration: none;
        transition: color .18s, background .18s,
                    min-height .35s cubic-bezier(0.4, 0, 0.2, 1),
                    padding .35s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 48px;
        border-radius: 24px;
    }
    .mob-nav-item span {
        display: block;
        max-height: 16px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity .25s ease,
                    transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
    }
    .mob-nav-item i {
        font-size: 1.15rem;
        line-height: 1;
    }
    /* Compact on scroll: icons only, slimmer + narrower capsule */
    .mob-bottom-nav.is-compact {
        min-height: 46px;
        padding: 4px 6px;
        left: max(44px, 11vw);
        right: max(44px, 11vw);
    }
    .mob-bottom-nav.is-compact .mob-nav-item {
        min-height: 38px;
        padding: 6px 4px;
    }
    .mob-bottom-nav.is-compact .mob-nav-item span {
        max-height: 0;
        opacity: 0;
        transform: translateY(6px);
    }
    /* Active tab: frosted lens pill, iOS-style */
    .mob-nav-item.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .mob-nav-item.active i {
        color: var(--brand, #1e56f5);
    }
    .mob-nav-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
    }
    .mob-nav-item.active .mob-nav-avatar {
        border-color: var(--brand, #1e56f5);
    }
    /* Offset floating nav height so content isn't hidden behind it */
    .main-content { padding-bottom: 92px; }
}

/* ============================================================
   Custom Emoji + Pin + Follow-only + Chat notice
   ============================================================ */

/* Custom emoji images in chat */
.chat-custom-emoji {
    display: inline-block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 2px;
    border-radius: 3px;
}
.chat-custom-emoji.animated {
    animation: none; /* GIFs animate themselves */
    /* Fix iOS/mobile freezing GIF animations */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
}

/* Admin chat GIFs — larger than emoji tokens */
.chat-custom-gif {
    display: inline-block;
    max-width: 220px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    margin: 4px 2px;
    border-radius: 6px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.emoji-grid--gifs {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    max-height: 280px;
}
.emoji-grid--gifs .emoji-item.emoji-gif {
    aspect-ratio: auto;
    min-height: 110px;
    height: auto;
    padding: 8px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
}
.emoji-grid--gifs .emoji-item.emoji-gif:hover {
    transform: none;
    background: var(--bg-elev-3);
    border-color: var(--brand);
}
.emoji-grid--gifs .emoji-item.emoji-gif img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    min-height: 72px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.chat-emoji-picker:has(.emoji-grid--gifs) {
    max-height: 380px;
}

/* Emoji item with custom image */
.emoji-item.emoji-custom { font-size: .9rem; padding: 3px; }
.emoji-item.emoji-custom img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 4px;
}
.emoji-item.emoji-text {
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
}

/* Pin button in chat messages */
.chat-msg-pin-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .72rem;
    transition: color .12s, background .12s;
}
.chat-msg-pin-btn:hover { color: #fbbf24; background: rgba(251,191,36,.12); }

/* Reply button in chat messages */
.chat-msg-reply-btn {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .72rem;
    transition: color .12s, background .12s;
}
.chat-msg-reply-btn:hover { color: var(--brand); background: rgba(30,86,245,.12); }

/* Chat notice (info/warn) */
.chat-notice {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .82rem;
    margin: 4px 0;
    animation: slideInMsg .25s ease;
}
.chat-notice-warn {
    background: rgba(251,191,36,.15);
    border-left: 3px solid #fbbf24;
    color: #fde68a;
}
.chat-notice-info {
    background: rgba(59,130,246,.13);
    border-left: 3px solid #3b82f6;
    color: #93c5fd;
}

/* Chat message entrance animation */
@keyframes slideInMsg {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-message {
    animation: slideInMsg .12s ease;
}

/* Mobile chat drawer toggle hint bar */
.chat-panel-toggle-hint {
    display: none; /* shown via media query override */
    background: var(--bg-elev-2);
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
}
.chat-panel-toggle-hint .toggle-drag-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.2);
    margin: 0 auto 0;
}

/* Stream goals strip (inside panels area — matches site card style) */
.tl-goal-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line, #2a2f3d);
    background: var(--bg-elev-1, #15151a);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
.tl-goal-strip__brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tl-goal-strip__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line, #2a2f3d);
}
.tl-goal-strip__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tl-goal-strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tl-goal-strip__title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text, #ececf1);
}
.tl-goal-strip__obs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tl-goal-strip__obs-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    background: rgba(30, 86, 245, 0.88);
    border: 1px solid rgba(30, 86, 245, 0.5);
    white-space: nowrap;
}
.tl-goal-strip__obs-btn--sub {
    background: rgba(124, 58, 237, 0.88);
    border-color: rgba(167, 139, 250, 0.45);
}
.tl-goal-strip__obs-btn:hover {
    filter: brightness(1.06);
}
.tl-goal-strip__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tl-goal-strip__row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}
.tl-goal-strip__lbl {
    min-width: 56px;
    font-weight: 700;
    color: var(--text-muted, #9a9aad);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tl-goal-strip__track {
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.tl-goal-strip__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}
.tl-goal-strip__fill--follow {
    background: linear-gradient(90deg, #e11d48, #fb7185);
}
.tl-goal-strip__fill--sub {
    background: linear-gradient(90deg, #7c3aed, #818cf8);
}
.tl-goal-strip__nums {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.76rem;
    color: var(--text, #e8e8f0);
    flex-shrink: 0;
}
.tl-goal-strip__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted, #9a9aad);
}
.tl-goal-strip--setup .tl-goal-strip__rows {
    padding-top: 2px;
}
.tl-goal-strip--owner {
    display: block;
}
.tl-goal-strip--owner .tl-goal-strip__main {
    width: 100%;
}
.tl-goal-strip--owner .tl-goal-strip__head {
    justify-content: center;
}
.tl-goal-strip--owner .tl-goal-strip__title {
    width: 100%;
    text-align: center;
}
.tl-goal-duo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}
@media (max-width: 768px) {
    .tl-goal-duo {
        grid-template-columns: 1fr;
    }
    .tl-goal-tile--follow {
        order: 1;
    }
    .tl-goal-tile--sub {
        order: 2;
    }
    .tl-goal-tile--tele {
        order: 3;
    }
}
@media (min-width: 769px) {
    .stream-page .mob-info-bar-left {
        order: 1;
        flex: 1 1 0;
    }
    .stream-page .mob-info-bar-actions {
        order: 2;
    }
    .stream-page .mob-info-cat-art {
        order: 3;
    }
    .tl-goal-tile--tele {
        order: 1;
    }
    .tl-goal-tile--sub {
        order: 2;
    }
    .tl-goal-tile--follow {
        order: 3;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Channel Panels (below stream info, desktop only)
───────────────────────────────────────────────────────────────── */
.stream-panels-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
.stream-panels-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    flex: 1 1 100%;
    width: 100%;
}
.stream-panels-section > .tl-goal-strip {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}
/* Width variants per panel */
.stream-panel-item {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* default: third width */
    width: calc(33.33% - 7px);
    min-width: 160px;
}
.stream-panel-item.sp-full  { width: 100%; }
.stream-panel-item.sp-half  { width: calc(50% - 5px); }
.stream-panel-item.sp-third { width: calc(33.33% - 7px); }
.stream-panel-item .panel-img-link { display: block; }
.stream-panel-item .panel-img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 200px;
    background: var(--bg-elev-3);
}
.stream-panel-item .panel-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    padding: 10px 12px 4px;
    line-height: 1.3;
}
.stream-panel-item .panel-title a {
    color: var(--brand);
    text-decoration: none;
}
.stream-panel-item .panel-title a:hover { text-decoration: underline; }
.stream-panel-item .panel-body {
    font-size: .82rem;
    color: var(--text-muted);
    padding: 4px 12px 12px;
    line-height: 1.55;
    flex: 1;
    word-break: break-word;
}

/* Edit Panels button (streamer only) */
.panels-edit-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 6px;
}
.panels-edit-btn {
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: .8rem;
    padding: 5px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s, border-color .15s;
}
.panels-edit-btn:hover { color: var(--brand); border-color: var(--brand); }

/* Hide panels on mobile by default (stream /live overrides below) */
@media (max-width: 768px) {
    body:not(.page-stream) .stream-panels-section { display: none !important; }
    body:not(.page-stream) .panels-edit-bar { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   Inline Panels Editor Modal
───────────────────────────────────────────────────────────────── */
.panels-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    z-index: 99998;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
.panels-modal-overlay.open { display: flex; }
.panels-modal {
    background: var(--bg-elev-1);
    border-radius: 18px 18px 0 0;
    border: 1px solid var(--line);
    border-bottom: none;
    width: min(800px, 100vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.45);
    animation: pmSlideUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes pmSlideUp {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 769px) {
    .panels-modal-overlay {
        align-items: center;
        padding: 24px 16px;
    }
    .panels-modal {
        border-radius: 16px;
        border-bottom: 1px solid var(--line);
        max-height: min(88vh, 820px);
        animation: pmFadeIn .22s cubic-bezier(.22,1,.36,1);
    }
    @keyframes pmFadeIn {
        from { transform: translateY(12px) scale(.98); opacity: 0; }
        to   { transform: translateY(0) scale(1); opacity: 1; }
    }
}
.panels-modal-head {
    display: flex;
    align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: 10px;
}
.panels-modal-head h3 {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.panels-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.panels-modal-close:hover { color: var(--text); background: var(--bg-elev-3); }
.panels-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
    -webkit-overflow-scrolling: touch;
}
.pe-field-group { display: flex; flex-direction: column; gap: 6px; }
.pe-field-label {
    font-size: .74rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.pe-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.pe-link-row .pe-link { flex: 1; min-width: 180px; }
.pe-link-row .btn { flex-shrink: 0; align-self: center; }
.pe-link-hint {
    margin: 0;
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.pe-field--invalid {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, .15) !important;
}
#panelsModal .pe-field,
#panelsModal input.pe-field,
#panelsModal textarea.pe-field,
.panels-modal-body .pe-field,
.panels-modal-body .form-control {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg-elev-2, #25252b);
    color: var(--text, #e8e8e8);
    font-size: .86rem;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
#panelsModal .pe-field::placeholder,
.panels-modal-body .pe-field::placeholder,
.panels-modal-body .form-control::placeholder {
    color: var(--text-muted);
    opacity: .9;
}
#panelsModal .pe-field:focus,
.panels-modal-body .pe-field:focus,
.panels-modal-body .form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(30, 86, 245, .18);
    background: var(--bg-elev-3, #2a2a32);
}
#panelsModal textarea.pe-field,
.panels-modal-body textarea.pe-field,
.panels-modal-body textarea.form-control {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}
#panelsModal .pe-field--url {
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-muted);
}
#panelsModal .panel-editor-img-row .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.panels-modal-list-hint {
    font-size: .78rem;
    color: var(--text-muted);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.panels-modal-foot {
    border-top: 1px solid var(--line);
    padding: 12px 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    background: var(--bg-elev-2, #1f1f24);
}
#panelsModal .panels-modal-foot .btn-outline {
    border-color: var(--line);
    color: var(--text);
    background: transparent;
}
#panelsModal .panels-modal-foot .btn-outline:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(30, 86, 245, .08);
}
#panelsModal .panels-modal-foot .btn-primary {
    min-width: 100px;
}

/* Panel editor item (inside modal) */
.panel-editor-item {
    background: var(--bg-elev-2, #1f1f24);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.panel-editor-item[data-width="full"]  { border-inline-start: 3px solid var(--brand); }
.panel-editor-item[data-width="half"]  { border-inline-start: 3px solid #3b82f6; }
.panel-editor-item[data-width="third"] { border-inline-start: 3px solid #64748b; }
.panel-editor-width-badge {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-elev-3);
    flex-shrink: 0;
}
.panel-editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}
.panel-editor-drag-handle {
    color: var(--text-muted);
    font-size: .9rem;
    cursor: grab;
    flex-shrink: 0;
    padding: 4px 6px;
    touch-action: none;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.panel-editor-drag-handle:hover {
    color: var(--brand);
    background: rgba(30, 86, 245, .08);
}
.panel-editor-drag-handle:active { cursor: grabbing; }
.panel-editor-item.is-dragging {
    opacity: .55;
    border: 2px dashed var(--brand);
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.panel-editor-item.is-drag-over {
    border-color: var(--brand);
    background: rgba(30, 86, 245, .07);
}
.panel-editor-label {
    flex: 1;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Width picker chips in header */
.pew-chips {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.pew-chip {
    background: none;
    border: 1px solid var(--line);
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 6px;
    font-size: .68rem;
    color: var(--text-muted);
    line-height: 1.6;
    transition: background .12s, color .12s, border-color .12s;
    display: flex;
    align-items: center;
    gap: 3px;
}
.pew-chip:hover { color: var(--text); border-color: var(--brand); }
.pew-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.panel-editor-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: .8rem;
    padding: 2px 6px;
    transition: transform .2s;
}
.panel-editor-item.open .panel-editor-toggle { transform: rotate(180deg); }
.panel-editor-del {
    background: none;
    border: none;
    cursor: pointer;
    color: #f43f5e;
    font-size: .82rem;
    padding: 2px 6px;
    opacity: .75;
}
.panel-editor-del:hover { opacity: 1; }
.panel-editor-body {
    display: none;
    padding: 0 12px 14px;
    flex-direction: column;
    gap: 12px;
}
.panel-editor-item.open .panel-editor-body { display: flex; }
.panel-editor-thumb {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 7px;
    display: block;
    background: var(--bg-elev-1);
}
.panel-editor-upload-block { margin-bottom: 2px; }
.pe-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    background: var(--bg-elev-1);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pe-upload-dropzone:hover,
.pe-upload-dropzone:focus-visible {
    border-color: var(--brand);
    background: rgba(30, 86, 245, 0.06);
    outline: none;
}
.pe-upload-dropzone.pe-dragover {
    border-color: var(--brand);
    background: rgba(30, 86, 245, 0.1);
    box-shadow: inset 0 0 0 1px rgba(30, 86, 245, 0.2);
}
.pe-upload-dropzone.pe-upload-busy {
    opacity: 0.7;
    pointer-events: none;
}
.pe-upload-hint {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.4;
}
.pe-upload-hint em { font-style: normal; color: var(--brand); font-weight: 600; }
.pe-upload-limits {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.pe-upload-err {
    margin: 6px 0 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
}
.panel-editor-img-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.panel-editor-img-row input { flex: 1; min-width: 0; }

/* Legacy drag class names (kept for compatibility) */
.panel-editor-item.dragging  { opacity: .55; border: 2px dashed var(--brand); }
.panel-editor-item.drag-over { border-color: var(--brand); background: rgba(30,86,245,.07); }
.mob-tab { background: none; border: none; cursor: pointer; }
.mob-info-avatar {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 38px;
    height: 38px;
}
.mob-info-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
}
.mob-info-channel {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}
.mob-info-name {
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-base, #efeff1);
    display: flex;
    align-items: center;
    gap: 4px;
}
.mob-info-title {
    font-size: .72rem;
    color: var(--text-muted, #8888aa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.mob-info-category {
    font-size: .68rem;
    color: var(--brand, #1e56f5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    opacity: .85;
}
/* Category box art — right side of mob-info-bar */
.mob-info-cat-art {
    flex-shrink: 0;
    display: block;
    width: 30px;
    height: 40px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--line, #2f2f39);
    margin: 0 5px 0 0;
    transition: border-color .18s, transform .18s;
    text-decoration: none;
}
.mob-info-cat-art:hover {
    border-color: var(--brand, #1e56f5);
    transform: scale(1.06);
}
.mob-info-cat-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mob-info-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    border: 1px solid var(--line, #2f2f39);
    background: var(--bg-elev-2, #26262c);
    color: var(--text-muted, #8888aa);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
    box-sizing: border-box;
}
.mob-info-btn-label { display: none; }
.mob-info-btn.active {
    background: var(--brand, #1e56f5);
    color: #fff;
    border-color: var(--brand, #1e56f5);
}
.mob-info-btn:hover {
    background: var(--bg-elev-3, #303038);
    color: var(--text-base, #efeff1);
}
.mob-info-btn.active:hover {
    background: var(--brand, #1e56f5);
    color: #fff;
}
.mob-info-btn-danger {
    border-color: rgba(244,63,94,.35);
    color: #f43f5e;
}
.mob-info-btn-danger:hover {
    background: rgba(244,63,94,.12);
}
.mob-tab {
    flex: 1;
    padding: 10px 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted, #8888aa);
    font-size: .84rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .18s, border-color .18s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-decoration: none;
}
.mob-tab.active {
    color: var(--brand, #1e56f5);
    border-bottom-color: var(--brand, #1e56f5);
}
.mip-bio {
    font-size: .85rem;
    color: var(--text-muted, #8888aa);
    line-height: 1.5;
    margin: 0 0 10px;
}
.mip-stats {
    display: flex;
    gap: 16px;
    font-size: .82rem;
    color: var(--text-muted, #8888aa);
    flex-wrap: wrap;
}
.mip-stats span { display: flex; align-items: center; gap: 5px; }
.mip-stats i { color: var(--brand, #1e56f5); }

/* Follow button: blue when following, default when not */
.mob-info-btn.btn-following {
    background: rgba(244,63,94,.15);
    border-color: #f43f5e;
    color: #f43f5e;
}
.mob-info-btn.btn-following i {
    color: #f43f5e;
}

/* Follow button animation */
@keyframes followPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(.9); }
    100% { transform: scale(1); }
}
@keyframes unfollowShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px); }
    40%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
}
.mob-info-btn.follow-anim-pop {
    animation: followPop .45s cubic-bezier(.36,1.2,.5,1);
}
.mob-info-btn.follow-anim-shake {
    animation: unfollowShake .4s ease;
}

/* Larger mob-info elements on desktop */
@media (min-width: 769px) {
    .stream-page .mob-info-avatar,
    .stream-page .mob-info-avatar img { width: 46px; height: 46px; }
    /* Title first in DOM: large/bold; channel name smaller/muted when a title exists */
    .stream-page .mob-info-name { font-size: .95rem; font-weight: 600; color: var(--text-muted, #a1a1b0); }
    .stream-page .mob-info-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-base, #efeff1);
        margin-top: 0;
    }
    .stream-page .mob-info-channel:has(.mob-info-title) .mob-info-name {
        font-size: .8rem;
        font-weight: 500;
        color: var(--text-muted, #8888aa);
    }
    .stream-page .mob-info-category { font-size: .74rem; }
    .stream-page .mob-info-cat-art {
        width: 40px;
        height: 54px;
        border-radius: 7px;
    }
    /* Desktop: follow / sub / donate (+ login sub) show text via .mob-info-btn-txt */
    .stream-page .mob-info-btn:not(.mob-info-btn-txt) {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: .9rem;
    }
    .stream-page .mob-info-btn.mob-info-btn-txt {
        width: auto;
        min-width: auto;
        height: 38px;
        min-height: 38px;
        border-radius: 10px;
        padding: 0 12px;
        gap: 7px;
        font-size: .9rem;
    }
    .stream-page .mob-info-btn.mob-info-btn-txt .mob-info-btn-label {
        display: inline !important;
        font-size: 0.74rem;
        font-weight: 600;
        white-space: nowrap;
    }
    /* Desktop /live action strip: single horizontal row, text + icons, fixed sizing */
    .stream-page .mob-info-bar {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 12px 14px;
        gap: 10px;
    }
    .stream-page .mob-info-bar-actions {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .stream-page .viewer-count { font-size: .82rem; }
}

/* Pinned message bar */
.pinned-msg-bar,
#pinnedMsgBar {
    display: none;
    align-items: flex-start;
    gap: 8px;
    background: rgba(37,99,235,.15);
    border-left: 3px solid #2563eb;
    padding: 6px 36px 6px 10px;
    font-size: .8rem;
    color: var(--text);
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
}
.pinned-msg-bar i { color: #2563eb; flex-shrink: 0; margin-top: 2px; }
.pinned-msg-text,
#pinnedMsgText {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}
.pinned-msg-unpin {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .75rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.pinned-msg-unpin:hover { background: rgba(255,255,255,.06); color: var(--text); }

.pinned-msg-bar.tl-pinned-admin-gold,
#pinnedMsgBar.tl-pinned-admin-gold {
    background: linear-gradient(
        105deg,
        rgba(202, 138, 4, 0.38) 0%,
        rgba(120, 53, 15, 0.22) 55%,
        rgba(37, 99, 235, 0.12) 100%
    );
    border-inline-start: 3px solid #ca8a04;
}
.pinned-msg-bar.tl-pinned-admin-gold i,
#pinnedMsgBar.tl-pinned-admin-gold i {
    color: #ca8a04;
}
.pinned-msg-bar.tl-pinned-admin-gold .pinned-msg-text,
#pinnedMsgBar.tl-pinned-admin-gold .pinned-msg-text,
#pinnedMsgBar.tl-pinned-admin-gold #pinnedMsgText {
    color: #fde68a;
}

/* Follow-only bar */
.follow-only-bar {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(59,130,246,.12);
    border-left: 3px solid #3b82f6;
    padding: 6px 10px;
    font-size: .8rem;
    color: #93c5fd;
    flex-shrink: 0;
}
.follow-only-bar i { color: #3b82f6; }

/* Dashboard emoji tab */
#emojiPreviewBox:hover { border-color: var(--brand) !important; }

/* Stream tab layout (stats -> two columns) */
.stream-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr);
    gap: 14px;
    align-items: start;
}
.stream-layout-left,
.stream-layout-right {
    min-width: 0;
}
.stream-layout-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stream-accordion-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elev-2);
    overflow: hidden;
}
.stream-accordion-head {
    width: 100%;
    border: none;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: .9rem;
    font-weight: 700;
}
.stream-accordion-head:hover {
    background: rgba(255,255,255,.04);
}
.stream-acc-chevron {
    transition: transform .2s ease;
    color: var(--text-muted);
    font-size: .78rem;
}
.stream-accordion-card.is-open .stream-acc-chevron {
    transform: rotate(180deg);
}
.stream-accordion-body {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line);
}

/* +18 styled toggle */
.tl-mature-18-toggle-wrap {
    background: linear-gradient(180deg, rgba(168,85,247,.07), rgba(168,85,247,.03));
    border: 1px solid rgba(168,85,247,.3);
    border-radius: 10px;
    padding: 11px 12px;
}
.tl-mature-18-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex-wrap: wrap;
}
.tl-mature-18-switch {
    position: relative;
    width: 46px;
    height: 26px;
    display: inline-flex;
    flex-shrink: 0;
}
.tl-mature-18-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.tl-mature-18-slider {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(148,163,184,.35);
    border: 1px solid rgba(148,163,184,.4);
    position: relative;
    transition: all .2s ease;
}
.tl-mature-18-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}
.tl-mature-18-switch input:checked + .tl-mature-18-slider {
    background: linear-gradient(120deg, #ef4444, #f97316);
    border-color: rgba(248,113,113,.7);
}
.tl-mature-18-switch input:checked + .tl-mature-18-slider::after {
    transform: translateX(20px);
}
.tl-mature-18-text {
    font-size: .88rem;
    color: var(--text);
}
.tl-mature-18-chip {
    background: rgba(239,68,68,.18);
    color: #fb7185;
    border: 1px solid rgba(244,63,94,.35);
    border-radius: 999px;
    padding: 2px 8px;
    margin-inline-end: 4px;
    font-size: .76rem;
}
.tl-mature-18-hint {
    color: var(--text-muted);
    font-size: .75rem;
    display: block;
    margin-top: 6px;
}
@media (max-width: 980px) {
    .stream-layout {
        grid-template-columns: 1fr;
    }
}
.tl-sub-tier-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}
.tl-sub-tier-row > * {
    min-width: 240px;
    flex: 0 0 240px;
    scroll-snap-align: start;
}

.tl-my-emoji-card {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.tl-emoji-upload-dropzone {
    margin-top: 10px;
    padding: 18px 14px;
    border-radius: 12px;
    border: 2px dashed color-mix(in srgb, var(--brand) 35%, var(--line));
    background: color-mix(in srgb, var(--brand) 6%, var(--bg-elev-3));
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tl-emoji-upload-dropzone i {
    font-size: 1.5rem;
    color: var(--brand);
    margin-bottom: 6px;
    display: block;
}
.tl-emoji-upload-dropzone__title {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text);
}
.tl-emoji-upload-dropzone__hint {
    display: block;
    margin-top: 4px;
    font-size: .72rem;
    color: var(--text-muted);
}
.tl-emoji-upload-dropzone:hover,
.tl-emoji-upload-dropzone:focus-visible {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--bg-elev-3));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.tl-emoji-upload-dropzone.is-dragover {
    border-color: #22c55e;
    background: color-mix(in srgb, #22c55e 12%, var(--bg-elev-3));
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}

.tl-emoji-tier-boards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}
@media (max-width: 900px) {
    .tl-emoji-tier-boards {
        grid-template-columns: 1fr;
    }
}
.emoji-tier-board {
    background: var(--bg-elev-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    min-width: 0;
}
.emoji-tier-title {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text);
    letter-spacing: .02em;
}
.emoji-tier-cap {
    font-size: .72rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.emoji-tier-board.is-full .emoji-tier-title {
    color: #f59e0b;
}
.emoji-tier-dropzone.is-full {
    border-color: rgba(245, 158, 11, .35);
    opacity: .92;
}
.emoji-tier-dropzone {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    border: 2px dashed rgba(148, 163, 184, .28);
    background: rgba(0, 0, 0, .12);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.emoji-tier-dropzone.is-dragover {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    background: color-mix(in srgb, var(--brand) 8%, rgba(0, 0, 0, .18));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}
.emoji-tier-empty {
    margin: auto;
    padding: 12px 8px;
    font-size: .75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.45;
    pointer-events: none;
    user-select: none;
}

.tl-emoji-card-pool {
    display: none !important;
}
.tl-emoji-card {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 10px 8px;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.tl-emoji-card.is-dragging {
    opacity: .55;
    transform: scale(.98);
}
.tl-emoji-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
    box-shadow: 0 8px 16px rgba(0,0,0,.2);
}
.tl-emoji-card-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px;
}
.tl-emoji-card-name {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 1.2em;
}
.tl-emoji-card-name code {
    font-size: .74rem;
    font-weight: 700;
    background: transparent;
    padding: 0;
    color: inherit;
}
.tl-emoji-card-edit {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .68rem;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
}
.tl-emoji-card-edit:hover {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.tl-emoji-card-status {
    font-size: .7rem;
    margin-top: 2px;
}
.tl-emoji-card-del {
    position: absolute;
    top: 6px;
    right: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .75rem;
    padding: 2px 5px;
    border-radius: 4px;
}
.tl-emoji-card-del:hover {
    color: #f87171;
    background: rgba(248,113,113,.12);
}

/* Animation: cards slide in */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-card {
    animation: fadeInUp .28s ease both;
}
.dash-card:nth-child(2) { animation-delay: .05s; }
.dash-card:nth-child(3) { animation-delay: .1s; }
.dash-card:nth-child(4) { animation-delay: .15s; }

/* Viewer count pulse animation */
@keyframes countPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.analytics-stat-box .asb-value.popped {
    animation: countPop .3s ease;
}

/* Admin panel emoji grid */
#pendingEmojiList img, #allSiteEmojiList img, #myEmojiList img {
    transition: transform .15s;
}
#pendingEmojiList img:hover, #allSiteEmojiList img:hover, #myEmojiList img:hover {
    transform: scale(1.1);
}

/* ============================================================
   Homepage — intro video only (below announcement; centered card)
   ============================================================ */
.tl-home-header-video {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 0 14px;
    margin-bottom: 2px;
}
.tl-home-header-video__wrap {
    display: flex;
    justify-content: center;
}
.tl-home-header-video__card {
    width: 100%;
    max-width: min(880px, 100%);
    margin: 0 auto;
    border-radius: var(--radius);
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* Widen into sidebar gutter so the player lines up with full-width hero below (LTR sidebar left) */
@media (min-width: 861px) {
    .tl-home-header-video {
        width: calc(100% + 64px);
        max-width: none;
        margin-inline-start: -64px;
    }
    html[dir="rtl"] .tl-home-header-video {
        width: 100%;
        margin-inline-start: 0;
    }
}
.tl-home-header-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(56vh, 500px);
    background: #06060a;
}
.tl-home-header-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: contain;
    background: #000;
}
@media (max-width: 860px) {
    .tl-home-header-video {
        padding: 8px 0 12px;
    }
}
@media (max-width: 600px) {
    .tl-home-header-video__frame {
        max-height: min(42vh, 320px);
    }
}

/* Homepage spotlight (tl-spotlight*) → assets/css/home-spotlight.css (linked from index.php) */
@keyframes tl-spotlight-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.28; }
}

/* ============================================================
   Toggle Switch (bot, settings etc.)
   ============================================================ */
.tl-toggle-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    gap: 0;
}
.tl-toggle-wrap input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.tl-toggle-slider {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #3a3a48;
    border-radius: 999px;
    position: relative;
    transition: background .22s;
    flex-shrink: 0;
}
.tl-toggle-wrap input:checked ~ .tl-toggle-slider {
    background: var(--brand);
}
.tl-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .22s;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.tl-toggle-wrap input:checked ~ .tl-toggle-slider::after {
    transform: translateX(18px);
}
.tl-toggle-wrap:hover .tl-toggle-slider {
    filter: brightness(1.1);
}

/* ============================================================
   Category live indicator
   ============================================================ */
.category-card-scroll.cat-has-live {
    border-color: rgba(107, 159, 255, 0.42);
}
.category-card-scroll.cat-has-live:hover {
    border-color: rgba(107, 159, 255, 0.62);
}
.cat-live-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .58rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-live-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--brand-soft, #6b9fff);
    font-weight: 700;
}
.cat-live-stat i {
    font-size: 0.58rem;
    opacity: 0.92;
}

/* ============================================================
   Mobile — player controls auto-hide + misc
   ============================================================ */
@media (max-width: 900px) {
    .player-wrapper .player-controls-bar {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }
    .player-wrapper.controls-active .player-controls-bar,
    .player-wrapper:focus-within .player-controls-bar {
        opacity: 1;
    }
    .player-wrapper.controls-active .player-controls-bar__cluster {
        pointer-events: auto;
    }
    .player-controls-bar {
        left: 8px;
        right: 8px;
        bottom: 8px;
        gap: 8px;
    }
    .player-controls-bar__cluster {
        padding: 4px 8px;
        gap: 6px;
        min-height: 36px;
    }
    .player-volume-slider {
        width: 46px;
    }
}
@media (max-width: 768px) {
    /* Chat timestamp — ensure readable on small screens */
    .chat-msg-time {
        font-size: .65rem !important;
    }
    /* Loading lazy images hint */
    img[loading="lazy"] {
        content-visibility: auto;
    }
}

/* ============================================================
   Poll Widget (inside chat panel)
   ============================================================ */
#chatPollWidget {
    flex-shrink: 0;
}
.poll-opt-row:hover {
    border-color: #1e56f5 !important;
}

/* ============================================================
   Raid Banners
   ============================================================ */
#raidBanner, #incomingRaidBanner {
    flex-shrink: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Mobile Header Buttons (search icon, menu button)
   Hidden on desktop by default
   ============================================================ */
.mob-hdr-btn { display: none; }
.mob-hide { visibility: visible; }

/* ============================================================
   Mobile Slide-in Drawer
   ============================================================ */
.mob-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1390; /* above bottom nav (1200 on phone UA) */
    opacity: 0;
    transition: opacity .3s;
}
.mob-drawer-overlay.open {
    display: block;
    opacity: 1;
}
.mob-drawer {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(300px, 80vw);
    z-index: 1400; /* above bottom nav (1200 on phone UA) */
    background: var(--bg-elev-1, #1a1a1e);
    border-inline-start: 1px solid var(--line, #2f2f39);
    flex-direction: column;
    overflow-y: auto;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* iOS liquid-glass drawer (solid bg above is the no-blur fallback) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mob-drawer {
        background: rgba(20, 20, 24, 0.62);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-inline-start-color: rgba(255, 255, 255, 0.1);
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
    }
    html[dir="rtl"] .mob-drawer {
        border-right-color: rgba(255, 255, 255, 0.1);
        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
    }
}
/* LTR: drawer enters from right (original position) */
html[dir="ltr"] .mob-drawer {
    right: 0;
    transform: translateX(100%);
}
html[dir="ltr"] .mob-drawer.open {
    transform: translateX(0);
}
/* RTL: drawer enters from left (original position) */
html[dir="rtl"] .mob-drawer {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    border-inline-start: none;
    border-right: 1px solid var(--line, #2f2f39);
}
html[dir="rtl"] .mob-drawer.open {
    transform: translateX(0);
}

.mob-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--line, #2f2f39);
}
.mob-drawer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mob-drawer-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}
.mob-drawer-brand {
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
}
.mob-drawer-user {
    flex: 1;
    min-width: 0;
}
.mob-drawer-name {
    font-weight: 700;
    font-size: .92rem;
    color: var(--text-base, #efeff1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mob-drawer-uname {
    font-size: .78rem;
    color: var(--text-muted, #8888aa);
}
.mob-drawer-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    color: var(--text-muted, #8888aa);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px;
}
.mob-drawer-body {
    padding: 8px 0;
}
.mob-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    color: var(--text-base, #efeff1);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: end;
    box-sizing: border-box;
}
/* LTR: items — icon on left, text on right */
[dir=ltr] .mob-drawer-item { flex-direction: row; justify-content: flex-start; text-align: left; }
[dir=ltr] .mob-drawer-close { margin-inline-start: 0; margin-inline-end: auto; order: -1; }
/* RTL: row-reverse pushes icon to far-right (leading), text next; flex-start packs them right */
[dir=rtl] .mob-drawer-item { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
[dir=rtl] .mob-drawer-close { margin-inline-start: auto; margin-inline-end: 0; }
.mob-drawer-item:active {
    background: rgba(30,86,245,.1);
}
.mob-drawer-item i {
    width: 22px;
    text-align: center;
    color: var(--text-muted, #8888aa);
    font-size: .95rem;
}
.mob-drawer-divider {
    height: 1px;
    background: var(--line, #2f2f39);
    margin: 6px 0;
}
.mob-drawer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mob-draw-lang {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted, #8888aa);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mob-draw-lang.active {
    background: var(--brand, #1e56f5);
    color: #fff;
}
.mob-draw-theme {
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    background: var(--bg-elev-2, #26262c);
    color: var(--text-muted, #8888aa);
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.mob-draw-theme:active {
    background: var(--brand, #1e56f5);
    color: #fff;
}

/* Viewer count in chat header — mobile only */
.chat-hdr-viewer-count { display: none; }
.mob-only { display: none; }

@media (max-width: 768px) {
    /* ── Mobile Header restructure ────────────────────────────── */
    /* Hide desktop search bar on mobile (replaced by icon) */
    .navbar-center { display: none !important; }
    .navbar.mob-search-open .navbar-center {
        display: block !important;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        padding: 0 8px 8px;
    }

    /* Tele + Premium membership — keep visible in mobile header (/live + site) */
    .navbar .tl-nav-header-chips {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
    .navbar .tl-nav-chip,
    .navbar .tele-pill,
    .navbar .tl-mem-nav-btn {
        height: 34px;
        min-height: 34px;
    }
    .navbar .tl-mem-nav-btn {
        width: 34px;
        min-width: 34px;
        padding: 0;
        justify-content: center;
    }
    .navbar .tele-pill {
        padding: 0 8px;
        font-size: .74rem;
        gap: 4px;
    }
    .navbar .tele-pill-amount {
        max-width: 52px;
        font-size: .72rem;
    }
    html[dir="ltr"] .navbar .tl-nav-header-chips { order: 0; }
    html[dir="rtl"] .navbar .tl-nav-header-chips { order: 0; }

    /* Show mobile header buttons */
    .mob-hdr-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: var(--bg-elev-2, #26262c);
        color: var(--text-muted, #8888aa);
        font-size: .92rem;
        cursor: pointer;
        transition: background .15s, color .15s;
        flex-shrink: 0;
    }
    .mob-hdr-btn:active {
        background: var(--brand, #1e56f5);
        color: #fff;
    }

    /* Uniform spacing for mobile header buttons */
    .navbar-right, .navbar-left {
        gap: 8px !important;
    }
    .notification-bell {
        margin-inline-end: 0 !important;
        width: 34px;
        height: 34px;
    }

    /* Mobile menu avatar */
    .mob-menu-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
    }
    .mob-menu-btn {
        padding: 2px;
    }

    /* Hide desktop login/register buttons on mobile */
    .mob-hide { display: none !important; }

    /* Mobile header button order:
       LTR: search | notif | menu (left → right)
       RTL: menu | notif | search (right → left, RTL reading order) */
    html[dir="rtl"] .mob-search-btn    { order: 3; }
    html[dir="rtl"] .notification-bell { order: 2; }
    html[dir="rtl"] .mob-menu-btn      { order: 1; }
    html[dir="ltr"] .mob-search-btn    { order: 1; }
    html[dir="ltr"] .notification-bell { order: 2; }
    html[dir="ltr"] .mob-menu-btn      { order: 3; }

    /* Hide desktop user-menu (dropdown) on mobile — use drawer instead */
    .user-menu { display: none !important; }

    /* Hide desktop lang-switcher, theme-switcher for guests on mobile */
    .lang-switcher { display: none !important; }
    .theme-switcher { display: none !important; }

    /* Show drawer */
    .mob-drawer { display: flex; }

    /* Body lock when drawer is open */
    body.mob-drawer-open { overflow: hidden !important; }

    /* ── Stream page: hide info bar on chat tab ───────────────── */
    .stream-page:not([data-mob-tab="info"]) .stream-info-bar { display: none !important; }

    /* ── Stream page: show viewer count in tab bar on mobile ──── */
    /* Tab bar always sticks to top of its scroll container so it never scrolls out of view */
    .mobile-tab-bar {
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* Viewer count badge in tab bar */
    .mob-tab-viewers {
        display: inline-flex !important;
        align-items: center;
        gap: 3px;
        font-size: .72rem;
        color: var(--text-muted, #8888aa);
        margin-inline-start: 6px;
    }
    .mob-tab-viewers i {
        font-size: .6rem;
        color: #e91916;
    }

    /* ── Fix chat input always visible on mobile ──────────────── */
    /* Viewer count hidden on mobile — too cluttered */
    .chat-hdr-viewer-count { display: none !important; }
    .chat-input-area {
        display: block !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 5 !important;
        padding: 8px 10px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--line, #2f2f39) !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
    }
    .chat-login-prompt {
        display: block !important;
        flex-shrink: 0 !important;
        padding: 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    /* ── Stream page: safe area below fixed navbar ───────────── */
    body.page-stream .main-content {
        padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }
    body.page-stream .mob-only {
        display: inline !important;
    }

    /* ── Show notification bell on mobile ── */
    .notification-bell { display: flex !important; position: relative !important; }
    .notification-bell .notification-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.94) !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 70dvh !important;
        border-radius: 16px !important;
        z-index: 45002 !important;
        overflow-y: auto !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .notification-bell .notification-dropdown.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
        animation: tlSheetModalIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    html.notif-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 45000;
        pointer-events: auto;
        animation: tlSheetOverlayIn 0.22s ease both;
    }

    /* ── Chat users panel: slide up from bottom on mobile ────── */
    .chat-users-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60dvh !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -4px 32px rgba(0,0,0,.55) !important;
        z-index: 500 !important;
        overflow: hidden !important;
    }
    /* Backdrop when users panel is open */
    .chat-users-panel[style*="flex"] ~ .chat-users-backdrop,
    .chat-users-panel[style*="block"] ~ .chat-users-backdrop {
        display: block;
    }
}

/* ============================================================
   Navbar live pill
   ============================================================ */
.navbar-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(30,86,245,.12);
    border: 1px solid rgba(30,86,245,.25);
    border-radius: 20px;
    padding: 2px 8px 2px 5px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--brand, #1e56f5);
    margin-inline-start: 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1;
}

.nav-soon-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.28);
    border-radius: 20px;
    padding: 2px 7px;
    font-size: .62rem;
    font-weight: 700;
    color: #fbbf24;
    margin-inline-start: 6px;
    white-space: nowrap;
    line-height: 1.2;
}

.navbar-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e91916;
    flex-shrink: 0;
    animation: live-pulse 1.6s ease infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.65); }
}

/* Following page (/following) */
.following-page {
    padding-top: 24px;
    padding-bottom: 48px;
}
.following-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}
.following-stats-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.following-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}
.following-stat-pill--live {
    background: rgba(233, 25, 22, .12);
    border: 1px solid rgba(233, 25, 22, .28);
    color: #f87171;
}
.following-stat-pill--offline {
    background: rgba(80, 80, 90, .25);
    border: 1px solid rgba(120, 120, 130, .35);
    color: #a1a1aa;
}
.following-block {
    margin-bottom: 36px;
}
.following-block__head {
    margin-bottom: 14px;
}
.following-block__head h2 {
    font-size: 1.05rem;
    font-weight: 700;
}
.following-offline-heading {
    color: var(--text-muted, #9ca3af);
}
.following-no-live-hint {
    color: var(--text-muted, #9ca3af);
    font-size: .9rem;
    margin: 0 0 24px;
}
.stream-card--offline {
    opacity: .92;
}
.stream-card--offline:hover {
    opacity: 1;
}
.stream-thumbnail--offline {
    background: #1a1a22;
}
.stream-thumbnail--offline .offline-thumb {
    filter: grayscale(1) brightness(.42) contrast(.95);
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.stream-card--offline .stream-thumbnail--offline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}
.offline-tag {
    background: rgba(30, 30, 36, .88);
    color: #a1a1aa;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.stream-avatar--offline {
    filter: grayscale(.75);
    opacity: .85;
}
.stream-streamer--muted {
    color: var(--text-muted, #9ca3af);
    font-size: .8rem;
}

/* ===================== ACHIEVEMENTS ===================== */
.ach-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.ach-summary-bar {
    flex: 1;
    height: 10px;
    background: var(--bg-elev-3);
    border-radius: 99px;
    overflow: hidden;
}
.ach-summary-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand), #c084fc);
    border-radius: 99px;
    transition: width .7s ease;
}
.ach-role-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.ach-role-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ach-role-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}
.ach-role-item.is-ok {
    border-color: rgba(34,197,94,.45);
    box-shadow: 0 0 0 1px rgba(34,197,94,.14);
}
.ach-role-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.16);
    background: #0f1320;
}
.ach-role-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: color-mix(in srgb, var(--brand) 12%, var(--bg-elev-2));
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
}
.ach-role-item.is-ok .ach-role-icon {
    background: color-mix(in srgb, #22c55e 14%, var(--bg-elev-2));
    border-color: color-mix(in srgb, #22c55e 35%, var(--line));
    color: #22c55e !important;
}
.ach-role-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ach-role-meta { min-width: 0; flex: 1; }
.ach-role-name {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ach-role-desc {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.35;
}
.ach-role-state {
    font-size: .95rem;
    color: rgba(166,166,178,.48);
}
.ach-role-item.is-ok .ach-role-state {
    color: #22c55e;
}
.ach-summary-pct {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.ach-summary-count {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text);
    white-space: nowrap;
}
.ach-cats {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    align-items: center;
}
.ach-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .22s ease;
    white-space: nowrap;
}
.ach-cat:hover {
    border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
    color: var(--text);
    transform: translateY(-1px);
}
.ach-cat.active {
    background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 80%, #111), #7c3aed);
    border-color: color-mix(in srgb, var(--brand) 70%, #7c3aed);
    color: #fff;
    box-shadow: 0 8px 16px rgba(30,86,245,.28);
}
.ach-cat-unlocked {
    margin-right: auto;
}
.ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.ach-card {
    position: relative;
    background: var(--bg-elev-2);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 18px 16px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
    opacity: .9;
    transform: translateY(6px) scale(.99);
}
.ach-card.ach-card-show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.ach-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 34px rgba(0,0,0,.26);
}
.ach-card.ach-unlocked {
    border-color: var(--ach-color, #f59e0b);
    box-shadow: 0 0 0 1px var(--ach-color, #f59e0b), 0 4px 20px color-mix(in srgb, var(--ach-color, #f59e0b) 18%, transparent);
}
.ach-card.ach-locked {
    opacity: .65;
}
.ach-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: color .2s, background .2s;
}
.ach-body {
    flex: 1;
    min-width: 0;
}
.ach-title {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 4px;
    color: var(--text);
}
.ach-desc {
    font-size: .77rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.45;
}
.ach-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ach-progress-bar {
    flex: 1;
    height: 5px;
    background: var(--bg-elev-3);
    border-radius: 99px;
    overflow: hidden;
}
.ach-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s;
}
.ach-progress-text {
    font-size: .7rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.ach-badge {
    position: absolute;
    top: 11px;
    left: 11px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
}
.ach-badge-ok {
    background: #22c55e;
    color: #fff;
}
.ach-badge-lock {
    background: var(--bg-elev-3);
    color: var(--text-muted);
}
@media (max-width: 600px) {
    .ach-grid {
        grid-template-columns: 1fr;
    }
    .ach-cats {
        gap: 5px;
    }
    .ach-cat {
        padding: 6px 12px;
        font-size: .78rem;
    }
}

/* ── Bilingual achievement card ─────────────────────────────────────────── */
.ach-title-en {
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 1px;
    display: block;
    direction: ltr;
    text-align: left;
}

/* ── Special achievement cards (Streamer / Affiliate / Partner) ─────────── */
.ach-specials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.ach-special-card {
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ach-special-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.ach-special-card.ach-s-ready  { border-color: rgba(34,197,94,.4); }
.ach-special-card.ach-s-pending { border-color: rgba(245,158,11,.4); }
.ach-special-card.ach-s-approved { border-color: rgba(34,197,94,.6); background: rgba(34,197,94,.04); }
.ach-s-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.ach-s-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ach-s-meta { flex: 1; min-width: 0; }
.ach-s-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.ach-s-en {
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-muted);
    direction: ltr;
    margin-right: 6px;
}
.ach-s-desc {
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.ach-s-desc-en {
    font-style: italic;
    font-size: .75rem;
    display: block;
    direction: ltr;
}
.ach-criteria-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.ach-ci {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
}
.ach-ci > i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: .85rem;
}
.ach-ci-body { flex: 1; min-width: 0; }
.ach-ci-label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text);
    flex-wrap: wrap;
}
.ach-ci-done .ach-ci-label { color: #22c55e; }
.ach-ci-en {
    font-style: italic;
    font-size: .72rem;
    color: var(--text-muted);
    direction: ltr;
}
.ach-s-action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ach-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
.ach-app-approved { background: rgba(34,197,94,.12);  color: #22c55e;  border: 1px solid rgba(34,197,94,.3); }
.ach-app-pending  { background: rgba(245,158,11,.12); color: #f59e0b;  border: 1px solid rgba(245,158,11,.3); }
.ach-app-rejected { background: rgba(244,63,94,.12);  color: #f43f5e;  border: 1px solid rgba(244,63,94,.3); }
.ach-s-locked-msg {
    font-size: .75rem;
    color: var(--text-muted);
    font-style: italic;
}
.btn-sm {
    padding: 6px 14px;
    font-size: .82rem;
}

/* ── Admin sub-tabs ─────────────────────────────────────────────────────── */
.admin-stabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    flex-wrap: wrap;
}
.admin-stab {
    background: none;
    border: 1px solid var(--line);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .82rem;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-stab:hover   { border-color: var(--brand); color: var(--text); }
.admin-stab.active  { background: var(--brand); border-color: var(--brand); color: #fff; }
.admin-stab small   { font-size: .7rem; opacity: .75; }

@media (max-width: 600px) {
    .ach-specials {
        grid-template-columns: 1fr;
    }
}

/* ── Styled File Input (site-wide) ───────────────────────────────────────── */
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"]) {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: .88rem;
    color: var(--text-muted, #adadb8);
    padding: 8px 10px;
    border: 1px dashed var(--line, rgba(255, 255, 255, 0.14));
    border-radius: 10px;
    background: var(--bg-elev-2, rgba(255, 255, 255, 0.04));
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"]):hover {
    border-color: rgba(30, 86, 245, 0.45);
    background: var(--bg-elev-3, rgba(255, 255, 255, 0.06));
}
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"])::file-selector-button {
    padding: 9px 16px;
    margin-inline-end: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand, #1e56f5), #4477ff);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"])::-webkit-file-upload-button {
    padding: 9px 16px;
    margin-inline-end: 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand, #1e56f5), #4477ff);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
}
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"])::file-selector-button:hover,
input[type="file"]:not([hidden]):not([style*="display:none"]):not([style*="display: none"])::-webkit-file-upload-button:hover {
    filter: brightness(1.08);
}
.file-input-styled {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: var(--text);
    font-size: .88rem;
    padding: 8px 10px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--bg-elev-2);
}
.file-input-styled::file-selector-button {
    padding: 9px 16px;
    background: linear-gradient(135deg, var(--brand), #4477ff);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    margin-inline-end: 12px;
    transition: filter 0.15s;
}
.file-input-styled::-webkit-file-upload-button {
    padding: 9px 16px;
    background: linear-gradient(135deg, var(--brand), #4477ff);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    margin-inline-end: 12px;
}
.file-input-styled::file-selector-button:hover,
.file-input-styled::-webkit-file-upload-button:hover {
    filter: brightness(1.08);
}

/* ════════════════════════════════════════════════════════════════════════
   TWITCH-INSPIRED CREATOR DASHBOARD REDESIGN (v2)
   Modern, clean, professional. Override block — placed last to win cascade.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --dash-bg:        #0e0e10;
    --dash-card:      #18181b;
    --dash-card-2:    #1f1f23;
    --dash-card-3:    #26262c;
    --dash-line:      rgba(255,255,255,.07);
    --dash-line-2:    rgba(255,255,255,.12);
    --dash-text:      #efeff1;
    --dash-text-mute: #adadb8;
    --dash-text-dim:  #7d7d8c;
    --dash-accent:    #1e56f5;
    --dash-accent-2:  #4477ff;
    --dash-accent-soft: rgba(30,86,245,.14);
    --dash-radius:    10px;
    --dash-radius-lg: 14px;
    --dash-shadow:    0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    --dash-shadow-h:  0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}

/* === Container === */
body .container .dashboard {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 4px 60px;
}

/* === Header === */
body .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, var(--dash-card) 0%, var(--dash-card-2) 100%);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-lg);
    box-shadow: var(--dash-shadow);
}
body .dashboard-header h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dash-text);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
body .dashboard-header h1 i {
    color: var(--dash-accent);
    font-size: 1.1rem;
}
body .dashboard-status .status-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
body .dashboard-status .status-live {
    background: rgba(239,68,68,.12);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3);
}
body .dashboard-status .status-offline {
    background: rgba(125,125,140,.12);
    color: var(--dash-text-mute);
    border: 1px solid var(--dash-line);
}

/* === Dashboard page shell (no horizontal bleed, clearer hero) === */
body .tl-dash-page .dashboard.tl-dash-inner {
    overflow-x: clip;
    max-width: 100%;
}
body .dash-tab-content {
    min-width: 0;
}
body .dashboard-header.tl-dash-hero {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
}
body .tl-dash-hero-text {
    flex: 1;
    min-width: min(100%, 280px);
}
body .tl-dash-hero-kicker {
    margin: 0 0 4px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dash-text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body .tl-dash-hero-kicker i {
    color: var(--dash-accent);
    font-size: .68rem;
}
body .tl-dash-hero-text h1 {
    margin: 0 0 6px;
    line-height: 1.2;
}
body .tl-dash-hero-hint {
    margin: 0;
    font-size: .82rem;
    color: var(--dash-text-mute);
    line-height: 1.5;
    max-width: 52ch;
}
body .tl-dash-hero-status {
    flex-shrink: 0;
    align-self: center;
}
body .tl-partner-gate {
    text-align: center;
    padding: 28px 22px 26px;
    border: 1px dashed var(--dash-line-2);
    background: linear-gradient(160deg, rgba(30,86,245,.08), var(--dash-card));
}
body .tl-partner-gate-visual {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dash-accent-soft);
    color: var(--dash-accent);
    font-size: 1.35rem;
}
body .tl-partner-gate-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
body .tl-partner-gate-text {
    margin: 0 auto 18px;
    max-width: 40rem;
    font-size: .88rem;
    color: var(--dash-text-mute);
    line-height: 1.65;
}
body .tl-partner-gate-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* === Tabs (modern pill tabs) === */
body .dash-tabs {
    display: flex;
    gap: 4px;
    padding: 6px;
    margin: 0 0 20px;
    background: var(--dash-card);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: var(--dash-shadow);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 6px;
}
body .dash-tabs::-webkit-scrollbar { display: none; }
body .dash-tab {
    padding: 9px 16px;
    border: none;
    background: transparent;
    color: var(--dash-text-mute);
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s, color .15s, transform .1s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    position: relative;
    scroll-snap-align: start;
    flex-shrink: 0;
}
body .dash-tab i { font-size: .92rem; opacity: .85; }
body .dash-tab:hover {
    color: var(--dash-text);
    background: rgba(255,255,255,.04);
}
body .dash-tab.active {
    color: #fff;
    background: var(--dash-accent);
    box-shadow: 0 2px 8px rgba(30,86,245,.4);
    border: none;
}
body .dash-tab.active i { opacity: 1; }
body .dash-tab span {
    background: rgba(255,255,255,.16) !important;
    color: inherit !important;
    font-weight: 700;
}

/* === Cards === */
body .dash-card {
    grid-column: span 6;
    background: var(--dash-card);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius-lg);
    padding: 20px;
    box-shadow: var(--dash-shadow);
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
body .dash-card:hover {
    border-color: var(--dash-line-2);
    box-shadow: var(--dash-shadow-h);
}
body .dash-card h2 {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dash-text);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -0.005em;
}
body .dash-card h2 i {
    color: var(--dash-accent);
    font-size: .95em;
    width: 28px;
    height: 28px;
    background: var(--dash-accent-soft);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body .dash-card h3, body .dash-card h4 {
    color: var(--dash-text);
    font-weight: 600;
}
body .dash-card-desc {
    margin: -4px 0 14px;
    color: var(--dash-text-mute);
    font-size: .85rem;
    line-height: 1.55;
}

/* Banner cards (live status hero) */
body .dash-card.analytics-live-banner {
    background: linear-gradient(135deg, rgba(30,86,245,.10) 0%, rgba(30,86,245,.02) 60%);
    border-color: rgba(30,86,245,.25);
}

/* === Stat tiles === */
body .stat-item {
    background: var(--dash-card-2);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    padding: 14px;
    transition: border-color .15s, transform .12s;
}
body .stat-item:hover {
    border-color: var(--dash-accent);
    transform: translateY(-1px);
}
body .stat-value {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--dash-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
body .stat-label {
    color: var(--dash-text-mute);
    font-size: .78rem;
    font-weight: 500;
    margin-top: 3px;
    display: block;
}

/* === Forms / Inputs === */
body .dash-card input[type="text"],
body .dash-card input[type="number"],
body .dash-card input[type="email"],
body .dash-card input[type="tel"],
body .dash-card input[type="url"],
body .dash-card input[type="search"],
body .dash-card input[type="password"],
body .dash-card input[type="file"],
body .dash-card select,
body .dash-card textarea {
    background: var(--dash-card-2);
    border: 1px solid var(--dash-line-2);
    color: var(--dash-text);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: 100%;
}
body .dash-card input:focus,
body .dash-card select:focus,
body .dash-card textarea:focus {
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 3px rgba(30,86,245,.18);
    outline: none;
    background: var(--dash-card-3);
}
body .dash-card label {
    color: var(--dash-text-mute);
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

/* === Buttons === */
body .dash-card button[type="submit"]:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    border: 1px solid var(--dash-accent);
    background: var(--dash-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30,86,245,.3);
    transition: transform .08s, box-shadow .15s, background .15s;
}
body .dash-card button[type="submit"]:not(.btn):hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
body .dash-card .btn,
body .dash-card button.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: transform .08s, box-shadow .15s, background .15s, border-color .15s;
}
body .dash-card .btn:hover { transform: translateY(-1px); }
body .dash-card .btn:active { transform: translateY(0); }
body .dash-card .btn-primary {
    background: var(--dash-accent);
    border: 1px solid var(--dash-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30,86,245,.3);
}
body .dash-card .btn-primary:hover {
    background: var(--dash-accent-2);
    border-color: var(--dash-accent-2);
    box-shadow: 0 4px 12px rgba(30,86,245,.4);
}
body .dash-card .btn-outline {
    background: transparent;
    border: 1px solid var(--dash-line-2);
    color: var(--dash-text);
}
body .dash-card .btn-outline:hover {
    background: rgba(255,255,255,.04);
    border-color: var(--dash-text-mute);
}
body .dash-card .btn-sm {
    padding: 6px 12px;
    font-size: .82rem;
}

/* === Tables === */
body .dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 12px;
    background: var(--dash-card-2);
    border-radius: var(--dash-radius);
    overflow: hidden;
    border: 1px solid var(--dash-line);
}
body .dash-table th {
    background: rgba(0,0,0,.2);
    padding: 11px 14px;
    color: var(--dash-text-mute);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--dash-line);
    text-align: start;
}
body .dash-table td {
    padding: 12px 14px;
    color: var(--dash-text);
    font-size: .88rem;
    border-bottom: 1px solid var(--dash-line);
    text-align: start;
}
body .dash-table tr:last-child td { border-bottom: none; }
body .dash-table tr:hover td { background: rgba(255,255,255,.025); }

/* === Live status tiles inside stream tab === */
body .dash-live-status {
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.28);
    border-radius: var(--dash-radius);
    padding: 11px 15px;
    color: #86efac;
    font-weight: 600;
}
body .dash-offline-status {
    background: rgba(125,125,140,.08);
    border: 1px solid var(--dash-line);
    border-radius: var(--dash-radius);
    padding: 11px 15px;
    color: var(--dash-text-mute);
    font-weight: 600;
}

/* === Stream key field === */
body .key-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: .82rem !important;
    background: #000 !important;
    border-color: var(--dash-line-2) !important;
    letter-spacing: .03em;
}

/* === Quick links (stream tab) === */
body .quick-link {
    background: var(--dash-card-2);
    border: 1px solid var(--dash-line);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all .15s;
    color: var(--dash-text);
    font-weight: 500;
}
body .quick-link:hover {
    border-color: var(--dash-accent);
    background: var(--dash-accent-soft);
    color: var(--dash-accent-2);
    transform: translateX(2px);
}

/* === Grids === */
body .db-r2, body .db-r3, body .db-r4 {
    margin-top: 16px;
    gap: 16px;
}

/* === Tab content fade-in === */
body .dash-tab-content.active {
    animation: dashSlideIn .22s ease;
}
@keyframes dashSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Achievement / Progress bars === */
body .ach-card {
    background: var(--dash-card-2) !important;
    border: 1px solid var(--dash-line) !important;
    border-radius: var(--dash-radius) !important;
    transition: border-color .15s, transform .12s;
}
body .ach-card:hover {
    border-color: var(--dash-accent) !important;
    transform: translateY(-2px);
}
body .ach-card.unlocked {
    border-color: rgba(34,197,94,.3) !important;
    background: linear-gradient(135deg, rgba(34,197,94,.07), var(--dash-card-2)) !important;
}

/* === Charts === */
body .dash-chart-wrap canvas {
    max-height: 220px;
}

/* === Responsive === */
@media (max-width: 900px) {
    body .container .dashboard { padding: 12px 0 60px; }
    body .dashboard-header { padding: 12px 14px; border-radius: 10px; }
    body .dashboard-header h1 { font-size: 1.1rem; }
    body .dash-card { padding: 16px; border-radius: 12px; }
    body .dash-card h2 { font-size: .95rem; }
    body .stat-value { font-size: 1.2rem; }
}
@media (max-width: 600px) {
    body .dash-tabs { padding: 4px; }
    body .dash-tab { padding: 8px 12px; font-size: .8rem; gap: 6px; }
    body .dash-tab i { font-size: .85rem; }
    body .dashboard-header { flex-direction: row; align-items: center; gap: 8px; }
    body .dash-card { padding: 14px; }
}

/* === RTL specific === */
html[dir="rtl"] body .quick-link:hover { transform: translateX(-2px); }
html[dir="rtl"] body .dash-table th,
html[dir="rtl"] body .dash-table td { text-align: start; }


/* ════════════════════════════════════════════════════════════════════════
   TELE CURRENCY (Twitch-Bits-style)
   ════════════════════════════════════════════════════════════════════════ */

/* Header: membership + Tele — same height and alignment */
.tl-nav-header-chips {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tl-nav-chip {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Header pill */
.tele-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(30,86,245,.18), rgba(30,86,245,.08));
    border: 1px solid rgba(30,86,245,.35);
    color: #5280ff;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.tele-pill:hover { background: linear-gradient(135deg, rgba(30,86,245,.28), rgba(30,86,245,.14)); border-color: rgba(30,86,245,.55); transform: translateY(-1px); }
/* Mobile / tablet: open Tele sheet must not inherit transform — breaks position:fixed centering */
@media (max-width: 1024px) {
    .tele-pill.open,
    .tele-pill.open:hover {
        transform: none !important;
    }
    .notification-bell.tl-notif-open,
    .notification-bell.tl-notif-open:hover,
    .notification-bell:has(.notification-dropdown.active),
    .notification-bell:has(.notification-dropdown.active):hover {
        transform: none !important;
    }
    .notification-bell.tl-notif-open > i,
    .notification-bell:has(.notification-dropdown.active) > i {
        animation: none !important;
    }
}
.tele-pill i.fa-bolt { color: #1e56f5; font-size: .82rem; }
.tele-pill-amount { color: #fff; min-width: 14px; text-align: center; }

.tl-mem-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    min-width: 36px;
    border-radius: 999px;
    border: 1px solid rgba(245, 158, 11, .45);
    background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(139, 92, 246, .12));
    color: #fbbf24;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    margin-inline-end: 0;
    transition: transform .15s, border-color .15s;
}
.tl-mem-nav-btn:hover { transform: translateY(-1px); border-color: rgba(245, 158, 11, .75); color: #fde68a; }
.tl-mem-nav-btn i { font-size: .82rem; }

.tl-chat-msg-plus-bg {
    background: linear-gradient(90deg, rgba(30, 86, 245, .12), rgba(139, 92, 246, .08)) !important;
    border-inline-start: 2px solid rgba(30, 86, 245, .45);
}
.tl-chat-msg-ultra { border-radius: 10px; }
.chat-badge-site-member {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 4px;
    vertical-align: middle;
}
/* Ultra membership chat visuals: assets/css/membership-chat.css */

.chat-msg-username.tl-chat-name-rgb {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #ff6b6b);
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: tl-chat-rgb-name 4.5s linear infinite;
}
.chat-msg-username.tl-chat-name-rgb--ocean {
    background: linear-gradient(90deg, #0ea5e9, #22d3ee, #38bdf8, #06b6d4, #0284c7, #0ea5e9);
}
.chat-msg-username.tl-chat-name-rgb--fire {
    background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #f59e0b, #dc2626, #ef4444);
}
.chat-msg-username.tl-chat-name-rgb--aurora {
    background: linear-gradient(90deg, #22c55e, #34d399, #a78bfa, #818cf8, #2dd4bf, #22c55e);
}
.chat-msg-username.tl-chat-name-rgb--neon {
    background: linear-gradient(90deg, #f0f, #0ff, #ff0, #0f8, #f0f);
}
.chat-msg-username.tl-chat-name-rgb--pastel {
    background: linear-gradient(90deg, #fda4af, #fdba74, #fde68a, #bbf7d0, #a5f3fc, #fda4af);
}
.chat-msg-username.tl-chat-name-rgb--sunset {
    background: linear-gradient(90deg, #fb7185, #f472b6, #c084fc, #818cf8, #f97316, #fb7185);
}
.chat-msg-username[class*="tl-chat-name-rgb"] {
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}
@keyframes tl-chat-rgb-name {
    0% { background-position: 0% 50%; }
    100% { background-position: 320% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-chat-avatar-ring-wrap { animation: none !important; }
    .tl-chat-avatar-ring-wrap--img-spin .chat-msg-avatar { animation: none !important; }
    .chat-msg-username[class*="tl-chat-name-rgb"] { animation: none; background-position: 50% 50%; }
}

/* Header dropdown */
.tele-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: 320px;
    background: var(--bg-elev-2, #1a1a20);
    border: 1px solid var(--line, #2a2a35);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 16px 48px rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s;
    z-index: 1500;
}
.tele-pill.open .tele-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.tele-dd-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line, #2a2a35); }
.tele-dd-title { font-weight: 700; font-size: .92rem; color: var(--text, #e8e8e8); display: flex; align-items: center; gap: 6px; }
.tele-dd-title i { color: #1e56f5; }
.tele-dd-balance { font-weight: 800; font-size: 1.1rem; color: #1e56f5; }
.tele-dd-balance .tele-unit { font-size: .68rem; opacity: .7; font-weight: 600; }
.tele-dd-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.tele-dd-btn { flex: 1; padding: 9px 12px; border-radius: 8px; border: none; background: #1e56f5; color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; }
.tele-dd-btn:hover { background: #2a64ff; }
.tele-dd-btn.ghost { background: var(--bg-elev-3, #25252b); color: var(--text, #e8e8e8); border: 1px solid var(--line, #2a2a35); }
.tele-dd-btn.ghost:hover { background: var(--bg-elev-1, #15151a); }
.tele-dd-recent-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #8a8a96); margin-bottom: 8px; font-weight: 700; }
.tele-dd-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.tele-dd-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--bg-elev-3, #15151a); font-size: .82rem; }
.tele-dd-item-l { display: flex; align-items: center; gap: 8px; color: var(--text, #e8e8e8); }
.tele-dd-item-l i { color: #1e56f5; font-size: .78rem; }
.tele-dd-item-r { font-weight: 700; }
.tele-dd-item-r.pos { color: #10b981; }
.tele-dd-item-r.neg { color: #f87171; }
.tele-dd-empty { text-align: center; color: var(--text-muted, #8a8a96); padding: 20px 0; font-size: .82rem; }

/* Modal */
.tele-modal { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; opacity: 0; }
.tele-modal.is-open { animation: teleOverlayIn .24s ease forwards; }
.tele-modal-box { background: linear-gradient(180deg, var(--bg-elev-1, #18181b) 0%, var(--bg-elev-2, #12121a) 100%); border: 1px solid var(--line, #2a2a35); border-radius: 16px; width: min(560px, 100%); max-width: 96vw; max-height: 90vh; overflow-y: auto; padding: 22px; position: relative; box-shadow: 0 24px 64px rgba(0,0,0,.5); transform: translateY(18px) scale(.98); opacity: .7; }
.tele-modal.is-open .tele-modal-box { animation: teleModalIn .28s cubic-bezier(.2,.8,.2,1) forwards; }
.tele-modal-close { position: absolute; top: 12px; inset-inline-end: 14px; background: none; border: none; color: #888; cursor: pointer; font-size: 1.2rem; }
.tele-modal-close:hover { color: #fff; }
.tele-modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line, #2a2a35); }
.tele-modal-title { font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.tele-modal-title i { color: #1e56f5; }
.tele-modal-balance { color: #1e56f5; font-weight: 800; font-size: 1.1rem; }
.tele-modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line, #2a2a35); margin-bottom: 18px; }
.tele-mt { padding: 10px 16px; background: none; border: none; color: var(--text-muted, #8a8a96); font-size: .88rem; font-weight: 700; cursor: pointer; border-bottom: 2px solid transparent; transition: all .18s; }
.tele-mt:hover { color: var(--text, #e8e8e8); }
.tele-mt.active { color: #1e56f5; border-bottom-color: #1e56f5; }
.tele-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tele-pkg { background: var(--bg-elev-2, #1a1a20); border: 1px solid var(--line, #2a2a35); border-radius: 12px; padding: 16px 10px; cursor: pointer; transition: all .18s; color: var(--text, #e8e8e8); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translateY(8px); animation: telePkgIn .32s ease forwards; }
.tele-pkg:hover { border-color: #1e56f5; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30,86,245,.2); }
.tele-pkg-icon { font-size: 1.4rem; color: #1e56f5; }
.tele-pkg-amt { font-size: 1rem; font-weight: 800; color: #fff; }
.tele-pkg-price { font-size: .78rem; color: var(--text-muted, #8a8a96); font-weight: 600; }
.tele-buy-note { font-size: .8rem; color: var(--text-muted, #8a8a96); padding: 12px; background: rgba(255,193,7,.08); border: 1px solid rgba(255,193,7,.2); border-radius: 10px; }
.tele-buy-note i { color: #fbbf24; margin-inline-end: 6px; }
.tele-history-list { display: flex; flex-direction: column; gap: 6px; }
.tele-h-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--bg-elev-2, #1a1a20); border-radius: 10px; border: 1px solid var(--line, #2a2a35); }
.tele-h-l { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tele-h-l > i { color: #1e56f5; font-size: .9rem; padding-top: 4px; }
.tele-h-label { font-weight: 700; font-size: .88rem; color: var(--text, #e8e8e8); }
.tele-h-msg { color: var(--text-muted, #8a8a96); font-size: .78rem; margin-top: 2px; }
.tele-h-r { font-weight: 800; font-size: .98rem; }
.tele-h-r.pos { color: #10b981; }
.tele-h-r.neg { color: #f87171; }

/* Chat input cheer button — pinned to left edge of .chat-input-wrap */
.chat-tele-btn {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    color: #1e56f5;
    cursor: pointer;
    padding: 0 6px;
    font-size: 1.05rem;
    transition: transform .15s, color .15s;
}
.chat-tele-btn:hover { color: #5280ff; transform: translateY(-50%) scale(1.1); }

/* Chat cheer panel */
.chat-cheer-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-end: 8px;
    inset-inline-start: 8px;
    background: var(--bg-elev-2, #1a1a20);
    border: 1px solid var(--line, #2a2a35);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 12px 36px rgba(0,0,0,.5);
    z-index: 221;
}

/* TeleLive Spark — channel points (left of chat input) */
.chat-spark-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline-end: 4px;
}
.chat-spark-floats {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 0;
    pointer-events: none;
    z-index: 12;
    overflow: visible;
}
.chat-spark-float {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 800;
    color: #60a5fa;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
    animation: chatSparkFloat 1.15s ease-out forwards;
    white-space: nowrap;
    pointer-events: none;
}
@keyframes chatSparkFloat {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.8); }
    18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(1); }
}
.chat-spark-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: #1e56f5;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    min-width: 2rem;
    transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.chat-spark-bal {
    font-size: 0.62rem;
    font-weight: 700;
    color: #93c5fd;
    line-height: 1.1;
    margin-top: 1px;
    min-width: 1.4rem;
    text-align: center;
    letter-spacing: -0.02em;
}
.chat-spark-icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}
.chat-spark-panel .chat-spark-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.chat-spark-btn:hover:not(:disabled) {
    color: #5280ff;
    transform: scale(1.1);
}
.chat-spark-btn.is-claiming {
    animation: chatSparkPulse 0.45s ease-in-out;
}
@keyframes chatSparkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); color: #93c5fd; }
}
.chat-spark-btn.is-cooldown,
.chat-spark-btn.is-streamer {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.chat-spark-btn:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.65);
    outline-offset: 2px;
    border-radius: 4px;
}
.chat-spark-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 8px;
    width: min(280px, calc(100% - 16px));
    background: var(--bg-elev-2, #1a1a20);
    border: 1px solid rgba(30, 86, 245, 0.38);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 221;
}
.chat-spark-panel__head {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line, #2a2a35);
}
.chat-spark-panel__title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text, #e8e8e8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chat-spark-panel__title .chat-spark-icon {
    color: #1e56f5;
    width: 1rem;
    height: 1rem;
}
.chat-spark-panel__bal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.chat-spark-panel__bal-label {
    font-size: 0.78rem;
    color: #9ca3af;
}
.chat-spark-panel__bal {
    font-size: 1.1rem;
    font-weight: 800;
    color: #60a5fa;
}
.chat-spark-panel__hint {
    margin: 0;
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.45;
}
.chat-spark-btn.is-active {
    color: #5280ff;
}
.ccp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #2a2a35); }
.ccp-title { font-weight: 700; font-size: .88rem; color: var(--text, #e8e8e8); }
.ccp-title i { color: #1e56f5; }
.ccp-bal { color: #1e56f5; font-weight: 700; font-size: .82rem; }
.ccp-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.ccp-amt { padding: 8px 6px; background: var(--bg-elev-3, #25252b); border: 1px solid var(--line, #2a2a35); color: var(--text, #e8e8e8); border-radius: 8px; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; }
.ccp-amt:hover { border-color: #1e56f5; }
.ccp-amt.sel { background: #1e56f5; border-color: #1e56f5; color: #fff; }
.ccp-amt i { color: #5280ff; font-size: .75rem; }
.ccp-amt.sel i { color: #fff; }
.ccp-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}
.ccp-quick-btn {
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid var(--line, #2a2a35);
    background: var(--bg-elev-3, #25252b);
    color: var(--text, #e8e8e8);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ccp-quick-btn:hover { border-color: #1e56f5; }
.ccp-quick-btn--max {
    background: linear-gradient(135deg, rgba(30, 86, 245, 0.25), rgba(82, 128, 255, 0.12));
    border-color: rgba(30, 86, 245, 0.45);
    color: #fff;
}
.ccp-custom-row {
    display: flex;
    margin-bottom: 8px;
}
.ccp-custom-row input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line, #2a2a35);
    background: var(--bg-elev-3, #25252b);
    color: var(--text, #e8e8e8);
    font-size: 0.88rem;
    font-weight: 700;
    box-sizing: border-box;
}
.ccp-custom { display: flex; flex-direction: column; gap: 6px; }
.ccp-custom input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #2a2a35); background: var(--bg-elev-3, #25252b); color: var(--text, #e8e8e8); font-size: .82rem; }
.ccp-send { padding: 9px; background: #1e56f5; color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: .85rem; cursor: pointer; }
.ccp-send:hover { background: #2a64ff; }
.ccp-note { font-size: .76rem; min-height: 16px; margin-top: 6px; color: var(--text-muted, #8a8a96); }
.ccp-note.ok  { color: #10b981; }
.ccp-note.err { color: #f87171; }

@keyframes tlOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Match Subscribe modal overlay feel (header Tele / notifications on small screens) */
@keyframes tlSheetOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes tlSheetModalIn {
    from {
        opacity: 0.65;
        transform: translate(-50%, -46%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
/* Tele menu: centered modal on phones and tablets (avoids overflow clip on /live) */
@media (max-width: 1024px) {
    .tele-pill { padding: 5px 9px; font-size: .76rem; }
    .tele-pill-amount { font-size: .78rem; }
    .tele-dropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        max-height: 70dvh !important;
        transform: translate(-50%, -50%) scale(0.94) !important;
        border-radius: 16px !important;
        z-index: 45002 !important;
        overflow-y: auto !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .tele-pill.open .tele-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, -50%) scale(1) !important;
        animation: tlSheetModalIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    html.tele-open::before,
    html.notif-open::before {
        content: none !important;
        display: none !important;
        pointer-events: none !important;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Stream /live (phone): channel row, then 3×2 action grid + category art */
    body.page-stream .stream-page .mob-info-bar,
    .stream-page .mob-info-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 8px 10px !important;
        padding: 10px 12px !important;
    }
    body.page-stream .stream-page .mob-info-bar-left,
    .stream-page .mob-info-bar-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex: unset !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }
    body.page-stream .stream-page .mob-info-avatar,
    body.page-stream .stream-page .mob-info-avatar img,
    .stream-page .mob-info-avatar,
    .stream-page .mob-info-avatar img {
        width: 34px !important;
        height: 34px !important;
    }
    body.page-stream .stream-page .mob-info-name,
    .stream-page .mob-info-name {
        font-size: 0.82rem !important;
        font-weight: 500 !important;
    }
    body.page-stream .stream-page .mob-info-title,
    .stream-page .mob-info-title {
        font-size: 0.84rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--text, #f0f0f5) !important;
    }
    body.page-stream .stream-page .mob-info-category,
    .stream-page .mob-info-category {
        font-size: 0.66rem !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions,
    .stream-page .mob-info-bar-actions {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
    }
    body.page-stream .stream-page .mob-info-btn:not(.mob-info-btn-txt),
    .stream-page .mob-info-btn:not(.mob-info-btn-txt) {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        border-radius: 10px !important;
        padding: 6px 5px !important;
        gap: 0 !important;
        font-size: 0.82rem !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions > #streamMoreWrap,
    .stream-page .mob-info-bar-actions > #streamMoreWrap {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions > #streamMoreWrap .mob-info-btn,
    .stream-page .mob-info-bar-actions > #streamMoreWrap .mob-info-btn {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    body.page-stream .stream-page .mob-info-btn.mob-info-btn-txt,
    .stream-page .mob-info-btn.mob-info-btn-txt {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        border-radius: 10px !important;
        padding: 6px 5px !important;
        gap: 4px !important;
        flex-direction: column !important;
        justify-content: center !important;
        font-size: 0.76rem !important;
    }
    body.page-stream .stream-page .mob-info-btn.mob-info-btn-txt .mob-info-btn-label,
    .stream-page .mob-info-btn.mob-info-btn-txt .mob-info-btn-label {
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .viewer-count,
    .stream-page .mob-info-bar-actions .viewer-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 40px !important;
        padding: 6px 5px !important;
        border-radius: 10px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        background: var(--bg-elev-2, #26262c) !important;
        border: 1px solid var(--line, #2f2f39) !important;
        color: var(--text-base, #efeff1) !important;
        box-sizing: border-box !important;
    }
    body.page-stream .stream-page .mob-info-bar-actions .viewer-count i,
    .stream-page .mob-info-bar-actions .viewer-count i {
        font-size: 0.7rem !important;
        opacity: 0.9 !important;
    }
    body.page-stream .stream-page .mob-info-cat-art,
    .stream-page .mob-info-cat-art {
        display: block !important;
        width: 38px !important;
        height: 50px !important;
        min-width: 38px !important;
        border-radius: 7px !important;
        margin: 0 !important;
        align-self: center !important;
        flex-shrink: 0 !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    .player-quality-menu.pq-menu {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: max(70px, env(safe-area-inset-bottom) + 52px) !important;
        transform: translateX(-50%) !important;
        width: min(300px, calc(100vw - 24px));
        min-width: 0 !important;
        border-radius: 14px;
        z-index: 100070 !important;
    }
    body.page-stream .player-quality-menu.pq-menu.show {
        z-index: 100070 !important;
    }
    .pq-menu-header { font-size: .72rem; padding: 10px 14px 8px; }
    .player-quality-opt.pq-opt { padding: 11px 14px; font-size: .9rem; }
    .tele-pkg-grid { grid-template-columns: repeat(2, 1fr); }
    .tele-modal { padding: 12px; align-items: flex-end; }
    .tele-modal-box { padding: 16px; border-radius: 16px 16px 0 0; max-height: 88vh; }
    .notification-dropdown { width: min(360px, calc(100vw - 16px)) !important; max-width: calc(100vw - 12px) !important; }
    .dash-fin-snapshot-row { flex-direction: column; }
    .dash-fin-snapshot-row .analytics-stat-box { width: 100%; }
}

/* RTL adjustments */
html[dir="rtl"] .tele-dropdown { inset-inline-end: 0; inset-inline-start: auto; }

/* ── Tele Cheer / Sub-Gift chat bubble + event banner (Twitch-style) ─────── */
.chat-message.chat-message-cheer,
.chat-message.chat-message-gift {
    background: linear-gradient(90deg, rgba(30,86,245,.18), rgba(30,86,245,.05));
    border-inline-start: 3px solid #1e56f5;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 4px 0;
}
.chat-message.chat-message-gift {
    background: linear-gradient(90deg, rgba(169,112,255,.18), rgba(169,112,255,.05));
    border-inline-start-color: #a970ff;
}
.chat-cheer-amt {
    display: inline-flex; align-items: center; gap: 4px;
    background: #1e56f5; color: #fff;
    padding: 2px 8px; border-radius: 999px;
    font-weight: 800; font-size: .82rem;
    box-shadow: 0 0 8px rgba(30,86,245,.55);
    margin-inline-end: 6px;
}
.chat-cheer-amt.chat-gift-amt { background: #a970ff; box-shadow: 0 0 8px rgba(169,112,255,.55); }
.chat-cheer-sep { color: var(--text-muted, #888); margin: 0 4px; }

/* Chat event banner — appears at top of chat for everyone */
.chat-event-banner {
    border-bottom: 1px solid rgba(30,86,245,.35);
    background: linear-gradient(90deg, rgba(30,86,245,.22), rgba(30,86,245,.06));
    padding: 8px 12px;
    overflow: hidden;
    position: relative;
}
.chat-event-banner.ceb-pop { animation: ceb-pop .45s ease-out; }
@keyframes ceb-pop {
    0%   { transform: translateY(-6px); opacity: 0; }
    60%  { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); }
}
.ceb-row { display: flex; align-items: center; gap: 10px; }
.ceb-icon {
    width: 32px; height: 32px; flex: 0 0 32px;
    display: flex; align-items: center; justify-content: center;
    background: #1e56f5; color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(30,86,245,.55);
    font-size: .9rem;
    animation: ceb-spin 2s linear infinite;
}
.ceb-row.ceb-gift .ceb-icon { background: #a970ff; box-shadow: 0 0 10px rgba(169,112,255,.55); animation: none; }
@keyframes ceb-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ceb-body { flex: 1; min-width: 0; }
.ceb-line {
    font-size: .84rem; color: var(--text, #e8e8e8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ceb-line strong { color: #5da0ff; margin-inline-end: 4px; }
.ceb-row.ceb-gift .ceb-line strong { color: #c89bff; }
.ceb-msg {
    display: block; font-size: .76rem; color: var(--text-muted, #aaa);
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Tele package discount badge */
.tele-pkg { position: relative; }
.tele-pkg-disc {
    position: absolute; top: 4px; inset-inline-end: 4px;
    background: #f59e0b; color: #000;
    font-size: .68rem; font-weight: 800;
    padding: 2px 6px; border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tele-pkg-cur { font-size: .72rem; color: var(--text-muted, #888); margin-inline-start: 2px; }
@keyframes teleOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes teleModalIn { from { opacity: .7; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes telePkgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .tele-modal.is-open,
    .tele-modal.is-open .tele-modal-box,
    .tele-pkg { animation: none !important; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
    .ceb-line { font-size: .78rem; }
    .ceb-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }
}
.cep-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.chat-events-panel {
    transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
    max-height: 78px;
    opacity: 1;
    overflow: hidden;
    margin-bottom: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.chat-events-panel.is-empty {
    max-height: 0 !important;
    opacity: 0;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none;
}
.tl-sup-glass.tl-sup-carousel,
.tl-sup-carousel.tl-sup-glass {
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    padding: 5px 6px;
    background: rgba(22, 24, 32, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 16px rgba(0, 0, 0, 0.22);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-sup-glass.tl-sup-carousel,
    .tl-sup-carousel.tl-sup-glass {
        background: rgba(20, 22, 30, 0.38);
        backdrop-filter: blur(20px) saturate(165%);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
    }
}
.tl-sup-carousel {
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    padding: 5px 6px;
}
.tl-sup-track {
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.tl-sup-track--out {
    opacity: 0;
    transform: translateX(-12px);
}
.tl-sup-track--in {
    animation: tlSupSlideIn 0.42s cubic-bezier(0.33, 1, 0.68, 1) both;
}
@keyframes tlSupSlideIn {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}
.tl-sup-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 5px;
    width: 100%;
    min-height: 46px;
}
.tl-sup-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}
.tl-sup-card--empty {
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
    background: transparent;
}
.tl-sup-ava {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid rgba(30, 86, 245, 0.4);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}
.tl-sup-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.tl-sup-name {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    color: #ececf1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-sup-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
}
.tl-sup-stat {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}
.tl-sup-stat--tele { color: #fbbf24; }
.tl-sup-stat--sub { color: #fda4af; }
.tl-sup-stat--sub .fa-gift { font-size: 0.85em; opacity: 0.92; }
.tl-sup-stat--muted { color: rgba(255, 255, 255, 0.35); font-weight: 600; }
.tl-sup-amts--bounce .tl-sup-stat { animation: tlSupAmtBounce 1.8s ease-in-out infinite; }
@keyframes tlSupAmtBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .tl-sup-track--in,
    .tl-sup-amts--bounce .tl-sup-stat { animation: none !important; }
    .tl-sup-track--out { transform: none; }
}
.chat-events-panel.is-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-bottom: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: translateY(-10px) scale(0.985);
    pointer-events: none;
}
.chat-events-panel.is-opening {
    animation: cepPanelSlideDown 0.75s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.chat-events-panel.is-closing {
    animation: cepPanelSlideUp 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
    pointer-events: none;
}
@keyframes cepPanelSlideDown {
    0% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-14px) scale(0.985);
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        max-height: 140px;
        transform: translateY(0) scale(1);
    }
}
@keyframes cepPanelSlideUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        max-height: 140px;
    }
    45% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
        transform: translateY(-14px) scale(0.985);
        max-height: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .chat-events-panel,
    .chat-events-panel.is-opening,
    .chat-events-panel.is-closing {
        animation: none !important;
        transition: none !important;
    }
}
.cep-head {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: .78rem;
    color: var(--text, #e8e8e8);
    border-bottom: 1px solid var(--line, #2a2a35);
    background: var(--bg-elev-2, #1a1a20);
}
.cep-head-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.cep-head-toggle:hover,
.cep-head-toggle:focus-visible {
    background: rgba(30, 86, 245, 0.08);
    outline: none;
}
.cep-head-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.cep-toggle-icon {
    flex-shrink: 0;
    font-size: 0.72rem;
    opacity: 0.65;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-events-panel.is-collapsed .cep-toggle-icon {
    transform: rotate(180deg);
}
.cep-head i { color: #1e56f5; margin-inline-end: 6px; flex-shrink: 0; }
.cep-head-title i { margin-inline-end: 0; }
.cep-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted, #888);
    font-size: .82rem;
}
.cep-empty--mini {
    padding: 10px 12px;
    font-size: .76rem;
}
.cep-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; color: #1e56f5; opacity: .55; }
.cep-empty--mini i {
    display: inline;
    font-size: 1rem;
    margin-bottom: 0;
    margin-inline-end: 6px;
    vertical-align: middle;
}
.cep-strip-wrap {
    overflow: hidden;
    min-height: 48px;
}
.cep-strip {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 6px;
    padding: 6px 8px 8px;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.38s ease, transform 0.38s ease;
}
.cep-strip--out {
    opacity: 0;
    transform: translate3d(-12px, 0, 0);
}
.cep-strip--in {
    animation: cepTopSupIn 0.5s ease both;
}
@keyframes cepTopSupIn {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.cep-gift-badged {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(190, 24, 93, 0.45), rgba(79, 70, 229, 0.25));
    border: 1px solid rgba(244, 114, 182, 0.4);
    color: #fce7f3;
    font-size: 0.7em;
    line-height: 1.15;
    white-space: nowrap;
}
.cep-gift-badged .fa-gift { color: #fda4af; font-size: 0.9em; }
.cep-gift-n { color: #fff; font-weight: 800; }
.cep-nums-sep { margin: 0 2px; opacity: 0.4; user-select: none; }
.cep-ava-wrap {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
}
.cep-pav {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1e56f5;
    display: block;
}
.cep-ph {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: block;
}
.cep-num {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted, #bbb);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .chat-events-panel .cep-head-toggle {
        padding: 5px 8px;
        font-size: 0.72rem;
    }
    .cep-strip {
        gap: 4px;
        padding: 5px 6px 7px;
    }
    .cep-ava-wrap,
    .cep-pav,
    .cep-ph {
        width: 26px;
        height: 26px;
    }
    .cep-num {
        font-size: .62rem;
    }
    .cep-cell {
        gap: 4px;
        padding: 3px 4px;
    }
}

/* Tele / gift-sub chat rows — entrance + brand-tinted panels */
@keyframes tlChatEvPop {
    0% { opacity: 0; transform: translateY(8px) scale(0.985); filter: brightness(1.15); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
.chat-message.tl-chat-ev-tele {
    animation: tlChatEvPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: linear-gradient(
        105deg,
        rgba(30, 86, 245, 0.5) 0%,
        rgba(30, 86, 245, 0.18) 45%,
        rgba(15, 23, 42, 0.35) 100%
    );
    border: 1px solid rgba(30, 86, 245, 0.55);
    border-radius: 10px;
    margin: 5px 0;
    padding: 8px 10px;
    box-shadow: 0 4px 22px rgba(30, 86, 245, 0.15);
}
.chat-message.tl-chat-ev-tele .chat-msg-user {
    font-weight: 700;
}
/* Follow — سبز (رویداد فالو) */
.chat-message.tl-chat-ev-follow {
    animation: tlChatEvPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: linear-gradient(
        105deg,
        rgba(22, 163, 74, 0.48) 0%,
        rgba(34, 197, 94, 0.18) 45%,
        rgba(15, 23, 42, 0.35) 100%
    ) !important;
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 10px;
    margin: 5px 0;
    padding: 8px 10px;
    box-shadow: 0 4px 22px rgba(34, 197, 94, 0.12);
}
.chat-message.tl-chat-ev-follow .chat-msg-user {
    font-weight: 700;
}
/* Sub row — pink / متمایز از فالو و چت عادی */
.chat-message.tl-chat-ev-sub {
    animation: tlChatEvPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: linear-gradient(
        105deg,
        rgba(236, 72, 153, 0.5) 0%,
        rgba(244, 114, 182, 0.2) 48%,
        rgba(15, 23, 42, 0.35) 100%
    );
    border: 1px solid rgba(236, 72, 153, 0.48);
    border-radius: 10px;
    margin: 5px 0;
    padding: 8px 10px;
    box-shadow: 0 4px 22px rgba(236, 72, 153, 0.12);
}
.chat-message.tl-chat-ev-sub .chat-msg-user {
    font-weight: 700;
}
/* Gift sub — قرمز کمرنگ (تفکیک از ساب معمولی) */
.chat-message.tl-chat-ev-gift {
    animation: tlChatEvPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: linear-gradient(
        105deg,
        rgba(248, 113, 113, 0.4) 0%,
        rgba(239, 68, 68, 0.12) 48%,
        rgba(15, 23, 42, 0.35) 100%
    );
    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 10px;
    margin: 5px 0;
    padding: 8px 10px;
    box-shadow: 0 4px 22px rgba(239, 68, 68, 0.1);
}
.chat-message.tl-chat-ev-gift .chat-msg-user {
    font-weight: 700;
}
/* Raid — بنفش/طلایی */
.chat-message.tl-chat-ev-raid {
    animation: tlChatEvPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    background: linear-gradient(
        105deg,
        rgba(168, 85, 247, 0.42) 0%,
        rgba(245, 158, 11, 0.16) 48%,
        rgba(15, 23, 42, 0.35) 100%
    );
    border: 1px solid rgba(168, 85, 247, 0.45);
    border-radius: 10px;
    margin: 5px 0;
    padding: 8px 10px;
    box-shadow: 0 4px 22px rgba(168, 85, 247, 0.14);
}
.chat-message.tl-chat-ev-raid .chat-msg-user {
    font-weight: 700;
}

/* Official Tele / sub / gift rows — harder to fake via paste (still not cryptographic) */
.chat-message.tl-chat-guard {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.chat-message.tl-chat-guard .tl-ev-pill {
    user-select: none;
    -webkit-user-select: none;
}
.chat-message.tl-chat-guard *::selection {
    background: transparent;
}

.tl-system-username {
    font-weight: 700;
}
.chat-message.tl-chat-ev-tele .tl-system-username {
    color: #a8c4ff;
}
.chat-message.tl-chat-ev-follow .tl-system-username {
    color: #bbf7d0;
}
.chat-message.tl-chat-ev-sub .tl-system-username {
    color: #fbcfe8;
}
.chat-message.tl-chat-ev-gift .tl-system-username {
    color: #fecaca;
}
.chat-message.tl-chat-ev-raid .tl-system-username {
    color: #e9d5ff;
}

.tl-ev-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px 2px;
    border-radius: 6px;
    margin-inline-end: 6px;
    line-height: 1.2;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.35);
    color: rgba(255, 255, 255, 0.9);
}
.tl-ev-pill--tele {
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(30, 64, 175, 0.4);
    color: #e0eaff;
}
.tl-ev-pill--sub {
    border-color: rgba(244, 114, 182, 0.55);
    background: rgba(190, 24, 93, 0.35);
    color: #fce7f3;
}
.tl-ev-pill--gift {
    border-color: rgba(252, 165, 165, 0.55);
    background: rgba(127, 29, 29, 0.35);
    color: #fee2e2;
}
.tl-ev-pill--follow {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(6, 78, 59, 0.4);
    color: #dcfce7;
}
.tl-ev-pill--raid {
    border-color: rgba(192, 132, 252, 0.55);
    background: rgba(91, 33, 182, 0.38);
    color: #f3e8ff;
}
#raidBanner,
#incomingRaidBanner {
    z-index: 2;
}
/* سایت ادمین با بج روشن: پس‌زمینه طلایی (حتی پیام خصوصی به استریمر) */
.chat-message.tl-chat-admin-gold {
    background: linear-gradient(
        105deg,
        rgba(202, 138, 4, 0.4) 0%,
        rgba(120, 53, 15, 0.25) 48%,
        rgba(15, 23, 42, 0.2) 100%
    ) !important;
    border: 1px solid rgba(202, 138, 4, 0.5) !important;
    border-radius: 10px;
    box-shadow: 0 2px 18px rgba(202, 138, 4, 0.12);
}
.chat-message.tl-chat-admin-gold.chat-msg-whisper {
    background: linear-gradient(
        90deg,
        rgba(202, 138, 4, 0.38),
        rgba(161, 98, 7, 0.2)
    ) !important;
    border-inline-start: 3px solid #ca8a04;
}
/* Admin mode wins over membership chat backgrounds */
.chat-message.tl-chat-admin-gold.tl-chat-msg-plus-bg,
.chat-message.tl-chat-admin-gold.tl-chat-msg-ultra,
.chat-message.tl-chat-admin-gold.tl-chat-msg-bg-rgb,
.chat-message.tl-chat-admin-gold[class*="tl-chat-msg-bg-rgb"] {
    background: linear-gradient(
        105deg,
        rgba(202, 138, 4, 0.4) 0%,
        rgba(120, 53, 15, 0.25) 48%,
        rgba(15, 23, 42, 0.2) 100%
    ) !important;
    border: 1px solid rgba(202, 138, 4, 0.5) !important;
    border-inline-start: 3px solid #ca8a04 !important;
}

/* پروفایل / چت کشو: ارسال در برابر دریافت + آیکون رویداد */
.tl-chat-msg--in {
    align-self: flex-start;
    max-width: 96%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 8px;
    margin: 2px 0;
}
.tl-chat-msg--out {
    align-self: flex-end;
    max-width: 96%;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30, 86, 245, 0.22), rgba(30, 64, 175, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.35);
    padding: 6px 8px;
    margin: 2px 0;
    flex-direction: row-reverse;
}
#profilePage #chatDrawerMessages,
#profilePage #liveChatMessages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tl-pt-ev-av {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.tl-pt-ev-av--follow { background: #166534; }
.tl-pt-ev-av--sub    { background: #9d174d; }
.tl-pt-ev-av--gift, .tl-pt-ev-av--gift-sub { background: #9f1239; }
.tl-pt-ev-av--tele   { background: #1d4ed8; }
#profilePage .tl-pt-ev-av-img {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    display: block;
}
.tl-chat-msg--sys {
    max-width: 100%;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(100, 116, 139, 0.25);
    padding: 6px 8px;
    margin: 2px 0;
    align-self: stretch;
}

/* Desktop / tablet: clip any stray overflow on live watch page */
@media (min-width: 769px) {
    body.page-stream {
        overflow-x: hidden;
    }
    body.page-stream .main-content,
    body.page-stream .tl-page-content.has-sidebar {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }
    body.page-stream .stream-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 14px;
        align-items: start;
        margin: 12px 0 16px;
    }
    body.page-stream .stream-left-col {
        grid-column: 1;
        grid-row: 1;
    }
    body.page-stream #tlMobChatDock {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: 100%;
        position: sticky;
        top: calc(52px + env(safe-area-inset-top, 0px) + 8px);
    }
}

/* Player wrapper: rock-solid 16/9 with no rounding glitches */
.stream-player {
    background: #000;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.hls-video-player {
    object-fit: contain;
    background: #000;
}

/* Chat panel: smoother scrollbar + crisp border on retina */
.chat-panel {
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

/* Large desktop ≥1600 — slightly wider chat for comfort */
@media (min-width: 1600px) {
    body.page-stream .stream-page {
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 18px;
    }
}

/* Standard desktop 1281–1599 — keep 360 (default) */

/* Mid laptop / iPad landscape 1025–1280 — narrower chat, tighter gap */
@media (min-width: 1025px) and (max-width: 1280px) {
    body.page-stream .stream-page {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 12px;
    }
    .chat-header { padding: 10px; }
}

/* iPad portrait & small laptops 769–1024 — keep side-by-side instead of
   stacking, but with a compact chat column. Previous CSS collapsed at 1024
   which broke iPad landscape; we rescue it here. */
@media (min-width: 769px) and (max-width: 1024px) {
    body.page-stream .stream-page {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 12px;
        padding: 0 10px;
        box-sizing: border-box;
        margin: 10px 0;
    }
    body.page-stream .tl-sk-mount--stream-chat {
        top: calc(46px + 8px);
        height: calc(100dvh - 60px);
        max-height: calc(100dvh - 60px);
    }
    body.page-stream .tl-sk-mount--stream-chat .chat-panel {
        height: 100%;
        max-height: 100%;
        position: relative;
        top: auto;
        border-radius: 10px;
    }
    .stream-player { border-radius: 10px; }
    .stream-info-bar { padding: 10px 12px; }
    .chat-header { padding: 10px; }
    .chat-header h3 { font-size: .92rem; }
}

/* iPad portrait extra-narrow case (≤900) — auto-stack so chat stays usable */
@media (min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
    body.page-stream .stream-page {
        grid-template-columns: 1fr;
    }
    body.page-stream .stream-left-col {
        grid-column: 1;
        grid-row: 1;
    }
    body.page-stream #tlMobChatDock {
        grid-column: 1;
        grid-row: 2;
        position: static;
    }
    body.page-stream .tl-sk-mount--stream-chat .chat-panel {
        position: static;
        height: 60vh;
        min-height: 380px;
    }
}

/* Mobile ≤768 (full-screen tabbed layout already handled) — extra polish */
@media (max-width: 768px) {
    /* Respect iPhone notch / home-indicator safe areas */
    body.page-stream .main-content {
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    /* Full-bleed column — removes empty strip beside chat on phone */
    body.page-stream .tl-page-content.has-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px) !important;
        box-sizing: border-box !important;
    }
    body.page-stream .stream-page {
        width: 100% !important;
        max-width: 100% !important;
    }
    .chat-input-area {
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0)) !important;
    }
    /* /live: flex column فقط وقتی شیت چت باز است */
    body.page-stream.tl-mob-chat-drawer-open .chat-panel {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-inline: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding-bottom: 4px !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-input-area,
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-login-prompt {
        position: relative !important;
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding: 6px 10px !important;
        padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        overflow: visible !important;
        z-index: 5 !important;
    }
    body.page-stream #chatForm {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.page-stream .chat-message {
        padding: 5px 8px !important;
        gap: 6px !important;
        grid-template-columns: 26px 1fr !important;
    }
    body.page-stream .chat-msg-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    body.page-stream .chat-msg-user {
        font-size: 0.78rem !important;
    }
    body.page-stream .chat-msg-text {
        font-size: 0.81rem !important;
    }
    body.page-stream .chat-msg-time {
        font-size: 0.64rem !important;
    }
    /* Tap targets ≥44px for buttons inside chat header */
    .chat-hdr-btn {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Stop horizontal overflow from long usernames/titles */
    .mob-info-bar-left,
    .mob-info-bar-left > * {
        min-width: 0;
    }
    .mob-info-bar-left .stream-title,
    .mob-info-bar-left .channel-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── /live mobile: fixed bottom chat bar; expanded sheet stops below video (--tl-mob-chat-overlay-top) ── */
/* (Backdrop removed — was dimming the whole player and stealing taps.) */
.chat-drawer-hint-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.chat-hdr-actions-slot--mob {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(52vw, 280px);
}
.chat-drawer-hint-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text, #e8e8e8);
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-end: auto;
}
.chat-drawer-hint-title i {
    color: var(--brand, #1e56f5);
}
.chat-drawer-hint-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted, #8888aa);
    flex-shrink: 0;
}
#chatDrawerChevron {
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-hdr-actions-slot--mob .chat-header-actions-grid {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
}
.chat-hdr-actions-slot--mob .chat-header-actions-grid::-webkit-scrollbar {
    display: none;
}
@media (max-width: 768px) {
    /* ── /live mobile: ویدیو بالا + چت به‌صورت نوار پایین (بسته) / شیت باز (تا زیر پلیر) ── */
    body.page-stream .stream-page:not([data-mob-tab="info"]) {
        display: block !important;
        flex: none !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .stream-page:not([data-mob-tab="info"]) {
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }
    body.page-stream .stream-left-col {
        flex: none !important;
        max-height: none !important;
        width: 100% !important;
        overflow: visible !important;
    }
    body.page-stream .stream-left-col .stream-panels-section,
    body.page-stream .stream-left-col .panels-edit-bar {
        display: none !important;
    }
    /* Collapsed: fixed bar at viewport bottom (content scrolls above it) */
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock,
    body.page-stream:not(.tl-mob-chat-drawer-open) .stream-page .tl-sk-mount--stream-chat {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        z-index: 99990 !important;
        width: 100% !important;
        max-width: 100vw !important;
        flex: none !important;
        order: 10 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        pointer-events: auto;
        isolation: isolate;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .stream-page:not([data-mob-tab="info"]) {
        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock {
        display: block !important;
        visibility: visible !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .tl-sk-real.chat-panel,
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .tl-sk-real.chat-panel {
        position: relative !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .stream-left-col {
        padding-bottom: 0 !important;
    }
    body.page-stream #tlMobChatDock,
    body.page-stream.tl-mob-chat-drawer-open .tl-sk-mount--stream-chat {
        pointer-events: auto;
        isolation: isolate;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: top 0.34s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock,
    body.page-stream.tl-mob-chat-drawer-open .tl-sk-mount--stream-chat {
        position: fixed !important;
        top: var(--tl-mob-chat-overlay-top, 38vh) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: calc(100dvh - var(--tl-mob-chat-overlay-top, 38vh)) !important;
        max-height: calc(100dvh - var(--tl-mob-chat-overlay-top, 38vh)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 99990 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .tl-sk-real.chat-panel {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
        position: relative !important;
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel > .chat-messages {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel > .chat-input-area,
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel > .chat-login-prompt {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 4 !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid var(--line, #2f2f39) !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .main-content {
        padding-bottom: 0 !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .tl-sk-mount--stream-chat .tl-sk-layer {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        z-index: 1;
    }
    body.page-stream.tl-mob-chat-drawer-open .tl-sk-mount--stream-chat .tl-sk-layer,
    body.page-stream.tl-stream-page-ready .tl-sk-mount--stream-chat .tl-sk-layer {
        display: none !important;
    }
    body.page-stream .chat-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 14px 14px 0 0 !important;
        border: 1px solid var(--line, #2f2f39) !important;
        border-bottom: none !important;
        box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.45) !important;
        box-sizing: border-box !important;
    }
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel,
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock .chat-panel-toggle-hint {
        border-radius: 0 !important;
    }
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel {
        animation: none !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35) !important;
        transition: box-shadow 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        order: 1 !important;
        flex-shrink: 0 !important;
        border-radius: 14px 14px 0 0 !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint .toggle-drag-handle {
        display: block !important;
        margin: 6px auto 4px !important;
        flex-shrink: 0 !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock {
        min-height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint {
        flex-shrink: 0 !important;
        order: 1 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel {
        transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
    }
    body.page-stream .chat-panel-toggle-hint {
        display: flex !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        border-top: 1px solid var(--line, #2f2f39) !important;
        box-sizing: border-box !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-panel > *:not(.chat-panel-toggle-hint) {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-header,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-events-panel {
        display: block !important;
        flex-shrink: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-messages {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-input-area,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-login-prompt,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > #followOnlyBar.is-open,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .follow-only-bar.is-open {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
    }
    /* Mod panel: only when toggled — never force-open on mobile (was blocking chat) */
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > #modViewPanel:not(.mod-view-open) {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > #modViewPanel.mod-view-open {
        display: block !important;
        flex-shrink: 0 !important;
        max-height: min(36vh, 280px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-header {
        display: flex !important;
        flex-shrink: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-messages {
        display: block !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        direction: rtl;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-events-panel {
        flex-shrink: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-input-area,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-login-prompt,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > #followOnlyBar.is-open,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .follow-only-bar.is-open {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-message {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-msg-text {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere;
    }
    body.page-stream.tl-mob-chat-drawer-open #chatDrawerChevron {
        transform: rotate(180deg);
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-hdr-actions-slot--mob {
        display: none !important;
    }
    body.page-stream .chat-hdr-actions-slot--desktop {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-header-top {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        direction: ltr;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-header-top h3 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        direction: rtl;
        text-align: right;
    }
    body.page-stream #chatHdrViewerCount,
    body.page-stream .chat-header-top .chat-hdr-viewer-count {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-hdr-actions-slot--mob {
        display: flex !important;
        flex: 0 0 auto !important;
        margin-inline-start: auto !important;
        max-width: min(50vw, 220px);
        justify-content: flex-end !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-header {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-drawer-header-chevron {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-drawer-header-chevron {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: var(--text-muted, #8888aa);
        font-size: 0.9rem;
        margin-inline-start: 4px;
        pointer-events: none;
    }
    body.page-stream .chat-hdr-actions-slot--mob .chat-hdr-btn {
        width: 34px;
        height: 34px;
        min-height: 0;
        padding: 0;
        font-size: 0.82rem;
    }
    body.page-stream .chat-users-panel {
        top: max(48px, var(--tl-mob-chat-overlay-top, 120px)) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 56001 !important;
        border-radius: 14px 14px 0 0 !important;
    }
    body.page-stream .chat-users-panel.is-open {
        display: flex !important;
    }
    body.page-stream .chat-users-panel .cup-panel-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    body.page-stream.tl-mob-chat-drawer-open {
        overflow: hidden !important;
    }
    body.page-stream .mob-info-bar {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
    body.page-stream .mob-info-btn,
    body.page-stream .chat-drawer-hint-toggle {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    body.page-stream .chat-panel-toggle-hint {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }
    body.page-stream .stream-page[data-mob-tab="info"] #tlMobChatDock,
    body.page-stream .stream-page[data-mob-tab="info"] .tl-sk-mount--stream-chat {
        display: none !important;
    }
    body.page-stream .stream-page[data-mob-tab="info"] {
        padding-bottom: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel-toggle-hint {
        display: none !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-events-panel {
        display: block !important;
        flex-shrink: 0 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-input-area,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .chat-login-prompt,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > #followOnlyBar.is-open,
    body.page-stream.tl-mob-chat-drawer-open .chat-panel > .follow-only-bar.is-open {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock {
        top: auto !important;
        height: auto !important;
    }
}

/* Desktop /live ≥769 — sidebar chat (undo mobile fixed drawer rules) */
@media (min-width: 769px) {
    body.page-stream .stream-page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        flex-direction: unset !important;
        align-items: start !important;
    }
    body.page-stream .stream-left-col {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    body.page-stream #tlMobChatDock,
    body.page-stream .tl-sk-mount--stream-chat {
        position: sticky !important;
        top: calc(52px + env(safe-area-inset-top, 0px) + 10px) !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 5 !important;
        transform: none !important;
        -webkit-transform: none !important;
        isolation: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)) !important;
        max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px)) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        pointer-events: auto !important;
        transition: none !important;
    }
    body.page-stream .chat-panel-toggle-hint {
        display: none !important;
    }
    body.page-stream .chat-panel > .chat-users-panel {
        display: none !important;
    }
    body.page-stream .chat-panel > .chat-users-panel.is-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 52px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 25 !important;
        background: var(--bg-elev-2, #16161c) !important;
    }
    body.page-stream .tl-sk-mount--stream-chat .chat-panel,
    body.page-stream #tlMobChatDock .chat-panel {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        border-radius: 12px !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    body.page-stream .chat-panel > .chat-header {
        display: flex !important;
        flex-shrink: 0 !important;
    }
    body.page-stream .chat-panel > .chat-events-panel {
        display: block !important;
        flex-shrink: 0 !important;
    }
    body.page-stream .chat-panel > .chat-messages {
        display: block !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    body.page-stream .chat-panel > .chat-input-area,
    body.page-stream .chat-panel > .chat-login-prompt {
        display: block !important;
        flex-shrink: 0 !important;
    }
    body.page-stream .chat-panel > #modViewPanel:not(.mod-view-open) {
        display: none !important;
    }
    body.page-stream .chat-panel > #modViewPanel.mod-view-open {
        display: block !important;
    }
    body.page-stream .main-content {
        padding-bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.page-stream .tl-page-content {
        overflow: visible !important;
    }
    body.page-stream .chat-hdr-actions-slot--mob {
        display: none !important;
    }
    body.page-stream .chat-hdr-actions-slot--desktop {
        display: block !important;
    }
}

/* Stream /live: header, Tele, notifications, quality above docked chat */
@media (max-width: 1024px) {
    body.page-stream.tl-mob-chat-drawer-open .navbar {
        z-index: 100050 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .tele-pill,
    body.page-stream.tl-mob-chat-drawer-open .notification-bell {
        position: relative !important;
        z-index: 100052 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open #streamPlayer,
    body.page-stream.tl-mob-chat-drawer-open .stream-player {
        position: relative !important;
        z-index: 100040 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .player-wrapper {
        position: relative !important;
        z-index: 100041 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .player-controls-bar {
        z-index: 100045 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .player-quality-wrap {
        position: relative !important;
        z-index: 100046 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .player-quality-menu.pq-menu,
    body.page-stream.tl-mob-chat-drawer-open .player-quality-menu.pq-menu.show {
        z-index: 100070 !important;
    }
    body.page-stream.tl-mob-chat-drawer-open .tele-modal {
        z-index: 100080 !important;
    }
    body.page-stream.tele-open .navbar,
    body.page-stream.notif-open .navbar {
        z-index: 100100 !important;
    }
    body.page-stream.tele-open #tlMobChatDock,
    body.page-stream.notif-open #tlMobChatDock,
    body.page-stream.tele-open .tl-sk-mount--stream-chat,
    body.page-stream.notif-open .tl-sk-mount--stream-chat {
        z-index: 99980 !important;
    }
    html.tele-open::before,
    html.notif-open::before {
        content: none !important;
        display: none !important;
        pointer-events: none !important;
    }
    body.page-stream .tele-pill.open .tele-dropdown,
    body.page-stream .notification-bell .notification-dropdown.active {
        z-index: 100110 !important;
    }
}

/* Very small phones ≤380 — slightly tighten chat */
@media (max-width: 380px) {
    .chat-message { font-size: .82rem; padding: 5px 8px; }
    .chat-input-area input,
    .chat-input-area textarea { font-size: .85rem; }
    .mob-tab { font-size: .78rem; padding: 9px 6px; }
}

/* ── System / event message type backgrounds (فالو: see .tl-chat-ev-follow) ── */
.chat-message.chat-message-sub {
    background: rgba(239,68,68,.08) !important;
    border-inline-start: 3px solid rgba(239,68,68,.3);
}
.chat-message.chat-message-gift_sub,
.chat-message.chat-message-gift-sub {
    background: rgba(239,68,68,.15) !important;
    border-inline-start: 3px solid rgba(239,68,68,.55);
}
.chat-message.chat-message-tele {
    background: rgba(30,86,245,.12) !important;
    border-inline-start: 3px solid rgba(30,86,245,.45);
}
.chat-message.chat-message-admin_msg,
.chat-message.chat-message-admin-msg {
    background: rgba(245,158,11,.12) !important;
    border-inline-start: 3px solid rgba(245,158,11,.45);
}

/* ── Poll widget entrance animation ─────────────────────────────────────── */
@keyframes pollSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
#chatPollWidget { animation: pollSlideIn .3s ease; }
#chatPollWidget .poll-opt-row {
    animation: pollSlideIn .25s ease both;
}

/* ============================================================
   Mobile: iOS liquid-glass navbar.
   backdrop-filter must stay OFF the .navbar element itself
   (it creates a containing block that breaks position:fixed
   dropdowns on WebKit) — so the blur lives on a ::before layer.
   ============================================================ */
@media (max-width: 768px) {
    .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(16, 16, 19, 0.22) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.04);
    }
    .navbar::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
    }
    /* No blur support → solid bar */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .navbar {
            background: rgba(14, 14, 16, 0.97) !important;
        }
    }
}

/* ============================================================
   Mobile Live-Following Bar (above bottom nav)
   ============================================================ */
.mob-live-bar {
    display: none;
    position: sticky;
    top: calc(64px + env(safe-area-inset-top, 0px)); /* below floating capsule header (8px gap + 52px bar + 4px) */
    z-index: 199;
    margin: 0 12px;
    border-radius: 22px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    padding: 7px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    align-items: center;
    white-space: nowrap;
    transition: top .35s cubic-bezier(0.4, 0, 0.2, 1),
                margin .35s cubic-bezier(0.4, 0, 0.2, 1),
                padding .35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Compact on scroll: rises with the shrunken navbar + narrows from the sides */
.mob-live-bar.is-compact {
    top: calc(54px + env(safe-area-inset-top, 0px));
    margin: 0 36px;
    padding: 4px 10px;
    gap: 12px;
}
.mob-live-bar-av,
.mob-live-bar-av img {
    transition: width .3s cubic-bezier(0.4, 0, 0.2, 1),
                height .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mob-live-bar.is-compact .mob-live-bar-av,
.mob-live-bar.is-compact .mob-live-bar-av img {
    width: 32px;
    height: 32px;
}
/* iOS liquid-glass capsule (solid bg above is the no-blur fallback) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mob-live-bar {
        background: rgba(16, 16, 19, 0.3);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.16);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}
.mob-live-bar::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
    .mob-live-bar.visible {
        display: flex !important;
    }
}
.mob-live-bar-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    flex-shrink: 0;
}
.mob-live-bar-av {
    position: relative;
    width: 40px;
    height: 40px;
}
.mob-live-bar-av img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f43f5e;
}
.mob-live-bar-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #f43f5e;
    border-radius: 50%;
    border: 2px solid var(--bg-elev-1);
    animation: tl-spotlight-pulse 1.2s ease-in-out infinite;
}
.mob-live-bar-name {
    display: none; /* avatars only */
}

/* ============================================================
   Dashboard — broadcast access gate (stream tab)
   ============================================================ */
.tl-broadcast-gate { margin-bottom: 8px; }
.tl-bgate-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
    border: 1px solid rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(30, 86, 245, 0.07));
}
.tl-bgate-hero-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.22);
    color: #c4b5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.tl-bgate-hero-body { flex: 1; min-width: 200px; }
.tl-bgate-meta { font-size: 0.85rem; color: var(--text-muted); margin: 10px 0 0; }
.tl-bgate-steps { font-size: 0.82rem; color: #94a3b8; margin: 8px 0 0; line-height: 1.5; }
.tl-bgate-alert--pending { border-color: rgba(245, 158, 11, 0.35); }
.tl-bgate-alert--rejected { border-color: rgba(244, 63, 94, 0.35); }
.tl-bgate-form .tl-bgate-form-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.tl-bgate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 4px;
}
@media (max-width: 560px) {
    .tl-bgate-grid { grid-template-columns: 1fr; }
}
.tl-bgate-uploads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 10px 0 4px;
}
@media (max-width: 560px) {
    .tl-bgate-uploads { grid-template-columns: 1fr; }
}
.tl-bgate-file {
    background: var(--bg-elev-3);
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tl-bgate-file-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tl-bgate-file input[type="file"] {
    font-size: 0.78rem;
    max-width: 100%;
}
.tl-bgate-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 12px 0 8px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text);
}
.tl-bgate-callout i { color: #60a5fa; margin-top: 2px; flex-shrink: 0; }
.tl-bgate-callout p { margin: 0; }
.tl-bgate-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.45;
    cursor: pointer;
    margin: 8px 0 0;
}
.tl-bgate-check input {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
}
.tl-bgate-hw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 0 4px;
    margin-top: 6px;
    border-top: 1px solid var(--line);
}
.tl-bgate-hw-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    width: 100%;
    margin-bottom: 4px;
}
@media (min-width: 561px) {
    .tl-bgate-hw-label {
        width: auto;
        margin-bottom: 0;
        margin-inline-end: 8px;
    }
}
.tl-bgate-form textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-elev-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    box-sizing: border-box;
    resize: vertical;
}
.tl-bgate-rtl .tl-bgate-callout { flex-direction: row-reverse; }
.tl-bgate-rtl .tl-bgate-check { flex-direction: row-reverse; text-align: right; }

/* Dashboard — KYC (monetize) */
.tl-kyc-fields { display: grid; gap: 14px; }
@media (min-width: 640px) {
    .tl-kyc-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .tl-kyc-fields .form-group:first-child { grid-column: 1 / -1; }
}
.tl-kyc-confirm {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 12px;
    padding: 14px 16px;
}
html[dir="rtl"] .tl-kyc-confirm {
    flex-direction: row-reverse;
    text-align: right;
}

/* KYC sample thumbnails — full image visible (no crop) */
.tl-kyc-samples-grid .tl-kyc-sample-link {
    overflow: visible;
}
.tl-kyc-samples-grid .tl-kyc-sample-img {
    max-width: 100%;
    max-height: min(52vh, 380px);
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* Monetize redesign */
.tl-monetize-payout-card,
.tl-monetize-history-card {
    border: 1px solid color-mix(in srgb, var(--line) 75%, #f59e0b 25%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev-2) 90%, #f59e0b 10%), var(--bg-elev-1));
}
.tl-monetize-total-card {
    border: 1px solid color-mix(in srgb, var(--line) 72%, #22c55e 28%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elev-2) 88%, #16a34a 12%), var(--bg-elev-1));
}
.tl-monetize-settle-note {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .35);
    color: #fcd34d;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .84rem;
}
.tl-payout-row {
    border-radius: 10px;
    border: 1px solid var(--line);
    padding: 11px 12px;
    margin-bottom: 10px;
}
.tl-payout-row.is-pending {
    background: rgba(250, 204, 21, .14);
    border-color: rgba(250, 204, 21, .4);
}
.tl-payout-row.is-paid {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .4);
}
.tl-payout-row.is-rejected {
    background: rgba(244, 63, 94, .10);
    border-color: rgba(244, 63, 94, .34);
}
.tl-payout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.tl-payout-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tl-payout-k {
    font-size: .73rem;
    color: var(--text-muted);
}
.tl-payout-item strong {
    font-size: .86rem;
    color: var(--text);
    overflow-wrap: anywhere;
}
.tl-payout-status {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--text-muted);
}
.tl-payout-status span {
    font-weight: 700;
    color: var(--text);
}
@media (max-width: 720px) {
    .tl-payout-grid { grid-template-columns: 1fr; }
}

/* ── Site ads (inline cards, footer strip, stream preroll) ─────────────── */
.stream-card.tl-ad-card .tl-ad-card__thumb {
    outline: 1px solid rgba(245, 185, 65, 0.35);
}
.stream-card.tl-ad-card .tl-ad-card__tag {
    background: rgba(245, 185, 65, 0.95) !important;
    color: #1a1208 !important;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.stream-card.tl-ad-card .tl-ad-card__title {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    word-break: break-word;
}
.tl-ad-card__hint {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    word-break: break-word;
}

/* Text placeholder when no ad image (navy + gold) */
.stream-card.tl-ad-card .tl-ad-card__thumb--ph {
    background: linear-gradient(165deg, #0b1220 0%, #1e293b 55%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-ad-ph-stream {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 12px;
    width: 100%;
    height: 100%;
    min-height: 120px;
    box-sizing: border-box;
}
.tl-ad-ph-stream__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #e8c547;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.tl-ad-ph-stream__sub {
    margin-top: 8px;
    font-size: 0.72rem;
    color: rgba(232, 197, 71, 0.82);
    font-weight: 600;
}
.category-card-scroll--ad .tl-ad-ph-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 0;
    background: linear-gradient(165deg, #0b1220 0%, #1e293b 55%, #0f172a 100%);
    border-radius: inherit;
}
.category-card-scroll--ad > .category-box-art {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    display: block;
}
.tl-ad-ph-cat__title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #e8c547;
}
.tl-ad-ph-cat__sub {
    margin-top: 6px;
    font-size: 0.68rem;
    color: rgba(232, 197, 71, 0.8);
    font-weight: 600;
}

.section-bottom-ad,
.section-bottom-strip {
    padding-top: 4px;
    padding-bottom: 8px;
}
.tl-bottom-horizontal-ad-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 12px;
}
.tl-bottom-horizontal-ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(1100px, 100%);
    text-decoration: none;
    color: inherit;
}
.tl-bottom-horizontal-ad img {
    width: min(1100px, 100%);
    max-width: 100%;
    height: auto;
    max-height: min(200px, 28vh);
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--line, #2e2e34);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.tl-bottom-horizontal-ad__txt {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

/* Yektanet slots — neutral wrappers (no ad/advertise/ads/banner in class names) */
.tl-yn-slot {
    width: 100%;
    min-height: 1px;
}
.tl-yn-slot--grid {
    grid-column: span 1;
}

/* Home / browse live grid: same shell as stream-card */
.stream-card.tl-yn-stream-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    cursor: default;
    text-decoration: none;
    color: inherit;
}
.stream-card.tl-yn-stream-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 86, 245, 0.7);
}
body.page-browse .stream-card.tl-yn-stream-card:hover {
    transform: none !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
.tl-yn-stream-card__embed {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: var(--bg-elev-1);
}
.stream-card.tl-yn-stream-card .tl-yn-slot--grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: transparent;
}
.stream-card.tl-yn-stream-card [id^="pos-"] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--bg-elev-1) !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}
.stream-card.tl-yn-stream-card [id^="pos-"] > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: var(--bg-elev-1) !important;
    box-sizing: border-box;
}
.stream-card.tl-yn-stream-card [id^="pos-"] > * > *:first-child {
    flex-shrink: 0;
    background: var(--bg-elev-1) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line) !important;
}
.stream-card.tl-yn-stream-card [id^="pos-"] img,
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="thumb"] img,
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="image"] img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.stream-card.tl-yn-stream-card [id^="pos-"] a {
    color: inherit;
    text-decoration: none;
}
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="title"],
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="Title"],
.stream-card.tl-yn-stream-card [id^="pos-"] h3,
.stream-card.tl-yn-stream-card [id^="pos-"] h4 {
    color: var(--text) !important;
}
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="desc"],
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="subtitle"],
.stream-card.tl-yn-stream-card [id^="pos-"] [class*="brand"] {
    color: var(--text-muted) !important;
}

/* Google AdSense slots (neutral wrapper class names) */
.tl-as-slot {
    width: 100%;
    min-height: 1px;
}
.tl-as-slot--grid {
    grid-column: span 1;
}
.stream-card.tl-as-stream-card,
.stream-card.tl-as-stream-card:hover {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    cursor: default;
    text-decoration: none;
    color: inherit;
}
.stream-card.tl-as-stream-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 86, 245, 0.7);
}
body.page-browse .stream-card.tl-as-stream-card:hover {
    transform: none !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}
.tl-as-stream-card__embed {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: var(--bg-elev-1);
}
.stream-card.tl-as-stream-card .tl-as-slot--grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    background: transparent;
}
.stream-card.tl-as-stream-card ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-height: 250px;
    background: var(--bg-elev-1);
}
.tl-as-slot--bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 12px;
}
.tl-as-slot--bottom ins.adsbygoogle {
    display: block;
    width: min(1100px, 100%);
    min-height: 90px;
}
.tl-as-slot--stream {
    width: 100%;
    max-width: min(960px, 100%);
    margin: 0 auto;
}
.tl-as-slot--stream ins.adsbygoogle {
    display: block;
    width: 100%;
    min-height: 90px;
}
.tl-as-slot--category {
    flex: 0 0 auto;
    min-width: 140px;
}
.tl-as-slot--category ins.adsbygoogle {
    display: block;
    min-width: 140px;
    min-height: 200px;
}

.tl-yn-slot--category {
    flex: 0 0 auto;
    min-width: 140px;
}
.tl-yn-slot--bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 12px;
}
.tl-yn-slot--bottom > div,
.tl-yn-slot--bottom > iframe {
    max-width: min(1100px, 100%);
}
.tl-yn-slot--stream {
    width: 100%;
    max-width: min(960px, 100%);
    margin: 0 auto;
}
@media (max-width: 640px) {
    .tl-stream-inline-ad {
        flex-direction: column;
        align-items: stretch;
    }
    .tl-stream-inline-ad img {
        width: 100%;
        max-width: none;
        max-height: 100px;
    }
}

.category-card-scroll--ad,
.category-card-scroll--ad:hover {
    text-decoration: none;
}
.category-card-scroll--ad .category-info span {
    color: var(--text-muted);
}

.tl-add-page-body a {
    color: var(--brand, #1e56f5);
}

/* Streamer admin warning (streamer-only chat row) */
.chat-message.chat-msg-streamer-warn {
    display: block;
    grid-template-columns: none;
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.55), rgba(30, 30, 35, 0.9)) !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    border-radius: 8px;
    padding: 8px 10px !important;
    margin: 4px 0;
}
.chat-msg-streamer-warn .chat-msg-streamer-warn-meta {
    font-size: 0.7rem;
    color: #fecaca;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.3;
}
.chat-msg-streamer-warn .chat-msg-streamer-warn-text {
    font-size: 0.86rem;
    color: #fff;
    line-height: 1.4;
    word-break: break-word;
}
.chat-msg-streamer-warn-evidence {
    display: block;
    margin-top: 8px;
}
.chat-msg-streamer-warn-evidence img {
    max-width: min(100%, 280px);
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* Pinned red bar for streamer (under pinned bar) */
.streamer-warn-bar {
    background: linear-gradient(90deg, #7f1d1d, #1f1414);
    border-bottom: 1px solid rgba(252, 165, 165, 0.4);
    padding: 8px 12px;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.streamer-warn-bar__inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.streamer-warn-bar__ico {
    color: #fecaca;
    margin-top: 2px;
    flex-shrink: 0;
}
.streamer-warn-bar__body {
    min-width: 0;
    flex: 1;
}
.streamer-warn-bar__meta {
    font-size: 0.7rem;
    color: #fecdd3;
    font-weight: 700;
    margin-bottom: 2px;
}
.streamer-warn-bar__text {
    color: #fff;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.streamer-warn-bar__evidence {
    display: block;
    margin-top: 8px;
}
.streamer-warn-bar__evidence img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.35);
}
.streamer-warn-bar__dismiss {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
    background: none;
    border: none;
    color: #fecaca;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}
.streamer-warn-bar__dismiss:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ── Chat Ban / Timeout Banner ─────────────────────────────────────────── */
#chatBanBanner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .35);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 8px;
    font-size: .84rem;
    line-height: 1.5;
    color: #fca5a5;
    animation: tl-ban-in .25s ease;
}
#chatBanBanner i {
    font-size: 1.1rem;
    color: #f87171;
    flex-shrink: 0;
    margin-top: 1px;
}
#chatBanBanner .ban-msg {
    flex: 1;
}
#chatBanBanner .ban-countdown {
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
@keyframes tl-ban-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Disabled chat input when banned */
.chat-input:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: rgba(255,255,255,.03);
}
.chat-send-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Achievements / analytics 30-day notice ── */
.ach-window-note,
.analytics-window-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, .25);
    background: rgba(99, 102, 241, .08);
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.45;
}
.ach-window-note i,
.analytics-window-note i {
    color: var(--dash-accent, #6366f1);
    flex-shrink: 0;
}

/* ── Payout tier banner (monetize tab) ── */
.tl-payout-tier-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    font-size: .84rem;
    color: var(--text-muted);
}
.tl-payout-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: rgba(139, 92, 246, .18);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, .35);
}

/* ── OBS Overlay tab ── */
.tl-obs-tab { display: flex; flex-direction: column; gap: 14px; }
.tl-obs-hero { padding: 18px 20px; }
.tl-obs-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tl-obs-hero-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 340px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.tl-obs-hero-tip i { color: #3b82f6; margin-top: 2px; }
.tl-obs-tiles-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tl-obs-links-card h3,
.tl-obs-goals-card h3 { margin: 0 0 12px; font-size: 1rem; }
.tl-obs-goal-link { margin-top: 12px; }
.tl-obs-goal-link-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tl-obs-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .88rem; }

/* Dashboard streamer announcements (red banner) */
.tl-dash-ann-banner { margin: 0 0 16px; }
.tl-dash-ann-card {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.55), rgba(153, 27, 27, 0.35));
    box-shadow: 0 4px 18px rgba(127, 29, 29, 0.25);
}
.tl-dash-ann-label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fecaca;
}
.tl-dash-ann-label i { margin-inline-end: 6px; }
.tl-dash-ann-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #fff;
    font-family: "Vazirmatn", "Dana", Tahoma, sans-serif;
}

/* ============================================================
   Desktop: iOS liquid-glass UI
   — floating capsule header, collapsible search, glass sidebar
   ============================================================ */
@media (min-width: 769px) {
    /* Bar itself is a transparent click-through strip;
       the centered .navbar-container is the glass capsule */
    .navbar {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        pointer-events: none;
        padding-top: 10px;
    }
    .navbar-container {
        pointer-events: auto;
        position: relative;
        isolation: isolate;
        min-height: 62px;
        border-radius: 28px;
        padding: 6px 18px;
        box-sizing: border-box;
        background: rgba(16, 16, 19, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.16);
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.35),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    .navbar-container::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .navbar-container {
            background: rgba(14, 14, 16, 0.97);
        }
    }

    /* ── Search: lives next to the action buttons (end side),
       collapsed to a round magnifier, expands toward the middle ── */
    .navbar-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .navbar-center {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        margin-inline-start: auto; /* push search + buttons to the end */
    }
    .navbar-center .search-form {
        width: max-content;
        margin: 0;
        background: transparent;
        border-color: transparent;
    }
    .search-form:focus-within {
        border-color: transparent;
        box-shadow: none;
    }
    .search-input {
        width: 0;
        flex: 0 1 auto;
        min-width: 0;
        padding-inline: 0;
        opacity: 0;
        transition: width .4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity .25s ease,
                    padding .35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .search-btn {
        width: 36px;
        height: 36px;
        align-self: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-muted, #9ca3af);
        transition: border-radius .3s ease, background .2s ease, color .2s ease;
    }
    .search-btn:hover {
        background: rgba(255, 255, 255, 0.14);
        color: var(--text, #e5e7eb);
    }
    .navbar.search-open .navbar-center .search-form {
        background: rgba(16, 16, 19, 0.4);
        border-color: var(--line);
    }
    .navbar.search-open .search-input {
        width: min(280px, 24vw);
        opacity: 1;
        padding-inline: 13px;
    }
    .navbar.search-open .search-btn {
        height: auto;
        align-self: stretch;
        border-radius: 0 12px 12px 0;
    }
    html[dir="rtl"] .navbar.search-open .search-btn {
        border-radius: 12px 0 0 12px;
    }
    .navbar.search-open .search-form:focus-within {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(30, 86, 245, 0.2);
    }

    /* Bell button: glass like the search button */
    .notification-bell {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.06);
    }

    /* Left sidebar: floating rounded glass capsule like the header */
    .tl-left-sidebar {
        margin-block: 10px;
        margin-inline-start: 10px;
        border-radius: 24px;
        border: 1px solid var(--line);
        top: 84px;
        height: calc(100vh - 94px);
    }
}

/* ── Glass left sidebar ── */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-left-sidebar {
        background: rgba(18, 18, 22, 0.45);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.16);
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    /* ── Glass search results dropdown ── */
    .search-results {
        background: rgba(24, 24, 28, 0.6);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    /* ── Glass user dropdown ── */
    .user-dropdown {
        background: rgba(24, 24, 28, 0.55);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    /* ── Glass notification + Tele dropdowns ── */
    .notification-dropdown,
    .tele-dropdown {
        background: rgba(24, 24, 28, 0.6);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
            0 16px 48px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    /* ── Glass Tele buy/history modal ── */
    .tele-modal-box {
        background: rgba(22, 22, 27, 0.65);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow:
            0 24px 64px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* ============================================================
   In-site live toast notifications (streamer went live)
   ============================================================ */
.tl-live-toasts {
    position: fixed;
    top: calc(86px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 4500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 24px));
    pointer-events: none;
}
.tl-live-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(22, 22, 27, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: var(--text, #efeff1);
    pointer-events: auto;
    cursor: pointer;
    transform: translateX(130%);
    opacity: 0;
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-live-toast {
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tl-live-toast { background: rgba(24, 24, 27, 0.97); }
}
.tl-live-toast.show {
    transform: translateX(0);
    opacity: 1;
}
.tl-live-toast.hide {
    transform: translateX(130%);
    opacity: 0;
}
.tl-live-toast-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #f43f5e;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.35);
}
.tl-live-toast-body {
    flex: 1;
    min-width: 0;
}
.tl-live-toast-name {
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-live-toast-msg {
    font-size: .76rem;
    color: var(--text-muted, #a6a6b2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-live-toast-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    background: #f43f5e;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
}
.tl-live-toast-live .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: tl-spotlight-pulse 1.2s ease-in-out infinite;
}
.tl-live-toast-x {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted, #a6a6b2);
    cursor: pointer;
    font-size: .85rem;
    padding: 4px 6px;
    border-radius: 8px;
}
.tl-live-toast-x:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
    .tl-live-toasts {
        top: calc(70px + env(safe-area-inset-top, 0px));
        right: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tl-live-toast { transition: opacity .2s ease; transform: none; }
    .tl-live-toast.hide { transform: none; }
}

/* ============================================================
   /live mobile: same floating glass capsule header as the rest
   (overrides the full-width body.page-stream navbar rules)
   ============================================================ */
@media (max-width: 768px) {
    body.page-stream .navbar {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        padding-top: 0 !important;
        border-radius: 26px;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top-color: rgba(255, 255, 255, 0.16) !important;
        isolation: isolate;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    body.page-stream .navbar::before {
        border-radius: inherit;
    }
    body.page-stream .navbar .navbar-container {
        min-height: 52px !important;
        width: 100% !important;
        padding: 4px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: nowrap; /* single row — never stack over the player */
        align-items: center;
        justify-content: space-between !important;
        gap: 12px;
    }
    body.page-stream .navbar.mob-search-open .navbar-container {
        flex-wrap: wrap; /* expanded search needs its own row */
    }
    html[dir="rtl"] body.page-stream .navbar-container > .navbar-right { order: 2; }
    html[dir="rtl"] body.page-stream .navbar-container > .navbar-left { order: 1; }
    body.page-stream .navbar.mob-search-open .navbar-center {
        order: 10;
    }
    /* Player clears the floating capsule (8px gap + 52px bar + breathing) */
    body.page-stream .main-content {
        padding-top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    }
    /* ── Glass stream action buttons (viewers / follow / sub / donate / bell / more) ── */
    body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn,
    body.page-stream .stream-page .mob-info-bar-actions .viewer-count,
    body.page-stream .stream-page .player-mob-viewer {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-top-color: rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
}

/* ============================================================
   /live mobile: glass collapsed chat drawer bar
   (hint bar only shows while the drawer is CLOSED)
   ============================================================ */
@media (max-width: 900px) {
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel {
        background: rgba(30, 30, 38, 0.42) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top-color: rgba(255, 255, 255, 0.22) !important;
        border-bottom: none !important;
        box-shadow:
            0 -8px 28px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel {
            backdrop-filter: blur(28px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
        }
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel {
            background: rgba(24, 24, 30, 0.96) !important;
        }
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint,
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-panel-toggle-hint {
        background: transparent !important;
        border-top: none !important;
    }
    /* Closed dock: floating rounded capsule like the main bottom nav.
       width:auto so left+right insets define it (a width:100% elsewhere
       was pushing it past the right edge) */
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel {
        border-radius: 28px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow:
            0 12px 36px rgba(0, 0, 0, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #tlMobChatDock .chat-panel-toggle-hint {
        border-radius: 28px !important;
        min-height: 48px !important;
        padding-bottom: 8px !important;
    }
    /* Drawer open: smooth slide-up instead of an instant jump
       (top animates from auto → 38vh which browsers can't interpolate) */
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock,
    body.page-stream.tl-mob-chat-drawer-open .tl-sk-mount--stream-chat {
        animation: tlChatDrawerSlideUp .38s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
@keyframes tlChatDrawerSlideUp {
    from { transform: translateY(14%) translateZ(0); opacity: 0.45; }
    to { transform: translateY(0) translateZ(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-stream.tl-mob-chat-drawer-open #tlMobChatDock,
    body.page-stream.tl-mob-chat-drawer-open .tl-sk-mount--stream-chat {
        animation: none !important;
    }
}

/* ============================================================
   Chat header top row: pinned to the far LEFT (title first)
   ============================================================ */
.chat-header-top {
    direction: ltr !important;
    justify-content: flex-start !important;
}
.chat-header-top h3 {
    direction: ltr !important;
    text-align: left !important;
}
.chat-header-top .chat-header-actions,
.chat-header-top .chat-hdr-actions-slot--mob {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ============================================================
   Header buttons: glass like the search/bell buttons
   ============================================================ */
.mob-hdr-btn,
.tl-mem-nav-btn,
.tele-pill,
.notification-bell,
.tl-lang-trigger,
.tl-lang-trigger--guest,
.tl-lang-trigger--menu {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.tl-mem-nav-btn:hover,
.tele-pill:hover,
.notification-bell:hover,
.tl-lang-trigger:hover,
.tl-lang-trigger--guest:hover,
.tl-lang-trigger--menu:hover,
.tl-lang-picker--guest.is-open .tl-lang-trigger--guest,
.tl-lang-picker.is-open .tl-lang-trigger {
    background: rgba(255, 255, 255, 0.14) !important;
}
/* keep the brand flash on tap */
.mob-hdr-btn:active {
    background: var(--brand, #1e56f5) !important;
}
[data-theme="light"] .mob-hdr-btn,
[data-theme="light"] .tl-mem-nav-btn,
[data-theme="light"] .tele-pill,
[data-theme="light"] .notification-bell,
[data-theme="light"] .tl-lang-trigger,
[data-theme="light"] .tl-lang-trigger--guest,
[data-theme="light"] .tl-lang-trigger--menu {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   Profile page: rounded hero banner, channel bar and tabs row
   ============================================================ */
.tl-offline-hero,
.tl-live-hero {
    border-radius: 18px;
    overflow: hidden;
    margin: 12px 12px 0;
    width: auto !important; /* base width:100% would overflow past the side margins */
}
.tl-hero-gradient {
    border-radius: inherit;
}
.tl-channel-bar {
    border-radius: 16px;
    border: 1px solid var(--line);
    margin: 14px 12px 0;
}
.tl-tabs-row {
    border-radius: 16px;
    border: 1px solid var(--line);
    margin: 10px 12px 0;
}

/* ── Channel bar buttons: site palette + glass ── */
.tl-bar-actions .btn {
    border-radius: 12px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.tl-bar-actions .btn-outline {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text, #efeff1) !important;
}
.tl-bar-actions #followBtn:not(.btn-following) {
    background: rgba(30, 86, 245, 0.8) !important;
    border: 1px solid rgba(82, 128, 255, 0.6) !important;
    color: #fff !important;
}
.tl-bar-actions .btn-following {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text, #efeff1) !important;
}
.tl-bar-actions .btn-following:hover {
    background: rgba(244, 63, 94, 0.16) !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
    color: #fb7185 !important;
}
.tl-bar-actions .tl-btn-donate {
    background: rgba(244, 63, 94, 0.16) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    color: #fb7185 !important;
}
.tl-bar-actions .tl-btn-donate:hover {
    background: rgba(244, 63, 94, 0.28) !important;
    color: #fff !important;
}
.tl-bar-actions .tl-btn-subscribe {
    background: rgba(30, 86, 245, 0.22) !important;
    border: 1px solid rgba(30, 86, 245, 0.55) !important;
    color: #8fadff !important;
}
.tl-bar-actions .tl-btn-subscribe:hover {
    background: rgba(30, 86, 245, 0.38) !important;
    color: #fff !important;
    filter: none;
}
.tl-bar-actions .tl-btn-subbed {
    background: rgba(34, 197, 94, 0.18) !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    color: #4ade80 !important;
}

/* /live mob-info-bar — match tl-channel-bar button colors */
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn#followBtn:not(.btn-following) {
    background: rgba(30, 86, 245, 0.8) !important;
    border: 1px solid rgba(82, 128, 255, 0.6) !important;
    color: #fff !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.btn-following,
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn#followBtn.btn-following {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text, #efeff1) !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-donate {
    background: rgba(244, 63, 94, 0.16) !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    color: #fb7185 !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-donate:hover,
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-donate:active {
    background: rgba(244, 63, 94, 0.28) !important;
    color: #fff !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-subscribe {
    background: rgba(30, 86, 245, 0.22) !important;
    border: 1px solid rgba(30, 86, 245, 0.55) !important;
    color: #8fadff !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-subscribe:hover,
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-subscribe:active {
    background: rgba(30, 86, 245, 0.38) !important;
    color: #fff !important;
}
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-subbed,
body.page-stream .stream-page .mob-info-bar-actions .mob-info-btn.tl-btn-subbed.active {
    background: rgba(34, 197, 94, 0.18) !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    color: #4ade80 !important;
}
[data-theme="light"] .tl-bar-actions .btn-outline,
[data-theme="light"] .tl-bar-actions .btn-following {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text, #18181b) !important;
}

/* Live hero: clip the video link + dark overlay to the rounded shape */
.tl-live-hero .tl-live-video-link {
    border-radius: 18px;
    overflow: hidden;
}

/* ============================================================
   Subscription modal: liquid glass (profile + stream pages)
   ============================================================ */
.sub-modal-overlay#subModalOverlay {
    background: rgba(0, 0, 0, 0.55) !important;
}
.sub-modal-overlay .sub-modal {
    background: rgba(22, 22, 27, 0.65) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sub-modal-overlay .sub-modal {
        background: rgba(24, 24, 28, 0.97) !important;
    }
}
[data-theme="light"] .sub-modal-overlay .sub-modal {
    background: rgba(252, 252, 253, 0.72) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Short monitors: compact layout so the whole modal fits centered (no scroll) */
@media (max-height: 920px) and (min-width: 769px) {
    .sub-modal-overlay .sub-modal {
        max-height: 96vh !important;
    }
    .sub-modal-header {
        padding: 12px 20px 10px !important;
    }
    .sub-modal-avatar {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 4px !important;
        border-width: 2px !important;
    }
    .sub-modal-channelname { font-size: .95rem !important; }
    .sub-modal-subtitle { margin-top: 2px !important; font-size: .76rem !important; }
    .sub-modal-body {
        padding: 12px 20px 14px !important;
    }
    .sub-tier-tabs { margin-bottom: 10px !important; }
    .sub-tier-tab { padding: 6px 5px !important; }
    #subTierEmojiBox,
    #subBadgePreviewBox {
        padding: 6px 10px !important;
        margin-bottom: 10px !important;
    }
    .sub-dur-wrap { margin-bottom: 10px !important; }
    .sub-dur-pill { padding: 6px 12px !important; }
    .sub-price-box { margin-bottom: 10px !important; padding: 10px 14px !important; }
    .sub-benefits {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        margin-bottom: 10px !important;
    }
    .sub-benefit-row { font-size: .76rem !important; }
    .sub-modal-cta { padding: 10px !important; }
    .sub-modal-footer-note { margin-top: 6px !important; font-size: .7rem !important; }
}

/* ============================================================
   /live: site drawer must stay above the open chat + raised navbar
   (chat dock 99990, navbar climbs to 100050 when chat is open)
   ============================================================ */
body.page-stream .mob-drawer {
    z-index: 100300 !important;
}
body.page-stream .mob-drawer-overlay {
    z-index: 100290 !important;
}

/* ============================================================
   Dashboard: glass tab bar + glass stream tab
   ============================================================ */
body .dash-tabs {
    margin-top: 14px;
    background: rgba(26, 26, 32, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
#tab-stream .dash-card {
    background: rgba(26, 26, 32, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
#tab-stream .dash-card:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}
#tab-stream .analytics-stat-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] body .dash-tabs,
[data-theme="light"] #tab-stream .dash-card {
    background: rgba(252, 252, 253, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #tab-stream .analytics-stat-box {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* ── Stream tab inner content: matching glass ── */
/* Stream Settings form fields */
#tab-stream .stream-form input,
#tab-stream .stream-form select,
#tab-stream .stream-form textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    color: var(--text, #efeff1);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
#tab-stream .stream-form input:focus,
#tab-stream .stream-form select:focus,
#tab-stream .stream-form textarea:focus {
    border-color: rgba(30, 86, 245, 0.6) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 0 0 3px rgba(30, 86, 245, 0.18);
    outline: none;
}
#tab-stream .stream-form select option {
    background: #1a1a20;
}

/* Bitrate & quality guide table */
#tab-stream .tl-quality-guide-table th {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
#tab-stream .tl-quality-guide-table td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
#tab-stream .tl-quality-guide-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Right column: accordion cards (stream key, etc.) */
#tab-stream .stream-accordion-card {
    background: rgba(26, 26, 32, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#tab-stream .stream-accordion-head {
    background: transparent !important;
}
#tab-stream .stream-accordion-head:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
#tab-stream .stream-accordion-body {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
#tab-stream .stream-accordion-body input,
#tab-stream .stream-accordion-body .key-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    color: var(--text, #efeff1);
}

/* Light theme */
[data-theme="light"] #tab-stream .stream-form input,
[data-theme="light"] #tab-stream .stream-form select,
[data-theme="light"] #tab-stream .stream-form textarea,
[data-theme="light"] #tab-stream .stream-accordion-body input,
[data-theme="light"] #tab-stream .stream-accordion-body .key-input {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text, #18181b);
}
[data-theme="light"] #tab-stream .stream-form select option {
    background: #fff;
}
[data-theme="light"] #tab-stream .stream-accordion-card {
    background: rgba(252, 252, 253, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #tab-stream .stream-accordion-head:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] #tab-stream .stream-accordion-body {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #tab-stream .tl-quality-guide-table th {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #tab-stream .tl-quality-guide-table td {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── Dashboard shell: rounded corners ── */
body .tl-dash-page .dashboard.tl-dash-inner {
    border-radius: 20px;
    overflow: clip;
}

/* ── Quality guide table: fully glass ── */
#tab-stream .tl-quality-guide-table {
    background: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
#tab-stream .tl-quality-guide-table tbody tr {
    background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] #tab-stream .tl-quality-guide-table {
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] #tab-stream .tl-quality-guide-table tbody tr {
    background: rgba(0, 0, 0, 0.015);
}

/* ── +18 toggle: glass + everything on one line ── */
#tab-stream .tl-mature-18-toggle-wrap {
    background: rgba(168, 85, 247, 0.07) !important;
    border: 1px solid rgba(168, 85, 247, 0.28) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#tab-stream .tl-mature-18-label {
    flex-wrap: nowrap !important;
    align-items: center !important;
}
#tab-stream .tl-mature-18-text {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab-stream .tl-mature-18-text .tl-mature-18-chip {
    flex-shrink: 0;
}
#tab-stream .tl-mature-18-hint {
    margin-inline-start: 56px; /* aligns under the text (switch 46px + gap) */
}
[data-theme="light"] #tab-stream .tl-mature-18-toggle-wrap {
    background: rgba(168, 85, 247, 0.06) !important;
    border-color: rgba(168, 85, 247, 0.25) !important;
}

/* ── Category picker: glass + box-art thumbnails ── */
#tab-stream .cat-picker-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    min-height: 44px;
}
#tab-stream .cat-picker-btn:hover,
#tab-stream .cat-picker-btn:focus {
    border-color: rgba(30, 86, 245, 0.6) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}
#tab-stream .cat-picker-dropdown {
    background: rgba(24, 24, 30, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-radius: 14px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#tab-stream .cat-picker-search-wrap,
#tab-stream .cat-picker-clear {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
#tab-stream .cat-picker-clear:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
#tab-stream .cat-picker-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
    align-items: center !important;
}
#tab-stream .cat-picker-item:hover {
    background: rgba(30, 86, 245, 0.14) !important;
    border-color: rgba(30, 86, 245, 0.5) !important;
}
#tab-stream .cat-picker-item.active {
    border-color: rgba(30, 86, 245, 0.7) !important;
    outline: none !important;
    background: rgba(30, 86, 245, 0.18) !important;
}
.cat-pick-img {
    width: 30px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.cat-pick-img--preview {
    width: 22px;
    height: 30px;
    border-radius: 5px;
}
[data-theme="light"] #tab-stream .cat-picker-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] #tab-stream .cat-picker-dropdown {
    background: rgba(252, 252, 253, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #tab-stream .cat-picker-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}
[data-theme="light"] #tab-stream .cat-picker-search-wrap,
[data-theme="light"] #tab-stream .cat-picker-clear {
    border-bottom-color: rgba(0, 0, 0, 0.07) !important;
}

/* ============================================================
   Stream page: glass channel panels + goal strip + mobile tab bar
   ============================================================ */
.stream-panel-item {
    background: rgba(26, 26, 32, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color .18s;
}
.stream-panel-item:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}
.stream-panels-section > .tl-goal-strip,
.tl-goal-strip {
    background: rgba(26, 26, 32, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mobile-tab-bar {
    background: rgba(20, 20, 25, 0.55) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mobile-tab-bar .mob-tab-nav {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="light"] .stream-panel-item,
[data-theme="light"] .stream-panels-section > .tl-goal-strip,
[data-theme="light"] .tl-goal-strip {
    background: rgba(252, 252, 253, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .mobile-tab-bar {
    background: rgba(252, 252, 253, 0.6) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .mobile-tab-bar .mob-tab-nav {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================
   Channel Panels editor: glass modal + 3-column drag grid
   ============================================================ */
.panels-modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}
.panels-modal {
    background: rgba(22, 22, 27, 0.72) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.1) !important;
    width: min(1100px, 96vw);
    box-shadow:
        0 -8px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.panels-modal-head,
.panels-modal-foot {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.panels-modal-foot {
    background: rgba(255, 255, 255, 0.03) !important;
}
/* Default: 3 columns — items flow between columns via the drag handle */
#panelsModalBody {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
#panelsModalBody .panels-modal-list-hint,
#panelsModalBody > p {
    grid-column: 1 / -1;
}
#panelsModalBody .panel-editor-item[data-width="full"]  { grid-column: span 3; }
#panelsModalBody .panel-editor-item[data-width="half"]  { grid-column: span 2; }
#panelsModalBody .panel-editor-item[data-width="third"] { grid-column: span 1; }
@media (max-width: 900px) {
    #panelsModalBody {
        grid-template-columns: 1fr;
    }
    #panelsModalBody .panel-editor-item {
        grid-column: span 1 !important;
    }
}
/* Glass editor cards + fields */
.panel-editor-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.panel-editor-item.is-drag-over {
    background: rgba(30, 86, 245, 0.12) !important;
    border-color: rgba(30, 86, 245, 0.6) !important;
}
.panel-editor-width-badge {
    background: rgba(255, 255, 255, 0.08) !important;
}
#panelsModal input.pe-field,
#panelsModal textarea.pe-field,
.panels-modal-body .pe-field,
.panels-modal-body .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
#panelsModal .pe-field:focus,
.panels-modal-body .pe-field:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(30, 86, 245, 0.6) !important;
}
.pe-upload-dropzone {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
.pe-upload-dropzone:hover,
.pe-upload-dropzone:focus-visible {
    background: rgba(30, 86, 245, 0.08) !important;
    border-color: rgba(30, 86, 245, 0.55) !important;
}
[data-theme="light"] .panels-modal {
    background: rgba(252, 252, 253, 0.78) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .panel-editor-item {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #panelsModal input.pe-field,
[data-theme="light"] #panelsModal textarea.pe-field {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================
   Chat menus: glass cheer (Tele) panel, emoji pickers, slash panel
   ============================================================ */
.chat-cheer-panel {
    background: rgba(24, 24, 30, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.ccp-head {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.ccp-amt,
.ccp-quick-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.ccp-amt.sel {
    background: rgba(30, 86, 245, 0.85) !important;
    border-color: rgba(82, 128, 255, 0.7) !important;
}
.chat-emoji-picker,
.emoji-picker {
    background: rgba(24, 24, 30, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.emoji-picker__body {
    background: transparent !important;
}
.chat-slash-panel {
    background: rgba(24, 24, 30, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .chat-cheer-panel,
[data-theme="light"] .chat-emoji-picker,
[data-theme="light"] .emoji-picker,
[data-theme="light"] .chat-slash-panel {
    background: rgba(252, 252, 253, 0.78) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .ccp-amt,
[data-theme="light"] .ccp-quick-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* ── Site footer (floating glass capsule — matches header / mob nav) ─────── */
.site-footer {
    margin-top: auto;
    padding: 20px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: none;
}
.site-footer-wrap {
    width: min(1500px, 96vw);
    margin: 0 auto;
}
.site-footer-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 26px;
    padding: 26px 22px 18px;
    background: rgba(22, 22, 26, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.site-footer-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    border-radius: inherit;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.site-footer-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        transparent 60%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-footer-glass {
        background: rgba(24, 24, 27, 0.96);
    }
}
.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
}
.site-footer-heading {
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
    text-transform: uppercase;
}
.site-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.site-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer-links a:hover {
    color: #fff;
}
.site-footer-links a i {
    width: 16px;
    text-align: center;
    opacity: 0.85;
}
.site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.site-footer-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(34, 158, 217, 0.35);
    background: rgba(34, 158, 217, 0.12);
    color: #229ED9;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.site-footer-social-btn:hover {
    background: rgba(34, 158, 217, 0.2);
    transform: translateY(-1px);
}
.site-footer-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.site-footer-contact p {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.site-footer-contact p:last-child { margin-bottom: 0; }
.site-footer-lbl {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.site-footer-phone {
    color: var(--brand-soft);
    text-decoration: none;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}
.site-footer-phone:hover { text-decoration: underline; }
.site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
}
.site-footer-brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.15;
}
.site-footer-version {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(147, 197, 253, 0.9);
    text-transform: uppercase;
}
.site-footer-brand-name span span { color: var(--brand-soft); }
.site-footer-brand span span { color: var(--brand-soft); }
.site-footer-brand img {
    border-radius: 10px;
    object-fit: contain;
}
.site-footer-trust.about-trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    align-items: center;
}
.site-footer-trust.about-trust-logos > a,
.site-footer-trust.about-trust-logos > div {
    flex-shrink: 0;
}
.about-trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}
.about-trust-logos > a,
.about-trust-logos > div {
    flex-shrink: 0;
}
.about-zp-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#zarinpal,
#footerZarinpal {
    margin: auto;
    min-height: 44px;
    min-width: 72px;
}
#zarinpal img,
#footerZarinpal img {
    width: 80px;
    height: auto;
}
.about-zp-fallback {
    display: none;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 160px;
    line-height: 1.35;
    align-items: center;
    gap: 6px;
    flex-direction: column;
    text-decoration: none;
}
.about-zp-fallback i {
    color: var(--brand);
    font-size: 1.1rem;
}
.site-footer-copy {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
@media (max-width: 960px) {
    .site-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .site-footer {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    .site-footer-glass {
        padding: 22px 16px 14px;
    }
}
@media (max-width: 560px) {
    .site-footer { padding: 14px 10px calc(84px + env(safe-area-inset-bottom, 0px)); }
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .site-footer-col--brand { order: -1; }
}
[data-theme="light"] .site-footer-glass {
    background: rgba(252, 252, 253, 0.72);
    border-color: rgba(0, 0, 0, 0.08);
    border-top-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .site-footer-copy {
    border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .site-footer-social-btn {
    background: rgba(34, 158, 217, 0.08);
}

/* ── Home page — alternating section bands ───────────────────────────────── */
body.page-home .tl-home-band {
    position: relative;
    padding-top: 28px;
    padding-bottom: 28px;
}
body.page-home {
    overflow-x: clip;
}
body.page-home::after {
    inset: 0;
    animation: none;
    transform: none;
}
body.page-home .tl-home-band::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
}
body.page-home .tl-home-band--soft::before {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.page-home .tl-home-band--tint::before {
    background: linear-gradient(135deg, rgba(30, 86, 245, 0.07) 0%, rgba(82, 128, 255, 0.03) 55%, transparent 100%);
    border-top: 1px solid rgba(30, 86, 245, 0.09);
    border-bottom: 1px solid rgba(30, 86, 245, 0.06);
}
[data-theme="light"] body.page-home .tl-home-band--soft::before {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] body.page-home .tl-home-band--tint::before {
    background: linear-gradient(135deg, rgba(30, 86, 245, 0.06) 0%, rgba(30, 86, 245, 0.02) 100%);
    border-color: rgba(30, 86, 245, 0.1);
}
@media (max-width: 768px) {
    body.page-home .tl-home-band {
        padding-top: 22px;
        padding-bottom: 22px;
    }
}

/* ── GPU saver: live watch page (video decode + chat already heavy) ─────────── */
body.page-stream::after {
    display: none !important;
}

body.page-stream .tl-sup-track,
body.page-stream .tl-sup-track--in,
body.page-stream .tl-sup-track--out,
body.page-stream .tl-stream-sk-shimmer,
body.page-stream .page-loader,
body.page-stream .tl-sk-layer::after {
    animation: none !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.page-stream .chat-panel,
    body.page-stream .chat-input-area,
    body.page-stream .navbar,
    body.page-stream .tl-sup-glass,
    body.page-stream .player-mob-tray,
    body.page-stream .mob-tab-bar,
    body.page-stream .mob-info-bar,
    body.page-stream .tl-glass,
    body.page-stream .chat-drawer-hint,
    body.page-stream .player-quality-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

body.page-stream .navbar {
    background: #0e0e10;
}

body.page-stream .chat-panel {
    background: var(--bg-elev-1, #141418);
}

body.page-stream .chat-messages {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

body.page-stream .hls-video-player {
    object-fit: contain;
}

body.page-stream *,
body.page-stream *::before,
body.page-stream *::after {
    will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none !important;
        opacity: 0.85;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}