.web-player{position:fixed;background:#050409;color:#eeeef1;z-index:1000;overflow:hidden;--subtitle-size:24px;font-family:inherit}
.web-player.expanded{inset:0}.web-player.mini{z-index:20;border-radius:12px}.web-player video{width:100%;height:100%;object-fit:contain;display:block}.web-player video::cue{font-size:var(--subtitle-size);background:#0008;color:#fff}
.web-player-top{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:18px;padding:22px 28px 44px;background:linear-gradient(#050409c9,transparent);transition:opacity .2s;z-index:3}
.web-player-title{font-size:clamp(14px,1.35vw,22px);font-weight:500;text-shadow:0 1px 5px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web-player .web-icon{padding:0;min-width:46px;width:46px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:#eeeef1;cursor:pointer;flex-shrink:0;box-shadow:none}
.web-icon svg{width:25px;height:25px;pointer-events:none}.web-player .web-icon:hover,.web-player .web-icon:focus-visible{background:#5f458966;color:#c9b5ff}.web-player button:focus-visible,.web-player input:focus-visible{outline:2px solid #cbb9ff;outline-offset:3px}
.web-controls{position:absolute;inset:auto 0 0;padding:68px 30px 24px;background:linear-gradient(transparent,#050409b8 50%,#050409ed);transition:opacity .25s;z-index:3}
.web-time-row{display:flex;align-items:center;gap:20px;margin-bottom:10px}.web-clock{font-variant-numeric:tabular-nums;font-size:13px;min-width:115px;white-space:nowrap}.web-player .web-seek{width:100%;height:4px;min-height:4px;appearance:none;-webkit-appearance:none;border:0;border-radius:8px;padding:0;margin:14px 0;background:linear-gradient(to right,#aa87ff 0 var(--played,0%),#796d90 var(--played,0%) var(--buffered,0%),#393043 var(--buffered,0%) 100%);cursor:pointer;accent-color:#a787ff}
.web-seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#a787ff;border:0}.web-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#a787ff;border:0}.web-seek:hover::-webkit-slider-thumb{width:16px;height:16px}
.web-control-row{display:flex;align-items:center;gap:8px}.web-control-space{flex:1}.web-player .web-next{display:block;margin:0 0 12px auto;padding:11px 18px;color:#fff;background:#0009;border:1px solid #ffffff1f;border-radius:7px;font-size:14px}.web-player .web-next[hidden]{display:none}
.web-player.controls-hidden .web-controls,.web-player.controls-hidden .web-player-top{opacity:0;pointer-events:none}.web-player.controls-hidden{cursor:none}.web-player.is-loading .web-controls{opacity:0;pointer-events:none}
.web-player.mini .web-controls,.web-player.mini .web-player-top{display:none}.live-player .web-time-row{display:none}
.web-loading{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#050409;pointer-events:none;z-index:1}.web-loading[hidden]{display:none}.web-loading-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.43)}.web-loading:after{content:'';position:absolute;inset:0;background:#0b091829}.web-loading-logo{position:relative;z-index:2;width:55%;text-align:center;font-size:clamp(22px,4vw,64px);font-weight:750;line-height:1.15;animation:logo-pulse 2.2s ease-in-out infinite}.web-loading-logo img{max-width:100%;max-height:19vh;object-fit:contain}.logo-base{opacity:.25}.logo-fill{position:absolute;inset:0;clip-path:inset(0 100% 0 0);animation:logo-fill 2.2s linear infinite;color:white}.web-loading.after-frame{background:transparent}.web-loading.after-frame .web-loading-backdrop,.web-loading.after-frame:after{display:none}.web-loading.after-frame .web-loading-logo{width:30%;font-size:clamp(18px,3vw,44px)}
@keyframes logo-fill{to{clip-path:inset(0 0 0 0)}}@keyframes logo-pulse{50%{transform:scale(1.025);opacity:1}0%,100%{opacity:.8}}
.web-player-message{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,80%);background:#14111deb;border:1px solid #ffffff14;border-radius:12px;padding:24px;text-align:center;box-shadow:0 20px 80px #0006;font-size:16px}.web-player-message[hidden]{display:none}.web-player-message button{background:#8555df;color:white;border:0;padding:12px 18px;border-radius:8px;font-size:14px}
.web-menu{position:absolute;z-index:5;right:28px;bottom:125px;width:min(390px,calc(100% - 40px));max-height:65%;overflow:auto;background:#17131eef;border:1px solid #ffffff18;box-shadow:0 16px 60px #0008;border-radius:12px;padding:10px;backdrop-filter:blur(16px);cursor:auto}.web-menu-head{display:flex;align-items:center;padding:4px 8px 10px;gap:12px;border-bottom:1px solid #ffffff14;margin-bottom:6px}.web-menu h2{font-size:18px;margin:0;flex:1}.web-menu p{font-size:14px;line-height:1.8;margin:14px;white-space:pre-line}.web-player .web-menu-choice{display:block;text-align:left;border:0;background:transparent;color:#eeeef1;border-radius:7px;width:100%;padding:13px 16px;font-size:15px;margin:2px 0}.web-player .web-menu-choice:hover,.web-player .web-menu-choice.selected{background:#68459455;color:#d9c9ff}.web-menu input[type=range]{width:calc(100% - 32px);margin:20px 16px;accent-color:#a787ff}.web-player.mini .web-loading-logo{font-size:18px;width:65%}
body.auth #workspace{min-height:100vh}
@media(max-width:700px){#sidebar{width:60px}#workspace{margin-left:60px}.web-player-top{padding:12px 12px 36px;gap:8px}.web-controls{padding:50px 14px 12px}.web-control-row{gap:0}.web-player .web-icon{width:36px;min-width:36px;height:40px}.web-icon svg{width:22px;height:22px}.web-time-row{gap:12px}.web-clock{font-size:11px;min-width:95px}.web-menu{right:14px;bottom:108px}.web-player-title{font-size:14px}.tv-layout{grid-template-columns:20% 48% 32%}}
@media(prefers-reduced-motion:reduce){.web-loading-logo,.logo-fill{animation:none}.logo-fill{clip-path:none}.web-controls,.web-player-top{transition:none}}
/* Browser rails: native touch/trackpad scrolling plus mouse drag. */
.rail,.season-rail,.episode-rail{touch-action:pan-x pan-y;overflow-x:auto;scroll-snap-type:none;scroll-behavior:auto;cursor:grab;-webkit-overflow-scrolling:touch}
.rail img,.season-rail img,.episode-rail img{-webkit-user-drag:none;user-select:none}
.rail.is-dragging,.season-rail.is-dragging,.episode-rail.is-dragging{cursor:grabbing;user-select:none}
.is-dragging *{cursor:grabbing!important;user-select:none}
.web-subtitle-panel{width:min(900px,94vw);max-height:75vh;background:#211c2c;border:1px solid #58456d;border-radius:12px;right:3%;bottom:100px}.web-subtitle-columns{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:18px}.web-subtitle-columns section{min-width:0;max-height:310px;overflow:auto}.web-subtitle-columns h3{font-size:14px;color:#c7bbd8;padding:8px}.web-subtitle-columns small{display:block;font-size:11px;color:#b4a9c4;margin-top:4px}.web-subtitle-adjust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:10px 4px;gap:6px}.web-subtitle-adjust>span{width:100%;font-size:13px}.web-subtitle-adjust button{background:#3d2c5b;border:1px solid #785ba1;border-radius:8px;color:white;width:32px;height:30px}.web-menu progress{width:100%;accent-color:#9b73ff}.web-menu-choice.selected{background:#493363}.web-subtitle-columns .web-menu-choice{font-size:14px}@media(max-width:650px){.web-subtitle-columns{grid-template-columns:1fr}.web-subtitle-columns section{max-height:190px}.web-subtitle-panel{bottom:85px;max-height:70vh}}
/* Web: channels and episodes are vertical, touch-scrollable lists. */
.tv-channels{display:flex;flex-direction:column;gap:8px;grid-template-columns:none;grid-auto-rows:auto;overflow-y:auto;overflow-x:hidden;align-content:start}
.tv-channel{display:flex;flex-direction:row;align-items:center;flex:0 0 auto;width:100%;height:auto;min-height:104px;padding:10px;gap:14px;text-align:left}
.tv-channel .channel-logo{width:92px;height:76px;min-height:76px;flex:0 0 92px;display:flex;align-items:center;justify-content:center}
.tv-channel .channel-logo img{width:84px;height:68px;max-width:84px;max-height:68px;object-fit:contain}
.tv-channel .channel-labels{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto auto;flex:1;min-width:0;gap:4px 8px}
.tv-channel .channel-labels strong{grid-column:1/-1;height:auto;min-height:0;font-size:14px;line-height:1.35;white-space:normal}
.tv-channel .channel-labels .epg-label{font-size:10px;line-height:1.5}.tv-channel .channel-now,.tv-channel .channel-next{font-size:12px;line-height:1.4;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.episode-rail{display:flex;flex-direction:column;gap:10px;overflow-x:hidden;overflow-y:auto;max-height:calc(100dvh - 300px);min-height:180px;scroll-snap-type:none;touch-action:pan-y;padding:8px;scrollbar-width:thin}
.episode-rail .episode-card{display:grid;grid-template-columns:clamp(110px,16vw,185px) minmax(0,1fr);grid-template-rows:auto 1fr;flex:0 0 auto;width:100%;padding:10px;gap:6px 14px;min-height:110px;align-items:start}
.episode-rail .episode-card img{grid-row:1/3;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.episode-rail .episode-card strong{font-size:14px;line-height:1.35;-webkit-line-clamp:2}.episode-rail .episode-card .episode-description{font-size:12px;line-height:1.45;-webkit-line-clamp:4}
@media(max-width:650px){.episode-rail{max-height:55dvh}.episode-rail .episode-card{grid-template-columns:110px minmax(0,1fr)}.tv-channel .channel-logo{flex-basis:72px;width:72px}.tv-channel .channel-logo img{max-width:68px}.episode-rail .episode-card .episode-description{font-size:11px}}