/* Canonical design tokens (B01) — THE single source of truth for every design
   primitive (colour, surface, ink, spacing, type, radius, shadow, blur, motion).
   Must load first so every rule below resolves against it. See DESIGN-TOKENS.md. */
@import url('/tokens.css');
/* Self-hosted canonical fonts — one import, covers every page via this file */
@import url('/fonts/fonts.css');
/* Canonical shared button system — single source of truth (B03).
   Lives in its own portable partial so surfaces that don't load this heavy
   stylesheet can still adopt it with a single <link>. See public/buttons.css. */
@import url('/buttons.css');

/******************************************************************************
 * Golden Ratio Design System
 * φ = 1.618 — all spacing and type follow a phi-based scale
 *
 * CANONICAL TOKEN RULE
 * Every page consumes these :root tokens DIRECTLY (--surface-1, --ink, --accent…).
 * Per-surface token namespaces were removed in B02 — there is one design
 * language, not eight. Do not reintroduce a parallel per-surface token set;
 * reference the canonical tokens by name. A surface that needs a distinct
 * accent (e.g. the IBM Carbon blue at /ibm/*) expresses it as a small, documented
 * brand theme layer ON TOP of these tokens — never a standalone palette.
 */

[hidden] {
	display: none !important;
}

.save-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #151515;
	color: #eee;
	border: 1px solid #2b2b2b;
	border-radius: var(--radius-md);
	padding: 10px 16px;
	font-size: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	z-index: 9999;
}
.save-toast a {
	color: rgba(255, 255, 255, 0.7);
}

/* ── Design primitives ──────────────────────────────────────────────────────
   Phi spacing, type scale, radii, fonts, accent, surfaces, ink, state colours,
   shadow, blur and motion now live in the canonical token file, imported at the
   top of this stylesheet: public/tokens.css (the B01 single source of truth).
   Component tokens (buttons, cards, badges…) remain below. See DESIGN-TOKENS.md.
   ──────────────────────────────────────────────────────────────────────────── */

/* =============================================================================
 * Component tokens — B01 Design System Layer
 *
 * Layering rule: these tokens always reference primitives via var(); never
 * hardcode rgba/hex values that duplicate an existing primitive. Derived
 * translucent variants (e.g. --btn-danger-bg) are computed from their parent
 * semantic and documented inline. Downstream components (B04–B08) consume
 * ONLY these component tokens — never reach past this layer to primitives.
 * ============================================================================= */
:root {

	/* --- Buttons -----------------------------------------------------------
	 * Four variants: primary (white fill), secondary (glass fill + border),
	 * ghost (transparent), danger (red-tinted). Each has bg/fg/border/hover/active.
	 */

	/* Primary — white fill, dark ink (use for the main CTA per surface) */
	--btn-primary-bg:        var(--accent);
	--btn-primary-fg:        var(--on-accent);
	--btn-primary-border:    transparent;
	--btn-primary-bg-hover:  rgba(255, 255, 255, 0.88);
	--btn-primary-bg-active: rgba(255, 255, 255, 0.76);

	/* Secondary — subtle glass fill with visible border */
	--btn-secondary-bg:        var(--surface-3);
	--btn-secondary-fg:        var(--ink);
	--btn-secondary-border:    var(--stroke-strong);
	--btn-secondary-bg-hover:  rgba(255, 255, 255, 0.12);
	--btn-secondary-bg-active: rgba(255, 255, 255, 0.16);

	/* Ghost — transparent, text-only; border appears only on hover */
	--btn-ghost-bg:        transparent;
	--btn-ghost-fg:        var(--ink);
	--btn-ghost-border:    transparent;
	--btn-ghost-bg-hover:  var(--surface-2);
	--btn-ghost-bg-active: var(--surface-3);

	/* Danger — derived from --danger (#f87171 = rgb(248 113 113)) */
	--btn-danger-bg:        rgba(248, 113, 113, 0.12);
	--btn-danger-fg:        var(--danger);
	--btn-danger-border:    rgba(248, 113, 113, 0.28);
	--btn-danger-bg-hover:  rgba(248, 113, 113, 0.20);
	--btn-danger-bg-active: rgba(248, 113, 113, 0.30);

	/* Shared button shape/spacing tokens */
	--btn-radius:   var(--radius-control);
	--btn-pad-x:    var(--space-md);
	--btn-pad-y:    var(--space-sm);
	--btn-text-size: var(--text-sm);
	--btn-font:     var(--font-body);

	/* --- Elevation ---------------------------------------------------------
	 * Three shared shadow tiers consumed by .surface / .panel / .card and the
	 * hover-lift interaction. Reference these instead of hand-rolling shadows
	 * so depth reads consistently across every surface.
	 *   1 = resting panel · 2 = card · 3 = lifted/hover
	 */
	--shadow-1: 0 1px 3px rgba(0, 0, 0, 0.30);
	--shadow-2: 0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 4px rgba(0, 0, 0, 0.20);
	--shadow-3: 0 8px 32px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.20);

	/* --- Skeleton ----------------------------------------------------------
	 * The shimmer primitives moved to tokens.css (QB-07) so nav-only pages
	 * resolve them too and they flip with the light theme. Consume the vars.
	 */

	/* --- Cards -------------------------------------------------------------
	 * Glass-surface container with hover border lift and tasteful shadow.
	 */
	--card-bg:           var(--surface-glass);
	--card-border:       var(--stroke);
	--card-border-hover: var(--stroke-strong);
	--card-radius:       var(--radius-card);
	--card-pad:          var(--space-lg);
	--card-shadow:       var(--shadow-2);

	/* --- Badges / Pills ----------------------------------------------------
	 * Default monochrome; semantic variants derived from success/danger/warn.
	 * Derived from --success (#4ade80 = rgb(74 222 128)),
	 *              --danger  (#f87171 = rgb(248 113 113)),
	 *              --warn    (#fbbf24 = rgb(251 191 36)).
	 */
	--badge-bg:     var(--surface-3);
	--badge-fg:     var(--ink);
	--badge-border: var(--stroke-strong);
	--badge-radius: var(--radius-pill);

	--badge-success-bg:     rgba(74, 222, 128, 0.12);
	--badge-success-fg:     var(--success);
	--badge-success-border: rgba(74, 222, 128, 0.28);

	--badge-danger-bg:     rgba(248, 113, 113, 0.12);
	--badge-danger-fg:     var(--danger);
	--badge-danger-border: rgba(248, 113, 113, 0.28);

	--badge-warn-bg:     rgba(251, 191, 36, 0.12);
	--badge-warn-fg:     var(--warn);
	--badge-warn-border: rgba(251, 191, 36, 0.28);

	/* On-chain status badge (green pulse) */
	--badge-onchain-bg:     rgba(16, 185, 129, 0.12);
	--badge-onchain-fg:     #34d399;
	--badge-onchain-border: rgba(16, 185, 129, 0.32);

	/* Devnet / testnet badge (amber) */
	--badge-devnet-bg:     rgba(251, 191, 36, 0.12);
	--badge-devnet-fg:     var(--warn);
	--badge-devnet-border: rgba(251, 191, 36, 0.32);

	/* Informational / "New" badge (neutral) */
	--badge-new-bg:     rgba(255, 255, 255, 0.06);
	--badge-new-fg:     rgba(255, 255, 255, 0.7);
	--badge-new-border: rgba(255, 255, 255, 0.16);

	/* --- Modals ------------------------------------------------------------
	 * Elevated surface over a dark backdrop scrim.
	 */
	--modal-bg:       rgba(10, 11, 18, 0.96);
	--modal-border:   var(--stroke-strong);
	--modal-radius:   var(--radius-card);
	--modal-backdrop: rgba(0, 0, 0, 0.70);
	--modal-shadow:   0 24px 64px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.40);
	--modal-width:    480px;

	/* --- Focus + Disabled --------------------------------------------------
	 * Consistent interactive state tokens used site-wide.
	 * Usage: outline: var(--focus-ring-width) solid var(--focus-ring-color);
	 *        outline-offset: var(--focus-ring-offset);
	 */
	--focus-ring-color:  var(--accent);
	--focus-ring-width:  2px;
	--focus-ring-offset: 2px;
	--disabled-opacity:  0.4;
	--disabled-cursor:   not-allowed;
}

html {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	/* Canvas routed through tokens so the global page surface flips with
	   [data-theme]. Dark resolves to the deep-space brand backdrop (--bg-ambient,
	   defined in tokens.css); light remaps it in tokens.css. The ambient blooms
	   live in that token so this rule and the homepage paint the identical field.
	   Only `color` transitions: a background shorthand cannot be animated, and the
	   old `background-color` transition silently did nothing once the shorthand
	   was layered. */
	background: var(--bg-ambient);
	min-height: 100vh;
	color: var(--ink);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	transition: color var(--duration-base) var(--ease-standard);
}

* {
	box-sizing: border-box;
}

/* =============================================================================
 * Typography classes — B07
 *
 * One type system. Display headings use --font-display (Space Grotesk);
 * everything else uses --font-body (Inter); code uses --font-mono.
 * Reach for these classes (or the tokens they wrap) instead of declaring a
 * font-family or a raw px font-size on a page. Sizes come from the scale.
 * ============================================================================= */
.h1, .h2, .h3, .h4 {
	font-family: var(--font-display);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--ink);
}
.h1 { font-size: var(--text-2xl); letter-spacing: -0.03em; }
.h2 { font-size: var(--text-xl); }
.h3 { font-size: var(--text-lg); }
.h4 { font-size: var(--text-base); font-weight: var(--weight-medium); }

/* Oversized marketing hero — opt-in, fluid down to the 2xl rung on small screens */
.display {
	font-family: var(--font-display);
	font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	letter-spacing: -0.035em;
	margin: 0;
	color: var(--ink);
}

/* Body text — Inter, comfortable reading measure */
.body-lg { font: var(--weight-regular) var(--text-lg)/var(--leading-normal) var(--font-body); }
.body    { font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body); }
.body-sm { font: var(--weight-regular) var(--text-ui)/var(--leading-normal) var(--font-body); }

/* Small UI text — labels, captions, metadata */
.label     { font: var(--weight-medium) var(--text-md)/var(--leading-tight) var(--font-body); }
.label-sm  { font: var(--weight-medium) var(--text-sm)/var(--leading-tight) var(--font-body); }

/* Eyebrow / overline — uppercase mono, used above section titles */
.eyebrow {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ink-dim);
}

/* Monospace — code, addresses, numeric readouts */
.mono { font-family: var(--font-mono); font-size: var(--text-md); }

body {
	display: flex;
	flex-direction: column;
}

.wrap {
	display: flex;
	flex-direction: column;
	width: 100vw;
	flex-grow: 1;
	/* Hard floor: even if a child fails to mount, the viewport-sized wrap
	   keeps the dropzone anchored to the bottom instead of floating up
	   under the header. */
	min-height: calc(100vh - var(--header-h, 3.5rem));
	position: relative;
}

.viewer-container {
	flex: 1 1 auto;
	position: relative;
	min-height: 0;
}

/* ── Viewer status overlay ──────────────────────────────────────────────
   Centered card inside #viewer-container that reflects load state.
   Driven from JS via App._showViewerLoading / _showViewerError. */
.viewer-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 10;
}
.viewer-status[hidden] {
	display: none;
}
.viewer-status__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 22px 28px;
	background: rgba(18, 18, 24, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	pointer-events: auto;
	min-width: 200px;
	max-width: 360px;
	text-align: center;
}
.viewer-status__card--error {
	border-color: rgba(239, 68, 68, 0.32);
	box-shadow: 0 8px 32px rgba(239, 68, 68, 0.18);
}
.viewer-status__spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.08);
	border-top-color: rgba(255, 255, 255, 0.9);
	border-right-color: rgba(255, 255, 255, 0.20);
	animation: sk-spin 0.9s linear infinite;
}
.viewer-status__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.18);
	color: rgba(254, 202, 202, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}
.viewer-status__label {
	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 0.01em;
}
.viewer-status__btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: white;
	padding: 7px 18px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.viewer-status__btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.28);
}
.viewer-status__btn:active {
	transform: translateY(1px);
}
.viewer-status__btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: 2px;
}
/* Capability-notice variant (e.g. no WebGL) — informational, not an error.
   A calm neutral chrome with a title + supporting hint line. */
.viewer-status__card--notice {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	gap: 10px;
	padding: 24px 26px;
}
.viewer-status__icon--info {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.82);
}
.viewer-status__title {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: 0.01em;
}
.viewer-status__hint {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	max-width: 300px;
}
.viewer-status__progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-width: 220px;
	margin-top: 2px;
}
.viewer-status__progress[hidden] {
	display: none;
}
.viewer-status__progress-track {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.viewer-status__progress-fill {
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.9)
	);
	border-radius: inherit;
	transition: width var(--duration-fast) var(--ease-out);
}
.viewer-status__progress-meta {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
}

/* ── Avatar poster (model-viewer–style) ──────────────────────────────
   Sits OVER the WebGL canvas (which clears to opaque black) while the
   GLB streams in, so the user sees their avatar's thumbnail instead of
   a black void. Loading overlay (z:10) stays on top. Faded out on
   LOAD_END(success), revealing the rendered model below. */
.viewer-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	z-index: 5;
	opacity: 1;
	transition: opacity var(--duration-slow) var(--ease-standard);
	pointer-events: none;
	background:
		radial-gradient(
			ellipse at center,
			rgba(40, 40, 50, 0.55) 0%,
			rgba(10, 10, 14, 0.95) 80%
		);
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
.viewer-poster--fading {
	opacity: 0;
}

.dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-lg);
	padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom, 0));
	padding-left: max(var(--space-lg), env(safe-area-inset-left, 0));
	padding-right: max(var(--space-lg), env(safe-area-inset-right, 0));
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.82));
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset;
	z-index: 1;
}

/* Drag-over highlight — lifts when a file is hovering anywhere on the page */
body.is-dragover .dropzone {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
	border-top-color: rgba(255, 255, 255, 0.5);
}

.placeholder {
	display: none;
}

.placeholder:hover {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.05);
}

.placeholder p {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.4);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.viewer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.model-info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transform: translateY(8px);
	animation: fadeInUp 0.4s ease 0.3s forwards;
}

.annotation-label {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	transform: translate(-50%, -100%) translateY(-8px);
	opacity: 0;
	animation: fadeInUp 0.3s ease 0.5s forwards;
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.axes {
	width: 100px;
	height: 100px;
	margin: 20px;
	padding: 0px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 10;
	pointer-events: none;
}

/******************************************************************************
 * Header
 */

/* Legacy 3D viewer/editor chrome (the wordmark + upload-bar header). Scoped
 * to CLASSLESS headers only: every legacy chrome header is a bare <header>,
 * while the canonical nav (<header class="nav">, or the <header> wrapper
 * holding #nav-container) and any page's own semantic header (e.g. genesis's
 * <header class="gx-head"> hero) carry a class or the container. The previous
 * :not(.nav) scope leaked this fixed-height, overflow-x:auto strip onto every
 * classed page header, squashing it to 55px and creating a keyboard-
 * unreachable scroll region (axe scrollable-region-focusable on /genesis). */
header:not([class]):not(:has(#nav-container)) {
	display: flex;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.8);
	padding: 0 var(--space-lg);
	padding-top: env(safe-area-inset-top, 0);
	padding-left: max(var(--space-lg), env(safe-area-inset-left, 0));
	padding-right: max(var(--space-lg), env(safe-area-inset-right, 0));
	height: calc(var(--header-h) + env(safe-area-inset-top, 0));
	line-height: var(--header-h);
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	z-index: 1;

	-webkit-app-region: drag;
}

header h1,
header .site-wordmark {
	color: #fff;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: var(--header-h);
	margin: 0;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

header h1 > a,
header .site-wordmark > a {
	color: inherit;
	font-size: inherit;
	text-decoration: inherit;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

header h1 .wordmark-dot,
header .site-wordmark .wordmark-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
	display: inline-block;
}

header h1 .wordmark-logo,
header .site-wordmark .wordmark-logo {
	width: 28px;
	height: 28px;
	display: inline-block;
	vertical-align: middle;
}

.features-nav {
	margin-left: auto;
	display: flex;
	gap: var(--space-md);
	-webkit-app-region: no-drag;
	align-items: center;
}

.features-nav a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: -0.005em;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-md);
	transition:
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
	position: relative;
}

.features-nav a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
}

.features-nav a.active {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.features-nav a.active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	width: 18px;
	height: 2px;
	border-radius: var(--radius-sm);
	background: #ffffff;
}

.nav-sign-in {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
}

.nav-user {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.55);
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-user::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--success);
	flex-shrink: 0;
}

.nav-user:hover {
	color: rgba(255, 255, 255, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
}

.nav-sign-in.signed-in {
	display: none;
}

/* Connect Wallet — Robinhood Chain wallet entry point in the app header. Bound by
   src/wallet.js (initWalletButton); swaps its label for the truncated address
   and gains .is-connected once a wallet connects. */
.nav-connect-wallet {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.35rem 0.7rem;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: -0.005em;
	color: var(--ink);
	background: var(--surface-1);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-md);
	cursor: pointer;
	white-space: nowrap;
	-webkit-app-region: no-drag;
	transition:
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.nav-connect-wallet svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.8;
}

.nav-connect-wallet:hover {
	color: var(--ink-bright);
	background: var(--surface-2);
	border-color: var(--stroke-strong);
}

.nav-connect-wallet:active {
	transform: translateY(0.5px);
}

.nav-connect-wallet:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.nav-connect-wallet.is-connected {
	color: var(--ink-bright);
	background: var(--badge-success-bg);
	border-color: var(--badge-success-border);
	font-variant-numeric: tabular-nums;
}

.nav-connect-wallet.is-connected svg {
	color: var(--success);
	opacity: 1;
}

.nav-user-wrap {
	position: relative;
}

.nav-user {
	cursor: pointer;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-user[aria-expanded='true'] {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.85);
}

.nav-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 160px;
	background: #0f0f0f;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	padding: 4px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
	z-index: 200;
	display: flex;
	flex-direction: column;
}

.nav-user-menu-item {
	display: block;
	padding: 8px 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	border-radius: var(--radius-sm);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	width: 100%;
	transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-user-menu-item:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.nav-user-menu-signout {
	color: rgba(255, 100, 100, 0.8);
}

.nav-user-menu-signout:hover {
	background: rgba(204, 64, 64, 0.12);
	color: #ffb3b3;
}

.nav-user-menu-sep {
	height: 1px;
	background: rgba(255, 255, 255, 0.07);
	margin: 4px 0;
}

.gui-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	transition:
		opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.gui-wrap--hidden {
	opacity: 0;
	transform: translateX(12px);
	pointer-events: none !important;
	visibility: hidden;
}

.gui-wrap > .main {
	pointer-events: all;
	max-height: 100%;
	overflow: auto;
}

/* Controls toggle button (top-right) */
.gui-toggle {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(18, 18, 26, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		color var(--duration-fast),
		background var(--duration-fast),
		border-color var(--duration-fast);
	z-index: 30;
}

.gui-toggle:hover {
	color: #fff;
	background: rgba(28, 28, 38, 0.9);
	border-color: rgba(255, 255, 255, 0.18);
}

.gui-toggle--active {
	color: #fff;
	background: var(--accent-soft);
	border-color: rgba(255, 255, 255, 0.45);
}

.gui-toggle__label {
	font-size: 11px;
}

/* AR button — sits below the Controls toggle, same corner */
.ar-btn {
	position: absolute;
	top: calc(var(--space-sm) + 38px);
	right: var(--space-sm);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(18, 18, 26, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		color var(--duration-fast),
		background var(--duration-fast),
		border-color var(--duration-fast);
	z-index: 30;
}

.ar-btn:hover {
	color: #fff;
	background: rgba(28, 28, 38, 0.9);
	border-color: rgba(255, 255, 255, 0.18);
}

.ar-btn--active {
	color: #fff;
	background: var(--accent-soft);
	border-color: rgba(255, 255, 255, 0.45);
}

.ar-btn__label {
	font-size: 11px;
}

.dg li.gui-stats:not(.folder) {
	height: auto;
}

/******************************************************************************
 * dat.gui dark theme overrides
 */

.dg.ac {
	z-index: 10 !important;
}

.dg.main .close-button.close-bottom {
	background-color: #111 !important;
	color: rgba(255, 255, 255, 0.5) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dg.main .close-button.close-bottom:hover {
	background-color: var(--bg-1) !important;
	color: rgba(255, 255, 255, 0.8) !important;
}

.dg.a {
	margin-right: 0 !important;
}

.dg li:not(.folder) {
	background: var(--bg-0) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.dg li.folder {
	border-bottom: 0 !important;
}

.dg li.title {
	background: #111 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dg .cr.function .property-name {
	width: 100% !important;
}

.dg .c select {
	background: var(--bg-1) !important;
	color: #ccc !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--radius-sm) !important;
}

.dg .c input[type='text'] {
	background: var(--bg-1) !important;
	color: #ccc !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: var(--radius-sm) !important;
}

/* Remove the dat.GUI color-picker hue strip globally — the saturation/value
   field carries the picker; the vertical hue knob is suppressed everywhere. */
.dg .cr.color .selector .hue-field,
.dg .selector .hue-field {
	display: none !important;
}
.dg .cr.color .selector .saturation-field,
.dg .selector .saturation-field {
	width: 100% !important;
}

@media screen and (max-width: 700px) {
	/* Same classless-header scope as the desktop rule above. */
	header:not([class]):not(:has(#nav-container)) {
		padding: 0 1em;
		height: 3rem;
		line-height: 3rem;
	}

	header h1,
	header .site-wordmark {
		font-size: 1em;
		line-height: 3rem;
	}

	.placeholder {
		display: none;
	}

	.placeholder p {
		font-size: 1rem;
	}

	.upload-btn label {
		padding: var(--space-xs) var(--space-md);
		font-size: var(--text-sm);
	}

	.dropzone {
		flex-direction: column;
		gap: var(--space-xs);
		padding: var(--space-xs) var(--space-md);
	}

	footer:not([class*="h-footer"]) {
		bottom: auto;
		top: calc(3rem + 0.5em);
		left: 0.5em;
		right: auto;
	}

	.gui-wrap {
		max-width: 65vw;
	}

	.axes {
		width: 60px;
		height: 60px;
		margin: 10px;
		bottom: 0;
	}

	.model-info {
		bottom: 10px;
		left: 10px;
		transform: scale(0.85) translateY(8px);
		transform-origin: bottom left;
	}

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: scale(0.85) translateY(0);
		}
	}

	.annotation-label {
		transform: scale(0.8) translate(-50%, -100%) translateY(-6px);
		transform-origin: center bottom;
	}

	.report {
		padding: var(--space-md);
		max-width: 100vw;
	}

	.report-table th,
	.report-table td {
		padding: var(--space-2xs) var(--space-xs);
		font-size: var(--text-sm);
	}

	.report-toggle {
		left: 10px;
		height: 36px;
	}

	.report-toggle-text {
		line-height: 36px;
		font-size: 0.75em;
	}

	.report-toggle-close {
		width: 36px;
		height: 36px;
		line-height: 36px;
	}
}

/******************************************************************************
 * Footer
 */

/* Legacy corner credit footer (3D viewer/editor pages). Scoped with
 * :not([class*="h-footer"]) so it never hijacks the canonical site footer,
 * which ships in two class forms — <footer class="h-footer h-footer-horizon">
 * and <footer class="h-footer-horizon"> — and is a full-width block section
 * with its own layout, positioning, and clickable controls. Matching only
 * .h-footer left the bare-.h-footer-horizon pages (avatar, etc.) exposed, so
 * this floating-badge style leaked onto the real footer and overlapped it. */
footer:not([class*="h-footer"]) {
	position: absolute;
	bottom: calc(4rem + env(safe-area-inset-bottom, 0));
	right: calc(var(--space-md) + env(safe-area-inset-right, 0));
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: #fff;
	z-index: 2;
	pointer-events: none;
}

footer:not([class*="h-footer"]) a {
	pointer-events: all;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
	display: inline-flex;
	align-items: center;
}

footer:not([class*="h-footer"]) a:hover {
	color: #fff;
}

footer:not([class*="h-footer"]) a svg {
	vertical-align: middle;
}

footer:not([class*="h-footer"]) .separator {
	color: rgba(255, 255, 255, 0.2);
	font-size: 10px;
}

/******************************************************************************
 * Upload Button
 *
 * https://tympanus.net/Tutorials/CustomFileInputs/
 */

.upload-btn {
	margin: 0;
}

.upload-btn input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.upload-btn label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: rgba(255, 255, 255, 0.88);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
	font-size: var(--text-sm);
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	padding: var(--space-sm) var(--space-md);
	letter-spacing: -0.005em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.upload-btn label:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}

.upload-btn label:active {
	transform: translateY(1px);
	border-color: rgba(255, 255, 255, 0.35);
}

.drop-hint {
	color: rgba(255, 255, 255, 0.42);
	font-size: var(--text-sm);
	font-weight: 400;
	letter-spacing: -0.005em;
}

@media screen and (max-width: 700px) {
	.drop-hint {
		display: none;
	}
}

.upload-btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
	opacity: 0.9;
}

/******************************************************************************
 * Validation report
 */

.report {
	padding: var(--space-lg);
	max-width: 860px;
}

.report h1,
.report h2 {
	margin-top: 0;
}

.report p,
.report ul {
	line-height: var(--leading-normal);
}

.report-table {
	text-align: left;
	border-collapse: collapse;
	width: 100%;
}

.report-table thead tr {
	background: var(--bg-1);
	color: rgba(255, 255, 255, 0.9);
}

.report-table th,
.report-table td {
	padding: var(--space-xs) var(--space-md);
	color: rgba(255, 255, 255, 0.7);
}

.report-table tr:nth-child(2n) {
	background: rgba(255, 255, 255, 0.04);
}

.report-table tr:nth-child(odd) {
	background: rgba(255, 255, 255, 0.02);
}

.report-table-wrap {
	overflow-x: auto;
	margin-bottom: var(--space-md);
}

.report-section-heading {
	font-size: 1.05rem;
	margin: var(--space-md) 0 var(--space-xs);
	padding-left: var(--space-md);
	border-left: 4px solid var(--ink-dim);
}

.report-count {
	font-weight: normal;
	opacity: 0.7;
	font-size: 0.9em;
}

.report-banner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-md);
	font-size: 0.95rem;
}

