:root{
  --bg:#08080c; --panel:#101017; --panel2:#15151e; --line:#232330; --line2:#2e2e3d;
  --tx:#ecedf2; --tx2:#9a9bab; --tx3:#6a6a7a;
  --acc:#4da3ff; --acc2:#8b5cf6;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(77,163,255,.14), transparent 62%),
    radial-gradient(900px 480px at 86% -2%, rgba(139,92,246,.12), transparent 60%),
    var(--bg);
  color:var(--tx);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(1500px,100% - 48px);margin-inline:auto}

/* ---------- header ---------- */
header.top{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(8,8,12,.72);
  border-bottom:1px solid var(--line);
  padding:18px 0 16px;
}
.ttl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{margin:0;font-size:clamp(20px,3.2vw,30px);font-weight:650;letter-spacing:-.02em;
   background:linear-gradient(100deg,#fff,#b9c6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.crumbs{color:var(--tx3);font-size:13px}
.crumbs b{color:var(--tx2);font-weight:500}
.tools{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.search{position:relative;flex:1 1 260px;max-width:420px}
.search input{
  width:100%;padding:10px 12px 10px 36px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);color:var(--tx);
  font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(77,163,255,.16)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5;pointer-events:none}
select{
  padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  color:var(--tx);font-size:13px;outline:none;cursor:pointer;
}
select:focus{border-color:var(--acc)}

/* ---------- stat row ---------- */
.stat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0 18px;color:var(--tx2);font-size:13px}
.chip{
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:12px;color:var(--tx2);
}
.chip b{color:var(--tx);font-weight:600}
.live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--tx3);font-size:12px}
.spdwrap{margin:-8px 0 18px;display:flex;align-items:center;gap:9px}
.spdout{color:var(--tx2);font-size:12px}
.btn.tiny{padding:5px 11px;font-size:11.5px}
.btn.on{background:linear-gradient(100deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:#3ecf8e;box-shadow:0 0 0 3px rgba(62,207,142,.15)}
.dot.stale{background:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.15)}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:18px}
.card{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .18s;
  outline:none;
}
.card:hover,.card:focus-visible{
  transform:translateY(-4px);border-color:var(--line2);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.85),0 0 0 1px rgba(77,163,255,.22);
}
.card:focus-visible{box-shadow:0 0 0 3px rgba(77,163,255,.45),0 14px 34px -14px rgba(0,0,0,.85)}
.thumb{position:relative;aspect-ratio:16/9;background:#0c0c12;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(140deg,hsl(var(--h) 42% 24%),hsl(calc(var(--h) + 40) 38% 13%));
  color:rgba(255,255,255,.86);
}
.ph .ini{font-size:38px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ph .gi{font-size:34px;opacity:.85}
.ph::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.45),transparent 60%);
}
.badge{
  position:absolute;right:7px;bottom:7px;z-index:2;
  background:rgba(0,0,0,.78);color:#fff;border-radius:6px;padding:2px 7px;
  font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.lbadge{
  position:absolute;left:7px;top:7px;z-index:2;
  background:linear-gradient(100deg,var(--acc),var(--acc2));color:#fff;
  border-radius:5px;padding:2px 6px;font-size:9.5px;font-weight:700;letter-spacing:.09em;
}
.play{
  position:absolute;inset:0;margin:auto;z-index:2;width:46px;height:46px;border-radius:50%;
  background:rgba(8,8,12,.62);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;opacity:0;transform:scale(.85);
  transition:opacity .18s,transform .18s;backdrop-filter:blur(3px);
}
.play svg{width:16px;height:16px;margin-left:3px;fill:#fff}
.card:hover .play,.card:focus-visible .play{opacity:1;transform:scale(1)}
.info{padding:10px 12px 12px;min-height:64px}
.name{
  font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
.sub{color:var(--tx3);font-size:11.5px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sub .dotsep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.card.dir .name{color:var(--acc)}
.kid{font-size:11px;color:var(--tx3);margin-top:3px}

/* ---------- up link / empty / footer ---------- */
.up{
  display:inline-flex;align-items:center;gap:7px;margin:4px 0 18px;
  color:var(--tx2);font-size:13px;padding:7px 13px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);transition:.15s;
}
.up:hover{color:var(--tx);border-color:var(--line2);background:var(--panel2)}
.empty{padding:70px 0;text-align:center;color:var(--tx3);font-size:14px}
.foot{padding:40px 0 56px;color:var(--tx3);font-size:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--tx2);border-bottom:1px solid var(--line2)}
.foot a:hover{color:var(--tx)}

/* ---------- player page ---------- */
.stage{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);
}
.stage video{width:100%;height:100%;display:block;background:#000}
.pbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 8px}
.pbar h2{margin:0;font-size:clamp(18px,2.6vw,25px);font-weight:650;letter-spacing:-.015em}
.pacts{display:flex;gap:9px;margin-left:auto;flex-wrap:wrap}
.btn{
  padding:9px 15px;border-radius:9px;background:var(--panel);border:1px solid var(--line);
  color:var(--tx2);font-size:13px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{color:var(--tx);border-color:var(--line2);background:var(--panel2)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(77,163,255,.4)}
.btn.pri{background:linear-gradient(100deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;font-weight:600}
.plist{margin-top:28px}
.plist h3{font-size:14px;font-weight:600;color:var(--tx2);margin:0 0 14px;letter-spacing:.02em;text-transform:uppercase}
.plist .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.pitem{display:flex;gap:11px;align-items:center;padding:9px;border-radius:10px;background:var(--panel);border:1px solid transparent}
.pitem.cur{border-color:var(--acc);background:rgba(77,163,255,.08)}
.pitem .tn{width:54px;height:32px;border-radius:5px;flex:none;overflow:hidden;background:#0c0c12}
.pitem .tn img{width:100%;height:100%;object-fit:cover}
.pitem .ti{font-size:12.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .du{font-size:11px;color:var(--tx3);margin-top:2px}

@media (max-width:640px){
  .wrap{width:100% - 28px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .pacts{margin-left:0;width:100%}
  header.top{padding:14px 0 12px}
}