/* Generated stylesheet bundle. Source order is preserved from the page template. */

/* lobby.css */
/* 메인 로비 스타일 (Lobby CSS) - 방송 페이지 통일 테마 */

:root {
    --main-color: linear-gradient(45deg, #9900F0, #FF85B3, #9900F0);
    --main-hover-color: linear-gradient(45deg, rgb(242, 146, 255), rgb(173, 58, 255), rgb(242, 146, 255));
    --main-border-color: rgb(205, 136, 255);
    --main-shadow: 0 0 3px 0 rgba(0, 0, 0, 1);
    --bubble-mine: linear-gradient(30deg, rgb(12, 45, 129), rgb(143, 38, 132));
    --bubble-other: linear-gradient(30deg, rgb(33, 33, 33), rgb(62, 62, 62), rgb(22, 22, 22));
    --main-text-roll: text-roll 2s infinite linear;
    --main-bg-size: 200% auto;
    --neon-pink: #FF85B3;
    --neon-purple: #9900F0;
    --neon-glow: 0 0 15px rgba(255, 133, 179, 0.4);
}

/* 텍스트 그라데이션 흐름 애니메이션 */
@keyframes text-roll {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 회전하는 네온 그라데이션 보더 애니메이션 */
@keyframes scroll-join {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 라이브 펄스 효과 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
    100% { transform: scale(1); opacity: 1; }
}

/* 모달 진입 애니메이션 */
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--theme-bg,#060608);
    color: var(--theme-text,#efeff1);
    min-height: 100vh;
    overflow-x: hidden;
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: var(--theme-surface,#060608);
}
::-webkit-scrollbar-thumb {
    background: #25242b;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #FF85B3;
}

/*
상단 글로벌 네비게이션 헤더 (Lobby Navbar)
*/
.lobby-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(10, 10, 13, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 133, 179, 0.18);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.lobby-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--theme-text,#fff);
    cursor: pointer;
}

.lobby-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--main-color);
    background-size: 200% auto;
    animation: text-roll 3s infinite linear;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #000;
    box-shadow: none;
    font-weight: 900;
}

.lobby-brand-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #ffffff 0%, #FF85B3 50%, #9900F0 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-roll 4s infinite linear;
}

.lobby-nav-auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 로그인 버튼 - 방송국 페이지 오리지널 텍스트 버튼 스타일 */
.btn-text-login {
    background: transparent;
    border: none !important;
    color: var(--theme-muted,#ccc);
    font-size: 16px;
    font-weight: 600 !important;
    cursor: pointer;
    padding: 7px 12px !important;
    transition: color 0.2s ease;
}
.lobby-navbar .btn-text-login { font-size: 18px; }
.mobile-auth-group .btn-text-login { font-size: 16px; }

.btn-text-login:hover {
    color: var(--theme-text,#fff) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 회원가입 버튼 - 방송 페이지 시그니처 롤링 보더 알약형 버튼 */
.btn-green-join {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    overflow: hidden;
    border-radius: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    box-shadow: var(--main-shadow);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.btn-green-join::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, #9900F0 0%, #FF85B3 50%, #9900F0 100%);
    background-size: 50% 100%;
    animation: scroll-join 1.5s infinite linear;
}

.btn-green-join::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 2px;
    border-radius: 18px;
    background-color: #000;
    transition: inset 0.2s ease-in-out;
}

.btn-green-join span {
    position: relative;
    z-index: 3;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding-top: 1px;
}

.btn-green-join:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(153, 0, 240, 0.5);
}

.btn-green-join:hover::after {
    inset: 4px;
}

/* 스트리머 뱃지 공통 스타일 - 핑크/보라 네온 테마 */
.streamer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #9900F0, #FF85B3);
    color: #000;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 133, 179, 0.4);
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(255, 71, 87, 0.4);
}

/*
로비 메인 컨테이너
*/
.lobby-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

/*
히어로 추천 방송 배너
*/
.hero-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #0d0c12 0%, #1a1024 100%);
    border: none;
    margin-bottom: 44px;
    display: flex;
    min-height: 330px;
    box-shadow: none;
}

.hero-banner-content {
    flex: 1;
    min-width: 0;
    padding: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.hero-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: red;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 6px 18px;
    border-radius: 24px;
    width: fit-content;
    margin-bottom: 16px;
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 12px rgba(255, 67, 67, 0.5);
}

.hero-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.5px;
}

.hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-width: 0;
    color: #b5b5be;
    font-size: 15px;
    line-height: 1.6;
    max-width: 550px;
    margin-bottom: 24px;
}

.hero-streamer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.hero-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FF85B3;
    box-shadow: 0 0 10px rgba(255, 133, 179, 0.4);
}

.hero-nick {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: calc(8px / 3);
}

/* 방송 시청하기 메인 버튼 - 방송 페이지 테마 일치 */
.btn-hero-watch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--main-color);
    background-size: 100% auto;
    color: #000;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    width: fit-content;
    box-shadow: 0 4px 18px rgba(255, 133, 179, 0.45);
    transition: all 0.3s ease;
}

.hero-banner-preview {
    flex: 1.2;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0d0c12 0%, transparent 45%);
}

/*
섹션 헤더 공통
*/
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-text,#fff);
}

.section-title .live-dot {
    width: 10px;
    height: 10px;
    background: #ff4343;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px #ff4343;
    animation: pulse 1.5s infinite;
}

.section-count {
    color: var(--theme-muted,#FF85B3);
    font-size: 18px;
    font-weight: 700;
}

/*
스트리머 카드 그리드 & 카드 디자인
*/
.streamer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 50px;
}

/* 스트리머 카드 */
.streamer-card {
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: background .2s ease;
    cursor: pointer;
}

.streamer-card:hover {
    background: var(--theme-surface,#19131e);
}

/* 썸네일 영역 */
.card-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0d;
    overflow: hidden;
    border-radius: 11px;
}

.card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.streamer-card:hover .card-thumb-img {
    transform: scale(1.025);
}

.card-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #ff4343, #FF85B3);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(255, 67, 67, 0.5);
    animation: pulse 1.5s infinite;
}

.card-offline-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 카드 본문 */
.card-content {
    padding: 10px 5px;
    display: flex;
    gap: 10px;
    flex: 1;
}

.card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--theme-border,#67476f);
    flex-shrink: 0;
}

