:root {
  color-scheme: dark;
  --bg: #08090a;
  --panel: #111315;
  --line: rgba(255,255,255,.12);
  --text: #f4f1ea;
  --muted: #9da1a5;
  --red: #ed2d25;
  --orange: #ff6b1a;
  --green: #69c37d;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 75% 12%, rgba(237,45,37,.16), transparent 32rem), linear-gradient(135deg,#070809,#0c0d0f 60%,#111); font-family: Inter,Segoe UI,Arial,sans-serif; font-size:16px; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
.topbar { height:84px; padding:0 clamp(22px,5vw,80px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:13px; letter-spacing:.08em; }
.brand-mark { width:32px; height:32px; border:2px solid var(--red); transform:rotate(45deg); position:relative; }
.brand-mark::after { content:""; position:absolute; inset:7px; background:var(--red); }
.brand span:last-child { display:flex; flex-direction:column; }
.brand b { font-size:15px; }
.brand small { color:var(--muted); font-size:9px; letter-spacing:.22em; margin-top:2px; }
.back { color:var(--muted); text-decoration:none; font-size:14px; }
.back:hover { color:var(--text); }
main { width:min(1240px,calc(100% - 40px)); margin:0 auto; position:relative; z-index:1; }
.eyebrow { color:var(--orange)!important; font-weight:800; font-size:12px!important; letter-spacing:.22em; }
h1 { font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif; text-transform:uppercase; font-size:clamp(54px,8vw,112px); line-height:.84; letter-spacing:.015em; margin:24px 0 28px; font-weight:400; }
h1 em { color:transparent; -webkit-text-stroke:1px var(--red); font-style:normal; }
.login-shell { min-height:calc(100vh - 140px); display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); align-items:center; gap:7vw; padding:60px 0; }
.login-copy>p:not(.eyebrow), .message-shell>p, .setup>p { color:var(--muted); font-size:18px; line-height:1.65; max-width:650px; }
.steam-button { display:inline-flex; align-items:center; gap:12px; padding:17px 24px; margin-top:20px; background:linear-gradient(135deg,#27638f,#17374e); color:white; text-decoration:none; font-weight:800; border:1px solid rgba(255,255,255,.2); transition:.2s ease; }
.steam-button:hover { transform:translateY(-2px); filter:brightness(1.15); }
.steam-button span { font-size:24px; }
.steam-button.compact { margin-top:28px; }
.login-copy>small { display:block; color:#777d82; margin-top:14px; max-width:520px; line-height:1.5; }
.login-shell aside { border-left:1px solid var(--line); display:grid; grid-template-columns:50px 1fr; gap:28px 20px; padding:40px; background:rgba(255,255,255,.025); }
.login-shell aside span { color:var(--red); font-weight:900; }
.login-shell aside b { font-size:17px; }
.message-shell, .setup { max-width:880px; padding:12vh 0; }
.message-shell h1, .setup h1 { font-size:clamp(48px,7vw,86px); }
.text-button { border:0; background:none; color:var(--muted); padding:16px 0; cursor:pointer; text-decoration:underline; font:inherit; }
.shop-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding:70px 0 45px; }
.shop-head h1 { font-size:clamp(58px,8vw,100px); margin-bottom:0; }
.account { min-width:340px; border:1px solid var(--line); background:rgba(255,255,255,.035); padding:18px; display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center; }
.avatar { width:56px; height:56px; background:#202326; display:grid; place-items:center; color:var(--red); font-weight:900; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.account>div:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
.account small { color:var(--muted); font-size:9px; letter-spacing:.16em; }
.account b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; margin:4px 0; }
.account span { color:var(--orange); font-size:13px; font-weight:800; }
.account div small:last-child { margin-top:4px; letter-spacing:.04em; }
.account button { background:none; border:0; color:#777; cursor:pointer; font-size:12px; }
.catalog-nav { position:sticky; top:0; z-index:3; display:flex; gap:8px; overflow:auto; padding:12px; margin:0 0 44px; border:1px solid var(--line); background:rgba(8,9,10,.94); backdrop-filter:blur(12px); }
.catalog-nav a { flex:0 0 auto; color:var(--muted); text-decoration:none; padding:10px 14px; border:1px solid transparent; font-size:13px; font-weight:800; }
.catalog-nav a:hover { color:var(--text); border-color:rgba(237,45,37,.5); }
.catalog-section { scroll-margin-top:82px; padding:0 0 58px; }
.catalog-heading { display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 20px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.catalog-heading .eyebrow { grid-column:1/-1; margin:0; }
.catalog-heading h2 { margin:0; font-size:32px; }
.catalog-heading>span { color:var(--muted); font-size:13px; }
.products { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product { min-height:290px; padding:28px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); display:flex; flex-direction:column; transition:.2s ease; }
.product:hover { transform:translateY(-3px); border-color:rgba(237,45,37,.5); }
.product-top { display:flex; justify-content:space-between; align-items:flex-start; }
.product-top>div { display:flex; flex-wrap:wrap; gap:6px; }
.product-top>div>span { font-size:9px; letter-spacing:.14em; color:var(--orange); font-weight:900; border:1px solid rgba(255,107,26,.25); padding:5px 6px; }
.product-top>b { font-size:22px; }
.product-top small { font-size:10px; color:var(--muted); }
.product h3 { font-size:25px; margin:42px 0 12px; }
.product p { color:var(--muted); line-height:1.55; margin:0 0 24px; }
.product form { margin-top:auto; }
.product button, .setup button { width:100%; padding:14px 18px; color:white; background:var(--red); border:0; font-weight:900; cursor:pointer; font-size:15px; }
.product button:hover, .setup button:hover { background:#ff3a31; }
.product button:disabled { cursor:not-allowed; background:#272a2d; color:#74787c; }
.flash { padding:16px 20px; margin:0 0 20px; border:1px solid rgba(105,195,125,.45); background:rgba(105,195,125,.1); color:#bde9c7; }
.flash.error { border-color:rgba(237,45,37,.5); background:rgba(237,45,37,.1); color:#ffaaa5; }
.active-effect { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:0 0 20px; padding:18px 20px; border:1px solid rgba(255,107,26,.55); background:rgba(255,107,26,.1); }
.active-effect b { color:#ff9a5d; }
.active-effect span { color:#ffd2b7; }
.return { border-top:1px solid var(--line); padding:28px 0 70px; display:flex; gap:20px; justify-content:space-between; color:var(--muted); }
.return b { color:var(--text); }
.history { display:grid; grid-template-columns:280px 1fr; gap:40px; border-top:1px solid var(--line); padding:42px 0; }
.history h2 { margin:8px 0 0; font-size:28px; }
.history ul { list-style:none; padding:0; margin:0; border:1px solid var(--line); }
.history li { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 18px; border-bottom:1px solid var(--line); }
.history li:last-child { border-bottom:0; }
.history li span { display:flex; flex-direction:column; gap:4px; }
.history li small { color:var(--muted); }
.history strong.plus { color:var(--green); }
.history strong.minus { color:#ff8e87; }
.empty-history { color:var(--muted); }
.empty { grid-column:1/-1; padding:60px; text-align:center; border:1px solid var(--line); color:var(--muted); }
.setup form { margin-top:36px; max-width:600px; display:grid; gap:18px; }
.setup label { display:grid; gap:8px; color:var(--muted); font-size:14px; }
.setup label small { color:#666; }
.setup input { width:100%; border:1px solid var(--line); background:#101214; color:white; padding:14px; font:inherit; }
.setup input:focus { outline:2px solid rgba(237,45,37,.45); outline-offset:1px; }
footer { width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:25px 0; border-top:1px solid var(--line); color:#666; font-size:10px; letter-spacing:.18em; }
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.login-shell aside{display:none}.shop-head{align-items:stretch;flex-direction:column}.account{min-width:0}.products{grid-template-columns:1fr 1fr}.history{grid-template-columns:1fr}}
@media(max-width:620px){.topbar{height:70px}.back{font-size:0}.back::after{content:'Website ↗';font-size:12px}main{width:min(100% - 28px,1240px)}h1{font-size:50px}.login-shell{min-height:auto;padding:80px 0}.products{grid-template-columns:1fr}.account{grid-template-columns:48px 1fr}.account form{grid-column:2}.product{min-height:250px}.return,.active-effect{flex-direction:column;align-items:flex-start}.catalog-heading{grid-template-columns:1fr}.catalog-heading>span{margin-top:5px}.brand-mark{width:26px;height:26px}}