/*
 * Card Swap: site and app styles. Mobile-first, dark-first.
 * The look follows docs/research/visual-direction-tcg-* ("Night Vault" with
 * Gemini's chip and card details). Placeholders stay honest: AI · FPO marks on
 * generated images, FPO tags on unconfirmed copy.
 */

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
	margin: 0;
	background: var(--cs-ground);
	color: var(--cs-ink);
	font: 16px/1.55 var(--cs-font);
	font-feature-settings: "cv11", "ss01";
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cs-ink); text-underline-offset: 3px; }
a:hover { color: var(--cs-action); }
:focus-visible { outline: 2px solid var(--cs-action); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }
.cs-mono { font-family: var(--cs-mono); font-variant-numeric: tabular-nums; }
.cs-muted { color: var(--cs-ink-2); }
.cs-icon { display: inline-block; flex: none; vertical-align: middle; }

.cs-skip { position: absolute; left: -9999px; }
.cs-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--cs-action); color: var(--cs-action-ink); padding: 8px 12px; border-radius: var(--cs-radius-sm); }

.cs-wrap { width: 100%; max-width: var(--cs-max); margin: 0 auto; padding: 0 16px; }
.cs-section { padding-top: 40px; padding-bottom: 40px; }
.cs-section--tight { padding-top: 16px; }
.cs-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* --- type ------------------------------------------------------------------ */
.cs-display { font-size: clamp(2.1rem, 6.5vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 16px; font-weight: 800; }
.cs-h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; margin: 0 0 12px; font-weight: 780; letter-spacing: -0.025em; }
.cs-h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0; font-weight: 750; letter-spacing: -0.02em; }
.cs-h3 { font-size: 1.05rem; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
.cs-lede { color: var(--cs-ink-2); font-size: 1.08rem; max-width: 58ch; margin: 0 0 22px; }
.cs-eyebrow { color: var(--cs-ink-2); font: 600 0.72rem/1.4 var(--cs-mono); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-link { color: var(--cs-ink-2); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 4px; }
.cs-prose { max-width: 70ch; }

/* --- early-pass band and placeholders ----------------------------------- */
.cs-band { margin: 0; background: var(--cs-psa); color: #111; font-size: 0.78rem; text-align: center; padding: 4px 12px; }
.cs-fpo {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background: repeating-linear-gradient(135deg, var(--cs-sunken) 0 12px, var(--cs-surface) 12px 24px);
	color: var(--cs-ink-3); font: 600 0.78rem var(--cs-mono); letter-spacing: 0.12em;
}
.cs-fpo-tag { display: inline-block; border: 1px solid var(--cs-psa-line); color: var(--cs-psa); background: var(--cs-psa-bg); font: 600 0.6rem/1 var(--cs-mono); letter-spacing: 0.08em; padding: 3px 6px; border-radius: var(--cs-radius-xs); text-transform: uppercase; vertical-align: middle; }
.cs-fpo-note, .anvil-fpo-note { color: var(--cs-psa); font-size: 0.85rem; margin: 0; }
.cs-fpo-note { margin-bottom: 16px; }

/* --- masthead --------------------------------------------------------------- */
.cs-masthead { position: sticky; top: 0; z-index: 20; background: rgba(14, 15, 18, 0.94); border-bottom: 1px solid var(--cs-hair); }
.cs-masthead__row { display: flex; align-items: center; gap: 12px; min-height: 62px; }
@media (min-width: 960px) { .cs-masthead__row { gap: 28px; } }
.cs-logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 820; letter-spacing: -0.03em; text-decoration: none; font-size: 1.12rem; margin: 0; }
.cs-logo__mark { width: 22px; height: 22px; border-radius: 6px; background: var(--cs-holo); box-shadow: inset 0 0 0 2px rgba(14, 15, 18, 0.55); flex: none; }
.cs-nav { display: none; }
.cs-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--cs-surface); border-bottom: 1px solid var(--cs-hair); }
.cs-nav__list { list-style: none; margin: 0; padding: 8px 16px 16px; }
.cs-nav__list a { display: block; padding: 10px 0; text-decoration: none; color: var(--cs-ink-2); font-size: 0.95rem; }
.cs-nav__list a:hover, .cs-nav__list .current-menu-item > a, .cs-nav__list .current-page-ancestor > a { color: var(--cs-ink); }
.cs-onair { display: none; align-items: center; gap: 6px; font: 600 0.7rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-ink-2); text-decoration: none; border: 1px solid var(--cs-hair-strong); border-radius: 999px; padding: 5px 10px; }
.cs-onair__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-ink-3); }
.cs-onair.is-live { color: var(--cs-live); border-color: var(--cs-live-line); background: var(--cs-live-bg); }
.cs-onair.is-live .cs-onair__dot { background: var(--cs-live); }
.cs-utility { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cs-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--cs-ink-2); text-decoration: none; }
.cs-icon-btn:hover { color: var(--cs-ink); background: var(--cs-surface); }
.cs-count { position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--cs-raised); color: var(--cs-ink); font: 600 0.62rem/16px var(--cs-mono); text-align: center; }
.cs-menu-toggle { background: none; border: 0; cursor: pointer; }
.cs-utility .cs-btn { min-height: 38px; }

@media (min-width: 960px) {
	.cs-nav { display: block; position: static; }
	.cs-nav__list { display: flex; gap: 22px; padding: 0; }
	.cs-nav__list a { padding: 0; }
	.cs-onair { display: inline-flex; }
	.cs-menu-toggle { display: none; }
}

/* --- buttons and controls ----------------------------------------------- */
.cs-btn, .anvil-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; border-radius: 10px;
	border: 1px solid var(--cs-hair-strong); background: var(--cs-surface); color: var(--cs-ink);
	font: 650 0.95rem var(--cs-font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
}
.cs-btn:hover, .anvil-btn:hover { border-color: var(--cs-ink-3); color: var(--cs-ink); }
.cs-btn--primary, .anvil-btn--primary { background: var(--cs-action); border-color: var(--cs-action); color: var(--cs-action-ink); }
.cs-btn--primary:hover, .anvil-btn--primary:hover { color: var(--cs-action-ink); border-color: var(--cs-action); filter: brightness(1.06); }
.cs-btn--ghost { background: transparent; }
.cs-btn--sm { min-height: 38px; padding: 0 14px; font-size: 0.88rem; border-radius: var(--cs-radius-sm); }
.cs-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.cs-btn--block { width: 100%; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cs-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--cs-sunken); border: 1px solid var(--cs-hair); border-radius: 12px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.cs-seg button, .cs-seg a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; border: 0; background: transparent; color: var(--cs-ink-2); padding: 8px 14px; border-radius: 9px; font-size: 0.88rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.cs-seg [aria-selected="true"], .cs-seg [aria-checked="true"], .cs-seg .is-current { background: var(--cs-raised); color: var(--cs-ink); box-shadow: 0 1px 0 var(--cs-hair-strong) inset; }

