/* ==========================================================================
   Solana Hub — design system
   Near-black canvas, hairline structure, one crimson accent.
   Type: Archivo (everything) / JetBrains Mono (keys and code).
   ========================================================================== */

:root {
  --bg:          #08080A;
  --bg-2:        #0B0B0E;
  --surface:     #101014;
  --surface-2:   #16161B;
  --line:        rgba(255, 255, 255, .075);
  --line-2:      rgba(255, 255, 255, .16);
  --text:        #F3F2EF;
  --muted:       #8A8A93;
  --muted-2:     #63636B;

  --accent:      #8E2B34;
  --accent-hi:   #C4484A;
  --accent-soft: rgba(142, 43, 52, .16);

  --ok:          #46A06E;
  --warn:        #C79A3A;
  --bad:         #C24B4B;

  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   22px;

  --shadow:      0 24px 60px -24px rgba(0, 0, 0, .85);
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);

  --wrap:        1180px;
  --nav-h:       68px;

  /* Two families, not three. Archivo carries the whole interface; JetBrains
     Mono is reserved for keys and code, where the alignment actually matters. */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute only sets display:none in the UA stylesheet, so
   any author rule that sets display wins over it. .sheet, .maker__grid
   and .pay__body all do, which left the edit-license sheet painted over
   the whole page: it swallowed every click, and its own close button set
   hidden=true with no visible effect. One rule here fixes the current
   cases and every future one, so the per-class patches this file already
   carries for .tabpane / .who / .who__badge stay harmless. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -.01em; }
p { margin: 0; }
/* No blue tap flash and no stray text selection when a button is hit.
   Chrome paints -webkit-tap-highlight-color by default on touch, and a fast
   double tap selects the label, which is what made the buttons look broken. */
/* NO-SLOP-SELECTION
   Selecting text anywhere showed the browser's default blue highlight, which
   is the one colour that does not belong on this page. Matched to the accent
   on both engines, and every interactive surface opts out of selection
   entirely so a double tap cannot flash a block of blue over a button. */
::selection { background: rgba(196, 72, 74, .34); color: var(--text); }
::-moz-selection { background: rgba(196, 72, 74, .34); color: var(--text); }
*::selection { background: rgba(196, 72, 74, .34); color: var(--text); }
*::-moz-selection { background: rgba(196, 72, 74, .34); color: var(--text); }
/* Applied to every element, not just the ones that existed when this rule
   was written. A selector list of hand-picked classes means anything added
   later flashes the default blue, and on a dark page that flash is the one
   thing that reads as "broken". */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn, .icon-btn, .tabbar__tab, .chip, .who__av, .who__link, .catalog__more, .sd-nav a,
.ms__control, .ms__opt, .ms__chip button, .ms__link {
  -webkit-user-select: none;
  user-select: none;
}

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- atmosphere ---------------------------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.beam {
  position: fixed; top: -30vh; left: 50%; z-index: 0;
  width: min(1100px, 130vw); height: 70vh; pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(48% 46% at 50% 50%, rgba(142, 43, 52, .20), transparent 70%),
    radial-gradient(34% 34% at 22% 62%, rgba(70, 160, 110, .09), transparent 70%),
    radial-gradient(30% 30% at 78% 44%, rgba(196, 72, 74, .10), transparent 70%);
  filter: blur(28px);
  animation: drift 26s var(--ease) infinite alternate;
}

@keyframes drift {
  from { transform: translate(-52%, 0) scale(1); opacity: .75; }
  to   { transform: translate(-48%, 4vh) scale(1.08); opacity: 1; }
}

main, .nav, .foot { position: relative; z-index: 1; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap--narrow { max-width: 460px; }
.center { text-align: center; }

.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .9em; }

