[data-theme='neo'], :root:has([data-theme='neo']) {
  --sv-display: var(--font-neo-display), var(--font-jakarta), system-ui, sans-serif;
  --sv-mono: var(--sv-display);
  /* Neutrals: fixed navy ink on a cool page (mockup B). */
  --sv-ink: #0E1430;
  /* Muted text: 7.2:1 on white, 6.7:1 on the page. */
  --sv-ink-2: #4D5676;
  /* Tertiary text: 5.8:1 on white, 5.4:1 on the page. */
  --sv-ink-3: #5B6484;
  --sv-bg: #F4F6FC;
  --sv-paper: var(--sv-bg);
  --sv-surface: #ffffff;
  --sv-surface-2: #EEF1FA;
  --sv-surface-3: #E3E8F5;
  --sv-line: #D5DBEC;
  --sv-line-strong: var(--sv-ink);
  --nb-navy: var(--sv-ink);
  --nb-on-navy: #ffffff;
  /* 9.2:1 on navy */
  --nb-on-navy-2: #AEB8DC;
  /* Primary family (fallbacks first; relative-color versions below). */
  --sv-primary-soft: color-mix(in oklab, var(--primary) 11%, white);
  --sv-primary-tint: color-mix(in oklab, var(--primary) 20%, white);
  --sv-primary-ink: color-mix(in oklab, var(--primary) 70%, black);
  --nb-primary-2: color-mix(in srgb, var(--primary) 80%, white);
  --sv-on-primary: var(--primary-foreground, #fff);
  /* Fixed accents (hue-shifted below when the primary is close). */
  --nb-pink: #FF4F9A;
  --nb-pink-soft: #FFE5EE;
  --nb-mint: #2EE6A6;
  --nb-mint-soft: #DBFBEA;
  --nb-on-accent: var(--sv-ink);
  --nb-bw: 2px;
  --nb-b: var(--nb-bw) solid var(--sv-ink);
  --nb-b-thick: 2.5px solid var(--sv-ink);
  --nb-b-soft: 1.5px solid var(--sv-ink);
  /* Hover shadow = the store's primary everywhere (one colour). On light surfaces a
     light primary (e.g. yellow) is deepened so the shadow stays visible; on the navy
     band/footer a dark primary is lifted. */
  --nb-hover: var(--primary);
  --nb-hover-dark: var(--primary);
  --nb-sh: var(--nb-hover);
  /* Status: small chips and text only. Text tones clear 4.5:1 on their soft fills. */
  --sv-ok: #08754F;
  --sv-ok-soft: var(--nb-mint-soft);
  --sv-err: #C4162F;
  --sv-err-soft: #FFE8EB;
  --sv-warn-ink: #8A5300;
  --sv-warn-soft: #FFF1D6;
  --sv-info-ink: var(--sv-primary-ink);
  --sv-info-soft: var(--sv-primary-soft);
  /* Discount / flash badges: pink pill, ink text (5.9:1). */
  --sv-hot: var(--nb-pink);
  --sv-hot-text: var(--sv-ink);
  --sv-hot-ink: var(--sv-ink);
  --sv-star: var(--nb-pink);
  --sv-radius-xl: 28px;
  --sv-radius-lg: 22px;
  --sv-radius: 18px;
  --sv-radius-sm: 14px;
  --sv-radius-xs: 10px;
  --sv-pill: 999px;
  --sv-shadow-sm: 2px 2px 0 var(--sv-ink);
  --sv-shadow: 4px 4px 0 var(--sv-ink);
  --sv-shadow-lg: 6px 6px 0 var(--sv-ink);
  --nb-shadow-xl: 8px 8px 0 var(--sv-ink);
  --sv-container: 1240px;
  --sv-gutter: clamp(16px, 4vw, 32px);
  --sv-section-gap: clamp(56px, 7vw, 96px);
  color-scheme: light;
}
@supports (color: oklch(from red l c h)) {
  [data-theme='neo'], :root:has([data-theme='neo']) {
    /* Pale primary wash (#E8EEFF on cobalt) and primary as text on white (>= 4.5:1). */
    --sv-primary-soft: oklch(from var(--primary) 0.95 min(c, 0.03) h);
    --sv-primary-tint: oklch(from var(--primary) 0.91 min(c, 0.06) h);
    --sv-primary-ink: oklch(from var(--primary) min(l, 0.5) min(c, 0.2) h);
    --nb-hover: oklch(from var(--primary) min(l, 0.62) c h);
    --nb-hover-dark: oklch(from var(--primary) max(l, 0.62) c h);
  }
}
/* Accent hue shift: pink moves toward violet when the primary hue is within ~30-50deg of
   it (red, pink, magenta brands); mint moves toward sky next to green / teal brands.
   Low-chroma (grey) primaries never shift. */
@supports (color: oklch(from red l c calc(h + abs(mod(h - 10, 360) - 180)))) {
  [data-theme='neo'], :root:has([data-theme='neo']) {
    --nb-pink: oklch(from var(--primary) 0.692 0.22 calc(358.6 - 58.6 * clamp(0, (50 - abs(mod(h - 178.6, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1)));
    --nb-pink-soft: oklch(from var(--nb-pink) 0.95 0.035 h);
    --nb-mint: oklch(from var(--primary) 0.823 0.168 calc(163.4 + 51.6 * clamp(0, (50 - abs(mod(h - 343.4, 360) - 180)) / 20, 1) * clamp(0, (c - 0.05) / 0.05, 1)));
    --nb-mint-soft: oklch(from var(--nb-mint) 0.965 0.04 h);
  }
}
/* Text on primary: white when the primary is dark enough (Y <= 0.2), ink-dark otherwise. */
@supports (color: color(from red xyz-d65 x y z)) {
  [data-theme='neo'], :root:has([data-theme='neo']) {
    --sv-on-primary: color(from var(--primary) xyz-d65 calc(0.9505 * clamp(0.0085, (0.2 - y) * 1000, 1)) clamp(0.0085, (0.2 - y) * 1000, 1) calc(1.089 * clamp(0.0085, (0.2 - y) * 1000, 1)));
  }
}
[data-theme='neo'] { font-family: var(--font-theme-body), system-ui, sans-serif; color: var(--sv-ink); -webkit-font-smoothing: antialiased; }
:root:has([data-theme='neo']) body { background: var(--sv-bg); }
[data-theme='neo'] ::selection { background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] :is(h1, h2, h3, h4) { font-family: var(--font-theme-heading), system-ui, sans-serif; letter-spacing: -0.02em; }
/* Focus: ink ring (>= 3:1 on the page, white cards and the cobalt band). */
[data-theme='neo'] :is(button, a, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
  outline: 3px solid var(--sv-ink); outline-offset: 3px; }

/* Layout */
[data-theme='neo'] .sv-container { width: 100%; max-width: var(--sv-container); margin-inline: auto; padding-inline: var(--sv-gutter); }
[data-theme='neo'] .sv-section { margin-top: var(--sv-section-gap); }
[data-theme='neo'] .sv-section:first-child { margin-top: 0; }

/* ── Section heading (mockup B): small uppercase muted kicker, big tight title,
      underlined ink "Lihat semua" on the title row ── */
[data-theme='neo'] .sv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(22px, 2.4vw, 28px); }
[data-theme='neo'] .sv-section-kicker { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-bottom: 12px;
  color: var(--sv-ink-2); font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
[data-theme='neo'] .sv-section-kicker svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.4; color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-section-title { font-family: var(--sv-display); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; color: var(--sv-ink);
  text-wrap: balance; }
[data-theme='neo'] .sv-section-sub { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--sv-ink-2); max-width: 58ch; }
[data-theme='neo'] .sv-section-link { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 0 2px; border-bottom: 2px solid var(--sv-ink);
  color: var(--sv-ink); font-family: var(--sv-display); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap;
  transition: color .15s, border-color .15s; }
[data-theme='neo'] .sv-section-link svg { display: none; }
/* 44px hit area around the text link */
[data-theme='neo'] .sv-section-link::after { content: ''; position: absolute; inset: -12px -8px; }
[data-theme='neo'] .sv-section-link:hover { color: var(--sv-primary-ink); border-color: var(--primary); }
/* Title and "Lihat semua" share one row (kicker above, sub below, full width). */
[data-theme='neo'] .sv-section-head:has(.sv-section-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 20px; align-items: end; }
[data-theme='neo'] .sv-section-head:has(.sv-section-link) > :first-child { display: contents; }
[data-theme='neo'] .sv-section-head:has(.sv-section-link) .sv-section-kicker { grid-column: 1 / -1; justify-self: start; }
[data-theme='neo'] .sv-section-head:has(.sv-section-link) .sv-section-title { grid-column: 1; grid-row: 2; }
[data-theme='neo'] .sv-section-head:has(.sv-section-link) > :is(.sv-section-aside, .sv-section-link) { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; margin-bottom: 6px; }
[data-theme='neo'] .sv-section-head:has(.sv-section-link) .sv-section-sub { grid-column: 1 / -1; }

/* Surfaces */
[data-theme='neo'] .sv-card { background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); }

/* Chips & badges: pills with an ink outline */
[data-theme='neo'] .sv-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--sv-pill); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
  background: var(--sv-surface); color: var(--sv-ink); border: var(--nb-b); }
[data-theme='neo'] .sv-chip svg { width: 13px; height: 13px; flex-shrink: 0; stroke-width: 2.4; }
[data-theme='neo'] .sv-chip--primary { background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-chip--signal { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-chip--hot { background: var(--sv-hot); color: var(--sv-hot-text); font-family: var(--sv-display); font-weight: 700; letter-spacing: 0; }
[data-theme='neo'] .sv-chip--glass { background: var(--sv-surface); color: var(--sv-ink); }

/* Buttons: pills, 2px ink. Primary = brand fill + 3px ink shadow (hover/press physics: neoInteractionCss). */
[data-theme='neo'] .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--sv-pill);
  font-family: var(--sv-display); font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; border: var(--nb-b); cursor: pointer; }
[data-theme='neo'] .sv-btn svg { flex-shrink: 0; }
[data-theme='neo'] .sv-btn--primary { background: var(--primary); color: var(--sv-on-primary); box-shadow: 3px 3px 0 var(--sv-ink); }
[data-theme='neo'] .sv-btn--primary:disabled { background: var(--sv-surface-3); color: var(--sv-ink-2); border-style: dashed; box-shadow: none; cursor: not-allowed; }
[data-theme='neo'] .sv-btn--ghost { background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-btn--block { width: 100%; }

/* Form fields */
[data-theme='neo'] .sv-field { display: grid; gap: 7px; }
[data-theme='neo'] .sv-label { font-size: 13.5px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-input { width: 100%; height: 48px; padding: 0 16px; border-radius: var(--sv-radius-sm); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); font-size: 15px; font-weight: 500;
  transition: border-color .15s, box-shadow .15s; }
[data-theme='neo'] .sv-input::placeholder { color: var(--sv-ink-3); }
[data-theme='neo'] .sv-input:focus { outline: none; border-color: var(--sv-ink); box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] .sv-hint { font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); }

