
:root{
  --bg:#050506;--panel:#0a0b0e;--line:rgba(255,255,255,.08);
  --red:#ef233c;--green:#52e47b;--gold:#f0bd4f
}
*{box-sizing:border-box}
html{background:#050506!important}
body{
  margin:0!important;min-height:100vh!important;color:#f7f7f8!important;
  background:
    radial-gradient(circle at 85% 10%,rgba(239,35,60,.08),transparent 30%),
    linear-gradient(180deg,#070708,#040405 70%)!important
}
.grid-bg{
  position:fixed!important;inset:0!important;z-index:-4!important;pointer-events:none!important;
  opacity:.22!important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important;
  background-size:42px 42px!important
}
body:before,body:after{
  content:"";position:fixed;pointer-events:none;z-index:-3;border-radius:50%;filter:blur(125px)
}
body:before{width:460px;height:460px;right:-170px;top:180px;background:rgba(239,35,60,.11)}
body:after{width:420px;height:420px;left:-180px;top:760px;background:rgba(110,0,18,.11)}

.topbar{
  width:min(1480px,calc(100% - 30px))!important;max-width:none!important;
  height:72px!important;min-height:72px!important;margin:12px auto 0!important;padding:0 14px!important;
  border:1px solid var(--line)!important;border-bottom-color:rgba(239,35,60,.24)!important;
  border-radius:16px!important;background:rgba(6,6,8,.91)!important;backdrop-filter:blur(18px)!important;
  display:grid!important;grid-template-columns:250px 1fr 220px!important;align-items:center!important;
  gap:0!important;position:sticky!important;top:8px!important;z-index:60!important;
  box-shadow:0 18px 60px rgba(0,0,0,.28)!important
}
.topbar .brand{display:block!important;width:max-content!important}
.topbar .brand img{width:205px!important;display:block!important}
.topbar nav{margin:0!important;display:flex!important;justify-content:center!important;gap:3px!important}
.topbar nav a{
  min-height:auto!important;padding:11px 13px!important;border-radius:9px!important;
  font-size:12px!important;font-weight:800!important;color:#a8adb5!important
}
.topbar nav a:hover,.topbar nav a.active{
  background:rgba(239,35,60,.09)!important;color:#fff!important
}
.steam-btn{
  justify-self:end!important;height:42px!important;padding:0 14px!important;border-radius:9px!important;
  border:1px solid rgba(239,35,60,.45)!important;
  background:linear-gradient(180deg,rgba(239,35,60,.16),rgba(239,35,60,.04))!important;
  color:#fff!important;font-size:11px!important;font-weight:800!important
}

main{
  width:min(1480px,calc(100% - 30px))!important;max-width:none!important;
  margin:auto!important;padding:0 0 70px!important
}

.game-switch{
  display:flex!important;width:max-content!important;margin:12px 0!important;padding:4px!important;
  border:1px solid var(--line)!important;background:#090b0f!important;border-radius:11px!important
}
.game-switch a{
  min-width:110px!important;min-height:36px!important;display:grid!important;place-items:center!important;
  padding:0 18px!important;border-radius:8px!important;color:#777e89!important;
  font-size:11px!important;font-weight:900!important
}
.game-switch a.active{background:linear-gradient(180deg,#f12a43,#b80b22)!important;color:#fff!important}

.hero{
  height:350px!important;min-height:350px!important;margin-top:0!important;padding:0!important;
  border:1px solid var(--line)!important;border-radius:18px!important;overflow:hidden!important;
  position:relative!important;display:block!important;background:#08090b!important
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse at 74% 45%,rgba(235,43,76,.25),transparent 46%),repeating-linear-gradient(132deg,transparent 0 45px,rgba(252,57,91,.045) 46px 47px),linear-gradient(115deg,#1d0d16,#08090c 70%);
  filter:saturate(1.08) contrast(1.05)
}
.hero:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(3,3,5,.92) 0%,rgba(3,3,5,.70) 36%,rgba(3,3,5,.18) 68%,rgba(3,3,5,.45) 100%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.38))
}
.hero>div:first-child{
  position:absolute!important;left:34px!important;bottom:30px!important;
  max-width:680px!important;z-index:2!important
}
.hero .eyebrow{
  display:flex!important;align-items:center!important;gap:8px!important;
  color:#ff596c!important;font-size:9px!important;font-weight:900!important;letter-spacing:.18em!important
}
.hero .eyebrow i{
  width:7px!important;height:7px!important;border-radius:50%!important;background:var(--green)!important;
  box-shadow:0 0 10px rgba(82,228,123,.5)!important
}
.hero h1{
  font-family:Orbitron,Inter,sans-serif!important;margin:10px 0 12px!important;
  font-size:52px!important;line-height:.92!important;letter-spacing:-.045em!important
}
.hero h1 span{color:var(--red)!important}
.hero p{
  max-width:650px!important;color:#b3b6bd!important;font-size:14px!important;
  line-height:1.6!important;margin:0!important
}
.hero p b{color:#fff!important}
.stats{display:flex!important;gap:8px!important;margin-top:20px!important;flex-wrap:wrap!important}
.stats div{
  min-width:112px!important;border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(7,8,10,.72)!important;backdrop-filter:blur(9px)!important;
  padding:10px 12px!important;border-radius:10px!important
}
.stats b{display:block!important;font-family:Orbitron,Inter,sans-serif!important;font-size:15px!important}
.stats span{
  display:block!important;color:#888e97!important;font-size:8px!important;margin-top:3px!important;
  text-transform:uppercase!important;letter-spacing:.08em!important
}
.sync-card{
  position:absolute!important;right:25px!important;bottom:25px!important;z-index:2!important;
  width:315px!important;max-width:315px!important;padding:18px!important;
  border:1px solid rgba(239,35,60,.25)!important;border-radius:14px!important;
  background:rgba(6,7,9,.84)!important;backdrop-filter:blur(12px)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.25)!important
}
.sync-card small{display:block!important;color:#868c95!important;font-size:8px!important;letter-spacing:.13em!important}
.sync-card strong{display:block!important;margin:6px 0 2px!important;font-size:18px!important;color:var(--green)!important}
.sync-card span{color:#9499a2!important;font-size:10px!important}
.sync-card div{
  margin-top:12px!important;padding:10px!important;border-radius:8px!important;
  background:#05070a!important;color:#8c939d!important;font-size:8px!important
}

.account{
  margin:12px 0!important;min-height:70px!important;padding:13px 16px!important;
  border:1px solid var(--line)!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.023),rgba(255,255,255,.008))!important;
  display:flex!important;align-items:center!important;gap:15px!important
}
.account>div:first-child{margin-right:auto!important}
.account small{display:block!important;font-size:8px!important;color:#787e87!important;letter-spacing:.13em!important;margin-bottom:5px!important}
.account strong{font-size:13px!important}
.account-actions{display:flex!important;gap:8px!important}
.btn{
  min-height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0 13px!important;border-radius:9px!important;font-size:9px!important;font-weight:900!important
}
.btn.red{background:linear-gradient(180deg,#ff3148,#c90924)!important}
.btn.dark{background:#111319!important;border-color:var(--line)!important}
.btn.outline{background:transparent!important;border-color:rgba(255,255,255,.10)!important}

.tabs{
  display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:8px!important;
  margin:0 0 12px!important
}
.tab{
  min-height:58px!important;padding:0 15px!important;border:1px solid var(--line)!important;
  border-radius:12px!important;background:#090a0d!important;color:#aeb3bb!important;
  font-weight:900!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important
}
.tab:hover{border-color:rgba(239,35,60,.22)!important}
.tab.active{
  background:linear-gradient(180deg,rgba(239,35,60,.22),rgba(239,35,60,.08))!important;
  border-color:rgba(239,35,60,.48)!important;color:#fff!important;
  box-shadow:inset 0 0 18px rgba(239,35,60,.05)!important
}
.tab b{
  min-width:27px!important;height:21px!important;border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;display:grid!important;place-items:center!important;
  padding:0 6px!important;color:#737983!important;font-size:9px!important
}
.tab.active b{background:var(--red)!important;color:#fff!important}

.controls{
  display:grid!important;grid-template-columns:180px 220px 150px 1fr!important;gap:10px!important;
  margin:0 0 12px!important;padding:14px 15px!important;border:1px solid var(--line)!important;
  border-radius:14px!important;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.007))!important
}
.controls label>span,.extras label>span{
  display:block!important;font-size:8px!important;color:#777e87!important;
  letter-spacing:.12em!important;margin-bottom:5px!important;font-weight:800!important
}
.controls select,.controls input,.extras input{
  height:42px!important;width:100%!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:9px!important;background:#07090c!important;color:#fff!important;padding:0 11px!important
}
.controls select:focus,.controls input:focus,.extras input:focus{border-color:rgba(239,35,60,.42)!important}

.extras{
  margin:0 0 12px!important;display:grid!important;grid-template-columns:1fr 190px 190px!important;
  gap:10px!important;align-items:end!important;padding:14px 15px!important;
  border:1px solid rgba(239,35,60,.22)!important;border-radius:14px!important;
  background:
    linear-gradient(90deg,rgba(239,35,60,.06),transparent 45%),
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important
}
.extras .toggle{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.extras .toggle span{width:100%!important}
.extras .toggle input{width:20px!important;height:20px!important}
.extras small{color:#6f7782!important;font-size:8px!important;padding-bottom:10px!important}

.locker{
  margin:0!important;display:grid!important;grid-template-columns:245px 1fr!important;gap:12px!important;
  border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important
}
.locker aside{
  border:1px solid var(--line)!important;border-radius:15px!important;
  background:linear-gradient(180deg,#090a0d,#07080a)!important;padding:13px!important;
  position:sticky!important;top:92px!important;height:calc(100vh - 112px)!important;
  min-height:610px!important;overflow:auto!important
}
.aside-head{
  padding:5px 5px 12px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  color:#ff5668!important;font-size:9px!important;font-weight:900!important;letter-spacing:.12em!important
}
.aside-head b{font-family:Orbitron,Inter,sans-serif!important;color:#fff!important;font-size:13px!important}
.groups{display:grid!important;gap:4px!important;padding-top:8px!important;max-height:none!important;overflow:visible!important}
.groups button{
  width:100%!important;border:1px solid transparent!important;border-radius:8px!important;
  background:transparent!important;color:#a6abb4!important;padding:10px!important;
  display:flex!important;justify-content:space-between!important;gap:8px!important;
  text-align:left!important;font-size:11px!important
}
.groups button:hover{background:rgba(255,255,255,.03)!important;color:#fff!important}
.groups button.active{
  background:linear-gradient(90deg,rgba(239,35,60,.16),rgba(239,35,60,.04))!important;
  border-color:rgba(239,35,60,.22)!important;color:#fff!important
}
.groups button.active small{color:#ff5d6e!important}

.csgo-aside-promo{
  margin-top:14px;padding:15px;border-radius:10px;border:1px solid rgba(239,35,60,.18);
  background:radial-gradient(circle at 100% 100%,rgba(239,35,60,.12),transparent 45%),#08090b
}
.csgo-aside-promo span,.csgo-aside-promo strong,.csgo-aside-promo em{display:block}
.csgo-aside-promo span{font-size:8px;color:#ff5668;letter-spacing:.12em}
.csgo-aside-promo strong{font-family:Orbitron,Inter,sans-serif;font-size:14px;line-height:1.35;margin:7px 0 14px}
.csgo-aside-promo em{font-style:italic;color:#a74651;font-size:12px}

.locker .content{
  min-width:0!important;border:1px solid var(--line)!important;border-radius:15px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.006))!important;
  padding:17px!important
}
.content-head{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:12px!important;margin-bottom:13px!important}
.content-head small{font-size:8px!important;color:#7b818a!important;letter-spacing:.12em!important}
.content-head h2{font-family:Orbitron,Inter,sans-serif!important;margin:5px 0 0!important;font-size:29px!important}
.content-head>div:last-child{font-size:9px!important;color:#727983!important}
.content-head>div:last-child b{font-family:Orbitron,Inter,sans-serif!important;font-size:20px!important;color:#fff!important}
.current{
  padding:11px 13px!important;border:1px solid rgba(82,228,123,.18)!important;
  background:rgba(82,228,123,.055)!important;border-radius:9px!important;
  color:#bcecc7!important;font-size:10px!important;margin-bottom:12px!important
}

.cards{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:9px!important}
.card{
  border:1px solid rgba(255,255,255,.075)!important;border-radius:12px!important;
  overflow:hidden!important;background:#090a0d!important;transition:.18s!important
}
.card:hover{
  transform:translateY(-2px)!important;border-color:rgba(239,35,60,.32)!important;
  box-shadow:0 16px 30px rgba(0,0,0,.22)!important
}
.card-img{
  height:150px!important;padding:12px!important;
  background:
    radial-gradient(circle at 50% 62%,rgba(239,35,60,.07),transparent 54%),
    linear-gradient(180deg,#0b0d10,#090a0d)!important;
  display:flex!important;align-items:center!important;justify-content:center!important
}
.card-img img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important}
.fallback{font-family:Orbitron,Inter,sans-serif!important;font-size:27px!important;color:#343a43!important}
.card-body{padding:11px!important;border-top:1px solid rgba(255,255,255,.045)!important}
.card-body small{display:block!important;font-size:8px!important;color:#636a73!important;text-transform:uppercase!important}
.card-body strong{
  display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  min-height:auto!important;margin:4px 0 8px!important;font-size:11px!important
}
.card-body button{
  width:100%!important;height:34px!important;border:0!important;border-radius:7px!important;
  padding:0!important;background:linear-gradient(180deg,#ff3148,#c90924)!important;
  color:#fff!important;font-size:10px!important;font-weight:900!important
}
.more{
  display:block!important;margin:16px auto 0!important;height:38px!important;padding:0 18px!important;
  border-radius:8px!important;border:1px solid rgba(239,35,60,.28)!important;
  background:rgba(239,35,60,.08)!important;color:#fff!important;font-weight:900!important
}

.csgo-shop-strip{
  margin:12px 0;display:grid;grid-template-columns:1fr repeat(3,1.25fr);gap:8px
}
.csgo-shop-title{
  padding:16px;border:1px solid var(--line);border-radius:13px;
  background:linear-gradient(135deg,rgba(239,35,60,.10),rgba(255,255,255,.01));
  display:flex;flex-direction:column;justify-content:center
}
.csgo-shop-title span{font-size:8px;color:#ff5668;letter-spacing:.14em}
.csgo-shop-title h2{font-family:Orbitron,Inter,sans-serif;font-size:16px;margin:6px 0 0}
.csgo-shop-card{
  min-height:94px;padding:13px;border:1px solid var(--line);border-radius:13px;
  background:#090a0d;display:grid;grid-template-columns:44px 1fr auto;gap:10px;
  align-items:center;position:relative;overflow:hidden;color:#fff;text-decoration:none
}
.csgo-shop-card:hover{border-color:rgba(239,35,60,.25)}
.csgo-shop-card .ico{
  width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
  background:rgba(239,35,60,.10);font-size:21px;color:#ff5365
}
.csgo-shop-card strong,.csgo-shop-card span{display:block}
.csgo-shop-card strong{font-size:12px}
.csgo-shop-card span{font-size:8px;color:#727982;margin-top:3px}
.csgo-shop-card>b{font-family:Orbitron,Inter,sans-serif;font-size:14px}
.csgo-shop-card em{
  position:absolute;right:12px;bottom:9px;font-style:normal;font-size:7px;
  color:#ff5365;font-weight:900;letter-spacing:.08em
}
.csgo-shop-card.vip{border-color:rgba(240,189,79,.20)}
.csgo-shop-card.vip .ico{color:var(--gold);background:rgba(240,189,79,.08)}
.csgo-shop-card.rank{border-color:rgba(129,93,255,.18)}
.csgo-shop-card.rank .ico{color:#8a72ff;background:rgba(129,93,255,.08)}

.howto{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;
  margin:0 0 18px!important
}
.howto>div{
  padding:15px!important;border:1px solid var(--line)!important;border-radius:12px!important;
  background:rgba(255,255,255,.012)!important;display:grid!important;
  grid-template-columns:38px 1fr!important;column-gap:10px!important;align-items:center!important
}
.howto b{
  grid-row:1/3!important;margin:0!important;font-family:Orbitron,Inter,sans-serif!important;
  font-size:23px!important;color:#5d2028!important
}
.howto strong{font-size:11px!important}
.howto span{display:block!important;margin:0!important;color:#737983!important;font-size:8px!important}

.csgo-unified-footer{
  width:min(1480px,calc(100% - 30px));margin:auto auto 24px;
  border-top:1px solid rgba(255,255,255,.07);padding:18px 3px;
  display:flex;align-items:center;gap:16px;color:#6f747d;font-size:9px
}
.csgo-unified-footer img{width:160px}
.csgo-unified-footer p{margin-right:auto}
.csgo-unified-footer span{font-style:italic;color:#a0a5ad}

@media(max-width:1180px){
  .topbar{grid-template-columns:210px 1fr 175px!important}
  .topbar .brand img{width:180px!important}
  .topbar nav a{padding:9px 8px!important;font-size:10px!important}
  .cards{grid-template-columns:repeat(3,1fr)!important}
  .csgo-shop-strip{grid-template-columns:1fr 1fr}
  .csgo-shop-title{grid-column:1/-1}
}
@media(max-width:900px){
  .topbar{
    position:relative!important;top:0!important;display:flex!important;height:auto!important;
    min-height:62px!important;margin:10px!important;width:calc(100% - 20px)!important
  }
  .topbar nav{display:none!important}
  .steam-btn{margin-left:auto!important}
  main{width:calc(100% - 20px)!important}
  .hero{height:auto!important;min-height:470px!important}
  .hero>div:first-child{left:22px!important;right:22px!important;bottom:180px!important}
  .hero h1{font-size:39px!important}
  .sync-card{left:22px!important;right:22px!important;bottom:20px!important;width:auto!important;max-width:none!important}
  .controls{grid-template-columns:1fr 1fr!important}
  .locker{grid-template-columns:190px 1fr!important}
  .cards{grid-template-columns:repeat(2,1fr)!important}
  .extras{grid-template-columns:1fr 1fr!important}
}
@media(max-width:650px){
  .topbar .brand img{width:155px!important}
  .hero{min-height:500px!important}
  .hero h1{font-size:32px!important}
  .stats div{min-width:calc(50% - 4px)!important}
  .account{align-items:flex-start!important;flex-direction:column!important}
  .account-actions{flex-wrap:wrap!important}
  .tabs{grid-template-columns:1fr 1fr!important}
  .controls,.extras{grid-template-columns:1fr!important}
  .locker{grid-template-columns:1fr!important}
  .locker aside{position:relative!important;top:auto!important;height:auto!important;min-height:0!important}
  .groups{max-height:230px!important;overflow:auto!important}
  .cards{grid-template-columns:1fr 1fr!important}
  .csgo-shop-strip{grid-template-columns:1fr!important}
  .csgo-shop-title{grid-column:auto}
  .howto{grid-template-columns:1fr!important}
  .csgo-unified-footer{flex-wrap:wrap}
}
