:root{
    --bg:#090b10;
    --panel:#11151d;
    --panel2:#161b25;
    --line:#252c3a;
    --text:#fbf6f7;
    --muted:#98a2b3;
    --accent:#ff5c6a;
    --accent2:#ff8792;
    --good:#34d399;
    --danger:#fb7185;
    --shadow:0 24px 70px rgba(0,0,0,.35);
    --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#41191e 0,#090b10 42%,#07090d 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.site-header,.room-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(9,11,16,.72);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}
.brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--accent),#ff3b5b);box-shadow:0 12px 35px rgba(255,92,106,.28)}
.brand-mark.small{width:36px;height:36px;border-radius:11px;font-size:13px}
.landing{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:70px 0}
.hero-card{padding:clamp(28px,6vw,72px);border:1px solid rgba(255,255,255,.08);border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,92,106,.16);filter:blur(70px);top:-180px;right:-120px;pointer-events:none}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;color:#ffaab2}
h1{font-size:clamp(38px,6vw,74px);line-height:.98;letter-spacing:-.055em;margin:14px 0 22px;max-width:800px}
.hero-card>p{color:var(--muted);font-size:18px;max-width:720px;line-height:1.6}
.create-form{margin-top:34px;position:relative}
.field-label,label{display:grid;gap:8px;color:#c8ced9;font-size:14px;font-weight:700}
input{width:100%;border:1px solid var(--line);background:#0c1017;color:var(--text);border-radius:12px;padding:14px 15px;outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,92,106,.14)}
.big-input{font-size:17px;padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.control-choice{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:16px 0;display:flex;gap:22px;align-items:center}
.control-choice legend{padding:0 8px;color:var(--muted);font-size:12px;font-weight:800}
.control-choice label{display:flex;align-items:center;gap:8px}
.control-choice input,.radio-line input{width:auto}
.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:850;transition:.18s ease}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg,var(--accent),#eb4251);color:white}
.btn.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.secondary{background:#22283a;color:white;border:1px solid #313a50}
.btn.subtle{background:transparent;color:#c4cad5;border:1px solid var(--line)}
.btn.large{padding:16px 22px;font-size:16px}
.btn.full{width:100%}
.feature-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;color:#c5cbd6}
.feature-row span{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:13px}
.notice{padding:12px 14px;border-radius:12px;margin:14px 0;font-size:14px}
.notice.error{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.32);color:#fecdd3}
.notice.success{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.32);color:#a7f3d0}
.auth-card{width:min(480px,calc(100% - 32px));margin:7vh auto;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.auth-card h1{font-size:38px;margin:18px 0 10px}
.stack{display:grid;gap:14px;margin:22px 0}
.muted{color:var(--muted);line-height:1.55}
.tiny{font-size:12px}
.text-link{display:block;text-align:center;margin-top:14px;color:#ffadb4}
.room-meta{display:flex;gap:10px;align-items:center;font-size:13px}
.room-code,.viewer-count,.host-badge{background:#141925;border:1px solid var(--line);border-radius:999px;padding:8px 11px;color:var(--text)}
.viewer-count{font:inherit;cursor:pointer}
.host-badge{font-weight:900;color:#ffbac0}
.room-shell{width:min(1520px,calc(100% - 28px));margin:20px auto;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}
.watch-column{min-width:0;display:grid;gap:16px;align-content:start}
.player-card,.invite-card,.media-card,.chat-column{background:rgba(17,21,29,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.player-card{overflow:hidden}
.player-wrap{aspect-ratio:16/9;background:#000;position:relative;overflow:hidden}
.player-surface{position:absolute!important;inset:0;width:100%!important;height:100%!important}
#youtubeWrap{background:#000}
#youtubePlayer,#youtubeWrap iframe,.player-wrap video{width:100%!important;height:100%!important;display:block;border:0}
.tap-sync{position:absolute;z-index:3;border:1px solid rgba(255,255,255,.18);background:rgba(10,12,18,.88);backdrop-filter:blur(10px);color:#fff;padding:14px 18px;border-radius:999px;font-weight:900}
.player-error{position:absolute;z-index:5;left:16px;right:16px;bottom:16px;background:rgba(120,24,40,.94);color:#fff;padding:13px 15px;border-radius:12px;font-size:13px;display:grid;gap:4px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.player-error-title{font-size:14px}
.player-error-text{line-height:1.45;color:#ffe4e8}
.sync-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-top:1px solid var(--line);font-size:13px;color:#c3cad6}
.compat-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-top:1px solid var(--line);background:#0d121a}
.compat-summary{display:flex;align-items:center;gap:10px;min-width:0}
.compat-summary>div{display:grid;gap:2px;min-width:0}
.compat-summary strong{font-size:13px;color:#e8ebf2}
.compat-summary span:not(.compat-icon){font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compat-icon{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:950;background:#202735;color:#aab3c3}
.compat-bar.state-good .compat-icon{background:rgba(52,211,153,.14);color:#6ee7b7}
.compat-bar.state-warn .compat-icon{background:rgba(251,191,36,.14);color:#fcd34d}
.compat-bar.state-bad .compat-icon{background:rgba(251,113,133,.14);color:#fda4af}
.compat-toggle{border:0;background:transparent;color:#ffadb4;font-size:12px;font-weight:850;padding:6px 2px;white-space:nowrap}
.compat-panel{border-top:1px solid var(--line);padding:14px;background:#0b1017}
.compat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.compat-item{border:1px solid #202837;background:#111720;border-radius:11px;padding:10px;display:grid;gap:5px;min-width:0}
.compat-item span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7f8a9c;font-weight:850}
.compat-item strong{font-size:12px;overflow-wrap:anywhere}
.compat-good{color:#6ee7b7!important}
.compat-warn{color:#fcd34d!important}
.compat-bad{color:#fda4af!important}
.compat-note{font-size:11px;color:var(--muted);line-height:1.5;margin:11px 2px 0}
.sync-actions{display:flex;gap:8px}
.sync-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:7px;box-shadow:0 0 14px rgba(52,211,153,.8)}
.sync-dot.bad{background:var(--danger);box-shadow:0 0 14px rgba(251,113,133,.6)}
.invite-card,.media-card{padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.invite-card>div,.media-card>div{display:grid;gap:6px;min-width:0}
.invite-card strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-card small,.media-card p{color:var(--muted);margin:0;font-size:12px}
.media-form{display:flex;gap:8px;width:min(520px,60%)}
.chat-column{height:calc(100vh - 112px);position:sticky;top:92px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}
.chat-head>div{display:grid;gap:5px}
.chat-close{display:none;border:0;background:transparent;color:white;font-size:28px}
.messages{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.message{background:#171d28;border:1px solid #242c3b;border-radius:14px;padding:11px 12px}
.message-meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-bottom:5px}
.message-meta strong{color:#ffc0c6}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-size:14px}
.chat-form{padding:12px;border-top:1px solid var(--line);display:flex;gap:8px}
.chat-fab{display:none}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.64);z-index:50;display:grid;place-items:center;padding:20px}
.modal-card{width:min(460px,100%);background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);position:relative}
.modal-x{position:absolute;right:14px;top:10px;border:0;background:transparent;color:white;font-size:28px}
.modal-card h2{margin:10px 0 18px}
.radio-line{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin:9px 0;background:#111620}
[hidden]{display:none!important}
code{background:#0c1017;border:1px solid var(--line);padding:2px 5px;border-radius:6px}

@media (max-width: 900px){
    .room-shell{grid-template-columns:1fr;margin-bottom:82px}
    .chat-column{position:fixed;z-index:40;left:0;right:0;bottom:0;top:auto;height:min(76vh,640px);border-radius:22px 22px 0 0;transform:translateY(110%);transition:transform .22s ease}
    .chat-column.open{transform:translateY(0)}
    .chat-close{display:block}
    .chat-fab{display:block;position:fixed;z-index:35;right:18px;bottom:18px;border:0;border-radius:999px;padding:13px 17px;background:var(--accent);color:white;font-weight:900;box-shadow:var(--shadow)}
    .media-card,.invite-card{align-items:stretch;flex-direction:column}
    .media-form{width:100%}
}
@media (max-width: 640px){
    .site-header,.room-header{height:62px;padding:0 14px}
    .site-header .brand span:last-child,.room-header .brand span:last-child{display:none}
    .room-code{display:none}
    .landing{padding:26px 0}
    .hero-card{border-radius:22px;padding:24px 18px}
    .hero-card h1{font-size:42px}
    .form-grid{grid-template-columns:1fr}
    .control-choice{align-items:flex-start;flex-direction:column;gap:10px}
    .room-shell{width:calc(100% - 16px);margin:8px auto}
    .player-card,.invite-card,.media-card{border-radius:14px}
    .player-wrap{aspect-ratio:16/9}
    .sync-bar{gap:8px}
    .sync-actions .btn{padding:9px 10px;font-size:12px}
    .compat-grid{grid-template-columns:1fr 1fr}
    .compat-summary span:not(.compat-icon){max-width:240px}
    .invite-card,.media-card{padding:14px}
    .media-form{flex-direction:column}
}

@media (max-width: 430px){
    .compat-grid{grid-template-columns:1fr}
    .compat-summary span:not(.compat-icon){max-width:190px}
}


/* V1.4 custom media controls */
.player-controls{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#0a0e15;border-top:1px solid var(--line);min-width:0}
.media-control{height:36px;min-width:36px;border:1px solid #273042;background:#151b27;color:#fff;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;padding:0 10px}
.media-control:hover:not(:disabled){background:#20283a}
.media-control:disabled{opacity:.36;cursor:not-allowed}
.media-control-main{font-size:16px}
.media-control-wide{gap:6px;white-space:nowrap}
.media-control.casting{border-color:#6ee7b7;color:#6ee7b7}
.media-time{font-variant-numeric:tabular-nums;font-size:12px;color:#c8cfdb;min-width:38px;text-align:center}
.seek-bar,.volume-bar{appearance:none;-webkit-appearance:none;height:5px;padding:0;border:0;border-radius:999px;background:#30384a;box-shadow:none}
.seek-bar{flex:1;min-width:70px}
.volume-bar{width:76px}
.seek-bar::-webkit-slider-thumb,.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#ff7581;border:2px solid #fff}
.seek-bar::-moz-range-thumb,.volume-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#ff7581;border:2px solid #fff}
.seek-bar:disabled{opacity:.4}
.control-hint{padding:6px 13px 8px;background:#0a0e15;color:#778196;font-size:10px;border-top:1px solid rgba(255,255,255,.035)}

/* People */
.people-modal-card{width:min(620px,100%);max-height:min(760px,88vh);overflow:auto}
.people-list{display:grid;gap:9px;margin-top:14px}
.people-list.compact{margin-top:10px}
.person-row{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);border-radius:13px;background:#111720}
.person-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff5c6b,#ff3d5a);font-weight:950}
.person-avatar.banned{background:#39202a;color:#fda4af}
.person-info{display:grid;gap:3px;min-width:0;flex:1}
.person-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-badges{font-size:11px;color:var(--muted)}
.person-actions{display:flex;gap:6px}
.person-action{border:1px solid var(--line);background:#1b2230;color:#e8ebf2;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:850}
.person-action.kick{color:#fcd34d}.person-action.ban{color:#fda4af}.person-action.unban{color:#86efac}
.modal-divider{height:1px;background:var(--line);margin:20px 0}
.banned-section{margin-top:20px}

/* Clear room events in chat */
.system-message{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;padding:2px 4px;color:#8893a7;text-align:center}
.system-message-body{font-size:11px;font-weight:750}
.system-time{font-size:9px;color:#626d80}
.chat-form{position:relative;align-items:center}
.emoji-wrap{position:relative;flex:0 0 auto}
.emoji-btn{width:40px;height:42px;border:1px solid var(--line);border-radius:11px;background:#171d28;color:#fff;font-size:20px}
.emoji-picker{position:absolute;left:0;bottom:50px;width:244px;padding:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;background:#151b25;border:1px solid #2d3546;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.42);z-index:60}
.emoji-picker button{border:0;background:transparent;border-radius:8px;font-size:21px;padding:5px;line-height:1}
.emoji-picker button:hover{background:#252d3c}
.chat-form input{min-width:0}

.toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(560px,calc(100% - 28px));background:#202737;border:1px solid #343e52;color:#fff;padding:11px 15px;border-radius:999px;box-shadow:var(--shadow);font-size:13px;font-weight:750;text-align:center}

@media (max-width:760px){
    .player-controls{gap:6px;padding:8px}
    .volume-bar{display:none}
    .media-control-wide span{display:none}
    .media-control-wide{min-width:36px;padding:0 8px}
    .media-time{font-size:10px;min-width:34px}
}
@media (max-width:460px){
    .player-controls{flex-wrap:wrap}
    .seek-bar{order:10;flex-basis:100%;width:100%}
    .current-time{display:none}
    .person-row{align-items:flex-start}
    .person-actions{flex-direction:column}
    .emoji-picker{width:220px;grid-template-columns:repeat(6,1fr)}
}

/* V1.5 player protection / casting */
.player-wrap,
.player-surface{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
.media-control.cast-available{
    border-color:rgba(255,92,106,.7);
}
.media-control.casting{
    background:rgba(255,92,106,.18);
    border-color:#ff5c6a;
    color:#ffd6da;
}

/* V1.6 provider players */
.seek-bar:disabled{opacity:.45;cursor:not-allowed}

/* V1.7 one-tap playback unlock */
.playback-unlock{
    display:flex;
    align-items:center;
    gap:12px;
    max-width:min(430px,calc(100% - 28px));
    text-align:left;
    padding:14px 18px;
    border-radius:16px;
    background:rgba(10,12,18,.94);
    box-shadow:0 14px 42px rgba(0,0,0,.42);
}
.playback-unlock .unlock-icon{
    width:38px;height:38px;flex:0 0 38px;
    display:grid;place-items:center;
    border-radius:50%;
    background:rgba(255,92,106,.22);
    font-size:18px;
}
.playback-unlock .unlock-copy{display:grid;gap:2px}
.playback-unlock .unlock-copy strong{font-size:14px;color:#fff}
.playback-unlock .unlock-copy small{font-size:11px;line-height:1.35;color:#aeb7c7;font-weight:650}
#youtubeWrap iframe{pointer-events:none}


/* V1.8 shared media: images, audio and playlists */
.image-stage{
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 40%,rgba(255,92,106,.12),transparent 42%),
        #05070a;
}
.image-stage img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
}
.stage-title{
    position:absolute;
    left:14px;
    bottom:14px;
    max-width:calc(100% - 28px);
    padding:8px 11px;
    border-radius:10px;
    background:rgba(5,7,10,.72);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.audio-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:34px;
    background:
        radial-gradient(circle at 35% 45%,rgba(255,92,106,.24),transparent 32%),
        radial-gradient(circle at 70% 55%,rgba(255,59,91,.12),transparent 32%),
        #080b12;
}
.audio-art{
    width:min(180px,28vw);
    aspect-ratio:1;
    flex:0 0 auto;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:clamp(48px,8vw,92px);
    background:linear-gradient(145deg,#151b28,#06080d);
    border:10px solid #20283a;
    box-shadow:0 18px 55px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,255,255,.03);
}
.audio-copy{display:grid;gap:7px;min-width:0;max-width:480px}
.audio-copy strong{font-size:clamp(22px,4vw,42px);line-height:1.05;overflow-wrap:anywhere}
.audio-copy small{color:var(--muted)}
#audioPlayer{display:none!important}

.media-card-wide{align-items:flex-start}
.media-form-rich{
    width:min(700px,68%);
    display:grid;
    grid-template-columns:minmax(120px,.65fr) minmax(240px,1.5fr) auto;
    align-items:end;
}
.media-form-actions{display:flex;gap:8px}

.playlist-card{
    background:rgba(17,21,29,.92);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.playlist-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    border-bottom:1px solid var(--line);
}
.playlist-head>div:first-child{display:grid;gap:4px}
.playlist-head-actions{display:flex;align-items:center;gap:9px}
.playlist-count{
    color:var(--muted);
    font-size:12px;
    font-weight:750;
}
.playlist-clear{padding:7px 10px;font-size:11px}
.playlist-list{display:grid}
.playlist-empty{
    color:var(--muted);
    padding:22px 18px;
    text-align:center;
    font-size:13px;
}
.playlist-item{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.055);
    transition:.16s ease;
}
.playlist-item:last-child{border-bottom:0}
.playlist-item.current{
    background:linear-gradient(90deg,rgba(255,92,106,.14),rgba(255,92,106,.035));
    box-shadow:inset 3px 0 0 var(--accent);
}
.playlist-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#1b2230;
    border:1px solid #293246;
    font-weight:950;
}
.playlist-copy{display:grid;gap:3px;min-width:0;flex:1}
.playlist-copy strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:13px;
}
.playlist-copy span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--muted);
    font-size:10px;
}
.playlist-actions{display:flex;gap:5px;flex:0 0 auto}
.playlist-action{
    min-width:30px;
    height:30px;
    padding:0 8px;
    border:1px solid var(--line);
    background:#171e2b;
    color:#dbe1eb;
    border-radius:8px;
    font-size:11px;
    font-weight:850;
}
.playlist-action:hover:not(:disabled){background:#252e40}
.playlist-action:disabled{opacity:.3;cursor:not-allowed}
.playlist-action.play{color:#ffc0c6}
.playlist-action.remove{color:#fda4af;font-size:17px}

@media (max-width:900px){
    .media-form-rich{width:100%;grid-template-columns:1fr 1fr}
    .media-form-actions{grid-column:1/-1}
}
@media (max-width:640px){
    .audio-stage{gap:14px;padding:20px}
    .audio-art{width:110px;border-width:7px}
    .media-form-rich{grid-template-columns:1fr}
    .media-form-actions{grid-column:auto}
    .playlist-actions{gap:3px}
    .playlist-action{min-width:28px;padding:0 6px}
}
@media (max-width:460px){
    .audio-stage{flex-direction:column;text-align:center}
    .audio-art{width:96px}
    .playlist-item{align-items:flex-start}
    .playlist-actions{display:grid;grid-template-columns:repeat(2,30px)}
}


/* V1.9 now-playing status */
.sync-status-line{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
}
.sync-divider{color:#5f6878}
.now-playing-label{
    min-width:0;
    max-width:min(52vw,650px);
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.now-playing-label strong{color:#f0f2f7;font-weight:800}

@media (max-width:700px){
    .sync-bar{align-items:flex-start}
    .sync-status-line{flex-wrap:wrap}
    .sync-divider{display:none}
    .now-playing-label{
        flex-basis:100%;
        max-width:70vw;
        padding-left:15px;
        font-size:11px;
    }
}

/* V1.11 relay diagnostics */
.relay-diagnostic{
    margin-top:4px;
    padding-top:7px;
    border-top:1px solid rgba(255,255,255,.14);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    opacity:.95;
}

/* Vewaro brand refresh */
:root{
    --accent:#ff3544;
    --accent2:#f90b33;
    --brand-cyan:#13d4f4;
    --brand-purple:#ff1c29;
}
.brand-logo{
    display:block;
    width:168px;
    max-height:52px;
    object-fit:contain;
    object-position:left center;
}
.vewaro-brand{gap:0}
.auth-logo{
    display:block;
    width:min(230px,72%);
    height:auto;
    margin:0 auto 10px;
}
.auth-card{text-align:left}
.auth-card>.auth-logo+ .eyebrow,
.auth-card>.auth-logo+ h1{margin-top:18px}

.vewaro-header{
    height:78px;
    padding-inline:clamp(18px,4vw,48px);
    background:rgba(7,9,14,.78);
}
.vewaro-header .brand-logo{width:178px}
.header-tag{
    color:#9ba7b9;
    font-size:12px;
    font-weight:750;
    letter-spacing:.02em;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    background:rgba(255,255,255,.035);
}

.vewaro-home{
    background:
        radial-gradient(circle at 16% 8%,rgba(255,28,41,.17),transparent 29%),
        radial-gradient(circle at 83% 10%,rgba(19,212,244,.12),transparent 28%),
        radial-gradient(circle at 50% 100%,rgba(255,41,66,.08),transparent 42%),
        #07090e;
}
.vewaro-landing{
    width:min(1240px,calc(100% - 32px));
    padding:58px 0 34px;
}
.vewaro-hero{position:relative}
.vewaro-hero:before{
    content:"";
    position:absolute;
    left:-8%;
    top:70px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,53,68,.11);
    filter:blur(80px);
    pointer-events:none;
}
.hero-copy{
    max-width:900px;
    margin:0 auto 38px;
    text-align:center;
    position:relative;
    z-index:1;
}
.hero-copy .eyebrow{
    color:#ffaab4;
    letter-spacing:.18em;
}
.hero-copy h1{
    max-width:none;
    margin:15px 0 20px;
    font-size:clamp(44px,7.2vw,88px);
    line-height:.93;
}
.hero-copy h1 span{
    background:linear-gradient(90deg,#ff242f 10%,#ff4757 48%,#18d6ee 88%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.hero-copy>p{
    max-width:750px;
    margin:0 auto;
    color:#9ba5b6;
    font-size:clamp(16px,2vw,19px);
    line-height:1.65;
}
.hero-features{justify-content:center;margin-top:23px}
.hero-features span{
    background:rgba(255,255,255,.035);
    border-color:rgba(255,255,255,.065);
}

.landing-actions{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);
    gap:18px;
    align-items:stretch;
    position:relative;
    z-index:1;
}
.action-card{
    position:relative;
    overflow:hidden;
    padding:clamp(22px,3vw,34px);
    border:1px solid rgba(255,255,255,.085);
    border-radius:26px;
    background:linear-gradient(180deg,rgba(20,25,36,.94),rgba(12,16,24,.95));
    box-shadow:0 28px 80px rgba(0,0,0,.30);
}
.action-card-create:before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    right:-140px;
    top:-140px;
    background:rgba(255,53,68,.18);
    filter:blur(46px);
    pointer-events:none;
}
.action-card-join{
    border-color:rgba(19,212,244,.12);
    background:linear-gradient(160deg,rgba(16,22,33,.98),rgba(8,13,21,.96));
}
.join-glow{
    position:absolute;
    width:240px;
    height:240px;
    border-radius:50%;
    right:-100px;
    bottom:-110px;
    background:rgba(19,212,244,.13);
    filter:blur(58px);
    pointer-events:none;
}
.action-card-head{position:relative;z-index:1}
.action-card-head>div:first-child{display:flex;align-items:center;gap:9px}
.action-number{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:linear-gradient(135deg,rgba(255,28,41,.22),rgba(19,212,244,.14));
    border:1px solid rgba(255,92,104,.24);
    color:#ffd1d5;
    font-size:10px;
    font-weight:950;
}
.action-card h2{
    font-size:clamp(25px,3vw,34px);
    letter-spacing:-.035em;
    margin:14px 0 8px;
}
.action-card-head p{
    color:var(--muted);
    line-height:1.55;
    margin:0;
    font-size:14px;
}
.vewaro-create-form{margin-top:25px}
.create-room-btn{
    background:linear-gradient(95deg,#ff2836,#ff4b5c 52%,#10bddc)!important;
    box-shadow:0 12px 34px rgba(255,64,81,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.create-room-btn span{font-size:20px;line-height:1}
.join-code-form{
    display:grid;
    gap:14px;
    margin-top:28px;
    position:relative;
    z-index:1;
}
.invite-code-input{
    padding:19px 16px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:20px;
    font-weight:900;
    color:#fff;
    background:#090e16;
    border-color:#273145;
}
.invite-code-input::placeholder{letter-spacing:.06em;font-size:15px;font-weight:700;color:#586579}
.join-code-form .btn.secondary{
    background:linear-gradient(135deg,#31191c,#121927);
    border-color:#2e3d55;
}
.join-code-form .btn.secondary:hover{border-color:#526784;background:#391b1f}
.join-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:20px;
    padding:12px 13px;
    border-radius:12px;
    color:#8d9aad;
    font-size:12px;
    line-height:1.45;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.05);
    position:relative;
    z-index:1;
}
.landing-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    color:#707b8e;
    font-size:12px;
    padding:28px 0 0;
}
.footer-icon{width:25px;height:25px;object-fit:contain}
.landing-footer>span:nth-of-type(1){color:#aab4c4;font-weight:850}
.footer-dot{color:#3f4858}

.room-header .brand-logo{width:145px;max-height:44px}
.room-header{min-height:72px;height:auto}

@media (max-width:900px){
    .landing-actions{grid-template-columns:1fr}
    .action-card-join{min-height:auto}
    .hero-copy{margin-bottom:30px}
}
@media (max-width:640px){
    .vewaro-header{height:68px;padding-inline:15px}
    .vewaro-header .brand-logo{width:142px}
    .header-tag{display:none}
    .vewaro-landing{padding-top:34px}
    .hero-copy h1{font-size:clamp(40px,13vw,58px)}
    .hero-copy>p{font-size:15px}
    .hero-features{gap:7px}
    .hero-features span{font-size:11px;padding:7px 9px}
    .action-card{padding:21px 17px;border-radius:20px}
    .form-grid{grid-template-columns:1fr}
    .control-choice{align-items:flex-start;flex-direction:column;gap:11px}
    .room-header .brand-logo{width:116px}
    .room-header{padding-inline:12px;gap:10px}
    .room-code{padding:7px 9px}
}


/* Vewaro 1.1 — title lookup, GIF chat and expanded emoji picker */
.field-help{display:block;margin-top:6px;color:var(--muted);font-size:11px;font-weight:500}
.media-title-field input{width:100%}
[data-media-url].title-reading{box-shadow:0 0 0 1px rgba(255,71,101,.5),0 0 22px rgba(255,71,101,.08)}
.emoji-picker{width:300px;max-height:280px;overflow-y:auto;grid-template-columns:repeat(7,1fr)}
.gif-wrap{position:relative;flex:0 0 auto}
.gif-btn{height:42px;min-width:45px;padding:0 9px;border:1px solid var(--line);border-radius:11px;background:#171d28;color:#ffc0c6;font-size:11px;font-weight:900;letter-spacing:.06em}
.gif-btn:hover{background:#252d3c}
.gif-picker{position:absolute;left:0;bottom:50px;width:280px;padding:12px;display:grid;gap:8px;background:#151b25;border:1px solid #2d3546;border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.42);z-index:61}
.gif-picker strong{font-size:12px;color:#fbf4f5}
.gif-picker input{width:100%;min-width:0}
.gif-picker small{color:var(--muted);font-size:10px;line-height:1.35}
.chat-gif-link{display:block;margin-top:7px;max-width:100%}
.chat-gif{display:block;max-width:100%;width:auto;max-height:240px;border-radius:11px;border:1px solid #30394a;object-fit:contain;background:#090c12}
.chat-link{color:#ff7087;text-decoration:none;overflow-wrap:anywhere}
.chat-link:hover{text-decoration:underline}
@media(max-width:520px){.emoji-picker{width:260px;grid-template-columns:repeat(6,1fr)}.gif-picker{width:min(280px,78vw);left:-45px}.chat-gif{max-height:210px}}

/* Vewaro 1.2 — polished emoji picker + GIPHY search */
.emoji-picker,
.gif-picker{
    box-sizing:border-box;
    background:#111722;
    border:1px solid #30394b;
    border-radius:16px;
    box-shadow:0 22px 60px rgba(0,0,0,.55);
    z-index:80;
}
.emoji-picker{
    position:absolute;
    left:0;
    bottom:52px;
    width:min(342px,calc(100vw - 24px));
    height:min(390px,62vh);
    max-height:none;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
    overflow:hidden;
}
.emoji-picker-top,
.picker-head{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.emoji-picker-top .emoji-search{
    flex:1;
    width:100%;
    min-width:0;
    height:38px;
    margin:0;
    padding:0 11px;
    border:1px solid #2d3648;
    border-radius:10px;
    background:#0b1018;
    color:#fff;
    outline:none;
}
.emoji-picker-top .emoji-search:focus,
.gif-search-row input:focus{border-color:#ff5766;box-shadow:0 0 0 3px rgba(255,87,102,.12)}
.picker-close{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #2d3648;
    border-radius:9px;
    background:#171e2b;
    color:#aeb7c7;
    font-size:20px;
    line-height:1;
}
.picker-close:hover{background:#222b3b;color:#fff}
.emoji-tabs{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:3px;
    padding:7px 8px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:#0e141d;
}
.emoji-picker .emoji-tab{
    width:auto;
    min-width:0;
    height:32px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    font-size:17px;
    line-height:1;
}
.emoji-picker .emoji-tab:hover{background:#1d2635}
.emoji-picker .emoji-tab.active{background:#522327;box-shadow:inset 0 0 0 1px rgba(255,102,116,.5)}
.emoji-grid{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    align-content:start;
    gap:4px;
    padding:9px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#667085 transparent;
}
.emoji-picker .emoji-item{
    width:100%;
    aspect-ratio:1;
    min-width:0;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:9px;
    background:transparent;
    font-size:22px;
    line-height:1;
}
.emoji-picker .emoji-item:hover{background:#222b3b;transform:scale(1.08)}
.picker-empty{
    grid-column:1/-1;
    padding:26px 12px;
    color:var(--muted);
    text-align:center;
    font-size:12px;
}

.gif-picker{
    position:absolute;
    right:0;
    left:auto;
    bottom:52px;
    width:min(360px,calc(100vw - 24px));
    height:min(470px,70vh);
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.gif-picker .picker-head{justify-content:space-between}
.gif-picker .picker-head strong{font-size:13px;color:#fbf5f6}
.gif-search-row{display:flex;gap:7px;padding:10px}
.gif-search-row input{
    flex:1;
    min-width:0;
    height:38px;
    padding:0 11px;
    border:1px solid #2d3648;
    border-radius:10px;
    background:#0b1018;
    color:#fff;
    outline:none;
}
.gif-search-row .btn{height:38px;padding:0 12px}
.gif-status{padding:0 11px 8px;color:#8f99aa;font-size:10px;min-height:18px}
.gif-status.error{color:#fda4af}
.gif-results{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:92px;
    gap:5px;
    padding:0 9px 9px;
    overflow-y:auto;
    overflow-x:hidden;
    align-content:start;
}
.gif-results.loading{opacity:.55;pointer-events:none}
.gif-result{
    position:relative;
    min-width:0;
    width:100%;
    height:92px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.07);
    border-radius:9px;
    background:#080c12;
}
.gif-result img{width:100%;height:100%;display:block;object-fit:cover}
.gif-result:hover{border-color:#ff5c6b;transform:translateY(-1px)}
.gif-result:disabled{opacity:.5}
.gif-provider-credit{
    flex:0 0 auto;
    padding:7px 10px 9px;
    border-top:1px solid rgba(255,255,255,.06);
    color:#7f899b;
    font-size:9px;
    text-align:right;
}
.gif-provider-credit a{color:#ffa8b0;text-decoration:none;font-weight:800}

@media(max-width:520px){
    .emoji-picker,
    .gif-picker{
        position:fixed;
        left:12px;
        right:12px;
        bottom:74px;
        width:auto;
        max-width:none;
    }
    .emoji-picker{height:min(390px,58vh)}
    .gif-picker{height:min(470px,66vh)}
    .emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
    .emoji-tabs{grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;padding-inline:5px}
    .gif-results{grid-auto-rows:88px}
}


/* Vewaro 1.6 — clean desktop room layout */
@media (min-width:901px){
    .room-shell{
        width:min(1720px,calc(100% - 32px));
        max-width:1720px;
        margin:16px auto 30px;
        grid-template-columns:minmax(0,1fr) 380px;
        gap:16px;
        align-items:start;
    }

    .watch-column{
        min-width:0;
        gap:14px;
    }

    .player-card{
        height:auto;
        min-height:0;
        display:block;
    }

    .player-wrap{
        aspect-ratio:auto;
        height:min(62vh,calc(100vh - 360px),680px);
        max-height:none;
        min-height:300px;
    }

    .player-wrap video,
    .player-wrap iframe{
        object-fit:contain;
    }

    .invite-card,
    .media-card{
        min-height:72px;
    }

    .chat-column{
        min-width:0;
        width:100%;
        height:min(880px,calc(100vh - 108px));
        min-height:520px;
        position:sticky;
        top:88px;
    }

    .chat-form{
        position:relative;
        display:grid;
        grid-template-columns:42px 54px minmax(0,1fr) auto;
        align-items:center;
        gap:8px;
        padding:12px;
    }

    .chat-form > input{
        min-width:0;
        width:100%;
    }

    .emoji-wrap,
    .gif-wrap{
        position:static;
    }

    .emoji-picker,
    .gif-picker{
        left:10px;
        right:10px;
        bottom:64px;
        width:auto;
        max-width:none;
    }

    .emoji-picker{
        height:min(390px,56vh);
    }

    .gif-picker{
        height:min(480px,64vh);
    }

    .emoji-grid{
        grid-template-columns:repeat(8,minmax(0,1fr));
    }

    .gif-results{
        grid-template-columns:repeat(3,minmax(0,1fr));
        grid-auto-rows:100px;
    }
}

/* 21:9 and other very wide desktops: use width without enlarging the UI. */
@media (min-width:1400px) and (min-aspect-ratio:2/1){
    .room-shell{
        width:calc(100% - 40px);
        max-width:2200px;
        grid-template-columns:minmax(0,1fr) 390px;
        gap:16px;
    }

    .player-wrap{
        height:min(60vh,calc(100vh - 330px),620px);
        min-height:300px;
    }

    .chat-column{
        height:min(860px,calc(100vh - 104px));
        min-height:500px;
        top:86px;
    }
}

/* Taller desktop displays get more player, but the UI scale stays normal. */
@media (min-width:1400px) and (min-height:1100px) and (max-aspect-ratio:2/1){
    .room-shell{
        max-width:1880px;
        grid-template-columns:minmax(0,1fr) 400px;
    }

    .player-wrap{
        height:min(64vh,760px);
    }
}

/* Cinema = focused player + chat. */
.cinema-mode-btn.active{
    border-color:#ff727e;
    background:#4e1f23;
    color:#fff;
    box-shadow:0 0 0 2px rgba(255,92,106,.14);
}

@media (min-width:901px){
    body.cinema-mode{
        overflow:hidden;
        background:#05070b;
    }

    body.cinema-mode .room-header{
        display:none;
    }

    body.cinema-mode .room-shell{
        width:100%;
        max-width:none;
        height:100dvh;
        margin:0;
        padding:12px;
        grid-template-columns:minmax(0,1fr) 380px;
        gap:12px;
        align-items:stretch;
    }

    body.cinema-mode .watch-column{
        height:calc(100dvh - 24px);
        min-height:0;
        display:block;
    }

    body.cinema-mode .player-card{
        height:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        border-radius:16px;
    }

    body.cinema-mode .player-wrap{
        flex:1 1 auto;
        width:100%;
        height:auto;
        min-height:0;
        max-height:none!important;
        aspect-ratio:auto;
    }

    body.cinema-mode .player-controls,
    body.cinema-mode .sync-bar{
        flex:0 0 auto;
    }

    body.cinema-mode .player-wrap video,
    body.cinema-mode .player-wrap iframe{
        object-fit:contain;
    }

    body.cinema-mode .control-hint,
    body.cinema-mode .compat-bar,
    body.cinema-mode .compat-panel,
    body.cinema-mode .invite-card,
    body.cinema-mode .media-card,
    body.cinema-mode .playlist-card{
        display:none!important;
    }

    body.cinema-mode .chat-column{
        position:relative;
        top:auto;
        height:calc(100dvh - 24px);
        min-height:0;
        border-radius:16px;
    }

    body.cinema-mode .messages{
        padding:16px;
    }
}

@media (min-width:1400px) and (min-aspect-ratio:2/1){
    body.cinema-mode .room-shell{
        grid-template-columns:minmax(0,1fr) 390px;
    }
}

@media (max-width:900px){
    .cinema-mode-btn{display:none}
}

/* Font Awesome interface icon alignment */
.btn > i:not(:only-child),
.viewer-count > i,
.feature-row i,
.join-note i{
    margin-right:6px;
}

.media-control i,
.playlist-icon i,
.playlist-action i,
.picker-close i,
.emoji-tab i,
.emoji-btn i{
    pointer-events:none;
}

.gif-btn{
    gap:5px;
}

.gif-btn i{
    font-size:13px;
}

.feature-row i{
    width:16px;
    text-align:center;
}

.audio-art i{
    font-size:inherit;
}

.compat-icon i{
    font-size:12px;
}

.chat-close i,
.modal-x i{
    font-size:22px;
}


/* Vewaro 1.6 mobile chat unread counter */
.chat-fab{
    position:relative;
}
.chat-unread-badge{
    position:absolute;
    top:-7px;
    right:-7px;
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ff3b66;
    color:#fff;
    border:2px solid #0c1017;
    font-size:11px;
    font-weight:900;
    line-height:1;
    box-shadow:0 5px 16px rgba(255,59,102,.35);
}
.chat-unread-badge[hidden]{
    display:none!important;
}


/* Vewaro 1.7 — mobile chat sits underneath the player */
@media (max-width:900px){
    .room-shell{
        margin-bottom:86px;
    }

    /* JS moves chat directly after .player-card inside .watch-column */
    .watch-column > .chat-column{
        display:none!important;
        position:relative!important;
        z-index:20!important;
        left:auto!important;
        right:auto!important;
        top:auto!important;
        bottom:auto!important;
        width:100%!important;
        height:min(58vh,560px)!important;
        min-height:390px!important;
        margin:12px 0 14px!important;
        border-radius:16px!important;
        transform:none!important;
        transition:none!important;
        overflow:hidden!important;
        box-shadow:var(--shadow);
    }

    .watch-column > .chat-column.open{
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
    }

    .watch-column > .chat-column .chat-head{
        position:relative;
        min-height:68px;
    }

    .watch-column > .chat-column .messages{
        min-height:0!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        padding-bottom:14px;
    }

    .watch-column > .chat-column .chat-form{
        position:relative!important;
        display:grid!important;
        grid-template-columns:42px 54px minmax(0,1fr) auto!important;
        align-items:center;
        gap:8px!important;
        padding:10px!important;
        background:#0d121b;
        border-top:1px solid var(--line);
    }

    .watch-column > .chat-column .chat-form > input{
        min-width:0!important;
        width:100%!important;
    }

    /* Small floating bubble rather than the full-width purple bar */
    .chat-fab{
        display:flex!important;
        position:fixed!important;
        z-index:45!important;
        right:16px!important;
        bottom:16px!important;
        left:auto!important;
        top:auto!important;
        width:56px!important;
        height:56px!important;
        min-width:56px!important;
        max-width:56px!important;
        padding:0!important;
        align-items:center!important;
        justify-content:center!important;
        border:1px solid rgba(255,255,255,.16)!important;
        border-radius:50%!important;
        background:linear-gradient(135deg,#ff3545,#ff3240)!important;
        color:#fff!important;
        font-size:19px!important;
        box-shadow:0 14px 38px rgba(183,36,49,.45)!important;
    }

    .chat-fab:hover,
    .chat-fab:focus-visible{
        background:linear-gradient(135deg,#ff4453,#ff3c49)!important;
    }

    .chat-fab-label{
        position:absolute!important;
        width:1px!important;
        height:1px!important;
        overflow:hidden!important;
        clip:rect(0 0 0 0)!important;
        white-space:nowrap!important;
    }

    body.mobile-chat-open .chat-fab{
        display:none!important;
    }

    .chat-unread-badge{
        top:-5px!important;
        right:-5px!important;
    }

    /* Keep emoji/GIF popups inside the inline chat section */
    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        position:absolute!important;
        left:10px!important;
        right:10px!important;
        bottom:64px!important;
        width:auto!important;
        max-width:none!important;
        z-index:85!important;
    }

    .watch-column > .chat-column .emoji-picker{
        height:min(390px,52vh)!important;
    }

    .watch-column > .chat-column .gif-picker{
        height:min(460px,58vh)!important;
    }
}

@media (max-width:560px){
    .watch-column > .chat-column{
        height:min(60vh,520px)!important;
        min-height:380px!important;
        border-radius:14px!important;
    }

    .watch-column > .chat-column .chat-form{
        grid-template-columns:40px 50px minmax(0,1fr) 46px!important;
        gap:6px!important;
        padding:9px!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        width:46px!important;
        min-width:46px!important;
        padding:0!important;
        font-size:0!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"] i{
        margin:0!important;
        font-size:17px!important;
    }
}

/* Emoji category icons: visible on the dark picker instead of black */
.emoji-picker .emoji-tab{
    color:#aeb7c7!important;
}

.emoji-picker .emoji-tab i{
    color:inherit!important;
}

.emoji-picker .emoji-tab:hover{
    color:#fff!important;
    background:#1d2635!important;
}

.emoji-picker .emoji-tab.active{
    color:#ffd2d6!important;
    background:#64262b!important;
    box-shadow:inset 0 0 0 1px rgba(255,114,126,.68)!important;
}

.emoji-picker .emoji-tab.active i{
    color:#ffd2d6!important;
}

/* Host indicator in chat messages */
.message-identity{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:0;
}

.message-host-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(255,92,106,.14);
    border:1px solid rgba(255,132,143,.38);
    color:#ffbdc3;
    font-size:8px;
    font-weight:950;
    letter-spacing:.08em;
    line-height:1.3;
}

.message-host-badge i{
    color:#f7c948;
    font-size:9px;
}

.host-message{
    border-color:rgba(255,92,106,.3);
}


/* Vewaro 1.8 — compact copy control beside viewers */
.header-copy-invite{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#151b27;
    color:#d8deea;
    cursor:pointer;
    transition:.16s ease;
}

.header-copy-invite:hover,
.header-copy-invite:focus-visible{
    border-color:#ce4754;
    color:#fff;
    background:#3d191c;
}

.header-copy-invite.copied{
    color:#9af0c8;
}

.header-copy-invite .copy-label{
    margin-left:6px;
    font-size:11px;
    font-weight:800;
}

/* Mobile invite action lives in the header, so the large invite card is redundant. */
@media (max-width:900px){
    .invite-card{
        display:none!important;
    }

    .header-copy-invite{
        width:38px;
        min-width:38px;
        height:38px;
        padding:0;
    }

    .header-copy-invite .copy-label{
        display:none;
    }
}

/* Mobile watch + chat mode: only player and chat remain visible. */
@media (max-width:900px){
    body.mobile-chat-open{
        overflow-x:hidden;
        background:#070a0f;
    }

    body.mobile-chat-open .room-header{
        display:none!important;
    }

    body.mobile-chat-open .room-shell{
        width:100%!important;
        margin:0!important;
        padding:8px!important;
        display:block!important;
    }

    body.mobile-chat-open .watch-column{
        display:block!important;
        width:100%!important;
    }

    body.mobile-chat-open .watch-column > *{
        display:none!important;
    }

    body.mobile-chat-open .watch-column > .player-card,
    body.mobile-chat-open .watch-column > .chat-column{
        display:block!important;
    }

    body.mobile-chat-open .player-card{
        margin:0!important;
        border-radius:14px!important;
        overflow:hidden!important;
    }

    /* Keep this truly focused: player surface + player controls only. */
    body.mobile-chat-open .player-card .control-hint,
    body.mobile-chat-open .player-card .sync-bar,
    body.mobile-chat-open .player-card .compat-bar,
    body.mobile-chat-open .player-card .compat-panel{
        display:none!important;
    }

    body.mobile-chat-open .player-wrap{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        aspect-ratio:16/9!important;
    }

    body.mobile-chat-open .player-controls{
        border-bottom:0!important;
    }

    body.mobile-chat-open .watch-column > .chat-column{
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        position:relative!important;
        width:100%!important;
        height:calc(100dvh - min(56.25vw,52vh) - 98px)!important;
        min-height:340px!important;
        max-height:none!important;
        margin:8px 0 0!important;
        border-radius:14px!important;
        overflow:hidden!important;
    }

    body.mobile-chat-open .chat-head{
        min-height:60px!important;
        padding:12px 14px!important;
    }

    body.mobile-chat-open .messages{
        min-height:0!important;
        overflow-y:auto!important;
        padding:12px!important;
    }

    body.mobile-chat-open .chat-form{
        position:relative!important;
        border-top:1px solid var(--line)!important;
    }

    body.mobile-chat-open .chat-fab{
        display:none!important;
    }
}

@media (max-width:560px){
    body.mobile-chat-open .room-shell{
        padding:0!important;
    }

    body.mobile-chat-open .player-card{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    body.mobile-chat-open .watch-column > .chat-column{
        margin-top:0!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
        height:calc(100dvh - min(56.25vw,48vh) - 92px)!important;
    }

    body.mobile-chat-open .chat-head{
        padding:11px 13px!important;
    }
}


/* Vewaro 1.10 — mobile watch + chat fills the visible viewport exactly */
@media (max-width:900px){
    body.mobile-chat-open{
        width:100%;
        height:100dvh;
        min-height:100dvh;
        overflow:hidden!important;
        background:#070a0f;
    }

    body.mobile-chat-open .room-shell{
        width:100%!important;
        height:100dvh!important;
        min-height:0!important;
        margin:0!important;
        padding:6px!important;
        overflow:hidden!important;
    }

    body.mobile-chat-open .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:6px!important;
        overflow:hidden!important;
    }

    body.mobile-chat-open .player-card{
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        margin:0!important;
    }

    body.mobile-chat-open .player-wrap{
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:44dvh!important;
        aspect-ratio:16/9!important;
        flex:none!important;
    }

    body.mobile-chat-open .player-controls{
        flex:0 0 auto!important;
    }

    body.mobile-chat-open .watch-column > .chat-column{
        flex:1 1 0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        position:relative!important;
        overflow:hidden!important;
    }

    body.mobile-chat-open .chat-head{
        flex:none!important;
        min-height:56px!important;
        padding:10px 13px!important;
    }

    body.mobile-chat-open .messages{
        min-height:0!important;
        height:auto!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        padding:10px 12px!important;
    }

    body.mobile-chat-open .chat-form{
        flex:none!important;
        margin:0!important;
        padding:
            9px
            9px
            max(9px,env(safe-area-inset-bottom))
            9px!important;
        border-top:1px solid var(--line)!important;
        background:#0d121b!important;
    }

    body.mobile-chat-open .room-shell,
    body.mobile-chat-open .watch-column,
    body.mobile-chat-open .chat-column{
        margin-bottom:0!important;
    }
}

@media (max-width:560px){
    body.mobile-chat-open .room-shell{
        padding:0!important;
    }

    body.mobile-chat-open .watch-column{
        gap:0!important;
    }

    body.mobile-chat-open .player-card{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    body.mobile-chat-open .player-wrap{
        max-height:42dvh!important;
    }

    body.mobile-chat-open .watch-column > .chat-column{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
    }
}


/* Vewaro 1.11 — mobile chat is always open directly beneath the player */
@media (max-width:900px){
    /* Keep the normal room header visible. */
    .room-header{
        display:flex!important;
    }

    /* Normal mobile page flow: header -> player -> chat. */
    .room-shell{
        width:calc(100% - 12px)!important;
        margin:6px auto 20px!important;
        padding:0!important;
        display:block!important;
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
    }

    .watch-column{
        display:block!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
    }

    /* Chat permanently sits after .player-card. */
    .watch-column > .chat-column{
        display:grid!important;
        grid-template-rows:auto minmax(240px,1fr) auto!important;
        position:relative!important;
        inset:auto!important;
        width:100%!important;
        height:min(56vh,520px)!important;
        min-height:380px!important;
        max-height:520px!important;
        margin:10px 0 0!important;
        border-radius:16px!important;
        transform:none!important;
        transition:none!important;
        overflow:hidden!important;
        z-index:10!important;
        box-shadow:var(--shadow)!important;
    }

    .watch-column > .chat-column.open{
        display:grid!important;
    }

    .watch-column > .chat-column .chat-head{
        min-height:58px!important;
        padding:11px 14px!important;
    }

    .watch-column > .chat-column .messages{
        min-height:240px!important;
        height:auto!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        padding:12px!important;
    }

    .watch-column > .chat-column .chat-form{
        position:relative!important;
        display:grid!important;
        grid-template-columns:42px 54px minmax(0,1fr) auto!important;
        align-items:center!important;
        gap:8px!important;
        padding:
            9px
            9px
            max(9px,env(safe-area-inset-bottom))
            9px!important;
        margin:0!important;
        background:#0d121b!important;
        border-top:1px solid var(--line)!important;
    }

    .watch-column > .chat-column .chat-form > input{
        min-width:0!important;
        width:100%!important;
    }

    /* No mobile close button: chat is always part of the page. */
    .watch-column > .chat-column #chatClose{
        display:none!important;
    }

    /* No floating chat bubble on mobile anymore. */
    .chat-fab{
        display:none!important;
    }

    /* Old focused-chat state must not alter the normal mobile room. */
    body.mobile-chat-open{
        width:auto!important;
        height:auto!important;
        min-height:0!important;
        overflow:auto!important;
        background:var(--bg)!important;
    }

    body.mobile-chat-open .room-header{
        display:flex!important;
    }

    body.mobile-chat-open .room-shell,
    body.mobile-chat-open .watch-column{
        width:inherit!important;
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
    }

    body.mobile-chat-open .watch-column > *{
        display:revert!important;
    }

    body.mobile-chat-open .watch-column > .chat-column{
        display:grid!important;
    }

    body.mobile-chat-open .player-card .control-hint,
    body.mobile-chat-open .player-card .sync-bar,
    body.mobile-chat-open .player-card .compat-bar,
    body.mobile-chat-open .player-card .compat-panel{
        display:flex!important;
    }

    /* Chat popovers stay within the permanent chat section. */
    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        position:absolute!important;
        left:10px!important;
        right:10px!important;
        bottom:64px!important;
        width:auto!important;
        max-width:none!important;
        z-index:85!important;
    }

    .watch-column > .chat-column .emoji-picker{
        height:min(390px,52vh)!important;
    }

    .watch-column > .chat-column .gif-picker{
        height:min(450px,56vh)!important;
    }
}

@media (max-width:560px){
    .room-shell{
        width:calc(100% - 10px)!important;
        margin:5px auto 16px!important;
    }

    .watch-column > .chat-column{
        height:min(54vh,500px)!important;
        min-height:360px!important;
        max-height:500px!important;
        border-radius:14px!important;
    }

    .watch-column > .chat-column .chat-form{
        grid-template-columns:40px 50px minmax(0,1fr) 46px!important;
        gap:6px!important;
        padding:
            9px
            9px
            max(9px,env(safe-area-inset-bottom))
            9px!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        width:46px!important;
        min-width:46px!important;
        padding:0!important;
        font-size:0!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"] i{
        margin:0!important;
        font-size:17px!important;
    }
}


/* Vewaro 1.12 — mobile chat auto-height + proper phone-landscape layout */

/* Portrait / normal mobile: chat grows only as much as its content needs. */
@media (max-width:900px){
    .watch-column > .chat-column{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        grid-template-rows:auto auto auto!important;
        align-self:start!important;
    }

    .watch-column > .chat-column .messages{
        height:auto!important;
        min-height:0!important;
        max-height:min(36vh,320px)!important;
        overflow-y:auto!important;
    }

    .watch-column > .chat-column .chat-form{
        position:relative!important;
        bottom:auto!important;
    }
}

/*
 * A phone in landscape can exceed 900 CSS px, especially with browser/device
 * scaling. Treat short coarse-pointer landscape screens as mobile and fit the
 * player + chat into one viewport.
 */
@media (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    html,
    body{
        min-height:100%;
    }

    body{
        overflow:hidden!important;
    }

    .room-header{
        display:flex!important;
        min-height:58px!important;
        height:58px!important;
        padding:7px 12px!important;
    }

    .room-header .brand-logo{
        width:118px!important;
        max-height:38px!important;
    }

    .room-meta{
        gap:6px!important;
    }

    .room-code,
    .host-badge{
        display:none!important;
    }

    .viewer-count,
    .header-copy-invite{
        height:36px!important;
        min-width:36px!important;
    }

    .room-shell{
        width:100%!important;
        max-width:none!important;
        height:calc(100dvh - 58px)!important;
        min-height:0!important;
        margin:0!important;
        padding:6px!important;
        display:block!important;
        overflow:hidden!important;
    }

    .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) minmax(300px,36vw)!important;
        grid-template-rows:1fr!important;
        gap:6px!important;
        overflow:hidden!important;
    }

    /* Only the player and permanent chat are needed in landscape-mobile. */
    .watch-column > :not(.player-card):not(.chat-column){
        display:none!important;
    }

    .watch-column > .player-card{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        margin:0!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
        border-radius:12px!important;
    }

    .watch-column > .player-card .player-wrap{
        flex:1 1 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
    }

    .watch-column > .player-card .player-controls{
        flex:0 0 auto!important;
        padding:7px 8px!important;
    }

    .watch-column > .player-card .control-hint{
        display:none!important;
    }

    .watch-column > .player-card .sync-bar{
        flex:0 0 auto!important;
        padding:7px 9px!important;
        font-size:11px!important;
    }

    .watch-column > .player-card .compat-bar,
    .watch-column > .player-card .compat-panel{
        display:none!important;
    }

    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        position:relative!important;
        inset:auto!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        border-radius:12px!important;
        overflow:hidden!important;
        transform:none!important;
    }

    .watch-column > .chat-column .chat-head{
        min-height:50px!important;
        padding:8px 10px!important;
    }

    .watch-column > .chat-column .chat-head .eyebrow{
        font-size:10px!important;
    }

    .watch-column > .chat-column .chat-head strong{
        font-size:13px!important;
    }

    .watch-column > .chat-column .messages{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow-y:auto!important;
        padding:8px!important;
    }

    .watch-column > .chat-column .message{
        padding:8px 9px!important;
    }

    .watch-column > .chat-column .chat-form{
        display:grid!important;
        grid-template-columns:36px 44px minmax(0,1fr) 42px!important;
        gap:5px!important;
        padding:6px!important;
    }

    .watch-column > .chat-column .emoji-btn,
    .watch-column > .chat-column .gif-btn,
    .watch-column > .chat-column .chat-form > input,
    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        min-height:38px!important;
        height:38px!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        width:42px!important;
        min-width:42px!important;
        padding:0!important;
        font-size:0!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"] i{
        margin:0!important;
        font-size:15px!important;
    }

    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        left:6px!important;
        right:6px!important;
        bottom:50px!important;
        max-height:calc(100dvh - 120px)!important;
    }

    .chat-fab{
        display:none!important;
    }
}


/* Vewaro 1.13 — portrait mobile fills the viewport cleanly */
@media (max-width:900px) and (orientation:portrait){
    html,
    body{
        min-height:100%;
    }

    body{
        min-height:100dvh;
    }

    .room-header{
        flex:0 0 auto;
    }

    .room-shell{
        width:calc(100% - 10px)!important;
        height:calc(100dvh - 68px)!important;
        min-height:0!important;
        margin:5px auto 0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
        overflow:hidden!important;
    }

    .watch-column > .player-card{
        flex:0 0 auto!important;
        margin:0!important;
    }

    .watch-column > .player-card .player-wrap{
        width:100%!important;
        height:auto!important;
        max-height:42dvh!important;
        aspect-ratio:16/9!important;
    }

    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        flex:1 1 0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        overflow:hidden!important;
    }

    .watch-column > .chat-column .chat-head{
        flex:0 0 auto!important;
    }

    .watch-column > .chat-column .messages{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
    }

    .watch-column > .chat-column .chat-form{
        flex:0 0 auto!important;
        margin:0!important;
        padding:
            9px
            9px
            max(9px,env(safe-area-inset-bottom))
            9px!important;
    }

    /* Remove old auto-height rule that leaves blank page underneath. */
    .watch-column > .chat-column{
        align-self:stretch!important;
    }
}

/* Small portrait phones */
@media (max-width:560px) and (orientation:portrait){
    .room-shell{
        width:100%!important;
        height:calc(100dvh - 64px)!important;
        margin:0!important;
    }

    .watch-column{
        gap:6px!important;
    }

    .watch-column > .player-card{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    .watch-column > .chat-column{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
    }

    .watch-column > .player-card .player-wrap{
        max-height:40dvh!important;
    }
}

/* Vewaro 1.13 — consistent Send button */
.chat-form .btn[type="submit"]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:48px!important;
    width:auto!important;
    height:44px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
}

.chat-form .btn[type="submit"] i{
    display:block!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1!important;
}

@media (max-width:560px){
    .chat-form .btn[type="submit"]{
        width:46px!important;
        min-width:46px!important;
        height:42px!important;
        padding:0!important;
        border-radius:12px!important;
        font-size:0!important;
    }

    .chat-form .btn[type="submit"] i{
        font-size:16px!important;
    }
}

/* Landscape keeps the compact layout from V1.12, but uses the same centred send icon. */
@media (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        width:42px!important;
        min-width:42px!important;
        height:38px!important;
        padding:0!important;
        border-radius:10px!important;
        font-size:0!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"] i{
        font-size:15px!important;
    }
}


/* Vewaro 1.14 — fix portrait mobile emoji/GIF pickers */
@media (max-width:900px) and (orientation:portrait){
    /* The popovers should anchor to the chat form area, not collapse to a sliver. */
    .watch-column > .chat-column .emoji-wrap,
    .watch-column > .chat-column .gif-wrap{
        position:static!important;
    }

    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        position:absolute!important;
        left:8px!important;
        right:8px!important;
        bottom:62px!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        z-index:90!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }

    .watch-column > .chat-column .emoji-picker{
        height:min(46vh,380px)!important;
        max-height:min(46vh,380px)!important;
    }

    .watch-column > .chat-column .gif-picker{
        height:min(50vh,420px)!important;
        max-height:min(50vh,420px)!important;
    }

    .watch-column > .chat-column .emoji-grid{
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
    }

    .watch-column > .chat-column .gif-results{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        grid-auto-rows:104px!important;
    }
}

@media (max-width:560px) and (orientation:portrait){
    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        left:6px!important;
        right:6px!important;
        bottom:60px!important;
        border-radius:14px!important;
    }

    .watch-column > .chat-column .emoji-picker{
        height:min(44vh,360px)!important;
        max-height:min(44vh,360px)!important;
    }

    .watch-column > .chat-column .gif-picker{
        height:min(48vh,390px)!important;
        max-height:min(48vh,390px)!important;
    }

    .watch-column > .chat-column .emoji-grid{
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
    }

    .watch-column > .chat-column .gif-results{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        grid-auto-rows:96px!important;
    }
}

/* Keep landscape compact mode usable as well. */
@media (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    .watch-column > .chat-column .emoji-wrap,
    .watch-column > .chat-column .gif-wrap{
        position:static!important;
    }

    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        position:absolute!important;
        left:6px!important;
        right:6px!important;
        bottom:50px!important;
        width:auto!important;
        max-width:none!important;
        min-width:0!important;
        z-index:90!important;
        overflow:hidden!important;
    }

    .watch-column > .chat-column .emoji-picker{
        height:min(64vh,300px)!important;
    }

    .watch-column > .chat-column .gif-picker{
        height:min(68vh,320px)!important;
    }

    .watch-column > .chat-column .emoji-grid{
        grid-template-columns:repeat(6,minmax(0,1fr))!important;
    }

    .watch-column > .chat-column .gif-results{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        grid-auto-rows:88px!important;
    }
}


/* Vewaro 1.15 — clean auto-fit desktop room */
@media (min-width:901px){
    .invite-card{display:none!important}
    .room-shell{
        width:calc(100% - 28px)!important;
        max-width:1900px!important;
        margin:14px auto 24px!important;
        grid-template-columns:minmax(0,1fr) clamp(360px,23vw,430px)!important;
        gap:16px!important;
        align-items:start!important;
    }
    .watch-column{min-width:0!important;width:100%!important;gap:14px!important}
    .player-card{width:100%!important;min-height:0!important;height:auto!important}
    .player-wrap{
        width:100%!important;
        height:clamp(360px,calc(100dvh - 310px),760px)!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
    }
    .player-wrap video,.player-wrap iframe{
        width:100%!important;height:100%!important;object-fit:contain!important;
    }
    .chat-column{
        position:sticky!important;
        top:82px!important;
        width:100%!important;
        height:clamp(500px,calc(100dvh - 104px),860px)!important;
        min-height:500px!important;
        max-height:860px!important;
    }
    .messages{min-height:0!important}
    .header-copy-invite{
        display:inline-flex!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;
    }
    .header-copy-invite .copy-label{display:none!important}
}
@media (min-width:1600px) and (min-aspect-ratio:2/1){
    .room-shell{max-width:2200px!important;grid-template-columns:minmax(0,1fr) 400px!important}
    .player-wrap{height:clamp(340px,calc(100dvh - 285px),690px)!important}
    .chat-column{height:clamp(480px,calc(100dvh - 96px),820px)!important;min-height:480px!important}
}
@media (min-width:1400px) and (min-height:1100px) and (max-aspect-ratio:2/1){
    .room-shell{max-width:1980px!important}
    .player-wrap{height:clamp(500px,calc(100dvh - 330px),840px)!important}
    .chat-column{height:clamp(620px,calc(100dvh - 112px),940px)!important;max-height:940px!important}
}


/* Vewaro 1.16 — normal desktop uses Cinema-style viewport fitting */
@media (min-width:901px){
    /*
     * Use the available browser area instead of a short centred card.
     * Header remains visible; room fills the rest of the viewport.
     */
    .room-shell{
        width:calc(100% - 24px)!important;
        max-width:none!important;
        height:calc(100dvh - 92px)!important;
        min-height:560px!important;
        margin:12px auto 0!important;
        padding:0!important;
        grid-template-columns:minmax(0,1fr) clamp(360px,22vw,430px)!important;
        gap:12px!important;
        align-items:stretch!important;
    }

    .watch-column{
        min-width:0!important;
        height:100%!important;
        min-height:0!important;
        display:block!important;
        overflow:visible!important;
    }

    /*
     * Player card becomes the fitted desktop surface, just like Cinema mode,
     * but keeps the normal header, controls, sync bar and compatibility UI.
     */
    .player-card{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
    }

    .player-wrap{
        flex:1 1 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
    }

    .player-wrap video,
    .player-wrap iframe{
        width:100%!important;
        height:100%!important;
        object-fit:contain!important;
    }

    .player-controls,
    .control-hint,
    .sync-bar,
    .compat-bar{
        flex:0 0 auto!important;
    }

    .chat-column{
        position:relative!important;
        top:auto!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        align-self:stretch!important;
    }

    .messages{
        min-height:0!important;
        overflow-y:auto!important;
    }

    /* Keep the header copy-link compact beside viewer count. */
    .header-copy-invite{
        display:inline-flex!important;
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
        padding:0!important;
    }

    .header-copy-invite .copy-label{
        display:none!important;
    }
}

/* Very wide / 21:9 desktop: more room goes to the player, not to the chat. */
@media (min-width:1600px) and (min-aspect-ratio:2/1){
    .room-shell{
        width:calc(100% - 28px)!important;
        grid-template-columns:minmax(0,1fr) 390px!important;
        gap:14px!important;
    }
}

/* Short desktop windows still fit without crushing controls. */
@media (min-width:901px) and (max-height:760px){
    .room-shell{
        height:calc(100dvh - 82px)!important;
        min-height:480px!important;
        margin-top:8px!important;
    }

    .control-hint{
        display:none!important;
    }

    .compat-bar{
        padding-top:8px!important;
        padding-bottom:8px!important;
    }
}

/*
 * Host-only cards (media form / playlist) continue below the fitted room.
 * They do not reduce the fitted player/chat height.
 */
@media (min-width:901px){
    .watch-column > .media-card,
    .watch-column > .playlist-card{
        margin-top:14px!important;
    }
}


/* Vewaro 1.18 — optional PWA install UI */
.pwa-install-panel{
    position:fixed;
    z-index:150;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    width:min(680px,calc(100% - 28px));
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid rgba(255,114,126,.34);
    border-radius:18px;
    background:rgba(13,17,27,.97);
    color:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.48);
    backdrop-filter:blur(16px);
}

.pwa-install-icon{
    width:52px;
    height:52px;
    border-radius:14px;
}

.pwa-install-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pwa-install-copy strong{
    font-size:15px;
}

.pwa-install-copy span{
    color:#aab4c5;
    font-size:12px;
    line-height:1.35;
}

.pwa-install-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

.pwa-install-actions .btn{
    white-space:nowrap;
}

.pwa-ios-help{
    position:fixed;
    z-index:180;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,6,10,.78);
    backdrop-filter:blur(8px);
}

.pwa-ios-help-card{
    position:relative;
    width:min(420px,100%);
    padding:28px;
    border:1px solid var(--line);
    border-radius:20px;
    background:#101620;
    box-shadow:0 30px 90px rgba(0,0,0,.6);
    text-align:center;
}

.pwa-ios-help-icon{
    width:72px;
    height:72px;
    margin-bottom:12px;
}

.pwa-ios-help-card h2{
    margin:0 0 10px;
}

.pwa-ios-help-card p{
    margin:0 0 20px;
    color:#b2bccb;
    line-height:1.55;
}

.pwa-ios-help-close{
    position:absolute;
    right:12px;
    top:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:10px;
    background:#171e2b;
    color:#d8deea;
    cursor:pointer;
}

@media (max-width:620px){
    .pwa-install-panel{
        left:10px;
        right:10px;
        bottom:max(10px,env(safe-area-inset-bottom));
        transform:none;
        width:auto;
        grid-template-columns:44px minmax(0,1fr);
        gap:10px;
        border-radius:16px;
    }

    .pwa-install-icon{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    .pwa-install-actions{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .pwa-install-actions .btn{
        width:100%;
    }
}


/* Vewaro 1.19 — adaptive portrait mobile for real browser viewport height */
@media (max-width:900px) and (orientation:portrait){
    :root{
        --mobile-visible-height:var(--vewaro-vh,100dvh);
    }

    body{
        min-height:var(--mobile-visible-height)!important;
        overflow-x:hidden!important;
    }

    .room-header{
        min-height:62px!important;
        height:62px!important;
        padding:7px 10px!important;
    }

    .room-header .brand-logo{
        width:124px!important;
        max-height:40px!important;
    }

    .room-meta{
        gap:6px!important;
    }

    .viewer-count,
    .header-copy-invite{
        height:38px!important;
        min-width:38px!important;
    }

    .room-shell{
        width:calc(100% - 8px)!important;
        height:auto!important;
        min-height:0!important;
        margin:4px auto 12px!important;
        padding:0!important;
        overflow:visible!important;
    }

    .watch-column{
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        display:block!important;
        overflow:visible!important;
    }

    .watch-column > .player-card{
        margin:0!important;
    }

    .watch-column > .player-card .player-wrap{
        width:100%!important;
        height:auto!important;
        max-height:min(40vh,320px)!important;
        aspect-ratio:16/9!important;
    }

    /* Save vertical space without removing anything important. */
    .watch-column > .player-card .control-hint{
        padding:7px 10px!important;
        font-size:10px!important;
    }

    .watch-column > .player-card .sync-bar{
        padding:9px 10px!important;
        gap:8px!important;
    }

    .watch-column > .player-card .compat-bar{
        display:none!important;
    }

    /*
     * Chat is content-driven instead of filling the whole remaining phone.
     * It still has a useful messages area, then scrolls when it becomes busy.
     */
    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        display:grid!important;
        grid-template-rows:auto auto auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:8px 0 0!important;
        overflow:visible!important;
        align-self:start!important;
    }

    .watch-column > .chat-column .chat-head{
        min-height:58px!important;
        padding:10px 13px!important;
    }

    .watch-column > .chat-column .messages{
        height:auto!important;
        min-height:110px!important;
        max-height:min(30vh,260px)!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        padding:10px 12px!important;
    }

    .watch-column > .chat-column .chat-form{
        position:relative!important;
        margin:0!important;
        padding:
            8px
            8px
            max(8px,env(safe-area-inset-bottom))
            8px!important;
        border-top:1px solid var(--line)!important;
    }

    .watch-column > .chat-column .chat-form > input{
        min-width:0!important;
    }

    /* Keep the picker anchored to this compact chat panel. */
    .watch-column > .chat-column .emoji-picker,
    .watch-column > .chat-column .gif-picker{
        bottom:58px!important;
    }
}

/* Short phones with large browser chrome get an even tighter composition. */
@media (max-width:560px) and (orientation:portrait) and (max-height:760px){
    .room-header{
        min-height:58px!important;
        height:58px!important;
    }

    .room-header .brand-logo{
        width:116px!important;
    }

    .watch-column > .player-card .player-wrap{
        max-height:min(36vh,270px)!important;
    }

    .watch-column > .player-card .control-hint{
        display:none!important;
    }

    .watch-column > .chat-column .messages{
        min-height:90px!important;
        max-height:min(26vh,210px)!important;
    }
}

/* Tall phones can show a little more chat without turning it into a giant box. */
@media (max-width:900px) and (orientation:portrait) and (min-height:900px){
    .watch-column > .chat-column .messages{
        min-height:140px!important;
        max-height:min(34vh,320px)!important;
    }
}


/* Vewaro 1.20 — tighter portrait mobile room */
@media (max-width:900px) and (orientation:portrait){
    :root{
        --mobile-chat-messages-height:72px;
        --mobile-chat-messages-max:min(22vh,160px);
        --mobile-player-max:min(34vh,280px);
    }

    .watch-column > .player-card .player-wrap{
        max-height:var(--mobile-player-max)!important;
    }

    .watch-column > .player-card .sync-bar{
        padding:8px 9px!important;
    }

    .watch-column > .chat-column{
        margin-top:6px!important;
    }

    .watch-column > .chat-column .chat-head{
        min-height:52px!important;
        padding:9px 12px!important;
    }

    .watch-column > .chat-column .messages{
        height:var(--mobile-chat-messages-height)!important;
        min-height:0!important;
        max-height:var(--mobile-chat-messages-max)!important;
        padding:8px 11px!important;
    }

    .watch-column > .chat-column .chat-form{
        padding:
            7px
            7px
            max(7px,env(safe-area-inset-bottom))
            7px!important;
    }

    .watch-column > .chat-column .chat-form .btn[type="submit"]{
        width:54px!important;
        min-width:54px!important;
        height:54px!important;
        border-radius:16px!important;
    }
}

@media (max-width:560px) and (orientation:portrait){
    .watch-column > .player-card .player-wrap{
        max-height:min(33vh,250px)!important;
    }

    .watch-column > .chat-column .messages{
        --mobile-chat-messages-max:min(20vh,140px);
    }
}

@media (max-width:560px) and (orientation:portrait) and (max-height:760px){
    .watch-column > .player-card .player-wrap{
        max-height:min(31vh,230px)!important;
    }

    .watch-column > .chat-column .messages{
        --mobile-chat-messages-max:min(18vh,118px);
    }
}

@media (max-width:900px) and (orientation:portrait) and (min-height:900px){
    .watch-column > .player-card .player-wrap{
        max-height:min(36vh,320px)!important;
    }

    .watch-column > .chat-column .messages{
        --mobile-chat-messages-max:min(24vh,190px);
    }
}


/* Vewaro 1.21 — TRUE auto-height portrait mobile chat */
@media (max-width:900px) and (orientation:portrait){
    /*
     * The page is normal document flow again. Nothing in Room Chat is given a
     * viewport/flex/fixed height in portrait mode.
     */
    .room-shell{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:visible!important;
    }

    .watch-column{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        display:block!important;
        overflow:visible!important;
    }

    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        display:grid!important;
        grid-template-rows:auto auto auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        flex:none!important;
        align-self:auto!important;
        overflow:visible!important;
        margin:6px 0 0!important;
        position:relative!important;
    }

    .watch-column > .chat-column .chat-head{
        height:auto!important;
        min-height:0!important;
        padding:10px 12px!important;
    }

    /*
     * This is the important part:
     * NO fixed height and NO minimum height.
     * It naturally wraps its actual messages, then stops growing at 220px.
     */
    .watch-column > .chat-column .messages{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
        height:auto!important;
        min-height:0!important;
        max-height:220px!important;
        flex:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        padding:8px 10px!important;
        box-sizing:border-box!important;
    }

    .watch-column > .chat-column .messages:empty{
        display:none!important;
        padding:0!important;
        border:0!important;
    }

    .watch-column > .chat-column .message{
        flex:0 0 auto!important;
    }

    .watch-column > .chat-column .chat-form{
        position:relative!important;
        height:auto!important;
        min-height:0!important;
        flex:none!important;
        margin:0!important;
        padding:
            8px
            8px
            max(8px,env(safe-area-inset-bottom))
            8px!important;
    }

    /*
     * Reset the V1.20 CSS variables so an older inline/service-worker copy
     * cannot keep forcing a portrait message height.
     */
    :root{
        --mobile-chat-messages-height:auto;
        --mobile-chat-messages-max:220px;
    }
}

/* Smaller phones get a slightly lower scroll cap, still true auto-height. */
@media (max-width:560px) and (orientation:portrait){
    .watch-column > .chat-column .messages{
        height:auto!important;
        min-height:0!important;
        max-height:180px!important;
    }
}

/* Very short portrait phones keep chat compact. */
@media (max-width:560px) and (orientation:portrait) and (max-height:760px){
    .watch-column > .chat-column .messages{
        max-height:140px!important;
    }
}

/* Tall portrait phones may show more history before scrolling. */
@media (max-width:900px) and (orientation:portrait) and (min-height:900px){
    .watch-column > .chat-column .messages{
        max-height:260px!important;
    }
}


/* Vewaro 1.22 — portrait mobile auto-fits the remaining viewport */
@media (max-width:900px) and (orientation:portrait){
    :root{
        --vewaro-mobile-vh:var(--vewaro-vh,100dvh);
    }

    html,
    body{
        width:100%;
        min-height:100%;
    }

    body{
        height:var(--vewaro-mobile-vh)!important;
        min-height:var(--vewaro-mobile-vh)!important;
        overflow:hidden!important;
        background:var(--bg)!important;
    }

    .room-header{
        flex:0 0 auto!important;
    }

    .room-shell{
        width:calc(100% - 8px)!important;
        height:calc(var(--vewaro-mobile-vh) - 66px)!important;
        min-height:0!important;
        max-height:none!important;
        margin:4px auto 0!important;
        padding:0!important;
        display:block!important;
        overflow:hidden!important;
    }

    .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        display:flex!important;
        flex-direction:column!important;
        gap:6px!important;
        overflow:hidden!important;
    }

    .watch-column > .player-card{
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        margin:0!important;
    }

    .watch-column > .player-card .player-wrap{
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:min(38vh,300px)!important;
        aspect-ratio:16/9!important;
    }

    .watch-column > .player-card .control-hint{
        padding:6px 9px!important;
        font-size:10px!important;
    }

    .watch-column > .player-card .sync-bar{
        padding:8px 9px!important;
        gap:7px!important;
    }

    .watch-column > .player-card .compat-bar,
    .watch-column > .player-card .compat-panel{
        display:none!important;
    }

    /*
     * This is the "auto height":
     * chat takes exactly whatever height is left after the player.
     */
    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        flex:1 1 0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        align-self:stretch!important;
        position:relative!important;
        overflow:hidden!important;
    }

    .watch-column > .chat-column .chat-head{
        flex:0 0 auto!important;
        height:auto!important;
        min-height:0!important;
        padding:9px 12px!important;
    }

    .watch-column > .chat-column .messages{
        display:flex!important;
        flex-direction:column!important;
        gap:8px!important;
        flex:1 1 auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        padding:8px 10px!important;
        box-sizing:border-box!important;
    }

    .watch-column > .chat-column .messages:empty{
        display:block!important;
        min-height:0!important;
        padding:0!important;
    }

    .watch-column > .chat-column .message{
        flex:0 0 auto!important;
    }

    .watch-column > .chat-column .chat-form{
        flex:0 0 auto!important;
        position:relative!important;
        height:auto!important;
        min-height:0!important;
        margin:0!important;
        padding:
            8px
            8px
            max(8px,env(safe-area-inset-bottom))
            8px!important;
        border-top:1px solid var(--line)!important;
        background:#0d121b!important;
    }

    .watch-column > .chat-column .chat-form > input{
        min-width:0!important;
    }

    /* Prevent legacy V1.20/V1.21 chat-height variables from taking effect. */
    :root{
        --mobile-chat-messages-height:auto;
        --mobile-chat-messages-max:none;
    }
}

/* Compact portrait phones */
@media (max-width:560px) and (orientation:portrait){
    .room-shell{
        width:100%!important;
        height:calc(var(--vewaro-mobile-vh) - 62px)!important;
        margin:0!important;
    }

    .watch-column{
        gap:0!important;
    }

    .watch-column > .player-card{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    .watch-column > .player-card .player-wrap{
        max-height:min(36vh,270px)!important;
    }

    .watch-column > .chat-column{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
    }
}

/* Very short phones: save a little more vertical room */
@media (max-width:560px) and (orientation:portrait) and (max-height:760px){
    .watch-column > .player-card .player-wrap{
        max-height:min(33vh,235px)!important;
    }

    .watch-column > .player-card .control-hint{
        display:none!important;
    }
}


/* Vewaro 1.23 — cleaner mobile player controls */
@media (max-width:900px){
    .player-controls{
        display:flex!important;
        align-items:center!important;
        flex-wrap:nowrap!important;
        gap:6px!important;
        padding:7px 8px!important;
    }

    /* Play/Pause stays more prominent on the left. */
    #playPauseBtn{
        flex:0 0 38px!important;
        width:38px!important;
        min-width:38px!important;
        height:38px!important;
        padding:0!important;
        font-size:15px!important;
    }

    /* Previous/next remain compact when the host has them. */
    #prevItemBtn,
    #nextItemBtn{
        flex:0 0 32px!important;
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        padding:0!important;
        font-size:12px!important;
    }

    .media-time{
        flex:0 0 auto!important;
        min-width:auto!important;
        font-size:10px!important;
        white-space:nowrap!important;
    }

    /*
     * Push the utility controls to the right.
     * Volume is the first item in the right-hand group.
     */
    #muteBtn{
        margin-left:auto!important;
    }

    #muteBtn,
    #castBtn,
    #fullscreenBtn{
        flex:0 0 32px!important;
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        padding:0!important;
        border-radius:9px!important;
        font-size:12px!important;
    }

    #muteBtn i,
    #castBtn i,
    #fullscreenBtn i{
        font-size:12px!important;
        margin:0!important;
    }

    #castBtn span{
        display:none!important;
    }

    /* Cinema remains desktop-only. */
    #cinemaModeBtn{
        display:none!important;
    }

    .volume-bar{
        display:none!important;
    }
}

/* Phone portrait: seek bar gets its own clean row underneath. */
@media (max-width:560px) and (orientation:portrait){
    .player-controls{
        flex-wrap:wrap!important;
        row-gap:6px!important;
    }

    #seekBar{
        order:20!important;
        flex:0 0 100%!important;
        width:100%!important;
        min-width:100%!important;
        margin:0!important;
    }

    #durationTime{
        display:none!important;
    }

    #currentTime{
        order:2!important;
        margin-right:2px!important;
    }

    #muteBtn{
        order:10!important;
        margin-left:auto!important;
    }

    #castBtn{
        order:11!important;
    }

    #fullscreenBtn{
        order:12!important;
    }
}

/* A little tighter on very narrow phones. */
@media (max-width:390px) and (orientation:portrait){
    .player-controls{
        gap:5px!important;
        padding-left:6px!important;
        padding-right:6px!important;
    }

    #muteBtn,
    #castBtn,
    #fullscreenBtn{
        flex-basis:30px!important;
        width:30px!important;
        min-width:30px!important;
        height:30px!important;
    }

    #muteBtn i,
    #castBtn i,
    #fullscreenBtn i{
        font-size:11px!important;
    }
}


/* Vewaro 1.26 — Room Chat title + nickname inline */
.chat-head{
    display:flex;
    align-items:center;
    gap:10px;
}

.chat-head-line{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.chat-head-line .eyebrow,
.chat-head-line #nicknameLabel{
    margin:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:850!important;
}

.chat-head-line #nicknameLabel{
    min-width:0;
    max-width:55%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f8eeef;
    text-align:right;
}

@media (max-width:560px){
    .chat-head-line .eyebrow,
    .chat-head-line #nicknameLabel{
        font-size:11px!important;
    }

    .chat-head-line #nicknameLabel{
        max-width:52%;
    }
}


/* Vewaro 1.27 — definitive inline Room Chat header */
.chat-head > .chat-head-line{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
}

.chat-head > .chat-head-line .eyebrow,
.chat-head > .chat-head-line #nicknameLabel{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:850!important;
    letter-spacing:.04em!important;
}

.chat-head > .chat-head-line .eyebrow{
    color:#8f99aa!important;
    white-space:nowrap!important;
}

.chat-head > .chat-head-line #nicknameLabel{
    min-width:0!important;
    max-width:55%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    text-align:right!important;
    color:#f8eeef!important;
}

@media (max-width:560px){
    .chat-head > .chat-head-line .eyebrow,
    .chat-head > .chat-head-line #nicknameLabel{
        font-size:11px!important;
    }

    .chat-head > .chat-head-line #nicknameLabel{
        max-width:50%!important;
    }
}


/* Vewaro 1.28 — mobile scrolling, software keyboard and picker layering */
@media (max-width:900px) and (orientation:portrait){
    /*
     * The V1.22 viewport lock was intended for the room only. Keep homepage,
     * installer and join/auth pages normally scrollable on phones.
     */
    body:not(.room-page){
        height:auto!important;
        min-height:100dvh!important;
        max-height:none!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        touch-action:pan-y!important;
        -webkit-overflow-scrolling:touch!important;
    }

    body.vewaro-home{
        position:relative!important;
        height:auto!important;
        min-height:100dvh!important;
        overflow-y:auto!important;
    }

    /*
     * While a chat/search input has the software keyboard, unlock room
     * document scrolling so the composer can move above the keyboard.
     */
    body.room-page.mobile-keyboard-open{
        height:auto!important;
        min-height:var(--vewaro-vh,100dvh)!important;
        max-height:none!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        -webkit-overflow-scrolling:touch!important;
        scroll-padding-bottom:18px!important;
    }

    body.room-page.mobile-keyboard-open .room-shell{
        height:auto!important;
        min-height:calc(var(--vewaro-vh,100dvh) - 8px)!important;
        max-height:none!important;
        overflow:visible!important;
    }

    body.room-page.mobile-keyboard-open .watch-column{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:visible!important;
    }

    body.room-page.mobile-keyboard-open .chat-column{
        flex:0 0 auto!important;
        height:auto!important;
        min-height:260px!important;
        max-height:none!important;
        overflow:visible!important;
    }

    body.room-page.mobile-keyboard-open .messages{
        min-height:90px!important;
        max-height:180px!important;
        overflow-y:auto!important;
    }

    body.room-page.mobile-keyboard-open .chat-form{
        position:relative!important;
        z-index:2!important;
    }
}

/*
 * Open mobile emoji/GIF pickers are direct children of body, outside the
 * overflow-hidden room/chat hierarchy, so they float over Sync/player/chat.
 */
body > .emoji-picker.mobile-picker-portal,
body > .gif-picker.mobile-picker-portal{
    box-sizing:border-box!important;
    margin:0!important;
    z-index:10000!important;
    overflow:hidden!important;
    transform:none!important;
    isolation:isolate!important;
    box-shadow:0 24px 70px rgba(0,0,0,.68)!important;
}

body > .emoji-picker.mobile-picker-portal .emoji-grid,
body > .gif-picker.mobile-picker-portal .gif-results{
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
}

@media (max-width:560px){
    body > .emoji-picker.mobile-picker-portal .emoji-grid{
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
    }

    body > .gif-picker.mobile-picker-portal .gif-results{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}


/* Vewaro 1.31 — streamlined host room management */
.host-add-room-btn{
    width:38px!important;
    min-width:38px!important;
    padding:0!important;
    display:inline-grid!important;
    place-items:center!important;
    font-size:14px!important;
}

.host-tools-modal{
    padding:18px!important;
}

.host-tools-modal-card{
    width:min(1120px,calc(100vw - 36px))!important;
    max-height:min(900px,92dvh)!important;
    overflow:auto!important;
    padding:26px!important;
}

.host-tools-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding-right:42px;
    margin-bottom:18px;
}

.host-tools-heading h2{
    margin:6px 0 5px!important;
}

.host-tools-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.host-tools-add,
.host-tools-playlist{
    border:1px solid var(--line);
    border-radius:16px;
    background:#10151f;
    overflow:hidden;
}

.host-tools-add{
    padding:18px;
    margin-bottom:16px;
}

.host-tools-section-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.host-tools-section-title>div{
    display:grid;
    gap:3px;
}

.host-tools-section-title small{
    color:var(--muted);
    font-size:12px;
}

.host-tools-icon,
.settings-section-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#191f2d;
    border:1px solid #2a3346;
    color:#ffaab2;
}

.host-tools-media-form{
    width:100%!important;
    grid-template-columns:minmax(160px,.6fr) minmax(300px,1.5fr) auto!important;
}

.host-tools-playlist .playlist-head{
    background:#0f141d;
}

.host-tools-playlist .playlist-list{
    max-height:420px;
    overflow:auto;
}

.room-settings-modal-card{
    width:min(760px,calc(100vw - 32px))!important;
    max-height:90dvh;
    overflow:auto;
}

.room-settings-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.room-settings-section{
    border:1px solid var(--line);
    background:#10151f;
    border-radius:15px;
    padding:16px;
}

.settings-section-head{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:13px;
}

.settings-section-head>div{
    display:grid;
    gap:3px;
}

.settings-section-head small{
    color:var(--muted);
    font-size:11px;
}

.room-password-form{
    display:grid;
    gap:10px;
}

.room-password-form label{
    display:grid;
    gap:6px;
    font-size:11px;
    font-weight:800;
    color:#aeb7c7;
}

.room-password-form input{
    width:100%;
}

.room-password-form .btn{
    margin-top:2px;
}

.room-expiry-note{
    margin:15px 2px 0!important;
}

@media (max-width:760px){
    .host-tools-modal{
        padding:0!important;
        align-items:stretch!important;
    }

    .host-tools-modal-card{
        width:100%!important;
        height:100dvh!important;
        max-height:100dvh!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        padding:18px 12px max(18px,env(safe-area-inset-bottom))!important;
    }

    .host-tools-heading{
        padding-right:40px;
    }

    .host-tools-media-form{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:9px!important;
    }

    .media-form-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
    }

    .host-tools-playlist .playlist-list{
        max-height:none;
    }

    .room-settings-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:420px){
    .sync-actions{
        gap:5px!important;
    }

    .host-add-room-btn{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
    }

    .sync-actions #settingsBtn{
        padding-left:9px!important;
        padding-right:9px!important;
    }
}


/* =========================================================
   Vewaro 1.32 — Member accounts, named rooms & saved playlists
   ========================================================= */

/* Homepage account navigation */
.home-header-right{
    display:flex;
    align-items:center;
    gap:16px;
}

.home-account-nav{
    display:flex;
    align-items:center;
    gap:8px;
}

.home-account-btn{
    min-height:38px;
}

.home-account-user{
    display:flex;
    align-items:center;
    gap:7px;
    color:#efdfe1;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    max-width:170px;
}

.home-account-user span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.home-account-user i{
    color:#ff949d;
    font-size:16px;
}

/* Member room creation on homepage */
.member-room-create-block{
    padding:13px;
    border:1px solid rgba(255,126,137,.28);
    border-radius:14px;
    background:rgba(233,79,92,.08);
}

.member-room-create-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    font-size:11px;
    font-weight:850;
}

.member-room-create-head span{
    color:#ffbdc3;
}

.member-room-create-head small{
    color:var(--muted);
}

.slug-input-wrap,
.settings-slug-input{
    display:flex;
    align-items:stretch;
    min-width:0;
    border:1px solid var(--line);
    border-radius:11px;
    overflow:hidden;
    background:#0b1018;
}

.slug-input-wrap:focus-within,
.settings-slug-input:focus-within{
    border-color:#ff5c6b;
    box-shadow:0 0 0 3px rgba(255,92,107,.10);
}

.slug-input-wrap span,
.settings-slug-input span{
    display:flex;
    align-items:center;
    padding:0 9px;
    border-right:1px solid var(--line);
    background:#111722;
    color:#7f8999;
    font-size:10px;
    white-space:nowrap;
}

.slug-input-wrap input,
.settings-slug-input input{
    min-width:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
}

.free-room-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    color:#aab4c4;
    background:#0f141d;
    font-size:11px;
}

.free-room-note a{
    color:#ffaab2;
    font-weight:850;
    text-decoration:none;
    white-space:nowrap;
}

/* Named room header */
.room-code-named{
    display:flex!important;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.05;
}

.room-code-named strong{
    max-width:210px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.room-code-named small{
    margin-top:3px;
    color:#7d8798;
    font-size:8px;
    font-weight:750;
    text-transform:none;
}

/* Saved playlists inside Add to Room */
.host-tools-saved{
    border:1px solid var(--line);
    border-radius:16px;
    background:#10151f;
    padding:18px;
    margin-bottom:16px;
}

.saved-room-tools{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
}

.saved-room-tools select{
    min-width:0;
    width:100%;
}

.save-room-playlist-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
    margin-top:9px;
}

.host-tools-library-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:11px;
    color:#ff9ca5;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

/* Membership account layout */
.account-page{
    min-height:100dvh;
    background:
        radial-gradient(circle at 15% 0%,rgba(193,57,69,.18),transparent 30%),
        radial-gradient(circle at 90% 8%,rgba(255,0,40,.08),transparent 26%),
        var(--bg);
    overflow-x:hidden;
    overflow-y:auto;
}

.member-site-header{
    width:min(1260px,calc(100% - 28px));
    margin:0 auto;
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.member-site-header .brand-logo{
    width:145px;
}

.member-site-nav{
    display:flex;
    align-items:center;
    gap:7px;
}

.member-site-nav a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border-radius:10px;
    border:1px solid transparent;
    color:#c7d0de;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

.member-site-nav a:hover{
    background:#121924;
    border-color:var(--line);
    color:#fff;
}

.member-site-nav .member-nav-quiet{
    color:#8e98a9;
}

.member-shell{
    width:min(1260px,calc(100% - 28px));
    margin:0 auto;
    padding:18px 0 50px;
}

.member-auth-wrap{
    min-height:calc(100dvh - 120px);
    display:grid;
    place-items:center;
    padding:30px 0;
}

.member-auth-card{
    width:min(470px,100%);
    padding:28px;
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(14,19,28,.97);
    box-shadow:0 32px 90px rgba(0,0,0,.45);
}

.member-auth-brand{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border-radius:17px;
    background:#141b27;
    border:1px solid var(--line);
}

.member-auth-brand img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.member-auth-card h1{
    margin:7px 0 8px;
    font-size:30px;
    letter-spacing:-.04em;
}

.member-auth-intro{
    margin:0 0 20px;
    color:#98a4b6;
    font-size:13px;
    line-height:1.55;
}

.member-auth-form,
.member-profile-form{
    display:grid;
    gap:11px;
}

.member-auth-form label,
.member-profile-form label{
    display:grid;
    gap:6px;
    color:#adb6c5;
    font-size:11px;
    font-weight:800;
}

.member-auth-benefits{
    display:grid;
    gap:8px;
    margin-top:17px;
    padding-top:16px;
    border-top:1px solid var(--line);
    color:#96a2b3;
    font-size:11px;
}

.member-auth-benefits span{
    display:flex;
    align-items:center;
    gap:8px;
}

.member-auth-benefits i{
    width:16px;
    color:#ff939c;
}

.member-auth-switch{
    margin:18px 0 0;
    text-align:center;
    color:#8d98a9;
    font-size:11px;
}

.member-auth-switch a,
.member-password-row a{
    color:#ff9fa8;
    font-weight:850;
    text-decoration:none;
}

.member-password-row{
    display:flex;
    justify-content:flex-end;
    margin-top:-2px;
    font-size:10px;
}

/* Dashboard */
.member-dashboard-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding:30px 0 22px;
}

.member-dashboard-hero h1{
    margin:6px 0;
    font-size:clamp(32px,5vw,58px);
    letter-spacing:-.055em;
}

.member-dashboard-hero p{
    margin:0;
    color:#8f9bad;
}

.member-plan-badge{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 14px;
    border:1px solid rgba(255,130,141,.30);
    border-radius:14px;
    background:rgba(210,75,87,.11);
}

.member-plan-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#ffb7bd;
    background:#30181a;
}

.member-plan-badge div{
    display:grid;
}

.member-plan-badge small{
    color:#7f8a9c;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.member-plan-badge strong{
    color:#ffeff0;
    font-size:13px;
}

.member-notice{
    margin-bottom:15px;
}

.member-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:11px;
    margin-bottom:15px;
}

.member-stats article{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:11px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#0f141d;
}

.member-stats article>span{
    grid-row:1/3;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#171e2b;
    color:#ff9ca5;
}

.member-stats strong{
    font-size:19px;
    line-height:1.1;
}

.member-stats small{
    color:#7e899b;
    font-size:10px;
}

.member-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
    gap:15px;
}

.member-dashboard-grid.lower{
    margin-top:15px;
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
}

.member-panel{
    min-width:0;
    padding:18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#0f141d;
}

.member-panel h2{
    margin:5px 0 14px;
    font-size:20px;
}

.member-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:13px;
}

.member-panel-head h2{
    margin:4px 0 0;
}

.member-limit-label{
    padding:6px 9px;
    border-radius:999px;
    background:#171e2b;
    color:#8d98aa;
    font-size:9px;
    font-weight:850;
}

.member-room-list,
.saved-playlist-list{
    display:grid;
    gap:8px;
}

.member-room-card{
    min-width:0;
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#111720;
    text-decoration:none;
    color:inherit;
}

.member-room-card:hover{
    border-color:#4e416f;
    background:#131a25;
}

.member-room-icon,
.saved-playlist-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#171e2b;
    color:#ff9aa3;
}

.member-room-copy{
    min-width:0;
    display:grid;
    gap:2px;
}

.member-room-copy strong,
.member-room-copy small,
.member-room-copy span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.member-room-copy strong{
    font-size:12px;
}

.member-room-copy small{
    color:#756d9b;
    font-size:9px;
}

.member-room-copy span{
    color:#818c9d;
    font-size:9px;
}

.member-room-arrow{
    color:#596476;
    font-size:10px;
}

.member-inline-create{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-bottom:11px;
}

.saved-playlist-card{
    display:flex;
    align-items:center;
    gap:8px;
}

.saved-playlist-main{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:13px;
    color:inherit;
    text-decoration:none;
    background:#111720;
}

.saved-playlist-main>span:last-child{
    min-width:0;
    display:grid;
}

.saved-playlist-main strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
}

.saved-playlist-main small{
    color:#7f8a9b;
    font-size:9px;
}

.member-icon-btn{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    background:#141a25;
    color:#9ca7b8;
    cursor:pointer;
}

.member-icon-btn:hover{
    color:#fff;
    border-color:#465066;
}

.member-icon-btn.danger:hover{
    color:#ff8b98;
    border-color:#66313b;
}

.member-icon-btn:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.member-empty{
    display:grid;
    place-items:center;
    gap:5px;
    min-height:150px;
    padding:20px;
    border:1px dashed #293245;
    border-radius:14px;
    text-align:center;
    color:#7f899b;
}

.member-empty.compact{
    min-height:120px;
}

.member-empty i{
    margin-bottom:5px;
    font-size:22px;
    color:#645b83;
}

.member-empty strong{
    color:#b8c0ce;
    font-size:12px;
}

.member-empty span{
    max-width:300px;
    font-size:10px;
    line-height:1.45;
}

.member-feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.member-feature-grid>div{
    display:grid;
    grid-template-columns:28px 1fr;
    column-gap:8px;
    padding:10px;
    border-radius:12px;
    background:#121822;
}

.member-feature-grid i{
    grid-row:1/3;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#ff9da6;
    background:#31191b;
}

.member-feature-grid strong{
    font-size:10px;
}

.member-feature-grid span{
    color:#808b9d;
    font-size:9px;
    line-height:1.4;
}

/* Saved playlist editor */
.playlist-editor-head{
    padding:26px 0 18px;
}

.playlist-editor-head h1{
    margin:5px 0;
    font-size:clamp(30px,5vw,52px);
    letter-spacing:-.05em;
}

.playlist-editor-head p{
    color:#8995a7;
    margin:0;
}

.member-back-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:18px;
    color:#e18e96;
    font-size:10px;
    font-weight:850;
    text-decoration:none;
}

.playlist-editor-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:15px;
    margin-bottom:15px;
}

.playlist-library-panel{
    margin-bottom:30px;
}

.saved-editor-list{
    display:grid;
    gap:7px;
}

.saved-editor-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#111720;
}

.saved-editor-number{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#181e2a;
    color:#7f899a;
    font-size:9px;
    font-weight:900;
}

.saved-editor-copy{
    min-width:0;
    display:grid;
}

.saved-editor-copy strong,
.saved-editor-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.saved-editor-copy strong{
    font-size:11px;
}

.saved-editor-copy small{
    color:#7c8798;
    font-size:9px;
}

.saved-editor-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.saved-editor-actions form{
    margin:0;
}

@media (max-width:900px){
    .home-header-right{
        gap:8px;
    }

    .header-tag{
        display:none;
    }

    .member-dashboard-grid,
    .member-dashboard-grid.lower,
    .playlist-editor-grid{
        grid-template-columns:1fr;
    }

    .member-dashboard-grid.lower{
        margin-top:15px;
    }

    .member-site-header,
    .member-shell{
        width:calc(100% - 20px);
    }
}

@media (max-width:620px){
    .home-account-user{
        display:none;
    }

    .home-account-btn{
        min-height:34px;
        padding:0 9px!important;
        font-size:10px!important;
    }

    .member-room-create-block .form-grid{
        grid-template-columns:1fr!important;
    }

    .free-room-note{
        align-items:flex-start;
        flex-direction:column;
    }

    .saved-room-tools,
    .save-room-playlist-row{
        grid-template-columns:1fr;
    }

    .member-site-header{
        min-height:62px;
    }

    .member-site-header .brand-logo{
        width:120px;
    }

    .member-site-nav a{
        min-height:34px;
        padding:0 8px;
    }

    .member-site-nav a span{
        display:none;
    }

    .member-shell{
        padding-top:6px;
    }

    .member-dashboard-hero{
        align-items:flex-start;
        flex-direction:column;
        padding-top:20px;
    }

    .member-stats{
        grid-template-columns:1fr;
    }

    .member-panel{
        padding:14px;
        border-radius:15px;
    }

    .member-panel-head{
        align-items:flex-start;
    }

    .member-inline-create{
        grid-template-columns:1fr;
    }

    .member-feature-grid{
        grid-template-columns:1fr;
    }

    .member-auth-card{
        padding:20px 15px;
        border-radius:16px;
    }

    .member-auth-card h1{
        font-size:27px;
    }

    .saved-editor-item{
        grid-template-columns:30px minmax(0,1fr);
    }

    .saved-editor-actions{
        grid-column:1/-1;
        justify-content:flex-end;
    }

    .room-code-named strong{
        max-width:125px;
    }
}


/* Vewaro 1.33 — permanent member usernames */
.member-join-identity,
.member-create-identity{
    min-width:0;
    border:1px solid rgba(255,126,137,.28);
    border-radius:13px;
    background:rgba(199,75,85,.09);
}

.member-join-identity{
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 12px;
}

.member-join-identity>span{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#2e181a;
    color:#ff9fa7;
    font-size:16px;
}

.member-join-identity>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.member-join-identity small,
.member-create-identity small,
.member-account-details small{
    color:#7e899a;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.member-join-identity strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#ffecee;
    font-size:13px;
}

.member-create-identity{
    display:grid;
    align-content:center;
    gap:3px;
    padding:10px 12px;
}

.member-create-identity strong{
    color:#ffeaec;
    font-size:12px;
}

.member-create-identity strong i{
    margin-right:5px;
    color:#ff9ba4;
}

.member-create-identity span{
    color:#818c9e;
    font-size:9px;
}

.member-account-details{
    display:grid;
    gap:10px;
}

.member-account-details>div{
    display:grid;
    gap:4px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#111720;
}

.member-account-details strong{
    color:#f4e9ea;
    font-size:12px;
    overflow-wrap:anywhere;
}

.member-account-details span{
    color:#7f8a9c;
    font-size:9px;
    line-height:1.4;
}


/* =========================================================
   Vewaro 1.34 — one member room + public Rooms directory
   ========================================================= */

.member-room-fixed-name,
.member-fixed-room-name{
    display:grid;
    gap:3px;
    padding:11px 12px;
    margin-bottom:10px;
    border:1px solid rgba(255,126,137,.24);
    border-radius:12px;
    background:rgba(202,76,86,.08);
}

.member-room-fixed-name small,
.member-fixed-room-name small{
    color:#80769d;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
}

.member-room-fixed-name strong,
.member-fixed-room-name strong{
    color:#ffeaec;
    font-size:13px;
}

.member-room-fixed-name span{
    color:#818b9c;
    font-size:9px;
}

.member-existing-room{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:17px;
    border:1px solid rgba(255,126,137,.30);
    border-radius:16px;
    background:rgba(202,76,86,.09);
}

.member-existing-room-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#30191b;
    color:#ffa7af;
    font-size:18px;
}

.member-existing-room>div{
    min-width:0;
    display:grid;
    gap:3px;
}

.member-existing-room strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#ffeff0;
    font-size:15px;
}

.member-existing-room small{
    color:#808b9c;
    font-size:9px;
}

/* Open / password choice */
.member-access-create{
    display:grid;
    gap:8px;
}

.room-access-choice{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.room-access-choice>label{
    min-width:0;
    cursor:pointer;
}

.room-access-choice input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.room-access-option{
    min-height:68px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#101620;
    transition:.18s ease;
}

.room-access-option>i{
    grid-row:1/3;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#181f2c;
    color:#8691a3;
}

.room-access-option strong{
    font-size:10px;
    color:#bdc5d2;
}

.room-access-option small{
    color:#707b8d;
    font-size:8px;
    line-height:1.25;
}

.room-access-choice input:checked + .room-access-option{
    border-color:#e25764;
    background:rgba(210,74,86,.13);
    box-shadow:0 0 0 2px rgba(226,87,100,.08);
}

.room-access-choice input:checked + .room-access-option>i{
    color:#ffb5bc;
    background:#3a1c1f;
}

.member-create-password[hidden],
#roomAccessPasswordFields[hidden]{
    display:none!important;
}

.settings-access-choice{
    margin-bottom:10px;
}

.room-access-badge{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    border:1px solid var(--line);
    font-size:10px;
}

.room-access-badge.open{
    color:#76ddb2;
    background:rgba(43,153,108,.10);
    border-color:rgba(72,190,139,.25);
}

.room-access-badge.locked{
    color:#d3b484;
    background:rgba(160,114,49,.10);
    border-color:rgba(201,153,85,.24);
}

.room-access-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

/* Public-directory visibility toggle */
.room-directory-toggle{
    display:block!important;
    cursor:pointer;
}

.room-directory-toggle>input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.room-directory-toggle-ui{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#101620;
}

.room-directory-toggle-ui>i{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#191f2c;
    color:#778294;
}

.room-directory-toggle-ui>span{
    min-width:0;
    display:grid;
    gap:2px;
}

.room-directory-toggle-ui strong{
    color:#b9c2d0;
    font-size:10px;
}

.room-directory-toggle-ui small{
    color:#747f90;
    font-size:8px;
    line-height:1.3;
}

.room-directory-toggle>input:checked + .room-directory-toggle-ui{
    border-color:rgba(217,85,98,.55);
    background:rgba(194,68,79,.11);
}

.room-directory-toggle>input:checked + .room-directory-toggle-ui>i{
    color:#ffacb3;
    background:#391c1f;
}

.member-room-statuses{
    display:flex!important;
    align-items:center;
    gap:8px;
    margin-top:3px;
}

.member-room-statuses em{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#737f91;
    font-size:8px;
    font-style:normal;
    font-weight:750;
}

/* Public Rooms directory */
.public-rooms-page{
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    background:
        radial-gradient(circle at 10% -5%,rgba(209,61,74,.18),transparent 31%),
        radial-gradient(circle at 95% 5%,rgba(255,0,39,.08),transparent 28%),
        var(--bg);
}

.public-rooms-header{
    width:min(1260px,calc(100% - 28px));
    margin:0 auto;
}

.public-rooms-shell{
    width:min(1260px,calc(100% - 28px));
    margin:0 auto;
    padding:38px 0 60px;
}

.public-rooms-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.public-rooms-hero h1{
    margin:6px 0 9px;
    font-size:clamp(38px,7vw,76px);
    line-height:.95;
    letter-spacing:-.065em;
}

.public-rooms-hero p{
    max-width:720px;
    margin:0;
    color:#929daf;
    font-size:13px;
    line-height:1.55;
}

.public-room-legend{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.public-room-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#101620;
    color:#8d98aa;
    font-size:9px;
    font-weight:800;
}

.public-room-legend .fa-lock-open{
    color:#72d9ad;
}

.public-room-legend .fa-lock{
    color:#d1b17e;
}

.public-rooms-listing{
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(13,18,27,.91);
}

.public-rooms-list-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px;
}

.public-rooms-list-head h2{
    margin:4px 0 0;
    font-size:22px;
}

.public-room-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.public-room-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#10161f;
}

.public-room-card:hover{
    border-color:#40365c;
    background:#121924;
}

.public-room-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.public-room-avatar{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#512125,#3b171c);
    color:#ffbac0;
    font-size:14px;
    font-weight:900;
}

.public-room-access{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.public-room-access.open{
    color:#79ddb3;
    background:rgba(47,153,111,.10);
    border-color:rgba(65,180,130,.25);
}

.public-room-access.locked{
    color:#d4b47e;
    background:rgba(164,119,52,.10);
    border-color:rgba(192,143,72,.25);
}

.public-room-card-copy{
    min-width:0;
    padding:17px 1px;
}

.public-room-card-copy h3{
    margin:5px 0 8px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:20px;
    letter-spacing:-.03em;
}

.public-room-card-copy p{
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8a96a8;
    font-size:10px;
}

.public-room-card-copy p i{
    margin-right:5px;
    color:#eb7781;
}

.public-room-card-meta{
    display:grid;
    gap:5px;
    margin-top:auto;
    padding:11px 0;
    border-top:1px solid var(--line);
    color:#707c8f;
    font-size:9px;
}

.public-room-card-meta span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.public-room-card-meta i{
    width:15px;
    color:#596578;
}

.public-room-join{
    margin-top:4px;
}

.public-rooms-empty{
    min-height:260px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:6px;
    padding:30px;
    border:1px dashed #283245;
    border-radius:16px;
    color:#7d899b;
    text-align:center;
}

.public-rooms-empty>i{
    margin-bottom:7px;
    color:#5c5576;
    font-size:28px;
}

.public-rooms-empty strong{
    color:#b4bdca;
    font-size:13px;
}

.public-rooms-empty span{
    max-width:420px;
    font-size:10px;
}

@media (max-width:940px){
    .public-room-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .public-rooms-hero{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:620px){
    .member-existing-room{
        grid-template-columns:auto minmax(0,1fr);
    }

    .member-existing-room>.btn{
        grid-column:1/-1;
    }

    .room-access-choice{
        grid-template-columns:1fr 1fr;
    }

    .public-rooms-header,
    .public-rooms-shell{
        width:calc(100% - 20px);
    }

    .public-rooms-shell{
        padding-top:24px;
    }

    .public-rooms-listing{
        padding:12px;
        border-radius:16px;
    }

    .public-rooms-list-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .public-room-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:390px){
    .room-access-choice{
        grid-template-columns:1fr;
    }
}


/* Vewaro 1.35 — automatic member room */
.empty-room-state{
    position:absolute;
    inset:0;
    z-index:4;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    padding:28px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 20%,rgba(218,70,83,.20),transparent 35%),
        #090d14;
}

.empty-room-state[hidden]{
    display:none!important;
}

.empty-room-state-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:4px;
    border:1px solid rgba(255,126,137,.28);
    border-radius:18px;
    background:rgba(208,70,82,.11);
    color:#ffa8b0;
    font-size:20px;
}

.empty-room-state strong{
    color:#f0f2f7;
    font-size:17px;
}

.empty-room-state p{
    max-width:380px;
    margin:0 0 5px;
    color:#8995a7;
    font-size:11px;
    line-height:1.5;
}

@media (max-width:560px){
    .empty-room-state{
        padding:18px;
    }

    .empty-room-state-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:17px;
    }

    .empty-room-state strong{
        font-size:14px;
    }

    .empty-room-state p{
        max-width:290px;
        font-size:9px;
    }
}


/* =========================================================
   Vewaro 1.36 — navigation + guest homepage polish
   ========================================================= */

.vewaro-header,
.public-rooms-header{
    min-height:72px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
}

.vewaro-header .vewaro-brand,
.public-rooms-header .vewaro-brand{
    flex:0 0 auto;
}

.home-header-right{
    min-width:0;
    flex:1 1 auto;
    justify-content:flex-end;
}

.home-account-nav{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:4px!important;
    padding:4px;
    border:1px solid #242c3a;
    border-radius:14px;
    background:rgba(15,20,29,.92);
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.home-account-nav .home-account-btn{
    min-height:36px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0!important;
    padding:0 11px!important;
    border-radius:10px!important;
    white-space:nowrap;
    font-size:10px!important;
    line-height:1!important;
}

.home-account-nav .home-account-btn.subtle{
    border-color:transparent!important;
    background:transparent!important;
}

.home-account-nav .home-account-btn.subtle:hover,
.home-account-nav .home-account-btn.subtle.active{
    border-color:#303a4d!important;
    background:#171e29!important;
}

.home-account-nav .home-account-btn i{
    font-size:11px;
}

.home-account-nav .join-link{
    min-width:104px;
}

.nav-label-short{
    display:none;
}

/* Account header menu matches the public navigation instead of floating links. */
.member-site-header{
    gap:18px!important;
}

.member-site-nav{
    display:flex!important;
    align-items:center!important;
    gap:3px!important;
    padding:4px!important;
    border:1px solid #242c3a;
    border-radius:14px;
    background:#0f141d;
}

.member-site-nav a{
    min-height:36px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:10px!important;
}

.member-site-nav a:hover{
    background:#171e29!important;
}

.member-site-nav .member-nav-quiet{
    margin-left:2px!important;
    border-left:1px solid #2a3342!important;
    border-radius:0 10px 10px 0!important;
}

/* Guest homepage welcome */
.vewaro-landing{
    padding-top:clamp(28px,5vw,68px)!important;
}

.vewaro-hero{
    align-items:start!important;
    gap:clamp(28px,5vw,70px)!important;
}

.hero-copy{
    padding-top:8px;
}

.hero-welcome-pill{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    padding:7px 10px;
    border:1px solid rgba(255,104,117,.32);
    border-radius:999px;
    background:rgba(217,68,81,.10);
    color:#ffb8be;
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.hero-welcome-pill i{
    color:#ff727e;
}

.hero-copy h1{
    max-width:760px;
}

.hero-primary-actions{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin:23px 0 10px;
}

.hero-primary-actions .btn{
    min-height:47px!important;
    padding-left:17px!important;
    padding-right:17px!important;
}

.hero-no-account{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:20px;
    color:#7f8b9d;
    font-size:9px;
    font-weight:750;
}

.hero-no-account i{
    color:#67d6a8;
}

.landing-actions{
    scroll-margin-top:20px;
}

.action-card{
    box-shadow:0 24px 70px rgba(0,0,0,.20);
}

/* Make the landing menu/header resilient on narrower desktops. */
@media (max-width:820px){
    .header-tag{
        display:none!important;
    }

    .vewaro-header,
    .public-rooms-header{
        width:calc(100% - 20px)!important;
        min-height:64px!important;
        gap:10px!important;
    }

    .vewaro-header .brand-logo,
    .public-rooms-header .brand-logo{
        width:125px!important;
    }

    .home-account-nav{
        gap:2px!important;
        padding:3px!important;
    }

    .home-account-nav .home-account-btn{
        min-height:34px!important;
        padding:0 8px!important;
        gap:5px!important;
    }

    .home-account-nav .join-link{
        min-width:auto;
    }
}

@media (max-width:520px){
    .vewaro-header,
    .public-rooms-header{
        min-height:60px!important;
    }

    .vewaro-header .brand-logo,
    .public-rooms-header .brand-logo{
        width:108px!important;
    }

    .home-header-right{
        flex:0 1 auto;
    }

    .home-account-nav{
        border-radius:12px;
    }

    .home-account-nav .home-account-btn{
        padding:0 7px!important;
        font-size:9px!important;
    }

    .nav-label-full{
        display:none;
    }

    .nav-label-short{
        display:inline;
    }

    .hero-primary-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .hero-primary-actions .btn{
        width:100%;
        min-width:0;
    }

    .member-site-header{
        width:calc(100% - 18px)!important;
        min-height:60px!important;
    }

    .member-site-header .brand-logo{
        width:108px!important;
    }

    .member-site-nav{
        gap:1px!important;
        padding:3px!important;
    }

    .member-site-nav a{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        min-height:34px!important;
        padding:0!important;
        justify-content:center!important;
        border-radius:9px!important;
    }

    .member-site-nav a span{
        display:none!important;
    }

    .member-site-nav .member-nav-quiet{
        margin-left:1px!important;
        border-left:0!important;
        border-radius:9px!important;
    }
}

@media (max-width:370px){
    .vewaro-header .brand-logo,
    .public-rooms-header .brand-logo{
        width:96px!important;
    }

    .home-account-nav .rooms-link span{
        display:none;
    }

    .home-account-nav .rooms-link{
        width:34px!important;
        padding:0!important;
    }

    .hero-primary-actions{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   Vewaro 1.37 — redesigned guest landing page
   ========================================================= */

.v137-home{
    width:min(1240px,calc(100% - 32px));
    margin:0 auto;
    padding:clamp(38px,6vw,78px) 0 60px;
}

.v137-hero{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    align-items:center;
    gap:clamp(34px,6vw,82px);
    min-height:480px;
}

.v137-hero-copy{
    min-width:0;
}

.v137-hero-copy h1{
    margin:10px 0 18px;
    max-width:760px;
    font-size:clamp(48px,6.6vw,86px);
    line-height:.94;
    letter-spacing:-.065em;
}

.v137-hero-copy h1 span{
    color:#ff848f;
}

.v137-hero-copy>p{
    max-width:650px;
    margin:0;
    color:#9aa6b8;
    font-size:clamp(14px,1.4vw,17px);
    line-height:1.65;
}

.v137-hero-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:26px 0 14px;
}

.v137-hero-actions .btn{
    min-height:48px!important;
    padding:0 18px!important;
}

.v137-hero-trust{
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    color:#758194;
    font-size:9px;
    font-weight:800;
}

.v137-hero-trust span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.v137-hero-trust i{
    color:#70d7ad;
}

/* Visual room mockup */
.v137-hero-visual{
    position:relative;
    min-height:390px;
    display:grid;
    place-items:center;
}

.v137-screen{
    position:relative;
    width:min(100%,510px);
    aspect-ratio:16/11;
    overflow:hidden;
    border:1px solid #2c3445;
    border-radius:22px;
    background:#0f151f;
    box-shadow:
        0 38px 100px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,102,115,.05);
}

.v137-screen::before{
    content:"";
    position:absolute;
    inset:-30% 20% 38% -20%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(242,63,78,.28),transparent 65%);
}

.v137-screen-top{
    position:relative;
    z-index:2;
    height:48px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    border-bottom:1px solid #242c3a;
    color:#606b7c;
}

.v137-screen-top span{
    font-size:6px;
}

.v137-screen-top span:first-child{color:#ff7180}
.v137-screen-top span:nth-child(2){color:#e6c76d}
.v137-screen-top span:nth-child(3){color:#67d6a8}

.v137-screen-top strong{
    margin-left:auto;
    color:#737f91;
    font-size:8px;
    letter-spacing:.14em;
}

.v137-screen-player{
    position:relative;
    z-index:2;
    height:calc(100% - 93px);
    display:grid;
    place-items:center;
    background:
        linear-gradient(135deg,rgba(106,30,36,.9),rgba(19,22,40,.96) 52%,rgba(61,13,20,.92));
}

.v137-play{
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    padding-left:4px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(135deg,#ff2b3a,#df4f64);
    box-shadow:0 16px 44px rgba(221,52,66,.38);
    font-size:23px;
}

.v137-screen-bars{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    display:grid;
    grid-template-columns:2fr 1fr 1.3fr .8fr 1.6fr;
    gap:5px;
    align-items:end;
    height:28px;
    opacity:.55;
}

.v137-screen-bars i{
    display:block;
    height:40%;
    border-radius:999px;
    background:#ea717b;
}

.v137-screen-bars i:nth-child(2){height:75%}
.v137-screen-bars i:nth-child(3){height:52%}
.v137-screen-bars i:nth-child(4){height:90%}
.v137-screen-bars i:nth-child(5){height:62%}

.v137-screen-bottom{
    position:relative;
    z-index:2;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    border-top:1px solid #242c3a;
    color:#788496;
    font-size:8px;
    font-weight:800;
}

.v137-screen-bottom span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.v137-screen-bottom i{
    color:#ec7882;
}

.v137-float{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border:1px solid #313a4c;
    border-radius:11px;
    background:rgba(16,22,32,.96);
    box-shadow:0 14px 34px rgba(0,0,0,.30);
    color:#aab4c4;
    font-size:9px;
    font-weight:850;
}

.v137-float i{
    color:#ff949d;
}

.v137-float-one{left:-6px;top:70px}
.v137-float-two{right:-8px;top:112px}
.v137-float-three{right:28px;bottom:18px}

/* Main 3 choices */
.v137-start-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin-top:38px;
}

.v137-start-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:20px;
    border:1px solid #273041;
    border-radius:18px;
    background:#101620;
    box-shadow:0 20px 55px rgba(0,0,0,.18);
}

.v137-start-card:hover{
    border-color:#3b4460;
    transform:translateY(-1px);
}

.v137-start-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#181e2c;
    color:#ff929b;
    font-size:15px;
}

.v137-start-card h2{
    margin:5px 0 5px;
    font-size:21px;
    letter-spacing:-.03em;
}

.v137-start-card p{
    min-height:45px;
    margin:0;
    color:#8793a5;
    font-size:11px;
    line-height:1.5;
}

.v137-start-card>small{
    margin-top:auto;
    color:#6f7a8c;
    font-size:8px;
    line-height:1.45;
}

.v137-start-card>small i{
    margin-right:4px;
    color:#bd676f;
}

.v137-code-field{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    border:1px solid #2d3648;
    border-radius:11px;
    background:#0b1018;
}

.v137-code-field:focus-within{
    border-color:#ff5c6b;
    box-shadow:0 0 0 3px rgba(255,92,107,.10);
}

.v137-code-field i{
    text-align:center;
    color:#697587;
    font-size:10px;
}

.v137-code-field input{
    min-width:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
}

.v137-join-form{
    display:grid;
    gap:9px;
}

/* Member banner */
.v137-member-banner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    margin-top:16px;
    padding:22px;
    border:1px solid rgba(239,94,107,.30);
    border-radius:18px;
    background:
        radial-gradient(circle at 88% 20%,rgba(213,51,76,.10),transparent 34%),
        linear-gradient(120deg,rgba(170,53,63,.13),rgba(15,21,31,.98) 40%);
}

.v137-member-icon{
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#31191b;
    color:#ffa9b1;
    font-size:19px;
}

.v137-member-copy h2{
    margin:4px 0 6px;
    font-size:21px;
}

.v137-member-copy>p{
    margin:0;
    color:#8995a7;
    font-size:10px;
    line-height:1.5;
}

.v137-member-features{
    display:flex;
    gap:11px;
    flex-wrap:wrap;
    margin-top:10px;
}

.v137-member-features span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#7f8b9d;
    font-size:8px;
    font-weight:800;
}

.v137-member-features i{
    color:#ef868f;
}

.v137-member-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

/* Supported strip */
.v137-supported{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:16px;
    padding:13px 16px;
    border-top:1px solid #242c3a;
    color:#657083;
}

.v137-supported>span{
    flex:0 0 auto;
    font-size:8px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.v137-supported>div{
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.v137-supported strong{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#768295;
    font-size:8px;
}

.v137-supported i{
    color:#6e61a2;
}

/* Create-room modal */
body.modal-open{
    overflow:hidden!important;
}

.v137-create-modal{
    padding:18px!important;
    overflow-y:auto!important;
}

.v137-create-modal-card{
    width:min(850px,calc(100vw - 36px))!important;
    max-height:none!important;
    margin:auto!important;
    padding:24px!important;
}

.v137-modal-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:18px;
    padding-right:44px;
}

.v137-modal-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#34181b;
    color:#ffa5ad;
    font-size:16px;
}

.v137-modal-head h2{
    margin:4px 0 3px;
    font-size:24px;
}

.v137-modal-head p{
    margin:0;
    color:#8490a2;
    font-size:10px;
}

.v137-create-form{
    display:grid;
    gap:11px;
}

.v137-form-section{
    padding:15px;
    border:1px solid #273041;
    border-radius:14px;
    background:#0f151e;
}

.v137-form-section.compact{
    padding-bottom:14px;
}

.v137-form-section-head{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
}

.v137-form-section-head>span{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#35181b;
    color:#ff9ca5;
    font-size:9px;
    font-weight:900;
}

.v137-form-section-head>div{
    display:grid;
    gap:1px;
}

.v137-form-section-head strong{
    font-size:11px;
}

.v137-form-section-head small{
    color:#748093;
    font-size:8px;
}

.v137-form-grid{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:11px;
}

.v137-form-grid>label,
.v137-form-section>label{
    display:grid;
    gap:6px;
    color:#aeb7c6;
    font-size:9px;
    font-weight:850;
}

.v137-input-icon{
    display:grid;
    grid-template-columns:36px minmax(0,1fr);
    align-items:center;
    border:1px solid #2d3648;
    border-radius:11px;
    background:#0b1018;
}

.v137-input-icon:focus-within{
    border-color:#ff5c6b;
    box-shadow:0 0 0 3px rgba(255,92,107,.10);
}

.v137-input-icon i{
    text-align:center;
    color:#697486;
    font-size:10px;
}

.v137-input-icon input{
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
}

.v137-control-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.v137-control-options label{
    cursor:pointer;
}

.v137-control-options input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.v137-control-options label>span{
    min-height:62px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:8px;
    padding:9px;
    border:1px solid #293244;
    border-radius:11px;
    background:#101620;
}

.v137-control-options label>span i{
    grid-row:1/3;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#181e2b;
    color:#798597;
    font-size:9px;
}

.v137-control-options label>span strong{
    font-size:9px;
}

.v137-control-options label>span small{
    color:#6e798b;
    font-size:7px;
}

.v137-control-options input:checked+span{
    border-color:#ff5c6b;
    background:rgba(211,74,86,.12);
}

.v137-control-options input:checked+span i{
    color:#ffa6ae;
    background:#3a1c1f;
}

.v137-create-submit{
    min-height:48px!important;
}

.v137-create-foot{
    margin:0;
    text-align:center;
    color:#6d7889;
    font-size:8px;
}

.v137-create-foot a{
    color:#f08790;
    font-weight:850;
    text-decoration:none;
}

/* Tablet */
@media (max-width:960px){
    .v137-hero{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .v137-hero-copy{
        max-width:760px;
    }

    .v137-hero-visual{
        min-height:340px;
    }

    .v137-screen{
        width:min(100%,620px);
    }

    .v137-start-grid{
        grid-template-columns:1fr 1fr;
    }

    .v137-browse-card{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:auto minmax(0,1fr) auto;
        align-items:center;
    }

    .v137-browse-card .btn{
        width:auto!important;
        min-width:150px;
    }

    .v137-browse-card>small{
        grid-column:2/4;
    }
}

/* Mobile */
@media (max-width:640px){
    .v137-home{
        width:calc(100% - 20px);
        padding-top:28px;
    }

    .v137-hero{
        gap:24px;
    }

    .v137-hero-copy h1{
        font-size:clamp(39px,12vw,58px);
    }

    .v137-hero-copy>p{
        font-size:12px;
    }

    .v137-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .v137-hero-actions .btn{
        width:100%;
    }

    .v137-hero-trust{
        gap:9px 12px;
    }

    .v137-hero-visual{
        min-height:270px;
    }

    .v137-screen{
        width:100%;
        border-radius:17px;
    }

    .v137-float{
        display:none;
    }

    .v137-play{
        width:56px;
        height:56px;
        font-size:18px;
    }

    .v137-start-grid{
        grid-template-columns:1fr;
        margin-top:24px;
    }

    .v137-browse-card{
        display:flex;
    }

    .v137-browse-card .btn{
        width:100%!important;
    }

    .v137-browse-card>small{
        grid-column:auto;
    }

    .v137-member-banner{
        grid-template-columns:auto minmax(0,1fr);
        align-items:start;
        padding:17px;
    }

    .v137-member-actions{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .v137-member-actions .btn{
        width:100%;
    }

    .v137-member-features{
        gap:7px 10px;
    }

    .v137-supported{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .v137-create-modal{
        padding:0!important;
        align-items:stretch!important;
    }

    .v137-create-modal-card{
        width:100%!important;
        min-height:100dvh!important;
        margin:0!important;
        padding:18px 12px max(18px,env(safe-area-inset-bottom))!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    .v137-form-grid,
    .v137-control-options{
        grid-template-columns:1fr;
    }
}

@media (max-width:380px){
    .v137-member-banner{
        grid-template-columns:1fr;
    }

    .v137-member-icon{
        width:46px;
        height:46px;
    }
}


/* =========================================================
   Vewaro 1.38 — simpler landing + room-only creation
   ========================================================= */

/* Tone the hero down slightly so the page feels more balanced. */
.v137-home{
    padding-top:clamp(28px,4.2vw,54px)!important;
}

.v137-hero{
    min-height:430px!important;
    grid-template-columns:minmax(0,1fr) minmax(350px,.88fr)!important;
    gap:clamp(32px,5vw,66px)!important;
}

.v137-hero-copy h1{
    max-width:690px!important;
    font-size:clamp(46px,5.6vw,74px)!important;
    line-height:.96!important;
}

.v137-hero-copy>p{
    max-width:600px!important;
    font-size:clamp(13px,1.2vw,16px)!important;
}

.v137-hero-visual{
    min-height:350px!important;
}

.v137-screen{
    width:min(100%,470px)!important;
    border-radius:18px!important;
}

.v137-start-grid{
    margin-top:28px!important;
    gap:12px!important;
}

.v137-start-card{
    padding:18px!important;
    border-radius:16px!important;
    background:
        linear-gradient(180deg,rgba(20,27,39,.98),rgba(15,21,31,.98))!important;
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}

.v137-start-card:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 24px 65px rgba(0,0,0,.24)!important;
}

.v137-start-icon{
    width:40px!important;
    height:40px!important;
    border-radius:11px!important;
}

.v137-start-card h2{
    font-size:19px!important;
}

.v137-member-banner{
    margin-top:12px!important;
    border-radius:16px!important;
}

/* Room-only create modal */
.v138-create-modal{
    padding:18px!important;
    overflow-y:auto!important;
    background:rgba(3,6,11,.82)!important;
    backdrop-filter:blur(9px);
}

.v138-create-card{
    width:min(720px,calc(100vw - 36px))!important;
    max-height:none!important;
    margin:auto!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:20px!important;
    border:1px solid #30394c!important;
    background:#101620!important;
    box-shadow:0 36px 110px rgba(0,0,0,.58)!important;
}

.v138-create-card>.modal-x{
    top:17px!important;
    right:17px!important;
    z-index:5;
}

.v138-create-head{
    display:flex;
    align-items:center;
    gap:13px;
    padding:22px 58px 19px 22px;
    border-bottom:1px solid #252e3e;
    background:
        radial-gradient(circle at 80% -20%,rgba(238,77,90,.20),transparent 36%),
        #121824;
}

.v138-create-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:14px;
    border:1px solid rgba(241,102,114,.25);
    background:#31191b;
    color:#ffa6ae;
    font-size:16px;
}

.v138-create-head>div{
    min-width:0;
}

.v138-create-head h2{
    margin:4px 0 3px;
    font-size:23px;
    letter-spacing:-.035em;
}

.v138-create-head p{
    max-width:500px;
    margin:0;
    color:#8793a5;
    font-size:10px;
    line-height:1.45;
}

.v138-create-card>.notice{
    margin:14px 18px 0!important;
}

.v138-room-form{
    display:grid;
    gap:10px;
    padding:16px 18px 18px;
}

.v138-room-block{
    padding:14px;
    border:1px solid #283244;
    border-radius:14px;
    background:#0c121b;
}

.v138-room-block-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:11px;
}

.v138-room-block-head>span{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#181e2b;
    color:#f7939c;
    font-size:11px;
}

.v138-room-block-head>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.v138-room-block-head strong{
    color:#e7ebf2;
    font-size:11px;
}

.v138-room-block-head small{
    color:#748092;
    font-size:8px;
    line-height:1.35;
}

.v138-field{
    display:grid;
    gap:6px;
    color:#aeb8c7;
    font-size:9px;
    font-weight:850;
}

.v138-field>small{
    color:#687487;
    font-size:8px;
    font-weight:600;
}

.v138-choice-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
}

.v138-choice-grid>label{
    min-width:0;
    cursor:pointer;
}

.v138-choice-grid input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.v138-choice{
    min-height:72px;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;
    column-gap:9px!important;
    padding:10px!important;
    border:1px solid #2b3446!important;
    border-radius:12px!important;
    background:#111722!important;
    transition:border-color .16s ease,background .16s ease,transform .16s ease!important;
}

.v138-choice>i{
    grid-row:1/3;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#191f2c;
    color:#7e8a9d;
    font-size:11px;
}

.v138-choice strong{
    color:#bbc4d2;
    font-size:10px;
}

.v138-choice small{
    color:#6f7b8d;
    font-size:8px;
    line-height:1.3;
}

.v138-choice-grid input:checked+.v138-choice{
    border-color:#ff5f6e!important;
    background:linear-gradient(135deg,rgba(222,75,88,.18),rgba(17,23,34,.98))!important;
    box-shadow:0 0 0 2px rgba(255,95,110,.07)!important;
}

.v138-choice-grid input:checked+.v138-choice>i{
    color:#ffb5bc;
    background:#3c1b1e;
}

.v138-choice-grid>label:hover .v138-choice{
    transform:translateY(-1px);
    border-color:#414c62!important;
}

.v138-password-field{
    margin-top:9px;
}

.v138-room-ready{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border:1px solid rgba(210,78,99,.18);
    border-radius:12px;
    background:rgba(152,41,58,.07);
}

.v138-room-ready>span{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#e68c9a;
    background:#331318;
    font-size:10px;
}

.v138-room-ready>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.v138-room-ready strong{
    color:#b9c8d1;
    font-size:9px;
}

.v138-room-ready small{
    color:#718492;
    font-size:8px;
    line-height:1.35;
}

.v138-room-ready b{
    color:#ffa7af;
}

.v138-create-submit{
    min-height:49px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    border-radius:12px!important;
}

.v138-create-foot{
    margin:0;
    text-align:center;
    color:#677386;
    font-size:8px;
}

.v138-create-foot a{
    color:#f8919a;
    font-weight:850;
    text-decoration:none;
}

@media (max-width:760px){
    .v137-hero{
        grid-template-columns:1fr!important;
        min-height:auto!important;
    }

    .v137-hero-copy h1{
        font-size:clamp(42px,10vw,62px)!important;
    }

    .v137-hero-visual{
        min-height:290px!important;
    }
}

@media (max-width:560px){
    .v138-create-modal{
        padding:0!important;
        align-items:stretch!important;
    }

    .v138-create-card{
        width:100%!important;
        min-height:100dvh!important;
        margin:0!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    .v138-create-head{
        padding:18px 52px 15px 13px;
    }

    .v138-create-icon{
        width:40px;
        height:40px;
        flex-basis:40px;
        border-radius:12px;
    }

    .v138-create-head h2{
        font-size:20px;
    }

    .v138-room-form{
        padding:12px 10px max(18px,env(safe-area-inset-bottom));
    }

    .v138-room-block{
        padding:12px;
    }

    .v138-choice-grid{
        grid-template-columns:1fr!important;
    }

    .v138-choice{
        min-height:62px;
    }
}


/* =========================================================
   Vewaro 1.39 — clearer homepage hero visual
   ========================================================= */
.v139-screen{
    width:min(100%,500px)!important;
    border-radius:22px!important;
    overflow:hidden!important;
    border:1px solid rgba(93,109,144,.42)!important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,84,98,.18), transparent 32%),
        linear-gradient(180deg,#151d2b 0%, #121926 100%)!important;
    box-shadow:0 34px 85px rgba(0,0,0,.35)!important;
}

.v139-screen-top{
    padding:16px 18px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    border-bottom:1px solid rgba(75,90,121,.38)!important;
}

.v139-screen-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.v139-screen-top strong{
    font-size:12px!important;
    letter-spacing:.16em!important;
    color:#93a2bb!important;
}

.v139-screen-copy{
    padding:22px 26px 8px;
}

.v139-screen-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(255,106,119,.28);
    background:rgba(249,90,104,.09);
    color:#ffa8b0;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.v139-screen-copy h3{
    margin:16px 0 10px;
    color:#fdf7f8;
    font-size:34px;
    line-height:1.02;
    letter-spacing:-.045em;
}

.v139-screen-copy p{
    max-width:340px;
    margin:0;
    color:#9aa6b8;
    font-size:15px;
    line-height:1.6;
}

.v139-screen-player{
    min-height:auto!important;
    padding:18px 26px 0!important;
    display:grid!important;
    justify-items:center!important;
    gap:22px!important;
}

.v139-play{
    width:92px!important;
    height:92px!important;
    font-size:32px!important;
    box-shadow:0 14px 45px rgba(245,74,89,.36)!important;
}

.v139-progress{
    width:100%;
    display:grid;
    grid-template-columns:1.4fr .9fr 1.1fr .7fr;
    gap:10px;
    align-items:end;
}

.v139-progress i{
    display:block;
    height:14px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(247,90,104,.85),rgba(227,92,105,.85));
}
.v139-progress i:nth-child(2){height:18px}
.v139-progress i:nth-child(3){height:14px}
.v139-progress i:nth-child(4){height:18px}

.v139-feature-row{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
    padding:18px 18px 18px;
    border-top:1px solid rgba(75,90,121,.34);
    background:rgba(9,14,22,.46);
}

.v139-feature-row span{
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    color:#efdddf;
    font-size:14px;
    font-weight:750;
    text-align:center;
}

.v139-feature-row i{
    color:#ff8d97;
}

.v139-float{
    min-height:44px!important;
    padding:0 16px!important;
    font-size:14px!important;
    font-weight:800!important;
    color:#ffeef0!important;
    background:rgba(16,22,34,.92)!important;
    border:1px solid rgba(111,129,167,.34)!important;
    box-shadow:0 16px 45px rgba(0,0,0,.28)!important;
}

.v139-float i{
    color:#ff8c96!important;
}

@media (max-width: 1100px){
    .v139-screen-copy h3{font-size:30px;}
    .v139-screen-copy p{font-size:14px;}
    .v139-feature-row span{font-size:13px;}
}

@media (max-width: 760px){
    .v139-screen{width:min(100%,560px)!important;}
    .v139-screen-copy{padding:18px 18px 6px;}
    .v139-screen-copy h3{font-size:28px;}
    .v139-screen-copy p{max-width:none;font-size:14px;}
    .v139-screen-player{padding:16px 18px 0!important;gap:18px!important;}
    .v139-play{width:82px!important;height:82px!important;font-size:28px!important;}
    .v139-feature-row{grid-template-columns:1fr; padding:16px 16px 16px;}
    .v139-feature-row span{justify-content:flex-start;}
    .v139-float{font-size:13px!important;}
}


/* =========================================================
   Vewaro 1.40 — hero image, readable type & Vewaro scrollbars
   ========================================================= */

/* Use the generated transparent Vewaro illustration instead of the CSS mockup. */
.v140-hero-visual{
    min-height:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
}

.v140-hero-image{
    display:block;
    width:min(100%,660px);
    height:auto;
    max-height:540px;
    object-fit:contain;
    filter:drop-shadow(0 30px 55px rgba(0,0,0,.30));
    user-select:none;
    -webkit-user-drag:none;
}

/* Centre the two main hero actions as requested. */
.v137-hero-actions{
    width:100%;
    justify-content:center!important;
}

.v137-hero-trust{
    justify-content:center!important;
}

/* Readability pass across the guest homepage. */
.v137-hero-copy>p{
    font-size:17px!important;
    line-height:1.65!important;
}

.v137-hero-trust{
    font-size:11px!important;
    line-height:1.4;
}

.v137-start-card p{
    min-height:0!important;
    font-size:13px!important;
    line-height:1.55!important;
}

.v137-start-card>small{
    font-size:10px!important;
    line-height:1.45!important;
}

.v137-code-field input{
    font-size:14px!important;
}

.v137-member-copy>p{
    font-size:12px!important;
    line-height:1.55!important;
}

.v137-member-features span{
    font-size:10px!important;
}

.v137-supported>span,
.v137-supported strong{
    font-size:10px!important;
}

/* Create-room modal: less tiny text, more comfortable reading. */
.v138-create-head p{
    font-size:12px!important;
    line-height:1.5!important;
}

.v138-room-block-head strong{
    font-size:13px!important;
}

.v138-room-block-head small{
    font-size:10px!important;
    line-height:1.4!important;
}

.v138-field{
    font-size:11px!important;
}

.v138-field>small{
    font-size:10px!important;
}

.v138-choice strong{
    font-size:12px!important;
}

.v138-choice small{
    font-size:10px!important;
    line-height:1.35!important;
}

.v138-room-ready strong{
    font-size:11px!important;
}

.v138-room-ready small,
.v138-create-foot{
    font-size:10px!important;
    line-height:1.45!important;
}

/* Room Settings: remove horizontal overflow and increase legibility. */
.room-settings-modal-card{
    width:min(800px,calc(100vw - 32px))!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-gutter:stable;
}

.room-settings-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}

.room-settings-section,
.room-settings-section *,
.room-password-form,
.settings-slug-input{
    min-width:0;
}

.room-settings-modal-card h2{
    font-size:28px!important;
}

.settings-section-head strong{
    font-size:15px!important;
}

.settings-section-head small{
    font-size:12px!important;
    line-height:1.4!important;
}

.radio-line{
    font-size:14px!important;
    padding:13px!important;
}

.room-settings-section .room-access-option strong{
    font-size:12px!important;
}

.room-settings-section .room-access-option small{
    font-size:10px!important;
}

.room-password-form label{
    font-size:12px!important;
}

.room-settings-section input,
.room-settings-section select,
.room-settings-section .btn{
    font-size:13px!important;
}

.room-expiry-note{
    font-size:11px!important;
    line-height:1.45!important;
}

.settings-slug-input{
    max-width:100%;
}

.settings-slug-input input{
    min-width:0!important;
    width:100%!important;
}

/* One Vewaro scrollbar treatment everywhere scroll is needed. */
*{
    scrollbar-width:thin;
    scrollbar-color:#eb5260 #0b1018;
}

*::-webkit-scrollbar{
    width:9px;
    height:9px;
}

*::-webkit-scrollbar-track{
    background:#0b1018;
    border-radius:999px;
}

*::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#ff5c6a,#c93d4a);
    border:2px solid #0b1018;
    border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#ff7a86,#df4e5b);
}

*::-webkit-scrollbar-corner{
    background:#0b1018;
}

/* GIFs are media, not outbound links. */
.chat-gif{
    cursor:default!important;
    user-select:none;
    -webkit-user-drag:none;
}

.gif-provider-credit span{
    color:#ffa8b0;
    font-weight:800;
}

@media(max-width:820px){
    .v140-hero-image{
        width:min(100%,620px);
        max-height:none;
    }
}

@media(max-width:620px){
    .v137-hero-actions{
        display:grid!important;
        grid-template-columns:1fr!important;
    }

    .v137-hero-actions .btn{
        width:100%!important;
    }

    .v137-hero-trust{
        justify-content:flex-start!important;
    }

    .room-settings-grid{
        grid-template-columns:1fr!important;
    }

    .room-settings-modal-card{
        width:calc(100vw - 18px)!important;
        padding:18px 14px!important;
    }
}

/* =========================================================
   Vewaro 1.41 — centre hero button contents
   ========================================================= */
.v137-hero-actions .btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-height:48px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    line-height:1!important;
    text-align:center!important;
    vertical-align:middle!important;
}

.v137-hero-actions .btn i{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
    line-height:1!important;
    flex:0 0 16px!important;
}

.v137-hero-actions .btn::before,
.v137-hero-actions .btn::after{
    vertical-align:middle!important;
}

@media(max-width:620px){
    .v137-hero-actions .btn{
        min-height:48px!important;
    }
}

/* =========================================================
   Vewaro 1.42 — public room cards, profile images & room covers
   ========================================================= */

/* Rooms page now uses the same header footprint as the homepage. */
.public-rooms-header{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}

.public-rooms-header .home-header-right{
    display:flex!important;
    align-items:center!important;
}

.nav-profile-photo{
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(255,139,149,.45);
}

.public-rooms-shell{
    width:min(1500px,calc(100% - 42px))!important;
    padding-top:48px!important;
}

.public-rooms-hero{
    align-items:center!important;
    margin-bottom:34px!important;
}

.public-rooms-hero>div:first-child{
    max-width:820px;
}

.public-rooms-hero h1{
    font-size:clamp(44px,6vw,78px)!important;
}

.public-rooms-hero p{
    max-width:760px!important;
    font-size:15px!important;
    line-height:1.65!important;
}

.public-room-legend span{
    padding:9px 13px!important;
    font-size:10px!important;
}

/* Remove the giant empty directory box from the old layout. */
.public-rooms-listing{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
}

.public-rooms-list-head{
    padding:0 2px 14px;
    border-bottom:1px solid rgba(255,255,255,.07);
    margin-bottom:18px!important;
}

.public-rooms-list-head h2{
    font-size:26px!important;
}

.public-room-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(330px,420px))!important;
    justify-content:start;
    gap:18px!important;
}

.public-room-card-v142{
    padding:0!important;
    overflow:hidden;
    border-radius:18px!important;
    border:1px solid #2a3448!important;
    background:linear-gradient(180deg,#121925,#0f151f)!important;
    box-shadow:0 24px 70px rgba(0,0,0,.22);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}

.public-room-card-v142:hover{
    transform:translateY(-4px)!important;
    border-color:#51447a!important;
    box-shadow:0 30px 80px rgba(0,0,0,.30)!important;
}

.public-room-cover-v142{
    position:relative;
    min-height:170px;
    display:block;
    overflow:hidden;
    background:
        radial-gradient(circle at 22% 20%,rgba(255,83,97,.50),transparent 32%),
        radial-gradient(circle at 82% 22%,rgba(226,41,71,.25),transparent 36%),
        linear-gradient(135deg,#331619,#111b2a 58%,#0e1721);
    background-size:cover;
    background-position:center;
    text-decoration:none;
}

.public-room-cover-v142::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(6,9,14,.04),rgba(6,9,14,.56));
    pointer-events:none;
}

.public-room-cover-gradient{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,88,102,.08),rgba(10,16,25,.12));
}

.public-room-cover-v142 .public-room-access{
    position:absolute;
    z-index:2;
    top:13px;
    right:13px;
    padding:7px 10px!important;
    backdrop-filter:blur(12px);
}

.public-room-viewers{
    position:absolute;
    z-index:2;
    left:13px;
    bottom:13px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(7,11,17,.72);
    color:#f3e5e7;
    font-size:10px;
    font-weight:850;
    backdrop-filter:blur(12px);
}

.public-room-profile-row{
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:12px;
    padding:0 16px 12px;
    margin-top:-24px;
    z-index:3;
}

.public-room-avatar-v142{
    width:58px!important;
    height:58px!important;
    flex:0 0 58px;
    overflow:hidden;
    border-radius:17px!important;
    border:3px solid #111824;
    box-shadow:0 8px 22px rgba(0,0,0,.32);
    font-size:18px!important;
}

.public-room-avatar-v142 img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.public-room-profile-row>div{
    min-width:0;
    padding-bottom:2px;
}

.public-room-profile-row h3{
    margin:3px 0 2px;
    color:#fbf4f5;
    font-size:20px;
    line-height:1.1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.public-room-profile-row small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#738095;
    font-size:9px;
}

.public-room-now-playing{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin:0 16px 14px;
    padding:11px;
    border:1px solid #263044;
    border-radius:12px;
    background:#0d131d;
}

