/* --- 2026 dashboard redesign pass (twitch/kick-like shell) --- */
body .tl-dash-page .dashboard.tl-dash-inner {
    background: linear-gradient(180deg, rgba(20,22,35,.9), rgba(12,13,21,.95));
    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 {
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.2);
}
#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);
    --gradient-bg: radial-gradient(1300px 700px at 12% -12%, rgba(37, 99, 235, 0.26), transparent 56%),
                   radial-gradient(1100px 650px at 90% 6%, rgba(96, 165, 250, 0.21), transparent 54%);
}

[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);
    --gradient-bg: radial-gradient(1300px 700px at 12% -12%, rgba(37, 99, 235, 0.16), transparent 56%),
                   radial-gradient(1100px 650px at 90% 6%, rgba(96, 165, 250, 0.13), transparent 54%);
}

@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);
        --gradient-bg: radial-gradient(1300px 700px at 12% -12%, rgba(37, 99, 235, 0.16), transparent 56%),
                       radial-gradient(1100px 650px at 90% 6%, rgba(96, 165, 250, 0.13), transparent 54%);
    }
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

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

body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: var(--gradient-bg),
        linear-gradient(rgba(34,211,238,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168,85,247,.02) 1px, transparent 1px),
        var(--bg);
    background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-attachment: fixed, fixed, scroll, scroll;
    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;
}

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 */
body.tl-admin-as-view .tl-dash-page .dash-tabs {
    position: relative;
    z-index: 5;
    isolation: isolate;
}
body.tl-admin-as-view .tl-dash-page .dash-tabs .dash-tab {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.tele-loader-content {
    text-align: center;
    animation: tlFadeIn 0.6s ease;
}

.tele-loader-logo {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tlFloat 2.5s ease-in-out infinite;
}

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

.tele-loader-logo img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px var(--tl-accent-glow, rgba(30,86,245,0.3));
}

.tele-loader-logo i {
    font-size: 48px;
    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.6rem;
    font-weight: 700;
    background: var(--tl-gradient, linear-gradient(135deg, #1e56f5, #5280ff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

.tele-loader-info {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

.tele-loader-bar {
    width: 200px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin: 0 auto;
}

.tele-loader-fill {
    height: 100%;
    border-radius: 3px;
    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 10px var(--tl-accent-glow, rgba(30,86,245,0.3));
}

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

@keyframes tlFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes tlPulse {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.15); opacity: 0.25; }
}

/* 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: var(--bg-elev-2);
    border-radius: var(--radius-xs);
    transition: all 0.2s ease;
}

.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: 12px;
}

.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: #c4c4cf;
    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: var(--bg-elev-1);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    display: none;
    overflow: hidden;
}

.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: var(--bg-elev-3);
    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: 6px;
    background: var(--bg-elev-3, #26262c);
    color: var(--text-muted);
    border: 1px solid var(--line, #30303a);
    transition: all .15s;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}
.dropdown-lang-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.dropdown-lang-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 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: 6px;
    background: var(--bg-elev-3, #26262c);
    color: var(--text-muted);
    border: 1px solid var(--line, #30303a);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    transition: all .15s;
}
.dropdown-theme-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.dropdown-theme-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 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;
}

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

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

.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,.6) 0%, transparent 38%),
        linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 50%);
}

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

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

@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 {
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 0.76rem;
    color: #fff;
    margin-left: auto;
}

.stream-info {
    padding: 10px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
}

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

.stream-details {
    min-width: 0;
}

.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;
}

/* Top: horizontal category rail (jump to section) */
.browse-cat-rail-wrap {
    margin: 0 0 8px;
    padding-bottom: 4px;
}
.browse-cat-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.browse-cat-rail__item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 82px;
    padding: 8px 6px 6px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg-elev-1);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
    scroll-snap-align: start;
}
.browse-cat-rail__item:hover {
    border-color: var(--brand);
    background: rgba(30, 86, 245, 0.1);
    transform: translateY(-2px);
}
.browse-cat-rail__art {
    position: relative;
    width: 44px;
    height: 58px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-elev-2);
    margin-bottom: 6px;
}
.browse-cat-rail__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.browse-cat-rail__ph {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--brand-soft);
    background: linear-gradient(145deg, rgba(30, 86, 245, 0.22), var(--bg-elev-1));
}
.browse-cat-rail__ph.is-visible {
    display: flex;
}
.browse-cat-rail__name {
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.browse-cat-rail__count {
    margin-top: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

/* Inline ad slot inside browse category rail (categories tab + live rail) */
.browse-cat-rail__item--ad {
    flex: 0 0 min(148px, 42vw);
    max-width: 168px;
    min-width: 120px;
    padding: 6px;
    border-radius: 12px;
    border: 1px dashed var(--line);
    background: var(--bg-elev-1);
    scroll-snap-align: start;
}
.browse-cat-rail__item--ad .category-box-art {
    width: 100%;
    height: 58px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}
.browse-cat-rail__item--ad .category-info h3 {
    font-size: 0.68rem;
    line-height: 1.2;
    margin: 0 0 2px;
}
.browse-cat-rail__item--ad .category-info span {
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* 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;
}

.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 page — width in % of content area so 98vw never exceeds parent (fixes horizontal scroll) */
.stream-page {
    width: 100%;
    max-width: 100%;
    margin: 12px 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 14px;
    align-items: start;
    box-sizing: border-box;
}

/* Stream page: tl-left-sidebar visible — removed hide rule */
body.page-stream .tl-page-content {
    padding-inline-start: 0;
}

/* Left column: player stacked above info/tab bar */
.stream-left-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 10px;
}

.stream-main {
    min-width: 0;
}

/* Info/tab bar card (desktop) */
.stream-page .mobile-tab-bar {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elev-1);
}

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

