/* ==========================================================================
   Crypto Airdrop Claim — "Manifest" theme
   All colors driven by --caa-accent / --caa-bg / --caa-panel / --caa-ink /
   --caa-success / --caa-danger, set inline per-install from the admin's
   color pickers. Secondary tones are derived with color-mix() so the admin
   only has to manage a handful of controls but the whole surface stays
   tonally consistent.
   ========================================================================== */

.caa-root {
	/* Fallback values if the inline style block is ever stripped. */
	--caa-accent: #f2a93b;
	--caa-bg: #10161a;
	--caa-panel: #1b2328;
	--caa-ink: #ece7da;
	--caa-success: #7c8f5e;
	--caa-danger: #d9694f;

	/* Derived tones. */
	--caa-panel-edge: color-mix(in srgb, var(--caa-ink) 14%, var(--caa-panel));
	--caa-bg-alt: color-mix(in srgb, var(--caa-panel) 55%, var(--caa-bg));
	--caa-ink-dim: color-mix(in srgb, var(--caa-ink) 62%, var(--caa-bg));
	--caa-ink-faint: color-mix(in srgb, var(--caa-ink) 38%, var(--caa-bg));
	--caa-accent-ink: color-mix(in srgb, black 82%, var(--caa-accent));

	--caa-font-display: 'Oswald', 'Arial Narrow', sans-serif;
	--caa-font-mono: 'JetBrains Mono', 'Courier New', monospace;
	--caa-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	max-width: 640px;
	margin: 3rem auto;
	padding: 3rem 1.75rem 3.25rem;
	color: var(--caa-ink);
	font-family: var(--caa-font-body);
	background: var(--caa-bg);
	background-image:
		radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--caa-ink) 6%, transparent) 1px, transparent 0);
	background-size: 22px 22px;
	border: 1px solid var(--caa-panel-edge);
	border-radius: 14px;
	box-sizing: border-box;
	position: relative;
}
.caa-root *, .caa-root *::before, .caa-root *::after { box-sizing: border-box; }

/* Hazard corner accents — a small, restrained nod to cargo/warning stripes. */
.caa-root::before,
.caa-root::after {
	content: '';
	position: absolute;
	top: 0;
	width: 46px;
	height: 6px;
	background: repeating-linear-gradient(-45deg, var(--caa-accent), var(--caa-accent) 6px, transparent 6px, transparent 12px);
	opacity: 0.55;
	border-radius: 0 0 3px 3px;
}
.caa-root::before { left: 24px; }
.caa-root::after { right: 24px; }

/* ---------- Header ---------- */
.caa-header { text-align: center; margin-bottom: 2.25rem; }

.caa-header__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--caa-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--caa-success);
	background: color-mix(in srgb, var(--caa-success) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--caa-success) 40%, transparent);
	padding: 0.3rem 0.75rem;
	border-radius: 2px;
	margin-bottom: 1rem;
}
.caa-header__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--caa-success);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--caa-success) 25%, transparent);
	animation: caa-pulse 2.2s ease-in-out infinite;
}
@keyframes caa-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.caa-title {
	font-family: var(--caa-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 2.75rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 0.35rem;
	color: var(--caa-ink);
}
.caa-subtitle {
	font-family: var(--caa-font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--caa-accent);
	margin: 0 0 1rem;
}
.caa-description {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--caa-ink-dim);
	max-width: 480px;
	margin: 0 auto;
}

/* ---------- Coin icon badge ---------- */
.caa-coin-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.caa-coin-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caa-coin-icon--fallback {
	background: color-mix(in srgb, var(--caa-accent) 22%, var(--caa-panel));
	color: var(--caa-accent);
	font-family: var(--caa-font-display);
	font-weight: 700;
}
.caa-coin-icon--lg { width: 56px; height: 56px; font-size: 1.5rem; margin: 0 auto 1rem; }
.caa-coin-icon--md { width: 30px; height: 30px; font-size: 0.9rem; margin-right: 0.15rem; }

/* ---------- Card (the "manifest") ---------- */
.caa-card {
	position: relative;
	background: var(--caa-panel);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 20px 50px -22px rgba(0, 0, 0, 0.65);
}
.caa-card + .caa-card,
.caa-info-row + .caa-card {
	margin-top: 1.5rem;
}

/* Torn ticket-stub perforation along the top edge */
.caa-perforation {
	height: 14px;
	width: 100%;
	background-image: radial-gradient(circle, var(--caa-bg) 4px, transparent 4.5px);
	background-size: 20px 20px;
	background-position: center -6px;
	background-repeat: repeat-x;
}

.caa-card__band {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.5rem;
	background: var(--caa-bg-alt);
	border-bottom: 1px dashed var(--caa-panel-edge);
	font-family: var(--caa-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--caa-ink-faint);
	text-transform: uppercase;
	overflow: hidden;
}
.caa-serial { color: var(--caa-accent); white-space: nowrap; }
.caa-band-sep { opacity: 0.4; }
.caa-recipient { color: var(--caa-ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }

.caa-card__body {
	position: relative;
	padding: 2rem 1.75rem 2.25rem;
}

.caa-eyebrow {
	display: block;
	font-family: var(--caa-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--caa-ink-faint);
	margin-bottom: 0.5rem;
}

.caa-balance-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.caa-balance-value {
	font-family: var(--caa-font-mono);
	font-weight: 700;
	font-size: clamp(2.4rem, 9vw, 3.2rem);
	line-height: 1;
	color: var(--caa-ink);
	transition: opacity 0.15s ease;
}
.caa-balance-value.is-updating { opacity: 0.35; }
.caa-balance-coin {
	font-family: var(--caa-font-display);
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	color: var(--caa-accent);
	text-transform: uppercase;
	align-self: flex-end;
	padding-bottom: 0.35rem;
}

.caa-divider {
	height: 1px;
	margin: 1.5rem 0;
	background-image: linear-gradient(to right, var(--caa-panel-edge) 60%, transparent 0%);
	background-size: 10px 1px;
	background-repeat: repeat-x;
}

.caa-timer-block { margin-bottom: 1.75rem; }
.caa-timer-digits {
	font-family: var(--caa-font-mono);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--caa-ink);
	letter-spacing: 0.02em;
}
.caa-timer-ready {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--caa-font-mono);
	font-size: 1.15rem;
	color: var(--caa-success);
}
.caa-timer-ready::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--caa-success);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--caa-success) 20%, transparent);
}

.caa-wallet-block { margin-bottom: 1.5rem; }
.caa-wallet-input {
	width: 100%;
	background: var(--caa-bg);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 4px;
	padding: 0.7rem 0.85rem;
	font-family: var(--caa-font-mono);
	font-size: 0.9rem;
	color: var(--caa-ink);
}
.caa-wallet-input:focus {
	outline: none;
	border-color: var(--caa-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--caa-accent) 25%, transparent);
}

/* ---------- Buttons ---------- */
.caa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.95rem 1.5rem;
	font-family: var(--caa-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background-color 0.12s ease;
}
.caa-btn--primary,
.caa-btn--stamp {
	background: var(--caa-accent);
	color: var(--caa-accent-ink);
	box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--caa-accent) 70%, transparent);
}
.caa-btn--primary:hover,
.caa-btn--stamp:not(:disabled):hover {
	transform: translateY(-1px);
}
.caa-btn--stamp:active:not(:disabled) { transform: translateY(0) scale(0.99); }
.caa-btn--stamp:disabled {
	background: var(--caa-panel-edge);
	color: var(--caa-ink-faint);
	box-shadow: none;
	cursor: not-allowed;
}
.caa-btn--stamp.is-loading { opacity: 0.7; cursor: wait; }

.caa-btn--copy {
	width: auto;
	flex-shrink: 0;
	padding: 0.7rem 1.1rem;
	font-size: 0.78rem;
	background: var(--caa-panel-edge);
	color: var(--caa-ink);
}
.caa-btn--copy:hover { background: color-mix(in srgb, var(--caa-accent) 25%, var(--caa-panel-edge)); }
.caa-btn--copy.is-copied { background: var(--caa-success); color: #0d1410; }

.caa-feedback {
	margin-top: 0.9rem;
	font-size: 0.85rem;
	text-align: center;
	min-height: 1.2em;
}
.caa-feedback.is-error { color: var(--caa-danger); }
.caa-feedback.is-success { color: var(--caa-success); }

/* Ink stamp that flashes across the card on a successful claim */
.caa-stamp {
	position: absolute;
	top: 45%;
	right: 1.5rem;
	transform: translateY(-50%) rotate(-14deg) scale(0.6);
	font-family: var(--caa-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.12em;
	color: var(--caa-danger);
	border: 3px solid var(--caa-danger);
	padding: 0.25rem 0.9rem;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
}
.caa-stamp.is-visible {
	animation: caa-stamp-hit 1.6s ease-out forwards;
}
@keyframes caa-stamp-hit {
	0%   { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(1.8); }
	12%  { opacity: 0.92; transform: translateY(-50%) rotate(-14deg) scale(0.95); }
	18%  { transform: translateY(-50%) rotate(-14deg) scale(1); }
	78%  { opacity: 0.92; }
	100% { opacity: 0; }
}

.caa-card__footer-strip {
	height: 8px;
	background: repeating-linear-gradient(
		-45deg,
		var(--caa-accent),
		var(--caa-accent) 10px,
		var(--caa-bg-alt) 10px,
		var(--caa-bg-alt) 20px
	);
	opacity: 0.85;
}

/* ---------- Locked (logged-out) state ---------- */
.caa-locked-body { text-align: center; padding: 3rem 1.75rem; }
.caa-locked-icon { color: var(--caa-accent); width: 48px; height: 48px; margin: 0 auto 1.25rem; }
.caa-locked-icon svg { width: 100%; height: 100%; }
.caa-locked-title {
	font-family: var(--caa-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.4rem;
	margin: 0 0 0.6rem;
}
.caa-locked-text { color: var(--caa-ink-dim); font-size: 0.9rem; max-width: 380px; margin: 0 auto 1.5rem; }
.caa-locked-register { display: block; margin-top: 0.9rem; font-size: 0.85rem; color: var(--caa-ink-faint); text-decoration: underline; }
.caa-locked-register:hover { color: var(--caa-accent); }

/* ---------- Terms ---------- */
.caa-terms {
	margin-top: 1.25rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--caa-ink-faint);
	text-align: center;
}

/* ---------- Info row: supply progress + TGE countdown ---------- */
.caa-info-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}
.caa-info-block {
	background: var(--caa-panel);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 6px;
	padding: 1.1rem 1.25rem 1.25rem;
}

.caa-supply-figures { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.caa-supply-current {
	font-family: var(--caa-font-mono);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--caa-ink);
}
.caa-supply-sep { color: var(--caa-ink-faint); }
.caa-supply-total {
	font-family: var(--caa-font-mono);
	font-size: 0.85rem;
	color: var(--caa-ink-dim);
}
.caa-progress {
	height: 8px;
	border-radius: 4px;
	background: var(--caa-panel-edge);
	overflow: hidden;
}
.caa-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--caa-accent), color-mix(in srgb, var(--caa-accent) 70%, var(--caa-success)));
	border-radius: 4px;
	transition: width 0.4s ease;
}

