/* =====================================================================
   genuine-pins.com — stylesheet
   No frameworks, no external fonts, no third-party requests.
   ===================================================================== */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
img, svg, canvas { display: block; max-width: 100%; }
/* Required, not cosmetic: the pin images carry width="256" height="256".
   Where CSS overrides only the width, the 256px height attribute survives
   and every round pin renders as a vertical oval. Rules that genuinely
   want a fixed height (.brand img) out-specify this. */
img { height: auto; }

/* Components below set display:flex/grid, which would otherwise beat the
   UA rule for [hidden]. This keeps the attribute authoritative. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- tokens */
:root {
  --bg:        #08090b;
  --bg-2:      #0b0d10;
  --surface:   #111419;
  --surface-2: #171b22;
  --surface-3: #1e232c;
  --line:      #232830;
  --line-2:    #2f3641;

  --text:      #eef1f6;
  --muted:     #98a1b0;
  --muted-2:   #6d7684;

  --gold:      #e0b352;
  --gold-2:    #f7dc9e;
  --gold-3:    #a67c28;
  --gold-soft: rgba(224, 179, 82, .10);
  --gold-line: rgba(224, 179, 82, .28);

  --green:     #56d68a;
  --green-soft:rgba(86, 214, 138, .10);
  --red:       #f4736c;
  --red-soft:  rgba(244, 115, 108, .10);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono",
          "Roboto Mono", Consolas, monospace;

  --wrap: 1220px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 40px 80px -24px rgba(0,0,0,.85);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- base */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

/* Ambient light. Purely decorative, sits behind everything. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 620px at 78% -10%, rgba(224,179,82,.085), transparent 62%),
    radial-gradient(760px 520px at 8% 4%,   rgba(120,150,220,.05), transparent 60%);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; z-index: 1; padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

/* ------------------------------------------------------------ typography */
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.025em; font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.h-display { font-size: clamp(2.6rem, 7.2vw, 5.1rem); font-weight: 800; letter-spacing: -.04em; }
.h-section { font-size: clamp(1.85rem, 4.2vw, 3rem); letter-spacing: -.035em; }
.lead { font-size: clamp(1rem, 1.7vw, 1.16rem); color: var(--muted); max-width: 62ch; }

.gold-text {
  background: linear-gradient(100deg, var(--gold-2) 8%, var(--gold) 42%, var(--gold-3) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .h-section { margin: .85rem 0 .9rem; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-line: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-size: .93rem; font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s, opacity .18s;
}
.btn:hover  { transform: translateY(-1px); border-color: var(--gold-line); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .42; pointer-events: none; }

.btn--gold {
  --btn-bg: linear-gradient(165deg, var(--gold-2), var(--gold) 52%, var(--gold-3));
  --btn-fg: #17130a;
  --btn-line: transparent;
  font-weight: 750;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 10px 26px -12px rgba(224,179,82,.75);
}
.btn--gold:hover { box-shadow: 0 1px 0 rgba(255,255,255,.42) inset, 0 16px 34px -12px rgba(224,179,82,.9); }

.btn--ghost { --btn-bg: transparent; --btn-line: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--surface-2); }

.btn--lg  { padding: 1.02rem 1.9rem; font-size: 1rem; }
.btn--sm  { padding: .55rem 1rem; font-size: .84rem; }
.btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------- header */
.topbar {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, rgba(224,179,82,.12), rgba(224,179,82,.04));
  border-bottom: 1px solid var(--line);
  font-size: .78rem; color: var(--muted);
}
.topbar__in {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 38px; text-align: center; flex-wrap: wrap;
}
.topbar strong { color: var(--gold-2); font-weight: 650; }
.topbar a { color: var(--text); border-bottom: 1px solid var(--gold-line); }
.topbar a:hover { color: var(--gold-2); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,9,11,.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(8,9,11,.9); }
.site-header__in { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand img { width: 34px; height: 34px; filter: drop-shadow(0 2px 8px rgba(224,179,82,.35)); }
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-size: .95rem; font-weight: 800; letter-spacing: .13em; }
.brand__sub  { font-size: .6rem; letter-spacing: .27em; color: var(--muted-2); text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .82rem; border-radius: 999px;
  font-size: .88rem; font-weight: 550; color: var(--muted);
  transition: color .18s, background-color .18s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

.cart-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--gold); color: #17130a;
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }

.burger { display: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.burger span { display: block; width: 17px; height: 1.5px; background: var(--text); margin: 3.5px auto; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav {
    position: absolute; inset: 100% 0 auto; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .6rem var(--pad) 1.1rem;
    background: rgba(8,9,11,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .85rem .2rem; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .burger { display: block; }
  .header-actions .btn--discord { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin: 1.1rem 0 1.35rem; }
.hero .lead { margin-bottom: 2.1rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.1rem; }

/* Verify-the-seller strip — external, checkable receipts. */
.rep-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 2.2rem;
}
.rep-strip__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-2); margin-right: .25rem;
}
.rep-link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 620; color: var(--muted);
  transition: color .18s, border-color .18s, transform .18s var(--ease);
}
.rep-link:hover { color: var(--text); border-color: var(--gold-line); transform: translateY(-1px); }
.rep-link svg { width: 13px; height: 13px; color: var(--green); flex: none; }

.hero__stats {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 620px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--bg-2); padding: 1.05rem 1.1rem; }
.stat__v { font-size: 1.35rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-top: .18rem; }

/* Floating showcase */
.showcase { position: relative; aspect-ratio: 1; max-width: 520px; margin-inline: auto; width: 100%; }
.showcase::after {
  content: ''; position: absolute; inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,179,82,.2), transparent 68%);
  filter: blur(34px);
}
.showcase__ring {
  position: absolute; inset: 4%;
  border: 1px solid var(--line-2); border-radius: 50%;
}
.showcase__ring:nth-child(2) { inset: 18%; border-color: rgba(224,179,82,.22); border-style: dashed; }
.showcase__ring:nth-child(3) { inset: 32%; border-color: var(--line); }
.showcase__pin {
  position: absolute; z-index: 2;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.75));
  animation: bob 7s ease-in-out infinite;
}
/* A centre piece with four equal satellites seated on the outer ring at the
   diagonals. Equal sizing keeps it calm, so the eye lands on the Guardian
   Elite first. Offsets are (ring position − half the pin), so the boxes stay
   clear of the centre piece. */
.showcase__pin--a { width: 46%; left: 27%;  top: 27%;    z-index: 3; animation-delay: -.4s; }
.showcase__pin--b { width: 25%; right: 7.5%; top: 7.5%;    animation-delay: -2.4s; opacity: .94; }
.showcase__pin--c { width: 25%; right: 7.5%; bottom: 7.5%; animation-delay: -4.1s; opacity: .94; }
.showcase__pin--d { width: 25%; left: 7.5%;  top: 7.5%;    animation-delay: -5.6s; opacity: .94; }
.showcase__pin--e { width: 25%; left: 7.5%;  bottom: 7.5%; animation-delay: -3.1s; opacity: .94; }
@keyframes bob { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }

/* Five pins collide once the column narrows — drop to a clean diagonal. */
@media (max-width: 620px) {
  .showcase { max-width: 330px; }
  .showcase__pin--c, .showcase__pin--d { display: none; }
  .showcase__pin--a { width: 46%; left: 27%;   top: 27%; }
  .showcase__pin--b { width: 27%; right: 6.5%; top: 6.5%; }
  .showcase__pin--e { width: 27%; left: 6.5%;  bottom: 6.5%; }
}