/* --- chips, grade pill, verified ---------------------------------------- */
.cs-chip, .anvil-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font: 600 0.66rem/1 var(--cs-mono); letter-spacing: 0.08em; text-transform: uppercase;
	padding: 5px 7px; border-radius: var(--cs-radius-xs); border: 1px solid var(--cs-quiet-line); color: var(--cs-quiet); background: var(--cs-quiet-bg);
}
.cs-chip--vault { color: var(--cs-vault); background: var(--cs-vault-bg); border-color: var(--cs-vault-line); }
.cs-chip--psa { color: var(--cs-psa); background: var(--cs-psa-bg); border-color: var(--cs-psa-line); }
.cs-chip--live { color: var(--cs-live); background: var(--cs-live-bg); border-color: var(--cs-live-line); }
.cs-chip--trade { color: var(--cs-trade); background: var(--cs-trade-bg); border-color: var(--cs-trade-line); }
.cs-chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cs-chip .cs-icon { margin: -2px 0; }
.cs-grade { display: inline-flex; align-items: center; font: 700 0.72rem/1 var(--cs-mono); letter-spacing: 0.04em; color: var(--cs-action); background: #000; border: 1px solid rgba(182, 255, 59, 0.35); padding: 5px 8px; border-radius: 6px; }

.cs-verified { margin: 0 0 18px; }
.cs-verified summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--cs-vault); font-size: 0.9rem; font-weight: 600; border: 1px solid var(--cs-vault-line); background: var(--cs-vault-bg); padding: 7px 12px; border-radius: 999px; }
.cs-verified summary::-webkit-details-marker { display: none; }
.cs-verified[open] summary { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.cs-verified__body { margin-top: 10px; padding: 14px 16px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); color: var(--cs-ink-2); font-size: 0.92rem; }
.cs-verified__body strong { color: var(--cs-ink); }

/* --- hero ------------------------------------------------------------------- */
.cs-hero { position: relative; padding: 36px 0 24px; overflow: hidden; }
.cs-hero__grid { display: grid; gap: 24px; align-items: center; }
.cs-hero__media { position: relative; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-hair); aspect-ratio: 16 / 9; background: var(--cs-surface); }
.cs-hero__media .cs-img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
	.cs-hero { padding: 64px 0 32px; }
	.cs-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 48px; }
}

/* --- bento ------------------------------------------------------------------ */
.cs-bento, .anvil-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .cs-bento, .anvil-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.cs-bento__tile, .anvil-bento__tile { position: relative; display: grid; gap: 6px; align-content: start; min-height: 108px; padding: 16px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); text-decoration: none; overflow: hidden; }
a.cs-bento__tile:hover { border-color: var(--cs-hair-strong); color: var(--cs-ink); }
.cs-bento__label, .anvil-bento__label { display: flex; align-items: center; gap: 8px; color: var(--cs-ink-2); font: 600 0.7rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cs-bento__value { font: 760 1.5rem/1.1 var(--cs-font); letter-spacing: -0.025em; }
.anvil-bento__value { font: 700 1.5rem/1.1 var(--cs-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cs-bento__note, .anvil-bento__note { color: var(--cs-ink-2); font-size: 0.85rem; }
.cs-bento__tile--live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, var(--cs-live-line), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* --- item tiles --------------------------------------------------------------- */
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.cs-item { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease; }
.cs-item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--cs-holo); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.cs-item:hover { transform: translateY(-2px); }
.cs-grid > .cs-item, .anvil-grid > .cs-item { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.cs-item:hover::after, .cs-item:focus-within::after { opacity: 1; }
.cs-item__media { position: relative; aspect-ratio: 3 / 4; background: #111318; overflow: hidden; }
.cs-item__media .cs-img { width: 100%; height: 100%; object-fit: cover; }
.cs-item--slab .cs-item__media .cs-img { object-fit: contain; padding: 6px; }
.cs-item__chip { position: absolute; top: 10px; left: 10px; z-index: 2; }
.cs-item__chip .cs-chip, .cs-stage__top .cs-chip { background-color: rgba(14, 15, 18, 0.86); }
.cs-item__body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.cs-item__grade { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 0.72rem; }
.cs-detail__grade { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 0.9rem; }
.cs-detail__grade .cs-grade { font-size: 0.85rem; padding: 6px 10px; }
.cs-item__title { font-size: 0.98rem; font-weight: 650; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
.cs-item__link { color: inherit; text-decoration: none; }
.cs-item__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.cs-item__meta { color: var(--cs-ink-2); font-size: 0.82rem; margin: 0; }
.cs-item__price { margin: 6px 0 0; font-size: 1.15rem; font-weight: 700; }
.cs-item__unit { font: 600 0.7rem var(--cs-mono); color: var(--cs-ink-2); letter-spacing: 0.06em; }
.cs-item .cs-btn { position: relative; z-index: 2; margin-top: 8px; }

/* --- panels, points ------------------------------------------------------------ */
.cs-panel { background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); padding: 22px; }
.cs-panel--split { display: grid; gap: 20px; }
@media (min-width: 900px) { .cs-panel--split { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.cs-choice { display: grid; gap: 12px; }
@media (min-width: 560px) { .cs-choice { grid-template-columns: 1fr 1fr; } }
.cs-choice__opt { display: grid; gap: 6px; padding: 16px; border-radius: var(--cs-radius); border: 1px solid var(--cs-hair-strong); background: var(--cs-sunken); }
.cs-choice__opt.is-picked { border-color: var(--cs-action); box-shadow: 0 0 0 1px var(--cs-action) inset; }
.cs-choice__opt strong { display: flex; align-items: center; gap: 8px; }
.cs-choice__opt span { color: var(--cs-ink-2); font-size: 0.88rem; }
.cs-points { display: grid; gap: 14px; }
@media (min-width: 720px) { .cs-points { grid-template-columns: repeat(2, 1fr); } }
.cs-point { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.cs-point__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cs-raised); color: var(--cs-action); }
.cs-point p { margin: 4px 0 0; color: var(--cs-ink-2); }
.cs-points--spaced { gap: 26px 32px; margin-top: 22px; }
.cs-panel--visit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cs-panel--visit p { margin: 6px 0 0; }
.cs-figure-media { position: relative; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-hair); }
.cs-figure-media .cs-img { width: 100%; height: auto; }

/* --- item page -------------------------------------------------------------------- */
.cs-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--cs-ink-3); font-size: 0.82rem; margin: 0 0 16px; }
.cs-crumbs a { color: var(--cs-ink-2); text-decoration: none; }
.cs-detail { display: grid; gap: 28px; }
@media (min-width: 960px) { .cs-detail { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; } .cs-detail__info { position: sticky; top: 86px; } }
.cs-viewer { display: grid; gap: 12px; }
.cs-viewer__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: radial-gradient(70% 60% at 50% 40%, #1d2028, #0f1014); border: 1px solid var(--cs-hair); border-radius: 20px; overflow: hidden; }
.cs-viewer__stage .cs-tilt { width: 72%; }
.cs-viewer__zoom { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--cs-ink-2); background: rgba(14, 15, 18, 0.8); border: 1px solid var(--cs-hair); padding: 6px 10px; border-radius: 999px; }
.cs-tilt { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.12s ease-out; will-change: transform; border-radius: 14px; }
.cs-tilt .cs-img { width: 100%; height: auto; border-radius: 14px; }
.cs-tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, 0.22), transparent 42%), var(--cs-holo); mix-blend-mode: color-dodge; }
.cs-tilt.is-active::after { opacity: 0.32; }
.cs-viewer__tabs { justify-self: center; }

.cs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.cs-facts div { background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); padding: 10px 12px; min-width: 0; }
.cs-facts dt { color: var(--cs-ink-3); font: 600 0.62rem var(--cs-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.cs-facts dd { margin: 6px 0 0; font: 650 0.95rem var(--cs-mono); }
.cs-proofline { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px; background: var(--cs-sunken); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); font-size: 0.9rem; }
.cs-proofline div { display: flex; align-items: center; gap: 8px; color: var(--cs-ink-2); flex-wrap: wrap; }
.cs-proofline a { color: var(--cs-ink); }

.cs-buy { display: grid; gap: 14px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: 18px; padding: 18px; margin-bottom: 24px; }
.cs-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.cs-price__value { font: 750 2rem/1 var(--cs-mono); letter-spacing: -0.03em; }
.cs-price__unit { font: 600 0.8rem var(--cs-mono); color: var(--cs-ink-2); letter-spacing: 0.06em; }
.cs-price__eur { color: var(--cs-ink-2); font-size: 0.9rem; }
.cs-fees { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 6px; font-size: 0.88rem; color: var(--cs-ink-2); border-top: 1px solid var(--cs-hair); }
.cs-fees li { display: flex; justify-content: space-between; gap: 12px; }
.cs-fees .cs-mono { color: var(--cs-ink); }
.cs-fees .is-total { padding-top: 8px; border-top: 1px solid var(--cs-hair); color: var(--cs-ink); font-weight: 650; }
.cs-buy__pay { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--cs-ink-2); font-size: 0.82rem; flex-wrap: wrap; }
.cs-seg--wide { display: flex; width: 100%; }
.cs-seg--wide > * { flex: 1 1 0; }