.player-wrapper {
    aspect-ratio: 16 / 9;
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    /* Fallback height for browsers that don't support aspect-ratio */
    min-height: 0;
}

/* 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;
}

.player-live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(244, 63, 94, 0.92);
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    pointer-events: none;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0;
}
/* +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-top-right-stack .player-mob-tray {
    pointer-events: auto;
}
.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;
}
.player-live-duration {
    display: inline-block;
    margin-inline-start: 7px;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    opacity: .88;
    min-width: 3.6em;
    text-align: end;
    transition: opacity .25s ease, max-width .3s ease, margin .3s ease;
    white-space: nowrap;
    vertical-align: middle;
}
/* Hide only the running timer when pointer is idle (LIVE + dot stay put — no layout jump) */
.player-wrapper:not(.player-live-awake) .player-live-duration {
    opacity: 0;
    max-width: 0;
    min-width: 0;
    margin-inline-start: 0;
    overflow: hidden;
    padding: 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-left-col,
#streamPageWrap:-webkit-full-screen .stream-left-col {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#streamPageWrap:fullscreen .stream-main,
#streamPageWrap:-webkit-full-screen .stream-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#streamPageWrap:fullscreen .stream-player,
#streamPageWrap:-webkit-full-screen .stream-player {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#streamPageWrap:fullscreen .player-wrapper,
#streamPageWrap:-webkit-full-screen .player-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
}
#streamPageWrap:fullscreen .mobile-tab-bar,
#streamPageWrap:-webkit-full-screen .mobile-tab-bar,
#streamPageWrap:fullscreen .stream-info-bar,
#streamPageWrap:-webkit-full-screen .stream-info-bar {
    display: none !important;
}
#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.tl-mobfs-chat-on .chat-panel,
#streamPageWrap:-webkit-full-screen.tl-mobfs-chat-on .chat-panel {
    transform: translateX(0);
}
#streamPageWrap:fullscreen .chat-panel-toggle-hint,
#streamPageWrap:-webkit-full-screen .chat-panel-toggle-hint {
    display: none !important;
}
/* Fullscreen slide-in chat: hide heavy chrome so typing is easier */
#streamPageWrap:fullscreen.tl-mobfs-chat-on .chat-panel .chat-header,
#streamPageWrap:-webkit-full-screen.tl-mobfs-chat-on .chat-panel .chat-header,
#streamPageWrap:fullscreen.tl-mobfs-chat-on .chat-panel .chat-events-panel,
#streamPageWrap:-webkit-full-screen.tl-mobfs-chat-on .chat-panel .chat-events-panel {
    display: none !important;
}
/* Mobile / tablet: viewer + fullscreen chat control on the player (top-right) */
.player-mob-tray {
    display: none;
    position: relative;
    top: auto;
    inset-inline-end: auto;
    z-index: 55;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}