.public-room-now-playing>span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#ff98a1;
    background:#1b1d32;
}

.public-room-now-playing>div{
    min-width:0;
    display:grid;
    gap:2px;
}

.public-room-now-playing small{
    color:#657287;
    font-size:8px;
    font-weight:900;
    letter-spacing:.1em;
}

.public-room-now-playing strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#cdd5e1;
    font-size:11px;
}

.public-room-card-v142 .public-room-join{
    margin:0 16px 16px!important;
    width:calc(100% - 32px)!important;
    min-height:43px!important;
}

/* Member dashboard images. */
.member-dashboard-identity{
    display:flex;
    align-items:center;
    gap:15px;
}

.member-dashboard-avatar{
    width:68px;
    height:68px;
    flex:0 0 68px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:20px;
    border:1px solid rgba(255,120,132,.32);
    background:linear-gradient(145deg,#462024,#371419);
    color:#ffbbc1;
    font-size:24px;
    font-weight:950;
    box-shadow:0 14px 36px rgba(0,0,0,.24);
}

.member-dashboard-avatar img,
.member-room-avatar-mini img,
.member-image-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.member-room-card-visual{
    grid-template-columns:104px minmax(0,1fr) auto!important;
    padding:0!important;
    overflow:hidden;
}

.member-room-cover{
    position:relative;
    align-self:stretch;
    min-height:116px;
    display:grid;
    place-items:end start;
    padding:9px;
    background:
        radial-gradient(circle at 24% 20%,rgba(255,83,97,.50),transparent 34%),
        linear-gradient(135deg,#38171a,#111c2a);
    background-size:cover;
    background-position:center;
}

.member-room-cover-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(4,6,10,.05),rgba(4,6,10,.56));
}

