:root{--bg:#090a0f;--surface:#12141b;--surface2:#171a23;--border:#292d38;--text:#f5f5f7;--muted:#969cab;--accent:#8b5cf6;--green:#56d364;--orange:#f59e0b}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;background:radial-gradient(circle at 85% 8%,rgba(139,92,246,.13),transparent 22rem),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}.app{width:min(100%,760px);margin:auto;min-height:100vh;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(105px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.brand{font-weight:950;font-size:24px;letter-spacing:-.05em}.brand span{color:var(--accent)}.sub{color:var(--muted);font-size:12px;margin-top:4px}.actions{display:flex;gap:8px}.actions button{height:46px;min-width:46px;border:1px solid var(--border);border-radius:14px;background:#11131a;color:white}.actions .balance{padding:0 16px;color:#b69cff;font-weight:800}
.card{border:1px solid var(--border);background:linear-gradient(180deg,#161821,#0f1117);box-shadow:0 20px 60px rgba(0,0,0,.28)}
.hero{border-radius:28px;padding:32px;display:grid;grid-template-columns:1.1fr .9fr;min-height:350px;overflow:hidden}.heroText{align-self:center;z-index:2}.hero small,#sheet small{color:#a78bfa;font-weight:800;letter-spacing:.12em}.hero h1{font-size:clamp(44px,8vw,68px);line-height:.94;letter-spacing:-.065em;margin:14px 0}.hero h1 span{color:var(--accent)}.hero p{color:#aab0be;line-height:1.55;max-width:380px}.primary{border:0;border-radius:14px;padding:15px 20px;background:linear-gradient(135deg,#8b5cf6,#6d3df1);color:#fff;font-weight:800}.art{position:relative;min-height:230px}.coin{position:absolute;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#262a37,#0d0f15);border:1px solid #414655;font-size:52px;font-weight:950;box-shadow:0 26px 45px rgba(0,0,0,.4)}.c1{left:4%;top:10%;color:#ddd;transform:rotate(-8deg)}.c2{right:0;bottom:6%;color:#ff4d58;transform:rotate(10deg)}.ring{position:absolute;width:220px;height:66px;border:1px solid #8b5cf6;border-radius:50%;right:-1%;bottom:0;box-shadow:0 0 32px rgba(139,92,246,.34)}
.section{margin-top:30px}.section h2{margin:0 0 14px;font-size:22px}.row{display:flex;justify-content:space-between;align-items:center}.row h2{margin:0}.link{border:0;background:transparent;color:#a78bfa;font-weight:700}.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cat{min-height:108px;border:1px solid var(--border);border-radius:20px;background:rgba(18,20,27,.82);color:white;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left}.cat i{font-style:normal;width:48px;height:48px;border-radius:14px;background:#232630;display:grid;place-items:center;font-weight:950;font-size:23px}.cat i.val{color:#ff4d58;background:#28171b}.cat b,.cat span{display:block}.cat span{color:var(--muted);font-size:12px;margin-top:5px}.cat em{font-style:normal;color:var(--muted);font-size:26px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.product{border:1px solid var(--border);border-radius:20px;background:#11131a;padding:15px}.visual{height:80px;border-radius:14px;padding:12px;display:flex;align-items:flex-end;font-size:22px;font-weight:950}.visual.roblox{background:linear-gradient(145deg,#0d2a17,#17231a);color:#73ee87}.visual.valorant{background:linear-gradient(145deg,#2b1116,#1a0f13);color:#ff525d}.product h3{font-size:16px;margin:12px 0 6px}.price{color:#a78bfa;font-weight:900;font-size:20px}.stock{color:var(--muted);font-size:12px;margin-top:12px}.stock:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px}.stock.low:before{background:var(--orange)}
.benefits{margin-top:26px;border-radius:22px;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.benefits>div{padding:10px 14px}.benefits>div+div{border-left:1px solid var(--border)}.benefits strong,.benefits span{display:block}.benefits strong{font-size:14px}.benefits span{font-size:11px;color:var(--muted);margin-top:5px}
.empty{border-radius:20px;padding:18px;display:flex;align-items:center;gap:14px}.empty>div{width:48px;height:48px;border-radius:14px;background:#171a23;display:grid;place-items:center;color:#a78bfa;font-size:24px}.empty p{margin:0}.empty b,.empty span{display:block}.empty span{color:var(--muted);font-size:12px;margin-top:5px}
nav{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),730px);height:76px;border:1px solid var(--border);background:rgba(14,16,23,.94);backdrop-filter:blur(18px);border-radius:24px;display:grid;grid-template-columns:repeat(4,1fr);padding:7px;z-index:10}nav button{border:0;background:transparent;color:#777d8b;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:17px;gap:3px}nav button.active{color:#a78bfa;background:rgba(139,92,246,.08)}nav span{font-size:22px}nav small{font-size:11px;font-weight:700}
#backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:20}#sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:min(100%,760px);max-height:82vh;overflow:auto;background:#0f1118;border:1px solid var(--border);border-bottom:0;border-radius:28px 28px 0 0;z-index:21;padding:12px 18px calc(26px + env(safe-area-inset-bottom));transition:.28s}#sheet.open{transform:translate(-50%,0)}.handle{width:42px;height:4px;background:#454a59;border-radius:999px;margin:0 auto 17px}.sheetHead{display:flex;justify-content:space-between;align-items:center}.sheetHead h3{font-size:28px;margin:5px 0 0}.sheetHead button{width:46px;height:46px;border:1px solid var(--border);border-radius:14px;background:#171a23;color:#fff;font-size:24px}#sheetBody{display:grid;gap:10px;margin-top:18px}.sheetItem{border:1px solid var(--border);border-radius:18px;background:#151821;color:#fff;padding:15px;display:grid;grid-template-columns:1fr auto;gap:6px 14px;text-align:left}.sheetItem .stock{grid-column:1/-1}
@media(max-width:620px){.hero{grid-template-columns:1fr;min-height:470px;padding:25px}.art{min-height:185px}.coin{width:108px;height:108px}.c1{left:18%}.c2{right:10%}.ring{width:190px;right:5%}.products{grid-template-columns:1fr 1fr}.products .product:nth-child(3){grid-column:1/-1}.benefits{grid-template-columns:1fr}.benefits>div+div{border-left:0;border-top:1px solid var(--border)}}@media(max-width:430px){.sub{display:none}.cats{grid-template-columns:1fr}}