:root{--bg:#0e1116;--card:#1a1f29;--line:#2a313d;--fg:#e6e9ef;--mut:#8b95a5;--acc:#f0a500;--steam:#1b2838}
*{box-sizing:border-box}
body{margin:0;font:15px/1.4 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;align-items:center;gap:10px;padding:12px 18px;background:#11161d;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:18px}
.spacer{flex:1}
.sid{color:var(--mut);font-size:12px}
.summary{color:var(--mut);font-size:12px}
.btn{display:inline-block;padding:7px 12px;border-radius:7px;border:1px solid var(--line);background:#222834;color:var(--fg);cursor:pointer;text-decoration:none;font-size:14px}
.btn:hover{border-color:var(--acc)}
.btn.steam{background:var(--steam);border-color:#2a475e}
.btn.danger:hover{border-color:#e5484d;color:#ff6b6f}
.btn.big{font-size:18px;padding:12px 22px;margin-top:14px}
.hero{text-align:center;padding:80px 20px}
.hero h1{font-size:30px;margin:0 0 8px}
.hero p{color:var(--mut)}
.tabs{display:flex;gap:6px;padding:12px 18px 0;flex-wrap:wrap}
.tab{padding:8px 14px;border:1px solid var(--line);background:#161b23;color:var(--mut);border-radius:8px 8px 0 0;cursor:pointer}
.tab small{opacity:.6}
.tab.active{background:var(--card);color:var(--fg);border-bottom-color:var(--card)}
.toolbar{padding:10px 18px}
#search{width:100%;max-width:420px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:#11161d;color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px 18px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;transition:.12s;text-align:center}
.card:hover{transform:translateY(-2px);border-color:var(--acc)}
.card img{width:100%;height:90px;object-fit:contain;background:#0c0f14;border-radius:6px}
.card .nm{font-size:12px;margin-top:6px;height:32px;overflow:hidden;color:#cfd6e1}
.card .rar{height:3px;border-radius:3px;margin-top:6px;background:#444}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(80px);background:#1f6f43;color:#fff;padding:10px 18px;border-radius:8px;transition:.25s;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.err{background:#a3282c}
.empty{color:var(--mut);padding:40px;text-align:center;grid-column:1/-1}