.member-room-avatar-mini{
    position:relative;
    z-index:2;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:11px;
    border:2px solid rgba(15,21,31,.90);
    background:#411c20;
    color:#ffb7bd;
    font-weight:900;
}

.member-room-card-visual .member-room-copy{
    padding:12px 6px;
}

.member-room-card-visual .member-room-arrow{
    margin-right:12px;
}

.member-image-settings{
    display:grid;
    gap:12px;
}

.member-image-setting{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:13px;
    align-items:center;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#111720;
}

.member-image-preview{
    overflow:hidden;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#451f23,#351419);
    color:#ffabb2;
}

.member-image-preview.avatar-preview{
    width:82px;
    height:82px;
    border-radius:22px;
    font-size:28px;
    font-weight:950;
}

.member-image-preview.cover-preview{
    width:120px;
    height:78px;
    margin-left:-16px;
    border-radius:12px;
    background-size:cover;
    background-position:center;
    font-size:22px;
}

.room-cover-setting{
    grid-template-columns:120px minmax(0,1fr);
}

.member-image-setting-copy{
    min-width:0;
    display:grid;
    gap:5px;
}

.member-image-setting-copy>strong{
    font-size:11px;
    color:#e6eaf1;
}

.member-image-setting-copy>span{
    color:#7e8a9d;
    font-size:9px;
    line-height:1.4;
}