.report-banner-clean {
	background: rgba(139, 195, 74, 0.12);
	border: 1px solid rgba(139, 195, 74, 0.35);
	color: #8bc34a;
}

.report-banner-issues {
	background: rgba(244, 67, 54, 0.08);
	border: 1px solid rgba(244, 67, 54, 0.25);
	color: rgba(255, 255, 255, 0.85);
}

.report-banner-icon {
	font-size: 1.5rem;
	font-weight: bold;
}

.report-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.report-download {
	display: inline-block;
	padding: 6px 12px;
	font-size: 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.report-download:hover {
	background: rgba(255, 255, 255, 0.08);
}

.report-download:active {
	background: rgba(255, 255, 255, 0.14);
}

.report-download:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/******************************************************************************
 * CSS Spinner
 *
 * http://tobiasahlin.com/spinkit/
 */

.spinner {
	width: 36px;
	height: 36px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -18px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.08);
	border-top-color: rgba(255, 255, 255, 0.9);
	border-right-color: rgba(255, 255, 255, 0.20);
	box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
	-webkit-animation: sk-spin 0.9s linear infinite;
	animation: sk-spin 0.9s linear infinite;
}

@-webkit-keyframes sk-spin {
	to {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes sk-spin {
	to {
		transform: rotate(360deg);
	}
}

/******************************************************************************
 * Screenshot flash feedback
 */

.screenshot-flash {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	z-index: 100;
	animation: screenshot-flash 0.3s ease-out forwards;
}

@keyframes screenshot-flash {
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

/******************************************************************************
 * Golden Ratio Dev Grid Overlay — toggle with Alt+G
 *
 * Horizontal: splits viewport at 38.2% / 61.8%
 * Vertical:   splits viewport at 38.2% / 61.8%
 * Plus rule-of-thirds (33.3% / 66.6%) for comparison
 */

.phi-grid {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	mix-blend-mode: difference;
}

.phi-grid.visible {
	display: block;
}

/* Vertical golden split */
.phi-grid::before,
.phi-grid::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
}

.phi-grid::before {
	left: 38.2%;
	background: rgba(var(--gold-rgb), 0.5);
}

.phi-grid::after {
	left: 61.8%;
	background: rgba(var(--gold-rgb), 0.5);
}

/* Horizontal golden split + thirds via inner spans */
.phi-grid-h::before,
.phi-grid-h::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
}

.price-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.price-free {
  color: #e0e0e0;
  background-color: rgba(255, 255, 255, 0.1);
}

.price-paid {
  color: #fde047;
  background-color: rgba(253, 224, 71, 0.1);
}

/* Price Badge Styles from Prompt 1 */
.price-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.price-free {
  color: #e0e0e0;
  background-color: rgba(255, 255, 255, 0.1);
}

.price-paid {
  color: #fde047;
  background-color: rgba(253, 224, 71, 0.1);
}

.phi-grid-h::before {
	top: 38.2%;
	background: rgba(var(--gold-rgb), 0.5);
}

.phi-grid-h::after {
	top: 61.8%;
	background: rgba(var(--gold-rgb), 0.5);
}

/* Rule-of-thirds lines (dimmer) */
.phi-grid-thirds::before,
.phi-grid-thirds::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(0, 191, 255, 0.25);
}

.phi-grid-thirds::before {
	left: 33.333%;
}
.phi-grid-thirds::after {
	left: 66.666%;
}

.phi-grid-thirds-h::before,
.phi-grid-thirds-h::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 191, 255, 0.25);
}

.phi-grid-thirds-h::before {
	top: 33.333%;
}
.phi-grid-thirds-h::after {
	top: 66.666%;
}

.phi-grid-label {
	position: fixed;
	top: var(--space-xs);
	left: 50%;
	transform: translateX(-50%);
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: var(--text-xs);
	color: rgba(var(--gold-rgb), 0.7);
	background: rgba(0, 0, 0, 0.7);
	padding: var(--space-3xs) var(--space-xs);
	border-radius: var(--radius-sm);
	z-index: 10000;
	pointer-events: none;
	display: none;
}

.phi-grid.visible ~ .phi-grid-label {
	display: block;
}

/******************************************************************************
 * Nich Agent Panel
 */

.nich-toggle {
	position: fixed;
	bottom: var(--space-lg);
	left: var(--space-lg);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(10, 10, 10, 0.9);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--duration-base) var(--ease-standard);
	z-index: 50;
}

.nich-toggle:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
	transform: scale(1.05);
}

.nich-toggle.active {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

.nich-panel {
	position: fixed;
	bottom: 5em;
	left: var(--space-lg);
	width: 320px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
	background: rgba(10, 10, 10, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	z-index: 50;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Embedded layout (talking-agent widget): full-width panel anchored to the
 * bottom, leaving the top portion clear for the 3D avatar. */
.nich-panel--embedded {
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	width: 100%;
	max-width: none;
	max-height: 46%;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

/* On viewports wide enough, slide chat to the right so the avatar is fully
 * visible on the left — only kicks in when the widget itself is wide. */
@media (min-width: 540px) {
	.nich-panel--embedded.nich-position--right {
		left: auto;
		right: 0;
		top: 0;
		bottom: 0;
		width: 260px;
		max-height: 100%;
		max-width: 55%;
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
	}
}

/* Compact message area inside embedded panel */
.nich-panel--embedded .nich-messages {
	min-height: 60px;
	max-height: 120px;
}

.nich-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nich-title {
	font-size: var(--text-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.03em;
}

.nich-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-lg);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color var(--duration-base) var(--ease-standard);
}

.nich-close:hover {
	color: #fff;
}

.nich-messages {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	min-height: 200px;
	max-height: 300px;
}

.nich-message {
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-lg);
	max-width: 85%;
	word-wrap: break-word;
}

.nich-message.agent {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	align-self: flex-start;
	border-bottom-left-radius: var(--radius-sm);
}

.nich-message.user {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: var(--radius-sm);
}

.nich-controls {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nich-input {
	flex: 1;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: var(--space-xs) var(--space-sm);
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	outline: none;
	transition: border-color var(--duration-base) var(--ease-standard);
}

.nich-input::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

.nich-input:focus {
	border-color: rgba(255, 255, 255, 0.2);
}

.nich-send {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: var(--space-xs) var(--space-sm);
	display: flex;
	align-items: center;
	transition: all var(--duration-base) var(--ease-standard);
}

.nich-send:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.nich-mic-row {
	display: flex;
	justify-content: center;
	padding: 0 var(--space-sm) var(--space-sm);
}

.nich-mic {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.35);
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-standard);
}

.nich-mic:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
}

.nich-mic.active {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

@media screen and (max-width: 700px) {
	.nich-toggle {
		bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
		left: var(--space-md);
		width: 48px;
		height: 48px;
	}

	.nich-panel {
		bottom: calc(4em + env(safe-area-inset-bottom, 0px));
		left: var(--space-sm);
		right: var(--space-sm);
		width: auto;
		max-height: 60vh;
	}
}

/******************************************************************************
 * ERC-8004 Agent Registration
 */

.erc8004-register {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	overflow-y: auto;
	padding: var(--space-lg);
}

/* Page mode — /deploy renders inside app.html shell, not as a modal overlay. */
body[data-viewer-mode='deploy'],
body[data-viewer-mode='explore'] {
	overflow-y: auto;
}

/* Embed/kiosk — strip every owner-mode surface. The /app page is loaded inside
 * a host iframe (e.g. /pumpfun) and only the 3D stage should show. */
body[data-viewer-mode='embed'] #agent-presence-sidebar,
body[data-viewer-mode='embed'] .dropzone,
body[data-viewer-mode='embed'] .auth-gate,
body[data-viewer-mode='embed'] .agent-onboarding,
body[data-viewer-mode='embed'] .dg.main {
	display: none !important;
}

/* Page modes (/deploy, /explore) replace the 3D stage with their own full
 * layout, so the fixed bottom-right onboarding card has nothing to onboard —
 * it only floats over the page content (e.g. the deploy Live Preview panel).
 * Suppress it here the same way embed mode does. */
body[data-viewer-mode='deploy'] .agent-onboarding,
body[data-viewer-mode='explore'] .agent-onboarding {
	display: none !important;
}

/* Hide viewer-only action buttons in non-viewer modes — they're meaningless on
 * /deploy and /explore where the viewer is hidden. */
body[data-viewer-mode='deploy'] .save-to-account-btn,
body[data-viewer-mode='deploy'] .make-widget-btn,
body[data-viewer-mode='deploy'] .deploy-onchain-btn,
body[data-viewer-mode='deploy'] .view-public-profile-btn,
body[data-viewer-mode='explore'] .save-to-account-btn,
body[data-viewer-mode='explore'] .make-widget-btn,
body[data-viewer-mode='explore'] .deploy-onchain-btn,
body[data-viewer-mode='explore'] .view-public-profile-btn {
	display: none !important;
}

body[data-viewer-mode='deploy'] {
	/* Match the /dashboard ambient — subtle white radial glows on near-black. */
	background:
		radial-gradient(ellipse 70% 50% at 12% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 65%),
		radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 255, 255, 0.02) 0%, transparent 60%),
		var(--nxt-bg-0, #000);
	color: #fff;
}

html:has(body.explore-page),
html:has(body.deploy-page) {
	height: auto;
	overflow: auto;
}

body.deploy-page,
body.explore-page {
	display: block;
	width: 100%;
	min-height: calc(100vh - var(--header-h));
	height: auto;
	overflow: visible;
	padding: var(--space-md) var(--space-lg) var(--space-2xl);
}

body.deploy-page {
	background:
		radial-gradient(900px 520px at 88% -8%, rgba(255, 255, 255, 0.06), transparent 60%),
		radial-gradient(720px 420px at 6% 4%, rgba(255, 255, 255, 0.045), transparent 60%),
		var(--nxt-bg-0, #000);
}

/* Logo image in header */
.header-logo {
	width: 28px;
	height: 28px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5rem;
	flex-shrink: 0;
	object-fit: contain;
}

/* /a/<chainId>/<agentId> — overlay card that tells the viewer whose agent they're looking at. */
.onchain-card {
	position: fixed;
	left: var(--space-md);
	bottom: var(--space-md);
	z-index: 50;
	max-width: 320px;
	padding: var(--space-sm) var(--space-md);
	background: rgba(8, 8, 20, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: #fff;
	font-size: var(--text-sm);
	line-height: 1.35;
	pointer-events: none;
}
.onchain-card__name {
	font-weight: 600;
}
.onchain-card__sub {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-xs);
}
.onchain-card__desc {
	margin-top: var(--space-xs);
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-xs);
	max-height: 4.2em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.onchain-card__err {
	color: #ff7a7a;
}

/* /discover — cross-chain on-chain avatar browser.
 *
 * Search ANY input (address / ENS / tx / agent ID / agent:// URI) and see every
 * matching ERC-8004 registered 3D avatar as a gallery, grouped by chain.
 * Implementation: public/discover/discover.js → src/erc8004/resolve-avatar.js.
 */
.explore-shell {
	max-width: 1200px;
	margin: 0 auto;
}

/* Hero */
.explore-hero {
	padding: var(--space-xl) 0 var(--space-lg);
}
.explore-hero-inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
.explore-eyebrow {
	display: inline-block;
	padding: var(--space-3xs) var(--space-sm);
	margin-bottom: var(--space-sm);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(165, 180, 252, 0.95);
}
.explore-title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}
.explore-subtitle {
	margin: 0 auto var(--space-lg);
	max-width: 560px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.5;
}

/* Search form */
.explore-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 auto;
	max-width: 680px;
}
.explore-input-wrap {
	display: flex;
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}
.explore-input-wrap:focus-within {
	border-color: rgba(123, 97, 255, 0.65);
	box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.18);
}
.explore-input {
	flex: 1;
	min-width: 0;
	padding: var(--space-md) var(--space-lg);
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-family: inherit;
	font-size: var(--text-base);
}
.explore-input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}
.explore-input-meta {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.45);
	min-height: 1em;
}
.explore-inputmeta--ok {
	color: rgba(134, 239, 172, 0.9);
}
.explore-inputmeta--warn {
	color: rgba(253, 186, 116, 0.9);
}

/* Examples / recent searches */
.explore-examples {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}
.explore-examples-lbl {
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-xs);
	margin-right: var(--space-2xs);
}
.explore-example {
	padding: var(--space-3xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.75);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.explore-example:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* Controls bar (chain chips + progress) */
.explore-controls {
	position: sticky;
	top: var(--header-h, 0);
	z-index: 3;
	padding: var(--space-sm) 0;
	margin: 0 0 var(--space-md);
	background: rgba(8, 8, 20, 0.82);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.explore-controls-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.explore-controls-lbl {
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.explore-controls-spacer {
	flex: 1;
}
.explore-chain-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs);
}
.explore-chain-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}
.explore-chain-group--testnet {
	opacity: 0.85;
}
.explore-chain-divider {
	color: rgba(255, 255, 255, 0.25);
	padding: 0 var(--space-2xs);
}
.explore-chain-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 3px var(--space-sm);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.55);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}
.explore-chain-chip:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.explore-chain-chip--active {
	background: rgba(123, 97, 255, 0.18);
	border-color: rgba(123, 97, 255, 0.5);
	color: #fff;
}
.explore-chain-chip--testnet .explore-chain-dot {
	background: rgba(253, 186, 116, 0.8);
}
.explore-chain-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(134, 239, 172, 0.8);
}
.explore-chain-chip--active.explore-chain-chip .explore-chain-dot {
	box-shadow: 0 0 6px currentColor;
}
.explore-chain-presets-btn {
	padding: 3px var(--space-sm);
	background: transparent;
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.5);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition: all var(--duration-fast) var(--ease-standard);
}
.explore-chain-presets-btn:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

/* Progress HUD */
.explore-progress {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.6);
}
.explore-progress-spinner {
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-top-color: rgba(165, 180, 252, 0.95);
	border-radius: 50%;
	animation: explore-spin 0.7s linear infinite;
}
@keyframes explore-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Results area */
.explore-results {
	padding-bottom: var(--space-2xl);
}
.explore-summary {
	margin: var(--space-md) 0;
}
.explore-summary-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.explore-summary-title {
	margin: 0;
	font-size: var(--text-lg);
	color: #fff;
	font-weight: 500;
}
.explore-summary-stat {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--text-xs);
}
.explore-summary-sub {
	margin-top: var(--space-2xs);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-xs);
	word-break: break-all;
}
.explore-summary-sub code {
	background: rgba(255, 255, 255, 0.05);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

/* Filter chips */
.explore-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: var(--space-sm) 0 var(--space-md);
}
.explore-filter {
	padding: 4px var(--space-md);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.65);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.explore-filter:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.explore-filter--active {
	background: rgba(123, 97, 255, 0.2);
	border-color: rgba(123, 97, 255, 0.55);
	color: #fff;
}

/* Grid + cards */
.explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-md);
}
.explore-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition:
		transform var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}
.explore-card:hover {
	transform: translateY(-2px);
	border-color: rgba(123, 97, 255, 0.4);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.explore-card-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #141414 0%, #1b1b1b 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-decoration: none;
}
.explore-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.explore-card-ph {
	font-size: 2.4rem;
	opacity: 0.35;
}
.explore-chain-badge {
	position: absolute;
	top: var(--space-2xs);
	left: var(--space-2xs);
	padding: 2px var(--space-xs);
	background: rgba(8, 8, 20, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.explore-chain-badge--testnet {
	color: rgba(253, 186, 116, 0.95);
	border-color: rgba(253, 186, 116, 0.35);
}
.explore-card-3dpill {
	position: absolute;
	right: var(--space-2xs);
	bottom: var(--space-2xs);
	padding: 3px var(--space-sm);
	background: rgba(123, 97, 255, 0.9);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.explore-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-sm) var(--space-md) var(--space-md);
}
.explore-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-xs);
}
.explore-card-title {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.explore-card-title:hover {
	text-decoration: underline;
}
.explore-card-id {
	/* 0.55 is the a11y floor here, not a taste call: over the card surface
	   (#111 once the 3% white wash lands on --bg-0) this reads 6.2:1, and
	   anything under 0.45 drops below the 4.5:1 axe requires of 11px text.
	   Covered by the /discover case in tests/e2e/a11y-top-pages.spec.js. */
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}
.explore-card-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--text-xs);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.explore-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-height: 16px;
}
.explore-tag {
	padding: 1px var(--space-xs);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.7);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.explore-tag--3d {
	color: rgba(165, 243, 252, 0.95);
	border-color: rgba(165, 243, 252, 0.35);
	background: rgba(14, 165, 233, 0.08);
}
.explore-tag--x402 {
	color: rgba(253, 230, 138, 0.95);
	border-color: rgba(253, 230, 138, 0.35);
	background: rgba(245, 158, 11, 0.08);
}
.explore-owner {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--text-xs);
	text-decoration: none;
	font-family: ui-monospace, Menlo, monospace;
}
.explore-owner:hover {
	color: #fff;
	text-decoration: underline;
}
.explore-card-err {
	color: rgba(248, 113, 113, 0.85);
	font-size: var(--text-xs);
}
.explore-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-top: var(--space-xs);
}

/* Buttons (explore-scoped, not the erc8004 ones) */
.explore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-sm) var(--space-lg);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-instant) var(--ease-standard);
}
.explore-btn:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.2);
}
.explore-btn:active {
	transform: scale(0.98);
}
.explore-btn--sm {
	padding: 4px var(--space-sm);
	font-size: var(--text-xs);
	border-radius: var(--radius-sm);
}
.explore-btn--primary {
	background: linear-gradient(135deg, #7b61ff 0%, #5e42ff 100%);
	border-color: rgba(123, 97, 255, 0.7);
	color: #fff;
	box-shadow: 0 4px 14px rgba(123, 97, 255, 0.35);
}
.explore-btn--primary:hover {
	background: linear-gradient(135deg, #8a73ff 0%, #6f56ff 100%);
	border-color: rgba(158, 138, 255, 0.9);
}
.explore-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.65);
}
.explore-btn--ghost:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

/* Loading skeletons are provided by the shared state-kit (.tws-sk-*); /discover
   renders them via skeletonHTML() so it matches /marketplace exactly. The old
   bespoke .explore-card--skel shimmer was removed when the toolkit was adopted. */

/* Featured (no-query) header */
.explore-featured-head {
	margin: var(--space-md) 0 var(--space-md);
}
.explore-featured-head h2 {
	margin: 0 0 var(--space-2xs);
	font-size: var(--text-lg);
	color: #fff;
	font-weight: 500;
}

/* Empty + error states */
.explore-empty,
.explore-error {
	padding: var(--space-xl);
	text-align: center;
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	color: rgba(255, 255, 255, 0.7);
}
.explore-empty h3,
.explore-error strong {
	color: #fff;
	font-weight: 600;
	display: block;
	margin: 0 0 var(--space-xs);
}
.explore-empty p,
.explore-error p {
	margin: 0 auto var(--space-md);
	max-width: 520px;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.6);
}
.explore-empty-art {
	font-size: 3rem;
	margin-bottom: var(--space-sm);
}
.explore-empty-ideas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
}
.explore-muted {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--text-xs);
}

@media screen and (max-width: 640px) {
	.explore-title {
		font-size: 2rem;
	}
	.explore-controls {
		position: static;
	}
	.explore-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--space-sm);
	}
	.explore-card-thumb .explore-chain-badge {
		font-size: 9px;
	}
}

/* Create-tab Step 0 — quickstart mode picker above the 4-step wizard. */
.erc8004-quickstart {
	margin-bottom: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
}
.erc8004-quickstart-title {
	font-weight: 600;
	margin-bottom: var(--space-xs);
}
.erc8004-quickstart-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--space-sm);
}
.erc8004-quickstart-btn {
	display: block;
	text-align: left;
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	color: inherit;
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}
.erc8004-quickstart-btn:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.07);
}
.erc8004-quickstart-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.erc8004-quickstart-btn-title {
	font-weight: 600;
	margin-bottom: 2px;
}
.erc8004-quickstart-btn-hint {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.6);
}

.erc8004-register--page {
	position: static;
	inset: auto;
	z-index: auto;
	display: block;
	background: transparent;
	padding: 0;
}

.erc8004-register--page .erc8004-card {
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.02);
}

/* ── /deploy page shell ─────────────────────────────────────────────── */

.deploy-shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.deploy-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-lg);
	align-items: end;
	padding: var(--space-lg) 0 var(--space-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	/* Reset global <header> styles so the deploy hero sizes to its content
	   instead of being clipped to the nav-bar height. */
	height: auto;
	line-height: normal;
	overflow: visible;
	white-space: normal;
	background: transparent;
	-webkit-app-region: no-drag;
	z-index: auto;
}

.deploy-hero-text {
	min-width: 0;
	max-width: 720px;
}

.deploy-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 8px;
	margin-bottom: var(--space-sm);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-pill);
}

.deploy-hero-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.55);
}

.deploy-hero-title {
	margin: 0 0 var(--space-xs);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #fff;
}

.deploy-hero-sub {
	margin: 0 0 var(--space-md);
	max-width: 60ch;
	font-size: var(--text-base);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 300;
}

.deploy-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	font-size: var(--text-sm);
}

.deploy-hero-link {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border-bottom: 1px dashed transparent;
	transition: color var(--duration-fast), border-color var(--duration-fast);
}

.deploy-hero-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.deploy-hero-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: stretch;
	min-width: 220px;
}

.deploy-chain-control {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.deploy-chain-label {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.deploy-shell .erc8004-chain-select {
	padding: 10px 34px 10px 12px;
	font-size: var(--text-sm);
	background-color: rgba(255, 255, 255, 0.04);
	background-position: right 12px center;
	border-color: rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	min-width: 220px;
}

.deploy-wallet-btn {
	justify-content: center;
	padding: 10px 16px;
	font-weight: 500;
}

.deploy-banner {
	padding: 10px 14px;
	margin: 0;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: var(--radius-md);
	color: rgba(255, 230, 178, 0.95);
	font-size: var(--text-sm);
}

.deploy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-lg);
	align-items: start;
}

.deploy-main {
	min-width: 0;
	padding: var(--space-lg);
	background: var(--surface-glass);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
}

.deploy-preview {
	position: sticky;
	top: calc(var(--header-h) + var(--space-md));
}

.deploy-preview-card {
	padding: var(--space-md);
	background: var(--surface-glass);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.deploy-preview-eyebrow {
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: var(--space-sm);
}

.deploy-preview-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: var(--space-sm);
	background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0));
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.deploy-preview-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.deploy-preview-mv {
	width: 100%;
	height: 100%;
	display: block;
	background: transparent;
	--poster-color: transparent;
}

.deploy-preview-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.3);
	letter-spacing: 0.04em;
}

.deploy-preview-name {
	font-size: var(--text-lg);
	font-weight: 500;
	color: #fff;
	margin-bottom: 2px;
	word-break: break-word;
}

.deploy-preview-desc {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: var(--space-sm);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.deploy-preview-dim {
	color: rgba(255, 255, 255, 0.3);
	font-style: italic;
}

.deploy-preview-meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px var(--space-sm);
	margin: 0 0 var(--space-sm);
	padding: var(--space-sm) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: var(--text-xs);
}

.deploy-preview-meta dt {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

.deploy-preview-meta dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	word-break: break-word;
}

.deploy-svc-pill {
	display: inline-block;
	padding: 2px 8px;
	margin-right: 4px;
	background: var(--surface-2);
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-pill);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.8);
}

.deploy-preview-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
}

.deploy-check {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.02em;
}

.deploy-check.is-ok {
	color: var(--success);
}

.deploy-quickstart-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.deploy-quickstart-bar-label {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-right: 4px;
}

.deploy-qs-chip {
	padding: 5px 10px;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: inherit;
	transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.deploy-qs-chip:hover:not(:disabled) {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
}

.deploy-qs-chip:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Steps as a connected progress bar */
.deploy-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-bottom: var(--space-md);
	padding: 0;
	list-style: none;
}

.deploy-steps::before {
	content: '';
	position: absolute;
	top: 16px;
	left: calc(100% / 8);
	right: calc(100% / 8);
	height: 2px;
	background: rgba(255, 255, 255, 0.08);
	z-index: 0;
}

.deploy-step {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 8px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--text-xs);
}

.deploy-step .erc8004-step-num {
	width: 32px;
	height: 32px;
	background: rgba(20, 20, 30, 1);
	border: 2px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.6);
	font-weight: 500;
}

.deploy-step--active .erc8004-step-num {
	background: linear-gradient(135deg, #ffffff, #ffffff) !important;
	border-color: rgba(255, 255, 255, 0.8);
	color: #000000;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

.deploy-step--done .erc8004-step-num {
	background: rgba(74, 222, 128, 0.16);
	border-color: rgba(74, 222, 128, 0.5);
	color: var(--success);
}

.deploy-step--active {
	color: #fff;
}

.deploy-step--done {
	color: rgba(74, 222, 128, 0.85);
	cursor: pointer;
}

.deploy-step--done:hover {
	color: var(--success);
}

.deploy-step .erc8004-step-lbl {
	font-weight: 500;
	letter-spacing: 0.02em;
}

.deploy-wizard .erc8004-wizard-body {
	padding: 0;
	background: transparent;
	border: 0;
}

.deploy-wizard .erc8004-h3 {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 4px;
}

.deploy-wizard .erc8004-p {
	margin-bottom: var(--space-md);
}

.deploy-wizard .erc8004-input {
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
}

.deploy-wizard .erc8004-input:focus {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.deploy-wizard .erc8004-wizard-nav {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.deploy-wizard .erc8004-btn--primary {
	padding: 10px 18px;
	font-weight: 600;
	color: #000;
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.deploy-wizard .erc8004-btn--primary:hover:not(:disabled) {
	background: var(--ink);
	border-color: var(--ink);
}

@media (max-width: 900px) {
	.deploy-hero {
		grid-template-columns: minmax(0, 1fr);
		align-items: stretch;
	}
	.deploy-hero-controls {
		flex-direction: row;
		align-items: end;
	}
	.deploy-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.deploy-preview {
		position: static;
		order: -1;
	}
	.deploy-preview-thumb {
		aspect-ratio: 2.4;
	}
}

@media (max-width: 560px) {
	.deploy-hero-controls {
		flex-direction: column;
	}
	.deploy-step .erc8004-step-lbl {
		font-size: 10px;
	}
}

.erc8004-card {
	width: 100%;
	max-width: 480px;
	background: var(--surface-glass);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
	padding: var(--space-xl) var(--space-lg);
}

.erc8004-title {
	margin: 0 0 var(--space-3xs);
	font-size: var(--text-xl);
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.02em;
}

.erc8004-subtitle {
	margin: 0 0 var(--space-lg);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.45);
	font-weight: 300;
}

.erc8004-section {
	margin-bottom: var(--space-md);
}

.erc8004-label {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
}

.erc8004-input {
	display: block;
	width: 100%;
	margin-top: var(--space-3xs);
	padding: 9px 12px;
	background: var(--surface-2);
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-control);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-base);
	outline: none;
	transition: border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base);
}

.erc8004-input:focus {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.erc8004-textarea {
	resize: vertical;
	min-height: 3.6em;
}

.erc8004-file-drop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	margin-top: var(--space-3xs);
	border: 2px dashed var(--stroke-strong);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition:
		border-color var(--duration-base),
		background var(--duration-base);
}

.erc8004-file-drop:hover,
.erc8004-file-drop--active {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.03);
}

.erc8004-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.erc8004-file-text {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

.erc8004-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-md);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-control);
	background: var(--surface-2);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	transition:
		background var(--duration-base),
		border-color var(--duration-base);
}

.erc8004-btn:hover:not(:disabled) {
	background: var(--surface-3);
	border-color: var(--stroke-strong);
}

.erc8004-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.erc8004-btn--register {
	width: 100%;
	justify-content: center;
	padding: var(--space-sm) var(--space-md);
	font-weight: 600;
	color: #000;
	background: var(--accent);
	border-color: var(--accent);
}

.erc8004-btn--register:hover:not(:disabled) {
	background: var(--ink);
	border-color: var(--ink);
}

.erc8004-btn--view {
	margin-top: var(--space-sm);
}

.erc8004-wallet-addr {
	display: inline-block;
	margin-left: var(--space-xs);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
	font-family: monospace;
}

/* ── Deploy phase tracker (Prepare / Sign / Confirm) ── */
.deploy-phase-track {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: var(--space-md) 0 var(--space-sm);
	padding: var(--space-sm) 0;
	border-left: 2px solid rgba(255, 255, 255, 0.08);
	padding-left: var(--space-md);
}

.deploy-phase {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	position: relative;
	transition: opacity var(--duration-base) var(--ease-standard);
}

.deploy-phase--pending {
	opacity: 0.4;
}

.deploy-phase--active {
	opacity: 1;
}

.deploy-phase--done {
	opacity: 0.75;
}

.deploy-phase-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 3px;
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.2);
	transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.deploy-phase--active .deploy-phase-dot {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
	animation: deploy-phase-pulse 1.8s ease-in-out infinite;
}

.deploy-phase--done .deploy-phase-dot {
	background: rgba(74, 222, 128, 0.7);
	border-color: rgba(74, 222, 128, 0.7);
}

@keyframes deploy-phase-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.3); }
	60%  { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}

.deploy-phase-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.deploy-phase-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: 0.01em;
}

.deploy-phase--pending .deploy-phase-label {
	color: rgba(255, 255, 255, 0.45);
}

.deploy-phase--done .deploy-phase-label {
	color: rgba(74, 222, 128, 0.85);
}

.deploy-phase-hint {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.45;
}

.deploy-phase--active .deploy-phase-hint {
	color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
	.deploy-phase--active .deploy-phase-dot {
		animation: none;
	}
}

/* Error phase: the in-flight phase turns red when a deploy fails, so the user
 * can see exactly which stage stopped. Cleared on retry. */
.deploy-phase--error {
	opacity: 1;
}

.deploy-phase--error .deploy-phase-dot {
	background: rgba(248, 113, 113, 0.85);
	border-color: rgba(248, 113, 113, 0.85);
	box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
	animation: none;
}

.deploy-phase--error .deploy-phase-label {
	color: #fca5a5;
}

/* ── Deploy failure panel (message + working retry) ── */
.deploy-error-panel {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: rgba(127, 29, 29, 0.14);
	border: 1px solid rgba(248, 113, 113, 0.32);
	border-radius: var(--radius-md);
}

.deploy-error-panel-title {
	margin-bottom: 4px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: #fca5a5;
}

.deploy-error-panel-msg {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: rgba(252, 165, 165, 0.9);
	word-break: break-word;
}

/* ── Step bar: completed steps are real buttons (keyboard + focus ring) ── */
.deploy-step-btn,
.deploy-step-static {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.deploy-step-btn {
	padding: 2px;
	margin: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	border-radius: var(--radius-sm);
}

.deploy-step-btn:hover .erc8004-step-num {
	border-color: rgba(74, 222, 128, 0.85);
}

.deploy-step-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 3px;
}

/* Step headings receive focus programmatically on step change; the move is
 * announced by AT, a visible ring on a heading is just noise. */
.deploy-wizard .erc8004-h3[tabindex='-1']:focus,
.erc8004-wizard-body .erc8004-h3[tabindex='-1']:focus {
	outline: none;
}

/* ── Inline field validation + character counters ── */
.erc8004-field-error {
	margin: 4px 0 0;
	font-size: var(--text-xs);
	color: var(--danger);
}

.erc8004-input--invalid,
.deploy-wizard .erc8004-input--invalid {
	border-color: rgba(248, 113, 113, 0.6);
}

.erc8004-input--invalid:focus,
.deploy-wizard .erc8004-input--invalid:focus {
	border-color: rgba(248, 113, 113, 0.8);
	box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

.erc8004-hint-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-sm);
}

.erc8004-count {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.35);
	font-variant-numeric: tabular-nums;
	transition: color var(--duration-fast) var(--ease-standard);
}

.erc8004-count--limit {
	color: rgba(245, 158, 11, 0.9);
}

/* ── Services: designed empty state ── */
.erc8004-svc-empty {
	padding: var(--space-sm) var(--space-md);
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* ── Deploy success entrance ── */
.deploy-result--in {
	animation: deploy-result-in 0.35s ease both;
}

.deploy-result:focus {
	outline: none;
}

@keyframes deploy-result-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.deploy-result--in {
		animation: none;
	}
}

/* ── Touch targets: 44px minimum on coarse pointers ── */
@media (pointer: coarse) {
	.deploy-qs-chip {
		min-height: 44px;
		padding: 10px 14px;
	}
	.deploy-wizard .erc8004-btn,
	.erc8004-wizard-nav .erc8004-btn,
	.deploy-wallet-btn,
	.deploy-step-btn {
		min-height: 44px;
	}
	.deploy-shell .erc8004-chain-select {
		min-height: 44px;
	}
	.deploy-wizard .erc8004-input {
		min-height: 44px;
	}
}

/* ── Deploy success result panel ── */
.deploy-result {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: rgba(74, 222, 128, 0.06);
	border: 1px solid rgba(74, 222, 128, 0.18);
	border-radius: var(--radius-control);
}

.deploy-result-badge {
	display: flex;
	justify-content: flex-start;
	margin-bottom: var(--space-sm);
}

.deploy-result-heading {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-base);
	font-weight: 600;
	color: rgba(74, 222, 128, 0.9);
}

.erc8004-log {
	max-height: 120px;
	overflow-y: auto;
	margin-top: var(--space-sm);
	font-size: var(--text-xs);
	font-family: monospace;
	color: rgba(255, 255, 255, 0.5);
}

.erc8004-log-line {
	padding: 2px 0;
}

.erc8004-log-error {
	color: var(--danger);
}

.erc8004-result {
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: rgba(74, 222, 128, 0.08);
	border: 1px solid rgba(74, 222, 128, 0.2);
	border-radius: var(--radius-control);
}

.erc8004-checkmark {
	display: block;
	font-size: 2rem;
	color: var(--success);
	margin-bottom: var(--space-xs);
}

.erc8004-result h3 {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-lg);
	font-weight: 500;
	color: #fff;
}

.erc8004-result-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3xs) var(--space-sm);
	margin: 0;
	font-size: var(--text-sm);
}

.erc8004-result-dl dt {
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
}

.erc8004-result-dl dd {
	margin: 0;
	color: #fff;
	font-family: monospace;
	word-break: break-all;
}

@media screen and (max-width: 700px) {
	.erc8004-card {
		padding: var(--space-lg) var(--space-md);
	}
}

/* ── Tabbed Agent Studio (extends the basic register styles above) ──── */

.erc8004-card--wide {
	max-width: 880px;
}

.erc8004-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
}

.erc8004-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.85);
}

.erc8004-brand-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: #000;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.erc8004-brand-title b {
	font-weight: 600;
	color: #fff;
}

.erc8004-controls {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	flex-wrap: wrap;
}

.erc8004-chain-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 7px 30px 7px 10px;
	background-color: var(--surface-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-control);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		background-color var(--duration-fast),
		border-color var(--duration-fast);
}

.erc8004-chain-select:hover {
	background-color: var(--surface-3);
	border-color: rgba(255, 255, 255, 0.28);
}

.erc8004-chain-select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.erc8004-chain-select option,
.erc8004-chain-select optgroup {
	background-color: #111111;
	color: #e6e6e6;
}

.erc8004-btn--wallet.erc8004-btn--connected {
	background: rgba(74, 222, 128, 0.16);
	border-color: rgba(74, 222, 128, 0.4);
	color: var(--success);
}

.erc8004-btn--primary {
	color: #000;
	background: var(--accent);
	border-color: var(--accent);
}

.erc8004-btn--primary:hover:not(:disabled) {
	background: var(--ink);
	border-color: var(--ink);
}

.erc8004-btn--ghost {
	background: transparent;
}

.erc8004-btn--x {
	padding: 4px 8px;
}

.erc8004-btn--close {
	padding: 4px 10px;
	font-size: var(--text-base);
	line-height: 1;
}

.erc8004-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.erc8004-stat {
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
	text-align: center;
}

.erc8004-stat-val {
	font-size: var(--text-lg);
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.erc8004-stat-lbl {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.45);
	margin-top: 2px;
}

.erc8004-tabs {
	display: flex;
	gap: 2px;
	padding: 4px;
	margin-bottom: var(--space-md);
	background: var(--surface-1);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-control);
	overflow-x: auto;
}

.erc8004-tab {
	flex: 1;
	min-width: max-content;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition:
		background var(--duration-base),
		color var(--duration-base);
}

.erc8004-tab:hover {
	color: #fff;
}

.erc8004-tab--active {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.erc8004-tab-body {
	min-height: 280px;
}

.erc8004-wizard {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.erc8004-steps {
	display: flex;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.erc8004-step {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-xs);
}

.erc8004-step--active {
	background: var(--accent-soft);
	border-color: var(--stroke-strong);
	color: #fff;
}

.erc8004-step--done {
	color: var(--success);
	border-color: rgba(74, 222, 128, 0.3);
}

.erc8004-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	font-weight: 600;
}

.erc8004-step--active .erc8004-step-num {
	background: var(--accent);
	color: #000;
}

.erc8004-wizard-body {
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
}

.erc8004-wizard-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.erc8004-wizard-nav > :only-child {
	margin-left: auto;
}

.erc8004-h3 {
	margin: 0 0 var(--space-3xs);
	font-size: var(--text-lg);
	font-weight: 500;
	color: #fff;
}

.erc8004-h4 {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-base);
	font-weight: 500;
	color: #fff;
}

.erc8004-p {
	margin: 0 0 var(--space-sm);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
}

.erc8004-req {
	color: var(--danger);
}

.erc8004-hint {
	margin: -2px 0 var(--space-sm);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.35);
}

.erc8004-image-row {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
}

.erc8004-image-row .erc8004-input {
	flex: 1 1 0;
	min-width: 0;
}

.erc8004-capture-btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.erc8004-muted {
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-sm);
}

.erc8004-small {
	font-size: var(--text-xs);
}

.erc8004-row {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
}

.erc8004-link {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.erc8004-link:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.6);
}

.erc8004-alert {
	padding: var(--space-xs) var(--space-sm);
	margin-bottom: var(--space-sm);
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: var(--radius-sm);
	color: rgba(253, 224, 71, 0.9);
	font-size: var(--text-sm);
}

/* Neutral informational note — monochrome, distinct from the amber warnings. */
.erc8004-alert--note {
	background: var(--surface-2);
	border-color: var(--stroke-strong);
	color: var(--ink-dim);
}

/* Gasless BNB Chain registration panel (Review & Deploy step, BSC Testnet
   only) — visually distinct call-out for the zero-gas path, separate from
   the primary wallet-connected deploy flow above it. */
.erc8004-gasless-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
	background: var(--accent-soft);
	border: 1px solid var(--accent);
	border-radius: var(--radius-md);
}

.erc8004-gasless-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
}

.erc8004-gasless-badge {
	flex-shrink: 0;
	padding: 2px 10px;
	background: var(--accent);
	color: var(--surface-1);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.erc8004-gasless-panel .erc8004-h4 {
	margin: 0 0 4px;
}

.erc8004-gasless-panel .erc8004-p {
	margin: 0;
}

.erc8004-tag {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
}

.erc8004-clip {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.erc8004-services {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.erc8004-svc-row {
	display: grid;
	grid-template-columns: 140px 160px 1fr auto;
	gap: var(--space-xs);
	align-items: center;
}

.erc8004-input--tight {
	width: auto;
}

.erc8004-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3xs) var(--space-md);
	margin: 0 0 var(--space-sm);
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}

.erc8004-summary dt {
	color: rgba(255, 255, 255, 0.45);
}

.erc8004-summary dd {
	margin: 0;
	color: #fff;
	word-break: break-word;
}

.erc8004-img-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-width: 0;
}

.erc8004-img-summary .erc8004-muted,
.erc8004-img-summary a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.erc8004-img-thumb {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

.erc8004-agent-card {
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-xs);
}

.erc8004-agent-card-inner {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--space-sm);
	align-items: start;
}

.erc8004-agent-card-img {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.erc8004-agent-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.erc8004-agent-card-ph {
	font-size: 2rem;
	opacity: 0.5;
}

.erc8004-agent-card-head {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-3xs);
	color: #fff;
	font-weight: 500;
}

.erc8004-agent-card-actions {
	display: inline-flex;
	gap: var(--space-sm);
	margin-top: var(--space-xs);
	font-size: var(--text-xs);
}

.erc8004-template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-sm);
}

.erc8004-template {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		background var(--duration-base),
		border-color var(--duration-base),
		transform var(--duration-fast);
}

.erc8004-template:hover {
	background: var(--surface-3);
	border-color: var(--stroke-strong);
	transform: translateY(-1px);
}

.erc8004-template-emoji {
	font-size: 1.75rem;
	line-height: 1;
}

.erc8004-template-name {
	font-weight: 500;
	font-size: var(--text-sm);
}

.erc8004-template-desc {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.4;
}

.erc8004-history-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3xs);
	font-size: var(--text-sm);
}

.erc8004-history-main {
	min-width: 0;
	flex: 1;
}

.erc8004-history-main code {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
}

.erc8004-toast {
	position: fixed;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--space-sm) var(--space-md);
	background: rgba(20, 20, 25, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	color: #fff;
	font-size: var(--text-sm);
	z-index: 100;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.erc8004-toast--error {
	background: rgba(127, 29, 29, 0.95);
	border-color: rgba(248, 113, 113, 0.4);
}

@media screen and (max-width: 700px) {
	.erc8004-stats {
		grid-template-columns: 1fr;
	}
	.erc8004-svc-row {
		grid-template-columns: 1fr;
	}
	.erc8004-agent-card-inner {
		grid-template-columns: 56px 1fr;
	}
	.erc8004-agent-card-img {
		width: 56px;
		height: 56px;
	}
	.erc8004-step-lbl {
		display: none;
	}
}

/* ==========================================================================
   /showcase — on-chain agent directory
   Shares the dashboard-next monochrome aesthetic (panels, pills, white
   primary action) so the directory feels like the rest of the product.
   Markup: src/erc8004/showcase.js → renderShowcasePage(); mounted by
   src/app.js `_showShowcasePage` inside the app shell.
   ========================================================================== */

.showcase-page {
	display: block;
	width: 100%;
	padding: var(--space-md) var(--space-lg) var(--space-2xl);
}

.showcase-shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.showcase-hero {
	padding: var(--space-xl) 0 var(--space-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.showcase-hero-inner {
	max-width: 760px;
}
.showcase-eyebrow {
	display: inline-block;
	padding: 4px 11px;
	margin-bottom: var(--space-sm);
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
}
.showcase-title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
}
.showcase-subtitle {
	margin: 0 0 var(--space-lg);
	max-width: 62ch;
	font-size: var(--text-base);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}
.showcase-subtitle code {
	padding: 1px 6px;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.88em;
	color: rgba(255, 255, 255, 0.82);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
}

/* ── Stats ─────────────────────────────────────────────────────────────── */
.showcase-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
}
.showcase-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.showcase-stat-value {
	font-size: 1.5rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.showcase-stat-label {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

/* ── Controls ──────────────────────────────────────────────────────────── */
.showcase-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.showcase-controls-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
}
.showcase-controls-spacer {
	flex: 1 1 auto;
}
.showcase-controls-lbl {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
	font-weight: 600;
}

/* segmented net switch */
.showcase-segmented {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
}
.showcase-seg {
	padding: 6px 14px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}
.showcase-seg:hover {
	color: #fff;
}
.showcase-seg--active {
	background: var(--accent);
	color: #000;
}

/* sort select */
.showcase-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
}
.showcase-sort-lbl {
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}
.showcase-sort-sel {
	padding: 7px 12px;
	background: var(--surface-2);
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-control);
	color: #fff;
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}
/* QB-07 interactive-state pass: every control below promises it is clickable
   (cursor: pointer) and now answers on hover, on the platform's motion ladder
   (--duration-fast, --ease-standard). Focus and disabled come from the floors
   in public/tokens.css; hover is the one a component has to author. */
