:root {
  --gold: #FFB800;
  --gold-deep: #E59A00;
  --gold-soft: #FFE08A;
  --gold-mist: #EEF4FF;
  --ink: #0B1B3A;
  --muted: #5A6B88;
  --line: #C9DCFF;
  --bg: #F3F7FF;
  --white: #ffffff;
  --navy: #0A2470;
  --blue: #0047FF;
  --blue-sky: #4DA6FF;
  --sky: var(--blue-sky);
  --sky-deep: var(--blue);
  --sky-bar: var(--gold);
  --sky-soft: #D6E7FF;
  --sky-mist: var(--gold-mist);
  --shadow: 0 14px 34px rgba(0, 71, 255, 0.14);
  --radius: 18px;
  --font: "Manrope", system-ui, sans-serif;
  --display: "Fredoka", "Nunito", "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}
a { color: var(--sky-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
code { background: var(--sky-mist); padding: .1rem .35rem; border-radius: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: 14px; border: none; cursor: pointer;
  font-weight: 800; font-size: .92rem;
  padding: .72rem 1.15rem; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #0B1B3A; box-shadow: 0 10px 24px rgba(255,184,0,.32);
}
.btn-primary:hover { color: #0B1B3A; }
.btn-ghost {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
.btn-ghost-light {
  background: rgba(0,0,0,.12); color: #fff; border: 1px solid rgba(255,255,255,.22);
}
.btn-on-blue {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #0B1B3A;
  box-shadow: 0 8px 18px rgba(255, 184, 0, .38);
}
.btn-on-blue:hover { color: #0B1B3A; }
.btn-login {
  gap: .65rem;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  border-radius: 12px;
  border: 3px solid var(--navy);
  background: linear-gradient(180deg, #EBB42E 0%, var(--gold-deep) 52%, #C47F00 100%);
  color: #0B1B3A;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  line-height: 1;
  padding: 0 1.5rem 0 1.15rem;
  box-shadow:
    0 6px 14px rgba(10, 36, 112, .28),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-login:hover {
  color: #0B1B3A;
  transform: translateY(-1px);
  box-shadow:
    0 8px 16px rgba(10, 36, 112, .34),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}
.btn-login-key {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(1.06) saturate(1.12);
}
.topbar .nav-history {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: auto;
  padding: .3rem 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.95);
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar .nav-history span { color: rgba(255,255,255,.95); font-weight: 800; font-size: .9rem; }
.topbar .nav-history svg { color: #fff; stroke: #fff; width: 22px; height: 22px; }
.topbar .nav-history:hover,
.topbar .nav-history:hover span { color: var(--gold); background: transparent; }
.topbar .nav-history:hover svg { stroke: var(--gold); }
.history-list { display: flex; flex-direction: column; gap: .7rem; }
.history-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.history-row strong { display: block; color: var(--navy); }
.history-row span, .history-row small { display: block; color: var(--muted); }
.history-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-block { width: 100%; }
.btn-lg { padding: .95rem 1.35rem; font-size: 1rem; }
.inline { display: inline; }
.center { text-align: center; }
.muted { color: var(--muted); }
.text-link { font-weight: 800; }

/* Header biru royal + aksen emas Robux, mengikuti logo RobuxCepat */
.topbar-atan {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(90deg, rgba(8,28,92,.96), rgba(10,36,112,.96) 42%, rgba(12,47,138,.96));
  color: #fff;
  box-shadow: 0 8px 28px rgba(8, 28, 92, .32);
  border-bottom: 3px solid var(--gold);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto;
  padding: .75rem 1.1rem;
  display: flex; align-items: center; gap: 1rem;
  position: relative;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; text-decoration: none; flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 48px; height: 48px; object-fit: contain;
  background: transparent; border-radius: 0;
  box-shadow: none; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.brand-word {
  display: flex; align-items: baseline; gap: 0;
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .03em;
  text-transform: uppercase; line-height: 1;
  color: #9EC4FF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.brand-word .cepat { color: #D6EAFF; }
.brand-word .dot { color: var(--gold); font-style: normal; }
.brand-word .com { color: #7EB6FF; font-size: .78em; }
.brand-word::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 0;
  width: 42%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, .12) 46%,
    rgba(255, 255, 255, .78) 50%,
    rgba(255, 184, 0, .55) 53%,
    rgba(255, 255, 255, .16) 58%,
    transparent 68%,
    transparent 100%
  );
  transform: translateX(-180%) skewX(-22deg);
  animation: brand-shine 4.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes brand-shine {
  0%, 12% {
    transform: translateX(-180%) skewX(-22deg);
    opacity: 0;
  }
  18% { opacity: 1; }
  48% {
    transform: translateX(320%) skewX(-22deg);
    opacity: 1;
  }
  56%, 100% {
    transform: translateX(320%) skewX(-22deg);
    opacity: 0;
  }
}
.brand-text {
  font-family: var(--display); font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.02em;
}
.brand-text span { color: var(--gold); }
.nav-links {
  display: flex; gap: .2rem 1rem; flex: 1; justify-content: center; flex-wrap: wrap;
}
.nav-links a {
  color: rgba(255,255,255,.95); font-weight: 800; text-decoration: none;
  font-size: .9rem; padding: .3rem 0;
  position: relative;
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform .2s ease;
}
.nav-links a:hover { color: var(--gold); opacity: 1; text-decoration: none; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.nav-mobile-extra { display: none; }
.nav-riwayat {
  display: inline-flex; align-items: center;
  color: #fff; font-weight: 800; font-size: .9rem;
  padding: .55rem .85rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  text-decoration: none; white-space: nowrap;
  font-family: var(--display);
}
.nav-riwayat:hover {
  color: var(--gold); text-decoration: none;
  border-color: var(--gold); background: rgba(255,184,0,.12);
}
.nav-toggle {
  display: none; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12);
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0 11px;
}
.nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }

.flash-wrap { max-width: 1200px; margin: .75rem auto 0; padding: 0 1.1rem; }
.flash {
  padding: .8rem 1rem; border-radius: 12px; margin-bottom: .5rem;
  background: #e8f8ef; color: #146447; border: 1px solid #b9e8cf;
}
.flash-error { background: #fff1f1; color: #9b1c1c; border-color: #f0c2c2; }

/* ===== Welcome (banner first, action dock below — synced desktop/mobile) ===== */
.welcome {
  background: var(--bg);
  padding: 0;
  color: var(--ink);
}
.welcome-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% 8%, rgba(255,184,0,.22), transparent 55%),
    radial-gradient(640px 320px at 8% 0%, rgba(77,166,255,.28), transparent 50%),
    linear-gradient(180deg, #06143A 0%, #0A2470 55%, #1236A8 100%);
  padding: .9rem 1.1rem .4rem;
  color: #fff;
}
.welcome-hero .welcome-inner { position: relative; z-index: 1; }
.welcome-dock {
  position: relative;
  background: var(--bg);
  padding: .55rem 1.1rem 1.25rem;
}
.welcome-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.welcome-heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 1.25rem;
  animation: rise .55s ease both;
}
.welcome-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  margin: 0 0 .55rem;
  letter-spacing: -.02em; text-shadow: 0 2px 0 rgba(0,0,0,.08);
  line-height: 1.2;
}
.welcome-title span { color: var(--gold); }
.banner-list-thumb { width: 72px; height: 40px; }
.banner-preview { width: 100%; max-width: 420px; height: auto; aspect-ratio: 16/9; }
.catalog-hub { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.welcome-lead {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  line-height: 1.55;
  font-weight: 600;
}
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(220px, .92fr) minmax(480px, 2.02fr);
  grid-template-areas: "rank actions";
  gap: .85rem;
  align-items: stretch;
  margin-top: 0;
  padding-top: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}
.rank-panel { grid-area: rank; }
.welcome-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .85rem;
}
.welcome-dock-row {
  display: flex;
  align-items: stretch;
  gap: .85rem;
  min-width: 0;
}

.rank-panel {
  background: #fff; color: var(--ink);
  border-radius: 22px; padding: 1rem 1rem 1.05rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,184,0,.22);
  position: relative;
  height: 100%;
  min-height: 0;
  gap: .65rem;
}
.rank-panel::before {
  content: ""; position: absolute; left: 1rem; right: 1rem; top: 0;
  height: 3px; border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, var(--gold), #FFE08A);
}
.rank-head { display: flex; gap: .7rem; align-items: center; margin-bottom: 0; }
.rank-trophy {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
}
.rank-trophy img { width: 28px; height: 28px; display: block; object-fit: contain; background: transparent; }
.rank-head h2 {
  font-family: var(--display); margin: 0; font-size: 1.15rem; color: var(--sky-deep);
}
.rank-head p { margin: 0; color: var(--muted); font-size: .82rem; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .32rem; flex: 1; }
.rank-item {
  display: flex; gap: .5rem; align-items: center;
  background: var(--sky-mist); border-radius: 12px; padding: .38rem .5rem;
  transition: transform .18s ease, background .18s ease;
}
.rank-item { isolation: isolate; }
.rank-item:hover { transform: none; }
.rank-item.rank-1 { background: linear-gradient(90deg, #FFF4CC, #fff); }
.rank-item.is-empty { opacity: .55; }
.rank-item.is-empty:hover { transform: none; }
.rank-badge {
  width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 900; font-size: .75rem;
  background: var(--navy); color: var(--gold); flex-shrink: 0;
}
.rank-item.rank-1 .rank-badge { box-shadow: 0 0 0 3px rgba(255,184,0,.28); }
.rank-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; background: transparent; border: 0;
  flex-shrink: 0; font-size: .8rem; overflow: hidden;
}
.rank-avatar img { width: 32px; height: 32px; display: block; object-fit: contain; }
.rank-prize {
  margin-left: auto;
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
}
.rank-prize img { width: 22px; height: 22px; display: block; object-fit: contain; }
.rank-item > div { min-width: 0; flex: 1; }
.rank-item strong {
  display: block; font-size: .86rem; line-height: 1.2;
  font-family: var(--display); font-weight: 600;
}
.rank-item small { color: var(--muted); font-size: .72rem; }
.rank-more {
  margin-top: auto; display: block; text-align: center;
  font-family: var(--display); font-weight: 600;
  color: var(--sky-deep); background: var(--sky-mist);
  border-radius: 12px; padding: .55rem; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.rank-more:hover { text-decoration: none; background: var(--navy); color: var(--gold); }

.banner-stage {
  position: relative; border-radius: 22px; overflow: hidden;
  isolation: isolate;
  aspect-ratio: 21 / 9;
  background: var(--navy);
  touch-action: manipulation;
  user-select: none;
  box-shadow: none;
}
.banner-stage-hero { min-height: 0; }
.banner-track {
  position: absolute; inset: 0;
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .75s cubic-bezier(.22, .72, .28, 1);
}
.banner-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 1;
}
.banner-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.banner-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .85rem 1.1rem 1.15rem;
  background: none;
  color: #fff;
  display: flex; gap: .55rem; align-items: center;
  text-shadow: 0 1px 8px rgba(8, 28, 92, .45);
  pointer-events: none;
}
.hot-pill {
  background: var(--gold); color: #0B1B3A; font-size: .72rem; font-weight: 900;
  border-radius: 999px; padding: .25rem .55rem;
  box-shadow: 0 4px 12px rgba(255,184,0,.4);
}
.banner-stage.is-holding { cursor: grabbing; }

.cta-big {
  position: relative; overflow: hidden;
  min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  flex-direction: column;
  background: linear-gradient(145deg, #5EB4FF, #0047FF 48%, #081C5C);
  color: #fff; border-radius: 22px;
  font-weight: 900; font-family: var(--display);
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 71, 255, .3);
  padding: 1.15rem 1rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-big::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.22) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .65s ease;
  pointer-events: none;
}
.cta-big:hover { transform: translateY(-4px); text-decoration: none; color: #fff; box-shadow: 0 20px 40px rgba(0, 71, 255, .42); }
.cta-big:hover::after { transform: translateX(130%); }
.cta-big.cta-alt {
  background: linear-gradient(180deg, #fff, #F7FBFF);
  color: var(--navy);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.cta-big.cta-alt:hover { color: var(--navy); box-shadow: 0 18px 36px rgba(10, 36, 112, .16); }
.cta-ico {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.cta-big.cta-alt .cta-ico { background: var(--gold-mist); }
.cta-copy { display: grid; gap: .2rem; }
.cta-copy strong { font-size: 1.12rem; line-height: 1.2; }
.cta-copy small {
  font-family: var(--font); font-weight: 700; font-size: .78rem;
  opacity: .86; letter-spacing: .01em;
}
.cta-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, #6EC4FF 0%, #2F7BFF 52%, #1A58F0 100%);
  box-shadow:
    0 6px 14px rgba(26, 88, 240, .32),
    inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cta-big:hover .cta-arrow {
  transform: translateX(3px);
  box-shadow:
    0 8px 16px rgba(26, 88, 240, .4),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.cta-big.cta-alt .cta-arrow {
  box-shadow:
    0 6px 14px rgba(26, 88, 240, .22),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.welcome-cta-stack {
  display: flex;
  flex-direction: column;
  flex: .68 1 190px;
  min-width: 0;
  gap: .6rem;
  justify-content: stretch;
}
.welcome-cta-stack .cta-big {
  flex: 1 1 0;
  min-height: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: .7rem .85rem .7rem .75rem;
  border-radius: 22px;
  gap: .45rem;
  overflow: hidden;
  border: 0;
  background: linear-gradient(105deg, var(--blue-sky) 0%, var(--blue) 48%, var(--navy) 100%);
  box-shadow:
    0 12px 28px rgba(0, 71, 255, .3),
    0 0 20px rgba(77, 166, 255, .22);
}
.welcome-cta-stack .cta-big:not(.cta-alt) {
  align-items: stretch;
  padding: .4rem .8rem 0 .4rem;
  min-height: 148px;
}
.welcome-cta-stack .cta-buy {
  align-items: center;
  padding: .65rem .85rem .65rem .55rem;
  background:
    radial-gradient(90% 70% at 100% 8%, rgba(77, 166, 255, .4), transparent 58%),
    linear-gradient(118deg, var(--blue-sky) 0%, var(--blue) 78%);
  box-shadow:
    0 12px 28px rgba(0, 71, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}
.welcome-cta-stack .cta-buy::after { opacity: .28; }
.welcome-cta-stack .cta-big:not(.cta-alt) .cta-copy,
.welcome-cta-stack .cta-big:not(.cta-alt) .cta-arrow {
  align-self: center;
}
.welcome-cta-stack .cta-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.welcome-cta-stack .cta-buy .cta-pattern {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.welcome-cta-stack .cta-rbx-fade {
  position: absolute;
  color: rgba(255, 255, 255, .2);
}
.welcome-cta-stack .cta-rbx-fade.fade-a {
  width: 96px;
  height: 96px;
  right: 10px;
  top: 8px;
}
.welcome-cta-stack .cta-rbx-fade.fade-b {
  width: 72px;
  height: 72px;
  right: 52px;
  bottom: 8px;
  color: rgba(255, 255, 255, .14);
}
.welcome-cta-stack .cta-big.cta-alt {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(10, 36, 112, .1);
}
.welcome-cta-stack .cta-alt .cta-pattern { display: none; }
.welcome-cta-stack .cta-watermark {
  position: absolute;
  right: -6%;
  top: 46%;
  width: 58%;
  height: auto;
  transform: translateY(-50%);
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}
.welcome-cta-stack .cta-visual {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  z-index: 1;
}
.welcome-cta-stack .cta-big:not(.cta-alt) .cta-visual {
  width: 92px;
  min-height: 140px;
  height: auto;
  align-self: stretch;
}
.welcome-cta-stack .cta-big.cta-buy .cta-visual {
  width: 82px;
  height: 82px;
  min-height: 0;
  align-self: center;
  display: grid;
  place-items: center;
}
.welcome-cta-stack .cta-big.cta-buy .cta-hex-shadow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  top: auto;
  width: 48px;
  height: 14px;
  transform: translateX(-50%);
  background: rgba(10, 36, 112, .32);
  clip-path: none;
  border-radius: 50%;
  filter: blur(5px);
  z-index: 1;
  pointer-events: none;
}
.welcome-cta-stack .cta-big.cta-buy .cta-hero {
  position: relative;
  left: auto;
  top: auto;
  width: 72px;
  height: 72px;
  transform: none;
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 10px 8px rgba(10, 36, 112, .3));
  transition: transform .2s ease;
}
.welcome-cta-stack .cta-big.cta-buy:hover .cta-hero {
  transform: translateY(-2px);
}
.welcome-cta-stack .cta-hex-shadow {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 78px;
  height: 78px;
  transform: translateX(-50%) translateY(30px) scale(1.12, .4);
  background: rgba(10, 36, 112, .38);
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}
.welcome-cta-stack .cta-hero {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: block;
  object-fit: contain;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(8, 28, 92, .22));
}
.welcome-cta-stack .cta-big:not(.cta-alt) .cta-hero {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 8px 10px rgba(10, 36, 112, .34));
}
.welcome-cta-stack .cta-alt .cta-hero {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 8px 12px rgba(10, 36, 112, .14));
}
.welcome-cta-stack .cta-big.cta-buy {
  overflow: visible;
}
.welcome-cta-stack .cta-big.cta-buy .cta-visual {
  z-index: 3;
}
.welcome-cta-stack .cta-big.cta-buy .cta-hero {
  position: relative;
  left: auto;
  top: auto;
  width: 72px;
  height: 72px;
  transform: none;
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 10px 8px rgba(10, 36, 112, .3));
  transition: transform .2s ease;
}
.welcome-cta-stack .cta-big.cta-buy:hover .cta-hero,
.welcome-cta-stack .cta-big.cta-buy:active .cta-hero {
  transform: translateY(-12px);
}
.welcome-cta-stack .cta-copy {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  gap: .18rem;
}
.welcome-cta-stack .cta-copy strong {
  font-size: .92rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.welcome-cta-stack .cta-copy small {
  font-size: .7rem;
  font-weight: 700;
  opacity: .9;
  line-height: 1.25;
  white-space: nowrap;
}
.welcome-cta-stack .cta-alt .cta-copy small { color: #5A6B88; opacity: 1; }
.welcome-cta-stack .cta-arrow {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  background: linear-gradient(180deg, #C8E8FF 0%, #7EC4FF 55%, #4DA6FF 100%);
  box-shadow:
    0 0 16px rgba(150, 210, 255, .75),
    0 6px 14px rgba(8, 28, 92, .2),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.welcome-cta-stack .cta-alt .cta-arrow {
  background: linear-gradient(180deg, #5EB4FF 0%, #2F7BFF 52%, #1A58F0 100%);
  box-shadow:
    0 8px 16px rgba(26, 88, 240, .28),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.welcome-methods {
  display: none;
}
@media (min-width: 981px) {
  .welcome-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
  }
  .welcome-methods a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .7rem .85rem .75rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    position: relative;
    min-height: 76px;
    transition: border-color .18s ease, transform .18s ease;
  }
  .welcome-methods a::before {
    content: "";
    position: absolute; left: 18%; right: 18%; top: 0;
    height: 2px; border-radius: 0 0 2px 2px;
    background: var(--gold);
  }
  .welcome-methods .method-ico {
    width: 44px; height: 44px; flex-shrink: 0;
    display: grid; place-items: center;
    background: none; border-radius: 0; box-shadow: none; margin: 0;
  }
  .welcome-methods .method-ico img {
    width: 44px; height: 44px; display: block; object-fit: contain;
  }
  .welcome-methods .method-username .method-ico,
  .welcome-methods .method-login .method-ico,
  .welcome-methods .method-gamepass .method-ico {
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .welcome-methods .method-copy {
    display: flex; flex-direction: column; gap: .12rem; min-width: 0;
  }
  .welcome-methods a strong {
    font-family: var(--display);
    font-weight: 700;
    color: var(--navy);
    font-size: .95rem;
    letter-spacing: -.01em;
    line-height: 1.2;
  }
  .welcome-methods a small {
    color: var(--muted);
    font-weight: 700;
    font-size: .75rem;
  }
  .welcome-methods a:hover {
    transform: translateY(-2px);
    border-color: rgba(255,184,0,.55);
    text-decoration: none;
  }
}

.stats-bar {
  max-width: 1200px; margin: 0; padding: 0;
  position: relative; z-index: 2;
}
.stats-bar-dock {
  flex: 1.4 1 280px;
  min-width: 0;
  height: auto;
}
.stats-bar-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: .55rem;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: .7rem; box-shadow: var(--shadow);
  height: auto;
}
.stats-bar-dock .stats-bar-inner {
  align-content: start;
}
.stat-card {
  text-align: center;
  border-radius: 16px;
  padding: .7rem .55rem .75rem;
  background: #F7FBFF;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  position: relative;
  gap: .15rem;
  transition: border-color .18s ease, transform .18s ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(255,184,0,.55); }
.stat-card::before {
  content: "";
  position: absolute; left: 18%; right: 18%; top: 0;
  height: 2px; border-radius: 0 0 2px 2px;
  background: var(--gold);
}
.stat-ico {
  width: 48px; height: 48px; flex-shrink: 0;
  display: grid; place-items: center;
  position: relative;
  margin: .1rem 0 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.stat-ico img, .stat-ico svg { width: 48px; height: 48px; display: block; object-fit: contain; }
.stat-stock .stat-ico,
.stat-price .stat-ico,
.stat-sold .stat-ico,
.stat-orders .stat-ico {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.welcome-dock .stat-stock .stat-ico,
.welcome-dock .stat-stock .stat-ico img {
  width: 58px;
  height: 58px;
}
.welcome-dock .stat-stock .stat-ico {
  margin: -.15rem 0 -.2rem;
}
.welcome-dock .stat-ico img,
.welcome-dock .method-ico img,
.welcome-dock .cta-ico img,
.welcome-dock .rank-prize img,
.welcome-dock .rank-trophy img,
.welcome-dock .rank-avatar img {
  background: transparent;
  filter: none;
  mix-blend-mode: normal;
  image-rendering: auto;
}
.stat-live {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; border: 2px solid #F7FBFF;
  display: block;
}
.js-motion .stat-live {
  animation: stat-pulse 1.8s ease-out infinite;
}
@keyframes stat-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.stats-label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--sky-deep);
  margin-bottom: .18rem;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.stats-bar-inner strong {
  font-family: var(--display);
  font-size: 1.32rem;
  color: var(--navy);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
.stats-bar-inner strong em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  font-family: var(--font);
  color: var(--muted);
  font-weight: 700;
  margin-top: .12rem;
  letter-spacing: 0;
}

@media (min-width: 981px) {
  .rank-panel { padding: .85rem .8rem .9rem; }
  .rank-head h2 { font-size: 1.02rem; }
  .rank-head p { font-size: .75rem; }
  .rank-item { padding: .32rem .42rem; gap: .4rem; }
  .rank-item strong { font-size: .8rem; }
  .rank-more { padding: .48rem; font-size: .84rem; }
  .stats-bar-dock .stats-bar-inner { gap: .6rem; padding: .75rem; }
  .stat-card { padding: .7rem .55rem .75rem; min-height: 108px; }
  .stats-bar-dock .stat-ico { width: 48px; height: 48px; }
  .stats-bar-dock .stat-stock .stat-ico { width: 58px; height: 58px; }
  .stats-bar-dock .stats-label { font-size: .95rem; }
  .stats-bar-dock .stats-bar-inner strong { font-size: 1.42rem; }
}

.section {
  max-width: 1200px; margin: 0 auto; padding: 1.6rem 1.1rem 1.2rem;
}
.section.narrow { max-width: 640px; }
.section-head { margin-bottom: 1rem; }
.section-head.row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: end;
}
.section-head h2, .why-title {
  font-family: var(--display); font-size: 1.55rem; margin: 0 0 .2rem; font-weight: 900;
}
.section-head p { margin: 0; color: var(--muted); }

.ticker {
  overflow: hidden;
  width: 100%;
  padding-bottom: .2rem;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-marquee 32s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-empty {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.ticker-group {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  flex-shrink: 0;
  padding-inline: 0 .75rem;
}
.ticker-card {
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 380px;
  display: flex; gap: .7rem; align-items: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: .85rem; box-shadow: var(--shadow);
}
.ticker-card strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
}
.ticker-rbx { flex-shrink: 0; }
.ticker-card small { display: block; color: var(--muted); }

.limited-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.limited-marquee-track {
  display: flex;
  width: max-content;
  animation: ticker-marquee 72s linear infinite;
}
.limited-marquee:hover .limited-marquee-track {
  animation-play-state: paused;
}
.limited-marquee-group {
  display: flex;
  align-items: stretch;
  gap: .85rem;
  flex-shrink: 0;
  padding-inline: 0 .85rem;
}
.limited-marquee .limited-tile {
  flex: 0 0 176px;
  width: 176px;
}

.product-grid, .limited-grid, .game-thumb-grid, .pkg-grid, .method-grid, .why-cards, .plan-grid, .review-grid, .game-grid {
  display: grid; gap: .85rem;
}
.product-grid, .limited-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.game-thumb-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.product-tile, .game-thumb-card, .game-card, .pkg-card, .method-card, .plan-card, .review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-tile:hover, .game-thumb-card:hover, .pkg-card:hover, .method-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-sky); text-decoration: none;
}
.product-tile { padding: .85rem; display: flex; flex-direction: column; gap: .3rem; }
.tile-art {
  position: relative; border-radius: 14px; overflow: hidden; margin-bottom: .35rem;
  aspect-ratio: 1; background: var(--sky-mist);
}
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-emoji-overlay {
  position: absolute; right: .45rem; bottom: .45rem;
  background: rgba(255,255,255,.92); border-radius: 10px; padding: .2rem .35rem;
}
.limited-tile .tile-emoji,
.tile-art-limited .tile-emoji-overlay { display: none; }
.price { color: var(--sky-deep); font-weight: 800; }
.price.huge { font-size: 1.8rem; margin: .4rem 0; }
.ready-tag {
  align-self: flex-start; font-size: .72rem; font-weight: 800;
  background: var(--sky-mist); color: var(--sky-deep);
  border-radius: 999px; padding: .25rem .55rem;
}

.game-thumb-card { overflow: hidden; }
.game-thumb-art { position: relative; aspect-ratio: 1; background: var(--gold-mist); }
.game-thumb-art img { width: 100%; height: 100%; object-fit: cover; }
.game-thumb-tag {
  position: absolute; left: .55rem; top: .55rem;
  background: rgba(10,36,112,.92); color: var(--gold);
  font-size: .68rem; font-weight: 900; border-radius: 999px; padding: .25rem .5rem;
}
.game-thumb-card h3 {
  font-family: var(--display); font-size: 1rem; margin: .7rem .85rem .15rem; font-weight: 900;
}
.game-thumb-card small { display: block; margin: 0 .85rem .9rem; color: var(--muted); }

.cta-band { padding: 1rem 1.1rem 3rem; scroll-margin-top: 5.5rem; }
.cta-band-inner {
  max-width: 1100px; margin: 0 auto;
  background: linear-gradient(135deg, var(--gold-mist), #fff 50%, var(--sky-soft));
  border: 1px solid var(--line); border-radius: 28px;
  padding: 1.4rem; box-shadow: var(--shadow);
}
.cta-band-visual {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; align-items: center;
}
.cta-side-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 559;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  display: block;
  background: none;
}
.cta-feedback h2 { font-family: var(--display); margin: 0 0 .35rem; font-weight: 900; }
.cta-feedback p { color: var(--muted); margin: 0 0 .85rem; }
.cta-feedback-form label {
  display: flex; flex-direction: column; gap: .3rem;
  font-weight: 700; font-size: .82rem; margin-bottom: .65rem;
}
.cta-feedback-form input,
.cta-feedback-form textarea {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .7rem .8rem; background: #fff; font: inherit; width: 100%;
}
.cta-feedback-form input:focus,
.cta-feedback-form textarea:focus {
  outline: 2px solid rgba(0, 71, 255, .35); border-color: var(--sky);
}
.cta-feedback-form textarea { min-height: 6.2rem; resize: vertical; }
.cta-feedback-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem;
}
.cta-feedback-file input[type=file] {
  padding: .45rem .55rem; background: #fbfdff; font-size: .82rem;
}
.cta-feedback-form .hero-actions { margin-top: .15rem; }
.cta-feedback-form[hidden],
.cta-feedback [hidden] { display: none !important; }
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.feedback-body {
  white-space: pre-wrap; line-height: 1.55; margin: 0 0 1rem;
}
.feedback-attachment {
  display: block; max-width: 100%; max-height: 360px;
  object-fit: contain; border-radius: 14px; border: 1px solid var(--line);
}
.status-new { background: #fff4df; color: #9a6700; }
.status-read { background: #e8f0ff; color: #1e3a8a; }
.status-done { background: #dff5ea; color: #146447; }
.nav-badge-feedback { background: #e6a700; }
.cta-band h2 { font-family: var(--display); margin: 0 0 .45rem; font-weight: 900; }
.cta-band p { color: var(--muted); margin: 0 0 1rem; }
.hero-actions { display: flex; gap: .65rem; flex-wrap: wrap; }

/* ===== Topup method stage ===== */
.page-topup { background: var(--bg); }
.topup-stage { position: relative; }
.topup-navy {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.1rem 7.2rem;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(77, 166, 255, .28), transparent 42%),
    radial-gradient(ellipse at 86% 8%, rgba(255, 184, 0, .12), transparent 38%),
    linear-gradient(180deg, #1a4fa8 0%, #0c3a94 46%, #081c5c 100%);
}
.topup-coins,
.rbx-motifs {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.topup-coins img,
.rbx-motifs img {
  position: absolute;
  width: 88px; height: 88px;
  max-width: none;
  opacity: .18;
  filter: blur(.2px);
}
.topup-coins img:nth-child(1),
.rbx-motifs img:nth-child(1) { top: 8%; left: 6%; width: 70px; height: 70px; transform: rotate(-18deg); }
.topup-coins img:nth-child(2),
.rbx-motifs img:nth-child(2) { top: 42%; left: 2%; width: 110px; height: 110px; opacity: .12; transform: rotate(22deg); }
.topup-coins img:nth-child(3),
.rbx-motifs img:nth-child(3) { top: 12%; right: 8%; width: 78px; height: 78px; transform: rotate(16deg); }
.topup-coins img:nth-child(4),
.rbx-motifs img:nth-child(4) { top: 48%; right: 3%; width: 96px; height: 96px; opacity: .14; transform: rotate(-12deg); }
.topup-coins img:nth-child(5),
.rbx-motifs img:nth-child(5) { top: 4%; left: 28%; width: 54px; height: 54px; opacity: .12; }
.topup-coins img:nth-child(6),
.rbx-motifs img:nth-child(6) { top: 6%; right: 26%; width: 48px; height: 48px; opacity: .1; transform: rotate(28deg); }
.rbx-motifs img:nth-child(7) { top: 18%; left: 18%; width: 62px; height: 62px; opacity: .1; transform: rotate(8deg); }
.rbx-motifs img:nth-child(8) { top: 22%; right: 16%; width: 58px; height: 58px; opacity: .11; transform: rotate(-24deg); }
.rbx-motifs-soft img { opacity: .08; filter: none; }
.welcome-dock .welcome-inner { position: relative; z-index: 1; }
.page-home main { position: relative; }
.page-home .welcome,
.page-home .section { position: relative; z-index: 1; }
.rbx-motifs-page {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rbx-motifs-page img { opacity: .07; filter: none; max-width: none; }
.rbx-motifs-page img:nth-child(1) { top: 22%; left: 2%; width: 84px; height: 84px; transform: rotate(-16deg); }
.rbx-motifs-page img:nth-child(2) { top: 38%; right: 1.5%; width: 102px; height: 102px; opacity: .06; transform: rotate(20deg); }
.rbx-motifs-page img:nth-child(3) { top: 54%; left: 3%; width: 70px; height: 70px; transform: rotate(12deg); }
.rbx-motifs-page img:nth-child(4) { top: 70%; right: 2.5%; width: 90px; height: 90px; opacity: .06; transform: rotate(-10deg); }
.rbx-motifs-page img:nth-child(5) { top: 86%; left: 5%; width: 58px; height: 58px; transform: rotate(26deg); }
.rbx-motifs-page img:nth-child(6) { top: 46%; right: 6%; width: 48px; height: 48px; opacity: .05; }
.rbx-motifs-page img:nth-child(7) { top: 62%; left: 8%; width: 52px; height: 52px; opacity: .05; transform: rotate(-22deg); }
.rbx-motifs-page img:nth-child(8) { top: 78%; right: 8%; width: 64px; height: 64px; opacity: .05; transform: rotate(14deg); }
.topup-wave {
  position: absolute;
  left: -18%; right: -18%;
  bottom: -2px;
  height: 110px;
  background: var(--bg);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
  pointer-events: none;
}
.topup-hero { position: relative; z-index: 2; padding: 0 0 2.6rem; text-align: center; }
.topup-hero-inner { max-width: 720px; margin: 0 auto; }
.topup-hero h1 {
  font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 .45rem; font-weight: 900; color: #fff;
  letter-spacing: .02em;
}
.topup-hero p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.trust-row {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; justify-content: center; gap: .7rem 1.2rem; flex-wrap: wrap;
}
.trust-row li {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: .45rem .8rem; font-weight: 700; font-size: .86rem; color: var(--navy);
}
.topup-stage .method-grid {
  position: relative;
  z-index: 3;
  margin-top: -4.2rem;
  padding-top: 0;
}

.method-grid-rier {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.method-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
}
.method-card-rier {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.35rem 1.35rem 1.2rem; min-height: 320px;
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
  background: #fff;
  border-radius: 22px;
  isolation: isolate;
}
.method-card-rier:hover { text-decoration: none; }
.method-ice {
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  border-color: #d7e6ff;
  box-shadow: 0 18px 36px rgba(10, 36, 112, .12);
}
.method-marks {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.method-marks img {
  position: absolute;
  width: 150px; opacity: .08;
  mix-blend-mode: multiply;
}
.method-marks img:first-child { top: 12px; right: 12px; transform: rotate(18deg); }
.method-marks img:last-child { bottom: 24px; right: 16px; width: 92px; opacity: .06; }
.method-visual {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  min-height: 86px; margin-bottom: .15rem;
}
.method-visual img {
  width: auto; height: 72px; object-fit: contain;
  mix-blend-mode: multiply;
}
.method-visual-wide { justify-content: flex-end; min-height: 96px; }
.method-visual-wide img { width: 100%; height: 96px; object-fit: contain; object-position: right center; }
.method-visual-hex img { height: 68px; width: 68px; }
.method-card-rier h2 {
  font-family: var(--display); margin: 0; font-size: 1.28rem; font-weight: 900;
  position: relative; z-index: 1; letter-spacing: .01em;
}
.method-card-rier ul {
  margin: 0 0 auto; padding-left: 1.1rem; color: var(--muted); line-height: 1.55;
  position: relative; z-index: 1;
}
.method-badge {
  display: inline-flex; align-self: flex-start; margin-top: .8rem;
  font-size: .75rem; font-weight: 900;
  background: #dff5ea; color: #146447; border-radius: 999px; padding: .3rem .65rem;
  position: relative; z-index: 1;
}
.method-badge.alt { background: #fff4df; color: #9a6700; }
.topup-stage .method-login {
  background: linear-gradient(180deg, #fff8e4 0%, #ffe9a8 100%);
  border: 2px solid var(--gold);
  box-shadow:
    0 22px 40px rgba(229, 154, 0, .28),
    0 0 0 4px rgba(255, 184, 0, .18);
  transform: translateY(-10px);
  z-index: 4;
}
.topup-stage .method-login .method-visual img { mix-blend-mode: normal; }

.why-cards-rier { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.why-cards-rier article {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 1.2rem; text-align: center;
}
.why-ico {
  width: 72px; height: 72px; margin: 0 auto .7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 10px 22px rgba(10, 36, 112, .12);
  border: 1px solid #eef3ff;
}
.why-ico img {
  width: 48px; height: 48px; object-fit: contain;
}
.why-cards-rier h3 { margin: 0 0 .35rem; font-family: var(--display); font-weight: 900; }
.why-cards-rier p { margin: 0; color: var(--muted); }

/* Shared page pieces */
.page-hero { max-width: 1200px; margin: 0 auto; padding: 2rem 1.1rem 1rem; }
.page-hero.compact { padding-top: 1.4rem; }
.page-hero h1 { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 .35rem; font-weight: 900; }
.page-hero p { color: var(--muted); margin: 0; }
.crumb { font-size: .86rem; margin-bottom: .45rem !important; }
.seg {
  display: inline-flex; gap: .25rem; margin-top: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .25rem;
}
.seg a {
  padding: .45rem .9rem; border-radius: 999px; font-weight: 800;
  color: var(--muted); text-decoration: none;
}
.seg a.is-active { background: var(--sky-soft); color: var(--sky-deep); }

.order-layout {
  display: grid; grid-template-columns: 1.4fr .9fr; gap: 1.2rem; align-items: start;
}
.order-layout-steps .order-pick { grid-column: 1; }
.order-layout-steps .order-panel { grid-column: 2; grid-row: 1; }
.pkg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pkg-card { padding: .95rem; display: flex; flex-direction: column; gap: .2rem; }
.pkg-card.is-selected, .pkg-card.selectable:has(input:checked) {
  border-color: var(--sky); box-shadow: 0 0 0 3px rgba(0, 71, 255, .22);
}
.pkg-card.selectable { cursor: pointer; position: relative; }
.pkg-card.selectable input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-card s { color: var(--muted); }

.order-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: 20px; padding: 1.2rem; box-shadow: var(--shadow);
  position: sticky; top: 5.5rem;
  scroll-margin-top: 5rem;
}
.order-panel.solo { position: static; }
.order-panel h2 { margin: 0 0 1rem; font-family: var(--display); font-size: 1.3rem; font-weight: 900; }
.order-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; margin-bottom: 1rem;
}
.order-panel-head h2 { margin: 0; }
.btn-ubah-paket { display: none; flex-shrink: 0; }
.order-pick { scroll-margin-top: 5rem; }
.order-pick-hint { display: none; margin: 0 0 .85rem; color: var(--muted); font-weight: 700; }
.order-change-bar { display: none; }
.order-chosen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem;
  background: var(--gold-mist); border: 1px solid var(--line);
  border-radius: 14px; padding: .75rem .9rem; margin: 0 0 1rem;
}
.order-chosen .price { margin-left: auto; font-weight: 900; }
.order-panel label {
  display: flex; flex-direction: column; gap: .35rem;
  font-weight: 700; font-size: .88rem; margin-bottom: .8rem;
}
.order-panel input, .order-panel textarea {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .75rem .85rem; background: #fbfdff;
}
.order-panel input:focus, .order-panel textarea:focus {
  outline: 2px solid rgba(0, 71, 255, .35); border-color: var(--sky);
}
.order-total {
  display: flex; justify-content: space-between; align-items: center;
  margin: .4rem 0 1rem; padding: .8rem 0; border-top: 1px dashed var(--line);
}
.form-error {
  background: #fff1f1; color: #9b1c1c; border: 1px solid #f0c2c2;
  padding: .65rem .8rem; border-radius: 10px;
}
.profile-form .field-hint {
  display: block; margin-top: .2rem; font-weight: 600; color: var(--muted); font-size: .8rem;
}
.profile-links { margin-top: .85rem; }
.search-bar { display: flex; gap: .5rem; margin-top: 1rem; max-width: 480px; }
.search-bar input {
  flex: 1; border: 1px solid var(--line); border-radius: 999px;
  padding: .75rem 1rem; background: #fff;
}

.faq-list { display: grid; gap: .65rem; }
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .2rem 1rem;
}
.faq-item summary {
  cursor: pointer; font-weight: 800; padding: .85rem 0; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 0 0 1rem; color: var(--muted); }
.faq-item .faq-guide-link {
  color: #0047FF;
  font-weight: 800;
  text-decoration: underline;
}
.faq-item .faq-guide-link:hover { color: var(--navy); }

.plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-card { padding: 1.3rem; position: relative; }
.plan-card.is-featured { border-color: var(--sky); box-shadow: var(--shadow); }
.plan-card h2 { font-family: var(--display); margin: .5rem 0; font-size: 1.3rem; font-weight: 900; }
.plan-card ul { color: var(--muted); padding-left: 1.1rem; }

.review-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.review-card { padding: 1.1rem; }
.stars { color: #e6a700; letter-spacing: .05em; margin-bottom: .4rem; }
.review-card p { margin: 0 0 .8rem; }
.review-card footer { display: flex; flex-direction: column; gap: .15rem; color: var(--muted); }
.review-author { display: flex; align-items: center; gap: .4rem; }
.review-card img.home-rating-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.leader-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.leader-row {
  display: flex; gap: .9rem; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem;
}
.leader-row .rank { font-weight: 900; color: var(--sky-deep); width: 2.2rem; }
.leader-row.rank-1 { background: linear-gradient(90deg, #fff8e8, #fff); }
.leader-row small { color: var(--muted); display: block; }

.coin-balance {
  font-family: var(--display); font-size: 3rem; margin: 0;
  color: var(--sky-deep); line-height: 1; font-weight: 900;
}
.kv { margin: 0 0 1rem; }
.kv > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px dashed var(--line);
}
.kv dt { color: var(--muted); flex: 0 0 auto; }
/* Email & kode pesanan yang panjang harus membungkus, bukan melebar keluar layar. */
.kv dd {
  margin: 0; font-weight: 800; text-align: right;
  min-width: 0; overflow-wrap: anywhere;
}
.qris-box { text-align: center; margin-bottom: 1rem; }
.pakasir-box { text-align: center; }
.pay-qris-kicker {
  margin: 0 0 .55rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--navy);
}
.pay-qris-total {
  margin: .15rem 0 .35rem;
  font-size: 1.15rem;
  font-weight: 800;
}
.pakasir-box .btn { margin-top: .65rem; }
.qris-link { display: inline-block; }
.qris-image {
  width: min(280px, 88%);
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: .55rem;
  margin: 0 auto .65rem;
  display: block;
}
.qris-account { font-weight: 800; margin: 0 0 .35rem; color: var(--navy); }
.qris-preview {
  width: min(220px, 100%);
  height: 220px;
  object-fit: contain;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
  margin-bottom: .6rem;
  padding: .4rem;
}
.qris-fake {
  display: grid; place-items: center; width: min(220px, 70%); aspect-ratio: 1;
  margin: 0 auto .75rem; border-radius: 16px; border: 2px dashed #c9a227;
  background: repeating-linear-gradient(-45deg, var(--gold-mist), var(--gold-mist) 8px, var(--sky-soft) 8px, var(--sky-soft) 16px);
  font-weight: 900; color: var(--navy); letter-spacing: .04em;
}
.payment-proof-box {
  margin: 1rem 0 1.1rem; padding: 1rem; border-radius: 16px;
  background: var(--gold-mist); border: 1px solid var(--line);
}
.payment-proof-box h3 {
  margin: 0 0 .35rem; font-family: var(--display); font-weight: 900; color: var(--navy);
}
.payment-proof-form { display: grid; gap: .7rem; margin-top: .65rem; }
.payment-proof-file {
  display: grid; gap: .35rem; padding: .85rem; border-radius: 12px;
  border: 1.5px dashed #c9a227; background: #fff; cursor: pointer;
}
.payment-proof-file span { font-weight: 800; color: var(--navy); }
.payment-proof-file input[type=file] { font-size: .88rem; }
.payment-proof-preview {
  margin: 0; font-size: .85rem; font-weight: 700; color: #166534;
}
.pay-demo-details {
  margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem;
  color: var(--muted); font-size: .88rem;
}
.pay-demo-details summary { cursor: pointer; font-weight: 700; margin-bottom: .55rem; }
.status-pill {
  background: var(--sky-mist); color: var(--sky-deep);
  border-radius: 999px; padding: .2rem .6rem; font-size: .85rem;
}
.order-list { display: grid; gap: .65rem; }
.order-row {
  display: flex; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: .9rem 1rem; text-decoration: none; color: inherit;
}
.order-row .right { text-align: right; }
.order-row small { display: block; color: var(--muted); }
.prose { color: var(--muted); line-height: 1.7; }
.prose ol { color: var(--ink); }
.game-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.game-card, .game-chip {
  padding: 1rem; display: flex; flex-direction: column; gap: .25rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.game-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .85rem; margin-bottom: 1rem; }

.footer {
  margin-top: 2rem;
  border-top: 3px solid var(--gold);
  background: linear-gradient(180deg, #081C5C 0%, #0A2470 58%, #07184A 100%);
  color: #D6EAFF;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.1rem 1.2rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.4rem;
}
.footer-brand strong {
  font-family: var(--display); font-size: 1.3rem; color: #fff; font-weight: 700;
}
.footer-brand-mark {
  display: inline-block;
  margin-bottom: .55rem;
  text-decoration: none;
  background: none;
}
.footer-brand-mark:hover { text-decoration: none; }
.footer-wordmark {
  display: block;
  height: 52px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  object-position: left center;
  background: none;
}
.footer-brand p, .pay-note { color: rgba(214, 234, 255, .78); font-size: .9rem; }
.footer-col { display: flex; flex-direction: column; gap: .4rem; }
.footer-col h4 {
  margin: 0 0 .3rem; font-size: .92rem;
  color: #fff; font-family: var(--display); font-weight: 700;
}
.footer-col a { color: rgba(214, 234, 255, .82); font-size: .9rem; }
.footer-col a:hover { color: var(--gold); text-decoration: none; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding: 0 1.1rem 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem;
  color: rgba(224, 238, 255, .82); font-size: .82rem;
  border-top: 1px dashed rgba(255, 184, 0, .28);
  padding-top: 1rem;
}

/* Payment methods ornament — single-row marquee */
.pay-ornament {
  background: rgba(8, 20, 58, .55);
  border-top: 1px solid rgba(255, 184, 0, .22);
}
.pay-ornament-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .9rem 0 1.05rem;
}
.pay-ornament-title {
  margin: 0 1.1rem .65rem;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
}
.pay-marquee {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.pay-marquee-track {
  display: flex;
  width: max-content;
  animation: pay-marquee 38s linear infinite;
}
.pay-marquee:hover .pay-marquee-track {
  animation-play-state: paused;
}
.pay-marquee-group {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  padding-inline: 0 .55rem;
}
.pay-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;
  padding: 0 .15rem;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pay-logo-card img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}
@keyframes pay-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ticker-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pay-marquee-track { animation: none; }
  .pay-marquee { overflow-x: auto; }
  .ticker-track { animation: none; }
  .limited-marquee-track { animation: none; }
  .home-ratings-track { animation: none; }
}

/* Panel wallet adjust */
.wallet-balance-pill {
  display: inline-flex; align-items: center;
  background: #eef8ff; color: var(--sky-deep);
  border: 1px solid #cfe8fb; border-radius: 999px;
  padding: .35rem .75rem; font-weight: 800; font-size: .9rem;
}
.wallet-adjust-card .muted { margin: -.35rem 0 1rem; color: var(--muted); font-size: .9rem; }
.wallet-adjust-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .85rem;
}
.wallet-adjust-grid label {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .88rem; font-weight: 700; color: #333;
}
.wallet-adjust-grid .span-2 { grid-column: 1 / -1; }
.wallet-adjust-grid input,
.wallet-adjust-grid select {
  font-weight: 600; padding: .65rem .75rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.wallet-adjust-actions { display: flex; gap: .5rem; }
.panel-table tr.is-selected { background: #f3f9ff; }
.text-ok { color: #0a7a3e; font-weight: 800; }
.text-danger { color: #b42318; font-weight: 800; }

@media (max-width: 560px) {
  .wallet-adjust-grid { grid-template-columns: 1fr; }
  .wallet-adjust-grid .span-2 { grid-column: auto; }
  .pay-logo-card { height: 42px; }
  .pay-logo-card img { height: 34px; }
  .pay-marquee-track { animation-duration: 28s; }
  .ticker-track { animation-duration: 24s; }
  .limited-marquee-track { animation-duration: 80s; }
  .home-ratings-track { animation-duration: 48s; }
  .limited-marquee .limited-tile { flex-basis: 156px; width: 156px; }
}

.fab-wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  display: flex; align-items: center; gap: .45rem;
  padding: .26rem .28rem .26rem .26rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: var(--blue-sky);
  border: 0;
  box-shadow: 0 10px 22px rgba(77, 166, 255, .38);
}
.fab-wa:hover { color: #fff; text-decoration: none; }
.fab-wa-mark {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.fab-wa-mark img { width: 24px; height: 24px; object-fit: contain; }
.fab-wa-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: .86rem;
  line-height: 1;
  letter-spacing: .04em;
  padding: 0 .15rem 0 0;
}
.fab-wa-go {
  flex: 0 0 auto;
  width: 30px; height: 30px; margin-right: .02rem; border-radius: 50%;
  background: #fff;
  box-shadow: none;
  position: relative;
}
.fab-wa-go::before {
  content: "";
  position: absolute; top: 50%; left: 46%;
  width: 7px; height: 7px;
  border-right: 2.2px solid var(--blue-sky);
  border-bottom: 2.2px solid var(--blue-sky);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.featured-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .85rem;
}
.featured-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.featured-pkg {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 1rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease;
}
.featured-pkg:hover {
  transform: translateY(-3px); border-color: var(--gold); text-decoration: none;
}
.pkg-badge {
  font-size: .68rem; font-weight: 900; background: var(--navy); color: var(--gold);
  border-radius: 999px; padding: .25rem .55rem;
}
.login-note {
  margin: .55rem 0 0 !important; color: var(--navy) !important;
  background: var(--gold-mist); border: 1px solid var(--line);
  display: inline-block; padding: .55rem .85rem; border-radius: 12px; font-size: .92rem;
}
.field-hint { margin: -.35rem 0 .85rem; color: var(--muted); font-size: .82rem; }
.field-hint-danger {
  color: #8a1b1b; font-weight: 700;
  background: #fdecec; border: 1px solid #f3bcbc;
  border-radius: 10px; padding: .6rem .7rem; margin: .2rem 0 .85rem;
}
.csrf-help { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--navy); line-height: 1.55; }
.csrf-help li { margin: .35rem 0; }
#order-form .order-guest-hint { margin-top: .85rem; }
.method-login { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,24,.2); }

.pkg-grid-dense {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  max-height: 520px;
  overflow-y: auto;
  padding-right: .25rem;
}
.extras-row { margin-bottom: .85rem; }
.plus-card { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-mist), #fff); }
.btn-danger {
  background: #fff1f1; color: #9b1c1c; border: 1px solid #f0c2c2;
}
.btn-danger:hover { background: #ffe4e4; }

/* Staff panel */
.page-panel { background: #f7f4ea; }
.panel-wrap { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
.panel-subnav {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding: .55rem; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  position: sticky; top: .65rem; z-index: 5;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.panel-subnav a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .75rem; border-radius: 10px; font-weight: 800; font-size: .86rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  min-height: 40px;
}
.panel-subnav a:hover { background: #f4f7fb; text-decoration: none; }
.panel-subnav a.is-active { background: var(--navy); color: #fff; }
.panel-subnav a.is-active .nav-badge { background: var(--gold); color: #0B1B3A; }
.nav-badge, .chat-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
  border-radius: 999px; background: #e53935; color: #fff;
  font-size: .72rem; font-weight: 900; line-height: 1;
}
.chat-dot {
  min-width: auto; height: auto; padding: .2rem .45rem;
  background: #fff3cd; color: #9a6700; border: 1px solid #f0d78c;
}
.panel-nav-link { position: relative; }
.panel-nav-link .nav-badge { margin-left: .25rem; }
.row-unread { background: #fff8e8; }
.row-priority { box-shadow: inset 3px 0 0 #2e7d32; }
.panel-sort-hint { margin: -.2rem 0 .85rem; }
.text-warn { color: #c62828; }
.panel-head {
  display: flex; justify-content: space-between; gap: 1rem; align-items: end;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.panel-kicker { margin: 0; color: var(--gold-deep); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.panel-head h1 { margin: .15rem 0 0; font-family: var(--display); font-weight: 900; }
.panel-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.panel-actions .btn, .panel-action-buttons .btn { min-height: 42px; }
.panel-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem;
}
.panel-stats article {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem;
  box-shadow: var(--shadow);
}
.panel-stats span { display: block; color: var(--muted); font-size: .8rem; font-weight: 700; margin-bottom: .25rem; }
.panel-stats strong { font-family: var(--display); font-size: 1.35rem; color: var(--navy); }
.panel-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 1.1rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.panel-card h2 { margin: 0 0 1rem; font-family: var(--display); font-weight: 900; font-size: 1.2rem; }
.panel-card-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; gap: .75rem; flex-wrap: wrap;
}
.panel-card-head h2 { margin: 0; }
.rev-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.rev-tabs button {
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  border-radius: 999px; padding: .4rem .9rem; font-weight: 800; cursor: pointer;
}
.rev-tabs button.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.rev-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: .35rem 0 1rem;
}
.rev-summary article {
  background: var(--gold-mist); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem;
}
.rev-summary span { display: block; color: var(--muted); font-size: .78rem; font-weight: 800; margin-bottom: .2rem; }
.rev-summary strong { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--navy); }
.rev-summary small { color: var(--muted); font-weight: 700; }
.rev-range { margin: 0 0 .75rem; color: var(--navy); font-weight: 700; }
.rev-chart {
  display: grid; grid-template-columns: repeat(var(--n, 14), minmax(2.1rem, 1fr));
  align-items: end; gap: .4rem; overflow-x: auto; padding-bottom: .25rem;
}
.rev-col { display: flex; flex-direction: column; align-items: center; gap: .28rem; min-width: 0; }
.rev-val { font-size: .68rem; font-weight: 800; color: var(--navy); line-height: 1; min-height: .7rem; }
.rev-bar-wrap {
  height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center;
}
.rev-bar {
  width: 100%; max-width: 26px; height: 0;
  background: linear-gradient(#3d7bff, #0a2470);
  border-radius: 8px 8px 3px 3px;
}
.rev-bar.is-empty { height: 3px !important; background: #e6eaf2; }
.rev-label { font-size: .68rem; color: var(--muted); font-weight: 800; text-align: center; line-height: 1.2; }
.rev-pane[hidden] { display: none !important; }
.panel-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.panel-table th, .panel-table td {
  text-align: left; padding: .7rem .55rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.panel-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.panel-filters {
  display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.panel-filters input, .panel-filters select {
  border: 1px solid var(--line); border-radius: 12px; padding: .65rem .8rem; background: #fff;
  min-height: 42px; flex: 1 1 140px;
}
.panel-detail-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: start;
}
.secret-box {
  margin-top: 1rem; padding: 1rem; border-radius: 14px;
  background: var(--gold-mist); border: 1px dashed var(--gold-deep);
}
.secret-box h3 { margin: 0 0 .7rem; font-size: 1rem; }
.secret, .secret-pre {
  background: var(--navy); color: var(--gold); padding: .35rem .55rem; border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace; font-size: .86rem;
}
.secret-pre { white-space: pre-wrap; margin: 0; padding: .7rem; }
.secret-reveal summary {
  cursor: pointer; font-weight: 800; color: var(--navy);
  padding: .55rem .7rem; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  min-height: 42px; display: flex; align-items: center;
}
.secret-reveal[open] summary { margin-bottom: .6rem; }
.panel-actions-form label {
  display: flex; flex-direction: column; gap: .35rem; font-weight: 700; font-size: .88rem; margin-bottom: .75rem;
}
.panel-actions-form input, .panel-actions-form textarea {
  border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; background: #fbfdff;
}
.file-drop {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: .85rem .9rem;
  background: #fbfdff;
  cursor: text;
  margin: -.35rem 0 .75rem;
  outline: none;
}
.file-drop:focus,
.file-drop.is-dragover,
.file-drop.is-pasted {
  border-color: var(--gold-deep);
  background: var(--gold-mist);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, .28);
}
.file-drop-hint {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
  font-size: .82rem;
}
.file-drop-hint kbd {
  font-size: .78em;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05rem .28rem;
  background: #fff;
  font-weight: 800;
}
.file-drop-list {
  margin: .45rem 0 0;
  padding-left: 1.15rem;
  font-weight: 700;
  font-size: .82rem;
}
.panel-action-buttons { display: flex; flex-wrap: wrap; gap: .45rem; }
.panel-lead { margin: .35rem 0 0; color: var(--muted); max-width: 36rem; }
.catalog-hub {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.2rem;
}
.catalog-hub-card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.15rem;
  border-radius: 16px; border: 1px solid var(--line); background: var(--gold-mist);
  text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.catalog-hub-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,42,68,.08); }
.catalog-hub-card strong { font-family: var(--display); font-size: 1.15rem; color: var(--navy); }
.catalog-hub-card span { font-weight: 800; color: var(--gold-deep); }
.catalog-hub-card small { color: var(--muted); }
.catalog-qris-card {
  margin: 1rem 0 0;
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-mist), #fff);
  scroll-margin-top: 5rem;
}
.catalog-qris-card h2 { color: var(--navy); }
.catalog-stock-card,
.catalog-rate-card {
  margin: 1rem 0 0;
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-mist), #fff);
  scroll-margin-top: 5rem;
}
.catalog-rate-card { margin-bottom: 1rem; }
.stock-pool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.stock-pool-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.stock-pool-card > small {
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .75rem;
}
.stock-pool-card > strong {
  font-family: var(--display);
  font-size: 1.55rem;
  color: var(--navy);
  line-height: 1.15;
}
.stock-pool-card > strong span {
  font-size: .85rem;
  color: var(--gold-deep);
}
.stock-pool-form { margin-top: .45rem; }
.stock-pool-form-set { margin-top: .15rem; }
.stock-pool-form label {
  display: flex; flex-direction: column; gap: .3rem;
  font-weight: 700; font-size: .82rem;
}
.stock-pool-form input {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .65rem .75rem; background: #fbfdff; font: inherit; width: 100%;
}
.stock-pool-form .btn { width: 100%; margin-top: .4rem; }
.pkg-card.is-oos { opacity: .58; }
.pkg-card.is-oos small { color: #9b1c1c; }
.pay-unique {
  display: inline-block;
  background: #ffe08a;
  color: #1e2a44;
  border-radius: 8px;
  padding: 0 .35rem;
  line-height: 1.35;
}
.catalog-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.catalog-thumb-empty { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: #f4f7fb; border-radius: 10px; }
.catalog-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); display: block; margin-bottom: .6rem; }
.panel-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 700; font-size: .88rem; margin-bottom: .85rem; }
.panel-form .check-inline {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}
.panel-form .pay-mode {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .75rem 1rem .25rem;
  margin-bottom: 1rem;
  background: #fbfdff;
}
.panel-form .pay-mode legend {
  font-weight: 800;
  font-size: .88rem;
  padding: 0 .35rem;
}
.panel-form .pay-mode .check-inline { margin-bottom: .7rem; }
.panel-form input, .panel-form select, .panel-form textarea {
  border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; background: #fbfdff; font: inherit;
}
.panel-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .9rem; }
.panel-form-checks { display: flex; flex-wrap: wrap; gap: 1rem; margin: .4rem 0 1rem; }
.panel-form .check { flex-direction: row; align-items: center; font-weight: 700; }
.panel-image-field { margin: .5rem 0 1rem; padding: .9rem; border: 1px dashed var(--line); border-radius: 14px; background: #fff; }
.btn.danger { color: #9b1c1c; border-color: #f0c2c2; }
.pkg-img, .plan-img, .limited-thumb, .detail-hero-img, .featured-pkg-img {
  display: block; object-fit: cover; border-radius: 12px;
}
.pkg-img { width: 100%; height: 72px; margin-bottom: .45rem; }
.plan-img { width: 100%; height: 120px; margin-bottom: .65rem; }
.limited-thumb { width: 100%; aspect-ratio: 1; margin: .4rem 0; }
.detail-hero-img { width: 64px; height: 64px; display: inline-block; vertical-align: middle; margin-right: .4rem; }
.featured-pkg-img { border-radius: 10px; }
.discount-tag, .discount-line { color: #9a6700; font-weight: 700; }

.order-chat { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.order-chat h3, .rating-box h3 { margin: 0 0 .65rem; font-family: var(--display); font-weight: 900; font-size: 1.05rem; }
.chat-log { display: flex; flex-direction: column; gap: .55rem; max-height: 320px; overflow-y: auto; margin-bottom: .75rem; }
.chat-bubble { padding: .65rem .75rem; border-radius: 12px; background: #f4f7fb; border: 1px solid var(--line); }
.chat-bubble.is-staff { background: var(--gold-mist); }
.chat-bubble p { margin: .25rem 0; white-space: pre-wrap; }
.chat-bubble a {
  color: #0047FF;
  font-weight: 800;
  text-decoration: underline;
  word-break: break-all;
}
.chat-bubble a:hover { color: #0A2470; }
.chat-bubble small { color: var(--muted); font-size: .75rem; }
.chat-img { max-width: 160px; border-radius: 10px; margin-top: .35rem; display: block; }
.chat-form label { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .55rem; font-weight: 700; font-size: .88rem; }
.chat-form textarea {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: .7rem .8rem;
  background: #fbfdff;
  min-height: 4.5rem;
  resize: vertical;
}
.chat-form textarea.is-dragover,
.chat-file-drop.is-dragover,
.chat-file-drop.is-pasted {
  border-color: var(--gold-deep);
  background: var(--gold-mist);
  box-shadow: 0 0 0 3px rgba(255, 184, 0, .28);
}
.chat-file-drop { margin: 0 0 .75rem; }
.chat-file-pick { display: flex; flex-direction: column; gap: .3rem; margin: .55rem 0 0; font-weight: 700; font-size: .82rem; }
.file-drop-picked { margin: .45rem 0 0; font-weight: 800; font-size: .82rem; color: var(--navy); }
.rating-box { margin-top: 1rem; padding: 1rem; border-radius: 14px; background: var(--gold-mist); border: 1px solid var(--line); }
.stars { color: #e6a700; letter-spacing: .05em; font-size: 1.1rem; }
.review-img { max-width: 180px; border-radius: 12px; margin-top: .5rem; }
.home-ratings {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent);
}
.home-ratings-empty {
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.home-ratings-track {
  display: flex;
  width: max-content;
  animation: ticker-marquee 58s linear infinite;
}
.home-ratings:hover .home-ratings-track {
  animation-play-state: paused;
}
.home-ratings-group {
  display: flex;
  align-items: stretch;
  gap: .85rem;
  flex-shrink: 0;
  padding-inline: 0 .85rem;
}
.home-rating-card {
  flex: 0 0 260px;
  width: 260px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .9rem 1rem;
}
.home-rating-card strong { display: block; line-height: 1.3; }
.home-rating-card small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  margin-top: .12rem;
}
.home-rating-card img:not(.home-rating-avatar) { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; margin-top: .5rem; }
.home-rating-user { display: flex; align-items: center; gap: .4rem; margin-top: .15rem; }
.home-rating-card img.home-rating-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.home-rating-card p {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lookup-row { display: flex; gap: .45rem; }
.lookup-row input { flex: 1; }
.lookup-result {
  display: flex; align-items: center; gap: .55rem; margin-top: .45rem;
  padding: .55rem .65rem; border-radius: 10px; background: #f4f7fb; font-size: .88rem;
}
.lookup-result.is-ok { background: #dff5ea; }
.lookup-result.is-error { background: #fff1f1; color: #9b1c1c; }
.lookup-result img { border-radius: 50%; }
.rbx-verify {
  margin: 0 0 1.2rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7fbff;
}
.rbx-verify-head {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  margin-bottom: .25rem;
}
.rbx-verify-head h3 { margin: 0; font-size: 1rem; }
.rbx-verify-card {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-top: .65rem; padding: .75rem;
  border-radius: 12px; background: #fff; border: 1px solid var(--line);
}
.rbx-verify-card.is-ok { border-color: #8fd4b3; background: #f3fbf7; }
.rbx-verify-card.is-warn { border-color: #f0c36e; background: #fff9ec; }
.rbx-verify-card.is-banned { border-color: #f0a8a8; background: #fff4f4; }
.rbx-verify-avas { position: relative; flex-shrink: 0; }
.rbx-ava-full {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 16px; background: #e8f0ff; border: 1px solid var(--line);
}
.rbx-ava-head {
  position: absolute; right: -8px; bottom: -8px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #fff; object-fit: cover; background: #111;
}
.rbx-verify-meta { min-width: 0; flex: 1; }
.rbx-display { margin: 0; font-size: 1.15rem; font-weight: 900; }
.rbx-name { margin: .15rem 0 .4rem; color: var(--muted); font-weight: 700; }
.rbx-flag { margin: .35rem 0; font-size: .9rem; }
.rbx-flag.is-ok { color: #0f7a4a; font-weight: 700; }
.rbx-flag.is-warn { color: #8a5a00; font-weight: 700; }
.rbx-flag.is-bad { color: #9b1c1c; font-weight: 800; }
.rbx-user-cell {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 180px;
}
.rbx-user-ava {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  background: #dbe7ff; flex-shrink: 0;
}
.rbx-user-cell.is-banned .rbx-user-name { color: #9b1c1c; }
.rbx-user-cell.is-missing .rbx-user-name { color: #9b1c1c; }
@media (max-width: 720px) {
  .rbx-verify-card { flex-direction: column; align-items: center; text-align: center; }
  .rbx-ava-head { right: 50%; bottom: -10px; transform: translateX(50%); }
}
.google-btn {
  margin-top: 0;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #dadce0;
  font-weight: 700;
}
.google-btn:hover { background: #f8f9fa; color: #1f1f1f; }
.google-btn-icon { flex-shrink: 0; }
.auth-card form { margin: 0; }
.auth-forgot {
  margin: -.2rem 0 .9rem;
  text-align: right;
  font-size: .88rem;
  font-weight: 700;
}
.auth-forgot a { color: var(--blue, #0047ff); }
.otp-input {
  letter-spacing: .45em;
  font-size: 1.35rem;
  font-weight: 800;
  text-align: center;
}
.otp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.otp-actions form { margin: 0; }
.auth-or {
  display: flex; align-items: center; gap: .75rem;
  margin: .9rem 0 .7rem; color: var(--muted); font-weight: 700; font-size: .82rem;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.credit-apply { margin-bottom: .85rem; padding: .85rem; border-radius: 12px; background: var(--gold-mist); border: 1px solid var(--line); }
.orders-closed-pause {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  box-shadow: 0 8px 18px rgba(255, 184, 0, .32);
  position: relative;
}
.orders-closed-pause::before,
.orders-closed-pause::after {
  content: "";
  position: absolute;
  top: 13px;
  width: 6px;
  height: 22px;
  border-radius: 2px;
  background: var(--navy);
}
.orders-closed-pause::before { left: 15px; }
.orders-closed-pause::after { right: 15px; }
.shop-closed {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  background: rgba(10, 36, 112, .55);
}
.shop-closed[hidden] { display: none !important; }
.shop-closed-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.shop-closed-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 1.45rem 1.25rem 1.2rem;
  border-radius: 20px;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(10, 36, 112, .28);
}
.shop-closed-x {
  position: absolute;
  top: .45rem;
  right: .55rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem .4rem;
}
.shop-closed-card .orders-closed-pause {
  display: block;
  margin: .15rem auto .85rem;
}
.shop-closed-card h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.shop-closed-card p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}
.shop-closed-go {
  width: 100%;
  min-height: 48px;
}
body.shop-closed-on { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .shop-closed-card { animation: rise .25s ease both; }
}
@media (max-width: 560px) {
  .shop-closed-card { padding: 1.25rem 1rem 1.05rem; }
  .shop-closed-card h2 { font-size: 1.22rem; }
}

/* Game Pass missing modal (ala Golrox) */
.gp-modal[hidden] { display: none !important; }
.gp-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1rem;
}
.gp-modal-backdrop {
  position: absolute; inset: 0; background: rgba(18, 25, 38, .55);
}
.gp-modal-card {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: #fff; border-radius: 18px; padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid #e8e8e8;
  animation: rise .25s ease both;
}
.gp-modal-x {
  position: absolute; top: .45rem; right: .65rem; z-index: 2;
  border: 0; background: transparent; font-size: 1.45rem; cursor: pointer; color: #888;
}
.gp-preview { margin-bottom: .85rem; }
.gp-preview-sales {
  background: #2b2b2b; color: #fff; border-radius: 12px; padding: .9rem 1rem 1rem;
  font-size: .82rem;
}
.gp-preview-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .65rem; }
.gp-preview-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .7rem; color: #ddd;
}
.gp-toggle-on {
  width: 36px; height: 20px; border-radius: 999px; background: #00a2ff; position: relative;
}
.gp-toggle-on::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
}
.gp-preview-price-label { color: #bbb; margin-bottom: .35rem; }
.gp-req { color: #ff5a5a; }
.gp-preview-price-field {
  display: flex; align-items: center; gap: .45rem;
  background: #1e1e1e; border: 1px solid #444; border-radius: 8px;
  padding: .45rem .6rem; margin-bottom: .65rem;
}
.gp-preview-price-field strong { font-size: 1rem; letter-spacing: .02em; }
.gp-preview-check { display: flex; align-items: center; gap: .45rem; color: #ccc; }
.gp-check-box {
  width: 14px; height: 14px; border-radius: 3px;
  background: transparent; border: 2px solid #888; flex-shrink: 0;
}
.gp-preview-caption {
  margin: .45rem 0 0; color: #e67e22; font-size: .78rem; font-weight: 700;
}
.gp-modal-card h2 {
  margin: 0 0 .4rem; text-align: left;
  font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: #111;
  line-height: 1.2;
}
.gp-modal-lead {
  margin: 0 0 .85rem; text-align: left; color: #555; font-size: .9rem; line-height: 1.45;
}
.gp-tutorial-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .7rem .9rem; margin-bottom: .85rem;
  border: 1.5px solid #222; border-radius: 999px; background: #fff;
  color: #111; font-weight: 800; text-decoration: none; font-size: .92rem;
}
.gp-tutorial-btn:hover { background: #f7f7f7; }
.gp-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: #f3f4f6; border-radius: 12px; padding: .65rem .7rem; margin-bottom: .75rem;
}
.gp-user-meta { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.gp-avatar { border-radius: 50%; object-fit: cover; background: #111; }
.gp-user-meta strong { display: block; font-size: .95rem; color: #111; }
.gp-user-meta span { display: block; font-size: .78rem; color: #666; font-weight: 700; }
.gp-sudah-buat {
  flex-shrink: 0; border-radius: 999px !important; padding: .55rem 1rem !important;
  background: #22c55e !important; border-color: #22c55e !important; color: #fff !important;
  font-weight: 800;
}
.gp-atur-btn {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid #222; border-radius: 999px; background: #fff;
  color: #111; font-weight: 800; text-decoration: none; font-size: .95rem;
}
.gp-atur-btn:hover { background: #f7f7f7; }

/* Via Login — Backup Code modal (ala Golrox Instant checkout/data) */
.bk-modal[hidden] { display: none !important; }
.bk-modal {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 1rem;
}
.bk-modal-backdrop {
  position: absolute; inset: 0; background: rgba(18, 25, 38, .55);
}
.bk-modal-card {
  position: relative; z-index: 1; width: min(520px, 100%);
  max-height: min(92vh, 900px); overflow: auto;
  background: #fff; border-radius: 18px; padding: 1.15rem 1.2rem 1.15rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid #e8e8e8;
  animation: rise .25s ease both;
}
.bk-modal-card h2 {
  margin: 0 0 .45rem; font-family: var(--display); font-weight: 900;
  font-size: 1.45rem; color: #111;
}
.bk-lead { margin: 0 0 1rem; color: #555; font-size: .9rem; line-height: 1.45; }
.bk-lead a { color: #16a34a; font-weight: 800; text-decoration: none; }
.bk-carousel {
  display: grid; grid-template-columns: 36px 1fr 36px; gap: .35rem;
  align-items: center; margin-bottom: 1rem;
}
.bk-nav {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ddd;
  background: #fff; font-size: 1.35rem; cursor: pointer; color: #333;
}
.bk-nav:hover { background: #f5f5f5; }
.bk-slide-wrap {
  border: 1px solid #e5e7eb; border-radius: 14px; padding: .85rem .9rem 1rem;
  background: #fafafa; text-align: center; min-height: 160px;
}
.bk-step-text { margin: 0 0 .75rem; font-size: .92rem; font-weight: 700; color: #222; line-height: 1.4; }
.bk-step-visual {
  display: grid; place-items: center; height: 88px; margin: 0 auto .75rem;
  border-radius: 12px; background: #0B1B3A; color: var(--gold); font-weight: 900; font-size: 1.05rem;
}
.bk-dots { display: flex; justify-content: center; gap: .35rem; }
.bk-dots span {
  width: 7px; height: 7px; border-radius: 50%; background: #d1d5db;
}
.bk-dots span.is-active { background: #16a34a; }
.bk-user-box {
  display: flex; align-items: center; gap: .65rem;
  background: #f3f4f6; border-radius: 12px; padding: .7rem .8rem; margin-bottom: .9rem;
}
.bk-user-box span { display: block; font-size: .75rem; color: #888; font-weight: 700; }
.bk-user-box strong { display: block; font-size: 1rem; color: #111; }
.bk-codes-label { margin: 0 0 .55rem; font-size: .92rem; color: #222; font-weight: 700; }
.bk-codes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .75rem;
}
.bk-code {
  width: 100%; border: 1.5px solid #d1d5db; border-radius: 10px;
  padding: .7rem .55rem; text-align: center; font-weight: 800; font-size: .95rem;
}
.bk-code:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.bk-or { text-align: center; margin: .35rem 0 .65rem; color: #888; font-weight: 700; }
.bk-upload-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .75rem 1rem; margin-bottom: .45rem;
  border: 1.5px solid #16a34a; border-radius: 999px; background: #fff;
  color: #16a34a; font-weight: 800; cursor: pointer; font-size: .92rem;
}
.bk-upload-btn:hover { background: #f0fdf4; }
.bk-upload-name { margin: 0 0 .55rem; text-align: center; font-size: .82rem; color: #166534; font-weight: 700; }
.bk-help { margin: .55rem 0 .85rem; font-size: .85rem; color: #666; text-align: center; }
.bk-help a { color: #16a34a; font-weight: 800; text-decoration: none; }
#bk-checkout:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 560px) {
  .bk-codes-grid { grid-template-columns: 1fr; }
}

/* Via Username disclaimer modal */
.dc-modal[hidden] { display: none !important; }
.dc-modal {
  position: fixed; inset: 0; z-index: 220;
  display: grid; place-items: center; padding: 1rem;
}
.dc-modal-backdrop {
  position: absolute; inset: 0; background: rgba(18, 25, 38, .58);
}
.dc-modal-card {
  position: relative; z-index: 1; width: min(560px, 100%);
  max-height: min(92vh, 900px); display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid #e8e8e8;
  animation: rise .25s ease both;
}
.dc-modal-card h2 {
  margin: 0 0 .75rem; font-family: var(--display); font-weight: 900;
  font-size: 1.3rem; color: var(--navy); padding-right: 1.5rem;
}
.dc-scroll {
  overflow: auto; flex: 1; padding-right: .25rem; margin-bottom: .85rem;
  font-size: .9rem; line-height: 1.5; color: #333;
}
.dc-hello { margin: 0 0 .9rem; }
.dc-scroll h3 {
  margin: .85rem 0 .45rem; font-size: .95rem; color: var(--navy); font-weight: 900;
}
.dc-list { margin: 0 0 .5rem; padding-left: 1.2rem; }
.dc-list li { margin-bottom: .75rem; }
.dc-list p { margin: .25rem 0 0; color: #444; }
.dc-warn {
  margin-top: .85rem; padding: .85rem .9rem; border-radius: 14px;
  background: var(--gold-mist); border: 1px solid #f0d78c;
}
.dc-warn h3 { margin-top: 0; color: #9a6700; }
.dc-warn p { margin: .45rem 0 0; }
.dc-agree {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-bottom: .75rem; font-size: .9rem; font-weight: 700; color: #222;
  cursor: pointer; position: relative; z-index: 2; flex-shrink: 0;
}
.dc-agree input { margin-top: .2rem; width: 18px; height: 18px; flex-shrink: 0; }
.dc-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
  position: relative; z-index: 2; flex-shrink: 0;
}
.dc-actions .btn { flex: 1; min-width: 140px; }
#dc-continue:disabled { opacity: .45; cursor: not-allowed; }

.status-pending { background: #fff4df; color: #9a6700; }
.status-paid, .status-processing { background: #e8f0ff; color: #1e3a8a; }
.status-delivered, .status-completed { background: #dff5ea; color: #146447; }
.status-cancelled, .status-complaint { background: #fff1f1; color: #9b1c1c; }

@media (max-width: 980px) {
  .panel-stats, .panel-detail-grid, .catalog-hub, .panel-form-grid, .stock-pool-grid { grid-template-columns: 1fr; }
  .panel-wrap { padding: 1rem .75rem 2.5rem; }
  .panel-subnav { top: .4rem; }
  .panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rev-summary { grid-template-columns: 1fr; }
  .panel-action-buttons { flex-direction: column; }
  .panel-action-buttons .btn { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
  .panel-stats { grid-template-columns: 1fr 1fr; }
  .panel-table thead { display: none; }
  .panel-table, .panel-table tbody, .panel-table tr, .panel-table td {
    display: block; width: 100%;
  }
  .panel-table tr {
    margin-bottom: .75rem; padding: .75rem;
    border: 1px solid var(--line); border-radius: 14px; background: #fff;
  }
  .panel-table td {
    border: 0; padding: .35rem 0; display: flex; justify-content: space-between; gap: .75rem;
    align-items: flex-start;
  }
  .panel-table td::before {
    content: attr(data-label);
    font-weight: 800; color: var(--muted); font-size: .75rem; text-transform: uppercase;
    flex: 0 0 38%;
  }
  .panel-table td:last-child {
    padding-top: .55rem; margin-top: .25rem; border-top: 1px dashed var(--line);
  }
  .panel-table td:last-child::before { content: none; }
  .panel-table td:last-child .btn { width: 100%; justify-content: center; }
  .chat-log { max-height: 240px; }
  .topbar-atan .nav-actions .btn-ghost-light { font-size: .8rem; padding: .45rem .6rem; }
}

.proof-box, .limited-box, .customer-proofs {
  margin-top: 1rem; padding: 1rem; border-radius: 14px;
  background: var(--gold-mist); border: 1px solid var(--line);
}
.proof-box h3, .limited-box h3, .customer-proofs h3 {
  margin: 0 0 .55rem; font-size: 1rem; font-family: var(--display); font-weight: 900;
}
.proof-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem; margin-top: .85rem;
}
.proof-card {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; padding: 0 0 .55rem;
}
.proof-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.proof-card figcaption, .proof-card small {
  display: block; padding: .35rem .55rem 0; color: var(--muted); font-size: .78rem;
}
.inline-delete { padding: .35rem .55rem 0; }
.proof-wa { margin-top: .9rem; }
.proof-wa-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .45rem; }
.proof-share-card { max-width: 720px; margin: 1.5rem auto; }
.proof-share-grid { margin-top: 1rem; }
.proof-share-grid .proof-card img { aspect-ratio: auto; max-height: 480px; object-fit: contain; background: #0b1b3a08; }
.btn-wa {
  background: #25d366;
  color: #fff;
  border: 0;
  box-shadow: 0 8px 18px rgba(37, 211, 102, .28);
}
.btn-wa:hover { color: #fff; }
.type-pill {
  display: inline-block; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: .2rem .55rem; background: #eef1f8; color: var(--navy);
}
.type-limited { background: #fff4df; color: #9a6700; }
.type-robux { background: #e8f0ff; color: #1e3a8a; }
.type-roblox_plus { background: #f3e8ff; color: #6b21a8; }
.reseller-pill {
  display: inline-block; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: .15rem .5rem; background: #f3e8ff; color: #6b21a8;
  vertical-align: middle;
}
.guest-pill {
  display: inline-block; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: .15rem .5rem; background: #eef3fb; color: #3b4a66;
  vertical-align: middle;
}
.track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .85rem 0 1rem;
}
.block-muted { display: block; color: var(--muted); font-size: .78rem; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy); border-bottom: 1px solid rgba(255,184,0,.25);
    flex-direction: column; padding: .8rem 1.1rem 1rem; gap: .55rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile-extra {
    display: block;
    margin-top: .15rem;
    padding-top: .55rem;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .nav-links .nav-mobile-extra + .nav-mobile-extra {
    border-top: none;
    padding-top: .15rem;
    margin-top: 0;
  }
  .nav-mobile-logout { width: 100%; }
  .nav-mobile-logout button {
    width: 100%;
    background: none;
    border: 0;
    padding: .3rem 0;
    color: rgba(255,255,255,.95);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }
  .method-grid-rier, .method-grid-3, .why-cards-rier,
  .order-layout, .plan-grid, .footer-inner, .cta-band-visual, .cta-feedback-grid {
    grid-template-columns: 1fr;
  }
  .topup-navy { padding-bottom: 5.2rem; }
  .topup-stage .method-grid { margin-top: -3.4rem; }
  .topup-stage .method-login { transform: none; }
  .welcome-actions { display: contents; }
  .welcome-dock-row { display: contents; }
  .welcome-methods { display: none !important; }
  .welcome-grid {
    grid-template-columns: 1fr .95fr;
    align-items: stretch;
    padding-top: 0;
    grid-template-areas:
      "cta stats"
      "rank rank";
  }
  .rank-panel { align-self: start; }
  .stats-bar-dock { grid-area: stats; flex: none; }
  .welcome-cta-stack { grid-area: cta; flex: none; }
  .welcome-cta-stack {
    align-self: stretch;
    justify-content: stretch;
  }
  .welcome-cta-stack .cta-big {
    flex: 1 1 0;
    min-height: 76px;
  }
  .stats-bar-dock .stats-bar-inner { grid-template-columns: 1fr 1fr; }
  .banner-stage, .banner-stage-hero {
    aspect-ratio: 21 / 9;
    min-height: 0;
  }
  .banner-slide img,
  .banner-stage-hero .banner-slide img { height: 100%; }
  .cta-big { min-height: 0; padding: 1rem .75rem; }
  .cta-copy strong { font-size: .98rem; }
  .cta-ico { width: 44px; height: 44px; }
  .order-layout-steps .order-pick,
  .order-layout-steps .order-panel,
  .order-layout-steps .order-change-bar {
    grid-column: auto;
    grid-row: auto;
  }
  .order-panel { position: static; }
  .nav-actions .btn-ghost-light { display: none; }
  .nav-actions .panel-nav-link { display: inline-flex; }
  .nav-actions .reseller-nav-link { display: inline-flex; }
  .nav-riwayat { display: none; }
  .topbar-inner { padding: .65rem .75rem; gap: .55rem; }
  .topbar-atan .brand { min-width: 0; flex: 1 1 auto; }
  .topbar-atan .brand-logo { width: 40px; height: 40px; }
  .topbar-atan .brand-word {
    display: flex;
    font-size: clamp(.7rem, 3.4vw, .92rem);
    white-space: nowrap;
  }
  .nav-actions { flex-shrink: 0; gap: .35rem; }
  .topbar-atan .btn-on-blue { padding: .5rem .7rem; }
  .topbar-atan .btn-login {
    height: 44px;
    min-height: 44px;
    padding: 0 1.15rem 0 .9rem;
    font-size: 1rem;
    border-radius: 11px;
  }
  .topbar-atan .btn-login-key { width: 24px; height: 24px; }
  .topbar .nav-history,
  .topbar .nav-history span { font-size: .9rem; }
  .history-row { grid-template-columns: 1fr; }

  .order-layout-steps .pkg-grid-dense {
    max-height: none;
    overflow: visible;
  }
  .order-layout-steps .btn-ubah-paket { display: inline-flex; }
  .order-layout-steps .order-pick-hint-initial { display: block; }
  .order-layout-steps:not(.has-selection) .order-panel,
  .order-layout-steps.is-changing .order-panel {
    display: none;
  }
  .order-layout-steps.has-selection:not(.is-changing) .order-pick {
    display: none;
  }
  .order-layout-steps.is-changing .order-pick-hint-initial { display: none; }
  .order-layout-steps.is-changing .order-pick-hint-change { display: block; }
  .order-layout-steps.is-changing.has-selection .order-change-bar {
    display: flex;
    position: sticky;
    top: 4.4rem;
    z-index: 25;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: .75rem .9rem;
    margin-bottom: .85rem;
    box-shadow: var(--shadow);
  }
  .order-change-bar-copy {
    display: flex; flex-direction: column; min-width: 0;
  }
  .order-change-bar-copy small { color: var(--muted); font-weight: 700; }
  .order-change-bar-copy strong {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .page-order-robux .order-panel { margin-bottom: 4.5rem; }
  /* Jumlah Robux tetap bisa diubah di HP/tablet, bukan cuma di desktop. */
  .order-layout-steps .field-robux-amount { display: block; }
  .panel-subnav { top: 0; }
}

@media (max-width: 640px) {
  .welcome { padding: 0; }
  .welcome-hero { padding: .75rem .7rem .35rem; }
  .welcome-dock { padding: .5rem .7rem 1rem; }
  .welcome-grid {
    gap: .65rem;
    margin-top: 0;
    padding-top: 0;
    grid-template-columns: 1fr;
    grid-template-areas:
      "cta"
      "stats"
      "rank";
  }
  .banner-stage { border-radius: 18px; aspect-ratio: 21 / 9; }
  .welcome-cta-stack .cta-big { min-height: 72px; }
  .welcome-cta-stack .cta-big:not(.cta-alt) .cta-visual { width: 76px; min-height: 110px; }
  .welcome-cta-stack .cta-big:not(.cta-alt) .cta-hero { width: 58px; height: 58px; }
  .welcome-cta-stack .cta-visual { width: 56px; height: 56px; }
  .welcome-cta-stack .cta-big:not(.cta-alt) .cta-visual { width: 76px; min-height: 96px; }
  .welcome-cta-stack .cta-hero { width: 54px; height: 54px; }
  .welcome-cta-stack .cta-big:not(.cta-alt) .cta-hero { width: 60px; height: 60px; top: 6px; }
  .welcome-cta-stack .cta-alt .cta-hero { width: 58px; height: 58px; }
  .welcome-cta-stack .cta-big.cta-buy .cta-visual { width: 64px; height: 64px; min-height: 0; }
  .welcome-cta-stack .cta-big.cta-buy .cta-hero { width: 58px; height: 58px; top: auto; transform: none; }
  .welcome-cta-stack .cta-arrow { width: 36px; height: 36px; }
  .stats-bar-dock .stats-bar-inner { grid-template-columns: 1fr 1fr; }
  .stats-bar-inner strong { font-size: 1.25rem; }
  .section { padding-left: .7rem; padding-right: .7rem; }
  .cta-band { padding-left: .7rem; padding-right: .7rem; }
}

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.ticker-card { transition: transform .18s ease, border-color .18s ease; }
.ticker-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.home-rating-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-rating-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.method-card-rier {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.method-card-rier:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.topup-stage .method-ice:hover {
  transform: translateY(-8px);
}
.topup-stage .method-login:hover {
  transform: translateY(-16px);
  box-shadow:
    0 26px 46px rgba(229, 154, 0, .32),
    0 0 0 4px rgba(255, 184, 0, .22);
}
.cta-band-inner {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.cta-band-inner:hover { border-color: rgba(255,184,0,.55); }

.fab-wa {
  animation: fab-pulse 2.8s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab-wa:hover { transform: translateY(-2px); }
.fab-wa:active { transform: translateY(0) scale(.98); }
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(77, 166, 255, .38); }
  50% { box-shadow: 0 10px 22px rgba(77, 166, 255, .38), 0 0 0 6px rgba(77, 166, 255, .22); }
}

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.guide-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 1.1rem 2rem;
}
.page-guide .guide-page .page-hero,
.page-guide .guide-page .section {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}
.page-guide .guide-page .page-hero {
  text-align: center;
}
.guide-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.guide-step h2,
.guide-step > p {
  align-self: stretch;
  text-align: left;
}
.guide-step h2 {
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  color: var(--navy);
}
.guide-step p { margin: 0 0 .45rem; }
.guide-shots,
.guide-shot-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin-top: .55rem;
  padding: 0;
}
.guide-shot {
  display: block;
  width: 240px;
  max-width: 72%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #f6f8fc;
  object-fit: contain;
}
@media (max-width: 980px) {
  .nav-links a::after { display: none; }
  /* iOS memaksa zoom kalau font input di bawah 16px. */
  input, select, textarea { font-size: 16px; }
  .cta-feedback-file input[type=file],
  .payment-proof-file input[type=file] { font-size: 16px; }
  /* Area sentuh minimum yang nyaman di HP. */
  .nav-links a, .nav-actions button, .nav-actions a { min-height: 42px; }
  .bk-nav, .gp-modal-x { min-width: 42px; min-height: 42px; }
  .rev-tabs button, .seg a { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .banner-track { transition: none; }
  .banner-slide img { transform: none; }
  .cta-big::after,
  .fab-wa,
  .brand-word::after { animation: none; }
  .js-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pay-marquee-track { animation: none; }
  .ticker-track { animation: none; }
  .limited-marquee-track { animation: none; }
  .home-ratings-track { animation: none; }
  .ticker { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .limited-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .home-ratings { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .gp-modal-card,
  .bk-modal-card { animation: none; }
  .tile:hover,
  .method-card:hover,
  .cta-big:hover { transform: none; }
  .fab-wa:hover,
  .fab-wa:active { transform: none; }
  .topup-stage .method-login,
  .topup-stage .method-login:hover { transform: none; }
  .welcome-cta-stack .cta-big.cta-buy .cta-hero,
  .welcome-cta-stack .cta-big.cta-buy:hover .cta-hero { transform: none; }
}

/* Di layar sentuh tidak ada hover, jadi sentuhan yang menghentikan marquee. */
.ticker-track:active,
.limited-marquee-track:active,
.home-ratings-track:active { animation-play-state: paused; }

.desk-job { border-color: var(--gold); }
.desk-banner {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: #fff4df;
  border: 1px solid #f0d78c;
  font-weight: 800;
  color: #9a6700;
}
.desk-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.desk-fail { margin-top: 1rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.desk-list { margin: 0; padding-left: 1.1rem; font-weight: 700; }
.desk-list li { margin: .35rem 0; }
.desk-playbook { margin: 0 0 1rem; padding-left: 1.2rem; }
.desk-playbook li { margin: 0 0 .85rem; }
.desk-playbook p { margin: .25rem 0 0; font-weight: 600; color: var(--muted); }
.desk-notes { color: var(--navy) !important; }
.desk-teach-banner ol { margin: .5rem 0 0; padding-left: 1.2rem; font-weight: 700; }
.desk-teach-banner li { margin: .35rem 0; }
.desk-teach-step {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfdff;
}
.desk-teach-step.is-fail { background: #fff8f8; }
.desk-teach-kicker {
  margin: 0 0 .2rem;
  color: var(--gold-deep);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.desk-teach-step h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.desk-teach-step p { margin: 0 0 .55rem; color: var(--muted); font-weight: 600; }
.desk-json-wrap { margin-top: 1.1rem; }
.desk-json-wrap summary { cursor: pointer; font-weight: 800; }
.desk-json {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .78rem;
  min-height: 12rem;
}
.inline { display: inline; }