:root {
  color-scheme: dark;
  --bg: #08090c;
  --panel: #111318;
  --soft: #1a1d23;
  --line: rgba(255,255,255,.1);
  --text: #f5f5f3;
  --muted: #a0a3aa;
  --accent: #ff4f62;
  --accent-2: #ff8d64;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shell { min-height: 100dvh; display: grid; grid-template-rows: 68px minmax(0,1fr); background: radial-gradient(circle at 35% 10%, #19131b 0, transparent 34%), var(--bg); }
.topbar { height: 68px; padding: 0 clamp(18px, 3vw, 42px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(8,9,12,.82); backdrop-filter: blur(18px); z-index: 20; }
.brand { color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 760; letter-spacing: -.5px; }
.brand > span:last-child span { color: var(--accent); }
.brand-mark { width: 29px; height: 29px; border-radius: 9px; background: linear-gradient(140deg,var(--accent),var(--accent-2)); display: grid; place-items: center; position: relative; box-shadow: 0 8px 24px rgba(255,79,98,.28); }
.brand-mark i { position: absolute; width: 3px; border-radius: 3px; background: white; transform: rotate(-15deg); }
.brand-mark i:first-child { height: 13px; left: 10px; }.brand-mark i:last-child { height: 9px; right: 9px; }
.top-actions { display: flex; align-items: center; gap: 11px; }.episode-count { color: var(--muted); font-size: 12px; padding-right: 5px; }
.icon-button,.avatar { border: 1px solid var(--line); background: rgba(255,255,255,.045); cursor: pointer; }
.icon-button { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 11px; font-weight: 800; background: linear-gradient(145deg,#343844,#17191f); }
.stage { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1px; }
.player-column { min-width: 0; display: grid; place-items: center; background: #030405; position: relative; }
.video-wrap { height: 100%; width: min(100%, calc((100dvh - 68px) * 16 / 9)); max-height: calc(100dvh - 68px); position: relative; overflow: hidden; background: #000; isolation: isolate; cursor: default; }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.ambient { position: absolute; inset: -15%; z-index: 0; background: radial-gradient(circle at 50% 25%, #544036, #0f1217 56%, #050506 74%); filter: saturate(1.1); transition: background .5s; }
.shade { z-index: 2; pointer-events: none; position: absolute; left: 0; right: 0; }.shade-top { top: 0; height: 20%; background: linear-gradient(#0008,transparent); }.shade-bottom { bottom: 0; height: 52%; background: linear-gradient(transparent,#000 96%); }
.now-playing { position: absolute; z-index: 3; left: clamp(18px,4vw,54px); bottom: 112px; width: min(620px, calc(100% - 140px)); text-shadow: 0 2px 18px #000; }
.now-playing > p:first-child { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.now-playing h1 { margin: 0; font-size: clamp(28px,4.6vw,58px); letter-spacing: -.04em; line-height: 1.05; }.now-playing > p:not(:first-child) { margin: 12px 0; max-width: 540px; color: #d5d6d9; font-size: 14px; line-height: 1.7; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }.tags span { padding: 5px 9px; border-radius: 999px; font-size: 11px; color: #e5e5e5; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.22); backdrop-filter: blur(5px); }
.quick-actions { position: absolute; z-index: 5; right: 22px; bottom: 108px; display: grid; gap: 18px; }.quick-actions button { border: 0; background: none; display: grid; justify-items: center; gap: 5px; font-size: 10px; cursor: pointer; color: #f5f5f5; text-shadow: 0 1px 8px #000; }.quick-actions svg { width: 26px; height: 26px; fill: rgba(0,0,0,.25); stroke: white; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 5px #000); }.quick-actions button.active svg { fill: var(--accent); stroke: var(--accent); }
.controls { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; padding: 10px 22px 18px; transition: opacity .25s, transform .25s; }.video-wrap.playing:not(:hover) .controls { opacity: 0; transform: translateY(8px); }.video-wrap.playing:not(:hover) { cursor: none; }
.progress-row { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; font-size: 10px; color: #d1d1d2; font-variant-numeric: tabular-nums; }
.progress { height: 18px; position: relative; display: flex; align-items: center; }.progress::before { content:""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 8px; background: rgba(255,255,255,.25); }.progress-fill { position: absolute; left: 0; width: 0; height: 3px; border-radius: 8px; background: var(--accent); pointer-events: none; }.progress input { appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; z-index: 1; cursor: pointer; }.progress input::-webkit-slider-thumb { appearance:none; width: 11px; height:11px; border-radius:50%; background:white; box-shadow:0 0 0 3px #ff4f6260; }.progress input::-moz-range-thumb { width:11px;height:11px;border:0;border-radius:50%;background:white; }
.control-row { margin-top: 3px; display: flex; justify-content: space-between; align-items: center; }.control-cluster { display: flex; align-items: center; gap: 2px; }.control-icon,.speed { height: 38px; border:0; background:none; cursor:pointer; display:grid;place-items:center; }.control-icon { width:38px; }.control-icon svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }.control-icon .play-icon { fill:currentColor;stroke:none; }.pause-icon,.volume-icon { display:none; }.playing .play-icon,.sound-on .muted-icon { display:none; }.playing .pause-icon,.sound-on .volume-icon { display:block; }.speed { padding:0 10px;font-size:11px;font-weight:700; }
.sound-gate { position:absolute; z-index:7; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.22); padding:12px 17px;border-radius:999px;background:rgba(0,0,0,.62);backdrop-filter:blur(12px);display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;transition:.2s; }.sound-gate:hover { transform:translate(-50%,-50%) scale(1.03); }.sound-gate svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}.sound-on .sound-gate {display:none;}
.loading {position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);display:none}.loading.show{display:block}.loading span{display:block;width:38px;height:38px;border:2px solid #ffffff30;border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.play-flash {position:absolute;z-index:8;left:50%;top:50%;width:68px;height:68px;border-radius:50%;background:#0008;display:grid;place-items:center;transform:translate(-50%,-50%) scale(.8);opacity:0;pointer-events:none}.play-flash.show{animation:flash .4s ease}.play-flash svg{width:28px;fill:#fff}@keyframes flash{50%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.playlist-panel { min-height:0; overflow:hidden; display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:linear-gradient(180deg,#14161b,#0e1014);padding:24px 18px 16px;border-left:1px solid var(--line); }.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;padding:3px 5px 18px}.panel-heading p,.dialog-head p{margin:0 0 5px;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.panel-heading h2,.dialog-head h2{margin:0;font-size:20px;letter-spacing:-.02em}.close-panel,.dialog-head button{display:none;border:0;background:none;color:var(--muted);font-size:28px;line-height:1;cursor:pointer}.panel-grabber{display:none}.autoplay-row{display:flex;align-items:center;justify-content:space-between;margin:0 3px 16px;padding:12px 13px;background:#ffffff05;border:1px solid var(--line);border-radius:13px}.autoplay-row div{display:grid;gap:3px}.autoplay-row strong{font-size:12px}.autoplay-row div span{color:var(--muted);font-size:9px}.switch input{display:none}.switch span{width:34px;height:20px;border-radius:20px;background:#383b43;display:block;position:relative;cursor:pointer;transition:.2s}.switch span::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span::after{transform:translateX(14px)}
.episode-list{overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#34363c transparent}.episode-card{width:100%;text-align:left;border:1px solid transparent;background:transparent;padding:10px;border-radius:13px;display:grid;grid-template-columns:73px 1fr auto;gap:11px;align-items:center;cursor:pointer;margin-bottom:4px}.episode-card:hover{background:#ffffff06}.episode-card.active{background:#ffffff09;border-color:#ffffff12}.episode-thumb{height:45px;border-radius:8px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#59403a,#171b22)}.episode-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#0007,transparent)}.episode-thumb span{z-index:1;font-size:11px;font-weight:800}.episode-copy{min-width:0}.episode-copy strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.episode-copy span{display:block;color:var(--muted);font-size:9px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.episode-status{font-size:9px;color:var(--muted)}.episode-card.active .episode-status{color:var(--accent)}
.import-secondary{margin-top:12px;width:100%;border:1px dashed #ffffff20;border-radius:11px;background:#ffffff03;padding:11px;color:#c9cbd0;font-size:11px;cursor:pointer}.source-note{text-align:center;color:#62656e;font-size:9px;margin:10px 0 0}
.scrim{display:none;position:fixed;inset:0;background:#0009;z-index:40;backdrop-filter:blur(4px)}
dialog{border:0;padding:0;background:transparent;color:var(--text);width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 28px)}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-card{background:#17191e;border:1px solid #ffffff16;border-radius:20px;padding:24px;box-shadow:0 28px 80px #000;overflow:auto}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start}.dialog-head button{display:block}.tab-row{display:flex;gap:4px;margin:22px 0 18px;background:#0e0f12;padding:4px;border-radius:11px}.tab{flex:1;border:0;border-radius:8px;padding:9px 5px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer}.tab.active{background:#292c33;color:#fff}.tab-pane{display:none}.tab-pane.active{display:grid;gap:14px}.tab-pane label{display:grid;gap:7px;font-size:11px;font-weight:700}.tab-pane input,.tab-pane textarea{width:100%;border:1px solid #ffffff14;background:#0e1013;color:#fff;border-radius:10px;padding:12px;resize:vertical}.tab-pane p{color:var(--muted);font-size:10px;line-height:1.6;margin:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.dialog-actions button,.primary{border:0;border-radius:10px;padding:11px 17px;background:#2a2c32;cursor:pointer;font-size:11px}.dialog-actions .primary,.primary{background:linear-gradient(135deg,var(--accent),#ef3458);font-weight:700}.file-drop{border:1px dashed #ffffff28;border-radius:14px;padding:28px;text-align:center;justify-items:center}.file-drop input{position:absolute;opacity:0;pointer-events:none}.file-drop span{color:#eee}.file-drop small{color:var(--muted);font-weight:400}.info-card>p,.info-card li{font-size:12px;line-height:1.7;color:#c8cad0}.info-card ul{padding-left:20px}.wide{width:100%;margin-top:10px}
.toast{position:fixed;z-index:90;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;background:#f5f5f4;color:#111;padding:10px 16px;border-radius:999px;font-size:11px;font-weight:700;pointer-events:none;transition:.25s;box-shadow:0 10px 30px #0008}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){
  .shell{grid-template-rows:52px minmax(0,1fr)}.topbar{height:52px;padding:0 15px;background:#090a0d}.brand{font-size:17px}.brand-mark{width:25px;height:25px;border-radius:7px}.episode-count{display:none}.icon-button,.avatar{width:32px;height:32px}.stage{display:block}.player-column{height:calc(100dvh - 52px)}.video-wrap{width:100%;height:100%;max-height:none}.video-wrap video{object-fit:cover}.now-playing{left:18px;bottom:112px;width:calc(100% - 84px)}.now-playing h1{font-size:32px}.now-playing>p:not(:first-child){font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.quick-actions{right:10px;bottom:105px}.controls{padding:7px 12px max(10px,env(safe-area-inset-bottom))}.playlist-panel{position:fixed;z-index:50;left:0;right:0;bottom:0;height:min(74dvh,620px);border:1px solid #ffffff15;border-radius:22px 22px 0 0;padding:8px 14px max(14px,env(safe-area-inset-bottom));transform:translateY(103%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 70px #000}.playlist-panel.open{transform:none}.scrim.show{display:block}.panel-grabber{display:block;width:38px;height:4px;background:#555962;border-radius:4px;margin:2px auto 9px}.panel-heading{padding-bottom:12px}.close-panel{display:block}.episode-card{grid-template-columns:78px 1fr auto}.video-wrap.playing:not(:hover) .controls{opacity:1;transform:none}.video-wrap.playing:not(:hover){cursor:default}
}
@media (max-width:900px) and (orientation:landscape){
  .shell{grid-template-rows:0 minmax(0,1fr)}.topbar{opacity:0;pointer-events:none;height:0;overflow:hidden}.player-column{height:100dvh}.video-wrap{width:100%;max-width:none}.now-playing{bottom:88px}.quick-actions{bottom:88px;grid-auto-flow:column}.quick-actions button span{display:none}
}
@media (max-width:480px){.tags span:nth-child(n+3){display:none}.control-row .control-cluster:first-child .control-icon:nth-child(2){display:none}.dialog-card{padding:19px}.quick-actions{gap:15px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}