.caa-tge-block { text-align: left; }
.caa-tge-countdown .caa-timer-digits {
	font-size: 1.25rem;
}
.caa-tge-date {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--caa-ink-faint);
	font-family: var(--caa-font-mono);
}

/* ---------- Referral ledger card ---------- */
.caa-referral-link-row {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.caa-referral-link-input {
	flex: 1;
	min-width: 0;
	background: var(--caa-bg);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 4px;
	padding: 0.7rem 0.85rem;
	font-family: var(--caa-font-mono);
	font-size: 0.8rem;
	color: var(--caa-ink-dim);
}

.caa-referral-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--caa-panel-edge);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.caa-referral-stat { background: var(--caa-bg-alt); padding: 0.9rem 0.75rem; text-align: center; }
.caa-referral-stat__value {
	display: block;
	font-family: var(--caa-font-mono);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--caa-ink);
}
.caa-referral-stat__label {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--caa-ink-faint);
	margin-top: 0.25rem;
}

.caa-referral-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
}
.caa-referral-history__list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--caa-panel-edge);
	font-size: 0.85rem;
}
.caa-referral-history__list li:last-child { border-bottom: none; }
.caa-referral-history__user { color: var(--caa-ink-dim); }
.caa-referral-history__amount {
	font-family: var(--caa-font-mono);
	color: var(--caa-success);
	font-weight: 600;
}
.caa-referral-empty { color: var(--caa-ink-faint); font-size: 0.85rem; text-align: center; margin: 0.5rem 0 0; }

/* ---------- Stats strip ---------- */
.caa-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 2.5rem;
	background: var(--caa-panel-edge);
	border: 1px solid var(--caa-panel-edge);
	border-radius: 6px;
	overflow: hidden;
}
.caa-stat { background: var(--caa-panel); padding: 1.1rem 0.5rem; text-align: center; }
.caa-stat__value {
	display: block;
	font-family: var(--caa-font-mono);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--caa-ink);
}
.caa-stat__label {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--caa-ink-faint);
	margin-top: 0.3rem;
}

/* ---------- Social links ---------- */
.caa-social {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}
.caa-social a {
	font-family: var(--caa-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--caa-ink-dim);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.caa-social a:hover { color: var(--caa-accent); border-bottom-color: var(--caa-accent); }

/* ---------- Motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.caa-header__dot, .caa-stamp.is-visible { animation: none !important; }
}
.caa-btn:focus-visible,
.caa-wallet-input:focus-visible,
.caa-referral-link-input:focus-visible,
.caa-social a:focus-visible {
	outline: 2px solid var(--caa-accent);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.caa-root { margin: 1.5rem auto; padding: 2.25rem 1.1rem 2rem; border-radius: 10px; }
	.caa-card__body { padding: 1.5rem 1.25rem 1.75rem; }
	.caa-stamp { right: 1rem; font-size: 1.2rem; }
	.caa-stats { grid-template-columns: 1fr; }
	.caa-referral-link-row { flex-direction: column; }
	.caa-btn--copy { width: 100%; }
	.caa-root::before, .caa-root::after { width: 32px; }
}