.member-image-form{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    margin-top:4px;
}

.member-file-button{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

.member-file-button input[type=file]{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
}

.member-text-button{
    padding:0;
    border:0;
    background:transparent;
    color:#8995a6;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.member-text-button.danger:hover{
    color:#ff8c9b;
}

.member-account-details-compact{
    grid-template-columns:1fr 1fr;
    margin-top:12px;
}

/* Chat / people profile photos. */
.message-with-avatar{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    align-items:start;
}

.message-content{
    min-width:0;
}

.message-avatar{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:11px;
    border:1px solid rgba(255,114,126,.26);
    background:linear-gradient(135deg,#492125,#3b161b);
    color:#ffb8be;
    font-size:12px;
    font-weight:950;
}

.message-avatar img,
.person-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.person-avatar{
    overflow:hidden;
}

@media (max-width:900px){
    .public-rooms-shell{
        width:calc(100% - 24px)!important;
        padding-top:30px!important;
    }

    .public-room-grid{
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
    }
}

@media (max-width:620px){
    .public-room-grid{
        grid-template-columns:1fr!important;
    }

    .public-room-cover-v142{
        min-height:150px;
    }

    .member-dashboard-identity{
        align-items:flex-start;
    }

    .member-dashboard-avatar{
        width:54px;
        height:54px;
        flex-basis:54px;
        border-radius:16px;
    }

    .member-image-setting,
    .room-cover-setting{
        grid-template-columns:1fr;
        align-items:start;
    }

    .member-image-preview.cover-preview{
        width:100%;
        height:135px;
        margin-left:0;
    }

    .member-account-details-compact{
        grid-template-columns:1fr;
    }

    .member-room-card-visual{
        grid-template-columns:86px minmax(0,1fr) auto!important;
    }

    .message-with-avatar{
        grid-template-columns:32px minmax(0,1fr);
        gap:7px;
    }

    .message-avatar{
        width:30px;
        height:30px;
        border-radius:9px;
        font-size:10px;
    }
}

.member-nav-profile img{
    width:24px;
    height:24px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid rgba(255,132,143,.38);
}


/* Vewaro 1.47 — restored safe chat avatars; existing avatar styles retained. */

/* Vewaro 1.48 — playback sync timing refinement. */

/* Vewaro 1.50 — member visuals isolated from the live room engine */

/* Vewaro 1.51 — smoother routine sync corrections + follow-newest chat */

/* Vewaro 1.53 — automatic member /r/username URLs */
.member-fixed-room-url{
    margin-top:8px;
}
.member-fixed-room-url strong{
    overflow-wrap:anywhere;
}
.member-fixed-room-url span{
    color:#818b9c;
    font-size:10px;
    line-height:1.45;
}

/* =========================================================
   Vewaro 1.54 — refreshed member dashboard + auto image upload
   ========================================================= */
.member-dashboard-hero-v154{
    position:relative;
    isolation:isolate;
    min-height:250px;
    margin:18px 0 16px;
    padding:34px;
    overflow:hidden;
    align-items:center;
    border:1px solid rgba(255,110,123,.22);
    border-radius:26px;
    background:
        radial-gradient(circle at 18% 10%,rgba(255,76,91,.30),transparent 30%),
        radial-gradient(circle at 88% 18%,rgba(255,0,40,.16),transparent 26%),
        linear-gradient(135deg,#161329,#0c111b 62%,#0c1420);
    background-size:cover;
    background-position:center;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.member-dashboard-hero-v154.has-image{
    background-size:cover;
    background-position:center;
}
.member-dashboard-hero-shade{
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgba(7,9,15,.92) 0%,rgba(7,9,15,.77) 48%,rgba(7,9,15,.45) 100%);
    pointer-events:none;
}
.member-dashboard-hero-content{
    min-width:0;
    display:grid;
    gap:22px;
}
.member-dashboard-heading h1{
    margin:4px 0 6px;
    font-size:clamp(36px,5vw,64px);
    line-height:.98;
}
.member-dashboard-heading p{
    margin:0;
    color:#a8b2c2;
    font-size:13px;
}
.member-dashboard-heading p strong{
    color:#ffd5d9;
    font-weight:850;
}
.member-dashboard-actions{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}
.member-dashboard-actions .btn{
    min-height:44px;
    padding-inline:16px;
}
.btn.ghost{
    border:1px solid transparent;
    background:rgba(255,255,255,.035);
    color:#aab5c5;
}
.btn.ghost:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.08);
}
.member-plan-badge-v154{
    position:relative;
    z-index:2;
    align-self:flex-start;
    margin-left:auto;
    background:rgba(16,14,29,.72);
    backdrop-filter:blur(14px);
}
.member-stats-v154{
    grid-template-columns:repeat(4,1fr);
}
.member-stats-v154 article{
    min-height:82px;
    align-items:center;
    background:linear-gradient(180deg,#101620,#0e131c);
}
.member-stats-v154 article>span{
    width:44px;
    height:44px;
}
.member-stats-v154 strong{
    font-size:22px;
}
.member-stats-v154 small{
    font-size:10px;
}
.member-dashboard-grid-v154{
    grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);
}
.member-panel{
    box-shadow:0 18px 46px rgba(0,0,0,.12);
}
.member-panel-intro{
    margin:-6px 0 14px;
    color:#8590a1;
    font-size:10px;
    line-height:1.5;
}
.member-room-control-panel{
    display:flex;
    flex-direction:column;
}
.member-room-live-pill,
.member-auto-upload-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border:1px solid rgba(236,99,111,.24);
    border-radius:999px;
    background:#171a27;
    color:#eaa2a8;
    font-size:9px;
    font-weight:850;
    white-space:nowrap;
}
.member-room-live-pill i{
    color:#48d597;
    font-size:7px;
    filter:drop-shadow(0 0 5px rgba(72,213,151,.45));
}
.member-auto-upload-badge i{
    color:#ff8c9c;
}
.member-room-card-v154{
    margin-bottom:12px;
    border-radius:16px!important;
}
.member-room-card-v154 .member-room-cover{
    min-height:142px;
}
.member-room-card-v154 .member-room-copy{
    gap:5px;
    padding:15px 12px;
}
.member-room-card-v154 .member-room-copy strong{
    font-size:16px;
}
.member-room-card-v154 .member-room-copy small{
    font-size:10px;
}
.member-room-card-v154 .member-room-copy>span:not(.member-room-statuses){
    font-size:10px;
}
.member-room-link-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    margin-top:auto;
    padding:12px 13px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#0b1119;
}
.member-room-link-box>div{
    min-width:0;
    display:grid;
    gap:3px;
}
.member-room-link-box small{
    color:#667386;
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
}
.member-room-link-box strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f9bfc4;
    font-size:11px;
}
.member-room-quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:9px;
}
.member-room-quick-actions .btn{
    justify-content:center;
    min-height:42px;
}
.member-appearance-v154{
    overflow:hidden;
}
.member-image-settings-v154{
    gap:10px;
}
.member-image-setting-v154{
    position:relative;
    min-height:124px;
    grid-template-columns:92px minmax(0,1fr);
    padding:14px;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.member-image-setting-v154:hover,
.member-image-setting-v154.is-dragging{
    border-color:rgba(255,106,119,.52);
    background:#131a25;
}
.member-image-setting-v154.is-dragging{
    box-shadow:inset 0 0 0 2px rgba(255,106,119,.18);
}
.member-image-setting-v154.is-uploading{
    opacity:.82;
    pointer-events:none;
}
.member-image-setting-v154 .avatar-preview{
    width:84px;
    height:84px;
    border:1px solid rgba(255,119,131,.25);
}
.cover-preview-v154{
    width:148px;
    height:92px;
    overflow:hidden;
    border-radius:13px;
    border:1px solid rgba(255,119,131,.20);
    background:linear-gradient(145deg,#3b1c1f,#341318);
    color:#e19199;
    font-size:22px;
}
.cover-preview-v154 img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.room-cover-setting-v154{
    grid-template-columns:156px minmax(0,1fr);
}
.member-image-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.member-image-title-row strong{
    color:#eef1f6;
    font-size:12px;
}
.member-image-title-row span{
    color:#727f91;
    font-size:8px;
    text-align:right;
}
.member-image-title-row span[data-state="busy"]{color:#ff9ba4}
.member-image-title-row span[data-state="success"]{color:#61d7a0}
.member-image-title-row span[data-state="error"]{color:#ff8b98}
.member-image-setting-copy p{
    margin:1px 0 4px;
    color:#7f8b9d;
    font-size:9px;
    line-height:1.45;
}
.member-image-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.member-image-actions .member-image-form{
    margin:0;
}
.member-image-actions .btn{
    min-height:36px;
    padding:0 11px;
    font-size:9px;
}
.member-image-actions .member-text-button{
    padding:7px 2px;
}
.member-drop-hint{
    position:absolute;
    right:10px;
    bottom:8px;
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#505d70;
    font-size:7px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.06em;
    pointer-events:none;
}
.member-account-details-v154{
    margin-top:10px;
}
.member-account-details-v154>div{
    min-width:0;
    background:#0c1119;
}
.member-account-details-v154 strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.member-dashboard-lower-v154{
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
}
.member-feature-grid-v154{
    grid-template-columns:1fr;
}
.member-feature-grid-v154>div{
    min-height:58px;
}
.member-dashboard-toast{
    position:fixed;
    z-index:10000;
    left:50%;
    bottom:24px;
    max-width:min(460px,calc(100% - 28px));
    padding:11px 15px;
    transform:translate(-50%,18px);
    opacity:0;
    pointer-events:none;
    border:1px solid rgba(117,212,158,.28);
    border-radius:12px;
    background:rgba(13,23,20,.96);
    color:#d9f4e5;
    box-shadow:0 20px 50px rgba(0,0,0,.38);
    font-size:10px;
    font-weight:800;
    transition:opacity .18s ease,transform .18s ease;
}
.member-dashboard-toast.error{
    border-color:rgba(255,118,139,.3);
    background:rgba(34,15,20,.96);
    color:#ffdbe1;
}
.member-dashboard-toast.show{
    transform:translate(-50%,0);
    opacity:1;
}
[data-copy-value].copied{
    border-color:rgba(83,214,158,.34)!important;
    color:#7ce0b1!important;
}
@media (max-width:1050px){
    .member-dashboard-grid-v154,
    .member-dashboard-lower-v154{
        grid-template-columns:1fr;
    }
    .member-stats-v154{
        grid-template-columns:repeat(2,1fr);
    }
}
@media (max-width:720px){
    .member-dashboard-hero-v154{
        min-height:0;
        padding:24px 18px;
        align-items:flex-start;
    }
    .member-dashboard-hero-shade{
        background:rgba(7,9,15,.78);
    }
    .member-dashboard-hero-content{
        width:100%;
    }
    .member-plan-badge-v154{
        position:absolute;
        top:18px;
        right:16px;
    }
    .member-dashboard-heading h1{
        padding-right:80px;
        font-size:36px;
    }
    .member-dashboard-heading p{
        font-size:11px;
    }
    .member-dashboard-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .member-dashboard-actions .btn:first-child{
        grid-column:1/-1;
    }
    .member-dashboard-actions .btn{
        justify-content:center;
    }
    .room-cover-setting-v154{
        grid-template-columns:120px minmax(0,1fr);
    }
    .cover-preview-v154{
        width:112px;
        height:80px;
    }
}
@media (max-width:520px){
    .member-stats-v154{
        grid-template-columns:1fr 1fr;
    }
    .member-stats-v154 article{
        min-height:76px;
        padding:12px;
    }
    .member-stats-v154 article>span{
        width:38px;
        height:38px;
    }
    .member-dashboard-actions{
        grid-template-columns:1fr;
    }
    .member-dashboard-actions .btn:first-child{
        grid-column:auto;
    }
    .member-room-card-v154{
        grid-template-columns:86px minmax(0,1fr)!important;
    }
    .member-room-card-v154 .member-room-cover{
        min-height:132px;
    }
    .member-room-quick-actions{
        grid-template-columns:1fr;
    }
    .member-image-setting-v154,
    .room-cover-setting-v154{
        grid-template-columns:1fr;
    }
    .member-image-setting-v154 .avatar-preview{
        width:76px;
        height:76px;
    }
    .cover-preview-v154{
        width:100%;
        height:140px;
    }
    .member-image-title-row{
        display:grid;
        gap:4px;
    }
    .member-image-title-row span{
        text-align:left;
    }
    .member-drop-hint{
        display:none;
    }
    .member-account-details-v154{
        grid-template-columns:1fr;
    }
}

/* Vewaro 1.56 — mobile casting focuses the phone on room controls + chat */
@media (max-width:900px){
    body.room-page.mobile-casting-active .watch-column > .player-card .player-wrap{
        display:none!important;
    }

    body.room-page.mobile-casting-active .watch-column > .player-card .control-hint,
    body.room-page.mobile-casting-active .watch-column > .player-card .compat-bar,
    body.room-page.mobile-casting-active .watch-column > .player-card .compat-panel{
        display:none!important;
    }

    body.room-page.mobile-casting-active .watch-column > .player-card{
        flex:0 0 auto!important;
        min-height:0!important;
        height:auto!important;
    }

    body.room-page.mobile-casting-active .watch-column > .chat-column,
    body.room-page.mobile-casting-active .watch-column > .chat-column.open{
        flex:1 1 0!important;
        min-height:0!important;
        max-height:none!important;
    }

    body.room-page.mobile-casting-active .watch-column > .chat-column .messages{
        flex:1 1 auto!important;
        min-height:0!important;
        max-height:none!important;
    }

    body.room-page.mobile-casting-active #castBtn{
        width:auto!important;
        min-width:78px!important;
        flex-basis:auto!important;
        padding:0 10px!important;
        gap:6px!important;
    }

    body.room-page.mobile-casting-active #castBtn span{
        display:inline!important;
        font-size:10px!important;
        font-weight:850!important;
    }

    body.room-page.mobile-casting-active .sync-bar{
        padding-top:7px!important;
        padding-bottom:7px!important;
    }
}

@media (max-width:560px) and (orientation:portrait){
    body.room-page.mobile-casting-active .room-shell{
        height:calc(var(--vewaro-mobile-vh) - 62px)!important;
    }

    body.room-page.mobile-casting-active .watch-column{
        gap:0!important;
    }

    body.room-page.mobile-casting-active .watch-column > .player-card{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
    }

    body.room-page.mobile-casting-active .watch-column > .chat-column{
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
    }
}

/* Vewaro 1.57 — keep mobile chat above the software keyboard */
@media (max-width:900px){
    /*
     * visualViewport tells JS the exact visible rectangle left after the
     * software keyboard appears. Pin chat to that rectangle rather than
     * scrolling the whole room underneath the keyboard.
     */
    body.room-page.mobile-keyboard-open{
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        overflow:hidden!important;
        overscroll-behavior:none!important;
    }

    body.room-page.mobile-keyboard-open .room-shell,
    body.room-page.mobile-keyboard-open .watch-column{
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column,
    body.room-page.mobile-keyboard-open .watch-column > .chat-column.open{
        position:fixed!important;
        z-index:9200!important;
        left:var(--vewaro-keyboard-left,0px)!important;
        top:var(--vewaro-keyboard-top,0px)!important;
        width:var(--vewaro-keyboard-vw,100vw)!important;
        height:var(--vewaro-keyboard-vh,100dvh)!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-bottom:0!important;
        overflow:hidden!important;
        background:var(--panel,#10151f)!important;
        box-sizing:border-box!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .messages{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior:contain!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .chat-form{
        position:relative!important;
        z-index:2!important;
        flex:0 0 auto!important;
        margin:0!important;
        padding:8px 8px max(8px,env(safe-area-inset-bottom))!important;
        background:#0d121b!important;
    }

    /* Player stays in place underneath; the chat overlay is removed as soon
       as visualViewport reports that the keyboard has closed. */
    body.room-page.mobile-keyboard-open .chat-fab{
        display:none!important;
    }
}


/* Vewaro 1.59 — corrected plain-text chat composer */
.chat-form{
    display:flex;
    align-items:center;
    gap:8px;
}

.chat-form > .chat-message-input{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:11px 13px!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:#0c1017!important;
    color:var(--text)!important;
    font:inherit!important;
    font-size:14px!important;
    line-height:20px!important;
    resize:none!important;
    overflow:hidden!important;
    outline:none!important;
    box-sizing:border-box!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    box-shadow:none!important;
    white-space:nowrap!important;
}

.chat-form > .chat-message-input:focus{
    border-color:var(--accent)!important;
    box-shadow:0 0 0 3px rgba(255,92,106,.14)!important;
}

.chat-form > .chat-message-input::placeholder{
    color:#747d8d!important;
    opacity:1!important;
}

.chat-form > .btn[type="submit"]{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
}

@media (max-width:900px){
    .watch-column > .chat-column .chat-form > .chat-message-input{
        flex:1 1 0!important;
        width:0!important;
        min-width:0!important;
        height:54px!important;
        min-height:54px!important;
        max-height:54px!important;
        padding:14px!important;
        font-size:16px!important;
        line-height:24px!important;
        border-radius:16px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"]{
        width:54px!important;
        min-width:54px!important;
        height:54px!important;
        padding:0!important;
        border-radius:16px!important;
        font-size:0!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"] i{
        margin:0!important;
        font-size:20px!important;
        line-height:1!important;
    }
}

@media (max-width:900px) and (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    .watch-column > .chat-column .chat-form > .chat-message-input{
        height:38px!important;
        min-height:38px!important;
        max-height:38px!important;
        padding:8px 10px!important;
        font-size:14px!important;
        line-height:20px!important;
        border-radius:10px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"]{
        width:42px!important;
        min-width:42px!important;
        height:38px!important;
        border-radius:10px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"] i{
        font-size:15px!important;
    }
}


/* Vewaro 1.60 — lock chat composer into a reliable 4-column layout */
.chat-form{
    display:grid!important;
    grid-template-columns:42px 54px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:0!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
}

.chat-form > .emoji-wrap{
    grid-column:1!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
}

.chat-form > .gif-wrap{
    grid-column:2!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
}

.chat-form > .chat-message-input{
    grid-column:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    justify-self:stretch!important;
    align-self:center!important;
}

.chat-form > .btn[type="submit"]{
    grid-column:4!important;
    flex:none!important;
    justify-self:end!important;
}

/* Make sure old flex/grid rules can never collapse the text box again. */
.chat-form > .emoji-wrap,
.chat-form > .gif-wrap,
.chat-form > .chat-message-input,
.chat-form > .btn[type="submit"]{
    box-sizing:border-box!important;
}

@media (max-width:900px){
    .watch-column > .chat-column .chat-form{
        display:grid!important;
        grid-template-columns:48px 56px minmax(0,1fr) 56px!important;
        gap:8px!important;
        width:100%!important;
        min-width:0!important;
        padding:8px!important;
        box-sizing:border-box!important;
    }

    .watch-column > .chat-column .chat-form > .emoji-wrap{
        width:48px!important;
        min-width:48px!important;
        max-width:48px!important;
    }

    .watch-column > .chat-column .chat-form > .gif-wrap{
        width:56px!important;
        min-width:56px!important;
        max-width:56px!important;
    }

    .watch-column > .chat-column .chat-form > .chat-message-input{
        grid-column:3!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
        height:54px!important;
        min-height:54px!important;
        max-height:54px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"]{
        grid-column:4!important;
        width:56px!important;
        min-width:56px!important;
        max-width:56px!important;
        height:54px!important;
        padding:0!important;
        font-size:0!important;
    }
}

@media (max-width:430px){
    .watch-column > .chat-column .chat-form{
        grid-template-columns:44px 52px minmax(0,1fr) 52px!important;
        gap:6px!important;
        padding:7px!important;
    }

    .watch-column > .chat-column .chat-form > .emoji-wrap{
        width:44px!important;
        min-width:44px!important;
        max-width:44px!important;
    }

    .watch-column > .chat-column .chat-form > .gif-wrap{
        width:52px!important;
        min-width:52px!important;
        max-width:52px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"]{
        width:52px!important;
        min-width:52px!important;
        max-width:52px!important;
    }
}

@media (max-width:900px) and (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    .watch-column > .chat-column .chat-form{
        grid-template-columns:36px 44px minmax(0,1fr) 42px!important;
        gap:5px!important;
        padding:6px!important;
    }

    .watch-column > .chat-column .chat-form > .emoji-wrap{
        width:36px!important;
        min-width:36px!important;
        max-width:36px!important;
    }

    .watch-column > .chat-column .chat-form > .gif-wrap{
        width:44px!important;
        min-width:44px!important;
        max-width:44px!important;
    }

    .watch-column > .chat-column .chat-form > .btn[type="submit"]{
        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;
    }
}


/* Vewaro 1.62 — redesigned public/member room cards */
.public-room-grid{
    grid-template-columns:repeat(auto-fit,minmax(330px,420px))!important;
    gap:20px!important;
}

.public-room-card-v162{
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(108,121,151,.28)!important;
    border-radius:20px!important;
    background:
        linear-gradient(180deg,rgba(19,26,39,.98),rgba(12,18,28,.98))!important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease!important;
}

.public-room-card-v162:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(255,105,118,.55)!important;
    box-shadow:
        0 30px 72px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,84,99,.08)!important;
}

.public-room-cover-v162{
    position:relative;
    display:block;
    min-height:190px;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 20% 25%,rgba(255,76,91,.55),transparent 34%),
        radial-gradient(circle at 82% 12%,rgba(234,42,74,.25),transparent 34%),
        linear-gradient(135deg,#18152c,#111c2b 60%,#0c141e);
    background-size:cover;
    background-position:center;
    text-decoration:none;
}

.public-room-cover-v162::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(180deg,rgba(5,8,13,.04) 10%,rgba(5,8,13,.16) 45%,rgba(5,8,13,.78) 100%);
}

.public-room-cover-v162-shade{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(120deg,rgba(255,71,87,.08),transparent 44%,rgba(222,43,72,.05));
    pointer-events:none;
}

.public-room-viewers-v162,
.public-room-access-v162,
.public-room-media-badge-v162{
    position:absolute;
    z-index:2;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,.13);
    background:rgba(7,11,17,.76);
    color:#f8edee;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 24px rgba(0,0,0,.16);
}

.public-room-viewers-v162{
    left:14px;
    top:14px;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:9px;
}

.public-room-viewers-v162 i{
    color:#ffa0a9;
}

.public-room-viewers-v162 strong{
    font-size:10px;
}

.public-room-viewers-v162 span{
    color:#9ba6b7;
    font-weight:700;
}

.public-room-access-v162{
    right:14px;
    top:14px;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.public-room-access-v162.open{
    color:#75e5b9;
    border-color:rgba(78,212,156,.28);
    background:rgba(15,54,43,.78);
}

.public-room-access-v162.locked{
    color:#e3c287;
    border-color:rgba(224,173,86,.28);
    background:rgba(60,43,21,.78);
}

.public-room-media-badge-v162{
    left:14px;
    bottom:14px;
    gap:6px;
    padding:7px 10px;
    border-radius:9px;
    font-size:8px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.public-room-media-badge-v162.audio i,
.public-room-now-icon-v162.audio i{
    color:#ffa7ac;
}

.public-room-media-badge-v162.live i,
.public-room-now-icon-v162.live i{
    color:#ff747f;
}

.public-room-media-badge-v162.video i,
.public-room-now-icon-v162.video i{
    color:#ff8d98;
}

.public-room-media-badge-v162.image i,
.public-room-now-icon-v162.image i{
    color:#ea7084;
}

.public-room-body-v162{
    position:relative;
    padding:0 16px 16px;
}

.public-room-identity-v162{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:13px;
    align-items:end;
    margin-top:-30px;
}

.public-room-avatar-v162{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    overflow:hidden;
    border:4px solid #101722!important;
    border-radius:19px!important;
    background:linear-gradient(145deg,#4d2024,#391419)!important;
    box-shadow:0 11px 30px rgba(0,0,0,.38);
    color:#ffc7cc!important;
    font-size:20px!important;
}

.public-room-avatar-v162 img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.public-room-identity-copy-v162{
    min-width:0;
    padding-bottom:3px;
}

.public-room-type-line-v162{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}

.public-room-type-line-v162 .eyebrow{
    color:#ff97a0;
    font-size:8px;
    letter-spacing:.13em;
}

.public-room-active-v162{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#7f8da0;
    font-size:8px;
    font-weight:800;
}

.public-room-active-v162 i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#34d39b;
    box-shadow:0 0 0 3px rgba(52,211,155,.09);
}

.public-room-identity-v162 h3{
    margin:4px 0 3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fcf7f8;
    font-size:21px;
    line-height:1.06;
    letter-spacing:-.025em;
}

.public-room-identity-v162 small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#6f7c90;
    font-size:9px;
}

.public-room-now-v162{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 20px;
    align-items:center;
    gap:11px;
    margin:17px 0 13px;
    padding:12px;
    border:1px solid rgba(103,117,145,.25);
    border-radius:14px;
    background:
        linear-gradient(180deg,rgba(10,16,25,.92),rgba(10,15,23,.82));
    transition:border-color .18s ease,background .18s ease;
}

.public-room-card-v162:hover .public-room-now-v162{
    border-color:rgba(223,97,108,.32);
    background:
        linear-gradient(180deg,rgba(14,19,30,.96),rgba(10,15,23,.88));
}

.public-room-now-icon-v162{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,118,130,.20);
    border-radius:12px;
    background:linear-gradient(145deg,#3d1a1d,#30171a);
    font-size:14px;
}

.public-room-now-copy-v162{
    min-width:0;
    display:grid;
    gap:2px;
}

.public-room-now-copy-v162>span{
    color:#6e7b90;
    font-size:7px;
    font-weight:950;
    letter-spacing:.13em;
}

.public-room-now-copy-v162 strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#e5e9f1;
    font-size:11px;
    line-height:1.3;
}

.public-room-now-copy-v162 small{
    color:#657286;
    font-size:8px;
}

.public-room-now-arrow-v162{
    color:#4e5b70;
    font-size:10px;
    transition:transform .18s ease,color .18s ease;
}

.public-room-card-v162:hover .public-room-now-arrow-v162{
    transform:translateX(2px);
    color:#f57e89;
}

.public-room-join-v162{
    min-height:46px!important;
    margin:0!important;
    border-radius:13px!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.01em;
}

.public-room-join-v162.primary{
    box-shadow:0 11px 26px rgba(242,54,70,.18);
}

@media (max-width:620px){
    .public-room-cover-v162{
        min-height:170px;
    }

    .public-room-body-v162{
        padding:0 14px 14px;
    }

    .public-room-identity-v162{
        grid-template-columns:58px minmax(0,1fr);
        gap:11px;
        margin-top:-27px;
    }

    .public-room-avatar-v162{
        width:58px!important;
        height:58px!important;
        min-width:58px!important;
        border-radius:17px!important;
    }

    .public-room-identity-v162 h3{
        font-size:19px;
    }

    .public-room-viewers-v162 span{
        display:none;
    }

    .public-room-now-v162{
        margin-top:15px;
    }
}


/* Vewaro 1.63 — full-card clickable room cards */
.public-room-card-v163{
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(108,121,151,.28)!important;
    border-radius:22px!important;
    background:#0f1723!important;
    box-shadow:
        0 22px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease!important;
}

.public-room-card-v163:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(255,105,118,.56)!important;
    box-shadow:
        0 30px 72px rgba(0,0,0,.34),
        0 0 0 1px rgba(255,84,99,.08)!important;
}

.public-room-card-link-v163{
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:395px;
    padding:16px;
    text-decoration:none;
    color:inherit;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 18%,rgba(255,76,91,.26),transparent 26%),
        radial-gradient(circle at 85% 15%,rgba(240,54,85,.14),transparent 24%),
        linear-gradient(180deg,rgba(8,12,18,.10) 0%,rgba(8,12,18,.22) 30%,rgba(8,12,18,.86) 72%,rgba(8,12,18,.97) 100%),
        var(--room-cover-image),
        linear-gradient(135deg,#18152c,#111c2b 60%,#0c141e);
    background-size:cover,cover,cover,cover,cover;
    background-position:center;
}

.public-room-card-link-v163::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(180deg,rgba(7,10,16,.10) 0%,rgba(7,10,16,.18) 18%,rgba(7,10,16,.48) 50%,rgba(7,10,16,.86) 78%,rgba(7,10,16,.96) 100%);
}

.public-room-card-link-v163::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(120deg,rgba(255,71,87,.08),transparent 42%,rgba(222,43,72,.05));
}

.public-room-bg-glow-v163{
    position:absolute;
    left:-8%;
    bottom:-18%;
    width:58%;
    height:44%;
    z-index:-1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,70,86,.20),rgba(255,70,86,0) 70%);
    filter:blur(18px);
    pointer-events:none;
}

.public-room-top-v163{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.public-room-bottom-v163{
    display:grid;
    gap:13px;
}

.public-room-header-v163{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto;
    gap:12px;
    align-items:end;
}

.public-room-identity-copy-v163{
    min-width:0;
    padding-bottom:2px;
}

.public-room-identity-copy-v163 h3{
    margin:5px 0 3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fcf7f8;
    font-size:21px;
    line-height:1.06;
    letter-spacing:-.025em;
}

.public-room-identity-copy-v163 small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8c98ab;
    font-size:9px;
}

.public-room-card-v163 .public-room-avatar-v162{
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    border:4px solid rgba(15,23,35,.88)!important;
    box-shadow:0 11px 30px rgba(0,0,0,.38);
}

.public-room-card-v163 .public-room-media-badge-v162{
    position:static;
    align-self:start;
    margin-top:4px;
    background:rgba(7,11,17,.72);
}

.public-room-now-v163{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    padding:13px;
    border:1px solid rgba(103,117,145,.24);
    border-radius:15px;
    background:
        linear-gradient(180deg,rgba(10,16,25,.82),rgba(10,15,23,.70));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.public-room-card-v163:hover .public-room-now-v163{
    border-color:rgba(223,97,108,.34);
    background:
        linear-gradient(180deg,rgba(14,19,30,.90),rgba(10,15,23,.78));
    transform:translateY(-1px);
}

.public-room-open-cta-v163{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 12px;
    border:1px solid rgba(255,108,121,.22);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(255,82,97,.18),rgba(255,82,97,.10));
    color:#ffeff0;
    font-size:10px;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
}

.public-room-card-v163 .public-room-viewers-v162,
.public-room-card-v163 .public-room-access-v162{
    position:static;
}

.public-room-card-v163 .public-room-viewers-v162{
    background:rgba(7,11,17,.70);
}

.public-room-card-v163 .public-room-access-v162{
    background:rgba(7,11,17,.70);
}

@media (max-width:620px){
    .public-room-card-link-v163{
        min-height:360px;
        padding:14px;
    }

    .public-room-header-v163{
        grid-template-columns:58px minmax(0,1fr);
        gap:11px;
    }

    .public-room-card-v163 .public-room-avatar-v162{
        width:58px!important;
        height:58px!important;
        min-width:58px!important;
        border-radius:17px!important;
    }

    .public-room-card-v163 .public-room-media-badge-v162{
        grid-column:1 / -1;
        justify-self:start;
        margin-top:2px;
    }

    .public-room-now-v163{
        grid-template-columns:42px minmax(0,1fr);
    }

    .public-room-open-cta-v163{
        grid-column:1 / -1;
        justify-self:start;
    }

    .public-room-card-v163 .public-room-viewers-v162 span{
        display:none;
    }
}


/* Vewaro 1.66 — site administrator UI */
.member-nav-admin,
.admin-nav-btn{
    color:#ffc4c9!important;
}

.admin-room-badge,
.message-admin-badge,
.admin-admin-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    border:1px solid rgba(255,72,100,.34);
    background:rgba(193,41,64,.12);
    color:#ff9cab;
    font-weight:950;
    letter-spacing:.07em;
}

.admin-room-badge{
    height:32px;
    padding:0 10px;
    border-radius:999px;
    text-decoration:none;
    font-size:8px;
}

.admin-room-badge i,
.message-admin-badge i,
.admin-admin-pill i{
    color:#ff637c;
}

.message-admin-badge{
    padding:2px 6px;
    border-radius:999px;
    font-size:8px;
    line-height:1.3;
}

.admin-message{
    border-color:rgba(235,70,96,.30);
}

.admin-page .member-shell{
    width:min(1500px,calc(100% - 28px));
    max-width:1500px;
}

.admin-hero,
.admin-panel-card,
.admin-access-card{
    border:1px solid var(--line);
    background:linear-gradient(180deg,#111824,#0c121c);
    box-shadow:0 24px 65px rgba(0,0,0,.22);
}

.admin-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px;
    margin:20px 0;
    border-radius:20px;
}

.admin-hero h1,
.admin-access-card h1{
    margin:5px 0 7px;
}

.admin-hero p,
.admin-access-card p{
    margin:0;
    color:#8f9aac;
}

.admin-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:0 0 18px;
}

.admin-stats>div{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:3px 10px;
    align-items:center;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#101722;
}

.admin-stats i{
    grid-row:1 / 3;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,92,106,.12);
    color:#ff9ea7;
}

.admin-stats span{
    color:#8591a3;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.admin-stats strong{
    grid-column:3;
    grid-row:1 / 3;
    font-size:26px;
}

.admin-stats small{
    color:#6e798b;
    font-size:9px;
}

.admin-panel-card{
    margin:0 0 18px;
    padding:18px;
    border-radius:18px;
}

.admin-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}

.admin-section-head h2{
    margin:3px 0 0;
}

.admin-search{
    display:flex;
    gap:8px;
    align-items:center;
}

.admin-search input{
    min-width:min(340px,42vw);
}

.admin-table-wrap{
    overflow:auto;
    border:1px solid rgba(111,126,156,.18);
    border-radius:14px;
}

.admin-table{
    width:100%;
    min-width:980px;
    border-collapse:collapse;
    background:rgba(5,9,14,.22);
}

.admin-table th,
.admin-table td{
    padding:12px 13px;
    border-bottom:1px solid rgba(105,119,146,.14);
    text-align:left;
    vertical-align:middle;
    font-size:10px;
}

.admin-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:#111925;
    color:#778397;
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.admin-table tr:last-child td{
    border-bottom:0;
}

.admin-room-name,
.admin-table td>strong{
    display:block;
}

.admin-room-name small,
.admin-cell-sub{
    display:block;
    margin-top:3px;
    color:#667286;
    font-size:8px;
}

.admin-muted{
    color:#6d788a;
}

.admin-viewer-pill,
.admin-status-pill,
.admin-admin-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
}

.admin-viewer-pill{
    border:1px solid rgba(255,92,106,.24);
    background:rgba(255,92,106,.10);
    color:#ffadb4;
}

.admin-status-pill.active,
.admin-status-pill.open{
    background:rgba(44,179,125,.10);
    border:1px solid rgba(55,212,151,.22);
    color:#72dfb5;
}

.admin-status-pill.expired,
.admin-status-pill.locked{
    background:rgba(184,131,58,.10);
    border:1px solid rgba(220,169,93,.22);
    color:#dab984;
}

.admin-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.admin-actions form{
    margin:0;
}

.admin-icon-btn{
    width:34px;
    min-width:34px!important;
    height:34px;
    padding:0!important;
    display:inline-grid!important;
    place-items:center;
}

.btn.danger{
    border-color:rgba(236,90,104,.28);
    background:rgba(163,45,59,.16);
    color:#ff9aa4;
}

.btn.danger:hover{
    border-color:rgba(247,96,111,.5);
    background:rgba(181,49,65,.24);
}

.admin-audit-list{
    display:grid;
    gap:8px;
}

.admin-audit-list>div{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(103,117,145,.13);
}

.admin-audit-list>div:last-child{
    border-bottom:0;
}

.admin-audit-icon,
.admin-shield{
    display:grid;
    place-items:center;
    border:1px solid rgba(255,72,100,.22);
    background:rgba(193,41,64,.10);
    color:#ff7187;
}

.admin-audit-icon{
    width:34px;
    height:34px;
    border-radius:10px;
}

.admin-audit-list p{
    margin:0;
    font-size:10px;
}

.admin-audit-list p small{
    display:block;
    margin-top:3px;
    color:#6d788b;
}

.admin-audit-list time{
    color:#6c7788;
    font-size:8px;
}

.admin-access-card{
    width:min(660px,100%);
    margin:70px auto;
    padding:30px;
    border-radius:22px;
    text-align:center;
}

.admin-shield{
    width:70px;
    height:70px;
    margin:0 auto 16px;
    border-radius:20px;
    font-size:25px;
}

.admin-access-card form{
    margin-top:20px;
}

.admin-empty{
    padding:30px!important;
    text-align:center!important;
    color:#717d90;
}

@media(max-width:800px){
    .admin-page .member-shell{
        width:min(100% - 16px,1500px);
    }

    .admin-hero{
        align-items:flex-start;
        flex-direction:column;
    }

    .admin-stats{
        grid-template-columns:1fr;
    }

    .admin-section-head{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-search{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
    }

    .admin-search input{
        min-width:0;
        width:100%;
    }
}

/* Vewaro 1.67 — launch polish: end screen, looping, live radio, legal + cookies */
.media-end-screen{
    position:absolute;
    inset:0;
    z-index:34;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:28px;
    text-align:center;
    background:
        radial-gradient(circle at 50% 38%,rgba(255,71,86,.20),transparent 34%),
        rgba(5,8,13,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.media-end-screen[hidden]{display:none!important}
.media-end-icon{
    width:58px;height:58px;display:grid;place-items:center;
    margin-bottom:5px;border-radius:18px;
    border:1px solid rgba(255,106,119,.35);
    background:rgba(255,71,86,.13);color:#ff97a0;font-size:21px;
}
.media-end-screen>strong{font-size:22px;color:#fbf5f6}
.media-end-screen>p{margin:0;max-width:480px;color:#8f9bad;font-size:11px;line-height:1.55}
.media-end-actions{display:flex;gap:8px;margin-top:10px}

.room-loop-settings{
    display:grid;gap:8px;margin-top:14px;padding-top:13px;
    border-top:1px solid rgba(105,119,146,.16);
}
.settings-subtitle{color:#6f7b8d;font-size:8px;font-weight:950;letter-spacing:.1em}
.settings-toggle-line{
    display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;
    padding:10px;border:1px solid rgba(101,115,143,.20);border-radius:12px;
    background:rgba(7,11,17,.28);cursor:pointer;
}
.settings-toggle-line input{margin-top:2px;accent-color:#ff5261}
.settings-toggle-line span{display:grid;gap:2px}
.settings-toggle-line strong{font-size:10px;color:#f2e6e7}
.settings-toggle-line small{font-size:8px;color:#748094;line-height:1.4}

.radio-status{
    display:grid;grid-template-columns:8px minmax(0,1fr);gap:2px 8px;
    align-items:center;margin-top:10px;padding:10px 12px;
    border:1px solid rgba(255,83,98,.24);border-radius:13px;
    background:rgba(8,12,19,.48);max-width:560px;
}
.radio-status[hidden]{display:none!important}
.radio-live-dot{
    width:7px;height:7px;border-radius:50%;background:#41d6a0;
    box-shadow:0 0 0 4px rgba(65,214,160,.09);
}
.radio-status>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#f8f1f2}
.radio-status>span#radioSong,
.radio-status>small{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radio-status>span#radioSong{font-size:10px;color:#b8c0cf}
.radio-status>small{font-size:8px;color:#707c90}
.audio-stage:has(.radio-status:not([hidden])) .audio-art{
    background:radial-gradient(circle,rgba(255,76,91,.26),rgba(15,20,31,.95));
}

.member-terms-check{
    display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;
    align-items:start!important;gap:9px!important;padding:10px 0!important;
    color:#8995a7!important;font-size:10px!important;line-height:1.45!important;
}
.member-terms-check input{margin-top:2px;accent-color:#ff5160}
.member-terms-check a{color:#ffa6ae}

.site-legal-footer{
    width:min(1180px,calc(100% - 28px));margin:20px auto 28px;padding:13px 4px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    color:#5e697b;font-size:9px;
}
.site-legal-footer nav{display:flex;gap:14px}
.site-legal-footer a{color:#7a8699;text-decoration:none}
.site-legal-footer a:hover{color:#ffaab2}

.legal-page .member-shell{width:min(900px,calc(100% - 28px));max-width:900px}
.legal-card{
    margin:26px auto;padding:28px;border:1px solid var(--line);border-radius:20px;
    background:linear-gradient(180deg,#111824,#0c121c);box-shadow:0 24px 65px rgba(0,0,0,.20);
}
.legal-card h1{margin:5px 0 4px;font-size:30px}
.legal-card h2{margin:25px 0 7px;font-size:15px;color:#e9ecf3}
.legal-card p{margin:0;color:#9aa5b6;font-size:11px;line-height:1.7}
.legal-card a{color:#ffa2aa}
.legal-updated{margin-bottom:20px!important;color:#667286!important;font-size:9px!important}
.legal-cookie-table{display:grid;gap:8px;margin:10px 0}
.legal-cookie-table>div{display:grid;gap:3px;padding:12px;border:1px solid rgba(102,116,143,.20);border-radius:12px;background:rgba(7,11,17,.28)}
.legal-cookie-table strong{font-size:10px}.legal-cookie-table span{color:#8793a5;font-size:9px;line-height:1.5}

.cookie-notice{
    position:fixed;z-index:220;left:50%;bottom:max(14px,env(safe-area-inset-bottom));
    transform:translateX(-50%);width:min(760px,calc(100% - 28px));
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
    padding:14px;border:1px solid rgba(115,130,160,.30);border-radius:16px;
    background:rgba(12,18,28,.97);box-shadow:0 24px 70px rgba(0,0,0,.48);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.cookie-notice-copy{display:grid;gap:4px}
.cookie-notice-copy strong{font-size:11px;color:#f0f2f7}
.cookie-notice-copy>span{font-size:9px;line-height:1.5;color:#8f9aac}
.cookie-notice-copy nav{display:flex;gap:10px;margin-top:2px}
.cookie-notice-copy a{font-size:8px;color:#ff9aa3;text-decoration:none}
.cookie-notice-accept{white-space:nowrap}

@media(max-width:620px){
    .media-end-screen{padding:20px}.media-end-screen>strong{font-size:18px}
    .radio-status{max-width:100%}
    .site-legal-footer{align-items:flex-start;flex-direction:column}
    .legal-card{padding:20px;margin-top:16px}.legal-card h1{font-size:25px}
    .cookie-notice{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));transform:none;width:auto;grid-template-columns:1fr}
    .cookie-notice-accept{width:100%}
}


/* Vewaro 1.68 — clearer room activity events */
.system-message{display:block!important;padding:2px 0!important;background:transparent!important;border:0!important;text-align:left!important}
.system-event{width:max-content;max-width:94%;display:flex;align-items:center;gap:8px;margin:0 auto;padding:6px 10px 6px 7px;border:1px solid rgba(115,128,155,.18);border-radius:999px;background:rgba(13,19,28,.72);color:#8995a7}
.system-event-icon{width:23px;height:23px;flex:0 0 23px;display:grid;place-items:center;border-radius:50%;background:rgba(121,132,154,.10);color:#8895a9;font-size:9px}
.system-message-body{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px!important;font-weight:800!important}
.system-time{flex:0 0 auto;color:#5e6a7d!important;font-size:8px!important}
.system-join .system-event{border-color:rgba(48,203,143,.20);background:rgba(28,105,78,.10);color:#a7dec8}
.system-join .system-event-icon{background:rgba(48,203,143,.13);color:#58d9a6}
.system-leave .system-event{border-color:rgba(110,123,148,.18);color:#7e8a9c}
.system-leave .system-event-icon{color:#768296}
.system-moderation .system-event{border-color:rgba(238,91,106,.22);background:rgba(139,43,54,.10);color:#e6a3aa}
.system-moderation .system-event-icon{background:rgba(238,91,106,.12);color:#ff8591}
.system-media .system-event{border-color:rgba(255,104,117,.23);background:rgba(186,62,72,.10);color:#f6b7bc}
.system-media .system-event-icon{background:rgba(255,104,117,.13);color:#ff99a2}
@media(max-width:560px){.system-event{max-width:100%;padding:5px 9px 5px 6px;gap:7px}}

/* Vewaro 1.69 — true full-height Cinema mode */
@media (min-width:901px){
    body.room-page.cinema-mode{
        width:100%!important;
        height:100dvh!important;
        min-height:100dvh!important;
        overflow:hidden!important;
        background:#05070b!important;
    }

    body.room-page.cinema-mode .room-header{
        display:none!important;
    }

    /*
     * Normal desktop reserves header height. Cinema must override those later
     * !important desktop rules so the layout uses the entire viewport.
     */
    body.room-page.cinema-mode .room-shell{
        width:calc(100% - 24px)!important;
        max-width:none!important;
        height:calc(100dvh - 24px)!important;
        min-height:0!important;
        margin:12px auto!important;
        padding:0!important;
        grid-template-columns:minmax(0,1fr) clamp(350px,20vw,400px)!important;
        gap:12px!important;
        align-items:stretch!important;
        overflow:hidden!important;
    }

    body.room-page.cinema-mode .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:block!important;
        overflow:hidden!important;
    }

    body.room-page.cinema-mode .player-card{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
        border-radius:16px!important;
    }

    body.room-page.cinema-mode .player-wrap{
        flex:1 1 0!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
    }

    body.room-page.cinema-mode .player-wrap video,
    body.room-page.cinema-mode .player-wrap iframe,
    body.room-page.cinema-mode .player-surface{
        width:100%!important;
        height:100%!important;
        max-width:100%!important;
        max-height:100%!important;
        object-fit:contain!important;
    }

    body.room-page.cinema-mode .player-controls,
    body.room-page.cinema-mode .sync-bar{
        flex:0 0 auto!important;
    }

    body.room-page.cinema-mode .control-hint,
    body.room-page.cinema-mode .compat-bar,
    body.room-page.cinema-mode .compat-panel,
    body.room-page.cinema-mode .invite-card,
    body.room-page.cinema-mode .media-card,
    body.room-page.cinema-mode .playlist-card{
        display:none!important;
    }

    body.room-page.cinema-mode .chat-column{
        position:relative!important;
        top:auto!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
        align-self:stretch!important;
        border-radius:16px!important;
    }

    body.room-page.cinema-mode .messages{
        min-height:0!important;
        overflow-y:auto!important;
    }
}

@media (min-width:1600px) and (min-aspect-ratio:2/1){
    body.room-page.cinema-mode .room-shell{
        grid-template-columns:minmax(0,1fr) 390px!important;
    }
}


/* Vewaro 1.70 — tighter mobile room header + sync bar */
.room-header .brand-logo-icon{
    display:none;
    width:40px;
    height:40px;
    object-fit:contain;
    object-position:center;
    flex:0 0 40px;
}

@media (max-width:640px){
    .room-header{
        min-height:58px!important;
        height:58px!important;
        padding:0 8px!important;
        gap:8px!important;
    }

    .room-header .vewaro-brand{
        flex:0 0 auto!important;
        min-width:auto!important;
    }

    .room-header .brand-logo-full{
        display:none!important;
    }

    .room-header .brand-logo-icon{
        display:block!important;
        width:38px!important;
        height:38px!important;
        flex:0 0 38px!important;
    }

    .room-meta{
        min-width:0!important;
        flex:1 1 auto!important;
        justify-content:flex-end!important;
        flex-wrap:nowrap!important;
        gap:5px!important;
    }

    .room-code{
        display:flex!important;
        min-width:0!important;
        max-width:min(38vw,132px)!important;
        padding:6px 8px!important;
        border-radius:14px!important;
    }

    .room-code.room-code-named{
        gap:1px!important;
    }

    .room-code.room-code-named strong,
    .room-code.room-code-named small{
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }

    .room-code.room-code-named strong{
        font-size:11px!important;
    }

    .room-code.room-code-named small{
        font-size:7px!important;
        margin-top:1px!important;
    }

    .host-badge,
    .viewer-count,
    .header-copy-invite,
    .admin-room-badge{
        height:34px!important;
    }

    .host-badge{
        display:inline-flex!important;
        align-items:center!important;
        padding:0 9px!important;
        font-size:10px!important;
        letter-spacing:.05em!important;
    }

    .room-access-badge{
        width:26px!important;
        height:26px!important;
        border-radius:8px!important;
        font-size:9px!important;
    }

    .viewer-count{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:5px!important;
        min-width:34px!important;
        padding:0 9px!important;
        font-size:11px!important;
        line-height:1!important;
    }

    .viewer-count > i{
        margin:0!important;
        font-size:11px!important;
    }

    .header-copy-invite{
        width:34px!important;
        min-width:34px!important;
        padding:0!important;
    }

    .admin-room-badge{
        width:34px!important;
        min-width:34px!important;
        padding:0!important;
        justify-content:center!important;
        border-radius:11px!important;
    }

    .admin-room-badge span{
        display:none!important;
    }

    .sync-bar{
        display:grid!important;
        grid-template-columns:minmax(0,1fr) auto!important;
        align-items:start!important;
        gap:8px!important;
        padding:8px 9px!important;
    }

    .sync-status-line{
        display:grid!important;
        grid-template-columns:auto minmax(0,1fr)!important;
        grid-template-areas:
            "dot status"
            ". now"!important;
        align-items:center!important;
        column-gap:7px!important;
        row-gap:3px!important;
        min-width:0!important;
    }

    .sync-dot{
        grid-area:dot;
        margin-right:0!important;
        align-self:center!important;
    }

    #syncText{
        grid-area:status;
        min-width:0!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        font-size:11px!important;
        line-height:1.2!important;
    }

    .sync-divider{
        display:none!important;
    }

    .now-playing-label{
        grid-area:now;
        min-width:0!important;
        max-width:none!important;
        padding-left:0!important;
        font-size:10px!important;
        line-height:1.2!important;
    }

    .sync-actions{
        display:flex!important;
        align-items:center!important;
        gap:6px!important;
        flex-wrap:nowrap!important;
    }

    .sync-actions .btn{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        padding:0!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        border-radius:11px!important;
        font-size:0!important;
        line-height:1!important;
    }

    .sync-actions .btn i{
        margin:0!important;
        font-size:13px!important;
    }
}

@media (max-width:380px){
    .room-header{
        padding:0 6px!important;
        gap:6px!important;
    }

    .room-meta{
        gap:4px!important;
    }

    .room-code{
        max-width:min(34vw,108px)!important;
        padding:6px 7px!important;
    }

    .host-badge,
    .viewer-count,
    .header-copy-invite,
    .admin-room-badge,
    .sync-actions .btn{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
    }

    .host-badge{
        width:auto!important;
        min-width:0!important;
        padding:0 8px!important;
    }

    .room-access-badge{
        width:24px!important;
        height:24px!important;
    }

    .sync-bar{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .sync-actions{
        width:100%!important;
        justify-content:flex-end!important;
    }
}


/* Vewaro 1.71 — countdown controls, inline resync and one-line sync status */
#durationTime{
    display:none!important;
}

.media-countdown{
    min-width:52px;
    padding:0 2px;
    color:#d6dce8;
    font-weight:800;
    letter-spacing:.01em;
}

.resync-control{
    margin-left:auto;
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    padding:0;
}

.sync-bar{
    gap:12px;
}

.sync-status-line{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.sync-status-left{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
}

.sync-status-left .sync-dot{
    margin-right:0;
}

.now-playing-label{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
    max-width:min(58vw,760px);
    overflow:hidden;
    white-space:nowrap;
}

.now-playing-prefix{
    flex:0 0 auto;
    color:var(--muted);
}

.now-playing-window{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    position:relative;
}

.now-playing-window strong{
    display:inline-block;
    white-space:nowrap;
    color:#f0f2f7;
    font-weight:800;
}

.now-playing-window.is-scrolling strong{
    padding-left:100%;
    animation:vewaro-now-playing-scroll 10s linear infinite;
}

@keyframes vewaro-now-playing-scroll{
    0%,10%{transform:translateX(0)}
    90%,100%{transform:translateX(-100%)}
}

@media (prefers-reduced-motion:reduce){
    .now-playing-window.is-scrolling strong{
        animation:none;
        padding-left:0;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

@media (max-width:900px){
    .player-controls{
        flex-wrap:nowrap!important;
    }

    .media-countdown{
        flex:0 0 auto!important;
        min-width:44px!important;
        font-size:10px!important;
        text-align:left!important;
    }

    #resyncBtn{
        margin-left:auto!important;
        flex:0 0 32px!important;
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        padding:0!important;
        border-radius:9px!important;
        font-size:12px!important;
    }

    #muteBtn{
        margin-left:0!important;
    }

    .sync-bar{
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
        padding:8px 9px!important;
    }

    .sync-status-line{
        flex:1 1 auto!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
        min-width:0!important;
    }

    .sync-status-left{
        flex:0 0 auto!important;
        gap:6px!important;
        font-size:10px!important;
    }

    #syncText{
        min-width:auto!important;
        overflow:visible!important;
        text-overflow:clip!important;
        white-space:nowrap!important;
        font-size:10px!important;
    }

    .now-playing-label{
        flex:1 1 auto!important;
        margin-left:auto!important;
        max-width:none!important;
        justify-content:flex-end!important;
        gap:4px!important;
        padding-left:0!important;
        font-size:10px!important;
        overflow:hidden!important;
    }

    .now-playing-window{
        flex:1 1 auto!important;
        text-align:left!important;
    }

    .sync-actions{
        flex:0 0 auto!important;
        gap:5px!important;
    }
}

@media (max-width:560px) and (orientation:portrait){
    .player-controls{
        flex-wrap:nowrap!important;
        row-gap:0!important;
    }

    #currentTime{
        order:2!important;
        margin-right:0!important;
    }

    #resyncBtn{
        order:9!important;
    }

    #muteBtn{
        order:10!important;
    }

    #castBtn{
        order:11!important;
    }

    #fullscreenBtn{
        order:12!important;
    }
}


@media (max-width:420px){
    #resyncBtn{
        flex:0 0 30px!important;
        width:30px!important;
        min-width:30px!important;
        height:30px!important;
    }

    .now-playing-prefix{
        display:none!important;
    }

    .now-playing-label::before{
        content:'Playing:';
        flex:0 0 auto;
        color:var(--muted);
    }

    .sync-status-line{
        gap:6px!important;
    }
}


/* Vewaro 1.72 — host seek control, cleaner viewer controls */
.viewer-hidden-control{
    display:none!important;
}

body.room-is-host #seekBar.host-seek-bar{
    display:block!important;
    flex:1 1 120px;
    min-width:80px;
}

body.room-is-viewer #playPauseBtn,
body.room-is-viewer #seekBar{
    display:none!important;
}

/* Viewers only need countdown + local utility controls. */
body.room-is-viewer .player-controls{
    flex-wrap:nowrap!important;
}

@media (max-width:900px){
    /* Host retains a proper seek bar and gets it on its own row on phones. */
    body.room-is-host .player-controls{
        flex-wrap:wrap!important;
        row-gap:6px!important;
    }

    body.room-is-host #seekBar.host-seek-bar{
        order:20!important;
        display:block!important;
        flex:0 0 100%!important;
        width:100%!important;
        min-width:100%!important;
        margin:0!important;
    }

    body.room-is-viewer .player-controls{
        flex-wrap:nowrap!important;
    }

    body.room-is-viewer #currentTime{
        order:2!important;
        margin-right:0!important;
    }

    body.room-is-viewer #resyncBtn{
        order:9!important;
        margin-left:auto!important;
    }

    body.room-is-viewer #muteBtn{order:10!important;margin-left:0!important;}
    body.room-is-viewer #castBtn{order:11!important;}
    body.room-is-viewer #fullscreenBtn{order:12!important;}
}


/* Vewaro 1.73 — host timeline restored, viewer timer removed, Now Playing moved to chat */
.sync-control-inline{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-width:74px;
    max-width:128px;
    color:#c3cad6;
    font-size:11px;
    white-space:nowrap;
}
.sync-control-inline .sync-dot{
    flex:0 0 8px;
    margin:0!important;
}
.sync-control-inline #syncText{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Viewer has no playback timer at all. */
body.room-is-viewer #currentTime,
body.room-is-viewer #durationTime{
    display:none!important;
}

/* Host gets the classic elapsed / total timeline around the seek bar. */
body.room-is-host #currentTime,
body.room-is-host #durationTime{
    display:inline-flex!important;
    align-items:center;
    flex:0 0 auto;
    min-width:42px;
    padding:0 2px;
    color:#d6dce8;
    font-weight:800;
    font-size:10px;
    letter-spacing:.01em;
}
body.room-is-host #durationTime{
    justify-content:flex-end;
}
body.room-is-host #seekBar.host-seek-bar{
    flex:1 1 140px;
    min-width:90px;
}

/* The old lower sync row is no longer needed. Host room tools keep a slim strip. */
.host-room-actions-bar{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:6px 10px;
    border-top:1px solid var(--line);
    background:#0d121a;
}
.host-room-actions-bar .sync-actions{
    margin-left:auto;
}

/* Dedicated Now Playing row directly below Room Chat. */
.chat-column{
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
}
.chat-now-playing{
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,rgba(255,92,106,.08),rgba(17,21,29,.45));
}
.chat-now-playing-icon{
    width:27px;
    height:27px;
    flex:0 0 27px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#ffbbc1;
    background:rgba(255,92,106,.13);
    border:1px solid rgba(255,135,146,.18);
    font-size:9px;
}
.chat-now-playing-copy{
    min-width:0;
    flex:1 1 auto;
    display:grid;
    gap:2px;
}
.chat-now-playing-copy small{
    color:#737f92;
    font-size:7px;
    font-weight:900;
    letter-spacing:.12em;
}
.chat-now-playing .now-playing-window{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
}
.chat-now-playing .now-playing-window strong{
    font-size:10px;
    line-height:1.25;
}

@media (max-width:900px){
    .sync-control-inline{
        min-width:62px!important;
        max-width:92px!important;
        gap:6px!important;
        font-size:10px!important;
    }

    body.room-is-viewer .player-controls{
        gap:7px!important;
    }

    body.room-is-viewer #resyncBtn{
        margin-left:auto!important;
    }

    body.room-is-host .player-controls{
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important;
        row-gap:6px!important;
    }

    body.room-is-host .sync-control-inline{
        order:4!important;
    }

    body.room-is-host #currentTime{
        order:19!important;
    }

    body.room-is-host #seekBar.host-seek-bar{
        order:20!important;
        flex:1 1 0!important;
        width:auto!important;
        min-width:90px!important;
        margin:0!important;
    }

    body.room-is-host #durationTime{
        order:21!important;
    }

    /* Put elapsed + seek + total on one dedicated second row. */
    body.room-is-host #currentTime::before{
        content:'';
    }

    .host-room-actions-bar{
        min-height:38px!important;
        padding:4px 8px!important;
    }

    .watch-column > .chat-column,
    .watch-column > .chat-column.open{
        grid-template-rows:auto auto minmax(0,1fr) auto!important;
    }

    .chat-now-playing{
        padding:7px 10px!important;
        gap:8px!important;
    }

    .chat-now-playing-icon{
        width:24px;
        height:24px;
        flex-basis:24px;
        border-radius:8px;
    }
}

@media (max-width:560px) and (orientation:portrait){
    .sync-control-inline{
        min-width:58px!important;
        max-width:76px!important;
    }

    body.room-is-host #currentTime,
    body.room-is-host #durationTime{
        min-width:36px!important;
        font-size:9px!important;
    }

    body.room-is-host #seekBar.host-seek-bar{
        min-width:76px!important;
    }

    .chat-now-playing{
        min-height:38px!important;
        padding:6px 9px!important;
    }

    .chat-now-playing-copy small{
        font-size:6px!important;
    }

    .chat-now-playing .now-playing-window strong{
        font-size:9px!important;
    }
}


/* Vewaro 1.74 — single-line Now Playing chat header + centred unlock prompt */
.chat-column{
    grid-template-rows:auto minmax(0,1fr) auto!important;
}

.chat-now-playing-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    min-width:0!important;
    padding:12px 14px!important;
    overflow:hidden!important;
}

.chat-now-playing-label{
    flex:0 0 auto!important;
    color:#7f8a9d!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:.11em!important;
    white-space:nowrap!important;
}

.chat-now-playing-head .now-playing-window{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    position:relative!important;
    text-align:left!important;
}

.chat-now-playing-head .now-playing-window strong{
    display:inline-block!important;
    max-width:none!important;
    white-space:nowrap!important;
    color:#f8f1f2!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:850!important;
}

/* The old second Now Playing row is gone in 1.74. */
.chat-now-playing{
    display:none!important;
}

/* Keep the browser-unlock prompt visually centred in the video. */
.tap-sync.playback-unlock{
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
}

/* Desktop chat send button is icon-only; mobile keeps the word Send. */
@media (min-width:901px){
    .chat-send-btn{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        padding:0!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
    }

    .chat-send-btn .send-label{
        display:none!important;
    }

    .chat-send-btn i{
        margin:0!important;
    }
}

@media (max-width:900px){
    .watch-column > .chat-column,
    .watch-column > .chat-column.open,
    body.mobile-chat-open .watch-column > .chat-column,
    body.mobile-chat-open .watch-column > .chat-column.open{
        grid-template-rows:auto minmax(0,1fr) auto!important;
    }

    .watch-column > .chat-column .chat-now-playing-head{
        min-height:48px!important;
        padding:10px 12px!important;
        gap:6px!important;
    }

    .chat-now-playing-label{
        font-size:7px!important;
    }

    .chat-now-playing-head .now-playing-window strong{
        font-size:10px!important;
    }
}

@media (max-width:560px){
    .tap-sync.playback-unlock{
        width:max-content!important;
        max-width:calc(100% - 24px)!important;
        padding:12px 14px!important;
    }
}


/* Vewaro 1.75 — cleaner Now Playing header + Twitch-style overlay controls */
.chat-now-playing-head{
    min-height:50px!important;
    padding:12px 14px!important;
    gap:10px!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
    background:linear-gradient(180deg,rgba(18,24,36,.92),rgba(12,17,26,.98))!important;
}

.chat-now-playing-label{
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    height:16px!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
}

.chat-now-playing-head .now-playing-window{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    overflow:hidden!important;
    height:18px!important;
}

.chat-now-playing-head .now-playing-window strong{
    display:inline-block!important;
    white-space:nowrap!important;
    line-height:1!important;
    font-size:12px!important;
    font-weight:900!important;
    will-change:transform!important;
}

.player-wrap{
    position:relative!important;
}

.player-overlay-ui{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:7;
    display:grid;
    gap:0;
    background:linear-gradient(180deg,rgba(4,7,12,0) 0%,rgba(4,7,12,.18) 10%,rgba(4,7,12,.82) 46%,rgba(4,7,12,.96) 100%);
    opacity:0;
    transform:translateY(12px);
    transition:opacity .18s ease,transform .18s ease;
    pointer-events:none;
}

.player-wrap:hover .player-overlay-ui,
.player-wrap:focus-within .player-overlay-ui,
.player-wrap.overlay-visible .player-overlay-ui{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.player-overlay-ui .player-controls,
.player-overlay-ui .host-room-actions-bar{
    background:transparent!important;
}

.player-overlay-ui .player-controls{
    border-top:0!important;
    padding:14px 12px 8px!important;
}

.player-overlay-ui .host-room-actions-bar{
    min-height:40px!important;
    padding:0 10px 10px!important;
    border-top:0!important;
}

.control-hint,
.sync-bar{
    display:none!important;
}

#castBtn,
#cinemaModeBtn{
    gap:0!important;
    padding:0!important;
}

#castBtn span,
#cinemaModeBtn span{
    display:none!important;
}

#castBtn i,
#cinemaModeBtn i{
    margin:0!important;
}

#settingsBtn span{
    display:inline!important;
}

.tap-sync.playback-unlock{
    z-index:8!important;
}

@media (min-width:901px){
    #castBtn,
    #cinemaModeBtn,
    #fullscreenBtn,
    #muteBtn,
    #resyncBtn{
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
    }

    .player-overlay-ui .player-controls{
        padding:16px 14px 9px!important;
    }

    .host-room-actions-bar .sync-actions{
        gap:7px!important;
    }

    .host-room-actions-bar #settingsBtn{
        height:34px!important;
        padding:0 11px!important;
    }
}

@media (max-width:900px){
    .chat-now-playing-head,
    .watch-column > .chat-column .chat-now-playing-head{
        min-height:46px!important;
        padding:10px 12px!important;
        gap:8px!important;
    }

    .chat-now-playing-head .now-playing-window strong{
        font-size:11px!important;
    }

    .player-overlay-ui{
        transform:translateY(8px);
    }

    .player-overlay-ui .player-controls{
        padding:10px 8px 6px!important;
    }

    .player-overlay-ui .host-room-actions-bar{
        padding:0 8px 8px!important;
    }

    #castBtn,
    #cinemaModeBtn,
    #fullscreenBtn,
    #muteBtn,
    #resyncBtn{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
    }
}

@media (max-width:560px){
    .chat-now-playing-label{
        font-size:7px!important;
    }

    .chat-now-playing-head .now-playing-window{
        height:16px!important;
    }

    .chat-now-playing-head .now-playing-window strong{
        font-size:10px!important;
    }

    .tap-sync.playback-unlock{
        max-width:min(92%,360px)!important;
    }
}


/* Vewaro 1.76 — wider desktop chat, fixed 16:9 player, host tools in header */
.room-header-action{
    height:38px;
    min-width:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#151b27;
    color:#d8deea;
    font-size:10px;
    font-weight:900;
    white-space:nowrap;
    transition:.16s ease;
}
.room-header-action:hover,
.room-header-action:focus-visible{
    border-color:#ce4754;
    background:#3d191c;
    color:#fff;
}
.room-header-add{color:#ffc0c6}
.room-header-settings{color:#cbd4e3}
.room-header-action i{font-size:11px}

@media (min-width:901px){
    .room-shell{
        grid-template-columns:minmax(0,1fr) clamp(420px,28vw,560px)!important;
        align-items:start!important;
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
    }

    .watch-column{
        height:auto!important;
        align-self:start!important;
    }

    .player-card{
        height:auto!important;
        min-height:0!important;
        align-self:start!important;
    }

    .player-wrap{
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:16 / 9!important;
    }

    .player-wrap .player-surface,
    .player-wrap video,
    .player-wrap iframe{
        width:100%!important;
        height:100%!important;
        object-fit:contain!important;
    }

    .chat-column{
        position:sticky!important;
        top:84px!important;
        height:calc(100dvh - 96px)!important;
        min-height:520px!important;
        max-height:none!important;
        align-self:start!important;
    }

    /* The overlay now contains playback controls only. */
    .player-overlay-ui{
        display:block!important;
    }

    body.room-page.cinema-mode .room-shell{
        grid-template-columns:minmax(0,1fr) clamp(420px,28vw,560px)!important;
        height:calc(100dvh - 24px)!important;
        align-items:start!important;
    }

    body.room-page.cinema-mode .watch-column,
    body.room-page.cinema-mode .player-card{
        height:auto!important;
        align-self:start!important;
    }

    body.room-page.cinema-mode .player-wrap{
        flex:0 0 auto!important;
        height:auto!important;
        aspect-ratio:16 / 9!important;
    }

    body.room-page.cinema-mode .chat-column{
        position:relative!important;
        top:auto!important;
        height:100%!important;
        min-height:0!important;
        max-height:none!important;
    }
}

@media (min-width:1600px){
    .room-shell,
    body.room-page.cinema-mode .room-shell{
        grid-template-columns:minmax(0,1fr) clamp(460px,28vw,580px)!important;
    }
}

@media (max-width:900px){
    .room-header-action{
        width:34px!important;
        min-width:34px!important;
        height:34px!important;
        padding:0!important;
        border-radius:11px!important;
        flex:0 0 34px!important;
    }

    .room-header-action span{
        display:none!important;
    }

    .room-header-action i{
        margin:0!important;
        font-size:11px!important;
    }
}

@media (max-width:430px){
    .room-header-action{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        flex-basis:32px!important;
    }
}


/* Vewaro 1.77 — compact room header, reliable mobile overlay auto-hide, keyboard-safe chat */
.room-header{
    min-height:56px!important;
    height:56px!important;
    padding:0 12px!important;
    gap:8px!important;
}

.room-header .vewaro-brand{
    flex:0 0 auto!important;
}

.room-header .brand-logo-full{
    display:none!important;
}

.room-header .brand-logo-icon{
    display:block!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
}

.room-meta{
    flex:1 1 auto!important;
    min-width:0!important;
    justify-content:flex-end!important;
    gap:6px!important;
}

/* Room name / code and the HOST pill are intentionally not shown in the room header. */
.room-code,
.host-badge{
    display:none!important;
}

.room-header .viewer-count,
.room-header .header-copy-invite,
.room-header .room-header-action,
.room-header .admin-room-badge{
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    padding:0!important;
    border-radius:10px!important;
    flex:0 0 32px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.room-header .viewer-count{
    width:auto!important;
    min-width:38px!important;
    padding:0 8px!important;
    gap:5px!important;
    font-size:10px!important;
}

.room-header .room-access-badge{
    width:26px!important;
    height:26px!important;
    border-radius:8px!important;
    font-size:9px!important;
}

.room-header .room-header-action span,
.room-header .admin-room-badge span{
    display:none!important;
}

.room-header .room-header-action i,
.room-header .header-copy-invite i,
.room-header .viewer-count i,
.room-header .admin-room-badge i{
    margin:0!important;
    font-size:11px!important;
}

@media (min-width:901px){
    .room-shell{
        margin-top:10px!important;
    }
    .chat-column{
        top:66px!important;
        height:calc(100dvh - 76px)!important;
    }
}

@media (max-width:900px){
    .room-header{
        min-height:50px!important;
        height:50px!important;
        padding:0 7px!important;
        gap:6px!important;
    }

    .room-header .brand-logo-icon{
        width:32px!important;
        height:32px!important;
        flex-basis:32px!important;
    }

    .room-meta{
        gap:4px!important;
    }

    .room-header .viewer-count,
    .room-header .header-copy-invite,
    .room-header .room-header-action,
    .room-header .admin-room-badge{
        width:30px!important;
        min-width:30px!important;
        height:30px!important;
        flex-basis:30px!important;
        border-radius:9px!important;
    }

    .room-header .viewer-count{
        width:auto!important;
        min-width:36px!important;
        padding:0 7px!important;
    }

    .room-header .room-access-badge{
        width:24px!important;
        height:24px!important;
    }

    /* Normal mobile room gains the space saved by the smaller header. */
    .room-shell{
        height:calc(var(--vewaro-mobile-vh,var(--vewaro-vh,100dvh)) - 56px)!important;
        margin-top:3px!important;
    }

    /* Keep player + a smaller chat visible when the software keyboard opens. */
    body.room-page.mobile-keyboard-open{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .room-header{
        position:fixed!important;
        z-index:9300!important;
        left:var(--vewaro-keyboard-left,0px)!important;
        top:var(--vewaro-keyboard-top,0px)!important;
        width:var(--vewaro-keyboard-vw,100vw)!important;
        height:48px!important;
        min-height:48px!important;
        margin:0!important;
    }

    body.room-page.mobile-keyboard-open .room-shell{
        position:fixed!important;
        z-index:9100!important;
        left:var(--vewaro-keyboard-left,0px)!important;
        top:calc(var(--vewaro-keyboard-top,0px) + 48px)!important;
        width:var(--vewaro-keyboard-vw,100vw)!important;
        height:calc(var(--vewaro-keyboard-vh,100dvh) - 48px)!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        padding:3px 4px 4px!important;
        overflow:hidden!important;
        box-sizing:border-box!important;
    }

    body.room-page.mobile-keyboard-open .watch-column{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        gap:4px!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .player-card{
        display:block!important;
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .player-card .player-wrap{
        --keyboard-player-h:clamp(92px,calc(var(--vewaro-keyboard-vh,100dvh) * .30),145px);
        width:min(100%,calc(var(--keyboard-player-h) * 16 / 9))!important;
        height:var(--keyboard-player-h)!important;
        min-height:0!important;
        max-height:145px!important;
        aspect-ratio:16 / 9!important;
        margin:0 auto!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column,
    body.room-page.mobile-keyboard-open .watch-column > .chat-column.open{
        position:relative!important;
        inset:auto!important;
        z-index:1!important;
        flex:1 1 0!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        display:grid!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
        border-radius:12px!important;
        border:1px solid var(--line)!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .chat-now-playing-head{
        min-height:34px!important;
        height:34px!important;
        padding:7px 9px!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .messages{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        padding:6px 8px!important;
        overflow-y:auto!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .chat-form{
        position:relative!important;
        padding:6px!important;
        gap:6px!important;
    }
}


@media (max-width:900px) and (pointer:coarse){
    /* Touch devices: opacity is controlled by the 3-second JS timer, not :focus. */
    .player-wrap:focus-within .player-overlay-ui{
        opacity:0;
        transform:translateY(8px);
        pointer-events:none;
    }
    .player-wrap.overlay-visible .player-overlay-ui{
        opacity:1!important;
        transform:translateY(0)!important;
        pointer-events:auto!important;
    }
}

@media (max-width:380px){
    .room-header{
        padding-inline:5px!important;
    }
    .room-meta{gap:3px!important;}
    .room-header .viewer-count,
    .room-header .header-copy-invite,
    .room-header .room-header-action,
    .room-header .admin-room-badge{
        width:28px!important;
        min-width:28px!important;
        height:28px!important;
        flex-basis:28px!important;
    }
    .room-header .viewer-count{
        width:auto!important;
        min-width:34px!important;
        padding-inline:6px!important;
    }
}


/* Vewaro 1.78 — icon-only room settings + keyboard only shrinks chat */
.room-header-settings span{
    display:none!important;
}

@media (max-width:900px){
    /*
     * Keep the player at its normal mobile 16:9 size when the software
     * keyboard opens. Only the chat is allowed to use the reduced space.
     */
    body.room-page.mobile-keyboard-open .watch-column > .player-card{
        flex:0 0 auto!important;
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        margin:0!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .player-card .player-wrap{
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:16 / 9!important;
        margin:0!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column,
    body.room-page.mobile-keyboard-open .watch-column > .chat-column.open{
        flex:1 1 0!important;
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow:hidden!important;
    }

    body.room-page.mobile-keyboard-open .watch-column > .chat-column .messages{
        min-height:0!important;
        height:auto!important;
        max-height:none!important;
        overflow-y:auto!important;
    }
}


/* Vewaro 1.79 — viewer header cleanup, reliable mobile overlay + custom Cast only */
body.room-is-viewer .room-header .room-access-badge{
    display:none!important;
}

#castBtn.cast-disabled-live,
#castBtn:disabled{
    opacity:.36!important;
    cursor:not-allowed!important;
    border-color:#273042!important;
    color:#7f899a!important;
    background:#151b27!important;
}

/* Touch browsers can keep :hover after a tap; let JS own visibility there. */
@media (hover:none), (pointer:coarse){
    .player-wrap:hover .player-overlay-ui,
    .player-wrap:focus-within .player-overlay-ui{
        opacity:0!important;
        transform:translateY(8px)!important;
        pointer-events:none!important;
    }

    .player-wrap.overlay-visible .player-overlay-ui,
    .player-wrap.overlay-visible:hover .player-overlay-ui,
    .player-wrap.overlay-visible:focus-within .player-overlay-ui{
        opacity:1!important;
        transform:translateY(0)!important;
        pointer-events:auto!important;
    }
}


/* Vewaro 1.80 — restore full logo + auto-fit desktop chat to the 16:9 player */
.room-header .brand-logo-full{
    display:block!important;
    width:132px!important;
    max-width:132px!important;
    max-height:38px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
}
.room-header .brand-logo-icon{
    display:none!important;
}

@media (min-width:901px){
    .room-shell{
        --auto-chat-width:360px;
        grid-template-columns:minmax(0,1fr) var(--auto-chat-width)!important;
        gap:12px!important;
        align-items:start!important;
    }

    .chat-column{
        position:sticky!important;
        top:66px!important;
        width:100%!important;
        height:var(--desktop-player-height,auto)!important;
        min-height:0!important;
        max-height:calc(100dvh - 76px)!important;
        align-self:start!important;
    }

    body.room-page.cinema-mode .room-shell{
        --auto-chat-width:360px;
        grid-template-columns:minmax(0,1fr) var(--auto-chat-width)!important;
    }

    body.room-page.cinema-mode .chat-column{
        position:relative!important;
        top:auto!important;
        height:var(--desktop-player-height,100%)!important;
        min-height:0!important;
        max-height:100%!important;
    }
}

@media (max-width:900px){
    .room-header .brand-logo-full{
        display:block!important;
        width:clamp(94px,27vw,116px)!important;
        max-width:116px!important;
        max-height:34px!important;
        flex:0 0 auto!important;
    }
    .room-header .brand-logo-icon{
        display:none!important;
    }
}

@media (max-width:380px){
    .room-header .brand-logo-full{
        width:88px!important;
        max-width:88px!important;
    }
}


/* Vewaro 1.81 — Twitch-style desktop fit: no page scrollbar, fluid chat rail */
@media (min-width:901px){
    /* Restrict the viewport scroll lock to watch rooms. Other pages must scroll. */
    body.room-page{
        width:100%!important;
        height:100%!important;
        min-height:100%!important;
        overflow:hidden!important;
    }

    /* Only lock the root element if the browser supports the room selector. */
    @supports selector(html:has(> body.room-page)){
        html:has(> body.room-page){
            width:100%!important;
            height:100%!important;
            min-height:100%!important;
            overflow:hidden!important;
        }
    }

    body.room-page .room-shell{
        --auto-chat-width:clamp(320px,20vw,420px);
        width:calc(100% - 20px)!important;
        max-width:none!important;
        height:calc(100dvh - 66px)!important;
        min-height:0!important;
        margin:10px auto 0!important;
        padding:0!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr) var(--auto-chat-width)!important;
        gap:10px!important;
        align-items:stretch!important;
        overflow:hidden!important;
    }

    body.room-page .watch-column{
        width:100%!important;
        height:100%!important;
        min-width:0!important;
        min-height:0!important;
        display:block!important;
        overflow:hidden!important;
    }

    body.room-page .player-card{
        width:100%!important;
        height:100%!important;
        min-width:0!important;
        min-height:0!important;
        display:flex!important;
        flex-direction:column!important;
        overflow:hidden!important;
        align-self:stretch!important;
    }

    /* The player area fills the available Twitch-style column. The actual
       video remains undistorted/16:9 inside it via object-fit:contain. */
    body.room-page .player-wrap{
        flex:1 1 auto!important;
        width:100%!important;
        height:auto!important;
        min-width:0!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
        background:#000!important;
        overflow:hidden!important;
    }

    body.room-page .player-wrap .player-surface,
    body.room-page .player-wrap video,
    body.room-page .player-wrap iframe{
        width:100%!important;
        height:100%!important;
        max-width:100%!important;
        max-height:100%!important;
    }

    body.room-page .player-wrap video,
    body.room-page .player-wrap img{
        object-fit:contain!important;
    }

    body.room-page .chat-column{
        position:relative!important;
        top:auto!important;
        width:100%!important;
        height:100%!important;
        min-width:0!important;
        min-height:0!important;
        max-height:none!important;
        align-self:stretch!important;
        overflow:hidden!important;
    }

    body.room-page .chat-column .messages{
        min-height:0!important;
        overflow-y:auto!important;
        overscroll-behavior:contain!important;
    }

    /* Theatre uses the same fit logic, just without the room header. */
    body.room-page.cinema-mode .room-shell{
        width:calc(100% - 20px)!important;
        height:calc(100dvh - 20px)!important;
        margin:10px auto!important;
        grid-template-columns:minmax(0,1fr) var(--auto-chat-width)!important;
        align-items:stretch!important;
        overflow:hidden!important;
    }

    body.room-page.cinema-mode .watch-column,
    body.room-page.cinema-mode .player-card,
    body.room-page.cinema-mode .chat-column{
        height:100%!important;
        min-height:0!important;
    }

    body.room-page.cinema-mode .player-wrap{
        flex:1 1 auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
    }
}

/* A little narrower chat on compact 1080p-class desktop widths. */
@media (min-width:901px) and (max-width:1600px){
    body.room-page .room-shell{
        --auto-chat-width:clamp(310px,21vw,350px);
    }
}

/* Ultrawide: keep chat useful but cap it, giving the extra width to the player area. */
@media (min-width:2400px){
    body.room-page .room-shell{
        --auto-chat-width:420px;
    }
}


/* Vewaro 1.88 — title on video + transient chat activity */
.player-now-playing{
    position:absolute;
    z-index:6;
    top:12px;
    left:12px;
    max-width:min(58%,680px);
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:11px;
    background:rgba(6,9,14,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 8px 28px rgba(0,0,0,.22);
    pointer-events:none;
}
.player-now-playing-label{
    flex:0 0 auto;
    color:#8d98aa;
    font-size:7px;
    line-height:1;
    font-weight:950;
    letter-spacing:.13em;
    white-space:nowrap;
}
.player-now-playing .now-playing-window{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    white-space:nowrap;
}
.player-now-playing .now-playing-window strong{
    display:inline-block;
    max-width:none;
    color:#fff;
    font-size:11px;
    line-height:1.1;
    font-weight:900;
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.55);
}

.chat-status-head{
    position:relative;
    min-height:48px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,rgba(17,23,34,.96),rgba(12,17,26,.98))!important;
    border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.chat-status-default{
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    color:#8591a4;
    font-size:10px;
    font-weight:800;
    transition:opacity .18s ease,transform .18s ease;
}
.chat-status-default.is-hidden{
    opacity:0;
    transform:translateY(-4px);
}
#chatStatusSync{
    min-width:0;
    flex:1 1 auto;
    color:#80ddb8;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
#chatStatusSync.bad{color:#f59aaa}
.chat-status-separator{color:#4f5a6b}
#chatStatusViewers{flex:0 0 auto;white-space:nowrap;color:#8e99ab}
.chat-activity-status{
    position:absolute;
    left:14px;
    right:14px;
    min-width:0;
    opacity:0;
    transform:translateY(5px);
    color:#aab5c6;
    font-size:10px;
    font-weight:850;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;
}
.chat-activity-status.is-visible{opacity:1;transform:translateY(0)}
.chat-activity-status.activity-join{color:#86d7b6}
.chat-activity-status.activity-leave{color:#8995a8}

/* Join/leave events now live in the temporary chat status header, not history. */
.messages .system-join,
.messages .system-leave{display:none!important}

/* Legacy Now Playing header is no longer used. */
.chat-now-playing-head{display:none!important}

@media (max-width:900px){
    .player-now-playing{
        top:8px;
        left:8px;
        max-width:calc(100% - 16px);
        padding:7px 9px;
        gap:7px;
        border-radius:10px;
    }
    .player-now-playing-label{font-size:6px}
    .player-now-playing .now-playing-window strong{font-size:10px}
    .chat-status-head,
    .watch-column > .chat-column .chat-status-head{
        min-height:44px!important;
        padding:0 11px!important;
    }
    .chat-activity-status{left:11px;right:11px}
}

@media (max-width:420px){
    .player-now-playing-label{display:none}
    .player-now-playing{max-width:72%}
}


/* Vewaro 1.89 — host /status header + clean white title overlay */
.player-now-playing{
    top:16px!important;
    left:18px!important;
    max-width:min(72%,860px)!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    gap:0!important;
}
.player-now-playing-label{display:none!important}
.player-now-playing .now-playing-window{overflow:hidden!important}
.player-now-playing .now-playing-window strong{
    color:#fff!important;
    font-size:18px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.01em!important;
    text-shadow:
        0 2px 3px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.88),
        0 0 18px rgba(0,0,0,.58)!important;
}

.chat-status-head{
    gap:9px!important;
    min-width:0!important;
}
.chat-room-status-label{
    flex:0 0 auto;
    color:#7e899a;
    font-size:8px;
    line-height:1;
    font-weight:950;
    letter-spacing:.14em;
    white-space:nowrap;
}
.chat-room-status-window{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
}
.chat-room-status-window strong{
    display:inline-block;
    max-width:none;
    color:#f5e9ea;
    font-size:11px;
    line-height:1.2;
    font-weight:850;
    white-space:nowrap;
}
.chat-room-status-window.is-scrolling strong{
    padding-left:100%;
    animation:vewaro-room-status-scroll 12s linear infinite;
}
@keyframes vewaro-room-status-scroll{
    0%,10%{transform:translateX(0)}
    90%,100%{transform:translateX(-100%)}
}

/* Join/leave notices float just above the composer and then disappear. */
.chat-column{position:relative!important}
.chat-activity-status{
    position:absolute!important;
    z-index:35!important;
    left:50%!important;
    right:auto!important;
    bottom:66px!important;
    width:max-content!important;
    max-width:calc(100% - 24px)!important;
    padding:7px 11px!important;
    border:1px solid rgba(120,134,160,.22)!important;
    border-radius:999px!important;
    background:rgba(9,14,22,.94)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.34)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    transform:translate(-50%,8px)!important;
    opacity:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    pointer-events:none!important;
}
.chat-activity-status.is-visible{
    opacity:1!important;
    transform:translate(-50%,0)!important;
}
.chat-activity-status.activity-join{
    color:#9de3c6!important;
    border-color:rgba(63,203,145,.24)!important;
}
.chat-activity-status.activity-leave{
    color:#9aa5b6!important;
}

@media (prefers-reduced-motion:reduce){
    .chat-room-status-window.is-scrolling strong{
        animation:none!important;
        padding-left:0!important;
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
}

@media (max-width:900px){
    .player-now-playing{
        top:12px!important;
        left:12px!important;
        max-width:calc(100% - 24px)!important;
        padding:0!important;
    }
    .player-now-playing .now-playing-window strong{
        font-size:14px!important;
    }
    .chat-room-status-label{font-size:7px!important}
    .chat-room-status-window strong{font-size:10px!important}
    .chat-activity-status{
        bottom:62px!important;
        max-width:calc(100% - 18px)!important;
        padding:6px 9px!important;
        font-size:9px!important;
    }
}

@media (max-width:420px){
    .player-now-playing{
        max-width:calc(100% - 20px)!important;
        left:10px!important;
        top:10px!important;
    }
    .player-now-playing .now-playing-window strong{font-size:13px!important}
}


/* Vewaro 1.90 — title follows player overlay + 2s join/leave bubble */
.player-now-playing{
    opacity:0!important;
    transform:translateY(-6px)!important;
    transition:opacity .18s ease,transform .18s ease!important;
    pointer-events:none!important;
    max-width:min(82%,980px)!important;
}
.player-wrap:hover .player-now-playing,
.player-wrap:focus-within .player-now-playing,
.player-wrap.overlay-visible .player-now-playing{
    opacity:1!important;
    transform:translateY(0)!important;
}
.player-now-playing .now-playing-window strong{
    font-size:clamp(20px,1.45vw,27px)!important;
    line-height:1.08!important;
    font-weight:950!important;
    letter-spacing:-.025em!important;
    text-shadow:
        0 2px 3px rgba(0,0,0,.98),
        0 0 8px rgba(0,0,0,.92),
        0 0 20px rgba(0,0,0,.72)!important;
}

.chat-activity-status{
    bottom:72px!important;
    min-height:30px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:7px 13px!important;
    border-radius:999px!important;
    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.01em!important;
}
.chat-activity-status[hidden]{display:none!important}
.chat-activity-status.is-visible{display:flex!important}

@media (max-width:900px){
    .player-now-playing{
        top:13px!important;
        left:13px!important;
        max-width:calc(100% - 26px)!important;
    }
    .player-now-playing .now-playing-window strong{
        font-size:clamp(17px,4.8vw,22px)!important;
    }
    .chat-activity-status{
        bottom:68px!important;
        max-width:calc(100% - 20px)!important;
        padding:7px 11px!important;
        font-size:9px!important;
    }
}

@media (max-width:420px){
    .player-now-playing{
        top:10px!important;
        left:10px!important;
        max-width:calc(100% - 20px)!important;
    }
    .player-now-playing .now-playing-window strong{
        font-size:17px!important;
    }
}


/* Vewaro 1.91 — cleaner room status + slash-command assistance */
.chat-status-head{
    min-height:52px!important;
    padding:0 14px!important;
    overflow:hidden!important;
}
.chat-room-status-label{display:none!important;}
.chat-room-status-window{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
}
.chat-room-status-window strong{
    display:inline-block!important;
    color:#faf1f2!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:850!important;
    white-space:nowrap!important;
}
.chat-room-status-window.is-scrolling strong{
    max-width:none!important;
    padding-left:100%!important;
    animation:vewaro-room-status-scroll 13s linear infinite!important;
}
@keyframes vewaro-room-status-scroll{
    0%,8%{transform:translateX(0)}
    92%,100%{transform:translateX(-100%)}
}

.chat-command-menu{
    position:absolute;
    z-index:90;
    left:9px;
    right:9px;
    bottom:calc(100% + 7px);
    display:grid;
    gap:4px;
    padding:6px;
    border:1px solid #30394b;
    border-radius:13px;
    background:rgba(13,18,27,.98);
    box-shadow:0 18px 50px rgba(0,0,0,.46);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.chat-command-option{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#dfe4ee;
    text-align:left;
}
.chat-command-option:hover,
.chat-command-option.active{
    background:rgba(255,92,106,.14);
}
.chat-command-option code{
    color:#ffbbc1;
    font-size:11px;
    font-weight:900;
}
.chat-command-option span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8e99aa;
    font-size:10px;
}
.chat-commands-modal-card{width:min(520px,100%)!important;}
.chat-command-help-list{display:grid;gap:8px;margin-top:14px;}
.chat-command-help-row{
    display:grid;
    grid-template-columns:minmax(135px,auto) minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:11px 12px;
    border:1px solid rgba(105,119,145,.22);
    border-radius:12px;
    background:#111720;
}
.chat-command-help-row code{
    color:#ffbac0;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}
.chat-command-help-row span{color:#9aa5b6;font-size:10px;line-height:1.45;}
.chat-command-help-note{margin:14px 2px 0;color:#7e899b;font-size:10px;line-height:1.5;}
.chat-command-help-note strong{color:#ffbbc1;}

@media(max-width:900px){
    .chat-status-head,
    .watch-column > .chat-column .chat-status-head{
        min-height:46px!important;
        padding:0 11px!important;
    }
    .chat-room-status-window strong{font-size:12px!important;}
    .chat-command-menu{left:7px;right:7px;bottom:calc(100% + 6px);}
}

@media(max-width:520px){
    .chat-command-help-row{grid-template-columns:1fr;gap:4px;}
}


/* Vewaro 1.92 — reliable full room-status scrolling */
.chat-room-status-window{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-align:left!important;
}
.chat-room-status-window strong{
    display:inline-block!important;
    width:max-content!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    color:#fbf4f5!important;
    font-size:14px!important;
    line-height:1.25!important;
    font-weight:850!important;
    white-space:nowrap!important;
    transform:translateX(0);
}
.chat-room-status-window.is-scrolling strong{
    padding-left:0!important;
    animation:vewaro-room-status-pan var(--status-scroll-duration,10s) ease-in-out infinite!important;
}
@keyframes vewaro-room-status-pan{
    0%,14%{transform:translateX(0)}
    86%,100%{transform:translateX(calc(-1 * var(--status-scroll-distance,0px)))}
}
@media(max-width:900px){
    .chat-room-status-window strong{font-size:13px!important;}
}
@media(prefers-reduced-motion:reduce){
    .chat-room-status-window.is-scrolling strong{
        animation:none!important;
        max-width:100%!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }
}


/* Vewaro 1.93 — JS-driven room status marquee */
.chat-room-status-window{
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
}
.chat-room-status-window strong{
    position:relative!important;
    display:block!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    animation:none!important;
    transform:translateX(0);
    will-change:transform;
}
.chat-room-status-window.is-scrolling strong{animation:none!important;}


/* Vewaro 1.95 — mobile title follows overlay exactly + improved presence bubbles */
@media (hover:none), (pointer:coarse){
    /* Touch browsers can keep :hover/:focus after a tap. The title must be
       controlled by the same JS overlay-visible state as the player controls. */
    .player-wrap:hover .player-now-playing,
    .player-wrap:focus-within .player-now-playing{
        opacity:0!important;
        transform:translateY(-6px)!important;
    }

    .player-wrap.overlay-visible .player-now-playing,
    .player-wrap.overlay-visible:hover .player-now-playing,
    .player-wrap.overlay-visible:focus-within .player-now-playing{
        opacity:1!important;
        transform:translateY(0)!important;
    }
}

.chat-activity-status{
    gap:8px!important;
    min-height:34px!important;
    padding:6px 12px 6px 7px!important;
    font-size:10px!important;
    line-height:1.15!important;
    box-shadow:0 12px 34px rgba(0,0,0,.42)!important;
}
.chat-activity-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:9px;
    background:rgba(255,255,255,.06);
}
.chat-activity-copy{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:900;
}
.chat-activity-status.activity-join .chat-activity-icon{
    color:#5be0aa;
    background:rgba(55,205,149,.13);
}
.chat-activity-status.activity-leave .chat-activity-icon{
    color:#91a0b5;
    background:rgba(126,142,167,.11);
}

@media (max-width:900px){
    .chat-activity-status{
        min-height:32px!important;
        gap:7px!important;
        padding:5px 10px 5px 6px!important;
        font-size:9px!important;
    }
    .chat-activity-icon{
        width:21px;
        height:21px;
        flex-basis:21px;
        font-size:8px;
    }
}


/* Vewaro 1.96 — normal pages scroll, remember-login control, unlimited member queue */
body:not(.room-page){
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
}

.member-login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:-1px;
    font-size:10px;
}
.member-login-options>a{
    flex:0 0 auto;
    color:#ff9fa8;
    font-weight:850;
    text-decoration:none;
}
.member-stay-login{
    display:inline-flex!important;
    grid-template-columns:none!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
    padding:0!important;
    color:#929daf!important;
    font-size:10px!important;
    font-weight:750!important;
    cursor:pointer;
}
.member-stay-login input{
    width:15px!important;
    height:15px!important;
    margin:0!important;
    padding:0!important;
    accent-color:#ff5160;
}

@media (max-width:520px){
    .member-login-options{
        align-items:flex-start;
    }
}


/* Vewaro 1.98 — account/document pages own their scroll container */
html.account-document{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    -webkit-overflow-scrolling:touch;
}

html.account-document body.account-page{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior-y:auto!important;
}

html.account-document body.account-page .member-shell{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
}

/* The room-specific mobile viewport locks must never trap account pages. */
@media (max-width:900px), (orientation:landscape) and (max-height:650px) and (pointer:coarse){
    html.account-document{
        height:auto!important;
        min-height:100%!important;
        overflow-y:auto!important;
    }

    html.account-document body.account-page{
        height:auto!important;
        min-height:100dvh!important;
        overflow:visible!important;
        touch-action:pan-y!important;
    }

    html.account-document body.account-page .member-shell{
        overflow:visible!important;
    }
}

/* Vewaro 2.01 — room library (movies & grouped TV episodes) */
.host-tools-source-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 15px}
.host-source-tab{display:flex;align-items:center;justify-content:center;gap:10px;min-height:53px;padding:11px 16px;background:#0d131e;color:#aeb9cd;border:1px solid #2a3449;border-radius:13px;font:inherit;font-size:14px;font-weight:850;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.host-source-tab i{font-size:16px;color:#f6838d}
.host-source-tab.active{border-color:#fd5360;background:linear-gradient(115deg,rgba(232,60,74,.23),rgba(88,33,40,.18));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,87,100,.24)}
.host-source-tab:focus-visible,.library-type-tab:focus-visible,.library-card button:focus-visible,.library-episode button:focus-visible,.library-season-tab:focus-visible{outline:2px solid #ffa6ae;outline-offset:2px}
.host-library-section{min-height:320px}
.host-library-heading{margin-bottom:12px}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.library-types{display:flex;gap:6px;flex-wrap:wrap}
.library-type-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #283249;border-radius:10px;background:#171e2a;color:#b8c2d5;font-weight:800;font-size:12px;cursor:pointer}
.library-type-tab.active{color:#fff;background:#682227;border-color:#f35562}
.library-type-tab span{display:inline-grid;place-items:center;min-width:23px;height:20px;padding:0 6px;border-radius:6px;background:rgba(255,255,255,.09);font-size:10px}
.library-search-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:210px;max-width:390px;padding:0 12px;border:1px solid #2b3449;border-radius:10px;background:#0b111b;color:#9fabc4}
.library-search-wrap:focus-within{border-color:#fd5360}
.library-search-wrap input{width:100%;min-width:0;padding:11px 0!important;background:transparent!important;border:0!important;outline:none!important;color:#fff}
.library-status{font-size:11px;font-weight:700;color:#94a3bd;margin:3px 0 12px;min-height:13px}
.library-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;max-height:468px;overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 9px 2px}
.library-card{min-width:0;border-radius:12px;overflow:hidden;border:1px solid #293246;background:#151d2b;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.library-card:hover{border-color:#e9606c;transform:translateY(-2px)}
.library-card-cover{position:relative;display:block;aspect-ratio:2/3;background:linear-gradient(125deg,#552329,#151928);width:100%;border:0;padding:0;cursor:pointer;overflow:hidden}
.library-card-cover img{width:100%;height:100%;display:block;object-fit:cover}
.library-card-cover .library-card-overlay{position:absolute;inset:auto 0 0;padding:25px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:10px;color:#fff;font-weight:800;text-align:left}
.library-card-copy{padding:10px 9px 5px;min-height:58px}
.library-card-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.4;color:#fff5f6;min-height:30px;overflow-wrap:anywhere}
.library-card-copy span{display:block;margin-top:4px;color:#8f9bb5;font-size:10px}
.library-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto;padding:8px}
.library-card-actions button,.library-episode-actions button{border:1px solid #394663;border-radius:8px;min-width:0;padding:8px 4px;background:#242e42;color:#f4dcdf;cursor:pointer;font-size:10px;font-weight:850}
.library-card-actions button:first-child,.library-episode-actions button:first-child{background:#ec3443;border-color:#ec3443;color:#fff}
.library-card-actions button:disabled,.library-episode-actions button:disabled{opacity:.45;cursor:wait}
.library-card-actions i{margin-right:3px}
.library-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:14px;color:#afbcd4;font-size:12px;font-weight:800}
.library-pagination button{font-size:11px;padding:8px 12px}
.library-rights-notice{margin:16px 0 0!important;padding:11px 12px;border:1px solid #444050;border-radius:10px;background:#1d1b28;font-size:11px!important;line-height:1.5;color:#bbc4d4}
.library-rights-notice i{color:#ff9aa2;margin-right:7px}
.library-art-credit{font-size:10px!important;color:#8d9bb6!important;margin:8px 0 0!important}
.library-art-credit a{color:#f9a0a8}
.library-series-detail{max-height:520px;overflow-y:auto;overscroll-behavior:contain}
.library-back{display:inline-flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:#ffa5ad;font-size:12px;font-weight:800;cursor:pointer}
.library-detail-header{display:flex;gap:15px;padding:8px 2px 15px;align-items:flex-start}
.library-detail-header img{width:100px;aspect-ratio:2/3;object-fit:cover;border:1px solid #283348;border-radius:10px}
.library-detail-copy{flex:1;min-width:0}
.library-detail-copy h3{margin:0 0 4px;color:#fff;font-size:20px}
.library-detail-copy p{color:#9aabc4;font-size:12px;margin:0 0 12px}
.library-batch-actions{display:flex;gap:8px;flex-wrap:wrap}
.library-batch-actions button{font-size:11px}
.library-season-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.library-season-tab{padding:8px 11px;border:1px solid #2f3b52;border-radius:9px;background:#34181c;color:#a8b8d0;font-size:11px;font-weight:800;cursor:pointer}
.library-season-tab.active{color:#fff;background:#913038;border-color:#fd616d}
.library-episode-list{display:grid;gap:7px;max-height:350px;overflow-y:auto;padding-right:5px}
.library-episode{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #293347;background:#151d2a;border-radius:10px;padding:10px}
.library-episode-copy{min-width:0;display:grid;gap:4px}
.library-episode-copy strong{color:#f5e5e7;font-size:12px;font-weight:800}
.library-episode-copy span{font-size:10px;color:#8998b3;line-height:1.35}
.library-episode-actions{display:flex;gap:6px;flex-shrink:0}
.library-episode-actions button{min-width:64px;padding:8px}
@media (max-width:1100px){.library-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:850px){.library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){
  .host-source-tab{font-size:12px;padding:10px 6px;gap:6px}
  .host-source-tab i{font-size:13px}
  .host-library-section{padding:12px}
  .library-toolbar{display:grid;grid-template-columns:1fr;gap:10px}
  .library-search-wrap{max-width:none}
  .library-types{display:grid;grid-template-columns:1fr 1fr}
  .library-type-tab{justify-content:center;padding:10px 6px}
  .library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:48dvh}
  .library-card-copy{padding:8px 6px 4px}
  .library-card-copy strong{font-size:10px}
  .library-card-actions{padding:6px 5px;gap:4px}
  .library-card-actions button{font-size:10px;padding:7px 2px}
  .library-card-actions button i{display:none}
  .library-detail-header img{width:75px}
  .library-detail-copy h3{font-size:16px}
  .library-episode{align-items:flex-start;flex-direction:column}
  .library-episode-actions{width:100%}
  .library-episode-actions button{flex:1}
  .library-pagination{gap:8px}
}
@media (max-width:390px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.library-art-credit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.45;margin-top:10px}
.library-tmdb-brand{display:inline-flex;align-items:center;gap:6px;color:#f9a0a8;text-decoration:none}
.library-tmdb-brand img{width:28px;height:21px;object-fit:contain}

/* Vewaro 2.02: library and playlist management */
.library-admin-page .member-shell{width:min(1500px,calc(100% - 36px))}
.vlib-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:23px 0 19px}
.vlib-heading h1{font-size:clamp(27px,3vw,36px);margin:7px 0 7px;line-height:1.2}
.vlib-heading p{max-width:820px;font-size:13px;line-height:1.6;color:#9ba8bc;margin:0}
.vlib-heading-actions{display:flex;flex-wrap:wrap;gap:8px}
.vlib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:16px}
.vlib-stats>div{background:linear-gradient(135deg,#141c2a,#101520);border:1px solid #4a252a;border-radius:16px;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:8px}
.vlib-stats span{font-size:12px;font-weight:750;letter-spacing:.025em;color:#9aa7bc;grid-column:1/-1}
.vlib-stats strong{font-size:29px;letter-spacing:-.03em}
.vlib-stats i{align-self:center;font-size:23px;color:#fb707d}
.vlib-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0;padding:6px;border:1px solid #263147;border-radius:15px;background:#111824}
.vlib-tabs a{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;color:#a2afc1;text-decoration:none;border-radius:10px;font-size:12px;font-weight:800;white-space:nowrap;flex:1}
.vlib-tabs a:hover{color:#fff;background:#3a1b1f}
.vlib-tabs a.on{color:#fff;background:linear-gradient(110deg,#c02d3a,#f04452);box-shadow:0 5px 19px #6f40f329}
.vlib-columns{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.15fr);gap:17px;align-items:start}
.vlib-browser,.vlib-editor{min-height:390px}
.vlib-editor{padding:24px}
.vlib-editor-top{margin:0 0 20px}
.vlib-editor-top h2{font-size:24px;line-height:1.3;margin:6px 0 6px;overflow-wrap:anywhere}
.vlib-editor-top p,.vlib-section-intro p{color:#99a6b9;line-height:1.65;font-size:12px;margin:0}
.vlib-search{display:flex;gap:8px;margin-bottom:12px}
.vlib-search input{flex:1;min-width:0}
.vlib-results-label{display:flex;justify-content:space-between;color:#8495ac;font-size:11px;margin:0 0 9px}
.vlib-results{border:1px solid #263045;border-radius:12px;max-height:670px;overflow:auto;background:#0b101a}
.vlib-result{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f4e7e8;padding:10px 11px;border-bottom:1px solid #202939;min-width:0;transition:background .12s}
.vlib-result:last-child{border-bottom:0}
.vlib-result:hover,.vlib-result.selected{background:#21213a;color:#fff}
.vlib-result.selected{box-shadow:inset 3px 0 #ff6572}
.vlib-result img{height:58px;width:43px;object-fit:cover;background:#1d2737;border-radius:6px;border:1px solid #35405b;flex:0 0 auto}
.vlib-result span{flex:1;min-width:0}
.vlib-result strong{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.vlib-result small{display:block;font-size:10px;color:#8795a9;margin-top:5px}
.vlib-result>i{font-size:11px;color:#68768e}
.vlib-empty{padding:36px 18px;text-align:center;color:#8592a6;font-size:13px}
.vlib-pagination{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:14px;color:#8996a9;font-size:12px}
.vlib-pagination a.disabled{opacity:.35;pointer-events:none}
.vlib-form{display:grid;gap:16px}
.vlib-form label{display:grid;gap:7px;color:#e5cdd0;font-size:12px;font-weight:750;min-width:0}
.vlib-form input:not([type=checkbox]):not([type=radio]),.vlib-season-filter select{width:100%;min-width:0;height:43px;font-size:13px;padding:10px 12px;border:1px solid #35415a;background:#090f19;color:#faf1f2;border-radius:9px;box-shadow:none}
.vlib-form input[type=file]{height:auto!important;padding:15px!important;cursor:pointer}
.vlib-form input:focus,.vlib-season-filter select:focus{border-color:#ff5967!important;outline:2px solid #7a51f04d;outline-offset:1px}
.vlib-field-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(90px,1fr);gap:13px}
.vlib-form .vlib-check,.vlib-check{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;color:#adbbcd;font-weight:600;cursor:pointer}
.vlib-check input,.vlib-radio-group input{accent-color:#fa515f;width:17px;height:17px;flex-shrink:0}
.vlib-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:5px 0}
.vlib-delete-form{border-top:1px solid #2b364a;padding-top:19px;margin-top:20px}
.vlib-placeholder{height:320px;display:grid;align-content:center;justify-items:center;text-align:center;padding:22px}
.vlib-placeholder>i{font-size:44px;color:#bf525b;margin-bottom:14px}
.vlib-placeholder h2{font-size:22px;margin:0 0 5px}
.vlib-placeholder p{font-size:13px;color:#9caabe;line-height:1.6;max-width:390px}
.vlib-episodes{margin-top:25px;padding-top:21px;border-top:1px solid #283349}
.vlib-episodes h3,.vlib-episode-editor h3{font-size:17px;margin:3px 0 10px}
.vlib-season-filter{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.vlib-season-filter label{font-size:11px;color:#bbc6d6;white-space:nowrap}
.vlib-season-filter select{flex:1;min-width:0}
.vlib-episode-list{max-height:355px;overflow:auto;border-radius:10px;border:1px solid #4c262b;background:#0c121c}
.vlib-episode-list>a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid #202c3c;color:#f3dde0;text-decoration:none}
.vlib-episode-list>a:hover,.vlib-episode-list>a.selected{background:#25203c}
.vlib-episode-list>a:last-child{border-bottom:0}
.vlib-episode-number{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#262439;color:#ffa6ae;font-size:11px;font-weight:800;flex:0 0 auto}
.vlib-episode-list>a>span:nth-child(2){min-width:0;flex:1}
.vlib-episode-list strong{display:block;font-size:12px;line-height:1.45}
.vlib-episode-list small{display:block;color:#93a0b6;font-size:10px;margin-top:3px}
.vlib-episode-list>a>i{color:#c77f85;font-size:11px}
.vlib-episode-editor{margin-top:18px;padding-top:18px;border-top:1px solid #283349}
.vlib-episode-editor>form:last-child{margin-top:13px}
.vlib-two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vlib-two-up>.admin-panel-card{padding:25px}
.vlib-section-intro{margin-bottom:20px}
.vlib-section-intro h2{margin:6px 0 9px;font-size:23px}
.vlib-radio-group{border:1px solid #29364b;border-radius:12px;padding:14px;display:grid;gap:13px;margin:0}
.vlib-radio-group legend{font-size:11px;text-transform:uppercase;font-weight:800;color:#9ba9bd;padding:0 5px}
.vlib-form .vlib-radio-group label{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.vlib-radio-group strong{display:block;color:#eee;font-size:13px}
.vlib-radio-group small{display:block;color:#91a0b4;font-weight:450;line-height:1.6;font-size:11px;margin-top:3px}
.vlib-form>small{font-size:11px;line-height:1.5;color:#8b9ab0}
.vlib-export-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.vlib-rights{border:1px solid #34344f;background:#161728;border-radius:13px;padding:16px;display:flex;gap:12px;color:#b1accd;margin:15px 0 20px}
.vlib-rights i{color:#ff9aa3;font-size:17px;margin-top:2px}
.vlib-rights p{font-size:12px;line-height:1.65;margin:0}
.vlib-credential-status{display:flex;flex-direction:column;gap:9px;margin:15px 0 22px;font-size:12px;color:#a8b6c8}
.vlib-credential-status i{color:#f67782;margin-right:7px}
.vlib-credential-status strong{color:#eee}
.vlib-queue-items{max-height:720px;overflow:auto;border:1px solid #4c262b;border-radius:12px}
.vlib-queue-item{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #4c262b}
.vlib-queue-item:last-child{border:0}
.vlib-queue-copy{flex:1;min-width:0}
.vlib-queue-copy>a{color:#f3e8e9;text-decoration:none}
.vlib-queue-copy>a:hover{color:#ffa0a8}
.vlib-queue-copy strong{font-size:12px;overflow-wrap:anywhere}
.vlib-queue-copy small{display:block;color:#8896ab;font-size:10px;margin-top:4px}
.vlib-queue-controls{display:flex;align-items:center;gap:4px}
.vlib-queue-controls form{display:flex;gap:4px;margin:0}
.vlib-clear-queue{margin-top:16px}
.admin-quick-links{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.admin-quick-links .btn{font-size:12px}
@media(max-width:1000px){.vlib-columns,.vlib-two-up{grid-template-columns:1fr}.vlib-results{max-height:400px}}
@media(max-width:650px){.vlib-heading{align-items:flex-start;flex-direction:column}.vlib-stats{grid-template-columns:1fr}.vlib-tabs a{flex:1 1 45%;font-size:11px;padding:10px}.vlib-editor{padding:17px}.vlib-field-row{grid-template-columns:1fr}.vlib-form .vlib-check{align-items:flex-start}.vlib-two-up>.admin-panel-card{padding:17px}.vlib-queue-controls .admin-icon-btn{width:27px;min-width:27px!important}.vlib-result img{height:49px;width:37px}}

@media(min-width:960px){.admin-page .admin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Vewaro 2.03 — simplified, single-scroll Add Media workspace */
.host-tools-modal{padding:16px!important;backdrop-filter:blur(7px)}
.host-tools-modal-card{
  width:min(1120px,calc(100vw - 32px))!important;
  height:min(830px,94dvh)!important;
  max-height:94dvh!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex;flex-direction:column;min-height:0;
  background:#171c28;
  border:1px solid #394156;
  box-shadow:0 28px 100px rgba(0,0,0,.58);
}
.host-tools-modal-card .modal-x{z-index:3;top:18px;right:18px}
.host-tools-modal .host-tools-heading{
  flex:0 0 auto;margin:0;padding:22px 64px 17px 26px;
  background:#171c28;
}
.host-tools-modal .host-tools-heading .eyebrow{font-size:11px;letter-spacing:.14em;color:#ff919a}
.host-tools-modal .host-tools-heading h2{font-size:24px;letter-spacing:-.025em;margin:5px 0 5px!important}
.host-tools-modal .host-tools-heading p{font-size:12px;color:#aeb9ce;line-height:1.5}
.host-tools-modal .host-tools-source-tabs{
  flex:0 0 auto;margin:0;padding:0 26px 15px;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  border-bottom:1px solid #2b3347;background:#171c28;
}
.host-tools-modal .host-source-tab{
  min-height:44px;padding:9px 12px;border-radius:10px;
  background:#0f1522;color:#b9c4da;font-size:12px;font-weight:800;
  border-color:#303b51;white-space:nowrap;box-shadow:none;
}
.host-tools-modal .host-source-tab i{font-size:13px;color:#ff8d97}
.host-tools-modal .host-source-tab.active{
  color:#fff;border-color:#fe6774;background:linear-gradient(110deg,#82282f,#451f23);
  box-shadow:inset 0 0 0 1px rgba(255,135,145,.2);
}
.host-tools-modal .host-queue-badge{
  display:inline-grid;place-items:center;border-radius:999px;
  background:#2d3650;color:#f6d3d8;min-width:23px;height:21px;
  padding:0 6px;font-size:11px;line-height:1;font-variant-numeric:tabular-nums;
}
.host-tools-modal .host-source-tab.active .host-queue-badge{background:rgba(255,255,255,.18);color:#fff}
.host-tools-content{
  flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:20px 26px 26px;scrollbar-gutter:stable;
  scrollbar-color:#d64652 #141a26;background:#131925;
}
.host-tools-content>.host-tools-add,
.host-tools-content>.host-tools-saved,
.host-tools-content>.host-tools-playlist{
  margin:0;min-height:0;padding:19px;
  border:1px solid #293348;border-radius:14px;background:#101722;
}
.host-tools-content>.host-tools-playlist{padding:0;overflow:hidden}
.host-tools-content .host-tools-section-title{margin-bottom:15px;gap:11px}
.host-tools-content .host-tools-section-title strong{font-size:14px}
.host-tools-content .host-tools-section-title small{font-size:11px;line-height:1.45;color:#98a8c2}
.host-tools-content .host-tools-icon{width:35px;height:35px;flex-basis:35px}
.host-tools-content .host-library-section{min-height:0}
.host-tools-content .library-toolbar{margin-bottom:10px}
.host-tools-content .library-status{margin:0 0 14px;min-height:16px;font-size:11px;color:#a8b7ce;font-weight:650}
.host-tools-content .library-grid{
  max-height:none;overflow:visible;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;padding:0;
}
.host-tools-content .library-card{border-radius:12px;background:#2e181a;border-color:#30394e}
.host-tools-content .library-card-cover{aspect-ratio:2/3}
.host-tools-content .library-card-cover img{object-fit:cover}
.host-tools-content .library-card-copy{padding:10px 10px 4px;min-height:66px}
.host-tools-content .library-card-copy strong{font-size:12px;line-height:1.35;min-height:32px}
.host-tools-content .library-card-copy span{font-size:11px}
.host-tools-content .library-card-actions{padding:9px;gap:6px}
.host-tools-content .library-card-actions button{font-size:11px;min-height:34px}
.host-tools-content .library-types{flex-shrink:0}
.host-tools-content .library-type-tab{padding:10px 13px;border-radius:9px}
.host-tools-content .library-search-wrap{max-width:410px;min-width:180px}
.host-tools-content .library-pagination{margin-top:4px;padding:16px 0 5px}
.host-tools-content .library-series-detail{max-height:none;overflow:visible}
.host-tools-content .library-detail-header{align-items:flex-start;padding:12px 4px 18px}
.host-tools-content .library-detail-header img{width:110px;flex:0 0 110px;aspect-ratio:2/3}
.host-tools-content .library-episode-list{max-height:none;overflow:visible;gap:8px}
.host-tools-content .library-episode{padding:12px 14px}
.host-tools-content .library-episode-copy strong{font-size:13px}
.host-tools-content .library-episode-copy span{font-size:11px}
.host-tools-content .library-season-tabs{
  overflow-x:auto;flex-wrap:nowrap;padding:0 0 8px;margin-bottom:9px;
  scrollbar-width:thin;scrollbar-color:#5b477b transparent;
}
.host-tools-content .library-season-tab{flex:0 0 auto;padding:9px 13px;font-size:12px}
.host-tools-content .library-movie-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.host-tools-content .library-movie-actions .btn{min-height:42px;padding:10px 16px;font-size:12px}
.host-tools-content .library-movie-detail{margin:10px 0;background:#151e2d;padding:20px;border:1px solid #303c52;border-radius:13px}
.host-tools-content .library-movie-detail img{width:155px;flex:0 0 155px}
.host-tools-content .library-movie-detail h3{font-size:23px;margin:6px 0 9px}
.host-tools-content .library-movie-detail p{font-size:13px;line-height:1.6}
.host-tools-content .library-rights-notice{
  margin:20px 0 0!important;padding:11px 14px;font-size:11px!important;
  border-color:#39394d;background:#1d1e2b;color:#b5c0d3;
}
.host-tools-content .library-art-credit{font-size:11px!important;gap:9px;margin-top:11px!important}
.host-tools-content .library-tmdb-brand img{width:72px;height:24px;object-fit:contain}
.host-tools-content .library-tmdb-brand{gap:9px}
.host-tools-content .host-tools-media-form{display:flex!important;flex-direction:column;gap:12px!important;width:100%!important}
.host-tools-content .host-tools-media-form input{width:100%;min-width:0;min-height:46px;border-radius:9px}
.host-tools-content .host-tools-media-form .media-form-actions{display:flex!important;justify-content:flex-start;flex-wrap:wrap;gap:9px}
.host-tools-content .host-tools-media-form .media-form-actions .btn{min-height:43px;padding:10px 18px}
.host-tools-content .host-tools-playlist .playlist-head{padding:16px 20px;background:#151c2a}
.host-tools-content .host-tools-playlist .playlist-list{max-height:none;overflow:visible}
.host-tools-content .host-tools-playlist .playlist-item{padding:12px 16px}
.host-tools-content .host-queue-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:11px;padding:68px 14px;color:#a4b1c7;
}
.host-tools-content .host-queue-empty>i{font-size:32px;color:#eb707a;margin-bottom:4px}
.host-tools-content .host-queue-empty>strong{font-size:18px;color:#fceeef}
.host-tools-content .host-queue-empty>span{font-size:12px;line-height:1.6;max-width:320px}
.host-tools-content .host-queue-empty>.btn{margin-top:6px}
.host-tools-content .library-load-error{
  grid-column:1/-1;border:1px dashed #5d4b76;background:#1a2030;border-radius:13px;
  padding:34px 18px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:11px;
}
.host-tools-content .library-load-error>i{color:#ffa4ab;font-size:25px}
.host-tools-content .library-load-error>strong{font-size:15px;color:#fee7e9}
.host-tools-content .library-load-error>p{font-size:12px;line-height:1.55;color:#a6b3c8;margin:0;max-width:420px}
.host-tools-content .library-load-error>.btn{margin-top:5px}
@media (max-width:900px){
  .host-tools-content .library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .host-tools-modal .host-source-tab{padding:9px 8px;font-size:11px;gap:7px}
}
@media (max-width:760px){
  .host-tools-modal{padding:0!important}
  .host-tools-modal-card{width:100%!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important}
  .host-tools-modal .host-tools-heading{padding:19px 55px 15px 16px}
  .host-tools-modal .host-tools-heading h2{font-size:22px}
  .host-tools-modal .host-tools-source-tabs{
    display:flex;overflow-x:auto;gap:7px;padding:0 12px 12px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .host-tools-modal .host-tools-source-tabs::-webkit-scrollbar{display:none}
  .host-tools-modal .host-source-tab{flex:0 0 auto;min-height:42px;padding:9px 13px;font-size:12px}
  .host-tools-content{padding:13px 12px max(22px,env(safe-area-inset-bottom));scrollbar-gutter:auto}
  .host-tools-content>.host-tools-add,.host-tools-content>.host-tools-saved{padding:13px}
  .host-tools-content .library-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .host-tools-content .library-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .host-tools-content .library-types{display:grid;grid-template-columns:1fr 1fr}
  .host-tools-content .library-type-tab{justify-content:center}
  .host-tools-content .library-search-wrap{max-width:none}
  .host-tools-content .host-tools-media-form .media-form-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .host-tools-content .host-tools-media-form .media-form-actions .btn{padding:9px 6px}
  .host-tools-content .library-detail-header img{width:75px;flex:0 0 75px}
  .host-tools-content .library-movie-detail img{width:98px;flex:0 0 98px}
  .host-tools-content .library-movie-detail{padding:13px}
}
@media (max-width:470px){
  .host-tools-content .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .host-tools-content .library-card-copy strong{font-size:12px}
  .host-tools-content .library-movie-detail h3{font-size:18px}
  .host-tools-content .library-movie-actions .btn{flex:1;justify-content:center}
  .host-tools-content .library-episode-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .host-tools-content .host-tools-playlist .playlist-head{padding:14px 11px}
  .host-tools-content .host-tools-playlist .playlist-item{padding:10px 8px}
}


/* Vewaro 2.04 — discoverable repeat controls */
.repeat-control{position:relative;flex:0 0 auto}
.repeat-control.active{border-color:#ff5d6b;background:rgba(227,58,72,.25);color:#ffd3d7}
.repeat-control-badge{position:absolute;right:1px;bottom:0;font-size:9px;font-weight:950;color:#fff;line-height:1}
.repeat-control-badge[hidden]{display:none}
.loop-mode-settings{display:grid;gap:8px;padding:12px;border:1px solid rgba(207,98,107,.25);border-radius:12px;background:rgba(10,13,22,.48)}
.loop-mode-settings strong{font-size:12px;color:#ffedef}
.loop-mode-settings select{width:100%;min-height:43px;padding:10px 12px;background:#101521;border:1px solid #474064;border-radius:10px;color:#fff;font-size:12px}
.loop-mode-settings small{font-size:11px;color:#9da8bc;line-height:1.5}
.library-movie-actions .btn,.library-batch-actions .btn{white-space:normal}
@media (max-width:680px){.repeat-control{min-width:33px;padding:0 8px}.library-batch-actions{display:grid;grid-template-columns:minmax(0,1fr)}.library-batch-actions>button{width:100%}}


/* =========================================================
   Vewaro 2.06 — CINEMA BRAND / USER-SUPPLIED IDENTITY
   Colour and polish only: existing room, chat, queue and API
   behaviour is preserved. All controls retain their handlers.
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#090a0d;--panel:#121318;--panel2:#1a1b21;--line:#303139;
  --text:#f7f7f8;--muted:#a6aab5;--accent:#eb1729;--accent2:#ff4954;
  --brand-cyan:#fa3545;--brand-purple:#eb1729;
  --shadow:0 22px 54px rgba(0,0,0,.42);
}
html,body{background:radial-gradient(ellipse 65% 49% at 8% -20%,rgba(125,12,28,.23),transparent 75%),radial-gradient(ellipse 55% 40% at 100% 5%,rgba(89,12,25,.12),transparent 80%),#090a0d;color:#f7f7f8}
button,input,select,textarea{font-family:inherit}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #ff6672!important;outline-offset:3px}
input:focus,select:focus,textarea:focus{border-color:#eb2736!important;box-shadow:0 0 0 3px rgba(226,28,48,.16)!important}
a:hover{transition:color .14s ease}
.eyebrow{color:#ff8993}
.site-header,.member-site-header,.room-header{background:rgba(12,12,16,.95)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(18px);box-shadow:0 5px 24px rgba(0,0,0,.15)}
.brand-logo{display:block!important;width:218px;height:auto;max-height:67px;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 14px rgba(0,0,0,.2))}
.vewaro-header .brand-logo,.public-rooms-header .brand-logo{width:218px;max-height:67px}
.member-site-header .brand-logo{width:210px;max-height:68px}
.room-header .brand-logo-full{width:184px;max-height:60px}
.room-header .brand-logo-icon{width:48px;height:48px;object-fit:contain}
.auth-logo{width:min(275px,90%);max-height:none}
.vewaro-header{min-height:86px!important}
.home-account-nav,.member-site-nav{background:rgba(22,22,28,.96)!important;border:1px solid #343239!important;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.home-account-nav a,.member-site-nav a{color:#dfe0e5!important}
.home-account-nav a:hover,.member-site-nav a:hover{color:white!important;background:#2a1c20!important}
.home-account-nav .join-link,.btn.primary{color:#fff!important;background:linear-gradient(130deg,#ed172b,#b80e21)!important;border:1px solid rgba(255,113,125,.28)!important;box-shadow:0 6px 18px rgba(195,12,32,.18)}
.btn.primary:hover,.home-account-nav .join-link:hover{background:linear-gradient(125deg,#fb273a,#c50e24)!important;filter:none;box-shadow:0 9px 22px rgba(226,15,38,.27)}
.btn.secondary,.btn.subtle{background:#202026;color:#f2f2f4;border:1px solid #3a373e}
.btn.secondary:hover,.btn.subtle:hover{background:#2b272b;border-color:#625058}
.site-header a,.room-header a{transition:border-color .2s,background .2s}
.hero-card,.player-card,.invite-card,.media-card,.chat-column,.auth-card{background-color:#131419;border-color:#302b31}
.hero-card:before{background:rgba(210,15,40,.14)}
.vewaro-home{background:radial-gradient(circle at 10% 5%,rgba(180,22,39,.16),transparent 33%),radial-gradient(circle at 90% 31%,rgba(133,19,36,.11),transparent 34%),#0b0b0f}
.v137-hero{isolation:isolate}
.v137-hero-visual{filter:drop-shadow(0 20px 34px rgba(0,0,0,.35))}
.v140-hero-image{border-radius:20px}
.v137-start-card{border-color:rgba(255,255,255,.09)!important;box-shadow:0 15px 34px rgba(0,0,0,.19)}
.v137-start-card:hover{border-color:rgba(235,23,42,.33)!important}
.room-shell{gap:16px}
.player-card{border-radius:17px;overflow:hidden}
.player-wrap{background:#000}
.room-header .room-meta button:hover,.room-header .room-meta a:hover{border-color:#903744}
.chat-column{background:#121317!important}
:where(.media-modal,.settings-modal,.host-tools-modal-card,.modal-card){box-shadow:0 34px 100px rgba(0,0,0,.66)}
.host-tools-modal-card{border:1px solid #453239!important;background:#17171b!important;border-radius:20px!important}
.host-tools-modal .host-tools-heading{background:linear-gradient(100deg,#1c171b,#16181e)!important}
.host-tools-modal .host-source-tab.active{background:linear-gradient(100deg,#8e1727,#491a24)!important;border-color:#db3747!important;color:white!important}
.host-tools-modal .host-source-tab.active i{color:#fff!important}
.host-tools-content{background:#141419!important}
.host-tools-content>.host-tools-add,.host-tools-content>.host-tools-saved,.host-tools-content>.host-tools-playlist{background:#18191f!important;border-color:#323039!important}
.host-tools-content .library-card{background:#1b1c21!important;border-color:#37333b!important}
.host-tools-content .library-card:hover{border-color:#e12c3d!important;transform:translateY(-2px)}
.library-card-actions button:first-child,.library-episode-actions button:first-child{background:#c9122a!important;border-color:#c9122a!important}
.host-tools-content .library-search-wrap input{background:#0f1014;border-color:#3c333a}
.host-tools-content .library-rights-notice{background:#231e21!important;border-color:#59323d!important;color:#e8ced3}
.host-tools-content .host-tools-playlist .playlist-head{background:#1a1a1f!important}
.host-tools-content .host-queue-empty>i{color:#ff6c76}
.host-tools-modal .host-source-tab{transition:border-color .16s,background .16s}
.host-tools-modal .host-source-tab:hover{border-color:#b53a46}
:where(.host-tools-content,.playlist-list,.library-episode-list){scrollbar-color:#92323f #151519}
.repeat-control.active{border-color:#e1273b;background:rgba(201,17,42,.2);color:#fff}
.loop-mode-settings{border-color:#6b303b;background:#1b171c}
.loop-mode-settings select{border-color:#713541}
.site-legal-footer{border-color:rgba(255,255,255,.08)}
/* Keep primary actions distinct without painting every content surface red. */
@media(max-width:760px){
 .vewaro-header .brand-logo,.public-rooms-header .brand-logo{width:155px;max-height:58px}
 .member-site-header .brand-logo{width:158px;max-height:58px}
 .room-header .brand-logo-full{width:145px;max-height:52px}
 .room-header .brand-logo-icon{width:42px;height:42px}
 .vewaro-header{min-height:68px!important}
 .host-tools-modal-card{border-radius:14px!important}
}

/* 2.06 responsive account navigation: prevent overlap with the wider cinema logo. */
@media(max-width:760px){
 html.account-document .member-site-header{
  min-height:0!important;height:auto!important;display:flex!important;
  flex-direction:column!important;align-items:stretch!important;
  width:calc(100% - 24px)!important;gap:9px!important;padding:10px 0 12px!important;
 }
 html.account-document .member-site-header .vewaro-brand{align-self:flex-start}
 html.account-document .member-site-nav{
  display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-start!important;width:100%;max-width:100%;overflow-x:auto;
  scrollbar-width:thin;scrollbar-color:#72333d transparent;overscroll-behavior-x:contain;
 }
 html.account-document .member-site-nav a{flex:0 0 auto!important;white-space:nowrap!important;gap:6px!important}
 html.account-document .member-site-nav a span{display:inline!important}
}
@media(max-width:760px){
 html.account-document .member-site-header .member-site-nav{
   display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
   gap:4px!important;overflow:visible!important;justify-content:stretch!important;
   white-space:normal!important;padding:5px!important;
 }
 html.account-document .member-site-header .member-site-nav a{
   display:flex!important;align-items:center!important;justify-content:center!important;
   width:auto!important;min-width:0!important;max-width:none!important;
   margin:0!important;padding:9px 5px!important;font-size:11px!important;
   min-height:36px!important;line-height:1.2!important;white-space:nowrap!important;
 }
}


/* =========================================================
   Vewaro 2.08 — full-width account navigation header
   The header was constrained to the same max-width as the
   forms. Keep those forms centred, but stretch the header.
   Covers login, registration, password reset, dashboard,
   admin, and the other pages using account_page_start().
   ========================================================= */
html.account-document body.account-page > .member-site-header {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding-inline:clamp(16px, 2.7vw, 48px)!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
}
/* Preserve the responsive stacked/three-column navigation
   used on narrow devices, but make its containing bar edge-to-edge. */
@media (max-width:760px) {
    html.account-document body.account-page > .member-site-header {
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:12px 14px!important;
    }
}