@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;
    }
}
#streamPageWrap:fullscreen .player-mob-tray .tl-mobfs-chat-btn,
#streamPageWrap:-webkit-full-screen .player-mob-tray .tl-mobfs-chat-btn {
    display: inline-flex;
}
.player-mob-viewer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e8e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.player-mob-viewer i {
    font-size: 0.72rem;
    opacity: 0.9;
}
.tl-mobfs-chat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: rgba(30, 86, 245, 0.92);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.15s ease;
}
.tl-mobfs-chat-btn:active {
    transform: scale(0.96);
}
.tl-mobfs-chat-btn i {
    font-size: 1.05rem;
}
#streamPageWrap:fullscreen .tl-mobfs-chat-btn[aria-expanded="true"],
#streamPageWrap:-webkit-full-screen .tl-mobfs-chat-btn[aria-expanded="true"] {
    background: rgba(20, 60, 180, 0.95);
}
html.tl-mobfs-fullscreen-page,
html.tl-mobfs-fullscreen-page body {
    overflow: hidden !important;
}
@media (min-width: 901px) {
    .player-mob-tray {
        display: none !important;
    }
}
/* Stream mobile: viewer in mob-info when chat closed; glass pill on video only while chat sheet is open */
@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;
    }
    body.page-stream.tl-mob-chat-drawer-open .player-mob-viewer {
        background: rgba(8, 10, 18, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(14px) saturate(1.25);
        -webkit-backdrop-filter: blur(14px) saturate(1.25);
    }
    html.tl-mobfs-fullscreen-page .player-mob-tray .player-mob-viewer,
    html.tl-mobfs-fullscreen-page #viewerCountMobPlayer {
        display: inline-flex !important;
    }
}

/* ── Custom player controls overlay ── */
.player-controls-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: 35;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s;
}
.player-wrapper:hover .player-controls-bar,
.player-wrapper:focus-within .player-controls-bar {
    opacity: 1;
}
/* Fullscreen: hide controls + cursor when mouse idle (JS adds controls-active on mousemove) */
.player-wrapper:-webkit-full-screen .player-controls-bar,
.player-wrapper:fullscreen .player-controls-bar {
    opacity: 0;
    transition: opacity 0.3s;
}
.player-wrapper:-webkit-full-screen.controls-active .player-controls-bar,
.player-wrapper:fullscreen.controls-active .player-controls-bar {
    opacity: 1;
}
.player-wrapper:-webkit-full-screen {
    cursor: none;
}
.player-wrapper:fullscreen {
    cursor: none;
}
.player-wrapper:-webkit-full-screen.controls-active,
.player-wrapper:fullscreen.controls-active {
    cursor: default;
}
.player-ctrl-btn {
    border: none;
    background: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
}
.player-ctrl-btn:hover {
    background: rgba(255,255,255,0.15);
}
.player-volume-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.player-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    outline: none;
    cursor: pointer;
}
.player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.player-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
}
.player-ctrl-spacer {
    flex: 1;
}
/* ── Quality selector ── */
.player-quality-wrap {
    position: relative;
}
.player-quality-wrap .player-ctrl-btn.pq-trigger {
    gap: 4px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(10,10,16,.72);
}
.player-quality-menu.pq-menu {
    display: none;
    position: fixed;
    background: rgba(16,16,20,.97);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    min-width: 220px;
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
}
.player-quality-menu.pq-menu.show {
    display: block;
}
.pq-menu-header {
    padding: 10px 14px 8px;
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.player-quality-opt.pq-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: #ccc;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    font-size: .88rem;
    transition: background .12s;
    gap: 10px;
}
.player-quality-opt.pq-opt:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}
.player-quality-opt.pq-opt.active {
    color: #fff;
    font-weight: 700;
    background: rgba(30,86,245,.2);
}
.player-quality-wrap .pq-opt {
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.player-quality-wrap .pq-opt:last-child {
    border-bottom: none;
}
.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);
}
/* Badges */
.pq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1.4;
}
.pq-badge-hd {
    background: linear-gradient(135deg, #1e56f5, #5b8bff);
    color: #fff;
}
.pq-badge-sd {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
}
.pq-badge-src {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: .58rem;
}
.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);
}