/* -------------------------------------------------------------- trustbar */
.trustbar { border-block: 1px solid var(--line); background: var(--bg-2); position: relative; z-index: 1; }
.trustbar__in {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1rem, 3vw, 2.4rem); padding-block: 1.6rem;
}
@media (max-width: 820px) { .trustbar__in { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
.trust { display: flex; gap: .75rem; align-items: flex-start; }
.trust svg { flex: none; width: 19px; height: 19px; color: var(--gold); margin-top: .2rem; }
.trust b { display: block; font-size: .89rem; font-weight: 650; }
.trust span { font-size: .79rem; color: var(--muted-2); line-height: 1.45; }

/* ------------------------------------------------------------ collection */
.filters {
  position: sticky; top: 72px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  padding: .8rem 0 1rem;
  background: linear-gradient(var(--bg) 62%, transparent);
  margin-bottom: 1.9rem;
}
/* Pinned it eats half a phone screen — let it scroll away instead. */
@media (max-width: 700px) {
  .filters { position: static; background: none; gap: .55rem; }
  .search, .select { width: 100%; }
  .filters__spacer { display: none; }
}

.tabs { display: flex; gap: .3rem; padding: .28rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.tab {
  padding: .48rem 1.02rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--muted);
  transition: color .18s, background-color .18s;
}
.tab:hover { color: var(--text); }
.tab.is-active { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }
.tab.is-active::after { content: ''; }

.filters__spacer { flex: 1 1 auto; }

.search {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .18s;
}
.search:focus-within { border-color: var(--gold-line); }
.search svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.search input { flex: 1; min-width: 0; font-size: .87rem; }
.search input::placeholder { color: var(--muted-2); }

.select {
  padding: .55rem 2.1rem .55rem 1rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1b0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 13px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .87rem; color: var(--muted);
  appearance: none; -webkit-appearance: none;
}
.select:hover { color: var(--text); border-color: var(--line-2); }
.select option { background: var(--surface); color: var(--text); }

.series-note {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.05rem 1.25rem; margin-bottom: 1.6rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--gold); border-radius: var(--r-sm);
  font-size: .87rem; color: var(--muted);
}
.series-note b { color: var(--text); font-weight: 650; }

/* Grid + cards */
.grid {
  display: grid; gap: 1.05rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 520px) { .grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(175deg, var(--surface-2), var(--surface) 58%);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; text-align: left;
  transition: transform .28s var(--ease), border-color .28s, box-shadow .28s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow); }
.card:hover .card__img img { transform: scale(1.07); }
.card:hover .card__img::after { opacity: 1; }

.card__img {
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 15%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.045), transparent 62%);
}
.card__img::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft), transparent 66%);
  filter: blur(22px); opacity: 0; transition: opacity .3s;
}
.card__img img {
  position: relative; z-index: 1; width: 100%;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.6));
  transition: transform .38s var(--ease);
}

.card__body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__name { font-size: 1rem; font-weight: 650; letter-spacing: -.02em; }
.card__name a { color: inherit; }
.card__name a:hover { color: var(--gold-2); }
.card__meta { display: flex; align-items: center; gap: .45rem; font-size: .7rem; color: var(--muted-2); letter-spacing: .07em; text-transform: uppercase; }
.card__meta-stock { color: var(--green); font-weight: 700; }
.card__meta-request { color: var(--gold-2); font-weight: 700; }
.card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.card__price { font-family: var(--mono); font-size: 1.13rem; font-weight: 600; letter-spacing: -.03em; color: var(--gold-2); }
.card__add {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--muted); transition: all .18s;
}
.card__add:hover { background: var(--gold); border-color: var(--gold); color: #17130a; transform: rotate(90deg); }
.card__add svg { width: 15px; height: 15px; }
.card.is-in-cart .card__add { background: var(--green-soft); border-color: var(--green); color: var(--green); }

.badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--muted);
}
.badge--grail { background: linear-gradient(140deg, var(--gold-2), var(--gold)); color: #17130a; border-color: transparent; }
.badge--rare  { background: var(--gold-soft); color: var(--gold-2); border-color: var(--gold-line); }

.card.is-sold { opacity: .5; }
.card.is-sold .card__add { display: none; }
.sold-flag {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  padding: .22rem .55rem; border-radius: 999px;
  font-size: .62rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  background: var(--red-soft); color: var(--red); border: 1px solid rgba(244,115,108,.3);
}

.empty { padding: 4rem 1rem; text-align: center; color: var(--muted-2); }
.empty b { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: .4rem; }

/* ----------------------------------------------------------------- steps */
.steps { display: grid; gap: 1.05rem; grid-template-columns: repeat(4, minmax(0,1fr)); counter-reset: s; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; padding: 1.6rem 1.35rem 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  counter-increment: s;
  transition: border-color .25s, transform .25s var(--ease);
}
.step:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.step::before {
  content: '0' counter(s);
  display: block; margin-bottom: .95rem;
  font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold);
}
.step h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.step p  { font-size: .88rem; color: var(--muted); }