.showcase-sort-sel,
.erc8004-accordion-head,
.erc8004-checkbox,
.erc8004-checkbox input[type='checkbox'] {
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.showcase-sort-sel:hover {
	background: var(--surface-3);
	border-color: var(--accent);
}
.showcase-sort-sel option {
	background: #151515;
	color: #e6e6e6;
}

/* chain chips */
.showcase-chain-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.showcase-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.7);
	font: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.showcase-chip:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
}
.showcase-chip--active {
	color: #000;
	background: var(--accent);
	border-color: var(--accent);
}
.showcase-chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}
.showcase-chip--active .showcase-chip-dot {
	background: #000;
}
.showcase-chip--testnet .showcase-chip-dot {
	background: var(--warn);
}
.showcase-chip--active.showcase-chip--testnet .showcase-chip-dot {
	background: #000;
}
.showcase-chip-reset {
	padding: 5px 11px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.55);
	font: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition:
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.showcase-chip-reset:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

/* ── Grid + cards ──────────────────────────────────────────────────────── */
.showcase-results {
	min-height: 200px;
}
.showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.showcase-card {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	overflow: hidden;
	transition:
		transform var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.showcase-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

/* thumb */
.showcase-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0));
	overflow: hidden;
}
.showcase-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-base) var(--ease-standard);
}
.showcase-card:hover .showcase-card-thumb img {
	transform: scale(1.04);
}
.showcase-card-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.4rem;
	opacity: 0.5;
}
.showcase-chain-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff;
	background: rgba(0, 0, 0, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-pill);
}
.showcase-chain-badge--testnet {
	color: var(--warn);
}
.showcase-card-3dpill {
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 600;
	color: #000;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--radius-pill);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}
.showcase-card:hover .showcase-card-3dpill {
	opacity: 1;
	transform: translateY(0);
}

/* body */
.showcase-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-md);
}
.showcase-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}
.showcase-card-title {
	font-size: var(--text-base);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.showcase-card-title:hover {
	text-decoration: underline;
}
.showcase-card-id {
	flex-shrink: 0;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	font-variant-numeric: tabular-nums;
}
.showcase-card-desc {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.55);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.showcase-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.showcase-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	background: var(--surface-2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-pill);
}
.showcase-tag--3d {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.22);
}
.showcase-tag--x402 {
	color: var(--success);
	border-color: rgba(74, 222, 128, 0.3);
	background: rgba(74, 222, 128, 0.08);
}
.showcase-card-owner {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.42);
	text-decoration: none;
	font-family: var(--font-mono, ui-monospace, monospace);
}
.showcase-card-owner:hover {
	color: rgba(255, 255, 255, 0.7);
}
.showcase-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

/* buttons (mirror the dashboard .dn-btn) */
.showcase-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	background: var(--surface-2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-control);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-instant) var(--ease-standard);
}
.showcase-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
}
.showcase-btn:active {
	transform: scale(0.98);
}
.showcase-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.showcase-btn--sm {
	padding: 6px 11px;
	font-size: var(--text-xs);
	border-radius: var(--radius-sm);
}
.showcase-btn--primary {
	background: var(--accent);
	border-color: var(--accent);
	color: #000;
	font-weight: 600;
}
.showcase-btn--primary:hover {
	background: var(--ink);
	border-color: var(--ink);
}
.showcase-btn--ghost {
	background: transparent;
}

/* Keyboard focus — interactive elements get a visible ring (the dashboard's
   blanket ring is scoped to .dn-shell and doesn't reach the showcase). */
.showcase-seg:focus-visible,
.showcase-chip:focus-visible,
.showcase-chip-reset:focus-visible,
.showcase-sort-sel:focus-visible,
.showcase-btn:focus-visible,
.showcase-card-thumb:focus-visible,
.showcase-card-title:focus-visible,
.showcase-card-owner:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* load more */
.showcase-loadmore {
	display: flex;
	justify-content: center;
	padding: var(--space-md) 0 var(--space-2xl);
}
.showcase-loadmore .showcase-btn {
	padding: 10px 22px;
}

/* ── Skeleton ──────────────────────────────────────────────────────────── */
.showcase-card--skel {
	pointer-events: none;
}
.showcase-skel-img {
	aspect-ratio: 1 / 1;
	background: rgba(255, 255, 255, 0.04);
}
.showcase-skel-line {
	height: 12px;
	margin: var(--space-md) var(--space-md) 0;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.06);
}
.showcase-skel-line--short {
	width: 55%;
	margin-bottom: var(--space-md);
}
.showcase-card--skel .showcase-skel-img,
.showcase-card--skel .showcase-skel-line {
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.06) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 200% 100%;
	animation: showcase-shimmer 1.4s ease-in-out infinite;
}
@keyframes showcase-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ── Empty / error ─────────────────────────────────────────────────────── */
.showcase-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-2xl) var(--space-lg);
	text-align: center;
}
.showcase-empty-art {
	font-size: 2.6rem;
	opacity: 0.85;
}
.showcase-empty h3 {
	margin: var(--space-xs) 0 0;
	font-size: var(--text-lg);
	font-weight: 600;
	color: #fff;
}
.showcase-muted {
	margin: 0;
	max-width: 42ch;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.5;
}
.showcase-muted a {
	color: #fff;
	text-decoration: underline;
}
.showcase-empty .showcase-btn {
	margin-top: var(--space-sm);
}
.showcase-empty--error .showcase-empty-art {
	opacity: 1;
}
.showcase-empty--error h3 {
	color: var(--danger);
}

@media (max-width: 560px) {
	.showcase-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}
	.showcase-stats {
		gap: var(--space-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.showcase-card,
	.showcase-card-thumb img,
	.showcase-card-3dpill,
	.showcase-btn,
	.showcase-card--skel .showcase-skel-img,
	.showcase-card--skel .showcase-skel-line {
		transition: none;
		animation: none;
	}
}

/******************************************************************************
 * Create Avatar Button
 */

.create-avatar-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
	border: 1px solid rgba(255, 255, 255, 0.21);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
	letter-spacing: -0.005em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.create-avatar-btn:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.16));
	border-color: rgba(255, 255, 255, 0.35);
}

.create-avatar-btn:active {
	transform: translateY(1px);
}

/* Forge variant — the flagship generate path gets slightly brighter glass
   and a soft halo on hover so it reads first in the bottom bar. */
.create-avatar-btn--forge {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.14));
	border-color: rgba(255, 255, 255, 0.32);
}

.create-avatar-btn--forge:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.2));
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 0 18px rgba(255, 255, 255, 0.12);
}

.create-avatar-btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex-shrink: 0;
}

@media screen and (max-width: 700px) {
	.create-avatar-btn span {
		display: none;
	}

	.create-avatar-btn {
		padding: var(--space-xs) var(--space-sm);
	}
}

/******************************************************************************
 * Viewer nav action buttons — Save / Make Widget / Deploy / Public profile
 *
 * All four share a single neutral pill style so the header doesn't read as a
 * rainbow. Each keeps a tinted SVG icon as its identity cue. Deploy is the
 * primary CTA — slightly stronger fill — and gains a fully-saturated success
 * state once on-chain.
 */
.save-to-account-btn,
.make-widget-btn,
.deploy-onchain-btn,
.view-public-profile-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.78);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.save-to-account-btn:hover,
.make-widget-btn:hover,
.deploy-onchain-btn:hover,
.view-public-profile-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}
.save-to-account-btn:active,
.make-widget-btn:active,
.deploy-onchain-btn:active,
.view-public-profile-btn:active {
	transform: translateY(1px);
}
.save-to-account-btn:focus-visible,
.make-widget-btn:focus-visible,
.deploy-onchain-btn:focus-visible,
.view-public-profile-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}
.save-to-account-btn[hidden],
.make-widget-btn[hidden],
.deploy-onchain-btn[hidden],
.view-public-profile-btn[hidden] {
	display: none;
}
.save-to-account-btn svg,
.make-widget-btn svg,
.deploy-onchain-btn svg,
.view-public-profile-btn svg {
	width: 1em;
	height: 1em;
	transition: color var(--duration-fast) var(--ease-standard);
}
.save-to-account-btn[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

/* Per-button icon accents — color identity lives in the icon, not the pill */
.save-to-account-btn svg     { color: var(--ink-dim); }
.make-widget-btn svg         { color: #5eead4; } /* teal   */
.view-public-profile-btn svg { color: #fcd34d; } /* gold   */
.deploy-onchain-btn svg      { color: var(--ink-dim); } /* neutral */

/* Deploy on-chain — primary CTA, slightly stronger to pull the eye */
.deploy-onchain-btn {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}
.deploy-onchain-btn:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12));
	border-color: rgba(255, 255, 255, 0.45);
}

/* "Deployed ✓" success state — replaces the call-to-action once on-chain. */
.deploy-onchain-btn.is-deployed {
	background: rgba(74, 222, 128, 0.12);
	border-color: rgba(74, 222, 128, 0.42);
	color: var(--success);
}
.deploy-onchain-btn.is-deployed svg {
	color: var(--success);
}
.deploy-onchain-btn.is-deployed:hover {
	background: rgba(74, 222, 128, 0.22);
	color: #d1fae5;
	border-color: rgba(74, 222, 128, 0.7);
}

@media screen and (max-width: 700px) {
	.save-to-account-btn span,
	.make-widget-btn span,
	.deploy-onchain-btn span,
	.view-public-profile-btn span {
		display: none;
	}
	.save-to-account-btn,
	.make-widget-btn,
	.deploy-onchain-btn,
	.view-public-profile-btn {
		padding: var(--space-xs) var(--space-sm);
	}
}

/******************************************************************************
 * Layout switch — segmented toggle between "Classic" (current viewer chrome)
 * and "Next" (the in-development alternate layout). Persists across sessions
 * via localStorage and writes data-layout on <body> so CSS rules can scope
 * overrides under body[data-layout='next'].
 */
.layout-switch {
	display: inline-flex;
	align-items: stretch;
	padding: 2px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	gap: 2px;
}
.layout-switch[hidden] {
	display: none;
}
.layout-switch__btn {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	font: inherit;
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 4px 10px;
	border-radius: calc(var(--radius-md) - 3px);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}
.layout-switch__btn:hover {
	color: #fff;
}
.layout-switch__btn--active {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.layout-switch__btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

/* The switch is meaningless in embed/widget/kiosk/deploy/explore contexts. */
body[data-viewer-mode='embed'] #layout-switch,
body[data-viewer-mode='deploy'] #layout-switch,
body[data-viewer-mode='explore'] #layout-switch {
	display: none !important;
}

/******************************************************************************
 * Avatar Creator Modal
 */

.avatar-creator-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
	animation: avatar-creator-fadein 0.25s ease;
}

@keyframes avatar-creator-fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.avatar-creator-modal {
	width: 95vw;
	height: 90vh;
	max-width: 1200px;
	display: flex;
	flex-direction: column;
	background: rgba(10, 10, 10, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}

.avatar-creator-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-lg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}

.avatar-creator-title {
	font-size: var(--text-lg);
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.03em;
}

.avatar-creator-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-2xl);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color var(--duration-base) var(--ease-standard);
}

.avatar-creator-close:hover {
	color: #fff;
}

.avatar-creator-body {
	flex: 1;
	position: relative;
	min-height: 0;
}

.avatar-creator-container {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

.avatar-creator-iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.avatar-creator-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-sm);
	pointer-events: none;
}

.avatar-creator-loading .spinner {
	position: static;
	margin: 0;
}

.avatar-creator-error {
	color: var(--danger);
	font-size: var(--text-sm);
}

@media screen and (max-width: 700px) {
	.avatar-creator-modal {
		width: 100vw;
		height: 100vh;
		max-width: none;
		border-radius: 0;
	}

	.avatar-creator-header {
		padding: var(--space-xs) var(--space-md);
	}
}

/* ============================================================================
   Agent Presence System
   The visual layer that makes agents real — not just JSON.
   ============================================================================ */

/* ── Sidebar layout ────────────────────────────────────────────────────────── */

.agent-presence-sidebar {
	position: fixed;
	top: calc(var(--header-h) + var(--space-md));
	left: var(--space-md);
	width: 220px;
	z-index: 50;
	pointer-events: none;
}

/* Collapsed state — panel hidden, only show-pill visible */
.agent-presence-sidebar[data-collapsed='true'] .agent-home-panel {
	display: none;
}

.agent-home-show-pill {
	display: none;
	pointer-events: all;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, rgba(18, 18, 26, 0.92) 0%, rgba(10, 10, 16, 0.92) 100%);
	color: #e0e0e0;
	font-size: 16px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.agent-home-show-pill:hover {
	transform: scale(1.06);
	border-color: rgba(255, 255, 255, 0.25);
}

.agent-presence-sidebar[data-collapsed='true'] .agent-home-show-pill {
	display: flex;
}

.agent-home-panel {
	background: linear-gradient(180deg, rgba(18, 18, 26, 0.92) 0%, rgba(10, 10, 16, 0.92) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	pointer-events: all;
	display: flex;
	flex-direction: column;
	gap: 0;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Identity card ─────────────────────────────────────────────────────────── */

.agent-home-identity {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-sm);
}

.agent-home-avatar-ring {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		border-color var(--duration-slow) var(--ease-standard),
		box-shadow var(--duration-slow) var(--ease-standard);
}

/* Emotion ring colours */
.agent-home-avatar-ring[data-emotion='celebration'] {
	border-color: rgba(134, 239, 172, 0.6);
	box-shadow: 0 0 10px rgba(134, 239, 172, 0.25);
}
.agent-home-avatar-ring[data-emotion='concern'] {
	border-color: rgba(252, 165, 89, 0.6);
	box-shadow: 0 0 10px rgba(252, 165, 89, 0.2);
}
.agent-home-avatar-ring[data-emotion='curiosity'] {
	border-color: rgba(147, 197, 253, 0.6);
	box-shadow: 0 0 10px rgba(147, 197, 253, 0.2);
}
.agent-home-avatar-ring[data-emotion='empathy'] {
	border-color: rgba(216, 180, 254, 0.6);
	box-shadow: 0 0 10px rgba(216, 180, 254, 0.2);
}
.agent-home-avatar-ring[data-emotion='patience'] {
	border-color: rgba(209, 213, 219, 0.4);
}

.agent-home-avatar-inner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.agent-home-info {
	flex: 1;
	min-width: 0;
}

.agent-home-name-row {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.agent-home-name {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	color: #f5f5f7;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Inline-editable fields (name, description) ─────────────────────────── */
.agent-home-editable {
	cursor: text;
	border-radius: var(--radius-sm);
	padding: 1px 4px;
	margin: -1px -4px;
	transition:
		background var(--duration-fast),
		box-shadow var(--duration-fast);
	outline: none;
}
.agent-home-editable:hover:not(.is-editing) {
	background: rgba(255, 255, 255, 0.04);
}
.agent-home-editable.is-editing,
.agent-home-editable:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.5);
}
.agent-home-editable.is-saving {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
	opacity: 0.7;
}
.agent-home-editable.is-saved {
	box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.6);
}
.agent-home-editable.is-error {
	box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.7);
}
/* Empty-state placeholder (no actual <input>, so we render via :before). */
.agent-home-editable:empty:not(.is-editing):before {
	content: attr(data-placeholder);
	color: rgba(255, 255, 255, 0.28);
	font-style: italic;
}

.agent-home-description {
	margin: 4px 0 0;
	font-size: var(--text-xs);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.45;
	white-space: normal;
}
.agent-home-description.agent-home-editable {
	cursor: text;
}

.agent-home-status-sep {
	color: rgba(255, 255, 255, 0.2);
	margin: 0 2px;
}

.agent-home-status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	margin-top: 1px;
}

.agent-home-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

.agent-home-dot.online {
	background: var(--success);
	box-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
	animation: agent-dot-pulse 2.5s ease infinite;
}

@keyframes agent-dot-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

#agent-home-emotion-label {
	transition: opacity var(--duration-fast) var(--ease-standard);
}

.agent-home-address {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
	font-family: var(--font-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.agent-home-actions {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	flex-shrink: 0;
}

.agent-home-btn {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.4);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition:
		color var(--duration-base),
		border-color var(--duration-base);
	padding: 0;
	font-size: var(--text-xs);
}

.agent-home-btn:hover {
	color: rgba(255, 255, 255, 0.8);
	border-color: rgba(255, 255, 255, 0.3);
}

/* Microinteractions (B11) — focus + press states for the agent-home panel. */
.agent-home-btn:active {
	color: #fff;
	background: var(--surface-2);
}
.agent-home-show-pill:active { transform: scale(0.97); }
.agent-home-btn:focus-visible,
.agent-home-show-pill:focus-visible,
.agent-home-skills-summary:focus-visible,
.agent-home-address--cta:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
@media (prefers-reduced-motion: reduce) {
	.agent-home-show-pill,
	.agent-home-btn,
	.agent-home-avatar-ring,
	.agent-home-chevron {
		transition: none !important;
		animation: none !important;
	}
	.agent-home-show-pill:hover,
	.agent-home-show-pill:active { transform: none; }
}

.agent-home-badge {
	font-size: 9px;
	padding: 2px 5px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.agent-home-badge.erc8004 {
	background: rgba(134, 239, 172, 0.12);
	color: var(--success);
	border: 1px solid rgba(74, 222, 128, 0.25);
	width: 14px;
	height: 14px;
	padding: 0;
	justify-content: center;
	flex-shrink: 0;
}

/* ── Skills (collapsed) ────────────────────────────────────────────────────── */

.agent-home-skills {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.agent-home-skills-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-xs) var(--space-sm);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition:
		color var(--duration-fast),
		background var(--duration-fast);
}

.agent-home-skills-summary::-webkit-details-marker {
	display: none;
}

.agent-home-skills-summary:hover {
	color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.02);
}

.agent-home-skills-label {
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.agent-home-skills-count {
	color: rgba(255, 255, 255, 0.35);
	font-variant-numeric: tabular-nums;
}

.agent-home-chevron {
	margin-left: auto;
	color: rgba(255, 255, 255, 0.3);
	transition: transform var(--duration-base) var(--ease-standard);
}

.agent-home-skills[open] .agent-home-chevron {
	transform: rotate(180deg);
}

.agent-home-skills-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 var(--space-sm) var(--space-xs);
}

.agent-skill-chip {
	font-size: 9px;
	padding: 2px 6px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.08);
	cursor: default;
	transition:
		background var(--duration-fast),
		color var(--duration-fast);
	white-space: nowrap;
}

.agent-skill-chip:hover {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.75);
}

/* ── Memory bar ────────────────────────────────────────────────────────────── */

.agent-home-memory-bar {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	flex-wrap: wrap;
}

.agent-mem-chip {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.4);
	cursor: default;
}

.agent-mem-total {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.2);
	margin-left: auto;
}

.agent-mem-empty {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.2);
	font-style: italic;
}

/* ── Action timeline ───────────────────────────────────────────────────────── */

.agent-home-timeline {
	max-height: 140px;
	overflow-y: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.agent-timeline-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--space-md) var(--space-sm);
	text-align: center;
}

.agent-timeline-empty-icon {
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 2px;
}

.agent-timeline-empty-title {
	font-size: 10px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.02em;
}

.agent-timeline-empty-sub {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.3);
	line-height: 1.4;
	max-width: 180px;
}

.agent-timeline-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: 4px var(--space-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	transition: background var(--duration-fast);
}

.agent-timeline-item:hover {
	background: rgba(255, 255, 255, 0.03);
}

.agent-timeline-icon {
	font-size: 10px;
	flex-shrink: 0;
	margin-top: 1px;
	width: 14px;
	text-align: center;
}

.agent-timeline-text {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.5);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agent-timeline-time {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
	white-space: nowrap;
}

@keyframes agent-timeline-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Edit affordance — pencil hint on hover ────────────────────────────────── */

.agent-home-editable:hover:not(.is-editing)::after {
	content: ' ✎';
	font-size: 9px;
	opacity: 0.35;
	pointer-events: none;
}

/* ── Local-save feedback (amber — distinct from green API-saved) ─────────────── */

.agent-home-editable.is-saved-local {
	box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6);
}

/* ── Char counter ────────────────────────────────────────────────────────────── */

.agent-edit-counter {
	display: none;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.22);
	margin-left: 4px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	user-select: none;
	transition: color var(--duration-fast);
}

.agent-edit-counter--visible {
	display: inline;
}

.agent-edit-counter--warn {
	color: rgba(251, 191, 36, 0.6);
}

.agent-edit-counter--over {
	color: rgba(248, 113, 113, 0.8);
}

/* ── Wallet address CTA button ───────────────────────────────────────────────── */

.agent-home-address--cta {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.35);
	font-size: 10px;
	font-family: var(--font-mono);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--duration-fast);
	text-decoration: underline dotted rgba(255, 255, 255, 0.2);
	text-underline-offset: 2px;
}

.agent-home-address--cta:hover {
	color: rgba(251, 191, 36, 0.85);
	text-decoration-color: rgba(251, 191, 36, 0.4);
}

/* ── Connect wallet nudge ────────────────────────────────────────────────────── */

.agent-wallet-nudge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: 6px var(--space-sm);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.agent-wallet-nudge--visible {
	opacity: 1;
	transform: translateY(0);
}

.agent-wallet-nudge-text {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.35);
	line-height: 1.3;
}

.agent-wallet-nudge-btn {
	background: none;
	border: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: var(--radius-pill);
	color: rgba(251, 191, 36, 0.8);
	font-size: 9px;
	padding: 2px 8px;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition:
		background var(--duration-fast),
		color var(--duration-fast),
		border-color var(--duration-fast);
}

.agent-wallet-nudge-btn:hover {
	background: rgba(251, 191, 36, 0.1);
	color: rgba(251, 191, 36, 1);
	border-color: rgba(251, 191, 36, 0.6);
}

/* ── NichAgent updates — emotion dot in header ─────────────────────────────── */

.nich-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.nich-header-right {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.nich-emotion-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transition:
		background var(--duration-slow) var(--ease-standard),
		box-shadow var(--duration-slow) var(--ease-standard);
}

.nich-sign {
	appearance: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	filter: grayscale(1) opacity(0.7);
	transition:
		filter var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}

.nich-sign:hover {
	filter: grayscale(0.4) opacity(0.95);
	border-color: rgba(255, 255, 255, 0.25);
}

.nich-sign:focus-visible {
	outline: none;
	border-color: rgba(167, 139, 250, 0.85);
	box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
}

.nich-sign.active {
	filter: none;
	background: rgba(167, 139, 250, 0.18);
	border-color: rgba(167, 139, 250, 0.6);
}

.nich-signcam {
	appearance: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	filter: grayscale(1) opacity(0.7);
	transition:
		filter var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}

