*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{min-height:100%;overflow:hidden;font-family:-apple-system,'SF Pro Display','SF Pro Text','Helvetica Neue',system-ui,sans-serif;
  font-size:14px;line-height:1.47059;font-weight:400;letter-spacing:-0.022em;
  background:#000;color:#f5f5f7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  position:fixed;width:100%;height:100%}

:root{--bg:#000;--bg2:#0a0a0c;--bg3:#151517;--surface:#1c1c1e;--surface2:#28282b;--border:#38383a;
  --text:#f5f5f7;--text2:#98989d;--text3:#6e6e73;--accent:#0071e3;--accent2:#0077ed;--green:#30d158;--warn:#ff9f0a;
  --radius:12px;--radius-sm:8px;--radius-pill:999px;--shadow:0 8px 40px rgba(0,0,0,0.5);
  --safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
.hidden{display:none!important}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

input,select,button{font-family:inherit;font-size:inherit}
input[type="text"],select{background:var(--surface);border:1px solid var(--border);color:var(--text);
  padding:10px 14px;border-radius:var(--radius-sm);outline:none;width:100%;transition:border-color .2s}
input[type="text"]:focus,select:focus{border-color:var(--accent)}
input[type="text"]::placeholder{color:var(--text3)}
select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2398989d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:3px;background:var(--surface2);border-radius:2px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;margin-top:-4.5px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
input[type="range"]:focus{outline:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;
  border:none;border-radius:var(--radius-pill);font-size:14px;font-weight:500;cursor:pointer;
  transition:all .2s;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-primary:active{transform:scale(.97)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover,.btn-secondary:active{background:var(--surface2);border-color:var(--text3)}
.btn-block{width:100%;justify-content:center}
.btn-icon{background:none;border:none;color:var(--text2);cursor:pointer;padding:6px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.btn-icon:hover{color:var(--text);background:var(--surface)}
.btn-icon:active{background:var(--surface2)}
.btn-close{background:none;border:none;color:var(--text2);font-size:24px;cursor:pointer;line-height:1;padding:4px;border-radius:6px;transition:color .2s}
.btn-close:hover{color:var(--text)}
.sidebar-toggle{display:none}
.btn-send{width:36px;height:36px;padding:0;flex-shrink:0}

#bg-gradient{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(0,113,227,.08) 0%,transparent 70%)}

/* Lobby */
#lobby{position:relative;z-index:1;justify-content:center;align-items:center;min-height:100vh;min-height:100dvh}
.view{display:none;height:100vh;height:100dvh;width:100vw;width:100dvw}.view.active{display:flex}
.lobby-container{text-align:center;max-width:380px;width:100%;padding:0 28px}
.logo{margin-bottom:44px}
.logo-icon{display:inline-flex;width:56px;height:56px;border-radius:16px;background:var(--accent);
  align-items:center;justify-content:center;color:#fff;margin-bottom:16px}
.logo h1{font-size:34px;font-weight:700;letter-spacing:-.5px;background:linear-gradient(135deg,#f5f5f7 30%,var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tagline{color:var(--text2);margin-top:2px;font-size:15px}
.lobby-form{text-align:left}.field{margin-bottom:14px}
.divider{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:12px;margin:14px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.join-row{display:flex;gap:8px}.join-row input{flex:1;text-align:center}

/* Player View */
#player-view{position:relative;z-index:1;flex-direction:column}

/* Topbar */
#topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;
  padding-top:calc(8px + var(--safe-top));
  background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-shrink:0;
  min-height:48px;border-bottom:1px solid var(--border);z-index:20}
.topbar-left{display:flex;align-items:center;gap:8px}.logo-mark{color:var(--accent);display:flex}
.room-label{font-size:13px;font-weight:500;color:var(--text2);letter-spacing:.02em}
.room-label span{color:var(--accent);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:6px}
.player-chips{display:flex;gap:4px;flex-wrap:wrap;max-width:200px;overflow:hidden}
.player-chip{display:flex;align-items:center;gap:4px;padding:3px 10px;background:var(--surface);
  border-radius:var(--radius-pill);font-size:11px;color:var(--text2);font-weight:500}
.player-chip .dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.player-chip.host{background:rgba(0,113,227,.15);color:var(--accent)}
.player-chip.host .dot{background:var(--accent)}
.player-chip .star{color:var(--accent);margin-left:1px;font-size:10px}

/* Main Layout */
.main-content{display:flex;flex:1;overflow:hidden}

/* Video Area */
.video-area{flex:1;display:flex;align-items:center;justify-content:center;background:#000;position:relative;overflow:hidden}
.no-file-state{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--text3);padding:40px}
.no-file-icon{opacity:.3}
.no-file-state p{font-size:15px;color:var(--text2)}

.video-container{width:100%;height:100%;position:relative;background:#000}
.video-container video{width:100%;height:100%;object-fit:contain;display:block}

/* Video Overlay */
.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s;z-index:5;pointer-events:none}
.video-overlay.visible{opacity:1;pointer-events:auto}
.btn-big-play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s;padding-left:4px}
.btn-big-play:hover,.btn-big-play:active{background:rgba(255,255,255,.22);transform:scale(1.05)}

/* Seek zones */
.seek-zone{position:absolute;top:0;bottom:0;width:35%;background:none;border:none;color:rgba(255,255,255,.5);
  display:flex;align-items:center;cursor:pointer;z-index:4;opacity:0;transition:opacity .2s;pointer-events:auto}
.seek-zone:hover,.seek-zone:focus-visible{opacity:1}
@media(pointer:coarse){.seek-zone{opacity:.35}}
.seek-back{left:0;justify-content:flex-start;padding-left:8px}
.seek-fwd{right:0;justify-content:flex-end;padding-right:8px}

/* Seek zones */
.seek-zone{position:absolute;top:0;bottom:0;width:35%;background:none;border:none;color:rgba(255,255,255,.5);
  display:flex;align-items:center;cursor:pointer;z-index:4;opacity:0;transition:opacity .2s;pointer-events:auto}
.seek-zone:hover,.seek-zone:focus-visible{opacity:1}
@media(pointer:coarse){.seek-zone{opacity:.35}}
.seek-back{left:0;justify-content:flex-start;padding-left:8px}
.seek-fwd{right:0;justify-content:flex-end;padding-right:8px}

/* Seek zones */
.seek-zone{position:absolute;top:0;bottom:0;width:35%;background:none;border:none;color:rgba(255,255,255,.5);
  display:flex;align-items:center;cursor:pointer;z-index:4;opacity:0;transition:opacity .2s}
.seek-zone:hover,.seek-zone:focus-visible{opacity:1}
.video-container:hover .seek-zone,.video-container.show-controls .seek-zone{opacity:0}
.seek-back{left:0;justify-content:flex-start;padding-left:8px}
.seek-fwd{right:0;justify-content:flex-end;padding-right:8px}

/* Progress Bar - always visible at bottom */
.progress-wrap{width:100%;height:5px;flex-shrink:0;cursor:pointer;background:rgba(255,255,255,.08);position:relative;pointer-events:auto}
.progress-track{position:relative;width:100%;height:100%}
.progress-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent);transition:width .1s linear}
.progress-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);transition:transform .15s;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:none}
.video-container:hover .progress-wrap,.video-container.show-controls .progress-wrap,
.progress-wrap:hover{height:6px}
.video-container:hover .progress-thumb,.video-container.show-controls .progress-thumb,
.progress-wrap:hover .progress-thumb{transform:translate(-50%,-50%) scale(1)}
.progress-bar{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0}
.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%}

/* Video Controls */
.video-controls{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  padding:44px 14px calc(10px + var(--safe-bottom));opacity:0;transition:opacity .2s;z-index:10;pointer-events:none}
.video-container.show-controls .video-controls{opacity:1;pointer-events:auto}
.controls-main{display:flex;align-items:center;justify-content:space-between;gap:4px}
.controls-left,.controls-right{display:flex;align-items:center;gap:2px}
.ctrl-btn{background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:6px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s;min-width:32px;min-height:32px}
.ctrl-btn:hover,.ctrl-btn:active{color:#fff;background:rgba(255,255,255,.1)}
.time-display{font-size:12px;color:rgba(255,255,255,.7);font-weight:500;letter-spacing:.02em;margin-left:4px;white-space:nowrap}
.time-sep{margin:0 3px;color:rgba(255,255,255,.4)}

/* Volume */
.volume-wrap{display:flex;align-items:center;gap:0;position:relative}
.volume-slider-wrap{width:0;overflow:hidden;transition:width .2s}
.volume-wrap:hover .volume-slider-wrap,.volume-wrap:focus-within .volume-slider-wrap{width:72px}
.volume-bar{width:72px;height:4px;margin:0 4px}
.volume-bar::-webkit-slider-runnable-track{height:4px;border-radius:2px}
.volume-bar::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px}

/* Subtitle Overlay */
.subtitle-overlay{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);max-width:80%;text-align:center;pointer-events:none;z-index:6;--sub-size:24px;--sub-bg:rgba(0,0,0,.6)}
.subtitle-overlay .sub-line{display:block;padding:4px 10px;border-radius:4px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9);font-size:var(--sub-size);background:var(--sub-bg)}
.subtitle-overlay .sub-line i{font-style:italic}
.subtitle-overlay .sub-line b{font-weight:700}
.subtitle-overlay .sub-line u{text-decoration:underline}

