:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#667085; --card:#fff; --line:#e3e6eb; --accent:#3452ff;
        --good:#1f9d55; --mixed:#d19a00; --bad:#d64545; --none:#98a2b3; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e8eaed; --muted:#9aa3b2; --card:#1c1f26; --line:#2b303a; --accent:#7b93ff; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.top { display:flex; align-items:center; gap:24px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; color:var(--fg); }
.top nav a { margin-right:16px; }
main { max-width:1200px; margin:0 auto; padding:20px 24px 40px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:20px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; }
input, select, button { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
input[type=search] { flex:1; min-width:220px; }
button { background:var(--accent); color:#fff; border-color:var(--accent); cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.reset { align-self:center; }
.count, .muted { color:var(--muted); } .small { font-size:13px; }
.empty { padding:40px; text-align:center; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:inherit; }
.card:hover { text-decoration:none; border-color:var(--accent); }
.card img, .noimg { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--line); }
.card-body { padding:12px; display:flex; flex-direction:column; gap:6px; }
.card h2 { margin:0; font-size:16px; line-height:1.3; }
.meta { color:var(--muted); font-size:13px; }
.scores { display:flex; align-items:center; gap:8px; }
.scores.big { gap:10px; margin:12px 0; }
.scores.big small { margin-right:16px; color:var(--muted); }
.score { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:34px; padding:0 8px; border-radius:6px; color:#fff; font-weight:700; background:var(--none); }
.score.small { height:26px; min-width:34px; }
.score.user { border-radius:50%; min-width:36px; }
.score.good { background:var(--good); } .score.mixed { background:var(--mixed); } .score.bad { background:var(--bad); }
.plats { display:flex; flex-wrap:wrap; gap:4px; }
.chip { display:inline-flex; gap:5px; align-items:center; padding:1px 8px; margin:0 4px 4px 0; font-size:12px; border:1px solid var(--line); border-radius:999px; }
.chip b.good { color:var(--good); } .chip b.mixed { color:var(--mixed); } .chip b.bad { color:var(--bad); }
.pager { display:flex; justify-content:center; gap:20px; margin-top:24px; }
.back { display:inline-block; margin-bottom:12px; }
.detail { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; }
.head { display:flex; gap:24px; flex-wrap:wrap; }
.cover { width:300px; max-width:100%; border-radius:10px; align-self:flex-start; }
.head > div { flex:1; min-width:260px; }
h1 { margin:0 0 6px; } h3 { margin:24px 0 8px; } h4 { margin:8px 0 4px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px) { .two { grid-template-columns:1fr; } }
.likes li::marker { color:var(--good); } .dislikes li::marker { color:var(--bad); }
.verdict { font-weight:600; }
.platforms { border-collapse:collapse; width:100%; background:var(--card); }
.platforms th, .platforms td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.similar { padding-left:20px; } .similar li { margin:4px 0; }
.runbar { display:flex; gap:12px; align-items:center; margin:12px 0; flex-wrap:wrap; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px; }
progress { width:100%; height:10px; display:block; margin:8px 0 4px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:16px 0; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; display:flex; flex-direction:column; }
.stat b { font-size:24px; } .stat span { color:var(--muted); font-size:13px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; background:var(--none); }
.dot.busy, .dot.running { background:var(--good); } .dot.waiting { background:var(--mixed); }
.events { list-style:none; padding:0; font:13px/1.6 ui-monospace,Menlo,monospace; max-height:340px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
.events .error { color:var(--bad); } .events time { color:var(--muted); margin-right:8px; }