.nich-signcam:hover:not(:disabled) {
	filter: grayscale(0.4) opacity(0.95);
	border-color: rgba(255, 255, 255, 0.25);
}

.nich-signcam:focus-visible {
	outline: none;
	border-color: rgba(167, 139, 250, 0.85);
	box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3);
}

.nich-signcam.active {
	filter: none;
	background: rgba(239, 68, 68, 0.16);
	border-color: rgba(239, 68, 68, 0.6);
	animation: nich-signcam-pulse 1.6s ease-in-out infinite;
}

.nich-signcam:disabled {
	opacity: 0.5;
	cursor: default;
}

@keyframes nich-signcam-pulse {
	50% {
		box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
	}
}

.nich-sign-preview {
	width: calc(100% - 20px);
	margin: 0 10px 6px;
	height: 150px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(239, 68, 68, 0.45);
	transform: scaleX(-1);
	background: #000;
}

.nich-model-select {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
	font-size: 11px;
	font-family: inherit;
	max-width: 150px;
	cursor: pointer;
	outline: none;
	transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.nich-model-select:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
}

.nich-model-select:focus {
	border-color: rgba(255, 255, 255, 0.4);
}

.nich-model-select option {
	background: var(--bg-1);
	color: #e0e0e0;
}

.nich-toggle-label {
	font-size: 10px;
	margin-top: 3px;
	display: block;
	color: rgba(255, 255, 255, 0.5);
}

.nich-message.status {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.3);
	font-style: italic;
	padding: 2px var(--space-xs);
}

.nich-message.typing {
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 2px;
	animation: nich-typing 1.1s ease-in-out infinite;
}

@keyframes nich-typing {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 0.85;
	}
}

.nich-mic-hint {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.25);
}

.nich-mic-row {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Thought Bubble — floats above avatar head ────────────────────────────── */

.thought-bubble {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
	transform-origin: center bottom;
	will-change: transform, left, top;
}

.thought-bubble--visible {
	opacity: 1;
	pointer-events: auto;
}

.thought-bubble__text {
	background: rgba(12, 12, 18, 0.88);
	color: rgba(255, 255, 255, 0.92);
	padding: 10px 16px;
	border-radius: var(--radius-lg);
	max-width: 280px;
	min-width: 48px;
	font-size: 13px;
	line-height: 1.45;
	font-family: var(--font-body);
	word-wrap: break-word;
	text-align: center;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.04);
}

.thought-bubble__text::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid rgba(12, 12, 18, 0.88);
}

.thought-bubble__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
}

.thought-bubble__dots span {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	animation: thought-dot-bounce 1.4s ease-in-out infinite both;
}

.thought-bubble__dots span:nth-child(2) {
	animation-delay: 0.16s;
}

.thought-bubble__dots span:nth-child(3) {
	animation-delay: 0.32s;
}

@keyframes thought-dot-bounce {
	0%, 80%, 100% {
		transform: translateY(0);
		opacity: 0.35;
	}
	40% {
		transform: translateY(-5px);
		opacity: 1;
	}
}

/* ── Responsive — hide sidebar on narrow viewports ─────────────────────────── */

@media screen and (max-width: 900px) {
	.agent-presence-sidebar {
		display: none;
	}
}

/* ── Agent Home standalone page ─────────────────────────────────────────────── */

.agent-home-page {
	min-height: 100vh;
	background: #000;
	color: #e0e0e0;
	font-family: var(--font-body);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-2xl) var(--space-md);
}

.agent-home-page-card {
	width: 100%;
	max-width: 480px;
	background: rgba(15, 15, 22, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.agent-home-page-card .agent-home-panel {
	background: transparent;
	border: none;
	border-radius: 0;
}

.agent-home-page-card .agent-home-timeline {
	max-height: 400px;
}

/******************************************************************************
 * Animation Panel (Mixamo-style action selector)
 */

.anim-panel {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: linear-gradient(180deg, rgba(18, 18, 26, 0.92) 0%, rgba(10, 10, 16, 0.92) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: var(--space-xs) var(--space-sm);
	max-width: 90vw;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	animation: anim-panel-in 0.3s ease;
}

@keyframes anim-panel-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.anim-panel--empty {
	display: none;
}

.anim-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3xs) var(--space-xs);
	margin-bottom: var(--space-3xs);
}

.anim-panel__title {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.anim-panel__stop {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.3);
	font-size: var(--text-sm);
	cursor: pointer;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	transition:
		color var(--duration-base),
		background var(--duration-base);
	line-height: 1;
}

.anim-panel__stop:hover {
	color: var(--danger);
	background: rgba(248, 113, 113, 0.1);
}

.anim-panel__grid {
	display: flex;
	gap: var(--space-xs);
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
	padding-bottom: 2px;
}

.anim-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: var(--space-xs) var(--space-sm);
	min-width: 64px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.6);
	font-family: inherit;
	font-size: var(--text-xs);
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-standard);
	flex-shrink: 0;
}

.anim-btn__key {
	position: absolute;
	top: 3px;
	right: 4px;
	font-family: var(--font-mono);
	font-size: 8px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.25);
	padding: 1px 3px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.04);
	line-height: 1;
	pointer-events: none;
	transition:
		color var(--duration-fast),
		background var(--duration-fast);
}

.anim-btn:hover .anim-btn__key {
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.08);
}

.anim-btn--active .anim-btn__key {
	color: #fff;
	background: rgba(255, 255, 255, 0.35);
}

.anim-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.anim-btn--active {
	background: var(--accent-soft);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	box-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
}

.anim-btn--active:hover {
	background: rgba(255, 255, 255, 0.28);
}

.anim-btn--loading {
	opacity: 0.35;
	cursor: wait;
}

.anim-btn__icon {
	font-size: 1.3rem;
	line-height: 1;
}

.anim-btn__label {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 72px;
}

@media screen and (max-width: 700px) {
	.anim-panel {
		bottom: var(--space-sm);
		padding: var(--space-3xs) var(--space-xs);
		max-width: 95vw;
	}

	.anim-btn {
		min-width: 52px;
		padding: var(--space-3xs) var(--space-xs);
	}

	.anim-btn__icon {
		font-size: 1.1rem;
	}

	.anim-btn__label {
		font-size: 8px;
	}
}

/******************************************************************************
 * Editor — Scene Explorer side panel, Texture Inspector, Texture Lightbox
 * All dark-themed to match the existing viewer chrome.
 */

.scene-explorer {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	width: 320px;
	max-height: calc(100% - var(--space-lg));
	background: rgba(20, 20, 28, 0.96);
	color: #e0e0e0;
	border: 1px solid #2b2b2b;
	border-radius: var(--radius-md);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	font-size: var(--text-sm);
	z-index: 40;
	overflow: hidden;
}
.scene-explorer.hidden {
	display: none;
}

.scene-explorer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid #2b2b2b;
	background: #101010;
}
.scene-explorer__title {
	font-weight: 600;
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #b4a4ff;
}
.scene-explorer__close {
	background: none;
	border: none;
	color: #aaa;
	font-size: 18px;
	line-height: 1;
	padding: 2px 8px;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.scene-explorer__close:hover {
	background: #2b2b2b;
	color: #fff;
}

.scene-explorer__search {
	margin: var(--space-xs) var(--space-sm);
	background: #0c0c0c;
	border: 1px solid #2b2b2b;
	color: #ddd;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	outline: none;
}
.scene-explorer__search:focus {
	border-color: #5e4fff;
}

.scene-explorer__hint {
	padding: 2px var(--space-sm) var(--space-xs);
	color: #666;
	font-size: 10px;
	font-family: monospace;
}

.scene-explorer__tree {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-2xs) var(--space-2xs);
	max-height: 40vh;
	border-bottom: 1px solid #2b2b2b;
}
.scene-explorer__inspector {
	overflow-y: auto;
	padding: var(--space-sm);
	max-height: 40vh;
	background: #0d0d0d;
}
.scene-explorer__empty {
	color: #666;
	font-size: var(--text-xs);
	padding: var(--space-sm);
	text-align: center;
}

.scene-node {
}
.scene-node__row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 4px;
	cursor: pointer;
	border-radius: var(--radius-sm);
	line-height: 1.4;
	user-select: none;
}
.scene-node__row:hover {
	background: #1b1b1b;
}
.scene-node__row.selected {
	background: #2a1f5a;
	color: #fff;
}
.scene-node__expander {
	display: inline-block;
	width: 12px;
	color: var(--ink-dim);
	text-align: center;
	font-size: 10px;
	flex-shrink: 0;
}
.scene-node__icon {
	flex-shrink: 0;
	font-size: 12px;
}
.scene-node__label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
}
.scene-node__visibility {
	background: none;
	border: none;
	color: var(--ink-dim);
	font-size: 10px;
	cursor: pointer;
	padding: 0 4px;
	flex-shrink: 0;
}
.scene-node__visibility:hover {
	color: #fff;
}

.scene-node__children {
	display: none;
}
.scene-node__children.open {
	display: block;
}
.scene-node.filtered-out {
	display: none;
}

.inspector__title {
	font-size: var(--text-base);
	font-weight: 600;
	color: #fff;
	margin-bottom: 2px;
}
.inspector__sub {
	color: #666;
	font-size: 10px;
	font-family: monospace;
	margin-bottom: var(--space-xs);
}
.inspector__section {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-2xs);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-dim);
	border-bottom: 1px solid #232323;
	padding-bottom: 2px;
}
.inspector__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: 2px 0;
	font-size: 11px;
}
.inspector__label {
	color: var(--ink-dim);
	flex-shrink: 0;
	min-width: 40px;
}
.inspector__value {
	color: #ccc;
	font-family: monospace;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vec3-row .vec3 {
	display: flex;
	gap: 2px;
}
.vec3-row input {
	width: 52px;
	background: #0c0c0c;
	border: 1px solid #2b2b2b;
	color: #ccc;
	padding: 2px 4px;
	border-radius: var(--radius-sm);
	font-size: 10px;
	font-family: monospace;
	outline: none;
}
.vec3-row input:focus {
	border-color: #5e4fff;
}

.inspector__actions {
	display: flex;
	gap: var(--space-2xs);
	margin-top: var(--space-2xs);
	flex-wrap: wrap;
}
.inspector__actions button {
	background: #232323;
	border: 1px solid #353535;
	color: #ccc;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: 10px;
	cursor: pointer;
}
.inspector__actions button:hover {
	background: #2f2f2f;
	color: #fff;
}

/* Texture Inspector modal */
.texture-inspector {
	position: fixed;
	top: 80px;
	right: 20px;
	width: min(560px, calc(100vw - 40px));
	max-height: calc(100vh - 100px);
	background: rgba(20, 20, 28, 0.98);
	border: 1px solid #2b2b2b;
	border-radius: var(--radius-md);
	box-shadow: 0 15px 60px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	z-index: 9998;
	color: #e0e0e0;
	overflow: hidden;
}
.texture-inspector__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	border-bottom: 1px solid #2b2b2b;
	background: #101010;
}
.texture-inspector__title {
	font-weight: 600;
	font-size: var(--text-sm);
	color: #b4a4ff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.texture-inspector__close {
	background: none;
	border: none;
	color: #aaa;
	font-size: 18px;
	cursor: pointer;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}
.texture-inspector__close:hover {
	background: #2b2b2b;
	color: #fff;
}

.texture-inspector__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-sm);
	padding: var(--space-sm);
	overflow-y: auto;
}

.texture-card {
	background: #0d0d0d;
	border: 1px solid #232323;
	border-radius: var(--radius-sm);
	padding: var(--space-xs);
	cursor: pointer;
	transition:
		border-color var(--duration-fast),
		transform var(--duration-fast);
}
.texture-card:hover {
	border-color: #5e4fff;
	transform: translateY(-1px);
}
.texture-card__thumb {
	width: 100%;
	aspect-ratio: 1;
	background: #000
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="8" fill="%23333"/><rect x="8" y="8" width="8" height="8" fill="%23333"/></svg>')
		repeat;
	image-rendering: pixelated;
	border-radius: var(--radius-sm);
	display: block;
}
.texture-card__info {
	margin-top: var(--space-2xs);
}
.texture-card__name {
	font-size: 11px;
	font-weight: 500;
	color: #ddd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.texture-card__meta {
	font-size: 10px;
	color: var(--ink-dim);
	font-family: monospace;
}
.texture-card__mats {
	font-size: 10px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 2px;
}

/* Texture Lightbox (full preview with channel toggles) */
.texture-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(5, 5, 10, 0.92);
	z-index: 9999;
	display: flex;
	flex-direction: column;
}
.texture-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-md);
	background: #0c0c0c;
	border-bottom: 1px solid #2b2b2b;
	gap: var(--space-md);
	flex-wrap: wrap;
}
.texture-lightbox__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.texture-lightbox__title {
	font-weight: 600;
	font-size: var(--text-sm);
	color: #fff;
}
.texture-lightbox__dim {
	font-family: monospace;
	font-size: 10px;
	color: var(--ink-dim);
}
.texture-lightbox__channels {
	display: flex;
	gap: 2px;
}
.texture-lightbox__channels button {
	background: #232323;
	border: 1px solid #353535;
	color: #aaa;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	font-family: monospace;
	cursor: pointer;
	min-width: 32px;
}
.texture-lightbox__channels button:hover {
	background: #2f2f2f;
	color: #fff;
}
.texture-lightbox__channels button.active {
	background: #5e4fff;
	border-color: #7262ff;
	color: #fff;
}
.texture-lightbox__close {
	background: none;
	border: none;
	color: #aaa;
	font-size: 22px;
	cursor: pointer;
	padding: 2px 10px;
	border-radius: var(--radius-sm);
}
.texture-lightbox__close:hover {
	background: #2b2b2b;
	color: #fff;
}
.texture-lightbox__stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: var(--space-md);
	background:
		linear-gradient(45deg, #1b1b1b 25%, transparent 25%),
		linear-gradient(-45deg, #1b1b1b 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #1b1b1b 75%),
		linear-gradient(-45deg, transparent 75%, #1b1b1b 75%);
	background-size: 20px 20px;
	background-position:
		0 0,
		0 10px,
		10px -10px,
		10px 0;
	cursor: grab;
}
.texture-lightbox__viewport {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.texture-lightbox__canvas {
	max-width: min(90vw, 1200px);
	max-height: calc(100vh - 160px);
	object-fit: contain;
	image-rendering: pixelated;
	border: 1px solid #2b2b2b;
	background: #000;
	transform-origin: center center;
	transition: none;
}
.texture-lightbox__uv {
	position: absolute;
	inset: 0;
	max-width: min(90vw, 1200px);
	max-height: calc(100vh - 160px);
	object-fit: contain;
	pointer-events: none;
	transform-origin: center center;
}
.texture-lightbox__footer {
	padding: var(--space-xs) var(--space-md);
	background: #0c0c0c;
	border-top: 1px solid #2b2b2b;
	color: var(--ink-dim);
	font-size: 11px;
	font-family: monospace;
}

@media (max-width: 700px) {
	.scene-explorer {
		width: calc(100vw - var(--space-md));
		max-height: calc(100vh - var(--space-xl));
		top: var(--space-xs);
		left: var(--space-xs);
		right: var(--space-xs);
	}
	.texture-inspector {
		top: var(--space-xs);
		right: var(--space-xs);
		left: var(--space-xs);
		width: auto;
		max-height: calc(100vh - var(--space-lg));
	}
	.texture-lightbox__bar {
		padding: var(--space-xs);
		gap: var(--space-xs);
	}
}

/* ============================================================================
   AUTH GATE — hides power tools from anonymous visitors on the main viewer
   ============================================================================ */

.auth-gate {
	display: none;
}

body[data-viewer-mode='main'][data-authed='pending'] #agent-presence-sidebar,
body[data-viewer-mode='main'][data-authed='pending'] .dg.main {
	visibility: hidden !important;
}

body[data-viewer-mode='main'][data-authed='false'] #agent-presence-sidebar,
body[data-viewer-mode='main'][data-authed='false'] .dg.main {
	display: none !important;
}

body[data-viewer-mode='main'][data-authed='false'] .auth-gate {
	display: block;
	animation: auth-gate-in 0.4s ease;
}

@keyframes auth-gate-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.auth-gate {
	position: fixed;
	top: calc(var(--header-h) + var(--space-md));
	left: var(--space-md);
	width: 300px;
	z-index: 50;
}

/* ── First-time onboarding banner ─────────────────────────────────────────── */

.agent-onboarding {
	/* Fallback positioning for when the shared corner-stack isn't present; when
	   it is, #tws-corner-stack > .tws-corner-item takes over and flows this card
	   above the getting-started pill instead of overlapping it. */
	position: fixed;
	right: var(--space-md);
	bottom: var(--space-md);
	width: min(360px, calc(100vw - var(--space-md) * 2));
	z-index: var(--z-corner-stack, 60);
	animation: agent-onboarding-rise 0.32s ease-out;
}

.agent-onboarding[hidden] {
	display: none;
}

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

.agent-onboarding__inner {
	position: relative;
	background: linear-gradient(180deg, rgba(20, 20, 30, 0.96), rgba(10, 10, 18, 0.96));
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg);
	padding: var(--space-md) var(--space-md) var(--space-md);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.55),
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 -40px 80px -40px rgba(255, 255, 255, 0.35) inset;
	color: rgba(255, 255, 255, 0.92);
	overflow: hidden;
}

.agent-onboarding__inner::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.27), transparent);
	pointer-events: none;
}

.agent-onboarding__close {
	position: absolute;
	top: 0.4rem;
	right: 0.55rem;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.45);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	transition:
		color var(--duration-fast),
		background var(--duration-fast);
}

.agent-onboarding__close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.agent-onboarding__close:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.35);
	outline-offset: 2px;
}

.agent-onboarding__title {
	font-family: var(--font-display);
	margin: 0 0 var(--space-xs);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: #fff;
	padding-right: var(--space-lg);
}

.agent-onboarding__desc {
	margin: 0 0 var(--space-md);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.55;
}

.agent-onboarding__actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.agent-onboarding__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5em 0.95em;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	font-family: inherit;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.82);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.agent-onboarding__btn:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
}

.agent-onboarding__btn:active {
	transform: translateY(1px);
}

.agent-onboarding__btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.35);
	outline-offset: 2px;
}

.agent-onboarding__btn--primary {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95));
	border-color: rgba(255, 255, 255, 0.7);
	color: #000000;
	box-shadow:
		0 4px 14px rgba(255, 255, 255, 0.32),
		0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.agent-onboarding__btn--primary:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
	border-color: rgba(255, 255, 255, 0.9);
	color: #000000;
}

@media (max-width: 700px) {
	.agent-onboarding {
		left: var(--space-md);
		right: var(--space-md);
		bottom: calc(var(--space-md) + 90px);
		width: auto;
	}
}

.auth-gate__inner {
	position: relative;
	background: linear-gradient(180deg, rgba(20, 20, 30, 0.92) 0%, rgba(10, 10, 18, 0.94) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: var(--space-md) var(--space-md) var(--space-sm);
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.55),
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 -20px 40px -20px rgba(255, 255, 255, 0.25) inset;
	overflow: hidden;
}

.auth-gate__inner::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	pointer-events: none;
}

.auth-gate__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.55);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--space-sm);
	padding: 0.18rem 0.5rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.auth-gate__lock {
	width: 0.85em;
	height: 0.85em;
	opacity: 0.9;
}

.auth-gate__title {
	font-family: var(--font-display);
	font-size: 1.32rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--space-2xs);
	letter-spacing: -0.018em;
	line-height: 1.18;
}

.auth-gate__desc {
	font-size: var(--text-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 var(--space-md);
}

.auth-gate__actions {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.auth-gate__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem var(--space-sm);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.82);
	background: rgba(255, 255, 255, 0.04);
	transition:
		background var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.auth-gate__btn:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.auth-gate__btn:active {
	transform: translateY(1px);
}

.auth-gate__btn--primary {
	background: linear-gradient(180deg, #fff, #e8e8ef);
	color: var(--on-bright);
	border-color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

.auth-gate__btn--primary:hover {
	background: #fff;
	color: var(--on-bright);
	border-color: #fff;
}

.auth-gate__perks {
	list-style: none;
	padding: var(--space-sm) 0 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.auth-gate__perks li {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.55);
	padding: 0.18rem 0;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	line-height: 1.5;
}

.auth-gate__perks li::before {
	content: '';
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.30);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.20);
}

@media screen and (max-width: 700px) {
	.auth-gate {
		top: auto;
		bottom: var(--space-md);
		left: var(--space-sm);
		right: var(--space-sm);
		width: auto;
	}
}

/******************************************************************************
 * Publish Modal (post-publish share UI — editor "📤 publish as embed")
 */

.publish-overlay {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	animation: publish-fadein 0.2s ease;
}

@keyframes publish-fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.publish-modal {
	width: 92vw;
	max-width: 560px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: rgba(10, 10, 10, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
	color: #e0e0e0;
}

.publish-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) var(--space-lg);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}

.publish-title {
	font-size: var(--text-lg);
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.03em;
}

.publish-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--text-2xl);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color var(--duration-base) var(--ease-standard);
}

.publish-close:hover {
	color: #fff;
}

.publish-body {
	padding: var(--space-lg);
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

/* ── Progress steps ──────────────────────────────────────────────────────── */

.publish-steps {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.publish-step {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.5);
	transition:
		color var(--duration-base) var(--ease-standard),
		background var(--duration-base) var(--ease-standard);
}

.publish-step--active {
	color: #fff;
	background: var(--accent-soft);
}

.publish-step--done {
	color: rgba(255, 255, 255, 0.85);
}

.publish-step-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: inherit;
	box-sizing: border-box;
}

.publish-step--done .publish-step-dot {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--btn-primary-fg, #0a0a0a);
}

.publish-step--active .publish-step-dot {
	border-color: var(--accent);
	border-top-color: transparent;
	animation: publish-spin 0.9s linear infinite;
}

@keyframes publish-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.note {
	font-size: var(--text-sm);
	color: #999;
	margin: 0 var(--space-md) var(--space-md);
}
.note a {
	color: var(--ink-dim);
}


/* ── Result state (snippets) ─────────────────────────────────────────────── */