.cs-comps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
.cs-comps div { padding: 12px; border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-comps dt { color: var(--cs-ink-3); font: 600 0.62rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cs-comps dd { margin: 6px 0 0; font: 650 1rem var(--cs-mono); }

.cs-timeline { list-style: none; margin: 0 0 22px; padding: 0 0 0 20px; border-left: 2px solid var(--cs-hair-strong); display: grid; gap: 14px; }
.cs-timeline li { position: relative; display: grid; gap: 2px; }
.cs-timeline li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--cs-ground); border: 2px solid var(--cs-ink-3); }
.cs-timeline li.is-done::before { background: var(--cs-vault); border-color: var(--cs-vault); }
.cs-timeline time { font: 600 0.7rem var(--cs-mono); color: var(--cs-ink-3); letter-spacing: 0.06em; }
.cs-timeline span { color: var(--cs-ink); font-size: 0.95rem; }
.cs-timeline small { font-size: 0.75rem; }
.cs-proof { background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); padding: 14px 16px; }
.cs-proof summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.cs-proof dl { display: grid; gap: 10px; margin: 14px 0 0; font-size: 0.9rem; }
.cs-proof dt { color: var(--cs-ink-3); font: 600 0.65rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.cs-proof dd { margin: 2px 0 0; color: var(--cs-ink-2); }

/* Phone: the buy action lives in the thumb zone. */
.cs-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(22, 24, 29, 0.97); border-top: 1px solid var(--cs-hair); }
.cs-buybar__price { display: grid; line-height: 1.1; }
.cs-buybar__price strong { font: 750 1.15rem var(--cs-mono); }
.cs-buybar__price span { color: var(--cs-ink-2); font-size: 0.75rem; }
.cs-buybar .cs-btn { margin-left: auto; flex: 1; max-width: 220px; }
body:has(.cs-buybar) .cs-footer { padding-bottom: 96px; }
body:has(.cs-buybar):has(.cs-tabbar) .cs-buybar { bottom: 64px; }
@media (min-width: 960px) { .cs-buybar { display: none; } }

/* --- shop --------------------------------------------------------------------- */
.cs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.cs-toolbar__spacer { flex: 1; }
.cs-games { list-style: none; display: flex; gap: 8px; margin: 0 0 18px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.cs-games a { display: inline-flex; align-items: center; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cs-hair-strong); color: var(--cs-ink-2); text-decoration: none; font-size: 0.9rem; }
.cs-games a.is-current, .cs-games a:hover { border-color: var(--cs-action); color: var(--cs-ink); }

/* --- live -------------------------------------------------------------------- */
.cs-live { display: grid; gap: 18px; }
@media (min-width: 1000px) { .cs-live { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.cs-stage { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--cs-hair); background: #000; }
.cs-stage .cs-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.cs-stage__top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.cs-stage__lower { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; gap: 10px; align-items: center; background: rgba(14, 15, 18, 0.86); border: 1px solid var(--cs-hair); border-radius: 10px; padding: 8px 12px; font-size: 0.85rem; }
.cs-stage__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.cs-stage__play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(14, 15, 18, 0.78); border: 1px solid var(--cs-hair-strong); color: var(--cs-ink); }
.cs-side { display: grid; gap: 14px; }
.cs-ticker { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-ticker li { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); }
.cs-ticker__thumb { position: relative; width: 44px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--cs-sunken); }
.cs-ticker__thumb .cs-img { width: 100%; height: 100%; object-fit: cover; }
.cs-ticker strong { display: block; font-size: 0.9rem; }
.cs-ticker small { color: var(--cs-ink-2); font: 0.72rem var(--cs-mono); }
.cs-rules { font-size: 0.88rem; color: var(--cs-ink-2); }
.cs-ticker .cs-btn--sm { min-height: 32px; padding: 0 10px; font-size: 0.8rem; }
.cs-psa-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; color: var(--cs-ink-2); font-size: 0.88rem; }
.cs-psa-cta .cs-icon { color: var(--cs-psa); }
.cs-rules ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }

/* --- grading tracker ------------------------------------------------------------- */
.cs-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.cs-track li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 0 0 18px; }
.cs-track li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 0.75rem var(--cs-mono); background: var(--cs-surface); border: 1px solid var(--cs-hair-strong); color: var(--cs-ink-2); }
.cs-track li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--cs-hair-strong); }
.cs-track li:last-child::after { display: none; }
.cs-track li.is-done::before { background: var(--cs-vault); border-color: var(--cs-vault); color: #06281c; content: "\2713"; }
.cs-track li.is-now::before { background: var(--cs-psa-bg); border-color: var(--cs-psa); color: var(--cs-psa); }
.cs-track strong { display: block; }
.cs-track span { color: var(--cs-ink-2); font-size: 0.88rem; }
.cs-cards3 { display: grid; gap: 14px; }
@media (min-width: 900px) { .cs-cards3 { grid-template-columns: repeat(3, 1fr); } }
.cs-detail--grading { margin-top: 8px; }
@media (min-width: 960px) { .cs-detail--grading { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.cs-reveal { position: relative; width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 2 / 3; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-hair); background: #0b0c10; display: grid; place-items: center; }
.cs-reveal .cs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(0.55); transform: scale(1.1); }
.cs-reveal__cta { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 16px; }
.cs-reveal .cs-img { transition: filter 0.6s ease, transform 0.6s ease; }
.cs-reveal__done { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: none; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; background: rgba(14, 15, 18, 0.9); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); }
.cs-reveal__done .cs-actions { margin-left: auto; gap: 8px; }
.cs-reveal.is-revealed .cs-img { filter: none; transform: none; }
.cs-reveal.is-revealed .cs-reveal__cta { display: none; }
.cs-reveal.is-revealed .cs-reveal__done { display: flex; }
.cs-reveal.is-revealed::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background-size: 250% 100%; animation: cs-flash 0.8s ease-out 1 both; }
@keyframes cs-flash { from { background-position: 120% 0; opacity: 1; } to { background-position: -20% 0; opacity: 0; } }