/* ---------------------------------------------------------------- panels */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.panel {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: linear-gradient(170deg, var(--surface-2), var(--surface) 60%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.panel--gold { border-color: var(--gold-line); background: linear-gradient(170deg, rgba(224,179,82,.07), var(--surface) 62%); }

.checklist { display: grid; gap: 1rem; }
.checklist li { display: flex; gap: .8rem; align-items: flex-start; }
.checklist svg { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: .28rem; }
.checklist b { display: block; font-size: .95rem; font-weight: 650; margin-bottom: .12rem; }
.checklist span { font-size: .86rem; color: var(--muted); }

/* Coin strip */
.coins { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.coin-chip {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .42rem .82rem;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
}
.coin-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); font-style: normal; }
.coin-chip--priv i { background: var(--green); }

/* --------------------------------------------------------------- vouches */
.vouches { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vouch {
  display: flex; flex-direction: column; gap: .95rem;
  padding: 1.4rem 1.35rem;
  background: linear-gradient(175deg, var(--surface-2), var(--surface) 58%);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .25s, transform .25s var(--ease);
}
.vouch:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.vouch blockquote {
  font-size: .92rem; line-height: 1.65; color: var(--text);
}
.vouch blockquote::before { content: '“'; color: var(--gold); font-weight: 800; margin-right: .05em; }
.vouch blockquote::after { content: '”'; color: var(--gold); font-weight: 800; margin-left: .05em; }
.vouch figcaption {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.vouch__pin {
  padding: .22rem .6rem; border-radius: 999px;
  font-size: .64rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold-soft); color: var(--gold-2); border: 1px solid var(--gold-line);
}
.vouch__src { font-family: var(--mono); font-size: .7rem; color: var(--muted-2); }

/* ------------------------------------------------------------------- faq */
.faq { display: grid; gap: .6rem; max-width: 860px; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s; }
.qa[open] { border-color: var(--gold-line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-size: .98rem; font-weight: 620;
  cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .25s var(--ease), border-color .2s;
}
.qa[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); border-color: var(--gold); }
.qa__body { padding: 0 1.35rem 1.3rem; font-size: .9rem; color: var(--muted); max-width: 70ch; }
.qa__body p + p { margin-top: .7rem; }

/* -------------------------------------------------------------- cta band */
.cta-band {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) var(--pad);
  background: linear-gradient(160deg, rgba(224,179,82,.11), transparent 58%), var(--bg-2);
  border-block: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: .9rem; }
.cta-band .lead { margin-inline: auto; margin-bottom: 1.9rem; }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 3rem 2rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(3, 1fr); margin-bottom: 2.4rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
.footer__brand p { font-size: .85rem; color: var(--muted-2); max-width: 40ch; margin-top: .9rem; }
.footer h4 { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .9rem; font-weight: 700; }
.footer li + li { margin-top: .5rem; }
.footer a { font-size: .87rem; color: var(--muted); transition: color .18s; }
.footer a:hover { color: var(--gold-2); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: center;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--muted-2);
}
.footer__legal { max-width: 72ch; line-height: 1.6; }

/* ------------------------------------------------------------ cart panel */
/* pointer-events gehört hier zwingend dazu: `visibility` steht in der
   Transition, und beim Ausblenden bleibt der Wert die vollen 0,3 s auf
   `visible`. Ohne diese Zeile liegt nach dem Schliessen fast eine
   drittel Sekunde lang eine unsichtbare, bildschirmfüllende Fläche über
   der Seite, die Klicks abfängt — und im Fall der Netzauswahl sogar an
   Knöpfe weiterreicht, die dort nicht mehr hingehören. */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,4,6,.72);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-2); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .36s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 1.02rem; letter-spacing: .04em; }
.icon-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--muted);
  transition: all .18s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-2); background: var(--surface-2); }
.icon-btn svg { width: 15px; height: 15px; }

