/* 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: 46% auto;
    background-position: right 3% center;
    background-repeat: no-repeat;
}
@media (max-width: 900px) {
    .index-page #lobby-main .hero-banner-preview.hero-brand-fallback {
        background-size: 90% auto;
        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: contain;
    padding: 12%;
    box-sizing: border-box;
    background: #111;
}


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

/* --- [기본 설정] --- */
body { margin: 0; background: rgb(0, 0, 0); color: var(--theme-text,#fff); font-family: "Noto Sans KR", sans-serif;font-weight: 400;  height: 100dvh; overflow: hidden; }
.container { display: flex; height: 100%; flex-direction: row; }

div::-webkit-scrollbar { width: 6px; border-radius: 10px; }
div::-webkit-scrollbar-track { background: transparent; }
div::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.5); border-radius: 10px; }

/* 비디오 섹션 전체 스크롤 설정 */
.video-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;      /* 가로 스크롤 절대 금지 */
    overflow-y: auto;        /* 세로 스크롤 허용 */
    scrollbar-width: none;   
    -ms-overflow-style: none;
}

.mobile-only-tabs, #mobile-panel { display: none; }
.video-section::-webkit-scrollbar {
    display: none;
}

/* [추가] 채널 제목 옆 방송 상태 뱃지 */
.ch-status {
    font-size: 14px;
    margin-left: 0px;
    padding: 5px 10px;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: 600;
}

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

.tab-btn {
    background: none;
    border: none;
    color: var(--theme-muted,#999);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 15px 8px 15px;
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}

/* 활성화 상태 (글자 그라데이션 + 애니메이션) */
.tab-btn.active {
    color: transparent; /* 글자색 투명화 필수 */
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
}

/* 활성화 상태 하단 롤링 바 */
.tab-btn.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;
}