/* --- the apps (anvil-vault screens) --------------------------------------------- */
.cs-app { padding-top: 28px; padding-bottom: 110px; }
.anvil-screen { display: grid; gap: 18px; }
.anvil-screen__head { display: grid; gap: 4px; }
.anvil-eyebrow { color: var(--cs-ink-2); font: 600 0.72rem var(--cs-mono); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.anvil-title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; font-weight: 780; letter-spacing: -0.025em; }
.anvil-lede { color: var(--cs-ink-2); margin: 0; }
.anvil-tabs { display: flex; gap: 4px; padding: 4px; background: var(--cs-sunken); border: 1px solid var(--cs-hair); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.anvil-tabs span { flex: none; padding: 8px 12px; border-radius: 9px; color: var(--cs-ink-2); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.anvil-tabs span.is-current { background: var(--cs-raised); color: var(--cs-ink); }
.anvil-tabs b { font-family: var(--cs-mono); margin-left: 4px; color: var(--cs-ink-3); }
.anvil-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .anvil-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.anvil-empty { background: var(--cs-surface); border: 1px dashed var(--cs-hair-strong); border-radius: var(--cs-radius-lg); padding: 24px; display: grid; gap: 10px; justify-items: start; }
.anvil-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .anvil-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.anvil-tile { display: grid; gap: 10px; align-content: space-between; min-height: 132px; padding: 16px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); text-decoration: none; }
.anvil-tile:hover { border-color: var(--cs-action); color: var(--cs-ink); }
.anvil-tile__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cs-raised); color: var(--cs-action); }
.anvil-tile__title { display: block; font-size: 1.1rem; font-weight: 750; }
.anvil-tile__icon:empty { display: none; }
a.anvil-bento__tile:hover { border-color: var(--cs-hair-strong); color: var(--cs-ink); }
.anvil-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.anvil-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; }
.anvil-swap__side { display: grid; gap: 8px; }
.anvil-swap__icon { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cs-raised); color: var(--cs-trade); border: 1px solid var(--cs-trade-line); }
@media (min-width: 900px) { .anvil-swap { max-width: 720px; } }
.anvil-tile__note { display: block; color: var(--cs-ink-2); font-size: 0.85rem; margin-top: 2px; }
.anvil-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.anvil-figures div { background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius); padding: 14px; }
.anvil-figures dt { color: var(--cs-ink-3); font: 600 0.68rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-figures dd { margin: 6px 0 0; font: 700 1.4rem var(--cs-mono); }
.anvil-mono { font-family: var(--cs-mono); }
.anvil-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); overflow: hidden; }
.anvil-list__row { display: grid; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--cs-hair); background: var(--cs-surface); }
.anvil-list__row:last-child { border-bottom: 0; }
.anvil-list__row span { color: var(--cs-ink-2); font-size: 0.9rem; }
.anvil-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.anvil-chip__n { color: var(--cs-ink); margin-left: 2px; }

/* --- tab bar (signed-in collectors, phones) ------------------------------------- */
.cs-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: rgba(18, 20, 25, 0.98); border-top: 1px solid var(--cs-hair);
	padding-bottom: env(safe-area-inset-bottom);
}
.cs-tabbar__tab { display: grid; justify-items: center; gap: 3px; padding: 9px 4px 10px; font-size: 0.7rem; font-weight: 600; color: var(--cs-ink-2); text-decoration: none; }
.cs-tabbar__tab.is-current { color: var(--cs-action); }
body:has(.cs-tabbar) .cs-footer { padding-bottom: 88px; }
@media (min-width: 960px) { .cs-tabbar { display: none; } body:has(.cs-tabbar) .cs-footer { padding-bottom: 32px; } }

/* --- footer ---------------------------------------------------------------------- */
.cs-footer { border-top: 1px solid var(--cs-hair); margin-top: 56px; padding: 36px 0; background: var(--cs-sunken); }
.cs-footer__grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .cs-footer__grid { grid-template-columns: 2fr 1fr; } }
.cs-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-footer__list a { color: var(--cs-ink-2); text-decoration: none; }
.cs-footer p { margin: 0 0 8px; }
.cs-footer .cs-logo { margin-bottom: 12px; }
.cs-footer__base { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cs-hair); color: var(--cs-ink-3); font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.cs-tilt { transform: none !important; }
	.cs-tilt::after { display: none; }
	.cs-item:hover { transform: none; }
}

/* --- store product photos (Anthony's, in the site's photo box) ------------------ */
/* tools/seed/photo-box.php stands every photo in the graphite box of the stand-in
   pictures, at 3:4, so a product photo fills its frame like any other picture. */
.cs-item--product .cs-fpo--soon { background: var(--cs-photobox); }
.cs-item__eur { font-size: 0.8rem; font-weight: 500; color: var(--cs-ink-2); margin-left: 4px; }
.cs-item__stock { margin: 2px 0 0; font: 600 0.7rem/1.4 var(--cs-mono); letter-spacing: 0.04em; color: var(--cs-ink-3); }
.cs-item__stock.is-last, .cs-detail__stock.is-last { color: var(--cs-live); }
.cs-viewer__stage--product { aspect-ratio: 3 / 4; background: var(--cs-photobox); }
.cs-viewer__stage--product .cs-tilt { width: 100%; height: 100%; border-radius: 0; transform: none !important; }
.cs-viewer__stage--product .cs-tilt::after { display: none; }
.cs-viewer__stage--product .cs-tilt .cs-img { height: 100%; object-fit: cover; border-radius: 0; }
.cs-detail__stock { display: flex; align-items: center; gap: 6px; margin: 2px 0 14px; color: var(--cs-ink-2); font: 600 0.8rem var(--cs-mono); }
.cs-after { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.cs-after li { display: flex; gap: 10px; align-items: flex-start; color: var(--cs-ink-2); font-size: 0.92rem; }
.cs-after li svg { flex: none; margin-top: 2px; color: var(--cs-vault); }
.cs-after strong { color: var(--cs-ink); }

/* --- app forms, notices, tables and item detail (anvil-vault, Pilot 1) ----------- */
.anvil-notice { margin: 0; padding: 12px 14px; border-radius: var(--cs-radius); border: 1px solid; font-size: 0.92rem; }
.anvil-notice--ok { color: var(--cs-vault); background: var(--cs-vault-bg); border-color: var(--cs-vault-line); }
.anvil-notice--error { color: var(--cs-live); background: var(--cs-live-bg); border-color: var(--cs-live-line); }
.anvil-panel { display: grid; gap: 14px; padding: 18px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); }
.anvil-panel h2 { margin: 0; font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; }
.anvil-panel p { margin: 0; color: var(--cs-ink-2); }
.anvil-form { display: grid; gap: 14px; max-width: 560px; }
.anvil-form--wide { max-width: none; }
.anvil-field { display: grid; gap: 6px; }
.anvil-field > span { color: var(--cs-ink-3); font: 600 0.68rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-field input, .anvil-field select, .anvil-field textarea { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-hair-strong); background: var(--cs-sunken); color: var(--cs-ink); font: inherit; }
.anvil-field input[type="file"] { padding: 9px 12px; color: var(--cs-ink-2); }
.anvil-field input:focus-visible, .anvil-field select:focus-visible, .anvil-field textarea:focus-visible { outline: 2px solid var(--cs-action); outline-offset: 1px; }
.anvil-field small { color: var(--cs-ink-3); font-size: 0.8rem; }
.anvil-row { display: grid; gap: 14px; }
@media (min-width: 720px) { .anvil-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anvil-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anvil-inline .anvil-field { flex: 1 1 180px; }
.anvil-inline input { min-height: 40px; padding: 8px 12px; }
.anvil-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.anvil-table-wrap { overflow-x: auto; border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.anvil-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.anvil-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cs-hair); color: var(--cs-ink-3); font: 600 0.65rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.anvil-table td { padding: 12px 14px; border-bottom: 1px solid var(--cs-hair); color: var(--cs-ink-2); vertical-align: top; }
.anvil-table tr:last-child td { border-bottom: 0; }
.anvil-table strong { color: var(--cs-ink); font-weight: 650; }
.anvil-table a { color: var(--cs-ink); }
.anvil-hash { font-family: var(--cs-mono); font-size: 0.8rem; word-break: break-all; }
.anvil-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--cs-quiet-line); background: var(--cs-quiet-bg); color: var(--cs-quiet); font: 600 0.68rem var(--cs-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.anvil-status--submitted, .anvil-status--planned { color: var(--cs-psa); background: var(--cs-psa-bg); border-color: var(--cs-psa-line); }
.anvil-status--confirmed, .anvil-status--live { color: var(--cs-vault); background: var(--cs-vault-bg); border-color: var(--cs-vault-line); }
.anvil-status--failed { color: var(--cs-live); background: var(--cs-live-bg); border-color: var(--cs-live-line); }
.anvil-item { display: grid; gap: 22px; }
@media (min-width: 900px) { .anvil-item { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; } }
.anvil-item__photo { border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-photobox); aspect-ratio: 3 / 4; }
.anvil-item__photo .cs-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anvil-item__body { display: grid; gap: 16px; align-content: start; }
.anvil-item__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.anvil-code { display: inline-block; padding: 6px 12px; border-radius: var(--cs-radius-sm); background: var(--cs-raised); border: 1px solid var(--cs-hair-strong); font: 700 1.3rem var(--cs-mono); letter-spacing: 0.18em; color: var(--cs-ink); }

