/* ===== v31 global Kalameh font hook ===== */
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'KalamehWeb';
    src: url('/fonts/kalameh/KalamehWeb(FaNum)-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PeydaWeb';
    src: url('/fonts/PeydaWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PeydaWeb';
    src: url('/fonts/PeydaWeb-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PeydaWeb';
    src: url('/fonts/PeydaWeb-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PeydaWeb';
    src: url('/fonts/PeydaWeb-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IRANSansX';
    src: url('fonts/iransansx/IRANSansX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

@font-face {
    font-family: 'IRANSansX';
    src: url('fonts/iransansx/IRANSansX-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after, button, input, select, textarea {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: "KalamehWeb", "PeydaWeb", "IRANSansX", Tahoma, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0e0e10; }
::-webkit-scrollbar-thumb { background: #53fc18; border-radius: 2px; border: 2px solid #0e0e10; }
::-webkit-scrollbar-thumb:hover { background: #46d614; }

body{
    background:#0e0e10;
    color:white;
    overflow-x: hidden;
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    
    padding: 8px 16px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    
    background:#0b0b0c;
    position:sticky;
    top:0;
    z-index:100;
    border-bottom: 1px solid #26262c;
}

@media (max-width: 849px) {
    header {
        background: rgba(11, 11, 12, 0.96) !important; 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); 
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mobile-menu-btn {
    display: none;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #efeff1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform .18s ease, opacity .2s ease;
}

.mobile-menu-btn:hover {
    transform: translateY(-1px);
    opacity: .92;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.mobile-menu-btn .toggle-line {
    stroke: currentColor;
    stroke-width: 2.15;
    fill: none;
    stroke-linecap: round;
}

.mobile-menu-btn .toggle-accent {
    fill: #53fc18;
}


.desktop-sidebar-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #efeff1;
    cursor: pointer;
    transition: transform .18s ease, opacity .2s ease;
    flex-shrink: 0;
    padding: 0;
}

.desktop-sidebar-btn:hover {
    transform: translateY(-1px);
    opacity: .92;
}

.desktop-sidebar-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.desktop-sidebar-btn .toggle-line {
    stroke: currentColor;
    stroke-width: 2.15;
    fill: none;
    stroke-linecap: round;
}

.desktop-sidebar-btn .toggle-accent {
    fill: #53fc18;
}


.logo{
    color:#53fc18;
    font-size:20px;
    font-weight:900;
    cursor: pointer;
}

.search{
    flex:1;
    margin:0 20px;
    max-width: 400px;
}

.search input{
    width:100%;
    padding:8px 15px;
    background:#26262c;
    border:none;
    border-radius:6px;
    color:white;
    outline: none;
    font-size: 16px; 
}

.search{ position:relative; }
.search.search-open .search-input{border-bottom-left-radius:0;border-bottom-right-radius:0}
.search-suggest{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:#141418;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    overflow:hidden;
    z-index:1100;
}
.search-suggest-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    text-decoration:none;
    color:#fff;
    background:transparent;
    transition:background .18s ease;
}
.search-suggest-item:hover{background:#1a1a1f}
.search-suggest-item + .search-suggest-item{border-top:1px solid rgba(255,255,255,.06)}
.search-suggest-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:#0b0b0c}
.search-suggest-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.search-suggest-name-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.search-suggest-name{font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggest-viewers{display:inline-flex;align-items:center;gap:6px;color:#a4ff69;font-size:13px;font-weight:700;flex:none}
.search-suggest-live-dot{width:8px;height:8px;border-radius:50%;background:#56fc18;display:inline-block}
.search-suggest-title{font-size:13px;font-weight:700;color:#d8d8de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggest-meta{font-size:12px;color:#9b9ba4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggest-empty{padding:14px 16px;color:#adadb8;font-size:13px}
@media (max-width: 900px){.search-suggest{display:none!important}}

.mobile-search-cont { display: none; margin-bottom: 20px; }
.mobile-search-cont input {
    width: 100%; padding: 12px 15px; background: #18181b;
    border: 1px solid #26262c; border-radius: 8px; color: white; outline: none;
    font-size: 16px; 
}

.auth button{
    margin-left:8px;
    padding:7px 15px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight: 600; 
}

.login{background:#26262c;color:white;}
.signup{background:#53fc18;color:black;}
.lang{background:#26262c;color:white;}
.mobile-auth{display:none}

/* Layout */
.main-wrapper {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: #0e0e10;
    border-left: 1px solid #26262c;
    padding: 15px 10px;
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    overflow-y: hidden; 
    flex-shrink: 0;
}

.sidebar {
    transition: width .28s ease, padding .28s ease, margin .28s ease, opacity .2s ease, border-color .2s ease;
}

body.sidebar-collapsed .sidebar {
    width: 76px !important;
    min-width: 76px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
    opacity: 1;
}

body.sidebar-collapsed .content {
    width: 100%;
}

body.sidebar-collapsed .side-item {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .side-item span,
body.sidebar-collapsed .side-title,
body.sidebar-collapsed .s-info,
body.sidebar-collapsed .s-viewers,
body.sidebar-collapsed .s-status-stack {
    display: none !important;
}

body.sidebar-collapsed .side-streamer {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .s-profile {
    justify-content: center;
}

body.sidebar-collapsed .divider {
    margin-left: 8px;
    margin-right: 8px;
}

.side-item span,
.side-title,
.s-info,
.s-viewers {
    white-space: nowrap;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .14s ease, transform .18s ease;
}

body.sidebar-expanding .side-item span,
body.sidebar-expanding .side-title,
body.sidebar-expanding .s-info,
body.sidebar-expanding .s-viewers {
    opacity: 0 !important;
    transform: translateX(-6px);
    pointer-events: none;
}

.side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #efeff1;
    transition: 0.2s;
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 400;
}

.side-item {
    text-decoration: none !important;
}
.side-item span {
    text-decoration: none !important;
}
.side-item:hover { background: #26262c; }
.side-item svg { width: 20px; height: 20px; fill: currentColor; }
.side-item.active { color: #53fc18; background: rgba(83, 252, 24, 0.05); font-weight: 600;}

.divider { border: 0; border-top: 1px solid #26262c; margin: 15px 0; }

.side-title {
    font-size: 12px;
    color: #adadb8;
    padding: 0 10px 10px;
    font-weight: 700; 
}

.side-streamer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.side-streamer:hover { background: #26262c; }

.side-streamer[data-tooltip] { position: relative; }
.side-streamer[data-tooltip]::after,
.side-streamer[data-tooltip]::before { content:none !important; display:none !important; }

.sidebar-hover-tooltip {
    position: fixed;
    inset: auto auto auto auto;
    max-width: min(360px, 42vw);
    background: #23252c;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,.38);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 9999;
}
.sidebar-hover-tooltip.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.sidebar-hover-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 0;
    border-right: 8px solid #23252c;
}
@media (max-width: 1024px) {
    .sidebar-hover-tooltip { display:none !important; }
}

.s-profile { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.s-avatar-cont { 
    position: relative; flex-shrink: 0; width: 34px; height: 34px; 
    background: #26262c url('img/loadpf.png') center/cover no-repeat;
    border-radius: 50%;
}
.s-avatar { width: 100%; height: 100%; border-radius: 50%; display: block; }
.s-dot{display:none !important;}

.s-info { line-height: 1.3; overflow: hidden; }
.s-name { font-size: 13px; font-weight: 600; display: block; white-space: nowrap; }
.s-meta { font-size: 11px; color: #adadb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 300;}
.s-viewers { font-size: 12px; color: #adadb8; font-weight: 500;}

.side-show-more{margin:8px 10px 0;padding:8px 0;border:0;background:transparent;color:#b9bbc6;font-size:13px;font-weight:700;text-align:start;cursor:pointer}
.side-show-more:hover{color:#fff}
.mobile-side-show-more{margin-inline:8px}
.side-streamer.is-offline .s-avatar{filter:grayscale(1);opacity:.78}
.side-streamer.is-offline .s-name,.side-streamer.is-offline .s-meta,.side-streamer.is-offline .s-viewers{color:#7d818d}
.s-offline-icon{width:16px;height:16px;color:#7d818d;flex-shrink:0;opacity:.9}
.s-status-stack{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Sidebar live viewers: no red badge, just green dot + number */
.side-streamer .s-viewers.live,
.mobile-side-streamer .s-viewers.live,
#sideFollowingList .s-viewers.live,
#mobileSideFollowingList .s-viewers.live,
#sideStreamersList .s-viewers.live,
#mobileSideStreamersList .s-viewers.live{
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    box-shadow: none !important;
}
.side-streamer .s-viewers.live::after,
.mobile-side-streamer .s-viewers.live::after,
#sideFollowingList .s-viewers.live::after,
#mobileSideFollowingList .s-viewers.live::after,
#sideStreamersList .s-viewers.live::after,
#mobileSideStreamersList .s-viewers.live::after{
    content: none !important;
}
.side-streamer .s-viewers.live::before,
.mobile-side-streamer .s-viewers.live::before,
#sideFollowingList .s-viewers.live::before,
#mobileSideFollowingList .s-viewers.live::before,
#sideStreamersList .s-viewers.live::before,
#mobileSideStreamersList .s-viewers.live::before{
    content:'●' !important;
    color:#53fc18 !important;
    margin-inline-end:6px !important;
    display:inline-block !important;
    font-size:10px !important;
    line-height:1 !important;
}

.s-viewers.live{color:#f3f4f6;font-weight:700}
.s-viewers.live::before{content:'●';color:#53fc18;margin-inline-end:6px;display:inline-block;font-size:10px;line-height:1;vertical-align:middle}
.s-avatar-cont.offline .s-dot{background:#7d818d}

/* Content */
.content { flex: 1; padding: 20px; overflow-x: hidden; }

.content > * {
    width: min(100%, 1360px);
    margin-left: auto;
    margin-right: auto;
}


.section h2 { margin-bottom: 20px; font-size: 20px; font-weight: 700;}

.all-cats-btn {
    background: #26262c;
    color: white;
    padding: 6px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: 0.2s;
}
.all-cats-btn:hover {
    background: #53fc18;
    color: black;
}

.categories { 
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 30px; 
    scrollbar-width: thin; scrollbar-color: #53fc18 #0e0e10;
}
.category { 
    min-width: 160px; background: #18181b; border-radius: 2px; overflow: hidden; 
    border: 1px solid rgba(255,255,255,0.06); cursor: pointer; flex-shrink: 0;
    position: relative; transform: translateY(0); 
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease;
}
.category::after {
    content: "";
    position: absolute;
    right: 14px;
    left: 14px;
    bottom: 0;
    height: 0;
    background: #53fc18;
    border-radius: 2px 2px 0 0;
    opacity: 0;
    transition: opacity .2s ease, height .2s ease;
}
.category:hover,
.category.active {
    border-color: rgba(83,252,24,.45);
    box-shadow: 0 14px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(83,252,24,.08);
    transform: translateY(-2px);
}
.category:hover::after,
.category.active::after {
    height: 4px;
    opacity: 1;
}
.category img { width: 100%; height: 200px; object-fit: cover; display:block; }
.category span { display: block; padding: 10px 10px 14px; font-size: 14px; text-align: center; font-weight: 700; }

.grid { display: grid; gap: 20px; }

@media (min-width: 1200px){ .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1199px) and (min-width: 850px){ .grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 849px){ 
    .grid { grid-template-columns: 1fr; } 
    .sidebar { display: none; } 
    .auth { display: none; } 
    .search { display: none; } 
    .mobile-menu-btn { display: inline-flex; } 
    .mobile-search-cont { display: block; } 
    
    .mobile-auth { 
        display: block; 
        background: #53fc18; 
        color: #000; 
        padding: 6px 18px; 
        border-radius: 6px; 
        font-weight: 700; 
        font-size: 13px; 
        border: none;
        cursor: pointer;
    }
}

@media (max-width: 849px){
    .desktop-sidebar-btn { display: none; }
}

/* Stream Card */
.stream-card { background: #18181b; border-radius: 12px; overflow: hidden; transition: 0.3s; cursor: pointer; }
.stream-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }

.thumb { position: relative; background: #18181b url('img/load.jpg') center/cover no-repeat; }
.thumb img, .thumb video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.thumb video { display: none; position: absolute; top:0; left:0; width: 100%; height:100%; z-index: 2; }
.live { position: absolute; top: 10px; left: 10px; background: #ff0000; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; z-index: 3; }
.viewers { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); padding: 3px 8px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 5px; z-index: 3; font-weight: 500;}
.eye { width: 14px; height: 14px; fill: white; }

.stream-title { padding: 12px 12px 0; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-info { display: flex; justify-content: space-between; align-items: center; padding: 12px; }
.stream-meta { display: flex; align-items: center; gap: 10px; }

.avatar { width: 36px; height: 36px; border-radius: 50%; background: #26262c url('img/loadpf.png') center/cover no-repeat; display: block; flex-shrink: 0; }
.streamer { font-size: 13px; font-weight: 600; }
.game { font-size: 12px; color: #adadb8; font-weight: 400;}

.follow-btn { background: #26262c; border: none; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500;}
.following { background: #53fc18; color: black; font-weight: 700; }

.error-message { background-color: rgba(255, 0, 0, 0.1); color: #ff4444; padding: 10px; border-radius: 8px; margin-bottom: 20px; text-align: center; border: 1px solid #ff4444; display: none; font-weight: 500;}


/* Instant page modal */
.instant-page-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.instant-page-modal.active { display: flex; }
.instant-page-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.instant-page-dialog {
    position: relative;
    width: min(560px, calc(100vw - 28px));
    min-height: 220px;
    background: #111114;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.instant-auth-dialog {
    width: min(100%, 620px);
    padding: 22px 22px 20px;
}
.instant-page-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(17,17,20,.82);
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.instant-auth-shell { display:flex; flex-direction:column; gap:16px; }
.instant-auth-head { padding-top: 8px; }
.instant-auth-brand { display:flex; align-items:center; justify-content:flex-start; margin-bottom: 12px; }
.instant-auth-brand img { width: 190px; max-width: 72%; height: auto; display:block; }
.instant-auth-title { color:#fff; font-size:28px; line-height:1.2; margin:0 0 8px; font-weight:800; }
.instant-auth-subtitle { color:#a1a1aa; margin:0; font-size:14px; line-height:1.7; }
.instant-auth-alert { border-radius:12px; padding:12px 14px; font-size:14px; font-weight:700; }
.instant-auth-alert.is-error { background:rgba(255,77,79,.08); color:#ff7875; border:1px solid rgba(255,77,79,.22); }
.instant-auth-alert.is-success { background:rgba(83,252,24,.08); color:#a3ff7d; border:1px solid rgba(83,252,24,.22); }
.instant-auth-form { display:flex; flex-direction:column; gap:14px; }
.instant-auth-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.instant-auth-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.instant-auth-field { display:flex; flex-direction:column; gap:8px; }
.instant-auth-field.full { grid-column:1 / -1; }
.instant-auth-field span { color:#e5e7eb; font-size:14px; font-weight:700; }
.instant-auth-field input {
    width:100%; background:#0f1115; border:1px solid #27272a; color:#fff; padding:13px 15px; border-radius:12px; font-size:15px; box-sizing:border-box; transition:border-color .2s ease, box-shadow .2s ease;
}
.instant-auth-field input:focus { outline:none; border-color:#53fc18; box-shadow:0 0 0 1px #53fc18; }
.instant-auth-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.instant-auth-check { display:flex; align-items:flex-start; gap:10px; color:#c9c9cf; font-size:13px; line-height:1.6; }
.instant-auth-check.compact { align-items:center; }
.instant-auth-check input { accent-color:#53fc18; width:16px; height:16px; margin-top:2px; }
.instant-auth-forgot, .instant-auth-switch { color:#53fc18; background:none; border:none; padding:0; cursor:pointer; font:inherit; font-weight:700; text-decoration:none; }
.instant-auth-submit { width:100%; background:#53fc18; color:#050505; border:none; border-radius:12px; padding:14px 16px; font-size:16px; font-weight:900; cursor:pointer; transition:transform .15s ease, background-color .15s ease; }
.instant-auth-submit:hover { background:#69ff32; transform:translateY(-1px); }
.instant-auth-submit:disabled { opacity:.7; cursor:wait; transform:none; }
.instant-auth-footer { display:flex; align-items:center; justify-content:center; gap:8px; color:#a1a1aa; font-size:14px; }
.instant-auth-dialog.lang-en { direction:ltr; text-align:left; }
.instant-auth-dialog.lang-en .instant-auth-head, .instant-auth-dialog.lang-en .instant-auth-field, .instant-auth-dialog.lang-en .instant-auth-footer { text-align:left; }
.instant-auth-dialog.lang-en .instant-auth-check { direction:ltr; }
.instant-auth-dialog.lang-fa { direction:rtl; text-align:right; }
.instant-auth-dialog.lang-fa .instant-auth-head, .instant-auth-dialog.lang-fa .instant-auth-field { text-align:right; }
body.modal-open { overflow: hidden !important; }
@media (max-width: 849px) {
    .instant-page-dialog {
        width: min(100vw - 16px, 520px);
        max-width: calc(100vw - 16px);
        border-radius: 18px;
    }
    .instant-auth-dialog {
    width: min(100%, 620px); padding: 18px 14px 16px; }
    .instant-auth-title { font-size:24px; }
    .instant-auth-grid.two-col { grid-template-columns:1fr; }
    .instant-page-close {
        top: calc(10px + env(safe-area-inset-top, 0px));
        left: 10px;
    }
}
/* Mobile Sidebar */
#sidebarOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
    display: none; z-index: 99998;
}
.mobile-sidebar {
    position: fixed; top: 0; width: 280px; height: 100%;
    background: #0e0e10; z-index: 99999; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto; display: flex; flex-direction: column; box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

[dir="rtl"] .mobile-sidebar { right: -280px; left: auto; border-left: 1px solid #26262c; border-right: none; }
[dir="ltr"] .mobile-sidebar { left: -280px; right: auto; border-right: 1px solid #26262c; border-left: none; }
[dir="rtl"] .mobile-sidebar.active { right: 0; }
[dir="ltr"] .mobile-sidebar.active { left: 0; }

.ms-header { 
    padding: 15px; 
    padding-top: calc(15px + env(safe-area-inset-top, 0px));
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #26262c; 
}

.ms-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; }
.ms-nav-section{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.ms-title{padding:0 8px 10px; color:#f3f4f6; font-size:17px; font-weight:800;}
.ms-side-title{padding:14px 8px 10px; color:#f3f4f6; font-size:14px; font-weight:800;}
#mobileSideStreamersList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mobile-sidebar #mobileSideStreamersList .side-streamer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border-radius: 10px;
}
.mobile-sidebar #mobileSideStreamersList .s-name {
    font-size: 14px;
    font-weight: 800;
}
.mobile-sidebar #mobileSideStreamersList .s-meta {
    font-size: 12px;
    color: #b8b8c7;
}
.mobile-sidebar #mobileSideStreamersList .s-viewers {
    min-width: 42px;
    text-align: end;
    font-weight: 800;
}

.mobile-sidebar .side-item{border-radius:10px; padding:14px 12px;}
.mobile-sidebar .side-item svg{width:18px; height:18px;}
.mobile-sidebar .side-item span{font-size:13px; font-weight:700;}
.mobile-sidebar .divider{margin:12px 0;}
.ms-content { padding: 15px 10px; flex: 1; }
.ms-lang { padding: 20px 15px; border-top: 1px solid #26262c; margin-top: auto; }
.ms-lang select { width: 100%; background: #26262c; color: white; padding: 10px; border: none; border-radius: 6px; font-size: 13px; outline: none; font-family: "KalamehWeb", "PeydaWeb", "IRANSansX", Tahoma, sans-serif !important;}

@media (max-height: 700px) {
    #mobileSideStreamersList .side-streamer:nth-last-child(-n+2) { display: none; }
}
.sidebar::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.message-row.personal-highlight {
    background-color: rgba(83, 252, 24, 0.15) !important;
    border-right: 3px solid #53fc18 !important;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease;
}

[dir="ltr"] .message-row.personal-highlight {
    border-right: none !important;
    border-left: 3px solid #53fc18 !important;
}

.message-row.normal-reply {
    background-color: transparent;
    border-right: none;
    border-left: none;
}


/* =========================================
   استایل دکمه هدر (جم)
========================================= */

.gem-dropdown-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

.header-gem-btn {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 8px;
    background-color: #18181b; 
    border: 1px solid rgba(83, 252, 24, 0.3); 
    border-radius: 6px; 
    padding: 7px 14px; 
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    direction: rtl;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: 0; 
}

.header-gem-btn:hover {
    border-color: #53FC18; 
    box-shadow: 0 0 10px rgba(83, 252, 24, 0.15); 
    background-color: #26262c;
}

.gem-svg-icon {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 2px rgba(83, 252, 24, 0.5)); 
}

.gem-amount {
    margin-top: 3px; 
    line-height: 1;
}

.mobile-header-actions {
    display: none; 
    align-items: center;
    gap: 8px;
}

@media (max-width: 849px) {
    .mobile-header-actions {
        display: flex; 
    }
    
    .mobile-gem-btn {
        margin-left: 0;
        padding: 6px 10px; 
    }
}


/* =========================================
   استایل پاپ‌آپ اسلایدر خرید (جم و سکه)
========================================= */

.gem-popup-menu {
    display: none; 
    position: absolute;
    top: 100%;
    /* در چیدمان راست‌چین (RTL)، برای جلوگیری از خروج پاپ‌آپ از صفحه، لبه چپ آن را تراز می‌کنیم */
    left: 0;
    right: auto;
    margin-top: 10px;
    width: 360px; /* فضای کافی برای 3 ستون */
    background-color: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    z-index: 1000;
    cursor: default;
    overflow: hidden; /* ضروری برای اسلایدر داخلی */
}

.gem-popup-menu.active {
    display: block;
    animation: fadeInDown 0.2s ease forwards;
}

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

/* هدر پاپ‌آپ و دکمه تغییر ارز */
.gem-popup-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #18181b;
    border-bottom: 1px solid #2a2a2f;
}

.popup-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.currency-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #26262c;
    border: 1px solid #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.currency-switcher:hover {
    background: #333;
    border-color: #555;
}

.switcher-icon {
    font-size: 14px;
}

/* ساختار اسلایدر */
.currency-slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.currency-slider-track {
    display: flex;
    width: 200%; /* شامل 2 اسلاید (جم و سکه) */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.currency-slide {
    width: 50%; /* نصف عرض Track یعنی 100% ویوپورت */
    flex-shrink: 0;
}

/* گرید پکیج‌ها داخل اسلایدها */
.gem-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px;
    max-height: 380px;
    overflow-y: auto;
}

/* اسکرول‌بار اختصاصی لیست پکیج‌ها */
.gem-packages-grid::-webkit-scrollbar {
    width: 5px;
}
.gem-packages-grid::-webkit-scrollbar-track {
    background: #111;
}
.gem-packages-grid::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}
.gem-packages-grid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* استایل فرم و دکمه‌های پکیج */
.gem-pack-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.gem-pack {
    width: 100%;
    background-color: #18181b;
    border: 1px solid #2a2a2f;
    border-radius: 8px;
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}

/* هاور پکیج جم (تم سبز) */
.gem-pack:hover {
    background-color: #26262c;
    border-color: #53FC18;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(83, 252, 24, 0.1);
}

/* هاور پکیج سکه (تم طلایی) */
.gem-pack.coin-border:hover {
    background-color: #26262c;
    border-color: #FFD700;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.1);
}

.gem-pack-info {
    font-size: 12px;
    color: #ccc;
    margin-top: 8px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

.gem-pack-info span {
    color: #fff;
    font-size: 12px;
    display: block;
    margin-top: 3px;
}

/* تنظیمات آیکون‌ها و رنگ‌بندی SVG */
.gem-pack-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
}

.gem-pack-icon svg {
    transition: all 0.3s ease;
}

/* رنگ آیکون‌های جم و سکه */
.gem-color svg { stroke: #53FC18; }
.coin-color svg { stroke: #FFD700; }

.gem-pack:hover .gem-pack-icon svg {
    transform: scale(1.15) translateY(-2px);
}

/* افکت‌های نئونی سطوح جم (سبز) */
.gem-pack.tier-1 .gem-color svg { filter: drop-shadow(0 0 2px rgba(83, 252, 24, 0.4)); width: 22px; height: 22px; }
.gem-pack.tier-2 .gem-color svg { filter: drop-shadow(0 0 4px rgba(83, 252, 24, 0.6)); width: 26px; height: 26px; }
.gem-pack.tier-3 .gem-color svg { filter: drop-shadow(0 0 6px rgba(83, 252, 24, 0.8)); width: 28px; height: 28px; }
.gem-pack.tier-4 .gem-color svg { filter: drop-shadow(0 0 8px rgba(83, 252, 24, 0.9)); width: 30px; height: 30px; }
.gem-pack.tier-5 .gem-color svg { filter: drop-shadow(0 0 10px rgba(83, 252, 24, 1)); width: 32px; height: 32px; }

/* افکت‌های نئونی سطوح سکه (طلایی) */
.gem-pack.tier-1 .coin-color svg { filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.4)); width: 22px; height: 22px; }
.gem-pack.tier-2 .coin-color svg { filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6)); width: 26px; height: 26px; }
.gem-pack.tier-3 .coin-color svg { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); width: 28px; height: 28px; }
.gem-pack.tier-4 .coin-color svg { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)); width: 30px; height: 30px; }
.gem-pack.tier-5 .coin-color svg { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 1)); width: 32px; height: 32px; }


/* Top hero banner */
.top-hero {
    position: relative;
    margin-bottom: 28px;
    border: none;
    border-radius: 0;
    background: #0e0e10;
    overflow: hidden;
    box-shadow: none;
}

.top-hero-main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(380px, 42%) minmax(0, 58%);
    min-height: 424px;
    isolation: isolate;
}

.top-hero-main.is-transitioning .top-hero-copy,
.top-hero-main.is-transitioning .top-hero-preview {
    opacity: 0;
    transform: translateY(8px);
}

.top-hero-main.is-transitioning .top-hero-loader {
    opacity: 1;
}

.top-hero-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid rgba(156,163,175,.28);
    border-top-color: #9ca3af;
    animation: topHeroSpin .8s linear infinite;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

@keyframes topHeroSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.top-hero-copy,
.top-hero-preview {
    transition: opacity .26s ease, transform .28s ease;
}

.top-hero-copy {
    position: relative;
    z-index: 2;
    padding: 34px 36px 92px;
    background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(14,14,16,.985) 56%, rgba(14,14,16,.42) 79%, rgba(14,14,16,0) 100%);
}

.top-hero-streamer { display:flex; align-items:flex-start; gap:16px; }
.top-hero-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.top-hero-name-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.top-hero-name { font-size:18px; font-weight:800; color:#fff; }
.top-hero-watchers { display:inline-flex; align-items:center; gap:5px; color:#8de95f; font-weight:700; font-size:13px; }
.top-hero-watchers svg { width:16px; height:16px; fill:currentColor; }
.top-hero-title { font-size:18px; line-height:1.75; color:#f4f4f5; font-weight:700; margin-bottom:8px; max-width:540px; }
.top-hero-meta { color:#d2d2d7; font-size:15px; margin-bottom:14px; }
.top-hero-tags { display:flex; flex-wrap:wrap; gap:8px; }
.top-hero-tag { padding:6px 12px; border-radius:999px; background:#35353b; color:#f4f4f5; font-size:13px; font-weight:600; }
.top-hero-empty-state { display:flex; align-items:center; justify-content:center; min-height:320px; width:100%; border:1px dashed rgba(255,255,255,.1); border-radius:24px; background:linear-gradient(180deg, rgba(19,23,27,.96), rgba(11,13,15,.96)); }
.top-hero-empty-copy { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:28px; color:#c7ced8; }
.top-hero-empty-copy strong { color:#fff; font-size:22px; font-weight:900; }
.top-hero-empty-copy span { max-width:520px; line-height:1.9; font-size:14px; }

.top-hero-preview {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #0e0e10;
    border-radius: 0;
}

.top-hero-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(14,14,16,0) 0%,
        rgba(14,14,16,0) 34%,
        rgba(14,14,16,.03) 49%,
        rgba(14,14,16,.12) 58%,
        rgba(14,14,16,.08) 71%,
        rgba(14,14,16,0) 100%);
    pointer-events: none;
}

[dir="rtl"] .top-hero-preview::after {
    background: linear-gradient(270deg,
        rgba(14,14,16,0) 0%,
        rgba(14,14,16,0) 34%,
        rgba(14,14,16,.03) 49%,
        rgba(14,14,16,.12) 58%,
        rgba(14,14,16,.08) 71%,
        rgba(14,14,16,0) 100%);
}

.top-hero-preview-link { display:block; width:100%; height:100%; }
.top-hero-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.top-hero-bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding: 22px 28px 18px;
    pointer-events:none;
}
.top-hero-bottom::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background:
        linear-gradient(180deg,
            rgba(14,14,16,0) 0%,
            rgba(14,14,16,.22) 28%,
            rgba(14,14,16,.74) 64%,
            rgba(14,14,16,.98) 100%);
    pointer-events: none;
    z-index: -1;
}
.top-hero-bottom::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: -4px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.08) 18%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 82%, rgba(255,255,255,0));
    pointer-events: none;
}
.top-hero-thumbs, .top-hero-controls { pointer-events:auto; }
.top-hero-thumbs {
    display:flex;
    gap:16px;
    align-items:center;
    transition: opacity .22s ease, transform .22s ease;
}
.top-hero-main.is-transitioning ~ .top-hero-bottom .top-hero-thumbs,
.top-hero-main.is-transitioning ~ .top-hero-bottom .top-hero-dots {
    opacity: .45;
}
.top-hero-thumb {
    position:relative;
    width:168px;
    height:96px;
    border:2px solid transparent;
    border-radius:2px;
    overflow:hidden;
    background:#18181b;
    padding:0;
    cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.top-hero-thumb:hover { transform:translateY(-2px); }
.top-hero-thumb.active { border-color:#53fc18; box-shadow: 0 0 0 1px rgba(83,252,24,.18); }
.top-hero-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.top-hero-thumb-overlay { position:absolute; left:0; right:0; bottom:0; padding:9px 10px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.82)); color:#fff; font-size:12px; font-weight:700; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.top-hero-controls { display:flex; align-items:center; gap:10px; }
.top-hero-arrow {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #eef0f3;
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top-hero-arrow:hover { transform: translateY(-1px) scale(1.03); color: #53fc18; }
.top-hero-arrow svg { width: 24px; height: 24px; display: block; overflow: visible; }
.top-hero-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.top-hero-dots { display:flex; align-items:center; gap:8px; transition: opacity .22s ease; }
.top-hero-dot { width:7px; height:7px; border:none; border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer; }
.top-hero-dot.active { background:#53fc18; transform:scale(1.1); }

@media (min-width: 1450px) {
    .content > * { width: min(100%, 1580px); }
    .top-hero-main { min-height: 430px; }
}

@media (min-width: 1800px) {
    .sidebar {
        width: 286px;
        padding: 20px 12px;
    }
    body.sidebar-collapsed .sidebar {
        width: 84px !important;
        min-width: 84px !important;
    }
    .side-item {
        gap: 14px;
        padding: 11px 12px;
        font-size: 15px;
    }
    .side-item svg {
        width: 21px;
        height: 21px;
    }
    .side-title {
        font-size: 13px;
    }
    .s-avatar-cont {
        width: 38px;
        height: 38px;
    }
    .s-name {
        font-size: 14px;
    }
    .s-meta, .s-viewers {
        font-size: 12px;
    }
    .content {
        padding: 24px 28px;
    }
    .content > * {
        width: min(100%, 1700px);
    }
    .section-title {
        font-size: 30px;
    }
    .all-cats-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
    .top-hero-main {
        grid-template-columns: minmax(440px, 44%) minmax(0, 56%);
        min-height: 470px;
    }
    .top-hero-copy {
        padding: 40px 40px 100px;
    }
    .top-hero-avatar {
        width: 58px;
        height: 58px;
    }
    .top-hero-name {
        font-size: 20px;
    }
    .top-hero-watchers {
        font-size: 14px;
    }
    .top-hero-title {
        font-size: 21px;
        max-width: 620px;
    }
    .top-hero-meta {
        font-size: 16px;
    }
    .top-hero-tag {
        font-size: 14px;
        padding: 7px 14px;
    }
    .top-hero-thumb {
        width: 180px;
        height: 102px;
        border-radius: 2px;
    }
    .top-hero-thumb-overlay {
        font-size: 13px;
    }
    .top-hero-arrow svg {
        width: 26px;
        height: 26px;
    }
    .top-hero-dot {
        width: 8px;
        height: 8px;
    }
}

@media (min-width: 2200px) {
    .content > * {
        width: min(100%, 1800px);
    }
    .top-hero-main {
        min-height: 480px;
    }
}


@media (min-width: 2400px) {
    .sidebar { width: 304px; }
    body.sidebar-collapsed .sidebar { width: 88px !important; min-width: 88px !important; }
    .side-item { font-size: 16px; padding: 12px 13px; }
    .side-item svg { width: 22px; height: 22px; }
    .s-name { font-size: 15px; }
    .s-meta, .s-viewers { font-size: 13px; }
    .content > * { width: min(100%, 1900px); }
    .top-hero-main { grid-template-columns: minmax(480px, 44%) minmax(0, 56%); min-height: 500px; }
    .top-hero-title { font-size: 22px; }
}

@media (max-width: 1199px) {
    .top-hero-main { grid-template-columns: minmax(290px, 42%) minmax(0, 58%); min-height: 370px; }
    .top-hero-thumb { width:144px; height:84px; }
}

@media (max-width: 849px) {
    .content > * { width: 100%; }
    .top-hero { margin-bottom: 22px; border-radius: 16px; }
    .top-hero-main { grid-template-columns: 1fr; min-height: auto; }
    .top-hero-copy, .top-hero-bottom, .top-hero-preview { background: #0e0e10; }
    .top-hero-copy { padding: 18px 18px 12px; }
    .top-hero-preview { min-height: 220px; }
    .top-hero-preview::after,
    [dir="rtl"] .top-hero-preview::after {
        background: linear-gradient(180deg,
            rgba(14,14,16,0) 0%,
            rgba(14,14,16,.03) 48%,
            rgba(14,14,16,.1) 64%,
            rgba(14,14,16,.02) 86%,
            rgba(14,14,16,0) 100%);
    }
    .top-hero-bottom { position: static; display:block; padding: 14px 14px 14px; }
    .top-hero-bottom::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        height: 120px;
    }
    .top-hero-bottom::after {
        left: 14px;
        right: 14px;
    }
    .top-hero-thumbs { overflow-x:auto; padding-bottom: 8px; }
    .top-hero-thumb { min-width:140px; width:140px; height:80px; border-radius:2px; }
    .top-hero-controls { justify-content:center; margin-top: 8px; }
    .top-hero-arrow { width: 32px; height: 32px; }
}

@media (max-width: 849px) {
    #sidebarOverlay { z-index: 99998 !important; }
    #mobileSidebar.mobile-sidebar { z-index: 99999 !important; }
    .mobile-sidebar { width: min(280px, 84vw); }
    .mobile-sidebar .side-item { padding: 13px 12px; }
    .mobile-sidebar .side-item span { font-size: 13px !important; }
    .mobile-sidebar .side-item svg { width: 18px !important; height: 18px !important; }
    .ms-title { font-size: 17px !important; }
    .ms-side-title { font-size: 14px !important; }
}

/* Home loading skeleton */
.is-home-loading .top-hero {
    display: block !important;
}

.sk {
    position: relative;
    overflow: hidden;
    background: #2b2e35;
}
.sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 100%);
    animation: skeletonShimmer 1.35s ease-in-out infinite;
}
@keyframes skeletonShimmer {
    100% { transform: translateX(100%); }
}
.sk-circle { border-radius: 999px; }
.sk-rect { border-radius: 2px; }
.sk-line { display: block; height: 12px; border-radius: 999px; }
.sk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }

.top-hero-skeleton {
    padding: 34px 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}
.top-hero-skeleton-avatar { width: 26px; height: 26px; }
.top-hero-skeleton-line { max-width: 330px; }
.top-hero-skeleton-line-lg { width: 82%; height: 14px; }
.top-hero-skeleton-line-md { width: 56%; }
.top-hero-skeleton-line-sm { width: 38%; }
.top-hero-skeleton-thumbs {
    margin-top: 42px;
    display: flex;
    gap: 8px;
}
.top-hero-skeleton-thumb,
.top-hero-mini-skeleton {
    width: 132px;
    height: 74px;
    border-radius: 8px;
}
.top-hero-skeleton-preview-wrap {
    padding: 40px 40px 26px 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.top-hero-skeleton-preview {
    width: 100%;
    min-height: 322px;
    border-radius: 14px;
}

.skeleton-streamer {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.s-avatar-skeleton {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.sk-line-side {
    width: 74px;
    height: 9px;
    margin-bottom: 6px;
}
.sk-line-side-sm {
    width: 54px;
    margin-bottom: 0;
}
.side-dot-skeleton {
    width: 10px;
    height: 10px;
    opacity: .75;
}

.category-skeleton {
    min-width: 172px;
    pointer-events: none;
}
.category-skeleton-media {
    width: 100%;
    aspect-ratio: 5 / 7;
    border-radius: 8px;
}
.category-skeleton-copy {
    padding: 8px 2px 0;
}
.category-skeleton-line {
    width: 68%;
    height: 11px;
    margin-bottom: 8px;
}
.category-skeleton-line-sm {
    width: 42%;
    margin-bottom: 0;
}

.stream-card-skeleton {
    pointer-events: none;
}
.stream-card-skeleton-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
}
.stream-card-skeleton-body {
    padding-top: 12px;
}
.stream-card-skeleton-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.stream-card-skeleton-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
.stream-card-skeleton-copy {
    flex: 1;
}
.stream-card-skeleton-line {
    width: 56%;
    height: 10px;
    margin-bottom: 8px;
}
.stream-card-skeleton-line-lg { width: 74%; }
.stream-card-skeleton-line-sm { width: 40%; margin-bottom: 0; }

@media (min-width: 1400px) {
    .top-hero-skeleton-preview { min-height: 360px; }
    .top-hero-skeleton-thumb,
    .top-hero-mini-skeleton { width: 144px; height: 82px; }
}

@media (max-width: 920px) {
    .top-hero-skeleton {
        padding: 18px 16px 18px;
        gap: 12px;
    }
    .top-hero-skeleton-preview-wrap {
        padding: 8px 16px 12px;
    }
    .top-hero-skeleton-preview { min-height: 220px; }
    .top-hero-skeleton-thumbs {
        margin-top: 18px;
        gap: 6px;
    }
    .top-hero-skeleton-thumb,
    .top-hero-mini-skeleton {
        width: 94px;
        height: 58px;
        border-radius: 7px;
    }
    .category-skeleton { min-width: 140px; }
}

.top-hero-preview-link{position:relative;overflow:hidden;}
.top-hero-preview-video,.top-hero-thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000;}
.top-hero-preview-image,.top-hero-thumb-image{transition:opacity .25s ease;display:block;width:100%;height:100%;object-fit:cover;}
.top-hero-thumb{position:relative;overflow:hidden;}


.top-hero-preview{aspect-ratio:16/9;}
.top-hero-preview-video{display:block;}
.stream-card .thumb{aspect-ratio:16/9;overflow:hidden;}
.stream-card .thumb video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}


/* ==== Homepage refinement patch ==== */
:root{
  --app-bg:#000000;
  --surface-panel:#000000;
  --surface-card:#000000;
  --muted-text:#a1a1aa;
  --kick-green:#53fc18;
}
body,.app,.sidebar,.content,.top-hero,.top-hero-copy,.top-hero-preview,.top-hero-bottom,.mobile-sidebar,.header{
  background:#000 !important;
}
.categories{
  margin-bottom:34px;
}
@media (min-width: 850px){
  .categories{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
    gap:14px !important;
    overflow:visible !important;
    padding-bottom:0 !important;
    align-items:start;
  }
}
@media (max-width: 849px){
  .categories{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    padding-bottom:12px !important;
  }
}
.category{
  min-width:0 !important;
  width:100%;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  padding-bottom:18px;
  position:relative;
}
.category:hover,
.category.active{
  transform:none !important;
  box-shadow:none !important;
}
.category::after.old{ display:none !important; }
.category::before,
.category::after{
  content:"";
  position:absolute;
  bottom:2px;
  width:12px;
  height:12px;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.category::before{
  left:0;
  border-left:4px solid var(--kick-green);
  border-bottom:4px solid var(--kick-green);
}
.category::after{
  right:0;
  border-right:4px solid var(--kick-green);
  border-bottom:4px solid var(--kick-green);
}
.category:hover::before,
.category:hover::after,
.category.active::before,
.category.active::after{
  opacity:1;
}
.category img{
  height:auto !important;
  aspect-ratio:3/4;
  border-radius:5px !important;
  background:#111;
  margin-bottom:10px;
}
.category .category-copy{
  padding:0 1px !important;
  background:transparent !important;
}
.category .category-name{
  display:block;
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  text-align:right;
  margin:0 0 4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.category .category-viewers{
  display:block;
  color:var(--muted-text);
  font-size:12px;
  line-height:1.15;
  text-align:right;
  margin-top:5px;
}
.stream-card{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
  position:relative;
  padding-bottom:18px;
  content-visibility:auto;
  contain-intrinsic-size: 320px 260px;
}
.stream-card:hover{
  transform:none !important;
  box-shadow:none !important;
}
.stream-card::before,
.stream-card::after{
  content:"";
  position:absolute;
  bottom:2px;
  width:12px;
  height:12px;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.stream-card::before{
  left:0;
  border-left:4px solid var(--kick-green);
  border-bottom:4px solid var(--kick-green);
}
.stream-card::after{
  right:0;
  border-right:4px solid var(--kick-green);
  border-bottom:4px solid var(--kick-green);
}
.stream-card:hover::before,
.stream-card:hover::after{
  opacity:1;
}
.thumb{
  border-radius:5px !important;
  overflow:hidden !important;
  background:#111 !important;
}
.stream-title{
  padding:10px 0 0 !important;
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
.stream-info{
  padding:8px 0 0 !important;
  background:transparent !important;
}
.stream-meta{
  gap:10px !important;
}
.follow-btn{
  border-radius:999px !important;
}
.viewers{
  bottom:10px !important;
  left:10px !important;
  right:auto !important;
  background:rgba(0,0,0,.72) !important;
  border-radius:999px !important;
  padding:4px 9px !important;
  font-size:12px !important;
  font-weight:700 !important;
}
[dir="rtl"] .viewers{
  left:auto !important;
  right:10px !important;
}
.top-hero-copy{
  background:linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 52%, rgba(0,0,0,.62) 76%, rgba(0,0,0,0) 100%) !important;
}
.top-hero-preview::after{
  background:linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 38%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.48) 66%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.98) 100%) !important;
}
[dir="rtl"] .top-hero-preview::after{
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 38%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.48) 66%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.98) 100%) !important;
}
.top-hero-main{
  min-height:320px !important;
}
@media (min-width:850px){
  .top-hero-main{
    grid-template-columns:minmax(360px,38%) minmax(0,62%) !important;
  }
}

/* v10 hero layout refinements */
@media (min-width: 850px){
  .top-hero{position:relative;overflow:visible;}
  .top-hero-main{min-height:260px !important;grid-template-columns:minmax(360px,38%) minmax(0,62%) !important;}
  .top-hero-copy{position:relative;padding:26px 30px 120px !important;z-index:3;}
  .top-hero-preview{min-height:260px !important;aspect-ratio:auto !important;}
  .top-hero-bottom{
    position:absolute !important;
    right:34px !important;
    bottom:20px !important;
    left:auto !important;
    width:460px !important;
    padding:0 !important;
    background:transparent !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    gap:14px !important;
    z-index:4;
  }
  [dir="rtl"] .top-hero-bottom{right:34px !important;left:auto !important;flex-direction:row-reverse !important;}
  .top-hero-bottom::before,.top-hero-bottom::after{display:none !important;content:none !important;}
  .top-hero-thumbs{justify-content:flex-end !important;gap:12px !important;width:auto !important;order:1;}
  .top-hero-thumb{width:118px !important;height:68px !important;border-radius:5px !important;border-width:1px !important;flex:0 0 auto;}
  .top-hero-thumb img,.top-hero-thumb video{border-radius:5px !important;}
  .top-hero-thumb-overlay{padding:6px 8px !important;font-size:11px !important;}
  .top-hero-controls{display:flex !important;align-items:center !important;gap:10px !important;order:2;}
  [dir="rtl"] .top-hero-controls{order:0 !important;}
  .top-hero-dots{gap:7px !important;}
  .top-hero-arrow{width:22px !important;height:22px !important;opacity:.88;}
  .top-hero-arrow svg{width:18px !important;height:18px !important;}
}
@media (max-width: 849px){
  .top-hero-thumb{border-radius:5px !important;}
}
.category,.stream-card{overflow:visible !important;}
.category::before,.category::after,.stream-card::before,.stream-card::after{
  bottom:1px !important;
  width:14px !important;
  height:14px !important;
  z-index:6 !important;
}
.category::before,.stream-card::before{left:4px !important;}
.category::after,.stream-card::after{right:4px !important;}
.category::before,.category::after{bottom:8px !important;}
.categories,.category-rows,.stream-row,.streams-grid,.category-streams{overflow:visible !important;}


/* v7 category right-corner fix */
.category::before,
.category::after{
  background: transparent !important;
  border-radius: 0 !important;
  left: auto !important;
}
.category::before{
  left: 4px !important;
  right: auto !important;
}
.category::after{
  right: 4px !important;
  left: auto !important;
  background: transparent !important;
}


/* v8 hero refinements */
.top-hero-main.is-transitioning .top-hero-copy,
.top-hero-main.is-transitioning .top-hero-preview{
  opacity:.72 !important;
  filter:saturate(.92) brightness(.9);
  transition:opacity .26s ease, filter .26s ease !important;
}
.top-hero-arrow{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  width:28px !important;
  height:28px !important;
  padding:0 !important;
  color:rgba(255,255,255,.92) !important;
  transition:transform .18s ease, opacity .2s ease, color .2s ease !important;
}
.top-hero-arrow:hover{
  transform:none !important;
  color:rgba(255,255,255,.92) !important;
}
.top-hero-arrow:active{
  transform:scale(.9) !important;
  color:#53fc18 !important;
}
.top-hero-arrow svg{width:20px !important;height:20px !important;}
.top-hero-arrow path{stroke-width:2.4 !important;}
@media (min-width: 850px){
  .top-hero-main{min-height:286px !important;grid-template-columns:minmax(360px,37%) minmax(0,63%) !important;}
  .top-hero-copy{padding-bottom:104px !important;}
  .top-hero-bottom{
    right:36px !important;
    bottom:22px !important;
    width:auto !important;
    display:flex !important;
    align-items:flex-end !important;
    gap:14px !important;
  }
  [dir="rtl"] .top-hero-bottom{right:36px !important;left:auto !important;}
  .top-hero-thumbs{justify-content:flex-end !important;gap:12px !important;flex-direction:row !important;}
  .top-hero-thumb{width:118px !important;height:68px !important;border-radius:5px !important;}
  .top-hero-thumb img,.top-hero-thumb video{border-radius:5px !important;}
  .top-hero-thumb-overlay{font-size:11px !important;padding:6px 8px !important;}
  .top-hero-controls{display:flex !important;align-items:center !important;gap:10px !important;order:-1;}
  .top-hero-dots{gap:7px !important;}
}
@media (max-width: 849px){
  .top-hero-arrow{width:30px !important;height:30px !important;}
}


/* v9 hero layout tighten */
.top-hero,
.top-hero-main,
.top-hero-bottom,
.top-hero-preview,
.top-hero-preview-link{
  border-bottom:none !important;
  box-shadow:none !important;
}
.top-hero-bottom,
.top-hero-bottom::before,
.top-hero-bottom::after{
  background:none !important;
}
@media (min-width: 850px){
  .top-hero-main{
    min-height: 228px !important;
    grid-template-columns:minmax(360px,36%) minmax(0,64%) !important;
  }
  .top-hero-copy{
    padding-bottom: 88px !important;
  }
  .top-hero-preview{
    min-height: 228px !important;
    aspect-ratio: auto !important;
  }
  .top-hero-bottom{
    right: 32px !important;
    bottom: 18px !important;
    left: auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 14px !important;
  }
  [dir="rtl"] .top-hero-bottom{
    right: 32px !important;
    left: auto !important;
    flex-direction: row-reverse !important;
  }
  .top-hero-thumbs{
    order: 2 !important;
    justify-content: flex-end !important;
    gap: 14px !important;
  }
  .top-hero-thumb{
    width: 136px !important;
    height: 78px !important;
    border-radius: 5px !important;
  }
  .top-hero-controls{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-inline-start: 0 !important;
  }
}

@media (min-width:1450px){.top-hero-main{min-height:300px !important;}}
@media (min-width:1800px){.top-hero-main{min-height:320px !important;}}


/* v11 hero size + thumb controls fix */
.top-hero,
.top-hero-main,
.top-hero-bottom,
.top-hero-preview,
.top-hero-preview-link{
  border:none !important;
  box-shadow:none !important;
}
.top-hero-main{
  min-height:220px !important;
  grid-template-columns:minmax(360px,40%) minmax(0,60%) !important;
}
.top-hero-copy{
  padding:24px 28px 104px !important;
}
.top-hero-preview{
  min-height:220px !important;
  height:220px !important;
  aspect-ratio:auto !important;
}
.top-hero-preview img,
.top-hero-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.top-hero-bottom,
.top-hero-bottom::before,
.top-hero-bottom::after{
  border:none !important;
  background-image:none !important;
  box-shadow:none !important;
}
.top-hero-bottom{
  position:absolute !important;
  right:36px !important;
  left:auto !important;
  bottom:18px !important;
  display:flex !important;
  align-items:flex-end !important;
  gap:14px !important;
  padding:0 !important;
  width:auto !important;
  z-index:5 !important;
}
[dir="rtl"] .top-hero-bottom{
  right:36px !important;
  left:auto !important;
  flex-direction:row !important;
}
.top-hero-thumbs{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-end !important;
  gap:12px !important;
  width:auto !important;
  order:1 !important;
}
.top-hero-thumb{
  width:136px !important;
  height:80px !important;
  border-radius:5px !important;
  border-width:1px !important;
  flex:0 0 auto !important;
}
.top-hero-thumb img,
.top-hero-thumb video{
  border-radius:5px !important;
}
.top-hero-thumb-overlay{
  padding:6px 8px !important;
  font-size:11px !important;
}
.top-hero-controls{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  order:0 !important;
}
.top-hero-arrow{
  width:26px !important;
  height:26px !important;
}
.top-hero-arrow svg{
  width:18px !important;
  height:18px !important;
}
.top-hero-dots{gap:7px !important;}
@media (min-width:1450px){
  .top-hero-main{min-height:240px !important;}
  .top-hero-preview{min-height:240px !important;height:240px !important;}
}
@media (max-width:1024px){
  .top-hero-main{min-height:auto !important;}
  .top-hero-preview{min-height:220px !important;height:auto !important;}
  .top-hero-bottom{position:static !important;right:auto !important;bottom:auto !important;padding:14px 14px 0 !important;}
  [dir="rtl"] .top-hero-bottom{flex-direction:row !important;}
  .top-hero-thumb{width:140px !important;height:82px !important;}
}


/* v12 hero final balance */
.top-hero, .top-hero-main, .top-hero-preview, .top-hero-bottom, .top-hero-bottom::before, .top-hero-bottom::after {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.top-hero-main{
  min-height: 180px !important;
  grid-template-columns: minmax(380px, 42%) minmax(0, 58%) !important;
  align-items: center !important;
}
.top-hero-copy{
  padding: 20px 28px 108px !important;
  align-self: center !important;
}
.top-hero-preview{
  min-height: 0 !important;
  height: auto !important;
  width: 92% !important;
  max-width: 92% !important;
  margin-inline-start: auto !important;
  aspect-ratio: 16 / 9 !important;
  align-self: center !important;
}
.top-hero-preview img,
.top-hero-preview video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.top-hero-bottom{
  position: absolute !important;
  right: 36px !important;
  left: auto !important;
  bottom: 16px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  padding: 0 !important;
  z-index: 5 !important;
}
[dir="rtl"] .top-hero-bottom{
  right: 36px !important;
  left: auto !important;
  flex-direction: row-reverse !important;
}
.top-hero-thumbs{
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  order: 1 !important;
}
.top-hero-thumb{
  width: 154px !important;
  height: 92px !important;
  border-radius: 5px !important;
  flex: 0 0 auto !important;
}
.top-hero-thumb img,
.top-hero-thumb video{
  border-radius: 5px !important;
}
.top-hero-controls{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  order: 2 !important;
}
.top-hero-arrow{
  width: 24px !important;
  height: 24px !important;
}
.top-hero-arrow svg{
  width: 18px !important;
  height: 18px !important;
}
.top-hero-dots{ gap: 7px !important; }
@media (min-width:1450px){
  .top-hero-main{ min-height: 200px !important; }
  .top-hero-preview{ min-height: 0 !important; height: auto !important; aspect-ratio: 16 / 9 !important; }
}
@media (max-width:1024px){
  .top-hero-main{ min-height: auto !important; }
  .top-hero-preview{ min-height: 220px !important; height: auto !important; width: 100% !important; max-width: 100% !important; margin-inline-start: 0 !important; aspect-ratio: 16 / 9 !important; }
  .top-hero-bottom{ position: static !important; right: auto !important; left: auto !important; bottom: auto !important; padding: 14px 14px 0 !important; }
  [dir="rtl"] .top-hero-bottom{ flex-direction: row !important; }
  .top-hero-thumb{ width: 140px !important; height: 82px !important; }
  .top-hero-controls{ order: 0 !important; }
}


/* homepage category sections */
.home-category-sections{display:flex;flex-direction:column;gap:34px;margin-top:34px;}
.category-stream-section{display:flex;flex-direction:column;gap:18px;}
.section-divider-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;border-top:1px solid #1f1f23;}
.section-divider-title{font-size:24px;font-weight:800;line-height:1.2;color:#fff;}
.section-divider-link,.all-cats-btn,.show-more-btn{color:#d9d9de;text-decoration:none;font-size:15px;font-weight:600;transition:opacity .2s ease,color .2s ease;}
.section-divider-link:hover,.all-cats-btn:hover,.show-more-btn:hover{color:#fff;opacity:1;}
.homepage-category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:start;}
@media (max-width:1510px) and (min-width:1200px){.homepage-category-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:1199px) and (min-width:1030px){.homepage-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:1029px) and (min-width:850px){.homepage-category-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.category-stream-empty{padding:22px 0;color:#a1a1aa;grid-column:1/-1;text-align:center;}
.show-more-divider{display:flex;align-items:center;justify-content:center;gap:22px;margin:12px 0 46px;}
.show-more-divider::before,.show-more-divider::after{content:"";height:1px;background:#1f1f23;flex:1;min-width:80px;}
.show-more-btn{background:none;border:none;cursor:pointer;padding:0 6px;}
.skeleton-divider .section-divider-skel-title{width:180px;height:18px;border-radius:8px;}
.skeleton-divider .section-divider-skel-link{width:90px;height:14px;border-radius:8px;}
@media (max-width:1499px) and (min-width:850px){.homepage-category-grid{gap:16px;}}
@media (max-width:849px){
  .home-category-sections{gap:28px;margin-top:28px;}
  .section-divider-header{padding-top:12px;}
  .section-divider-title{font-size:20px;}
  .homepage-category-grid{display:flex;overflow-x:auto;gap:14px;padding-bottom:10px;scroll-snap-type:x proximity;}
  .homepage-category-grid .stream-card{min-width:260px;flex:0 0 260px;scroll-snap-align:start;}
}

.category-stream-page{display:flex;flex-direction:column;gap:18px;}
.category-page-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:start;}
@media (max-width:1499px) and (min-width:850px){.category-page-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:1100px) and (min-width:850px){.category-page-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:849px){.category-page-grid{grid-template-columns:1fr;gap:16px;}}

/* v22 mobile homepage refinements */
@media (max-width: 849px) {
  /* top hero: keep preview large, full bleed, no black fade */
  .content { padding-left: 16px; padding-right: 16px; }
  .top-hero {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .top-hero-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .top-hero-preview {
    order: 1 !important;
    min-height: 0 !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .top-hero-preview::after,
  [dir="rtl"] .top-hero-preview::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }
  .top-hero-preview img,
  .top-hero-preview video,
  .top-hero-preview-link {
    border-radius: 0 !important;
  }
  .top-hero-copy {
    order: 2 !important;
    padding: 14px 16px 10px !important;
    background: #000 !important;
  }
  .top-hero-bottom {
    padding: 10px 16px 0 !important;
    background: #000 !important;
  }
  .top-hero-bottom::before,
  .top-hero-bottom::after {
    display: none !important;
  }
  .top-hero-thumbs {
    gap: 10px !important;
    padding-bottom: 6px !important;
  }
  .top-hero-thumb {
    min-width: 148px !important;
    width: 148px !important;
    height: 84px !important;
    border-radius: 5px !important;
  }
  .top-hero-thumb img,
  .top-hero-thumb video,
  .top-hero-thumb-overlay { border-radius: 5px !important; }

  /* top categories smaller, still horizontal */
  .categories {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 28px !important;
    scroll-snap-type: x proximity !important;
  }
  .category {
    width: 104px !important;
    min-width: 104px !important;
    flex: 0 0 104px !important;
    padding-bottom: 22px !important;
  }
  .category img {
    margin-bottom: 8px !important;
  }
  .category .category-name {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }
  .category .category-viewers {
    font-size: 11px !important;
    margin-top: 5px !important;
  }

  /* lower live sections: horizontal cards like categories */
  .home-category-sections {
    gap: 24px !important;
    margin-top: 24px !important;
  }
  .category-stream-section {
    gap: 12px !important;
  }
  .section-divider-header {
    padding-top: 10px !important;
    margin-bottom: 2px !important;
  }
  .section-divider-title {
    font-size: 18px !important;
  }
  .section-divider-link {
    font-size: 13px !important;
  }
  .homepage-category-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x proximity !important;
  }
  .homepage-category-grid .stream-card {
    min-width: 220px !important;
    width: 220px !important;
    flex: 0 0 220px !important;
    scroll-snap-align: start !important;
  }
}

@media (max-width: 849px){
  .categories{
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  .categories .category{
    scroll-snap-align:start !important;
  }
}


.s-live-indicator{width:10px;height:10px;border-radius:50%;background:#53fc18;box-shadow:0 0 0 2px rgba(83,252,24,.10);flex-shrink:0}
.s-status-stack{display:flex;align-items:center;gap:6px;flex-shrink:0}
.s-viewers.live::before{content:'●';color:#53fc18;margin-inline-end:6px;display:inline-block;font-size:10px;line-height:1;vertical-align:middle}
.s-viewers.live{color:#f3f4f6;font-weight:700}
.mobile-sidebar #mobileSideFollowingList .side-streamer{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.mobile-sidebar #mobileSideFollowingList .s-status-stack{margin-inline-start:8px}

/* v27 following sidebar fixes */
.s-status-stack{gap:6px;}
.s-viewers.live::before{content:'●';color:#53fc18;margin-inline-end:6px;display:inline-block;font-size:10px;line-height:1;vertical-align:middle}
.s-live-indicator{order:2;}
.s-viewers.live{color:#f3f4f6;font-weight:700}

/* v28b sidebar live cleanup */
.s-live-indicator{display:none !important;}
body.sidebar-collapsed .s-status-stack{display:none !important;}
body.sidebar-collapsed .side-streamer .s-viewers.live::before{content:none !important;}

/* v30 desktop categories single-row adaptive + no wrap */
@media (min-width: 850px){
  .categories{
    display:grid !important;
    grid-template-columns:repeat(13, minmax(0, 1fr));
    gap:12px !important;
    overflow:hidden !important;
    padding-bottom:12px !important;
    align-items:start;
  }
  .categories .category{
    width:100%;
    min-width:0 !important;
    flex:unset !important;
  }
  .categories .category:nth-child(n+14){display:none !important;}
}
@media (min-width: 850px) and (max-width: 1540px){
  .categories{grid-template-columns:repeat(12, minmax(0, 1fr));gap:11px !important;}
  .categories .category:nth-child(n+13){display:none !important;}
}
@media (min-width: 850px) and (max-width: 1430px){
  .categories{grid-template-columns:repeat(11, minmax(0, 1fr));gap:11px !important;}
  .categories .category:nth-child(n+12){display:none !important;}
}
@media (min-width: 850px) and (max-width: 1320px){
  .categories{grid-template-columns:repeat(10, minmax(0, 1fr));gap:10px !important;}
  .categories .category:nth-child(n+11){display:none !important;}
}
@media (min-width: 850px) and (max-width: 1210px){
  .categories{grid-template-columns:repeat(9, minmax(0, 1fr));gap:10px !important;}
  .categories .category:nth-child(n+10){display:none !important;}
}
@media (min-width: 850px) and (max-width: 1110px){
  .categories{grid-template-columns:repeat(8, minmax(0, 1fr));gap:10px !important;}
  .categories .category:nth-child(n+9){display:none !important;}
}
@media (min-width: 850px) and (max-width: 990px){
  .categories{grid-template-columns:repeat(7, minmax(0, 1fr));gap:9px !important;}
  .categories .category:nth-child(n+8){display:none !important;}
}
@media (min-width: 850px) and (max-width: 900px){
  .categories{grid-template-columns:repeat(6, minmax(0, 1fr));gap:9px !important;}
  .categories .category:nth-child(n+7){display:none !important;}
}
@media (max-width: 849px){
  .categories{
    display:flex !important;
    overflow-x:auto !important;
    gap:12px !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .categories .category{
    min-width:110px !important;
    flex:0 0 110px !important;
    scroll-snap-align:start;
  }
}

body.sidebar-collapsed .s-status-stack{display:none !important;}
body.sidebar-collapsed .side-streamer .s-viewers.live::before{content:none !important;}
body.sidebar-collapsed .side-streamer.is-online{
  position:relative;
}
body.sidebar-collapsed .side-streamer.is-online .s-profile{
  position:relative;
  display:flex;
  justify-content:center;
}
body.sidebar-collapsed .side-streamer.is-online .s-avatar-cont{
  position:relative;
}
body.sidebar-collapsed .side-streamer.is-online .s-avatar-cont::after{
  content:"";
  position:absolute;
  left:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#53fc18;
  border:2px solid #0b0b0c;
  box-shadow:0 0 0 1px rgba(83,252,24,.18);
  z-index:4;
}
body.sidebar-collapsed .side-streamer.is-offline .s-avatar-cont::after{
  display:none !important;
}


.mobile-search-trigger,
.mobile-profile-btn{display:none;}
.mobile-search-modal{position:fixed;inset:0;z-index:100001;background:#0b0b0c;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.mobile-search-modal.active{opacity:1;pointer-events:auto;}
.mobile-search-sheet{width:100%;height:100dvh;display:flex;flex-direction:column;background:#0b0b0c;}
.mobile-search-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;border-bottom:1px solid rgba(255,255,255,.06);}
.mobile-search-close{width:36px;height:36px;border:none;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer;flex:none;}
.mobile-search-input-wrap{flex:1;display:flex;align-items:center;gap:8px;background:#111214;border:1px solid #232327;border-radius:10px;padding:0 12px;min-height:42px;}
.mobile-search-input-icon{width:17px;height:17px;color:#8d8d95;flex:none;}
.mobile-search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:#fff;font-size:14px;font-weight:700;}
.mobile-search-input::placeholder{color:#8e8e97}
.mobile-search-body{flex:1;overflow:auto;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 16px);}
.mobile-search-block + .mobile-search-block{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);}
.mobile-search-section-title{font-size:12px;font-weight:800;color:#adadb8;margin-bottom:8px;}
.mobile-search-list{display:flex;flex-direction:column;gap:1px;}
.mobile-search-item{display:flex;align-items:center;gap:10px;width:100%;color:#fff;text-decoration:none;padding:7px 6px;border-radius:9px;background:transparent;min-height:52px;}
.mobile-search-item:active{background:#151519}
.mobile-search-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:#101012;}
.mobile-search-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}
.mobile-search-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mobile-search-name{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-search-title{font-size:12px;color:#d4d4da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;}
.mobile-search-meta{font-size:11px;color:#8f8f98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.mobile-search-viewers{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:11px;font-weight:800;flex:none;}
.mobile-search-live-dot{width:7px;height:7px;border-radius:50%;background:#56fc18;display:inline-block;}
.mobile-search-history-item-wrap{display:block;}
.mobile-search-history-item{display:flex;align-items:center;gap:10px;border:none;width:100%;background:transparent;color:#fff;padding:8px 3px;text-align:right;min-height:42px;}
.mobile-search-history-clock{width:15px;height:15px;color:#7f7f88;flex:none;}
.mobile-search-history-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;}
.mobile-search-history-remove{width:28px;height:28px;border:none;background:transparent;color:#8d8d95;font-size:19px;line-height:1;flex:none;}
.mobile-search-empty{color:#8f8f98;font-size:12px;padding:5px 2px;}
@media (max-width: 849px) {
    .mobile-search-trigger,.mobile-profile-btn{display:inline-flex;align-items:center;justify-content:center;}
    .mobile-search-trigger{width:38px;height:38px;border:none;background:transparent;color:#fff;border-radius:10px;padding:0;}
    .mobile-search-trigger svg{width:22px;height:22px}
    .mobile-profile-btn{width:38px;height:38px;border:none;background:transparent;padding:0;border-radius:50%;overflow:hidden;flex:none;}
    .mobile-profile-btn img{width:100%;height:100%;object-fit:cover;display:block;}
}


/* v34 mobile search overlay above everything + mobile stream cards peek */
@media (max-width: 849px){
  .mobile-search-modal{z-index:2147483000 !important; isolation:isolate;}
  .mobile-search-sheet{position:relative; z-index:2147483000; min-height:100dvh;}
  body.mobile-search-open #mobileSidebar,
  body.mobile-search-open #sidebarOverlay,
  body.mobile-search-open header,
  body.mobile-search-open .header,
  body.mobile-search-open .topbar{z-index:1 !important;}

  .homepage-category-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:16px !important;
    overscroll-behavior-x:contain !important;
    gap:12px !important;
    padding-inline:16px 20px !important;
    margin-inline:-16px !important;
  }
  .homepage-category-grid .stream-card{
    min-width:76vw !important;
    width:76vw !important;
    max-width:292px !important;
    flex:0 0 76vw !important;
    scroll-snap-align:start !important;
  }
}
@media (max-width: 430px){
  .homepage-category-grid .stream-card{
    min-width:78vw !important;
    width:78vw !important;
    flex-basis:78vw !important;
  }
}


/* v35 mobile polish: hide stream scroller bars, dashboard profile, hero controls below thumbs, no visible loader */
@media (max-width: 849px){
  .homepage-category-grid{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .homepage-category-grid::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:transparent !important;
  }
  .homepage-category-grid .stream-card{
    min-width:74vw !important;
    width:74vw !important;
    flex:0 0 74vw !important;
    max-width:320px !important;
  }
  .top-hero-bottom{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
    right:auto !important;
    left:0 !important;
    bottom:auto !important;
    position:static !important;
    padding:12px 14px 0 !important;
    margin:0 auto !important;
  }
  [dir="rtl"] .top-hero-bottom{
    flex-direction:column !important;
    right:auto !important;
    left:0 !important;
  }
  .top-hero-thumbs{
    order:1 !important;
    justify-content:center !important;
    width:100% !important;
    padding-bottom:2px !important;
  }
  .top-hero-controls{
    order:2 !important;
    justify-content:center !important;
    width:100% !important;
    margin-top:0 !important;
  }
  .top-hero-dots{
    justify-content:center !important;
  }
}
.top-hero-main.is-transitioning .top-hero-loader{
  opacity:0 !important;
}
.top-hero-loader{
  display:none !important;
  opacity:0 !important;
  animation:none !important;
}
.top-hero-main.is-transitioning .top-hero-copy,
.top-hero-main.is-transitioning .top-hero-preview{
  opacity:.82 !important;
  transform:none !important;
}

/* v36 mobile scroll gesture + hero flush and fixed-height copy */
@media (max-width: 849px){
  .categories,
  .homepage-category-grid,
  .top-hero-thumbs{
    touch-action:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
  }

  .top-hero{
    margin-top:-20px !important;
    margin-inline:-20px !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  .top-hero-main{
    display:flex !important;
    flex-direction:column !important;
    min-height:auto !important;
  }
  .top-hero-preview{
    order:1 !important;
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:0 !important;
    margin:0 !important;
  }
  .top-hero-preview,
  .top-hero-preview-link,
  .top-hero-preview img,
  .top-hero-preview video{
    border-radius:0 !important;
  }
  .top-hero-copy{
    order:2 !important;
    padding:14px 16px 10px !important;
    min-height:158px !important;
    max-height:158px !important;
    overflow:hidden !important;
    background:#0e0e10 !important;
  }
  .top-hero-streamer{
    gap:12px !important;
  }
  .top-hero-name-row{margin-bottom:6px !important;}
  .top-hero-title{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    line-height:1.6 !important;
    min-height:3.2em !important;
    margin-bottom:6px !important;
  }
  .top-hero-meta{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    margin-bottom:10px !important;
  }
  .top-hero-tags{
    overflow:hidden !important;
    max-height:32px !important;
    gap:6px !important;
  }
  .top-hero-tag{
    padding:5px 10px !important;
    font-size:12px !important;
    border-radius:999px !important;
  }
  .top-hero-bottom{
    padding:10px 14px 2px !important;
  }
}


/* v36b mobile hero revert + fixed height */
@media (max-width: 849px){
  .top-hero{
    margin-top:0 !important;
    margin-inline:0 !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }
  .top-hero-main{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    align-items:stretch !important;
  }
  .top-hero-preview{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    aspect-ratio:16 / 9 !important;
    min-height:220px !important;
    height:auto !important;
    border-radius:0 !important;
  }
  .top-hero-preview,
  .top-hero-preview-link,
  .top-hero-preview img,
  .top-hero-preview video{
    border-radius:0 !important;
  }
  .top-hero-copy{
    order:2 !important;
    padding:16px 16px 10px !important;
    min-height:150px !important;
    max-height:150px !important;
    overflow:hidden !important;
    background:#0e0e10 !important;
  }
  .top-hero-streamer{gap:12px !important; align-items:flex-start !important;}
  .top-hero-name-row{margin-bottom:6px !important;}
  .top-hero-title{
    display:block !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    line-height:1.7 !important;
    min-height:auto !important;
    margin-bottom:6px !important;
    max-width:100% !important;
  }
  .top-hero-meta{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    margin-bottom:8px !important;
  }
  .top-hero-tags{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow:hidden !important;
    max-height:30px !important;
    min-height:30px !important;
  }
  .top-hero-tag{
    padding:5px 10px !important;
    font-size:12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
  .top-hero-bottom{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    gap:10px !important;
    padding:12px 14px 0 !important;
    margin:0 auto !important;
    right:auto !important;
    left:0 !important;
    bottom:auto !important;
  }
  [dir="rtl"] .top-hero-bottom{
    flex-direction:column !important;
    right:auto !important;
    left:0 !important;
  }
  .top-hero-thumbs{
    order:1 !important;
    justify-content:center !important;
    width:100% !important;
    padding-bottom:2px !important;
  }
  .top-hero-controls{
    order:2 !important;
    justify-content:center !important;
    width:100% !important;
    margin-top:0 !important;
  }
}


/* v37 mobile hero black full-bleed + stable autoplay loading */
@media (max-width: 849px){
  .top-hero{
    background:#000000 !important;
    border-radius:0 !important;
    margin-top:-20px !important;
    margin-left:-16px !important;
    margin-right:-16px !important;
    width:calc(100% + 32px) !important;
    overflow:hidden !important;
  }
  .top-hero-main,
  .top-hero-copy,
  .top-hero-preview,
  .top-hero-bottom{
    background:#000000 !important;
    border-radius:0 !important;
  }
  .top-hero-preview,
  .top-hero-preview-link,
  .top-hero-preview img,
  .top-hero-preview video{
    border-radius:0 !important;
  }
  .top-hero-preview::after,
  [dir="rtl"] .top-hero-preview::after{
    display:none !important;
    content:none !important;
    background:none !important;
  }
  .top-hero-copy{
    padding:14px 16px 10px !important;
  }
  .top-hero-bottom{
    padding:10px 16px 0 !important;
    background:#000000 !important;
  }
  .top-hero-thumbs{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .top-hero-thumbs::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
}


/* v38 hero thumbs image-only + sane loader */
.top-hero-thumb-video{display:none !important;}
.top-hero-thumb-image{display:block !important;opacity:1 !important;}
.top-hero-loader{display:flex !important;align-items:center;justify-content:center;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .2s ease;}
.top-hero-loader::before{content:"";width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:#53fc18;animation:heroSpin .8s linear infinite;}
.top-hero-loader.is-visible{opacity:1 !important;}
.top-hero-main.is-ready .top-hero-loader{opacity:0 !important;}
.top-hero-main.is-transitioning .top-hero-loader{opacity:0 !important;}
.top-hero-main.is-transitioning .top-hero-copy,.top-hero-main.is-transitioning .top-hero-preview{opacity:.9 !important;}
@keyframes heroSpin{to{transform:rotate(360deg);}}

/* vNext: category view-all mobile width fix */
@media (max-width: 849px){
  .category-stream-page,
  .category-page-grid{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
  .category-page-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
  .category-page-grid > *{
    min-width:0 !important;
    max-width:100% !important;
  }
  .category-page-grid .stream-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    box-sizing:border-box !important;
  }
  .category-page-grid .thumb,
  .category-page-grid .thumb img,
  .category-page-grid .thumb video{
    width:100% !important;
    max-width:100% !important;
  }
  .category-page-grid .stream-title,
  .category-page-grid .stream-info,
  .category-page-grid .stream-meta{
    min-width:0 !important;
  }
}

.stream-card .thumb img,.stream-card .avatar,.top-hero-preview-image,.top-hero-thumb-image,.top-hero-avatar{backface-visibility:hidden;}

/* KickIrani speed UX */
html.ki-page-loading body{cursor:progress}
img{content-visibility:auto}

/* KickIrani PJAX fast internal navigation */
html.ki-pjax-loading body { cursor: progress; }
#kiPjaxProgress {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 5px;
    z-index: 2147483647;
    background: #54F712;
    box-shadow: 0 0 18px rgba(84, 247, 18, .82);
    opacity: 0;
    pointer-events: none;
    transition: width .22s ease-out, opacity .12s ease;
}
#kiPjaxProgress.active {
    opacity: 1;
}



/* Site announcement + smooth language switching */
.site-announcement-banner{display:flex;gap:12px;align-items:flex-start;background:rgba(83,252,24,.08);border:1px solid rgba(83,252,24,.28);color:#eaffdf;border-radius:14px;padding:13px 15px;margin-bottom:18px;line-height:1.9;font-size:14px}
.site-announcement-dot{width:10px;height:10px;border-radius:50%;background:#53fc18;box-shadow:0 0 15px rgba(83,252,24,.7);margin-top:9px;flex:none}
body.lang-switching .content,body.lang-switching header,body.lang-switching .sidebar,body.lang-switching .mobile-sidebar{opacity:.38;transform:translateY(2px);transition:opacity .16s ease,transform .16s ease}
.content,header,.sidebar,.mobile-sidebar{transition:opacity .18s ease,transform .18s ease}


/* vFix 2026-05: PJAX all categories + mobile category grids */
.all-cats-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  gap:18px !important;
  margin-bottom:30px !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
}
.all-cats-grid .category{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:unset !important;
  margin:0 !important;
  padding-bottom:0 !important;
  box-sizing:border-box !important;
}
.all-cats-grid .category img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:3/4 !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
}
.all-cats-grid .category > span{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 8px 12px !important;
  line-height:1.45 !important;
}
.loading-sentinel{
  text-align:center;
  padding:20px;
  color:#53fc18;
  font-size:14px;
  font-weight:600;
  display:none;
}
.loading-sentinel.active{display:block;}
@media (min-width:850px){
  .all-cats-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr)) !important;gap:20px !important;}
}
@media (max-width:849px){
  .all-cats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    padding-inline:0 !important;
    margin-inline:0 !important;
    overflow:visible !important;
  }
  .all-cats-grid .category{
    min-width:0 !important;
    width:100% !important;
    flex:unset !important;
    border-radius:8px !important;
  }
  .all-cats-grid .category img{aspect-ratio:1/1.28 !important;}
  .all-cats-grid .category > span{font-size:12px !important;min-height:40px !important;padding:8px 6px 10px !important;}

  .category-page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    overflow:visible !important;
  }
  .category-page-grid .stream-card{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .category-page-grid .thumb,
  .category-page-grid .thumb img,
  .category-page-grid .thumb video{
    width:100% !important;
    max-width:100% !important;
  }
  .category-page-grid .stream-info{gap:7px !important;padding-top:8px !important;}
  .category-page-grid .avatar{width:28px !important;height:28px !important;}
  .category-page-grid .stream-title{font-size:12px !important;line-height:1.45 !important;}
  .category-page-grid .stream-meta,
  .category-page-grid .streamer,
  .category-page-grid .game{font-size:10.5px !important;}
}

/* vFix 2026-05: grouped header/mobile search results */
.search-suggest-section-title,
.mobile-search-group-title{
  padding:9px 14px 7px;
  color:#9fa3ad;
  font-size:11px;
  font-weight:900;
  letter-spacing:.01em;
  background:#101014;
  border-top:1px solid rgba(255,255,255,.06);
}
.search-suggest-section-title:first-child{border-top:0;}
.search-suggest-item.is-category .search-suggest-avatar,
.mobile-search-item.is-category .mobile-search-avatar{
  border-radius:9px;
  background:#0f1012;
}
.search-suggest-item.is-category .search-suggest-name::before,
.mobile-search-item.is-category .mobile-search-name::before{
  content:'دسته‌بندی';
  display:inline-flex;
  margin-left:7px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(83,252,24,.12);
  color:#8dff61;
  font-size:10px;
  font-weight:900;
  vertical-align:middle;
}
.mobile-search-group-title{padding-right:2px;padding-left:2px;background:transparent;border-top:0;margin:8px 0 4px;}

/* vFix 2026-05: in-app stream notification preview */
.stream-live-notification-stack{
  position:fixed;
  left:16px;
  top:calc(env(safe-area-inset-top,0px) + 76px);
  z-index:2147482500;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.stream-live-notification{
  width:min(360px,calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
  text-align:right;
  background:rgba(18,20,24,.96);
  border:1px solid rgba(83,252,24,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
  border-radius:16px;
  padding:12px;
  color:#fff;
  transform:translateY(-10px) scale(.98);
  opacity:0;
  transition:opacity .22s ease,transform .22s ease;
  overflow:hidden;
}
.stream-live-notification.show{opacity:1;transform:translateY(0) scale(1);}
.stream-live-notification-avatar-wrap{position:relative;flex:0 0 auto;}
.stream-live-notification-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#0b0b0c;display:block;}
.stream-live-notification-badge{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#53fc18;border:3px solid #121418;overflow:hidden;}
.stream-live-notification-badge img{width:14px;height:14px;object-fit:contain;display:block;}
.stream-live-notification-copy{min-width:0;flex:1;}
.stream-live-notification-title{font-size:13px;font-weight:900;line-height:1.55;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stream-live-notification-subtitle{font-size:12px;font-weight:700;line-height:1.55;color:#cfd3da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
@media (max-width:849px){.stream-live-notification-stack{left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 66px)}.stream-live-notification{width:100%;}}


/* vFix 2026-05-10b: all-categories first PJAX/mobile sizing hard override */
body .main-wrapper .content #allCatsGridContainer.all-cats-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px 14px !important;
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 0 30px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body .main-wrapper .content #allCatsGridContainer.all-cats-grid .category{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:0 1 auto !important;
  padding:0 0 8px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body .main-wrapper .content #allCatsGridContainer.all-cats-grid .category img{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:1/1.28 !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
}
body .main-wrapper .content #allCatsGridContainer.all-cats-grid .category > span{
  display:block !important;
  width:100% !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center !important;
  font-size:13px !important;
}
@media (min-width:850px){body .main-wrapper .content #allCatsGridContainer.all-cats-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;gap:20px !important;}body .main-wrapper .content #allCatsGridContainer.all-cats-grid .category img{aspect-ratio:3/4 !important;}}
@media (max-width:420px){body .main-wrapper .content #allCatsGridContainer.all-cats-grid{gap:16px 12px !important;}body .main-wrapper .content #allCatsGridContainer.all-cats-grid .category > span{font-size:12px !important;}}



/* v12: homepage live stream cards below categories */
.home-live-streams{margin:18px 0 26px;}
.home-live-streams-header{margin-top:4px;margin-bottom:16px;}
.home-live-stream-grid{min-height:120px;}
@media (max-width:768px){.home-live-streams{margin-top:14px}.home-live-streams .section-title{font-size:18px}.home-live-stream-grid{gap:12px}}


/* v14: unified homepage widths + stable live stream card grid */
:root{--ki-home-max-width:1580px;}
@media (min-width:1800px){:root{--ki-home-max-width:1700px;}}
@media (min-width:2400px){:root{--ki-home-max-width:1900px;}}
.content > .section-header,
.content > .categories,
.content > .home-live-streams,
.content > .home-category-sections,
.content > .show-more-divider,
.content > .top-hero{
  width:min(100%, var(--ki-home-max-width)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
.content > .categories{margin-bottom:34px !important;}
.content > .home-live-streams{margin-top:10px !important;margin-bottom:32px !important;}
.home-live-streams .section-header{width:100% !important;margin-left:0 !important;margin-right:0 !important;}
.home-live-stream-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
  min-height:0 !important;
}
.home-live-stream-grid .stream-card{min-width:0 !important;width:100% !important;max-width:none !important;}
.home-live-stream-grid .stream-card .thumb{aspect-ratio:16/9 !important;min-height:0 !important;}
.home-live-stream-grid .stream-card .thumb img,
.home-live-stream-grid .stream-card .thumb video{width:100% !important;height:100% !important;object-fit:cover !important;}
.home-live-stream-grid .stream-card .stream-info{min-height:58px !important;}
.home-live-stream-empty{grid-column:1/-1;color:#a1a1aa;text-align:center;padding:28px 12px;font-weight:700;}
@media (min-width:1500px){.home-live-stream-grid{grid-template-columns:repeat(5, minmax(0,1fr)) !important;}}
@media (min-width:1900px){.home-live-stream-grid{grid-template-columns:repeat(6, minmax(0,1fr)) !important;}}
@media (max-width:1199px) and (min-width:850px){.home-live-stream-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (max-width:849px){
  .home-live-stream-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    gap:12px !important;
    padding-inline:16px 20px !important;
    margin-inline:-16px !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }
  .home-live-stream-grid::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
  .home-live-stream-grid .stream-card{flex:0 0 76vw !important;width:76vw !important;max-width:320px !important;scroll-snap-align:start !important;}
}


/* v15 homepage grouped live rows */
.content > .home-category-sections,
.content > .home-live-streams,
.content > .show-more-divider { width: 100%; max-width: 100%; box-sizing: border-box; }
.home-category-sections { margin-top: 22px; }
.category-stream-section { width: 100%; margin: 0 0 34px; }
.category-stream-section .section-divider-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 14px; }
.category-stream-section .section-divider-title { font-size:24px; line-height:1.3; margin:0; font-weight:900; color:#fff; }
.category-stream-section .section-divider-link { color:#a8ff7a; text-decoration:none; font-size:14px; font-weight:800; }
.homepage-category-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; width:100%; }
.home-live-stream-grid { width:100%; }
@media (max-width: 800px){
  .homepage-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .category-stream-section .section-divider-title { font-size:20px; }
}


/* v16 category section viewer totals */
.section-divider-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.section-divider-viewers{font-size:14px;font-weight:800;color:#adadb8;white-space:nowrap;}
@media (max-width: 849px){.section-divider-viewers{font-size:12px;}}


/* v18: restore 13 category cards on wide desktop and keep normal homepage rows category-based */
@media (min-width: 850px){
  .categories .category:nth-child(13){display:block !important;}
}
.home-live-streams[style*="display: none"]{margin:0 !important;}


/* v45: followed stream cards use the same sizing as the main live stream cards */
#followSection{width:100%;max-width:100%;box-sizing:border-box;}
#followGrid.home-live-stream-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
}
#followGrid.home-live-stream-grid .stream-card{min-width:0 !important;width:100% !important;max-width:none !important;}
#followGrid.home-live-stream-grid .stream-card .thumb{aspect-ratio:16/9 !important;min-height:0 !important;}
#followGrid.home-live-stream-grid .stream-card .thumb img,
#followGrid.home-live-stream-grid .stream-card .thumb video{width:100% !important;height:100% !important;object-fit:cover !important;}
@media (min-width:1500px){#followGrid.home-live-stream-grid{grid-template-columns:repeat(5, minmax(0,1fr)) !important;}}
@media (min-width:1900px){#followGrid.home-live-stream-grid{grid-template-columns:repeat(6, minmax(0,1fr)) !important;}}
@media (max-width:1199px) and (min-width:850px){#followGrid.home-live-stream-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (max-width:849px){
  #followGrid.home-live-stream-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    gap:12px !important;
    padding-inline:16px 20px !important;
    margin-inline:-16px !important;
    scroll-snap-type:x mandatory !important;
    scrollbar-width:none !important;
  }
  #followGrid.home-live-stream-grid::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}
  #followGrid.home-live-stream-grid .stream-card{flex:0 0 76vw !important;width:76vw !important;max-width:320px !important;scroll-snap-align:start !important;}
}





/* v63 unified SMS auth modal */
.auth-unified-btn{white-space:nowrap}.instant-auth-dialog .ki-sms-auth-form{display:flex;flex-direction:column;gap:0}.instant-auth-dialog .ki-auth-alert{border-radius:14px;padding:12px 13px;margin-bottom:14px;font-size:13px;line-height:1.8}.instant-auth-dialog .ki-auth-alert.error{background:rgba(255,77,79,.10);border:1px solid rgba(255,77,79,.35);color:#ffd6d7}.instant-auth-dialog .ki-auth-alert.success{background:rgba(83,252,24,.10);border:1px solid rgba(83,252,24,.32);color:#eaffdf}.instant-auth-dialog .ki-auth-alert.info{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#dbe4ee}.instant-auth-dialog .ki-auth-field{display:grid;gap:8px;margin-bottom:14px}.instant-auth-dialog .ki-auth-field span{color:#e9ebf1;font-size:13px;font-weight:800}.instant-auth-dialog .ki-auth-field input{width:100%;background:#0f1115;border:1px solid #2a2d36;color:#fff;padding:14px;border-radius:13px;font-size:15px;box-sizing:border-box;outline:none}.instant-auth-dialog .ki-auth-field input:focus{border-color:#53fc18;box-shadow:0 0 0 2px rgba(83,252,24,.18)}.instant-auth-dialog .ki-auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 14px;flex-wrap:wrap}.instant-auth-dialog .ki-auth-link{border:0;background:transparent;color:#53fc18;font-weight:900;cursor:pointer;text-decoration:none;padding:0;font-family:inherit;font-size:13px}.instant-auth-dialog .ki-auth-submit{width:100%;background:#53fc18;color:#050505;font-weight:950;font-size:16px;padding:14px;border:0;border-radius:14px;cursor:pointer;box-shadow:0 10px 26px rgba(83,252,24,.18)}.instant-auth-dialog .ki-auth-secondary{width:100%;background:transparent;color:#fff;border:1px solid #363b46;font-weight:850;font-size:14px;padding:12px;border-radius:13px;cursor:pointer;margin-top:10px}.instant-auth-dialog .ki-auth-secondary.subtle{color:#b7bbc6}.instant-auth-dialog .ki-auth-submit:disabled,.instant-auth-dialog .ki-auth-secondary:disabled{opacity:.65;cursor:wait}.instant-auth-dialog .ki-auth-countdown{margin-top:10px;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.06);color:#dbe4ee;font-size:13px;text-align:center}.instant-auth-dialog .ki-auth-note{color:#aeb2bd;font-size:12.5px;line-height:1.9;margin:12px 0 0}.instant-auth-dialog .ltr-input{direction:ltr;text-align:left}.instant-auth-dialog .hidden{display:none!important}@media(max-width:520px){.instant-page-dialog{width:min(100vw - 20px,460px)!important;max-height:calc(100dvh - 20px)!important;border-radius:20px!important}.instant-auth-dialog .instant-auth-title{font-size:22px}.instant-auth-dialog .instant-auth-subtitle{font-size:13px}.instant-auth-dialog .ki-auth-field input{font-size:16px;padding:13px}.instant-auth-dialog .ki-auth-row{align-items:flex-start;flex-direction:column}.instant-auth-brand img{width:150px;max-width:70%}}


/* v67 SMS auth polish */
.instant-auth-dialog .ki-auth-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    gap:10px;
    align-items:stretch;
    margin-top:4px;
}
.instant-auth-dialog .ki-auth-actions .ki-auth-submit,
.instant-auth-dialog .ki-auth-actions .ki-auth-secondary{
    width:100%;
    margin-top:0;
    min-height:48px;
}
.instant-auth-dialog .ki-auth-actions .ki-auth-submit{order:1;}
.instant-auth-dialog .ki-auth-actions .ki-auth-secondary{order:2;padding-inline:10px;white-space:nowrap;}
.instant-auth-dialog .ki-auth-actions .ki-auth-secondary:disabled{
    cursor:not-allowed;
    opacity:.78;
    direction:ltr;
    font-weight:950;
    letter-spacing:.4px;
}
.instant-auth-dialog [data-auth-step="set-password"] .ki-auth-note,
.instant-auth-dialog [data-auth-step="code"] .ki-auth-note{
    margin-top:10px;
}
@media(max-width:420px){
    .instant-auth-dialog .ki-auth-actions{grid-template-columns:minmax(0,1fr) 94px;gap:8px;}
    .instant-auth-dialog .ki-auth-actions .ki-auth-submit,
    .instant-auth-dialog .ki-auth-actions .ki-auth-secondary{font-size:14px;padding:12px 10px;}
}