/* --- reveal on scroll ---------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out) var(--d, 0s),
              transform .8s var(--ease-out) var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--text);
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .35s var(--ease), background .25s, border-color .25s,
              box-shadow .35s var(--ease), opacity .2s;
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.btn--solid {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 26px -12px rgba(196, 72, 74, .85);
}
.btn--solid:hover { box-shadow: 0 18px 34px -14px rgba(196, 72, 74, .95); }

.btn--ghost { background: rgba(255, 255, 255, .03); }
.btn--ghost:hover { background: rgba(255, 255, 255, .07); }

.btn--danger { background: rgba(194, 75, 75, .12); border-color: rgba(194, 75, 75, .4); color: #F0B4B4; }
.btn--danger:hover { background: rgba(194, 75, 75, .2); border-color: rgba(194, 75, 75, .7); }

.btn--lg { padding: 14px 26px; font-size: 15.5px; }
.btn--sm { padding: 8px 14px; font-size: 13.5px; }
.btn--block { width: 100%; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-2); background: rgba(255, 255, 255, .05); }
.icon-btn svg { width: 16px; height: 16px; stroke-width: 1.75; }

/* --- nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.is-stuck {
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 100%; }

.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.brand__mark--lg { width: 46px; height: 46px; border-radius: 12px; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }

.nav__links { display: flex; gap: 26px; margin-right: auto; }
.nav__links a {
  position: relative; font-size: 14.5px; color: var(--muted);
  transition: color .2s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--accent-hi);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; gap: 10px; }

/* --- hero ---------------------------------------------------------------- */
.hero { padding: clamp(56px, 9vw, 118px) 0 clamp(40px, 6vw, 72px); }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.7vw, 64px);
  line-height: 1.03; letter-spacing: -.035em;
  margin: 20px 0 0;
}
.hero__title em, h1 em, h2 em, h3 em {
  font-weight: 800;
  background: linear-gradient(96deg, var(--accent-hi), #E8A9A4 62%, var(--accent-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede {
  margin-top: 22px; max-width: 52ch;
  font-size: clamp(15.5px, 1.35vw, 17.5px); color: var(--muted);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: 30px;
  margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line);
}
.hero__proof dt {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
}
.hero__proof dd { margin: 4px 0 0; font-size: 14.5px; color: var(--text); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--center { justify-content: center; }
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dot--live { background: var(--ok); box-shadow: 0 0 0 3px rgba(70, 160, 110, .18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- cards --------------------------------------------------------------- */
.card {
  position: relative;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)), var(--surface);
  box-shadow: var(--shadow);
}
.card--glow::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(196, 72, 74, .55), transparent 42%, transparent 62%, rgba(70, 160, 110, .32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 12.5px; color: var(--muted);
}

.code {
  margin: 0; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #07070A;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85;
  overflow-x: auto; color: var(--muted);
}
.c-key { color: #7FB2E8; }
.c-str { color: #C7E39B; }
.c-brace { color: #5A5A64; }
.c-true { color: #6FCF97; }
.c-out { color: var(--accent-hi); }

.card__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.card__list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ok); flex-shrink: 0; stroke-width: 1.75; }

/* --- stats --------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 7vw, 84px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .018);
  overflow: hidden;
}
.stat { padding: 26px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 40px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__num--text { font-size: clamp(28px, 3.4vw, 38px); }
.stat__label { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.stat__note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted-2); }

/* --- landing tabs -------------------------------------------------------- */
.tabbar {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .022);
  width: fit-content; max-width: 100%;
}
.tabbar__tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color .2s, background .25s var(--ease);
}
.tabbar__tab svg { width: 16px; height: 16px; stroke-width: 1.9; }
.tabbar__tab:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.tabbar__tab.is-on {
  color: var(--text);
  background: linear-gradient(180deg, rgba(196, 72, 74, .22), rgba(142, 43, 52, .30));
  box-shadow: inset 0 0 0 1px rgba(196, 72, 74, .45);
}
.tabpane[hidden] { display: none; }
.tabpane { animation: tabin .34s var(--ease-out); }
@keyframes tabin {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --- sections ------------------------------------------------------------ */
.section { padding: clamp(64px, 9vw, 118px) 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .018) 30%, rgba(255, 255, 255, .018) 70%, transparent); }

.sechead { max-width: 620px; margin-bottom: clamp(36px, 5vw, 60px); }
.sechead--center { margin-inline: auto; text-align: center; }
.sechead h2, .cta h2, .checker h2, .pay h2, .lookup h2, .admin h1, .auth h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 43px); line-height: 1.1; letter-spacing: -.03em;
  margin-top: 16px;
}
.sechead__sub { margin-top: 16px; color: var(--muted); font-size: 16px; max-width: 54ch; }
.sechead--center .sechead__sub { margin-inline: auto; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* --- tiles --------------------------------------------------------------- */
.tile {
  position: relative; padding: 26px 24px 28px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(320px 180px at var(--mx, 50%) var(--my, 0%), rgba(196, 72, 74, .13), transparent 70%);
  opacity: 0; transition: opacity .45s; pointer-events: none;
}
.tile:hover { transform: translateY(-4px); border-color: var(--line-2); }
.tile:hover::after { opacity: 1; }
.tile__icon {
  width: 34px; height: 34px; padding: 8px; margin-bottom: 18px;
  border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--accent-hi); background: rgba(196, 72, 74, .07);
  stroke-width: 1.5;
}
.tile h3 { font-size: 17px; font-weight: 500; letter-spacing: -.005em; }
.tile p { margin-top: 9px; color: var(--muted); font-size: 14.5px; }

/* --- steps --------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step {
  display: grid; grid-template-columns: 84px 1fr; gap: 26px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: background .4s;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--accent-hi); letter-spacing: .08em; padding-top: 4px;
}
.step h3 { font-size: 19px; font-weight: 500; }
.step p { margin-top: 7px; color: var(--muted); max-width: 62ch; font-size: 15px; }
.step:hover h3 { color: var(--accent-hi); transition: color .3s; }

/* --- checker ------------------------------------------------------------- */
.checker { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: 15px; }
.ticks svg { width: 17px; height: 17px; color: var(--ok); stroke-width: 2; }
.ticks--tight { margin: 18px 0 22px; gap: 9px; font-size: 14px; }

