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

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

:root {
    --main-color:var(--brand-gradient,linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%));
    --main-hover-color:var(--brand-gradient-hover,linear-gradient(110deg,#b51b26,#dd3943,#b51b26));
    --main-border-color: rgb(214,178,113);
    --main-shadow: 0 0 3px 0 rgba(0, 0, 0, 1);
    --bubble-mine: linear-gradient(30deg,#46311d,#2c231b);
    --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: #ffe991;
    --neon-purple: #c18a16;
    --neon-glow: 0 0 15px rgba(240,214,160,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: #2a2825;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffe991;
}

/*
상단 글로벌 네비게이션 헤더 (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(240,214,160,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:45px;
    height:45px;
    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:#fff;
    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%, #ffe991 50%, #c18a16 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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 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(201,33,43,0.5);
}

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

/* 스트리머 뱃지 공통 스타일 - 핑크/보라 네온 테마 */
.streamer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #c18a16, #ffe991);
    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(240,214,160,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, #110f0d 0%, #211c13 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 #ffe991;
    box-shadow: 0 0 10px rgba(240,214,160,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:#fff;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    width: fit-content;
    box-shadow: 0 4px 18px rgba(240,214,160,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, #110f0d 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);
}

/* Illustrated card icon shared by recommended REPLAY and VIDEO. */
.index-page .hwatu-section-icon {
    position:relative; display:inline-block; width:40px; height:32px;
    flex:0 0 40px; align-self:center; line-height:0;
}
.index-page .hwatu-section-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.index-page .hwatu-section-icon::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(110deg,transparent 38%,rgba(255,244,202,.85) 49%,rgba(255,255,255,.95) 50%,transparent 62%);
    background-size:300% 100%; background-position:100% 0;
    -webkit-mask:var(--hwatu-icon-mask,url('/img/hwatu-fan.webp?v=2026092002')) center/contain no-repeat;
    mask:var(--hwatu-icon-mask,url('/img/hwatu-fan.webp?v=2026092002')) center/contain no-repeat;
    animation:hwatu-icon-shine 5s linear infinite;
}
@keyframes hwatu-icon-shine {
    0%,15% { background-position:100% 0; opacity:0; }
    22% { opacity:1; }
    60% { background-position:0% 0; opacity:1; }
    68%,100% { background-position:0% 0; opacity:0; }
}
@media(max-width:900px) {
    .index-page .hwatu-section-icon { width:34px; height:28px; flex-basis:34px; }
}
@media(prefers-reduced-motion:reduce) {
    .index-page .hwatu-section-icon::after { animation:none; display:none; }
}

.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,#ffe991);
    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,#1c1915);
}

/* 썸네일 영역 */
.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, #ffe991);
    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,#695e4d);
    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,#ffe991);
}

.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,#96918a); 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:#2a2419ef; 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(240,214,160,0.25);
    color: var(--theme-muted,#888);
    grid-column: 1 / -1;
}
.empty-state i {
    font-size: 38px;
    margin-bottom: 14px;
    color: var(--theme-muted,#ffe991);
    opacity: 0.6;
}

/*
스트리머 신청 유도 CTA 배너
*/
.streamer-cta-banner {
    background: linear-gradient(135deg, rgba(189,145,74,0.16) 0%, rgba(240,214,160,0.08) 100%);
    border: 1px solid rgba(240,214,160,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(189,145,74,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:#fff;
    border: none;
    padding: 10px 28px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(240,214,160,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(201,33,43,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(22,20,17,0.95);
    border: 1px solid rgba(240,214,160,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(189,145,74,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, #ffe991, #c18a16);
    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(33,31,27,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: #ffe991;
    box-shadow: 0 0 10px rgba(240,214,160,0.35);
}

/* 주요 실행 버튼 (가입, 비밀번호 변경 등) */
.mainbutton,
.doJoin {
    width: 100%;
    background: var(--main-color);
    background-size: 100% auto;
    border: none;
    color:#fff;
    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(240,214,160,0.35);
}
.mainbutton:hover,
.doJoin:hover {
    background-size: 200% auto;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(201,33,43,0.55);
    color: #000;
}

/* 로그인 버튼 (모달 내부) */
.login-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #ff737b;
    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(240,214,160,0.15);
    box-shadow: 0 0 12px rgba(240,214,160,0.35);
}

/* 닫기 및 보조 버튼 */
.close-btn {
    width: 100%;
    background: var(--theme-surface,#2a2825);
    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,#3b3834);
    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(23,21,18,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,#191714);
    border: 1px solid rgba(240,214,160,0.25);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), 0 0 20px rgba(165,44,54,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,#211e1a);
    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,#a52c36);
    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,#1e1b17);
    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(165,44,54,0.2);
    border-color: rgba(165,44,54,0.5);
}

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

/* 스튜디오 탭 본문 */
.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,#272420);
    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: #a52c36;
    box-shadow: 0 0 8px rgba(165,44,54,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, #a52c36, #781d27);
    color: var(--theme-text,#fff);
}

.studio-btn-primary:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(165,44,54,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: #342c21;
    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,#24211d);
    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(165,44,54,0.2); color: var(--theme-muted,#a52c36); }
.studio-stat-icon.blue { background: rgba(193,151,80, 0.2); color:var(--brand-accent,#f5c842); }

.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,#151311);
    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,#e7d0ac); }
.section-more-button:focus-visible { outline: 2px solid #e7d0ac; outline-offset: 3px; }
.section-more-button[hidden] { display: none; }

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

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

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

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

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

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

/* Seotda heart ranks and the channel-only manager role. */
.seotda-rank-badge { position:relative; display:inline-flex; flex:0 0 32px; width:32px; height:28px; vertical-align:middle; overflow:hidden; border-radius:5px; }
.seotda-rank-badge > .seotda-rank-icon { display:block; width:32px; height:28px; object-fit:contain; }
.seotda-rank-badge::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%); transform:translateX(-130%); animation:seotda-rank-shine 5s ease-in-out infinite; }
@keyframes seotda-rank-shine { 0%,65% { transform:translateX(-130%); } 90%,100% { transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce) { .seotda-rank-badge::after { display:none; } }

/* Distinct illustrated motifs, sharing the recommended section's card finish. */
.index-page .hwatu-streamers-icon { --hwatu-icon-mask:url('/img/hwatu-streamers.webp?v=2026092003'); }
.index-page .hwatu-apply-icon { --hwatu-icon-mask:url('/img/hwatu-apply.webp?v=2026092003'); width:30px; height:40px; flex-basis:30px; }
@media(max-width:900px) { .index-page .hwatu-apply-icon { width:27px; height:36px; flex-basis:27px; } }

/* channel-layout.css */
/* Channel shell. Keep legacy player, moderation and remote-control components. */
body.channel-page {
    --main-color:var(--brand-gradient,linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%));
    --main-hover-color:var(--brand-gradient-hover,linear-gradient(110deg,#b51b26,#dd3943,#b51b26));
    --shell-border: var(--theme-border,#2d2b27);
    margin: 0; padding: 0; height: 100dvh; min-height: 0;
    display: flex; flex-direction: column; overflow: hidden; background: var(--theme-bg,#0e0d0b); color: var(--theme-text,#f1f0ee);
}
.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 #ead6b7; 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,#151413); 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:45px; height:45px; font-size: 13px; background: var(--main-color); color: #1b140a; 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,#c2bfb9); font-size: 16px; flex-shrink: 0; transition: background .2s, color .2s; }
.channel-page .layout-icon:hover { background: var(--theme-surface,#312d26); color: var(--theme-muted,#f3e7d4); }
.channel-search { display: flex; align-items: center; gap: 12px; max-width: 340px; min-width: 150px; flex: 1; margin: 0 auto; padding: 9px 12px; background: var(--theme-input,#222025); border: none; border-radius: 8px; color: var(--theme-muted,#908b98); }
.channel-page .channel-search input:focus, .channel-page .channel-search input:focus-visible { outline: none; box-shadow: none; }
.channel-search input { background: none; border: 0; outline: none; color: var(--theme-text,#fff); min-width: 0; width: 100%; font-size: 12px; text-align: start; }
.channel-page .container { display: flex; flex: 1; flex-direction: row; position: relative; width: 100%; height: calc(100dvh - 64px); min-height: 0; overflow: hidden; }
.channel-sidebar { flex: 0 0 212px; width: 212px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background: var(--theme-surface,#181715); 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,#f5ecde); text-decoration: none; font-size: 19.5px; padding: 13px 11px; border-radius: 8px; background: var(--theme-surface,#312b21); }
.sidebar-home span { font-size: 18px; font-weight: 700; }
.sidebar-home i { color: var(--theme-muted,#e7d1ae); }
.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,#e2ded7); text-decoration: none; font-size: 16px; font-weight: 600; transition: background .15s, color .15s; }
.sidebar-browse-links a:hover { background: var(--theme-surface,#2d2a25); color: var(--theme-text,#fff); }
.sidebar-browse-links i { width: 20px; flex: 0 0 20px; text-align: center; color: var(--theme-muted,#cbb89a); }
/* 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,#f2efeb); text-decoration: none; border-radius: 8px; transition: background .2s; }
.directory-channel:hover, .directory-channel[aria-current] { background: var(--theme-surface,#2d2a25); }
.directory-channel img { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 3px solid var(--theme-border,#534e46); }
.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,#9b968e); margin-top: 4px; }
.directory-live { width: 6px; height: 6px; border-radius: 50%; background: #ffe991; }
.directory-state { font-size: 12px; color: var(--theme-muted,#aaa69f); 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,#aba69f); 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,#0f0e0d); 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,#090806); }
.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%, #765b2f50, transparent 58%), radial-gradient(ellipse at 85% 95%, #ffe99123, transparent 55%), repeating-linear-gradient(125deg, #ffffff02 0 1px, transparent 1px 38px), #110e0a; }
.channel-page.is-offline .channel-offline-stage { display: flex; }
.channel-page.is-offline #stream-thumbnail:not([src=""]) + .channel-offline-stage { background: linear-gradient(0deg, #120f09ed, #120f0977); }
.offline-eyebrow { font-size: 10px; letter-spacing: 4px; color: #c8bba5; }
.offline-symbol { display: grid; place-items: center; width: 68px; height: 68px; margin: 10px 0; border: 1px solid #d82b3780; border-radius: 22px; background: linear-gradient(135deg, #72152199, #bd202a40); box-shadow: 0 0 65px #c9212b35; color: #ff626c; font-size: 23px; transform: rotate(-8deg); }
.offline-symbol i { transform: rotate(8deg); }
.channel-offline-stage strong { color: #f5f3ec; font-size: clamp(16px, 1.65vw, 27px); letter-spacing: -.7px; }
.channel-offline-stage > span:last-of-type { font-size: 12px; color: #b2ab9f; }
.channel-page .offline-replays { border: 1px solid #d82b37; background: var(--main-color); color: #fff; border-radius: 7px; padding: 9px 14px; font-size: 11px; margin-top: 8px; }
.channel-page .offline-replays i { margin-left: 12px; }
.channel-page .offline-replays:hover { background:var(--main-hover-color); border-color:#ff626c; }
.channel-page .offline-replays:focus-visible { outline:2px solid #ff626c; outline-offset:3px; }
.channel-page #player-overlay { z-index: 7; }
.channel-page .channel-summary { border-bottom: 1px solid var(--shell-border); }
.channel-page #channel-title-display { position: static; display: flex; align-items: center; padding: 0; margin: 0; background: none; box-shadow: none; border: 0; transform: none; }
.channel-page .profile-box { width: 58px; height: 58px; flex: 0 0 58px; margin: 0; }
.channel-page .channel-profile-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #aaa; }
.channel-page .channel-text-group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.channel-identity { display: flex; align-items: center; gap: 4px; }
.channel-identity a { overflow-wrap: anywhere; color: var(--theme-text,#fff); text-decoration: none; font-size: 17px; font-weight: 700; }

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

.channel-page #admin-toolbar { flex-shrink: 0; padding-left: 26px; padding-right: 26px; }
.channel-page #tabs-area { position: static; width: 100%; height: auto; min-height: 220px; max-height: none; margin: 12px 0 0; overflow: visible; padding: 0 26px; flex-shrink: 0; }
.channel-page .content-tabs { position: static; display: flex; align-items: center; width: 100%; padding: 0; margin: 0; gap: 24px; background: transparent; border-bottom: 1px solid var(--theme-border,#353029); }
.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,#1b1814); border: 1px solid var(--theme-border,#38332a); 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,#151412); 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,#ccb591); margin-right: 7px; }

.channel-page #messages { flex: 1; min-height: 0; height: auto; margin: 0; padding: 12px; overflow-y: auto; background: transparent; }
.channel-page #chat-form { position: relative; inset: auto; width: 100%; flex: none; }
.channel-page #login-warning { inset: 5% 2%; width: 96%; height: 90%; box-sizing: border-box; border-radius: 10px; background: var(--theme-bg,#000); border: 0; font-size: 16px; }
.channel-page #banner-area { flex-shrink: 0; }
.channel-page #restore-channel-chat { display: none; }
.channel-page.chat-collapsed .chat-section { display: none; }
.channel-page.chat-collapsed #restore-channel-chat { display: inline-flex; }
.channel-page .btn-green-join, .channel-page .mainbutton, .channel-page .gb-btn, .channel-page .btn-uploadVideo { background: var(--main-color); background-size: 200% auto; border: 1px solid #e4cba266; color: #1b140a; 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 #b51b2640; }
.channel-page .tab-btn.active { background: linear-gradient(100deg,#be202b,#ed5b64,#be202b); 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: #b51b26; box-shadow: 0 0 15px #b51b264d; 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,#cec2af); 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,#151412) !important; border-left: 0; }
    .channel-page .channel-chat-heading { height: 42px; min-height: 42px; }
    .channel-page #collapse-channel-chat { display: none; }
    .channel-page .mobile-only-tabs { display: flex; flex-shrink: 0; position: static; }
    .channel-page #messages, .channel-page.is-typing #messages { padding: 12px !important; background: transparent; max-height: 450px; min-height: 160px; }
    .channel-page #mobile-panel { min-height: 180px; max-height: 480px; }
    
    .channel-page #admin-toolbar { padding-left: 12px; padding-right: 12px; }
    .channel-offline-stage { gap: 8px; padding: 14px; }
    .offline-symbol { width: 38px; height: 38px; border-radius: 12px; font-size: 14px; margin: 0; }
    .offline-eyebrow { font-size: 8px; letter-spacing: 3px; }
    .channel-offline-stage > span:last-of-type { font-size: 10px; }
    .channel-page .offline-replays { margin: 0; padding: 6px 10px; font-size: 10px; }
}
.channel-page.chat-popup .lobby-navbar, .channel-page.chat-popup .channel-sidebar, .channel-page.chat-popup .video-section, .channel-page.chat-popup .mobile-only-tabs, .channel-page.chat-popup #collapse-channel-chat { display: none !important; }
.channel-page.chat-popup .container { height: 100dvh; }
.channel-page.chat-popup .chat-section { display: flex; flex: 1; width: 100%; min-width: 0; max-width: none; height: 100%; }
@media (prefers-reduced-motion: reduce) {
    .channel-page *, .channel-page *::before, .channel-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.channel-page #login-warning::after { inset: 3px; background: var(--theme-bg,#000); }
.channel-page #login-warning span {
    background:none; background-clip:border-box; -webkit-background-clip:border-box;
    color:var(--theme-text,#fff);
}
.channel-page #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: #241f18e8; color: var(--theme-text,#f4ebdb); border: 1px solid #927e5f; 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: #2a241aee; border: 1px solid #d1b07a; border-radius: 12px; box-shadow: 0 8px 32px #0006; color: var(--theme-text,#f8f2e8); 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,#ffe991); }
.channel-page .broadcast-notice button { flex-shrink: 0; color: var(--theme-muted,#f2e6d3); border: 0; background: transparent; font-size: 12px; padding: 4px; }
.channel-page #broadcast-notice-live { border-bottom: 1px solid #dabe91; }
:root[data-theme="light"] .channel-page .broadcast-notice {
    background:var(--theme-surface,#fff);
    color:var(--theme-text,#28221b);
    border-color:#b9a078;
    box-shadow:0 8px 32px #3b332526;
}
:root[data-theme="light"] .channel-page .broadcast-notice > i,
:root[data-theme="light"] .channel-page .broadcast-notice button {
    color:#866c43;
}
:root[data-theme="light"] .channel-page #broadcast-notice-live { border-bottom-color:#b9a078; }
.channel-page .channel-offline-stage { transition: opacity .3s; }
@media (max-width: 900px) { .channel-page .broadcast-notice { top: 66px; font-size: 12px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .channel-page .broadcast-notice, .channel-page .channel-offline-stage { transition: none; } }
/* 방송 상태의 시각적 표시: 소켓이 is-live를 변경하면 모든 표시가 함께 전환됩니다. */
.channel-page .profile-box { overflow: visible; }
.channel-page .profile-box:not(.is-live) .channel-profile-img { border-color: #aaa; box-shadow: none; animation: none; }
.channel-page .profile-box.is-live .channel-profile-img { border: 3px solid #ff3030; box-shadow: 0 0 5px rgba(255, 48, 48, .9), 0 0 14px rgba(255, 24, 24, .6), 0 0 28px rgba(179,42,53, .3); animation: profile-live-neon 2s ease-in-out infinite; }
.channel-page .profile-box .live-tag-badge { display: none; bottom: -5px; padding: 3px 7px; background: red; border: 1px solid red; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .4px; box-shadow: none; }
.channel-page .profile-box.is-live .live-tag-badge { display: block; box-shadow: 0 0 6px rgba(255, 32, 32, .75), 0 0 14px rgba(179,42,53, .4); animation: profile-live-badge-neon 2s ease-in-out infinite; }
@keyframes profile-live-neon {
    0%, 100% { box-shadow: 0 0 3px rgba(255, 48, 48, .4), 0 0 8px rgba(255, 24, 24, .2), 0 0 16px rgba(179,42,53, .08); }
    50% { box-shadow: 0 0 7px rgba(255, 48, 48, 1), 0 0 20px rgba(255, 24, 24, .75), 0 0 34px rgba(179,42,53, .4); }
}
@keyframes profile-live-badge-neon {
    0%, 100% { box-shadow: 0 0 2px rgba(255, 32, 32, .3), 0 0 6px rgba(179,42,53, .12); }
    50% { box-shadow: 0 0 8px rgba(255, 32, 32, .9), 0 0 18px rgba(179,42,53, .55); }
}
.channel-page #title-status.on { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 20px; background: linear-gradient(110deg, #ff4357, #d7b886); color: white; font-weight: 800; letter-spacing: .3px; box-shadow: 0 0 12px #ff4d7655; white-space: nowrap; }
.channel-page #title-status.on::before { content: ''; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: white; }
.channel-page .directory-avatar { position: relative; display: inline-flex; width: 41px; height: 41px; flex: 0 0 41px; overflow: visible; }
.channel-page .directory-avatar img { width: 41px; height: 41px; transition: border-color .25s, box-shadow .25s; }
.channel-page .directory-channel.is-live .directory-avatar img { border: 3px solid #ff3030; box-shadow: none; animation: none; }
.channel-page .directory-live-badge { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 2px 5px; border-radius: 4px; background: red; color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; letter-spacing: .4px; border: 1px solid red; box-shadow: none; animation: none; }
@media (max-width: 900px) { .channel-page .profile-box .live-tag-badge { font-size: 8px; padding: 2px 5px; bottom: -4px; } }
@media (prefers-reduced-motion: reduce) { .channel-page .profile-box.is-live .channel-profile-img, .channel-page .profile-box.is-live .live-tag-badge, .channel-page .directory-channel.is-live .directory-avatar img, .channel-page .directory-live-badge { animation: none; } }
/* 메인 인덱스와 방송국에서 공통 내비게이션을 사용합니다. */
.index-page .site-shell { display: flex; flex: 1; width: 100%; min-height: 0; position: relative; overflow: hidden; }
.index-page .lobby-container { flex: 1; min-width: 0; width: auto; max-width: none; margin: 0; padding: 32px 28px 80px; overflow-y: auto; scroll-behavior: smooth; }
/* Hide the lobby scrollbar while retaining native scrolling. */
.index-page #lobby-main { scrollbar-width: none; -ms-overflow-style: none; }
.index-page #lobby-main::-webkit-scrollbar { width: 0; }

.index-page .lobby-navbar { display: flex; align-items: center; }
.index-page #restore-channel-chat { display: none !important; }
.index-page .directory-state { margin: 0; }
.index-page .channel-sidebar { scrollbar-width: none; }
@media (max-width: 900px) {
    .index-page .lobby-container { padding: 20px 14px 48px; }
    .index-page .site-shell { height: calc(100dvh - 56px); }
}
.channel-page .role-streamer-mark { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; vertical-align: middle; border: 0; border-radius: 0; box-shadow: none; }
.channel-page .nick-admin, .channel-page .role-admin-mark { color: #ff9800; }
.channel-page .nick-title .role-streamer-mark { width: 16px; height: 16px; }
.channel-page .role-admin-mark { display:inline-flex; width:18px; height:18px; flex:0 0 18px; object-fit:contain; vertical-align:middle; }
.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,#f2e6d3); background: var(--theme-surface,#312c23); 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: #b51b26; box-shadow: 0 0 15px #b51b264d; transform: translateY(-3px); color: white; }
.channel-page #admin-toolbar .btn-admin-tool:hover i { background: linear-gradient(100deg,#be202b,#ed5b64,#be202b); background-clip: text; -webkit-background-clip: text; color: transparent; }
.channel-page #chat-form { display: flex; align-items: center; padding: 10px; gap: 0; min-height: 62px; background: var(--theme-bg,#111); border-top: 1px solid var(--theme-border,#151515); }
.channel-page #m { flex: 1; width: 0; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 12px 10px; background: #1e1e1ee6; border: 0; border-radius: 0 10px 10px 0; color: white; outline: none; font-size: 13px; }
.channel-page #chat-form .btn-gif { flex: 0 0 32px; width: 32px; height: 40px; margin: 0; padding: 0; background: #0005; border: 0; border-radius: 9px 0 0 9px; color: white; }
.channel-page #chat-form .btn-popup-chat { display: flex; align-items: center; justify-content: center; flex: 0 0 45px; width: 45px; height: 42px; margin: 0; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--theme-muted,#ccc); font-size: 20px; }
.channel-page #btn-vote-manage, .channel-page #btn-clear-float { position: absolute; right: 10px; left: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d4b1794d; border-radius: 10px; background: linear-gradient(145deg,#352f24,#25211a); color: #eedec5; box-shadow: 0 2px 7px #0003; font-size: 17px; cursor: pointer; backdrop-filter: blur(5px); z-index: 10; transition: background .18s, border-color .18s, box-shadow .18s; }
.channel-page #btn-vote-manage { bottom: 120px; }
.channel-page #btn-clear-float { bottom: 70px; }
.channel-page #btn-vote-manage:hover, .channel-page #btn-clear-float:hover { background: linear-gradient(145deg,#4b3f2b,#3a3225); border-color: #dbbd8c; color: #fff; box-shadow: 0 3px 10px #b78d4a26; transform: scale(1.1); }
.channel-page #btn-vote-manage:focus-visible, .channel-page #btn-clear-float:focus-visible { outline: 2px solid #d7b885; outline-offset: 3px; }
:root[data-theme="light"] .channel-page #btn-vote-manage, :root[data-theme="light"] .channel-page #btn-clear-float { background: linear-gradient(145deg,#fdfcf9,#ebdcc1); border-color: #e1d6c3; color: #947646; box-shadow: 0 2px 7px #4e402a14; }
:root[data-theme="light"] .channel-page #btn-vote-manage:hover, :root[data-theme="light"] .channel-page #btn-clear-float:hover { background: #eee6d9; border-color: #c4ab82; color: #735930; }
@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 #e3c89d; text-align: center; font-size: 20px; line-height: 1.35; font-weight: 700; color: transparent; background: linear-gradient(to right,#c18a16,#ffe991,#c18a16); 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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%); background-size: 100% auto; border: 0; color:#fff; 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,#f4dfb1,#d4ad68); 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 #d0a35b; } 50% { box-shadow: 0 0 10px 5px #d0a35b; } }
@media (prefers-reduced-motion: reduce) { #adminLayer #mainControlBtn { animation: none !important; } }
/* Align the shared profile header with the chat column, as in the original. */
@media (min-width: 901px) {
    .channel-page :is(#btn-mobile-menu, #mobile-slide-menu, #menu-overlay) { display: none !important; }
    .channel-page .lobby-navbar { padding-right: 0; }
    .channel-page #lobby-auth-area { position: relative; display: flex; align-items: center; flex: 0 0 340px; width: 340px; height: 100%; padding: 0 12px; box-sizing: border-box; }
    .channel-page #lobby-auth-area > div { width: 100%; justify-content: flex-start; }
    .channel-page #lobby-auth-area .logout-btn { margin-left: auto !important; }
    .index-page #lobby-auth-area .streamer-studio-wrap { position: static; }
    .index-page .streamer-studio-popover { top: calc(100% + 5px); right: 8px; max-width: calc(100% - 16px); }
}
.channel-page :is(#user-status, #lobby-auth-area) .admin-gear-btn:hover { color: var(--theme-text,#fff); background: none; transform: rotate(90deg); }
.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn { transition: all .5s ease; }
.channel-page :is(#user-status, #lobby-auth-area) .admin-s-btn:hover { color: var(--theme-muted,#afffb2); background: none; text-shadow: 0 0 8px #4caf50, 0 0 15px #4caf50; }
.channel-page :is(#user-status, #lobby-auth-area) .logout-btn:hover { color: #ff5252 !important; }
/* Guest actions stay right-aligned; signed-in identity keeps its left edge. */
.channel-page #lobby-auth-area > .auth-btn-group { margin-left: auto; justify-content: flex-end; width: 100%; }

/* Profile identity and contact share one vertically centered summary row. */
.channel-page .channel-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 16px; background: var(--theme-bg,#111); }
.channel-page #channel-title-display { width: auto; flex: 0 1 auto; gap: 14px; }
.channel-page .channel-text-group { flex: 0 1 auto; gap: 4px; }
.channel-page .channel-handle { display: block; font-size: 12px; color: var(--theme-muted,#cdb185); }
.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:var(--brand-accent,#f5c842); 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,#2d2a25); color: var(--theme-muted,#b4aea5); margin: 0; line-height: 1.4; }

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

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

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

.channel-page .station-members { box-sizing: border-box; width: 680px; max-width: calc(100vw - 24px); max-height: 85dvh; overflow-y: auto; padding: 20px; background: var(--theme-bg,#111); border: 1px solid var(--theme-border,#555); border-radius: 14px; color: var(--theme-text,#eee); }
.station-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.station-members-heading h3 { margin: 0; }
.station-members-heading button { border: 0; background: transparent; color: var(--theme-text,#ddd); font-size: 28px; }
.station-members > p, #channel-members-status { font-size: 13px; color: var(--theme-muted,#c2bdb5); 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,#282622); color: var(--theme-text,#fff); border: 1px solid var(--theme-border,#57524a); 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,#d9bf94); 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,#bebab3); 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,#7b6e58); border-radius:16px; background:var(--theme-input,#231f18); color:var(--theme-text,#fff); }
.station-members-table .is-blocked { background:#35171b55; }
.station-members-table :disabled { opacity:.5; }

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

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

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

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

/* Gold brush wordmark, with text fallback for a custom site name. */
.channel-page .lobby-navbar .lobby-brand-title,
.channel-page .auth-brand .lobby-brand-title { font-family:"Gugi Chat",sans-serif; font-size:25px; line-height:1.3; font-weight:700; }
.tazza-wordmark { display:block; width:110px; height:auto; flex-shrink:0; filter:none; transform:translateX(-2px); }
/* A soft highlight passes over the lettering, clipped to the logo alpha. */
.tazza-wordmark-shine { position:relative; }
.tazza-wordmark-shine > img { display:block; width:100%; height:auto; }
.tazza-wordmark-shine::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(110deg,transparent 40%,rgba(255,244,210,.3) 46%,rgba(255,255,255,.9) 50%,rgba(255,244,210,.3) 54%,transparent 60%) -150% 0 / 250% 100% no-repeat;
    -webkit-mask:url('/img/tazza-wordmark.webp?v=tazza-red-buttons-20260917-v2') center / 100% 100% no-repeat;
    mask:url('/img/tazza-wordmark.webp?v=tazza-red-buttons-20260917-v2') center / 100% 100% no-repeat;
    animation:tazza-logo-shine 10s ease-in-out infinite;
}
@keyframes tazza-logo-shine {
    0%,7.2% { background-position:150% 0; opacity:0; }
    9% { opacity:1; }
    22.8% { background-position:-150% 0; opacity:1; }
    25.2%,100% { background-position:-150% 0; opacity:0; }
}
@media(prefers-reduced-motion:reduce) { .tazza-wordmark-shine::after { animation:none; opacity:0; } }

.channel-page .auth-brand .tazza-wordmark { max-width:calc(100% - 44px); }
.channel-page .lobby-navbar .lobby-logo-icon { flex:0 0 45px; }
@media(max-width:900px) { .channel-page .lobby-brand { gap:8px; } }

.directory-audience { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; color: var(--theme-muted,#b3aea7); 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 .nick-title .role-streamer-mark {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 #e9d4b3; 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,#5f5646); background: var(--theme-surface,#37332c); }
.channel-page #admin-menu .member-action-ban:hover { background: #4c4436; 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;
    }
}


#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,#7b6e58); border-radius:6px; background:var(--theme-surface,#2d271e); color:var(--theme-muted,#e8d8be); font-size:12px; cursor:pointer; }
#adminLayer #admin-log .server-copy-button:hover { background:#43392a; }

@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:var(--button-accent,#f5c842); }
.channel-page .viewer-right-group .channel-video-control:focus-visible { outline:2px solid #ffe991; 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 #ff737b; outline-offset:2px; }
    .channel-page .channel-summary #mobile-follow-slot #channel-follower-count { color:#4ade80; }

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

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

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

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

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


/* original-theme.css */
/* Shared TazzaEnter palette and effects. */
:root {
    --main-color:var(--brand-gradient,linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%));
    --main-hover-color:var(--brand-gradient-hover,linear-gradient(110deg,#b51b26,#dd3943,#b51b26));
    --main-border-color: rgb(214,178,113);
    --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 { display:block; object-fit:contain; background:none; border-radius:0; animation:none; }
.channel-page .lobby-brand-title { background:none; color:var(--brand-title,#ffdb63); -webkit-text-fill-color:currentColor; animation:none; }
.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:#fff; 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:#fff; }
.index-page .streamer-badge { background: var(--main-color); box-shadow: var(--main-shadow); color:#fff; }
.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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%); }
.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:#fff; 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:not(.auth-submit)),
body.channel-page :is(.btn-text-login, .login-btn:not(.auth-submit)) *,
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:var(--brand-text-gradient,linear-gradient(100deg,#e5b42d,#ffe991,#e5b42d));
}
.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;
}

/* Shared icon accents follow the main button gradient. */
.channel-page .sidebar-footer > i,
.channel-page .section-title > i,
.channel-page .empty-state > i,
.channel-page .streamer-cta-text h3 > i,
.channel-page .mobile-home-nav a:first-child > i {
    background-image:var(--main-color);
}

@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(--main-color);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: text-roll 5s linear infinite;
}
.channel-page .sidebar-menu-link > .sidebar-live-icon {
    background: #fff;
    -webkit-mask: url('/img/sidebar-live.svg') center / contain no-repeat;
    mask: url('/img/sidebar-live.svg') center / contain no-repeat;
}
.channel-page .sidebar-menu-link:is(:hover, :focus-visible, [aria-current]) > .sidebar-live-icon {
    background: var(--main-color);
    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; background:#000; color:#fff; }
/* Animated red rim around the black fill, matching the streamer application button. */
.index-page .btn-hero-watch::before {
    content:""; position:absolute; inset:0; z-index:2; padding:2px;
    border-radius:inherit; pointer-events:none;
    background:linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%);
    background-size:50% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite:exclude;
    animation:scroll-gb 1.5s linear infinite;
}

.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::before { animation:none; } .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,#111214); border:1px solid var(--theme-border,#343024); border-radius:8px; box-shadow:0 16px 60px #0008; color:var(--theme-text,#fff); animation:none; text-align:left; }
:is(#loginModal, #joinModal) .auth-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; min-height:44px; }
:is(#loginModal, #joinModal) .auth-logo { display:block; width:180px; height:60px; object-fit:contain; margin:-8px 0 -8px -24px; }
:is(#loginModal, #joinModal) .auth-logo.auth-brand { display:flex; align-items:center; gap:10px; width:auto; max-width:calc(100% - 50px); min-width:0; margin-left:0; }
:is(#loginModal, #joinModal) .auth-brand img { flex-shrink:0; object-fit:contain; }
:is(#loginModal, #joinModal) .auth-brand .lobby-brand-title { flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#loginModal, #joinModal) .auth-content button { box-sizing:border-box; font-family:inherit; cursor:pointer; box-shadow:none; transition:color .2s,background .2s; }
:is(#loginModal, #joinModal) .auth-content .auth-close { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0 -10px 0 0; background:transparent; color:var(--theme-text,#eee); border:0; border-radius:4px; font-size:20px; }
:is(#loginModal, #joinModal) .auth-tabs { display:flex; gap:0; border-bottom:1px solid var(--theme-border,#48433c); 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(100deg,#be202b,#ed5b64,#be202b); 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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%); background-size:200% auto; animation:text-roll 2s infinite linear; }
:is(#loginModal, #joinModal) .auth-content .auth-tab:hover { color:var(--theme-muted,#ff737b); }
: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,#f5f3ec); 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,#08090b); 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:#ffe991; box-shadow:0 0 0 1px #ffe99144; }
: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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%); background-size:200% auto; color:var(--brand-on-accent,#fff); 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 #c24d54; border-radius:4px; background:var(--theme-surface,#30291d); color:var(--theme-muted,#f2e7d4); 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,#cbc7c0); 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:#c69e5d; box-shadow:none; cursor:pointer; }
#loginModal .auth-content #remember-login-id:focus-visible { outline:2px solid #ffe991; outline-offset:3px; }
:is(#loginModal, #joinModal) .auth-content button:focus-visible { outline:2px solid #ff737b; outline-offset:3px; }
@media(max-width:480px) { :is(#loginModal, #joinModal) .auth-content { padding:22px 20px 24px; } :is(#loginModal, #joinModal) .auth-content input { font-size:16px; } #joinModal #j_pw::placeholder { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { :is(#loginModal, #joinModal) .auth-content .auth-tab.active, :is(#loginModal, #joinModal) .auth-tab.active::after { animation:none; } }

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


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


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

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

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

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

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

/* One responsive row of portrait recommendations. */
.index-page #recommended-reels-section .reels-empty[hidden],
.index-page #recommended-reels-section .reels-grid[hidden],
.index-page #recommended-reels-section .streamer-card[hidden] { display:none !important; }
.index-page #recommended-reels-section .reels-grid {
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px;
}
.index-page #recommended-reels-section .streamer-card { display:flex; flex-direction:column; min-width:0; padding:0; gap:0; }
.index-page #recommended-reels-section .card-thumb-wrap { width:100%; flex:none; aspect-ratio:9/16; }
.index-page #recommended-reels-section .card-thumb-img { width:100%; height:100%; object-fit:cover; object-position:center; }
.index-page #recommended-reels-section .card-content { display:flex; align-items:flex-start; gap:6px; padding:10px 6px; }
.index-page #recommended-reels-section .card-avatar { width:28px; height:28px; flex:0 0 28px; }
.index-page #recommended-reels-section .card-info { flex:1; min-width:0; }
.index-page #recommended-reels-section .card-title { font-size:13px; }
.index-page #recommended-reels-section .card-details-row { display:block; }
.index-page #recommended-reels-section .card-meta { max-width:100%; margin:4px 0 0; flex-wrap:wrap; font-size:11px; }
@media (max-width:900px) {
    .index-page #recommended-reels-section .reels-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .index-page #recommended-reels-section .reels-grid:not(.reels-empty) {
        grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 20px) / 3);
        overflow-x:auto; overflow-anchor:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
        scrollbar-width:none; min-width:0; max-width:100%;
    }
    .index-page #recommended-reels-section .reels-grid::-webkit-scrollbar { display:none; }
    .index-page #recommended-reels-section .streamer-card { scroll-snap-align:start; }

}

/* Generated thumbnail with readable, translatable status text over the image. */
.index-page #recommended-reels-section .reels-empty-card {
    position:relative; box-sizing:border-box; min-width:0; aspect-ratio:9/16; overflow:hidden;
    border-radius:12px; border:1px solid var(--theme-border,#48433a); background:#080808;
}
.index-page #recommended-reels-section .reels-empty-card img {
    display:block; width:100%; height:100%; object-fit:cover; opacity:.08;
}
.index-page #recommended-reels-section .reels-empty-card p {
    position:absolute; top:28%; left:10px; right:10px; margin:0; padding:10px 4px;
    color:#fff3d5; font-size:13px; font-weight:600; line-height:1.7; text-align:center;
    word-break:keep-all; text-shadow:0 2px 8px #000,0 1px 3px #000;
}

/* Do not expose cards in the wrong section while video dimensions load. */
.index-page [data-recommended-media][data-orientation-pending] { visibility:hidden; pointer-events:none; }

/* Keep nickname metadata for the player, but simplify the home card details. */
.index-page #recommended-reels-section :is(.card-streamer-row,.card-published) { display:none; }

.index-page #recommended-reels-section .reels-list-shell { position:relative; min-width:0; }
.index-page #recommended-reels-section .reels-list-arrow[hidden] { display:none; }
.index-page #recommended-reels-section .reels-list-arrow:focus-visible { outline:2px solid #e7d0ac; outline-offset:3px; }

.index-page #recommended-reels-section .reels-list-arrow:disabled { cursor:default; }

.index-page #recommended-reels-section .reels-list-arrow { color:#fff; opacity:1; }
:root[data-theme="light"] .index-page #recommended-reels-section .reels-list-arrow { color:#000; }

.index-page #recommended-reels-section .reels-list-viewport { position:relative; overflow:hidden; min-width:0; }
.index-page #recommended-reels-section .reels-grid.reels-list-snapshot { position:absolute; top:0; left:0; width:100%; pointer-events:none; }


/* 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,#766b5a); border-radius:50%; background:var(--theme-surface,#25211a); cursor:pointer; }
.profile-role-badge { position:absolute; z-index:2; bottom:-7px; left:50%; transform:translateX(-50%); padding:2px 6px; border:1px solid #d2c1a5; border-radius:4px; background:linear-gradient(110deg,#887049,#b39970); 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,#5b482d,#927449); border-color:#dfc08e; }
.account-avatar-button .profile-role-badge { bottom:-6px; padding:2px 4px; font-size:8px; }
.account-avatar-button img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
body .account-avatar-button::after {
    content:var(--account-menu-hint, '메뉴 열기'); position:absolute; top:calc(100% + 17px); right:-10px;
    opacity:0; visibility:hidden; transform:scale(.05);
    transform-origin:calc(100% - 29px) -36px;
    transition:transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
    padding:10px 14px; border:1px solid #c3ab83; border-radius:10px;
    background:var(--theme-surface,#3a3226); color:var(--theme-text,#fff); font-size:16px; font-weight:600; line-height:1.4;
    white-space:pre-line; width:max-content; max-width:min(340px,calc(100vw - 32px)); box-shadow:0 4px 12px #0004; pointer-events:none; z-index:11001;
}
body .account-avatar-button::before {
    content:''; position:absolute; top:calc(100% + 12px); right:16px; width:10px; height:10px;
    background:var(--theme-surface,#3a3226); border-top:1px solid #c3ab83; border-left:1px solid #c3ab83;
    opacity:0; visibility:hidden; transform:translateY(-35px) scale(.05) rotate(45deg); transform-origin:50% 50%;
    transition:transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
    pointer-events:none; z-index:11002;
}
body:not(.account-menu-hint-closing).account-menu-hint-active .account-avatar-button::after,
body:not(.account-menu-hint-closing) .account-avatar-button:hover::after {
    opacity:1; visibility:visible; transform:scale(1);
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out, visibility 0s;
}
body:not(.account-menu-hint-closing).account-menu-hint-active .account-avatar-button::before,
body:not(.account-menu-hint-closing) .account-avatar-button:hover::before {
    opacity:1; visibility:visible; transform:translateY(0) scale(1) rotate(45deg);
    transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out, visibility 0s;
}
body.account-menu-hint-active .account-avatar-button img { animation:account-menu-nudge 1s ease-in-out 3; }
@keyframes account-menu-nudge {
    0%, 45%, 75%, 100% { transform:translateY(0); }
    25% { transform:translateY(-3px); }
    60% { transform:translateY(-1px); }
}
@media(prefers-reduced-motion:reduce) {
    body .account-avatar-button::after, body .account-avatar-button::before { transition:none !important; }

    body.account-menu-hint-active .account-avatar-button img { animation:none; }
}
.account-popover[hidden] { display:none !important; }
.account-popover { position:absolute; top:calc(100% + 14px); right:0; width:340px; max-height:calc(100dvh - 85px); overflow-y:auto; box-sizing:border-box; padding:16px; border:1px solid var(--theme-border,#48433a); border-radius:10px; background:var(--theme-surface,rgba(36,33,29,.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,#3b3121,#181613 65%)); text-align:center; }
.account-progress-heading { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--theme-muted,#d6c9b4); margin-bottom:10px; }
.account-progress { height:8px; overflow:hidden; background:#453e34; border-radius:10px; }
.account-progress > span { display:block; height:100%; background:linear-gradient(90deg,#c18a16,#ffe991); border-radius:inherit; }
.account-progress-detail { margin:9px 0 20px; font-size:12px; color:var(--theme-muted,#c1bcb3); }
.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 #a48656; 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 #ffe991; 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,#ddceb6); 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,#3c352b); }
.account-avatar-button:focus-visible, .account-actions button:focus-visible { outline:2px solid #ff737b; 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:#cf2631; color:#fff; font-size:12px; font-weight:600; line-height:18px; text-decoration:none; white-space:nowrap; }
 .account-identity .account-shortcut-admin { background:#5e4e35; border:1px solid #ae9265; color:var(--theme-text,#f8f2e9); }
 .account-identity .account-shortcut:hover { filter:brightness(1.2); }
 .account-identity .account-shortcut:focus-visible { outline:2px solid #ff737b; 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(36,33,29,.96)); visibility:hidden; transition:transform .3s ease,visibility .3s; }
 .channel-page #mobile-slide-menu.active { visibility:visible; }
 .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; }
}

/* Streamer YouTube broadcast setup. */
:is(#youtube-broadcast-dialog, #youtube-broadcast-help) { position:fixed; inset:0; margin:auto; width:420px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; padding:24px; border:1px solid var(--theme-border,#48433a); border-radius:8px; background:var(--theme-surface,#111214); color:var(--theme-text,#fff); box-shadow:0 16px 60px #0008; font-family:inherit; text-align:left; }
:is(#youtube-broadcast-dialog, #youtube-broadcast-help)::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(5px); }
:is(#youtube-broadcast-dialog, #youtube-broadcast-help) h2 { margin:0 0 22px; padding:0 0 14px; border-bottom:1px solid var(--theme-border,#48433c); font-size:20px; line-height:28px; font-weight:700; display:flex; align-items:center; gap:10px; }
#youtube-broadcast-dialog .youtube-url-label { display:block; font-size:13px; line-height:20px; font-weight:600; color:var(--theme-muted,#bfbab2); margin-bottom:8px; }
#youtube-broadcast-url { box-sizing:border-box; width:100%; min-height:40px; padding:9px 12px; margin:0; line-height:20px; border:1px solid var(--theme-border,#514b43); border-radius:4px; background:var(--theme-bg,#08090b); color:inherit; font:inherit; font-size:14px; }
.youtube-video-type { display:flex; gap:4px; border:0; padding:4px; margin:20px 0 24px; background:var(--theme-bg,#08090b); border-radius:4px; }
.youtube-video-type legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.youtube-video-type label { flex:1; position:relative; cursor:pointer; }
.youtube-video-type input { position:absolute; opacity:0; width:1px; height:1px; }
.youtube-video-type span { display:block; padding:11px 8px; border-radius:4px; text-align:center; font-size:14px; transition:background .18s,color .18s; }
.youtube-video-type input:checked + span { background:var(--brand-gradient,#bd202c); color:#fff; box-shadow:none; }
.youtube-video-type input:focus-visible + span, #youtube-broadcast-dialog button:focus-visible, #youtube-broadcast-url:focus-visible { outline:2px solid #ff737b; outline-offset:3px; }
.youtube-broadcast-actions { display:flex; gap:10px; }
.youtube-broadcast-actions button { flex:1; min-height:44px; border:1px solid var(--theme-border,#514b43); border-radius:4px; background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:600; line-height:22px; margin:0; padding:10px 12px; cursor:pointer; }
.youtube-broadcast-actions .youtube-broadcast-start { background:var(--brand-gradient,#bd202c); border-color:transparent; color:white; font-weight:700; }

#youtube-broadcast-dialog .youtube-help-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; padding:3px; border:0; border-radius:50%; background:transparent; color:var(--theme-muted,#bfbab2); cursor:pointer; vertical-align:middle; }
#youtube-broadcast-dialog .youtube-help-toggle:hover { color:var(--brand-accent,#f5c842); background:var(--theme-hover,#3c352b); }
#youtube-broadcast-help { width:540px; }
.youtube-help-steps { margin:0 0 24px; padding-left:22px; font-size:14px; line-height:1.8; }
.youtube-help-steps > li { padding-left:4px; margin-bottom:20px; }
.youtube-help-steps > li::marker { color:var(--brand-accent,#f5c842); font-weight:700; }
.youtube-help-steps p { margin:6px 0 12px; color:var(--theme-muted,#bfbab2); }
.youtube-help-steps b { color:var(--theme-text,#fff); }
.youtube-help-example { padding:12px; margin:10px 0; border:1px solid var(--theme-border,#48433a); border-radius:4px; background:var(--theme-bg,#08090b); }
.youtube-help-example > span { display:block; margin-bottom:8px; color:var(--theme-muted,#bfbab2); font-size:12px; }
.youtube-help-example code { display:block; white-space:normal; overflow-wrap:anywhere; font-size:12px; line-height:1.8; user-select:text; }
.youtube-help-example mark { background:rgba(245,200,66,.16); color:var(--theme-text,#fff); }
#youtube-broadcast-help button:focus-visible { outline:2px solid #ff737b; outline-offset:3px; }

/* Keep the existing profile notification visible behind this modal. */
body.account-menu-hint-active #youtube-broadcast-dialog::backdrop, body.account-menu-hint-closing #youtube-broadcast-dialog::backdrop { background:rgba(0,0,0,.2); backdrop-filter:none; }

#youtube-broadcast-url:disabled { opacity:.55; cursor:not-allowed; }
.youtube-video-type:disabled { opacity:.55; }
.youtube-video-type:disabled label { cursor:not-allowed; }

.account-actions button:is([data-account-action="server"],[data-account-action="youtube"]):disabled { opacity:.4; cursor:not-allowed; filter:grayscale(1); }

/* Only the one-character currency unit downloads this brush-font subset. */
@font-face{font-family:'Gwang Brush';src:url('/fonts/gwang-brush.ttf?v=2026091908') format('truetype');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+5149}
.channel-page .account-game-money{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;line-height:1.2}
.channel-page .account-game-money-value{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--theme-text,#f1f0ee)}
.channel-page .account-game-money-unit{font-family:'Gwang Brush',serif;font-size:17px;font-weight:400;color:#ed2639;line-height:1}

/* 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,#111214) !important; color:var(--theme-text,#fff); border:1px solid var(--theme-border,#343024) !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,#48433c);
    background:none; color:var(--theme-text,#f5f3ec); 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,#08090b) !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:#ffe991 !important; box-shadow:0 0 0 1px #ffe99144;
}
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 #ff737b; 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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%) !important;
    background-size:200% auto !important; border:0; color:#fff !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,#30291d); color:var(--theme-muted,#f2e7d4); border:1px solid var(--theme-border,#7b6e58);
}
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,#08090b); 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,#48433c); }
body.channel-page .studio-modal-title { color:var(--theme-text,#f5f3ec); }
body.channel-page .studio-tab-nav { background:transparent; border-bottom:1px solid var(--theme-border,#48433c); }
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,#ff737b); background:transparent; border-bottom-color:#c9212b; }
body.channel-page .stat-btn.active { background:var(--theme-surface,#30291d); color:var(--theme-muted,#ff737b); border-color:#c24d54; }
body.channel-page :is(#admin-log, #studio-server-log, #streamer-apply-section, .station-members-table-wrap) {
    background:var(--theme-bg,#08090b) !important; border:1px solid var(--theme-border,#343024) !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,#111214); color:var(--theme-text,#f5f3ec); border:1px solid var(--theme-border,#343024); 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(28,25,22,.9); border-color:var(--theme-border,#343024); 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 */
/* TazzaEnter: deep black and polished gold. */
:root {
    color-scheme:dark;
    --theme-bg:#08090b;
    --theme-surface:#111214;
    --theme-input:#0d0e10;
    --theme-text:#f5f3ec;
    --theme-muted:#aaa89f;
    --theme-border:#343024;
    --theme-hover:#232117;
    --theme-profile:linear-gradient(155deg,#2b2615,#111214 70%);
    --brand-accent:#f5c842;
    --brand-highlight:#92650d;
    --brand-title:#ffdb63;
    --brand-on-accent:#ffffff;
    --button-accent:#ff747c;
    --brand-gradient:linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%);
    --brand-gradient-hover:linear-gradient(110deg,#b51b26,#dd3943,#b51b26);
    --brand-text-gradient:linear-gradient(100deg,#e5b42d,#ffe991,#e5b42d);
}

:root[data-theme="light"] {
    color-scheme:light;
    --theme-bg:#f6f2e9;
    --theme-surface:#fffdf8;
    --theme-input:#eee7da;
    --theme-text:#28221b;
    --theme-muted:#746755;
    --theme-border:#ddd1bc;
    --theme-hover:#f0e6d5;
    --theme-profile:linear-gradient(155deg,#ebdcc1,#fffaf0 65%);

    --brand-accent:#80571f;
    --button-accent:#b51b26;
    --brand-highlight:#805a09;
    --main-shadow:0 2px 12px rgba(40,30,15,.08);
    --brand-title:#876009;
    --brand-gradient:linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 100%);
    --brand-gradient-hover:linear-gradient(110deg,#b51b26,#dd3943,#b51b26);
    --brand-text-gradient:linear-gradient(100deg,#805a09,#ad811c,#805a09);
}

/* 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:#fffdf8;
    color:#28221b;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page .account-profile {
    background:linear-gradient(155deg,#ebdcc1,#fffaf0 65%);
}
:root[data-theme="light"] body.channel-page .account-actions button {
    color:#28221b;
}
:root[data-theme="light"] body.channel-page .account-actions button:hover {
    background:#f0e6d5;
}

: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:#fffdf8;
}
:root[data-theme="light"] body.channel-page #tabs-area .content-tabs {
    background:#fffdf8;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page #tabs-area #gb-list,
:root[data-theme="light"] body.channel-page #tabs-area .gb-card {
    background:#f6f2e9;
    border-color:#ddd1bc;
    box-shadow:0 2px 8px rgba(54,47,36,.12);
}
body.channel-page #m-gb-list .gb-card {
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
:root:not([data-theme="light"]) body.channel-page #m-gb-list .gb-card {
    border-color:rgba(255,255,255,.16);
}
:root[data-theme="light"] body.channel-page #m-gb-list .gb-card {
    box-shadow:0 2px 8px rgba(54,47,36,.12);
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-header:hover,
:root[data-theme="light"] body.channel-page #m-gb-list .gb-header:hover {
    background:linear-gradient(30deg,#f6f2e9,#fff,#f6f2e9);
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-body {
    background:#fffdf8;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page #tabs-area .gb-input {
    background:#eee7da;
    color:#28221b;
}

:root[data-theme="light"] body.channel-page .chat-section,
:root[data-theme="light"] body.channel-page #chat-form {
    background:#fffdf8;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page #m {
    background:#eee7da;
    color:#28221b;
}
:root[data-theme="light"] body.channel-page #chat-form .btn-gif {
    background:#ebe8e4;
    color:#544d43;
}
:root[data-theme="light"] body.channel-page #chat-form .btn-popup-chat {
    color:#746755;
}
:root[data-theme="light"] body.channel-page #chat-send-status {
    background:#eee7da;
    color:#746755;
}

/* 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(104,94,78,.24),
        0 5px 12px -1.5px rgba(104,94,78,.24);
    transition:transform .3s ease, box-shadow .3s ease;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn::before {
    background:linear-gradient(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 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:#fffdf8;
    transition:inset .2s ease-in-out;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn span {
    color:#28221b;
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn:hover {
    transform:scale(1.05);
    box-shadow:0 4px 18px rgba(201,33,43,.25);
}
:root[data-theme="light"] body.channel-page #mobile-contact-btn:hover::after {
    inset:4px;
    background:#fffdf8;
}

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

/* 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:#f6f2e9;
    border-left-color:#ddd1bc;
    box-shadow:inset 0 0 10px rgba(54,47,36,.08);
}
:root[data-theme="light"] body.channel-page #messages .bubble {
    color:#28221b;
    border:1px solid #ddd1bc;
    box-shadow:1px 1px 7px rgba(54,47,36,.14);
}
:root[data-theme="light"] body.channel-page #messages .bubble.mine {
    background:linear-gradient(30deg,#f0e9df,#f4f1eb);
}
:root[data-theme="light"] body.channel-page #messages .bubble.other {
    background:#fffdf8;
}
:root[data-theme="light"] body.channel-page #messages .nick-title {
    color:#544c3f;
    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(54,47,36,.1);
}
:root[data-theme="light"] body.channel-page.is-typing #messages {
    background:linear-gradient(to top,rgba(246,242,233,.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:#28221b !important;
    border:1px solid #ddd1bc;
    text-shadow:none;
    box-shadow:1px 1px 7px rgba(54,47,36,.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,#151413);
    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(104,94,78,.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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 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,#151413);
    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(201,33,43,.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:#fffdf8;
    border-color:#ddd1bc;
    box-shadow:0 6px 18px rgba(54,47,36,.1);
}
:root[data-theme="light"] body.index-page .streamer-cta-text h3 {
    color:#28221b;
}
:root[data-theme="light"] body.index-page .streamer-cta-text p {
    color:#746755;
}

: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:#fffdf8;
}
: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:#28221b;
}
: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(201,33,43,.25);
}

:root[data-theme="light"] body.channel-page .account-identity .account-shortcut-admin {
    background:#f6f2eb;
    border-color:#cfc2ac;
    color:#51442f;
}
:root[data-theme="light"] body.channel-page .account-identity .account-shortcut-admin:hover {
    background:#ede7dc;
    filter:none;
}

:root[data-theme="light"] body.channel-page #notice-bar {
    background:#fffdf8;
    color:#000;
    border-color:#ddd1bc;
    box-shadow:0 3px 12px rgba(54,47,36,.12);
}
:root[data-theme="light"] body.channel-page #notice-bar.collapsed {
    background:#f7f4f0;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page #notice-toggle-btn {
    color:#94733e;
}

:root[data-theme="light"] body.channel-page .gif-search-row input {
    color:#28221b;
    border-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page .gif-search-row button {
    background:#fffdf8;
    color:#000;
    border-color:#ddd1bc;
    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,#30291d);
    color:var(--theme-text,#fff);
    cursor:pointer;
}
body.channel-page #modal-vote-create .vote-add-option:hover {
    background:var(--theme-hover,#3c352b);
    color:var(--theme-text,#fff);
}
body.channel-page #modal-vote-create .vote-create-actions {
    display:flex;
    gap:10px;
    width:100%;
    margin:0 auto;
}
body.channel-page #modal-vote-create .vote-create-actions > button {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    height:48px;
    min-height:48px;
    min-width:0;
    margin:10px 0 0;
    padding:10px 14px;
    font-size:15px;
    line-height:22px;
}

:root[data-theme="light"] body.channel-page .vote-overlay {
    background:#fffdf8;
    border-color:#ddd1bc;
    box-shadow:0 4px 14px rgba(54,47,36,.12);
    color:#28221b;
}
:root[data-theme="light"] body.channel-page .vote-header {
    background:#eee7da;
    color:#28221b;
}
:root[data-theme="light"] body.channel-page .vote-fold-btn {
    color:#28221b;
}
:root[data-theme="light"] body.channel-page #vote-admin-controls {
    border-top-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page .vote-item {
    background:#f6f2e9;
    border-color:#ddd1bc;
    color:#28221b;
}
:root[data-theme="light"] body.channel-page .vote-item:hover {
    border-color:#c2b9aa;
}
:root[data-theme="light"] body.channel-page .btn-do-vote::after {
    background:#fffdf8;
}
:root[data-theme="light"] body.channel-page .btn-do-vote span {
    color:#28221b;
}
:root[data-theme="light"] body.channel-page .vote-res-row {
    border-bottom-color:#ddd1bc;
}
:root[data-theme="light"] body.channel-page .vote-overlay.user-collapsed {
    background:#f7f4f0;
    border-color:#cfc2ac;
}
:root[data-theme="light"] body.channel-page .vote-overlay.user-collapsed .vote-fold-btn {
    color:#94733e;
}

/* 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(104,94,78,.24),
        0 5px 12px -1.5px rgba(104,94,78,.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(115deg,#8e101b 0%,#c9212b 24%,#db3941 46%,#ad1520 53%,#d12a34 78%,#97111c 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:#fffdf8;
    transition:inset .2s ease-in-out;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo) span {
    color:#28221b;
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo):hover {
    transform:scale(1.05);
    box-shadow:0 4px 18px rgba(201,33,43,.25);
}
:root[data-theme="light"] body.channel-page :is(#tabs-area .gb-btn, #uploadVideo):hover::after {
    inset:4px;
    background:#fffdf8;
}


/* 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,#48433a); border-radius:14px;
    background:var(--theme-surface,#24211d); color:var(--theme-text,#f5f3f1); 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,#48433a); 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:#9f8150; }
#settings-theme-toggle span { display:block; width:20px; height:20px; border-radius:50%; background:#fffdf8; transform:translateX(18px); transition:transform .18s; }
#settings-theme-toggle[aria-checked="false"] { background:#a09b93; }
#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,#6d6558); border-radius:8px; background:var(--theme-input,#181511); color:inherit; font:inherit; }
#account-settings .settings-note { margin:0; color:var(--theme-muted,#bab5ad); font-size:12px; line-height:1.6; }
#account-settings :is(button,select):focus-visible { outline:2px solid #b3925d; outline-offset:3px; }
#account-settings .settings-heading button:hover, #account-settings .settings-password:hover { background:var(--theme-hover,#3c352b); }
@media(prefers-reduced-motion:reduce) { #settings-theme-toggle span { transition:none; } }

.index-page #lobby-main { background-color:var(--theme-bg,#08090b); }

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

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


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

.index-page .hero-live-pill{box-shadow:0 3px 12px #65192340}

/* Seotda heart ranks and the channel-only manager role. */
.seotda-rank-badge { position:relative; display:inline-flex; flex:0 0 32px; width:32px; height:28px; vertical-align:middle; overflow:hidden; border-radius:5px; }
.seotda-rank-badge > .seotda-rank-icon { display:block; width:32px; height:28px; object-fit:contain; }
.seotda-rank-badge::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%); transform:translateX(-130%); animation:seotda-rank-shine 5s ease-in-out infinite; }
@keyframes seotda-rank-shine { 0%,65% { transform:translateX(-130%); } 90%,100% { transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce) { .seotda-rank-badge::after { display:none; } }

/* Streamer YouTube broadcast setup. */
:is(#youtube-broadcast-dialog, #youtube-broadcast-help) { position:fixed; inset:0; margin:auto; width:420px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; padding:24px; border:1px solid var(--theme-border,#48433a); border-radius:8px; background:var(--theme-surface,#111214); color:var(--theme-text,#fff); box-shadow:0 16px 60px #0008; font-family:inherit; text-align:left; }
:is(#youtube-broadcast-dialog, #youtube-broadcast-help)::backdrop { background:rgba(0,0,0,.8); backdrop-filter:blur(5px); }
:is(#youtube-broadcast-dialog, #youtube-broadcast-help) h2 { margin:0 0 22px; padding:0 0 14px; border-bottom:1px solid var(--theme-border,#48433c); font-size:20px; line-height:28px; font-weight:700; display:flex; align-items:center; gap:10px; }
#youtube-broadcast-dialog .youtube-url-label { display:block; font-size:13px; line-height:20px; font-weight:600; color:var(--theme-muted,#bfbab2); margin-bottom:8px; }
#youtube-broadcast-url { box-sizing:border-box; width:100%; min-height:40px; padding:9px 12px; margin:0; line-height:20px; border:1px solid var(--theme-border,#514b43); border-radius:4px; background:var(--theme-bg,#08090b); color:inherit; font:inherit; font-size:14px; }
.youtube-video-type { display:flex; gap:4px; border:0; padding:4px; margin:20px 0 24px; background:var(--theme-bg,#08090b); border-radius:4px; }
.youtube-video-type legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.youtube-video-type label { flex:1; position:relative; cursor:pointer; }
.youtube-video-type input { position:absolute; opacity:0; width:1px; height:1px; }
.youtube-video-type span { display:block; padding:11px 8px; border-radius:4px; text-align:center; font-size:14px; transition:background .18s,color .18s; }
.youtube-video-type input:checked + span { background:var(--brand-gradient,#bd202c); color:#fff; box-shadow:none; }
.youtube-video-type input:focus-visible + span, #youtube-broadcast-dialog button:focus-visible, #youtube-broadcast-url:focus-visible { outline:2px solid #ff737b; outline-offset:3px; }
.youtube-broadcast-actions { display:flex; gap:10px; }
.youtube-broadcast-actions button { flex:1; min-height:44px; border:1px solid var(--theme-border,#514b43); border-radius:4px; background:transparent; color:inherit; font:inherit; font-size:14px; font-weight:600; line-height:22px; margin:0; padding:10px 12px; cursor:pointer; }
.youtube-broadcast-actions .youtube-broadcast-start { background:var(--brand-gradient,#bd202c); border-color:transparent; color:white; font-weight:700; }

#youtube-broadcast-dialog .youtube-help-toggle { display:inline-flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; padding:3px; border:0; border-radius:50%; background:transparent; color:var(--theme-muted,#bfbab2); cursor:pointer; vertical-align:middle; }
#youtube-broadcast-dialog .youtube-help-toggle:hover { color:var(--brand-accent,#f5c842); background:var(--theme-hover,#3c352b); }
#youtube-broadcast-help { width:540px; }
.youtube-help-steps { margin:0 0 24px; padding-left:22px; font-size:14px; line-height:1.8; }
.youtube-help-steps > li { padding-left:4px; margin-bottom:20px; }
.youtube-help-steps > li::marker { color:var(--brand-accent,#f5c842); font-weight:700; }
.youtube-help-steps p { margin:6px 0 12px; color:var(--theme-muted,#bfbab2); }
.youtube-help-steps b { color:var(--theme-text,#fff); }
.youtube-help-example { padding:12px; margin:10px 0; border:1px solid var(--theme-border,#48433a); border-radius:4px; background:var(--theme-bg,#08090b); }
.youtube-help-example > span { display:block; margin-bottom:8px; color:var(--theme-muted,#bfbab2); font-size:12px; }
.youtube-help-example code { display:block; white-space:normal; overflow-wrap:anywhere; font-size:12px; line-height:1.8; user-select:text; }
.youtube-help-example mark { background:rgba(245,200,66,.16); color:var(--theme-text,#fff); }
#youtube-broadcast-help button:focus-visible { outline:2px solid #ff737b; outline-offset:3px; }

/* Keep the existing profile notification visible behind this modal. */
body.account-menu-hint-active #youtube-broadcast-dialog::backdrop, body.account-menu-hint-closing #youtube-broadcast-dialog::backdrop { background:rgba(0,0,0,.2); backdrop-filter:none; }

#youtube-broadcast-url:disabled { opacity:.55; cursor:not-allowed; }
.youtube-video-type:disabled { opacity:.55; }
.youtube-video-type:disabled label { cursor:not-allowed; }

.account-actions button:is([data-account-action="server"],[data-account-action="youtube"]):disabled { opacity:.4; cursor:not-allowed; filter:grayscale(1); }

#youtube-live-frame { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; background:#000; }
#youtube-live-frame.youtube-shorts { width:auto; max-width:100%; aspect-ratio:9/16; left:50%; right:auto; transform:translateX(-50%); }

/* Portrait OBS streams fill the existing stage height without cropping. */
.channel-page #video-wrapper.native-portrait > video { object-fit:contain; background:#000; }

/* reels-viewer.css */
/* Viewer fills the viewport beneath the still-interactive global navigation. */
:is(.index-page,.channel-page) .reels-viewer[hidden] { display:none !important; }
:is(.index-page,.channel-page) .reels-viewer {
    position:fixed; inset:var(--reels-header-bottom,64px) 0 0 var(--reels-sidebar-right,0px); z-index:1001;
    display:flex; flex-direction:column; gap:10px; padding:12px 24px max(12px,env(safe-area-inset-bottom));
    background:#080808; color:#f6f2e9; overflow:hidden; overscroll-behavior:contain;
}
:is(.index-page,.channel-page).reels-viewer-open { overflow:hidden; }
:is(.index-page,.channel-page) .reels-viewer button {
    display:grid; place-items:center; width:42px; height:42px; padding:0; margin:0;
    border:1px solid #4b4438; border-radius:50%; background:#24211b; color:#fff3d5;
}
:is(.index-page,.channel-page) .reels-viewer button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:is(.index-page,.channel-page) .reels-viewer button:hover { background:#3b3324; }
:is(.index-page,.channel-page) .reels-viewer button:disabled { opacity:.3; cursor:default; }
:is(.index-page,.channel-page) .reels-viewer button[hidden] { display:none; }
:is(.index-page,.channel-page) .reels-viewer-body { position:relative; display:flex; flex:1; min-height:0; align-items:center; justify-content:center; overflow:hidden; }
:is(.index-page,.channel-page) .reels-stage { position:relative; height:100%; max-width:100%; aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden; touch-action:pan-x; }
:is(.index-page,.channel-page) .reels-stage video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
:is(.index-page,.channel-page) .reels-playback-notice { position:absolute; inset:20% 18px auto; display:grid; justify-items:center; gap:12px; text-align:center; pointer-events:none; }
:is(.index-page,.channel-page) .reels-playback-notice p { margin:0; font-size:14px; line-height:1.6; color:#fff; text-shadow:0 1px 6px #000; }
:is(.index-page,.channel-page) .reels-playback-notice p:empty { display:none; }
:is(.index-page,.channel-page) .reels-playback-notice button { width:auto; min-width:80px; padding:8px 20px; border-radius:22px; pointer-events:auto; }
:is(.index-page,.channel-page) .reels-viewer-navigation { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:grid; gap:12px; }
:is(.index-page,.channel-page) .reels-media-controls {
    position:absolute; top:12px; right:12px; z-index:2; color:#fff; touch-action:auto;
}
:is(.index-page,.channel-page) .reels-media-controls button { width:32px; height:32px; flex:none; border:0; background:#171717aa; font-size:14px; }
:is(.index-page,.channel-page) .reels-media-controls [data-reels-mute] { width:auto; padding:0 8px; border-radius:6px; font-size:11px; white-space:nowrap; }
:is(.index-page,.channel-page) .reels-streamer-info { position:absolute; left:0; right:0; bottom:0; padding:40px 16px 18px; background:linear-gradient(transparent,#000b); color:#fff; pointer-events:none; }
:is(.index-page,.channel-page) .reels-streamer-info a { display:inline-flex; align-items:center; gap:10px; max-width:100%; color:#fff; text-decoration:none; pointer-events:auto; }
:is(.index-page,.channel-page) .reels-streamer-info img { width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; border:1px solid #dfc48b; }
:is(.index-page,.channel-page) .reels-streamer-info a > span { display:grid; gap:3px; min-width:0; }
:is(.index-page,.channel-page) .reels-streamer-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
:is(.index-page,.channel-page) .reels-streamer-info a span span { color:#dfc48b; font-size:11px; }
:is(.index-page,.channel-page) .reels-streamer-info h2 { margin:10px 0 0; font-size:13px; line-height:1.5; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:600px) {
    :is(.index-page,.channel-page) .reels-viewer { padding:6px 8px max(8px,env(safe-area-inset-bottom)); gap:6px; }
    :is(.index-page,.channel-page) .reels-viewer button { width:36px; height:36px; }
    :is(.index-page,.channel-page) .reels-viewer-navigation { right:4px; gap:10px; }
    :is(.index-page,.channel-page) .reels-media-controls button { width:30px; height:30px; }
    :is(.index-page,.channel-page) .reels-media-controls [data-reels-mute] { width:auto; }
}


/* A still frame carries the outgoing video while the next source starts. */
:is(.index-page,.channel-page) .reels-transition-frame { position:absolute; overflow:hidden; background:#000; border-radius:12px; pointer-events:none; }
:is(.index-page,.channel-page) .reels-transition-frame > :is(canvas,img) { display:block; width:100%; height:100%; object-fit:contain; }
:is(.index-page,.channel-page) .reels-viewer[aria-busy="true"] .reels-stage,
:is(.index-page,.channel-page) .reels-transition-frame { will-change:transform,opacity; }

:is(.index-page,.channel-page) .reels-viewer .reels-back { position:absolute; top:12px; left:12px; z-index:3; border:0; background:#171717aa; }