.card-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-text,#fff);
    display: block;
    white-space: nowrap;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 5px;
    transition: color 0.2s;
}
.streamer-card:hover .card-title {
    color: var(--theme-muted,#FF85B3);
}

.card-streamer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.card-nick {
    font-size: 14px;
    color: var(--theme-text,#d1d1db);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-desc {
    font-size: 13px;
    color: var(--theme-muted,#888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-details-row { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.card-details-row .card-streamer-row { flex:1; min-width:0; margin-bottom:0; }
.card-details-row .card-nick { min-width:0; }
.card-meta { display:flex; min-width:0; max-width:70%; flex-shrink:1; align-items:center; gap:5px; margin-left:auto; white-space:nowrap; color:var(--theme-muted,#918799); font-size:12px; line-height:1.4; }
.card-meta .media-view-count { flex-shrink:0; color:inherit; font-size:inherit; font-weight:400; line-height:inherit; text-shadow:none; }
.card-published { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.card-published::before { content:'·'; margin-right:5px; }
.card-duration { position:absolute; bottom:8px; right:8px; padding:4px 6px; border-radius:5px; background:#000c; color:#fff; font-size:11px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; }
.index-page :is(#recommended-vods-section, #recommended-videos-section) .card-offline-badge { top:8px; left:8px; padding:4px 6px; border:0; border-radius:5px; background:#26152eef; color:#fff; font-size:11px; letter-spacing:.6px; }

/* 비어있는 상태 */
.empty-state {
    text-align: center;
    padding: 55px 20px;
    background: var(--theme-surface,#111116);
    border-radius: 14px;
    border: 1px dashed rgba(255, 133, 179, 0.25);
    color: var(--theme-muted,#888);
    grid-column: 1 / -1;
}
.empty-state i {
    font-size: 38px;
    margin-bottom: 14px;
    color: var(--theme-muted,#FF85B3);
    opacity: 0.6;
}

/*
스트리머 신청 유도 CTA 배너
*/
.streamer-cta-banner {
    background: linear-gradient(135deg, rgba(153, 0, 240, 0.16) 0%, rgba(255, 133, 179, 0.08) 100%);
    border: 1px solid rgba(255, 133, 179, 0.3);
    border-radius: 18px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    box-shadow: 0 10px 30px rgba(153, 0, 240, 0.18);
}

.streamer-cta-text h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.streamer-cta-text p {
    color: #b5b5be;
    font-size: 14px;
}

.btn-cta-apply {
    background: var(--main-color);
    background-size: 100% auto;
    color: #000;
    border: none;
    padding: 10px 28px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 133, 179, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-cta-apply:hover {
    background-size: 200% auto;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(153, 0, 240, 0.6);
    color: #000;
}

/*
공통 모달 스타일 (로그인, 가입, 설정 등) - 방송 페이지 일치
*/
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    overflow-y: auto;
}

.modal-content, .auth-content {
    background: rgba(18, 16, 23, 0.95);
    border: 1px solid rgba(255, 133, 179, 0.35);
    border-radius: 16px;
    margin: 10% auto;
    padding: 26px;
    width: 360px;
    max-width: 90vw;
    color: var(--theme-text,#fff);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(153, 0, 240, 0.25);
    animation: modalIn 0.25s ease-out;
}

.modal-content h3, .auth-content h3 {
    font-size: 20px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 18px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 14px;
    background: linear-gradient(to right, #ffffff, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-roll 4s infinite linear;
}

.modal-content input, .auth-content input, .modal-content textarea {
    width: 100%;
    background: rgba(28, 26, 34, 0.95);
    border: 1px solid var(--theme-border,#444);
    border-radius: 20px;
    color: var(--theme-text,#fff);
    padding: 11px 16px;
    margin-bottom: 12px;
    font-size: 13px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}
.modal-content textarea {
    border-radius: 12px;
}

.modal-content input:focus, .auth-content input:focus, .modal-content textarea:focus {
    outline: none;
    border-color: #FF85B3;
    box-shadow: 0 0 10px rgba(255, 133, 179, 0.35);
}

/* 주요 실행 버튼 (가입, 비밀번호 변경 등) */
.mainbutton,
.doJoin {
    width: 100%;
    background: var(--main-color);
    background-size: 100% auto;
    border: none;
    color: #000;
    padding: 12px;
    border-radius: 25px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    margin-top: 4px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 133, 179, 0.35);
}
.mainbutton:hover,
.doJoin:hover {
    background-size: 200% auto;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(153, 0, 240, 0.55);
    color: #000;
}

/* 로그인 버튼 (모달 내부) */
.login-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #FF85B3;
    color: var(--theme-text,#fff);
    padding: 11px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.25s ease;
}
.login-btn:hover {
    background: rgba(255, 133, 179, 0.15);
    box-shadow: 0 0 12px rgba(255, 133, 179, 0.35);
}

/* 닫기 및 보조 버튼 */
.close-btn {
    width: 100%;
    background: var(--theme-surface,#25242b);
    border: 1px solid var(--theme-border,#3d3b45);
    color: var(--theme-muted,#ccc);
    padding: 11px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.close-btn:hover {
    background: var(--theme-surface,#33323d);
    color: var(--theme-text,#fff);
}

/* 반응형 모바일 */
@media (max-width: 768px) {
    .lobby-navbar {
        padding: 0 16px;
    }
    
    .hero-banner {
        flex-direction: column;
    }
    .hero-banner-content {
        padding: 24px;
    }
    .hero-title {
        font-size: 24px;
    }
    .streamer-cta-banner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 26px 20px;
    }
    .streamer-cta-text h3 {
        justify-content: center;
    }
}

/*
[스트리머 스튜디오 5대 관리 메뉴 팝업 & 모달 스타일 (스크린샷 100% 반영)]
*/

/* 1. 상단 드롭다운 팝업 */
.streamer-studio-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.streamer-studio-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: rgba(18, 17, 24, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 12px;
    z-index: 10000;
    display: none;
    animation: studioFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.streamer-studio-popover.active {
    display: block;
}

@keyframes studioFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 2. 스트리머 스튜디오 종합 모달 */
.studio-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.studio-modal.active {
    display: flex;
}

.studio-modal-box {
    width: 620px;
    max-width: 94vw;
    max-height: 90vh;
    background: var(--theme-surface,#14131a);
    border: 1px solid rgba(255, 133, 179, 0.25);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(169, 112, 255, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: studioModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes studioModalPop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.studio-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--theme-surface,#1a1922);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--theme-text,#fff);
}

.studio-modal-title i {
    color: var(--theme-muted,#a970ff);
    font-size: 18px;
}

.studio-modal-close {
    background: none;
    border: none;
    color: var(--theme-muted,#888);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.studio-modal-close:hover {
    color: var(--theme-text,#fff);
}

/* 스튜디오 탭 네비게이션 */
.studio-tab-nav {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    background: var(--theme-surface,#17161f);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.studio-tab-btn {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--theme-muted,#999);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.studio-tab-btn:hover {
    color: var(--theme-text,#fff);
    background: rgba(255, 255, 255, 0.05);
}

.studio-tab-btn.active {
    color: var(--theme-text,#fff);
    background: rgba(169, 112, 255, 0.2);
    border-color: rgba(169, 112, 255, 0.5);
}

.studio-tab-btn.active i {
    color: var(--theme-muted,#a970ff);
}

/* 스튜디오 탭 본문 */
.studio-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.studio-tab-panel {
    display: none;
}

.studio-tab-panel.active {
    display: block;
}

.studio-form-group {
    margin-bottom: 16px;
}

.studio-form-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-muted,#adadb8);
    margin-bottom: 6px;
}

.studio-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--theme-input,#1f1e28);
    border: 1px solid var(--theme-border,#323140);
    border-radius: 8px;
    color: var(--theme-text,#fff);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.studio-input:focus {
    border-color: #a970ff;
    box-shadow: 0 0 8px rgba(169, 112, 255, 0.3);
}

.studio-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    border: none;
}

.studio-btn-primary {
    background: linear-gradient(135deg, #a970ff, #772ce8);
    color: var(--theme-text,#fff);
}

.studio-btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(169, 112, 255, 0.4);
}

.studio-btn-secondary {
    background: var(--theme-surface,#2a2936);
    color: var(--theme-text,#ddd);
    border: 1px solid var(--theme-border,#3c3b4d);
}

.studio-btn-secondary:hover {
    background: #353444;
    color: var(--theme-text,#fff);
}

.studio-btn-danger {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: var(--theme-text,#fff);
}

.studio-btn-danger:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
}

/* 통계 카드 그리드 */
.studio-stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.studio-stat-card {
    background: var(--theme-surface,#1c1b26);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.studio-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.studio-stat-icon.red { background: rgba(255, 71, 87, 0.2); color: #ff4757; }
.studio-stat-icon.purple { background: rgba(169, 112, 255, 0.2); color: var(--theme-muted,#a970ff); }
.studio-stat-icon.blue { background: rgba(30, 144, 255, 0.2); color: #1e90ff; }

.studio-stat-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--theme-text,#fff);
}

.studio-stat-lbl {
    font-size: 11px;
    color: var(--theme-muted,#888);
}

.studio-preview-box {
    margin-top: 10px;
    padding: 10px;
    background: var(--theme-surface,#111016);
    border-radius: 8px;
    border: 1px dashed var(--theme-border,#3a3948);
    text-align: center;
}

.studio-preview-box img {
    max-height: 90px;
    border-radius: 6px;
    object-fit: contain;
}

.hero-streamer-info > div { display: flex; flex-direction: column; gap: 2px; }
.hero-streamer-info > div > span { display: block; line-height: 1.2; }

.index-page :is(#live-section, #all-streamers-section) .section-title {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: baseline;
}
.index-page :is(#live-section, #all-streamers-section) .section-title > :is(i, .live-dot) { align-self: center; }
.index-page :is(#live-section, #all-streamers-section) .section-count {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

/* Expandable home lists. */
.index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section) .streamer-card[hidden] { display: none !important; }
.section-more-button { flex: 0 0 auto; margin-left: auto; white-space: nowrap; padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-text,#fff); font-size: 13px; font-weight: 600; cursor: pointer; }
.section-more-button:hover { color: var(--theme-muted,#df99fa); }
.section-more-button:focus-visible { outline: 2px solid #df99fa; outline-offset: 3px; }
.section-more-button[hidden] { display: none; }

.section-list-viewport { display: flow-root; }

/* Heading and expand action share a row. */
.index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section) .section-header { gap: 16px; }
.index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section) .section-title { min-width: 0; }

.index-page #all-streamers-section { margin-top: 32px; }

/* Keep the default brand lockup fully visible alongside the featured channel copy. */
.index-page #lobby-main .hero-banner-preview.hero-brand-fallback {
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 900px) {
    .index-page #lobby-main .hero-banner-preview.hero-brand-fallback {
        background-size: cover;
        background-position: center;
    }
}

.index-page .hero-channel-link { color: inherit; text-decoration: none; cursor: pointer; }
.index-page .hero-channel-link:focus-visible { outline: 2px solid #df99fa; outline-offset: 3px; }

.index-page #all-streamers-section .card-thumb-img.card-brand-fallback {
    object-fit: cover;
    padding: 0;
    box-sizing: border-box;
    background: #111;
}


/* channel-layout.css */
/* Channel shell. Keep legacy player, moderation and remote-control components. */
body.channel-page {
    --main-color: linear-gradient(45deg, #9900F0, #FF85B3, #9900F0);
    --main-hover-color: linear-gradient(45deg, #f292ff, #ad3aff, #f292ff);
    --shell-border: var(--theme-border,#29262e);
    margin: 0; padding: 0; height: 100dvh; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden; background: var(--theme-bg,#0c0b0e); color: var(--theme-text,#efedf2);
}
.channel-page *, .channel-page *::before, .channel-page *::after { box-sizing: border-box; }
.channel-page button, .channel-page input { font: inherit; }
.channel-page button { cursor: pointer; }
.channel-page :focus-visible { outline: 2px solid #e2a2ff; outline-offset: 3px; }
.channel-page .lobby-navbar { position: relative; inset: auto; height: 64px; min-height: 64px; padding: 0 22px 0 16px; gap: 20px; background: var(--theme-surface,#141216); border-bottom: 1px solid var(--shell-border); z-index: 1002; flex-shrink: 0; }
.channel-brand-group { display: flex; align-items: center; gap: 20px; }
.channel-page .lobby-brand { gap: 10px; white-space: nowrap; }
.channel-page .lobby-brand-title { font-size: 19px; letter-spacing: -.7px; }
.channel-page .lobby-logo-icon { width: 30px; height: 30px; font-size: 13px; background: var(--main-color); color: #17071e; border-radius: 9px; }

.channel-page .lobby-nav-auth { margin-left: auto; flex-shrink: 0; }
.channel-page .layout-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--theme-muted,#bcb7c4); font-size: 16px; flex-shrink: 0; transition: background .2s, color .2s; }
.channel-page .layout-icon:hover { background: var(--theme-surface,#2c2433); color: var(--theme-muted,#f7c8ff); }
.channel-search { display: flex; align-items: center; gap: 12px; max-width: 340px; min-width: 150px; flex: 1; margin: 0 auto; padding: 9px 12px; background: var(--theme-input,#222025); border: none; border-radius: 8px; color: var(--theme-muted,#908b98); }
.channel-page .channel-search input:focus, .channel-page .channel-search input:focus-visible { outline: none; box-shadow: none; }
.channel-search input { background: none; border: 0; outline: none; color: var(--theme-text,#fff); min-width: 0; width: 100%; font-size: 12px; text-align: start; }
.channel-page .container { display: flex; flex: 1; flex-direction: row; position: relative; width: 100%; height: calc(100dvh - 64px); min-height: 0; overflow: hidden; }
.channel-sidebar { flex: 0 0 212px; width: 212px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background: var(--theme-surface,#171419); border-right: 1px solid var(--shell-border); padding: 20px 12px; }
.channel-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar-home { display: flex; align-items: center; gap: 12px; color: var(--theme-text,#f0d9fa); text-decoration: none; font-size: 19.5px; padding: 13px 11px; border-radius: 8px; background: var(--theme-surface,#2b1e34); }
.sidebar-home span { font-size: 18px; font-weight: 700; }
.sidebar-home i { color: var(--theme-muted,#d896ff); }
.sidebar-browse-links { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sidebar-browse-links a { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 8px; color: var(--theme-text,#ddd5e4); text-decoration: none; font-size: 16px; font-weight: 600; transition: background .15s, color .15s; }
.sidebar-browse-links a:hover { background: var(--theme-surface,#29232f); color: var(--theme-text,#fff); }
.sidebar-browse-links i { width: 20px; flex: 0 0 20px; text-align: center; color: var(--theme-muted,#bd8fd6); }
/* Match all three navigation labels and icon slots to Browse. */
.channel-page .sidebar-menu-link { font-size: 18px; font-weight: 700; padding: 13px 11px; gap: 12px; }
.channel-page .sidebar-menu-link > i,
.channel-page .sidebar-menu-link > .sidebar-live-icon { display: block; width: 19.5px; height: 19.5px; flex: 0 0 19.5px; font-size: 19.5px; line-height: 19.5px; text-align: center; }

.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 28px 10px 14px; font-size: 16.5px; font-weight: 700; color: var(--theme-muted,#a8a1ae); letter-spacing: 1px; }

.directory-channel { margin-bottom: 3px; display: flex; align-items: center; gap: 10px; padding: 11px 8px; color: var(--theme-text,#f0eaf3); text-decoration: none; border-radius: 8px; transition: background .2s; }
.directory-channel:hover, .directory-channel[aria-current] { background: var(--theme-surface,#29232f); }
.directory-channel img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--theme-border,#504356); }
.directory-copy { flex: 1; min-width: 0; }
.directory-copy strong, .directory-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-copy strong { font-size: 14px; font-weight: 600; }
.directory-copy small { font-size: 11.5px; color: var(--theme-muted,#948b9e); margin-top: 4px; }
.directory-live { width: 6px; height: 6px; border-radius: 50%; background: #ff85b3; }
.directory-state { font-size: 12px; color: var(--theme-muted,#a59cad); padding: 8px; line-height: 1.8; }
.sidebar-footer { display: flex; gap: 10px; margin: 24px 8px 0; padding-top: 20px; border-top: 1px solid var(--shell-border); font-size: 11px; color: var(--theme-muted,#a89cae); text-decoration: none; }
.channel-page.sidebar-collapsed .channel-sidebar { display: none; }
.channel-page .video-section { display: flex; flex-direction: column; position: relative; inset: auto; flex: 1; width: auto; height: 100%; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 0 32px; background: var(--theme-bg,#0e0c10); scrollbar-width: none; z-index: 1; }
.channel-page #main-video-sec::-webkit-scrollbar { display: none; width: 0; height: 0; }
.channel-page #video-wrapper { position: relative; width: 100%; max-width: none; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; margin: 0; border: 0; border-radius: 0; flex: none; overflow: hidden; background: var(--theme-bg,#080609); }
.channel-page #video-wrapper > video, .channel-page #stream-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.channel-page #stream-thumbnail[src=""] { display: none !important; }
.channel-offline-stage { display: none; z-index: 6; position: absolute; inset: 0; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px; text-align: center; background: radial-gradient(ellipse at 25% 20%, #63208550, transparent 58%), radial-gradient(ellipse at 85% 95%, #ff85b323, transparent 55%), repeating-linear-gradient(125deg, #ffffff02 0 1px, transparent 1px 38px), #0d0912; }
.channel-page.is-offline .channel-offline-stage { display: flex; }
.channel-page.is-offline #stream-thumbnail:not([src=""]) + .channel-offline-stage { background: linear-gradient(0deg, #0c0714ed, #0c071477); }
.offline-eyebrow { font-size: 10px; letter-spacing: 4px; color: #bf9dd0; }
.offline-symbol { display: grid; place-items: center; width: 68px; height: 68px; margin: 10px 0; border: 1px solid #b259e96b; border-radius: 22px; background: linear-gradient(135deg, #65268a66, #c3699750); box-shadow: 0 0 65px #9900f025; color: #e3b0ff; font-size: 23px; transform: rotate(-8deg); }
.offline-symbol i { transform: rotate(8deg); }
.channel-offline-stage strong { font-size: clamp(16px, 1.65vw, 27px); letter-spacing: -.7px; }
.channel-offline-stage > span:last-of-type { font-size: 12px; color: #ab9bb6; }
.channel-page .offline-replays { border: 1px solid #7d548f; background: #38243e80; color: #e9c9fa; border-radius: 7px; padding: 9px 14px; font-size: 11px; margin-top: 8px; }
.channel-page .offline-replays i { margin-left: 12px; }
.channel-page #player-overlay { z-index: 7; }
.channel-page .channel-summary { border-bottom: 1px solid var(--shell-border); }
.channel-page #channel-title-display { position: static; display: flex; align-items: center; padding: 0; margin: 0; background: none; box-shadow: none; border: 0; transform: none; }
.channel-page .profile-box { width: 58px; height: 58px; flex: 0 0 58px; margin: 0; }
.channel-page .channel-profile-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #aaa; }
.channel-page .channel-text-group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.channel-identity { display: flex; align-items: center; gap: 4px; }
.channel-identity a { overflow-wrap: anywhere; color: var(--theme-text,#fff); text-decoration: none; font-size: 17px; font-weight: 700; }

.channel-page #title-text { font-size: 14px; line-height: 1.5; margin: 3px 0 0; color: var(--theme-text,#eee7f1); overflow-wrap: anywhere; }
.channel-handle { font-size: 11px; color: var(--theme-muted,#b776dc); }
.channel-page .viewer-info { display: flex; flex-wrap: wrap; gap: 10px; height: auto; border: 0; box-shadow: none; }
.channel-page .viewer-right-group { margin-left: auto; display: flex; }
.channel-page .viewer-count { white-space: nowrap; }
.channel-page .viewer-num, .channel-page .viewer-count > i { color: var(--theme-muted,#f099c5); }
.channel-page #btn-mobile-menu { display: none; }

.channel-page #admin-toolbar { flex-shrink: 0; padding-left: 26px; padding-right: 26px; }
.channel-page #tabs-area { position: static; width: 100%; height: auto; min-height: 220px; max-height: none; margin: 12px 0 0; overflow: visible; padding: 0 26px; flex-shrink: 0; }
.channel-page .content-tabs { position: static; display: flex; align-items: center; width: 100%; padding: 0; margin: 0; gap: 24px; background: transparent; border-bottom: 1px solid var(--theme-border,#302737); }
.channel-page .tab-btn { flex: none; font-size: 13px; padding: 16px 0; }
.channel-page .tab-content-container { position: static; display: block; padding: 20px 0; height: auto; max-height: none; overflow: visible; }
.channel-page .gb-write-box { padding: 12px; background: var(--theme-surface,#18131c); border: 1px solid var(--theme-border,#32273b); border-radius: 9px; }
.channel-page .gb-input { font-size: 12px; background: transparent; }
.channel-page .video-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.channel-page .chat-section { flex: 0 0 340px; width: 340px; min-width: 340px; max-width: 340px; height: 100%; position: relative; inset: auto; background: var(--theme-surface,#141116); border-left: 1px solid var(--shell-border); z-index: 2; overflow: hidden; }
.channel-chat-heading { height: 56px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--shell-border); }
.channel-chat-heading > span { font-size: 12px; font-weight: 600; }
.channel-chat-heading > span > i { color: var(--theme-muted,#bc84d9); margin-right: 7px; }

.channel-page #messages { flex: 1; min-height: 0; height: auto; margin: 0; padding: 12px; overflow-y: auto; background: transparent; }
.channel-page #chat-form { position: relative; inset: auto; width: 100%; flex: none; }
.channel-page #login-warning { inset: 5% 2%; width: 96%; height: 90%; box-sizing: border-box; border-radius: 10px; background: var(--theme-bg,#000); border: 0; font-size: 16px; }
.channel-page #banner-area { flex-shrink: 0; }
.channel-page #restore-channel-chat { display: none; }
.channel-page.chat-collapsed .chat-section { display: none; }
.channel-page.chat-collapsed #restore-channel-chat { display: inline-flex; }
.channel-page .btn-green-join, .channel-page .mainbutton, .channel-page .gb-btn, .channel-page .btn-uploadVideo { background: var(--main-color); background-size: 200% auto; border: 1px solid #d08cfa66; color: #17071e; transition: transform .2s, box-shadow .2s; }
.channel-page .btn-green-join:hover, .channel-page .mainbutton:hover, .channel-page .gb-btn:hover, .channel-page .btn-uploadVideo:hover { animation: text-roll 2s linear infinite; transform: translateY(-2px); box-shadow: 0 4px 18px #9900f040; }
.channel-page .tab-btn.active { background: var(--main-color); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; color: transparent; animation: text-roll 5s linear infinite; }
.channel-page .tab-btn.active::after { background: var(--main-color); background-size: 200% auto; animation: text-roll 2s linear infinite; }
.channel-page .btn-admin-tool:hover { border-color: #9900f0; box-shadow: 0 0 15px #9900f04d; transform: translateY(-3px); }
.channel-page #video-wrapper:fullscreen { width: 100vw; height: 100dvh; max-height: none; aspect-ratio: auto; }
@media (min-width: 901px) {
    .channel-page .mobile-only-tabs, .channel-page #mobile-panel { display: none !important; }
    .channel-page #messages { display: flex !important; }
    .channel-page .content-tabs { display: flex !important; }
    .channel-page .tab-content-container { display: block !important; }
    .channel-page.tab-not-chat #chat-form { display: flex !important; }
}
@media (max-width: 1280px) and (min-width: 901px) {
    
    .channel-sidebar { flex-basis: 180px; width: 180px; }
    .channel-page .channel-summary { padding: 18px; }
}
@media (max-width: 900px) {
    .channel-page .lobby-navbar { height: 56px; min-height: 56px; padding: 0 12px; gap: 8px; }
    .channel-brand-group { gap: 8px; }
    .channel-page .lobby-brand-title { font-size: 15px; }
    .channel-search,
.channel-page #restore-channel-chat { display: none !important; }
    .channel-page .btn-text-login, .channel-page .btn-green-join { padding: 8px 10px; }
    .channel-page .btn-green-join { font-size: 11px; }
    .channel-page .container, .channel-page.is-typing .container { flex-direction: column; height: calc(100dvh - 56px); position: relative; inset: auto; overflow-y: auto; }
    .channel-sidebar { display: none; position: absolute; top: 0; bottom: 0; left: 0; width: 240px; z-index: 1010; box-shadow: 20px 0 50px #000a; }
    .channel-page.sidebar-open .channel-sidebar { display: block; }
    .channel-page .video-section, .channel-page.is-typing .video-section { position: relative; inset: auto; width: 100%; height: auto; flex: none; overflow: visible; padding: 0; }
    .channel-page .channel-summary { padding: 13px 14px 10px; }
    .channel-page #channel-title-display { gap: 10px; }
    .channel-page .profile-box { width: 42px; height: 42px; flex-basis: 42px; }
    .channel-identity a { font-size: 14px; }
    .channel-page #title-text { font-size: 12px; }
    .channel-handle { display: none; }
    .channel-page #btn-mobile-menu { display: block; position: static; background: transparent; border: 0; color: var(--theme-muted,#c6a9d4); margin-left: auto; }
    .channel-page .viewer-info { padding: 7px 0 0; }
    .channel-page .viewer-right-group { gap: 14px; }
    .channel-page #tabs-area { display: none; }
    .channel-page .chat-section, .channel-page.is-typing .chat-section { position: relative; inset: auto; display: flex; flex: 1 0 330px; width: 100%; min-width: 0; max-width: none; min-height: 330px; height: auto; background: var(--theme-surface,#141116) !important; border-left: 0; }
    .channel-page .channel-chat-heading { height: 42px; min-height: 42px; }
    .channel-page #collapse-channel-chat { display: none; }
    .channel-page .mobile-only-tabs { display: flex; flex-shrink: 0; position: static; }
    .channel-page #messages, .channel-page.is-typing #messages { padding: 12px !important; background: transparent; max-height: 450px; min-height: 160px; }
    .channel-page #mobile-panel { min-height: 180px; max-height: 480px; }
    
    .channel-page #admin-toolbar { padding-left: 12px; padding-right: 12px; }
    .channel-offline-stage { gap: 8px; padding: 14px; }
    .offline-symbol { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; margin: 0; }
    .offline-eyebrow { font-size: 8px; letter-spacing: 3px; }
    .channel-offline-stage > span:last-of-type { font-size: 10px; }
    .channel-page .offline-replays { margin: 0; padding: 6px 10px; font-size: 10px; }
}
.channel-page.chat-popup .lobby-navbar, .channel-page.chat-popup .channel-sidebar, .channel-page.chat-popup .video-section, .channel-page.chat-popup .mobile-only-tabs, .channel-page.chat-popup #collapse-channel-chat { display: none !important; }
.channel-page.chat-popup .container { height: 100dvh; }
.channel-page.chat-popup .chat-section { display: flex; flex: 1; width: 100%; min-width: 0; max-width: none; height: 100%; }
@media (prefers-reduced-motion: reduce) {
    .channel-page *, .channel-page *::before, .channel-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.channel-page #login-warning::after { inset: 3px; background: var(--theme-bg,#000); }
.channel-page #login-warning span {
    background:none; background-clip:border-box; -webkit-background-clip:border-box;
    color:var(--theme-text,#fff);
}
.channel-page #login-warning:hover::after { background: transparent; }
.channel-page #login-warning:hover span { background: none; color: #000; }
.channel-page #messages { box-shadow: none; border: 0; border-radius: 0; }
/* Header controls must not inherit full-width buttons from the mobile drawer. */
.channel-page .lobby-navbar .auth-btn-group { display: flex; align-items: center; width: auto; }
.channel-page .lobby-navbar .btn-text-login, .channel-page .lobby-navbar .btn-green-join { flex: none; width: auto; white-space: nowrap; margin: 0; }
.channel-page .return-to-live { position: absolute; z-index: 2; top: 14px; left: 14px; background: #201527e8; color: var(--theme-text,#f2d0ff); border: 1px solid #86549d; border-radius: 7px; padding: 8px 12px; font-size: 12px; }
.channel-page.chat-popup #messages { max-height: none; }
@media (max-width: 900px) {
    .channel-page .lobby-navbar .btn-text-login, .channel-page .lobby-navbar .btn-green-join { padding: 7px 10px !important; line-height: 18px; height: 34px; border-radius: 18px; }
    .channel-page .lobby-navbar .btn-text-login { background: transparent !important; border: 0 !important; }
    .channel-page .lobby-navbar .btn-green-join::after { border-radius: 16px; }
    .channel-page #channel-title-display { padding: 0 !important; }
}
.channel-page #lobby-auth-area > div > span:first-of-type { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
    .channel-page #lobby-auth-area > div > span:first-of-type { max-width: 54px; font-size: 12px; }
}
.channel-page .broadcast-notice { position: fixed; z-index: 11000; top: 76px; left: 50%; transform: translate(-50%, -12px); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 28px); padding: 14px 16px; background: #25162eee; border: 1px solid #ba68e3; border-radius: 12px; box-shadow: 0 8px 32px #0006; color: var(--theme-text,#f4e1ff); font-size: 13px; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
.channel-page .broadcast-notice.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.channel-page .broadcast-notice > i { color: var(--theme-muted,#ff85b3); }
.channel-page .broadcast-notice button { flex-shrink: 0; color: var(--theme-muted,#f5c6ff); border: 0; background: transparent; font-size: 12px; padding: 4px; }
.channel-page #broadcast-notice-live { border-bottom: 1px solid #ce82e9; }
:root[data-theme="light"] .channel-page .broadcast-notice {
    background:var(--theme-surface,#fff);
    color:var(--theme-text,#251e2e);
    border-color:#a76ac7;
    box-shadow:0 8px 32px #34204026;
}
:root[data-theme="light"] .channel-page .broadcast-notice > i,
:root[data-theme="light"] .channel-page .broadcast-notice button {
    color:#733594;
}
:root[data-theme="light"] .channel-page #broadcast-notice-live { border-bottom-color:#a76ac7; }
.channel-page .channel-offline-stage { transition: opacity .3s; }
@media (max-width: 900px) { .channel-page .broadcast-notice { top: 66px; font-size: 12px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .channel-page .broadcast-notice, .channel-page .channel-offline-stage { transition: none; } }
/* 방송 상태의 시각적 표시: 소켓이 is-live를 변경하면 모든 표시가 함께 전환됩니다. */
.channel-page .profile-box { overflow: visible; }
.channel-page .profile-box:not(.is-live) .channel-profile-img { border-color: #aaa; box-shadow: none; animation: none; }
.channel-page .profile-box.is-live .channel-profile-img { border: 3px solid #ff3030; box-shadow: 0 0 5px rgba(255, 48, 48, .9), 0 0 14px rgba(255, 24, 24, .6), 0 0 28px rgba(255, 0, 0, .3); animation: profile-live-neon 2s ease-in-out infinite; }
.channel-page .profile-box .live-tag-badge { display: none; bottom: -5px; padding: 3px 7px; background: red; border: 1px solid red; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .4px; box-shadow: none; }
.channel-page .profile-box.is-live .live-tag-badge { display: block; box-shadow: 0 0 6px rgba(255, 32, 32, .75), 0 0 14px rgba(255, 0, 0, .4); animation: profile-live-badge-neon 2s ease-in-out infinite; }
@keyframes profile-live-neon {
    0%, 100% { box-shadow: 0 0 3px rgba(255, 48, 48, .4), 0 0 8px rgba(255, 24, 24, .2), 0 0 16px rgba(255, 0, 0, .08); }
    50% { box-shadow: 0 0 7px rgba(255, 48, 48, 1), 0 0 20px rgba(255, 24, 24, .75), 0 0 34px rgba(255, 0, 0, .4); }
}
@keyframes profile-live-badge-neon {
    0%, 100% { box-shadow: 0 0 2px rgba(255, 32, 32, .3), 0 0 6px rgba(255, 0, 0, .12); }
    50% { box-shadow: 0 0 8px rgba(255, 32, 32, .9), 0 0 18px rgba(255, 0, 0, .55); }
}
.channel-page #title-status.on { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 20px; background: linear-gradient(110deg, #ff4357, #e875ac); color: white; font-weight: 800; letter-spacing: .3px; box-shadow: 0 0 12px #ff4d7655; white-space: nowrap; }
.channel-page #title-status.on::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: white; }
.channel-page .directory-avatar { position: relative; display: inline-flex; width: 41px; height: 41px; flex: 0 0 41px; overflow: visible; }
.channel-page .directory-avatar img { width: 41px; height: 41px; transition: border-color .25s, box-shadow .25s; }
.channel-page .directory-channel.is-live .directory-avatar img { border: 3px solid #ff3030; box-shadow: none; animation: none; }
.channel-page .directory-live-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 2px 5px; border-radius: 4px; background: red; color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .4px; border: 1px solid red; box-shadow: none; animation: none; }
@media (max-width: 900px) { .channel-page .profile-box .live-tag-badge { font-size: 8px; padding: 2px 5px; bottom: -4px; } }
@media (prefers-reduced-motion: reduce) { .channel-page .profile-box.is-live .channel-profile-img, .channel-page .profile-box.is-live .live-tag-badge, .channel-page .directory-channel.is-live .directory-avatar img, .channel-page .directory-live-badge { animation: none; } }
/* 메인 인덱스와 방송국에서 공통 내비게이션을 사용합니다. */
.index-page .site-shell { display: flex; flex: 1; width: 100%; min-height: 0; position: relative; overflow: hidden; }
.index-page .lobby-container { flex: 1; min-width: 0; width: auto; max-width: none; margin: 0; padding: 32px 28px 80px; overflow-y: auto; scroll-behavior: smooth; }
/* Hide the lobby scrollbar while retaining native scrolling. */
.index-page #lobby-main { scrollbar-width: none; -ms-overflow-style: none; }
.index-page #lobby-main::-webkit-scrollbar { width: 0; }

.index-page .lobby-navbar { display: flex; align-items: center; }
.index-page #restore-channel-chat { display: none !important; }
.index-page .directory-state { margin: 0; }
.index-page .channel-sidebar { scrollbar-width: none; }
@media (max-width: 900px) {
    .index-page .lobby-container { padding: 20px 14px 48px; }
    .index-page .site-shell { height: calc(100dvh - 56px); }
}
.channel-page .role-streamer-mark { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; vertical-align: middle; border: 0; border-radius: 0; box-shadow: none; }
.channel-page .nick-admin, .channel-page .role-admin-mark { color: #ff9800; }
.channel-page .nick-title .role-streamer-mark { width: 16px; height: 16px; }
.channel-page .role-admin-mark { font-size: 16px; }
.index-page .shine-text { color: transparent; background-clip: text; -webkit-background-clip: text; animation: text-roll 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .index-page .shine-text { animation: none; } }
.channel-page #chat-send-status { flex: none; margin: 0; padding: 8px 12px; color: var(--theme-muted,#ffc6df); background: var(--theme-surface,#322034); font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .channel-page #admin-toolbar .btn-admin-tool { transition: none; } }

/* Station controls share the global header; popup chat keeps its own header. */
.channel-page .channel-chat-heading { display: none; }
.channel-page #main-chat-header { display: none !important; height: 60px; min-height: 60px; padding: 5px 10px; background: var(--theme-bg,#111); border-bottom: 1px solid var(--theme-border,#333); font-size: 18px; }
.channel-page #user-status { display: flex; align-items: center; flex: 1; min-width: 0; }
.channel-page #user-status > div { width: 100%; }
.channel-page :is(#user-status, #lobby-auth-area) .logout-btn { margin-left: auto !important; font-size: 24px !important; }
.channel-page :is(#user-status, #lobby-auth-area) .admin-gear-btn, .channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 0 3px; font-size: 22px; color: var(--theme-muted,#aaa); cursor: pointer; transition: transform .3s, color .3s; }

.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn { color: var(--theme-muted,#888); }
.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn.server-on { color: var(--theme-muted,#afffb2); text-shadow: 0 0 5px #4caf50, 0 0 10px #4caf50, 0 0 20px #2e7d32; }

.channel-page #admin-toolbar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: absolute; top: 5px; left: 2.5%; width: 95%; box-sizing: border-box; gap: 12px; padding: 0 15px; max-height: 0; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; background: #000c; border: 2px solid var(--theme-border,#333); border-radius: 10px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px #0008; z-index: 1000; transition: max-height .4s, opacity .4s, padding .4s, visibility .4s; }
.channel-page #admin-toolbar.active { animation: none; max-height: 250px; opacity: 1; visibility: visible; pointer-events: auto; padding: 15px; }
.channel-page #admin-toolbar .btn-admin-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 67px; min-width: 0; padding: 7px 0; background: var(--theme-surface,#1a1a1a); border: 2px solid var(--theme-border,#333); border-radius: 12px; color: var(--theme-muted,#888); box-shadow: 0 10px 30px #0008; transition: all .3s; }
.channel-page #admin-toolbar .btn-admin-tool i { font-size: 24px; color: inherit; }
.channel-page #admin-toolbar .btn-admin-tool span { font-size: 14px; font-weight: 500; white-space: nowrap; }
.channel-page #admin-toolbar .btn-admin-tool:hover { background: var(--theme-bg,#000); border-color: #9900f0; box-shadow: 0 0 15px #9900f04d; transform: translateY(-3px); color: white; }
.channel-page #admin-toolbar .btn-admin-tool:hover i { background: var(--main-color); background-clip: text; -webkit-background-clip: text; color: transparent; }
.channel-page #chat-form { display: flex; align-items: center; padding: 10px; gap: 0; min-height: 62px; background: var(--theme-bg,#111); border-top: 1px solid var(--theme-border,#151515); }
.channel-page #m { flex: 1; width: 0; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 12px 10px; background: #1e1e1ee6; border: 0; border-radius: 0 10px 10px 0; color: white; outline: none; font-size: 13px; }
.channel-page #chat-form .btn-gif { flex: 0 0 32px; width: 32px; height: 40px; margin: 0; padding: 0; background: #0005; border: 0; border-radius: 9px 0 0 9px; color: white; }
.channel-page #chat-form .btn-popup-chat { display: flex; align-items: center; justify-content: center; flex: 0 0 45px; width: 45px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--theme-muted,#ccc); font-size: 20px; }
.channel-page #btn-vote-manage, .channel-page #btn-clear-float { position: absolute; right: 10px; left: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #bb65e84d; border-radius: 10px; background: linear-gradient(145deg,#302039,#211827); color: #e7b8fb; box-shadow: 0 2px 7px #0003; font-size: 17px; cursor: pointer; backdrop-filter: blur(5px); z-index: 10; transition: background .18s, border-color .18s, box-shadow .18s; }
.channel-page #btn-vote-manage { bottom: 120px; }
.channel-page #btn-clear-float { bottom: 70px; }
.channel-page #btn-vote-manage:hover, .channel-page #btn-clear-float:hover { background: linear-gradient(145deg,#482452,#33203f); border-color: #cb7bec; color: #fff; box-shadow: 0 3px 10px #9f32cf26; transform: scale(1.1); }
.channel-page #btn-vote-manage:focus-visible, .channel-page #btn-clear-float:focus-visible { outline: 2px solid #c873e9; outline-offset: 3px; }
:root[data-theme="light"] .channel-page #btn-vote-manage, :root[data-theme="light"] .channel-page #btn-clear-float { background: linear-gradient(145deg,#fcf7ff,#eee0f6); border-color: #d9bce8; color: #8236a4; box-shadow: 0 2px 7px #49225614; }
:root[data-theme="light"] .channel-page #btn-vote-manage:hover, :root[data-theme="light"] .channel-page #btn-clear-float:hover { background: #e9d5f3; border-color: #b574d2; color: #632281; }
@media (prefers-reduced-motion: reduce) { .channel-page #admin-toolbar, .channel-page #admin-toolbar .btn-admin-tool, .channel-page :is(#user-status, #lobby-auth-area) .admin-gear-btn { transition: none; } }

.channel-page.chat-popup #main-chat-header { display: flex !important; }
.channel-page.chat-popup #admin-toolbar { top: 65px; }

/* Settings dialogs restored from the supplied station stylesheet. */
.channel-page .station-settings { background: #000c; backdrop-filter: blur(5px); overflow-y: auto; padding: 16px; box-sizing: border-box; }
.channel-page .station-settings .modal-content { box-sizing: border-box; animation: none; width: 342px !important; max-width: 100% !important; margin: clamp(0px, 6vh, 64px) auto 16px; padding: 10px 10px 20px; background: #000b; border: 1px solid var(--theme-border,#333); border-radius: 15px; color: var(--theme-text,#fff); box-shadow: 0 8px 24px #0008; }
.channel-page #modal-badwords .modal-content { width: 402px !important; margin-top: 0; }
.channel-page #modal-stats .modal-content { width: 572px !important; }
.channel-page .station-settings h3 { margin: 0; padding: 0 0 10px; border-bottom: 1px solid #d881ff; text-align: center; font-size: 20px; line-height: 1.35; font-weight: 700; color: transparent; background: linear-gradient(to right,#9900f0,#ff85b3,#9900f0); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; animation: text-roll 5s linear infinite; }
.channel-page .station-settings input[type="text"] { box-sizing: border-box; display: block; width: 92%; margin: 10px auto; padding: 12px 10px; height: 42px; background: #1e1e1ee6; border: 1px solid var(--theme-border,#333); border-radius: 20px; color: white; font-size: 13px; box-shadow: inset 0 0 10px #0009; }
.channel-page .station-settings button { display: block; box-sizing: border-box; width: 90%; padding: 10px; margin: 10px auto 0; border-radius: 20px; font-size: 13px; font-weight: 400; cursor: pointer; }
.channel-page .station-settings .mainbutton, .channel-page .station-settings .BadWord { background: linear-gradient(45deg,#9900f0,#ff85b3,#9900f0); background-size: 100% auto; border: 0; color: #000; transition: background-size .3s; box-shadow: none; }
.channel-page .station-settings .mainbutton:hover, .channel-page .station-settings .BadWord:hover { background-size: 200% auto; animation: none; transform: none; box-shadow: none; }
.channel-page .station-settings .close-btn { background: none; color: white; border: 1px solid var(--theme-border,#333); }
.channel-page .station-settings .close-btn:hover { background: #3232321a; }
.channel-page .station-settings input[type="file"] { display: none; }
.channel-page .station-settings .file-upload-group { box-sizing: border-box; width: 95%; margin: 10px auto; display: flex; align-items: center; background: #1e1e1ee6; border: 1px solid var(--theme-border,#333); border-radius: 20px; padding: 8px 15px; box-shadow: inset 0 0 10px #0009; }
.channel-page .station-settings .custom-file-upload { display: inline-block; padding: 5px 12px; background: linear-gradient(30deg,#f292ff,#ad3aff); color: #000; border-radius: 15px; font-size: 11px; font-weight: bold; margin-right: 10px; white-space: nowrap; cursor: pointer; transition: transform .2s; }
.channel-page .station-settings .custom-file-upload:hover { transform: scale(1.05); }
.channel-page .station-settings .file-name { min-width: 0; color: var(--theme-text,#eee); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-page .station-settings .textarea_word { box-sizing: border-box; display: block; width: 95%; max-width: 95%; height: 142px; min-height: 72px; margin: 0 auto 10px; padding: 10px; background: var(--theme-input,#1a1a1a); color: var(--theme-text,#fff); border: 1px solid var(--theme-border,#333); border-radius: 8px; outline: none; font-size: 13px; }
.channel-page .station-settings .stat-btn { flex: 0 1 60px; max-width: 60px; width: auto; margin: 10px 0; padding: 8px; background: none; border: 1px solid var(--theme-border,#444); color: var(--theme-muted,#ccc); border-radius: 20px; font-size: 13px; }
.channel-page .station-settings .stat-btn:hover { background: var(--theme-surface,#333); color: var(--theme-text,#fff); }
@media (prefers-reduced-motion: reduce) { .channel-page .station-settings h3 { animation: none; } }

.index-page .streamer-studio-wrap { display: inline-flex; align-items: center; }
.index-page .streamer-studio-popover { width: 322px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 15px; background: #000c; border: 2px solid var(--theme-border,#333); border-radius: 10px; backdrop-filter: blur(10px); box-shadow: 0 10px 30px #0008; }

.channel-page #adminLayer #admin-log { box-sizing: border-box; height: 170px; overflow-y: auto; margin: 0 0 15px; padding: 10px; line-height: 1.8; background: var(--theme-bg,#111); box-shadow: inset 0 0 10px #000; border: 0; border-radius: 10px; font-size: 13px; overflow-wrap: anywhere; }
.channel-page #adminLayer #mainControlBtn, .channel-page #adminLayer .close-btn { height: 38px; padding: 8px 10px; }
.channel-page #adminLayer #prog-container { position: relative; width: 100%; box-sizing: border-box; background: var(--theme-surface,#222); border: 1px solid var(--theme-border,#444); border-radius: 30px; height: 30px; margin: 10px 0; overflow: hidden; }
.channel-page #adminLayer #prog-bar { width: 0; height: 100%; background: var(--main-color); color: var(--theme-text,#fff); font-size: 12px; text-align: center; line-height: 28px; transition: width .3s; }

@keyframes sons { 0%,100% { box-shadow: 0 0 5px #a538f3; } 50% { box-shadow: 0 0 10px 5px #a538f3; } }
@media (prefers-reduced-motion: reduce) { #adminLayer #mainControlBtn { animation: none !important; } }
/* Align the shared profile header with the chat column, as in the original. */
@media (min-width: 901px) {
    .channel-page :is(#btn-mobile-menu, #mobile-slide-menu, #menu-overlay) { display: none !important; }
    .channel-page .lobby-navbar { padding-right: 0; }
    .channel-page #lobby-auth-area { position: relative; display: flex; align-items: center; flex: 0 0 340px; width: 340px; height: 100%; padding: 0 12px; box-sizing: border-box; }
    .channel-page #lobby-auth-area > div { width: 100%; justify-content: flex-start; }
    .channel-page #lobby-auth-area .logout-btn { margin-left: auto !important; }
    .index-page #lobby-auth-area .streamer-studio-wrap { position: static; }
    .index-page .streamer-studio-popover { top: calc(100% + 5px); right: 8px; max-width: calc(100% - 16px); }
}
.channel-page :is(#user-status, #lobby-auth-area) .admin-gear-btn:hover { color: var(--theme-text,#fff); background: none; transform: rotate(90deg); }
.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn { transition: all .5s ease; }
.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn:hover { color: var(--theme-muted,#afffb2); background: none; text-shadow: 0 0 8px #4caf50, 0 0 15px #4caf50; }
.channel-page :is(#user-status, #lobby-auth-area) .logout-btn:hover { color: #ff5252 !important; }
/* Guest actions stay right-aligned; signed-in identity keeps its left edge. */
.channel-page #lobby-auth-area > .auth-btn-group { margin-left: auto; justify-content: flex-end; width: 100%; }

/* Profile identity and contact share one vertically centered summary row. */
.channel-page .channel-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; background: var(--theme-bg,#111); }
.channel-page #channel-title-display { width: auto; flex: 0 1 auto; gap: 14px; }
.channel-page .channel-text-group { flex: 0 1 auto; gap: 4px; }
.channel-page .channel-handle { display: block; font-size: 12px; color: var(--theme-muted,#b776dc); }
.channel-page #mobile-contact-btn { flex-shrink: 0; margin: 0 0 0 8px; align-self: center; font-size: 13px; }
.channel-page .viewer-info { flex: 1 0 auto; width: auto; min-height: 30px; padding: 0; margin: 0; align-items: center; background: transparent; }
.channel-page .viewer-right-group { gap: 8px; align-items: center; }
.channel-page .viewer-count { color: var(--theme-text,#fff); font-size: 13px; font-weight: 600; }
.channel-page .viewer-count > i { color: var(--theme-text,#fff); }
.channel-page .viewer-num { color: #4d85ff; font-size: 17px; height: 19px; margin: 0 5px; }
.channel-page .btn-share-icon, .channel-page .btn-pip-icon { color: var(--theme-muted,#ccc); font-size: 16px; }
.channel-page .btn-share-icon:hover, .channel-page .btn-pip-icon:hover { color: var(--theme-text,#fff); }
@media(max-width:600px) { .channel-page #channel-title-display { flex-wrap: wrap; gap: 10px; } .channel-page .channel-summary { padding: 3px 10px; } }

.channel-page #title-status { flex-shrink: 0; align-self: center; font-size: 15px; padding: 5px 10px; border-radius: 4px; background: var(--theme-surface,#29232f); color: var(--theme-muted,#ada2b7); margin: 0; line-height: 1.4; }

/* Keep the profile and station menu visible below the player on desktop. */
@media (min-width: 901px) {
    .channel-page .channel-summary { flex-shrink: 0; }
    .channel-page #video-wrapper:not(:fullscreen) { max-height: var(--station-player-max-height, calc(100dvh - 192px)); }
}

.channel-page .channel-follow-button {
    flex-shrink: 0; padding: 7px 13px; border: 1px solid #22c55e;
    border-radius: 20px; background: #22c55e; color: var(--theme-text,#fff);
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.channel-page .channel-follow-button[aria-pressed="true"] { background: var(--theme-surface,#333); border-color: var(--theme-border,#666); color: var(--theme-text,#d1d1d1); }
.channel-page .channel-follow-button:hover { background: #22c55e; }
.channel-page .channel-follow-button[aria-pressed="true"]:hover { background: var(--theme-surface,#404040); }
.channel-page .channel-follow-button:disabled { opacity: 1; cursor: pointer; }
.channel-page .channel-follow-button[hidden] { display: none; }
.channel-page #mobile-contact-btn[aria-disabled="true"] { opacity: 1; cursor: default; }

/* Animate both directions without removing the sidebar from layout mid-transition. */
.channel-page .channel-sidebar { --sidebar-width: 252px; box-sizing: border-box; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); margin-left: 0; opacity: 1; visibility: visible; transition: margin-left .3s ease, transform .3s ease, opacity .3s ease, visibility 0s; }
@media (min-width:901px) {
    .channel-page .channel-sidebar { overflow-x: hidden; overflow-anchor: none; transition: width .34s cubic-bezier(.22,1,.36,1), flex-basis .34s cubic-bezier(.22,1,.36,1); }
    .channel-page.sidebar-collapsed .channel-sidebar { display: block; flex-basis: 72px; width: 72px; margin-left: 0; opacity: 1; visibility: visible; pointer-events: auto; }
    /* Keep the inner layout at its expanded width: only the outer rail clips it. */
    .channel-page .channel-sidebar > :is(.sidebar-home, .sidebar-browse-links, .sidebar-heading, #follow-directory, #channel-directory) { box-sizing: border-box; width: calc(var(--sidebar-width) - 25px); }
    .channel-page .channel-sidebar .sidebar-menu-link { white-space: nowrap; }
    .channel-page .channel-sidebar .directory-avatar img { box-sizing: border-box; }
    .channel-page .channel-sidebar :is(.directory-copy, .directory-audience, .directory-state, .sidebar-heading > span),
    .channel-page .channel-sidebar .sidebar-menu-link > span:not(.sidebar-live-icon):not(.sidebar-compact-label) {
        opacity: 1; transition: opacity .22s ease .06s;
    }
    /* Opacity preserves row positions and accessible link names in both states. */
    .channel-page.sidebar-collapsed .channel-sidebar :is(.directory-copy, .directory-audience, .directory-state, .sidebar-heading > span),
    .channel-page.sidebar-collapsed .sidebar-menu-link > span:not(.sidebar-live-icon):not(.sidebar-compact-label) { opacity: 0; transition-delay: 0s; }
    .channel-page .channel-sidebar .sidebar-footer { position: relative; box-sizing: border-box; width: calc(var(--sidebar-width) - 41px); white-space: nowrap; transition: color .22s ease; }
    .channel-page .channel-sidebar .sidebar-footer::before { content: '•••'; position: absolute; left: 0; top: 16px; font-size: 16px; color: var(--theme-muted,#a89cae); opacity: 0; transition: opacity .22s ease; }
    .channel-page.sidebar-collapsed .sidebar-footer { color: transparent; }
    .channel-page.sidebar-collapsed .sidebar-footer::before { opacity: 1; }
}
@media (min-width:901px) and (max-width:1280px) { .channel-page .channel-sidebar { --sidebar-width: 220px; } }
@media (max-width:900px) {
    .channel-page .channel-sidebar, .channel-page.sidebar-collapsed .channel-sidebar { --sidebar-width: 260px; display: block; margin-left: 0; transform: translateX(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .3s ease, visibility 0s .3s; }
    .channel-page.sidebar-open .channel-sidebar { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .3s ease, opacity .3s ease, visibility 0s; }
}
/* Compact navigation: labels below icons, avatars grouped between dividers. */
.sidebar-compact-label { display: none; }
/* On mobile, reserve the metadata row for the nickname and view count. */
@media (max-width:900px) {
    .channel-page :is(#tabs-area, #main-chat-sec) .video-date,
    .index-page .card-meta .card-published { display: none; }
}
@media (min-width:901px) {
    .channel-page .channel-sidebar .sidebar-menu-link { position: relative; box-sizing: border-box; height: 48px; transition: height .34s cubic-bezier(.22,1,.36,1), background .15s, color .15s; }
    .channel-page.sidebar-collapsed .channel-sidebar .sidebar-menu-link { height: 64px; }
    .channel-page .channel-sidebar .sidebar-menu-link > :is(i, .sidebar-live-icon) { transition: transform .34s cubic-bezier(.22,1,.36,1); }
    .channel-page.sidebar-collapsed .sidebar-menu-link > :is(i, .sidebar-live-icon) { transform: translate(2px,-10px); }
    .channel-page .channel-sidebar .sidebar-menu-link > .sidebar-compact-label {
        display: block; position: absolute; left: -8px; bottom: 5px; width: 64px;
        font-size: 10px; font-weight: 500; line-height: 16px; text-align: center;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0;
        pointer-events: none; transition: opacity .2s ease;
    }
    .channel-page.sidebar-collapsed .channel-sidebar .sidebar-menu-link > .sidebar-compact-label { opacity: 1; transition-delay: .12s; }
    .channel-page .channel-sidebar .sidebar-heading { box-sizing: border-box; height: 64px; padding: 28px 10px 14px; overflow: hidden; transition: height .34s cubic-bezier(.22,1,.36,1), padding .34s cubic-bezier(.22,1,.36,1); }
    .channel-page.sidebar-collapsed .channel-sidebar .sidebar-heading { height: 24px; padding: 12px 0 11px; }
    .channel-page .channel-sidebar .sidebar-heading { position: relative; }
    .channel-page .channel-sidebar .sidebar-heading::after { content: ''; position: absolute; left: 0; top: 12px; width: 47px; border-top: 1px solid var(--shell-border); opacity: 0; transition: opacity .22s ease; }
    .channel-page.sidebar-collapsed .channel-sidebar .sidebar-heading::after { opacity: 1; }
    /* Animate the actual empty-message height, not an arbitrary max-height cap. */
    .channel-page .channel-sidebar :is(#follow-directory, #channel-directory):has(> .directory-state) { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .34s cubic-bezier(.22,1,.36,1); }
    .channel-page.sidebar-collapsed .channel-sidebar :is(#follow-directory, #channel-directory):has(> .directory-state) { grid-template-rows: 0fr; }
    .channel-page .channel-sidebar .directory-state { min-height: 0; margin: 0; overflow: hidden; transition: padding .34s cubic-bezier(.22,1,.36,1), opacity .22s ease; }
    .channel-page.sidebar-collapsed .channel-sidebar .directory-state { padding-top: 0; padding-bottom: 0; }
    .channel-page .channel-sidebar .directory-channel { transition: padding .34s cubic-bezier(.22,1,.36,1), background .2s; }
    .channel-page.sidebar-collapsed .channel-sidebar .directory-channel { padding-top: 6px; padding-bottom: 6px; }
    .channel-page .channel-sidebar .directory-avatar { transition: transform .34s cubic-bezier(.22,1,.36,1); }
    .channel-page.sidebar-collapsed .channel-sidebar .directory-avatar { transform: translateX(-5px); }
}
@media (prefers-reduced-motion: reduce) { .channel-page .channel-sidebar, .channel-page .channel-sidebar *, .channel-page .channel-sidebar *::before, .channel-page.sidebar-collapsed .channel-sidebar, .channel-page.sidebar-open .channel-sidebar { transition: none !important; } }

.channel-page .station-members { box-sizing: border-box; width: 680px; max-width: calc(100vw - 24px); max-height: 85dvh; overflow-y: auto; padding: 20px; background: var(--theme-bg,#111); border: 1px solid var(--theme-border,#555); border-radius: 14px; color: var(--theme-text,#eee); }
.station-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.station-members-heading h3 { margin: 0; }
.station-members-heading button { border: 0; background: transparent; color: var(--theme-text,#ddd); font-size: 28px; }
.station-members > p, #channel-members-status { font-size: 13px; color: var(--theme-muted,#bcb2c5); line-height: 1.6; }
.channel-page #channel-members-search { box-sizing: border-box; width: 100%; margin: 10px 0; padding: 10px 12px; background: var(--theme-input,#252129); color: var(--theme-text,#fff); border: 1px solid var(--theme-border,#51475a); border-radius: 8px; }

.channel-page #adminLayer #prog-container::after { content: attr(data-progress); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--theme-text,#fff); font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px #000; pointer-events: none; }

@media (max-width: 900px) {
    .channel-page .lobby-nav-auth { display: none; }
    .channel-page .lobby-navbar #btn-mobile-menu {
        position: static; display: inline-flex !important; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 44px; margin: 0 0 0 auto;
        padding: 8px; color: var(--theme-text,#fff); background: transparent; border: 0; font-size: 28px;
    }
    .channel-page #mobile-slide-menu { overflow-y: auto; height: 100dvh; max-width: calc(100vw - 24px); }
}
.channel-page .close-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; }

.channel-page #channel-members-modal .station-members { width: 860px; }
.channel-page #channel-members-modal .station-members-heading { display:flex; width:100%; align-items:center; justify-content:space-between; }
.channel-page #channel-members-modal #channel-members-title { display:block; flex:1; width:auto; padding:0; margin:0; border:0; white-space:nowrap; text-align:left; color:var(--theme-muted,#e885df); background:none; }
.channel-page #channel-members-modal #channel-members-close { width:44px; height:44px; padding:0; margin:0; flex:0 0 44px; border:0; border-radius:8px; background:transparent; color:var(--theme-text,#ddd); font-size:28px; }
.station-members-table-wrap { overflow-x:auto; }
.channel-page #channel-members-modal .station-members-table { width:100%; min-width:580px; border-collapse:collapse; text-align:left; font-size:13px; }
.station-members-table th, .station-members-table td { padding:13px 10px; border-bottom:1px solid var(--theme-border,#333); vertical-align:middle; }
.station-members-table th { color:var(--theme-muted,#bab1c0); font-weight:600; white-space:nowrap; }
.station-members-table td small { display:block; margin-top:4px; color:var(--theme-muted,#999); }
.channel-page #channel-members-modal .station-members-table select, .channel-page #channel-members-modal .station-members-table button { display:inline-block; width:auto; min-width:76px; padding:7px 10px; margin:0; font-size:12px; border:1px solid var(--theme-border,#765183); border-radius:16px; background:var(--theme-input,#211526); color:var(--theme-text,#fff); }
.station-members-table .is-blocked { background:#35171b55; }
.station-members-table :disabled { opacity:.5; }

/* Mobile account drawer: keep labels above the gradient button background. */
.channel-page #mobile-slide-menu .mobile-menu-header {
    min-height: 44px;
    margin-bottom: 25px;
    padding-bottom: 10px;
}
.channel-page #mobile-slide-menu { padding-top: 5px; }
.channel-page #mobile-slide-menu .close-menu-btn { font-size: 26px; margin-right: -8px; }
.channel-page #mobile-slide-menu .mobile-auth-group button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    min-height: 45px;
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--theme-text,#fff);
    font-size: 15px;
    font-weight: 700;
}
.channel-page #mobile-slide-menu .mobile-auth-group button span {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    color: var(--theme-text,#fff);
    font-size: 15px;
}
.channel-page #mobile-slide-menu .btn-green-join::after { border-radius: 6px; }
.channel-page #mobile-slide-menu .mobile-menu-notice {
    margin-top: 30px;
    padding: 16px 14px;
    border: 1px solid var(--theme-border,#333);
    border-radius: 8px;
    background: var(--theme-bg,rgba(0, 0, 0, .6));
    color: var(--theme-muted,#aaa);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.channel-page #mobile-slide-menu .mobile-menu-notice > i { color: #ffc107; font-size: 24px; }
:root[data-theme="light"] .channel-page #mobile-slide-menu .mobile-menu-notice > i { color: #946200; }
:root[data-theme="light"] .channel-page #mobile-slide-menu .mobile-menu-notice .mobile-menu-age-warning { color: #c62828; }
.channel-page #mobile-slide-menu .mobile-menu-notice p { margin: 10px 0 0; }
.channel-page #mobile-slide-menu .mobile-menu-notice .mobile-menu-age-warning {
    margin-top: 6px;
    color: #ff4545;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

@media (max-width: 900px) {
    .channel-page #admin-toolbar,
    .channel-page .admin-gear-btn { display: none !important; }
}

@media (max-width: 900px) {
    .channel-page #channel-sidebar,
    .channel-page #toggle-channel-sidebar { display: none !important; }
}

.channel-page .channel-handle.channel-followers { color: #4ade80; }

/* Shared desktop and mobile brand typography. */
.channel-page .lobby-navbar .lobby-brand-title,
.channel-page .auth-brand .lobby-brand-title {
    display: block;
    font-family: "Gugi", sans-serif;
    font-size: 26px;
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    line-height: 34px;
    letter-spacing: -1px;
    padding-right: 4px;
    flex-shrink: 0;
    overflow: visible;
    white-space: nowrap;
}
.channel-page .lobby-navbar .lobby-logo-icon { flex: 0 0 30px; }
@media (min-width: 901px) {
    .channel-page .lobby-navbar .lobby-brand-title,
.channel-page .auth-brand .lobby-brand-title { font-size: 28px; transform: translateY(2px); }
}

.directory-audience { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; color: var(--theme-muted,#ada5b5); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.directory-status-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #777; flex-shrink: 0; }
.directory-audience.is-live .directory-status-dot { background: #ff4545; }

.channel-page #mobile-contact-btn { box-shadow: var(--main-shadow); }
.channel-page #mobile-contact-btn::before { animation: scroll-join 1.5s infinite linear; }
.channel-page #mobile-contact-btn::after { inset: 2px; }
.channel-page #mobile-contact-btn:hover::after { background: var(--theme-surface,#151515); }

@media (max-width: 900px) {
    
    .channel-page .viewer-right-group .channel-follow-button { order: 2; }
}

.channel-page .viewer-label-mobile { display: none; }
@media (max-width: 900px) {
    .channel-page .viewer-label-desktop { display: none; }
    .channel-page .viewer-label-mobile { display: inline; }
}

@media (max-width: 600px) {
    .channel-page .channel-follow-button { padding: 5px 13px; }
}

@media (max-width: 900px) {
    .channel-page .lobby-navbar { align-items: center; }
    .channel-page .lobby-navbar #btn-mobile-menu { box-sizing: border-box; align-self: center; line-height: 1; }
    .channel-page .lobby-navbar #btn-mobile-menu > i { display: block; line-height: 1; }
}

.channel-page #toggle-channel-sidebar { font-size: 24px; }

/* Keep the share popup above the channel identity and contact button. */
.channel-page #channel-title-display { z-index: 0; }
.channel-page .viewer-info { position: relative; z-index: 2; }
.channel-page .share-wrapper { position: relative; }
.channel-page .share-popup { z-index: 10; }

@media (max-width: 900px) {
    .channel-page .viewer-count { display: inline-flex; align-items: center; gap: 4px; }
    .channel-page .viewer-count .viewer-num { margin: 0; }
    .channel-page .channel-summary { position: relative; }
    .channel-page .viewer-info, .channel-page .share-wrapper { position: static; }
    .channel-page .share-popup {
        left: 50%; right: auto; bottom: calc(100% + 8px);
        transform: translateX(-50%);
        width: 260px; max-width: calc(100% - 20px); box-sizing: border-box;
    }
}

/* Mobile chat: fixed header/footer, only the active message/list panel flexes. */
@media (max-width: 900px) {
    .channel-page:not(.index-page):not(.chat-popup) .container {
        flex: none; min-height: 0; overflow: hidden;
        height: calc(100dvh - 56px);
    }
    .channel-page:not(.index-page) .chat-section,
    .channel-page:not(.index-page).is-typing .chat-section {
        display: flex; flex-direction: column; flex: 1 1 0;
        min-height: 0; height: auto; overflow: hidden;
    }
    .channel-page .mobile-only-tabs { flex: 0 0 auto; }
    .channel-page #messages, .channel-page.is-typing #messages,
    .channel-page #mobile-panel {
        flex: 1 1 0; min-height: 0; max-height: none; height: auto;
        overflow-y: auto; overscroll-behavior-y: contain;
    }
    .channel-page #messages > * { flex-shrink: 0; }
    .channel-page #chat-form {
        position: relative; inset: auto; flex: 0 0 auto;
        margin: 0; padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 900px) {
    .channel-page.tab-not-chat #btn-vote-manage,
    .channel-page.tab-not-chat #btn-clear-float { display: none !important; }
}

.channel-page #mobile-follow-slot { display:none; }
@media (max-width:900px) {
    .channel-page #channel-follower-count { display:none; }
    .channel-page .is-channel-owner #channel-follower-count { display:block; font-size:11px; line-height:15px; }
    .channel-page .is-channel-owner #mobile-follow-slot { display:none; }
    .channel-page #mobile-follow-slot { display:block; margin-top:1.5px; line-height:1; }
    .channel-page #mobile-follow-slot .channel-follow-button { padding:3px 9px; font-size:11px; line-height:15px; min-height:0; border-radius:12px; }
    .channel-page #mobile-follow-slot:empty { display:none; }
}

@media (max-width:900px) { .channel-page .channel-text-group { gap:2px; } }
/* Channel managers use a role badge in place of the heart-level icon. */
.channel-page .chat-manager-badge{display:inline-block;width:16px;height:16px;object-fit:contain;vertical-align:middle;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.channel-page .nick-title :is(.role-streamer-mark, .chat-manager-badge) {position:relative;top:-2px}

/* Chat nickname moderation popover */
.channel-page #admin-menu {
    box-sizing: border-box;
    width: 244px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 16px;
    background: var(--theme-surface,#202127);
    border: 1px solid var(--theme-border,#3b3c46);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
    text-align: left;
}
.channel-page #admin-menu .member-action-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.channel-page #admin-menu .member-action-heading > div { min-width: 0; }
.channel-page #admin-menu .member-action-caption { display: block; color: var(--theme-muted,#a8a9b5); font-size: 11px; margin-bottom: 5px; }
.channel-page #admin-target-nick { display: block; color: var(--theme-text,#f5f5fa); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.channel-page #admin-menu button { box-sizing: border-box; width: 100%; margin: 0; padding: 10px 6px; border: 1px solid var(--theme-border,#42434e); border-radius: 8px; background: var(--theme-surface,#2c2d35); color: var(--theme-text,#e7e7ee); text-align: center; font-size: 13px; line-height: 1.3; cursor: pointer; transition: background .15s, border-color .15s; }
.channel-page #admin-menu button:hover { background: #3b3c47; border-color: var(--theme-border,#777887); }
.channel-page #admin-menu button:focus-visible { outline: 2px solid #bf9dff; outline-offset: 2px; }
.channel-page #admin-menu .member-action-close { width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--theme-muted,#a8a9b5); font-size: 24px; }
.channel-page #admin-menu .member-action-close:hover { background: var(--theme-surface,#363740); color: var(--theme-text,#fff); }
.channel-page #admin-menu .member-action-label { margin-bottom: 8px; color: var(--theme-muted,#b9bac5); font-size: 12px; }
.channel-page #admin-menu .member-action-durations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.channel-page #admin-menu .member-action-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--theme-border,#383943); }
.channel-page #admin-menu .member-action-ban { color: var(--theme-muted,#ff9eaa); border-color: var(--theme-border,#65404b); background: var(--theme-surface,#392a32); }
.channel-page #admin-menu .member-action-ban:hover { background: #51313c; border-color: #bf6578; }
.channel-page #admin-menu .member-action-unban { color: var(--theme-muted,#99ddbc); border-color: var(--theme-border,#3d5b50); background: var(--theme-surface,#293831); }
.channel-page #admin-menu .member-action-unban:hover { background: #324b3e; border-color: #629b7f; }

/* Keep the collapsed notice circular regardless of font metrics. */
.channel-page #notice-bar.collapsed {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    flex: none;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.channel-page #notice-bar.collapsed #notice-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
}

.channel-page #sidebar-live-link[hidden] { display: none !important; }

/* Center search on the full header, independently of branding and account controls. */
@media (min-width: 901px) {
    .channel-page .lobby-navbar > .channel-search {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100% - 720px));
        margin: 0;
        flex: none;
    }
}

.channel-page #sidebar-directory-more { background: transparent; border: 0; border-top: 1px solid var(--shell-border); color: var(--theme-muted,#999); font-family: inherit; cursor: pointer; width: calc(100% - 16px); padding-top: 5px; font-size: 12px; justify-content: flex-end; text-align: right; }
.channel-page #sidebar-directory-more[hidden] { display: none; }
.channel-page #sidebar-directory-more:focus-visible { outline: 2px solid #999; outline-offset: 3px; }

#adminLayer .server-connection-value { color:var(--theme-text,#fff); font-family:monospace; font-size:13px; overflow-wrap:anywhere; }
#adminLayer #admin-log .server-copy-button { display:block; width:100%; margin:8px 0 0; padding:7px 12px; border:1px solid var(--theme-border,#765183); border-radius:6px; background:var(--theme-surface,#281b30); color:var(--theme-muted,#f1b5e5); font-size:12px; cursor:pointer; }
#adminLayer #admin-log .server-copy-button:hover { background:#3c2548; }

@media (max-width: 900px) {
    .channel-page #chat-form .btn-popup-chat { display: none; }
}

.channel-page .viewer-right-group .channel-video-control {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:32px; height:40px; margin:0; padding:0; border:0; background:transparent;
    color:var(--theme-muted,#ccc); font-size:16px; cursor:pointer;
}
.channel-page .viewer-right-group .channel-video-control:hover { color:var(--theme-text,#fff); transform:none; }
.channel-page .viewer-right-group .channel-video-control.active { color:#4dabf7; }
.channel-page .viewer-right-group .channel-video-control:focus-visible { outline:2px solid #ff85b3; outline-offset:2px; }
.mobile-channel-actions { display:none; }
@media (max-width:900px) {
    .channel-page .channel-summary:not(.summary-layout-ready) { visibility:hidden; }
    .channel-page .channel-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:22px auto; align-content:start; align-items:start; gap:5px 8px; padding:5px 10px; }
    .channel-page #channel-title-display { grid-column:1; grid-row:1 / 3; align-self:start; display:flex; flex-wrap:nowrap; width:100%; min-width:0; gap:9px; padding:0; margin:0; }
    .channel-page .channel-summary .profile-box { width:43.5px; height:43.5px; flex:0 0 43.5px; }
    .channel-page .channel-summary .channel-profile-img { box-sizing:border-box; }
    .channel-page .channel-summary .channel-text-group { flex:1; min-width:0; gap:1.5px; }
    .channel-page .channel-summary .channel-identity { min-width:0; height:22px; gap:5px; }
    .channel-page .channel-summary .channel-identity a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; line-height:22px; }
    .channel-page .channel-summary .channel-identity .role-streamer-mark { width:18px; height:18px; flex:0 0 18px; }
    .channel-page .channel-summary #channel-follower-count { display:block; font-size:14px; line-height:20px; white-space:nowrap; color:#4ade80; }
    .channel-page .channel-summary .viewer-info { grid-column:2; grid-row:1; align-self:start; width:auto; height:22px; min-height:0; padding:0; margin:0; }
    .channel-page .channel-summary .viewer-right-group { gap:4px; height:22px; line-height:22px; margin:0; }
    .channel-page .channel-summary .viewer-count { gap:3px; font-size:12px; white-space:nowrap; }
    .channel-page .channel-summary .viewer-count > i { margin-right:0.25em; }
    .channel-page .channel-summary .viewer-num { font-size:13px; height:auto; line-height:22px; }
    .channel-page .channel-summary .btn-share-icon,
    .channel-page .channel-summary .channel-video-control { display:flex; align-items:center; justify-content:center; width:28px; height:22px; line-height:1; padding:0; margin:0; }
    .channel-page .mobile-channel-actions { grid-column:2; grid-row:2; display:flex; justify-content:flex-end; gap:8px; min-width:0; }
    .channel-page .mobile-channel-actions #mobile-follow-slot { display:block; flex:1; margin:0; min-width:0; }
    .channel-page .mobile-channel-actions #mobile-follow-slot:empty,
    .channel-page .mobile-channel-actions #mobile-follow-slot:has(> button[hidden]) { display:none; }
    .channel-page .mobile-channel-actions #mobile-follow-slot .channel-follow-button { width:100%; min-height:38px; margin:0; padding:8px 12px; font-size:13px; line-height:20px; border-radius:8px; }
    .channel-page .mobile-channel-actions #mobile-contact-btn { display:flex; align-items:center; justify-content:center; flex:1; width:100%; min-width:0; min-height:28px; box-sizing:border-box; padding:4px 10px; margin:0; font-size:11px; line-height:20px; white-space:nowrap; border-radius:8px; }
    .channel-page .mobile-channel-actions #mobile-contact-btn { border:0; color:var(--theme-text,#fff); background:var(--theme-bg,#000); }
    .channel-page .mobile-channel-actions #mobile-contact-btn::before { animation:scroll-join 1.5s infinite linear; }
    .channel-page .mobile-channel-actions #mobile-contact-btn::after { display:block; border-radius:6px; background:var(--theme-bg,#000); }
    .channel-page .mobile-channel-actions #mobile-contact-btn span { color:var(--theme-text,#fff); font-weight:600; }
}

/* Shared follower action on desktop and mobile. */
    .channel-page .channel-summary .channel-text-group #mobile-follow-slot { display:inline-flex; flex:0 0 auto; margin:0; align-items:center; }
    .channel-page .channel-summary .channel-text-group #mobile-follow-slot:empty,
    .channel-page .channel-summary .channel-text-group #mobile-follow-slot:has(> button[hidden]) { display:none; }
    .channel-page .channel-summary #mobile-follow-slot .channel-follow-button {
        display:inline-flex; align-items:center; justify-content:flex-start; gap:5px; width:auto; height:20px; min-height:20px;
        margin:0; padding:0; border:0; border-radius:4px; background:transparent; box-shadow:none; color:var(--theme-muted,#999); font-size:0; line-height:1;
    }
    .channel-page .channel-summary #mobile-follow-slot .channel-follow-button::before { content:"\f004"; order:1; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:18px; }
    .channel-page .channel-summary #mobile-follow-slot .channel-follow-button[aria-pressed="true"] { color:#ff4545; background:transparent; }
    .channel-page .channel-summary #mobile-follow-slot .channel-follow-button[hidden] { display:none; }
    .channel-page .channel-summary #mobile-follow-slot .channel-follow-button:focus-visible { outline:2px solid #ff85b3; outline-offset:2px; }
    .channel-page .channel-summary #mobile-follow-slot #channel-follower-count { color:#4ade80; }

.follow-flying-heart { position:fixed; z-index:20000; width:18px; height:18px; font-size:18px; line-height:18px; color:#ff4545; pointer-events:none; text-shadow:0 0 10px #ff454566; }

/* Mobile typing overlays chat on the full-size video. */
@media (max-width:900px) {
    .channel-page.is-typing .lobby-navbar { visibility:hidden; }

    .channel-page.is-typing .channel-summary { display:none; }
    .channel-page.is-typing #video-wrapper { max-height:none; }
    .channel-page:not(.index-page).is-typing .chat-section {
        position:fixed; top:0; left:0; right:0; bottom:auto;
        width:100%; height:var(--mobile-chat-viewport-height, 100dvh); min-height:0;
        z-index:1001; background:transparent !important;
    }
    .channel-page.is-typing .mobile-only-tabs { margin:0; flex-shrink:0; background:rgba(17,17,17,.9); }
    .channel-page.is-typing #messages { background:linear-gradient(to top,rgba(0,0,0,.3),transparent 60%); }
}

/* Keep live controls in one row at every player width. */
.channel-page #player-overlay {
    display:none; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px;
}
.channel-page #player-overlay[style*="display: block"],
.channel-page #player-overlay[style*="display:block"] { display:flex !important; }
.channel-page #player-overlay .btn-control { flex:0 0 30px; padding:0; }
.channel-page #player-overlay .volume-container { flex:0 1 100px; min-width:24px; }
.channel-page #player-overlay .slider-wrapper { width:100%; min-width:0; }
.channel-page #player-overlay .live-badge { flex-shrink:0; margin-left:auto; margin-right:0; white-space:nowrap; }
.channel-page #player-overlay .quality-group { flex:0 0 auto; align-items:center; flex-wrap:nowrap; }
.channel-page #player-overlay .quality-btn {
    white-space:nowrap; font-size:11px; font-weight:400; line-height:normal;
    padding:4px 8px; min-height:0; height:auto; border-width:1px; border-radius:15px;
}
.channel-page #player-overlay .quality-btn.active { font-weight:600; }
@media(max-width:900px) {
    .channel-page #player-overlay { gap:5px; padding:10px 8px; }
    .channel-page #player-overlay .btn-control { flex-basis:24px; width:24px; font-size:18px; }
    .channel-page #player-overlay .quality-group { gap:3px; }
    .channel-page #player-overlay .volume-container { flex-basis:50px; }
}

/* Let the GIF picker extend above chat over the channel profile. */
.channel-page:not(.index-page).gif-active .chat-section {
    overflow: visible;
    z-index: 30;
}
.channel-page.gif-active #chat-form { z-index: 31; }
@media(max-width:900px) {
    .channel-page #gif-search-input { font-size:16px; }
}


/* original-theme.css */
/* Shared palette and effects from the supplied original station stylesheet. */
:root {
    --main-color: linear-gradient(45deg, #9900F0, #FF85B3, #9900F0);
    --main-hover-color: linear-gradient(45deg, rgb(242,146,255), rgb(173,58,255), rgb(242,146,255));
    --main-border-color: rgb(205,136,255);
    --main-shadow: 0 0 3px 0 rgba(0,0,0,1);
    --shell-border: var(--theme-border,#333);
}
.channel-page, .channel-page .video-section, .index-page .lobby-container { background-color: var(--theme-bg,#000); }
.channel-page .lobby-navbar, .channel-page .channel-sidebar, .channel-page .chat-section { background-color: var(--theme-bg,#111); }
.channel-page .gb-write-box { background: var(--theme-surface,#151515); border-color: var(--theme-border,#333); }
.channel-page .channel-search { background: var(--theme-input,#1e1e1e); border-color: var(--theme-border,#333); border-radius: 20px; }
.channel-page .directory-channel[aria-current], .channel-page .directory-channel:hover { background: var(--theme-surface,#222); }

.channel-page .lobby-logo-icon { background: var(--main-color); background-size: 200% auto; color: #000; }
.channel-page .lobby-brand-title { background: var(--main-color); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: text-roll 5s linear infinite; }
.index-page .hero-banner { background: #111; border: none; box-shadow: none; }
.index-page .streamer-cta-banner { background: #111; border: 1px solid #333; box-shadow: var(--main-shadow); }
.index-page .hero-banner-preview { background-color: #111; }
.index-page .hero-banner-preview::before { background: linear-gradient(to right,#111,transparent 45%); }
.index-page .hero-banner-preview > .fa-tower-broadcast { color: #888 !important; }
.index-page :is(.btn-hero-watch, .btn-cta-apply) { background: var(--main-color); background-size: 100% auto; border: 0; border-radius: 20px; color: #000; box-shadow: var(--main-shadow); font-weight: 600; transition: background-size .3s; }
.index-page .btn-cta-apply:hover { background: var(--main-color); background-size: 200% auto; transform: none; box-shadow: var(--main-shadow); color: #000; }
.index-page .streamer-badge { background: var(--main-color); box-shadow: var(--main-shadow); color: #000; }
.channel-page :is(.gb-btn, .btn-uploadVideo, .btn-green-join) { background: transparent; border: none; border-radius: 20px; box-shadow: var(--main-shadow); }
.channel-page :is(.gb-btn, .btn-uploadVideo, .btn-green-join):hover { background: transparent; transform: none; animation: none; box-shadow: var(--main-shadow); }
.channel-page :is(.gb-btn, .btn-uploadVideo, .btn-green-join)::before { background: linear-gradient(to right,#9900f0,#ff85b3,#9900f0); }
.channel-page :is(.gb-btn, .btn-uploadVideo, .btn-green-join)::after { background: #000; }
.channel-page :is(.gb-btn, .btn-uploadVideo, .btn-green-join):hover::after { background: #151515; }
.channel-page .mainbutton { background: var(--main-color); color: #000; border: 0; box-shadow: var(--main-shadow); }
.channel-page .mainbutton:hover { transform: none; animation: none; background-size: 200% auto; box-shadow: var(--main-shadow); }
@media (prefers-reduced-motion: reduce) { .channel-page .lobby-brand-title { animation: none; } }
.index-page .empty-state { background: var(--theme-surface,#111); border-color: var(--theme-border,#333); box-shadow: var(--main-shadow); }
.channel-page .channel-offline-stage { background: #000; }

/* Fill the hero with the thumbnail and fade the text overlay from left to right. */
.index-page .hero-banner { isolation: isolate; }
.index-page .hero-banner-preview {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-repeat: no-repeat; background-position: center;
}
.index-page .hero-banner-preview::before { content: none; }
.index-page .hero-banner-content {
    position: relative; flex: 0 1 62%; min-width: 0;
    background: linear-gradient(90deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .78) 48%, rgba(10, 10, 12, .32) 80%, transparent 100%);
}
.index-page .hero-title, .index-page .hero-desc, .index-page .hero-nick { text-shadow: 0 2px 8px #000b; overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .index-page .hero-banner-content {
        flex: 1; width: 100%; padding: 24px;
        background: linear-gradient(90deg, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .76) 50%, rgba(10, 10, 12, .15) 100%);
    }
}

/* Login text stays white, including the dialog heading and hover states. */
body.channel-page :is(.btn-text-login, .login-btn),
body.channel-page :is(.btn-text-login, .login-btn) *,
body.channel-page #loginModal h3 {
    color: var(--theme-text,#fff) !important;
    -webkit-text-fill-color: var(--theme-text,#fff);
}
body.channel-page #loginModal h3 { background: none; animation: none; }

/* Match navigation and home accents to the animated replay-tab gradient. */
.channel-page {
    --accent-text-gradient: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
}
.channel-page .sidebar-footer > :is(i, span),
.channel-page .section-title > i,
.channel-page .section-title .section-count,
.channel-page .empty-state > i,
.channel-page .streamer-cta-text h3 > i,
.channel-page .mobile-home-nav a:first-child > :is(i, span) {
    background: var(--accent-text-gradient);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    animation: text-roll 5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
        .channel-page .sidebar-footer > :is(i, span),
.channel-page .section-title > i,
.channel-page .section-title .section-count,
.channel-page .empty-state > i,
.channel-page .streamer-cta-text h3 > i,
.channel-page .mobile-home-nav a:first-child > :is(i, span) { animation: none; }
}

/* Navigation labels stay white; only icons change on hover or selection. */
.channel-page .sidebar-menu-link { color: var(--theme-text,#fff); background: transparent; }
.channel-page .sidebar-menu-link > :is(i, span) { color: var(--theme-text,#fff); }
.channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) { background: transparent; }
.channel-page .sidebar-menu-link > i { display: flex; align-items: center; justify-content: center; }
/* Paint the full glyph instead of clipping wide icons to the shared icon slot. */
.channel-page .sidebar-menu-link > i::before { display: inline-block; flex-shrink: 0; line-height: 1.3; }
.channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) > i::before {
    background: var(--accent-text-gradient);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: text-roll 5s linear infinite;
}
.channel-page .sidebar-menu-link > .sidebar-live-icon {
    background: #fff;
    -webkit-mask: url('/img/sidebar-live.svg') center / contain no-repeat;
    mask: url('/img/sidebar-live.svg') center / contain no-repeat;
}
.channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) > .sidebar-live-icon {
    background: var(--accent-text-gradient);
    background-size: 200% auto;
    animation: text-roll 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) > i::before,
    .channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) > span { animation: none; }
}

/* A gentle light sweep repeats without pointer interaction. */
.index-page .btn-hero-watch { position:relative; overflow:hidden; isolation:isolate; transition:none; }
.index-page .btn-hero-watch::after {
    content:""; position:absolute; top:-25%; left:-60%; width:45%; height:150%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:translateX(0) skewX(-20deg); pointer-events:none;
    animation:hero-watch-shine 3.6s ease-in-out infinite;
}
@keyframes hero-watch-shine {
    0%, 15% { transform:translateX(0) skewX(-20deg); }
    50%, 100% { transform:translateX(400%) skewX(-20deg); }
}
@media(prefers-reduced-motion:reduce) { .index-page .btn-hero-watch::after { animation:none; display:none; } }


/* auth-dialogs.css */
/* Shared login/signup shell; station-style tabs and existing brand palette. */
:is(#loginModal, #joinModal) { background:rgba(0,0,0,.8); backdrop-filter:blur(5px); overflow-y:auto; box-sizing:border-box; }
:is(#loginModal, #joinModal) .auth-content { box-sizing:border-box; width:440px !important; max-width:calc(100vw - 32px); padding:24px 24px 28px; margin:0 auto; background:var(--theme-surface,#18151c); border:1px solid var(--theme-border,#352d3b); border-radius:8px; box-shadow:0 16px 60px #0008; color:var(--theme-text,#fff); animation:none; text-align:left; }
:is(#loginModal, #joinModal) .auth-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; min-height:44px; }
:is(#loginModal, #joinModal) .auth-logo { display:block; width:180px; height:60px; object-fit:contain; margin:-8px 0 -8px -24px; }
:is(#loginModal, #joinModal) .auth-logo.auth-brand { display:flex; align-items:center; gap:10px; width:auto; max-width:calc(100% - 50px); min-width:0; margin-left:0; }
:is(#loginModal, #joinModal) .auth-brand img { flex-shrink:0; }
:is(#loginModal, #joinModal) .auth-brand .lobby-brand-title { flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#loginModal, #joinModal) .auth-content button { box-sizing:border-box; font-family:inherit; cursor:pointer; box-shadow:none; transition:color .2s,background .2s; }
:is(#loginModal, #joinModal) .auth-content .auth-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0 -10px 0 0; background:transparent; color:var(--theme-text,#eee); border:0; border-radius:4px; font-size:20px; }
:is(#loginModal, #joinModal) .auth-tabs { display:flex; gap:0; border-bottom:1px solid var(--theme-border,#44394b); margin:0 0 30px; }
:is(#loginModal, #joinModal) .auth-content .auth-tab { display:block; position:relative; width:auto; height:auto; padding:0 15px 10px; margin:0; border:0; border-radius:0; background:none; color:var(--theme-muted,#999); font-size:18px; line-height:26px; font-weight:600; overflow:hidden; }
:is(#loginModal, #joinModal) .auth-content .auth-tab.active { color:transparent; background:linear-gradient(to right,#9900f0,#ff85b3,#9900f0); background-size:200% auto; background-clip:text; -webkit-background-clip:text; animation:text-roll 5s infinite linear; }
:is(#loginModal, #joinModal) .auth-tab.active::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; background:linear-gradient(to right,#9900f0,#ff85b3,#9900f0); background-size:200% auto; animation:text-roll 2s infinite linear; }
:is(#loginModal, #joinModal) .auth-content .auth-tab:hover { color:var(--theme-muted,#ff85b3); }
:is(#loginModal, #joinModal) .auth-field { margin:0 0 20px; }
:is(#loginModal, #joinModal) .auth-field label { display:block; margin:0 0 6px; color:var(--theme-text,#f1edf4); font-size:14px; font-weight:700; line-height:20px; }
:is(#loginModal, #joinModal) .auth-content input { display:block; box-sizing:border-box; width:100%; min-width:0; height:40px; margin:0; padding:9px 12px; border:1px solid var(--theme-border,#665d6b); border-radius:4px; background:var(--theme-input,#0c0a0e); box-shadow:none; color:var(--theme-text,#fff); font-family:inherit; font-size:14px; line-height:20px; outline:none; }
:is(#loginModal, #joinModal) .auth-content input::placeholder { color:var(--theme-muted,#9c94a3); opacity:1; }
:is(#loginModal, #joinModal) .auth-content input:focus { border-color:#ff85b3; box-shadow:0 0 0 1px #ff85b344; }
:is(#loginModal, #joinModal) .auth-content .auth-submit { display:block; width:100%; height:44px; margin:28px 0 0; padding:10px 14px; border:0; border-radius:4px; background:linear-gradient(45deg,#9900f0,#ff85b3,#9900f0); background-size:200% auto; color:#100a15; font-size:16px; font-weight:700; line-height:24px; }
:is(#loginModal, #joinModal) .auth-content .auth-submit,
:is(#loginModal, #joinModal) .auth-content .auth-submit:hover {
    position:relative; overflow:hidden; isolation:isolate; transform:none;
    background-position:left center; background-size:200% auto; transition:none; box-shadow:none;
}
:is(#loginModal, #joinModal) .auth-submit::after {
    content:""; position:absolute; top:-25%; left:-60%; width:45%; height:150%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:translateX(0) skewX(-20deg); pointer-events:none;
}
:is(#loginModal, #joinModal) .auth-submit:is(:hover, :focus-visible)::after {
    animation:auth-button-shine .8s ease-out both;
}
@keyframes auth-button-shine {
    from { transform:translateX(0) skewX(-20deg); }
    to { transform:translateX(400%) skewX(-20deg); }
}
@media(prefers-reduced-motion:reduce) {
    :is(#loginModal, #joinModal) .auth-submit::after { display:none; }
}
#joinModal .auth-email-row { display:flex; align-items:center; gap:8px; width:100%; margin:0; }
#joinModal .auth-email-row #j_email { flex:1; width:0; margin:0; }
#joinModal .auth-content #sendEmailCode { display:block; flex:0 0 88px; width:88px; height:40px; padding:0 8px; margin:0; border:1px solid #a964c5; border-radius:4px; background:var(--theme-surface,#2a1934); color:var(--theme-muted,#f4c7ff); font-size:13px; font-weight:600; }
#joinModal #signup-email-fields[hidden] { display:none !important; }
#loginModal .auth-remember { display:flex; align-items:center; gap:8px; width:fit-content; margin:0; color:var(--theme-muted,#c9bdce); font-size:14px; line-height:20px; cursor:pointer; }
#loginModal .auth-content #remember-login-id { appearance:auto; display:block; flex:0 0 16px; width:16px; height:16px; margin:0; padding:0; accent-color:#ca46dd; box-shadow:none; cursor:pointer; }
#loginModal .auth-content #remember-login-id:focus-visible { outline:2px solid #ff85b3; outline-offset:3px; }
:is(#loginModal, #joinModal) .auth-content button:focus-visible { outline:2px solid #ff85b3; outline-offset:3px; }
@media(max-width:480px) { :is(#loginModal, #joinModal) .auth-content { padding:22px 20px 24px; } :is(#loginModal, #joinModal) .auth-content input { font-size:16px; } #joinModal #j_pw::placeholder { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { :is(#loginModal, #joinModal) .auth-content .auth-tab.active, :is(#loginModal, #joinModal) .auth-tab.active::after { animation:none; } }

#joinModal .auth-content .doJoin, #joinModal .auth-content .doJoin:hover { transform:none; }


/* dialog-layout.css */
/* All page dialogs share one viewport-based alignment, independent of content height. */
body.channel-page :is(.modal, .studio-modal) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: 16px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Existing open/close handlers use inline display:block. Keep hidden dialogs hidden. */
body.channel-page :is(.modal, .studio-modal):is([style*="display: block"], [style*="display:block"]) {
    display: flex !important;
}
body.channel-page :is(.modal, .studio-modal, #loginModal, #joinModal, #modal-badwords) > :is(.modal-content, .auth-content, .studio-modal-box) {
    box-sizing: border-box;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: 100% !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0 !important;
    top: auto;
    bottom: auto;
    transform: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: none;
}
body.channel-page .studio-modal-box > .studio-modal-body { min-height: 0; }


/* mobile-home.css */
/* Mobile home layout. */
.index-page #mobile-slide-menu, .index-page #menu-overlay { display:none; }
@media(max-width:900px) {
 .index-page #mobile-slide-menu { display:block; position:fixed; top:0; right:0; width:260px; height:100dvh; padding:5px 20px 20px; box-sizing:border-box; background:rgba(20,20,20,.7); border-left:1px solid var(--theme-border,#444); z-index:10000; box-shadow:-5px 0 20px rgba(0,0,0,.8); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); backdrop-filter:blur(10px); }
 .index-page #mobile-slide-menu.active { transform:translateX(0); }
 .index-page #menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; backdrop-filter:blur(2px); }
 .index-page.menu-active-bg #menu-overlay { display:block; }
 .index-page.menu-active-bg #lobby-main { overflow:hidden; }
 .index-page .mobile-menu-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--theme-border,#444); color:var(--theme-text,#fff); }
 .index-page .close-menu-btn { background:none; border:0; color:var(--theme-text,#fff); cursor:pointer; }
 .index-page .mobile-auth-group { display:flex; flex-direction:column; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--theme-border,#333); }
 .index-page .mobile-auth-group button { width:100%; cursor:pointer; }
 .index-page #mobile-slide-menu .btn-text-login { border:1px solid var(--theme-border,#666)!important; background:rgba(255,255,255,.05)!important; color:var(--theme-text,#fff); }
 .index-page .mobile-user-info { text-align:center; color:var(--theme-text,#fff); }
 .index-page .profile-area { padding:15px; border-radius:10px; margin-bottom:20px; font-size:18px; font-weight:600; border:1px solid var(--theme-border,#333); text-align:left; background:rgba(0,0,0,.3); box-shadow:inset var(--main-shadow); overflow-wrap:anywhere; }
 .index-page .mobile-menu-btn { display:block; box-sizing:border-box; width:100%; padding:12px; background:transparent; color:var(--theme-muted,#ccc); border:0; border-bottom:1px solid var(--theme-border,#333); text-align:left; font-size:15px; cursor:pointer; text-decoration:none; }
 .index-page .mobile-menu-btn:hover { background:rgba(255,255,255,.05); color:var(--theme-text,#fff); }
 .index-page .mobile-menu-btn i { width:25px; text-align:center; margin-right:5px; }
}
@media(prefers-reduced-motion:reduce) { .index-page #mobile-slide-menu { transition:none; } }
.mobile-home-nav{display:none}
@media(max-width:900px){
 body.index-page #lobby-main{padding:16px 14px 32px;scroll-padding-top:16px;-webkit-overflow-scrolling:touch}
 .index-page .mobile-home-nav{display:flex;gap:8px;margin:0 0 18px}
 .index-page .mobile-home-nav a{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:42px;border:1px solid var(--theme-border,#36303c);border-radius:10px;background:var(--theme-surface,#161319);color:var(--theme-text,#eee);text-decoration:none;font-size:13px;font-weight:600}
 .index-page .mobile-home-nav a:first-child{color:var(--theme-muted,#f4a5db);border-color:var(--theme-border,#74466c);background:var(--theme-surface,#281c2a)}
 .index-page .hero-banner{display:flex;flex-direction:column;min-height:0;margin:0 0 28px;border:none;border-radius:16px;background:#151217;box-shadow:none}
 .index-page .hero-banner-preview{position:relative;inset:auto;order:-1;flex:none;width:100%;aspect-ratio:16/9;min-height:0;max-height:290px;background-size:cover;background-position:center;border-bottom:0}
 .index-page .hero-banner-preview::before{background:linear-gradient(0deg,#15121788,transparent 45%)}
 .index-page .hero-banner-content{background:#151217;padding:18px;gap:12px;min-width:0;flex:none}
 .index-page .hero-live-pill{align-self:flex-start;width:fit-content;font-size:11px;padding:5px 9px;}
 .index-page .hero-title{font-size:22px;line-height:1.45;letter-spacing:-.5px;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
 .index-page .hero-desc{font-size:14px;line-height:1.7;color:#c2b9c8;max-width:none;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .index-page .hero-streamer-info{margin:2px 0;gap:10px}
 .index-page .hero-avatar{width:40px;height:40px;box-shadow:none}
 .index-page .hero-nick{font-size:14px;line-height:1.5;}
 .index-page .btn-hero-watch{width:100%;min-height:46px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:10px 30px;font-size:14px;line-height:1.5;border-radius:10px;margin:0;box-shadow:none}
 .index-page #live-section{margin-bottom:28px!important}
 .index-page .section-header{margin:0 0 12px;padding:0;gap:8px}
 .index-page .section-title{font-size:17px;line-height:1.5;gap:7px;flex-wrap:wrap;margin:0;letter-spacing:-.4px}
 .index-page .section-count{font-size:13px;color:var(--theme-muted,#b6a8c0)}
 .index-page .streamer-grid{grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 28px}
 .index-page .streamer-card{min-width:0;border-radius:12px;border:1px solid transparent;background:transparent;box-shadow:none}
 .index-page .streamer-card:hover{transform:none;box-shadow:none}
 .index-page .card-content{gap:10px;min-width:0}
 .index-page .card-avatar{width:38px;height:38px;border-width:1px;box-shadow:none}
 .index-page .card-info{min-width:0}
 .index-page .card-title{font-size:15px;line-height:1.55;white-space:nowrap;display:block;overflow:hidden;margin:0 0 6px}
 .index-page .card-streamer-row{flex-wrap:wrap;gap:5px;line-height:1.5}
 .index-page .card-nick{font-size:13px;color:var(--theme-text,#d9cddd)}
 .index-page .card-desc{font-size:13px;line-height:1.6;color:var(--theme-muted,#b9acbf);overflow-wrap:anywhere;margin:5px 0 0}
 .index-page .card-live-badge,.index-page .card-offline-badge{font-size:10px;padding:3px 6px;top:7px;left:7px}
 .index-page #all-streamers-section .streamer-card{flex-direction:row;align-items:center;padding:12px;gap:12px}
 .index-page #all-streamers-section .card-thumb-wrap{flex:0 0 96px;width:96px;aspect-ratio:4/3;border-radius:8px}
 .index-page #all-streamers-section .card-content{flex:1}
 .index-page #all-streamers-section .card-avatar{display:none}
 .index-page #all-streamers-section .card-title{font-size:14px}
 .index-page #all-streamers-section .card-desc{display:none}
 .index-page .empty-state{grid-column:1/-1;padding:22px 14px;border:1px dashed var(--theme-border,#3b3340);border-radius:12px;background:var(--theme-surface,#121015);text-align:center}
 .index-page .empty-state>i{font-size:24px;margin-bottom:12px;color:var(--theme-muted,#a38bad)}
 .index-page .empty-state p{font-size:13px;line-height:1.7;color:var(--theme-muted,#beb2c6);word-break:keep-all}
 .index-page .streamer-cta-banner{margin:0;padding:20px 18px;display:flex;flex-direction:column;align-items:stretch;gap:16px;text-align:left;border:1px solid #443047;border-radius:12px;background:#1d1521;box-shadow:none}
 .index-page .streamer-cta-text h3{font-size:16px;line-height:1.6;justify-content:flex-start;word-break:keep-all;margin:0 0 8px}
 .index-page .streamer-cta-text p{font-size:13px;line-height:1.7;color:#c2b5cb;margin:0;word-break:keep-all}
 .index-page .btn-cta-apply{width:100%;min-height:44px;font-size:14px;border-radius:9px;padding:10px 28px;white-space:normal}
 .index-page #lobby-main a:focus-visible,.index-page #lobby-main button:focus-visible{outline:2px solid #e8a3ef;outline-offset:3px}
}
@media(min-width:600px) and (max-width:900px){.index-page #live-section .streamer-grid,.index-page #all-streamers-section .streamer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.index-page .hero-banner{flex-direction:row}.index-page .hero-banner-preview{width:45%;aspect-ratio:auto;max-height:none;border-bottom:0}.index-page .hero-banner-content{flex:1}}
@media(max-width:360px){.index-page #all-streamers-section .card-thumb-wrap{flex-basis:80px;width:80px}.index-page .hero-title{font-size:20px}.index-page .hero-banner-content{padding:15px}}
/* Mobile featured banner: readable description on the left, channel actions on the right. */
@media(max-width:900px){
 .index-page .hero-banner:has(.hero-streamer-info){display:block;min-height:0;aspect-ratio:auto;border-radius:12px}
 .index-page .hero-banner:has(.hero-streamer-info) .hero-banner-preview{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;z-index:0;background-size:cover;background-position:center}
 .index-page .hero-banner-preview::before{content:none}
 .index-page .hero-banner:has(.hero-streamer-info) .hero-banner-content{position:relative;inset:auto;box-sizing:border-box;width:100%;height:auto;min-height:174px;padding:16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:16px;row-gap:8px;align-content:center;background:linear-gradient(90deg,#0a0a0ce8,#0a0a0c9c 65%,#0a0a0c88)}
 .index-page .hero-live-pill{grid-column:1;grid-row:1;justify-self:start;font-size:15px;line-height:1.4;padding:6px 10.5px;margin:0;border-radius:30px}
 .index-page .hero-title{grid-column:1;grid-row:2;font-size:clamp(17px,4.6vw,25px);line-height:1.35;margin:0;letter-spacing:-.4px;-webkit-line-clamp:2}
 .index-page .hero-desc{grid-column:1;grid-row:3;font-size:clamp(12px,2.8vw,14px);line-height:1.6;margin:0;-webkit-line-clamp:2;color:#ded4e2}
 .index-page .hero-streamer-info{grid-column:2;grid-row:1/3;align-self:center;margin:0;gap:8px;min-width:0}
 .index-page .hero-streamer-info>div{min-width:0}
 .index-page .hero-avatar{width:44px;height:44px;flex:0 0 44px;border-width:1px}
 .index-page .hero-nick{font-size:clamp(16px,3.8vw,20px);line-height:1.2;gap:calc(4px / 3);white-space:normal;overflow-wrap:anywhere}
 .index-page .hero-nick .role-streamer-mark{width:14px;height:14px;flex-shrink:0}
 .index-page .hero-streamer-info>div>span{font-size:12px;line-height:1.2;display:block}
 .index-page .hero-banner:has(.hero-streamer-info) .btn-hero-watch{grid-column:2;grid-row:3;align-self:center;width:100%;min-height:40px;height:auto;font-size:clamp(16.5px,4.2vw,21px);line-height:1.4;padding:10px 6px;gap:4px;border-radius:20px;margin:0;white-space:normal;overflow-wrap:anywhere;text-align:center}
}
@media(max-width:360px){
 .index-page .hero-banner:has(.hero-streamer-info) .hero-banner-content{padding:12px;column-gap:10px}
 .index-page .hero-streamer-info{gap:5px}
 .index-page .hero-avatar{width:36px;height:36px;flex-basis:36px}
}

/* Two desktop-style cards per row in the mobile recommendation/directory lists. */
@media (max-width:900px) {
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .streamer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .streamer-card { display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; border-radius:9px; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-thumb-wrap { flex:none; width:100%; aspect-ratio:16/9; border-radius:0; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-content { display:flex; gap:6px; flex:1; align-items:flex-start; }
 
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-title { font-size:13px; line-height:1.4; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-streamer-row { gap:2px; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-nick { font-size:11px; overflow-wrap:anywhere; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .role-streamer-mark { width:14px; height:14px; flex:0 0 14px; }
 .index-page #all-streamers-section .card-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:11px; line-height:1.4; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) :is(.card-live-badge, .card-offline-badge) { font-size:8px; padding:2px 4px; top:4px; left:4px; }
}

/* Mobile cards retain a single-line title and compact channel metadata. */
@media (max-width:900px) {
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-avatar {
    display:block; width:38px; height:38px; flex:0 0 38px; object-fit:cover;
 }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-info { flex:1; min-width:0; }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-title {
    line-height:18px; margin:0 0 4px;
 }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) .card-streamer-row {
    display:flex; flex-wrap:nowrap; align-items:center; height:16px; line-height:16px; min-width:0; overflow:hidden;
 }
 .index-page :is(#recommended-vods-section, #recommended-videos-section, #all-streamers-section, #live-section) :is(.card-nick, .card-desc, .card-followers) {
    display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset;
 }
 .index-page .card-meta { font-size:10px; gap:3px; }
 .index-page #all-streamers-section .card-followers { display:none; }
}

.index-page .live-audience-badge { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
.index-page .live-audience-dot { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#ff3838; box-shadow:0 0 5px #ff383880; }
@media(max-width:900px) {
 .index-page #live-section .live-audience-badge { max-width:calc(100% - 8px); font-size:8px; padding:2px 3px; gap:2px; }
}

/* Hidden recommendations must not occupy a third row, including flex mobile cards. */
.index-page :is(#recommended-vods-section, #recommended-videos-section) .streamer-card[hidden] { display: none !important; }


/* media-views.css */
/* Shared eye/count badge for replay and uploaded-video cards. */
.media-view-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    text-shadow: 0 1px 4px #000;
}
.card-thumb-wrap > .media-view-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 5px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .65);
}


/* account-menu.css */
.account-control { position:relative; }
.account-shortcut { display:none; }
.account-identity { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.account-identity > :first-child { margin-right:-5px; }
.account-identity > span { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--theme-text,#eee); }
.account-avatar-button { position:relative; overflow:visible; display:flex; width:38px; height:38px; padding:0; border:1px solid var(--theme-border,#71547c); border-radius:50%; background:var(--theme-surface,#201827); cursor:pointer; }
.profile-role-badge { position:absolute; z-index:2; bottom:-7px; left:50%; transform:translateX(-50%); padding:2px 6px; border:1px solid #c99cdb; border-radius:4px; background:linear-gradient(110deg,#743b96,#ae62c1); color:#fff; font-size:10px; line-height:1.2; font-weight:800; white-space:nowrap; box-shadow:0 2px 6px #0004; pointer-events:none; }
.profile-role-admin { background:linear-gradient(110deg,#945a13,#bc7b20); border-color:#ffd58a; }
.profile-role-regular { background:linear-gradient(110deg,#315b70,#477e91); border-color:#94c5d5; }
.account-avatar-button .profile-role-badge { bottom:-6px; padding:2px 4px; font-size:8px; }
.account-avatar-button img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
body .account-avatar-button::after {
    content:var(--account-menu-hint, '메뉴 열기'); position:absolute; top:calc(100% + 17px); right:-10px;
    opacity:0; visibility:hidden; transform:scale(.05);
    transform-origin:calc(100% - 29px) -36px;
    transition:transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
    padding:10px 14px; border:1px solid #b975d1; border-radius:10px;
    background:var(--theme-surface,#38213f); color:var(--theme-text,#fff); font-size:16px; font-weight:600; line-height:1.4;
    white-space:pre-line; width:max-content; max-width:min(340px,calc(100vw - 32px)); box-shadow:0 4px 12px #0004; pointer-events:none; z-index:11001;
}
body .account-avatar-button::before {
    content:''; position:absolute; top:calc(100% + 12px); right:16px; width:10px; height:10px;
    background:var(--theme-surface,#38213f); border-top:1px solid #b975d1; border-left:1px solid #b975d1;
    opacity:0; visibility:hidden; transform:translateY(-35px) scale(.05) rotate(45deg); transform-origin:50% 50%;
    transition:transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
    pointer-events:none; z-index:11002;
}
body:not(.account-menu-hint-closing).account-menu-hint-active .account-avatar-button::after,
body:not(.account-menu-hint-closing) .account-avatar-button:hover::after {
    opacity:1; visibility:visible; transform:scale(1);
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out, visibility 0s;
}
body:not(.account-menu-hint-closing).account-menu-hint-active .account-avatar-button::before,
body:not(.account-menu-hint-closing) .account-avatar-button:hover::before {
    opacity:1; visibility:visible; transform:translateY(0) scale(1) rotate(45deg);
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out, visibility 0s;
}
body.account-menu-hint-active .account-avatar-button img { animation:account-menu-nudge 1s ease-in-out 3; }
@keyframes account-menu-nudge {
    0%, 45%, 75%, 100% { transform:translateY(0); }
    25% { transform:translateY(-3px); }
    60% { transform:translateY(-1px); }
}
@media(prefers-reduced-motion:reduce) {
    body .account-avatar-button::after, body .account-avatar-button::before { transition:none !important; }

    body.account-menu-hint-active .account-avatar-button img { animation:none; }
}
.account-popover[hidden] { display:none !important; }
.account-popover { position:absolute; top:calc(100% + 14px); right:0; width:340px; max-height:calc(100dvh - 85px); overflow-y:auto; box-sizing:border-box; padding:16px; border:1px solid var(--theme-border,#44374b); border-radius:10px; background:var(--theme-surface,rgba(33,27,38,.9)); color:var(--theme-text,#eee); box-shadow:0 16px 48px #0009; z-index:11000; }
.account-profile { padding:18px 16px 12px; border-radius:8px; background:var(--theme-profile,linear-gradient(155deg,#361c40,#151219 65%)); text-align:center; }
.account-progress-heading { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--theme-muted,#dcaddd); margin-bottom:10px; }
.account-progress { height:8px; overflow:hidden; background:#423148; border-radius:10px; }
.account-progress > span { display:block; height:100%; background:linear-gradient(90deg,#9900f0,#ff85b3); border-radius:inherit; }
.account-progress-detail { margin:9px 0 20px; font-size:12px; color:var(--theme-muted,#bdb0c4); }
.account-profile-photo { display:block; position:relative; width:76px; height:76px; margin:12px auto; }
.account-profile-photo > img { width:100%; height:100%; border:3px solid #9e46b4; border-radius:50%; object-fit:cover; box-sizing:border-box; }
.account-photo-picker, .account-photo-picker * { cursor:pointer; }
.account-photo-picker input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.account-photo-picker:focus-within { border-radius:50%; outline:2px solid #ff85b3; outline-offset:3px; }
.account-profile-name { display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 0; font-size:18px; overflow-wrap:anywhere; }
[data-account-status] { font-size:12px; color:var(--theme-muted,#e5aedf); margin:10px 0 0; }
[data-account-status]:empty { display:none; }
.account-actions { display:grid; gap:3px; padding-top:12px; }
.channel-page .account-actions button { display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:12px; border:0; border-radius:6px; background:transparent; color:var(--theme-text,#fff); font-family:inherit; font-size:14px; text-align:left; cursor:pointer; }
.account-actions button i { width:20px; text-align:center; color:var(--theme-text,#fff); }
.channel-page .account-actions button:hover { background:var(--theme-surface,#39283f); }
.account-avatar-button:focus-visible, .account-actions button:focus-visible { outline:2px solid #ff85b3; outline-offset:2px; }
.account-password-only #streamer-apply-section { display:none; }
@media(min-width:901px) {
 .account-identity .account-shortcut { display:inline-flex; align-items:center; flex-shrink:0; padding:6px 9px; border:none; border-radius:6px; background:#3aff83; color:#000; font-size:12px; font-weight:600; line-height:18px; text-decoration:none; white-space:nowrap; }
 .account-identity .account-shortcut-admin { background:#672c40; border:1px solid #be5579; color:var(--theme-text,#ffe2eb); }
 .account-identity .account-shortcut:hover { filter:brightness(1.2); }
 .account-identity .account-shortcut:focus-visible { outline:2px solid #ff85b3; outline-offset:3px; }
 .account-identity .account-avatar-button { flex:0 0 38px; }
 .account-identity > span { font-size:20px; }
 .account-identity > img { width:20px; height:20px; flex:0 0 20px; }
 .channel-page #lobby-auth-area > .account-control { width:100%; }
 .channel-page .lobby-navbar { overflow:visible; }
}

@media(max-width:900px) {
 .channel-page #mobile-slide-menu { width:340px; max-width:calc(100vw - 16px); padding:8px 14px 20px; background:var(--theme-surface,rgba(33,27,38,.96)); }
 .channel-page #mobile-slide-menu .mobile-menu-header { margin-bottom:14px; }
 .channel-page #mobile-account-panel { position:static; width:100%; max-height:none; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
 .channel-page #mobile-account-panel .account-profile { padding:18px 14px 16px; }
 .channel-page #mobile-account-panel .account-profile-photo { width:80px; height:80px; }
 .channel-page #mobile-account-panel .account-actions button { min-height:44px; font-size:14px; }
 .channel-page #mobile-account-panel .account-profile-name { font-size:18px; }
}


/* popup-theme.css */
/* Shared visual language for user and streamer dialogs. Layout and handlers stay local. */
body.channel-page :is(.modal, .studio-modal) {
    background:rgba(0,0,0,.8); backdrop-filter:blur(5px);
}
body.channel-page :is(.modal-content, .studio-modal-box) {
    background:var(--theme-surface,#18151c) !important; color:var(--theme-text,#fff); border:1px solid var(--theme-border,#352d3b) !important;
    border-radius:8px !important; box-shadow:0 16px 60px #0008 !important;
    padding:24px; text-align:left;
}
body.channel-page .modal-content > h3,
body.channel-page .modal-content form > h3 {
    margin:0 0 22px; padding:0 0 14px; border-bottom:1px solid var(--theme-border,#44394b);
    background:none; color:var(--theme-text,#f1edf4); font-size:20px; line-height:28px;
    font-weight:700; text-align:left; animation:none; -webkit-text-fill-color:currentColor;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), textarea, select) {
    box-sizing:border-box; min-width:0; min-height:40px; padding:9px 12px;
    background:var(--theme-bg,#0c0a0e) !important; color:var(--theme-text,#fff); border:1px solid var(--theme-border,#665d6b) !important;
    border-radius:4px !important; box-shadow:none; font-family:inherit; font-size:14px;
    line-height:20px; outline:none;
}
body.channel-page .modal-content > :is(input:not([type=file]), textarea),
body.channel-page .station-settings .textarea_word { width:100% !important; max-width:100%; }
body.channel-page :is(.modal-content, .studio-modal-box) :is(input, textarea)::placeholder { color:var(--theme-muted,#9c94a3); opacity:1; }
body.channel-page :is(.modal-content, .studio-modal-box) :is(input, textarea, select):focus {
    border-color:#ff85b3 !important; box-shadow:0 0 0 1px #ff85b344;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(button:where(:not(.station-members-page-button)), .custom-file-upload) {
    border-radius:4px !important; font-family:inherit; font-weight:600;
    box-shadow:none !important; text-shadow:none; transition:background .2s,color .2s;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(button, .custom-file-upload):hover { transform:none; }
body.channel-page :is(.modal-content, .studio-modal-box) :is(button, input, textarea, select, .custom-file-upload):focus-visible {
    outline:2px solid #ff85b3; outline-offset:3px;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(.mainbutton, .BadWord, .studio-btn-primary, #media-edit-save, #btn-open-streamer-apply) {
    position:relative; overflow:hidden; isolation:isolate; min-height:44px;
    background:linear-gradient(45deg,#9900f0,#ff85b3,#9900f0) !important;
    background-size:200% auto !important; border:0; color:#100a15 !important;
    font-size:15px; font-weight:700; animation:none;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(.mainbutton, .BadWord, .studio-btn-primary, #media-edit-save)::after {
    content:""; position:absolute; top:-25%; left:-60%; width:45%; height:150%;
    background:linear-gradient(100deg,transparent,#ffffff8c,transparent);
    transform:translateX(0) skewX(-20deg); pointer-events:none;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(.mainbutton, .BadWord, .studio-btn-primary, #media-edit-save):is(:hover, :focus-visible)::after {
    animation:auth-button-shine .8s ease-out both;
}
body.channel-page :is(.modal-content, .studio-modal-box) :is(.close-btn, .studio-btn-secondary, #media-edit-cancel, .server-copy-button, .custom-file-upload) {
    background:var(--theme-surface,#2a1934); color:var(--theme-muted,#f4c7ff); border:1px solid var(--theme-border,#765183);
}
body.channel-page .modal-content > :is(.mainbutton, .close-btn) { width:100%; min-height:40px; }
body.channel-page .station-settings .file-upload-group {
    width:100%; background:var(--theme-bg,#0c0a0e); border:1px solid var(--theme-border,#665d6b); border-radius:4px; box-shadow:none; padding:8px;
}
body.channel-page :is(.studio-modal-header, .station-members-heading) { background:transparent; border-bottom:1px solid var(--theme-border,#44394b); }
body.channel-page .studio-modal-title { color:var(--theme-text,#f1edf4); }
body.channel-page .studio-tab-nav { background:transparent; border-bottom:1px solid var(--theme-border,#44394b); }
body.channel-page .studio-tab-btn { background:transparent; border:0; border-bottom:3px solid transparent; color:var(--theme-muted,#999); border-radius:0; }
body.channel-page .studio-tab-btn.active { color:var(--theme-muted,#ff85b3); background:transparent; border-bottom-color:#d548d9; }
body.channel-page .stat-btn.active { background:var(--theme-surface,#2a1934); color:var(--theme-muted,#ff85b3); border-color:#a964c5; }
body.channel-page :is(#admin-log, #studio-server-log, #streamer-apply-section, .station-members-table-wrap) {
    background:var(--theme-bg,#0c0a0e) !important; border:1px solid var(--theme-border,#352d3b) !important; border-radius:4px !important; box-shadow:none !important;
}
body.channel-page :is(.share-popup, #admin-menu, .gif-popover, .streamer-studio-popover) {
    background:var(--theme-surface,#18151c); color:var(--theme-text,#f1edf4); border:1px solid var(--theme-border,#352d3b); border-radius:8px; box-shadow:0 12px 36px #0008;
}
body.channel-page #admin-menu button { border-radius:4px; }
body.channel-page .account-popover { background:rgba(24,21,28,.9); border-color:var(--theme-border,#352d3b); border-radius:8px; }
@media(max-width:480px) {
    body.channel-page :is(.modal-content, .studio-modal-box) { padding:20px; }
    body.channel-page :is(.modal-content, .studio-modal-box) :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
    body.channel-page :is(.modal-content, .studio-modal-box) :is(.mainbutton, .BadWord, .studio-btn-primary, #media-edit-save)::after { display:none; }
}

/* Stacked actions use the same dimensions, including server and channel settings. */
body.channel-page .modal-content > :is(.mainbutton, .BadWord, #mainControlBtn, .close-btn) {
    box-sizing:border-box; width:100%; height:44px !important; min-height:44px;
    padding:10px 14px !important; margin-left:0; margin-right:0;
    line-height:22px; font-size:15px; font-weight:700;
}
body.channel-page :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn),
body.channel-page :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn):hover {
    background:transparent; box-shadow:none;
}

/* Match the specificity of themed secondary actions, including their hover rules. */
body.channel-page :is(.modal, .studio-modal, #admin-menu, #mobile-slide-menu) :is(.modal-content, .studio-modal-box, .auth-content, .mobile-menu-header, .member-action-heading) :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn),
body.channel-page :is(.modal, .studio-modal, #admin-menu, #mobile-slide-menu) :is(.modal-content, .studio-modal-box, .auth-content, .mobile-menu-header, .member-action-heading) :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn):hover {
    background:none !important;
    box-shadow:none;
}

body.channel-page :is(.modal, .studio-modal, #admin-menu, #mobile-slide-menu) :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn),
body.channel-page :is(.modal, .studio-modal, #admin-menu, #mobile-slide-menu) :is(.close-btn, .auth-close, .studio-modal-close, #channel-members-close, #media-edit-cancel, .member-action-close, .close-menu-btn):hover {
    border:1px solid var(--theme-border,#333) !important;
    color:var(--theme-muted,#ccc) !important;
}


/* site-theme.css */
:root { color-scheme:dark; }
:root[data-theme="light"] {
    color-scheme:light;
    --theme-bg:#f6f5f8;
    --theme-surface:#fff;
    --theme-input:#f0edf4;
    --theme-text:#251e2e;
    --theme-muted:#655970;
    --theme-border:#dcd5e4;
    --theme-hover:#eee6f4;
    --theme-profile:linear-gradient(155deg,#eee0f6,#faf7fc 65%);
}

/* Keep the account popover and station panels in the selected theme even
   when their legacy dark surface rules are more specific. */
:root[data-theme="light"] body.channel-page .account-popover {
    background:#fff;
    color:#251e2e;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page .account-profile {
    background:linear-gradient(155deg,#eee0f6,#faf7fc 65%);
}
:root[data-theme="light"] body.channel-page .account-actions button {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .account-actions button:hover {
    background:#eee6f4;
}

:root[data-theme="light"] body.channel-page .video-section,
:root[data-theme="light"] body.channel-page #tabs-area,
:root[data-theme="light"] body.channel-page #tabs-area .tab-content-container {
    background:#fff;
}
:root[data-theme="light"] body.channel-page #tabs-area .content-tabs {
    background:#fff;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page #tabs-area #gb-list,
:root[data-theme="light"] body.channel-page #tabs-area .gb-card {
    background:#f6f5f8;
    border-color:#dcd5e4;
    box-shadow:0 2px 8px rgba(44,32,58,.12);
}
body.channel-page #m-gb-list .gb-card {
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) body.channel-page #m-gb-list .gb-card {
    border-color:rgba(255,255,255,.16);
}
:root[data-theme="light"] body.channel-page #m-gb-list .gb-card {
    box-shadow:0 2px 8px rgba(44,32,58,.12);
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-header:hover,
:root[data-theme="light"] body.channel-page #m-gb-list .gb-header:hover {
    background:linear-gradient(30deg,#f6f5f8,#fff,#f6f5f8);
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-body {
    background:#fff;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-input {
    background:#f0edf4;
    color:#251e2e;
}

:root[data-theme="light"] body.channel-page .chat-section,
:root[data-theme="light"] body.channel-page #chat-form {
    background:#fff;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page #m {
    background:#f0edf4;
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page #chat-form .btn-gif {
    background:#e8e2ed;
    color:#4c4057;
}
:root[data-theme="light"] body.channel-page #chat-form .btn-popup-chat {
    color:#655970;
}
:root[data-theme="light"] body.channel-page #chat-send-status {
    background:#f0edf4;
    color:#655970;
}

/* The contact link uses the same animated gradient treatment as the
   guestbook submit button. Keep its label readable on a light surface. */
:root[data-theme="light"] body.channel-page #mobile-contact-btn {
    background:transparent;
    box-shadow:0 1.5px 5px -0.5px rgba(92,72,110,.24),
        0 5px 12px -1.5px rgba(92,72,110,.24);
    transition:transform .3s ease, box-shadow .3s ease;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn::before {
    background:linear-gradient(to right,#9900f0 0%,#ff85b3 50%,#9900f0 100%);
    background-size:50% 100%;
    animation:scroll-gb 1.5s infinite linear;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn::after {
    inset:2px;
    background:#fff;
    transition:inset .2s ease-in-out;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn span {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn:hover {
    transform:scale(1.05);
    box-shadow:0 4px 18px rgba(153,0,240,.25);
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn:hover::after {
    inset:4px;
    background:#fff;
}

:root[data-theme="light"] body.channel-page #channel-members-modal #channel-members-title {
    color:#182538;
    -webkit-text-fill-color:#182538;
}

/* Chat bubbles keep their dark gradients by default. Give them readable
   light surfaces and text when the light theme is selected. */
:root[data-theme="light"] body.channel-page #messages {
    background:#f6f5f8;
    border-left-color:#dcd5e4;
    box-shadow:inset 0 0 10px rgba(44,32,58,.08);
}
:root[data-theme="light"] body.channel-page #messages .bubble {
    color:#251e2e;
    border:1px solid #dcd5e4;
    box-shadow:1px 1px 7px rgba(44,32,58,.14);
}
:root[data-theme="light"] body.channel-page #messages .bubble.mine {
    background:linear-gradient(30deg,#e8dcf3,#f4e9f6);
}
:root[data-theme="light"] body.channel-page #messages .bubble.other {
    background:#fff;
}
:root[data-theme="light"] body.channel-page #messages .nick-title {
    color:#4a3b59;
    text-shadow:none;
}
:root[data-theme="light"] body.channel-page #messages .nick-user {
    color:#237a31;
}
:root[data-theme="light"] body.channel-page #messages .system-msg {
    background:#edf6e9;
    color:#286b35;
    box-shadow:0 2px 5px rgba(44,32,58,.1);
}
:root[data-theme="light"] body.channel-page.is-typing #messages {
    background:linear-gradient(to top,rgba(246,245,248,.96) 0%,rgba(255,255,255,0) 60%);
}
:root[data-theme="light"] body.channel-page.is-typing #messages .msg-row .bubble {
    background:#fff !important;
    color:#251e2e !important;
    border:1px solid #dcd5e4;
    text-shadow:none;
    box-shadow:1px 1px 7px rgba(44,32,58,.14);
}
:root[data-theme="light"] body.channel-page.is-typing #messages .nick-title {
    background:rgba(255,255,255,.72);
    text-shadow:none;
}

/* Keep the contact link animated in dark mode as well. */
body.channel-page #mobile-contact-btn::before {
    animation:scroll-gb 1.5s infinite linear;
}
body.channel-page #mobile-contact-btn:hover {
    transform:scale(1.05);
}
body.channel-page #mobile-contact-btn:hover::after {
    inset:4px;
}

/* The chat popup replaces the lobby navbar with its own compact header.
   Keep that header visually consistent with the updated top navigation. */
body.channel-page.chat-popup #main-chat-header {
    background:var(--theme-surface,#141216);
    border-bottom:1px solid var(--theme-border,#333);
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    color:var(--theme-text,#fff);
}
body.channel-page.chat-popup #main-chat-header #user-status {
    color:var(--theme-text,#fff);
}

/* Match the bottom streamer CTA to the animated gradient button language
   used by the station actions. */
body.index-page .btn-cta-apply {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
    background:transparent;
    border:0;
    border-radius:20px;
    color:var(--theme-text,#fff);
    box-shadow:0 2px 8px rgba(92,72,110,.24);
    transition:transform .3s ease, box-shadow .3s ease;
}
body.index-page .btn-cta-apply::before {
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    background:linear-gradient(to right,#9900f0 0%,#ff85b3 50%,#9900f0 100%);
    background-size:50% 100%;
    animation:scroll-gb 1.5s infinite linear;
}
body.index-page .btn-cta-apply::after {
    content:"";
    position:absolute;
    z-index:2;
    inset:2px;
    border-radius:18px;
    background:var(--theme-surface,#141216);
    transition:inset .2s ease-in-out;
}
body.index-page .btn-cta-apply span {
    position:relative;
    z-index:3;
    color:var(--theme-text,#fff);
}
body.index-page .btn-cta-apply:hover,
body.index-page .btn-cta-apply:focus-visible {
    transform:scale(1.05);
    box-shadow:0 4px 18px rgba(153,0,240,.28);
}
body.index-page .btn-cta-apply:hover::after,
body.index-page .btn-cta-apply:focus-visible::after {
    inset:4px;
}

:root[data-theme="light"] body.index-page .streamer-cta-banner {
    background:#fff;
    border-color:#dcd5e4;
    box-shadow:0 6px 18px rgba(44,32,58,.1);
}
:root[data-theme="light"] body.index-page .streamer-cta-text h3 {
    color:#251e2e;
}
:root[data-theme="light"] body.index-page .streamer-cta-text p {
    color:#655970;
}

:root[data-theme="light"] body.channel-page .lobby-navbar .btn-green-join::after,
:root[data-theme="light"] body.channel-page #mobile-slide-menu .btn-green-join::after {
    background:#fff;
}
:root[data-theme="light"] body.channel-page .lobby-navbar .btn-green-join span,
:root[data-theme="light"] body.channel-page #mobile-slide-menu .btn-green-join span {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .lobby-navbar .btn-green-join:hover,
:root[data-theme="light"] body.channel-page #mobile-slide-menu .btn-green-join:hover {
    box-shadow:0 4px 18px rgba(153,0,240,.25);
}

:root[data-theme="light"] body.channel-page .account-identity .account-shortcut-admin {
    background:#f4e9f8;
    border-color:#c9a4d7;
    color:#4a2858;
}
:root[data-theme="light"] body.channel-page .account-identity .account-shortcut-admin:hover {
    background:#ead8f1;
    filter:none;
}

:root[data-theme="light"] body.channel-page #notice-bar {
    background:#fff;
    color:#000;
    border-color:#dcd5e4;
    box-shadow:0 3px 12px rgba(44,32,58,.12);
}
:root[data-theme="light"] body.channel-page #notice-bar.collapsed {
    background:#f4eff8;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page #notice-toggle-btn {
    color:#7a2ca6;
}

:root[data-theme="light"] body.channel-page .gif-search-row input {
    color:#251e2e;
    border-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page .gif-search-row button {
    background:#fff;
    color:#000;
    border-color:#dcd5e4;
    border-left:0;
    box-shadow:none;
}

body.channel-page #modal-vote-create .modal-content {
    width:min(420px, calc(100vw - 32px));
    box-sizing:border-box;
}
body.channel-page #modal-vote-create #inp-vote-title,
body.channel-page #modal-vote-create .vote-item-inp {
    display:block;
    width:100%;
    box-sizing:border-box;
}
body.channel-page #modal-vote-create #vote-input-list {
    width:100%;
    max-height:200px;
    overflow-y:auto;
    padding:0;
    box-sizing:border-box;
}
body.channel-page #modal-vote-create .vote-input-row {
    display:flex;
    width:100%;
    box-sizing:border-box;
}
body.channel-page #modal-vote-create .vote-add-option {
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin:5px auto;
    padding:0;
    border:1px solid var(--theme-border,#665d6b);
    border-radius:50%;
    background:var(--theme-surface,#2a1934);
    color:var(--theme-text,#fff);
    cursor:pointer;
}
body.channel-page #modal-vote-create .vote-add-option:hover {
    background:var(--theme-hover,#39283f);
    color:var(--theme-text,#fff);
}
body.channel-page #modal-vote-create .vote-create-actions {
    display:flex;
    gap:10px;
    width:100%;
    margin:0 auto;
}
body.channel-page #modal-vote-create .vote-create-actions > button {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    height:48px;
    min-height:48px;
    min-width:0;
    margin:10px 0 0;
    padding:10px 14px;
    font-size:15px;
    line-height:22px;
}

:root[data-theme="light"] body.channel-page .vote-overlay {
    background:#fff;
    border-color:#dcd5e4;
    box-shadow:0 4px 14px rgba(44,32,58,.12);
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .vote-header {
    background:#f0edf4;
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .vote-fold-btn {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page #vote-admin-controls {
    border-top-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page .vote-item {
    background:#f6f5f8;
    border-color:#dcd5e4;
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .vote-item:hover {
    border-color:#b9a5c7;
}
:root[data-theme="light"] body.channel-page .btn-do-vote::after {
    background:#fff;
}
:root[data-theme="light"] body.channel-page .btn-do-vote span {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page .vote-res-row {
    border-bottom-color:#dcd5e4;
}
:root[data-theme="light"] body.channel-page .vote-overlay.user-collapsed {
    background:#f4eff8;
    border-color:#c9a4d7;
}
:root[data-theme="light"] body.channel-page .vote-overlay.user-collapsed .vote-fold-btn {
    color:#7a2ca6;
}

/* Guestbook submit and video upload use the light version of the same
   animated button treatment when the site is in light mode. */
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo) {
    background:transparent;
    box-shadow:0 1.5px 5px -0.5px rgba(92,72,110,.24),
        0 5px 12px -1.5px rgba(92,72,110,.24);
    transition:transform .3s ease, box-shadow .3s ease;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo)::before {
    background:linear-gradient(to right,#9900f0 0%,#ff85b3 50%,#9900f0 100%);
    background-size:50% 100%;
    animation:scroll-gb 1.5s infinite linear;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo)::after {
    inset:2px;
    background:#fff;
    transition:inset .2s ease-in-out;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo) span {
    color:#251e2e;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo):hover {
    transform:scale(1.05);
    box-shadow:0 4px 18px rgba(153,0,240,.25);
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo):hover::after {
    inset:4px;
    background:#fff;
}


/* account-settings.css */
#account-settings {
    position:fixed; inset:0; margin:auto;
    width:440px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); overflow:auto;
    box-sizing:border-box; padding:24px; border:1px solid var(--theme-border,#44374b); border-radius:14px;
    background:var(--theme-surface,#211b26); color:var(--theme-text,#f4f0f6); box-shadow:0 20px 70px #0005;
    font-family:inherit;
}
#account-settings::backdrop { background:#0009; backdrop-filter:blur(4px); }
#account-settings .settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
#account-settings h2 { margin:0; font-size:22px; }
#account-settings button { font:inherit; cursor:pointer; color:inherit; }
#account-settings .settings-heading button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:transparent; }
#account-settings .settings-password { display:flex; align-items:center; gap:12px; width:100%; padding:14px 0; border:0; background:transparent; text-align:left; }
#account-settings .settings-password > :last-child { margin-left:auto; font-size:12px; }
#account-settings .settings-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:20px 0; border-top:1px solid var(--theme-border,#44374b); font-size:14px; }
#account-settings .settings-theme-control { display:flex; align-items:center; gap:9px; font-size:12px; }
#settings-theme-toggle { display:block; flex:0 0 44px; width:44px; height:26px; padding:3px; border:0; border-radius:20px; background:#8d3fb0; }
#settings-theme-toggle span { display:block; width:20px; height:20px; border-radius:50%; background:#fff; transform:translateX(18px); transition:transform .18s; }
#settings-theme-toggle[aria-checked="false"] { background:#9c90a3; }
#settings-theme-toggle[aria-checked="false"] span { transform:translateX(0); }
#settings-language { width:160px; max-width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--theme-border,#665372); border-radius:8px; background:var(--theme-input,#151019); color:inherit; font:inherit; }
#account-settings .settings-note { margin:0; color:var(--theme-muted,#b7aabd); font-size:12px; line-height:1.6; }
#account-settings :is(button,select):focus-visible { outline:2px solid #a74bc5; outline-offset:3px; }
#account-settings .settings-heading button:hover, #account-settings .settings-password:hover { background:var(--theme-hover,#38283f); }
@media(prefers-reduced-motion:reduce) { #settings-theme-toggle span { transition:none; } }

.index-page #lobby-main { background-color:var(--theme-surface,#1111); }

/* Match the share-button tooltip, positioned outside the collapsed sidebar. */
.sidebar-menu-tooltip {
    position:fixed; z-index:12000; pointer-events:none;
    padding:6px 10px; border-radius:5px;
    background:var(--theme-surface,#333); color:var(--theme-text,#fff);
    font-size:14px; line-height:1.5; font-weight:400;
    max-width:calc(100vw - 100px); overflow-wrap:anywhere;
    box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.sidebar-menu-tooltip::before {
    content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
    border:5px solid transparent; border-right-color:var(--theme-surface,#333);
}
.sidebar-menu-tooltip[hidden] { display:none; }
@media(max-width:900px) { .sidebar-menu-tooltip { display:none; } }

/* Give recommended media cards a distinct hover surface in light mode. */
:root[data-theme="light"] body.index-page :is(#recommended-vods-section, #recommended-videos-section) .streamer-card:is(:hover, :focus-visible) {
    background:#e6dbef;
}


/* Integrated account-password.css */
#account-password{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:400px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--theme-border,#44374b);border-radius:14px;background:var(--theme-surface,#211b26);color:var(--theme-text,#f4f0f6);box-shadow:0 20px 70px #0005;font-family:inherit}
#account-password::backdrop{background:#0009}
#account-password h2{margin:0 0 24px;font-size:22px}
#account-password label{display:block;margin-bottom:8px;font-size:14px}
#account-password input{display:block;box-sizing:border-box;width:100%;margin:0;padding:12px;min-height:44px;border:1px solid var(--theme-border,#665372);border-radius:8px;background:var(--theme-input,#151019);color:inherit;font:inherit}
#account-password-status{min-height:22px;margin:12px 0;color:var(--theme-muted,#b7aabd);font-size:13px;line-height:1.6}
#account-password .password-actions{display:flex;gap:10px}
#account-password button{flex:1;min-height:44px;margin:0;padding:10px;border:1px solid var(--theme-border,#665372);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}
#account-password [data-password-save]{border:0;background:var(--main-color,linear-gradient(45deg,#9900f0,#ff85b3));color:#000;font-weight:700}
#account-password button:disabled{opacity:.55;cursor:default}
#account-password :is(button,input):focus-visible{outline:2px solid #c873e9;outline-offset:3px}