/* Sidebar */
.sidebar{width:340px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-tabs .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px 0;
  background:none;border:none;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;
  transition:color .2s;position:relative}
.sidebar-tabs .tab:hover{color:var(--text)}
.sidebar-tabs .tab.active{color:var(--accent)}
.sidebar-tabs .tab.active::after{content:"";position:absolute;bottom:0;left:25%;width:50%;height:2px;
  background:var(--accent);border-radius:1px}

.tab-panel{display:none;flex:1;overflow:hidden;flex-direction:column}
.tab-panel.active{display:flex}

/* Chat */
.chat-messages{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.chat-msg{display:flex;flex-direction:column;gap:1px}
.chat-msg .author{font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.01em}
.chat-msg .author.you{color:var(--green)}
.chat-msg .text{font-size:14px;color:var(--text);word-break:break-word;line-height:1.4}
.chat-msg.system{align-items:center}
.chat-msg.system .text{font-size:12px;color:var(--text3);font-style:italic}
.chat-meta{font-size:10px;color:var(--text3);margin-top:1px;letter-spacing:.02em}
.chat-input-row{display:flex;gap:6px;padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));
  border-top:1px solid var(--border);background:var(--bg2)}

/* Panels */
.panel-toolbar{padding:12px;flex-shrink:0}
.panel-scroll{overflow-y:auto;flex:1}
.panel-section{padding:14px;border-bottom:1px solid var(--border)}
.panel-section h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px}
.current-file{padding:8px 12px;background:var(--surface);border-radius:var(--radius-sm);font-size:13px;
  color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 12px 10px}