.publish-result {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.publish-snippet {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.publish-snippet-label {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.02em;
}

.publish-snippet-row {
	display: flex;
	gap: var(--space-xs);
	align-items: stretch;
	min-width: 0;
}

.publish-snippet-value {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: var(--space-xs) var(--space-sm);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	color: #e0e0e0;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	overflow-x: auto;
	white-space: pre;
	line-height: var(--leading-tight);
}

.publish-snippet-value:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.publish-snippet-actions {
	display: flex;
	gap: var(--space-2xs);
	flex-shrink: 0;
}

.publish-copy-btn,
.publish-open-btn {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #e0e0e0;
	padding: 0 var(--space-sm);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.publish-copy-btn:hover,
.publish-open-btn:hover {
	background: var(--accent-soft);
	color: #fff;
}

.publish-copy-btn:disabled {
	color: var(--accent);
	background: var(--accent-soft);
	cursor: default;
}

/* ── Action rows (Done / Sign in / Retry / Cancel) ──────────────────────── */

.publish-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.publish-done-btn,
.publish-signin-btn,
.publish-retry-btn,
.publish-cancel-btn {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #e0e0e0;
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		filter var(--duration-fast) var(--ease-standard);
}

.publish-done-btn,
.publish-signin-btn,
.publish-retry-btn {
	background: var(--accent);
	color: var(--btn-primary-fg, #0a0a0a);
	border-color: var(--accent);
}

.publish-done-btn:hover,
.publish-signin-btn:hover,
.publish-retry-btn:hover {
	filter: brightness(1.12);
}

.publish-cancel-btn:hover {
	background: var(--accent-soft);
	color: #fff;
}

/* ── Auth-required + error states ────────────────────────────────────────── */

.publish-auth-msg {
	margin: 0 0 var(--space-md);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.publish-error-name {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--danger);
	margin-bottom: var(--space-xs);
}

.publish-error-message {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.7);
	line-height: var(--leading-normal);
	margin-bottom: var(--space-md);
	word-break: break-word;
}

@media screen and (max-width: 700px) {
	.publish-modal {
		width: 100vw;
		max-width: none;
		max-height: 100vh;
		border-radius: 0;
	}
	.publish-snippet-row {
		flex-direction: column;
	}
	.publish-snippet-actions {
		justify-content: flex-end;
	}
}

/******************************************************************************
 * ERC-8004 Agent Studio — parity additions (hero, mainnet banner,
 * filter chips, batch tab, QR modal, export accordion, footer).
 */

.erc8004-shell {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.erc8004-hero {
	margin-bottom: var(--space-md);
}

.erc8004-hero-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.erc8004-hero-body {
	text-align: center;
	padding: var(--space-lg) 0;
}

.erc8004-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	border: 1px solid var(--stroke-strong);
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	font-weight: 500;
	margin-bottom: var(--space-md);
}

.erc8004-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 8px #22c55e;
}

.erc8004-hero-h1 {
	margin: 0 0 var(--space-sm);
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.1;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.02em;
}

.erc8004-hero-accent {
	background: #ffffff;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.erc8004-hero-sub {
	max-width: 620px;
	margin: 0 auto var(--space-md);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-base);
	line-height: 1.6;
}

.erc8004-hero .erc8004-stats {
	max-width: 540px;
	margin: 0 auto;
}

.erc8004-mainnet-banner {
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
	background: rgba(251, 191, 36, 0.08);
	border: 1px solid rgba(251, 191, 36, 0.32);
	border-radius: var(--radius-control);
	color: rgba(253, 230, 138, 0.92);
	font-size: var(--text-sm);
	text-align: center;
}

.erc8004-mainnet-banner strong {
	color: var(--warn);
	font-weight: 600;
}

/* Filter chips */
.erc8004-filter-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: var(--space-sm) 0;
}

.erc8004-chip {
	padding: 6px 14px;
	border-radius: var(--radius-lg);
	font-size: 12px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	font-family: inherit;
	transition: all var(--duration-base);
}

.erc8004-chip:hover {
	border-color: var(--stroke-strong);
}

.erc8004-chip--active {
	background: var(--accent-soft);
	border-color: var(--stroke-strong);
	color: #fff;
}

.erc8004-tag--x402 {
	background: var(--surface-2);
	color: rgba(255, 255, 255, 0.8);
	border-color: var(--stroke-strong);
}

.erc8004-tag--owner {
	background: var(--accent-soft);
	color: var(--accent);
	border-color: var(--accent);
}

/* Batch tab */
.erc8004-batch-drop {
	height: 140px;
	margin: var(--space-md) 0;
}

.erc8004-batch-drop-inner {
	pointer-events: none;
	text-align: center;
}

.erc8004-batch-drop-icon {
	font-size: 32px;
	margin-bottom: 8px;
}

.erc8004-batch-drop-title {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 4px;
}

.erc8004-batch-drop-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.erc8004-batch-preview {
	margin-top: var(--space-md);
}

.erc8004-batch-list {
	max-height: 380px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.erc8004-batch-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
}

.erc8004-batch-row-num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--surface-3);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.erc8004-batch-row-title {
	font-weight: 500;
	color: #fff;
}

.erc8004-batch-row-status {
	font-size: 12px;
}

.erc8004-batch-progress {
	margin-top: var(--space-md);
}

.erc8004-progress-bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	overflow: hidden;
	margin-bottom: 6px;
}

.erc8004-progress-fill {
	height: 100%;
	background: #ffffff;
	transition: width var(--duration-base);
	width: 0;
}

.erc8004-pre {
	font-family: monospace;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	color: rgba(255, 255, 255, 0.7);
	white-space: pre-wrap;
	overflow-x: auto;
}

/* Step 3 — avatar source picker */
.erc8004-avatar-sources {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xs);
	margin: var(--space-sm) 0 var(--space-md);
}

@media (max-width: 640px) {
	.erc8004-avatar-sources {
		grid-template-columns: 1fr;
	}
}

.erc8004-avatar-source {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		border-color var(--duration-fast),
		background var(--duration-fast);
}

.erc8004-avatar-source:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

.erc8004-avatar-source--active {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.erc8004-avatar-source--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.erc8004-avatar-source input[type='radio'] {
	margin-top: 3px;
	accent-color: var(--accent);
}

.erc8004-avatar-source-title {
	font-size: var(--text-sm);
	font-weight: 500;
	color: #fff;
}

.erc8004-avatar-source-hint {
	margin-top: 2px;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.45);
}

.erc8004-avatar-source-hint code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	color: rgba(255, 255, 255, 0.6);
	word-break: break-all;
}

.erc8004-avatar-panel {
	margin-bottom: var(--space-md);
}

.erc8004-avatar-summary {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: #fff;
}

.erc8004-avatar-summary code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	word-break: break-all;
}

.erc8004-avatar-summary-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--btn-primary-fg, #0a0a0a);
	font-size: var(--text-xs);
	font-weight: 700;
	flex-shrink: 0;
}

.erc8004-avatar-summary-badge--muted {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
}

.erc8004-saved-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: var(--space-xs);
	padding: var(--space-sm);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
	min-height: 120px;
}

.erc8004-saved-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: left;
	color: inherit;
	font-family: inherit;
	transition:
		border-color var(--duration-fast),
		background var(--duration-fast);
}

.erc8004-saved-card:hover {
	border-color: rgba(255, 255, 255, 0.25);
}

.erc8004-saved-card--active {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.erc8004-saved-card img,
.erc8004-saved-card-ph {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.4);
	font-weight: 600;
	letter-spacing: 0.08em;
}

.erc8004-saved-card-name {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 2px 2px;
}

/* Accordion */
.erc8004-accordion {
	margin-top: var(--space-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.erc8004-accordion-head {
	cursor: pointer;
	list-style: none;
	padding: 12px 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.erc8004-accordion-head:hover {
	color: var(--ink-bright);
	background: var(--surface-1);
}
.erc8004-accordion-head:hover::after {
	color: var(--ink);
}

.erc8004-accordion-head::after {
	content: '▼';
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	transition: transform var(--duration-base);
}

.erc8004-accordion[open] .erc8004-accordion-head::after {
	transform: rotate(180deg);
}

.erc8004-accordion-head::-webkit-details-marker {
	display: none;
}

.erc8004-accordion-body {
	padding: 0 14px 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Export options grid */
.erc8004-export-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.erc8004-export-opt {
	padding: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: all var(--duration-base);
}

.erc8004-export-opt:hover {
	background: var(--surface-2);
	border-color: var(--stroke-strong);
}

.erc8004-export-emoji {
	font-size: 22px;
	margin-bottom: 6px;
}

.erc8004-export-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.erc8004-export-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
}

/* QR modal */
.erc8004-modal {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}

.erc8004-modal-card {
	background: #0d0d0d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	max-width: 420px;
	width: 100%;
	text-align: center;
}

.erc8004-modal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-sm);
}

.erc8004-checkbox {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	user-select: none;
}
.erc8004-checkbox:hover {
	color: var(--ink-bright);
}

.erc8004-checkbox input[type='checkbox'] {
	width: 16px;
	height: 16px;
	accent-color: #b15bff;
	cursor: pointer;
}
.erc8004-checkbox input[type='checkbox']:hover {
	transform: scale(1.12);
}

.erc8004-qr-canvas-wrap {
	display: flex;
	justify-content: center;
	background: #fff;
	border-radius: var(--radius-sm);
	padding: 12px;
	margin: var(--space-sm) 0;
}

.erc8004-qr-canvas-wrap canvas {
	max-width: 100%;
	height: auto;
	image-rendering: pixelated;
}

.erc8004-qr-url {
	word-break: break-all;
	margin: 0 0 var(--space-sm);
}

/* Embed snippet modal */
.erc8004-embed-tabs {
	display: flex;
	gap: 2px;
	margin: var(--space-md) 0 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0;
	flex-wrap: wrap;
}
.erc8004-embed-tabs .erc8004-tab {
	padding: 8px 14px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-sm);
	cursor: pointer;
	transition:
		color var(--duration-fast),
		border-color var(--duration-fast);
}
.erc8004-embed-tabs .erc8004-tab:hover {
	color: rgba(255, 255, 255, 0.9);
}
.erc8004-embed-tabs .erc8004-tab.is-active {
	color: #fff;
	border-bottom-color: var(--accent, #ffffff);
}
.erc8004-embed-panels {
	padding: var(--space-md) 0;
}
.erc8004-embed-panels > [data-panel] {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.erc8004-embed-panels > [data-panel][hidden] {
	display: none;
}
.erc8004-code {
	width: 100%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.4);
	color: #e5e7eb;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	resize: vertical;
	user-select: all;
	white-space: pre;
	overflow-x: auto;
}
textarea.erc8004-code {
	min-height: 48px;
}
.erc8004-embed-policy {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.erc8004-embed-policy summary {
	cursor: pointer;
	color: rgba(255, 255, 255, 0.65);
	font-size: var(--text-sm);
	margin-bottom: var(--space-sm);
}
.erc8004-embed-policy summary:hover {
	color: #fff;
}

/* Footer */
.erc8004-footer {
	margin-top: var(--space-lg);
	padding: var(--space-lg) 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
	font-size: var(--text-sm);
}

.erc8004-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.erc8004-footer-links a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.erc8004-footer-links a:hover {
	color: #fff;
}

.erc8004-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-lg);
	max-width: 800px;
	margin: 0 auto var(--space-md);
	padding: var(--space-md) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.erc8004-footer-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.erc8004-footer-title {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

.erc8004-footer-col a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	font-size: 13px;
}

.erc8004-footer-col a:hover {
	color: #fff;
}

.erc8004-footer-credit {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.35);
}

.erc8004-footer-credit a {
	color: rgba(255, 255, 255, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
 * /discover — ERC-8004 agent marketplace
 * chat-plugin-grid × etherscan-NFT-detail hybrid. Uses site tokens.
 * ───────────────────────────────────────────────────────────────────────── */

.explore-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}

.explore-hero {
	text-align: center;
	padding: var(--space-2xl) 0 var(--space-xl);
}
.explore-hero h1,
.explore-hero h2 {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 6vw, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: var(--space-md) 0 var(--space-sm);
	color: #fff;
}
.explore-sub {
	max-width: 560px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.6);
	font-size: 15px;
	line-height: 1.55;
}
.explore-hero-chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.explore-hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.explore-hero-chip--link {
	text-decoration: none;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.78);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}
.explore-hero-chip--link:hover,
.explore-hero-chip--link:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}
.explore-hero-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3b82f6;
	box-shadow: 0 0 10px #3b82f6;
}


.explore-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: stretch;
	margin: var(--space-xl) 0 var(--space-lg);
	padding: var(--space-md);
	background: var(--surface-1);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-md);
}
/* The shared list-controls toolbar fills the panel; its rows wrap naturally. */
.explore-controls .tws-lc {
	width: 100%;
}
/* Page-specific chain selector, relocated into the toolbar's primary row at
   runtime so it sits inline with search + sort. Mirror the toolkit's select. */
.explore-chain-select {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--ink-dim);
	font-size: var(--text-md);
	flex-shrink: 0;
}
.explore-chain-select label {
	color: var(--ink-dim);
}
.explore-chain-select-control {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.explore-chain-select select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 30px 8px 11px;
	background-color: var(--surface-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-md);
	color: var(--ink);
	font: var(--weight-medium) var(--text-md) / 1 var(--font-body);
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}
.explore-chain-select select:hover {
	background-color: var(--surface-3);
	border-color: var(--stroke-strong);
}
.explore-chain-select select:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
.explore-chain-select select option {
	background-color: var(--bg-1);
	color: var(--ink);
}
.explore-sentinel {
	height: 1px;
	width: 100%;
}

.explore-card-views {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	font-variant-numeric: tabular-nums;
}

.explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-md);
}

.explore-card {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition:
		border-color var(--duration-fast),
		transform var(--duration-fast),
		background var(--duration-fast);
	display: flex;
	flex-direction: column;
	/* /discover renders the whole directory in one grid, a few thousand pixels
	   of cards, of which one screenful is visible. Without this the browser
	   styles, lays out and paints every offscreen card on first render (3.1s of
	   Style & Layout plus 1.3s of Rendering in a Lighthouse desktop trace).
	   `auto` skips that work until a card nears the viewport and reverses it
	   when the card leaves again. The card is already `overflow: hidden`, so the
	   paint containment this implies changes nothing visually. The size hint is
	   a 1:1 thumb plus the body rows at the grid's 260px minimum track; `auto`
	   makes the browser replace it with the real measurement after the first
	   render, so a card that renders taller never leaves a gap behind. */
	content-visibility: auto;
	contain-intrinsic-size: auto 260px auto 420px;
}
.explore-card:hover {
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.04);
}
.explore-card--3d:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.explore-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--stage-lift) 0%, var(--stage-glow) 100%);
	overflow: hidden;
	text-decoration: none;
}
.explore-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.explore-card-ph {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 48px;
	opacity: 0.4;
}
.explore-card-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 34px;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
	opacity: 0;
	background: rgba(0, 0, 0, 0.35);
	transition: opacity var(--duration-base);
}
.explore-card--3d:hover .explore-card-play {
	opacity: 1;
}

.explore-card-body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.explore-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.explore-card-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.explore-card-name-link {
	color: inherit;
	text-decoration: none;
}
.explore-card-name-link:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.explore-card-id {
	font-size: 11px;
	/* See the note on the earlier .explore-card-id rule: 0.55 is the contrast
	   floor for this size over the card surface, not a styling preference. */
	color: rgba(255, 255, 255, 0.55);
	font-family:
		ui-monospace,
		SF Mono,
		Menlo,
		monospace;
	flex-shrink: 0;
}
.explore-card-badges {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.explore-badge {
	font-size: 10px;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.explore-badge--3d {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
}
.explore-badge--x402 {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.12);
}
.explore-badge--avatar {
	background: rgba(255, 255, 255, 0.15);
	color: var(--ink);
	border-color: rgba(255, 255, 255, 0.4);
}
.explore-badge--solana {
	background: rgba(153, 69, 255, 0.1);
	color: #b88aff;
	border-color: rgba(153, 69, 255, 0.3);
}
.explore-card-desc {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.explore-card-svcs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.explore-svc {
	font-size: 10px;
	padding: 2px 6px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.55);
	border-radius: var(--radius-sm);
	font-family:
		ui-monospace,
		SF Mono,
		Menlo,
		monospace;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.explore-card-foot {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	gap: 8px;
}
.explore-card-owner {
	font-size: 11px;
	font-family:
		ui-monospace,
		SF Mono,
		Menlo,
		monospace;
	/* 0.62, not 0.4: 0.4 measured ~3.5:1 on the card bg (axe AA needs 4.5:1). */
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}
.explore-card-owner:hover {
	color: #fff;
}
.explore-card-actions {
	display: flex;
	gap: 10px;
}
.explore-card-link {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-weight: 500;
}
.explore-card-link:hover {
	color: #fff;
}

.explore-status {
	text-align: center;
	padding: var(--space-lg) 0;
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
}
.explore-empty {
	padding: var(--space-xl);
	border: 1px dashed rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.explore-empty a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-standard);
}
.explore-empty a:hover,
.explore-empty a:focus-visible {
	color: #fff;
}
.explore-clear-filters {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.78);
	padding: 7px 16px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}
.explore-clear-filters:hover,
.explore-clear-filters:focus-visible {
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}
.explore-error {
	padding: var(--space-md);
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: var(--radius-sm);
	color: #fca5a5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.explore-retry {
	background: transparent;
	border: 1px solid rgba(252, 165, 165, 0.4);
	color: #fca5a5;
	padding: 7px 18px;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		background var(--duration-fast) var(--ease-standard);
}
.explore-retry:hover,
.explore-retry:focus-visible {
	border-color: rgba(252, 165, 165, 0.7);
	color: #fff;
	background: rgba(239, 68, 68, 0.15);
}

.explore-load-more-wrap {
	display: flex;
	justify-content: center;
	padding: var(--space-lg) 0;
}
.explore-load-more {
	padding: 10px 24px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.85);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all var(--duration-fast);
}
.explore-load-more:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────
   /discover (body.explore-page) — mobile. Additive overrides only; desktop
   above is untouched. Phones get a single comfortable column, full-width
   tappable controls (>=44px), wrapping chip rows, and 16px inputs (no iOS
   zoom). The legacy max-width:640px block near line 2514 targets a different
   (older) explore layout and does not reach this page's selectors.
   ─────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
	/* The header nav is a plain flex row of about ten links, which measures
	   roughly a thousand pixels. On a 320px phone that had two different bad
	   endings: pages that clip their header hid most of the links, so they were
	   unreachable, and pages that do not (/showcase) let the nav push the whole
	   document into a horizontal scroll. Scrolling the nav itself keeps every
	   link reachable and the page width honest. min-width:0 is what lets a flex
	   item shrink below its content so the overflow can apply at all. */
	.features-nav {
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.features-nav::-webkit-scrollbar {
		display: none;
	}

	.features-nav a {
		white-space: nowrap;
	}

	/* Double padding (body.explore-page + .explore-main) ate too much width
	   on phones, pushing the 260px grid track past the viewport. Tighten the
	   inner gutter so content fits without horizontal scroll. */
	.explore-main {
		padding: var(--space-md) var(--space-sm) var(--space-2xl);
	}
	.explore-hero {
		padding: var(--space-xl) 0 var(--space-lg);
	}
	.explore-sub {
		font-size: 14px;
	}

	/* Stack the toolbar; every control spans the row and is easy to tap. The
	   shared list-controls toolkit (.tws-lc-*) handles its own row wrapping; we
	   tighten the panel padding and make the page-specific chain select full
	   width + comfortably tappable on phones. */
	.explore-controls {
		padding: var(--space-sm);
	}
	/* >=16px font stops iOS Safari from zooming the page on input/select focus. */
	.explore-controls .tws-lc-search input,
	.explore-chain-select select {
		font-size: 16px;
	}
	.explore-controls .tws-lc-search input {
		min-height: 44px;
	}
	.explore-controls .tws-lc-chip {
		min-height: 38px;
		display: inline-flex;
		align-items: center;
	}
	.explore-chain-select {
		display: flex;
		width: 100%;
		min-width: 0;
		align-items: center;
		gap: 10px;
	}
	.explore-chain-select label {
		flex: 0 0 auto;
		min-width: 44px;
	}
	.explore-chain-select-control {
		flex: 1 1 auto;
		min-width: 0;
	}
	.explore-chain-select select {
		flex: 1 1 auto;
		width: 100%;
		/* Without min-width:0 a <select> keeps the intrinsic width of its widest
		   option (long chain names), forcing the row past the viewport. */
		min-width: 0;
		min-height: 44px;
	}

	/* One comfortable column on phones; the desktop 260px track would
	   overflow a ~216px content box at 320px. */
	.explore-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.explore-load-more {
		min-height: 44px;
	}
}

@media screen and (min-width: 480px) and (max-width: 768px) {
	/* Two cards fit comfortably from ~480px up; below that, stay single-column. */
	.explore-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-sm);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   Embed modal — shared by /discover + Search tab
   ─────────────────────────────────────────────────────────────────────── */
.embed-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 16px;
	animation: embed-modal-in 0.18s ease-out;
}
@keyframes embed-modal-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.embed-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}
.embed-modal__panel {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100vh - 32px);
	background: #111111;
	color: #e5e5e5;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.embed-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 20px 12px;
}
.embed-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.3px;
}
.embed-modal__sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: rgba(229, 229, 229, 0.55);
}
.embed-modal__close {
	background: transparent;
	border: 0;
	color: rgba(229, 229, 229, 0.6);
	font-size: 28px;
	line-height: 1;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all var(--duration-fast);
}
.embed-modal__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.embed-modal__tabs {
	display: flex;
	gap: 2px;
	padding: 0 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow-x: auto;
	scrollbar-width: none;
}
.embed-modal__tabs::-webkit-scrollbar {
	display: none;
}
.embed-tab {
	background: transparent;
	border: 0;
	color: rgba(229, 229, 229, 0.55);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: all var(--duration-fast);
}
.embed-tab:hover {
	color: #e5e5e5;
}
.embed-tab.is-active {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.7);
}
.embed-modal__body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}
.embed-pane {
	display: none;
}
.embed-pane.is-active {
	display: block;
}
.embed-pane__hint {
	margin: 0 0 10px;
	font-size: 13px;
	color: rgba(229, 229, 229, 0.6);
	line-height: 1.5;
}
.embed-snippet {
	display: block;
	width: 100%;
	background: #070707;
	color: #d4d4d4;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.55;
	resize: vertical;
	box-sizing: border-box;
	outline: none;
}
.embed-snippet:focus {
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.embed-snippet--input {
	resize: none;
}
.embed-copy-btn {
	margin-top: 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition:
		transform var(--duration-instant),
		box-shadow var(--duration-fast),
		background var(--duration-fast);
}
.embed-copy-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 4px 14px rgba(255, 255, 255, 0.08);
}
.embed-copy-btn:active {
	transform: translateY(1px);
}
.embed-modal__foot {
	padding: 12px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	gap: 16px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.embed-foot-link {
	font-size: 12px;
	color: rgba(229, 229, 229, 0.55);
	text-decoration: none;
}
.embed-foot-link:hover {
	color: #fff;
}
.explore-card-link--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(229, 229, 229, 0.75);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
}
.explore-card-link--ghost:hover {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}
@media (max-width: 560px) {
	.embed-modal__panel {
		max-height: calc(100vh - 16px);
	}
	.embed-modal__head,
	.embed-modal__body,
	.embed-modal__foot {
		padding-left: 14px;
		padding-right: 14px;
	}
	.embed-modal__tabs {
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* ── Pump.fun card on agent home ───────────────────────────────────────── */
.agent-home-pumpfun {
	margin: 14px 0 4px;
}
.pumpfun-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 12px;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, rgba(120, 80, 220, 0.18), rgba(0, 200, 180, 0.14));
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--agent-home-fg, #fff);
	box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.4);
}
.pumpfun-card--graduated {
	background: linear-gradient(135deg, rgba(0, 200, 130, 0.22), rgba(0, 120, 200, 0.18));
}
.pumpfun-card--cta {
	background: linear-gradient(135deg, rgba(150, 100, 255, 0.18), rgba(255, 120, 180, 0.14));
}
.pumpfun-card--skeleton {
	height: 96px;
	background: rgba(255, 255, 255, 0.04);
	animation: pumpfun-skeleton 1.4s infinite;
}
@keyframes pumpfun-skeleton {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 0.8; }
}
.pumpfun-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pumpfun-card-icon {
	font-size: 18px;
	line-height: 1;
}
.pumpfun-card-title {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	flex: 1;
}
.pumpfun-card-link {
	color: inherit;
	opacity: 0.6;
	text-decoration: none;
	font-size: 13px;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	transition: opacity var(--duration-fast), background var(--duration-fast);
}
.pumpfun-card-link:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.pumpfun-card-sub {
	font-size: 12.5px;
	opacity: 0.78;
	margin: 0;
	line-height: 1.4;
}
/* Live market readout — host for the shared coin-status `chip` widget. The
   widget renders symbol · price · market cap · graduation % from a single
   /api/pump/coin fetch, replacing the card's former bespoke stat tiles. */