/* 호버 시 부드럽게 글자색 변경 */
.tab-btn:hover {
    color: var(--theme-muted,#FF85B3);
}

.count-badge {
    font-size: 14px;
    color: #888;
    font-weight: 100;
}

/* 활성화된 탭의 숫자도 테마 그라데이션 적용 */
.tab-btn.active .count-badge,.tab-btn:hover > .count-badge {
    color: transparent;
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
}

/* 탭 메뉴 스타일 */
.content-tabs {
    display: flex;
    gap: 10px;
    padding: 10px 10px 0px 10px;
    border-bottom: 1px solid var(--theme-border,#333);
    background: var(--theme-surface,#151515);
    position: sticky;
    z-index: 10;
    bottom: 0px;
}

#tabs-area{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: all 0.3s ease;
    z-index: 999;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: rgb(0, 0, 0) 0px 0px 10px;
}

/* 콘텐츠는 스크롤 */
.tab-content-container{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px;
  padding-bottom: 39px; 
  min-height: 390px;
  background: rgba(20,20,20,0.9);

}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.section-title { font-size: 16px; margin-bottom: 10px; color: var(--theme-text,#eee); }

/* 비디오 그리드 레이아웃 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25%, 2fr));
    gap: 15px;
    padding-top: 10px;
}

/* 개별 카드 스타일 */
.ch-status.on {
    background-color: #ff0000;
    color: var(--theme-text,#fff);
    border: 1 solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px #ff0000;
    transition: all 1s ease;
    animation: chon 3.5s infinite;
}

@keyframes chon {
    0% { box-shadow: 0 0 10px 5px #ff0000;}
    50% { box-shadow: 0 0 5px #9d0000;}
    100% { box-shadow: 0 0 10px 5px #ff0000; }
}

/* 대기중일 때 (투명 배경 + 회색 테두리) */
.ch-status.off {
    background-color: var(--theme-surface,#333);
    color: var(--theme-text,#fff);
    border: 0;
    box-shadow: var(--main-shadow);
}

.live-badge.offline {
    background: #555;  /* 회색 배경 */
    color: #ccc;       /* 연한 회색 글씨 */
}

#channel-title-display { 
    display: flex;
    align-items: center;
    background: rgba(18, 18, 18, 0.95);
    width: 100%; 
    font-size: 21px;
    color: var(--theme-text,#eee);
    min-height: 35px; /* 30px에서 살짝 여유를 줬습니다 */
    border-bottom: 1px solid var(--theme-border,#333);
    box-shadow: 1px 1px 3px #000;
    padding: 0 10px;
    font-weight: 600;
    /* 🔥 추가: 리스트가 길어져도 타이틀 영역이 절대 작아지지 않게 함 */
    flex-shrink: 0; 
    height: 60px;
    box-sizing: border-box;
    z-index: 1000;
    backdrop-filter: blur(7px);
}
.video-wrapper {
    position: relative; width: 100%;
    max-width: calc((100dvh - 120px - 30px) * 16 / 9);
    aspect-ratio: 16 / 9;
    background: var(--theme-surface,#000); margin: 0 auto; display: flex;
    flex-shrink: 0;
    margin-top: 60px;
    z-index: 1;
}

video { width: 100%; height: 100%; display: block; object-fit: contain; }

#stream-thumbnail {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 5; display: block; 
}

/* 중앙 음소거 오버레이 */
/* 롤링 애니메이션 (문의 버튼과 동일) */
@keyframes scroll-mute {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

#center-mute-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 15cqw;
    height: 15cqw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 100vmax;
    cursor: pointer;
    background: transparent;
    box-shadow: 0px 0.1px 0.5px hsl(208deg 22% 58% / 0.34), 0px 1px 3px -0.4px hsl(208deg 22% 58% / 0.34), 0px 3px 8px -0.8px hsl(208deg 22% 58% / 0.34);
    transition: all 0.2s ease-in-out;
}

/* 움직이는 그라데이션 보더 (Before) */
#center-mute-overlay::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-mute 1.2s infinite linear;
}

/* 내부 검정색 배경 (After) */
#center-mute-overlay::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0.7cqw;
    border-radius: 100vmax;
    background-color: black;
    transition: inset 0.2s ease-in-out;
}

/* 내부 콘텐츠 (아이콘 + 텍스트) */
.mute-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    color: white;
}

.mute-content i {
    font-size: 8cqw;
}

.mute-content span {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

/* 호버 효과 */
#center-mute-overlay:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0px 1.5px 5px -0.5px hsl(208deg 22% 58% / 0.36),
                0px 5px 12px -1.5px hsl(208deg 22% 58% / 0.36);
}

#center-mute-overlay:hover::after {
    inset: 1.3cqw; /* 호버 시 보더가 살짝 두꺼워지는 효과 */
}

/* 플레이어 컨트롤 */
.player-overlay { position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
     padding: 15px 20px;
     box-sizing: border-box;
     opacity: 0;
     transition: opacity 0.3s;
     display: none;
     align-items: center;
     gap: 15px;
     z-index: 10;
 }
.video-wrapper:hover .player-overlay { opacity: 1; }
.btn-control { background: none; border: none; color: var(--theme-text,#fff); font-size: 22px; cursor: pointer; width: 30px; transition: all 0.3s ease;}
.btn-control:hover {
     transform: scale(1.3);
    color: transparent; /* 글자색 투명화 필수 */
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: btn-roll 2s infinite linear;
 }
/* 텍스트 그라데이션 흐름 애니메이션 */
@keyframes btn-roll {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.volume-container {
    display: flex;
    align-items: center;
}

.slider-wrapper {
    position: relative;
    width: 100px;
    display: flex;
    align-items: center;
}

/* 볼륨 슬라이더 메인 트랙 (얇게) */
.volume-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px; /* 바 두께를 얇게 설정 */
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

/* 원형 볼 (Thumb) - 바보다 확실히 크게 */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; 
    height: 14px;
    background: #fff;
    border-radius: 50%; /* 동그란 모양 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border: none;
    margin-top: 0px; /* 트랙 중앙 정렬 */
}

/* 말풍선 스타일 (이미지 스타일) */
.volume-tooltip {
    position: absolute;
    top: -28px; /* 볼 위쪽 배치 */
    left: 9px;
    transform: translateX(-50%); /* 중심점 맞춤 */
    background: #fff;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    display: none; /* 평소에는 숨김 */
    pointer-events: none;
}

/* 말풍선 꼬리 부분 */
.volume-tooltip::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
}

/* 슬라이더 조작 시 말풍선 표시 */
.slider-wrapper:hover .volume-tooltip,
.volume-slider:active + .volume-tooltip, /* 조작 중 표시 */
.slider-wrapper:active .volume-tooltip {
    display: block;
}
.live-badge { background: red; color: white; padding: 2px 6px; font-size: 12px; font-weight: 600; border-radius: 4px; margin-left: auto; margin-right: 10px; }
.quality-group { display: flex; gap: 5px; }
.quality-btn { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); color: var(--theme-text,#fff); padding: 4px 8px; font-size: 11px; cursor: pointer; border-radius: 15px; }
.quality-btn.active { background: var(--main-color); color: #000; font-weight: 600;border: 1px solid #FF85B3 }

/* 시청자 정보 */
.viewer-info { background: var(--theme-surface,#111);
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    color: var(--theme-text,#fff);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    min-height: 50px;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.7);
    position: relative;
    flex-shrink: 0;
    align-items: center;
    z-index: 1;
 }
.viewer-count { font-weight: 600; }
/* --- 시청자 수 롤링 애니메이션 --- */

/* 1. 숫자가 보이는 '창문' 역할 */
.viewer-num { 
    display: inline-flex;       /* 내부 요소 정렬 */
    flex-direction: column;     /* 세로로 쌓기 */
    height: 19px;               /* 숫자가 딱 하나만 보이는 높이 (폰트 크기에 맞춰 조절) */
    overflow: hidden;           /* 영역 밖의 숫자는 숨김 (핵심!) */
    vertical-align: bottom;     /* 텍스트 줄 맞춤 */
    color: #4d85ff; 
    margin: 0 5px; 
    font-size: 17px;
    font-weight: 600;
    position: relative;
}
/* 2. 실제로 움직일 숫자 박스 */
.viewer-roll-box {
    display: flex;
    flex-direction: column;     /* 숫자들을 위아래로 배치 */
    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 3. 각 숫자 스타일 */
.viewer-roll-item {
    height: 17px;               /* 부모(.viewer-num) 높이와 동일해야 함 */
    line-height: 17px;          /* 수직 중앙 정렬 */
    display: block;
}

/* 롤링 애니메이션 정의 */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

#mobile-contact-btn {
    position: relative;
    display: inline-flex; /* 위치 붕괴 방지를 위해 inline-flex 사용 */
    align-items: center;
    justify-content: center;
    padding: 7px 15px; /* 크기는 기존과 유사하게 조정 */
    overflow: hidden;
    border-radius: 100vmax;
    text-decoration: none;
    background: transparent;
    border: none;
    /* 그림자 설정 (고급 쉐도우 적용) */
box-shadow: 0px 0.1px 0.5px hsl(208deg 22% 58% / 0.34),
                0px 1px 3px -0.4px hsl(208deg 22% 58% / 0.34),
                0px 3px 8px -0.8px hsl(208deg 22% 58% / 0.34);
    transition: all 0.2s ease-in-out;
}

/* 움직이는 그라데이션 보더 (Before) */
#mobile-contact-btn::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 1.2s infinite linear;
}

/* 내부 검정색 배경 (After) */
#mobile-contact-btn::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 3px; /* 보더 두께 조절 */
    border-radius: 100vmax;
    background-color: black;
    transition: inset 0.2s ease-in-out;
}

/* 텍스트 영역 */
#mobile-contact-btn span {
position: relative;
    z-index: 3;
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* 호버 효과: 내부가 좁아지며 보더가 두꺼워짐 */
#mobile-contact-btn:hover {
box-shadow: 0px 1.5px 5px -0.5px hsl(208deg 22% 58% / 0.36),
                0px 5px 12px -1.5px hsl(208deg 22% 58% / 0.36);
}

#mobile-contact-btn:hover::after {
    inset: 5px;
}

/* --- [오른쪽: 채팅 섹션] --- */
.chat-section { width: 350px;
     min-width: 350px;
     max-width: 350px;
     flex: none;
     background: var(--theme-surface,#111);
     display: flex;
     flex-direction: column;
     position: relative;
     z-index: 1001;
 }

/* 1. 유저 정보 영역 (왼쪽) 강제 중앙 정렬 */
#user-status {
    display: flex !important;  
    align-items: center;     
    gap: 6px;    
    height: 100%;       
}

/* 2. 뱃지(운영자) 미세 조정 */
#user-status span {
    display: flex;         
    align-items: center;
    justify-content: center;
    height: 20px;       
    line-height: 1;      
    padding: 0 0px;   
    margin: 0 !important;  
    position: relative;
    top: 0px;    
}

/* 3. 아이콘들(왕관, 톱니바퀴) 높이 맞춤 */
#user-status i {
    display: flex;
    align-items: center;
    margin: 0 !important;   
    height: 100%;
    font-size: 22px;
}

/* 4. 로그아웃 버튼 그룹 (오른쪽) 정렬 */
#auth-btn-group {
    display: flex;
    align-items: center;
    height: 100%;
}

.chat-header { 
    display: none !important; /* 상단 메인 네비게이션 헤더로 회원정보 및 로그인 컨트롤 일원화 */
}

#auth-btn { background: var(--main-color); color: #000; font-weight: 400; border: none; padding: 10px 15px; border-radius: 17px; cursor: pointer; font-size: 12px; }
#auth-btn:hover { background: var(--main-hover-color) }

/* ==============================
   1. 채팅방 상단 로그인/가입 버튼 디자인
   ============================== */
.auth-btn-group {display: inline-block;}

/* '로그인' 텍스트 버튼 */
.btn-text-login {
    background: transparent;
    border: none;
    color: var(--theme-muted,#ccc);
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
    padding: 7px 10px 5px 10px;
}

.btn-text-login:hover {color: var(--theme-text,#fff); }

/* 롤링 애니메이션 정의 (기존 정의가 있다면 중복 선언 생략 가능) */
@keyframes scroll-join {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 메인 버튼 설정 */
.btn-green-join {
    position: relative;
    display: inline-flex;   /* 텍스트 정중앙 배치를 위해 설정 */
    align-items: center;
    justify-content: center;
    padding: 7px 15px;      /* 기존 사이즈 유지 */
    overflow: hidden;
    border-radius: 20px;    /* 기존 라운드 유지 */
    background: transparent;
    border: none;
    cursor: pointer;
    box-shadow: var(--main-shadow);
    transition: all 0.3s ease-in-out;
}

/* 움직이는 그라데이션 보더 (Before) */
.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;
}

/* 내부 검정색 배경 (After) */
.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-weight: 600;
    padding-top: 2px;
}

/* 호버 효과 */
.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;             /* 호버 시 보더가 더 두꺼워짐 */
}

.doJoin {background:var(--main-color);
    color:#000;
    border: 0;
    transition: all 1s ease;
    background-size: 100% auto;
}

.doJoin:hover {background: var(--main-color);background-size: 200% auto;}

/* ==============================
   2. 로그인/가입 전용 모달 스타일 (분리됨)
   이름을 .auth-content 로 변경하여 다른 모달과 겹치지 않음
   ============================== */
/* 기본 PC 스타일 */
.auth-content { 
    background: rgba(0,0,0,0.8); /* 배경을 조금 더 진하게 */
    margin: 10% auto; 
    padding: 10px 10px 15px 10px;
    width: 320px; 
    color: var(--theme-text,#fff); 
    border-radius: 15px; 
    border: 1px solid var(--theme-border,#444); 
    position: relative; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* 내부 요소 스타일 (modal-content와 겹치지 않게 명시적 지정) */
.auth-content h3 { 
    margin-top: 0; 
    text-align: center; 
    border-bottom: 1px solid var(--theme-border,#444); 
    padding-bottom: 15px; 
    margin-bottom: 15px;
}

.auth-content input[type="text"], 
.auth-content input[type="password"] { 
    width: 90%;
    padding: 12px 10px;
    margin: 8px auto; 
    background: rgba(40, 40, 40, 0.9);
    border: 1px solid var(--theme-border,#555);
    color: white; 
    display: block;
    border-radius: 8px;
    box-sizing: border-box;
}

.auth-content button { 
    width: 90%; 
    padding: 12px; 
    margin-top: 10px; 
    border-radius: 8px; 
    cursor: pointer; 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    font-weight: 600;
    transition: all 1s ease;
}

/* 버튼 색상 */

.close-btn { background: var(--theme-surface,#333); color: var(--theme-muted,#ccc); border: 1px solid var(--theme-border,#444); }
.login-btn { background: transparent; border: 1px solid #ccc; }

.close-btn:hover { background: #444; color: var(--theme-text,#fff); }
.login-btn:hover { background: rgba(255,255,255,0.1); }

/* 공지사항 바 (접기/펼치기 기능 포함) */
#notice-bar { 
    position: sticky; 
    top: 0;           
    z-index: 9;      /* 채팅보다 위에 뜨도록 */
    margin: 0; 
    display: none;    /* 기본 숨김 (JS로 켜짐) */
    background: rgba(35, 38, 41, 0.6); /* 뒤에 채팅 비치지 않게 불투명도 조절 */
    color: var(--theme-text,#fff);
    padding: 13px 5px; 
    font-weight: 600;
    text-align: left;
    font-size: .875rem; 
    border: 2px solid rgba(255,255,255,0.1); /* 테두리 살짝 조정 */
    border-radius: 10px; /* 아래쪽만 둥글게 */
    flex: none;       /* 크기 줄어듦 방지 */
    align-items: flex-start;
    gap: 2px;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px); /* 배경 흐림 효과 (선택사항) */
    box-shadow: var(--main-shadow);
}

#notice-bar.collapsed { 
    width: 30px; 
    padding:10px 5px; 
    background: rgba(35, 38, 41, 0.8); 
    border-color: transparent; 
    overflow: hidden; 
    white-space: nowrap;
    border-radius: 50%; /* 접혔을 땐 둥글게 */
    margin-left: auto;  /* 접히면 오른쪽으로 붙게 (선택사항) */
    border: 2px solid rgba(255,255,255,0.1); /* 테두리 살짝 조정 */
}
#notice-toggle-btn { background: none;
     border: none;
     color: var(--main-color);
     cursor: pointer;
     padding: 0 5px;
     font-size: 16px;
     line-height: 1.2;
 }
#notice-content { flex: 1; word-break: break-all; line-height: 1.4; }
#notice-bar.collapsed #notice-content { display: none; }

/* 1. 톱니바퀴 아이콘 (클릭 가능하게) */
.gear-btn {
    cursor: pointer;
    color: var(--theme-muted,#aaa);
    margin-left: 3px;
    transition: transform 0.3s;
}
.gear-btn:hover { color: var(--theme-text,#fff); transform: rotate(90deg); }

#banner-area { width: 100%; background: var(--theme-surface,#151515); text-align: center; border-bottom: 1px solid var(--theme-border,#000); display: none; flex: none; }
#chat-banner-img { max-width: 96%;
    margin: 5px auto;
     height: auto;
     display: block;
    border-radius: 5px;
    border: 1px solid var(--theme-border,#333);
    box-shadow: var(--main-shadow);
 }

#messages { 
margin: 5px 5px 0px 5px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 0px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(30deg, #111, #000, #111);
    border-radius: 10px;
    min-height: 0;
    position: relative;  /* sticky 동작을 위해 추가 */
    border-left: 1px solid var(--theme-border,#151515);
    box-shadow:inset 0 0 10px 0 rgba(0, 0, 0, 1);
}

.msg-row { display: flex; flex-direction: column; max-width: 85%; }
.msg-row.mine { align-self: flex-end; align-items: flex-end; }
.msg-row.other { align-self: flex-start; align-items: flex-start; }
.nick-title { font-size: 14px; margin-bottom: 3px; margin-left: 2px; font-weight: 600; text-shadow: var(--main-shadow);}
.nick-admin { color: #ff9800; }
.nick-user { color: #55ff4f; }
.msg-del-x-btn { display:inline-block; margin-left:10px; color:#e53935; font-size:11px; line-height:1; cursor:pointer; text-shadow:none; }
.msg-del-x-btn:hover { color:#b71c1c; }
.admin-clickable { cursor: pointer; }
.bubble { padding: 3px 10px;
     position: relative; /* 하트 뱃지의 기준점 */
     cursor: pointer;    /* 클릭 가능하다는 표시 */
     border-radius: 12px;
     font-size: 13px;
     word-break: break-all;
     line-height: 1.4;
     color: var(--theme-text,#ffffff);
     box-shadow: 1px 1px 7px rgba(0,0,0,0.7);
 }

 /* 하트 뱃지 디자인 */
.like-badge {
    position: absolute;
    bottom: -10px;
    background: #ff1414; 
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    display: none;      
    align-items: center;
    gap: 3px;
    z-index: 10;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 🔥 [추가] 남의 글(왼쪽 말풍선) -> 뱃지는 오른쪽 끝에 */
.bubble.other .like-badge {
    right: -12px;
    left: auto; /* 왼쪽 값 초기화 */
}

/* 🔥 [추가] 내 글(오른쪽 말풍선) -> 뱃지는 왼쪽 끝에 */
.bubble.mine .like-badge {
    left: -12px;  /* 왼쪽으로 이동! */
    right: auto; /* 오른쪽 값 초기화 */
}

/* 하트가 생길 때 뿅! 하고 나타나는 효과 */
.like-badge.show {
    display: flex;
    animation: popIn 0.3s forwards;
}

/* 내가 누르면 잠깐 커지는 효과 */
.like-badge.liked-anim {
    transform: scale(1.4);
}

@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

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

/* 기존 .flying-heart 수정 */
.flying-heart {
    position: absolute;
    bottom: 5px;
    color: #ff1818;
    font-size: 14px;
    pointer-events: none;
    z-index: 999;
    animation: flySmoke 1.2s ease-out forwards;
}

/* 남의 글: 오른쪽에서 하트 뿜뿜 */
.bubble.other .flying-heart {
    right: 5px;
    left: auto;
}

/* 내 글: 왼쪽에서 하트 뿜뿜 */
.bubble.mine .flying-heart {
    left: 5px;
    right: auto;
}

@keyframes flySmoke {
    0% {
        transform: translate(0, 0) scale(0.5); /* 작게 시작 */
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(0, -10px) scale(1);
    }
    100% {
        opacity: 0; 
        transform: translate(var(--rx), -80px) scale(1.5);
    }
}

.bubble.mine { background: var(--bubble-mine); border-top-right-radius: 2px; }
.bubble.other { background: var(--bubble-other); border-top-left-radius: 2px;margin-left: 10px; }
.bubble img { max-width: 70px; max-height: 70px; border-radius: 8px; display: block; }
.bubble.img-mode { padding: 5px; background: transparent; box-shadow: none; }
.system-msg { align-self: center;
     background: linear-gradient(30deg, rgba(21, 112, 30, 0.1), rgba(10, 11, 86, 0.1));
     color: #FEF01B;
     padding: 5px 15px;
     border-radius: 15px;
     font-size: 14px;
     margin: 10px 0;
     text-align: center;
     box-shadow: var(--main-shadow);
     font-weight: 600;
 }

/* 1. 아래에서 위로 투명도와 함께 올라오는 키프레임 */
@keyframes msgSlideUp {
    0% {
        opacity: 0;
        transform: translateY(20px); /* 20px 아래에서 시작 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* 제자리로 */
    }
}

/* 2. 자바스크립트에서 붙여줄 클래스 */
.msg-animate {
    animation: msgSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
    /* cubic-bezier를 써서 기계적이지 않고 '슉~착' 하는 자연스러운 느낌을 줌 */
}

#chat-form { position: relative;
    display: flex;
     padding: 10px;
     background: var(--theme-surface,#111);
     border-top: 1px solid var(--theme-border,#151515);
     align-items: center;
     gap: 0px;
     flex: none;
 }
/* 1. 입력창: 버튼보다 아래 층(Layer)에 위치하도록 설정 */
#m {
    flex: 1;
    padding: 12px 10px;
    border: none;
    border-radius:0 9px 9px 0;
    background: rgba(30, 30, 30, 0.9);
    color: white;
    outline: none;
    padding-left: 15px; /* 버튼이 들어갈 자리 확보 */
    /* [핵심] 위치를 잡아주고 z-index를 낮게 설정 */
    position: relative; 
    z-index: 1; 
}
.btn-gif { padding: 0px; height: 43px; color: var(--theme-text,#fff); }

.btn-gif {
    /* 기존 스타일 유지 */
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-weight: 600;
    width: 42px;
    height: 40px; 
    border-radius: 9px 0 0 9px;
    cursor: pointer;
    border: none;
    position: relative; 
    z-index: 9999 !important; /* 무조건 맨 위 */
}
.btn-gif:hover { background: rgba(0, 0, 0, 0.6); }

.close-btn-mini {
    padding: 10px;
    font-weight: 400;
}
/* 롤링 애니메이션 정의 */
@keyframes scroll-warning {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

#login-warning {
  position: absolute;
    height: 90%;
    width: 96%;
    left: 2%;
    top: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--theme-surface,#000);
    cursor: pointer;
    overflow: hidden;
    z-index: 99999;
    transition: all 0.5s ease;
    border-radius: 10px;
}

/* 움직이는 그라데이션 보더 레이어 (Before) */
#login-warning::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-warning 1.5s infinite linear;
    border-radius: 10px;
}

/* 내부 검정색 배경 레이어 (After) */
#login-warning::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 3px;            /* 보더 두께 (숫자가 작을수록 얇아짐) */
    background-color: var(--theme-surface,#000);
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
}

/* 텍스트 영역 (span 또는 직접 텍스트) */
#login-warning span {      /* 텍스트가 span에 감싸져 있지 않다면 추가 권장 */
    position: relative;
    z-index: 3;
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;    /* 텍스트에 테마 그라데이션 적용 */
    font-weight: 600;
    font-size: 16px;
}

/* 호버 시: 보더가 두꺼워지며 텍스트 강조 */
#login-warning:hover::after {
    inset: 5px;            /* 호버 시 내부 검정 영역이 좁아지며 보더가 강조됨 */
}

#login-warning:hover span {
    filter: brightness(1.2); /* 호버 시 글자 밝기 강조 */
}
/* --- [모달 및 팝업] --- */
.modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);backdrop-filter: blur(5px); }
.modal-content { 
    background: rgba(0,0,0,0.7);
     margin: 10% auto;
     padding: 10px 10px 20px 10px;
     box-shadow: var(--main-shadow);
    width: 320px;
     color: var(--theme-text,#fff);
     border-radius: 15px;
     border: 1px solid var(--theme-border,#333);
     position: relative;
}

.modal h3 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid var(--main-border-color);
    padding-bottom: 10px;
    margin-bottom: 0;

    /* 🔥 텍스트 그라데이션 및 애니메이션 적용 */
    color: transparent; /* 글자색 투명화 필수 */
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
    
    /* 텍스트 가독성을 위해 폰트 굵기 조정 */
    font-weight: 700;
}
.modal input[type="text"], .modal input[type="password"],#j_email { 
    width: 90%;
    padding: 12px 10px;
    margin: 10px 0; 
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid var(--theme-border,#333);
    color: white; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px; 
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); 
}

#sendEmailCode {border:0;background:var(--main-color);color: #000 !important;background-size: 100% auto;}

#sendEmailCode:hover {background:var(--main-color);background-size: 200% auto;}

.mainbutton {background:var(--main-color);color:#000;border: 0;transition: 0.3s ease;background-size: 100% auto;}

.mainbutton:hover {background: var(--main-color);background-size: 200% auto;}

.modal button { 
    width: 90%; padding: 13px; margin-top: 10px; border-radius: 30px; 
    cursor: pointer; margin-left: auto; margin-right: auto; display: block; font-size: 16px;
}

.modal-content input[type="file"]{
    width: 85%;
    padding: 10px 10px;
    margin: 10px 0;
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid var(--theme-border,#333);
    color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}
.close-btn { background: none; color: white; border: 1px solid var(--theme-border,#333); }
.login-btn { background: none; color: white; border: 1px solid var(--theme-border,#333); }
.close-btn:hover, .login-btn:hover { background: rgba(50, 50, 50, 0.1) }

.user-table { width: 100%; border-collapse: collapse; margin-top: 0px; font-size: 12px; }
.user-table th, .user-table td { border-bottom: 1px solid var(--theme-border,#444); padding: 10px; text-align: center; }

/* 테이블 안의 버튼 디자인 */
.btn-manage {
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: 0.2s;
}

.btn-manage.edit { background: var(--main-color);color: #000; transition: all 1s ease;background-size: 100% auto;} /* 파란색 */
.btn-manage.edit:hover { background: var(--main-color);background-size: 200% auto; }

.btn-manage.del { background: none;border: 1px solid var(--theme-border,#222);transition: all 01s ease; } /* 빨간색 */
.btn-manage.del:hover { background: #a71d2a; }

.user-table th { background: var(--theme-surface,#333); }

/* style.css 파일에서 #admin-menu 부분 수정 */
#admin-menu {
    display: none;
    position: fixed;
    background: rgba(20, 20, 20, 0.95);
    color: var(--theme-text,#fff);
    border: 1px solid var(--theme-border,#333);
    border-radius: 5px;
    z-index: 20000; 
    width: 150px;
    box-shadow: var(--main-shadow);
    text-align: center;
}

/* 아래는 기존 유지 */
#admin-menu button { width: 140px; padding: 10px;color: var(--theme-text,#fff); background: rgba(0, 0, 0, 0.3); border: none; border-bottom: 1px solid var(--theme-border,#333); text-align: left; border-radius: 0px; font-weight: 600; }
#admin-menu button:last-child { border-bottom: 0px; }

.title {padding: 5px 10px;font-size: 14px;text-align: center;border-bottom: 1px solid var(--theme-border,#111);}

/* 1. 프로필 사진을 감싸는 박스 (기준점) */
.profile-box {
    position: relative;
    display: inline-block;
    width: 44px;  /* 이미지 크기보다 살짝 여유 있게 */
    height: 44px;
    display: flex;
   /* align-items: center;*/
    justify-content: center;
}

/* 2. 프로필 이미지 (기본 스타일) */
.channel-profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent; /* 평소엔 투명 테두리 */
    transition: all 0.3s ease;
    border-color: #aaa;
}

/* 텍스트 그룹 (제목 + 상태뱃지) */
.channel-text-group {
    display: flex;
    flex-direction: row;   /* ✨ 핵심: 가로 정렬로 변경 (기존 column -> row) */
    align-items: center;   /* 세로 높이 중앙 맞춤 */
    gap: 10px;             /* 제목과 뱃지 사이 간격 */
}

/* ✨ 4. 방송 중일 때 (is-live 클래스가 붙으면) */
.profile-box.is-live .channel-profile-img {
    border-color: rgba(255, 0, 0, 1); /* 형광 초록 테두리 */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); /* 초록색 빛나는 효과 */
}

/* ✨ 5. LIVE 뱃지 (평소엔 숨김) */
.live-tag-badge {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 0, 0, 1);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 7px;
    /* padding-top: 2px; */
    border-radius: 3px;
    line-height: 1;
    display: none;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 방송 중일 때만 뱃지 보임 */
.profile-box.is-live .live-tag-badge {
    display: block;
}

/* --- [모바일 반응형 최종: 투명도 0.7 적용 (화면 잘 보임)] --- */
/* =========================================================
   [PC 공통] 모바일 전용 요소는 PC에서 무조건 숨김
   (미디어 쿼리 시작하기 전에 이 코드가 있어야 PC에서 안 보입니다)
   ========================================================= */

/* [추가] 모바일 메뉴 배경 레이어 스타일 */
.menu-overlay {
    display: none;        /* 평소엔 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% 반투명 검정 */
    z-index: 9999;        /* 슬라이드 메뉴(10000) 바로 아래 */
    backdrop-filter: blur(2px); /* 배경 흐림 효과 */
}

/* 메뉴가 열릴 때 레이어 표시 */
#mobile-slide-menu.active + #menu-overlay, /* 인접 형제 선택자 사용 시 */
.menu-active-bg #menu-overlay { /* 또는 body 클래스 제어 시 */
    display: block;
}

/* 방명록 전체 컨테이너 */
#guestbook-container {
    padding: 5px 0;
    margin: 0 auto;
    color: var(--theme-text,#fff);
}

/* 상단 글쓰기 박스 */
.gb-write-box {
    padding: 5px;
    border-bottom: 1px solid var(--theme-border,#444);
    margin-bottom: 5px;
    display: flex;
    gap: 10px;
}
.gb-input {
    flex: 1;
    background: var(--theme-input,#333);
    border: none;
    color: white;
    padding: 10px;
    resize: none; /* 크기 조절 막기 */
    height: 15px;
    border-radius:20px;
    overflow-y: hidden;
    overflow-x: hidden;
}
/* 롤링 애니메이션 정의 (공통 사용 중이면 중복 선언 생략 가능) */
@keyframes scroll-gb {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.gb-btn {
    position: relative;
    display: inline-flex;   /* 중앙 정렬 */
    align-items: center;
    justify-content: center;
    min-width: 65px;        /* 버튼 최소 너비 확보 */
    height: 35px;           /* 적절한 높이 설정 */
    padding: 0 17px;        /* 기존 패딩 유지 */
    overflow: hidden;
    border-radius: 20px;    /* 기존 라운드 유지 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 움직이는 그라데이션 보더 (Before) */
.gb-btn::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-gb 1.5s infinite linear;
}

/* 내부 검정색 배경 (After) */
.gb-btn::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 2px;             /* 보더 두께 조절 */
    border-radius: 18px;    /* 내부 라운드 조절 */
    background-color: black;
    transition: inset 0.2s ease-in-out;
}

/* 버튼 텍스트 스타일 */
.gb-btn span {
    position: relative;
    z-index: 3;
    color: white;           /* 텍스트 색상 */
    font-size: 14px;        /* 기존 폰트 사이즈 유지 */
    font-weight: 600;
}

/* 호버 효과 */
.gb-btn:hover {
    transform: scale(1.05);
}

.gb-btn:hover::after {
    inset: 4px;             /* 호버 시 보더가 두꺼워짐 */
}

/* 게시글 목록 (카드 형태) */
.gb-card {
    background: none;
    border: 1px solid var(--theme-border,#161616);
    overflow: hidden;
    background: var(--theme-surface,#111);
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: 1px 1px 7px #000;
}

/* 원글 (클릭 가능한 헤더) */
    .gb-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 15px;
    }
.gb-header:hover { background: linear-gradient(30deg, #111, #000, #111); }

.gb-writer  {
    font-weight: bold;
    color: #7166ff;
    margin-right: 5px;
}
.gb-reply-cnt { color: var(--theme-muted,#aaa); font-size: 0.9em; background: var(--theme-surface,#333); padding: 0px 6px; border-radius: 10px; }
/* PC: 3개의 요소가 있지만, 줄바꿈을 허용하여 배치 변경 */
.gb-header-top {
    display: flex;             
    flex-wrap: wrap;  
    align-items: center;       
    width: 100%;               
    gap: 0; 
}

/* 1. 작성자 영역 (왼쪽 상단 배치) */
.gb-header-top > div:first-child {
    order: 1;                  /* 순서 1번 */
    display: flex;             
    align-items: center;
}

/* 2. 본문 미리보기 (아래쪽 전체 배치) */
.gb-content-preview {
    order: 3;
    width: 100%; 
    margin-top: 8px; 
    white-space: normal; 
    word-break: break-all; 
    overflow: visible; 
    text-overflow: clip;  
    color: var(--theme-text,#fff);               
    text-align: left;
    font-size: 14px;
    padding-left: 15px;
    line-height: 1.4; 
}
/* 3. 날짜 영역 (세 번째 자식) */
.gb-date {
    order: 2; 
    margin-left: auto; 
    white-space: nowrap;
    color: var(--theme-muted,#888);
    font-size: 0.9em;
}

/* 펼쳐졌을 때 내용 + 댓글 영역 */
.gb-body {
    display: none; /* 기본 숨김 */
    padding: 0 15px 15px 15px;
    background: var(--theme-surface,#141414);
    border-top: 1px solid var(--theme-border,#333);
}

/* 댓글 리스트 */
.gb-reply-row {
    position: relative;
    display: flex;
    padding: 8px;
    border-bottom: 1px solid var(--theme-border,#222);
    font-size: 0.95em;
}
.gb-reply-writer {color: #00ff1c;
    font-weight: 400;
    padding-left: 20px;}

.gb-reply-content { flex: 1; color: var(--theme-muted,#ccc); margin-left: 5px;}
.gb-del-btn { color: var(--theme-muted,#777);
     cursor: pointer;
     margin-left: 10px;
     font-size: 0.8em;
     border: 1px solid var(--theme-border,#777);
    padding: 5px 10px;
    border-radius: 20px;
}

.gb-del-btn:hover {color: var(--theme-muted,#bcbcbc);border: 1px solid #bcbcbc}

/* 댓글 입력창 (펼쳤을 때만 보임) */
.gb-reply-input-box {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* =========================================================
   [모바일 전용 스타일]
   ========================================================= */
@media screen and (orientation: portrait), screen and (max-width: 900px) {
    
    /* --- [기존 코드 유지 시작] --- */
    html, body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    .titleb::after {display: none;}
    .titleb::before {display: none;}

    /* 비디오 그리드 레이아웃 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
    gap: 10px;
    padding-top: 10px;
}







/* 비디오: 입력 중일 때 배경으로 */
    .video-section { 
        flex: none; 
        width: 100%; 
        height: auto; 
        background: var(--theme-surface,#000); 
        padding: 0; 
        z-index: 10; 
    }

    .content-tabs, 
    .tab-content-container {
        display: none !important;
    }

    #mobile-slide-menu.active ~ .menu-overlay {
        display: block !important;
    }

    .container { 
        flex-direction: column; 
        width: 100%; 
        height: 100%; 
        display: flex;
        position: relative;
    }

    #banner-area { display: none !important; }

    body.is-typing #notice-bar,
    body.is-typing #main-chat-header,
    body.gif-active #main-chat-header { 
        display: none !important; 
    }
    body.gif-active .viewer-info { display: none !important; }

    body.is-typing .container {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        height: 100%; 
        transition: none;
    }

    body.is-typing .video-section {
        position: absolute;
        top: 0; left: 0;
        z-index: 1; 
    }
    .video-wrapper { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 0;}

    .chat-section { 
        flex: 1; 
        width: 100%; 
        min-width: 0; 
        max-width: none; 
        margin: 0;
        display: flex;
        flex-direction: column;
        background: var(--theme-surface,#111); 
        position: relative; 
        overflow: hidden; 
        min-height: 0;
        z-index: 20; 
    }
    body.is-typing .chat-section {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        background: transparent; 
        z-index: 50; 
    }

    /* 메시지창: 투명도 대폭 수정 */
    #messages { 
        flex: 1 !important; 
        width: 100%;
        margin: 0; 
        border: 0; 
        padding-bottom: 70px; 
        box-sizing: border-box; 
        overflow-y: auto;
        min-height: 0;
    }
    
    /* 배경 그라데이션을 아주 연하게(0.3) 변경하여 비디오가 잘 보이게 함 */
    body.is-typing #messages {
        background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 60%);
        padding-top: 220px; 
    }
    
    body.is-typing #messages::-webkit-scrollbar { display: none; }

    /* 말풍선 투명도(0.3) 적용 + 글씨 가독성용 그림자 강화 */
    body.is-typing .msg-row .bubble {
        background: rgba(0, 0, 0, 0.6) !important; 
        backdrop-filter: blur(1px);
        color: white !important;
        border: 1px solid rgba(255,255,255,0.007);
        text-shadow: 2px 2px 2px black, -1px -1px 1px black; 
        box-shadow: none;
    }

    body.is-typing .system-msg {
        background: rgba(0, 0, 0, 0.8) !important; 
        color: #FEF01B !important;   
        border: 1px solid rgba(255, 255, 255, 0.3); 
        text-shadow: 1px 1px 2px #000;  
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }
    
    /* 닉네임도 더 투명하게 */
    body.is-typing .msg-row .nick-title {
        background: rgba(0,0,0,0.2);
        padding: 2px 6px;
        border-radius: 10px;
        text-shadow: 1px 1px 2px black;
    }

    /* 1. 기본 설정: 'is-typing' 상태일 때 9번째보다 오래된 메시지는 전부 투명하게(0) 만듬 */
body.is-typing #messages > div:nth-last-child(-n+3) {
    opacity: 1 !important;
}

body.is-typing #messages > div:nth-last-child(4) {
    opacity: 0.7 !important;
}

body.is-typing #messages > div:nth-last-child(5) {
    opacity: 0.3 !important;
}
body.is-typing #messages > div:nth-last-child(n+6) {
    opacity: 0.0 !important;
    pointer-events: none;  /* 투명해진 메시지 클릭 방지 (선택사항) */
}

body.is-typing #messages > .nick-user {font-size: 14px;}
body.is-typing #messages > .nick-title {margin-bottom: 1px;}

    /* 입력폼 */
    #chat-form { 
        position: absolute; 
        bottom: 0; left: 0; right: 0;
        z-index: 100; 
        width: 100%; 
        box-sizing: border-box;
        background: rgba(20, 20, 20, 0.85); 
        backdrop-filter: blur(5px); 
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: calc(5px + env(safe-area-inset-bottom));
    }

    #m {
        position: relative; z-index: 1; flex: 1;
        background: rgba(30, 30, 30, 0.9);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: 15px; 
    }
    .btn-gif {
        z-index: 100 !important; 
        background: rgba(0, 0, 0, 0.3);
    }

    /* 기존 유지 */
    .modal-content { margin: 15vh auto; width: 85% !important; }
    
    .auth-content { margin: 20vh auto; width: 75%; }
    #channel-title-display { font-size: 21px; padding: 0px 15px;}
    .profile-box { position: relative; display: inline-block; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
    .channel-profile-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #aaa; }
    .profile-box.is-live .channel-profile-img { box-shadow: 0 0 8px rgba(255, 0, 0, 0.5); border-color: red; }
    .gif-popover { height: 40vh; bottom: 60px; }
    #gif-results { height: calc(40vh - 100px); grid-template-columns: repeat(2, 1fr); }

    /* 1. 기존 채팅 헤더(로그인 버튼 있던 곳) 숨기기 */
    .chat-header {
        display: none !important;
    }

    /* 2. 햄버거 메뉴 버튼 (우측 상단 고정) */
    #btn-mobile-menu {
        display: block !important;
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 999;
        background: none;
        color: var(--theme-text,#fff);
        border: 0;
        padding: 8px 12px;
        font-size: 32px;
        cursor: pointer;
    }

    /* 3. 슬라이드 메뉴 패널 (우측에서 나옴) */
    #mobile-slide-menu {
        display: block !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 260px;
        height: 100%;
        background: rgba(20, 20, 20, 0.7);
        border-left: 1px solid var(--theme-border,#444);
        z-index: 10000;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.8);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
    }
    
    /* 메뉴 활성화 시 등장 */
    #mobile-slide-menu.active {
        transform: translateX(0);
    }

    /* 메뉴 내부 헤더 */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--theme-border,#444);
        padding-bottom: 15px;
        color: var(--theme-text,#fff);
    }
    .close-menu-btn {
        background: none; border: none; color: var(--theme-text,#fff); font-size: 24px; cursor: pointer;
    }

    /* 메뉴 내부 버튼 그룹 */
    .mobile-auth-group {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--theme-border,#333);
    }
    
    /* 로그인/가입 버튼 스타일 강화 */
    .mobile-auth-group button {
        width: 100%;
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
    }
    .btn-text-login { /* 기존 클래스 재사용하되 스타일 보강 */
        border: 1px solid var(--theme-border,#666) !important;
        background: rgba(255,255,255,0.05) !important;
        color: var(--theme-text,#fff);
    }
    .btn-green-join { 
        width: 100%; /* 가득 차게 */
    }

    .btn-green-join::after {border-radius: 10px; }

    /* 로그인 후 유저 정보 디자인 */
    .mobile-user-info {
        text-align: center;
        color: var(--theme-text,#fff);
    }
     .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, 0.3);
        box-shadow: inset var(--main-shadow);
    }
    
    /* 메뉴 항목 버튼들 */
    .mobile-menu-btn {
        width: 100%;
        padding: 12px;
        background: transparent;
        color: var(--theme-muted,#ccc);
        border: none;
        border-bottom: 1px solid var(--theme-border,#333);
        text-align: left;
        font-size: 15px;
        cursor: pointer;
        transition: 0.2s;
    }
    .mobile-menu-btn:hover {
        background: rgba(255,255,255,0.05);
        color: var(--theme-text,#fff);
        padding-left: 20px; /* 호버 시 살짝 이동 효과 */
    }
    .mobile-menu-btn i { width: 25px; text-align: center; margin-right: 5px; }

    .mobile-only-tabs {
        display: flex !important;
        background: var(--theme-surface,#111);
        border-bottom: 1px solid var(--theme-border,#333);
        border-top: 1px solid var(--theme-border,#333);
        flex-shrink: 0; /* 높이 고정 */
        width: 100%;
    }

    /* 텍스트 그라데이션 흐름 애니메이션 
@keyframes m-text-roll {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
*/
.m-tab-btn {
        background: none;
        border: none;
        color: var(--theme-muted,#999);
        font-weight: 600;
        cursor: pointer;
        position: relative;
        transition: 0.3s;
        overflow: hidden;
        padding: 12px 12px;
        font-size: 16px;
}

/* 활성화 상태 (글자 그라데이션 + 애니메이션) */
.m-tab-btn.active {
    color: transparent; /* 글자색 투명화 필수 */
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: m-text-roll 2s infinite linear;
}

/* 활성화 상태 하단 롤링 바 */
.m-tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    animation: text-roll 2s infinite linear;
}

/* 호버 시 부드럽게 글자색 변경 */
.m-tab-btn:hover {
    color: var(--theme-muted,#FF85B3);
}

.count-badge {
    font-size: 14px;
    color: #888;
    font-weight: 100;
}

/* 활성화된 탭의 숫자도 테마 그라데이션 적용 */
.m-tab-btn.active .count-badge,.m-tab-btn:hover > .count-badge {
    color: transparent;
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
}

    /* 2. 패널 제어: messages와 mobile-panel 전환 */
    .m-tab-panel { 
        display: none !important; 
        width: 100%;
        margin: 0;
        border: 0;
    }

    /* 채팅창 활성화 (기존 flex 구조 유지) */
    #messages.active { 
        display: flex !important; 
        flex: 1;
    }

    /* 리스트 패널 활성화 */
    #mobile-panel.active {
        display: block !important;
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        box-sizing: border-box;
    }

    /* 채팅 탭이 아닐 때 하단 폼과 플로팅 버튼 숨김 처리 (선택) */
    body.tab-not-chat #chat-form { display: none !important; }

/* 1. 헤더 전체: 위아래로 쌓이도록 변경 */
    .gb-header {
        display: flex;
        flex-direction: column; /* 세로 정렬 (Column) */
        align-items: flex-start;
        gap: 6px; /* 윗줄과 아랫줄 사이 간격 */
        padding: 12px 15px; /* 모바일에 맞는 패딩 조절 */
    }

  /* 3개의 자식 요소를 감싸는 부모 */
.gb-header-top {
    display: flex;             /* 가로 정렬의 핵심 */
    align-items: center;       /* 세로 중앙 정렬 */
    width: 100%;               /* 전체 너비 사용 */
    gap: 10px;                 /* 요소 사이 간격 */
}

    /* 3. 하단 내용 (미리보기): 아랫줄로 내리기 */
    .gb-content-preview {
        display: block;
        width: 100%;
        text-align: left; /* 왼쪽 정렬 */
        color: var(--theme-text,#fff); /* 글자색 */
        margin-top: 2px;
        text-overflow: ellipsis;
    }

    .reply-del-btn {
        position: absolute !important;
        right: 0px !important;
        top: 5px !important;}

    .gb-reply-content {margin-right: 50px;}

}

/* 모바일 가로 전용 */ 
@media screen and (orientation: landscape) and (max-width: 900px) {

  html, body {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
  }

}
.viewer-right-group {
    display: flex;          /* 가로 배치 (이게 없으면 줄바꿈됨) */
    align-items: center;    /* 수직 중앙 정렬 */
    gap: 8px;              /* 시청자 수와 공유 버튼 사이 간격 */
}

/* --- 공유 버튼 및 팝업 스타일 --- */
.share-wrapper {
    margin-left: 0; /* 그룹 내부 gap으로 간격 조절하므로 margin 제거 */
    display: flex;
    align-items: center;
}

/* 공유 아이콘 버튼 */
.btn-share-icon {
    background: none;
    border: none;
    color: var(--theme-muted,#ccc);
    font-size: 16px;
    cursor: pointer;
    padding: 5px 5px 5px 10px;
    transition: color 0.2s;
    position: relative;
}
.btn-share-icon:hover { color: var(--theme-text,#fff); }

/* 팝업 메뉴 박스 (이미지와 유사하게 디자인) */
.share-popup {
    display: none; /* 평소엔 숨김 */
    position: absolute;
    bottom: 40px; /* 버튼 위로 띄움 */
    right: 5px;     /* 오른쪽 정렬 */
    width: 260px;
    background: var(--theme-surface,#1f1f1f);
    border: 1px solid var(--theme-border,#333);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 100;
    flex-direction: column;
    color: var(--theme-text,#fff);
}
.share-popup.active { display: flex; } /* 활성화 시 보임 */

/* 팝업 헤더 텍스트 "공유:" */
.share-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--theme-text,#eee);
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

/* 아이콘들 가로 배치 */
.share-items {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* 개별 아이템 (아이콘+텍스트) */
.share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 1;
}
.share-item:hover .share-icon-circle {
    background: var(--theme-surface,#333);
    transform: translateY(-2px);
}

/* 동그란 아이콘 배경 */
.share-icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--theme-surface,#2a2a2a); /* 약간 밝은 회색 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 20px;
    transition: all 0.2s;
}

/* 텍스트 라벨 */
.share-item span {
    font-size: 12px;
    color: var(--theme-muted,#bbb);
}

/* PIP(작은 화면) 버튼 스타일 */
.btn-pip-icon {
    background: none;
    border: none;
    color: var(--theme-muted,#ccc);
    font-size: 16px; 
    cursor: pointer;
    padding: 5px 5px 5px 10px;
    transition: all 0.2s;
    position: relative;
}

.btn-pip-icon:hover {
    color: var(--theme-text,#fff);
    transform: scale(1.1);
}

/* 활성화되었을 때 (파란색 포인트) */
.btn-pip-icon.active {
    color: #4dabf7; /* 밝은 파란색 */
    text-shadow: 0 0 5px rgba(77, 171, 247, 0.6);
}

/* 팝업창 본체 */
.gif-popover {
    display: none;        /* 평소엔 숨김 */
    position: absolute;   /* 채팅폼 기준으로 위치 잡기 */
    bottom: 100%;         /* 🔥 폼 바로 윗부분에 배치 */
    left: 0;
    width: 98%;          /* 폼 너비와 똑같이 */
    height: 275px;        /* 적당한 높이 */
    background: rgba(20, 20, 20, 0.95); /* 진한 배경 */
    border-top: 1px solid var(--theme-border,#444);
    border-radius: 15px 15px 0 0; /* 위쪽만 둥글게 */
    padding: 5px;
    box-sizing: border-box;
    left: 1%;
    z-index: 1000;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

/* 헤더 (제목 + 닫기버튼) */
.gif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    color: var(--theme-text,#fff);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--theme-border,#333);
    padding: 0px 10px;
}

.close-btn-mini {
    background: none;
    border: none;
    color: var(--theme-text,#fff);
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
}
.close-btn-mini:hover { color: var(--theme-text,#fff); }

/* 검색창 영역 */
.gif-search-row {
    display: flex;
    gap: 0px;
    margin-bottom: 10px;
}

.gif-search-row input {
    flex: 1;
    padding: 8px 10px;
    border-radius: 9px 0 0 9px;
    border: 1px solid var(--theme-border,#222);
    background: var(--theme-input,#333);
    color: var(--theme-text,#fff);
    border-right: 0;
}

.gif-search-row button {
    width: 70px;
    background: var(--theme-input,#222); /* 핑크색 포인트 */
    color: var(--theme-text,#fff);
    border: 1px solid var(--theme-border,#222);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    cursor: pointer;
    font-weight: 600;
}

/* 검색 결과 그리드 (이미지 나열) */
#gif-results {
    height: 200px;          /* 스크롤 영역 높이 */
    overflow-y: auto;       /* 세로 스크롤 허용 (내용 넘치면 스크롤바 생김) */
    overflow-x: hidden;     /* 🔥 가로 스크롤은 무조건 숨김 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 한 줄에 3개씩 꽉 차게 배치 */
    gap: 5px;               /* 이미지 사이 간격 */
    width: 100%;            /* 부모 너비에 딱 맞춤 */
    box-sizing: border-box; /* 패딩/테두리 포함해서 너비 계산 */
}

/* 결과 이미지 스타일 */
#gif-results img {
    width: 100%;
    height: 80px;
    object-fit: cover;   /* 꽉 차게 */
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}
#gif-results img:hover {
    border-color: var(--main-color);
}

.fa-user-shield {color: #55ff4f;}

/* 아이콘 자체에서 빛이 흐르는 효과 */
.shine-text {
    position: relative;
    display: inline-block;
    /* 배경을 글자 모양으로 자름 */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    /* 기본 배경색 + 움직이는 빛(사선) */
    background-repeat: no-repeat;
    background-image: linear-gradient(
        110deg, 
        rgba(255,255,255,0) 30%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0) 70%
    );
    background-size: 200% 100%;
    animation: text-shine 1s linear infinite;
    text-shadow: 0px 1px 1px rgb(0 0 0 /0.3);
}

@keyframes text-shine {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

/* --- 투표 오버레이 (채팅창 상단) --- */
.vote-overlay {
    position: sticky; 
    top: 0; /* 스크롤 시 최상단 고정 */
    z-index: 8; /* 공지바(z-index:9)보다 아래에 위치해서 버튼 클릭 방해 안 함 */
    background: rgba(20, 20, 20, 0.60);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    transition: all 0.3s ease;
    margin-right: 50px;      /* 오른쪽 공지 버튼 공간 확보 */
    margin-top: -55px;       /* 🔥 위쪽으로 끌어올려서 공지바 빈 공간 덮어쓰기 (높이 조절 필요시 숫자 변경) */
    margin-bottom: auto;     /* 🔥 채팅이 적어도 투표창은 항상 맨 위에 붙어있게 밀어내기 */
    margin-left: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    overflow: hidden;
    flex: none;
}
.vote-header {
    background: rgba(35, 38, 41, 0.4);
    color: var(--theme-text,#fff);
    padding: 8px 12px;
    font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
}
.vote-fold-btn { background: none; border: none; color: var(--theme-text,#fff); cursor: pointer; font-size: 14px; }
.vote-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.vote-body.collapsed { display: none; } /* 접혔을 때 숨김 */

/* Moderator actions inside the chat poll. */
#vote-admin-controls {
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
#vote-admin-controls > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#vote-admin-controls .btn-vote-end {
    flex: 1;
    color: var(--theme-text,#fff);
    background: linear-gradient(110deg, #8734c7, #a13d96);
    border-color: #b55be0;
}
#vote-admin-controls .btn-vote-end:hover {
    background: linear-gradient(110deg, #9a40db, #b247a6);
    box-shadow: 0 2px 10px #a538f333;
}
#vote-admin-controls .btn-vote-cancel {
    flex: 0 0 auto;
    color: var(--theme-text,#e2dce7);
    background: var(--theme-surface,#29252e);
    border-color: var(--theme-border,#4b4254);
}
#vote-admin-controls .btn-vote-cancel:hover {
    color: var(--theme-text,#fff);
    background: var(--theme-surface,#39303f);
    border-color: #86738f;
}
#vote-admin-controls > button:focus-visible {
    outline: 2px solid #e3b7ff;
    outline-offset: 2px;
}
#vote-admin-controls > button:active { box-shadow: inset 0 2px 4px #0005; }

/* 투표 항목 */
.vote-item {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    padding: 8px 10px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--theme-border,#444);
    transition: 0.2s;
}
.vote-item:hover { border-color: var(--theme-border,#666); }

/* 투표 그래프 (배경) */
.vote-bar {
    position: absolute; top: 0; left: 0; height: 100%;
    background: rgba(45, 126, 255, 0.3); /* 파란색 반투명 */
    width: 0%;
    transition: width 0.5s ease;
    z-index: 0;
}
.vote-text-wrap {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between;
    font-size: 13px;
}

/* 투표하기 버튼 (유저용) */
/* 롤링 애니메이션 정의 (공통 사용 중이면 중복 선언 생략 가능) */
@keyframes scroll-vote {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.btn-do-vote {
    position: relative;
    display: inline-flex;   /* 중앙 정렬 */
    align-items: center;
    justify-content: center;
    width: 100%;            /* 기존 너비 유지 */
    height: 40px;           /* 적절한 높이 설정 */
    margin-top: 5px;        /* 기존 마진 유지 */
    overflow: hidden;
    border-radius: 20px;    /* 기존 라운드 유지 */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 움직이는 그라데이션 보더 (Before) */
.btn-do-vote::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-vote 1.5s infinite linear;
}

/* 내부 검정색 배경 (After) */
.btn-do-vote::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 2px;             /* 보더 두께 */
    border-radius: 18px;
    background-color: black;
    transition: inset 0.2s ease-in-out;
}

/* 버튼 텍스트 스타일 */
.btn-do-vote span {
    position: relative;
    z-index: 3;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* 호버 효과 */
.btn-do-vote:hover {
    box-shadow: 0 0 10px rgba(153, 0, 240, 0.4);
}

.btn-do-vote:hover::after {
    inset: 4px;             /* 호버 시 보더가 두꺼워짐 */
}

/* 생성 모달 인풋 */
.vote-input-row { display: flex; gap: 5px; margin-bottom: 5px; }
.vote-input-row input { flex: 1; margin: 0 !important; }

/* --- 결과 메시지 스타일 --- */
.vote-result-box {
    background: none;
    border: 0;
    padding: 0;
    color: var(--theme-text,#fff); font-size: 13px;
}
.vote-res-row {
    display: flex; justify-content: space-between;
    margin-top: 5px; border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 2px;
}
.vote-res-row:last-child {border-bottom:0}

/* 1. PC에서는 햄버거 버튼과 슬라이드 메뉴를 무조건 숨김 */
#btn-mobile-menu, #mobile-slide-menu {
    display: none;
}

/* 1. 빛나는 애니메이션 정의 */
@keyframes vote-glow {
    0% { box-shadow: 0 0 0 0 #f80137; border-color: #fff; }
    70% { box-shadow: 0 0 0 15px rgba(45, 126, 255, 0); border-color:#f80137; }
    100% { box-shadow: 0 0 0 0 rgba(45, 126, 255, 0); border-color: #fff; }
}

/* 2. 유저가 접었을 때 투표창 스타일 변경 */
.vote-overlay.user-collapsed {
    width: 40px;       /* 원형 너비 */
    height: 40px;      /* 원형 높이 */
    padding: 0;        /* 패딩 제거 */
    border-radius: 50%;/* 완전한 원 */
    background: rgba(35, 38, 41, 0.9); 
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vote-glow 2s infinite;
    border: 2px solid var(--main-color);
}

/* 3. 접혔을 때 내부 요소 숨기기/조정 */
.vote-overlay.user-collapsed .vote-header {
    background: transparent;
    padding: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
}

/* 제목 숨기기 */
.vote-overlay.user-collapsed #vote-title-disp { 
    display: none !important; 
}

/* 접기 버튼(아이콘) 스타일 조정 - 중앙 정렬 */
.vote-overlay.user-collapsed .vote-fold-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; 
    color: #f80137;
    padding: 0; margin: 0; /* 여백 제거 */
}

.vote-overlay.user-collapsed #vote-body {
    display: none !important;
}

/* 툴팁 박스 설정 */
.titleb::after {
    content: attr(data-tooltip); /* 속성값을 텍스트로 사용 */
    position: absolute;
    bottom: 95%; /* 버튼 위쪽에 배치 */
    left: -10%;
    transform: translateX(-50%);
    background: var(--theme-surface,#333);
    color: var(--theme-text,#fff);
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease; /* 0.1초 만에 즉시 표시 */
}

/* 마우스 올렸을 때 즉시 노출 */
.titleb:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 말풍선 삼각형 꼬리 (선택 사항) */
.titleb::before {
    content: '';
    position: absolute;
    bottom: 70%;
    left: 45%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease;
}

.titleb:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   🚀 [스트리머 스튜디오 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;
}

/* ========================================================== */
/* 스트리머 방송국 전용 툴바, 플로팅 도구 및 컨트롤 스타일 */
/* ========================================================== */
.admin-gear-btn, .admin-s-btn {
    font-size: 15px;
    color: var(--theme-muted,#a970ff);
    cursor: pointer;
    margin-left: 5px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.admin-gear-btn:hover {
    color: var(--theme-text,#fff);
    background: rgba(169, 112, 255, 0.25);
    transform: rotate(30deg);
}
.admin-s-btn:hover {
    color: #2ed573;
    background: rgba(46, 213, 115, 0.25);
}

#admin-toolbar {
    display: none;
    background: rgba(18, 18, 24, 0.96);
    border-bottom: 1px solid rgba(169, 112, 255, 0.35);
    padding: 7px 10px;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 20;
}
#admin-toolbar.active {
    display: flex;
    animation: fadeInSlideDown 0.25s ease forwards;
}

.btn-admin-tool {
    background: var(--theme-surface,#22232e);
    color: var(--theme-text,#ddd);
    border: 1px solid var(--theme-border,#36374a);
    border-radius: 6px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.btn-admin-tool i {
    color: var(--theme-muted,#a970ff);
    font-size: 13px;
}
.btn-admin-tool:hover {
    background: var(--theme-surface,#2e3040);
    color: var(--theme-text,#fff);
    border-color: #a970ff;
    box-shadow: 0 0 10px rgba(169, 112, 255, 0.35);
}

/* 플로팅 도구 버튼 (투표, 채팅 청소) */
#btn-vote-manage, #btn-clear-float {
    display: none;
    position: absolute;
    z-index: 15;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(25, 25, 35, 0.88);
    color: var(--theme-muted,#a970ff);
    cursor: pointer;
    font-size: 13px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}
#btn-vote-manage {
    right: 48px;
    bottom: 58px;
}
#btn-clear-float {
    right: 10px;
    bottom: 58px;
}
#btn-vote-manage:hover {
    background: #a970ff;
    color: var(--theme-text,#fff);
    transform: scale(1.1);
}
#btn-clear-float:hover {
    background: #ff4757;
    color: var(--theme-text,#fff);
    transform: scale(1.1);
}

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


/* ===== 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: center; }
.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 { padding: 22px 26px 18px; border-bottom: 1px solid var(--shell-border); }
.channel-page #channel-title-display { position: static; display: flex; align-items: center; width: 100%; padding: 0; margin: 0; gap: 16px; 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; flex: 1; }
.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-status { font-size: 9px; padding: 3px 6px; }
.channel-page #title-status.on { background: #9900f0; }
.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 { position: static; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; min-height: 28px; height: auto; padding: 12px 0 0 74px; background: none; border: 0; box-shadow: none; }
.channel-page .viewer-right-group { margin-left: auto; display: flex; gap: 15px; }
.channel-page .viewer-count { font-size: 11px; color: var(--theme-muted,#b6aaba); white-space: nowrap; }
.channel-page .viewer-num, .channel-page .viewer-count > i { color: var(--theme-muted,#f099c5); }
.channel-page .btn-share-icon, .channel-page .btn-pip-icon { font-size: 15px; }
.channel-page #mobile-contact-btn { font-size: 11px; }
.channel-page #btn-mobile-menu { display: none; }

.channel-page #admin-toolbar { flex-shrink: 0; padding-left: 26px; padding-right: 26px; background: var(--theme-surface,#141017); }
.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%; padding: 12px; min-height: 68px; flex: none; background: var(--theme-surface,#19151d); border-top: 1px solid var(--shell-border); }
.channel-page #m { font-size: 12px; background: var(--theme-input,#28212e); }
.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: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; }
.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 red; box-shadow: none; animation: none; }
.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; }
.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 #ff7ea2; box-shadow: 0 0 0 2px #ff466425, 0 0 10px #ff497650; animation: channel-live-glow 2.4s ease-in-out infinite; }
.channel-page .directory-live-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 1px 4px; border-radius: 3px; background: linear-gradient(110deg, #ff3e50, #f46b9f); color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .3px; border: 1px solid #ff9cb6; }
@keyframes channel-live-glow { 0%, 100% { box-shadow: 0 0 0 2px #ff466425, 0 0 8px #ff497650; } 50% { box-shadow: 0 0 0 2px #ff466445, 0 0 15px #ff497685; } }
@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 .directory-channel.is-live .directory-avatar img { 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; }
.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; width: 45px; height: 45px; border: 0; border-radius: 50%; color: white; box-shadow: 0 4px 6px #000; z-index: 10; transition: .2s; }
.channel-page #btn-vote-manage { bottom: 125px; background: linear-gradient(30deg,#f6b6ff80,#a538f380); font-size: 20px; }
.channel-page #btn-clear-float { bottom: 70px; background: linear-gradient(30deg,#ff90904d,#ff4a4a4d); font-size: 18px; }
.channel-page #btn-vote-manage:hover { background: var(--main-color); transform: scale(1.1); }
.channel-page #btn-clear-float:hover { background: linear-gradient(30deg,#ff6161,#c02020); transform: scale(1.1); }
@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 .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: .6; cursor: wait; }
.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.sidebar-collapsed .channel-sidebar { display: block; margin-left: calc(-1 * var(--sidebar-width)); opacity: 0; visibility: hidden; pointer-events: none; transition: margin-left .3s ease, opacity .3s ease, visibility 0s .3s; }
}
@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; }
}
@media (prefers-reduced-motion: reduce) { .channel-page .channel-sidebar, .channel-page.sidebar-collapsed .channel-sidebar, .channel-page.sidebar-open .channel-sidebar { transition: none; } }

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

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


/* ===== 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;
}
:root[data-theme="light"] .channel-page .sidebar-menu-link > .sidebar-live-icon {
    background: var(--theme-muted,#655970);
}
.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-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; }


/* ===== station-tabs.css ===== */
/* Original guestbook and media cards, scoped to the station tabs. */
.channel-page #tabs-area .tab-btn {
    background: none;
    border: none;
    color: var(--theme-muted,#999);
    cursor: pointer;
    padding: 0 15px 8px 15px;
    position: relative;
    transition: 0.3s;
    overflow: hidden;
}
.channel-page #tabs-area .tab-btn.active {
    color: transparent; 
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
}
.channel-page #tabs-area .tab-btn.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;
}
.channel-page #tabs-area .tab-btn:hover {
    color: var(--theme-muted,#FF85B3);
}
.channel-page #tabs-area .count-badge {
    font-size: 14px;
    color: #888;
    font-weight: 100;
}
.channel-page #tabs-area .tab-btn.active .count-badge, .channel-page #tabs-area .tab-btn:hover > .count-badge {
    color: transparent;
    background: linear-gradient(to right, #9900F0, #FF85B3, #9900F0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-roll 5s infinite linear;
}
.channel-page #tabs-area #guestbook-container {
    padding: 5px 0;
    margin: 0 auto;
    color: var(--theme-text,#fff);
}

.channel-page #tabs-area .gb-input {
    border: none;
    color: white;
    padding: 10px; 
    height: 15px;
    overflow-y: hidden;
    overflow-x: hidden;
}
.channel-page #tabs-area .gb-btn {
    position: relative;
    display: inline-flex;   
    align-items: center;
    justify-content: center;
    min-width: 65px;           
    padding: 0 17px;        
    overflow: hidden;
    border-radius: 20px;    
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.channel-page #tabs-area .gb-btn::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-gb 1.5s infinite linear;
}
.channel-page #tabs-area .gb-btn::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 2px;             
    border-radius: 18px;    
    background-color: black;
    transition: inset 0.2s ease-in-out;
}
.channel-page #tabs-area .gb-btn span {
    position: relative;
    z-index: 3;
    color: white;           
    font-size: 14px;        
    font-weight: 600;
}
.channel-page #tabs-area .gb-btn:hover {
    transform: scale(1.05);
}
.channel-page #tabs-area .gb-btn:hover::after {
    inset: 4px;             
}
.channel-page #tabs-area #gb-list {padding: 10px;
    border-radius: 10px;
    background: var(--theme-bg,#111);
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 1);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
    margin-bottom: 10px;
}
.channel-page #tabs-area .gb-card {
    background: none;
    border: 1px solid var(--theme-border,#161616);
    overflow: hidden;
    background: var(--theme-bg,#111);
    margin-bottom: 10px;
    border-radius: 12px;
    box-shadow: 1px 1px 7px #000;
}
.channel-page #tabs-area .gb-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 15px;
    }
.channel-page #tabs-area .gb-header:hover { background: linear-gradient(30deg, #111, #000, #111);  }
.channel-page #tabs-area .gb-writer {
    font-weight: bold;
    color: #7166ff;
    margin-right: 5px;
}
.channel-page #tabs-area .gb-reply-cnt { color: var(--theme-muted,#aaa); font-size: 0.9em; background: var(--theme-surface,#333); padding: 0px 6px; border-radius: 10px; }
.channel-page #tabs-area .gb-header-top {
    display: flex;             
    flex-wrap: wrap;           
    align-items: center;       
    width: 100%;               
    gap: 0;                    
}
.channel-page #tabs-area .gb-header-top > div:first-child {
    order: 1;                  
    display: flex;             
    align-items: center;
}
.channel-page #tabs-area .gb-content-preview {
    order: 3;                  
    width: 100%;               
    margin-top: 8px;           
    white-space: normal;       
    word-break: break-all;     
    overflow: visible;         
    text-overflow: clip;       
    color: var(--theme-text,#fff);               
    text-align: left;
    font-size: 14px;
    padding-left: 15px;
    line-height: 1.4;          
}
.channel-page #tabs-area .gb-date {
    order: 2;                  
    margin-left: auto;         
    white-space: nowrap;
    color: var(--theme-muted,#888);
    font-size: 0.9em;
}
.channel-page #tabs-area .gb-body {
    display: none; 
    padding: 0 15px 15px 15px;
    background: var(--theme-surface,#141414);
    border-top: 1px solid var(--theme-border,#333);
}
.channel-page #tabs-area .gb-reply-row {
    position: relative;
    display: flex;
    padding: 8px;
    border-bottom: 1px solid var(--theme-border,#222);
    font-size: 0.95em;
}
.channel-page #tabs-area .gb-reply-writer {color: #00ff1c;
    font-weight: 400;
    padding-left: 20px;}
.channel-page #tabs-area .gb-reply-content { flex: 1; color: var(--theme-muted,#ccc); margin-left: 5px;}
.channel-page #tabs-area .gb-del-btn { color: var(--theme-muted,#777);
     cursor: pointer;
     margin-left: 10px;
     font-size: 0.8em;
     border: 1px solid var(--theme-border,#777);
    padding: 5px 10px;
    border-radius: 20px;
}
.channel-page #tabs-area .gb-del-btn:hover {color: var(--theme-muted,#bcbcbc);border: 1px solid #bcbcbc}
.channel-page #tabs-area .gb-reply-input-box {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.channel-page #tabs-area { display: flex; flex-direction: column; padding: 0; margin: 0 !important; width: 100%; min-height: 390px; flex: 1 0 auto; background: var(--theme-bg,#000); box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.channel-page #tabs-area .content-tabs { position: sticky; top: 0; bottom: auto; z-index: 10; display: flex; gap: 10px; padding: 10px 0 0; background: var(--theme-surface,#151515); border-bottom: 1px solid var(--theme-border,#333); }
.channel-page #tabs-area .tab-btn { flex: none; padding: 0 15px 8px; font-size: 18px; font-weight: 600; }
.channel-page #tabs-area .tab-content-container { flex: 1; padding: 0 2px 10px; margin: 0; min-height: 390px; background: rgba(20,20,20,.9); }
.channel-page #tabs-area .gb-write-box { display: flex; align-items: center; gap: 10px; padding: 5px; margin-bottom: 5px; border: 0; border-bottom: 1px solid var(--theme-border,#444); border-radius: 0; background: transparent; }
.channel-page #tabs-area .gb-input { box-sizing: border-box; flex: 1; min-width: 0; height: 35px; min-height: 35px; padding: 8px 10px; margin: 0; line-height: 19px; font-size: 13px; background: var(--theme-input,#333); border: 0; border-radius: 20px; resize: none; overflow: hidden; }
.channel-page #tabs-area .gb-btn { flex: none; height: 35px; }
.channel-page #tabs-area #gb-list { max-height: none; }
/* Original interaction: lift the panel over the player without scrolling it. */
@media (min-width:901px) {
    .channel-page .video-section { overflow-anchor: none; padding-bottom: 0; background: var(--theme-surface,#141414); }
    .channel-page .channel-summary { position: relative; z-index: 0; }
    .channel-page #tabs-area { position: relative; z-index: 9; background: var(--theme-surface,#141414); transition: none; }
    .channel-page #tabs-area.tabs-raised {
        margin-top: calc(-1 * var(--station-panel-lift, 0px)) !important;
        height: var(--station-panel-height);
        min-height: var(--station-panel-height);
        flex: none;
    }
    .channel-page #tabs-area.tabs-raised .content-tabs { flex-shrink: 0; }
    .channel-page #tabs-area.tabs-raised .tab-content-container { min-height: 0; max-height: none; background: var(--theme-surface,#141414); }
    .channel-page #tabs-area .tab-content-container { max-height: 440px; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .channel-page #tabs-area { transition: none; animation: none; } }

.channel-page #tabs-area #uploadVideo { position: relative; top: -4px; flex: none; margin: 0 8px 0 auto; align-self: center; }
.channel-page #tabs-area #uploadVideo[hidden] { display: none !important; }

/* Mobile uses the tabs in the chat section; the desktop panel must not reserve space. */
@media (max-width: 900px) {
    .channel-page #tabs-area { display: none; }
}

@media (max-width:900px) {
    .channel-page #mobile-panel .gb-write-box { align-items:center; }
    .channel-page #mobile-panel .gb-input {
        box-sizing:border-box; min-width:0; height:36px !important; min-height:36px;
        padding:8px 10px; margin:0; line-height:20px; font-size:13px;
        resize:none; overflow:auto;
    }
    .channel-page #mobile-panel .gb-write-box > .gb-btn { flex-shrink:0; }
}

.channel-page :is(#gb-list, #m-gb-list) { min-height:300px; }
.channel-page .guestbook-empty { min-height:300px; margin:0; padding:20px; display:flex; align-items:center; justify-content:center; color:var(--theme-muted,#aaa); font-size:14px; text-align:center; box-sizing:border-box; }

.channel-page .video-grid > .media-empty { grid-column:1 / -1; width:100%; margin:0; padding:20px; text-align:center; color:var(--theme-muted,#888); box-sizing:border-box; }


/* ===== media-card-theme.css ===== */
/* Station replay/video cards. Shared by desktop and mobile renderers. */
.channel-page :is(#tabs-area, #main-chat-sec) .video-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
    gap:24px 16px; padding:12px 10px;
}
.channel-page :is(#tabs-area, #main-chat-sec) .video-card {
    position:relative; min-width:0; border:0; border-radius:12px;
    background:transparent; box-shadow:none; overflow:visible; cursor:pointer;
}
.channel-page :is(#tabs-area, #main-chat-sec) .thumb-wrap {
    position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
    border-radius:12px; background:#211b27; isolation:isolate;
}
.channel-page :is(#tabs-area, #main-chat-sec) .thumb-wrap > img {
    display:block; width:100%; height:100%; object-fit:cover;
    transition:transform .2s ease,filter .2s ease;
}
.channel-page :is(#tabs-area, #main-chat-sec) .video-card:is(:hover,:focus-within) .thumb-wrap > img { transform:scale(1.025); filter:brightness(.88); }
.channel-page :is(#tabs-area, #main-chat-sec) :is(.media-kind-badge,.video-duration) {
    position:absolute; z-index:2; padding:4px 6px; border-radius:5px;
    font-size:11px; line-height:1.2; font-weight:700; pointer-events:none;
}
.channel-page :is(#tabs-area, #main-chat-sec) .media-kind-badge { top:8px; left:8px; background:#26152eef; color:#f3bcff; letter-spacing:.6px; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-duration { bottom:8px; right:8px; background:#000c; color:#fff; font-variant-numeric:tabular-nums; }
.channel-page :is(#tabs-area, #main-chat-sec) .media-play-button {
    position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center;
    padding:0; margin:0; border:0; background:transparent; cursor:pointer; border-radius:12px;
}
.channel-page :is(#tabs-area, #main-chat-sec) .media-play-button span {
    display:grid; place-items:center; width:42px; height:42px; padding-left:2px; box-sizing:border-box;
    border-radius:50%; background:#17111dcc; color:#fff; font-size:18px;
    opacity:0; transform:scale(.92); transition:opacity .2s,transform .2s;
}
.channel-page :is(#tabs-area, #main-chat-sec) .video-card:is(:hover,:focus-within) .media-play-button span { opacity:1; transform:scale(1); }
.channel-page :is(#tabs-area, #main-chat-sec) .video-info-meta {
    position:relative; display:flex; align-items:flex-start; gap:10px; padding:10px;
    box-sizing:border-box; min-width:0;
}
.channel-page :is(#tabs-area, #main-chat-sec) .media-channel-avatar { width:36px; height:36px; flex:0 0 36px; object-fit:cover; border-radius:50%; border:1px solid var(--theme-border,#48334e); box-sizing:border-box; }
.channel-page :is(#tabs-area, #main-chat-sec) .media-card-copy { flex:1; min-width:0; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-info-meta:has(.admin-vod-wrapper) .media-card-copy { padding-right:26px; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-title {
    display:block; white-space:nowrap; text-overflow:ellipsis;
    overflow:hidden; margin:0 0 5px;
    font-size:15px; font-weight:700; line-height:1.4; color:var(--theme-text,#f4f0f6); transition:color .15s;
}
.channel-page :is(#tabs-area, #main-chat-sec) .video-card:is(:hover,:focus-within) .video-title { color:var(--theme-muted,#f3b5e0); }
.channel-page :is(#tabs-area, #main-chat-sec) .media-details-row { display:flex; align-items:center; gap:8px; width:100%; min-width:0; }
.channel-page :is(#tabs-area, #main-chat-sec) .media-channel-name { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--theme-muted,#bab2c1); font-size:13px; line-height:1.4; }
.channel-page :is(#tabs-area, #main-chat-sec) .media-card-stats { display:flex; min-width:0; max-width:70%; flex-shrink:1; align-items:center; gap:5px; margin-left:auto; white-space:nowrap; }
.channel-page :is(#tabs-area, #main-chat-sec) :is(.media-card-stats .media-view-count,.video-date) { position:static; font-size:12px; line-height:1.4; font-weight:400; color:var(--theme-muted,#8f8797); text-shadow:none; }
.channel-page :is(#tabs-area, #main-chat-sec) .media-card-stats .media-view-count { flex-shrink:0; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-date { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-date::before { content:'·'; margin-right:5px; }
/* Owner actions remain separate from the thumbnail's playback target. */
.channel-page :is(#tabs-area, #main-chat-sec) .vod-more-btn {
    position:absolute; right:4px; top:8px; width:28px; height:30px; margin:0; padding:0;
    display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#bdb4c6; font-size:16px; cursor:pointer;
}
.channel-page :is(#tabs-area, #main-chat-sec) .vod-more-btn:hover { background:var(--theme-surface,#312535); color:var(--theme-text,#fff); }
.channel-page :is(#tabs-area, #main-chat-sec) .admin-vod-controls { position:absolute; top:40px; right:4px; width:132px; z-index:5; visibility:hidden; pointer-events:none; }
.channel-page :is(#tabs-area, #main-chat-sec) .admin-vod-controls.active { visibility:visible; pointer-events:auto; }
.channel-page :is(#tabs-area, #main-chat-sec) .video-card:has(.admin-vod-controls.active) { z-index:6; }
.channel-page :is(#tabs-area, #main-chat-sec) .vod-menu-layer { display:grid; gap:3px; padding:5px; border:1px solid var(--theme-border,#493550); border-radius:9px; background:var(--theme-surface,#211925); box-shadow:0 8px 24px #0006; }
.channel-page :is(#tabs-area, #main-chat-sec) .vod-menu-layer button {
    display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:8px 10px; margin:0;
    border:0; border-radius:5px; background:transparent; color:var(--theme-text,#eee6f2); font-size:13px; cursor:pointer;
}
.channel-page :is(#tabs-area, #main-chat-sec) .vod-menu-layer button:hover { background:var(--theme-surface,#38283f); }
.channel-page :is(#tabs-area, #main-chat-sec) .vod-menu-layer .vod-delete-btn { color:var(--theme-muted,#ff9eae); }
.channel-page :is(#tabs-area, #main-chat-sec) button:focus-visible { outline:2px solid #dba0f0; outline-offset:-2px; }
@media(max-width:900px) {
    .channel-page :is(#tabs-area, #main-chat-sec) .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; padding:10px 0; }
    .channel-page :is(#tabs-area, #main-chat-sec) .video-info-meta { gap:6px; }
    .channel-page :is(#tabs-area, #main-chat-sec) .media-channel-avatar { width:28px; height:28px; flex-basis:28px; }
    .channel-page :is(#tabs-area, #main-chat-sec) .video-title { font-size:13px; }
    .channel-page :is(#tabs-area, #main-chat-sec) :is(.media-channel-name,.media-card-stats .media-view-count,.video-date) { font-size:11px; }
    .channel-page :is(#tabs-area, #main-chat-sec) .media-card-stats { gap:2px 5px; }
    .channel-page :is(#tabs-area, #main-chat-sec) :is(.media-card-stats .media-view-count,.video-date) { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
    .channel-page :is(#tabs-area, #main-chat-sec) :is(.thumb-wrap > img,.media-play-button span,.video-title) { transition:none; }
}
#media-edit-modal .modal-content { width: 420px; max-width: calc(100vw - 32px); padding: 22px; border: 1px solid var(--theme-border,#51415d); border-radius: 16px; background: var(--theme-surface,#19151e); color: var(--theme-text,#fff); }
#media-edit-modal h3 { margin: 0 0 18px; font-size: 20px; }
#media-edit-modal label { display:block; margin:14px 0 8px; font-size:14px; font-weight:600; }
#media-edit-modal input { box-sizing:border-box; width:100%; max-width:100%; margin:0; padding:10px; border:1px solid var(--theme-border,#51415d); border-radius:8px; background:var(--theme-input,#100d14); color:var(--theme-text,#fff); font-size:14px; }
#media-edit-modal #media-edit-preview { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:8px; background:var(--theme-surface,#080609); }
#media-edit-modal .media-edit-help { color:var(--theme-muted,#b7aabd); font-size:12px; line-height:1.5; }
#media-edit-status { min-height:20px; margin:12px 0; color:var(--theme-muted,#f4c5ec); font-size:13px; }
#media-edit-modal .media-edit-actions { display:flex; gap:10px; }
#media-edit-modal .media-edit-actions button { flex:1; padding:10px; border:1px solid var(--theme-border,#665372); border-radius:9px; font-size:14px; font-weight:700; color:var(--theme-text,#fff); background:var(--theme-surface,#2d2534); }
#media-edit-modal #media-edit-save { background:linear-gradient(110deg,#8734c7,#a13d96); border-color:#b55be0; }
#media-edit-modal button:disabled { opacity:.5; cursor:wait; }


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


/* ===== channel-members.css ===== */
/* Owner member management: admin table styling, scoped to this dialog. */
#channel-members-modal {
    --members-card: #192230;
    --members-input: #111a27;
    --members-hover: #222e40;
    --members-border: #304056;
    --members-text: #edf2fa;
    --members-secondary: #b5c2d5;
    --members-muted: #91a2b9;
    --members-primary: #83afff;
    --members-button-primary: #2865d2;
    --members-danger: #ff8995;
    --members-danger-bg: #402a36;
    --members-success: #6dd8b0;
    --members-success-bg: #183c35;
}
:root[data-theme="light"] #channel-members-modal {
    --members-card: #fff;
    --members-input: #f8fafc;
    --members-hover: #edf2f8;
    --members-border: #d8e0eb;
    --members-text: #182538;
    --members-secondary: #475b73;
    --members-muted: #60748c;
    --members-primary: #235fbf;
    --members-button-primary: #245fc5;
    --members-danger: #b92e49;
    --members-danger-bg: #fbeaf0;
    --members-success: #187553;
    --members-success-bg: #e6f5ee;
}
.channel-page #channel-members-modal .station-members {
    width: 920px;
    padding: 24px;
    background: var(--members-card);
    border: 1px solid var(--members-border);
    border-radius: 12px;
    color: var(--members-text);
    font-family: 'Noto Sans KR', sans-serif;
    box-shadow: 0 12px 40px #0003;
    text-align: left;
    scrollbar-gutter: stable;
}
.channel-page #channel-members-modal .station-members-heading {
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--members-border);
}
.channel-page #channel-members-modal #channel-members-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--members-text);
}
#channel-members-title i { color: var(--members-primary); }
#channel-members-modal .station-members-tools { display: flex; align-items: center; gap: 12px; max-width: 100%; }
#channel-members-modal .station-members-search-wrap { position: relative; width: 240px; max-width: 100%; }
#channel-members-modal .station-members-search-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--members-muted); font-size: 13px; pointer-events: none; }
.channel-page #channel-members-modal #channel-members-search {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--members-border);
    border-radius: 7px;
    background: var(--members-input);
    color: var(--members-text);
    font: inherit;
    font-size: 13px;
}
#channel-members-modal #channel-members-search::placeholder { color: var(--members-muted); }
.channel-page #channel-members-modal #channel-members-close {
    width: 36px; height: 36px; flex-basis: 36px;
    color: var(--members-secondary); border: 1px solid var(--members-border);
    border-radius: 7px; font-size: 24px; line-height: 1; cursor: pointer;
}
#channel-members-modal .station-members-summary, #channel-members-modal #channel-members-status {
    color: var(--members-muted); font-size: 12px; line-height: 1.6;
    margin: 0 0 16px;
}
#channel-members-modal .station-members-summary { display: flex; align-items: baseline; gap: 12px; }
#channel-members-modal .station-members-summary p { margin: 0; flex: 1; min-width: 0; }
#channel-members-modal #channel-members-followers { margin-left: auto; flex-shrink: 0; white-space: nowrap; color: var(--members-text); }
#channel-members-modal .station-members-pagination:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 20px; }
#channel-members-modal .station-members-page-summary { grid-column: 1; font-size: 12px; color: var(--members-muted); }
#channel-members-modal .station-members-page-buttons { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
#channel-members-modal .station-members-pagination::after { content: ''; grid-column: 3; }
.channel-page #channel-members-modal .station-members-pagination button {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; min-height: 34px; padding: 7px 10px; margin: 0; flex-shrink: 0;
    white-space: nowrap; word-break: keep-all; border-radius: 7px;
    background: var(--members-hover); color: var(--members-text); border: 1px solid var(--members-border);
    font: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer;
    box-shadow: none; text-shadow: none; transition: background .15s;
}
.channel-page #channel-members-modal .station-members-pagination button[aria-current="page"] { background: var(--members-button-primary); color: #fff; border-color: transparent; }
.channel-page #channel-members-modal .station-members-pagination button[aria-current="page"]:hover:not(:disabled) { filter: brightness(1.12); }
#channel-members-modal #channel-members-status:empty { display: none; }
#channel-members-modal .station-members-table-wrap { min-height: 360px; border: 1px solid var(--members-border); border-radius: 8px; overflow-x: auto; }
.channel-page #channel-members-modal .station-members-table { margin: 0; width: 100%; min-width: 620px; table-layout: fixed; font-size: 13px; }
#channel-members-modal :is(.station-members-col-nickname, .station-members-col-date) { width: 22%; }
#channel-members-modal .station-members-col-visits { width: 16%; }
#channel-members-modal :is(.station-members-col-role, .station-members-col-actions) { width: 20%; }
#channel-members-modal .station-members-table th {
    padding: 13px 16px; background: var(--members-input); color: var(--members-secondary);
    font-size: 12px; font-weight: 600; border: 0;
}
#channel-members-modal .station-members-table td {
    padding: 7px 16px; border: 0; border-top: 1px solid var(--members-border);
    color: var(--members-text); vertical-align: middle;
}
#channel-members-modal .station-members-table td strong { font-weight: 600; }
#channel-members-modal .station-members-table td:first-child strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#channel-members-modal .station-members-table th:last-child, #channel-members-modal .station-members-table td:last-child { text-align: right; }
#channel-members-modal .station-members-table tbody tr:hover { background: var(--members-hover); }
#channel-members-modal .station-members-table .is-blocked { background: var(--members-danger-bg); }
.channel-page #channel-members-modal .station-members-table :is(select, button) {
    box-sizing: border-box; min-width: 84px; min-height: 34px; padding: 7px 10px;
    font: inherit; font-size: 12px; line-height: 1.4; border-radius: 7px;
    background: var(--members-input); color: var(--members-secondary); border: 1px solid var(--members-border);
    cursor: pointer;
}
.channel-page #channel-members-modal .station-members-table button { background: var(--members-danger-bg); color: var(--members-danger); border-color: var(--members-danger); font-weight: 600; }
.channel-page #channel-members-modal .station-members-table .is-blocked button { background: var(--members-success-bg); color: var(--members-success); border-color: var(--members-success); }
#channel-members-modal :is(button, select):disabled { opacity: .5; cursor: default; }
#channel-members-modal :is(button, input, select):focus-visible { outline: 2px solid var(--members-primary); outline-offset: 3px; }
#channel-members-modal .station-members-table td[colspan] { text-align: center; padding: 30px; color: var(--members-muted); }
@media (max-width: 600px) {
    #channel-members-modal .station-members-pagination:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
    #channel-members-modal .station-members-page-summary { text-align: center; }
    #channel-members-modal .station-members-page-buttons { grid-column: 1; }
    #channel-members-modal .station-members-pagination::after { display: none; }
    #channel-members-modal .station-members-table-wrap { min-height: 280px; }
    .channel-page #channel-members-modal .station-members { padding: 18px; }
    #channel-members-modal .station-members-tools { width: 100%; }
    #channel-members-modal .station-members-search-wrap { flex: 1; width: auto; }
    .channel-page #channel-members-modal #channel-members-search { font-size: 16px; }
}


/* ===== 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-menu-hint-active .account-avatar-button::after,
body .account-avatar-button:hover::after {
    content:var(--account-menu-hint, '메뉴 열기'); position:absolute; top:calc(100% + 17px); right:-10px;
    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:nowrap; box-shadow:0 4px 12px #0004; pointer-events:none; z-index:11001;
}
body.account-menu-hint-active .account-avatar-button::before,
body .account-avatar-button:hover::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;
    transform:rotate(45deg); pointer-events:none; z-index:11002;
}
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-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);
}
:root[data-theme="light"] body.channel-page #tabs-area .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;
}

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