/* --- the desk's History and item dossier ------------------------------------------ */
@media (min-width: 900px) { .anvil-figures--six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.anvil-figures--six dd { font-size: 1.25rem; }
.anvil-tabs a { flex: none; padding: 8px 12px; border-radius: 9px; color: var(--cs-ink-2); font-size: 0.85rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.anvil-tabs a.is-current { background: var(--cs-raised); color: var(--cs-ink); }
.anvil-tabs a:hover { color: var(--cs-ink); }
.anvil-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.anvil-filter .anvil-field { flex: 1 1 220px; }
.anvil-filter .anvil-field input, .anvil-filter .anvil-field select { min-height: 42px; padding: 8px 12px; }
.anvil-pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--cs-ink-3); font: 600 0.75rem var(--cs-mono); }
.anvil-pager span { margin-right: auto; }
.anvil-muted { color: var(--cs-ink-3); }
.anvil-item__media { display: grid; gap: 12px; align-content: start; }
.anvil-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.anvil-photos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-hair); }
.anvil-photo { margin: 0; display: grid; gap: 6px; align-content: start; }
.anvil-photo__withdraw summary { font-size: 0.8rem; color: var(--cs-ink-2); cursor: pointer; }
.anvil-photo:has(.anvil-photo__withdraw[open]) { grid-column: 1 / -1; }
.anvil-receive-photos { display: grid; gap: 12px; }
.anvil-receive-photos__product { display: flex; align-items: center; gap: 12px; }
.anvil-receive-photos__thumb { flex: none; width: 60px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-hair); background: var(--cs-photobox); }
.anvil-receive-photos__note { margin: 0; color: var(--cs-ink-2); font-size: 0.9rem; }
.anvil-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px 18px; margin: 0; }
.anvil-facts dt { color: var(--cs-ink-3); font: 600 0.65rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-facts dd { margin: 3px 0 0; color: var(--cs-ink); overflow-wrap: anywhere; }
.anvil-facts small { color: var(--cs-ink-3); }

/* --- the desk's Shop wallet --------------------------------------------------------- */
.anvil-wallet { display: grid; gap: 12px; }
@media (min-width: 900px) { .anvil-wallet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.anvil-wallet__balance, .anvil-wallet__fund { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-hair); background: var(--cs-surface); }
.anvil-wallet__balance { background: linear-gradient(160deg, rgba(182, 255, 59, 0.08), transparent 60%), var(--cs-surface); border-color: rgba(182, 255, 59, 0.28); }
.anvil-wallet__label { color: var(--cs-ink-3); font: 600 0.68rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-wallet__value { font: 800 clamp(2rem, 6vw, 3rem)/1 var(--cs-mono); letter-spacing: -0.02em; color: var(--cs-ink); }
.anvil-wallet__value small { font-size: 0.4em; color: var(--cs-ink-2); letter-spacing: 0.06em; }
.anvil-wallet__note { color: var(--cs-ink-3); font-size: 0.85rem; }
.anvil-wallet__fund code { display: block; padding: 10px 12px; border-radius: var(--cs-radius-sm); background: var(--cs-sunken); border: 1px solid var(--cs-hair); color: var(--cs-ink-2); }
.anvil-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--cs-sunken); }
.anvil-bar__part { display: block; flex-grow: 0; flex-shrink: 0; }
.anvil-bar__part--net { background: #f87171; }
.anvil-bar__part--anvil { background: #b6ff3b; }
.anvil-bar__part--held { background: #34d399; }
.anvil-bar__part--reg { background: #60a5fa; }
.anvil-bar__part--dep { background: #fbbf24; }
.anvil-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .anvil-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.anvil-legend li { display: grid; grid-template-columns: 12px auto 1fr; column-gap: 8px; align-items: baseline; font-size: 0.92rem; }
.anvil-legend .anvil-mono { justify-self: end; color: var(--cs-ink); }
.anvil-legend small { grid-column: 2 / -1; color: var(--cs-ink-3); font-size: 0.78rem; }
.anvil-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* --- utilities (last, so they win) --------------------------------------------- */
@media (max-width: 959px) { .cs-hide-phone { display: none !important; } }

/* Live (PLAN-LIVE §7): the stream in the stage, the pulls list, the console's pack, the pull shot. */
.cs-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Rows without a thumbnail: the words, then the chip. (.cs-ticker li sets three columns, so these name the li too.) */
#cs-live-pull-list li, .cs-ticker li.cs-ticker__empty, .cs-ticker li.cs-ticker__pull { grid-template-columns: minmax(0, 1fr) auto; }
.anvil-panel--now { border-color: var(--cs-live, #ee1d52); box-shadow: inset 3px 0 0 var(--cs-live, #ee1d52); }
.anvil-pullshot { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px; border: 1px solid var(--cs-hair); }

/* The desk's Live (PLAN-LIVE L4): the featured show and its countdown, the month's calendar, a show's agenda. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.anvil-feature { display: grid; gap: 16px 24px; padding: 20px; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-hair-strong); background: linear-gradient(160deg, rgba(248, 113, 113, 0.07), transparent 55%), var(--cs-surface); color: var(--cs-ink); text-decoration: none; }
@media (min-width: 900px) { .anvil-feature { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .anvil-feature__actions { grid-column: 1 / -1; } }
.anvil-feature--link:hover { border-color: var(--cs-action); color: var(--cs-ink); }
.anvil-feature.is-live { border-color: var(--cs-live-line); box-shadow: inset 3px 0 0 var(--cs-live); }
.anvil-feature__main { display: grid; gap: 6px; }
.anvil-feature__title { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 780; letter-spacing: -0.02em; text-wrap: balance; }
.anvil-feature__when, .anvil-feature__count { margin: 0; color: var(--cs-ink-2); }
.anvil-countdown { font: 700 clamp(1.4rem, 4vw, 2rem)/1.1 var(--cs-mono); color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.anvil-countdown.is-live { color: var(--cs-live); }
.anvil-feature__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.anvil-feature__stats div { padding: 12px 14px; border-radius: var(--cs-radius); background: var(--cs-sunken); border: 1px solid var(--cs-hair); }
@media (min-width: 900px) { .anvil-feature__stats div { min-width: 112px; } }
.anvil-feature__stats dt { color: var(--cs-ink-3); font: 600 0.65rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-feature__stats dd { margin: 4px 0 0; font: 700 1.5rem var(--cs-mono); font-variant-numeric: tabular-nums; }
.anvil-feature__stats .anvil-feature__small { font-size: 1rem; }
.anvil-feature__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.anvil-feature__actions .anvil-inline .anvil-field { flex: 1 1 280px; }
.anvil-feature__overlay { flex-basis: 100%; margin: 0; color: var(--cs-ink-3); }
.anvil-feature__overlay a { color: var(--cs-ink-2); }
.anvil-cal-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.anvil-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--cs-hair); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); overflow: hidden; }
.anvil-cal__dow { padding: 8px 10px; background: var(--cs-sunken); color: var(--cs-ink-3); font: 600 0.65rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.anvil-cal__day { min-width: 0; min-height: 104px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--cs-surface); }
.anvil-cal__day.is-other { background: var(--cs-sunken); }
.anvil-cal__day.is-other .anvil-cal__date { opacity: 0.5; }
.anvil-cal__date { align-self: flex-start; display: inline-flex; gap: 6px; font: 600 0.8rem/26px var(--cs-mono); color: var(--cs-ink-2); }
.anvil-cal__wd { display: none; }
.anvil-cal__day.is-today .anvil-cal__date { padding: 0 9px; border-radius: 999px; background: var(--cs-action); color: var(--cs-action-ink); }
.anvil-cal__show { min-width: 0; display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--cs-radius-sm); background: var(--cs-raised); border: 1px solid var(--cs-hair-strong); border-left: 3px solid var(--cs-psa); color: var(--cs-ink); text-decoration: none; font-size: 0.8rem; }
.anvil-cal__show strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anvil-cal__show small { color: var(--cs-ink-3); font-size: 0.72rem; }
.anvil-cal__show:hover { border-color: var(--cs-action); color: var(--cs-ink); }
.anvil-cal__show.is-on_air { border-left-color: var(--cs-live); background: var(--cs-live-bg); }
.anvil-cal__show.is-ended { border-left-color: var(--cs-quiet); opacity: 0.75; }
@media (max-width: 719px) {
	.anvil-cal { grid-template-columns: minmax(0, 1fr); }
	.anvil-cal__dow, .anvil-cal__day:not(.is-today):not(:has(.anvil-cal__show)) { display: none; }
	.anvil-cal__day { min-height: 0; }
	.anvil-cal__wd { display: inline; }
}
.anvil-details > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.anvil-details > summary::-webkit-details-marker { display: none; }
.anvil-details > summary::before { content: "+"; width: 1ch; font: 700 1.1rem var(--cs-mono); color: var(--cs-action); }
.anvil-details[open] > summary::before { content: "\2212"; }
.anvil-agenda tr.is-opening td { background: var(--cs-live-bg); }
.anvil-agenda tr.is-cancelled td { opacity: 0.45; }
.anvil-agenda td:first-child { font-variant-numeric: tabular-nums; }
.cs-buy__pay--test { color: var(--cs-psa); }
.cs-buy__pay--test { justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; text-align: left; }
.cs-buy__pay--test svg { flex: none; margin-top: 3px; }
.cs-seg button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The shop (PLAN-ORDERS): prices in euros and dollars, the bag, checkout, an order. */
.cs-pair { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--cs-mono); font-variant-numeric: tabular-nums; }
.cs-pair__eur { color: var(--cs-ink); font-weight: 700; }
.cs-pair__usd { color: var(--cs-ink); font-weight: 700; }
.cs-pair__usd::before { content: "·"; margin-right: 8px; color: var(--cs-ink-3); font-weight: 400; }
.cs-pair--big { font: 750 1.9rem/1 var(--cs-mono); letter-spacing: -0.03em; gap: 12px; }
.cs-pair--big .cs-pair__usd::before { margin-right: 12px; }
.cs-item__price .cs-pair { gap: 6px; font-size: 0.95rem; }
.cs-item__price .cs-pair__usd::before { margin-right: 6px; }
.cs-buybar__price .cs-pair { font-size: 1rem; }
.cs-buy__form { display: grid; gap: 10px; }
.cs-bag__grid, .cs-checkout__grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .cs-bag__grid, .cs-checkout__grid { grid-template-columns: minmax(0, 1fr) 360px; } }
.cs-lines { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.cs-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); }
@media (min-width: 640px) { .cs-line { grid-template-columns: 96px minmax(0, 1fr) auto; } }
.cs-line__photo { display: block; aspect-ratio: 3 / 4; border-radius: var(--cs-radius-sm); overflow: hidden; background: var(--cs-photobox); }
.cs-line__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-line__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cs-line__title { color: var(--cs-ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
a.cs-line__title:hover { text-decoration: underline; }
.cs-line__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--cs-ink-2); font-size: 0.85rem; }
.cs-line__unit { margin: 0; color: var(--cs-ink-2); font-size: 0.85rem; }
.cs-line__unit .cs-pair { font-size: 0.85rem; gap: 5px; }
.cs-line__unit .cs-pair__eur, .cs-line__unit .cs-pair__usd { font-weight: 600; color: var(--cs-ink-2); }
.cs-line__units { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; }
.cs-line__units a { color: var(--cs-vault); }
.cs-line__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-line__qty select { min-height: 36px; padding: 4px 28px 4px 10px; border-radius: var(--cs-radius-sm); border: 1px solid var(--cs-hair-strong); background: var(--cs-sunken); color: var(--cs-ink); font: inherit; }
.cs-line__remove { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cs-line__total { margin: 0; grid-column: 2; }
@media (min-width: 640px) { .cs-line__total { grid-column: auto; text-align: right; } }
.cs-ways { border: 1px solid var(--cs-hair); }
.cs-ways legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.cs-ways legend h2 { margin: 0; }
.cs-way { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--cs-hair-strong); border-radius: var(--cs-radius); background: var(--cs-sunken); cursor: pointer; }
.cs-way:has(input:checked) { border-color: var(--cs-action); }
.cs-way input { margin-top: 4px; accent-color: var(--cs-action); }
.cs-way span { display: grid; gap: 2px; }
.cs-way small { color: var(--cs-ink-2); }
.cs-ways__soon { font-size: 0.85rem; margin: 0; }
.cs-checkout__form { display: grid; gap: 16px; }
.cs-checkout__pay { font-size: 1.05rem; }
.cs-sumlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-sumlines li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 0.88rem; }
.cs-sumlines img { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; background: var(--cs-photobox); }
.cs-sumlines span { display: grid; gap: 2px; min-width: 0; }
.cs-sumlines small { color: var(--cs-ink-2); }
.cs-track--row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 22px; }
.cs-track--row li { grid-template-columns: 28px auto; padding: 0; align-items: center; }
.cs-track--row li::after { display: none; }
.cs-order__facts { font-size: 0.85rem; margin: 0; }
.cs-checkout__gate { max-width: 620px; }
.cs-bag__sum .cs-fees, .cs-checkout__sum .cs-fees:first-child { border-top: 0; padding-top: 0; }
.cs-order aside .cs-fees { border-top: 0; padding-top: 0; }
/* The host's check-in (PLAN-LIVE: a show is called off without it). */
.anvil-checkin { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--cs-radius); border: 1px solid var(--cs-quiet-line); background: var(--cs-quiet-bg); }
.anvil-checkin p { margin: 0; flex: 1 1 280px; color: var(--cs-ink-2); }
.anvil-checkin.is-open { border-color: var(--cs-psa-line); background: var(--cs-psa-bg); }
.anvil-checkin.is-open p { color: var(--cs-psa); }
.anvil-checkin.is-ready { border-color: var(--cs-vault-line); background: var(--cs-vault-bg); }
.anvil-checkin.is-ready p { color: var(--cs-vault); }
.anvil-checkin.is-missed { border-color: var(--cs-live-line); background: var(--cs-live-bg); }
.anvil-checkin.is-missed p { color: var(--cs-live); }
.anvil-feature__checkin { margin: 0; font-size: 0.88rem; color: var(--cs-ink-2); }
.anvil-feature__checkin.is-open { color: var(--cs-psa); }
.anvil-feature__checkin.is-ready { color: var(--cs-vault); }
.anvil-feature__checkin.is-missed { color: var(--cs-live); }
.cs-line.is-gone { opacity: 0.7; }

/* Paying in coins: the amount, the address, a QR code, and the payment followed live (template-order.php). */
.cs-coinpay { display: grid; gap: var(--s-3, 12px); margin-bottom: var(--s-5, 24px); }
.cs-coinpay__amount { margin: 0; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.cs-coinpay__fiat { margin: 0; color: var(--ink-2, inherit); }
.cs-coinpay__grid { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: var(--s-4, 16px); align-items: start; }
.cs-coinpay__qr { background: #fff; border-radius: 10px; padding: 6px; max-width: 200px; }
.cs-coinpay__qr svg { display: block; width: 100%; height: auto; }
.cs-coinpay__facts { margin: 0; display: grid; gap: var(--s-3, 12px); min-width: 0; }
.cs-coinpay__facts dt { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3, inherit); }
.cs-coinpay__facts dd { margin: 2px 0 0; min-width: 0; }
.cs-coinpay__addr { overflow-wrap: anywhere; word-break: break-all; }
.cs-coinpay__status { margin: 0; font-weight: 600; }
.cs-coinpay__note { margin: 0; font-size: 0.9rem; }
@media (max-width: 560px) { .cs-coinpay__grid { grid-template-columns: 1fr; } .cs-coinpay__qr { max-width: 240px; } }

/* Signing in with a code (template-sign-in.php; the vault's Sign-in and the desk's People). */
.cs-signin { max-width: 640px; }
.cs-signin__panel { display: grid; gap: var(--s-3, 12px); }
.cs-signin__form { display: grid; gap: var(--s-3, 12px); }
.cs-signin__steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--s-4, 16px); display: grid; gap: var(--s-4, 16px); }
.cs-signin__steps > li { counter-increment: step; position: relative; padding-left: 44px; }
.cs-signin__steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-sunken); border: 1px solid var(--cs-hair-strong); font: 600 0.9rem var(--cs-mono); }
.cs-signin__steps h2 { margin: 2px 0 6px; font-size: 1.05rem; }
.cs-signin__add { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: var(--s-4, 16px); align-items: start; }
.cs-signin__qr, .anvil-qr-box { background: #fff; border-radius: 10px; padding: 6px; max-width: 200px; }
.cs-signin__qr svg, .anvil-qr-box svg { display: block; width: 100%; height: auto; }
.cs-signin__key, .anvil-break { overflow-wrap: anywhere; word-break: break-all; }
.cs-signin__codes, .anvil-codes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 1.05rem; }
.cs-signin__codes li, .anvil-codes li { padding: 8px 10px; border: 1px dashed var(--cs-hair-strong); border-radius: var(--cs-radius-sm); text-align: center; }
.cs-signin__lost summary { cursor: pointer; color: var(--cs-ink-2); }
.cs-signin__lost[open] summary { margin-bottom: var(--s-2, 8px); }
.cs-signin__staff { margin-top: var(--s-3, 12px); }
@media (max-width: 560px) { .cs-signin__add { grid-template-columns: 1fr; } }