.pumpfun-coin-status-mount {
	display: flex;
}
.pumpfun-coin-status-mount .csc-chip {
	flex-wrap: wrap;
	gap: 8px 10px;
	font-size: 13px;
}
.pumpfun-card-mint {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	opacity: 0.55;
}
.pumpfun-card-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.pumpfun-btn {
	flex: 1;
	min-width: 64px;
	padding: 7px 10px;
	font-size: 12.5px;
	font-weight: 500;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	cursor: pointer;
	transition: background var(--duration-fast), transform var(--duration-instant);
}
.pumpfun-btn:hover { background: rgba(255, 255, 255, 0.12); }
.pumpfun-btn:active { transform: translateY(1px); }
.pumpfun-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pumpfun-btn--primary {
	background: linear-gradient(135deg, #b27dff, #6ce0c8);
	border: none;
	color: #0c0c0c;
	font-weight: 600;
}
.pumpfun-btn--primary:hover { filter: brightness(1.06); background: linear-gradient(135deg, #b27dff, #6ce0c8); }
.pumpfun-btn--ghost {
	background: transparent;
}
.pumpfun-card-foot {
	display: inline-block;
	font-size: 11.5px;
	opacity: 0.55;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.2);
}
.pumpfun-card-foot:hover { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
	.pumpfun-card--skeleton { animation: none; }
}

/* ── Inline trade panel ─────────────────────────────────────────────────── */
.pumpfun-card-mint {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	opacity: 0.55;
	cursor: pointer;
	text-align: left;
	transition: opacity var(--duration-fast);
}
.pumpfun-card-mint:hover { opacity: 0.85; text-decoration: underline; }
.pumpfun-btn--active {
	background: rgba(178, 125, 255, 0.22);
	border-color: rgba(178, 125, 255, 0.5);
}
.pumpfun-trade {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	margin-top: 4px;
	border-radius: var(--radius-md);
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.05);
	animation: pumpfun-trade-in 180ms ease-out;
}
@keyframes pumpfun-trade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.pumpfun-trade-label {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 8px;
	align-items: center;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}
.pumpfun-signer {
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: var(--radius-sm);
	background: rgba(0,0,0,0.25);
	border: 1px solid rgba(255,255,255,0.05);
}
.pumpfun-signer-tab {
	flex: 1;
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	font-size: 11px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	opacity: 0.6;
	transition: background var(--duration-fast), opacity var(--duration-fast);
}
.pumpfun-signer-tab:hover { opacity: 0.9; }
.pumpfun-signer-tab.is-active {
	opacity: 1;
	background: linear-gradient(135deg, rgba(178,125,255,0.25), rgba(108,224,200,0.18));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.pumpfun-trade-input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius-sm);
	padding: 7px 10px;
	color: inherit;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	width: 100%;
	min-width: 0;
	outline: none;
	text-transform: none;
	letter-spacing: 0;
}
.pumpfun-trade-input:focus {
	border-color: rgba(178, 125, 255, 0.55);
	box-shadow: 0 0 0 3px rgba(178, 125, 255, 0.15);
}
.pumpfun-trade-unit {
	font-size: 11.5px;
	opacity: 0.65;
	text-transform: none;
	letter-spacing: 0;
}
.pumpfun-quote {
	min-height: 18px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.pumpfun-quote-status { opacity: 0.5; }
.pumpfun-quote-out    { color: #6ce0c8; }
.pumpfun-quote-err    { color: #ff9aa2; }
.pumpfun-trade-actions {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}
.pumpfun-trade-actions .pumpfun-btn { flex: 0 0 auto; min-width: 84px; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.pumpfun-toasts {
	position: absolute;
	right: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 30;
	pointer-events: none;
}
.agent-home-pumpfun { position: relative; }
.pumpfun-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background: rgba(20, 18, 30, 0.95);
	border: 1px solid rgba(255,255,255,0.08);
	color: #fff;
	font-size: 12.5px;
	box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6);
	transform: translateY(8px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
	max-width: 320px;
}
.pumpfun-toast.is-in { opacity: 1; transform: translateY(0); }
.pumpfun-toast--success { border-color: rgba(108, 224, 200, 0.35); }
.pumpfun-toast--error   { border-color: rgba(255, 154, 162, 0.45); color: #ffd7da; }
.pumpfun-toast-link {
	color: inherit;
	opacity: 0.75;
	text-decoration: none;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}
.pumpfun-toast-link:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
	.pumpfun-card-actions { flex-wrap: wrap; }
	.pumpfun-card-actions .pumpfun-btn { flex: 1 0 calc(50% - 3px); }
	.pumpfun-card-actions .pumpfun-btn--ghost { flex: 1 0 100%; }
	.pumpfun-trade-label { grid-template-columns: 1fr; }
	.pumpfun-toasts {
		left: 14px;
		right: 14px;
		align-items: stretch;
	}
	.pumpfun-toast { max-width: none; }
}

/* ── Vanity launch row ─────────────────────────────────────────────────── */
.pumpfun-vanity-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	margin: 8px 0;
	flex-wrap: wrap;
}
.pumpfun-vanity-row input[type="text"],
.pumpfun-vanity-row input[type="number"] { width: 80px; }
.pumpfun-vanity-input {
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255,255,255,0.15);
	background: rgba(0,0,0,0.25);
	color: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pumpfun-vanity-progress {
	font-size: 11px;
	opacity: 0.7;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	margin-bottom: 6px;
}

/* ── Stamp progress & success ───────────────────────────────────────────── */
.pumpfun-stamp-live {
	min-height: 1.2em;
	font-size: 11.5px;
	color: rgba(255,255,255,0.55);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.pumpfun-stamp-live .pf-spin {
	width: 10px; height: 10px;
	border: 1.5px solid rgba(255,255,255,0.14);
	border-top-color: rgba(255,255,255,0.55);
	border-radius: 50%;
	animation: pf-spin 0.75s linear infinite;
	flex-shrink: 0;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }
.pumpfun-stamp-live strong { color: rgba(255,255,255,0.9); font-weight: 600; }

/* Emphasized mint display: 3ws mark bold, rest muted */
.pumpfun-mint-marked {
	display: inline-flex;
	align-items: baseline;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.78rem;
}
.pumpfun-mint-marked .pf-mark {
	font-weight: 700;
	color: rgba(255,255,255,0.92);
	letter-spacing: 0.02em;
}
.pumpfun-mint-marked .pf-rest {
	color: rgba(255,255,255,0.42);
	font-weight: 400;
}

/* Verified AXIS pill */
.pumpfun-verified-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.55);
}

/* Launch success card (brief stamp-success moment) */
.pumpfun-stamp-success {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: var(--radius-md);
}
.pumpfun-stamp-success-head {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,0.9);
	letter-spacing: -0.01em;
}
.pumpfun-stamp-success-sub {
	font-size: 11.5px;
	color: rgba(255,255,255,0.42);
	line-height: 1.5;
}
.pumpfun-stamp-success-mint {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--radius-sm);
}
.pumpfun-stamp-success-mint .pf-mint-addr {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pumpfun-stamp-success-links {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* ── Auto-Trader (bot) panel ───────────────────────────────────────────── */
.pumpfun-bot { gap: 8px; }
.pumpfun-bot-modes {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.pumpfun-bot-modes .pumpfun-btn { flex: 1 1 calc(50% - 3px); min-width: 0; font-size: 11.5px; }
.pumpfun-bot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 6px;
}
.pumpfun-bot-grid .pumpfun-trade-label { margin: 0; }

/******************************************************************************
 * Next layout — the alternate /app chrome (toggled via body[data-layout='next'])
 *
 * Goals borrowed from the 2025-26 best-in-class survey:
 *   - Edge-to-edge stage; a single bottom command dock holds playback
 *     (Sketchfab-style chip + scrubbable timeline)
 *   - One floating corner cluster for Controls / Share / Fullscreen
 *     (model-viewer minimalism + Babylon-Sandbox floating gear → drawer)
 *   - The dat.GUI panel physically moves into a right-side drawer so
 *     every camera/lighting/material knob still works untouched
 *   - Auto-rotate kicks in after a few seconds of idle (Luma's signature)
 *   - First-load hand swipe affordance, dismissed on first input
 */

/* Hide chrome by mode. Default (no attribute or 'classic') hides Next chrome. */
body:not([data-layout='next']) .next-chrome {
	display: none !important;
}
body[data-layout='next'] .next-chrome {
	display: block;
}

/* In Next mode, strip Classic-only chrome from the viewer surface */
body[data-layout='next'] .dropzone,
body[data-layout='next'] .agent-presence-sidebar,
body[data-layout='next'] .auth-gate,
body[data-layout='next'] .agent-onboarding,
body[data-layout='next'] .gui-toggle,
body[data-layout='next'] .ar-btn,
body[data-layout='next'] .anim-panel,
body[data-layout='next'] .footer-bot,
body[data-layout='next'] footer {
	display: none !important;
}

/* In Next mode, collapse the busy primary nav and page-action buttons —
 * page actions now live in the Share popover; primary nav items stay
 * reachable via the user menu / Dashboard link. The layout switch and
 * user/sign-in always remain so the toggle and account are never lost. */
body[data-layout='next'] header .features-nav > a:not([href='/app']):not(.nav-dashboard):not(.nav-sign-in),
body[data-layout='next'] header .save-to-account-btn,
body[data-layout='next'] header .make-widget-btn,
body[data-layout='next'] header .deploy-onchain-btn,
body[data-layout='next'] header .view-public-profile-btn {
	display: none !important;
}

body[data-layout='next'] header .nav-viewer-link,
body[data-layout='next'] header a[href='/app'] {
	font-weight: 600;
}

/* When the GUI panel has been moved into the drawer, it must drop its
 * absolute positioning so it lays out inside the drawer body normally. */
body[data-layout='next'] .next-drawer__body > .gui-wrap {
	position: static;
	pointer-events: auto;
	opacity: 1;
	transform: none;
	visibility: visible;
	width: 100%;
}
body[data-layout='next'] .next-drawer__body > .gui-wrap > .main {
	max-height: none;
	width: 100% !important;
	background: transparent !important;
}
body[data-layout='next'] .next-drawer__body .dg.main .close-button.close-bottom {
	display: none;
}
/* Auth-gating of .dg.main is a Classic-only behavior — in Next the drawer
 * is the primary control surface, so the GUI is always available. None of
 * camera/lighting/material changes write to the account, so this is safe. */
body[data-layout='next'] .next-drawer__body .dg.main {
	display: block !important;
	visibility: visible !important;
}

/* ── Interaction prompt ─────────────────────────────────────────────────── */
.next-prompt {
	position: fixed;
	left: 50%;
	bottom: 140px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(15, 15, 22, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	pointer-events: none;
	z-index: 32;
	animation: nextPromptIn 600ms ease both, nextPromptPulse 2.4s ease-in-out 800ms infinite;
}
.next-prompt svg { opacity: 0.85; }
.next-prompt--out {
	animation: nextPromptOut 400ms ease forwards;
}
@keyframes nextPromptIn {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes nextPromptOut {
	from { opacity: 1; transform: translate(-50%, 0); }
	to   { opacity: 0; transform: translate(-50%, -6px); }
}
@keyframes nextPromptPulse {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -3px); }
}

/* ── Corner cluster ─────────────────────────────────────────────────────── */
.next-corner {
	position: fixed;
	top: 80px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 34;
}
@media (max-width: 700px) {
	.next-corner {
		top: max(72px, calc(env(safe-area-inset-top, 0px) + 64px));
		right: max(12px, env(safe-area-inset-right, 12px));
	}
}
.next-icon-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 15, 22, 0.78);
	color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
	position: relative;
}
@media (hover: none) and (pointer: coarse) {
	.next-icon-btn {
		width: 44px;
		height: 44px;
		border-radius: var(--radius-md);
	}
}
.next-icon-btn:hover {
	background: rgba(28, 28, 38, 0.88);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.18);
}
.next-icon-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}
.next-icon-btn--active {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.next-icon-btn--has-actions::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ink-dim);
	box-shadow: 0 0 0 2px rgba(15, 15, 22, 0.78);
}

/* ── Share popover ──────────────────────────────────────────────────────── */
.next-share-menu {
	position: fixed;
	top: 80px;
	right: 60px;
	width: 260px;
	background: rgba(15, 15, 22, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	padding: 6px;
	z-index: 36;
	animation: nextMenuIn 160ms ease;
}
.next-share-menu__title {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	padding: 8px 10px 4px;
}
.next-share-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.next-share-menu__item:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.next-share-menu__item svg { flex-shrink: 0; color: rgba(255, 255, 255, 0.55); }
.next-share-menu__item:hover svg { color: #fff; }
.next-share-menu__item[hidden] { display: none; }
.next-share-menu__item--success {
	color: #86efac;
}
.next-share-menu__item--success svg { color: #86efac; }
.next-share-menu__sep {
	height: 1px;
	background: rgba(255, 255, 255, 0.06);
	margin: 6px 4px;
}
@keyframes nextMenuIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Right-side Controls drawer ─────────────────────────────────────────── */
.next-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: 90vw;
	background: rgba(12, 12, 18, 0.96);
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45);
	transform: translateX(100%);
	transition: transform var(--duration-base) var(--ease-standard);
	z-index: 38;
	display: flex;
	flex-direction: column;
}
.next-drawer--open { transform: translateX(0); }
.next-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.next-drawer__title {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.9);
}
.next-drawer__close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
	margin: -8px -8px -8px auto;
}
.next-drawer__close:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.next-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
	padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

/* ── Bottom dock ────────────────────────────────────────────────────────── */
/* Compact playback pill — auto-width, recedes into the stage.
 * Holds play + loop. Scrubber sits as a hairline underline below it,
 * thumb + time only appear on hover/focus. The clip name is pulled
 * out to the bottom-left as a museum-style caption (see below). */
.next-dock {
	position: fixed;
	left: 50%;
	bottom: max(28px, env(safe-area-inset-bottom, 28px));
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 5px 8px;
	background: rgba(15, 15, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-pill);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
	z-index: 34;
	width: auto;
	min-width: 200px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.next-dock:hover,
.next-dock:focus-within {
	background: rgba(15, 15, 22, 0.82);
	border-color: rgba(255, 255, 255, 0.12);
}

/* Clip caption — pulled out of the dock to bottom-left of the viewport.
 * Reads as a "now playing" placard, fills negative space without competing
 * with the avatar. Click still opens the animation grid (aria-controls). */
.next-dock__clip {
	position: fixed;
	left: max(20px, env(safe-area-inset-left, 20px));
	bottom: max(30px, env(safe-area-inset-bottom, 30px));
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.55);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--duration-fast) var(--ease-standard);
	z-index: 34;
}
.next-dock__clip::before {
	content: '◆';
	color: rgba(255, 255, 255, 0.35);
	font-size: 8px;
	margin-right: 2px;
}
.next-dock__clip:hover { color: rgba(255, 255, 255, 0.95); }
.next-dock__clip--open { color: #fff; }
.next-dock__clip-name {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}
.next-dock__caret {
	flex-shrink: 0;
	opacity: 0.55;
	transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.next-dock__clip:hover .next-dock__caret { opacity: 1; }
.next-dock__clip--open .next-dock__caret { transform: rotate(180deg); opacity: 1; }

/* Play — smaller, neutral white (no purple shouting). */
.next-dock__play {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	color: var(--on-bright);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
	flex-shrink: 0;
}
.next-dock__play svg { width: 14px; height: 14px; }
@media (hover: none) and (pointer: coarse) {
	.next-dock__play { width: 40px; height: 40px; }
	.next-dock__play svg { width: 16px; height: 16px; }
}
.next-dock__play:hover { transform: scale(1.05); background: #fff; }
.next-dock__play:active { transform: scale(0.97); }
.next-dock__icon { display: none; }
.next-dock__icon--play { display: block; }
.next-dock__play--playing .next-dock__icon--play { display: none; }
.next-dock__play--playing .next-dock__icon--pause { display: block; }

/* Scrubber — hairline underline beneath the pill. 2px dim default,
 * thickens + reveals thumb on hover/focus. */
.next-dock__scrub {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -10px;
	height: 12px;
	display: flex;
	align-items: center;
	min-width: 120px;
	opacity: 0.5;
	transition: opacity var(--duration-base) var(--ease-standard);
}
.next-dock:hover .next-dock__scrub,
.next-dock:focus-within .next-dock__scrub { opacity: 1; }
.next-dock__scrub-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.85);
	width: 0%;
	pointer-events: none;
	transition: height var(--duration-base) var(--ease-standard);
}
.next-dock__scrub::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 2px;
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.16);
	pointer-events: none;
	transition: height var(--duration-base) var(--ease-standard);
}
.next-dock:hover .next-dock__scrub::before,
.next-dock:focus-within .next-dock__scrub::before,
.next-dock:hover .next-dock__scrub-fill,
.next-dock:focus-within .next-dock__scrub-fill { height: 3px; }
.next-dock__scrub-input {
	position: relative;
	width: 100%;
	height: 12px;
	appearance: none;
	background: transparent;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}
.next-dock__scrub-input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.next-dock__scrub-input::-moz-range-track { height: 2px; background: transparent; }
.next-dock__scrub-input::-webkit-slider-thumb {
	appearance: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	margin-top: -4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	cursor: grab;
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
}
.next-dock:hover .next-dock__scrub-input::-webkit-slider-thumb,
.next-dock:focus-within .next-dock__scrub-input::-webkit-slider-thumb { opacity: 1; }
.next-dock__scrub-input:active::-webkit-slider-thumb { cursor: grabbing; }
.next-dock__scrub-input::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity var(--duration-fast) var(--ease-standard);
}
.next-dock:hover .next-dock__scrub-input::-moz-range-thumb,
.next-dock:focus-within .next-dock__scrub-input::-moz-range-thumb { opacity: 1; }
.next-dock__scrub-input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

/* Time — hidden until hover. */
.next-dock__time {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	flex-shrink: 0;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard), padding var(--duration-base) var(--ease-standard);
	padding: 0;
}
.next-dock:hover .next-dock__time,
.next-dock:focus-within .next-dock__time {
	max-width: 84px;
	opacity: 1;
	padding: 0 4px;
}

/* Loop — muted neutral, no purple. */
.next-dock__loop {
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
	flex-shrink: 0;
}
.next-dock__loop:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.06); }
.next-dock__loop--off { color: rgba(255, 255, 255, 0.2); }

/* Stage atmosphere — two screen-blended glows give the empty canvas
 * a "studio" feel without darkening or tinting the avatar. */
body[data-layout='next'] .next-chrome::before,
body[data-layout='next'] .next-chrome::after {
	content: '';
	position: fixed;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: screen;
}
body[data-layout='next'] .next-chrome::before {
	/* overhead key-light wash */
	left: 50%;
	top: -180px;
	transform: translateX(-50%);
	width: 900px;
	height: 700px;
	max-width: 110vw;
	background: radial-gradient(ellipse at center, rgba(140, 130, 200, 0.07), transparent 65%);
}
body[data-layout='next'] .next-chrome::after {
	/* floor pool that grounds the avatar */
	left: 50%;
	bottom: -120px;
	transform: translateX(-50%);
	width: 1000px;
	height: 360px;
	max-width: 110vw;
	background: radial-gradient(ellipse at center 60%, rgba(200, 200, 230, 0.09), transparent 70%);
}

