/* VODs Forever viewer shell. Colors come from --vf-* custom properties (tenant theme). */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--vf-bg);color:var(--vf-text);font-family:var(--vf-font);line-height:1.45;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
a{color:var(--vf-accent)}
img{max-width:100%}
.vf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--vf-surface);position:sticky;top:0;z-index:5}
.vf-brand{display:flex;align-items:center;gap:.6rem;color:var(--vf-text);text-decoration:none;font-weight:700;font-size:1.1rem}
.vf-brand img{border-radius:50%}
.vf-head nav{display:flex;flex-wrap:wrap;gap:.75rem}
.vf-head nav a{color:var(--vf-muted);text-decoration:none}
.vf-banner img{display:block;width:100%;max-height:240px;object-fit:cover}
.vf-main{max-width:1400px;margin:0 auto;padding:1rem}
.vf-desc{color:var(--vf-muted);max-width:70ch}
.vf-muted{color:var(--vf-muted)}
.vf-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem}
.vf-tools input,.vf-tools select,.vf-row select,.vf-row button,.vf-pager button{font:inherit;color:var(--vf-text);background:var(--vf-surface2);border:1px solid transparent;border-radius:var(--vf-radius);padding:.5rem .75rem}
.vf-tools input{flex:1 1 18rem;min-width:0}
.vf-tools input:focus,.vf-tools select:focus{outline:2px solid var(--vf-accent);outline-offset:1px}
.vf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem}
.vf-card{display:block;background:var(--vf-surface);border-radius:var(--vf-radius);overflow:hidden;text-decoration:none;color:var(--vf-text);transition:transform .12s}
.vf-card:hover,.vf-card:focus-visible{transform:translateY(-2px);outline:2px solid var(--vf-accent2)}
.vf-thumb{position:relative;aspect-ratio:16/9;background:var(--vf-surface2)}
.vf-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vf-thumb-ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--vf-surface2),var(--vf-accent2));font-weight:700;font-size:1.2rem;color:var(--vf-text)}
.vf-dur{position:absolute;right:.4rem;bottom:.4rem;background:rgba(0,0,0,.75);color:#fff;font-size:.8rem;padding:.1rem .35rem;border-radius:4px}
.vf-meta{padding:.6rem .75rem .8rem}
.vf-title{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vf-sub{color:var(--vf-muted);font-size:.85rem;margin-top:.25rem}
.vf-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin:1.5rem 0}
.vf-pager button[aria-current]{background:var(--vf-accent);color:var(--vf-bg)}
.vf-watch{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem;align-items:start}
.vf-player{position:relative;grid-column:1;background:#000;border-radius:var(--vf-radius);overflow:hidden}
.vf-player video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.vf-tap{position:absolute;inset:0 0 3.5rem 0;display:none}
@media (hover:none){.vf-tap{display:block}}
.vf-under{grid-column:1}
.vf-h1{font-size:1.3rem;margin:.75rem 0 .25rem}
.vf-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.vf-side{grid-column:2;grid-row:1/span 2;background:var(--vf-surface);border-radius:var(--vf-radius);padding:.75rem;max-height:80vh;overflow:auto}
.vf-side h2{font-size:1rem;margin:.25rem 0 .5rem}
.vf-list{list-style:none;margin:0;padding:0}
.vf-list button{width:100%;text-align:left;font:inherit;color:var(--vf-text);background:none;border:0;padding:.4rem;border-radius:6px;cursor:pointer}
.vf-list button:hover{background:var(--vf-surface2)}
.vf-list span{color:var(--vf-accent);font-variant-numeric:tabular-nums;margin-right:.4rem}
.vf-foot{text-align:center;color:var(--vf-muted);font-size:.85rem;padding:2rem 1rem}
@media (max-width:900px){.vf-watch{grid-template-columns:1fr}.vf-side{grid-column:1;grid-row:auto;max-height:none}}