/* --- plans --------------------------------------------------------------- */
.plan {
  position: relative; padding: 30px 28px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent), var(--surface);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.plan.is-picked {
  border-color: rgba(196, 72, 74, .5);
  box-shadow: 0 0 0 1px rgba(196, 72, 74, .28), 0 26px 60px -30px rgba(196, 72, 74, .6);
}
.plan__flag {
  position: absolute; top: 18px; right: 20px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--accent-soft); border: 1px solid rgba(196, 72, 74, .35);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #F0A9A9;
}
.plan__name { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plan__price {
  margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.7vw, 40px); line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.plan__price span { font-family: var(--font-ui); font-size: 13.5px; color: var(--muted-2); margin-left: 8px; }
.plan__blurb { margin-top: 14px; color: var(--muted); font-size: 14.5px; }

/* --- forms --------------------------------------------------------------- */
.field { display: block; }
.field + .field { margin-top: 16px; }
.field__label {
  display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
}
.field__input {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #08080B; color: var(--text);
  font-size: 15px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field__input::placeholder { color: var(--muted-2); }
.field__input:focus {
  outline: none; border-color: rgba(196, 72, 74, .6);
  box-shadow: 0 0 0 3px rgba(142, 43, 52, .18);
  background: #0A0A0E;
}
select.field__input { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238A8A93' stroke-width='1.8'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.fineprint { margin-top: 14px; font-size: 12.5px; color: var(--muted-2); }

/* --- results ------------------------------------------------------------- */
.result {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .022);
  font-size: 14px;
  animation: pop .45s var(--ease-out);
}
.result--inline { margin-top: 0; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.result__head { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.result__head svg { width: 17px; height: 17px; stroke-width: 2; }
.result.is-ok { border-color: rgba(70, 160, 110, .4); background: rgba(70, 160, 110, .07); }
.result.is-ok .result__head { color: #8FD9B0; }
.result.is-bad { border-color: rgba(194, 75, 75, .4); background: rgba(194, 75, 75, .07); }
.result.is-bad .result__head { color: #EDA6A6; }
.result.is-warn { border-color: rgba(199, 154, 58, .4); background: rgba(199, 154, 58, .07); }
.result.is-warn .result__head { color: #E5C583; }
/* A warning line inside an otherwise successful card - the script saved, but
   the picture did not make it. */
.result__warn { color: #E5C583; font-weight: 500; margin-bottom: 10px; }
.result__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.result__grid dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.result__grid dd { margin: 4px 0 0; font-size: 14px; }

.result__key { margin: 16px 0 4px; word-break: break-all; }
.result__key .table__key code {
  font-size: 14px; letter-spacing: .02em;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .38); border: 1px solid var(--line);
}
.result p.muted { margin-top: 12px; font-size: 14px; }
/* --- roblox profile strip ------------------------------------------------ */
.who {
  display: flex; align-items: center; gap: 13px;
  margin-top: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(167, 139, 250, .06), transparent 55%), var(--surface);
}
.who[hidden] { display: none; }
.who__av {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .02em; color: var(--accent-hi);
  text-decoration: none;
}
.who__av img { width: 100%; height: 100%; object-fit: cover; }
.who__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.who__name {
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who__handle { font-size: 12.5px; color: var(--muted-2); }
.who__badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: #8FD9B0; background: rgba(70, 160, 110, .12);
  border: 1px solid rgba(70, 160, 110, .35);
}
.who__badge[hidden] { display: none; }
.who__badge svg { width: 13px; height: 13px; stroke-width: 2; }
.who__link {
  flex-shrink: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--muted-2); border: 1px solid var(--line);
  transition: color .2s, border-color .2s;
}
.who__link:not([href]) { display: none; }
.who__link:hover { color: var(--text); border-color: var(--line-2); }
.who__link[href] { color: var(--accent-hi); border-color: rgba(167, 139, 250, .35); }
.who__link svg { width: 14px; height: 14px; stroke-width: 2; }


/* --- page / buy ---------------------------------------------------------- */
.page { padding: clamp(48px, 7vw, 92px) 0 clamp(64px, 9vw, 110px); }
.page--tight { min-height: 68vh; display: grid; place-items: center; }
.plans--buy { margin-bottom: 34px; }

.pay {
  padding: clamp(24px, 3.4vw, 36px);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(196, 72, 74, .06), transparent 40%), var(--surface);
  box-shadow: var(--shadow);
  animation: rise .6s var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pay__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.pay__head h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 12px; }
.pay__body { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
/* the identity step is one column, not QR-beside-steps */
.pay__body--single { grid-template-columns: 1fr; }
.pay__note { color: var(--muted); font-size: 15px; max-width: 64ch; margin-bottom: 22px; }

.qr { text-align: center; }
.qr__frame {
  width: 244px; height: 244px; padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .9);
}
.qr__frame img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr__pending { display: grid; place-items: center; gap: 12px; color: #333; font-size: 13px; }
.qr__hint { margin-top: 14px; font-size: 12.5px; color: var(--muted-2); }

.pay__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.pay__steps li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.pay__n {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line-2); border-radius: 50%;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--accent-hi);
}
.pay__steps strong { font-weight: 500; font-size: 15.5px; }
.pay__steps p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.pay__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }

.lookup { margin-top: clamp(56px, 8vw, 92px); }
.lookup__copy { max-width: 560px; }
.lookup__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 26px; }
.lookup__form .btn { height: 50px; }

.notfound__code {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 12vw, 132px);
  line-height: .92; color: var(--line-2); letter-spacing: -.045em;
}
.page--tight h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 14px; }

/* --- staff sign-in: form on the right, context on the left ------------- */
.authsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  min-height: 100vh;
  min-height: 100svh;
}

.authsplit__aside {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(32px, 5vw, 72px);
  border-right: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 12% 18%, rgba(142, 43, 52, .26), transparent 68%),
    radial-gradient(56% 50% at 88% 82%, rgba(196, 72, 74, .14), transparent 70%),
    var(--bg-2);
  overflow: hidden;
}
/* a hairline grid so the panel reads as tooling, not decoration */
.authsplit__aside::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(72% 72% at 30% 40%, #000, transparent 78%);
  mask-image: radial-gradient(72% 72% at 30% 40%, #000, transparent 78%);
  opacity: .55;
}

.authsplit__aside-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  margin-inline: auto;
  display: grid; gap: clamp(28px, 4vw, 44px);
}

.authsplit__brand { display: flex; align-items: center; gap: 12px; }
.authsplit__brand .brand__name { font-size: 18px; }

.authsplit__pitch h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.02; letter-spacing: -.035em;
  margin: 16px 0 0;
}
.authsplit__pitch p {
  margin-top: 16px; color: var(--muted);
  font-size: 15.5px; max-width: 44ch;
}

.authsplit__stats {
  display: grid; gap: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.authsplit__stats > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.authsplit__stats dt {
  font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-2);
}
.authsplit__stats dd {
  margin: 0;
  font-family: var(--font-mono); font-size: 14.5px;
  font-variant-numeric: tabular-nums; color: var(--text);
}