/* ── Animation grid (expands above the dock) ────────────────────────────── */
.next-grid {
	position: fixed;
	left: 50%;
	bottom: 86px;
	transform: translateX(-50%);
	width: min(720px, calc(100vw - 32px));
	max-height: 320px;
	overflow-y: auto;
	background: rgba(15, 15, 22, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 6px;
	z-index: 35;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	animation: nextMenuIn 160ms ease;
}
.next-grid__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: var(--radius-sm);
	color: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: var(--text-xs);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.next-grid__item:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
}
.next-grid__item--active {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}
.next-grid__icon {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	width: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.next-grid__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.next-corner { top: 70px; right: 10px; }
	.next-share-menu { top: 70px; right: 54px; width: calc(100vw - 64px); max-width: 320px; }
	.next-drawer { width: 100vw; max-width: 100vw; }
	.next-dock {
		bottom: max(18px, env(safe-area-inset-bottom, 18px));
		padding: 5px 6px;
		gap: 4px;
	}
	.next-dock__clip {
		left: max(14px, env(safe-area-inset-left, 14px));
		bottom: max(20px, env(safe-area-inset-bottom, 20px));
		max-width: 160px;
		font-size: 10px;
	}
	.next-dock__clip-name { max-width: 130px; }
	.next-grid {
		bottom: 70px;
		width: calc(100vw - 16px);
		max-height: 260px;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.next-prompt { bottom: 86px; }
}

/* Print + reduced motion — disable the prompt pulse and dock animation. */
@media (prefers-reduced-motion: reduce) {
	.next-prompt, .next-drawer { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * CANONICAL BUTTON SYSTEM  (B03)
 *
 * Moved to its own portable partial — public/buttons.css — and @imported at the
 * top of this file. Single source of truth; surfaces that don't load style.css
 * can <link> buttons.css directly. Do not redefine .btn here.
 * ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
 * CANONICAL PILL / BADGE SYSTEM  (B04)
 *
 * Single .pill base + semantic modifier classes. Consumes ONLY B01 --badge-*
 * tokens. Generalizes tws-ocb (onchain-badge.js) which sits on top of these
 * same CSS variables — getOnchainStatus / window.twsOnchainBadge intact.
 *
 * Modifiers:  --onchain  --devnet  --success  --warn  --danger  --new
 * Sizes:      default (sm)  --md
 * Slots:      .pill__dot  (animated status dot)
 * ══════════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--badge-radius);
	border: 1px solid var(--badge-border);
	background: var(--badge-bg);
	color: var(--badge-fg);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
	text-decoration: none;
	line-height: 1.4;
	cursor: default;
}

/* ── Linked pill (anchor) ─────────────────────────────────────────────────── */
a.pill {
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
a.pill:hover {
	background: var(--surface-3);
	border-color: var(--stroke-strong);
	transform: translateY(-1px);
}
a.pill:active {
	transform: translateY(0);
}
a.pill:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ── Size — medium ────────────────────────────────────────────────────────── */
.pill--md {
	padding: 4px 11px;
	font-size: var(--text-sm);
	gap: 7px;
}

/* ── Semantic variants ────────────────────────────────────────────────────── */
.pill--onchain {
	background: var(--badge-onchain-bg);
	border-color: var(--badge-onchain-border);
	color: var(--badge-onchain-fg);
}
a.pill--onchain:hover {
	background: rgba(16, 185, 129, 0.2);
	border-color: rgba(16, 185, 129, 0.55);
}

.pill--devnet {
	background: var(--badge-devnet-bg);
	border-color: var(--badge-devnet-border);
	color: var(--badge-devnet-fg);
}
a.pill--devnet:hover {
	background: rgba(251, 191, 36, 0.2);
	border-color: rgba(251, 191, 36, 0.55);
}

.pill--success {
	background: var(--badge-success-bg);
	border-color: var(--badge-success-border);
	color: var(--badge-success-fg);
}

.pill--warn {
	background: var(--badge-warn-bg);
	border-color: var(--badge-warn-border);
	color: var(--badge-warn-fg);
}

.pill--danger {
	background: var(--badge-danger-bg);
	border-color: var(--badge-danger-border);
	color: var(--badge-danger-fg);
}

.pill--new {
	background: var(--badge-new-bg);
	border-color: var(--badge-new-border);
	color: var(--badge-new-fg);
}

/* ── Status dot (animated pulse) ─────────────────────────────────────────── */
.pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
	animation: pill-pulse 2.4s ease-out infinite;
}
.pill--md .pill__dot { width: 7px; height: 7px; }
.pill--devnet .pill__dot { animation-name: pill-pulse-amber; }

@keyframes pill-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
	70%  { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@keyframes pill-pulse-amber {
	0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
	70%  { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0); }
	100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

/* =============================================================================
 * Canonical modal primitive — B06
 *
 * Built on native <dialog>/showModal(). Consumes --modal-* tokens defined in
 * the B01 :root block above. Use from src/shared/modal.js:
 *
 *   import { Modal } from '../shared/modal.js';
 *   const m = new Modal({ title, body, actions });
 *   m.open(triggerEl);
 *
 * The .tws-modal-inner card carries the visible surface; the <dialog> itself
 * is transparent and acts as the top-layer focus-trap host + ::backdrop scrim.
 * ============================================================================= */

/* Reset UA <dialog> styles */
.tws-modal {
	border: none;
	padding: 0;
	background: transparent;
	color: inherit;
	/* Centered in viewport by default via margin:auto on position:fixed */
	max-width: min(var(--modal-width), calc(100vw - 2rem));
	max-height: calc(100svh - 2rem);
	overflow: visible;
	/* Entry + exit transitions */
	opacity: 1;
	transform: scale(1) translateY(0);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

/* Backdrop scrim */
.tws-modal::backdrop {
	background: var(--modal-backdrop);
	opacity: 1;
	transition: opacity var(--duration-base) var(--ease-standard);
}

/* Entry animation (Chrome 117+, Firefox 129+, Safari 17.5+) */
@starting-style {
	.tws-modal[open] {
		opacity: 0;
		transform: scale(0.96) translateY(10px);
	}
	.tws-modal[open]::backdrop {
		opacity: 0;
	}
}

/* Exit animation — applied by JS before dialog.close() */
.tws-modal--closing {
	opacity: 0 !important;
	transform: scale(0.96) translateY(10px) !important;
}
.tws-modal--closing::backdrop {
	opacity: 0 !important;
}

/* Visible card surface */
.tws-modal-inner {
	background: var(--modal-bg);
	border: 1px solid var(--modal-border);
	border-radius: var(--modal-radius);
	box-shadow: var(--modal-shadow);
	width: min(var(--modal-width), calc(100vw - 2rem));
	max-height: calc(100svh - 4rem);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Header row: title + close button */
.tws-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--modal-border);
	flex-shrink: 0;
}

.tws-modal-title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--ink);
	line-height: var(--leading-tight);
}

.tws-modal-close {
	background: none;
	border: none;
	color: var(--ink-dim);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	transition: color var(--duration-fast), background var(--duration-fast);
	flex-shrink: 0;
}

.tws-modal-close:hover {
	color: var(--ink);
	background: var(--surface-2);
}

.tws-modal-close:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* Body — scrollable content area */
.tws-modal-body {
	padding: var(--space-lg);
	overflow-y: auto;
	flex: 1;
	color: var(--ink-dim);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

/* Actions row — right-aligned buttons */
.tws-modal-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--modal-border);
	flex-shrink: 0;
}

.tws-modal-actions[hidden] { display: none; }

/* Responsive: narrow viewports stack action buttons */
@media (max-width: 480px) {
	.tws-modal-inner {
		width: calc(100vw - 1rem);
		max-height: calc(100svh - 1.5rem);
	}
	.tws-modal-actions {
		flex-direction: column-reverse;
	}
}

/* Reduced-motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
	.tws-modal,
	.tws-modal::backdrop {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pill__dot { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
 * Glossary tooltip — inline term mark, floating popover, modal body (C03)
 * public/glossary.js mounts this system sitewide. B06 .tws-modal-* rules above
 * provide the full-glossary modal shell; only tooltip-specific CSS lives here.
 * ────────────────────────────────────────────────────────────────────────────*/

/* Trigger: .tws-tt is added by glossary.js to every [data-term] element and
 * auto-wrapped inline jargon spans. Dotted underline signals interactivity. */
.tws-tt {
	cursor: help;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: rgba(255, 255, 255, 0.36);
	text-underline-offset: 3px;
}

/* "?" badge after the term — signals tap/focus reveals a definition */
.tws-tt::after {
	content: '?';
	display: inline-block;
	width: 13px;
	height: 13px;
	line-height: 13px;
	font-size: 8px;
	font-style: normal;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.44);
	margin-left: 2px;
	vertical-align: super;
	transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.tws-tt:hover::after,
.tws-tt:focus-visible::after {
	background: rgba(255, 255, 255, 0.20);
	color: rgba(255, 255, 255, 0.85);
}

.tws-tt:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
	border-radius: var(--radius-sm);
}

/* Tooltip popover (position: fixed; JS drives top/left) */
#tws-tt-pop {
	position: fixed;
	z-index: 10000;
	/* Interactive: the popover carries a "Full glossary" deeper-link, and a
	 * hover bridge (glossary.js) keeps it open while the pointer travels in. */
	pointer-events: auto;
	background: rgba(18, 19, 26, 0.97);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.70), 0 2px 8px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	padding: 11px 14px 12px;
	max-width: 280px;
	min-width: 160px;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--ink);
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

#tws-tt-pop.is-on {
	opacity: 1;
	transform: translateY(0) scale(1);
}

#tws-tt-pop strong {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.38);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
}

#tws-tt-pop .tws-tt-def {
	display: block;
	font-size: var(--text-xs);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

/* Deeper-link inside the popover → the full /glossary entry */
#tws-tt-pop .tws-tt-more {
	display: block;
	margin-top: 9px;
	padding-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--accent);
	text-decoration: none;
	opacity: 0.75;
	transition: opacity var(--duration-fast) var(--ease-standard);
}

#tws-tt-pop .tws-tt-more:hover,
#tws-tt-pop .tws-tt-more:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* Full-glossary modal list */
.tws-glos-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tws-glos-item {
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--stroke);
}

.tws-glos-item:last-child {
	border-bottom: none;
}

.tws-glos-term {
	font-weight: 600;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.90);
	margin-bottom: 3px;
}

.tws-glos-def {
	font-size: var(--text-xs);
	color: var(--ink-dim);
	line-height: var(--leading-normal);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tws-tt::after { transition: none; }
	#tws-tt-pop    { transition: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
 * /glossary — full plain-language glossary page (C04)
 * Renders every term from window.twsGlossary (single source: public/glossary.js)
 * into a searchable, deep-linkable grid. src/glossary/page.js drives it.
 * ────────────────────────────────────────────────────────────────────────────*/

.glossary-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(var(--space-lg), 6vw, calc(var(--space-lg) * 2.6)) var(--space-lg)
		calc(var(--space-lg) * 3);
}

.glos-hero {
	max-width: 640px;
	margin-bottom: var(--space-lg);
}

.glos-eyebrow {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-dim);
}

.glos-hero h1 {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 3.2rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.glos-sub {
	margin: 0 0 var(--space-lg);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed, 1.6);
	color: var(--ink-dim);
}

/* Search field */
.glos-search {
	position: relative;
}

.glos-search input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-sm) var(--space-md);
	padding-left: calc(var(--space-md) * 2.2);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-control);
	transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.glos-search input::placeholder { color: var(--ink-dim); }

.glos-search input:hover { border-color: var(--stroke-strong); }

.glos-search input:focus-visible {
	outline: none;
	border-color: var(--accent);
	background: var(--surface-3);
}

.glos-search::before {
	content: '';
	position: absolute;
	left: var(--space-md);
	top: 50%;
	width: 15px;
	height: 15px;
	transform: translateY(-50%);
	background: var(--ink-dim);
	-webkit-mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
	mask: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
	pointer-events: none;
}

.glos-count {
	margin: var(--space-md) 0 0;
	font-size: var(--text-sm);
	color: var(--ink-dim);
}

/* Term grid */
.glos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.glos-card {
	scroll-margin-top: calc(var(--space-lg) * 4);
	padding: var(--space-md);
	background: var(--surface-1);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.glos-card:hover {
	border-color: var(--stroke-strong);
	background: var(--surface-2);
}

.glos-card:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.glos-card-term {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--ink);
}

.glos-card-def {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed, 1.6);
	color: var(--ink-dim);
}

/* Deep-link target flash (e.g. arriving at /glossary#x402) */
.glos-card.is-target {
	border-color: var(--accent);
	background: var(--surface-3);
	animation: glos-target-flash 1.6s ease;
}

@keyframes glos-target-flash {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
	100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
}

/* Empty state */
.glos-empty {
	margin: var(--space-lg) 0 0;
	padding: calc(var(--space-lg) * 1.5) var(--space-md);
	text-align: center;
	font-size: var(--text-base);
	color: var(--ink-dim);
	border: 1px dashed var(--stroke);
	border-radius: var(--radius-card);
}

.glos-empty strong { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.glos-card { transition: border-color var(--duration-fast) var(--ease-standard); }
	.glos-card.is-target { animation: none; }
}

/* =============================================================================
 * Card component — B05
 *
 * Canonical surface container: glass bg, 1px border, 14px radius.
 * Tokens come from B01 :root block above (--card-bg, --card-border, …).
 *
 * .card                base surface (non-interactive display)
 * .card--interactive   clickable/focusable; adds hover lift + focus ring
 * .card__header        flex row at the top with --space-sm gap
 * .card__body          flex child that grows to fill available height
 * .card__footer        border-top row with space-between alignment
 * ============================================================================= */

.card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	padding: var(--card-pad);
	box-shadow: var(--card-shadow);
}

.card--interactive {
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		transform    var(--duration-fast) var(--ease-standard),
		box-shadow   var(--duration-fast) var(--ease-standard);
}

.card--interactive:hover {
	border-color: var(--card-border-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-3);
}

.card--interactive:active {
	transform: translateY(0) scale(0.99);
}

.card--interactive:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.card__header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.card__body {
	flex: 1;
	min-width: 0;
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-md);
	border-top: 1px solid var(--card-border);
	font-size: var(--text-sm);
	color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
	.card--interactive {
		transition: border-color var(--duration-fast) var(--ease-standard);
	}
	.card--interactive:hover,
	.card--interactive:active {
		transform: none;
	}
}

/* =============================================================================
 * Surface / panel primitives + skeleton — B04
 *
 * Three container primitives sharing one token vocabulary so every surface
 * across the site reads as one product:
 *   .surface   flat tinted block, no shadow — sections, wells, inset rows
 *   .panel     resting container, subtle shadow — sidebars, grouped controls
 *   .card      glass card with card shadow (defined above) — list/grid items
 *
 * Elevation modifiers (.elev-0…3) override the shadow on any of the three.
 * .hover-lift adds the shared lift+shadow interaction to non-.card containers.
 * .skeleton is the canonical loading shimmer (replaces hardcoded greys).
 * ============================================================================= */

.surface {
	background: var(--surface-1);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	padding: var(--card-pad);
}

.panel {
	background: var(--surface-2);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-card);
	padding: var(--card-pad);
	box-shadow: var(--shadow-1);
}

/* Elevation tiers — apply to .surface / .panel / .card to override depth */
.elev-0 { box-shadow: none; }
.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-3); }

/* Padding density — shared across all three primitives */
.surface--tight, .panel--tight, .card--tight { padding: var(--space-md); }
.surface--flush, .panel--flush, .card--flush { padding: 0; }

/* Generic hover lift for interactive panels/surfaces (cards use --interactive) */
.hover-lift {
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		transform    var(--duration-fast) var(--ease-standard),
		box-shadow   var(--duration-fast) var(--ease-standard);
}
.hover-lift:hover {
	border-color: var(--stroke-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-3);
}
.hover-lift:active {
	transform: translateY(0) scale(0.99);
}
.hover-lift:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* Skeleton — canonical loading shimmer. Size with width/height or via children. */
.skeleton {
	background-color: var(--skeleton-base);
	background-image: linear-gradient(
		90deg,
		var(--skeleton-base)  0%,
		var(--skeleton-sheen) 50%,
		var(--skeleton-base)  100%
	);
	background-size: 200% 100%;
	border-radius: var(--skeleton-radius);
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
	color: transparent !important;
	pointer-events: none;
	user-select: none;
}
.skeleton--circle { border-radius: 50%; }
.skeleton--text   { height: 1em; border-radius: var(--radius-sm); }

@keyframes skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hover-lift {
		transition: border-color var(--duration-fast) var(--ease-standard);
	}
	.hover-lift:hover,
	.hover-lift:active {
		transform: none;
	}
	.skeleton {
		animation: none;
	}
}

/* ── Friendly crypto-error banner (C07) ────────────────────────────────────── */
.err-title {
	display: block;
	font-size: var(--text-sm, 0.85rem);
	font-weight: 600;
	color: var(--danger, var(--danger));
	margin-bottom: 0.25rem;
}

.err-body {
	margin: 0 0 0.6rem;
	font-size: var(--text-sm, 0.85rem);
	color: var(--ink-dim, rgba(255,255,255,.6));
	line-height: 1.45;
}

.err-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.err-action {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: var(--text-xs, 0.78rem);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: opacity var(--duration-fast), background var(--duration-fast);
	letter-spacing: 0.02em;
}

.err-action-btn {
	background: rgba(248,113,113,.12);
	border: 1px solid rgba(248,113,113,.28);
	color: var(--danger, var(--danger));
}

.err-action-btn:hover:not(:disabled),
.err-action-btn:focus-visible {
	background: rgba(248,113,113,.22);
	outline: none;
}

.err-action-btn:active {
	opacity: 0.75;
}

.err-action-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.err-action-link {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	color: var(--ink, rgba(255,255,255,.85));
}

.err-action-link:hover,
.err-action-link:focus-visible {
	background: rgba(255,255,255,.1);
	outline: none;
}

.err-action-link:active {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.err-action {
		transition: none;
	}
}

/* Payment-gate modal body content (used by src/components/payment-gate-modal.jsx) */
.pgm-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.pgm-price {
	margin: 0;
	color: var(--ink);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.pgm-chain {
	color: var(--ink-dim);
	font-size: var(--text-sm);
}

.pgm-status {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--ink-dim);
	min-height: 1.2em;
}

/* ── Payment receipt line ───────────────────────────────────────────────────
   Used by src/shared/payment-receipt.js wherever a confirmed payment is shown.
   The receipt-ok span is the primary readable label; receipt-detail is a
   secondary "power user" link (explorer ↗) that stays understated.
   ─────────────────────────────────────────────────────────────────────────── */
.receipt-ok {
	color: #34d399;
	font-weight: 600;
}

.receipt-detail {
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.85em;
	text-decoration: none;
	transition: color var(--duration-fast);
}
.receipt-detail:hover {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: underline;
}
.receipt-detail:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-sm);
}

.receipt-sig {
	color: rgba(255, 255, 255, 0.25);
	font-family: ui-monospace, monospace;
	font-size: 0.8em;
}

/* ── "Add funds" inline button — appears next to error states ───────────── */
.tx-add-funds-btn,
.pay-chip-add-funds,
.skill-pay-add-funds {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 10px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.06);
	color: var(--ink-dim);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
	vertical-align: middle;
}
.tx-add-funds-btn:hover,
.pay-chip-add-funds:hover,
.skill-pay-add-funds:hover {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.35);
	color: #c7d2fe;
}
.tx-add-funds-btn:active,
.pay-chip-add-funds:active,
.skill-pay-add-funds:active {
	background: rgba(255, 255, 255, 0.16);
}
.tx-add-funds-btn:focus-visible,
.pay-chip-add-funds:focus-visible,
.skill-pay-add-funds:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

/* ── "Add funds" alert button inside the fund-alert banner ──────────────── */
.fund-alert-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.07);
	color: var(--ink-dim);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--duration-fast), border-color var(--duration-fast);
}
.fund-alert-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.37);
}
.fund-alert-btn:focus-visible {
	outline: 2px solid #6366f1;
	outline-offset: 2px;
}

/* ── Feature discovery (F05) ─────────────────────────────────────────────────
   In-product discovery layer: "New" badges on links to new features, a
   dismissible "have you tried…" prompt, and contextual cross-link cards.
   Token-driven; the tooltip itself reuses C03's #tws-tt-pop popover. The
   passive/contextual card sits bottom-right so it never collides with the
   activity feed (bottom-left). */

/* "New" badge appended to in-page links to genuinely-new features. */
.tws-disc-new {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
	color: var(--ink, var(--ink));
	background: var(--surface-3, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--stroke-strong, rgba(255, 255, 255, 0.14));
	border-radius: var(--radius-pill, 999px);
}

/* Pages that load style.css inherit its global `* { box-sizing: border-box }`.
   The cv-page design system and the other pages that skip style.css set it on
   their own container only, so there the card's declared width is a CONTENT
   width: its 16px padding and 1px border push the border-box 34px wider, which
   hangs the card 22px off the left edge of a 320px viewport, and the
   full-width CTA overflows the card by 28px. Scoped to this layer's own
   subtree so it can never change a host page's boxes. */
.tws-disc-card,
.tws-disc-card *,
.tws-disc-new {
	box-sizing: border-box;
}

/* Discovery card — shared by the passive prompt and contextual cross-links. */
.tws-disc-card {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 10001; /* above the activity feed pill, below modals (10000+inner) */
	width: min(320px, calc(100vw - 36px));
	padding: 16px 16px 14px;
	background: var(--surface-glass, linear-gradient(180deg, rgba(20, 21, 28, 0.92), rgba(14, 15, 22, 0.9)));
	border: 1px solid var(--stroke-strong, rgba(255, 255, 255, 0.14));
	border-radius: var(--radius-card, 14px);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
	color: var(--ink, var(--ink));
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) cubic-bezier(0.22, 1, 0.36, 1);
}
.tws-disc-card.is-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.tws-disc-x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	color: var(--ink-dim, #888);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.tws-disc-x:hover { color: var(--ink, var(--ink)); background: var(--surface-2, rgba(255, 255, 255, 0.05)); }
.tws-disc-x:active { background: var(--surface-3, rgba(255, 255, 255, 0.08)); }
.tws-disc-x:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }

.tws-disc-kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-dim, #888);
	padding-right: 26px;
}
.tws-disc-title {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 650;
	color: var(--ink, var(--ink));
}
.tws-disc-desc {
	margin-top: 5px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-dim, #aaa);
}
.tws-disc-actions {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tws-disc-cta {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink, var(--ink));
	background: var(--surface-2, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--stroke-strong, rgba(255, 255, 255, 0.14));
	border-radius: var(--radius-control, 10px);
	transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}
.tws-disc-cta:hover { background: var(--surface-3, rgba(255, 255, 255, 0.08)); border-color: var(--stroke-strong, rgba(255, 255, 255, 0.2)); }
.tws-disc-cta:active { transform: translateY(1px); }
.tws-disc-cta:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }
.tws-disc-cta--primary {
	color: #0c0c0c;
	background: var(--accent, #fff);
	border-color: var(--accent, #fff);
}
.tws-disc-cta--primary:hover { background: #f0f0f0; border-color: #f0f0f0; }

@media (max-width: 520px) {
	.tws-disc-card { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.tws-disc-card { transition: opacity var(--duration-instant) linear; transform: none; }
	.tws-disc-card.is-in { transform: none; }
}

/* =============================================================================
 * Screenshot modal (src/components/screenshot-modal.js) — B11
 * Backdrop fades, panel rises; buttons come from the canonical .btn system.
 * ============================================================================= */
.screenshot-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
	background: rgba(0, 0, 0, 0.72);
	animation: screenshot-backdrop-in var(--duration-base) var(--ease-out) both;
}
@keyframes screenshot-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.screenshot-modal {
	width: min(560px, 100%);
	max-height: calc(100svh - 3rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-0);
	border: 1px solid var(--stroke-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	animation: screenshot-panel-in var(--duration-base) var(--ease-emphasized) both;
}
@keyframes screenshot-panel-in {
	from { opacity: 0; transform: translateY(10px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
.screenshot-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--stroke);
}
.screenshot-modal-header h3 {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--ink);
}
.screenshot-modal-close {
	background: none;
	border: none;
	color: var(--ink-dim);
	font-size: var(--text-lg);
	line-height: 1;
	cursor: pointer;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	transition: color var(--duration-instant) var(--ease-standard), background var(--duration-instant) var(--ease-standard);
}
.screenshot-modal-close:hover { color: var(--ink); background: var(--surface-2); }
.screenshot-modal-close:active { background: var(--surface-3); }
.screenshot-modal-close:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}
.screenshot-modal-body {
	padding: var(--space-lg);
	overflow-y: auto;
	display: flex;
	justify-content: center;
}
.screenshot-modal-body img {
	max-width: 100%;
	max-height: 52vh;
	border-radius: var(--radius-md);
	border: 1px solid var(--stroke);
	display: block;
}
.screenshot-modal-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--stroke);
}
@media (prefers-reduced-motion: reduce) {
	.screenshot-modal-backdrop,
	.screenshot-modal { animation: none; }
}

/* ── Avatar-edit: equip-from-gallery toast ──────────────────── */
.ae-equip-toast {
	position: fixed;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%) translateY(0.75rem);
	background: var(--tws-accent, #6366f1);
	color: #fff;
	padding: 0.6rem 1.2rem;
	border-radius: 6px;
	font-size: 0.88rem;
	font-weight: 500;
	box-shadow: 0 4px 20px rgba(155, 93, 255, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base), transform var(--duration-base);
	z-index: 9900;
	white-space: nowrap;
	max-width: calc(100vw - 2rem);
	text-align: center;
}
.ae-equip-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ── Deploy wizard modal overlay (agent pages / avatar page) ────────────────
   RegisterUI in modal mode mounts into this fixed overlay; the card inside
   carries role="dialog". Backdrop click and Escape both close it. */
.agent-register-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 48px 16px 64px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.72);
	animation: register-overlay-in 0.18s ease-out both;
}
@keyframes register-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.agent-register-overlay .erc8004-card {
	width: min(880px, 100%);
	outline: none;
}
@media (prefers-reduced-motion: reduce) {
	.agent-register-overlay { animation: none; }
}

/* Vanity address + grind progress on the Robinhood Chain review step */
.deploy-vanity-row { margin: 10px 0 0; }
.deploy-vanity-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.deploy-vanity-link:hover { color: #fff; }
.deploy-vanity-link code { font-weight: 600; }
.deploy-grind { align-items: center; gap: 10px; margin-top: 10px; }