.drawer__body { flex: 1; overflow-y: auto; padding: 1.1rem 1.35rem; }
.drawer__foot { padding: 1.2rem 1.35rem calc(1.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }

.line {
  display: grid; grid-template-columns: 58px 1fr auto; gap: .9rem; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; }
.line__img { width: 58px; height: 58px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px; }
.line__name { font-size: .9rem; font-weight: 620; }
.line__sub { font-size: .74rem; color: var(--muted-2); }
.line__price { font-family: var(--mono); font-size: .93rem; color: var(--gold-2); }
.line__rm { display: block; margin-top: .2rem; font-size: .72rem; color: var(--muted-2); text-align: right; }
.line__rm:hover { color: var(--red); }

.totals { display: grid; gap: .5rem; margin-bottom: 1.1rem; font-size: .88rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.totals .totals__grand { font-size: 1.22rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; padding-top: .5rem; border-top: 1px solid var(--line); }
.totals .totals__grand span:last-child { font-family: var(--mono); color: var(--gold-2); }

/* ------------------------------------------------------------ pin modal */
/* Wie beim Scrim, und hier mit Folgen für echtes Geld: Ohne
   pointer-events blieb das geschlossene Fenster 0,28 s lang treffbar —
   samt der Kettenliste, die noch darin stand. Ein Klick auf eine
   Münzkachel landete dann auf einer Kette des vorigen Fensters, und der
   Käufer bekam eine Adresse, die er nie gewählt hat. */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--pad);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s, visibility .28s;
}
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal__card {
  position: relative;
  width: min(880px, 100%); max-height: min(88vh, 720px);
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(14px) scale(.985); transition: transform .3s var(--ease);
}
.modal.is-open .modal__card { transform: none; }
@media (max-width: 720px) {
  .modal__card { grid-template-columns: 1fr; overflow-y: auto; }
  .modal__visual { aspect-ratio: 4/3; }
}
.modal__visual {
  position: relative; display: grid; place-items: center; padding: 12%;
  background: radial-gradient(circle at 50% 44%, rgba(224,179,82,.13), transparent 62%), var(--surface);
  border-right: 1px solid var(--line);
}
.modal__visual img { width: 100%; max-width: 300px; filter: drop-shadow(0 26px 40px rgba(0,0,0,.75)); }
.modal__side { padding: clamp(1.4rem, 3vw, 2.1rem); overflow-y: auto; display: flex; flex-direction: column; }
.modal__close { position: absolute; top: .85rem; right: .85rem; z-index: 3; background: rgba(8,9,11,.75); }
.modal h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: .7rem 0 .8rem; }
.modal__desc { font-size: .92rem; color: var(--muted); margin-bottom: 1.5rem; }

.spec { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 1.4rem; }
.spec div { display: flex; justify-content: space-between; gap: 1rem; padding: .68rem .95rem; background: var(--surface); font-size: .84rem; }
.spec dt { color: var(--muted-2); }
.spec dd { font-weight: 620; text-align: right; }

.price-row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.price-big { font-family: var(--mono); font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 650; letter-spacing: -.045em; color: var(--gold-2); }
.price-conv { font-family: var(--mono); font-size: .82rem; color: var(--muted-2); margin-bottom: 1.3rem; min-height: 1.2em; }
.modal__actions { margin-top: auto; display: grid; gap: .6rem; }

/* ---------------------------------------------------------- toast + misc */
.toasts { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 200; display: grid; gap: .5rem; width: min(400px, calc(100vw - 2rem)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: .65rem;
  padding: .8rem 1.05rem;
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 999px;
  box-shadow: var(--shadow); font-size: .87rem;
  animation: toastIn .3s var(--ease);
}
.toast svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.toast.is-out { animation: toastOut .25s var(--ease) forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(8px) scale(.97); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: .8rem 1.2rem; background: var(--gold); color: #17130a; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ================================================================ */
/*  CHECKOUT                                                        */
/* ================================================================ */
.checkout { position: relative; z-index: 1; padding-block: clamp(2.5rem, 5vw, 4rem) 5rem; }
.checkout__grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.5rem); grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: start; }
/* Steps with no order summary (done / empty cart) centre on the page instead. */
.checkout__grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 660px; margin-inline: auto; }
@media (max-width: 940px) { .checkout__grid { grid-template-columns: 1fr; } .summary { order: -1; position: static !important; } }

.stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.stepper__i { display: flex; align-items: center; gap: .55rem; font-size: .83rem; color: var(--muted-2); }
.stepper__n {
  width: 25px; height: 25px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
}
.stepper__i.is-active { color: var(--text); }
.stepper__i.is-active .stepper__n { background: var(--gold); border-color: var(--gold); color: #17130a; }
.stepper__i.is-done { color: var(--muted); }
.stepper__i.is-done .stepper__n { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.stepper__bar { flex: 1 1 22px; min-width: 14px; height: 1px; background: var(--line-2); }

.pane { display: none; }
.pane.is-active { display: block; animation: paneIn .35s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } }

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .84rem; font-weight: 620; margin-bottom: .42rem; }
.field .hint { font-size: .77rem; color: var(--muted-2); font-weight: 400; margin-top: .35rem; }
.input, .textarea {
  width: 100%; padding: .82rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: .92rem; transition: border-color .18s, background-color .18s;
}
.input:focus, .textarea:focus { border-color: var(--gold-line); background: var(--surface-2); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.textarea { resize: vertical; min-height: 92px; font-family: inherit; }
.input.is-bad { border-color: var(--red); }

/* iOS Safari zoomt beim Antippen automatisch hinein, sobald ein Feld
   kleiner als 16px schreibt — und zoomt danach nicht von selbst zurück.
   Auf dem Handy gibst du Codes frei; einmal Zurückpinchen pro Verkauf
   ist genau die Art Reibung, die man nachts um drei nicht will. */
@media (max-width: 640px) {
  .input, .textarea, select.input { font-size: 16px; }
}
.err { display: none; margin-top: .35rem; font-size: .78rem; color: var(--red); }
.err.is-on { display: block; }

/* Kein align-items hier: der Rasterstandard „stretch" gleicht die Höhen
   innerhalb einer Zeile aus. Genau das hatte eine frühere Fassung mit
   „start" ausgehebelt — die Kacheln standen dann unterschiedlich hoch. */
.coin-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ── Assets mit mehreren Ketten ─────────────────────────────────────
   Sehen aus wie jede andere Kachel — nur der Chevron verrät, dass ein
   Fenster aufgeht. Sie tragen bewusst kein data-coin (siehe
   js/checkout.js): auswählen kann ausschliesslich eine Kette. */
.coin-opt--asset { width: 100%; }
.coin-opt__body { flex: 1; min-width: 0; }
.coin-chev {
  width: 16px; height: 16px; flex: none; margin-top: .25rem;
  color: var(--muted-2); transition: color .18s;
}
.coin-opt--asset:hover .coin-chev { color: var(--muted); }
.coin-opt--asset.is-sel .coin-chev { color: var(--gold); }

/* ── Fenster zur Netzauswahl ──────────────────────────────────────── */
.modal__card--slim { grid-template-columns: 1fr; width: min(460px, 100%); overflow-y: auto; }
.net-modal { padding: clamp(1.4rem, 4vw, 2rem); }
.net-modal h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: .55rem 0 .7rem; }
.net-modal__warn {
  font-size: .84rem; line-height: 1.55; color: var(--muted);
  padding: .75rem .9rem; margin-bottom: 1.1rem;
  border: 1px solid var(--gold-line); border-radius: var(--r-sm);
  background: var(--gold-soft);
}
.net-modal__list { display: grid; gap: .5rem; }

.coin-net {
  display: block; text-align: left; padding: .7rem .85rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s, background-color .18s;
}
.coin-net:hover { border-color: var(--line-2); background: var(--surface); }
.coin-net.is-sel { border-color: var(--gold); background: var(--gold-soft); }
/* Innerhalb einer Gruppe ist der Ticker viermal derselbe — die Kette ist
   das einzige Unterscheidungsmerkmal und bekommt deshalb hier das
   Gewicht, das auf der Einzelkachel der Ticker trägt. */
.coin-net__n {
  display: block; font-family: var(--mono); font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; color: var(--text);
}
.coin-net.is-sel .coin-net__n { color: var(--gold-2); }
.coin-net__note { display: block; margin-top: .25rem; font-size: .73rem; color: var(--muted-2); }
.coin-net.is-sel .coin-net__note { color: var(--gold-2); }
.coin-opt {
  position: relative; display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1rem; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .18s, background-color .18s, transform .18s var(--ease);
}
.coin-opt:hover { border-color: var(--line-2); transform: translateY(-2px); }
.coin-opt.is-sel { border-color: var(--gold); background: var(--gold-soft); }
.coin-opt__t { font-family: var(--mono); font-size: .93rem; font-weight: 700; }
.coin-opt__n { font-size: .78rem; color: var(--muted-2); }
.coin-opt__note { display: block; font-size: .74rem; color: var(--muted-2); margin-top: .3rem; }
.coin-opt.is-sel .coin-opt__note { color: var(--gold-2); }
/* The chain, on its own line and in the mono face so it reads as a
   technical fact rather than marketing copy. It is the one field on this
   card that costs the buyer their money if they ignore it. */
