/* Universal Video Player v3.0 — public site theme */
:root{
  --bg:#0d0f13;--card:#15181f;--line:#23272f;--fg:#eef0f4;--mut:#8b93a3;--acc:#ff5a3c;
}
*{box-sizing:border-box}
body.site{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}

.site-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(13,15,19,.85);backdrop-filter:blur(10px);z-index:10}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--fg);font-size:17px;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.dot{width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px var(--acc)}

/* homepage grid */
.home{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
.home h1{font-size:24px;letter-spacing:-.02em;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .15s,border-color .15s}
.vcard:hover{transform:translateY(-3px);border-color:var(--acc);text-decoration:none}
.vthumb{position:relative;aspect-ratio:16/9;background:#0a0c10 center/cover no-repeat;display:block}
.vthumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;
  font-size:12px;padding:2px 7px;border-radius:5px}
.vthumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#2c313c;font-size:42px}
.vmeta{padding:12px 14px 16px}
.vmeta .t{color:var(--fg);font-weight:600;font-size:15px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vmeta .s{color:var(--mut);font-size:12.5px;margin-top:6px}

.pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px;justify-content:center}
.pager a{padding:8px 13px;border:1px solid var(--line);border-radius:8px;color:var(--mut)}
.pager a.active{border-color:var(--acc);color:var(--fg)}

/* watch page */
.watch{max-width:980px;margin:0 auto;padding:24px}
.player-shell{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000}
.watch h1{font-size:22px;letter-spacing:-.02em;margin:20px 0 8px}
.meta{color:var(--mut);font-size:13.5px}
.desc{margin-top:16px;color:#c7ccd6;white-space:pre-wrap;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.empty{text-align:center;color:var(--mut);padding:80px 20px;font-size:16px}

.site-foot{text-align:center;color:var(--mut);font-size:12.5px;padding:30px;border-top:1px solid var(--line)}

@media(max-width:560px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}}