/* ── Player loading spinner ── */
.player-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 4;
    gap: 12px;
    transition: opacity 0.3s;
}
.player-loading .spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(30,86,245,0.25);
    border-top-color: var(--brand, #1e56f5);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.player-loading span {
    color: #ccc;
    font-size: 0.85rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Player retry button ── */
.player-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(30,86,245,0.5);
    background: rgba(30,86,245,0.15);
    color: #d4b8ff;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s;
}
.player-retry-btn:hover {
    background: rgba(30,86,245,0.3);
}

.player-error-msg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    text-align: center;
    padding: 20px;
    z-index: 6;
}

.player-wrapper .player-placeholder {
    min-height: 100%;
}

.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;
}

.stream-info-bar {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elev-1);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.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;
}

/* Uniform height for all action buttons in stream-info-bar */
.stream-info-left .btn,
.stream-info-left .tl-btn-donate,
.stream-info-left .tl-btn-subscribe,
.stream-info-left .tl-btn-subbed,
.stream-info-left .tl-btn-giftsub,
.stream-info-left .stream-notif-btn {
    min-height: 42px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}

.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: 0;
    display: grid;
    gap: 0;
    direction: rtl;
    position: relative;
}

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

/* 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; }

/* 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); }
.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;
}

#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 .chat-input {
    flex: 1;
    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) */
.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: var(--bg-elev-2, #16161c);
    border: 1px solid var(--line, #2f2f39);
    border-radius: 12px;
    padding: 12px 14px;
    z-index: 60;
    font-size: 0.78rem;
    line-height: 1.45;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.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: 56px;
    left: 10px;
    right: 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0;
    max-height: 260px;
    overflow: hidden;
    z-index: 100;
    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__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,
    .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: 38px;
    height: 38px;
    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: 10px;
}

.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);
}

.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%;
}

/* ============ 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-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;
}
.tl-role-badge--verified i { font-size: 0.95rem; line-height: 1; }
.tl-role-badge--partner,
.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;
}

/* ---- 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;
}
.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-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 ──────────────────────────────────────────── */
.tl-left-sidebar {
    width: 64px;
    flex-shrink: 0;
    background: var(--bg-elev-1);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow-y: auto;
    height: calc(100vh - 74px);
    position: sticky;
    top: 74px;
    align-self: flex-start;
}
.tl-sidebar-hd {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
    font-size: .95rem;
}
.tl-sidebar-hd-live { border-bottom: none; border-top: 1px solid var(--line); }
.tl-sidebar-sep { width: 80%; height: 1px; background: var(--line); margin: 6px auto 0; }
/* live-section header: just a red dot */
.tl-sdot {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #e91916;
}
.tl-sidebar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
    width: 100%;
    text-decoration: none;
    transition: background .15s;
}
.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 .15s;
}
.tl-sidebar-item:hover img { border-color: var(--brand); }
/* live avatar wrapper with ring */
.tl-sidebar-av-wrap {
    position: relative;
    display: inline-block;
}
.tl-sidebar-live-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #e91916;
    pointer-events: none;
}
.tl-sidebar-item-live img {
    border-color: transparent;
}
.tl-sidebar-item-live:hover .tl-sidebar-live-ring { border-color: #ff4444; }
.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 {
    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;
}

.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;
}

/* ============================================================
   Player quality wrap
   ============================================================ */
.player-quality-wrap .pq-opt {
    transition: all .12s;
}
.player-quality-wrap .pq-opt:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
}