/* Step panel (detail / joki forms): white card, ink border, primary number pill. */
[data-theme='neo'] .sv-step { background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-step-head { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 22px; border-bottom: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-step-num { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; flex-shrink: 0; border-radius: var(--sv-pill);
  border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary);
  font-family: var(--sv-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-step-title { font-family: var(--sv-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-step-aside { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-step-body { padding: 20px 22px 22px; }

/* Stars: pink with an ink outline (no yellow in this theme). */
[data-theme='neo'] .sv-stars { display: inline-flex; gap: 2px; color: var(--sv-star); }
[data-theme='neo'] .sv-stars svg { width: 15px; height: 15px; fill: currentColor; stroke: var(--sv-ink); stroke-width: 1.5; }

/* Skeleton: cool shimmer */
[data-theme='neo'] .sv-skeleton { background: linear-gradient(100deg, var(--sv-surface-2) 30%, var(--sv-surface) 50%, var(--sv-surface-2) 70%) 0 0 / 300% 100%; animation: sv-shimmer 1.6s linear infinite; border-radius: var(--sv-radius-sm); }
@keyframes sv-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ── Page background: one full-height visual layer behind every page, independent of the
   sections (bands, header, cards and footer are opaque and simply sit on top of it).
   - .sv-shell: the cool page + a faint ink 44px grid (the hero band's grid, continued),
     softened under the content column so text never sits on busy lines.
   - .sv-pattern::before / ::after (>= 1360px, where the side gutters are wide enough):
     B shapes hugging the content edge in both gutters, repeated down the page. Their
     fills follow the reseller colours (primary-pale, pink, mint); outlines are 2.5px ink.
   - .sv-pattern (pages other than the landing, which washes its own sections): soft
     primary-pale and mint-pale washes alternating left and right down the page. ── */
[data-theme='neo'] .sv-shell { position: relative; isolation: isolate; overflow-x: clip;
  --nb-gut-x: calc(var(--sv-container) / 2 - var(--sv-gutter) + 75px);
  --nb-gut-y: 150px;
  background:
    linear-gradient(90deg, transparent 4%, color-mix(in srgb, var(--sv-bg) 60%, transparent) 24% 76%, transparent 96%),
    linear-gradient(color-mix(in srgb, var(--sv-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, var(--sv-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--sv-bg); }
[data-theme='neo'] .sv-pattern { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
[data-theme='neo'] .sv-shell:not(:has(.sv-landing)) .sv-pattern { background:
  radial-gradient(ellipse 620px 440px at 0% 560px, color-mix(in srgb, var(--sv-primary-tint) 70%, transparent), transparent 72%) 0 0 / 100% 2200px repeat-y,
  radial-gradient(ellipse 620px 440px at 100% 1660px, color-mix(in srgb, var(--nb-mint-soft) 95%, transparent), transparent 72%) 0 0 / 100% 2200px repeat-y; }
[data-theme='neo'] .sv-pattern::before, [data-theme='neo'] .sv-pattern::after { content: none; }
@media (min-width: 1360px) {
  [data-theme='neo'] .sv-pattern::before, [data-theme='neo'] .sv-pattern::after { content: ''; position: absolute; inset: 0; }
  [data-theme='neo'] .sv-pattern::before {
    background:
      linear-gradient(to bottom, transparent 190px, var(--sv-primary-tint) 190px 310px, transparent 310px, transparent 330px, #fff 330px 358px, transparent 358px, transparent 796px, var(--nb-pink) 796px 864px, transparent 864px) calc(50% - var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y,
      linear-gradient(to bottom, transparent 500.48px, var(--nb-mint) 500.48px 579.52px, transparent 579.52px, transparent 1007px, #fff 1007px 1033px, transparent 1033px, transparent 1048px, var(--sv-primary-tint) 1048px 1172px, transparent 1172px, transparent 1614px, var(--nb-pink) 1614px 1666px, transparent 1666px) calc(50% + var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y;
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22250%22%20r%3D%2256%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22344%22%20r%3D%2210%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M92%20800Q98%20824%20122%20830Q98%20836%2092%20860Q86%20836%2062%20830Q86%20824%2092%20800Z%22%20transform%3D%22rotate(6%2092%20830)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") calc(50% - var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Crect%20x%3D%2236%22%20y%3D%22514%22%20width%3D%2252%22%20height%3D%2252%22%20rx%3D%2212.48%22%20transform%3D%22rotate(14%2062%20540)%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%221020%22%20r%3D%229%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%221110%22%20r%3D%2258%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M52%201618Q56.4%201635.6%2074%201640Q56.4%201644.4%2052%201662Q47.6%201644.4%2030%201640Q47.6%201635.6%2052%201618Z%22%20transform%3D%22rotate(-8%2052%201640)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") calc(50% + var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y;
    mask:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22250%22%20r%3D%2256%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22344%22%20r%3D%2210%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M92%20800Q98%20824%20122%20830Q98%20836%2092%20860Q86%20836%2062%20830Q86%20824%2092%20800Z%22%20transform%3D%22rotate(6%2092%20830)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") calc(50% - var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Crect%20x%3D%2236%22%20y%3D%22514%22%20width%3D%2252%22%20height%3D%2252%22%20rx%3D%2212.48%22%20transform%3D%22rotate(14%2062%20540)%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%221020%22%20r%3D%229%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%221110%22%20r%3D%2258%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M52%201618Q56.4%201635.6%2074%201640Q56.4%201644.4%2052%201662Q47.6%201644.4%2030%201640Q47.6%201635.6%2052%201618Z%22%20transform%3D%22rotate(-8%2052%201640)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") calc(50% + var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y; }
  [data-theme='neo'] .sv-pattern::after {
    background:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22250%22%20r%3D%2256%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22104%22%20cy%3D%22344%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M92%20800Q98%20824%20122%20830Q98%20836%2092%20860Q86%20836%2062%20830Q86%20824%2092%20800Z%22%20transform%3D%22rotate(6%2092%20830)%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%201380Q36%201362%2044%201380Q52%201398%2060%201380Q68%201362%2076%201380Q84%201398%2092%201380Q100%201362%20108%201380Q116%201398%20124%201380%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") calc(50% - var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%221800%22%20viewBox%3D%220%200%20150%201800%22%3E%3Crect%20x%3D%2236%22%20y%3D%22514%22%20width%3D%2252%22%20height%3D%2252%22%20rx%3D%2212.48%22%20transform%3D%22rotate(14%2062%20540)%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%221020%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%221110%22%20r%3D%2258%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M52%201618Q56.4%201635.6%2074%201640Q56.4%201644.4%2052%201662Q47.6%201644.4%2030%201640Q47.6%201635.6%2052%201618Z%22%20transform%3D%22rotate(-8%2052%201640)%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") calc(50% + var(--nb-gut-x)) var(--nb-gut-y) / 150px 1800px repeat-y; }
}

/* Mobile-only disclosure (guide cards). The toggle exists below 1024px only and the
   body always shows on desktop, so SSR never shifts the desktop layout. */
[data-theme='neo'] .sv-collapse-toggle { display: none; }
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-collapse-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 40px; margin-left: auto; padding: 0 12px 0 14px;
    border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface);
    font-family: var(--sv-display); font-size: 13.5px; font-weight: 700; color: var(--sv-ink); white-space: nowrap; cursor: pointer; }
  [data-theme='neo'] .sv-collapse-toggle::after { content: ''; position: absolute; inset: -3px; }
  [data-theme='neo'] .sv-collapse-toggle[aria-expanded='true'] { background: var(--sv-ink); color: var(--sv-surface); }
  [data-theme='neo'] .sv-collapse-toggle svg { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .2s; }
  [data-theme='neo'] .sv-collapse-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
  [data-theme='neo'] .sv-collapse-body:not([data-open]) { display: none; }
}

@media (max-width: 640px) {
  [data-theme='neo'] .sv-step-head { padding: 12px 16px; min-height: 60px; }
  [data-theme='neo'] .sv-step-body { padding: 16px; }
  [data-theme='neo'] .sv-step-title { font-size: 18px; }
  [data-theme='neo'] .sv-input { font-size: 16px; }
  [data-theme='neo'] .sv-section-head { margin-bottom: 20px; }
  [data-theme='neo'] .sv-section-kicker { margin-bottom: 10px; font-size: 12px; }
  [data-theme='neo'] .sv-section-title { font-size: 28px; }
  [data-theme='neo'] .sv-section-head:has(.sv-section-link) { gap: 0 14px; }
  [data-theme='neo'] .sv-section-link { font-size: 14px; }
  [data-theme='neo'] .sv-section-sub { margin-top: 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='neo'] *, [data-theme='neo'] *::before, [data-theme='neo'] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* shadcn/sonner toasts live outside the theme root: white card, ink outline, hard shadow. */
:root:has([data-theme='neo']) [data-sonner-toaster][data-sonner-theme] {
  --normal-bg: #fff; --normal-border: var(--sv-ink); --normal-text: var(--sv-ink);
  --success-bg: var(--sv-ok-soft); --success-border: var(--sv-ink); --success-text: var(--sv-ink);
  --error-bg: var(--sv-err-soft); --error-border: var(--sv-ink); --error-text: var(--sv-ink);
  --warning-bg: var(--sv-warn-soft); --warning-border: var(--sv-ink); --warning-text: var(--sv-ink);
  --info-bg: var(--sv-info-soft); --info-border: var(--sv-ink); --info-text: var(--sv-ink);
  --border-radius: 16px;
}
:root:has([data-theme='neo']) [data-sonner-toast] { font-family: var(--font-jakarta), system-ui, sans-serif; font-weight: 600; border-width: 2px !important; box-shadow: 4px 4px 0 var(--sv-ink) !important; }


/* ───────────── Landing layout ───────────── */
[data-theme='neo'] .sv-landing { padding-bottom: var(--sv-section-gap); overflow-x: clip; }
/* New sections (joki, artikel) sit in slots; an empty slot takes no space. */
[data-theme='neo'] .sv-landing-slot { margin-top: var(--sv-section-gap); }
[data-theme='neo'] .sv-landing-slot:empty { display: none; }
[data-theme='neo'] .sv-landing-slot > * { margin-top: 0; }
[data-theme='neo'] .sv-landing .sv-container .sv-container { max-width: none; padding-inline: 0; }
[data-theme='neo'] .sv-section-head-text { min-width: 0; }
[data-theme='neo'] .sv-section-aside { flex-shrink: 0; }

/* Shared horizontal rail (extra room top/bottom so lifted cards and shadows never clip) */
[data-theme='neo'] .sv-rail { position: relative; display: flow-root; --sv-rail-gap: 18px; --sv-rail-cols: 4; --sv-rail-bleed: 0px; }
[data-theme='neo'] .sv-rail-track { display: grid; grid-auto-flow: column; gap: var(--sv-rail-gap);
  grid-auto-columns: calc((100% - (var(--sv-rail-cols) - 1) * var(--sv-rail-gap)) / var(--sv-rail-cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: -10px calc(var(--sv-rail-bleed) * -1 - 10px) -14px; padding: 10px calc(var(--sv-rail-bleed) + 10px) 14px; scroll-padding-inline: calc(var(--sv-rail-bleed) + 10px); }
[data-theme='neo'] .sv-rail-track::-webkit-scrollbar { display: none; }
[data-theme='neo'] .sv-rail-item { display: flex; min-width: 0; scroll-snap-align: start; }
[data-theme='neo'] .sv-rail-item > * { flex: 1; min-width: 0; }
[data-theme='neo'] .sv-rail-btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: none; place-items: center; width: 46px; height: 46px; border-radius: var(--sv-pill);
  border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); box-shadow: 3px 3px 0 var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-rail-btn svg { width: 20px; height: 20px; stroke-width: 2.5; }
[data-theme='neo'] .sv-rail-btn--prev { left: -23px; }
[data-theme='neo'] .sv-rail-btn--next { right: -23px; }
[data-theme='neo'] .sv-rail-btn:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 1024px) {
  [data-theme='neo'] .sv-rail[data-overflow] .sv-rail-btn { display: grid; }
}
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-rail { --sv-rail-bleed: var(--sv-gutter); --sv-rail-gap: 12px; }
  [data-theme='neo'] .sv-rail-track { margin-inline: calc(var(--sv-rail-bleed) * -1); padding-inline: var(--sv-rail-bleed); scroll-padding-inline: var(--sv-rail-bleed); }
}

/* Shared skeleton bits */
[data-theme='neo'] .sv-skeleton-line { display: block; height: 12px; width: 72%; margin: 12px 2px 8px; border-radius: var(--sv-pill); }
[data-theme='neo'] .sv-skeleton-line--short { width: 44%; margin-top: 0; }
[data-theme='neo'] .sv-empty { padding: 32px 24px; text-align: center; }
[data-theme='neo'] .sv-empty-title { font-family: var(--sv-display); font-size: 18px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-empty-text { margin-top: 4px; font-size: 14px; color: var(--sv-ink-2); }

/* ───────────── Hero zone: full-bleed primary band + tilted banner card ───────────── */
[data-theme='neo'] .sv-landing .sv-hero { --nb-circle-r: clamp(150px, 19vw, 230px); --nb-circle-in: clamp(70px, 8vw, 110px);
  position: relative; isolation: isolate; padding: clamp(28px, 4vw, 60px) clamp(6px, 1.4vw, 22px) clamp(14px, 2vw, 28px); }
[data-theme='neo'] .sv-landing .sv-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  border-bottom: var(--nb-b-thick);
  background: radial-gradient(circle calc(var(--nb-circle-r) + 2.5px) at calc(100% - var(--nb-circle-in)) var(--nb-circle-in), var(--nb-primary-2) calc(var(--nb-circle-r) - 0.5px), var(--sv-ink) var(--nb-circle-r) calc(var(--nb-circle-r) + 2.5px - 0.5px), transparent calc(var(--nb-circle-r) + 2.5px)) no-repeat, linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--primary); }
[data-theme='neo'] .sv-landing .sv-hero:not(:has(.sv-hero-dots)) { padding-bottom: clamp(30px, 4.2vw, 60px); }
[data-theme='neo'] .sv-hero-frame { position: relative; isolation: isolate; aspect-ratio: 3 / 1; border-radius: 24px; overflow: hidden;
  border: var(--nb-b-thick); background: var(--sv-ink); box-shadow: var(--nb-shadow-xl); transform: rotate(1.2deg); }
[data-theme='neo'] .sv-hero-frame.sv-skeleton { background: var(--nb-primary-2); animation: none; }
[data-theme='neo'] .sv-hero-viewport { height: 100%; overflow: hidden; border-radius: 21px; }
[data-theme='neo'] .sv-hero-track { display: flex; height: 100%; touch-action: pan-y pinch-zoom; }
[data-theme='neo'] .sv-hero-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; }
[data-theme='neo'] .sv-hero-link { position: absolute; inset: 0; display: block; }
[data-theme='neo'] .sv-hero-link:focus-visible { outline-color: var(--sv-surface); outline-offset: -6px; }
[data-theme='neo'] .sv-hero-img { object-fit: cover; }
[data-theme='neo'] .sv-hero-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--sv-pill);
  border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); box-shadow: 3px 3px 0 var(--sv-ink); cursor: pointer; opacity: 0; }
[data-theme='neo'] .sv-hero-arrow svg { width: 22px; height: 22px; stroke-width: 2.5; }
[data-theme='neo'] .sv-hero-arrow--prev { left: 18px; }
[data-theme='neo'] .sv-hero-arrow--next { right: 18px; }
[data-theme='neo'] .sv-hero-arrow:focus-visible { opacity: 1; }
@media (hover: hover) {
  [data-theme='neo'] .sv-hero-frame:hover .sv-hero-arrow { opacity: 1; }
}
/* Dots on the band: text-on-primary ticks, the current one a white pill with an ink outline. */
[data-theme='neo'] .sv-hero-dots { display: flex; justify-content: center; gap: 0; padding-top: 18px; }
[data-theme='neo'] .sv-hero-dot { display: grid; place-items: center; width: 22px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .25s; }
[data-theme='neo'] .sv-hero-dot::before { content: ''; width: 10px; height: 10px; border-radius: var(--sv-pill); box-sizing: border-box;
  background: color-mix(in srgb, var(--sv-on-primary) 45%, transparent); transition: width .25s, background-color .2s; }
[data-theme='neo'] .sv-hero-dot:hover::before { background: color-mix(in srgb, var(--sv-on-primary) 80%, transparent); }
[data-theme='neo'] .sv-hero-dot[aria-current='true'] { width: 44px; }
[data-theme='neo'] .sv-hero-dot[aria-current='true']::before { width: 30px; height: 12px; background: var(--sv-surface); border: var(--nb-b); }
[data-theme='neo'] .sv-hero-dot:focus-visible { outline-color: var(--sv-surface); outline-offset: -2px; border-radius: var(--sv-pill); }
@media (max-width: 767px) {
  [data-theme='neo'] .sv-landing .sv-hero { --nb-circle-r: 132px; --nb-circle-in: 54px; padding: 22px 4px 8px; }
  [data-theme='neo'] .sv-landing .sv-hero:not(:has(.sv-hero-dots)) { padding-bottom: 28px; }
  [data-theme='neo'] .sv-hero-frame { border-radius: 18px; border-width: 2px; box-shadow: 5px 5px 0 var(--sv-ink); transform: rotate(1deg); }
  [data-theme='neo'] .sv-hero-viewport { border-radius: 16px; }
  [data-theme='neo'] .sv-hero-arrow { display: none; }
  [data-theme='neo'] .sv-hero-dots { padding-top: 12px; }
  [data-theme='neo'] .sv-hero-dot { height: 34px; }
}
/* The section after the hero band starts closer: the band's ink rule already separates. */
[data-theme='neo'] .sv-landing .sv-hero + .sv-section { margin-top: clamp(44px, 6vw, 88px); }

/* ───────────── Flash sale: white panel, ink border, primary offset shadow ───────────── */
[data-theme='neo'] .sv-landing .sv-flash-panel { position: relative; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--sv-radius-xl); background: var(--sv-surface);
  border: var(--nb-b); box-shadow: 6px 6px 0 var(--primary); overflow: clip; }
[data-theme='neo'] .sv-flash .sv-section-head { flex-wrap: wrap; align-items: flex-end; row-gap: 18px; }
/* The one sticker on the page: a tilted pink tag. */
[data-theme='neo'] .sv-flash .sv-section-kicker { height: 30px; margin-bottom: 14px; padding: 0 13px 0 11px; border: var(--nb-b); border-radius: var(--sv-pill);
  background: var(--nb-pink); color: var(--nb-on-accent); box-shadow: 2px 2px 0 var(--sv-ink); transform: rotate(-2deg); transform-origin: left center; }
[data-theme='neo'] .sv-flash .sv-section-kicker svg { color: var(--nb-on-accent); fill: currentColor; }
[data-theme='neo'] .sv-flash .sv-section-sub { margin-top: 8px; }
[data-theme='neo'] .sv-countdown { display: flex; align-items: center; gap: 10px; }
[data-theme='neo'] .sv-countdown-label { font-family: var(--sv-display); font-size: 14px; font-weight: 700; color: var(--sv-ink); white-space: nowrap; }
[data-theme='neo'] .sv-countdown-clock { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-countdown-unit { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 12px;
  border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary);
  font-family: var(--sv-display); font-size: 20px; font-weight: 700; letter-spacing: 0; }
[data-theme='neo'] .sv-countdown-sep { font-family: var(--sv-display); font-size: 16px; font-weight: 700; color: var(--sv-ink); }

[data-theme='neo'] .sv-rail--flash { --sv-rail-cols: 4; --sv-rail-gap: 18px; }
[data-theme='neo'] .sv-flash-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 16px; border-radius: 20px;
  background: var(--sv-surface); border: var(--nb-b); color: var(--sv-ink); }
[data-theme='neo'] .sv-flash-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
[data-theme='neo'] .sv-flash-card-icon { display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; border: var(--nb-b);
  background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-flash-card-icon img { width: 38px; height: 38px; object-fit: contain; }
[data-theme='neo'] .sv-flash-card-icon svg { width: 22px; height: 22px; }
[data-theme='neo'] .sv-flash-card-off { height: 26px; padding: 0 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-flash-card-name { font-family: var(--sv-display); font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme='neo'] .sv-flash-card-game { margin-top: 2px; font-size: 13.5px; color: var(--sv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-flash-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-flash-card-price strong { font-family: var(--sv-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); }
[data-theme='neo'] .sv-flash-card-price s { font-size: 13.5px; font-weight: 500; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-flash-card-stock { padding-top: 14px; }
[data-theme='neo'] .sv-flash-card .sv-meter { height: 10px; border-radius: var(--sv-pill); overflow: hidden; border: var(--nb-b); background: var(--sv-surface); box-sizing: content-box; }
[data-theme='neo'] .sv-flash-card .sv-meter-fill { display: block; height: 100%; border-radius: 0; background: var(--primary); }
[data-theme='neo'] .sv-flash-card-stock-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 13px;
  color: var(--sv-ink-2); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-flash-card-hot { display: inline-flex; align-items: center; gap: 3px; color: var(--sv-ink); font-weight: 700; white-space: nowrap; }
[data-theme='neo'] .sv-flash-card-hot svg { width: 14px; height: 14px; fill: var(--nb-pink); color: var(--sv-ink); stroke-width: 2; }
[data-theme='neo'] .sv-flash-card-stock-row > span:first-child { white-space: nowrap; }
/* Narrow cards: keep the flame, hide the label visually (still read by screen readers). */
[data-theme='neo'] .sv-flash-card { container-type: inline-size; }
@container (max-width: 172px) {
  [data-theme='neo'] .sv-flash-card-hot-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
[data-theme='neo'] .sv-flash-card-available { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--nb-mint); color: var(--nb-on-accent); font-size: 12.5px; font-weight: 700; }
[data-theme='neo'] .sv-flash-card-soldout { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--sv-pill); border: var(--nb-b); font-size: 12.5px; font-weight: 700;
  background: var(--sv-surface-3); color: var(--sv-ink); }
[data-theme='neo'] .sv-flash-card[data-state='soldout'] { background: var(--sv-surface-2); border-style: dashed; }
[data-theme='neo'] .sv-flash-card[data-state='soldout'] :is(.sv-flash-card-icon img, .sv-flash-card-price) { filter: grayscale(1); opacity: .6; }

@media (max-width: 1023px) {
  [data-theme='neo'] .sv-rail--flash { --sv-rail-cols: 2.6; --sv-rail-bleed: clamp(20px, 2.4vw, 28px); }
}
@media (max-width: 767px) {
  [data-theme='neo'] .sv-landing .sv-flash-panel { padding: 20px 16px; border-radius: 22px; box-shadow: 5px 5px 0 var(--primary); }
  [data-theme='neo'] .sv-rail--flash { --sv-rail-cols: 1.8; --sv-rail-bleed: 16px; --sv-rail-gap: 12px; }
  [data-theme='neo'] .sv-flash .sv-section-head { margin-bottom: 18px; }
  [data-theme='neo'] .sv-flash .sv-section-aside { width: 100%; }
  [data-theme='neo'] .sv-countdown { justify-content: space-between; }
  [data-theme='neo'] .sv-countdown-unit { min-width: 42px; height: 42px; font-size: 18px; border-radius: 11px; }
  [data-theme='neo'] .sv-flash-card { padding: 14px; border-radius: 18px; }
  [data-theme='neo'] .sv-flash-card-icon { width: 48px; height: 48px; border-radius: 14px; }
  [data-theme='neo'] .sv-flash-card-icon img { width: 32px; height: 32px; }
  [data-theme='neo'] .sv-flash-card-name { font-size: 16px; }
  [data-theme='neo'] .sv-flash-card-price strong { font-size: 19px; }
}
@media (max-width: 379px) {
  [data-theme='neo'] .sv-rail--flash { --sv-rail-cols: 1.55; }
}

/* ───────────── Trending: white cards, solid rank numerals ───────────── */
[data-theme='neo'] .sv-rail--trending { --sv-rail-cols: 3; --sv-rail-gap: 18px; }
[data-theme='neo'] .sv-trend-card { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 92px; padding: 12px 20px 12px 12px;
  border-radius: 20px; background: var(--sv-surface); border: var(--nb-b); overflow: hidden; color: var(--sv-ink); }
[data-theme='neo'] .sv-trend-thumb { position: relative; display: block; width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: var(--sv-surface-2); border: var(--nb-b-soft); }
[data-theme='neo'] .sv-trend-thumb img { object-fit: cover; }
[data-theme='neo'] .sv-trend-body { position: relative; z-index: 1; display: grid; gap: 6px; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-trend-name { font-family: var(--sv-display); font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-trend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-trend-meta > svg { width: 14px; height: 14px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-trend-badge { height: 24px; margin-left: 2px; padding: 0 9px; font-size: 11.5px; }
[data-theme='neo'] .sv-trend-rank { flex-shrink: 0; margin-left: auto; padding-left: 4px; font-family: var(--sv-display);
  font-size: 52px; font-weight: 700; line-height: 0.9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: #C9D0E6; }
[data-theme='neo'] .sv-trend-card[data-rank='1'] .sv-trend-rank { color: var(--primary); }
[data-theme='neo'] .sv-trend-skeletons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
[data-theme='neo'] .sv-trend-card--skeleton { border-color: var(--sv-line); }
[data-theme='neo'] .sv-trend-card--skeleton .sv-skeleton-line { margin: 0; }
[data-theme='neo'] .sv-rail--trending .sv-rail-track { overflow: visible; }
@media (min-width: 768px) {
  /* Desktop & Tablet: a tidy grid (3 per row) instead of a scroller. */
  [data-theme='neo'] .sv-rail--trending .sv-rail-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}
@media (max-width: 767px) {
  /* Mobile: 2-column grid instead of scrolling horizontally. */
  [data-theme='neo'] .sv-rail--trending { --sv-rail-gap: 10px; }
  [data-theme='neo'] .sv-rail--trending .sv-rail-track {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin: 0;
    padding: 0;
    margin-inline: 0;
    padding-inline: 0;
    gap: var(--sv-rail-gap);
  }
  [data-theme='neo'] .sv-rail--trending .sv-rail-btn { display: none !important; }
  [data-theme='neo'] .sv-trend-skeletons {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    gap: var(--sv-rail-gap);
  }
  [data-theme='neo'] .sv-trend-card {
    min-height: 70px;
    padding: 8px 10px 8px 8px;
    gap: 10px;
    border-radius: 16px;
  }
  [data-theme='neo'] .sv-trend-thumb {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }
  [data-theme='neo'] .sv-trend-body {
    gap: 2px;
  }
  [data-theme='neo'] .sv-trend-name {
    font-size: 13.5px;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  [data-theme='neo'] .sv-trend-badge {
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
    margin-left: 0;
  }
  [data-theme='neo'] .sv-trend-rank {
    font-size: 26px;
    padding-left: 2px;
  }
}
@media (max-width: 379px) {
  [data-theme='neo'] .sv-rail--trending { --sv-rail-gap: 8px; }
  [data-theme='neo'] .sv-trend-card {
    min-height: 64px;
    padding: 6px 8px 6px 6px;
    gap: 8px;
    border-radius: 14px;
  }
  [data-theme='neo'] .sv-trend-thumb {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }
  [data-theme='neo'] .sv-trend-name {
    font-size: 12px;
  }
  [data-theme='neo'] .sv-trend-rank {
    font-size: 22px;
  }
}

/* ───────────── Game + voucher cards: white box, framed artwork, bold name (mockup B) ───────────── */
[data-theme='neo'] :is(.sv-voucher-card, .sv-game-card) { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; padding: 10px 10px 14px;
  background: var(--sv-surface); border: var(--nb-b); border-radius: 22px; color: var(--sv-ink); }
[data-theme='neo'] :is(.sv-voucher-media, .sv-game-media) { position: relative; display: block; aspect-ratio: 1; border-radius: 15px; overflow: hidden;
  background: var(--sv-surface-2); border: var(--nb-b-soft); }
[data-theme='neo'] :is(.sv-voucher-media, .sv-game-media) img { object-fit: cover; }
[data-theme='neo'] :is(.sv-voucher-name, .sv-game-name) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; padding: 0 2px; border: 0; background: none;
  font-family: var(--sv-display); font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
[data-theme='neo'] .sv-voucher-name::before, [data-theme='neo'] .sv-voucher-name::after { content: none; }
[data-theme='neo'] :is(.sv-voucher-card--skeleton, .sv-game-card--skeleton) { border-color: var(--sv-line); }

[data-theme='neo'] .sv-rail--vouchers { --sv-rail-cols: 6; --sv-rail-gap: 18px; }
[data-theme='neo'] .sv-voucher-skeletons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-rail--vouchers { --sv-rail-cols: 4.3; --sv-rail-gap: 12px; }
  [data-theme='neo'] .sv-voucher-skeletons { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 23%; overflow: hidden; }
}
@media (max-width: 639px) {
  [data-theme='neo'] .sv-rail--vouchers { --sv-rail-cols: 2.7; --sv-rail-gap: 10px; }
  [data-theme='neo'] .sv-voucher-skeletons { grid-auto-columns: 36%; }
}

[data-theme='neo'] .sv-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-game-grid > li { display: flex; min-width: 0; }
[data-theme='neo'] .sv-game-card { flex: 1; }
@media (min-width: 340px) {
  [data-theme='neo'] .sv-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 560px) {
  [data-theme='neo'] .sv-game-grid { gap: 14px; }
}
@media (min-width: 840px) {
  [data-theme='neo'] .sv-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1120px) {
  [data-theme='neo'] .sv-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  [data-theme='neo'] :is(.sv-voucher-card, .sv-game-card) { gap: 8px; padding: 6px 6px 10px; border-radius: 16px; }
  [data-theme='neo'] :is(.sv-voucher-media, .sv-game-media) { border-radius: 11px; }
  [data-theme='neo'] :is(.sv-voucher-name, .sv-game-name) { font-size: 13px; line-height: 1.22; letter-spacing: -0.005em; overflow-wrap: anywhere; }
}

/* ───────────── The navy band (joki; without joki the voucher rail, then trending) ───────────── */

[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) { position: relative; isolation: isolate; color: var(--nb-on-navy); --nb-sh: var(--nb-hover-dark); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending)::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  background: linear-gradient(color-mix(in srgb, #fff 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--nb-navy); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) :is(.sv-section-kicker) { color: var(--nb-on-navy-2); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) :is(.sv-section-kicker) svg { color: var(--nb-mint); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) .sv-section-title { color: var(--nb-on-navy); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) .sv-section-sub { color: var(--nb-on-navy-2); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) .sv-section-link { color: var(--nb-on-navy); border-color: var(--nb-mint); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) :is(button, a, [tabindex]):focus-visible { outline-color: var(--nb-mint); }

[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) { padding-block: clamp(48px, 6vw, 80px); }
@media (max-width: 767px) {
  [data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending) { padding-block: 44px 48px; }
}

/* ───────────── Soft washes behind alternate paper sections (full-bleed, under the cards) ─────────────
   z -2 in the shell: above the page grid, below the gutter shapes (.sv-pattern, z -1) and every
   band. Low opacity, flat colour, no glow. */
[data-theme='neo'] .sv-landing :is(.sv-trending, .sv-vouchers, .sv-games, .sv-article-section) { position: relative; }
[data-theme='neo'] .sv-landing :is(.sv-trending, .sv-vouchers, .sv-games, .sv-article-section)::after { content: ''; position: absolute; z-index: -2; inset: -96px calc(50% - 50vw); pointer-events: none; }
[data-theme='neo'] .sv-landing .sv-trending::after { background: radial-gradient(ellipse min(46vw, 640px) 72% at 4% 46%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 72%); }
[data-theme='neo'] .sv-landing .sv-vouchers::after { background: radial-gradient(ellipse min(46vw, 640px) 72% at 96% 44%, color-mix(in srgb, var(--nb-mint) 15%, transparent), transparent 72%); }
[data-theme='neo'] .sv-landing .sv-games::after { background:
  radial-gradient(ellipse min(44vw, 620px) 26% at 97% 14%, color-mix(in srgb, var(--nb-mint) 15%, transparent), transparent 72%),
  radial-gradient(ellipse min(44vw, 620px) 26% at 3% 74%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 72%); }
[data-theme='neo'] .sv-landing .sv-article-section::after { background: radial-gradient(ellipse min(46vw, 640px) 72% at 96% 42%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 72%); }
[data-theme='neo'] :is(.sv-landing .sv-joki-section, .sv-landing:not(:has(.sv-joki-section)) .sv-vouchers, .sv-landing:not(:has(.sv-joki-section, .sv-vouchers)) .sv-trending)::after { content: none; }

/* Narrow screens have no side gutters for the page shapes (base.ts): two small B stickers sit in
   the empty top-right corner of the trending and "Semua Game" headings instead. */
@media (max-width: 1359px) {
  [data-theme='neo'] .sv-landing :is(.sv-trending, .sv-games) > .sv-section-head { position: relative; }
  [data-theme='neo'] .sv-landing :is(.sv-trending, .sv-games) > .sv-section-head::before,
  [data-theme='neo'] .sv-landing :is(.sv-trending, .sv-games) > .sv-section-head::after {
    content: ''; position: absolute; top: 2px; right: 0; width: 44px; height: 44px; pointer-events: none; }
  [data-theme='neo'] .sv-landing .sv-trending > .sv-section-head::before { background: var(--nb-mint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Crect%20x%3D%228.5%22%20y%3D%228.5%22%20width%3D%2227%22%20height%3D%2227%22%20rx%3D%226.48%22%20transform%3D%22rotate(14%2022%2022)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Crect%20x%3D%228.5%22%20y%3D%228.5%22%20width%3D%2227%22%20height%3D%2227%22%20rx%3D%226.48%22%20transform%3D%22rotate(14%2022%2022)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; }
  [data-theme='neo'] .sv-landing .sv-trending > .sv-section-head::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Crect%20x%3D%228.5%22%20y%3D%228.5%22%20width%3D%2227%22%20height%3D%2227%22%20rx%3D%226.48%22%20transform%3D%22rotate(14%2022%2022)%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; }
  [data-theme='neo'] .sv-landing .sv-games > .sv-section-head::before { background: var(--nb-pink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M22%203Q25.8%2018.2%2041%2022Q25.8%2025.8%2022%2041Q18.2%2025.8%203%2022Q18.2%2018.2%2022%203Z%22%20transform%3D%22rotate(6%2022%2022)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M22%203Q25.8%2018.2%2041%2022Q25.8%2025.8%2022%2041Q18.2%2025.8%203%2022Q18.2%2018.2%2022%203Z%22%20transform%3D%22rotate(6%2022%2022)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; }
  [data-theme='neo'] .sv-landing .sv-games > .sv-section-head::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cpath%20d%3D%22M22%203Q25.8%2018.2%2041%2022Q25.8%2025.8%2022%2041Q18.2%2025.8%203%2022Q18.2%2018.2%2022%203Z%22%20transform%3D%22rotate(6%2022%2022)%22%20fill%3D%22none%22%20stroke%3D%22%230E1430%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") 0 0 / 44px 44px no-repeat; }
}

/* Joki cards on the landing: the shared card (./pages) with a calm footer. */
[data-theme='neo'] .sv-landing .sv-joki-card-foot { border-top: 2px solid var(--sv-surface-3); }

/* ───────────── Article cards (landing) ───────────── */
[data-theme='neo'] .sv-landing .sv-article-card-meta { border-top: 2px solid var(--sv-surface-3); }

/* ───────────── Footer: the navy band that closes every page ───────────── */
[data-theme='neo'] .sv-footer { --nb-sh: var(--nb-hover-dark); position: relative; isolation: isolate; background: linear-gradient(color-mix(in srgb, #fff 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 4.5%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--nb-navy);
  color: var(--nb-on-navy); border-top: var(--nb-b-thick); }
[data-theme='neo'] .sv-footer :is(a, button):focus-visible { outline-color: var(--nb-mint); }
[data-theme='neo'] .sv-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; padding-block: 64px 44px; }
[data-theme='neo'] .sv-footer-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-family: var(--sv-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--nb-on-navy); }
[data-theme='neo'] .sv-footer-logo img { width: 44px; height: 44px; border-radius: 12px; }
[data-theme='neo'] .sv-footer-desc { max-width: 38ch; margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--nb-on-navy-2); }
[data-theme='neo'] .sv-footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-pill); background: var(--sv-surface); border: var(--nb-b);
  transition: transform .15s, box-shadow .15s; }
[data-theme='neo'] .sv-footer-social a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-footer-social img { width: 20px; height: 20px; object-fit: contain; }
[data-theme='neo'] .sv-footer-title { margin-bottom: 14px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-on-navy); }
[data-theme='neo'] .sv-footer-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-footer-col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 14.5px; font-weight: 500; color: var(--nb-on-navy-2); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color .15s; }
[data-theme='neo'] .sv-footer-col a:hover { color: var(--nb-on-navy); text-decoration-line: underline; text-decoration-color: var(--nb-hover-dark); }
[data-theme='neo'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[data-theme='neo'] .sv-footer-pay-item { display: grid; place-items: center; height: 44px; padding: 6px 8px; border-radius: 12px; background: var(--sv-surface); }
[data-theme='neo'] .sv-footer-pay-item img { width: auto; height: auto; max-width: 100%; max-height: 22px; object-fit: contain; }
[data-theme='neo'] .sv-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 22px 28px; border-top: 1.5px solid color-mix(in srgb, #fff 14%, transparent);
  font-size: 13px; font-weight: 500; color: var(--nb-on-navy-2); }
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-block: 48px 32px; }
  [data-theme='neo'] .sv-footer-brand, [data-theme='neo'] .sv-footer-pay { grid-column: 1 / -1; }
  [data-theme='neo'] .sv-footer-col a { min-height: 40px; }
}
@media (max-width: 479px) {
  [data-theme='neo'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-theme='neo'] .sv-footer-bottom { padding-bottom: 28px; }
}


/* ───────── Header shell (mobile first) ───────── */
[data-theme='neo'] .sv-nav { position: sticky; top: 0; z-index: 50; pointer-events: none; }
[data-theme='neo'] .sv-nav > * { pointer-events: auto; }
[data-theme='neo'] .sv-nav[data-collapsed] > .sv-nav-sub { pointer-events: none; }
[data-theme='neo'] .sv-nav-bar { position: relative; z-index: 2; background: var(--sv-surface); box-shadow: 0 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-nav-bar-inner { display: flex; align-items: center; gap: 10px; height: 60px; }

/* Identity: logo tile in the primary, ink border, 2px hard shadow */
[data-theme='neo'] .sv-nav-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 44px; min-height: 44px;
  border-radius: var(--sv-radius-xs); color: var(--sv-ink); }
[data-theme='neo'] .sv-nav-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: transparent; }
[data-theme='neo'] .sv-nav-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 15px; font-weight: 700; }
[data-theme='neo'] .sv-nav-name { display: none; min-width: 0; font-family: var(--sv-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search pill (small screens; opens the search sheet) */
[data-theme='neo'] .sv-nav-pill { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 14px;
  border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink-2); cursor: pointer; text-align: left;
  transition: box-shadow .15s ease; }
[data-theme='neo'] .sv-nav-pill:hover { box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] .sv-nav-pill svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sv-ink); stroke-width: 2.4; }
[data-theme='neo'] .sv-nav-pill-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14.5px; font-weight: 500; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-nav-pill-text--long { display: none; }

/* Account (small screens): "Masuk" white pill or initial avatar, 44px targets */
[data-theme='neo'] .sv-nav-me { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; width: 42px; height: 42px;
  border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink);
  font-family: var(--sv-display); font-size: 14.5px; font-weight: 700; transition: background-color .15s, transform .15s, box-shadow .15s; }
[data-theme='neo'] .sv-nav-me::before { content: ''; position: absolute; inset: -3px; }
[data-theme='neo'] .sv-nav-me:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-nav-me:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--sv-ink); }
[data-theme='neo'] .sv-nav-me[aria-current='page'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-nav-me svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2.3; }
[data-theme='neo'] .sv-nav-me-text { display: none; }
[data-theme='neo'] .sv-nav-me--avatar { border: 0; background: none; }
[data-theme='neo'] .sv-nav-me--avatar:hover { box-shadow: none; }
[data-theme='neo'] .sv-nav-me--avatar .sv-nav-avatar { width: 38px; height: 38px; font-size: 14px; }
[data-theme='neo'] .sv-nav-me--avatar[aria-current='page'] { background: none; }
[data-theme='neo'] .sv-nav-me--avatar[aria-current='page'] .sv-nav-avatar { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-nav-me--loading { border: 0; background: none; }
[data-theme='neo'] .sv-nav-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; border: var(--nb-b);
  background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 13px; font-weight: 700; }

/* Desktop-only parts are hidden on small screens */
[data-theme='neo'] .sv-nav-search, [data-theme='neo'] .sv-nav-utils, [data-theme='neo'] .sv-nav-sub { display: none; }

/* Buttons (desktop account, Lainnya sheet): Masuk white pill, Daftar pink pill */
[data-theme='neo'] .sv-nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 20px; border-radius: var(--sv-pill);
  border: var(--nb-b); white-space: nowrap; font-family: var(--sv-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; cursor: pointer; }
[data-theme='neo'] .sv-nav-btn--ghost { background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-nav-btn--ghost[aria-current='page'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-nav-btn--primary { background: var(--nb-pink); color: var(--nb-on-accent); box-shadow: 3px 3px 0 var(--sv-ink); }
[data-theme='neo'] .sv-nav-btn--primary[aria-current='page'] { background: var(--sv-ink); color: var(--sv-bg); box-shadow: 3px 3px 0 var(--nb-pink); }

/* Generic icon button kept for other areas. */
[data-theme='neo'] .sv-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; transition: background-color .15s; }
[data-theme='neo'] .sv-icon-btn:hover { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-icon-btn svg { width: 20px; height: 20px; stroke-width: 2.3; }

/* Phones ≥390px: the store name fits next to the tile. */
@media (min-width: 390px) {
  [data-theme='neo'] .sv-nav-name { display: block; max-width: 34vw; font-size: 16px; }
}
/* Tablets: same pattern, wider pill, "Masuk" gets its label. */
@media (min-width: 640px) {
  [data-theme='neo'] .sv-nav-bar-inner { gap: 16px; }
  [data-theme='neo'] .sv-nav-name { max-width: 220px; font-size: 18px; }
  [data-theme='neo'] .sv-nav-pill { height: 44px; margin-inline: 8px; }
  [data-theme='neo'] .sv-nav-pill-text--short { display: none; }
  [data-theme='neo'] .sv-nav-pill-text--long { display: block; }
  [data-theme='neo'] .sv-nav-me:not(.sv-nav-me--avatar):not(.sv-nav-me--loading) { width: auto; padding: 0 16px 0 12px; }
  [data-theme='neo'] .sv-nav-me-text { display: inline; }
}

/* Search field (desktop row 1): 2px ink pill */
[data-theme='neo'] .sv-nav-search { position: relative; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-nav-search-icon { position: absolute; left: 17px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--sv-ink); stroke-width: 2.4; pointer-events: none; }
[data-theme='neo'] .sv-nav-search-input { width: 100%; height: 46px; padding: 0 48px 0 46px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--sv-surface); color: var(--sv-ink); font-size: 15px; font-weight: 500; transition: box-shadow .15s; }
[data-theme='neo'] .sv-nav-search-input::placeholder { color: var(--sv-ink-2); font-weight: 500; }
[data-theme='neo'] .sv-nav-search-input:hover { box-shadow: 3px 3px 0 var(--sv-surface-3); }
[data-theme='neo'] .sv-nav-search-input:is(:focus, :focus-visible) { outline: none; box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] .sv-nav-search-kbd { position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1.5px solid var(--sv-ink); background: var(--sv-surface);
  font-family: var(--sv-display); font-size: 12px; font-weight: 600; line-height: 1; color: var(--sv-ink); pointer-events: none; transition: opacity .15s; }
[data-theme='neo'] .sv-nav-search:focus-within .sv-nav-search-kbd { opacity: 0; }
[data-theme='neo'] .sv-nav-search-clear { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--sv-pill); background: none; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-nav-search-clear:hover { background: var(--sv-surface-2); color: var(--sv-ink); }
[data-theme='neo'] .sv-nav-search-clear svg { width: 16px; height: 16px; stroke-width: 2.5; }
[data-theme='neo'] .sv-nav-search-pop { position: absolute; top: calc(100% + 12px); left: 0; z-index: 60; width: min(100%, 560px); max-height: min(460px, 70vh); overflow: auto;
  padding: 6px; background: var(--sv-surface); border: var(--nb-b); border-radius: 20px; box-shadow: var(--sv-shadow-lg); }

/* Suggestions (desktop dropdown + mobile sheet) */
[data-theme='neo'] .sv-suggest-label { padding: 8px 10px 6px; font-family: var(--sv-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-suggest-state { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 14px; line-height: 1.45; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-suggest-state svg { width: 16px; height: 16px; flex-shrink: 0; }
[data-theme='neo'] .sv-suggest-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-suggest-item { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 12px 6px 6px; border-radius: var(--sv-radius-sm); border: 2px solid transparent;
  font-size: 14.5px; font-weight: 700; color: var(--sv-ink); transition: background-color .12s, border-color .12s; }
[data-theme='neo'] .sv-suggest-item:hover, [data-theme='neo'] .sv-suggest-option[aria-selected='true'] .sv-suggest-item { background: var(--sv-primary-soft); border-color: var(--sv-ink); }
[data-theme='neo'] .sv-suggest-thumb { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--sv-radius-xs); overflow: hidden;
  background: var(--sv-surface-2); border: var(--nb-b-soft); }
[data-theme='neo'] .sv-suggest-thumb img { object-fit: cover; }
[data-theme='neo'] .sv-suggest-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-suggest-enter { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink); stroke-width: 2.4; opacity: 0; transition: opacity .12s; }
[data-theme='neo'] .sv-suggest-option[aria-selected='true'] .sv-suggest-enter { opacity: 1; }
[data-theme='neo'] .sv-suggest-all { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 12px;
  border: 0; border-top: 2px solid var(--sv-surface-3); border-radius: 0 0 var(--sv-radius-sm) var(--sv-radius-sm); background: none; cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); transition: color .15s, background-color .15s; }
[data-theme='neo'] .sv-suggest-state + .sv-suggest-all { margin-top: 0; }
[data-theme='neo'] .sv-suggest-all > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-suggest-all strong { font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-suggest-all svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink); stroke-width: 2.4; }
[data-theme='neo'] .sv-suggest-all:hover { color: var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-nav-spin { animation: sv-nav-spin .9s linear infinite; }
@keyframes sv-nav-spin { to { transform: rotate(360deg); } }

/* ───────── Desktop (≥1024px): two rows ───────── */
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-nav-bar-inner { gap: 20px; height: 72px; }
  [data-theme='neo'] .sv-nav-brand { gap: 10px; max-width: 280px; }
  [data-theme='neo'] .sv-nav-logo { width: 38px; height: 38px; }
  [data-theme='neo'] .sv-nav-name { display: block; max-width: none; font-size: 19px; }
  [data-theme='neo'] .sv-nav-pill, [data-theme='neo'] .sv-nav-me { display: none; }
  [data-theme='neo'] .sv-nav-search { display: block; }
  [data-theme='neo'] .sv-nav-utils { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  [data-theme='neo'] .sv-nav-sub { display: block; }
  /* The ink rule sits under row 2, or under row 1 while row 2 is tucked away. */
  [data-theme='neo'] .sv-nav-bar { box-shadow: none; }
  [data-theme='neo'] .sv-nav[data-collapsed] .sv-nav-bar { box-shadow: 0 2px 0 var(--sv-ink); }
}

/* Row 1 utilities: Cek Transaksi · divider · account */
[data-theme='neo'] .sv-nav-util { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--sv-pill); border: 2px solid transparent; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--sv-ink); transition: background-color .15s, border-color .15s; }
[data-theme='neo'] .sv-nav-util svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sv-ink); stroke-width: 2.3; }
[data-theme='neo'] .sv-nav-util:hover { background: var(--sv-surface-2); }
[data-theme='neo'] .sv-nav-util[aria-current='page'] { background: var(--sv-ink); border-color: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-nav-util[aria-current='page'] svg { color: currentColor; }
[data-theme='neo'] .sv-nav-divider { width: 2px; height: 24px; margin: 0 6px 0 2px; border-radius: 2px; background: var(--sv-surface-3); }
[data-theme='neo'] .sv-nav-auth { display: flex; align-items: center; gap: 10px; }
[data-theme='neo'] .sv-nav-auth-loading { display: block; width: 180px; height: 46px; border-radius: var(--sv-pill); }
[data-theme='neo'] .sv-nav-account { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; height: 48px; padding: 0 16px 0 6px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--sv-surface); color: var(--sv-ink); transition: background-color .15s, box-shadow .15s, transform .15s; }
[data-theme='neo'] .sv-nav-account:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-nav-account[aria-current='page'] { background: var(--sv-primary-soft); border-color: var(--primary); }
[data-theme='neo'] .sv-nav-account-text { display: grid; min-width: 0; line-height: 1.2; }
[data-theme='neo'] .sv-nav-account-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 800; }
[data-theme='neo'] .sv-nav-account-balance { white-space: nowrap; font-family: var(--sv-display); font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; }

