:root {
  color-scheme: dark;
  --bg: #06140e;
  --panel: #0c281b;
  --panel-light: #123824;
  --ink: #fbf9ff;
  --muted: #aaa5c6;
  --violet: #b9e67b;
  --line: rgba(255, 255, 255, .08);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: radial-gradient(ellipse at 50% -10%, #254c2a 0, #0a2519 37%, #04100b 82%);
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #c4a7ff; outline-offset: 3px; }

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.ambient { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.ambient-one { width: 320px; height: 320px; top: 190px; right: -190px; background: #824bea; opacity: .11; filter: blur(80px); }
.ambient-two { width: 260px; height: 260px; top: 650px; left: -190px; background: #287ed5; opacity: .1; filter: blur(80px); }

.topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.round-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .055); cursor: pointer; transition: background .2s, transform .2s; }
.round-button:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.close-mark { font-size: 27px; font-weight: 300; line-height: 1; transform: translateY(-1px); }
.brand-pill { height: 42px; display: inline-flex; gap: 10px; align-items: center; padding: 0 15px 0 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; color: var(--ink); background: rgba(255,255,255,.07); font-size: 14px; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#b78aff,#7549c7); box-shadow: 0 3px 12px #8d65e64d; }
.brand-mark svg { width: 19px; fill: #fff5c2; }
.brand-dot, .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #71e9b4; box-shadow: 0 0 10px #71e9b4; }
.menu-dots { font-size: 26px; font-weight: 800; line-height: 0; letter-spacing: -3px; transform: translate(-1px,-5px); }

.intro { position: relative; display: flex; align-items: flex-end; justify-content: space-between; margin: 30px 0 27px; padding: 0 5px; }
.eyebrow, .card-kicker { display: flex; gap: 8px; align-items: center; color: #b8afd8; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.intro h1 { margin: 13px 0 8px; font-size: clamp(30px, 4.2vw, 47px); line-height: 1.08; letter-spacing: -.055em; }
.intro h1 span { color: #bba2ff; }
.intro p { margin: 0; color: #aaa5c2; font-size: 14px; }
.intro-sparkle { padding: 0 15px 12px 0; color: #ffc76c; font-size: 58px; animation: slow-spin 20s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }

.catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.category-card {
  position: relative;
  min-width: 0;
  height: 207px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 25px;
  padding: 19px;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(145deg, #29264c, #1b1937 85%);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 12px 34px rgba(4,3,14,.2);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, filter .22s ease;
}
.category-card:hover { transform: translateY(-3px); border-color: rgba(192,162,255,.3); filter: brightness(1.07); }
.category-card:active { transform: translateY(-1px) scale(.99); }
.category-card h2 { position: relative; z-index: 2; margin: 8px 0 0; font-size: 21px; font-weight: 800; line-height: 1.17; letter-spacing: -.045em; }
.category-card .card-kicker { position: relative; z-index: 2; font-size: 8px; letter-spacing: .13em; opacity: .78; }
.card-arrow { position: absolute; z-index: 4; top: 16px; right: 17px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: #ffffff0d; font-size: 14px; opacity: .8; transition: .2s; }
.category-card:hover .card-arrow { background: #fff2; transform: rotate(45deg); }

.hero-card { grid-column: span 4; height: 255px; border-radius: 28px; background: radial-gradient(ellipse at 77% 46%, #463370 0%, #272345 42%, #1e1b3a 77%); }
.hero-card .card-copy { position: relative; z-index: 5; }
.hero-card h2 { margin-top: 8px; font-size: clamp(27px, 4vw, 40px); line-height: 1.04; }
.hero-card .card-kicker { color: #d3baff; }
.hero-star { position: absolute; z-index: 1; width: 216px; height: 216px; top: 12px; left: 42%; filter: drop-shadow(0 15px 15px #ffab4540); animation: float-star 4.6s ease-in-out infinite; }
@keyframes float-star { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.hero-orbit { position: absolute; z-index: 0; width: 240px; height: 70px; border: 1px solid #ffffff12; border-radius: 50%; transform: rotate(-24deg); }
.orbit-a { right: 17%; top: 36px; }.orbit-b { right: 2%; top: 123px; width: 310px; transform: rotate(18deg); }
.hero-wizard { position: absolute; z-index: 3; width: 196px; height: 226px; right: 3.5%; bottom: -22px; filter: drop-shadow(0 10px 15px #0e0c1d70); }
.card-caption { position: absolute; z-index: 4; left: 20px; bottom: 17px; color: #d4cce9; font-size: 11px; font-weight: 600; }
.card-caption span { padding-left: 5px; color: #ffc466; }

.premium-card { grid-column: span 2; background: linear-gradient(145deg,#292545,#211b3e); }
.premium-card .card-wizard { width: 133px; height: 157px; right: -2px; bottom: -22px; }
.premium-gem { position: absolute; right: 35px; bottom: 58px; color: #e1b7ff; font-size: 24px; text-shadow: 0 0 20px #bd6aff; transform: rotate(15deg); }
.mini-pill { position: absolute; z-index: 3; left: 19px; bottom: 17px; padding: 6px 10px; border: 1px solid #ffffff19; border-radius: 16px; background: #ffffff0b; color: #ded4ff; font-size: 10px; font-weight: 700; }
.gram-card { grid-column: span 2; background: linear-gradient(145deg,#292447,#1d1c3d); }
.gram-card .wizard-small { width: 136px; height: 157px; right: -6px; bottom: -24px; }
.coin-stack { position: absolute; right: 86px; bottom: 28px; display: flex; flex-direction: column; color: #ffe29a; font-size: 21px; font-weight: 800; text-shadow: 0 3px 0 #8d5e29; transform: rotate(-15deg); }
.coin-stack span:nth-child(2) { margin: -9px 0 0 17px; color: #9cf4d1; }.coin-stack span:nth-child(3) { margin: -11px 0 0 7px; color: #d9b7ff; }

.games-card { grid-column: span 2; background: linear-gradient(145deg,#25294f,#1c1b3b); }
.subs-card { grid-column: span 2; background: linear-gradient(145deg,#282248,#201a37); }
.stack-cards { position: absolute; right: 11px; bottom: 16px; width: 185px; height: 88px; }
.tile { position: absolute; width: 96px; height: 61px; display: grid; place-items: center; border: 1px solid #ffffff24; border-radius: 12px; box-shadow: 0 12px 17px #08071376, inset 0 1px #ffffff40; font-weight: 800; }
.tile-steam { left: 0; bottom: 1px; color: #fff; background: linear-gradient(140deg,#39a4ca,#075286); font-size: 29px; transform: rotate(-15deg); }
.tile-xbox { left: 50px; bottom: 16px; color: #fff5c6; background: linear-gradient(140deg,#ffd13f,#d78f00); font-size: 25px; transform: rotate(-7deg); }
.tile-roblox { left: 92px; bottom: 0; color: #fff; background: linear-gradient(140deg,#516dff,#2837a9); font-size: 12px; transform: rotate(10deg); }
.tile-discord { left: 0; bottom: 20px; color: #fff; background: linear-gradient(140deg,#6478fa,#4743a6); font-size: 28px; transform: rotate(-10deg); }
.tile-spotify { left: 53px; bottom: 8px; color: #a8ffd4; background: linear-gradient(140deg,#19a878,#075a56); font-size: 27px; transform: rotate(7deg); }
.tile-netflix { left: 102px; bottom: 0; color: #fff; background: linear-gradient(140deg,#ed374c,#911528); font-size: 27px; font-family: Arial,sans-serif; transform: rotate(-9deg); }

.sim-stack { position: absolute; right: 15px; bottom: 13px; width: 166px; height: 94px; }
.sim { position: absolute; width: 72px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid #ffffff45; border-radius: 13px; box-shadow: 0 10px 14px #07061175, inset 0 1px #fff5; }
.sim b { width: 42px; height: 34px; display: grid; place-items: center; border: 1.5px solid #463822; border-radius: 6px; background: linear-gradient(135deg,#ffe98e,#cfaa39); color: #523d1d; font-size: 9px; }
.sim i { width: 38px; height: 2px; background: #ffffffa3; }
.sim-red { left: 0; bottom: 0; color: #fff; background: linear-gradient(145deg,#ff4e5a,#b01636); transform: rotate(-18deg); }
.sim-yellow { left: 48px; bottom: 14px; background: linear-gradient(145deg,#ffdd66,#ef9c32); transform: rotate(-5deg); }
.sim-blue { left: 95px; bottom: 2px; color: #fff; background: linear-gradient(145deg,#555bdb,#29285c); transform: rotate(13deg); }
.gift-card { grid-column: span 2; background: linear-gradient(145deg,#24274a,#1b1b36); }
.gift-stack { position: absolute; right: 13px; bottom: 15px; width: 182px; height: 85px; }
.gift { position: absolute; width: 89px; height: 58px; display: grid; place-items: center; border: 1px solid #ffffff38; border-radius: 12px; box-shadow: 0 12px 16px #07061170, inset 0 1px #fff5; font-size: 23px; }
.gift-blue { left: 0; bottom: 7px; background: linear-gradient(145deg,#15a4d9,#134578); transform: rotate(-17deg); }
.gift-green { left: 49px; bottom: 14px; background: linear-gradient(145deg,#13b98a,#066054); transform: rotate(5deg); }
.gift-dark { left: 94px; bottom: 0; background: linear-gradient(145deg,#3e424d,#11121a); transform: rotate(-8deg); }

.rental-card { grid-column: span 4; height: 188px; background: radial-gradient(ellipse at 78% 70%,#3a2c60 0,#211e40 54%); }
.rental-card h2 { margin-top: 7px; }
.rental-wizard { position: absolute; width: 168px; height: 196px; right: 3%; bottom: -23px; }
.handle-pills { position: absolute; z-index: 3; left: 19px; bottom: 21px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.handle-pills span { padding: 5px 10px; border: 1px solid #ffffff28; border-radius: 15px; background: linear-gradient(135deg,#2ab4e5,#2289cb); box-shadow: 0 5px 12px #08071355; font-size: 10px; font-weight: 800; transform: rotate(-5deg); }
.handle-pills span:nth-child(2) { margin-left: 20px; background: linear-gradient(135deg,#393652,#211d39); color: #c6bddb; transform: rotate(4deg); }
.tiny-frog { position: absolute; right: 38%; bottom: 20px; font-size: 37px; filter: drop-shadow(0 8px 5px #08071377); transform: rotate(-9deg); animation: frog-hop 2.8s ease-in-out infinite; }
@keyframes frog-hop { 0%,80%,100% { transform: translateY(0) rotate(-9deg); } 90% { transform: translateY(-7px) rotate(4deg); } }
.coin-burst { position: absolute; right: 18%; bottom: 69px; color: #ffc861; font-size: 27px; text-shadow: 0 0 20px #ffc861; }

.purchases-row { width: 100%; display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.07); border-radius: 21px; text-align: left; background: linear-gradient(100deg,#252345,#211e40); cursor: pointer; transition: .2s; }
.purchases-row:hover { border-color: #aa8cf866; transform: translateY(-1px); }
.bag-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff08; }
.bag-icon svg { width: 20px; fill: none; stroke: #e3d8ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.purchases-copy { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.purchases-copy strong { font-size: 14px; }.purchases-copy small { color: #9f99b7; font-size: 10px; }
.purchase-count { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 10px; background: #a183ed20; color: #c9b4ff; font-size: 11px; font-weight: 800; }
.chevron { color: #8d87a7; font-size: 25px; font-weight: 300; line-height: 1; }
footer { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; color: #76718d; font-size: 10px; }
.footer-spark { color: #a991e7; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px; background: #090812b8; backdrop-filter: blur(8px); animation: fade-in .18s ease; }
.modal-backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet { position: relative; width: min(100%, 540px); max-height: min(82vh, 760px); overflow: auto; padding: 12px 24px 26px; border: 1px solid #ffffff18; border-radius: 28px 28px 22px 22px; background: linear-gradient(145deg,#282545,#18172d); box-shadow: 0 22px 90px #05040caa; animation: sheet-up .24s cubic-bezier(.2,.75,.2,1); }
@keyframes sheet-up { from { transform: translateY(30px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.sheet-handle { width: 36px; height: 4px; margin: 0 auto 17px; border-radius: 3px; background: #ffffff46; }
.sheet-close { position: absolute; top: 16px; right: 18px; width: 31px; height: 31px; border: 0; border-radius: 50%; background: #ffffff12; color: #cec6df; font-size: 22px; cursor: pointer; }
.sheet-eyebrow { color: #bba1ff; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sheet h2 { margin: 6px 34px 5px 0; font-size: 27px; letter-spacing: -.045em; }
.sheet-lead { margin: 0 0 20px; color: #aba6c2; font-size: 13px; line-height: 1.55; }
.product-list { display: flex; flex-direction: column; gap: 9px; }
.product-option { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; padding: 14px; border: 1px solid #ffffff0e; border-radius: 16px; background: #ffffff08; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.product-option.selected { border-color: #b79aff77; background: #b18cff12; }
.product-option strong { font-size: 14px; }.product-option small { color: #a8a2bd; font-size: 11px; }.product-price { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; font-weight: 800; color: #dfd4ff; }
.rental-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 14px; color: #c9c2dc; font-size: 12px; }
.rental-controls select { min-width: 110px; padding: 9px 30px 9px 11px; border: 1px solid #ffffff1b; border-radius: 11px; background: #ffffff0b; color: #f7f3ff; font: inherit; }
.rental-state { padding: 20px 14px; border: 1px dashed #ffffff20; border-radius: 16px; color: #aaa3be; font-size: 12px; line-height: 1.6; text-align: center; }
.number-offer-list { display: flex; flex-direction: column; gap: 8px; max-height: 30vh; overflow: auto; padding-right: 2px; }
.number-offer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid #ffffff10; border-radius: 15px; background: #ffffff07; text-align: left; cursor: pointer; transition: .2s; }
.number-offer:hover, .number-offer.selected { border-color: #b79aff88; background: #b18cff12; }
.number-badge { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#8058c5,#382958); color: #eee2ff; font-size: 18px; }
.number-details { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.number-details strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.number-details small { color: #a49db9; font-size: 10px; }
.number-price { font-size: 12px; font-weight: 800; color: #e0d1ff; white-space: nowrap; }
.rental-warning { margin: 10px 2px 0; color: #c8a8ff; font-size: 10px; line-height: 1.5; }
.catalog-content { display: flex; flex-direction: column; gap: 11px; }
.catalog-control { display: flex; flex-direction: column; gap: 7px; color: #bdcea7; font-size: 11px; font-weight: 700; }
.catalog-control select { width: 100%; min-width: 0; padding: 11px 34px 11px 13px; border: 1px solid rgba(201,229,156,.18); border-radius: 13px; background: #153522; color: #f1f3d5; font: inherit; }
.catalog-control select:disabled { opacity: .55; }
.catalog-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.catalog-results { display: flex; flex-direction: column; gap: 9px; }
.catalog-group-title { margin: 10px 2px 0; color: #e3e9c1; font-size: 15px; }
.product-group { display: flex; flex-direction: column; gap: 8px; }
.steam-info { display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid rgba(201,229,156,.14); border-radius: 15px; background: rgba(197,225,149,.06); }
.steam-info strong { font-size: 13px; }
.steam-info small { color: #a9bf9e; font-size: 10px; line-height: 1.5; }
.buy-button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .62; transform: none; }
.buy-button { width: 100%; margin-top: 16px; padding: 14px 18px; border: 0; border-radius: 15px; color: #1d1532; background: linear-gradient(100deg,#d3b4ff,#bfa0ff 50%,#d9bdff); box-shadow: 0 8px 24px #b78cff2b; font-size: 14px; font-weight: 800; cursor: pointer; transition: filter .2s, transform .2s; }
.buy-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.demo-note { margin: 11px 4px 0; color: #938da9; font-size: 10px; line-height: 1.45; text-align: center; }
.orders-empty { padding: 26px 14px; border: 1px dashed #ffffff1e; border-radius: 16px; color: #aaa3be; text-align: center; font-size: 13px; line-height: 1.6; }
.order-row { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid #ffffff12; }
.order-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: #aa8afa20; color: #d7c7ff; }
.order-main { display: flex; flex-direction: column; flex: 1; gap: 2px; }.order-main strong { font-size: 13px; }.order-main small { color: #9892ad; font-size: 10px; }.order-status { color: #d4b1ff; font-size: 10px; font-weight: 700; }
.toast { position: fixed; z-index: 30; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); left: 18px; width: fit-content; max-width: calc(100% - 36px); margin: auto; padding: 12px 17px; border: 1px solid #ffffff1c; border-radius: 15px; background: #332b50; box-shadow: 0 10px 30px #0007; color: #f3edff; font-size: 12px; animation: fade-in .18s ease; }

@media (min-width: 760px) {
  .app-shell { padding-top: 22px; }
  .topbar { margin-bottom: 0; }
  .catalog { gap: 16px; }
  .category-card { height: 220px; }
  .hero-card { height: 290px; }
  .hero-star { width: 256px; height: 256px; left: 47%; top: 10px; }
  .hero-wizard { width: 220px; height: 252px; right: 10%; }
  .premium-card .card-wizard, .gram-card .wizard-small { width: 150px; height: 178px; }
  .rental-card { height: 200px; }
  .rental-wizard { width: 190px; height: 220px; right: 12%; }
  .handle-pills { left: 28%; }
  .tiny-frog { right: 42%; }
}
@media (max-width: 759px) {
  .app-shell { width: min(100%, 480px); padding: max(7px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom)); }
  .topbar { height: 57px; margin-bottom: 9px; }
  .round-button { width: 41px; height: 41px; border: 0; background: #171628; }
  .brand-pill { height: 40px; gap: 8px; padding-right: 12px; }
  .menu-button { background: #171628; }
  .intro { display: none; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .category-card { height: 202px; padding: 16px; border-radius: 21px; }
  .category-card h2 { font-size: 20px; }
  .category-card .card-kicker { font-size: 7px; }
  .hero-card { grid-column: span 2; height: 200px; border-radius: 22px; }
  .hero-card .card-copy { margin-top: 2px; }
  .hero-card h2 { font-size: 25px; }
  .hero-star { width: 163px; height: 163px; top: 16px; left: 39%; }
  .hero-wizard { width: 151px; height: 177px; right: -1%; bottom: -13px; }
  .hero-orbit { width: 180px; height: 55px; }.orbit-a { right: 17%; top: 39px; }.orbit-b { right: -6%; top: 103px; width: 230px; }
  .card-caption { left: 17px; bottom: 13px; font-size: 10px; }
  .premium-card, .gram-card, .games-card, .subs-card, .gift-card { grid-column: span 1; }
  .premium-card .card-wizard { width: 126px; height: 148px; right: -13px; bottom: -16px; }
  .gram-card .wizard-small { width: 129px; height: 150px; right: -17px; bottom: -19px; }
  .premium-gem { right: 29px; bottom: 56px; font-size: 19px; }
  .mini-pill { left: 15px; bottom: 14px; padding: 5px 8px; font-size: 9px; }
  .coin-stack { right: 68px; bottom: 24px; font-size: 18px; }
  .stack-cards { right: 2px; bottom: 13px; transform: scale(.84); transform-origin: bottom right; }
  .sim-stack { right: 4px; bottom: 7px; transform: scale(.82); transform-origin: bottom right; }
  .gift-stack { right: 0; bottom: 8px; transform: scale(.82); transform-origin: bottom right; }
  .rental-card { grid-column: span 2; height: 154px; border-radius: 21px; }
  .rental-wizard { width: 139px; height: 163px; right: -3%; bottom: -17px; }
  .handle-pills { left: 17px; bottom: 14px; gap: 6px; }.handle-pills span { padding: 4px 8px; font-size: 9px; }
  .tiny-frog { right: 34%; bottom: 13px; font-size: 32px; }.coin-burst { right: 15%; bottom: 54px; font-size: 20px; }
  .purchases-row { gap: 11px; margin-top: 11px; padding: 11px 13px; border-radius: 18px; }
  .bag-icon { width: 35px; height: 35px; border-radius: 11px; }
  .purchases-copy strong { font-size: 13px; }.purchases-copy small { font-size: 9px; }
  footer { margin-top: 16px; }
}
@media (max-width: 360px) {
  .category-card { height: 190px; padding: 14px; }
  .hero-card { height: 184px; }
  .hero-star { width: 145px; height: 145px; left: 37%; }
  .hero-wizard { width: 138px; height: 163px; }
  .category-card h2 { font-size: 18px; }
  .rental-card { height: 145px; }
  .tile { transform-origin: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Green and gold banner theme */
:root {
  --gold: #e9c965;
  --gold-soft: #f4e5a6;
  --green-ink: #dff0cb;
}
.app-shell { width: min(100%, 980px); }
.ambient-one { background: #84cf62; opacity: .14; }
.ambient-two { background: #e4b94d; opacity: .08; }
.topbar { margin-bottom: 18px; }
.round-button, .brand-pill { border-color: rgba(201,229,156,.15); background: rgba(13,54,31,.72); }
.round-button:hover { background: rgba(41,103,51,.9); }
.brand-mark { background: linear-gradient(145deg,#8fc95e,#2d6e3d); box-shadow: 0 3px 12px #78b85c4d; }
.brand-mark svg { fill: #fff0a0; }
.brand-dot, .live-dot { background: #d9e681; box-shadow: 0 0 10px #d9e681; }
.eyebrow, .card-kicker { color: #b7d59a; }
.intro h1 span { color: #d7e893; }
.intro p { color: #a7bd9b; }
.intro-sparkle { color: var(--gold); }
.banner-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.banner-card {
  grid-column: span 1;
  height: auto;
  min-height: 0;
  aspect-ratio: 1536 / 656;
  padding: 0;
  border-color: rgba(194,231,135,.18);
  border-radius: 21px;
  background: #0a2819;
  box-shadow: inset 0 1px rgba(227,245,173,.12), 0 12px 34px rgba(0,8,3,.38);
}
.banner-card.hero-card { grid-column: span 2; aspect-ratio: 1536 / 864; height: auto; background: #0a2819; }
.banner-card.rental-card { grid-column: span 1; height: auto; aspect-ratio: 1536 / 656; background: #0a2819; }
.banner-card.accounts-card { grid-column: span 2; height: auto; aspect-ratio: 1536 / 656; background: #0a2819; }
.banner-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.banner-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,246,190,.09); transition: box-shadow .22s; }
.banner-card:hover { border-color: rgba(229,218,133,.56); filter: brightness(1.06) saturate(1.04); }
.banner-card:hover::after { box-shadow: inset 0 0 0 2px rgba(244,225,142,.34), inset 0 -30px 50px rgba(4,30,12,.16); }
.purchases-row { border-color: rgba(201,229,156,.14); background: linear-gradient(100deg,#103c24,#0b2a1a); }
.purchases-row:hover { border-color: rgba(231,209,119,.55); }
.bag-icon { border-color: rgba(201,229,156,.14); background: rgba(186,220,117,.08); }
.bag-icon svg { stroke: #e7dfa0; }
.purchase-count { background: rgba(216,222,125,.14); color: #e8e697; }
.chevron { color: #b2c79e; }
footer { color: #79947c; }
.footer-spark { color: var(--gold); }
.modal-backdrop { background: rgba(1,12,6,.78); }
.sheet { border-color: rgba(201,229,156,.15); background: linear-gradient(145deg,#123a25,#081d13); }
.sheet-eyebrow { color: #d7e893; }
.sheet-lead, .orders-empty, .demo-note { color: #a9bf9e; }
.sheet-close { background: rgba(191,221,120,.1); color: #dfe9bd; }
.product-option { border-color: rgba(201,229,156,.12); background: rgba(197,225,149,.06); }
.product-option.selected, .product-option:hover { border-color: rgba(231,209,119,.62); background: rgba(218,205,108,.1); }
.product-price, .order-status { color: #e8d987; }
.buy-button { color: #102615; background: linear-gradient(100deg,#d7e985,#e8ce72 50%,#f0e6a2); box-shadow: 0 8px 24px rgba(218,211,110,.2); }
.rental-controls { color: #bdcea7; }
.rental-controls select { border-color: rgba(201,229,156,.18); background: rgba(197,225,149,.08); color: #f1f3d5; }
.rental-state { border-color: rgba(201,229,156,.2); color: #a9bf9e; }
.number-offer { border-color: rgba(201,229,156,.13); background: rgba(197,225,149,.06); }
.number-offer:hover, .number-offer.selected { border-color: rgba(231,209,119,.62); background: rgba(218,205,108,.1); }
.number-badge { background: linear-gradient(145deg,#68964e,#254c32); color: #f4e5a6; }
.number-details small { color: #a9bf9e; }
.number-price { color: #e8d987; }
.rental-warning { color: #dfc878; }
.toast { border-color: rgba(225,211,122,.28); background: #18472b; }

@media (max-width: 759px) {
  .app-shell { width: min(100%, 480px); }
  .banner-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Keep the source banner proportions so text and artwork never get cropped. */
  .banner-card { grid-column: span 1; height: auto; aspect-ratio: 1536 / 656; border-radius: 16px; }
  .banner-card.hero-card { grid-column: span 2; height: auto; aspect-ratio: 1536 / 864; }
  .banner-card.rental-card { grid-column: span 1; height: auto; aspect-ratio: 1536 / 656; }
  .banner-card.accounts-card { grid-column: span 2; height: auto; aspect-ratio: 1536 / 656; }
  .banner-catalog { row-gap: 14px; }
  .purchases-row { margin-top: 15px; }
  footer { margin-top: 19px; }
}

/* Profile and account cards above the catalog */
.account-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 13px;
}
.account-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(214,239,166,.28);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #f6f8e4 0 13%, #8eb7bb 14% 39%, #3b7164 40% 70%, #183e2b 71%);
  box-shadow: 0 5px 18px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.38);
  font-size: 23px;
  line-height: 1;
}
.account-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.account-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-name strong { overflow: hidden; color: #f5f8e9; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-name small { color: #98b39a; font-size: 10px; }
.account-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.account-card { min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px; border: 0; border-radius: 18px; background: #202136; color: #f4f3fb; text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.025); }
button.account-card { font: inherit; cursor: pointer; transition: transform .2s, filter .2s; }
button.account-card:hover { filter: brightness(1.08); transform: translateY(-2px); }
.account-card strong { font-size: 16px; line-height: 1.08; }
.assets-card > span { color: #9c9cad; font-size: 16px; }
.cashback-card { cursor: pointer; }
.cashback-badge { padding: 4px 9px; border-radius: 13px; background: linear-gradient(100deg,#8e7bc0,#a892d3); color: #fff; font-size: 12px; font-weight: 800; }
.promo-gift {
  width: 43px;
  height: 43px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(247,225,138,.45);
  border-radius: 50%;
  background: linear-gradient(145deg,#e5c66c,#a9782d);
  box-shadow: 0 7px 22px rgba(210,169,74,.26), inset 0 1px rgba(255,255,255,.42);
  font-size: 21px;
  cursor: pointer;
  transition: transform .2s, filter .2s;
}
.promo-gift:hover { filter: brightness(1.1); transform: translateY(-2px) rotate(5deg); }
.wallet-view { color: #f4f3fb; }
.wallet-heading { display: flex; align-items: center; gap: 8px; margin: 2px 0 18px; font-size: 17px; }
.wallet-heading > span:last-child { color: #9f9daf; font-size: 14px; }
.wallet-coin { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #2ac486; color: #fff; font-size: 19px; font-weight: 800; }
.wallet-total { display: flex; align-items: baseline; gap: 7px; padding-left: 8px; }
.wallet-total strong { font-size: 41px; letter-spacing: -.04em; }
.wallet-total span { color: #a3a2b4; font-size: 17px; }
.wallet-usd { margin: 1px 0 17px 66px; color: #a9a6bb; font-size: 16px; }
.wallet-topup-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 120px; margin: 0 0 26px; padding: 10px 16px; border: 0; border-radius: 13px; background: #102c60; color: #f5f5ff; font-size: 13px; font-weight: 800; cursor: pointer; }
.wallet-topup-action span { color: #55a9ff; font-size: 24px; line-height: .7; }
.wallet-section-label { margin: 0 0 8px 2px; color: #85879d; font-size: 12px; letter-spacing: .04em; }
.wallet-rate-card { display: grid; grid-template-columns: auto 1fr; gap: 3px 7px; margin-bottom: 24px; padding: 16px; border-radius: 17px; background: #25263b; }
.wallet-rate-card strong { color: #ae98f6; font-size: 21px; }
.wallet-rate-card > span { align-self: center; color: #a2a1b1; font-size: 13px; }
.wallet-rate-card small { grid-column: span 2; color: #a6a4b5; font-size: 13px; }
.wallet-rate-card b { color: #f6f4fb; }
.wallet-section-row { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; color: #85879d; font-size: 12px; }
.wallet-section-row button { padding: 0; border: 0; background: transparent; color: #4a9dff; font: inherit; cursor: pointer; }
.transactions-list { display: flex; flex-direction: column; gap: 15px; padding: 13px 12px; border-radius: 17px; background: #25263b; }
.transaction { display: flex; align-items: center; gap: 9px; min-width: 0; }
.transaction-icon { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #35364b; color: #a4a4b7; font-size: 17px; }
.transaction-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.transaction-copy b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy small { overflow: hidden; color: #8f8fa2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy em { margin-left: 4px; padding: 2px 5px; border-radius: 9px; background: #328bea; color: #fff; font-size: 9px; font-style: normal; }
.transaction-amount { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 800; white-space: nowrap; }
.transaction-amount small { color: #8f8fa2; font-size: 10px; font-weight: 500; }
.transaction-amount.positive { color: #44d77d; }
.transaction-amount.negative { color: #f1f0f8; }
.cashback-view, .cashback-levels-view { color: #f4f3fb; text-align: center; }
.cashback-coin { width: 74px; height: 74px; display: grid; place-items: center; margin: 2px auto 13px; border: 2px solid #aaa9d9; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#ecebff,#7774ad 56%,#3e3b70); box-shadow: inset 0 0 0 5px #aaa9d92e, 0 9px 25px #0005; color: #3d3b73; font-size: 17px; font-weight: 900; transform: rotate(-10deg); }
.cashback-view h2, .cashback-levels-view h2 { margin: 0 0 8px; font-size: 27px; }
.cashback-lead { max-width: 350px; margin: 0 auto 10px; color: #aaa8b9; font-size: 14px; line-height: 1.35; }
.cashback-more { margin: 0 0 22px; border: 0; background: transparent; color: #328bea; font: inherit; font-size: 13px; cursor: pointer; }
.cashback-more span { font-size: 21px; vertical-align: -2px; }
.cashback-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
.cashback-level-card, .cashback-points-card { min-height: 146px; display: flex; flex-direction: column; padding: 16px; border-radius: 17px; }
.cashback-level-card { background: linear-gradient(145deg,#8b78bd,#6e5d9f); }
.cashback-points-card { background: #25263b; }
.cashback-level-card small, .cashback-points-card small { color: #d9d5e6; font-size: 12px; }
.cashback-level-card small span, .cashback-points-card small span { float: right; font-size: 18px; }
.cashback-level-card strong, .cashback-points-card strong { margin-top: 5px; font-size: 24px; }
.cashback-points-card strong { color: #f8f7ff; }
.cashback-level-card em, .cashback-points-card em { margin-top: auto; color: #e2dff0; font-size: 11px; font-style: normal; line-height: 1.2; }
.cashback-progress { display: flex; align-items: center; gap: 5px; margin: 24px 0 13px; padding: 3px 8px; border-radius: 15px; background: #25263b; color: #aaa8b9; font-size: 11px; }
.cashback-progress span:first-child { padding: 8px 10px; border-radius: 13px; background: #328bea; color: #fff; font-weight: 800; }
.cashback-progress i { height: 4px; flex: 1; border-radius: 4px; background: #4a4b63; }
.cashback-hint { margin: 0 auto 20px; color: #aaa8b9; font-size: 12px; line-height: 1.35; }
.cashback-hint b { color: #f4f3fb; }.cashback-hint strong { color: #ad98ef; }
.cashback-view h3, .cashback-levels-view h3 { margin: 19px 0 10px; text-align: left; font-size: 20px; }
.cashback-spend-card { min-height: 62px; display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 12px 14px; border-radius: 17px; background: #25263b; text-align: left; }
.cashback-spend-card > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #35364b; color: #a8a5bd; font-size: 17px; }
.cashback-spend-card b { display: flex; flex: 1; flex-direction: column; gap: 3px; font-size: 13px; }.cashback-spend-card b small { color: #85869b; font-size: 10px; font-weight: 500; }.cashback-spend-card b em { color: #28c582; font-style: normal; }
.cashback-spend-card > strong { padding: 7px 12px; border-radius: 11px; background: #f4e8ae; color: #2d2a3c; font-size: 11px; }
.cashback-spend-card.muted { opacity: .72; }.cashback-spend-card.muted small { margin-left: auto; padding: 4px 7px; border-radius: 10px; background: #45465b; color: #b8b6c4; font-size: 10px; }
.level-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 90px; margin-top: 12px; padding: 20px; border-radius: 18px; background: linear-gradient(120deg,#12a74b,#20c968); text-align: left; }
.level-hero small { font-size: 12px; }.level-hero strong { margin-top: 5px; font-size: 24px; }.level-coin { position: absolute; right: 20px; top: -7px; width: 65px; height: 65px; display: grid; place-items: center; border: 2px solid #9de1a6; border-radius: 50%; background: #76bd84; color: #2d7547; font-size: 15px; font-weight: 900; transform: rotate(-12deg); }
.level-details { margin-top: -1px; padding: 16px 20px; border-radius: 0 0 17px 17px; background: #25263b; text-align: left; }.level-details p { margin: 0 0 5px; color: #9493a6; font-size: 13px; }.level-details strong { display: block; margin-bottom: 17px; font-size: 17px; }.level-details b { color: #0ab768; font-size: 17px; }
.level-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 22px; }.level-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2a2b40; }.level-dots i:first-child { width: 20px; border-radius: 5px; background: #45c66f; }
.levels-steps { padding: 13px 16px; border-radius: 17px; background: #25263b; text-align: left; }.levels-steps p { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 3px 10px; margin: 0; padding: 10px 0; }.levels-steps p + p { border-top: 1px solid #3b3c50; }.levels-steps i { grid-row: span 2; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #3a3b51; color: #c0bfd0; font-style: normal; }.levels-steps b { font-size: 13px; }.levels-steps small { color: #8f8fa4; font-size: 12px; line-height: 1.35; }.cashback-faq { display: flex; flex-direction: column; gap: 0; padding: 8px 16px; border-radius: 17px; background: #17182b; text-align: left; }.cashback-faq span { padding: 11px 0; border-bottom: 1px solid #2e2f42; color: #e6e4ef; font-size: 12px; }.cashback-faq span:last-child { border-bottom: 0; }
.promo-code {
  padding: 17px 18px;
  border: 1px dashed rgba(231,209,119,.7);
  border-radius: 16px;
  background: rgba(218,205,108,.1);
  color: #f4e5a6;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
}

@media (max-width: 759px) {
  .account-strip { margin: -4px 0 12px; }
  .account-identity { gap: 7px; }
  .account-avatar, .promo-gift { width: 41px; height: 41px; }
  .account-name strong { font-size: 13px; }
  .account-cards { gap: 10px; margin-bottom: 15px; }
  .account-card { min-height: 116px; padding: 15px; border-radius: 17px; }
  .account-card strong { font-size: 15px; }
  .assets-card > span { font-size: 15px; }
  .wallet-total strong { font-size: 37px; }
  .wallet-usd { margin-left: 60px; }
}

/* Keep account and cashback views in the shop's green-and-gold palette. */
.account-card { background: linear-gradient(145deg,#123c27,#0c2a1b); color: #eff4dc; box-shadow: inset 0 1px rgba(226,244,177,.1), 0 8px 24px rgba(0,12,5,.2); }
.account-card:hover { filter: brightness(1.1); }
.assets-card > span { color: #b5c7a0; }
.cashback-badge { background: linear-gradient(100deg,#b3974d,#d8c46c); color: #172b1d; }
.wallet-coin { background: linear-gradient(145deg,#d8c76d,#689c52); color: #18331f; }
.wallet-topup-action { background: linear-gradient(100deg,#1b7143,#2c9456); color: #f0f5db; box-shadow: 0 7px 18px rgba(22,126,71,.2); }
.wallet-topup-action span { color: #f0df89; }
.wallet-section-row button { color: #dec965; }
.wallet-rate-card, .transactions-list { background: #123a25; border: 1px solid rgba(201,229,156,.1); }
.wallet-rate-card strong { color: #e4d275; }
.wallet-rate-card > span, .wallet-rate-card small, .wallet-section-label, .wallet-section-row { color: #a7bd9b; }
.wallet-rate-card b { color: #eff4dc; }
.wallet-empty { padding: 18px 8px; color: #9cb699; font-size: 12px; text-align: center; }
.transaction-icon { background: #1d5435; color: #d8d98a; }
.cashback-coin { border-color: #d6ca76; background: radial-gradient(circle at 35% 25%,#eff2c4,#98b85f 54%,#3d7443); color: #21452b; box-shadow: inset 0 0 0 5px rgba(239,242,196,.2), 0 9px 25px rgba(0,0,0,.32); }
.cashback-lead, .cashback-hint { color: #a7bd9b; }
.cashback-more { color: #e2cf6f; }
.cashback-level-card { background: linear-gradient(145deg,#a88e4b,#6d733e); }
.cashback-points-card, .cashback-spend-card, .level-details, .levels-steps { background: #123a25; border: 1px solid rgba(201,229,156,.1); }
.cashback-level-card small, .cashback-points-card small, .cashback-level-card em, .cashback-points-card em { color: #e2e8c6; }
.cashback-points-card strong { color: #eff4dc; }
.cashback-progress { background: #123a25; color: #a7bd9b; border: 1px solid rgba(201,229,156,.1); }
.cashback-progress span:first-child { background: linear-gradient(100deg,#d4bc61,#e4d67f); color: #1c3422; }
.cashback-progress i { background: #356343; }
.cashback-hint b { color: #eff4dc; }.cashback-hint strong { color: #e2cf6f; }
.cashback-spend-card > span { background: #1d5435; color: #e2cf6f; }
.cashback-spend-card > strong { background: #e6d783; color: #1c3422; }
.cashback-spend-card.muted small { background: #31533b; color: #c4d2ab; }
.level-hero { background: linear-gradient(120deg,#237743,#7b8e4b); }
.level-details p, .levels-steps small { color: #a7bd9b; }
.level-details b { color: #e2cf6f; }
.level-dots i { background: #254b31; }.level-dots i:first-child { background: #d3bf61; }
.levels-steps p + p { border-color: rgba(201,229,156,.16); }.levels-steps i { background: #2d5c3b; color: #e0e8c5; }
.cashback-faq { background: #0d2d1d; }.cashback-faq span { border-color: rgba(201,229,156,.15); color: #e6edd2; }