*,*::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:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s;padding-left:3px}
.btn-big-play:hover,.btn-big-play:active{background:rgba(255,255,255,.25);transform:scale(1.05)}

/* Video Controls */
.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.85));
  padding:40px 16px calc(10px + var(--safe-bottom));opacity:0;transition:opacity .25s;z-index:10;pointer-events:none}
.video-container.show-controls .video-controls{opacity:1;pointer-events:auto}
.video-controls .progress-bar{width:100%;height:4px;cursor:pointer;margin-bottom:10px}
.video-controls .progress-bar::-webkit-slider-runnable-track{height:4px}
.video-controls .progress-bar::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px}
.controls-row{display:flex;align-items:center;justify-content:space-between}
.controls-left,.controls-right{display:flex;align-items:center;gap:4px}
.ctrl-btn{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;padding:6px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s;min-width:30px;min-height:30px}
.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-slider-wrap{width:0;overflow:hidden;transition:width .2s}
.controls-right:hover .volume-slider-wrap{width:80px}
.volume-bar{width:80px;height:4px;margin:0 4px}
.volume-bar::-webkit-slider-runnable-track{height:4px}
.volume-bar::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4px}

/* Subtitle Overlay */
.subtitle-overlay{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);max-width:80%;text-align:center;pointer-events:none;z-index:6}
.subtitle-overlay .sub-line{display:inline-block;padding:4px 10px;border-radius:4px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* 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-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)}}

/* ── Landscape / Mobile Mode ───────────────────────── */
body.landscape {
  overflow: hidden !important;
}

body.landscape #player-view {
  flex-direction: column;
}

body.landscape .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 40px;
  min-height: 40px;
  padding: 0 10px;
  background: rgba(0,0,0,.7);
}

body.landscape .topbar .logo-mark,
body.landscape .topbar .room-label {
  display: none;
}

body.landscape .topbar .topbar-left {
  gap: 4px;
}

body.landscape #sidebar {
  display: none !important;
}

body.landscape .main-content {
  padding-top: 0;
  height: 100vh;
  height: 100dvh;
}

body.landscape .video-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

body.landscape .video-container {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}

body.landscape .video-container video {
  object-fit: contain;
}

body.landscape .video-controls {
  padding: 30px 12px calc(8px + var(--safe-bottom));
}

body.landscape .ctrl-btn {
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
}

body.landscape .btn-big-play {
  width: 56px;
  height: 56px;
}

body.landscape .subtitle-overlay {
  bottom: 60px;
}

body.landscape .subtitle-overlay .sub-line {
  font-size: 18px !important;
}

body.landscape .player-chips {
  max-width: 120px;
}

/* ── Responsive ────────────────────────────────────── */
@media(max-width:860px){
  .sidebar-toggle{display:flex!important}
  .sidebar{position:fixed;top:48px;right:-340px;width:300px;height:calc(100vh - 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:30px 10px calc(8px + var(--safe-bottom))}
  .ctrl-btn{padding:5px;min-width:32px;min-height:32px}
  .btn-big-play{width:56px;height:56px}
  .btn-big-play svg{width:26px;height:26px}
  .subtitle-overlay{bottom:55px}
  .subtitle-overlay .sub-line{font-size:16px!important}
  body.landscape .topbar{height:36px;min-height:36px;padding:0 8px}
}

@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:24px 8px calc(4px + var(--safe-bottom))}
  .time-display{font-size:11px}
  .volume-slider-wrap{display:none}
  .ctrl-btn{padding:4px;min-width:28px;min-height:28px}
  body.landscape .ctrl-btn{padding:6px;min-width:32px;min-height:32px}
}

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

/* Full video mode for landscape */
.video-container.full-video {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
}