/* ============================================================
   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;
}

/* ============================================================
   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: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.categories-scroll-row::-webkit-scrollbar { display: none; }

.category-card-scroll {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 130px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: var(--bg-elev-1);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: border-color .18s, transform .18s;
    text-decoration: none;
    color: inherit;
    padding: 0;
}
.category-card-scroll:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
}
.category-card-scroll .category-box-art {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}
.category-card-scroll .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: 2rem;
    color: var(--brand);
}
.category-card-scroll .category-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1.1rem;
    border-radius: 9px;
    background: rgba(30,86,245,.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card-scroll .category-info {
    padding: 6px 8px 8px;
}
.category-card-scroll .category-info h3 {
    font-size: .78rem;
    font-weight: 700;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-card-scroll .category-info span {
    font-size: .68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================================
   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 .navbar-container {
        min-height: 46px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    body.page-stream .main-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        padding-top: 46px !important;
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 46px) !important;
        height: calc(100svh - 46px) !important;
        height: calc(100dvh - 46px) !important;
        max-height: calc(100dvh - 46px) !important;
    }
    body.page-stream .tl-page-content {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .stream-page {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !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 — always visible: avatar + name + icon action buttons ── */
    .mob-info-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid var(--line, #2f2f39);
    }
    .mob-info-bar-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !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;
    }
    .mob-info-bar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    /* Icon-only circle action buttons */
    .mob-info-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 50% !important;
        border: 1px solid var(--line, #2f2f39) !important;
        background: var(--bg-elev-2, #26262c) !important;
        color: var(--text-muted, #8888aa) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .85rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
        transition: background .15s, color .15s, border-color .15s !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .mob-info-btn.active,
    .mob-info-btn:active {
        background: var(--brand, #1e56f5) !important;
        color: #fff !important;
        border-color: var(--brand, #1e56f5) !important;
    }
    .mob-info-btn-danger {
        border-color: rgba(244,63,94,.35) !important;
        color: #f43f5e !important;
    }
    .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; }

    /* ── 8. Chat panel: fills every remaining pixel ── */
    .chat-panel {
        position: static !important;
        top: auto !important;
        flex: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        transition: none !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;
        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: add space so content isn't hidden behind it */
    body:not(.page-stream) .main-content {
        padding-bottom: 72px;
    }

    /* 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 */
    body { padding-top: 60px; }
    body.page-stream { padding-top: 0 !important; }

    /* Category scroll row smaller */
    .category-card-scroll {
        min-width: 130px;
        padding: 8px 10px;
    }

    /* 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: horizontal category rail + per-category stream rows */
    .browse-cat-rail__item {
        width: 74px;
        padding: 7px 5px 5px;
    }
    .browse-cat-rail__art {
        width: 40px;
        height: 53px;
    }
    .browse-all-live-section .browse-all-live-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .browse-cat-rail__item--ad {
        flex-basis: min(132px, 44vw);
        min-width: 108px;
    }
    .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) {
    /* Show on all mobile pages including stream */
    .mob-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: var(--bg-elev-1, #18181b);
        border-top: 1px solid var(--line, #3a3a40);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mob-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 4px 6px;
        color: var(--text-muted, #a6a6b2);
        font-size: .68rem;
        font-weight: 600;
        gap: 3px;
        text-decoration: none;
        transition: color .18s;
        min-height: 52px;
    }
    .mob-nav-item i {
        font-size: 1.15rem;
        line-height: 1;
    }
    .mob-nav-item.active {
        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 bottom nav height so content isn't hidden behind it */
    .main-content { padding-bottom: 68px; }
}

/* ============================================================
   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;
    image-rendering: auto;
}

/* 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 .2s 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: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.tl-goal-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 11px;
    border-radius: 12px;
    border: 1px solid var(--line, #2a2f3d);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.18) 100%);
    min-width: 0;
}
.tl-goal-tile--follow {
    border-color: rgba(244, 63, 94, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tl-goal-tile--sub {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tl-goal-tile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tl-goal-tile__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #9a9aad);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tl-goal-tile__nums {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.tl-goal-tile__cur {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text, #f4f4f8);
    line-height: 1;
}
.tl-goal-tile__sep {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
}
.tl-goal-tile__tgt {
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.72);
}
.tl-goal-tile__track {
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.tl-goal-tile__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}
.tl-goal-tile__fill--follow {
    background: linear-gradient(90deg, #e11d48, #fb7185);
}
.tl-goal-tile__fill--sub {
    background: linear-gradient(90deg, #7c3aed, #818cf8);
}
@media (max-width: 768px) {
    .tl-goal-duo {
        grid-template-columns: 1fr;
    }
    .tl-goal-tile--follow {
        order: 1;
    }
    .tl-goal-tile--sub {
        order: 2;
    }
}
@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--sub {
        order: 1;
    }
    .tl-goal-tile--follow {
        order: 2;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Channel Panels (below stream info, desktop only)
───────────────────────────────────────────────────────────────── */
.stream-panels-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}
.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;
}
.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;
    animation: pmSlideUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes pmSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}
.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;
}
.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;
}

/* Panel editor item (inside modal) */
.panel-editor-item {
    background: var(--bg-elev-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.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: 2px 4px;
    touch-action: none;
}
.panel-editor-drag-handle:active { cursor: grabbing; }
.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: 10px;
}
.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; }

/* Drag states */
.panel-editor-item.dragging  { opacity: .4; border: 2px dashed var(--brand); }
.panel-editor-item.drag-over { border-color: var(--brand); background: rgba(30,86,245,.07); }

/* Mobile tab bar — hidden on non-stream pages, shown inside .stream-page */
body:not(.page-stream) .mobile-tab-bar { display: none; }
.mob-tab { background: none; border: none; cursor: pointer; }

/* ── mob-info-bar: global rules (desktop + mobile base) ── */
.mob-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 8px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line, #2f2f39);
}
.mob-info-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.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-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.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);
}
/* Tab navigation row */
.mob-tab-nav {
    display: flex;
    flex-direction: row;
    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);
}
/* Info panel wrap */
.mob-info-panel-wrap { display: none; }
.stream-page[data-mob-tab="info"] .mob-info-panel-wrap {
    display: flex;
    flex-direction: column;
}
.channel-about.mob-info-panel { padding: 12px 12px 16px; }
.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); }
/* Compact viewer count inside mob-info-bar actions */
.mob-info-bar-actions .viewer-count {
    padding: 5px 9px;
    min-height: 34px;
    font-size: .78rem;
    border-radius: 999px;
    gap: 4px;
}