.coin-opt__net {
  display: block; margin-top: .28rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .02em;
  color: var(--muted); text-transform: uppercase;
}
.coin-opt.is-sel .coin-opt__net { color: var(--gold); }
/* Muss NACH .coin-opt__net stehen: gleiche Spezifität, die spätere Regel
   gewinnt. „2 networks" ist eine Aufforderung, keine Kettenangabe — es
   darf sich nicht wie eine lesen, sonst hält es jemand für das Netz. */
.coin-opt__net--pick { color: var(--gold-3); text-transform: none; letter-spacing: 0; }
.coin-opt--asset.is-sel .coin-opt__net--pick { color: var(--gold); }

.net-confirm {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.1rem; padding: .85rem 1rem;
  border: 1px solid var(--gold-line); border-radius: 12px;
  background: var(--gold-soft);
  font-size: .85rem; line-height: 1.5; color: var(--text);
}
.net-confirm svg { width: 18px; height: 18px; flex: none; margin-top: .12rem; color: var(--gold-2); }
.net-confirm b { color: var(--gold-2); }
.coin-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--line-2); margin-top: .42rem; }
.coin-opt.is-sel .coin-dot { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.coin-opt[data-privacy="high"] .coin-dot { background: var(--green); }

.summary { position: sticky; top: 92px; }
.summary__lines { max-height: 320px; overflow-y: auto; margin-bottom: 1.1rem; }

.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.1rem; border-radius: var(--r-sm);
  font-size: .85rem; line-height: 1.55;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-2);
}
.notice svg { flex: none; width: 17px; height: 17px; margin-top: .18rem; }
.notice--warn { background: var(--red-soft); border-color: rgba(244,115,108,.32); color: var(--red); }
.notice--ok { background: var(--green-soft); border-color: rgba(86,214,138,.3); color: var(--green); }
.notice + .notice, .notice + .field, .field + .notice { margin-top: 1.15rem; }

/* Payment */
.pay { display: grid; gap: 1.5rem; grid-template-columns: 250px minmax(0,1fr); align-items: start; }
@media (max-width: 700px) { .pay { grid-template-columns: 1fr; } }
.qr-box { padding: 14px; background: #fff; border-radius: var(--r); width: 250px; max-width: 100%; margin-inline: auto; }
.qr-box canvas { width: 100%; height: auto; image-rendering: pixelated; }
.qr-cap { text-align: center; font-size: .74rem; color: var(--muted-2); margin-top: .6rem; }
/* Stands where the QR would be, for coins that need a destination tag. */
.tag-notice {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1rem; border: 1px solid var(--gold-line);
  border-radius: var(--r); background: var(--gold-soft);
  font-size: .8rem; line-height: 1.55; color: var(--text);
}
.tag-notice svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--gold-2); }
.tag-notice b { color: var(--gold-2); }

.copy-field { margin-bottom: 1rem; }
.copy-field > span { display: block; font-size: .73rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .38rem; }
.copy-row { display: flex; gap: .5rem; align-items: stretch; }
.copy-val {
  flex: 1; min-width: 0; padding: .72rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .84rem; word-break: break-all; line-height: 1.45;
}
.copy-val--big { font-size: 1.02rem; font-weight: 650; color: var(--gold-2); }
.copy-btn { flex: none; width: 42px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--muted); transition: all .18s; }
.copy-btn:hover { border-color: var(--gold); color: var(--gold); }
.copy-btn.is-done { border-color: var(--green); color: var(--green); }
.copy-btn svg { width: 15px; height: 15px; }

.countdown { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .84rem; color: var(--muted); }
.countdown b { color: var(--gold-2); font-weight: 650; }
.countdown.is-expired b { color: var(--red); }

.order-id {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; color: var(--gold-2);
}

.done-mark {
  width: 62px; height: 62px; margin: 0 auto 1.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-soft); border: 1px solid rgba(86,214,138,.35); color: var(--green);
}
.done-mark svg { width: 27px; height: 27px; }

/* ================================================================ */
/*  ORDER PAGE                                                      */
/* ================================================================ */
.spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--line-2); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.status-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: .82rem; font-weight: 620; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--muted);
}
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill--wait { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-soft); }
.status-pill--ok   { color: var(--green); border-color: rgba(86,214,138,.32); background: var(--green-soft); }
.status-pill--bad  { color: var(--red); border-color: rgba(244,115,108,.32); background: var(--red-soft); }

