:root{
  --bg:#f7fbff;
  --paper:#ffffff;
  --panel:#ffffff;
  --ink:#111827;
  --muted:#717987;
  --line:#e4eaf3;
  --blue:#1677ff;
  --blue2:#12a9e6;
  --navy:#111827;
  --soft:#f3f7fd;
  --success:#0aa36f;
  --danger:#dc2626;
  --shadow:0 24px 70px rgba(17,24,39,.09);
  --r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 0%,rgba(22,119,255,.10),transparent 27%),
    radial-gradient(circle at 88% 8%,rgba(18,169,230,.12),transparent 28%),
    linear-gradient(180deg,#fbfdff,#f2f7ff);
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 34px));margin:0 auto}
.topTicker{
  height:42px;
  background:rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#6b7280;
  font-size:.86rem;
  font-weight:800;
}
.tickerInner{
  display:flex;
  gap:28px;
  white-space:nowrap;
  animation:tickerMove 28s linear infinite;
}
.tickerInner span{display:inline-flex;align-items:center;gap:9px}
.tickerDot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.10)}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.top{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-weight:950;letter-spacing:.02em}
.brand img{width:44px;height:44px;border-radius:15px;background:#fff;border:1px solid var(--line);padding:4px;box-shadow:0 12px 28px rgba(22,119,255,.10)}
.links{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(243,247,253,.78);
}
.links a{
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 16px;
  border-radius:14px;
  color:#6b7280;
  font-weight:850;
  font-size:.92rem;
}
.links a:hover,.links a.active{background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(17,24,39,.06)}
.actions{display:flex;align-items:center;gap:8px}
.btn{
  border:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  font-weight:950;
  box-shadow:0 16px 34px rgba(22,119,255,.18);
}
.btn.dark{background:#111827;color:#fff;box-shadow:0 16px 34px rgba(17,24,39,.18)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:#fff;color:var(--danger);border:1px solid rgba(220,38,38,.22);box-shadow:none}
.btn:disabled{opacity:.58;cursor:not-allowed}
main{padding:46px 0 64px}
.hero{
  min-height:calc(100vh - 164px);
  display:grid;
  align-items:center;
}
.heroBox{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}
.heroMain{padding:22px 0}
h1{
  font-size:clamp(3rem,7.5vw,6.4rem);
  line-height:.88;
  letter-spacing:-.095em;
  max-width:720px;
}
h1 span{color:var(--blue)}
h2{font-size:clamp(1.75rem,3vw,2.75rem);line-height:.96;letter-spacing:-.065em}
h3{font-size:1.18rem;letter-spacing:-.04em}
p{color:var(--muted);font-weight:650;line-height:1.66;margin-top:16px}
.heroLead{font-size:1.08rem;max-width:610px}
.heroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.ratingLine{display:flex;align-items:center;gap:18px;margin-top:30px;color:var(--muted);font-weight:750}
.avatars{display:flex}
.avatars i{
  width:30px;height:30px;border-radius:999px;background:#eef2f7;border:2px solid #fff;
  display:grid;place-items:center;font-style:normal;font-size:.72rem;font-weight:950;color:#64748b;margin-left:-6px;
}
.avatars i:first-child{margin-left:0}
.stars{color:#f59e0b;letter-spacing:2px;font-weight:950}
.visual{
  position:relative;
  min-height:430px;
}
.floatGrid{
  position:absolute;
  inset:0;
}
.infoCard{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
}
.infoCard b{display:block;font-size:1.08rem}
.infoCard span{display:block;color:var(--muted);font-weight:750;font-size:.9rem;margin-top:4px}
.cardFast{left:8%;top:12%;width:300px}
.cardUsers{right:5%;top:22%;width:220px}
.cardBlack{left:8%;top:42%;width:300px;background:#111827;color:#fff;border-color:#111827}
.cardBlack span{color:#9ca3af}
.cardSecure{right:5%;bottom:10%;width:300px;background:#0aa36f;color:#fff;border-color:#0aa36f}
.cardSecure span{color:rgba(255,255,255,.78)}
.progress{height:9px;background:#eef2f7;border-radius:999px;margin-top:14px;overflow:hidden}
.progress i{display:block;height:100%;width:88%;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--blue2))}
.iconBox{
  width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:grid;place-items:center;color:white;font-size:1.25rem;margin-bottom:12px;
}
.card,.sidePanel{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.formWrap{width:min(520px,100%);margin:0 auto}
.formCard{padding:24px}
label{display:block;margin:14px 0 7px;color:#374151;font-weight:900}
input,select,textarea{
  width:100%;min-height:48px;border-radius:14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);padding:0 13px;font-weight:750;outline:none;
}
textarea{padding:12px 13px;min-height:82px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(22,119,255,.46);box-shadow:0 0 0 4px rgba(22,119,255,.10)}
.msg{display:none;margin-top:12px;padding:12px;border-radius:14px;font-weight:850;line-height:1.45}
.msg.ok{display:block;background:#ecfdf5;border:1px solid #bbf7d0;color:#047857}
.msg.err{display:block;background:#fff1f2;border:1px solid #fecdd3;color:#be123c}
.switchLine{
  margin-top:16px;padding:13px;border-radius:16px;background:var(--soft);border:1px solid var(--line);
  text-align:center;color:var(--muted);font-weight:750;
}
.linkBtn{border:0;background:transparent;color:var(--blue);font-weight:950;cursor:pointer;font:inherit}
.screen{display:none;animation:fade .18s ease both}.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.dashboard{display:none}.dashboard.show{display:block}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px}
.mini b{display:block;font-size:1.05rem}.mini span{display:block;color:var(--muted);font-weight:750;font-size:.85rem;margin-top:4px}
.list{display:grid;gap:10px}
.row{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px}
.rowTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-weight:950;font-size:.78rem;background:var(--soft);color:#1d4ed8}
.badge.pending{background:#fff7ed;color:#c2410c}.badge.processing{background:#eff6ff;color:#1d4ed8}.badge.completed{background:#ecfdf5;color:#047857}.badge.code_expired{background:#fff1f2;color:#be123c}.badge.cancelled{background:#f1f5f9;color:#475569}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.meta div{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px;font-weight:750;color:#374151}
.meta b{display:block;color:var(--ink);font-size:.82rem;margin-bottom:3px}
.tools{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:10px;align-items:end}
.empty{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:850}
.gameCardInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.gameGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gameCard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 6px 18px rgba(17,24,39,.04);display:flex;flex-direction:column;min-width:0}
.gameCover{height:78px;border-radius:8px;overflow:hidden;margin-bottom:6px;background:var(--soft);border:1px solid var(--line);flex:0 0 auto}
.gameCover img{width:100%;height:100%;object-fit:cover;display:block}
.gameTop{display:flex;justify-content:space-between;gap:4px;margin-bottom:0;color:var(--muted);font-weight:800;font-size:.64rem;line-height:1.2}
.gameTop span:last-child{color:var(--blue);font-weight:850}
.gameCard h3{font-size:.78rem;line-height:1.2;margin-bottom:0;min-height:2.2em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gameCard p{display:none}
.gameBtn{margin-top:6px;min-height:30px;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-weight:900;font-size:.74rem;display:flex;align-items:center;justify-content:center;padding:0 6px;text-align:center;flex:0 0 auto}
.gameSearchCard{padding:20px}
.gameSearchCard p{margin-bottom:12px;color:var(--muted);font-size:.9rem;line-height:1.45}
.gameSearchCard label{margin-bottom:6px}
.gameSearchCard input{min-height:44px}
.gameChoice{display:flex;align-items:center;gap:8px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#374151;font-weight:850;cursor:pointer;padding:6px 8px;text-align:left;width:100%}
.gameChoiceThumb{width:28px;height:38px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:var(--soft);border:1px solid var(--line)}
.gameChoice span{line-height:1.2;font-size:.82rem}
.gameChoice.selected{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border-color:transparent}
.gameChoice.selected .gameChoiceThumb{border-color:rgba(255,255,255,.35)}
.gameChoiceList{max-height:min(52vh,440px);overflow-y:auto;padding-right:4px}
.gameChoiceList::-webkit-scrollbar{width:8px}
.gameChoiceList::-webkit-scrollbar-thumb{background:#d7e3f5;border-radius:999px}
@media(min-width:1100px){
  .gameGrid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:960px){
  .gameGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .gameGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gameCover{height:74px}
  .gameCard h3{font-size:.76rem;min-height:2.1em}
}
@media(max-width:620px){
  .container{width:calc(100% - 20px)}
  main{padding:10px 0 24px}
  .gameSearchCard{padding:14px 14px 12px;margin-bottom:10px;border-radius:16px}
  .gameSearchCard h2{font-size:1.12rem;margin-bottom:4px}
  .gameSearchCard p{font-size:.82rem;margin-bottom:10px;line-height:1.35}
  .gameSearchCard input{min-height:42px;font-size:.92rem}
  .gameGrid{grid-template-columns:1fr;gap:8px}
  .gameCard{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:14px;
  }
  .gameCover{
    width:54px;
    height:70px;
    margin-bottom:0;
    flex:0 0 54px;
    border-radius:10px;
  }
  .gameCardInfo{gap:2px}
  .gameCard h3{
    min-height:auto;
    font-size:.84rem;
    line-height:1.25;
    -webkit-line-clamp:2;
  }
  .gameTop{font-size:.62rem}
  .gameBtn{
    margin-top:0;
    min-height:38px;
    min-width:86px;
    padding:0 10px;
    font-size:.72rem;
    border-radius:10px;
  }
  .gameChoiceList{max-height:min(44vh,340px)}
  .gameChoice{min-height:46px;padding:8px 10px;border-radius:12px}
  .gameChoiceThumb{width:34px;height:44px}
  .gameChoice span{font-size:.84rem}
  .keyWizard.formCard{padding:16px}
  .wizardTop{margin-bottom:14px}
  .wizardSteps{width:100%;justify-content:space-between}
  .wizardDot{flex:1;justify-content:center;padding:0 6px;font-size:.74rem;min-height:34px}
  .wizardDot em{width:20px;height:20px;font-size:.72rem}
}
@media(max-width:380px){
  .gameCard{gap:8px;padding:9px}
  .gameCover{width:48px;height:62px;flex-basis:48px}
  .gameBtn{min-width:76px;padding:0 8px;font-size:.68rem}
  .gameCard h3{font-size:.8rem}
}
.footer{padding:28px 0;color:var(--muted);font-weight:750;border-top:1px solid var(--line)}
.navToggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  box-shadow:0 8px 20px rgba(17,24,39,.05);
}
.navToggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.navToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navToggle.open span:nth-child(2){opacity:0}
.navToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobileNav{
  display:none;
  flex-direction:column;
  gap:6px;
  padding:10px 17px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(18px);
}
.mobileNav.open{display:flex}
.mobileNav a{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:14px;
  color:#6b7280;
  font-weight:850;
  font-size:.92rem;
  border:1px solid var(--line);
  background:var(--soft);
}
.mobileNav a.active,.mobileNav a:hover{
  background:#fff;
  color:var(--ink);
  box-shadow:0 10px 24px rgba(17,24,39,.06);
}
.headerAuthUser[hidden],.headerAuthGuest[hidden]{display:none!important}
body.navOpen{overflow:hidden}
@media(max-width:960px){
  .topTicker{display:none}
  .links{display:none}
  .navToggle{display:inline-flex;margin-left:auto}
  .hero{min-height:auto}
  .heroBox,.grid2,.grid3{grid-template-columns:1fr}
  .visual{min-height:520px}
  .cardFast,.cardBlack{left:0;width:78%}
  .cardUsers,.cardSecure{right:0;width:68%}
  .meta,.tools{grid-template-columns:1fr}
  .nav{height:auto;min-height:72px;padding:10px 0}
  h1{font-size:clamp(3rem,14vw,4.8rem)}
}
@media(max-width:620px){
  .actions .btn{padding:0 12px}
  .brand{font-size:.94rem}
  .visual{display:none}
}


.heroBox{
  max-width:900px;
}
.heroMain{
  text-align:left;
  padding:42px 0 34px;
}
.heroMain h1{
  line-height:.96;
  letter-spacing:-.075em;
}
.heroMain h1 span{
  display:inline-block;
  margin:.08em 0;
}
.visual{
  display:none!important;
}
.heroLead{
  max-width:620px;
}
@media(max-width:620px){
  .heroMain{
    padding:26px 0 24px;
  }
  .heroMain h1{
    line-height:1;
    letter-spacing:-.065em;
  }
}


.processSection{
  padding:74px 0 64px;
  background:#fff;
  border-top:1px solid var(--line);
}
.sectionHead{
  text-align:center;
  margin-bottom:46px;
}
.sectionHead small{
  color:var(--blue);
  font-weight:950;
  letter-spacing:.12em;
  font-size:.78rem;
}
.sectionHead h2{
  margin-top:10px;
}
.processLine{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.processLine:before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:40px;
  height:2px;
  background:#e5e7eb;
}
.stepItem{
  position:relative;
  text-align:center;
  z-index:1;
}
.stepIcon{
  width:76px;
  height:76px;
  margin:0 auto 18px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(17,24,39,.07);
  color:#374151;
  font-size:1.9rem;
  position:relative;
}
.stepItem:first-child .stepIcon{
  background:#eff6ff;
  color:var(--blue);
  border-color:#bfdbfe;
}
.stepNo{
  position:absolute;
  right:-10px;
  top:-10px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  font-weight:950;
  font-size:.84rem;
}
.stepItem h3{
  margin-bottom:7px;
}
.stepItem p{
  margin:0 auto;
  max-width:210px;
  font-size:.92rem;
}
.reviewSection{
  padding:80px 0;
  background:#fbfdff;
  border-top:1px solid var(--line);
}
.reviewGrid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:40px;
  align-items:center;
}
.reviewSide small{
  color:var(--blue);
  font-weight:950;
  letter-spacing:.12em;
  font-size:.78rem;
}
.reviewSide h2{
  margin-top:10px;
}
.reviewArrows{
  display:flex;
  gap:10px;
  margin-top:26px;
}
.arrowBtn{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:1.2rem;
  color:#6b7280;
  font-weight:950;
}
.reviewCard{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:34px;
  min-height:260px;
  box-shadow:0 20px 60px rgba(17,24,39,.07);
}
.reviewQuote{
  position:absolute;
  right:28px;
  top:20px;
  font-size:5rem;
  line-height:1;
  color:#eef2f7;
  font-weight:950;
}
.reviewStars{
  color:#f59e0b;
  letter-spacing:3px;
  font-weight:950;
  margin-bottom:24px;
  font-size:1.15rem;
}
.reviewText{
  position:relative;
  z-index:1;
  color:#374151;
  font-size:1.25rem;
  line-height:1.55;
  font-weight:700;
  max-width:700px;
}
.reviewUser{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:28px;
}
.reviewAvatar{
  width:48px;
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  font-weight:950;
}
.reviewUser b{display:block}
.reviewUser span{display:block;color:var(--muted);font-size:.9rem;font-weight:750;margin-top:2px}
.reviewDots{
  position:absolute;
  right:32px;
  bottom:34px;
  display:flex;
  gap:6px;
}
.reviewDots i{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#d1d5db;
}
.reviewDots i.active{
  width:26px;
  background:var(--blue);
}
.page{display:none}.page.active{display:block}
@media(max-width:960px){
  .processLine{grid-template-columns:1fr;gap:28px}
  .processLine:before{display:none}
  .processTrack{display:none!important}
  .reviewGrid{grid-template-columns:1fr}
  .reviewCard{padding:24px}
  .reviewText{font-size:1.05rem}
}



@media (prefers-reduced-motion: reduce){
  *,
  *:before,
  *:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .processLine:before,
  .processLine:after{
    transform:none!important;
  }
}
@media(max-width:960px){
  .processLine:after{display:none}
}



/* v33 New overall motion style: cleaner slide + scale, less floaty */
.heroMain{
  animation:heroRevealV33 .82s cubic-bezier(.16,.95,.2,1) both!important;
}
@keyframes heroRevealV33{
  from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}
.reviewCard,
.gameCard,
.card{
  animation:cardRevealV33 .62s cubic-bezier(.16,.95,.2,1) both!important;
}
@keyframes cardRevealV33{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}
}
.btn:hover{
  transform:translateY(-2px) scale(1.015)!important;
}
.arrowBtn:hover,
.gameBtn:hover{
  transform:translateY(-2px) scale(1.02)!important;
}
.gameChoice:hover{
  transform:translateX(5px)!important;
}
.reviewCard.switching{
  opacity:.35!important;
  transform:translateX(12px) scale(.99)!important;
  transition:.18s ease!important;
}
@media(max-width:960px){
  .processLine:after{
    display:none!important;
  }
}



/* v35 Cinematic Intro */
.ndIntro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(22,119,255,.14), transparent 18%),
    radial-gradient(circle at 18% 20%, rgba(18,169,230,.12), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(22,119,255,.12), transparent 24%),
    linear-gradient(180deg,#030812 0%,#07111f 45%,#0a1628 100%);
  transition:opacity .7s ease, visibility .7s ease;
}
.ndIntro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.ndIntro:before,
.ndIntro:after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 55%, transparent 100%);
  transform:translateX(-120%) skewX(-18deg);
  animation:introBeam 2.6s cubic-bezier(.18,.88,.18,1) infinite;
  mix-blend-mode:screen;
}
.ndIntro:after{
  animation-delay:1.1s;
  opacity:.55;
}
@keyframes introBeam{
  0%{transform:translateX(-120%) skewX(-18deg);opacity:0}
  18%{opacity:.6}
  50%{opacity:1}
  100%{transform:translateX(140%) skewX(-18deg);opacity:0}
}
.ndIntroGrid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(99,162,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,162,255,.07) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.9) 18%, rgba(0,0,0,.9) 82%, transparent);
  opacity:.75;
  animation:introGridMove 5s linear infinite;
}
@keyframes introGridMove{
  from{background-position:0 0,0 0}
  to{background-position:52px 52px,52px 52px}
}
.ndIntroHalo{
  position:absolute;
  width:min(72vw,780px);
  aspect-ratio:1/1;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(41,122,255,.26) 0%, rgba(41,122,255,.11) 32%, rgba(41,122,255,0) 64%);
  filter:blur(16px);
  animation:introHalo 2.8s ease-in-out infinite alternate;
}
@keyframes introHalo{
  from{transform:scale(.9);opacity:.72}
  to{transform:scale(1.08);opacity:1}
}
.ndIntroParticles{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.ndIntroParticles i{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 14px rgba(22,119,255,.6);
  animation:introParticle 3.6s linear infinite;
}
.ndIntroParticles i:nth-child(1){left:12%;top:72%;animation-delay:.1s}
.ndIntroParticles i:nth-child(2){left:24%;top:60%;animation-delay:.5s}
.ndIntroParticles i:nth-child(3){left:34%;top:78%;animation-delay:1.1s}
.ndIntroParticles i:nth-child(4){left:48%;top:68%;animation-delay:1.6s}
.ndIntroParticles i:nth-child(5){left:59%;top:80%;animation-delay:2.1s}
.ndIntroParticles i:nth-child(6){left:72%;top:62%;animation-delay:.8s}
.ndIntroParticles i:nth-child(7){left:84%;top:74%;animation-delay:1.4s}
.ndIntroParticles i:nth-child(8){left:66%;top:55%;animation-delay:2.5s}
@keyframes introParticle{
  0%{transform:translateY(40px) scale(.4);opacity:0}
  20%{opacity:.9}
  100%{transform:translateY(-120px) scale(1.2);opacity:0}
}
.ndIntroCenter{
  position:relative;
  z-index:2;
  padding:24px;
}
.ndIntroText{
  position:relative;
  font-size:clamp(3.2rem,12vw,8.8rem);
  line-height:.88;
  letter-spacing:-.12em;
  font-weight:1000;
  text-transform:uppercase;
  color:#fff;
  text-align:center;
  padding:0 .06em;
  text-shadow:
    0 0 24px rgba(22,119,255,.42),
    0 0 60px rgba(22,119,255,.24),
    0 0 120px rgba(18,169,230,.14);
  animation:introTextIn 2.25s cubic-bezier(.16,.96,.2,1) both;
}
.ndIntroText span{
  display:block;
  background:linear-gradient(180deg,#ffffff 0%, #dbeafe 32%, #86c7ff 82%, #4f87ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ndIntroText:before,
.ndIntroText:after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  color:#fff;
  opacity:0;
  pointer-events:none;
}
.ndIntroText:before{
  transform:translateX(3px);
  text-shadow:-2px 0 rgba(18,169,230,.55);
  animation:introGlitchA 2.4s linear 1;
}
.ndIntroText:after{
  transform:translateX(-3px);
  text-shadow:2px 0 rgba(22,119,255,.45);
  animation:introGlitchB 2.4s linear 1;
}
@keyframes introTextIn{
  0%{transform:scale(.82);opacity:0;filter:blur(14px)}
  35%{opacity:1}
  52%{transform:scale(1.04);filter:blur(0)}
  72%{transform:scale(.995)}
  100%{transform:scale(1)}
}
@keyframes introGlitchA{
  0%,14%,16%,31%,33%,100%{opacity:0}
  15%,32%{opacity:.36}
}
@keyframes introGlitchB{
  0%,21%,23%,41%,43%,100%{opacity:0}
  22%,42%{opacity:.28}
}
.ndIntroReveal{
  position:absolute;
  inset:auto 0 50%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  box-shadow:0 0 20px rgba(255,255,255,.55);
  transform:translateY(0) scaleX(0);
  animation:introReveal 1.2s cubic-bezier(.18,.9,.18,1) .28s forwards;
}
@keyframes introReveal{
  0%{transform:scaleX(0);opacity:0}
  20%{opacity:1}
  100%{transform:scaleX(1.1);opacity:0}
}
.ndIntroPulse{
  position:absolute;
  inset:50% auto auto 50%;
  width:min(44vw,420px);
  height:min(44vw,420px);
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(110,174,255,.24);
  animation:introPulse 2.2s ease-out infinite;
}
.ndIntroPulse.p2{animation-delay:.85s}
@keyframes introPulse{
  0%{transform:translate(-50%,-50%) scale(.42);opacity:.65}
  100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .ndIntro,.ndIntro *{animation:none!important;transition:none!important}
}


/* v36 Intro Refinement: spaced premium wordmark */
.ndIntro{
  background:
    radial-gradient(circle at 50% 52%, rgba(22,119,255,.18), transparent 22%),
    radial-gradient(circle at 20% 18%, rgba(18,169,230,.10), transparent 26%),
    radial-gradient(circle at 80% 76%, rgba(22,119,255,.12), transparent 26%),
    linear-gradient(180deg,#020713 0%,#06101f 52%,#081827 100%)!important;
}
.ndIntroCenter{
  width:min(980px,calc(100% - 36px));
  display:grid;
  place-items:center;
  padding:28px 18px!important;
}
.ndIntroText{
  width:100%;
  display:grid;
  gap:10px;
  text-align:center;
  font-size:clamp(3.1rem,10vw,8.2rem)!important;
  line-height:.92!important;
  letter-spacing:.055em!important;
  font-weight:1000!important;
  text-shadow:
    0 0 22px rgba(22,119,255,.36),
    0 0 60px rgba(22,119,255,.18)!important;
  animation:introWordmarkInV36 2.35s cubic-bezier(.16,.96,.2,1) both!important;
}
.ndIntroText span{
  display:block!important;
  color:transparent!important;
  background:linear-gradient(180deg,#ffffff 0%,#dbeafe 38%,#72b8ff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}
.ndIntroText .ndLine1{
  letter-spacing:.17em!important;
  transform:translateX(.08em);
}
.ndIntroText .ndLine2{
  letter-spacing:.105em!important;
  font-size:.82em;
  transform:translateX(.052em);
}
.ndIntroText:before,
.ndIntroText:after{
  display:none!important;
}
@keyframes introWordmarkInV36{
  0%{opacity:0;transform:translateY(18px) scale(.92);filter:blur(18px)}
  24%{opacity:1;filter:blur(0)}
  46%{transform:translateY(0) scale(1.035)}
  72%{transform:translateY(0) scale(.992)}
  100%{transform:none}
}
.ndIntroCenter:before{
  content:"";
  width:min(720px,86vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  box-shadow:0 0 22px rgba(22,119,255,.65);
  transform:scaleX(0);
  opacity:0;
  animation:introLineSliceV36 1.15s cubic-bezier(.16,.96,.2,1) .12s forwards;
  margin-bottom:28px;
}
.ndIntroCenter:after{
  content:"";
  width:min(720px,86vw);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,119,255,.9),transparent);
  box-shadow:0 0 26px rgba(18,169,230,.6);
  transform:scaleX(0);
  opacity:0;
  animation:introLineSliceV36 1.15s cubic-bezier(.16,.96,.2,1) .92s forwards;
  margin-top:28px;
}
@keyframes introLineSliceV36{
  0%{transform:scaleX(0);opacity:0}
  20%{opacity:1}
  100%{transform:scaleX(1);opacity:.9}
}
.ndIntroReveal{
  display:none!important;
}
.ndIntroHalo{
  width:min(62vw,640px)!important;
  opacity:.85;
}
.ndIntro:before{
  animation:introBeamV36 2.85s cubic-bezier(.18,.88,.18,1) infinite!important;
}
.ndIntro:after{
  animation:introBeamV36 2.85s cubic-bezier(.18,.88,.18,1) 1.35s infinite!important;
}
@keyframes introBeamV36{
  0%{transform:translateX(-135%) skewX(-18deg);opacity:0}
  30%{opacity:.7}
  64%{opacity:1}
  100%{transform:translateX(150%) skewX(-18deg);opacity:0}
}
.ndIntroParticles i{
  width:4px!important;
  height:4px!important;
  opacity:.8;
}
@media(max-width:620px){
  .ndIntroText{
    font-size:clamp(2.9rem,15vw,5.2rem)!important;
    gap:8px;
  }
  .ndIntroText .ndLine1{
    letter-spacing:.125em!important;
  }
  .ndIntroText .ndLine2{
    letter-spacing:.07em!important;
  }
}


/* v37 Intro background refinement */
.ndIntro{
  background:
    radial-gradient(ellipse at 50% 58%, rgba(35,110,255,.20) 0%, rgba(35,110,255,.10) 18%, rgba(35,110,255,0) 42%),
    radial-gradient(circle at 18% 20%, rgba(73,164,255,.11) 0%, rgba(73,164,255,0) 28%),
    radial-gradient(circle at 82% 22%, rgba(20,116,255,.10) 0%, rgba(20,116,255,0) 26%),
    radial-gradient(circle at 50% 100%, rgba(12,51,120,.45) 0%, rgba(12,51,120,0) 34%),
    linear-gradient(180deg,#01050d 0%,#06101d 42%,#091827 100%)!important;
}
.ndIntroGrid{
  opacity:.26!important;
  background:
    linear-gradient(rgba(104,170,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104,170,255,.08) 1px, transparent 1px)!important;
  background-size:64px 64px!important;
  mask-image:radial-gradient(circle at 50% 56%, rgba(0,0,0,.95), rgba(0,0,0,.72) 46%, transparent 88%)!important;
}
.ndIntroHalo{
  width:min(58vw,600px)!important;
  background:
    radial-gradient(circle, rgba(61,137,255,.26) 0%, rgba(61,137,255,.10) 34%, rgba(61,137,255,0) 68%)!important;
  filter:blur(22px)!important;
  opacity:.82!important;
}
.ndIntro:before,
.ndIntro:after{
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.02) 38%, rgba(146,197,255,.12) 50%, rgba(255,255,255,.02) 62%, transparent 100%)!important;
}
.ndIntroParticles{
  opacity:.74;
}
.ndIntroParticles i{
  background:rgba(194,226,255,.72)!important;
  box-shadow:0 0 18px rgba(47,130,255,.45)!important;
}
.ndIntroCenter:before{
  box-shadow:0 0 20px rgba(83,154,255,.45)!important;
  opacity:.88!important;
}
.ndIntroCenter:after{
  box-shadow:0 0 24px rgba(47,130,255,.42)!important;
  opacity:.82!important;
}
.ndIntroText{
  text-shadow:
    0 0 18px rgba(69,144,255,.34),
    0 0 46px rgba(69,144,255,.18)!important;
}



@media (prefers-reduced-motion: reduce){
  .processLine:after,
  .stepIcon,
  .stepNo{
    animation:none!important;
  }
}



@media (prefers-reduced-motion: reduce){
  .processLine:after,
  .stepIcon,
  .stepNo{
    animation:none!important;
  }
}


/* v40 JS controlled process animation */
.processLine{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  isolation:isolate;
}
@media(min-width:961px){
  .processLine{
    grid-template-columns:repeat(4,1fr);
    gap:26px;
  }
}
.processLine:before,
.processLine:after{
  content:none!important;
  display:none!important;
}
.processTrack{
  position:absolute;
  left:12.5%;
  right:12.5%;
  top:40px;
  height:2px;
  background:#e5e7eb;
  border-radius:999px;
  z-index:0;
  overflow:visible;
}
.processFill{
  position:absolute;
  left:0;
  top:-2px;
  height:6px;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--blue2));
  box-shadow:0 0 18px rgba(22,119,255,.28);
  transition:width .72s cubic-bezier(.16,.9,.22,1);
}
.processFill:after{
  content:"";
  position:absolute;
  right:-9px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:999px;
  transform:translateY(-50%);
  background:#fff;
  border:4px solid var(--blue);
  box-shadow:0 0 24px rgba(22,119,255,.36);
  opacity:0;
  transition:opacity .18s ease;
}
.processLine.is-running .processFill:after{
  opacity:1;
}
.stepItem{
  position:relative;
  z-index:2;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.stepIcon{
  background:#fff!important;
  color:#374151!important;
  border-color:var(--line)!important;
  box-shadow:0 14px 34px rgba(17,24,39,.07)!important;
  animation:none!important;
  transition:
    background .28s ease,
    border-color .28s ease,
    color .28s ease,
    transform .28s cubic-bezier(.16,.9,.22,1),
    box-shadow .28s ease;
}
.stepNo{
  background:#f59e0b!important;
  animation:none!important;
  transition:background .28s ease, transform .28s cubic-bezier(.16,.9,.22,1);
}
.stepItem.is-blue .stepIcon{
  background:#eff6ff!important;
  color:var(--blue)!important;
  border-color:#bfdbfe!important;
  transform:translateY(-5px) scale(1.035)!important;
  box-shadow:0 22px 56px rgba(22,119,255,.22)!important;
}
.stepItem.is-blue .stepNo{
  background:var(--blue)!important;
  transform:scale(1.13)!important;
}
.stepItem.is-flash .stepIcon{
  animation:stepFlashV40 .42s ease both!important;
}
@keyframes stepFlashV40{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.18)}
  100%{filter:brightness(1)}
}
@media (prefers-reduced-motion: reduce){
  .processFill,
  .stepIcon,
  .stepNo{
    transition:none!important;
  }
}