/* 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 {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(37,99,235,.15);
    border-left: 3px solid #2563eb;
    padding: 6px 10px;
    font-size: .8rem;
    color: var(--text);
    flex-shrink: 0;
}
.pinned-msg-bar i { color: #2563eb; }
.pinned-msg-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.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); }

/* 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-tier-boards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.emoji-tier-board {
    background: var(--bg-elev-3);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
}
.emoji-tier-title {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-muted);
}
.emoji-tier-dropzone {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-emoji-card-pool {
    display: none; /* cards are rendered into tier dropzones */
}
.tl-emoji-card {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    position: relative;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.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;
}
.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(244,63,94,0.35);
}
.cat-live-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   Mobile — Player controls always visible + misc
   ============================================================ */
@media (max-width: 768px) {
    /* Player controls: always show on mobile (no hover) */
    .player-controls-bar {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, transparent 110%);
        padding: 8px 10px;
        gap: 6px;
    }
    .player-volume-slider {
        width: 46px;
    }
    /* 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,.55);
    z-index: 999;
    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: 1000;
    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);
}
/* 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: 8px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted, #8888aa);
    background: var(--bg-elev-2, #26262c);
    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; }
.mob-tab-donate {
    text-decoration: none;
    color: #f59e0b !important;
    border-bottom-color: transparent !important;
}
.mob-tab-donate i {
    color: #f59e0b;
}

@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;
    }

    /* 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;
        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: push player higher (less spacing) ──────── */
    body.page-stream .main-content {
        padding-top: 46px !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;
}

.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); }
}

/* ===================== 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-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 ───────────────────────────────────────────────────── */
.file-input-styled {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: var(--text);
    font-size: .88rem;
    background: transparent;
    border: none;
    outline: none;
    padding: 4px 0;
}
.file-input-styled::file-selector-button {
    padding: 8px 16px;
    background: var(--bg-elev-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: .84rem;
    margin-left: 10px;
    transition: background .2s, border-color .2s;
}
.file-input-styled::file-selector-button:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════
   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 pill */
.tele-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 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; }

/* 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: 100;
}
.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-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: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
        padding: 0 !important;
        gap: 0 !important;
        font-size: 0.78rem !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;
        gap: 4px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 9px !important;
        border-radius: 10px !important;
        font-size: 0.74rem !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;
    }
    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: 2600 !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; }
}

/* ── Cheer / gift events: compact linear strip (avatar + tele, same on all sizes) ─── */
.chat-events-panel {
    position: relative;
    width: 100%;
    max-height: none;
    overflow: hidden;
    margin: 0 0 8px;
    padding: 0;
    background: linear-gradient(180deg, rgba(30,86,245,.08), rgba(0,0,0,.12));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    flex-shrink: 0;
}
.popout-chat-wrap .chat-events-panel {
    margin: 0 10px 8px;
}
.cep-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.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 i { color: #1e56f5; margin-inline-end: 6px; flex-shrink: 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-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .2);
    border: 1px solid rgba(255, 255, 255, .06);
    box-sizing: border-box;
}
.cep-cell--r1 {
    border-color: rgba(30, 86, 245, .28);
}
.cep-cell--empty {
    opacity: .4;
    pointer-events: 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-cell--gift .cep-pav {
    border-color: #a970ff;
}
.cep-cell--cheer .cep-pav {
    border-color: #1e56f5;
}
.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) {
    /* Top supporters title hidden on phone — strip stays compact */
    .chat-events-panel .cep-head {
        display: none !important;
    }
    .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;
}