/* Row 2: Belanja (left) and Komunitas (right, muted) */
[data-theme='neo'] .sv-nav-sub { position: relative; z-index: 1; background: var(--sv-surface); box-shadow: 0 2px 0 var(--sv-ink);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), opacity .24s ease; }
[data-theme='neo'] .sv-nav[data-collapsed] .sv-nav-sub { transform: translateY(-100%); opacity: 0; }
[data-theme='neo'] .sv-nav-sub-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 52px; }
[data-theme='neo'] .sv-nav-group { display: flex; min-width: 0; }
[data-theme='neo'] .sv-nav-group-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-nav-group-item { display: flex; }
[data-theme='neo'] .sv-nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; border-radius: var(--sv-pill); white-space: nowrap;
  transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-nav-link::after { content: ''; position: absolute; inset: -4px -2px; }
[data-theme='neo'] .sv-nav-link:hover { background: var(--sv-surface-2); color: var(--sv-ink); }
[data-theme='neo'] .sv-nav-link:focus-visible { outline-offset: 2px; }
[data-theme='neo'] .sv-nav-group[data-tone='primary'] .sv-nav-group-list { gap: 6px; }
[data-theme='neo'] .sv-nav-group[data-tone='primary'] .sv-nav-link { padding: 0 14px; font-family: var(--sv-display); font-size: 15px; font-weight: 600; color: var(--sv-ink); }
[data-theme='neo'] .sv-nav-group[data-tone='secondary'] .sv-nav-group-list { gap: 4px; }
[data-theme='neo'] .sv-nav-group[data-tone='secondary'] .sv-nav-link { gap: 6px; padding: 0 12px; font-family: var(--sv-display); font-size: 14px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-nav-group[data-tone='secondary'] .sv-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.2; }
/* Current page: ink pill with page-coloured text (both groups). */
[data-theme='neo'] .sv-nav-group :is(.sv-nav-link[aria-current='page'], .sv-nav-link[aria-current='page']:hover) { color: var(--sv-bg); background: var(--sv-ink); }
@media (min-width: 1024px) and (max-width: 1199px) {
  [data-theme='neo'] .sv-nav-bar-inner { gap: 14px; }
  [data-theme='neo'] .sv-nav-util { padding: 0 10px; }
  [data-theme='neo'] .sv-nav-btn { padding: 0 16px; }
  [data-theme='neo'] .sv-nav-divider { margin: 0 4px 0 0; }
}

/* ───────── Mobile search sheet (portalled to <body>; the theme scope is on the sheet) ───────── */
[data-theme='neo'].sv-search-sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--sv-bg); color: var(--sv-ink);
  animation: sv-sheet-in .2s cubic-bezier(.2, .7, .2, 1); }
@keyframes sv-sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-theme='neo'] .sv-search-sheet-bar { display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 8px 12px var(--sv-gutter);
  background: var(--sv-surface); border-bottom: var(--nb-b); }
[data-theme='neo'] .sv-search-sheet-form { position: relative; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-search-sheet-icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--sv-ink); stroke-width: 2.4; pointer-events: none; }
[data-theme='neo'] .sv-search-sheet-input { width: 100%; height: 48px; padding: 0 44px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--sv-surface); color: var(--sv-ink); font-size: 16px; font-weight: 600; box-shadow: 3px 3px 0 var(--primary); -webkit-appearance: none; appearance: none; }
[data-theme='neo'] .sv-search-sheet-input::placeholder { color: var(--sv-ink-2); font-weight: 500; }
[data-theme='neo'] .sv-search-sheet-input:is(:focus, :focus-visible) { outline: none; }
[data-theme='neo'] .sv-search-sheet-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
[data-theme='neo'] .sv-search-sheet-clear { position: absolute; right: 3px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: var(--sv-pill); background: none; color: var(--sv-ink-2); cursor: pointer; }
[data-theme='neo'] .sv-search-sheet-clear svg { width: 18px; height: 18px; stroke-width: 2.5; }
[data-theme='neo'] .sv-search-sheet-close { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--sv-pill); background: none; cursor: pointer;
  font-family: var(--sv-display); font-size: 15px; font-weight: 700; color: var(--sv-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
[data-theme='neo'] .sv-search-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px var(--sv-gutter) calc(24px + env(safe-area-inset-bottom)); }
[data-theme='neo'] .sv-search-sheet-body .sv-suggest-item { min-height: 60px; font-size: 15px; background: var(--sv-surface); border: var(--nb-b); border-radius: 16px; margin-bottom: 8px; }
[data-theme='neo'] .sv-search-sheet-body .sv-suggest-list { gap: 0; }
[data-theme='neo'] .sv-search-sheet-body .sv-suggest-all { min-height: 52px; font-size: 14px; border: var(--nb-b); border-radius: 16px; background: var(--sv-surface); }
[data-theme='neo'] .sv-search-sheet-hint { padding: 6px 2px 16px; font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-search-sheet-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-search-sheet-link { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 8px; border-radius: 16px; border: var(--nb-b);
  background: var(--sv-surface); font-size: 15px; font-weight: 700; color: var(--sv-ink); transition: transform .15s, box-shadow .15s; }
[data-theme='neo'] .sv-search-sheet-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-search-sheet-link:active { transform: none; box-shadow: 1px 1px 0 var(--sv-ink); }
[data-theme='neo'] .sv-search-sheet-link-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: var(--nb-b-soft);
  background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-search-sheet-link-icon svg { width: 19px; height: 19px; stroke-width: 2.3; }
[data-theme='neo'] .sv-search-sheet-link-go { width: 16px; height: 16px; margin-left: auto; color: var(--sv-ink); stroke-width: 2.4; }

/* ───────── Bottom tab bar (<1024px): white, ink rule, active = ink pill ───────── */
[data-theme='neo'] .sv-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom);
  background: var(--sv-surface); border-top: var(--nb-b); }
[data-theme='neo'] .sv-tabbar-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 600px; height: 64px; margin: 0 auto; padding: 0; list-style: none; }
[data-theme='neo'] .sv-tabbar-list > li { display: flex; min-width: 0; }
[data-theme='neo'] .sv-tabbar-item { position: relative; isolation: isolate; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px;
  padding: 4px 0 2px; border: 0; background: none; color: var(--sv-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s; }
[data-theme='neo'] .sv-tabbar-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 2; transition: color .15s; }
[data-theme='neo'] .sv-tabbar-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sv-display); font-size: 11.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
[data-theme='neo'] .sv-tabbar-item::before { content: ''; position: absolute; z-index: -1; top: 5px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: var(--sv-pill);
  background: var(--sv-ink); opacity: 0; transform: scale(0.7); transition: opacity .15s, transform .18s ease; }
[data-theme='neo'] .sv-tabbar-item:is([aria-current='page'], [data-active]) { color: var(--sv-ink); }
[data-theme='neo'] .sv-tabbar-item:is([aria-current='page'], [data-active]) svg { color: var(--sv-bg); stroke-width: 2.3; }
[data-theme='neo'] .sv-tabbar-item:is([aria-current='page'], [data-active]) .sv-tabbar-label { font-weight: 700; }
[data-theme='neo'] .sv-tabbar-item:is([aria-current='page'], [data-active])::before { opacity: 1; transform: none; }
[data-theme='neo'] .sv-tabbar-item:focus-visible { outline-offset: -4px; border-radius: var(--sv-radius-sm); }
/* In-flow spacer after the footer, so the bar never covers content */
[data-theme='neo'] .sv-tabbar-spacer { flex-shrink: 0; height: calc(64px + env(safe-area-inset-bottom)); background: var(--nb-navy); }
[data-theme='neo'] .sv-tabbar-label-short { display: none; }
@media (max-width: 379px) {
  [data-theme='neo'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-full { display: none; }
  [data-theme='neo'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-short { display: inline; }
}
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-tabbar, [data-theme='neo'] .sv-tabbar-spacer { display: none; }
}

/* ───────── "Lainnya" bottom sheet (portalled to <body>) ───────── */
[data-theme='neo'].sv-more { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; color: var(--sv-ink); }
[data-theme='neo'] .sv-more-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--sv-ink) 55%, transparent); animation: sv-more-fade .2s ease; }
[data-theme='neo'] .sv-more-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(88dvh, 720px); margin: 0 auto;
  border-radius: 24px 24px 0 0; background: var(--sv-surface); border: var(--nb-b-thick); border-bottom: 0;
  animation: sv-more-in .26s cubic-bezier(.2, .8, .2, 1); }
[data-theme='neo'] .sv-more-panel:focus { outline: none; }
[data-theme='neo'] .sv-more-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 12px 8px var(--sv-gutter); }
[data-theme='neo'] .sv-more-handle { position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 4px; background: var(--sv-surface-3); }
[data-theme='neo'] .sv-more-title { font-family: var(--sv-display); font-size: 26px; font-weight: 700; letter-spacing: -0.04em; }
[data-theme='neo'] .sv-more-close { display: grid; place-items: center; width: 44px; height: 44px; border: var(--nb-b); border-radius: var(--sv-pill); background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-more-close svg { width: 20px; height: 20px; stroke-width: 2.5; }
[data-theme='neo'] .sv-more-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sv-gutter) calc(16px + env(safe-area-inset-bottom)); }
[data-theme='neo'] .sv-more-group { padding: 12px 0; }
[data-theme='neo'] .sv-more-group + .sv-more-group { border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-more-group-title { display: block; margin: 2px 0 10px; font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-more-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-more-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px 6px 6px; border-radius: 16px; border: var(--nb-b);
  background: var(--sv-surface); font-size: 15px; font-weight: 700; color: var(--sv-ink); transition: background-color .12s, transform .12s, box-shadow .12s; }
[data-theme='neo'] .sv-more-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-more-link:active { transform: none; box-shadow: 1px 1px 0 var(--sv-ink); }
[data-theme='neo'] .sv-more-link[aria-current='page'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-more-link-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; border: var(--nb-b-soft);
  background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-more-link-icon svg { width: 19px; height: 19px; stroke-width: 2.3; }
[data-theme='neo'] .sv-more-link[aria-current='page'] .sv-more-link-icon { background: var(--primary); color: var(--sv-on-primary); border-color: var(--sv-bg); }
[data-theme='neo'] .sv-more-link-text { flex: 1; min-width: 0; }
[data-theme='neo'] .sv-more-link-go { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; stroke-width: 2.4; }
[data-theme='neo'] .sv-more-auth { display: grid; gap: 12px; padding: 2px 0 4px; }
[data-theme='neo'] .sv-more-auth-note { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-more-auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-theme='neo'] .sv-more-auth-actions .sv-nav-btn { height: 50px; font-size: 15.5px; }
[data-theme='neo'] .sv-more-account { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px 10px 10px; border-radius: 16px;
  border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); transition: transform .12s, box-shadow .12s; }
[data-theme='neo'] .sv-more-account:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-more-account[aria-current='page'] { border-color: var(--primary); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-more-account .sv-nav-avatar { width: 44px; height: 44px; font-size: 17px; }
[data-theme='neo'] .sv-more-account-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
[data-theme='neo'] .sv-more-account-name { font-size: 15px; font-weight: 800; }
[data-theme='neo'] .sv-more-account-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sv-display); font-size: 13px; font-weight: 600; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-more-account-loading { display: block; height: 68px; border-radius: 16px; }
@keyframes sv-more-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sv-more-fade { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Footer: Belanja / Bantuan / Komunitas columns ───────── */
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-footer-grid[data-community] { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.9fr)) minmax(0, 1.45fr); gap: 32px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [data-theme='neo'] .sv-footer-grid[data-community] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-shell:has(> .sv-tabbar-spacer) .sv-footer-bottom { padding-bottom: 24px; }
  /* Pages with their own fixed order bar (no tab bar): keep the copyright line clear of it. */
  [data-theme='neo'] .sv-shell:has(.sv-order-bar, .sv-joki-bar) .sv-footer-bottom { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* ───────── Header-aware offsets for sticky content and scroll targets ───────── */
[data-theme='neo'] .sv-shell .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-bar-h, 72px) + 24px); }
[data-theme='neo'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { top: calc(var(--sv-header-offset, 124px) + 20px); transition: top .32s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  [data-theme='neo'] .sv-nav-sub, [data-theme='neo'] .sv-nav-bar, [data-theme='neo'] .sv-nav-link, [data-theme='neo'].sv-search-sheet,
  [data-theme='neo'] .sv-tabbar-item, [data-theme='neo'] .sv-tabbar-item svg, [data-theme='neo'] .sv-tabbar-item::before,
  [data-theme='neo'] .sv-more-panel, [data-theme='neo'] .sv-more-backdrop, [data-theme='neo'] .sv-nav-me, [data-theme='neo'] .sv-more-link, [data-theme='neo'] .sv-search-sheet-link, [data-theme='neo'] .sv-nav-account, [data-theme='neo'] .sv-more-account,
  [data-theme='neo'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { transition: none; animation: none; }
  [data-theme='neo'] :is(.sv-nav-me, .sv-more-link, .sv-search-sheet-link, .sv-nav-account, .sv-more-account):is(:hover, :active) { transform: none; }
}


@keyframes sv-spin { to { transform: rotate(360deg); } }
[data-theme='neo'] .sv-spin { animation: sv-spin 1s linear infinite; }

/* ---------- Page frame ---------- */
[data-theme='neo'] .sv-detail { overflow-x: clip; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
[data-theme='neo'] .sv-detail-main { margin-top: 32px; }
[data-theme='neo'] .sv-detail-layout {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "info" "form" "reviews";
}
[data-theme='neo'] .sv-detail-info { grid-area: info; min-width: 0; }
[data-theme='neo'] .sv-detail-form { grid-area: form; min-width: 0; display: grid; gap: 22px; align-content: start; }
[data-theme='neo'] .sv-detail-reviews { grid-area: reviews; min-width: 0; }
[data-theme='neo'] .sv-detail-reviews:empty { display: none; }
[data-theme='neo'] .sv-detail-anchor { scroll-margin-top: 112px; }
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-detail { padding-bottom: 88px; }
  [data-theme='neo'] .sv-detail-main { margin-top: 40px; }
  [data-theme='neo'] .sv-detail-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "info form" "reviews form";
    column-gap: 28px; row-gap: 22px; align-items: start;
  }
  [data-theme='neo'] .sv-detail-anchor { scroll-margin-top: 96px; }
}
/* Reviews follow the long form on tall desktop screens (collapsed card only). */
@media (min-width: 1024px) and (min-height: 820px) {
  [data-theme='neo'] .sv-detail-reviews { position: sticky; top: 96px; }
  [data-theme='neo'] .sv-detail-reviews:has([aria-expanded='true']) { position: static; }
}

/* ---------- Hero zone: primary band, framed banner, info card on top ---------- */
[data-theme='neo'] .sv-detail .sv-hero { --nb-circle-r: clamp(140px, 19vw, 230px); --nb-circle-in: clamp(60px, 8vw, 110px);
  position: relative; isolation: isolate; padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(26px, 3vw, 40px); }
[data-theme='neo'] .sv-detail .sv-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); pointer-events: none;
  border-bottom: var(--nb-b-thick);
  background: radial-gradient(circle calc(var(--nb-circle-r) + 2.5px) at calc(100% - var(--nb-circle-in)) var(--nb-circle-in), var(--nb-primary-2) calc(var(--nb-circle-r) - 0.5px), var(--sv-ink) var(--nb-circle-r) calc(var(--nb-circle-r) + 2.5px - 0.5px), transparent calc(var(--nb-circle-r) + 2.5px)) no-repeat, linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--primary); }