.authsplit__foot { color: var(--muted-2); font-size: 13px; max-width: 46ch; }
.authsplit__foot code {
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .06); color: var(--text);
}

.authsplit__panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 5vw, 72px) clamp(22px, 4vw, 56px);
  background: var(--bg);
}
.authsplit__panel .auth { width: 100%; max-width: 384px; }
.auth__head--left { justify-items: start; text-align: left; }

/* --- auth ---------------------------------------------------------------- */
.auth { display: grid; gap: 22px; }
.auth__head { text-align: center; display: grid; justify-items: center; gap: 14px; }
.auth__head h1 { font-size: clamp(26px, 3.6vw, 34px); margin: 0; }
.auth__back { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font-size: 13.5px; color: var(--muted-2); }
.auth__back:hover { color: var(--muted); }
.auth__back svg { width: 15px; height: 15px; }

/* --- admin --------------------------------------------------------------- */
.admin {
  --gut: 20px;
  --gap: 16px;
  padding: clamp(26px, 3.4vw, 40px) 0 clamp(64px, 8vw, 96px);
}
.admin__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: var(--gap);
}
.admin__top h1 { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.02em; }
.admin__top .eyebrow { margin-bottom: 8px; }
.admin__top-actions { display: flex; gap: 8px; }

.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  margin-bottom: var(--gap);
}
.kpi {
  position: relative;
  padding: 15px var(--gut) 17px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--line-2);
}
.kpi__num {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 27px; line-height: 1; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.kpi__num--ok { color: #8FD9B0; }
.kpi__num--warn { color: #E5C583; }
.kpi__num--bad { color: #EDA6A6; }
.kpi__label {
  display: block; margin-bottom: 7px; order: -1;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500;
}
.kpi { display: flex; flex-direction: column; }

.panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--gap); overflow: hidden;
}
.panel--slim { padding-bottom: var(--gut); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gut); border-bottom: 1px solid var(--line);
}
.panel__head h2 {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 500; letter-spacing: -.005em;
}
.panel__head h2 svg { width: 17px; height: 17px; color: var(--muted); stroke-width: 1.75; }

.maker { padding: var(--gut); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .012); animation: pop .45s var(--ease-out); }
.maker__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; }
.maker .field + .field { margin-top: 0; }
.field--wide { grid-column: span 2; }
.field--action { display: flex; align-items: flex-end; }
.maker__foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gut); flex-wrap: wrap;
}
.search { position: relative; flex: 1 1 280px; max-width: 380px; }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-2); stroke-width: 1.75; }
.search__input {
  width: 100%; padding: 10px 14px 10px 40px;
  border: 1px solid var(--line); border-radius: 100px;
  background: #08080B; font-size: 14px;
  transition: border-color .25s, box-shadow .25s;
}
.search__input:focus { outline: none; border-color: rgba(196, 72, 74, .55); box-shadow: 0 0 0 3px rgba(142, 43, 52, .16); }

.tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 100px; }
.tab {
  padding: 5px 13px; border: 0; border-radius: 100px; background: transparent;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: background .2s, color .2s;
}
.tab:hover { color: var(--text); }
.tab.is-on { background: rgba(255, 255, 255, .09); color: var(--text); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  position: sticky; top: 0; z-index: 2;
  padding: 10px var(--gut); text-align: left; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 500;
  background: #0C0C10; border-bottom: 1px solid var(--line);
}
.table td { padding: 11px var(--gut); border-top: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background .2s; }
.table tbody tr:hover { background: rgba(255, 255, 255, .026); }
.table__empty td { padding: 44px 22px; text-align: center; color: var(--muted-2); }
.table__key { display: inline-flex; align-items: center; gap: 9px; }
.table__key code { font-family: var(--font-mono); font-size: 12.5px; }
.copy {
  border: 0; background: transparent; color: var(--muted-2); cursor: pointer;
  padding: 3px; border-radius: 5px; display: inline-grid; place-items: center;
  transition: color .2s, background .2s;
}
.copy:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.copy svg { width: 14px; height: 14px; stroke-width: 1.75; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  font-size: 11.5px; letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge--active { background: rgba(70, 160, 110, .12); border-color: rgba(70, 160, 110, .35); color: #8FD9B0; }
.badge--expired { background: rgba(199, 154, 58, .12); border-color: rgba(199, 154, 58, .35); color: #E5C583; }
.badge--banned, .badge--revoked { background: rgba(194, 75, 75, .12); border-color: rgba(194, 75, 75, .35); color: #EDA6A6; }
.badge .dot { width: 5px; height: 5px; box-shadow: none; }

/* --- sheet --------------------------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 6, .72); backdrop-filter: blur(6px);
  animation: fade .3s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet__panel {
  position: relative; width: min(440px, 100%);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: var(--bg-2); box-shadow: var(--shadow);
  animation: rise .45s var(--ease-out);
  max-height: 88vh; overflow-y: auto;
}
.sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2);
}
.sheet__head h3 { font-size: 15.5px; font-weight: 500; }
.sheet__body { padding: 20px; }
.sheet__body .field + .field { margin-top: 16px; }
.sheet__body .btn { margin-top: 22px; }
.sheet__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }

/* --- toast --------------------------------------------------------------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: grid; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 100px;
  background: var(--bg-2); box-shadow: var(--shadow); font-size: 14px;
  animation: toastIn .45s var(--ease-out);
}
.toast svg { width: 16px; height: 16px; stroke-width: 2; }
.toast.is-ok svg { color: var(--ok); }
.toast.is-bad svg { color: var(--bad); }
.toast.is-out { animation: toastOut .35s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }

.spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: clamp(44px, 6vw, 68px) 0 30px; background: rgba(255, 255, 255, .012); }
.foot__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; }
.foot__brand { display: flex; gap: 13px; align-items: flex-start; }
.foot__brand strong { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.foot__brand p { margin-top: 4px; color: var(--muted-2); font-size: 13.5px; }
.foot__cols { display: flex; gap: 60px; }
.foot__cols div { display: grid; gap: 10px; align-content: start; }
.foot__cols h4 {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 4px; font-weight: 500;
}
.foot__cols a { font-size: 14px; color: var(--muted); transition: color .2s; }
.foot__cols a:hover { color: var(--text); }
.foot__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted-2);
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1020px) {
  .hero__inner, .checker { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .maker__grid { grid-template-columns: repeat(2, 1fr); }
  .tabbar {
    width: 100%; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar__tab { flex: 0 0 auto; }
  .authsplit { grid-template-columns: 1fr; }
  .authsplit__aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .authsplit__panel { padding-block: clamp(40px, 8vw, 64px); }
  .pay__body { grid-template-columns: 1fr; justify-items: start; }
  .qr { justify-self: center; }
  .lookup__form { grid-template-columns: 1fr; }
}

/* --- admin: main loader -------------------------------------------------- */
.sc-code--tall { min-height: 420px; }
#loader-panel .fineprint code { color: var(--accent-hi); word-break: break-all; }

/* --- admin: scripts ----------------------------------------------------- */
.sc-code {
  min-height: 220px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.maker--stack { display: grid; gap: 14px; }
.sc-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sc-ep {
  font-size: 12px;
  color: var(--accent-hi);
  word-break: break-all;
}
.sc-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.sc-copy code { flex: 1; font-size: 12px; word-break: break-all; color: var(--text); }

/* The audit tabs wrap to a second line on narrow screens and the pill then
   sat half off the panel edge, so the row is allowed to scroll instead. */
.panel__head .tabs {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.panel__head .tabs::-webkit-scrollbar { display: none; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .btn--lg { padding: 12px 20px; font-size: 15px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 52px 1fr; gap: 16px; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__cols { gap: 40px; }
  .toolbar { align-items: stretch; }
  .search { max-width: none; }
  .tabs { overflow-x: auto; }
  .panel__head { padding: 13px 16px; }
  .table th, .table td { padding-inline: 14px; }
}

/* --- discord tag (admin panel) ------------------------------------------ */
.dtag {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit; max-width: 100%;
  border-radius: 9px; padding: 3px 6px 3px 3px; margin-left: -3px;
  transition: background .2s;
}
.dtag:hover { background: rgba(255, 255, 255, .05); }
.dtag__av {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.dtag__av img { width: 100%; height: 100%; object-fit: cover; }
.dtag__text { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.dtag__name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dtag__user {
  font-size: 11px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- touch: hover tidak boleh nempel ------------------------------------- */
.btn, .nav__links a, .foot__cols a, .tile, .icon-btn, .who__link { touch-action: manipulation; }
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn--solid:hover { box-shadow: 0 10px 26px -12px rgba(196, 72, 74, .85); }
  .btn--ghost:hover { background: rgba(255, 255, 255, .03); }
  .btn--danger:hover { background: rgba(194, 75, 75, .12); }
  .icon-btn:hover { color: var(--muted); background: transparent; }
  .nav__links a:hover { color: inherit; }
  .nav__links a:hover::after { transform: scaleX(0); }
  .foot__cols a:hover { color: var(--muted); }
  .tile:hover { transform: none; border-color: var(--line); }
  .tile:hover::after { opacity: 0; }
  .who__link:hover { color: var(--muted); border-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* --- product cards ------------------------------------------------------
   Storefront cards. Built from the same tokens as everything else: near-black
   surface, hairline border, crimson only where something is actionable. */
.product { display: flex; flex-direction: column; overflow: hidden; }
.product__shot {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(142, 43, 52, .30), transparent 62%),
    linear-gradient(180deg, #121218, #0A0A0E);
  border-bottom: 1px solid var(--line);
}
.product__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 10, .72));
}
.product__shot svg { width: 34px; height: 34px; color: var(--accent-hi); stroke-width: 1.5; opacity: .9; }
.product__shot--muted { background:
  radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .05), transparent 62%),
  linear-gradient(180deg, #101015, #0A0A0E); }
.product__shot--muted svg { color: var(--muted-2); }
.product__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
.product__body .card__head { padding: 0; border: 0; }
.product__name { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }

/* overflow-wrap: anywhere broke names mid-word ("Violence / District"), which
   reads as a bug rather than as a wrap. break-word only splits a word that
   genuinely cannot fit, so ordinary names stay on one line. */
.product__name { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
/* The badge never squeezes. If the card is too narrow for both, the head wraps
   and the badge drops to its own line on purpose instead of being shoved off
   the edge. */
.card__head { flex-wrap: wrap; row-gap: 6px; align-items: flex-start; }
.card__head > .badge { flex: 0 0 auto; }
.product__desc { font-size: 14px; color: var(--muted); line-height: 1.55; }
.product__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: auto; padding-top: 4px;
}
.product__meta dt {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 4px;
}
.product__meta dd { font-size: 13px; color: var(--text); }
.product--hero .product__shot { aspect-ratio: 21 / 9; }
.product--hero .product__body { padding: 16px 18px 18px; }

/* --- faq ---------------------------------------------------------------- */
.faq { display: grid; gap: 8px; max-width: 820px; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
  transition: border-color .2s, background .2s;
}
.faq__item:hover { border-color: var(--line-2); }
.faq__item[open] { background: #131318; border-color: var(--line-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 500;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item p {
  padding: 0 18px 16px; font-size: 14px; color: var(--muted); line-height: 1.6;
}

@media (max-width: 760px) {
  .product__meta { grid-template-columns: 1fr; gap: 8px; }
  .product__meta > div { display: flex; justify-content: space-between; gap: 12px; }
  .product__meta dt { margin-bottom: 0; }
  .product--hero .product__shot { aspect-ratio: 16 / 7; }
}

/* --- marketplace grid ---------------------------------------------------- */
/* Cards come from the panel, so the count is unknown at build time. Auto-fit
   gives three across on a wide screen and folds down without a breakpoint for
   every possible number of games. */
.shop-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.shop { display: flex; flex-direction: column; }
.shop .product__body { display: flex; flex-direction: column; flex: 1; }
.shop .product__desc { flex: 0 0 auto; }
.shop .btn { margin-top: auto; }
.shop__shot {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(142, 43, 52, .30), transparent 62%),
    var(--surface-2);
}
/* The endpoint is the thing a buyer copies, so it has to read as code. */
.shop .mono { font-family: var(--font-mono); font-size: 13px; }

/* ==========================================================================
   ADMIN-TIDY
   The panel was built desktop-first and fell apart on a phone: the action
   row wrapped under the title, the tables scrolled sideways with no cue,
   and every form field stayed four-across. Everything below fixes that
   without changing the desktop layout that already works.
   ========================================================================== */

/* --- one view on screen at a time ---------------------------------------- */
/* The panel is split into views and the drawer picks the visible one. The
   rule below is all that is left of the tab bar that used to switch them. */
.admin__view[hidden] { display: none; }

/* --- panel header: title and actions stay on one line -------------------- */
.admin .panel__head { flex-wrap: nowrap; align-items: center; }
.admin .panel__head > div:first-child { min-width: 0; }
.admin .panel__head h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin .panel__head > .btn,
.admin .panel__head > .tabs { flex-shrink: 0; }
/* Two actions in one corner, so the buttons get their own wrapper instead of
   two siblings the head would try to space apart. */
.panel__acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin .panel__head .panel__acts > * { flex-shrink: 0; }
/* On a phone the title has to give way before the buttons do. */
@media (max-width: 560px) {
  .panel__acts .btn span { display: none; }
  .panel__acts .btn { padding: 0; width: 36px; height: 36px; justify-content: center; }
}

/* --- tables: never a sideways guess -------------------------------------- */
.admin .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.admin .table { min-width: 620px; }
.admin .table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  white-space: nowrap;
}
/* Row actions stack instead of running off the right edge. */
.sc-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* --- forms: one column on a phone ---------------------------------------- */
@media (max-width: 760px) {
  .admin .maker__grid { grid-template-columns: 1fr; }
  .admin .maker__grid .field--wide { grid-column: span 1; }
  .admin .field--action { grid-column: span 1; }
  .admin .field--action .btn { width: 100%; }

  .admin .panel__head { flex-wrap: wrap; row-gap: 10px; }
  .admin .panel__head > .btn { width: 100%; }
  .admin .panel__head > .tabs { width: 100%; }

  .admin__top { flex-direction: column; align-items: stretch; gap: 14px; }
  .admin__top-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin__top-actions .btn { width: 100%; }

  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 14px; }

  /* Icons carry the meaning on a narrow screen, the labels crowd. */
  .admin .btn--sm span { display: none; }
  .admin .btn--sm { padding: 9px 11px; }
  .admin .btn--sm svg { width: 17px; height: 17px; }

  .sc-code { min-height: 170px; font-size: 12.5px; }
  .sc-copy { flex-direction: column; align-items: stretch; }
  .sc-copy .btn { width: 100%; }
}

/* --- short screens: the sheet should not eat everything ------------------- */
@media (max-height: 620px) {
  .sheet { padding: 16px; }
}

/* ==========================================================================
   FRONT-VIEWS
   Same idea as the admin panel, one level up: the store was a single long
   page, so on a phone every section was another screen of scrolling. The
   drawer lists the views and only one is on screen at a time.
   ========================================================================== */

.front__view[hidden] { display: none; }

/* The first and last section inside a view should not add a second edge. */
.front__view > .section:first-child { padding-top: 4px; }
.front__view > .section:last-child { padding-bottom: 8px; }

/* Anchor targets must clear the fixed nav. The tab bar that used to sit under
   it is gone, so this is the nav height and a little breathing room. */
.front__view > .section[id],
[id="pricing"], [id="how"], [id="faq"], [id="verify"], [id="scripts"], [id="account"] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ==========================================================================
   DRAWER
   The horizontal tab bars are replaced by one button in the top right that
   opens a panel sliding in from the right edge. A row of pills was three
   problems in a row: it wrapped off the edge on a phone, it took a full row
   of vertical space, and on the admin panel it pushed the tables down.

   The drawer is a plain <dialog>-less overlay so it behaves the same on every
   browser the buyers use, including the in-game webviews.
   ========================================================================== */

.drawer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.drawer-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); }
/* A class selector outranks the UA rule for [hidden], so say it plainly. */
.drawer-btn[hidden] { display: none; }
.drawer-btn:active { transform: translateY(1px); }
.drawer-btn svg { width: 17px; height: 17px; stroke-width: 1.8; }
/* The label names the section you are on, so the button says where you are
   without opening anything. */
.drawer-btn__label {
  display: inline;
  color: var(--accent-hi);
  font-weight: 600;
}
.drawer-btn__caret { transition: transform .3s var(--ease); }
.drawer-btn[aria-expanded="true"] .drawer-btn__caret { transform: rotate(180deg); }

/* --- overlay ------------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .34s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

/* The panel itself: slides in from the right edge. */
.drawer__panel {
  position: relative;
  width: min(340px, 86vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 70px -30px rgba(0, 0, 0, .95);
  transform: translateX(100%);
  transition: transform .38s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.drawer__close {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.drawer__close:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.drawer__close svg { width: 17px; height: 17px; stroke-width: 1.9; }

.drawer__list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer__item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.drawer__item svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
.drawer__item:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.drawer__item[aria-current="true"] {
  background: var(--accent-soft);
  border-color: rgba(196, 72, 74, .32);
  color: var(--text);
}
.drawer__item[aria-current="true"] svg { color: var(--accent-hi); }

/* The badge is the one bit of chrome worth keeping in the panel. */
.drawer__count {
  margin-left: auto;
  min-width: 21px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.drawer__item[aria-current="true"] .drawer__count {
  background: rgba(196, 72, 74, .34);
  color: var(--text);
}

.drawer__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted-2);
}

@media (max-width: 760px) {
  .drawer-btn__label { display: none; }
  .drawer-btn { padding: 9px 11px; }
  .drawer__panel { width: min(320px, 88vw); }
}

/* Someone who asked for less motion still gets the panel, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim, .drawer-btn__caret { transition: none; }
}

/* --- free key + get script ---------------------------------------------- */
/* Two things live here that nothing else on the site uses: the step rows the
   free gate walks through, and the terminal the loader line is shown in. The
   nav pair is separate because it is the one rule that has to answer to the
   width of the header rather than to anything on these pages. */

.nav__new { display: none; }
@media (min-width: 1040px) { .nav__new { display: inline; } }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn-row .btn { height: 50px; }

/* the gate */
.fk-steps .step { padding: 22px 0; }
.fk-steps .step__n { transition: color .3s; }
.fk-steps .step[data-state="done"] .step__n { color: var(--ok); }
.fk-steps .step[data-state="done"] h3 { color: var(--muted); }
.fk-steps .step[data-state="locked"] h3 { color: var(--muted-2); }
.fk-steps .step .btn { margin-top: 14px; }
.fk-steps .btn svg { width: 15px; height: 15px; stroke-width: 1.75; }
.fk-key .sc-copy code { font-size: 14px; }

/* the terminal */
.term {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #07070A; overflow: hidden; box-shadow: var(--shadow);
}
.term__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.term__dots { display: flex; gap: 6px; }
.term__dots i { width: 10px; height: 10px; border-radius: 50%; background: #23232A; }
.term__dots i:nth-child(1) { background: #3B2124; }
.term__dots i:nth-child(2) { background: #3A3221; }
.term__dots i:nth-child(3) { background: #1F3327; }
.term__path {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-2);
}
.term__path svg { width: 13px; height: 13px; stroke-width: 1.75; }
.term__body {
  margin: 0; padding: 20px 18px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--muted);
}

/* --- the tabbed free key page -------------------------------------------- */
/* 460px is the right width for a login form and far too narrow for a key
   table, so this page gets its own. The tab bar is the same component the
   admin panel and storefront already ship. */
.wrap--mid { max-width: 760px; }
.tabbar--center { margin: 0 auto 30px; }

.fk-lookup { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.fk-lookup .field--action { align-self: end; }
#fk-mine-body td { vertical-align: middle; }
#fk-mine-body .table__key code { font-size: 12px; }
#fk-mine-body .sc-acts { justify-content: flex-end; }

/* ---------- catalog ---------- */
/* Two columns on a phone, four a page. Wider screens widen the track instead
   of the card, so a wide card never stretches a single image across the page. */
.grid--catalog {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.catalog__item { display: flex; flex-direction: column; overflow: hidden; }
.catalog__item .product__body { display: flex; flex-direction: column; flex: 1; }
.catalog__item .btn { margin-top: auto; }

.catalog__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  overflow: hidden;
}
.catalog__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The shot sits flush under the card head, so the corners that would show the
   panel behind it are rounded off on top only. */
.catalog__item .product__shot { border-radius: 0; margin: -1px -1px 0; }

@media (min-width: 768px) {
  .catalog__item { border-radius: 14px; }
  .catalog__item .product__shot { border-radius: 13px 13px 0 0; margin: -1px -1px 0; }
}

/* --- catalog: long description clamps on phones --------------------- */
/* A full description pushed the Get script button far down the card, and in a
   two-column phone grid that left every card a different height. RScripts
   solves it the same way: clip the text, animate max-height open. */
.catalog__desc { position: relative; }
.catalog__desc-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.catalog__more {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-hi);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.catalog__more svg { width: 14px; height: 14px; stroke-width: 2.2;
                    transition: transform .28s var(--ease); }
.catalog__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalog__more:hover { color: var(--text); }

/* The clip used to live below 767px only, so on desktop a long description
   ran to full height and the cards in a row ended up wildly uneven. Clamp
   everywhere instead: the description reads the same under the title at any
   width, and the toggle opens it when the reader wants the rest. */
.catalog__desc-text {
  overflow: hidden;
  /* line-height is 1.55, so this is three lines, not 2.9 of them. Three keeps
     the cards in a row the same height instead of stretching them to match the
     longest description. */
  max-height: 4.65em;
  transition: max-height .3s ease-out;
}
/* Fade the last line so the cut reads as "there is more" rather than as a
   paragraph that simply stops. */
.catalog__desc:not([data-open="true"]) .catalog__desc-text {
  -webkit-mask-image: linear-gradient(#000 58%, transparent 100%);
          mask-image: linear-gradient(#000 58%, transparent 100%);
}
.catalog__more.is-on { display: inline-flex; }

/* The phone card is narrow, so it carries one more line before the cut
   starts eating the sentence. */
@media (max-width: 767px) {
  .catalog__desc-text { max-height: 6.2em; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog__desc-text,
  .catalog__more svg { transition: none; }
}

/* --- one script, on its own page ------------------------------------- */
/* Laid out like the script pages people already browse: a cover, one obvious
   Copy button, a short on-this-page bar, then Overview and the code. */

.sd-hero {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.sd-hero__shot { position: relative; background: var(--bg-2); aspect-ratio: 16 / 9; }
.sd-hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-hero__body { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.sd-hero .card__head { padding: 0; border: 0; }

.sd-title {
  font-family: var(--font-ui);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.sd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-cta { gap: 10px; }
.sd-cta .btn--wide { flex: 1 1 220px; justify-content: center; min-height: 48px; }

.sd-req { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line);
          display: flex; flex-wrap: wrap; gap: 8px; }
.sd-req li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .02);
  font-size: 12.5px; color: var(--muted);
}
.sd-req svg { width: 13px; height: 13px; stroke-width: 1.9; color: var(--muted-2); }

/* The bar sticks under the header so a reader who lands on the code block can
   jump back to the overview without scrolling the whole page again. */
.sd-nav {
  position: sticky; top: 72px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 22px 0 20px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--bg) 72%, transparent);
}
.sd-nav a {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sd-nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }

.sd-sec { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }

.sd-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
}
.sd-block--flush { padding: 0; overflow: hidden; }
.sd-h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sd-block > .sd-h2 { margin-bottom: 12px; }

.sd-feat {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .sd-feat { grid-template-columns: 1fr 1fr; } }
.sd-feat li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.sd-feat svg { width: 15px; height: 15px; margin-top: 2px; flex: none; stroke-width: 2.4; color: var(--accent-hi); }
.sd-feat span { min-width: 0; overflow-wrap: anywhere; }

.sd-exec {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sd-exec li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  font-size: 13px; color: var(--muted);
}
.sd-exec svg { width: 13px; height: 13px; stroke-width: 2.4; color: var(--accent-hi); }

/* --- executor mark ------------------------------------------------------ */
/* The letter is the element and the logo is layered over it. If the image is
   missing the browser runs onerror and removes it, and the letter is simply
   still there, so no executor is ever shown as a broken image. */
.ex-mark {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none; overflow: hidden;
  border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: var(--muted); line-height: 1;
}
.ex-mark img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ex-mark--lg { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }

.sd-code__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.sd-code__meta { min-width: 0; }
.sd-code__meta p { margin-top: 3px; font-size: 12.5px; }
.sd-code__body { margin: 0; }
.sd-code__body .term__body { border-radius: 0; overflow-x: auto; }

/* --- executor multi-select --------------------------------------------- */
/* Thirty executors is too many for a native <select multiple>: it renders as
   a plain box, phones scroll it badly, and there is no search. This is a real
   listbox with checkboxes, a filter, and chips on the control so a choice can
   be taken back without opening the panel again. */

.ms { position: relative; }
.ms__control {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 7px 10px 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--text);
  font-family: var(--font-ui); font-size: 14px; text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ms__control:hover { border-color: var(--line-2); }
.ms.is-open .ms__control { border-color: var(--accent-hi); background: var(--surface); }

.ms__chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; max-height: 76px; overflow-y: auto; }
.ms__hint { color: var(--muted-2); font-size: 13.5px; }
.ms__caret { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.ms.is-open .ms__caret { transform: rotate(180deg); }

.ms__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 8px; border-radius: 7px;
  background: var(--accent-soft); border: 1px solid rgba(196, 72, 74, .35);
  color: var(--text); font-size: 12.5px; line-height: 1.5;
  max-width: 100%;
}
.ms__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex: none;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
}
.ms__chip button:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.ms__chip svg { width: 11px; height: 11px; stroke-width: 2.6; }

.ms__panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden;
}
.ms__search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.ms__search svg { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.ms__input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font-family: var(--font-ui); font-size: 14px; outline: none;
}
.ms__input::placeholder { color: var(--muted-2); }

.ms__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
}
.ms__count { font-size: 12px; color: var(--muted-2); }
.ms__link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--accent-hi); -webkit-user-select: none; user-select: none;
}
.ms__link:hover { color: var(--text); }

.ms__list {
  list-style: none; margin: 0; padding: 5px;
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
.ms__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: 8px; cursor: pointer;
  transition: background .14s var(--ease);
}
.ms__opt:hover { background: rgba(255, 255, 255, .05); }
.ms__opt[aria-selected="true"] { background: var(--accent-soft); }

/* The real checkbox is hidden rather than replaced, so the list stays
   keyboard reachable and the native focus ring is not lost. */
.ms__box {
  width: 17px; height: 17px; flex: none; margin: 0;
  accent-color: var(--accent-hi); cursor: pointer;
}
.ms__name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms__tag {
  flex: none; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2);
}
.ms__tag--free { color: var(--ok); border-color: rgba(70, 160, 110, .4); }
.ms__tag--det { color: var(--warn); border-color: rgba(199, 154, 58, .4); }
.ms__empty { padding: 16px 12px; text-align: center; font-size: 13px; color: var(--muted-2); }

/* Under the tap targets are 44px, so the control gets min-height rather than
   a fixed one and the panel still fits a phone keyboard. */
@media (max-width: 560px) {
  .ms__list { max-height: 208px; }
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.pager__btn {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.pager__btn svg { width: 18px; height: 18px; }
.pager__btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-hi); }
.pager__btn:disabled { opacity: .32; cursor: default; }
.pager__label {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  min-width: 56px;
  text-align: center;
}