/* پروفایل / چت کشو: ارسال در برابر دریافت + آیکون رویداد */
.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;
}

/* ──────────────────────────────────────────────────────────────
   /live PAGE — RESPONSIVE POLISH (mobile / iPad / desktop)
   Same visual language, tightened layout & breakpoints.
   ────────────────────────────────────────────────────────────── */

/* /live: full-bleed within .tl-page-content; wide screens get more video + chat space */
.stream-page {
    width: 100%;
    max-width: 100%;
    column-gap: 16px;
    box-sizing: border-box;
}
body.page-stream .tl-page-content {
    padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}
.stream-left-col { gap: 12px; }

/* 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;
    }
}

/* Bullet-proof: never let any flex/grid child overflow horizontally */
.stream-page,
.stream-page * {
    min-width: 0;
}
/* Restore mob-info action pills (global min-width:0 was collapsing buttons + hiding labels) */
.stream-page .mob-info-bar-actions > .mob-info-btn:not(.mob-info-btn-txt),
.stream-page .mob-info-bar-actions > .viewer-count {
    min-width: 34px;
    flex-shrink: 0 !important;
}
.stream-page .mob-info-bar-actions > .mob-info-btn.mob-info-btn-txt {
    min-width: max-content !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* /live: viewer pills match donate/sub button radius */
body.page-stream .viewer-count,
body.page-stream .player-mob-viewer,
body.page-stream .mob-info-bar-actions > .viewer-count,
body.page-stream #viewerCountWrap,
body.page-stream #viewerCountMobPlayer {
    border-radius: 10px !important;
}

