:root {
  color-scheme: dark;
  --bg: #080b18;
  --bg-soft: #10162a;
  --panel: rgba(18, 25, 49, .82);
  --panel-solid: #141c36;
  --text: #f2f4ff;
  --muted: #9ba7c9;
  --line: rgba(255,255,255,.1);
  --accent: #8d7bff;
  --accent-2: #50d9c5;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
}
:root.light { color-scheme: light; --bg:#f4f6fb; --bg-soft:#e9edfa; --panel:rgba(255,255,255,.82); --panel-solid:#fff; --text:#171d33; --muted:#64708e; --line:rgba(22,32,70,.12); --accent:#5d50df; --accent-2:#168e7b; --shadow:0 18px 45px rgba(49,60,120,.14); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; font:15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Microsoft Yahei", sans-serif; color:var(--text); background:radial-gradient(circle at 10% -10%, #2d3d85 0, transparent 35%), radial-gradient(circle at 100% 15%, #273b67 0, transparent 30%), var(--bg); }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
button, .pill { border:0; cursor:pointer; }
:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 70%,white); outline-offset:3px; }
.container { width:min(1180px, 100%); margin:auto; padding:0 22px; }
.topbar { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 76%, transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.nav { min-height:70px; display:flex; align-items:center; gap:22px; }
.logo { display:inline-flex; align-items:center; gap:8px; font-size:21px; font-weight:850; letter-spacing:-.03em; color:var(--accent); white-space:nowrap; }
.navlinks { display:flex; gap:16px; color:var(--muted); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color:var(--text); }
.search { position:relative; margin-left:auto; width:min(310px, 42vw); }
.search input { width:100%; padding:11px 42px 11px 16px; border:1px solid var(--line); border-radius:24px; outline:none; background:var(--panel); color:var(--text); }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.suggestions { position:absolute; left:0; right:0; top:calc(100% + 8px); display:grid; gap:2px; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--panel-solid); box-shadow:var(--shadow); }
.suggestions:empty { display:none; }
.suggestions a { padding:8px 10px; border-radius:9px; }
.suggestions a:hover { background:color-mix(in srgb,var(--accent) 16%,transparent); }
.icon-btn { width:38px; height:38px; border-radius:50%; background:var(--panel); color:var(--text); border:1px solid var(--line); }
.hero { position:relative; overflow:hidden; min-height:310px; margin:32px 0 38px; padding:48px clamp(24px,6vw,72px); display:flex; align-items:flex-end; border:1px solid var(--line); border-radius:28px; background:linear-gradient(110deg, rgba(73,56,178,.95), rgba(27,89,128,.62)), url("https://images.unsplash.com/photo-1485846234645-a62644f84728?w=1600&q=80") center/cover; box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.48), transparent 75%); pointer-events:none; }
.hero-content { position:relative; z-index:1; max-width:620px; }
.eyebrow { color:#c5c0ff; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.hero h1 { margin:8px 0 12px; max-width:600px; font-size:clamp(30px,5vw,58px); line-height:1.08; letter-spacing:-.05em; }
.hero p { margin:0 0 24px; color:#e1e6ff; font-size:17px; }
.hero-dots { position:absolute; right:26px; bottom:24px; z-index:2; display:flex; gap:7px; }
.hero-dots button { width:8px; height:8px; padding:0; border-radius:50%; background:#ffffff66; }
.hero-dots button.active { width:24px; border-radius:8px; background:#fff; }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:9px 17px; border-radius:22px; background:linear-gradient(120deg,var(--accent),#6a9bff); color:#fff; font-weight:700; transition:transform .2s, box-shadow .2s; }
.pill:hover { transform:translateY(-2px); box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 35%,transparent); }
.pill.secondary { background:var(--panel); border:1px solid var(--line); color:var(--text); }
.section { margin:34px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section h2, .section h1 { margin:0; letter-spacing:-.03em; }
.section h2 { font-size:24px; }
.section-head a { color:var(--muted); font-size:13px; }
.ranking-tabs { display:flex; gap:6px; margin-top:8px; }
.ranking-tabs [role="tab"] { padding:4px 10px; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; }
.ranking-tabs [role="tab"][aria-selected="true"], .ranking-tabs [role="tab"]:hover { color:var(--text); border-color:var(--line); background:color-mix(in srgb,var(--accent) 16%,transparent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:17px; }
.card { overflow:hidden; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 8px 25px rgba(0,0,0,.08); transition:transform .23s, box-shadow .23s, border-color .23s; }
.card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 60%,var(--line)); box-shadow:var(--shadow); }
.poster { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; background:linear-gradient(145deg,#27305d,#11172d); }
.card-body { padding:12px 13px 14px; }
.card-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:720; }
.meta { margin-top:3px; color:var(--muted); font-size:13px; }
.rank { position:absolute; top:10px; left:10px; width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#10152ccc; color:#fff; font-weight:800; }
.rank-card { position:relative; }
.empty { padding:40px 18px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:16px; background:var(--panel); }
.skeleton { min-height:240px; border-radius:16px; background:linear-gradient(90deg,var(--panel),color-mix(in srgb,var(--panel) 50%,#fff),var(--panel)); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.filters label { display:grid; gap:4px; color:var(--muted); font-size:12px; }
.filters select { min-width:120px; padding:8px 28px 8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--bg-soft); color:var(--text); }
.pagination { display:flex; justify-content:center; align-items:center; gap:12px; margin:26px 0; }
.pagination button { padding:8px 13px; border-radius:10px; background:var(--panel); color:var(--text); border:1px solid var(--line); }
.pagination button:disabled { opacity:.45; cursor:not-allowed; }
.detail { display:grid; grid-template-columns:250px 1fr; gap:34px; margin:38px 0; }
.detail > .poster { border-radius:18px; box-shadow:var(--shadow); }
.detail h1 { margin:4px 0 8px; font-size:clamp(28px,4vw,44px); line-height:1.1; }
.detail .facts { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); }
.detail .description { max-width:760px; color:var(--muted); }
.episodes { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.episode { min-width:74px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); }
.episode:hover, .episode.active { background:color-mix(in srgb,var(--accent) 20%,var(--panel)); border-color:var(--accent); }
.player-wrap { margin:30px 0; }
.player { width:100%; max-height:72vh; border-radius:18px; background:#000; box-shadow:var(--shadow); }
.player-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0; }
.player-toolbar select { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); }
.player-toolbar button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.notice { padding:12px 14px; border-radius:12px; color:var(--muted); background:var(--panel); }
footer { margin-top:70px; padding:30px 0; border-top:1px solid var(--line); color:var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
@media (max-width:720px) { .container{padding:0 15px}.nav{gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.navlinks{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;order:2;width:100%}.search{width:100%;order:3;margin-left:0}.hero{min-height:270px;padding:32px 24px}.hero h1{font-size:34px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail{grid-template-columns:120px 1fr;gap:16px}.detail h1{font-size:26px}.detail .poster{border-radius:12px}.filters{display:grid;grid-template-columns:repeat(2,1fr)}.filters label,.filters select{min-width:0;width:100%} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }