:root{
  --bg:#100e0c; --panel:#1a1714; --panel2:#221d18; --line:#332c24;
  --gold:#d4a23a; --gold-d:#a87e25; --txt:#e7e2d8; --muted:#9a9183; --green:#5aa84a; --red:#c0492f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,Segoe UI,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.accent{color:var(--gold)}
code{background:#000;padding:1px 6px;border-radius:4px;color:var(--gold);font-size:.9em}

.topbar{display:flex;align-items:center;gap:24px;padding:14px 28px;background:linear-gradient(#1c1813,#15110d);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:baseline;gap:10px}
.logo{font-weight:800;font-size:22px;letter-spacing:1px}
.tag{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.nav{display:flex;gap:18px;align-items:center;margin-left:12px}
.navlink{color:var(--muted);padding:6px 4px;border-bottom:2px solid transparent;cursor:pointer}
.navlink.active,.navlink:hover{color:var(--txt);border-color:var(--gold)}
.connect{margin-left:8px;color:var(--muted);font-size:12px;border:1px solid var(--line);padding:5px 10px;border-radius:6px;cursor:pointer}
.connect:hover{color:var(--gold);border-color:var(--gold-d)}
.account{margin-left:auto;display:flex;align-items:center;gap:14px}
.steam-btn img{display:block;height:40px}

.balance{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.balance .amt{font-weight:700;color:var(--gold)}
.avatar{width:34px;height:34px;border-radius:6px;border:1px solid var(--line)}
.logout{color:var(--muted);font-size:12px;cursor:pointer}
.logout:hover{color:var(--red)}

main{max-width:1100px;margin:0 auto;padding:28px}
.hero{padding:30px 4px 10px}
.hero h1{font-size:34px;margin:0 0 6px}
.hero p{color:var(--muted);margin:0}

.shop{margin-top:18px}
.shop-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px}
.shop-head h2{margin:0;font-size:20px}
.pager{display:flex;align-items:center;gap:10px}
.pgbtn{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:6px;width:34px;height:34px;font-size:18px;cursor:pointer}
.pgbtn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.pgbtn:disabled{opacity:.35;cursor:default}
#pageLabel{color:var(--muted);font-size:13px;min-width:44px;text-align:center}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:linear-gradient(var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;transition:transform .08s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--gold-d)}
.card .icon{width:72px;height:72px;object-fit:contain;align-self:center;filter:drop-shadow(0 2px 4px #000)}
.card .name{font-weight:700;font-size:16px}
.card .sub{color:var(--muted);font-size:13px;min-height:18px}
.card .bonus{color:var(--green);font-size:12px;font-weight:600}
.perks{list-style:none;padding:0;margin:0;color:var(--muted);font-size:12.5px}
.perks li{padding:2px 0;border-bottom:1px dashed #2a241d}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px}
.price{font-weight:800;color:var(--gold);font-size:18px}
.buy{background:var(--gold);color:#1a1206;border:0;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer}
.buy:hover{background:#e7b449}
.buy:disabled{opacity:.5;cursor:default}

.notice{color:var(--muted);font-size:13px;margin-top:18px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--panel2);border:1px solid var(--gold-d);color:var(--txt);padding:12px 20px;border-radius:10px;opacity:0;transition:all .25s;z-index:50}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
footer{color:var(--muted);text-align:center;padding:30px;font-size:12px;border-top:1px solid var(--line);margin-top:40px}