/* Player wrapper: rock-solid 16/9 with no rounding glitches */
.stream-player {
    background: #000;
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.player-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.hls-video-player {
    object-fit: contain;
    background: #000;
}

/* Stream info bar — clip overflow gracefully */
.stream-info-bar {
    overflow: hidden;
}
.stream-info-bar .stream-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 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) {
    .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) {
    .stream-page {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 12px;
        width: 100%;
        max-width: 100%;
    }
    .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) {
    .stream-page {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 12px;
        width: 100%;
        max-width: 100%;
        margin: 10px auto;
        padding: 0 10px;
    }
    .chat-panel {
        height: calc(100vh - 92px);
        min-height: 0;
        max-height: none;
        position: sticky;
        top: 78px;
        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) {
    .stream-page {
        grid-template-columns: 1fr;
    }
    .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 only: composer at bottom via flex, no sticky (sticky breaks inside overflow:hidden parent) */
    body.page-stream .chat-panel {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-inline: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    body.page-stream .chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding-bottom: 4px !important;
    }
    body.page-stream .chat-input-area,
    body.page-stream .chat-login-prompt {
        position: static !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;
    }
    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) {
    body.page-stream .chat-hdr-actions-slot--mob .chat-hdr-btn {
        width: 34px;
        height: 34px;
        min-height: 0;
        padding: 0;
        font-size: 0.82rem;
    }
    /* Chat docked: hide header action strip in hint row until sheet is expanded */
    body.page-stream:not(.tl-mob-chat-drawer-open) .chat-hdr-actions-slot--mob {
        display: none !important;
    }
    body.page-stream:not(.tl-mob-chat-drawer-open) #streamPageWrap {
        padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }
    body.page-stream.tl-mob-chat-drawer-open #streamPageWrap {
        padding-bottom: 0;
    }
    body.page-stream .stream-left-col .stream-panels-section {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        gap: 10px !important;
        padding: 8px 12px 14px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.page-stream .stream-panel-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    body.page-stream .panels-edit-bar {
        display: flex !important;
        justify-content: flex-end !important;
        margin: 6px 12px 0 !important;
    }
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        z-index: 520 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--bg-elev-1, #1a1a1e) !important;
        border-radius: 14px 14px 0 0 !important;
        border: 1px solid var(--line, #2f2f39) !important;
        border-bottom: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45) !important;
        transition: top 0.38s cubic-bezier(0.22, 1, 0.36, 1), max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
    }
    /* Collapsed: thin bar docked at bottom */
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel:not(.mobile-expanded) {
        top: auto !important;
        max-height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Expanded: from bottom of video (.stream-main) to bottom of screen — JS sets --tl-mob-chat-overlay-top */
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel.mobile-expanded {
        top: max(48px, var(--tl-mob-chat-overlay-top, 120px)) !important;
        max-height: none !important;
        height: auto !important;
    }
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel:not(.mobile-expanded) > *:not(.chat-panel-toggle-hint) {
        display: none !important;
    }
    body.page-stream .chat-panel-toggle-hint {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px max(10px, env(safe-area-inset-bottom, 0px));
        margin: 0;
        background: var(--bg-elev-2, #26262c);
        border-bottom: 1px solid var(--line, #2f2f39);
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--text, #e8e8e8);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    body.page-stream .chat-panel.mobile-expanded .chat-panel-toggle-hint {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--line, #2f2f39);
        cursor: default;
    }
    body.page-stream .chat-panel.mobile-expanded .chat-drawer-hint-toggle {
        cursor: pointer;
        padding-bottom: 4px;
    }
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel.mobile-expanded .chat-messages {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel.mobile-expanded .chat-input-area,
    body.page-stream .stream-page:not([data-mob-tab="info"]) .chat-panel.mobile-expanded .chat-login-prompt {
        flex-shrink: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 2;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Scroll channel column so goals + panels below the player stay reachable */
    body.page-stream .stream-left-col {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }
    /* Users-in-chat sheet: only when explicitly opened */
    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;
        height: auto !important;
        max-height: none !important;
        border-radius: 14px 14px 0 0 !important;
        z-index: 56000 !important;
        display: none !important;
        flex-direction: column !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;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Stream /live: Tele & notification sheets above docked chat (phones + tablets) */
@media (max-width: 1024px) {
    body.page-stream.tele-open .navbar,
    body.page-stream.notif-open .navbar {
        z-index: 62000 !important;
    }
    body.page-stream.tele-open .stream-page:not([data-mob-tab="info"]) .chat-panel,
    body.page-stream.notif-open .stream-page:not([data-mob-tab="info"]) .chat-panel {
        z-index: 400 !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: 62500 !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: fix navbar backdrop-filter (breaks position:fixed
   children on iOS Safari — backdrop-filter creates stacking
   context that contains fixed elements on WebKit)
   ============================================================ */
@media (max-width: 768px) {
    .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(14, 14, 16, 0.97) !important;
    }
}

/* ============================================================
   Mobile Live-Following Bar (above bottom nav)
   ============================================================ */
.mob-live-bar {
    display: none;
    position: sticky;
    top: 60px; /* height of mobile navbar */
    left: 0;
    right: 0;
    z-index: 199;
    background: var(--bg-elev-1);
    border-bottom: 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;
}
.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 {
    font-size: .62rem;
    color: var(--text-muted);
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* ============================================================
   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;
}
/* Ad cards have no left avatar column — use full width for title + hint */
.stream-card.tl-ad-card .stream-info.tl-ad-card__info {
    grid-template-columns: minmax(0, 1fr);
}
.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;
    min-height: 88px;
    background: linear-gradient(165deg, #0b1220 0%, #1e293b 55%, #0f172a 100%);
    border-radius: inherit;
}
.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 {
    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);
}

/* Live watch page: compact strip below the video */
.tl-stream-inline-ad-outer {
    width: 100%;
    padding: 6px 10px 10px;
}
.tl-stream-inline-ad-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.tl-stream-inline-ad {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: min(960px, 100%);
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-elev-2, rgba(24, 24, 30, 0.92));
    border: 1px solid var(--line, #2e2e34);
}
.tl-stream-inline-ad img {
    width: 120px;
    max-width: 32%;
    flex-shrink: 0;
    height: auto;
    max-height: 72px;
    border-radius: 8px;
    object-fit: cover;
}
.tl-stream-inline-ad__txt {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
@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-preroll-overlay {
    position: absolute;
    inset: 0;
    z-index: 26;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.tl-preroll-video {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.tl-preroll-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 14px;
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.tl-preroll-skip {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
}
.tl-preroll-skip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.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;
}

/* 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;
}

#tlPrerollOverlay .tl-preroll-placeholder-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 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;
}