/* --- the mobile pass (Pb, 2026-10-17) -----------------------------------------
 * No sideways sliding and no pinch zoom, except in the photo viewer; rows that
 * wrap instead of scrolling off the screen; a header that fits a phone; tables
 * as cards on a phone. `overflow-x: clip` (not hidden) keeps the sticky header
 * working, because it makes no scroll container. */
html, body { overflow-x: clip; }
@media (max-width: 959px) {
	html, body { touch-action: pan-y; } /* Vertical scrolling only: no sideways slide, no pinch or double-tap zoom. */
	.cs-masthead__row { gap: 8px; }
	.cs-utility { gap: 2px; }
	.cs-utility .cs-desk-btn { width: 40px; min-height: 40px; padding: 0; gap: 0; }
	input, select, textarea { font-size: 16px; } /* iOS zooms into anything smaller. */
}
.cs-games, .cs-seg, .anvil-tabs { flex-wrap: wrap; overflow-x: visible; }
.anvil-table-wrap, pre { touch-action: pan-x pan-y; }
@media (max-width: 639px) {
	.anvil-table-wrap { overflow-x: visible; border: 0; background: none; }
	.anvil-table, .anvil-table tbody, .anvil-table tr, .anvil-table td { display: block; width: 100%; }
	.anvil-table thead { display: none; }
	.anvil-table tr { border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); background: var(--cs-surface); padding: 10px 14px; margin-bottom: 10px; }
	.anvil-table td { border: 0; padding: 6px 0; text-align: left; overflow-wrap: anywhere; }
	.anvil-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--cs-ink-3); font: 600 0.66rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; }
	.anvil-table td:empty { display: none; }
}

