:root {
	--ink: #1d1b2e;
	--ink-soft: #454258;
	--muted: #747184;
	--muted-light: #a6a2b1;
	--line: #e8e5ee;
	--line-strong: #dcd7e7;
	--paper: #ffffff;
	--canvas: #f7f6fa;
	--canvas-warm: #fbfaf7;
	--primary: #6757e8;
	--primary-deep: #5141cc;
	--primary-soft: #eeeafe;
	--coral: #ff7868;
	--coral-soft: #fff0ed;
	--mint: #35b987;
	--mint-soft: #e8f8f1;
	--amber: #f4a62a;
	--amber-soft: #fff7e6;
	--blue: #4388ee;
	--blue-soft: #eaf3ff;
	--danger: #dd4b61;
	--shadow-sm: 0 2px 8px rgba(30, 24, 58, 0.05);
	--shadow-md: 0 14px 36px rgba(30, 24, 58, 0.1);
	--shadow-lg: 0 24px 72px rgba(28, 21, 64, 0.18);
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--header-height: 76px;
	--content: 1380px;
	font-family: "Avenir Next", Avenir, "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--ink);
	background: var(--canvas);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
	background:
		radial-gradient(circle at 92% 2%, rgba(217, 210, 255, 0.24), transparent 26rem),
		var(--canvas);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
	font: inherit;
}

button,
[role="button"] {
	-webkit-tap-highlight-color: transparent;
}

button {
	color: inherit;
}

img,
svg {
	display: block;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid rgba(103, 87, 232, 0.35);
	outline-offset: 3px;
}

.skip-link {
	position: fixed;
	z-index: 500;
	top: 10px;
	left: 10px;
	transform: translateY(-150%);
	border-radius: 10px;
	background: var(--ink);
	color: white;
	padding: 10px 16px;
	text-decoration: none;
}

.skip-link:focus {
	transform: translateY(0);
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.trust-strip {
	height: 32px;
	background: #242039;
	color: rgba(255, 255, 255, 0.84);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.trust-strip__inner {
	width: min(calc(100% - 40px), var(--content));
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.trust-strip__inner > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.trust-strip__inner > span + span::before {
	content: "";
	width: 3px;
	height: 3px;
	margin-right: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
}

.trust-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6de2b6;
	box-shadow: 0 0 0 3px rgba(109, 226, 182, 0.13);
}

.trust-link {
	border: 0;
	background: none;
	color: white;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.trust-strip__inner .demo-status {
	min-height: 20px;
	border: 1px solid rgba(255, 213, 126, 0.28);
	border-radius: 999px;
	background: rgba(255, 193, 77, 0.12);
	color: #ffdc99;
	padding: 0 9px;
}

.site-header {
	position: sticky;
	z-index: 80;
	top: 0;
	height: var(--header-height);
	border-bottom: 1px solid rgba(224, 220, 233, 0.82);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
}

.site-header__inner {
	width: min(calc(100% - 40px), var(--content));
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.brand__mark {
	width: 33px;
	height: 33px;
	color: var(--primary);
}

.brand__mark svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.brand__mark circle {
	fill: #fff;
}

.brand__word {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.055em;
}

.brand__beta {
	align-self: flex-start;
	margin-top: 12px;
	border-radius: 4px;
	background: var(--primary-soft);
	color: var(--primary-deep);
	padding: 2px 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.desktop-nav {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-link {
	position: relative;
	height: 100%;
	padding: 0 13px;
	border: 0;
	background: none;
	color: var(--muted);
	font-size: 15px;
	font-weight: 650;
	cursor: pointer;
}

.nav-link:hover,
.nav-link.is-active {
	color: var(--ink);
}

.nav-link.is-active::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 0;
	left: 14px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--primary);
}

.nav-count {
	display: inline-grid;
	min-width: 18px;
	height: 18px;
	margin-left: 3px;
	place-items: center;
	border-radius: 99px;
	background: var(--coral-soft);
	color: #c94f41;
	font-size: 13px;
}

.header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
}

.search-trigger {
	width: 190px;
	height: 40px;
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--canvas);
	color: var(--muted);
	padding: 0 10px;
	font-size: 15px;
	cursor: pointer;
}

.search-trigger svg {
	width: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.search-trigger kbd {
	margin-left: auto;
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	background: white;
	padding: 0 5px;
	color: var(--muted-light);
	font-size: 13px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.icon-button {
	position: relative;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: white;
	cursor: pointer;
}

.icon-button:hover,
.search-trigger:hover {
	border-color: var(--line-strong);
	background: #fbfaff;
}

.icon-button svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.notification-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 7px;
	height: 7px;
	border: 2px solid white;
	border-radius: 50%;
	background: var(--coral);
}

.profile-button {
	height: 44px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 3px 5px 3px 3px;
	border: 0;
	border-radius: 12px;
	background: none;
	cursor: pointer;
}

.profile-button:hover {
	background: var(--canvas);
}

.profile-button__copy {
	display: grid;
	text-align: left;
	line-height: 1.2;
}

.profile-button__copy strong {
	font-size: 15px;
}

.profile-button__copy small {
	color: var(--muted);
	font-size: 13px;
}

.profile-button > svg {
	width: 14px;
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.6;
}

.avatar {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	border: 2px solid white;
	border-radius: 50%;
	background: #dfd8ff;
	color: #504197;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 0 0 1px var(--line);
}

.avatar--mia {
	background: linear-gradient(145deg, #f9c8bf, #8f7cea);
	color: white;
}

.avatar--teal { background: linear-gradient(145deg, #6fd8c4, #367da6); color: white; }
.avatar--orange { background: linear-gradient(145deg, #ffc46b, #e86c61); color: white; }
.avatar--blue { background: linear-gradient(145deg, #87b8f7, #6657d9); color: white; }
.avatar--green { background: linear-gradient(145deg, #9bdb88, #419d78); color: white; }

#main-content {
	min-height: calc(100vh - var(--header-height) - 32px);
}

.view {
	width: min(calc(100% - 40px), var(--content));
	margin: 0 auto;
	padding: 34px 0 80px;
}

.view.is-changing {
	opacity: 0;
	transform: translateY(4px);
}

.page-enter {
	animation: page-in 280ms ease both;
}

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

.page-heading {
	margin-bottom: 25px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.eyebrow {
	margin: 0 0 6px;
	color: var(--primary);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.page-heading h1,
.section-heading h2,
.modal-title {
	margin: 0;
	letter-spacing: -0.035em;
}

.page-heading h1 {
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.15;
}

.page-heading p {
	max-width: 620px;
	margin: 7px 0 0;
	color: var(--muted);
}

.heading-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.button {
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 750;
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
	transform: translateY(-1px);
}

.button:active {
	transform: translateY(0);
}

.button svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.button--primary {
	background: var(--primary);
	color: white;
	box-shadow: 0 8px 18px rgba(103, 87, 232, 0.22);
}

.button--primary:hover { background: var(--primary-deep); box-shadow: 0 10px 24px rgba(103, 87, 232, 0.28); }
.button--dark { background: var(--ink); color: white; }
.button--white { background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
.button--soft { background: var(--primary-soft); color: var(--primary-deep); }
.button--outline { border-color: var(--line-strong); background: white; color: var(--ink-soft); }
.button--ghost { background: transparent; color: var(--muted); }
.button--danger { background: #fff0f2; color: var(--danger); }
.button--full { width: 100%; }
.button--small { min-height: 34px; border-radius: 9px; padding: 0 12px; font-size: 14px; }
.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.text-button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-deep);
	font-size: 15px;
	font-weight: 750;
	cursor: pointer;
}

.text-button svg {
	width: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.pill,
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 750;
	white-space: nowrap;
}

.pill { min-height: 27px; padding: 0 10px; background: rgba(255, 255, 255, 0.8); }
.status-pill { min-height: 24px; padding: 0 8px; background: var(--canvas); color: var(--muted); }
.status-pill--success { background: var(--mint-soft); color: #23865f; }
.status-pill--warning { background: var(--amber-soft); color: #9c6712; }
.status-pill--coral { background: var(--coral-soft); color: #bd5045; }
.status-pill--purple { background: var(--primary-soft); color: var(--primary-deep); }
.status-pill--blue { background: var(--blue-soft); color: #2d6abf; }

.verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: inherit;
	font-weight: 700;
}

.verified svg {
	width: 15px;
	height: 15px;
	fill: var(--blue);
	stroke: white;
	stroke-width: 2.4;
}

.section-block {
	margin-top: 32px;
}

.section-heading {
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.section-heading h2 {
	font-size: 19px;
}

.section-heading h2 small {
	margin-left: 7px;
	color: var(--muted-light);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
}

.section-heading p {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 15px;
}

.card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
}

.mobile-nav {
	display: none;
}

/* Dashboard */
.welcome-row {
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.welcome-row h1 {
	margin: 0;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.16;
	letter-spacing: -0.04em;
}

.welcome-row p {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: 15px;
}

.setup-progress {
	min-width: 260px;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: white;
	padding: 9px 11px;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}

.setup-progress__ring,
.progress-ring {
	--progress: 72;
	position: relative;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: conic-gradient(var(--primary) calc(var(--progress) * 1%), var(--primary-soft) 0);
}

.setup-progress__ring::after,
.progress-ring::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: white;
}

.setup-progress__ring span,
.progress-ring span {
	position: relative;
	z-index: 1;
	font-size: 13px;
	font-weight: 800;
}

.setup-progress__copy {
	display: grid;
	line-height: 1.3;
	text-align: left;
}

.setup-progress__copy strong { font-size: 14px; }
.setup-progress__copy span { color: var(--muted); font-size: 13px; }
.setup-progress > svg { width: 16px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; }

.dashboard-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 304px;
	gap: 24px;
	align-items: start;
}

.main-column {
	min-width: 0;
}

.right-rail {
	display: grid;
	gap: 16px;
}

.hero-card {
	position: relative;
	min-height: 318px;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
	border-radius: 26px;
	background:
		radial-gradient(circle at 82% 15%, rgba(255, 255, 255, 0.35), transparent 18%),
		linear-gradient(120deg, #e9e3ff 0%, #d4cdfd 45%, #ffdfca 100%);
	box-shadow: 0 18px 48px rgba(83, 66, 152, 0.15);
}

.hero-card::before {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	right: -80px;
	top: -165px;
	border: 1px solid rgba(255,255,255,.5);
	border-radius: 50%;
	box-shadow: 0 0 0 44px rgba(255,255,255,.08), 0 0 0 88px rgba(255,255,255,.06);
}

.hero-card__copy {
	position: relative;
	z-index: 2;
	padding: 38px 0 34px 38px;
}

.hero-card__label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 19px;
}

.hero-card__label .pill {
	background: rgba(255, 255, 255, 0.65);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--coral);
	box-shadow: 0 0 0 4px rgba(255, 120, 104, 0.15);
	animation: pulse 2s ease infinite;
}

@keyframes pulse {
	50% { box-shadow: 0 0 0 7px rgba(255,120,104,0); }
}

.hero-card h2 {
	max-width: 500px;
	margin: 0 0 8px;
	font-size: clamp(29px, 3vw, 43px);
	line-height: 1.02;
	letter-spacing: -0.055em;
}

.hero-card__retailer {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #4e4861;
	font-size: 15px;
}

.retailer-mini-logo {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: #28213d;
	color: white;
	font-size: 13px;
	font-weight: 800;
}

.hero-card__progress {
	max-width: 400px;
	margin-top: 24px;
}

.progress-copy {
	margin-bottom: 7px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 700;
}

.progress-copy span:last-child {
	color: #625a70;
	font-weight: 650;
}

.progress-bar {
	position: relative;
	height: 7px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255,255,255,.58);
}

.progress-bar__fill {
	height: 100%;
	border-radius: inherit;
	background: var(--primary);
	box-shadow: 0 0 10px rgba(103,87,232,.28);
}

.hero-card__actions {
	margin-top: 22px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-card__visual {
	position: relative;
	min-height: 318px;
}

.hero-collectible {
	position: absolute;
	width: 190px;
	height: 238px;
	top: 39px;
	left: 50%;
	transform: translateX(-46%) rotate(7deg);
	border: 5px solid rgba(255,255,255,.88);
	border-radius: 22px;
	background: #122d4d;
	box-shadow: 0 28px 45px rgba(46, 32, 95, .28);
	animation: float 5s ease-in-out infinite;
}

.hero-collectible::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 17px;
	background:
		radial-gradient(circle at 44% 40%, #ffd071 0 5%, transparent 5.5%),
		radial-gradient(ellipse at 50% 64%, #f29252 0 15%, transparent 15.5%),
		radial-gradient(ellipse at 51% 59%, #fbc076 0 22%, transparent 22.5%),
		radial-gradient(ellipse at 50% 43%, #264b6f 0 28%, transparent 28.5%),
		linear-gradient(160deg, #173756, #0e2038 58%, #f88462 59%, #ffd08d);
}

.hero-collectible::after {
	content: "SUNSET KEEPER · 04";
	position: absolute;
	right: 14px;
	bottom: 13px;
	left: 14px;
	border-top: 1px solid rgba(255,255,255,.5);
	padding-top: 9px;
	color: white;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-align: center;
}

.hero-card__serial {
	position: absolute;
	z-index: 3;
	right: 18px;
	bottom: 24px;
	min-width: 98px;
	border: 1px solid rgba(255,255,255,.66);
	border-radius: 14px;
	background: rgba(255,255,255,.72);
	padding: 10px 12px;
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-sm);
}

.hero-card__serial small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hero-card__serial strong { font-size: 15px; }

@keyframes float {
	0%, 100% { transform: translateX(-46%) rotate(7deg) translateY(0); }
	50% { transform: translateX(-46%) rotate(5.5deg) translateY(-6px); }
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 12px;
}

.metric-card {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: white;
	padding: 12px;
}

.metric-card__icon {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--primary-soft);
	color: var(--primary);
}

.metric-card:nth-child(2) .metric-card__icon { background: var(--mint-soft); color: var(--mint); }
.metric-card:nth-child(3) .metric-card__icon { background: var(--coral-soft); color: var(--coral); }
.metric-card:nth-child(4) .metric-card__icon { background: var(--amber-soft); color: var(--amber); }
.metric-card__icon svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.metric-card__copy { min-width: 0; display: grid; line-height: 1.25; }
.metric-card__copy strong { font-size: 16px; }
.metric-card__copy span { color: var(--muted); font-size: 13px; white-space: normal; }

.collection-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.collection-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: white;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.collection-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.collection-card__cover {
	position: relative;
	height: 128px;
	overflow: hidden;
	background: linear-gradient(135deg, #a9d9ca, #467f7d);
}

.collection-card--coffee .collection-card__cover { background: linear-gradient(140deg, #f2c188, #a6573d); }
.collection-card--city .collection-card__cover { background: linear-gradient(140deg, #b8adff, #584cc5); }
.collection-card--space .collection-card__cover { background: linear-gradient(140deg, #21355e, #702e8a); }

.cover-shape {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
}

.cover-shape--one { width: 150px; height: 150px; top: -80px; right: -20px; }
.cover-shape--two { width: 90px; height: 90px; bottom: -50px; left: 20px; border: 18px solid rgba(255,255,255,.16); background: none; }

.cover-emblem {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	transform: translate(-50%, -50%) rotate(-6deg);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 24px;
	background: rgba(255,255,255,.2);
	color: white;
	font-size: 36px;
	backdrop-filter: blur(6px);
	box-shadow: 0 12px 28px rgba(30,40,70,.2);
}

.collection-card__body {
	padding: 13px 14px 14px;
}

.collection-card__retailer {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--muted);
	font-size: 13px;
}

.collection-card__retailer .verified svg { width: 12px; height: 12px; }
.collection-card h3 { margin: 5px 0 10px; font-size: 14px; letter-spacing: -.02em; }
.card-progress-row { display: flex; align-items: center; gap: 9px; }
.card-progress-row .progress-bar { flex: 1; height: 5px; background: var(--line); }
.card-progress-row span { color: var(--muted); font-size: 13px; font-weight: 700; }

.claim-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.item-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: white;
	box-shadow: var(--shadow-sm);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.item-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.item-art {
	position: relative;
	height: 180px;
	overflow: hidden;
	background: #ddd;
}

.item-art::before,
.item-art::after {
	content: "";
	position: absolute;
}

.item-art--ocean { background: linear-gradient(155deg, #79d7ce 0%, #1f7896 58%, #10425f 100%); }
.item-art--ocean::before { width: 95px; height: 62px; left: 50%; top: 51%; transform: translate(-50%,-50%) rotate(-9deg); border-radius: 55% 45% 50% 50%; background: #f7c85d; box-shadow: -45px 1px 0 -28px #f7c85d, 45px 2px 0 -28px #f7c85d, 0 36px 0 -26px #f7c85d; }
.item-art--ocean::after { inset: 0; background: radial-gradient(circle at 12% 24%, rgba(255,255,255,.75) 0 2px, transparent 3px), radial-gradient(circle at 86% 40%, rgba(255,255,255,.55) 0 3px, transparent 4px), repeating-radial-gradient(ellipse at 50% 130%, transparent 0 23px, rgba(255,255,255,.13) 24px 25px); }

.item-art--bird { background: linear-gradient(155deg, #ffd583, #f47c62 62%, #8b486f); }
.item-art--bird::before { width: 92px; height: 92px; left: 50%; top: 47%; transform: translate(-50%,-50%); border-radius: 55% 45% 58% 42%; background: radial-gradient(circle at 61% 30%, #171b2f 0 4px, transparent 5px), linear-gradient(135deg, #f2ebd5 0 40%, #3b4566 41% 74%, #f4a34d 75%); box-shadow: 0 15px 32px rgba(93,42,59,.25); }
.item-art--bird::after { width: 120px; height: 4px; left: 50%; top: 76%; transform: translateX(-50%) rotate(-4deg); border-radius: 99px; background: rgba(75,46,55,.7); box-shadow: 0 8px 0 -1px rgba(255,255,255,.18); }

.item-art--flower { background: linear-gradient(150deg, #b8e8ba, #4a9f78); }
.item-art--flower::before { width: 70px; height: 70px; left: 50%; top: 42%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, #7e5437 0 20%, transparent 21%), repeating-conic-gradient(#f2c94c 0 14deg, #f7dc79 15deg 29deg); box-shadow: 0 10px 24px rgba(33,91,68,.22); }
.item-art--flower::after { width: 5px; height: 85px; left: 50%; top: 54%; background: #287657; box-shadow: -14px 24px 0 -1px #4b9c69; transform: rotate(-5deg); }

.item-art--koala { background: radial-gradient(circle at 70% 18%, #d386ef 0 3%, transparent 4%), radial-gradient(circle at 22% 30%, #74c3ff 0 2%, transparent 3%), linear-gradient(150deg, #172448, #593482 70%, #a14d91); }
.item-art--koala::before { width: 88px; height: 82px; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 44% 44% 48% 48%; background: radial-gradient(circle at 34% 38%, #1d1e34 0 4px, transparent 5px), radial-gradient(circle at 66% 38%, #1d1e34 0 4px, transparent 5px), radial-gradient(ellipse at 50% 57%, #2c2940 0 14%, transparent 15%), #c9c9dc; box-shadow: -39px -5px 0 -18px #9c9bb4, 39px -5px 0 -18px #9c9bb4, 0 0 0 7px rgba(255,255,255,.12); }
.item-art--koala::after { width: 150px; height: 150px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 25px rgba(255,255,255,.03); }

.item-art--coffee { background: linear-gradient(145deg, #f3d5a8, #bb6949 68%, #633843); }
.item-art--coffee::before { width: 84px; height: 72px; left: 50%; top: 54%; transform: translate(-50%,-50%); border-radius: 8px 8px 40px 40px; background: linear-gradient(#fff8e9 0 18%, #eaa856 19%); box-shadow: 33px -1px 0 -19px transparent, 38px 3px 0 -17px #fff8e9, 0 16px 24px rgba(94,48,44,.2); }
.item-art--coffee::after { width: 8px; height: 48px; left: 48%; top: 5%; border-radius: 50%; border-left: 3px solid rgba(255,255,255,.55); border-right: 3px solid rgba(255,255,255,.4); filter: blur(1px); }

.item-art--city { background: linear-gradient(150deg, #705fe7, #2d285c 64%, #19182e); }
.item-art--city::before { width: 150px; height: 116px; left: 50%; bottom: -12px; transform: translateX(-50%); background: linear-gradient(90deg, #20213d 0 19%, transparent 20% 25%, #29284c 26% 48%, transparent 49% 53%, #1a1a32 54% 78%, transparent 79% 84%, #282449 85%), repeating-linear-gradient(90deg, transparent 0 13px, #f5cc69 14px 17px, transparent 18px 24px); clip-path: polygon(0 28%, 18% 28%, 18% 0, 39% 0, 39% 44%, 57% 44%, 57% 13%, 79% 13%, 79% 40%, 100% 40%, 100% 100%, 0 100%); }
.item-art--city::after { width: 76px; height: 76px; right: -18px; top: -18px; border: 15px solid rgba(255,130,194,.23); border-radius: 50%; }

.item-card__badges {
	position: absolute;
	z-index: 2;
	top: 9px;
	right: 9px;
	left: 9px;
	display: flex;
	justify-content: space-between;
}

.rarity-badge {
	min-height: 23px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 99px;
	background: rgba(27,26,43,.54);
	color: white;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	backdrop-filter: blur(7px);
}

.rarity-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }

.heart-button {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 50%;
	background: rgba(255,255,255,.78);
	cursor: pointer;
	backdrop-filter: blur(7px);
}

.heart-button svg { width: 14px; fill: none; stroke: #5c5668; stroke-width: 1.8; }
.heart-button.is-liked svg { fill: var(--coral); stroke: var(--coral); }

.item-card__body { padding: 12px; }
.item-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.item-card h3 { margin: 5px 0 10px; overflow: hidden; font-size: 15px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.supply-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.supply-row__copy { display: grid; line-height: 1.2; }
.supply-row__copy strong { font-size: 14px; }
.supply-row__copy span { color: var(--muted); font-size: 12px; }

.rail-card {
	border: 1px solid var(--line);
	border-radius: 17px;
	background: white;
	padding: 17px;
	box-shadow: var(--shadow-sm);
}

.rail-card__heading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-card__heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.rail-card__heading button { padding: 0; border: 0; background: none; color: var(--primary); font-size: 13px; font-weight: 750; cursor: pointer; }

.level-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, #25213c, #453b70);
	color: white;
}

.level-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -70px; top: -65px; border: 22px solid rgba(255,255,255,.06); border-radius: 50%; }
.level-card__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.level-badge { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg,#8c7cf5,#6757e8); font-weight: 850; box-shadow: 0 9px 18px rgba(20,15,40,.3); }
.level-card__copy { display: grid; line-height: 1.3; }
.level-card__copy span { color: rgba(255,255,255,.62); font-size: 13px; }
.level-card__copy strong { font-size: 15px; }
.level-card .progress-bar { margin-top: 14px; height: 5px; background: rgba(255,255,255,.13); }
.level-card .progress-bar__fill { background: #9ee8ca; }
.level-card__foot { margin-top: 7px; display: flex; justify-content: space-between; color: rgba(255,255,255,.62); font-size: 12px; }

.streak-row { display: flex; justify-content: space-between; gap: 4px; }
.streak-day { display: grid; justify-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.streak-day__dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--canvas); color: var(--muted-light); font-size: 13px; font-weight: 800; }
.streak-day.is-done .streak-day__dot { background: var(--mint-soft); color: var(--mint); }
.streak-day.is-today .streak-day__dot { background: var(--primary); color: white; box-shadow: 0 0 0 4px var(--primary-soft); }

.activity-list { display: grid; gap: 13px; }
.activity-item { display: flex; gap: 9px; }
.activity-item .avatar { width: 30px; height: 30px; font-size: 12px; }
.activity-item__copy { min-width: 0; display: grid; line-height: 1.35; }
.activity-item__copy span { font-size: 13px; }
.activity-item__copy span strong { font-weight: 750; }
.activity-item__copy time { color: var(--muted); font-size: 12px; }

.challenge-card { background: linear-gradient(145deg, #fff5e7, #fff); }
.challenge-card__body { display: flex; gap: 12px; align-items: center; }
.challenge-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--amber-soft); font-size: 22px; }
.challenge-copy { display: grid; line-height: 1.3; }
.challenge-copy strong { font-size: 14px; }
.challenge-copy span { color: var(--muted); font-size: 12px; }

.partner-row { display: flex; align-items: center; }
.partner-logo { width: 32px; height: 32px; display: grid; place-items: center; margin-left: -6px; border: 2px solid white; border-radius: 10px; color: white; font-size: 12px; font-weight: 850; }
.partner-logo:first-child { margin-left: 0; }
.partner-logo:nth-child(1) { background:#25213c; }
.partner-logo:nth-child(2) { background:#bd684e; }
.partner-logo:nth-child(3) { background:#3c866f; }
.partner-logo:nth-child(4) { background:#6051c5; }
.partner-logo:nth-child(5) { background:#36769b; }
.partner-more { margin-left: 8px; color: var(--muted); font-size: 13px; }

.page-footer {
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	color: var(--muted);
	font-size: 13px;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 17px; }
.footer-links button { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; }
.footer-links button:hover { color: var(--ink); }

/* Shared view controls */
.toolbar {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.toolbar__search {
	min-width: 260px;
	flex: 1;
	height: 44px;
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: white;
	padding: 0 13px;
}

.toolbar__search svg { width: 17px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.toolbar__search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); }
.toolbar__search input::placeholder { color: var(--muted-light); }

.select-control {
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 13px;
	background: white;
	color: var(--ink-soft);
	padding: 0 34px 0 13px;
	font-size: 14px;
	font-weight: 650;
	cursor: pointer;
}

.chip-row {
	margin-bottom: 20px;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.chip-row::-webkit-scrollbar { display: none; }

.filter-chip {
	min-height: 35px;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: 99px;
	background: white;
	color: var(--muted);
	padding: 0 13px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.filter-chip:hover,
.filter-chip.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-deep); }

.market-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 15px;
}

.market-grid .item-art { height: 220px; }

.retailer-directory {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 13px;
}

.retailer-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 17px;
	background: white;
	padding: 18px;
	box-shadow: var(--shadow-sm);
}

.retailer-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--retailer-color, var(--primary)); }
.retailer-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.retailer-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--retailer-color, var(--primary)); color: white; font-weight: 850; }
.retailer-card h3 { margin: 12px 0 2px; font-size: 14px; }
.retailer-card p { min-height: 35px; margin: 7px 0 14px; color: var(--muted); font-size: 13px; }
.retailer-stats { display: flex; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.retailer-stat { display: grid; line-height: 1.2; }
.retailer-stat strong { font-size: 14px; }
.retailer-stat span { color: var(--muted); font-size: 12px; }

.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,.5); padding: 50px 24px; text-align: center; }
.empty-state__icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 13px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); }
.empty-state h3 { margin: 0; }
.empty-state p { margin: 5px auto 15px; max-width: 380px; color: var(--muted); font-size: 14px; }

/* Collection detail and inventory */
.collection-hero {
	position: relative;
	min-height: 272px;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	border-radius: 26px;
	background: linear-gradient(120deg,#183f51,#287b78 57%,#d4ae68);
	color: white;
	box-shadow: var(--shadow-md);
}

.collection-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -210px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 120px rgba(255,255,255,.025); }
.collection-hero__copy { position: relative; z-index: 2; padding: 35px; }
.collection-hero__copy h1 { margin: 15px 0 8px; font-size: clamp(31px,4vw,49px); line-height: 1; letter-spacing: -.055em; }
.collection-hero__copy p { max-width: 560px; margin: 0; color: rgba(255,255,255,.72); font-size: 15px; }
.collection-hero__stats { margin-top: 24px; display: flex; gap: 27px; }
.collection-hero__stat { display: grid; line-height: 1.2; }
.collection-hero__stat strong { font-size: 18px; }
.collection-hero__stat span { color: rgba(255,255,255,.58); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.collection-hero__visual { position: relative; z-index: 1; }
.collection-fan-card { position: absolute; width: 145px; height: 188px; top: 41px; left: 50%; border: 4px solid rgba(255,255,255,.9); border-radius: 17px; box-shadow: 0 20px 34px rgba(10,25,33,.35); }
.collection-fan-card:nth-child(1) { transform: translateX(-88%) rotate(-12deg); background: linear-gradient(150deg,#69cbc0,#0c5671); }
.collection-fan-card:nth-child(2) { z-index: 2; transform: translateX(-50%) rotate(2deg); background: linear-gradient(150deg,#ffd282,#dd6f5e); }
.collection-fan-card:nth-child(3) { transform: translateX(-12%) rotate(15deg); background: linear-gradient(150deg,#94c988,#276c61); }
.collection-fan-card::after { content: ""; position: absolute; width: 64px; height: 64px; left: 50%; top: 44%; transform: translate(-50%,-50%); border: 13px solid rgba(255,255,255,.42); border-radius: 50%; }

.tab-bar { margin: 22px 0 18px; display: flex; gap: 5px; border-bottom: 1px solid var(--line); }
.tab-button { position: relative; min-height: 44px; border: 0; background: none; color: var(--muted); padding: 0 16px; font-size: 14px; font-weight: 700; cursor: pointer; }
.tab-button.is-active { color: var(--ink); }
.tab-button.is-active::after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

.inventory-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 22px; align-items: start; }
.inventory-sidebar { position: sticky; top: calc(var(--header-height) + 20px); display: grid; gap: 8px; }
.inventory-side-button { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); padding: 0 12px; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; }
.inventory-side-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.inventory-side-button span:last-child { margin-left: auto; font-size: 13px; }
.inventory-side-button:hover,
.inventory-side-button.is-active { background: white; color: var(--primary-deep); box-shadow: var(--shadow-sm); }
.inventory-summary { margin-top: 10px; border-radius: 15px; background: linear-gradient(145deg,#2c2746,#4c4272); color: white; padding: 15px; }
.inventory-summary strong { display: block; font-size: 24px; }
.inventory-summary span { color: rgba(255,255,255,.62); font-size: 13px; }

.inventory-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.owned-ribbon { position: absolute; z-index: 2; top: 10px; left: 10px; border-radius: 99px; background: rgba(33,137,97,.88); color: white; padding: 4px 8px; font-size: 12px; font-weight: 800; backdrop-filter: blur(7px); }
.duplicate-ribbon { background: rgba(103,87,232,.88); }

/* Trades */
.trade-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 25px; }
.summary-card { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; padding: 15px; }
.summary-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.summary-card:nth-child(2) .summary-card__icon { background: var(--amber-soft); color: var(--amber); }
.summary-card:nth-child(3) .summary-card__icon { background: var(--mint-soft); color: var(--mint); }
.summary-card:nth-child(4) .summary-card__icon { background: var(--blue-soft); color: var(--blue); }
.summary-card__icon svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.summary-card__copy { display: grid; line-height: 1.25; }
.summary-card__copy strong { font-size: 20px; }
.summary-card__copy span { color: var(--muted); font-size: 13px; }

.trade-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px; align-items: start; }
.trade-list { display: grid; gap: 11px; }
.trade-card { border: 1px solid var(--line); border-radius: 17px; background: white; padding: 14px; box-shadow: var(--shadow-sm); }
.trade-card__head { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade-user { display: flex; align-items: center; gap: 9px; }
.trade-user__copy { display: grid; line-height: 1.25; }
.trade-user__copy strong { font-size: 14px; }
.trade-user__copy span { color: var(--muted); font-size: 12px; }
.trade-comparison { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 10px; }
.trade-item { display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--canvas); padding: 9px; }
.trade-thumb { width: 48px; height: 58px; flex: 0 0 auto; border-radius: 9px; background: linear-gradient(145deg,#72c7bc,#21697b); }
.trade-thumb--coral { background: linear-gradient(145deg,#ffd07a,#dc6a61); }
.trade-thumb--purple { background: linear-gradient(145deg,#9f8aef,#3f376e); }
.trade-thumb--green { background: linear-gradient(145deg,#b8d879,#34785e); }
.trade-item__copy { min-width: 0; display: grid; line-height: 1.3; }
.trade-item__copy small { color: var(--muted); font-size: 12px; }
.trade-item__copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.swap-arrow { width: 34px; height: 34px; display: grid; place-items: center; margin: auto; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.swap-arrow svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.trade-card__foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.trade-card__actions { display: flex; gap: 7px; }
.match-card { position: sticky; top: calc(var(--header-height) + 20px); border: 1px solid var(--line); border-radius: 20px; background: white; padding: 19px; box-shadow: var(--shadow-sm); }
.match-score { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--mint) 94%, var(--mint-soft) 0); }
.match-score::after { content:"94%"; width: 47px; height: 47px; display:grid; place-items:center; border-radius:50%; background:white; font-size:14px; font-weight:850; }
.match-card__hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.match-card h3 { margin: 15px 0 5px; }
.match-card p { margin: 0 0 15px; color: var(--muted); font-size: 13px; }
.match-reason { display: flex; align-items: flex-start; gap: 8px; margin: 9px 0; color: var(--ink-soft); font-size: 13px; }
.match-reason svg { width: 14px; flex: 0 0 auto; fill: none; stroke: var(--mint); stroke-width: 2.2; }

/* Community and showcase */
.community-layout { display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 22px; align-items: start; }
.composer { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 16px; background: white; padding: 12px; }
.composer__prompt { flex: 1; border: 0; border-radius: 11px; background: var(--canvas); color: var(--muted); padding: 11px 13px; text-align: left; cursor: pointer; }
.composer__action { width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.composer__action svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feed { display: grid; gap: 13px; margin-top: 13px; }
.post-card { border: 1px solid var(--line); border-radius: 17px; background: white; padding: 16px; box-shadow: var(--shadow-sm); }
.post-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-user { display: flex; align-items: center; gap: 9px; }
.post-user__copy { display: grid; line-height: 1.3; }
.post-user__copy strong { font-size: 14px; }
.post-user__copy span { color: var(--muted); font-size: 12px; }
.post-copy { margin: 13px 0; color: var(--ink-soft); font-size: 14px; }
.post-showcase { position: relative; min-height: 250px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg,#d6cdfd,#f6c9ad); }
.post-showcase__cards { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.post-mini-card { width: 110px; height: 158px; border: 4px solid white; border-radius: 13px; box-shadow: 0 15px 30px rgba(47,37,84,.24); }
.post-mini-card:nth-child(1) { transform: rotate(-8deg); background: linear-gradient(145deg,#6cc9c1,#1d5c79); }
.post-mini-card:nth-child(2) { z-index:2; transform: translateY(-7px); background: linear-gradient(145deg,#ffd078,#e16e5e); }
.post-mini-card:nth-child(3) { transform: rotate(8deg); background: linear-gradient(145deg,#aace83,#316e5a); }
.post-actions { margin-top: 12px; display: flex; align-items: center; gap: 4px; }
.post-action { min-height: 32px; display: flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); padding: 0 9px; font-size: 13px; cursor: pointer; }
.post-action:hover { background: var(--canvas); color: var(--ink); }
.post-action svg { width: 15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.post-action.is-active { color: var(--coral); }
.post-action.is-active svg { fill: currentColor; }
.post-action:last-child { margin-left:auto; }
.leader-list { display: grid; gap: 12px; }
.leader-row { display: flex; align-items: center; gap: 9px; }
.leader-rank { width: 18px; color: var(--muted); font-size: 13px; font-weight: 800; text-align: center; }
.leader-row:nth-child(-n+3) .leader-rank { color: var(--amber); }
.leader-copy { min-width:0; flex:1; display:grid; line-height:1.25; }
.leader-copy strong { font-size:13px; }
.leader-copy span { color:var(--muted); font-size:12px; }
.leader-xp { font-size:13px; font-weight:750; }

.showcase-cover { position: relative; min-height: 260px; overflow: hidden; border-radius: 25px; background: linear-gradient(115deg,#3e356d,#7667d1 54%,#f39e84); color:white; }
.showcase-cover::before { content:""; position:absolute; width:380px; height:380px; right:-100px; top:-190px; border:55px solid rgba(255,255,255,.07); border-radius:50%; }
.showcase-cover__actions { position:absolute; z-index:2; top:18px; right:18px; display:flex; gap:8px; }
.showcase-profile { position:absolute; z-index:2; left:32px; bottom:30px; display:flex; align-items:flex-end; gap:17px; }
.showcase-avatar { width:92px; height:92px; display:grid; place-items:center; border:5px solid rgba(255,255,255,.9); border-radius:26px; background:linear-gradient(145deg,#f4c0b5,#7e6eda); font-size:24px; font-weight:850; box-shadow:var(--shadow-md); }
.showcase-profile__copy h1 { margin:0; font-size:30px; letter-spacing:-.04em; }
.showcase-profile__copy p { margin:3px 0 0; color:rgba(255,255,255,.7); font-size:13px; }
.showcase-stats { position:absolute; z-index:2; right:32px; bottom:32px; display:flex; gap:24px; }
.showcase-stat { display:grid; text-align:center; line-height:1.2; }
.showcase-stat strong { font-size:20px; }
.showcase-stat span { color:rgba(255,255,255,.62); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.showcase-layout { margin-top:20px; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; align-items:start; }
.showcase-shelf { border:1px solid var(--line); border-radius:18px; background:white; padding:18px; }
.shelf-items { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.shelf-item { position:relative; height:190px; overflow:hidden; border:4px solid #f8f7fb; border-radius:15px; box-shadow:0 8px 18px rgba(35,29,64,.12); }
.shelf-item .item-art { height:100%; }
.shelf-number { position:absolute; right:8px; bottom:8px; border-radius:6px; background:rgba(23,22,37,.67); color:white; padding:3px 6px; font-size:12px; font-weight:750; backdrop-filter:blur(6px); }
.badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.achievement { min-height:72px; display:grid; place-items:center; border:1px solid var(--line); border-radius:13px; background:var(--canvas-warm); padding:8px; text-align:center; }
.achievement span:first-child { font-size:22px; }
.achievement span:last-child { color:var(--muted); font-size:12px; font-weight:750; }

/* Retailer studio and trust */
.studio-shell { display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; }
.studio-nav { position:sticky; top:calc(var(--header-height) + 20px); align-self:start; border:1px solid var(--line); border-radius:18px; background:white; padding:13px; box-shadow:var(--shadow-sm); }
.studio-brand { display:flex; align-items:center; gap:10px; padding:5px 5px 15px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.studio-brand__logo { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#25213c; color:white; font-weight:850; }
.studio-brand__copy { min-width:0; display:grid; line-height:1.25; }
.studio-brand__copy strong { font-size:14px; }
.studio-brand__copy span { color:var(--mint); font-size:12px; font-weight:750; }
.studio-link { width:100%; min-height:40px; display:flex; align-items:center; gap:10px; border:0; border-radius:10px; background:transparent; color:var(--muted); padding:0 10px; font-size:13px; font-weight:650; text-align:left; cursor:pointer; }
.studio-link svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.studio-link:hover,.studio-link.is-active { background:var(--primary-soft); color:var(--primary-deep); }
.studio-link span:last-child { margin-left:auto; }
.studio-main { min-width:0; }
.verification-banner { margin-bottom:18px; display:flex; align-items:center; gap:13px; border:1px solid #ccebdc; border-radius:16px; background:var(--mint-soft); padding:14px 16px; }
.verification-banner__icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:white; color:var(--mint); }
.verification-banner__icon svg { width:21px; fill:none; stroke:currentColor; stroke-width:2; }
.verification-banner__copy { display:grid; line-height:1.3; }
.verification-banner__copy strong { font-size:14px; }
.verification-banner__copy span { color:#47856d; font-size:13px; }
.verification-banner .button { margin-left:auto; }
.analytics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
.analytics-card { border:1px solid var(--line); border-radius:15px; background:white; padding:15px; }
.analytics-card__top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.07em; }
.analytics-card__top svg { width:16px; fill:none; stroke:var(--muted-light); stroke-width:1.8; }
.analytics-card strong { display:block; margin-top:8px; font-size:25px; letter-spacing:-.04em; }
.trend { color:var(--mint); font-size:12px; font-weight:750; }
.campaign-table { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:white; }
.table-row { display:grid; grid-template-columns:minmax(210px,1.5fr) .75fr .75fr .7fr 100px; align-items:center; gap:14px; min-height:67px; padding:0 16px; border-top:1px solid var(--line); }
.table-row:first-child { border-top:0; }
.table-row--head { min-height:42px; background:var(--canvas); color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.campaign-name { display:flex; align-items:center; gap:10px; }
.campaign-thumb { width:38px; height:44px; flex:0 0 auto; border-radius:8px; background:linear-gradient(145deg,#6ec7bd,#1e6a78); }
.campaign-name__copy { min-width:0; display:grid; line-height:1.3; }
.campaign-name__copy strong { font-size:13px; }
.campaign-name__copy span { color:var(--muted); font-size:12px; }
.table-value { display:grid; line-height:1.25; }
.table-value strong { font-size:13px; }
.table-value span { color:var(--muted); font-size:12px; }
.sparkline { width:68px; height:24px; }
.sparkline polyline { fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.security-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; align-items:start; }
.security-nav { position:sticky; top:calc(var(--header-height) + 20px); display:grid; gap:5px; }
.security-panel { border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow-sm); }
.security-panel + .security-panel { margin-top:14px; }
.security-panel__head { padding:18px; border-bottom:1px solid var(--line); }
.security-panel__head h2 { margin:0; font-size:15px; }
.security-panel__head p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.setting-row { min-height:70px; display:flex; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line); }
.setting-row:first-child { border-top:0; }
.setting-icon { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px; background:var(--primary-soft); color:var(--primary); }
.setting-icon svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.setting-copy { flex:1; display:grid; line-height:1.35; }
.setting-copy strong { font-size:13px; }
.setting-copy span { color:var(--muted); font-size:12px; }
.toggle { position:relative; width:38px; height:22px; flex:0 0 auto; border:0; border-radius:99px; background:#dcd9e3; padding:0; cursor:pointer; }
.toggle::after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform 180ms ease; }
.toggle.is-on { background:var(--primary); }
.toggle.is-on::after { transform:translateX(16px); }
.session-row { display:flex; align-items:center; gap:11px; }
.session-device { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--canvas); }
.session-device svg { width:18px; fill:none; stroke:var(--ink-soft); stroke-width:1.7; }

/* Overlays, drawers, menus and wizard */
.overlay {
	position:fixed;
	z-index:200;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(24,20,43,.46);
	padding:20px;
	backdrop-filter:blur(7px);
	animation:overlay-in 180ms ease both;
}

@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }

.overlay.is-closing { animation:overlay-out 160ms ease both; }
@keyframes overlay-out { to { opacity:0; } }

.modal {
	position:relative;
	width:min(100%, 560px);
	max-height:min(90vh, 840px);
	overflow:auto;
	border:1px solid rgba(255,255,255,.7);
	border-radius:24px;
	background:white;
	box-shadow:var(--shadow-lg);
	animation:modal-in 220ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes modal-in { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }

.modal--wide { width:min(100%, 900px); }
.modal--feature { width:min(100%, 1060px); height:min(90vh,790px); display:flex; flex-direction:column; overflow:hidden; }
.modal--wizard { width:min(100%, 780px); overflow:hidden; }
.modal--claim { width:min(100%, 520px); overflow:hidden; }
.modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:21px 22px 16px; border-bottom:1px solid var(--line); }
.modal__header-copy p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.modal-title { font-size:20px; }
.modal__body { padding:22px; }
.modal__footer { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:15px 22px 20px; border-top:1px solid var(--line); }
.close-button { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:white; color:var(--muted); cursor:pointer; }
.close-button:hover { background:var(--canvas); color:var(--ink); }
.close-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.drawer-overlay { align-items:stretch; justify-content:flex-end; padding:0; background:rgba(24,20,43,.3); }
.drawer { width:min(100%, 410px); height:100%; overflow:auto; background:white; box-shadow:-20px 0 60px rgba(28,21,64,.2); animation:drawer-in 230ms ease both; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:none; } }
.drawer__header { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; padding:19px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.drawer__header h2 { margin:0; font-size:17px; }
.drawer__body { padding:10px 19px 30px; }
.notification-item { display:flex; gap:11px; padding:14px 2px; border-bottom:1px solid var(--line); }
.notification-icon { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:11px; background:var(--primary-soft); color:var(--primary); }
.notification-icon svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.notification-copy { display:grid; line-height:1.4; }
.notification-copy span { font-size:13px; }
.notification-copy time { color:var(--muted); font-size:12px; }
.notification-item.is-unread .notification-copy span { font-weight:650; }
.notification-item.is-unread { position:relative; }
.notification-item.is-unread::after { content:""; position:absolute; top:20px; right:1px; width:6px; height:6px; border-radius:50%; background:var(--primary); }

.popover { position:fixed; z-index:190; width:235px; border:1px solid var(--line); border-radius:15px; background:white; padding:7px; box-shadow:var(--shadow-md); animation:modal-in 150ms ease both; }
.popover__user { display:flex; align-items:center; gap:9px; padding:8px; margin-bottom:5px; border-bottom:1px solid var(--line); }
.popover__user-copy { display:grid; line-height:1.3; }
.popover__user-copy strong { font-size:14px; }
.popover__user-copy span { color:var(--muted); font-size:12px; }
.menu-item { width:100%; min-height:38px; display:flex; align-items:center; gap:9px; border:0; border-radius:9px; background:transparent; color:var(--ink-soft); padding:0 9px; font-size:13px; text-align:left; cursor:pointer; }
.menu-item:hover { background:var(--canvas); color:var(--primary-deep); }
.menu-item svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.menu-item span:last-child { margin-left:auto; color:var(--muted); font-size:12px; }
.menu-divider { height:1px; margin:5px 4px; background:var(--line); }

.search-modal { align-items:flex-start; padding-top:min(14vh,120px); }
.search-box { width:min(100%,680px); border:1px solid rgba(255,255,255,.7); border-radius:20px; background:white; box-shadow:var(--shadow-lg); overflow:hidden; animation:modal-in 200ms ease both; }
.search-box__input { height:62px; display:flex; align-items:center; gap:12px; padding:0 18px; border-bottom:1px solid var(--line); }
.search-box__input svg { width:22px; fill:none; stroke:var(--muted); stroke-width:1.8; }
.search-box__input input { min-width:0; flex:1; border:0; outline:0; font-size:16px; }
.search-box__input kbd { border:1px solid var(--line); border-radius:6px; background:var(--canvas); color:var(--muted); padding:2px 6px; font-size:13px; }
.search-results { max-height:430px; overflow:auto; padding:12px; }
.search-label { margin:4px 7px 8px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.search-result { width:100%; min-height:54px; display:flex; align-items:center; gap:11px; border:0; border-radius:11px; background:transparent; padding:7px; text-align:left; cursor:pointer; }
.search-result:hover { background:var(--canvas); }
.search-result__icon { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#96d7cd,#2f7e86); color:white; font-weight:800; }
.search-result__copy { display:grid; line-height:1.35; }
.search-result__copy strong { font-size:13px; }
.search-result__copy span { color:var(--muted); font-size:12px; }
.search-shortcuts { display:flex; gap:13px; padding:10px 17px; border-top:1px solid var(--line); background:var(--canvas); color:var(--muted); font-size:12px; }

.wizard-layout { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:520px; }
.wizard-aside { position:relative; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(155deg,#302a53,#6d5ce1); color:white; padding:26px; }
.wizard-aside::after { content:""; position:absolute; width:280px; height:280px; left:-120px; bottom:-150px; border:45px solid rgba(255,255,255,.07); border-radius:50%; }
.wizard-brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:800; }
.wizard-brand .brand__mark { width:26px; height:26px; color:white; }
.wizard-aside__copy { position:relative; z-index:1; margin:auto 0; }
.wizard-aside__copy h3 { margin:0 0 9px; font-size:24px; line-height:1.08; letter-spacing:-.04em; }
.wizard-aside__copy p { margin:0; color:rgba(255,255,255,.68); font-size:13px; }
.wizard-steps { position:relative; z-index:1; display:flex; gap:6px; }
.wizard-step-dot { width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.24); transition:width 180ms ease,background 180ms ease; }
.wizard-step-dot.is-active { width:23px; background:white; }
.wizard-main { min-width:0; display:flex; flex-direction:column; padding:27px 29px 22px; }
.wizard-top { display:flex; justify-content:space-between; align-items:center; }
.wizard-count { color:var(--muted); font-size:13px; font-weight:700; }
.wizard-skip { border:0; background:none; color:var(--muted); font-size:13px; font-weight:700; cursor:pointer; }
.wizard-content { flex:1; padding:24px 0 18px; }
.wizard-content h2 { margin:0; font-size:25px; line-height:1.12; letter-spacing:-.04em; }
.wizard-content > p { margin:8px 0 21px; color:var(--muted); font-size:13px; }
.wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.choice-card { position:relative; min-height:82px; display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:13px; background:white; padding:12px; text-align:left; cursor:pointer; }
.choice-card:hover,.choice-card.is-selected { border-color:var(--primary); background:var(--primary-soft); }
.choice-icon { width:39px; height:39px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:white; font-size:20px; box-shadow:var(--shadow-sm); }
.choice-copy { display:grid; line-height:1.3; }
.choice-copy strong { font-size:13px; }
.choice-copy span { color:var(--muted); font-size:12px; }
.choice-check { position:absolute; top:8px; right:8px; width:15px; height:15px; display:none; place-items:center; border-radius:50%; background:var(--primary); color:white; font-size:12px; }
.choice-card.is-selected .choice-check { display:grid; }
.wizard-welcome-art { position:relative; height:168px; margin-top:11px; overflow:hidden; border-radius:16px; background:linear-gradient(135deg,#e2ddff,#ffdccc); }
.wizard-card { position:absolute; width:93px; height:126px; top:23px; border:4px solid white; border-radius:13px; box-shadow:0 13px 27px rgba(58,45,102,.22); }
.wizard-card:nth-child(1) { left:calc(50% - 116px); transform:rotate(-10deg); background:linear-gradient(145deg,#73cfc4,#276c7c); }
.wizard-card:nth-child(2) { z-index:2; left:calc(50% - 46px); transform:translateY(-6px); background:linear-gradient(145deg,#ffd17d,#df6d5f); }
.wizard-card:nth-child(3) { left:calc(50% + 24px); transform:rotate(11deg); background:linear-gradient(145deg,#98cb82,#316f5b); }
.safety-list { display:grid; gap:10px; }
.safety-item { display:flex; gap:10px; border-radius:12px; background:var(--canvas); padding:11px; }
.safety-item__icon { width:32px; height:32px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:white; color:var(--primary); }
.safety-item__icon svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
.safety-item__copy { display:grid; line-height:1.35; }
.safety-item__copy strong { font-size:13px; }
.safety-item__copy span { color:var(--muted); font-size:12px; }

.claim-visual { position:relative; min-height:240px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#d6cdfd,#ffd7bd); }
.claim-visual::before { content:""; position:absolute; width:300px; height:300px; border:1px solid rgba(255,255,255,.45); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.1); }
.claim-card-art { position:relative; z-index:1; width:135px; height:175px; border:5px solid white; border-radius:17px; background:linear-gradient(155deg,#77d4ca,#1e7188 70%,#16455f); box-shadow:0 20px 36px rgba(45,35,89,.25); transform:rotate(-3deg); }
.claim-card-art::before { content:""; position:absolute; width:65px; height:46px; left:50%; top:46%; transform:translate(-50%,-50%); border-radius:55% 45%; background:#f4c75e; box-shadow:-28px 2px 0 -20px #f4c75e,28px 2px 0 -20px #f4c75e; }
.claim-body { padding:20px 22px; text-align:center; }
.claim-body h2 { margin:0; font-size:22px; letter-spacing:-.04em; }
.claim-body > p { margin:6px auto 15px; max-width:390px; color:var(--muted); font-size:13px; }
.claim-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0; }
.claim-fact { display:grid; border-radius:11px; background:var(--canvas); padding:10px; line-height:1.3; }
.claim-fact strong { font-size:14px; }
.claim-fact span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.claim-note { display:flex; align-items:flex-start; gap:8px; border-radius:10px; background:var(--mint-soft); color:#36775f; padding:9px; font-size:12px; text-align:left; }
.claim-note svg { width:14px; flex:0 0 auto; fill:none; stroke:var(--mint); stroke-width:2; }
.reveal-card { animation:reveal 650ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes reveal { 0% { transform:rotateY(90deg) scale(.75); filter:brightness(2); } 100% { transform:rotateY(0) rotate(-3deg) scale(1); filter:none; } }
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.confetti i { position:absolute; width:7px; height:12px; top:-20px; border-radius:2px; background:var(--coral); animation:confetti-fall 1.2s ease-out both; }
.confetti i:nth-child(2n) { background:var(--primary); }
.confetti i:nth-child(3n) { background:var(--amber); }
.confetti i:nth-child(4n) { background:var(--mint); }
@keyframes confetti-fall { to { transform:translate(var(--x),300px) rotate(540deg); opacity:0; } }

.trade-builder { display:grid; grid-template-columns:1fr 54px 1fr; gap:13px; align-items:start; }
.trade-column h3 { margin:0 0 8px; font-size:14px; }
.trade-select-list { display:grid; gap:8px; }
.trade-select-card { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:12px; background:white; padding:8px; text-align:left; cursor:pointer; }
.trade-select-card:hover,.trade-select-card.is-selected { border-color:var(--primary); background:var(--primary-soft); }
.trade-select-thumb { width:40px; height:50px; flex:0 0 auto; border-radius:8px; background:linear-gradient(145deg,#73c9bf,#286d80); }
.trade-select-card:nth-child(2) .trade-select-thumb { background:linear-gradient(145deg,#ffd078,#df6c5e); }
.trade-select-card:nth-child(3) .trade-select-thumb { background:linear-gradient(145deg,#a294ec,#453b77); }
.trade-select-copy { min-width:0; display:grid; line-height:1.3; }
.trade-select-copy strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.trade-select-copy span { color:var(--muted); font-size:12px; }
.trade-builder__arrow { width:38px; height:38px; display:grid; place-items:center; margin:63px auto 0; border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.trade-builder__arrow svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fairness-panel { margin-top:15px; display:flex; align-items:center; gap:11px; border:1px solid #cfeadd; border-radius:12px; background:var(--mint-soft); padding:11px; }
.fairness-panel__score { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:white; color:var(--mint); font-size:13px; font-weight:850; }
.fairness-panel__copy { display:grid; line-height:1.35; }
.fairness-panel__copy strong { font-size:13px; }
.fairness-panel__copy span { color:#548371; font-size:12px; }

.feature-toolbar { display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); }
.feature-toolbar .toolbar__search { height:40px; min-width:200px; }
.feature-count { margin-left:auto; color:var(--muted); font-size:13px; white-space:nowrap; }
.feature-layout { min-height:0; flex:1; display:grid; grid-template-columns:205px minmax(0,1fr); overflow:hidden; }
.feature-categories { overflow:auto; padding:12px; border-right:1px solid var(--line); background:var(--canvas); }
.feature-category { width:100%; min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:0; border-radius:9px; background:transparent; color:var(--muted); padding:0 9px; font-size:13px; font-weight:650; text-align:left; cursor:pointer; }
.feature-category:hover,.feature-category.is-active { background:white; color:var(--primary-deep); box-shadow:var(--shadow-sm); }
.feature-category span:last-child { font-size:12px; }
.feature-list { overflow:auto; padding:16px 19px 22px; }
.feature-list__heading { margin:0 0 12px; font-size:15px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.feature-card { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:11px; padding:11px; }
.feature-number { width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; background:var(--primary-soft); color:var(--primary-deep); font-size:12px; font-weight:850; }
.feature-copy { min-width:0; flex:1; display:grid; line-height:1.35; }
.feature-copy strong { font-size:13px; }
.feature-copy span { color:var(--muted); font-size:12px; }
.feature-status { margin-top:3px; justify-self:start; border-radius:99px; background:var(--mint-soft); color:#25805d; padding:2px 6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.feature-status--service { background:var(--amber-soft); color:#9a6818; }

.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.form-field { display:grid; gap:5px; }
.form-field--full { grid-column:1/-1; }
.form-field label { color:var(--ink-soft); font-size:13px; font-weight:750; }
.form-field input,.form-field textarea,.form-field select { width:100%; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); padding:10px 11px; outline:0; }
.form-field input:focus,.form-field textarea:focus,.form-field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.form-field textarea { min-height:80px; resize:vertical; }
.form-hint { color:var(--muted); font-size:12px; }
.supply-editor { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.supply-editor__row { display:grid; grid-template-columns:minmax(150px,1fr) 95px 95px 32px; align-items:center; gap:9px; min-height:54px; padding:7px 10px; border-top:1px solid var(--line); }
.supply-editor__row:first-child { border-top:0; }
.supply-editor__row--head { min-height:34px; background:var(--canvas); color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.item-name-field { display:flex; align-items:center; gap:8px; }
.item-name-field__thumb { width:32px; height:38px; border-radius:7px; background:linear-gradient(145deg,#6ec9bf,#286e80); }
.supply-input { width:100%; height:32px; border:1px solid var(--line); border-radius:8px; padding:0 8px; font-size:13px; }
.info-banner { display:flex; align-items:flex-start; gap:9px; border:1px solid #d9d3fb; border-radius:11px; background:var(--primary-soft); padding:10px; color:#574c8f; font-size:12px; }
.info-banner svg { width:15px; flex:0 0 auto; fill:none; stroke:var(--primary); stroke-width:2; }

.toast-region { position:fixed; z-index:400; right:20px; bottom:20px; display:grid; gap:9px; pointer-events:none; }
.toast { min-width:280px; max-width:380px; display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:#25213b; color:white; padding:12px 14px; box-shadow:var(--shadow-lg); animation:toast-in 240ms ease both; pointer-events:auto; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.toast.is-leaving { animation:toast-out 200ms ease both; }
@keyframes toast-out { to { opacity:0; transform:translateX(15px); } }
.toast__icon { width:23px; height:23px; flex:0 0 auto; display:grid; place-items:center; border-radius:7px; background:rgba(106,226,182,.14); color:#6de2b6; }
.toast__icon svg { width:14px; fill:none; stroke:currentColor; stroke-width:2; }
.toast__copy { display:grid; line-height:1.35; }
.toast__copy strong { font-size:13px; }
.toast__copy span { color:rgba(255,255,255,.63); font-size:12px; }

.skeleton { position:relative; overflow:hidden; background:#ebe8f0; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:shimmer 1.2s infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

@media (max-width: 1180px) {
	.desktop-nav { gap:0; }
	.nav-link { padding:0 9px; }
	.search-trigger { width:42px; justify-content:center; }
	.search-trigger span,.search-trigger kbd { display:none; }
	.dashboard-layout { grid-template-columns:minmax(0,1fr) 270px; gap:18px; }
	.hero-card { grid-template-columns:minmax(0,1fr) 330px; }
	.claim-grid { grid-template-columns:repeat(3,1fr); }
	.claim-grid .item-card:nth-child(4) { display:none; }
	.market-grid { grid-template-columns:repeat(4,1fr); }
	.inventory-grid { grid-template-columns:repeat(3,1fr); }
	.shelf-items { grid-template-columns:repeat(3,1fr); }
	.shelf-item:nth-child(4) { display:none; }
}

@media (max-width: 980px) {
	:root { --header-height:68px; }
	.site-header__inner,.trust-strip__inner,.view { width:min(calc(100% - 28px),var(--content)); }
	.desktop-nav { display:none; }
	.header-actions { margin-left:auto; }
	.dashboard-layout,.trade-layout,.community-layout,.showcase-layout { grid-template-columns:1fr; }
	.right-rail { grid-template-columns:repeat(2,1fr); }
	.level-card { grid-column:span 2; }
	.hero-card { grid-template-columns:minmax(0,1fr) 320px; }
	.hero-card__copy { padding-left:28px; }
	.market-grid { grid-template-columns:repeat(3,1fr); }
	.retailer-directory { grid-template-columns:repeat(2,1fr); }
	.match-card { position:static; }
	.collection-hero { grid-template-columns:minmax(0,1fr) 330px; }
	.studio-shell,.security-layout { grid-template-columns:190px minmax(0,1fr); gap:16px; }
	.analytics-grid { grid-template-columns:repeat(2,1fr); }
	.table-row { grid-template-columns:minmax(180px,1.3fr) .7fr .7fr 90px; }
	.table-row > :nth-child(4) { display:none; }
}

@media (max-width: 760px) {
	:root { --header-height:60px; }
	body { padding-bottom:72px; }
	.trust-strip { height:auto; min-height:29px; padding:4px 0; }
	.trust-strip__inner { width:100%; justify-content:center; gap:0; padding:0 12px; }
	.trust-strip__inner > span:nth-child(2),.trust-strip__inner > span:nth-child(3) { display:none; }
	.trust-link { margin-left:auto; font-size:12px; }
	.site-header__inner { width:calc(100% - 24px); gap:10px; }
	.brand__word { font-size:16px; }
	.brand__beta,.profile-button__copy,.profile-button > svg { display:none; }
	.header-actions { gap:6px; }
	.search-trigger,.icon-button { width:38px; height:38px; }
	.profile-button { padding:1px; }
	.view { width:calc(100% - 24px); padding:22px 0 28px; }
	.mobile-nav { position:fixed; z-index:100; right:0; bottom:0; left:0; height:68px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); background:rgba(255,255,255,.96); padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)); backdrop-filter:blur(14px); }
	.mobile-nav__item { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; background:none; color:var(--muted); font-size:12px; font-weight:650; cursor:pointer; }
	.mobile-nav__item svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
	.mobile-nav__item.is-active { color:var(--primary); }
	.mobile-nav__item--claim { transform:translateY(-12px); }
	.mobile-claim { width:45px; height:45px; display:grid; place-items:center; border:4px solid var(--canvas); border-radius:50%; background:var(--primary); color:white; box-shadow:0 7px 18px rgba(103,87,232,.3); }
	.mobile-nav__item--claim > span:last-child { color:var(--primary); }
	.welcome-row { align-items:flex-start; }
	.setup-progress { min-width:0; width:45px; height:45px; padding:4px; border-radius:50%; }
	.setup-progress__copy,.setup-progress > svg { display:none; }
	.hero-card { min-height:410px; display:block; }
	.hero-card__copy { padding:25px 23px 0; }
	.hero-card h2 { max-width:310px; font-size:34px; }
	.hero-card__progress { max-width:100%; }
	.hero-card__visual { min-height:180px; }
	.hero-collectible { width:132px; height:167px; top:7px; left:57%; border-width:4px; border-radius:16px; }
	.hero-card__serial { right:15px; bottom:16px; }
	.hero-card__actions .button--white { display:none; }
	.metric-grid { grid-template-columns:repeat(2,1fr); }
	.collection-grid { grid-template-columns:repeat(2,1fr); }
	.collection-card:nth-child(3) { display:none; }
	.claim-grid,.market-grid { grid-template-columns:repeat(2,1fr); }
	.claim-grid .item-card:nth-child(4) { display:block; }
	.item-art,.market-grid .item-art { height:170px; }
	.right-rail { grid-template-columns:1fr; }
	.level-card { grid-column:auto; }
	.page-heading { align-items:flex-start; }
	.heading-actions .button span.mobile-hide { display:none; }
	.toolbar { flex-wrap:wrap; }
	.toolbar__search { min-width:100%; }
	.retailer-directory { grid-template-columns:1fr; }
	.collection-hero { min-height:410px; display:block; }
	.collection-hero__copy { padding:25px; }
	.collection-hero__visual { height:180px; }
	.collection-fan-card { width:108px; height:140px; top:10px; }
	.inventory-layout,.studio-shell,.security-layout { grid-template-columns:1fr; }
	.inventory-sidebar,.studio-nav,.security-nav { position:static; display:flex; overflow:auto; padding-bottom:4px; }
	.inventory-side-button,.studio-link { width:auto; flex:0 0 auto; }
	.inventory-summary,.studio-brand { display:none; }
	.inventory-grid { grid-template-columns:repeat(2,1fr); }
	.trade-summary-grid { grid-template-columns:repeat(2,1fr); }
	.trade-comparison { grid-template-columns:1fr 34px 1fr; gap:5px; }
	.trade-item { display:grid; justify-items:center; text-align:center; }
	.trade-item__copy { width:100%; }
	.community-layout { display:block; }
	.community-layout > aside { margin-top:15px; }
	.showcase-cover { min-height:340px; }
	.showcase-profile { left:20px; bottom:95px; align-items:center; }
	.showcase-avatar { width:70px; height:70px; border-radius:21px; }
	.showcase-stats { right:auto; bottom:25px; left:23px; }
	.shelf-items { grid-template-columns:repeat(2,1fr); }
	.shelf-item:nth-child(4) { display:block; }
	.analytics-grid { grid-template-columns:repeat(2,1fr); }
	.campaign-table { overflow-x:auto; }
	.table-row { min-width:640px; }
	.wizard-layout { display:block; min-height:0; }
	.wizard-aside { min-height:116px; padding:18px 21px; }
	.wizard-aside__copy { margin:13px 0 0; }
	.wizard-aside__copy h3 { font-size:18px; }
	.wizard-aside__copy p { display:none; }
	.wizard-steps { position:absolute; right:18px; bottom:17px; }
	.wizard-main { padding:20px; }
	.wizard-content { padding:18px 0; }
	.choice-grid { grid-template-columns:1fr; }
	.choice-card { min-height:66px; }
	.feature-layout { grid-template-columns:1fr; }
	.feature-categories { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
	.feature-category { width:auto; flex:0 0 auto; }
	.feature-grid { grid-template-columns:1fr; }
	.feature-count { display:none; }
	.trade-builder { grid-template-columns:1fr; }
	.trade-builder__arrow { margin:0 auto; transform:rotate(90deg); }
	.modal--wide { max-height:94vh; }
	.form-grid { grid-template-columns:1fr; }
	.form-field--full { grid-column:auto; }
	.supply-editor { overflow-x:auto; }
	.supply-editor__row { min-width:520px; }
	.page-footer { align-items:flex-start; flex-direction:column; }
	.toast-region { right:12px; bottom:80px; left:12px; }
	.toast { min-width:0; max-width:none; }
}

@media (max-width: 430px) {
	.claim-grid,.market-grid,.inventory-grid { gap:9px; }
	.item-card__body { padding:10px; }
	.supply-row { align-items:flex-start; flex-direction:column; }
	.item-card h3 { white-space:normal; }
	.item-art,.market-grid .item-art { height:150px; }
	.collection-card__cover { height:112px; }
	.trade-summary-grid { gap:8px; }
	.summary-card { gap:8px; padding:11px; }
	.summary-card__icon { width:34px; height:34px; }
	.post-showcase { min-height:190px; }
	.post-mini-card { width:80px; height:118px; }
	.claim-facts { gap:5px; }
	.claim-fact { padding:8px 4px; }
}

/* Readability baseline for the consumer-facing experience. */
.page-heading p,
.section-heading p,
.welcome-row p,
.collection-hero__copy p,
.showcase-profile__copy p,
.match-card p,
.post-copy,
.security-panel__head p,
.verification-banner__copy span {
	font-size: 15px;
}

.retailer-card p,
.activity-item__copy span,
.setting-copy strong,
.trade-user__copy strong,
.trade-item__copy strong,
.choice-copy strong,
.claim-body > p,
.claim-note,
.wizard-content > p,
.safety-item__copy strong,
.feature-copy strong,
.form-field label {
	font-size: 14px;
}

.choice-copy span,
.safety-item__copy span,
.setting-copy span,
.feature-copy span,
.form-hint,
.notification-copy span {
	font-size: 13px;
}

.feature-status {
	font-size: 12px;
}

.button--small {
	min-height: 38px;
}

@media (max-width: 760px) {
	.trust-strip__inner > span:not(.demo-status) {
		display: none;
	}

	.trust-strip__inner .demo-status::before { display:none; }

	.trust-strip__inner .demo-status {
		margin-right: auto;
		font-size: 12px;
	}

	.trust-link {
		font-size: 0;
	}

	.trust-link::after {
		content: "Safety";
		font-size: 12px;
	}

	.button,
	.filter-chip,
	.select-control,
	.composer__action {
		min-height: 44px;
	}

	.modal--wizard,
	.modal--claim {
		max-height: 94vh;
		overflow-y: auto;
	}
}

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