[data-theme='neo'] .sv-hero-banner {
  position: relative; aspect-ratio: 3 / 1; overflow: hidden;
  border-radius: 24px; background: var(--sv-ink); border: var(--nb-b-thick); box-shadow: var(--nb-shadow-xl);
}
[data-theme='neo'] .sv-hero-banner-img { object-fit: cover; object-position: 50% 10%; }
[data-theme='neo'] .sv-hero-card {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 20px;
  margin: -64px 28px 0; padding: 18px 22px;
  background: var(--sv-surface); border: var(--nb-b-thick);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg);
}
[data-theme='neo'] .sv-hero--plain .sv-hero-card { margin: 0; }
/* The logo sits inside the card (no negative margin, nothing pokes out). */
[data-theme='neo'] .sv-hero-logo {
  position: relative; flex-shrink: 0; width: 88px; height: 88px; align-self: center; margin: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 20px; border: var(--nb-b); box-shadow: 2px 2px 0 var(--sv-ink);
  background: var(--primary); color: var(--sv-on-primary);
  font-family: var(--sv-display); font-size: 34px; font-weight: 700;
}
[data-theme='neo'] .sv-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
[data-theme='neo'] .sv-hero-info { min-width: 0; }
[data-theme='neo'] .sv-hero-kicker { font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-hero-title { margin-top: 4px; font-family: var(--sv-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
[data-theme='neo'] .sv-hero-chips .sv-chip { height: 30px; }
/* "Proses Instan" = the small mint sticker */
[data-theme='neo'] .sv-hero-chips .sv-chip--primary { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-hero-rating { background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-hero-rating svg { fill: var(--sv-star); color: var(--sv-ink); stroke-width: 1.8; }
[data-theme='neo'] .sv-hero-rating strong { font-family: var(--sv-display); font-weight: 700; }
[data-theme='neo'] .sv-hero-rating-count { font-weight: 600; color: var(--sv-ink-2); }
@media (max-width: 639px) {
  [data-theme='neo'] .sv-detail .sv-hero { --nb-circle-r: 120px; --nb-circle-in: 44px; padding-top: 16px; padding-bottom: 22px; }
  [data-theme='neo'] .sv-hero-banner { aspect-ratio: 2 / 1; border-width: 2px; border-radius: 18px; box-shadow: 5px 5px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-hero-card {
    display: grid; grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas: "logo kicker" "logo title" "chips chips";
    column-gap: 14px; row-gap: 0; align-items: start; margin: -36px 8px 0; padding: 14px; border-width: 2px; box-shadow: var(--sv-shadow);
  }
  [data-theme='neo'] .sv-hero-info { display: contents; }
  [data-theme='neo'] .sv-hero-logo { grid-area: logo; align-self: center; width: 68px; height: 68px; border-radius: 16px; }
  [data-theme='neo'] .sv-hero-kicker { grid-area: kicker; align-self: end; justify-self: start; font-size: 12px; }
  [data-theme='neo'] .sv-hero-title { grid-area: title; align-self: start; margin-top: 2px; font-size: 24px; }
  [data-theme='neo'] .sv-hero-chips { grid-area: chips; margin-top: 12px; gap: 6px; }
  [data-theme='neo'] .sv-hero-chips .sv-chip { height: 28px; padding: 0 9px; font-size: 12px; }
}

/* ---------- Guide (left column) ---------- */
[data-theme='neo'] .sv-guide { display: grid; gap: 16px; padding: 20px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-guide-head { display: flex; align-items: center; gap: 12px; }
[data-theme='neo'] .sv-guide-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-guide-icon svg { width: 20px; height: 20px; stroke-width: 2.3; }
[data-theme='neo'] .sv-guide-kicker { font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-guide-title { font-family: var(--sv-display); font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
[data-theme='neo'] .sv-guide-subtitle { margin-bottom: 4px; font-family: var(--sv-display); font-size: 15.5px; font-weight: 700; }
[data-theme='neo'] .sv-guide-sub { padding-top: 14px; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-guide-body { display: grid; gap: 16px; }
[data-theme='neo'] .sv-guide-head > div { flex: 1; min-width: 0; }
[data-theme='neo'] .sv-guide-steps { display: grid; }
[data-theme='neo'] .sv-guide-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-guide-step p { padding-top: 4px; }
[data-theme='neo'] .sv-guide-step:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 41px; bottom: -3px; width: 2px; background: var(--sv-surface-3); }
[data-theme='neo'] .sv-guide-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-ink);
  font-family: var(--sv-display); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-guide-link { color: var(--sv-primary-ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
[data-theme='neo'] .sv-guide-help {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 14px;
  border-radius: 16px; border: var(--nb-b); background: var(--sv-surface);
  color: var(--sv-ink); text-decoration: none; transition: transform .15s, box-shadow .15s;
}
[data-theme='neo'] .sv-guide-help:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--nb-sh); }
[data-theme='neo'] .sv-guide-help-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--nb-mint); color: var(--nb-on-accent); border: var(--nb-b); }
[data-theme='neo'] .sv-guide-help-icon svg { width: 17px; height: 17px; stroke-width: 2.3; }
[data-theme='neo'] .sv-guide-help-text { display: grid; font-size: 13px; line-height: 1.35; }
[data-theme='neo'] .sv-guide-help-text strong { font-weight: 800; }
[data-theme='neo'] .sv-guide-help-text span { color: var(--sv-ink-2); }
[data-theme='neo'] .sv-guide-help-arrow { width: 18px; height: 18px; margin-left: auto; color: var(--sv-ink); stroke-width: 2.4; flex-shrink: 0; }

/* Notes & alerts: flat tinted blocks with an ink outline (no edge stripes) */
[data-theme='neo'] :is(.sv-detail, .sv-dialog) .sv-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); font-size: 13.5px; line-height: 1.5; }
[data-theme='neo'] :is(.sv-detail, .sv-dialog) .sv-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
[data-theme='neo'] :is(.sv-detail, .sv-dialog) .sv-note--warn { background: var(--sv-warn-soft); color: var(--sv-ink); border: var(--nb-b); }
[data-theme='neo'] :is(.sv-detail, .sv-dialog) .sv-note--warn svg { color: var(--sv-warn-ink); }
[data-theme='neo'] .sv-detail .sv-note strong { font-weight: 800; }
[data-theme='neo'] .sv-detail .sv-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: var(--nb-b); font-size: 13.5px; line-height: 1.5; }
[data-theme='neo'] .sv-detail .sv-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; stroke-width: 2.3; }
[data-theme='neo'] .sv-detail .sv-alert-body { min-width: 0; flex: 1; }
[data-theme='neo'] .sv-detail .sv-alert-title { font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-alert-text { color: var(--sv-ink-2); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-detail .sv-alert-text strong { color: var(--sv-ink); font-weight: 800; }
[data-theme='neo'] .sv-detail .sv-alert-action { flex-shrink: 0; align-self: center; }
[data-theme='neo'] .sv-detail .sv-alert-btn { min-height: 38px; padding: 0 14px; gap: 6px; font-size: 13.5px; }
[data-theme='neo'] .sv-detail .sv-alert-btn svg { width: 15px; height: 15px; }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='ok'] { background: var(--sv-ok-soft); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='ok'] .sv-alert-icon { color: var(--sv-ok); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='err'] { background: var(--sv-err-soft); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='err'] .sv-alert-icon { color: var(--sv-err); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='warn'] { background: var(--sv-warn-soft); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='warn'] .sv-alert-icon { color: var(--sv-warn-ink); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='info'] { background: var(--sv-info-soft); }
[data-theme='neo'] .sv-detail .sv-alert[data-tone='info'] .sv-alert-icon { color: var(--sv-info-ink); }

/* ---------- Step panels ---------- */
[data-theme='neo'] .sv-detail .sv-step-aside { min-width: 0; }
[data-theme='neo'] .sv-detail .sv-step-picked {
  display: block; max-width: min(220px, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); font-weight: 700;
}
[data-theme='neo'] .sv-detail .sv-step-body { display: grid; gap: 18px; }
[data-theme='neo'] .sv-detail .sv-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 12px; text-align: center; color: var(--sv-ink-2); font-size: 14px; }
[data-theme='neo'] .sv-detail .sv-empty svg { width: 28px; height: 28px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-empty-text { padding: 24px 0; text-align: center; color: var(--sv-ink-2); font-size: 14px; }

/* ---------- Products ---------- */
[data-theme='neo'] .sv-detail .sv-products { display: grid; gap: 26px; }
[data-theme='neo'] .sv-detail .sv-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
[data-theme='neo'] .sv-detail .sv-group-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-group-label::before { content: ''; width: 10px; height: 10px; border-radius: 99px; border: 1.5px solid var(--sv-ink); background: var(--primary); }
[data-theme='neo'] .sv-detail .sv-group-count { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-detail .sv-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-theme='neo'] .sv-detail .sv-product-grid > li { display: flex; min-width: 0; }
@media (min-width: 768px) {
  [data-theme='neo'] .sv-detail .sv-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
[data-theme='neo'] .sv-detail .sv-product {
  position: relative; display: grid; width: 100%; min-width: 0;
  grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "icon price";
  align-items: center; align-content: space-between; column-gap: 8px; row-gap: 8px;
  min-height: 86px; padding: 12px; text-align: left; color: var(--sv-ink);
  background: var(--sv-surface); border: var(--nb-b); border-radius: 16px;
  cursor: pointer;
}
[data-theme='neo'] .sv-detail .sv-product-body { display: contents; }
[data-theme='neo'] .sv-detail .sv-product-icon { grid-area: icon; display: grid; place-items: center; width: 26px; height: 26px; color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-detail .sv-product-icon img { width: 100%; height: 100%; object-fit: contain; }
[data-theme='neo'] .sv-detail .sv-product-icon svg { width: 18px; height: 18px; }
[data-theme='neo'] .sv-detail .sv-product-name {
  grid-area: name; align-self: start; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme='neo'] .sv-detail .sv-product-price { grid-area: price; font-family: var(--sv-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 640px) {
  [data-theme='neo'] .sv-detail .sv-product { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "icon name" "icon price"; column-gap: 12px; row-gap: 3px; align-content: center; min-height: 78px; }
  [data-theme='neo'] .sv-detail .sv-product-icon { width: 46px; height: 46px; padding: 6px; border-radius: 14px; border: var(--nb-b-soft); background: var(--sv-primary-soft); }
  [data-theme='neo'] .sv-detail .sv-product-name { align-self: end; }
  [data-theme='neo'] .sv-detail .sv-product-price { align-self: start; font-size: 17px; }
}
[data-theme='neo'] .sv-detail .sv-product[aria-pressed='true'] .sv-product-icon { background: var(--sv-surface); }
[data-theme='neo'] .sv-detail .sv-product[aria-pressed='true'] .sv-product-price { color: var(--sv-primary-ink); }
/* Check badge: primary circle with an ink outline */
[data-theme='neo'] .sv-detail .sv-product-check {
  position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary);
}
[data-theme='neo'] .sv-detail .sv-product-check svg { width: 14px; height: 14px; stroke-width: 3.2; }
[data-theme='neo'] .sv-detail .sv-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 14px;
  border-radius: var(--sv-pill); border: 2px dashed var(--sv-ink); background: var(--sv-surface);
  font-family: var(--sv-display); font-size: 14.5px; font-weight: 700; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, border-style .15s;
}
[data-theme='neo'] .sv-detail .sv-more-btn:hover { border-style: solid; background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-detail .sv-more-btn svg { width: 17px; height: 17px; stroke-width: 2.4; transition: transform .2s; }
[data-theme='neo'] .sv-detail .sv-more-btn svg[data-open='true'] { transform: rotate(180deg); }

/* ---------- Flash sale (inside step 1): pale pink block, primary timer boxes ---------- */
[data-theme='neo'] .sv-detail .sv-flash-panel {
  padding: 16px; border-radius: 20px; overflow: visible;
  background: var(--nb-pink-soft); border: var(--nb-b);
}
[data-theme='neo'] .sv-detail .sv-flash-panel::before { content: none; }
[data-theme='neo'] .sv-detail .sv-flash-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
[data-theme='neo'] .sv-detail .sv-flash-panel-titles { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-theme='neo'] .sv-detail .sv-flash-panel-titles .sv-chip--hot { box-shadow: 2px 2px 0 var(--sv-ink); transform: rotate(-2deg); }
[data-theme='neo'] .sv-detail .sv-flash-panel-title { font-family: var(--sv-display); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
[data-theme='neo'] .sv-detail .sv-timer { display: inline-flex; align-items: center; gap: 8px; }
[data-theme='neo'] .sv-detail .sv-timer-label { font-family: var(--sv-display); font-size: 13px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-timer-units { display: inline-flex; align-items: center; gap: 4px; }
[data-theme='neo'] .sv-detail .sv-timer-unit { display: grid; place-items: center; min-width: 36px; height: 34px; padding: 0 5px; border-radius: 10px; border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary);
  font-family: var(--sv-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-detail .sv-timer-sep { font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-timer--ended { font-size: 12.5px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-product--flash { grid-template-areas: "name name" "icon price" "meter meter"; }
[data-theme='neo'] .sv-detail .sv-product-prices { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
[data-theme='neo'] .sv-detail .sv-product--flash .sv-product-price { color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-product-was { font-size: 12px; font-weight: 500; color: var(--sv-ink-3); text-decoration: line-through; white-space: nowrap; }
[data-theme='neo'] .sv-detail .sv-product-off {
  position: absolute; top: -12px; left: 10px; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-hot); color: var(--sv-hot-text);
  font-family: var(--sv-display); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
[data-theme='neo'] .sv-detail .sv-product--flash { margin-top: 8px; }
[data-theme='neo'] .sv-detail .sv-meter { grid-area: meter; display: grid; gap: 5px; margin-top: 2px; }
[data-theme='neo'] .sv-detail .sv-meter-track { display: block; height: 10px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); overflow: hidden; box-sizing: content-box; }
[data-theme='neo'] .sv-detail .sv-meter-fill { display: block; height: 100%; border-radius: 0; background: var(--primary); }
[data-theme='neo'] .sv-detail .sv-meter[data-hot] .sv-meter-fill { background: var(--nb-pink); }
[data-theme='neo'] .sv-detail .sv-meter-text { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-meter[data-hot] .sv-meter-text { color: var(--sv-ink); font-weight: 700; }
@media (min-width: 640px) {
  [data-theme='neo'] .sv-detail .sv-product--flash { grid-template-areas: "icon name" "icon price" "meter meter"; row-gap: 3px; }
  [data-theme='neo'] .sv-detail .sv-product--flash .sv-meter { margin-top: 10px; }
}
@media (max-width: 639px) {
  [data-theme='neo'] .sv-detail .sv-flash-panel { padding: 14px 12px; border-radius: 18px; }
  [data-theme='neo'] .sv-detail .sv-product--flash .sv-product-price { font-size: 15px; letter-spacing: -0.03em; }
}
[data-theme='neo'] .sv-detail .sv-product:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; }
[data-theme='neo'] .sv-detail .sv-product:disabled :is(.sv-product-icon, .sv-product-name, .sv-product-prices, .sv-product-off) { opacity: 0.55; filter: grayscale(1); }

/* ---------- Contact form ---------- */
[data-theme='neo'] .sv-detail .sv-form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
[data-theme='neo'] .sv-detail .sv-form-grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-theme='neo'] .sv-detail .sv-field { min-width: 0; }
[data-theme='neo'] .sv-detail .sv-label { display: inline-flex; align-items: center; gap: 2px; }
[data-theme='neo'] .sv-detail .sv-required { color: var(--sv-err); font-weight: 800; }
[data-theme='neo'] .sv-detail .sv-select { justify-content: space-between; height: 48px; border: var(--nb-b); border-radius: var(--sv-radius-sm); box-shadow: none; }
[data-theme='neo'] .sv-detail .sv-help-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 700; color: var(--sv-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--primary); text-underline-offset: 4px;
}
[data-theme='neo'] .sv-detail .sv-help-btn::after { content: ''; position: absolute; inset: -6px -4px; }
[data-theme='neo'] .sv-detail .sv-help-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-detail .sv-step--contact .sv-step-body { gap: 16px; }
[data-theme='neo'] .sv-detail .sv-account-slot:empty { display: none; }
[data-theme='neo'] .sv-detail .sv-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
[data-theme='neo'] .sv-detail .sv-account-label { font-weight: 700; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-account-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 4px 12px;
  border-radius: var(--sv-pill); border: var(--nb-b); font-size: 13px; font-weight: 800; color: var(--sv-ink); overflow-wrap: anywhere;
}
[data-theme='neo'] .sv-detail .sv-account-chip svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.5; }
[data-theme='neo'] .sv-detail .sv-account[data-state='ok'] .sv-account-chip { background: var(--nb-mint); color: var(--nb-on-accent); box-shadow: 2px 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-account[data-state='err'] .sv-account-chip { background: var(--nb-pink-soft); }
[data-theme='neo'] .sv-detail .sv-account[data-state='err'] .sv-account-chip svg { color: var(--sv-err); }
[data-theme='neo'] .sv-detail .sv-account[data-state='busy'] .sv-account-chip { background: var(--sv-surface-2); color: var(--sv-ink-2); font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-account-meta { color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-input-group {
  display: flex; align-items: stretch; min-width: 0; border: var(--nb-b); border-radius: var(--sv-radius-sm); overflow: hidden;
  background: var(--sv-surface); transition: box-shadow .15s;
}
[data-theme='neo'] .sv-detail .sv-input-group:focus-within { box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] .sv-detail .sv-input-prefix { display: grid; place-items: center; padding: 0 14px; border-right: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-ink); font-family: var(--sv-display); font-size: 15px; font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-input-group .sv-input { min-width: 0; height: 44px; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- Voucher ---------- */
[data-theme='neo'] .sv-detail .sv-voucher-row { display: flex; gap: 10px; }
[data-theme='neo'] .sv-detail .sv-voucher-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-voucher-input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
[data-theme='neo'] .sv-detail .sv-voucher-btn { flex-shrink: 0; min-height: 48px; padding: 0 20px; }
[data-theme='neo'] .sv-detail .sv-btn:disabled { color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-voucher-btn svg { width: 17px; height: 17px; }
[data-theme='neo'] .sv-detail .sv-tickets-label { margin-bottom: 10px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-tickets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Ticket: ink outline, tinted stub, dashed tear line with half-circle notches top and bottom. */
[data-theme='neo'] .sv-detail .sv-ticket {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  min-height: 88px; padding-right: 12px; border: var(--nb-b); border-radius: 18px; background: var(--sv-surface);
}
[data-theme='neo'] .sv-detail .sv-ticket-value {
  position: relative; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 3px;
  border-right: 2px dashed var(--sv-ink); background: var(--sv-primary-soft); border-radius: 16px 0 0 16px; color: var(--sv-primary-ink);
}
[data-theme='neo'] .sv-detail .sv-ticket[data-applied] .sv-ticket-value { background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-detail .sv-ticket-value::before,
[data-theme='neo'] .sv-detail .sv-ticket-value::after {
  content: ''; position: absolute; right: -10px; width: 18px; height: 18px; border-radius: 999px; box-sizing: border-box;
  background: var(--sv-surface); border: var(--nb-b);
}
[data-theme='neo'] .sv-detail .sv-ticket-value::before { top: -11px; clip-path: inset(50% 0 0 0); }
[data-theme='neo'] .sv-detail .sv-ticket-value::after { bottom: -11px; clip-path: inset(0 0 50% 0); }
[data-theme='neo'] .sv-detail .sv-ticket-value strong { font-family: var(--sv-display); font-size: 25px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
[data-theme='neo'] .sv-detail .sv-ticket-value span { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
[data-theme='neo'] .sv-detail .sv-ticket-body { display: grid; gap: 2px; min-width: 0; padding: 12px 0; }
[data-theme='neo'] .sv-detail .sv-ticket-code { font-family: var(--sv-display); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-detail .sv-ticket-meta { font-size: 12.5px; line-height: 1.4; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-ticket-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
[data-theme='neo'] .sv-detail .sv-ticket-btn:disabled { color: var(--sv-ink-2); cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; box-shadow: none; }
[data-theme='neo'] .sv-detail .sv-ticket-skeleton { height: 88px; border-radius: 18px; }
@media (max-width: 479px) {
  [data-theme='neo'] .sv-detail .sv-ticket { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "value body" "value btn"; padding-bottom: 12px; }
  [data-theme='neo'] .sv-detail .sv-ticket-value { grid-area: value; margin-bottom: -12px; }
  [data-theme='neo'] .sv-detail .sv-ticket-body { grid-area: body; padding-bottom: 8px; }
  [data-theme='neo'] .sv-detail .sv-ticket-btn { grid-area: btn; justify-self: start; min-height: 44px; }
}

/* ---------- Payment ---------- */
[data-theme='neo'] .sv-detail .sv-pay-empty { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 2px dashed var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-detail .sv-pay-empty-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: var(--sv-primary-soft); border: var(--nb-b); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-detail .sv-pay-empty-icon svg { width: 20px; height: 20px; stroke-width: 2.3; }
[data-theme='neo'] .sv-detail .sv-pay-empty p { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-pay-empty strong { font-size: 14px; font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-pay-group-label { margin-bottom: 10px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-pay-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  [data-theme='neo'] .sv-detail .sv-pay-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
[data-theme='neo'] .sv-detail .sv-pay-list > li { display: flex; min-width: 0; }
[data-theme='neo'] .sv-detail .sv-pay {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo name name" "logo meta total";
  position: relative; align-items: center; column-gap: 12px; row-gap: 2px;
  width: 100%; min-height: 70px; padding: 11px 14px; text-align: left; color: var(--sv-ink);
  background: var(--sv-surface); border: var(--nb-b); border-radius: 16px;
  cursor: pointer;
}
[data-theme='neo'] .sv-detail .sv-pay:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; }
[data-theme='neo'] .sv-detail .sv-pay:disabled .sv-pay-logo { opacity: 0.6; filter: grayscale(1); }
[data-theme='neo'] .sv-detail .sv-pay:disabled :is(.sv-pay-name, .sv-pay-total) { color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-pay-radio { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 999px; border: var(--nb-b); background: var(--sv-surface); box-sizing: border-box; transition: background-color .15s, box-shadow .15s; }
[data-theme='neo'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-radio { background: var(--primary); box-shadow: inset 0 0 0 3px var(--sv-surface); }
[data-theme='neo'] .sv-detail .sv-pay-logo { grid-area: logo; display: grid; place-items: center; width: 62px; height: 42px; padding: 5px 6px; border-radius: 12px; background: #fff; border: var(--nb-b-soft); }
[data-theme='neo'] .sv-detail .sv-pay-logo img { width: 100%; height: 100%; object-fit: contain; }
[data-theme='neo'] .sv-detail .sv-pay-logo[data-kind='wallet'] { background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-detail .sv-pay-logo svg { width: 20px; height: 20px; stroke-width: 2.3; }
[data-theme='neo'] .sv-detail .sv-pay-initials { font-family: var(--sv-display); font-size: 13px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-pay-info { display: contents; }
[data-theme='neo'] .sv-detail .sv-pay-name { grid-area: name; min-width: 0; padding-right: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; font-weight: 800; line-height: 1.3; }
[data-theme='neo'] .sv-detail .sv-pay-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--sv-pill); border: 1.5px solid var(--sv-ink); background: var(--nb-mint); color: var(--nb-on-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
[data-theme='neo'] .sv-detail .sv-pay-meta { grid-area: meta; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-pay-meta[data-tone='ok'] { color: var(--sv-ok); font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-pay-meta[data-tone='err'] { color: var(--sv-err); font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-pay-total { grid-area: total; justify-self: end; font-family: var(--sv-display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-total { color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-detail .sv-pay-skeleton { height: 70px; border-radius: 16px; }
@media (max-width: 400px) {
  [data-theme='neo'] .sv-detail .sv-pay { column-gap: 10px; padding: 10px 12px; }
  [data-theme='neo'] .sv-detail .sv-pay-logo { width: 50px; height: 36px; padding: 4px; }
  [data-theme='neo'] .sv-detail .sv-pay-meta { font-size: 12px; }
  [data-theme='neo'] .sv-detail .sv-pay-total { font-size: 15px; }
}

/* ---------- Order action: the receipt card (primary offset shadow) ---------- */
[data-theme='neo'] .sv-detail .sv-order {
  position: relative; display: grid; gap: 14px; padding: 22px; overflow: hidden;
  background: var(--sv-surface); border: var(--nb-b-thick); border-radius: var(--sv-radius-lg); box-shadow: 6px 6px 0 var(--primary);
}
[data-theme='neo'] .sv-detail .sv-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-theme='neo'] .sv-detail .sv-order-title { font-family: var(--sv-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
[data-theme='neo'] .sv-detail .sv-order-progress { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface-2); color: var(--sv-ink);
  font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-detail .sv-order-progress[data-done] { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-detail .sv-order-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: var(--nb-b); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-detail .sv-order-item-icon { display: grid; place-items: center; width: 48px; height: 48px; padding: 6px; border-radius: 14px; background: var(--sv-surface); border: var(--nb-b-soft); color: var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-order-item-icon img { width: 100%; height: 100%; object-fit: contain; }
[data-theme='neo'] .sv-detail .sv-order-item-text { display: grid; gap: 2px; min-width: 0; }
[data-theme='neo'] .sv-detail .sv-order-item-name { font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
[data-theme='neo'] .sv-detail .sv-order-item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-flash { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--sv-pill); border: 1.5px solid var(--sv-ink); background: var(--sv-hot); color: var(--sv-hot-text); font-size: 11px; font-weight: 800; }
[data-theme='neo'] .sv-detail .sv-order-item-price { font-family: var(--sv-display); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-detail .sv-order-empty { padding: 14px; border-radius: 16px; border: 2px dashed var(--sv-ink); background: var(--sv-surface-2); text-align: center; font-size: 14px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-rows { display: grid; gap: 8px; }
[data-theme='neo'] .sv-detail .sv-order-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.4; }
[data-theme='neo'] .sv-detail .sv-order-row dt { flex-shrink: 0; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-row dd { min-width: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
[data-theme='neo'] .sv-detail .sv-order-row[data-tone='ok'] dd { color: var(--sv-ok); }
[data-theme='neo'] .sv-detail .sv-order-strong { font-weight: 800; }
[data-theme='neo'] .sv-detail .sv-order-soft { font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 2px dashed var(--sv-ink); }
[data-theme='neo'] .sv-detail .sv-order-total > span { display: grid; gap: 2px; font-size: 14px; font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-order-total small { font-size: 12px; font-weight: 500; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-detail .sv-order-total strong { font-family: var(--sv-display); font-size: 32px; line-height: 1.05; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-detail .sv-order-btn { min-height: 58px; font-size: 17px; box-shadow: var(--sv-shadow); }
[data-theme='neo'] .sv-detail .sv-order-btn { flex-wrap: wrap; row-gap: 4px; padding: 8px 18px; }
[data-theme='neo'] .sv-detail .sv-order-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
[data-theme='neo'] .sv-detail .sv-order-btn-amount { display: inline-flex; align-items: center; height: 32px; padding: 0 11px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-detail :is(.sv-order-btn, .sv-order-bar-btn):disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border: 2px dashed var(--sv-ink); box-shadow: none; }
[data-theme='neo'] .sv-detail .sv-order-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-checklist li { display: inline-flex; align-items: center; gap: 6px; }
[data-theme='neo'] .sv-detail .sv-order-checklist li[data-done] { color: var(--sv-ink); font-weight: 700; }
[data-theme='neo'] .sv-detail .sv-order-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--sv-ink); background: var(--sv-surface); }
[data-theme='neo'] .sv-detail li[data-done] .sv-order-check { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-detail .sv-order-check svg { width: 11px; height: 11px; stroke-width: 3.5; }
[data-theme='neo'] .sv-detail .sv-order-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); text-align: center; }
[data-theme='neo'] .sv-detail .sv-order-secure svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-ok); }

/* Mobile sticky order bar: solid white, ink rule on top */
[data-theme='neo'] .sv-detail .sv-order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--sv-surface); border-top: var(--nb-b);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
[data-theme='neo'] .sv-detail .sv-order-bar[data-visible] { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
[data-theme='neo'] .sv-detail .sv-order-bar-info { display: grid; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-detail .sv-order-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-detail .sv-order-bar-total { font-family: var(--sv-display); font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-detail .sv-order-bar-btn { flex-shrink: 0; min-height: 48px; padding: 0 20px; }
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-detail .sv-order-bar { display: none; }
}

/* ---------- Loading skeleton ---------- */
[data-theme='neo'] .sv-detail--loading .sv-skeleton { border: var(--nb-b); }
[data-theme='neo'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 3 / 1; margin-top: 28px; border-radius: 24px; }
[data-theme='neo'] .sv-detail--loading .sv-skeleton-card { position: relative; height: 108px; margin: -60px 28px 0; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-detail--loading .sv-skeleton-guide { height: 380px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-detail--loading .sv-skeleton-step { height: 460px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-detail--loading .sv-skeleton-step--short { height: 240px; }
@media (max-width: 639px) {
  [data-theme='neo'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 2 / 1; margin-top: 16px; border-radius: 18px; }
  [data-theme='neo'] .sv-detail--loading .sv-skeleton-card { margin: -34px 8px 0; height: 120px; }
}

/* ---------- Reviews ---------- */
[data-theme='neo'] .sv-reviews { display: grid; gap: 18px; padding: 20px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-reviews-kicker { display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-reviews-kicker svg { width: 15px; height: 15px; stroke-width: 2; fill: var(--sv-star); color: var(--sv-ink); }
[data-theme='neo'] .sv-reviews-title { margin-top: 6px; font-family: var(--sv-display); font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; }
[data-theme='neo'] .sv-reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; border: var(--nb-b); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-reviews-score { display: grid; justify-items: center; gap: 5px; padding-right: 16px; border-right: 2px dashed var(--sv-ink); }
[data-theme='neo'] .sv-reviews-avg { font-family: var(--sv-display); font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-reviews-score .sv-stars svg { width: 14px; height: 14px; }
[data-theme='neo'] .sv-reviews-total { font-size: 12px; font-weight: 700; color: var(--sv-ink-2); white-space: nowrap; }
[data-theme='neo'] .sv-reviews-dist { display: grid; gap: 6px; }
[data-theme='neo'] .sv-reviews-dist-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-size: 12px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-reviews-dist-star { display: inline-flex; align-items: center; gap: 2px; font-family: var(--sv-display); font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-reviews-dist-star svg { width: 11px; height: 11px; fill: var(--sv-star); color: var(--sv-ink); }
[data-theme='neo'] .sv-reviews-bar { display: block; height: 10px; border-radius: var(--sv-pill); border: 1.5px solid var(--sv-ink); background: var(--sv-surface); overflow: hidden; }
[data-theme='neo'] .sv-reviews-bar > span { display: block; height: 100%; border-radius: 0; background: var(--sv-star); }
[data-theme='neo'] .sv-reviews-dist-count { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-reviews .sv-stars svg[data-empty] { fill: var(--sv-surface); color: var(--sv-ink-3); }
[data-theme='neo'] .sv-review-list { display: grid; }
[data-theme='neo'] .sv-review { display: grid; gap: 8px; padding: 14px 0; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-review:first-child { padding-top: 0; border-top: 0; }
[data-theme='neo'] .sv-review:last-child { padding-bottom: 0; }
[data-theme='neo'] .sv-review-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
[data-theme='neo'] .sv-review-head .sv-stars svg { width: 13px; height: 13px; }
[data-theme='neo'] .sv-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-ink); font-family: var(--sv-display); font-size: 15px; font-weight: 700; }
[data-theme='neo'] .sv-avatar[data-tone='1'] { background: var(--nb-mint-soft); }
[data-theme='neo'] .sv-avatar[data-tone='2'] { background: var(--nb-pink-soft); }
[data-theme='neo'] .sv-avatar[data-tone='3'] { background: var(--sv-surface-2); }
[data-theme='neo'] .sv-review-who { display: grid; min-width: 0; }
[data-theme='neo'] .sv-review-name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme='neo'] .sv-review-date { font-size: 12px; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-review-text { font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-review-product { justify-self: start; height: 26px; font-size: 12px; background: var(--sv-surface-2); border-width: 1.5px; }
[data-theme='neo'] .sv-reviews-more { min-height: 48px; font-size: 14.5px; }

/* ---------- Dialogs (rendered in a portal that carries data-theme) ---------- */
[data-theme='neo'].sv-dialog {
  display: grid; gap: 16px; width: 100%; max-width: min(440px, calc(100% - 32px)); padding: 22px;
  background: var(--sv-surface); color: var(--sv-ink); border: var(--nb-b-thick); border-radius: 24px; box-shadow: var(--nb-shadow-xl);
}
[data-theme='neo'] .sv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
[data-theme='neo'] .sv-dialog-title { font-family: var(--sv-display); font-size: 23px; line-height: 1.15; font-weight: 700; letter-spacing: -0.035em; color: var(--sv-ink); }
[data-theme='neo'] .sv-dialog-text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-dialog-close svg { width: 18px; height: 18px; stroke-width: 2.5; }
[data-theme='neo'] .sv-dialog-rows { display: grid; border: var(--nb-b); border-radius: 16px; overflow: hidden; }
[data-theme='neo'] .sv-dialog-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; line-height: 1.4; }
[data-theme='neo'] .sv-dialog-row + .sv-dialog-row { border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-dialog-row dt { flex-shrink: 0; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-dialog-row dd { min-width: 0; text-align: right; font-weight: 700; overflow-wrap: anywhere; }
[data-theme='neo'] .sv-dialog-row[data-tone='ok'] dd { color: var(--sv-ok); }
[data-theme='neo'] .sv-dialog-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 16px; border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-dialog-total span { font-size: 14px; font-weight: 800; }
[data-theme='neo'] .sv-dialog-total strong { font-family: var(--sv-display); font-size: 25px; font-weight: 700; letter-spacing: -0.035em; color: var(--sv-on-primary); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; }
[data-theme='neo'] .sv-dialog-image { width: 100%; height: auto; border-radius: var(--sv-radius-sm); border: var(--nb-b); }

/* Mobile rhythm: tighter stack so step 1 sits right under the hero. */
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-detail-main { margin-top: 22px; }
  [data-theme='neo'] .sv-detail-layout, [data-theme='neo'] .sv-detail-form { gap: 18px; }
  [data-theme='neo'] .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-h, 60px) + 16px); }
}
@media (max-width: 639px) {
  [data-theme='neo'] .sv-guide { gap: 14px; padding: 16px; }
  /* Room for the "N langkah" toggle: drop the decorative icon on phones. */
  [data-theme='neo'] .sv-guide-icon { display: none; }
  [data-theme='neo'] .sv-guide-step { font-size: 15px; }
  [data-theme='neo'] .sv-review-text { font-size: 15px; }
  [data-theme='neo'] .sv-reviews { padding: 16px; }
  [data-theme='neo'] .sv-detail .sv-alert-btn { min-height: 44px; }
  [data-theme='neo'] .sv-detail .sv-order { padding: 18px 16px; border-width: 2px; box-shadow: 5px 5px 0 var(--primary); }
}


/* ───────── Rank tier palettes ───────── */
[data-theme='neo'] [data-rank='epic']   { --sv-rank-a: oklch(0.82 0.12 172); --sv-rank-b: oklch(0.52 0.11 190); --sv-rank-deep: oklch(0.3 0.06 200); --sv-rank-orn: oklch(0.9 0.07 170); --sv-rank-mark: oklch(0.99 0.02 170); --sv-rank-ink: oklch(0.42 0.09 190); }
[data-theme='neo'] [data-rank='legend'] { --sv-rank-a: oklch(0.89 0.14 90);  --sv-rank-b: oklch(0.64 0.15 60);  --sv-rank-deep: oklch(0.33 0.08 50);  --sv-rank-orn: oklch(0.93 0.1 92);  --sv-rank-mark: oklch(0.99 0.03 90);  --sv-rank-ink: oklch(0.5 0.12 60); }
[data-theme='neo'] [data-rank='mythic'] { --sv-rank-a: oklch(0.78 0.14 305); --sv-rank-b: oklch(0.48 0.2 292);  --sv-rank-deep: oklch(0.28 0.12 290); --sv-rank-orn: oklch(0.87 0.09 310); --sv-rank-mark: oklch(0.99 0.02 300); --sv-rank-ink: oklch(0.45 0.18 292); }
[data-theme='neo'] [data-rank='honor']  { --sv-rank-a: oklch(0.74 0.13 262); --sv-rank-b: oklch(0.45 0.17 268); --sv-rank-deep: oklch(0.27 0.1 268);  --sv-rank-orn: oklch(0.87 0.13 85);  --sv-rank-mark: oklch(0.97 0.05 90);  --sv-rank-ink: oklch(0.43 0.16 268); }
[data-theme='neo'] [data-rank='glory']  { --sv-rank-a: oklch(0.82 0.15 62);  --sv-rank-b: oklch(0.54 0.2 30);   --sv-rank-deep: oklch(0.3 0.11 28);   --sv-rank-orn: oklch(0.9 0.14 90);   --sv-rank-mark: oklch(0.99 0.04 85);  --sv-rank-ink: oklch(0.5 0.18 32); }

/* Rank emblem: hard ink drop (no blur) */
[data-theme='neo'] .sv-rank { display: block; flex-shrink: 0; overflow: visible; filter: drop-shadow(2px 2px 0 var(--sv-ink)); }
[data-theme='neo'] .sv-rank-stop-a { stop-color: var(--sv-rank-a); }
[data-theme='neo'] .sv-rank-stop-b { stop-color: var(--sv-rank-b); }
[data-theme='neo'] .sv-rank-stop-shine { stop-color: #fff; stop-opacity: 0.5; }
[data-theme='neo'] .sv-rank-stop-clear { stop-color: #fff; stop-opacity: 0; }
[data-theme='neo'] .sv-rank-shield { stroke: var(--sv-ink); stroke-width: 2.2; stroke-linejoin: round; }
[data-theme='neo'] .sv-rank-inner { fill: none; stroke: color-mix(in oklab, var(--sv-rank-mark) 50%, transparent); stroke-width: 1; }
[data-theme='neo'] .sv-rank-mark { fill: var(--sv-rank-mark); }
[data-theme='neo'] .sv-rank-orn path, [data-theme='neo'] .sv-rank-crest { fill: var(--sv-rank-orn); stroke: var(--sv-rank-b); stroke-width: 0.9; stroke-linejoin: round; }
[data-theme='neo'] .sv-rank-pips circle { fill: var(--sv-rank-mark); opacity: 0.9; }

/* ───────── Page shell (supporting pages) ───────── */
[data-theme='neo'] .sv-page { padding-block: clamp(16px, 2.5vw, 28px) clamp(56px, 8vw, 96px); }
[data-theme='neo'] .sv-page-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 13.5px; font-weight: 600; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-page-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
[data-theme='neo'] .sv-page-crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; color: var(--sv-ink-2); border-radius: var(--sv-radius-xs); transition: color .15s; }
[data-theme='neo'] .sv-page-crumbs a:hover { color: var(--sv-ink); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--primary); text-underline-offset: 4px; }
[data-theme='neo'] .sv-page-crumbs a::after { content: ''; position: absolute; inset: -6px -4px; }
[data-theme='neo'] .sv-page-crumbs [aria-current='page'] { color: var(--sv-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(46ch, 62vw); }
[data-theme='neo'] .sv-page-crumbs-sep { width: 14px; height: 14px; flex-shrink: 0; }
[data-theme='neo'] .sv-page-head { margin: 16px 0 28px; max-width: 780px; }
[data-theme='neo'] .sv-page-head .sv-section-kicker { margin-bottom: 12px; }
[data-theme='neo'] .sv-page-title { font-family: var(--sv-display); font-size: clamp(34px, 4.6vw, 54px); line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; color: var(--sv-ink); text-wrap: balance; }
[data-theme='neo'] .sv-page-sub { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--sv-ink-2); max-width: 62ch; }
[data-theme='neo'] .sv-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
/* Filter chips (mockup B): pills, 2px ink, active = ink fill. */
[data-theme='neo'] .sv-page-filters { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; }
[data-theme='neo'] .sv-page-filters::-webkit-scrollbar { display: none; }
[data-theme='neo'] .sv-page-filter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 44px; padding: 0 8px 0 18px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface);
  font-family: var(--sv-display); font-size: 14.5px; font-weight: 700; color: var(--sv-ink); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-page-filter:hover { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-page-filter[aria-pressed='true'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-page-filter-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--sv-pill); background: var(--sv-surface-2); font-size: 12px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-page-filter[aria-pressed='true'] .sv-page-filter-count { background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-page-count { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }

/* ───────── Article card ───────── */
[data-theme='neo'] .sv-article-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-theme='neo'] .sv-article-card { min-width: 0; }
[data-theme='neo'] .sv-article-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); overflow: hidden; }
[data-theme='neo'] .sv-article-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sv-surface-2); border-bottom: var(--nb-b); }
[data-theme='neo'] .sv-article-card-img { object-fit: cover; }
[data-theme='neo'] .sv-article-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
[data-theme='neo'] .sv-article-card-tags { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-theme='neo'] .sv-article-card-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-article-card-title { font-family: var(--sv-display); font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; color: var(--sv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme='neo'] .sv-article-card-excerpt { font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme='neo'] .sv-article-card-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 2px solid var(--sv-surface-3); font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }

/* Featured (lead story on the list page): pale primary body */
[data-theme='neo'] .sv-article-featured { margin-bottom: 20px; }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-media { aspect-ratio: 16 / 9; align-self: stretch; border-bottom: 0; border-right: var(--nb-b); }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-body { justify-content: center; gap: 14px; padding: clamp(22px, 3.2vw, 40px); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-title { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -0.04em; -webkit-line-clamp: 3; }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-excerpt { font-size: 15.5px; -webkit-line-clamp: 3; }
[data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-meta { margin-top: 6px; border-top-color: color-mix(in oklab, var(--primary) 22%, white); }

/* ───────── Joki card ───────── */
[data-theme='neo'] .sv-joki-card { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--sv-ink); background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); overflow: hidden; }
[data-theme='neo'] .sv-joki-card-media { position: relative; aspect-ratio: 2 / 1; background: var(--sv-rank-deep); isolation: isolate; border-bottom: var(--nb-b); }
[data-theme='neo'] .sv-joki-card-img { z-index: -2; object-fit: cover; object-position: center 30%; }
[data-theme='neo'] .sv-joki-card-media::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--sv-rank-deep) 60%, transparent) 100%); }
[data-theme='neo'] .sv-joki-card-media .sv-joki-kind { position: absolute; top: 12px; left: 12px; }
[data-theme='neo'] .sv-joki-card-discount { position: absolute; top: 12px; right: 12px; }
[data-theme='neo'] .sv-joki-card-emblem { position: absolute; left: 16px; bottom: -26px; width: 58px; height: 58px; z-index: 2; }
[data-theme='neo'] .sv-joki-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 38px 18px 6px; }
[data-theme='neo'] .sv-joki-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-card-tier { font-weight: 700; color: var(--sv-rank-ink); }
[data-theme='neo'] .sv-joki-card-title { font-family: var(--sv-display); font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-card-summary { font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-theme='neo'] .sv-joki-card-estimate { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 30px; margin-top: 8px; padding: 0 11px; border-radius: var(--sv-pill); border: var(--nb-b-soft); background: var(--sv-surface-2); font-size: 12.5px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-card-estimate svg { width: 14px; height: 14px; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 18px 0; padding: 14px 0 18px; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-joki-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; min-width: 0; }
[data-theme='neo'] .sv-joki-card-from { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-card-price strong { font-family: var(--sv-display); font-size: 23px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
[data-theme='neo'] .sv-joki-card-unit { font-size: 13px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-card-before { font-size: 13px; font-weight: 500; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-joki-card-go { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); box-shadow: 2px 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-joki-card-go svg { width: 19px; height: 19px; stroke-width: 2.5; }

/* Kind chip (Eceran / Paketan / Mabar): white sticker pills */
[data-theme='neo'] .sv-joki-kind { background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-kind[data-kind='paketan'] { background: var(--nb-mint); color: var(--nb-on-accent); }

/* Section rail + list grid */
[data-theme='neo'] .sv-joki-rail, [data-theme='neo'] .sv-joki-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-theme='neo'] .sv-joki-rail > li, [data-theme='neo'] .sv-joki-grid > li { display: flex; min-width: 0; }
[data-theme='neo'] .sv-joki-rail > li > *, [data-theme='neo'] .sv-joki-grid > li > * { flex: 1; min-width: 0; }

/* ───────── Joki list page ───────── */
[data-theme='neo'] .sv-joki-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(36px, 4.5vw, 52px); background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-joki-flow-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 20px 44px 20px 20px; }
[data-theme='neo'] .sv-joki-flow-item + .sv-joki-flow-item { border-left: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-joki-flow-num { display: grid; place-items: center; flex-shrink: 0; min-width: 32px; height: 32px; padding: 0 9px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 15px; font-weight: 700; }
[data-theme='neo'] .sv-joki-flow-icon { position: absolute; top: 22px; right: 18px; width: 18px; height: 18px; color: var(--sv-primary-ink); stroke-width: 2.3; }
[data-theme='neo'] .sv-joki-flow-title { padding-top: 5px; font-family: var(--sv-display); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-flow-text { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 4.5vw, 52px); }
[data-theme='neo'] .sv-joki-trust-item { display: flex; gap: 14px; padding: 18px; border-radius: 20px; background: var(--sv-surface); border: var(--nb-b); }
[data-theme='neo'] .sv-joki-trust-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-joki-trust-icon svg { width: 20px; height: 20px; }
[data-theme='neo'] .sv-joki-trust-title { font-family: var(--sv-display); font-size: 16px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-trust-text { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }

/* ───────── Joki detail: hero (banner card with an ink frame + 8px hard shadow, info card on top) ─────────
   width: 100% keeps min-height from widening the banner through aspect-ratio (overflowed 768-959px). */
[data-theme='neo'] .sv-joki-hero { position: relative; margin-top: 14px; }
[data-theme='neo'] .sv-joki-hero-banner { position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 240px; border-radius: 24px; overflow: hidden; isolation: isolate; background: var(--sv-rank-deep); border: var(--nb-b-thick); box-shadow: var(--nb-shadow-xl); }
[data-theme='neo'] .sv-joki-hero-backdrop { z-index: -3; object-fit: cover; object-position: center 30%; }
[data-theme='neo'] .sv-joki-hero-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, #fff 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 60%); mask-image: linear-gradient(100deg, #000 0%, transparent 60%); }
[data-theme='neo'] .sv-joki-hero-banner::after { content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(100deg, color-mix(in oklab, var(--sv-rank-deep) 88%, transparent) 0%, color-mix(in oklab, var(--sv-rank-deep) 50%, transparent) 55%, color-mix(in oklab, var(--sv-rank-deep) 10%, transparent) 100%); }
[data-theme='neo'] .sv-joki-hero-emblem { position: absolute; right: clamp(24px, 9%, 120px); top: 9%; width: clamp(96px, 13vw, 164px); height: auto; }
[data-theme='neo'] .sv-joki-hero-emblem.sv-rank { filter: drop-shadow(4px 4px 0 var(--sv-ink)); }
[data-theme='neo'] .sv-joki-hero-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: -84px clamp(12px, 2.5vw, 28px) 0; padding: 22px 26px;
  background: var(--sv-surface); border: var(--nb-b-thick); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); }
[data-theme='neo'] .sv-joki-hero-art { width: 88px; height: 88px; flex-shrink: 0; align-self: center; margin: 0; border-radius: 18px; overflow: hidden; border: var(--nb-b); box-shadow: 2px 2px 0 var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-joki-hero-art img { width: 100%; height: 100%; object-fit: cover; }
[data-theme='neo'] .sv-joki-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-hero-tier { display: inline-flex; align-items: center; gap: 5px; color: var(--sv-rank-ink); }
[data-theme='neo'] .sv-joki-hero-title { margin-top: 6px; font-family: var(--sv-display); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-hero-summary { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
[data-theme='neo'] .sv-joki-hero-price { display: grid; justify-items: end; align-content: center; gap: 2px; padding-left: 24px; border-left: 2px solid var(--sv-surface-3); text-align: right; white-space: nowrap; }
[data-theme='neo'] .sv-joki-hero-price-label { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-hero-price strong { font-family: var(--sv-display); font-size: 34px; line-height: 1.05; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
[data-theme='neo'] .sv-joki-hero-price-unit { font-size: 13px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-hero-price-before { font-size: 13px; font-weight: 500; color: var(--sv-ink-3); }

/* ───────── Joki detail: layout + side cards ───────── */
[data-theme='neo'] .sv-joki-layout { display: grid; gap: 20px; margin-top: 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "guide" "form" "terms"; }
[data-theme='neo'] .sv-joki-guide { grid-area: guide; padding: 20px 22px; }
[data-theme='neo'] .sv-joki-terms { grid-area: terms; display: grid; gap: 16px; align-content: start; }
[data-theme='neo'] .sv-joki-form { grid-area: form; display: grid; gap: 20px; min-width: 0; align-content: start; }
[data-theme='neo'] .sv-joki-side-title { margin-bottom: 14px; font-family: var(--sv-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-theme='neo'] .sv-joki-guide-head .sv-joki-side-title { margin-bottom: 0; }
[data-theme='neo'] .sv-joki-guide-list { margin-top: 16px; }
[data-theme='neo'] .sv-joki-guide-list li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
[data-theme='neo'] .sv-joki-guide-list li:last-child { padding-bottom: 0; }
[data-theme='neo'] .sv-joki-guide-list li:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--sv-surface-3); }
[data-theme='neo'] .sv-joki-guide-num { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-ink); font-family: var(--sv-display); font-size: 14px; font-weight: 700; }
[data-theme='neo'] .sv-joki-guide-title { padding-top: 5px; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-guide-text { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-rules { padding: 20px 22px; }
[data-theme='neo'] .sv-joki-rules-list { display: grid; gap: 11px; }
[data-theme='neo'] .sv-joki-rules-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-rules-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--sv-ok); stroke-width: 2.4; }
[data-theme='neo'] .sv-joki-security { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--sv-radius-lg); background: var(--sv-primary-soft); border: var(--nb-b); }
[data-theme='neo'] .sv-joki-security-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-joki-security-icon svg { width: 20px; height: 20px; }
[data-theme='neo'] .sv-joki-security-title { font-family: var(--sv-display); font-size: 16px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-security-text { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--sv-ink); }

/* ───────── Joki detail: form ───────── */
[data-theme='neo'] .sv-joki-page .sv-step { scroll-margin-top: 104px; }
[data-theme='neo'] .sv-joki-page .sv-step[data-invalid='true'] { border-color: var(--sv-err); box-shadow: 4px 4px 0 var(--nb-pink); }
[data-theme='neo'] .sv-joki-page .sv-step:focus-visible { outline: 3px solid var(--sv-ink); outline-offset: 3px; }
[data-theme='neo'] .sv-joki-page .sv-input[aria-invalid='true'] { border-color: var(--sv-err); background: var(--sv-err-soft); box-shadow: 3px 3px 0 var(--nb-pink); }
[data-theme='neo'] .sv-joki-fields { display: grid; gap: 16px; }
[data-theme='neo'] .sv-joki-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-theme='neo'] .sv-joki-optional { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-joki-textarea { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
/* Segmented control: pill track, active = ink pill (like the header tabs). */
[data-theme='neo'] .sv-joki-segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--sv-pill); background: var(--sv-surface); border: var(--nb-b); }
[data-theme='neo'] .sv-joki-segment { min-height: 40px; padding: 0 6px; border-radius: var(--sv-pill); border: 0; font-family: var(--sv-display); font-size: 14.5px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-joki-segment:hover { color: var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-joki-segment[aria-pressed='true'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-joki-password { position: relative; }
[data-theme='neo'] .sv-joki-password .sv-input { padding-right: 52px; }
[data-theme='neo'] .sv-joki-reveal { position: absolute; top: 50%; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); border-radius: 12px; color: var(--sv-ink-2); cursor: pointer; transition: color .15s, background-color .15s; }
[data-theme='neo'] .sv-joki-reveal:hover, [data-theme='neo'] .sv-joki-reveal[aria-pressed='true'] { color: var(--sv-ink); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-joki-reveal svg { width: 20px; height: 20px; }
[data-theme='neo'] .sv-joki-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: var(--nb-b); font-size: 13.5px; line-height: 1.5; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
[data-theme='neo'] .sv-joki-callout strong { font-weight: 800; }
[data-theme='neo'] .sv-joki-callout[data-tone='warn'] { background: var(--sv-warn-soft); }
[data-theme='neo'] .sv-joki-callout[data-tone='warn'] svg { color: var(--sv-warn-ink); }
[data-theme='neo'] .sv-joki-callout[data-tone='info'] { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-joki-callout[data-tone='info'] svg { color: var(--sv-primary-ink); }

/* Option groups */
[data-theme='neo'] .sv-joki-group + .sv-joki-group { margin-top: 24px; }
[data-theme='neo'] .sv-joki-group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-group-label::after { content: ''; flex: 1; height: 2px; background: var(--sv-surface-3); }
[data-theme='neo'] .sv-joki-options { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-theme='neo'] .sv-joki-option { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 78px; padding: 12px 14px 12px 12px; border-radius: var(--sv-radius); border: var(--nb-b); background: var(--sv-surface); text-align: left; cursor: pointer; }
[data-theme='neo'] .sv-joki-option-emblem { width: 44px; height: 44px; }
[data-theme='neo'] .sv-joki-option-text { min-width: 0; }
[data-theme='neo'] .sv-joki-option-title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-option-sub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-option-price { display: grid; justify-items: end; gap: 4px; text-align: right; }
[data-theme='neo'] .sv-joki-option-price strong { font-family: var(--sv-display); font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-price strong { color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-joki-option-before { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--sv-ink-3); white-space: nowrap; }
[data-theme='neo'] .sv-joki-off { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--sv-pill); border: var(--nb-b-soft); background: var(--sv-hot); color: var(--sv-hot-text); font-family: var(--sv-display); font-size: 11.5px; font-weight: 700; }
[data-theme='neo'] .sv-joki-option-check { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); opacity: 0; transform: scale(0.6); transition: opacity .15s, transform .15s; }
[data-theme='neo'] .sv-joki-option-check svg { width: 14px; height: 14px; stroke-width: 3; }
[data-theme='neo'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-check { opacity: 1; transform: scale(1); }

/* Quantity */
[data-theme='neo'] .sv-joki-qty { display: grid; gap: 14px; }
[data-theme='neo'] .sv-joki-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
[data-theme='neo'] .sv-joki-stepper { display: inline-flex; align-items: center; border: var(--nb-b); border-radius: var(--sv-pill); background: var(--sv-surface); overflow: hidden; }
[data-theme='neo'] .sv-joki-stepper button { display: grid; place-items: center; width: 48px; height: 46px; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-joki-stepper button svg { width: 18px; height: 18px; }
[data-theme='neo'] .sv-joki-stepper button:hover:not(:disabled) { background: var(--sv-primary-soft); color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-stepper button:disabled { color: var(--sv-ink-3); opacity: 0.45; cursor: not-allowed; }
[data-theme='neo'] .sv-joki-stepper input { width: 64px; height: 46px; border: 0; border-inline: var(--nb-b); background: transparent; text-align: center; font-family: var(--sv-display); font-size: 19px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
[data-theme='neo'] .sv-joki-stepper input::-webkit-inner-spin-button, [data-theme='neo'] .sv-joki-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[data-theme='neo'] .sv-joki-qty-unit { font-size: 14px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-qty-subtotal { margin-left: auto; font-family: var(--sv-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-joki-quick { display: flex; flex-wrap: wrap; gap: 8px; }
[data-theme='neo'] .sv-joki-quick-btn { min-height: 40px; padding: 0 16px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); font-family: var(--sv-display); font-size: 13.5px; font-weight: 700; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-joki-quick-btn:hover { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-joki-quick-btn[aria-pressed='true'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-joki-qty-fixed { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: var(--nb-b); background: var(--sv-surface-2); font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-qty-fixed svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--sv-ink); }

/* Payment */
[data-theme='neo'] .sv-joki-pay-list { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-theme='neo'] .sv-joki-pay { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px 10px 10px; border-radius: var(--sv-radius); border: var(--nb-b); background: var(--sv-surface); text-align: left; cursor: pointer; }
[data-theme='neo'] .sv-joki-pay:disabled { cursor: not-allowed; background: var(--sv-surface-2); border-style: dashed; }
[data-theme='neo'] .sv-joki-pay:disabled .sv-joki-pay-logo { opacity: 0.55; filter: grayscale(1); }
[data-theme='neo'] .sv-joki-pay-logo { display: grid; place-items: center; width: 58px; height: 42px; border-radius: 12px; background: #fff; border: var(--nb-b-soft); color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-pay-logo svg { width: 20px; height: 20px; }
[data-theme='neo'] .sv-joki-pay-img { width: 44px; height: 28px; object-fit: contain; }
[data-theme='neo'] .sv-joki-pay-text { min-width: 0; }
[data-theme='neo'] .sv-joki-pay-name { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-pay-fee { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-pay:disabled .sv-joki-pay-fee { color: var(--sv-ink-2); font-weight: 600; }
[data-theme='neo'] .sv-joki-pay-total { font-family: var(--sv-display); font-size: 16px; font-weight: 700; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-joki-pay[aria-pressed='true'] .sv-joki-pay-total { color: var(--sv-primary-ink); }

/* Contact */
[data-theme='neo'] .sv-joki-phone { display: flex; align-items: stretch; }
[data-theme='neo'] .sv-joki-phone-prefix { display: grid; place-items: center; padding: 0 14px; border: var(--nb-b); border-right: 0; border-radius: var(--sv-radius-sm) 0 0 var(--sv-radius-sm); background: var(--sv-primary-soft); font-family: var(--sv-display); font-size: 15px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-phone .sv-input { border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; }

/* Summary: the receipt card (primary offset shadow like the flash panel) */
[data-theme='neo'] .sv-joki-summary { padding: 22px; border-radius: var(--sv-radius-lg); box-shadow: 6px 6px 0 var(--primary); }
[data-theme='neo'] .sv-joki-summary-title { margin-bottom: 8px; font-family: var(--sv-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-summary-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 2px dashed var(--sv-surface-3); font-size: 14px; }
[data-theme='neo'] .sv-joki-summary-list dt { flex-shrink: 0; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-summary-list dd { min-width: 0; text-align: right; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-summary-option { display: inline-flex; align-items: center; gap: 6px; }
[data-theme='neo'] .sv-joki-summary-empty { font-weight: 600; color: var(--sv-ink-3); }
[data-theme='neo'] .sv-joki-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; }
[data-theme='neo'] .sv-joki-summary-total span { font-size: 14px; font-weight: 700; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-summary-pending { font-size: 14px; font-weight: 700; color: var(--sv-ink-3); letter-spacing: 0; }
[data-theme='neo'] .sv-joki-summary-total strong { font-family: var(--sv-display); font-size: 32px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; }
[data-theme='neo'] .sv-joki-summary-missing { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--sv-radius-sm); border: var(--nb-b); background: var(--nb-pink-soft); color: var(--sv-ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
[data-theme='neo'] .sv-joki-submit { min-height: 56px; font-size: 17px; }
[data-theme='neo'] .sv-joki-summary-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-summary-note svg { width: 14px; height: 14px; color: var(--sv-ok); }

/* Mobile sticky total bar */
[data-theme='neo'] .sv-joki-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--sv-surface); border-top: var(--nb-b); transition: transform .25s ease, visibility .25s; }
[data-theme='neo'] .sv-joki-bar[data-hidden='true'] { transform: translateY(110%); visibility: hidden; }
[data-theme='neo'] .sv-joki-bar-total { display: grid; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-joki-bar-total span { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-bar-total strong { font-family: var(--sv-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-joki-bar .sv-btn { flex-shrink: 0; padding: 0 24px; }

/* "Sebelum order joki" dialog (portaled; carries data-theme itself) */
.sv-joki-dialog[data-theme='neo'] { max-width: min(480px, calc(100% - 24px)); padding: 0; gap: 0; border-radius: 24px; border: var(--nb-b-thick); background: var(--sv-surface); box-shadow: var(--nb-shadow-xl); overflow: hidden; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-dialog-head { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 20px 20px 18px; margin-bottom: 16px; background: var(--primary); color: var(--sv-on-primary); border-bottom: var(--nb-b-thick); }
[data-theme='neo'] .sv-joki-dialog-head::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, #fff 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 9%, transparent) 1px, transparent 1px) 0 0 / 44px 44px; }
[data-theme='neo'] .sv-joki-dialog-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); box-shadow: 2px 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-joki-dialog-icon svg { width: 22px; height: 22px; }
[data-theme='neo'] .sv-joki-dialog-title { font-family: var(--sv-display); font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.035em; color: var(--sv-on-primary); }
[data-theme='neo'] .sv-joki-dialog-desc { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--sv-on-primary); opacity: .9; }
[data-theme='neo'] .sv-joki-dialog-close { display: grid; place-items: center; width: 42px; height: 42px; margin: -6px -6px 0 0; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-joki-dialog-close svg { width: 18px; height: 18px; }
[data-theme='neo'] .sv-joki-checklist { display: grid; gap: 8px; padding: 0 22px; }
[data-theme='neo'] .sv-joki-check { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: var(--nb-b); background: var(--sv-surface); cursor: pointer; transition: background-color .15s, border-color .15s; }
[data-theme='neo'] .sv-joki-check:hover { background: var(--sv-surface-2); }
[data-theme='neo'] .sv-joki-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-theme='neo'] .sv-joki-check:has(input:focus-visible) { outline: 3px solid var(--sv-ink); outline-offset: 2px; }
[data-theme='neo'] .sv-joki-check-box { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; border-radius: 8px; border: var(--nb-b); background: var(--sv-surface); color: transparent; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-joki-check-box svg { width: 14px; height: 14px; stroke-width: 3; }
[data-theme='neo'] .sv-joki-check-text { font-size: 14px; line-height: 1.5; color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-check[data-checked='true'] { background: var(--sv-primary-soft); border-color: var(--primary); }
[data-theme='neo'] .sv-joki-check[data-checked='true'] .sv-joki-check-box { background: var(--primary); color: var(--sv-on-primary); border-color: var(--sv-ink); }
[data-theme='neo'] .sv-joki-dialog-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 22px 0; padding: 12px 16px; border-radius: var(--sv-radius-sm); border: var(--nb-b); background: var(--sv-surface-2); font-size: 13.5px; line-height: 1.45; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-joki-dialog-summary strong { flex-shrink: 0; font-family: var(--sv-display); font-size: 20px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-joki-dialog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 18px 22px 22px; }
[data-theme='neo'] .sv-joki-dialog-actions .sv-btn--primary:disabled { background: var(--sv-surface-3); color: var(--sv-ink-2); border-style: dashed; box-shadow: none; }

/* ───────── Article detail ───────── */
[data-theme='neo'] .sv-article { margin-top: 18px; }
/* One reading column: breadcrumb, header, image, body and footer share the same left/right edges. */
[data-theme='neo'] .sv-article-page { --sv-article-w: 720px; }
[data-theme='neo'] .sv-article-page > .sv-page-crumbs, [data-theme='neo'] .sv-article-head, [data-theme='neo'] .sv-article-figure, [data-theme='neo'] .sv-article-body, [data-theme='neo'] .sv-article-foot { box-sizing: border-box; width: 100%; max-width: var(--sv-article-w); margin-inline: auto; }
[data-theme='neo'] .sv-article-head, [data-theme='neo'] .sv-article-body, [data-theme='neo'] .sv-article-foot { font-size: 17px; }
[data-theme='neo'] .sv-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
[data-theme='neo'] .sv-article-cat { position: relative; min-height: 30px; transition: transform .15s, box-shadow .15s; }
[data-theme='neo'] .sv-article-cat::after { content: ''; position: absolute; inset: -7px -2px; }
[data-theme='neo'] .sv-article-cat:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--nb-sh); }
[data-theme='neo'] .sv-article-game { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-article-title { margin-top: 16px; font-family: var(--sv-display); font-size: clamp(34px, 4.6vw, 54px); line-height: 1.03; font-weight: 700; letter-spacing: -0.045em; color: var(--sv-ink); text-wrap: balance; }
[data-theme='neo'] .sv-article-lead { margin-top: 14px; font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.6; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--sv-surface-3); font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-article-author { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-article-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 13px; font-weight: 700; }
[data-theme='neo'] .sv-article-meta-item { display: inline-flex; align-items: center; gap: 6px; }
[data-theme='neo'] .sv-article-meta-item svg { width: 15px; height: 15px; color: var(--sv-ink); }
[data-theme='neo'] .sv-article-figure { position: relative; aspect-ratio: 16 / 9; margin: 30px auto 0; border-radius: 24px; overflow: hidden; background: var(--sv-surface-2); border: var(--nb-b-thick); box-shadow: var(--nb-shadow-xl); }
[data-theme='neo'] .sv-article-img { object-fit: cover; }
[data-theme='neo'] .sv-article-body { margin-top: 36px; line-height: 1.75; color: var(--sv-ink); }
[data-theme='neo'] .sv-article-body p + p { margin-top: 1.15em; }
[data-theme='neo'] .sv-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 36px; padding-top: 22px; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-article-foot-note { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-article-related { margin-top: clamp(48px, 7vw, 88px); }

/* ───────── Responsive ───────── */
@media (min-width: 1024px) {
  [data-theme='neo'] .sv-joki-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "guide form" "terms form"; gap: 24px; align-items: start; }
  [data-theme='neo'] .sv-joki-terms { position: sticky; top: 104px; }
  [data-theme='neo'] .sv-joki-bar { display: none; }
}
@media (max-width: 1023px) {
  [data-theme='neo'] .sv-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='neo'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: none; }
  [data-theme='neo'] .sv-joki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-theme='neo'] .sv-joki-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--sv-gutter) * -1); padding: 6px var(--sv-gutter) 14px; scroll-padding-inline: var(--sv-gutter); }
  [data-theme='neo'] .sv-joki-rail::-webkit-scrollbar { display: none; }
  [data-theme='neo'] .sv-joki-rail > li { scroll-snap-align: start; }
  [data-theme='neo'] .sv-joki-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-theme='neo'] .sv-joki-flow-item:nth-child(3) { border-left: 0; }
  [data-theme='neo'] .sv-joki-flow-item:nth-child(n + 3) { border-top: 2px solid var(--sv-surface-3); }
  [data-theme='neo'] .sv-joki-page { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  [data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: flex; }
  [data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-media { border-right: 0; border-bottom: var(--nb-b); }
  [data-theme='neo'] .sv-article-card[data-layout='featured'] .sv-article-card-body { padding: 18px; gap: 10px; }
  [data-theme='neo'] .sv-joki-trust { grid-template-columns: 1fr; }
  [data-theme='neo'] .sv-joki-hero-banner { aspect-ratio: 2 / 1; min-height: 0; border-width: 2px; border-radius: 18px; box-shadow: 5px 5px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-joki-hero-emblem { top: 10%; right: 18px; width: clamp(84px, 26vw, 120px); }
  [data-theme='neo'] .sv-joki-hero-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; margin: -52px 8px 0; padding: 16px; border-width: 2px; box-shadow: var(--sv-shadow); }
  [data-theme='neo'] .sv-joki-hero-art { width: 64px; height: 64px; border-radius: 14px; align-self: start; }
  [data-theme='neo'] .sv-joki-hero-title { font-size: 26px; }
  [data-theme='neo'] .sv-joki-hero-summary { font-size: 14.5px; }
  [data-theme='neo'] .sv-joki-hero-chips { grid-column: 1 / -1; }
  [data-theme='neo'] .sv-joki-hero-info { display: contents; }
  [data-theme='neo'] .sv-joki-hero-info > :not(.sv-joki-hero-chips) { grid-column: 2; }
  [data-theme='neo'] .sv-joki-hero-meta { grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; }
  [data-theme='neo'] .sv-joki-hero-meta > [aria-hidden='true'] { display: none; }
  [data-theme='neo'] .sv-joki-hero-title { grid-row: 2; margin-top: 0; }
  [data-theme='neo'] .sv-joki-hero-art { grid-row: 1 / span 2; }
  [data-theme='neo'] .sv-joki-hero-summary { grid-column: 1 / -1 !important; margin-top: 0; }
  [data-theme='neo'] .sv-joki-hero-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; padding: 14px 0 0; border-left: 0; border-top: 2px solid var(--sv-surface-3); text-align: left; }
  [data-theme='neo'] .sv-joki-hero-price strong { font-size: 27px; }
}
@media (max-width: 639px) {
  [data-theme='neo'] .sv-page-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  [data-theme='neo'] .sv-page-filters { margin-inline: calc(var(--sv-gutter) * -1); padding-inline: var(--sv-gutter); }
  [data-theme='neo'] .sv-article-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-theme='neo'] .sv-article-grid[data-context='page'] { gap: 16px; }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='neo'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: block; }
  /* Section + related: lead card, then compact rows */
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-link,
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * .sv-article-card-link { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: stretch; border-radius: 18px; }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-media,
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * .sv-article-card-media { aspect-ratio: auto; min-height: 104px; height: 100%; border-bottom: 0; border-right: var(--nb-b); }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-body,
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * .sv-article-card-body { gap: 6px; padding: 12px 14px; }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) :is(.sv-article-card-excerpt, .sv-article-card-game),
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * :is(.sv-article-card-excerpt, .sv-article-card-game) { display: none; }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-title,
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * .sv-article-card-title { font-size: 16px; }
  [data-theme='neo'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-chip,
  [data-theme='neo'] .sv-article-grid[data-context='related'] > * .sv-chip { height: 24px; padding: 0 9px; font-size: 11px; }
  [data-theme='neo'] .sv-joki-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-theme='neo'] .sv-joki-rail { grid-auto-columns: 84%; gap: 12px; }
  [data-theme='neo'] .sv-joki-row, [data-theme='neo'] .sv-joki-options, [data-theme='neo'] .sv-joki-pay-list { grid-template-columns: minmax(0, 1fr); }
  [data-theme='neo'] .sv-joki-option { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "emblem text" "emblem price"; row-gap: 6px; column-gap: 12px; min-height: 0; padding: 12px 14px 12px 12px; }
  [data-theme='neo'] .sv-joki-option-emblem { grid-area: emblem; width: 40px; height: 40px; align-self: center; }
  [data-theme='neo'] .sv-joki-option-text { grid-area: text; }
  [data-theme='neo'] .sv-joki-option-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; text-align: left; }
  [data-theme='neo'] .sv-joki-aside-hint { display: none; }
  [data-theme='neo'] .sv-joki-row--pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
  [data-theme='neo'] .sv-joki-segment { min-height: 44px; font-size: 13px; padding: 0 2px; }
  [data-theme='neo'] .sv-joki-quick-btn { min-height: 44px; }
  [data-theme='neo'] .sv-joki-guide, [data-theme='neo'] .sv-joki-rules { padding: 18px 16px; }
  [data-theme='neo'] .sv-joki-summary { padding: 18px 16px; box-shadow: 5px 5px 0 var(--primary); }
  [data-theme='neo'] :is(.sv-joki-flow-text, .sv-joki-trust-text, .sv-joki-guide-text, .sv-joki-security-text) { font-size: 14px; }
  [data-theme='neo'] :is(.sv-joki-callout, .sv-joki-rules-list li) { font-size: 14px; }
  [data-theme='neo'] .sv-joki-guide { padding: 16px; }
  [data-theme='neo'] .sv-joki-layout { gap: 16px; margin-top: 22px; }
  [data-theme='neo'] .sv-joki-form { gap: 16px; }
  [data-theme='neo'] .sv-page-head { margin: 12px 0 22px; }
  [data-theme='neo'] .sv-page-sub { font-size: 15px; }
  /* How-it-works: a swipeable strip of compact steps so the packages show sooner. */
  [data-theme='neo'] .sv-joki-flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 10px; margin: 0 calc(var(--sv-gutter) * -1) 30px; padding: 2px var(--sv-gutter) 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sv-gutter); scrollbar-width: none; background: none; border: 0; border-radius: 0; }
  [data-theme='neo'] .sv-joki-flow::-webkit-scrollbar { display: none; }
  [data-theme='neo'] .sv-joki-flow > .sv-joki-flow-item { scroll-snap-align: start; padding: 14px 40px 14px 14px; background: var(--sv-surface); border: var(--nb-b); border-radius: 18px; }
  [data-theme='neo'] .sv-joki-flow > .sv-joki-flow-item + .sv-joki-flow-item { border-left: var(--nb-b); border-top: var(--nb-b); }
  [data-theme='neo'] .sv-article-figure { margin-top: 22px; border-width: 2px; border-radius: 18px; box-shadow: 5px 5px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-article-body { margin-top: 26px; font-size: 16.5px; line-height: 1.7; }
}


/* ───────── Segmented tabs (shared): pill track, active = ink pill ───────── */
[data-theme='neo'] .sv-segtabs { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; border-radius: var(--sv-pill); background: var(--sv-surface); border: var(--nb-b);
  overflow-x: auto; scrollbar-width: none; }
[data-theme='neo'] .sv-segtabs::-webkit-scrollbar { display: none; }
[data-theme='neo'] .sv-segtab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--sv-pill);
  background: transparent; font-family: var(--sv-display); font-size: 14.5px; font-weight: 700; color: var(--sv-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-segtab:hover { color: var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-segtab[aria-selected='true'] { background: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-segtab:focus-visible { outline-offset: 0; }
[data-theme='neo'] .sv-segtab-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--sv-pill); background: var(--sv-surface-2);
  font-size: 12px; font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-segtab[aria-selected='true'] .sv-segtab-count { background: var(--primary); color: var(--sv-on-primary); }

/* ───────── Daftar Harga ───────── */
[data-theme='neo'] .sv-pricelist-head { margin-bottom: 24px; }
[data-theme='neo'] .sv-pricelist-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
[data-theme='neo'] .sv-pricelist-live { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--sv-ink); background: var(--nb-mint); animation: sv-pricelist-blink 1.6s steps(2, jump-none) infinite; }
@keyframes sv-pricelist-blink { 50% { background: var(--sv-surface); } }

[data-theme='neo'] .sv-pricelist-layout { display: grid; gap: 16px; align-items: start; }
[data-theme='neo'] .sv-pricelist-aside, [data-theme='neo'] .sv-pricelist-main { min-width: 0; }
[data-theme='neo'] .sv-pricelist-main { overflow: hidden; scroll-margin-top: 132px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-pricelist-aside { border-radius: var(--sv-radius-lg); }

/* Game picker */
[data-theme='neo'] .sv-pricelist-picker { display: flex; flex-direction: column; min-height: 0; padding: 18px; }
[data-theme='neo'] .sv-pricelist-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
[data-theme='neo'] .sv-pricelist-picker-title { font-family: var(--sv-display); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-picker-count { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); white-space: nowrap; }

[data-theme='neo'] .sv-pricelist-search, [data-theme='neo'] .sv-pricelist-filter { position: relative; }
[data-theme='neo'] .sv-pricelist-search { margin-bottom: 14px; }
[data-theme='neo'] .sv-pricelist-search-icon, [data-theme='neo'] .sv-pricelist-filter-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--sv-ink); stroke-width: 2.4; pointer-events: none; }
[data-theme='neo'] .sv-pricelist-search-input, [data-theme='neo'] .sv-pricelist-filter-input { padding: 0 44px 0 44px; border-radius: var(--sv-pill); font-weight: 500; }
[data-theme='neo'] .sv-pricelist-search-input::-webkit-search-cancel-button, [data-theme='neo'] .sv-pricelist-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
[data-theme='neo'] .sv-pricelist-search-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--sv-pill);
  background: transparent; color: var(--sv-ink-2); cursor: pointer; transition: color .15s; }
[data-theme='neo'] .sv-pricelist-search-clear:hover { color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-search-clear svg { width: 22px; height: 22px; padding: 3px; border-radius: 999px; background: var(--sv-surface-2); color: var(--sv-ink); stroke-width: 3; }

[data-theme='neo'] .sv-pricelist-games { margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-pricelist-games[data-layout='rail'] { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: -18px; padding: 12px 18px 12px; scroll-padding-inline: 18px; }
[data-theme='neo'] .sv-pricelist-games[data-layout='rail']::-webkit-scrollbar { display: none; }
[data-theme='neo'] .sv-pricelist-games[data-layout='rail'] > li { flex: 0 0 86px; scroll-snap-align: start; }
[data-theme='neo'] .sv-pricelist-games[data-layout='grid'] { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; padding: 6px 6px 8px 0; }

/* Game tile = a small game card (white, ink border, framed art); selected = pale primary + check */
[data-theme='neo'] .sv-pricelist-game { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: 100%; padding: 5px 5px 8px; border: var(--nb-b);
  border-radius: 16px; background: var(--sv-surface); text-align: center; color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-pricelist-game[aria-pressed='true'] { color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-game-media { position: relative; display: block; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: var(--sv-surface-2); border: var(--nb-b-soft); }
[data-theme='neo'] .sv-pricelist-game-media img { object-fit: cover; }
[data-theme='neo'] .sv-pricelist-game-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-display); font-size: 20px; font-weight: 700; }
[data-theme='neo'] .sv-pricelist-game-check { position: absolute; top: 9px; right: 9px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--sv-pill);
  border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-pricelist-game-check svg { width: 12px; height: 12px; stroke-width: 3.2; }
[data-theme='neo'] .sv-pricelist-game-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-family: var(--sv-display); font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
[data-theme='neo'] .sv-pricelist-game--skeleton { cursor: default; border-color: var(--sv-line); }
[data-theme='neo'] .sv-pricelist-skeleton-line { display: block; height: 10px; width: 80%; margin: 4px auto 0; }

[data-theme='neo'] .sv-pricelist-picker-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 46px; margin-top: 12px; border: 2px dashed var(--sv-ink);
  border-radius: var(--sv-pill); background: var(--sv-surface); font-family: var(--sv-display); font-size: 14px; font-weight: 700; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, border-style .15s; }
[data-theme='neo'] .sv-pricelist-picker-toggle:hover { border-style: solid; background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-pricelist-picker-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
[data-theme='neo'] .sv-pricelist-picker-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

/* Shared empty / error states */
[data-theme='neo'] .sv-pricelist-picker-empty, [data-theme='neo'] .sv-pricelist-state, [data-theme='neo'] .sv-pricelist-table-empty { display: grid; justify-items: center; text-align: center; padding: 28px 12px; }
[data-theme='neo'] .sv-pricelist-state { padding: 44px 20px; }
[data-theme='neo'] .sv-pricelist-state--page { padding: 56px 24px; }
[data-theme='neo'] .sv-pricelist-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-pricelist-empty-icon[data-tone='error'] { background: var(--nb-pink-soft); color: var(--sv-err); }
[data-theme='neo'] .sv-pricelist-empty-icon svg { width: 22px; height: 22px; }
[data-theme='neo'] .sv-pricelist-empty-title { font-family: var(--sv-display); font-size: 19px; font-weight: 700; color: var(--sv-ink); text-wrap: balance; }
[data-theme='neo'] .sv-pricelist-empty-text { margin-top: 4px; max-width: 38ch; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); text-wrap: pretty; }
[data-theme='neo'] .sv-pricelist-empty-action { margin-top: 16px; }
[data-theme='neo'] .sv-pricelist-empty-action svg { width: 16px; height: 16px; }

/* Price panel */
[data-theme='neo'] .sv-pricelist-panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px;
  border-bottom: var(--nb-b); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-pricelist-panel-logo { position: relative; display: block; width: 66px; height: 66px; border-radius: 18px; overflow: hidden; background: var(--sv-surface-2);
  border: var(--nb-b); box-shadow: 2px 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-panel-logo img { object-fit: cover; }
[data-theme='neo'] .sv-pricelist-panel-heading { min-width: 0; }
[data-theme='neo'] .sv-pricelist-panel-kicker { font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-pricelist-panel-title { margin-top: 2px; font-family: var(--sv-display); font-size: clamp(23px, 2.4vw, 30px); line-height: 1.08; font-weight: 700; letter-spacing: -0.04em; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-pricelist-panel-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-size: 13.5px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-pricelist-panel-meta strong { font-weight: 800; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-pricelist-panel-cta { white-space: nowrap; }
[data-theme='neo'] .sv-pricelist-panel-cta svg { width: 18px; height: 18px; }
[data-theme='neo'] .sv-pricelist-panel-body { padding: 18px 22px 22px; }

[data-theme='neo'] .sv-pricelist-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
[data-theme='neo'] .sv-pricelist-types { min-width: 0; }
[data-theme='neo'] .sv-pricelist-type-single { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; font-family: var(--sv-display); font-size: 17px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-filter { flex: 0 1 280px; min-width: 200px; }

[data-theme='neo'] .sv-pricelist-table-wrap { border: var(--nb-b); border-radius: 18px; overflow: hidden; }
[data-theme='neo'] .sv-pricelist-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
[data-theme='neo'] .sv-pricelist-table thead th { padding: 11px 16px; text-align: left; font-family: var(--sv-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-bg);
  background: var(--sv-ink); white-space: nowrap; }
[data-theme='neo'] .sv-pricelist-table thead .sv-pricelist-col-price { text-align: right; }
[data-theme='neo'] .sv-pricelist-table .sv-pricelist-col-action { width: 1%; }
[data-theme='neo'] .sv-pricelist-table tbody tr { transition: background-color .15s; }
[data-theme='neo'] .sv-pricelist-table tbody tr + tr { border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-pricelist-table tbody tr:hover { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-pricelist-table tbody :is(th, td) { padding: 9px 16px; text-align: left; vertical-align: middle; }
[data-theme='neo'] .sv-pricelist-table tbody th { font-weight: inherit; }
[data-theme='neo'] .sv-pricelist-product { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-theme='neo'] .sv-pricelist-product-icon { position: relative; display: block; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: var(--sv-primary-soft); border: 1.5px solid var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-product-icon img { object-fit: contain; padding: 4px; }
[data-theme='neo'] .sv-pricelist-product-icon[data-empty] { background: var(--sv-surface-2); }
[data-theme='neo'] .sv-pricelist-product-name { min-width: 0; font-weight: 700; line-height: 1.35; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-pricelist-cell-price { text-align: right !important; white-space: nowrap; }
[data-theme='neo'] .sv-pricelist-price { font-family: var(--sv-display); font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-cell-action { padding-left: 4px !important; text-align: right !important; }
[data-theme='neo'] .sv-pricelist-buy { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; min-height: 38px; padding: 0 16px; border-radius: var(--sv-pill); border: var(--nb-b);
  background: var(--sv-surface); font-family: var(--sv-display); font-size: 14px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-pricelist-table tbody tr:hover .sv-pricelist-buy { background: var(--primary); color: var(--sv-on-primary); }

[data-theme='neo'] .sv-pricelist-note { display: flex; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-pricelist-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }

/* Panel skeletons */
[data-theme='neo'] .sv-pricelist-skeleton-meta { display: block; width: 168px; max-width: 100%; height: 14px; margin-top: 8px; }
[data-theme='neo'] .sv-pricelist-skeleton-title { display: block; width: 180px; max-width: 100%; height: 22px; }
[data-theme='neo'] .sv-pricelist-skeleton-tabs { display: block; width: 220px; height: 48px; border-radius: var(--sv-pill); }
[data-theme='neo'] .sv-pricelist-skeleton-rows { display: grid; border: var(--nb-b); border-radius: 18px; overflow: hidden; }
[data-theme='neo'] .sv-pricelist-skeleton-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 88px; align-items: center; gap: 12px; padding: 13px 16px; }
[data-theme='neo'] .sv-pricelist-skeleton-row + .sv-pricelist-skeleton-row { border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-pricelist-skeleton-icon { display: block; width: 36px; height: 36px; }
[data-theme='neo'] .sv-pricelist-skeleton-name { display: block; width: 58%; height: 12px; }
[data-theme='neo'] .sv-pricelist-skeleton-price { display: block; height: 12px; }

@media (min-width: 1024px) {
  [data-theme='neo'] .sv-pricelist-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 24px; }
  [data-theme='neo'] .sv-pricelist-aside { position: sticky; top: calc(var(--sv-header-offset, 124px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; max-height: calc(100dvh - 148px); overflow: hidden; }
  [data-theme='neo'] .sv-pricelist-aside .sv-pricelist-picker { flex: 1 1 auto; }
  [data-theme='neo'] .sv-pricelist-games[data-layout] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1 1 auto; min-height: 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: -8px -12px -10px -8px; padding: 12px 14px 16px 8px; scroll-snap-type: none; scrollbar-width: thin;
    scrollbar-color: var(--sv-ink) transparent; }
  [data-theme='neo'] .sv-pricelist-games[data-layout] > li { flex: none; }
  [data-theme='neo'] .sv-pricelist-picker-toggle { display: none; }
}

@media (max-width: 639px) {
  [data-theme='neo'] .sv-pricelist-picker { padding: 16px; }
  [data-theme='neo'] .sv-pricelist-head, [data-theme='neo'] .sv-leaderboard-head { margin-bottom: 18px; }
  [data-theme='neo'] .sv-pricelist-facts { margin-top: 12px; }
  [data-theme='neo'] .sv-pricelist-search { margin-bottom: 12px; }
  [data-theme='neo'] .sv-pricelist-games[data-layout='rail'] { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  [data-theme='neo'] .sv-pricelist-games[data-layout='rail'] > li { flex-basis: 80px; }
  [data-theme='neo'] .sv-pricelist-games[data-layout='grid'] { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }

  [data-theme='neo'] .sv-pricelist-panel-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; }
  [data-theme='neo'] .sv-pricelist-panel-logo { width: 56px; height: 56px; border-radius: 15px; }
  [data-theme='neo'] .sv-pricelist-panel-cta { grid-column: 1 / -1; width: 100%; }
  [data-theme='neo'] .sv-pricelist-panel-body { padding: 14px 16px 18px; }

  [data-theme='neo'] .sv-pricelist-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  [data-theme='neo'] .sv-pricelist-types { display: flex; }
  [data-theme='neo'] .sv-pricelist-types .sv-segtab { flex: 1 0 auto; min-height: 44px; }
  [data-theme='neo'] .sv-pricelist-filter { flex: none; min-width: 0; }

  /* Stacked rows: [icon + name / price] [Beli] */
  [data-theme='neo'] .sv-pricelist-table-wrap { margin-inline: 0; }
  [data-theme='neo'] .sv-pricelist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-theme='neo'] .sv-pricelist-table, [data-theme='neo'] .sv-pricelist-table tbody { display: block; }
  [data-theme='neo'] .sv-pricelist-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product action" "price action";
    column-gap: 12px; align-items: center; min-height: 70px; padding: 11px 12px 11px 62px; }
  [data-theme='neo'] .sv-pricelist-table tbody :is(th, td) { padding: 0; }
  [data-theme='neo'] .sv-pricelist-cell-product { grid-area: product; }
  [data-theme='neo'] .sv-pricelist-cell-price { grid-area: price; padding: 2px 0 0 !important; text-align: left !important; align-self: start; }
  [data-theme='neo'] .sv-pricelist-cell-action { grid-area: action; padding: 0 !important; }
  [data-theme='neo'] .sv-pricelist-cell-product { align-self: end; }
  [data-theme='neo'] .sv-pricelist-product { display: block; }
  [data-theme='neo'] .sv-pricelist-product-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
  [data-theme='neo'] .sv-pricelist-product-name { display: block; font-size: 14px; }
  [data-theme='neo'] .sv-pricelist-price { font-size: 15px; }
  [data-theme='neo'] .sv-pricelist-buy { min-height: 44px; min-width: 62px; }
  [data-theme='neo'] .sv-pricelist-skeleton-row { grid-template-columns: 36px minmax(0, 1fr) 60px; }
}

/* ───────── Leaderboard ───────── */
[data-theme='neo'] .sv-leaderboard {
  --sv-medal-gold: var(--nb-pink); --sv-medal-silver: var(--nb-mint); --sv-medal-bronze: var(--sv-surface);
}
[data-theme='neo'] .sv-leaderboard-head { margin-bottom: 24px; }
[data-theme='neo'] .sv-leaderboard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
[data-theme='neo'] .sv-leaderboard-reset { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-leaderboard-reset svg { width: 16px; height: 16px; color: var(--sv-primary-ink); }

[data-theme='neo'] .sv-leaderboard-body { display: grid; gap: 20px; align-items: start; }
[data-theme='neo'] .sv-leaderboard-main { display: grid; gap: 18px; min-width: 0; }

/* Stage + podium: the hero band as a rounded card */
[data-theme='neo'] .sv-leaderboard-stage { position: relative; isolation: isolate; padding: 22px 24px 0; border: var(--nb-b-thick); border-radius: 24px; overflow: hidden; box-shadow: var(--sv-shadow-lg);
  background: radial-gradient(circle calc(clamp(90px, 11vw, 150px) + 2.5px) at calc(100% - clamp(10px, 1.6vw, 22px)) clamp(10px, 1.6vw, 22px), var(--nb-primary-2) calc(clamp(90px, 11vw, 150px) - 0.5px), var(--sv-ink) clamp(90px, 11vw, 150px) calc(clamp(90px, 11vw, 150px) + 2.5px - 0.5px), transparent calc(clamp(90px, 11vw, 150px) + 2.5px)) no-repeat, linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--primary); color: var(--sv-on-primary); }
[data-theme='neo'] .sv-leaderboard-stage-title { display: flex; align-items: baseline; gap: 10px; font-family: var(--sv-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-on-primary); }
[data-theme='neo'] .sv-leaderboard-stage-title span { font-family: var(--font-jakarta), system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--sv-on-primary); opacity: .85; letter-spacing: 0; }
[data-theme='neo'] .sv-leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 18px auto 0; padding: 0; max-width: 760px; list-style: none; }
[data-theme='neo'] .sv-leaderboard-podium-item { display: flex; flex-direction: column; align-items: center; min-width: 0; }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] { order: 2; --sv-medal: var(--sv-medal-gold); }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='2'] { order: 1; --sv-medal: var(--sv-medal-silver); }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='3'] { order: 3; --sv-medal: var(--sv-medal-bronze); }
[data-theme='neo'] .sv-leaderboard-podium-person { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; padding: 0 4px 16px; text-align: center; }
[data-theme='neo'] .sv-leaderboard-podium-figure { position: relative; margin: 18px 0 16px; }
[data-theme='neo'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { border: var(--nb-b-thick); box-shadow: 4px 4px 0 var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 90px; height: 90px; font-size: 27px; }
[data-theme='neo'] .sv-leaderboard-crown { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; color: var(--sv-ink); fill: var(--nb-pink); stroke-width: 2; }
[data-theme='neo'] .sv-leaderboard-medal { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 8px;
  border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-medal); color: var(--sv-ink);
  font-family: var(--sv-display); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-leaderboard-podium-name { max-width: 100%; font-size: 15px; font-weight: 800; color: var(--sv-on-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-leaderboard-podium-total { font-family: var(--sv-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; color: var(--sv-on-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 26px; }
[data-theme='neo'] .sv-leaderboard-amount-short { display: none; }
[data-theme='neo'] .sv-leaderboard-podium-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--sv-on-primary); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-leaderboard-podium-game { max-width: 100%; margin-top: 6px; background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-podium-game svg { flex-shrink: 0; color: var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-podium-step { position: relative; display: grid; place-items: center; width: 100%; height: 46px; border-radius: 18px 18px 0 0;
  border: var(--nb-b-thick); border-bottom: 0; background: var(--sv-surface); }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { background: var(--sv-surface); }
[data-theme='neo'] .sv-leaderboard-podium-step span { font-family: var(--sv-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--sv-ink); letter-spacing: -0.04em; }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 80px; }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 38px; color: var(--sv-primary-ink); }
[data-theme='neo'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 58px; }

/* Avatars: pale tints with ink text (no rainbow) */
[data-theme='neo'] .sv-leaderboard-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; border: var(--nb-b); background: var(--sv-av-bg, var(--sv-primary-soft)); color: var(--sv-ink);
  font-family: var(--sv-display); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
[data-theme='neo'] .sv-leaderboard-avatar[data-size='lg'] { width: 72px; height: 72px; font-size: 22px; }
[data-theme='neo'] .sv-leaderboard-avatar[data-tone='0'] { --sv-av-bg: var(--sv-primary-soft); }
[data-theme='neo'] .sv-leaderboard-avatar[data-tone='1'] { --sv-av-bg: var(--nb-mint-soft); }
[data-theme='neo'] .sv-leaderboard-avatar[data-tone='2'] { --sv-av-bg: var(--nb-pink-soft); }
[data-theme='neo'] .sv-leaderboard-avatar[data-tone='3'] { --sv-av-bg: var(--sv-surface-2); }
[data-theme='neo'] .sv-leaderboard-avatar[data-tone='4'] { --sv-av-bg: var(--sv-surface); }
[data-theme='neo'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { --sv-av-bg: var(--sv-surface); }

/* Rank change */
[data-theme='neo'] .sv-leaderboard-change { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 40px; height: 24px; padding: 0 8px; border-radius: var(--sv-pill); border: 1.5px solid var(--sv-ink);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--sv-surface); color: var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-change-mark { font-size: 8px; line-height: 1; }
[data-theme='neo'] .sv-leaderboard-change[data-dir='same'] .sv-leaderboard-change-mark { font-size: 13px; font-weight: 700; }
[data-theme='neo'] .sv-leaderboard-change[data-dir='up'] { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-leaderboard-change[data-dir='down'] { background: var(--nb-pink-soft); color: var(--sv-ink); }

/* Ranks 4–20 */
[data-theme='neo'] .sv-leaderboard-list { overflow: hidden; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-leaderboard-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: var(--nb-b); }
[data-theme='neo'] .sv-leaderboard-list-title { font-family: var(--sv-display); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-list-period { font-size: 12.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14px; }
[data-theme='neo'] .sv-leaderboard-table thead th { padding: 10px 14px; text-align: left; font-family: var(--sv-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2);
  background: var(--sv-surface-2); border-bottom: 2px solid var(--sv-surface-3); white-space: nowrap; }
[data-theme='neo'] .sv-leaderboard-table abbr { text-decoration: none; }
[data-theme='neo'] .sv-leaderboard-table :is(.sv-leaderboard-col-rank, .sv-leaderboard-cell-rank) { width: 64px; text-align: center !important; }
[data-theme='neo'] .sv-leaderboard-table :is(.sv-leaderboard-col-tx, .sv-leaderboard-cell-tx, .sv-leaderboard-col-total, .sv-leaderboard-cell-total) { text-align: right !important; }
[data-theme='neo'] .sv-leaderboard-table :is(.sv-leaderboard-col-change, .sv-leaderboard-cell-change) { width: 76px; text-align: center !important; }
[data-theme='neo'] .sv-leaderboard-table tbody tr + tr { border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-leaderboard-table tbody tr { transition: background-color .15s; }
[data-theme='neo'] .sv-leaderboard-table tbody tr:hover { background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-leaderboard-table tbody :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: middle; }
[data-theme='neo'] .sv-leaderboard-table tbody th { font-weight: inherit; }
[data-theme='neo'] .sv-leaderboard-rank { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 7px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface);
  font-family: var(--sv-display); font-size: 15px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-leaderboard-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-theme='neo'] .sv-leaderboard-who-text { display: grid; min-width: 0; }
[data-theme='neo'] .sv-leaderboard-name { font-weight: 800; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-leaderboard-sub { display: none; font-size: 12px; font-weight: 600; color: var(--sv-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme='neo'] .sv-leaderboard-cell-game { color: var(--sv-ink-2); white-space: nowrap; }
[data-theme='neo'] .sv-leaderboard-cell-tx { color: var(--sv-ink-2); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-leaderboard-tx-unit { display: none; }
[data-theme='neo'] .sv-leaderboard-cell-total { font-family: var(--sv-display); font-size: 15.5px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

[data-theme='neo'] .sv-leaderboard-note { padding: 0 4px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-leaderboard-empty { padding: 40px 20px; text-align: center; }
[data-theme='neo'] .sv-leaderboard-empty-title { font-family: var(--sv-display); font-size: 19px; font-weight: 700; }
[data-theme='neo'] .sv-leaderboard-empty-text { margin-top: 4px; font-size: 14px; color: var(--sv-ink-2); }

/* Aside: CTA (white card with the primary offset shadow) + rules */
[data-theme='neo'] .sv-leaderboard-aside { display: grid; gap: 18px; align-content: start; min-width: 0; }
[data-theme='neo'] .sv-leaderboard-cta { position: relative; overflow: hidden; padding: 22px; border-radius: var(--sv-radius-lg); background: var(--sv-surface); box-shadow: 6px 6px 0 var(--primary); }
[data-theme='neo'] .sv-leaderboard-cta-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: var(--nb-b); background: var(--nb-pink); color: var(--nb-on-accent); box-shadow: 2px 2px 0 var(--sv-ink); transform: rotate(-4deg); }
[data-theme='neo'] .sv-leaderboard-cta-icon svg { width: 22px; height: 22px; }
[data-theme='neo'] .sv-leaderboard-cta-title { margin-top: 16px; font-family: var(--sv-display); font-size: 23px; line-height: 1.12; font-weight: 700; letter-spacing: -0.035em; color: var(--sv-ink); text-wrap: balance; }
[data-theme='neo'] .sv-leaderboard-cta-text { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); text-wrap: pretty; }
[data-theme='neo'] .sv-leaderboard-cta-text strong { font-weight: 800; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-leaderboard-cta-btn { margin-top: 18px; }
[data-theme='neo'] .sv-leaderboard-cta-btn svg { width: 18px; height: 18px; }
[data-theme='neo'] .sv-leaderboard-rules { padding: 18px 20px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-leaderboard-rules-title { margin-bottom: 12px; font-family: var(--sv-display); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); }
[data-theme='neo'] .sv-leaderboard-rules-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-leaderboard-rules-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-leaderboard-rules-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--sv-primary-ink); stroke-width: 2.3; }

@media (min-width: 1024px) {
  [data-theme='neo'] .sv-leaderboard-body { grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; }
  [data-theme='neo'] .sv-leaderboard-aside { position: sticky; top: calc(var(--sv-header-offset, 124px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  [data-theme='neo'] .sv-leaderboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  [data-theme='neo'] .sv-leaderboard-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  [data-theme='neo'] .sv-leaderboard-periods { display: flex; }
  [data-theme='neo'] .sv-leaderboard-periods .sv-segtab { flex: 1 0 auto; min-height: 44px; padding: 0 12px; }

  [data-theme='neo'] .sv-leaderboard-stage { padding: 16px 10px 0; border-width: 2px; border-radius: 20px; box-shadow: var(--sv-shadow); }
  [data-theme='neo'] .sv-leaderboard-stage-title { padding-inline: 6px; font-size: 18px; }
  [data-theme='neo'] .sv-leaderboard-podium { gap: 6px; margin-top: 10px; }
  [data-theme='neo'] .sv-leaderboard-podium-person { gap: 2px; padding: 0 2px 12px; }
  [data-theme='neo'] .sv-leaderboard-podium-figure { margin: 16px 0 14px; }
  [data-theme='neo'] .sv-leaderboard-avatar[data-size='lg'] { width: 52px; height: 52px; font-size: 16px; }
  [data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 64px; height: 64px; font-size: 19px; }
  [data-theme='neo'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { border-width: 2px; box-shadow: 3px 3px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-leaderboard-crown { top: -22px; width: 22px; height: 22px; }
  [data-theme='neo'] .sv-leaderboard-medal { min-width: 26px; height: 24px; bottom: -10px; padding: 0 6px; font-size: 13px; }
  [data-theme='neo'] .sv-leaderboard-podium-name { font-size: 13px; }
  [data-theme='neo'] .sv-leaderboard-podium-total, [data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 15.5px; }
  [data-theme='neo'] .sv-leaderboard-amount-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-theme='neo'] .sv-leaderboard-amount-short { display: inline; }
  [data-theme='neo'] .sv-leaderboard-podium-meta { flex-direction: column; gap: 4px; font-size: 12px; }
  [data-theme='neo'] .sv-leaderboard-podium-meta .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 7px; font-size: 11px; }
  [data-theme='neo'] .sv-leaderboard-podium-game { height: 24px; padding: 0 8px; gap: 4px; margin-top: 4px; font-size: 11px; }
  [data-theme='neo'] .sv-leaderboard-podium-game svg { display: none; }
  [data-theme='neo'] .sv-leaderboard-podium-step { height: 30px; border-width: 2px; border-radius: 14px 14px 0 0; }
  [data-theme='neo'] .sv-leaderboard-podium-step span { font-size: 20px; }
  [data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 48px; }
  [data-theme='neo'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 24px; }
  [data-theme='neo'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 38px; }

  [data-theme='neo'] .sv-leaderboard-list-head { padding: 14px 16px; }
  [data-theme='neo'] .sv-leaderboard-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-theme='neo'] .sv-leaderboard-table, [data-theme='neo'] .sv-leaderboard-table tbody { display: block; }
  [data-theme='neo'] .sv-leaderboard-table tbody tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "rank who total total" "rank who tx change";
    column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; }
  [data-theme='neo'] .sv-leaderboard-table tbody :is(th, td) { padding: 0; }
  [data-theme='neo'] .sv-leaderboard-table :is(.sv-leaderboard-cell-rank, .sv-leaderboard-cell-change) { width: auto; }
  [data-theme='neo'] .sv-leaderboard-table .sv-leaderboard-cell-total { justify-self: end; }
  [data-theme='neo'] .sv-leaderboard-table .sv-leaderboard-cell-tx { grid-area: tx; justify-self: end; font-size: 12px; font-weight: 700; color: var(--sv-ink-2); white-space: nowrap; }
  [data-theme='neo'] .sv-leaderboard-tx-unit { display: inline; }
  [data-theme='neo'] .sv-leaderboard-cell-rank { grid-area: rank; }
  [data-theme='neo'] .sv-leaderboard-cell-name { grid-area: who; min-width: 0; }
  [data-theme='neo'] .sv-leaderboard-cell-total { grid-area: total; font-size: 14.5px; }
  [data-theme='neo'] .sv-leaderboard-cell-change { grid-area: change; justify-self: end; }
  [data-theme='neo'] .sv-leaderboard-table .sv-leaderboard-cell-game { display: none; }
  [data-theme='neo'] .sv-leaderboard-rank { min-width: 30px; height: 30px; font-size: 13.5px; }
  [data-theme='neo'] .sv-leaderboard-who { gap: 10px; }
  [data-theme='neo'] .sv-leaderboard-who .sv-leaderboard-avatar { width: 34px; height: 34px; font-size: 12px; }
  [data-theme='neo'] .sv-leaderboard-sub { display: block; }
  [data-theme='neo'] .sv-leaderboard-table .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 7px; font-size: 11px; }
  [data-theme='neo'] .sv-leaderboard-cta { padding: 20px; box-shadow: 5px 5px 0 var(--primary); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='neo'] .sv-pricelist-live { animation: none; }
}


/* ───────── Shared: status tones, phone group, spinner ───────── */
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='ok']    { --tone-ink: var(--sv-ok);       --tone-soft: var(--nb-mint); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='err']   { --tone-ink: var(--sv-err);      --tone-soft: var(--nb-pink-soft); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='warn']  { --tone-ink: var(--sv-warn-ink); --tone-soft: var(--sv-warn-soft); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='info']  { --tone-ink: var(--sv-info-ink); --tone-soft: var(--sv-primary-soft); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='muted'] { --tone-ink: var(--sv-ink-2);    --tone-soft: var(--sv-surface-2); }

[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group { display: flex; align-items: stretch; min-width: 0; border: var(--nb-b); border-radius: var(--sv-radius-sm); background: var(--sv-surface); overflow: hidden; transition: box-shadow .15s; }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group:focus-within { box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-prefix { display: grid; place-items: center; padding: 0 14px; border-right: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-ink); font-family: var(--sv-display); font-size: 15px; font-weight: 700; }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input:focus { box-shadow: none; }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Busy (submitting) keeps the brand colour; only a truly unavailable button greys out. */
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn--primary[aria-busy='true']:disabled { background: var(--primary); color: var(--sv-on-primary); border-style: solid; opacity: 0.85; cursor: progress; }
[data-theme='neo'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-spin { animation: sv-acct-spin 0.9s linear infinite; }
@keyframes sv-acct-spin { to { transform: rotate(360deg); } }

/* ───────── Cek Transaksi ───────── */
[data-theme='neo'] .sv-track-head { margin-bottom: 28px; }
[data-theme='neo'] .sv-track-layout { display: grid; gap: 20px; align-items: start; }
[data-theme='neo'] .sv-track-form { display: grid; gap: 16px; padding: 22px; border-radius: var(--sv-radius-lg); box-shadow: 6px 6px 0 var(--primary); }
[data-theme='neo'] .sv-track-assure { display: grid; gap: 10px; margin: 2px 0 0; padding: 16px 0 0; list-style: none; border-top: 2px solid var(--sv-surface-3); font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-track-assure li { display: flex; align-items: flex-start; gap: 9px; }
[data-theme='neo'] .sv-track-assure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--sv-ok); stroke-width: 2.4; }
[data-theme='neo'] .sv-track-assure a { font-weight: 800; color: var(--sv-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }

[data-theme='neo'] .sv-track-results { min-width: 0; }
[data-theme='neo'] .sv-track-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 16px; }
[data-theme='neo'] .sv-track-results-title { font-family: var(--sv-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-track-results-sub { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-track-list { display: grid; gap: 16px; }

/* Status guide (before searching) */
[data-theme='neo'] .sv-track-guide { padding: 22px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-track-guide-title { font-family: var(--sv-display); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-track-guide-sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-track-guide-list { display: grid; margin: 14px 0 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-track-guide-list li { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-track-guide-list li:last-child { padding-bottom: 0; }
[data-theme='neo'] .sv-track-guide-list p { font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-track-guide-list .sv-order-status { justify-self: start; }

/* Error + empty */
[data-theme='neo'] .sv-track-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--nb-pink-soft); border: var(--nb-b); color: var(--sv-ink); }
[data-theme='neo'] .sv-track-alert > svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; color: var(--sv-err); }
[data-theme='neo'] .sv-track-alert-title { font-family: var(--sv-display); font-size: 17px; font-weight: 700; }
[data-theme='neo'] .sv-track-alert-text { margin-top: 2px; font-size: 13.5px; color: var(--sv-ink); }
[data-theme='neo'] .sv-track-empty { display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 5vw, 44px) 22px; text-align: center; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-track-empty-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 18px; border: var(--nb-b); background: var(--nb-pink); color: var(--nb-on-accent); box-shadow: 3px 3px 0 var(--sv-ink); transform: rotate(-4deg); }
[data-theme='neo'] .sv-track-empty-icon svg { width: 26px; height: 26px; }
[data-theme='neo'] .sv-track-empty-title { font-family: var(--sv-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); text-wrap: balance; }
[data-theme='neo'] .sv-track-empty-text { max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-track-empty .sv-btn { margin-top: 10px; }

/* Order card */
[data-theme='neo'] .sv-order { padding: 18px 20px 0; background: var(--sv-surface); border: var(--nb-b); border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-order-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; }
[data-theme='neo'] .sv-order-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; border: var(--nb-b); background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-display); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
[data-theme='neo'] .sv-order-titles { min-width: 0; }
[data-theme='neo'] .sv-order-game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sv-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-product { margin-top: 2px; font-family: var(--sv-display); font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; color: var(--sv-ink); }
[data-theme='neo'] .sv-order-status { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 10px; border-radius: var(--sv-pill); font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: var(--tone-soft); color: var(--sv-ink); border: var(--nb-b); }
[data-theme='neo'] .sv-order-status svg { width: 15px; height: 15px; flex-shrink: 0; }
[data-theme='neo'] .sv-order-status[data-status='processing'] svg { animation: sv-acct-spin 2.4s linear infinite; }
[data-theme='neo'] .sv-order-note { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; padding: 10px 10px 10px 14px; border-radius: var(--sv-radius-sm); background: var(--sv-surface-2); font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-help { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: var(--sv-pill); background: var(--sv-surface); border: var(--nb-b); font-size: 13px; font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-order-help svg { width: 16px; height: 16px; }
/* Progress: dipesan → pembayaran → pengiriman */
[data-theme='neo'] .sv-order-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-order-step { position: relative; display: grid; align-content: start; gap: 1px; min-width: 0; padding-right: 10px; }
[data-theme='neo'] .sv-order-step:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: 36px; right: 10px; height: 0; border-top: 2px dashed var(--sv-ink-3); }
[data-theme='neo'] .sv-order-step[data-state='done']:not(:last-child)::after { border-top: 2px solid var(--sv-ink); }
[data-theme='neo'] .sv-order-step-dot { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 999px; border: var(--nb-b); background: var(--tone-soft); color: var(--sv-ink); box-sizing: border-box; }
[data-theme='neo'] .sv-order-step-dot svg { width: 13px; height: 13px; stroke-width: 2.6; }
[data-theme='neo'] .sv-order-step[data-state='done'] .sv-order-step-dot { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-order-step[data-state='current'] .sv-order-step-dot { background: var(--tone-soft); box-shadow: 2px 2px 0 var(--sv-ink); }
[data-theme='neo'] .sv-order-step[data-state='current'][data-step='delivery'] .sv-order-step-dot svg { animation: sv-acct-spin 2.4s linear infinite; }
[data-theme='neo'] .sv-order-step[data-state='idle'] .sv-order-step-dot { background: var(--sv-surface); border-style: dashed; }
[data-theme='neo'] .sv-order-step-label { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-step-value { font-size: 13.5px; line-height: 1.35; font-weight: 800; color: var(--sv-ink); }
[data-theme='neo'] .sv-order-step[data-step='ordered'] .sv-order-step-value { font-weight: 600; color: var(--sv-ink); }
[data-theme='neo'] .sv-order-step[data-state='idle'] .sv-order-step-value { font-weight: 600; color: var(--sv-ink-2); }

/* ID, method, serial */
[data-theme='neo'] .sv-order-meta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px 28px; margin: 16px 0 0; padding: 14px 0; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-order-cell { display: grid; align-content: start; gap: 6px; min-width: 0; }
[data-theme='neo'] .sv-order-cell--wide { grid-column: 1 / -1; }
[data-theme='neo'] .sv-order-cell dt { font-size: 12px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-cell dd { min-width: 0; font-size: 14px; font-weight: 600; color: var(--sv-ink); }
[data-theme='neo'] .sv-order-copyrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-theme='neo'] .sv-order-id { flex: 1; min-width: 0; font-family: var(--sv-display); font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-order-copy { position: relative; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 36px; padding: 0 12px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); font-size: 12.5px; font-weight: 800; color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-order-copy::after { content: ''; position: absolute; inset: -4px; }
[data-theme='neo'] .sv-order-copy svg { width: 14px; height: 14px; }
[data-theme='neo'] .sv-order-method { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
[data-theme='neo'] .sv-order-method-logo { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 30px; padding: 4px 6px; border-radius: 10px; border: var(--nb-b-soft); background: #fff; }
[data-theme='neo'] .sv-order-method-logo img { width: 100%; height: 100%; object-fit: contain; }
[data-theme='neo'] .sv-order-method-logo--icon { color: var(--sv-primary-ink); background: var(--sv-primary-soft); }
[data-theme='neo'] .sv-order-method-logo--icon svg { width: 16px; height: 16px; }
[data-theme='neo'] .sv-order-muted { font-size: 13px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 16px; border-top: 2px dashed var(--sv-ink); }
[data-theme='neo'] .sv-order-foot span { font-size: 13.5px; font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-order-foot strong { font-family: var(--sv-display); font-size: 24px; font-weight: 700; letter-spacing: -0.035em; color: var(--sv-ink); font-variant-numeric: tabular-nums; }

[data-theme='neo'] .sv-order--skeleton { padding-bottom: 18px; border-color: var(--sv-line); }
[data-theme='neo'] .sv-order--skeleton .sv-order-head { grid-template-columns: auto minmax(0, 1fr); }
[data-theme='neo'] .sv-order-sk { display: block; height: 12px; border-radius: var(--sv-pill); width: 70%; }
[data-theme='neo'] .sv-order-sk--short { width: 32%; margin-bottom: 8px; }
[data-theme='neo'] .sv-order-sk--note { width: 100%; height: 40px; margin-top: 14px; border-radius: var(--sv-radius-sm); }
[data-theme='neo'] .sv-order-sk--row { width: 100%; height: 14px; margin-top: 16px; }
[data-theme='neo'] .sv-order-sk--track { width: 100%; height: 44px; margin-top: 18px; }

/* ───────── Masuk / Daftar ───────── */
[data-theme='neo'] .sv-auth { padding-block: clamp(20px, 5vw, 56px) clamp(48px, 8vw, 96px); }
[data-theme='neo'] .sv-auth-shell { display: grid; max-width: 460px; margin-inline: auto; }
[data-theme='neo'] .sv-auth-aside { display: none; }
[data-theme='neo'] .sv-auth-card { min-width: 0; padding: 28px 24px 24px; background: var(--sv-surface); border: var(--nb-b-thick); border-radius: 24px; box-shadow: var(--nb-shadow-xl); }
[data-theme='neo'] .sv-auth-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-theme='neo'] .sv-auth-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; object-fit: cover; }
[data-theme='neo'] .sv-auth-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 19px; font-weight: 700; }
[data-theme='neo'] .sv-auth-store { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sv-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--sv-ink); }
[data-theme='neo'] .sv-auth-title { margin-top: 22px; font-family: var(--sv-display); font-size: clamp(30px, 3.4vw, 38px); line-height: 1.04; font-weight: 700; letter-spacing: -0.045em; color: var(--sv-ink); }
[data-theme='neo'] .sv-auth-sub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--sv-ink-2); }

/* Masuk / Daftar switch: pill track, active = ink pill */
[data-theme='neo'] .sv-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 20px; padding: 4px; border-radius: var(--sv-pill); background: var(--sv-surface); border: var(--nb-b); }
[data-theme='neo'] .sv-segmented-tab { min-height: 44px; border: 0; border-radius: var(--sv-pill); background: transparent; font-family: var(--sv-display); font-size: 15.5px; font-weight: 700; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
[data-theme='neo'] .sv-segmented-tab:hover { color: var(--sv-ink); background: var(--sv-surface-2); }
[data-theme='neo'] .sv-segmented-tab[aria-selected='true'] { background: var(--sv-ink); color: var(--sv-bg); }

[data-theme='neo'] .sv-auth-form { display: grid; gap: 16px; margin-top: 20px; }
[data-theme='neo'] .sv-auth-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); background: var(--nb-pink-soft); border: var(--nb-b); color: var(--sv-ink); font-size: 13.5px; line-height: 1.45; font-weight: 700; }
[data-theme='neo'] .sv-auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--sv-err); }
[data-theme='neo'] .sv-input-toggle { display: grid; place-items: center; flex-shrink: 0; width: 48px; border: 0; border-left: var(--nb-b); background: var(--sv-surface-2); color: var(--sv-ink); cursor: pointer; transition: background-color .15s; }
[data-theme='neo'] .sv-input-toggle:hover, [data-theme='neo'] .sv-input-toggle[aria-pressed='true'] { background: var(--sv-primary-soft); color: var(--sv-ink); }
[data-theme='neo'] .sv-input-toggle svg { width: 19px; height: 19px; }
[data-theme='neo'] .sv-auth-form .sv-btn--primary { margin-top: 4px; min-height: 52px; box-shadow: var(--sv-shadow); }
[data-theme='neo'] .sv-auth-switch { text-align: center; font-size: 14px; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-auth-switch button { min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 800; color: var(--sv-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }
[data-theme='neo'] .sv-auth-legal { font-size: 12.5px; line-height: 1.55; text-align: center; color: var(--sv-ink-2); text-wrap: balance; }
[data-theme='neo'] .sv-auth-legal a { font-weight: 800; color: var(--sv-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }
[data-theme='neo'] .sv-auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 2px solid var(--sv-surface-3); font-size: 12.5px; font-weight: 700; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-auth-trust li { display: inline-flex; align-items: center; gap: 6px; }
[data-theme='neo'] .sv-auth-trust svg { width: 15px; height: 15px; color: var(--sv-ok); }

@media (min-width: 960px) {
  [data-theme='neo'] .sv-auth-shell { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); background: var(--sv-surface); border: var(--nb-b-thick); border-radius: 28px; box-shadow: var(--nb-shadow-xl); overflow: hidden; }
  /* Aside = the hero band: primary, faint grid, lighter circle, text on primary. */
  [data-theme='neo'] .sv-auth-aside { order: -1; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; overflow: hidden; border-right: var(--nb-b-thick);
    background: radial-gradient(circle calc(130px + 2.5px) at calc(100% - 18px) 18px, var(--nb-primary-2) calc(130px - 0.5px), var(--sv-ink) 130px calc(130px + 2.5px - 0.5px), transparent calc(130px + 2.5px)) no-repeat, linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px) 0 0 / 44px 44px, var(--primary); color: var(--sv-on-primary); }
  [data-theme='neo'] .sv-auth-aside .sv-section-kicker { height: 30px; padding: 0 13px; border: var(--nb-b); border-radius: var(--sv-pill); background: var(--sv-surface); color: var(--sv-ink); }
  [data-theme='neo'] .sv-auth-aside .sv-section-kicker svg { color: var(--sv-ink); }
  [data-theme='neo'] .sv-auth-aside-title { max-width: 14ch; margin-top: 4px; font-family: var(--sv-display); font-size: 42px; line-height: 1.02; font-weight: 700; letter-spacing: -0.05em; color: var(--sv-on-primary); text-wrap: balance; }
  [data-theme='neo'] .sv-auth-benefits { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
  [data-theme='neo'] .sv-auth-benefits li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; line-height: 1.5; color: var(--sv-on-primary); }
  [data-theme='neo'] .sv-auth-benefits strong { display: block; margin-bottom: 2px; font-size: 15.5px; font-weight: 800; color: var(--sv-on-primary); }
  [data-theme='neo'] .sv-auth-benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; border: var(--nb-b); background: var(--sv-surface); color: var(--sv-ink); box-shadow: 3px 3px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-auth-benefit-icon svg { width: 20px; height: 20px; }
  [data-theme='neo'] .sv-auth-card { padding: 44px 44px 32px; border: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 400px) {
  [data-theme='neo'] .sv-auth-card { padding: 22px 18px 20px; border-width: 2px; border-radius: 22px; box-shadow: 5px 5px 0 var(--sv-ink); }
  [data-theme='neo'] .sv-auth-title { margin-top: 18px; }
}

/* ───────── Pencarian ───────── */
[data-theme='neo'] .sv-search-head { margin-bottom: 20px; }
[data-theme='neo'] .sv-search-term { color: var(--sv-on-primary); background: var(--primary); padding: 0 8px; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-theme='neo'] .sv-search-count { font-weight: 600; }
[data-theme='neo'] .sv-search-form { display: flex; gap: 10px; max-width: 640px; margin-bottom: clamp(24px, 4vw, 36px); }
[data-theme='neo'] .sv-search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
[data-theme='neo'] .sv-search-field > svg { position: absolute; left: 17px; width: 18px; height: 18px; color: var(--sv-ink); stroke-width: 2.4; pointer-events: none; }
[data-theme='neo'] .sv-search-input { width: 100%; height: 50px; padding: 0 18px 0 46px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); font-size: 16px; font-weight: 500; color: var(--sv-ink); transition: box-shadow .15s; }
[data-theme='neo'] .sv-search-input::placeholder { color: var(--sv-ink-2); }
[data-theme='neo'] .sv-search-input:focus { outline: none; box-shadow: 3px 3px 0 var(--primary); }
[data-theme='neo'] .sv-search-form .sv-btn { min-height: 50px; padding: 0 24px; }
[data-theme='neo'] .sv-search-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 22px 24px; border-radius: var(--sv-radius-lg); }
[data-theme='neo'] .sv-search-empty-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; border: var(--nb-b); background: var(--nb-pink); color: var(--nb-on-accent); box-shadow: 3px 3px 0 var(--sv-ink); transform: rotate(-4deg); }
[data-theme='neo'] .sv-search-empty-icon svg { width: 26px; height: 26px; }
[data-theme='neo'] .sv-search-empty-title { font-family: var(--sv-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); overflow-wrap: anywhere; }
[data-theme='neo'] .sv-search-empty-text { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-search-empty-cta { flex-shrink: 0; }
[data-theme='neo'] .sv-search-suggest { margin-top: clamp(36px, 5vw, 56px); }

/* ───────── Legal (Kebijakan Privasi, Syarat & Ketentuan) ───────── */
[data-theme='neo'] .sv-legal-head { max-width: 820px; margin-bottom: clamp(24px, 3vw, 34px); }
[data-theme='neo'] .sv-legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-legal-meta li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--sv-surface); font-size: 13px; font-weight: 700; color: var(--sv-ink); }
[data-theme='neo'] .sv-legal-meta li:nth-child(2) { background: var(--nb-mint); color: var(--nb-on-accent); }
[data-theme='neo'] .sv-legal-meta svg { width: 15px; height: 15px; color: currentColor; }
[data-theme='neo'] .sv-legal-layout { display: grid; gap: 20px; align-items: start; }
[data-theme='neo'] .sv-legal-main { min-width: 0; }
[data-theme='neo'] .sv-legal-toc { display: none; }
[data-theme='neo'] .sv-legal-toc-title { margin-bottom: 10px; padding-left: 4px; font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-legal-toc-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-legal-toc-list a { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 2px solid transparent; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--sv-ink-2); transition: background-color .15s, color .15s, border-color .15s; }
[data-theme='neo'] .sv-legal-toc-list a:hover { background: var(--sv-surface); border-color: var(--sv-ink); color: var(--sv-ink); }
[data-theme='neo'] .sv-legal-toc-list a[aria-current] { background: var(--sv-ink); border-color: var(--sv-ink); color: var(--sv-bg); }
[data-theme='neo'] .sv-legal-toc-num { display: grid; place-items: center; flex-shrink: 0; min-width: 24px; height: 24px; margin-top: -2px; padding: 0 6px; border-radius: var(--sv-pill); background: var(--sv-surface); border: 1.5px solid var(--sv-ink); font-family: var(--sv-display); font-size: 12.5px; font-weight: 700; color: var(--sv-ink); font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-legal-toc-list a[aria-current] .sv-legal-toc-num { background: var(--primary); color: var(--sv-on-primary); border-color: var(--sv-bg); }

[data-theme='neo'] .sv-legal-toc-mobile details { margin-bottom: 14px; border: var(--nb-b); border-radius: 18px; background: var(--sv-surface); }
[data-theme='neo'] .sv-legal-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 18px; list-style: none; font-family: var(--sv-display); font-size: 16px; font-weight: 700; color: var(--sv-ink); cursor: pointer; }
[data-theme='neo'] .sv-legal-toc-mobile summary::-webkit-details-marker { display: none; }
[data-theme='neo'] .sv-legal-toc-mobile summary svg { width: 18px; height: 18px; color: var(--sv-ink); stroke-width: 2.4; transition: transform .2s; }
[data-theme='neo'] .sv-legal-toc-mobile details[open] summary svg { transform: rotate(180deg); }
[data-theme='neo'] .sv-legal-toc-count { font-weight: 600; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-legal-toc-mobile .sv-legal-toc-list { padding: 6px 6px 8px; border-top: 2px solid var(--sv-surface-3); }

[data-theme='neo'] .sv-legal-body { padding: clamp(22px, 4vw, 44px) clamp(18px, 4.4vw, 52px); border: var(--nb-b); border-radius: var(--sv-radius-lg); background: var(--sv-surface); }
[data-theme='neo'] .sv-legal-section { max-width: 68ch; scroll-margin-top: calc(var(--sv-header-bar-h, 72px) + 24px); font-size: 16.5px; line-height: 1.75; color: var(--sv-ink); }
[data-theme='neo'] .sv-legal-section + .sv-legal-section { margin-top: 30px; padding-top: 30px; border-top: 2px solid var(--sv-surface-3); }
[data-theme='neo'] .sv-legal-h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--sv-display); font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-legal-num { display: grid; place-items: center; flex-shrink: 0; min-width: 34px; height: 34px; padding: 0 9px; border-radius: var(--sv-pill); border: var(--nb-b); background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-display); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-theme='neo'] .sv-legal-section p + p, [data-theme='neo'] .sv-legal-section p + .sv-legal-list { margin-top: 10px; }
[data-theme='neo'] .sv-legal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
[data-theme='neo'] .sv-legal-list li { position: relative; padding-left: 24px; }
[data-theme='neo'] .sv-legal-list li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 10px; height: 10px; border-radius: 99px; border: 1.5px solid var(--sv-ink); background: var(--primary); box-sizing: border-box; }

/* Help card: white with the primary offset shadow (same as the flash panel) */
[data-theme='neo'] .sv-legal-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 22px; padding: 22px 24px; border-radius: var(--sv-radius-lg);
  border: var(--nb-b); background: var(--sv-surface); box-shadow: 6px 6px 0 var(--primary); }
[data-theme='neo'] .sv-legal-help-title { font-family: var(--sv-display); font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--sv-ink); }
[data-theme='neo'] .sv-legal-help-text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); }
[data-theme='neo'] .sv-legal-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (min-width: 1024px) {
  [data-theme='neo'] .sv-track-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 30px; }
  [data-theme='neo'] .sv-track-side { position: sticky; top: calc(var(--sv-header-offset, 124px) + 16px); transition: top .32s cubic-bezier(.2, .7, .2, 1); }
  [data-theme='neo'] .sv-legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
  [data-theme='neo'] .sv-legal-toc { display: block; position: sticky; top: calc(var(--sv-header-offset, 124px) + 20px); transition: top .32s cubic-bezier(.2, .7, .2, 1); }
  [data-theme='neo'] .sv-legal-toc-mobile { display: none; }
  /* The header's wide search covers this on desktop. */
  [data-theme='neo'] .sv-search-form { display: none; }
}
@media (max-width: 640px) {
  [data-theme='neo'] .sv-track-head { margin-bottom: 20px; }
  [data-theme='neo'] .sv-track-form, [data-theme='neo'] .sv-track-guide { padding: 18px 16px; }
  [data-theme='neo'] .sv-track-form { box-shadow: 5px 5px 0 var(--primary); }
  [data-theme='neo'] .sv-track-guide-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  [data-theme='neo'] .sv-order { padding: 16px 16px 0; }
  [data-theme='neo'] .sv-order-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; }
  [data-theme='neo'] .sv-order-head .sv-order-status { grid-column: 2; justify-self: start; margin-top: 6px; }
  [data-theme='neo'] .sv-order-mark { width: 44px; height: 44px; font-size: 13px; border-radius: 14px; }
  [data-theme='neo'] .sv-order-note { flex-wrap: wrap; font-size: 14px; }
  [data-theme='neo'] .sv-order-help { min-height: 44px; }
  [data-theme='neo'] .sv-order-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-theme='neo'] .sv-order-step { padding-right: 6px; }
  [data-theme='neo'] .sv-order-step:not(:last-child)::after { left: 32px; right: 6px; }
  [data-theme='neo'] .sv-order-step-value { font-size: 13px; }
  [data-theme='neo'] .sv-search-form .sv-btn { padding: 0 18px; }
  [data-theme='neo'] .sv-search-empty { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px 18px; }
  [data-theme='neo'] .sv-search-empty-icon { width: 52px; height: 52px; }
  [data-theme='neo'] .sv-legal-section { font-size: 16px; line-height: 1.7; }
  [data-theme='neo'] .sv-legal-h2 { font-size: 20px; align-items: flex-start; }
  [data-theme='neo'] .sv-legal-num { min-width: 32px; height: 32px; font-size: 14px; }
  [data-theme='neo'] .sv-legal-help { padding: 20px 18px; box-shadow: 5px 5px 0 var(--primary); }
  [data-theme='neo'] .sv-legal-help-actions { width: 100%; }
  [data-theme='neo'] .sv-legal-help-actions .sv-btn { flex: 1 1 auto; }
}


[data-theme='neo'] :is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card), [data-theme='neo'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game), [data-theme='neo'] .sv-detail .sv-ticket, [data-theme='neo'] :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow) {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease; }
[data-theme='neo'] :is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card):is(:hover, :focus-visible) { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--nb-sh); }
[data-theme='neo'] :is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card):active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--nb-sh); }
[data-theme='neo'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game):hover:not(:disabled):not([aria-pressed='true']),
[data-theme='neo'] .sv-detail .sv-ticket:hover:not([data-applied]) {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--nb-sh); }
[data-theme='neo'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game):active:not(:disabled) { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--nb-sh); }
[data-theme='neo'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game)[aria-pressed='true'],
[data-theme='neo'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game)[aria-pressed='true']:hover,
[data-theme='neo'] .sv-detail .sv-ticket[data-applied] {
  transform: none; border-color: var(--primary); background-color: var(--sv-primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary), 3px 3px 0 var(--sv-ink); }
[data-theme='neo'] :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow):hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--nb-sh); }
[data-theme='neo'] :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow):active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--nb-sh); }
/* Brand-filled buttons keep an ink shadow: a primary shadow would merge with the fill. */
[data-theme='neo'] :is(.sv-btn--primary, .sv-nav-btn--primary):hover:not(:disabled) { box-shadow: 5px 5px 0 var(--sv-ink); }
[data-theme='neo'] :is(.sv-btn--primary, .sv-nav-btn--primary):active:not(:disabled) { box-shadow: 1px 1px 0 var(--sv-ink); }
[data-theme='neo'] :is(:is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card), :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game), :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow)) svg { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-theme='neo'] :is(:is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card), :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game), .sv-detail .sv-ticket, :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow)),
  [data-theme='neo'] :is(:is(.sv-flash-card, a.sv-trend-card, .sv-article-card-link, .sv-joki-card, a.sv-game-card, a.sv-voucher-card), :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game), .sv-detail .sv-ticket, :is(.sv-btn, .sv-nav-btn, .sv-collapse-toggle, .sv-order-help, .sv-order-copy, .sv-pricelist-buy, .sv-dialog-close, .sv-joki-dialog-close, .sv-more-close, .sv-rail-btn, .sv-hero-arrow)):is(:hover, :focus-visible, :active, [aria-pressed='true'], [data-applied]) { transform: none !important; }
}