/* The hero: the store's own boxes, centred in the frame. */
.cs-hero__media .cs-hero__shelf { object-position: center 55%; }

/* The vault, drawn. */
.cs-vault-emblem { display: block; width: 100%; height: auto; }
.cs-vault-emblem__wheel { transform-box: view-box; transform-origin: 200px 150px; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.cs-panel:hover .cs-vault-emblem__wheel, .cs-panel:focus-within .cs-vault-emblem__wheel { transform: rotate(120deg); }
@media (prefers-reduced-motion: reduce) { .cs-vault-emblem__wheel { transition: none; transform: none !important; } }

/* The photo viewer: full screen, pinch or double-tap to zoom, drag to look round. */
.cs-viewer__stage--product { cursor: zoom-in; }
.cs-zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #08090b; touch-action: none; overscroll-behavior: contain; }
.cs-zoom[hidden] { display: none; }
.cs-zoom__img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; object-fit: contain; transform-origin: center; transition: transform 0.18s ease-out; will-change: transform; user-select: none; -webkit-user-drag: none; }
.cs-zoom.is-moving .cs-zoom__img { transition: none; }
.cs-zoom__close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cs-hair-strong); background: var(--cs-surface); color: var(--cs-ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cs-zoom__hint { position: absolute; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; color: var(--cs-ink-3); font: 600 0.7rem var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
html.cs-zoom-open, html.cs-zoom-open body { overflow: hidden; }
.cs-signin__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cs-signin__new { margin: var(--s-4, 16px) 0 0; display: grid; gap: 8px; color: var(--cs-ink-2); text-align: center; }
/* A plain checkbox with words people read (the launch list). */
.cs-check { display: flex; align-items: flex-start; gap: 10px; color: var(--cs-ink-2); font-size: 0.95rem; line-height: 1.45; cursor: pointer; }
.cs-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cs-action); }
.cs-signin__gift { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px dashed var(--cs-action); border-radius: var(--cs-radius-sm); color: var(--cs-ink); font-size: 0.92rem; }
.cs-welcome { border-color: var(--cs-action); }

/* No generated pictures (Pb, 2026-10-17). Off air, the stage rests on a drawn
   standby screen; the vault page shows the emblem; the grading example is a
   drawn slab (cardswap_slab_emblem), blurred until its grade is revealed. */