.player-list-panel{padding:0 12px 12px}

/* Info Tab */
.info-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2);border-bottom:1px solid var(--border)}
.info-row .info-value{color:var(--text);display:flex;align-items:center;gap:6px}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.info-players{display:flex;flex-direction:column;gap:4px}
.info-player{font-size:13px;color:var(--text);display:flex;align-items:center;gap:6px}
.info-row input[type=range]{flex:1;max-width:100px;height:4px;accent-color:var(--accent)}

/* Subtitles Panel */
.subs-list{display:flex;flex-direction:column;gap:3px}
.sub-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
  background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;font-size:13px}
.sub-item:hover{background:var(--surface2)}
.sub-item.active{background:rgba(0,113,227,.12);border-left:3px solid var(--accent)}
.sub-item.unsupported{opacity:.5;cursor:not-allowed}.sub-item.unsupported:hover{background:transparent;border-color:var(--border)}
.sub-type.warn{color:var(--warn)}
.sub-item .sub-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sub-item .sub-type{font-size:10px;color:var(--text3);flex-shrink:0;margin-left:8px;font-weight:600;letter-spacing:.05em}
.empty-state{color:var(--text3);font-size:13px;text-align:center;padding:16px}

.os-search{display:flex;flex-direction:column;gap:6px}
.os-input-row{display:flex;gap:6px;align-items:stretch}
.os-lang{flex:none;width:56px;padding:8px 20px 8px 8px;font-size:13px}
.os-results{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;margin-top:6px}
.os-result{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surface);
  border-radius:var(--radius-sm);font-size:12px;cursor:pointer;transition:background .15s}
.os-result:hover{background:var(--surface2)}
.os-result .os-filename{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;color:var(--text)}
.os-result .os-lang{color:var(--text3);flex-shrink:0;font-weight:500}

.sub-style-controls{display:flex;flex-direction:column;gap:10px}
.style-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text2)}
.style-row input[type="range"]{width:120px}

/* Modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal-content{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:16px;font-weight:600}
.modal-body{padding:14px 18px;overflow-y:auto;flex:1}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:4px;margin-bottom:10px;font-size:13px;flex-wrap:wrap}
.breadcrumb-item{color:var(--text2);cursor:pointer;transition:color .2s;padding:2px 0}
.breadcrumb-item:hover{color:var(--accent)}
.breadcrumb-item:last-child{color:var(--text);cursor:default}
.breadcrumb-sep{color:var(--text3);font-size:11px}

/* File List */
.file-list{display:flex;flex-direction:column;gap:1px}
.file-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .1s}
.file-item:hover{background:var(--surface)}
.file-item .file-icon{color:var(--text3);flex-shrink:0}
.file-item .file-icon.video{color:var(--accent)}
.file-item .file-icon.folder{color:#ff9f0a}
.file-item .file-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.file-item .file-size{font-size:12px;color:var(--text3);flex-shrink:0}

/* Toast */
.toast-container{position:fixed;bottom:20px;bottom:calc(20px + var(--safe-bottom));right:20px;z-index:999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:12px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:13px;animation:toastIn .25s ease;max-width:300px;pointer-events:auto;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid #ff453a}
.toast.info{border-left:3px solid var(--accent)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Browser ─────────────────────────────────────────── */
.browser-toolbar .browser-nav {
  display: flex; gap: 4px; margin-bottom: 6px;
}
.browser-nav-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text2);
  border-radius: 6px; width: 32px; height: 30px; display: flex;
  align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.browser-nav-btn:hover { background: var(--surface2); color: var(--text); }
.browser-url-row { display: flex; gap: 6px; }
.browser-url-row input { flex: 1; }
.browser-loading { font-size: 12px; color: var(--warn); text-align: center; padding: 4px 0; }
.no-browser-state { padding: 16px; text-align: center; color: var(--text3); font-size: 13px; line-height: 1.5; }

.browser-display-area {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: #000; z-index: 2;
}
.browser-display-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.browser-display-nav { display: flex; gap: 3px; }
.browser-display-url {
  flex: 1; font-size: 12px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface); padding: 5px 10px; border-radius: 4px;
}
.browser-viewport {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; cursor: crosshair;
}
.browser-click-overlay {
  position: absolute; inset: 0; z-index: 5; cursor: crosshair;
}
.browser-frame {
  max-width: 100%; max-height: 100%; object-fit: contain;
  display: block; user-select: none; -webkit-user-drag: none;
}

/* ── Chat Notification ──────────────────────────────── */
.chat-notification {
  position: fixed; top: 56px; right: -360px; z-index: 9999;
  max-width: 320px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  cursor: pointer; transition: right .35s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.chat-notification.visible { right: 16px; }
.chat-notification .notif-author { font-size: 12px; font-weight: 600; color: var(--accent); }
.chat-notification .notif-text { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:fullscreen .chat-notification { top: 12px; }

/* ── Pause Request Modal ────────────────────────── */
.pause-req-modal{position:absolute;top:12px;right:12px;z-index:50;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation:toastIn .25s ease;min-width:220px}
.pause-req-body{display:flex;flex-direction:column;gap:10px}
.pause-req-text{font-size:14px;color:var(--text);line-height:1.4}
.pause-req-actions{display:flex;gap:8px}
.pause-req-actions .btn{padding:6px 16px;font-size:13px;flex:1}

/* ── Fullscreen-only chrome hiding ──────────────────── */
:fullscreen #topbar,
:fullscreen #sidebar,
:fullscreen .sidebar-toggle,
:-webkit-full-screen #topbar,
:-webkit-full-screen #sidebar,
:-webkit-full-screen .sidebar-toggle,
body.is-fullscreen #topbar,
body.is-fullscreen #sidebar,
body.is-fullscreen .sidebar-toggle {
  display: none !important;
}

/* ── Responsive ────────────────────────────────────── */
@media(max-width:860px){
  .sidebar-toggle{display:flex!important}
  .sidebar{position:fixed;top:48px;right:-340px;width:300px;height:calc(100dvh - 48px);z-index:30;
    transition:right .3s cubic-bezier(.4,0,.2,1);border-left:1px solid var(--border)}
  .sidebar.open{right:0}
  .sidebar.open+.sidebar-overlay{display:block}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:29}
  .video-controls{padding:36px 10px calc(6px + var(--safe-bottom))}
  .ctrl-btn{padding:5px;min-width:30px;min-height:30px}
  .btn-big-play{width:60px;height:60px}
  .btn-big-play svg{width:28px;height:28px}
  .subtitle-overlay{bottom:65px}
  .subtitle-overlay .sub-line{font-size:16px!important}

}

@media(max-width:480px){
  .topbar{padding:6px 10px;min-height:44px}
  .room-label{font-size:12px}
  .player-chip{padding:2px 8px;font-size:10px}
  .sidebar{width:100%;right:-100%}
  .lobby-container{padding:0 20px}
  .logo h1{font-size:28px}
  .logo-icon{width:48px;height:48px}
  .modal-content{width:95%;max-height:85vh}
  .video-controls{padding:28px 8px calc(4px + var(--safe-bottom))}
  .time-display{font-size:11px}
  .volume-wrap .volume-slider-wrap{display:none}
  .ctrl-btn{padding:4px;min-width:28px;min-height:28px}
}

@media(max-width:860px) and (orientation:landscape){
  .sidebar{top:0;padding-top:40px}
  .sidebar.open{display:flex;width:100%;max-width:100%;height:50dvh;bottom:0;top:auto;padding-top:0}
}