:root{
  --bg:#000; --panel:#1E1E1E; --panel2:#111; --text:#fff; --hint:#ccc; --accent:#2A2A2A;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}

.root{display:flex;height:100vh}
.left{flex:1;padding:16px}
.left-inner{height:100%;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border-radius:12px;padding:16px;display:flex;flex-direction:column}
.topbar{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.btn{background:#2a2a2a;color:#fff;border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.toggle{background:#2a2a2a;color:#fff;border:0;border-radius:10px;padding:8px 12px;cursor:pointer}
.toggle[data-on="true"]{background:#3b3b3b}
.input{flex:1;background:#151515;color:#fff;border:1px solid #333;border-radius:10px;padding:10px 12px}
.spinner, select{background:#151515;color:#fff;border:1px solid #333;border-radius:10px;padding:8px}

.local-row{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}

.list{flex:1;overflow:auto}
.card{display:flex;align-items:center;gap:12px;background:var(--panel);border-radius:12px;margin:4px 0;padding:8px;border:1px solid rgba(255,255,255,.06);cursor:pointer}
.card:hover{outline:2px solid rgba(255,255,255,.08)}
.logo{width:40px;height:40px;border-radius:6px;background:#222;object-fit:contain}
.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav{width:24px;height:24px;display:grid;place-items:center}

.right{flex:1;position:relative}
#videoContainer{position:relative;height:100%;}
video{width:100%;height:100%;background:#000}

.controls {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  opacity:0;                 /* hidden by default */
  pointer-events:none;       /* no interaction when hidden */
  transition:opacity 0.3s ease;
}

.controls.show {
  opacity:1;                 /* visible when .show class is added */
  pointer-events:auto;
}
.ctrl-icons{display:flex;justify-content:space-between;gap:32px;margin:38px auto 0;max-width:900px;padding:0 40px}
.ctrl-icons .iconbtn {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 3em;        /* make icons 3× larger */
  line-height: 1;
}.bottom{background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));padding:8px}
#streamTitle{text-align:center;font-size:24px;margin:4px 0}
#seek{width:100%}
#playerSelector{display:block;margin:8px auto 4px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:10}
.overlay.show{display:flex}
.center-card{width:min(800px,90vw);padding:24px;background:rgba(0,0,0,.5);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
.center-card h2{margin:0 0 16px}
.center-card p{font-size:24px}

dialog{border:0;border-radius:12px;padding:0;max-width:min(900px,95vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg{position:relative;background:#1E1E1E;color:#fff;border-radius:12px}
.dlg .close{position:absolute;right:6px;top:6px}
.tabbar{display:flex;gap:8px;padding:8px;background:#111;border-bottom:1px solid #333}
.tabbar button{padding:8px 10px;border-radius:8px;border:1px solid #333;background:#191919;color:#fff}
.tabbar button[data-active="true"]{background:#2a2a2a}
.dlg-body{padding:12px}
.row{display:flex;gap:8px;align-items:center;margin:8px 0}
.row > *{flex:1}
.btnbar{display:flex;gap:8px;justify-content:center;margin-top:8px;padding:12px;background:#111;border-top:1px solid #333;border-radius:0 0 12px 12px}

.episodes{max-height:50vh;overflow:auto;margin-top:8px}
.ep-item{padding:8px;border:1px solid #333;border-radius:8px;margin:4px 0;cursor:pointer}

.fullscreen .left{display:none}
.fullscreen .right{flex:1}

@media(max-width:1000px){
  .root{flex-direction:column}
  .right{order:-1;height:45vh}
}