.cs-stage__idle { position: absolute; inset: 0; background:
	radial-gradient(60% 80% at 50% 118%, rgba(182, 255, 59, 0.16), transparent 70%),
	radial-gradient(50% 70% at 0% 0%, rgba(167, 139, 250, 0.16), transparent 70%),
	radial-gradient(50% 70% at 100% 0%, rgba(34, 211, 238, 0.14), transparent 70%),
	repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
	linear-gradient(180deg, #15171c, #0b0c0f); }
.cs-stage__idle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 16px; background: var(--cs-holo); box-shadow: inset 0 0 0 5px rgba(14, 15, 18, 0.55), 0 0 60px rgba(34, 211, 238, 0.25); transform: translate(-50%, -50%); opacity: 0.9; }
.cs-hero__media--emblem { aspect-ratio: 4 / 3; background: var(--cs-ground); }
.cs-hero__media--emblem .cs-vault-emblem { width: 100%; height: 100%; }
.cs-slab-emblem { display: block; }

/* The review tools, for Pb and Anthony only (inc/review-tools.php,
   docs/PLAN-FEEDBACK.md). The question hub's stylesheet speaks the Anvil
   design system's tokens; these give them Card Swap's values, so /review/
   looks like the site it asks about. Nobody else gets this markup. */
:root {
	--anvil-space-2xs: 4px; --anvil-space-xs: 6px; --anvil-space-sm: 8px; --anvil-space-md: 12px;
	--anvil-space-lg: 18px; --anvil-space-xl: 24px; --anvil-space-2xl: 32px;
	--anvil-radius-sm: var(--cs-radius-sm); --anvil-radius-md: var(--cs-radius); --anvil-radius-lg: var(--cs-radius-lg);
	--anvil-font-mono: var(--cs-mono); --anvil-font-display: var(--cs-font);
	--anvil-text-2xs: 0.7rem; --anvil-text-xs: 0.78rem; --anvil-text-sm: 0.88rem; --anvil-text-lg: 1.12rem; --anvil-text-xl: 1.3rem;
	--anvil-content-primary: var(--cs-ink); --anvil-content-secondary: var(--cs-ink-2); --anvil-content-tertiary: var(--cs-ink-3); --anvil-content-accent: var(--cs-action);
	--anvil-surface-page: var(--cs-ground); --anvil-surface-raised: var(--cs-surface); --anvil-surface-sunken: var(--cs-sunken);
	--anvil-border-subtle: var(--cs-hair); --anvil-border-default: var(--cs-hair-strong); --anvil-border-strong: rgba(255, 255, 255, 0.24);
	--anvil-action-accent-bg: var(--cs-action); --anvil-action-accent-fg: var(--cs-action-ink);
	--anvil-color-functional-success: var(--cs-vault); --anvil-color-functional-warning-bright: var(--cs-psa); --anvil-color-functional-error: var(--cs-danger);
	--anvil-color-ink-950: #0e0f12; --anvil-color-ink-900: #16181d; --anvil-color-bone-50: #f3f4f6;
	--anvil-focus-ring: rgba(182, 255, 59, 0.55);
	--anvil-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --anvil-shadow-lg: var(--cs-shadow);
	--anvil-duration-fast: 120ms; --anvil-duration-slow: 320ms; --anvil-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.anvil-feedback { padding: 8px 0 48px; }
.anvil-feedback .anvil-section { padding: 26px 0; }
.anvil-feedback .anvil-container { width: 100%; max-width: var(--cs-max); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.anvil-feedback .anvil-container--content { max-width: 760px; }
.anvil-feedback .anvil-stack { display: flex; flex-direction: column; gap: 14px; }
.anvil-feedback .anvil-stack--2xs { gap: 4px; }
.anvil-feedback .anvil-stack--sm { gap: 8px; }
.anvil-feedback .anvil-stack--lg { gap: 20px; }
.anvil-feedback .anvil-stack--xl { gap: 28px; }
.anvil-feedback .anvil-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anvil-feedback .anvil-cluster--between { justify-content: space-between; }
.anvil-feedback h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0; font-weight: 780; text-wrap: balance; }
.anvil-feedback h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0; font-weight: 760; text-wrap: balance; }
.anvil-feedback .anvil-lead { color: var(--cs-ink-2); font-size: 1.05rem; max-width: 62ch; margin: 0; }
.anvil-feedback .anvil-meta { color: var(--cs-ink-2); font: 0.8rem/1.5 var(--cs-mono); margin: 0; }
.anvil-feedback .anvil-label { font: 600 0.72rem/1.4 var(--cs-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-ink-2); }
.anvil-feedback .anvil-input, .anvil-feedback .anvil-textarea { width: 100%; box-sizing: border-box; background: var(--cs-sunken); border: 1px solid var(--cs-hair-strong); border-radius: var(--cs-radius-sm); color: var(--cs-ink); padding: 10px 12px; font: inherit; }
.anvil-feedback .anvil-textarea { min-height: 96px; resize: vertical; }
.anvil-feedback .anvil-input:focus, .anvil-feedback .anvil-textarea:focus { outline: 2px solid var(--anvil-focus-ring); outline-offset: 1px; }
.anvil-feedback .anvil-card { position: relative; background: var(--cs-surface); border: 1px solid var(--cs-hair); border-radius: var(--cs-radius-lg); }
.anvil-feedback .anvil-card--linked:hover { border-color: var(--cs-hair-strong); }
.anvil-feedback .anvil-card__body { padding: 18px; }
.anvil-feedback .anvil-card__title { margin: 0; font-size: 1.1rem; }
.anvil-feedback .anvil-card__link { color: inherit; text-decoration: none; }
.anvil-feedback .anvil-card__link::after { content: ""; position: absolute; inset: 0; }
.anvil-feedback .anvil-callout { padding: 12px 14px; border-radius: var(--cs-radius); border: 1px solid var(--cs-hair-strong); background: var(--cs-sunken); color: var(--cs-ink-2); }
.anvil-feedback .anvil-callout--info { border-color: var(--cs-trade-line); background: var(--cs-trade-bg); }
.anvil-feedback .anvil-callout--warning { border-color: var(--cs-psa-line); background: var(--cs-psa-bg); }
.anvil-feedback .anvil-callout--success { border-color: var(--cs-vault-line); background: var(--cs-vault-bg); }
.anvil-btn--accent { background: var(--cs-action); border-color: var(--cs-action); color: var(--cs-action-ink); }
.anvil-btn--accent:hover { color: var(--cs-action-ink); filter: brightness(1.06); }
.anvil-btn--ghost { background: transparent; }
.anvil-btn--sm { min-height: 34px; padding: 0 12px; font-size: 0.85rem; }
/* The header button from 960px; on phones the same link opens the menu. */
.cs-utility .anvil-feedback-badge { display: none; }
@media (min-width: 960px) {
	.cs-utility .anvil-feedback-badge { display: inline-flex; align-items: center; min-height: 38px; border-color: var(--cs-psa-line); color: var(--cs-psa); }
	.cs-nav .anvil-feedback-badge--mobile { display: none; }
}
.cs-nav .anvil-feedback-badge--mobile { margin: 8px 16px 0; padding: 12px 0; color: var(--cs-psa); text-decoration: none; border-bottom-color: var(--cs-hair); }
/* On desktop the hub's button is a compact "? 37" (the words stay for screen readers),
   so it fits beside Desk and Vault at every width. */
@media (min-width: 960px) {
	.cs-utility .anvil-feedback-badge > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.cs-utility .anvil-feedback-badge::before { content: "?"; font-weight: 800; }
}
/* Staff carry more buttons (Desk, Vault, updates): their menu stays behind the
   hamburger until 1200px, so its links don't wrap into stacks. */
@media (min-width: 960px) and (max-width: 1199px) {
	.cs-masthead:has(.cs-desk-btn) .cs-nav { display: none; }
	.cs-masthead:has(.cs-desk-btn) .cs-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--cs-surface); border-bottom: 1px solid var(--cs-hair); }
	.cs-masthead:has(.cs-desk-btn) .cs-nav__list { display: block; padding: 8px 16px 16px; }
	.cs-masthead:has(.cs-desk-btn) .cs-nav__list a { padding: 10px 0; }
	.cs-masthead:has(.cs-desk-btn) .cs-menu-toggle { display: inline-flex; }
}
/* Site Review's toolbar sits above the item page's Buy bar and the vault's tab bar on phones. */
@media (max-width: 959px) {
	body:has(.cs-buybar) #fsr-toolbar { bottom: 84px; }
	body:has(.cs-tabbar) #fsr-toolbar { bottom: 76px; }
	body:has(.cs-buybar):has(.cs-tabbar) #fsr-toolbar { bottom: 148px; }
}
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }