:root{--bg:#0b0e1a;--panel:#141931;--panel2:#1a2140;--text:#eef1ff;--muted:#9aa3c7;--accent:#7c5cff;--accent2:#33d6a6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:10;background:rgba(11,14,26,.85);backdrop-filter:blur(8px);border-bottom:1px solid #232a4d}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hd{display:flex;align-items:center;gap:16px;height:60px}
.logo{font-weight:800;font-size:20px;letter-spacing:.5px}
.logo b{color:var(--accent2)}
.search{margin-left:auto;display:flex;align-items:center;background:var(--panel2);border:1px solid #2a3260;border-radius:10px;padding:8px 12px;width:min(320px,40vw)}
.search input{background:none;border:0;outline:0;color:var(--text);width:100%;font-size:15px}
.hero{padding:44px 0 12px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 10px}
.hero h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);margin:0 auto;max-width:640px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:22px 0}
.chip{background:var(--panel2);border:1px solid #2a3260;color:var(--muted);border-radius:999px;padding:7px 16px;cursor:pointer;font-size:14px;user-select:none}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding-bottom:40px}
.card{background:var(--panel);border:1px solid #232a4d;border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.thumb{position:relative;aspect-ratio:8/5;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat{position:absolute;left:10px;top:10px;background:#000a;color:#fff;font-size:12px;padding:3px 9px;border-radius:999px}
.card .info{padding:12px 14px 14px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
footer{border-top:1px solid #232a4d;color:var(--muted);font-size:13px;padding:22px 0 40px;text-align:center}
footer a{color:var(--accent2)}
.empty{text-align:center;color:var(--muted);padding:40px 0}
/* play page */
.pbar{display:flex;align-items:center;gap:14px;height:50px;background:var(--panel);border-bottom:1px solid #232a4d;padding:0 14px}
.pbar .back{background:var(--panel2);border:1px solid #2a3260;border-radius:8px;padding:6px 12px;font-size:14px}
.pbar .title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .btn{margin-left:auto;background:var(--accent);border:0;color:#fff;border-radius:8px;padding:7px 14px;font-size:14px;cursor:pointer}
.pframe{position:fixed;top:50px;left:0;right:0;bottom:0}
.pframe iframe{width:100%;height:100%;border:0;display:block;background:#000}
@media(max-width:640px){.hero{padding:30px 0 6px}}