.pulse {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--gold); position: relative;
}
.pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gold); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.pulse--sm { width: 6px; height: 6px; }
@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.live-wait {
  display: flex; align-items: center; gap: .6rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .83rem; color: var(--muted);
}

.order-item { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.order-item:first-child { padding-top: 0; }
.order-item:last-child { border-bottom: 0; padding-bottom: 0; }

.item-note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .6rem; font-size: .82rem; color: var(--muted);
}
.item-note--bad { color: var(--red); }

.code-box { margin-top: .7rem; }
.copy-val--code {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .09em;
  color: var(--gold-2);
  background: linear-gradient(160deg, rgba(224,179,82,.1), var(--surface));
  border-color: var(--gold-line);
  user-select: all;
}

.redeem-steps { display: grid; gap: .85rem; counter-reset: r; }
.redeem-steps li { display: flex; gap: .8rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.redeem-steps li > span {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold-soft); border: 1px solid var(--gold-line);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--gold-2);
}
.redeem-steps b { color: var(--text); font-weight: 620; }

/* Slim resume bar on the landing page */
.resume-bar {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  justify-content: center;
  padding: .7rem var(--pad);
  background: var(--green-soft); border-bottom: 1px solid rgba(86,214,138,.28);
  font-size: .84rem; color: var(--text);
  position: relative; z-index: 55;
}
.resume-bar a { color: var(--green); font-weight: 650; border-bottom: 1px solid currentColor; }

/* ================================================================ */
/*  ADMIN                                                           */
/* ================================================================ */
.admin { position: relative; z-index: 1; padding-block: 2rem 5rem; }
.admin__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1.6rem; }
.kpi { padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.kpi__v { font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__l { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-top: .2rem; }
.kpi--alert .kpi__v { color: var(--gold-2); }

.tablist { display: flex; gap: .3rem; padding: .28rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 1.4rem; flex-wrap: wrap; }
.tabpane { display: none; }
.tabpane.is-active { display: block; animation: paneIn .3s var(--ease); }
.codes-row td { background: var(--bg-2); }
.admin input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--gold); }

.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th {
  text-align: left; padding: .6rem .75rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl-wrap { overflow-x: auto; }

.chip {
  display: inline-block; padding: .18rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--muted);
}
.chip--instant { background: var(--green-soft); border-color: rgba(86,214,138,.3); color: var(--green); }
.chip--manual  { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-2); }
.chip--zero    { background: var(--red-soft); border-color: rgba(244,115,108,.3); color: var(--red); }

.hr { height: 1px; background: var(--line); border: 0; margin-block: 1.5rem; }
.row-between { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; align-items: center; }
.mt-auto { margin-top: auto; }
.text-c { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }

/* ── Katalog-Bearbeitung im Admin ───────────────────────────────────────
   Preisfeld und Schalter direkt in der Tabelle. Bewusst nüchtern: das
   hier ist ein Werkzeug, keine Verkaufsfläche — es soll bei einem müden
   Blick um 2 Uhr nachts eindeutig sein, was an und was aus ist. */
.tbl input.price {
  width: 6.5rem; text-align: right; padding: .35rem .5rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 7px;
  font: 600 .88rem/1 var(--mono); font-variant-numeric: tabular-nums;
}
.tbl input.price:hover { border-color: var(--gold-line); }
.tbl input.price:focus { outline: none; border-color: var(--gold); background: var(--surface-3); }
/* Die Pfeilchen weg — ein Fehlklick darf keinen Preis verstellen. */
.tbl input.price::-webkit-outer-spin-button,
.tbl input.price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tbl input.price { -moz-appearance: textfield; }

/* Mit [type=checkbox], weil .admin input[type="checkbox"] weiter oben
   spezifischer waere und sonst Groesse und Form gewinnt. */
.sw { display: inline-flex; cursor: pointer; }
.sw input[type="checkbox"] {
  appearance: none; width: 38px; height: 21px; margin: 0; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--line-2);
  border-radius: 99px; position: relative; transition: background .15s, border-color .15s;
}
.sw input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--muted-2); transition: transform .15s, background .15s;
}
.sw input[type="checkbox"]:hover { border-color: var(--gold-line); }
.sw input[type="checkbox"]:checked { background: var(--green-soft); border-color: var(--green); }
.sw input[type="checkbox"]:checked::after { transform: translateX(17px); background: var(--green); }
.sw input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }