.channel-join-overlay{position:fixed!important;inset:0!important;z-index:2147483000!important;display:none!important;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,18,.78);backdrop-filter:blur(6px)}
.channel-join-overlay.show{display:flex!important;animation:channelJoinFade .25s ease}
.channel-join-modal{width:min(92vw,420px);border-radius:28px;overflow:hidden;border:1px solid rgba(255,207,64,.34);background:linear-gradient(180deg,rgba(18,24,38,.98),rgba(10,14,24,.98));box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,186,8,.08),0 0 34px rgba(249,115,22,.18);color:#fff;transform:translateY(10px) scale(.97);opacity:0;animation:channelJoinUp .35s ease forwards}
.channel-join-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#111827}
.channel-join-head h3{margin:0;font-size:clamp(16px,4.5vw,22px);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.channel-join-close{width:36px;height:36px;border:none;border-radius:50%;background:rgba(17,24,39,.15);color:#111827;font-size:20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.channel-join-close:hover{transform:rotate(90deg) scale(1.05)}
.channel-join-body{padding:22px 20px 18px;text-align:center;position:relative;background:radial-gradient(circle at top,rgba(250,204,21,.10),transparent 38%),radial-gradient(circle at bottom right,rgba(59,130,246,.12),transparent 36%)}
.channel-join-logo-wrap{width:104px;height:104px;margin:0 auto 12px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#ffd54a,#7c3aed);box-shadow:0 0 0 6px rgba(251,191,36,.08),0 18px 30px rgba(0,0,0,.22)}
.channel-join-logo{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#111827}
.channel-join-name{font-size:30px;font-weight:900;line-height:1.06;letter-spacing:.01em;margin:6px 0 10px}
.channel-join-text{font-size:14px;line-height:1.65;color:rgba(255,255,255,.82);margin:0 auto 16px;max-width:320px}
.channel-join-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;border-radius:18px;padding:15px 16px;background:linear-gradient(135deg,#f59e0b,#facc15);box-shadow:0 16px 34px rgba(245,158,11,.28);color:#111827;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:.02em;transition:.2s}
.channel-join-btn:hover{transform:translateY(-1px) scale(1.01)}
.channel-join-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.channel-join-hide{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.78);cursor:pointer}
.channel-join-hide input{width:18px;height:18px;accent-color:#f59e0b}
.channel-join-secondary{min-width:104px;border:none;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;padding:11px 16px;font-weight:800;cursor:pointer}
@keyframes channelJoinFade{from{opacity:0}to{opacity:1}}
@keyframes channelJoinUp{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:480px){.channel-join-name{font-size:26px}.channel-join-head{padding:14px 16px}.channel-join-body{padding:18px 16px 16px}.channel-join-btn{font-size:18px;padding:14px}.channel-join-foot{flex-wrap:wrap}.channel-join-secondary{width:100%}}