/* v41 fixes */
.ndIntro{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(17,68,160,.24) 0%, rgba(17,68,160,.10) 22%, rgba(17,68,160,0) 48%),
    radial-gradient(circle at 12% 18%, rgba(0,180,255,.09), transparent 27%),
    radial-gradient(circle at 88% 82%, rgba(22,119,255,.10), transparent 28%),
    linear-gradient(135deg,#02040a 0%,#07111d 52%,#020712 100%)!important;
}
.ndIntroGrid{
  opacity:.14!important;
  background-size:84px 84px!important;
}
.ndIntroHalo{
  opacity:.62!important;
  filter:blur(30px)!important;
}
.ndIntroParticles{opacity:.45!important}
.ndIntroText .ndLine1{letter-spacing:.20em!important}
.ndIntroText .ndLine2{letter-spacing:.13em!important}

.orderStatusBox{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.statusStep{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.statusStep em{
  width:38px;
  height:38px;
  border-radius:13px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:950;
  background:var(--soft);
  color:#64748b;
}
.statusStep.active em{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
}
.statusStep b{display:block}
.statusStep span{display:block;color:var(--muted);font-size:.86rem;font-weight:750;margin-top:2px}
.keyFlow{
  display:grid;
  gap:14px;
}
.flowBox{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:#fff;
}
.flowBox.locked{
  opacity:.48;
  pointer-events:none;
  filter:grayscale(.2);
}
.flowBox.done{
  border-color:#bfdbfe;
  background:#eff6ff;
}
.keyOk{
  margin-top:10px;
  padding:11px 12px;
  border-radius:14px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#047857;
  font-weight:850;
  display:none;
}
.keyOk.show{display:block}
.adminMiniActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}


/* v42 full bug fix UI helpers */
.orderStatusBox{display:grid;gap:10px;margin-top:14px}
.statusStep{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff}
.statusStep em{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-style:normal;font-weight:950;background:var(--soft);color:#64748b}
.statusStep.active em{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.statusStep b{display:block}.statusStep span{display:block;color:var(--muted);font-size:.86rem;font-weight:750;margin-top:2px}
.keyFlow{display:grid;gap:14px}
.flowBox{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}
.flowBox.locked{opacity:.48;pointer-events:none;filter:grayscale(.2)}
.flowBox.done{border-color:#bfdbfe;background:#eff6ff}
.keyOk{margin-top:10px;padding:11px 12px;border-radius:14px;background:#ecfdf5;border:1px solid #bbf7d0;color:#047857;font-weight:850;display:none}
.keyOk.show{display:block}
.adminMiniActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.adminTabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.adminTabs .tab.active{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.errorBox{padding:12px;border-radius:14px;background:#fff1f2;border:1px solid #fecdd3;color:#be123c;font-weight:850}
.ndIntro{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(17,68,160,.20) 0%, rgba(17,68,160,.08) 24%, rgba(17,68,160,0) 50%),
    radial-gradient(circle at 12% 18%, rgba(0,180,255,.07), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(22,119,255,.08), transparent 30%),
    linear-gradient(135deg,#02040a 0%,#07111d 52%,#020712 100%)!important;
}
.ndIntroGrid{opacity:.11!important;background-size:92px 92px!important}
.ndIntroHalo{opacity:.52!important;filter:blur(34px)!important}
.ndIntroParticles{opacity:.36!important}
.reviewSection.is-hidden{display:none!important}
.reviewFormHint{color:var(--muted);font-size:.88rem;line-height:1.45;margin-bottom:12px}
.reviewEditMeta{color:var(--muted);font-size:.85rem;margin-top:10px}


/* v45 session login + header username */
.userBadge{
  display:none;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink);
  font-weight:900;
  box-shadow:0 10px 24px rgba(17,24,39,.05);
}
.userBadge.show{display:inline-flex}
.userBadge i{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
  font-style:normal;
  font-size:.76rem;
  font-weight:950;
}
@media(max-width:620px){
  .userBadge{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* v46 key activation wizard */
.keyWizard{
  max-width:760px;
  margin:0 auto;
}
.wizardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.wizardSteps{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.wizardDot{
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:#64748b;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.wizardDot em{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-style:normal;
  background:var(--soft);
  color:#64748b;
  font-size:.78rem;
}
.wizardDot.active{
  background:#eff6ff;
  border-color:#bfdbfe;
  color:var(--blue);
}
.wizardDot.done{
  background:#ecfdf5;
  border-color:#bbf7d0;
  color:#047857;
}
.wizardDot.active em{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;
}
.wizardDot.done em{
  background:#10b981;
  color:#fff;
}
.wizardScreen{
  display:none;
  animation:fade .2s ease both;
}
.wizardScreen.active{
  display:block;
}
.wizardBack{
  margin-top:14px;
}
.keySummary{
  display:grid;
  gap:8px;
  margin:14px 0;
}
.keySummary .mini{
  background:#fff;
}


/* v47 header / top navigation spacing fix */
.nav{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
}
.links{
  position:static!important;
  transform:none!important;
  justify-self:center!important;
  max-width:100%;
  overflow:hidden;
}
.actions{
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  min-width:0;
  gap:8px!important;
}
.actions .btn{
  white-space:nowrap;
}
.userBadge{
  flex:0 1 auto;
  max-width:190px;
  overflow:hidden;
}
.userBadge span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1060px){
  .nav{
    grid-template-columns:auto auto!important;
    justify-content:space-between!important;
  }
  .links{
    display:none!important;
  }
  .navToggle{
    display:inline-flex!important;
    flex:0 0 auto;
    margin-left:auto;
    margin-right:0;
  }
  .actions{
    justify-content:flex-end!important;
  }
}
@media(max-width:720px){
  .top{
    position:sticky;
  }
  .nav{
    display:flex!important;
    height:auto!important;
    min-height:72px!important;
    flex-wrap:nowrap!important;
    padding:10px 0!important;
    gap:10px!important;
    align-items:center!important;
  }
  .brand{
    flex:0 1 auto;
    min-width:0;
  }
  .actions{
    width:auto!important;
    flex:0 1 auto;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    padding:2px 0 4px;
    scrollbar-width:none;
  }
  .actions::-webkit-scrollbar{
    display:none;
  }
  .actions .btn,
  .userBadge{
    flex:0 0 auto;
    min-height:38px!important;
    padding:0 11px!important;
    font-size:.86rem!important;
    border-radius:12px!important;
  }
  .userBadge{
    max-width:170px;
  }
}
@media(max-width:430px){
  .brand{
    min-width:160px;
    font-size:.88rem;
  }
  .brand img{
    width:38px;
    height:38px;
    border-radius:13px;
  }
  .actions .btn,
  .userBadge{
    font-size:.82rem!important;
    padding:0 10px!important;
  }
}

/* v50 help, notify, key preview, bulk, toast */
.helpPage{display:grid;gap:14px;padding:18px 0 28px}
.faqList{display:grid;gap:10px}
.faqItem{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 8px 22px rgba(17,24,39,.04)}
.faqItem summary{cursor:pointer;font-weight:900;color:var(--ink);list-style:none}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem p{margin-top:10px;color:var(--muted);line-height:1.55;font-size:.92rem}
.faqItem a{color:var(--blue);font-weight:850}
.psnGuideBlock .guideSteps{margin:12px 0 16px;padding-left:18px;color:#374151;line-height:1.6}
.psnGuideBlock .guideSteps li{margin-bottom:8px}
.psnGuide{margin:12px 0 14px;padding:12px 14px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:14px}
.psnGuide summary{cursor:pointer;font-weight:900;color:#1d4ed8}
.psnGuide ol{margin:10px 0 0;padding-left:18px;color:#374151;line-height:1.55;font-size:.9rem}
.psnGuide li{margin-bottom:6px}
.guideNote{margin-top:10px;font-size:.86rem;color:var(--muted);line-height:1.45}
.linkInline{color:var(--blue);font-weight:850;font-size:.88rem}
.keyPreviewCard{margin-top:14px;padding:14px;border:1px solid #bbf7d0;background:#ecfdf5;border-radius:16px}
.keyPreviewTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.keyPreviewBadge{display:inline-flex;padding:5px 10px;border-radius:999px;font-size:.72rem;font-weight:950;background:#dcfce7;color:#047857}
.keyPreviewGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.keyPreviewGrid small{display:block;color:var(--muted);font-size:.72rem;margin-bottom:2px}
.keyPreviewGrid strong{font-size:.92rem}
.keyPreviewNote{margin-top:8px;font-size:.84rem;color:#047857}
.notifyBox{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.notifyBox h3{font-size:1rem;margin-bottom:6px}
.liveHint{color:var(--blue);font-weight:850;font-size:.82rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);background:#111827;color:#fff;padding:12px 16px;border-radius:14px;font-weight:850;font-size:.88rem;box-shadow:0 16px 40px rgba(17,24,39,.28);z-index:9999;opacity:0;transition:opacity .2s ease,transform .2s ease;max-width:min(92vw,420px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bulkBar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;padding:12px;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.bulkBar select,.bulkBar .btn{min-height:38px}
.bulkCheck{display:inline-flex;align-items:center;gap:8px;font-weight:850;font-size:.86rem}
#activationsList .row{position:relative;padding-left:40px}
#keysList .row{position:relative;padding-left:40px}
.bulkRowCheck{position:absolute;left:12px;top:16px;display:inline-flex;align-items:center}
.bulkRowCheck input{width:auto;min-height:auto}
.footer a{color:var(--blue);font-weight:850}

.accountSalesSection{
  padding:64px 0;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 100%);
  border-top:1px solid var(--line);
}
.sectionLead{
  max-width:640px;
  margin:12px auto 0;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}
.deliveryCta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:28px;
}
.accountSalesHero small{
  color:var(--blue);
  font-weight:950;
  letter-spacing:.1em;
  font-size:.76rem;
}
.accountSalesPoints{
  margin-top:14px;
  padding-left:18px;
  color:var(--muted);
  line-height:1.6;
}
.accountSalesPoints li+li{margin-top:6px}
.accountCategoryTabs,
.gameCategoryTabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.accountCategoryTabs .tab,
.gameCategoryTabs .tab{min-height:42px}
.accountCategoryEmpty{
  grid-column:1 / -1;
  margin-top:4px;
}
.accountSalesGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
  margin-top:14px;
}
.accountSaleCard{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(17,24,39,.05);
}
.accountSaleCover{
  aspect-ratio:16/9;
  background:#0f172a;
  overflow:hidden;
}
.accountSaleCover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.accountSaleBody{padding:18px}
.accountModalCover{
  margin-top:14px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:16/9;
  background:#0f172a;
}
.accountModalCover img{width:100%;height:100%;object-fit:cover;display:block}
.accountImagePreview{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--soft);
  min-height:48px;
}
.accountImagePreview:empty{display:none}
.accountImagePreview img{width:100%;max-height:220px;object-fit:cover;display:block}
.accountAdminRow{display:flex;gap:12px;align-items:flex-start}
.accountAdminThumb{
  width:72px;
  height:72px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 72px;
  border:1px solid var(--line);
  background:var(--soft);
}
.accountAdminThumb.placeholder{
  display:grid;
  place-items:center;
  font-size:1.4rem;
  color:var(--muted);
}
.accountAdminMain{flex:1;min-width:0}
.accountSaleTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.accountSaleTop small{
  color:var(--blue);
  font-weight:900;
  font-size:.76rem;
  letter-spacing:.06em;
}
.accountSaleTop h3{margin-top:4px;font-size:1.08rem}
.accountSaleTop p{margin-top:6px;color:var(--muted);font-size:.9rem;line-height:1.5}
.accountSaleMeta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:14px;
}
.accountSaleMeta div{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.accountSaleMeta b{display:block;font-size:1.05rem}
.accountSaleMeta span{display:block;margin-top:2px;color:var(--muted);font-size:.78rem;font-weight:750}
.accountGameTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}
.accountGameTag{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:.76rem;
  font-weight:850;
  border:1px solid #bfdbfe;
}
.accountGameTag.muted{background:var(--soft);color:var(--muted);border-color:var(--line)}
.accountSaleActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:14px;
}
.accountSoldNote{color:var(--muted);font-size:.86rem;font-weight:850}
.accountModalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:grid;
  place-items:center;
  padding:16px;
  z-index:120;
}
.accountModal{
  width:min(560px,100%);
  max-height:90vh;
  overflow:auto;
}
.accountGameList{
  margin-top:10px;
  padding-left:18px;
  color:var(--muted);
  line-height:1.55;
  columns:2;
  column-gap:24px;
}
.accountGameList li{margin-bottom:4px;break-inside:avoid}
@media (max-width:860px){
  .accountGameList{columns:1}
}